/* Flow web app — shared theme + components. Mirrors index.html's design tokens
   so the marketing site and the app feel like one product. Auto light/dark. */
:root{
  --bg:#05060a; --fg:#f3f6fb; --muted:#9098a8; --faint:#5d6577;
  --accent:#5ec8ff; --accent2:#7af0d0; --violet:#9b8cff;
  --line:rgba(255,255,255,.08); --card:rgba(255,255,255,.04); --card2:rgba(255,255,255,.055);
  --nav:rgba(5,6,10,.7); --maxw:1120px;
  --ok:#7af0d0; --warn:#ffcf6c; --bad:#ff7a8c;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#eef1f7; --fg:#0c1424; --muted:#566076; --faint:#8a93a6;
    --accent:#1f9fe8; --accent2:#10b894;
    --line:rgba(12,20,36,.10); --card:rgba(12,20,36,.030); --card2:rgba(12,20,36,.05);
    --nav:rgba(238,241,247,.74);
    --ok:#10b894; --warn:#c8881a; --bad:#e0445c;
  }
  .mesh{opacity:.55}
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font:16px/1.6 "SF Pro Text",-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",system-ui,sans-serif;
  color:var(--fg); background:var(--bg); -webkit-font-smoothing:antialiased; overflow-x:hidden; min-height:100vh}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}
