/* KARA ALTIN - Oyun arayüzü
   Mat endüstriyel: düz yüzeyler, ince çelik çizgiler, bakır vurgular. Parlama/gölge/neon yok. */

[hidden] { display: none !important; }

.ico { width: 18px; height: 18px; flex: none; }

button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--c-copper); outline-offset: 2px; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 36px; padding: 0 14px;
    border: 1px solid var(--c-line-strong); border-radius: var(--radius);
    background: var(--c-surface-2);
    font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.btn:hover:not(:disabled) { border-color: var(--c-steel); }
.btn:disabled { opacity: .5; }
.btn .ico { width: 15px; height: 15px; }
.btn--primary { background: var(--c-accent-bg); border-color: var(--c-copper); color: var(--c-accent-ink); }
.btn--primary:hover:not(:disabled) { background: var(--c-accent-bg-hover); }
.btn--ghost { background: transparent; }
.btn--icon { width: 36px; padding: 0; }

.chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px;
    border: 1px solid var(--c-line-strong); font-size: 10px; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase; color: var(--c-text-dim); white-space: nowrap;
}
.chip[data-state="live"], .chip[data-state="bull"] { color: var(--c-ok); border-color: color-mix(in srgb, var(--c-ok) 50%, transparent); }
.chip[data-state="offline"], .chip[data-state="bear"] { color: var(--c-alert); border-color: color-mix(in srgb, var(--c-alert) 50%, transparent); }
.chip[data-state="shock"] { color: var(--c-warn); border-color: color-mix(in srgb, var(--c-warn) 50%, transparent); }

/* ---------------------------------------------------------------- açılış */
.boot { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 16px; color: var(--c-text-dim); }
.boot__mark { width: 56px; height: 56px; color: var(--c-copper); }
.boot__bar { width: 180px; height: 4px; background: var(--c-line); overflow: hidden; }
.boot__fill { width: 40%; height: 100%; background: var(--c-copper); animation: boot-slide 1.1s ease-in-out infinite; }
.boot__text { margin: 0; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
@keyframes boot-slide { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

/* ---------------------------------------------------------------- sahne */
.savestate { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--c-text-dim); letter-spacing: .08em; text-transform: uppercase; }
.savestate .ico { width: 14px; height: 14px; }
.savestate[data-state="error"] { color: var(--c-alert); }

.effects { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.effects li {
    display: flex; justify-content: space-between; gap: 8px; padding: 4px 8px;
    background: color-mix(in srgb, var(--c-surface) 88%, transparent); border-left: 3px solid var(--c-steel);
    font: 11px var(--f-mono);
}
.effects li[data-tone="bad"] { border-left-color: var(--c-alert); }
.effects li[data-tone="good"] { border-left-color: var(--c-ok); }

.abilities { position: absolute; left: 10px; bottom: 10px; display: flex; gap: 6px; }
.ability {
    position: relative; width: 58px; height: 58px; display: grid; place-items: center; padding: 0;
    background: var(--c-surface-2); border: 1px solid var(--c-line-strong); border-bottom-width: 3px; overflow: hidden;
    color: var(--c-copper); transition: transform var(--dur-fast), border-color var(--dur-fast);
}
.ability .ico { width: 26px; height: 26px; position: relative; z-index: 1; }
.ability:hover:not(:disabled) { border-color: var(--c-copper); transform: translateY(-2px); }
.ability:active:not(:disabled) { transform: translateY(1px); border-bottom-width: 1px; }
.ability__key {
    position: absolute; top: 2px; left: 4px; z-index: 2; font: 700 9px var(--f-mono); color: var(--c-text-faint);
}
/* Bekleme süresi: saat yönünde boşalan konik perde */
.ability__cd {
    position: absolute; inset: 0; z-index: 1;
    background: conic-gradient(rgb(0 0 0 / .55) calc(var(--cd, 0) * 1turn), transparent 0);
}
.ability__time { position: absolute; bottom: 3px; right: 4px; z-index: 2; font: 700 10px var(--f-mono); color: var(--c-text); }
.ability__active { position: absolute; left: 0; bottom: 0; height: 3px; width: calc(var(--act, 0) * 100%); background: var(--c-ok); z-index: 2; }
.ability[data-state="cooldown"] { color: var(--c-text-faint); }
.ability[data-state="active"] { border-color: var(--c-ok); color: var(--c-ok); }
.ability[data-state="ready"] { animation: ability-ready 2.4s ease-in-out infinite; }
.ability[data-state="locked"] { color: var(--c-text-faint); opacity: .6; }
.ability[data-state="locked"] .ico { opacity: .4; }
.ability[data-fired] { animation: ability-fire .5s var(--ease-spring); }
@keyframes ability-ready { 50% { border-color: var(--c-copper-dim); } }
@keyframes ability-fire { 30% { transform: scale(1.12); background: color-mix(in srgb, var(--c-ok) 25%, var(--c-surface-2)); } }
.ability-tip {
    position: absolute; left: 10px; bottom: 78px; z-index: 4; width: min(300px, calc(100% - 20px)); display: grid; gap: 3px; padding: 10px 12px;
    background: var(--c-surface); border: 1px solid var(--c-line-strong); border-left: 3px solid var(--c-copper); font-size: 12px; pointer-events: none;
}
.ability-tip strong { font: 700 14px var(--f-display); letter-spacing: .06em; text-transform: uppercase; }
.ability-tip span { color: var(--c-text-dim); }
.ability-tip small { font: 11px var(--f-mono); color: var(--c-text-faint); }

.tip {
    position: absolute; z-index: 3; display: grid; gap: 2px; padding: 8px 10px; min-width: 160px;
    background: var(--c-surface); border: 1px solid var(--c-line-strong); border-left: 3px solid var(--c-copper);
    font-size: 12px; pointer-events: none; transform: translate(-50%, -100%); white-space: nowrap;
}
.tip::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 6px; margin-left: -5px; background: var(--c-line-strong); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.tip span { font: 11px var(--f-mono); color: var(--c-text-dim); }
.tip small { font-size: 10px; color: var(--c-text-dim); letter-spacing: .08em; text-transform: uppercase; }

/* ---------------------------------------------------------------- paneller */
.panel { background-color: var(--c-surface); border: 1px solid var(--c-line); padding: 14px; }
.panel__title { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 14px var(--f-display); letter-spacing: .18em; text-transform: uppercase; color: var(--c-steel); }

.tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--c-line); margin-bottom: 10px; }
.tab {
    display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px;
    background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px;
    font: 600 13px var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-dim);
}
.tab .ico { width: 16px; height: 16px; }
.tab:hover { color: var(--c-text); }
.tab[aria-selected="true"] { color: var(--c-text); border-bottom-color: var(--c-copper); }

