/* SolaWord Studio — SaaS design system.
   Dark by design (the brand was already dark + gold); this file gives it
   real structure: tokens, elevation, a sidebar+header shell, and a small
   motion vocabulary (transform/opacity only, ease-out, <300ms — see
   emil-design-eng / apple-design principles this was built against). */

:root{
  /* ---- palette ---- */
  --bg: #0b0b0c;
  --bg-elevated: #131315;
  --surface: #17171a;
  --surface-2: #1d1d21;
  --surface-hover: #232328;
  --border: #2a2a30;
  --border-soft: rgba(255,255,255,0.06);
  --text: #f2efe9;
  --text-dim: #a8a49c;
  --text-faint: #706c65;
  --accent: #f5d76e;
  --accent-ink: #14120a;
  --accent-soft: rgba(245,215,110,0.14);
  --danger: #ef6f6f;
  --danger-soft: rgba(239,111,111,0.12);
  --success: #6ee7a0;
  --success-soft: rgba(110,231,160,0.12);
  --info: #7db8f2;

  /* ---- type scale (Apple: tighten large, loosen small) ---- */
  --font-ui: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  --fs-xs: 12px;  --lh-xs: 1.5;   --ls-xs: 0.01em;
  --fs-sm: 13px;  --lh-sm: 1.5;   --ls-sm: 0.005em;
  --fs-md: 14.5px;--lh-md: 1.55;  --ls-md: 0;
  --fs-lg: 17px;  --lh-lg: 1.4;   --ls-lg: -0.005em;
  --fs-xl: 22px;  --lh-xl: 1.25;  --ls-xl: -0.01em;
  --fs-2xl:30px;  --lh-2xl:1.15;  --ls-2xl:-0.015em;

  /* ---- spacing scale ---- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 56px;

  /* ---- radius / elevation ---- */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow-md: 0 8px 24px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.4);
  --shadow-lg: 0 24px 64px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.4);

  /* ---- motion (Emil Kowalski's timing table) ---- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-press: 120ms;
  --dur-fast: 160ms;
  --dur-base: 200ms;
  --dur-panel: 280ms;

  --sidebar-w: 244px;
  --header-h: 64px;
}

*{ box-sizing: border-box }
html,body{ height: 100% }
body{
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-ui); font-size: var(--fs-md); line-height: var(--lh-md);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4{ margin: 0; font-weight: 700; letter-spacing: var(--ls-lg) }
a{ color: var(--accent); text-decoration: none }
::selection{ background: var(--accent-soft); color: var(--text) }

/* thin, unobtrusive scrollbars — a detail nobody notices consciously */
*{ scrollbar-width: thin; scrollbar-color: var(--border) transparent }
*::-webkit-scrollbar{ width: 9px; height: 9px }
*::-webkit-scrollbar-thumb{ background: var(--border); border-radius: 99px; border: 2px solid transparent; background-clip: content-box }
*::-webkit-scrollbar-track{ background: transparent }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important }
}

/* ------------------------------------------------------------------ *
 * Layout shell
 * ------------------------------------------------------------------ */
#app{ min-height: 100vh }

.shell{ display: flex; min-height: 100vh }

.sidebar{
  width: var(--sidebar-w); flex: none; position: sticky; top: 0; height: 100vh;
  background: var(--bg-elevated); border-right: 1px solid var(--border-soft);
  display: flex; flex-direction: column; z-index: 30;
  transition: transform var(--dur-panel) var(--ease-in-out);
}
.sidebar-brand{
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-5) var(--sp-5) var(--sp-4);
}
.sidebar-brand img{ width: 34px; height: 34px; border-radius: 9px; display: block }
.sidebar-brand b{ font-family: "Georgia", serif; font-size: var(--fs-lg); letter-spacing: -0.01em }
.sidebar-brand b em{ font-style: normal; color: var(--accent) }

