/* 2FA Tool · screens */

/* ---------- generator ---------- */
.tt-secret {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 4px;
    padding: 3px 6px 3px 16px;
    border-radius: 18px;
    border: 1px solid var(--tt-input-border);
    background: var(--tt-input);
    transition: border-color var(--tt-dur-2), box-shadow var(--tt-dur-2), background-color var(--tt-dur-2);
}
.tt-secret:focus-within { border-color: var(--tt-accent); box-shadow: 0 0 0 4px var(--tt-focus); }
.tt-secret.is-error { border-color: var(--tt-red); }
.tt-secret.is-error:focus-within { box-shadow: 0 0 0 4px rgba(255, 59, 48, .16); }
.tt-secret.is-dragover { border-color: var(--tt-accent); border-style: dashed; background: var(--tt-accent-soft); }
.tt-secret__input {
    flex: 1;
    min-width: 0;
    height: 48px;
    min-height: 48px;
    max-height: 196px;
    padding: 13px 0;
    border: 0;
    background: transparent;
    resize: none;
    overflow-y: auto;
    font-family: var(--tt-font-mono);
    font-size: 16px;
    line-height: 22px;
    letter-spacing: .045em;
    color: var(--tt-label);
    word-break: break-all;
}
.tt-secret__input:placeholder-shown { font-family: var(--tt-font); letter-spacing: 0; }
.tt-secret__tools { display: flex; align-items: center; gap: 2px; flex: none; padding-top: 7px; }
.tt-iconbtn--clear { color: var(--tt-label-3); }

.tt-hint {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 10px 6px 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--tt-label-2);
    transition: color var(--tt-dur-2);
}
.tt-hint__ico { width: 15px; height: 15px; margin-top: 1.5px; color: var(--tt-label-3); }
.tt-hint[data-tone="ok"] .tt-hint__ico { color: var(--tt-green); }
.tt-hint[data-tone="error"] { color: var(--tt-red); }
.tt-hint[data-tone="error"] .tt-hint__ico { color: var(--tt-red); }
.tt-hint[data-tone="warn"] .tt-hint__ico { color: var(--tt-orange); }

.tt-adv {
    margin-top: 14px;
    padding: 4px 14px 6px;
    border-radius: 18px;
    background: var(--tt-fill-2);
    box-shadow: inset 0 0 0 .5px var(--tt-sep);
    animation: tt-fade-down var(--tt-dur-3) var(--tt-ease-out) both;
}
.tt-adv__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; }
.tt-adv__row + .tt-adv__row { border-top: .5px solid var(--tt-sep); }
.tt-adv__label { font-size: 14px; font-weight: 500; color: var(--tt-label-2); }
.tt-adv__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 0 2px; border-top: .5px solid var(--tt-sep); }
.tt-adv__note { flex: 1 1 180px; font-size: 12px; line-height: 1.45; color: var(--tt-label-3); }
.tt-adv__btns { display: flex; gap: 2px; margin-right: -8px; }
.tt-gen__head .tt-card__tools { gap: 6px; }
.tt-gen__head .tt-btn--sm { --h: 30px; padding: 0 12px; font-size: 13px; }
.tt-gen__head .tt-btn--sm .tt-ico { width: 15px; height: 15px; }
.tt-gen__head .tt-chip--btn.is-custom { background: var(--tt-accent-soft); }
.tt-gen[data-type="steam"] [data-adv-std] { display: none; }
@keyframes tt-fade-down { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.tt-otp { margin-top: 18px; }
.tt-otp__single {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 16px 18px;
    border-radius: 24px;
    background: linear-gradient(180deg, var(--tt-surface) 0%, color-mix(in srgb, var(--tt-surface) 55%, transparent) 100%);
    box-shadow: inset 0 1px 0 var(--tt-glass-hi), 0 0 0 .5px var(--tt-glass-edge);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .tt-otp__single { background: var(--tt-surface); }
}
.tt-otp__meta {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--tt-label-2);
}
.tt-otp__code {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 72%;
    margin: 8px 0 10px;
    padding: 8px 16px;
    border-radius: 18px;
    color: var(--tt-label);
    transition: transform var(--tt-dur-1) var(--tt-ease), background-color var(--tt-dur-2);
}
.tt-otp__code:not(:disabled):active { transform: scale(.97); }
@media (hover: hover) { .tt-otp__code:not(:disabled):hover { background: var(--tt-fill-2); } }
.tt-otp__code .tt-digits { transition: color var(--tt-dur-2), opacity var(--tt-dur-3); }
.tt-otp__copied {
    position: absolute;
    top: -12px;
    left: 50%;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 26px;
    padding: 0 11px 0 8px;
    border-radius: var(--tt-r-pill);
    background: var(--tt-accent);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    transform: translate(-50%, 4px) scale(.9);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--tt-dur-2), transform var(--tt-dur-3) var(--tt-ease-spring);
}
.tt-otp__copied .tt-ico { width: 15px; height: 15px; stroke-width: 2.6; }
.tt-otp__code.is-copied .tt-otp__copied { opacity: 1; transform: translate(-50%, 0) scale(1); }
.tt-otp__code.is-copied .tt-digits { color: var(--tt-accent); }
.tt-otp__foot { display: flex; align-items: center; gap: 14px; }
.tt-otp__next { display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; line-height: 1.2; color: var(--tt-label-3); }
.tt-otp__next b { font-size: 16px; color: var(--tt-label-2); transition: color var(--tt-dur-3); }
.tt-gen[data-expiring] .tt-otp__code .tt-digits { opacity: .62; }
.tt-gen[data-expiring] .tt-otp__next b { color: var(--tt-accent); }
.tt-otp__idle { display: none; margin: 2px 0 4px; font-size: 13px; color: var(--tt-label-3); }
.tt-gen[data-state="empty"] .tt-otp__idle, .tt-gen[data-state="invalid"] .tt-otp__idle { display: block; }
.tt-gen[data-state="empty"] .tt-otp__foot, .tt-gen[data-state="invalid"] .tt-otp__foot { display: none; }
.tt-gen[data-state="batch"] .tt-otp__single { display: none; }

