:root {
    --premium-primary: #e11d48;
    --premium-primary-dark: #9f1239;
    --premium-accent: #2563eb;
    --premium-accent-soft: #dbeafe;
    --premium-bg: #fff1f2;
    --premium-surface: rgba(255, 255, 255, .92);
    --premium-surface-solid: #ffffff;
    --premium-border: rgba(225, 29, 72, .12);
    --premium-text: #172033;
    --premium-muted: #64748b;
    --premium-sidebar: #111827;
    --premium-sidebar-deep: #0f172a;
    --premium-shadow: 0 18px 45px rgba(136, 19, 55, .10);
    --premium-shadow-soft: 0 10px 26px rgba(15, 23, 42, .08);
    --premium-radius-lg: 18px;
    --premium-radius-md: 12px;
    --premium-transition: all .22s ease;
}

html,
body {
    color: var(--premium-text);
    background: linear-gradient(135deg, #fff7f8 0%, #f8fafc 45%, #eef6ff 100%);
    font-family: "Inter", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

body.gray-bg,
.gray-bg,
.wrapper.wrapper-content,
.wrapper-content {
    background: linear-gradient(135deg, #fff7f8 0%, #f8fafc 46%, #eef6ff 100%) !important;
}

a,
button,
.btn,
.menuItem,
.J_menuItem,
.page-tabs a,
.dropdown-toggle {
    transition: var(--premium-transition);
}

a:focus,
button:focus,
.btn:focus,
.form-control:focus {
    outline: none !important;
}

.form-control:focus,
.single-line:focus {
    border-color: rgba(225, 29, 72, .55) !important;
    box-shadow: 0 0 0 3px rgba(225, 29, 72, .10) !important;
}

.navbar-default.navbar-static-side {
    background:
        radial-gradient(circle at 15% 8%, rgba(225, 29, 72, .30), transparent 28%),
        radial-gradient(circle at 100% 28%, rgba(37, 99, 235, .24), transparent 30%),
        linear-gradient(180deg, var(--premium-sidebar) 0%, var(--premium-sidebar-deep) 100%) !important;
    box-shadow: 12px 0 36px rgba(15, 23, 42, .20);
}

.logo,
.navbar-default .logo {
    height: 62px;
    padding: 0 22px;
    line-height: 62px;
    background: rgba(255, 255, 255, .04) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.logo-lg {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: .6px;
    color: #fff;
}

.logo-lg:before {
    content: "";
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-right: 9px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fb7185, #60a5fa);
    box-shadow: 0 0 18px rgba(251, 113, 133, .75);
}

.user-panel {
    margin: 14px 14px 12px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 16px;
    background: rgba(255, 255, 255, .06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.user-panel > .image > img,
.user-panel img.img-circle {
    border: 2px solid rgba(255, 255, 255, .75);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .24);
}

.user-panel > .info,
.user-panel > .info > p,
.user-panel > .info > a {
    color: rgba(255, 255, 255, .88) !important;
}

body.mini-navbar .user-panel {
    width: 50px;
    height: 58px;
    margin: 10px auto;
    padding: 8px 0;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255, 255, 255, .05);
}

body.mini-navbar .user-panel .pull-left.image {
    float: none !important;
    width: 34px;
    height: 34px;
    margin: 4px auto 0;
}

body.mini-navbar .user-panel img.img-circle {
    width: 34px !important;
    height: 34px !important;
    max-width: 34px !important;
    display: block;
    object-fit: cover;
}

body.mini-navbar .user-panel > .info {
    display: none !important;
}

body.mini-navbar #side-menu > li:first-child {
    height: 74px;
    overflow: hidden;
}

#side-menu.nav > li > a {
    margin: 3px 10px;
    padding: 12px 15px;
    border-radius: 12px;
    color: rgba(255, 255, 255, .78);
    font-weight: 600;
}

#side-menu.nav > li > a i {
    width: 20px;
    color: rgba(251, 113, 133, .92);
}

#side-menu.nav > li > a:hover,
#side-menu.nav > li.active > a,
#side-menu .nav-second-level > li > a:hover,
#side-menu .nav-third-level > li > a:hover,
#side-menu .nav-four-level > li > a:hover {
    color: #fff !important;
    background: linear-gradient(135deg, rgba(225, 29, 72, .92), rgba(37, 99, 235, .82)) !important;
    box-shadow: 0 12px 26px rgba(225, 29, 72, .22);
}

