:root{color-scheme:dark;--bg:#0a1120;--panel:#101b30;--panel2:#142139;--border:#25344c;--text:#eef6ff;--sub:#8d9fb9;--accent:#75dffa;--shadow:0 15px 48px #03091444}
:root[data-theme=light]{color-scheme:light;--bg:#f2f5fa;--panel:#fff;--panel2:#edf3fa;--border:#dce4f0;--text:#18253b;--sub:#61718a;--accent:#087fc0;--shadow:0 15px 35px #28385112}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,'Segoe UI',system-ui,-apple-system,sans-serif;font-size:14px}a{text-decoration:none;color:inherit}button,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #4dcafa;outline-offset:3px}button:disabled{opacity:.6;cursor:default} .app{display:grid;grid-template-columns:253px minmax(0,1fr);min-height:100vh}
.sidebar{display:flex;flex-direction:column;border-right:1px solid var(--border);background:#0e192c;min-height:100vh;padding:28px 16px 21px;color:#cedbec} .logo{display:flex;align-items:center;gap:12px;padding:0 13px 29px;border-bottom:1px solid #23354d}.logo img{border-radius:12px}.logo strong{display:block;font-weight:800;letter-spacing:-.8px;font-size:21px;color:#fff}.logo small{display:block;margin-top:2px;letter-spacing:1.9px;font-size:8px;color:#6bd9eb;font-weight:800}.side-section-label{color:#647995;font-size:10px;font-weight:800;letter-spacing:1.8px;margin:28px 15px 11px}.side-section-label.margin-top{margin-top:37px}.side-nav{display:grid;gap:4px}.side-link{display:flex;align-items:center;width:100%;gap:12px;text-align:left;border:1px solid transparent;background:none;color:#a4b4c9;border-radius:10px;padding:12px 14px;font-size:13px;font-weight:600}.side-link>span{font-size:21px;min-width:23px;font-weight:400;text-align:center}.side-link>b{margin-left:auto;font-size:10px;background:#263a57;padding:4px 7px;border-radius:8px}.side-link:hover{color:#fff;background:#192940}.side-link.active{background:#1e3550;border:1px solid #315677;color:#e8f8ff}.side-link.active>span{color:#64d9ed}.sidebar-bottom{margin-top:auto;padding:20px 14px 0;border-top:1px solid #243751}.sidebar-swatch{font-size:24px;color:#78dcfc}.sidebar-bottom p{font-size:12px;line-height:1.8;color:#8193ab}.sidebar-bottom p strong{color:#d5e4f9}.sidebar-bottom>span{color:#586b87;font-size:10px}
.page{min-width:0;display:flex;flex-direction:column}.topbar{height:72px;padding:0 clamp(22px,3vw,55px);display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--border)}.breadcrumb{font-size:13px;color:var(--sub);white-space:nowrap}.breadcrumb span{margin:0 12px;color:#57677e}.breadcrumb strong{color:var(--text);font-weight:650}.top-actions{display:flex;align-items:center;gap:23px}.online{color:var(--sub);font-size:11px;white-space:nowrap}.online i,.pulse{display:inline-block;width:7px;height:7px;background:#48d8a2;border-radius:50%;margin-right:6px;box-shadow:0 0 0 4px #1cc48713}.icon-button{width:35px;height:35px;border:1px solid var(--border);border-radius:10px;color:var(--text);background:var(--panel);font-size:21px}.external{color:var(--text);font-size:12px;font-weight:700;white-space:nowrap}.external span{color:var(--accent)}main{width:100%;max-width:1500px;padding:35px clamp(22px,3vw,55px) 60px;margin:0 auto;flex:1}
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);position:relative;overflow:hidden;min-height:333px;border:1px solid #2c4669;border-radius:22px;background:linear-gradient(115deg,#132842 0%,#0d1c35 58%,#101a37 100%);padding:42px clamp(25px,3.5vw,54px);box-shadow:var(--shadow)}.hero:before{position:absolute;content:'';width:520px;height:520px;border-radius:50%;right:-230px;top:-240px;background:radial-gradient(circle,#4265ad26,transparent 70%)}.hero-copy{position:relative;z-index:2}.eyebrow,.mini-label{color:#62d5e9;letter-spacing:2px;font-weight:850;font-size:10px}.hero h1{color:#f2f7ff;font-weight:800;font-size:clamp(27px,3vw,48px);line-height:1.15;letter-spacing:-1.65px;margin:21px 0}.hero h1 em{font-style:normal;background:linear-gradient(90deg,#7ce3f6,#9ba6ff);background-clip:text;color:transparent}.hero p{color:#a2b4ce;line-height:1.8;max-width:520px;margin:0}.hero-actions{margin-top:28px;display:flex;align-items:center;gap:19px;flex-wrap:wrap}.hero-actions>span{color:#7f9ab9;font-size:11px}.cta{display:inline-flex;align-items:center;justify-content:center;gap:22px;background:#75dcf2;color:#07253c;font-size:12px;font-weight:850;border-radius:10px;padding:14px 19px;transition:transform .2s}.cta:hover{transform:translateY(-2px);background:#a9edfb}.cta span{font-size:17px}.hero-visual{display:flex;position:relative;align-items:center;justify-content:center;min-width:0}.hero-visual svg{width:min(100%,480px);height:auto;filter:drop-shadow(0 18px 45px #2874a320)}.hero-label{position:absolute;border:1px solid #2d476c;background:#132943bf;border-radius:8px;padding:9px 11px;font-family:ui-monospace,Consolas,monospace;color:#91c3e7;font-size:9px;letter-spacing:1px;display:flex;gap:20px}.hero-label span{color:#56e4b9}.hero-label.top{right:1%;top:5%}.hero-label.bottom{left:10%;bottom:2%}
.section-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;margin-top:53px}.mini-label{color:#58bfe7}.section-head h2{margin:11px 0 7px;font-size:clamp(24px,2vw,29px);letter-spacing:-.9px}.count{font-size:12px;border:1px solid var(--border);border-radius:6px;color:var(--sub);vertical-align:middle;padding:4px 8px;margin-left:7px;letter-spacing:0}.section-head p{margin:0;color:var(--sub);font-size:13px;line-height:1.6}.search{display:flex;align-items:center;gap:11px;height:44px;flex:0 1 310px;min-width:210px;border:1px solid var(--border);border-radius:11px;background:var(--panel);padding:0 13px;color:var(--sub)}.search:focus-within{border-color:#56add8}.search input{min-width:0;flex:1;outline:0!important;border:0;color:var(--text);background:transparent;font-size:12px}.search input::placeholder{color:var(--sub)}.search kbd{font:12px ui-monospace,monospace;border:1px solid var(--border);border-radius:5px;padding:3px 6px}.filters{display:flex;gap:9px;flex-wrap:wrap;margin:25px 0 22px}.chip{border:1px solid var(--border);background:transparent;border-radius:8px;color:var(--sub);padding:9px 14px;font-size:12px;font-weight:700}.chip span{margin-left:5px}.chip:hover{border-color:var(--accent);color:var(--text)}.chip.active{background:#224361;color:#9bedff;border-color:#34617f}:root[data-theme=light] .chip.active{background:#e1f4fc;color:#186e99}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.tool-card{background:var(--panel);border:1px solid var(--border);border-radius:15px;overflow:hidden;transition:border-color .2s,transform .2s,box-shadow .2s;min-width:0;display:flex;flex-direction:column;position:relative}.tool-card:hover{border-color:#4b86ae;transform:translateY(-3px);box-shadow:var(--shadow)}.card-preview{height:128px;position:relative;overflow:hidden;background:var(--preview);border-bottom:1px solid var(--border)}.card-preview svg{position:absolute;right:12px;top:9px;max-width:75%;height:105px;opacity:.9}.card-preview:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--preview),transparent 70%)}.card-icon{position:absolute;z-index:1;top:18px;left:21px;display:grid;place-items:center;border:1px solid var(--stripe);background:#0b172eaa;width:38px;height:38px;border-radius:10px;color:var(--stripe);font-size:21px}.card-body{padding:20px 20px 17px;display:flex;flex-direction:column;flex:1}.card-tag{font-size:10px;letter-spacing:1.2px;font-weight:800;color:var(--stripe)}.card-body h3{font-size:17px;letter-spacing:-.3px;margin:10px 0 8px}.card-body p{color:var(--sub);font-size:12px;line-height:1.65;margin:0 0 17px;min-height:59px}.card-foot{border-top:1px solid var(--border);padding-top:14px;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto}.card-foot a{font-size:12px;color:var(--text);font-weight:750}.card-foot a:hover{color:var(--accent)}.favorite{font-size:22px;line-height:1;border:0;background:transparent;color:#7487a1;width:35px;height:34px;border-radius:8px}.favorite:hover,.favorite.is-favorite{color:#ffd778}.empty{text-align:center;border:1px dashed var(--border);padding:52px 12px;border-radius:16px}.empty[hidden]{display:none}.empty>span{font-size:42px;color:var(--sub)}.empty h3{margin:13px}.empty p{color:var(--sub)}.empty button{background:var(--panel);border:1px solid var(--border);border-radius:10px;color:var(--text);padding:10px 15px;margin-top:9px}
.bottom-banner{margin-top:35px;padding:24px 25px;display:flex;align-items:center;gap:18px;background:var(--panel);border:1px solid var(--border);border-radius:14px}.banner-symbol{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:#172f4c;color:#83dfff;font-size:24px;flex-shrink:0}.bottom-banner strong{font-size:13px}.bottom-banner p{color:var(--sub);font-size:11px;line-height:1.7;margin:7px 0 0}.bottom-banner>a{margin-left:auto;white-space:nowrap;color:var(--accent);font-size:12px;font-weight:750}.footer{border-top:1px solid var(--border);padding:23px clamp(22px,3vw,55px);display:flex;align-items:center;justify-content:space-between;color:var(--sub);font-size:11px;gap:12px}
@media(max-width:1250px){.app{grid-template-columns:210px minmax(0,1fr)}.sidebar{padding-left:10px;padding-right:10px}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.hero{grid-template-columns:1.1fr .9fr}.hero-visual svg{min-width:220px}.hero-label.top{top:6%}}
@media(max-width:900px){.app{display:block}.sidebar{min-height:0;display:block;padding:10px 16px}.sidebar .logo{display:inline-flex;border:0;padding:0}.sidebar .logo img{width:36px;height:36px}.sidebar .logo strong{font-size:17px}.side-section-label,.side-nav,.sidebar-bottom{display:none}.topbar{height:58px}.hero{min-height:300px;padding:30px}.hero h1{font-size:34px}.hero-label{display:none}.section-head{margin-top:36px}}
@media(max-width:650px){main{padding:17px 15px 35px}.topbar{padding:0 15px}.top-actions{gap:9px}.online,.external{display:none}.hero{display:block;min-height:0;padding:27px 22px;border-radius:15px}.hero h1{font-size:30px;letter-spacing:-.7px}.hero p{font-size:12px;line-height:1.7}.hero-actions{margin-top:21px}.hero-visual{display:none}.section-head{display:block;margin-top:36px}.search{margin-top:17px;max-width:none;width:100%}.filters{overflow:auto;flex-wrap:nowrap;padding-bottom:5px;margin-top:20px}.chip{white-space:nowrap}.cards{grid-template-columns:1fr;gap:12px}.card-preview{height:100px}.card-preview svg{height:90px}.card-body{padding:16px}.card-body p{min-height:0}.bottom-banner{padding:15px}.bottom-banner>a{display:none}.footer{padding:15px;flex-direction:column;align-items:flex-start}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}