.tt-batch__bar { margin-bottom: 10px; }
.tt-batch__count { display: none; }
.tt-batch__tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tt-batch__tools .tt-btn { padding: 0 8px; }
.tt-batch__list {
    max-height: 420px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 20px;
    background: var(--tt-surface);
    box-shadow: inset 0 1px 0 var(--tt-glass-hi), 0 0 0 .5px var(--tt-glass-edge);
}
.tt-brow {
    position: relative;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto 28px 32px;
    align-items: center;
    gap: 10px;
    min-height: 62px;
    padding: 8px 12px 8px 12px;
}
.tt-brow + .tt-brow::before { content: ""; position: absolute; top: 0; right: 0; left: 44px; height: .5px; background: var(--tt-sep-strong); }
.tt-brow__idx { font-size: 12px; font-weight: 700; color: var(--tt-label-3); font-variant-numeric: tabular-nums; text-align: center; }
.tt-brow__label { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tt-brow__label b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; }
.tt-brow__label small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--tt-font-mono); font-size: 11.5px; color: var(--tt-label-3); }
.tt-brow__code { padding: 6px 8px; border-radius: 10px; transition: background-color var(--tt-dur-2), transform var(--tt-dur-1); }
.tt-brow__code .tt-digits { font-size: 23px; }
.tt-brow__code:active { transform: scale(.95); }
@media (hover: hover) { .tt-brow__code:hover { background: var(--tt-fill-2); } }
.tt-brow__code.is-copied .tt-digits { color: var(--tt-accent); }
.tt-brow__qr { color: var(--tt-accent); }
.tt-brow--error { grid-template-columns: 22px minmax(0, 1fr); }
.tt-brow--error .tt-brow__label b { color: var(--tt-red); font-weight: 500; }

.tt-gen__actions { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-top: 18px; }
.tt-gen[data-state="batch"] .tt-gen__actions { display: none; }
.tt-gen__clock {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 16px;
    font-size: 12.5px;
    color: var(--tt-label-3);
}
.tt-gen__clock .tt-ico { width: 14px; height: 14px; }
.tt-gen__clock[data-tone="ok"] .tt-ico { color: var(--tt-green); }
.tt-gen__clock[data-tone="warn"] { color: var(--tt-orange); }

