/* GHOSTS CONTINGENCY / COMPACT 2.0 — tylko wygląd, API pozostaje bez zmian */
:root {
  color-scheme: dark;
  --ink: #03121b;
  --panel: #061d29;
  --cyan: #1bcce5;
  --orange: #ffac2b;
  --green: #54e7a7;
  --text: #e7f3f8;
  --muted: #84aab9;
  --border: #1c6479;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 28px 20px;
  background: radial-gradient(ellipse at 50% 40%, #162330 0%, #071018 55%, #02060b 100%);
  color: var(--text);
  font-family: Consolas, "Courier New", monospace;
}
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .55; cursor: not-allowed; }
button:focus-visible, input:focus-visible { outline: 2px solid #83f1ff; outline-offset: 2px; }
[hidden] { display: none !important; }
.tablet {
  isolation: isolate;
  position: relative;
  width: min(1200px, calc(100vw - 48px));
  height: min(690px, calc(100dvh - 56px));
  min-height: 590px;
  padding: 8px;
  overflow: hidden;
  border: 2px solid #475865;
  border-radius: 13px;
  background: linear-gradient(145deg, #29343e, #0a121a 31%, #0a141c 70%, #28353e);
  box-shadow: 0 20px 55px #000b, inset 0 0 0 1px #647682, 0 0 32px #0ab9e01c;
}
/* Wewnętrzny ekran i dużo subtelniejsze narożniki. */
.tablet::before {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: -1;
  border: 1px solid #187d91;
  border-radius: 4px;
  background: radial-gradient(ellipse at 51% 36%, #083241a0, #021620 64%, #03121c 100%);
}
.tech-frame { display: none; }
.frame-corner { position: absolute; width: 39px; height: 28px; z-index: 4; pointer-events: none; }
.corner-tl { left: 7px; top: 7px; border-top: 3px solid var(--orange); border-left: 3px solid var(--orange); }
.corner-tr { right: 7px; top: 7px; border-top: 3px solid var(--orange); border-right: 3px solid var(--orange); }
.corner-bl { left: 7px; bottom: 7px; border-bottom: 3px solid var(--orange); border-left: 3px solid var(--orange); }
.corner-br { right: 7px; bottom: 7px; border-bottom: 3px solid var(--orange); border-right: 3px solid var(--orange); }
.gridlines {
  position: absolute; inset: 8px; z-index: -1; pointer-events: none; opacity: .35;
  background-image: radial-gradient(#0099bb90 .7px, transparent 1px),
    linear-gradient(#17627824 1px, transparent 1px),
    linear-gradient(90deg, #17627824 1px, transparent 1px);
  background-size: 22px 22px, 44px 44px, 44px 44px;
}
.scanline {
  position: absolute; left: 8px; right: 8px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, #1bd9f052, transparent);
  animation: gc-scan 12s linear infinite; z-index: 4; pointer-events: none;
}
@keyframes gc-scan { to { top: 100%; } }

/* Ekran dostępu */
.login-screen { position: relative; height: 100%; min-height: 0; display: grid; place-items: center; }
.login-center { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; width: min(100%, 790px); padding: 27px 26px 43px; }
.emblem-large { width: 92px; height: 107px; filter: drop-shadow(0 0 13px #bdefff35); }
.logo-word { font: 900 clamp(38px, 4vw, 52px)/1 Impact, "Arial Narrow", Arial, sans-serif; letter-spacing: 5px; margin: 6px 0 0; text-shadow: 0 2px #72838f; }
.logo-word span { display: block; font: 900 clamp(18px, 2vw, 24px)/1.3 Arial, sans-serif; letter-spacing: 2px; }
.three-slashes { color: var(--orange); font: 900 27px/1 Consolas, monospace; letter-spacing: 6px; margin: 7px 0 20px; }
.secure-banner {
  display: flex; align-items: center; justify-content: center; gap: 13px;
  width: min(100%, 610px); padding: 14px 18px;
  border: 1px solid var(--cyan); background: #072d3b97;
  font-size: clamp(15px, 2.2vw, 23px); letter-spacing: 2px;
  text-align: center; box-shadow: inset 0 0 23px #00b6dc19;
  clip-path: polygon(13px 0,calc(100% - 13px) 0,100% 13px,100% calc(100% - 13px),calc(100% - 13px) 100%,13px 100%,0 calc(100% - 13px),0 13px);
}
.lock-icon { width: 26px; height: 29px; color: #e8faff; flex-shrink: 0; }
.login-form { display: flex; width: min(100%, 635px); min-height: 58px; gap: 8px; margin-top: 27px; }
.password-field { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; padding: 9px 14px; border: 1px solid var(--cyan); background: #071e2ae6; }
.key-icon { width: 29px; height: 29px; flex-shrink: 0; }
.password-field input { background: transparent; border: 0; outline: 0; flex: 1; min-width: 0; color: var(--text); font-size: 16px; }
.password-field input::placeholder { color: #86a1b0; }
.arrow-button, .send-button { background: #392914; color: #ffd497; border: 1px solid var(--orange); font: 400 30px/1 Arial, sans-serif; }
.arrow-button { min-width: 65px; }
.arrow-button:hover, .send-button:hover { background: #6e4717; }
.login-error { min-height: 22px; margin-top: 13px; color: #ffc079; font-size: 12px; }
.login-bottom { position: absolute; left: 5%; right: 5%; bottom: 24px; text-align: center; font-size: 11px; letter-spacing: 2px; color: #86a7b6; white-space: nowrap; }
.login-bottom span { color: var(--orange); font-size: 1.4em; font-weight: 900; }
.diag-code { position: absolute; left: 5%; top: 13%; width: 18%; height: 26%; padding: 10px; font-size: 8px; line-height: 2; color: #3b9db4; opacity: .4; overflow: hidden; border-left: 1px solid #176378; }
.diag-code i { display: block; height: 2px; width: 70%; background: #176d83; margin: 6px 0; }
.diag-code span { display: block; }
.fake-map { position: absolute; right: 3%; top: 12%; width: 29%; opacity: .25; }
.fake-map svg { width: 100%; }
.hex-blocks { position: absolute; left: 6%; bottom: 24%; display: grid; grid-template-columns: repeat(3,10px); gap: 6px; opacity: .38; }
.hex-blocks i { width: 10px; height: 10px; background: #096e82; }
.hex-blocks i:nth-child(3n) { background: #a87022; }

/* CRIME CHAT / COMPACT */
.chat-screen { position: relative; z-index: 1; height: 100%; min-height: 0; display: flex; flex-direction: column; }
.chat-top { min-height: 80px; height: 80px; padding: 10px 30px; display: flex; align-items: center; gap: 17px; flex-shrink: 0; background: linear-gradient(90deg, #061b26d9, #08222dd2); border-bottom: 1px solid #207b91; }
.chat-brand { flex-shrink: 0; display: flex; align-items: center; gap: 9px; padding-right: 19px; border-right: 1px solid #bf892d; }
.emblem-small { width: 43px; height: 55px; filter: drop-shadow(0 0 5px #bceaff25); }
.chat-word { font: 900 22px/1 Impact, "Arial Narrow", Arial, sans-serif; letter-spacing: 1px; }
.chat-word span { display: block; font: 900 10px/1.6 Arial, sans-serif; letter-spacing: 1px; }
.chat-word b { display: none; }
.chat-top-title { flex: 1; min-width: 0; }
.chat-top-title h2 { font: 900 clamp(16px, 2vw, 23px)/1.18 Arial, sans-serif; letter-spacing: .6px; margin: 0 0 6px; }
.header-subtitle { color: #89aebd; font-size: 10px; letter-spacing: .7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-slashes { font-size: 10px; color: #65e9af; white-space: nowrap; letter-spacing: .4px; }
.online-indicator { display: inline-block; background: #53e9a0; height: 7px; width: 7px; border-radius: 50%; box-shadow: 0 0 9px #54d9a2; margin-right: 4px; }
.columns { display: grid; grid-template-columns: 177px minmax(0,1fr) 197px; gap: 11px; padding: 12px 12px 10px; flex: 1; min-height: 0; }
.panel { position: relative; min-width: 0; min-height: 0; border: 1px solid #247d91; background: #061c28cb; border-radius: 3px; box-shadow: inset 0 0 16px #008ca614; }
.panel::before { content: ""; position: absolute; left: 0; top: 0; width: 28px; height: 2px; background: var(--cyan); pointer-events: none; }
.left-panel { display: flex; flex-direction: column; gap: 8px; padding: 17px 11px 13px; }
.side-title { padding-left: 7px; margin-bottom: 6px; font-size: 9px; letter-spacing: 1.5px; font-weight: 800; color: #699dae; }
.room-nav { display: flex; flex-direction: column; gap: 5px; }
.room-nav button { width: 100%; padding: 10px 9px; text-align: left; color: #95b4c1; background: transparent; border: 1px solid transparent; border-left: 2px solid transparent; font-size: 12px; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.room-nav button.current { color: #ffcf8d; background: linear-gradient(90deg, #493118dd, #102834cc); border-left-color: var(--orange); }
.room-nav button:hover { color: white; background: #0e3544; }
.room-nav button.current:hover { background: #523a1b; }
.channel-symbol { display: inline-block; width: 16px; color: #a0bbca; text-align: center; font-size: 15px; flex-shrink: 0; }
.room-nav button.current .channel-symbol { color: var(--orange); }
.left-watermark { width: 95px; height: 125px; margin: auto; opacity: .11; align-self: center; }
.left-bottom { margin-top: auto; padding: 11px 4px 0; border-top: 1px solid #1b4f64; color: #6497a9; font-size: 9px; line-height: 1.9; }

.chat-panel { display: flex; flex-direction: column; overflow: hidden; }
.room-heading { display: flex; gap: 12px; align-items: center; padding: 13px 17px; min-height: 65px; flex-shrink: 0; border-bottom: 1px solid #1c596c; }
.room-icon { width: 28px; height: 28px; color: var(--orange); flex-shrink: 0; }
.room-heading h3 { font: 800 16px Arial, sans-serif; letter-spacing: .5px; margin: 0; }
.room-heading p { margin: 3px 0 0; color: #a1bdc9; font-size: 10px; line-height: 1.3; }
.messages { display: flex; flex-direction: column; gap: 9px; flex: 1; min-height: 0; overflow-y: auto; padding: 14px; scrollbar-width: thin; scrollbar-color: #17677c #03141d; }
.message { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 10px; padding: 10px 13px; border: 1px solid #1b5267; border-left: 3px solid var(--cyan); background: #061e2bcf; border-radius: 2px; overflow-wrap: anywhere; }
.message.system { border-left-color: var(--orange); }
.message time { grid-column: 2; grid-row: 1; align-self: start; color: #739cad; font-size: 10px; }
.message > div { grid-column: 1; grid-row: 1 / span 2; min-width: 0; }
.message .author { color: #57dcf1; font: 800 13px Arial, sans-serif; margin-bottom: 6px; }
.message.system .author { color: #ffb95d; }
.message .body { color: #dfedf3; font: 13px/1.55 Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.message-empty { text-align: center; color: #75a2b5; margin: auto; max-width: 300px; line-height: 1.9; font-size: 11px; }
.message-form { flex-shrink: 0; display: flex; gap: 7px; padding: 10px; border-top: 1px solid #245b6e; background: #051b27; min-height: 63px; }
.chat-input-wrap { flex: 1; display: flex; align-items: center; min-width: 0; border: 1px solid #276e84; background: #041622; }
.message-icon { flex-shrink: 0; width: 43px; height: 40px; padding: 10px; border-right: 1px solid #19576c; color: #bfeaf3; }
.chat-input-wrap input { flex: 1; min-width: 0; padding: 10px 11px; outline: none; border: 0; background: transparent; color: #e4f7fb; font-size: 12px; }
.chat-input-wrap input::placeholder { color: #7395a5; }
.send-button { min-width: 47px; font-size: 23px; }

.users-panel { display: flex; flex-direction: column; overflow: hidden; }
.users-heading { display: flex; align-items: center; justify-content: space-between; gap: 5px; min-height: 57px; padding: 13px 12px; border-bottom: 1px solid #206176; }
.users-icon { width: 18px; height: 18px; color: var(--orange); flex-shrink: 0; }
.users-heading h3 { font: 800 12px Arial, sans-serif; margin: 0; white-space: nowrap; }
.users-heading small { color: #87a9b9; font-size: 10px; }
.users-list { padding: 6px 12px; flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: #1c6678 #061a25; }
.user { display: flex; align-items: center; gap: 8px; padding: 11px 3px; font: 12px Arial, sans-serif; border-bottom: 1px solid #1d4f60; }
.user .status { display: block; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: #49ec90; box-shadow: 0 0 6px #43eba14a; }
.user .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user .crown { color: var(--orange); font-size: 17px; }
.user-status { padding: 8px 9px; text-align: center; color: #76abbe; font-size: 9px; overflow-wrap: anywhere; border-top: 1px solid #15465a; }
.settings-button { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 9px 11px 11px; padding: 11px; min-height: 42px; border: 1px solid #28798c; background: #0a2a38; color: #d0edf5; font-size: 11px; }
.settings-button:hover { border-color: var(--orange); color: #ffd597; }
.settings-icon { font: normal 19px/1 Arial, sans-serif; }

/* Przypisanie lub zmiana nazwy przez zębatkę */
.modal-overlay { position: absolute; inset: 8px; z-index: 10; display: grid; place-items: center; padding: 20px; background: #000c; border-radius: 4px; }
.identity-dialog { width: min(100%, 410px); padding: 23px; border: 1px solid #2bb1ca; background: linear-gradient(145deg,#103442,#041720); box-shadow: 0 20px 55px #000b, 0 0 20px #00bede17; }
.dialog-kicker { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: var(--orange); }
.identity-dialog h3 { font: 900 20px Arial, sans-serif; margin: 9px 0; }
.identity-dialog p { color: #adc8d3; font-size: 11px; line-height: 1.7; }
.identity-dialog label { display: block; margin: 18px 0 7px; font-size: 10px; color: #8cd0de; font-weight: 800; }
.identity-dialog input { width: 100%; padding: 11px; background: #061d29; color: white; border: 1px solid #28788c; }
.dialog-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 15px; }
.dialog-actions button { padding: 10px 12px; border: 1px solid var(--orange); font-weight: 800; font-size: 10px; }
.gold-button { background: #533a1b; color: #ffe0ae; }
.dark-button { background: #092a38; color: #bde6ef; border-color: #2e7084 !important; }
.dialog-error { min-height: 18px; margin-top: 9px; color: #ffb36c; font-size: 11px; }
.dialog-foot { padding-top: 12px; border-top: 1px solid #21556a; color: #78a0ae; font-size: 9px; letter-spacing: .5px; }

@media (max-width: 1000px) and (min-width: 761px) {
  .tablet { width: calc(100vw - 28px); }
  .chat-top { padding: 10px 22px; }
  .columns { grid-template-columns: 152px minmax(0,1fr) 165px; gap: 8px; padding: 9px; }
  .left-panel { padding: 15px 6px; }
  .room-nav button { font-size: 10px; padding: 10px 6px; gap: 5px; }
  .chat-word { font-size: 18px; }
  .chat-word span { font-size: 9px; }
  .chat-brand { padding-right: 12px; }
  .users-heading { padding: 12px 7px; gap: 3px; }
  .users-heading h3 { font-size: 10px; }
  .users-list { padding: 5px 7px; }
  .user { font-size: 10px; padding: 10px 1px; gap: 6px; }
  .room-heading { padding: 12px; }
  .message { padding: 9px 10px; }
}

@media (max-width: 760px) {
  body { display: block; padding: 0; }
  .tablet { height: 100dvh; width: 100vw; min-height: 540px; padding: 4px; border-radius: 0; border-width: 0; box-shadow: none; }
  .tablet::before { inset: 4px; }
  .frame-corner { width: 23px; height: 18px; }
  .corner-tl { top: 3px; left: 3px; }.corner-tr { top: 3px; right: 3px; }
  .corner-bl { bottom: 3px; left: 3px; }.corner-br { bottom: 3px; right: 3px; }
  .login-center { padding: 24px 13px 45px; }
  .emblem-large { width: 76px; height: 88px; }
  .logo-word { font-size: 38px; letter-spacing: 3px; }
  .logo-word span { font-size: 17px; letter-spacing: 1.5px; }
  .three-slashes { font-size: 22px; margin: 6px 0 18px; }
  .secure-banner { font-size: 15px; letter-spacing: .7px; gap: 7px; padding: 11px 6px; }
  .lock-icon { width: 20px; height: 22px; }
  .login-form { gap: 6px; margin-top: 25px; min-height: 52px; }
  .password-field { gap: 8px; padding: 7px 8px; }
  .password-field input { font-size: 14px; }
  .key-icon { width: 22px; height: 22px; }
  .arrow-button { min-width: 48px; font-size: 24px; }
  .login-bottom { bottom: 22px; font-size: 9px; letter-spacing: .6px; }
  .diag-code { display: none; }.fake-map { opacity: .15; width: 60%; }.hex-blocks { opacity: .15; }
  .chat-top { height: 67px; min-height: 67px; gap: 9px; padding: 8px 13px; }
  .emblem-small { width: 29px; height: 39px; }
  .chat-brand { gap: 5px; padding-right: 9px; }
  .chat-word { font-size: 15px; letter-spacing: 0; }.chat-word span { font-size: 7px; letter-spacing: .5px; }
  .chat-top-title h2 { font-size: clamp(12px, 3.3vw, 18px); letter-spacing: 0; }
  .header-subtitle { font-size: 7px; letter-spacing: 0; }
  .top-slashes { display: none; }
  .columns { grid-template-columns: minmax(0,1fr); grid-template-rows: auto minmax(0,1fr) auto; gap: 6px; padding: 6px; }
  .left-panel { display: block; padding: 6px; }
  .side-title, .left-watermark, .left-bottom { display: none; }
  .room-nav { display: flex; flex-direction: row; gap: 3px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .room-nav button { flex: 0 0 auto; width: auto; padding: 8px; font-size: 10px; }
  .channel-symbol { width: auto; font-size: 12px; }
  .room-heading { min-height: 51px; padding: 9px 12px; gap: 8px; }
  .room-icon { width: 24px; height: 24px; }
  .room-heading h3 { font-size: 14px; }
  .room-heading p { font-size: 9px; }
  .messages { padding: 9px; gap: 7px; }
  .message { padding: 9px 10px; }
  .message .author { font-size: 11px; }.message .body { font-size: 11px; }
  .message time { font-size: 9px; }
  .message-form { min-height: 51px; padding: 7px; gap: 5px; }
  .message-icon { width: 31px; height: 32px; padding: 7px; }
  .chat-input-wrap input { padding: 8px; font-size: 12px; }
  .send-button { min-width: 40px; font-size: 20px; }
  .users-panel { display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 4px 7px; min-height: 47px; }
  .users-heading { min-height: 0; padding: 3px 8px; border: 0; }
  .users-heading h3 { font-size: 11px; }
  .users-icon { width: 16px; height: 16px; }
  .users-list, .user-status { display: none; }
  .settings-button { margin: 0; padding: 6px 11px; min-height: 34px; font-size: 10px; }
  .settings-icon { font-size: 16px; }
  .identity-dialog { padding: 17px; }
}
@media (max-width: 360px) {
  .room-nav button { padding: 7px 5px; font-size: 9px; gap: 3px; }
  .chat-word { font-size: 13px; }
  .chat-top-title h2 { font-size: 12px; }
  .login-bottom { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) { .scanline { animation: none; } }


/* COMPACT 3.0 — moderation: only admin controls, server-authorized actions */
.room-title-text{flex:1;min-width:0}
.clear-channel{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 9px;border:1px solid #9b7039;background:#34251d;color:#ffd3a0;font:800 9px/1.2 Consolas,monospace;white-space:nowrap;transition:background .15s,border-color .15s}
.clear-channel:hover,.clear-channel:focus-visible{background:#65402b;border-color:#ffae41}
.clear-channel svg{width:14px;height:14px;flex-shrink:0}
.message.is-moderatable{position:relative;padding-right:41px}
.message.is-moderatable time{padding-right:0}
.moderation-delete{position:absolute;right:8px;top:8px;width:25px;height:25px;display:grid;place-items:center;background:#2b2028;border:1px solid #73515a;border-radius:2px;color:#ffaaa1;transition:background .15s,border-color .15s}
.moderation-delete:hover,.moderation-delete:focus-visible{background:#713b3c;border-color:#ffaca5}
.moderation-delete svg{width:14px;height:14px}
.admin-badge{display:inline-block;border:1px solid #9e7030;color:#ffbe62;background:#4b351b;font:800 9px/1 Arial,sans-serif;padding:3px 5px;letter-spacing:.3px;margin-left:auto}
.danger-button{background:#663122;color:#ffe0c9;border-color:#d48658!important}
.danger-button:hover{background:#914532}
.moderation-dialog{width:min(100%,440px)}
.moderation-dialog p{font-size:12px;line-height:1.7}
@media(max-width:1000px){.clear-channel{font-size:0;padding:8px}.clear-channel svg{width:16px;height:16px}}
@media(max-width:760px){.clear-channel{font-size:0;padding:8px 9px}.room-title-text{flex:1;min-width:0}.message.is-moderatable{padding-right:39px}.moderation-delete{width:24px;height:24px}}


/* COMPACT 4.0 — user sanctions: intentionally subtle visual additions */
.manage-users-button{margin:8px 11px 0;border:1px solid #a57934;background:#352a1d;color:#ffcc80;padding:8px 5px;font:800 9px Consolas,monospace;letter-spacing:.35px}
.manage-users-button:hover{background:#674422}
.user.user-moderatable{cursor:pointer;transition:background .12s;color:#e6f5f9}
.user.user-moderatable:hover,.user.user-moderatable:focus-visible{background:#194452;outline:1px solid #4bc5dd;outline-offset:-1px}
.user.user-moderatable .name{text-decoration:underline;text-decoration-color:#367785;text-underline-offset:3px}
.mute-notice{font:800 10px/1.45 Consolas,monospace;color:#ffcf8a;background:#332718;letter-spacing:.25px;border-bottom:1px solid #96713d;padding:9px 14px;flex-shrink:0}
.sanctions-overlay{z-index:14}#moderation-overlay{z-index:18}
.sanctions-dialog{width:min(100%,560px);max-height:min(640px,90vh);overflow:auto;scrollbar-width:thin;scrollbar-color:#277787 #062332;padding:22px}
.sanctions-head{display:flex;align-items:center;gap:10px;justify-content:space-between}
.sanctions-head button{border:1px solid #356e7d;background:#092a36;color:#d4f5fc;padding:6px 11px;font-size:15px}
.sanctions-dialog label{margin:13px 0 6px}
.sanctions-dialog input,.sanctions-dialog select{width:100%;padding:10px;background:#051a26;border:1px solid #28798c;color:#dff2f7;font-size:12px;min-width:0}
.sanctions-dialog input:focus,.sanctions-dialog select:focus{outline:1px solid #66d7ed}
.sanctions-user-list{max-height:300px;overflow-y:auto;margin:11px 0;display:flex;flex-direction:column;gap:5px}
.sanctions-user-list button{display:flex;justify-content:space-between;align-items:center;gap:10px;text-align:left;background:#0a2734;color:#daedf3;border:1px solid #2d6577;padding:11px 12px;font-size:12px}
.sanctions-user-list button:hover{border-color:#18bdd5;background:#123946}
.sanctions-user-list small{color:#87aab8;font-size:9px}
.sanctions-profile{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:13px;background:#0a2a37;border-left:3px solid var(--orange);margin-top:11px}
.sanctions-profile strong{font:900 16px Arial,sans-serif}
.sanctions-profile span{font-size:9px;color:#ffcb83}
.sanctions-back{font-size:10px;background:transparent;border:0;color:#83d9eb;padding:7px 0}
.sanctions-active{display:flex;flex-direction:column;gap:7px;margin:12px 0}
.sanctions-active .sanction-entry{display:flex;align-items:center;gap:9px;justify-content:space-between;border:1px solid #496a70;background:#112631;padding:10px;color:#d3e4ec;font-size:10px}
.sanction-entry small{display:block;color:#a4bdc6;margin-top:4px}
.sanction-entry button{border:1px solid #d39b4b;background:#3d2b17;color:#ffdcad;padding:8px;white-space:nowrap;font-size:10px}
.sanctions-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sanctions-apply{width:100%;border:1px solid #d6a04a;background:#4a331c;color:#ffe0ab;padding:11px;margin-top:13px;font-size:11px;font-weight:900}
.sanctions-apply:hover{background:#70512b}
.sanctions-dialog h4{font:800 10px Consolas,monospace;letter-spacing:1px;color:#95c5d4;margin:17px 0 8px}
.sanctions-history{max-height:150px;overflow-y:auto;border-top:1px solid #265b70}
.sanctions-history .history-item{border-bottom:1px solid #224b5d;padding:10px 2px;font-size:10px;line-height:1.5;color:#a8c6d3}
.sanctions-history .history-item strong{color:#f7cc91}
.sanctions-history .history-item em{color:#6de4a7;font-style:normal}
.sanctions-no-data{padding:14px 4px;color:#749eae;font-size:11px}
@media(max-width:760px){.manage-users-button{margin:2px 5px;padding:8px 9px;font-size:9px}.sanctions-dialog{max-height:85dvh;width:min(100%,530px);padding:16px}.sanctions-grid{gap:7px}.mute-notice{font-size:9px;padding:6px 10px}}
@media(max-width:425px){.sanctions-grid{grid-template-columns:1fr}.sanctions-dialog{padding:13px}.sanctions-profile strong{font-size:13px}}

.user.user-moderatable{width:100%;text-align:left;border-width:0 0 1px; background:transparent;}

/* ==============================================================
   GHOSTS COMPACT 5.2 — bezpośredni ekran zabezpieczonego dostępu
   Zdjęcie referencyjne jest wyłącznie dekoracyjnym tłem.
   Tylko JEDEN prawdziwy input i jeden przycisk. Zero laptopa/intro.
   =============================================================== */
body:has(.tablet.is-login) {
  padding:0;
  background:#01070e;
}
.tablet.is-login {
  width:100%; max-width:none; min-width:0;
  height:100dvh; min-height:0; padding:0;
  border:0; border-radius:0; box-shadow:none;
  background:#01070e;
}
.tablet.is-login::before,
.tablet.is-login > .tech-frame,
.tablet.is-login > .frame-corner,
.tablet.is-login > .gridlines,
.tablet.is-login > .scanline { display:none; }
.tablet.is-login .login-screen {
  width:100%; height:100%; min-height:0;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; background:#01070e;
}
.login-board {
  position:relative;
  width:min(100vw, calc(100dvh * 1671 / 941));
  aspect-ratio:1671 / 941;
  flex-shrink:0;
  overflow:hidden;
  background:#010c15 url('./assets/ghosts-login-reference.webp') center / 100% 100% no-repeat;
}
/* Elementy narysowane już na grafice nie mogą pojawić się drugi raz.
   Pozostawiamy ich DOM dla wariantu telefonicznego. */
.tablet.is-login .login-board > .diag-code,
.tablet.is-login .login-board > .fake-map,
.tablet.is-login .login-board > .login-bottom,
.tablet.is-login .login-board > .hex-blocks,
.tablet.is-login .login-center > .emblem-large,
.tablet.is-login .login-center > .logo-word,
.tablet.is-login .login-center > .three-slashes,
.tablet.is-login .login-center > .secure-banner { display:none; }
.tablet.is-login .login-center {
  position:absolute; inset:0; z-index:2;
  display:block; width:100%; height:100%;
  margin:0; padding:0; pointer-events:none;
}
/* Dokładne położenie pola i strzałki względem załączonej referencji. */
.tablet.is-login .login-form {
  position:absolute;
  left:20.75%; top:66.55%; width:58.85%; height:9.5%;
  display:flex; gap:2.1%; align-items:stretch;
  min-height:0; margin:0; padding:0;
  pointer-events:auto;
}
.tablet.is-login .password-field {
  display:flex; align-items:center; justify-content:flex-start;
  flex:1 1 auto; min-width:0; height:100%;
  margin:0; padding:0 4.6%; gap:0;
  border:0; border-radius:0; background:transparent;
  box-shadow:none; clip-path:none;
  transition:background .12s ease;
}
.tablet.is-login .password-field:focus-within {
  background:#00d0ed0d;
  outline:2px solid #9ff6ff;
  outline-offset:-5px;
}
.tablet.is-login .key-icon { display:none; }
.tablet.is-login .password-field input {
  flex:1; width:100%; height:100%; min-width:0;
  border:0; outline:0; padding:0; margin:0;
  background:transparent; color:#e7f9fe;
  font:500 clamp(12px,1.5vw,23px)/1.1 Consolas,monospace;
  text-shadow:0 0 8px #00dfff65;
  -webkit-text-fill-color:#e7f9fe;
}
.tablet.is-login .password-field input::placeholder { color:#96aeb9; opacity:.68; -webkit-text-fill-color:#96aeb9; }
.tablet.is-login .arrow-button {
  display:block;
  width:15.7%; flex:0 0 15.7%; min-width:0; height:100%;
  border:0; border-radius:0; padding:0;
  background:transparent; box-shadow:none;
  font-size:0; color:transparent;
}
.tablet.is-login .arrow-button:hover { background:#ffb12815; }
.tablet.is-login .arrow-button:focus-visible {outline:2px solid #fff;outline-offset:-6px;}
.tablet.is-login .login-error {
  position:absolute;
  left:25%; top:78.5%; width:50%;
  display:block; min-height:0; height:auto; padding:0; margin:0;
  color:#ffbf74; font:600 clamp(11px,1vw,16px)/1.4 Consolas,monospace;
  text-align:center; text-shadow:0 2px 5px #000;
  pointer-events:none;
}
.tablet.is-login .login-error:not(:empty) {
  border:1px solid #a57532; padding:8px 11px;
  background:#041c2af4; box-shadow:0 0 13px #ff9c2224;
}
/* Telefon w pionie: zamiast zmniejszać ogromny screenshot,
   pokazujemy natywne elementy logowania w tym samym stylu. */
@media (max-width:760px) and (orientation:portrait) {
  .login-board {
    width:100vw; height:100dvh; aspect-ratio:auto;
    display:flex; align-items:center; justify-content:center;
    background:
      radial-gradient(ellipse at 50% 38%,#0834459c,#010e19 75%),
      linear-gradient(#0b536228 1px,transparent 1px),
      linear-gradient(90deg,#0b536228 1px,transparent 1px),#020e19;
    background-size:cover,32px 32px,32px 32px,auto;
    border:2px solid #00b9d8;
  }
  .login-board:before,.login-board:after {
    content:''; position:absolute; width:54px; height:39px; pointer-events:none;
    border:solid #ffab23;
  }
  .login-board:before {top:5px;left:5px;border-width:5px 0 0 5px;}
  .login-board:after {bottom:5px;right:5px;border-width:0 5px 5px 0;}
  .tablet.is-login .login-center {
    position:relative; inset:auto;
    width:100%; max-width:520px; height:auto;
    display:flex; flex-direction:column; align-items:center;
    padding:30px 24px 75px;
    pointer-events:auto; text-align:center;
  }
  .tablet.is-login .login-center > .emblem-large,
  .tablet.is-login .login-center > .logo-word,
  .tablet.is-login .login-center > .three-slashes,
  .tablet.is-login .login-center > .secure-banner { display:flex; }
  .tablet.is-login .emblem-large { width:116px; height:128px; margin:0 auto 10px; filter:drop-shadow(0 0 11px #baf6ff36); }
  .tablet.is-login .logo-word {font:900 clamp(40px,10vw,52px)/1 Impact,Arial,sans-serif;letter-spacing:4px;margin:0;display:block!important;}
  .tablet.is-login .logo-word span {font:900 clamp(17px,4vw,23px)/1.35 Arial,sans-serif;letter-spacing:3px;}
  .tablet.is-login .three-slashes {color:#ffad24;font-size:27px;margin:12px 0 27px;}
  .tablet.is-login .secure-banner {
    width:100%; display:flex;gap:10px;align-items:center;
    padding:15px 12px;font-size:clamp(13px,3.7vw,19px);letter-spacing:1px;
    border:1px solid #ffad24; box-shadow:0 0 14px #ffad242a;background:#061c28e8;
  }
  .tablet.is-login .lock-icon{width:22px;height:25px;}
  .tablet.is-login .login-form {
    position:relative; left:auto; top:auto; width:100%; height:60px;
    display:flex; gap:9px; margin:28px 0 0;
  }
  .tablet.is-login .password-field {
    width:auto; padding:0 14px; background:#031c2bdd;
    border:2px solid #00d5ec; box-shadow:0 0 15px #00deef35;
  }
  .tablet.is-login .password-field input {font-size:17px;}
  .tablet.is-login .arrow-button {
    width:62px;flex:0 0 62px;
    border:2px solid #ffb02a; background:#081e2b;
    font:400 33px Arial,sans-serif;color:#ecfaff;
    box-shadow:0 0 12px #ffae2240;
  }
  .tablet.is-login .arrow-button:hover{background:#3c2919;}
  .tablet.is-login .login-error {
    position:relative; left:auto; top:auto; width:100%;
    margin-top:16px;font-size:12px;
  }
  .tablet.is-login .login-board > .login-bottom {
    display:block; bottom:6%; left:8%;right:8%;
    color:#b7e0ec;letter-spacing:1px;font-size:10px;
  }
}
@media(max-width:370px) and (orientation:portrait){
  .tablet.is-login .login-center {padding-inline:13px;}
  .tablet.is-login .login-form {height:52px;}
  .tablet.is-login .password-field input {font-size:14px;}
  .tablet.is-login .secure-banner {font-size:12px;}
}
@media(prefers-reduced-motion:reduce){
 .tablet.is-login .password-field{transition:none;}
}

/* ===========================================================
   GHOSTS COMPACT 5.1 — spokojny lifting zatwierdzonego wyglądu
   Bez zmian w interfejsie API, sesjach i moderacji.
   =========================================================== */
/* Ikony kanałów w jednym stylu, subtelniejszy stan aktywny. */
.channel-symbol {display:flex;align-items:center;justify-content:center;width:17px;height:17px;flex:0 0 17px;}
.channel-symbol svg {display:block;width:16px;height:16px;}
.room-nav button {gap:9px;border-radius:2px;transition:background .14s ease,color .14s ease;}
.room-nav button.current {background:linear-gradient(90deg,#513616e6 0%,#1429359a 90%);box-shadow:inset 0 0 10px #ffad2e0c;font-weight:700;}
/* Wiadomości i pole wpisywania: bardziej czytelne, bez dużych dymków. */
.messages {gap:10px;}
.message {padding:12px 14px;border-color:#25586b;background:linear-gradient(90deg,#0a2836e9,#061e2ad9 80%);box-shadow:inset 0 0 16px #1bcce509;}
.message .author {font-size:13px;margin-bottom:7px;}
.message .body {font-size:14px;line-height:1.5;color:#e7f3f8;}
.message time {font-size:10px;color:#88b0be;}
.chat-input-wrap input {font-size:13px;}
.chat-input-wrap input::placeholder {color:#94b5c1;}
/* Wyświetlany tylko w cichych kanałach, nigdy nie przykrywa wiadomości. */
.channel-idle-status {display:flex;align-items:center;gap:11px;margin-top:auto;padding:13px 14px;border:1px solid #225a6e;background:#08212d94;color:#accbd5;min-height:66px;}
.channel-idle-status .idle-check {display:grid;place-items:center;flex:0 0 21px;width:21px;height:21px;border:1px solid #58dba4;border-radius:50%;font:800 13px Arial,sans-serif;color:#58e6aa;}
.channel-idle-status strong {display:block;font:800 11px/1.35 Consolas,monospace;color:#9fdac7;}
.channel-idle-status small {display:block;margin-top:5px;font:10px/1.45 Consolas,monospace;color:#79a7b6;}
/* Lista online: znacznik roli nie zasłania nicka. */
.user {gap:9px;padding:10px 3px;min-height:44px;}
.user-details {display:flex;flex:1;min-width:0;flex-direction:column;gap:5px;}
.user-details .name {display:block;max-width:100%;font-size:12px;color:#e8f6fa;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.user-role {display:block;font:800 9px/1 Arial,sans-serif;color:#f2b859;letter-spacing:.55px;}
.user .crown {flex-shrink:0;color:#fbb448;}
/* Narzędzia administratora — dyskretne, nadal dostępne klawiaturą. */
.clear-channel {border-color:#80623b;background:#2b241bc7;color:#edbf89;font-weight:700;}
.message.is-moderatable {padding-right:44px;}
.moderation-delete {opacity:0;transition:opacity .14s ease,background .14s ease,border-color .14s ease;}
.message.is-moderatable:hover .moderation-delete,.message.is-moderatable:focus-within .moderation-delete,.moderation-delete:focus-visible {opacity:1;}
@media(hover:none),(pointer:coarse) { .moderation-delete {opacity:1;} }
@media(max-width:1000px){
  .user-details .name {font-size:11px;}
  .user-role {font-size:8px;}
}
@media(max-width:760px){
  .channel-symbol,.channel-symbol svg {width:13px;height:13px;flex-basis:13px;}
  .room-nav button {gap:6px;}
  .message {padding:10px 11px;}
  .message .author {font-size:12px;}
  .message .body {font-size:12px;line-height:1.5;}
  .message.is-moderatable {padding-right:39px;}
  .channel-idle-status {padding:9px 10px;min-height:58px;}
  .channel-idle-status strong {font-size:9px;}
  .channel-idle-status small {font-size:9px;}
}
@media(prefers-reduced-motion:reduce){.moderation-delete,.room-nav button{transition:none;}}


/* =============================================================
   GHOSTS COMPACT 5.3 — Animated System Boot / Access Control
   Warstwa efektów nad istniejącym tłem, bez zmian w API.
   ============================================================= */
.tablet.is-login .login-board { isolation:isolate; }
.tablet.is-login .gc-boot-rings {
  position:absolute;z-index:1;left:41.1%;top:5.2%;width:17.8%;aspect-ratio:1;
  pointer-events:none;opacity:.32;transition:opacity .45s ease;
}
.tablet.is-login .gc-boot-rings i {position:absolute;display:block;border-radius:50%;inset:0;border:1px solid #00c7e65c;}
.tablet.is-login .gc-boot-rings i:nth-child(1) {border-style:dashed;animation:gc-ring-spin 30s linear infinite;}
.tablet.is-login .gc-boot-rings i:nth-child(2) {inset:9%;border-color:#00d4e24a;border-style:dotted;animation:gc-ring-spin 20s linear infinite reverse;}
.tablet.is-login .gc-boot-rings i:nth-child(3) {inset:-8%;border-color:#ffaf2847;border-style:dashed;animation:gc-ring-spin 50s linear infinite;}
@keyframes gc-ring-spin {to{transform:rotate(360deg)}}
.tablet.is-login .gc-boot-scan {position:absolute;z-index:7;left:3%;right:3%;height:2px;top:-6%;opacity:0;pointer-events:none;background:linear-gradient(90deg,transparent,#00def4 20%,#e5ffff 50%,#00def4 80%,transparent);box-shadow:0 0 11px 3px #00cbf5a8,0 0 32px 10px #00b9f541;}
.tablet.is-login .gc-boot-shade {position:absolute;z-index:3;inset:0;pointer-events:none;opacity:0;background:#010d19a8;transition:opacity .35s;}
.tablet.is-login .gc-boot-controls {position:absolute;z-index:9;inset:0;pointer-events:none;}
.tablet.is-login .gc-replay-intro {position:absolute;top:4.5%;right:5%;pointer-events:auto;padding:9px 12px;background:#031a28b8;border:1px solid #1e6070;color:#71a5b7;font:700 clamp(10px,.8vw,13px)/1.2 Consolas,monospace;letter-spacing:1px;opacity:.67;}
.tablet.is-login .gc-replay-intro:hover {opacity:1;border-color:#ffae32;color:#ffcb7b;}
.tablet.is-login .gc-skip-intro {position:absolute;top:4.5%;right:5%;pointer-events:auto;padding:10px 13px;background:#031a28ef;border:1px solid #2893a5;color:#b7eaf4;letter-spacing:1px;font:700 clamp(10px,.8vw,13px)/1.2 Consolas,monospace;}
.tablet.is-login .gc-skip-intro:hover {border-color:#ffb132;color:#ffce76;background:#172a30;}
.tablet.is-login .gc-boot-status {position:absolute;top:66.15%;left:20.65%;width:58.8%;height:9.7%;padding:10px 20px;text-align:center;pointer-events:none;display:flex;flex-direction:column;justify-content:center;background:#031722fa;border:1px solid #25859a;color:#6edff0;box-shadow:0 0 17px #02bde03c;}
.tablet.is-login .gc-boot-status strong {font:700 clamp(9px,.93vw,14px)/1.3 Consolas,monospace;letter-spacing:1.2px;}
.tablet.is-login .gc-boot-status small {display:block;color:#77a4b2;margin-top:6px;font-size:clamp(8px,.7vw,10px);}
.tablet.is-login .gc-boot-progress {height:3px;margin-top:9px;background:#114052;overflow:hidden;}
.tablet.is-login .gc-boot-progress span {display:block;width:0;height:100%;background:#0be4ed;box-shadow:0 0 8px #0be4ed;}
.tablet.is-login .gc-access-flash {position:absolute;z-index:6;top:51.55%;left:26.8%;width:46.4%;height:8.2%;display:flex;align-items:center;justify-content:center;border:1px solid #42efaa;background:#061c22f5;color:#86ffcc;letter-spacing:3px;font:700 clamp(12px,1.8vw,26px)/1.2 Consolas,monospace;text-shadow:0 0 12px #33f4a666;box-shadow:0 0 26px #30eca65d;opacity:0;transform:scale(.98);transition:opacity .2s,transform .2s;pointer-events:none;visibility:hidden;}
.tablet.is-login.gc-granted .gc-access-flash {opacity:1;transform:scale(1);visibility:visible;}
.tablet.is-login.gc-booting .gc-boot-shade {opacity:.65;}
.tablet.is-login.gc-booting .gc-boot-rings {opacity:.85;}
.tablet.is-login.gc-booting .gc-boot-scan {animation:gc-login-sweep 1.6s ease-in-out forwards;}
.tablet.is-login.gc-booting .gc-boot-progress span {animation:gc-login-progress 1.58s linear forwards;}
.tablet.is-login.gc-booting .login-form {visibility:hidden;pointer-events:none;}
.tablet.is-login.gc-booting .login-board {animation:gc-boot-lightup 1.6s ease-out both;}
.tablet.is-login.gc-granted .gc-boot-scan {animation:gc-login-sweep .75s ease-out forwards;}
.tablet.is-login.gc-denied .login-form {animation:gc-password-shake .34s ease-in-out;}
.tablet.is-login.gc-denied .password-field {background:#e336452c!important;outline:2px solid #ff6777;outline-offset:-4px;}
.tablet.is-login.gc-denied .login-error:not(:empty) {border-color:#e26675;box-shadow:0 0 19px #f347484c;}
@keyframes gc-login-sweep {0%{top:2%;opacity:0}12%{opacity:.9}78%{opacity:.85}100%{top:96%;opacity:0}}
@keyframes gc-login-progress {to{width:100%}}
@keyframes gc-password-shake {0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
@keyframes gc-boot-lightup {0%{filter:brightness(.36)}25%{filter:brightness(.8)}45%{filter:brightness(.58)}70%,100%{filter:brightness(1)}}
@media(max-width:760px) and (orientation:portrait) {
  .tablet.is-login .gc-boot-rings {display:none;}
  .tablet.is-login .gc-boot-status {top:63.5%;bottom:auto;left:6%;width:88%;height:10%;padding:10px;}
  .tablet.is-login .gc-skip-intro,.tablet.is-login .gc-replay-intro {top:4%;right:6%;}
  .tablet.is-login .gc-access-flash {top:51.5%;left:7%;width:86%;height:7.5%;font-size:clamp(13px,4.2vw,19px);letter-spacing:1.4px;}
  .tablet.is-login.gc-booting .emblem-large {animation:gc-emblem-glow 1.5s ease-out both;}
  @keyframes gc-emblem-glow{0%{opacity:.15;filter:brightness(.1)}70%,100%{opacity:1;filter:drop-shadow(0 0 12px #bbfaff80)}}
}
@media(prefers-reduced-motion:reduce) {
  .tablet.is-login .gc-boot-rings i,.tablet.is-login .gc-boot-scan,.tablet.is-login.gc-booting .login-board,.tablet.is-login.gc-denied .login-form {animation:none!important;}
  .tablet.is-login .gc-boot-rings {display:none!important;}
}

/* Focus widoczny, ale bez rysowania drugiego obramowania na tle JPG/WEBP. */
@media(min-width:761px) {
  .tablet.is-login .password-field:focus-within {outline:none;background:#00d0ed08;box-shadow:inset 0 0 16px #00d5ed2a;}
}

/* ============================================================
   WARGOY / GHOSTS OPERACJE 5.4 — contract board and gallery
   ============================================================ */
.operations-tools {flex-shrink:0;padding:10px 13px 11px;border-bottom:1px solid #2a6276;background:linear-gradient(125deg,#0b303c,#071f2c);display:flex;flex-direction:column;gap:9px}
.operations-tools-title {display:flex;align-items:center;gap:8px;color:#e3f6fa;font:900 11px/1.35 Consolas,monospace;letter-spacing:1px}
.operations-tools-title small {font:700 8px Consolas,monospace;color:#6e9dab;margin-left:auto;letter-spacing:.3px}
.operations-dot {width:8px;height:8px;background:#f8b449;box-shadow:0 0 11px #eda33188;transform:rotate(45deg)}
.operations-actions {display:flex;align-items:center;gap:6px}
.operations-filter-label{font:800 9px Consolas,monospace;color:#7daab9}
.operations-actions select {flex:1;min-width:0;max-width:240px;padding:7px 8px;border:1px solid #376a76;background:#061c27;color:#bde5ec;font:800 10px Consolas,monospace}
.operations-new {padding:8px 10px;margin-left:auto;flex-shrink:0;background:#544022;border:1px solid #e1a84e;color:#ffdf9c;font:900 10px Consolas,monospace;letter-spacing:.3px}
.operations-new:hover,.operations-new:focus-visible {background:#795129;border-color:#ffd076}
.operations-readonly {flex-shrink:0;padding:13px 12px;border-top:1px solid #325766;text-align:center;background:#061720;color:#9cb8c3;font:700 9px/1.5 Consolas,monospace;letter-spacing:.45px}
.contract-card.message {--contract-accent:#56e6a1;display:flex;flex-direction:column;gap:0;padding:0;border:1px solid #335667;border-left:3px solid var(--contract-accent);background:linear-gradient(140deg,#0b2834f5 0%,#061a25f3 90%);overflow:visible;border-radius:3px;box-shadow:inset 0 0 0 1px #ffffff05,0 5px 18px #0004}
.contract-card.class-II{--contract-accent:#4bbde9}
.contract-card.class-III{--contract-accent:#ffba3b}
.contract-card.class-IV{--contract-accent:#ed5d66}
.contract-card-top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start;padding:11px 12px 6px;border-bottom:1px solid #29505d61}
.contract-card-id{padding-top:4px;font:800 9px Consolas,monospace;color:#95b7c4;letter-spacing:.4px;overflow-wrap:anywhere}
.contract-badge-wrap{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0;max-width:55%}
.contract-difficulty{padding:5px 8px;border:1px solid var(--contract-accent);color:var(--contract-accent);background:#041923;font:900 10px/1.3 Consolas,monospace;white-space:nowrap;letter-spacing:.2px}
.contract-team{font:700 9px Consolas,monospace;color:#9fc0ca;letter-spacing:.2px}
.contract-name{font:900 17px/1.25 Arial,sans-serif;letter-spacing:.45px;color:#f2f8fb;margin:10px 13px 5px;overflow-wrap:anywhere}
.contract-meta{font:700 9px/1.5 Consolas,monospace;color:#9aafba;padding:0 13px 10px;white-space:normal}
.contract-description{margin:0 12px 11px;padding:11px 12px 12px;border:1px solid #295363;background:#051823a9;color:#dae9ef;font:12px/1.6 Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}
.contract-gallery-title{color:#a6c7d3;letter-spacing:.7px;font:800 9px Consolas,monospace;margin:1px 13px 8px}
.contract-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0 12px 12px}
.contract-image-item{min-width:0;aspect-ratio:16/10;background:#061420;border:1px solid #28536a;overflow:hidden}
.contract-image-button{display:block;width:100%;height:100%;padding:0;border:0;background:#102a37;cursor:zoom-in;color:#e8d0aa;overflow:hidden}
.contract-image-button:hover,.contract-image-button:focus-visible{outline:1px solid #ffbe56;outline-offset:-1px}
.contract-image-button img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .18s ease}
.contract-image-button:hover img{transform:scale(1.055)}
.contract-image-unavailable{display:flex;align-items:center;justify-content:center;text-align:center;min-height:60px;height:100%;padding:5px;font:800 9px/1.3 Consolas,monospace;color:#c69791}
.contract-card-actions{display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:9px 12px 11px;border-top:1px solid #204757}
.contract-card-actions button{padding:6px 9px;border:1px solid #5d777f;background:#142a33;color:#b8e2ee;font:800 9px Consolas,monospace}
.contract-card-actions .contract-edit{border-color:#a0824b;color:#ffcf81}
.contract-card-actions .contract-delete{border-color:#775359;color:#ffaaa8}
.contract-card-actions button:hover{background:#2c404a}
.contract-overlay {z-index:16;padding:12px}
.contract-dialog {width:min(100%,720px);max-height:100%;padding:16px 20px;overflow:auto;scrollbar-color:#396477 #071a26;scrollbar-width:thin}
.contract-modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;border-bottom:1px solid #265a70;padding-bottom:8px}
.contract-modal-head h3{margin:7px 0 1px;font-size:18px}
.contract-modal-close{padding:6px 11px;border:1px solid #3e7283;background:#08212d;color:#ddf0f6}
.contract-dialog form{display:flex;flex-direction:column;gap:0}
.contract-dialog label{margin:11px 0 5px;font-size:9px;letter-spacing:.5px}
.contract-dialog label small{font-size:9px;color:#6ea9bb}
.contract-dialog input:not([type=checkbox]),.contract-dialog select,.contract-dialog textarea{width:100%;border:1px solid #2d7386;background:#041824;color:#e6f3f9;padding:9px 11px;font:12px/1.5 Consolas,monospace;outline:none;min-height:36px;min-width:0}
.contract-dialog input:focus,.contract-dialog select:focus,.contract-dialog textarea:focus{border-color:#83e0f6}
.contract-dialog textarea{resize:vertical;min-height:56px}
.contract-dialog #contract-body{min-height:155px;max-height:240px}
.contract-text-label{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.contract-text-label #contract-counter{color:#a6ced7;font:700 9px Consolas,monospace}
.contract-text-label #contract-counter.at-limit{color:#ffae73}
.contract-media-title{margin-top:11px;padding:8px 0 6px;border-bottom:1px solid #285b70;font:900 10px Consolas,monospace;color:#ffce80;letter-spacing:.7px}
.contract-media-title span{float:right;color:#88abba;font-weight:600}
.contract-dialog .contract-cache-option{display:flex;align-items:center;gap:9px;font-size:9px;line-height:1.5;color:#a3c1c9;cursor:pointer;margin:9px 0 3px}
.contract-dialog .contract-cache-option input{width:14px;height:14px;flex-shrink:0;accent-color:#ecb353}
.contract-dialog #contract-photos{height:auto;font-size:10px;padding:7px 8px}
.contract-preview{padding-top:7px}
.contract-preview-summary{font:800 9px Consolas,monospace!important;margin:2px 0 8px!important;color:#83bdcb!important}
.contract-preview-summary.limit-error{color:#ff846d!important}
.contract-preview-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
.contract-preview-item{position:relative;min-width:0;aspect-ratio:5/4;border:1px solid #2e6273;background:#091f2a;overflow:hidden}
.contract-preview-item .contract-image-button{width:100%;height:100%}
.contract-preview-remove{position:absolute;right:2px;top:2px;width:24px;height:24px;background:#512a30;border:1px solid #ff9076;color:white;font:900 12px Consolas,monospace;z-index:2}
.contract-preview-local-image{width:100%;height:100%;object-fit:cover}
.contract-local-filename{position:absolute;bottom:0;left:0;right:0;padding:3px 4px;background:#021019d9;color:#fff;font:8px/1.4 Consolas,monospace;overflow-wrap:anywhere}
.contract-modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:7px}
.contract-modal-actions button{padding:10px 13px;font:800 10px Consolas,monospace;border:1px solid #b58234;min-height:36px}
.operation-lightbox{z-index:25;background:#000e;cursor:zoom-out}
.operation-lightbox-content{position:relative;max-width:min(100%,900px);max-height:100%;display:flex;align-items:center;justify-content:center;border:1px solid #336d7e;box-shadow:0 20px 70px #000b;cursor:auto;background:#061724}
.operation-lightbox-content img{display:block;max-width:100%;max-height:calc(100dvh - 85px);object-fit:contain}
.operation-lightbox-content button{position:absolute;right:4px;top:4px;z-index:1;padding:8px 12px;border:1px solid #6baabb;background:#05252fe6;color:white}
@media(max-width:760px){
  .operations-tools{padding:7px 8px;gap:5px}
  .operations-tools-title{font-size:9px}
  .operations-tools-title small{font-size:7px}
  .operations-actions{flex-wrap:wrap;gap:5px}
  .operations-actions select{font-size:9px;padding:6px;max-width:100%}
  .operations-new{font-size:9px;padding:7px}
  .contract-card-top{padding:9px 9px 6px}
  .contract-difficulty{font-size:9px;padding:4px 6px}
  .contract-card-id{font-size:8px}
  .contract-name{font-size:14px;margin:8px 9px 4px}
  .contract-meta{font-size:8px;padding:0 9px 7px}
  .contract-description{margin:0 9px 8px;padding:8px 9px;font-size:11px}
  .contract-gallery{margin:0 9px 9px;grid-template-columns:repeat(2,minmax(0,1fr))}
  .contract-dialog{padding:11px 12px}
  .contract-preview-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .contract-modal-head h3{font-size:16px}
  .operations-readonly{font-size:8px;padding:9px}
}
@media(prefers-reduced-motion:reduce){.contract-image-button img{transition:none}}