@font-face {
  font-family: "Lexend Regular";
  src: url("../assets/fonts/Lexend-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Lexend Black";
  src: url("../assets/fonts/Lexend-Black.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Lexend Light";
  src: url("../assets/fonts/Lexend-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Lexend";
  src: url("../assets/fonts/Lexend-ExtraLight.ttf") format("truetype");
  font-weight: 200;
	letter-spacing: .075rem;
  font-style: normal;
	

}

:root{
  --z-dropdown:1000;
  --z-skeleton:1050;
  --z-toolbar-backdrop:1090;
  --z-toolbar:1100;
  --z-toolbar-popover:1101;
  --z-panel:1400;
  --z-notifications:1500;
  --z-viewer:1900;
  --z-modal:2000;
  --z-modal-2:2050;
  --z-modal-menu:2100;
  --z-modal-toolbar:2200;
  --z-modal-dropdown:2600;
  --z-welcome:2600;
  --z-float:3000;
  --z-hint:3100;
  --z-review:3400;
  --z-review-toolbar:3500;
  --z-loading:4000;
  --z-tooltip:4000;
  --z-tour:5000;
  --ui-surface:#FFFFFF;
  --ui-surface-2:var(--md-neutral-background-2-rest);
  --ui-canvas:#EEF1F5;
  --ui-text:var(--md-neutral-foreground-1-rest);
  --ui-text-2:var(--md-neutral-foreground-3-rest);
  --ui-muted:#8A93A2;
  --ui-muted-light:#A6AEBC;
  --ui-border:#E1E5EB;
  --ui-border-strong:var(--md-neutral-stroke-1-rest);
  --ui-accent:#0040DE;
  --ui-pill-active:#2F353E;
  --ui-pill-active-fg:#FFFFFF;
  --ui-accent-hover:#0033B3;
  --ui-accent-soft:var(--md-color-blue-100);
  --ui-danger:#D64545;
  --ui-danger-hover:#B93A3A;
  --ui-danger-soft:#FDEDEC;
  --ui-success:#1B9E6B;
  --ui-warning:#E08A2E;
  --ui-inverse:#151A22;
  --ui-inverse-2:#1E2430;
  --ui-ai-gradient:linear-gradient(111deg, #0042F0 4%, #FC89FF 51.34%, #FF076E 94.14%);
  --ui-table-cell-size:var(--text-md);
  --ui-table-cell-color:var(--ui-text-2);

  --shadow-xs:0 1px 3px rgba(20,30,50,0.3);
  --shadow-sm:0 4px 16px rgba(20,30,50,0.16);
  --shadow-soft:0 8px 24px rgba(20,30,50,0.16);
  --shadow-popover:0 8px 24px rgba(20,30,50,0.24);
  --shadow-raised:0 12px 28px rgba(20,30,50,0.28);
  --shadow-modal:0 24px 64px rgba(20,30,50,0.32);
  --shadow-panel:-4px -4px 16px rgba(20,30,50,0.10);
  --shadow-rgb:20,30,50;

  --font-sans:"Lexend", Arial, sans-serif;
  --font-display:"Lexend Black", "Lexend", sans-serif;
  --font-regular:"Lexend Regular", Arial, sans-serif;
  --font-light:"Lexend Light", "Lexend", sans-serif;
  --font-mono:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --font-weight-extralight:200;
  --font-weight-light:300;
  --font-weight-regular:400;
  --font-weight-medium:500;
  --font-weight-semibold:600;
  --font-weight-bold:700;
  --font-weight-black:900;
  --text-2xs:9px;
  --text-xs:10px;
  --text-sm:11px;
  --text-md:12px;
  --text-base:13px;
  --text-lg:14px;
  --text-xl:15px;
  --text-2xl:16px;
  --text-3xl:18px;
  --text-4xl:20px;
  --text-5xl:24px;
  --text-6xl:32px;
  --text-7xl:40px;

  --card-bg:var(--ui-surface-2);
  --label-color:var(--ui-text);
  --radius:24px;
  --frame-bg:var(--ui-surface);
  --canvas-bg:var(--ui-canvas);
}

html[data-ui-theme="dark"]{
  color-scheme:dark;
  --ui-surface:#1A1F27;
  --ui-surface-2:#242A34;
  --ui-canvas:#0F1217;
  --ui-text:#E6EAF1;
  --ui-text-2:#B5BECC;
  --ui-muted:#8A93A2;
  --ui-muted-light:#626B7D;
  --ui-border:#2E3540;
  --ui-border-strong:#3D4553;
  --ui-accent:#6B8AF7;
  --ui-accent-hover:#89A2FA;
  --ui-pill-active:#E6EAF1;
  --ui-pill-active-fg:#151A22;
  --ui-accent-soft:rgba(107,138,247,0.18);
  --ui-danger:#E06565;
  --ui-danger-hover:#EB7F7F;
  --ui-danger-soft:rgba(224,101,101,0.18);
  --ui-inverse:#E6EAF1;
  --shadow-xs:0 1px 3px rgba(0,0,0,0.6);
  --shadow-sm:0 0 0 1px rgba(255,255,255,0.06), 0 4px 16px rgba(0,0,0,0.5);
  --shadow-soft:0 0 0 1px rgba(255,255,255,0.06), 0 8px 24px rgba(0,0,0,0.55);
  --shadow-popover:0 0 0 1px rgba(255,255,255,0.08), 0 12px 32px rgba(0,0,0,0.65);
  --shadow-raised:0 0 0 1px rgba(255,255,255,0.08), 0 16px 40px rgba(0,0,0,0.7);
  --shadow-modal:0 0 0 1px rgba(255,255,255,0.10), 0 32px 80px rgba(0,0,0,0.8);
  --shadow-panel:0 0 0 1px rgba(255,255,255,0.05), -4px -4px 20px rgba(0,0,0,0.45);
  --shadow-rgb:0,0,0;
  --md-color-grey-white:#1A1F27;
  --md-color-grey-black:#F2F5F9;
  --md-neutral-background-1-rest:#1A1F27;
  --md-neutral-background-2-rest:#242A34;
  --md-neutral-background-3-rest:#3D4553;
  --md-neutral-foreground-1-rest:#E6EAF1;
  --md-neutral-foreground-2-rest:#C9D0DB;
  --md-neutral-foreground-3-rest:#9AA3B3;
  --md-neutral-stroke-1-rest:#2E3540;
  --md-neutral-stroke-2-rest:#3D4553;
  --md-brand-foreground-1-rest:#6B8AF7;
  --md-brand-background-1-rest:rgba(107,138,247,0.16);
}

.frame{
  color-scheme:light;
  color:var(--slide-text-1);
  --slide-bg:#FFFFFF;
  --slide-surface:#FFFFFF;
  --slide-surface-2:#F2F5F9;
  --slide-surface-3:#D3D9E2;
  --slide-text-1:#2F353E;
  --slide-text-2:#484F5D;
  --slide-text-3:#626B7D;
  --slide-border:#E1E5EB;
  --slide-stroke:#D3D9E2;
  --slide-stroke-2:#B5BECC;
  --slide-accent:#0040DE;
  --slide-accent-soft:#EEF3FE;
  --md-color-grey-white:#FFFFFF;
  --md-color-grey-black:#000000;
  --md-neutral-stroke-on-color-rest:var(--md-color-grey-white);
  --md-neutral-foreground-on-color-rest:var(--md-color-grey-white);
  --md-neutral-background-1-rest:var(--slide-surface);
  --md-neutral-background-2-rest:var(--slide-surface-2);
  --md-neutral-background-3-rest:var(--slide-surface-3);
  --md-neutral-foreground-1-rest:var(--slide-text-1);
  --md-neutral-foreground-2-rest:var(--slide-text-2);
  --md-neutral-foreground-3-rest:var(--slide-text-3);
  --md-neutral-stroke-1-rest:var(--slide-stroke);
  --md-neutral-stroke-2-rest:var(--slide-stroke-2);
  --md-brand-foreground-1-rest:var(--slide-accent);
  --md-brand-background-1-rest:var(--slide-accent-soft);
  --ui-surface:var(--slide-surface);
  --ui-surface-2:var(--slide-surface-2);
  --ui-text:var(--slide-text-1);
  --ui-text-2:var(--slide-text-3);
  --ui-muted:var(--slide-text-3);
  --ui-muted-light:var(--slide-stroke-2);
  --ui-border:var(--slide-border);
  --ui-border-strong:var(--slide-stroke);
  --ui-accent:var(--slide-accent);
  --ui-accent-hover:#0033B3;
  --ui-accent-soft:var(--slide-accent-soft);
  --frame-bg:var(--slide-bg);
  --card-bg:var(--slide-surface-2);
  --label-color:var(--slide-text-1);
}
.frame[data-theme="dark"]{
  color-scheme:dark;
  --slide-bg:#151A22;
  --slide-surface:#1F252F;
  --slide-surface-2:#2A313D;
  --slide-surface-3:#3A4250;
  --slide-text-1:#F2F5F9;
  --slide-text-2:#D3D9E2;
  --slide-text-3:#A6AEBC;
  --slide-border:#333B47;
  --slide-stroke:#3A4250;
  --slide-stroke-2:#4A5366;
  --slide-accent:#6B8AF7;
  --slide-accent-soft:rgba(107,138,247,0.18);
  --ui-accent-hover:#89A2FA;
}

* { box-sizing: border-box; }

html body :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]), select, textarea):not(.frame *, .home-generate-textarea, .home-code-input){
  background-color:transparent;
}
html body textarea:not(.home-generate-textarea, .home-code-input, .slide-gen-textarea){ overflow-y:hidden; }

.app-tooltip{
  display:none; position:fixed; z-index:var(--z-tooltip); max-width:320px;
  padding:6px 10px; border-radius:8px;
  background:var(--ui-text); color:var(--md-color-grey-white); font-family:var(--font-sans); font-size:var(--text-md); line-height:1.4;
  box-shadow:0 2px 8px rgba(var(--shadow-rgb),0.2);
  pointer-events:none; white-space:normal; word-break:break-word;
}
.app-tooltip.visible{ display:block; }

.spell-error{ text-decoration-line:underline; text-decoration-style:wavy; text-decoration-color:var(--ui-danger); text-underline-offset:2px; }
.spell-popover{
  position:fixed; z-index:var(--z-modal); background:var(--md-color-grey-white); border:1px solid var(--ui-border);
  border-radius:8px; box-shadow:var(--shadow-soft); padding:4px;
  display:flex; align-items:center; gap:2px; font-family:var(--font-sans); font-size:var(--text-base);
}
.spell-suggestion{ border:none; background:none; padding:6px 10px; border-radius:5px; cursor:pointer; color:var(--ui-text); white-space:nowrap; }
.spell-suggestion:hover{ background:var(--md-neutral-background-2-rest); }
.spell-no-suggestion{ padding:6px 10px; color:var(--ui-muted); white-space:nowrap; }
.spell-ignore{ border:none; background:none; padding:4px 6px; border-radius:5px; cursor:pointer; color:var(--ui-muted); display:flex; }
.spell-ignore:hover{ background:var(--md-neutral-background-2-rest); color:var(--ui-text); }

body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--ui-text);
  height:100vh;
  display:flex;
  flex-direction:column;
}
body > boundtest{ flex-shrink:0; }
body.editor-body{ background:var(--md-color-grey-white); }
.mobile-only{ display:none !important; }

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  z-index:20;
  padding:14px 16px 10px;
  flex-shrink:0;
  min-height:73px;
}
.topbar-brand{ display:flex; align-items:center; gap:6px; }
.topbar-brand > .topbar-brand-logo{ margin-left:6px; }
.topbar-brand-favicon{ height:26px; width:auto; display:block; }
.topbar-brand-logo-link:has(> .topbar-brand-favicon){ width:64px; margin-left:-16px; justify-content:center; align-items:center; }
.topbar-brand-logo-link:has(> .topbar-brand-favicon) + .sidebar-collapse-btn{ margin-left:-6px; }
.sidebar-collapse-btn i{ font-size:var(--text-xl); }
.sidebar-collapse-btn i.fa-solid, .sidebar-collapse-btn.is-open i.fa-regular{ display:none; }
.sidebar-collapse-btn.is-open i.fa-solid{ display:inline-block; }
.topbar-brand-logo{ height:20px; width:auto; display:block; flex-shrink:0; }
html[data-ui-theme="dark"] .topbar-brand-logo{ content:url("/assets/logo/logo-oneslide-dark.svg"); }
.topbar h1{ font-size:var(--text-xl); font-weight:var(--font-weight-semibold); color:var(--ui-text); margin:0; }
.topbar-actions{ display:flex; gap:8px; align-items:center; }
.topbar-sep{ width:1px; height:22px; background:var(--ui-border); flex-shrink:0; }
.hidden{ display:none !important; }
.icon-flip-x{ transform:scaleX(-1); }
.mini-segment-legend{ position:relative; }
.mini-segment-legend-label{
  position:absolute; left:8px; top:0; transform:translateY(-50%);
  font-size:var(--text-2xs); letter-spacing:0.03em; color:var(--ui-muted);
  background:var(--md-color-grey-white); padding:0 4px; white-space:nowrap; pointer-events:none;
}
.split-menu-divider{ height:1px; background:var(--ui-border); margin:4px 0; }

.deck-access-denied-screen{
  position:fixed; inset:0; z-index:var(--z-float); background:var(--ui-surface); color:var(--ui-text);
  display:flex; align-items:center; justify-content:center; padding:24px; font-family:var(--font-sans);
}
.deck-access-denied-logo{ position:absolute; top:14px; left:16px; display:flex; }
body.deck-access-denied #confirmDialogOverlay{ z-index:calc(var(--z-float) + 1); }
.deck-access-denied-logo img{ height:26px; width:auto; }
.deck-access-denied-card{ display:flex; flex-direction:column; align-items:center; gap:12px; max-width:460px; text-align:center; }
.deck-access-denied-card img{ width:120px; height:120px; }
.deck-access-denied-card h1{ margin:8px 0 0; font-size:var(--text-xl); font-weight:var(--font-weight-semibold); }
.deck-access-denied-card p{ margin:0; color:var(--ui-text-2); font-size:var(--text-base); line-height:1.5; }
.deck-access-denied-actions{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; justify-content:center; }
.deck-access-denied-actions .btn{ text-decoration:none; display:inline-flex; align-items:center; }
