/* =========================================================
   overtime-meal-allowance · 加班餐费与误餐补助计算器
   设计语言：深夜食堂（炭黑 #241F1A / 暖黄 #E9A820 / 奶油 #FAF4E8）
   ========================================================= */
.oma-page {
    --oma-ink: #2A241C;
    --oma-ink-2: #5A5042;
    --oma-ink-3: #8C8272;
    --oma-dark: #241F1A;
    --oma-dark-deep: #171310;
    --oma-yellow: #E9A820;
    --oma-yellow-deep: #C98D10;
    --oma-red: #C0392B;
    --oma-green: #4A7C3F;
    --oma-bg: #FAF4E8;
    --oma-surface: #FFFFFF;
    --oma-surface-2: #FDF9F0;
    --oma-surface-3: #F4ECDB;
    --oma-line: #E5DCC8;
    --oma-shadow: 0 10px 30px rgba(36, 31, 26, .1);
    --oma-radius: 16px;

    margin: 0 auto 64px;
    max-width: 1200px;
    padding: 8px 4px 0;
    color: var(--oma-ink);
    line-height: 1.65;
}
:root[data-theme="dark"] .oma-page {
    --oma-ink: #F0E9DA;
    --oma-ink-2: #C4BAa6;
    --oma-ink-3: #948B78;
    --oma-dark: #2C251C;
    --oma-dark-deep: #1B1610;
    --oma-yellow: #F0B435;
    --oma-yellow-deep: #E9A820;
    --oma-red: #E5715F;
    --oma-green: #7CB865;
    --oma-bg: #14100C;
    --oma-surface: #1E1912;
    --oma-surface-2: #241E15;
    --oma-surface-3: #2C251B;
    --oma-line: #3A3226;
    --oma-shadow: 0 12px 34px rgba(0, 0, 0, .42);
}

/* ---------- 首屏 ---------- */
.oma-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
    gap: 26px;
    align-items: stretch;
    background:
        radial-gradient(900px 400px at 105% 120%, rgba(233, 168, 32, .3), transparent 60%),
        linear-gradient(140deg, var(--oma-dark) 0%, var(--oma-dark-deep) 100%);
    border-radius: 22px;
    padding: 34px 38px 30px;
    color: #F7EFDC;
    box-shadow: var(--oma-shadow);
    position: relative;
    overflow: hidden;
}
.oma-hero::after {
    content: '';
    position: absolute;
    right: 30px;
    top: -40px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(233, 168, 32, .25), transparent 70%);
    pointer-events: none;
}
.oma-hero-copy { position: relative; z-index: 1; }
.oma-kicker {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 999px;
    background: rgba(233, 168, 32, .16);
    border: 1px solid rgba(233, 168, 32, .5);
    font-size: 12.5px;
    letter-spacing: .1em;
    color: #F3CE7E;
}
.oma-hero h1 { margin: 14px 0 10px; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.25; }
.oma-hero-sub { margin: 0 0 16px; max-width: 620px; font-size: 15.5px; line-height: 1.8; color: rgba(247, 239, 220, .85); }
.oma-hero-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.oma-hero-chips li {
    padding: 6px 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    font-size: 12.5px;
}
.oma-hero-readout {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    background: rgba(233, 168, 32, .12);
    border: 1px solid rgba(233, 168, 32, .45);
    border-radius: var(--oma-radius);
    padding: 22px 24px;
}
.oma-readout-label { font-size: 12.5px; letter-spacing: .08em; color: #F3CE7E; }
.oma-readout-num { font-size: clamp(34px, 4vw, 46px); font-weight: 800; color: #F5CE6E; font-variant-numeric: tabular-nums; line-height: 1.1; }
.oma-readout-sub { font-size: 13.5px; color: rgba(247, 239, 220, .88); }
.oma-readout-meta { font-size: 12.5px; color: rgba(247, 239, 220, .6); }
.oma-readout-tip {
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px dashed rgba(255, 255, 255, .18);
    font-size: 11.5px;
    color: rgba(247, 239, 220, .58);
}

/* ---------- 主区 ---------- */
.oma-main {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 22px;
    margin-top: 22px;
    align-items: start;
}
.oma-panel {
    background: var(--oma-surface);
    border: 1px solid var(--oma-line);
    border-radius: var(--oma-radius);
    padding: 20px 22px;
    box-shadow: var(--oma-shadow);
}
.oma-panel + .oma-panel { margin-top: 16px; }
.oma-panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.oma-step {
    flex: none;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--oma-yellow);
    color: #241F1A;
    font-size: 12px;
    font-weight: 700;
}
.oma-panel-head h2 { margin: 0; font-size: 16.5px; }
.oma-panel-sub { font-size: 12px; font-weight: 400; color: var(--oma-ink-3); }

.oma-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.oma-field label { display: block; font-size: 13px; font-weight: 600; color: var(--oma-ink-2); margin-bottom: 6px; }
.oma-field input {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid var(--oma-line);
    border-radius: 10px;
    background: var(--oma-surface);
    color: var(--oma-ink);
    font-size: 14px;
    outline: none;
    transition: border-color .15s;
}
.oma-field input:focus { border-color: var(--oma-yellow); }
.oma-hint { margin: 6px 0 0; font-size: 12px; color: var(--oma-ink-3); }

/* ---------- 台账 ---------- */
.oma-entry { padding: 12px; border: 1px dashed var(--oma-line); border-radius: 12px; background: var(--oma-surface-2); }
.oma-entry-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr auto auto; gap: 8px; align-items: center; }
.oma-entry-grid input {
    padding: 8px 9px;
    border: 1.5px solid var(--oma-line);
    border-radius: 9px;
    background: var(--oma-surface);
    color: var(--oma-ink);
    font-size: 13px;
    outline: none;
    min-width: 0;
}
.oma-entry-grid input:focus { border-color: var(--oma-yellow); }
.oma-check { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--oma-ink-2); cursor: pointer; white-space: nowrap; }
.oma-check input { width: 15px; height: 15px; accent-color: var(--oma-yellow-deep); }
.oma-add {
    padding: 8px 14px;
    border: none;
    border-radius: 9px;
    background: var(--oma-yellow);
    color: #241F1A;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: filter .15s, transform .12s;
}
.oma-add:hover { filter: brightness(1.06); transform: translateY(-1px); }