#side-menu .nav-second-level,
#side-menu .nav-third-level,
#side-menu .nav-four-level {
    background: rgba(15, 23, 42, .38);
}

#side-menu .nav-second-level li a,
#side-menu .nav-third-level li a,
#side-menu .nav-four-level li a {
    margin: 2px 10px 2px 24px;
    padding: 10px 14px;
    border-radius: 10px;
    color: rgba(255, 255, 255, .68);
}

#page-wrapper {
    background: linear-gradient(135deg, #fff7f8 0%, #f8fafc 46%, #eef6ff 100%) !important;
}

.navbar.navbar-static-top {
    min-height: 62px;
    margin: 14px 16px 0 !important;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 18px;
    background: rgba(255, 255, 255, .82) !important;
    box-shadow: var(--premium-shadow-soft);
    backdrop-filter: blur(14px);
}

.navbar-header .minimalize-styl-2,
.navbar .minimalize-styl-2 {
    margin: 13px 5px 5px 18px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--premium-primary), var(--premium-accent)) !important;
    box-shadow: 0 10px 20px rgba(225, 29, 72, .22);
}

.navbar-top-links > li > a,
.navbar-top-links .dropdown-toggle,
.navbar-top-links .roll-nav {
    color: #334155 !important;
}

.navbar-top-links > li > a:hover,
.navbar-top-links > li > a:focus {
    color: var(--premium-primary) !important;
    background: rgba(225, 29, 72, .07) !important;
}

.content-tabs {
    margin: 10px 16px 0;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 16px;
    background: rgba(255, 255, 255, .76) !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .06);
    overflow: hidden;
}

.content-tabs .roll-nav,
.page-tabs a {
    border-color: rgba(226, 232, 240, .9) !important;
    color: #64748b;
    background: transparent !important;
}

.page-tabs a.active,
.page-tabs a:hover,
.content-tabs .roll-nav:hover {
    color: var(--premium-primary) !important;
    background: linear-gradient(135deg, rgba(255, 241, 242, .95), rgba(219, 234, 254, .95)) !important;
}

.J_mainContent,
#content-main {
    margin: 12px 16px 16px;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .06);
}

.wrapper-content {
    padding: 18px 20px 28px;
}

.ibox,
.form-horizontal,
.select-table,
.select-list,
.bootstrap-table,
.fixed-table-container,
.panel,
.modal-content {
    border-radius: var(--premium-radius-lg) !important;
}

.ibox,
.panel,
.select-table,
.select-list,
.fixed-table-toolbar,
.modal-content {
    border: 1px solid var(--premium-border) !important;
    background: var(--premium-surface) !important;
    box-shadow: var(--premium-shadow-soft);
}

.ibox-title,
.panel-heading,
.modal-header {
    border-color: rgba(225, 29, 72, .10) !important;
    border-radius: var(--premium-radius-lg) var(--premium-radius-lg) 0 0 !important;
    background: linear-gradient(135deg, rgba(255, 241, 242, .88), rgba(239, 246, 255, .88)) !important;
    color: var(--premium-text);
}

.ibox-title h5,
.panel-title,
.modal-title {
    font-weight: 800;
    color: #111827;
}

.ibox-content,
.panel-body,
.modal-body {
    border-color: rgba(225, 29, 72, .08) !important;
    background: rgba(255, 255, 255, .78) !important;
}

