/* public/css/styles.css */
/* ===== Cute, modern, gender-neutral app skin ===== */

:root{
  --bg:#0e0f13; --glass:#171925cc; --card:#171a25; --ink:#0f1116;
  --text:#f3f5fb; --muted:#aab1bf;
  --accent:#7C5CFF; --accent-2:#00d1b2; --accent-3:#ffb86b;
  --border:#262b37; --line:#202533;
  --r-xl:24px; --r-lg:18px; --r:14px;
  --shadow: 0 20px 40px rgba(0,0,0,.35); --soft: 0 8px 18px rgba(0,0,0,.25);
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;font-family:"Nunito",system-ui,-apple-system,Segoe UI,Roboto,Inter,sans-serif;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* dreamy blobs */
.bg{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.blob{position:absolute;width:48vw;height:48vw;max-width:680px;max-height:680px;filter:blur(60px);opacity:.35;border-radius:50%;transform:translateZ(0)}
.b1{background:radial-gradient(circle at 30% 30%,#8a75ff,transparent 60%);top:-10%;left:-10%}
.b2{background:radial-gradient(circle at 60% 30%,#00e0c0,transparent 65%);top:-15%;right:-15%}
.b3{background:radial-gradient(circle at 40% 70%,#ffbf86,transparent 60%);bottom:-20%;left:10%}

.app{min-height:100%;display:grid;grid-template-rows:auto 1fr auto}

/* Top bar */
.topbar{position:sticky;top:0;z-index:40;background:linear-gradient(180deg,rgba(15,17,22,.75),rgba(15,17,22,.3));backdrop-filter:blur(12px) saturate(1.2);border-bottom:1px solid var(--border);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:14px 18px}
.left{display:flex;align-items:center;gap:10px}
.brand{justify-self:center;display:flex;align-items:center;gap:10px}
.mark{font-size:22px;filter:drop-shadow(0 2px 0 rgba(0,0,0,.25))}
.name{font-weight:800;letter-spacing:.2px}
.right{display:flex;align-items:center;gap:10px}

/* Buttons */
.icon-btn{appearance:none;border:none;background:#141725;color:#dfe4f3;padding:10px 14px;border-radius:999px;cursor:pointer;box-shadow:var(--soft)}
.icon-btn.soft{background:#131622;border:1px dashed var(--border);color:#b8c0d3;box-shadow:none}
.icon-btn:active{transform:translateY(1px)}
.home-btn.prominent{font-weight:800}

/* Content & cards */
.content{max-width:980px;margin:0 auto;width:100%;padding:18px}
.card{background:linear-gradient(180deg,rgba(28,30,42,.9),rgba(22,24,35,.9));border:1px solid var(--border);border-radius:var(--r-xl);padding:16px;box-shadow:var(--shadow);backdrop-filter:blur(10px) saturate(1.1);margin-bottom:16px}
.title{margin:2px 0 10px;font-size:18px}
.subtitle{margin:12px 0 6px;font-size:14px;color:var(--muted)}

/* Grid */
.grid{display:grid;gap:16px;grid-template-columns:1fr}
.span-2{grid-column:1/-1}
@media(min-width:900px){.grid{grid-template-columns:1fr 1fr}}

/* Two-column layout */
.grid.two-col{display:grid;gap:16px;grid-template-columns:1fr}
.grid.two-col .sidebar{order:1}
.grid.two-col .mainpane{order:2}
@media(min-width:980px){.grid.two-col{grid-template-columns:320px minmax(0,1fr);align-items:start}.grid.two-col .sidebar{position:sticky;top:88px}}

/* Forms */
.field{margin-bottom:12px}
.row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.label{display:block;margin:0 0 6px 8px;color:var(--muted);font-size:13px}
.input{width:100%;padding:14px 14px;border-radius:18px;outline:none;border:1px solid var(--border);background:#0f1422;color:var(--text);transition:box-shadow .15s ease,border-color .15s ease,transform .06s ease;box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)}
.input:focus{border-color:#3a4260;box-shadow:0 0 0 4px rgba(124,92,255,.15)}
.flex{flex:1}
.hint{color:var(--muted);font-size:12px;margin-top:6px}

/* CTA buttons */
.btn{appearance:none;border:none;cursor:pointer;font-weight:800;letter-spacing:.2px;border-radius:18px;padding:12px 16px;background:#1a1f2e;color:#e8ecf7;box-shadow:var(--soft);transition:transform .06s ease,filter .15s ease}
.btn.primary{background:linear-gradient(90deg,var(--accent),#9b7dff);color:var(--ink)}
.btn.pill{border-radius:999px;padding:10px 14px}
.btn.icon{width:46px;height:46px;display:grid;place-items:center}
.btn.wide{width:100%}
.btn:active{transform:translateY(1px)}
.btn:hover{filter:brightness(1.03)}

/* Links & badges */
.link{color:#dfe4f3;text-decoration:none}
.you-badge{background:#101524;border:1px solid var(--border);padding:8px 12px;border-radius:999px;font-weight:800;color:#e8ecf7}
.hidden{display:none}

/* Home recent */
.recent{list-style:none;padding:0;margin:8px 0 0}
.recent li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px dashed var(--line)}
.recent a{color:#e8ecf7;text-decoration:none;font-weight:700}

/* People */
.people{list-style:none;margin:6px 0 0;padding:0;min-height:40px}
.people li{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px dashed var(--line)}
.ava{--c:#9b7dff;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:18px;background:linear-gradient(180deg,var(--c),rgba(255,255,255,.2));color:#101217;border:1px solid rgba(255,255,255,.25);box-shadow:0 6px 14px rgba(0,0,0,.25)}
.pname{font-weight:800}

/* Items */
.items{list-style:none;padding:0;margin:10px 0 0}
.item{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px 0;border-top:1px dashed var(--line)}
.item .avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:18px;background:#101424;border:1px solid var(--border)}
.ibody,.item .body{word-break:break-word}
.item.strike .ibody,.item .body.strike{text-decoration:line-through;opacity:.55}
.item button.minus{background:#131622;border:1px dashed var(--border);color:#c9d0e1;border-radius:14px;padding:10px 14px;cursor:pointer;box-shadow:none}
.item button.minus:hover{filter:brightness(1.05)}
.item button.minus.active{background:linear-gradient(90deg,var(--accent),#9b7dff);color:var(--ink);border-style:solid}

/* Subheader (unused now) */
.subheader{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}