/* Web2Reader — Paper design system */
:root {
  --bg:#f7f2e9; --surface:#fffdf8; --border:#e3d9c4;
  --text:#2b2118; --muted:#82705c; --faint:#a5947e;
  --accent:#b45309; --accent-soft:#e8862e; --dark:#2b2118;
  --green:#3c7a4e; --red:#b91c1c;
  --serif:Georgia,'Times New Roman','Iowan Old Style',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --r:14px;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--bg); color:var(--text); font-family:var(--sans); line-height:1.6; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4 { font-family:var(--serif); font-weight:600; line-height:1.2; }

/* Nav */
.nav { display:flex; justify-content:space-between; align-items:center; max-width:900px; margin:0 auto; padding:20px 32px; }
.logo { font-family:var(--serif); font-weight:700; font-size:19px; color:var(--text); text-decoration:none; }
.logo em { color:var(--accent); font-style:normal; }
.links { display:flex; gap:24px; font-size:13px; }
.links a { color:var(--muted); text-decoration:none; }
.links a:hover { color:var(--text); }

/* Buttons */
.btn { display:inline-block; background:var(--accent); color:#fffdf8; font-size:15px; font-weight:600; padding:14px 34px; border-radius:999px; text-decoration:none; border:none; cursor:pointer; box-shadow:0 2px 12px rgba(180,83,9,.25); font-family:var(--sans); }
.btn:hover { filter:brightness(1.1); }
.btn.ghost { background:transparent; color:var(--accent); padding:14px 22px; box-shadow:none; }
.btn.dark { background:var(--accent-soft); color:var(--dark); font-weight:700; }

/* Kicker */
.kicker { font-size:11px; letter-spacing:.22em; color:var(--accent); font-weight:700; text-transform:uppercase; }

/* Cards & steps */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:20px; }
.step h4, .feature h4 { font-family:var(--serif); font-size:16.5px; margin-bottom:5px; }
.step p, .feature p { font-size:13.5px; color:var(--muted); line-height:1.6; }
.num { font-family:var(--serif); font-size:34px; color:var(--accent-soft); line-height:1; margin-bottom:12px; }
.feature { border-top:2px solid var(--text); padding-top:16px; display:flex; gap:14px; align-items:flex-start; }
.feature svg { flex-shrink:0; margin-top:2px; }

/* Dark band */
.band { background:var(--dark); color:#f7f2e9; text-align:center; padding:56px 28px; background-image:radial-gradient(700px 260px at 50% 120%, rgba(216,120,45,.18), transparent 70%); }
.band h3 { font-size:27px; margin-bottom:8px; }
.band p { font-size:14.5px; opacity:.75; margin-bottom:26px; }

/* Footer */
.footer { text-align:center; font-size:12px; color:var(--faint); padding:24px; }
.footer a { color:var(--faint); text-decoration:none; margin:0 12px; }
.footer a:hover { color:var(--muted); }

/* Forms */
.label { display:block; font-size:12px; font-weight:600; color:#5c4e3c; margin-bottom:7px; }
.input { width:100%; background:var(--bg); border:1px solid var(--border); color:var(--text); padding:11px 14px; border-radius:9px; font-size:14px; font-family:var(--sans); }
.input:focus { outline:none; border-color:var(--accent); }

/* Dashboard utilities */
.value { background:var(--bg); border:1px solid var(--border); padding:8px 12px; border-radius:7px; font-family:ui-monospace,Menlo,monospace; font-size:12.5px; display:inline-block; }
.copy-btn { background:none; border:1px solid var(--border); color:var(--text); padding:5px 11px; border-radius:6px; font-size:11px; cursor:pointer; margin-left:8px; }
.copy-btn:hover { background:var(--border); }
.usage-bar { height:8px; background:#eee4cd; border-radius:4px; margin:12px 0 6px; overflow:hidden; }
.usage-fill { height:100%; background:var(--accent); border-radius:4px; transition:width .3s; }
.usage-fill.warning { background:#d97706; }
.usage-fill.danger { background:var(--red); }
.usage-text { font-size:12px; color:var(--muted); }

/* Badge (Pro) */
.badge { position:absolute; top:-11px; left:22px; background:var(--accent); color:#fffdf8; font-size:10px; font-weight:700; letter-spacing:.08em; padding:4px 14px; border-radius:999px; }

/* Admin */
.tbl { width:100%; border-collapse:collapse; font-size:.85rem; }
.tbl th, .tbl td { text-align:left; padding:8px 10px; border-bottom:1px solid #eee4cd; }
.tbl th { color:var(--muted); font-weight:600; }
.status-sent { color:var(--green); font-weight:600; }
.status-failed { color:var(--red); }

/* Responsive */
@media (max-width:640px) {
  .grid-3 { grid-template-columns:1fr; }
  .grid-2 { grid-template-columns:1fr; }
  .nav { padding:16px; flex-direction:column; gap:10px; }
}