/*!
 * ClickPop — base design system
 * Tokens, reset, type, controls. Shared by the site, the customer panel and the office.
 * Written with logical properties only, so one sheet serves RTL (fa) and LTR (en/ru/zh).
 */
@layer reset, tokens, base, components, utilities;

@font-face{
  font-family:"Arad";
  src:url("../fonts/Arad-VF.woff2") format("woff2-variations"),url("../fonts/Arad-VF.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
}

@layer tokens{
  :root{
    /* palette */
    --blue-50:#EFF4FF;--blue-100:#DCE7FF;--blue-200:#B9D0FF;--blue-400:#528FFF;--blue-500:#1668FF;--blue-600:#0050E3;--blue-700:#0040B7;
    --orange-300:#FFB885;--orange-400:#FF9A52;--orange-500:#FF7A1A;--orange-700:#B94E00;
    --ink-900:#121826;

    /* surfaces — warm paper, not pure white */
    --bg:#F7F5F0;--bg-2:#EFEBE3;--bg-3:#E6E1D6;
    --surface:#FFFFFF;--surface-2:#FBFAF7;
    --ink:#121826;--ink-2:#454E63;--ink-3:#646C7F;
    --line:#E6E1D6;--line-2:#D5CEC0;--line-strong:#646C7F;
    --brand:#1668FF;--brand-hover:#0050E3;--on-brand:#FFFFFF;--link:#0040B7;
    --pop:#FF7A1A;--pop-ink:#B94E00;
    --ok:#0F5F33;--ok-bg:#E3F5EA;--warn:#7A4800;--warn-bg:#FDF0DC;--bad:#A3170F;--bad-bg:#FCE9E7;--info:#0040B7;--info-bg:#E6EEFF;
    --hero:#121826;--hero-ink:#EEF1F6;--hero-ink-2:#A9B0BF;
    --glass:color-mix(in srgb,var(--bg) 86%,transparent);
    --focus:#0040B7;

    --sh-1:0 1px 2px rgb(11 26 58/.05);
    --sh-2:0 10px 30px -12px rgb(11 26 58/.18);
    --sh-3:0 30px 70px -24px rgb(11 26 58/.28);

    --r-xs:6px;--r-sm:8px;--r-md:10px;--r-lg:14px;--r-xl:18px;
    --ease:cubic-bezier(.22,1,.36,1);--dur:.18s;

    --font:"Arad",ui-sans-serif,system-ui,"Segoe UI",Tahoma,sans-serif;
    --font-num:var(--font);
    --lh:1.85;
    --t-xs:.8125rem;--t-sm:.90625rem;--t-md:1rem;--t-lg:1.125rem;--t-xl:1.375rem;
    --t-2xl:clamp(1.5rem,1.2rem + 1.2vw,2.05rem);--t-3xl:clamp(1.9rem,1.3rem + 2.4vw,3rem);

    --wrap:1200px;--gutter:clamp(1rem,4vw,1.5rem);
    color-scheme:light;
  }
  :root:lang(ru),:root:lang(zh){--font:ui-sans-serif,system-ui,"Segoe UI","PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;--lh:1.7}
  :root:lang(en){--lh:1.7}

  :root[data-theme="dark"]{
    --bg:#0E131C;--bg-2:#141B27;--bg-3:#0A0E15;
    --surface:#161D2A;--surface-2:#1A2230;
    --ink:#EEF3FC;--ink-2:#B1BED6;--ink-3:#8E9DBA;
    --line:#252E3E;--line-2:#323D52;--line-strong:#8E9DBA;
    --brand:#2F7BFF;--brand-hover:#528FFF;--link:#8DB6FF;
    --pop:#FF7A1A;--pop-ink:#FF9A52;
    --ok:#6BE3A2;--ok-bg:#0F3A29;--warn:#FFC978;--warn-bg:#3A2A0C;--bad:#FF9E96;--bad-bg:#3D1714;--info:#8DB6FF;--info-bg:#15305F;
    --hero:#1C2433;--hero-ink:#EEF1F6;--hero-ink-2:#A3AEC4;
    --focus:#8DB6FF;
    --sh-1:0 1px 2px rgb(0 0 0/.4);--sh-2:0 12px 30px -12px rgb(0 0 0/.6);--sh-3:0 30px 70px -20px rgb(0 0 0/.7);
    color-scheme:dark;
  }
}

@layer reset{
  *,*::before,*::after{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;hanging-punctuation:first}
  html,body{overflow-x:clip}
  body{margin:0;min-height:100dvh}
  h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{margin:0}
  ul,ol{margin:0;padding:0;list-style:none}
  img,svg,video,canvas{display:block;max-width:100%}
  img{height:auto}
  input,button,textarea,select{font:inherit;color:inherit;letter-spacing:inherit}
  button{background:none;border:0;padding:0;cursor:pointer}
  table{border-collapse:collapse}
  [hidden]{display:none!important}
}

@layer base{
  body{
    background:var(--bg);color:var(--ink);font-family:var(--font);font-size:var(--t-md);line-height:var(--lh);
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;
  }
  h1,h2,h3,h4{line-height:1.35;font-weight:800;text-wrap:balance;letter-spacing:-.005em}
  p{text-wrap:pretty}
  a{color:var(--link);text-decoration:none;text-underline-offset:.28em}
  a:hover{text-decoration:underline}
  :focus-visible{outline:2.5px solid var(--focus);outline-offset:2px;border-radius:var(--r-xs)}
  ::selection{background:var(--blue-100);color:var(--ink-900)}
  hr{border:0;border-block-start:1px solid var(--line);margin-block:1.5rem}
  code,kbd,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em}
  code{background:var(--bg-2);padding:.1em .4em;border-radius:var(--r-xs);direction:ltr;unicode-bidi:isolate}
  svg.i{width:20px;height:20px;flex-shrink:0}
  svg.i-sm{width:16px;height:16px;flex-shrink:0}
  svg.i-lg{width:24px;height:24px;flex-shrink:0}
  svg.tile{width:44px;height:44px;flex-shrink:0;overflow:visible}
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}
}