.buyamount { display: inline-flex; margin-bottom: 10px; border: 1px solid var(--c-line-strong); }
.buyamount button { padding: 5px 12px; background: none; border: 0; border-left: 1px solid var(--c-line-strong); font: 600 12px var(--f-mono); color: var(--c-text-dim); }
.buyamount button:first-child { border-left: 0; }
.buyamount button[aria-pressed="true"] { background: var(--c-accent-bg); color: var(--c-accent-ink); }

.list { display: grid; gap: 6px; }
.row {
    display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px;
    padding: 10px 12px; background: var(--c-surface-2); border: 1px solid var(--c-line);
    transition: border-color .3s;
}
.row[data-locked] { opacity: .55; }
.row[data-flash] { border-color: var(--c-copper); animation: row-flash .9s ease-out; }
@keyframes row-flash { 0% { background: color-mix(in srgb, var(--c-copper) 18%, var(--c-surface-2)); } }
.row__icon { width: 40px; height: 40px; display: grid; place-items: center; background: var(--c-surface); border: 1px solid var(--c-line); color: var(--c-copper); }
.row__icon .ico { width: 22px; height: 22px; }
.row__title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.row__name { font: 600 16px/1.2 var(--f-display); letter-spacing: .03em; }
.row__level { font: 600 12px var(--f-mono); color: var(--c-copper); }
.row__desc { margin: 2px 0 4px; font-size: 12px; color: var(--c-text-dim); }
.row__stats { display: flex; flex-wrap: wrap; gap: 2px 14px; font: 11px var(--f-mono); color: var(--c-text-dim); }
.row__stats b { color: var(--c-text); font-weight: 600; }
.row__buy { min-width: 136px; display: grid; gap: 2px; justify-items: center; padding: 7px 10px; text-transform: none; letter-spacing: 0; }
.row__buy small { font: 11px var(--f-mono); opacity: .85; }
.row__owned { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--c-ok); letter-spacing: .1em; text-transform: uppercase; }
.empty { padding: 18px; border: 1px dashed var(--c-line-strong); color: var(--c-text-dim); font-size: 13px; text-align: center; }

/* ---------------------------------------------------------------- borsa */
.market__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.market__head .ico { color: var(--c-copper); }
.commodities { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.commodities button {
    padding: 5px 9px; background: none; border: 1px solid var(--c-line-strong);
    font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--c-text-dim);
}
.commodities button[aria-selected="true"] { color: var(--c-text); border-color: var(--c-copper); background: var(--c-surface-2); }
.quote { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.quote__price { font: 700 26px/1 var(--f-mono); font-variant-numeric: tabular-nums; }
.quote__change { font: 600 13px var(--f-mono); }
.quote__change[data-dir="up"] { color: var(--c-ok); }
.quote__change[data-dir="down"] { color: var(--c-alert); }
.quote__unit { margin-left: auto; font-size: 11px; color: var(--c-text-dim); letter-spacing: .1em; text-transform: uppercase; }
.chart { height: 190px; margin-bottom: 10px; border: 1px solid var(--c-line); background: var(--c-surface-2); }
.chart canvas { display: block; width: 100%; height: 100%; }
.holding { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.holding__info { display: flex; align-items: baseline; gap: 8px; }
.holding__label { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-dim); }
.holding__info b { font: 600 16px var(--f-mono); }
.holding__value { font: 12px var(--f-mono); color: var(--c-text-dim); }
.sellbar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.market__hint { margin: 8px 0 0; font-size: 12px; color: var(--c-text-dim); min-height: 1.5em; }

.switch { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-dim); cursor: pointer; }
.switch input { appearance: none; width: 34px; height: 18px; margin: 0; background: var(--c-bg); border: 1px solid var(--c-line-strong); position: relative; cursor: pointer; }
.switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; background: var(--c-steel); transition: transform .15s; }
.switch input:checked { border-color: var(--c-copper); }
.switch input:checked::after { transform: translateX(16px); background: var(--c-copper); }

/* ---------------------------------------------------------------- pencereler */
.modal { width: min(500px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--c-line-strong); border-top: 3px solid var(--c-copper); border-radius: var(--radius); background: var(--c-surface); color: var(--c-text); }
.modal[open] { animation: modal-in .22s ease-out; }
.modal::backdrop { background: rgb(8 8 9 / .66); }
.modal__body { padding: 22px; display: grid; gap: 14px; }
.modal__title { display: flex; align-items: center; gap: 10px; margin: 0; font: 700 17px var(--f-display); letter-spacing: .14em; text-transform: uppercase; }
.modal__text, .modal__note { margin: 0; font-size: 14px; color: var(--c-text-dim); }
.modal__note { font-size: 12px; color: var(--c-warn); }
.modal__error { margin: 0; font-size: 13px; color: var(--c-alert); }
.modal__actions { display: flex; justify-content: flex-end; gap: 8px; }
@keyframes modal-in { from { transform: translateY(10px); opacity: 0; } }

