:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #0b0e13;
  color: #e8edf6;
  --panel: #121721;
  --panel-2: #171e2a;
  --line: #2a3342;
  --muted: #96a2b5;
  --accent: #68d7b3;
  --danger: #ff7a85;
}

* { box-sizing: border-box; }
body { display: flex; flex-direction: column; height: 100vh; margin: 0; overflow: hidden; background: radial-gradient(circle at 30% -20%, #1c3040 0, transparent 38%), #0b0e13; }
button, input, textarea, select { font: inherit; }
button, .button-link { color: #e8edf6; background: #222b39; border: 1px solid #364255; border-radius: 8px; padding: .55rem .8rem; cursor: pointer; }
button:hover, .button-link:hover { background: #2a3545; }
button:disabled { opacity: .45; cursor: not-allowed; }
input, textarea, select { color: #edf3fb; background: #0d121a; border: 1px solid #364255; border-radius: 8px; padding: .6rem .7rem; min-width: 0; }
textarea { resize: vertical; }

header { flex: 0 0 auto; min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.2rem 2rem; border-bottom: 1px solid #222b38; }
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; min-width: 0; }
.header-actions form { margin: 0; }
.caisse-list { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .45rem; }
.caisse-button { display: grid; grid-template-columns: auto 1fr; gap: .08rem .45rem; align-items: center; min-width: 112px; padding: .46rem .68rem; color: #dce3ed; background: #1a202b; border: 1px solid #46505e; border-radius: 9px; text-decoration: none; line-height: 1.15; }
.caisse-button::before { grid-row: 1 / 3; width: .65rem; height: .65rem; content: ""; background: #778193; border-radius: 50%; box-shadow: 0 0 0 3px #77819320; }
.caisse-button-name { overflow: hidden; font-size: .78rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.caisse-button-state { color: #aab3c1; font-size: .62rem; }
.caisse-button:hover { color: #fff; background: #252d3a; }
.caisse-button.connected { color: #dffbf2; background: #153129; border-color: #39846d; }
.caisse-button.connected::before { background: var(--accent); box-shadow: 0 0 0 3px #68d7b32b; }
.caisse-button.connected .caisse-button-state { color: #9de8d0; }
.caisse-button.requesting { color: #fff5cf; background: #3b310f; border-color: #a28325; }
.caisse-button.requesting::before { background: #f4c84a; box-shadow: 0 0 0 3px #f4c84a33; animation: pulse 1.2s ease-in-out infinite; }
.caisse-button.requesting .caisse-button-state { color: #f4d979; }
.caisse-button.selected { outline: 2px solid #e8edf6; outline-offset: 2px; }
@keyframes pulse { 50% { opacity: .45; transform: scale(.82); } }
.button-link { color: #e8edf6; text-decoration: none; font-size: .8rem; }
.eyebrow { margin: 0 0 .2rem; color: var(--accent); font-size: .75rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
h1 { margin: 0; font-size: 1.35rem; letter-spacing: -.02em; }
h2 { margin: 0; font-size: 1rem; }
.status { display: flex; gap: .55rem; align-items: center; color: var(--muted); font-size: .88rem; }
.status span { width: .65rem; height: .65rem; border-radius: 50%; background: #778193; box-shadow: 0 0 0 4px #77819320; }
.status.connected { color: #bff6e4; }
.status.connected span { background: var(--accent); box-shadow: 0 0 0 4px #68d7b320; }
.status.error { color: #ffc0c6; }
.status.error span { background: var(--danger); box-shadow: 0 0 0 4px #ff7a8520; }
.connection-alert { position: fixed; z-index: 100; top: 1rem; left: 50%; display: flex; align-items: center; gap: .8rem; width: min(900px, calc(100vw - 2rem)); padding: 1rem; transform: translateX(-50%); color: #fff7d1; background: #423509f5; border: 2px solid #f4c84a; border-radius: 12px; box-shadow: 0 18px 55px #000c, 0 0 0 4px #f4c84a22; }
.connection-alert[hidden] { display: none; }
.connection-alert.failed { color: #ffe6e8; background: #461b20f7; border-color: var(--danger); box-shadow: 0 18px 55px #000c, 0 0 0 4px #ff7a8526; }
.connection-alert.closed { color: #e5ebf4; background: #29313df7; border-color: #77869a; box-shadow: 0 18px 55px #000c, 0 0 0 4px #91a0b426; }
.connection-alert-icon { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; color: #181000; background: #f4c84a; border-radius: 50%; font-size: 1.25rem; font-weight: 900; }
.connection-alert.failed .connection-alert-icon { color: #2a0609; background: var(--danger); }
.connection-alert.closed .connection-alert-icon { color: #121820; background: #aab6c7; }
.connection-alert-message { flex: 1; min-width: 0; }
.connection-alert-message strong { font-size: .95rem; }
.connection-alert-message p { margin: .2rem 0 0; color: inherit; font-size: .8rem; line-height: 1.35; }
.connection-alert .button-link { color: #08120f; background: var(--accent); border-color: var(--accent); font-weight: 750; white-space: nowrap; }
.connection-alert > button { white-space: nowrap; }
.connection-alert.failed #connection-alert-password { color: #2a0609; background: var(--danger); border-color: var(--danger); font-weight: 750; }
.password-dialog { width: min(520px, calc(100vw - 2rem)); padding: 0; color: #e8edf6; background: var(--panel); border: 1px solid #56647a; border-radius: 14px; box-shadow: 0 24px 80px #000d; }
.password-dialog::backdrop { background: #020408c7; backdrop-filter: blur(3px); }
.password-dialog form { display: grid; gap: 1rem; padding: 1.3rem; }
.password-dialog form > div:first-child { display: grid; gap: .2rem; }
.password-dialog-explanation { margin: 0; padding: .8rem; color: #ffe9ad; background: #3b300e; border: 1px solid #79631d; border-radius: 9px; font-size: .82rem; line-height: 1.45; }
.password-dialog label { color: var(--muted); font-size: .78rem; }
.password-dialog-error { min-height: 1.2em; margin: 0; color: var(--danger); font-size: .78rem; }
.password-dialog-actions { display: flex; justify-content: flex-end; gap: .6rem; }
.password-dialog-actions button[type="submit"] { color: #07130f; background: var(--accent); border-color: var(--accent); font-weight: 750; }

main { display: grid; flex: 1 1 auto; grid-template-columns: minmax(0, 1fr) 390px; gap: 1rem; min-height: 0; padding: 1rem; }
section, aside { background: color-mix(in srgb, var(--panel) 95%, transparent); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 18px 48px #0005; }
.viewer-panel { display: flex; min-width: 0; min-height: 0; flex-direction: column; }
.panel-heading { position: relative; z-index: 4; min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); }
.panel-heading p { margin: .3rem 0 0; color: var(--muted); font-size: .78rem; }
.viewer-actions { display: flex; align-items: center; gap: .5rem; }
.screen-wrap { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; overflow: auto; padding: 1rem; background: #05070a; }
canvas { display: block; max-width: 100%; max-height: calc(100vh - 230px); width: auto; height: auto; background: #000; outline: none; image-rendering: auto; box-shadow: 0 0 0 1px #ffffff12, 0 16px 60px #000; }
canvas:focus { box-shadow: 0 0 0 2px var(--accent), 0 16px 60px #000; }
#screen-placeholder { position: absolute; color: #697487; pointer-events: none; }
.freeze-notice { position: absolute; left: 50%; bottom: 2rem; display: flex; align-items: center; gap: .8rem; min-width: 310px; padding: .85rem 1rem; transform: translateX(-50%); color: #f2f7ff; background: #182231ed; border: 1px solid #4b5d75; border-radius: 11px; box-shadow: 0 12px 38px #000a; pointer-events: none; }
.freeze-notice[hidden] { display: none; }
.freeze-notice strong { display: block; font-size: .84rem; }
.freeze-notice p { margin: .2rem 0 0; color: #b6c2d2; font-size: .74rem; }
.freeze-spinner { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; border: 2px solid #ffffff38; border-top-color: var(--accent); border-radius: 50%; animation: spin .85s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.hint { margin: 0; padding: .8rem 1.2rem; color: var(--muted); border-top: 1px solid var(--line); font-size: .78rem; }

.files-panel { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.path-form { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .45rem; padding: .8rem; border-bottom: 1px solid var(--line); }
.file-table-wrap { flex: 1; min-height: 0; overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: .82rem; }
th { position: sticky; top: 0; z-index: 1; padding: .65rem .75rem; color: var(--muted); background: var(--panel-2); text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; }
td { padding: .6rem .75rem; border-top: 1px solid #222b38; }
td:nth-child(2) { color: var(--muted); white-space: nowrap; }
td:last-child { width: 1%; text-align: right; }
tr[data-directory="true"] td:first-child { color: #9ed9ff; cursor: pointer; }
.empty { color: var(--muted); text-align: center; padding: 2rem; }
.upload-row { display: grid; grid-template-columns: 1fr auto; gap: .6rem; padding: 1rem; border-top: 1px solid var(--line); }
.upload-row label { grid-column: 1 / -1; color: var(--muted); font-size: .76rem; }
.upload-row input { width: 100%; }
.clipboard-panel, .shortcut-panel { position: relative; border: 1px solid #46546a; border-radius: 8px; background: #18202c; }
.clipboard-panel summary, .shortcut-panel summary { padding: .65rem .85rem; cursor: pointer; color: #edf3fb; font-size: .82rem; font-weight: 700; user-select: none; }
.clipboard-panel[open] summary, .shortcut-panel[open] summary { background: #222b39; border-radius: 8px; }
.clipboard-content { position: absolute; top: calc(100% + .6rem); right: 0; display: grid; gap: .9rem; width: min(470px, calc(100vw - 3rem)); max-height: calc(100vh - 190px); padding: .85rem; overflow: auto; border: 1px solid #46546a; border-radius: 10px; background: #121923f7; box-shadow: 0 12px 38px #000b; }
.shortcut-content { position: absolute; top: calc(100% + .6rem); right: 0; display: grid; gap: .55rem; width: min(300px, calc(100vw - 3rem)); padding: .85rem; border: 1px solid #46546a; border-radius: 10px; background: #121923f7; box-shadow: 0 12px 38px #000b; }
.shortcut-content strong { font-size: .8rem; }
.shortcut-content span { color: var(--muted); font-size: .72rem; line-height: 1.35; }
.clipboard-direction { display: grid; gap: .5rem; padding: .75rem; border: 1px solid var(--line); border-radius: 10px; background: #0d121a; }
.clipboard-direction label { display: grid; gap: .2rem; }
.clipboard-direction label strong { color: #edf3fb; font-size: .8rem; }
.clipboard-direction label span { color: var(--muted); font-size: .72rem; line-height: 1.35; }
.clipboard-direction textarea { background: #090d13; }
.clipboard-direction textarea[readonly] { color: #c9d2df; }
.clipboard-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.clipboard-hint { margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.35; }
.transfer-footer { display: flex; align-items: center; gap: .5rem; min-height: 48px; padding: .45rem .65rem .45rem 1rem; background: #0e131c; border-top: 1px solid var(--line); }
.transfer-status { flex: 1; color: var(--muted); font-size: .76rem; }
.transfer-footer button { color: #ffc0c6; border-color: #713d45; }
#toast { position: fixed; right: 1rem; bottom: 1rem; max-width: 420px; padding: .8rem 1rem; border: 1px solid #48566d; border-radius: 10px; color: #eff4fb; background: #202938; box-shadow: 0 12px 34px #0008; opacity: 0; transform: translateY(8px); pointer-events: none; transition: .18s ease; }
#toast.visible { opacity: 1; transform: translateY(0); }

.login-page { display: grid; place-items: center; padding: 1rem; }
.login-shell { display: grid; place-items: center; width: 100%; min-height: 100vh; padding: 0; }
.login-card { display: grid; gap: .7rem; width: min(100%, 390px); padding: 2rem; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 48px #0008; }
.login-card h1 { margin-bottom: .25rem; }
.login-card label { margin-top: .35rem; color: var(--muted); font-size: .8rem; }
.login-card button { margin-top: .7rem; color: #07130f; background: var(--accent); border-color: var(--accent); font-weight: 750; }
.login-card button:hover { background: #86e4c6; }
.login-intro { margin: 0 0 .4rem; color: var(--muted); font-size: .88rem; }
.login-error { min-height: 1.2em; margin: 0; color: var(--danger); font-size: .82rem; }

@media (max-width: 980px) {
  body { height: auto; min-height: 100vh; overflow: auto; }
  header { align-items: flex-start; padding: 1rem; }
  .header-actions { flex-wrap: wrap; }
  .caisse-list { flex: 1 1 100%; }
  main { grid-template-columns: 1fr; min-height: calc(100vh - 88px); }
  .viewer-panel { min-height: 560px; }
  .screen-wrap { min-height: 420px; }
  .files-panel { min-height: 560px; }
  .file-table-wrap { max-height: 360px; }
}

@media (max-width: 720px) {
  header { flex-wrap: wrap; gap: 1rem; }
  .header-actions { width: 100%; justify-content: space-between; }
  .caisse-list { justify-content: flex-start; }
  .caisse-button { flex: 1 1 130px; }
  .connection-alert { top: .5rem; flex-wrap: wrap; }
  .connection-alert-message { flex-basis: calc(100% - 3.5rem); }
  .connection-alert .button-link, .connection-alert > button { text-align: center; }
}