/* 2FA Tool · components */

/* ---------- glass material ---------- */
.tt-card--glass,
.tt-glass {
    position: relative;
    background: var(--tt-glass);
    -webkit-backdrop-filter: blur(var(--tt-blur)) saturate(180%);
    backdrop-filter: blur(var(--tt-blur)) saturate(180%);
    border: 1px solid var(--tt-glass-border);
    box-shadow: inset 0 1px 0 var(--tt-glass-hi), 0 0 0 .5px var(--tt-glass-edge), var(--tt-shadow-2);
}
.tt-card--glass::before,
.tt-glass::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--tt-glass-sheen);
    pointer-events: none;
}
.tt-card--glass > *, .tt-glass > * { position: relative; }

/* ---------- card ---------- */
.tt-card {
    border-radius: var(--tt-r-xl);
    padding: 22px 24px 24px;
}
.tt-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 36px;
    margin-bottom: 16px;
}
.tt-card__titles { min-width: 0; }
.tt-card__title {
    font-size: 19px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -.01em;
}
.tt-card__sub {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
    font-size: 13px;
    color: var(--tt-label-2);
}
.tt-card__sub .tt-ico { width: 15px; height: 15px; }
.tt-card__tools { display: flex; align-items: center; gap: 8px; flex: none; }

/* ---------- buttons ---------- */
.tt-btn {
    --h: 42px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: var(--h);
    padding: 0 18px;
    border-radius: var(--tt-r-pill);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.005em;
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
    transition: transform var(--tt-dur-1) var(--tt-ease), background-color var(--tt-dur-2) var(--tt-ease),
                box-shadow var(--tt-dur-2) var(--tt-ease), opacity var(--tt-dur-2) var(--tt-ease), color var(--tt-dur-2) var(--tt-ease);
}
.tt-btn .tt-ico { width: 18px; height: 18px; stroke-width: 2; }
.tt-btn:active:not(:disabled) { transform: scale(.965); }
.tt-btn:disabled { opacity: .38; }
.tt-btn--sm { --h: 34px; padding: 0 14px; font-size: 14px; gap: 6px; }
.tt-btn--sm .tt-ico { width: 16px; height: 16px; }
.tt-btn--lg { --h: 50px; padding: 0 22px; font-size: 16px; }
.tt-btn--block { display: flex; width: 100%; }

.tt-btn--primary {
    color: var(--tt-accent-ink);
    background: linear-gradient(180deg, color-mix(in srgb, var(--tt-accent) 88%, #fff) 0%, var(--tt-accent) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), var(--tt-shadow-btn);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .tt-btn--primary { background: var(--tt-accent); }
}
.tt-btn--primary:disabled { box-shadow: none; }
.tt-btn--tinted { color: var(--tt-accent); background: var(--tt-accent-soft); }
.tt-btn--gray { color: var(--tt-label); background: var(--tt-fill); }
.tt-btn--plain { color: var(--tt-accent); background: transparent; padding: 0 10px; }
.tt-btn--danger {
    color: #fff;
    background: var(--tt-red);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 18px rgba(255, 59, 48, .26);
}
@media (hover: hover) {
    .tt-btn--primary:hover:not(:disabled) { filter: brightness(1.06); }
    .tt-btn--tinted:hover:not(:disabled) { background: var(--tt-accent-soft-2); }
    .tt-btn--gray:hover:not(:disabled) { background: var(--tt-fill-3); }
    .tt-btn--plain:hover:not(:disabled) { background: var(--tt-accent-soft); }
}
.tt-btn.is-busy { pointer-events: none; }
.tt-btn.is-busy > * { opacity: 0; }
.tt-btn.is-busy::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2.2px solid currentColor;
    border-right-color: transparent;
    animation: tt-spin .7s linear infinite;
}
@keyframes tt-spin { to { transform: rotate(360deg); } }

.tt-iconbtn {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 50%;
    color: var(--tt-label);
    transition: background-color var(--tt-dur-2) var(--tt-ease), transform var(--tt-dur-1) var(--tt-ease), color var(--tt-dur-2);
}
.tt-iconbtn .tt-ico { width: 21px; height: 21px; }
.tt-iconbtn:active { transform: scale(.9); background: var(--tt-fill); }
.tt-iconbtn--sm { width: 32px; height: 32px; }
.tt-iconbtn--sm .tt-ico { width: 18px; height: 18px; }
.tt-iconbtn--accent { color: var(--tt-accent); }
@media (hover: hover) {
    .tt-iconbtn:hover { background: var(--tt-fill); }
}

.tt-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--tt-accent);
    font-size: 14px;
    font-weight: 500;
    padding: 6px 4px;
    border-radius: 8px;
}
@media (hover: hover) { .tt-link:hover { text-decoration: underline; text-underline-offset: 3px; } }

