:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #07090d; color: #f3f4f6; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: radial-gradient(ellipse at 10% 0%, #18231c 0, transparent 39rem), #07090d; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.lyre-shell { width: min(1120px, calc(100% - 48px)); min-height: 100svh; margin: auto; padding: 28px 0 34px; display: flex; flex-direction: column; }
.lyre-header { display: flex; justify-content: space-between; align-items: center; min-height: 44px; }
.lyre-mark { color: #f3f4f6; text-decoration: none; display: inline-flex; align-items: center; gap: 12px; font-size: 1.1rem; font-weight: 720; letter-spacing: 0; }
.lyre-mark img { display: block; width: 42px; height: 42px; object-fit: contain; }
.authority-label, .kicker { color: #a8acb5; text-transform: uppercase; font-size: .72rem; font-weight: 700; letter-spacing: .11em; }
.identity-frame { margin: clamp(42px, 9vh, 88px) 0 34px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 430px); gap: clamp(36px, 8vw, 120px); align-items: start; }
.identity-context { max-width: 570px; }.identity-context h1 { margin: 14px 0 20px; font-size: clamp(2.5rem, 5vw, 4.7rem); font-weight: 680; line-height: 1.03; letter-spacing: 0; }.identity-context > p { max-width: 51ch; color: #b6bac2; font-size: 1.05rem; line-height: 1.65; }
.capability-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 30px 0 0; padding: 0; list-style: none; }.capability-list li { border: 1px solid #3b4542; color: #b7d2c0; padding: 7px 9px; font-size: .78rem; }
.identity-panel { background: #10141a; border: 1px solid #303742; padding: 28px; box-shadow: 14px 14px 0 #0b0e12; }.connection-state { min-height: 22px; color: #aeb5bf; font-size: .86rem; }.connection-state[data-state="success"] { color: #9dcfb1; }.connection-state[data-state="error"] { color: #f19a9a; }
.mode-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid #3c424b; margin: 20px 0 22px; }.mode-tab { padding: 0 0 12px; background: none; border: 0; color: #858b96; text-align: left; font-weight: 650; }.mode-tab.is-active { color: #f3f4f6; border-bottom: 2px solid #9dcfb1; margin-bottom: -1px; }
.identity-form { display: grid; gap: 15px; }.registration-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.identity-form label, .remove-form label { display: grid; gap: 7px; color: #cfd3d8; font-size: .84rem; font-weight: 650; }.identity-form input, .identity-form select, .remove-form select { width: 100%; border: 1px solid #444b55; border-radius: 3px; background: #090c10; color: #f4f5f6; padding: 11px 12px; outline: none; }.identity-form input:focus, .identity-form select:focus, .remove-form select:focus { border-color: #9dcfb1; box-shadow: 0 0 0 2px #9dcfb133; }.submit-button { border: 1px solid #9dcfb1; background: #9dcfb1; color: #0b130e; border-radius: 3px; padding: 12px 14px; font-weight: 760; margin-top: 4px; }.submit-button:hover { background: #b7e5c8; }.form-note, .controls-copy { color: #939aa4; font-size: .8rem; line-height: 1.5; }.form-note { margin: 19px 0 0; }
.account-controls { border-top: 1px solid #343a42; margin-top: 25px; padding-top: 25px; }.controls-heading { display: flex; justify-content: space-between; align-items: baseline; }.controls-heading h2 { margin: 0; font-size: 1.25rem; }.compact { margin-top: 18px; }.remove-form { display: grid; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid #303742; }.remove-form button { justify-self: start; border: 0; padding: 0; background: none; color: #b9d9c4; text-decoration: underline; font-size: .82rem; }
.admin-console { border-top: 1px solid #343a42; margin-top: 25px; padding-top: 25px; }.admin-grid { display: grid; gap: 20px; margin-top: 18px; }.admin-grid h3 { font-size: .85rem; margin: 0 0 8px; color: #cfd3d8; }.admin-users, .admin-services { display: grid; gap: 7px; }.admin-row { border: 1px solid #343a42; padding: 10px; font-size: .76rem; color: #aeb5bf; }.admin-row strong { color: #f3f4f6; display: block; font-size: .83rem; }.admin-row button { margin: 8px 7px 0 0; border: 1px solid #55606b; background: transparent; color: #dfe3e7; padding: 5px 7px; border-radius: 2px; font-size: .72rem; }.admin-row button:hover { border-color: #9dcfb1; color: #b7e5c8; }
.service-strip { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; color: #9ca2ac; font-size: .8rem; }.service-strip p { color: #68707b; margin: 0; text-transform: uppercase; letter-spacing: .1em; font-size: .68rem; font-weight: 750; }.service-strip span { white-space: nowrap; }.service-strip b { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #9dcfb1; margin: 0 7px 1px 0; }.future-service { color: #69717c; }
@media (max-width: 760px) { .lyre-shell { width: min(100% - 32px, 560px); padding: 18px 0 22px; }.authority-label { display: none; }.identity-frame { grid-template-columns: 1fr; gap: 30px; margin: 42px 0 36px; }.identity-context h1 { font-size: clamp(2.35rem, 12vw, 3.8rem); }.identity-panel { padding: 22px; box-shadow: 8px 8px 0 #0b0e12; }.registration-fields { grid-template-columns: 1fr; gap: 15px; }.service-strip { gap: 10px 15px; }.future-service { width: 100%; white-space: normal !important; margin-top: 8px; } }