:root{
  --bg:#F6F7FA; --card:#FFFFFF; --line:#E7EAF0; --line2:#F1F3F7;
  --ink:#1C2433; --sub:#68738A; --faint:#9AA3B5;
  --brand:#E8590C; --brand-soft:#FEF0E7; --brand-dark:#C2410C;
  --brand-grad:linear-gradient(135deg,#F97316,#E8590C);
  --teal:#0F766E; --teal-soft:#E4F4F1;
  --blue:#1D4ED8; --blue-soft:#EAF0FE;
  --amber:#B45309; --amber-soft:#FDF3E3;
  --red:#B91C1C; --red-soft:#FDECEC;
  --green:#15803D; --green-soft:#E9F6EE;
  --r:14px;
  --shadow:0 1px 3px rgba(23,32,55,.06);
  --shadow-hover:0 10px 26px rgba(23,32,55,.10);
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:'Inter',system-ui,sans-serif;font-size:14px;min-height:100dvh;display:flex;flex-direction:column}
a{color:inherit;text-decoration:none}

.topbar{background:var(--card);border-bottom:1px solid var(--line);padding:0 20px;height:60px;display:flex;align-items:center;gap:14px;flex-shrink:0;position:sticky;top:0;z-index:40}
.logo{display:flex;align-items:center;gap:10px}
.logo-mark{width:34px;height:34px;border-radius:10px;background:var(--brand-grad);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;box-shadow:0 3px 8px rgba(232,89,12,.3)}
.logo-name{font-weight:700;font-size:15px}
.logo-name span{color:var(--brand)}
.top-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.user-pill{display:flex;align-items:center;gap:8px}
.user-pill .nm{font-size:12.5px;font-weight:600}
.role-tag{font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--brand-dark);background:var(--brand-soft);padding:3px 9px;border-radius:99px}

