:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; background: #0c1119; color: #e8eef7; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
button, input, select { font: inherit; }
button { cursor: pointer; border: 1px solid #4a607c; border-radius: 8px; background: #1a293a; color: #eff5fc; padding: .6rem .85rem; margin: .25rem .35rem .25rem 0; }
button:hover { border-color: #8eb9ed; background: #253a50; }
button.primary { background: #196f9e; border-color: #318fc0; }
button.danger { border-color: #c86267; background: #68343b; }
button.quiet { border-color: transparent; background: transparent; }
input, select { width: 100%; padding: .6rem .7rem; background: #111d2b; color: #f6f9fc; border: 1px solid #45596f; border-radius: 7px; margin: .25rem 0 .7rem; }
input:focus, select:focus, button:focus-visible { outline: 2px solid #8bc7ef; outline-offset: 2px; }
hr { border: 0; border-top: 1px solid #314359; margin: 1.2rem 0; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .9rem 1.4rem; background: #111c29; border-bottom: 1px solid #314359; }
.brand { display: flex; gap: 1rem; align-items: baseline; }
.brand strong { color: #72caff; letter-spacing: .15em; font-size: 1.2rem; }
.brand span, .muted { color: #a9bbcc; }
.operator { display: flex; align-items: center; gap: .8rem; }
.layout { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: 1rem; max-width: 1500px; margin: 1rem auto; padding: 0 1rem 2rem; }
.stack { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.panel { background: #152232; border: 1px solid #30455c; border-radius: 12px; padding: 1.1rem; min-width: 0; box-shadow: 0 8px 24px #0002; }
.panel h2 { font-size: 1.05rem; margin: 0 0 1rem; color: #b7e2ff; }
.panel p { line-height: 1.5; overflow-wrap: anywhere; }
.field { display: block; color: #bfd0df; font-size: .9rem; }
.field span { display: block; }
.account-row { width: 100%; display: block; text-align: left; }
.account-row.active { border-color: #66c5ef; background: #1b455f; }
.task { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .75rem 0; border-top: 1px solid #30455c; }
.task strong { min-width: 190px; }
.task span { color: #a9bbcc; }
.task .field { min-width: 160px; flex: 1; }
.task select { max-width: 180px; margin: .25rem; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .75rem; }
.media-card { display: flex; flex-direction: column; gap: .35rem; border: 1px solid #30455c; border-radius: 8px; padding: .6rem; }
.media-card img { width: 100%; aspect-ratio: 1.4; object-fit: contain; background: #0d1825; border-radius: 5px; }
.sms-secret { width: 100%; padding: .6rem; color: #f7dca4; background: #0d1825; border-radius: 6px; overflow-wrap: anywhere; }
.message { min-height: 1.4rem; max-width: 1500px; margin: .75rem auto; padding: 0 1rem; color: #a5e1bd; }
.message.error { color: #ffacae; }
.one-time { white-space: pre-wrap; overflow-wrap: anywhere; background: #0d1825; padding: .8rem; border-radius: 8px; color: #e8d8a4; }
.key-group { border-top: 1px solid #30455c; padding: .85rem 0 .25rem; }
.key-group p { font-size: .88rem; margin: .55rem 0; }
.key-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .3rem 0; overflow-wrap: anywhere; }
.key-row button { flex: none; }
#auth-root { max-width: 560px; margin: 10vh auto; padding: 1.2rem; }
#auth-root h1 { color: #8bd3ff; }
#auth-root .auth-card { background: #152232; border: 1px solid #30455c; border-radius: 12px; padding: 1.5rem; box-shadow: 0 8px 24px #0002; }
#auth-root .eyebrow { color: #72caff; text-transform: uppercase; letter-spacing: .15em; font-weight: 700; }
#auth-root label { display: block; margin: .8rem 0; }
#auth-root label input { display: block; }
#auth-root details { border-top: 1px solid #30455c; margin-top: 1.2rem; padding-top: 1.2rem; }
#auth-root summary { cursor: pointer; }
#auth-root .auth-status { min-height: 1.5rem; color: #a5e1bd; }
#auth-root .auth-status[data-error="true"] { color: #ffacae; }
@media (max-width: 800px) { .layout { grid-template-columns: 1fr; } .topbar { align-items: flex-start; flex-direction: column; } }