:root{ --webksibu-primary:#011c39; --webksibu-neon:#38bdf8; --webksibu-bg:#f8fafc; --webksibu-card:#ffffff; --webksibu-border:#e5e7eb; --webksibu-muted:#64748b; }
.webksibu-doc-wrap{ max-width:1200px; margin:15px auto; font-family:Inter,system-ui,-apple-system,sans-serif; }
.webksibu-doc-header{ background:linear-gradient(135deg,var(--webksibu-primary),#022b55); color:#fff; border-radius:14px; padding:18px 22px; margin-bottom:16px; }
.webksibu-doc-header h1{ margin:0; font-size:1.6rem; font-weight:800; color: #ffffff; }
.webksibu-doc-header p{ margin:4px 0 0; opacity:.85; font-size:.9rem; }
.webksibu-doc-layout{ display:grid; grid-template-columns:300px 1fr; gap:12px; }
.webksibu-doc-left{ background:linear-gradient(180deg,#ffffff,#f9fbff); }
.webksibu-doc-left,.webksibu-doc-right{ background:var(--webksibu-card); border:1px solid var(--webksibu-border); border-radius:14px; padding:10px; }
.webksibu-doc-left h2,.webksibu-doc-right h2{ margin:0 0 10px; font-size:1.1rem; font-weight:800; color:var(--webksibu-primary); }
.webksibu-sc-grid{ display:grid; grid-template-columns:1fr; gap:8px; }
.webksibu-sc-card{ border:1px solid var(--webksibu-border); border-radius:10px; padding:8px 10px; cursor:pointer; transition:.2s ease; }
.webksibu-sc-card:hover,.webksibu-sc-card.active{ border-color:var(--webksibu-neon); box-shadow:0 0 0 2px rgba(56,189,248,.25); }
.webksibu-sc-code{ font-family:ui-monospace,monospace; font-size:.85rem; font-weight:700; background:rgba(56,189,248,.12); padding:4px 8px; border-radius:6px; display:inline-block; }
.webksibu-sc-desc{ font-size:.8rem; color:var(--webksibu-muted); margin-top:4px; }
.webksibu-preview-frame{ width:100%; height:600px; border:1px solid var(--webksibu-border); border-radius:12px; background:#fff; }
.webksibu-preview-note{ font-size:.8rem; color:var(--webksibu-muted); margin-bottom:8px; }
.webksibu-toast{ position:fixed; bottom:18px; right:18px; background:var(--webksibu-primary); color:#fff; padding:8px 14px; border-radius:999px; font-size:.8rem; opacity:0; transform:translateY(8px); transition:.3s ease; z-index:9999; }
.webksibu-toast.show{opacity:1;transform:none;}
@media(max-width:980px){ .webksibu-doc-layout{grid-template-columns:1fr;} }
@media (min-width:1400px){ .webksibu-preview-frame{ height:680px; } }