:root{
    --navy:#12213E; --navy-light:#1C3157; --navy-lighter:#28406e;
    --gold:#C99A44; --gold-dark:#A87F35; --gold-bg:#FBF3E4;
    --bg:#F3F4F7; --surface:#FFFFFF; --border:#E4E6EC; --border-strong:#D3D6E0;
    --text:#16213A; --text-secondary:#616B82; --text-muted:#98A0B3;
    --success:#1F8A4C; --success-bg:#E8F6EE;
    --danger:#B3261E; --danger-bg:#FBEAE9;
    --warning:#B45309; --warning-bg:#FDF1E1;
    --radius:10px; --radius-lg:16px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  body{
    font-family:'Inter',-apple-system,sans-serif; background:var(--bg); color:var(--text);
    font-variant-numeric: tabular-nums;
    min-height:100vh; -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.brand{font-family:'Manrope',sans-serif;}
  button{font-family:inherit; cursor:pointer;}
  input,select{font-family:inherit;}
  ::selection{background:var(--gold-bg);}

  /* ===== LOGIN ===== */
  #login-screen{
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    background: var(--navy); position:relative; overflow:hidden;
  }
  #login-screen::before{
    content:''; position:absolute; inset:0;
    background-image: radial-gradient(circle at 20% 30%, rgba(201,154,68,0.08) 0%, transparent 45%),
                       radial-gradient(circle at 80% 75%, rgba(201,154,68,0.06) 0%, transparent 40%);
  }
  .login-card{
    position:relative; background:var(--surface); border-radius:var(--radius-lg);
    padding:2.75rem 2.5rem 2.25rem; width:100%; max-width:420px;
    box-shadow: 0 24px 60px -20px rgba(0,0,0,0.5);
  }
  .login-mark{
    width:52px; height:52px; border-radius:14px; background:var(--navy);
    display:flex; align-items:center; justify-content:center; margin-bottom:1.5rem;
    color:var(--gold); font-family:'Manrope'; font-weight:800; font-size:22px;
  }
  .login-card h1{font-size:24px; font-weight:800; color:var(--navy); margin-bottom:0.35rem;}
  .login-card p.sub{color:var(--text-secondary); font-size:14.5px; margin-bottom:1.85rem; line-height:1.5;}
  .user-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:1.5rem;}
  .user-btn{
    display:flex; flex-direction:column; align-items:flex-start; gap:8px;
    padding:14px 14px; border:1.5px solid var(--border); border-radius:var(--radius);
    background:var(--surface); text-align:left; transition:border-color .15s, background .15s;
  }
  .user-btn:hover{border-color:var(--gold); background:var(--gold-bg);}
  .user-btn.selected{border-color:var(--gold); background:var(--gold-bg); box-shadow:0 0 0 3px rgba(201,154,68,0.18);}
  .user-avatar{
    width:34px; height:34px; border-radius:50%; background:var(--navy); color:var(--gold);
    display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px;
  }
  .user-btn .uname{font-weight:600; font-size:14.5px; color:var(--text);}
  .user-btn .urole{font-size:12px; color:var(--text-muted);}
  #login-btn{
    width:100%; padding:13px; background:var(--navy); color:#fff; border:none;
    border-radius:var(--radius); font-weight:700; font-size:15px; letter-spacing:0.01em;
    transition:background .15s; opacity:0.5; pointer-events:none;
  }
  #login-btn.ready{opacity:1; pointer-events:auto;}
  #login-btn.ready:hover{background:var(--navy-light);}
  .login-foot{margin-top:1.25rem; font-size:12px; color:var(--text-muted); text-align:center;}

  /* ===== APP SHELL ===== */
  #app{display:none; min-height:100vh;}
  #app.active{display:flex;}
  .sidebar{
    width:230px; background:var(--navy); color:#fff; flex-shrink:0;
    display:flex; flex-direction:column; padding:1.5rem 1rem;
    position:sticky; top:0; height:100vh;
  }
  .sidebar-brand{display:flex; align-items:center; gap:10px; padding:0 0.5rem 1.75rem;}
  .sidebar-brand .mark{
    width:36px; height:36px; border-radius:10px; background:rgba(201,154,68,0.15);
    color:var(--gold); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:16px;
  }
  .sidebar-brand .name{font-weight:800; font-size:16px; letter-spacing:-0.01em;}
  .sidebar-brand .name span{display:block; font-family:'Inter'; font-weight:500; font-size:11px; color:rgba(255,255,255,0.45); margin-top:1px;}
  .nav-item{
    display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:9px;
    color:rgba(255,255,255,0.68); font-size:14px; font-weight:500; margin-bottom:2px;
    background:none; border:none; width:100%; text-align:left; transition:background .12s, color .12s;
  }
  .nav-item .ic{width:18px; height:18px; flex-shrink:0; display:flex; align-items:center; justify-content:center;}
  .nav-item:hover{background:rgba(255,255,255,0.06); color:#fff;}
  .nav-item.active{background:var(--navy-lighter); color:#fff;}
  .nav-item.active .ic svg{stroke:var(--gold);}
  .sidebar-foot{margin-top:auto; padding-top:1rem; border-top:1px solid rgba(255,255,255,0.1);}
  .sidebar-user{display:flex; align-items:center; gap:10px; padding:8px; border-radius:9px;}
  .sidebar-user .user-avatar{width:32px; height:32px; font-size:12px; background:rgba(201,154,68,0.18); color:var(--gold);}
  .sidebar-user .uname{font-size:13.5px; font-weight:600; color:#fff;}
  .sidebar-user .urole{font-size:11px; color:rgba(255,255,255,0.45);}
  #logout-btn{
    margin-top:8px; width:100%; background:none; border:none; color:rgba(255,255,255,0.5);
    font-size:12.5px; text-align:left; padding:6px 8px; border-radius:7px; transition:background .12s, color .12s;
  }
  #logout-btn:hover{background:rgba(255,255,255,0.06); color:#fff;}

  .main{flex:1; min-width:0; padding:2rem 2.5rem 3rem;}
  .topbar{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:1.5rem; flex-wrap:wrap; gap:10px;}
  .topbar h2{font-size:22px; font-weight:800; color:var(--navy);}
  .topbar .date{font-size:13px; color:var(--text-muted);}
  .view{display:none;}
  .view.active{display:block;}

  /* ===== MONTH TABS ===== */
  .month-tabs{display:flex; gap:6px; margin-bottom:1.1rem; flex-wrap:wrap; border-bottom:1px solid var(--border); padding-bottom:0;}
  .month-tab{
    padding:8px 14px; font-size:13px; font-weight:600; color:var(--text-secondary); background:none; border:none;
    border-bottom:2.5px solid transparent; margin-bottom:-1px; transition:color .12s, border-color .12s;
  }
  .month-tab:hover{color:var(--navy);}
  .month-tab.active{color:var(--navy); border-color:var(--gold);}
  .month-tab .n{display:inline-block; margin-left:6px; font-size:11px; background:var(--bg); color:var(--text-muted); padding:1px 6px; border-radius:100px;}
  .month-tab.active .n{background:var(--gold-bg); color:var(--gold-dark);}

  /* ===== DASHBOARD ===== */
  .hero-strip{
    background:var(--navy); border-radius:var(--radius-lg); padding:1.75rem 2rem;
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1.5rem;
    margin-bottom:1.5rem; position:relative; overflow:hidden;
  }
  .hero-strip::after{
    content:''; position:absolute; right:-40px; top:-40px; width:180px; height:180px; border-radius:50%;
    background:radial-gradient(circle, rgba(201,154,68,0.16) 0%, transparent 70%);
  }
  .hero-main{position:relative;}
  .hero-main .label{color:rgba(255,255,255,0.55); font-size:13px; font-weight:500; margin-bottom:6px;}
  .hero-main .value{color:#fff; font-family:'Manrope'; font-weight:800; font-size:38px; letter-spacing:-0.01em;}
  .hero-main .value .cur{font-size:20px; color:var(--gold); margin-left:6px; font-weight:700;}
  .hero-support{display:flex; gap:2rem; position:relative; flex-wrap:wrap;}
  .hero-support .stat .label{color:rgba(255,255,255,0.5); font-size:12px; margin-bottom:5px;}
  .hero-support .stat .value{color:#fff; font-size:19px; font-weight:700; font-family:'Manrope';}
  .hero-support .stat.owe .value{color:#F0B7B0;}
  .hero-support .stat.owed .value{color:#9FDBB8;}

  .kpi-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-bottom:1.75rem;}
  .kpi-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.1rem 1.25rem;}
  .kpi-card .label{font-size:12.5px; color:var(--text-secondary); margin-bottom:8px; font-weight:500;}
  .kpi-card .value{font-size:21px; font-weight:700; font-family:'Manrope'; color:var(--navy);}
  .kpi-card .value.pos{color:var(--success);}
  .kpi-card .value.neg{color:var(--danger);}

  .panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; margin-bottom:1.25rem;}
  .panel-head{display:flex; align-items:center; justify-content:space-between; padding:1.1rem 1.4rem; border-bottom:1px solid var(--border); flex-wrap:wrap; gap:8px;}
  .panel-head h3{font-size:15px; font-weight:700; color:var(--navy);}
  .panel-head .count{font-size:12.5px; color:var(--text-muted);}

  table{width:100%; border-collapse:collapse; font-size:13px;}
  th{
    text-align:left; padding:9px 1rem; font-size:11px; font-weight:600;
    color:var(--text-muted); border-bottom:1px solid var(--border); white-space:nowrap; position:sticky; top:0; background:var(--surface);
  }
  td{padding:10px 1rem; border-bottom:1px solid var(--border); color:var(--text); white-space:nowrap;}
  tbody tr:last-child td{border-bottom:none;}
  tbody tr:hover{background:#FAFAFB;}
  td.num{font-variant-numeric:tabular-nums; font-weight:600; text-align:right;}
  td.muted{color:var(--text-muted);}
  .empty-row td{color:var(--text-muted); text-align:center; padding:2.25rem; font-style:normal;}

  .badge{display:inline-flex; align-items:center; padding:3px 9px; border-radius:100px; font-size:11px; font-weight:600; white-space:nowrap;}
  .badge.paid{background:var(--success-bg); color:var(--success);}
  .badge.pending{background:var(--warning-bg); color:var(--warning);}
  .badge.partial{background:var(--gold-bg); color:var(--gold-dark);}

  /* ===== TICKETS VIEW ===== */
  .ticket-toolbar{display:flex; gap:10px; margin-bottom:1rem; flex-wrap:wrap;}
  .btn{
    padding:9px 16px; border-radius:8px; font-size:13.5px; font-weight:600; border:1px solid var(--border-strong);
    background:var(--surface); color:var(--text); transition:background .12s, border-color .12s; white-space:nowrap;
  }
  .btn:hover{background:#F7F7F9;}
  .btn.primary{background:var(--navy); color:#fff; border-color:var(--navy);}
  .btn.primary:hover{background:var(--navy-light);}
  .btn.sm{padding:6px 11px; font-size:12.5px;}
  #search-input{
    flex:1; min-width:180px; padding:9px 14px; border:1px solid var(--border-strong); border-radius:8px;
    font-size:13.5px; background:var(--surface);
  }
  #search-input:focus{outline:none; border-color:var(--gold);}
  select.filter-select{padding:9px 12px; border:1px solid var(--border-strong); border-radius:8px; font-size:13.5px; background:var(--surface);}

  .modal-overlay{
    display:none; position:fixed; inset:0; background:rgba(18,33,62,0.45); z-index:50;
    align-items:flex-start; justify-content:center; padding:4vh 20px; overflow-y:auto;
  }
  .modal-overlay.active{display:flex;}
  .modal{
    background:var(--surface); border-radius:var(--radius-lg); padding:1.75rem 2rem; width:100%; max-width:680px;
    box-shadow:0 30px 70px -20px rgba(0,0,0,0.35);
  }
  .modal h3{font-size:18px; font-weight:800; color:var(--navy); margin-bottom:0.35rem;}
  .modal .sec-label{font-size:11.5px; font-weight:700; color:var(--gold-dark); text-transform:uppercase; letter-spacing:0.04em; margin:1.25rem 0 0.65rem;}
  .modal .sec-label:first-of-type{margin-top:1rem;}
  .form-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px 14px;}
  .form-grid.cols3{grid-template-columns:1fr 1fr 1fr;}
  .form-field{display:flex; flex-direction:column; gap:5px;}
  .form-field.full{grid-column:1 / -1;}
  .form-field label{font-size:12px; font-weight:600; color:var(--text-secondary);}
  .form-field input, .form-field select{
    padding:8px 10px; border:1px solid var(--border-strong); border-radius:8px; font-size:13px; color:var(--text);
    background:var(--surface);
  }
  .form-field input:focus, .form-field select:focus{outline:none; border-color:var(--gold);}
  .form-field .err{font-size:11px; color:var(--danger); display:none;}
  .form-field.invalid input, .form-field.invalid select{border-color:var(--danger);}
  .form-field.invalid .err{display:block;}
  .modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:1.6rem;}

  .row-actions{display:flex; gap:6px;}
  .icon-btn{
    width:27px; height:27px; border-radius:7px; border:1px solid var(--border); background:var(--surface);
    display:flex; align-items:center; justify-content:center; color:var(--text-secondary); transition:background .12s;
  }
  .icon-btn:hover{background:#F2F3F5;}
  .icon-btn.mark-paid:hover{background:var(--success-bg); color:var(--success); border-color:var(--success);}

  .table-scroll{overflow-x:auto; max-height:560px; overflow-y:auto;}

  /* ===== DEBT CENTER ===== */
  .debt-columns{display:grid; grid-template-columns:1fr 1fr; gap:1.25rem;}
  @media (max-width:900px){.debt-columns{grid-template-columns:1fr;}}
  .debt-total{padding:1.1rem 1.4rem; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:baseline;}
  .debt-total .amt{font-size:20px; font-weight:800; font-family:'Manrope';}
  .debt-list{max-height:420px; overflow-y:auto;}
  .debt-list-row{display:flex; justify-content:space-between; align-items:center; padding:11px 1.4rem; border-bottom:1px solid var(--border);}
  .debt-list-row:last-child{border-bottom:none;}
  .debt-list-row .who{font-size:13.5px; font-weight:600; color:var(--text);}
  .debt-list-row .meta{font-size:11.5px; color:var(--text-muted); margin-top:2px;}
  .debt-list-row .amt{font-size:14px; font-weight:700; font-variant-numeric:tabular-nums;}

  /* ===== MANAT BALANSI ===== */
  .balance-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:1.25rem;}
  @media (max-width:900px){.balance-grid{grid-template-columns:1fr;}}
  .card-row{display:flex; align-items:center; justify-content:space-between; padding:9px 1.4rem; border-bottom:1px solid var(--border); gap:10px;}
  .card-row:last-child{border-bottom:none;}
  .card-row .cname{font-size:13.5px; color:var(--text); font-weight:500;}
  .card-row input{
    width:130px; text-align:right; padding:6px 10px; border:1px solid var(--border-strong); border-radius:7px; font-size:13.5px;
  }
  .card-row input:focus{outline:none; border-color:var(--gold);}
  .balance-summary-row{display:flex; justify-content:space-between; padding:12px 1.4rem; font-size:13.5px;}
  .balance-summary-row.total{font-weight:800; font-size:16px; color:var(--navy); border-top:1px solid var(--border); padding-top:14px;}
  .balance-summary-row .lbl{color:var(--text-secondary);}
  .balance-summary-row.total .lbl{color:var(--navy);}

  .toast{
    position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(0); z-index:80;
    background:var(--navy); color:#fff; padding:11px 20px; border-radius:9px; font-size:13.5px; font-weight:500;
    box-shadow:0 12px 28px -8px rgba(0,0,0,0.35); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
  }
  .toast.show{opacity:1; transform:translateX(-50%) translateY(-6px);}

  @media (max-width:760px){
    .sidebar{position:fixed; z-index:40; transform:translateX(-100%); transition:transform .2s; height:100vh;}
    .sidebar.open{transform:translateX(0);}
    .main{padding:1.25rem 1.25rem 2.5rem;}
    #menu-toggle{display:flex !important;}
    .form-grid, .form-grid.cols3{grid-template-columns:1fr;}
  }
  #menu-toggle{
    display:none; width:36px; height:36px; border-radius:8px; border:1px solid var(--border-strong);
    background:var(--surface); align-items:center; justify-content:center; margin-bottom:12px;
  }

  .login-error{
    background:var(--danger-bg); color:var(--danger); padding:10px 14px; border-radius:8px;
    font-size:13px; margin-bottom:1rem; font-weight:500;
  }
  .conflict-banner{
    background:var(--warning-bg); color:var(--warning); padding:10px 16px; border-radius:8px;
    font-size:13px; margin-bottom:1rem; font-weight:500; display:none;
  }
  .conflict-banner.show{display:block;}
  .loading-overlay{
    position:fixed; inset:0; background:rgba(243,244,247,0.7); z-index:100;
    display:flex; align-items:center; justify-content:center; font-size:13.5px; color:var(--text-secondary);
  }