:root {
  --bg:#0b0d12; --card:#151a23; --card2:#1c2230; --line:#262e3d; --fg:#e8ecf3; --muted:#8c97a8;
  --accent:#5b8cff; --accent-fg:#0a1020; --ok:#3ddc84; --warn:#f5b942; --err:#ff6b6b;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: light) {
  :root { --bg:#f3f5f9; --card:#ffffff; --card2:#f0f3f9; --line:#dde2ec; --fg:#141922; --muted:#5d6879; --accent:#2f62e8; --accent-fg:#fff; --ok:#1f9d57; --warn:#b7791f; --err:#c53030; }
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
body { min-height:100vh; overscroll-behavior-y:none; }
#root { max-width:640px; margin:0 auto; min-height:100vh; display:flex; flex-direction:column; }
h1 { font-size:1.5rem; margin:4px 0 4px; } h2 { font-size:1.1rem; margin:0 0 6px; }
p { margin:6px 0; } a { color:var(--accent); }
.muted { color:var(--muted); } .small { font-size:.85rem; } .mono { font-family:ui-monospace,Consolas,monospace; word-break:break-all; }
.err { color:var(--err); min-height:1.2em; } code { background:var(--card2); padding:1px 5px; border-radius:5px; }

header.top { position:sticky; top:0; z-index:5; display:flex; justify-content:space-between; align-items:center;
  padding:calc(10px + var(--safe-t)) 16px 10px; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:8px; font-weight:700; letter-spacing:.02em; }
.brand.big { font-size:1.6rem; justify-content:center; margin-bottom:4px; }
.logo { color:var(--accent); font-size:1.3em; }
main { flex:1; padding:16px 16px calc(96px + var(--safe-b)); }

nav.tabs { position:fixed; left:50%; transform:translateX(-50%); bottom:0; width:100%; max-width:640px; display:flex;
  padding:6px 8px calc(6px + var(--safe-b)); background:color-mix(in srgb, var(--card) 94%, transparent); backdrop-filter:blur(12px); border-top:1px solid var(--line); z-index:6; }
nav.tabs a { flex:1; display:flex; flex-direction:column; align-items:center; gap:0; padding:6px 4px; color:var(--muted); text-decoration:none; font-size:.72rem; border-radius:10px; }
nav.tabs a .ti { font-size:1.25rem; line-height:1.3; } nav.tabs a.on { color:var(--accent); background:var(--card2); }

.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; margin:12px 0; }
.card.row { display:flex; align-items:center; gap:12px; }
.center { flex:1; display:flex; align-items:center; justify-content:center; padding:24px 16px; }
.login { width:100%; max-width:380px; }
.demo-note { background:var(--card2); border:1px dashed var(--warn); border-radius:10px; padding:8px 10px; font-size:.82rem; color:var(--muted); }

label { display:block; font-size:.85rem; color:var(--muted); margin:10px 0 0; }
label.check { display:flex; gap:10px; align-items:center; color:var(--fg); }
input, select, textarea { display:block; width:100%; margin-top:4px; padding:11px 12px; font:inherit; color:var(--fg); background:var(--bg); border:1px solid var(--line); border-radius:10px; }
input[type=checkbox] { width:20px; height:20px; margin:0; } input[type=file] { padding:8px; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

.btn { font:inherit; font-weight:600; padding:10px 16px; border-radius:10px; border:1px solid var(--line); background:var(--card2); color:var(--fg); cursor:pointer; }
.btn.primary { background:var(--accent); color:var(--accent-fg); border-color:transparent; }
.btn.danger { color:var(--err); } .btn.small { padding:6px 12px; font-size:.85rem; } .btn.block { width:100%; margin-top:14px; }
.btn:disabled { opacity:.5; cursor:default; }
button.link { background:none; border:0; color:var(--accent); font:inherit; font-size:.9rem; padding:4px 8px 4px 0; cursor:pointer; } button.link.danger { color:var(--err); }
.actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }

.badge { font-size:.68rem; font-weight:700; padding:2px 7px; border-radius:99px; background:var(--card2); color:var(--muted); margin-left:8px; vertical-align:middle; }
.badge.warn { background:var(--warn); color:#1a1200; margin:0; }
.chip { font-size:.75rem; padding:2px 9px; border-radius:99px; background:var(--card2); border:1px solid var(--line); color:var(--muted); }
.meta { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; }

details.project { padding:0; } details.project summary { list-style:none; display:flex; align-items:center; gap:12px; padding:14px; cursor:pointer; }
details.project summary::-webkit-details-marker { display:none; }
.picon { font-size:1.8rem; width:44px; height:44px; flex:none; display:grid; place-items:center; background:var(--card2); border-radius:12px; }
.ptxt { flex:1; display:flex; flex-direction:column; min-width:0; } .ptxt small, .dtxt small { color:var(--muted); font-size:.82rem; }
.chev { color:var(--muted); font-size:1.4rem; transition:transform .15s; } details[open] .chev { transform:rotate(90deg); }
.pbody { padding:0 14px 14px; border-top:1px solid var(--line); } .pbody ul, .pbody ol, .note ol { padding-left:20px; margin:8px 0; } .pbody li { margin:3px 0; }
.pbody .btn { margin-top:10px; }

.device .drow { display:flex; align-items:center; gap:12px; } .dtxt { flex:1; display:flex; flex-direction:column; min-width:0; }
.dot { width:12px; height:12px; border-radius:50%; background:var(--muted); flex:none; } .dot.on { background:var(--ok); box-shadow:0 0 0 4px color-mix(in srgb, var(--ok) 25%, transparent); }
.note { background:var(--card2); border-radius:10px; padding:12px; margin-top:12px; }

.seg { display:flex; gap:6px; margin:10px 0; } .seg a { flex:1; text-align:center; padding:8px; border-radius:10px; background:var(--card); border:1px solid var(--line); text-decoration:none; color:var(--muted); }
.seg a.on { background:var(--accent); color:var(--accent-fg); border-color:transparent; }

#toasts { position:fixed; left:12px; right:12px; bottom:calc(84px + var(--safe-b)); display:flex; flex-direction:column; gap:8px; align-items:center; z-index:20; pointer-events:none; }
.toast { background:var(--fg); color:var(--bg); padding:10px 14px; border-radius:10px; font-size:.9rem; max-width:560px; box-shadow:0 6px 24px rgba(0,0,0,.35); }
.toast.err { background:var(--err); color:#fff; }

.keybox { background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:10px; user-select:all; }

.overlay { position:fixed; inset:0; z-index:30; background:rgba(0,0,0,.55); display:flex; align-items:flex-end; justify-content:center; padding:16px calc(16px + env(safe-area-inset-right,0px)) calc(16px + var(--safe-b)); }
.sheetcard { width:100%; max-width:560px; margin:0; }

/* ideas + threads */
.thread { margin-top:14px; border-top:1px solid var(--line); padding-top:10px; }
.thread h3 { font-size:.95rem; margin:0 0 6px; }
.cthread { margin:10px 0; }
.cmt { padding:8px 0; } .cmt.reply { margin-left:18px; padding-left:12px; border-left:2px solid var(--line); }
.cmeta { font-size:.8rem; color:var(--muted); } .cbody { margin:2px 0; white-space:pre-wrap; word-break:break-word; }
.cform { margin:8px 0; } .cform textarea { margin:0; }
.pbody > p { white-space:pre-wrap; word-break:break-word; }

/* dashboard tiles */
.tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; margin-top:16px; }
.tile { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:28px 16px 22px;
  background:var(--card); border:1px solid var(--line); border-radius:20px; transition:transform .15s, border-color .15s, box-shadow .15s; }
.tile:hover { transform:translateY(-2px); border-color:var(--accent); box-shadow:0 10px 30px rgba(0,0,0,.25); }
.tile img { width:88px; height:88px; border-radius:22px; box-shadow:0 8px 24px rgba(79,70,229,.35); }
.tile b { font-size:1.05rem; letter-spacing:.01em; }

/* desktop / web: left sidebar instead of the phone's bottom bar, wider content */
@media (min-width: 900px) {
  #root { max-width:1080px; }
  main { padding:24px 24px 48px 252px; }
  nav.tabs { top:84px; bottom:auto; left:calc(50% - 540px + 24px); transform:none; width:204px; max-width:none; flex-direction:column; gap:4px;
    padding:8px; border:1px solid var(--line); border-radius:16px; }
  nav.tabs a { flex-direction:row; justify-content:flex-start; gap:12px; font-size:.95rem; padding:10px 14px; }
  nav.tabs a .ti { font-size:1.1rem; width:1.4em; text-align:center; }
  #toasts { bottom:24px; }
  .overlay { align-items:center; }
  .tiles { grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }
  .tile img { width:104px; height:104px; }
}