:root{
  --bg:#f1e8d6; --paper:#fffdf7; --paper-2:#faf4e6;
  --ink:#2b2620; --accent:#8a3b2e; --accent-dark:#6e2f25; --gold:#a9791f;
  --line:#ddd0b6; --line-soft:#e8ddc6; --danger:#9c2b22; --muted:#857a63;
  --serif:'Iowan Old Style','Palatino Linotype','Book Antiqua',Palatino,Georgia,'Times New Roman',serif;
}
*{box-sizing:border-box;}
body{margin:0;font-family:'Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
  background:
    radial-gradient(1200px 600px at 50% -200px, #f6efde 0%, rgba(246,239,222,0) 70%),
    var(--bg);
  color:var(--ink);}
h1,h2,h3,h4{font-family:var(--serif);color:#2a231c;font-weight:700;line-height:1.25;}

.app-shell{min-height:100vh;display:flex;flex-direction:column;}
.app-header{display:flex;align-items:center;gap:1rem;padding:.6rem 1.3rem;
  background:linear-gradient(#fffdf6,#f6eedd);
  border-bottom:2px solid var(--gold);box-shadow:0 1px 0 #fff inset, 0 2px 8px rgba(80,60,20,.07);}
.brand{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--serif);font-weight:700;
  font-size:1.3rem;text-decoration:none;color:#3a2c1d;letter-spacing:.01em;}
.brand-emblem{font-size:1.35rem;filter:saturate(.85);}
.tagline{color:var(--muted);font-size:.85rem;font-style:italic;}
.header-spacer{flex:1;}
.header-link{color:var(--accent);text-decoration:none;font-size:.9rem;}
.header-link:hover{text-decoration:underline;}
.header-user{color:var(--muted);font-size:.88rem;}
.app-main{flex:1;padding:1.4rem 1.2rem;max-width:1400px;width:100%;margin:0 auto;}
.app-footer{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.4rem 1.2rem;
  text-align:center;color:var(--muted);font-size:.8rem;padding:1rem;border-top:1px solid var(--line-soft);}
.footer-links{display:inline-flex;gap:1rem;}
.footer-links a{color:var(--muted);text-decoration:none;}
.footer-links a:hover{color:var(--accent);text-decoration:underline;}

/* Impressum / Datenschutz */
.legal{max-width:760px;line-height:1.6;}
.legal h1{margin-bottom:.3rem;}
.legal h2{margin:1.4rem 0 .3rem;font-size:1.15rem;color:var(--accent);}
.legal h3{margin:.9rem 0 .2rem;font-size:1rem;}
.legal p,.legal li{color:var(--ink);}
.legal ul{padding-left:1.3rem;}

h1{font-size:1.8rem;margin:.2rem 0 1rem;}
h2{font-size:1.25rem;margin:.1rem 0 .7rem;}

.card{background:var(--paper);border:1px solid var(--line);border-radius:12px;
  padding:1rem 1.2rem;margin-bottom:1.2rem;box-shadow:0 6px 18px rgba(90,65,25,.06);}
.card h2{margin-top:0;}

.btn{border:1px solid var(--line);background:linear-gradient(#fffdf7,#f4ecda);border-radius:8px;
  padding:.42rem .85rem;cursor:pointer;font-size:.9rem;text-decoration:none;color:#3a2f22;
  transition:background .12s,border-color .12s;}
.btn:hover{background:linear-gradient(#fff,#efe4cd);border-color:var(--gold);}
.btn.primary{background:linear-gradient(#9a4636,var(--accent));color:#fff8ef;border-color:var(--accent-dark);
  box-shadow:0 2px 6px rgba(120,45,30,.25);}
.btn.primary:hover{filter:brightness(1.06);background:linear-gradient(#9a4636,var(--accent));}
.btn.danger{color:var(--danger);}
.btn.small{padding:.25rem .6rem;font-size:.8rem;}
.btn.block{display:block;width:100%;text-align:center;margin-top:.4rem;}
.btn:disabled{opacity:.5;cursor:default;}

.txt,input,textarea{font:inherit;padding:.45rem .6rem;border:1px solid var(--line);
  border-radius:7px;background:var(--paper);width:100%;color:var(--ink);}
.txt:focus,input:focus,textarea:focus,select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(169,121,31,.15);}
select{font:inherit;padding:.45rem .6rem;border:1px solid var(--line);border-radius:7px;background:var(--paper);width:100%;color:var(--ink);}

/* home / welcome */
.hero{background:linear-gradient(#fffdf6,#f7efdd);border:1px solid var(--line);border-radius:14px;
  padding:1.6rem 1.8rem;margin-bottom:1.4rem;box-shadow:0 8px 24px rgba(90,65,25,.08);
  position:relative;overflow:hidden;}
.hero::before{content:"";position:absolute;inset:6px;border:1px solid var(--line-soft);border-radius:10px;pointer-events:none;}
.hero-emblem{font-size:2.4rem;}
.hero h1{font-size:2rem;margin:.3rem 0 .5rem;}
.hero-lead{font-size:1.05rem;max-width:60ch;line-height:1.6;color:#3b332a;}
.hero-steps{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:1rem 0 .6rem;}
.hero-step{display:inline-flex;align-items:center;gap:.4rem;background:var(--paper);border:1px solid var(--line);
  border-radius:999px;padding:.3rem .8rem;font-size:.9rem;}
.hero-step .hs-ico{font-size:1.05rem;}
.hero-arrow{color:var(--gold);font-weight:700;}
.hero-note{font-size:.9rem;color:var(--muted);max-width:64ch;border-left:3px solid var(--gold);padding-left:.7rem;margin-top:.6rem;}

.new-project-row{display:flex;gap:.6rem;max-width:560px;}

.muted{color:var(--muted);font-size:.85rem;}

/* ---- book overview cards ---- */
.count-badge{display:inline-block;vertical-align:middle;margin-left:.4rem;background:var(--gold);color:#fff;
  border-radius:999px;font-size:.78rem;font-weight:700;padding:.05rem .5rem;}
.book-grid{list-style:none;padding:0;margin:0;display:grid;gap:.9rem;
  grid-template-columns:repeat(auto-fill,minmax(330px,1fr));}
.book-card{display:flex;gap:.8rem;background:linear-gradient(#fffdf8,#f7efdd);
  border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:11px;
  padding:.8rem .9rem;box-shadow:0 1px 3px rgba(80,60,20,.06);transition:box-shadow .15s,transform .15s;}
.book-card:hover{box-shadow:0 5px 16px rgba(80,60,20,.12);transform:translateY(-1px);}
.bc-cover{flex:0 0 auto;align-self:flex-start;display:block;line-height:0;}
.bc-cover img{width:62px;height:90px;object-fit:cover;border-radius:5px;
  border:1px solid var(--line);box-shadow:0 2px 6px rgba(80,60,20,.18);}
.bc-body{flex:1;min-width:0;}
.bc-title{font-family:var(--serif);font-weight:700;font-size:1.18rem;text-decoration:none;color:var(--accent);
  display:block;line-height:1.25;}
.bc-title:hover{text-decoration:underline;}
.bc-subtitle{font-family:var(--serif);font-style:italic;color:var(--ink);font-size:.92rem;margin-top:.1rem;}
.bc-meta{display:flex;flex-wrap:wrap;gap:.3rem .9rem;margin-top:.5rem;font-size:.85rem;color:var(--ink);}
.bc-specs{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.55rem;}
.bc-chip{font-size:.74rem;color:#6c6552;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:.1rem .5rem;white-space:nowrap;}
.bc-stats{display:flex;flex-wrap:wrap;gap:.25rem .9rem;margin-top:.6rem;padding-top:.55rem;
  border-top:1px dashed var(--line-soft);font-size:.82rem;color:var(--muted);}
.bc-stats strong{color:var(--ink);font-weight:700;}
.bc-stats .bc-pages{color:var(--accent);font-weight:600;}
.bc-side{display:flex;flex-direction:column;align-items:stretch;gap:.4rem;flex:0 0 auto;
  text-align:center;justify-content:flex-start;}
.bc-modified{font-size:.74rem;line-height:1.3;}
.bc-side .btn{white-space:nowrap;}

/* numbered guided workflow (step bar in the editor) */
.guide{background:linear-gradient(#fffdf6,#f7efdd);border:1px solid var(--line);border-radius:12px;
  padding:.8rem 1rem;margin-bottom:.9rem;box-shadow:0 1px 4px rgba(80,60,20,.06);}
.guide-steps{display:flex;flex-wrap:wrap;gap:.3rem;list-style:none;padding:0;margin:0 0 .8rem;}
.guide-step{flex:1 1 auto;min-width:9rem;}
.guide-chip{width:100%;display:flex;align-items:center;gap:.45rem;background:#fff;border:1px solid var(--line);
  border-radius:9px;padding:.4rem .6rem;cursor:pointer;color:var(--ink);font:inherit;text-align:left;}
.guide-chip:hover:not(:disabled){border-color:var(--gold);}
.guide-chip:disabled{opacity:.5;cursor:not-allowed;}
.guide-num{display:inline-flex;align-items:center;justify-content:center;width:1.6rem;height:1.6rem;flex:0 0 auto;
  border-radius:50%;border:1px solid var(--line);font-weight:700;font-size:.85rem;background:#faf6ee;}
.guide-label{font-size:.82rem;line-height:1.15;}
.guide-step.current .guide-chip{border-color:var(--accent);box-shadow:0 0 0 2px rgba(138,59,46,.12);}
.guide-step.current .guide-num{background:var(--accent);color:#fff;border-color:var(--accent);}
.guide-step.done .guide-num{background:var(--gold);color:#fff;border-color:var(--gold);}
.guide-step.viewing .guide-chip{background:#fff7e6;}
.guide-panel{border-top:1px dashed var(--line-soft);padding-top:.7rem;}
/* Expertenansicht: alle Schritte gestapelt — jede Etappe als eigene Karte mit Luft dazwischen. */
.guide-expert .guide-panel{border:1px solid var(--line);border-radius:10px;background:var(--paper);
  padding:.9rem 1rem;margin-top:.8rem;}
.guide-expert .guide-panel:first-of-type{margin-top:0;}
.guide-panel h3{margin:0 0 .25rem;color:var(--accent);}
/* Honesty label on a step: 🔒 changes text · 💡 only suggests. */
.step-etikett{display:inline-block;vertical-align:middle;margin-left:.5rem;font-size:.7rem;font-weight:700;
  padding:.12rem .5rem;border-radius:20px;letter-spacing:.01em;white-space:nowrap;}
.step-etikett.lock{background:#fbf1da;color:#92400e;border:1px solid #e7c98b;}
.step-etikett.hint{background:#e6f0e6;color:#3f7a44;border:1px solid #b6d6bd;}
/* Subtitle in a modal title (⚙ – Darstellung / 🎚 – Inhalt & Sprache). */
.head-sub{font-size:.8rem;font-weight:400;color:var(--muted);}
.guide-intro{margin:.1rem 0 .7rem;color:var(--ink);max-width:70ch;}
.guide-actions{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;}
.btn.big{font-size:1rem;padding:.55rem 1rem;}
.guide-next{margin-left:auto;}

/* status / undo bar */
.status-bar{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem;padding:.55rem .8rem;
  background:#eef3ea;border:1px solid var(--line);border-radius:9px;font-size:.9rem;color:var(--ink);}
.status-bar .ghost{margin-left:auto;background:transparent;border-style:dashed;color:var(--muted);}

/* trash */
.trash-card{background:#fbf8f1;}
.trash-list{list-style:none;padding:0;margin:.4rem 0 0;}
.trash-list li{display:flex;align-items:center;gap:.8rem;padding:.55rem .2rem;border-bottom:1px solid var(--line-soft);}
.trash-list li:last-child{border-bottom:none;}
.tl-title{font-family:var(--serif);font-weight:700;color:var(--ink);flex:1;min-width:0;}
.tl-actions{display:flex;gap:.4rem;flex:0 0 auto;}

/* ---- new-book wizard ---- */
.wizard{max-width:760px;margin:0 auto;}
.wiz-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;}
.wiz-head h2{margin:0;}
.wiz-steps{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;list-style:none;padding:0;margin:1rem 0 1.4rem;
  border-bottom:1px solid var(--line-soft);padding-bottom:1rem;}
.wiz-steps li{display:flex;align-items:center;gap:.45rem;font-size:.88rem;color:var(--muted);}
.wiz-steps li.active{color:var(--accent);font-weight:700;}
.wiz-steps li.done{color:var(--ink);}
.wiz-num{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:50%;
  border:1px solid var(--line);background:#fff;font-size:.8rem;font-weight:700;}
.wiz-steps li.active .wiz-num{background:var(--accent);color:#fff;border-color:var(--accent);}
.wiz-steps li.done .wiz-num{background:var(--gold);color:#fff;border-color:var(--gold);}
.wiz-body{min-height:200px;}
.wiz-body h3{margin-top:0;}
.wiz-body .req{color:var(--danger);}
.wiz-error{display:block;margin-top:.3rem;color:var(--danger);font-weight:600;font-size:.82rem;}
.field-invalid{border-color:var(--danger) !important;box-shadow:0 0 0 2px rgba(156,43,34,.12);}
.wiz-cover{display:flex;gap:1.2rem;align-items:flex-start;flex-wrap:wrap;margin-top:.4rem;}
.wiz-cover-frame{flex:0 0 auto;width:150px;max-width:40vw;border:1px solid var(--line);border-radius:8px;
  background:var(--paper-2);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.wiz-cover-frame img{width:100%;height:100%;object-fit:cover;}
.wiz-cover-empty{color:var(--muted);font-size:.82rem;text-align:center;padding:.5rem;}
.wiz-cover-actions{flex:1;min-width:220px;display:flex;flex-direction:column;gap:.6rem;align-items:flex-start;}
.wiz-cover-ai{width:100%;display:flex;flex-direction:column;gap:.35rem;}
.wiz-cover-ai label{display:flex;flex-direction:column;gap:.2rem;font-size:.8rem;color:var(--muted);width:100%;}
.wiz-cover-ai input{width:100%;}
.wiz-import-info{margin-top:.7rem;padding:.5rem .7rem;background:#eef3ea;border:1px solid var(--line);
  border-radius:8px;font-size:.9rem;}
.wiz-summary{margin-top:1.2rem;background:#faf6ee;border:1px solid var(--line-soft);border-radius:9px;padding:.7rem .9rem;}
.wiz-summary h4{margin:0 0 .4rem;}
.wiz-summary ul{margin:0;padding-left:1.1rem;font-size:.9rem;color:var(--ink);}
.wiz-nav{display:flex;justify-content:space-between;gap:.6rem;margin-top:1.4rem;
  border-top:1px solid var(--line-soft);padding-top:1rem;}

/* editor onboarding (preparation steps after creating/importing a book) */
.onboard{background:linear-gradient(#fffdf6,#f7efdd);border:1px solid var(--gold);border-radius:11px;
  padding:.8rem 1rem;margin-bottom:.9rem;box-shadow:0 2px 10px rgba(80,60,20,.08);}
.onboard-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.4rem;}
.onboard-head strong{font-size:1.05rem;color:var(--accent);}
.onboard p{margin:.2rem 0 .6rem;color:var(--ink);}
.onboard-steps{display:flex;flex-wrap:wrap;gap:.6rem;}
.onboard-hint{font-size:.85rem;color:var(--muted);margin:.6rem 0 0 !important;}
.onboard .ghost{background:transparent;border-style:dashed;color:var(--muted);}

/* invitation codes (admin) */
.code-pill{font-family:ui-monospace,Consolas,monospace;font-size:1rem;letter-spacing:.04em;
  background:#fff;border:1px solid var(--line);border-radius:7px;padding:.18rem .5rem;color:var(--ink);}
.new-code{margin-top:.7rem;}
.code-list{list-style:none;padding:0;margin:.4rem 0 0;}
.code-list li{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;padding:.55rem .2rem;border-bottom:1px solid var(--line-soft);}
.code-list li:last-child{border-bottom:none;}
.code-when{font-size:.8rem;}
.code-status{font-size:.74rem;padding:.06rem .5rem;border-radius:999px;white-space:nowrap;}
.code-status.open{background:#fff7e0;color:#8a6a16;border:1px solid var(--gold);}
.code-status.redeemed{background:#dcebd7;color:#2f5b29;}
.code-status.expired{background:#eee;color:#777;}

/* prompt admin */
.prompt-item{padding:.7rem 0;border-bottom:1px solid var(--line-soft);}
.prompt-item:last-child{border-bottom:none;}
.prompt-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.2rem;}
.prompt-text{width:100%;font-family:ui-monospace,Consolas,monospace;font-size:.82rem;line-height:1.4;}
.prompt-actions{display:flex;gap:.5rem;margin-top:.4rem;}

.rerun-hint{margin:.5rem 0 0;font-size:.85rem;}

/* Datensicherung */
.backup-ok{color:#2e6b2e;font-weight:600;}
.backup-bad{color:var(--accent);font-weight:600;}
.backup-table{width:100%;border-collapse:collapse;margin:.5rem 0;font-size:.9rem;}
.backup-table th,.backup-table td{text-align:left;padding:.3rem .5rem;border-bottom:1px solid var(--line);}
.backup-table th{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);}
.backup-mail{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin:.4rem 0;}
.backup-mail input{flex:1;min-width:220px;}

/* Mein Konto */
.kv{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1.2rem;margin:.3rem 0 0;}
.kv dt{color:var(--muted);}
.kv dd{margin:0;font-weight:600;}
.kv-form{max-width:420px;margin-bottom:.6rem;}

/* Verwaltung (admin hub) */
.admin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;margin-top:1rem;}
.admin-tile{display:flex;flex-direction:column;gap:.3rem;padding:1.1rem 1.2rem;background:var(--paper);
  border:1px solid var(--line);border-radius:12px;text-decoration:none;color:var(--ink);
  box-shadow:0 1px 3px rgba(0,0,0,.05);transition:border-color .12s,box-shadow .12s,transform .08s;}
.admin-tile:hover{border-color:var(--accent);box-shadow:0 4px 14px rgba(0,0,0,.1);transform:translateY(-1px);}
.admin-tile-icon{font-size:1.7rem;}
.admin-tile-title{font-weight:700;font-size:1.05rem;color:var(--accent);}
.admin-tile-desc{font-size:.85rem;color:var(--muted);}

/* raw-reply debug dialog (local only) */
.debug-pre{max-height:60vh;overflow:auto;white-space:pre-wrap;word-break:break-word;
  font-size:.78rem;background:#1e1b16;color:#e8e2d2;border-radius:8px;padding:.7rem .8rem;margin:0;}

/* login */
.login-wrap{min-height:60vh;display:flex;align-items:center;justify-content:center;}
.login-card{background:var(--paper);border:1px solid var(--line);border-radius:14px;
  padding:1.8rem 2rem;width:min(380px,92vw);text-align:center;
  box-shadow:0 14px 40px rgba(90,65,25,.16);position:relative;}
.login-card::before{content:"";position:absolute;inset:7px;border:1px solid var(--line-soft);border-radius:10px;pointer-events:none;}
.login-emblem{font-size:2.6rem;}
.login-card h1{font-size:1.6rem;margin:.2rem 0 .3rem;}
.login-card .field{display:block;text-align:left;font-size:.85rem;color:var(--muted);margin:.7rem 0 0;}
.login-card .field input{margin-top:.2rem;}
.login-error{color:var(--danger);font-size:.85rem;margin:.6rem 0 0;}

/* user management */
.user-add{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;}
.user-add .txt{max-width:220px;}
.user-add .chk{display:flex;align-items:center;gap:.3rem;white-space:nowrap;}
.user-list{list-style:none;margin:0;padding:0;}
.user-list li{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;padding:.55rem .2rem;border-bottom:1px solid var(--line-soft);}
.user-list .u-name{font-weight:600;min-width:9rem;}
.user-list .txt{max-width:200px;}
.role-badge{display:inline-block;margin-left:.35rem;background:var(--gold);color:#fff;border-radius:999px;
  font-size:.68rem;padding:.04rem .45rem;vertical-align:middle;}

/* editor */
.editor-toolbar{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;flex-wrap:wrap;
  padding:.5rem .6rem;background:var(--paper-2);border:1px solid var(--line);border-radius:12px;}
.status{color:var(--gold);font-weight:600;}

/* Toasts — the single transient-message channel. Success/info self-dismiss; errors stay until closed. */
.toast-stack{position:fixed;top:14px;right:14px;z-index:1600;display:flex;flex-direction:column;gap:.5rem;
  max-width:min(420px,calc(100vw - 28px));pointer-events:none;}
.toast{pointer-events:auto;display:flex;align-items:flex-start;gap:.6rem;background:var(--paper);
  border:1px solid var(--line);border-left:4px solid var(--muted);border-radius:9px;
  padding:.6rem .7rem .6rem .85rem;box-shadow:0 6px 20px rgba(43,38,32,.16);font-size:.9rem;color:var(--ink);
  animation:toast-in .18s ease-out;}
.toast-success{border-left-color:#3f7a44;}
.toast-info{border-left-color:var(--gold);}
.toast-error{border-left-color:var(--danger);}
.toast-msg{flex:1;line-height:1.4;white-space:pre-line;}
.toast-x{flex:0 0 auto;border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:.85rem;
  line-height:1;padding:2px 5px;border-radius:5px;}
.toast-x:hover{background:var(--line-soft);color:var(--ink);}
@keyframes toast-in{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.toast{animation:none;}}
.status.warn{color:#92400e;font-weight:600;background:#fef3c7;border:1px solid #fcd34d;
  border-radius:7px;padding:.5rem .7rem;max-width:560px;}
.warn-btn{border-color:#fcd34d;background:#fef3c7;color:#92400e;font-weight:600;}
.notice-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem;}
.notice-list li{display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem;
  background:var(--paper-2);border:1px solid var(--line);border-radius:8px;}
.notice-icon{font-size:1.15rem;flex:none;}
.notice-text{flex:1;}
.notice-clickable{cursor:pointer;transition:border-color .12s,background .12s,transform .08s;}
.notice-clickable:hover{border-color:var(--accent);background:var(--paper);transform:translateX(2px);}
.notice-go{flex:none;color:var(--accent);font-weight:600;font-size:.85rem;white-space:nowrap;}
.scroll-top{position:fixed;right:1.1rem;bottom:1.1rem;z-index:900;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line);background:var(--paper);color:var(--accent);font-size:1.35rem;line-height:1;
  cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.18);opacity:0;visibility:hidden;
  transition:opacity .2s,visibility .2s,background .15s,color .15s;}
.scroll-top.show{opacity:1;visibility:visible;}
.scroll-top:hover{background:var(--accent);color:#fff;}

.mode-toggle{border-color:var(--accent);color:var(--accent);font-weight:600;}
.mode-toggle:hover{background:var(--accent);color:#fff;}
.book-title{font-family:var(--serif);font-weight:600;font-size:1.02rem;color:var(--ink);
  max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 .25rem;}

/* "⋯ Mehr" overflow menu — seldom-used header actions, kept one click away */
.more-wrap{position:relative;display:inline-block;}
.more-overlay{position:fixed;inset:0;z-index:40;background:transparent;}
.more-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:50;min-width:236px;
  background:var(--paper);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 8px 26px rgba(43,38,32,.18);padding:.35rem;display:flex;flex-direction:column;gap:.1rem;}
.more-item{display:block;width:100%;text-align:left;background:transparent;border:none;border-radius:7px;
  padding:.5rem .6rem;font-size:.92rem;color:var(--ink);cursor:pointer;text-decoration:none;position:relative;}
.more-item:hover{background:var(--paper-2);}
.more-item.disabled{opacity:.5;pointer-events:none;}
.more-sep{height:1px;background:var(--line-soft);margin:.25rem .2rem;}

.toolbar-right{margin-left:auto;display:flex;align-items:flex-start;gap:.5rem;}
.save-cluster{display:flex;flex-direction:column;align-items:center;gap:.15rem;}
.save-meta{display:flex;flex-direction:column;align-items:center;font-size:.7rem;line-height:1.3;
  min-height:1em;text-align:center;white-space:nowrap;}
.save-meta .unsaved{color:var(--accent);font-weight:700;}
.save-meta .saved{color:var(--muted);}

/* settings dialog tabs */
.meta-tabs{display:flex;gap:.25rem;flex-wrap:wrap;border-bottom:2px solid var(--line);margin-bottom:1rem;}
.meta-tab{appearance:none;background:transparent;border:none;border-bottom:3px solid transparent;
  margin-bottom:-2px;padding:.5rem .9rem;font-size:.92rem;font-weight:600;color:var(--muted);cursor:pointer;}
.meta-tab:hover{color:var(--ink);}
.meta-tab.active{color:var(--accent);border-bottom-color:var(--accent);}
/* The one tab whose settings shape the content (not just presentation) — Zone ①-Vorstufe. */
.meta-tab.content-tab{color:#92400e;}
.meta-tab.content-tab.active{color:#92400e;border-bottom-color:#d97706;}
.content-warn{background:#fef3c7;border:1px solid #fcd34d;color:#92400e;border-radius:8px;
  padding:.5rem .75rem;margin:0 0 .8rem;font-size:.9rem;line-height:1.45;}
.mscheck-head{font-weight:600;padding:.55rem .8rem;border-radius:8px;margin:.2rem 0 .7rem;line-height:1.45;}
.mscheck-head.ok{background:#e6f0e6;color:#3f7a44;border:1px solid #b6d6bd;}
.mscheck-head.warn{background:#fef3c7;color:#92400e;border:1px solid #fcd34d;}
.mscheck-list{margin:.3rem 0 .7rem;padding-left:1.2rem;max-height:40vh;overflow-y:auto;}
.mscheck-list li{margin:.4rem 0;line-height:1.5;color:var(--ink);}
/* Passage highlighting: the missing core stands out, the surrounding (still-present) context is greyed. */
.ms-missing{color:#b3261e;font-weight:600;}
.ms-context{color:#9a948b;}
.ol-how{margin:.7rem 0 0;border:1px solid var(--line);border-radius:8px;background:var(--paper);padding:.3rem .7rem;}
.ol-how summary{cursor:pointer;font-weight:600;color:var(--ink);padding:.3rem 0;}
.ol-how ol{margin:.5rem 0 .4rem 1.1rem;padding:0;}
.ol-how li{margin:.4rem 0;line-height:1.5;}
.ol-how>p{margin:.5rem 0 .3rem;font-size:.9rem;line-height:1.5;}

/* Cover */
.cover-edit{display:flex;gap:1.2rem;align-items:flex-start;flex-wrap:wrap;}
.cover-preview{max-width:210px;max-height:300px;border:1px solid var(--line);border-radius:6px;
  box-shadow:0 3px 12px rgba(0,0,0,.18);}
.cover-actions{display:flex;flex-direction:column;gap:.5rem;}
/* crop-to-format: a frame in the book's aspect ratio, image object-fit:cover shows the exact PDF result */
.cover-crop{margin-top:.6rem;padding:.6rem;border:1px solid var(--line);border-radius:8px;background:#faf6ec;}
.cover-crop-frame{width:100%;max-width:240px;border:2px solid var(--gold);border-radius:6px;
  overflow:hidden;background:#000;margin:.4rem 0;}
.cover-crop-frame img{width:100%;height:100%;object-fit:cover;display:block;}
.cover-prompt{width:100%;max-width:560px;display:block;margin:.3rem 0 .6rem;min-height:7rem;resize:vertical;}
.cover-src-row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:.2rem 0 .7rem;}
.cover-src-thumb{width:42px;height:60px;object-fit:cover;border-radius:4px;border:1px solid var(--line);}
/* Cover dialog: preview left, controls right — wide enough to avoid scrolling */
.cover-modal{max-width:880px;}
.modal-actions.cover-foot{justify-content:space-between;}
/* cover status/error: always visible above the footer buttons, keep line breaks from the hint */
.cover-msg{white-space:pre-line;margin:.2rem 1rem;padding:.5rem .7rem;border-radius:6px;
  background:#fdf6e6;border:1px solid #e6c98a;}
.cover-grid{display:flex;gap:1.4rem;align-items:flex-start;flex-wrap:wrap;}
.cover-grid-left{flex:0 0 270px;max-width:300px;}
.cover-grid-left .cover-edit{flex-direction:column;}
.cover-grid-left .cover-preview{max-width:100%;max-height:440px;}
.cover-grid-right{flex:1 1 340px;min-width:290px;}
.cover-grid-right .cover-layout{margin-top:0;}
.cover-layout{margin-top:1rem;max-width:560px;}
/* Names the source a preview is made of — a stand-in must never pass for a deliberate choice. */
.src-badge{display:inline-block;margin:0 0 .4rem;padding:.15rem .5rem;border-radius:999px;
  font-size:.78rem;font-weight:600;color:var(--muted);background:#f3f4f6;border:1px solid var(--line);}
.src-badge.own{color:#166534;background:#ecfdf5;border-color:#a7f3d0;}
/* The one decision above the tabs: what of the cover lands in the book PDF, plus the single-sheet downloads. */
.cover-usage{border:1px solid var(--line);border-radius:6px;padding:.7rem .9rem;margin-bottom:1rem;}
.cover-usage h4{margin:0 0 .4rem;}
/* A toggle group: plain buttons, the chosen one carries .primary — no styling of its own to get wrong. */
.choice-row{display:flex;flex-wrap:wrap;gap:.35rem;margin:.4rem 0 .3rem;}
/* The plain native colour field (see ColorPick) — sized like the other inputs in a .cl-row. */
.colorpick{width:3rem;height:1.7rem;padding:0;border:1px solid var(--line);border-radius:4px;cursor:pointer;}
.cover-sheets{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;justify-content:flex-start;
  margin-top:.7rem;padding-top:.6rem;border-top:1px solid var(--line);}
/* The one switch a panel turns on — set apart from the settings it governs. */
.big-chk{display:flex;align-items:center;gap:.5rem;margin:.2rem 0 .5rem;font-size:1rem;}
/* The unfolded wrapper: back cover | spine | front cover, in the proportions of the real sheet. */
.wrap-preview{display:flex;align-items:stretch;max-width:560px;border:1px solid var(--line);
  border-radius:4px;overflow:hidden;background:var(--line);}
.wrap-preview img{flex:1 1 0;min-width:0;object-fit:cover;display:block;}
.wrap-spine{flex:0 0 auto;align-self:stretch;display:flex;align-items:center;justify-content:center;overflow:hidden;}
/* Spine lettering, read BOTTOM TO TOP — upright when the book stands on a shelf and you read it from the
   right. vertical-rl turned 180° rather than sideways-lr, which only Firefox understands. */
.spine-text{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;line-height:1;
  max-height:92%;overflow:hidden;}
.cl-row{display:grid;grid-template-columns:8.5rem 1fr auto;align-items:center;gap:.6rem;margin:.35rem 0;font-size:.9rem;}
.cl-row input[type=range]{width:100%;}
.cl-num{width:4.4rem;}
.cl-row.chk-row{grid-template-columns:auto 1fr;}
/* Eine Wahl aus wenigen Möglichkeiten, wo sonst ein Regler stünde (Reihe & Band). */
.cl-choice{display:flex;flex-wrap:wrap;gap:.3rem;}

/* confirm dialog always above any other modal (two classes → beats .modal-overlay regardless of order) */
.modal-overlay.confirm-overlay{z-index:1500;}

/* "Frühere Fassungen" (snapshots) */
.versions-bar{display:flex;align-items:flex-start;gap:1rem;margin-bottom:.5rem;}
.versions-hint{flex:1;margin:0;font-size:.85rem;line-height:1.45;}
.versions-bar .btn{white-space:nowrap;flex:none;}
.versions-msg{display:inline-block;margin:.1rem 0 .7rem;padding:.45rem .9rem;border-radius:8px;
  font-weight:700;border:1px solid;}
.versions-msg.ok{background:#eaf6ea;border-color:#4a9a4a;color:#2e6b2e;}
.versions-msg.info{background:#fff3d6;border-color:var(--gold);color:#7a5a10;}
.versions-msg.flash{animation:versions-flash 1.3s ease;}
@keyframes versions-flash{
  0%{transform:scale(1.09);box-shadow:0 0 0 5px rgba(169,121,31,.4);}
  14%{transform:scale(1.09);}
  100%{transform:scale(1);box-shadow:0 0 0 0 rgba(169,121,31,0);}
}
.versions{display:flex;gap:1.1rem;align-items:stretch;}
.version-list{flex:1 1 56%;list-style:none;margin:0;padding:0;max-height:46vh;overflow:auto;
  display:flex;flex-direction:column;gap:.4rem;}
.version-item{display:flex;align-items:center;gap:.4rem;border:1px solid var(--line);border-radius:9px;
  background:#fff;transition:border-color .12s,box-shadow .12s;}
.version-item:hover{border-color:var(--gold);}
.version-item.sel{border-color:var(--accent);background:#faf4e6;box-shadow:0 1px 5px rgba(138,59,46,.13);}
.version-row{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:.18rem;
  background:transparent;border:none;text-align:left;cursor:pointer;padding:.55rem .7rem;border-radius:8px;}
.version-reason{font-weight:600;color:var(--ink);}
.version-meta{display:flex;gap:.8rem;font-size:.76rem;color:var(--muted);}
.restore-btn{margin-right:.5rem;white-space:nowrap;flex:none;}
.version-preview{flex:1 1 44%;max-height:46vh;overflow:auto;border:1px solid var(--line);border-radius:9px;
  background:var(--paper-2);padding:.7rem .9rem;}
.version-preview-head{font-size:.72rem;font-weight:700;color:var(--accent);text-transform:uppercase;
  letter-spacing:.06em;margin-bottom:.5rem;}
.version-outline{list-style:none;margin:0;padding:0;}
.version-outline li{padding:.14rem 0;line-height:1.4;}
.vo-chapter{font-weight:700;color:var(--ink);}
.vo-section{padding-left:1.1rem;color:var(--muted);}

.ai-group{display:inline-flex;align-items:center;gap:.4rem;padding:.28rem .55rem;
  border:1px solid var(--line);border-radius:10px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.05);}
.ai-group .ai-label{font-size:.74rem;font-weight:700;color:var(--accent);white-space:nowrap;}
.ai-group.prep{background:#f4f1ea;}
.ai-group.prep .ai-label{color:var(--muted);}
.ai-group .btn.small{background:var(--paper);}
.saved-badge{display:inline-block;margin-left:.35rem;background:var(--gold);color:#fff;border-radius:999px;
  font-size:.7rem;font-weight:700;padding:.02rem .42rem;line-height:1.4;vertical-align:middle;}

/* in-app dialog */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;
  justify-content:center;z-index:1000;}
.modal{background:#fff;border:1px solid var(--line);border-radius:12px;padding:1.2rem 1.4rem;
  max-width:480px;width:90%;box-shadow:0 24px 70px rgba(0,0,0,.3);}
.modal h3{margin:0 0 .6rem;}
.modal p{margin:0 0 1.1rem;white-space:pre-line;color:var(--ink);line-height:1.5;}
.modal-actions{display:flex;justify-content:flex-end;gap:.6rem;}

/* KI-Fortschritt */
.ai-overlay{position:fixed;inset:0;background:rgba(40,30,15,.45);display:flex;
  align-items:center;justify-content:center;z-index:1200;}
.ai-progress{background:var(--paper);border:1px solid var(--line);border-radius:14px;
  padding:1.6rem 2rem;width:min(360px,90vw);text-align:center;
  box-shadow:0 22px 64px rgba(80,60,20,.34);}
.ai-spinner{width:50px;height:50px;margin:0 auto 1rem;border-radius:50%;
  border:5px solid var(--line);border-top-color:var(--accent);animation:ai-spin .9s linear infinite;}
@keyframes ai-spin{to{transform:rotate(360deg);}}
.ai-progress-label{font-family:var(--serif);font-size:1.1rem;font-weight:700;color:var(--accent);}
.ai-bar{height:6px;margin:1rem 0 .5rem;background:var(--line);border-radius:99px;overflow:hidden;}
.ai-bar-fill{height:100%;width:40%;background:var(--accent);border-radius:99px;animation:ai-bar 1.2s ease-in-out infinite;}
@keyframes ai-bar{0%{margin-left:-42%;}100%{margin-left:100%;}}
.ai-progress-hint{font-size:.85rem;color:var(--muted);}
.modal-wide{max-width:700px;width:94%;}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.6rem;}
.modal-head h3{margin:0;}
.modal-body{max-height:68vh;overflow:auto;padding-right:.2rem;}
.modal-body h4{margin:1rem 0 .4rem;}

.credit{margin-left:auto;font-size:.82rem;color:var(--muted);white-space:nowrap;
  border:1px solid var(--line);border-radius:7px;padding:.2rem .5rem;background:#fff;}

.save-bar{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem;padding:.5rem .8rem;
  background:#fff7e0;border:1px solid var(--gold);border-radius:9px;}
.save-bar span{flex:1;font-size:.9rem;}
.review-resume{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem;padding:.5rem .8rem;
  background:#eef3ea;border:1px solid var(--line);border-radius:9px;}
.review-resume span{flex:1;font-size:.9rem;}
.back-btn{display:block;width:100%;text-align:center;font-size:1rem;font-weight:700;
  padding:.6rem;margin-bottom:.7rem;border:1px solid var(--gold);color:var(--accent);
  background:linear-gradient(#fffdf7,#f1e7d3);}
.back-btn:hover{background:linear-gradient(#fff,#ece0c8);border-color:var(--accent);}

.issue-panel{background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:.8rem 1rem;margin-bottom:1rem;}
input[type=checkbox]{width:auto;}
.issue-head{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem;flex-wrap:wrap;}
.issue-head .muted{flex:0 0 auto;}
.issue-head .chk{display:flex;align-items:center;gap:.3rem;font-size:.85rem;color:var(--muted);}
.head-sep{flex:1;}
.issue-chk{flex:0 0 auto;margin:0;}
.issue{cursor:pointer;}
.issue:hover{background:#f1ece1;}
.issue.focused{outline:2px solid var(--accent);outline-offset:1px;background:#fbf7ec;}
/* Non-breaking-space marker: a small CSS chip (renders in any font, unlike a special glyph). */
.ws-nbsp{display:inline-block;width:.4em;height:.72em;vertical-align:-.02em;margin:0 .04em;
  background:#dce7ff;border:1px solid #a7bfe6;border-radius:2px;}
.issue-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem;
  max-height:38vh;overflow-y:auto;}
.issue{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;padding:.4rem .55rem;
  border:1px solid var(--line);border-left:4px solid #6f86e0;border-radius:8px;background:#fbfaf6;}
.issue.spelling{border-left-color:var(--danger);}
.issue.grammar{border-left-color:var(--accent);}
.issue.punctuation{border-left-color:var(--gold);}
.issue-kind{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);min-width:7.5rem;}
.issue-where{font-size:.7rem;padding:.05rem .35rem;border-radius:.5rem;background:var(--chip,#eef1f5);color:var(--muted);white-space:nowrap;}
.issue-diff{font-size:.95rem;}
.issue-diff del{color:var(--danger);text-decoration:line-through;}
.issue-diff ins{color:#1f7a3d;text-decoration:none;}
.issue-diff .arrow{color:var(--muted);margin:0 .15rem;}
.issue-reason{font-size:.82rem;color:var(--muted);flex:1;min-width:8rem;}
.issue-actions{display:flex;gap:.35rem;margin-left:auto;}

.help-content h4{margin:1.2rem 0 .3rem;font-size:1.02rem;color:var(--accent);}
.help-content h4:first-child{margin-top:0;}
.help-content p{margin:.3rem 0 .6rem;line-height:1.55;white-space:normal;}
.help-content ul,.help-content ol{margin:.2rem 0 .7rem;padding-left:1.3rem;}
.help-content li{margin:.25rem 0;line-height:1.5;}
.help-content code{background:#f3f0e8;border-radius:4px;padding:0 .25em;font-size:.9em;}
.help-content ol.steps{padding-left:1.4rem;}
.help-content ol.steps>li{margin:.5rem 0;}
.help-note{background:#fff7e0;border:1px solid var(--gold);border-radius:8px;
  padding:.6rem .8rem;font-size:.9rem;margin-top:.8rem;}

/* FAQ (structured help) */
.faq-search{width:100%;padding:.55rem .7rem;border:1px solid var(--line);border-radius:9px;
  font-size:.95rem;margin-bottom:.6rem;background:var(--paper);}
.faq-cat{margin:1.1rem 0 .35rem;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);font-weight:700;}
.faq-cat:first-of-type{margin-top:.2rem;}
.faq-item{border:1px solid var(--line);border-radius:9px;margin:.4rem 0;background:var(--paper-2);overflow:hidden;}
.faq-item.open{background:var(--paper);}
.faq-q{display:flex;align-items:baseline;gap:.5rem;width:100%;text-align:left;background:transparent;
  border:none;cursor:pointer;padding:.6rem .75rem;font-size:.95rem;font-weight:600;color:var(--ink);line-height:1.35;}
.faq-q:hover{color:var(--accent);}
.faq-caret{color:var(--accent);font-size:.8rem;flex:0 0 auto;}
.faq-a{padding:0 .8rem .3rem 1.75rem;}
.faq-a p{margin:.2rem 0 .5rem;line-height:1.55;}
.faq-a ul,.faq-a ol{margin:.2rem 0 .5rem;padding-left:1.2rem;}
.faq-a li{margin:.2rem 0;line-height:1.5;}
@keyframes faqFlash{0%{box-shadow:0 0 0 3px var(--gold);}100%{box-shadow:0 0 0 0 transparent;}}
.faq-item.faq-flash{animation:faqFlash 1.4s ease-out;}
@media (prefers-reduced-motion:reduce){.faq-item.faq-flash{animation:none;}}

.meta-panel{background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:1rem;margin-bottom:1rem;}
.meta-panel h3{margin:0 0 .6rem;}
.meta-panel h4{margin:.8rem 0 .4rem;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem .7rem;}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;}
.grid2 label,.grid3 label,.grid4 label{display:flex;flex-direction:column;gap:.2rem;font-size:.8rem;color:var(--muted);}
.grid2 .wide{grid-column:1 / -1;}

/* Metadaten-Dialog: Steuerung links, Doppelseiten-Vorschau rechts */
.modal-meta{max-width:960px;width:96%;align-self:flex-start;margin-top:5vh;
  height:min(82vh,780px);display:flex;flex-direction:column;}
.modal-meta .modal-body{flex:1;max-height:none;min-height:0;}
/* Settings left (scroll with the body), the double-page preview right and sticky so it is always visible. */
.meta-format{display:flex;flex-direction:row;gap:1.4rem;align-items:flex-start;}
.meta-controls{flex:1 1 auto;min-width:0;}
/* Short explanation under a settings control. */
.field-help{display:block;margin-top:.28rem;font-size:.74rem;line-height:1.35;color:var(--muted);font-weight:400;}

/* ⓘ help icon + click-popover, replacing the per-field "Wand aus Erklärungen" in the settings. */
.infotip{position:relative;display:inline-block;margin-left:.3rem;vertical-align:middle;font-weight:400;}
.infotip-btn{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;padding:0;
  border:1.4px solid var(--muted);border-radius:50%;background:transparent;color:var(--muted);cursor:pointer;
  transition:border-color .12s,color .12s,background .12s;}
.infotip-i{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:700;font-size:.66rem;
  line-height:1;transform:translateY(.2px);}
.infotip-btn:hover,.infotip-btn.open{border-color:var(--accent);background:var(--accent);color:#fff;}
/* Keep the ⓘ on the label's line (grid labels stack their children as flex-column). The icon sits at the
   right of the label row; the control spans the full width below. chk-row labels are already flex-row. */
.grid2 label:has(> .infotip):not(.chk-row),.grid3 label:has(> .infotip):not(.chk-row){display:grid;
  grid-template-columns:1fr auto;align-items:center;gap:.2rem .35rem;}
.grid2 label:has(> .infotip):not(.chk-row) > select,.grid2 label:has(> .infotip):not(.chk-row) > input,
.grid3 label:has(> .infotip):not(.chk-row) > select,.grid3 label:has(> .infotip):not(.chk-row) > input{grid-column:1 / -1;}
.infotip-pop{position:absolute;top:calc(100% + 5px);left:0;z-index:70;width:max-content;max-width:300px;
  background:var(--paper);border:1px solid var(--line);border-radius:8px;box-shadow:0 6px 20px rgba(43,38,32,.18);
  padding:.5rem .65rem;font-size:.78rem;font-weight:400;line-height:1.45;color:var(--ink);white-space:normal;
  text-transform:none;letter-spacing:normal;}
.infotip-more{display:block;margin-top:.45rem;background:transparent;border:none;padding:0;cursor:pointer;
  color:var(--accent);font-weight:700;font-size:.76rem;text-align:left;}
.infotip-more:hover{text-decoration:underline;}
/* Grouped, labelled block of related settings inside a meta tab (e.g. "Kapitelanfang"). */
.meta-group{border:1px solid var(--line);border-radius:6px;padding:.55rem .7rem .65rem;margin-top:.9rem;
  display:flex;flex-direction:column;gap:.5rem;}
.meta-group-title{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);}
.meta-group .chk-row{display:flex;}
/* "Quellen prüfen" result: what was checked + outcome, shown even when all clean. */
.src-summary{margin-top:.6rem;border:1px solid var(--line);border-radius:8px;padding:.55rem .7rem;background:var(--paper-2);}
.src-summary.ok{border-color:#bcd8b6;}
.src-summary-head{font-weight:600;font-size:.9rem;}
.src-checks{list-style:none;margin:.2rem 0 0;padding:0;display:flex;flex-direction:column;gap:.22rem;font-size:.85rem;}
.src-ok{color:#2e7d32;} .src-warn{color:var(--danger);font-weight:600;} .src-skip{color:var(--muted);}
.meta-preview-col{flex:0 0 460px;max-width:460px;position:sticky;top:0;align-self:flex-start;
  display:flex;flex-direction:column;align-items:center;gap:.4rem;}
@media (max-width:900px){
  .meta-format{flex-direction:column;}
  .meta-preview-col{flex-basis:auto;max-width:100%;width:100%;position:static;}
}
.mp-caption{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);}
.mp-dim{font-size:.72rem;color:var(--muted);}
.mp-zoom{display:flex;align-items:center;gap:.5rem;width:min(100%,300px);}
.mp-zoom input[type=range]{flex:1;width:auto;min-width:0;}
.mp-stage{width:100%;max-width:100%;height:440px;overflow:auto;background:#efe9da;
  border:1px solid var(--line);border-radius:8px;padding:12px;box-sizing:border-box;}
.mp-spread{display:flex;width:fit-content;margin:0 auto;box-shadow:0 5px 16px rgba(80,60,20,.25);}
.mp-page{background:#fffdf8;box-sizing:border-box;overflow:hidden;color:#241f18;display:flex;flex-direction:column;}
.mp-head{flex:0 0 auto;font-style:italic;color:#6b6152;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-bottom:.5em;}
.mp-foot{flex:0 0 auto;color:#6b6152;padding-top:.5em;}
.mp-verso{border-right:1px solid #cdbfa0;box-shadow:inset -7px 0 9px -7px rgba(0,0,0,.28);}
.mp-recto{box-shadow:inset 7px 0 9px -7px rgba(0,0,0,.28);}
.mp-body{flex:1 1 auto;min-height:0;overflow:hidden;}
.mp-chapter{font-weight:700;font-size:1.5em;margin:0 0 .6em;line-height:1.15;}
.chead-klein .mp-chapter{font-size:1.25em;} .chead-gross .mp-chapter{font-size:1.85em;}
/* Chapter title centered on its own page (the flow preview can only hint the horizontal centering). */
.chap-centered .pv-chapter{text-align:center;}
.mp-body p{margin:0 0 .55em;text-align:justify;line-height:inherit;hyphens:auto;text-indent:0;}
.mp-body.para-indent p{margin:0;text-indent:1.2em;}
.mp-body.para-indent p:first-child,.mp-body.para-indent .mp-chapter + p{text-indent:0;}

/* Gliederung | Dokument | (Prüfung oder Bilder) */
.editor-split{display:grid;grid-template-columns:230px minmax(0,1fr);gap:1.2rem;align-items:start;}
.editor-split.with-side{grid-template-columns:230px minmax(0,1fr) minmax(320px,26rem);}
@media(max-width:1100px){.editor-split,.editor-split.with-side{grid-template-columns:1fr;}}

/* ---------- Gliederung ---------- */
.outline-nav{position:sticky;top:1rem;align-self:start;background:#fff;border:1px solid var(--line);
  border-radius:10px;padding:.7rem .55rem;max-height:82vh;overflow:auto;}
.outline-head{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;
  font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 .3rem .5rem;}
.outline-empty{padding:.3rem .4rem;font-size:.84rem;line-height:1.4;}
.outline-list{list-style:none;margin:0;padding:0;}
.outline-item{display:flex;align-items:center;gap:.15rem;border-radius:7px;}
.outline-item:hover{background:#f0ece2;}
.outline-item.here{background:#fdf6e3;box-shadow:inset 3px 0 0 var(--accent);}
.outline-jump{flex:1;min-width:0;text-align:left;border:none;background:none;cursor:pointer;
  padding:.28rem .4rem;font:inherit;font-size:.88rem;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.outline-item.lvl0>.outline-jump{font-family:var(--serif);font-weight:700;}
.outline-item.lvl1>.outline-jump{font-weight:600;}
.outline-item.lvl2>.outline-jump{padding-left:1.1rem;font-size:.84rem;color:#4a463d;}
.outline-item.lvl3>.outline-jump{padding-left:1.9rem;font-size:.8rem;color:#5d574a;}
.outline-actions{display:flex;gap:.1rem;flex:0 0 auto;visibility:hidden;}
.outline-item:hover .outline-actions,.outline-item:focus-within .outline-actions{visibility:visible;}

/* ---------- Werkzeugleiste ---------- */
.doc-pane{display:flex;flex-direction:column;gap:.7rem;min-width:0;}
.doc-toolbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:.4rem .6rem;}
.kind-select{padding:.3rem .45rem;border:1px solid var(--line);border-radius:7px;font-size:.86rem;
  background:var(--paper);color:var(--ink);width:auto;}
.tb-btn{min-width:1.9rem;height:1.8rem;padding:0 .4rem;border:1px solid transparent;border-radius:6px;
  background:transparent;cursor:pointer;font-size:.86rem;line-height:1;color:var(--ink);}
.tb-btn:hover{border-color:var(--line);background:var(--paper-2);}
.tb-btn.on{border-color:var(--gold);background:#fdf6e3;color:var(--accent);}
.tb-btn:disabled{opacity:.35;cursor:default;}
.tb-btn sup{font-size:.6em;}
.tb-sep{width:1px;height:1.3rem;background:var(--line);margin:0 .25rem;}
.tb-spacer{flex:1;}
.doc-find{display:flex;align-items:center;gap:.35rem;}
.doc-find .txt{width:12rem;padding:.28rem .5rem;font-size:.84rem;}
.find-hits{font-size:.76rem;color:var(--muted);white-space:nowrap;}

/* ---------- Das Dokument ---------- */
/* Der Text sieht schon beim Schreiben aus wie ein Buch: Serifen, Buchbreite, echte
   Überschriften-Hierarchie. Das ersetzt die frühere Kachelliste samt Live-Vorschau. */
.doc-flow{background:var(--paper);border:1px solid var(--line);border-radius:10px;
  padding:2.4rem clamp(1rem,5vw,3.4rem);min-height:70vh;
  font-family:var(--serif);font-size:1.06rem;line-height:1.65;color:var(--ink);
  hyphens:auto;overflow-wrap:anywhere;}
.doc-flow:focus{outline:none;}

/* Wo der Setzer die Seite wirklich umbricht. Liegt ÜBER dem Text, nie darin: eine Marke im
   contenteditable käme als Textänderung zurück und landete im Undo-Stack des Browsers.
   pointer-events:none, damit die Linie nie zwischen Cursor und Wort gerät. */
.pb-layer{position:absolute;inset:0;pointer-events:none;z-index:2;}
/* left kommt aus dem JS: die Linie BEGINNT am Umbruch und läuft nach rechts. Quer über die Spalte wäre sie
   eine Lüge — der Editor bricht Zeilen anders um als der Setzer, und alles rechts vom Beginn steht im Buch
   schon auf der nächsten Seite. Der senkrechte Anstrich links markiert die Stelle selbst. */
/* Keine Seitenzahl: die Linie sagt „ab hier nächste Seite", und das ist die Aussage, die zutrifft.
   Der senkrechte Anstrich links markiert die Stelle selbst. */
.pb-line{position:absolute;right:0;border-top:1px dashed var(--gold);opacity:.8;}
.pb-line::before{content:"";position:absolute;left:0;top:-.5rem;height:.5rem;
  border-left:2px solid var(--gold);}
@media(prefers-reduced-motion:reduce){.pb-line{transition:none;}}

/* Dezenter Marker für manuelle Zeilenumbrüche (Shift+Enter / aus Word mitgekommen). Über den Text gezeichnet,
   nie hinein: ein Zeichen im contenteditable käme als Bearbeitung zurück und läge im Undo-Stack. left/top aus
   dem JS, an der Stelle, wo der <br> die Zeile bricht. */
.br-layer{position:absolute;inset:0;pointer-events:none;z-index:2;}
.br-mark{position:absolute;color:var(--muted);opacity:.4;font-size:.8em;line-height:1;transform:translate(1px,-1px);}

/* „Seiten werden berechnet" — ein Zustand, keine Meldung, darum kein Toast (das hier erscheint nach jeder
   Schreibpause). Unten rechts, weil die Toasts oben rechts fixiert sind. Leise: es soll beruhigen, nicht rufen. */
.pb-busy{position:fixed;right:14px;bottom:14px;z-index:1500;display:flex;align-items:center;gap:.45rem;
  background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:.3rem .75rem;
  font-family:var(--sans);font-size:.72rem;color:var(--muted);
  box-shadow:0 2px 8px rgba(90,65,25,.10);pointer-events:none;}
.pb-busy-dot{width:.48rem;height:.48rem;border-radius:50%;background:var(--gold);flex:0 0 auto;
  animation:pb-pulse 1.1s ease-in-out infinite;}
@keyframes pb-pulse{0%,100%{opacity:.25;}50%{opacity:1;}}
@media(prefers-reduced-motion:reduce){.pb-busy-dot{animation:none;opacity:.85;}}
.pb-busy-warn{border-color:var(--gold);color:var(--ink);}
/* Das Zeilenmaß in rem, nicht em: em rechnet gegen die EIGENE Schriftgröße, eine Überschrift bekäme also
   eine breitere Spalte als der Fließtext und stünde links daneben. rem hängt an der Wurzel — damit haben
   Überschrift, Absatz, Zitat und Bild dieselbe Kante. */
.doc-flow>.blk{max-width:36rem;margin-inline:auto;}
/* Der senkrechte Rhythmus wird ausschließlich über margin-block gesetzt. Die Kurzform `margin:` würde die
   linken/rechten Ränder auf 0 zurücksetzen und damit das margin-inline:auto oben erschlagen — dann steht die
   Überschrift über die volle Breite und der Absatz zentriert daneben. */
.blk{margin-block:0 .75em;}
.blk.para{text-align:justify;}
.blk.part{font-size:1.9em;font-weight:800;text-align:center;margin-block:2.2em 1.2em;}
.blk.chapter{font-size:1.55em;font-weight:700;margin-block:1.8em .7em;}
.blk.section{font-size:1.2em;font-weight:700;margin-block:1.3em .5em;}
.blk.subsection{font-size:1.05em;font-weight:700;margin-block:1.1em .4em;}
.doc-flow>.blk.part:first-child,.doc-flow>.blk.chapter:first-child{margin-block-start:0;}
/* Zitat: NICHT kursiv und nicht grau. Das war der Editor lange, das PDF nie, und wer im Editor Kursives
   sieht, erwartet es auch gedruckt. Die Einrückung folgt der Buch-Einstellung „Zitate eingerückt setzen"
   (Klasse .quotes-plain am Container), damit hier steht, was dort herauskommt.
   Die Kante links bleibt in beiden Fällen — sie ist eine Lesehilfe des Editors, keine Satzanweisung: Sie
   zeigt, dass dieser Absatz ein Zitat IST und darum von der Grammatikprüfung ausgenommen wird, auch wenn
   das Buch ihn unauffällig setzt. Heller als die Kante der Quellenangabe (--line), damit die beiden
   Absatzarten auf einen Blick auseinanderzuhalten sind. */
.blk.quote{margin-block:.9em;padding-inline:2em;border-left:2px solid var(--line-soft);}
.doc-flow.quotes-plain .blk.quote{padding-inline:.7em 0;}
.blk.src{font-size:.88em;color:var(--muted);border-left:2px solid var(--line);padding-left:.7em;}
/* Fußnote: kleiner Chip an der Belegstelle. Anklicken öffnet den Notentext zum Bearbeiten. */
.doc-flow sup.fn{position:relative;vertical-align:super;font-size:.62em;font-weight:700;color:var(--accent);
  background:#f6efe0;border-radius:3px;padding:0 .28em;margin:0 .05em;cursor:pointer;user-select:none;}
.doc-flow sup.fn:hover{background:var(--gold);color:#fff;}
/* Der Notentext beim Überfahren — der Sinn eines Fußnotenzeichens ist, die Quelle zu sehen, ohne sie erst
   aufklappen zu müssen. Eigener Tooltip statt title=, weil der native erst nach einer Sekunde erscheint.
   Alle Schrift-Angaben absolut (rem), sonst erbte er die .62em des Chips. */
.doc-flow sup.fn::after{
  content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + .5em);transform:translateX(-50%);
  z-index:80;width:max-content;max-width:22rem;white-space:normal;text-align:left;
  font-family:'Segoe UI',system-ui,sans-serif;font-size:.78rem;font-weight:400;font-style:normal;
  line-height:1.4;vertical-align:baseline;letter-spacing:0;
  background:var(--ink);color:#fff;border-radius:7px;padding:.4rem .6rem;
  box-shadow:0 6px 20px rgba(0,0,0,.22);
  opacity:0;visibility:hidden;transition:opacity .12s ease;pointer-events:none;}
.doc-flow sup.fn:hover::after{opacity:1;visibility:visible;}
@media(prefers-reduced-motion:reduce){.doc-flow sup.fn::after{transition:none;}}
/* Fußnotenzeichen versetzen: mit der Maus (oder dem Finger) greifen und ziehen. touch-action:none lässt die
   Geste auf dem Tablet ziehen statt scrollen; ein kurzer Tipp bleibt ein Klick und öffnet den Notentext.
   Beim Ziehen blasst das Zeichen ab; ein senkrechter Strich zeigt die künftige Belegstelle. Der Strich liegt
   fix im Fenster (Koordinaten aus getBoundingClientRect) und fängt keine Klicks. */
.doc-flow sup.fn{cursor:grab;touch-action:none;}
.doc-flow sup.fn.fn-dragging{opacity:.35;cursor:grabbing;}
.fn-drop-caret{position:fixed;width:2px;background:var(--accent);border-radius:1px;z-index:90;
  pointer-events:none;box-shadow:0 0 0 1px rgba(255,255,255,.65);}
/* Bildkarte im Fluss — anklicken öffnet das Bildfeld rechts. Löschen geht nur dort. */
.doc-flow .fig{max-width:36rem;margin:1.1em auto;padding:.5rem;border:1px solid var(--line-soft);
  border-radius:9px;background:#fff;text-align:center;cursor:pointer;}
.doc-flow .fig:hover{border-color:var(--gold);}
.doc-flow .fig img{max-width:100%;max-height:280px;border-radius:5px;}
.doc-flow .fig-cap{display:block;margin-top:.35rem;font-size:.78rem;font-style:italic;color:var(--muted);}
.blk-flash{animation:blkFlash 1.4s ease;}
@keyframes blkFlash{0%{box-shadow:0 0 0 2px var(--accent);}100%{box-shadow:0 0 0 0 transparent;}}
/* Suche und Prüf-Markierung färben Bereiche, ohne den DOM anzufassen — sonst litte das Rückgängig. */
::highlight(buch-find){background:#ffe8a3;color:var(--ink);}
::highlight(buch-focus){background:#ffd24d;color:var(--ink);}
/* Geschütztes Leerzeichen im Buch: eine dezent graue Marke auf dem Zeichen selbst, damit der Autor sieht,
   wo ein Leerzeichen nicht umbricht. Gefärbt, nicht in den Text geschrieben — das Rückgängig bleibt heil. */
::highlight(buch-nbsp){background:#e2dccb;}

/* ---------- Seitenpanel (Bilder) ---------- */
.doc-side{position:sticky;top:1rem;align-self:start;background:#fff;border:1px solid var(--line);
  border-radius:10px;padding:.7rem;max-height:82vh;overflow:auto;display:flex;flex-direction:column;gap:.55rem;}
.doc-side-head{display:flex;justify-content:space-between;align-items:center;gap:.5rem;font-weight:600;}
.doc-side-hint{margin:0;font-size:.8rem;font-style:italic;}

/* ---------- Fußnoten-Fenster ---------- */
.fn-overlay{position:fixed;inset:0;z-index:60;}
.fn-pop{position:fixed;z-index:70;width:min(26rem,90vw);background:#fff;border:1px solid var(--line);
  border-radius:10px;box-shadow:0 10px 34px rgba(0,0,0,.16);padding:.7rem;
  display:flex;flex-direction:column;gap:.5rem;}
.fn-pop-head{display:flex;justify-content:space-between;align-items:center;gap:.5rem;font-weight:600;}
.fn-text{width:100%;font-size:.9rem;line-height:1.45;resize:vertical;}
.fn-hint{margin:0;font-size:.78rem;line-height:1.35;color:var(--muted);}

/* review mode: change list as the left column next to the preview */
.review-pane{position:sticky;top:1rem;align-self:start;margin-bottom:0;}
.review-pane .issue-list{max-height:76vh;}


/* redundant author-typed directory warning (structure step) */
/* Import-Aufräumen-Checkliste (Schritt 2) */
.cleanup{margin:.4rem 0 .9rem;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;}
.cleanup-head{padding:.5rem .8rem;background:#faf7f0;border-bottom:1px solid var(--line);font-size:.84rem;color:var(--muted);}
.step-done{color:#3f7a44;font-weight:600;margin:.4rem 0;}
.clitem{border-top:1px solid var(--line);}
.clitem:first-of-type{border-top:none;}
.clitem-head{cursor:pointer;display:flex;align-items:center;gap:.6rem;padding:.55rem .8rem;font-size:.92rem;}
.clitem-head::before{content:"▸";color:var(--muted);font-size:.8rem;flex:0 0 auto;transition:transform .12s;}
.clitem:not(.clitem-done) .clitem-head::before,.clitem-head.open::before{}
.clitem-head:hover{background:#faf8f3;}
.clitem-done .clitem-head{opacity:.85;}
.cl-t{flex:1;font-weight:600;}
.cl-s{flex:0 0 auto;font-size:.72rem;font-weight:700;padding:.1rem .5rem;border-radius:20px;white-space:nowrap;}
.cl-s.warn{background:#fbeed3;color:#8a6d1f;}
.cl-s.cfg{background:#eef1f5;color:#516079;}
.cl-s.done{background:#e3efe2;color:#3f7a44;}
.guide-gate{margin-left:.6rem;font-size:.82rem;color:#8a6d1f;font-weight:600;}
.cl-b{padding:.2rem .8rem .8rem 1.9rem;border-top:1px solid var(--line-soft,#eee);}
.cl-line{padding:.2rem 0;font-size:.9rem;}
.cl-actions{display:flex;gap:.4rem;justify-content:flex-end;align-items:center;margin-top:.5rem;}
/* Outline review: show the real text (before → after) and what each button does, in plain language. */
.ol-q{margin:.1rem 0 .5rem;font-weight:600;}
.ol-preview{display:flex;flex-direction:column;gap:.35rem;}
.ol-snip{display:flex;gap:.55rem;align-items:baseline;padding:.4rem .6rem;border-radius:8px;
  background:#f6f6f4;border:1px solid var(--line-soft,#eee);}
.ol-snip-label{flex:0 0 auto;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  color:#8a8a80;padding-top:.05rem;}
.ol-snip-text{min-width:0;font-size:.9rem;line-height:1.4;}
.ol-arrow{font-size:.8rem;font-weight:600;color:#6b7a52;padding-left:.2rem;}
.ol-snip-after{background:#eef5ea;border-color:#cfe3c4;}
.ol-rec{margin-right:auto;font-size:.78rem;color:#7a7a70;font-style:italic;}
.ol-hints{margin:.6rem 0 0;padding-left:1.1rem;font-size:.84rem;color:#555;line-height:1.5;}
.ol-hints li{margin:.15rem 0;}
.dir-warn{margin:.6rem 0;padding:.6rem .8rem;border:1px solid #e6c98a;background:#fdf6e6;border-radius:8px;}
.dir-warn-head{margin:0 0 .2rem;font-weight:700;color:#8a6d3b;}
.dir-conflict{margin:.6rem 0;padding:.6rem .8rem;border:1px solid #e6c98a;background:#fdf6e6;border-radius:8px;font-size:.9rem;}
.dir-conflict-head{margin:0 0 .2rem;font-weight:700;color:#8a6d3b;}
.dir-conflict p{margin:0 0 .45rem;}
.dir-warn-item{display:flex;justify-content:space-between;align-items:center;gap:.6rem;
  padding:.4rem 0;border-top:1px solid #eadfc4;flex-wrap:wrap;}
.dir-warn-txt{min-width:0;}
.dir-warn-btns{display:flex;gap:.4rem;flex:0 0 auto;}
.dir-warn-btns .btn.danger{background:#c0392b;color:#fff;border-color:#a93226;}

/* attached images on a block */
.bimg{display:flex;gap:.6rem;align-items:flex-start;background:#faf4e6;
  border:1px solid var(--line-soft);border-radius:8px;padding:.45rem;}
.bimg-left{display:flex;flex-direction:column;align-items:center;gap:.25rem;flex:0 0 auto;}
.bimg-thumb{width:72px;height:72px;object-fit:cover;border-radius:6px;border:1px solid var(--line);flex:0 0 auto;}
.bimg-move{display:flex;align-items:center;gap:.15rem;}
.bimg-pos{font-size:.68rem;color:var(--muted);min-width:2.1em;text-align:center;}
/* The file input is stretched over the label, the way .img-drop does it — the label is the button. */
.bimg-swap{position:relative;overflow:hidden;font-size:.68rem;white-space:nowrap;cursor:pointer;}
.bimg-swap input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;}
.bimg-fields{flex:1;display:flex;flex-direction:column;gap:.4rem;min-width:0;}
.bimg-field{display:flex;flex-direction:column;gap:.15rem;min-width:0;}
.bimg-field-label{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);}
.bimg-field-inline{flex:0 0 auto;}
.bimg-opts{display:flex;align-items:flex-end;gap:.6rem;flex-wrap:wrap;}
.bimg-opts select{width:auto;}
.bimg-w{display:flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--muted);white-space:nowrap;}
.bimg-w input[type=range]{width:90px;}
.bimg-dpi{font-size:.74rem;padding:.06rem .4rem;border-radius:999px;white-space:nowrap;}
.bimg-dpi.optimal{background:#dcebd7;color:#2f5b29;}
.bimg-dpi.okay{background:#e8efd3;color:#5c6b1e;}
.bimg-dpi.mittel{background:#fbf0d3;color:#8a6a16;}
.bimg-dpi.unbrauchbar{background:#f7dcd9;color:#9c2b22;}
.meta-subhead{margin:1.1rem 0 .4rem;font-size:.95rem;font-weight:700;}
.img-overview{margin:.5rem 0;border:1px solid var(--line);border-radius:9px;padding:.2rem .6rem;background:#fff;}
.img-overview>summary{cursor:pointer;padding:.35rem 0;font-size:.9rem;font-weight:600;}
.img-badge{font-size:.72rem;padding:.05rem .4rem;border-radius:999px;background:#eef4fb;color:#2c5a86;white-space:nowrap;}
.isrc-actions-top{display:flex;gap:.4rem;margin:.3rem 0 .5rem;}
.isrc-item{display:flex;align-items:center;gap:.6rem;padding:.4rem 0;border-top:1px solid #eadfc4;flex-wrap:wrap;}
.isrc-thumb{width:52px;height:52px;object-fit:cover;border-radius:5px;border:1px solid var(--line);flex:0 0 auto;}
.isrc-txt{display:flex;flex-direction:column;min-width:0;flex:1;gap:.1rem;}
.isrc-cap{font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.isrc-src{font-size:.8rem;color:var(--muted);}
.isrc-warn-item{background:#fef3c7;border-radius:6px;padding-left:.4rem;padding-right:.4rem;}
.isrc-mismatch{font-size:.78rem;color:#92400e;white-space:normal;line-height:1.35;}
.isrc-picker{flex-basis:100%;margin:.3rem 0 .1rem;padding:.5rem .6rem;border:1px solid var(--line);border-radius:8px;background:var(--paper);}
.isrc-picker-grid{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.4rem;}
.isrc-pick{display:flex;flex-direction:column;align-items:center;gap:.2rem;width:100px;padding:.3rem;border:1px solid var(--line);
  border-radius:7px;background:transparent;cursor:pointer;font-size:.72rem;text-align:center;color:var(--ink);}
.isrc-pick:hover{border-color:var(--accent);}
.isrc-pick.sel{border-color:var(--accent);background:#fdf6e3;}
.isrc-pick img{width:84px;height:60px;object-fit:cover;border-radius:4px;border:1px solid var(--line);}
.isrc-pick span{display:block;line-height:1.2;max-height:3.6em;overflow:hidden;}
.imgrole-head{display:flex;justify-content:space-between;align-items:center;gap:.6rem;margin-bottom:.4rem;flex-wrap:wrap;}
.imgrole-bulk{display:flex;gap:.35rem;}
.imgrole-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem;max-height:340px;overflow-y:auto;}
.imgrole-item{display:flex;align-items:center;gap:.6rem;padding:.3rem;border:1px solid var(--line);border-radius:8px;}
.imgrole-thumb{width:48px;height:48px;object-fit:cover;border-radius:5px;border:1px solid var(--line);flex:0 0 auto;}
.imgrole-txt{display:flex;flex-direction:column;min-width:0;flex:1;}
.imgrole-where{font-size:.72rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.imgrole-cap{font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.imgrole-sel{flex:0 0 auto;}
.imgrole-sel.is-fill{background:#eef4fb;}
.img-drop{position:relative;display:flex;align-items:center;justify-content:center;gap:.5rem;
  border:2px dashed var(--line);border-radius:9px;padding:.6rem;color:var(--muted);
  font-size:.85rem;cursor:pointer;background:#fffdf7;}
.img-drop:hover{border-color:var(--gold);background:#fff;color:var(--ink);}
.img-drop input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;}

.chk-row{flex-direction:row !important;align-items:center;gap:.45rem;color:var(--ink) !important;}
.chk-row input[type=checkbox]{width:auto;}



.log{margin-top:1rem;background:#fff;border:1px solid var(--line);border-radius:10px;padding:.6rem;}
.log pre{max-height:300px;overflow:auto;font-size:.75rem;white-space:pre-wrap;}