:root {
      --bg:#020617;
      --panel:rgba(15,23,42,.65);
      --line:rgba(255,255,255,.08);
      --text:rgba(255,255,255,.92);
      --muted:rgba(255,255,255,.70);
      --accent:#fb923c;
      --accent2:#fdba74;
      --ai:#22c55e;
      --shadow: 0 18px 50px rgba(0,0,0,.45);
      --radius: 18px;
    }
    html, body { height:100%; }
    body {
      font-family: 'Space Grotesk', sans-serif;
      background:
        radial-gradient(900px 600px at 12% 10%, rgba(249,115,22,.18), transparent 60%),
        radial-gradient(900px 600px at 88% 90%, rgba(59,130,246,.16), transparent 60%),
        var(--bg);
      color: var(--text);
    }
    /* Soft grid like index */
    .tech-grid {
      background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
      background-size: 30px 30px;
    }
    .glass {
      background: var(--panel);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
      border-radius: var(--radius);
    }
    /* Make legacy elements look modern without changing structure */
    .topbar, .footer { background: transparent; }
    .flash { margin: 10px 0; }
  
    /* Nav links (works even if backend prints <a> without classes) */
    nav a {
      display:inline-flex; align-items:center; gap:.4rem;
      padding: .55rem .85rem;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(2,6,23,.35);
      color: rgba(255,255,255,.85);
      text-decoration:none;
    }
    nav a:hover { background: rgba(249,115,22,.16); border-color: rgba(249,115,22,.35); color: white; }
    nav .btn, nav .link { background: rgba(2,6,23,.35); }
    /* Cards: if templates use .card, .row, .list... give them modern looks */
    .card, section.card {
      background: var(--panel);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
      border-radius: var(--radius);
      padding: 16px;
    }
    @media (min-width: 640px){ .card, section.card { padding: 22px; } }
    .muted { color: var(--muted); }
    .btn, button, input[type="submit"] {
      border-radius: 999px;
    }
    button, .btn {
      background: #fb923c;
      color: white;
      border: 1px solid rgba(255,255,255,.10);
      padding: .8rem 1rem;
      font-weight: 700;
    }
    button:hover, .btn:hover { background: #fdba74; }
    input, select, textarea {
      width: 100%;
      background: rgba(2,6,23,.5);
      border: 1px solid rgba(255,255,255,.10);
      color: rgba(255,255,255,.92);
      padding: .85rem .9rem;
      border-radius: 14px;
      outline: none;
    }
    input:focus, select:focus, textarea:focus {
      border-color: rgba(249,115,22,.55);
      box-shadow: 0 0 0 4px rgba(249,115,22,.18);
    }
    label { display:block; margin-top: 12px; margin-bottom: 6px; color: rgba(255,255,255,.75); font-size: .9rem; }
    .headrow { display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; }
    .list { display:flex; flex-direction:column; gap:10px; margin-top: 10px; }
    .row {
      background: rgba(2,6,23,.35);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 16px;
      padding: 12px 14px;
    }
    .row__title { font-weight: 800; }
    .pill { background: rgba(251,146,60,.18); border: 1px solid rgba(251,146,60,.35); color: rgba(255,255,255,.92); padding: 2px 10px; border-radius: 999px; font-size: 12px; }
    .grid2 { display:grid; grid-template-columns: 1fr; gap: 12px; }
    @media (min-width: 640px){ .grid2 { grid-template-columns: 1fr 1fr; } }
    .stats { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
    @media (min-width: 640px){ .stats { grid-template-columns: repeat(4, minmax(0,1fr)); } }
    .stat { background: rgba(2,6,23,.35); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 12px; }
    .stat__n { font-size: 26px; font-weight: 900; }
    .stat__l { font-size: 12px; color: rgba(255,255,255,.65); }
    .stack { display:flex; flex-direction:column; gap: 14px; }
    /* Make checkbox row nicer without changing name/id */
    .chk { display:flex; align-items:center; gap:10px; margin-top: 12px; color: rgba(255,255,255,.8); }
    .chk input { width: 18px; height: 18px; padding:0; }

  
    img{max-width:100%;height:auto}
    .photo, .product-photo, .thumb, img.thumb, img.photo {object-fit:cover;border-radius:14px;background:rgba(2,6,23,.45);border:1px solid rgba(255,255,255,.08)}
    /* If image missing: show a subtle placeholder behind */
    .imgwrap{position:relative;overflow:hidden;border-radius:14px;background:rgba(2,6,23,.45);border:1px solid rgba(255,255,255,.08)}
    .imgwrap:before{content:"Sem foto";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.45);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
    .imgwrap > img{position:relative;z-index:2;width:100%;height:100%;object-fit:cover}
    
    /* Mobile action bar */
    .actionbar{
      position: sticky;
      bottom: 0;
      z-index: 40;
      margin-top: 14px;
      padding-top: 10px;
      padding-bottom: 10px;
      background: linear-gradient(to top, rgba(2,6,23,.92), rgba(2,6,23,0));
    }
    .actionbar__in{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      justify-content:flex-end;
      align-items:center;
    }
    .btn-secondary{
      background: rgba(2,6,23,.35);
      border: 1px solid rgba(255,255,255,.10);
      color: rgba(255,255,255,.85);
      padding: .75rem 1rem;
      border-radius: 999px;
      font-weight: 800;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      text-decoration:none;
    }
    .btn-secondary:hover{ background: rgba(249,115,22,.12); border-color: rgba(249,115,22,.30); color:white; }
    .btn-danger{
      background: rgba(244,63,94,.14);
      border: 1px solid rgba(244,63,94,.35);
      color: rgba(255,255,255,.92);
      padding: .75rem 1rem;
      border-radius: 999px;
      font-weight: 800;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      text-decoration:none;
    }
    .btn-danger:hover{ background: rgba(244,63,94,.22); }
    .empty{
      padding: 18px;
      border-radius: 18px;
      border: 1px dashed rgba(255,255,255,.16);
      background: rgba(2,6,23,.25);
      color: rgba(255,255,255,.75);
    }
    .kpi{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(2,6,23,.28);
      color: rgba(255,255,255,.78);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    
    /* IHC overrides */
    h1{font-size: clamp(22px, 3.2vw, 34px); font-weight: 900; letter-spacing:-.02em; margin: 0 0 10px 0;}
    h2{font-size: clamp(18px, 2.5vw, 26px); font-weight: 900; margin: 0 0 8px 0;}
    h3{font-size: 16px; font-weight: 900; margin-top: 14px;}
    p{line-height:1.55}
    .muted{font-size: 14px}
    /* Controls: consistent, finger-friendly */
    input, select, textarea{
      min-height: 44px !important;
      font-size: 15px !important;
    }
    textarea{min-height: 96px !important;}
    .btn, button, input[type="submit"]{
      min-height: 44px;
      font-size: 15px;
      padding: .72rem 1rem;
    }
    /* Secondary buttons look calmer */
    .btn-secondary{min-height:44px}
    /* Better spacing inside forms */
    form{display:flex; flex-direction:column; gap: 10px;}
    .checklist{display:flex; flex-direction:column; gap: 10px; margin-top: 6px;}
    .check{display:flex; gap: 10px; align-items:flex-start; padding: 10px 12px; border-radius:16px; border:1px solid rgba(255,255,255,.08); background: rgba(2,6,23,.28);}
    .check input{margin-top:2px}
    .preview{display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding: 10px 12px; border-radius:16px; border:1px solid rgba(255,255,255,.08); background: rgba(2,6,23,.22);}
    /* If actionbar exists in form, hide legacy inline submit/back (desktop still OK) */
.actionbar{position: static; background: none; padding: 0; margin-top: 10px;}
      .actionbar__in{justify-content:flex-start}
    }
    
    .btn-eq{height:52px !important}
    .btn-sm{min-height:40px !important; height:40px !important; padding:.5rem .75rem !important; font-size:13px !important}
    .pill-ok{background: rgba(34,197,94,.16); border:1px solid rgba(34,197,94,.35); color: rgba(255,255,255,.92)}
    .pill-off{background: rgba(244,63,94,.14); border:1px solid rgba(244,63,94,.35); color: rgba(255,255,255,.92)}
    .pill-warn{background: rgba(251,146,60,.14); border:1px solid rgba(251,146,60,.32); color: rgba(255,255,255,.92)}
    /* mobile table -> cards helper */
    .table{width:100%; border-collapse:collapse}
    .table th,.table td{padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.08); vertical-align:top}
    @media (max-width: 640px){
      .table thead{display:none}
      .table tr{display:block; border:1px solid rgba(255,255,255,.08); border-radius:16px; background: rgba(2,6,23,.22); margin-bottom:10px; padding:10px}
      .table td{display:flex; justify-content:space-between; gap:12px; border:none; padding:6px 0}
      .table td:before{content:attr(data-label); color:rgba(255,255,255,.55); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em}
    }
    
    /* Show actionbar submit on mobile; hide legacy inline actions only when explicitly marked */
    @media (max-width: 899px){
      .legacy-inline{display:none !important}
    }
    @media (min-width: 900px){
      .legacy-inline{display:inline-flex !important}
    }
    
    .btn-xs{
      min-height: 34px !important;
      height: 34px !important;
      padding: .35rem .55rem !important;
      font-size: 12px !important;
      border-radius: 999px !important;
      letter-spacing: .02em;
    }
    @media (max-width: 640px){
      .btncol{gap:6px}
    }
    
    @media (max-width: 640px){
      .row{flex-direction:column; align-items:stretch}
      .row__right{width:100%}
      .actions{justify-content:flex-start}
      .btn-pill{min-height:34px !important; height:34px !important; padding:.35rem .6rem !important; font-size:12px !important}
    }