/* ---------- QR card (scan into an authenticator app) ---------- */
.tt-qrcard {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas:
        "qr ."
        "qr title"
        "qr text"
        "qr ."
        "btns btns"
        "names names"
        "foot foot";
    gap: 0 16px;
    margin-top: 16px;
    padding: 16px;
    border-radius: 24px;
    background: var(--tt-surface);
    box-shadow: inset 0 1px 0 var(--tt-glass-hi), 0 0 0 .5px var(--tt-glass-edge);
    animation: tt-fade-down var(--tt-dur-3) var(--tt-ease-out) both;
}
.tt-qrcard__code {
    position: relative;
    display: grid;
    place-items: center;
    width: 124px;
    height: 124px;
    padding: 9px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 0 0 .5px rgba(0, 0, 0, .1), 0 4px 14px rgba(15, 20, 40, .08);
    transition: transform var(--tt-dur-2) var(--tt-ease), box-shadow var(--tt-dur-2);
}
.tt-qrcard__img { display: block; width: 100%; height: 100%; }
.tt-qrcard__img svg { width: 100%; height: 100%; }
.tt-qrcard__zoom {
    position: absolute;
    right: -7px;
    bottom: -7px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--tt-accent);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
    transition: transform var(--tt-dur-2) var(--tt-ease-spring);
}
.tt-qrcard__zoom .tt-ico { width: 15px; height: 15px; stroke-width: 2.4; }
.tt-qrcard__code:active { transform: scale(.96); }
@media (hover: hover) {
    .tt-qrcard__code:hover { transform: translateY(-2px); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .1), 0 10px 26px rgba(15, 20, 40, .14); }
    .tt-qrcard__code:hover .tt-qrcard__zoom { transform: scale(1.1); }
}
.tt-qrcard__code { grid-area: qr; }
.tt-qrcard__body { display: contents; }
.tt-qrcard__title { grid-area: title; font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }
.tt-qrcard__text { grid-area: text; margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--tt-label-2); }
.tt-qrcard__btns { grid-area: btns; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.tt-qrcard__names { grid-area: names; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.tt-qrcard__foot { grid-area: foot; margin-top: 8px; font-size: 12px; color: var(--tt-label-3); }
.tt-mini {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 7px 12px 6px;
    border-radius: 14px;
    background: var(--tt-input);
    border: 1px solid var(--tt-input-border);
    transition: border-color var(--tt-dur-2), box-shadow var(--tt-dur-2);
    cursor: text;
}
.tt-mini:focus-within { border-color: var(--tt-accent); box-shadow: 0 0 0 4px var(--tt-focus); }
.tt-mini__label { font-size: 11.5px; font-weight: 600; color: var(--tt-label-3); }
.tt-mini__input { width: 100%; min-width: 0; padding: 0; border: 0; background: transparent; font-size: 15px; color: var(--tt-label); }
.tt-mini__input::placeholder { color: var(--tt-label-3); }

/* ---------- QR viewer sheet ---------- */
.tt-qrview { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.tt-qrview__who { display: flex; align-items: center; gap: 10px; max-width: 100%; }
.tt-qrview__names { display: flex; flex-direction: column; min-width: 0; }
.tt-qrview__names b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15.5px; font-weight: 650; }
.tt-qrview__names small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--tt-label-2); }
.tt-qr.tt-qr--lg { width: min(264px, 72vw); height: min(264px, 72vw); padding: 16px; border-radius: 26px; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.tt-qr.is-loading { opacity: .4; }
.tt-qr.tt-qr--lg.is-dense { width: min(320px, 82vw); height: min(320px, 82vw); padding: 14px; }
.tt-qr { transition: opacity var(--tt-dur-2); }
.tt-qrview__tip { font-size: 14px; color: var(--tt-label-2); text-align: center; }
.tt-qrview__pager { display: flex; align-items: center; gap: 12px; }
.tt-qrview__pager .tt-iconbtn { background: var(--tt-fill); color: var(--tt-label); }
.tt-qrview__pager .tt-iconbtn:disabled { opacity: .35; }
.tt-qrview__count { min-width: 6em; text-align: center; font-size: 13.5px; font-weight: 600; color: var(--tt-label-2); font-variant-numeric: tabular-nums; }
.tt-qrview .tt-callout { width: 100%; }
.tt-callout--info { background: var(--tt-accent-soft); color: var(--tt-label-2); }
.tt-callout--info .tt-ico { color: var(--tt-accent); }

@media (max-width: 899.98px) {
    .tt-qrcard__code { width: 112px; height: 112px; }
}
@media (max-width: 360px) {
    .tt-qrcard { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "qr" "title" "text" "btns" "names" "foot"; justify-items: center; text-align: center; }
    .tt-qrcard__title { margin-top: 12px; }
    .tt-qrcard__btns, .tt-qrcard__names { width: 100%; }
}

/* ---------- vault ---------- */
.tt-vault { min-height: 480px; }
.tt-vault__view { display: none; }
.tt-vault[data-view="loading"] [data-view-of="loading"],
.tt-vault[data-view="empty"] [data-view-of="empty"],
.tt-vault[data-view="locked"] [data-view-of="locked"],
.tt-vault[data-view="list"] [data-view-of="list"],
.tt-vault[data-view="error"] [data-view-of="error"] { display: flex; }
.tt-vault[data-view="loading"] [data-view-of="loading"],
.tt-vault[data-view="list"] [data-view-of="list"] { display: block; }
.tt-vault__view.is-entering { animation: tt-pane-in var(--tt-dur-3) var(--tt-ease-out) both; }
.tt-vault[data-view="empty"] .tt-vault__head .tt-btn,
.tt-vault[data-view="locked"] .tt-vault__head .tt-btn,
.tt-vault[data-view="loading"] .tt-vault__head .tt-btn,
.tt-vault[data-view="error"] .tt-vault__head .tt-btn { display: none; }
.tt-vault__head { margin-bottom: 18px; }

.tt-vault__bar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.tt-entries { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 12px; }
.tt-entry {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    background: var(--tt-surface);
    box-shadow: inset 0 1px 0 var(--tt-glass-hi), 0 0 0 .5px var(--tt-glass-edge), var(--tt-shadow-1);
    transition: transform var(--tt-dur-2) var(--tt-ease), box-shadow var(--tt-dur-2) var(--tt-ease);
    animation: tt-entry-in var(--tt-dur-3) var(--tt-ease-out) backwards;
    animation-delay: var(--stagger, 0ms);
}
@keyframes tt-entry-in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
.tt-entry__main {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    grid-template-areas: "av txt txt" "av code ring";
    column-gap: 12px;
    row-gap: 6px;
    align-items: center;
    width: 100%;
    padding: 14px 14px 14px 14px;
    border-radius: inherit;
    background: transparent;
    text-align: left;
    touch-action: pan-y;
    transition: transform var(--tt-dur-3) var(--tt-ease), background-color var(--tt-dur-2);
}
.tt-entry__main > .tt-avatar { grid-area: av; align-self: start; }
.tt-entry__text { grid-area: txt; display: flex; flex-direction: column; min-width: 0; padding-right: 30px; }
.tt-entry__issuer { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 15px; font-weight: 650; letter-spacing: -.005em; }
.tt-entry__issuer span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-entry__issuer .tt-ico { width: 13px; height: 13px; color: var(--tt-orange); stroke-width: 2.2; }
.tt-entry__account { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--tt-label-2); }
.tt-entry__code { grid-area: code; min-width: 0; }
.tt-entry__code .tt-digits { font-size: 30px; transition: color var(--tt-dur-2); }
.tt-entry__main > .tt-ring { grid-area: ring; justify-self: end; }
.tt-entry__more {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    width: 32px;
    height: 32px;
    color: var(--tt-label-3);
}
.tt-entry__more .tt-ico { width: 20px; height: 20px; }
.tt-entry__actions {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    z-index: 0;
    visibility: hidden;
}
.tt-entry.is-swiping .tt-entry__actions,
.tt-entry.is-open .tt-entry__actions { visibility: visible; }
.tt-entry__more { transition: opacity var(--tt-dur-1); }
.tt-entry.is-swiping .tt-entry__more,
.tt-entry.is-open .tt-entry__more { opacity: 0; pointer-events: none; }
.tt-entry__actions button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 78px;
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
}
.tt-entry__actions .tt-ico { width: 22px; height: 22px; stroke-width: 2; }
.tt-entry__act-edit { background: var(--tt-gray); }
.tt-entry__act-del { background: var(--tt-red); }
.tt-entry.is-swiping .tt-entry__main, .tt-entry.is-open .tt-entry__main { background: var(--tt-surface-solid); }
.tt-entry.is-swiping .tt-entry__main { transition: none; }
.tt-entry.is-copied { box-shadow: inset 0 1px 0 var(--tt-glass-hi), 0 0 0 2px var(--tt-accent), var(--tt-shadow-2); }
.tt-entry.is-copied .tt-entry__code .tt-digits { color: var(--tt-accent); }
.tt-entry.is-pressing { transform: scale(.98); }
.tt-entry.is-leaving { animation: tt-entry-out var(--tt-dur-3) var(--tt-ease) both; }
@keyframes tt-entry-out { to { opacity: 0; transform: scale(.94); } }
@media (hover: hover) {
    .tt-entry:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 var(--tt-glass-hi), 0 0 0 .5px var(--tt-glass-edge), var(--tt-shadow-2); }
    .tt-entry__more:hover { color: var(--tt-label); }
}
.tt-vault__note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 36px 12px;
    font-size: 14px;
    color: var(--tt-label-2);
}
.tt-vault__note .tt-ico { width: 18px; height: 18px; }
.tt-vault__note--zero { flex-direction: column; gap: 14px; }

