/* 2FA Tool · layout (desktop workspace + mobile app shell) */

/* ---------- top bar ---------- */
.tt-topbar { position: relative; z-index: 60; }
.tt-topbar__inner { display: flex; align-items: center; gap: 6px; height: 100%; }
.tt-topbar__back {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
    height: 36px;
    padding: 0 12px 0 6px;
    border-radius: var(--tt-r-pill);
    color: var(--tt-label-2);
    font-size: 14px;
    font-weight: 500;
    transition: background-color var(--tt-dur-2), color var(--tt-dur-2);
}
.tt-topbar__back .tt-ico { width: 20px; height: 20px; stroke-width: 2.2; }
.tt-topbar__shop { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14em; }
.tt-topbar__brand { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 15.5px; font-weight: 650; letter-spacing: -.01em; }
.tt-topbar__title { white-space: nowrap; }
.tt-appicon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 9px;
    color: #fff;
    background: linear-gradient(150deg, #3f9bff 0%, #2f6bff 46%, #6a4cff 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 -1px 0 rgba(0, 0, 0, .12), 0 3px 10px rgba(47, 107, 255, .32);
}
.tt-appicon .tt-ico { width: 18px; height: 18px; stroke-width: 2.1; }
.tt-topbar__small {
    position: absolute;
    left: 50%;
    max-width: 52%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transform: translateX(-50%);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.01em;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--tt-dur-2) var(--tt-ease);
}
.tt-topbar__actions { display: flex; align-items: center; gap: 4px; margin-left: auto; flex: none; }
.tt-chip--store { margin-right: 6px; }
.tt-is-member .tt-chip--store { color: var(--tt-accent); background: var(--tt-accent-soft); }

/* ---------- desktop workspace ---------- */
@media (min-width: 900px) {
    body { padding: 0 24px; }

    .tt-topbar {
        position: sticky;
        top: 12px;
        max-width: 1180px;
        height: var(--tt-topbar-h);
        margin: 12px auto 0;
        padding: 0 10px 0 8px;
        border-radius: 19px;
        background: var(--tt-glass-bar);
        -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-1);
    }
    .tt-topbar__brand { padding-left: 14px; margin-left: 2px; border-left: 1px solid var(--tt-sep); height: 26px; }
    .tt-topbar__brand .tt-appicon { margin-left: 2px; }
    @media (hover: hover) { .tt-topbar__back:hover { background: var(--tt-fill-2); color: var(--tt-label); } }

    .tt-hero { max-width: 1180px; margin: 44px auto 26px; padding: 0 6px; }
    .tt-hero__title { font-size: 46px; line-height: 1.08; font-weight: 800; letter-spacing: -.03em; }
    .tt-hero__sub { max-width: 640px; margin-top: 12px; font-size: 16.5px; line-height: 1.6; color: var(--tt-label-2); }

    .tt-main {
        display: grid;
        grid-template-columns: minmax(400px, 452px) minmax(0, 1fr);
        gap: 24px;
        align-items: start;
        max-width: 1180px;
        margin: 0 auto;
        padding-bottom: 28px;
    }
    .tt-pane--settings { display: none; }
    .tt-tabbar { display: none; }

    .tt-footer {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 10px;
        max-width: 1180px;
        margin: 6px auto 0;
        padding: 18px 0 30px;
        font-size: 12.5px;
        color: var(--tt-label-3);
    }
    .tt-footer a { color: var(--tt-label-2); }
    .tt-footer__dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .7; }
}

@media (min-width: 900px) {
    .tt-pane--gen { position: sticky; top: var(--tt-gen-top, calc(12px + var(--tt-topbar-h) + 20px)); }
}

@media (min-width: 900px) and (max-width: 1099.98px) {
    .tt-chip--store [data-store-chip-text] { display: none; }
    .tt-chip--store { padding: 0 9px; }
    .tt-main { grid-template-columns: minmax(380px, 420px) minmax(0, 1fr); gap: 20px; }
}

