:root{--ink:#123047;--green:#1f5e83;--paper:#f7fafc;--line:#c9dae5;--muted:#526a7a;--primary-soft:#e2f0f7;--warn:#855a00;--warn-soft:#fff2d6;--danger:#a32929;--danger-soft:#fce8e8;--focus:#4c88aa}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:16px system-ui,sans-serif}
.wrap{max-width:720px;margin:auto;padding:16px}
.card,.order{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;margin:12px 0}
.hero{padding-top:8px}.hero h1{font-size:1.7rem;margin:.2rem 0}
.muted{color:var(--muted)}.hidden{display:none!important}
.field{display:grid;gap:6px;margin:12px 0}
input,select,button{font:inherit;padding:12px;border-radius:9px;border:1px solid #9eb3c2}
input:focus-visible,select:focus-visible,button:focus-visible{outline:3px solid rgba(76,136,170,.45);outline-offset:2px}
button{background:var(--green);color:#fff;border:0;font-weight:700;cursor:pointer}
button:hover{background:#174b68}button:disabled{cursor:wait;opacity:.62}
button.secondary{background:var(--primary-soft);border:1px solid var(--line);color:var(--ink)}
button.secondary:hover{background:#d3e7f1}
.period-picker{padding:18px}.period-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.period-heading h2{font-size:1.12rem;margin:0 0 4px}.period-heading p{font-size:.9rem;margin:0}.period-position{white-space:nowrap;background:var(--primary-soft);border-radius:999px;padding:5px 9px;font-size:.78rem;font-weight:700}.period-picker select{width:100%;background:#fff;color:var(--ink);font-weight:700}.period-nav{display:grid;grid-template-columns:1fr 1fr;gap:10px}.period-nav button{width:100%}
.maintenance{background:var(--warn-soft);border:1px solid #d6ad5a;border-radius:12px;padding:14px;margin:12px 0;color:#654300}
.maintenance strong{display:block}
.summary-card{background:var(--green);color:#fff;border-radius:14px;padding:20px;margin:12px 0}
.summary-card .label{font-size:.9rem;opacity:.9}.summary-card .total{font-size:2rem;font-weight:800;margin:.2rem 0}.summary-card .period{font-size:.85rem;opacity:.9}
.summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}.summary-grid div{background:var(--primary-soft);color:var(--ink);border-radius:9px;padding:10px}.summary-grid strong{display:block;font-size:1rem}.summary-grid span{font-size:.78rem;opacity:.85}
.order-top{display:flex;justify-content:space-between;gap:12px}.amount{font-weight:800;font-size:1.2rem}
.status{display:inline-flex;align-items:center;margin:.35rem 0 .9rem;padding:4px 8px;border-radius:999px;background:var(--primary-soft);color:var(--green);font-size:.85rem;font-weight:700}
.status.PENDING,.status.INCONSISTENT{background:var(--warn-soft);color:var(--warn)}.status.CANCELLED{background:var(--danger-soft);color:var(--danger)}
.detail{width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;background:transparent;color:var(--ink)}
.detail::backdrop{background:rgba(18,48,71,.76)}
.dialog{position:absolute;bottom:0;background:#fff;width:100%;max-height:88vh;overflow:auto;border:1px solid var(--line);border-radius:18px 18px 0 0;padding:20px}
.dialog-head{display:flex;justify-content:space-between;align-items:center}.close{font-size:1.8rem;padding:0 .5rem;background:transparent;color:var(--ink)}.close:hover{background:var(--primary-soft);color:var(--green)}
.item{border-top:1px solid var(--line);padding:10px 0}
@media(max-width:380px){.period-heading{display:block}.period-position{display:inline-block;margin-top:10px}.period-nav{grid-template-columns:1fr}}
@media(min-width:650px){.wrap{padding:30px}.dialog{position:relative;margin:8vh auto;max-width:620px;border-radius:18px}}