.nav-scroll{ flex: 1; overflow-y: auto; padding: var(--sp-2) var(--sp-3) var(--sp-6) }
.nav-group{ margin-top: var(--sp-5) }
.nav-group:first-child{ margin-top: 0 }
.nav-group-label{
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--text-faint); padding: 0 var(--sp-3) var(--sp-2);
}
.nav-item{
  display: flex; align-items: center; gap: var(--sp-3); width: 100%;
  padding: 9px var(--sp-3); border-radius: var(--r-sm); border: none; background: none;
  color: var(--text-dim); font-size: var(--fs-sm); font-weight: 600; text-align: left; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nav-item .ic{ width: 18px; height: 18px; flex: none; opacity: 0.85 }
.nav-item:hover{ background: var(--surface-hover); color: var(--text) }
.nav-item.active{ background: var(--accent-soft); color: var(--accent) }
.nav-item .badge-count{
  margin-left: auto; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 99px;
  background: var(--surface-2); color: var(--text-dim);
}
.nav-item.active .badge-count{ background: rgba(245,215,110,.22); color: var(--accent) }

.main{ flex: 1; min-width: 0; display: flex; flex-direction: column }

.header{
  height: var(--header-h); flex: none; display: flex; align-items: center; gap: var(--sp-4);
  padding: 0 var(--sp-6); position: sticky; top: 0; z-index: 20;
  background: rgba(11,11,12,0.72); backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid var(--border-soft);
}
.header-title{ font-size: var(--fs-lg); font-weight: 700; letter-spacing: var(--ls-lg) }
.header-sub{ font-size: var(--fs-xs); color: var(--text-dim); margin-top: 1px }
.header-spacer{ flex: 1 }
.menu-btn{ display: none }

.user-menu{ position: relative }
.user-chip{
  display: flex; align-items: center; gap: var(--sp-2); padding: 6px 10px 6px 6px;
  border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--border-soft);
  cursor: pointer; transition: background var(--dur-fast) var(--ease-out);
}
.user-chip:hover{ background: var(--surface-hover) }
.user-avatar{
  width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12.5px; flex: none;
}
.user-chip span{ font-size: var(--fs-xs); color: var(--text-dim); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

.content{ flex: 1; padding: var(--sp-6); max-width: 1180px; width: 100%; margin: 0 auto }
.content-narrow{ max-width: 760px }

.page-head{ margin-bottom: var(--sp-6) }
.page-head h1{ font-size: var(--fs-2xl); letter-spacing: var(--ls-2xl) }
.page-head p{ color: var(--text-dim); font-size: var(--fs-sm); margin-top: 6px; max-width: 62ch }

.sidebar-scrim{
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 25;
  opacity: 0; transition: opacity var(--dur-panel) var(--ease-out);
}
.sidebar-scrim.show{ display: block; opacity: 1 }

/* ------------------------------------------------------------------ *
 * Primitives
 * ------------------------------------------------------------------ */
.grid{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5) }
.grid-3{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5) }
@media (max-width: 980px){ .grid, .grid-3{ grid-template-columns: 1fr } }

.card{
  background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-lg);
  padding: var(--sp-6); box-shadow: var(--shadow-sm);
}
.card-tight{ padding: var(--sp-4) var(--sp-5) }
.card-full{ grid-column: 1 / -1 }
.card h3{ font-size: var(--fs-lg); margin-bottom: 4px }
.card > p.muted:first-of-type{ margin-bottom: var(--sp-4) }

.stat-card{ display: flex; flex-direction: column; gap: 6px }
.stat-card .stat-label{ font-size: var(--fs-xs); color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: .06em }
.stat-card .stat-value{ font-size: var(--fs-2xl); font-weight: 800; letter-spacing: var(--ls-2xl) }
.stat-card .stat-note{ font-size: var(--fs-xs); color: var(--text-faint) }

label{
  display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-dim); margin: var(--sp-4) 0 var(--sp-1);
}
label:first-child{ margin-top: 0 }
label.inline{ display: flex; align-items: center; gap: 8px; text-transform: none; font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0; color: var(--text) }