/* ---------- mobile list & lock ---------- */
@media (max-width: 899.98px) {
    .tt-vault { min-height: 0; }
    .tt-entries { grid-template-columns: 1fr; gap: 10px; }
    .tt-entry { border-radius: 22px; }
    .tt-entry__main { padding: 14px 14px 13px; }
    .tt-entry__code .tt-digits { font-size: 31px; }
    .tt-lock, .tt-empty { padding-top: 7vh; }
    .tt-vault__bar { position: sticky; top: calc(var(--tt-nav-h) + var(--tt-safe-t) + 6px); z-index: 5; margin: 0 -4px 14px; padding: 4px; }
    .tt-vault__bar .tt-search { background: var(--tt-glass-2); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: 0 0 0 .5px var(--tt-glass-edge); }
    .tt-vault__bar .tt-iconbtn { background: var(--tt-glass-2); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 0 0 .5px var(--tt-glass-edge); color: var(--tt-accent); }
    .tt-banner { flex-wrap: wrap; }
    .tt-banner__btns { width: 100%; justify-content: flex-end; }
    .tt-secret__input { font-size: 17px; }
    .tt-digits--hero { font-size: 56px; }
    .tt-gen__actions { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 380px) {
    .tt-digits--hero { font-size: 48px; }
    .tt-entry__code .tt-digits { font-size: 27px; }
}

/* ---------- settings ---------- */
.tt-settings { padding-bottom: 8px; }
.tt-settings .tt-group__card { background: var(--tt-surface); }
.tt-sheet .tt-settings .tt-group__card { background: var(--tt-surface-raised); }
.tt-row--stack .tt-seg { margin-left: auto; }
.tt-about { padding: 14px 16px; display: grid; gap: 8px; font-size: 13.5px; line-height: 1.6; color: var(--tt-label-2); }
@media (max-width: 420px) {
    .tt-row--stack .tt-seg { width: 100%; margin: 4px 0 6px 42px; }
}

/* ---------- entry form preview ---------- */
.tt-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding: 14px 14px 14px 14px;
    border-radius: 22px;
    background: linear-gradient(150deg, var(--tt-accent-soft-2), var(--tt-accent-soft) 60%, transparent);
    box-shadow: inset 0 0 0 .5px var(--tt-accent-soft-2);
}
.tt-preview__text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.tt-preview__text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15.5px; font-weight: 650; }
.tt-preview__text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--tt-label-2); }
.tt-preview__code { display: flex; align-items: center; gap: 10px; flex: none; }
.tt-preview__code .tt-digits { font-size: 24px; }
.tt-preview[data-state="empty"] .tt-preview__code { display: none; }