/* ---------- chips & tags ---------- */
.tt-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border-radius: var(--tt-r-pill);
    background: var(--tt-fill-2);
    color: var(--tt-label-2);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}
.tt-chip .tt-ico { width: 15px; height: 15px; }
.tt-chip--btn { transition: background-color var(--tt-dur-2), color var(--tt-dur-2); font-variant-numeric: tabular-nums; }
.tt-chip--btn[aria-expanded="true"] { background: var(--tt-accent-soft); color: var(--tt-accent); }
.tt-chip--btn[aria-expanded="true"] .tt-chip__chev { transform: rotate(180deg); }
.tt-chip__chev { transition: transform var(--tt-dur-2) var(--tt-ease); }
.tt-chip--btn.is-custom { color: var(--tt-accent); }
@media (hover: hover) { .tt-chip--btn:hover { background: var(--tt-fill); } }

.tt-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 6px;
    background: var(--tt-accent-soft);
    color: var(--tt-accent);
    font-size: 11px;
    font-weight: 700;
    font-style: normal;
    vertical-align: 1px;
}

/* ---------- inputs ---------- */
.tt-input {
    width: 100%;
    height: 50px;
    padding: 0 16px;
    border-radius: var(--tt-r-md);
    border: 1px solid var(--tt-input-border);
    background: var(--tt-input);
    font-size: 16px;
    color: var(--tt-label);
    transition: border-color var(--tt-dur-2), box-shadow var(--tt-dur-2), background-color var(--tt-dur-2);
    -webkit-appearance: none;
    appearance: none;
}
.tt-input::placeholder, .tt-secret__input::placeholder, .tt-frow__input::placeholder, .tt-search input::placeholder { color: var(--tt-label-3); }
.tt-input:focus { border-color: var(--tt-accent); box-shadow: 0 0 0 4px var(--tt-focus); }
.tt-input:focus-visible, .tt-secret__input:focus-visible, .tt-frow__input:focus-visible,
.tt-mini__input:focus-visible, .tt-search input:focus-visible, .tt-select select:focus-visible { outline: 2px solid transparent; outline-offset: 0; }
.tt-frow:focus-within { background: var(--tt-fill-2); }
.tt-select:focus-within { color: var(--tt-accent); }
.tt-input.is-invalid { border-color: var(--tt-red); box-shadow: 0 0 0 4px rgba(255, 59, 48, .16); }
.tt-textarea { height: auto; min-height: 120px; padding: 12px 14px; line-height: 1.55; resize: vertical; font-size: 14px; }

.tt-pw { position: relative; }
.tt-pw + .tt-pw, .tt-meter + .tt-pw { margin-top: 10px; }
.tt-pw__input { padding-right: 52px; }
.tt-pw__eye {
    position: absolute;
    top: 50%;
    right: 6px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    border-radius: 50%;
    color: var(--tt-label-3);
    transition: color var(--tt-dur-2), background-color var(--tt-dur-2);
}
.tt-pw__eye[aria-pressed="true"] { color: var(--tt-accent); }
@media (hover: hover) { .tt-pw__eye:hover { background: var(--tt-fill-2); color: var(--tt-label-2); } }

