/* Theme Variables */
:root{
  --bg: #0f0f14;
  --fg: #f2ecff;
  --card:#1a1a24;
  --accent:#8b5cf6; /* blurple */
  --accent2:#f472b6; /* rose */
  --gold:#f5d266;
  --muted:#b8b8c6;
  --shadow: rgba(0,0,0,.35);
  --radius:14px;
  --trans:.2s ease;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
}

body.madhatter{
  --bg:#101215;
  --fg:#f0ede6;
  --card:#171a1f;
  --accent:#a78bfa;
  --accent2:#eab308;
  --gold:#eab308;
  --muted:#c9c6bd;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; padding:0;
  background:linear-gradient(180deg, var(--bg), #141420);
  color:var(--fg);
  font:16px/1.4 var(--font);
}

header, footer{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; position:sticky; top:0; z-index:5;
  background:linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,0));
  backdrop-filter: blur(4px);
}
footer{ position:sticky; bottom:0; top:auto; background:linear-gradient(0deg, rgba(0,0,0,.6), rgba(0,0,0,0)); }

h1{font-size:20px; margin:0}
h1 span{ color:var(--gold) }
.mode-switch{ display:flex; gap:8px; align-items:center }
.mode-switch select, .mode-switch button{ background:var(--card); color:var(--fg); border:1px solid #2a2a38; padding:8px 10px; border-radius:10px }

main{ padding:16px; max-width:980px; margin:0 auto }
.tiles{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; margin-bottom:16px }
.tile{
  padding:18px 14px; border-radius: var(--radius);
  background: radial-gradient(80% 100% at 20% 0%, rgba(139,92,246,.35), transparent),
              linear-gradient(180deg, var(--card), #12121a);
  color:var(--fg); border:1px solid #2a2a38; font-weight:600;
  box-shadow: 0 8px 24px var(--shadow); transition: transform var(--trans);
}
.tile:hover{ transform: translateY(-2px) }

.dynamic{ display:grid; gap:12px }
.card{
  background: linear-gradient(180deg, #161622, var(--card));
  border:1px solid #26263a; border-radius: var(--radius);
  box-shadow: 0 8px 24px var(--shadow); padding:14px;
}
.card h2{ margin:4px 0 10px }
.card .content{ white-space:pre-wrap }

.card .actions{ display:flex; gap:8px; margin-top:8px }
button{ cursor:pointer }

/* Modals */
.modal{ position:fixed; inset:0; display:none; place-items:center; background:rgba(0,0,0,.5) }
.modal[aria-hidden="false"]{ display:grid }
.modal-inner{
  width:min(560px, 92vw); background:var(--card); border:1px solid #2a2a38;
  border-radius: var(--radius); box-shadow: 0 12px 40px var(--shadow);
  padding:16px;
}
.modal-inner.wide{ width:min(820px, 94vw) }
.block{ display:block; margin:10px 0 }
.block input{ width:100%; padding:10px; border-radius:10px; border:1px solid #2a2a38; background:#12121a; color:var(--fg) }
.split{ display:flex; gap:8px; justify-content:flex-end; margin-top:10px }

button{
  background:linear-gradient(180deg, var(--accent), var(--accent2));
  color:#0b0a0f; font-weight:700; border:none; border-radius:12px; padding:10px 14px;
  box-shadow:0 8px 16px rgba(245,210,102,.15);
}
button.secondary{
  background:#20202a; color:var(--fg); border:1px solid #2a2a38; box-shadow:none;
}
button.linklike{ background:transparent; color:var(--fg); border:1px solid #2a2a38 }
button:focus{ outline:2px solid var(--gold) }

.tabs{ display:flex; gap:8px; margin:8px 0 12px }
.tab{ background:#1e1e28; color:var(--fg); border:1px solid #2a2a38 }
.tab.active{ background:linear-gradient(180deg, var(--accent), var(--accent2)); color:#111; }

#threadsList{ list-style:none; padding:0; margin:0 }
#threadsList li{ padding:8px 6px; border-bottom:1px dashed #2b2b3a; display:flex; justify-content:space-between; gap:8px }
#threadsList li small{ color:var(--muted) }

#toast{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:18px; padding:10px 14px; background:#1f1f2a; color:var(--fg);
  border:1px solid #2a2a38; border-radius:12px; display:none;
}
#toast.show{ display:block; animation: fade 2.2s ease both }
@keyframes fade{ 0%{opacity:0; transform:translate(-50%, 10px)} 10%{opacity:1; transform:translate(-50%, 0)} 90%{opacity:1} 100%{opacity:0} }

/* Moss Owl Theme */
body.mossowl{
  --bg:#0d1414;
  --fg:#e9fbf8;
  --card:#122022;
  --accent:#14b8a6; /* teal */
  --accent2:#fb7185; /* rose */
  --gold:#a7f3d0; /* mint-gold accent */
  --muted:#bfe7df;
}

/* Owl crest behavior */
#crest{ display:none; margin-left:8px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
body.mossowl #crest{ display:inline; }