.field-input { display: grid; gap: 6px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-text-dim); }
.field-input input, .code {
    width: 100%; padding: 10px 12px; background: var(--c-bg); color: var(--c-text);
    border: 1px solid var(--c-line-strong); border-radius: var(--radius); font: 15px var(--f-ui); letter-spacing: 0; text-transform: none;
}
.code { font: 12px/1.4 var(--f-mono); resize: vertical; word-break: break-all; }
.report { display: grid; gap: 1px; margin: 0; background: var(--c-line); border: 1px solid var(--c-line); }
.report > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; background: var(--c-surface-2); }
.report dt { font-size: 12px; color: var(--c-text-dim); }
.report dd { margin: 0; font: 600 14px var(--f-mono); }
.report__total dd { color: var(--c-copper); font-size: 16px; }

/* Olay penceresi */
.modal--event { width: min(560px, calc(100vw - 32px)); }
.modal--event[data-severity="high"] { border-top-color: var(--c-warn); }
.modal--event[data-severity="critical"] { border-top: 6px solid transparent; border-image: repeating-linear-gradient(-45deg, var(--c-alert) 0 8px, var(--c-crude) 8px 16px) 6; }
.event__head { display: flex; align-items: center; gap: 14px; }
.event__icon { width: 48px; height: 48px; display: grid; place-items: center; flex: none; background: var(--c-surface-2); border: 1px solid var(--c-line-strong); color: var(--c-copper); }
.modal--event[data-severity="critical"] .event__icon { color: var(--c-alert); animation: icon-shake .5s steps(4) 2; }
.event__icon .ico { width: 28px; height: 28px; }
.event__meta { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--c-text-dim); }
.countdown { height: 4px; background: var(--c-line); }
.countdown__fill { height: 100%; width: 100%; background: var(--c-copper); transition: width .2s linear; }
.event__deadline { margin: -6px 0 0; font-size: 11px; color: var(--c-text-dim); }
.choices { display: grid; gap: 8px; }
.choice {
    display: grid; gap: 3px; padding: 12px 14px; text-align: left;
    background: var(--c-surface-2); border: 1px solid var(--c-line-strong); border-left: 3px solid var(--c-steel);
}
.choice:hover { border-color: var(--c-copper); }
.choice strong { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.choice span { font-size: 12px; color: var(--c-text-dim); }
.choice em { font-style: normal; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-warn); }
@keyframes icon-shake { 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }

/* ---------------------------------------------------------------- bildirimler */
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 20; display: grid; gap: 8px; width: min(360px, calc(100vw - 32px)); }
.toast { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; background: var(--c-surface-2); border: 1px solid var(--c-line-strong); border-left: 3px solid var(--c-steel); font-size: 13px; animation: toast-in .2s ease-out; }
.toast .ico { margin-top: 1px; }
.toast small { display: block; margin-top: 2px; font: 11px/1.5 var(--f-mono); color: var(--c-text-dim); white-space: pre-line; }
.toast[data-kind="warn"] { border-left-color: var(--c-warn); }
.toast[data-kind="bad"] { border-left-color: var(--c-alert); }
.toast[data-kind="ok"] { border-left-color: var(--c-ok); }
.toast[data-kind="milestone"] { border-left-color: var(--c-copper); }
@keyframes toast-in { from { transform: translateX(12px); opacity: 0; } }

/* ---------------------------------------------------------------- hesap ve bulut */
.btn--slim { min-height: 30px; padding: 0 10px; font-size: 11px; }
.cloud {
    display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 10px;
    background: none; border: 1px solid var(--c-line-strong); font-size: 11px; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-dim);
}
.cloud .ico { width: 16px; height: 16px; }
.cloud[data-state="synced"] { color: var(--c-ok); }
.cloud[data-state="syncing"] .ico { animation: cloud-bob .9s ease-in-out infinite; }
.cloud[data-state="offline"], .cloud[data-state="conflict"] { color: var(--c-warn); }
.cloud[data-state="local"] { color: var(--c-copper); border-color: var(--c-copper-dim); }
@keyframes cloud-bob { 50% { transform: translateY(-2px); } }

.modal__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.modal__hint { margin: -6px 0 0; font-size: 11px; color: var(--c-text-dim); }
.account__card { display: grid; gap: 2px; padding: 12px 14px; background: var(--c-surface-2); border: 1px solid var(--c-line); border-left: 3px solid var(--c-copper); }
.account__nick { font-weight: 700; font-size: 16px; }
.account__type { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-copper); }
.account__sync { font: 11px var(--f-mono); color: var(--c-text-dim); }
.account__email { font: 12px var(--f-mono); color: var(--c-text); overflow-wrap: anywhere; }
.account__form { display: grid; gap: 12px; margin-top: 12px; }
.segmented { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--c-line-strong); }
.segmented button { padding: 8px; background: none; border: 0; border-left: 1px solid var(--c-line-strong); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-dim); }
.segmented button:first-child { border-left: 0; }
.segmented button[aria-selected="true"] { background: var(--c-surface-2); color: var(--c-text); box-shadow: inset 0 -2px 0 var(--c-copper); }

