/* PDF Imposer: Booklet Maker — Windows shell styling.
 * Fluent-leaning: Segoe UI, quiet borders, theme-aware, subtly translucent
 * chrome so Mica (when the OS grants it) shows through the toolbar.
 */

:root {
    --bg: #f4f5f7;
    --panel: #ffffff;
    --panel-trans: rgba(255, 255, 255, 0.72);
    --ink: #1b1d21;
    --muted: #5f6672;
    --line: #e2e5ea;
    --accent: #2f5df1;
    --accent-ink: #ffffff;
    --stage: #e8eaee;
    --ok: #0f7b3f;
    --err: #b3261e;
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #16181c;
        --panel: #1e2126;
        --panel-trans: rgba(30, 33, 38, 0.72);
        --ink: #e9ebee;
        --muted: #9aa2ad;
        --line: #2c313a;
        --accent: #5d7cff;
        --accent-ink: #0e1116;
        --stage: #101216;
        --ok: #4cc38a;
        --err: #ff8a80;
    }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--ink);
    font: 13px/1.45 "Segoe UI Variable Text", "Segoe UI", -apple-system, system-ui, sans-serif;
    user-select: none;
    overflow: hidden;
}
body.is-dropping::after {
    content: "Drop to open";
    position: fixed; inset: 8px;
    display: grid; place-items: center;
    border: 2px dashed var(--accent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    font-size: 18px; font-weight: 600; color: var(--accent);
    pointer-events: none; z-index: 50;
}

/* ------------------------------------------------------------------ */
.toolbar {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px;
    background: var(--panel-trans);
    border-bottom: 1px solid var(--line);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.spacer { flex: 1; }

.btn {
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--ink);
    font: inherit; font-weight: 600;
    cursor: pointer;
}
.btn:hover:not(:disabled) { border-color: var(--muted); }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-quiet { background: transparent; border-color: transparent; }
.btn-quiet:hover:not(:disabled) { background: var(--panel); border-color: var(--line); }

.pro-badge {
    background: linear-gradient(135deg, #f5b942, #e88a2d);
    color: #241703; font-weight: 700; font-size: 11px;
    padding: 3px 10px; border-radius: 999px; letter-spacing: 0.04em;
}

/* ------------------------------------------------------------------ */
.content { flex: 1; display: flex; min-height: 0; }

.inspector {
    width: 300px; min-width: 300px;
    overflow-y: auto;
    background: var(--panel);
    border-right: 1px solid var(--line);
    padding: 6px 16px 24px;
}
.inspector section { padding: 12px 0; border-bottom: 1px solid var(--line); }
.inspector section:last-child { border-bottom: 0; }
.inspector h3 {
    margin: 0 0 10px; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted);
}

.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; flex: 1; }
.field > span { font-weight: 600; display: flex; align-items: center; gap: 6px; }
.field output { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.field-row { display: flex; gap: 10px; align-items: flex-end; }

select, input[type="text"], input[type="number"] {
    font: inherit; color: var(--ink);
    background: var(--bg);
    border: 1px solid var(--line); border-radius: 6px;
    padding: 6px 8px; width: 100%;
}
select:focus, input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

input[type="range"] { width: 100%; accent-color: var(--accent); }

.check { display: flex; align-items: center; gap: 8px; margin: 6px 0; cursor: pointer; }
.check input { accent-color: var(--accent); }

.pro-chip {
    font-style: normal; font-size: 10px; font-weight: 700;
    background: linear-gradient(135deg, #f5b942, #e88a2d);
    color: #241703; padding: 1px 7px; border-radius: 999px;
}
body.is-pro .pro-chip { display: none; }

/* ------------------------------------------------------------------ */
.stage {
    flex: 1; position: relative;
    display: grid; place-items: center;
    background: var(--stage);
    min-width: 0;
}
.drop-hint { text-align: center; color: var(--muted); }
.drop-art { font-size: 42px; margin-bottom: 10px; }
.drop-sub { font-size: 12px; }

.preview { display: grid; place-items: center; gap: 10px; }
#preview-canvas {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.28);
    border-radius: 2px;
    background: #fff;
}
.sheet-nav {
    display: flex; align-items: center; gap: 8px;
    background: var(--panel-trans);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border: 1px solid var(--line); border-radius: 999px;
    padding: 2px 8px;
}
#sheet-label { font-variant-numeric: tabular-nums; color: var(--muted); min-width: 90px; text-align: center; }

/* ------------------------------------------------------------------ */
.statusbar {
    display: flex; gap: 12px;
    padding: 5px 12px;
    border-top: 1px solid var(--line);
    background: var(--panel);
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap; overflow: hidden;
}
#status-info { overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------------------------------------------ */
.menu-wrap { position: relative; }
.menu {
    position: absolute; top: calc(100% + 4px); left: 0; z-index: 40;
    min-width: 240px; max-width: 360px;
    background: var(--panel);
    border: 1px solid var(--line); border-radius: 8px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
    padding: 4px; max-height: 50vh; overflow-y: auto;
}
.menu-item {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px; border-radius: 6px; cursor: pointer;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.menu-item:hover { background: var(--bg); }
.menu-item.is-empty { color: var(--muted); cursor: default; }
.menu-del {
    margin-left: auto; border: 0; background: transparent; color: var(--muted);
    font-size: 14px; cursor: pointer; border-radius: 4px; padding: 0 6px;
}
.menu-del:hover { color: var(--err); }

/* ------------------------------------------------------------------ */
.modal-backdrop {
    position: fixed; inset: 0; z-index: 60;
    background: rgba(0, 0, 0, 0.42);
    display: grid; place-items: center;
}
.modal {
    position: relative;
    width: min(440px, calc(100vw - 48px));
    background: var(--panel);
    border: 1px solid var(--line); border-radius: 12px;
    padding: 22px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
}
.modal h2 { margin: 0 0 8px; font-size: 17px; }
.modal p { color: var(--muted); }
.modal-close {
    position: absolute; top: 10px; right: 12px;
    border: 0; background: transparent; color: var(--muted);
    font-size: 20px; cursor: pointer;
}
.licence-msg { min-height: 1.2em; font-size: 12px; }
.licence-msg.is-ok { color: var(--ok); }
.licence-msg.is-err { color: var(--err); }
.licence-state p { color: var(--ink); }

[hidden] { display: none !important; }

/* ------------------------------------------------------------------ */
/* Narrow screens (the Android build, or a half-snapped window):
 * preview on top, inspector scrolls beneath it. */
@media (max-width: 700px) {
    .content { flex-direction: column-reverse; }
    .inspector {
        width: 100%; min-width: 0;
        max-height: 46vh;
        border-right: 0; border-top: 1px solid var(--line);
    }
    .stage { min-height: 40vh; }
    .toolbar { flex-wrap: wrap; }
}