/* ---------- mobile app shell ---------- */
@media (max-width: 899.98px) {
    .tt-topbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: calc(var(--tt-nav-h) + var(--tt-safe-t));
        padding: var(--tt-safe-t) calc(6px + var(--tt-safe-r)) 0 calc(2px + var(--tt-safe-l));
        background: transparent;
        transition: background-color var(--tt-dur-2) var(--tt-ease), box-shadow var(--tt-dur-2) var(--tt-ease);
    }
    .tt-topbar::before {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--tt-glass-bar);
        -webkit-backdrop-filter: blur(var(--tt-blur)) saturate(190%);
        backdrop-filter: blur(var(--tt-blur)) saturate(190%);
        box-shadow: 0 .5px 0 var(--tt-sep-strong);
        opacity: 0;
        transition: opacity var(--tt-dur-2) var(--tt-ease);
    }
    .tt-topbar[data-scrolled="1"]::before { opacity: 1; }
    .tt-topbar[data-scrolled="1"] .tt-topbar__small { opacity: 1; }
    .tt-topbar__inner { position: relative; }
    .tt-topbar__brand, .tt-chip--store { display: none; }
    .tt-topbar__back { color: var(--tt-accent); font-size: 16px; font-weight: 400; padding: 0 8px 0 2px; height: 40px; }
    .tt-topbar__back .tt-ico { width: 24px; height: 24px; stroke-width: 2.3; }
    .tt-topbar__shop { max-width: 7.5em; }
    .tt-topbar .tt-iconbtn { width: 40px; height: 40px; color: var(--tt-accent); }
    .tt-topbar .tt-iconbtn .tt-ico { width: 23px; height: 23px; stroke-width: 2; }
    .tt-topbar [data-for-tab] { display: none; }
    body[data-tab="gen"] .tt-topbar [data-for-tab="gen"],
    body[data-tab="vault"] .tt-topbar [data-for-tab="vault"] { display: inline-grid; }
    body:not([data-tab="vault"]) .tt-topbar [data-act="lock"] { display: none !important; }

    .tt-main {
        padding: calc(var(--tt-nav-h) + var(--tt-safe-t)) calc(16px + var(--tt-safe-r)) calc(var(--tt-tabbar-h) + 34px + var(--tt-safe-b)) calc(16px + var(--tt-safe-l));
        max-width: 640px;
        margin: 0 auto;
    }
    .tt-pane { display: none; }
    body[data-tab="gen"] .tt-pane--gen,
    body[data-tab="vault"] .tt-pane--vault,
    body[data-tab="settings"] .tt-pane--settings { display: block; }
    .tt-pane.is-entering { animation: tt-pane-in var(--tt-dur-3) var(--tt-ease-out) both; }

    .tt-pane-head { padding: 6px 4px 16px; }
    .tt-largetitle { font-size: 34px; line-height: 1.12; font-weight: 800; letter-spacing: -.025em; }
    .tt-pane-head__sub { margin-top: 4px; font-size: 15px; color: var(--tt-label-2); }
    .tt-pane-head__sub:empty { display: none; }

    .tt-card { padding: 18px 18px 20px; border-radius: 26px; }

    /* the vault list sits directly on the canvas like a native list */
    .tt-vault.tt-card--glass {
        padding: 0;
        background: none;
        border: 0;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    .tt-vault.tt-card--glass::before { display: none; }
    .tt-vault__head { display: none; }

    .tt-tabbar {
        position: fixed;
        left: 50%;
        bottom: calc(10px + var(--tt-safe-b));
        z-index: 70;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        width: min(calc(100% - 44px), 360px);
        height: var(--tt-tabbar-h);
        padding: 5px;
        border-radius: 32px;
        transform: translateX(-50%);
        background: var(--tt-glass-bar);
        -webkit-backdrop-filter: blur(var(--tt-blur-strong)) saturate(200%);
        backdrop-filter: blur(var(--tt-blur-strong)) saturate(200%);
        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), 0 12px 34px rgba(0, 0, 0, .14);
        transition: transform var(--tt-dur-3) var(--tt-ease), opacity var(--tt-dur-2);
    }
    .tt-tabbar__lens {
        position: absolute;
        top: 5px;
        bottom: 5px;
        left: 5px;
        width: calc((100% - 10px) / 3);
        border-radius: 27px;
        background: var(--tt-lens);
        transform: translateX(calc(var(--i, 0) * 100%));
        transition: transform var(--tt-dur-4) var(--tt-ease-spring);
    }
    body[data-tab="vault"] .tt-tabbar__lens { --i: 1; }
    body[data-tab="settings"] .tt-tabbar__lens { --i: 2; }
    .tt-tab {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1px;
        height: 100%;
        border-radius: 27px;
        color: var(--tt-label-2);
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: .01em;
        transition: color var(--tt-dur-2) var(--tt-ease);
    }
    .tt-tab .tt-ico { width: 25px; height: 25px; stroke-width: 1.9; transition: transform var(--tt-dur-2) var(--tt-ease-spring); }
    .tt-tab:active .tt-ico { transform: scale(.86); }
    .tt-tab[aria-current="page"] { color: var(--tt-accent); }
    .tt-tab[aria-current="page"] .tt-ico { stroke-width: 2.15; }
    body.tt-kb .tt-tabbar { transform: translate(-50%, calc(100% + 30px)); opacity: 0; pointer-events: none; }

    .tt-toasts { top: auto; bottom: calc(var(--tt-tabbar-h) + 22px + var(--tt-safe-b)); flex-direction: column-reverse; }
    .tt-toast { transform: translateY(12px) scale(.96); }
    .tt-toast.is-out { transform: translateY(8px) scale(.98); }
    body.tt-kb .tt-toasts { bottom: calc(16px + var(--tt-safe-b)); }

    .tt-settings__shop {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin: 26px auto 0;
        height: 46px;
        border-radius: var(--tt-r-pill);
        color: var(--tt-label-2);
        font-size: 15px;
        font-weight: 500;
    }
    .tt-settings__shop .tt-ico { width: 19px; height: 19px; }
}

@keyframes tt-pane-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }