:root {
  color-scheme: dark;
  --bg: #061019; --panel: rgba(10, 23, 33, 0.82); --panel-strong: #0b202d;
  --line: rgba(124, 195, 211, 0.18); --text: #eef8fb; --muted: #9db5bf;
  --accent: #8df1dd; --blue: #6fb1ff; --amber: #ffcb75; --red: #ff8d8a;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 320px; min-height: 100vh; color: var(--text); background: linear-gradient(155deg, #061019, #081722 56%, #04090f); }
button, input, textarea, select { font: inherit; }
.ambient { position: fixed; width: 30rem; height: 30rem; border-radius: 50%; filter: blur(100px); opacity: .13; pointer-events: none; }
.ambient-one { top: -16rem; right: -10rem; background: var(--blue); }
.ambient-two { bottom: -18rem; left: -10rem; background: var(--accent); }
main { position: relative; z-index: 1; min-height: 100vh; }
.auth-card { width: min(44rem, calc(100% - 2rem)); min-height: 100vh; margin: auto; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.brand { display: inline-flex; align-items: center; gap: .8rem; color: inherit; text-decoration: none; }
.brand > span:last-child { display: grid; gap: .08rem; }
.brand small { color: var(--muted); }
.brand-mark { width: 3rem; height: 3rem; display: flex; align-items: flex-end; gap: .25rem; padding: .68rem; border: 1px solid rgba(141,241,221,.25); border-radius: 1rem; background: rgba(141,241,221,.08); transform: rotate(-7deg); }
.brand-mark span { width: .34rem; border-radius: 1rem; background: var(--accent); }
.brand-mark span:nth-child(1) { height: 46%; } .brand-mark span:nth-child(2) { height: 100%; } .brand-mark span:nth-child(3) { height: 68%; }
.brand-mark-small { width: 2.5rem; height: 2.5rem; padding: .58rem; border-radius: .8rem; }
.brand-mark { display: block; object-fit: cover; padding: 0; background: transparent; box-shadow: 0 8px 22px rgba(0,0,0,.22); }
.eyebrow { margin: 1.2rem 0 .65rem; color: var(--accent); font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
h1, h2, h3, p { overflow-wrap: anywhere; }
.auth-card h1 { max-width: 11ch; margin: 0; font-size: clamp(3rem, 8vw, 5.8rem); line-height: .92; letter-spacing: -.065em; }
.auth-copy { max-width: 42rem; color: var(--muted); line-height: 1.7; font-size: 1.04rem; }
.auth-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .7rem; }
.message { min-height: 1.4rem; color: var(--red); }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.8rem; padding: .7rem 1rem; border: 1px solid transparent; border-radius: .85rem; color: inherit; cursor: pointer; font-weight: 750; }
.button:disabled { opacity: .55; cursor: wait; }
.button-primary { color: #05211f; background: linear-gradient(135deg, var(--accent), #b9fff1); }
.button-secondary, .button-quiet { background: rgba(255,255,255,.04); border-color: var(--line); }
.button-quiet { min-height: 2.3rem; padding: .45rem .75rem; color: var(--muted); }
.page { width: min(1400px, calc(100% - 2rem)); margin: auto; padding: 1rem 0 2rem; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .4rem 0 1.4rem; }
.account { display: flex; align-items: center; gap: .8rem; color: var(--muted); font-size: .82rem; }
.board-intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; padding: 1.5rem 0 1.25rem; }
.board-intro .eyebrow { margin-top: 0; }
.board-intro h1 { margin: 0; font-size: clamp(2.5rem, 5vw, 4.5rem); letter-spacing: -.055em; line-height: .95; }
.board-intro p:not(.eyebrow) { max-width: 44rem; color: var(--muted); line-height: 1.6; }
.sort-control { display: grid; gap: .35rem; color: var(--muted); font-size: .75rem; font-weight: 700; }
.board-actions { display: flex; align-items: flex-end; gap: .75rem; }
select { color: var(--text); padding: .72rem 2rem .72rem .8rem; border: 1px solid var(--line); border-radius: .75rem; background: #0a202c; }
.board-layout { display: grid; grid-template-columns: minmax(19rem, 25rem) minmax(0, 1fr); min-height: 65vh; border: 1px solid var(--line); border-radius: 1.5rem; overflow: hidden; background: var(--panel); box-shadow: 0 28px 90px rgba(0,0,0,.38); backdrop-filter: blur(22px); }
.request-panel { padding: .85rem; border-right: 1px solid var(--line); background: rgba(4,12,19,.36); }
.request-list { display: grid; gap: .6rem; }
.request-card { width: 100%; padding: 1rem; text-align: left; color: var(--text); border: 1px solid transparent; border-radius: 1rem; background: rgba(255,255,255,.025); cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.request-card:hover, .request-card.selected { border-color: rgba(141,241,221,.28); background: rgba(141,241,221,.055); transform: translateY(-1px); }
.request-heading, .request-metrics, .section-title, .comment-meta { display: flex; align-items: center; justify-content: space-between; gap: .7rem; }
.request-date, .meta, .request-metrics, .comment-meta, .empty, .loading, .empty-inline { color: var(--muted); font-size: .76rem; }
.request-card h2 { margin: .8rem 0 .45rem; font-size: 1rem; letter-spacing: -.02em; }
.request-card > p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0 0 .8rem; color: var(--muted); font-size: .82rem; line-height: 1.45; }
.status-pill { display: inline-flex; width: max-content; padding: .28rem .55rem; border-radius: 999px; color: var(--accent); background: rgba(141,241,221,.09); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.status-planned, .status-in_progress { color: var(--blue); background: rgba(111,177,255,.1); }
.status-done { color: var(--accent); background: rgba(141,241,221,.12); }
.status-duplicate { color: var(--amber); background: rgba(255,203,117,.1); }
.detail-panel { padding: clamp(1.2rem, 3vw, 2.5rem); min-width: 0; }
.detail-placeholder { min-height: 55vh; display: grid; place-content: center; justify-items: center; text-align: center; color: var(--muted); }
.detail-placeholder h2 { margin: .8rem 0 .2rem; color: var(--text); }
.placeholder-icon { color: var(--accent); font-size: 2.5rem; }
.detail-heading { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1.5rem; }
.detail-heading > div:first-child { min-width: 0; flex: 1 1 24rem; }
.detail-heading h2 { max-width: 22ch; margin: .7rem 0 .35rem; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1; letter-spacing: -.05em; }
.vote-box { display: flex; flex: 0 1 auto; align-items: stretch; gap: .45rem; padding: .5rem; border: 1px solid var(--line); border-radius: 1rem; background: rgba(255,255,255,.025); }
.vote-score { min-width: 3.2rem; display: grid; place-content: center; justify-items: center; padding: 0 .35rem; }
.vote-score small { color: var(--muted); font-size: .62rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.vote-score strong { font-size: 1.15rem; }
.vote-button { min-height: 3.2rem; display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; align-content: center; column-gap: .45rem; padding: .45rem .7rem; border: 0; border-radius: .7rem; color: var(--muted); background: rgba(255,255,255,.035); cursor: pointer; text-align: left; }
.vote-button > span:first-child { grid-row: 1 / 3; align-self: center; font-size: 1.15rem; }
.vote-button > span:nth-child(2) { font-size: .68rem; font-weight: 750; }
.vote-button > strong { color: var(--text); font-size: .9rem; }
.vote-button:hover, .vote-button.active { color: #05211f; background: var(--accent); }
.vote-button:hover > strong, .vote-button.active > strong { color: #05211f; }
.vote-button:disabled { opacity: .55; cursor: wait; }
.detail-body { white-space: pre-wrap; margin: 1.8rem 0; color: #d9e9ed; line-height: 1.75; }
.feature-attachments { margin: 1.5rem 0 2rem; }
.feature-attachments h3 { margin: 0 0 .75rem; font-size: 1rem; }
.feature-attachment-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: .8rem; }
.feature-attachment { display: block; overflow: hidden; min-height: 10rem; border: 1px solid var(--line); border-radius: 1rem; background: rgba(255,255,255,.025); }
.feature-attachment img { display: block; width: 100%; height: 100%; max-height: 30rem; object-fit: contain; background: #03090e; }
.developer-update { margin: 1.5rem 0; padding: 1.2rem; border: 1px solid rgba(141,241,221,.22); border-radius: 1rem; background: rgba(141,241,221,.055); }
.developer-update .eyebrow { margin: 0 0 .6rem; }
.developer-update p:last-child { margin: 0; white-space: pre-wrap; line-height: 1.6; }
.discussion { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.section-title h3 { margin: 0; font-size: 1.25rem; }
.count-pill { min-width: 1.8rem; padding: .25rem .5rem; text-align: center; border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.05); font-size: .72rem; }
.comment-list { display: grid; gap: .7rem; margin: 1rem 0; }
.comment { padding: 1rem; border: 1px solid var(--line); border-radius: 1rem; background: rgba(255,255,255,.025); }
.comment p { margin: .7rem 0 0; white-space: pre-wrap; line-height: 1.6; }
.comment-meta strong { color: var(--accent); }
.comment-form { display: grid; gap: .6rem; margin-top: 1rem; }
.comment-form label { font-size: .8rem; font-weight: 750; }
textarea { width: 100%; min-height: 7rem; resize: vertical; padding: .9rem; color: var(--text); border: 1px solid var(--line); border-radius: 1rem; outline: none; background: rgba(255,255,255,.035); }
textarea:focus { border-color: var(--accent); }
.create-modal { width: min(38rem, calc(100% - 2rem)); padding: 0; color: var(--text); border: 1px solid var(--line); border-radius: 1.2rem; background: #0a202c; box-shadow: 0 30px 100px rgba(0,0,0,.65); }
.create-modal::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(8px); }
.create-card { display: grid; gap: .7rem; padding: 1.25rem; }
.create-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.create-heading .eyebrow { margin: 0; }
.create-heading h2 { margin: .25rem 0 0; font-size: 1.8rem; }
.create-card > p { margin: .2rem 0 .5rem; color: var(--muted); line-height: 1.55; }
.create-card label { font-size: .78rem; font-weight: 750; }
.create-card input, .create-card textarea { width: 100%; padding: .9rem; color: var(--text); border: 1px solid var(--line); border-radius: .9rem; outline: none; background: rgba(255,255,255,.035); }
.create-card input:focus, .create-card textarea:focus { border-color: var(--accent); }
.comment-form > div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--muted); }
.loading, .empty { padding: 2rem 1rem; text-align: center; }
.toast { position: fixed; right: 1.2rem; bottom: 1.2rem; max-width: min(26rem, calc(100% - 2rem)); padding: .9rem 1rem; border: 1px solid var(--line); border-radius: .9rem; background: #0b202d; box-shadow: 0 20px 60px rgba(0,0,0,.45); }
.mobile-back { display: none; margin-bottom: 1rem; }
@media (max-width: 760px) {
  .page { width: min(100% - 1rem, 1400px); }
  .topbar, .board-intro { align-items: flex-start; flex-direction: column; }
  .board-actions { width: 100%; align-items: stretch; flex-direction: column; }
  .board-actions .button, .sort-control { width: 100%; }
  .account { width: 100%; justify-content: space-between; }
  .board-layout { display: block; min-height: 65vh; }
  .request-panel { border-right: 0; }
  .detail-panel { display: none; }
  .detail-open .request-panel { display: none; }
  .detail-open .detail-panel { display: block; }
  .mobile-back { display: inline-flex; }
  .vote-box { width: 100%; }
  .vote-button { flex: 1 1 0; }
  .comment-form > div { align-items: flex-start; flex-direction: column; }
  .comment-form .button { width: 100%; }
}