:root{
    --bg1:#001b10; --bg2:#004926; --card:#002413ee; --line:#0db35c77;
    --text:#eafff1; --muted:#a9d7bd; --green:#00d66f; --black:#020504;
}
*{box-sizing:border-box}
body{
    margin:0; font-family:Arial,Helvetica,sans-serif; color:var(--text);
    background:radial-gradient(circle at top,#0cff7a 0,#06743d 16%,#002615 45%,#000b07 100%);
    font-size:14px;
}
.wrap{max-width:1250px;margin:22px auto;padding:0 16px}
.hero,.bar,.card,.note{
    background:linear-gradient(135deg,#003a20d9,#001208f2);
    border:1px solid var(--line); border-radius:18px;
    box-shadow:0 0 28px #00ff7a18,inset 0 0 22px #00ff7a10;
}
.hero{padding:24px 26px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.hero h1{margin:0 0 8px;font-size:28px;letter-spacing:.5px}
.hero p{margin:0;color:var(--muted)}
.bar{margin:14px 0;padding:14px 16px}.ok{border-left:5px solid #00d66f}.err{border-left:5px solid #ff3355}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.card{padding:18px;margin-bottom:16px}.card h2{margin:0 0 16px;font-size:20px}.card h3{margin:18px 0 8px;color:#bfffd6}
.btn{
    display:inline-block;text-decoration:none;border:1px solid #16df7a66;
    background:linear-gradient(180deg,#00d66f,#008d4b);color:white;border-radius:9px;
    padding:11px 18px;font-weight:700;cursor:pointer;box-shadow:0 0 14px #00ff7a33
}
.btn.dark{background:#020504;border-color:#0db35c55}.btn.warn{background:linear-gradient(180deg,#ffc400,#c78100);color:#111}
.upload{display:grid;grid-template-columns:1fr 1fr;gap:16px}
input{width:100%;background:#020504;color:var(--text);border:1px solid #16df7a55;border-radius:8px;padding:10px}
.small{font-size:12px;color:var(--muted)}.tools{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.stage{
    position:relative;overflow:auto;max-height:760px;min-height:380px;
    background:#050806;border:1px solid #16df7a55;border-radius:10px;padding:10px;
}
.stage img{display:block;max-width:100%;height:auto;transform-origin:top left}
.empty{padding:60px;text-align:center;color:var(--muted)}
#cropBox{
    position:absolute;left:60px;top:60px;width:70%;height:70%;
    border:3px solid #1dff85;box-shadow:0 0 0 9999px #00000044;
    cursor:move;touch-action:none;
}
.handle{
    position:absolute;width:16px;height:16px;background:#dffff0;border:2px solid #1dff85
}
.nw{left:-9px;top:-9px}.ne{right:-9px;top:-9px}.sw{left:-9px;bottom:-9px}.se{right:-9px;bottom:-9px}
.saveCrop{margin-top:14px}.resultImg{max-width:100%;border-radius:10px;border:1px solid #16df7a55;background:#000;margin-bottom:14px}
.status{border-top:1px solid #0db35c55;margin-top:14px;padding-top:12px;line-height:1.7}
.note{padding:16px;margin-bottom:22px;color:#ddffe8}
@media(max-width:900px){.grid,.upload{grid-template-columns:1fr}.hero{display:block}.hero .btn{margin-top:12px}}

.engineForm{margin:18px 0}
.engineGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
.engineItem{border:1px solid #16df7a33;border-radius:10px;padding:8px;background:#00180d}
.engineItem img{width:100%;border-radius:8px;border:1px solid #16df7a33;background:#000}
@media(max-width:700px){.engineGrid{grid-template-columns:1fr}}

.lineGrid{display:grid;grid-template-columns:1fr;gap:8px;margin-top:10px}
.lineItem{border:1px solid #16df7a33;border-radius:10px;padding:8px;background:#00180d}
.lineItem img{width:100%;max-height:70px;object-fit:contain;border-radius:8px;border:1px solid #16df7a33;background:#fff}

.wordSummary{border:1px solid #16df7a33;border-radius:10px;padding:10px;background:#00180d;margin:10px 0;color:#bfffd6}
.wordLine{border:1px solid #16df7a33;border-radius:10px;padding:10px;background:#00180d;margin:10px 0}
.wordDebug{width:100%;max-height:90px;object-fit:contain;border-radius:8px;border:1px solid #16df7a33;background:#fff;margin:6px 0}
.wordGrid{display:flex;flex-wrap:wrap;gap:6px}
.wordItem{border:1px solid #16df7a33;border-radius:8px;padding:4px;background:#020504;display:flex;align-items:center;gap:4px}
.wordItem span{font-size:10px;color:#8dffbd}
.wordItem img{height:32px;max-width:180px;object-fit:contain;background:#fff;border-radius:4px}

.charLine{border:1px solid #16df7a33;border-radius:10px;padding:10px;background:#00180d;margin:10px 0}
.charWord{border-top:1px solid #16df7a22;margin-top:8px;padding-top:8px}
.charDebug{width:100%;max-height:70px;object-fit:contain;border-radius:8px;border:1px solid #16df7a33;background:#fff;margin:5px 0}
.charGrid{display:flex;flex-wrap:wrap;gap:5px}
.charItem{border:1px solid #16df7a33;border-radius:7px;padding:4px;background:#020504;display:flex;align-items:center;gap:4px}
.charItem span{font-size:10px;color:#8dffbd}
.charItem img{height:34px;max-width:60px;object-fit:contain;background:#fff;border-radius:4px}

.trainerForm{margin:14px 0}
.trainerGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:10px 0 14px}
.trainerItem{border:1px solid #16df7a33;border-radius:10px;padding:8px;background:#00180d}
.trainerItem img{height:42px;max-width:100%;object-fit:contain;background:#fff;border-radius:6px;display:block;margin:5px auto}
.trainerItem input{text-align:center;font-size:18px;font-weight:800;padding:6px}
@media(max-width:900px){.trainerGrid{grid-template-columns:repeat(2,1fr)}}

.ocrText{
    width:100%;
    min-height:220px;
    background:#020504;
    color:#eafff1;
    border:1px solid #16df7a55;
    border-radius:10px;
    padding:12px;
    font-family:Consolas,monospace;
    white-space:pre;
}

.layoutForm{display:grid;gap:8px;margin:12px 0;border:1px solid #16df7a33;border-radius:10px;padding:10px;background:#00180d}
.layoutForm input{margin-bottom:4px}

.recLines{border:1px solid #16df7a33;border-radius:10px;padding:10px;background:#00180d;margin:10px 0}
.recLine{border-bottom:1px solid #16df7a22;padding:8px 0}
.recLine:last-child{border-bottom:none}
.recWord{display:flex;flex-wrap:wrap;gap:5px;margin:5px 0 0 12px}
.recWord span{color:#bfffd6;font-weight:800;margin-right:8px}
.recWord em{font-style:normal;font-size:11px;border-radius:6px;padding:2px 5px;background:#052414;border:1px solid #16df7a33}
.recWord em.bad{background:#3a1010;border-color:#ff555566;color:#ffd0d0}
.recWord em.good{color:#dfffee}

.decisionChanges{border:1px solid #16df7a33;border-radius:10px;padding:10px;background:#00180d;margin:10px 0}
.decisionChanges div{border-bottom:1px solid #16df7a22;padding:6px 0}
.decisionChanges div:last-child{border-bottom:none}
.decisionChanges span{color:#8dffbd;margin-left:8px}

.debugToggle{margin-bottom:12px}
body.compact .engineGrid,
body.compact .lineGrid,
body.compact .wordLine,
body.compact .charLine,
body.compact .trainerForm,
body.compact .decisionChanges,
body.compact .recLines,
body.compact .debugBlockTitle{
    display:none !important;
}
body.compact .status{font-size:13px}
.saveCrop{display:flex;gap:10px;flex-wrap:wrap}

.bookForm{border:1px solid #16df7a33;border-radius:14px;padding:14px;background:#00180d;margin:12px 0}
.bookForm h4{margin:16px 0 8px;color:#bfffd6}
.formGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.formGrid label{font-size:12px;color:#bfffd6}.formGrid input{margin-top:4px}
@media(max-width:900px){.formGrid{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.formGrid{grid-template-columns:1fr}}

/* V19 Benutzer-/Debug-Modus */
body.compact .engineForm,
body.compact h3.debugBlockTitle,
body.compact .engineGrid,
body.compact .lineGrid,
body.compact .wordLine,
body.compact .charLine,
body.compact .trainerForm,
body.compact .decisionChanges,
body.compact .recLines,
body.compact .wordSummary,
body.compact .layoutForm,
body.compact .status:not(.keepStatus) {
    display:none !important;
}

/* Diese technischen Einzelbereiche im Benutzer-Modus ausblenden */
body.compact .resultImg + h3,
body.compact .resultImg,
body.compact .small,
body.compact .ocrText[readonly] {
    /* Rohtextfelder im Benutzer-Modus ausblenden, Buchungsnotiz bleibt im Formular sichtbar */
}

.modeHint{
    border:1px solid #16df7a55;
    background:linear-gradient(135deg,#002b18,#00170d);
    color:#dfffee;
    border-radius:12px;
    padding:10px 12px;
    margin:10px 0;
    font-size:13px;
}
body.compact .modeHint.debugOnly{display:none!important}
body:not(.compact) .modeHint.userOnly{display:none!important}

.bookDetails{
    border:1px solid #16df7a55;
    border-radius:14px;
    padding:10px;
    background:#00180d;
    margin:12px 0;
}
.bookDetails summary{
    cursor:pointer;
    list-style:none;
    background:linear-gradient(135deg,#05e080,#00a65a);
    color:#00180d;
    font-weight:900;
    padding:12px 14px;
    border-radius:10px;
    box-shadow:0 0 14px #00ff8866;
}
.bookDetails summary::-webkit-details-marker{display:none}
.bookDetails summary:before{content:"▶ ";font-weight:900}
.bookDetails[open] summary:before{content:"▼ "}
.bookDetails .bookForm{
    margin-top:12px;
}

/* V24 stabile Kontrollmaske */
.bookDetails{display:block}

/* V26 Eingabemaske neu */
.bookForm{
    border:1px solid #16df7a66;
    border-radius:16px;
    padding:16px;
    background:linear-gradient(135deg,#002b18,#001509);
    margin:14px 0;
}
.bookForm h3,.bookForm h4{color:#dfffee}
.formGrid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    margin-bottom:14px;
}
.formGrid label{
    color:#bfffd6;
    font-size:12px;
    font-weight:700;
}
.formGrid input{
    width:100%;
    margin-top:5px;
}
@media(max-width:900px){.formGrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.formGrid{grid-template-columns:1fr}}

/* V29: Kontrollmaske volle Breite */
.fullCard{
    margin-top:16px;
}
.fullCard .bookForm{
    max-width:none;
}
.fullCard .saveCrop{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
}
.fullCard .saveCrop .btn{
    width:100%;
    min-height:46px;
}
.fullCard .ocrText{
    min-height:170px;
}
@media(max-width:900px){
    .fullCard .saveCrop{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
    .fullCard .saveCrop{grid-template-columns:1fr}
}