:root {
    color-scheme: dark;
    --primary: #4de8ff;
    --primary-dark: #20b8dc;
    --primary-light: #91f3ff;
    --bg: #030712;
    --bg-card: rgba(8, 18, 36, 0.78);
    --bg-nav: rgba(3, 9, 22, 0.76);
    --text: #eefbff;
    --text-color: #eefbff;
    --text-light: #b3c8d6;
    --border: rgba(77, 232, 255, 0.18);
    --success: #20e3b2;
    --error: #ff5f8f;
    --shadow: rgba(0, 0, 0, 0.34);
    --radius: 18px;
    --font: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
    --ai-violet: #8b5cf6;
    --ai-cyan: #4de8ff;
    --ai-mint: #20e3b2;
    --ai-blue: #246bfe;
    --ai-panel: rgba(7, 17, 34, 0.76);
    --ai-panel-solid: #09162a;
    --ai-line: rgba(77, 232, 255, 0.16);
    --ai-glow: 0 0 42px rgba(77, 232, 255, 0.13);
    --surface-card: linear-gradient(145deg, rgba(8, 23, 44, 0.9), rgba(8, 16, 34, 0.78));
    --surface-card-border: rgba(77, 232, 255, 0.18);
    --surface-card-shadow: inset 0 1px rgba(255,255,255,.045), 0 20px 58px rgba(0,0,0,.3);
    --surface-card-muted: rgba(13, 30, 51, 0.78);
}

html[data-theme="ai"] .view-stat,
html[data-theme="ai"] .ranking-privacy-note {
    border-color: rgba(77, 232, 255, 0.16);
    background: linear-gradient(145deg, rgba(4, 16, 38, 0.86), rgba(8, 31, 53, 0.58));
    box-shadow: inset 0 1px rgba(255,255,255,.03), 0 12px 34px rgba(0, 0, 0, .2);
}
html[data-theme="ai"] .view-stat-icon {
    color: #7cf6ff;
    background: rgba(77, 232, 255, .1);
    box-shadow: 0 0 20px rgba(77, 232, 255, .12);
}

html[data-theme="ai"] {
    background: #030712;
}

html[data-theme="ai"] body {
    position: relative;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 12% 16%, rgba(36, 107, 254, 0.16), transparent 30rem),
        radial-gradient(circle at 87% 8%, rgba(139, 92, 246, 0.18), transparent 32rem),
        linear-gradient(150deg, #02050d 0%, #06101f 52%, #020610 100%);
}

.neural-environment {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.neural-environment canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.68;
}

.neural-grid-layer {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(77, 232, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(77, 232, 255, 0.035) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent 88%);
    transform: perspective(700px) rotateX(54deg) scale(1.7) translateY(16%);
    transform-origin: center bottom;
}

.neural-scanline {
    position: absolute;
    left: 0;
    right: 0;
    top: -10%;
    height: 26%;
    background: linear-gradient(to bottom, transparent, rgba(77, 232, 255, 0.045), transparent);
    animation: neuralScan 12s linear infinite;
}

.neural-aurora {
    position: absolute;
    width: 48vw;
    height: 48vw;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.12;
    animation: auroraDrift 18s ease-in-out infinite alternate;
}

.neural-aurora-one {
    top: -28vw;
    right: -10vw;
    background: var(--ai-violet);
}

.neural-aurora-two {
    left: -24vw;
    bottom: -30vw;
    background: var(--ai-cyan);
    animation-delay: -7s;
}

@keyframes neuralScan {
    from { transform: translateY(-30vh); }
    to { transform: translateY(125vh); }
}

@keyframes auroraDrift {
    0% { transform: translate3d(-2%, -3%, 0) scale(0.9); }
    100% { transform: translate3d(8%, 10%, 0) scale(1.12); }
}

html[data-theme="ai"] .navbar,
html[data-theme="ai"] .main-content,
html[data-theme="ai"] .footer,
html[data-theme="ai"] .alert,
html[data-theme="ai"] .scroll-top {
    position: relative;
    z-index: 2;
}

html[data-theme="ai"] .navbar {
    z-index: 1000;
    background: rgba(2, 8, 20, 0.72);
    border-bottom-color: rgba(77, 232, 255, 0.14);
    box-shadow: 0 12px 42px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(24px) saturate(145%);
}

html[data-theme="ai"] .navbar::after {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ai-cyan), var(--ai-violet), transparent);
    opacity: 0.58;
}