.tt-form__err {
    min-height: 0;
    margin-top: 8px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--tt-red);
}
.tt-form__err:empty { display: none; }
.tt-form__note { margin-top: 10px; font-size: 13px; color: var(--tt-label-2); }
.tt-form__note:empty { display: none; }
.tt-form__hint { margin: 8px 4px 0; font-size: 13px; color: var(--tt-label-2); }
.tt-form__hint:empty { display: none; }
.tt-form__hint[data-tone="error"] { color: var(--tt-red); }
.tt-form__hint[data-tone="ok"] { color: var(--tt-green); }

.is-shake { animation: tt-shake .42s var(--tt-ease); }
@keyframes tt-shake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(3px); }
    30%, 50%, 70% { transform: translateX(-6px); }
    40%, 60% { transform: translateX(6px); }
}

/* strength meter */
.tt-meter {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
    padding: 0 2px;
}
.tt-meter i {
    flex: 1;
    height: 4px;
    border-radius: 4px;
    background: var(--tt-fill);
    transition: background-color var(--tt-dur-3) var(--tt-ease);
}
.tt-meter span {
    flex: none;
    min-width: 3.5em;
    margin-left: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--tt-label-3);
    text-align: right;
}
.tt-meter[data-score="1"] i:nth-child(-n+1) { background: var(--tt-red); }
.tt-meter[data-score="2"] i:nth-child(-n+2) { background: var(--tt-orange); }
.tt-meter[data-score="3"] i:nth-child(-n+3) { background: var(--tt-green); }
.tt-meter[data-score="4"] i { background: var(--tt-green); }
.tt-meter[data-score="1"] span { color: var(--tt-red); }
.tt-meter[data-score="2"] span { color: var(--tt-orange); }
.tt-meter[data-score="3"] span, .tt-meter[data-score="4"] span { color: var(--tt-green); }

/* checkbox */
.tt-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--tt-label-2);
    cursor: pointer;
}
.tt-check input { position: absolute; opacity: 0; pointer-events: none; }
.tt-check > i {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex: none;
    margin-top: -1px;
    border-radius: 7px;
    border: 1.6px solid var(--tt-label-3);
    color: transparent;
    transition: background-color var(--tt-dur-2), border-color var(--tt-dur-2), color var(--tt-dur-2), transform var(--tt-dur-1);
}
.tt-check > i .tt-ico { width: 15px; height: 15px; stroke-width: 2.6; }
.tt-check input:checked + i { background: var(--tt-accent); border-color: var(--tt-accent); color: #fff; }
.tt-check input:focus-visible + i { box-shadow: 0 0 0 4px var(--tt-focus); }
.tt-check:active > i { transform: scale(.9); }

/* iOS switch */
.tt-switch { position: relative; display: inline-block; width: 51px; height: 31px; flex: none; }
.tt-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.tt-switch i {
    position: absolute;
    inset: 0;
    border-radius: 31px;
    background: var(--tt-fill-3);
    transition: background-color var(--tt-dur-3) var(--tt-ease);
}
.tt-switch i::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .16), 0 3px 1px rgba(0, 0, 0, .06);
    transition: transform var(--tt-dur-3) var(--tt-ease-spring), width var(--tt-dur-2) var(--tt-ease);
}
.tt-switch input:checked + i { background: var(--tt-green); }
.tt-switch input:checked + i::after { transform: translateX(20px); }
.tt-switch input:active + i::after { width: 31px; }
.tt-switch input:checked:active + i::after { transform: translateX(16px); }
.tt-switch input:focus-visible + i { box-shadow: 0 0 0 4px var(--tt-focus); }