.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.compare__card { display: grid; gap: 4px; padding: 14px; text-align: left; background: var(--c-surface-2); border: 1px solid var(--c-line-strong); border-top: 3px solid var(--c-steel); }
.compare__card:hover { border-color: var(--c-copper); }
.compare__card b { font: 700 18px var(--f-mono); }
.compare__card span { font-size: 12px; color: var(--c-text-dim); }
.compare__label { font-size: 10px !important; letter-spacing: .14em; text-transform: uppercase; }

/* ---------------------------------------------------------------- liderlik çekmecesi */
.drawer {
    margin: 0 0 0 auto; height: 100vh; max-height: 100vh; width: min(520px, 100vw); padding: 0;
    border: 0; border-left: 1px solid var(--c-line-strong); background: var(--c-surface); color: var(--c-text);
}
.drawer[open] { animation: drawer-in .32s cubic-bezier(.2, .8, .2, 1); }
.drawer::backdrop { background: rgb(8 8 9 / .5); }
@keyframes drawer-in { from { transform: translateX(100%); } }
.drawer__inner { display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 18px; overflow: hidden; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; }

.boards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.boards button {
    display: grid; justify-items: center; gap: 4px; padding: 10px 6px; background: var(--c-surface-2);
    border: 1px solid var(--c-line-strong); font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    color: var(--c-text-dim); text-align: center;
}
.boards button .ico { width: 20px; height: 20px; }
.boards button[aria-selected="true"] { color: var(--c-text); border-color: var(--c-copper); box-shadow: inset 0 -3px 0 var(--c-copper); }
.period { display: inline-flex; align-self: flex-start; border: 1px solid var(--c-line-strong); }
.period button { padding: 5px 12px; background: none; border: 0; font-size: 11px; color: var(--c-text-dim); }
.period button[aria-pressed="true"] { background: var(--c-accent-bg); color: var(--c-accent-ink); }

