body { margin:0; }
.site-header { position:sticky; top:0; z-index:100; background:rgba(8,5,15,.94); backdrop-filter:blur(18px); border-bottom:1px solid var(--panel-border); }
.site-header-inner { max-width:1680px; min-height:64px; margin:auto; padding:0 24px; display:flex; align-items:center; gap:28px; }
.site-brand { display:flex; align-items:baseline; flex:none; gap:4px; font-size:19px; font-weight:800; text-decoration:none; color:var(--ink); }
.site-brand .font-display { font-size:27px; }
.site-nav { display:flex; align-items:center; gap:3px; flex:1; }
.site-nav>a,.tools-menu>summary { padding:10px 12px; color:var(--ink-dim); font-size:14px; white-space:nowrap; border-radius:8px; cursor:pointer; text-decoration:none; list-style:none; }
.tools-menu>summary::-webkit-details-marker { display:none; }
.site-nav a:hover,.tools-menu>summary:hover,.site-nav [aria-current=page],.tools-menu[data-active] > summary { background:rgba(139,127,214,.13); color:var(--ink); }
.site-account { flex:none; font-size:13px; color:var(--ink-dim); }
.tools-menu { position:relative; }
.tools-dropdown { position:absolute; left:0; top:100%; min-width:180px; display:grid; padding:7px; border:1px solid var(--panel-border); background:#150d26; border-radius:12px; box-shadow:0 14px 36px #0008; }
.tools-dropdown a { padding:10px 12px; font-size:14px; border-radius:6px; color:var(--ink-dim); text-decoration:none; }
#site-content { position:relative; min-height:calc(100vh - 65px); outline:none; isolation:isolate; }
#site-content[aria-busy=true] { opacity:.7; transition:opacity .12s; }
#site-notice { position:fixed; left:50%; top:76px; transform:translateX(-50%); z-index:200; max-width:90vw; padding:12px 18px; background:#352448; color:#fff; border:1px solid #8b7fd6; border-radius:10px; }
.skip-link { position:fixed; top:-100px; left:12px; z-index:500; padding:10px; background:#fff; color:#000; }
.skip-link:focus { top:8px; }
.account-page { min-height:75vh; display:grid; place-items:center; padding:40px 18px; }
.tool-directory { max-width:1180px; margin:auto; padding:52px 24px; }
.tool-directory h1 { font-size:36px; font-weight:800; margin:6px 0 12px; }
.eyebrow { letter-spacing:.2em; font-size:12px; font-weight:700; color:var(--violet-soft); }
.directory-intro { color:var(--ink-dim); margin-bottom:28px; }
.tool-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr)); gap:20px; }
.tool-card { padding:28px; border:1px solid var(--panel-border); border-radius:18px; background:var(--panel); text-decoration:none; transition:border-color .18s,transform .18s; }
.tool-card:hover { border-color:var(--violet); transform:translateY(-2px); }
.tool-card h2 { font-size:22px; font-weight:700; margin:14px 0 9px; }
.tool-card p { color:var(--ink-dim); font-size:14px; line-height:1.8; }
.tool-symbol { font-size:30px; color:var(--violet-soft); }
.tool-action { display:inline-block; margin-top:22px; color:var(--violet-soft); font-size:14px; font-weight:600; }
@media(max-width:900px) { .site-header-inner { flex-wrap:wrap; gap:4px 16px; padding:8px 16px; } .site-brand { flex:1; } .site-account { order:1; } .site-nav { order:2; flex-basis:100%; flex-wrap:wrap; gap:0; } .site-nav>a,.tools-menu>summary { font-size:12px; padding:8px 9px; } .tools-dropdown { left:auto; right:0; } .tool-directory { padding:32px 18px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; } }

