:root{
  --bg:#fbf7ef;
  --card: rgba(255,255,255,.78);
  --text:#141414;
  --muted:#5a5a5a;
  --line: rgba(0,0,0,.12);
  --accent:#2f6feb;
  --danger:#d73a49;
  --ok:#1a7f37;
  --shadow: 0 10px 26px rgba(0,0,0,.08);
  --radius: 16px;
  --max: 920px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: system-ui, -apple-system, Segoe UI, Roboto, "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
}
a{color:inherit}
.wrap{max-width:var(--max); margin:0 auto; padding:18px 14px 70px}
.topbar{
  display:flex; justify-content:space-between; align-items:center;
  gap:12px; margin:6px 0 18px;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.brand img{width:28px;height:28px}
.brand b{font-size:16px}
.nav{display:flex; gap:8px; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  padding:10px 12px;
  border-radius: 14px;
  border:1px solid var(--line);
  text-decoration:none;
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(6px);
  cursor:pointer;
  user-select:none;
  touch-action: manipulation;
}
.btn:hover{filter:brightness(.98)}
.btn.primary{background: var(--accent); color:#fff; border-color:transparent}
.btn.danger{background: var(--danger); color:#fff; border-color:transparent}
.btn.ghost{background: transparent}
.btn.small{padding:7px 10px; border-radius: 12px; font-size:13px}
.card{
  background: var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:14px;
}
.h1{font-size:20px; margin:6px 0 10px}
.h2{font-size:16px; margin:14px 0 10px}
.muted{color:var(--muted)}
.small{font-size:13px}
.grid{display:grid; gap:12px}
.grid2{display:grid; gap:12px; grid-template-columns: 1fr}
@media(min-width:860px){ .grid2{grid-template-columns: 1fr 1fr} }
input,textarea,select{
  width:100%;
  font-family:inherit;
  font-size:16px;
  padding:11px 12px;
  border-radius: 14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.78);
  outline:none;
}
textarea{min-height:220px; resize:vertical}
hr{border:0;border-top:1px solid var(--line); margin:14px 0}
.kbd{font-family:var(--mono); font-size:12px; padding:2px 6px; border:1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.65)}
.badge{display:inline-block; font-size:12px; padding:2px 8px; border-radius: 999px; border:1px solid var(--line); background: rgba(255,255,255,.55)}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.row > *{flex: 1 1 auto}
.list{display:grid; gap:10px}
.item{
  display:flex; gap:10px; align-items:flex-start; justify-content:space-between;
  padding:12px; border-radius: 16px; border:1px solid var(--line);
  background: rgba(255,255,255,.65);
}
.item .left{min-width:0}
.item .title{font-weight:700; font-size:15px; line-height:1.35}
.item .meta{margin-top:4px}
.item .right{display:flex; gap:8px; align-items:center; flex-shrink:0}
footer{margin-top:22px; text-align:center; color:var(--muted); font-size:12px}
/* Reader themes */
.reader{
  --reader-bg: var(--bg);
  --reader-card: var(--card);
  --reader-text: var(--text);
  --reader-line: var(--line);
}
.reader[data-theme="paper"]{ --reader-bg:#fbf7ef; --reader-card:rgba(255,255,255,.78); --reader-text:#141414; }
.reader[data-theme="sakura"]{ --reader-bg:#fff4f6; --reader-card:rgba(255,255,255,.82); --reader-text:#1b1417; }
.reader[data-theme="mint"]{ --reader-bg:#effaf4; --reader-card:rgba(255,255,255,.82); --reader-text:#101a14; }
.reader[data-theme="sky"]{ --reader-bg:#eef6ff; --reader-card:rgba(255,255,255,.82); --reader-text:#10151a; }
.reader[data-theme="sunrise"]{ --reader-bg:#fff3e6; --reader-card:rgba(255,255,255,.82); --reader-text:#1a1410; }
.reader[data-theme="night"]{ --reader-bg:#14161a; --reader-card:rgba(30,33,40,.88); --reader-text:#e9eef5; --reader-line: rgba(255,255,255,.12); }
.reader body{background:var(--reader-bg)}
.reader .card,.reader .item,.reader input,.reader textarea,.reader select{background:var(--reader-card); color:var(--reader-text); border-color:var(--reader-line)}
.reader .muted{color: rgba(233,238,245,.75)}
.reader a{color: var(--reader-text)}