/* segmented control */
.tt-seg {
    position: relative;
    display: inline-flex;
    padding: 2px;
    border-radius: 10px;
    background: var(--tt-fill);
    gap: 0;
}
.tt-seg > button {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: 30px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--tt-label);
    white-space: nowrap;
    transition: background-color var(--tt-dur-2) var(--tt-ease), box-shadow var(--tt-dur-2) var(--tt-ease), color var(--tt-dur-2);
}
.tt-seg > button + button::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: var(--tt-sep-strong);
    transition: opacity var(--tt-dur-2);
}
.tt-seg > button[aria-checked="true"] {
    background: var(--tt-surface-solid);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .1), 0 1px 1px rgba(0, 0, 0, .04);
}
:root[data-theme="dark"] .tt-seg > button[aria-checked="true"] { background: #636366; }
.tt-seg > button[aria-checked="true"]::before,
.tt-seg > button[aria-checked="true"] + button::before { opacity: 0; }
.tt-seg--sm > button { height: 28px; padding: 0 10px; font-size: 12.5px; }
.tt-seg--block { display: flex; width: 100%; }
.tt-seg--block > button { height: 34px; font-size: 14px; }

/* native select dressed as an iOS value */
.tt-select {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--tt-label-2);
}
.tt-select select {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    background: transparent;
    padding: 6px 22px 6px 6px;
    font-size: 15px;
    color: var(--tt-label-2);
    text-align: right;
    text-align-last: right;
    cursor: pointer;
    direction: ltr;
}
.tt-select .tt-ico { position: absolute; right: 0; width: 16px; height: 16px; pointer-events: none; }

/* ---------- avatar ---------- */
.tt-avatar {
    --h: 214;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: 12px;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.01em;
    text-transform: uppercase;
    background: linear-gradient(145deg, hsl(var(--h) 88% 64%), hsl(calc(var(--h) + 18) 76% 48%));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), inset 0 -1px 0 rgba(0, 0, 0, .08), 0 2px 6px hsl(var(--h) 60% 40% / .22);
    overflow: hidden;
}
.tt-avatar[data-brand] { background: var(--brand); }
.tt-avatar--lg { width: 56px; height: 56px; border-radius: 16px; font-size: 24px; }
.tt-avatar--sm { width: 32px; height: 32px; border-radius: 9px; font-size: 14px; }

/* ---------- digits & ring ---------- */
.tt-digits {
    display: inline-flex;
    align-items: baseline;
    font-family: var(--tt-font-digits);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    font-weight: 600;
    letter-spacing: .015em;
    white-space: nowrap;
    line-height: 1;
}
.tt-digits .d {
    position: relative;
    display: inline-block;
    min-width: .62em;
    text-align: center;
    overflow: hidden;
    vertical-align: bottom;
}
.tt-digits .d > i {
    display: block;
    font-style: normal;
}
.tt-digits .d.is-roll > i { animation: tt-roll-in var(--tt-dur-3) var(--tt-ease-out) both; animation-delay: var(--delay, 0ms); }
.tt-digits .d.is-roll > i + i {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    animation-name: tt-roll-out;
}
@keyframes tt-roll-in { from { transform: translateY(70%); opacity: 0; filter: blur(2px); } to { transform: none; opacity: 1; filter: none; } }
@keyframes tt-roll-out { from { transform: none; opacity: 1; } to { transform: translateY(-70%); opacity: 0; filter: blur(2px); } }
.tt-digits .sp { display: inline-block; width: .3em; }
.tt-digits.is-masked { letter-spacing: .1em; color: var(--tt-label-3); }
.tt-digits.is-placeholder { color: var(--tt-label-4); }
.tt-digits--hero { font-size: 60px; font-weight: 600; letter-spacing: .02em; }

.tt-ring {
    --p: 0;
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: none;
    color: var(--tt-accent);
}
.tt-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.tt-ring__track { fill: none; stroke: var(--tt-fill); stroke-width: 3.2; }
.tt-ring__bar {
    fill: none;
    stroke: currentColor;
    stroke-width: 3.2;
    stroke-linecap: round;
    stroke-dasharray: 100 100;
    stroke-dashoffset: 0;
    transition: stroke var(--tt-dur-3) var(--tt-ease);
}
.tt-ring b {
    position: relative;
    font-family: var(--tt-font-digits);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: var(--tt-label-2);
}
.tt-ring.is-warn { color: var(--tt-orange); }
.tt-ring.is-alert { color: var(--tt-red); }
.tt-ring.is-alert b { color: var(--tt-red); }
.tt-ring.is-idle .tt-ring__bar { opacity: 0; }
.tt-ring--md { width: 40px; height: 40px; }
.tt-ring--md b { font-size: 13px; }
.tt-ring--sm { width: 28px; height: 28px; }
.tt-ring--sm b { font-size: 10.5px; }
.tt-ring--sm .tt-ring__track, .tt-ring--sm .tt-ring__bar { stroke-width: 3.6; }

