/* Anycon Reels design system: tokens, theme, shared two-row header. Used by all clients. */
:root {
  color-scheme: light dark;
  --ui-bg: #eef3f4; --ui-surface: #ffffff; --ui-surface-2: #e3ebec;
  --ui-ink: #18343b; --ui-muted: #536d73; --ui-line: #b9c9cc;
  --ui-accent: #086b66; --ui-accent-strong: #065550; --ui-accent-soft: #d4efeb;
  --ui-changed: #885013; --ui-danger: #a33939; --ui-focus: #0b7770;
  --ui-on-accent: #ffffff;
  --ui-shadow: 0 14px 40px rgba(24,52,59,.09);
  --ui-shadow-sm: 0 4px 16px rgba(24,52,59,.06);
  --ui-glow: rgba(8,107,102,.16); --ui-glow-warm: rgba(136,80,19,.10);
  /* Radius scale, one source for every surface. xs: tags, code, small swatches. sm: buttons, fields, menu items.
     md: cards, tables, notices, menus, code blocks. lg: hero panels, dialogs, large sheets. pill: badges, chips, segmented tabs. */
  --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 20px; --r-pill: 999px;
  --ui-radius: var(--r-md);
  /* logo contour: a thin dark-grey line around the silhouette so yellow and white parts do not melt into a white background */
  --ui-logo-ink: #4b5c61;
  --ui-logo-contour: drop-shadow(.5px 0 0 var(--ui-logo-ink)) drop-shadow(-.5px 0 0 var(--ui-logo-ink)) drop-shadow(0 .5px 0 var(--ui-logo-ink)) drop-shadow(0 -.5px 0 var(--ui-logo-ink));
  /* Vertical rhythm of public sections. */
  --ui-section: clamp(32px, 3.6vw, 48px);
  --ui-font: "Segoe UI", Tahoma, Arial, sans-serif; --ui-display: Georgia, "Times New Roman", serif;
  --ui-mono: Consolas, "Cascadia Mono", "Courier New", monospace;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme:dark;
  --ui-bg:#101e24; --ui-surface:#192d34; --ui-surface-2:#203941; --ui-ink:#e5f1f2;
  --ui-muted:#abc0c4; --ui-line:#38535a; --ui-accent:#76d5c4; --ui-accent-strong:#9be3d7;
  --ui-accent-soft:#173f40; --ui-changed:#e1a052; --ui-danger:#ff9b9b; --ui-focus:#76d5c4; --ui-on-accent:#102428;
  --ui-shadow:0 18px 45px rgba(0,0,0,.25); --ui-shadow-sm:0 4px 16px rgba(0,0,0,.18);
  --ui-glow:rgba(118,213,196,.13); --ui-glow-warm:rgba(225,160,82,.08); --ui-logo-ink:rgba(196,222,226,.42);
} }
:root[data-theme="dark"] { color-scheme:dark; --ui-bg:#101e24; --ui-surface:#192d34; --ui-surface-2:#203941; --ui-ink:#e5f1f2; --ui-muted:#abc0c4; --ui-line:#38535a; --ui-accent:#76d5c4; --ui-accent-strong:#9be3d7; --ui-accent-soft:#173f40; --ui-changed:#e1a052; --ui-danger:#ff9b9b; --ui-focus:#76d5c4; --ui-on-accent:#102428; --ui-shadow:0 18px 45px rgba(0,0,0,.25); --ui-shadow-sm:0 4px 16px rgba(0,0,0,.18); --ui-glow:rgba(118,213,196,.13); --ui-glow-warm:rgba(225,160,82,.08); --ui-logo-ink:rgba(196,222,226,.42); }
:root[data-theme="light"] { color-scheme:light; }
:root[data-theme="custom"] { color-scheme:dark; --ui-on-accent:#102428; --ui-glow:color-mix(in srgb,var(--ui-accent) 14%,transparent); --ui-glow-warm:transparent; --ui-logo-ink:color-mix(in srgb,var(--ui-ink) 45%,transparent); }
@media (min-resolution:2dppx) { :root { --ui-logo-contour: drop-shadow(.5px 0 0 var(--ui-logo-ink)) drop-shadow(-.5px 0 0 var(--ui-logo-ink)) drop-shadow(0 .5px 0 var(--ui-logo-ink)) drop-shadow(0 -.5px 0 var(--ui-logo-ink)); } }
html { background:var(--ui-bg); }
body { accent-color:var(--ui-accent); }
body:not(.miniapp)::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.38; background-image:linear-gradient(var(--ui-line) 1px,transparent 1px),linear-gradient(90deg,var(--ui-line) 1px,transparent 1px); background-size:32px 32px; mask-image:linear-gradient(to bottom,#000,transparent 72%); }
/* Site, cabinet and docs: a quiet data field - a dotted coordinate grid with a soft glow at the top. The workspace keeps the line grid above. */
body.site::before, body[data-page="cabinet"]::before, body[data-page="apidocs"]::before { opacity:1; background-image:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--ui-line) 75%,transparent) 1px,transparent 1.5px),radial-gradient(60% 40% at 85% 0%,var(--ui-glow),transparent 70%); background-size:24px 24px,100% 100%; mask-image:linear-gradient(to bottom,#000 0,rgba(0,0,0,.55) 55%,transparent 100%); }
body:not([data-page="workspace"]) :where(a,button,input,select,textarea,summary):focus-visible { outline:3px solid var(--ui-focus)!important; outline-offset:3px; }

/* ---- theme switcher ---- */
.ui-theme{position:relative;display:inline-flex;align-items:center}.ui-theme-toggle{display:grid;place-items:center;width:42px;min-width:42px;height:42px;padding:6px;border:1px solid var(--ui-line);border-radius:var(--r-sm);background:var(--ui-surface);color:var(--ui-ink);cursor:pointer;transition:border-color .15s}.ui-theme-toggle:hover{border-color:var(--ui-accent)}.ui-theme-glyph{display:grid;grid-template-columns:1fr 1fr;gap:2px;width:22px;height:22px}.ui-theme-tile{display:block;border-radius:3px}.ui-theme-red{background:#e44343}.ui-theme-blue{background:#2d70dc}.ui-theme-orange{background:#ec9d34}.ui-theme-green{background:#37a667}.ui-theme-menu{position:absolute;z-index:80;top:calc(100% + 8px);right:0;width:216px;padding:6px;border:1px solid var(--ui-line);border-radius:var(--r-md);background:var(--ui-surface);box-shadow:var(--ui-shadow);color:var(--ui-ink)}.ui-theme-menu[hidden]{display:none}.ui-theme-title{margin:2px 8px 5px;color:var(--ui-muted);font:700 11px var(--ui-font);letter-spacing:.06em;text-transform:uppercase}.ui-theme-menu>button{display:grid;grid-template-columns:22px 1fr;align-items:center;width:100%;min-height:38px;padding:5px 8px;border:0;border-radius:calc(var(--r-md) - 6px);background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}.ui-theme-menu>button:hover,.ui-theme-menu>button:focus{background:var(--ui-surface-2)}.ui-theme-menu>button:focus-visible{outline-offset:-2px!important;outline-width:2px!important}.ui-theme-check{color:var(--ui-accent);font-weight:900}.ui-theme-palette{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:5px;padding-top:7px;border-top:1px solid var(--ui-line)}.ui-theme-palette label{display:grid;gap:3px;justify-items:center;color:var(--ui-muted);font:10px var(--ui-font)}.ui-theme-palette input{width:44px;height:28px;padding:1px;border:1px solid var(--ui-line);border-radius:var(--r-xs);background:var(--ui-surface);cursor:pointer}

/* ---- shared header: row 1 brand + account + theme, row 2 section navigation ---- */
.s-wrap{width:100%;max-width:1180px;margin:0 auto;padding-inline:clamp(16px,4vw,40px)}
.s-top{position:sticky;top:0;z-index:20;font-family:var(--ui-font);font-size:16px;line-height:1.4;background:color-mix(in srgb,var(--ui-surface) 90%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.s-top *,.s-top *::before,.s-top *::after{box-sizing:border-box}
.s-row{border-bottom:1px solid var(--ui-line)}
.s-top-in{display:flex;align-items:center;gap:16px;min-height:86px}
.s-brand{display:inline-flex;align-items:center;gap:12px;margin-right:auto;color:var(--ui-ink)!important;text-decoration:none!important}
/* the chameleon itself gets a thin contour along its silhouette (transparent PNG + four hard drop-shadows), no frame */
.s-logo,.s-top .brand-logo{flex:none;display:block;width:68px;height:68px;padding:0;border:0;border-radius:0;background:none;object-fit:contain;filter:var(--ui-logo-contour)}
.s-word{font:700 4rem/.86 var(--ui-display);letter-spacing:-.045em;padding-bottom:.05em}
.brand-copy{display:flex;flex-direction:column;justify-content:center;gap:6px;min-width:0}
.brand-caption{display:block;font:500 12px/1.2 var(--ui-font);letter-spacing:0;white-space:nowrap}
@media(max-width:480px){.brand-copy{gap:4px}.brand-caption{font-size:9px}}
.s-bar{display:flex;align-items:center;gap:10px}
.s-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.s-actions[hidden]{display:none}
.s-account a{display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:0 12px;border-radius:var(--r-sm);color:var(--ui-ink)!important;text-decoration:none;font-weight:600;font-size:.95rem;transition:background-color .15s,color .15s}
.s-account a:hover{background:var(--ui-surface-2)}
.s-account a[aria-current=page]{background:var(--ui-accent-soft);color:var(--ui-accent-strong)!important}
.s-ico{flex:none;width:18px;height:18px;fill:none;stroke:var(--ui-accent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.s-account .s-acc-main{border:1px solid var(--ui-line);background:var(--ui-surface)}
.s-account .s-acc-main:hover{border-color:var(--ui-accent);background:var(--ui-surface)}
.s-theme{display:flex;align-items:center;padding-left:10px;border-left:1px solid var(--ui-line)}
.s-sub{border-bottom:1px solid var(--ui-line);background:color-mix(in srgb,var(--ui-surface-2) 50%,transparent)}
.s-sub:has(>[hidden]){display:none}
.s-nav{display:flex;align-items:center;gap:2px;min-height:46px;padding-block:6px;overflow-x:auto;scrollbar-width:none}
.s-nav :is(a,button):focus-visible{outline-offset:1px!important}
.s-nav::-webkit-scrollbar{display:none}
.s-nav a,.s-nav button{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 13px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--ui-muted)!important;font:600 .9rem/1 var(--ui-font);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .15s,color .15s}
.s-nav a:first-child{margin-left:-13px}
.s-nav a:hover,.s-nav button:hover{background:color-mix(in srgb,var(--ui-surface) 85%,transparent);color:var(--ui-ink)!important}
.s-nav a[aria-current=page]{background:var(--ui-surface);color:var(--ui-accent-strong)!important;box-shadow:0 0 0 1px var(--ui-line) inset}
.s-nav-sep{flex:none;width:1px;height:18px;margin:0 8px;background:var(--ui-line)}
.s-nav-end{margin-left:auto!important}
.s-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:0 16px;border:1px solid transparent;border-radius:var(--r-sm);font:700 .95rem/1.1 var(--ui-font);text-decoration:none!important;cursor:pointer;transition:background-color .15s,border-color .15s}
.s-btn-main{background:var(--ui-accent);color:var(--ui-on-accent)!important}.s-btn-main:hover{background:var(--ui-accent-strong)}
.s-btn-line{border-color:var(--ui-line);background:var(--ui-surface);color:var(--ui-ink)!important}.s-btn-line:hover{border-color:var(--ui-accent)}
.s-btn-ghost{color:var(--ui-ink)!important}.s-btn-ghost:hover{background:var(--ui-surface-2)}
.s-btn-lg{min-height:50px;padding-inline:22px;font-size:1rem}
.skip-link{position:absolute;left:8px;top:-80px;z-index:100;padding:10px 14px;border-radius:var(--r-sm);background:var(--ui-surface);color:var(--ui-ink)!important}.skip-link:focus{top:8px}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (max-width:900px){ .s-top{position:relative} .s-top-in{min-height:64px;gap:10px} .s-logo,.s-top .brand-logo{width:50px;height:50px} .s-word{font-size:2.9rem} .s-account .s-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .s-account a{padding:0;width:42px;justify-content:center} .s-theme{padding-left:8px} .s-nav-end{margin-left:0!important} .s-nav a:first-child{margin-left:-6px} }
@media (max-width:480px){ .s-top-in{gap:6px} .s-brand{gap:7px} .s-logo,.s-top .brand-logo{width:40px;height:40px} .s-word{font-size:2.05rem} .s-actions{gap:2px;flex-wrap:nowrap} .s-actions .s-btn{min-height:40px;padding:0 10px;font-size:.88rem} .s-account a{width:34px;min-height:40px} .s-bar{gap:4px} .s-theme{border-left:0;padding-left:0} .ui-theme-toggle{width:40px;min-width:40px;height:40px} }

/* ---- cabinet and API docs on the shared tokens ---- */
body[data-page="cabinet"], body[data-page="apidocs"] { --bg:var(--ui-bg); --surface:var(--ui-surface); --surface-2:var(--ui-surface-2); --text:var(--ui-ink); --text-muted:var(--ui-muted); --muted:var(--ui-muted); --border:var(--ui-line); --link:var(--ui-accent-strong); --accent:var(--ui-accent); --accent-hover:var(--ui-accent-strong); --on-accent:var(--ui-on-accent); --tint-blue:var(--ui-accent-soft); --tint-green:var(--ui-accent-soft); --tint-purple:var(--ui-surface-2); --danger:var(--ui-danger); --radius:var(--r-md); margin:0; background-color:var(--ui-bg); color:var(--ui-ink); font-family:var(--ui-font); }
body[data-page="cabinet"] .container, body[data-page="apidocs"] .container { max-width:1180px; padding-top:26px; }
body[data-page="cabinet"] h1, body[data-page="cabinet"] h2, body[data-page="apidocs"] h1, body[data-page="apidocs"] h2 { color:var(--ui-ink); font-family:var(--ui-display); letter-spacing:-.02em; }
body[data-page="apidocs"] h1 { font-size:clamp(1.9rem,3.2vw,2.6rem); }
body[data-page="apidocs"] .eyebrow { margin:0 0 8px; color:var(--ui-accent-strong); font:700 12px/1.3 var(--ui-mono); letter-spacing:.14em; text-transform:uppercase; }
body[data-page="cabinet"] .card, body[data-page="cabinet"] .notice, body[data-page="apidocs"] .card { background:var(--ui-surface); border-color:var(--ui-line); border-radius:var(--r-md); box-shadow:var(--ui-shadow-sm); }
body[data-page="apidocs"] nav.card { background:color-mix(in srgb,var(--ui-accent-soft) 40%,var(--ui-surface)); }
body[data-page="apidocs"] nav.card ol { columns:2; column-gap:32px; margin:0; }
body[data-page="cabinet"] input, body[data-page="cabinet"] select, body[data-page="cabinet"] textarea { background:var(--ui-surface); color:var(--ui-ink); border-color:var(--ui-line); border-radius:var(--r-sm); }
body[data-page="cabinet"] .btn, body[data-page="apidocs"] .btn { border-radius:var(--r-sm); }
body[data-page="cabinet"] .btn-primary { background:var(--ui-accent); border-color:var(--ui-accent); color:var(--ui-on-accent); }
body[data-page="cabinet"] .btn-secondary { border-color:var(--ui-line); }
body[data-page="cabinet"] .badge { border-radius:var(--r-pill); }
body[data-page="cabinet"] .code, body[data-page="cabinet"] .code-inline, body[data-page="apidocs"] code { font-family:var(--ui-mono); }
body[data-page="cabinet"] .code-block, body[data-page="apidocs"] .code-block { border-radius:var(--r-sm); background:var(--ui-surface-2); border-color:var(--ui-line); }
body[data-page="cabinet"] .view-narrow { position:relative; margin-inline:auto; padding:clamp(22px,4vw,36px); background:var(--ui-surface); border:1px solid var(--ui-line); border-radius:var(--r-lg); box-shadow:var(--ui-shadow); }
body[data-page="cabinet"] .view-narrow::before { content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; background:linear-gradient(90deg,var(--ui-accent),color-mix(in srgb,var(--ui-accent) 35%,var(--ui-changed))); mask-image:linear-gradient(#000 0 4px,transparent 4px); }
body[data-page="cabinet"] h1[tabindex="-1"]:focus { outline:none!important; }
body[data-page="cabinet"] .view > .page-head { border-bottom:1px solid var(--ui-line); padding-bottom:14px; }
body[data-page="cabinet"] .view { max-width:1100px; margin-inline:auto; }
body[data-page="cabinet"] .view.view-narrow { max-width:600px; }
body[data-page="cabinet"] table, body[data-page="apidocs"] table { background:var(--ui-surface); border:1px solid var(--ui-line); border-collapse:separate; border-spacing:0; border-radius:var(--r-md); overflow:hidden; }
body[data-page="cabinet"] th, body[data-page="apidocs"] th { font-family:var(--ui-mono); font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; background:var(--ui-surface-2); }
body[data-page="cabinet"] .dialog { border-radius:var(--r-lg); border-color:var(--ui-line); background:var(--ui-surface); box-shadow:var(--ui-shadow); }
body[data-page="cabinet"] .site-foot { max-width:1100px; }
@media (max-width:600px) { .ui-theme-menu { position:fixed; top:64px; left:8px; right:8px; width:auto; max-width:none; } body[data-page="apidocs"] nav.card ol { columns:1; } }
@media (max-width:800px) { body[data-page="cabinet"] .container { width:100%; max-width:100%; padding-inline:12px; } body[data-page="cabinet"] .view, body[data-page="cabinet"] .card, body[data-page="cabinet"] .form, body[data-page="cabinet"] .field { min-width:0; max-width:100%; } body[data-page="cabinet"] input, body[data-page="cabinet"] select, body[data-page="cabinet"] textarea { min-width:0; max-width:100%; } body[data-page="cabinet"] table.responsive { display:block; width:100%; max-width:100%; overflow-x:auto; border:0; background:transparent; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }
body[data-page="cabinet"],body[data-page="apidocs"]{--info:var(--ui-accent-strong);--tint-info:var(--ui-accent-soft)}
body[data-page="cabinet"] input[type="url"]{display:block;width:100%;min-height:44px;padding:9px 11px;border:1px solid var(--ui-line);font:inherit}
body[data-page="cabinet"] .badge-info,body[data-page="cabinet"] .notice-info{color:var(--ui-accent-strong);background:var(--ui-accent-soft);border-color:var(--ui-accent)}
/* Card artwork is provided by the shared v3 card system. */
/* ---- nested radii: an inner box = outer radius minus the inset, never below --r-sm; one layer for fill and stroke ---- */
body[data-page="cabinet"] :is(.card,.view-narrow,.dialog) :is(.dropzone,.mode-card,.code,.code-block,.notice,table,.file-preview,.kpi,.integrations li,.qr-box img), body[data-page="apidocs"] .card :is(table,.code-block) { border-radius:var(--r-sm); }
body[data-page="cabinet"] .notice, body[data-page="apidocs"] .notice { border-left-width:1px; box-shadow:inset 4px 0 0 var(--notice-edge,var(--ui-line)); }
body[data-page="cabinet"] .notice-danger { --notice-edge:var(--danger); } body[data-page="cabinet"] .notice-warning { --notice-edge:var(--warning); } body[data-page="cabinet"] .notice-info { --notice-edge:var(--ui-accent); } body[data-page="cabinet"] .notice-success { --notice-edge:var(--success); }
body[data-page="cabinet"] .mode-card { border-width:1px; } body[data-page="cabinet"] .mode-card:has(input:checked) { box-shadow:0 0 0 1px var(--ui-accent) inset; }
body[data-page="cabinet"] .mode-card:has(input:focus-visible) { outline:3px solid var(--ui-focus); outline-offset:3px; }
body[data-page="cabinet"] .dropzone { border-width:1.5px; }
body[data-page="cabinet"] progress { border-radius:var(--r-pill); overflow:hidden; }
body[data-page="cabinet"] progress::-webkit-progress-bar { border-radius:var(--r-pill); background:var(--ui-surface-2); }
body[data-page="cabinet"] progress::-webkit-progress-value { border-radius:var(--r-pill); background:var(--ui-accent); }
body[data-page="cabinet"] .btn:disabled, body[data-page="cabinet"] .btn[disabled] { opacity:.55; cursor:not-allowed; }
body[data-page="cabinet"] .dialog::backdrop { background:rgba(10,24,28,.45); }
body[data-page="cabinet"] .dialog-body { border-radius:inherit; }
body[data-page="apidocs"] :not(pre) > code { overflow-wrap:anywhere; }
body[data-page="apidocs"] pre { max-width:100%; overflow-x:auto; }
body[data-page="apidocs"] .card { min-width:0; max-width:100%; }
.api-payment-notice{box-sizing:border-box;margin:16px 0 20px;padding:20px;border:1px solid color-mix(in srgb,var(--ui-accent) 55%,var(--ui-line));border-radius:var(--r-md);background:color-mix(in srgb,var(--ui-accent-soft) 70%,var(--ui-surface));color:var(--ui-ink);box-shadow:inset 4px 0 0 var(--ui-accent),var(--ui-shadow-sm)}
.api-payment-notice :is(h2,h3){margin:0 0 12px;color:var(--ui-ink);font-family:var(--ui-display);font-size:clamp(1.25rem,2vw,1.55rem);letter-spacing:-.02em}.api-payment-notice p{margin:8px 0;font-size:1rem;line-height:1.55}.api-payment-notice p:last-child{margin-bottom:0}.api-payment-notice strong{color:var(--ui-accent-strong)}
@media(max-width:600px){.api-payment-notice{padding:16px;margin-block:14px 18px}}
/* native colour inputs: the swatch inside follows the field radius instead of a square fill */
.ui-theme-palette input::-webkit-color-swatch-wrapper{padding:2px}.ui-theme-palette input::-webkit-color-swatch{border:0;border-radius:calc(var(--r-xs) - 1px)}.ui-theme-palette input::-moz-color-swatch{border:0;border-radius:calc(var(--r-xs) - 1px)}
/* order timeline: rounded progress segments instead of square top borders */
body[data-page="cabinet"] .timeline li { border-top:0; padding-top:18px; }
body[data-page="cabinet"] .timeline li::after { content:""; position:absolute; left:0; right:0; top:0; height:6px; border-radius:var(--r-pill); background:var(--ui-line); }
body[data-page="cabinet"] .timeline li[data-state="done"]::after { background:var(--success); }
body[data-page="cabinet"] .timeline li[data-state="current"]::after { background:var(--ui-accent); }
/* notices: readable text in both themes; the tint and the edge are one layer of the same element */
body[data-page="cabinet"] .notice-danger { color:var(--ui-ink); background:color-mix(in srgb,var(--ui-danger) 11%,var(--ui-surface)); border-color:color-mix(in srgb,var(--ui-danger) 45%,var(--ui-line)); }
body[data-page="cabinet"] .notice-danger::before { color:var(--ui-danger); }
body[data-page="cabinet"] .notice-warning { color:var(--ui-ink); background:color-mix(in srgb,var(--ui-changed) 12%,var(--ui-surface)); border-color:color-mix(in srgb,var(--ui-changed) 45%,var(--ui-line)); --notice-edge:var(--ui-changed); }
body[data-page="cabinet"] .notice-success { color:var(--ui-ink); background:var(--ui-accent-soft); border-color:color-mix(in srgb,var(--ui-accent) 45%,var(--ui-line)); --notice-edge:var(--ui-accent); }
body[data-page="cabinet"] .field-error { color:var(--ui-danger); }
body[data-page="cabinet"] input[aria-invalid="true"] { border-color:var(--ui-danger); }
body[data-page="cabinet"] .skeleton { background:linear-gradient(90deg,var(--ui-surface-2) 25%,var(--ui-surface) 50%,var(--ui-surface-2) 75%); background-size:200% 100%; }

/* Privacy surfaces use one set of dimensions in the browser and Mini App. */
.consent-card { box-sizing:border-box; background:var(--ui-surface); color:var(--ui-ink); font:16px/1.5 var(--ui-font); padding:24px; border:1px solid var(--ui-line); border-radius:var(--r-md); }
.consent-card h1,.consent-card h2 { font-family:var(--ui-display); font-size:26px; line-height:1.2; margin:0 0 16px; }
.consent-card p { margin:0 0 16px; }
.consent-card label { display:flex; gap:12px; align-items:center; margin:16px 0; flex-wrap:wrap; }
.consent-card input[type=checkbox] { width:20px; height:20px; flex:none; accent-color:var(--ui-accent); }
.consent-card a { color:var(--ui-accent-strong); }
.consent-card .btn { font:600 16px/1.3 var(--ui-font); min-height:44px; padding:12px 18px; border:1px solid var(--ui-line); border-radius:var(--r-sm); background:var(--ui-accent); color:var(--ui-on-accent); cursor:pointer; margin:8px 8px 8px 0; }
.consent-card .btn:disabled { opacity:.45; cursor:default; }
.consent-dialog { width:min(560px,calc(100% - 32px)); max-height:90dvh; overflow:auto; }
.consent-dialog::backdrop { background:rgb(10 25 30 / .65); }
.cookie-banner { position:fixed; z-index:1000; bottom:16px; right:16px; width:min(520px,calc(100% - 32px)); max-height:75dvh; overflow:auto; box-shadow:0 8px 40px rgb(0 0 0 / .2); }
.cookie-settings { position:fixed; bottom:4px; left:8px; z-index:100; border:1px solid var(--ui-line); border-radius:var(--r-sm); background:var(--ui-surface); color:var(--ui-ink); padding:6px 10px; }
.account-danger { margin-top:40px; border-color:var(--ui-danger); }
.account-danger[hidden] { display:none; }
body[data-page=miniapp] { --bg:var(--ui-bg); --fg:var(--ui-ink); --sf:var(--ui-surface); --paper:var(--ui-bg); --card:var(--ui-surface); --ink:var(--ui-ink); --line:var(--ui-line); --signal:var(--ui-accent); --accent:var(--ui-accent); --signal-ink:var(--ui-on-accent); --body:var(--ui-font); --display:var(--ui-display); --mono:var(--ui-mono); background:var(--ui-bg); font-family:var(--ui-font); }
body[data-page=miniapp] .app { max-width:1180px; padding:24px 16px 96px; }
body[data-page=miniapp] .card { border-radius:var(--r-md); background:var(--ui-surface); border-color:var(--ui-line); }
body[data-page=miniapp] .btn { border-radius:var(--r-sm); font-family:var(--ui-font); min-height:44px; }
@media(max-width:480px) { .consent-card { padding:20px; } .consent-card h1,.consent-card h2 { font-size:24px; } }
.consent-card label,.consent-card label.check { display:grid; grid-template-columns:20px minmax(0,1fr); align-items:start; font:inherit; gap:12px; }
.consent-card label span,.consent-card label a { font:inherit; }
.consent-card h1,.consent-card h2 { text-transform:none; letter-spacing:normal; }
.account-danger label { display:block; }

/* Account surfaces share typography, rows and controls across both clients. */
body.miniapp { --bg:var(--ui-bg); --fg:var(--ui-ink); --sf:var(--ui-surface); --hint:var(--ui-muted); --line:var(--ui-line); --accent:var(--ui-accent); --body:var(--ui-font); --display:var(--ui-display); --mono:var(--ui-mono); background-image:none; }
body.miniapp::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background-image:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--ui-line) 75%,transparent) 1px,transparent 1.5px),radial-gradient(60% 40% at 85% 0%,var(--ui-glow),transparent 70%); background-size:24px 24px,100% 100%; mask-image:linear-gradient(to bottom,#000 0,rgba(0,0,0,.55) 55%,transparent 100%); }
:is(body.miniapp,body[data-page="cabinet"]) .account-data { margin:0; font:15px/1.5 var(--ui-font); }
:is(body.miniapp,body[data-page="cabinet"]) .account-row { display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--ui-line); }
:is(body.miniapp,body[data-page="cabinet"]) .account-row dt { color:var(--ui-muted); }
:is(body.miniapp,body[data-page="cabinet"]) .account-row dd { margin:0; text-align:right; font-family:var(--ui-mono); }
:is(body.miniapp,body[data-page="cabinet"]) .card { padding:20px; background:var(--ui-surface); border:1px solid var(--ui-line); border-radius:var(--r-md); box-shadow:var(--ui-shadow-sm); }
:is(body.miniapp,body[data-page="cabinet"]) .card h2 { margin:0 0 16px; font:700 22px/1.25 var(--ui-display); letter-spacing:-.02em; text-transform:none; }
:is(body.miniapp,body[data-page="cabinet"]) .btn { min-height:42px; padding:10px 16px; border-radius:var(--r-sm); font:700 15px/1.2 var(--ui-font); letter-spacing:0; text-transform:none; }
:is(body.miniapp,body[data-page="cabinet"]) .card h2::after { content:none; }
body[data-page="cabinet"] #view-profile { padding:0; background:none; border:0; box-shadow:none; }
body[data-page="cabinet"] #view-profile::before, body[data-page="cabinet"] #view-profile::after { content:none; }
:is(body.miniapp,body[data-page="cabinet"]) .card { margin-bottom:12px; }
:is(body.miniapp,body[data-page="cabinet"]) .card .hint { margin:0 0 10px; color:var(--ui-muted); font:13px/1.5 var(--ui-font); }
@media(max-width:480px) { body[data-page="cabinet"] .container { padding-inline:16px; } }

/* One mobile application surface. Duplicate cabinet shortcuts remain in its section navigation. */
:is(body.miniapp,body[data-page="cabinet"]) :is(.btn.primary,.btn-primary) { background:var(--ui-accent); border-color:var(--ui-accent); color:var(--ui-on-accent); }
@media(max-width:480px) {
  :root { --ui-mobile-heading:36px; --ui-mobile-header:76px; --ui-mobile-control:44px; }
  :is(body.miniapp,body[data-page="cabinet"]) h1 { font:700 var(--ui-mobile-heading)/1.1 var(--ui-display); letter-spacing:-.02em; }
  body.miniapp .top, body[data-page="cabinet"] .s-top-in { min-height:var(--ui-mobile-header); padding-block:12px 10px; flex-wrap:nowrap; gap:6px; box-sizing:border-box; }
  body[data-page="cabinet"] .s-top, body.miniapp .top { background:color-mix(in srgb,var(--ui-bg) 92%,transparent); }
  body[data-page="cabinet"] .s-row { border-bottom:0; }
  body[data-page="cabinet"] .s-account a:not([href="/profile"]) { display:none; }
  body[data-page="cabinet"] .s-theme { order:-1; }
  body[data-page="cabinet"] .s-bar, body.miniapp .top-tools { gap:6px; }
  body[data-page="cabinet"] :is(.s-account a[href="/profile"],.ui-theme-toggle), body.miniapp :is(.profile-entry,.theme-toggle) {
    display:grid; place-items:center; width:var(--ui-mobile-control); min-width:var(--ui-mobile-control); height:var(--ui-mobile-control); min-height:var(--ui-mobile-control); padding:8px;
    background:var(--ui-surface); border:1px solid var(--ui-line); border-radius:var(--r-sm); color:var(--ui-ink)!important;
  }
}

/* ANYCON REELS-PLAIN: shared app components, including the Telegram client. */
:root { --ui-control-height:44px; --ui-card-padding:16px; --ui-gap:16px; --ui-title-size:28px; }
body[data-page="miniapp"] { font:16px/1.5 var(--ui-font); background:var(--ui-bg); color:var(--ui-ink); }
body[data-page="miniapp"]::before { opacity:1; background-image:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--ui-line) 75%,transparent) 1px,transparent 1.6px),radial-gradient(60% 40% at 85% 0%,var(--ui-glow),transparent 70%); background-size:24px 24px,100% 100%; }
body[data-page="miniapp"] .app { max-width:1200px; padding:0 16px calc(var(--dock-h) + var(--safe-b) + 28px); }
body[data-page="miniapp"] .s-top { margin:0 -16px 24px; }
body[data-page="miniapp"] .s-logo { filter:var(--ui-logo-contour); }
body[data-page="miniapp"] .hero { display:block; }
body[data-page="miniapp"] .hero>.logo { display:none; }
body[data-page="miniapp"] h2 { font:700 18px/1.3 var(--ui-font); letter-spacing:normal; text-transform:none; color:var(--ui-ink); }
body[data-page="miniapp"] h2::after { display:none; }
body[data-page="miniapp"] .theme-toggle { width:42px; height:42px; }
body:is([data-page="cabinet"],[data-page="miniapp"]) h1 { font:700 var(--ui-title-size)/1.25 var(--ui-font); letter-spacing:-.02em; margin:0 0 12px; }
body:is([data-page="cabinet"],[data-page="miniapp"]) .card { padding:var(--ui-card-padding); border:1px solid var(--ui-line); border-radius:var(--r-md); background:var(--ui-surface); margin-bottom:var(--ui-gap); box-shadow:var(--ui-shadow-sm); }
body:is([data-page="cabinet"],[data-page="miniapp"]) .btn { min-height:var(--ui-control-height); padding:0 18px; border:1px solid var(--ui-line); border-radius:var(--r-sm); font:600 16px/1.3 var(--ui-font); letter-spacing:normal; color:var(--ui-ink); background:var(--ui-surface); }
body:is([data-page="cabinet"],[data-page="miniapp"]) :is(.btn.primary,.btn-primary) { background:var(--ui-accent); border-color:var(--ui-accent); color:var(--ui-on-accent); }
body:is([data-page="cabinet"],[data-page="miniapp"]) :is(.hint,.lead) { color:var(--ui-muted); }
body:is([data-page="cabinet"],[data-page="miniapp"]) .hint { font:14px/1.5 var(--ui-font); }
body[data-page="miniapp"] .file { gap:var(--ui-gap); }
body[data-page="miniapp"] .crop::before { display:none; }
@media(max-width:600px) { :root { --ui-title-size:24px; } body[data-page="miniapp"] .lead { max-width:none; } }

body:is([data-page="cabinet"],[data-page="miniapp"]) h2 { font:700 20px/1.3 var(--ui-font); margin:0 0 16px; letter-spacing:normal; }
body:is([data-page="cabinet"],[data-page="miniapp"]) .plan-facts>div { display:flex; justify-content:space-between; gap:16px; border-bottom:1px solid var(--ui-line); padding:8px 0; }
body[data-page="miniapp"] .plan-facts { margin:16px 0 0; } body[data-page="miniapp"] .plan-facts dt { color:var(--ui-muted); } body[data-page="miniapp"] .plan-facts dd { margin:0; text-align:right; }
body[data-page="miniapp"] .plan-current-name { font:400 24px/1.4 var(--ui-font); margin:0 0 16px; }
body[data-page="miniapp"] progress { display:block; width:100%; height:14px; margin:0 0 4px; border:0; border-radius:var(--r-pill); overflow:hidden; }
body[data-page="miniapp"] progress::-webkit-progress-bar { background:var(--ui-surface-2); } body[data-page="miniapp"] progress::-webkit-progress-value { background:var(--ui-accent); border-radius:var(--r-pill); }
body[data-page="miniapp"] .plan-name { font:700 20px/1.3 var(--ui-font); text-transform:none; }
body[data-page="miniapp"] .plan-card { margin-top:16px; }
body[data-page="miniapp"] .drop .big { font:700 18px/1.3 var(--ui-font); }
body[data-page="miniapp"] .s-nav button:first-child { margin-left:-13px; }
.s-nav button[aria-current=page] { background:var(--ui-surface); color:var(--ui-accent-strong)!important; box-shadow:0 0 0 1px var(--ui-line) inset; }
@media(max-width:800px) { body[data-page="cabinet"] .container { padding-inline:16px; } }

@media(max-width:380px){.s-top-in{gap:6px}.s-brand{gap:6px}.s-word{font-size:30px}.s-logo{width:32px;height:32px}.s-account a{padding-inline:5px}.s-theme{padding-left:6px}.s-bar{gap:6px}}

body[data-page="miniapp"] .page-head { display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid var(--ui-line); padding-bottom:14px; margin-bottom:0; }
body[data-page="miniapp"] .page-head h1 { margin:0; }
body[data-page="miniapp"] .plan-facts dd { font-weight:600; }
body[data-page="miniapp"] .plan-facts { margin-top:12px; }

@media(max-width:380px){.s-top .s-account{gap:4px}.s-top .s-account a{min-width:26px;width:26px;padding-inline:0;justify-content:center}}

/* Upload and tariff screens use the same component rules in both clients. */
body:is([data-page="cabinet"],[data-page="miniapp"]) :is(#view-new>.page-head,.ui-upload-head) { display:block; border-bottom:1px solid var(--ui-line); padding-bottom:14px; margin:0; }
body:is([data-page="cabinet"],[data-page="miniapp"]) :is(#view-new>.page-head,.ui-upload-head)>p { margin:16px 0; font:16px/1.5 var(--ui-font); color:var(--ui-ink); }
body:is([data-page="cabinet"],[data-page="miniapp"]) .step-indicator { font-weight:600!important; color:var(--ui-muted)!important; }
body:is([data-page="cabinet"],[data-page="miniapp"]) .dropzone { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:20px; min-height:140px; border:1.5px dashed var(--ui-muted); border-radius:var(--r-sm); background:var(--ui-bg); color:var(--ui-ink); box-shadow:none; }
body:is([data-page="cabinet"],[data-page="miniapp"]) .dropzone-title { margin:0; font:700 18px/1.3 var(--ui-font); }
body:is([data-page="cabinet"],[data-page="miniapp"]) .dropzone p { margin:8px 0; font:16px/1.5 var(--ui-font); }
body:is([data-page="cabinet"],[data-page="miniapp"]) .card>.hint { margin:12px 0 0; }
body[data-page="miniapp"] .muted { color:var(--ui-muted); }
body[data-page="miniapp"] .card.crop::after { width:auto; height:auto; border:0; inset:0; border-radius:inherit; }
body[data-page="miniapp"] .link { font:inherit; line-height:inherit; padding:0; }
body[data-page="miniapp"] .plan-now progress+.hint { margin-top:4px; }

/* The dense workspace keeps its file grid, but shares the application header. */
:root { --ui-status-font:700 11px/1.3 var(--ui-font); }
body:is([data-page="cabinet"],[data-page="miniapp"],[data-page="workspace"]) :is(.chip,.badge,.lock-pill) { font:var(--ui-status-font); letter-spacing:normal; text-transform:none; border-radius:var(--r-pill); }
body[data-page="miniapp"] .order { border-radius:var(--r-sm); background:var(--ui-surface); border-color:var(--ui-line); color:var(--ui-ink); }
body[data-page="miniapp"] .order .t { font:600 14px/1.4 var(--ui-font); }
body[data-page="miniapp"] .order .s { font:12px/1.4 var(--ui-font); }
body[data-page="workspace"] .titlebar { min-height:86px; padding:0 16px; gap:16px; background:var(--ui-surface); }
body[data-page="workspace"] .ws-brand { gap:7px; padding:0; }
body[data-page="workspace"] .ws-logo { width:68px; height:68px; }
body[data-page="workspace"] .ws-brand strong { font:700 4rem/.86 var(--ui-display); letter-spacing:-.045em; }
body[data-page="workspace"] .title-tools { gap:10px; }
body[data-page="workspace"] .ws-account :is(a,button) { min-height:42px; height:42px; font:600 15px/1.4 var(--ui-font); border-radius:var(--r-sm); }
body[data-page="workspace"] .title-tools .ui-theme-toggle { width:42px; min-width:42px; height:42px; min-height:42px; }
@media(max-width:900px) {
  body[data-page="workspace"] .titlebar { min-height:64px; gap:10px; }
  body[data-page="workspace"] .ws-logo { width:50px; height:50px; }
  body[data-page="workspace"] .ws-brand strong { font-size:2.9rem; }
}
@media(max-width:480px) {
  .s-top-in:has([data-public-guest]:not([hidden])) { flex-wrap:wrap; }
  body[data-page="workspace"] .titlebar { gap:6px; flex-wrap:nowrap; }
  body[data-page="workspace"] .ws-logo { width:40px; height:40px; }
  body[data-page="workspace"] .ws-brand strong { font-size:2.05rem; }
  body[data-page="workspace"] .title-tools { gap:0; }
  body[data-page="workspace"] .ws-account[data-public-auth] a { width:32px; min-width:32px; min-height:40px; padding:0; justify-content:center; }
  body[data-page="workspace"] .title-tools .ui-theme { padding-left:0; border:0; }
  body[data-page="workspace"] .titlebar:has([data-public-guest]:not([hidden])) .title-tools { margin-bottom:10px; }
  body[data-page="workspace"] .titlebar:has([data-public-guest]:not([hidden])) { flex-wrap:wrap; min-height:112px; }
  body[data-page="workspace"] #workspace-logout { display:none; } /* Also available in Profile. */
  body[data-page="workspace"] .title-tools .ui-theme-toggle { width:40px; min-width:40px; height:40px; min-height:40px; }
}

/* ANYCON REELS-HDR2: one shared, ink-trimmed brand across all web surfaces. */
:root { --ui-brand-compact-size:21px; --ui-header-compact-height:56px; --ui-brand-size:42px; --ui-brand-ink-gap:4px; --ui-brand-gap:6px; --ui-brand-caption-ratio:.26; --ui-header-height:64px; }
@media(max-width:1023px) { :root { --ui-brand-size:30px; --ui-brand-ink-gap:2px; --ui-brand-caption-ratio:.28; --ui-header-height:56px; } }
@media(max-width:480px) { :root { --ui-brand-size:21px; --ui-brand-caption-ratio:.26; --ui-brand-gap:4px; } }
.ws-brand { --ui-brand-size:var(--ui-brand-compact-size); --ui-brand-caption-ratio:.26; --ui-brand-ink-gap:2px; --ui-brand-gap:4px; }
:is(.s-brand,.ws-brand,.top .brand) { gap:var(--ui-brand-gap); align-items:center; flex:none; white-space:nowrap; }
:is(.s-brand,.ws-brand,.top .brand) .brand-copy { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--ui-brand-ink-gap); letter-spacing:0; }
:is(.s-brand,.ws-brand,.top .brand) .brand-copy > :first-child { font:700 var(--ui-brand-size)/1 var(--ui-display); letter-spacing:-.045em; padding:0; text-box:trim-both cap alphabetic; }
/* HDR2b: keep cap height readable while fitting the compact wordmark width. */
:root { --ui-caption-size:max(12px, calc(var(--ui-brand-size) * .3)); --ui-caption-offset:6px; --ui-caption-scale:1; --ui-caption-stroke:.6px; }
@media(max-width:1023px) { :root { --ui-caption-scale:.78; } }
@media(max-width:480px) { :root { --ui-caption-scale:.55; --ui-caption-offset:5px; } }
.ws-brand { --ui-caption-scale:.55; --ui-caption-size:12px; }
:is(.s-brand,.ws-brand,.top .brand) .brand-copy { position:relative; margin-bottom:calc(var(--ui-caption-size) * .75 + var(--ui-caption-offset)); }
:is(.s-brand,.ws-brand,.top .brand) .brand-caption { font:400 var(--ui-caption-size)/1 Arial, sans-serif; letter-spacing:.025em; text-transform:uppercase; text-align:center; white-space:nowrap; color:color-mix(in srgb, var(--ui-accent) 75%, var(--ui-ink)); text-box:trim-both cap alphabetic; position:absolute; top:calc(100% + var(--ui-caption-offset)); left:calc(50% + 1px); width:max-content; transform:translateX(-50%) scaleX(var(--ui-caption-scale)); }
@supports (-webkit-text-stroke: .6px black) {
  :is(.s-brand,.ws-brand,.top .brand) .brand-caption { -webkit-text-stroke:var(--ui-caption-stroke) var(--ui-accent); -webkit-text-fill-color:color-mix(in srgb, var(--ui-accent) 28%, transparent); }
}
:is(.s-brand,.ws-brand,.top .brand) img { width:calc(var(--ui-brand-size) * .9); height:calc(var(--ui-brand-size) * .9); flex:none; filter:var(--ui-logo-contour); }
.s-top-in { min-height:var(--ui-header-height); flex-wrap:nowrap; gap:8px; padding-block:4px; }
.s-bar,.s-actions { flex-wrap:nowrap; flex:none; }
.s-account a { white-space:nowrap; }
@media(max-width:1023px) {
  .s-top-in { padding-inline:8px; gap:4px; }
  .s-bar,.s-actions { gap:0; }
  .s-theme { padding-left:0; border:0; }
  .s-account a { width:40px; min-width:40px; min-height:40px; padding:0; justify-content:center; }
  .s-account .s-label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .s-top .ui-theme-toggle { width:40px; min-width:40px; height:40px; }
}

/* Keep compact geometry above the integrated application overrides. */
body[data-page="workspace"] .titlebar { min-height:var(--ui-header-compact-height); padding:4px 8px; flex-wrap:nowrap; gap:4px; }
body[data-page="workspace"] .ws-brand strong { font-size:var(--ui-brand-compact-size); }
body[data-page="workspace"] .ws-logo { width:calc(var(--ui-brand-compact-size) * .9); height:calc(var(--ui-brand-compact-size) * .9); }
body[data-page="workspace"] .title-tools { gap:0; }
body[data-page="workspace"] .ws-account :is(a,button,summary), body[data-page="workspace"] .title-tools .ui-theme-toggle { min-width:40px; min-height:40px; height:40px; }
@media(max-width:480px) {
  body[data-page="workspace"] .titlebar:has([data-public-guest]:not([hidden])) { flex-wrap:nowrap; min-height:var(--ui-header-compact-height); }
  body[data-page="workspace"] .titlebar:has([data-public-guest]:not([hidden])) .title-tools { margin-bottom:0; }
  body[data-page="workspace"] .ws-profile-popup #workspace-logout { display:flex; }
}
body:is(.miniapp,[data-page="cabinet"]) .s-top-in { min-height:var(--ui-header-height); padding-block:4px; flex-wrap:nowrap; }
@media(max-width:1023px) { body:is(.miniapp,[data-page="cabinet"]) .s-top-in { gap:4px; } }
body.miniapp .top { min-height:var(--ui-header-height); padding-block:4px; flex-wrap:nowrap; }
body:is(.miniapp,[data-page="cabinet"]) .s-top-in:has([data-public-guest]:not([hidden])) { flex-wrap:nowrap; }
@media(max-width:480px) { body[data-page="cabinet"] .s-account a:not([href="/profile"]) { display:inline-flex; } }

/* Owner-approved hooded profile entry, shared by public navigation, cabinet, and browser workspace. */
.profile-entry-icon{display:block;width:44px;height:44px;flex:none;object-fit:contain;border-radius:3px}
.profile-menu>summary:has(.profile-entry-icon),.s-account a[href="/profile"]:has(.profile-entry-icon),.ws-profile-menu>summary:has(.profile-entry-icon){min-width:50px!important;min-height:50px!important;height:50px!important;max-height:50px!important;padding:2px!important;background:#07383b!important;color:#d7ffef!important;overflow:hidden}
body[data-page="workspace"] .titlebar:has(.profile-entry-icon){height:54px;min-height:54px}