/* ShowFixed — brand design system
   Colors derived from the logo: blue #2E86F6 / cyan #37C6F0 (Show), orange #FF7A1A (Fixed).
   Light-first with a full dark theme (toggle persisted in localStorage). */

:root{
  /* brand */
  --blue:#2E86F6; --blue-700:#1B63CC; --cyan:#37C6F0;
  --orange:#FF7A1A; --orange-700:#EA5E00;
  --grad-blue:linear-gradient(135deg,#37C6F0,#2E86F6);
  --grad-orange:linear-gradient(135deg,#FFA24D,#FF6A12);
  --grad-brand:linear-gradient(120deg,#2E86F6 0%,#37C6F0 48%,#FF7A1A 100%);

  /* light theme (default) */
  --bg:#ffffff; --bg-subtle:#F3F7FC; --surface:#ffffff; --surface-2:#F7FAFE;
  --text:#0E1726; --text-muted:#566479; --heading:#0B1220;
  --border:#E6ECF4; --ring:rgba(46,134,246,.35);
  --shadow-sm:0 1px 2px rgba(16,40,80,.06);
  --shadow:0 12px 34px rgba(20,45,90,.10);
  --shadow-lg:0 30px 60px rgba(20,45,90,.16);
  --header-bg:rgba(255,255,255,.78);

  --font-display:'Plus Jakarta Sans',system-ui,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --radius:16px; --radius-sm:11px; --radius-lg:24px;
  --maxw:1140px;
}
[data-theme="dark"]{
  --bg:#0A0F18; --bg-subtle:#0E1622; --surface:#111A28; --surface-2:#16212F;
  --text:#E7EEF8; --text-muted:#93A4BC; --heading:#F3F7FC;
  --border:#21304534; --border:#223044; --ring:rgba(55,198,240,.40);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 16px 40px rgba(0,0,0,.45);
  --shadow-lg:0 30px 70px rgba(0,0,0,.55);
  --header-bg:rgba(10,15,24,.72);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; transition:background .3s,color .3s;
}
h1,h2,h3,h4{font-family:var(--font-display); color:var(--heading); line-height:1.15; margin:0 0 .5em; letter-spacing:-.02em}
h1{font-size:clamp(2.1rem,4.6vw,3.5rem); font-weight:800}
h2{font-size:clamp(1.6rem,3vw,2.3rem); font-weight:800}
h3{font-size:1.25rem; font-weight:700}
p{margin:0 0 1rem}
a{color:var(--blue); text-decoration:none}
a:hover{color:var(--blue-700)}
img{max-width:100%; display:block}
.container{max-width:var(--maxw); margin:0 auto; padding:0 22px}
.section{padding:84px 0}
.muted{color:var(--text-muted)}
.center{text-align:center}
.grad-text{background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:700;
  font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--blue);
  background:color-mix(in srgb,var(--blue) 12%,transparent); padding:6px 12px; border-radius:999px}
.lead{font-size:1.15rem; color:var(--text-muted); max-width:60ch}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; cursor:pointer;
  font-family:var(--font-display); font-weight:700; font-size:.98rem; line-height:1;
  padding:13px 22px; border-radius:12px; border:1px solid transparent; transition:.18s; white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--grad-orange); color:#fff; box-shadow:0 8px 20px rgba(255,122,26,.35)}
.btn-primary:hover{filter:brightness(1.05); color:#fff; box-shadow:0 12px 26px rgba(255,122,26,.45)}
.btn-blue{background:var(--grad-blue); color:#fff; box-shadow:0 8px 20px rgba(46,134,246,.32)}
.btn-blue:hover{filter:brightness(1.06); color:#fff}
.btn-secondary{background:var(--surface); color:var(--heading); border-color:var(--border); box-shadow:var(--shadow-sm)}
.btn-secondary:hover{border-color:var(--blue); color:var(--blue)}
.btn-ghost{background:transparent; color:var(--text); border-color:transparent}
.btn-ghost:hover{background:var(--surface-2)}
.btn-lg{padding:16px 28px; font-size:1.05rem}
.btn-block{display:flex; width:100%}

/* ---------- header / nav ---------- */
.site-header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(14px);
  background:var(--header-bg); border-bottom:1px solid var(--border)}
.nav{display:flex; align-items:center; gap:18px; height:68px}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;
  font-size:1.2rem; color:var(--heading); letter-spacing:-.02em}
.brand img{width:34px; height:34px; border-radius:9px}
.brand b{color:var(--blue)} .brand i{color:var(--orange); font-style:normal}
.nav-links{display:flex; align-items:center; gap:6px; margin-left:14px}
.nav-links a{color:var(--text-muted); font-weight:600; font-size:.95rem; padding:9px 12px; border-radius:9px}
.nav-links a:hover,.nav-links a.active{color:var(--heading); background:var(--surface-2)}
.nav-spacer{flex:1}
.nav-actions{display:flex; align-items:center; gap:10px}
.nav-toggle{display:none; background:none; border:0; color:var(--heading); cursor:pointer; padding:8px}
.icon-btn{display:inline-grid; place-items:center; width:42px; height:42px; border-radius:11px; cursor:pointer;
  background:var(--surface); border:1px solid var(--border); color:var(--text); box-shadow:var(--shadow-sm)}
.icon-btn:hover{border-color:var(--blue); color:var(--blue)}
/* theme toggle shows the right icon per theme */
.theme-toggle .moon{display:none}
[data-theme="dark"] .theme-toggle .sun{display:none}
[data-theme="dark"] .theme-toggle .moon{display:block}

@media(max-width:880px){
  .nav-toggle{display:block}
  .nav-links{position:absolute; left:0; right:0; top:68px; flex-direction:column; align-items:stretch; gap:2px;
    background:var(--surface); border-bottom:1px solid var(--border); padding:10px 16px 16px; box-shadow:var(--shadow);
    transform:translateY(-8px); opacity:0; pointer-events:none; transition:.2s}
  .nav-links.open{transform:none; opacity:1; pointer-events:auto}
  .nav-links a{padding:12px}
}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; padding:72px 0 36px}
.hero::before{content:""; position:absolute; inset:-30% -10% auto -10%; height:520px; z-index:-1;
  background:radial-gradient(60% 60% at 22% 18%,rgba(55,198,240,.20),transparent 60%),
             radial-gradient(55% 55% at 85% 12%,rgba(255,122,26,.16),transparent 60%);
  filter:blur(8px)}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center}