/* ---------- toasts ---------- */
.tt-toasts {
    position: fixed;
    left: 50%;
    top: calc(var(--tt-topbar-h) + 26px + var(--tt-safe-t));
    z-index: 900;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: max-content;
    max-width: calc(100vw - 32px);
    transform: translateX(-50%);
    pointer-events: none;
}
.tt-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    max-width: 100%;
    padding: 8px 10px 8px 14px;
    border-radius: var(--tt-r-pill);
    background: var(--tt-glass-sheet);
    -webkit-backdrop-filter: blur(var(--tt-blur-strong)) saturate(190%);
    backdrop-filter: blur(var(--tt-blur-strong)) saturate(190%);
    border: 1px solid var(--tt-glass-border);
    box-shadow: inset 0 1px 0 var(--tt-glass-hi), 0 0 0 .5px var(--tt-glass-edge), var(--tt-shadow-3);
    color: var(--tt-label);
    font-size: 14.5px;
    font-weight: 600;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(-10px) scale(.96);
    transition: opacity var(--tt-dur-2) var(--tt-ease), transform var(--tt-dur-3) var(--tt-ease-spring);
}
.tt-toast.is-in { opacity: 1; transform: none; }
.tt-toast.is-out { opacity: 0; transform: translateY(-6px) scale(.98); transition-duration: var(--tt-dur-2); }
.tt-toast > .tt-ico { width: 21px; height: 21px; color: var(--tt-green); stroke-width: 2; }
.tt-toast[data-type="error"] > .tt-ico { color: var(--tt-red); }
.tt-toast[data-type="info"] > .tt-ico { color: var(--tt-accent); }
.tt-toast__text { padding-right: 6px; line-height: 1.35; }
.tt-toast__action {
    flex: none;
    height: 30px;
    padding: 0 12px;
    border-radius: var(--tt-r-pill);
    background: var(--tt-accent-soft);
    color: var(--tt-accent);
    font-size: 13.5px;
    font-weight: 700;
}

/* ---------- callouts & banners ---------- */
.tt-callout {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--tt-r-md);
    background: var(--tt-fill-2);
    color: var(--tt-label-2);
    font-size: 13.5px;
    line-height: 1.5;
}
.tt-callout .tt-ico { width: 18px; height: 18px; margin-top: 1px; }
.tt-callout--warn { background: rgba(255, 149, 0, .12); color: color-mix(in srgb, var(--tt-orange) 70%, var(--tt-label)); }
.tt-callout--warn .tt-ico { color: var(--tt-orange); }

.tt-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    padding: 14px 16px;
    border-radius: var(--tt-r-lg);
    background: var(--tt-accent-soft);
}
.tt-banner__ico {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 11px;
    background: var(--tt-accent);
    color: #fff;
}
.tt-banner__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--tt-label-2); }
.tt-banner__text b { font-size: 14.5px; color: var(--tt-label); }
.tt-banner__btns { display: flex; gap: 4px; flex: none; }