/* Kürsü: sütunlar yükselerek gelir, plakalar metal tonlarında (parlamasız) */
.podium { display: grid; grid-template-columns: 1fr 1.1fr 1fr; align-items: end; gap: 8px; min-height: 190px; padding-top: 6px; }
.podium__slot { display: grid; justify-items: center; gap: 6px; text-align: center; min-width: 0; }
.podium__name { max-width: 100%; font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium__title { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-copper); min-height: 1em; }
.podium__score { font: 600 12px var(--f-mono); color: var(--c-text-dim); }
.podium__block {
    width: 100%; display: grid; place-items: start center; padding-top: 8px;
    border: 1px solid var(--c-line-strong); border-bottom: 0; transform-origin: bottom;
    animation: podium-rise .7s cubic-bezier(.2, .9, .3, 1.15) both;
    background-image: repeating-linear-gradient(90deg, transparent 0 10px, rgb(0 0 0 / .06) 10px 11px);
}
.podium__block b { font: 700 22px var(--f-mono); color: var(--c-bg); }
.podium__slot[data-place="1"] .podium__block { height: 110px; background-color: var(--c-copper); animation-delay: .25s; }
.podium__slot[data-place="2"] .podium__block { height: 80px; background-color: var(--c-steel); animation-delay: .1s; }
.podium__slot[data-place="3"] .podium__block { height: 60px; background-color: var(--c-rust, #8a5a3c); animation-delay: .4s; }
.podium__slot[data-you] .podium__name { color: var(--c-copper); }
.podium__slot--empty .podium__block { background-color: var(--c-surface-2) !important; }
@keyframes podium-rise { from { transform: scaleY(0); } }

.ranks { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; overflow-y: auto; flex: 1; align-content: start; }
.rank {
    display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 10px;
    padding: 8px 10px; background: var(--c-surface-2); border: 1px solid var(--c-line); border-left: 3px solid transparent;
    animation: rank-in .38s ease-out both; animation-delay: calc(var(--i, 0) * 28ms);
}
.rank[data-you] { border-left-color: var(--c-copper); background: color-mix(in srgb, var(--c-copper) 10%, var(--c-surface-2)); }
.rank__pos { font: 700 13px var(--f-mono); color: var(--c-text-dim); }
.rank__name { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank__name small { margin-left: 6px; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-copper); }
.rank__score { font: 600 13px var(--f-mono); font-variant-numeric: tabular-nums; }
@keyframes rank-in { from { transform: translateX(18px); opacity: 0; } }
.ranks__empty { margin: 0; padding: 18px; border: 1px dashed var(--c-line-strong); text-align: center; color: var(--c-text-dim); font-size: 13px; }

.me {
    display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: center; padding: 10px 12px;
    background: var(--c-surface-2); border: 1px solid var(--c-copper-dim); border-left: 3px solid var(--c-copper);
    animation: rank-in .4s ease-out both;
}
.me__rank { font: 700 16px var(--f-mono); color: var(--c-copper); }
.me__name { font-weight: 700; }
.me__score { font: 600 13px var(--f-mono); }
.me__note { grid-column: 1 / -1; font-size: 11px; color: var(--c-text-dim); }
.me__note:empty { display: none; }

/* ---------------------------------------------------------------- Faz 5: HUD cilası */
/* Satın alma düğmesi: karşılanabilirlik ilerleme çubuğu */
.row__buy { position: relative; overflow: hidden; }
.row__buy::before {
    content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: var(--afford, 0%);
    background: var(--c-copper); opacity: .8; transition: width .3s linear;
}
.row__buy.btn--primary::before { display: none; }
.row__buy[data-pulse] { animation: buy-stamp .28s var(--ease-spring); }
@keyframes buy-stamp { 40% { transform: scale(.94); } }
.row[data-pulse] .row__icon { animation: icon-pop .5s var(--ease-spring); }
@keyframes icon-pop { 35% { transform: scale(1.18) rotate(-4deg); background: color-mix(in srgb, var(--c-copper) 20%, var(--c-surface)); } }

/* Kilometre taşı ilerlemesi */
.row__milestone { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; margin-top: 6px; }
.row__track { height: 4px; background: var(--c-bg); border: 1px solid var(--c-line); }
.row__track span { display: block; height: 100%; width: 0; background: var(--c-steel); transition: width .4s var(--ease-out); }
.row__milestone small { font: 10px var(--f-mono); color: var(--c-text-faint); }
.list { contain: content; }

/* Uçan metin (harcama / kazanç) */
.fly {
    position: fixed; z-index: 30; transform: translate(-50%, 0); pointer-events: none;
    font: 700 13px var(--f-mono); padding: 1px 6px; background: var(--c-surface); border: 1px solid var(--c-line-strong);
    animation: fly-up .9s var(--ease-out) forwards;
}
.fly--spend { color: var(--c-alert); }
.fly--gain { color: var(--c-ok); }
@keyframes fly-up { to { transform: translate(-50%, -42px); opacity: 0; } }

/* Bildirim süresi çubuğu */
.toast { position: relative; overflow: hidden; }
.toast::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: currentColor; opacity: .25; animation: toast-timer var(--toast-ms, 4s) linear forwards; }
@keyframes toast-timer { to { width: 0; } }

/* Açılış ekranı: sallanan kuyu pompası */
.boot__rig { width: 140px; height: 94px; color: var(--c-copper); }
.boot__rig path, .boot__rig circle { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: square; }
.boot__ground, .boot__frame { stroke: var(--c-steel) !important; }
.boot__beam { transform-origin: 60px 30px; animation: boot-beam 1.4s ease-in-out infinite alternate; }
.boot__rod { transform-origin: 24px 40px; animation: boot-rod 1.4s ease-in-out infinite alternate; }
.boot__crank { stroke-dasharray: 10 6; animation: boot-crank 2.8s linear infinite; transform-origin: 84px 60px; }
@keyframes boot-beam { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
@keyframes boot-rod { from { transform: translateY(-9px); } to { transform: translateY(9px); } }
@keyframes boot-crank { to { transform: rotate(360deg); } }

/* Rehber (coach marks) */
.coach { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
.coach__box {
    position: fixed; border: 2px solid var(--c-copper); box-shadow: 0 0 0 9999px var(--c-overlay);
    transition: left .3s var(--ease-out), top .3s var(--ease-out), width .3s var(--ease-out), height .3s var(--ease-out), opacity .2s;
    animation: coach-pulse 1.6s ease-in-out infinite;
}
@keyframes coach-pulse { 50% { outline: 2px solid color-mix(in srgb, var(--c-copper) 40%, transparent); outline-offset: 5px; } }
.coach__card {
    position: fixed; pointer-events: auto; display: grid; gap: 8px; padding: 16px;
    background: var(--c-surface); border: 1px solid var(--c-line-strong); border-top: 3px solid var(--c-copper);
}
.coach__card--in { animation: modal-in .3s var(--ease-out); }
.coach__card strong { font: 700 18px var(--f-display); letter-spacing: .06em; text-transform: uppercase; }
.coach__card p { margin: 0; font-size: 14px; color: var(--c-text-dim); }
.coach__meta { font: 600 11px var(--f-display); letter-spacing: .18em; text-transform: uppercase; color: var(--c-copper); }
.coach__actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.coach__actions em { margin-right: auto; font-style: normal; font-size: 11px; color: var(--c-text-faint); }

/* Ayarlar */
.setting { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--c-line); }
.setting__label { display: flex; align-items: center; gap: 8px; font: 600 12px var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--c-text-dim); }
.setting--danger .modal__actions { justify-content: flex-start; flex-wrap: wrap; }
.segmented--3 { grid-template-columns: repeat(3, 1fr); }
.segmented button[aria-pressed="true"] { background: var(--c-surface-2); color: var(--c-text); box-shadow: inset 0 -2px 0 var(--c-copper); }
.keys { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; margin: 0; }
.keys div { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.keys dd { margin: 0; color: var(--c-text-dim); text-align: right; }
kbd { display: inline-block; min-width: 20px; padding: 1px 5px; font: 600 11px var(--f-mono); text-align: center; background: var(--c-surface-2); border: 1px solid var(--c-line-strong); border-bottom-width: 2px; }
.btn--danger { color: var(--c-alert); border-color: color-mix(in srgb, var(--c-alert) 60%, transparent); background: transparent; }
.btn--danger:hover:not(:disabled) { background: color-mix(in srgb, var(--c-alert) 12%, transparent); }

/* Mobil alt gezinme */
.dock { display: none; }

/* Animasyon azaltma tercihi (oyun içi ayar) */
:root[data-motion="reduced"] *, :root[data-motion="reduced"] *::before, :root[data-motion="reduced"] *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important;
}

/* ---------------------------------------------------------------- Faz 6: prestij */
.btn--sell { position: relative; color: var(--c-ok); border-color: color-mix(in srgb, var(--c-ok) 45%, transparent); }
.btn--sell[data-ready] { animation: ability-ready 2.4s ease-in-out infinite; }
.sell-badge { margin-left: 4px; padding: 0 5px; font: 700 10px var(--f-mono); background: var(--c-ok); color: var(--c-bg); }

.modal--prestige { width: min(580px, calc(100vw - 32px)); border-top-color: var(--c-ok); }
.prestige__gain { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); }
.prestige__gain > div { display: grid; gap: 4px; padding: 14px; background: var(--c-surface-2); }
.prestige__label { font: 600 11px var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--c-text-dim); }
.prestige__big { font: 700 34px/1 var(--f-mono); color: var(--c-ok); }
.prestige__mult { font: 700 18px var(--f-mono); }
.prestige__arrow { color: var(--c-text-faint); }
.prestige__req-head { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--c-text-dim); margin-bottom: 6px; }
.prestige__req-head b { color: var(--c-text); font-family: var(--f-mono); }
.prestige__bar { height: 8px; background: var(--c-bg); border: 1px solid var(--c-line); }
.prestige__bar span { display: block; height: 100%; width: 0; background: var(--c-ok); transition: width .5s var(--ease-out); }
.ladder { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ladder li { display: grid; gap: 2px; padding: 10px; background: var(--c-surface-2); border: 1px solid var(--c-line); border-top: 3px solid var(--c-line-strong); }
.ladder li[data-reached] { border-top-color: var(--c-ok); }
.ladder b { font: 700 18px var(--f-mono); }
.ladder span { font-size: 11px; color: var(--c-text-dim); }
.ladder em { font-style: normal; font: 600 11px var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--c-copper); }