.select-list ul li input,
.select-list ul li select,
.form-control,
.single-line,
.input-sm,
.bootstrap-select .dropdown-toggle {
    border-color: rgba(148, 163, 184, .28) !important;
    border-radius: 10px !important;
    background-color: rgba(255, 255, 255, .92) !important;
    color: #1f2937;
}

.btn {
    border-radius: 10px !important;
    font-weight: 700;
    box-shadow: none;
}

.btn-primary,
.btn-success,
.btn-info {
    border: none !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--premium-primary), var(--premium-accent)) !important;
    box-shadow: 0 10px 20px rgba(225, 29, 72, .18);
}

.btn-primary:hover,
.btn-success:hover,
.btn-info:hover {
    filter: brightness(1.04);
    transform: translateY(-1px);
    box-shadow: 0 14px 26px rgba(225, 29, 72, .24);
}

.btn-danger,
.btn-warning {
    border: none !important;
    color: #fff !important;
    background: linear-gradient(135deg, #f97316, #e11d48) !important;
}

.btn-default {
    border-color: rgba(148, 163, 184, .28) !important;
    color: #334155 !important;
    background: rgba(255, 255, 255, .9) !important;
}

.btn-default:hover {
    color: var(--premium-primary) !important;
    border-color: rgba(225, 29, 72, .26) !important;
    background: #fff1f2 !important;
}

.bootstrap-table .fixed-table-container,
.fixed-table-container {
    border: 1px solid rgba(225, 29, 72, .10) !important;
    box-shadow: none;
}

.table,
.bootstrap-table .table {
    background: var(--premium-surface-solid);
}

.table > thead > tr > th,
.bootstrap-table .table thead > tr > th {
    border-bottom: 1px solid rgba(225, 29, 72, .12) !important;
    background: linear-gradient(135deg, #fff1f2, #eff6ff) !important;
    color: #334155;
    font-weight: 800;
}

.table > tbody > tr > td,
.bootstrap-table .table tbody > tr > td {
    border-color: rgba(226, 232, 240, .70) !important;
}

.table-hover > tbody > tr:hover,
.bootstrap-table .table-hover > tbody > tr:hover,
.fixed-table-container tbody tr:hover {
    background: rgba(255, 241, 242, .72) !important;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
    border-color: var(--premium-primary) !important;
    background: linear-gradient(135deg, var(--premium-primary), var(--premium-accent)) !important;
}

.label,
.badge {
    border-radius: 999px;
    font-weight: 700;
}

.label-primary,
.badge-primary,
.badge-info {
    background: linear-gradient(135deg, var(--premium-primary), var(--premium-accent)) !important;
}

.layui-layer,
.layui-layer-dialog,
.layui-layer-page {
    border-radius: 18px !important;
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .20) !important;
}

.layui-layer-title {
    border-bottom: 1px solid rgba(225, 29, 72, .10) !important;
    background: linear-gradient(135deg, #fff1f2, #eff6ff) !important;
    color: #111827 !important;
    font-weight: 800;
}

#scroll-up {
    right: 22px;
    bottom: 22px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--premium-primary), var(--premium-accent));
    box-shadow: 0 14px 28px rgba(225, 29, 72, .24);
}

body.signin {
    min-height: 100vh;
    margin: 0;
    display: flow-root;
    overflow-x: hidden;
    color: #f8fafc;
    background:
        radial-gradient(circle at 12% 18%, rgba(168, 85, 247, .38), transparent 28%),
        radial-gradient(circle at 84% 16%, rgba(14, 165, 233, .26), transparent 30%),
        radial-gradient(circle at 72% 84%, rgba(244, 63, 94, .24), transparent 32%),
        linear-gradient(135deg, #050816 0%, #111827 42%, #1e1b4b 100%) !important;
}

body.signin:before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .88), transparent 86%);
}

