/* ============================================================
   Кит как прислан — токены и компоненты, извлечённые из
   styleguide.html БЕЗ ИЗМЕНЕНИЙ.

   Отдельным файлом, чтобы направление 8 могло собираться из
   готовых классов кита (.card, .btn, .badge, .tbl, .side,
   .topbar, .desktop-frame), а не из моего пересказа этих
   классов. «Максимально из того, что прислано» — значит и
   компоненты его, а не только цвета.

   Здесь НЕТ слоя contrast-fixes.css. Это сознательно: это
   версия «как есть», со всеми её числами, включая те девять
   пар, на которые ругается contrast-check.py из того же
   комплекта.
   ============================================================ */

/* ===== TOKENS ===== */
:root{
  color-scheme:light dark;
  --app-primary:#666cff;--app-primary-rgb:102,108,255;--app-primary-hover:#5c61e6;--app-primary-on:#fff;
  --app-secondary:#6d788d;--app-secondary-rgb:109,120,141;
  --app-success:#72e128;--app-success-rgb:114,225,40;
  --app-danger:#ff4d49;--app-danger-rgb:255,77,73;
  --app-warning:#fdb528;--app-warning-rgb:253,181,40;
  --app-info:#26c6f9;--app-info-rgb:38,198,249;
  --app-indigo:#666cff;--app-blue:#26c6f9;--app-cyan:#28c3d7;--app-teal:#20c997;--app-green:#72e128;
  --app-yellow:#ffd950;--app-orange:#fdb528;--app-red:#ff4d49;--app-pink:#e83e8c;--app-purple:#6f42c1;

  --app-font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --app-font-mono:"SFMono-Regular",Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --app-fw-regular:400;--app-fw-medium:500;--app-fw-semibold:600;--app-fw-bold:700;
  --app-fs-tiny:.75rem;--app-fs-sm:.8125rem;--app-fs-base:.9375rem;
  --app-fs-h6:.9375rem;--app-fs-h5:1.125rem;--app-fs-h4:1.473rem;--app-fs-h3:1.695rem;
  --app-fs-h2:2.252rem;--app-fs-h1:2.697rem;--app-fs-display:3.699rem;
  --app-lh-tight:1.1;--app-lh-body:1.375;--app-lh-head:1.56;--app-ls-wide:.4px;--app-ls-label:.2px;

  --app-space-1:.25rem;--app-space-2:.5rem;--app-space-3:.75rem;--app-space-4:1rem;
  --app-space-5:1.25rem;--app-space-6:1.5rem;--app-space-8:2rem;--app-space-10:2.5rem;--app-space-12:3rem;
  --app-card-padding:1.25rem;--app-grid-gutter:1.5rem;

  --app-radius-sm:.25rem;--app-radius:.375rem;--app-radius-lg:.5rem;
  --app-radius-xl:.625rem;--app-radius-2xl:1rem;--app-radius-pill:50rem;

  --app-border-width:1px;--app-focus-ring-width:.15rem;
  --app-dur-instant:100ms;--app-dur-fast:150ms;--app-dur-base:200ms;
  --app-dur-moderate:250ms;--app-dur-slow:300ms;--app-dur-slower:500ms;
  --app-ease-standard:cubic-bezier(.4,0,.2,1);--app-ease-out:cubic-bezier(0,0,.2,1);--app-ease-in-out:ease-in-out;
  --app-t-button:color var(--app-dur-fast) var(--app-ease-in-out),background-color var(--app-dur-fast) var(--app-ease-in-out),border-color var(--app-dur-fast) var(--app-ease-in-out),box-shadow var(--app-dur-fast) var(--app-ease-in-out);
  --app-t-input:border-color var(--app-dur-fast) var(--app-ease-in-out),box-shadow var(--app-dur-fast) var(--app-ease-in-out);
  --app-t-card:box-shadow var(--app-dur-slow) var(--app-ease-in-out),transform var(--app-dur-slow) var(--app-ease-in-out);
  --app-t-item:background-color var(--app-dur-base) var(--app-ease-in-out),color var(--app-dur-base) var(--app-ease-in-out);
  --app-sidebar-w:16.25rem;--app-navbar-h:4rem;--app-container-max:1392px;--app-navbar-blur:blur(7.5px);
}
:root,[data-theme=light]{
  --app-bg:#f7f7f9;--app-surface:#fff;--app-surface-alt:#f2f3f4;
  --app-text:#676a7b;--app-heading:#3b4055;--app-text-muted:#a8aab4;--app-text-faint:rgba(103,106,123,.5);
  --app-border:rgba(38,43,67,.12);--app-border-soft:rgba(38,43,67,.075);--app-divider:#e9e9ec;
  --app-gray-25:#fafafa;--app-gray-50:#f2f3f4;--app-gray-75:#eeeef0;--app-gray-100:#e9e9ec;
  --app-gray-200:#d4d5d9;--app-gray-300:#bdbfc6;--app-gray-400:#a8aab4;--app-gray-500:#9295a1;
  --app-gray-600:#7d808e;--app-gray-700:#676a7b;--app-gray-800:#515569;--app-gray-900:#3b4055;
  --app-primary-subtle:#e7e7ff;--app-primary-subtle-text:#292b66;--app-primary-subtle-border:#c3c6ff;
  --app-success-subtle:#e8fadd;--app-success-subtle-text:#2e5a10;--app-success-subtle-border:#c8f3ab;
  --app-danger-subtle:#ffe3e2;--app-danger-subtle-text:#661f1d;--app-danger-subtle-border:#ffbab8;
  --app-warning-subtle:#fff3dd;--app-warning-subtle-text:#654810;--app-warning-subtle-border:#fee2ab;
  --app-info-subtle:#dcf6fe;--app-info-subtle-text:#0f4f64;--app-info-subtle-border:#aae9fd;
  --app-secondary-subtle:#e8e9ed;--app-secondary-subtle-text:#2c3038;--app-secondary-subtle-border:#c6cad3;
  --app-menu-bg:#f7f7f9;--app-menu-color:#3b4055;--app-menu-hover-bg:rgba(38,43,67,.05);
  --app-navbar-bg:rgba(255,255,255,.85);--app-link:#666cff;--app-link-hover:#5c61e6;--app-code:#e83e8c;
  --app-shadow-xs:0 .125rem .375rem 0 rgba(38,43,67,.14);
  --app-shadow-sm:0 .125rem .625rem 0 rgba(38,43,67,.16);
  --app-shadow:0 .25rem .875rem 0 rgba(38,43,67,.16);
  --app-shadow-lg:0 .375rem 1.25rem 0 rgba(38,43,67,.18);
  --app-shadow-xl:0 .5rem 1.625rem 0 rgba(38,43,67,.18);
  --app-shadow-float:0 1px 16px 1px rgba(38,43,67,.09);
  --app-shadow-primary:0 2px 6px 0 rgba(var(--app-primary-rgb),.14);
}
[data-theme=dark]{
  --app-bg:#282a42;--app-surface:#30334e;--app-surface-alt:#3b3e58;
  --app-text:#b2b3ca;--app-heading:#d7d8ee;--app-text-muted:#7b7d95;--app-text-faint:rgba(178,179,202,.5);
  --app-border:rgba(234,234,255,.12);--app-border-soft:rgba(255,255,255,.09);--app-divider:#434660;
  --app-gray-25:#333851;--app-gray-50:#3b3e58;--app-gray-75:#3e415c;--app-gray-100:#434660;
  --app-gray-200:#555871;--app-gray-300:#696b84;--app-gray-400:#7b7d95;--app-gray-500:#8d8ea7;
  --app-gray-600:#9fa0b8;--app-gray-700:#b2b3ca;--app-gray-800:#c5c5dc;--app-gray-900:#d7d8ee;
  --app-primary-subtle:#393c6a;--app-primary-subtle-text:#a3a7ff;--app-primary-subtle-border:#5358c1;
  --app-success-subtle:#3b4f48;--app-success-subtle-text:#aaed7e;--app-success-subtle-border:#5ba435;
  --app-danger-subtle:#51374d;--app-danger-subtle-text:#ff9492;--app-danger-subtle-border:#b7444b;
  --app-warning-subtle:#514848;--app-warning-subtle-text:#fed37e;--app-warning-subtle-border:#b58835;
  --app-info-subtle:#2e4b69;--app-info-subtle-text:#7dddfb;--app-info-subtle-border:#2a93bd;
  --app-secondary-subtle:#3a3e58;--app-secondary-subtle-text:#a7aebb;--app-secondary-subtle-border:#586077;
  --app-menu-bg:#282a42;--app-menu-color:#d7d8ee;--app-menu-hover-bg:rgba(234,234,255,.06);
  --app-navbar-bg:rgba(48,51,78,.85);--app-link:#a3a7ff;--app-link-hover:#acb0ff;--app-code:#f18bba;
  --app-shadow-xs:0 .125rem .375rem 0 rgba(16,17,33,.2);
  --app-shadow-sm:0 .125rem .625rem 0 rgba(16,17,33,.24);
  --app-shadow:0 .25rem .875rem 0 rgba(16,17,33,.26);
  --app-shadow-lg:0 .375rem 1.25rem 0 rgba(16,17,33,.28);
  --app-shadow-xl:0 .5rem 1.625rem 0 rgba(16,17,33,.3);
  --app-shadow-float:0 1px 16px 1px rgba(255,255,255,.09);
  --app-shadow-primary:0 2px 6px 0 rgba(var(--app-primary-rgb),.3);
}

