/* ========================================
   SyncLink 共享样式
   插件页面和前端页面共同使用
   ======================================== */

:root {
    --bg-main: #0F172A;
    --bg-surface: rgba(15, 23, 42, 0.72);
    --text-primary: #CBD5E1;
    --text-secondary: #94A3B8;
    --accent-blue: #38BDF8;
    --accent-green: #34D399;
    --border-subtle: rgba(148, 163, 184, 0.18);
    --button-neutral: rgba(71, 85, 105, 0.9);
    --button-danger: rgba(248, 113, 113, 0.2);
    --button-danger-border: rgba(248, 113, 113, 0.4);
    --scrollbar-size: 8px;
    --scrollbar-track: rgba(15, 23, 42, 0.55);
    --scrollbar-thumb: rgba(56, 189, 248, 0.5);
    --scrollbar-thumb-hover: rgba(52, 211, 153, 0.75);
    --scrollbar-thumb-active: rgba(52, 211, 153, 0.9);
}

/* ========================================
   基础样式
   ======================================== */

.font-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

body {
    background-color: var(--bg-main);
    color: var(--text-primary);
    position: relative;
}

/* 噪点纹理 */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    z-index: 0;
}

body > * {
    position: relative;
    z-index: 1;
}

/* ========================================
   玻璃质感
   ======================================== */

.glass {
    background: var(--bg-surface);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-subtle);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 4px 20px rgba(0, 0, 0, 0.3);
}

.decrypt-glow {
    box-shadow: 0 0 20px rgba(52, 211, 153, 0.2);
    border-color: var(--accent-green) !important;
}

/* ========================================
   Channel ID Chip
   ======================================== */

.channel-chip {
    background: rgba(52, 211, 153, 0.1);
    color: var(--accent-green);
    border: 1px solid rgba(52, 211, 153, 0.2);
}

.channel-chip-blue {
    background: rgba(56, 189, 248, 0.1);
    color: var(--accent-blue);
    border: 1px solid rgba(56, 189, 248, 0.2);
}

/* ========================================
   Tab 按钮样式
   ======================================== */

.tab-button {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 11px;
    font-weight: bold;
    padding-bottom: 8px;
}

.tab-button.active {
    color: var(--accent-blue);
    border-bottom: 2px solid var(--accent-blue);
}

.tab-button:not(.active) {
    color: var(--text-secondary);
    border-bottom: 2px solid transparent;
}

/* ========================================
   通用按钮样式
   ======================================== */

.btn-neutral {
    background: var(--button-neutral);
    color: white;
}

.btn-danger {
    background: var(--button-danger);
    color: white;
    border-color: var(--button-danger-border);
}

.btn-primary {
    background-color: var(--accent-blue);
    color: var(--bg-main);
}

.btn-success {
    background-color: var(--accent-green);
    color: var(--bg-main);
}

/* ========================================
   统一 Toggle Switch 组件
   ======================================== */

:root {
    --switch-width: 36px;
    --switch-height: 18px;
    --switch-thumb-size: 10px;
    --switch-thumb-offset: 18px;
    --switch-off-border: rgba(148, 163, 184, 0.45);
    --switch-on-border: #3B82F6;
    --switch-transition: 200ms ease-in-out;
}

.sync-switch {
    position: relative;
    width: var(--switch-width);
    height: var(--switch-height);
    display: inline-block;
    flex-shrink: 0;
    cursor: pointer;
}

.sync-switch-input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.sync-switch-track {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: transparent;
    border: 1px solid var(--switch-off-border);
    box-shadow: none;
    transition:
        border-color var(--switch-transition),
        box-shadow var(--switch-transition),
        background-color var(--switch-transition);
}

.sync-switch-track::after {
    content: '';
    position: absolute;
    width: var(--switch-thumb-size);
    height: var(--switch-thumb-size);
    top: 4px;
    left: 4px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: none;
    transition:
        transform var(--switch-transition),
        background-color var(--switch-transition),
        box-shadow var(--switch-transition);
}

.sync-switch-input:checked + .sync-switch-track {
    background: transparent;
    border-color: var(--switch-on-border);
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
}

.sync-switch-input:checked + .sync-switch-track::after {
    background: #10B981;
    box-shadow: 0 0 10px #10B981;
    transform: translateX(var(--switch-thumb-offset));
}

.sync-switch-input:focus-visible + .sync-switch-track {
    outline: 2px solid rgba(59, 130, 246, 0.5);
    outline-offset: 2px;
}

.toggle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    min-height: 28px;
}

.toggle-row-title {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: 0.05em;
}

