.game-skip-link{position:fixed;z-index:10000;top:12px;left:12px;padding:12px 18px;border:1px solid var(--theme-line,#b6d7da);border-radius:12px;background:var(--theme-surface,#fff);color:var(--theme-ink,#173c4b);box-shadow:0 6px 24px #0003;transform:translateY(calc(-100% - 20px))}
.game-skip-link:focus{transform:none;outline:3px solid var(--theme-accent,#168c95);outline-offset:3px}
#game-content:focus{outline:none}
:root {
    --ink:#173c4b;
    --muted:#637d85;
    --teal:#168c95;
    --orange:#eea53d;
    --line:#dce9e8;
    --paper:#f6faf8;
    font-family:'Segoe UI',Arial,sans-serif;
    color:var(--ink);
    background:var(--paper);
    font-synthesis:none
}
* {
    box-sizing:border-box
}
html {
    scrollbar-gutter:stable;
    scroll-behavior:smooth;
    scroll-padding-top:30px
}
body {
    margin:0
}
a {
    color:inherit;
    text-decoration:none
}
button,a,summary {
    -webkit-tap-highlight-color:transparent
}
a:focus-visible,summary:focus-visible {
    outline:3px solid var(--teal);
    outline-offset:6px
}
h1,h2,h3,p {
    margin:0
}
h1:focus {
    outline:none
}
.wrap {
    width:min(1280px,90%);
    margin-inline:auto
}
.landing {
    overflow:hidden;
    background:radial-gradient(ellipse at 85% 22%,#e5f3eb 0,transparent 43%),var(--paper)
}
.site-header {
    height:110px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid var(--line);
    gap:25px
}
.brand {
    display:flex;
    align-items:center;
    gap:12px;
    font-size:13px;
    letter-spacing:1.5px;
    white-space:nowrap
}
.brand b {
    display:block;
    font-size:26px;
    letter-spacing:3px;
    line-height:1.1
}
.dragonball {
    display:grid;
    place-items:center;
    width:43px;
    height:43px;
    flex-shrink:0;
    border-radius:50%;
    background:radial-gradient(circle at 30% 23%,#fff0ae,#ffb640 48%,#ec8428);
    color:#b84622;
    font-size:23px;
    box-shadow:inset -3px -3px 6px #ca78234a,0 4px 12px #e9a04b26
}
.accent {
    color:var(--orange)
}
nav {
    display:flex;
    gap:36px;
    font-size:14px;
    font-weight:600
}
nav a:hover,.text-link:hover {
    color:var(--teal)
}
.header-status {
    border:1px solid var(--theme-line,#c9ddda);
    border-radius:30px;
    padding:12px 19px;
    font-size:12px;
    display:flex;
    align-items:center;
    gap:9px
}
i {
    display:inline-block;
    width:7px;
    height:7px;
    border-radius:50%;
    background:#34a69a;
    flex-shrink:0
}
.hero {
    display:grid;
    grid-template-columns:1.03fr 1fr;
    align-items:center;
    min-height:680px;
    position:relative;
    padding-block:40px 65px
}
.hero-copy {
    position:relative;
    z-index:1
}
.eyebrow {
    font-size:10px;
    font-weight:700;
    letter-spacing:2px;
    color:var(--teal);
    display:inline-flex;
    gap:9px;
    align-items:center
}
h1 {
    font-size:clamp(45px,4.9vw,72px);
    line-height:1.09;
    letter-spacing:-3.5px;
    font-weight:750;
    margin:23px 0
}
h1 em {
    font-style:normal;
    color:var(--teal)
}
.hero-copy>p {
    font-size:16px;
    line-height:1.85;
    max-width:415px;
    color:var(--muted)
}
.hero-actions {
    display:flex;
    align-items:center;
    gap:23px;
    margin-top:30px;
    flex-wrap:wrap
}
.button {
    display:inline-block;
    background:var(--theme-button,var(--ink));
    color:white;
    padding:17px 22px;
    border-radius:9px;
    font-size:13px;
    font-weight:600;
    box-shadow:0 8px 18px #153c4b15;
    transition:transform .2s,background .2s
}
.button:hover {
    background:var(--teal);
    transform:translateY(-2px)
}
.text-link {
    font-size:12px;
    font-weight:600
}
.hero-note {
    display:flex;
    gap:9px;
    align-items:center;
    margin-top:28px;
    color:var(--muted);
    font-size:10px
}
.hero-art {
    position:relative;
    margin-right:-65px;
    margin-left:-20px
}
.hero-art img {
    display:block;
    width:100%;
    height:auto
}
.art-coordinate {
    position:absolute;
    right:14%;
    top:5%;
    font:9px monospace;
    letter-spacing:2px;
    color:var(--theme-muted,#49828a)
}
.world-card {
    position:absolute;
    bottom:6%;
    left:8%;
    right:12%;
    padding:19px 21px;
    display:flex;
    align-items:center;
    gap:15px;
    border:1px solid var(--theme-line,#ffffffc4);
    background:var(--theme-surface,#ffffffd9);
    backdrop-filter:blur(16px);
    border-radius:13px;
    box-shadow:0 18px 40px #28566a13
}
.world-symbol {
    font-size:34px;
    color:var(--teal)
}
.world-card small {
    display:block;
    font-size:8px;
    letter-spacing:1.5px;
    margin-bottom:6px;
    color:var(--muted)
}
.world-card strong {
    font-size:12px
}
.world-card>span:last-child {
    margin-left:auto
}
.intro-strip {
    display:grid;
    grid-template-columns:1.1fr 1fr 1fr 1fr;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding-block:35px;
    gap:35px
}
.intro-strip h2 {
    font-size:24px;
    line-height:1.3;
    letter-spacing:-.6px;
    margin-top:12px
}
.intro-strip article {
    border-left:1px solid var(--line);
    padding-left:30px
}
.feature-icon {
    color:var(--teal);
    font-size:25px;
    display:block;
    margin-bottom:10px
}
.intro-strip h3 {
    font-size:14px;
    margin-bottom:8px
}
.intro-strip p {
    font-size:12px;
    line-height:1.8;
    color:var(--muted);
    max-width:230px
}
.news-section {
    padding-block:74px 80px
}
.section-heading {
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:20px;
    margin-bottom:27px
}
h2 {
    font-size:34px;
    letter-spacing:-1.3px;
    margin-top:9px
}
.preview-label {
    font-size:8px;
    color:var(--muted);
    letter-spacing:1.5px
}
.news-grid {
    display:grid;
    align-items:start;
    grid-template-columns:1.7fr 1fr;
    gap:25px
}
.featured-news {
    border:1px solid var(--line);
    border-radius:17px;
    overflow:hidden;
    background:var(--theme-surface,white)
}
.news-visual {
    height:235px;
    position:relative;
    overflow:hidden;
    background:linear-gradient(115deg,var(--theme-soft,#c7e8e5),var(--theme-soft,#b5dcd6) 60%,#7bb5ae)
}
.news-visual:after {
    content:'';
    position:absolute;
    inset:0;
    background-image:linear-gradient(#ffffff17 1px,transparent 1px),linear-gradient(90deg,#ffffff17 1px,transparent 1px);
    background-size:35px 35px
}
.orbit {
    position:absolute;
    width:470px;
    height:470px;
    border:1px solid #fff7;
    border-radius:50%;
    right:-20px;
    top:-120px;
    box-shadow:0 0 0 35px #ffffff16,0 0 0 70px #ffffff16
}
.large-ball {
    position:absolute;
    right:15%;
    top:25px;
    width:190px;
    height:190px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    border-radius:50%;
    line-height:.85;
    color:#b94624;
    font-size:27px;
    background:radial-gradient(circle at 30% 20%,#fff4bb,#ffc656 40%,#ec8d2f 85%);
    box-shadow:20px 22px 35px #3b6f7540,inset -8px -9px 19px #b66b2344;
    transform:rotate(-13deg)
}
.visual-caption {
    position:absolute;
    left:35px;
    bottom:36px;
    font-size:12px;
    letter-spacing:4px;
    line-height:1.6
}
.visual-caption b {
    font-size:30px;
    letter-spacing:-.5px
}
.news-body {
    padding:28px 32px
}
.news-meta {
    display:flex;
    gap:20px;
    align-items:center;
    font-size:8px;
    letter-spacing:1px;
    color:var(--muted)
}
.news-meta span:first-child {
    background:var(--theme-soft,#e7f5f0);
    color:var(--teal);
    border-radius:4px;
    padding:6px 8px
}
.news-body h3 {
    font-size:25px;
    letter-spacing:-.7px;
    margin:18px 0 12px
}
.news-body p,.development-card>p {
    font-size:13px;
    line-height:1.85;
    color:var(--muted)
}
details {
    margin-top:24px;
    border-top:1px solid var(--line);
    padding-top:18px
}
summary {
    font-size:12px;
    font-weight:600;
    cursor:pointer
}
details p {
    margin-top:15px
}
.development-card {
    background:var(--theme-soft,#eaf3ee);
    border:1px solid var(--theme-line,#d9e9df);
    border-radius:17px;
    padding:33px
}
.development-card h3 {
    font-size:30px;
    line-height:1.2;
    letter-spacing:-1px;
    margin:20px 0 16px
}
.roadmap {
    list-style:none;
    margin:27px 0 22px;
    padding:0 0 0 22px
}
.roadmap li {
    position:relative;
    padding:0 0 26px 10px;
    border-left:1px solid var(--theme-line,#c6d9d0);
    color:var(--theme-muted,#728680)
}
.roadmap li:last-child {
    padding-bottom:0
}
.roadmap li:before {
    content:'';
    position:absolute;
    width:9px;
    height:9px;
    border:3px solid var(--theme-line,#eaf3ee);
    outline:1px solid #bbd2c8;
    border-radius:50%;
    background:var(--theme-soft,#bdcfc7);
    left:-8px;
    top:0
}
.roadmap .current {
    color:var(--ink)
}
.roadmap .current:before {
    background:var(--teal);
    outline-color:var(--teal)
}
.roadmap strong,.roadmap small {
    display:block;
    padding-left:12px
}
.roadmap strong {
    font-size:13px
}
.roadmap small {
    font-size:10px;
    margin-top:6px
}
.launch-note {
    font-size:10px;
    line-height:1.8;
    color:var(--muted);
    border-top:1px solid var(--theme-line,#d3e2d9);
    padding-top:18px
}
.site-footer {
    border-top:1px solid var(--line);
    padding-block:28px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px
}
.site-footer .brand {
    font-size:9px
}
.site-footer .brand b {
    font-size:18px
}
.site-footer .dragonball {
    width:33px;
    height:33px;
    font-size:19px
}
.site-footer>span,.site-footer>a:last-child {
    font-size:10px;
    color:var(--muted)
}
.validation-message,.invalid {
    color:var(--theme-danger,#b32121)
}
.blazor-error-boundary {
    background:#b32121;
    color:white;
    padding:1rem
}
.blazor-error-boundary:after {
    content:'Ein Fehler ist aufgetreten.'
}
@media(min-width:1600px) {
    .hero {
        min-height:760px
    }
}
@media(max-width:1000px) {
    .site-header {
        height:95px
    }
    nav {
        gap:20px
    }
    .hero {
        min-height:570px
    }
    .hero-art {
        margin-right:-30px
    }
    h1 {
        font-size:50px
    }
    .world-card {
        padding:13px;
        left:4%;
        right:6%
    }
    .world-card strong {
        font-size:10px
    }
    .intro-strip {
        gap:20px
    }
    .intro-strip article {
        padding-left:20px
    }
    .news-grid {
        grid-template-columns:1.4fr 1fr
    }
    .development-card {
        padding:25px
    }
    .news-body {
        padding:25px
    }
    .large-ball {
        right:7%
    }
}
@media(max-width:700px) {
    .wrap {
        width:90%
    }
    .site-header {
        flex-wrap:wrap;
        height:auto;
        padding-block:22px;
        gap:20px
    }
    .brand {
        font-size:10px
    }
    .brand b {
        font-size:22px
    }
    .header-status {
        font-size:10px;
        padding:9px 12px
    }
    nav {
        order:3;
        width:100%;
        justify-content:center;
        border-top:1px solid var(--line);
        padding-top:16px;
        font-size:12px;
        gap:35px
    }
    .hero {
        grid-template-columns:1fr;
        padding-top:42px;
        padding-bottom:25px
    }
    .hero-copy>p {
        font-size:15px
    }
    h1 {
        font-size:clamp(44px,10vw,64px);
        letter-spacing:-2px
    }
    .hero-art {
        margin:15px -10px 0;
        max-width:530px;
        justify-self:center
    }
    .hero-note {
        font-size:9px
    }
    .hero-actions {
        gap:18px
    }
    .world-card strong {
        font-size:12px
    }
    .intro-strip {
        grid-template-columns:1fr 1fr;
        gap:28px;
        padding-block:30px
    }
    .intro-strip article {
        padding-left:0;
        border:0
    }
    .intro-strip h2 {
        font-size:22px
    }
    .intro-strip h3 {
        font-size:13px
    }
    .news-section {
        padding-block:45px
    }
    .section-heading {
        align-items:start;
        flex-direction:column;
        gap:12px
    }
    h2 {
        font-size:28px
    }
    .news-grid {
        grid-template-columns:1fr
    }
    .news-visual {
        height:215px
    }
    .large-ball {
        width:160px;
        height:160px;
        right:8%;
        font-size:24px
    }
    .visual-caption {
        left:22px;
        bottom:25px;
        font-size:9px
    }
    .visual-caption b {
        font-size:23px
    }
    .news-body h3 {
        font-size:23px
    }
    .site-footer {
        flex-wrap:wrap
    }
    .site-footer>span {
        order:3;
        width:100%
    }
    .preview-label {
        font-size:7px
    }
}
@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }
    .button {
        transition:none
    }
}

/* Öffentlicher Einstieg: durchgehender Himmel hinter Navigation und Hero. */
.landing { position: relative; isolation: isolate; }
.sky-header {
    position: absolute;
    inset: 0 0 auto;
    height: 820px;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg, #c2e9f6 0%, #e0f2f5 57%, #f6faf8 100%);
}
.online-count { display:inline-flex; flex-wrap:wrap; align-items:center; gap:.35rem; font-size:.8rem; color:var(--ink); }
.online-count > span:first-child, .online-dot { color:var(--theme-success,#16845a); }
.online-count small { color:var(--muted); }
.hero-copy > .online-count { display:flex; margin-bottom:1rem; }
@media(max-width:600px) { .game-top-actions { flex-wrap:wrap; justify-content:flex-end; } .game-top-actions .online-count { max-width:150px; font-size:.7rem; } }
.account-navigation { display: flex; gap: 20px; align-items: center; }
.button.compact { padding: 12px 17px; font-size: 12px; }
.intro-strip { margin-bottom: 65px; }
.news-section { padding-top: 35px; }
.account-page, .game-shell {
    min-height: 100vh;
    background: linear-gradient(180deg, var(--theme-soft,#ceeaf4) 0, var(--theme-surface,#f6faf8) 520px);
}
.account-shell {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 80px;
    max-width: 1080px;
    padding-block: 55px 70px;
}
.account-intro h1 { font-size: 46px; letter-spacing: -2px; max-width: 430px; }
.account-intro p { color: var(--muted); line-height: 1.8; max-width: 370px; }
.account-intro img { display: block; width: min(100%, 390px); height: auto; margin-top: 15px; }
.account-card {
    background: var(--theme-surface,#ffffffec);
    border: 1px solid var(--theme-line,#dce9e8);
    border-radius: 22px;
    padding: 36px;
    box-shadow: 0 20px 60px #244d5b0c;
}
.account-card h2 { font-size: 30px; margin: 12px 0; }
.account-subtitle { font-size: 14px; color: var(--muted); line-height: 1.7; }
.account-form { display: grid; gap: 19px; margin-top: 28px; }
.deletion-confirm { display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.6; }
.deletion-confirm input { flex:none;margin:5px 0 0;accent-color:var(--teal); }
.deletion-cancel { display:flex;justify-content:center;align-items:center;min-height:46px;padding:12px 18px;border:1px solid var(--theme-line,#bccfce);border-radius:10px;color:var(--ink);text-decoration:none;font-size:14px;font-weight:600; }
.deletion-cancel:hover { background:var(--theme-hover,#edf6f5); }
.deletion-navigation { display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:20px; }
.deletion-navigation form { margin:0; }
.deletion-navigation a,.deletion-navigation button { display:inline-block;padding:8px 0;border:0;background:none;color:var(--teal);font:inherit;font-size:14px;text-decoration:underline;cursor:pointer; }
.form-field { display: grid; gap: 8px; }
.form-field label { font-size: 13px; font-weight: 600; }
.form-field input {
    width: 100%;
    min-height: 46px;
    border: 1px solid var(--theme-line,#bccfce);
    border-radius: 8px;
    padding: 11px 13px;
    background: var(--theme-surface,#fbfdfc);
    color: var(--ink);
    font: inherit;
}
.form-field input:focus { outline: 2px solid var(--teal); outline-offset: 2px; }
.form-field small { font-size: 11px; color: var(--muted); line-height: 1.6; }
.account-form .button { border: 0; font-family: inherit; cursor: pointer; margin-top: 3px; }
.account-switch { margin-top: 24px; font-size: 12px; line-height: 1.8; color: var(--muted); }
.account-switch a { color: var(--teal); font-weight: 600; text-decoration: underline; }
.form-errors { padding: 14px; border-radius: 8px; border: 1px solid var(--theme-line,#edc3b5); background: var(--theme-soft,#fff4ee); color: var(--theme-danger,#813a29); font-size: 12px; line-height: 1.7; }
.form-errors ul { margin: 8px 0 0; padding-left: 18px; }
.validation-summary-valid { display: none; }
.logout-button { background: transparent; border: 1px solid var(--theme-line,#accaca); color: var(--ink); border-radius: 25px; padding: 12px 22px; cursor: pointer; font: inherit; font-size: 13px; }
.logout-button:hover { background: var(--theme-hover,#ffffff7a); }
button:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; }
.game-content { min-height: calc(100vh - 110px); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 1000px) {
    .account-shell { gap: 35px; }
    .account-navigation { gap: 13px; }
    .account-intro h1 { font-size: 38px; }
}
@media (max-width: 700px) {
    .account-navigation { gap: 10px; }
    .account-navigation .text-link { font-size: 11px; }
    .account-navigation .compact { padding: 10px; font-size: 10px; }
    .account-shell { grid-template-columns: 1fr; gap: 25px; padding-block: 30px; max-width: 460px; }
    .account-intro { display: none; }
    .account-card { padding: 27px 23px; }
    .account-card h2 { font-size: 27px; }
    .account-page .site-header { flex-wrap: nowrap; }
    .sky-header { height: 1000px; }
}
/* Account pages use height as well as width: a wide laptop can still have
   little vertical room. Natural flow leaves validation and longer forms scrollable. */
@media (max-height: 1000px) {
    .account-page .site-header { height:auto; min-height:72px; padding-block:12px; }
    .account-page .account-shell { padding-block:24px 32px; gap:clamp(28px,5vw,64px); }
    .account-page .account-card { padding:26px 30px; }
    .account-page .account-card h2 { margin:8px 0; }
    .account-page .account-form { gap:16px; margin-top:20px; }
    .account-page .account-switch { margin-top:18px; }
    .account-page .account-form .button { min-height:46px; padding-block:12px; }
    .account-page .account-intro h1 { font-size:clamp(32px,3.2vw,42px); margin:14px 0; }
    .account-page .account-intro img { width:min(100%,clamp(190px,33svh,330px)); margin-top:12px; }
    .account-page > footer { padding-bottom:16px; font-size:12px; }
}
@media (max-height: 760px) {
    .account-page .account-shell { padding-block:18px 24px; }
    .account-page .account-card { padding:22px 26px; }
    .account-page .account-form { gap:14px; margin-top:18px; }
    .account-page .account-switch { margin-top:14px; }
}
@media (max-width: 700px) and (max-height: 1000px) {
    .account-page .account-shell { gap:0; }
    .account-page .account-card { padding:22px; }
}
/* Registration has more fields than login. Use the available width for paired
   fields instead of stretching the form far below a laptop's viewport. */
.registration-notice { margin-top:8px; font-size:13px; line-height:1.6; color:var(--muted); }
.registration-form > p { font-size:12px; line-height:1.6; }
@media (min-width:1000px) {
    .account-registration .account-shell { max-width:1200px; grid-template-columns:minmax(220px,.7fr) minmax(0,1.3fr); gap:clamp(32px,5vw,72px); }
}
@media (max-width:999px) {
    .account-registration .account-shell { max-width:700px; grid-template-columns:1fr; gap:0; }
    .account-registration .account-intro { display:none; }
}
@media (min-width:701px) {
    .registration-form { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; column-gap:20px; }
    .registration-form > :is(.registration-beta,.form-errors,p,button) { grid-column:1/-1; }
    .registration-form .registration-beta { grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 20px; align-items:center; }
    .registration-beta input { grid-column:2; grid-row:1/3; }
    .registration-beta small { grid-column:1; }
}
@media (min-width:701px) and (max-height:1000px) {
    .account-registration .account-form { gap:12px 20px; }
    .registration-form .form-field { gap:6px; }
    .registration-form .registration-beta { gap:4px 20px; }
    .registration-form .form-field small { line-height:1.4; }
}
.news-meta { align-items:center; gap:18px; flex-wrap:wrap; }
.news-meta > span { font-size:13px; letter-spacing:.03em; color:var(--theme-muted,#3c6570); }
.news-meta > span:first-child { font-size:12px; color:var(--theme-ink,#12626d); font-weight:650; }
.changelog-link { display:inline-flex; align-items:center; flex-wrap:wrap; gap:12px; border:1px solid var(--theme-line,#accfd0); padding:12px 18px; border-radius:14px; font-size:15px; color:var(--theme-ink,#193f4c); background:var(--theme-surface,#f7fcfa); }
.changelog-link span { font-size:12px; color:var(--theme-muted,#4c6b75); }
.landing-day { display:inline-block; border:1px solid var(--theme-line,#bfdcda); border-radius:20px; padding:7px 18px; font-size:13px; margin:12px 0 18px; }
.roadmap li.done { opacity:1; color:var(--theme-ink,#246c58); }

/* Shared logo descriptor, aligned with the single-line DB NEXT wordmark. */
.brand .brand-tagline {
    display:block;margin-top:4px;font-size:10px;font-weight:650;
    line-height:1.2;letter-spacing:1.6px;color:var(--muted);
}
@media(max-width:550px) {
    .brand .brand-tagline { margin-top:3px;font-size:9px;letter-spacing:1px; }
}

.news-list{display:grid;gap:20px}
.account-form a{font-weight:600;text-decoration:underline;text-underline-offset:3px}
/* Suppress native link/image ghosts without disabling text selection or clicks.
   Explicit native drag handles remain available to the editors. */
a:not([draggable="true"]), img:not([draggable="true"]) {
    -webkit-user-drag: none;
}

/* Repeated clicks must not select control labels. Content stays copyable. */
button, input:is([type="button"], [type="submit"], [type="reset"]),
[role="button"], a:is(.button, .btn, .training-primary, .training-secondary,
    .bio-primary, .directory-action, .duel-cta, .editor-shortcut, .reload) {
    -webkit-user-select: none;
    user-select: none;
}

/* Quiet forum unread hint, separate from private-message counters. */
.forum-nav-unread { text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: .26em; text-decoration-color: currentColor; text-decoration-skip-ink: none; font-weight: 700; }

.account-divider{text-align:center;opacity:.75;margin:12px 0}.account-card .secondary{background:var(--theme-surface,#ffffffd9);border:1px solid var(--theme-line,#c4dfe3)}.passkey-list details{border-bottom:1px solid var(--theme-line,#c4dfe3);padding:16px 0}.passkey-list summary{cursor:pointer;overflow-wrap:anywhere}.passkey-recovery-result{display:grid;gap:16px}.passkey-recovery-result[hidden]{display:none}.passkey-recovery-result code{display:block;overflow-wrap:anywhere;padding:16px;border:1px solid var(--theme-line,#c4dfe3);border-radius:12px;user-select:all}.passkey-recovery-result a[aria-disabled=true]{opacity:.5;pointer-events:none}[data-passkey-error]{color:var(--danger,#ed8796)}
.account-card:has(.passkey-list) h3{margin:26px 0 10px;font-size:18px}.account-card:has(.passkey-list) p{line-height:1.6}.account-card:has(.passkey-list) .form-field label{display:grid;gap:8px}.account-card:has(.passkey-list) .form-field input{width:100%;box-sizing:border-box}.account-form[data-passkey][hidden]{display:none}.passkey-recovery-result{margin-top:24px}.passkey-recovery-result>label{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.5}.passkey-recovery-result>label input{margin:3px 0 0;flex:none}.passkey-list:empty{display:none}
.passkey-actions{display:flex;flex-wrap:wrap;gap:10px}.passkey-actions[hidden],.passkey-remove-confirmation[hidden]{display:none}.passkey-remove-confirmation{padding:18px;border:1px solid var(--theme-line,#c4dfe3);border-radius:14px;background:var(--theme-soft,#eaf5f5);overflow-wrap:anywhere}.passkey-remove-confirmation h4{margin:0;font-size:16px}.passkey-remove-confirmation p{margin:10px 0 16px}.passkey-remove-confirmation .button{white-space:normal}