html[data-theme="ai"] .navbar-brand {
    color: #ecfdff !important;
    letter-spacing: -0.035em;
    text-shadow: 0 0 22px rgba(77, 232, 255, 0.4);
}

html[data-theme="ai"] .navbar-brand i {
    color: var(--ai-cyan);
    filter: drop-shadow(0 0 9px rgba(77, 232, 255, 0.72));
}

html[data-theme="ai"] .nav-link {
    color: #a8c0d0;
    border: 1px solid transparent;
}

html[data-theme="ai"] .nav-link:hover,
html[data-theme="ai"] .nav-link.active {
    color: #f4fdff !important;
    border-color: rgba(77, 232, 255, 0.2);
    background: linear-gradient(135deg, rgba(77, 232, 255, 0.12), rgba(139, 92, 246, 0.12));
    box-shadow: inset 0 0 20px rgba(77, 232, 255, 0.04), 0 0 20px rgba(77, 232, 255, 0.05);
}

html[data-theme="ai"] .btn-register {
    color: #02101b !important;
    background: linear-gradient(120deg, var(--ai-cyan), var(--ai-mint));
    border-color: transparent;
    box-shadow: 0 8px 26px rgba(77, 232, 255, 0.2);
}

html[data-theme="ai"] .theme-switcher {
    background: rgba(8, 20, 40, 0.76);
    border-color: rgba(77, 232, 255, 0.14);
    box-shadow: inset 0 0 20px rgba(77, 232, 255, 0.04);
}

html[data-theme="ai"] .main-content {
    background: transparent;
}

html[data-theme="ai"] .trust-card,
html[data-theme="ai"] .trust-step,
html[data-theme="ai"] .trust-faq-panel {
    background: var(--surface-card);
    border-color: var(--surface-card-border);
    color: var(--text-color);
    box-shadow: var(--surface-card-shadow);
}

html[data-theme="ai"] .trust-card:hover {
    border-color: rgba(77, 232, 255, 0.34);
    box-shadow: inset 0 1px rgba(255,255,255,.06), 0 24px 70px rgba(0,0,0,.34), 0 0 28px rgba(77,232,255,.06);
}

html[data-theme="ai"] .trust-faq-panel details {
    background: rgba(10, 27, 49, 0.72);
    border-color: rgba(77, 232, 255, 0.14);
}

html[data-theme="ai"] .mobile-app-nav {
    background: rgba(3, 10, 24, 0.9);
    border-color: rgba(77, 232, 255, 0.18);
    box-shadow: 0 20px 56px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.055), 0 0 32px rgba(77,232,255,.06);
}

html[data-theme="ai"] .hero {
    isolation: isolate;
    border-color: rgba(77, 232, 255, 0.2);
    background:
        linear-gradient(140deg, rgba(9, 24, 47, 0.86), rgba(5, 12, 27, 0.72)),
        radial-gradient(circle at 78% 8%, rgba(139, 92, 246, 0.22), transparent 22rem);
    box-shadow:
        0 38px 100px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 0 80px rgba(77, 232, 255, 0.035),
        var(--ai-glow);
    backdrop-filter: blur(26px) saturate(125%);
}

html[data-theme="ai"] .hero::before {
    width: 420px;
    height: 420px;
    top: -290px;
    right: -120px;
    background: conic-gradient(from 80deg, rgba(77, 232, 255, 0.32), rgba(139, 92, 246, 0.08), rgba(32, 227, 178, 0.22), rgba(77, 232, 255, 0.32));
    filter: blur(1px);
    animation: aiHaloRotate 24s linear infinite;
}

html[data-theme="ai"] .hero::after {
    width: 260px;
    height: 260px;
    left: -155px;
    bottom: -150px;
    border: 1px solid rgba(77, 232, 255, 0.2);
    box-shadow: 0 0 70px rgba(77, 232, 255, 0.12), inset 0 0 45px rgba(139, 92, 246, 0.08);
}

@keyframes aiHaloRotate { to { transform: rotate(360deg); } }

.ai-console-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: -24px 0 30px;
    padding: 9px 13px;
    border: 1px solid rgba(77, 232, 255, 0.15);
    border-radius: 12px;
    background: rgba(2, 9, 22, 0.62);
    color: #7894a8;
    font: 700 0.66rem/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
    letter-spacing: 0.09em;
    text-align: left;
}

.ai-console-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #9ef7e2;
}

.ai-console-status i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ai-mint);
    box-shadow: 0 0 0 5px rgba(32, 227, 178, 0.08), 0 0 14px var(--ai-mint);
    animation: aiStatusPulse 2s ease-in-out infinite;
}

