/* TeamSpeak6 unified stylesheet v3 - one file for all pages */
:root {
    --bg:#0b1624;
    --bg2:#102033;
    --card:#122235;
    --card2:#15283d;
    --line:rgba(255,255,255,.09);
    --line2:rgba(255,255,255,.14);
    --text:#f7f8fb;
    --muted:#a9b4c7;
    --muted2:#7f8a9d;
    --main:#07457e;
    --main-light:#0b5fa8;
    --green:#35d07f;
    --danger:#ff6b6b;
    --shadow:0 30px 100px rgba(0,0,0,.32);
    --radius:28px;
    }

* {
    margin:0;
    padding:0;
    box-sizing:border-box
}

html {
    scroll-behavior:smooth;
    background:var(--bg)
}

body {
    min-height:100vh;
    font-family:Inter,Arial,sans-serif;
    background:var(--bg);
    color:var(--text);
    overflow-x:hidden;
    line-height:1.45;
    }

body:before {
    display:none;
    }

a {
    color:var(--main-light);
    text-decoration:none
}

a:hover {
    color:#8fc7ff
}

.page {
    min-height:100vh;
    display:grid;
    grid-template-rows:74px 1fr auto
}

.hex-bg {
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    opacity:.18;
    background-size:120px 138px;
    background-repeat:repeat;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='138' viewBox='0 0 120 138'%3E%3Cg fill='none' stroke='%231f4d7a' stroke-width='0.8'%3E%3Cpath d='M30 0 L60 17 L60 52 L30 69 L0 52 L0 17 Z'/%3E%3Cpath d='M90 0 L120 17 L120 52 L90 69 L60 52 L60 17 Z'/%3E%3Cpath d='M30 69 L60 86 L60 121 L30 138 L0 121 L0 86 Z'/%3E%3Cpath d='M90 69 L120 86 L120 121 L90 138 L60 121 L60 86 Z'/%3E%3C/g%3E%3C/svg%3E");
    }

.hex-bg::after {
    content:'';
    position:absolute;
    inset:0;
    background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.015) 0px,
      rgba(255,255,255,.015) 1px,
      transparent 1px,
      transparent 42px
    );
    opacity:.4;
    }

.navbar {
    position:sticky;
    top:0;
    height:74px;
    z-index:100;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 32px;
    border-bottom:1px solid var(--line);
    background:rgba(6,10,17,.78);
    backdrop-filter:blur(18px)
}

.nav-inner {
    width:100%;
    max-width:1220px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px
}

.logo {
    display:flex;
    align-items:center;
    gap:13px;
    color:white;
    text-decoration:none;
    min-width:max-content
}

.logo-mark,.settings-head-icon {
    width:44px;
    height:44px;
    border-radius:15px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,var(--main),var(--main-light));
    box-shadow:0 0 40px rgba(7,69,126,.32);
    color:#101010;
    font-weight:900
}

.site-logo {
    width:44px;
    height:44px;
    object-fit:contain
}

.logo-text h2 {
    font-size:23px;
    font-weight:900;
    letter-spacing:-.8px;
    line-height:1
}

.logo-text p {
    font-size:10px;
    color:#98a2b3;
    letter-spacing:4px;
    margin-top:5px;
    font-weight:800
}

.nav-links {
    display:flex;
    gap:8px;
    align-items:center;
    padding:7px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.035);
    border-radius:999px
}

.nav-links a,.signin {
    color:#d0d5dd;
    text-decoration:none;
    font-size:14px;
    font-weight:800
}

.nav-links a {
    padding:10px 16px;
    border-radius:999px
}

.nav-links a:hover {
    background:rgba(255,255,255,.07);
    color:#fff
}

.nav-right {
    display:flex;
    gap:16px;
    align-items:center
}

.started-btn,.primary-btn {
    background:var(--main);
    color:#fff;
    text-decoration:none;
    font-weight:900;
    box-shadow:0 18px 50px rgba(7,69,126,.24)
}

.started-btn {
    padding:13px 22px;
    border-radius:16px;
    font-size:14px
}

.started-btn:hover,.primary-btn:hover,.login-btn:hover,.register-btn:hover,.form-btn:hover {
    color:#fff;
    filter:brightness(1.05);
    transform:translateY(-1px)
}

/* Home */
.hero {
    padding:64px 32px 80px
}

.hero-inner {
    max-width:1220px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1fr 480px;
    gap:64px;
    align-items:center
}

.badge {
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 15px;
    border-radius:999px;
    background:rgba(255,255,255,.05);
    border:1px solid var(--line);
    color:#d8dee9;
    font-weight:800;
    font-size:13px;
    margin-bottom:25px
}

.badge-dot {
    width:9px;
    height:9px;
    border-radius:50%;
    background:var(--green);
    box-shadow:0 0 15px var(--green)
}

.hero h1 {
    font-size:72px;
    line-height:.98;
    letter-spacing:-4px;
    font-weight:900;
    max-width:800px
}

.gradient {
    background:linear-gradient(90deg,var(--main-light),var(--main),#8fc7ff);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent
}

.hero p {
    margin-top:26px;
    max-width:690px;
    color:var(--muted);
    font-size:18px;
    line-height:1.75
}

.hero-buttons {
    display:flex;
    gap:16px;
    margin-top:34px
}

.primary-btn,.secondary-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:17px 30px;
    border-radius:18px;
    font-size:15px
}

.secondary-btn {
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.1);
    color:#fff;
    text-decoration:none;
    font-weight:800
}

.stats {
    display:flex;
    gap:16px;
    margin-top:36px
}

.stat-card {
    width:160px;
    padding:20px;
    border-radius:22px;
    background:rgba(255,255,255,.04);
    border:1px solid var(--line)
}

.stat-card h3 {
    font-size:24px
}

.stat-card p {
    margin-top:7px;
    font-size:13px;
    color:#8e99aa
}

.panel-card {
    position:relative;
    padding:24px;
    border-radius:34px;
    background:rgba(10,16,28,.86);
    border:1px solid var(--line);
    box-shadow:0 0 120px rgba(7,69,126,.18);
    backdrop-filter:blur(18px)
}

.panel-card:before {
    content:"";
    position:absolute;
    inset:-1px;
    border-radius:34px;
    padding:1px;
    background:linear-gradient(135deg,rgba(7,69,126,.70),rgba(255,255,255,.08),rgba(7,69,126,.20));
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    pointer-events:none
}

.panel-top {
    display:flex;
    justify-content:space-between;
    gap:18px;
    align-items:flex-start
}

.panel-top small,.record-box small {
    color:#8b95a7;
    font-weight:800
}

.panel-top h3 {
    margin-top:6px;
    font-size:26px
}

.ready {
    padding:9px 13px;
    border-radius:999px;
    background:rgba(53,208,127,.12);
    color:var(--green);
    font-size:13px;
    font-weight:900
}

.input-preview {
    margin-top:26px;
    padding:20px;
    border-radius:20px;
    background:#070b12;
    border:1px solid var(--line);
    font-size:20px
}

.input-preview strong {
    color:#8fc7ff
}

.record-box {
    margin-top:14px;
    padding:18px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:rgba(255,255,255,.04);
    border:1px solid var(--line)
}

.record-box strong {
    display:block;
    margin-top:5px
}

.record-box span {
    font-size:12px;
    color:#111;
    background:var(--main-light);
    font-weight:900;
    padding:8px 10px;
    border-radius:999px
}

.terminal-card {
    margin-top:16px;
    padding:18px;
    border-radius:18px;
    background:#020409;
    border:1px solid var(--line);
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    color:#98a2b3;
    line-height:1.8
}

.terminal-card .ok {
    color:var(--green)
}

.section {
    max-width:1220px;
    margin:0 auto;
    padding:70px 32px
}

.section-head {
    text-align:center;
    margin-bottom:34px
}

.section-head span {
    display:inline-flex;
    padding:9px 14px;
    border-radius:999px;
    background:rgba(7,69,126,.12);
    border:1px solid rgba(7,69,126,.22);
    color:var(--main-light);
    font-weight:900;
    text-transform:uppercase;
    font-size:12px;
    letter-spacing:1px
}

.section-head h2 {
    margin:18px auto 0;
    max-width:760px;
    font-size:43px;
    line-height:1.08;
    letter-spacing:-1.5px
}

.feature-grid,.steps,.price-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px
}

.feature-card,.steps div,.price-card,.settings-card,.login-security-card,.session-card,.api-card {
    background:rgba(255,255,255,.045);
    border:1px solid var(--line);
    border-radius:28px;
    padding:30px;
    box-shadow:var(--shadow)
}

.feature-card i {
    width:52px;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:17px;
    background:rgba(7,69,126,.13);
    color:var(--main-light);
    font-size:22px;
    margin-bottom:20px
}

.feature-card h3,.steps h3,.price-card h3 {
    font-size:22px
}

.feature-card p,.steps p,.price-card p {
    margin-top:12px;
    color:var(--muted);
    line-height:1.7
}

.steps b {
    color:var(--main-light);
    font-size:15px
}

.price-grid {
    grid-template-columns:repeat(2,minmax(0,390px));
    justify-content:center
}

.price-card {
    position:relative
}

.price-card.featured {
    border-color:rgba(7,69,126,.55);
    box-shadow:0 0 80px rgba(7,69,126,.14)
}

.price-card em {
    position:absolute;
    right:22px;
    top:22px;
    padding:7px 11px;
    border-radius:999px;
    background:rgba(7,69,126,.14);
    color:var(--main-light);
    font-size:11px;
    font-weight:900;
    font-style:normal
}

.price-card strong {
    display:block;
    font-size:50px;
    margin:18px 0;
    letter-spacing:-2px
}

.price-card a {
    display:flex;
    justify-content:center;
    margin-top:24px;
    padding:15px;
    border-radius:16px;
    background:#fff;
    color:#111;
    text-decoration:none;
    font-weight:900
}

/* Auth pages */
.login-page,.register-page,.forgot-page,.reset-page {
    display:flex;
    align-items:center;
    justify-content:center;
    padding:58px 20px
}

.settings-page {
    padding:58px 20px
}

.login-wrapper,.register-wrapper,.forgot-wrapper,.reset-wrapper {
    width:100%;
    max-width:520px;
    margin:0 auto
}

.settings-wrap {
    width:100%;
    max-width:1120px;
    margin:0 auto
}

.login-card,.register-card,.forgot-card,.reset-card {
    position:relative;
    width:100%;
    padding:42px 38px 34px;
    border-radius:30px;
    background:rgba(10,16,28,.88);
    border:1px solid var(--line);
    box-shadow:0 30px 90px rgba(0,0,0,.28),0 0 120px rgba(7,69,126,.08);
    backdrop-filter:blur(18px)
}

.login-card:before,.register-card:before,.forgot-card:before,.reset-card:before {
    content:"";
    position:absolute;
    inset:-1px;
    border-radius:30px;
    padding:1px;
    background:linear-gradient(135deg,rgba(7,69,126,.52),rgba(255,255,255,.07),rgba(7,69,126,.12));
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    pointer-events:none
}

.login-icon,.register-icon,.forgot-icon,.reset-icon {
    width:70px;
    height:70px;
    object-fit:contain;
    margin:0 auto 22px;
    display:block;
    filter:drop-shadow(0 0 22px rgba(7,69,126,.28))
}

.login-title,.register-title,.forgot-title,.reset-title {
    font-size:34px;
    font-weight:900;
    text-align:center;
    letter-spacing:-1.4px;
    line-height:1.1
}

.login-sub,.register-sub,.forgot-sub,.reset-sub {
    text-align:center;
    color:var(--muted);
    line-height:1.7;
    margin:14px auto 28px;
    max-width:420px
}

.form-group {
    position:relative;
    margin-bottom:16px
}

.form-label {
    display:block;
    margin:0 0 9px;
    color:#d7deea;
    font-weight:800;
    font-size:14px
}

.form-input,input[type=text],input[type=password],input[type=email],input[type=number],select,textarea {
    width:100%;
    min-height:54px;
    padding:16px 17px;
    border-radius:16px;
    border:1px solid var(--line);
    background:#070b12;
    color:#fff;
    outline:none;
    font:inherit;
    transition:.18s ease
}

textarea {
    min-height:120px;
    resize:vertical
}

.password-group .form-input {
    padding-right:54px
}

.form-input:focus,input:focus,select:focus,textarea:focus {
    border-color:rgba(7,69,126,.58);
    box-shadow:0 0 0 4px rgba(7,69,126,.11)
}

.toggle-password {
    position:absolute;
    right:12px;
    top:57px;
    transform:translateY(-50%);
    width:34px;
    height:34px;
    border:0;
    border-radius:10px;
    background:rgba(255,255,255,.06);
    color:#d4dbea;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer
}

.remember-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin:4px 0 16px;
    color:#d7deea;
    font-size:14px;
    font-weight:700
}

.remember-row label {
    display:flex;
    align-items:center;
    gap:8px
}

.remember-row input[type=checkbox] {
    width:17px;
    height:17px;
    accent-color:var(--main)
}

.cf-turnstile {
    margin:14px 0 16px;
    display:flex;
    justify-content:center;
    min-height:65px
}

.login-btn,.register-btn,.form-btn,button[type=submit] {
    width:100%;
    min-height:54px;
    padding:16px;
    border:0;
    border-radius:16px;
    background:linear-gradient(135deg,var(--main),var(--main-light));
    font-weight:900;
    color:#111;
    cursor:pointer;
    font-size:15px;
    transition:.18s ease
}

.msg {
    margin-top:14px;
    text-align:center;
    font-weight:800;
    font-size:14px;
    min-height:20px
}

.msg.error {
    color:#ffb8b8
}

.msg.success {
    color:#8ff0b8
}

.login-foot,.register-foot,.forgot-foot,.reset-foot {
    text-align:center;
    margin-top:16px;
    color:#d7deea;
    font-weight:700
}

.register-card .form-group {
    margin-bottom:14px
}

.password-rules,.form-help {
    color:var(--muted2);
    font-size:13px;
    line-height:1.55;
    margin:-5px 0 14px
}

.alert,.settings-alert {
    padding:14px 16px;
    border-radius:16px;
    margin-bottom:16px;
    border:1px solid var(--line);
    font-weight:700
}

.error,.settings-alert.error {
    background:rgba(255,68,68,.11);
    color:#ffb8b8
}

.success,.settings-alert.success {
    background:rgba(53,208,127,.11);
    color:#8ff0b8
}

/* Settings/dashboard compatibility */
.settings-head {
    text-align:center;
    margin-bottom:34px
}

.settings-head-icon {
    margin:0 auto 16px;
    color:#111
}

.settings-head h1 {
    font-size:42px;
    font-weight:900;
    letter-spacing:-1.6px
}

.settings-head p {
    max-width:620px;
    margin:12px auto 0;
    color:var(--muted);
    line-height:1.7
}

.settings-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px
}

.settings-card.full,.recent-login-full {
    grid-column:1/-1
}

.settings-card h2,.settings-card h3,.login-security-card h2,.api-card h2 {
    font-size:22px;
    margin-bottom:14px
}

.settings-card p,.login-security-card p,.api-card p {
    color:var(--muted);
    line-height:1.7
}

.settings-card form {
    display:grid;
    gap:14px
}

.settings-card button,.settings-action-btn,.danger-btn,.small-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:auto;
    min-height:auto;
    padding:12px 16px;
    border:0;
    border-radius:14px;
    font-weight:900;
    cursor:pointer
}

.settings-action-btn,.small-btn {
    background:var(--main);
    color:#fff
}

