/* Minimal clean styles */
:root{ --bg:#fff; --fg:#111; --muted:#666; --card:#f6f6f6; --primary:#111; --accent:#e11d48; }
.theme-red{ --bg:#fff1f2; --fg:#111; --card:#ffe4e6; --primary:#b91c1c; --accent:#b91c1c; }
*, *::before, *::after{ box-sizing: border-box; }
body{ margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background:var(--bg); color:var(--fg); line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
.container{ max-width: 960px; margin: 0 auto; padding: 16px; }
.container.narrow{ max-width: 720px; }
.container.full{ max-width: 1200px; }
.nav{ background: var(--card); border-bottom: 1px solid #e5e7eb; position: sticky; top:0; z-index: 50; backdrop-filter: saturate(160%) blur(6px); }
.nav .nav-inner{ display:flex; align-items:center; justify-content:space-between; padding: 8px 16px; }
.nav .brand{ font-weight:700; color:var(--primary); text-decoration:none; display:flex; align-items:center; gap:8px; }
.nav nav a{ margin-left:12px; text-decoration:none; color: var(--fg); padding:8px 10px; border-radius:8px; }
.nav nav a:hover{ background: rgba(0,0,0,0.04); }
.nav #mainNav{ scrollbar-width: none; }
.nav #mainNav::-webkit-scrollbar{ display:none; height:0; }
.nav #mainNav{ -ms-overflow-style: none; }
.nav #mainNav .nav-link{ display:inline-flex; padding:10px 12px; border-radius:12px; }
.nav .nav-link{ display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:8px 12px; border-radius:12px; color:#374151; text-decoration:none; }
.nav .nav-link:hover{ background:#f3f4f6; color:#111827; }
/* Danger variant for logout */
.nav .nav-link.danger{ color: var(--accent); }
.nav .nav-link.danger:hover{ background:#fee2e2; color:#991b1b; }
.card{ background: var(--card); border:1px solid #e5e7eb; border-radius:16px; padding:20px; margin:16px 0; box-shadow: 0 10px 18px -12px rgba(0,0,0,0.25); }
.btn{ background: var(--primary); color:#fff; border:none; border-radius:12px; padding:10px 16px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:600; font-size:0.95rem; line-height:1; transition: transform .06s ease, filter .2s ease, opacity .2s ease; }
.btn:hover{ filter: brightness(1.05); transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.btn.secondary{ background:#f3f4f6; color:#1f2937; border: 1px solid #e5e7eb; }
.btn.secondary:hover{ background:#e5e7eb; }
.btn.danger{ background: var(--accent); }
.btn.full{ width:100%; }
.link{ background:none; border:none; color: var(--primary); cursor:pointer; text-decoration:underline; }
.link.danger{ color: var(--accent); }
/* Base form controls */
input, textarea, select{ width:100%; margin:8px 0; border:1px solid #e5e7eb; border-radius:12px; background:#fff; color:inherit; transition: all 0.2s ease; }
/* Unified control heights and padding (exclude radios/checkboxes/files) */
input:not([type=checkbox]):not([type=radio]):not([type=file]),
select{ height:44px; padding:12px 14px; }
textarea{ padding:12px 14px; min-height:100px; line-height:1.45; resize: vertical; }
/* Large textareas: bio (settings) and write post (profile) */
.form textarea[name="bio"],
.form textarea[name="content"]{
  padding:14px 16px;
  min-height:120px;
  line-height:1.6;
  text-align:left;
  vertical-align:top;
  font-size:16px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  margin: 12px 0;
  transition: all 0.2s ease;
}

.form textarea[name="content"] {
  min-height: 100px;
  margin-bottom: 12px;
}
/* File input spacing */
input[type=file]{ padding:8px; }
/* Placeholder */
::placeholder{ color:#9ca3af; }
.form label{ display:block; font-weight:600; margin:10px 0 6px; color:#374151; }
input, textarea, select{ font-size:16px; }
input:focus, textarea:focus, select:focus{ outline:none; border-color:#94a3b8; box-shadow: 0 0 0 3px rgba(148,163,184,.25); }
.help{ color:#6b7280; font-size:0.9rem; }
.inline{ display:inline; }
.hp{ display:none; }
.profile-header{ display:flex; gap:16px; align-items:center; }
.avatar{ width:96px; height:96px; border-radius:50%; object-fit:cover; background:#fff; border:1px solid #e5e7eb; }
.avatar.small{ width:28px; height:28px; vertical-align:middle; margin-right:8px; }
.posts .post{ border:1px solid #e5e7eb; border-radius:12px; padding:14px; margin:14px 0; background:#fff; }
.post.toast{ border-left: 6px solid #16a34a; }
.post.roast{ border-left: 6px solid #b91c1c; }
.post header{ display:flex; align-items:center; justify-content:space-between; color: var(--muted); font-size:14px; }
.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.user-list{ list-style:none; padding:0; }
.user-list li{ padding:6px 0; }
.error{ background:#fee2e2; color:#991b1b; padding:10px 12px; border-radius:10px; }
.notice{ background:#ecfeff; color:#155e75; padding:10px 12px; border-radius:10px; }
.search-form{ display:flex; gap:8px; }

/* Pills / segmented controls */
.pills{ display:flex; gap:8px; flex-wrap:wrap; margin: 8px 0; }
.pill{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid #e5e7eb; border-radius:999px; cursor:pointer; user-select:none; }
.pill input{ position:absolute; opacity:0; width:0; height:0; }
.pill span{ font-weight:600; color:#374151; }
.pill input:checked + span{ color:#111827; }
.pill.toast{ border-color:#16a34a33; }
.pill.toast input:checked + span{ color:#065f46; }
.pill.roast{ border-color:#b91c1c33; }
.pill.roast input:checked + span{ color:#7f1d1d; }
.pill.active{ background:#f3f4f6; border-color:#cbd5e1; }
.pill.toast.active{ background:#ecfdf5; border-color:#10b981; }
.pill.roast.active{ background:#fef2f2; border-color:#ef4444; }
/* Auto-active via :has support */
.pill:has(input:checked){ background:#f3f4f6; border-color:#cbd5e1; }
.pill.toast:has(input:checked){ background:#ecfdf5; border-color:#10b981; }
.pill.roast:has(input:checked){ background:#fef2f2; border-color:#ef4444; }
.pill:focus-within{ box-shadow: 0 0 0 3px rgba(148,163,184,.25); }
.switch{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid #e5e7eb; border-radius:999px; cursor:pointer; }
.switch input{ position:absolute; opacity:0; width:0; height:0; }
.switch .dot{ width:10px; height:10px; border-radius:999px; background:#e5e7eb; }
.switch input:checked + .dot{ background:#10b981; }
.switch.active{ background:#ecfdf5; border-color:#10b981; }
/* Auto-active switch */
.switch:has(input:checked){ background:#ecfdf5; border-color:#10b981; }
.switch:focus-within{ box-shadow: 0 0 0 3px rgba(16,185,129,.25); }

/* Typography & links */
h1{ font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); margin: 0 0 16px; letter-spacing:-0.015em; line-height: 1.2; }
h2{ font-size: clamp(1.15rem, 1.05rem + 0.8vw, 1.5rem); margin: 0 0 10px; }
p.lead{ color:#4b5563; font-size:1rem; }
small, .muted{ color:#6b7280; }
p{ margin: 6px 0; color: var(--fg); }
a{ color: var(--primary); text-decoration: none; }
a:hover{ text-decoration: underline; }

/* Utilities */
.row{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin: 12px 0; }
.center{ display:flex; align-items:center; justify-content:center; }
.right{ margin-left:auto; }

/* Responsive */
@media (max-width: 720px){
  .container{ padding: 12px; }
  .nav .nav-inner{ flex-wrap: wrap; gap:8px; }
  .nav nav a{ margin-left:0; }
  .profile-header{ flex-direction: column; align-items: flex-start; }
  .grid-2{ grid-template-columns: 1fr; }
  .search-form{ flex-direction: column; }
  .avatar{ width:80px; height:80px; }
  .card{ padding:16px; border-radius:14px; }
}

@media (max-width: 480px){
  .avatar{ width:64px; height:64px; }
  .btn{ width:100%; text-align:center; }
  .row > .btn{ flex:1; }
}