/* ToolMoko V5 — Premium White + Royal Blue. Shared global design overrides. */
:root {
 --color-primary:#2563EB; --color-primary-hover:#1D4ED8; --color-primary-light:#EFF6FF;
 --color-navy:#172554; --color-bg:#FFFFFF; --color-card:#FFFFFF;
 --color-card-border:#E2E8F0; --color-text-primary:#0F172A; --color-text-secondary:#64748B;
 --color-text-muted:#8795A8; --color-accent-blue:#3B82F6; --color-input-bg:#FFFFFF;
 --color-input-border:#CBD5E1; --color-input-focus:#2563EB; --color-border:#E2E8F0;
 --color-header-bg:rgba(255,255,255,.96); --color-hero-gradient-1:#EFF6FF;
 --color-hero-gradient-2:#FFFFFF; --color-ad-bg:#F8FAFC; --color-ad-border:#E2E8F0;
 --shadow-md:0 5px 20px rgba(15,35,80,.055); --shadow-lg:0 14px 34px rgba(15,35,80,.085);
 --shadow-xl:0 24px 54px rgba(15,35,80,.105); --shadow-glow:0 0 24px rgba(37,99,235,.14);
}
[data-theme="dark"] {
 --color-primary:#60A5FA; --color-primary-hover:#93C5FD; --color-primary-light:#172B49;
 --color-navy:#BFDBFE; --color-bg:#0B1120; --color-card:#111C30;
 --color-card-border:#26354D; --color-text-primary:#F8FAFC; --color-text-secondary:#A9B8CE;
 --color-text-muted:#8C9CB3; --color-accent-blue:#60A5FA; --color-input-bg:#101B2E;
 --color-input-border:#33445D; --color-input-focus:#60A5FA; --color-border:#26354D;
 --color-header-bg:rgba(11,17,32,.96); --color-hero-gradient-1:#132849;
 --color-hero-gradient-2:#0B1120; --color-ad-bg:#111C30; --color-ad-border:#26354D;
 --shadow-md:0 7px 20px rgba(0,0,0,.18); --shadow-lg:0 16px 36px rgba(0,0,0,.24);
 --shadow-xl:0 25px 54px rgba(0,0,0,.31); --shadow-glow:0 0 28px rgba(96,165,250,.16);
}
body {background:var(--color-bg);color:var(--color-text-primary)}
.site-header {backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.logo-icon {background:linear-gradient(135deg,#2563EB,#1D4ED8);box-shadow:0 5px 18px rgba(37,99,235,.18)}
.hero-section {background:radial-gradient(ellipse at 18% 22%,var(--color-hero-gradient-1),transparent 54%),radial-gradient(ellipse at 83% 74%,rgba(96,165,250,.10),transparent 42%),var(--color-hero-gradient-2)}
.hero-title .gradient-text {background:linear-gradient(105deg,#1D4ED8 12%,#3B82F6 95%);-webkit-background-clip:text;background-clip:text;color:transparent}
[data-theme="dark"] .hero-title .gradient-text {background:linear-gradient(105deg,#93C5FD,#60A5FA);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-background-shapes {opacity:.54}
.btn-primary {background:linear-gradient(110deg,#2563EB,#1D4ED8);color:#fff;border-color:transparent;box-shadow:0 6px 18px rgba(37,99,235,.18)}
.btn-primary:hover {background:linear-gradient(110deg,#1D4ED8,#1E40AF);box-shadow:0 9px 24px rgba(37,99,235,.23)}
.tool-card {border:1px solid var(--color-card-border);box-shadow:var(--shadow-md)}
.tool-card:hover {border-color:var(--color-primary);box-shadow:var(--shadow-lg)}
.hero-search-input:focus {border-color:var(--color-primary);box-shadow:0 0 0 4px rgba(37,99,235,.10)}
::selection {background:rgba(37,99,235,.20)}
:focus-visible {outline:2px solid var(--color-primary);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.hero-background-shapes,.hero-section *{animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* V6: crisp, clearly white layout with royal-blue accents */
html:not([data-theme="dark"]),html:not([data-theme="dark"]) body{background:#fff;color:#0f172a;color-scheme:light}
html:not([data-theme="dark"]) .site-header{background:rgba(255,255,255,.98);border-bottom:1px solid #e2e8f0}
html:not([data-theme="dark"]) .hero-section{background:linear-gradient(115deg,#fff 0%,#f4f8ff 65%,#fff 100%)}
html:not([data-theme="dark"]) .tool-card,html:not([data-theme="dark"]) .category-card{background:#fff;border-color:#e2e8f0}
html:not([data-theme="dark"]) .site-footer{background:#f8fafc}

/* ToolMoko official user-provided logo - V8 */
.site-logo {display:inline-flex;align-items:center;flex-shrink:0;line-height:1}
.site-logo .brand-logo-image {display:block;width:190px;max-width:100%;height:auto;object-fit:contain}
.mobile-drawer-header .brand-logo-image {width:160px}
.footer-brand .brand-logo-image {width:185px}
@media(max-width:480px){.site-logo .brand-logo-image{width:148px}}