/* Video Transcriber design foundation
   Long-session product UI with two presentations: a restrained Liquid Glass web
   approximation and a lower-cost calm surface mode. This is not Apple's native material. */
:root{
  color-scheme:light dark;
  --vt-ambient-x:0px;
  --vt-ambient-y:0px;
  --vt-bg:#f4f3ef;
  --vt-surface:#fcfbf8;
  --vt-surface-subtle:#f0efeb;
  --vt-surface-raised:#fffefa;
  --vt-surface-strong:#eeece6;
  --vt-text-strong:#1b1c1a;
  --vt-text:#3f403c;
  --vt-text-muted:#6f706b;
  --vt-text-faint:#777872;
  --vt-border:rgba(27,28,26,.10);
  --vt-border-strong:rgba(27,28,26,.17);
  --vt-accent:#d95f3d;
  --vt-accent-hover:#b94a2d;
  --vt-accent-soft:#faeae3;
  --vt-accent-line:#df8b70;
  --vt-success:#4f8a62;
  --vt-success-soft:#eaf3ec;
  --vt-warning:#b97822;
  --vt-warning-soft:#f8efdf;
  --vt-danger:#b84d4d;
  --vt-danger-soft:#f8e8e6;
  --vt-focus:#c65334;
  --vt-cta-bg:#b94629;
  --vt-cta-hover:#9f381f;
  --vt-cta-text:#fffaf7;
  --vt-radius-sm:8px;
  --vt-radius-md:12px;
  --vt-radius-lg:16px;
  --vt-shadow-sm:0 1px 2px rgba(44,40,35,.05);
  --vt-shadow-md:0 14px 38px rgba(44,40,35,.08);
  --vt-shadow-overlay:0 24px 60px rgba(44,40,35,.16);
  --vt-glass-chrome:rgba(252,251,248,.92);
  --vt-glass-panel:#fcfbf8;
  --vt-glass-subtle:#f0efeb;
  --vt-glass-border:rgba(27,28,26,.11);
  --vt-glass-shadow:0 18px 48px rgba(44,40,35,.09),inset 0 1px 0 rgba(255,255,255,.88);
  --vt-glass-blur:blur(26px) saturate(112%) contrast(1.03);
  --vt-font-sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --vt-font-mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;

  /* Compatibility aliases used by existing product scripts and specialist views. */
  --bg-0:var(--vt-bg);
  --bg-1:var(--vt-bg);
  --bg-2:var(--vt-surface-subtle);
  --bg-3:var(--vt-surface-strong);
  --surface:var(--vt-surface);
  --surface-2:var(--vt-surface-subtle);
  --surface-3:var(--vt-surface-strong);
  --glass:var(--vt-surface);
  --glass-strong:var(--vt-surface-raised);
  --glass-soft:var(--vt-surface-subtle);
  --ink:var(--vt-text-strong);
  --text:var(--vt-text);
  --muted:var(--vt-text-muted);
  --faint:var(--vt-text-faint);
  --line:var(--vt-border);
  --line-strong:var(--vt-border-strong);
  --accent:var(--vt-accent);
  --accent-strong:var(--vt-accent-hover);
  --accent-soft:var(--vt-accent-soft);
  --accent-line:var(--vt-accent-line);
  --success:var(--vt-success);
  --warning:var(--vt-warning);
  --danger:var(--vt-danger);
  --radius-shell:var(--vt-radius-lg);
  --radius-core:var(--vt-radius-md);
  --radius-control:var(--vt-radius-sm);
  --shadow-shell:var(--vt-shadow-md);
  --shadow-glass:var(--vt-shadow-md);
  --shadow-accent:var(--vt-shadow-sm);
  font-family:var(--vt-font-sans);
  color:var(--vt-text);
  font-synthesis:none;
}

