:root{
  --bg:#0b0f14;
  --panel:#111820;
  --text:#e6edf3;
  --muted:#9fb0c3;
  --accent:#4cc2ff;
  --accent-2:#8b5cf6;
  --border:#22303c;
  --code:#0e1621;
  --table:#0d141c;
  --link:#7dd3fc;
  --shadow:0 10px 25px rgba(0,0,0,.35);
  --h1:#d2b48c; /* light brown */
  --h2:#7dd3fc; /* light blue */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Noto Sans',sans-serif}
.container{max-width:1100px;margin:0 auto;padding:24px}
.topbar{position:sticky;top:0;background:rgba(11,15,20,.85);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--border);z-index:50}
.topbar .inner{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:10px 16px;max-width:1120px;margin:0 auto}
.brand{display:flex;gap:12px;align-items:center}
.logo{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:var(--shadow)}
.brand h1{font-size:16px;margin:0;font-weight:700;letter-spacing:.3px;color:var(--text)}
.nav{display:flex;gap:8px;align-items:center}
select,button,.btn{background:var(--panel);color:var(--text);border:1px solid var(--border);padding:8px 12px;border-radius:10px;cursor:pointer}
select:focus,button:focus{outline:2px solid var(--accent)}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.3;margin:22px 0 10px}
h1{font-size:28px;color:var(--h1)}
h2{font-size:22px;color:var(--h2)}
h3{font-size:18px;color:var(--muted)}
p{margin:12px 0}
hr{border:none;border-top:1px solid var(--border);margin:24px 0}
.card{background:var(--panel);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:20px}
.table-wrap{overflow:auto;margin:14px 0;border:1px solid var(--border);border-radius:12px}
table{width:100%;border-collapse:collapse;background:var(--table)}
td,th{border-bottom:1px solid var(--border);padding:10px 12px;text-align:left;vertical-align:top}
th{background:rgba(76,194,255,.12);font-weight:700}
code,kbd,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace;background:var(--code);padding:.2em .4em;border-radius:6px;border:1px solid var(--border)}
.example-box {
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  border-left: 4px solid #6aa9ff;
  background-color: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
}

.example-box p {
  margin-top: 0;
  font-size: 0.9rem;
  opacity: 0.85;
}
.note {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-left: 4px solid #f0ad4e; /* subtle warning / info tone */
  background-color: rgba(240, 173, 78, 0.1);
  border-radius: 6px;
  font-size: 0.95rem;
}

.note strong {
  font-weight: 600;
}
ul.content-list {
  list-style-type: disc !important;
  list-style-position: inside;   /* ← THIS is the missing piece */
  padding-left: 1.25rem !important;
}

ul.content-list ul {
  list-style-type: circle !important;
  list-style-position: inside;
  padding-left: 1.5rem !important;
}


pre{background:var(--code);padding:14px;border-radius:12px;border:1px solid var(--border);overflow:auto}
.footer-nav{display:flex;justify-content:space-between;gap:12px;margin-top:28px}
.footer-nav a.btn{display:inline-block}
.btn{background:linear-gradient(180deg,rgba(20,28,38,.7),rgba(10,15,22,.7));border:1px solid var(--border);padding:10px 14px;border-radius:12px;box-shadow:var(--shadow)}
.btn:hover{transform:translateY(-1px)}
.back-to-top{position:fixed;bottom:22px;right:22px}
.small{color:var(--muted);font-size:13px}
.badge{display:inline-block;padding:4px 10px;border:1px solid var(--border);border-radius:999px;background:rgba(139,92,246,.15);color:#c7d2fe;font-size:12px;margin-left:8px}