html,
html.theme-dark {
    background: transparent;
}

body {
    background: #f3f3f3;
    color: #151515;
    overflow-x: hidden;
}

html.tw-dark body,
html.dark body,
html.theme-dark body,
body.skilltools-theme-dark {
    background: #101010;
    color: #f2f2f2;
}

.skilltools-page-wrap {
    padding: 12px 12px 18px;
}

.sq-app-shell {
    --sq-panel-bg: rgba(255, 255, 255, 0.96);
    --sq-panel-bg-soft: rgba(248, 250, 252, 0.92);
    --sq-line: #edf0f4;
    --sq-line-strong: #dbe2ea;
    --sq-text: #151515;
    --sq-muted: #6b7280;
    --sq-brand: #2563eb;
    --sq-brand-strong: #1d4ed8;
    color: var(--sq-text);
    max-width: 1480px;
    margin: 0 auto;
}

.sq-app-shell.theme-dark {
    --sq-panel-bg: rgba(23, 23, 23, 0.96);
    --sq-panel-bg-soft: rgba(26, 26, 26, 0.92);
    --sq-line: #2a2a2a;
    --sq-line-strong: #3a3a3a;
    --sq-text: #f2f2f2;
    --sq-muted: #a3a3a3;
    --sq-brand: #60a5fa;
    --sq-brand-strong: #93c5fd;
    color: var(--sq-text);
}

.sq-app-shell .sq-panel,
.sq-app-shell .sq-dataset-menu,
.sq-app-shell .sq-animation-lightbox__dialog {
    border-color: var(--sq-line);
    border-radius: 8px;
    background: var(--sq-panel-bg);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    backdrop-filter: saturate(140%) blur(10px);
}

.sq-app-shell.theme-dark .sq-panel,
.sq-app-shell.theme-dark .sq-dataset-menu,
.sq-app-shell.theme-dark .sq-animation-lightbox__dialog {
    border-color: var(--sq-line);
    background: var(--sq-panel-bg);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}

.sq-app-shell .sq-panel {
    overflow: hidden;
}

.sq-app-shell .sq-tab,
.sq-app-shell .sq-chip,
.sq-app-shell .sq-dataset-trigger,
.sq-app-shell .sq-dataset-option,
.sq-app-shell .sq-theme-toggle,
.sq-app-shell .sq-version-badge {
    border-radius: 8px;
}

.sq-app-shell .sq-tab {
    border-color: var(--sq-line);
    background: #fff;
    color: #374151;
    min-height: 36px;
}

.sq-app-shell .sq-tab:hover {
    border-color: #c7d2fe;
    background: #f5f6f8;
    color: #151515;
}

.sq-app-shell .sq-tab.is-active {
    border-color: var(--sq-brand);
    background: #eff6ff;
    color: var(--sq-brand-strong);
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.08);
}

.sq-app-shell.theme-dark .sq-tab {
    border-color: var(--sq-line);
    background: #1a1a1a;
    color: #d4d4d4;
}

.sq-app-shell.theme-dark .sq-tab:hover {
    border-color: #3a3a3a;
    background: #242424;
    color: #f2f2f2;
}

.sq-app-shell.theme-dark .sq-tab.is-active {
    border-color: rgba(96, 165, 250, 0.74);
    background: rgba(37, 99, 235, 0.18);
    color: #bfdbfe;
}

.sq-app-shell .sq-skill-card,
.sq-app-shell .sq-job-card,
.sq-app-shell .sq-dataset-trigger,
.sq-app-shell .sq-version-badge,
.sq-app-shell .sq-theme-toggle,
.sq-app-shell input,
.sq-app-shell select,
.sq-app-shell .sq-level-stepper,
.sq-app-shell .sq-level-slider,
.sq-app-shell .sq-level-description {
    border-color: var(--sq-line);
    border-radius: 8px;
    background: var(--sq-panel-bg);
    box-shadow: none;
}

.sq-app-shell .sq-skill-card:hover,
.sq-app-shell .sq-job-card:hover,
.sq-app-shell .sq-dataset-trigger:hover,
.sq-app-shell .sq-theme-toggle:hover {
    border-color: var(--sq-line-strong);
    background: #fff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
    transform: translateY(-1px);
}

.sq-app-shell .sq-skill-card.is-active,
.sq-app-shell .sq-job-card.is-active,
.sq-app-shell .sq-dataset-trigger.is-open,
.sq-app-shell .sq-dataset-option.is-active {
    border-color: var(--sq-brand);
    background: #eff6ff;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.1);
}