@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --vt-bg:#101419;
    --vt-surface:#151b22;
    --vt-surface-subtle:#202831;
    --vt-surface-raised:#252e38;
    --vt-surface-strong:#202831;
    --vt-text-strong:#e9ece8;
    --vt-text:#d2d7d4;
    --vt-text-muted:#8d9695;
    --vt-text-faint:#8d9695;
    --vt-border:rgba(218,228,231,.12);
    --vt-border-strong:rgba(218,228,231,.20);
    --vt-accent:#e36f4f;
    --vt-accent-hover:#f08060;
    --vt-accent-soft:rgba(154,65,45,.22);
    --vt-accent-line:#e36f4f;
    --vt-success:#6ead7e;
    --vt-success-soft:rgba(110,173,126,.14);
    --vt-warning:#d4a65d;
    --vt-warning-soft:rgba(212,166,93,.14);
    --vt-danger:#e07b78;
    --vt-danger-soft:rgba(224,123,120,.14);
    --vt-focus:#e98263;
    --vt-cta-bg:#d85d3d;
    --vt-cta-hover:#e36f4f;
    --vt-cta-text:#101419;
    --vt-shadow-sm:0 1px 2px rgba(0,0,0,.20);
    --vt-shadow-md:0 18px 48px rgba(0,0,0,.26);
    --vt-shadow-overlay:0 28px 68px rgba(0,0,0,.46);
    --vt-glass-chrome:#151b22;
    --vt-glass-panel:#192028;
    --vt-glass-subtle:#202831;
    --vt-glass-border:rgba(218,228,231,.13);
    --vt-glass-shadow:0 22px 58px rgba(0,0,0,.30),inset 0 1px 0 rgba(233,236,232,.06);
  }
}

:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{
  color-scheme:dark;
  --vt-bg:#101419;
  --vt-surface:#151b22;
  --vt-surface-subtle:#202831;
  --vt-surface-raised:#252e38;
  --vt-surface-strong:#202831;
  --vt-text-strong:#e9ece8;
  --vt-text:#d2d7d4;
  --vt-text-muted:#8d9695;
  --vt-text-faint:#8d9695;
  --vt-border:rgba(218,228,231,.12);
  --vt-border-strong:rgba(218,228,231,.20);
  --vt-accent:#e36f4f;
  --vt-accent-hover:#f08060;
  --vt-accent-soft:rgba(154,65,45,.22);
  --vt-accent-line:#e36f4f;
  --vt-success:#6ead7e;
  --vt-success-soft:rgba(110,173,126,.14);
  --vt-warning:#d4a65d;
  --vt-warning-soft:rgba(212,166,93,.14);
  --vt-danger:#e07b78;
  --vt-danger-soft:rgba(224,123,120,.14);
  --vt-focus:#e98263;
  --vt-cta-bg:#d85d3d;
  --vt-cta-hover:#e36f4f;
  --vt-cta-text:#101419;
  --vt-shadow-sm:0 1px 2px rgba(0,0,0,.20);
  --vt-shadow-md:0 18px 48px rgba(0,0,0,.26);
  --vt-shadow-overlay:0 28px 68px rgba(0,0,0,.46);
  --vt-glass-chrome:#151b22;
  --vt-glass-panel:#192028;
  --vt-glass-subtle:#202831;
  --vt-glass-border:rgba(218,228,231,.13);
  --vt-glass-shadow:0 22px 58px rgba(0,0,0,.30),inset 0 1px 0 rgba(233,236,232,.06);
}

*{box-sizing:border-box}
html{min-width:320px;min-height:100%;background:var(--vt-bg);scroll-behavior:smooth}
body{margin:0;min-width:320px;min-height:100dvh;background:var(--vt-bg);color:var(--vt-text);font-family:var(--vt-font-sans);text-rendering:optimizeLegibility}
button,input,select,textarea{font:inherit}
button{border:0;color:inherit}
button,a,select,input,textarea{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button:not(:disabled),a[href],select:not(:disabled){cursor:pointer}
::selection{background:var(--vt-accent-soft);color:var(--vt-text-strong)}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
:focus-visible{outline:2px solid var(--vt-focus);outline-offset:2px}
*{scrollbar-color:var(--vt-border-strong) transparent;scrollbar-width:thin}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--vt-border-strong);border-radius:99px;border:2px solid transparent;background-clip:padding-box}

