/* FlatNote Kit — v2 theme (CSS-only refresh)
   Matches the landing page vibe: gradients, glass cards, crisp typography.
   Drop-in replacement for public/css/style.css
*/

/* ---------- Theme tokens ---------- */
:root{
  --bg1:#0b0b0e;         /* top background */
  --bg2:#0f1117;         /* bottom background */
  --ink:#e6e6ea;         /* primary text */
  --muted:#9ba3af;       /* secondary text */
  --line:#232738;        /* subtle borders */
  --card:#111218cc;      /* glass card bg (with alpha) */
  --card-solid:#111218;  /* solid fallback */
  --pri:#6ee7b7;         /* mint */
  --acc:#a78bfa;         /* lilac */
  --red:#ef4444;         /* danger */
  --ring:#8cc0ff;        /* focus ring */
  --shadow: 0 6px 24px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.02);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink);
  background:linear-gradient(180deg,var(--bg1),var(--bg2));
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* ---------- Layout ---------- */
.wrap{max-width:980px;margin:0 auto;padding:28px}
.header{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 0 14px; margin-bottom:22px;
  backdrop-filter:saturate(160%) blur(8px);
  /*background:linear-gradient(180deg, rgba(17,18,24,.65), rgba(17,18,24,.25));*/
  border-bottom:1px solid rgba(35,39,56,.6);
}

.brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--ink)}
.brand .logo{
  width:28px;height:28px;border-radius:8px;
  background:linear-gradient(135deg,var(--pri),var(--acc));
  display:grid;place-items:center;font-weight:900;box-shadow:var(--shadow)
}
.brand .name{font-weight:800;letter-spacing:.2px}

/* ---------- Nav ---------- */
.nav a{color:var(--muted);text-decoration:none;margin-left:14px}
.nav a:hover{color:var(--ink)}
.nav .btn{margin-left:16px}

/* ---------- Cards & sections ---------- */
.card{
  background:var(--card); /* glass */
  border:1px solid var(--line);
  border-radius:16px; padding:20px; box-shadow:var(--shadow);
  backdrop-filter:saturate(140%) blur(6px);
}
section + section, .card + .card{margin-top:12px}

/* ---------- Typography ---------- */
h1,h2,h3{margin:0 0 10px; line-height:1.25; letter-spacing:.2px}
h1{font-size:1.9rem}
h2{font-size:1.4rem}
h3{font-size:1.15rem}
.muted{color:var(--muted)}
article strong{ color:#FFC56D }   /* warm gold accent to match landing */
article h2{ color:#C4B5FD }       /* soft lilac */

/* ---------- Links & buttons ---------- */
a{color:var(--acc);text-decoration:none}
a:hover{text-decoration:underline}

.btn{
  display:inline-block; cursor:pointer; user-select:none;
  background:linear-gradient(135deg,var(--pri),var(--acc));
  color:#0b0b0e; border:none; text-decoration:none;
  padding:10px 14px; border-radius:12px; font-weight:800; letter-spacing:.2px;
  box-shadow:0 4px 16px rgba(167,139,250,.25);
  transition:transform .12s ease, box-shadow .12s ease, opacity .15s ease;
}
.btn:hover{transform:translateY(-1px); text-decoration:none}
.btn:active{transform:translateY(0)}
.btn[disabled]{opacity:.6; pointer-events:none}

.btn.ghost{
  background:transparent; color:var(--ink);
  border:1px solid var(--line);
  box-shadow:none;
}

/* Danger button variant (used in admin delete) */
button.danger, .btn.danger{
  background:var(--red); color:#fff; box-shadow:none;
}

/* ---------- Forms ---------- */
label{display:block;margin:8px 0 6px}
input,textarea,select,button{
  width:100%; padding:10px 12px; border-radius:10px;
  border:1px solid #2a2f3d; background:#0d0f14; color:var(--ink);
  outline:none; transition:border-color .15s ease, box-shadow .15s ease;
}
input:focus,textarea:focus,select:focus{
  border-color:var(--ring);
  box-shadow:0 0 0 3px rgba(140,192,255,.15);
}
textarea{min-height:220px}

/* ---------- Lists / grid (home) ---------- */
.postlist{
  display:grid; gap:14px; grid-template-columns:1fr 1fr 1fr; align-items:stretch;
}
@media (max-width:1024px){ .postlist{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .postlist{grid-template-columns:1fr} }

.postlist a{
  position:relative; display:block; padding:16px 16px 14px 16px;
  border:1px solid #2b3040; border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  min-height:112px; text-decoration:none; color:var(--ink);
  transition:border-color .15s ease, transform .12s ease;
}
.postlist a:hover{ transform:translateY(-1px); border-color:#384159 }

.postlist .num{
  position:absolute; top:12px; right:12px;
  width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  background:radial-gradient(120% 120% at 20% 20%, var(--pri), var(--acc));
  color:#0b0b0e; font-weight:800; box-shadow:0 2px 10px rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.08);
}
.postlist small{color:var(--muted)}

/* ---------- Tables (admin list) ---------- */
.table{width:100%; border-collapse:separate; border-spacing:0 8px}
.table th{color:var(--muted); font-weight:600; text-align:left; padding:6px 10px}
.table td{
  background:var(--card-solid); border:1px solid var(--line);
  padding:10px; vertical-align:middle;
}
.table tr td:first-child{ border-radius:10px 0 0 10px }
.table tr td:last-child{ border-radius:0 10px 10px 0 }
.table tr:hover td{ border-color:#31384a }

/* ---------- Messages ---------- */
.msg{
  background:#1f2937; color:#e5e7eb; padding:10px;
  border-radius:10px; border:1px solid #2a3242; margin:10px 0;
}

/* ---------- Footer ---------- */
footer{margin-top:28px;color:var(--muted);font-size:14px}

/* ---------- Accessibility & motion ---------- */
:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(140,192,255,.3)}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important}
}

/* ---------- Optional extras (no HTML changes required) ---------- */

/* Make header nav links feel tappable on mobile */
@media (max-width:560px){
  .nav a{display:inline-block; padding:8px 6px}
}

/* Slightly larger editor text for comfort */
@media (min-width:900px){
  textarea[name="body"]{font-size:15.5px; line-height:1.55}
}