@keyframes aiStatusPulse { 50% { opacity: 0.45; transform: scale(0.72); } }

.ai-console-metrics {
    display: flex;
    gap: 18px;
}

.ai-console-metrics strong { color: var(--ai-cyan); }

html[data-theme="ai"] .hero-badge,
html[data-theme="ai"] .section-kicker {
    border: 1px solid rgba(77, 232, 255, 0.18);
    background: linear-gradient(135deg, rgba(77, 232, 255, 0.1), rgba(139, 92, 246, 0.1));
    color: #b9f7ff;
    box-shadow: inset 0 0 18px rgba(77, 232, 255, 0.035);
}

html[data-theme="ai"] .hero h1 {
    color: #f4fdff;
    text-shadow: 0 7px 34px rgba(0, 0, 0, 0.32);
}

html[data-theme="ai"] .hero h1 span {
    background: linear-gradient(100deg, #f1feff 0%, var(--ai-cyan) 34%, #a78bfa 70%, var(--ai-mint) 100%);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    animation: aiTextFlow 7s linear infinite;
}

@keyframes aiTextFlow { to { background-position: 220% center; } }

html[data-theme="ai"] .hero .hero-subtitle { color: #91aabd; }

html[data-theme="ai"] .shortener-panel,
html[data-theme="ai"] .card,
html[data-theme="ai"] .feature-item,
html[data-theme="ai"] .content-card,
html[data-theme="ai"] .auth-card,
html[data-theme="ai"] .dashboard-card,
html[data-theme="ai"] .profile-card,
html[data-theme="ai"] .policy-card,
html[data-theme="ai"] .about-card {
    border-color: rgba(77, 232, 255, 0.16);
    background: linear-gradient(145deg, rgba(10, 24, 46, 0.88), rgba(5, 13, 28, 0.8));
    box-shadow: 0 24px 65px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.045);
    backdrop-filter: blur(22px) saturate(125%);
}

html[data-theme="ai"] .shortener-panel {
    position: relative;
    overflow: hidden;
}

html[data-theme="ai"] .shortener-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 8%;
    width: 38%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ai-cyan), transparent);
    box-shadow: 0 0 20px rgba(77, 232, 255, 0.7);
}

html[data-theme="ai"] .panel-step {
    color: #03111b;
    background: linear-gradient(135deg, var(--ai-cyan), var(--ai-mint));
    box-shadow: 0 0 22px rgba(77, 232, 255, 0.23);
}

html[data-theme="ai"] .shortener-controls,
html[data-theme="ai"] .dynamic-section,
html[data-theme="ai"] .advanced-options .expiry-select,
html[data-theme="ai"] .content-meta span,
html[data-theme="ai"] .text-stage {
    border-color: rgba(77, 232, 255, 0.13);
    background: rgba(2, 10, 24, 0.58);
}

html[data-theme="ai"] input,
html[data-theme="ai"] select,
html[data-theme="ai"] textarea,
html[data-theme="ai"] .form-input,
html[data-theme="ai"] .form-select,
html[data-theme="ai"] .form-textarea,
html[data-theme="ai"] .url-input-group .primary-input,
html[data-theme="ai"] .advanced-options select,
html[data-theme="ai"] .limit-input {
    color: #e9fbff;
    border-color: rgba(77, 232, 255, 0.18);
    background: rgba(3, 12, 27, 0.76);
    box-shadow: inset 0 0 20px rgba(77, 232, 255, 0.025);
}

