:root { --navy: #172447; --navy-light: #213361; --ink: #f5f5f0; --soft: rgba(245,245,240,.58); --line: #334573; --gold: #d1ad47; --danger: #ef8d8d; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: var(--navy); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.backdrop { position: fixed; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(51,69,115,.2), transparent 42%); }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .65; }
.app-shell { position: relative; min-height: 100vh; }
.login-screen { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 17vh 2rem 4rem; text-align: center; }
.brand-mark { width: 68px; height: 68px; display: grid; place-items: center; color: var(--gold); border: 1px solid var(--gold); border-radius: 50%; font-size: 2rem; }
.login-brand h1, .page-header h1, h2, .confirmation h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-weight: 600; }
.login-brand h1 { margin-top: 1rem; font-size: clamp(2.25rem, 6vw, 3.4rem); }
.login-brand p { margin: .75rem 0 0; color: var(--soft); font-size: 1.05rem; letter-spacing: .12em; text-transform: uppercase; }
.login-actions { width: min(420px, 100%); }
.primary-button, .gold-button { width: 100%; border: 0; border-radius: 10px; padding: 1rem 1.25rem; color: var(--navy); font-weight: 600; background: var(--ink); }
.primary-button:hover, .gold-button:hover { filter: brightness(1.08); }
.sign-in { font-size: 1.05rem; }
.login-note, .fine-print { color: rgba(245,245,240,.42); font-size: .9rem; }
.page { width: min(960px, 100%); min-height: 100vh; margin: auto; }
.page-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 3.5rem 1.5rem 1rem; border-bottom: 1px solid var(--line); }
.page-header h1 { font-size: 2rem; }
.header-subtitle { margin-top: .35rem; color: var(--soft); font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; }
.text-button { border: 0; padding: .5rem 0; color: var(--soft); background: transparent; }
.content-stack, .orders { display: grid; gap: 1.25rem; padding: 1.5rem; }
.form-section { display: grid; gap: 1rem; }
.form-section h2, .cart-section h2 { font-size: 1.25rem; }
.two-column { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
label, legend { display: grid; gap: .45rem; color: var(--soft); font-size: .9rem; }
input { min-width: 0; width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: .8rem .85rem; color: var(--ink); background: var(--navy-light); outline: none; }
input:focus { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(209,173,71,.2); }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend { margin-bottom: .5rem; }
.select-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .6rem; }
.select-button, .filter-button { border: 1px solid var(--line); border-radius: 9px; padding: .8rem .65rem; color: var(--ink); background: var(--navy-light); }
.select-button.selected, .filter-button.selected { border-color: var(--gold); color: var(--navy); background: var(--gold); font-weight: 600; }
.stepper-list { display: grid; gap: .55rem; }
.stepper, .cart-item, .order-card { border: 1px solid var(--line); border-radius: 10px; background: rgba(33,51,97,.72); }
.stepper { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem .8rem; }
.stepper > div { display: flex; align-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--navy-light); }
.stepper button, .icon-button { border: 0; color: var(--ink); background: transparent; }
.stepper button { width: 42px; height: 42px; font-size: 1.2rem; }
.stepper strong { width: 34px; text-align: center; }
.rule { height: 1px; background: var(--line); }
.gold-button { color: var(--navy); background: var(--gold); font-size: 1.15rem; }
.cart-section { display: grid; gap: .65rem; }
.cart-item { display: flex; align-items: flex-start; justify-content: space-between; padding: .85rem; }
.cart-item strong, .admin-item strong { display: block; font-weight: 500; }
.cart-item small, .admin-item small { display: block; margin-top: .25rem; color: var(--soft); font-size: .88rem; }
.icon-button { padding: .4rem; color: rgba(245,245,240,.55); font-size: 1.3rem; }
.total-row { display: flex; justify-content: space-between; padding-top: .6rem; border-top: 1px solid var(--line); }
.total-row strong, .cost { color: var(--gold); }
.submit-section { display: grid; gap: .65rem; }
.error { margin: 0; color: var(--danger); text-align: center; }
.modal-backdrop { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center; padding: 1.25rem; background: rgba(9,15,35,.9); }
.confirmation { width: min(460px, 100%); display: grid; gap: 1rem; padding: 2rem; border: 1px solid var(--line); border-radius: 14px; text-align: center; background: var(--navy-light); }
.confirmation h1 { font-size: 2.2rem; }
.confirmation p { margin: 0; color: var(--soft); }
.check { width: 64px; height: 64px; margin: auto; display: grid; place-items: center; border-radius: 50%; color: var(--gold); border: 2px solid var(--gold); font-size: 2rem; }
.filter-bar { display: flex; gap: .5rem; overflow-x: auto; padding: 1rem 1.5rem 0; }
.filter-button { flex: 0 0 auto; border-radius: 20px; padding: .55rem 1rem; color: var(--soft); }
.pending-badge { display: inline-block; margin-left: .5rem; padding: .2rem .5rem; border-radius: 5px; color: var(--navy); background: var(--gold); font-size: .75rem; letter-spacing: 0; text-transform: none; }
.order-card { padding: 1rem; }
.order-top, .order-actions { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.order-top h2 { font-size: 1.25rem; }
.order-top p, .order-meta time { margin: .35rem 0 0; color: var(--soft); font-size: .9rem; }
.order-top p span { opacity: .65; }
.order-meta { display: grid; justify-items: end; gap: .5rem; }
.status { padding: .35rem .55rem; border-radius: 6px; font-size: .8rem; font-weight: 600; }
.status.pending { color: #f1b35e; background: rgba(241,179,94,.16); }
.status.in-progress { color: #80adf0; background: rgba(128,173,240,.16); }
.status.delivered { color: #81d29f; background: rgba(129,210,159,.16); }
.order-items { display: grid; gap: .5rem; padding: .8rem 0; }
.items-heading { color: var(--soft); text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; }
.admin-item { display: flex; gap: .75rem; padding: .7rem; border-radius: 8px; background: rgba(23,36,71,.55); }
.admin-item b { color: var(--gold); }
.order-actions { align-items: center; padding-top: .8rem; border-top: 1px solid var(--line); }
.small-button { border: 0; border-radius: 7px; padding: .55rem .75rem; color: var(--navy); background: var(--ink); font-size: .85rem; }
.small-button.gold { background: var(--gold); }
.empty-state { display: grid; place-items: center; min-height: 280px; color: rgba(245,245,240,.35); }
.empty-state div { font-size: 2.5rem; }
.empty-state p { margin: .5rem 0; }
@media (max-width: 600px) { .login-screen { padding-top: 12vh; } .page-header { padding: 2rem 1rem 1rem; } .content-stack, .orders { padding: 1rem; } .two-column { grid-template-columns: 1fr; } .page-header h1 { font-size: 1.65rem; } .order-top { flex-direction: column; } .order-meta { justify-items: start; } }