/* ══════════════════════════════════════════
       LOGIN — light split layout, no scroll
    ══════════════════════════════════════════ */

    #login-screen{
      position:fixed;inset:0;
      display:flex;flex-direction:row;
      z-index:9999;overflow:hidden;
    }

    /* ── LEFT: dark brand panel ── */
    .login-left{
      width:46%;flex-shrink:0;
      background:linear-gradient(145deg,#0E0C08 0%,#111018 55%,#090810 100%);
      display:flex;flex-direction:column;
      align-items:center;justify-content:center;
      padding:48px 44px;position:relative;overflow:hidden;
    }
    /* Radial gold glow */
    .login-left::before{
      content:'';position:absolute;inset:0;pointer-events:none;
      background:
        radial-gradient(ellipse at 40% 40%,rgba(196,149,32,.14) 0%,transparent 60%),
        radial-gradient(ellipse at 80% 80%,rgba(196,149,32,.06) 0%,transparent 50%);
      animation:ringPulse 5s ease-in-out infinite;
    }
    /* Concentric rings */
    .login-left::after{
      content:'';position:absolute;
      top:50%;left:50%;
      width:400px;height:400px;
      transform:translate(-50%,-50%);
      border-radius:50%;
      border:1px solid rgba(212,168,67,.08);
      box-shadow:0 0 0 60px rgba(212,168,67,.03),0 0 0 120px rgba(212,168,67,.015);
      animation:ringPulse2 7s ease-in-out infinite;
    }
    /* Floating particles */
    .lp{
      position:absolute;border-radius:50%;pointer-events:none;
      background:radial-gradient(circle,rgba(212,168,67,.75) 0%,rgba(212,168,67,0) 100%);
      animation:floatUp linear infinite;
    }
    /* Gold sparkles */
    .spark{
      position:absolute;pointer-events:none;
      color:rgba(212,168,67,.9);
      font-size:11px;line-height:1;
      animation:sparkle ease-in-out infinite;
      text-shadow:0 0 8px rgba(212,168,67,.7),0 0 16px rgba(212,168,67,.4);
      z-index:2;
    }

    /* Corner brackets */
    .login-hero-corner{
      position:absolute;width:80px;height:80px;
      border-color:rgba(212,168,67,.18);border-style:solid;
      animation:cornerDraw .7s cubic-bezier(.22,.68,0,1.2) both;
    }
    .login-hero-corner.tl{top:24px;left:24px;border-width:1px 0 0 1px;animation-delay:.0s}
    .login-hero-corner.tr{top:24px;right:24px;border-width:1px 1px 0 0;animation-delay:.1s}
    .login-hero-corner.bl{bottom:24px;left:24px;border-width:0 0 1px 1px;animation-delay:.2s}
    .login-hero-corner.br{bottom:24px;right:24px;border-width:0 1px 1px 0;animation-delay:.3s}

    .login-brand{
      text-align:center;position:relative;z-index:1;
      animation:brandIn .7s cubic-bezier(.22,.68,0,1.2) both;
    }
    .login-gem{
      font-size:56px;display:block;margin-bottom:18px;
      animation:gemFloat 3.8s ease-in-out infinite;
      filter:drop-shadow(0 4px 24px rgba(212,168,67,.5));
    }
    .login-hero-name{
      font-family:'Playfair Display',serif;font-size:30px;
      margin:0 0 12px;letter-spacing:.4px;
      background:linear-gradient(90deg,#C8A040 0%,#FFF8D0 28%,#F0C85C 50%,#FFF8D0 72%,#C8A040 100%);
      background-size:250% auto;
      -webkit-background-clip:text;-webkit-text-fill-color:transparent;
      background-clip:text;
      animation:shimmerSwipe 4s linear infinite;
    }
    .login-hero-rule{
      width:0;height:1px;
      background:linear-gradient(90deg,transparent,rgba(212,168,67,.7),transparent);
      margin:0 auto 13px;
      animation:ruleExpand .8s ease .35s both;
    }
    .login-hero-tag{
      font-size:9px;color:rgba(212,168,67,.45);
      letter-spacing:2.5px;text-transform:uppercase;margin:0 0 22px;
      animation:tagFadeIn 1s ease .5s both;
    }
    .login-hero-dots{display:flex;gap:9px;justify-content:center}
    .lhd{width:5px;height:5px;border-radius:50%;background:rgba(212,168,67,.2)}
    .lhd:nth-child(1){animation:dotBreath 2.4s ease-in-out infinite 0s}
    .lhd:nth-child(2){background:rgba(212,168,67,.5);width:8px;height:8px;animation:dotBreath 2.4s ease-in-out infinite .45s}
    .lhd:nth-child(3){animation:dotBreath 2.4s ease-in-out infinite .9s}

    /* ── RIGHT: white form panel ── */
    .login-right{
      flex:1;
      background:#FFFFFF;
      display:flex;align-items:center;justify-content:center;
      padding:28px 32px;
      overflow:hidden;
    }
    .login-card{
      width:100%;max-width:340px;text-align:center;
      animation:cardIn .5s cubic-bezier(.22,.68,0,1.15) .15s both;
    }
    .login-ornament{display:none}
    .login-card h1{
      font-family:'Playfair Display',serif;font-size:26px;
      color:var(--ink);margin:0 0 4px;
    }
    .login-card .sub{
      font-size:10px;color:var(--ink3);text-transform:uppercase;
      letter-spacing:2px;margin-bottom:8px;
    }
    .login-gold-rule{
      width:36px;height:2px;
      background:linear-gradient(90deg,transparent,var(--g2),transparent);
      margin:0 auto 18px;border-radius:2px;
    }

    /* Staff */
    .staff-grid{display:grid;gap:7px;margin-bottom:14px}
    .staff-btn{
      padding:10px 13px;
      border:1.5px solid var(--border);
      border-radius:12px;cursor:pointer;text-align:left;
      background:var(--bg);transition:all .18s;
      display:flex;align-items:center;gap:11px;
    }
    .staff-btn:hover,.staff-btn.sel{
      border-color:var(--g3);background:var(--g6);
      box-shadow:0 3px 14px rgba(150,112,10,.14);transform:translateX(3px);
    }
    .staff-avatar{
      width:36px;height:36px;border-radius:50%;
      background:linear-gradient(135deg,#F0D898,#DDB84A);
      display:flex;align-items:center;justify-content:center;
      font-size:13px;font-weight:700;color:#7A5A18;flex-shrink:0;
    }
    .staff-btn .sname{font-weight:600;font-size:14px;color:var(--ink)}
    .staff-btn .srole{font-size:10px;color:var(--ink3);text-transform:uppercase;letter-spacing:.6px}
    .staff-grid .staff-btn{animation:staffIn .3s ease both}
    .staff-grid .staff-btn:nth-child(1){animation-delay:.08s}
    .staff-grid .staff-btn:nth-child(2){animation-delay:.15s}
    .staff-grid .staff-btn:nth-child(3){animation-delay:.22s}
    .staff-grid .staff-btn:nth-child(4){animation-delay:.29s}
    .staff-grid .staff-btn:nth-child(5){animation-delay:.36s}
    .staff-grid .staff-btn:nth-child(6){animation-delay:.43s}

    /* PIN */
    .pin-wrap{margin-top:2px}
    .pin-wrap label{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--ink3);display:block;margin-bottom:10px}
    .pin-dots{display:flex;gap:10px;justify-content:center;margin-bottom:14px}
    .pin-dot{width:13px;height:13px;border-radius:50%;border:2px solid var(--border2);background:transparent;transition:all .2s}
    .pin-dot.filled{background:var(--gold-grad);border-color:var(--g2);box-shadow:0 0 10px rgba(196,149,32,.4);transform:scale(1.12)}
    .pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
    .pin-key{
      padding:12px;border:1.5px solid var(--border);border-radius:10px;
      font-size:17px;font-weight:500;cursor:pointer;
      background:var(--bg);color:var(--ink);
      transition:all .14s;text-align:center;user-select:none;
      box-shadow:0 1px 4px rgba(60,40,0,.05);
    }
    .pin-key:hover{background:var(--g5);border-color:var(--g3);box-shadow:0 3px 12px rgba(150,112,10,.14)}
    .pin-key:active{transform:scale(.91);background:var(--g4);border-color:var(--g2)}
    .pin-key:empty{background:var(--bg2);border-color:var(--border);cursor:default;box-shadow:none}
    .pin-key.del{font-size:14px;color:var(--ink3)}
    .pin-error{color:var(--red);font-size:12px;margin-top:8px;min-height:16px;text-align:center}
    .login-back{font-size:12px;color:var(--ink3);cursor:pointer;margin-top:12px;display:block;transition:color .15s}
    .login-back:hover{color:var(--g1)}

    /* ══════════════════════════════════════════
       LAYOUT
    ══════════════════════════════════════════ */
    .sidebar{
      width:var(--sw);height:100vh;
      background:var(--sb);
      display:flex;flex-direction:column;
      position:fixed;left:0;top:0;z-index:200;
      transition:transform .3s cubic-bezier(.4,0,.2,1);overflow:hidden;
      border-right:1px solid var(--sb-border);
    }
    .main{
      margin-left:var(--sw);flex:1;
      display:flex;flex-direction:column;min-height:100vh;
      transition:margin .3s cubic-bezier(.4,0,.2,1);
    }

    /* ══════════════════════════════════════════
       SIDEBAR
    ══════════════════════════════════════════ */
    .sb-head{
      padding:18px 16px 14px;
      border-bottom:1px solid var(--sb-border);flex-shrink:0;
    }
    .sb-logo{display:flex;align-items:center;gap:10px}
    .sb-gem{
      width:34px;height:34px;
      background:var(--gold-grad);
      border-radius:9px;display:flex;align-items:center;justify-content:center;
      font-size:17px;flex-shrink:0;
      box-shadow:0 4px 12px rgba(212,168,67,.3);
    }
    .sb-name{font-family:'Playfair Display',serif;font-size:14.5px;color:#ECC96A;line-height:1.2}
    .sb-tagline{font-size:9px;color:rgba(255,255,255,.22);letter-spacing:1px;text-transform:uppercase;margin-top:1px}
    .sb-user{
      margin:8px 10px 4px;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.06);
      border-radius:12px;padding:8px 10px;
      display:flex;align-items:center;gap:8px;flex-shrink:0;
      backdrop-filter:blur(8px);
    }
    .sb-udot{
      width:8px;height:8px;border-radius:50%;
      background:var(--g2);flex-shrink:0;
      box-shadow:0 0 8px rgba(212,168,67,.5);
    }
    .sb-uname{font-size:12px;color:rgba(255,255,255,.75);font-weight:500}
    .sb-urole{font-size:9px;color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:.6px}
    .sb-nav{flex:1;padding:8px 0;overflow-y:auto;overflow-x:hidden;min-height:0}
    .sb-sec{
      font-size:9px;text-transform:uppercase;letter-spacing:1.8px;
      color:rgba(255,255,255,.18);padding:14px 16px 4px;font-weight:600;
    }
    .nav-item{
      display:flex;align-items:center;gap:10px;
      padding:7.5px 14px 7.5px 16px;
      cursor:pointer;font-size:13px;
      color:rgba(255,255,255,.38);
      transition:all .15s;
      border-left:2px solid transparent;
      user-select:none;margin:0 8px;border-radius:0 10px 10px 0;margin-right:10px;
    }
    .nav-item:hover{
      color:rgba(255,255,255,.75);
      background:rgba(255,255,255,.05);
    }
    .nav-item.active{
      color:#ECC96A;
      border-left-color:var(--g2);
      background:linear-gradient(90deg,rgba(212,168,67,.12) 0%,rgba(212,168,67,.04) 100%);
      font-weight:500;
    }
    .nav-item svg{width:15px;height:15px;flex-shrink:0;opacity:.7}
    .nav-item.active svg{opacity:1}
    .sb-bottom{
      flex-shrink:0;
      border-top:1px solid var(--sb-border);
      padding:10px 10px 8px;
    }
    .sb-rates{
      background:rgba(212,168,67,.07);
      border:1px solid rgba(212,168,67,.15);
      border-radius:12px;padding:10px 12px;margin-bottom:6px;
    }
    .sb-rates-title{
      font-size:9px;text-transform:uppercase;letter-spacing:1.2px;
      color:rgba(255,255,255,.28);margin-bottom:8px;
    }
    .rate-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}
    .rate-row:last-child{margin-bottom:0}
    .rate-row span{font-size:11px;color:rgba(255,255,255,.38)}
    .rate-row input{
      width:80px;background:transparent;border:none;outline:none;
      font-size:13px;font-weight:600;color:var(--g2);
      font-family:'Inter',sans-serif;text-align:right;
    }
    .sb-logout{
      display:flex;align-items:center;gap:8px;
      padding:7px 8px;border-radius:10px;cursor:pointer;
      font-size:12px;color:rgba(255,255,255,.28);transition:all .15s;
    }
    .sb-logout:hover{color:rgba(255,255,255,.6);background:rgba(255,255,255,.05)}

    /* ══════════════════════════════════════════
       MOBILE
    ══════════════════════════════════════════ */
    .mob-bar{
      display:none;position:fixed;top:0;left:0;right:0;z-index:150;
      background:var(--sb);padding:10px 14px;
      align-items:center;justify-content:space-between;
      border-bottom:1px solid var(--sb-border);
      backdrop-filter:blur(20px);
    }
    .mob-title{font-family:'Playfair Display',serif;font-size:16px;color:#ECC96A}
    .mob-menu{
      width:34px;height:34px;display:flex;flex-direction:column;
      align-items:center;justify-content:center;gap:5px;
      cursor:pointer;background:rgba(255,255,255,.06);
      border-radius:10px;border:none;
    }
    .mob-menu span{display:block;width:18px;height:1.5px;background:rgba(255,255,255,.6);border-radius:2px}
    .sb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:190;backdrop-filter:blur(2px)}

    /* ══════════════════════════════════════════
       RATES POPUP
    ══════════════════════════════════════════ */
    #rates-popup{
      display:none;position:fixed;top:56px;right:12px;z-index:300;
      background:var(--sb);border:1px solid rgba(212,168,67,.25);
      border-radius:16px;padding:16px;min-width:224px;
      box-shadow:0 8px 40px rgba(0,0,0,.5),0 0 0 1px rgba(212,168,67,.08);
    }

    /* ══════════════════════════════════════════
       PAGE
    ══════════════════════════════════════════ */
    .page{display:none;flex:1;flex-direction:column}
    .page.active{display:flex}
    .page-hdr{
      background:var(--surface);
      border-bottom:1px solid var(--border);
      padding:16px 28px;
      display:flex;align-items:center;justify-content:space-between;
      gap:12px;flex-wrap:wrap;flex-shrink:0;
      box-shadow:0 1px 0 var(--border),0 2px 12px rgba(60,40,0,.04);
    }
    .page-hdr h2{
      font-family:'Playfair Display',serif;
      font-size:22px;font-weight:500;color:var(--ink);letter-spacing:.1px;
    }
    .page-body{padding:24px 28px;flex:1;overflow-y:auto}

    /* RESPONSIVE */
    @media(max-width:768px) {
      .sidebar {
        transform: translateX(-100%)
      }

      .sidebar.open {
        transform: translateX(0)
      }

      .sb-overlay.open {
        display: block
      }

      .main {
        margin-left: 0;
        padding-top: 52px
      }

      .mob-bar {
        display: flex
      }

      .stats-grid {
        grid-template-columns: 1fr 1fr
      }

      .page-body {
        padding: 12px 14px
      }

      .page-hdr {
        padding: 10px 14px
      }

      .g3 {
        grid-template-columns: 1fr 1fr
      }

      .g4 {
        grid-template-columns: 1fr 1fr
      }
    }

    @media(max-width:480px) {
      .g2 {
        grid-template-columns: 1fr
      }

      .g3 {
        grid-template-columns: 1fr
      }

      .stats-grid {
        grid-template-columns: 1fr 1fr
      }
    }