/* Basılı tutarak onay: kazara tıklamayı önler, tıklama-spam değil kararlı eylem */
.hold {
    position: relative; overflow: hidden; height: 50px; border: 1px solid var(--c-ok); background: var(--c-surface-2);
    font: 700 14px var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--c-text); touch-action: none; user-select: none;
}
.hold:disabled { border-color: var(--c-line-strong); color: var(--c-text-faint); }
.hold__fill { position: absolute; inset: 0; width: calc(var(--hold, 0) * 100%); background: color-mix(in srgb, var(--c-ok) 35%, transparent); }
.hold__label { position: relative; }

/* Sinematik geçiş: sinema bantları + başlık */
.cinema { position: fixed; inset: 0; z-index: 50; pointer-events: none; display: grid; place-items: center; }
.cinema__bar { position: absolute; left: 0; right: 0; height: 14vh; background: #050505; transform: scaleY(0); }
.cinema__bar--top { top: 0; transform-origin: top; }
.cinema__bar--bottom { bottom: 0; transform-origin: bottom; }
.cinema[data-on] .cinema__bar { animation: bars-in .7s var(--ease-out) forwards; }
.cinema[data-off] .cinema__bar { animation: bars-out .6s ease-in forwards; }
@keyframes bars-in { to { transform: scaleY(1); } }
@keyframes bars-out { from { transform: scaleY(1); } to { transform: scaleY(0); } }
.cinema__text {
    display: grid; justify-items: center; gap: 6px; padding: 22px 34px; text-align: center;
    background: rgb(5 5 5 / .78); border-top: 2px solid var(--c-ok); border-bottom: 2px solid var(--c-ok); color: #e2e4e6;
    opacity: 0; transform: translateY(12px);
}
.cinema[data-on] .cinema__text { animation: cinema-text 4.6s 1.2s var(--ease-out) forwards; }
@keyframes cinema-text { 0% { opacity: 0; transform: translateY(12px); } 12%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-8px); } }
.cinema__kicker { font: 600 13px var(--f-display); letter-spacing: .3em; text-transform: uppercase; color: #9ab087; }
.cinema__title { font: 700 clamp(28px, 5vw, 46px)/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; }
.cinema__credits { font: 600 18px var(--f-mono); }
.cinema__credits b { color: #9ab087; }
.cinema__mult { font: 12px var(--f-mono); color: #9aa0a8; letter-spacing: .08em; }

/* ---------------------------------------------------------------- Faz 7: hedefler */
.goal-badge { margin-left: 4px; padding: 0 5px; font: 700 10px var(--f-mono); background: var(--c-copper); color: var(--c-bg); }
.btn--goals[data-pulse] { animation: ability-ready 1.2s ease-in-out 3; }

.contract-hud {
    position: absolute; top: 10px; right: 10px; z-index: 2; width: min(280px, calc(100% - 20px)); display: grid; gap: 5px; padding: 8px 10px;
    text-align: left; background: color-mix(in srgb, var(--c-surface) 92%, transparent); border: 1px solid var(--c-line-strong); border-left: 3px solid var(--c-copper);
}
.contract-hud:hover { border-color: var(--c-copper); }
.contract-hud__head, .contract-hud__meta { display: flex; justify-content: space-between; gap: 8px; }
.contract-hud__head { font: 600 12px var(--f-display); letter-spacing: .1em; text-transform: uppercase; }
.contract-hud__head span:last-child { font: 600 11px var(--f-mono); color: var(--c-text-dim); letter-spacing: 0; }
.contract-hud__meta { font: 11px var(--f-mono); color: var(--c-text-dim); }
.contract-hud__bar { height: 6px; background: var(--c-bg); border: 1px solid var(--c-line); }
.contract-hud__bar span { display: block; height: 100%; width: 0; background: var(--c-copper); transition: width .3s linear; }
.contract-hud[data-urgent] { border-left-color: var(--c-warn); }
.stage__warn ~ .contract-hud, .contract-hud + .stage__warn:not([hidden]) { top: 86px; }

.drawer--goals { width: min(560px, 100vw); }
.goals__body { flex: 1; overflow-y: auto; display: grid; gap: 10px; align-content: start; padding-right: 2px; }
.goals__section { font: 600 11px var(--f-display); letter-spacing: .18em; text-transform: uppercase; color: var(--c-text-dim); margin: 6px 0 0; display: flex; justify-content: space-between; }
.goals__section span:last-child { font-family: var(--f-mono); letter-spacing: 0; }

.card {
    display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; align-items: center; padding: 12px;
    background: var(--c-surface-2); border: 1px solid var(--c-line); border-left: 3px solid var(--c-steel);
    animation: rank-in .35s ease-out both; animation-delay: calc(var(--i, 0) * 50ms);
}
.card__icon { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--c-line-strong); color: var(--c-copper); background: var(--c-surface); }
.card__icon .ico { width: 24px; height: 24px; }
.card strong { display: block; font: 600 15px var(--f-display); letter-spacing: .04em; }
.card p { margin: 2px 0 0; font-size: 12px; color: var(--c-text-dim); }
.card__meta { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 4px; font: 11px var(--f-mono); color: var(--c-text-dim); }
.card__meta b { color: var(--c-text); }
.card--active { border-left-color: var(--c-copper); grid-template-columns: 42px 1fr; }
.card--active .gauge-lg { grid-column: 1 / -1; }
.card--done { border-left-color: var(--c-ok); }
.card--done .card__icon { color: var(--c-ok); }
.gauge-lg { display: grid; gap: 4px; }
.gauge-lg__bar { height: 12px; background: var(--c-bg); border: 1px solid var(--c-line); position: relative; overflow: hidden; }
.gauge-lg__bar span { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--c-copper); transition: width .35s linear; }
.gauge-lg__bar span::after {
    content: ""; position: absolute; inset: 0;
    background: repeating-linear-gradient(-45deg, rgb(0 0 0 / .14) 0 6px, transparent 6px 12px); animation: gauge-flow 1.2s linear infinite;
}
@keyframes gauge-flow { to { background-position: 17px 0; } }
.gauge-lg__meta { display: flex; justify-content: space-between; font: 11px var(--f-mono); color: var(--c-text-dim); }
.task-bar { height: 6px; background: var(--c-bg); border: 1px solid var(--c-line); margin-top: 6px; }
.task-bar span { display: block; height: 100%; width: 0; background: var(--c-steel); transition: width .4s var(--ease-out); }
.card--done .task-bar span { background: var(--c-ok); }
.goals__note { margin: 0; padding: 10px 12px; border: 1px dashed var(--c-line-strong); font-size: 12px; color: var(--c-text-dim); }

/* Madalya duvarı */
.ach-head { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); }
.ach-head div { display: grid; gap: 2px; padding: 10px 12px; background: var(--c-surface-2); }
.ach-head b { font: 700 22px var(--f-mono); color: var(--c-copper); }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chips button { padding: 4px 9px; background: none; border: 1px solid var(--c-line-strong); font: 600 11px var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-dim); }
.chips button[aria-pressed="true"] { color: var(--c-text); border-color: var(--c-copper); background: var(--c-surface-2); }
.medals { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.medal {
    display: grid; justify-items: center; gap: 4px; padding: 12px 8px; text-align: center;
    background: var(--c-surface-2); border: 1px solid var(--c-line); animation: rank-in .3s ease-out both; animation-delay: calc(var(--i, 0) * 18ms);
}
.medal__badge {
    position: relative; width: 52px; height: 52px; display: grid; place-items: center; color: var(--c-text-faint);
    clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); background: var(--c-line);
}
.medal__badge::before { content: ""; position: absolute; inset: 2px; clip-path: inherit; background: var(--c-surface); }
.medal__badge .ico { position: relative; width: 22px; height: 22px; }
.medal__ring { position: absolute; inset: 0; clip-path: inherit; background: conic-gradient(var(--c-copper-dim) calc(var(--p, 0) * 1turn), transparent 0); opacity: .6; }
.medal[data-earned] .medal__badge { background: var(--c-copper); color: var(--c-copper); }
.medal[data-earned] .medal__ring { display: none; }
.medal strong { font: 600 12px/1.2 var(--f-display); letter-spacing: .04em; }
.medal span { font-size: 10px; line-height: 1.3; color: var(--c-text-dim); }
.medal[data-hidden] strong { color: var(--c-text-faint); }

