:root{
    --saffron-950:#7a2f00;
    --saffron-900:#8f3b00;
    --saffron-800:#b94d00;
    --saffron-700:#d86200;
    --saffron-600:#f17d12;

    --green-800:#1f6a2a;
    --green-700:#2f7d32;

    --ink-900:#162534;
    --ink-800:#24384b;
    --ink-700:#526273;

    --bg:#f5f7fa;
    --card:#ffffff;
    --card-soft:#fffdfa;
    --line:#e7eaf0;
    --line-strong:#d8dee8;
    --text:#1f2937;
    --muted:#6b7280;

    --danger:#d92d20;
    --success:#166534;

    --shadow-xs:0 2px 8px rgba(15,23,42,.05);
    --shadow-sm:0 10px 22px rgba(15,23,42,.07);
    --shadow-md:0 18px 38px rgba(15,23,42,.10);
    --shadow-lg:0 28px 70px rgba(15,23,42,.16);

    --radius-sm:14px;
    --radius-md:18px;
    --radius-lg:24px;
    --radius-xl:32px;
  }

  *{box-sizing:border-box}

  html,body{
    margin:0;
    padding:0;
    min-height:100%;
    font-family:Inter,"Segoe UI",Roboto,Arial,sans-serif;
    background:
      radial-gradient(circle at top left, rgba(255,153,51,.06), transparent 20%),
      radial-gradient(circle at bottom right, rgba(19,136,8,.05), transparent 18%),
      linear-gradient(180deg,#fffaf5 0%,#f7f8fb 35%,#f3f5f8 100%);
    color:var(--text);
    overflow-x:hidden;
    -webkit-text-size-adjust:100%;
    text-rendering:optimizeLegibility;
  }

  body{line-height:1.55}
  .hidden{display:none !important}

  /* LOGIN PAGE */
  .login-screen{
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:36px 20px;
    background:
      radial-gradient(circle at 15% 15%, rgba(255,255,255,.15), transparent 18%),
      radial-gradient(circle at 85% 20%, rgba(255,255,255,.08), transparent 14%),
      radial-gradient(circle at 20% 85%, rgba(46,125,50,.10), transparent 18%),
      linear-gradient(135deg,var(--saffron-950),var(--saffron-800));
    position:relative;
    overflow:hidden;
  }

  .login-screen::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      linear-gradient(to bottom,
        rgba(255,153,51,.08) 0%,
        rgba(255,153,51,.08) 33.33%,
        rgba(255,255,255,.02) 33.33%,
        rgba(255,255,255,.02) 66.66%,
        rgba(19,136,8,.07) 66.66%,
        rgba(19,136,8,.07) 100%);
    mix-blend-mode:soft-light;
    pointer-events:none;
  }

  .login-card{
    width:100%;
    max-width:560px;
    background:rgba(255,255,255,.98);
    border-radius:32px;
    overflow:hidden;
    box-shadow:0 38px 90px rgba(0,0,0,.22);
    border:1px solid rgba(255,255,255,.4);
    position:relative;
    z-index:1;
  }

  .login-head{
    position:relative;
    padding:40px 34px 28px;
    text-align:left;
    color:#fff;
    background:
      radial-gradient(circle at 30% 20%, rgba(255,255,255,.16), transparent 20%),
      linear-gradient(135deg,var(--saffron-950),var(--saffron-700));
  }

  .login-head::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:5px;
    background:linear-gradient(90deg,#ff9933 0%,#ffffff 48%,#138808 100%);
  }

  .login-title{
    margin:0;
    font-size:clamp(30px,4vw,40px);
    line-height:1.15;
    font-weight:800;
    letter-spacing:-.4px;
    color:#ffffff;
  }

  .login-subtitle{
    margin-top:14px;
    font-size:15px;
    line-height:1.7;
    color:rgba(255,255,255,.92);
    font-weight:500;
    max-width:430px;
  }

  .login-body{
    padding:28px 30px 30px;
    background:linear-gradient(180deg,#ffffff 0%,#fffdfa 100%);
  }

  .hint-box{
    background:linear-gradient(135deg,#fff8ef,#fffdf9);
    border:1px solid #efd5be;
    border-left:4px solid var(--saffron-700);
    border-radius:18px;
    padding:16px 16px;
    font-size:14px;
    line-height:1.75;
    color:#55606e;
    margin-bottom:22px;
    font-weight:500;
  }

  /* APP */
  .app-shell{
    min-height:100vh;
    display:flex;
    flex-direction:column;
  }

  .topbar{
    position:sticky;
    top:0;
    z-index:30;
    background:linear-gradient(135deg,var(--saffron-950),var(--saffron-800));
    color:#fff;
    box-shadow:var(--shadow-md);
    border-bottom:4px solid var(--green-700);
  }

  .topbar-inner{
    max-width:1580px;
    margin:0 auto;
    padding:18px 22px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
  }

  .brand{
    display:flex;
    align-items:flex-start;
    gap:16px;
    min-width:0;
    flex:1 1 auto;
  }

  .brand-text{min-width:0}

  .brand-title{
    margin:0;
    font-size:clamp(22px,3vw,30px);
    font-weight:800;
    line-height:1.18;
    letter-spacing:-.3px;
    word-break:break-word;
    color:#fff;
  }

  .brand-sub{
    margin-top:8px;
    font-size:14px;
    color:rgba(255,255,255,.92);
    line-height:1.65;
    max-width:900px;
  }

  .topbar-actions{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    justify-content:flex-end;
  }

  .chip{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:46px;
    padding:0 18px;
    border-radius:999px;
    font-size:13px;
    font-weight:800;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.18);
    color:#fff;
    white-space:nowrap;
    letter-spacing:.2px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
  }

  .page{
    max-width:1580px;
    margin:22px auto;
    width:100%;
    padding:0 22px 30px;
    display:grid;
    grid-template-columns:310px minmax(0,1fr);
    gap:22px;
    flex:1;
  }

  /* SIDEBAR */
  .sidebar{
    background:linear-gradient(180deg,#fffdfa 0%,#ffffff 100%);
    border:1px solid #ecd8c6;
    border-radius:26px;
    padding:18px;
    box-shadow:var(--shadow-md);
    height:fit-content;
    position:sticky;
    top:96px;
  }

  .nav-title{
    padding:6px 10px 14px;
    color:#8c5a34;
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:1px;
  }

  .nav-btn{
    width:100%;
    text-align:left;
    border:1px solid transparent;
    background:#fff;
    color:#374151;
    font-weight:700;
    font-size:14px;
    letter-spacing:.15px;
    border-radius:16px;
    padding:15px 16px;
    margin-bottom:10px;
    cursor:pointer;
    transition:all .18s ease;
    min-height:50px;
    box-shadow:0 1px 0 rgba(0,0,0,.02);
  }

  .nav-btn:hover{
    background:#fff7ef;
    border-color:#efd1b8;
    color:var(--saffron-900);
    transform:translateX(2px);
  }

  .nav-btn.active{
    background:linear-gradient(135deg,rgba(255,153,51,.18),rgba(255,255,255,1));
    border-color:#eab894;
    color:var(--saffron-900);
    box-shadow:0 10px 24px rgba(214,98,0,.11);
    position:relative;
    padding-left:20px;
  }

  .nav-btn.active::before{
    content:"";
    position:absolute;
    left:0;
    top:11px;
    bottom:11px;
    width:4px;
    border-radius:999px;
    background:linear-gradient(180deg,var(--saffron-700),var(--green-700));
  }

  .content{min-width:0}
  .section{display:none}
  .section.active{display:block}

  .section-head{
    margin-bottom:18px;
    padding:2px 2px 8px;
  }

  .section-head h2{
    margin:0 0 8px;
    color:var(--ink-900);
    font-size:clamp(22px,3.5vw,30px);
    font-weight:800;
    line-height:1.2;
    letter-spacing:-.2px;
  }

  .section-head p{
    margin:0;
    color:var(--muted);
    font-size:14px;
    line-height:1.75;
    max-width:920px;
  }

  /* CARDS */
  .cards{
    display:grid;
    grid-template-columns:repeat(6, minmax(0,1fr));
    gap:18px;
    margin-bottom:22px;
  }

  .card{
    background:linear-gradient(180deg,#ffffff 0%,#fffdfa 100%);
    border:1px solid #ebe5dd;
    border-radius:24px;
    box-shadow:var(--shadow-md);
    padding:22px;
    min-width:0;
    position:relative;
    overflow:hidden;
  }

  .card::before{
    content:"";
    position:absolute;
    left:0; right:0; top:0;
    height:4px;
    background:linear-gradient(90deg,#ff9933,#ffffff,#138808);
  }

  .stat-label{
    font-size:13px;
    line-height:1.6;
    color:#727b88;
    font-weight:600;
    margin-bottom:14px;
    letter-spacing:.15px;
  }

  .stat-value{
    font-size:34px;
    line-height:1;
    color:var(--saffron-900);
    font-weight:800;
    letter-spacing:-.2px;
    word-break:break-word;
  }

  .grid-2{
    display:grid;
    grid-template-columns:1.04fr .96fr;
    gap:22px;
  }

  .card-title{
    margin:0 0 12px;
    font-size:19px;
    color:var(--ink-900);
    font-weight:800;
    line-height:1.35;
  }

  .subtle{
    margin:-2px 0 18px;
    font-size:13.5px;
    color:var(--muted);
    line-height:1.7;
  }

  /* FORMS */
  .form-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:18px;
  }

  .field{
    display:flex;
    flex-direction:column;
    gap:9px;
    min-width:0;
  }

  .field.full{grid-column:1 / -1}

  label{
    font-size:13px;
    color:#374151;
    font-weight:700;
    line-height:1.45;
    letter-spacing:.15px;
  }

  input, select, button{
    font-family:inherit;
  }

  input, select{
    width:100%;
    height:52px;
    padding:0 16px;
    border-radius:16px;
    border:1px solid #d7dbe3;
    background:#fff;
    font-size:15px;
    font-weight:500;
    color:var(--text);
    outline:none;
    appearance:none;
    transition:all .18s ease;
    box-shadow:inset 0 1px 2px rgba(0,0,0,.02);
  }

  input::placeholder{
    color:#99a1ad;
    font-weight:500;
  }

  input:hover, select:hover{
    border-color:#c8ced8;
  }

  input:focus, select:focus{
    border-color:var(--saffron-700);
    box-shadow:0 0 0 4px rgba(241,125,18,.14);
    background:#fffdfb;
  }

  input[readonly], select[disabled]{
    background:#f8f9fb;
    color:#5b6573;
  }

  .form-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:22px;
  }

  /* BUTTONS */
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:52px;
    padding:0 22px;
    border:none;
    border-radius:16px;
    font-size:15px;
    font-weight:800;
    letter-spacing:.1px;
    line-height:1;
    cursor:pointer;
    transition:all .18s ease;
    touch-action:manipulation;
    box-shadow:var(--shadow-sm);
    white-space:nowrap;
  }

  .btn:hover{
    transform:translateY(-1px);
    box-shadow:0 12px 24px rgba(15,23,42,.11);
  }

  .btn:active{transform:translateY(0)}
  .btn:disabled{
    opacity:.65;
    cursor:not-allowed;
    transform:none;
    box-shadow:none;
  }

  .btn-primary{
    background:linear-gradient(135deg,var(--saffron-950),var(--saffron-700));
    color:#fff;
  }

  .btn-gold{
    background:linear-gradient(135deg,#ab7b08,#d6a317);
    color:#fff;
  }

  .btn-light{
    background:rgba(255,255,255,.14);
    color:#fff;
    border:1px solid rgba(255,255,255,.28);
    backdrop-filter:blur(4px);
  }

  .btn-outline{
    background:#fff;
    color:var(--saffron-900);
    border:1px solid #efc9ab;
  }

  .btn-outline:hover{
    background:#fff7ef;
  }

  .btn-danger{
    background:linear-gradient(135deg,#c62828,#e53935);
    color:#fff;
  }

  .btn-success{
    background:linear-gradient(135deg,#1b5e20,#2f7d32);
    color:#fff;
  }

  /* TOOLBAR */
  .toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    margin-bottom:16px;
  }

  .toolbar-left,
  .toolbar-right{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    align-items:center;
  }

  .toolbar input,
  .toolbar select{
    min-width:210px;
  }

  /* TABLE */
  .table-wrap{
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    border:1px solid #ebdfd3;
    border-radius:18px;
    background:#fff;
  }

  table{
    width:100%;
    border-collapse:collapse;
    min-width:980px;
  }

  th, td{
    padding:14px 12px;
    border-bottom:1px solid #f0ece6;
    text-align:left;
    vertical-align:top;
    font-size:14px;
    line-height:1.5;
    white-space:nowrap;
  }

  th{
    position:sticky;
    top:0;
    z-index:1;
    background:linear-gradient(180deg,#fff1e3,#ffe7cf);
    color:#8f3b00;
    font-size:12px;
    font-weight:800;
    letter-spacing:.45px;
    text-transform:uppercase;
    border-bottom:1px solid #e7c3a4;
  }

  td{
    color:#2f3947;
    font-weight:500;
  }

  tr:nth-child(even) td{background:#fffdfa}
  tr:hover td{background:#fff5eb}

  .badge{
    display:inline-block;
    padding:7px 11px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    letter-spacing:.2px;
  }

  .badge-green{background:#eaf8ee; color:#166534}
  .badge-amber{background:#fff4de; color:#9a6700}
  .badge-blue{background:#edf4ff; color:#1e4b8f}

  .alert{
    display:none;
    padding:14px 16px;
    border-radius:16px;
    margin-bottom:18px;
    font-size:14px;
    font-weight:700;
    line-height:1.65;
    word-break:break-word;
    box-shadow:var(--shadow-xs);
  }

  .alert.show{display:block}
  .alert-success{background:#edfdf2; color:#166534; border:1px solid #b8ebc7}
  .alert-error{background:#fff1f2; color:#b42318; border:1px solid #fecdd3}
  .alert-info{background:#eff6ff; color:#1d4ed8; border:1px solid #bfdcff}

  .note-box{
    background:linear-gradient(135deg,#fff8ef,#ffffff);
    border:1px dashed #ebb98f;
    border-left:4px solid var(--saffron-700);
    border-radius:18px;
    padding:16px 17px;
    line-height:1.85;
    color:#4b5563;
    font-size:14px;
  }

  .info-box{
    background:linear-gradient(180deg,#fffdfa,#ffffff);
    border:1px solid #ece4db;
    border-radius:18px;
    padding:16px;
  }

  .info-row{
    display:grid;
    grid-template-columns:150px 1fr;
    gap:12px;
    padding:10px 0;
    border-bottom:1px dashed rgba(143,59,0,.11);
    font-size:14px;
    line-height:1.6;
  }

  .info-row:last-child{border-bottom:none}
  .info-key{font-weight:700; color:#83522e}
  .info-value{font-weight:600; color:#111827; word-break:break-word}

  .empty{
    text-align:center;
    padding:32px 14px;
    color:var(--muted);
    font-weight:600;
    line-height:1.7;
  }

  .footer-note{
    text-align:center;
    padding:12px 10px 22px;
    font-size:12.5px;
    color:#76808d;
    line-height:1.7;
  }

  .loader{
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    background:rgba(15,23,42,.28);
    z-index:9999;
    padding:16px;
    backdrop-filter:blur(2px);
  }

  .loader.show{display:flex}

  .loader-box{
    display:flex;
    align-items:center;
    gap:14px;
    background:#fff;
    border-radius:18px;
    border:1px solid #efd5be;
    box-shadow:var(--shadow-lg);
    padding:18px 22px;
    color:var(--saffron-900);
    font-weight:700;
    max-width:90vw;
  }

  .spinner{
    width:24px;
    height:24px;
    border-radius:50%;
    border:3px solid #f3dfcf;
    border-top-color:var(--saffron-700);
    animation:spin 1s linear infinite;
  }

  @keyframes spin{to{transform:rotate(360deg)}}

  ::-webkit-scrollbar{height:10px;width:10px}
  ::-webkit-scrollbar-thumb{background:#ddb69a;border-radius:999px}
  ::-webkit-scrollbar-track{background:#f5efe8}

  @media (max-width:1300px){
    .cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  }

  @media (max-width:1100px){
    .page{grid-template-columns:1fr}
    .sidebar{position:static}
    .grid-2{grid-template-columns:1fr}
    .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  }

  @media (max-width:900px){
    .topbar-inner{
      flex-direction:column;
      align-items:stretch;
    }

    .topbar-actions{
      width:100%;
      justify-content:stretch;
    }

    .topbar-actions .btn,
    .chip{
      flex:1 1 calc(50% - 12px);
      text-align:center;
    }

    .sidebar{
      display:flex;
      gap:8px;
      overflow:auto;
      white-space:nowrap;
      padding:10px;
      scrollbar-width:thin;
    }

    .nav-title{display:none}

    .nav-btn{
      width:auto;
      min-width:max-content;
      margin-bottom:0;
      padding:12px 14px;
      border-radius:999px;
      flex:0 0 auto;
    }

    .nav-btn.active{
      padding-left:14px;
    }

    .nav-btn.active::before{
      top:auto;
      bottom:0;
      left:12px;
      right:12px;
      width:auto;
      height:4px;
    }
  }

  @media (max-width:768px){
    .login-screen{padding:14px}
    .login-card{
      max-width:100%;
      border-radius:24px;
    }

    .login-head{padding:26px 18px 18px}
    .login-body{padding:18px}
    .page{
      margin:14px auto;
      padding:0 14px 20px;
    }

    .card{
      padding:18px;
      border-radius:20px;
    }

    .form-grid{grid-template-columns:1fr}
    input, select{
      height:50px;
      font-size:16px;
    }

    .form-actions{
      flex-direction:column;
    }

    .form-actions .btn{
      width:100%;
    }

    .toolbar{
      flex-direction:column;
      align-items:stretch;
    }

    .toolbar-left,
    .toolbar-right{
      width:100%;
      flex-direction:column;
      align-items:stretch;
    }

    .toolbar input,
    .toolbar select,
    .toolbar .btn{
      min-width:100%;
      width:100%;
    }

    table{min-width:720px}
    .info-row{
      grid-template-columns:1fr;
      gap:4px;
    }
  }

  @media (max-width:520px){
    .cards{grid-template-columns:1fr}
    .topbar-inner{padding:12px}
    .topbar-actions .btn,
    .chip{flex:1 1 100%}
    .stat-value{font-size:28px}
    table{min-width:660px}
    .login-title{font-size:24px}
  }