.grad{background:linear-gradient(105deg,var(--accent),var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.eyebrow{font-size:13px; font-weight:600; letter-spacing:2.5px; text-transform:uppercase; color:var(--accent)}
.muted{color:var(--muted)} .faint{color:var(--faint)}

/* ambient background (same as the landing page) */
.mesh{position:fixed; inset:-20% -10% auto; height:120vh; z-index:-2; pointer-events:none;
  background:
    radial-gradient(40vw 40vw at 12% 6%, rgba(94,200,255,.20), transparent 62%),
    radial-gradient(38vw 38vw at 88% 14%, rgba(122,240,208,.14), transparent 62%),
    radial-gradient(46vw 46vw at 60% 44%, rgba(155,140,255,.12), transparent 60%);
  filter:blur(8px); background-size:180% 180%; animation:drift 28s ease-in-out infinite alternate}
@keyframes drift{from{background-position:0% 0%}to{background-position:100% 100%}}
@media (prefers-reduced-motion:reduce){.mesh{animation:none}}

/* logomark — fill/stroke inherit into the <use> content */
.logo{display:block;fill:none;stroke:url(#lg);stroke-width:14;stroke-linecap:round;stroke-linejoin:round}

/* header / nav */
header{position:sticky; top:0; z-index:50; background:var(--nav); backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:18px}
.nm{display:flex; align-items:center; gap:10px; font-weight:650; font-size:17px; letter-spacing:.2px}
.nm .logo{width:27px;height:27px}
.nav .links{display:flex; align-items:center; gap:22px}
.nav .links a{color:var(--muted); font-size:14.5px; transition:color .15s}
.nav .links a:hover,.nav .links a.active{color:var(--fg)}
@media (max-width:640px){.nav .links a.opt{display:none}}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:13px 26px; border-radius:13px;
  font-weight:600; font-size:15.5px; cursor:pointer; border:none; font-family:inherit;
  transition:transform .15s, box-shadow .15s, border-color .15s, color .15s, background .15s}
.btn.primary{background:linear-gradient(100deg,var(--accent),var(--accent2)); color:#04121a; box-shadow:0 10px 32px rgba(94,200,255,.32)}
.btn.primary:hover{transform:translateY(-2px); box-shadow:0 16px 44px rgba(94,200,255,.48)}
.btn.ghost{border:1px solid var(--line); color:var(--fg); background:transparent}
.btn.ghost:hover{border-color:var(--accent); color:var(--accent)}
.btn.sm{padding:9px 16px; font-size:14px; border-radius:11px}
.btn[disabled]{opacity:.5; pointer-events:none}
.pill{padding:9px 17px; border-radius:11px; font-size:14.5px; font-weight:600; cursor:pointer;
  background:linear-gradient(100deg,var(--accent),var(--accent2)); color:#04121a; border:none; font-family:inherit;
  transition:transform .15s, box-shadow .15s; box-shadow:0 6px 22px rgba(94,200,255,.28)}
.pill:hover{transform:translateY(-1px); box-shadow:0 10px 30px rgba(94,200,255,.42)}

/* glass card */
.card{background:var(--card); border:1px solid var(--line); border-radius:20px; backdrop-filter:blur(20px)}
.card.pad{padding:26px}

/* page scaffold */
main{padding:46px 0 90px; min-height:60vh}
.page-head{display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:26px}
.page-head h1{font-size:clamp(28px,4.2vw,40px); letter-spacing:-1.4px; line-height:1.05}
.page-head p{color:var(--muted); margin-top:6px}

/* avatar */
.avatar{width:64px;height:64px;border-radius:50%; object-fit:cover; border:1px solid var(--line); background:var(--card2);
  display:grid; place-items:center; font-weight:700; font-size:24px; color:var(--accent); flex:none}

/* profile header */
.profile{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.profile .who{flex:1; min-width:200px}
.profile .who h2{font-size:23px; letter-spacing:-.5px; display:flex; align-items:center; gap:10px}
.profile .who .em{color:var(--muted); font-size:14.5px; margin-top:2px}
.profile .stats{display:flex; gap:26px}
.profile .stats .n{font-size:22px; font-weight:700} .profile .stats .l{color:var(--faint); font-size:12.5px; text-transform:uppercase; letter-spacing:1px}

/* badges */
.badge{display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:999px; font-size:12px; font-weight:600;
  border:1px solid var(--line); background:var(--card2); color:var(--muted)}
.badge.ok{color:var(--ok); border-color:color-mix(in srgb,var(--ok) 40%,transparent); background:color-mix(in srgb,var(--ok) 12%,transparent)}
.badge.warn{color:var(--warn); border-color:color-mix(in srgb,var(--warn) 40%,transparent); background:color-mix(in srgb,var(--warn) 12%,transparent)}
.badge.bad{color:var(--bad); border-color:color-mix(in srgb,var(--bad) 40%,transparent); background:color-mix(in srgb,var(--bad) 12%,transparent)}
.badge.accent{color:var(--accent); border-color:color-mix(in srgb,var(--accent) 40%,transparent); background:color-mix(in srgb,var(--accent) 12%,transparent)}

/* tabs (glass chips) */
.tabs{display:flex; gap:8px; flex-wrap:wrap; margin:30px 0 20px}
.tab{padding:8px 16px; border-radius:999px; font-size:14px; font-weight:500; cursor:pointer; color:var(--muted);
  background:var(--card); border:1px solid var(--line); transition:color .15s, border-color .15s}
.tab:hover{color:var(--fg)}
.tab.active{color:var(--accent); font-weight:600; border-color:color-mix(in srgb,var(--accent) 45%,transparent)}

/* wallpaper grid + cell */
.wgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(228px,1fr)); gap:16px}
.wcell{position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--line); background:var(--card);
  transition:transform .2s, box-shadow .2s; cursor:pointer}
.wcell:hover{transform:translateY(-4px); box-shadow:0 18px 44px rgba(0,0,0,.34)}
.wcell .thumb{aspect-ratio:16/10; width:100%; display:block; object-fit:cover; background:
  linear-gradient(135deg,color-mix(in srgb,var(--accent) 40%,transparent),color-mix(in srgb,var(--violet) 40%,transparent))}
.wcell .meta{padding:11px 13px}
.wcell .meta .t{font-size:14.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.wcell .meta .by{color:var(--faint); font-size:12.5px; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.wcell .corner{position:absolute; top:9px; right:9px}
.wcell .stat{position:absolute; left:9px; bottom:54px; display:flex; gap:7px}
.wcell .stat span{display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:999px; font-size:11.5px;
  background:rgba(8,10,16,.6); backdrop-filter:blur(10px); color:#fff; border:1px solid rgba(255,255,255,.12)}

/* forms */
.field{display:block; margin-bottom:16px}
.field label{display:block; font-size:13px; font-weight:600; color:var(--muted); margin-bottom:7px}
.field input[type=text], .field input[type=email], .field textarea{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:var(--card2);
  color:var(--fg); font:inherit; font-size:15px; transition:border-color .15s}
.field input:focus, .field textarea:focus{outline:none; border-color:var(--accent)}
.check{display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--muted); cursor:pointer; line-height:1.45}
.check input{margin-top:3px; width:17px; height:17px; accent-color:var(--accent); flex:none}

/* search box */
.searchbox{padding:11px 16px; border-radius:12px; border:1px solid var(--line); background:var(--card2);
  color:var(--fg); font:inherit; font-size:14.5px; min-width:210px; transition:border-color .15s}
.searchbox:focus{outline:none; border-color:var(--accent)}

/* dropzone */
.drop{border:1.5px dashed var(--line); border-radius:18px; padding:42px 24px; text-align:center; cursor:pointer;
  transition:border-color .15s, background .15s; background:var(--card)}
.drop:hover,.drop.over{border-color:var(--accent); background:var(--card2)}
.drop .big{font-size:17px; font-weight:600; margin:12px 0 4px}

/* empty / loading states */
.empty{text-align:center; padding:60px 20px; color:var(--faint)}
.empty .logo{width:44px;height:44px;margin:0 auto 16px;opacity:.5}
.spinner{width:26px;height:26px;border-radius:50%;border:2.5px solid var(--line);border-top-color:var(--accent);
  animation:spin .7s linear infinite; margin:40px auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* sign-in card */
.signin{max-width:420px; margin:8vh auto 0; text-align:center}
.signin .logo{width:56px;height:56px;margin:0 auto 22px;filter:drop-shadow(0 6px 24px rgba(94,200,255,.5))}
.signin h1{font-size:32px; letter-spacing:-1.4px}
.signin p{color:var(--muted); margin:12px 0 26px}
.gbtn-wrap{display:flex; justify-content:center; min-height:44px}
.note{font-size:12.5px; color:var(--faint); margin-top:18px; line-height:1.5}

/* avatar menu */
.menu{position:relative}
.menu .av-btn{display:flex; align-items:center; gap:9px; cursor:pointer; background:none; border:none; padding:4px; border-radius:999px}
.menu .av-btn .avatar{width:34px;height:34px;font-size:14px}
.menu .pop{position:absolute; right:0; top:46px; min-width:200px; padding:8px; border-radius:14px;
  background:var(--nav); backdrop-filter:blur(22px) saturate(1.4); border:1px solid var(--line);
  box-shadow:0 20px 50px rgba(0,0,0,.4); display:none; flex-direction:column; gap:2px}
.menu.open .pop{display:flex}
.menu .pop a, .menu .pop button{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:9px; font-size:14px;
  color:var(--fg); background:none; border:none; cursor:pointer; font-family:inherit; text-align:left; width:100%}
.menu .pop a:hover, .menu .pop button:hover{background:var(--card2)}
.menu .pop .sep{height:1px; background:var(--line); margin:5px 0}

/* toast */
.toast{position:fixed; left:50%; bottom:30px; transform:translateX(-50%) translateY(20px); opacity:0;
  padding:13px 22px; border-radius:13px; background:var(--nav); backdrop-filter:blur(20px); border:1px solid var(--line);
  box-shadow:0 18px 44px rgba(0,0,0,.4); font-size:14.5px; z-index:200; transition:opacity .25s, transform .25s; pointer-events:none}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.toast.bad{border-color:color-mix(in srgb,var(--bad) 50%,transparent)}

footer{border-top:1px solid var(--line); padding:30px 0 50px; color:var(--faint); font-size:13.5px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px}
footer a{color:var(--faint)} footer a:hover{color:var(--fg)}
.fbrand{display:flex;align-items:center;gap:9px;color:var(--muted)} .fbrand .logo{width:21px;height:21px}