/* Başarım açılış bandı */
.unlock {
    position: fixed; top: 92px; left: 50%; z-index: 45; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; padding: 12px 18px 12px 12px;
    background: var(--c-surface); border: 1px solid var(--c-line-strong); border-top: 3px solid var(--c-copper); min-width: min(420px, calc(100vw - 32px));
    animation: unlock-in 4.2s var(--ease-out) forwards;
}
.unlock__medal {
    width: 54px; height: 54px; display: grid; place-items: center; color: var(--c-bg); background: var(--c-copper);
    clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); animation: medal-stamp .55s .15s var(--ease-spring) both;
}
.unlock__medal .ico { width: 26px; height: 26px; }
.unlock__text { display: grid; gap: 1px; flex: 1; }
.unlock__kicker { font: 600 10px var(--f-display); letter-spacing: .22em; text-transform: uppercase; color: var(--c-copper); }
.unlock__text strong { font: 700 18px var(--f-display); letter-spacing: .06em; text-transform: uppercase; }
.unlock__text span:last-child { font-size: 12px; color: var(--c-text-dim); }
.unlock__bonus { font: 700 12px var(--f-mono); color: var(--c-ok); white-space: nowrap; }
@keyframes unlock-in { 0% { transform: translate(-50%, -24px); opacity: 0; } 8%, 88% { transform: translate(-50%, 0); opacity: 1; } 100% { transform: translate(-50%, -12px); opacity: 0; } }
@keyframes medal-stamp { 0% { transform: scale(2.2) rotate(-18deg); opacity: 0; } 70% { transform: scale(.92) rotate(3deg); opacity: 1; } 100% { transform: none; } }

