/* Base & layout */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  line-height:1.7;
  font-size:var(--body);
  transition: background-color .25s ease, color .25s ease;
}
a{color:inherit;text-decoration:none}
a:hover{opacity:.75}

.wrap{max-width:920px;margin:0 auto;padding:48px 20px}

/* Header */
header{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}
.brand{display:flex;align-items:center;gap:10px}
.brand .logo{width:28px;height:28px;border:1px solid var(--fg);border-radius:8px;display:grid;place-items:center}
.brand .logo svg{width:18px;height:18px}
.brand h1{font-size:18px;margin:0;font-weight:700;letter-spacing:.2px}
nav{display:flex;gap:12px;align-items:center}
nav a{font-size:14px;padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:var(--bg)}
.iconbtn, .toggle{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 10px;border:1px solid var(--line);
  border-radius:10px;background:var(--bg);font-size:13px
}
.iconbtn svg,.toggle svg{width:14px;height:14px}

/* Hero */
.hero{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:28px;
  background:var(--card);
  box-shadow:var(--shadow);
}
.hero h2{margin:0 0 8px 0;font-size:var(--h2);letter-spacing:-.2px}
.hero p{margin:0;color:var(--muted)}

/* Grid */
.grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:22px}
@media(min-width:760px){.grid{grid-template-columns:1.1fr .9fr;gap:18px}}

/* Cards & lists */
.card{border:1px solid var(--line);border-radius:14px;background:var(--bg);box-shadow:var(--shadow)}
.list{padding:10px}
.item{display:flex;gap:12px;padding:14px;border-radius:12px}
.item+.item{border-top:1px dashed var(--line)}
.dot{width:10px;height:10px;border:1px solid var(--fg);border-radius:999px;margin-top:8px}
.meta{display:flex;gap:10px;color:var(--muted);font-size:13px}
.title{font-weight:600;margin:2px 0 6px 0}

/* Content wrapper (article area container) */
.content{padding:18px}

/* Search */
.search{position:relative}
.search input{
  width:100%;padding:12px 14px 12px 36px;
  border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--fg)
}
.search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted)}

/* Tables (light touch) */
.content table{border-collapse:collapse;width:100%}
.content th,.content td{border:1px solid var(--line);padding:8px;text-align:left}
.content th{background:#fafafa}
[data-theme="dark"] .content th{background:#0e1219}

/* Footer */
footer{margin-top:26px;color:var(--muted);font-size:13px;display:flex;justify-content:space-between;gap:12px}