:root {
  --bg:#0b0d0c; --surface:#121614; --surface-2:#181d1a; --line:#2a312d;
  --text:#f0f1ea; --muted:#939b95; --lime:#c7fa63; --danger:#ffa58c;
  --serif:'Instrument Serif', Georgia, serif; --sans:Outfit, sans-serif; --mono:'DM Mono', monospace;
}
* { box-sizing:border-box }
html, body { margin:0; min-height:100%; background:var(--bg); color:var(--text) }
body { font-family:var(--sans); -webkit-font-smoothing:antialiased }
.app { width:min(100%,560px); min-height:100vh; margin:auto; padding:24px 22px calc(32px + env(safe-area-inset-bottom)) }
.screen { display:none; animation:enter .25s ease }
.screen.active { display:block }
@keyframes enter { from { opacity:0; transform:translateY(7px) } to { opacity:1; transform:none } }
h1,h2,p { margin:0 }
h1 { font-size:clamp(57px,15.5vw,82px); font-weight:500; line-height:.86; letter-spacing:-.07em; margin:25px 0 23px }
h2 { font-size:clamp(42px,12vw,65px); font-weight:500; line-height:.89; letter-spacing:-.065em; margin:16px 0 30px }
em { color:var(--lime); font-family:var(--serif); font-weight:400; letter-spacing:-.03em }
.kicker { padding-top:28px; color:var(--muted); font:10px var(--mono); letter-spacing:.13em }
.primary,.secondary { border:0; border-radius:4px; cursor:pointer; font:600 14px var(--sans) }
.primary { display:flex; justify-content:space-between; align-items:center; width:100%; margin-top:40px; padding:17px 18px; background:var(--lime); color:#11170c }
.primary b { font-size:21px; font-weight:400 }
.primary:disabled { opacity:.45; cursor:wait }
.stack-actions { border-top:1px solid var(--line); margin-top:39px }
.line-action { display:flex; width:100%; align-items:center; border:0; border-bottom:1px solid var(--line); padding:19px 0; background:none; color:var(--text); cursor:pointer; font:500 15px var(--sans); text-align:left }
.line-action b { margin-left:auto; color:var(--muted); font-size:20px; font-weight:400 }
.back { padding:25px 0 0; border:0; background:none; color:var(--muted); cursor:pointer; font:11px var(--mono) }
.form-step { display:none }
.form-step.active { display:block }
.issues { border-top:1px solid var(--line) }
.issues label { display:flex; align-items:center; gap:14px; min-height:53px; border-bottom:1px solid var(--line); cursor:pointer; font-size:15px }
.issues input { appearance:none; width:16px; height:16px; margin:0; border:1px solid #5a645e; border-radius:50% }
.issues input:checked { border:5px solid var(--lime) }
.issues span { color:var(--muted); font:10px var(--mono) }
.field { display:block; margin-top:21px; color:var(--muted); font-size:12px }
.field small { float:right; font-size:10px }
.field input { display:block; width:100%; padding:12px 0 11px; border:0; border-bottom:1px solid var(--line); border-radius:0; outline:0; background:none; color:var(--text); font:16px var(--sans) }
.field input:focus { border-color:var(--lime) }
.field input::placeholder { color:#58605a }
.upload { display:flex; flex-direction:column; gap:4px; margin-top:27px; padding:20px; border:1px dashed #566059; color:var(--text); cursor:pointer }
.upload span { color:var(--lime); font-size:24px; line-height:1 }
.upload strong { font-size:14px }
.upload small { color:var(--muted); font-size:11px }
.file-list { padding:0; margin:8px 0 0; list-style:none }
.file-list li { overflow:hidden; padding:7px 0; border-bottom:1px solid var(--line); color:var(--muted); font:10px var(--mono); text-overflow:ellipsis; white-space:nowrap }
.consent { display:flex; gap:9px; margin-top:24px; color:var(--muted); font-size:11px; line-height:1.45 }
.consent input { margin:2px 0 0; accent-color:var(--lime) }
.consent button { padding:0; border:0; background:none; color:var(--lime); cursor:pointer; font:inherit; text-decoration:underline }
.form-nav { display:flex; gap:10px }
.form-nav .primary { margin-top:29px }
.secondary { margin-top:29px; padding:0 18px; background:var(--surface-2); color:var(--text) }
.form-error { min-height:19px; padding-top:13px; color:var(--danger); font-size:12px }
.ticket-list { margin-top:-10px; border-top:1px solid var(--line) }
.ticket { display:block; width:100%; padding:18px 0; border:0; border-bottom:1px solid var(--line); background:none; color:var(--text); cursor:pointer; text-align:left }
.ticket-top { display:flex; justify-content:space-between; color:var(--muted); font:10px var(--mono) }
.ticket-top b { color:var(--lime); font-weight:500 }
.ticket h3 { margin:7px 0 0; font-size:16px; font-weight:500 }
.ticket p,.empty { color:var(--muted); font-size:12px }
.ticket p { margin-top:5px }
.empty { padding:27px 0; font-size:13px }
.detail-label { margin-top:36px; color:var(--muted); font:10px var(--mono); letter-spacing:.12em }
.detail-title { margin:11px 0 8px; font-size:44px }
.status { display:inline-block; padding:5px 7px; border:1px solid #405446; color:var(--lime); font:10px var(--mono) }
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; margin-top:25px; border:1px solid var(--line); background:var(--line) }
.detail-grid div { padding:14px; background:var(--surface) }
.detail-grid span { display:block; margin-bottom:7px; color:var(--muted); font:9px var(--mono) }
.detail-grid b { font-size:13px; font-weight:500 }
.detail-text { margin-top:25px; color:var(--muted); font-size:13px; line-height:1.55 }
.detail-actions .primary { margin-top:17px }
.detail-actions .secondary { width:100%; margin-top:9px; padding:14px }
.prose p { max-width:390px; padding:0; color:var(--muted); font-size:13px; line-height:1.6 }
.toast { position:fixed; z-index:4; bottom:20px; left:50%; width:calc(100% - 40px); max-width:500px; padding:13px 15px; transform:translate(-50%,130px); background:#e7eadf; color:#11150f; font-size:13px; transition:transform .25s }
.toast.show { transform:translate(-50%,0) }
@media(min-width:561px) { .app { padding:32px 34px calc(32px + env(safe-area-inset-bottom)); border-inline:1px solid var(--line) } .kicker { padding-top:34px } }
@media(max-width:360px) { h1 { font-size:54px } .app { padding-inline:17px } }
