/* 2FA Tool · base */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    background: var(--tt-bg);
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    font-family: var(--tt-font);
    font-size: 15px;
    line-height: 1.5;
    color: var(--tt-label);
    background: transparent;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1;
    transition: background-color var(--tt-dur-3) var(--tt-ease), color var(--tt-dur-3) var(--tt-ease);
}

html.tt-noscroll, html.tt-noscroll body { overflow: hidden; }

button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; touch-action: manipulation; }
button:disabled { cursor: default; }
a { color: var(--tt-accent); text-decoration: none; }
img, svg { display: block; }
h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }
::selection { background: var(--tt-accent-soft-2); }

:focus { outline: none; }
:focus-visible { outline: 2.5px solid var(--tt-accent); outline-offset: 2px; border-radius: 10px; }

.tt-ico {
    width: 1.25em;
    height: 1.25em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.85;
    overflow: visible;
}

.tt-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.tt-sr {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.tt-skip {
    position: fixed;
    top: -60px;
    left: 16px;
    z-index: 1000;
    padding: 10px 16px;
    border-radius: var(--tt-r-pill);
    background: var(--tt-accent);
    color: var(--tt-accent-ink);
    font-weight: 600;
    transition: top var(--tt-dur-2) var(--tt-ease);
}
.tt-skip:focus { top: calc(12px + var(--tt-safe-t)); }

.tt-mono { font-family: var(--tt-font-mono); letter-spacing: .02em; }

/* ambient backdrop: drifting color fields + fine grain, kept on the compositor */
.tt-backdrop {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background: var(--tt-bg);
    transition: background-color var(--tt-dur-3) var(--tt-ease);
}
.tt-backdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: var(--tt-noise-opacity);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: 160px 160px;
    mix-blend-mode: overlay;
}
.tt-backdrop i {
    position: absolute;
    width: 72vmax;
    height: 72vmax;
    border-radius: 50%;
    will-change: transform;
}
.tt-backdrop i:nth-child(1) {
    top: -26vmax;
    left: -16vmax;
    background: radial-gradient(closest-side, var(--tt-mesh-1), transparent 72%);
    animation: tt-drift-a 38s ease-in-out infinite alternate;
}
.tt-backdrop i:nth-child(2) {
    top: -12vmax;
    right: -28vmax;
    background: radial-gradient(closest-side, var(--tt-mesh-2), transparent 72%);
    animation: tt-drift-b 46s ease-in-out infinite alternate;
}
.tt-backdrop i:nth-child(3) {
    bottom: -34vmax;
    left: 6vmax;
    background: radial-gradient(closest-side, var(--tt-mesh-3), transparent 72%);
    animation: tt-drift-c 54s ease-in-out infinite alternate;
}
@keyframes tt-drift-a { to { transform: translate3d(14vmax, 10vmax, 0) scale(1.08); } }
@keyframes tt-drift-b { to { transform: translate3d(-12vmax, 14vmax, 0) scale(.92); } }
@keyframes tt-drift-c { to { transform: translate3d(10vmax, -12vmax, 0) scale(1.1); } }

/* admin-chosen wallpaper replaces the drifting color fields */
.tt-wall {
    position: absolute;
    inset: calc(var(--tt-wall-blur, 0px) * -2);
    display: none;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    filter: blur(var(--tt-wall-blur, 0px));
}
.tt-wall::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--tt-wall-veil);
    opacity: var(--tt-wall-dim, .3);
    transition: background-color var(--tt-dur-3) var(--tt-ease), opacity var(--tt-dur-3) var(--tt-ease);
}
:root[data-theme="dark"] .tt-wall::after { opacity: min(calc(var(--tt-wall-dim, .3) + .2), .92); }

@media (min-width: 900px) {
    .tt-backdrop.has-wall-desk .tt-wall { display: block; background-image: var(--tt-wall-desk); }
    .tt-backdrop.has-wall-desk > i { display: none; }
    .tt-wall-desk .tt-hero__title, .tt-wall-desk .tt-hero__sub, .tt-wall-desk .tt-footer { text-shadow: var(--tt-wall-shadow); }
    .tt-wall-desk .tt-hero__sub, .tt-wall-desk .tt-footer, .tt-wall-desk .tt-footer a { color: var(--tt-label); }
    .tt-wall-desk .tt-hero__sub { opacity: .86; }
}
@media (max-width: 899.98px) {
    .tt-backdrop.has-wall-mob .tt-wall { display: block; background-image: var(--tt-wall-mob); }
    .tt-backdrop.has-wall-mob > i { display: none; }
    .tt-wall-mob .tt-largetitle, .tt-wall-mob .tt-pane-head__sub, .tt-wall-mob .tt-group__title,
    .tt-wall-mob .tt-group__foot, .tt-wall-mob .tt-topbar:not([data-scrolled="1"]) .tt-topbar__back { text-shadow: var(--tt-wall-shadow); }
    .tt-wall-mob .tt-pane-head__sub, .tt-wall-mob .tt-group__title, .tt-wall-mob .tt-group__foot { color: var(--tt-label); opacity: .86; }
}

/* responsive visibility */
@media (min-width: 900px) {
    .tt-only-app { display: none !important; }
}
@media (max-width: 899.98px) {
    .tt-only-desk { display: none !important; }
    body { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .tt-backdrop i { animation: none; }
}

@media (prefers-reduced-transparency: reduce) {
    :root[data-theme] {
        --tt-glass: var(--tt-surface-solid);
        --tt-glass-2: var(--tt-surface-solid);
        --tt-glass-bar: var(--tt-surface-solid);
        --tt-glass-sheet: var(--tt-surface-solid);
    }
}

@media (forced-colors: active) {
    .tt-backdrop { display: none; }
}