*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.55;color:#0f172a;background:#f8fafc}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}

.container{max-width:1180px;margin:0 auto;padding:0 20px}

.site-header{position:sticky;top:0;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid #e2e8f0;z-index:10}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;gap:16px;flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;color:#0f172a;font-size:1.05rem}
.brand-mark{width:30px;height:30px;color:#2563eb}
.site-nav{display:flex;gap:18px;flex-wrap:wrap}
.site-nav a{text-decoration:none;color:#334155;font-size:.95rem}
.site-nav a:hover{color:#2563eb}

.intro{padding:40px 0 20px}
.intro h1{font-size:clamp(1.8rem,3.5vw,2.6rem);line-height:1.2;margin:0 0 12px;color:#0f172a}
.lede{font-size:1.1rem;color:#334155;max-width:720px;margin:0 0 16px}
.meta-row{display:flex;gap:8px;flex-wrap:wrap}
.pill{display:inline-block;background:#e0f2fe;color:#075985;border-radius:999px;padding:4px 12px;font-size:.8rem;font-weight:600}

.workspace{padding:30px 0}
.workspace-header{margin-bottom:20px}
.workspace-header h2{margin:0 0 6px;font-size:1.6rem}
.workspace-header p{margin:0;color:#475569;max-width:720px}

.workspace-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr);gap:24px}
@media(max-width:900px){.workspace-grid{grid-template-columns:1fr}}

.panel{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:22px;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.panel h3{margin:0 0 14px;font-size:1.2rem;color:#0f172a}

.field{display:block;margin-bottom:14px}
.field-label{display:block;font-size:.85rem;font-weight:600;margin-bottom:4px;color:#334155}
.field input,.field select,.field textarea{width:100%;padding:10px 12px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;font-size:.95rem}
.field textarea{resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid #2563eb;outline-offset:1px;border-color:#2563eb}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.field-row{grid-template-columns:1fr}}
.field.small{max-width:220px}

.tag-picker{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.tag{border:1px solid #cbd5e1;background:#fff;border-radius:999px;padding:5px 12px;font-size:.85rem;cursor:pointer;transition:all .15s ease}
.tag:hover{border-color:#2563eb}
.tag.active{background:#2563eb;color:#fff;border-color:#2563eb}
.custom-tag{display:flex;gap:6px}
.custom-tag input{flex:1}
.hint{font-size:.8rem;color:#64748b;margin:4px 0 0}

.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:8px;font-weight:600;font-size:.95rem;cursor:pointer;border:1px solid transparent;transition:background .15s ease,transform .1s ease}
.btn:active{transform:translateY(1px)}
.btn.primary{background:#2563eb;color:#fff}
.btn.primary:hover{background:#1d4ed8}
.btn.ghost{background:#fff;border-color:#cbd5e1;color:#0f172a}
.btn.ghost:hover{background:#f1f5f9}

.presets{margin-top:18px;border-top:1px solid #e2e8f0;padding-top:14px}
.presets h4{margin:0 0 8px;font-size:.9rem;color:#475569;text-transform:uppercase;letter-spacing:.04em}
.preset-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.preset{background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:10px 12px;text-align:left;cursor:pointer;transition:all .15s ease}
.preset strong{display:block;font-size:.9rem;color:#0f172a}
.preset span{display:block;font-size:.78rem;color:#64748b;margin-top:2px}
.preset:hover{border-color:#2563eb;background:#eff6ff}

.output-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.output-controls{display:flex;gap:10px;flex-wrap:wrap}

.book-output{border:1px solid #e2e8f0;border-radius:10px;padding:16px;background:#fafafa;max-height:520px;overflow:auto}
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#64748b;padding:30px 10px;gap:10px}
.empty-state svg{width:46px;height:46px;color:#94a3b8}
.empty-state.small{padding:16px}

.book-group{margin-bottom:18px}
.book-group h4{margin:0 0 8px;font-size:1rem;color:#0f172a;border-bottom:2px solid #e2e8f0;padding-bottom:4px}
.book-entry{position:relative;background:#fff;border:1px solid #e2e8f0;border-left:4px solid #2563eb;border-radius:8px;padding:12px 14px;margin-bottom:8px}
.book-entry p{margin:0 0 6px;font-size:.95rem;color:#0f172a}
.book-entry .entry-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.8rem;color:#475569}
.book-entry .entry-meta strong{color:#0f172a}
.book-entry .entry-tags{display:inline-flex;gap:4px;flex-wrap:wrap}
.book-entry .entry-tag{background:#e0f2fe;color:#075985;border-radius:999px;padding:2px 8px;font-size:.72rem;font-weight:600}
.book-entry .delete-entry{position:absolute;top:8px;right:8px;background:transparent;border:none;color:#94a3b8;cursor:pointer;font-size:1.1rem;line-height:1}
.book-entry .delete-entry:hover{color:#dc2626}

.output-actions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}

.library{padding:30px 0}
.library h2{margin:0 0 6px;font-size:1.5rem}
.library>p{margin:0 0 16px;color:#475569}
.library-list{display:grid;gap:10px;margin-bottom:12px}
.library-card{display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:14px 16px;gap:10px;flex-wrap:wrap}
.library-card .title{font-weight:600;color:#0f172a}
.library-card .meta{font-size:.85rem;color:#64748b}
.library-card .actions{display:flex;gap:6px}

.guide{padding:30px 0 60px}
.guide h2{margin:0 0 14px;font-size:1.5rem}
.guide-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-bottom:24px}
.card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:18px}
.card h3{margin:0 0 6px;font-size:1.05rem;color:#0f172a}
.card p{margin:0;color:#475569;font-size:.95rem}
.guide-text{color:#334155}
.guide-text h3{margin:20px 0 8px;font-size:1.15rem;color:#0f172a}
.guide-text ul{padding-left:18px;margin:0 0 12px}
.guide-text li{margin-bottom:6px;line-height:1.55}
.guide-text p{margin:0 0 12px;line-height:1.6}
.faq{margin-top:10px}
.faq dt{font-weight:700;color:#0f172a;margin-top:10px}
.faq dd{margin:2px 0 10px;color:#334155}

.site-footer{border-top:1px solid #e2e8f0;background:#fff;margin-top:40px}
.footer-inner{display:grid;grid-template-columns:1.3fr 1fr;gap:20px;padding:30px 20px;align-items:start}
.footer-inner strong{color:#0f172a}
.footer-inner p{margin:4px 0 0;color:#475569;font-size:.9rem}
.site-footer nav{display:flex;flex-wrap:wrap;gap:14px;justify-content:end}
.site-footer nav a{text-decoration:none;color:#334155;font-size:.9rem}
.site-footer nav a:hover{color:#2563eb}
.fine{grid-column:1/-1;color:#64748b;font-size:.8rem;margin-top:10px}
@media(max-width:720px){.footer-inner{grid-template-columns:1fr}.site-footer nav{justify-content:start}}

.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#0f172a;color:#fff;padding:10px 18px;border-radius:10px;font-size:.9rem;box-shadow:0 6px 20px rgba(0,0,0,.2);z-index:50;opacity:0;pointer-events:none;transition:opacity .2s ease}
.toast.show{opacity:1}



/* Factory-injected deployment helpers. The AI owns the site design above this block. */
.ad-unit {
  width: min(100%, 720px);
  min-height: 120px;
  margin: 24px auto;
  display: block;
}

.legal-page {
  width: min(900px, calc(100% - 32px));
  margin: 40px auto;
}

.factory-fallback-nav {
  width: min(900px, calc(100% - 32px));
  margin: 24px auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  font-size: 0.95rem;
}

.factory-fallback-nav a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}