:root {
    --surface-page: #f3f4f6;
    --surface-panel: #ffffff;
    --surface-panel-muted: #f9fafb;
    --surface-elevated: #ffffff;
    --border-muted: #e5e7eb;
    --text-strong: #111827;
    --text-body: #374151;
    --text-muted: #6b7280;
}

html.dark {
    --surface-page: #0f172a;
    --surface-panel: #1e293b;
    --surface-panel-muted: #111827;
    --surface-elevated: #273449;
    --border-muted: #334155;
    --text-strong: #f8fafc;
    --text-body: #dbe4ef;
    --text-muted: #a8b3c2;
    background: var(--surface-page);
}

html.dark body {
    background: var(--surface-page);
    color: var(--text-body);
}

.theme-toggle {
    align-items: center;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 9999px;
    color: #374151;
    cursor: pointer;
    display: inline-flex;
    gap: 0.35rem;
    height: 2.25rem;
    justify-content: center;
    line-height: 1;
    min-width: 2.25rem;
    padding: 0 0.7rem;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.theme-toggle:hover,
.theme-toggle:focus {
    background: #f3f4f6;
    color: #111827;
}

.theme-toggle:focus {
    outline: 2px solid #6366f1;
    outline-offset: 2px;
}

.theme-toggle__icon {
    display: block;
    height: 1rem;
    width: 1rem;
}

.theme-toggle__sun,
html.dark .theme-toggle__moon {
    display: none;
}

html.dark .theme-toggle__sun {
    display: block;
}

.theme-toggle__text {
    font-size: 0.8125rem;
    font-weight: 600;
}

html.dark .theme-toggle {
    background: #1e293b;
    border-color: #475569;
    color: #e2e8f0;
}

html.dark .theme-toggle:hover,
html.dark .theme-toggle:focus {
    background: #334155;
    color: #ffffff;
}

@media (max-width: 640px) {
    .theme-toggle {
        padding: 0 0.6rem;
    }

    .theme-toggle__text {
        display: none;
    }
}

html.dark .bg-gray-100,
html.dark .bg-light {
    background-color: var(--surface-page) !important;
}

html.dark .bg-white,
html.dark .card,
html.dark .soft-card {
    background-color: var(--surface-panel) !important;
    color: var(--text-body) !important;
}

html.dark .bg-gray-50,
html.dark .bg-gray-50\/70,
html.dark .bg-indigo-50,
html.dark .bg-indigo-100,
html.dark .bg-white\/70,
html.dark .hover\:bg-gray-50:hover,
html.dark .hover\:bg-gray-100:hover,
html.dark .focus\:bg-gray-50:focus,
html.dark .focus\:bg-gray-100:focus {
    background-color: var(--surface-panel-muted) !important;
}

html.dark .bg-blue-50,
html.dark .bg-blue-100 {
    background-color: #172554 !important;
}

html.dark .bg-green-50 {
    background-color: #052e16 !important;
}

html.dark .bg-emerald-50,
html.dark .bg-emerald-100,
html.dark .bg-emerald-400\/20 {
    background-color: #052e16 !important;
}

html.dark .bg-red-50 {
    background-color: #450a0a !important;
}

html.dark .bg-yellow-50,
html.dark .bg-yellow-400\/20,
html.dark .bg-amber-50,
html.dark .bg-amber-100,
html.dark .bg-amber-400\/20 {
    background-color: #422006 !important;
}

html.dark .bg-orange-50 {
    background-color: #431407 !important;
}

html.dark .bg-sky-50,
html.dark .bg-sky-100,
html.dark .bg-blue-500\/20 {
    background-color: #082f49 !important;
}

html.dark .bg-purple-50 {
    background-color: #3b0764 !important;
}

html.dark .text-gray-900,
html.dark .text-gray-800,
html.dark .text-gray-950,
html.dark .text-slate-900,
html.dark .text-dark,
html.dark .navbar-brand,
html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark h6 {
    color: var(--text-strong) !important;
}

html.dark .text-gray-700,
html.dark .text-gray-600,
html.dark .text-slate-700,
html.dark .text-indigo-700,
html.dark .text-indigo-800,
html.dark .hover\:text-gray-700:hover,
html.dark .hover\:text-gray-800:hover,
html.dark .focus\:text-gray-700:focus,
html.dark .focus\:text-gray-800:focus {
    color: var(--text-body) !important;
}

html.dark .text-gray-500,
html.dark .text-gray-400,
html.dark .text-gray-300,
html.dark .text-secondary {
    color: var(--text-muted) !important;
}

html.dark .text-blue-600,
html.dark .text-blue-700,
html.dark .text-blue-800 {
    color: #bfdbfe !important;
}

html.dark .text-sky-700,
html.dark .text-sky-800,
html.dark .text-sky-900,
html.dark .text-sky-950,
html.dark .text-blue-100 {
    color: #bae6fd !important;
}

html.dark .text-green-600,
html.dark .text-green-700,
html.dark .text-green-800 {
    color: #bbf7d0 !important;
}

html.dark .text-emerald-700,
html.dark .text-emerald-800,
html.dark .text-emerald-900,
html.dark .text-emerald-950,
html.dark .text-emerald-100 {
    color: #bbf7d0 !important;
}

html.dark .text-red-600,
html.dark .text-red-700,
html.dark .text-red-800 {
    color: #fecaca !important;
}

html.dark .text-amber-600,
html.dark .text-amber-700,
html.dark .text-amber-800,
html.dark .text-amber-900,
html.dark .text-amber-950,
html.dark .text-amber-100,
html.dark .text-yellow-700,
html.dark .text-yellow-100,
html.dark .text-yellow-800,
html.dark .text-orange-700,
html.dark .text-orange-800 {
    color: #fde68a !important;
}

html.dark .text-purple-700,
html.dark .text-purple-800,
html.dark .text-indigo-600 {
    color: #ddd6fe !important;
}

html.dark .border-gray-100,
html.dark .border-gray-200,
html.dark .border-gray-300,
html.dark .border-bottom,
html.dark .border-top,
html.dark .border,
html.dark .card,
html.dark .soft-card {
    border-color: var(--border-muted) !important;
}

html.dark .border-blue-200,
html.dark .border-blue-300,
html.dark .border-sky-200 {
    border-color: #1d4ed8 !important;
}

html.dark .border-green-200,
html.dark .border-green-300,
html.dark .border-emerald-200,
html.dark .border-emerald-300 {
    border-color: #15803d !important;
}

html.dark .border-red-200,
html.dark .border-red-300 {
    border-color: #b91c1c !important;
}

html.dark .border-yellow-200,
html.dark .border-yellow-300,
html.dark .border-amber-200,
html.dark .border-amber-300,
html.dark .border-orange-200,
html.dark .border-orange-300 {
    border-color: #a16207 !important;
}

html.dark .ring-gray-200,
html.dark .ring-gray-200\/60,
html.dark .ring-gray-300 {
    --tw-ring-color: var(--border-muted) !important;
}

html.dark .ring-yellow-200\/60,
html.dark .ring-yellow-300 {
    --tw-ring-color: #a16207 !important;
}

html.dark .shadow,
html.dark .shadow-sm,
html.dark .shadow-md,
html.dark .shadow-lg,
html.dark .shadow-xl {
    box-shadow: 0 12px 30px rgb(0 0 0 / 0.35) !important;
}

html.dark input,
html.dark select,
html.dark textarea,
html.dark .form-control,
html.dark .form-select {
    background-color: #0f172a !important;
    border-color: #475569 !important;
    color: var(--text-strong) !important;
}

input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
select,
textarea {
    padding: 0.75rem 1rem !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder,
html.dark .form-control::placeholder {
    color: #94a3b8 !important;
}

html.dark .form-check-input {
    background-color: #0f172a;
    border-color: #64748b;
}

html.dark .dropdown-menu,
html.dark .ring-black {
    background-color: var(--surface-panel) !important;
}

html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--border-muted) !important;
}

