/* Згенеровано web/packages/ui/scripts/sync-maket.mjs з design/maket/e. НЕ ПРАВИТИ руками — правки зникнуть при наступному запуску. */
/* ZRAZU · E «Кіно» — раскладка cabinet (кабінет VSE): сайдбар глибиною ≤ 2, шапка з ⌘K, робоча область.
   Кабінет — інструмент, а не вітрина (blueprint §2.1): без банерів і «спецпропозицій», суцільні поверхні замість скла. Спільний файл. */
.vse{display:grid;grid-template-columns:var(--side) minmax(0,1fr);min-height:100svh;background:linear-gradient(90deg,transparent calc(var(--side) - 1px),var(--line) calc(var(--side) - 1px),var(--line) var(--side),transparent var(--side)),linear-gradient(90deg,var(--bg-2) var(--side),transparent var(--side))}
.side{position:sticky;top:0;height:100svh;overflow:auto;display:flex;flex-direction:column;gap:6px;padding:10px 12px 14px;border-right:1px solid var(--line);background:var(--bg-2);z-index:30}
.side-top{display:flex;align-items:center;height:44px;padding:0 6px;margin-bottom:6px}
.side-tag{display:inline-grid;place-items:center;height:20px;padding:0 6px;border-radius:6px;background:var(--fill-3);color:var(--text-2);font-size:12.5px;font-weight:700;letter-spacing:.08em;margin-left:8px}
.side-nav ul{list-style:none;margin:0;padding:0}
.side-nav > ul > li{margin:1px 0}
.side-nav a{display:flex;align-items:center;gap:10px;min-height:38px;padding:0 10px;border-radius:10px;color:var(--text-2);text-decoration:none;font-size:14.5px;font-weight:540;letter-spacing:-.005em;transition:background-color .15s ease,color .15s ease}
.side-nav a .ic{width:18px;height:18px}
.side-nav a[aria-current]{color:var(--text)}
.side-nav a[aria-current="page"]{background:var(--fill-3)}
.side-nav li > ul{display:none;margin:2px 0 6px 19px;padding-left:10px;border-left:1px solid var(--line)}
.side-nav li:has(> a[aria-current]) > ul{display:block}
.side-nav li li a{min-height:34px;font-size:14px}
.side-foot{margin-top:auto;padding-top:10px;border-top:1px solid var(--line)}
.side-site{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 10px;border-radius:10px;color:var(--text-2);text-decoration:none;font-size:14px}
.side-scrim{position:fixed;inset:0;z-index:65;background:var(--scrim)}
@media (hover:hover) and (pointer:fine){ .side-nav a:hover,.side-site:hover{background:var(--fill-2);color:var(--text)} .vhdr-k:hover{border-color:var(--line-3);color:var(--text)} }

.vse-main{min-width:0;display:flex;flex-direction:column}
.vhdr{position:sticky;top:0;z-index:40;height:var(--hdr);display:flex;align-items:center;gap:12px;padding:0 24px;background:var(--hdr-bg);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line)}
.vhdr-menu,.vhdr-brand{display:none}
.vhdr-k{appearance:none;flex:1;max-width:440px;min-height:40px;display:flex;align-items:center;gap:10px;padding:0 8px 0 14px;border-radius:12px;background:var(--fill-2);border:1px solid var(--line);color:var(--text-2);font-size:15px;cursor:pointer;text-align:left}
.vhdr-k span{flex:1}
.vhdr-tools{margin-left:auto;display:flex;align-items:center;gap:10px;min-width:0}
/* стискається тільки картка акаунта: у кабінеті це .vhdr-accw, у HUB — .vhdr-acc.op-who */
.vhdr-tools > :not(.vhdr-accw):not(.vhdr-acc){flex:none}
.vhdr-tools > .vhdr-acc{flex:0 1 auto}
.vhdr-bell{position:relative}
.vhdr-dot{position:absolute;top:8px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 2px var(--bg)}
.vhdr-acc{display:flex;align-items:center;gap:8px;min-width:0;max-width:100%;min-height:40px;padding:0 12px 0 4px;border-radius:999px;border:1px solid var(--line);color:var(--text);text-decoration:none;font-size:14px;font-weight:560}
/* Назва організації буває якою завгодно — студійна довша за клієнтську. Щоб шапка не залежала
   від довжини імені, стискається саме вона, з багатокрапкою; аватар і стрілка не стискаються. */
