/* TabLabs: единое оформление «тёмный дорогой инструмент».
   Заменяет прежнее «электронная игрушка» (toy.css / toy.js).
   Подключается последним на каждой странице: <link rel="stylesheet" href="/s/design.css">
   Тёмная тема по умолчанию; светлая описана и включается атрибутом data-theme="light" на <html>.
   Шрифты системные: страница не зависит от связи с интернетом.
   Один акцент (коралл), один запасной (латунь), остальное тёплая нейтраль. */

html:root:root {
  color-scheme: dark;

  /* ---------- система: цвета ---------- */
  --tl-bg: #070605;          /* корпус */
  --tl-bg-deep: #020202;     /* лунки: поля, шкалы, экраны */
  --tl-surface: #1a1714;     /* панели */
  --tl-surface-2: #221e1a;   /* карточки, клавиши */
  --tl-surface-3: #2b2621;   /* наведение, верх клавиши */
  --tl-line: #332d27;        /* тонкие линии */
  --tl-line-strong: #4a4137;
  --tl-text: #efe7dc;
  --tl-text-2: #a99e90;
  --tl-text-3: #74695d;
  --tl-accent: #ff6b4a;      /* коралл: главное действие и «сейчас» */
  --tl-accent-ink: #1a0b06;
  --tl-accent-soft: rgba(255, 107, 74, .14);
  --tl-brass: #d9ab5f;       /* латунь: выбор, значения, тонкие линии */
  --tl-brass-soft: rgba(217, 171, 95, .14);
  --tl-ok: #8fbf9a;
  --tl-hair: rgba(255, 236, 210, .08);       /* внутренний волосяной блик */
  --tl-panel-hi: rgba(255, 236, 210, .045);  /* верхний блик панели */
  --tl-k1: #5a4e40; --tl-k2: #2e2822; --tl-k3: #16120f;   /* металл */
  --tl-glow: 0 0 22px rgba(255, 107, 74, .35);
  --tl-shadow-1: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 -1px 0 rgba(0, 0, 0, .35) inset, 0 6px 16px rgba(0, 0, 0, .35);
  --tl-shadow-cap: 0 1px 0 rgba(255, 255, 255, .10) inset, 0 3px 8px rgba(0, 0, 0, .55);
  --tl-shadow-well: 0 2px 6px rgba(0, 0, 0, .65) inset;

  /* ---------- система: шрифты, радиусы, движение ---------- */
  --tl-font-display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --tl-font-text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tl-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --tl-r-sm: 6px; --tl-r-md: 10px; --tl-r-lg: 14px;
  --tl-dur-fast: 120ms; --tl-dur: 200ms; --tl-ease: cubic-bezier(.2, .7, .2, 1);

  /* ---------- имена, которые используют страницы ---------- */
  --bg: var(--tl-bg); --panel: var(--tl-surface); --sunk: var(--tl-bg-deep); --rule: var(--tl-line);
  --card: var(--tl-surface); --card-solid: var(--tl-surface); --line: var(--tl-line);
  --ink: var(--tl-text); --ink2: var(--tl-text-2); --muted: var(--tl-text-2); --text: var(--tl-text);
  --accent: var(--tl-accent); --accent-ink: var(--tl-accent-ink);
  --ok: var(--tl-ok); --err: var(--tl-accent); --warn: var(--tl-brass);
  --terra: var(--tl-accent); --gold: var(--tl-brass); --hl: var(--tl-accent); --blue: var(--tl-brass);
  --stave: #5f564b; --note: var(--tl-text); --note-bg: var(--tl-bg-deep);
  --shade: var(--tl-accent-soft); --info: var(--tl-surface-2); --info-ink: var(--tl-text);
  --sans: var(--tl-font-text); --serif: var(--tl-font-display);
  --f-body: var(--tl-font-text); --f-head: var(--tl-font-display);
  /* плеер */
  --loop: var(--tl-accent); --loopsoft: var(--tl-accent-soft); --wave: var(--tl-text);
  --grid: rgba(255, 236, 210, .08); --grid2: rgba(255, 236, 210, .22);
}