.danger-btn {
    background:rgba(255,68,68,.13);
    color:#ffb8b8;
    border:1px solid rgba(255,68,68,.22)
}

.table-wrap {
    width:100%;
    overflow:auto
}

.settings-table,table {
    width:100%;
    border-collapse:collapse
}

td,th {
    padding:13px;
    border-bottom:1px solid var(--line);
    text-align:left;
    color:#d9e1ee
}

th {
    color:#fff;
    font-weight:900
}

.user-menu {
    position:relative
}

.user-btn {
    padding:12px 15px;
    border:0;
    border-radius:14px;
    background:rgba(255,255,255,.06);
    color:white;
    font-weight:800;
    cursor:pointer
}

.user-dropdown {
    display:none;
    position:absolute;
    right:0;
    top:45px;
    min-width:190px;
    background:#0b1220;
    border:1px solid rgba(255,255,255,.1);
    border-radius:18px;
    padding:8px;
    box-shadow:var(--shadow)
}

.user-menu:hover .user-dropdown {
    display:block
}

.user-dropdown a {
    display:block;
    color:#d0d5dd;
    text-decoration:none;
    padding:12px;
    border-radius:12px
}

.user-dropdown a:hover {
    background:rgba(255,255,255,.06);
    color:white
}

/* Footer unified */
footer,.footer {
    align-self:end;
    text-align:center;
    color:#8e99aa;
    padding:28px 20px;
    border-top:1px solid rgba(255,255,255,.07);
    background:rgba(5,7,13,.36);
    font-size:14px;
    font-weight:700
}

.footer-links {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    flex-wrap:wrap;
    margin-top:8px
}

.footer-links a {
    color:#9da8ba;
    font-weight:800
}

.footer-links a:hover {
    color:var(--main-light)
}

.mobile-menu,.mobile-menu-btn {
    display:none
}

@media(max-width:980px) {
    .nav-links {
        display:none
    }

    .hero-inner {
        grid-template-columns:1fr
    }

    .hero h1 {
        font-size:52px
    }

    .stats {
        flex-direction:column
    }

    .stat-card {
        width:100%
    }

    .feature-grid,.steps,.price-grid,.settings-grid {
        grid-template-columns:1fr
    }

    .price-grid {
        max-width:520px;
        margin:0 auto
    }

    .mobile-menu-btn {
        display:flex;
        flex-direction:column;
        gap:4px;
        width:42px;
        height:42px;
        align-items:center;
        justify-content:center;
        border:1px solid var(--line);
        background:rgba(255,255,255,.04);
        border-radius:13px
    }

    .mobile-menu-btn span {
        width:18px;
        height:2px;
        background:#fff;
        border-radius:2px
    }

    .mobile-menu {
        display:none;
        position:fixed;
        top:74px;
        left:16px;
        right:16px;
        z-index:99;
        padding:12px;
        border-radius:20px;
        background:#0b1220;
        border:1px solid var(--line);
        box-shadow:var(--shadow)
    }

    .mobile-menu.open {
        display:block
    }

    .mobile-menu a {
        display:block;
        padding:13px 14px;
        color:#d0d5dd;
        border-radius:12px;
        font-weight:800
    }

    .mobile-menu a:hover {
        background:rgba(255,255,255,.06);
        color:#fff
    }

    }

@media(max-width:560px) {
    .navbar {
        padding:0 16px
    }

    .logo-text h2 {
        font-size:20px
    }

    .logo-text p {
        letter-spacing:3px
    }

    .hero {
        padding:38px 18px
    }

    .hero h1 {
        font-size:42px;
        letter-spacing:-2px
    }

    .hero-buttons {
        flex-direction:column
    }

    .section {
        padding:52px 18px
    }

    .section-head h2 {
        font-size:32px
    }

    .signin {
        display:none
    }

    .started-btn {
        padding:12px 16px
    }

    .login-page,.register-page,.forgot-page,.reset-page,.settings-page {
        padding:34px 14px
    }

    .login-card,.register-card,.forgot-card,.reset-card {
        padding:32px 22px 26px;
        border-radius:24px
    }

    .login-title,.register-title,.forgot-title,.reset-title {
        font-size:29px
    }

    .remember-row {
        align-items:flex-start;
        flex-direction:column
    }

    .footer-links {
        gap:10px;
        flex-direction:column
    }

    }

/* ===== Unified auth utility pages: 2FA / verification / 404 ===== */
.verify-wrapper,
.verify-page,
.error-wrapper {
    min-height:calc(100vh - 150px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:70px 22px;
    }

.verify-card,
.error-card {
    width:100%;
    max-width:520px;
    padding:38px;
    border-radius:30px;
    background:rgba(8,16,34,.78);
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 30px 120px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.04);
    backdrop-filter:blur(20px);
    text-align:center;
    }

.verify-badge,
.verify-icon {
    width:76px;
    height:76px;
    margin:0 auto 22px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:24px;
    background:linear-gradient(135deg,rgba(11,95,168,.22),rgba(7,69,126,.18));
    border:1px solid rgba(255,255,255,.10);
    font-size:32px;
    color:#0b5fa8;
    box-shadow:0 0 45px rgba(7,69,126,.16);
    }

.verify-icon.success {
    color:#16d59a;
    background:rgba(22,213,154,.12)
}

.verify-icon.error {
    color:#ff6b6b;
    background:rgba(255,107,107,.12)
}

.verify-title,
.error-card h1 {
    font-size:34px;
    line-height:1.1;
    font-weight:900;
    color:#fff;
    letter-spacing:-1px;
    margin-bottom:12px;
    }

.verify-desc,
.verify-message,
.error-card p,
.security-note {
    color:#aeb9cf;
    font-size:15px;
    line-height:1.75;
    }

.security-note {
    margin-top:22px;
    padding:18px;
    border-radius:18px;
    background:rgba(255,255,255,.035);
    border:1px solid rgba(255,255,255,.07);
    }

.code-input {
    width:100%;
    height:72px;
    margin:26px 0 16px;
    border-radius:20px;
    border:1px solid rgba(255,255,255,.12);
    background:#071022;
    color:#fff;
    text-align:center;
    font-size:32px;
    font-weight:900;
    letter-spacing:12px;
    outline:none;
    }

.code-input:focus {
    border-color:rgba(11,95,168,.65);
    box-shadow:0 0 0 4px rgba(11,95,168,.12);
    }

.verify-btn,
.error-actions .btn-primary,
.error-actions .btn-secondary {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:52px;
    padding:0 24px;
    border:0;
    border-radius:18px;
    text-decoration:none;
    font-weight:900;
    cursor:pointer;
    }

.verify-btn,
.error-actions .btn-primary {
    width:100%;
    background:linear-gradient(135deg,#07457e,#0b5fa8);
    color:#101828;
    box-shadow:0 18px 48px rgba(7,69,126,.24);
    }

.verify-btn.secondary,
.error-actions .btn-secondary {
    width:auto;
    margin-top:12px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.10);
    color:#fff;
    }

.verify-msg {
    margin-top:16px;
    padding:14px 16px;
    border-radius:16px;
    background:rgba(255,107,107,.10);
    border:1px solid rgba(255,107,107,.22);
    color:#ffd2d2;
    font-size:14px;
    line-height:1.55;
    }

.error-code {
    font-size:94px;
    line-height:1;
    font-weight:900;
    letter-spacing:-5px;
    background:linear-gradient(90deg,#0b5fa8,#7fdcff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    margin-bottom:12px;
    }

.error-logo {
    height:54px;
    width:auto;
    margin-bottom:26px;
    }

.error-actions {
    display:flex;
    gap:12px;
    justify-content:center;
    flex-wrap:wrap;
    margin-top:26px;
    }

@media(max-width:640px) {
    .verify-card,.error-card {
        padding:28px 20px;
        border-radius:24px;
            }

    .verify-title,.error-card h1 {
        font-size:28px;
            }

    .code-input {
        font-size:26px;
        letter-spacing:8px;
            }

    }

/* ===== TeamSpeak6 landing polish ===== */
.logo-text p {
    display:none
}

.site-logo {
    width:46px;
    height:46px;
    object-fit:contain;
    filter:drop-shadow(0 0 22px rgba(7,69,126,.32))
}

.human-preview {
    overflow:hidden
}

.human-preview:after {
    content:"";
    position:absolute;
    right:-70px;
    bottom:-80px;
    width:230px;
    height:230px;
    border-radius:50%;
    background:rgba(7,69,126,.12);
    filter:blur(4px);
    pointer-events:none
}

.server-preview {
    position:relative;
    z-index:1;
    margin-top:28px;
    padding:22px;
    border-radius:24px;
    background:linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
    border:1px solid rgba(255,255,255,.11);
    display:flex;
    align-items:center;
    gap:16px
}

.server-icon {
    width:58px;
    height:58px;
    border-radius:20px;
    background:rgba(7,69,126,.12);
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(7,69,126,.25)
}

.server-icon img {
    width:42px;
    height:42px;
    object-fit:contain
}

.server-preview span {
    display:block;
    color:#99a5b8;
    font-size:13px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.9px;
    margin-bottom:5px
}

.server-preview strong {
    display:block;
    color:#fff;
    font-size:22px;
    letter-spacing:-.5px;
    word-break:break-word
}

.preview-list {
    position:relative;
    z-index:1;
    display:grid;
    gap:12px;
    margin-top:18px
}

.preview-list div {
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px;
    border-radius:16px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.075);
    color:#d8dee9;
    font-weight:800
}

.preview-list i {
    color:var(--green)
}

.preview-cta {
    position:relative;
    z-index:1;
    margin-top:18px;
    padding:18px;
    border-radius:18px;
    background:rgba(7,69,126,.12);
    border:1px solid rgba(7,69,126,.24);
    color:#8fc7ff;
    font-weight:900;
    text-align:center
}

.price-grid.three {
    grid-template-columns:repeat(3,minmax(0,1fr));
    max-width:none
}

@media(max-width:980px) {
    .price-grid.three {
        grid-template-columns:1fr;
        max-width:520px;
        margin:0 auto
    }

    .server-preview {
        align-items:flex-start
    }

    .server-preview strong {
        font-size:19px
    }

    }

/* ===== Subdomain checker ===== */
.subdomain-checker {
    position:relative;
    z-index:2;
    margin-top:26px;
    padding:20px;
    border-radius:22px;
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.09)
}

.subdomain-checker label {
    display:block;
    color:#fff;
    font-size:15px;
    font-weight:900;
    margin-bottom:12px
}

.checker-row {
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px;
    background:#071022;
    border:1px solid rgba(255,255,255,.11);
    border-radius:18px
}

.checker-row input {
    width:100%;
    min-width:0;
    border:0;
    outline:0;
    background:transparent;
    color:#fff;
    font-size:20px;
    font-weight:900;
    padding:11px 8px
}

.checker-row span {
    white-space:nowrap;
    color:#9ea9ba;
    font-weight:900;
    font-size:14px
}

.checker-row button {
    border:0;
    border-radius:13px;
    padding:12px 16px;
    background:var(--main);
    color:#fff;
    font-weight:900;
    cursor:pointer
}

.checker-hint {
    margin-top:10px;
    color:#8792a6;
    font-size:13px;
    font-weight:700
}

.checker-result {
    position:relative;
    z-index:2
}

.availability {
    margin-top:14px;
    padding:15px 16px;
    border-radius:17px;
    display:flex;
    align-items:center;
    gap:11px;
    font-weight:900;
    border:1px solid rgba(255,255,255,.09);
    background:rgba(255,255,255,.04);
    color:#d9e1ee
}

.availability.available {
    background:rgba(53,208,127,.11);
    border-color:rgba(53,208,127,.26);
    color:#9af0bf
}

.availability.taken {
    background:rgba(255,107,107,.10);
    border-color:rgba(255,107,107,.24);
    color:#ffc3c3
}

.availability.neutral {
    background:rgba(255,255,255,.04);
    color:#d9e1ee
}

.checker-action {
    display:block;
    text-decoration:none
}

@media(max-width:560px) {
    .checker-row {
        flex-wrap:wrap
    }

    .checker-row span {
        order:3;
        width:100%;
        padding:0 8px 8px
    }

    .checker-row button {
        width:100%
    }

    }

/* ===== Professional horizontal TeamSpeak6 logo ===== */
.brand-logo {
    gap:0
}

.navbar .site-logo {
    width:230px;
    height:auto;
    max-height:58px;
    object-fit:contain;
    filter:drop-shadow(0 0 18px rgba(7,69,126,.24))
}

.login-card > a .site-logo,.register-card > a .site-logo,.forgot-card > a .site-logo,.reset-card > a .site-logo,.settings-card .site-logo {
    width:230px;
    height:auto;
    max-height:62px;
    object-fit:contain
}

.login-icon,.register-icon,.forgot-icon,.reset-icon {
    width:76px;
    height:76px
}

.error-logo {
    height:82px;
    width:82px;
    object-fit:contain
}

.server-icon img {
    width:43px;
    height:43px;
    object-fit:contain
}

@media(max-width:560px) {
    .navbar .site-logo {
        width:185px
    }

    .nav-links {
        display:none
    }

    }

/* ===== Fixed logged-in user dropdown ===== */
:root {
    --main2:var(--main-light);
    }

.nav-right {
    position:relative;
    z-index:1001;
    }

.user-menu {
    position:relative;
    display:inline-flex;
    align-items:center;
    padding-bottom:10px;
    margin-bottom:-10px;
    }

.user-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-height:46px;
    padding:12px 16px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:16px;
    background:linear-gradient(135deg,var(--main),var(--main-light));
    color:#fff;
    font-weight:900;
    font-size:14px;
    cursor:pointer;
    box-shadow:0 18px 50px rgba(7,69,126,.24);
    transition:.18s ease;
    }

.user-btn i {
    color:#fff;
    }

.user-btn:hover {
    color:#fff;
    filter:brightness(1.08);
    transform:translateY(-1px);
    }

.user-dropdown {
    position:absolute;
    right:0;
    top:100%;
    min-width:210px;
    padding:8px;
    border-radius:18px;
    background:#0b1220;
    border:1px solid rgba(255,255,255,.11);
    box-shadow:0 24px 70px rgba(0,0,0,.42);
    display:none;
    z-index:2000;
    }

.user-dropdown::before {
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:-10px;
    height:10px;
    }

.user-menu:hover .user-dropdown,
.user-menu:focus-within .user-dropdown {
    display:block;
    }

.user-dropdown a {
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 13px;
    border-radius:12px;
    color:#d0d5dd;
    font-size:14px;
    font-weight:800;
    line-height:1.2;
    text-decoration:none;
    white-space:nowrap;
    }

.user-dropdown a i {
    width:18px;
    text-align:center;
    color:#8fc7ff;
    }

.user-dropdown a:hover {
    background:rgba(255,255,255,.07);
    color:#fff;
    }

@media(max-width:560px) {
    .user-btn {
        padding:11px 13px;
        font-size:13px;
            }

    .user-dropdown {
        right:0;
        min-width:190px;
            }

    }

/* ===== Dashboard create form cleanup ===== */
.creator-card {
    overflow:visible;
    background:rgba(255,255,255,.045);
    }

.new-subdomain-bar {
    display:none !important;
    }

.dashboard-create-btn {
    width:100%;
    min-height:54px;
    margin-top:4px;
    border:0;
    cursor:pointer;
    box-shadow:0 18px 50px rgba(7,69,126,.24);
    }

.dashboard-create-btn:hover {
    color:#fff;
    filter:brightness(1.05);
    transform:translateY(-1px);
    }