.hero h1{margin-top:14px}
.hero .lead{margin:18px 0 26px}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap}
.hero-trust{margin-top:22px; display:flex; gap:18px; align-items:center; color:var(--text-muted); font-size:.9rem; flex-wrap:wrap}
.hero-art{position:relative; border-radius:var(--radius-lg); border:1px solid var(--border);
  background:var(--surface); box-shadow:var(--shadow-lg); overflow:hidden}
.hero-art .bar{display:flex; gap:7px; padding:13px 16px; border-bottom:1px solid var(--border); background:var(--surface-2)}
.hero-art .bar span{width:11px; height:11px; border-radius:50%; background:#cdd7e4}
.hero-art .bar span:nth-child(1){background:#FF7A1A}.hero-art .bar span:nth-child(2){background:#FFC73D}.hero-art .bar span:nth-child(3){background:#37C6F0}
@media(max-width:880px){.hero-grid{grid-template-columns:1fr; gap:30px}}

/* ---------- video / demo player ---------- */
.player{position:relative; aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden;
  background:linear-gradient(135deg,#0c1626,#13203a); border:1px solid var(--border); box-shadow:var(--shadow)}
.player .scrim{position:absolute; inset:0; display:grid; place-items:center;
  background:radial-gradient(circle at 50% 45%,rgba(46,134,246,.25),transparent 55%)}
.player .play{width:78px; height:78px; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  background:var(--grad-orange); box-shadow:0 12px 30px rgba(255,122,26,.5); color:#fff; transition:.2s}
.player .play:hover{transform:scale(1.07)}
.player .play svg{margin-left:5px}
.player .tag{position:absolute; left:14px; top:14px; font-family:var(--font-display); font-weight:800; font-size:.72rem;
  letter-spacing:.1em; text-transform:uppercase; padding:6px 11px; border-radius:8px; color:#fff}
.player .tag.bug{background:#ef4444} .player .tag.fixed{background:#22c55e}
.player .caption{position:absolute; left:0; right:0; bottom:0; padding:26px 22px 18px; color:#fff;
  font-weight:600; text-align:center; background:linear-gradient(transparent,rgba(0,0,0,.72))}
.player video{width:100%; height:100%; object-fit:cover}

/* ---------- features / steps / cards ---------- */
.grid{display:grid; gap:22px}
.cols-3{grid-template-columns:repeat(3,1fr)} .cols-2{grid-template-columns:repeat(2,1fr)} .cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:880px){.cols-3,.cols-4{grid-template-columns:1fr 1fr} .cols-2{grid-template-columns:1fr}}
@media(max-width:560px){.cols-3,.cols-4,.cols-2{grid-template-columns:1fr}}
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow-sm); transition:.2s}
.card:hover{box-shadow:var(--shadow); transform:translateY(-3px); border-color:color-mix(in srgb,var(--blue) 30%,var(--border))}
.feature .ico{width:50px; height:50px; border-radius:13px; display:grid; place-items:center; color:#fff; margin-bottom:16px; background:var(--grad-blue)}
.feature:nth-child(2) .ico{background:var(--grad-orange)} .feature:nth-child(3) .ico{background:linear-gradient(135deg,#22c55e,#16a34a)}
.feature h3{margin-bottom:6px}
.step{position:relative; padding-left:8px}
.step .n{font-family:var(--font-display); font-weight:800; font-size:1.6rem; background:var(--grad-brand);
  -webkit-background-clip:text; background-clip:text; color:transparent}
.stat .big{font-family:var(--font-display); font-weight:800; font-size:2.4rem; color:var(--heading)}

/* ---------- CTA band ---------- */
.cta-band{background:var(--grad-brand); border-radius:var(--radius-lg); padding:54px; color:#fff; text-align:center; box-shadow:var(--shadow-lg)}
.cta-band h2{color:#fff} .cta-band p{color:rgba(255,255,255,.92)}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--border); background:var(--surface-2); padding:54px 0 30px; margin-top:30px}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px}
.foot-grid h4{font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted)}
.foot-grid a{display:block; color:var(--text-muted); padding:5px 0; font-size:.95rem}
.foot-grid a:hover{color:var(--blue)}
.foot-bottom{margin-top:34px; padding-top:20px; border-top:1px solid var(--border); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; color:var(--text-muted); font-size:.9rem}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}}

/* ---------- article / blog & tutorial ---------- */
.article{max-width:760px; margin:0 auto}
.article .meta{display:flex; gap:14px; align-items:center; color:var(--text-muted); font-size:.92rem; margin-bottom:10px}
.article h2{margin-top:1.6em} .article h3{margin-top:1.4em}
.article p,.article li{font-size:1.06rem; color:var(--text)}
.article ul,.article ol{padding-left:1.3em} .article li{margin:.4em 0}
.article pre{background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:16px; overflow:auto}
.article code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.92em}
.article :not(pre)>code{background:var(--surface-2); padding:2px 6px; border-radius:6px; border:1px solid var(--border)}
.callout{border-left:4px solid var(--blue); background:var(--surface-2); padding:14px 18px; border-radius:0 12px 12px 0; margin:1.2em 0}
.breadcrumb{display:flex; gap:8px; color:var(--text-muted); font-size:.9rem; margin-bottom:18px}
.breadcrumb a{color:var(--text-muted)} .breadcrumb a:hover{color:var(--blue)}

/* ---------- auth (login/register) ---------- */
.auth-wrap{min-height:calc(100vh - 68px); display:grid; grid-template-columns:1.1fr 1fr}
.auth-aside{position:relative; overflow:hidden; background:var(--grad-brand); color:#fff; padding:64px 56px; display:flex; flex-direction:column; justify-content:center}
.auth-aside::after{content:""; position:absolute; inset:auto -20% -30% -10%; height:340px; background:radial-gradient(50% 50% at 30% 30%,rgba(255,255,255,.22),transparent 60%)}
.auth-aside h2{color:#fff; font-size:2.2rem} .auth-aside p{color:rgba(255,255,255,.92); max-width:42ch}
.auth-aside .points{margin-top:22px; display:grid; gap:12px}
.auth-aside .points div{display:flex; gap:10px; align-items:flex-start}
.auth-aside .auth-logo{display:block; margin-bottom:30px}                 /* left panel uses the full transparent logo (icon + text) */
.auth-aside .auth-logo img{width:350px; max-width:80%; height:auto}       /* ~50% of its 700px native size */
.auth-main{display:grid; place-items:center; padding:40px 22px; background:var(--bg)}
.auth-card{width:100%; max-width:400px}
.auth-card h1{font-size:1.7rem}
.tabs{display:flex; gap:6px; background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:5px; margin:18px 0 22px}
.tabs button{flex:1; padding:10px; border:0; background:transparent; border-radius:9px; font-family:var(--font-display); font-weight:700; color:var(--text-muted); cursor:pointer}
.tabs button.active{background:var(--surface); color:var(--heading); box-shadow:var(--shadow-sm)}
.field{margin-bottom:15px}
.field label{display:block; font-weight:600; font-size:.9rem; margin-bottom:6px; color:var(--heading)}
.input{width:100%; padding:13px 14px; border-radius:11px; border:1px solid var(--border); background:var(--surface); color:var(--text); font:inherit; transition:.15s}
.input:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 4px var(--ring)}
.auth-alt{margin-top:16px; text-align:center; color:var(--text-muted); font-size:.92rem}
@media(max-width:860px){.auth-wrap{grid-template-columns:1fr} .auth-aside{display:none}}

/* ---------- dashboard ---------- */
.dash{display:grid; grid-template-columns:248px 1fr; min-height:100vh}
.dash-side{background:var(--surface); border-right:1px solid var(--border); padding:18px 14px; display:flex; flex-direction:column; gap:6px}
.dash-side .brand{padding:8px 8px 16px}
.dash-side a{display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:11px; color:var(--text-muted); font-weight:600; font-size:.95rem}
.dash-side a:hover{background:var(--surface-2); color:var(--heading)}
.dash-side a.active{background:color-mix(in srgb,var(--blue) 12%,transparent); color:var(--blue)}
.dash-side .sep{flex:1}
.dash-main{background:var(--bg-subtle); min-width:0}
.dash-top{position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:14px; padding:14px 26px;
  background:var(--header-bg); backdrop-filter:blur(12px); border-bottom:1px solid var(--border)}
.dash-top h1{font-size:1.25rem; margin:0}
.dash-search{flex:1; max-width:420px}
.dash-body{padding:26px}
.stat-card{display:flex; flex-direction:column; gap:6px}
.stat-card .label{color:var(--text-muted); font-size:.86rem; font-weight:600}
.stat-card .big{font-family:var(--font-display); font-weight:800; font-size:1.9rem; color:var(--heading)}
.stat-card .delta{font-size:.85rem; font-weight:700} .delta.up{color:#16a34a}
.avatar{width:38px; height:38px; border-radius:50%; background:var(--grad-blue); color:#fff; display:grid; place-items:center; font-weight:800; font-family:var(--font-display)}
.new-render{background:var(--grad-brand); color:#fff; border:0}
.new-render .label,.new-render .big{color:#fff}
@media(max-width:820px){.dash{grid-template-columns:1fr} .dash-side{position:fixed; left:-260px; top:0; bottom:0; z-index:60; transition:.25s; box-shadow:var(--shadow-lg)} .dash-side.open{left:0}}

/* small helpers */
.row{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.between{justify-content:space-between}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.pill{display:inline-flex; align-items:center; gap:6px; font-size:.8rem; font-weight:700; padding:5px 11px; border-radius:999px; background:var(--surface-2); border:1px solid var(--border); color:var(--text-muted)}
.pill.ok{color:#16a34a; background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.25)}
hr.soft{border:0; border-top:1px solid var(--border); margin:30px 0}