body.signin:after {
    content: "";
    position: fixed;
    left: -8%;
    right: -8%;
    bottom: 3%;
    height: 128px;
    pointer-events: none;
    opacity: .16;
    background:
        repeating-linear-gradient(90deg,
            transparent 0 20px,
            rgba(255,255,255,.22) 20px 22px,
            transparent 22px 38px),
        linear-gradient(90deg, transparent, rgba(251, 113, 133, .55), rgba(96, 165, 250, .55), transparent);
    filter: blur(.2px);
    border-radius: 50%;
    transform: perspective(780px) rotateX(68deg);
}

.voice-login-shell {
    position: relative;
    z-index: 1;
    width: min(1080px, calc(100% - 36px));
    margin: 0 auto;
    padding: 6vh 0 32px;
}

.voice-login-brand {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}

.voice-login-brand p {
    margin: 0 0 4px;
    color: rgba(203, 213, 225, .72);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2.4px;
}

.voice-login-brand h1 {
    margin: 0;
    color: #fff;
    font-size: 30px;
    font-weight: 900;
    letter-spacing: .4px;
}

.voice-brand-mark {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1px solid rgba(255, 255, 255, .20);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.05));
    box-shadow: 0 18px 48px rgba(14, 165, 233, .18), inset 0 1px 0 rgba(255,255,255,.22);
    backdrop-filter: blur(16px);
}

.voice-brand-mark span {
    width: 5px;
    border-radius: 999px;
    background: linear-gradient(180deg, #fda4af, #60a5fa);
    box-shadow: 0 0 16px rgba(96, 165, 250, .62);
}

.voice-brand-mark span:nth-child(1) { height: 18px; }
.voice-brand-mark span:nth-child(2) { height: 30px; }
.voice-brand-mark span:nth-child(3) { height: 40px; }
.voice-brand-mark span:nth-child(4) { height: 26px; }
.voice-brand-mark span:nth-child(5) { height: 34px; }

.signinpanel.voice-login-card {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding-top: 0;
    color: #f8fafc;
}

.signinpanel.voice-login-card .row {
    min-height: 560px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 32px;
    background: linear-gradient(135deg, rgba(15, 23, 42, .72), rgba(30, 27, 75, .56));
    box-shadow: 0 34px 110px rgba(2, 6, 23, .46);
    backdrop-filter: blur(22px);
    overflow: hidden;
}

.signinpanel.voice-login-card .col-sm-7,
.signinpanel.voice-login-card .col-sm-5 {
    padding: 54px 56px;
}

.voice-login-intro {
    position: relative;
    min-height: 560px;
    background:
        radial-gradient(circle at 22% 22%, rgba(251, 113, 133, .30), transparent 30%),
        radial-gradient(circle at 74% 70%, rgba(59, 130, 246, .26), transparent 34%),
        linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.035)) !important;
}

.voice-login-intro:after {
    content: "";
    position: absolute;
    left: 56px;
    right: auto;
    bottom: 38px;
    width: 260px;
    height: 52px;
    opacity: .36;
    background:
        linear-gradient(90deg, rgba(96,165,250,.04), rgba(255,255,255,.20), rgba(251,113,133,.05));
    mask-image: repeating-linear-gradient(90deg,
        transparent 0 14px,
        #000 14px 18px,
        transparent 18px 32px);
    border-radius: 18px;
    z-index: 0;
}

.voice-login-form-wrap {
    position: relative;
    background:
        radial-gradient(circle at 88% 12%, rgba(96, 165, 250, .16), transparent 34%),
        radial-gradient(circle at 18% 84%, rgba(251, 113, 133, .10), transparent 32%),
        linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.04)) !important;
    border-left: 1px solid rgba(255,255,255,.12);
}

.voice-login-form-wrap:before {
    display: none;
}

.voice-login-form-wrap form {
    position: relative;
    z-index: 1;
}