/* ===== Dashboard layout polish v2 ===== */
.dashboard-page {
    width:100%;
    max-width:1240px;
    margin:0 auto;
    padding:46px 22px 80px;
    }

.dashboard-hero {
    text-align:center;
    margin-bottom:32px;
    }

.dash-badge {
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:10px 15px;
    border-radius:999px;
    background:rgba(255,255,255,.05);
    border:1px solid var(--line);
    color:#b7ccff;
    font-size:13px;
    font-weight:900;
    margin-bottom:16px;
    }

.dashboard-hero h1 {
    color:#fff;
    font-size:46px;
    line-height:1;
    letter-spacing:-1px;
    font-weight:900;
    text-transform:uppercase;
    }

.dashboard-hero p {
    max-width:720px;
    margin:16px auto 0;
    color:#aeb9cf;
    font-size:16px;
    line-height:1.7;
    }

.subdomain-layout {
    max-width:760px;
    margin:0 auto;
    display:block;
    }

.subdomain-card {
    width:100%;
    border-radius:22px;
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.10);
    box-shadow:var(--shadow);
    }

.creator-card {
    padding:32px;
    overflow:visible;
    }

.limit-row {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
    margin-bottom:22px;
    }

.limit-row div {
    padding:18px;
    border-radius:16px;
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.10);
    }

.limit-row span {
    display:block;
    color:#a9c2ff;
    font-size:13px;
    font-weight:900;
    margin-bottom:7px;
    }

.limit-row strong {
    color:#fff;
    font-size:24px;
    line-height:1;
    font-weight:900;
    }

.dash-alert,
.limit-locked {
    display:flex;
    align-items:center;
    gap:10px;
    padding:15px 16px;
    border-radius:15px;
    margin-bottom:18px;
    font-weight:900;
    line-height:1.4;
    }

.dash-alert.success {
    background:rgba(53,208,127,.11);
    border:1px solid rgba(53,208,127,.28);
    color:#9af0bf;
    }

.dash-alert.error,
.limit-locked {
    background:rgba(255,107,107,.11);
    border:1px solid rgba(255,107,107,.28);
    color:#ffc7c7;
    }

.ts-form {
    display:grid;
    gap:18px;
    }

.form-row {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    }

.form-field label {
    display:block;
    margin-bottom:9px;
    color:#a9c2ff;
    font-size:14px;
    font-weight:900;
    }

.form-field label span {
    color:#ff6b6b;
    }

.form-field input,
.form-field select,
.domain-fixed {
    width:100%;
    min-height:54px;
    border-radius:15px;
    border:1px solid rgba(255,255,255,.10);
    background:#050a11;
    color:#fff;
    font:inherit;
    font-weight:800;
    outline:none;
    }

.form-field input,
.form-field select {
    padding:0 16px;
    }

.form-field input::placeholder {
    color:#87a0d0;
    }

.form-field input:focus,
.form-field select:focus {
    border-color:rgba(11,95,168,.75);
    box-shadow:0 0 0 4px rgba(11,95,168,.16);
    }

.form-field select {
    cursor:pointer;
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    padding-right:46px;
    background-image:
    linear-gradient(45deg,transparent 50%,#8fc7ff 50%),
    linear-gradient(135deg,#8fc7ff 50%,transparent 50%);
    background-position:
    calc(100% - 22px) 23px,
    calc(100% - 16px) 23px;
    background-size:6px 6px,6px 6px;
    background-repeat:no-repeat;
    }

.form-field select option {
    background:#050a11;
    color:#fff;
    font-weight:800;
    }

.domain-fixed {
    display:flex;
    align-items:center;
    padding:0 16px;
    color:#cdd8ea;
    background:rgba(5,10,17,.78);
    border-style:solid;
    cursor:default;
    }

.dashboard-create-btn {
    width:100%;
    min-height:54px;
    margin-top:4px;
    border:0;
    cursor:pointer;
    box-shadow:0 18px 50px rgba(7,69,126,.24);
    }

.dashboard-create-btn:hover {
    color:#fff;
    filter:brightness(1.05);
    transform:translateY(-1px);
    }

.subdomain-benefits {
    display:none !important;
    }

.my-subdomains {
    max-width:960px;
    margin:60px auto 0;
    }

.empty-state {
    padding:28px;
    border-radius:20px;
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.10);
    color:#aeb9cf;
    text-align:center;
    font-weight:800;
    }

.subdomain-list {
    display:grid;
    gap:14px;
    }

.subdomain-item {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:18px;
    border-radius:20px;
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.10);
    }

.subdomain-item span {
    display:block;
    color:#8fc7ff;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.8px;
    margin-bottom:5px;
    }

.subdomain-item strong {
    display:block;
    color:#fff;
    font-size:18px;
    word-break:break-word;
    }

.subdomain-item small {
    display:block;
    margin-top:5px;
    color:#8e99aa;
    font-weight:800;
    }

.subdomain-item a {
    flex:0 0 auto;
    padding:12px 15px;
    border-radius:14px;
    background:var(--main);
    color:#fff;
    font-weight:900;
    }

@media(max-width:760px) {
    .dashboard-page {
        padding:34px 14px 60px;
            }

    .dashboard-hero h1 {
        font-size:36px;
            }

    .creator-card {
        padding:22px;
            }

    .form-row,.limit-row {
        grid-template-columns:1fr;
            }

    .subdomain-item {
        align-items:flex-start;
        flex-direction:column;
            }

    .subdomain-item a {
        width:100%;
        text-align:center;
            }

    }

/* ===== Dashboard two-column creator/list layout ===== */
.subdomain-layout {
    max-width:1180px;
    margin:0 auto;
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);
    gap:22px;
    align-items:start;
    }

.creator-card,
.my-subdomains {
    margin:0;
    }

.my-subdomains {
    max-width:none;
    padding:32px;
    }

.my-subdomains .section-head {
    text-align:left;
    margin-bottom:22px;
    }

.my-subdomains .section-head h2 {
    margin:14px 0 0;
    font-size:30px;
    max-width:none;
    }

.my-subdomains .section-head span {
    margin:0;
    }

.subdomain-list {
    max-height:560px;
    overflow:auto;
    padding-right:4px;
    }

.subdomain-list::-webkit-scrollbar {
    width:8px;
    }

.subdomain-list::-webkit-scrollbar-thumb {
    background:rgba(255,255,255,.14);
    border-radius:999px;
    }

.subdomain-list::-webkit-scrollbar-track {
    background:rgba(255,255,255,.04);
    border-radius:999px;
    }

@media(max-width:980px) {
    .subdomain-layout {
        grid-template-columns:1fr;
        max-width:760px;
            }

    .my-subdomains {
        padding:28px;
            }

    .subdomain-list {
        max-height:none;
        overflow:visible;
        padding-right:0;
            }

    }

@media(max-width:760px) {
    .my-subdomains {
        padding:22px;
            }

    .my-subdomains .section-head h2 {
        font-size:26px;
            }

    }

/* ===== TeamSpeak6 professional settings page v2 ===== */
.ts-settings-page {
    padding:52px 22px 76px
}

.ts-settings-hero {
    width:100%;
    max-width:1220px;
    margin:0 auto 26px;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px
}

.ts-settings-hero h1 {
    margin-top:14px;
    font-size:54px;
    line-height:.95;
    letter-spacing:-2.5px;
    font-weight:900
}

.ts-settings-hero p {
    margin-top:14px;
    color:var(--muted);
    font-size:17px;
    line-height:1.7;
    max-width:680px
}

.ts-settings-avatar {
    width:92px;
    height:92px;
    border-radius:28px;
    background:linear-gradient(135deg,var(--main),var(--main-light));
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:42px;
    font-weight:900;
    color:#fff;
    box-shadow:0 24px 70px rgba(7,69,126,.32);
    border:1px solid rgba(255,255,255,.16)
}

.ts-settings-wrap {
    width:100%;
    max-width:1220px;
    margin:0 auto;
    display:grid;
    gap:22px
}

.ts-panel {
    position:relative;
    border:1px solid var(--line);
    border-radius:28px;
    background:rgba(10,16,28,.84);
    box-shadow:var(--shadow);
    padding:26px;
    overflow:hidden
}

.ts-panel:before {
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at top right,rgba(11,95,168,.14),transparent 38%);
    pointer-events:none
}

.ts-panel>* {
    position:relative;
    z-index:1
}

.ts-panel-head {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    margin-bottom:22px
}

.ts-panel-head.compact {
    margin-bottom:18px
}

.ts-panel-head span,.ts-overview-card span,.ts-pending-panel span {
    display:block;
    color:var(--main-light);
    font-size:12px;
    font-weight:900;
    letter-spacing:1px;
    text-transform:uppercase;
    margin-bottom:8px
}

.ts-panel-head h2 {
    font-size:25px;
    line-height:1.1;
    letter-spacing:-.8px
}

.ts-panel-head p,.ts-overview-card p,.ts-pending-panel p,.ts-muted-note {
    margin-top:9px;
    color:var(--muted);
    line-height:1.7
}

.ts-overview-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px
}

.ts-overview-card {
    padding:22px;
    border:1px solid var(--line);
    border-radius:24px;
    background:rgba(255,255,255,.045);
    box-shadow:0 24px 70px rgba(0,0,0,.20)
}

.ts-overview-card strong {
    display:block;
    color:#fff;
    font-size:26px;
    letter-spacing:-.8px;
    line-height:1.15
}

.ts-overview-card.plan {
    background:linear-gradient(135deg,rgba(7,69,126,.24),rgba(255,255,255,.045))
}

.ts-mini-link {
    display:inline-flex;
    margin-top:14px;
    color:#fff;
    background:var(--main);
    padding:9px 12px;
    border-radius:12px;
    font-size:13px;
    font-weight:900
}

.ts-pending-panel {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    border-color:rgba(255,193,7,.20);
    background:rgba(255,193,7,.065)
}

.ts-pending-panel strong {
    display:block;
    font-size:20px;
    color:#fff
}

.ts-meta-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
    margin-bottom:20px
}

.ts-meta-grid div {
    padding:17px;
    border-radius:18px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.04)
}

.ts-meta-grid span {
    display:block;
    color:var(--muted2);
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.8px;
    font-weight:900;
    margin-bottom:8px
}

.ts-meta-grid strong {
    display:block;
    color:#fff;
    font-size:18px
}

.ts-status {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    white-space:nowrap;
    padding:9px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:900;
    letter-spacing:.5px
}

.ts-status.active {
    background:rgba(53,208,127,.12);
    color:#9af0bf;
    border:1px solid rgba(53,208,127,.22)
}

.ts-status.warn {
    background:rgba(255,193,7,.12);
    color:#ffe29a;
    border:1px solid rgba(255,193,7,.22)
}

.ts-status.neutral {
    background:rgba(255,255,255,.06);
    color:#d8dee9;
    border:1px solid var(--line)
}

.ts-inline-actions {
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap
}

.ts-inline-actions form {
    margin:0
}

.ts-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:50px;
    padding:14px 19px;
    border:0;
    border-radius:16px;
    text-decoration:none;
    font-weight:900;
    cursor:pointer;
    transition:.18s ease;
    font-size:14px
}

.ts-btn.primary {
    background:var(--main);
    color:#fff;
    box-shadow:0 18px 50px rgba(7,69,126,.24)
}

.ts-btn.secondary {
    background:rgba(255,255,255,.06);
    color:#fff;
    border:1px solid var(--line)
}

.ts-btn.danger {
    background:rgba(255,68,68,.13);
    color:#ffb8b8;
    border:1px solid rgba(255,68,68,.24)
}

.ts-btn.full {
    width:100%
}

.ts-btn:hover {
    filter:brightness(1.07);
    transform:translateY(-1px)
}

.ts-settings-two-col {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px
}

.ts-form {
    display:grid;
    gap:15px
}

.ts-form label {
    display:block;
    color:#d7deea;
    font-weight:800;
    font-size:14px
}

.ts-form .form-input {
    margin-top:9px
}

.ts-form .password-group {
    position:relative
}

.ts-form .password-group .form-input {
    padding-right:56px
}

.ts-switch-row {
    display:flex!important;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:17px;
    border:1px solid var(--line);
    border-radius:18px;
    background:rgba(255,255,255,.04);
    cursor:pointer
}

.ts-switch-row span {
    display:block
}

.ts-switch-row strong {
    display:block;
    color:#fff;
    font-size:15px
}

.ts-switch-row small {
    display:block;
    color:var(--muted);
    line-height:1.6;
    margin-top:6px
}

.ts-switch-row input {
    position:absolute;
    opacity:0;
    pointer-events:none
}

.ts-switch-row i {
    position:relative;
    flex:0 0 auto;
    width:54px;
    height:30px;
    border-radius:999px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.12);
    transition:.18s ease
}

.ts-switch-row i:before {
    content:"";
    position:absolute;
    width:22px;
    height:22px;
    border-radius:50%;
    background:#fff;
    left:4px;
    top:3px;
    transition:.18s ease
}

.ts-switch-row input:checked+i {
    background:var(--main);
    border-color:rgba(255,255,255,.16)
}

.ts-switch-row input:checked+i:before {
    transform:translateX(24px)
}

.ts-device-list,.ts-activity-list {
    display:grid;
    gap:12px
}

.ts-device-item {
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:16px;
    align-items:center;
    padding:16px;
    border:1px solid var(--line);
    border-radius:20px;
    background:rgba(255,255,255,.04)
}

.ts-device-item.current {
    border-color:rgba(53,208,127,.28);
    background:rgba(53,208,127,.06)
}

.ts-device-icon {
    width:44px;
    height:44px;
    border-radius:15px;
    background:rgba(7,69,126,.18);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-weight:900
}

.ts-device-main strong {
    display:flex;
    align-items:center;
    gap:9px;
    color:#fff;
    font-size:15px
}

.ts-device-main strong span {
    padding:5px 8px;
    border-radius:999px;
    background:rgba(53,208,127,.12);
    color:#9af0bf;
    font-size:11px;
    font-weight:900
}

.ts-device-main p {
    margin-top:7px;
    color:var(--muted);
    font-size:13px;
    line-height:1.5
}

.ts-device-main small,.ts-activity-item small {
    display:block;
    margin-top:8px;
    color:#7f8a9d;
    font-size:12px;
    line-height:1.5;
    word-break:break-word
}

.ts-small-btn {
    min-height:36px;
    padding:9px 12px;
    border:0;
    border-radius:12px;
    font-weight:900;
    cursor:pointer
}

.ts-small-btn.current {
    background:rgba(53,208,127,.12);
    color:#9af0bf
}

.ts-small-btn.remove {
    background:rgba(255,68,68,.12);
    color:#ffb8b8;
    border:1px solid rgba(255,68,68,.22)
}

.ts-activity-item {
    padding:16px;
    border:1px solid var(--line);
    border-radius:20px;
    background:rgba(255,255,255,.04)
}

.ts-activity-item strong {
    display:block;
    margin-top:10px;
    color:#fff
}

.ts-activity-item p {
    margin-top:6px;
    color:var(--muted);
    font-size:13px
}

.ts-login-pill {
    display:inline-flex;
    padding:7px 10px;
    border-radius:999px;
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.6px;
    background:rgba(53,208,127,.12);
    color:#9af0bf;
    border:1px solid rgba(53,208,127,.22)
}

.ts-login-pill.failed {
    background:rgba(255,68,68,.12);
    color:#ffb8b8;
    border-color:rgba(255,68,68,.24)
}

.ts-login-pill.warning,.ts-login-pill.twofa {
    background:rgba(255,193,7,.12);
    color:#ffe29a;
    border-color:rgba(255,193,7,.24)
}

