/* ===== Flimify client portal ===== */
.dash-body{background:var(--paper);color:var(--ink);font-family:var(--ui);min-height:100vh}
/* form controls follow the theme text colour (fixes invisible typing in dark mode) */
input,textarea,select{color:var(--ink)}
input::placeholder,textarea::placeholder{color:var(--ink-3);opacity:1}
[hidden]{display:none !important}

/* preview banner */
.preview-bar{background:var(--brand);color:#F4F1E8;text-align:center;font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;padding:.5rem 1rem}
.preview-bar a{color:#fff;text-decoration:underline}

/* ---------- auth ---------- */
.boot{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:var(--paper)}
.boot-spin{width:26px;height:26px;border-radius:50%;border:2.5px solid var(--line);border-top-color:var(--brand);animation:boot-spin .7s linear infinite}
@keyframes boot-spin{to{transform:rotate(360deg)}}
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:1.5rem}
.auth-card{width:100%;max-width:420px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:clamp(1.6rem,4vw,2.4rem);box-shadow:0 30px 70px -42px rgba(40,33,20,.4)}
.auth-card .brand{margin-bottom:1.6rem}
.auth-card h1{font-family:var(--disp);font-weight:500;font-size:1.9rem;letter-spacing:-.01em}
.auth-card .sub{color:var(--ink-2);margin-top:.4rem;font-size:.96rem}
.auth-tabs{display:flex;gap:.4rem;margin:1.6rem 0 1.2rem;background:var(--paper-2);border:1px solid var(--line);border-radius:10px;padding:.25rem}
.auth-tab{flex:1;padding:.55rem;border:0;background:none;border-radius:8px;font-family:var(--ui);font-weight:600;font-size:.9rem;color:var(--ink-2);cursor:pointer}
.auth-tab.on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(40,33,20,.12)}
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem}
.field label{font-size:.82rem;color:var(--ink-2);font-weight:500}
.field input,.field textarea,.field select{
  font-family:var(--ui);font-size:.96rem;color:var(--ink);background:var(--paper-2);
  border:1px solid var(--line);border-radius:10px;padding:.7rem .85rem;width:100%;
}
.field textarea{min-height:96px;resize:vertical}
.footage-row{display:flex;gap:.5rem;align-items:center}
.footage-row + .footage-row{margin-top:.5rem}
.footage-row .footage-input{flex:1}
.footage-remove{flex:none;width:40px;height:40px;border:1px solid var(--line);background:var(--paper-2);border-radius:10px;color:var(--ink-3);font-size:1.3rem;line-height:1;cursor:pointer;transition:border-color .15s,color .15s}
.footage-remove:hover{color:#c2554f;border-color:#c2554f}
.link-add{align-self:flex-start;margin-top:.65rem;background:none;border:0;color:var(--brand);font-family:var(--ui);font-weight:600;font-size:.86rem;cursor:pointer;padding:0}
.link-add:hover{text-decoration:underline}
[data-theme="dark"] .link-add{color:#9FBE8F}
/* "video sent" success card */
.submit-done{text-align:center;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:clamp(2rem,5vw,3.2rem) clamp(1.4rem,4vw,2.6rem);box-shadow:var(--shadow);max-width:520px;margin:.4rem auto 0;animation:done-in .45s cubic-bezier(.2,.7,.3,1)}
.done-check{width:60px;height:60px;margin:0 auto 1.15rem}
.done-check svg{width:100%;height:100%;overflow:visible}
.done-check circle{fill:none;stroke:var(--brand);stroke-width:3;stroke-dasharray:151;stroke-dashoffset:151;animation:done-ring .5s ease forwards}
.done-check path{fill:none;stroke:var(--brand);stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:42;stroke-dashoffset:42;animation:done-tick .35s .42s ease forwards}
.submit-done h2{font-family:var(--disp);font-weight:500;font-size:1.55rem;letter-spacing:-.01em;margin-bottom:.35rem}
.submit-done p{color:var(--ink-2);font-size:1rem;line-height:1.5;margin-bottom:1.6rem}
.done-actions{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}
@keyframes done-in{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@keyframes done-ring{to{stroke-dashoffset:0}}
@keyframes done-tick{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.submit-done{animation:none}.done-check circle,.done-check path{animation:none;stroke-dashoffset:0}}
/* "video ready" notification on home */
.ready-note{display:flex;align-items:center;gap:.85rem;background:var(--card);border:1px solid var(--brand-2);border-radius:14px;padding:.85rem 1rem;margin-bottom:1.1rem;box-shadow:var(--shadow);animation:done-in .4s cubic-bezier(.2,.7,.3,1)}
.ready-ic{flex:none;color:var(--brand);display:flex}
.ready-ic svg{width:24px;height:24px}
.ready-body{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.ready-body b{font-size:.97rem;color:var(--ink)}
.ready-body span{font-size:.85rem;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ready-note .btn{flex:none;padding:.5rem .95rem;font-size:.86rem}
.ready-x{flex:none;background:none;border:0;color:var(--ink-3);font-size:1.35rem;line-height:1;cursor:pointer;padding:0 .15rem}
.ready-x:hover{color:var(--ink)}
@media (prefers-reduced-motion:reduce){.ready-note{animation:none}}
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{outline:2.5px solid var(--brand);outline-offset:1px}
.btn-google{display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;background:var(--card);
  border:1px solid var(--line);border-radius:10px;padding:.72rem;font-family:var(--ui);font-weight:600;
  font-size:.95rem;color:var(--ink);cursor:pointer;transition:background .15s,border-color .15s}
.btn-google:hover{background:var(--paper-2);border-color:var(--ink-3)}
.btn-google:focus-visible{outline:2.5px solid var(--brand);outline-offset:1px}
.auth-or{display:flex;align-items:center;gap:.8rem;margin:1.1rem 0;color:var(--ink-3);font-size:.8rem}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--line)}
.auth-msg{font-size:.85rem;margin-top:.3rem;min-height:1.1em}
.auth-msg.err{color:#a83232}
.auth-msg.ok{color:var(--brand)}
.auth-alt{margin-top:1.1rem;font-size:.85rem;color:var(--ink-3);text-align:center}
.auth-alt a{color:var(--brand);font-weight:600;cursor:pointer}

/* ---------- app shell ---------- */
.app{display:grid;grid-template-columns:256px 1fr;min-height:100vh}
.side{background:var(--brand);color:rgba(244,241,232,.82);display:flex;flex-direction:column;gap:.25rem;padding:1.4rem 1rem;position:sticky;top:0;height:100vh}
.side-brand{display:flex;align-items:center;gap:.55rem;font-family:var(--disp);font-weight:600;font-size:1.2rem;color:#F4F1E8;padding:.3rem .6rem 1.3rem}
.side-nav{display:flex;flex-direction:column;gap:.2rem}
.nav-item{display:flex;align-items:center;gap:.7rem;padding:.72rem .85rem;border-radius:10px;border:0;background:none;color:rgba(244,241,232,.8);font-family:var(--ui);font-weight:500;font-size:.95rem;cursor:pointer;width:100%;text-align:left;transition:background .15s,color .15s}
.nav-item:hover{background:rgba(255,255,255,.08);color:#fff}
.nav-item.active{background:rgba(255,255,255,.14);color:#fff}
.nav-badge{margin-left:auto;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:#d65b43;color:#fff;font-size:.7rem;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1}
.nav-item svg{flex:none;opacity:.9}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:.8rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.12)}
.side-user{font-size:.82rem;color:rgba(244,241,232,.7);padding:0 .6rem;line-height:1.4}
.side-user b{color:#F4F1E8;display:block;font-weight:600}

.main{background:var(--paper);min-height:100vh;display:flex;flex-direction:column}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.3rem clamp(1.2rem,3vw,2.4rem);border-bottom:1px solid var(--line)}
.topbar h1{font-family:var(--disp);font-weight:500;font-size:clamp(1.4rem,3vw,1.8rem);letter-spacing:-.01em}
.plan-badge{font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--brand);background:var(--sage);padding:.35rem .7rem;border-radius:999px;font-weight:500}

.panel{padding:clamp(1.2rem,3vw,2.4rem);max-width:960px;width:100%}
.panel[hidden]{display:none}
.panel-lead{color:var(--ink-2);margin:-.4rem 0 1.6rem;font-size:1rem}

.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1.4rem 1.5rem;box-shadow:var(--shadow)}
.cards{display:grid;gap:1.1rem}
.cards.two{grid-template-columns:1fr 1fr}

/* usage */
.usage-num{font-family:var(--disp);font-weight:500;font-size:2.4rem;letter-spacing:-.02em}
.usage-num span{font-size:1rem;color:var(--ink-3)}
.bar{height:8px;background:var(--line-2);border-radius:99px;overflow:hidden;margin-top:.9rem}
.bar > i{display:block;height:100%;background:var(--brand);border-radius:99px}
.card h3{font-size:1.05rem;margin-bottom:.2rem}
.card .muted{color:var(--ink-3);font-size:.86rem}
.k{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:.5rem}

/* videos list */
.vid{display:flex;gap:1rem;align-items:center;justify-content:space-between;padding:1.1rem 1.3rem;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);margin-bottom:.8rem}
.vid-main{min-width:0}
.vid-main h3{font-size:1.05rem;margin-bottom:.25rem}
.vid-main .muted{color:var(--ink-3);font-size:.82rem;font-family:var(--mono)}
.vid-right{display:flex;align-items:center;gap:.9rem;flex:none}
.pill{font-family:var(--mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.06em;padding:.3rem .6rem;border-radius:999px;font-weight:500;white-space:nowrap}
.pill.submitted{background:#e7e1d3;color:#6a6253}
.pill.editing{background:#fce8d6;color:#9a5a2a}
.pill.review{background:#dbe7f0;color:#37607c}
.pill.delivered{background:var(--sage);color:var(--brand)}
.vid-row{width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;transition:border-color .15s,transform .06s}
.vid-row:hover{border-color:var(--ink-3)}
.vid-row:active{transform:scale(.997)}
.vid-eta{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);white-space:nowrap}
/* per-video detail page */
.vd-back{background:none;border:0;color:var(--ink-3);font-family:var(--ui);font-weight:600;font-size:.86rem;cursor:pointer;padding:0;margin-bottom:1.1rem}
.vd-back:hover{color:var(--ink)}
.vd-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.vd-head h2{font-family:var(--disp);font-weight:500;font-size:1.5rem;letter-spacing:-.01em}
.vd-meta{color:var(--ink-3);font-size:.82rem;font-family:var(--mono);margin-top:.25rem}
.vd-timeline{display:flex;margin:1.6rem 0}
.vd-step{flex:1;display:flex;flex-direction:column;align-items:center;gap:.2rem;text-align:center;position:relative}
.vd-step::before{content:"";position:absolute;top:9px;left:-50%;width:100%;height:2px;background:var(--line)}
.vd-step:first-child::before{display:none}
.vd-step.done::before,.vd-step.now::before{background:var(--brand)}
.vd-dot{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);background:var(--card);position:relative;z-index:1}
.vd-step.done .vd-dot{background:var(--brand);border-color:var(--brand)}
.vd-step.now .vd-dot{border-color:var(--brand);box-shadow:0 0 0 4px var(--sage)}
.vd-step b{font-size:.84rem;margin-top:.25rem}
.vd-step span{font-size:.72rem;color:var(--ink-3);line-height:1.3}
.vd-step:not(.done):not(.now) b{color:var(--ink-3);font-weight:500}
.vd-status{background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:1rem 1.2rem;font-size:1rem;color:var(--ink-2);margin-bottom:1.5rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.vd-status .btn{margin:0;flex:none}
.vd-block{margin-bottom:1.3rem}
.vd-block .k{display:block;margin-bottom:.45rem}
.vd-block p{color:var(--ink-2);line-height:1.55;white-space:pre-wrap}
.vd-links{display:flex;gap:.9rem;flex-wrap:wrap}
.vd-block button.linkish{background:none;border:0;cursor:pointer;padding:0;font-family:var(--ui)}
.linkish{color:var(--brand);font-weight:600;font-size:.85rem;text-decoration:none}
.linkish:hover{text-decoration:underline}

/* chat */
.chat{display:flex;flex-direction:column;height:min(560px,70vh);background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.chat-log{flex:1;overflow-y:auto;padding:1.2rem;display:flex;flex-direction:column;gap:.7rem}
.msg{max-width:76%;padding:.6rem .85rem;border-radius:14px;font-size:.94rem;line-height:1.4}
.msg .when{display:block;font-family:var(--mono);font-size:.6rem;color:var(--ink-3);margin-top:.3rem}
.msg.team{align-self:flex-start;background:var(--paper-2);border:1px solid var(--line);border-bottom-left-radius:4px}
.msg.client{align-self:flex-end;background:var(--brand);color:#F4F1E8;border-bottom-right-radius:4px}
.msg.client .when{color:rgba(244,241,232,.6)}
.chat-form{display:flex;gap:.6rem;padding:.8rem;border-top:1px solid var(--line);background:var(--paper-2)}
.chat-form input{flex:1;font-family:var(--ui);font-size:.95rem;border:1px solid var(--line);border-radius:10px;padding:.7rem .9rem;background:var(--card)}
.chat-attach{flex:none;width:42px;border:1px solid var(--line);background:var(--card);border-radius:10px;color:var(--ink-3);cursor:pointer;display:grid;place-items:center;transition:color .15s,border-color .15s}
.chat-attach:hover{color:var(--brand);border-color:var(--brand)}
.chat-attach:disabled{opacity:.5;cursor:default}
.chat-attach svg{width:18px;height:18px}
.chat-attach.up{pointer-events:none}
.chat-attach.up svg{display:none}
.chat-attach.up::after{content:"";width:16px;height:16px;border:2px solid var(--line);border-top-color:var(--brand);border-radius:50%;animation:boot-spin .7s linear infinite}
.msg a{color:inherit;text-decoration:underline;text-underline-offset:2px;word-break:break-word}
.msg-img{display:block;margin-bottom:.35rem}
.msg-img img{max-width:230px;max-height:240px;width:auto;border-radius:10px;display:block}
.msg-file{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:.35rem;padding:.5rem .7rem;border-radius:10px;background:rgba(28,27,23,.06);color:inherit;text-decoration:none;font-size:.86rem;font-weight:600;max-width:230px}
.msg-file svg{width:18px;height:18px;flex:none}
.msg.client .msg-file{background:rgba(255,255,255,.16)}
[data-theme="dark"] .msg-file{background:rgba(255,255,255,.07)}
.chat-form input:focus-visible{outline:2.5px solid var(--brand);outline-offset:1px}

.empty{text-align:center;color:var(--ink-3);padding:2.5rem 1rem;font-size:.95rem}

/* ---------- responsive ---------- */
@media (max-width:760px){
  .app{grid-template-columns:1fr}
  .side{position:sticky;top:0;height:auto;z-index:20;flex-direction:row;align-items:center;gap:.4rem;padding:.7rem .8rem;overflow-x:auto}
  .side-brand{padding:0 .5rem 0 .3rem;font-size:1.1rem}
  .side-word{display:none}          /* logo mark only on mobile */
  .side-nav{flex-direction:row;gap:.2rem}
  .nav-item{padding:.55rem .7rem;font-size:.88rem;white-space:nowrap;position:relative}
  .nav-item span:not(.nav-badge){display:none}      /* icons only on mobile nav */
  .nav-badge{position:absolute;top:2px;right:1px;margin:0;min-width:15px;height:15px;font-size:.58rem;padding:0 4px}
  .side-foot{margin:0 0 0 auto;flex-direction:row;border:0;padding:0}
  .side-user{display:none}
  .cards.two{grid-template-columns:1fr}
}

/* ---------- onboarding wizard ---------- */
.ob-wrap{min-height:100vh;display:grid;place-items:center;padding:1.5rem}
.ob-card{width:100%;max-width:560px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:clamp(1.6rem,4vw,2.6rem);box-shadow:0 30px 70px -42px rgba(40,33,20,.4)}
.ob-card .brand{margin-bottom:1.6rem}
.ob-title{font-family:var(--disp);font-weight:500;font-size:clamp(1.5rem,3.5vw,2rem);letter-spacing:-.01em;line-height:1.12}
.ob-card .sub{color:var(--ink-2);margin:.4rem 0 1.7rem;font-size:.98rem}
.ob-q{margin-bottom:1.5rem}
.ob-q-label{font-weight:600;font-size:.98rem;margin-bottom:.65rem}
.ob-opts{display:flex;flex-wrap:wrap;gap:.5rem}
.ob-opt{font-family:var(--ui);font-size:.9rem;font-weight:500;color:var(--ink-2);background:var(--paper-2);border:1px solid var(--line);border-radius:999px;padding:.5rem .95rem;cursor:pointer;transition:.15s}
.ob-opt:hover{border-color:var(--ink-3)}
.ob-opt.on{background:var(--brand);border-color:var(--brand);color:#F4F1E8}
.ob-opt:focus-visible{outline:2.5px solid var(--brand);outline-offset:1px}

.ob-plans{display:flex;flex-direction:column;gap:.7rem;margin-bottom:1.3rem}
.ob-plan{display:flex;align-items:center;justify-content:space-between;gap:1rem;text-align:left;width:100%;
  background:var(--paper-2);border:1.5px solid var(--line);border-radius:14px;padding:1rem 1.1rem;cursor:pointer;transition:.15s}
.ob-plan:hover{border-color:var(--ink-3)}
.ob-plan.on{border-color:var(--brand);background:var(--card);box-shadow:0 0 0 3px rgba(47,66,51,.12)}
.ob-plan-l b{font-family:var(--disp);font-weight:500;font-size:1.1rem}
.ob-plan-feat{display:block;color:var(--ink-3);font-size:.84rem;margin-top:.15rem}
.ob-plan-price{font-family:var(--disp);font-weight:500;font-size:1.2rem;white-space:nowrap}
.ob-plan-price span{font-size:.8rem;color:var(--ink-3)}
.ob-plan-flag{font-family:var(--mono);font-size:.56rem;text-transform:uppercase;letter-spacing:.08em;background:var(--sage);color:var(--brand);padding:.2rem .5rem;border-radius:999px;margin-left:.5rem;vertical-align:middle}

.ob-back{background:none;border:0;color:var(--ink-3);font-family:var(--ui);font-weight:600;font-size:.86rem;cursor:pointer;margin-bottom:.9rem;padding:0}
.ob-back:hover{color:var(--ink)}
#ob-step-done{text-align:center;padding:1.5rem 0}
.ob-spinner{width:38px;height:38px;border:3px solid var(--line-2);border-top-color:var(--brand);border-radius:50%;margin:0 auto 1.3rem;animation:ob-spin .8s linear infinite}
@keyframes ob-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.ob-spinner{animation-duration:2.5s}}

/* ============ THEME TOGGLE + DARK MODE ============ */
.theme-toggle{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:var(--card);color:var(--ink-2);cursor:pointer;flex:none;transition:background .15s,color .15s,border-color .15s}
.theme-toggle:hover{color:var(--ink);border-color:var(--ink-3)}
.theme-toggle:focus-visible{outline:2.5px solid var(--brand);outline-offset:2px}
.theme-toggle svg{width:17px;height:17px}
.theme-toggle .i-sun{display:none}
[data-theme="dark"] .theme-toggle .i-moon{display:none}
[data-theme="dark"] .theme-toggle .i-sun{display:block}
.topbar-actions{display:flex;align-items:center;gap:.8rem}
/* toggle variant for the admin's dark top bar */
.admin-top .theme-toggle{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);color:#F4F1E8}
.admin-top .theme-toggle:hover{background:rgba(255,255,255,.2)}

/* circular reveal: drop the default crossfade so the clip-path wipe is clean */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}

/* dark palette — warm near-black surfaces, forest green kept for accents */
[data-theme="dark"]{
  --paper:#131510;
  --paper-2:#1A1D15;
  --card:#1C1F17;
  --ink:#ECEAE0;
  --ink-2:#B4B3A4;
  --ink-3:#80806E;
  --line:#2C2F24;
  --line-2:#24271C;
  --sage:#2A3A26;
  --brand:#4C6B4F;
  --brand-2:#5A7C5D;
  --shadow:0 20px 44px -26px rgba(0,0,0,.7);
}
/* sidebars / top chrome -> dark surfaces */
[data-theme="dark"] .side{background:#101109}
[data-theme="dark"] .admin-top{background:#101109}
/* green text lightens on dark for contrast */
[data-theme="dark"] .linkish,
[data-theme="dark"] .auth-alt a,
[data-theme="dark"] .ov-link:hover{color:#9FBE8F}
[data-theme="dark"] .plan-badge,
[data-theme="dark"] .plan-tag,
[data-theme="dark"] .ob-plan-flag{color:#CFE0C2}
/* status pills */
[data-theme="dark"] .pill.submitted{background:#2A2820;color:#BDB6A2}
[data-theme="dark"] .pill.editing{background:#3B2C1B;color:#E4A868}
[data-theme="dark"] .pill.review{background:#1D2C39;color:#83B3DA}
[data-theme="dark"] .pill.delivered{background:#293A26;color:#9FBE8F}
/* gentle crossfade for browsers without view transitions */
@media (prefers-reduced-motion: no-preference){
  .dash-body,.admin-body,.side,.main,.card,.panel,.topbar,.vid,.chat,.msg,.field input,.field textarea,.field select,
  .auth-card,.ob-card,.ob-opt,.ob-plan,.admin-top,.clients,.detail,.avid,.achat,.stat,.pill,.plan-badge,.plan-tag,.theme-toggle{
    transition:background-color .4s ease,border-color .4s ease,color .4s ease;
  }
}