/* светлая тема: описана на будущее, обе темы одинаково хороши */
html[data-theme="light"]:root:root {
  color-scheme: light;
  --tl-bg: #ece5da; --tl-bg-deep: #ddd4c6; --tl-surface: #f6f1e9; --tl-surface-2: #fbf8f3; --tl-surface-3: #efe8dc;
  --tl-line: #d9cfbf; --tl-line-strong: #bfb2a0;
  --tl-text: #241f1a; --tl-text-2: #63594d; --tl-text-3: #8d8272;
  --tl-accent: #e2492a; --tl-accent-ink: #fff6f2; --tl-accent-soft: rgba(226, 73, 42, .11);
  --tl-brass: #a8741d; --tl-brass-soft: rgba(168, 116, 29, .12); --tl-ok: #3f7d55;
  --tl-hair: rgba(255, 255, 255, .8); --tl-panel-hi: rgba(255, 255, 255, .7);
  --tl-k1: #fbf8f3; --tl-k2: #e3d9c8; --tl-k3: #c9bba5;
  --tl-glow: 0 0 20px rgba(226, 73, 42, .28);
  --tl-shadow-1: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 -1px 0 rgba(90, 70, 40, .08) inset, 0 6px 14px rgba(90, 70, 40, .12);
  --tl-shadow-cap: 0 1px 0 rgba(255, 255, 255, .95) inset, 0 3px 7px rgba(90, 70, 40, .25);
  --tl-shadow-well: 0 2px 5px rgba(90, 70, 40, .22) inset;
  --stave: #a39886; --grid: rgba(36, 31, 26, .10); --grid2: rgba(36, 31, 26, .26);
}

html body { background: var(--tl-bg); color: var(--tl-text); font-family: var(--tl-font-text); -webkit-font-smoothing: antialiased; }
html body h1, html body h2, html body h3 { font-family: var(--tl-font-display); font-weight: 500; letter-spacing: 0; color: var(--tl-text); }
html body h1 { font-size: clamp(24px, 5vw, 32px); line-height: 1.1; }
html body h2 { font-size: 18px; }
html body a { color: var(--tl-accent); }
html body ::selection { background: var(--tl-accent-soft); }
html body :focus-visible { outline: 2px solid var(--tl-brass); outline-offset: 2px; }
html body hr { border: 0; border-top: 1px solid var(--tl-line); }

/* ---------- панели: блик сверху и тонкая линия по внутреннему краю ---------- */
html body .card, html body .pnl, html body .opt, html body .kpi div, html body a.card, html body #pre .card,
html body .panel, html body .box {
  background: linear-gradient(180deg, var(--tl-panel-hi), transparent 40%), var(--tl-surface);
  border: 1px solid var(--tl-line); border-radius: var(--tl-r-lg);
  box-shadow: var(--tl-shadow-1), 0 0 0 1px var(--tl-hair) inset; color: var(--tl-text);
}
html body a.card { transition: border-color var(--tl-dur) var(--tl-ease), transform var(--tl-dur-fast) var(--tl-ease); }
html body a.card:hover { border-color: var(--tl-brass); }
html body a.card:active { transform: translateY(1px); }
html body .pnl > header { border-bottom: 1px solid var(--tl-line); }
html body .info { background: var(--tl-surface-2); border: 1px solid var(--tl-line); border-left: 3px solid var(--tl-brass); border-radius: var(--tl-r-md); }
html body .warn-box { background: var(--tl-surface-2); border: 1px solid var(--tl-line); border-radius: var(--tl-r-md); }
html body .item, html body .stem { border-top: 1px solid var(--tl-line); }
html body .stem.kid { border-left: 3px solid var(--tl-brass); }

