/* ficklestudio26 · Printable Bookmark Maker */
:root { --ink:#1d1d22; --ink2:#5b5b66; --line:#e8e8ec; --bg:#fafafb; --accent:#3b5bdb; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.wrap { max-width:1100px; margin:0 auto; padding:0 16px; }
h1 { font-size:clamp(26px,4vw,38px); line-height:1.2; margin:28px 0 8px; letter-spacing:-.02em; }
.lead { color:var(--ink2); margin:0 0 20px; max-width:760px; }
.tool { display:grid; grid-template-columns:300px 1fr; gap:20px; align-items:start; }
@media (max-width:820px) { .tool { grid-template-columns:1fr; } }
.panel { background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px; position:sticky; top:12px; }
@media (max-width:820px) { .panel { position:static; } }
.panel label { display:block; font-size:13px; font-weight:600; margin:10px 0 4px; }
.panel input[type=text], .panel input[type=number], .panel textarea, .panel select { width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:8px; font:inherit; background:#fff; }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.chk { display:flex; gap:8px; align-items:center; font-weight:500 !important; margin:8px 0 !important; }
.actions { display:grid; gap:8px; margin-top:16px; }
.btn { padding:11px 14px; border-radius:10px; border:1px solid var(--line); background:#fff; font:600 15px system-ui,sans-serif; cursor:pointer; }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn:disabled { opacity:.55; cursor:default; }
.small { font-size:12.5px; color:var(--ink2); margin:6px 0 0; }
.preview-head { display:flex; justify-content:space-between; align-items:baseline; margin:0 0 8px; color:var(--ink2); font-size:14px; }

#sheets { display:grid; gap:18px; }
.bm-page { background:#fff; border:1px solid var(--line); border-radius:6px; box-shadow:0 1px 3px rgba(0,0,0,.06); aspect-ratio:var(--ratio,8.5 / 11); container-type:inline-size; overflow:hidden; color:#1d1d22; display:flex; flex-direction:column; }
#sheets .bm-page { padding:var(--pad,5.9cqw); }
.bm-page header { display:flex; justify-content:space-between; align-items:flex-end; gap:3cqw; padding-bottom:1.4cqw; margin-bottom:2cqw; border-bottom:.3cqw solid var(--accent); }
.bm-page h2 { margin:0; font-size:4.4cqw; line-height:1; color:var(--accent); }
.bm-page .nd { display:flex; align-items:flex-end; gap:1cqw; font-size:2cqw; color:#6b6b76; flex:1; justify-content:flex-end; }
.bm-page .nd i { display:block; border-bottom:1px solid #8b8b96; width:22cqw; height:1px; }
.bm-grid { flex:1; display:grid; grid-template-columns:repeat(var(--cols,3),max-content); gap:0 2.6cqw; justify-content:center; align-content:space-evenly; min-height:0; }
.bm { outline:1px dashed #9a9aa5; outline-offset:2px; line-height:0; }
.bm svg { display:block; width:calc((100cqw - 2 * var(--pad,0cqw)) * var(--bwf,.23)); height:auto; }
.cutnote { text-align:center; font-size:13px; color:#8b8b96; margin:6px 0 0; }

.seo { max-width:780px; margin:36px 0 12px; }
.seo h2 { font-size:22px; margin:28px 0 8px; }
.seo details { border:1px solid var(--line); border-radius:10px; padding:10px 14px; margin:8px 0; background:#fff; }
.seo summary { cursor:pointer; font-weight:600; }
.related a { margin-right:14px; }

#wait[hidden] { display:none; }
#wait { position:fixed; inset:0; background:rgba(15,15,25,.55); display:flex; align-items:center; justify-content:center; padding:16px; z-index:50; }
.wait__card { background:#fff; border-radius:16px; padding:22px; max-width:420px; width:100%; text-align:center; }
.wait__card h2 { margin:0 0 6px; font-size:20px; }
.wait__card p { margin:0 0 12px; color:var(--ink2); font-size:14px; }
.wait__count { font-size:34px; font-weight:800; margin:4px 0 10px; }
.wait__card .btn { width:100%; margin-top:8px; }
.wait__card .ad-slot.is-on { margin:12px auto; }

#print-root { display:none; }
@media print {
  body > *:not(#print-root):not(#page-style) { display:none !important; }
  #print-root { display:block; }
  html, body { background:#fff; }
  #print-root .bm-page { border:0; border-radius:0; box-shadow:none; aspect-ratio:auto; padding:0; page-break-after:always; break-after:page; overflow:hidden; }
  #print-root .bm-page:last-child { page-break-after:auto; break-after:auto; }
}

.panel textarea { font-family:ui-monospace,Menlo,monospace; resize:vertical; }