:root {
    --navy: #092d64;
    --navy-deep: #061d42;
    --gold: #d9a310;
    --gold-soft: #f1d98f;
    --ink: #163767;
    --paper: #fffefb;
    --canvas: #e9edf1;
    --panel: #f8f6f0;
    --line: #dce2e8;
    --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --serif: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
    margin: 0;
    color: #17253a;
    background: var(--canvas);
    font-family: var(--sans);
}

button, input { font: inherit; }
button { cursor: pointer; }
select { font: inherit; }

.app-header {
    position: sticky;
    z-index: 20;
    top: 0;
    min-height: 78px;
    padding: 14px clamp(18px, 3vw, 44px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    color: #fff;
    background: var(--navy-deep);
    box-shadow: 0 4px 22px rgb(4 19 43 / 22%);
}

.app-header h1 { margin: 2px 0 0; font: 600 21px/1.2 var(--serif); letter-spacing: .02em; }
.eyebrow { color: #e7c558; font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.header-actions { display: flex; align-items: center; gap: 9px; }
.save-status { margin-right: 8px; color: #b9c6da; font-size: 12px; }
.save-status[data-status="pending"] { color: #f1d06c; }
.save-status[data-status="error"] { color: #ffaaa1; }
.save-status[data-status="saved"] { color: #a9dfc0; }
.logout-form { margin: 0; }

.button {
    border: 1px solid rgb(255 255 255 / 25%);
    border-radius: 7px;
    padding: 9px 14px;
    color: #fff;
    background: transparent;
    font-weight: 700;
    font-size: 12px;
}
.button:hover { background: rgb(255 255 255 / 9%); }
.button-gold { border-color: var(--gold); color: #102952; background: #edc54e; }
.button-gold:hover { background: #f6d36b; }

.workspace { display: grid; grid-template-columns: 330px minmax(0, 1fr); min-height: calc(100vh - 78px); }
.editor-panel { position: sticky; top: 78px; height: calc(100vh - 78px); overflow: auto; padding: 25px 22px 50px; background: var(--panel); border-right: 1px solid #d6d9dc; }
.panel-section { display: flex; gap: 13px; padding: 0 0 22px; margin-bottom: 22px; border-bottom: 1px solid #dedbd1; }
.panel-stack { display: block; }
.panel-section h2 { margin: 0 0 6px; color: var(--navy); font-size: 14px; }
.panel-section p { margin: 0; color: #6d737c; font-size: 12px; line-height: 1.55; }
.step-number { flex: 0 0 auto; color: var(--gold); font: 700 11px/1.4 var(--serif); letter-spacing: .08em; }
.section-heading, .section-heading > div { display: flex; align-items: center; gap: 10px; }
.section-heading { justify-content: space-between; margin-bottom: 9px; }
.section-heading h2 { margin: 0; }

.field-label { display: block; margin: 10px 0 5px; color: #555f6b; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.panel-input { width: 100%; min-height: 38px; border: 1px solid #cbd1d8; border-radius: 6px; padding: 8px 9px; color: var(--navy); background: #fff; font-size: 12px; }
.panel-input:focus { border-color: var(--gold); outline: 2px solid rgb(217 163 16 / 18%); }
.template-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 11px; }
.template-actions button { min-height: 36px; border-radius: 6px; padding: 7px; font-size: 11px; font-weight: 750; }
.panel-primary { grid-column: 1 / -1; border: 1px solid var(--navy); color: #fff; background: var(--navy); }
.panel-secondary { border: 1px solid #aeb8c5; color: var(--navy); background: #fff; }
.panel-danger { border: 1px solid #d8aaa5; color: #923f38; background: #fff; }
.template-actions button:disabled { cursor: not-allowed; opacity: .45; }
.security-note { margin-top: 10px !important; padding-left: 16px; background: linear-gradient(90deg, rgb(31 113 71 / 8%), transparent); color: #387054 !important; }
.page-controls { display: grid; gap: 7px; margin-top: 12px; }
.page-control { width: 100%; overflow: hidden; border: 1px solid #cbd1d8; border-radius: 6px; padding: 9px 10px; color: var(--navy); background: #fff; text-align: left; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.page-control.is-active { border-color: var(--gold); background: #fff8df; box-shadow: inset 3px 0 var(--gold); font-weight: 800; }
.page-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; margin-top: 9px; }
.page-actions button { min-height: 32px; border: 1px solid #b7c0cb; border-radius: 5px; color: var(--navy); background: #fff; font-size: 10px; font-weight: 700; }
.page-actions #deletePageButton { color: #923f38; }
.page-actions button:disabled, .add-row-button:disabled, .icon-button:disabled { cursor: not-allowed; opacity: .42; }
.page-fit-warning { margin-top: 10px !important; border-left: 3px solid #b34e45; padding: 8px 9px; color: #873d37 !important; background: #fff0ee; }

.asset-control { margin-top: 12px; padding: 11px; border: 1px solid #dedbd2; border-radius: 8px; background: #fff; }
.asset-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--navy); font-size: 11px; }
.asset-title span, .range-label span { color: #848b94; font-size: 10px; font-weight: 500; }
.asset-buttons { display: flex; gap: 7px; margin: 9px 0; }
.asset-buttons label, .asset-buttons button { flex: 1; border: 1px solid #b7c0cb; border-radius: 5px; padding: 6px 5px; color: var(--navy); background: #fff; text-align: center; font-size: 10px; font-weight: 700; cursor: pointer; }
.asset-buttons button { color: #8d4a44; }
.asset-control > input[type="range"] { display: block; width: 100%; accent-color: var(--gold); }
.range-label { display: flex; justify-content: space-between; margin-top: 7px; color: #68727e; font-size: 9px; font-weight: 750; text-transform: uppercase; }
.range-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 8px; }
.range-pair label { display: grid; gap: 2px; color: #68727e; font-size: 9px; }
.range-pair input { width: 100%; accent-color: var(--gold); }
.font-controls { display: grid; gap: 7px; margin-top: 12px; }
.font-controls label { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 3px 8px; color: #596572; font-size: 10px; font-weight: 700; }
.font-controls label span { color: var(--navy); font-variant-numeric: tabular-nums; }
.font-controls input { grid-column: 1 / -1; width: 100%; accent-color: var(--gold); }
.panel-range { width: 100%; accent-color: var(--gold); }

.upload-button, .add-row-button {
    display: block;
    width: 100%;
    margin-top: 13px;
    padding: 10px;
    border: 1px dashed #9ca8b7;
    border-radius: 7px;
    color: var(--navy);
    background: #fff;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.text-button { border: 0; margin: 8px auto 0; display: block; color: #78808a; background: none; font-size: 11px; text-decoration: underline; }
.icon-button { width: 28px; height: 28px; border: 0; border-radius: 50%; color: white; background: var(--navy); font-size: 20px; line-height: 1; }

.row-controls { display: grid; gap: 8px; margin-top: 14px; }
.row-control { padding: 10px; border: 1px solid #dedbd2; border-radius: 8px; background: #fff; }
.row-control-top { display: flex; align-items: center; gap: 7px; }
.row-control input[type="date"] { min-width: 0; flex: 1; border: 1px solid #ccd2da; border-radius: 5px; padding: 6px; color: var(--navy); font-size: 11px; }
.remove-row { border: 0; color: #9c4b43; background: none; font-size: 18px; line-height: 1; }
.special-toggle { display: flex; align-items: center; gap: 7px; margin-top: 8px; color: #4d5967; font-size: 11px; cursor: pointer; }
.special-toggle input { accent-color: var(--navy); }
.tip { display: grid; gap: 4px; padding: 14px; border-left: 3px solid var(--gold); color: #68717b; background: #fffdf5; font-size: 11px; line-height: 1.45; }
.tip strong { color: var(--navy); }

.preview-area { overflow: auto; padding: 30px clamp(20px, 4vw, 60px) 70px; }
.preview-label { width: min(100%, 794px); margin: 0 auto 10px; color: #77818c; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.preview-label span { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--gold); }

.program-sheet {
    position: relative;
    isolation: isolate;
    width: min(100%, 794px);
    height: 1123px;
    min-height: 1123px;
    margin: 0 auto;
    overflow: hidden;
    padding: 42px 52px 150px;
    color: var(--ink);
    background:
        radial-gradient(circle at 5% 5%, rgb(187 216 237 / 42%), transparent 19%),
        radial-gradient(circle at 95% 88%, rgb(183 214 235 / 42%), transparent 19%),
        var(--paper);
    box-shadow: 0 12px 45px rgb(19 35 55 / 18%);
    font-family: var(--serif);
}
.program-sheet + .program-sheet { margin-top: 30px; }
.program-sheet.page-overflow { box-shadow: 0 0 0 3px #b34e45, 0 12px 45px rgb(19 35 55 / 18%); }
.print-pages { display: none; }
.program-sheet.not-final-page > .verse-card, .program-sheet.not-final-page > .sheet-footer { display: none; }
.continuation-sheet { padding-top: 42px; }
.continuation-sheet .table-wrap { position: relative; z-index: 2; }

.watermark { position: absolute; z-index: -1; pointer-events: none; opacity: .14; color: #78a8d2; }
.watermark-left { top: -75px; left: -65px; width: 240px; height: 240px; border: 26px double currentColor; border-radius: 50%; }
.watermark-right { top: 45px; right: 32px; font-size: 110px; opacity: .08; transform: rotate(15deg); }
.custom-header-image { position: absolute; z-index: -1; top: 0; left: 0; width: 100%; object-fit: contain; object-position: top center; pointer-events: none; }
.custom-header-side { position: absolute; z-index: -1; top: 0; height: auto; max-height: 300px; object-fit: contain; pointer-events: none; }
.custom-header-left { left: 0; object-position: top left; }
.custom-header-right { right: 0; object-position: top right; }
.custom-watermark-image { position: absolute; z-index: -1; max-width: none; height: auto; transform: translate(-50%, -50%); pointer-events: none; }

.sheet-header { text-align: center; }
.logo-wrap { display: grid; place-items: center; height: 104px; }
#churchLogo { max-width: 160px; max-height: 100px; object-fit: contain; }
.default-emblem { position: relative; display: grid; place-items: center; width: 88px; height: 88px; border: 4px double var(--gold); border-radius: 50%; color: white; background: radial-gradient(circle at 35% 30%, #3f75b5, var(--navy) 65%); box-shadow: 0 5px 0 rgb(7 41 83 / 12%); }
.default-emblem b { margin-top: 28px; font: 700 15px var(--serif); letter-spacing: .16em; }
.default-emblem .cross { position: absolute; top: 4px; color: #e6b72a; font-size: 35px; }
.church-name { margin: 12px auto 0; font-size: 23px; line-height: 1.2; }
.congregation { margin-top: 2px; font-size: 22px; }
.ornament { display: flex; align-items: center; gap: 8px; width: 68%; margin: 16px auto 24px; color: var(--gold); }
.ornament::before, .ornament::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.ornament::after { background: linear-gradient(90deg, var(--gold), transparent); }
.program-title { margin-bottom: 25px; color: #bd8300; font-size: 18px; text-transform: uppercase; }

.editable { outline: none; white-space: pre-line; }
.editable:hover, .editable:focus, .cell-editor:hover, .cell-editor:focus { background: rgb(232 194 79 / 12%); box-shadow: 0 0 0 2px rgb(217 163 16 / 32%); }
.editable:focus, .cell-editor:focus { border-radius: 2px; }

.table-wrap { margin: 0 auto; }
.program-table { width: 100%; border-spacing: 0; border-collapse: separate; table-layout: fixed; font-size: 17px; text-align: center; }
.program-table th { padding: 5px 8px; color: #fff; background: var(--navy); border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); font-weight: 400; }
.program-table th:first-child { border-radius: 11px 0 0; }
.program-table th:last-child { border-radius: 0 11px 0 0; }
.program-table th + th { border-left: 1px solid var(--gold); }
.program-table td { height: 45px; padding: 4px 9px; border-right: 1px solid var(--gold); border-bottom: 1px solid var(--gold); background: rgb(255 255 255 / 65%); vertical-align: middle; }
.program-table td:first-child { width: 33.333%; border-left: 1px solid var(--gold); }
.program-table tbody tr:last-child td:first-child { border-radius: 0 0 0 11px; }
.program-table tbody tr:last-child td:last-child { border-radius: 0 0 11px; }
.cell-editor { min-height: 1.3em; outline: none; white-space: pre-line; }
.special-cell { display: none; }
.program-table tr.is-special .directors-cell, .program-table tr.is-special .preacher-cell { display: none; }
.program-table tr.is-special .special-cell { display: table-cell; }

.verse-card { position: relative; isolation: isolate; min-height: 170px; margin: 55px 0 18px; padding: 42px 70px; display: grid; place-items: center; border: 5px double #315b89; border-radius: 27px; background: linear-gradient(135deg, #fffcf3, #fff 50%, #fff9e9); text-align: center; }
.verse-card::before, .verse-card::after { content: "◇"; position: absolute; left: 44%; color: var(--gold); background: var(--paper); padding: 0 15px; }
.verse-card::before { top: -13px; }
.verse-card::after { bottom: -13px; }
.verse-card blockquote { position: relative; z-index: 1; margin: 0; padding-bottom: 24px; font-size: 22px; font-style: italic; font-weight: 700; line-height: 1.45; }
.verse-frame-image { position: absolute; z-index: -1; inset: -5px; width: calc(100% + 10px); height: calc(100% + 10px); object-fit: fill; pointer-events: none; }
.verse-card.has-custom-frame { border-color: transparent; background: transparent; }
.verse-card.has-custom-frame::before, .verse-card.has-custom-frame::after { display: none; }
.verse-card.has-custom-frame .branch { display: none; }
.branch { position: absolute; bottom: 28px; color: #d8ae3b; font-size: 54px; }
.branch-left { left: 19px; transform: rotate(-25deg); }
.branch-right { right: 19px; transform: scaleX(-1) rotate(-25deg); }
.sheet-footer { position: relative; z-index: 2; display: grid; justify-items: center; gap: 5px; text-align: center; font-size: 18px; line-height: 1.5; }
.verse-card .reference { position: absolute; z-index: 2; max-width: 80%; font-size: 15px; white-space: nowrap; transform: translate(-50%, -50%); }
.coordinators { line-height: 1.9; }

.landscape-footer { position: absolute; z-index: 0; right: 0; bottom: 0; left: 0; height: 140px; overflow: hidden; color: #a8c8e2; opacity: .55; pointer-events: none; }
.custom-footer-image { position: absolute; z-index: 0; right: 0; bottom: 0; left: 0; width: 100%; object-fit: contain; object-position: bottom center; pointer-events: none; }
.hills { position: absolute; right: -5%; bottom: -72px; left: -5%; height: 150px; border-radius: 50%; background: linear-gradient(160deg, #e6f2fa, #a8cce7); transform: rotate(-2deg); }
.book { position: absolute; z-index: 2; bottom: 10px; left: 45px; font-size: 100px; transform: rotate(-8deg); }
.chapel { position: absolute; z-index: 2; right: 65px; bottom: 17px; font-size: 95px; }

.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 50% 0, #174b82, var(--navy-deep) 55%); }
.auth-card { width: min(100%, 430px); padding: 38px; border-top: 4px solid var(--gold); border-radius: 4px 4px 13px 13px; background: #fff; box-shadow: 0 24px 70px rgb(0 0 0 / 35%); }
.auth-card h1 { margin: 8px 0 9px; color: var(--navy); font: 600 27px/1.2 var(--serif); }
.auth-card > p { margin: 0 0 24px; color: #66717d; font-size: 13px; line-height: 1.55; }
.auth-card code { padding: 2px 4px; border-radius: 3px; background: #eef1f4; }
.auth-emblem { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 20px; border: 2px solid var(--gold); border-radius: 50%; color: var(--gold); background: var(--navy); font-size: 28px; }
.auth-form { display: grid; gap: 16px; }
.auth-form label { display: grid; gap: 6px; color: #4e5966; font-size: 11px; font-weight: 800; }
.auth-form input { width: 100%; min-height: 44px; border: 1px solid #c8d0d8; border-radius: 6px; padding: 9px 11px; color: #172b48; background: #fff; }
.auth-form input:focus { border-color: var(--gold); outline: 3px solid rgb(217 163 16 / 15%); }
.auth-submit { width: 100%; min-height: 45px; margin-top: 5px; }
.form-error { margin-bottom: 18px; border-left: 3px solid #aa433b; padding: 10px 12px; color: #82352f; background: #fff1ef; font-size: 12px; line-height: 1.45; }

@media (max-width: 980px) {
    .workspace { grid-template-columns: 280px minmax(650px, 1fr); }
    .app-header { position: relative; }
    .editor-panel { top: 0; height: calc(100vh - 78px); }
    .save-status { display: none; }
}

@media (max-width: 720px) {
    .app-header { align-items: flex-start; flex-direction: column; gap: 12px; }
    .header-actions { width: 100%; overflow-x: auto; }
    .workspace { display: block; }
    .editor-panel { position: relative; width: 100%; height: auto; padding-bottom: 24px; }
    .preview-area { padding: 22px 12px 50px; }
    .program-sheet { width: 794px; transform-origin: top left; }
    .preview-area { overflow-x: auto; }
}

@page { size: A4 portrait; margin: 0; }
@media print {
    html, body { width: 210mm; min-height: 297mm; background: #fff; }
    .app-header, .editor-panel, .preview-label { display: none !important; }
    .workspace, .preview-area { display: block; min-height: 0; padding: 0; overflow: visible; }
    #programSheet { display: none; }
    #printPages { display: block; }
    .program-sheet { width: 210mm; height: 297mm; min-height: 297mm; margin: 0; padding: 11mm 14mm 40mm; overflow: hidden; break-after: page; page-break-after: always; box-shadow: none; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
    .program-sheet + .program-sheet { margin-top: 0; }
    .program-sheet:last-child { break-after: auto; page-break-after: auto; }
    .editable:hover, .editable:focus, .cell-editor:hover, .cell-editor:focus { background: transparent; box-shadow: none; }
    .program-table thead { display: table-header-group; }
    .program-table tr { break-inside: avoid; page-break-inside: avoid; }
    .verse-card, .sheet-footer { break-inside: avoid; page-break-inside: avoid; }
}