.vhdr-org{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vhdr-acc .vhdr-av,.vhdr-acc .vhdr-oc{flex:none}
.vhdr-av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background-color:var(--btn-pri-bg);background-image:var(--btn-pri-img);color:var(--btn-pri-fg);font-size:12.5px;font-weight:750;letter-spacing:.02em}

.vse-page{width:100%;max-width:1280px;padding:28px 32px 72px}
.vse-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;margin-bottom:24px}
.vse-h1{margin:0;font-size:32px;font-weight:720;letter-spacing:-.035em;line-height:1.1}
.vse-sub{margin:6px 0 0;color:var(--text-2);font-size:15px}
.vse-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:20px 22px}
.panel-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px;font-size:17px;font-weight:660;letter-spacing:-.015em}
.panel-h a{display:inline-flex;align-items:center;min-height:28px;font-size:14px;font-weight:540;color:var(--text-2);text-decoration:none}

/* ---------- Світла тема: підфарбований сайдбар, плитки іконок за продуктами, активний пункт — кольорова капсула ----------
   Як у налаштуваннях Apple: кожен розділ має свою плитку; продукти — своїм відтінком (--hue-*), службове — нейтральним.
   Панелі лишаються суцільними (кабінет — інструмент), але з теплою тінню замість плоскої рамки. */
html[data-theme="light"] .vse{background:linear-gradient(90deg,transparent calc(var(--side) - 1px),var(--line) calc(var(--side) - 1px),var(--line) var(--side),transparent var(--side)),linear-gradient(180deg,var(--side-a),var(--side-b) 640px) 0 0/var(--side) 100% no-repeat}
html[data-theme="light"] .side{background:linear-gradient(180deg,var(--side-a),var(--side-b) 640px)}
html[data-theme="light"] .side-tag{background:var(--tint-warm);color:var(--accent-ink)}
html[data-theme] .side-nav > ul > li > a > .ic{box-sizing:content-box;width:16px;height:16px;padding:5px;margin-left:-4px;border-radius:8px;background:var(--hue-mute-bg);color:var(--hue-mute)}
html[data-theme] .side-nav a[data-side="overview"] > .ic{background:var(--tint-warm);color:var(--hue-mon)}
html[data-theme] .side-nav a[data-side="domains"] > .ic{background:var(--hue-dom-bg);color:var(--hue-dom)}
html[data-theme] .side-nav a[data-side="monitoring"] > .ic{background:var(--hue-mon-bg);color:var(--hue-mon)}
html[data-theme] .side-nav a[data-side="ssl"] > .ic{background:var(--hue-ssl-bg);color:var(--hue-ssl)}
html[data-theme] .side-nav a[data-side="plans"] > .ic{background:var(--hue-tool-bg);color:var(--hue-tool)}
html[data-theme="light"] .side-nav a[aria-current="page"]{background:var(--tint-warm);box-shadow:inset 0 0 0 1px rgba(var(--tone-ink-b),.10);color:var(--text);font-weight:600}
html[data-theme="light"] .side-nav li li a[aria-current="page"]{background:var(--accent-bg);box-shadow:none;color:var(--accent-ink)}
html[data-theme="light"] .side-nav li > ul{border-left-color:var(--accent-line)}
html[data-theme="light"] .vhdr-k{background:rgba(255,255,255,.7)}
html[data-theme="light"] .panel{box-shadow:var(--card-shadow)}
/* Тон розділу (--band) — спокійніше, ніж на сайті: м'яка смуга під шапкою сторінки, що сходить нанівець до ~340 px */
html[data-theme="light"] .vse-main{background:linear-gradient(180deg,var(--band),transparent 340px)}
html[data-theme="light"] .vhdr{background:color-mix(in srgb,var(--band) 80%,transparent)}
@media (max-width:900px){ html[data-theme="light"] .vse{background:none} }
@media (hover:hover) and (pointer:fine){ html[data-theme="light"] .side-nav a:not([aria-current="page"]):hover{background:rgba(var(--tone-a),.08)} }

@media (max-width:1100px){ .vse-page{padding:24px 24px 64px} }
/* 901–1160: сайдбар ще розгорнутий, а шапка вже не вміщає все (на 980 не вистачало 115 px,
   на екрані студії з довшою назвою організації — ще 37 px на 1101). Стискаємо її тими самими
   прийомами, що й нижче 900: назва організації ховається, підпис кнопки «Замовити» і ⌘K
   лишаються тільки для читалок — доступні імена не зникають. */