/* ---------- detail ---------- */
.tt-detail__head { display: flex; align-items: center; gap: 14px; padding: 2px 4px 16px; }
.tt-detail__names { display: flex; flex-direction: column; min-width: 0; }
.tt-detail__names b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 21px; font-weight: 700; letter-spacing: -.015em; }
.tt-detail__names span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--tt-label-2); }
.tt-detail__code {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 18px 12px 14px;
    border-radius: 24px;
    background: var(--tt-surface-raised);
    box-shadow: 0 0 0 .5px var(--tt-glass-edge);
    color: var(--tt-label);
    transition: transform var(--tt-dur-1), background-color var(--tt-dur-2);
}
.tt-detail__code:active { transform: scale(.98); }
.tt-detail__code.is-copied .tt-digits { color: var(--tt-accent); }
.tt-detail__codefoot { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--tt-label-2); }
.tt-detail__next { display: flex; margin: 12px auto 0; }
.tt-actions4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 0; }
.tt-actions4 button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 4px 10px;
    border-radius: 18px;
    background: var(--tt-surface-raised);
    box-shadow: 0 0 0 .5px var(--tt-glass-edge);
    color: var(--tt-accent);
    font-size: 12px;
    font-weight: 600;
    transition: transform var(--tt-dur-1), background-color var(--tt-dur-2);
}
.tt-actions4 button span { display: grid; place-items: center; width: 32px; height: 32px; }
.tt-actions4 button .tt-ico { width: 23px; height: 23px; stroke-width: 1.9; }
.tt-actions4 button:active { transform: scale(.94); }
.tt-actions4 button.is-danger { color: var(--tt-red); }
.tt-actions4 button[aria-pressed="true"] { background: var(--tt-accent-soft); }
.tt-detail__qr { display: grid; justify-items: center; gap: 12px; margin-bottom: 14px; animation: tt-fade-down var(--tt-dur-3) var(--tt-ease-out) both; }
.tt-qr {
    display: grid;
    place-items: center;
    width: 232px;
    height: 232px;
    padding: 14px;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 0 0 .5px rgba(0, 0, 0, .08), var(--tt-shadow-1);
}
.tt-qr svg { width: 100%; height: 100%; }
.tt-detail .tt-callout { width: 100%; }