.language-control { display:flex; align-items:center; gap:7px; color:var(--ink-dim); font-size:12px; margin-left:auto; }
.language-control select { background:#171022; border:1px solid #ffffff19; color:var(--ink); border-radius:8px; padding:7px 9px; max-width:125px; }
.tools-layout[data-tools-active=true] { display:grid; grid-template-columns:236px minmax(0,1fr); max-width:1680px; margin:auto; min-height:calc(100dvh - 65px); }
.tools-sidebar { display:none; }
.tools-layout[data-tools-active=true] .tools-sidebar { display:flex; flex-direction:column; position:sticky; top:65px; height:calc(100dvh - 65px); padding:32px 18px 22px; border-right:1px solid #ffffff0c; background:rgba(10,9,18,.7); }
.workspace-brand { display:flex; align-items:center; gap:11px; padding:0 10px 32px; }
.workspace-mark { display:grid; place-items:center; width:35px; height:39px; color:#c5b1ff; background:#a387ff16; border:1px solid #a387ff2b; border-radius:11px; font-size:28px; }
.workspace-brand strong { font-size:14px; font-weight:600; }
.workspace-brand small { display:block; font-size:9px; letter-spacing:.16em; margin-top:5px; color:var(--ink-faint); }
.workspace-nav a { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:0; font-size:13px; color:var(--ink-dim); text-decoration:none; margin-bottom:4px; }
.workspace-nav { min-height:0; overflow-y:auto; flex:1; }
.workspace-nav a>span:first-child { font-size:20px; width:22px; text-align:center; }
.workspace-nav a:hover { background:#ffffff05; color:var(--ink); }
.workspace-nav a[aria-current=page] { color:#d9caff; background:linear-gradient(95deg,#a98cff20,#a98cff08); box-shadow:inset 2px 0 #b9a1ff; }
.workspace-label { padding:26px 14px 8px; font-size:10px; color:var(--ink-faint); letter-spacing:.1em; }
.workspace-footer { margin-top:auto; padding:25px 12px 0; color:var(--ink-faint); font-size:11px; line-height:1.8; }
.tools-menu-toggle,.tools-scrim { display:none; }
.tools-sidebar-close { display:none; }
.tools-layout[data-tools-active=true] #site-content { min-width:0; }
.tools-layout[data-tools-active=true] .tool-directory { max-width:1200px; padding:48px 44px; }
.directory-hero { position:relative; overflow:hidden; padding:35px 30px 42px; border:1px solid #b199e921; border-radius:22px; background:radial-gradient(ellipse at 95% 100%,#7f62b825,transparent 65%),linear-gradient(130deg,#211934,#10101c); }
.directory-hero h1 { position:relative; z-index:1; max-width:650px; font-size:34px; line-height:1.4; margin-top:20px; }
.directory-hero .directory-intro { position:relative; z-index:1; font-size:14px; margin:14px 0 0; }
.directory-wave { position:absolute; display:flex; align-items:center; gap:8px; width:220px; height:140px; right:-26px; bottom:-16px; opacity:.24; transform:rotate(-15deg); }
.directory-wave i { width:7px; height:var(--bar); background:linear-gradient(#b795ff,#4d80a6); border-radius:10px; }
.directory-section { font-size:13px; margin:35px 0 16px; font-weight:600; color:var(--ink-dim); }
.tools-layout .tool-grid { grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr)); }
.tools-layout .tool-card { background:linear-gradient(140deg,#1a1526,#10101b); padding:28px; border-color:#ffffff12; }
.tools-layout .tool-symbol { display:grid; place-items:center; height:52px; width:52px; border-radius:15px; background:#a98cff15; border:1px solid #a98cff26; }
@media(max-width:1100px) { .site-header-inner { gap:12px; padding-left:16px; padding-right:16px; } .site-nav>a,.tools-menu>summary { padding:10px 8px; font-size:12px; } .tools-layout[data-tools-active=true] { grid-template-columns:205px minmax(0,1fr); } .tools-layout[data-tools-active=true] .tool-directory { padding:30px 24px; } }
@media(max-width:900px) {
  .language-control { order:1; margin-left:0; } .site-account { font-size:11px; } .language-control select { max-width:109px; padding:5px; }
  .tools-layout[data-tools-active=true] { display:block; }
  .tools-layout[data-tools-active=true] .tools-menu-toggle { display:flex; align-items:center; gap:10px; width:100%; padding:13px 20px; color:#c8b5ee; border-bottom:1px solid #ffffff12; background:#100d1a; font-size:12px; }
  .tools-layout[data-tools-active=true] .tools-sidebar { position:fixed; top:0; bottom:0; left:0; height:100dvh; width:260px; z-index:302; background:#100d1a; transform:translateX(-100%); visibility:hidden; transition:transform .2s,visibility .2s; }
  .tools-layout.menu-open[data-tools-active=true] .tools-sidebar { transform:translateX(0); visibility:visible; }
  .tools-layout.menu-open .tools-scrim { display:block; position:fixed; inset:0; z-index:301; background:#0009; border:0; width:100%; height:100%; }
  .tools-sidebar-close { display:block; position:absolute; right:10px; top:6px; font-size:25px; color:var(--ink-dim); padding:0 9px; }
  .tools-layout[data-tools-active=true] .tool-directory { padding:20px 16px; }
  .directory-hero { padding:24px 20px 30px; } .directory-hero h1 { font-size:26px; }
}