@media (min-width:901px) and (max-width:1160px){
  .vhdr-org{display:none}
  .vhdr-ob-t{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .vhdr-ob{padding:0 10px}
  .vhdr-k kbd{display:none}
  .vhdr-k{min-width:0}
  .vhdr-k span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .vhdr-tools{gap:8px}
}
@media (max-width:900px){
  .vse{grid-template-columns:minmax(0,1fr);background:none}
  .side{position:fixed;left:0;top:0;bottom:0;width:min(300px,86vw);height:auto;z-index:70;transform:translateX(-102%);transition:transform .26s var(--ease-out);box-shadow:var(--pop-shadow)}
  .side.open{transform:none}
  .vhdr{padding:0 12px;gap:8px}
  .vhdr-menu,.vhdr-brand{display:inline-flex}
  .vhdr-brand{align-items:center;text-decoration:none;min-height:44px}
  .vhdr-k{flex:none;width:44px;height:44px;padding:0;justify-content:center;margin-left:auto}
  .vhdr-k kbd{display:none}
  .vhdr-k span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .vhdr-tools{margin-left:0;gap:6px}
  .vhdr-org{display:none}
  .vhdr-acc{padding:0 4px;border:0}
  .vse-page{padding:20px 16px 56px}
  .vse-h1{font-size:26px}
}
html[data-static] .side{transition:none}
@media (pointer:coarse){ .side-nav a,.side-nav li li a,.side-site{min-height:44px} .vhdr-acc{min-height:44px;min-width:44px;justify-content:center} .panel-h a{display:inline-flex;align-items:center;min-height:44px} }
@media (max-width:900px){ .vhdr-k{border-radius:999px} }

/* ---------- «Замовити» і кошик у шапці кабінету (зворотний зв'язок 29.09.2026: не видно, де замовити домен і SSL) ---------- */
.vhdr-order{position:relative;flex:none}
.vhdr-ob{min-height:40px;gap:6px;padding:0 12px 0 14px}
.vhdr-oc{opacity:.8;transition:transform .2s var(--ease-out)}
.vhdr-ob[aria-expanded="true"] .vhdr-oc{transform:rotate(180deg)}
.order-menu{position:absolute;top:calc(100% + 8px);left:0;z-index:60;width:340px;padding:6px;border-radius:18px;background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--pop-shadow)}
.order-menu ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.order-menu a{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:10px 12px;border-radius:12px;color:var(--text);text-decoration:none}
.order-menu a .ic{flex:none;margin-top:2px;color:var(--text-2)}
.order-menu b{display:block;font-size:15px;font-weight:620}
.order-menu small{display:block;margin-top:1px;font-size:13.5px;line-height:1.4;color:var(--text-2)}
@media (hover:hover) and (pointer:fine){ .order-menu a:hover{background:var(--fill-2)} .order-menu a:hover .ic{color:var(--text)} }
/* Акаунт і організації (#accBtn/#accMenu) — той самий disclosure, що «Замовити»; права сторона шапки */
.vhdr-accw{position:relative;display:flex;flex:0 1 auto;min-width:0}
button.vhdr-acc{background:none;font-family:inherit;cursor:pointer}
.vhdr-acc .vhdr-oc{color:var(--text-2);transition:transform .2s ease}
.vhdr-acc[aria-expanded="true"] .vhdr-oc{transform:rotate(180deg)}
.acc-menu{left:auto;right:0;width:330px}
.acc-h{margin:6px 12px 4px;font-size:12.5px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--text-2)}
.acc-menu ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.acc-menu a{align-items:center}
.acc-av{width:28px;height:28px;flex:none;font-size:11px}
.acc-orgs a > span:not(.acc-av){flex:1;min-width:0}
.acc-cur{flex:none;visibility:hidden;color:var(--text)}
.acc-orgs a[aria-current] .acc-cur{visibility:visible}
.acc-orgs a[aria-current]{background:var(--fill-1)}
.acc-new{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;margin-top:2px;padding:10px 12px;border:0;border-radius:12px;background:none;color:var(--text);font:inherit;font-size:15px;font-weight:620;text-align:left;cursor:pointer}
.acc-new .ic{color:var(--text-2)}
.acc-form{display:grid;gap:10px;padding:8px 12px 12px}
.acc-act{display:flex;flex-wrap:wrap;gap:8px}
.acc-foot{margin-top:6px!important;padding-top:6px!important;border-top:1px solid var(--line)}
/* Пункти-кнопки (тема, вихід, перемикання організації в застосунку) — так само, як посилання: у застосунку вихід —
   POST, а не перехід, і без цих правил іконка ставала над підписом (стенд, 06.10.2026). */