/* ---------- кнопки-клавиши ---------- */
html body .btn, html body button.btn, html body .chips button, html body .stem .tg, html body .stepper button, html body .bars button,
html body .tool, html body .seg button {
  background: linear-gradient(180deg, var(--tl-surface-3), var(--tl-surface-2)); color: var(--tl-text);
  border: 1px solid var(--tl-line-strong); border-radius: var(--tl-r-md);
  box-shadow: var(--tl-shadow-cap); font-family: var(--tl-font-text); font-weight: 600;
  transition: transform var(--tl-dur-fast) var(--tl-ease), border-color var(--tl-dur-fast), background var(--tl-dur-fast);
}
html body .btn:hover, html body .chips button:hover, html body .tool:hover { border-color: var(--tl-brass); }
html body .btn:active, html body .chips button:active, html body .stem .tg:active, html body .stepper button:active, html body .bars button:active, html body .tool:active {
  transform: translateY(1px); box-shadow: none;
}
html body .btn.ghost { background: transparent; box-shadow: none; }
html body .btn.pri, html body .btn.pr, html body .btn.solid, html body button.primary, html body .btn.red {
  background: var(--tl-accent); color: var(--tl-accent-ink); border-color: var(--tl-accent); box-shadow: var(--tl-glow);
}
html body .btn.danger { color: var(--tl-accent); }
html body .btn[disabled], html body button[disabled] { opacity: .45; cursor: default; box-shadow: none; }
html body .chips button[aria-pressed=true], html body .stem .tg[aria-pressed=true], html body .ribbon .on, html body .seg .on, html body .seg button[aria-pressed=true] {
  background: var(--tl-brass-soft); color: var(--tl-text); border-color: var(--tl-brass); box-shadow: none;
}
html body .bars button.in { background: var(--tl-accent-soft); color: var(--tl-text); border-color: var(--tl-accent); }
html body .pp {
  background: radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--tl-accent) 70%, #fff), var(--tl-accent) 62%);
  color: var(--tl-accent-ink); border: 1px solid var(--tl-accent); box-shadow: var(--tl-glow), 0 1px 0 rgba(255, 255, 255, .3) inset;
}
html body .pp:active { transform: scale(.97); }
html body .chip { border: 1px solid var(--tl-line-strong); color: var(--tl-text-2); }
html body .chip.ok { color: var(--tl-ok); } html body .chip.err, html body .chip.warn { color: var(--tl-accent); }

/* ---------- поля ввода: тёмные лунки ---------- */
html body input[type=text], html body input[type=password], html body input[type=number], html body input[type=search], html body input[type=email], html body input[type=file],
html body select, html body textarea {
  background: var(--tl-bg-deep); color: var(--tl-text); border: 1px solid var(--tl-line-strong); border-radius: var(--tl-r-md);
  box-shadow: var(--tl-shadow-well); font-family: var(--tl-font-text);
}
html body input[type=file]::file-selector-button { background: linear-gradient(180deg, var(--tl-surface-3), var(--tl-surface-2)); color: var(--tl-text); border: 1px solid var(--tl-line-strong); border-radius: var(--tl-r-sm); padding: 6px 12px; margin-right: 10px; font: 600 12px var(--tl-font-text); cursor: pointer; }
html body input::placeholder, html body textarea::placeholder { color: var(--tl-text-3); }
html body input:focus, html body select:focus, html body textarea:focus { outline: none; border-color: var(--tl-brass); }
html body input[type=range] { accent-color: var(--tl-accent); }
html body input[type=checkbox], html body input[type=radio] { accent-color: var(--tl-accent); }
html body label.f, html body label { color: var(--tl-text-2); }
html body .pick label { background: var(--tl-surface-2); border: 1px solid var(--tl-line); border-radius: var(--tl-r-md); }
html body .pick label:has(input:checked) { background: var(--tl-brass-soft); border-color: var(--tl-brass); }
html body .filebtn { background: var(--tl-bg-deep); border: 1px dashed var(--tl-line-strong); border-radius: var(--tl-r-lg); color: var(--tl-text-2); }

/* ---------- «экран»: волны и табы ---------- */
html body canvas#tab, html body canvas.wave, html body canvas.waveRow, html body .lcd {
  background: var(--tl-bg-deep); border: 1px solid var(--tl-line-strong); border-radius: var(--tl-r-md); box-shadow: var(--tl-shadow-well);
}
html body .time, html body .clock, html body .kpi b { font-family: var(--tl-font-mono); font-variant-numeric: tabular-nums; }
html body .bar { background: var(--tl-bg-deep); border: 1px solid var(--tl-line); height: 8px; border-radius: 4px; overflow: hidden; }
html body .bar > i { background: var(--tl-accent); box-shadow: 0 0 10px var(--tl-accent); }

