/* ── Theme tokens ───────────────────────────────────────────────
   Dark is the default. Auto-light follows the OS only when no explicit
   choice is set; the top-right toggle forces [data-theme] which wins. */
:root{
  --bg:#0f1216; --panel:#161b22; --panel-2:#1c232c; --line:#2a323c;
  --ink:#e6edf3; --muted:#9aa7b4; --faint:#6b7785;
  --brand:#46c7c7; --brand-2:#5b8cff; --accent:#7c5cff;
  --radius:14px; --maxw:1040px;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme]){
    --bg:#f4f6f9; --panel:#ffffff; --panel-2:#f0f3f7; --line:#e2e7ee;
    --ink:#16202b; --muted:#56616d; --faint:#8a96a3;
    --brand:#0aa6a6; --brand-2:#2f6bff; --accent:#6b4cff;
  }
}
:root[data-theme="light"]{
  --bg:#f4f6f9; --panel:#ffffff; --panel-2:#f0f3f7; --line:#e2e7ee;
  --ink:#16202b; --muted:#56616d; --faint:#8a96a3;
  --brand:#0aa6a6; --brand-2:#2f6bff; --accent:#6b4cff;
}

*{box-sizing:border-box;}
html,body{margin:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.55; -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
a{color:var(--brand-2); text-decoration:none;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px;}

/* ── Theme toggle (injected by theme.js) ── */
#mgTheme{
  position:fixed; top:16px; right:16px; z-index:9000;
  width:42px; height:42px; border-radius:50%;
  border:1px solid var(--line); background:var(--panel); color:var(--ink);
  cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:18px;
  box-shadow:0 2px 12px rgba(0,0,0,.18); transition:transform .15s ease, background .2s ease;
}
#mgTheme:hover{ transform:translateY(-2px) rotate(-8deg); }

/* ── Personal home ── */
.hero{padding:60px 0 22px;}
.greet{color:var(--muted); font-size:15px; margin:0 0 4px;}
.hero h1{font-size:34px; margin:0; letter-spacing:-0.6px;}
.hero .tag-line{color:var(--muted); margin:8px 0 0; font-size:16px;}
.section-label{font-size:12px; letter-spacing:1.4px; text-transform:uppercase; color:var(--faint);
  font-weight:700; margin:34px 0 0;}

.controls{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin:14px 0 4px;}
.search{flex:1; min-width:220px; position:relative;}
.search input{width:100%; background:var(--panel); border:1px solid var(--line); color:var(--ink);
  border-radius:11px; padding:11px 14px 11px 38px; font-size:15px; outline:none;}
.search input:focus{border-color:var(--brand-2);}
.search svg{position:absolute; left:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; fill:var(--faint);}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; padding:18px 0 60px;}
.card{display:block; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; transition:transform .14s ease, border-color .14s ease; position:relative; overflow:hidden;}
.card:hover{transform:translateY(-3px); border-color:var(--brand-2);}
.card-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}
.card .icon{width:46px; height:46px; border-radius:12px; object-fit:cover; border:1px solid var(--line);}
.card .icon-emoji{width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:24px; background:var(--panel-2); border:1px solid var(--line);}
.card .date{font-size:11px; color:var(--faint);}
.card h3{margin:0 0 6px; font-size:18px; color:var(--ink); letter-spacing:-0.2px;}
.card p{margin:0; color:var(--muted); font-size:14px;}
.card .meta{display:flex; gap:6px; flex-wrap:wrap; margin-top:12px;}
.card .t{font-size:11px; color:var(--faint); background:var(--panel-2); border:1px solid var(--line); padding:3px 9px; border-radius:20px;}
.empty{color:var(--muted); text-align:center; padding:50px 0; grid-column:1/-1;}

footer{border-top:1px solid var(--line); color:var(--faint); font-size:13px; padding:22px 0 40px;}

/* ── Reusable project-page chrome ── */
.topbar{border-bottom:1px solid var(--line); padding:14px 0;}
.back{display:inline-flex; align-items:center; gap:7px; color:var(--muted); font-size:14px; font-weight:500;}
.back:hover{color:var(--brand-2);}
.doc{max-width:780px; margin:0 auto; padding:34px 22px 80px;}
.doc h1{font-size:27px; letter-spacing:-0.4px;}
.doc h2{font-size:19px; margin-top:30px; border-bottom:1px solid var(--line); padding-bottom:6px;}
.doc code{background:var(--panel-2); border:1px solid var(--line); border-radius:5px; padding:1px 6px; font-size:13.5px;}
.doc kbd{background:var(--panel-2); border:1px solid var(--line); border-bottom-width:2px; border-radius:6px; padding:1px 7px; font-size:13px;}
.proj-head{display:flex; align-items:center; gap:16px; margin-bottom:6px;}
.proj-head img{width:60px; height:60px; border-radius:14px; border:1px solid var(--line);}

/* ── Card with actions + status ── */
.card{padding:0;}
.card-main{display:block; padding:18px 18px 14px;}
.status{font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; padding:3px 9px; border-radius:20px;}
.status.idea{background:color-mix(in srgb,var(--faint) 18%,transparent); color:var(--muted);}
.status.building{background:rgba(239,159,39,.16); color:#cf8400;}
.status.live{background:rgba(46,199,125,.16); color:#1aa05a;}
:root[data-theme="light"] .status.building{color:#9a6300;}
.card-actions{display:flex; align-items:center; gap:7px; padding:10px 14px; border-top:1px solid var(--line); background:var(--panel-2);}
.act{font-size:12.5px; color:var(--muted); padding:5px 10px; border:1px solid var(--line); border-radius:8px;
  background:var(--panel); cursor:pointer; display:inline-flex; align-items:center; gap:4px;}
.act:hover{border-color:var(--brand-2); color:var(--brand-2);}
.act.build{font-weight:600; color:var(--brand-2); border-color:color-mix(in srgb,var(--brand-2) 40%,var(--line));}
.act.build:hover{background:color-mix(in srgb,var(--brand-2) 12%,transparent);}
.act.build:disabled{opacity:.7; cursor:default;}
.act.gear{margin-left:auto; font-size:15px; padding:5px 9px;}

/* ── Settings modal ── */
.modal-bg{position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:9500; display:flex; align-items:center; justify-content:center; padding:20px;}
.modal{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:22px 22px 20px; width:440px; max-width:100%; box-shadow:0 24px 70px rgba(0,0,0,.4);}
.modal h3{margin:0 0 2px; font-size:18px;}
.modal .sub{color:var(--muted); font-size:13px; margin:0 0 16px;}
.modal label{display:block; font-size:12px; color:var(--muted); font-weight:600; margin:12px 0 5px; letter-spacing:.3px;}
.modal input,.modal select,.modal textarea{width:100%; background:var(--panel-2); border:1px solid var(--line); color:var(--ink);
  border-radius:9px; padding:9px 11px; font-size:14px; outline:none; font-family:inherit;}
.modal input:focus,.modal select:focus,.modal textarea:focus{border-color:var(--brand-2);}
.modal .actions{display:flex; gap:8px; margin-top:18px; flex-wrap:wrap;}
.btn{border:1px solid var(--line); background:var(--panel-2); color:var(--ink); border-radius:9px; padding:9px 14px; font-size:14px; font-weight:500; cursor:pointer;}
.btn.primary{background:var(--brand-2); border-color:var(--brand-2); color:#fff;}
.btn.ghost{margin-left:auto;}
.hint{font-size:12px; color:var(--faint); margin-top:12px; line-height:1.5;}