/* ===== KEYFRAMES ===== */
@keyframes app-dropdown-in{from{opacity:0;transform:translateY(-.5rem)}to{opacity:1;transform:none}}
@keyframes app-fade-in{from{opacity:0}to{opacity:1}}
@keyframes app-spin{to{transform:rotate(360deg)}}
@keyframes app-grow{0%{transform:scale(0);opacity:0}50%{opacity:1}100%{transform:none;opacity:0}}
@keyframes app-pulse-dot{0%,100%{box-shadow:0 0 0 0 rgba(var(--app-success-rgb),.55)}70%{box-shadow:0 0 0 .5rem rgba(var(--app-success-rgb),0)}}
@keyframes app-skeleton{100%{background-position:-200% 0}}
@keyframes app-stripes{0%{background-position-x:1rem}}
@keyframes app-rise-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ===== BASE ===== */
*{box-sizing:border-box}
body{margin:0;background:var(--app-bg);color:var(--app-text);
  font-family:var(--app-font-sans);font-size:var(--app-fs-base);line-height:var(--app-lh-body);
  transition:background-color var(--app-dur-slow) var(--app-ease-in-out),color var(--app-dur-slow) var(--app-ease-in-out);
  -webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{color:var(--app-heading);font-weight:var(--app-fw-medium);margin:0 0 .5rem}
h1{font-size:var(--app-fs-h1);line-height:1.58}h2{font-size:var(--app-fs-h2);line-height:1.56}
h3{font-size:var(--app-fs-h3);line-height:1.55}h4{font-size:var(--app-fs-h4);line-height:1.61}
h5{font-size:var(--app-fs-h5);line-height:1.56}h6{font-size:var(--app-fs-h6);line-height:1.47}
p{margin:0 0 .75rem}
a{color:var(--app-link);text-decoration:none;transition:color var(--app-dur-fast) var(--app-ease-in-out)}
a:hover{color:var(--app-link-hover)}
code{font-family:var(--app-font-mono);font-size:.8125rem;color:var(--app-code);
  background:var(--app-gray-25);padding:.1rem .3rem;border-radius:var(--app-radius-sm)}
.muted{color:var(--app-text-muted)}
.small{font-size:var(--app-fs-sm)}
.caps{font-size:var(--app-fs-tiny);text-transform:uppercase;letter-spacing:var(--app-ls-wide);
  color:var(--app-text-muted);font-weight:var(--app-fw-medium)}

/* ===== LAYOUT ===== */
.wrap{display:flex;min-height:100vh}
.side{width:var(--app-sidebar-w);flex:0 0 var(--app-sidebar-w);background:var(--app-menu-bg);
  border-right:1px solid var(--app-border);padding:1.25rem .75rem;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{display:flex;align-items:center;gap:.625rem;padding:0 .5rem 1.25rem;color:var(--app-heading);
  font-size:1.125rem;font-weight:var(--app-fw-semibold)}
.brand .mark{width:32px;height:32px;border-radius:var(--app-radius-lg);flex:0 0 32px;
  background:linear-gradient(135deg,var(--app-primary),#8b90ff);box-shadow:var(--app-shadow-primary)}
.side .caps{padding:.75rem .5rem .25rem}
.nav a{display:block;padding:.4375rem .75rem;border-radius:var(--app-radius-lg);color:var(--app-menu-color);
  font-size:var(--app-fs-base);margin-bottom:.25rem;transition:var(--app-t-item)}
.nav a:hover{background:var(--app-menu-hover-bg);color:var(--app-heading)}
.nav a.active{background:var(--app-primary);color:#fff;box-shadow:var(--app-shadow-primary)}
.main{flex:1;min-width:0}
.topbar{position:sticky;top:0;z-index:20;height:var(--app-navbar-h);display:flex;align-items:center;
  justify-content:space-between;padding:0 1.5rem;background:var(--app-navbar-bg);
  backdrop-filter:var(--app-navbar-blur);-webkit-backdrop-filter:var(--app-navbar-blur);
  border-bottom:1px solid var(--app-border-soft);border-radius:0 0 var(--app-radius-xl) var(--app-radius-xl)}
.content{padding:1.5rem;max-width:var(--app-container-max)}
section{margin-bottom:3rem;scroll-margin-top:5rem}
.sec-head{margin-bottom:1.25rem;padding-bottom:.75rem;border-bottom:1px solid var(--app-border)}
.grid{display:grid;gap:var(--app-grid-gutter)}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}

/* ===== CARD ===== */
.card{background:var(--app-surface);border-radius:var(--app-radius-xl);box-shadow:var(--app-shadow);
  padding:var(--app-card-padding);transition:var(--app-t-card);animation:app-rise-in .4s var(--app-ease-out) both}
.card.hoverable:hover{box-shadow:var(--app-shadow-lg);transform:translateY(-2px)}
.card-title{font-size:var(--app-fs-h5);color:var(--app-heading);font-weight:var(--app-fw-medium);margin-bottom:.25rem}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.375rem;
  font-family:inherit;font-size:var(--app-fs-base);font-weight:var(--app-fw-medium);
  letter-spacing:var(--app-ls-wide);text-transform:capitalize;line-height:1.375;
  padding:.5625rem 1.25rem;border-radius:var(--app-radius);border:1px solid transparent;
  cursor:pointer;transition:var(--app-t-button);position:relative;overflow:hidden;
  -webkit-user-select:none;user-select:none;background:transparent;color:var(--app-text)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 var(--app-focus-ring-width) rgba(var(--app-primary-rgb),.35)}
.btn-sm{padding:.4375rem .96rem;font-size:var(--app-fs-sm);border-radius:var(--app-radius)}
.btn-lg{padding:.52rem 1.625rem;font-size:1.0625rem;border-radius:var(--app-radius-xl)}
.btn-primary{background:var(--app-primary);border-color:var(--app-primary);color:#fff;box-shadow:var(--app-shadow-primary)}
.btn-primary:hover{background:var(--app-primary-hover);border-color:var(--app-primary-hover);box-shadow:0 4px 10px 0 rgba(var(--app-primary-rgb),.28)}
.btn-success{background:var(--app-success);border-color:var(--app-success);color:#fff;box-shadow:0 2px 6px 0 rgba(var(--app-success-rgb),.2)}
.btn-danger{background:var(--app-danger);border-color:var(--app-danger);color:#fff;box-shadow:0 2px 6px 0 rgba(var(--app-danger-rgb),.2)}
.btn-outline{border-color:var(--app-primary);color:var(--app-primary)}
.btn-outline:hover{background:var(--app-primary);color:#fff}
.btn-tonal{background:var(--app-primary-subtle);color:var(--app-primary-subtle-text)}
.btn-tonal:hover{background:var(--app-primary);color:#fff}
.btn-ghost{color:var(--app-primary)}
.btn-ghost:hover{background:var(--app-primary-subtle)}
.btn-icon{padding:.5rem;width:38px;height:38px;border-radius:var(--app-radius-lg)}
.ripple{position:absolute;border-radius:50%;width:100px;height:100px;margin:-50px 0 0 -50px;
  pointer-events:none;transform:scale(0);opacity:.6;
  background:radial-gradient(rgba(255,255,255,.2) 0,rgba(255,255,255,.35) 40%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0) 70%);
  animation:rip var(--app-dur-slower) var(--app-ease-out) forwards}
.btn-outline .ripple,.btn-ghost .ripple,.btn-tonal .ripple{
  background:radial-gradient(rgba(var(--app-primary-rgb),.2) 0,rgba(var(--app-primary-rgb),.35) 40%,rgba(var(--app-primary-rgb),.5) 60%,rgba(255,255,255,0) 70%)}
@keyframes rip{to{transform:scale(3.5);opacity:0}}

/* ===== BADGES ===== */
.badge{display:inline-flex;align-items:center;gap:.35rem;padding:.325rem .5rem;
  font-size:var(--app-fs-sm);font-weight:var(--app-fw-medium);border-radius:var(--app-radius);line-height:1.2}
.badge.pill{border-radius:var(--app-radius-pill);padding:.325rem .75rem}
.b-primary{background:var(--app-primary-subtle);color:var(--app-primary-subtle-text)}
.b-success{background:var(--app-success-subtle);color:var(--app-success-subtle-text)}
.b-danger{background:var(--app-danger-subtle);color:var(--app-danger-subtle-text)}
.b-warning{background:var(--app-warning-subtle);color:var(--app-warning-subtle-text)}
.b-info{background:var(--app-info-subtle);color:var(--app-info-subtle-text)}
.b-secondary{background:var(--app-secondary-subtle);color:var(--app-secondary-subtle-text)}
.b-solid-primary{background:var(--app-primary);color:#fff}
.dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px}
.dot-live{background:var(--app-success);animation:app-pulse-dot 2s var(--app-ease-in-out) infinite}

/* ===== FORMS ===== */
.field{margin-bottom:1rem}
.label{display:block;font-size:var(--app-fs-base);font-weight:var(--app-fw-medium);
  color:var(--app-heading);margin-bottom:.5rem}
.input,.select{width:100%;height:48px;padding:.79rem .94rem;font-family:inherit;font-size:var(--app-fs-base);
  color:var(--app-heading);background:transparent;border:1px solid var(--app-gray-300);
  border-radius:var(--app-radius-lg);transition:var(--app-t-input);outline:none}
.input::placeholder{color:var(--app-text-muted)}
.input:focus,.select:focus{border-color:var(--app-primary);box-shadow:0 0 0 .15rem rgba(var(--app-primary-rgb),.18)}
.input.err{border-color:var(--app-danger)}
.input.err:focus{box-shadow:0 0 0 .15rem rgba(var(--app-danger-rgb),.18)}
.help{font-size:var(--app-fs-sm);color:var(--app-text-muted);margin-top:.375rem}
.help.err{color:var(--app-danger)}
.switch{position:relative;display:inline-block;width:42px;height:24px}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;inset:0;background:var(--app-gray-300);border-radius:999px;cursor:pointer;
  transition:background-color var(--app-dur-base) var(--app-ease-in-out)}
.slider::before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;
  border-radius:50%;box-shadow:var(--app-shadow-xs);transition:transform var(--app-dur-base) var(--app-ease-in-out)}
.switch input:checked+.slider{background:var(--app-primary)}
.switch input:checked+.slider::before{transform:translateX(18px)}

/* ===== TABLE ===== */
.tbl{width:100%;border-collapse:collapse}
.tbl th{padding:1rem 1.25rem;text-align:left;font-size:var(--app-fs-tiny);font-weight:var(--app-fw-regular);
  text-transform:uppercase;letter-spacing:var(--app-ls-label);color:var(--app-heading);
  border-bottom:1px solid var(--app-border)}
.tbl td{padding:.78rem 1.25rem;font-size:var(--app-fs-base);border-bottom:1px solid var(--app-border-soft)}
.tbl tbody tr{transition:background-color var(--app-dur-base) var(--app-ease-in-out)}
.tbl tbody tr:hover{background:var(--app-gray-25)}
.tbl tbody tr:last-child td{border-bottom:0}

/* ===== MISC ===== */
.swatch{border-radius:var(--app-radius-lg);overflow:hidden;box-shadow:var(--app-shadow-xs);background:var(--app-surface)}
.swatch .chip{height:72px}
.swatch .meta{padding:.625rem .75rem;font-size:var(--app-fs-sm)}
.swatch .meta b{display:block;color:var(--app-heading);font-weight:var(--app-fw-medium)}
.swatch .meta span{font-family:var(--app-font-mono);font-size:.75rem;color:var(--app-text-muted)}
.avatar{border-radius:50%;background:linear-gradient(135deg,var(--app-primary),#8b90ff);
  display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:var(--app-fw-medium);
  position:relative;flex:0 0 auto}
.avatar .st{position:absolute;right:0;bottom:0;width:10px;height:10px;border-radius:50%;
  border:2px solid var(--app-surface)}
.stat-icon{width:40px;height:40px;border-radius:var(--app-radius-lg);display:inline-flex;
  align-items:center;justify-content:center;font-size:1.125rem}
.spinner{width:32px;height:32px;border:3px solid var(--app-primary-subtle);border-top-color:var(--app-primary);
  border-radius:50%;animation:app-spin .75s linear infinite}
.skeleton{height:14px;border-radius:var(--app-radius-sm);
  background:linear-gradient(90deg,var(--app-gray-100) 25%,var(--app-gray-75) 37%,var(--app-gray-100) 63%);
  background-size:200% 100%;animation:app-skeleton 1.4s linear infinite}
.progress{height:8px;background:var(--app-gray-100);border-radius:var(--app-radius-pill);overflow:hidden}
.progress i{display:block;height:100%;background:var(--app-primary);border-radius:inherit;
  transition:width var(--app-dur-base) var(--app-ease-in-out)}
.progress.striped i{background-image:linear-gradient(45deg,rgba(255,255,255,.18) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.18) 50%,rgba(255,255,255,.18) 75%,transparent 75%,transparent);
  background-size:1rem 1rem;animation:app-stripes 1s linear infinite}
.alert{padding:.875rem 1rem;border-radius:var(--app-radius-lg);font-size:var(--app-fs-base);
  border:1px solid transparent}
.a-primary{background:var(--app-primary-subtle);color:var(--app-primary-subtle-text);border-color:var(--app-primary-subtle-border)}
.a-success{background:var(--app-success-subtle);color:var(--app-success-subtle-text);border-color:var(--app-success-subtle-border)}
.a-danger{background:var(--app-danger-subtle);color:var(--app-danger-subtle-text);border-color:var(--app-danger-subtle-border)}
.a-warning{background:var(--app-warning-subtle);color:var(--app-warning-subtle-text);border-color:var(--app-warning-subtle-border)}
.shadow-demo{height:88px;background:var(--app-surface);border-radius:var(--app-radius-xl);
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:.5rem;font-size:var(--app-fs-sm)}
.radius-demo{height:72px;background:var(--app-primary-subtle);display:flex;align-items:center;
  justify-content:center;color:var(--app-primary-subtle-text);font-size:var(--app-fs-sm);font-family:var(--app-font-mono)}
.space-bar{background:var(--app-primary);height:16px;border-radius:2px}
.motion-box{width:56px;height:56px;border-radius:var(--app-radius-lg);background:var(--app-primary);
  box-shadow:var(--app-shadow-primary)}
.demo-tile{background:var(--app-surface-alt);border:1px dashed var(--app-border);border-radius:var(--app-radius-lg);
  padding:1rem;text-align:center}
.id-field{font-family:var(--app-font-mono);font-size:var(--app-fs-h3);letter-spacing:3px;
  color:var(--app-heading);font-weight:var(--app-fw-medium)}
.desktop-frame{background:var(--app-surface);border:1px solid var(--app-border);border-radius:var(--app-radius-lg);
  overflow:hidden;box-shadow:var(--app-shadow-lg)}
.desktop-frame .tb{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;
  background:var(--app-surface-alt);border-bottom:1px solid var(--app-border);font-size:var(--app-fs-sm)}
.hero{border-radius:var(--app-radius-2xl);padding:3rem 2rem;text-align:center;color:#fff;
  background:linear-gradient(135deg,#666cff 0%,#8b90ff 55%,#a3a7ff 100%);box-shadow:var(--app-shadow-xl)}
@media(max-width:900px){.side{display:none}}