@keyframes switch-neon-breathe {
    0%, 100% {
        color: rgba(191, 219, 254, 0.85);
        text-shadow: 0 0 2px rgba(59, 130, 246, 0.25);
    }
    50% {
        color: #E0F2FE;
        text-shadow: 0 0 6px rgba(59, 130, 246, 0.45);
    }
}

.aes-toggle:has(.sync-switch-input:checked) .toggle-row-title {
    animation: switch-neon-breathe 1.8s ease-in-out infinite;
}

.settings-toggle-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    width: 100%;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.4);
    padding: 12px;
    cursor: pointer;
}

.settings-toggle-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.settings-toggle-title {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text-primary);
}

.settings-toggle-description {
    font-size: 11px;
    line-height: 1.35;
    color: #64748B;
}

/* ========================================
   霓虹线框操作按钮（COPY / BURN / NEW）
   ======================================== */

.neon-action {
    background-color: rgba(15, 23, 42, 0.5);
    border: 1.5px solid currentColor;
    border-radius: 4px !important;
    font-weight: 800;
    letter-spacing: 0.02em;
    transition:
        transform 0.16s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

.neon-action-copy {
    color: #10B981;
    border-color: #10B981;
    box-shadow: 0 0 5px rgba(16, 185, 129, 0.5);
    text-shadow: 0 0 2px rgba(16, 185, 129, 0.3);
}

.neon-action-burn {
    color: #EF4444;
    border-color: #EF4444;
    box-shadow: 0 0 5px rgba(239, 68, 68, 0.5);
    text-shadow: 0 0 2px rgba(239, 68, 68, 0.3);
}

.neon-action-new {
    color: #3B82F6;
    border-color: #3B82F6;
    box-shadow: 0 0 5px rgba(59, 130, 246, 0.5);
    text-shadow: 0 0 2px rgba(59, 130, 246, 0.3);
}

.neon-action-copy:hover {
    background-color: rgba(16, 185, 129, 0.16);
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
}

.neon-action-burn:hover {
    background-color: rgba(239, 68, 68, 0.16);
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.4);
}

.neon-action-new:hover {
    background-color: rgba(59, 130, 246, 0.16);
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.4);
}

.neon-action:active {
    transform: scale(0.95);
}

.neon-action-copy:active {
    background-color: rgba(16, 185, 129, 0.24);
}

.neon-action-burn:active {
    background-color: rgba(239, 68, 68, 0.24);
}

.neon-action-new:active {
    background-color: rgba(59, 130, 246, 0.24);
}

.neon-copied {
    background-color: rgba(16, 185, 129, 0.24) !important;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.45) !important;
}

/* ========================================
   滚动条样式
   ======================================== */

textarea,
[class*="overflow-y-auto"],
[class*="overflow-auto"] {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

textarea::-webkit-scrollbar,
[class*="overflow-y-auto"]::-webkit-scrollbar,
[class*="overflow-auto"]::-webkit-scrollbar {
    width: var(--scrollbar-size);
    height: var(--scrollbar-size);
}

textarea::-webkit-scrollbar-track,
[class*="overflow-y-auto"]::-webkit-scrollbar-track,
[class*="overflow-auto"]::-webkit-scrollbar-track {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.85), rgba(30, 41, 59, 0.8));
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.12);
}

textarea::-webkit-scrollbar-thumb,
[class*="overflow-y-auto"]::-webkit-scrollbar-thumb,
[class*="overflow-auto"]::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(56, 189, 248, 0.75), rgba(52, 211, 153, 0.65));
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.7);
}

textarea::-webkit-scrollbar-thumb:hover,
[class*="overflow-y-auto"]::-webkit-scrollbar-thumb:hover,
[class*="overflow-auto"]::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(56, 189, 248, 0.9), var(--scrollbar-thumb-hover));
}

textarea::-webkit-scrollbar-thumb:active,
[class*="overflow-y-auto"]::-webkit-scrollbar-thumb:active,
[class*="overflow-auto"]::-webkit-scrollbar-thumb:active {
    background: linear-gradient(180deg, rgba(56, 189, 248, 0.95), var(--scrollbar-thumb-active));
}

/* ========================================
   动画
   ======================================== */

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
}

.animate-shake {
    animation: shake 0.15s ease-in-out 3;
}

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

.animate-spin {
    animation: spin 1s linear infinite;
}

/* ========================================
   工具类
   ======================================== */

.hidden {
    display: none !important;
}

.text-red-400 {
    color: #F87171;
}

.text-red-500 {
    color: #F87171;
}

.font-black {
    font-weight: 900;
}

.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.h-14 {
    height: 56px;
}