.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
.icon{width:18px;height:18px;display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
kbd{min-width:28px;padding:2px 6px;border:1px solid var(--vt-border);border-radius:6px;background:var(--vt-surface-subtle);color:var(--vt-text-faint);font:10px/1.4 var(--vt-font-mono);text-align:center}

.brand{display:flex;align-items:center;gap:10px;color:var(--vt-text-strong);font-size:14px;font-weight:700;letter-spacing:-.2px;text-decoration:none;white-space:nowrap}
.brand-mark{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--vt-border-strong);border-radius:10px;background:var(--vt-surface-raised);color:var(--vt-text-strong);font-size:15px;font-weight:750;box-shadow:var(--vt-shadow-sm)}

.button,.icon-button,.text-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;font-weight:650;transition:background-color .14s ease,border-color .14s ease,color .14s ease,transform .1s ease,opacity .14s ease}
.button{min-height:38px;padding:8px 13px;border:1px solid var(--vt-border);border-radius:var(--vt-radius-sm);background:var(--vt-surface-raised);color:var(--vt-text);font-size:12.5px;box-shadow:var(--vt-shadow-sm)}
.button:hover:not(:disabled){border-color:var(--vt-border-strong);background:var(--vt-surface-strong);color:var(--vt-text-strong)}
.button:active:not(:disabled),.icon-button:active:not(:disabled){transform:translateY(1px)}
.button.primary{border-color:var(--vt-cta-bg);background:var(--vt-cta-bg);color:var(--vt-cta-text);box-shadow:none}
.button.primary:hover:not(:disabled){border-color:var(--vt-cta-hover);background:var(--vt-cta-hover);color:var(--vt-cta-text)}
.button.secondary,.button.ghost{background:transparent;box-shadow:none}
.button.danger,.danger-action{border-color:color-mix(in srgb,var(--vt-danger) 42%,var(--vt-border));background:var(--vt-danger-soft);color:var(--vt-danger)}
.button.compact{min-height:32px;padding:6px 10px;font-size:11.5px}
.button:disabled,.icon-button:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.icon-button{width:38px;height:38px;padding:0;border:1px solid var(--vt-border);border-radius:var(--vt-radius-sm);background:var(--vt-surface-raised);color:var(--vt-text-muted)}
.icon-button:hover:not(:disabled){border-color:var(--vt-border-strong);background:var(--vt-surface-strong);color:var(--vt-text-strong)}
.text-button{padding:7px 0;background:transparent;color:var(--vt-text-muted);font-size:12px}
.text-button:hover{color:var(--vt-accent-hover)}
.text-button .icon{width:15px;height:15px}

/* Restrained Liquid Glass web approximation. Blur is intentionally limited to
   top-level chrome and primary shells so long transcript lists remain inexpensive. */