/* ---------- grouped list (iOS settings) ---------- */
.tt-group + .tt-group { margin-top: 26px; }
.tt-group__title {
    margin: 0 16px 7px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--tt-label-2);
}
.tt-group__card {
    overflow: hidden;
    border-radius: var(--tt-r-lg);
    background: var(--tt-surface);
    box-shadow: 0 0 0 .5px var(--tt-glass-edge), var(--tt-shadow-1);
}
.tt-group__foot { margin: 8px 16px 0; font-size: 12.5px; line-height: 1.5; color: var(--tt-label-2); }
.tt-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    padding: 8px 16px;
    text-align: left;
    color: var(--tt-label);
    font-size: 15.5px;
    transition: background-color var(--tt-dur-1);
}
.tt-row + .tt-row::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 57px;
    height: .5px;
    background: var(--tt-sep-strong);
}
.tt-row__ico {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 8px;
    background: var(--c, var(--tt-gray));
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}
.tt-row__ico .tt-ico { width: 18px; height: 18px; stroke-width: 2.1; }
.tt-row__label { flex: 1; min-width: 0; }
.tt-row__value {
    flex: none;
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--tt-label-2);
    font-size: 14.5px;
}
.tt-row__chev { width: 17px; height: 17px; color: var(--tt-label-3); stroke-width: 2.4; }
.tt-row--link { cursor: pointer; }
.tt-row--link:active { background: var(--tt-fill-2); }
@media (hover: hover) { .tt-row--link:hover { background: var(--tt-fill-2); } }
.tt-row--danger .tt-row__label { color: var(--tt-red); }
.tt-row--stack { flex-wrap: wrap; }

/* ---------- menu list in sheets ---------- */
.tt-menu {
    overflow: hidden;
    border-radius: var(--tt-r-lg);
    background: var(--tt-surface-raised);
    box-shadow: 0 0 0 .5px var(--tt-glass-edge);
}
.tt-menu__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 64px;
    padding: 10px 16px;
    text-align: left;
    transition: background-color var(--tt-dur-1);
}
.tt-menu__item + .tt-menu__item::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 60px;
    height: .5px;
    background: var(--tt-sep-strong);
}
.tt-menu--radio .tt-menu__item + .tt-menu__item::before { left: 16px; }
.tt-menu__item:active { background: var(--tt-fill-2); }
@media (hover: hover) { .tt-menu__item:hover { background: var(--tt-fill-2); } }
.tt-menu__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tt-menu__text b { font-size: 15.5px; font-weight: 600; }
.tt-menu__text small { font-size: 13px; color: var(--tt-label-2); }
.tt-menu__tick { width: 20px; height: 20px; color: var(--tt-accent); stroke-width: 2.4; opacity: 0; }
.tt-menu__item[aria-checked="true"] .tt-menu__tick { opacity: 1; }

/* ---------- form card rows (sheets) ---------- */
.tt-formcard {
    overflow: hidden;
    border-radius: var(--tt-r-lg);
    background: var(--tt-surface-raised);
    box-shadow: 0 0 0 .5px var(--tt-glass-edge);
}
.tt-formcard + .tt-formcard, .tt-form__hint + .tt-formcard, .tt-preview + .tt-formcard,
.tt-disclosure + .tt-formcard, .tt-formcard + .tt-disclosure { margin-top: 14px; }
.tt-frow {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 0 8px 0 16px;
}
.tt-frow + .tt-frow::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 16px;
    height: .5px;
    background: var(--tt-sep-strong);
}
.tt-frow__label { flex: none; width: 4.6em; font-size: 15.5px; color: var(--tt-label); }
.tt-frow__input {
    flex: 1;
    min-width: 0;
    height: 50px;
    border: 0;
    background: transparent;
    font-size: 16px;
    color: var(--tt-label);
}
.tt-frow__input.tt-mono { font-size: 15px; letter-spacing: .04em; }
.tt-frow__value { flex: 1; min-width: 0; font-size: 15px; color: var(--tt-label-2); overflow-wrap: anywhere; padding: 14px 0; }
.tt-frow--seg { justify-content: space-between; padding-right: 10px; min-height: 52px; }
.tt-frow--seg .tt-seg { flex: none; }
.tt-frow--kv { padding-right: 8px; }
.tt-frow--secret { padding-right: 8px; }
.tt-frow .tt-switch { margin-left: auto; margin-right: 8px; }