/* ---------- нижняя панель студии и верхняя полоса ---------- */
html body nav.bottom { background: color-mix(in srgb, var(--tl-bg-deep) 92%, transparent); border-top: 1px solid var(--tl-line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
html body nav.bottom button { font-family: var(--tl-font-text); font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--tl-text-2); }
html body nav.bottom button[aria-current=true] { background: var(--tl-brass-soft); color: var(--tl-text); box-shadow: 0 -1px 0 var(--tl-brass) inset; }
html body #tl-bar { background: color-mix(in srgb, var(--tl-bg) 82%, transparent); border-bottom: 1px solid var(--tl-line); color: var(--tl-text); }
html body #tl-bar .tl-sec { font-family: var(--tl-font-text); font-weight: 500; opacity: .8; letter-spacing: .14em; text-transform: uppercase; font-size: 11px; }

/* ---------- листы, окна, уведомления ---------- */
html body #sheet .pan, html body .sheet .in { background: var(--tl-surface); border-top: 1px solid var(--tl-line-strong); border-radius: 18px 18px 0 0; box-shadow: 0 -12px 30px rgba(0, 0, 0, .45); }
html body .toast { background: var(--tl-surface-3); color: var(--tl-text); border: 1px solid var(--tl-line-strong); border-radius: var(--tl-r-md); box-shadow: var(--tl-shadow-1); }
html body .warn { background: var(--tl-surface-2); color: var(--tl-text); border: 1px solid var(--tl-brass); border-radius: var(--tl-r-md); }
html body #pre h1 { font-family: var(--tl-font-display); }

@media (prefers-reduced-motion: reduce) { html body * { transition-duration: 1ms !important; animation-duration: 1ms !important; } }

/* ---- Метроном: маятник и свёрнутые разделы ---- */
.g2m .mpend{display:flex;justify-content:center;margin:2px 0 0}
.g2m .mpend svg{width:min(78vw,280px);height:auto;overflow:visible;filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}
.g2m .mpend .mp-arc{stroke:var(--tl-line);stroke-width:1.5;stroke-dasharray:2 5}
.g2m .mpend .mp-ticks line{stroke:var(--tl-line-strong);stroke-width:2;stroke-linecap:round}
.g2m .mpend .mp-arm{transform-box:view-box;transform-origin:120px 178px;will-change:transform}
.g2m .bpmv{font-family:var(--tl-font-display);font-weight:500;font-size:64px;color:var(--tl-text);letter-spacing:-.02em}
.g2m .mfold{margin:10px 0;border:1px solid var(--tl-line);border-radius:14px;background:linear-gradient(180deg,var(--tl-surface),var(--tl-bg-deep));padding:0 14px}
.g2m .mfold>summary{list-style:none;cursor:pointer;min-height:48px;display:flex;align-items:center;justify-content:space-between;color:var(--tl-text-2);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.g2m .mfold>summary::-webkit-details-marker{display:none}
.g2m .mfold>summary::after{content:"+";font-size:20px;color:var(--tl-brass);letter-spacing:0}
.g2m .mfold[open]>summary::after{content:"−"}
.g2m .mfold[open]{padding-bottom:10px}
@media (prefers-reduced-motion:reduce){.g2m .mpend .mp-arm{transition:none!important}}

/* ---- Сцена: чёрный глянцевый пол, луч света сверху, короткое чёткое отражение (как в рекламе часов и украшений) ---- */
.tl-reflect{-webkit-box-reflect:below 3px linear-gradient(to bottom,transparent 52%,rgba(255,255,255,.30));}
.g2m .mpend{position:relative;margin:-4px -14px 0;padding:6px 0 78px;overflow:visible;
  background:
    radial-gradient(34% 62% at 50% 0%,rgba(255,236,205,.15),transparent 74%),
    radial-gradient(60% 10% at 50% 59%,rgba(255,226,180,.10),transparent 70%);}
.g2m .mpend::after{content:"";position:absolute;left:0;right:0;top:calc(6px + min(78vw,280px) * 0.96);height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,226,180,.32) 30%,rgba(255,226,180,.5) 50%,rgba(255,226,180,.32) 70%,transparent)}
.g2m .mpend svg{-webkit-box-reflect:below 1px linear-gradient(to bottom,transparent 50%,rgba(255,255,255,.34));filter:none}
@media (prefers-reduced-motion:reduce){.g2m .mpend svg{-webkit-box-reflect:none}}