/* Product-mock layer: the HTML-drawn Kite admin (.adm), its phone strip (.strip) and the sheet's admin depict the
   product, so inside those frames they follow the product's Glass sky look (docs/design/DESIGN.md §1-§5; values copied
   from packages/ui/src/tokens.css). The page itself stays Warm & human / Nunito Sans (§11). Be Vietnam Pro is
   self-hosted (400/600/700, CSP stays self-only) and used only inside these frames. Loaded after chat-demo.css.
   Frame geometry (bezel, size, scroll boxes) is untouched: only what is drawn inside changes. */
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-display:swap;font-weight:400;src:url('./fonts/be-vietnam-pro-latin-400.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:'Be Vietnam Pro';font-style:normal;font-display:swap;font-weight:600;src:url('./fonts/be-vietnam-pro-latin-600.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:'Be Vietnam Pro';font-style:normal;font-display:swap;font-weight:700;src:url('./fonts/be-vietnam-pro-latin-700.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:'Be Vietnam Pro';font-style:normal;font-display:swap;font-weight:400;src:url('./fonts/be-vietnam-pro-latin-ext-400.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:'Be Vietnam Pro';font-style:normal;font-display:swap;font-weight:600;src:url('./fonts/be-vietnam-pro-latin-ext-600.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:'Be Vietnam Pro';font-style:normal;font-display:swap;font-weight:700;src:url('./fonts/be-vietnam-pro-latin-ext-700.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:'Be Vietnam Pro';font-style:normal;font-display:swap;font-weight:400;src:url('./fonts/be-vietnam-pro-vietnamese-400.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:'Be Vietnam Pro';font-style:normal;font-display:swap;font-weight:600;src:url('./fonts/be-vietnam-pro-vietnamese-600.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:'Be Vietnam Pro';font-style:normal;font-display:swap;font-weight:700;src:url('./fonts/be-vietnam-pro-vietnamese-700.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}

.adm,.strip{
  color-scheme:light;
  --k-font:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  --k-canvas:#F3F7FD;--k-surface:#FFFFFF;--k-zebra:#F8FAFE;--k-head:#F6F9FD;--k-hover:#F1F6FE;--k-select:#EAF2FF;--k-raised:#FFFFFF;
  --k-ink:#13213A;--k-ink-2:#3A4862;--k-muted:#5E6B85;--k-line:#E9EEF6;--k-line-2:#D9E2EF;
  --k-cobalt:#1D6CF2;--k-on-cobalt:#FFFFFF;--k-focus:#1D6CF2;--k-primary-soft:#EAF2FF;--k-primary-ink:#1449A8;
  --k-wing:#F5A524;--k-amber-soft:#FFF4DC;--k-paid-dot:#12B76A;
  --k-wait-bg:#FFF4DC;--k-wait:#7A4B00;--k-under-bg:#FFF4DC;--k-under:#7A4B00;--k-over-bg:#EAF2FF;--k-over:#1449A8;
  --k-refund-bg:#F1F4F9;--k-refund:#3A4862;--k-ok-bg:#DDF7EA;--k-ok:#0B7A47;
  --k-string-strong:#1D6CF2;--k-chip-on-bg:#FFFFFF;--k-chip-on-ink:#13213A;--k-chip-on-count:#5E6B85;
  --k-grad-side:linear-gradient(180deg,#FFFFFF,#FFFFFF);--k-grad-primary:linear-gradient(180deg,#1D6CF2,#1D6CF2);
  --k-r-xs:6px;--k-r-sm:12px;--k-r-md:20px;
  --k-e1:0 1px 2px rgba(19,33,58,.04),0 6px 20px -10px rgba(19,33,58,.12);
  --k-sh-primary:0 6px 16px -8px rgba(29,108,242,.7);
  --k-w-semi:600;--k-w-bold:700;--k-w-heavy:700;--k-w-black:700;
  font-family:var(--k-font);
}

/* Shell: flat white sidebar with group label and a tinted active item; white topbar with the status pill. */
.adm__bar{background:var(--k-surface)}
.adm__url{background:var(--k-head)}
.adm__brand b{font-weight:700;letter-spacing:-.01em}
.adm__nav li{height:34px;padding:0 10px;font-weight:600}
.adm__nav li svg{color:var(--k-muted)}
.adm__nav li.is-on{background:var(--k-select);font-weight:700}
.adm__nav li.is-on svg{color:var(--k-cobalt)}
.adm__nav li.is-on::before{content:none}
.adm__nav .adm__grp{height:auto;margin-top:var(--k-s-3);padding:0 10px 4px;font-size:var(--k-fs-11);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--k-muted)}
@media (min-width:1024px) and (max-width:1279px){.adm__nav .adm__grp{display:none}}
.adm__top{height:48px}
.adm__search{height:32px;padding:0 12px}
.adm__agent{height:30px;padding:0 12px;border:1px solid var(--k-line-2);background:var(--k-surface);font-weight:600}
.adm__agent.is-working{background:var(--k-select)}
.adm__title{font-size:24px;font-weight:700;letter-spacing:-.02em}
.adm__sub{color:var(--k-muted)}

/* Status words: dot + words (DESIGN §5), never a loud pill as the main signal. */
.adm .tag,.strip .tag{padding:0;background:none;border-radius:0;font-size:var(--k-fs-12);font-weight:600;display:inline-flex;align-items:center;gap:6px;color:var(--k-ink-2)}
.adm .tag::before,.strip .tag::before{content:"";width:7px;height:7px;border-radius:50%;flex:none;background:var(--k-muted)}
.adm .tag--ok,.strip .tag--ok{color:var(--k-ok)}.adm .tag--ok::before,.strip .tag--ok::before{background:var(--k-paid-dot)}
.adm .tag--wait,.strip .tag--wait,.adm .tag--under,.strip .tag--under{color:var(--k-wait)}
.adm .tag--wait::before,.strip .tag--wait::before,.adm .tag--under::before,.strip .tag--under::before{background:var(--k-wing)}
.adm .tag--over,.strip .tag--over{color:var(--k-over)}.adm .tag--over::before,.strip .tag--over::before{background:var(--k-cobalt)}
.adm .adm__title .tag{font-size:var(--k-fs-13)}
.adm-ls__tags .tag{padding:2px 10px;border-radius:var(--k-r-pill);background:var(--k-refund-bg);color:var(--k-refund)}
.adm-ls__tags .tag::before{content:none}
.adm-ls__tags .tag--ok{background:var(--k-ok-bg);color:var(--k-ok)}
.adm-ls__tags .tag--wait{background:var(--k-wait-bg);color:var(--k-wait)}
.adm-dot::before{width:7px;height:7px}
.adm-dot,.adm-muted{font-weight:600}

/* Segmented control: quiet track, white selected pill with count. Counts and tabs share it. */
.adm-counts,.adm-tabs{width:fit-content;max-width:100%;padding:4px;gap:2px;background:var(--k-head);border:0;border-radius:var(--k-r-pill);box-shadow:0 0 0 8px var(--k-canvas)}
.adm-counts{top:calc(-1 * var(--k-s-4) + 8px);margin:8px 0 var(--k-s-3)}
.adm-counts li{height:30px;padding:0 12px;border:0;background:transparent;color:var(--k-ink-2);font-weight:600}
.adm-counts li:first-child{background:var(--k-chip-on-bg);color:var(--k-chip-on-ink);box-shadow:var(--k-e1);font-weight:700}
.adm-counts b{font-weight:600;color:var(--k-chip-on-count)}
.adm-tabs{margin:8px 0 var(--k-s-3);flex-wrap:wrap;overflow:visible}
.adm-tabs li{padding:6px 14px;border-radius:var(--k-r-pill);font-weight:600;color:var(--k-ink-2)}
.adm-tabs li.is-on{background:var(--k-surface);color:var(--k-ink);box-shadow:var(--k-e1);font-weight:700}

/* Cards: white, soft elevation, no heavy borders; rows are sentences separated by hairlines. */
.adm-card{border:0;border-radius:var(--k-r-md);box-shadow:var(--k-e1)}
.adm-card__h{font-size:var(--k-fs-14);font-weight:700}
.adm-tbl th{background:transparent;border-bottom:1px solid var(--k-line);font-weight:600;letter-spacing:.02em}
.adm-tbl td{height:52px}
.adm-tbl tbody tr:nth-child(even){background:transparent}
.adm-tbl tr.is-sel{background:var(--k-select);box-shadow:none}
.adm-av{width:32px;height:32px;border-radius:50%;background:var(--k-primary-soft);color:var(--k-primary-ink);font-weight:700}
.adm-who b{font-weight:600}
.adm-ch__row{font-weight:700}
.adm-ls{padding-top:8px;padding-bottom:8px}
.adm-ls.is-sel{background:var(--k-select);box-shadow:none}
.adm-ls__t b{font-weight:600}
.adm-ico{color:var(--k-cobalt)}
.adm-files li{background:var(--k-head);border:0;border-radius:var(--k-r-sm)}
.adm-sw{width:32px;height:18px}
.adm-sw::after{width:14px;height:14px}
.adm-stats div{border:0;box-shadow:var(--k-e1);padding:12px 14px}
.adm-stats dd{font-size:20px;font-weight:700}
.adm-ans code{background:var(--k-head)}

/* Suggested feedback: a tinted "needs you" card (amber), then a calm white sent comment; no left rule. */
.adm-note{background:var(--k-amber-soft);border:0}
.adm-note__h{color:var(--k-wait)}
.adm-note.is-sent{background:var(--k-surface);border:0;box-shadow:var(--k-e1)}
.adm-note.is-sent .adm-note__h{color:var(--k-ok)}
.adm-btn{height:32px;border-radius:var(--k-r-sm);font-weight:600;border-color:var(--k-line-2)}
.adm-btn--primary{border-color:transparent;box-shadow:var(--k-sh-primary)}
.adm-sent{font-weight:600}

/* Phone strip: one white card; the four delta cells are flat wells (no frame inside a frame). */
.strip{border-color:transparent;border-radius:var(--k-r-md);box-shadow:var(--k-e1)}
.strip__t{font-weight:700;color:var(--k-ink)}
.strip__open{border-radius:var(--k-r-sm);border-color:var(--k-line-2);background:var(--k-surface);font-weight:600}
.strip__i{border:0;border-radius:var(--k-r-sm);background:var(--k-head)}
.strip__k{font-weight:600}
.strip__v{font-weight:700}