.coding-guide-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.coding-guide-card,.article-section,.editor-demo,.code-panel,.article-cta { border:1px solid rgba(140,170,255,.2); border-radius:18px; background:var(--surface); }
.coding-guide-card { padding:26px; min-height:250px; display:flex; flex-direction:column; }
.coding-guide-card h2 { margin:10px 0; }
.coding-guide-card p { color:var(--muted); }
.coding-guide-card .button { margin-top:auto; align-self:flex-start; }
.coding-guide-card.soon span { color:var(--blue-bright); font-weight:700; margin-top:auto; }
.coding-guide-card.featured { grid-column:span 2; background:radial-gradient(circle at 85% 10%,rgba(111,67,255,.22),transparent 15rem),var(--surface); }
.coding-article { max-width:980px; padding-top:45px; padding-bottom:80px; }
.coding-article h1 { max-width:780px; font-size:clamp(2.25rem,5vw,4.2rem); margin:12px 0; }
.quick-nav { display:flex; flex-wrap:wrap; gap:10px; margin:30px 0; }
.quick-nav a { padding:8px 12px; border:1px solid rgba(140,170,255,.28); border-radius:999px; text-decoration:none; color:var(--text); font-size:13px; }
.article-section { margin:20px 0; padding:28px; }
.article-section h2 { margin-top:0; }
.article-section p,.step-list,.check-list { line-height:1.7; }
.step-list,.check-list { padding-left:22px; }
.step-list li,.check-list li { margin:14px 0; }
kbd { padding:2px 6px; border:1px solid rgba(140,170,255,.3); border-radius:5px; background:rgba(255,255,255,.06); font-family:inherit; font-size:.9em; }
.editor-demo { overflow:hidden; background:#101827; }
.editor-bar { display:flex; align-items:center; gap:9px; padding:12px 16px; background:#18243a; font-size:13px; }
.editor-bar small { margin-left:auto; color:#8bd6ff; }
.editor-dot { width:9px; height:9px; border-radius:50%; background:#6d63ff; }
.editor-demo pre,.code-panel pre { margin:0; overflow:auto; }
.editor-demo pre { padding:22px; min-height:130px; color:#dce9ff; line-height:1.65; }
.editor-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:14px 16px; border-top:1px solid rgba(255,255,255,.08); }
.editor-actions span { color:#b6c8e7; font-size:13px; }
.code-panel { overflow:hidden; background:#0d1422; margin:18px 0; }
.code-panel > div { display:flex; justify-content:space-between; align-items:center; padding:10px 14px; background:#18243a; color:#bcd1f4; font-size:13px; }
.copy-code { border:0; background:transparent; color:var(--blue-bright); font:inherit; cursor:pointer; }
.code-panel pre { padding:18px; color:#dce9ff; line-height:1.6; }
.article-note { padding:14px 16px; border-left:3px solid var(--blue-bright); background:rgba(62,127,255,.08); color:#c8d7f2; }
.article-cta { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px; margin-top:20px; }
.article-cta h2,.article-cta p { margin:6px 0; }
.grid-lab { padding:18px; border:1px solid rgba(140,170,255,.22); border-radius:14px; background:rgba(8,18,38,.55); }
.grid-lab > label { display:grid; gap:8px; margin-bottom:18px; color:var(--text); font-weight:700; }
.grid-lab output { color:var(--blue-bright); font-size:1.3rem; }
.grid-lab input { width:100%; accent-color:var(--blue-bright); }
.grid-preview { --card-min:240px; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--card-min)),1fr)); gap:12px; transition:grid-template-columns .2s ease; }
.grid-preview article { min-height:150px; display:flex; flex-direction:column; padding:18px; border:1px solid rgba(143,168,255,.22); border-radius:12px; background:linear-gradient(150deg,rgba(41,72,154,.4),rgba(11,20,39,.85)); }
.grid-preview span { color:var(--blue-bright); font-size:12px; font-weight:800; }
.grid-preview h3 { margin:auto 0 5px; }
.grid-preview p { margin:0; color:var(--muted); font-size:13px; }
.theme-lab { padding:18px; border:1px solid rgba(140,170,255,.22); border-radius:14px; background:rgba(8,18,38,.55); }
.theme-preview { --preview-bg:#0b1425; --preview-surface:#15223a; --preview-text:#edf4ff; --preview-muted:#a7badb; --preview-line:rgba(168,194,255,.2); overflow:hidden; border:1px solid var(--preview-line); border-radius:14px; background:var(--preview-bg); color:var(--preview-text); transition:background .25s,color .25s; }
.theme-preview[data-theme="light"] { --preview-bg:#edf3fc; --preview-surface:#ffffff; --preview-text:#18243a; --preview-muted:#556785; --preview-line:rgba(44,75,130,.2); }
.theme-preview-bar { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 16px; background:var(--preview-surface); border-bottom:1px solid var(--preview-line); }
.theme-switch { display:inline-flex; align-items:center; gap:8px; border:0; background:transparent; color:var(--preview-text); cursor:pointer; font:inherit; }
.theme-switch span { width:34px; height:19px; position:relative; border-radius:99px; background:#5b78b7; }
.theme-switch span::after { content:""; position:absolute; top:3px; left:3px; width:13px; height:13px; border-radius:50%; background:#fff; transition:transform .2s; }
.theme-preview[data-theme="dark"] .theme-switch span::after { transform:translateX(15px); }
.theme-switch em { font-style:normal; font-size:12px; }
.theme-preview-body { padding:26px; }
.theme-preview-kicker { margin:0; color:#5b9cff; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.theme-preview-body h3 { margin:8px 0; font-size:1.7rem; }
.theme-preview-body > p:not(.theme-preview-kicker) { color:var(--preview-muted); }
.theme-preview-body > div { display:flex; align-items:end; justify-content:space-between; margin-top:22px; padding:15px; border:1px solid var(--preview-line); border-radius:10px; background:var(--preview-surface); color:var(--preview-muted); }
.theme-preview-body > div b { color:var(--preview-text); font-size:1.8rem; }
.search-lab { padding:18px; border:1px solid rgba(140,170,255,.22); border-radius:14px; background:rgba(8,18,38,.55); }
.search-lab-field { display:grid; gap:8px; color:var(--text); font-size:14px; font-weight:700; }
.search-lab-field input { width:100%; box-sizing:border-box; padding:13px 14px; border:1px solid rgba(140,170,255,.34); border-radius:10px; outline:0; background:rgba(8,15,31,.72); color:var(--text); font:inherit; }
.search-lab-field input:focus { border-color:var(--blue-bright); box-shadow:0 0 0 3px rgba(100,155,255,.15); }
.search-lab-status { margin:14px 0; color:var(--blue-bright); font-size:13px; font-weight:700; }
.search-lab-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; }
.search-lab-grid article { min-height:142px; padding:16px; border:1px solid rgba(143,168,255,.22); border-radius:12px; background:linear-gradient(150deg,rgba(41,72,154,.4),rgba(11,20,39,.85)); }
.search-lab-grid article span { color:var(--blue-bright); font-size:12px; font-weight:800; }
.search-lab-grid article h3 { margin:12px 0 7px; font-size:1.08rem; }
.search-lab-grid article p { margin:0; color:var(--muted); font-size:13px; line-height:1.55; }
.search-lab-empty { margin:16px 0 0; padding:14px; border:1px dashed rgba(140,170,255,.38); border-radius:10px; color:var(--muted); text-align:center; }
body.light-mode .search-lab { border-color:rgba(215,135,255,.28); background:rgba(24,11,41,.62); }
body.light-mode .search-lab-field input { border-color:rgba(215,135,255,.42); background:rgba(17,7,29,.76); color:#f7efff; }
body.light-mode .search-lab-field input:focus { border-color:#edb5ff; box-shadow:0 0 0 3px rgba(215,135,255,.16); }
body.light-mode .search-lab-status,body.light-mode .search-lab-grid article span { color:#edb5ff; }
body.light-mode .search-lab-grid article { border-color:rgba(215,135,255,.25); background:linear-gradient(150deg,rgba(96,44,132,.56),rgba(27,12,46,.92)); }
body.light-mode .search-lab-empty { border-color:rgba(215,135,255,.42); color:#d4c0e3; }
@media (max-width:760px) { .coding-guide-grid { grid-template-columns:1fr; } .coding-guide-card.featured { grid-column:auto; } .article-section { padding:20px; } .editor-bar { align-items:flex-start; flex-wrap:wrap; } .editor-bar small { width:100%; margin-left:0; } .article-cta { align-items:flex-start; flex-direction:column; } }