:root{color-scheme:light dark;--bg:var(--tg-theme-bg-color,#101820);--panel:var(--tg-theme-secondary-bg-color,#182530);--text:var(--tg-theme-text-color,#edf3f8);--muted:var(--tg-theme-hint-color,#96a6b6);--accent:var(--tg-theme-button-color,#55a9df);--button-text:var(--tg-theme-button-text-color,#07131c);--line:color-mix(in srgb,var(--text) 14%,transparent)}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 system-ui,sans-serif;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px 24px;border-bottom:1px solid var(--line)}header>div{display:flex;gap:12px;align-items:center}.brand{background:var(--accent);color:var(--button-text);font-weight:800;border-radius:10px;padding:5px 11px}.muted,small{color:var(--muted)}nav{display:flex;gap:8px;padding:12px 24px;border-bottom:1px solid var(--line);overflow:auto}button,input,textarea,select{font:inherit;color:inherit}button{cursor:pointer;border:1px solid var(--line);border-radius:9px;background:var(--panel);padding:9px 13px;min-height:40px}button:hover{border-color:var(--accent)}button:disabled{cursor:wait;opacity:.5}.primary,nav button.active{background:var(--accent);color:var(--button-text);border-color:transparent}.danger{color:#ef7777}input,select,textarea{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px}textarea{min-height:110px;resize:vertical}label{display:grid;gap:5px;font-size:13px;color:var(--muted)}input:focus,textarea:focus,select:focus{outline:2px solid var(--accent)}#workspace{display:grid;grid-template-columns:minmax(280px,360px) minmax(0,1fr);max-width:1500px;margin:auto;min-height:75vh}#list{border-right:1px solid var(--line);padding:18px;min-width:0}#detail{padding:24px;min-width:0}.empty{color:var(--muted);padding:36px 10px;text-align:center}.filters,.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0}.wide{grid-column:1/-1}.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.between{justify-content:space-between}.card{display:block;width:100%;text-align:left;margin:8px 0;padding:13px}.card strong{display:block}.card small{display:block;margin-top:5px}.badge{display:inline-block;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:2px 9px;font-size:12px}.critical{color:#ff8888}.high{color:#ffc679}h1{font-size:23px;margin:0 0 6px}h2{font-size:17px;margin:22px 0 12px}h3{font-size:15px;margin:0 0 6px}.chat{display:flex;flex-direction:column;gap:12px;padding:16px 0;max-height:55vh;overflow:auto;overscroll-behavior:contain}.message{padding:12px 15px;border-radius:12px;background:var(--panel);max-width:90%;white-space:pre-wrap;overflow-wrap:anywhere}.message.staff{align-self:flex-end;border:1px solid var(--line)}.message p{margin:7px 0}.message small{display:block}.message img{max-width:100%;max-height:360px;border-radius:8px}.message video,.message audio{max-width:100%}.note{border-left:3px solid #d4a552;padding:10px 14px;margin:8px 0;background:var(--panel);white-space:pre-wrap;overflow-wrap:anywhere}.audit{font-size:12px;color:var(--muted);margin:7px 0;overflow-wrap:anywhere}.composer{border-top:1px solid var(--line);padding-top:15px}.composer .row{margin-top:10px}#notice:empty{display:none}#notice{padding:10px 24px;background:var(--panel);border-bottom:1px solid var(--line);white-space:pre-wrap}#notice.error{color:#ff9797}.back{display:none}.check{display:flex;align-items:center;gap:8px}.check input{width:auto}details{border-top:1px solid var(--line);padding:12px 0}summary{cursor:pointer;font-weight:600}a{color:var(--accent)}
@media(max-width:760px){header{padding:12px 16px}header .muted{display:none}#identity{font-size:12px}nav{padding:10px 16px}#workspace{display:block}#list{border-right:0}#detail{display:none;padding:16px}body.detail-open #detail{display:block}body.detail-open #list{display:none}.back{display:inline-block}.message{max-width:96%}}

/* Status labels carry text as well as color in both Telegram themes. */
.tone-blue{color:#075ca8;background:#e2f0ff;border-color:#91bceb}.tone-amber{color:#794600;background:#fff0cb;border-color:#d6ab4d}.tone-green{color:#14643c;background:#ddf7e9;border-color:#80c7a0}.tone-red{color:#9e2525;background:#ffe4e4;border-color:#e4a1a1}.tone-purple{color:#6634a5;background:#f0e5ff;border-color:#b89add}.tone-neutral{color:var(--text)}
.draft-hint{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 0}.draft-hint small{flex-basis:100%}.update-hint:not(:empty){padding:8px 0}.update-hint button{width:100%}#detail[aria-busy=true]{opacity:.65}.card .badge{margin:4px 0}

/* Telegram controls and device cutouts both need room in fullscreen mode. */
body{padding-top:calc(max(env(safe-area-inset-top,0px),var(--tg-safe-area-inset-top,0px)) + var(--tg-content-safe-area-inset-top,0px));padding-bottom:calc(max(env(safe-area-inset-bottom,0px),var(--tg-safe-area-inset-bottom,0px)) + var(--tg-content-safe-area-inset-bottom,0px));padding-left:calc(max(env(safe-area-inset-left,0px),var(--tg-safe-area-inset-left,0px)) + var(--tg-content-safe-area-inset-left,0px));padding-right:calc(max(env(safe-area-inset-right,0px),var(--tg-safe-area-inset-right,0px)) + var(--tg-content-safe-area-inset-right,0px))}
