/* Make the native hidden attribute always hide elements */
[hidden] { display: none !important; }

.container { max-width: 1000px; margin: 0 auto; padding: 16px; }
.grid { display: grid; gap: 16px; }
.grid-1 { grid-template-columns: 1fr; }
.full { grid-column: 1 / -1; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 16px; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.btn { padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--accent); color: #fff; font-weight: 600; cursor: pointer; }
.btn.secondary { background: transparent; color: var(--fg); }
.row { display:grid; grid-template-columns: 1fr auto; gap: 10px; }
@media (max-width:520px){ .row{ grid-template-columns:1fr; } }
ul.list { margin: 8px 0 0; padding-left: 18px; }
ul.list li { margin: 6px 0; word-break: break-word; }
.section-head { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.toggle { width: 36px; height: 32px; border-radius: 8px; border: 1px solid var(--border); background: var(--card); color: var(--fg); cursor: pointer; }
.badge { display:inline-block; margin-left:8px; padding:2px 8px; border-radius:999px; background: rgba(59,130,246,.15); color: var(--accent); font-size: 12px; font-weight: 700; }
.error { display:none; padding: 12px 14px; border-radius: 12px; border: 1px solid #ef4444; background: rgba(239,68,68,.1); color: #b91c1c; }
.error.full { grid-column: 1 / -1; }
.controls { display:flex; align-items:center; gap:10px; }
.copy { position: relative; }
.tooltip { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(100% + 6px); background: var(--fg); color: var(--bg); font-size: 12px; padding: 4px 8px; border-radius: 8px; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.copy.copied .tooltip { opacity: 1; }

.summary { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.summary a { text-decoration:none; border:1px solid var(--border); border-radius:999px; padding:6px 10px; background: var(--card); color: var(--fg); }
.summary a .num { display:inline-block; min-width:24px; text-align:center; border-radius:8px; padding:2px 6px; margin-left:6px; background: rgba(59,130,246,.15); color: var(--accent); font-weight:700; font-size:12px; }
.summary .spacer { flex:1 1 auto; }

.switch { display:inline-flex; align-items:center; gap:8px; cursor:pointer; user-select:none; }
.switch input { position: absolute; opacity: 0; pointer-events:none; }
.slider { width: 44px; height: 24px; background: var(--border); border-radius: 999px; position: relative; transition: background .2s; }
.slider::after { content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; background: var(--card); border:1px solid var(--border); border-radius:999px; transition:left .2s, background .2s; }
.switch input:checked + .slider { background: var(--accent); }
.switch input:checked + .slider::after { left: 23px; }

.share-links { display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
.share-links a { text-decoration:none; border:1px solid var(--border); border-radius:999px; padding:6px 10px; background: var(--card); color: var(--fg); font-weight:600; }

:root { --bg:#f6f7fb; --fg:#222; --card:#fff; --muted:#666; --accent:#3b82f6; --border:#e6e8ef; }
@media (prefers-color-scheme: dark){
  :root { --bg:#0b0d12; --fg:#e6e9f2; --card:#12151c; --muted:#a0a6b8; --accent:#60a5fa; --border:#202432; }
}
:root[data-theme="light"]{ --bg:#f6f7fb; --fg:#222; --card:#fff; --muted:#666; --accent:#3b82f6; --border:#e6e8ef; }
:root[data-theme="dark"] { --bg:#0b0d12; --fg:#e6e9f2; --card:#12151c; --muted:#a0a6b8; --accent:#60a5fa; --border:#202432; }
body { margin:0; background: var(--bg); color: var(--fg); font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; padding: 24px 0 60px; }
header { display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; margin-bottom:16px; }
@media (min-width:700px){ header { flex-direction:row; justify-content:space-between; text-align:left; } }
a { color: inherit; }

/* CSS-driven "Hide empty sections" */
body.hide-empty [data-section][data-empty="1"] {
  display: none !important;
}