* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family:var(--font); font-size:var(--body); line-height:1.55; }
button,input,select,textarea { font:inherit; }
button,a,input,select,textarea { -webkit-tap-highlight-color: transparent; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
button { cursor:pointer; }
button:disabled { opacity:.5; cursor:wait; }
button,.button { border:1px solid var(--outline); border-radius:var(--radius-small); background:var(--raised); color:var(--text); padding:var(--s3) var(--s4); min-height:44px; }
button:hover,.button:hover { border-color:var(--accent); text-decoration:none; }
button.primary { background:var(--accent); color:var(--on-accent); border-color:var(--accent); font-weight:700; }
button.quiet { background:transparent; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:var(--display); letter-spacing:-.04em; line-height:1.15; margin-bottom:var(--s3); }
h2 { font-size:var(--title); line-height:1.3; margin-bottom:var(--s4); }
h3 { font-size:var(--body); margin-bottom:var(--s2); }
.muted,small { color:var(--muted); }
small,.eyebrow,.badge { font-size:var(--small); }
.eyebrow { letter-spacing:.08em; text-transform:uppercase; color:var(--accent); font-weight:700; }
.shell { display:grid; grid-template-columns:var(--sidebar) minmax(0,1fr); min-height:100dvh; }
.sidebar { position:sticky; top:0; height:100dvh; border-right:1px solid var(--outline); padding:var(--s6) var(--s5); display:flex; flex-direction:column; gap:var(--s6); }
.brand { display:flex; align-items:center; gap:var(--s3); color:var(--text); font-weight:800; font-size:var(--title); line-height:1.25; }
.brand img { width:40px; height:40px; }
nav { display:flex; flex-direction:column; gap:var(--s2); }
nav a { color:var(--muted); padding:var(--s3) var(--s4); border-radius:var(--radius-small); font-weight:600; }
nav a[aria-current="page"] { background:var(--accent-soft); color:var(--accent); }
.account { margin-top:auto; display:grid; gap:var(--s2); }
main { min-width:0; padding:var(--edge); max-width:var(--content-width); width:100%; margin:0 auto; }
.page-head,.section-head,.row,.toolbar { display:flex; justify-content:space-between; align-items:center; gap:var(--s4); flex-wrap:wrap; }
.page-head { margin-bottom:var(--s6); }
.page-head p { margin-bottom:0; }
.section-head { margin:var(--s5) 0; }
.section-head h2 { margin:0; }
.toolbar { justify-content:flex-end; }
.toolbar input,.toolbar select { width:auto; max-width:100%; }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s4); }
.card { padding:var(--card-pad); background:var(--surface); border:1px solid var(--outline); border-radius:var(--radius); min-width:0; }
.project { display:flex; flex-direction:column; gap:var(--s3); }
.project .row { align-items:flex-start; }
.project h2 { margin-bottom:var(--s1); }
.project p { margin-bottom:var(--s2); }
.project a { color:inherit; }
.project a:hover { color:var(--accent); }
.project-status { display:grid; gap:var(--s3); margin:var(--s2) 0; }
.project-status p { margin:0; overflow-wrap:anywhere; white-space:pre-wrap; }
.label { display:block; color:var(--muted); font-size:var(--small); margin-bottom:var(--s1); }
.badge { padding:var(--s1) var(--s3); border:1px solid var(--outline); border-radius:var(--pill); white-space:nowrap; color:var(--muted); }
.badge.accent { color:var(--accent); border-color:var(--accent); background:var(--accent-soft); }
.stats { display:flex; gap:var(--s4); margin-bottom:var(--s6); flex-wrap:wrap; }
.stat { padding:var(--s4) var(--s5); border-left:2px solid var(--outline); }
.stat strong { display:block; font-size:var(--title); }
.request-list { display:grid; gap:var(--s3); }
.request-card { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:var(--s4); color:var(--text); }
.request-card:hover { border-color:var(--accent); text-decoration:none; }
.request-card h3 { overflow-wrap:anywhere; }
.request-id { font-family:var(--mono); color:var(--muted); }
.empty { text-align:center; padding:var(--s7) var(--s5); border:1px dashed var(--outline); border-radius:var(--radius); }
.stack { display:grid; gap:var(--s4); }
.stack > * { min-width:0; }
label { display:grid; gap:var(--s2); color:var(--muted); }
input,select,textarea { width:100%; border:1px solid var(--outline); border-radius:var(--radius-small); padding:var(--s3); background:var(--bg); color:var(--text); min-height:44px; }
textarea { min-height:100px; resize:vertical; }
input[type="checkbox"] { width:22px; height:22px; min-height:0; accent-color:var(--accent); }
.check { display:flex; align-items:center; }
form { margin:0; }
.login { max-width:480px; margin:10vh auto; }
.login .brand { margin-bottom:var(--s6); }
.notice { padding:var(--s4); background:var(--accent-soft); border:1px solid var(--outline); border-radius:var(--radius-small); }
.error { color:var(--error); white-space:pre-wrap; }
.flow { display:flex; gap:var(--s2); flex-wrap:wrap; margin-bottom:var(--s4); }
.flow span { font-size:var(--small); color:var(--muted); }
.flow span.current { color:var(--accent); font-weight:700; }
.conversation { display:grid; gap:var(--s4); margin:var(--s5) 0; }
.message { max-width:100%; }
.message.mine { border-left:3px solid var(--accent); }
.message-body { white-space:pre-wrap; overflow-wrap:anywhere; }
.message-body p { margin:var(--s3) 0 0; }
.message-head { display:flex; justify-content:space-between; gap:var(--s3); color:var(--muted); font-size:var(--small); }
.message-actions { margin-top:var(--s3); }
.question { padding:var(--s4); background:var(--raised); border-radius:var(--radius-small); margin-top:var(--s4); }
.chips { display:flex; gap:var(--s2); flex-wrap:wrap; margin:var(--s3) 0; }
.chips button[aria-pressed="true"] { background:var(--accent-soft); border-color:var(--accent); color:var(--accent); }
.chips button { text-align:left; white-space:normal; }
.attachment { display:block; max-width:100%; max-height:420px; border-radius:var(--radius-small); margin-top:var(--s4); }
.history { border-left:2px solid var(--outline); padding-left:var(--s4); margin:var(--s3) 0; }
.history p { margin-bottom:var(--s2); overflow-wrap:anywhere; }
.details { display:grid; grid-template-columns:minmax(0,2fr) minmax(260px,1fr); gap:var(--s5); align-items:start; }
.technical { overflow-wrap:anywhere; font-family:var(--mono); font-size:var(--small); }
dialog { background:var(--surface); color:var(--text); border:1px solid var(--outline); border-radius:var(--radius); padding:var(--s5); max-width:560px; width:calc(100% - var(--s6)); max-height:90dvh; }
dialog::backdrop { background:color-mix(in srgb,var(--bg) 80%,transparent); }
dialog .row { margin-bottom:var(--s4); }
dialog h2 { margin:0; }
#toast:not(:empty) { position:fixed; bottom:var(--s5); left:50%; transform:translateX(-50%); background:var(--raised); border:1px solid var(--accent); padding:var(--s3) var(--s5); border-radius:var(--radius); max-width:90vw; z-index:10; }
.skip { position:absolute; top:-100px; left:var(--s4); z-index:20; background:var(--surface); padding:var(--s3); }
.skip:focus { top:var(--s4); }
.loading { color:var(--muted); }
@media(max-width:800px) {
  .shell { grid-template-columns:minmax(0,1fr); }
  .sidebar { position:static; height:auto; border-right:0; border-bottom:1px solid var(--outline); padding:var(--s4); gap:var(--s4); }
  .brand { font-size:var(--body); }
  .brand img { width:32px; height:32px; }
  nav { flex-direction:row; flex-wrap:wrap; }
  nav a { padding:var(--s2) var(--s3); }
  .account { display:flex; align-items:center; justify-content:space-between; }
  .account small { display:none; }
  .grid,.details { grid-template-columns:minmax(0,1fr); }
  .request-card { grid-template-columns:auto minmax(0,1fr); }
  .request-card .badge { grid-column:2; justify-self:start; }
  .toolbar { justify-content:flex-start; width:100%; }
  .toolbar input,.toolbar select { flex:1; min-width:120px; }
  .stats { gap:var(--s2); }
  .stat { padding:var(--s2) var(--s3); }
}