.ts-empty-state {
    padding:22px;
    border:1px dashed rgba(255,255,255,.16);
    border-radius:18px;
    color:var(--muted);
    text-align:center
}

.settings-alert {
    display:flex;
    align-items:center;
    gap:10px
}

.confirm-modal {
    position:fixed;
    inset:0;
    z-index:5000;
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px
}

.confirm-modal.show {
    display:flex
}

.confirm-backdrop {
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.64);
    backdrop-filter:blur(8px)
}

.confirm-card {
    position:relative;
    z-index:1;
    width:100%;
    max-width:460px;
    padding:30px;
    border-radius:26px;
    background:#0b1220;
    border:1px solid var(--line);
    box-shadow:0 30px 110px rgba(0,0,0,.45);
    text-align:center
}

.confirm-icon {
    width:56px;
    height:56px;
    margin:0 auto 16px;
    border-radius:18px;
    background:rgba(255,193,7,.13);
    color:#ffe29a;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
    font-size:26px
}

.confirm-icon.danger {
    background:rgba(255,68,68,.13);
    color:#ffb8b8
}

.confirm-card h3 {
    font-size:25px
}

.confirm-card p {
    margin-top:10px;
    color:var(--muted);
    line-height:1.7
}

.confirm-actions {
    display:flex;
    gap:12px;
    justify-content:center;
    margin-top:24px
}

.confirm-btn {
    min-height:48px;
    padding:13px 18px;
    border:0;
    border-radius:15px;
    font-weight:900;
    cursor:pointer
}

.confirm-btn.cancel {
    background:rgba(255,255,255,.06);
    color:#fff;
    border:1px solid var(--line)
}

.confirm-btn.confirm {
    background:var(--main);
    color:#fff
}

.confirm-btn.confirm:hover,.confirm-btn.cancel:hover {
    filter:brightness(1.08)
}

@media(max-width:980px) {
    .ts-overview-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }

    .ts-settings-two-col {
        grid-template-columns:1fr
    }

    .ts-settings-hero h1 {
        font-size:44px
    }

    .ts-settings-avatar {
        width:78px;
        height:78px;
        font-size:34px
    }

    .ts-meta-grid {
        grid-template-columns:1fr
    }

    }

@media(max-width:640px) {
    .ts-settings-page {
        padding:36px 14px 58px
    }

    .ts-settings-hero {
        align-items:flex-start
    }

    .ts-settings-avatar {
        display:none
    }

    .ts-settings-hero h1 {
        font-size:34px;
        letter-spacing:-1.5px
    }

    .ts-overview-grid {
        grid-template-columns:1fr
    }

    .ts-panel {
        padding:20px;
        border-radius:22px
    }

    .ts-panel-head {
        flex-direction:column
    }

    .ts-pending-panel {
        align-items:flex-start;
        flex-direction:column
    }

    .ts-inline-actions,.confirm-actions {
        width:100%;
        flex-direction:column
    }

    .ts-inline-actions .ts-btn,.ts-inline-actions form {
        width:100%
    }

    .ts-device-item {
        grid-template-columns:1fr
    }

    .ts-device-icon {
        display:none
    }

    .ts-device-actions,.ts-device-actions form,.ts-small-btn {
        width:100%
    }

    .ts-small-btn {
        min-height:44px
    }

    .ts-switch-row {
        align-items:flex-start
    }

    .ts-switch-row i {
        margin-top:3px
    }

    .confirm-card {
        padding:24px
    }

    }

/* ===== TeamSpeak6 final auth/verification polish ===== */
.auth-notice {
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:14px 15px;
    border-radius:16px;
    margin:0 0 18px;
    font-size:14px;
    font-weight:800;
    line-height:1.55;
    text-align:left;
    }

.auth-notice.success {
    color:#9af0bf;
    background:rgba(53,208,127,.11);
    border:1px solid rgba(53,208,127,.24);
    }

.auth-notice.error {
    color:#ffc3c3;
    background:rgba(255,107,107,.10);
    border:1px solid rgba(255,107,107,.24);
    }

.login-icon,.register-icon,.forgot-icon,.reset-icon {
    width:230px!important;
    max-width:80%;
    height:auto!important;
    margin-bottom:26px!important;
    }

.verify-page,.error-wrapper {
    min-height:calc(100vh - 150px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:70px 22px;
    }

.verify-card,.error-card {
    width:100%;
    max-width:560px;
    padding:38px;
    border-radius:32px;
    background:rgba(10,16,28,.88);
    border:1px solid var(--line);
    box-shadow:0 30px 90px rgba(0,0,0,.34),0 0 120px rgba(7,69,126,.10);
    backdrop-filter:blur(18px);
    text-align:center;
    position:relative;
    overflow:hidden;
    }

.verify-card:before,.error-card:before {
    content:"";
    position:absolute;
    inset:-1px;
    border-radius:32px;
    padding:1px;
    background:linear-gradient(135deg,rgba(7,69,126,.58),rgba(255,255,255,.07),rgba(7,69,126,.14));
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    pointer-events:none;
    }

.verify-badge,.verify-icon {
    width:auto;
    min-width:76px;
    min-height:76px;
    padding:0 22px;
    margin:0 auto 22px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:24px;
    background:linear-gradient(135deg,rgba(11,95,168,.22),rgba(7,69,126,.18));
    border:1px solid rgba(255,255,255,.10);
    color:#8fc7ff;
    font-size:28px;
    font-weight:900;
    box-shadow:0 0 45px rgba(7,69,126,.16);
    }

.verify-title,.error-card h1 {
    font-size:36px;
    line-height:1.08;
    font-weight:900;
    color:#fff;
    letter-spacing:-1.4px;
    margin-bottom:12px;
    }

.verify-desc,.verify-message,.error-card p,.security-note {
    color:var(--muted);
    font-size:15px;
    line-height:1.75;
    }

.verify-btn,.verify-link-btn {
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:54px;
    margin-top:22px;
    padding:16px;
    border:0;
    border-radius:16px;
    background:linear-gradient(135deg,var(--main),var(--main-light));
    color:#fff;
    font-weight:900;
    text-decoration:none;
    cursor:pointer;
    font-size:15px;
    }

.verify-btn:hover,.verify-link-btn:hover {
    color:#fff;
    filter:brightness(1.06);
    transform:translateY(-1px);
    }

.verify-secondary-link {
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    margin-top:12px;
    min-height:50px;
    padding:14px;
    border-radius:16px;
    background:rgba(255,255,255,.045);
    border:1px solid var(--line);
    color:#fff;
    font-weight:900;
    text-decoration:none;
    }

.code-input {
    width:100%;
    height:72px;
    margin:26px 0 16px;
    border-radius:20px;
    border:1px solid var(--line);
    background:#070b12;
    color:#fff;
    text-align:center;
    font-size:32px;
    font-weight:900;
    letter-spacing:9px;
    outline:none;
    }

.code-input:focus {
    border-color:rgba(11,95,168,.64);
    box-shadow:0 0 0 4px rgba(7,69,126,.14);
    }

.verify-msg {
    margin-top:16px;
    padding:14px;
    border-radius:16px;
    color:#ffc3c3;
    background:rgba(255,107,107,.10);
    border:1px solid rgba(255,107,107,.24);
    font-weight:800;
    line-height:1.55;
    }

.security-note {
    margin-top:22px;
    padding:18px;
    border-radius:18px;
    background:rgba(255,255,255,.035);
    border:1px solid rgba(255,255,255,.07);
    }

.btn-primary,.btn-secondary {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:14px 18px;
    border-radius:16px;
    font-weight:900;
    text-decoration:none;
    }

.btn-primary {
    background:var(--main);
    color:#fff
}

.btn-secondary {
    background:rgba(255,255,255,.06);
    border:1px solid var(--line);
    color:#fff
}

@media(max-width:560px) {
    .login-icon,.register-icon,.forgot-icon,.reset-icon {
        width:200px!important
    }

    .verify-page,.error-wrapper {
        padding:42px 16px
    }

    .verify-card,.error-card {
        padding:30px 22px;
        border-radius:26px
    }

    .verify-title,.error-card h1 {
        font-size:30px
    }

    .code-input {
        font-size:28px;
        letter-spacing:6px
    }

    }

/* ===== Security Center polish: compact IP display + overflow fixes ===== */
.ts-overview-card,
.ts-device-main,
.ts-activity-item,
.ts-panel {
    min-width:0;
    }

.ts-overview-card p,
.ts-device-main p,
.ts-activity-item strong,
.ts-activity-item p {
    max-width:100%;
    overflow-wrap:anywhere;
    word-break:normal;
    }

.ts-ip-line {
    display:inline-flex;
    align-items:center;
    gap:7px;
    flex-wrap:wrap;
    max-width:100%;
    vertical-align:middle;
    }

.ts-ip-line b {
    color:#bcd7ff;
    font-weight:900;
    }

.ts-ip-line code {
    display:inline-block;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#dcecff;
    font:inherit;
    font-weight:800;
    }

.ts-ip-view {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:26px;
    padding:4px 9px;
    border-radius:999px;
    border:1px solid rgba(143,199,255,.24);
    background:rgba(7,69,126,.18);
    color:#8fc7ff;
    font-size:11px;
    font-weight:900;
    cursor:pointer;
    }

.ts-ip-view:hover {
    background:rgba(7,69,126,.30);
    color:#fff;
    }

.ip-modal-value {
    margin-top:16px!important;
    padding:14px 15px;
    border-radius:16px;
    background:#071022;
    border:1px solid rgba(255,255,255,.10);
    color:#fff!important;
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:13px!important;
    line-height:1.7!important;
    overflow-wrap:anywhere;
    text-align:left;
    }

@media(max-width:640px) {
    .ts-ip-line {
        display:flex;
        width:100%;
            }

    .ts-ip-line code {
        white-space:normal;
            }

    }

/* ===== Legal pages + unified footer polish ===== */
.footer {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    text-align:center;
    line-height:1.7
}

.footer .footer-links {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    flex-wrap:wrap
}

.footer .footer-links a {
    color:#9da8ba;
    font-weight:900
}

.footer .footer-links a:hover {
    color:#8fc7ff
}

.legal-page {
    width:100%;
    max-width:1040px;
    margin:0 auto;
    padding:62px 22px 80px
}

.legal-hero {
    text-align:center;
    margin-bottom:24px
}

.legal-hero h1 {
    font-size:50px;
    line-height:1.05;
    letter-spacing:-2px;
    font-weight:900;
    margin:16px 0 12px;
    color:#fff
}

.legal-hero p {
    max-width:700px;
    margin:0 auto;
    color:var(--muted);
    font-size:17px;
    line-height:1.75
}

.legal-hero small {
    display:block;
    margin-top:12px;
    color:var(--muted2);
    font-weight:800
}

.legal-card {
    position:relative;
    padding:38px;
    border-radius:30px;
    background:rgba(10,16,28,.88);
    border:1px solid var(--line);
    box-shadow:var(--shadow);
    backdrop-filter:blur(18px)
}

.legal-card h2 {
    font-size:22px;
    line-height:1.25;
    margin:28px 0 10px;
    color:#fff;
    letter-spacing:-.4px
}

.legal-card h2:first-child {
    margin-top:0
}

.legal-card p {
    color:var(--muted);
    font-size:15px;
    line-height:1.85;
    margin:0 0 12px
}

.legal-card a {
    font-weight:900
}

@media(max-width:640px) {
    .legal-page {
        padding:42px 14px 58px
    }

    .legal-hero h1 {
        font-size:36px
    }

    .legal-card {
        padding:26px 20px;
        border-radius:24px
    }

    .footer .footer-links {
        flex-direction:column;
        gap:8px
    }

    }

/* ===== Dashboard professional refresh v4 ===== */
.dashboard-page {
    max-width:1280px;
    padding:56px 22px 90px;
    }

.dashboard-hero {
    position:relative;
    max-width:900px;
    margin:0 auto 34px;
    }

.dashboard-hero::before {
    content:"";
    position:absolute;
    inset:-55px 10% auto;
    height:220px;
    z-index:-1;
    background:radial-gradient(circle,rgba(11,95,168,.20),transparent 68%);
    filter:blur(8px);
    }

.dashboard-hero h1 {
    font-size:clamp(38px,5vw,64px);
    letter-spacing:-2.5px;
    text-transform:none;
    }

.dashboard-hero p {
    color:#b8c4d8;
    }

.dash-badge {
    background:linear-gradient(135deg,rgba(11,95,168,.18),rgba(255,255,255,.045));
    border-color:rgba(143,199,255,.18);
    color:#dbeaff;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
    }

.subdomain-layout {
    grid-template-columns:minmax(0,1fr) minmax(420px,.95fr);
    gap:24px;
    }

.subdomain-card {
    position:relative;
    overflow:hidden;
    background:linear-gradient(180deg,rgba(12,23,40,.92),rgba(8,15,27,.86));
    border:1px solid rgba(255,255,255,.105);
    box-shadow:0 34px 100px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.045);
    backdrop-filter:blur(18px);
    }

.subdomain-card::before {
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at top right,rgba(11,95,168,.16),transparent 38%);
    pointer-events:none;
    }

.subdomain-card > * {
    position:relative;
    z-index:1;
    }

.creator-card,
.my-subdomains {
    padding:30px;
    border-radius:30px;
    }

.dash-card-head {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    margin-bottom:22px;
    }

.dash-card-head span,
.my-subdomains .section-head span {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 11px;
    border-radius:999px;
    background:rgba(11,95,168,.14);
    border:1px solid rgba(143,199,255,.18);
    color:#8fc7ff;
    font-size:11px;
    font-weight:900;
    letter-spacing:.9px;
    text-transform:uppercase;
    }

.dash-card-head h2,
.my-subdomains .section-head h2 {
    margin-top:14px;
    color:#fff;
    font-size:28px;
    line-height:1.08;
    letter-spacing:-.9px;
    }

.dash-card-head p,
.my-subdomains .section-head p {
    margin-top:9px;
    color:#9eacc2;
    line-height:1.6;
    font-size:14px;
    }

.dash-card-head > i {
    width:52px;
    height:52px;
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:18px;
    background:linear-gradient(135deg,var(--main),var(--main-light));
    color:#fff;
    box-shadow:0 18px 48px rgba(7,69,126,.30);
    }

.limit-row {
    margin-bottom:24px;
    }

.limit-row div {
    background:rgba(255,255,255,.045);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
    }

.ts-form {
    gap:16px;
    }

.form-field input,
.form-field select,
.domain-fixed {
    min-height:58px;
    border-radius:17px;
    background:rgba(5,10,17,.86);
    }

.dashboard-create-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:58px;
    border-radius:18px;
    color:#fff;
    background:linear-gradient(135deg,var(--main),var(--main-light));
    }

.my-subdomains .section-head {
    text-align:left;
    margin-bottom:22px;
    }

.subdomain-list {
    display:grid;
    gap:13px;
    max-height:580px;
    }

.subdomain-item {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:16px;
    padding:17px;
    border-radius:22px;
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.09);
    transition:.18s ease;
    }

.subdomain-item:hover {
    border-color:rgba(143,199,255,.20);
    background:rgba(255,255,255,.06);
    transform:translateY(-1px);
    }

.subdomain-item form {
    margin:0;
    display:flex;
    align-items:center;
    }

.status-badge {
    width:max-content;
    margin-bottom:8px!important;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(53,208,127,.11);
    border:1px solid rgba(53,208,127,.22);
    color:#9af0bf!important;
    font-size:11px!important;
    line-height:1;
    }