.tt-disclosure summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 4px;
    list-style: none;
    cursor: pointer;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--tt-label);
    border-radius: 10px;
}
.tt-disclosure summary::-webkit-details-marker { display: none; }
.tt-disclosure summary small { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--tt-label-3); font-variant-numeric: tabular-nums; }
.tt-disclosure summary .tt-ico { width: 17px; height: 17px; color: var(--tt-label-3); transition: transform var(--tt-dur-2) var(--tt-ease); }
.tt-disclosure[open] summary .tt-ico { transform: rotate(180deg); }
.tt-disclosure .tt-formcard { margin-top: 2px; }

/* ---------- empty / lock states ---------- */
.tt-empty, .tt-lock {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 28px 8px 12px;
}
.tt-empty__art, .tt-lock__art {
    position: relative;
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    margin-bottom: 18px;
    border-radius: 26px;
    color: var(--tt-accent);
    background: linear-gradient(160deg, var(--tt-accent-soft-2), var(--tt-accent-soft));
    box-shadow: inset 0 1px 0 var(--tt-glass-hi);
}
.tt-empty__art .tt-ico, .tt-lock__art .tt-ico { width: 40px; height: 40px; stroke-width: 1.7; }
.tt-empty__halo {
    position: absolute;
    inset: -14px;
    border-radius: 34px;
    border: 1px solid var(--tt-accent-soft-2);
    opacity: .6;
}
.tt-empty__art--warn { color: var(--tt-orange); background: rgba(255, 149, 0, .14); }
.tt-empty__art--warn .tt-empty__halo { border-color: rgba(255, 149, 0, .22); }
.tt-empty__title, .tt-lock__title { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.tt-empty__text, .tt-lock__text {
    max-width: 360px;
    margin-top: 8px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--tt-label-2);
}
.tt-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.tt-empty__foot {
    max-width: 380px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: .5px solid var(--tt-sep);
    font-size: 13px;
    color: var(--tt-label-2);
}
.tt-empty__foot a { font-weight: 600; }

.tt-lock__form { width: 100%; max-width: 340px; margin-top: 22px; }
.tt-lock__form .tt-btn { margin-top: 14px; }
.tt-lock .tt-link { margin-top: 12px; }

/* skeleton */
.tt-skeleton { display: grid; gap: 12px; padding: 4px 0; }
.tt-skeleton span {
    display: block;
    height: 76px;
    border-radius: var(--tt-r-lg);
    background: linear-gradient(90deg, var(--tt-fill-2) 0%, var(--tt-fill) 40%, var(--tt-fill-2) 80%);
    background-size: 220% 100%;
    animation: tt-shimmer 1.3s linear infinite;
}
@keyframes tt-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }

/* search field */
.tt-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    height: 38px;
    border-radius: 12px;
    background: var(--tt-fill);
    color: var(--tt-label-3);
}
.tt-search .tt-ico { position: absolute; left: 10px; width: 18px; height: 18px; pointer-events: none; }
.tt-search input {
    width: 100%;
    height: 100%;
    padding: 0 12px 0 36px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    font-size: 15.5px;
    color: var(--tt-label);
    -webkit-appearance: none;
    appearance: none;
}
.tt-search input::-webkit-search-decoration { -webkit-appearance: none; }
.tt-search:focus-within { box-shadow: 0 0 0 3px var(--tt-focus); }

/* store line & sync state */
.tt-sync { margin-left: -4px; color: var(--tt-label-3); font-variant-numeric: tabular-nums; transition: color var(--tt-dur-2); }
.tt-sync:empty { display: none; }
.tt-sync[data-state="saving"] { color: var(--tt-label-2); }
.tt-sync[data-state="saved"] { color: var(--tt-green); }
.tt-sync[data-state="error"] { color: var(--tt-red); }
.tt-pane-head__sub[data-store-line-app] { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.tt-pane-head__sub[data-store-line-app] .tt-ico { width: 16px; height: 16px; }

/* fatal state */
.tt-fatal { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 44px 24px; text-align: center; grid-column: 1 / -1; }
.tt-fatal .tt-empty__art { margin-bottom: 4px; }
.tt-fatal .tt-btn { margin-top: 8px; }