:root{
  --bg: #0d1117;
  --bg-panel: #141a24;
  --bg-panel-2: #1b2330;
  --bg-panel-3: #212b3a;
  --border: #262f3d;
  --border-soft: #1d2531;
  --text: #e6e9ef;
  --text-dim: #8b93a3;
  --amber: #f5a623;
  --amber-2: #ffbb44;
  --teal: #2dd4bf;
  --coral: #ff6b6b;
  --violet: #a78bfa;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", "Inter",
    "Helvetica Neue", Roboto, Arial, sans-serif;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --ease: cubic-bezier(.2,.7,.3,1);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.24);
  --shadow-md: 0 8px 24px -6px rgba(0,0,0,.45);
  --shadow-lg: 0 20px 48px -12px rgba(0,0,0,.55);
  --shadow-glow-amber: 0 6px 20px -4px rgba(245,166,35,.35);
}
*{box-sizing:border-box;}
::selection{background:rgba(245,166,35,.3); color:#fff;}

body{
  margin:0; font-family:var(--font-sans);
  background:
    radial-gradient(1100px circle at 12% -8%, rgba(245,166,35,.07), transparent 42%),
    radial-gradient(900px circle at 100% 0%, rgba(45,212,191,.05), transparent 38%),
    var(--bg);
  background-attachment:fixed;
  color:var(--text);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-size:14px; line-height:1.5;
}
.app{display:flex; min-height:100vh;}

/* ---------------------------------------------------------------------
   Sidebar
--------------------------------------------------------------------- */
.sidebar{
  width:252px; background:rgba(20,26,36,.7); backdrop-filter:blur(14px);
  border-right:1px solid var(--border-soft);
  padding:20px 14px; position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column;
}

.brand{
  display:flex; align-items:center; gap:10px; margin-bottom:22px; padding:4px 6px 18px;
  border-bottom:1px solid var(--border-soft);
  color:inherit; text-decoration:none;
}
.brand-mark{
  width:32px; height:32px; border-radius:9px; flex-shrink:0;
  background:linear-gradient(155deg, var(--amber-2), var(--amber) 60%, #d9880f);
  box-shadow:0 4px 14px -2px rgba(245,166,35,.5), inset 0 1px 0 rgba(255,255,255,.35);
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.brand-mark svg{width:18px; height:18px;}
.brand:hover .brand-mark{transform:scale(1.06) rotate(-4deg); box-shadow:0 6px 18px -2px rgba(245,166,35,.65), inset 0 1px 0 rgba(255,255,255,.4);}
.brand-word{font-weight:700; font-size:16px; letter-spacing:-.2px; line-height:1.15;}
.brand-word small{display:block; font-weight:500; font-size:10.5px; letter-spacing:.5px; text-transform:uppercase; color:var(--text-dim); margin-top:1px;}

.nav-group-label{font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.6px; color:var(--text-dim); margin:16px 10px 6px; opacity:.75;}
.sidebar nav a{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:var(--radius-sm); color:var(--text);
  text-decoration:none; font-size:13.5px; font-weight:500; margin-bottom:2px; position:relative;
  transition:background .15s var(--ease), color .15s var(--ease), transform .15s var(--ease);
}
.sidebar nav a .nav-icon{width:17px; height:17px; flex-shrink:0; color:var(--text-dim); transition:color .15s var(--ease);}
.sidebar nav a:hover{background:var(--bg-panel-2); transform:translateX(1px);}
.sidebar nav a:hover .nav-icon{color:var(--text);}
.sidebar nav a.active{background:linear-gradient(90deg, rgba(245,166,35,.16), rgba(245,166,35,.02)); color:var(--amber); font-weight:600;}
.sidebar nav a.active .nav-icon{color:var(--amber);}
.sidebar nav a.active::before{
  content:""; position:absolute; left:-14px; top:50%; transform:translateY(-50%);
  width:3px; height:16px; border-radius:0 3px 3px 0; background:var(--amber);
}
.nav-sep{height:1px; background:var(--border-soft); margin:14px 4px;}

.sidebar-user{margin-top:auto; padding-top:14px;}
.sidebar-user-info{margin-bottom:10px; padding:0 6px;}
.btn-logout{
  display:flex; align-items:center; gap:9px; width:100%; box-sizing:border-box;
  padding:9px 12px; border-radius:var(--radius-sm); background:var(--bg-panel-2);
  border:1px solid var(--border); color:var(--text-dim); text-decoration:none;
  font-size:13px; font-weight:600; transition:.15s var(--ease);
}
.btn-logout svg{width:15px; height:15px; flex-shrink:0;}
.btn-logout:hover{border-color:var(--coral); color:var(--coral); background:rgba(255,107,107,.1); transform:translateY(-1px);}

/* ---------------------------------------------------------------------
   Content
--------------------------------------------------------------------- */
.content{flex:1; padding:32px 38px; max-width:1220px;}
h1{font-size:23px; margin:0 0 6px; font-weight:700; letter-spacing:-.3px;}
h2{font-weight:700; letter-spacing:-.2px;}
h3{font-weight:700; letter-spacing:-.1px;}
.subtitle{color:var(--text-dim); margin-bottom:26px; font-size:14px;}

.card{
  background:linear-gradient(180deg, var(--bg-panel-3) 0%, var(--bg-panel) 100%);
  border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:22px; margin-bottom:18px; box-shadow:var(--shadow-md);
  transition:border-color .2s var(--ease);
}
.grid{display:grid; gap:16px;}
.grid-2{grid-template-columns:1fr 1fr;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:820px){ .grid-2, .grid-3, .grid-4{grid-template-columns:1fr;} }

.stat{
  background:var(--bg-panel-2); border:1px solid var(--border-soft); border-radius:var(--radius-md);
  padding:18px 16px; text-align:center; transition:transform .18s var(--ease), border-color .18s var(--ease);
}
.stat:hover{transform:translateY(-2px); border-color:var(--border);}
.stat .num{font-size:28px; font-weight:800; color:var(--teal); letter-spacing:-.5px; font-variant-numeric:tabular-nums;}
.stat .lbl{font-size:12px; color:var(--text-dim); margin-top:5px; font-weight:500;}

label{font-size:12.5px; color:var(--text-dim); display:block; margin:10px 0 5px; font-weight:500;}
input[type=text], input[type=number], input[type=time], input[type=datetime-local], input[type=password], textarea, select{
  width:100%; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm);
  color:var(--text); padding:10px 12px; font-size:14px; font-family:inherit;
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease);
}
input[type=text]:hover, input[type=number]:hover, input[type=time]:hover, input[type=datetime-local]:hover,
input[type=password]:hover, textarea:hover, select:hover{border-color:#374156;}
input:focus, textarea:focus, select:focus{
  outline:none; border-color:var(--amber); box-shadow:0 0 0 3px rgba(245,166,35,.14); background:var(--bg-panel);
}
textarea{min-height:70px; resize:vertical;}
input::placeholder, textarea::placeholder{color:#586074;}

.queue-time-input{width:auto; display:inline-block; padding:5px 8px; font-size:13px;}

button, .btn{
  background:var(--bg-panel-2); border:1px solid var(--border); color:var(--text);
  padding:9px 16px; border-radius:var(--radius-sm); cursor:pointer; font-size:13.5px; font-weight:600;
  text-decoration:none; font-family:inherit;
  display:inline-flex; align-items:center; gap:6px;
  transition:border-color .15s var(--ease), background .15s var(--ease), transform .12s var(--ease), box-shadow .15s var(--ease);
}
button:hover, .btn:hover{border-color:var(--amber); transform:translateY(-1px);}
button:active, .btn:active{transform:translateY(0);}
.btn-primary{
  background:linear-gradient(155deg, var(--amber-2), var(--amber)); color:#241900; border-color:transparent;
  font-weight:700; box-shadow:var(--shadow-glow-amber);
}
.btn-primary:hover{filter:brightness(1.06); box-shadow:0 8px 24px -4px rgba(245,166,35,.45); transform:translateY(-1px);}
.btn-teal{background:linear-gradient(155deg,#4fe3d1,var(--teal)); color:#00201c; border-color:transparent; font-weight:700; box-shadow:0 6px 20px -4px rgba(45,212,191,.35);}
.btn-teal:hover{filter:brightness(1.06); transform:translateY(-1px);}
.btn-coral{background:linear-gradient(155deg,#ff8a8a,var(--coral)); color:#2b0000; border-color:transparent; font-weight:700; box-shadow:0 6px 20px -4px rgba(255,107,107,.35);}
.btn-coral:hover{filter:brightness(1.06); transform:translateY(-1px);}
.btn-ghost{background:transparent; box-shadow:none;}
.btn-ghost:hover{background:var(--bg-panel-2);}
.btn-sm{padding:6px 11px; font-size:12px; border-radius:7px;}
button:disabled, .btn:disabled{opacity:.4; cursor:not-allowed; transform:none !important; box-shadow:none !important;}

table{width:100%; border-collapse:collapse; font-size:13.5px;}
th, td{text-align:left; padding:11px 10px; border-bottom:1px solid var(--border-soft);}
th{color:var(--text-dim); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.4px;}
tbody tr{transition:background .12s var(--ease);}
tbody tr:hover{background:rgba(255,255,255,.02);}

.badge{padding:4px 10px; border-radius:20px; font-size:10.5px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; display:inline-flex; align-items:center; gap:5px;}
.badge::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor;}
.badge-draft{background:rgba(139,147,163,.16); color:#aeb6c4;}
.badge-queued{background:rgba(245,166,35,.16); color:var(--amber);}
.badge-posted{background:rgba(45,212,191,.16); color:var(--teal);}
.badge-failed{background:rgba(255,107,107,.16); color:var(--coral);}

.dropzone{
  border:2px dashed var(--border); border-radius:var(--radius-md); padding:34px; text-align:center;
  color:var(--text-dim); cursor:pointer; transition:.18s var(--ease); background:rgba(255,255,255,.012);
}
.dropzone:hover, .dropzone.drag{border-color:var(--amber); color:var(--amber); background:rgba(245,166,35,.04);}

.thumbs{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px;}
.thumb{position:relative; width:110px; height:138px; border-radius:var(--radius-sm); overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow-sm);}
.thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.thumb .role-tag{position:absolute; top:4px; left:4px; background:rgba(0,0,0,.65); backdrop-filter:blur(2px); color:#fff; font-size:10px; padding:2px 6px; border-radius:6px;}
.thumb .remove{position:absolute; top:4px; right:4px; background:rgba(0,0,0,.65); color:#fff; border:none; border-radius:6px; width:20px; height:20px; font-size:12px; line-height:1; cursor:pointer; transition:.15s;}
.thumb .remove:hover{background:var(--coral); color:#2b0000;}

.step{display:none;}
.step.active{display:block; animation:fadeIn .25s var(--ease);}
@keyframes fadeIn{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);}}
.step-indicator{display:flex; gap:8px; margin-bottom:22px;}
.step-dot{width:28px; height:28px; border-radius:50%; background:var(--bg-panel-2); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:var(--text-dim); border:1px solid var(--border); transition:.2s var(--ease);}
.step-dot.active{background:linear-gradient(155deg,var(--amber-2),var(--amber)); color:#241900; border-color:transparent; box-shadow:var(--shadow-glow-amber);}
.step-dot.done{background:var(--teal); color:#00201c; border-color:transparent;}

.style-options{display:flex; gap:12px; flex-wrap:wrap;}
.style-card{
  border:2px solid var(--border); border-radius:var(--radius-md); padding:12px; width:150px; cursor:pointer;
  transition:.18s var(--ease);
}
.style-card:hover{border-color:#3a4459;}
.style-card.selected{border-color:var(--amber); box-shadow:0 0 0 3px rgba(245,166,35,.14);}
.style-swatch{height:60px; border-radius:var(--radius-sm); margin-bottom:8px;}
.style-card .name{font-size:13px; font-weight:600;}

/* RGB + opacity picker for the carousel wrapper tint (replaces the fixed
   style-preset cards above for the carousel flow — reels still uses those). */
.tint-picker{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.tint-picker input[type="color"]{
  width:48px; height:40px; padding:0; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--bg-panel-2); cursor:pointer;
}
.tint-alpha-wrap{display:flex; align-items:center; gap:8px; flex:1; min-width:140px;}
.tint-alpha-wrap input[type="range"]{flex:1; margin:0;}
.tint-alpha-wrap .small{min-width:34px; text-align:right;}
.tint-swatch{
  width:40px; height:40px; border-radius:var(--radius-sm); border:1px solid var(--border);
  background-image:linear-gradient(45deg,#444 25%,transparent 25%),linear-gradient(-45deg,#444 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#444 75%),linear-gradient(-45deg,transparent 75%,#444 75%);
  background-size:10px 10px; background-position:0 0,0 5px,5px -5px,-5px 0;
}
.tint-dot{display:inline-block; width:16px; height:16px; border-radius:50%; border:1px solid var(--border); vertical-align:middle;}

.slide-editor{display:flex; gap:12px; align-items:flex-start; margin-bottom:12px; background:var(--bg-panel-2); padding:12px; border-radius:var(--radius-md); border:1px solid var(--border-soft);}
.slide-editor img{width:90px; height:112px; object-fit:cover; border-radius:var(--radius-sm);}
.slide-editor .fields{flex:1;}

/* ---------------------------------------------------------------------
   Range sliders — consistent amber thumb across every <input type=range>
   in the app (timing, font-size, position, tint alpha/height).
--------------------------------------------------------------------- */
input[type="range"]{
  -webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:3px;
  background:var(--bg-panel-3); outline:none; margin:8px 0; cursor:pointer;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; width:15px; height:15px; border-radius:50%;
  background:var(--amber); border:2px solid #1a1300; box-shadow:0 2px 6px rgba(0,0,0,.4);
  cursor:pointer; transition:transform .12s var(--ease);
}
input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.15);}
input[type="range"]::-moz-range-thumb{
  width:15px; height:15px; border-radius:50%; background:var(--amber); border:2px solid #1a1300;
  box-shadow:0 2px 6px rgba(0,0,0,.4); cursor:pointer;
}
input[type="range"]::-moz-range-track{background:var(--bg-panel-3); height:4px; border-radius:3px;}

.toast{
  position:fixed; top:18px; right:18px; background:var(--bg-panel-3); border:1px solid var(--amber);
  color:var(--text); padding:12px 18px 12px 14px; border-radius:var(--radius-md); display:none; z-index:999; font-size:13.5px;
  font-weight:500; box-shadow:var(--shadow-lg); align-items:center; gap:9px;
}
.toast::before{content:"✓"; display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:var(--amber); color:#1a1300; font-size:11px; font-weight:800; flex-shrink:0;}
.toast.error::before{content:"!"; background:var(--coral); color:#2b0000;}
.toast.show{display:flex; animation:toastIn .25s var(--ease);}
@keyframes toastIn{from{opacity:0; transform:translateY(-8px) scale(.97);} to{opacity:1; transform:translateY(0) scale(1);}}
.toast.error{border-color:var(--coral);}

.row{display:flex; gap:10px; align-items:center;}
.row-between{display:flex; justify-content:space-between; align-items:center;}
.mt{margin-top:16px;}
.mb{margin-bottom:16px;}
.small{font-size:12px; color:var(--text-dim);}
code{background:var(--bg-panel-3); border:1px solid var(--border); border-radius:5px; padding:1.5px 6px; font-size:12px; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;}

.char-counter{text-align:right; margin-top:4px;}

.empty{color:var(--text-dim); padding:36px; text-align:center; font-size:13.5px;}

/* ---------------------------------------------------------------------
   Fonts registered in Config.FONTS, loaded here so the live preview panel
   (Step 2) can render real typography per font choice, matching what
   apply_overlay() will actually draw with Pillow.
--------------------------------------------------------------------- */
@font-face{font-family:"dejavu_sans"; font-weight:400; src:url("/static/fonts/DejaVuSans.ttf") format("truetype");}
@font-face{font-family:"dejavu_sans"; font-weight:700; src:url("/static/fonts/DejaVuSans-Bold.ttf") format("truetype");}
@font-face{font-family:"liberation_sans"; font-weight:400; src:url("/static/fonts/LiberationSans-Regular.ttf") format("truetype");}
@font-face{font-family:"liberation_sans"; font-weight:700; src:url("/static/fonts/LiberationSans-Bold.ttf") format("truetype");}
@font-face{font-family:"ibm_plex_serif"; font-weight:400; src:url("/static/fonts/IBMPlexSerif-Regular.ttf") format("truetype");}
@font-face{font-family:"ibm_plex_serif"; font-weight:700; src:url("/static/fonts/IBMPlexSerif-Bold.ttf") format("truetype");}
@font-face{font-family:"jura"; font-weight:400; src:url("/static/fonts/Jura-Light.ttf") format("truetype");}
@font-face{font-family:"jura"; font-weight:700; src:url("/static/fonts/Jura-Medium.ttf") format("truetype");}
@font-face{font-family:"tektur"; font-weight:400; src:url("/static/fonts/Tektur-Regular.ttf") format("truetype");}
@font-face{font-family:"tektur"; font-weight:700; src:url("/static/fonts/Tektur-Medium.ttf") format("truetype");}

/* ---------------------------------------------------------------------
   Nicer <select> dropdowns (account picker, font picker): custom chevron,
   accent-colored focus ring, and a small decorative icon/glyph on the left
   (an "@" for the account picker, "Aa" rendered in the actual chosen font
   for the font picker) instead of the plain default OS control.
--------------------------------------------------------------------- */
.select-nice{position:relative;}
.select-nice select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  width:100%; cursor:pointer; padding:11px 38px 11px 40px; border-radius:var(--radius-sm);
  background:var(--bg-panel-2); border:1px solid var(--border); color:var(--text);
  font-size:14px; font-family:inherit; transition:border-color .15s, box-shadow .15s, background .15s;
}
.select-nice select:hover{border-color:var(--amber);}
.select-nice select:focus{outline:none; border-color:var(--amber); box-shadow:0 0 0 3px rgba(245,166,35,.16); background:var(--bg-panel);}
.select-nice::after{
  content:""; position:absolute; right:15px; top:50%; width:7px; height:7px;
  border-right:2px solid var(--text-dim); border-bottom:2px solid var(--text-dim);
  transform:translateY(-65%) rotate(45deg); pointer-events:none; transition:border-color .15s;
}
.select-nice:hover::after, .select-nice select:focus ~ .select-icon{border-color:var(--amber);}
.select-icon{
  position:absolute; left:12px; top:50%; transform:translateY(-50%); pointer-events:none;
  font-weight:700; font-size:14px; color:var(--amber); line-height:1;
  width:20px; text-align:center; overflow:hidden;
}
.select-account .select-icon{color:var(--teal);}
.select-font .select-icon{font-size:15px;}
.step2-layout{display:grid; grid-template-columns:1fr 380px; gap:22px; align-items:start;}
@media (max-width:960px){ .step2-layout{grid-template-columns:1fr;} }

.preview-panel{position:sticky; top:16px; display:flex; flex-direction:column; gap:14px; width:100%;}
.preview-title{font-size:12px; color:var(--text-dim); font-weight:700; text-transform:uppercase; letter-spacing:.5px;}
.preview-list{
  display:flex; flex-direction:column; gap:14px; width:100%;
  max-height:calc(100vh - 160px); overflow-y:auto; padding-right:6px; margin-right:-6px;
  --prev-photo-a:#3a3f33; --prev-photo-b:#23262e;
  --prev-tint:rgba(0,0,0,.45); --prev-text:#fff; --prev-accent:#fff;
  --prev-font:"dejavu_sans"; --prev-tint-top:50%;
}
.preview-list::-webkit-scrollbar{width:6px;}
.preview-list::-webkit-scrollbar-thumb{background:var(--border); border-radius:3px;}
.preview-list::-webkit-scrollbar-thumb:hover{background:var(--amber);}

.preview-card{
  /* No --prev-* defaults here: they must inherit from .preview-list (set live
     by updatePreview() in JS). Redeclaring them here would shadow the
     inherited values and freeze the preview on its first render, ignoring
     later style/font changes. */
  width:100%; flex:none;
  border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; background:var(--bg-panel-2);
  box-shadow:var(--shadow-sm);
}
.preview-role-label{font-size:11px; font-weight:700; letter-spacing:.5px; color:var(--text-dim);
  padding:6px 10px; text-transform:uppercase; border-bottom:1px solid var(--border);}
.preview-photo{
  /* Bulletproof intrinsic-ratio box: padding-bottom is a % of the box's
     OWN WIDTH, so this reserves the exact 1080x1350 (4:5) aspect ratio
     without depending on the `aspect-ratio` CSS property (which some
     layout combinations — an unsized flex child with no explicit width —
     fail to resolve a definite height for, collapsing the photo down to a
     sliver). This is the same technique responsive video embeds have used
     for a decade, so it always renders full-size and correct. */
  position:relative; width:100%; height:0; padding-bottom:125%; /* 1350/1080 */
  background-color:var(--prev-photo-a);
  background-image:linear-gradient(160deg, var(--prev-photo-a), var(--prev-photo-b));
  background-size:cover; background-position:center; background-repeat:no-repeat;
  font-family:var(--prev-font), sans-serif;
}
.preview-tintband{position:absolute; left:0; right:0; bottom:0; top:var(--prev-tint-top); background:var(--prev-tint);}
.preview-top{position:absolute; top:6%; left:8%; right:8%;}
.preview-handle{color:#fff; font-weight:700; font-size:13px; text-shadow:0 1px 2px rgba(0,0,0,.6);}
.preview-topline{height:1px; background:rgba(255,255,255,.65); margin-top:6px;}
.preview-headline{
  position:absolute; left:8%; right:8%; bottom:17%; text-align:center;
  color:var(--prev-text); font-weight:700; font-size:19px; line-height:1.25;
  text-shadow:0 1px 3px rgba(0,0,0,.6); word-break:break-word;
}
.preview-quotebox{
  position:absolute; left:8%; right:8%; bottom:17%; background:rgba(20,18,22,.8);
  border-radius:8px; padding:14px 10px 10px;
}
.preview-quotebox .q{color:var(--prev-accent); font-size:30px; line-height:1; font-weight:700;}
.preview-quotebox .txt{color:#fff; font-size:15px; line-height:1.3; margin-top:4px; word-break:break-word;}
.preview-bottom{position:absolute; bottom:6%; left:8%; right:8%;}
.preview-bottomline{height:1px; background:rgba(255,255,255,.65); margin-bottom:6px;}
.preview-bottomrow{display:flex; justify-content:space-between; font-size:11px; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.6);}
.preview-hint{font-size:11px; color:var(--text-dim); text-align:center;}

/* ---------------------------------------------------------------------
   Per-card font-size slider, embedded directly under each preview photo.
   Lets the user nudge a slide's text size without a separate edit step —
   value is stored on the slide and sent to apply_overlay() at publish time.
--------------------------------------------------------------------- */
.preview-card-controls{
  display:flex; align-items:center; gap:8px; padding:9px 10px; border-top:1px solid var(--border);
}
.fs-label{font-size:11px; color:var(--text-dim); white-space:nowrap; font-weight:500;}
.fs-slider{flex:1; margin:0;}
.fs-value{font-size:11px; color:var(--text-dim); min-width:40px; text-align:right; font-variant-numeric:tabular-nums;}

/* ---------------------------------------------------------------------
   Login page — standalone (no sidebar), centered card.
--------------------------------------------------------------------- */
.login-page{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
  background:
    radial-gradient(900px circle at 18% 12%, rgba(245,166,35,.09), transparent 45%),
    radial-gradient(700px circle at 85% 85%, rgba(45,212,191,.06), transparent 45%),
    var(--bg);
}
.login-card{width:100%; max-width:360px; padding:30px 28px;}
.login-card .brand{border-bottom:none; margin-bottom:6px; padding-bottom:0; justify-content:center;}
.login-card h1{margin-top:14px; text-align:center;}
.login-card .subtitle{text-align:center; margin-bottom:22px;}
.login-error{
  background:rgba(255,107,107,.12); border:1px solid var(--coral); color:var(--coral);
  border-radius:var(--radius-sm); padding:9px 11px; font-size:13px; margin-bottom:6px;
}
.login-card button[type="submit"]{width:100%; justify-content:center; padding:11px 16px; font-size:14px;}

/* ---------------------------------------------------------------------
   Settings page — custom font upload form + list.
--------------------------------------------------------------------- */
.font-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 0; border-bottom:1px solid var(--border-soft);
}
.font-row:last-child{border-bottom:none;}
.font-row .font-label{font-weight:600;}
.font-row .font-preview{font-size:20px;}

/* ---------------------------------------------------------------------
   Reels Step 3 — live video preview with burned-in-text overlay boxes.
   The boxes toggle visibility as the video plays (see reels_wizard.js's
   onPreviewTimeUpdate), matching apply_video_overlay's real timing.
--------------------------------------------------------------------- */
.reel-preview{
  position:relative; width:100%; background:#000; border-radius:var(--radius-md);
  overflow:hidden; box-shadow:var(--shadow-md);
}
.reel-preview video{ display:block; width:100%; height:auto; }
.reel-preview-text{
  /* left/top/width/font-size/padding/border-radius are all set inline by
     reels_wizard.js's applyOverlayLayout() — computed pixel-for-pixel from
     the real video dimensions to match services/video_processing.py's
     _render_text_overlay exactly, not a fixed CSS guess. */
  position:absolute; text-align:center; box-sizing:border-box;
  background:rgba(0,0,0,.55); border-radius:10px;
  color:#fff; font-weight:700; line-height:1.3;
  opacity:0; transition:opacity .12s; pointer-events:none;
  word-break:break-word;
}
.reel-preview-text.visible{ opacity:1; }

/* ---------------------------------------------------------------------
   Global scrollbar (webkit) — thin, matches the preview-list treatment,
   so the whole app feels consistent instead of just one scrollable panel.
--------------------------------------------------------------------- */
::-webkit-scrollbar{width:9px; height:9px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border); border-radius:5px; border:2px solid var(--bg);}
::-webkit-scrollbar-thumb:hover{background:#3a4459;}

/* ---------------------------------------------------------------------
   Carousel wrapper/chrome style picker (Step 2) — 4 small mockups of
   services/image_processing.py's CHROME_STYLES, so the choice is visual
   instead of a plain dropdown. Reuses the .style-card look.
--------------------------------------------------------------------- */
.chrome-style-options{display:flex; gap:10px; flex-wrap:wrap;}
.chrome-style-card{
  border:2px solid var(--border); border-radius:var(--radius-md); padding:8px; width:100px; cursor:pointer;
  transition:.18s var(--ease);
}
.chrome-style-card:hover{border-color:#3a4459;}
.chrome-style-card.selected{border-color:var(--amber); box-shadow:0 0 0 3px rgba(245,166,35,.14);}
.chrome-style-card .name{font-size:11.5px; font-weight:600; text-align:center; margin-top:6px; color:var(--text-dim);}
.chrome-style-card.selected .name{color:var(--amber);}
.chrome-style-preview{
  position:relative; height:64px; border-radius:7px; overflow:hidden;
  background:linear-gradient(160deg,#3a3f33,#23262e);
}
.chrome-style-preview span{position:absolute; background:rgba(255,255,255,.75);}
/* classic: top+bottom divider lines, two icon dots */
.cs-classic .cs-topline{top:11px; left:8px; right:8px; height:2px;}
.cs-classic .cs-bottomline{bottom:11px; left:8px; right:8px; height:2px;}
.cs-classic .cs-dot{bottom:5px; width:5px; height:5px; border-radius:50%;}
.cs-classic .cs-dot-l{left:8px;} .cs-classic .cs-dot-r{right:8px;}
/* minimal: just two small text bars, no lines */
.cs-minimal .cs-handle{top:12px; left:8px; width:26px; height:4px; border-radius:2px; opacity:.85;}
.cs-minimal .cs-footer-text{bottom:11px; left:8px; right:8px; height:4px; border-radius:2px; opacity:.55;}
/* badge: rounded pill top-left, two pills bottom */
.cs-badge .cs-pill{border-radius:6px; height:11px;}
.cs-badge .cs-pill-top{top:9px; left:8px; width:34px; background:rgba(0,0,0,.55);}
.cs-badge .cs-pill-bl{bottom:9px; left:8px; width:26px; background:rgba(0,0,0,.55);}
.cs-badge .cs-pill-br{bottom:9px; right:8px; width:26px; background:rgba(255,255,255,.9);}
/* framed: viewfinder corner brackets */
.cs-framed .cs-corner{width:12px; height:12px; background:none; border:2px solid rgba(255,255,255,.8);}
.cs-framed .cs-corner-tl{top:7px; left:7px; border-width:2px 0 0 2px;}
.cs-framed .cs-corner-tr{top:7px; right:7px; border-width:2px 2px 0 0;}
.cs-framed .cs-corner-bl{bottom:7px; left:7px; border-width:0 0 2px 2px;}
.cs-framed .cs-corner-br{bottom:7px; right:7px; border-width:0 2px 2px 0;}

/* ---------------------------------------------------------------------
   Live-preview rendering for each chrome style — mirrors
   services/image_processing.py's _draw_top_chrome/_draw_bottom_chrome
   exactly (same 4 styles), so the Step 2 preview shows precisely what
   apply_overlay() will burn into the photo, icons included.
--------------------------------------------------------------------- */
.chrome-icon{width:13px; height:17px; vertical-align:-3px; margin:0 5px; color:var(--prev-text); flex-shrink:0;}
.preview-bottomrow span{display:inline-flex; align-items:center;}

.preview-handle-minimal{font-size:12px; font-weight:600; opacity:.85;}
.preview-bottomrow-minimal{font-size:10px; color:var(--prev-text); text-align:center; opacity:.75; letter-spacing:.2px;}

.preview-handle-badge{
  display:inline-block; background:rgba(0,0,0,.5); backdrop-filter:blur(2px);
  border-radius:20px; padding:5px 12px; font-size:12px; font-weight:700; color:#fff;
}
.preview-bottomrow-badge{display:flex; justify-content:space-between;}
.chrome-pill{border-radius:20px; padding:4px 11px; font-size:10.5px; font-weight:700;}
.chrome-pill-dark{background:rgba(0,0,0,.5); color:#fff;}
.chrome-pill-light{background:rgba(255,255,255,.92); color:#1a1a1a;}

.preview-handle-framed{font-size:12px; font-weight:700; margin:16px 0 0 16px; display:inline-block;}
.preview-bottomrow-framed{font-size:10.5px; text-align:center; color:var(--prev-text); opacity:.9;}
.preview-corner{position:absolute; width:16px; height:16px; border:2px solid rgba(255,255,255,.75); pointer-events:none;}
.preview-corner.tl{top:6%; left:8%; border-width:2px 0 0 2px;}
.preview-corner.tr{top:6%; right:8%; border-width:2px 2px 0 0;}
.preview-corner.bl{bottom:6%; left:8%; border-width:0 0 2px 2px;}
.preview-corner.br{bottom:6%; right:8%; border-width:0 2px 2px 0;}