.layout{flex:1;display:flex;min-height:0}
.sidebar{width:236px;background:var(--card);border-right:1px solid var(--line);padding:14px 10px;flex-shrink:0}
.side-sec{font-size:10.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--faint);padding:12px 12px 6px}
.side-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:10px;font-size:13.5px;font-weight:500;color:var(--sub)}
.side-item:hover{background:var(--line2)}
.side-item.active{background:var(--brand-soft);color:var(--brand-dark);font-weight:600}
.side-item .ic{width:18px;text-align:center;font-size:14px}
.main{flex:1;overflow-y:auto;padding:24px 28px}
.page{max-width:1100px;margin:0 auto}
.page-title{font-size:21px;font-weight:800;letter-spacing:-.3px}
.page-sub{font-size:13px;color:var(--sub);margin-top:3px}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:20px;flex-wrap:wrap}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.hoverable{transition:transform .15s,box-shadow .15s}
.hoverable:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover)}
.card-pad{padding:18px}
.card-title{font-size:13px;font-weight:700;margin-bottom:12px}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.g4{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:22px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--shadow);display:flex;gap:12px;align-items:flex-start}
.kpi .bub{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.kpi .k-label{font-size:12px;color:var(--sub);font-weight:500}
.kpi .k-value{font-size:22px;font-weight:800;letter-spacing:-.5px;margin-top:2px}
.kpi .k-delta{font-size:11.5px;font-weight:600;margin-top:2px}
.up{color:var(--green)} .down{color:var(--red)} .flat{color:var(--sub)}

.badge{display:inline-block;padding:3px 10px;border-radius:99px;font-size:11px;font-weight:600}
.b-brand{background:var(--brand-soft);color:var(--brand-dark)}
.b-teal{background:var(--teal-soft);color:var(--teal)}
.b-blue{background:var(--blue-soft);color:var(--blue)}
.b-amber{background:var(--amber-soft);color:var(--amber)}
.b-red{background:var(--red-soft);color:var(--red)}
.b-green{background:var(--green-soft);color:var(--green)}
.b-gray{background:var(--line2);color:var(--sub)}

.btn{display:inline-block;padding:10px 16px;border-radius:10px;border:none;background:var(--brand-grad);color:#fff;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;box-shadow:0 2px 6px rgba(232,89,12,.25)}
.btn:hover{filter:brightness(1.05)}
.btn:disabled{background:#D8DCE3;box-shadow:none;cursor:default}
.btn-ghost{background:var(--card);border:1px solid var(--line);color:var(--ink);box-shadow:none}
.btn-ghost:hover{background:var(--line2);filter:none}
.btn-sm{padding:7px 13px;font-size:12px;border-radius:9px}
input,select,textarea{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;font-family:inherit;font-size:13.5px;color:var(--ink);background:var(--card);outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(232,89,12,.10)}
label.f{display:block;font-size:12px;font-weight:600;margin:0 0 6px}
.field{margin-bottom:16px}
.tabs{display:inline-flex;background:var(--line2);border-radius:11px;padding:3px;margin-bottom:16px}
.tabs a{padding:8px 20px;border-radius:9px;font-size:13px;font-weight:600;color:var(--sub)}
.tabs a.active{background:var(--card);color:var(--ink);box-shadow:var(--shadow)}

.pav{position:relative;border-radius:50%;overflow:hidden;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:700;background:var(--brand)}
.pav img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ring{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--line)}

.search-hero{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--shadow);margin-bottom:18px}
.search-box{position:relative;max-width:560px}
.search-box .mag{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:15px;color:var(--faint)}
.search-box input{padding:13px 14px 13px 40px;border-radius:12px;font-size:14px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.chip-f{padding:7px 15px;border-radius:99px;border:1px solid var(--line);background:var(--card);font-size:12px;font-weight:600;color:var(--sub)}
.chip-f:hover{border-color:var(--brand);color:var(--brand-dark)}
.chip-f.on{background:var(--brand-grad);border-color:transparent;color:#fff;box-shadow:0 2px 6px rgba(232,89,12,.25)}
.result-count{font-size:12px;color:var(--sub);margin:2px 0 12px}

.mcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:20px 16px 16px;text-align:center;position:relative;overflow:hidden}
.mcard::before{content:"";position:absolute;top:0;left:0;right:0;height:56px;background:linear-gradient(135deg,#FFF3EA,#FDE7D6)}
.mcard>*{position:relative}
.mcard .nm{font-weight:700;font-size:14.5px;margin-top:10px}
.mcard .bz{font-size:12px;color:var(--sub);margin-top:2px}
.mcard .actions{display:flex;gap:8px;justify-content:center;margin-top:12px}

.palms label{display:inline-block}
.palms input{display:none}
.palms span{display:inline-flex;align-items:center;justify-content:center;width:34px;height:32px;border:1px solid var(--line);border-radius:8px;background:var(--card);font-size:12px;font-weight:700;color:var(--sub);cursor:pointer;margin-right:4px}
.palms input:checked+span.p-P{background:var(--green-soft);border-color:var(--green);color:var(--green)}
.palms input:checked+span.p-A{background:var(--red-soft);border-color:var(--red);color:var(--red)}
.palms input:checked+span.p-L{background:var(--amber-soft);border-color:var(--amber);color:var(--amber)}
.palms input:checked+span.p-M{background:var(--blue-soft);border-color:var(--blue);color:var(--blue)}
.palms input:checked+span.p-S{background:var(--teal-soft);border-color:var(--teal);color:var(--teal)}

.statrow{display:flex;justify-content:space-between;text-align:center;margin-top:12px;padding-top:12px;border-top:1px solid var(--line2)}
.statrow .v{font-weight:800;font-size:15px}
.statrow .l{font-size:10.5px;color:var(--faint);font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.bar{height:6px;background:var(--line2);border-radius:99px;overflow:hidden;margin-top:6px}
.bar i{display:block;height:100%;border-radius:99px}

.hero-banner{background:linear-gradient(120deg,#FFF6EF 0%,#FDECE0 55%,#FBE3D2 100%);border:1px solid #F6D9C3;border-radius:var(--r);padding:22px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.flash{background:var(--green-soft);border:1px solid #BBE3C8;color:var(--green);border-radius:11px;padding:11px 16px;font-size:13px;font-weight:600;margin-bottom:16px}
.errors{background:var(--red-soft);border:1px solid #F1C1C1;color:var(--red);border-radius:11px;padding:11px 16px;font-size:13px;margin-bottom:16px}
.empty{text-align:center;color:var(--sub);padding:40px 0;font-size:13px;grid-column:1/-1}

.auth-wrap{min-height:100dvh;background:linear-gradient(160deg,#FFF6EF,#FDE7D6);display:flex;align-items:center;justify-content:center;padding:24px}
.auth-card{width:100%;max-width:420px;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:30px;box-shadow:0 20px 50px rgba(23,32,55,.12)}

.menu-btn{display:none}
@media(max-width:860px){
  .main{padding:16px}
  .sidebar{position:fixed;left:0;top:60px;bottom:0;z-index:50;transform:translateX(-105%);transition:transform .22s;box-shadow:8px 0 24px rgba(0,0,0,.1)}
  .sidebar.open{transform:translateX(0)}
  .menu-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--line);border-radius:10px;background:var(--card);cursor:pointer;font-size:16px}
  .user-pill .nm{display:none}
  .grid2{grid-template-columns:1fr}
  .logo-name{display:none}
}