:root{
    --bg:#0f172a;
    --surface:rgba(30,41,59,.7);
    --surface-2:rgba(15,23,42,.6);
    --border:rgba(71,85,105,.4);
    --text:#f8fafc;
    --text-dim:#94a3b8;
    --text-faint:#64748b;
    --amber:#f59e0b;
    --blue:#38bdf8;
    --purple:#7c3aed;
    --green:#10b981;
    --red:#f87171;
    --border-strong:rgba(100,116,139,.5);
    --mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, 'Segoe UI Emoji', monospace;
    --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', Inter, Roboto, sans-serif;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;min-height:100%;background:var(--bg);}
  body{
    background:linear-gradient(135deg,#0f172a 0%,#1e293b 50%,#0f172a 100%);
    background-attachment:fixed;
    color:var(--text);
    font-family:var(--sans);
    font-size:15px;
    -webkit-font-smoothing:antialiased;
  }
  @keyframes fadeInUp{ from{opacity:0;transform:translateY(16px);} to{opacity:1;transform:translateY(0);} }
  @keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }
  @keyframes slideInLeft{ from{opacity:0;transform:translateX(-20px);} to{opacity:1;transform:translateX(0);} }
  @keyframes scaleIn{ from{opacity:0;transform:scale(.92);} to{opacity:1;transform:scale(1);} }
  .tab-section.active{ animation:fadeIn .25s ease; }
  .stat-card{ animation:scaleIn .3s ease both; }
  .stat-card:nth-child(1){ animation-delay:.05s; }
  .stat-card:nth-child(2){ animation-delay:.1s; }
  .stat-card:nth-child(3){ animation-delay:.15s; }
  .stat-card:nth-child(4){ animation-delay:.2s; }
  .nav-item{ transition:background .15s, color .15s, transform .1s; }
  .nav-item:active{ transform:scale(.97); }
  .btn-primary{ transition:filter .15s, transform .1s; }
  .btn-primary:active{ transform:scale(.96); }
  .ticket-row{ transition:background .15s; }
  .ticket-row:hover{ background:rgba(124,58,237,.06); }
  .titlebar{
    position:fixed;top:0;left:0;right:0;height:34px;z-index:200;
    background:rgba(15,23,42,.8);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(71,85,105,.3);
    display:flex;align-items:center;justify-content:space-between;
    -webkit-user-select:none;user-select:none;
  }
  .titlebar .tb-title{
    font-size:13px;color:var(--text-faint);padding-left:14px;font-weight:600;
    letter-spacing:.03em;flex:1;overflow:hidden;white-space:nowrap;
  }
  .titlebar .tb-controls{display:flex;align-items:stretch;height:34px;}
  .titlebar .tb-btn{
    width:46px;height:34px;background:transparent;border:none;color:var(--text-dim);
    font-size:13.5px;cursor:pointer;display:flex;align-items:center;justify-content:center;
    font-family:var(--sans);padding:0;
  }
  .titlebar .tb-btn:hover{background:var(--surface-2);color:var(--text);}
  .titlebar .tb-btn.tb-close:hover{background:var(--red);color:#fff;}
  .titlebar .tb-btn.tb-gear{width:40px;font-size:14.5px;}
  .titlebar .tb-btn.tb-gear.active{color:var(--green);}
  .app{display:flex;min-height:100vh;padding-top:34px;}

  /* Sidebar */
  .sidebar{
    width:220px;
    flex-shrink:0;
    background:rgba(15,23,42,.7);
    border-right:1px solid rgba(71,85,105,.3);
    display:flex;
    flex-direction:column;
    padding:20px 14px;
    position:sticky;
    top:34px;
    height:calc(100vh - 34px);
    overflow-y:auto;
  }
  .brand{padding:12px 6px 14px 6px;text-align:center;border-bottom:1px solid var(--border);margin-bottom:10px;}
  .brand .tag{
    font-family:var(--mono);
    font-size:12px;
    letter-spacing:.12em;
    color:var(--purple);
    text-transform:uppercase;
  }
  .brand h1{font-size:15.5px;margin:0 0 3px 0;font-weight:700;color:var(--text);line-height:1.3;}
  .brand p{margin:0;font-size:11.5px;color:var(--text-faint);line-height:1.4;}
  .side-logo{display:block;width:150px;height:auto;margin:0 auto 10px auto;}
  nav{display:flex;flex-direction:column;gap:3px;}
  .nav-item{
    display:flex;align-items:center;gap:9px;text-align:left;
    background:transparent;border:none;border-left:3px solid transparent;color:var(--text-dim);
    padding:10px 12px 10px 9px;border-radius:7px;font-size:14.3px;font-family:var(--sans);
    cursor:pointer;transition:background .12s, color .12s, border-color .12s;
  }
  .nav-ico{width:22px;flex-shrink:0;font-size:15px;line-height:1;text-align:center;}
  .nav-item:hover{background:rgba(30,41,59,.6);color:var(--text);}
  .nav-item.active{background:rgba(124,58,237,.14);color:var(--text);font-weight:600;border-left-color:var(--purple);}
  .nav-item.active .nav-ico{filter:none;}
  .nav-count{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--text-faint);}

  .sidebar-footer{
    margin-top:auto;display:flex;flex-direction:column;gap:8px;
    padding-top:16px;border-top:1px solid var(--border);
  }
  .gear-btn{
    width:34px;height:34px;background:var(--surface-2);border:1px solid var(--border);
    color:var(--text-dim);border-radius:8px;font-size:16px;cursor:pointer;line-height:1;
    display:flex;align-items:center;justify-content:center;
  }
  .gear-btn:hover{color:var(--text);border-color:var(--border-strong);}
  .gear-btn.active{color:var(--text);border-color:var(--green);background:rgba(79,203,140,.1);}
  .side-btn{
    background:var(--surface-2);border:1px solid var(--border);color:var(--text-dim);
    padding:8px 10px;border-radius:7px;font-size:13px;cursor:pointer;text-align:left;font-family:var(--sans);
  }
  .side-btn.center{text-align:center;}
  .side-btn:hover{color:var(--text);border-color:var(--border-strong);}
  .storage-note{font-size:11.5px;color:var(--text-faint);line-height:1.5;padding:0 2px;}

  main{flex:1;padding:28px 34px;}
  .tab-section{display:none;}
  .tab-section.active{display:block;}

  h2.page-title{font-size:20px;margin:0 0 3px 0;font-weight:650;}
  .page-sub{color:var(--text-dim);font-size:13.5px;margin:0 0 22px 0;}

  /* Dashboard cards */
  .stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px;}
  .stat-card{background:rgba(30,41,59,.5);border:1px solid rgba(71,85,105,.3);border-radius:10px;padding:16px 16px;position:relative;overflow:hidden;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
  .stat-card .num{font-family:var(--mono);font-size:25px;font-weight:600;}
  .stat-card .lbl{font-size:12.5px;color:var(--text-faint);margin-top:2px;}
  .stat-card.rail-total{border-left:3px solid var(--text-faint);}
  .stat-card.rail-baru{border-left:3px solid var(--amber);}
  .stat-card.rail-pending{border-left:3px solid var(--purple);}
  .stat-card.rail-selesai{border-left:3px solid var(--green);}

  .dash-cols{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:16px;}
  .dash-panel{background:rgba(30,41,59,.5);border:1px solid rgba(71,85,105,.3);border-radius:10px;padding:16px 18px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
  .dash-panel h3{font-size:14px;margin:0 0 12px 0;color:var(--text-dim);font-weight:600;display:flex;justify-content:space-between;align-items:center;}
  .panel-more{
    background:none;border:none;padding:2px 4px;cursor:pointer;font-family:var(--sans);
    font-size:12.5px;font-weight:650;color:var(--blue);white-space:nowrap;
  }
  .panel-more:hover{text-decoration:underline;}
  .mini-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border);font-size:13.8px;}
  .mini-row:last-child{border-bottom:none;}
  .mini-row .m-id{font-family:var(--mono);color:var(--text-faint);font-size:12.5px;}
  .empty-hint{color:var(--text-faint);font-size:13.5px;padding:10px 0;}

  /* ---------- Bantuan ---------- */
  .help-block{
    background:var(--surface);border:1px solid var(--border);border-radius:10px;
    padding:16px 18px;margin-bottom:14px;
  }
  .help-block h3{font-size:14.5px;margin:0 0 8px 0;display:flex;align-items:center;gap:8px;}
  .help-block p{font-size:13.6px;color:var(--text-dim);line-height:1.65;margin:0 0 8px 0;}
  .help-block p:last-child{margin-bottom:0;}
  .help-block ul{margin:6px 0 0 0;padding-left:18px;}
  .help-block li{font-size:13.6px;color:var(--text-dim);line-height:1.7;}

  /* Toolbar */
  .toolbar{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap;position:relative;}
  .summary-toggle{display:inline-flex;align-items:center;gap:6px;}
  .summary-toggle .st-caret{display:inline-block;transition:transform .15s;}
  .summary-toggle.active .st-caret{transform:rotate(180deg);}
  .search-box{
    background:var(--surface);border:1px solid var(--border);border-radius:8px;
    padding:8px 12px;color:var(--text);font-size:13.8px;flex:1;min-width:160px;font-family:var(--sans);
  }
  .search-box:focus{outline:none;border-color:var(--border-strong);}
  .pill-group{display:flex;gap:6px;flex-wrap:wrap;}
  .pill{
    border:1px solid var(--border);background:var(--surface);color:var(--text-dim);
    padding:7px 12px;border-radius:99px;font-size:13px;cursor:pointer;font-family:var(--sans);
  }
  .pill.active{background:var(--surface-2);color:var(--text);border-color:var(--border-strong);font-weight:600;}
  .select-filter{
    background:var(--surface);border:1px solid var(--border);color:var(--text-dim);
    padding:8px 10px;border-radius:8px;font-size:13.3px;font-family:var(--sans);cursor:pointer;
  }
  .select-filter:focus{outline:none;border-color:var(--border-strong);}
  .btn-primary{
    background:linear-gradient(135deg,#7c3aed,#6366f1);color:#fff;border:none;padding:9px 16px;border-radius:8px;
    font-size:13.8px;font-weight:650;cursor:pointer;font-family:var(--sans);
  }
  .btn-primary:hover{filter:brightness(1.1);}

  /* Table */

  .ticket-table{width:100%;border-collapse:collapse;}
  .ticket-table thead th{
    text-align:left;font-size:11.8px;text-transform:uppercase;letter-spacing:.06em;
    color:var(--text-faint);padding:0 12px 8px 12px;font-weight:600;
  }
  .ticket-row{background:var(--surface);border:1px solid var(--border);}
  .ticket-row td{padding:12px;vertical-align:top;font-size:13.8px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
  .ticket-row td:first-child{border-left:3px solid var(--text-faint);border-top-left-radius:8px;border-bottom-left-radius:8px;}
  .ticket-row td:last-child{border-right:1px solid var(--border);border-top-right-radius:8px;border-bottom-right-radius:8px;}
  .ticket-row.st-baru td:first-child{border-left-color:var(--amber);}
  .ticket-row.st-pending td:first-child{border-left-color:var(--purple);}
  .ticket-row.st-selesai td:first-child{border-left-color:var(--green);}
  
  .tid{font-family:var(--mono);color:var(--text-dim);font-size:13px;}
  button.tdate-btn{
    background:transparent;border:none;padding:0;font-family:var(--sans);color:var(--text-faint);
    font-size:12.5px;margin-top:2px;cursor:pointer;border-bottom:1px dashed var(--text-faint);line-height:1.5;
  }
  button.tdate-btn:hover{color:var(--text-dim);border-bottom-color:var(--text-dim);}
  input.quickdate-input{
    background:var(--surface-2);border:1px solid var(--blue);color:var(--text);font-size:12.5px;
    border-radius:5px;padding:2px 4px;font-family:var(--sans);margin-top:2px;
  }
  .desc-main{font-weight:500;}
  .desc-sub{color:var(--text-faint);font-size:12.5px;margin-top:3px;}
  .solusi-text{color:var(--text-dim);}
  .solusi-empty{color:var(--text-faint);font-style:italic;}
  .status-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:99px;font-size:12px;font-weight:650;font-family:var(--sans);white-space:nowrap;}
  .status-badge.baru{background:rgba(242,184,75,.14);color:var(--amber);}
  .status-badge.pending{background:rgba(185,142,242,.2);color:#c4b5fd;}
  .status-badge.selesai{background:rgba(79,203,140,.14);color:var(--green);}
  .row-actions{display:flex;gap:6px;}
  .icon-btn{
    background:var(--surface-2);border:1px solid var(--border);color:var(--text-dim);
    padding:6px 9px;border-radius:6px;font-size:12.5px;cursor:pointer;font-family:var(--sans);
  }
  .icon-btn:hover{color:var(--text);}
  .icon-btn.danger:hover{color:var(--red);border-color:var(--red);}

  .empty-state{
    text-align:center;padding:50px 20px;color:var(--text-faint);
    border:1px dashed var(--border);border-radius:10px;font-size:13.8px;
    display:none; /* JS explicitly sets this to block/none on every render — see renderKerusakan/renderDokumentasi */
  }

  /* ---------- Utility classes (moved out of inline style="" so the CSP can drop 'unsafe-inline') ---------- */
  .mt-8{margin-top:8px;}
  .check-label{display:flex;align-items:center;gap:8px;cursor:pointer;}
  .col-90{width:90px;}
  .col-110{width:110px;}
  .col-140{width:140px;}
  .col-150{width:150px;}
  .t-date{font-size:12.5px;color:var(--text-faint);margin-top:2px;}
  .t-date.tdate-selesai{color:var(--green);font-weight:600;}
  .field-hint{color:var(--text-faint);font-weight:400;}
  #chooseBackupFolderBtn{min-width:200px;}
  #setting-autostart,#setting-notif{width:auto;}
  #doc-back{margin-bottom:14px;}
  #f-id{font-family:var(--mono);}

  /* Modal */
  .modal-overlay{position:fixed;inset:0;background:rgba(6,9,10,.6);display:flex;align-items:center;justify-content:center;z-index:300;}
  .modal-overlay[hidden]{display:none;}
  .modal{
    background:var(--surface);border:1px solid var(--border);border-radius:12px;width:460px;
    max-width:92vw;max-height:88vh;overflow-y:auto;padding:22px 22px 18px 22px;
  }
  .modal h3{margin:0 0 3px 0;font-size:16.5px;}
  .modal .modal-sub{color:var(--text-faint);font-size:12.5px;margin:0 0 18px 0;font-family:var(--mono);}
  .field{margin-bottom:13px;}
  .field label{display:block;font-size:12.5px;color:var(--text-dim);margin-bottom:5px;font-weight:600;}
  .field input[type=text], .field input[type=date], .field select, .field textarea{
    width:100%;background:var(--surface-2);border:1px solid var(--border);color:var(--text);
    padding:9px 10px;border-radius:7px;font-size:13.8px;font-family:var(--sans);
  }
  .field textarea{resize:vertical;min-height:60px;}
  .field input:focus, .field select:focus, .field textarea:focus{outline:none;border-color:var(--border-strong);}
  .status-radio-group{display:flex;gap:6px;flex-wrap:wrap;}
  .status-radio{
    flex:1;min-width:70px;text-align:center;padding:8px 4px;border-radius:7px;border:1px solid var(--border);
    background:var(--surface-2);color:var(--text-dim);font-size:12.5px;cursor:pointer;font-weight:600;
  }
  .status-radio.sel-baru.checked{background:rgba(242,184,75,.14);color:var(--amber);border-color:var(--amber);}
  .status-radio.sel-pending.checked{background:rgba(185,142,242,.16);color:var(--purple);border-color:var(--purple);}
  .status-radio.sel-selesai.checked{background:rgba(79,203,140,.14);color:var(--green);border-color:var(--green);}
  .modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;}
  .btn-ghost{
    background:transparent;border:1px solid var(--border);color:var(--text-dim);padding:9px 15px;
    border-radius:8px;font-size:13.8px;cursor:pointer;font-family:var(--sans);
  }
  .btn-ghost:hover{color:var(--text);}

  .setting-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;}

  .toast{
    position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);
    background:var(--surface-2);border:1px solid var(--border);color:var(--text);
    padding:10px 18px;border-radius:8px;font-size:13.5px;opacity:0;
    transition:opacity .18s, transform .18s;pointer-events:none;z-index:80;
  }
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

  /* ---------- Konfirmasi & Sukses (pengganti popup bawaan browser) ---------- */
  .confirm-modal, .success-modal{width:360px;text-align:center;padding:26px 24px 22px 24px;}
  .confirm-icon, .success-icon{font-size:37px;margin-bottom:10px;}
  .confirm-message{font-size:14.5px;color:var(--text);line-height:1.5;margin:0 0 6px 0;}
  .confirm-modal .modal-actions{justify-content:center;margin-top:18px;}
  .btn-danger{
    background:var(--red);color:#fff;border:none;padding:9px 18px;border-radius:8px;
    font-size:13.8px;font-weight:650;cursor:pointer;font-family:var(--sans);
  }
  .btn-danger:hover{filter:brightness(1.08);}
  .btn-blue{background:var(--blue);color:#0B1210;border:none;padding:9px 18px;border-radius:8px;font-size:13.8px;font-weight:650;cursor:pointer;font-family:var(--sans);}
  .btn-blue:hover{filter:brightness(1.08);}
  .btn-purple{background:var(--purple);color:#fff;border:none;padding:9px 18px;border-radius:8px;font-size:13.8px;font-weight:650;cursor:pointer;font-family:var(--sans);}
  .btn-purple:hover{filter:brightness(1.08);}
  .btn-amber{background:var(--amber);color:#0B1210;border:none;padding:9px 18px;border-radius:8px;font-size:13.8px;font-weight:650;cursor:pointer;font-family:var(--sans);}
  .btn-amber:hover{filter:brightness(1.08);}
  .btn-green{background:var(--green);color:#0B1210;border:none;padding:9px 18px;border-radius:8px;font-size:13.8px;font-weight:650;cursor:pointer;font-family:var(--sans);}
  .btn-green:hover{filter:brightness(1.08);}
  .success-message{font-size:15.5px;font-weight:650;color:var(--text);margin:0 0 6px 0;}
  .success-id{font-family:var(--mono);font-size:14px;color:var(--green);background:rgba(79,203,140,.12);
    display:inline-block;padding:5px 12px;border-radius:8px;margin-bottom:18px;}

  /* ---------- Draft ---------- */
  .draft-banner{
    background:rgba(242,184,75,.1);border:1px solid rgba(242,184,75,.35);border-radius:8px;
    padding:10px 12px;margin-bottom:14px;font-size:13px;color:var(--amber);
    display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  }
  .draft-banner .db-actions{display:flex;gap:6px;flex-shrink:0;}
  .draft-banner button{
    background:var(--surface-2);border:1px solid var(--border);color:var(--text);
    padding:5px 10px;border-radius:6px;font-size:12px;cursor:pointer;font-family:var(--sans);
  }

  /* ---------- Tiket lama belum ditangani ---------- */
  .stale-badge{
    display:inline-block;margin-left:6px;font-size:11px;font-weight:650;color:var(--red);
    background:rgba(232,105,122,.12);padding:2px 7px;border-radius:99px;
  }


  /* ---------- Dokumentasi ---------- */
  .doc-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-left:3px solid var(--green);
    border-radius:10px;
    padding:16px 18px;
    margin-bottom:12px;
  }
  .doc-card-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:10px;
    margin-bottom:8px;
  }
  .doc-title{font-size:14.5px;font-weight:650;line-height:1.4;}
  .doc-meta{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    margin-top:6px;
  }
  .doc-tag{
    font-size:11.5px;
    padding:2px 8px;
    border-radius:99px;
    background:var(--surface-2);
    color:var(--text-dim);
    border:1px solid var(--border);
  }
  .doc-tag.kategori{background:rgba(79,168,232,.14);color:var(--blue);border-color:transparent;}
  .doc-related{
    font-size:11.5px;
    padding:2px 8px;
    border-radius:99px;
    background:rgba(242,184,75,.14);
    color:var(--amber);
    border:none;
    cursor:pointer;
    font-family:var(--sans);
    font-weight:650;
  }
  .doc-related:hover{filter:brightness(1.1);}
  .doc-id{font-family:var(--mono);color:var(--text-faint);font-size:12px;white-space:nowrap;}
  .doc-solution{
    background:var(--surface-2);
    border-radius:8px;
    padding:10px 12px;
    margin-top:8px;
    font-size:13.6px;
    color:var(--text-dim);
    line-height:1.55;
  }
  .doc-solution .doc-solution-label{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:var(--green);
    font-weight:700;
    display:block;
    margin-bottom:4px;
  }
  .doc-related-list{
    margin-top:8px;
    padding-top:8px;
    border-top:1px dashed var(--border);
    font-size:12.5px;
    color:var(--text-faint);
    display:none;
  }
  .doc-related-list.show{display:block;}
  .doc-related-list a{color:var(--text-dim);text-decoration:none;border-bottom:1px dashed var(--text-faint);cursor:pointer;}

  /* ---------- Menu Bulan ---------- */
  .month-menu{
    display:flex;
    gap:6px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:8px;
    margin-bottom:14px;
  }
  .month-chip{
    flex-shrink:0;
    background:var(--surface);
    border:1px solid var(--border);
    color:var(--text-dim);
    padding:9px 14px;
    border-radius:10px;
    font-size:13px;
    cursor:pointer;
    font-family:var(--sans);
    white-space:nowrap;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
    min-width:78px;
  }
  .month-chip .mc-count{font-family:var(--mono);font-size:15px;font-weight:650;color:var(--text);}
  .month-chip .mc-label{font-size:11px;color:var(--text-faint);}
  .month-chip.active{background:rgba(79,203,140,.12);border-color:var(--green);}
  .month-chip.active .mc-count{color:var(--green);}
  .month-chip:hover{border-color:var(--border-strong);}

  /* ---------- Ringkasan Panel (dropdown) ---------- */
  .summary-panel{
    display:none;
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    z-index:60;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:10px;
    padding:14px 16px;
    box-shadow:0 12px 32px rgba(0,0,0,.4);
    min-width:400px;
    max-width:min(640px, calc(100vw - 40px));
    max-height:70vh;
    overflow-y:auto;
  }
  .summary-panel.open{display:block;}
  .summary-panel .sp-title{
    font-size:12.5px;
    font-weight:650;
    color:var(--text-dim);
    margin-bottom:10px;
  }
  .summary-panel .sp-empty{font-size:13px;color:var(--text-faint);}
  .sp-grid{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
  }
  .sp-box{
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:12px;
    padding:10px 8px;
    text-align:center;
    font-family:var(--sans);
    cursor:pointer;
    width:84px;
    flex-shrink:0;
    transition:border-color .12s, transform .08s, box-shadow .12s;
    -webkit-appearance:none;
    appearance:none;
    outline:none;
    position:relative;
  }
  .sp-box:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
  .sp-box:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.25);}
  .sp-box:active{transform:translateY(0);}
  .sp-box .sp-emoji{
    font-size:23px;line-height:1;margin:0 auto 6px;
    width:44px;height:44px;display:flex;align-items:center;justify-content:center;
    background:rgba(79,168,232,.12);border:1px solid rgba(79,168,232,.22);
    border-radius:12px;
  }
  .sp-box .sp-count{font-family:var(--mono);font-size:19px;font-weight:700;color:var(--text);line-height:1;}
  .sp-box .sp-name{
    font-size:11px;
    font-weight:600;
    color:var(--text-dim);
    margin-top:4px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .sp-box.sp-active{background:rgba(79,203,140,.14);border-color:var(--green);box-shadow:0 6px 16px rgba(79,203,140,.18);}
  .sp-box.sp-active .sp-count{color:var(--green);}
  .sp-box.sp-active .sp-emoji{background:rgba(79,203,140,.16);border-color:rgba(79,203,140,.35);}

  /* ---------- Backup & Sinkron ---------- */
  .backup-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:12px;
    padding:20px 22px 18px;
    margin-bottom:16px;
  }
  .backup-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap;}
  .backup-title{font-size:15.5px;font-weight:650;color:var(--text);}
  .backup-sub{font-size:12.5px;color:var(--text-faint);margin-top:3px;}
  .drive-badge{
    font-size:12px;font-weight:700;padding:5px 12px;border-radius:99px;
    background:var(--surface-2);color:var(--text-faint);border:1px solid var(--border);
    white-space:nowrap;
  }

  /* Settings card grid */
  .settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;}
  .setting-card{
    background:var(--surface);border:1px solid var(--border);border-radius:12px;
    padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px;
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  }
  .setting-header{display:flex;align-items:center;gap:12px;min-width:0;}
  .setting-icon{
    font-size:18px;width:40px;height:40px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    background:var(--surface-2);border:1px solid var(--border);border-radius:10px;
  }
  .setting-label{font-size:14px;font-weight:650;color:var(--text);}
  .setting-desc{font-size:12px;color:var(--text-faint);margin-top:2px;line-height:1.45;}
  .setting-sub{font-size:12px;color:var(--text-dim);margin-top:4px;font-family:var(--mono);}
  .setting-card .toggle{flex-shrink:0;}

  /* Toggle switch */
  .toggle{position:relative;display:inline-block;width:42px;height:23px;flex-shrink:0;}
  .toggle input{opacity:0;width:0;height:0;}
  .slider{
    position:absolute;cursor:pointer;inset:0;
    background:var(--surface-2);border:1px solid var(--border);border-radius:99px;transition:.2s;
  }
  .slider::before{
    content:'';position:absolute;height:17px;width:17px;left:2px;bottom:2px;
    background:var(--text-dim);border-radius:50%;transition:.2s;
  }
  .toggle input:checked + .slider{background:rgba(124,58,237,.3);border-color:var(--purple);}
  .toggle input:checked + .slider::before{transform:translateX(19px);background:#a78bfa;}

  .backup-sep{height:1px;background:var(--border);margin:16px 0;}

  /* Dashboard report banner */
.report-banners{
    display:grid;grid-template-columns:1fr 1fr;gap:16px;
  }
  .report-banners .report-banner{margin-bottom:0;}
  .aset-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;}
  .pager-wrap{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:16px;flex-wrap:wrap;}
  .pager-btn{
    background:var(--surface);border:1px solid var(--border);color:var(--text-dim);
    min-width:34px;height:34px;padding:0 10px;border-radius:8px;font-size:13.5px;cursor:pointer;
    font-family:var(--sans);font-weight:600;display:inline-flex;align-items:center;justify-content:center;
  }
  .pager-btn:hover:not(:disabled){color:var(--text);border-color:var(--border-strong);}
  .pager-btn.active{background:var(--blue);border-color:var(--blue);color:#fff;}
  .pager-btn:disabled{opacity:.35;cursor:default;}
  .pager-dots{color:var(--text-faint);padding:0 4px;font-size:13px;}
  .aset-table{width:100%;}
  .col-aset-id{width:70px;}
  .col-aset-tanggal{width:85px;}
  .col-aset-garansi{width:70px;}
  .col-aset-toko{width:85px;}
  .col-aset-serial{width:100px;}
  .col-aset-aksi{width:80px;}
  .aset-table td{padding:10px 10px;font-size:13px;word-wrap:break-word;overflow-wrap:break-word;}
  .aset-table .tid{font-family:var(--mono);font-weight:700;color:var(--blue);font-size:13px;letter-spacing:.03em;}
  .aset-table .aset-nama{font-weight:700;color:var(--text);font-size:14px;line-height:1.35;}
  .aset-table .aset-garansi{color:var(--text);}
  .aset-table .aset-muted{color:var(--text);font-size:13.8px;}
  .aset-table .aset-muted.mono{font-family:var(--mono);letter-spacing:.02em;}
  .aset-table thead th{padding:0 10px 8px 10px;font-size:13px;}
  .aset-table .ticket-row td{
    border:none;border-bottom:1px solid var(--border);border-radius:0;
    padding:9px 10px;vertical-align:middle;
  }
  .aset-table .ticket-row td:first-child{border-left:none;border-radius:0;}
  .aset-table .ticket-row td:last-child{border-right:none;border-radius:0;}
  .aset-table tbody tr + tr{box-shadow:none;}

  /* Kerusakan Barang: proper spacing between row-cards */
  .kerusakan-table{border-collapse:separate;border-spacing:0;}
  .kerusakan-table tbody tr + tr{box-shadow:none;}

  .kerusakan-table .tid{font-family:var(--mono);font-weight:700;color:var(--blue);font-size:13px;letter-spacing:.03em;}
  .kerusakan-table .t-date{color:var(--text-dim);font-size:12.5px;margin-top:2px;}
  .kerusakan-table .t-date.tdate-selesai{color:var(--green);font-weight:600;}
  .kerusakan-table .desc-main{font-weight:700;font-size:14px;color:var(--text);line-height:1.35;}
  .kerusakan-table .desc-sub{color:var(--text-dim);font-size:12.5px;margin-top:3px;}
  .kerusakan-table .solusi-text{color:var(--text);}
  .budget-row td{background:var(--surface-2);background-clip:padding-box;border-bottom:10px solid transparent;padding:10px 14px;}
  .budget-row:last-child td{border-bottom:1px solid var(--border);}
  .budget-box{
    display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:13px;
    background:transparent;border:none;
    border-radius:0;padding:6px 12px;box-shadow:none;
  }
  .budget-row td:first-child{border-left:none;border-radius:0;}
  .budget-row td:last-child{border-right:none;border-radius:0;}
  .budget-box{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:13px;}
  .budget-box.budget-empty{color:var(--text-faint);}
  .budget-head{display:flex;align-items:center;gap:8px;font-weight:600;}
  .budget-amount{font-weight:700;color:var(--text);}
  .budget-note{color:var(--text-dim);font-style:italic;}
  .budget-note.note-empty{color:var(--text-faint);}
  .budget-meta{color:var(--text-faint);font-size:12.5px;}
  .budget-actions{display:flex;gap:8px;margin-left:auto;}
  .budget-badge{display:inline-flex;padding:3px 9px;border-radius:99px;font-size:11.5px;font-weight:700;}
  .budget-badge.pending{background:rgba(242,184,75,.16);color:var(--amber);}
  .budget-badge.approved{background:rgba(79,203,140,.16);color:var(--green);}
  .budget-badge.rejected{background:rgba(232,79,79,.14);color:var(--red);}
  .budget-badge.none{background:rgba(140,140,140,.12);color:var(--text-faint);}
  .btn-primary.small,.btn-ghost.small{padding:6px 12px;font-size:12.5px;border-radius:6px;}

  .report-banner{
    display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
    background:linear-gradient(135deg,rgba(30,41,59,.6),rgba(15,23,42,.5));
    border:1px solid rgba(71,85,105,.3);border-left:3px solid var(--purple);
    border-radius:12px;padding:16px 20px;margin-bottom:16px;
    box-shadow:0 6px 18px rgba(0,0,0,.2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  }
  .report-banner-info{flex:1;min-width:220px;}
  .report-banner-title{font-size:15.5px;font-weight:650;color:var(--text);}
  .report-banner-sub{font-size:12.5px;color:var(--text-faint);margin-top:3px;line-height:1.5;}
  .report-banner-btn{
    background:linear-gradient(135deg,#7c3aed,#6366f1);
    border:none;border-radius:10px;padding:11px 20px;color:#fff;
    font-weight:700;font-size:14px;font-family:var(--sans);cursor:pointer;
    box-shadow:0 6px 16px rgba(79,168,232,.28);
    transition:transform .12s ease, box-shadow .12s ease;
    white-space:nowrap;
  }
  .report-banner-btn:hover{transform:translateY(-2px);box-shadow:0 9px 22px rgba(79,168,232,.38);}
  .report-banner-btn:active{transform:translateY(0);}
  .backup-toast{
    position:fixed;bottom:22px;right:22px;z-index:90;max-width:360px;
    background:var(--surface-2);border:1px solid var(--green);color:var(--text);
    padding:10px 14px;border-radius:8px;font-size:13px;display:none;align-items:center;gap:8px;
    box-shadow:0 8px 24px rgba(0,0,0,.35);
  }
  .backup-toast #backupToastIcon{color:var(--green);font-weight:700;}

  /* ---------- Login ---------- */
  .login-screen{position:fixed;inset:0;background:linear-gradient(135deg,#0f172a 0%,#1e293b 50%,#0f172a 100%);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px;}
  .login-screen[hidden]{display:none;}
  .login-container{display:flex;width:820px;max-width:100%;min-height:480px;border-radius:18px;overflow:hidden;box-shadow:0 32px 80px rgba(0,0,0,.5);}
  .login-left{
    flex:1.1;background:linear-gradient(160deg,#1e293b 0%,#0f172a 100%);
    display:flex;flex-direction:column;justify-content:space-between;
    padding:40px 36px 28px;position:relative;overflow:hidden;
  }
  .login-left::before{
    content:'';position:absolute;top:-60px;right:-60px;width:200px;height:200px;
    background:radial-gradient(circle,rgba(124,58,237,.15) 0%,transparent 70%);pointer-events:none;
  }
  .login-left-content{position:relative;z-index:1;}
  .login-brand{display:flex;flex-direction:column;align-items:center;margin-bottom:24px;}
  .login-logo{height:80px;width:auto;max-width:280px;object-fit:contain;border-radius:8px;}
  .login-brand-name{font-size:15px;font-weight:700;color:#e2e8f0;letter-spacing:.04em;}
  .login-brand-sub{font-size:10px;font-weight:600;color:#7c3aed;letter-spacing:.14em;text-transform:uppercase;margin-top:2px;}
  .login-title{font-size:30px;font-weight:700;color:#f8fafc;margin:0 0 6px 0;}
  .login-subtitle{font-size:17px;font-weight:600;color:#7c3aed;margin:0 0 16px 0;}
  .login-desc{font-size:13.5px;color:#94a3b8;line-height:1.65;margin:0 0 28px 0;}
  .login-features{display:flex;flex-direction:column;gap:14px;}
  .login-feature{display:flex;align-items:center;gap:12px;}
  .lf-icon{font-size:18px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:rgba(124,58,237,.12);border-radius:8px;}
  .lf-text{font-size:13.5px;color:#cbd5e1;font-weight:500;}
  .login-right{
    flex:0.9;display:flex;align-items:center;justify-content:center;
    background:rgba(30,41,59,.6);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    padding:40px 36px;
  }
  .login-card{width:100%;max-width:320px;text-align:center;}
  .login-card-icon{font-size:36px;margin-bottom:12px;}
  .login-card-title{font-size:20px;font-weight:700;color:#f8fafc;margin:0 0 6px 0;}
  .login-card-sub{font-size:13px;color:#94a3b8;margin:0 0 26px 0;}
  .login-field{text-align:left;margin-bottom:18px;}
  .login-field label{display:block;font-size:12.5px;color:#94a3b8;margin-bottom:6px;font-weight:600;}
  .login-input-wrap{position:relative;}
  .login-input-wrap input{
    width:100%;background:rgba(15,23,42,.6);border:1px solid rgba(71,85,105,.5);color:#f8fafc;
    padding:11px 14px;border-radius:10px;font-size:14px;font-family:var(--sans);
    transition:border-color .2s;
  }
  .login-input-wrap input::placeholder{color:#475569;}
  .login-input-wrap input:focus{outline:none;border-color:#7c3aed;}
  .pw-toggle{
    position:absolute;right:10px;top:50%;transform:translateY(-50%);
    background:none;border:none;color:#94a3b8;cursor:pointer;font-size:15px;padding:4px;
  }
  .pw-toggle:hover{color:#f8fafc;}
  .login-submit{
    width:100%;background:linear-gradient(135deg,#7c3aed,#6366f1);color:#fff;border:none;
    padding:12px;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;
    font-family:var(--sans);margin-top:4px;transition:filter .2s,transform .1s;
  }
  .login-submit:hover{filter:brightness(1.1);}
  .login-submit:active{transform:scale(.98);}
  .login-error{font-size:13px;color:#f87171;margin-top:12px;min-height:16px;}
  .login-link{width:100%;background:transparent;color:#64748b;border:1px solid rgba(71,85,105,.4);padding:9px;border-radius:10px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:var(--sans);margin-top:10px;}
  .login-link:hover{color:#7c3aed;border-color:#7c3aed;}
  .login-hint{font-size:12px;color:var(--text-faint);margin-top:12px;line-height:1.6;}
  .login-update{
    position:fixed;left:18px;bottom:16px;width:264px;
    background:transparent;border:none;padding:0;
    box-shadow:none;
  }
  .login-update .lu-head{
    display:flex;align-items:baseline;justify-content:space-between;
    margin-bottom:3px;opacity:.5;
  }
  .login-update .lu-title{
    font-size:9.5px;text-transform:uppercase;letter-spacing:.16em;
    color:#64748b;font-weight:700;
  }
  .login-update .lu-status{
    font-size:12px;color:#94a3b8;margin:0 0 5px 0;line-height:1.5;opacity:.8;
  }
  .login-update .setting-row{margin-top:0;display:flex;gap:10px;}
  .login-ver{
    position:fixed;right:18px;bottom:16px;
    font-size:10px;font-family:var(--mono);letter-spacing:.04em;
    color:#475569;opacity:.5;
  }
  .login-update button{
    background:transparent;border:none;color:var(--text-faint);
    font-size:11.5px;font-weight:600;padding:0;cursor:pointer;font-family:var(--sans);
    text-align:left;
  }
  .login-update button:hover{color:var(--green);text-decoration:underline;}
  .login-update.has-update .lu-status{color:var(--green);opacity:1;}
  .login-update.has-update .lu-ver{color:var(--green);}
  .login-update.has-update button#upd-apply{color:var(--green);font-weight:700;}
  .acc-actions{display:flex;gap:8px;align-items:center;}
  .self-warning{
    margin-top:12px;padding:10px 12px;border-radius:10px;
    font-size:12px;line-height:1.55;text-align:left;
    background:rgba(242,184,75,.1);border:1px solid rgba(242,184,75,.4);color:var(--amber);
  }
  .self-warning code{font-family:var(--mono);font-size:11px;}
  .self-warning-bad{
    background:rgba(232,105,122,.1);border-color:rgba(232,105,122,.45);color:var(--red);
  }

  /* ---------- Kelola Akun ---------- */
  .accounts-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;flex-wrap:wrap;}
  .accounts-table{width:100%;border-collapse:collapse;}
  .accounts-table th{text-align:left;font-size:11.8px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-faint);padding:0 12px 8px 12px;font-weight:600;}
  .accounts-table td{padding:12px;font-size:13.8px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
  .role-badge{display:inline-flex;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:650;}
  .role-badge.admin{background:rgba(79,168,232,.14);color:var(--blue);}
  .role-badge.supervisor{background:rgba(242,184,75,.16);color:var(--amber);}
  .role-badge.manager{background:rgba(242,184,75,.16);color:var(--amber);}
  .role-badge.owner{background:rgba(79,203,140,.14);color:var(--green);}
  .role-badge.director{background:rgba(232,79,79,.14);color:var(--red);}
  .role-badge.user{background:rgba(185,142,242,.16);color:var(--purple);}

  /* ---------- Buat Tiket (normal user) ---------- */
  .buat-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:8px;}
  .buat-card{
    background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:26px 20px;
    text-align:center;cursor:pointer;transition:border-color .12s, transform .08s;font-family:var(--sans);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
  }
  .buat-card:hover{border-color:var(--blue);transform:translateY(-2px);}
  .buat-card .bc-emoji{font-size:35px;margin-bottom:10px;}
  .buat-card .bc-title{font-size:16px;font-weight:650;color:var(--text);}
  .buat-card .bc-sub{font-size:12.5px;color:var(--text-faint);margin-top:5px;}

  /* Hero card di Dashboard */
  .dash-buat-card{
    display:flex;align-items:center;gap:18px;width:100%;text-align:left;
    background:rgba(30,41,59,.5);border:1px solid rgba(71,85,105,.3);border-left:4px solid var(--purple);
    border-radius:12px;padding:20px 24px;margin-bottom:16px;position:relative;overflow:hidden;
    cursor:pointer;font-family:var(--sans);
    transition:border-color .12s, transform .08s, box-shadow .12s;
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  }
  .dash-buat-card::after{
    content:"";position:absolute;right:-46px;top:-46px;width:180px;height:180px;
    background:radial-gradient(circle,rgba(124,58,237,.12),transparent 70%);
  }
  .dash-buat-card:hover{border-color:var(--purple);transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.2);}
  .dash-buat-card .bc-emoji{font-size:40px;line-height:1;flex-shrink:0;}
  .dash-buat-card .bc-body{flex:1;min-width:0;}
  .dash-buat-card .bc-title{font-size:17px;font-weight:700;color:var(--text);}
  .dash-buat-card .bc-sub{font-size:13px;color:var(--text-faint);margin-top:4px;}
  .dash-buat-card .bc-cta{font-size:13px;font-weight:700;color:var(--blue);white-space:nowrap;position:relative;z-index:1;}
  .dash-buat-card:hover .bc-cta{text-decoration:underline;}

  @media (max-width:760px){
    /* === Hide desktop-only elements === */
    .titlebar{display:none;}
    .brand{display:none;}
    .storage-note{display:none;}
    .login-update,.login-ver{display:none;}

    /* === Reset all letter/word spacing for tight mobile text === */
    *{letter-spacing:normal !important;word-spacing:normal !important;}
    h1,h2,h3,h4,p,a,span,div,button,td,th,label,input,select,textarea{
      letter-spacing:normal !important;word-spacing:normal !important;
    }

    /* === Layout === */
    .app{flex-direction:column;padding-top:0;}
    .sidebar{
      width:100%;flex-direction:column;align-items:stretch;
      padding:10px 12px;position:static;height:auto;overflow:visible;
      border-right:none;border-bottom:1px solid var(--border);
    }
    main{padding:14px 12px;}

    /* === Sidebar nav → horizontal scroll === */
    nav{
      flex-direction:row;overflow-x:auto;-webkit-overflow-scrolling:touch;
      gap:4px;padding-bottom:2px;
    }
    nav::-webkit-scrollbar{height:0;}
    .nav-item{flex-shrink:0;white-space:nowrap;padding:8px 10px;font-size:13px;}
    .nav-item .nav-ico{display:none;}
    .sidebar-footer{
      display:flex;flex-direction:row;flex-wrap:wrap;gap:6px;
      margin-top:8px;padding-top:8px;border-top:1px solid var(--border);
    }
    .side-btn{flex:1 1 auto;min-width:0;text-align:center;font-size:12px;padding:7px 8px;}

    /* === Login === */
    .login-container{flex-direction:column;min-height:auto;width:100%;max-width:400px;border-radius:14px;}
    .login-left{padding:24px 20px 16px;}
    .login-left::before{width:120px;height:120px;top:-40px;right:-40px;}
    .login-brand{margin-bottom:16px;}
    .login-brand h1{font-size:1.5em;}
    .login-title{font-size:20px;margin:0 0 4px;}
    .login-subtitle{font-size:14px;margin:0 0 10px;}
    .login-desc{font-size:12.5px;margin:0 0 16px;}
    .login-features{gap:8px;}
    .login-feature{gap:8px;}
    .lf-icon{width:28px;height:28px;font-size:14px;}
    .lf-text{font-size:12px;}
    .login-right{padding:24px 20px;}
    .login-card{max-width:100%;}
    .login-card-icon{font-size:28px;margin-bottom:8px;}
    .login-card-title{font-size:17px;}
    .login-card-sub{font-size:12px;margin:0 0 18px;}
    .login-field{margin-bottom:14px;}
    .login-submit{padding:11px;font-size:14px;}

    /* === Dashboard === */
    .stat-grid{grid-template-columns:1fr 1fr;gap:8px;}
    .stat-card{padding:12px;}
    .stat-card .num{font-size:20px;}
    .stat-card .lbl{font-size:11px;}
    .dash-buat-card{padding:14px 16px;gap:12px;}
    .dash-buat-card .bc-emoji{font-size:28px;}
    .dash-buat-card .bc-title{font-size:14px;}
    .dash-buat-card .bc-sub{font-size:12px;}
    .dash-buat-card .bc-cta{font-size:12px;}
    .report-banners{grid-template-columns:1fr;gap:10px;}
    .report-banner{padding:12px 14px;flex-direction:column;align-items:stretch;gap:10px;}
    .report-banner-info{min-width:0;}
    .report-banner-title{font-size:13px;}
    .report-banner-sub{font-size:11.5px;}
    .report-banner-btn{width:100%;text-align:center;padding:10px;font-size:13px;}

    /* === Toolbar === */
    .toolbar{gap:6px;}
    .search-box{min-width:0;flex-basis:100%;font-size:13px;padding:7px 10px;}
    .select-filter{flex:1;min-width:0;font-size:12px;padding:7px 8px;}
    .pill-group{width:100%;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;padding-bottom:2px;gap:4px;}
    .pill{flex-shrink:0;padding:6px 10px;font-size:12px;}
    .btn-primary{width:100%;padding:10px;font-size:13px;}
    .aset-toolbar{flex-wrap:wrap;gap:8px;}
    .page-title{font-size:17px;}
    .page-sub{font-size:12px;margin:0 0 14px;line-height:1.5;}

    /* ========================================
       Kerusakan + Aset tables → card layout
       Override desktop table styles explicitly
       ======================================== */
    .ticket-table thead{display:none;}
    .ticket-table,.ticket-table tbody,.ticket-table tr{display:block;width:100%;}

    .ticket-row{
      display:block;margin-bottom:10px;border-radius:10px;overflow:hidden;
      background:var(--surface);border:1px solid var(--border);
    }

    .ticket-table td,
    .kerusakan-table td,
    .aset-table td{
      display:block;width:auto;border:none !important;
      border-top:1px solid var(--border) !important;
      border-radius:0 !important;
      padding:8px 12px;font-size:13px;
      background:transparent !important;
    }
    .ticket-table td:first-child,
    .kerusakan-table td:first-child,
    .aset-table td:first-child{border-top:none !important;}

    /* Card label for each field */
    .ticket-table td[data-label]::before,
    .kerusakan-table td[data-label]::before,
    .aset-table td[data-label]::before{
      content:attr(data-label);
      display:block;font-size:11px;font-weight:700;
      color:var(--text-faint);margin-bottom:3px;
    }

    /* Last cell = action row */
    .ticket-table td:last-child,
    .kerusakan-table td:last-child,
    .aset-table td:last-child{background:var(--surface-2) !important;}

    /* Kerusakan specifics */
    .kerusakan-table .desc-main{font-size:13px;}
    .kerusakan-table .desc-sub{font-size:12px;}
    .kerusakan-table .t-date{font-size:11.5px;}
    .budget-row td{background:var(--surface-2) !important;border-bottom:none !important;padding:8px 12px;}
    .budget-box{font-size:12px;gap:6px 8px;padding:6px 8px;}
    .row-actions{flex-wrap:wrap;}

    /* Aset specifics */
    .aset-table .ticket-row td{
      border-left:none !important;border-right:none !important;
    }
    .aset-table .aset-nama{font-size:13px;}
    .aset-table .tid{font-size:12px;}
    .aset-table .aset-muted{font-size:12px;}

    /* ========================================
       Settings
       ======================================== */
    .settings-grid{grid-template-columns:1fr;}
    .setting-card{flex-direction:column;align-items:flex-start;gap:10px;padding:14px;}
    .setting-card .toggle{position:absolute;right:14px;top:14px;}
    .setting-header{padding-right:50px;}

    /* === Dokumentasi === */
    .doc-card{padding:12px 14px;}
    .doc-title{font-size:13px;}
    .doc-solution{font-size:12px;padding:8px 10px;}

    /* === Akun === */
    .accounts-toolbar{flex-direction:column;align-items:stretch;}
    .acc-actions{flex-wrap:wrap;gap:6px;}
    .acc-actions .btn-ghost,.acc-actions .btn-primary{flex:1;min-width:0;text-align:center;font-size:12px;}

    /* === Modal === */
    .modal{width:94vw;padding:16px;}
    .modal h3{font-size:15px;}
    .modal-actions{flex-direction:column;}
    .modal-actions .btn-ghost,.modal-actions .btn-danger{width:100%;text-align:center;}

    /* === Month menu === */
    .month-chip{min-width:60px;padding:7px 10px;}
    .month-chip .mc-count{font-size:13px;}
    .month-chip .mc-label{font-size:10px;}

    /* === Summary panel === */
    .summary-panel{min-width:0;max-width:calc(100vw - 24px);right:-10px;}
    .sp-box{width:70px;padding:8px 6px;}
    .sp-box .sp-emoji{font-size:18px;width:36px;height:36px;}
    .sp-box .sp-count{font-size:16px;}
    .sp-box .sp-name{font-size:10px;}

    /* === Backup toast === */
    .backup-toast{left:12px;right:12px;max-width:none;bottom:12px;}
  }