:root{
    --red:#E4002B;
    --red-dark:#A5001F;
    --red-glow: rgba(228,0,43,0.35);
    --ink:#15141A;
    --paper:#FFFFFF;
    --grey:#F4F4F6;
    --line:#E7E4E8;
    --ok:#0FA968;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    background:
      linear-gradient(var(--grey) 1px, transparent 1px) 0 0/100% 28px,
      linear-gradient(90deg, var(--grey) 1px, transparent 1px) 0 0/28px 100%,
      var(--paper);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    min-height:100vh;
  }
  .mono{font-family:'JetBrains Mono',monospace;}
  .display{font-family:'Rajdhani',sans-serif; text-transform:uppercase; letter-spacing:.04em;}

  /* ---------- LOGIN ---------- */
  #loginScreen{
    min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
  }
  .login-card{
    width:100%; max-width:400px; background:var(--paper);
    border:1px solid var(--ink); position:relative;
    padding:36px 32px 28px;
  }
  .login-card::before, .login-card::after{
    content:""; position:absolute; width:16px; height:16px; border:2px solid var(--red);
  }
  .login-card::before{ top:-2px; left:-2px; border-right:none; border-bottom:none; }
  .login-card::after{ bottom:-2px; right:-2px; border-left:none; border-top:none; }
  .login-logo{ display:block; width:80px; height:80px; margin:0 auto 16px; object-fit:contain; }
  .brand{ display:flex; align-items:center; gap:10px; margin-bottom:4px; }
  .brand-dot{ width:10px; height:10px; background:var(--red); box-shadow:0 0 10px var(--red-glow); animation:pulse 1.6s infinite; }
  @keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }
  .brand h1{ font-size:26px; margin:0; font-weight:700; letter-spacing:.06em; }
  .brand-sub{ font-size:11px; color:#8a8790; letter-spacing:.18em; margin:0 0 26px; }
  .field{ margin-bottom:16px; }
  .field label{ display:block; font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:#8a8790; margin-bottom:6px; }
  .field input, .field select{
    width:100%; padding:11px 12px; border:1px solid var(--line); background:var(--grey);
    font-family:'JetBrains Mono',monospace; font-size:14px; color:var(--ink); outline:none;
  }
  .field input:focus, .field select:focus{ border-color:var(--red); background:#fff; }
  .btn{
    width:100%; padding:12px; background:var(--ink); color:#fff; border:none; cursor:pointer;
    font-family:'Rajdhani',sans-serif; font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:14px;
    transition:.15s;
  }
  .btn.red{ background:var(--red); }
  .btn.red:hover{ background:var(--red-dark); }
  .btn:hover{ background:#000; }
  .btn:disabled{ opacity:.6; cursor:not-allowed; }
  .btn.ghost{ background:transparent; color:var(--ink); border:1px solid var(--line); }
  .btn.ghost:hover{ background:var(--grey); }
  .err{ color:var(--red); font-size:12px; margin:-6px 0 14px; min-height:14px; }
  .switch-mode{ text-align:center; margin-top:18px; font-size:12px; color:#8a8790; }
  .switch-mode a{ color:var(--red); cursor:pointer; text-decoration:none; font-weight:600; }
  .login-lang{ display:flex; gap:4px; justify-content:flex-end; margin-bottom:20px; }

  /* ---------- ADMIN ---------- */
  #adminScreen{ display:none; min-height:100vh; padding:32px 20px; }
  .admin-wrap{ max-width:720px; margin:0 auto; }
  .admin-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
  .outlet-row{
    display:flex; justify-content:space-between; align-items:center;
    padding:12px 14px; border:1px solid var(--line); margin-bottom:8px; background:var(--grey);
  }
  .outlet-row .name{ font-weight:600; font-family:'JetBrains Mono',monospace; }
  .outlet-table{ width:100%; border-collapse:collapse; margin-bottom:20px; background:#fff; }
  .outlet-table thead th{
    background:var(--ink); color:#fff; text-align:left; padding:10px 14px; font-size:11px;
    text-transform:uppercase; letter-spacing:.06em; font-family:'Rajdhani',sans-serif;
  }
  .outlet-table tbody td{ padding:10px 14px; border-bottom:1px solid var(--line); font-size:13px; }
  .outlet-table tbody tr:hover{ background:var(--grey); }
  .del-btn{ background:none; border:none; color:var(--red); cursor:pointer; font-size:12px; font-weight:700; letter-spacing:.08em; }
  .add-outlet-form{ display:flex; gap:8px; margin-top:20px; }
  .add-outlet-form input{ flex:1; padding:10px; border:1px solid var(--line); font-family:'JetBrains Mono',monospace; }
  .add-outlet-form button{ padding:0 18px; }

  /* ---------- DASHBOARD ---------- */
  #dashScreen{ display:none; min-height:100vh; }
  .topbar{
    background:var(--ink); color:#fff; padding:14px 20px; display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:10px; border-bottom:3px solid var(--red);
    position:sticky; top:0; z-index:1000;
  }
  .topbar .brand2{ display:flex; align-items:center; gap:10px; }
  .topbar h2{ margin:0; font-size:18px; font-family:'Rajdhani',sans-serif; letter-spacing:.08em; }
  .badge{
    background:var(--red); font-size:11px; padding:3px 9px; letter-spacing:.08em; font-family:'JetBrains Mono',monospace;
  }
  .topbar-right{ display:flex; align-items:center; gap:8px; }
  .date-picker-wrap{
    position:relative; cursor:pointer;
    display:flex; align-items:center;
  }
  .date-display{
    font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:600;
    color:#fff; padding:7px 12px;
    background:#232229; border:1px solid #3a3940; border-radius:6px;
    letter-spacing:0.5px; white-space:nowrap;
  }
  .date-display:hover{ border-color:var(--red); }
  .date-hidden{
    position:absolute; top:0; left:0; width:100%; height:100%;
    opacity:0; cursor:pointer;
  }
  .topbar input[type=date]{
    background:#232229; color:#fff; border:1px solid #3a3940; padding:7px 10px; font-family:'JetBrains Mono',monospace; font-size:13px;
  }
  .logout-link{ color:#c9c7cd; font-size:12px; cursor:pointer; text-decoration:underline; }
  .lang-switcher{ display:flex; gap:3px; }
  .lang-btn{
    padding:4px 10px; border:none; border-radius:6px; font-size:11px; font-weight:600;
    cursor:pointer; background:transparent; color:#9a97a0; transition:all 0.2s;
    font-family:'Inter',sans-serif;
  }
  .lang-btn:hover{ background:rgba(228,0,43,0.15); color:#e0e0e0; }
  .lang-btn.active{ background:#E4002B; color:#fff; }

  .tabs{ display:flex; gap:2px; background:var(--grey); overflow-x:auto; border-bottom:1px solid var(--line); }
  .tab-btn{
    padding:12px 18px; background:transparent; border:none; cursor:pointer; white-space:nowrap;
    font-family:'Rajdhani',sans-serif; font-weight:600; letter-spacing:.08em; text-transform:uppercase; font-size:13px;
    color:#7a7780; border-bottom:3px solid transparent;
  }
  .tab-btn.active{ color:var(--ink); border-bottom-color:var(--red); background:#fff; }

  .content{ padding:22px; max-width:1400px; margin:0 auto; }
  .meta-bar{
    display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
    background:var(--grey); border:1px solid var(--line); border-left:4px solid var(--red);
    padding:14px 16px; margin-bottom:18px;
  }
  .meta-field label{ display:block; font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:#8a8790; margin-bottom:5px; }
  .meta-field input{
    width:100%; padding:8px 9px; border:1px solid var(--line); background:#fff;
    font-family:'JetBrains Mono',monospace; font-size:12.5px; color:var(--ink); outline:none;
  }
  .meta-field input:focus{ border-color:var(--red); }
  @media (max-width:900px){ .meta-bar{ grid-template-columns:repeat(2,1fr); gap:10px; padding:12px; } }
  @media (max-width:480px){ .meta-bar{ grid-template-columns:1fr; gap:8px; padding:10px 12px; } }
  .panel-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; flex-wrap:wrap; gap:10px; }
  .panel-head h3{ margin:0; font-family:'Rajdhani',sans-serif; letter-spacing:.06em; font-size:20px; }
  .save-status{ font-size:11px; color:var(--ok); font-family:'JetBrains Mono',monospace; }
  .actions{ display:flex; gap:8px; }
  .actions button{ padding:8px 14px; font-size:12px; }

  table{ width:100%; border-collapse:collapse; background:#fff; font-size:13px; }
  thead th{
    background:var(--ink); color:#fff; text-align:center; padding:9px 10px; font-size:11px;
    text-transform:uppercase; letter-spacing:.06em; font-family:'Rajdhani',sans-serif; position:sticky; top:0;
  }
  thead th.group-header{
    background:var(--red); color:#fff; font-weight:700; letter-spacing:.12em; padding:8px 12px;
    border-bottom:2px solid #fff;
  }
  thead th.group-outlet{ background:var(--red); }
  thead th.group-system{ background:var(--red-dark); }
  thead tr.group-row th{ border-bottom:1px solid rgba(255,255,255,0.3); }
  thead tr.sub-row th.col-outlet{ background:rgba(228,0,43,0.08); color:var(--ink); font-weight:600; border-top:none; }
  thead tr.sub-row th.col-system{ background:rgba(165,0,31,0.06); color:var(--ink); font-weight:600; border-top:none; }
  thead tr.sub-row th:first-child{ border-left:2px solid var(--red); }
  tbody td{ padding:6px 8px; border-bottom:1px solid var(--line); vertical-align:middle; }
  tbody tr:hover{ background:#fffafb; }
  .item-name{ font-weight:600; font-size:12.5px; }
  .spec{ font-size:11px; color:#9a97a0; }
  td input{
    width:100%; padding:6px 7px; border:1px solid var(--line); font-family:'JetBrains Mono',monospace; font-size:12.5px;
    background:var(--grey);
  }
  td input:focus{ outline:none; border-color:var(--red); background:#fff; }
  td.readonly{ font-family:'JetBrains Mono',monospace; font-weight:700; text-align:center; background:rgba(244,244,246,0.5); }
  .varian-neg{ color:var(--red); }
  .varian-pos{ color:var(--ok); }
  .table-scroll{ overflow-x:auto; border:1px solid var(--line); }
  .section-title{
    background:var(--red); color:#fff; font-family:'Rajdhani',sans-serif; font-weight:700;
    letter-spacing:.1em; padding:8px 12px; font-size:13px; text-transform:uppercase; margin:22px 0 0;
  }
  .log-row-del{ background:none; border:none; color:var(--red); cursor:pointer; font-size:16px; }
  .add-row-btn{ margin-top:10px; }
  footer.hint{ text-align:center; font-size:11px; color:#aeacb2; padding:24px 0 10px; font-family:'JetBrains Mono',monospace; }

  @media (max-width:640px){
    .content{ padding:10px; }
    .topbar h2{ font-size:14px; }
    .meta-bar{ margin-bottom:12px; }
    .section-title{ font-size:12px; padding:6px 10px; }
    .inv-section-table{ font-size:11px; }
    .inv-section-table thead th{ font-size:9px; padding:5px 4px; }
    .inv-section-table tbody td{ padding:4px 3px; }
    .inv-section-table td input{ padding:4px 3px; font-size:11px; }
    .inv-section-table td .item-name{ font-size:11px; }
    .inv-section-table td .spec{ font-size:9px; }
  }

  /* ============= SECTION BLOCKS (single page layout) ============= */
  .section-block{ margin-bottom:4px; }
  .section-title{
    background:var(--red); color:#fff; font-family:'Rajdhani',sans-serif; font-weight:700;
    letter-spacing:.1em; padding:8px 12px; font-size:13px; text-transform:uppercase;
    margin:0; position:sticky; top:52px; z-index:10;
  }
  .inv-section-table{ width:100%; border-collapse:collapse; background:#fff; font-size:12px; margin-bottom:2px; }
  .inv-section-table thead th{
    background:var(--ink); color:#fff; text-align:center; padding:7px 8px; font-size:10px;
    text-transform:uppercase; letter-spacing:.05em; font-family:'Rajdhani',sans-serif;
  }
  .inv-section-table thead th.group-header{
    background:var(--red); color:#fff; font-weight:700; letter-spacing:.1em; padding:6px 10px;
    border-bottom:1px solid rgba(255,255,255,0.3);
  }
  .inv-section-table thead th.group-outlet{ background:var(--red); }
  .inv-section-table thead th.group-system{ background:var(--red-dark); }
  .inv-section-table thead tr.sub-row th.col-outlet{ background:rgba(228,0,43,0.08); color:var(--ink); font-weight:600; }
  .inv-section-table thead tr.sub-row th.col-system{ background:rgba(165,0,31,0.06); color:var(--ink); font-weight:600; }
  .inv-section-table tbody td{ padding:5px 6px; border-bottom:1px solid var(--line); vertical-align:middle; }
  .inv-section-table tbody tr:hover{ background:#fffafb; }
  .inv-section-table td input{
    width:100%; padding:5px 6px; border:1px solid var(--line); font-family:'JetBrains Mono',monospace; font-size:12px;
    background:var(--grey);
  }
  .inv-section-table td input:focus{ outline:none; border-color:var(--red); background:#fff; }
  .inv-section-table td.readonly{ font-family:'JetBrains Mono',monospace; font-weight:700; text-align:center; background:rgba(244,244,246,0.5); }
  .inv-section-table td .item-name{ font-weight:600; font-size:12px; }
  .inv-section-table td .spec{ font-size:10px; color:#9a97a0; }

  /* ============= PRINT / PDF (A4) ============= */
  @media print {
    @page {
      size: A4 portrait;
      margin: 12mm 10mm 12mm 10mm;
    }
    body {
      background: #fff !important;
      font-size: 10px !important;
      -webkit-print-color-adjust: exact !important;
      print-color-adjust: exact !important;
      color-adjust: exact !important;
    }
    body > * { display: none !important; }
    #dashScreen,
    #dashScreen > * { display: block !important; }
    #allSections, #allSections > * { display: block !important; }

    .topbar { display: none !important; }
    .tabs { display: none !important; }
    .meta-bar { display: none !important; }
    .panel-head { display: none !important; }
    .add-row-btn { display: none !important; }
    .content { padding: 0 !important; max-width: none !important; }
    .section-title {
      position: static !important;
      background: var(--red) !important;
      color: #fff !important;
      padding: 6px 10px !important;
      font-size: 11px !important;
      margin-top: 10px !important;
      page-break-after: avoid;
    }
    .section-block { page-break-inside: avoid; margin-bottom: 8px !important; }
    .table-scroll { overflow: visible !important; border: none !important; }

    .inv-section-table { width: 100% !important; font-size: 9px !important; margin-bottom: 4px !important; }
    .inv-section-table thead th {
      background: var(--ink) !important;
      color: #fff !important;
      padding: 4px 5px !important;
      font-size: 8px !important;
      -webkit-print-color-adjust: exact !important;
      print-color-adjust: exact !important;
    }
    .inv-section-table thead th.group-header {
      background: var(--red) !important;
      -webkit-print-color-adjust: exact !important;
      print-color-adjust: exact !important;
    }
    .inv-section-table thead th.group-outlet { background: var(--red) !important; }
    .inv-section-table thead th.group-system { background: var(--red-dark) !important; }
    .inv-section-table thead tr.sub-row th.col-outlet { background: rgba(228,0,43,0.08) !important; }
    .inv-section-table thead tr.sub-row th.col-system { background: rgba(165,0,31,0.06) !important; }
    .inv-section-table tbody td {
      padding: 3px 4px !important;
      font-size: 8px !important;
      border-bottom: 0.5px solid #ddd !important;
    }
    .inv-section-table tbody td input {
      border: none !important;
      background: transparent !important;
      padding: 1px !important;
      font-size: 8px !important;
      color: #000 !important;
    }
    .inv-section-table td.readonly { background: transparent !important; font-size: 8px !important; }
    .inv-section-table td .item-name { font-size: 8px !important; }
    .inv-section-table td .spec { font-size: 7px !important; }
    .varian-neg { color: var(--red) !important; }
    .varian-pos { color: var(--ok) !important; }

    .save-status { display: none !important; }
    footer.hint { display: none !important; }

    /* Print header */
    body::before {
      content: "AI-CHA INVENTORY — " attr(data-outlet) " — " attr(data-date);
      display: block !important;
      font-family: 'Rajdhani', sans-serif;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-align: center;
      padding: 8px 0;
      border-bottom: 2px solid var(--red);
      margin-bottom: 8px;
    }
  }