.sq-app-shell.theme-dark .sq-skill-card,
.sq-app-shell.theme-dark .sq-job-card,
.sq-app-shell.theme-dark .sq-dataset-trigger,
.sq-app-shell.theme-dark .sq-version-badge,
.sq-app-shell.theme-dark .sq-theme-toggle,
.sq-app-shell.theme-dark input,
.sq-app-shell.theme-dark select,
.sq-app-shell.theme-dark .sq-level-stepper,
.sq-app-shell.theme-dark .sq-level-slider,
.sq-app-shell.theme-dark .sq-level-description {
    border-color: var(--sq-line);
    background: var(--sq-panel-bg-soft);
}

.sq-app-shell.theme-dark .sq-skill-card:hover,
.sq-app-shell.theme-dark .sq-job-card:hover,
.sq-app-shell.theme-dark .sq-dataset-trigger:hover,
.sq-app-shell.theme-dark .sq-theme-toggle:hover {
    border-color: var(--sq-line-strong);
    background: #242424;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.22);
}

.sq-app-shell.theme-dark .sq-skill-card.is-active,
.sq-app-shell.theme-dark .sq-job-card.is-active,
.sq-app-shell.theme-dark .sq-dataset-trigger.is-open,
.sq-app-shell.theme-dark .sq-dataset-option.is-active {
    border-color: rgba(96, 165, 250, 0.74);
    background: rgba(37, 99, 235, 0.16);
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.12);
}

.sq-app-shell .sq-title-badge,
.sq-app-shell .sq-dataset-trigger__icon,
.sq-app-shell .sq-version-badge__icon,
.sq-app-shell .sq-animation-preview__play {
    border-radius: 8px;
    background: #2563eb;
    color: #fff;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18);
}

.sq-app-shell .sq-hero-kicker,
.sq-app-shell .sq-chip {
    background: #f5f6f8;
    color: var(--sq-muted);
}

.sq-app-shell .sq-chip--active {
    background: #eff6ff;
    color: #1d4ed8;
}

.sq-app-shell .sq-chip--passive {
    background: #ecfdf5;
    color: #047857;
}

.sq-app-shell .sq-chip--job-common {
    background: #f5f3ff;
    color: #6d28d9;
}

.sq-app-shell .sq-chip--faction-common {
    background: #fffbeb;
    color: #b45309;
}

.sq-app-shell .sq-animation-preview,
.sq-app-shell .sq-animation-player {
    border-radius: 8px;
    background: #111827;
}

.sq-app-shell .sq-animation-preview__stage,
.sq-app-shell .sq-animation-player,
.sq-app-shell .sq-animation-lightbox__dialog {
    background:
        radial-gradient(circle at 50% 35%, rgba(37, 99, 235, 0.18), transparent 38%),
        linear-gradient(180deg, #1f2937, #111827 62%, #0b1120);
}

.sq-app-shell.theme-dark .sq-animation-preview,
.sq-app-shell.theme-dark .sq-animation-player {
    background: #111827;
}

.sq-app-shell.theme-dark .sq-animation-preview__stage,
.sq-app-shell.theme-dark .sq-animation-player,
.sq-app-shell.theme-dark .sq-animation-lightbox__dialog {
    background:
        radial-gradient(circle at 50% 35%, rgba(37, 99, 235, 0.2), transparent 38%),
        linear-gradient(180deg, #1f2937, #111827 62%, #0b1120);
}

.sq-app-shell .sq-animation-preview__hint {
    color: #cbd5e1;
}

.sq-app-shell .sq-animation-zoomable__badge {
    background: rgba(15, 23, 42, 0.86);
    color: #fff;
}

.sq-app-shell .sq-animation-lightbox__close {
    background: rgba(255, 255, 255, 0.12);
    color: #e5e7eb;
}

.sq-app-shell .sq-animation-lightbox__close:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.sq-app-shell .tw-tracking-\[0\.12em\],
.sq-app-shell .tw-tracking-\[0\.14em\],
.sq-app-shell .tw-tracking-\[0\.16em\] {
    letter-spacing: 0;
}

.sq-app-shell :is(input, select):focus,
.sq-app-shell :is(input, select):focus-visible {
    border-color: #a855f7 !important;
    box-shadow: none !important;
}

@media (max-width: 767px) {
    .skilltools-page-wrap {
        padding: 8px;
    }

    .sq-app-shell .sq-panel,
    .sq-app-shell .sq-skill-card,
    .sq-app-shell .sq-job-card {
        border-radius: 8px;
    }
}