:root{
  --dt-bg:#07111f;
  --dt-surface:#0d192b;
  --dt-surface-2:#101f34;
  --dt-border:rgba(148,163,184,.18);
  --dt-text:#f8fafc;
  --dt-muted:#94a3b8;
  --dt-accent:#00a4d6;
  --dt-accent-2:#7c3aed;
  --dt-good:#22c55e;
  --dt-warning:#f59e0b;
  --dt-shadow:0 24px 70px rgba(2,6,23,.24);
}
.devtools-shell,.devtools-page{max-width:1240px;margin:0 auto;padding:28px 20px 80px;color:var(--dt-text)}
.devtools-breadcrumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px;color:var(--dt-muted);font-size:.82rem}
.devtools-breadcrumb a{color:#67e8f9;text-decoration:none}
.devtools-breadcrumb a:hover{text-decoration:underline}
.devtools-hero{position:relative;overflow:hidden;padding:34px;border:1px solid var(--dt-border);border-radius:28px;background:radial-gradient(circle at 12% 0,rgba(0,164,214,.18),transparent 34%),radial-gradient(circle at 96% 10%,rgba(124,58,237,.15),transparent 32%),var(--dt-surface);box-shadow:var(--dt-shadow)}
.devtools-kicker{display:inline-flex;align-items:center;gap:8px;margin-bottom:10px;color:#67e8f9;font-size:.76rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.devtools-hero h1{margin:0;max-width:880px;font-size:clamp(2rem,5vw,4rem);line-height:1;letter-spacing:-.05em}
.devtools-hero p{max-width:820px;margin:16px 0 0;color:#c7d2e2;font-size:1rem;line-height:1.7}
.devtools-search{display:grid;grid-template-columns:1fr auto;gap:8px;max-width:760px;margin-top:24px;padding:7px;border:1px solid var(--dt-border);border-radius:16px;background:rgba(2,6,23,.42)}
.devtools-search input{min-width:0;min-height:46px;border:0;background:transparent;color:var(--dt-text);padding:0 12px;outline:none;font-size:1rem}
.devtools-search span{display:flex;align-items:center;padding:0 12px;color:var(--dt-muted);font-size:.82rem}
.devtools-groups{display:grid;gap:22px;margin-top:26px}
.devtools-group{padding:22px;border:1px solid var(--dt-border);border-radius:24px;background:rgba(13,25,43,.72)}
.devtools-group-head{display:flex;align-items:end;justify-content:space-between;gap:14px;margin-bottom:14px}
.devtools-group h2{margin:0;font-size:1.22rem}
.devtools-group-head span{color:var(--dt-muted);font-size:.78rem}
.devtools-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.devtool-card{display:flex;align-items:center;gap:12px;min-width:0;min-height:74px;padding:13px 14px;border:1px solid var(--dt-border);border-radius:16px;background:var(--dt-surface-2);color:var(--dt-text);text-decoration:none;transition:.16s ease}
.devtool-card:hover{transform:translateY(-2px);border-color:rgba(34,211,238,.4);box-shadow:0 14px 28px rgba(2,6,23,.24)}
.devtool-card-icon{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,rgba(0,164,214,.22),rgba(124,58,237,.18));color:#67e8f9}
.devtool-card-copy{min-width:0}
.devtool-card-copy strong{display:block;font-size:.9rem;overflow-wrap:anywhere}
.devtool-card-copy span{display:block;margin-top:4px;color:var(--dt-muted);font-size:.74rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.devtool-empty{padding:26px;text-align:center;color:var(--dt-muted);border:1px dashed var(--dt-border);border-radius:18px}
.devtools-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:22px;align-items:start;margin-top:22px}
.devtools-menu{position:sticky;top:90px;max-height:calc(100vh - 120px);overflow:auto;padding:10px;border:1px solid var(--dt-border);border-radius:20px;background:rgba(13,25,43,.96);scrollbar-width:thin}
.devtools-menu-title{display:block;padding:10px 10px 8px;color:#67e8f9;font-size:.72rem;font-weight:950;letter-spacing:.08em;text-transform:uppercase}
.devtools-menu a{display:flex;align-items:center;gap:8px;min-height:42px;padding:8px 9px;border-radius:10px;color:#dbe6f4;text-decoration:none;font-size:.78rem}
.devtools-menu a .material-symbols-outlined{flex:0 0 20px;font-size:18px;color:#7dd3fc}
.devtools-menu a:hover,.devtools-menu a.active{background:linear-gradient(135deg,rgba(0,164,214,.9),rgba(2,132,199,.82));color:#fff}
.devtools-menu a.active .material-symbols-outlined{color:#fff}
.devtool-main{min-width:0}
.devtool-title-card{padding:26px;border:1px solid var(--dt-border);border-radius:24px;background:radial-gradient(circle at 100% 0,rgba(124,58,237,.14),transparent 28%),var(--dt-surface)}
.devtool-title-row{display:flex;align-items:flex-start;gap:14px}
.devtool-title-icon{display:grid;place-items:center;flex:0 0 52px;width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,rgba(0,164,214,.25),rgba(124,58,237,.22));color:#67e8f9}
.devtool-title-icon .material-symbols-outlined{font-size:28px}
.devtool-title-card h1{margin:0;font-size:clamp(1.8rem,4vw,3.2rem);line-height:1.05;letter-spacing:-.04em}
.devtool-title-card p{margin:10px 0 0;color:#c7d2e2;line-height:1.65}
.devtool-test-note{display:flex;gap:10px;margin-top:16px;padding:12px 13px;border:1px solid rgba(245,158,11,.28);border-radius:14px;background:rgba(245,158,11,.08);color:#fde68a;font-size:.82rem;line-height:1.5}
.devtool-workbench{margin-top:16px;padding:22px;border:1px solid var(--dt-border);border-radius:24px;background:var(--dt-surface);box-shadow:var(--dt-shadow)}
.devtool-form{display:grid;gap:14px}
.devtool-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.devtool-field{min-width:0}
.devtool-field.full{grid-column:1/-1}
.devtool-field label{display:block;margin-bottom:6px;color:#cbd5e1;font-size:.78rem;font-weight:800}
.devtool-field input,.devtool-field select,.devtool-field textarea{width:100%;min-height:46px;border:1px solid var(--dt-border);border-radius:12px;background:#07111f;color:var(--dt-text);padding:10px 11px;outline:none}
.devtool-field textarea{min-height:110px;resize:vertical}
.devtool-field input:focus,.devtool-field select:focus,.devtool-field textarea:focus{border-color:rgba(34,211,238,.56);box-shadow:0 0 0 3px rgba(34,211,238,.08)}
.devtool-check{display:flex;align-items:center;gap:8px;min-height:46px;padding:10px 11px;border:1px solid var(--dt-border);border-radius:12px;background:#07111f;color:#dbe6f4;font-size:.82rem}
.devtool-check input{width:18px;height:18px}
.devtool-actions{display:flex;gap:9px;flex-wrap:wrap}
.devtool-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;border:1px solid var(--dt-border);border-radius:12px;background:#111f34;color:#e8f1fb;padding:10px 15px;font-weight:900;cursor:pointer}
.devtool-button.primary{border:0;background:linear-gradient(135deg,#0099c7,#7c3aed);color:#fff}
.devtool-button:hover{filter:brightness(1.07)}
.devtool-result{margin-top:18px;border-top:1px solid var(--dt-border);padding-top:18px}
.devtool-result[hidden]{display:none}
.devtool-result-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.devtool-result-head strong{font-size:.92rem}
.devtool-copy-all{min-height:40px;border:1px solid var(--dt-border);border-radius:10px;background:#0b1728;color:#dbe6f4;padding:8px 11px;font-size:.76rem;font-weight:900;cursor:pointer}
.devtool-output-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.devtool-output-item{min-width:0;padding:12px;border:1px solid var(--dt-border);border-radius:13px;background:#07111f}
.devtool-output-item small{display:block;color:var(--dt-muted);font-size:.68rem;text-transform:uppercase;letter-spacing:.06em}
.devtool-output-item strong{display:block;margin-top:4px;color:#f8fafc;font-size:.92rem;overflow-wrap:anywhere;word-break:break-word}
.devtool-output-item button{margin-top:8px;min-height:34px;border:0;border-radius:8px;background:rgba(34,211,238,.1);color:#a5f3fc;padding:6px 9px;font-size:.7rem;font-weight:850;cursor:pointer}
.devtool-output-text{max-height:420px;overflow:auto;margin:0;padding:16px;border:1px solid var(--dt-border);border-radius:14px;background:#07111f;color:#e2e8f0;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.55}
.devtool-inline-list{display:flex;gap:8px;flex-wrap:wrap}
.devtool-symbol{min-width:44px;min-height:44px;border:1px solid var(--dt-border);border-radius:10px;background:#07111f;color:#fff;font-size:1.1rem;cursor:pointer}
.devtool-symbol:hover{border-color:#22d3ee;background:rgba(34,211,238,.1)}
.devtool-canvas-wrap{display:grid;place-items:center;min-height:260px;padding:18px;border:1px dashed var(--dt-border);border-radius:14px;background:#07111f;overflow:auto}
.devtool-canvas-wrap canvas{max-width:100%;height:auto;border-radius:10px;box-shadow:0 16px 38px rgba(0,0,0,.24)}
.devtool-resume{padding:24px;border-radius:14px;background:#fff;color:#111827}
.devtool-resume h2{margin:0;font-size:1.8rem}
.devtool-resume h3{margin:18px 0 6px;font-size:1rem}
.devtool-resume p{margin:5px 0;color:#334155;line-height:1.55}
.devtool-seo{display:grid;gap:16px;margin-top:18px}
.devtool-seo-card{padding:22px;border:1px solid var(--dt-border);border-radius:20px;background:rgba(13,25,43,.74)}
.devtool-seo-card h2,.devtool-seo-card h3{margin-top:0}
.devtool-seo-card p,.devtool-seo-card li{color:#b8c5d6;line-height:1.7}
.devtool-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.devtool-step{padding:14px;border-radius:14px;background:#07111f;border:1px solid var(--dt-border)}
.devtool-step b{display:block;color:#67e8f9;margin-bottom:5px}
.devtool-faq details{padding:12px 0;border-top:1px solid var(--dt-border)}
.devtool-faq details:first-child{border-top:0}
.devtool-faq summary{cursor:pointer;font-weight:850}
.devtool-related{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.devtool-related a{display:flex;align-items:center;gap:9px;min-height:48px;padding:10px 12px;border:1px solid var(--dt-border);border-radius:12px;background:#07111f;color:#dbe6f4;text-decoration:none}
.devtool-toast{position:fixed;left:50%;bottom:24px;z-index:9999;transform:translate(-50%,12px);padding:10px 14px;border-radius:999px;background:#0f172a;color:#fff;border:1px solid rgba(255,255,255,.14);box-shadow:0 14px 34px rgba(0,0,0,.32);opacity:0;pointer-events:none;transition:.18s}
.devtool-toast.show{opacity:1;transform:translate(-50%,0)}
.home-devtools{max-width:1240px;margin:0 auto 34px;padding:0 20px}
.home-devtools details{overflow:hidden;border:1px solid var(--dt-border);border-radius:24px;background:linear-gradient(135deg,rgba(0,164,214,.07),rgba(124,58,237,.06)),var(--dt-surface)}
.home-devtools summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;padding:15px 20px;cursor:pointer;list-style:none;font-weight:950}
.home-devtools summary::-webkit-details-marker{display:none}
.home-devtools summary span:first-child{display:flex;align-items:center;gap:10px}
.home-devtools-count{color:var(--dt-muted);font-size:.76rem;font-weight:700}
.home-devtools-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;padding:1px;background:var(--dt-border)}
.home-devtools-list a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:46px;padding:9px 12px;background:var(--dt-surface);color:#dbe6f4;text-decoration:none;font-size:.78rem}
.home-devtools-list a:hover{background:#0796bd;color:#fff}
.home-devtools-footer{padding:14px 18px;text-align:right}
.home-devtools-footer a{color:#67e8f9;text-decoration:none;font-weight:900}

body.front-theme-light .devtools-shell,
body.front-theme-light .devtools-page{--dt-bg:#f8fafc;--dt-surface:#fff;--dt-surface-2:#f8fafc;--dt-border:rgba(15,23,42,.12);--dt-text:#0f172a;--dt-muted:#64748b;--dt-shadow:0 20px 50px rgba(15,23,42,.08);color:#0f172a}
body.front-theme-light .devtools-hero p,
body.front-theme-light .devtool-title-card p,
body.front-theme-light .devtool-seo-card p,
body.front-theme-light .devtool-seo-card li{color:#475569}
body.front-theme-light .devtool-card,
body.front-theme-light .devtools-menu a,
body.front-theme-light .devtool-related a{color:#0f172a}
body.front-theme-light .devtool-field label{color:#334155}
body.front-theme-light .devtool-field input,
body.front-theme-light .devtool-field select,
body.front-theme-light .devtool-field textarea,
body.front-theme-light .devtool-check,
body.front-theme-light .devtool-output-item,
body.front-theme-light .devtool-output-text,
body.front-theme-light .devtool-step,
body.front-theme-light .devtool-related a,
body.front-theme-light .devtool-symbol,
body.front-theme-light .devtool-canvas-wrap{background:#f8fafc;color:#0f172a}
body.front-theme-light .devtool-output-item strong{color:#0f172a}
body.front-theme-light .home-devtools details,
body.front-theme-light .home-devtools-list a{background:#fff;color:#0f172a}

@media(max-width:980px){
  .devtools-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .devtools-layout{grid-template-columns:1fr}
  .devtools-menu{position:static;display:flex;overflow-x:auto;max-height:none;gap:6px;border-radius:15px;scrollbar-width:none}
  .devtools-menu::-webkit-scrollbar{display:none}
  .devtools-menu-title{display:none}
  .devtools-menu a{flex:0 0 auto;white-space:nowrap}
  .home-devtools-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  .devtools-shell,.devtools-page{padding:14px 12px 60px}
  .devtools-hero{padding:24px 18px;border-radius:20px}
  .devtools-search{grid-template-columns:1fr}
  .devtools-search span{display:none}
  .devtools-search input{font-size:16px}
  .devtools-grid{grid-template-columns:1fr}
  .devtools-group{padding:16px;border-radius:18px}
  .devtool-card{min-height:68px}
  .devtool-title-card,.devtool-workbench,.devtool-seo-card{padding:18px;border-radius:18px}
  .devtool-title-row{gap:10px}
  .devtool-title-icon{width:46px;height:46px;flex-basis:46px}
  .devtool-fields,.devtool-output-grid,.devtool-related{grid-template-columns:1fr}
  .devtool-field input,.devtool-field select,.devtool-field textarea{min-height:48px;font-size:16px}
  .devtool-button{min-height:48px}
  .devtool-steps{grid-template-columns:1fr}
  .home-devtools{padding:0 12px}
  .home-devtools-list{grid-template-columns:1fr}
  .home-devtools summary{padding:13px 14px}
}
@media(prefers-reduced-motion:reduce){
  .devtool-card,.devtool-toast{transition:none}
  .devtool-card:hover{transform:none}
}