input[type=text], input[type=email], input[type=password], input[type=number], input[type=file], select, textarea{
  width: 100%; padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid var(--border);
  background: var(--bg-elevated); color: var(--text); font-family: inherit; font-size: var(--fs-sm);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
input::placeholder, textarea::placeholder{ color: var(--text-faint) }
input:focus, select:focus, textarea:focus{
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
textarea{ resize: vertical; font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 12.5px; line-height: 1.6 }
input[type=checkbox]{ width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer }
input[type=range]{ width: 100%; accent-color: var(--accent); height: 4px; cursor: pointer }

select{ appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23a8a49c'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 34px }

.field-row{ display: flex; gap: var(--sp-3) }
.field-row > *{ flex: 1 }

button{ font-family: inherit; cursor: pointer }
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px; border-radius: var(--r-sm); border: 1px solid transparent;
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.005em;
  transition: transform var(--dur-press) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.btn:active{ transform: scale(0.97) }
.btn:disabled{ opacity: 0.5; cursor: not-allowed; transform: none }
.btn-primary{ background: var(--accent); color: var(--accent-ink) }
.btn-primary:hover:not(:disabled){ background: #f8e08a }
.btn-ghost{ background: var(--surface-2); color: var(--text); border-color: var(--border) }
.btn-ghost:hover:not(:disabled){ background: var(--surface-hover) }
.btn-danger{ background: var(--danger-soft); color: var(--danger); border-color: rgba(239,111,111,.3) }
.btn-danger:hover:not(:disabled){ background: rgba(239,111,111,.2) }
.btn-block{ width: 100%; padding: 11px 16px }
.btn-sm{ padding: 6px 12px; font-size: 12.5px }
.btn-icon{ padding: 8px; border-radius: var(--r-sm) }

.row{ display: flex; gap: var(--sp-3); align-items: center }
.row-between{ display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3) }
.stack{ display: flex; flex-direction: column; gap: var(--sp-3) }

.muted{ color: var(--text-dim); font-size: var(--fs-sm) }
.faint{ color: var(--text-faint); font-size: var(--fs-xs) }

.badge{
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
}
.badge::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor }
.badge-on{ background: var(--success-soft); color: var(--success) }
.badge-off{ background: var(--surface-2); color: var(--text-faint) }
.badge-warn{ background: rgba(245,215,110,.14); color: var(--accent) }
.badge-danger{ background: var(--danger-soft); color: var(--danger) }

.pw-wrap{ position: relative }
.pw-wrap input{ padding-right: 42px }
.eye-btn{
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%); background: none; border: none;
  color: var(--text-dim); font-size: 16px; padding: 6px 8px; border-radius: var(--r-sm);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.eye-btn:hover{ background: var(--surface-hover); color: var(--text) }

.divider{ height: 1px; background: var(--border-soft); margin: var(--sp-5) 0; border: none }

/* toast — top-right stack, colored by status (ok/err/warn/info) */
#toasts{
  position: fixed; top: var(--sp-5); right: var(--sp-5); z-index: 300;
  display: flex; flex-direction: column; gap: 10px;
  width: min(360px, calc(100vw - 2 * var(--sp-5)));
}
.toast{
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--text-faint);
  border-radius: var(--r-md); padding: 12px 14px; box-shadow: var(--shadow-md);
  opacity: 0; transform: translateX(28px) scale(0.97);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.toast.show{ opacity: 1; transform: translateX(0) scale(1) }
.toast-ic{
  flex: none; width: 20px; height: 20px; border-radius: 50%; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; line-height: 1;
}
.toast-msg{ flex: 1; font-size: var(--fs-sm); font-weight: 600; line-height: 1.45; color: var(--text) }
.toast.ok{ border-left-color: var(--success) }
.toast.ok .toast-ic{ background: var(--success-soft); color: var(--success) }
.toast.err{ border-left-color: var(--danger) }
.toast.err .toast-ic{ background: var(--danger-soft); color: var(--danger) }
.toast.warn{ border-left-color: var(--accent) }
.toast.warn .toast-ic{ background: var(--accent-soft); color: var(--accent) }
.toast.info{ border-left-color: var(--info) }
.toast.info .toast-ic{ background: rgba(125,184,242,.14); color: var(--info) }

/* inline spinner — dropped into a busy button's own content, so it
   inherits that button's text color (currentColor) automatically */
@keyframes btn-spin{ to{ transform: rotate(360deg) } }
.spinner{
  display: inline-block; width: 12px; height: 12px; margin-right: 7px; vertical-align: -2px;
  border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
  animation: btn-spin .6s linear infinite; opacity: .85;
}

/* skeleton loading */
.skel{ background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-hover) 37%, var(--surface-2) 63%); background-size: 400% 100%; animation: skel-shimmer 1.4s ease infinite; border-radius: var(--r-sm) }
@keyframes skel-shimmer{ 0%{background-position:100% 0} 100%{background-position:0 0} }

