:root {
    color-scheme: dark;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #0a0c11;
    color: #f7f8fb;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; }
button, input { font: inherit; }
button { cursor: pointer; }
.eyebrow { margin: 0 0 .3rem; color: #8c95a8; font-size: .72rem; font-weight: 750; letter-spacing: .18em; text-transform: uppercase; }
.subtle, .help-text { color: #8c95a8; }

.login-page {
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background: radial-gradient(circle at 50% 20%, #21293a 0, #0a0c11 45%);
}
.login-card {
    width: min(100%, 25rem);
    padding: 2.4rem;
    border: 1px solid #2a3040;
    border-radius: 1.6rem;
    background: rgb(17 20 27 / 92%);
    box-shadow: 0 2rem 6rem rgb(0 0 0 / 45%);
}
.brand-mark { display: grid; width: 3rem; height: 3rem; margin-bottom: 1.5rem; place-items: center; border-radius: 1rem; background: #665cff; font-size: 1.4rem; }
.login-card h1, .topbar h1 { margin: 0; }
.login-form { display: grid; gap: .75rem; margin-top: 1.8rem; }
.login-form label { color: #adb4c3; font-size: .85rem; font-weight: 650; }
.login-form input { width: 100%; padding: .95rem 1rem; border: 1px solid #343b4d; border-radius: .8rem; outline: none; background: #0e1118; color: white; letter-spacing: .25em; }
.login-form input:focus { border-color: #756cff; box-shadow: 0 0 0 3px rgb(102 92 255 / 20%); }
.form-error, .device-error { margin: 0; color: #ff8d91; font-size: .85rem; }
.primary { border: 0; border-radius: .85rem; background: #665cff; color: white; font-weight: 750; }
.primary:hover { background: #766dff; }
.primary:disabled { cursor: wait; opacity: .6; }
.wide { width: 100%; padding: .95rem 1rem; margin-top: .35rem; }

.phone-page { background: radial-gradient(circle at 50% 0, #22293a, #0a0c11 36rem); }
.topbar { display: flex; align-items: center; justify-content: space-between; max-width: 72rem; margin: auto; padding: 1.5rem 2rem; }
.topbar h1 { font-size: 1.15rem; }
.text-button { padding: .6rem .85rem; border: 1px solid #343b4d; border-radius: .7rem; background: transparent; color: #b9c0ce; }
.phone-shell { display: grid; justify-items: center; padding: 2rem 1rem 3rem; }
.handset {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    width: min(100%, 23rem);
    min-height: 37rem;
    padding: 2rem 1.6rem;
    overflow: hidden;
    border: 1px solid #323949;
    border-radius: 3rem;
    background: linear-gradient(160deg, #1c202b, #10131a 50%);
    box-shadow: 0 2rem 6rem rgb(0 0 0 / 55%), inset 0 1px rgb(255 255 255 / 6%);
}
.handset[data-state="ringing"] { animation: ring 1s ease-in-out infinite; border-color: #665cff; }
.speaker { width: 4rem; height: .35rem; margin-bottom: 1.7rem; border-radius: 1rem; background: #363d4d; }
.status { margin: 0; color: #8992a4; font-size: .78rem; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; }
.status-light { width: .5rem; height: .5rem; margin-bottom: .55rem; border-radius: 50%; background: #555d6c; }
.status-light.ready { background: #4bd68c; box-shadow: 0 0 .8rem #4bd68c; }
.status-light.connecting, .status-light.ringing { background: #8b82ff; box-shadow: 0 0 .8rem #8b82ff; }
.status-light.active { background: #4bd68c; box-shadow: 0 0 .8rem #4bd68c; }
.status-light.error { background: #ff676d; }
.call-display { display: grid; flex: 1; align-content: center; justify-items: center; width: 100%; text-align: center; }
.avatar { display: grid; width: 6rem; height: 6rem; margin-bottom: 1.3rem; place-items: center; border: 1px solid #3a4254; border-radius: 50%; background: linear-gradient(145deg, #303749, #1d222d); color: #a8afff; font-size: 2rem; }
.caller-label { margin: 0 0 .4rem; font-size: 1.5rem; font-weight: 760; }
.caller-number { min-height: 1.5em; margin: 0; color: #929bad; }
.timer { margin: .7rem 0 0; color: #d4d8e1; font-variant-numeric: tabular-nums; }
.start-button { width: 100%; padding: 1rem; }
.call-controls, .active-controls { display: flex; justify-content: center; gap: 3.5rem; width: 100%; }
.round-button { display: grid; width: 4rem; height: 4rem; place-items: center; border: 0; border-radius: 50%; color: white; font-size: 1.3rem; transition: transform .15s, filter .15s; }
.round-button:hover { filter: brightness(1.12); transform: scale(1.04); }
.answer { background: #35bd78; transform: rotate(-20deg); }
.decline { background: #eb5058; }
.utility { background: #303746; }
.utility.selected { background: #665cff; }
.device-error { min-height: 1.2rem; margin-top: 1.2rem; text-align: center; }
.help-text { max-width: 27rem; margin: 1.5rem 0 0; font-size: .85rem; line-height: 1.5; text-align: center; }
@keyframes ring { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-.5deg); } 40% { transform: rotate(.5deg); } }
@media (max-width: 30rem) {
    .topbar { padding: 1.2rem; }
    .phone-shell { padding-top: .5rem; }
    .handset { min-height: calc(100vh - 7.5rem); border-radius: 2.2rem; }
}