:root{color-scheme:light dark;font:15px/1.5 system-ui,-apple-system,BlinkMacSystemFont,sans-serif;--bg:light-dark(#fff,#1c1c1e);--sidebar:light-dark(#f1f2f5,#242426);--line:light-dark(#dcdde1,#46464b);--muted:light-dark(#575a64,#b7b8c0);--accent:light-dark(#005bc4,#75b5ff);--selected:light-dark(#e2eeff,#233e60)}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:light-dark(#202126,#f5f5f7)}button,input,select,textarea{font:inherit}button{cursor:pointer;color:inherit;background:var(--bg);border:1px solid var(--line);padding:8px 12px;border-radius:8px;min-height:38px}button:hover{background:var(--selected)}button:disabled{opacity:.5;cursor:default}button.primary{background:var(--accent);color:light-dark(#fff,#111);border-color:transparent}a{color:var(--accent)}:focus-visible{outline:3px solid var(--accent);outline-offset:3px}h1,h2,h3,p{margin-top:0}h1{font-size:24px;margin:3px 0}h2{font-size:23px;margin:0}h3{font-size:17px}small,.secondary{color:var(--muted)}.shell{display:grid;grid-template-columns:230px minmax(0,1fr);min-height:100vh}.sidebar{background:var(--sidebar);border-right:1px solid var(--line);padding:24px 16px;display:flex;flex-direction:column;gap:24px}.sidebar header{padding:0 12px}.sidebar small{font-weight:600;letter-spacing:.05em}.sidebar nav{display:grid;gap:5px}.sidebar nav p{margin:16px 12px 4px;font-size:12px;color:var(--muted)}nav button{border:0;background:transparent;text-align:left}nav button[aria-current=page]{background:var(--selected);color:var(--accent);font-weight:600}.sidebar footer{display:grid;margin-top:auto;padding:12px;gap:4px}.sidebar footer span{font-size:12px;color:var(--muted)}main{min-width:0}.demo{padding:12px 24px;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)}.toolbar{padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:12px}.filters{display:flex;gap:16px;padding:0 24px 20px;align-items:end;flex-wrap:wrap}.filters label:first-child{flex:1;min-width:180px}label{display:grid;gap:5px;font-size:13px;color:var(--muted)}input:not([type=checkbox]),select,textarea{background:var(--bg);color:inherit;border:1px solid var(--line);border-radius:7px;padding:9px;width:100%}input[type=checkbox]{accent-color:var(--accent);width:18px;height:18px}label:has(input[type=checkbox]){display:flex;align-items:center;gap:10px;color:inherit;min-height:40px}.workspace{border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(240px,33%) minmax(0,1fr);min-height:72vh}.ticket-list{border-right:1px solid var(--line)}.ticket{display:block;width:100%;padding:18px 20px;border:0;border-bottom:1px solid var(--line);border-radius:0;text-align:left}.ticket[aria-pressed=true]{background:var(--selected)}.ticket strong{display:block;font-size:15px;margin:7px 0}.ticket small{display:block}.badge{display:inline-block;font-size:12px;color:var(--accent);padding:3px 9px;background:var(--selected);border-radius:14px;margin:6px 0}.detail-content{padding:28px;max-width:900px;margin:auto}.detail-content h2{margin:8px 0 12px}.detail-content h3{margin-top:28px}dl{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;margin:24px 0}dt{color:var(--muted)}dd{margin:0;overflow-wrap:anywhere}.body-text{white-space:pre-wrap;overflow-wrap:anywhere}.message{background:var(--sidebar);border-radius:12px;padding:14px;margin:12px 0}.message p{margin:8px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}.message small{display:block}.actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:16px 0}.actions select{width:auto}.compose{border-top:1px solid var(--line);padding-top:20px;margin-top:24px}.compose label{margin:12px 0}.page{padding:28px;max-width:850px;margin:auto}.card{margin-top:24px;padding:22px;border:1px solid var(--line);border-radius:14px}.card p:last-child{margin-bottom:0}.empty{padding:60px 28px;text-align:center;color:var(--muted)}[hidden]{display:none!important}#error{padding:14px 24px;background:light-dark(#fff0eb,#552b24)}#update{padding:12px 24px;background:var(--selected)}dialog{max-width:480px;background:var(--bg);color:inherit;border:1px solid var(--line);border-radius:16px;padding:24px}dialog::backdrop{background:#0006}.skip{position:absolute;left:12px;top:-60px}.skip:focus{top:12px;background:var(--bg);padding:12px;z-index:5}
@media(max-width:900px){.shell{grid-template-columns:190px minmax(0,1fr)}.workspace{grid-template-columns:1fr}.ticket-list{border-right:0;max-height:330px;overflow:auto;border-bottom:1px solid var(--line)}}@media(max-width:600px){.shell{display:block}.sidebar{padding:12px;gap:8px;border-right:0;border-bottom:1px solid var(--line)}.sidebar nav{display:flex;flex-wrap:wrap}.sidebar nav p,.sidebar footer{display:none}.sidebar header{display:flex;gap:12px;align-items:center}.toolbar,.detail-content,.page{padding:18px}button{min-height:44px}.filters{padding:0 18px 16px}.demo{padding:12px 18px}dl{grid-template-columns:1fr;gap:2px}dd{margin-bottom:10px}}
@media(prefers-contrast:more){:root{--line:light-dark(#555,#ddd);--muted:light-dark(#333,#eee)}}
.reporting-form{display:grid;gap:18px}.reporting-form h3{margin:0}.reporting-form button{justify-self:start}.page code{display:block;overflow-wrap:anywhere;user-select:all;font-family:ui-monospace,monospace}#draft-vault form{display:grid;gap:14px}#private-access form{display:grid;gap:14px;margin-top:24px}

/* RoomIQ-inspired account layout using Feedback's own typography and surfaces. */
[hidden]{display:none!important}
.auth-stage{min-height:100dvh;display:grid;place-items:center;padding:32px 20px;background:var(--bg)}
.login-panel{width:min(100%,440px);box-sizing:border-box;padding:42px 36px;border:1px solid var(--line);border-radius:24px;background:var(--bg);text-align:center;box-shadow:0 16px 50px #0000000b}
.auth-brand{letter-spacing:.16em;font-size:.75rem;font-weight:650;margin-bottom:32px}
.login-panel h1{font-size:1.8rem;line-height:1.2;letter-spacing:-.025em;margin:0 0 18px}
.auth-subtitle{line-height:1.6;margin-bottom:32px;color:var(--muted)}
.login-panel button{width:100%;min-height:46px;margin:8px 0;border-radius:11px}
.login-panel #login-notice{font-size:.85rem;line-height:1.5;margin:14px 0 22px}
.auth-footnote{font-size:.75rem;line-height:1.7;color:var(--muted);margin-top:28px}
@media(max-width:480px){.login-panel{padding:30px 24px}.auth-stage{padding:20px 16px}}
@media(forced-colors:active){.login-panel{border:1px solid CanvasText}}

.auth-icon{width:96px;height:96px;object-fit:contain;margin-bottom:12px}.sidebar-icon{width:48px;height:48px;display:block;margin-bottom:10px}.about-icon{width:80px;height:80px;object-fit:contain}
.markup-dialog{max-width:90vw;width:800px;max-height:90vh;overflow:auto;padding:24px}.markup-dialog canvas{display:block;max-width:100%;max-height:60vh;object-fit:contain;touch-action:none;margin:16px auto}.markup-dialog button{margin:4px}

#about .card { text-align: center; }
#about .about-icon { display: block; margin: 0 auto; }

.sidebar header { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }

#home{max-width:1156px}
#areas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));grid-auto-rows:1fr;gap:16px;margin-top:24px}
.feedback-area{--area-color:var(--accent);margin:0;display:flex;flex-direction:column;gap:16px;min-width:0;padding:20px;border-radius:20px;border-color:color-mix(in srgb,var(--area-color) 20%,var(--bg))}
.feedback-area[data-area=workplace]{--area-color:light-dark(#ad4e00,#ffad66)}
.feedback-area[data-area=confidential]{--area-color:light-dark(#9135b1,#e5a0ff)}
.area-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;font-size:26px;color:var(--area-color);background:color-mix(in srgb,var(--area-color) 10%,var(--bg))}
.feedback-area h3,.feedback-area p{margin:0}
.feedback-area .area-description{color:var(--muted);flex:1}
.feedback-area .area-anonymous{font-size:12px;color:var(--muted);padding-top:8px}
.feedback-area button{text-align:left;color:var(--area-color);background:color-mix(in srgb,var(--area-color) 7%,var(--bg));width:100%}
.feedback-area button::after{content:'↗';float:right;margin-left:8px}

#areas{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:12px;margin-top:16px}
.feedback-area{gap:10px;padding:14px;border-radius:14px}
.area-heading{display:flex;align-items:center;gap:10px}
.area-heading h3{font-size:15px}
.area-icon{width:32px;height:32px;flex-shrink:0;border-radius:9px}
.area-icon svg{width:20px;height:20px}
.feedback-area .area-description{font-size:13px}
.feedback-area .area-anonymous{padding-top:0}
.feedback-area button{padding:5px 10px}

/* Keep account actions reachable while the navigation scrolls in short windows. */
@media(min-width:601px){
  .sidebar{height:100dvh;position:sticky;top:0;min-height:0;gap:12px}
  .sidebar header,.sidebar footer{flex-shrink:0}
  .sidebar nav{min-height:0;overflow-y:auto;flex:1}
  .sidebar footer{margin-top:0}
}
@media(max-width:600px){.sidebar footer{display:grid}}