.subdomain-item strong {
    font-size:17px;
    line-height:1.25;
    }

.subdomain-item small {
    overflow-wrap:anywhere;
    }

.subdomain-delete-btn {
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex-direction:row!important;
    gap:8px!important;
    width:auto!important;
    min-width:104px;
    min-height:42px;
    padding:0 14px!important;
    border-radius:14px!important;
    border:1px solid rgba(255,107,107,.28)!important;
    background:rgba(255,107,107,.12)!important;
    color:#ffc7c7!important;
    font-size:12px!important;
    font-weight:900!important;
    line-height:1!important;
    letter-spacing:.3px;
    text-transform:uppercase;
    cursor:pointer;
    white-space:nowrap;
    box-shadow:none!important;
    }

.subdomain-delete-btn i,
.subdomain-delete-btn .delete-text {
    display:inline-flex!important;
    align-items:center!important;
    line-height:1!important;
    }

.subdomain-delete-btn i {
    font-size:13px;
    }

.subdomain-delete-btn:hover {
    color:#fff!important;
    background:rgba(255,107,107,.20)!important;
    border-color:rgba(255,107,107,.42)!important;
    transform:translateY(-1px);
    }

.empty-state {
    min-height:160px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#aeb9cf;
    }

@media(max-width:980px) {
    .subdomain-layout {
        grid-template-columns:1fr;
        max-width:780px;
            }

    }

@media(max-width:760px) {
    .dashboard-page {
        padding:38px 14px 64px;
            }

    .creator-card,.my-subdomains {
        padding:22px;
        border-radius:24px;
            }

    .dash-card-head {
        align-items:flex-start;
            }

    .subdomain-item {
        grid-template-columns:1fr;
        align-items:stretch;
            }

    .subdomain-item form {
        width:100%;
            }

    .subdomain-delete-btn {
        width:100%!important;
        min-height:46px;
            }

    }

/* =========================================================
   TeamSpeak6 Pro pricing page
   ========================================================= */

.pro-plans-page {
    width:100%;
    max-width:1180px;
    margin:0 auto;
    padding:56px 22px 90px;
}

.pro-plans-hero {
    max-width:760px;
    margin:0 auto 40px;
    text-align:center;
}

.pro-plans-hero h1 {
    margin-top:4px;
    color:#fff;
    font-size:56px;
    line-height:1;
    letter-spacing:-2.4px;
    font-weight:900;
}

.pro-plans-hero p {
    max-width:620px;
    margin:18px auto 0;
    color:var(--muted);
    font-size:17px;
    line-height:1.7;
}

.pro-alert {
    max-width:900px;
    margin:0 auto 24px;
}

.pro-current-banner {
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:18px;
    max-width:900px;
    margin:0 auto 28px;
    padding:18px 20px;
    border:1px solid rgba(53,208,127,.24);
    border-radius:22px;
    background:
        linear-gradient(
            135deg,
            rgba(53,208,127,.08),
            rgba(255,255,255,.035)
        );
    box-shadow:
        0 24px 70px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.05);
    backdrop-filter:blur(18px);
}

.pro-current-icon {
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:16px;
    background:rgba(53,208,127,.13);
    border:1px solid rgba(53,208,127,.24);
    color:#9af0bf;
    font-size:20px;
}

.pro-current-banner span {
    display:block;
    margin-bottom:4px;
    color:#9af0bf;
    font-size:11px;
    font-weight:900;
    letter-spacing:1px;
    text-transform:uppercase;
}

.pro-current-banner strong {
    display:block;
    color:#fff;
    font-size:18px;
}

.pro-current-banner p {
    margin-top:5px;
    color:var(--muted);
    font-size:13px;
    line-height:1.5;
}

.pro-plan-grid {
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    align-items:stretch;
    gap:20px;
    max-width:1080px;
    margin:0 auto;
}

.pro-plan-card {
    position:relative;
    display:flex;
    flex-direction:column;
    min-width:0;
    padding:28px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.10);
    border-radius:28px;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.075),
            rgba(255,255,255,.025)
        );
    box-shadow:
        0 28px 80px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.06);
    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);
}

.pro-plan-card::before {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(
            circle at top right,
            rgba(11,95,168,.14),
            transparent 36%
        );
}

.pro-plan-card > * {
    position:relative;
    z-index:1;
}

.pro-plan-card.featured {
    border-color:rgba(75,160,255,.42);
    background:
        linear-gradient(
            145deg,
            rgba(11,95,168,.20),
            rgba(255,255,255,.035)
        );
    box-shadow:
        0 32px 90px rgba(0,0,0,.28),
        0 0 70px rgba(11,95,168,.12),
        inset 0 1px 0 rgba(255,255,255,.08);
}

.pro-best-value {
    position:absolute;
    top:18px;
    right:18px;
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:8px 11px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:999px;
    background:rgba(11,95,168,.20);
    color:#cce6ff;
    font-size:11px;
    font-weight:900;
    letter-spacing:.3px;
}

.pro-plan-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-bottom:22px;
}

.pro-plan-icon {
    width:50px;
    height:50px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.10);
    border-radius:17px;
    background:rgba(255,255,255,.055);
    color:#8fc7ff;
    font-size:19px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

.pro-plan-label {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 11px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:999px;
    background:rgba(255,255,255,.045);
    color:#b8c5d8;
    font-size:11px;
    font-weight:900;
    letter-spacing:.8px;
    text-transform:uppercase;
}

.pro-plan-card h2 {
    color:#fff;
    font-size:25px;
    line-height:1.1;
    letter-spacing:-.8px;
}

.pro-plan-price {
    display:flex;
    align-items:flex-end;
    gap:9px;
    margin:20px 0 18px;
}

.pro-plan-price strong {
    color:#fff;
    font-size:45px;
    line-height:.92;
    letter-spacing:-2px;
}

.pro-plan-price span {
    padding-bottom:4px;
    color:var(--muted2);
    font-size:13px;
    font-weight:800;
}

.pro-plan-description {
    min-height:50px;
    color:var(--muted);
    font-size:14px;
    line-height:1.65;
}

.pro-plan-features {
    display:grid;
    gap:13px;
    margin:25px 0 28px;
    padding:0;
    list-style:none;
}

.pro-plan-features li {
    display:flex;
    align-items:flex-start;
    gap:11px;
    color:#dce4ef;
    font-size:14px;
    line-height:1.5;
}

.pro-plan-features li i {
    flex:0 0 auto;
    width:21px;
    height:21px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:1px;
    border-radius:50%;
    background:rgba(53,208,127,.12);
    color:#85eaae;
    font-size:10px;
}

.pro-plan-features b {
    color:#fff;
}

.pro-plan-form {
    width:100%;
    margin-top:auto;
}

.pro-plan-button {
    width:100%;
    min-height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    margin-top:auto;
    padding:14px 17px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:16px;
    color:#fff;
    font:inherit;
    font-size:14px;
    font-weight:900;
    text-align:center;
    text-decoration:none;
    cursor:pointer;
    transition:
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease,
        filter .18s ease;
}

.pro-plan-button.primary {
    background:
        linear-gradient(
            135deg,
            rgba(11,95,168,.96),
            rgba(7,69,126,.96)
        );
    box-shadow:
        0 18px 45px rgba(7,69,126,.25),
        inset 0 1px 0 rgba(255,255,255,.14);
}

.pro-plan-button.secondary {
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.10),
            rgba(255,255,255,.045)
        );
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08);
}

.pro-plan-button:hover {
    color:#fff;
    border-color:rgba(255,255,255,.22);
    filter:brightness(1.08);
}

@media (max-width:980px) {
    .pro-plan-grid {
        grid-template-columns:1fr;
        max-width:560px;
    }

    .pro-plan-description {
        min-height:auto;
    }
}

@media (max-width:700px) {
    .pro-plans-page {
        padding:38px 14px 64px;
    }

    .pro-plans-hero {
        margin-bottom:30px;
    }

    .pro-plans-hero h1 {
        font-size:39px;
        letter-spacing:-1.5px;
    }

    .pro-current-banner {
        grid-template-columns:auto 1fr;
    }

    .pro-current-banner .ts-btn {
        grid-column:1 / -1;
        width:100%;
    }

    .pro-plan-card {
        padding:23px;
        border-radius:23px;
    }

    .pro-best-value {
        position:static;
        width:max-content;
        margin-bottom:16px;
    }

    .pro-plan-price strong {
        font-size:40px;
    }
}


/* ===== Unified site confirmation modal ===== */
.confirm-modal {
    padding:24px;
}

.confirm-card,
.confirm-card.confirm-card-wide {
    width:min(100%,620px);
    max-width:620px;
    padding:32px 34px;
    border-radius:26px;
    background:linear-gradient(180deg,#0d1727 0%,#09111e 100%);
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 34px 120px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.04);
}

.confirm-card h3 {
    margin:0;
    font-size:26px;
    line-height:1.2;
    letter-spacing:-.5px;
}

.confirm-card p {
    max-width:540px;
    margin:12px auto 0;
    color:#b5c0d2;
    font-size:15px;
    line-height:1.65;
    overflow-wrap:anywhere;
}

.confirm-actions {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    width:100%;
    margin-top:26px;
    flex-wrap:nowrap;
}

.confirm-actions form {
    display:contents;
}

.confirm-btn,
.confirm-actions .confirm-btn,
.confirm-actions button[type=submit] {
    width:auto!important;
    min-width:150px;
    min-height:48px;
    padding:13px 20px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    white-space:nowrap;
    line-height:1.2;
}

