:root{
  --navy:#0b2239;--blue:#2d6cdf;--cyan:#14a6c7;--green:#1ca55b;--red:#d92d20;--amber:#f59e0b;
  --bg:#f5f7fb;--card:#fff;--line:#dfe5ee;--text:#1b2735;--muted:#6b7788;
}
*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}
a{color:inherit;text-decoration:none}

.app{display:grid;grid-template-columns:250px 1fr;min-height:100vh;transition:grid-template-columns .25s cubic-bezier(.4,0,.2,1)}
.sidebar{background:var(--navy);color:#fff;padding:20px 14px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;overflow:hidden;transition:width .25s cubic-bezier(.4,0,.2,1),padding .25s ease;z-index:30}
.brand{font-size:20px;font-weight:800;letter-spacing:.4px;white-space:nowrap;overflow:hidden;transition:opacity .2s ease}
.brand small{display:block;font-size:10px;font-weight:600;color:#9fb4c9;margin-top:2px}
.nav{display:flex;flex-direction:column;gap:4px;flex:1;overflow-y:auto;overflow-x:hidden;padding-right:4px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}
.nav::-webkit-scrollbar{width:5px}
.nav::-webkit-scrollbar-track{background:transparent}
.nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:999px}
.nav::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.35)}
.nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:9px;color:#cbd7e5;font-size:14px;font-weight:500;white-space:nowrap;transition:background .15s ease,color .15s ease}
.nav a:hover,.nav a.active{background:rgba(255,255,255,.1);color:#fff}
.nav a .nav-icon{flex-shrink:0;opacity:.85;transition:opacity .15s ease}
.nav a:hover .nav-icon,.nav a.active .nav-icon{opacity:1}
.nav a .nav-text{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav .section{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#7892aa;margin:16px 10px 4px;white-space:nowrap}
.sidebar-bottom{margin-top:auto;padding-top:14px;border-top:1px solid rgba(255,255,255,.1);flex-shrink:0}
.sidebar-bottom .btn{gap:10px}
.main{min-width:0}
.topbar{height:68px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:5}
.topbar .who{font-size:13px;color:var(--muted)}
.topbar strong{display:block;color:var(--text)}
.content{padding:28px;width:100%}
.page-title{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px}
.page-title h1{margin:0;font-size:28px}
.page-title p{margin:5px 0 0;color:var(--muted)}
.grid{display:grid;gap:16px}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.stat,.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:0 2px 8px rgba(11,34,57,.03)}
.stat .label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.stat .value{font-size:28px;font-weight:800;margin-top:8px}
.card h2,.card h3{margin-top:0}
.card h2{font-size:18px}
.card h3{font-size:15px}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px;background:#fff}
table{width:100%;border-collapse:collapse;font-size:13px}
th{background:#eef3f8;color:#3e4b5b;text-align:left;font-weight:700;padding:11px 12px;white-space:nowrap}
td{padding:12px;border-top:1px solid var(--line);vertical-align:top}
.muted{color:var(--muted)}
.small{font-size:12px}
.badge{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:700;background:#eaf0f7;color:#42556a}
.badge.green{background:#e7f7ee;color:#147a42}
.badge.red{background:#fdecec;color:#a61b1b}
.badge.amber{background:#fff4d9;color:#9a6700}
.badge.blue{background:#e9f0ff;color:#2459b5}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:9px;padding:10px 14px;font-weight:700;font-size:13px;cursor:pointer;background:#e8edf3;color:#263548}
.btn.primary{background:var(--blue);color:#fff}
.btn.success{background:var(--green);color:#fff}
.btn.danger{background:var(--red);color:#fff}
.btn.warning{background:var(--amber);color:#fff}
.btn.ghost{background:#fff;border:1px solid var(--line)}
.btn.sm{padding:7px 10px;font-size:12px}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.field{display:grid;gap:6px}
.field.full{grid-column:1/-1}
.field label{font-size:12px;font-weight:700;color:#445366}
.field input,.field select,.field textarea{width:100%;border:1px solid #cfd7e3;border-radius:9px;padding:10px 11px;background:#fff;color:#1c2938;font:inherit}
.field textarea{min-height:90px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid #d8e6ff;border-color:#7da6ef}
.help{font-size:11px;color:var(--muted)}
.alert{padding:12px 14px;border-radius:10px;margin-bottom:16px;font-size:13px;border:1px solid}
.alert.success{background:#eaf8f0;border-color:#bee8ce;color:#176b3d}
.alert.error{background:#fff0f0;border-color:#f5c0c0;color:#a52222}
.code-box{background:#0c2034;color:#fff;border-radius:12px;padding:18px;text-align:center}
.code-box .code{font-size:34px;letter-spacing:.16em;font-weight:800}
.code-box .trade{font-size:12px;color:#9eb3c7;margin-top:7px}
.kv{display:grid;grid-template-columns:160px 1fr;gap:9px 14px;font-size:13px}
.kv dt{color:var(--muted)}
.kv dd{margin:0;font-weight:600}
.divider{height:1px;background:var(--line);margin:18px 0}
.timeline{display:grid;gap:10px}
.timeline-item{display:grid;grid-template-columns:12px 1fr;gap:10px;align-items:start}
.dot{width:10px;height:10px;border-radius:50%;background:#cad5e2;margin-top:5px}
.dot.on{background:var(--blue)}
.price{font-size:26px;font-weight:800}
.photos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.photo{background:#eef2f6;border-radius:10px;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden}
.photo img{width:100%;height:100%;object-fit:cover}
.split{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);gap:18px}
.login-page{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#0b2239,#173d66)}
.login-card{width:min(440px,calc(100vw - 32px));background:#fff;border-radius:18px;padding:28px;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.login-card h1{margin:0 0 6px}
.login-card p{color:var(--muted);margin-top:0}
.right{text-align:right}.mb-0{margin-bottom:0}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.stack{display:grid;gap:14px}.nowrap{white-space:nowrap}

.nav-count{float:right;display:inline-flex;min-width:20px;height:20px;padding:0 6px;align-items:center;justify-content:center;border-radius:999px;background:#fff;color:#0b2239;font-size:10px;font-weight:800}.full-width{width:100%}.narrow-card{max-width:680px}.alert.warning{background:#fff8e6;border-color:#f1d492;color:#7a5400}.receipt-shell{max-width:780px;margin:48px auto;padding:0 18px}.public-receipt{background:#f5f7fb}.qr-wrap{display:grid;place-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px}.qr-wrap img{width:min(280px,100%);height:auto}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}.danger-zone{border-color:#f4b4b4}.source-config{white-space:pre-wrap;word-break:break-word;font-size:11px;background:#f7f9fc;border:1px solid var(--line);border-radius:8px;padding:8px}.print-only{display:none}@media print{.sidebar,.topbar,.btn,.no-print{display:none!important}.app{display:block}.content{padding:0}.print-only{display:block}.card{box-shadow:none;border-color:#bbb}}
.unit-code{font-size:22px!important;letter-spacing:.04em!important}
.compact-value{font-size:18px!important}.small-input{max-width:150px}.reason-input{max-width:260px}
.max-w-820{max-width:820px}.value-20{font-size:20px!important}.value-22{font-size:22px!important}.mb-16{margin-bottom:16px}.align-end{align-self:end}

/* dashboard + responsive shell */
.sidebar-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:18px;flex-shrink:0}
.sidebar-close,.menu-toggle,.sidebar-overlay{display:none}
.sidebar-collapse-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:0;background:rgba(255,255,255,.08);color:#9fb4c9;border-radius:8px;cursor:pointer;transition:background .15s ease,color .15s ease,transform .25s ease;flex-shrink:0}
.sidebar-collapse-btn:hover{background:rgba(255,255,255,.18);color:#fff}
.sidebar-collapse-toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--line);background:#fff;color:var(--text);border-radius:9px;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease}
.sidebar-collapse-toggle:hover{background:#f5f7fb;border-color:#cbd5e1}

.topbar-left{display:flex;align-items:center;gap:12px}
.eyebrow{display:block;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#6f8094;margin-bottom:6px}
.dashboard-title{align-items:center}
.period-switch{display:inline-flex;align-items:center;background:#eaf0f6;border:1px solid var(--line);border-radius:10px;padding:3px}
.period-link{padding:7px 10px;border-radius:7px;font-size:12px;font-weight:700;color:#617083}
.period-link.active{background:#fff;color:var(--navy);box-shadow:0 1px 4px rgba(11,34,57,.08)}
.dashboard-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.kpi-card{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 18px 17px;box-shadow:0 3px 12px rgba(11,34,57,.04)}
.kpi-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:#8ba0b7}
.kpi-card.accent-blue:before{background:var(--blue)}
.kpi-card.accent-cyan:before{background:var(--cyan)}
.kpi-card.accent-amber:before{background:var(--amber)}
.kpi-card.accent-green:before{background:var(--green)}
.kpi-label{font-size:12px;color:var(--muted);font-weight:700}
.kpi-value{font-size:34px;font-weight:850;letter-spacing:-.02em;margin:6px 0 3px}
.kpi-note{font-size:11px;color:#8a97a7}
.panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}
.panel-heading h2{margin:0}
.metric-panel{min-height:164px}
.money-value,.summary-money{font-size:28px;font-weight:850;letter-spacing:-.025em;margin:8px 0 18px}
.summary-money{font-size:32px;margin-bottom:3px}
.metric-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:10px;margin-top:10px;border-top:1px solid #edf1f5;font-size:12px}
.metric-row strong{font-size:13px}
.text-link{font-size:12px;color:var(--blue);font-weight:750;white-space:nowrap}
.text-link:hover{text-decoration:underline}
.dashboard-split{grid-template-columns:minmax(0,1.5fr) minmax(300px,.5fr)}
.table-clean{border:0;border-radius:0}
.table-clean th:first-child,.table-clean td:first-child{padding-left:0}
.table-clean th:last-child,.table-clean td:last-child{padding-right:0}
.alert-list{display:grid}
.alert-item{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 0;border-top:1px solid #edf1f5}
.alert-item:first-child{border-top:0;padding-top:2px}
.alert-item span{display:grid;gap:3px}
.alert-item small{color:var(--muted)}
.alert-number{min-width:32px;text-align:center;font-size:18px}
.danger-text{color:var(--red)}
.pipeline-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pipeline-item{background:#f7f9fc;border:1px solid #e5ebf2;border-radius:11px;padding:13px}
.pipeline-item span{display:block;font-size:11px;color:var(--muted);min-height:30px}
.pipeline-item strong{display:block;font-size:24px;margin-top:5px}
.ranking-list{display:grid}
.ranking-item{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px 0;border-top:1px solid #edf1f5}
.ranking-item:first-child{border-top:0;padding-top:1px}
.rank{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:#eef3f8;color:#506176;font-size:11px;font-weight:800}
.ranking-name{display:grid;gap:2px;min-width:0}
.ranking-name small{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ranking-value{font-size:12px;white-space:nowrap}
.empty-state{display:grid;gap:4px;text-align:center;padding:24px 12px;color:#657488}
.empty-state strong{color:#405064}
.task-list{display:grid}
.task-item{display:grid;grid-template-columns:minmax(0,1fr) minmax(190px,.7fr) auto;align-items:center;gap:14px;padding:13px 2px;border-top:1px solid #edf1f5}
.task-item:first-child{border-top:0}
.task-item:hover{background:#f8fafc}
.task-main,.task-action{display:grid;gap:3px;min-width:0}
.task-main small,.task-action small{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.task-action strong{font-size:12px}
.menu-toggle{border:1px solid var(--line);background:#fff;border-radius:9px;width:38px;height:38px;font-size:18px;cursor:pointer}
.sidebar-close{border:0;background:transparent;color:#fff;font-size:25px;line-height:1;cursor:pointer}

/* Desktop Collapse Mode */
@media (min-width: 1001px) {
  .app.sidebar-collapsed {
    grid-template-columns: 72px 1fr;
  }
  .app.sidebar-collapsed .sidebar {
    padding: 20px 10px;
  }
  .app.sidebar-collapsed .brand {
    display: none;
  }
  .app.sidebar-collapsed .sidebar-head {
    justify-content: center;
    margin-bottom: 16px;
  }
  .app.sidebar-collapsed .sidebar-collapse-btn {
    transform: rotate(180deg);
  }
  .app.sidebar-collapsed .sidebar-collapse-toggle {
    color: var(--blue);
    background: #e9f0ff;
    border-color: #b8d0fb;
  }
  .app.sidebar-collapsed .nav .section {
    font-size: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
    margin: 10px 4px;
    padding: 0;
  }
  .app.sidebar-collapsed .nav a {
    justify-content: center;
    padding: 11px 0;
    gap: 0;
    position: relative;
  }
  .app.sidebar-collapsed .nav a .nav-text {
    display: none;
  }
  .app.sidebar-collapsed .nav a .nav-count {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 9px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    float: none;
  }
  .app.sidebar-collapsed .sidebar-bottom .logout-text {
    display: none;
  }
  .app.sidebar-collapsed .sidebar-bottom .btn {
    padding: 10px 0;
    justify-content: center;
  }

  /* Preload anti-flicker */
  html.sidebar-collapsed-preload .app {
    grid-template-columns: 72px 1fr !important;
  }
  html.sidebar-collapsed-preload .brand,
  html.sidebar-collapsed-preload .nav-text,
  html.sidebar-collapsed-preload .logout-text {
    display: none !important;
  }
  html.sidebar-collapsed-preload .sidebar-collapse-btn {
    transform: rotate(180deg) !important;
  }
}

@media(max-width:1100px){.dashboard-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-split{grid-template-columns:1fr}.task-item{grid-template-columns:minmax(0,1fr) auto}.task-action{grid-column:1/-1;grid-row:2}}

/* Mobile Drawer & Mobile Responsive Rules */
@media (max-width: 1000px) {
  .app {
    display: block;
  }
  .sidebar-collapse-btn, .sidebar-collapse-toggle {
    display: none !important;
  }
  .sidebar {
    position: fixed;
    z-index: 40;
    left: 0;
    top: 0;
    bottom: 0;
    width: min(310px, 86vw);
    height: 100vh;
    transform: translateX(-104%);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 12px 0 40px rgba(0, 0, 0, 0.25);
    padding: 20px 16px;
  }
  .sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .sidebar-close, .menu-toggle {
    display: inline-grid;
    place-items: center;
  }
  .sidebar-close {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    font-size: 22px;
  }
  .sidebar-overlay {
    display: block;
    position: fixed;
    inset: 0;
    border: 0;
    background: rgba(5, 18, 31, 0.55);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    z-index: 35;
    transition: opacity 0.25s ease;
  }
  .app.sidebar-open .sidebar {
    transform: translateX(0);
  }
  .app.sidebar-open .sidebar-overlay {
    opacity: 1;
    pointer-events: auto;
  }
  .topbar {
    height: 64px;
    padding: 0 16px;
  }
  .content {
    padding: 20px 16px;
  }
}

@media (max-width: 768px) {
  /* Prevent iOS input auto-zoom on focus */
  .field input, .field select, .field textarea {
    font-size: 16px;
  }
  .grid.cols-2, .grid.cols-3, .grid.cols-4, .form-grid, .split, .dashboard-split {
    grid-template-columns: 1fr;
  }
  .page-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }
  .page-title h1 {
    font-size: 24px;
  }
  .page-title .actions {
    width: 100%;
  }
  .page-title .actions .btn {
    flex: 1;
    justify-content: center;
  }
  .table-wrap {
    margin: 0 -4px;
    border-radius: 10px;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 480px) {
  .topbar {
    padding: 0 12px;
  }
  .topbar .who {
    display: none;
  }
  .topbar-left small.muted {
    display: none;
  }
  .topbar-left strong {
    font-size: 15px;
  }
  .content {
    padding: 14px 12px;
  }
  .card, .stat, .kpi-card {
    padding: 14px;
    border-radius: 12px;
  }
  .kpi-value {
    font-size: 28px;
  }
  .money-value, .summary-money {
    font-size: 24px;
  }
  .pipeline-grid {
    grid-template-columns: 1fr;
  }
  .photos {
    grid-template-columns: 1fr;
  }
}

/* rc6 filters + security forms */
.checkbox-line{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600}.checkbox-line input{width:auto!important}.filter-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;align-items:end}.filter-actions{display:flex;gap:8px;align-items:flex-end}.mb-16{margin-bottom:16px}@media(max-width:1200px){.filter-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:650px){.filter-grid{grid-template-columns:1fr}.filter-actions{align-items:stretch}.filter-actions .btn{flex:1}}