/* Base */
:root{--card:#ffffff;--ink:#0f172a;--muted:#64748b;--primary:#111827;}
*{box-sizing:border-box}
html,body{height:100%}
body{line-height:1.7}

/* Utilities */
.container{max-width:80rem}
.card{background:var(--card);border:1px solid #e2e8f0;border-radius:12px;padding:1.25rem;margin-top:1rem}
.h2{font-size:1.5rem;font-weight:700;margin-bottom:.5rem}
.h3{font-size:1.25rem;font-weight:700;margin-bottom:.5rem}
.h4{font-size:1.1rem;font-weight:600;margin:.5rem 0}
.tip{color:var(--muted);font-size:.95rem;margin-top:.5rem}

/* Buttons */
.btn{background:var(--primary);color:#fff;padding:.55rem .9rem;border-radius:.6rem;border:1px solid rgba(0,0,0,.06);cursor:pointer}
.btn:hover{filter:brightness(1.05)}
.btn-ghost{background:#fff;color:var(--primary)}
.btn .fa-print{margin-left:.35rem}

/* Table */
.table{width:100%;border-collapse:separate;border-spacing:0 4px}
.table th,.table td{background:#f8fafc;padding:.55rem .7rem;border:1px solid #e2e8f0;white-space:nowrap}
.table th{background:#eef2ff;font-weight:700}

/* Code */
.code-block{margin:.75rem 0}
.code-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.25rem}
.copy{background:#0ea5e9;color:#fff;border:none;border-radius:.5rem;padding:.35rem .6rem;cursor:pointer}
.code{background:#0b1020;color:#e2e8f0;border-radius:10px;padding:10px;overflow:auto}

/* Print */
@media print{
  .print\:hidden{display:none !important}
  header .btn, .copy, .btn-ghost, #printBtn{display:none !important}
  header{background:#fff !important;color:#000 !important}
  .card{break-inside:avoid}
}