.confirm-btn.danger-action,
.confirm-btn.confirm.danger-action {
    background:linear-gradient(135deg,#b83232,#e04d4d);
    color:#fff;
}

@media(max-width:640px) {
    .confirm-modal {
        padding:14px;
    }

    .confirm-card,
    .confirm-card.confirm-card-wide {
        padding:24px 20px;
        border-radius:22px;
    }

    .confirm-actions {
        flex-direction:column;
        flex-wrap:nowrap;
    }

    .confirm-btn,
    .confirm-actions .confirm-btn,
    .confirm-actions button[type=submit] {
        width:100%!important;
        min-width:0;
    }
}

/* ========================================================================== 
   TEAMSpeak6 BLUEPRINT THEME — 2026
   Technical drawing aesthetic with drafting grid, measurements and linework.
   ========================================================================== */
:root {
    --bg:#07508d;
    --bg2:#06467c;
    --card:rgba(5,62,112,.74);
    --card2:rgba(7,75,132,.82);
    --line:rgba(211,240,255,.34);
    --line2:rgba(226,247,255,.62);
    --text:#f3fbff;
    --muted:#c2e2f2;
    --muted2:#91bfd7;
    --main:#d8f4ff;
    --main-light:#ffffff;
    --green:#a9f4d0;
    --danger:#ffd0d0;
    --shadow:none;
    --radius:2px;
    --blueprint-thin:rgba(207,239,255,.12);
    --blueprint-bold:rgba(224,246,255,.22);
    --blueprint-ink:#eaf9ff;
}

html,
body {
    background-color:var(--bg);
}

body {
    position:relative;
    font-family:"Inter",Arial,sans-serif;
    background:
        linear-gradient(rgba(255,255,255,.025),rgba(255,255,255,.025)),
        radial-gradient(circle at 50% 0%,rgba(75,171,226,.22),transparent 44%),
        linear-gradient(180deg,#075491 0%,#064a82 52%,#054477 100%);
    color:var(--text);
}

/* Fine 16px grid + stronger 80px construction grid */
body::before {
    content:"";
    display:block;
    position:fixed;
    inset:0;
    z-index:-3;
    pointer-events:none;
    background-image:
        linear-gradient(to right,var(--blueprint-bold) 1px,transparent 1px),
        linear-gradient(to bottom,var(--blueprint-bold) 1px,transparent 1px),
        linear-gradient(to right,var(--blueprint-thin) 1px,transparent 1px),
        linear-gradient(to bottom,var(--blueprint-thin) 1px,transparent 1px);
    background-size:80px 80px,80px 80px,16px 16px,16px 16px;
    background-position:-1px -1px;
}

body::after {
    content:"TEAMSpeak6.COM  •  SYSTEM BLUEPRINT  •  SCALE 1:1";
    position:fixed;
    left:18px;
    bottom:12px;
    z-index:-1;
    color:rgba(230,248,255,.34);
    font:700 9px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;
    letter-spacing:2px;
    pointer-events:none;
}

.hex-bg {
    display:block;
    position:fixed;
    inset:0;
    z-index:-2;
    opacity:.55;
    background:none;
}

.hex-bg::before,
.hex-bg::after {
    content:"";
    position:absolute;
    pointer-events:none;
}

.hex-bg::before {
    inset:28px;
    border:1px solid rgba(226,247,255,.18);
    background:
        linear-gradient(90deg,transparent calc(50% - .5px),rgba(226,247,255,.08) 50%,transparent calc(50% + .5px)),
        linear-gradient(transparent calc(50% - .5px),rgba(226,247,255,.08) 50%,transparent calc(50% + .5px));
}

.hex-bg::after {
    width:190px;
    height:190px;
    right:5vw;
    top:120px;
    border:1px dashed rgba(226,247,255,.18);
    border-radius:50%;
    box-shadow:0 0 0 24px rgba(226,247,255,.025),0 0 0 25px rgba(226,247,255,.12);
    opacity:.55;
}

::selection { background:#eaf9ff; color:#07508d; }

a { color:#fff; }
a:hover { color:#fff; opacity:.82; }

.navbar {
    height:76px;
    padding:0 32px;
    background:rgba(5,66,117,.87);
    border-bottom:1px solid var(--line2);
    backdrop-filter:blur(8px);
    box-shadow:none;
}

.navbar::before {
    content:"NAV / 01";
    position:absolute;
    left:calc(50% - 610px);
    bottom:-18px;
    color:rgba(234,249,255,.55);
    font:700 9px ui-monospace,SFMono-Regular,Consolas,monospace;
    letter-spacing:1.8px;
}

.navbar .site-logo { filter:brightness(0) invert(1) drop-shadow(0 0 6px rgba(255,255,255,.12)); }

.started-btn,.primary-btn,.login-btn,.register-btn,.form-btn,button[type=submit],
.checker-row button,.dashboard-create-btn,.ts-btn.primary,.settings-action-btn,.small-btn {
    color:#064a82;
    background:#eefaff;
    border:1px solid #fff;
    border-radius:1px;
    box-shadow:none;
    text-transform:uppercase;
    letter-spacing:.8px;
}

.started-btn:hover,.primary-btn:hover,.login-btn:hover,.register-btn:hover,.form-btn:hover,
button[type=submit]:hover,.checker-row button:hover,.dashboard-create-btn:hover,.ts-btn.primary:hover {
    color:#064a82;
    background:#fff;
    transform:none;
    filter:none;
}

.signin,.secondary-btn,.ts-btn.secondary {
    border-radius:1px;
    border:1px solid var(--line2);
    background:rgba(3,55,99,.35);
    color:#fff;
}

.hero { padding:88px 32px 92px; }
.hero-inner { gap:54px; }
.hero-left,.dns-panel { position:relative; }

.hero-left::before {
    content:"A-01 / HERO ELEVATION";
    display:block;
    width:max-content;
    margin-bottom:18px;
    color:rgba(234,249,255,.68);
    font:700 10px ui-monospace,SFMono-Regular,Consolas,monospace;
    letter-spacing:2px;
}

.hero h1 {
    font-size:clamp(48px,6vw,76px);
    line-height:1.02;
    letter-spacing:-3px;
    text-transform:uppercase;
}

.gradient {
    background:none;
    -webkit-text-fill-color:inherit;
    color:#fff;
    text-decoration:underline;
    text-decoration-thickness:1px;
    text-underline-offset:8px;
}

.hero p { color:var(--muted); }

.badge,.ready,.section-head span,.dash-badge,.price-card em,.ts-status,
.preview-cta,.availability,.alert,.settings-alert,.dash-alert,.limit-locked {
    border-radius:1px;
    box-shadow:none;
}

.badge {
    background:rgba(4,60,107,.38);
    border:1px dashed var(--line2);
    color:#fff;
    text-transform:uppercase;
    letter-spacing:1px;
}

.badge-dot { border-radius:0; background:#fff; box-shadow:none; transform:rotate(45deg); }

/* Universal blueprint panels */
.panel-card,.stat-card,.price-card,.feature-card,.steps div,.settings-card,
.login-security-card,.session-card,.api-card,.login-card,.register-card,.forgot-card,
.reset-card,.verify-card,.error-card,.subdomain-card,.creator-card,.my-subdomains,
.empty-state,.subdomain-item,.ts-panel,.ts-overview-card,.ts-device-item,
.subdomain-checker,.server-preview,.availability,.limit-row div,.ts-meta-grid div {
    border-radius:2px;
    border:1px solid var(--line2);
    background-color:rgba(5,63,112,.67);
    background-image:
        linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
        linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px);
    background-size:16px 16px;
    box-shadow:none;
    backdrop-filter:blur(5px);
}

.panel-card,.price-card,.login-card,.register-card,.forgot-card,.reset-card,.ts-panel {
    position:relative;
}

.panel-card::before,.login-card::before,.register-card::before,.forgot-card::before,
.reset-card::before,.ts-panel::before {
    content:"";
    position:absolute;
    inset:8px;
    border:1px dashed rgba(226,247,255,.25);
    border-radius:0;
    padding:0;
    background:none;
    -webkit-mask:none;
    mask:none;
    pointer-events:none;
}

.panel-card::after,.price-card::after,.stat-card::after,.ts-panel::after {
    content:"+";
    position:absolute;
    right:8px;
    bottom:4px;
    color:rgba(234,249,255,.62);
    font:400 16px ui-monospace,SFMono-Regular,Consolas,monospace;
}

.human-preview::after { display:none; }
.panel-glow { display:none; }

.panel-top small,.record-box small,.server-preview span,.form-label,.form-field label,
.section-head span,.ts-panel-head span,.ts-overview-card span,.ts-pending-panel span {
    color:#dff5ff;
    font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
    letter-spacing:1.2px;
    text-transform:uppercase;
}

.ready {
    background:transparent;
    color:#dfffee;
    border:1px solid rgba(210,255,234,.58);
}

.checker-row,.input-preview,.terminal-card,.form-input,input[type=text],input[type=password],
input[type=email],input[type=number],select,textarea,.form-field input,.form-field select,
.domain-fixed,.code-input {
    border-radius:1px;
    border:1px solid var(--line2);
    background:rgba(3,48,88,.72);
    color:#fff;
    box-shadow:none;
}

.form-input:focus,input:focus,select:focus,textarea:focus,.form-field input:focus,
.form-field select:focus,.code-input:focus {
    border-color:#fff;
    box-shadow:0 0 0 2px rgba(255,255,255,.18);
}

.checker-row { padding:7px; }
.checker-row span { color:#d5edf9; }
.checker-hint { color:#b7d8e8; }

.server-icon,.feature-card i,.verify-badge,.verify-icon,.ts-device-icon,
.logo-mark,.settings-head-icon,.ts-settings-avatar {
    border-radius:1px;
    background:transparent;
    border:1px solid var(--line2);
    color:#fff;
    box-shadow:none;
}

.server-icon img,.login-icon,.register-icon,.forgot-icon,.reset-icon,.error-logo {
    filter:brightness(0) invert(1);
}

.stats { position:relative; }
.stats::before {
    content:"180 px";
    position:absolute;
    left:0;
    right:0;
    top:-17px;
    color:rgba(234,249,255,.4);
    font:700 8px ui-monospace,SFMono-Regular,Consolas,monospace;
    letter-spacing:1px;
    border-top:1px solid rgba(234,249,255,.25);
    text-align:center;
}

.stat-card { position:relative; }
.stat-card h3,.price-card h3,.panel-top h3,.section-head h2 { color:#fff; }
.stat-card p,.price-card p,.feature-card p,.steps p { color:var(--muted); }

.section { position:relative; }
.section::before {
    content:"SECTION / 02";
    position:absolute;
    left:32px;
    top:34px;
    color:rgba(234,249,255,.48);
    font:700 9px ui-monospace,SFMono-Regular,Consolas,monospace;
    letter-spacing:2px;
}

.section-head span { background:transparent; border:1px dashed var(--line2); }
.section-head h2 { text-transform:uppercase; letter-spacing:-1px; }

.price-card.featured {
    border:2px solid #fff;
    box-shadow:none;
}

.price-card strong {
    color:#fff;
    font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
}

.price-card a,.preview-cta,.subdomain-item a,.ts-mini-link {
    border-radius:1px;
    background:transparent;
    border:1px solid var(--line2);
    color:#fff;
    text-transform:uppercase;
    letter-spacing:.7px;
}

.footer,footer {
    position:relative;
    background:rgba(4,58,103,.78);
    border-top:1px solid var(--line2);
    color:#c5e3f2;
}

.footer::before {
    content:"DRAWING NO. TS6-WEB-001   |   REV. 06";
    display:block;
    margin-bottom:10px;
    color:rgba(234,249,255,.58);
    font:700 9px ui-monospace,SFMono-Regular,Consolas,monospace;
    letter-spacing:1.6px;
}

.footer-links a { color:#e7f8ff; }

.user-btn,.user-dropdown,.user-dropdown a,.toggle-password,.settings-card button,
.settings-action-btn,.danger-btn,.small-btn,.confirm-card,.confirm-btn {
    border-radius:1px;
}

.user-btn {
    border:1px solid #fff;
    background:transparent;
    box-shadow:none;
}

.user-dropdown {
    background:#064a82;
    border:1px solid var(--line2);
    box-shadow:none;
}

.user-dropdown a:hover { background:rgba(255,255,255,.10); }

/* Technical corner marks */
.dns-panel::before,.dns-panel::after {
    content:"";
    position:absolute;
    width:26px;
    height:26px;
    pointer-events:none;
}
.dns-panel::before { left:-12px; top:-12px; border-left:1px solid #fff; border-top:1px solid #fff; }
.dns-panel::after { right:-12px; bottom:-12px; border-right:1px solid #fff; border-bottom:1px solid #fff; }

@media(max-width:980px) {
    .navbar::before { left:32px; }
    .hero { padding-top:68px; }
    .dns-panel { margin-top:20px; }
}

@media(max-width:560px) {
    body::after { display:none; }
    .hex-bg::before { inset:10px; }
    .hex-bg::after { display:none; }
    .navbar { padding:0 14px; }
    .navbar::before { left:14px; }
    .hero { padding:54px 18px 64px; }
    .hero h1 { letter-spacing:-1.8px; }
    .section::before { left:18px; top:24px; }
    .panel-card,.creator-card,.my-subdomains,.price-card { padding:22px; }
}

/* ========================================================================== 
   BLUEPRINT CLEANUP
   Keeps the blueprint grid, borders and technical linework while removing
   decorative placeholder labels and drawing annotations.
   ========================================================================== */
body::after,
.navbar::before,
.hero-left::before,
.stats::before,
.section::before,
.footer::before {
    content:none !important;
    display:none !important;
}

/* ========================================================================== 
   PROFESSIONAL BLUEPRINT UI COMPATIBILITY PASS
   Normalizes modals, dialogs, buttons, alerts, dropdowns and utility controls.
   ========================================================================== */
:root {
    --bp-surface:#063f72;
    --bp-surface-deep:#04345f;
    --bp-surface-soft:rgba(5,67,119,.94);
    --bp-border:rgba(222,245,255,.58);
    --bp-border-soft:rgba(222,245,255,.28);
    --bp-white:#f2fbff;
    --bp-muted:#b9d9e8;
    --bp-primary:#eefaff;
    --bp-primary-text:#07508d;
    --bp-danger:#e25a5a;
    --bp-success:#75e0ae;
    --bp-warning:#f1d47a;
}

/* Generic overlays used by dashboard/settings pages and third-party dialogs */
.confirm-modal,
.modal,
.popup,
.dialog-overlay,
.modal-overlay,
.ip-modal,
[data-modal-overlay] {
    background:rgba(1,20,39,.68);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}

.confirm-backdrop,
.modal-backdrop,
.popup-backdrop {
    background:rgba(1,20,39,.72);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}

.confirm-card,
.confirm-card.confirm-card-wide,
.modal-content,
.modal-card,
.popup-content,
.popup-card,
.dialog-card,
.ip-modal-card,
.swal2-popup {
    position:relative;
    overflow:hidden;
    color:var(--bp-white);
    background-color:var(--bp-surface-soft) !important;
    background-image:
        linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
        linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) !important;
    background-size:16px 16px !important;
    border:1px solid var(--bp-border) !important;
    border-radius:2px !important;
    box-shadow:0 30px 90px rgba(0,22,43,.46) !important;
}

.confirm-card::before,
.modal-content::before,
.modal-card::before,
.popup-content::before,
.popup-card::before,
.dialog-card::before,
.ip-modal-card::before,
.swal2-popup::before {
    content:"";
    position:absolute;
    inset:8px;
    border:1px dashed var(--bp-border-soft);
    pointer-events:none;
}

.confirm-card > *,
.modal-content > *,
.modal-card > *,
.popup-content > *,
.popup-card > *,
.dialog-card > *,
.ip-modal-card > *,
.swal2-popup > * {
    position:relative;
    z-index:1;
}

.confirm-card h3,
.modal-content h2,.modal-content h3,
.modal-card h2,.modal-card h3,
.popup-content h2,.popup-content h3,
.popup-card h2,.popup-card h3,
.dialog-card h2,.dialog-card h3,
.swal2-title {
    color:var(--bp-white) !important;
    text-transform:none;
}

.confirm-card p,
.modal-content p,
.modal-card p,
.popup-content p,
.popup-card p,
.dialog-card p,
.swal2-html-container {
    color:var(--bp-muted) !important;
}

/* Modal information/status icons */
.confirm-icon,
.modal-icon,
.popup-icon,
.dialog-icon,
.swal2-icon {
    border-radius:2px !important;
    background:rgba(238,250,255,.08) !important;
    border:1px solid var(--bp-border) !important;
    color:var(--bp-white) !important;
    box-shadow:none !important;
}
.confirm-icon.danger,.modal-icon.danger,.popup-icon.danger { color:#ffd0d0 !important; border-color:rgba(255,163,163,.62) !important; background:rgba(226,90,90,.12) !important; }
.confirm-icon.success,.modal-icon.success,.popup-icon.success { color:#c8ffe4 !important; border-color:rgba(117,224,174,.62) !important; background:rgba(117,224,174,.10) !important; }
.confirm-icon.warning,.modal-icon.warning,.popup-icon.warning { color:#fff0bd !important; border-color:rgba(241,212,122,.62) !important; background:rgba(241,212,122,.10) !important; }

/* Prevent the global submit rule from turning modal actions into white blocks */
.confirm-actions .confirm-btn,
.confirm-actions button,
.confirm-actions button[type=button],
.confirm-actions button[type=submit],
.modal-actions button,
.popup-actions button,
.dialog-actions button,
.swal2-actions button {
    min-width:150px;
    min-height:48px;
    padding:13px 20px;
    border-radius:1px !important;
    border:1px solid var(--bp-border) !important;
    box-shadow:none !important;
    font:800 14px Inter,Arial,sans-serif;
    letter-spacing:.45px;
    text-transform:none;
    cursor:pointer;
    transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease;
}

/* Secondary / Close / Cancel */
.confirm-btn.cancel,
.confirm-actions .cancel,
.confirm-actions [data-action="cancel"],
.modal-actions .cancel,
.modal-actions .close,
.popup-actions .cancel,
.popup-actions .close,
.dialog-actions .cancel,
.swal2-cancel {
    background:rgba(3,48,88,.72) !important;
    color:var(--bp-white) !important;
    border-color:var(--bp-border) !important;
}

/* Primary / Copy / Confirm */
.confirm-btn.confirm,
.confirm-actions .confirm,
.confirm-actions .copy,
.confirm-actions [data-action="copy"],
.confirm-actions [data-action="confirm"],
.modal-actions .primary,
.modal-actions .copy,
.popup-actions .primary,
.popup-actions .copy,
.dialog-actions .primary,
.swal2-confirm {
    background:var(--bp-primary) !important;
    color:var(--bp-primary-text) !important;
    border-color:#fff !important;
}

.confirm-btn.danger-action,
.confirm-btn.confirm.danger-action,
.confirm-actions .danger,
.modal-actions .danger,
.popup-actions .danger,
.swal2-deny {
    background:rgba(153,42,42,.72) !important;
    color:#fff !important;
    border-color:rgba(255,170,170,.72) !important;
}

.confirm-actions button:hover,
.modal-actions button:hover,
.popup-actions button:hover,
.dialog-actions button:hover,
.swal2-actions button:hover {
    transform:translateY(-1px) !important;
    filter:none !important;
}
.confirm-btn.cancel:hover,.confirm-actions .cancel:hover,.modal-actions .cancel:hover,.modal-actions .close:hover { background:rgba(7,76,132,.9) !important; border-color:#fff !important; }
.confirm-btn.confirm:hover,.confirm-actions .confirm:hover,.confirm-actions .copy:hover,.modal-actions .primary:hover,.modal-actions .copy:hover,.swal2-confirm:hover { background:#fff !important; color:var(--bp-primary-text) !important; }

/* Modal values, copy fields and readonly data */
.ip-modal-value,
.modal-value,
.popup-value,
.copy-value,
.copy-field,
.confirm-card input[readonly],
.modal-content input[readonly],
.popup-content input[readonly] {
    width:100%;
    min-height:50px;
    margin-top:16px;
    padding:14px 16px;
    border-radius:1px !important;
    border:1px solid var(--bp-border-soft) !important;
    background:rgba(2,38,72,.78) !important;
    color:var(--bp-white) !important;
    box-shadow:none !important;
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:13px;
    line-height:1.6;
    overflow-wrap:anywhere;
}

/* Site-wide button consistency beyond modals */
button,.btn,.ts-btn,.confirm-btn,.settings-action-btn,.small-btn,.danger-btn,
.subdomain-delete-btn,.pro-plan-button,.checker-row button,.user-btn {
    font-family:Inter,Arial,sans-serif;
}

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
    outline:2px solid #fff;
    outline-offset:3px;
}

button:disabled,.btn:disabled,.ts-btn:disabled,[aria-disabled="true"] {
    opacity:.52;
    cursor:not-allowed;
    transform:none !important;
}

/* Alerts and badges */
.alert,.settings-alert,.dash-alert,.availability,.verify-msg,.msg,
.toast,.notification,.flash-message {
    border-radius:1px !important;
    box-shadow:none !important;
}
.alert.success,.settings-alert.success,.dash-alert.success,.availability.available,
.toast.success,.notification.success {
    color:#cbffe4 !important;
    background:rgba(44,139,94,.18) !important;
    border-color:rgba(117,224,174,.55) !important;
}
.alert.error,.settings-alert.error,.dash-alert.error,.availability.taken,.verify-msg,
.toast.error,.notification.error {
    color:#ffd2d2 !important;
    background:rgba(159,47,47,.18) !important;
    border-color:rgba(255,151,151,.55) !important;
}
.alert.warning,.settings-alert.warning,.dash-alert.warning,
.toast.warning,.notification.warning {
    color:#fff1bf !important;
    background:rgba(148,119,30,.18) !important;
    border-color:rgba(241,212,122,.55) !important;
}

/* Dropdown/menu consistency */
.user-dropdown,.dropdown-menu,.context-menu,.select-menu {
    color:var(--bp-white);
    background-color:rgba(5,67,119,.98) !important;
    background-image:
        linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px),
        linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px) !important;
    background-size:16px 16px !important;
    border:1px solid var(--bp-border) !important;
    border-radius:2px !important;
    box-shadow:0 20px 55px rgba(0,22,43,.38) !important;
}
.user-dropdown a,.dropdown-menu a,.context-menu a,.select-menu a { border-radius:1px !important; }
.user-dropdown a:hover,.dropdown-menu a:hover,.context-menu a:hover,.select-menu a:hover { background:rgba(238,250,255,.12) !important; }

/* Scrollbar matching the blueprint UI */
* { scrollbar-color:rgba(238,250,255,.42) rgba(3,48,88,.45); scrollbar-width:thin; }
*::-webkit-scrollbar { width:9px; height:9px; }
*::-webkit-scrollbar-track { background:rgba(3,48,88,.45); }
*::-webkit-scrollbar-thumb { background:rgba(238,250,255,.38); border:2px solid rgba(3,48,88,.65); }
*::-webkit-scrollbar-thumb:hover { background:rgba(238,250,255,.58); }

@media(max-width:640px) {
    .confirm-card,.confirm-card.confirm-card-wide,.modal-content,.modal-card,.popup-content,.popup-card,.dialog-card,.ip-modal-card,.swal2-popup {
        width:100% !important;
        max-width:100% !important;
        padding:26px 20px !important;
    }
    .confirm-actions,.modal-actions,.popup-actions,.dialog-actions,.swal2-actions {
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:10px !important;
    }
    .confirm-actions button,.modal-actions button,.popup-actions button,.dialog-actions button,.swal2-actions button {
        width:100% !important;
        min-width:0 !important;
    }
}

/* ========================================================================== 
   TEAMSPEAK6 DARK ADMIN BLUEPRINT THEME
   Matches the darker admin-panel palette across the landing page, auth,
   dashboard, settings, forms, tables, cards, modals and mobile layouts.
   ========================================================================== */
:root {
    --bg:#021827;
    --bg2:#032238;
    --card:#052941;
    --card2:#07324f;
    --line:rgba(112,203,255,.23);
    --line2:rgba(122,210,255,.42);
    --text:#f4faff;
    --muted:#a9c9dc;
    --muted2:#769bb2;
    --main:#0b79b5;
    --main-light:#73cfff;
    --green:#6ee7b7;
    --danger:#ff8b8b;
    --shadow:0 24px 70px rgba(0,8,18,.44);
    --bp-surface:#052941;
    --bp-surface-deep:#021827;
    --bp-surface-soft:rgba(5,41,65,.97);
    --bp-border:rgba(112,203,255,.43);
    --bp-border-soft:rgba(112,203,255,.22);
    --bp-white:#f4faff;
    --bp-muted:#a9c9dc;
    --bp-primary:#78d2ff;
    --bp-primary-text:#021827;
}

html,body {
    background:#021827 !important;
}

body {
    background-image:
        radial-gradient(circle at 70% 10%,rgba(15,108,160,.14),transparent 34%),
        linear-gradient(180deg,#021827 0%,#032238 52%,#021827 100%) !important;
}

.hex-bg {
    opacity:1 !important;
    background-image:
        linear-gradient(rgba(65,164,219,.11) 1px,transparent 1px),
        linear-gradient(90deg,rgba(65,164,219,.11) 1px,transparent 1px),
        linear-gradient(rgba(88,188,239,.055) 1px,transparent 1px),
        linear-gradient(90deg,rgba(88,188,239,.055) 1px,transparent 1px) !important;
    background-size:84px 84px,84px 84px,16px 16px,16px 16px !important;
    background-position:center center !important;
}
.hex-bg::before {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(1,16,28,.74),transparent 22%,transparent 78%,rgba(1,16,28,.74));
}
.hex-bg::after { opacity:.18 !important; }

.navbar {
    background:rgba(2,24,39,.96) !important;
    border-bottom:1px solid rgba(112,203,255,.30) !important;
    box-shadow:0 8px 28px rgba(0,8,18,.30);
    backdrop-filter:blur(16px);
}

footer,.footer {
    background:rgba(2,24,39,.96) !important;
    border-top:1px solid rgba(112,203,255,.28) !important;
    color:#8fb4ca !important;
}

/* Dark admin-style surfaces throughout the site */
.panel-card,.stat-card,.price-card,.feature-card,.steps div,.settings-card,
.login-security-card,.session-card,.api-card,.login-card,.register-card,.forgot-card,
.reset-card,.verify-card,.error-card,.subdomain-card,.creator-card,.my-subdomains,
.empty-state,.subdomain-item,.ts-panel,.ts-overview-card,.ts-device-item,
.subdomain-checker,.server-preview,.availability,.limit-row div,.ts-meta-grid div,
.security-note,.record-box,.preview-list div,.ts-switch-row,.ts-activity-item,
.pro-plan-card,.pro-feature-card,.pro-summary-card,.session-item,.trusted-device-item {
    background-color:rgba(4,36,58,.94) !important;
    background-image:
        linear-gradient(90deg,rgba(89,184,235,.035) 1px,transparent 1px),
        linear-gradient(rgba(89,184,235,.035) 1px,transparent 1px) !important;
    background-size:16px 16px !important;
    border-color:rgba(112,203,255,.28) !important;
    box-shadow:0 18px 55px rgba(0,8,18,.28) !important;
}

.panel-card::before,.login-card::before,.register-card::before,.forgot-card::before,
.reset-card::before,.ts-panel::before {
    border-color:rgba(112,203,255,.20) !important;
}
.panel-card::after,.price-card::after,.stat-card::after,.ts-panel::after {
    color:rgba(112,203,255,.55) !important;
}

.hero h1,.section-head h2,.dashboard-hero h1,.ts-settings-hero h1,
.login-title,.register-title,.forgot-title,.reset-title,.verify-title,
.panel-top h3,.price-card h3,.settings-head h1,.ts-panel-head h2 {
    color:#f7fbff !important;
    text-shadow:0 2px 18px rgba(0,0,0,.22);
}

.gradient {
    color:#8edcff !important;
    text-decoration-color:rgba(112,203,255,.65) !important;
}

.hero p,.section-head p,.price-card p,.feature-card p,.steps p,.dashboard-hero p,
.login-sub,.register-sub,.forgot-sub,.reset-sub,.verify-desc,.verify-message,
.settings-head p,.ts-settings-hero p,.ts-panel-head p,.ts-overview-card p {
    color:#a9c9dc !important;
}

.badge,.dash-badge,.section-head span {
    background:rgba(5,52,82,.84) !important;
    border-color:rgba(112,203,255,.38) !important;
    color:#cbeeff !important;
}

/* Inputs and editable controls */
.checker-row,.input-preview,.terminal-card,.form-input,input[type=text],input[type=password],
input[type=email],input[type=number],select,textarea,.form-field input,.form-field select,
.domain-fixed,.code-input,.copy-field,.copy-value,.modal-value,.popup-value,
.confirm-card input[readonly],.modal-content input[readonly],.popup-content input[readonly] {
    background:#021522 !important;
    border-color:rgba(112,203,255,.24) !important;
    color:#f4faff !important;
}
input::placeholder,textarea::placeholder { color:#668da5 !important; }
.form-input:focus,input:focus,select:focus,textarea:focus,.form-field input:focus,
.form-field select:focus,.code-input:focus {
    border-color:#73cfff !important;
    box-shadow:0 0 0 3px rgba(82,188,242,.14) !important;
}
select option { background:#021827 !important; color:#f4faff !important; }

/* Unified admin-style actions */
.started-btn,.primary-btn,.login-btn,.register-btn,.form-btn,button[type=submit],
.dashboard-create-btn,.ts-btn.primary,.settings-action-btn,.small-btn,.checker-row button,
.user-btn,.preview-cta,.price-card a,.subdomain-item a,.ts-mini-link,
.confirm-btn.confirm,.confirm-actions .confirm,.confirm-actions .copy,
.modal-actions .primary,.modal-actions .copy,.popup-actions .primary,.popup-actions .copy,
.dialog-actions .primary,.swal2-confirm {
    background:#78d2ff !important;
    color:#021827 !important;
    border:1px solid #9de2ff !important;
    box-shadow:0 12px 32px rgba(18,137,198,.20) !important;
}
.started-btn:hover,.primary-btn:hover,.login-btn:hover,.register-btn:hover,.form-btn:hover,
button[type=submit]:hover,.dashboard-create-btn:hover,.ts-btn.primary:hover,
.settings-action-btn:hover,.small-btn:hover,.checker-row button:hover,.user-btn:hover,
.preview-cta:hover,.price-card a:hover,.subdomain-item a:hover,.ts-mini-link:hover,
.confirm-actions .confirm:hover,.confirm-actions .copy:hover,.modal-actions .primary:hover,
.modal-actions .copy:hover,.swal2-confirm:hover {
    background:#a8e7ff !important;
    color:#021827 !important;
    border-color:#d4f4ff !important;
    filter:none !important;
}

.secondary-btn,.ts-btn.secondary,.confirm-btn.cancel,.confirm-actions .cancel,
.modal-actions .cancel,.modal-actions .close,.popup-actions .cancel,.popup-actions .close,
.dialog-actions .cancel,.swal2-cancel {
    background:#062c46 !important;
    color:#e8f7ff !important;
    border:1px solid rgba(112,203,255,.38) !important;
}
.secondary-btn:hover,.ts-btn.secondary:hover,.confirm-actions .cancel:hover,
.modal-actions .cancel:hover,.modal-actions .close:hover,.popup-actions .cancel:hover,
.popup-actions .close:hover,.swal2-cancel:hover {
    background:#0a4267 !important;
    border-color:#78d2ff !important;
    color:#fff !important;
}

.danger-btn,.ts-btn.danger,.confirm-actions .danger,.modal-actions .danger,
.popup-actions .danger,.swal2-deny {
    background:rgba(151,46,55,.34) !important;
    color:#ffd8dc !important;
    border-color:rgba(255,132,143,.48) !important;
}

.ready,.ts-status.active {
    background:rgba(34,139,94,.20) !important;
    color:#9ff0c9 !important;
    border-color:rgba(94,226,166,.46) !important;
}

/* Modals and dropdowns use the same dark admin panels */
.confirm-modal,.modal,.popup,.dialog-overlay,.modal-overlay,.ip-modal,[data-modal-overlay],
.confirm-backdrop,.modal-backdrop,.popup-backdrop {
    background:rgba(0,11,20,.80) !important;
}
.confirm-card,.confirm-card.confirm-card-wide,.modal-content,.modal-card,.popup-content,
.popup-card,.dialog-card,.ip-modal-card,.swal2-popup {
    background-color:#041f33 !important;
    background-image:
        linear-gradient(90deg,rgba(89,184,235,.035) 1px,transparent 1px),
        linear-gradient(rgba(89,184,235,.035) 1px,transparent 1px) !important;
    background-size:16px 16px !important;
    border-color:rgba(112,203,255,.34) !important;
    box-shadow:0 30px 90px rgba(0,5,12,.58) !important;
}
.confirm-icon,.modal-icon,.popup-icon,.dialog-icon,.swal2-icon {
    background:#062c46 !important;
    border-color:rgba(112,203,255,.36) !important;
    color:#8edcff !important;
}
.user-dropdown,.dropdown-menu,.context-menu,.select-menu,.mobile-menu {
    background-color:#031e31 !important;
    background-image:
        linear-gradient(90deg,rgba(89,184,235,.035) 1px,transparent 1px),
        linear-gradient(rgba(89,184,235,.035) 1px,transparent 1px) !important;
    border-color:rgba(112,203,255,.32) !important;
    box-shadow:0 24px 70px rgba(0,6,14,.55) !important;
}
.user-dropdown a:hover,.dropdown-menu a:hover,.context-menu a:hover,.select-menu a:hover,
.mobile-menu a:hover { background:rgba(112,203,255,.10) !important; }

/* Tables */
table,.settings-table { background:transparent !important; }
th {
    background:rgba(6,47,74,.88) !important;
    color:#dff5ff !important;
    border-color:rgba(112,203,255,.24) !important;
}
td {
    color:#c9deeb !important;
    border-color:rgba(112,203,255,.14) !important;
}
tbody tr:hover { background:rgba(112,203,255,.055) !important; }

/* Small UI details */
a { color:#7ed6ff; }
a:hover { color:#c9f1ff; }
.form-label,.form-field label,.panel-top small,.record-box small,.server-preview span,
.ts-panel-head span,.ts-overview-card span,.ts-pending-panel span { color:#91d9fb !important; }
.checker-hint,.password-rules,.form-help,.ts-muted-note { color:#789eb4 !important; }
.server-icon,.feature-card i,.verify-badge,.verify-icon,.ts-device-icon,
.logo-mark,.settings-head-icon,.ts-settings-avatar {
    background:#062c46 !important;
    border-color:rgba(112,203,255,.34) !important;
    color:#7fd7ff !important;
}

* { scrollbar-color:rgba(112,203,255,.42) #021827; }
*::-webkit-scrollbar-track { background:#021827 !important; }
*::-webkit-scrollbar-thumb { background:rgba(112,203,255,.36) !important; border-color:#021827 !important; }

@media(max-width:560px) {
    .navbar { background:rgba(2,24,39,.98) !important; }
    .panel-card,.creator-card,.my-subdomains,.price-card,.login-card,.register-card,
    .forgot-card,.reset-card,.verify-card,.error-card { box-shadow:0 16px 40px rgba(0,8,18,.32) !important; }
}

/* ===== Final destructive action polish =====
   Keep delete/remove controls visually distinct from primary blue actions,
   including when they are submit buttons inside forms. */
.subdomain-item form {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin:0 !important;
}

.subdomain-delete-btn,
.subdomain-item .subdomain-delete-btn,
.subdomain-item form .subdomain-delete-btn,
.subdomain-item form button.subdomain-delete-btn,
.subdomain-item form button[type="submit"].subdomain-delete-btn {
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-direction:row !important;
    gap:9px !important;
    width:118px !important;
    min-width:118px !important;
    max-width:118px !important;
    min-height:46px !important;
    height:46px !important;
    padding:0 15px !important;
    margin:0 !important;
    border:1px solid rgba(255,119,132,.48) !important;
    border-radius:12px !important;
    background:linear-gradient(180deg,rgba(119,31,43,.62),rgba(79,20,30,.74)) !important;
    color:#ffdce0 !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 24px rgba(45,5,12,.20) !important;
    font-family:inherit !important;
    font-size:12px !important;
    font-weight:900 !important;
    line-height:1 !important;
    letter-spacing:.45px !important;
    text-align:center !important;
    text-transform:uppercase !important;
    white-space:nowrap !important;
    cursor:pointer !important;
    transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease !important;
}

.subdomain-delete-btn i,
.subdomain-delete-btn svg,
.subdomain-delete-btn .delete-text {
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 auto !important;
    margin:0 !important;
    padding:0 !important;
    line-height:1 !important;
    color:inherit !important;
}

.subdomain-delete-btn i,
.subdomain-delete-btn svg {
    width:14px !important;
    min-width:14px !important;
    font-size:13px !important;
}

.subdomain-delete-btn:hover,
.subdomain-item form button[type="submit"].subdomain-delete-btn:hover {
    background:linear-gradient(180deg,rgba(164,45,59,.78),rgba(111,27,39,.88)) !important;
    border-color:rgba(255,158,167,.78) !important;
    color:#fff !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 28px rgba(60,7,16,.30) !important;
    filter:none !important;
    transform:translateY(-1px) !important;
}

.subdomain-delete-btn:focus-visible {
    outline:0 !important;
    box-shadow:0 0 0 3px rgba(255,112,126,.18),0 12px 28px rgba(60,7,16,.28) !important;
}

.subdomain-delete-btn:active {
    transform:translateY(0) !important;
}

@media(max-width:560px) {
    .subdomain-item form,
    .subdomain-delete-btn,
    .subdomain-item form button[type="submit"].subdomain-delete-btn {
        width:100% !important;
        max-width:none !important;
    }
}

/* ===== PUBLIC UI FINAL CONSISTENCY PASS ===== */
:root {
  --bg:#021827;
  --bg2:#031e31;
  --card:#04243a;
  --card2:#052b45;
  --line:rgba(112,203,255,.24);
  --line2:rgba(112,203,255,.38);
  --text:#f4f9fc;
  --muted:#a8c0cf;
  --muted2:#7799ad;
  --main:#55b9ec;
  --main-light:#79d3ff;
  --green:#42d89a;
  --danger:#ff7886;
  --shadow:0 24px 70px rgba(0,7,15,.42);
}

html,body { background:#021827 !important; }
body {
  background-image:
    linear-gradient(90deg,rgba(90,190,240,.045) 1px,transparent 1px),
    linear-gradient(rgba(90,190,240,.045) 1px,transparent 1px),
    radial-gradient(circle at 50% -10%,rgba(17,102,153,.20),transparent 38%) !important;
  background-size:16px 16px,16px 16px,100% 100% !important;
  color:var(--text) !important;
}
.hex-bg { display:none !important; }

/* Password visibility controls: exact vertical centering inside input */
.password-group { position:relative !important; }
.password-group .form-input,
.password-group input[type="password"],
.password-group input[type="text"] { padding-right:58px !important; }
.toggle-password,
.password-group .toggle-password,
.ts-form .password-group .toggle-password {
  position:absolute !important;
  top:auto !important;
  right:12px !important;
  bottom:9px !important;
  transform:none !important;
  width:36px !important;
  height:36px !important;
  min-width:36px !important;
  min-height:36px !important;
  padding:0 !important;
  margin:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid rgba(112,203,255,.16) !important;
  border-radius:8px !important;
  background:#082b42 !important;
  color:#c8eaff !important;
  box-shadow:none !important;
  line-height:1 !important;
  z-index:5 !important;
}
.toggle-password i,
.toggle-password svg {
  display:block !important;
  margin:0 !important;
  line-height:1 !important;
  font-size:14px !important;
  color:inherit !important;
}
.toggle-password:hover {
  background:#0b3a58 !important;
  border-color:#71ccf8 !important;
  color:#fff !important;
  transform:none !important;
  filter:none !important;
}
.toggle-password:focus-visible {
  outline:0 !important;
  box-shadow:0 0 0 3px rgba(112,203,255,.16) !important;
}

/* Unified cards and page surfaces */
.panel-card,.price-card,.feature-card,.steps>div,.login-card,.register-card,
.forgot-card,.reset-card,.verify-card,.error-card,.subdomain-card,.creator-card,
.my-subdomains,.ts-panel,.ts-overview-card,.settings-card,.login-security-card,
.session-card,.api-card,.legal-card,.pro-card,.success-card {
  background-color:rgba(3,31,50,.94) !important;
  background-image:
    linear-gradient(90deg,rgba(112,203,255,.028) 1px,transparent 1px),
    linear-gradient(rgba(112,203,255,.028) 1px,transparent 1px) !important;
  background-size:16px 16px !important;
  border-color:rgba(112,203,255,.30) !important;
  box-shadow:0 22px 65px rgba(0,7,15,.36) !important;
}

/* Inputs/selects/textareas */
.form-input,input[type=text],input[type=password],input[type=email],input[type=number],
input[type=search],select,textarea,.domain-fixed,.checker-row,.code-input {
  background:#011521 !important;
  border-color:rgba(112,203,255,.25) !important;
  color:#f3f9fc !important;
  box-shadow:none !important;
}
input::placeholder,textarea::placeholder { color:#7195aa !important; opacity:1 !important; }
.form-input:focus,input:focus,select:focus,textarea:focus,.code-input:focus {
  border-color:#69c8f6 !important;
  box-shadow:0 0 0 3px rgba(105,200,246,.14) !important;
}

/* Primary buttons */
.started-btn,.primary-btn,.login-btn,.register-btn,.forgot-btn,.form-btn,
.dashboard-create-btn,.ts-btn.primary,.verify-btn,.pro-plan-button.primary,
.checker-row button,.preview-cta,.price-card a,.btn.blue,
button[type="submit"]:not(.subdomain-delete-btn):not(.danger-btn):not(.ts-btn.danger):not(.confirm-btn) {
  background:linear-gradient(180deg,#78d2ff,#59bced) !important;
  border:1px solid #8edcff !important;
  color:#031827 !important;
  box-shadow:0 12px 30px rgba(45,159,217,.18) !important;
  font-weight:900 !important;
}
.started-btn:hover,.primary-btn:hover,.login-btn:hover,.register-btn:hover,.forgot-btn:hover,
.form-btn:hover,.dashboard-create-btn:hover,.ts-btn.primary:hover,.verify-btn:hover,
.pro-plan-button.primary:hover,.checker-row button:hover,.preview-cta:hover,.price-card a:hover,.btn.blue:hover {
  background:linear-gradient(180deg,#9be1ff,#70cafa) !important;
  color:#01131f !important;
  filter:none !important;
  transform:translateY(-1px) !important;
}

/* Secondary buttons */
.secondary-btn,.ts-btn.secondary,.pro-plan-button.secondary,.confirm-btn.cancel,
.error-actions .btn-secondary,.verify-btn.secondary {
  background:#062b43 !important;
  border:1px solid rgba(112,203,255,.44) !important;
  color:#dff5ff !important;
}

/* Destructive buttons */
.danger-btn,.ts-btn.danger,.confirm-btn.danger-action,.ts-small-btn.remove {
  background:linear-gradient(180deg,rgba(133,38,50,.72),rgba(83,23,33,.82)) !important;
  border:1px solid rgba(255,126,139,.52) !important;
  color:#ffe1e4 !important;
}

/* Alerts / status */
.alert,.settings-alert,.dash-alert,.availability,.verify-msg,.msg {
  border-radius:10px !important;
}
.success,.settings-alert.success,.dash-alert.success,.availability.available {
  background:rgba(38,145,98,.18) !important;
  border-color:rgba(86,224,160,.40) !important;
  color:#a5f1cc !important;
}
.error,.settings-alert.error,.dash-alert.error,.availability.taken {
  background:rgba(145,42,54,.20) !important;
  border-color:rgba(255,121,134,.42) !important;
  color:#ffd5da !important;
}

/* Header/footer/legal/utility pages */
.navbar,footer,.footer {
  background:rgba(1,22,36,.96) !important;
  border-color:rgba(112,203,255,.22) !important;
}
.user-btn {
  background:#062e48 !important;
  border:1px solid rgba(112,203,255,.36) !important;
  color:#e6f7ff !important;
  box-shadow:none !important;
}

/* Keep action icons and labels centered everywhere */
button,a.ts-btn,a.primary-btn,a.secondary-btn,a.started-btn,a.pro-plan-button,
.confirm-btn,.ts-small-btn,.subdomain-delete-btn {
  align-items:center !important;
  justify-content:center !important;
  gap:9px !important;
}
button i,button svg,a.ts-btn i,a.primary-btn i,a.secondary-btn i,.confirm-btn i {
  flex:0 0 auto !important;
  margin:0 !important;
}

@media(max-width:560px) {
  .toggle-password,.password-group .toggle-password { right:10px !important; bottom:9px !important; }
}


/* ===== Unified public TeamSpeak navigation ===== */
.nav-inner {
  max-width:1480px !important;
}

.public-nav {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  margin-left:auto;
  margin-right:18px;
}

.public-nav > a,
.public-nav-dropdown-toggle {
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 14px;
  border:1px solid transparent;
  background:transparent;
  color:#b9d4e4;
  font:inherit;
  font-size:14px;
  font-weight:800;
  white-space:nowrap;
  cursor:pointer;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}

.public-nav > a:hover,
.public-nav-dropdown-toggle:hover,
.public-nav-dropdown:focus-within .public-nav-dropdown-toggle {
  color:#fff;
  background:rgba(112,203,255,.08);
  border-color:rgba(112,203,255,.25);
}

.public-nav-dropdown {
  position:relative;
}

.public-nav-dropdown-toggle i {
  font-size:10px;
  transition:transform .18s ease;
}

.public-nav-dropdown:hover .public-nav-dropdown-toggle i,
.public-nav-dropdown:focus-within .public-nav-dropdown-toggle i,
.public-nav-dropdown.open .public-nav-dropdown-toggle i {
  transform:rotate(180deg);
}

.public-nav-dropdown-menu {
  position:absolute;
  top:calc(100% + 10px);
  left:50%;
  z-index:2100;
  width:210px;
  padding:7px;
  border:1px solid rgba(112,203,255,.30);
  background:#031e31;
  box-shadow:0 22px 55px rgba(0,7,15,.48);
  opacity:0;
  visibility:hidden;
  transform:translate(-50%,-5px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s ease;
}

.public-nav-dropdown-menu::before {
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-11px;
  height:11px;
}

.public-nav-dropdown:hover .public-nav-dropdown-menu,
.public-nav-dropdown:focus-within .public-nav-dropdown-menu,
.public-nav-dropdown.open .public-nav-dropdown-menu {
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0);
}

.public-nav-dropdown-menu a {
  display:flex;
  align-items:center;
  gap:10px;
  min-height:42px;
  padding:0 12px;
  color:#bed8e7;
  font-size:14px;
  font-weight:800;
  border:1px solid transparent;
}

.public-nav-dropdown-menu a i {
  width:17px;
  text-align:center;
  color:#79d3ff;
}

.public-nav-dropdown-menu a:hover {
  color:#fff;
  background:rgba(112,203,255,.09);
  border-color:rgba(112,203,255,.18);
}

.public-nav-toggle {
  display:none;
  width:44px !important;
  min-width:44px !important;
  height:42px !important;
  min-height:42px !important;
  padding:0 !important;
  border:1px solid rgba(112,203,255,.34) !important;
  background:#062b43 !important;
  box-shadow:none !important;
  flex-direction:column;
  gap:4px !important;
}

.public-nav-toggle span {
  display:block;
  width:18px;
  height:2px;
  background:#dff5ff;
  transition:transform .18s ease,opacity .18s ease;
}

.public-nav-toggle.active span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.public-nav-toggle.active span:nth-child(2) { opacity:0; }
.public-nav-toggle.active span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }

@media(max-width:1180px) {
  .navbar { padding-left:18px !important; padding-right:18px !important; }
  .navbar .site-logo { width:195px !important; }
  .public-nav > a,.public-nav-dropdown-toggle { padding-left:10px; padding-right:10px; }
}

@media(max-width:980px) {
  .nav-inner { position:relative; }
  .public-nav-toggle { display:flex !important; margin-left:auto; }
  .public-nav {
    position:absolute;
    top:calc(100% + 14px);
    left:0;
    right:0;
    z-index:2050;
    display:none;
    margin:0;
    padding:10px;
    flex-direction:column;
    align-items:stretch;
    gap:5px;
    border:1px solid rgba(112,203,255,.30);
    background:#031e31;
    box-shadow:0 24px 65px rgba(0,7,15,.52);
  }
  .public-nav.open { display:flex; }
  .public-nav > a,.public-nav-dropdown-toggle {
    width:100%;
    justify-content:space-between;
    min-height:46px;
    padding:0 14px;
    border-color:rgba(112,203,255,.10);
    background:rgba(112,203,255,.035);
  }
  .public-nav-dropdown-menu {
    position:static;
    width:100%;
    margin-top:5px;
    padding:5px;
    display:none;
    opacity:1;
    visibility:visible;
    transform:none !important;
    box-shadow:none;
    background:#021827;
  }
  .public-nav-dropdown:hover .public-nav-dropdown-menu { display:none; }
  .public-nav-dropdown.open .public-nav-dropdown-menu { display:block; }
  .public-nav-dropdown-menu::before { display:none; }
  .nav-right { margin-left:8px; }
}

@media(max-width:560px) {
  .navbar .site-logo { width:160px !important; }
  .public-nav-toggle { width:40px !important; min-width:40px !important; }
  .nav-right { gap:8px !important; }
  .started-btn { padding:11px 12px !important; font-size:12px !important; }
  .user-btn span { max-width:76px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}

/* ===== Public header Login — match navigation items ===== */
.nav-right > .signin {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:42px !important;
  padding:0 14px !important;
  margin:0 !important;
  border:1px solid transparent !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#b9d4e4 !important;
  font-size:14px !important;
  font-weight:800 !important;
  line-height:1 !important;
  white-space:nowrap !important;
  box-shadow:none !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  transition:background .18s ease,border-color .18s ease,color .18s ease !important;
}

.nav-right > .signin:hover,
.nav-right > .signin:focus-visible {
  color:#fff !important;
  background:rgba(112,203,255,.08) !important;
  border-color:rgba(112,203,255,.25) !important;
  opacity:1 !important;
  transform:none !important;
  filter:none !important;
}

@media(max-width:980px) {
  .nav-right > .signin {
    min-height:42px !important;
    padding:0 12px !important;
  }
}

@media(max-width:560px) {
  .nav-right > .signin {
    display:inline-flex !important;
    min-height:40px !important;
    padding:0 10px !important;
    font-size:12px !important;
  }
}

/* ===== Mobile public navigation alignment fix ===== */
@media(max-width:980px) {
  .public-nav > a,
  .public-nav .public-nav-dropdown-toggle {
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    width:100% !important;
    min-height:48px !important;
    padding:0 16px !important;
    margin:0 !important;
    text-align:left !important;
    border:1px solid rgba(112,203,255,.16) !important;
    background:rgba(112,203,255,.035) !important;
    color:#c5dce9 !important;
    font-size:14px !important;
    font-weight:800 !important;
    line-height:1 !important;
  }

  .public-nav > a:hover,
  .public-nav .public-nav-dropdown-toggle:hover,
  .public-nav .public-nav-dropdown:focus-within .public-nav-dropdown-toggle,
  .public-nav .public-nav-dropdown.open .public-nav-dropdown-toggle {
    color:#fff !important;
    background:rgba(112,203,255,.09) !important;
    border-color:rgba(112,203,255,.32) !important;
  }

  .public-nav-dropdown {
    width:100% !important;
  }

  .public-nav-dropdown-toggle i {
    margin-left:auto !important;
    flex:0 0 auto !important;
  }

  .public-nav-dropdown-menu {
    margin-top:5px !important;
    padding:5px !important;
    border:1px solid rgba(112,203,255,.16) !important;
  }

  .public-nav-dropdown-menu a {
    justify-content:flex-start !important;
    min-height:44px !important;
    padding:0 14px !important;
    text-align:left !important;
  }
}