/* fade/slide-in for page content (occasional, not repeated hundreds of times/day) */
.page-enter{ animation: page-in var(--dur-panel) var(--ease-out) both }
@keyframes page-in{ from{ opacity: 0; transform: translateY(6px) } to{ opacity: 1; transform: translateY(0) } }

/* card grids with template previews, video grids etc */
.tpl-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-4) }
.tpl-card{
  background: var(--bg-elevated); border: 2px solid var(--border); border-radius: var(--r-md); overflow: hidden;
  cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.tpl-card:hover{ border-color: var(--text-faint); transform: translateY(-2px) }
.tpl-card.selected{ border-color: var(--accent) }
.tpl-card .tpl-shot{ width: 100%; aspect-ratio: 9/16; object-fit: cover; display: block; background: #000 }
.tpl-card .tpl-collage{ width: 100%; aspect-ratio: 9/16; display: grid; grid-template-columns: 1fr 1fr; background: #000; position: relative }
.tpl-card .tpl-collage img{ width: 100%; height: 100%; object-fit: cover; opacity: .7 }
.tpl-card .tpl-collage span{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 30px; background: rgba(0,0,0,.35) }
.tpl-info{ padding: var(--sp-3) var(--sp-4) }
.tpl-name{ font-weight: 700; font-size: var(--fs-sm); display: flex; align-items: center; justify-content: space-between; gap: 6px }
.tpl-check{ font-size: 10px; font-weight: 800; color: var(--accent-ink); background: var(--accent); padding: 2px 7px; border-radius: 99px }
.tpl-desc{ margin-top: 3px; line-height: 1.4 }

.preview-wrap{ display: flex; gap: var(--sp-5); align-items: flex-start; flex-wrap: wrap }
.preview-frame-wrap{
  width: 260px; height: 462px; overflow: hidden; border-radius: var(--r-md); background: #000; flex-shrink: 0;
  border: 1px solid var(--border); position: relative; box-shadow: var(--shadow-md);
}
.preview-frame-wrap iframe{ width: 1080px; height: 1920px; border: none; transform: scale(0.2407); transform-origin: top left; display: block }

.videos-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-4) }
.video-card{ border-radius: var(--r-md); overflow: hidden; background: var(--surface); border: 1px solid var(--border-soft) }
.video-card video{ width: 100%; aspect-ratio: 9/16; object-fit: cover; background: #000; display: block }
.video-card .vc-body{ padding: var(--sp-3) var(--sp-4) }

table.dt{ width: 100%; border-collapse: collapse; font-size: var(--fs-sm) }
table.dt th{ text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); font-weight: 700; padding: 8px 12px; border-bottom: 1px solid var(--border) }
table.dt td{ padding: 10px 12px; border-bottom: 1px solid var(--border-soft); vertical-align: middle }
table.dt tr:last-child td{ border-bottom: none }
.table-wrap{ overflow-x: auto; border-radius: var(--r-md); border: 1px solid var(--border-soft) }

.empty-state{ text-align: center; padding: var(--sp-9) var(--sp-5); color: var(--text-dim) }
.empty-state .ic{ font-size: 34px; margin-bottom: var(--sp-2); opacity: .6 }

.tz-list{ display: flex; flex-direction: column; gap: var(--sp-2) }
.tz-row{
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: var(--r-md);
}
.tz-name{ font-weight: 700; font-size: var(--fs-sm) }
.tz-local{ font-size: var(--fs-xs); color: var(--text-dim) }

.pill-select{ display: flex; gap: 6px; flex-wrap: wrap }
.pill-opt{
  padding: 5px 12px; border-radius: 99px; border: 1px solid var(--border); background: var(--bg-elevated);
  font-size: 12.5px; font-weight: 600; color: var(--text-dim); cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.pill-opt.selected{ background: var(--accent-soft); border-color: var(--accent); color: var(--accent) }

/* ------------------------------------------------------------------ *
 * Auth pages
 * ------------------------------------------------------------------ */
.auth-shell{
  min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; background: var(--bg);
}
.auth-visual{
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  padding: var(--sp-8); background:
    radial-gradient(900px 700px at 15% 15%, rgba(245,215,110,0.10), transparent 60%),
    radial-gradient(700px 600px at 85% 85%, rgba(245,215,110,0.06), transparent 60%),
    var(--bg-elevated);
  border-right: 1px solid var(--border-soft);
}
.auth-visual .visual-fill{ flex: 1; display: flex; flex-direction: column; justify-content: center; gap: var(--sp-6) }
.auth-visual .stat-row{ display: flex; gap: var(--sp-7) }
.auth-visual .stat-row .n{ font-size: 34px; font-weight: 800; letter-spacing: -0.02em; color: var(--accent) }
.auth-visual .stat-row .l{ font-size: 12px; color: var(--text-dim); margin-top: 2px }
.auth-visual .quote{ max-width: 420px; font-family: Georgia, serif; font-size: 26px; line-height: 1.4; color: var(--text) }
.auth-visual .quote span{ color: var(--accent) }
.auth-visual .quote-ref{ margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--text-dim); letter-spacing: .04em }
.auth-form-col{ display: flex; align-items: center; justify-content: center; padding: var(--sp-6) }
.auth-card{ width: 100%; max-width: 380px }
.auth-card .brand-row{ display: flex; align-items: center; gap: 10px; margin-bottom: var(--sp-7) }
.auth-card .brand-row img{ width: 36px; height: 36px; border-radius: 9px }
.auth-card .brand-row b{ font-family: Georgia, serif; font-size: 19px }
.auth-card h1{ font-size: var(--fs-2xl); margin-bottom: 6px }
.auth-card > p{ color: var(--text-dim); font-size: var(--fs-sm); margin-bottom: var(--sp-6) }
.auth-toggle{ display: flex; gap: 4px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-md); padding: 4px; margin-bottom: var(--sp-6) }
.auth-toggle button{ flex: 1; padding: 8px; border: none; background: none; border-radius: var(--r-sm); font-weight: 700; font-size: var(--fs-sm); color: var(--text-dim); transition: all var(--dur-fast) var(--ease-out) }
.auth-toggle button.active{ background: var(--accent); color: var(--accent-ink) }

@media (max-width: 900px){
  .auth-shell{ grid-template-columns: 1fr }
  .auth-visual{ display: none }
}

/* ------------------------------------------------------------------ *
 * Responsive dashboard
 * ------------------------------------------------------------------ */
@media (max-width: 900px){
  .sidebar{ position: fixed; left: 0; top: 0; transform: translateX(-100%); box-shadow: var(--shadow-lg) }
  .sidebar.open{ transform: translateX(0) }
  .menu-btn{ display: inline-flex }
  .header{ padding: 0 var(--sp-4) }
  .content{ padding: var(--sp-4) }
  .user-chip span{ display: none }
  .preview-frame-wrap{ width: 100%; max-width: 300px; height: auto; aspect-ratio: 9/16 }
}