:root { font-family: "Segoe UI", sans-serif; color: #18313b; background: #f2f6f7; line-height: 1.5; color-scheme: light; }
* { box-sizing: border-box; }
body { margin: 0; }
.app-page { max-width: 1500px; margin: 0 auto; padding: 28px; }
.login-page { min-height: 100vh; background: #f7f8fa; }
.auth-page { min-height: 100vh; display: grid; grid-template-columns: minmax(330px,.85fr) minmax(500px,1.15fr); }
.auth-panel { min-height: 100vh; display: flex; flex-direction: column; padding: 42px 55px; color: white; background: radial-gradient(circle at 90% 12%,rgba(255,255,255,.12),transparent 32%),linear-gradient(145deg,#081f48,#0d2b5c); }
.auth-brand { display: flex; align-items: center; gap: 12px; }
.auth-brand-mark { width: 50px; height: 50px; display: grid; place-items: center; border: 2px solid rgba(255,255,255,.8); border-radius: 16px 16px 16px 5px; background: white; color: #0d2b5c; font-size: .9rem; font-weight: 800; box-shadow: 0 6px 18px rgba(0,0,0,.16); }
.auth-brand > span:last-child { display: flex; flex-direction: column; line-height: 1.1; }
.auth-brand strong { font-size: 1.12rem; letter-spacing: -.02em; }
.auth-brand small { margin-top: 4px; color: #b7c7e0; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.auth-copy { margin: auto 0; max-width: 500px; }
.auth-eyebrow { margin: 0; color: #b7c7e0; font-size: .7rem; font-weight: 800; letter-spacing: .18em; }
.auth-copy h1 { margin: 12px 0 18px; font-size: clamp(2.2rem,4vw,3.7rem); line-height: 1.08; letter-spacing: -.055em; }
.auth-copy > p:last-child { max-width: 440px; margin: 0; color: #bac5d5; line-height: 1.7; }
.auth-feature { display: flex; align-items: center; gap: 12px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.13); color: #c4cfdf; }
.auth-feature-icon { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: rgba(255,255,255,.11); }
.auth-feature > span:last-child { display: flex; flex-direction: column; }
.auth-feature strong { color: #f1f4f8; font-size: .85rem; }
.auth-feature small { margin-top: 2px; color: #9eabc0; font-size: .72rem; }
.auth-form-area { display: grid; place-items: center; padding: 48px; }
.auth-form { width: min(390px,100%); }
.auth-form-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: #e8eef7; color: #0d2b5c; font-size: 1.4rem; font-weight: 800; }
.auth-form h2 { margin: 18px 0 5px; color: #172a43; font-size: 1.65rem; letter-spacing: -.035em; }
.auth-form > p:not(.auth-error) { margin: 0 0 28px; color: #707b89; font-size: .9rem; }
.auth-form label { display: block; margin: 15px 0 7px; color: #49566a; font-size: .78rem; font-weight: 700; }
.auth-form input { width: 100%; height: 46px; border: 1px solid #d7dde5; outline: none; border-radius: 9px; background: white; padding: 0 12px; color: #1d2c43; }
.auth-form input:focus { border-color: #5576a6; box-shadow: 0 0 0 3px rgba(13,43,92,.09); }
.password-field { position: relative; }
.password-field > span { position: absolute; left: 13px; top: 14px; color: #8490a1; font-size: .7rem; }
.password-field input { padding-left: 36px; padding-right: 70px; }
.password-field button { position: absolute; right: 7px; top: 7px; height: 32px; padding: 0 8px; border: 0; background: transparent; color: #315989; font-size: .72rem; }
.auth-submit { width: 100%; min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 18px; }
.auth-error { margin: 13px 0 0; padding: 10px 12px; border-radius: 8px; background: #fbeae6; color: #a84735; font-size: .78rem; }
.auth-error.auth-progress { background: #e8eef7; color: #315989; }
.auth-note { display: block; margin-top: 14px; color: #8d96a3; text-align: center; font-size: .72rem; }
.login-card form, .admin-layout form { display: grid; gap: 10px; }
.admin-layout { display: grid; grid-template-columns: minmax(280px, 420px) 1fr; gap: 24px; }
header, .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
h1 { font-size: 1.8rem; margin: 0; letter-spacing: -.03em; } h2 { font-size: 1.2rem; } h3 { font-size: 1rem; margin-top: 26px; }
.eyebrow { font-size: .75rem; letter-spacing: .14em; color: #346874; margin: 0 0 5px; font-weight: 700; }
.badge { display: inline-block; border-radius: 20px; padding: 6px 12px; background: #e5f0f1; color: #225c62; font-size: .85rem; font-weight: 600; }
.notice { background: #e8f0f5; border-left: 3px solid #487890; padding: 12px 16px; border-radius: 4px; }
.app-main { display: grid; grid-template-columns: minmax(270px, 360px) 1fr; gap: 22px; margin-top: 22px; align-items: start; }
.queue, .detail { background: white; border: 1px solid #d9e4e7; border-radius: 12px; padding: 22px; }
.section-heading h2 { margin-top: 0; } .muted { color: #566c76; font-size: .88rem; }
button, input, select { font: inherit; border: 1px solid #a9bcc4; border-radius: 6px; padding: 9px 12px; background: white; color: inherit; }
button { cursor: pointer; font-weight: 600; } button:hover { background: #edf6f5; } button:disabled { opacity: .55; cursor: not-allowed; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #277fab; outline-offset: 2px; }
label { display: block; margin: 10px 0 5px; font-size: .9rem; } #filter, #operator { width: 100%; }
.queue-list { list-style: none; padding: 0; margin: 0; } .queue-list li { margin-bottom: 10px; }
.queue-item { text-align: left; width: 100%; padding: 13px; border-color: #d9e4e7; }
.queue-item span, .queue-item strong { display: block; } .queue-item[aria-pressed="true"] { border-color: #187d7a; background: #e9f5f2; }
.identity { display: grid; grid-template-columns: 145px 1fr; gap: 7px 15px; font-size: .95rem; } dt { color: #566c76; } dd { margin: 0; overflow-wrap: anywhere; }
.timeline { list-style: none; display: flex; gap: 12px; padding: 18px 0; margin: 0; }
.timeline li { flex: 1; border-top: 4px solid #d7e1e4; padding-top: 10px; color: #566c76; font-size: .9rem; }
.timeline li.complete { border-color: #147c65; color: #11694f; font-weight: 700; }
.timeline li.complete::before { content: "✓ "; }
.check { display: flex; align-items: start; gap: 10px; margin: 15px 0; } .check input { margin-top: 5px; }
.primary { background: #126f67; color: white; border-color: #126f67; } .primary:hover { background: #0b5c56; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; }
.preview { border-top: 1px solid #d9e4e7; margin-top: 24px; } #preview-image { display: block; max-width: 100%; height: auto; margin-top: 14px; border: 1px solid #d9e4e7; }
.history { padding-left: 20px; } .history li { padding: 0 0 15px 5px; } .history span { display: block; font-size: .85rem; color: #566c76; }
.status { padding: 12px; background: #e5edef; border-radius: 6px; min-height: 45px; }
[hidden], #preview-image[hidden] { display: none !important; }
@media (max-width: 850px) { .auth-page { grid-template-columns: 1fr; } .auth-panel { min-height: auto; padding: 28px; } .auth-copy { margin: 60px 0 32px; } .auth-copy h1 { font-size: 2.3rem; } .auth-feature { display: none; } .auth-form-area { min-height: 52vh; padding: 38px 24px; } }
@media (max-width: 780px) { .app-page { padding: 16px; } .app-main { grid-template-columns: 1fr; } header { align-items: start; } h1 { font-size: 1.4rem; } .timeline { gap: 8px; } .identity { grid-template-columns: 115px 1fr; } }
@media (max-width: 520px) { .auth-panel { padding: 22px; } .auth-copy { margin: 42px 0 12px; } .auth-copy h1 { font-size: 2rem; } .auth-form-area { place-items: start center; padding: 32px 20px; } }