[hidden] { display: none !important; }
body:has(.studio-bar) { padding-bottom: 0; }
body.has-studio { padding-bottom: 90px; }
:focus-visible { outline: 2px solid var(--acid); outline-offset: 3px; }
.status-pill.closed i { background: #999; box-shadow: none; }
.admin-panel, .admin-dock, dialog { --panel-line: #343631; --panel-muted: #adafa6; }
.admin-panel { position: fixed; z-index: 74; top: 88px; right: 16px; bottom: 96px; width: 376px; display: flex; flex-direction: column; color: #eeeee5; background: #191b18; border: 1px solid #464a3d; border-radius: 10px; box-shadow: 0 24px 80px #0009; }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 18px 18px; border-bottom: 1px solid var(--panel-line); }
.panel-kicker { font: 11px var(--mono); color: var(--acid); letter-spacing: .09em; }
.panel-head h2 { margin: 8px 0 0; font-size: 24px; letter-spacing: -.03em; }
.admin-panel button, .admin-dock button, .confirm-card button { min-height: 36px; border: 1px solid #42453c; border-radius: 5px; background: #252821; color: #ebeee2; padding: 8px 10px; font: 11px/1.3 var(--mono); }
.admin-panel button:hover, .admin-dock button:hover { border-color: #a5b777; background: #303529; }
.admin-panel button:disabled, .admin-dock button:disabled { opacity: .4; cursor: default; }
.admin-panel .danger { color: #ffaf97; }
.admin-panel .accent, .confirm-card .accent { color: #171b0d; background: var(--acid); border-color: var(--acid); }
.admin-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; padding: 6px; border-bottom: 1px solid var(--panel-line); }
.admin-tabs button { background: transparent; border: 0; padding: 10px 2px; font-size: 10px; }
.admin-tabs button[aria-pressed="true"] { background: #333b20; color: var(--acid); }
.admin-tabs span:empty { display: none; }
.admin-tabs span { color: var(--acid); }
.panel-scroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 0 18px 24px; scrollbar-width: thin; scrollbar-color: #535947 #191b18; }
.panel-title { display: flex; gap: 8px; align-items: center; justify-content: space-between; margin: 20px 0 12px; }
.panel-title h3 { margin: 0; font-size: 14px; font-weight: 600; }
.panel-title > span { color: var(--panel-muted); font: 10px var(--mono); max-width: 145px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.admin-help { color: var(--panel-muted); font-size: 12px; line-height: 1.6; margin: 0 0 16px; }
.admin-section label { display: grid; gap: 7px; font: 11px/1.4 var(--mono); color: #c7cabc; margin: 14px 0; min-width: 0; }
.admin-section label small { color: #959b8c; font-size: 10px; }
.admin-section input, .admin-section textarea, .admin-section select { width: 100%; min-width: 0; color: #eeeee7; border: 1px solid #41473a; border-radius: 4px; background: #12150f; padding: 10px; font: 13px/1.5 var(--sans); }
.admin-section input::placeholder, .admin-section textarea::placeholder { color: #7d8473; }
.admin-section textarea { resize: vertical; min-height: 68px; }
.admin-section input:focus, .admin-section textarea:focus, .admin-section select:focus { border-color: var(--acid); }
.admin-section .check-line { display: flex; align-items: center; gap: 9px; }
.admin-section input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--acid); }
.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.admin-grid .wide { grid-column: 1 / -1; }
.admin-grid label { margin: 8px 0; }
.admin-actions { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0; }
.admin-panel .upload-zone { width: 100%; padding: 21px 12px; background: #22291a; border: 1px dashed #72804e; }
.upload-zone strong { display: block; color: #e4f4bb; font-size: 12px; font-weight: 500; }
.upload-zone span { display: block; margin-top: 8px; color: #9da78b; font: 10px var(--mono); }
.url-row { display: flex; gap: 6px; margin: 10px 0; }
.url-row input { flex: 1; }
.url-row button { flex-shrink: 0; }
.layer-list { border-top: 1px solid var(--panel-line); padding-top: 12px; }
.layer-list:empty { display: none; }
.layer-row { display: flex; gap: 8px; margin: 7px 0; }
.layer-row > button { flex: 1; display: flex; align-items: center; gap: 10px; text-align: left; min-width: 0; }
.layer-row img { width: 36px; height: 36px; object-fit: contain; border-radius: 3px; background: #13170e; }
.layer-row b { font-weight: 400; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 215px; }
.layer-row small { color: #a0a793; display: block; margin-top: 5px; font-size: 10px; }
.layer-row .active { border-color: var(--acid); background: #313b20; }
.panel-footer { padding: 14px 18px; border-top: 1px solid var(--panel-line); background: #20241b; border-radius: 0 0 10px 10px; }
.panel-footer span { display: block; font: 11px var(--mono); color: var(--acid); }
.panel-footer small { display: block; margin-top: 6px; font-size: 11px; color: #aab39b; line-height: 1.5; }
.panel-error, .panel-notice { padding: 13px; background: #40291e; color: #ffd1be; border: 1px solid #84583f; font: 12px/1.6 var(--sans); margin: 14px 0; border-radius: 4px; overflow-wrap: anywhere; }
.panel-notice { background: #303820; border-color: #5b6941; color: #dce9bb; }
.panel-notice p { margin: 0; }
.admin-dock { position: fixed; z-index: 75; left: 50%; transform: translateX(-50%); bottom: 18px; width: min(870px, calc(100% - 28px)); display: flex; align-items: center; gap: 8px; padding: 10px; border: 1px solid #525744; background: #1f241b; box-shadow: 0 10px 50px #000a; border-radius: 9px; }
.admin-dock .dock-brand { border: 0; color: var(--acid); letter-spacing: .04em; background: transparent; }
.dock-history { display: flex; gap: 4px; }
.dock-state { flex: 1; min-width: 0; padding: 0 8px; color: #aab69b; font: 10px var(--mono); }
.admin-dock .publish-button { background: var(--acid); border-color: var(--acid); color: #162008; min-height: 40px; }
.admin-dock .publish-button:hover { background: #e5ff89; }
.admin-dock .publish-button:disabled { opacity: .45; }
.admin-dock #editToggle[aria-pressed="true"] { color: var(--acid); border-color: var(--acid); }
.auth-card { max-height: calc(100dvh - 32px); width: min(460px, calc(100% - 28px)); margin: auto; border: 1px solid #aaa18c; border-radius: 8px; overflow: auto; }
dialog::backdrop { background: #090d09c7; backdrop-filter: blur(5px); }
.auth-card .dialog-close { position: absolute; top: 16px; right: 16px; background: none; border: 0; color: #555a48; font: 11px var(--mono); }
.auth-card h1 { margin-top: 12px; }
.auth-card .stack label { display: grid; gap: 7px; font-size: 12px; }
.auth-card .stack small { line-height: 1.6; font-size: 11px; color: #656957; }
.auth-card input { min-width: 0; width: 100%; padding: 10px; border-radius: 4px; }
.auth-card .auth-error { color: #962b17; background: #e9cdbd; padding: 12px; font-size: 12px; overflow-wrap: anywhere; }
.auth-card :focus-visible { outline-color: #5d701b; }
.password-row { display: flex; gap: 5px; }
.password-row input { flex: 1; }
.password-row button { background: #d7d6c6; border: 1px solid #a4a996; border-radius: 4px; font: 11px var(--mono); padding: 0 9px; }
.confirm-card { width: min(420px, calc(100% - 28px)); color: #eeeeea; background: #23271c; border: 1px solid #5e654b; padding: 28px; border-radius: 8px; box-shadow: 0 20px 70px #0009; }
.confirm-card h2 { margin: 0; font-size: 23px; }
.confirm-card p { color: #c1c6b5; font-size: 14px; line-height: 1.6; }
.placement-layer.editing { pointer-events: none; }
.placement { touch-action: auto; }
.placement.editing { touch-action: none; }
.placement.editing.locked { cursor: default; }
.placement .handle { border-radius: 2px; width: 14px; height: 14px; padding: 0; }
.placement-meta { max-width: 250px; overflow: hidden; text-overflow: ellipsis; }
.placement.is-hidden { display: none; }
.placement.editing.is-hidden.selected { display: block; opacity: .25 !important; outline-color: #fdac6e; }
.admin-drop { position: fixed; inset: 90px 20px; z-index: 77; display: grid; place-items: center; pointer-events: none; background: #20320de6; border: 2px dashed var(--acid); border-radius: 16px; color: var(--acid); font-size: 22px; padding: 25px; text-align: center; }
.inbox-item { border: 1px solid #414a32; border-radius: 5px; margin: 14px 0; overflow: hidden; }
.inbox-item summary { padding: 14px; display: flex; justify-content: space-between; gap: 12px; align-items: center; cursor: pointer; background: #252d1d; }
.inbox-item summary strong { font: 12px var(--mono); overflow-wrap: anywhere; }
.inbox-item summary span { color: #becaa4; font: 10px var(--mono); flex-shrink: 0; }
.inbox-body { padding: 0 14px 14px; }
.inbox-body dl { display: grid; grid-template-columns: 80px 1fr; gap: 8px; font-size: 12px; margin: 15px 0; }
.inbox-body dt { color: #98a688; }
.inbox-body dd { margin: 0; overflow-wrap: anywhere; }
.inbox-body .request-copy { white-space: pre-wrap; font-size: 13px; line-height: 1.6; color: #dde5ce; overflow-wrap: anywhere; }
.inbox-body h4 { margin: 20px 0 8px; color: #b0c18d; font: 11px var(--mono); }
.health-row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid #343c2a; font-size: 12px; }
.health-row span:last-child { color: #b8d787; text-align: right; }
.health-row.fail span:last-child { color: #ffaf97; }
.noscript-note { text-align: center; padding: 20px; color: #eee; }
@media (max-width: 760px) {
  .admin-panel { top: 82px; right: 10px; left: 10px; width: auto; bottom: 132px; }
  .admin-dock { bottom: 10px; flex-wrap: wrap; gap: 6px; }
  .admin-dock .dock-brand { order: 0; }
  .admin-dock #editToggle { order: 1; }
  .dock-history { order: 2; margin-left: auto; }
  .dock-state { order: 3; flex-basis: 25%; }
  .admin-dock .publish-button { order: 4; flex: 1; }
  .admin-dock #logoutButton { order: 5; }
  body.has-studio { padding-bottom: 130px; }
  .footer div:nth-child(2) { flex-wrap: wrap; }
}
@media (max-height: 600px) and (min-width: 761px) { .admin-panel { top: 12px; bottom: 92px; } }
body.has-studio .toast { top: 88px; bottom: auto; left: 50%; right: auto; transform: translateX(-50%); width: min(390px, calc(100% - 28px)); }
body.has-studio .toast-item { padding: 12px 15px; border-radius: 5px; box-shadow: 0 4px 25px #0006; font-size: 11px; }
.placement.broken img { visibility: hidden; }
.placement.broken.editing::after { content: "Image could not load"; position: absolute; inset: 0; display: grid; place-items: center; color: #ffc8b4; background: #462b20; border: 1px dashed #c27e5b; font: 12px var(--mono); padding: 12px; }
@media (max-width: 760px) { body.has-studio .toast { top: auto; bottom: 127px; } }