html[data-theme="ai"] input::placeholder,
html[data-theme="ai"] textarea::placeholder { color: #627d91; }

html[data-theme="ai"] input:focus,
html[data-theme="ai"] select:focus,
html[data-theme="ai"] textarea:focus {
    border-color: var(--ai-cyan);
    box-shadow: 0 0 0 3px rgba(77, 232, 255, 0.08), 0 0 24px rgba(77, 232, 255, 0.08);
}

html[data-theme="ai"] select option { color: #edfaff; background: #071427; }

html[data-theme="ai"] .password-toggle,
html[data-theme="ai"] .file-upload-area {
    border-color: rgba(77, 232, 255, 0.16);
    background: rgba(5, 16, 34, 0.72);
}

html[data-theme="ai"] .file-upload-area {
    background-image:
        linear-gradient(135deg, rgba(77, 232, 255, 0.035), rgba(139, 92, 246, 0.04)),
        repeating-linear-gradient(90deg, transparent 0 18px, rgba(77, 232, 255, 0.018) 18px 19px);
}

html[data-theme="ai"] .upload-icon { color: var(--ai-cyan); filter: drop-shadow(0 0 10px rgba(77, 232, 255, 0.4)); }

html[data-theme="ai"] .btn-primary {
    position: relative;
    overflow: hidden;
    color: #02111b;
    border-color: transparent;
    background: linear-gradient(115deg, var(--ai-cyan), #68cfff 42%, var(--ai-mint));
    box-shadow: 0 12px 34px rgba(77, 232, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

html[data-theme="ai"] .btn-primary::after {
    content: "";
    position: absolute;
    inset: -100% auto -100% -35%;
    width: 28%;
    transform: rotate(18deg);
    background: rgba(255, 255, 255, 0.42);
    filter: blur(8px);
    transition: left 0.5s ease;
}

html[data-theme="ai"] .btn-primary:hover::after { left: 115%; }

html[data-theme="ai"] .btn-outline {
    color: #b8f7ff;
    border-color: rgba(77, 232, 255, 0.28);
    background: rgba(77, 232, 255, 0.04);
}

html[data-theme="ai"] .service-card,
html[data-theme="ai"] .benefits-grid .feature-item {
    border-color: rgba(77, 232, 255, 0.14);
    background: linear-gradient(145deg, rgba(9, 22, 43, 0.82), rgba(4, 12, 26, 0.72));
}

html[data-theme="ai"] .service-card::before,
html[data-theme="ai"] .benefits-grid .feature-item::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(77, 232, 255, 0.38), transparent 38%, rgba(139, 92, 246, 0.25));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

html[data-theme="ai"] .service-card:hover,
html[data-theme="ai"] .benefits-grid .feature-item:hover {
    transform: translateY(-6px);
    border-color: rgba(77, 232, 255, 0.34);
    box-shadow: 0 24px 54px rgba(0, 0, 0, 0.32), 0 0 34px rgba(77, 232, 255, 0.08);
}

html[data-theme="ai"] .service-icon {
    border: 1px solid rgba(77, 232, 255, 0.18);
    background: linear-gradient(145deg, rgba(77, 232, 255, 0.12), rgba(139, 92, 246, 0.12));
    box-shadow: inset 0 0 20px rgba(77, 232, 255, 0.06), 0 0 24px rgba(77, 232, 255, 0.07);
}

html[data-theme="ai"] .service-card span[style],
html[data-theme="ai"] .ranking-item span[style] {
    border: 1px solid rgba(77, 232, 255, 0.13) !important;
    background: rgba(77, 232, 255, 0.07) !important;
    color: #9df5ff !important;
}

html[data-theme="ai"] .feature-item i { color: var(--ai-cyan) !important; filter: drop-shadow(0 0 8px rgba(77, 232, 255, 0.4)); }

html[data-theme="ai"] .content-header,
html[data-theme="ai"] .content-actions { border-color: rgba(77, 232, 255, 0.1); }

html[data-theme="ai"] .image-stage,
html[data-theme="ai"] .video-stage {
    border: 1px solid rgba(77, 232, 255, 0.14);
    background-color: #020713;
    box-shadow: inset 0 0 60px rgba(77, 232, 255, 0.035);
}

html[data-theme="ai"] .footer {
    border-top: 1px solid rgba(77, 232, 255, 0.12);
    background: rgba(2, 7, 18, 0.82);
    backdrop-filter: blur(18px);
}

html[data-theme="ai"] .footer::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 20%;
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ai-cyan), transparent);
    opacity: 0.5;
}

html[data-theme="ai"] .scroll-top {
    color: #02111b;
    background: linear-gradient(135deg, var(--ai-cyan), var(--ai-mint));
    box-shadow: 0 0 28px rgba(77, 232, 255, 0.28);
}

@media (max-width: 760px) {
    .ai-console-bar { margin: -12px 0 24px; }
    .ai-console-metrics { display: none; }
    .ai-console-status { width: 100%; justify-content: center; }
    .neural-grid-layer { background-size: 34px 34px; opacity: 0.55; }
    .neural-environment canvas { opacity: 0.5; }
}

@media (prefers-reduced-motion: reduce) {
    .neural-scanline,
    .neural-aurora,
    html[data-theme="ai"] .hero::before,
    html[data-theme="ai"] .hero h1 span,
    .ai-console-status i { animation: none !important; }
}