@layer components{
  /* ── buttons ───────────────────────────────────── */
  .btn{
    --b-bg:var(--surface);--b-ink:var(--ink);--b-line:var(--line-2);
    display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;padding:.55rem 1.15rem;
    border-radius:var(--r-md);border:1px solid var(--b-line);background:var(--b-bg);color:var(--b-ink);
    font-weight:700;font-size:var(--t-sm);line-height:1.4;white-space:nowrap;text-decoration:none!important;cursor:pointer;
    transition:background var(--dur),border-color var(--dur),transform .12s var(--ease),filter var(--dur);
  }
  .btn:hover{border-color:var(--line-strong)}
  .btn:active{transform:scale(.98)}
  .btn--brand{--b-bg:var(--brand);--b-ink:var(--on-brand);--b-line:transparent}
  .btn--brand:hover{--b-bg:var(--brand-hover);border-color:transparent}
  .btn--ink{--b-bg:var(--ink);--b-ink:var(--bg);--b-line:transparent}
  .btn--ink:hover{filter:brightness(1.15);border-color:transparent}
  .btn--pop{--b-bg:var(--pop);--b-ink:#1A0E03;--b-line:transparent}
  .btn--light{--b-bg:#fff;--b-ink:var(--ink-900);--b-line:transparent}
  .btn--quiet{--b-bg:transparent;--b-line:transparent;color:var(--link);padding-inline:.6rem}
  .btn--quiet:hover{background:var(--bg-2);border-color:transparent}
  .btn--danger{--b-bg:var(--bad-bg);--b-ink:var(--bad);--b-line:transparent}
  .btn--lg{min-height:54px;padding-inline:1.6rem;font-size:var(--t-md);border-radius:var(--r-lg)}
  .btn--sm{min-height:34px;padding:.3rem .8rem;font-size:var(--t-xs);border-radius:var(--r-sm)}
  .btn--block{width:100%}
  .btn[disabled],.btn[aria-disabled="true"],.btn[aria-busy="true"]{opacity:.55;pointer-events:none}
  .btn[aria-busy="true"]::after{content:"";width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-inline-end-color:transparent;animation:spin .7s linear infinite}
  @keyframes spin{to{transform:rotate(1turn)}}

  .iconbtn{position:relative;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface);color:var(--ink-2);transition:border-color var(--dur),color var(--dur)}
  .iconbtn:hover{color:var(--ink);border-color:var(--line-2)}
  .iconbtn .dot{position:absolute;top:7px;inset-inline-end:8px;width:8px;height:8px;border-radius:50%;background:var(--pop);box-shadow:0 0 0 2px var(--surface)}
  .theme-sun{display:none}
  :root[data-theme="dark"] .theme-sun{display:block}
  :root[data-theme="dark"] .theme-moon{display:none}

  /* ── form controls ─────────────────────────────── */
  .field{display:grid;gap:.4rem;margin-block-end:1rem;min-width:0}
  .field>label,.field>.label{font-size:var(--t-sm);font-weight:700;color:var(--ink-2)}
  .field small,.hint{font-size:var(--t-xs);color:var(--ink-3);line-height:1.7}
  .input,.select,.textarea{
    width:100%;min-height:46px;padding:.6rem .9rem;border-radius:var(--r-md);border:1px solid var(--line-2);
    background:var(--surface);color:var(--ink);font-size:.95rem;transition:border-color var(--dur),box-shadow var(--dur)
  }
  .textarea{min-height:130px;resize:vertical;line-height:1.85}
  .select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23646C7F' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:18px;background-position:left .7rem center;padding-inline-end:2.4rem}
  :dir(ltr) .select,[dir="ltr"] .select{background-position:right .7rem center}
  .input:focus,.select:focus,.textarea:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}
  .input::placeholder,.textarea::placeholder{color:color-mix(in srgb,var(--ink-3) 75%,transparent)}
  .input[aria-invalid="true"],.field.has-error .input,.field.has-error .select,.field.has-error .textarea{border-color:var(--bad)}
  .input--ltr,input[type="email"],input[type="url"],input[type="tel"],input[inputmode="numeric"],input[type="password"]{direction:ltr;text-align:start}
  [dir="rtl"] .input--ltr,[dir="rtl"] input[type="email"],[dir="rtl"] input[type="url"],[dir="rtl"] input[type="tel"],[dir="rtl"] input[type="password"],[dir="rtl"] input[inputmode="numeric"]{text-align:right}
  .input--ltr:placeholder-shown,[dir="rtl"] input[type="email"]:placeholder-shown{direction:rtl}
  .err{font-size:var(--t-xs);color:var(--bad);font-weight:600}
  .err:empty{display:none}
  .input-group{position:relative}
  .input-group>.i{position:absolute;inset-inline-start:.85rem;top:50%;translate:0 -50%;color:var(--ink-3);pointer-events:none}
  .input-group>.input{padding-inline-start:2.6rem}
  .input-group>.addon{position:absolute;inset-inline-end:.4rem;top:50%;translate:0 -50%}

  .check{display:flex;align-items:flex-start;gap:.6rem;font-size:var(--t-sm);color:var(--ink-2);cursor:pointer;line-height:1.7}
  .check input{width:18px;height:18px;margin-block-start:.2rem;accent-color:var(--brand);flex-shrink:0}
  .switch{position:relative;display:inline-flex;align-items:center;gap:.7rem;cursor:pointer;font-size:var(--t-sm);font-weight:600}
  .switch input{appearance:none;width:42px;height:24px;border-radius:999px;background:var(--line-2);position:relative;cursor:pointer;transition:background var(--dur);flex-shrink:0;margin:0}
  .switch input::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:var(--sh-1);transition:inset-inline-start var(--dur) var(--ease)}
  .switch input:checked{background:var(--brand)}
  .switch input:checked::after{inset-inline-start:21px}

  .seg{display:inline-flex;gap:2px;padding:3px;border-radius:var(--r-md);background:var(--bg-2);max-width:100%;overflow-x:auto;scrollbar-width:none}
  .seg a,.seg button{display:inline-flex;align-items:center;gap:.4rem;padding:.38rem .85rem;border-radius:var(--r-sm);font-size:var(--t-sm);font-weight:600;color:var(--ink-2);white-space:nowrap;text-decoration:none!important}
  .seg [aria-current="page"],.seg [aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1)}
  .seg .n{font-size:.72rem;font-weight:700;color:var(--ink-3)}

  .chip{position:relative;display:inline-flex;cursor:pointer}
  .chip input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
  .chip span{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .9rem;border-radius:999px;border:1px solid var(--line-2);font-size:var(--t-sm);font-weight:600;color:var(--ink-2);background:var(--surface);transition:all .15s}
  .chip:hover span{border-color:var(--line-strong)}
  .chip input:checked+span,.chip[aria-pressed="true"] span{background:var(--ink);color:var(--bg);border-color:var(--ink)}
  .chip input:focus-visible+span{outline:2px solid var(--focus);outline-offset:2px}

  /* ── status & labels ───────────────────────────── */
  .pill{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:999px;font-size:.75rem;font-weight:700;white-space:nowrap;line-height:1.8}
  .pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
  .pill--ok{background:var(--ok-bg);color:var(--ok)}
  .pill--run{background:var(--info-bg);color:var(--info)}
  .pill--wait,.pill--part{background:var(--warn-bg);color:var(--warn)}
  .pill--bad{background:var(--bad-bg);color:var(--bad)}
  .pill--muted{background:var(--bg-2);color:var(--ink-3)}
  .pill--run::before{animation:pulse 1.6s ease-in-out infinite}
  @keyframes pulse{50%{opacity:.35}}
  .tag{display:inline-flex;align-items:center;gap:4px;padding:1px 8px;border-radius:var(--r-xs);background:var(--bg-2);color:var(--ink-2);font-size:.74rem;font-weight:600;white-space:nowrap}
  .tag--ok{background:var(--ok-bg);color:var(--ok)}
  .tag--pop{background:color-mix(in srgb,var(--pop) 16%,transparent);color:var(--pop-ink)}
  .tag--brand{background:var(--info-bg);color:var(--info)}
  .tag--bad{background:var(--bad-bg);color:var(--bad)}
  .tag--wait{background:var(--warn-bg);color:var(--warn)}

  .alert{display:flex;gap:.7rem;align-items:flex-start;padding:.85rem 1rem;border-radius:var(--r-md);font-size:var(--t-sm);line-height:1.8;margin-block-end:1rem;border:1px solid transparent}
  .alert>.i{margin-block-start:.15rem}
  .alert--ok{background:var(--ok-bg);color:var(--ok)}
  .alert--bad{background:var(--bad-bg);color:var(--bad)}
  .alert--warn{background:var(--warn-bg);color:var(--warn)}
  .alert--info{background:var(--info-bg);color:var(--info)}
  .alert a{color:inherit;font-weight:700;text-decoration:underline}

  /* ── table ─────────────────────────────────────── */
  .table-wrap{position:relative;overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
  .table{width:100%;font-size:var(--t-sm)}
  .table th{text-align:start;font-size:var(--t-xs);font-weight:700;color:var(--ink-3);padding:.7rem 1rem;background:var(--surface-2);border-block-end:1px solid var(--line);white-space:nowrap}
  .table td{padding:.8rem 1rem;border-block-end:1px solid var(--line);color:var(--ink-2);vertical-align:middle}
  .table tbody tr:last-child td{border-block-end:0}
  .table tbody tr:hover td{background:color-mix(in srgb,var(--bg-2) 45%,transparent)}
  .table .strong{color:var(--ink);font-weight:700}
  @media (max-width:640px){
    .table--stack thead{display:none}
    .table--stack tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.25rem .9rem;align-items:center;padding:.85rem 1rem;border-block-end:1px solid var(--line)}
    .table--stack tbody tr:last-child{border-block-end:0}
    .table--stack td{padding:0;border:0!important}
    .table--stack td:first-child{grid-column:1/-1;min-width:0}
    .table--stack td:last-child{grid-column:2;grid-row:2/span 2}
    .table--stack td.num{font-size:var(--t-xs)}
    .table--stack td.num.strong{font-size:var(--t-sm)}
  }
  .table .num{white-space:nowrap}
  :lang(en) .table .num,:lang(ru) .table .num,:lang(zh) .table .num{font-variant-numeric:tabular-nums}

  /* ── popover menus (native Popover API) ────────── */
  [popover].menu{margin:0;inset:auto;padding:.4rem;min-width:200px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);color:var(--ink);box-shadow:var(--sh-3)}
  [popover].menu:popover-open{animation:pop-in .16s var(--ease)}
  @keyframes pop-in{from{opacity:0;translate:0 -6px}}
  .menu a,.menu button{display:flex;align-items:center;gap:.65rem;width:100%;padding:.55rem .75rem;border-radius:var(--r-sm);font-size:var(--t-sm);color:var(--ink-2);text-align:start;text-decoration:none!important}
  .menu a:hover,.menu button:hover{background:var(--bg-2);color:var(--ink)}
  .menu [aria-current="true"]{color:var(--ink);font-weight:700}
  .menu hr{margin:.3rem .4rem}
  .menu .menu-h{padding:.5rem .75rem .6rem;font-size:var(--t-xs);color:var(--ink-3);border-block-end:1px solid var(--line);margin-block-end:.3rem}
  .menu .menu-h b{display:block;color:var(--ink);font-size:var(--t-sm)}

  /* ── dialogs ───────────────────────────────────── */
  dialog.modal{width:min(520px,calc(100% - 2rem));padding:0;border:0;border-radius:var(--r-xl);background:var(--surface);color:var(--ink);box-shadow:var(--sh-3)}
  dialog.modal::backdrop{background:rgb(10 14 22/.5);backdrop-filter:blur(3px)}
  dialog.modal[open]{animation:pop-in .2s var(--ease)}
  .modal__h{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.25rem;border-block-end:1px solid var(--line)}
  .modal__h h3{font-size:1.02rem}
  .modal__b{padding:1.25rem}
  .modal__f{display:flex;gap:.6rem;justify-content:flex-end;padding:0 1.25rem 1.25rem}

  /* ── receipt: the brand's signature shape ──────── */
  .receipt{
    position:relative;background:#FFFDF8;color:#121826;border-radius:4px;padding:1.3rem 1.35rem 1.7rem;
    box-shadow:0 30px 60px -28px rgb(0 0 0/.5);
    -webkit-mask:radial-gradient(circle 6px at 50% 100%,#0000 97%,#000) 0 100%/18px 51% repeat-x,linear-gradient(#000 0 0) 0 0/100% 51% no-repeat;
    mask:radial-gradient(circle 6px at 50% 100%,#0000 97%,#000) 0 100%/18px 51% repeat-x,linear-gradient(#000 0 0) 0 0/100% 51% no-repeat;
  }
  .receipt__h{display:flex;justify-content:space-between;gap:1rem;font-size:.78rem;font-weight:700;color:#636B7E;padding-block-end:.75rem;border-block-end:2px dashed #D5CEC0}
  .receipt__row{display:grid;grid-template-columns:1fr auto;gap:.3rem 1rem;font-size:.86rem;padding-block:.2rem}
  .receipt__row dt{color:#636B7E}
  .receipt__row dd{font-weight:700;text-align:end}
  .receipt__sum{border-block-start:2px dashed #D5CEC0;margin-block-start:.7rem;padding-block-start:.8rem;font-size:.95rem}
  .receipt__bar{height:6px;border-radius:3px;background:#EFEBE3;margin-block:.8rem;overflow:hidden}
  .receipt__bar i{display:block;height:100%;background:#121826;border-radius:inherit}
  .stamp{position:absolute;padding:.2rem .7rem;border:2px solid #E4620C;border-radius:4px;color:#E4620C;font-weight:800;font-size:.78rem;rotate:-12deg;opacity:.92;letter-spacing:.02em;background:#FFFDF8}

  /* ── misc ──────────────────────────────────────── */
  .empty{display:grid;justify-items:center;gap:.4rem;text-align:center;padding:2.75rem 1rem;color:var(--ink-3);font-size:var(--t-sm)}
  .empty .i{width:40px;height:40px;color:var(--line-strong);stroke-width:1.4;margin-block-end:.3rem}
  .empty b{color:var(--ink);font-size:1.02rem}
  .empty .btn{margin-block-start:.8rem}
  .avatar{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--brand);color:#fff;font-weight:800;font-size:.95rem;flex-shrink:0}
  .kbd-copy{display:inline-flex;align-items:center;gap:.4rem}
  .progress{height:6px;border-radius:999px;background:var(--bg-2);overflow:hidden}
  .progress i{display:block;height:100%;border-radius:inherit;background:var(--brand);transition:width .5s var(--ease)}
  .progress--done i{background:var(--ok)}
  .toast-stack{position:fixed;inset-block-end:1rem;inset-inline:0;display:grid;justify-items:center;gap:.5rem;z-index:200;pointer-events:none}
  .toast{pointer-events:auto;display:flex;align-items:center;gap:.6rem;padding:.7rem 1rem;border-radius:var(--r-md);background:var(--ink);color:var(--bg);font-size:var(--t-sm);font-weight:600;box-shadow:var(--sh-3);animation:pop-in .2s var(--ease)}
  .skeleton{border-radius:var(--r-md);background:linear-gradient(90deg,var(--bg-2),var(--surface),var(--bg-2));background-size:200% 100%;animation:sk 1.3s linear infinite}
  @keyframes sk{to{background-position:-200% 0}}
  .pagination{display:flex;flex-wrap:wrap;gap:.35rem;justify-content:center;margin-block-start:1.5rem}
  .pagination a,.pagination span{display:grid;place-items:center;min-width:40px;height:40px;padding-inline:.7rem;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font-weight:700;font-size:var(--t-sm);text-decoration:none!important}
  .pagination [aria-current="page"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
  .pagination .disabled{opacity:.45}
}

@layer utilities{
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
  .skip{position:absolute;inset-inline-start:1rem;top:-100px;z-index:300;padding:.7rem 1rem;border-radius:var(--r-md);background:var(--brand);color:#fff;font-weight:700}
  .skip:focus{top:1rem}
  .muted{color:var(--ink-3)}
  .ltr{direction:ltr;unicode-bidi:isolate}
  .bidi,.svc-name,.scard__n,.orow__t{unicode-bidi:plaintext}
  .nowrap{white-space:nowrap}
  :lang(en) .num,:lang(ru) .num,:lang(zh) .num{font-variant-numeric:tabular-nums}
  .trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
  .stack{display:grid;gap:1rem}
  .row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
  .row--between{justify-content:space-between}
  .grow{flex:1;min-width:0}
  .mt-0{margin-block-start:0}.mt-1{margin-block-start:.5rem}.mt-2{margin-block-start:1rem}.mt-3{margin-block-start:1.5rem}
  .mb-0{margin-block-end:0}.mb-1{margin-block-end:.5rem}.mb-2{margin-block-end:1rem}
  .text-ok{color:var(--ok)}.text-bad{color:var(--bad)}.text-warn{color:var(--warn)}
  .w-full{width:100%}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  @view-transition{navigation:none}
}
@layer components{
  .assist{display:grid;gap:.75rem}
  .assist__form{display:flex;align-items:center;gap:.5rem;padding:.4rem .4rem .4rem .8rem;padding-inline-start:.8rem;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--sh-1)}
  .assist__form:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 16%,transparent)}
  .assist__icon{color:var(--brand);display:grid}
  .assist__input{flex:1;min-width:0;border:0;background:none;font:inherit;color:var(--ink);padding:.55rem 0;outline:0}
  .assist__chips{display:flex;flex-wrap:wrap;gap:.4rem}
  .chip-btn{border:1px dashed var(--line-2);background:none;border-radius:999px;padding:.3rem .75rem;font:inherit;font-size:var(--t-xs);color:var(--ink-2);cursor:pointer}
  .chip-btn:hover{border-color:var(--brand);color:var(--ink)}
  .assist__out:empty{display:none}
  .assist__reply{margin:0 0 .25rem;font-weight:600}
  .assist__pick{display:grid;grid-template-columns:1fr auto;gap:.2rem .75rem;align-items:center;padding:.8rem 1rem;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);color:inherit;text-decoration:none;margin-block-start:.5rem}
  .assist__pick:hover{border-color:var(--brand)}
  .assist__name{font-weight:700;unicode-bidi:plaintext}
  .assist__why{grid-column:1;font-size:var(--t-xs);color:var(--ink-3)}
  .assist__meta{grid-column:1;display:flex;flex-wrap:wrap;gap:.75rem;font-size:var(--t-sm)}
  .assist__pick .btn{grid-column:2;grid-row:1/span 3}
  @media (max-width:560px){.assist__form{flex-wrap:wrap}.assist__form .btn{width:100%}.assist__pick{grid-template-columns:1fr}.assist__pick .btn{grid-column:1;grid-row:auto}}
}
/* ── 1.3 Live chat widget (site + panel) ─────────────────────── */
@layer components{
  .cw{position:fixed;z-index:90;inset-block-end:max(1rem,env(safe-area-inset-bottom));inset-inline-end:1rem;font-family:var(--font)}
  .cw[data-in-panel]{inset-block-end:1.25rem}
  @media (max-width:760px){.cw[data-in-panel]{inset-block-end:calc(76px + env(safe-area-inset-bottom))}}
  .cw__fab{position:relative;display:inline-flex;align-items:center;gap:.5rem;height:54px;padding-inline:1rem 1.2rem;border:0;border-radius:999px;background:var(--brand);color:#fff;font:800 .95rem/1 var(--font);cursor:pointer;
    box-shadow:0 12px 30px -10px color-mix(in srgb,var(--brand) 75%,transparent),0 2px 6px rgb(0 0 0/.12);transition:transform .2s var(--ease),box-shadow .2s,background .15s}
  .cw__fab:hover{background:var(--brand-hover);transform:translateY(-2px)}
  .cw__fab:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 45%,transparent);outline-offset:3px}
  .cw__fab svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .cw__fab-x{display:none}
  .cw.is-open .cw__fab{padding:0;width:54px;justify-content:center}
  .cw.is-open .cw__fab-i,.cw.is-open .cw__fab-l{display:none}
  .cw.is-open .cw__fab-x{display:block}
  .cw__badge{position:absolute;inset-block-start:-4px;inset-inline-end:-4px;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--pop);color:#fff;font:800 .72rem/22px var(--font);text-align:center;border:2px solid var(--bg)}
  @media (max-width:560px){.cw__fab{padding:0;width:56px;justify-content:center}.cw__fab-l{display:none}}

  .cw__panel{position:absolute;inset-block-end:68px;inset-inline-end:0;width:min(390px,calc(100vw - 2rem));height:min(620px,calc(100dvh - 110px));display:flex;flex-direction:column;
    background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:22px;box-shadow:var(--sh-3);overflow:hidden;transform-origin:bottom var(--cw-origin,left);animation:cw-in .22s var(--ease)}
  [dir=ltr] .cw__panel{--cw-origin:right}
  @keyframes cw-in{from{opacity:0;transform:translateY(10px) scale(.97)}}
  @media (max-width:560px){
    .cw.is-open{inset:0}
    .cw.is-open .cw__fab{display:none}
    .cw__panel{position:fixed;inset:0;width:auto;height:100dvh;border-radius:0;border:0}
  }
  .cw__head{display:flex;align-items:center;gap:.75rem;padding:1rem 1.1rem;padding-inline-end:1rem;background:linear-gradient(135deg,var(--brand),color-mix(in srgb,var(--brand) 70%,#7B3FF2));color:#fff}
  @media (max-width:560px){.cw__head{padding-block-start:calc(1rem + env(safe-area-inset-top))}}
  .cw__head .cw__hbtn+.cw__hbtn{margin-inline-start:-.35rem}
  .cw__ava{position:relative;display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:rgb(255 255 255/.18);flex-shrink:0}
  .cw__ava svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .cw__ava::after{content:"";position:absolute;inset-block-end:-2px;inset-inline-end:-2px;width:12px;height:12px;border-radius:50%;background:#3DD68C;border:2px solid var(--brand)}
  .cw[data-online="0"] .cw__ava::after{background:#C3CAD6}
  .cw__ttl{flex:1;min-width:0;display:grid;gap:.15rem}
  .cw__ttl b{font-size:1rem}
  .cw__ttl span{font-size:.76rem;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cw__hbtn{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:10px;background:rgb(255 255 255/.14);color:#fff;cursor:pointer}
  .cw__hbtn:hover{background:rgb(255 255 255/.26)}
  .cw__hbtn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

  .cw__log{flex:1;overflow-y:auto;padding:1rem .9rem .5rem;display:flex;flex-direction:column;gap:.55rem;background:var(--bg);overscroll-behavior:contain;scroll-behavior:smooth}
  .cw__m{max-width:86%;display:grid;gap:.35rem}
  .cw__m--me{align-self:flex-end}
  .cw__m--sys{align-self:center;max-width:94%}
  .cw__who{font-size:.68rem;color:var(--ink-3);padding-inline:.4rem}
  .cw__b{padding:.65rem .85rem;border-radius:16px;background:var(--surface);border:1px solid var(--line);font-size:.88rem;line-height:1.85;white-space:pre-line;overflow-wrap:anywhere}
  .cw__m--me .cw__b{background:var(--brand);border-color:transparent;color:#fff;border-end-end-radius:5px}
  .cw__m--bot .cw__b,.cw__m--staff .cw__b{border-end-start-radius:5px}
  .cw__m--staff .cw__b{border-color:color-mix(in srgb,var(--ok) 35%,var(--line));background:color-mix(in srgb,var(--ok-bg) 55%,var(--surface))}
  .cw__m--sys .cw__b{background:none;border:1px dashed var(--line-2);color:var(--ink-2);font-size:.78rem;text-align:center;border-radius:12px}
  .cw__m.is-pending .cw__b{opacity:.6}
  .cw__acts{display:flex;flex-wrap:wrap;gap:.35rem}
  .cw__chip{display:inline-flex;align-items:center;gap:.3rem;padding:.42rem .75rem;border-radius:999px;border:1px solid color-mix(in srgb,var(--brand) 35%,var(--line));background:var(--surface);color:var(--brand);font:700 .76rem/1.3 var(--font);cursor:pointer;text-decoration:none;text-align:start}
  .cw__chip:hover{background:color-mix(in srgb,var(--brand) 8%,var(--surface))}
  .cw__chip--agent{background:var(--brand);color:#fff;border-color:transparent}
  .cw__chip--agent:hover{background:var(--brand-hover)}
  .cw__chip svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .cw__pick{display:grid;gap:.25rem;padding:.6rem .75rem;border:1px solid var(--line);border-radius:12px;background:var(--surface);font-size:.8rem;text-decoration:none;color:var(--ink)}
  .cw__pick:hover{border-color:var(--brand)}
  .cw__pick b{font-size:.82rem;line-height:1.6}
  .cw__pick small{color:var(--ink-3)}
  .cw__pick span{display:flex;justify-content:space-between;gap:.5rem;font-weight:800;color:var(--brand)}
  .cw__typing{align-self:flex-start;display:inline-flex;gap:4px;padding:.75rem .9rem;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
  .cw__typing i{width:7px;height:7px;border-radius:50%;background:var(--ink-3);animation:cw-dot 1s infinite}
  .cw__typing i:nth-child(2){animation-delay:.15s}.cw__typing i:nth-child(3){animation-delay:.3s}
  @keyframes cw-dot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
  @media (prefers-reduced-motion:reduce){.cw__panel,.cw__typing i{animation:none}.cw__log{scroll-behavior:auto}}

  .cw__form{display:grid;gap:.6rem;padding:1rem;margin:.25rem 0;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
  .cw__form b{font-size:.92rem}
  .cw__form p{font-size:.74rem;color:var(--ink-3);line-height:1.8}
  .cw__form label{display:grid;gap:.25rem;font-size:.76rem;font-weight:700;color:var(--ink-2)}
  .cw__form input,.cw__form textarea{width:100%;min-height:42px;padding:.55rem .75rem;border:1px solid var(--line-2);border-radius:10px;background:var(--surface-2);color:var(--ink);font:500 .88rem/1.6 var(--font)}
  .cw__form input:focus,.cw__form textarea:focus,.cw__in textarea:focus{outline:2px solid color-mix(in srgb,var(--brand) 40%,transparent);outline-offset:0;border-color:var(--brand)}
  .cw__form .cw__err{color:var(--bad);font-size:.74rem;font-weight:700}
  .cw__form .cw__row{display:flex;gap:.5rem}
  .cw__btn{flex:1;min-height:42px;border:0;border-radius:10px;background:var(--brand);color:#fff;font:800 .86rem/1 var(--font);cursor:pointer}
  .cw__btn--ghost{flex:0 0 auto;padding-inline:1rem;background:var(--bg-2);color:var(--ink-2)}
  .cw__hp{position:absolute!important;inset-inline-start:-9999px;width:1px;height:1px;opacity:0}

  .cw__in{display:flex;align-items:flex-end;gap:.5rem;padding:.7rem .8rem calc(.7rem + env(safe-area-inset-bottom));border-block-start:1px solid var(--line);background:var(--surface)}
  .cw__in textarea{flex:1;min-height:44px;max-height:130px;resize:none;padding:.6rem .8rem;border:1px solid var(--line-2);border-radius:14px;background:var(--surface-2);color:var(--ink);font:500 .9rem/1.6 var(--font)}
  .cw__send{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:14px;background:var(--brand);color:#fff;cursor:pointer;flex-shrink:0}
  .cw__send:disabled{opacity:.45;cursor:default}
  .cw__send svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  [dir=rtl] .cw__send svg{transform:scaleX(-1)}
  .cw__foot{padding:.35rem .8rem .55rem;font-size:.66rem;color:var(--ink-3);text-align:center;background:var(--surface)}
  .cw__rate{display:flex;justify-content:center;gap:.25rem}
  .cw__rate button{border:0;background:none;font-size:1.35rem;color:var(--line-2);cursor:pointer;padding:.1rem}
  .cw__rate button:hover,.cw__rate button.is-on{color:#F5B301}
}