.acc-menu li > button{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:10px 12px;border:0;border-radius:12px;background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.acc-menu li > button .ic{flex:none;color:var(--text-2)}
.acc-orgs button > span:not(.acc-av){flex:1;min-width:0}
.acc-orgs button[aria-current]{background:var(--fill-1)}
.acc-orgs button[aria-current] .acc-cur{visibility:visible}
@media (hover:hover) and (pointer:fine){ .acc-menu li > button:hover{background:var(--fill-2)} .acc-menu li > button:hover .ic{color:var(--text)} }
/* Тема — пункт меню акаунта над «Налаштуваннями» (Р278-25), а не кнопка в шапці. Підпис і значок — дія:
   у темній темі «Увімкнути світлу тему» із сонцем, у світлій — навпаки. Мова тепер у шапці на всіх ширинах. */
.acc-theme .t-moon,.acc-theme .t-dark{display:none}
[data-theme="light"] .acc-theme .t-sun,[data-theme="light"] .acc-theme .t-light{display:none}
[data-theme="light"] .acc-theme .t-moon{display:block}
[data-theme="light"] .acc-theme .t-dark{display:inline}
@media (hover:hover) and (pointer:fine){ .acc-new:hover{background:var(--fill-2)} .acc-new:hover .ic{color:var(--text)} }
@media (max-width:900px){ .vhdr-acc .vhdr-oc{display:none} }
.vhdr .cart-btn{position:relative;display:inline-flex;align-items:center;gap:8px;height:40px;min-width:44px;padding:0 10px 0 12px;border-radius:999px;border:1px solid var(--line);background:var(--fill-2);color:var(--text);cursor:pointer;transition:background-color .2s ease}
.vhdr .cart-n{display:inline-grid;overflow:hidden;height:22px;min-width:22px;padding:0 6px;border-radius:11px;background:var(--fill-4);color:var(--text);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;line-height:22px;text-align:center}
.vhdr .cart-n-v{display:block}
.vhdr .cart-btn.has .cart-n{background:var(--btn-pri-bg);color:var(--btn-pri-fg)}
@media (hover:hover) and (pointer:fine){ .vhdr .cart-btn:hover{background:var(--fill-4)} }
html[data-layout="cabinet"] .cart{right:16px}
@media (max-width:900px){
  .vhdr-ob{width:44px;height:44px;min-height:44px;padding:0;justify-content:center;border-radius:999px}
  .vhdr-ob-t{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .vhdr-oc{display:none}
  .order-menu{position:fixed;left:12px;right:12px;top:calc(var(--hdr) + 6px);width:auto}
  .vhdr .cart-btn{width:44px;height:44px;padding:0;justify-content:center}
  .vhdr .cart-btn:not(.has){display:none}
  .vhdr .cart-n{position:absolute;top:-3px;right:-3px;height:18px;min-width:18px;padding:0 4px;border-radius:9px;font-size:11px;line-height:18px}
}
@media (max-width:560px){ .vhdr .theme-btn{display:none} }
/* Мова в шапці кабінету й HUB видна на всіх ширинах (Р278-25) — на вузьких лише код мови, без глобуса й стрілки,
   інакше аватар акаунта виїжджав за край (qa audit 390 px, +37 px). */
@media (max-width:900px){ .vhdr .lang-dd-btn{gap:0;min-width:44px;justify-content:center;padding:0 10px} .vhdr .lang-dd-btn > .ic{display:none} }
/* ≤480 у шапці кабінету (поруч «Замовити» й пошук) колокольчик ховаємо: це лише посилання на «Сповіщення», вони є в бічному
   меню й «Налаштуваннях», а без цього на 320–421 px аватар акаунта стискався до нуля (qa edges, 06.10.2026). HUB не зачіпає. */
@media (max-width:480px){ .vhdr-order ~ .vhdr-tools .vhdr-bell{display:none} }
@media (max-width:420px){ .vhdr{gap:4px} .vhdr-brand .side-tag{display:none} }

/* Кабінет очима клієнта (оператор HUB, лише перегляд) — полоса під шапкою, не закривається до виходу */
.view-bar{position:sticky;top:var(--hdr);z-index:39;display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;padding:10px 24px;background:var(--info-bg);border-bottom:1px solid var(--line);color:var(--text)}
.view-bar[hidden]{display:none}
.view-bar .ic{color:var(--info);flex:none}
.view-bar p{flex:1 1 320px;margin:0;font-size:14px}
.view-bar-x{flex:none}
@media (max-width:760px){.view-bar{position:static;padding:10px 16px}}   /* на телефоні не липне: забрала б третину екрана */