html.dark table,
html.dark .table,
html.dark th,
html.dark td {
    border-color: var(--border-muted) !important;
}

html.dark .table,
html.dark .table > :not(caption) > * > * {
    background-color: transparent !important;
    color: var(--text-body) !important;
}

html.dark .btn-dark,
html.dark .btn-outline-dark:hover {
    background-color: #e5e7eb !important;
    border-color: #e5e7eb !important;
    color: #111827 !important;
}

html.dark .btn-outline-dark {
    background-color: transparent !important;
    border-color: #94a3b8 !important;
    color: #f8fafc !important;
}

html.dark .btn-light,
html.dark .btn-outline-light:hover {
    background-color: #f8fafc !important;
    border-color: #f8fafc !important;
    color: #111827 !important;
}

html.dark .btn-outline-light {
    background-color: transparent !important;
    border-color: #cbd5e1 !important;
    color: #f8fafc !important;
}

html.dark .hero-gradient {
    background: linear-gradient(135deg, #020617 0%, #0f172a 55%, #1e293b 100%) !important;
}

html.dark .badge.text-bg-light {
    background-color: #e2e8f0 !important;
    color: #111827 !important;
}

html.dark .badge.text-bg-dark {
    background-color: #cbd5e1 !important;
    color: #0f172a !important;
}

html.dark .card a:not(.btn):not(.theme-toggle),
html.dark .soft-card a:not(.btn):not(.theme-toggle) {
    color: #93c5fd;
}

html.dark .card a:not(.btn):not(.theme-toggle):hover,
html.dark .soft-card a:not(.btn):not(.theme-toggle):hover {
    color: #bfdbfe;
}

html.dark .insta-save-page {
    background:
        radial-gradient(circle at 15% 0%, rgb(79 70 229 / 0.14), transparent 30rem),
        radial-gradient(circle at 85% 12%, rgb(245 158 11 / 0.10), transparent 28rem),
        linear-gradient(180deg, #0f172a 0%, #111827 46%, #0f172a 100%);
}

html.dark .insta-manage-panel,
html.dark .insta-section,
html.dark .insta-account-card {
    background: linear-gradient(145deg, rgb(30 41 59 / 0.96), rgb(15 23 42 / 0.94)) !important;
    border-color: rgb(71 85 105 / 0.85) !important;
    box-shadow: 0 18px 45px rgb(0 0 0 / 0.34) !important;
}

html.dark .insta-manage-panel {
    background:
        linear-gradient(145deg, rgb(30 41 59 / 0.96), rgb(15 23 42 / 0.96)),
        linear-gradient(90deg, rgb(99 102 241 / 0.16), rgb(14 165 233 / 0.10)) !important;
}

html.dark .insta-section-favorites {
    background:
        radial-gradient(circle at 0% 0%, rgb(245 158 11 / 0.20), transparent 22rem),
        linear-gradient(145deg, #1f2937 0%, #111827 62%, #0f172a 100%) !important;
    border-color: rgb(180 83 9 / 0.65) !important;
    --tw-ring-color: rgb(245 158 11 / 0.26) !important;
}

html.dark .insta-section-accounts {
    background:
        radial-gradient(circle at 100% 0%, rgb(14 165 233 / 0.14), transparent 24rem),
        linear-gradient(145deg, #1e293b 0%, #111827 60%, #0f172a 100%) !important;
    --tw-ring-color: rgb(71 85 105 / 0.72) !important;
}

html.dark .insta-account-card {
    backdrop-filter: blur(10px);
}

html.dark .insta-account-card:hover {
    border-color: rgb(100 116 139 / 0.95) !important;
    box-shadow: 0 22px 55px rgb(0 0 0 / 0.42) !important;
}

html.dark .insta-account-card-favorite {
    background:
        linear-gradient(145deg, rgb(48 37 21 / 0.98), rgb(17 24 39 / 0.96) 46%, rgb(15 23 42 / 0.96)) !important;
    border-color: rgb(217 119 6 / 0.62) !important;
    --tw-ring-color: rgb(245 158 11 / 0.38) !important;
}

html.dark .insta-card-accent {
    opacity: 0.95;
}

html.dark .insta-avatar {
    background-color: rgb(15 23 42 / 0.92) !important;
    --tw-ring-color: rgb(71 85 105 / 0.9) !important;
}

html.dark .insta-primary-action {
    background: #f8fafc !important;
    border-color: #f8fafc !important;
    color: #0f172a !important;
}

html.dark .insta-primary-action:hover {
    background: #e2e8f0 !important;
    border-color: #e2e8f0 !important;
    color: #020617 !important;
}

html.dark .insta-secondary-action {
    background: rgb(15 23 42 / 0.76) !important;
    border-color: rgb(71 85 105 / 0.95) !important;
    color: #e2e8f0 !important;
}

html.dark .insta-secondary-action:hover {
    background: rgb(30 41 59 / 0.96) !important;
    border-color: rgb(148 163 184 / 0.75) !important;
    color: #ffffff !important;
}

html.dark .insta-favorite-action {
    background: rgb(113 63 18 / 0.52) !important;
    border-color: rgb(245 158 11 / 0.56) !important;
    color: #fde68a !important;
}

html.dark .insta-favorite-action:hover {
    background: rgb(146 64 14 / 0.68) !important;
    border-color: rgb(251 191 36 / 0.8) !important;
    color: #fffbeb !important;
}

html.dark .insta-count-pill {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}

html.dark .insta-count-pill-favorite {
    background: #fbbf24 !important;
    color: #1f1300 !important;
}

html.dark .insta-badge-muted {
    background: rgb(51 65 85 / 0.88) !important;
    color: #e2e8f0 !important;
}

html.dark .insta-badge-blue {
    background: rgb(29 78 216 / 0.28) !important;
    color: #dbeafe !important;
}

html.dark .insta-badge-amber {
    background: rgb(180 83 9 / 0.26) !important;
    color: #fde68a !important;
}

html.dark .insta-badge-emerald {
    background: rgb(4 120 87 / 0.26) !important;
    color: #bbf7d0 !important;
}

html.dark .insta-stat-card,
html.dark .insta-sync-panel,
html.dark .insta-empty-state,
html.dark .insta-inline-code {
    background-color: rgb(15 23 42 / 0.62) !important;
    border-color: rgb(71 85 105 / 0.82) !important;
    color: var(--text-body) !important;
}

html.dark .insta-stat-card {
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04);
}

html.dark .insta-sync-panel {
    background:
        linear-gradient(135deg, rgb(15 23 42 / 0.74), rgb(30 41 59 / 0.58)) !important;
}

html.dark .insta-panel-card-gradient {
    background-image: var(--insta-panel-gradient) !important;
}

html.dark .insta-panel-card-default {
    background: #ffffff !important;
}

html.dark .insta-panel-card .insta-card-identity-gradient {
    color: #ffffff !important;
}

html.dark .insta-panel-card .insta-card-identity-default {
    color: #111827 !important;
}

html.dark .insta-save-show-page {
    background:
        radial-gradient(circle at 12% 8%, rgb(190 24 93 / 0.12), transparent 30rem),
        radial-gradient(circle at 88% 16%, rgb(14 116 144 / 0.12), transparent 28rem),
        linear-gradient(180deg, #020617 0%, #0f172a 48%, #020617 100%) !important;
}

html.dark .insta-save-show-ambient {
    opacity: 0.35;
}

html.dark .insta-save-show-page .bg-white\/90,
html.dark .insta-save-show-page .bg-white\/95 {
    background-color: rgb(30 41 59 / 0.94) !important;
}

html.dark .insta-save-show-page .border-white\/70 {
    border-color: rgb(71 85 105 / 0.78) !important;
}

html.dark .insta-save-show-form-header {
    background-image: linear-gradient(90deg, #1e293b, #261827, #292018) !important;
}

html.dark .insta-save-show-page .bg-gray-50\/50,
html.dark .insta-save-show-page .hover\:bg-gray-50\/80:hover {
    background-color: rgb(15 23 42 / 0.72) !important;
}

html.dark .insta-save-show-page .bg-emerald-50\/95,
html.dark .insta-save-show-page .hover\:bg-emerald-50\/80:hover {
    background-color: rgb(5 46 22 / 0.95) !important;
}

html.dark .insta-save-show-page .bg-red-50\/95 {
    background-color: rgb(69 10 10 / 0.95) !important;
}

html.dark .insta-save-show-page .bg-amber-50\/70,
html.dark .insta-save-show-page .hover\:bg-amber-50\/80:hover {
    background-color: rgb(66 32 6 / 0.82) !important;
}

html.dark .insta-save-show-page .focus\:bg-white:focus,
html.dark .insta-save-show-page .hover\:bg-white:hover {
    background-color: var(--surface-elevated) !important;
}

html.dark .insta-save-show-page .ring-offset-white {
    --tw-ring-offset-color: var(--surface-panel) !important;
}