/* ---------------------------------------------------------------- Faz 8: görünüm ve tesis kartı */
.fcard {
    position: absolute; top: 10px; right: 10px; bottom: 10px; z-index: 6; width: min(340px, calc(100% - 20px)); display: flex; flex-direction: column;
    background: var(--c-surface); border: 1px solid var(--c-line-strong); border-top: 3px solid var(--c-copper); overflow: hidden;
}
.fcard--in { animation: fcard-in .32s var(--ease-out); }
@keyframes fcard-in { from { transform: translateX(24px); opacity: 0; } }
.fcard__close { position: absolute; top: 6px; right: 6px; z-index: 1; font-size: 20px; line-height: 1; background: color-mix(in srgb, var(--c-surface) 80%, transparent); }
.fcard__view { display: block; width: 100%; aspect-ratio: 640 / 300; flex: none; background: var(--c-crude); border-bottom: 1px solid var(--c-line); }
.fcard__body { display: grid; gap: 7px; padding: 10px 12px; overflow-y: auto; align-content: start; }
.fcard__buy { position: sticky; bottom: 0; padding-top: 4px; background: var(--c-surface); }
.fcard__cat { font: 600 10px var(--f-display); letter-spacing: .18em; text-transform: uppercase; color: var(--c-copper); }
.fcard__name { font: 700 19px/1.1 var(--f-display); letter-spacing: .04em; }
.fcard__desc { margin: 0; font-size: 12px; color: var(--c-text-dim); }
.fcard__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0; background: var(--c-line); border: 1px solid var(--c-line); }
.fcard__stats div { padding: 7px 9px; background: var(--c-surface-2); }
.fcard__stats dt { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-dim); }
.fcard__stats dd { margin: 2px 0 0; font: 600 13px var(--f-mono); }
.fcard__ms { display: grid; gap: 4px; }
.fcard__ms-bar { height: 6px; background: var(--c-bg); border: 1px solid var(--c-line); }
.fcard__ms-bar span { display: block; height: 100%; background: var(--c-steel); transition: width .4s var(--ease-out); }
.fcard__ms small { font: 10px var(--f-mono); color: var(--c-text-faint); }
.fcard__buy { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
.fcard__buy .btn { min-height: 40px; padding: 0 4px; font: 600 11px var(--f-mono); letter-spacing: 0; text-transform: none; }

/* ---------------------------------------------------------------- duyarlı */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

.ico--sm { width: 14px; height: 14px; }
.commodities button { display: inline-flex; align-items: center; gap: 6px; }
.commodities button .ico { color: var(--c-copper); }

.segmented--4 { grid-template-columns: repeat(4, 1fr); }

/* ---------------------------------------------------------------------
   Hesap güvenliği (Faz 9): doğrulama şeridi, bölmeler, oturum listesi, tehlikeli bölge
   --------------------------------------------------------------------- */
.modal--account { width: min(540px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; margin: max(16px, 7vh) auto auto; }
.btn--sm { padding: 6px 10px; font-size: 11px; }
.modal__ok { margin: 0; padding: 10px 12px; font-size: 13px; line-height: 1.45; color: var(--c-text); background: color-mix(in srgb, var(--c-ok) 10%, var(--c-surface-2)); border-left: 3px solid var(--c-ok); }
.account__verify { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; background: color-mix(in srgb, var(--c-warn) 9%, var(--c-surface-2)); border: 1px solid color-mix(in srgb, var(--c-warn) 35%, var(--c-line)); }
.account__verify[hidden] { display: none; }
.account__verify > .ico { color: var(--c-warn); }
.account__verify p { margin: 0; font-size: 12px; line-height: 1.45; color: var(--c-text-dim); }
.account__verify b { color: var(--c-text); font-weight: 600; }
.account__pane { display: grid; gap: 12px; margin-top: 12px; }
.account__pane[hidden] { display: none; }
.segmented button .ico { width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; }
.sessions { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border: 1px solid var(--c-line); }
.session { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-top: 1px solid var(--c-line); animation: session-in var(--dur) var(--ease-out) both; }
.session:first-child { border-top: 0; }
.session[data-current] { background: var(--c-surface-2); box-shadow: inset 3px 0 0 var(--c-copper); }
.session div { display: grid; gap: 2px; min-width: 0; }
.session b { font-size: 13px; font-weight: 600; }
.session span { font: 11px var(--f-mono); color: var(--c-text-dim); overflow-wrap: anywhere; }
.session .session__tag { flex: none; padding: 3px 8px; font: 600 10px var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--c-copper); border: 1px solid var(--c-copper-dim); }
@keyframes session-in { from { opacity: 0; transform: translateX(-6px); } }
.danger { border: 1px solid color-mix(in srgb, var(--c-alert) 30%, var(--c-line)); }
.danger[hidden] { display: none; }
.danger summary { display: flex; align-items: center; gap: 8px; padding: 9px 12px; cursor: pointer; list-style: none; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--c-alert); }
.danger summary::-webkit-details-marker { display: none; }
.danger summary .ico { width: 15px; height: 15px; }
.danger[open] summary { border-bottom: 1px solid color-mix(in srgb, var(--c-alert) 30%, var(--c-line)); }
.danger .account__form { margin: 0; padding: 12px; }
.danger .field-input b { color: var(--c-text); text-transform: none; letter-spacing: 0; }
@media (max-width: 520px) {
    .account__verify { grid-template-columns: auto 1fr; }
    .account__verify .btn { grid-column: 1 / -1; }
    .segmented--3 button { font-size: 10px; padding: 8px 4px; }
    .segmented button .ico { display: none; }
}
@media (prefers-reduced-motion: reduce) { .session { animation: none; } }