@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/ibm-plex-sans-vietnamese-400-normal.woff2) format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/ibm-plex-sans-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/fonts/ibm-plex-sans-vietnamese-500-normal.woff2) format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/fonts/ibm-plex-sans-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/fonts/ibm-plex-sans-vietnamese-600-normal.woff2) format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/fonts/ibm-plex-sans-latin-ext-600-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/ibm-plex-sans-vietnamese-700-normal.woff2) format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/ibm-plex-sans-latin-ext-700-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/ibm-plex-sans-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/ibm-plex-mono-vietnamese-400-normal.woff2) format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/ibm-plex-mono-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/fonts/ibm-plex-mono-vietnamese-500-normal.woff2) format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/fonts/ibm-plex-mono-vietnamese-600-normal.woff2) format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/fonts/ibm-plex-mono-latin-ext-600-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/fonts/ibm-plex-mono-latin-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/fraunces-vietnamese-wght-normal.woff2) format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/fraunces-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/fraunces-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

  :root{
    --paper:#FAF7F0; --paper-2:#F1EAD9; --card:#FFFFFF; --line:#E1D7C1;
    --ink:#241F17; --ink-dim:#6B6152; --navy:#1F2A44; --navy-2:#2C3A5C;
    --gold:#B8862E; --gold-ink:#7A5A1E;
    --good-bg:#E7F1E8; --good-ink:#2F6F4E;
    --warn-bg:#FBEEDD; --warn-ink:#A6631B;
    --bad-bg:#FBE7E3; --bad-ink:#A83B32;
    --mute-bg:#F1EDE3; --mute-ink:#8A806D;
    --shadow: 0 1px 2px rgba(36,31,23,.06), 0 4px 14px rgba(36,31,23,.05);
    --radius: 10px;
    --rail:#1F2A44; --rail-2:#2C3A5C; --rail-ink:#F3EFE4;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --paper:#14161C; --paper-2:#1B1E27; --card:#1E212B; --line:#333747;
      --ink:#ECE7DA; --ink-dim:#A8A190; --navy:#AEB9D6; --navy-2:#8D9BC4;
      --gold:#D6A94E; --gold-ink:#E9C374;
      --good-bg:#17301F; --good-ink:#6FBE8B;
      --warn-bg:#3A2A14; --warn-ink:#E0A45C;
      --bad-bg:#3A1A16; --bad-ink:#F0897A;
      --mute-bg:#232631; --mute-ink:#8D8776;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    }
  }
  :root[data-theme="dark"]{
    --paper:#14161C; --paper-2:#1B1E27; --card:#1E212B; --line:#333747;
    --ink:#ECE7DA; --ink-dim:#A8A190; --navy:#AEB9D6; --navy-2:#8D9BC4;
    --gold:#D6A94E; --gold-ink:#E9C374;
    --good-bg:#17301F; --good-ink:#6FBE8B;
    --warn-bg:#3A2A14; --warn-ink:#E0A45C;
    --bad-bg:#3A1A16; --bad-ink:#F0897A;
    --mute-bg:#232631; --mute-ink:#8D8776;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }

  *{box-sizing:border-box;}
  body{
    background:var(--paper); color:var(--ink);
    font-family:"IBM Plex Sans", system-ui, sans-serif;
    font-size:14px; line-height:1.5;
  }
  h1,h2,h3,.display{ font-family:"Fraunces", Georgia, serif; text-wrap:balance; }
  .mono, .num, td.num, input.num{ font-family:"IBM Plex Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
  a{color:inherit;}

  #shell{ display:flex; min-height:100vh; }

  /* ---------- Sidebar ---------- */
  #sidebar{
    width:230px; flex:none; background:var(--rail); color:var(--rail-ink);
    display:flex; flex-direction:column; padding:18px 12px; gap:2px;
    position:sticky; top:0; height:100vh; overflow-y:auto;
  }
  #brand{ padding:2px 8px 16px; }
  #brand .name{ font-family:"Fraunces",serif; font-weight:600; font-size:18px; letter-spacing:.2px; color:#fff; }
  #brand .tag{ font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:#C9BFA5; margin-top:2px; }
  nav.tabs button{
    all:unset; cursor:pointer; display:flex; align-items:center; gap:9px;
    padding:8px 9px; border-radius:8px; font-size:12.8px; color:#D9D3C3; line-height:1.25;
  }
  nav.tabs button:hover{ background:rgba(255,255,255,.06); }
  nav.tabs button.active{ background:rgba(255,255,255,.12); color:#fff; font-weight:600; }
  nav.tabs .ico{ width:15px; text-align:center; opacity:.85; font-size:12px; flex:none; }
  #sidebar .operator{ padding:10px 8px 4px; }
  #sidebar .operator label{ font-size:10px; color:#B9B2A0; text-transform:uppercase; letter-spacing:.06em; }
  #sidebar .operator input{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); color:#fff; font-size:12px; margin-top:4px; }
  #sidebar .foot{ margin-top:auto; font-size:10.5px; color:#96907F; padding:8px; }

  /* ---------- Main ---------- */
  #main{ flex:1; min-width:0; padding:28px 34px 60px; max-width:1900px; }
  header.pagehead{ margin-bottom:22px; }
  header.pagehead h1{ font-size:25px; font-weight:600; margin:0 0 4px; }
  header.pagehead p{ margin:0; color:var(--ink-dim); font-size:13.5px; max-width:70ch; }

  .stat-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:18px 0 26px; }
  .stat{
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    padding:13px 15px; box-shadow:var(--shadow);
  }
  .stat .label{ font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-dim); margin-bottom:6px; }
  .stat .value{ font-family:"IBM Plex Mono"; font-size:20px; font-weight:600; font-variant-numeric:tabular-nums; }
  .stat.crit .value{ color:var(--bad-ink); }
  .stat.warn .value{ color:var(--warn-ink); }
  .stat.good .value{ color:var(--good-ink); }

  .panel{
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:var(--shadow); margin-bottom:20px; overflow:hidden;
  }
  .panel > .panel-head{
    padding:13px 16px; border-bottom:1px solid var(--line);
    display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  }
  .panel > .panel-head h2{ font-size:15.5px; margin:0; font-weight:600; }
  .panel-body{ padding:14px 16px; }

  table{ width:100%; border-collapse:collapse; font-size:12.8px; table-layout:auto; }
  th{ text-align:left; font-size:10.3px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-dim); padding:8px 7px; border-bottom:1px solid var(--line); white-space:normal; line-height:1.3; }
  td{ padding:8px 7px; border-bottom:1px solid var(--line); vertical-align:top; }
  tr:last-child td{ border-bottom:none; }
  /* Cuộn trong khung bảng (không cuộn cả trang) và GIỮ CỐ ĐỊNH dòng tiêu đề (thead) khi kéo xem các hàng chi tiết bên dưới. */
  .twrap{ overflow-x:auto; overflow-y:auto; max-height:72vh; }
  thead th{ position:sticky; top:0; z-index:2; background:var(--card); box-shadow:0 1px 0 var(--line); }
  tr.clickable{ cursor:pointer; }
  tr.clickable:hover{ background:var(--paper-2); }
  tfoot td{ font-weight:600; background:var(--paper-2); }
  tfoot{ position:sticky; bottom:0; z-index:2; }

  .chip{ display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:99px; font-size:11.5px; font-weight:600; white-space:nowrap; }
  .chip.good{ background:var(--good-bg); color:var(--good-ink); }
  .chip.warn{ background:var(--warn-bg); color:var(--warn-ink); }
  .chip.bad{ background:var(--bad-bg); color:var(--bad-ink); }
  .chip.mute{ background:var(--mute-bg); color:var(--mute-ink); }

  .alertline{ display:flex; align-items:flex-start; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); }
  .alertline:last-child{ border-bottom:none; }
  .alertline .dot{ width:8px; height:8px; border-radius:50%; margin-top:5px; flex:none; }
  .alertline .dot.bad{ background:var(--bad-ink); }
  .alertline .dot.warn{ background:var(--warn-ink); }
  .alertline .t{ font-weight:600; font-size:13px; }
  .alertline .s{ color:var(--ink-dim); font-size:12.5px; margin-top:1px; }
  .empty{ color:var(--ink-dim); font-size:13px; padding:6px 2px; }

  button.btn{
    all:unset; cursor:pointer; font-family:inherit; font-size:12.5px; font-weight:600;
    padding:7px 13px; border-radius:7px; border:1px solid var(--line); background:var(--paper-2); color:var(--ink);
  }
  button.btn:hover{ background:var(--line); }
  button.btn.primary{ background:var(--rail); color:#fff; border-color:var(--rail); }
  button.btn.primary:hover{ background:var(--rail-2); }
  button.btn.gold{ background:var(--gold); color:#28210D; border-color:var(--gold); }
  button.btn.danger{ color:var(--bad-ink); }
  button.btn.small{ padding:4px 9px; font-size:11.5px; }
  button.btn[disabled]{ opacity:.5; cursor:default; }

  input, select, textarea{
    font-family:inherit; font-size:13px; color:var(--ink); background:var(--card);
    border:1px solid var(--line); border-radius:6px; padding:6px 8px; width:100%;
  }
  textarea{ font-family:"IBM Plex Mono", monospace; font-size:12px; min-height:150px; resize:vertical; }
  label.field{ display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--ink-dim); }
  label.field input, label.field select{ color:var(--ink); }
  .grid2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; }

  .detail{ background:var(--paper-2); border-top:1px solid var(--line); padding:16px; }
  .detail h3{ font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-dim); margin:14px 0 8px; font-family:"IBM Plex Sans"; font-weight:700; }
  .detail h3:first-child{ margin-top:0; }
  .item-row{ display:grid; gap:6px; align-items:end; margin-bottom:6px; grid-template-columns: 1.1fr 1.3fr .5fr .45fr .8fr .7fr .95fr 1.05fr 1.5fr auto; }
  .item-row select{ font-size:12px; padding:6px 4px; }
  @media (max-width:1000px){ .item-row{ grid-template-columns:1fr 1fr; } }
  .rowdel{ color:var(--bad-ink); font-size:16px; line-height:1; padding:6px; cursor:pointer; }

  /* Card-row: dùng cho Payment / Đổi-trả / Tồn kho — nhiều field, hiển thị dạng thẻ có nhãn */
  .cardrow{ display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end; padding:10px 10px 8px; border:1px solid var(--line); border-radius:8px; margin-bottom:8px; background:var(--paper-2); }
  .cardrow label{ display:flex; flex-direction:column; gap:3px; font-size:10.3px; color:var(--ink-dim); flex:1 1 108px; min-width:96px; }
  .cardrow label input, .cardrow label select{ font-size:12.5px; padding:5px 7px; }
  .cardrow .cardrow-del{ color:var(--bad-ink); font-size:16px; line-height:1; padding:6px; cursor:pointer; align-self:center; }
  .cardrow .cardrow-chip{ align-self:center; }

  .toast{
    position:fixed; bottom:18px; right:18px; background:var(--rail); color:#fff;
    padding:9px 16px; border-radius:8px; font-size:12.5px; box-shadow:var(--shadow);
    opacity:0; transform:translateY(6px); transition:opacity .2s, transform .2s; pointer-events:none; z-index:50;
  }
  .toast.show{ opacity:1; transform:translateY(0); }

  @media (max-width: 760px){
    #shell{ flex-direction:column; }
    #sidebar{ width:100%; height:auto; position:relative; flex-direction:row; overflow-x:auto; padding:12px; }
    #brand{ display:none; }
    nav.tabs{ display:flex; gap:6px; }
    #sidebar .operator, #sidebar .foot{ display:none; }
    #main{ padding:18px 16px 40px; }
    .item-row{ grid-template-columns:1fr 1fr; }
  }