:root { --sand:#fff8ec; --ink:#3e3441; --muted:#756b72; --purple:#4d285d; --purple-soft:#77538a; --aqua:#8edee4; --aqua-deep:#277b9a; --coral:#e98683; --pink:#f5b4b8; --gold:#c79a58; --green:#5f9e73; --line:rgba(116,84,103,.16); --shadow:0 14px 36px rgba(73,48,73,.12); }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); font-family:"Nunito","Segoe UI",Arial,sans-serif; background:radial-gradient(circle at 6% 19%,rgba(142,222,228,.21),transparent 27rem),radial-gradient(circle at 96% 36%,rgba(245,180,184,.18),transparent 25rem),linear-gradient(180deg,#fffdf8 0%,var(--sand) 56%,#fdf0dc 100%); }
a { color:inherit; }
.page-shell { width:min(880px,calc(100% - 32px)); margin:0 auto; padding:56px 0 84px; }
.eyebrow { margin:0 0 8px; color:var(--aqua-deep); font-size:.75rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
h1 { margin:0 0 10px; color:var(--purple); font-family:Georgia,serif; font-size:clamp(1.9rem,4vw,2.6rem); }
.lead { margin:0 0 34px; max-width:640px; color:var(--muted); line-height:1.65; }
.cta { display:inline-block; margin-top:6px; padding:10px 18px; border-radius:999px; color:#fff; font-weight:900; font-size:.85rem; text-decoration:none; background:linear-gradient(135deg,var(--purple),var(--purple-soft)); box-shadow:0 10px 22px rgba(77,40,93,.2); }
.legend { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:30px; }
.legend-item { display:flex; align-items:center; gap:7px; padding:7px 12px; border-radius:999px; font-size:.78rem; font-weight:800; background:rgba(255,255,255,.65); border:1px solid var(--line); }
.legend-dot { width:9px; height:9px; border-radius:50%; }
.suggestion-list { display:flex; flex-direction:column; gap:16px; }
.suggestion-card { border-radius:22px; border:1px solid var(--line); border-left:6px solid var(--card-accent, var(--gold)); background:rgba(255,255,255,.85); box-shadow:var(--shadow); overflow:hidden; }
.suggestion-toggle { display:block; width:100%; padding:20px clamp(16px,3vw,26px); border:none; background:none; text-align:left; cursor:pointer; font:inherit; color:inherit; }
.suggestion-toggle:hover { background:rgba(119,83,138,.04); }
.suggestion-toggle:focus-visible { outline:2px solid var(--aqua-deep); outline-offset:-2px; }
.suggestion-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.suggestion-head-left { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.character-name { color:var(--purple); font-family:Georgia,serif; font-size:1.15rem; }
.toggle-icon { flex-shrink:0; width:24px; height:24px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(119,83,138,.1); color:var(--purple-soft); font-size:.75rem; transition:transform .25s ease; }
.suggestion-card.expanded .toggle-icon { transform:rotate(180deg); }
.suggestion-date { color:var(--muted); font-size:.78rem; font-weight:700; }
.status-badge { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; font-size:.72rem; font-weight:900; letter-spacing:.03em; text-transform:uppercase; }
.status-pending  { color:#8a6a2b; background:rgba(199,154,88,.18); }
.status-progress { color:var(--aqua-deep); background:rgba(39,123,154,.15); }
.status-done     { color:#2f6b45; background:rgba(95,158,115,.18); }
.status-rejected { color:#a2403d; background:rgba(233,134,131,.2); }
.admin-flag { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:999px; font-size:.68rem; font-weight:800; color:var(--purple-soft); background:rgba(119,83,138,.1); }
.suggestion-preview { margin:10px 0 0; color:var(--muted); font-size:.88rem; line-height:1.5; transition:opacity .2s ease; }
.suggestion-card.expanded .suggestion-preview { display:none; }
.suggestion-message { color:var(--ink); line-height:1.65; white-space:pre-wrap; }
.suggestion-body { display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s ease; }
.suggestion-card.expanded .suggestion-body { grid-template-rows:1fr; }
.suggestion-body-inner { min-height:0; overflow:hidden; padding:0 clamp(16px,3vw,26px); }
.suggestion-card.expanded .suggestion-body-inner { padding-bottom:20px; }
.admin-note { margin-top:14px; padding:12px 16px; border-radius:14px; background:rgba(119,83,138,.08); border:1px dashed rgba(119,83,138,.3); }
.admin-note-label { display:block; margin-bottom:4px; color:var(--purple-soft); font-size:.72rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.admin-note p { margin:0; color:var(--ink); line-height:1.6; }
.empty-state { padding:40px; text-align:center; border-radius:22px; border:1px dashed rgba(199,154,88,.5); color:var(--muted); background:rgba(255,252,245,.6); }
.pagination { display:flex; justify-content:center; gap:8px; margin-top:34px; }
.pagination a, .pagination span { min-width:40px; padding:9px 12px; border-radius:12px; text-align:center; font-weight:800; font-size:.85rem; text-decoration:none; border:1px solid var(--line); background:rgba(255,255,255,.7); }
.pagination .active { color:#fff; background:var(--purple); border-color:var(--purple); }
.back-link { display:inline-block; margin-top:36px; color:var(--aqua-deep); font-weight:800; font-size:.88rem; text-decoration:none; }
@media (max-width:600px) { .suggestion-head { flex-direction:column; align-items:flex-start; } }