:root{
   --bg:#f3f4f6;
   --panel:#ffffff;
   --panel2:#f8fafc;
   --text:#0f172a;
   --muted:#475569;
   --border:rgba(15,23,42,.14);
   --shadow:0 8px 24px rgba(15,23,42,.08);
   --radius:16px;
   --radius-sm:12px;
   --focus:rgba(0, 128, 128, .22);
 }

 *{box-sizing:border-box}
 html{color-scheme:light}
 body{
   font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
   margin:0;
   background:radial-gradient(1000px 600px at 20% 0%, rgba(15,118,110,.09), transparent 60%), var(--bg);
   color:var(--text);
   line-height:1.45;
 }

 .container{max-width:1120px;margin:0 auto;padding:22px 16px}

 .topbar{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.82);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--border)}
 .brand a{color:var(--text);text-decoration:none;font-weight:750;letter-spacing:.2px}
 .topbar .container{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;padding-bottom:14px}

 .nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
 .nav a{color:var(--muted);text-decoration:none;padding:8px 12px;border-radius:999px;background:rgba(15,23,42,.04);border:1px solid rgba(15,23,42,.10);transition:transform .12s ease, background .12s ease, border-color .12s ease}
 .nav a:hover{background:rgba(15,23,42,.06);border-color:rgba(15,23,42,.16)}
 .nav a:active{transform:translateY(1px)}
 .nav .danger{background:rgba(220,38,38,.10);border-color:rgba(220,38,38,.25);color:#991b1b}
 .nav-user{opacity:.95;padding:8px 12px;border-radius:999px;background:rgba(15,23,42,.04);border:1px solid rgba(15,23,42,.10)}

 .card{background:linear-gradient(180deg, rgba(15,23,42,.02), rgba(15,23,42,.00)), var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
 .hstack{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}

 .grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px}
 .col-6{grid-column:span 6}
 .col-4{grid-column:span 4}
 .col-3{grid-column:span 3}
 .col-2{grid-column:span 2}
 .col-1{grid-column:span 1}
 .col-12{grid-column:span 12}
 @media (max-width:900px){.col-6,.col-4,.col-3{grid-column:span 12}}
 @media (max-width:600px){.col-2,.col-1{grid-column:span 12}}

 label{display:block;font-size:12px;opacity:.92;margin-bottom:6px}
 input,select,textarea{
   width:100%;
   padding:11px 12px;
   border-radius:var(--radius-sm);
   border:1px solid rgba(15,23,42,.16);
   background:var(--panel2);
   color:var(--text);
   outline:none;
   transition:border-color .12s ease, box-shadow .12s ease, background .12s ease;
 }
 input:focus,select:focus,textarea:focus{border-color:rgba(15,118,110,.55);box-shadow:0 0 0 4px var(--focus)}
 textarea{min-height:120px;resize:vertical}

 .btn{
   display:inline-flex;
   align-items:center;
   justify-content:center;
   gap:8px;
   padding:10px 14px;
   border-radius:999px;
   border:1px solid rgba(15,23,42,.14);
   background:rgba(15,23,42,.04);
   color:var(--text);
   text-decoration:none;
   cursor:pointer;
   transition:transform .12s ease, background .12s ease, border-color .12s ease;
 }
 .btn:hover{background:rgba(15,23,42,.06);border-color:rgba(15,23,42,.20)}
 .btn:active{transform:translateY(1px)}
 .btn.primary{background:rgba(15,118,110,.12);border-color:rgba(15,118,110,.35)}
 .btn.primary:hover{background:rgba(15,118,110,.16);border-color:rgba(15,118,110,.45)}
 .btn.danger{background:rgba(220,38,38,.10);border-color:rgba(220,38,38,.28);color:#991b1b}

 .table{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden;border-radius:var(--radius);border:1px solid var(--border)}
 .table th,.table td{padding:11px 12px;border-bottom:1px solid rgba(15,23,42,.10);text-align:left;font-size:13px}
 .table th{font-size:12px;opacity:.86;letter-spacing:.2px;background:rgba(15,23,42,.03)}
 .table tr:nth-child(2n) td{background:rgba(15,23,42,.012)}
 .table tr:hover td{background:rgba(15,23,42,.04)}
 .table tr:last-child td{border-bottom:none}

 .kpi{display:flex;gap:12px;flex-wrap:wrap}
 .kpi .k{flex:1;min-width:220px}
 .kpi .k strong{display:block;font-size:20px}

 .alert{padding:11px 12px;border-radius:var(--radius-sm);border:1px solid rgba(15,23,42,.14);background:rgba(15,23,42,.03);margin:12px 0}
 .alert.ok{border-color:rgba(22,163,74,.30);background:rgba(22,163,74,.10)}
 .alert.bad{border-color:rgba(220,38,38,.30);background:rgba(220,38,38,.10)}

 .modal-backdrop{position:fixed;inset:0;z-index:50;background:rgba(15,23,42,.55);display:flex;align-items:center;justify-content:center;padding:18px}
 .modal-backdrop[hidden]{display:none}
 .modal{width:min(860px, 96vw);max-height:85vh;overflow:auto;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 18px 48px rgba(15,23,42,.28);padding:16px}
 .modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
 .modal-title{font-weight:750;letter-spacing:.2px}
 .modal-body{margin-top:12px;white-space:pre-wrap;color:var(--text)}
 .modal-body.mono{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;white-space:pre;font-size:12px}

 .footer{border-top:1px solid var(--border);margin-top:30px}

 @media print{
   html{color-scheme:light}
   body{background:#fff}
   .topbar,.footer{display:none !important}
   .container{max-width:none !important;padding:0 !important}
   .card{box-shadow:none !important;border-color:#d1d5db !important}
   .table{border-color:#d1d5db !important}
   .table th,.table td{border-bottom-color:#e5e7eb !important}
   .btn,.print-actions{display:none !important}
 }