.voice-login-badge {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 12px;
    margin-bottom: 24px;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 999px;
    color: #dbeafe;
    background: rgba(255,255,255,.10);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
}

.signin-info,
.signin-info h2,
.signin-info h4,
.signin-info li,
.signin-info strong,
.signin-info a {
    color: rgba(255, 255, 255, .94) !important;
}

.signin-info h2 {
    margin: 0 0 18px;
    font-size: 42px;
    line-height: 1.18;
    font-weight: 900;
    letter-spacing: -.8px;
}

.voice-login-subtitle {
    max-width: 470px;
    margin: 0 0 28px;
    color: rgba(226, 232, 240, .78);
    font-size: 15px;
    line-height: 1.9;
}

.voice-feature-list {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 24px !important;
}

.voice-feature-list li {
    min-height: 48px;
    margin: 0;
    padding: 13px 14px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 16px;
    background: rgba(15, 23, 42, .20);
    backdrop-filter: blur(12px);
    color: rgba(248,250,252,.88) !important;
    font-size: 13px;
}

.voice-feature-list li i {
    color: #fb7185;
}

.signinpanel form {
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.voice-form-heading span {
    display: block;
    margin-bottom: 10px;
    color: #fda4af;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.signinpanel form h4 {
    color: #f8fafc;
    font-size: 28px;
    font-weight: 900;
}

.signinpanel form p {
    margin-bottom: 24px;
    color: rgba(203, 213, 225, .72);
}

.signinpanel .form-control {
    height: 48px !important;
    margin-top: 16px;
    padding: 0 16px !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    border-radius: 15px !important;
    background-color: rgba(15, 23, 42, .48) !important;
    color: #f8fafc;
    box-shadow: none !important;
}

.signinpanel .form-control::placeholder {
    color: rgba(203, 213, 225, .58);
}

.signinpanel .uname,
.signinpanel .pword,
.signinpanel .code {
    background-image: none !important;
}

.signinpanel .form-control:focus {
    border-color: rgba(251, 113, 133, .68) !important;
    background-color: rgba(15, 23, 42, .68) !important;
    box-shadow: 0 0 0 4px rgba(251, 113, 133, .14) !important;
}

.signinpanel .checkbox-custom label {
    color: rgba(226, 232, 240, .78);
}

.signinpanel .checkbox-custom label:before {
    border-color: rgba(255,255,255,.20);
    background: rgba(15, 23, 42, .58);
}

.signinpanel .checkbox-custom input[type="checkbox"]:checked + label:after {
    color: #fda4af;
}

.signinpanel .btn-block {
    height: 48px;
    margin-top: 20px;
    margin-bottom: 0;
    border: 0 !important;
    border-radius: 15px !important;
    color: #fff !important;
    background: linear-gradient(135deg, #e11d48 0%, #7c3aed 52%, #2563eb 100%) !important;
    box-shadow: 0 18px 34px rgba(124, 58, 237, .28);
    font-weight: 900;
    letter-spacing: 1.2px;
}

.signinpanel .btn-block:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 22px 42px rgba(124, 58, 237, .36);
}

.voice-login-footer {
    margin-top: 12px;
    padding: 0 4px;
    border-top: 0;
    color: rgba(203, 213, 225, .68);
    font-size: 12px;
}

.voice-main-page {
    min-height: 100vh;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 16%, rgba(225, 29, 72, .20), transparent 30%),
        radial-gradient(circle at 84% 20%, rgba(37, 99, 235, .20), transparent 32%),
        radial-gradient(circle at 50% 100%, rgba(124, 58, 237, .18), transparent 36%),
        linear-gradient(135deg, #fff7f8 0%, #f8fafc 44%, #eef6ff 100%) !important;
}

.voice-main-stage {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
}

.voice-main-card {
    position: relative;
    width: min(760px, 100%);
    padding: 70px 56px 58px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: 34px;
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 34px 90px rgba(136, 19, 55, .12), inset 0 1px 0 rgba(255,255,255,.86);
    backdrop-filter: blur(20px);
    overflow: hidden;
}

.voice-main-card:before,
.voice-main-card:after {
    content: "";
    position: absolute;
    pointer-events: none;
    border-radius: 999px;
}

.voice-main-card:before {
    width: 260px;
    height: 260px;
    left: -92px;
    top: -92px;
    background: radial-gradient(circle, rgba(251, 113, 133, .26), transparent 68%);
}

.voice-main-card:after {
    width: 280px;
    height: 280px;
    right: -110px;
    bottom: -120px;
    background: radial-gradient(circle, rgba(96, 165, 250, .26), transparent 68%);
}

.voice-main-orbit {
    position: absolute;
    left: 50%;
    top: 48px;
    width: 220px;
    height: 220px;
    margin-left: -110px;
    border-radius: 50%;
    border: 1px solid rgba(225, 29, 72, .12);
    background: radial-gradient(circle, rgba(255,255,255,.42), rgba(255,255,255,0) 68%);
}

.voice-main-orbit:before,
.voice-main-orbit:after {
    content: "";
    position: absolute;
    inset: 18px;
    border-radius: 50%;
    border: 1px dashed rgba(37, 99, 235, .20);
}

.voice-main-orbit:after {
    inset: 44px;
    border-color: rgba(225, 29, 72, .18);
}

.voice-main-logo {
    position: relative;
    z-index: 1;
    width: 132px;
    height: 132px;
    margin: 0 auto 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid rgba(225, 29, 72, .16);
    border-radius: 36px;
    background: linear-gradient(145deg, rgba(255,255,255,.90), rgba(255,241,242,.70));
    box-shadow: 0 24px 54px rgba(225, 29, 72, .16), inset 0 1px 0 rgba(255,255,255,.92);
}

.voice-main-logo span {
    width: 7px;
    border-radius: 999px;
    background: linear-gradient(180deg, #e11d48 0%, #7c3aed 50%, #2563eb 100%);
    box-shadow: 0 0 18px rgba(124, 58, 237, .26);
}

.voice-main-logo span:nth-child(1) { height: 28px; opacity: .60; }
.voice-main-logo span:nth-child(2) { height: 46px; opacity: .78; }
.voice-main-logo span:nth-child(3) { height: 68px; }
.voice-main-logo span:nth-child(4) { height: 88px; }
.voice-main-logo span:nth-child(5) { height: 62px; }
.voice-main-logo span:nth-child(6) { height: 42px; opacity: .78; }
.voice-main-logo span:nth-child(7) { height: 30px; opacity: .60; }

.voice-main-eyebrow {
    position: relative;
    z-index: 1;
    margin: 0 0 12px;
    color: #e11d48;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 3px;
}

.voice-main-card h1 {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #0f172a;
    font-size: 44px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: -1px;
}

.voice-main-desc {
    position: relative;
    z-index: 1;
    max-width: 600px;
    margin: 20px auto 0;
    color: #64748b;
    font-size: 15px;
    line-height: 1.9;
}

.voice-main-tags {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 34px;
}

.voice-main-tags span {
    padding: 9px 14px;
    border: 1px solid rgba(225, 29, 72, .12);
    border-radius: 999px;
    color: #334155;
    background: rgba(255, 255, 255, .70);
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .05);
}

@media (max-width: 768px) {
    .navbar.navbar-static-top,
    .content-tabs,
    .J_mainContent,
    #content-main {
        margin-left: 8px !important;
        margin-right: 8px !important;
        border-radius: 14px;
    }

    .voice-login-shell {
        width: calc(100% - 24px);
        padding-top: 22px;
    }

    .voice-login-brand {
        margin-bottom: 16px;
    }

    .voice-login-brand h1 {
        font-size: 22px;
    }

    .voice-brand-mark {
        width: 48px;
        height: 48px;
        border-radius: 15px;
    }

    .signinpanel.voice-login-card {
        padding: 28px 14px;
    }

    .signinpanel.voice-login-card .row {
        min-height: auto;
        border-radius: 24px;
    }

    .signinpanel.voice-login-card .col-sm-7,
    .signinpanel.voice-login-card .col-sm-5 {
        padding: 28px 24px;
    }

    .voice-login-intro {
        min-height: auto;
    }

    .voice-login-intro:after {
        display: none;
    }

    .signin-info h2 {
        font-size: 30px;
    }

    .voice-feature-list {
        grid-template-columns: 1fr;
    }

    .voice-main-card {
        padding: 50px 24px 42px;
        border-radius: 26px;
    }

    .voice-main-logo {
        width: 104px;
        height: 104px;
        border-radius: 28px;
    }

    .voice-main-card h1 {
        font-size: 30px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *:before,
    *:after {
        transition: none !important;
        animation: none !important;
    }
}

.login-mode-tabs {
    display: flex;
    gap: 8px;
    margin: 18px 0 14px;
    padding: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
}

.login-mode-tabs .login-mode {
    flex: 1;
    padding: 8px 10px;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    text-align: center;
    transition: all .2s ease;
}

.login-mode-tabs .login-mode:hover,
.login-mode-tabs .login-mode:focus {
    color: #fff;
    text-decoration: none;
}

.login-mode-tabs .login-mode.active {
    color: #fff;
    background: linear-gradient(135deg, #8b5cf6 0%, #22d3ee 100%);
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.28);
}

#btnSendPhoneCode {
    height: 44px;
    border: 0;
    border-radius: 12px;
    color: #6d28d9;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.92);
}