:root[data-appearance="glass"] body{
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(58rem 38rem at calc(-12% + var(--vt-ambient-x)) calc(-16% + var(--vt-ambient-y)),color-mix(in srgb,var(--vt-accent) 12%,transparent),transparent 60%),
    radial-gradient(48rem 34rem at calc(111% - var(--vt-ambient-x)) calc(5% + var(--vt-ambient-y)),color-mix(in srgb,#c6a27a 10%,transparent),transparent 64%),
    radial-gradient(44rem 38rem at calc(64% + var(--vt-ambient-x)) calc(108% - var(--vt-ambient-y)),color-mix(in srgb,#78957c 9%,transparent),transparent 67%),
    radial-gradient(35rem 16rem at 48% -10%,rgba(255,255,255,.12),transparent 68%),
    var(--vt-bg);
  background-attachment:fixed;
}
:root[data-appearance="glass"] body::after{
  content:"";
  position:fixed;
  z-index:-1;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(36rem 26rem at calc(86% - var(--vt-ambient-x)) calc(94% - var(--vt-ambient-y)),color-mix(in srgb,var(--vt-accent) 10%,transparent),transparent 70%),
    radial-gradient(30rem 22rem at calc(28% + var(--vt-ambient-x)) calc(38% + var(--vt-ambient-y)),color-mix(in srgb,#a7906f 6%,transparent),transparent 72%);
  mix-blend-mode:screen;
}
:root[data-appearance="glass"] :is(.sidebar,.mobile-header,.topbar,.workspace-footer,.auth-shell,.continue-card,.metric-grid,.import-card,.create-guide,.search-panel){
  border-color:var(--vt-glass-border);
  background:var(--vt-glass-chrome);
  -webkit-backdrop-filter:var(--vt-glass-blur);
  backdrop-filter:var(--vt-glass-blur);
  box-shadow:var(--vt-glass-shadow);
}
:root[data-appearance="glass"] :is(.left-pane,.right-pane,.welcome-panel,.account-panel,.recent-card,.task-card){
  border-color:color-mix(in srgb,var(--vt-glass-border) 72%,var(--vt-border));
  background:var(--vt-glass-panel);
}
:root[data-appearance="glass"] :is(.button,.icon-button,.brand-mark,.service-state,.file-tabs,.content-tabs,.mobile-pane-switch,.focus-mode-control){
  border-color:color-mix(in srgb,var(--vt-glass-border) 72%,var(--vt-border));
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--vt-glass-border) 68%,transparent),var(--vt-shadow-sm);
}
:root[data-appearance="glass"] :is(.topbar,.mobile-header,.workspace-footer)::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--vt-glass-border) 78%,transparent);
  pointer-events:none;
}

/* The system intentionally reserves blur for navigational chrome. Reading and task
   surfaces are optically framed, but stay solid and inexpensive to render. */
:root[data-appearance="glass"] :is(.continue-card,.metric-grid,.import-card,.create-guide,.search-panel){
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
:root[data-appearance="glass"] :is(.sidebar,.mobile-header,.topbar,.workspace-footer,.auth-shell,.search-panel,.appearance-dialog){
  background-image:linear-gradient(122deg,rgba(255,255,255,.14),transparent 28%,transparent 68%,rgba(255,255,255,.035));
}
:root[data-theme="light"][data-appearance="glass"] body{
  background:
    radial-gradient(58rem 38rem at calc(-10% + var(--vt-ambient-x)) calc(-18% + var(--vt-ambient-y)),rgba(217,95,61,.11),transparent 62%),
    radial-gradient(48rem 30rem at calc(110% - var(--vt-ambient-x)) calc(2% + var(--vt-ambient-y)),rgba(198,162,122,.10),transparent 66%),
    radial-gradient(42rem 32rem at 72% 110%,rgba(111,139,117,.09),transparent 67%),
    #f4f3ef;
}

/* Tactile controls: a thin refractive rim, a quieter lower edge, and a tiny press
   response. The accent stays warm clay throughout rather than turning into generic AI blue. */
.button,.icon-button,.brand-mark{
  position:relative;
  border-color:color-mix(in srgb,var(--vt-border) 76%,var(--vt-glass-border));
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 32%,transparent),inset 0 -1px 0 color-mix(in srgb,#000 8%,transparent),var(--vt-shadow-sm);
}
.button.primary{
  background:linear-gradient(145deg,color-mix(in srgb,var(--vt-cta-bg) 88%,#fff),var(--vt-cta-bg));
  box-shadow:0 10px 21px color-mix(in srgb,var(--vt-cta-bg) 25%,transparent),inset 0 1px 0 rgba(255,255,255,.30),inset 0 -1px 0 rgba(91,38,18,.22);
}
.button.primary:hover:not(:disabled){
  filter:saturate(1.03) brightness(1.03);
  box-shadow:0 13px 25px color-mix(in srgb,var(--vt-cta-bg) 31%,transparent),inset 0 1px 0 rgba(255,255,255,.36),inset 0 -1px 0 rgba(91,38,18,.18);
}
.button:not(:disabled):active,.icon-button:not(:disabled):active{transform:translateY(1px) scale(.985)}

.appearance-swatch{position:relative;width:19px;height:19px;display:block;flex:none}
.appearance-swatch::before,.appearance-swatch::after{content:"";position:absolute;border:1px solid currentColor;border-radius:50%}
.appearance-swatch::before{width:11px;height:11px;left:1px;top:1px;background:color-mix(in srgb,var(--vt-accent) 24%,transparent)}
.appearance-swatch::after{width:10px;height:10px;right:1px;bottom:1px;background:color-mix(in srgb,var(--vt-surface-raised) 84%,transparent)}
.appearance-entry{display:inline-flex;align-items:center;gap:8px}
.appearance-overlay{position:fixed;z-index:1100;inset:0;padding:20px;display:grid;place-items:center;background:rgba(30,27,24,.46)}
.appearance-dialog{width:min(520px,100%);padding:20px;border:1px solid var(--vt-glass-border);border-radius:var(--vt-radius-lg);background:var(--vt-glass-chrome);color:var(--vt-text);box-shadow:var(--vt-shadow-overlay);-webkit-backdrop-filter:var(--vt-glass-blur);backdrop-filter:var(--vt-glass-blur)}
.appearance-dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}
.appearance-dialog-head h2{margin:0;color:var(--vt-text-strong);font-size:18px;letter-spacing:-.02em}
.appearance-dialog-head p{margin:5px 0 0;color:var(--vt-text-muted);font-size:12px;line-height:1.6}
.appearance-close{width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--vt-border);border-radius:var(--vt-radius-sm);background:var(--vt-surface-subtle);color:var(--vt-text-muted);font-size:18px}
.appearance-group{margin-top:16px}
.appearance-group>span{display:block;margin-bottom:8px;color:var(--vt-text-muted);font-size:11px;font-weight:700}
.appearance-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.appearance-option{min-height:98px;padding:14px;border:1px solid var(--vt-border);border-radius:var(--vt-radius-md);background:var(--vt-surface-subtle);color:var(--vt-text);text-align:left}
.appearance-option:hover{border-color:var(--vt-border-strong);background:var(--vt-surface-strong)}
.appearance-option[aria-pressed="true"]{border-color:var(--vt-accent-line);box-shadow:inset 0 0 0 1px var(--vt-accent-line)}
.appearance-option strong,.appearance-option small{display:block}.appearance-option strong{margin-bottom:6px;color:var(--vt-text-strong);font-size:13px}.appearance-option small{color:var(--vt-text-muted);font-size:11px;line-height:1.55}
.theme-options{padding:3px;display:grid;grid-template-columns:repeat(3,1fr);gap:3px;border:1px solid var(--vt-border);border-radius:var(--vt-radius-md);background:var(--vt-surface-subtle)}
.theme-option{min-height:36px;border-radius:9px;background:transparent;color:var(--vt-text-muted);font-size:12px;font-weight:650}
.theme-option:hover{color:var(--vt-text-strong)}
.theme-option[aria-pressed="true"]{background:var(--vt-surface-raised);color:var(--vt-text-strong);box-shadow:var(--vt-shadow-sm)}
.appearance-foot{margin:14px 0 0;color:var(--vt-text-faint);font-size:10.5px;line-height:1.5}
.login-appearance{position:fixed;z-index:20;right:18px;top:18px}

.toast-region{position:fixed;z-index:950;right:18px;bottom:18px;width:min(380px,calc(100vw - 36px));display:grid;gap:8px}
.toast{padding:11px 12px;border:1px solid var(--vt-border-strong);border-radius:var(--vt-radius-md);background:var(--vt-surface-raised);box-shadow:var(--vt-shadow-overlay);display:flex;align-items:flex-start;gap:10px;color:var(--vt-text);font-size:12px;line-height:1.55}
.toast.success{border-color:color-mix(in srgb,var(--vt-success) 48%,var(--vt-border))}
.toast.error{border-color:color-mix(in srgb,var(--vt-danger) 52%,var(--vt-border))}
.toast button{margin-left:auto;background:transparent;color:var(--vt-text-faint)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root[data-appearance="glass"] :is(.sidebar,.mobile-header,.topbar,.workspace-footer,.auth-shell,.continue-card,.metric-grid,.import-card,.create-guide,.search-panel){background:var(--vt-surface)}
}

@media(prefers-reduced-transparency:reduce){
  :root[data-appearance="glass"] body{background:var(--vt-bg)}
  :root[data-appearance="glass"] body::after{display:none}
  :root[data-appearance="glass"] :is(.sidebar,.mobile-header,.topbar,.workspace-footer,.auth-shell,.continue-card,.metric-grid,.import-card,.create-guide,.search-panel,.appearance-dialog){background:var(--vt-surface);-webkit-backdrop-filter:none;backdrop-filter:none}
}

@media(max-width:640px){
  .appearance-overlay{padding:12px;align-items:end}
  .appearance-dialog{padding:17px;border-radius:16px}
  .appearance-options{grid-template-columns:1fr}
  .appearance-option{min-height:76px}
  .login-appearance{right:12px;top:12px}
}