/* ---------- import / export ---------- */
.tt-import__panel { margin-top: 14px; }
.tt-import__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.tt-import__tip { font-size: 12.5px; color: var(--tt-label-3); }
.tt-filepick {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 26px 18px;
    border-radius: 22px;
    border: 1.5px dashed var(--tt-sep-strong);
    background: var(--tt-fill-2);
    color: var(--tt-label-2);
    text-align: center;
    font-size: 13px;
    transition: border-color var(--tt-dur-2), background-color var(--tt-dur-2);
}
.tt-filepick .tt-ico { width: 30px; height: 30px; color: var(--tt-accent); }
.tt-filepick b { font-size: 15px; font-weight: 600; color: var(--tt-label); overflow-wrap: anywhere; }
@media (hover: hover) { .tt-filepick:hover { border-color: var(--tt-accent); background: var(--tt-accent-soft); } }
.tt-import__panel .tt-pw { margin-top: 12px; }
.tt-import__preview { margin-top: 16px; }
.tt-import__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; padding: 0 4px; font-size: 14px; }
.tt-import__list {
    max-height: 300px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 20px;
    background: var(--tt-surface-raised);
    box-shadow: 0 0 0 .5px var(--tt-glass-edge);
}
.tt-import__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    padding: 8px 14px;
    cursor: pointer;
}
.tt-import__item + .tt-import__item::before { content: ""; position: absolute; top: 0; right: 0; left: 52px; height: .5px; background: var(--tt-sep-strong); }
.tt-import__item .tt-check { margin: 0; }
.tt-import__item .tt-menu__text { gap: 1px; }
.tt-import__item .tt-menu__text b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-import__item .tt-menu__text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-import__item em { flex: none; padding: 2px 8px; border-radius: 6px; background: var(--tt-fill); color: var(--tt-label-2); font-size: 11.5px; font-style: normal; font-weight: 600; }

.tt-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 14px 14px 16px;
    border-radius: 22px;
    background: var(--tt-surface-raised);
    box-shadow: 0 0 0 .5px var(--tt-glass-edge);
}
.tt-option + .tt-option { margin-top: 10px; }
.tt-option__text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.tt-option__text b { font-size: 15px; font-weight: 650; }
.tt-option__text span { font-size: 13px; line-height: 1.5; color: var(--tt-label-2); }
.tt-export__plain { display: grid; gap: 10px; margin-top: 14px; animation: tt-fade-down var(--tt-dur-3) var(--tt-ease-out) both; }
.tt-export__btns { display: flex; justify-content: flex-end; gap: 8px; }
.tt-confirm__text { padding: 0 4px 6px; font-size: 15px; line-height: 1.6; color: var(--tt-label-2); text-align: center; }

/* ---------- drop overlay ---------- */
.tt-drop {
    position: fixed;
    inset: 0;
    z-index: 950;
    display: grid;
    place-items: center;
    background: var(--tt-scrim);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    animation: tt-fade var(--tt-dur-2) var(--tt-ease) both;
}
.tt-drop__box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 44px 60px;
    border-radius: 34px;
    border: 2px dashed var(--tt-accent);
    background: var(--tt-glass-sheet);
    -webkit-backdrop-filter: blur(var(--tt-blur-strong));
    backdrop-filter: blur(var(--tt-blur-strong));
    box-shadow: var(--tt-shadow-3);
    pointer-events: none;
}
.tt-drop__box .tt-ico { width: 46px; height: 46px; color: var(--tt-accent); stroke-width: 1.6; }
.tt-drop__box b { font-size: 18px; font-weight: 650; }
.tt-drop__box span { font-size: 13px; color: var(--tt-label-2); }
@keyframes tt-fade { from { opacity: 0; } to { opacity: 1; } }