html:root {
    --bg: #f7f9fc !important;
    --bg2: #f3f6fa !important;
    --panel: #ffffff !important;
    --panel2: #ffffff !important;
    --text: #1c2b3a !important;
    --muted: #64748b !important;
    --cyan: #1976d2 !important;
    --cyan2: #4aa3ff !important;
    --blue: #1976d2 !important;
    --line: rgba(201, 213, 226, .45) !important;
    --line2: rgba(74, 163, 255, .25) !important;
    --danger: #c73e4d !important;
    --warning: #f28c28 !important;
    --good: #218739 !important;
    --appearance-radius: 14px;
}

html body {
    color: #1c2b3a !important;
    font-family: "Inter", Arial, Helvetica, sans-serif !important;
    font-size: 17px !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(25, 118, 210, .20), transparent 34rem),
        radial-gradient(circle at 10% 70%, rgba(74, 163, 255, .09), transparent 26rem),
        linear-gradient(180deg, #f3f6fa 0%, #f7f9fc 45%, #f3f6fa 100%) !important;
}

html body::before {
    opacity: 0 !important;
    background-image:
        linear-gradient(rgba(25, 118, 210, .18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(25, 118, 210, .18) 1px, transparent 1px) !important;
}

html body::after {
    opacity: 0 !important;
    background:
        linear-gradient(90deg, transparent 0 8%, rgba(25, 118, 210, .12) 8.2%, transparent 8.6%),
        linear-gradient(0deg, transparent 0 18%, rgba(25, 118, 210, .08) 18.2%, transparent 18.6%) !important;
}

html .site-hero {
    background:
        radial-gradient(circle at center, rgba(25, 118, 210, .16), transparent 42rem),
        linear-gradient(180deg, #f3f6fa, #ffffff 80%, #f7f9fc) !important;
    border-bottom-color: rgba(201, 213, 226, .45) !important;
    box-shadow: 0 0 40px rgba(25, 118, 210, 0.00) !important;
}

html .topnav {
    background: linear-gradient(180deg, #ffffff, #f3f6fa) !important;
    border-bottom-color: rgba(201, 213, 226, .45) !important;
    box-shadow: 0 0 22px rgba(25, 118, 210, 0.00) !important;
}

html .nav-title,
html .nav-menu a {
    color: #1c2b3a !important;
    font-family: "Space Grotesk", Arial, Helvetica, sans-serif !important;
}

html .nav-title {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

html .nav-title:hover,
html .nav-group:focus-within .nav-title,
html .nav-group:hover .nav-title {
    background: linear-gradient(
        180deg,
        rgba(25, 118, 210, .14),
        rgba(74, 163, 255, .10)
    ) !important;
    box-shadow:
        inset 0 -2px 0 #1976d2,
        0 0 20px rgba(25, 118, 210, 0.00)
        !important;
}

html .nav-menu {
    background: #f3f6fa !important;
    border-color: rgba(201, 213, 226, .45) !important;
}

html .card,
html .result-item,
html .drawer,
html .setup-card,
html .setting-block,
html .keyword-row,
html .part-type-row {
    border-radius: var(--appearance-radius) !important;
}

html .card {
    background:
        linear-gradient(180deg, #ffffff, #f3f6fa) !important;
    border-color: rgba(201, 213, 226, .45) !important;
    box-shadow:
        0 0 22px rgba(25, 118, 210, 0.00),
        0 18px 44px rgba(0,0,0,.35),
        inset 0 0 26px rgba(25, 118, 210, .05) !important;
}

html .card h1,
html .card h2,
html .card h3,
html h1,
html h2,
html h3,
html .setup-card h3 {
    font-family: "Space Grotesk", Arial, Helvetica, sans-serif !important;
    color: #1c2b3a !important;
    text-transform: none !important;
    text-shadow: 0 0 12px rgba(25, 118, 210, 0.00) !important;
}

html input,
html select,
html textarea,
html button:not(.danger):not(.warning):not(.custom-icon-action):not(.nav-title):not(.sidebar-section-toggle):not(.topbar-notification-toggle):not(.item-detail-link) {
    font-family: "Inter", Arial, Helvetica, sans-serif !important;
    color: #1c2b3a !important;
    border-color: rgba(201, 213, 226, .42) !important;
    background: #f3f6fa !important;
    border-radius: min(var(--appearance-radius), 12px) !important;
}

html button:not(.danger):not(.warning):not(.custom-icon-action):not(.nav-title):not(.sidebar-section-toggle):not(.topbar-notification-toggle):not(.item-detail-link),
html .button:not(.danger):not(.warning):not(.custom-icon-action) {
    background: linear-gradient(180deg, #1976d2, #4aa3ff) !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,.45) !important;
    box-shadow: 0 0 16px rgba(25, 118, 210, 0.00) !important;
}

html button:not(.custom-icon-action):not(.nav-title):not(.sidebar-section-toggle):not(.topbar-notification-toggle):not(.item-detail-link):hover,
html .button:not(.custom-icon-action):hover {
    box-shadow: 0 0 24px rgba(25, 118, 210, 0.00) !important;
}

html table {
    background: color-mix(in srgb, #ffffff 96%, #1976d2 4%) !important;
    border: 1px solid rgba(201, 213, 226, .38) !important;
}

html tbody tr {
    background: color-mix(in srgb, #ffffff 97%, #1976d2 3%) !important;
}

html tbody tr:nth-child(even) {
    background: color-mix(in srgb, #f3f6fa 95%, #1976d2 5%) !important;
}

html tbody tr:hover {
    background: color-mix(in srgb, #ffffff 90%, #1976d2 10%) !important;
}

html th {
    color: #1c2b3a !important;
    background: color-mix(in srgb, #f3f6fa 88%, #1976d2 12%) !important;
}

html td,
html th {
    border-bottom-color: rgba(201, 213, 226, .34) !important;
}


/* Sidebar section headers intentionally use the same quiet treatment as Search. */
html .sidebar-section-toggle {
    font-family: "Inter", Arial, Helvetica, sans-serif !important;
    color: #1c2b3a !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

html .sidebar-section-toggle:hover,
html .sidebar-section-toggle:focus,
html .sidebar-section-toggle:focus-visible,
html .sidebar-section.open > .sidebar-section-toggle:hover {
    color: #1976d2 !important;
    background: rgba(25, 118, 210, .07) !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    outline: none !important;
}

html .sidebar-section.open > .sidebar-section-toggle {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

html .muted,
html label {
    color: #64748b !important;
}

html .tag,
html .location,
html .stat-pill {
    border-color: rgba(201, 213, 226, .42) !important;
}

html .danger,
html button.danger,
html .button.danger {
    color: #ffffff !important;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, #c73e4d 84%, #ffffff 16%),
        #c73e4d    ) !important;
    border-color: rgba(255,255,255,.45) !important;
    box-shadow: 0 0 16px rgba(199, 62, 77, .28) !important;
}

html .warning,
html button.warning,
html .button.warning {
    background: #f28c28 !important;
}

html .custom-icon-action,
html button.custom-icon-action,
html .button.custom-icon-action {
    color: #172638 !important;
    background: linear-gradient(180deg, #ffc45a, #f08a24) !important;
    border-color: #b55b0b !important;
    text-shadow: none !important;
    box-shadow: 0 0 18px rgba(240, 138, 36, .42) !important;
}

html .custom-icon-action:hover,
html button.custom-icon-action:hover,
html .button.custom-icon-action:hover {
    filter: brightness(1.08) !important;
    box-shadow: 0 0 26px rgba(240, 138, 36, .62) !important;
}



/* Theme-aware application shell */
html .app-sidebar {
    background: linear-gradient(180deg, #ffffff, #f3f6fa) !important;
    border-right-color: rgba(201, 213, 226, .62) !important;
    box-shadow: 8px 0 24px rgba(15,23,42,.08) !important;
}
html .sidebar-brand { border-bottom-color: rgba(201, 213, 226, .62) !important; }
html .sidebar-logo img { filter: none !important; }
html .sidebar-direct,
html .sidebar-section-toggle,
html .sidebar-subnav a,
html .sidebar-chevron { color: #64748b !important; }
html .sidebar-direct:hover,
html .sidebar-section-toggle:hover,
html .sidebar-subnav a:hover { color: #1c2b3a !important; }
html .sidebar-direct.active,
html .sidebar-subnav a.active { color: #1976d2 !important; }
html .app-topbar {
    background: #ffffff !important;
    border-bottom-color: rgba(201, 213, 226, .62) !important;
    box-shadow: 0 6px 20px rgba(15,23,42,.06) !important;
}
html .topbar-title { color: #1c2b3a !important; font-family: "Space Grotesk", Arial, Helvetica, sans-serif !important; }
html .topbar-search,
html .topbar-scan,
html .topbar-quick-add-toggle,
html .topbar-pick-list,
html .mobile-menu-button,
html .topbar-notification-toggle {
    color: #64748b !important;
    background: #f3f6fa !important;
    border-color: rgba(201, 213, 226, .62) !important;
}
html .topbar-search:hover,
html .topbar-scan:hover,
html .topbar-scan.active,
html .topbar-quick-add-toggle:hover,
html .topbar-quick-add-toggle[aria-expanded="true"],
html .topbar-pick-list:hover,
html .topbar-pick-list.active,
html .mobile-menu-button:hover,
html .topbar-notification-toggle:hover,
html .topbar-notification-toggle[aria-expanded="true"] { color: #1c2b3a !important; border-color: #1976d2 !important; }
html .topbar-state-indicator { background-color: #f3f6fa !important; }
html .topbar-clipboard-state { color: color-mix(in srgb, #f28c28 72%, #1c2b3a) !important; }
html .topbar-clipboard-state.is-unavailable { color: #c73e4d !important; }
html .topbar-borrowed-state { color: color-mix(in srgb, #d946ef 72%, #1c2b3a) !important; }
html .notification-panel,
html .notification-panel-heading { background: #ffffff !important; color: #1c2b3a !important; }
html .notification-panel,
html .notification-panel-heading,
html .notification-item { border-color: rgba(201, 213, 226, .62) !important; }
html .notification-item.notification-clipboard { border-left-color: #f28c28 !important; }
html .notification-item.notification-borrowed { border-left-color: #d946ef !important; }
html .notification-item.notification-system-warning { border-left-color: #f28c28 !important; }
html .notification-item.notification-system-alert { border-left-color: #c73e4d !important; }


/* Theme-aware legacy component cleanup */
html .storage-location-card,
html .storage-cabinet-card,
html .storage-cabinet-shell,
html .storage-empty-state,
html .storage-config-card,
html .storage-type-card,
html .tp-transfer-block,
html .db-stat,
html .sub-box {
    background: #ffffff !important;
    color: #1c2b3a !important;
    border-color: rgba(201, 213, 226, .72) !important;
    box-shadow: 0 8px 24px rgba(15,23,42,.06) !important;
}
html .storage-location-copy strong,
html .storage-object-label strong,
html .storage-back-link {
    color: #1c2b3a !important;
}
html .storage-back-link,
html .storage-mini-drawer {
    background: #f3f6fa !important;
    border-color: rgba(201, 213, 226, .62) !important;
}
html .storage-back-link:hover {
    color: #1976d2 !important;
    border-color: #1976d2 !important;
}
html .log-table th,
html .log-table td,
html .db-table th,
html .db-table td,
html .sub-table th,
html .sub-table td,
html .tp-stat,
html .tp-issue {
    border-color: rgba(201, 213, 226, .62) !important;
}


/* Consistent compact action buttons */
html button:not(.nav-title):not(.sidebar-section-toggle):not(.mobile-menu-button):not(.topbar-quick-add-toggle):not(.topbar-notification-toggle):not(.notification-icon-button):not(.item-detail-link),
html .button {
    width: auto !important;
    min-width: 0 !important;
    padding: 7px 11px !important;
    font-size: .92rem !important;
    line-height: 1.2 !important;
}
html input:not([type]),
html input[type="text"],
html input[type="search"],
html input[type="email"],
html input[type="password"],
html input[type="url"],
html input[type="tel"],
html input[type="number"],
html input[type="date"],
html input[type="time"],
html input[type="datetime-local"],
html select,
html textarea {
    padding: 7px 11px !important;
    font-size: .92rem !important;
    line-height: 1.2 !important;
}
html input:not([type]),
html input[type="text"],
html input[type="search"],
html input[type="email"],
html input[type="password"],
html input[type="url"],
html input[type="tel"],
html input[type="number"],
html input[type="date"],
html input[type="time"],
html input[type="datetime-local"],
html select {
    min-height: calc(1.2em + 16px) !important;
}
html form > button[type="submit"]:only-child {
    width: auto !important;
}
@media (max-width: 900px) {
    html input:not([type]),
    html input[type="text"],
    html input[type="search"],
    html input[type="email"],
    html input[type="password"],
    html input[type="url"],
    html input[type="tel"],
    html input[type="number"],
    html input[type="date"],
    html input[type="time"],
    html input[type="datetime-local"],
    html select {
        min-height: 44px !important;
    }
}