#btnSendPhoneCode[disabled] {
    color: rgba(109, 40, 217, 0.55);
    cursor: not-allowed;
}

.voice-login-form-wrap form#signupForm {
    height: auto;
}

.phone-login-panel {
    margin-bottom: 4px;
}

.phone-login-panel .row.m-t {
    margin-top: 10px;
}

.phone-login-panel .form-control,
.phone-login-panel #btnSendPhoneCode {
    margin-top: 0;
}

.phone-login-panel + .account-captcha-panel + .checkbox-custom,
.phone-login-panel + .checkbox-custom,
.signinpanel .checkbox-custom {
    margin-top: 12px;
    margin-bottom: 0;
}

.signinpanel form#signupForm > .btn-block {
    margin-top: 14px;
}

.signinpanel.voice-login-card .phone-login-panel .row {
    min-height: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    overflow: visible;
}

.signinpanel.voice-login-card .phone-login-panel .col-xs-7,
.signinpanel.voice-login-card .phone-login-panel .col-xs-5 {
    padding-left: 5px;
    padding-right: 5px;
}

.signinpanel.voice-login-card .phone-login-panel .row.m-t {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 0;
    margin-right: 0;
}

.signinpanel.voice-login-card .phone-login-panel .row.m-t .col-xs-7,
.signinpanel.voice-login-card .phone-login-panel .row.m-t .col-xs-5 {
    float: none;
    padding-left: 0;
    padding-right: 0;
}

.signinpanel.voice-login-card .phone-login-panel .row.m-t .col-xs-7 {
    flex: 1 1 auto;
    width: auto;
}

.signinpanel.voice-login-card .phone-login-panel .row.m-t .col-xs-5 {
    flex: 0 0 128px;
    width: 128px;
}

.phone-login-panel .phone-code-line {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-top: 10px;
}

.phone-login-panel .phone-code-line .sms-code {
    flex: 1 1 auto;
    min-width: 0;
    margin-top: 0;
}

.phone-login-panel .phone-code-line #btnSendPhoneCode {
    flex: 0 0 128px;
    width: 128px;
    margin-top: 0;
}