.oma-rows-wrap { margin-top: 14px; overflow-x: auto; border: 1px solid var(--oma-line); border-radius: 10px; }
.oma-rows { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 560px; }
.oma-rows th { padding: 8px 10px; background: var(--oma-surface-3); color: var(--oma-ink-2); text-align: left; white-space: nowrap; }
.oma-rows td { padding: 8px 10px; border-top: 1px solid var(--oma-line); white-space: nowrap; color: var(--oma-ink); }
.oma-rows td b { color: var(--oma-yellow-deep); font-variant-numeric: tabular-nums; }
:root[data-theme="dark"] .oma-rows td b { color: var(--oma-yellow); }
.oma-empty td { text-align: center; color: var(--oma-ink-3); padding: 18px; }
.oma-del { border: none; background: none; color: var(--oma-ink-3); cursor: pointer; font-size: 14px; padding: 2px 6px; border-radius: 6px; }
.oma-del:hover { color: var(--oma-red); background: rgba(192, 57, 43, .08); }
.oma-tag { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.oma-tag--t0 { background: var(--oma-surface-3); color: var(--oma-ink-3); }
.oma-tag--t1 { background: rgba(233, 168, 32, .18); color: var(--oma-yellow-deep); }
.oma-tag--t2 { background: rgba(192, 57, 43, .12); color: var(--oma-red); }
.oma-tag--meal { background: rgba(74, 124, 63, .16); color: var(--oma-green); }

.oma-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.oma-btn {
    flex: 1;
    min-width: 100px;
    padding: 11px 10px;
    border: 1.5px solid var(--oma-line);
    border-radius: 12px;
    background: var(--oma-surface);
    color: var(--oma-ink);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .12s, border-color .15s;
}
.oma-btn:hover { transform: translateY(-1px); border-color: var(--oma-yellow); }
.oma-btn--primary { border: none; background: linear-gradient(135deg, var(--oma-yellow), var(--oma-yellow-deep)); color: #241F1A; }

/* ---------- 结果 ---------- */
.oma-result {
    background: linear-gradient(160deg, var(--oma-surface) 0%, var(--oma-surface-2) 100%);
    border: 1.5px solid var(--oma-yellow);
    border-radius: var(--oma-radius);
    padding: 20px 22px;
    box-shadow: var(--oma-shadow);
}
.oma-result-head { display: flex; justify-content: space-between; align-items: center; }
.oma-result-head h2 { margin: 0; font-size: 17px; }
.oma-tag { padding: 4px 12px; border-radius: 999px; background: var(--oma-dark); color: #F3CE7E; font-size: 12px; font-weight: 600; }
.oma-total { margin-top: 14px; text-align: center; padding: 16px 0 12px; border-radius: 12px; background: var(--oma-surface-3); }
.oma-total-label { display: block; font-size: 12.5px; color: var(--oma-ink-3); }
.oma-total b { display: block; font-size: clamp(30px, 3.6vw, 40px); font-weight: 800; color: var(--oma-yellow-deep); font-variant-numeric: tabular-nums; line-height: 1.2; }
:root[data-theme="dark"] .oma-total b { color: var(--oma-yellow); }

.oma-stat { margin-top: 14px; display: grid; gap: 6px; }
.oma-stat-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 9px 13px;
    border-radius: 10px;
    background: var(--oma-surface-2);
    border: 1px solid var(--oma-line);
    font-size: 13px;
    color: var(--oma-ink-2);
}
.oma-stat-row b { margin-left: auto; color: var(--oma-ink); font-variant-numeric: tabular-nums; font-size: 13.5px; }
.oma-stat-row b + b { margin-left: 12px; min-width: 70px; text-align: right; }
.oma-stat-row--meal { border-left: 3px solid var(--oma-green); }
.oma-stat-row--meal b { color: var(--oma-green); }

.oma-tax { margin-top: 14px; border: 1px solid var(--oma-line); border-radius: 12px; padding: 13px 15px; background: var(--oma-surface-2); }
.oma-tax h3 { margin: 0 0 6px; font-size: 13.5px; color: var(--oma-ink); }
.oma-tax p { margin: 0; font-size: 12.5px; line-height: 1.8; color: var(--oma-ink-2); }
.oma-tax-est { margin-top: 8px !important; padding-top: 8px; border-top: 1px dashed var(--oma-line); color: var(--oma-yellow-deep) !important; }
:root[data-theme="dark"] .oma-tax-est { color: var(--oma-yellow) !important; }
.oma-error {
    margin: 12px 0 0;
    padding: 9px 13px;
    border-radius: 10px;
    background: rgba(192, 57, 43, .08);
    border: 1px solid rgba(192, 57, 43, .35);
    color: var(--oma-red);
    font-size: 13px;
}

/* ---------- 判定树 ---------- */
.oma-tree {
    margin-top: 26px;
    background: var(--oma-surface);
    border: 1px solid var(--oma-line);
    border-radius: var(--oma-radius);
    padding: 24px 26px;
    box-shadow: var(--oma-shadow);
}
.oma-tree h2 { margin: 0 0 16px; font-size: 19px; }
.oma-tree-flow {
    display: flex;
    align-items: stretch;
    gap: 10px;
    flex-wrap: wrap;
}
.oma-node {
    flex: 1;
    min-width: 130px;
    text-align: center;
    padding: 14px 10px;
    border-radius: 12px;
    border: 1px solid var(--oma-line);
    background: var(--oma-surface-2);
}
.oma-node b { display: block; font-size: 14px; color: var(--oma-ink); margin-bottom: 4px; }
.oma-node span { font-size: 11.5px; color: var(--oma-ink-3); }
.oma-node--t1 { border-color: var(--oma-yellow); background: rgba(233, 168, 32, .08); }
.oma-node--t2 { border-color: var(--oma-red); background: rgba(192, 57, 43, .06); }
.oma-node--t2 b { color: var(--oma-red); }
.oma-node--meal { border-color: var(--oma-green); background: rgba(74, 124, 63, .07); }
.oma-node--meal b { color: var(--oma-green); }
.oma-var { color: var(--oma-yellow-deep); }
:root[data-theme="dark"] .oma-var { color: var(--oma-yellow); }
.oma-arrow {
    align-self: center;
    font-size: 18px;
    font-weight: 700;
    color: var(--oma-ink-3);
    flex: none;
}
.oma-tree-note { margin: 14px 0 0; font-size: 12.5px; color: var(--oma-ink-3); line-height: 1.8; }

/* ---------- 说明 ---------- */
.oma-guide { margin-top: 26px; }
.oma-guide h2 { margin-bottom: 14px; font-size: 19px; }
.oma-guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.oma-guide-card { background: var(--oma-surface-2); border: 1px solid var(--oma-line); border-radius: var(--oma-radius); padding: 16px 19px; }
.oma-guide-card h3 { margin: 0 0 7px; font-size: 14.5px; }
.oma-guide-card p { margin: 0; font-size: 13px; line-height: 1.85; color: var(--oma-ink-2); }

/* ---------- 打印 ---------- */
.oma-print-area { display: none; }
@media print {
    body * { visibility: hidden; }
    .oma-print-area, .oma-print-area * { visibility: visible; }
    .oma-print-area { display: block; position: absolute; inset: 0; padding: 30px; color: #000; }
    .oma-print-area h1 { font-size: 22px; border-bottom: 2px solid #333; padding-bottom: 8px; }
    .oma-print-area table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 13px; }
    .oma-print-area th, .oma-print-area td { border: 1px solid #999; padding: 7px 10px; text-align: left; }
}

/* ---------- 响应式 ---------- */
@media (max-width: 1080px) {
    .oma-hero { grid-template-columns: minmax(0, 1fr); }
    .oma-main { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .oma-hero { padding: 24px 20px; }
    .oma-grid { grid-template-columns: minmax(0, 1fr); }
    .oma-entry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .oma-guide-grid { grid-template-columns: minmax(0, 1fr); }
    .oma-panel, .oma-result { padding: 16px; }
    .oma-tree-flow { flex-direction: column; }
    .oma-arrow { transform: rotate(90deg); align-self: center; }
}