:root {
  --wine: #86182b;
  --wine-dark: #61101e;
  --wine-soft: #f8e8eb;
  --cream: #f7f3ee;
  --paper: #ffffff;
  --ink: #292321;
  --muted: #8a7b75;
  --line: #e9dfd9;
  --gold: #c98a36;
  --green: #24845b;
  --blue: #3978a8;
  --danger: #b72c3f;
  --shadow: 0 12px 32px rgba(78, 42, 29, .07);
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body { color: var(--ink); background: var(--cream); font: 14px/1.55 "Microsoft YaHei", "PingFang SC", system-ui, sans-serif; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a { transition: .18s ease; }

.portal-shell { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }
.portal-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; display: flex; width: 252px; flex-direction: column; color: #f8ece8; background: linear-gradient(180deg, #721322 0%, #54101b 100%); box-shadow: 8px 0 30px rgba(76, 16, 28, .14); }
.portal-brand { display: flex; align-items: center; gap: 12px; height: 84px; padding: 0 24px; border-bottom: 1px solid rgba(255,255,255,.1); }
.portal-brand__mark { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 14px; color: var(--wine); background: #fff5e9; font-size: 21px; font-weight: 900; }
.portal-brand strong, .portal-brand small { display: block; }
.portal-brand strong { color: white; font-size: 17px; letter-spacing: .03em; }
.portal-brand small { color: #d8b9b5; font-size: 11px; }
.portal-nav { flex: 1; overflow-y: auto; padding: 18px 13px; }
.portal-nav__label { margin: 18px 12px 7px; color: #b98f8d; font-size: 11px; font-weight: 700; letter-spacing: .16em; }
.portal-nav__label:first-child { margin-top: 0; }
.portal-nav a { position: relative; display: flex; align-items: center; gap: 11px; min-height: 43px; margin: 3px 0; padding: 0 12px; border-radius: 11px; color: #e5ceca; }
.portal-nav a:hover { color: white; background: rgba(255,255,255,.08); }
.portal-nav a.active { color: #6d1322; background: #fff7ed; box-shadow: 0 8px 20px rgba(39, 3, 10, .18); font-weight: 750; }
.portal-nav a b { display: grid; min-width: 21px; height: 21px; margin-left: auto; place-items: center; padding: 0 6px; border-radius: 999px; color: white; background: #d45a5e; font-size: 11px; }
.nav-icon { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 9px; background: rgba(255,255,255,.09); font-size: 12px; font-weight: 800; }
.active .nav-icon { color: white; background: var(--wine); }
.portal-sidebar__foot { display: flex; align-items: center; gap: 10px; margin: 14px; padding: 14px; border-radius: 13px; background: rgba(255,255,255,.07); }
.portal-sidebar__foot strong, .portal-sidebar__foot small { display: block; }
.portal-sidebar__foot small { color: #caa7a4; font-size: 11px; }
.open-dot { width: 9px; height: 9px; border-radius: 50%; background: #69da99; box-shadow: 0 0 0 5px rgba(105,218,153,.12); }
.open-dot.closed { background: #aaa; box-shadow: none; }

.portal-main { grid-column: 2; min-width: 0; }
.portal-topbar { position: sticky; top: 0; z-index: 10; display: flex; min-height: 84px; align-items: center; justify-content: space-between; gap: 30px; padding: 14px 34px; border-bottom: 1px solid rgba(128,93,78,.12); background: rgba(247,243,238,.94); backdrop-filter: blur(16px); }
.portal-topbar p, .portal-topbar h1 { margin: 0; }
.portal-topbar p { color: var(--muted); font-size: 11px; }
.portal-topbar h1 { margin-top: 2px; font-size: 22px; line-height: 1.25; }
.portal-account { display: flex; align-items: center; gap: 10px; }
.portal-account strong, .portal-account small { display: block; }
.portal-account small { color: var(--muted); font-size: 11px; }
.portal-avatar { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; color: white; background: linear-gradient(145deg, #a2293e, #6d1121); font-weight: 800; }
.text-button { margin-left: 8px; padding: 7px 10px; border: 0; color: #8a6f68; background: transparent; cursor: pointer; }
.text-button:hover { color: var(--wine); }
.portal-content { width: 100%; max-width: 1680px; margin: 0 auto; padding: 28px 34px 48px; }

.message-stack { position: fixed; z-index: 30; top: 95px; right: 28px; display: grid; gap: 8px; }
.message { min-width: 280px; padding: 13px 16px; border: 1px solid #cfe8da; border-radius: 11px; color: #1f6947; background: #edf9f2; box-shadow: var(--shadow); transition: opacity .24s ease, transform .24s ease; }
.message.is-leaving { opacity: 0; transform: translateY(-8px); }
.message.error { border-color: #f1cbd0; color: #9e2637; background: #fff0f2; }

.welcome-card { display: flex; min-height: 170px; align-items: center; justify-content: space-between; gap: 30px; overflow: hidden; padding: 32px 38px; border-radius: 22px; color: white; background: radial-gradient(circle at 78% 15%, rgba(255,207,158,.18), transparent 22%), linear-gradient(118deg, #751426, #a92b3d 62%, #cc604e); box-shadow: 0 18px 45px rgba(111, 20, 37, .2); }
.welcome-card h2, .welcome-card p { margin: 0; }
.welcome-card h2 { margin: 6px 0; font-size: 30px; }
.welcome-card p:last-child { color: #f5dcd6; }
.eyebrow { color: #f7cda8 !important; font-size: 11px !important; font-weight: 800; letter-spacing: .16em; }
.light-button { flex: 0 0 auto; padding: 11px 16px; border: 1px solid rgba(255,255,255,.25); border-radius: 11px; color: white; background: rgba(255,255,255,.1); font-weight: 700; }
.light-button:hover { background: rgba(255,255,255,.18); transform: translateY(-1px); }

.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 19px 0; }
.stat-card { display: flex; min-height: 126px; align-items: center; gap: 15px; padding: 20px; border: 1px solid var(--line); border-radius: 17px; background: white; box-shadow: var(--shadow); }
a.stat-card:hover { border-color: #d9c7bd; transform: translateY(-2px); }
.stat-card small, .stat-card strong, .stat-card p { display: block; margin: 0; }
.stat-card small { color: var(--muted); }
.stat-card strong { margin: 3px 0; font-size: 25px; line-height: 1.2; }
.stat-card p { color: #a2938d; font-size: 11px; }
.stat-icon { display: grid; width: 46px; height: 46px; flex: 0 0 auto; place-items: center; border-radius: 14px; font-weight: 900; }
.stat-icon.red { color: #9f2538; background: #fae9ec; }.stat-icon.gold { color: #a96a19; background: #fff1d8; }.stat-icon.green { color: #24724f; background: #e5f5ec; }.stat-icon.blue { color: #356d97; background: #e5f1f8; }

.content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; }
.side-stack { display: grid; align-content: start; gap: 18px; }
.panel { overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: white; box-shadow: var(--shadow); }
.panel-head { display: flex; min-height: 70px; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 20px; border-bottom: 1px solid #eee5e0; }
.panel-head h3, .panel-head p { margin: 0; }.panel-head h3 { font-size: 16px; }.panel-head p { color: var(--muted); font-size: 11px; }.panel-head > a { color: var(--wine); font-size: 12px; font-weight: 700; }
.quick-card > a { display: flex; align-items: center; gap: 10px; margin: 0 17px; padding: 12px 2px; border-bottom: 1px solid #f0e7e2; font-weight: 650; }
.quick-card > a:last-child { border: 0; }.quick-card > a:hover { color: var(--wine); padding-left: 5px; }.quick-card > a span { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 8px; color: var(--wine); background: var(--wine-soft); font-size: 11px; }
.delivery-card { padding-bottom: 18px; }.delivery-card > strong, .delivery-card > p, .delivery-card > a { display: block; margin: 12px 20px 0; }.delivery-card > strong { color: var(--wine); font-size: 24px; }.delivery-card > p { color: var(--muted); }.delivery-card > a { color: var(--wine); font-weight: 700; }
.delivery-task-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
.delivery-task { padding: 20px; border: 1px solid var(--line); border-radius: 17px; background: white; box-shadow: var(--shadow); }
.delivery-task__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.delivery-task__head small { color: var(--muted); }.delivery-task h3 { margin: 15px 0; font-size: 16px; }.delivery-task dl { display: grid; gap: 10px; margin: 0 0 18px; }.delivery-task dl div { padding: 11px 12px; border-radius: 10px; background: #faf7f4; }.delivery-task dt { color: var(--muted); font-size: 11px; }.delivery-task dd { margin: 3px 0 0; font-weight: 650; word-break: break-word; }.delivery-task form, .delivery-task button { width: 100%; }

.page-actions { display: flex; min-height: 50px; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.page-actions p { margin: 4px 0 0; color: var(--muted); }
.primary-button, .secondary-button, .danger-button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; padding: 0 18px; border: 0; border-radius: 11px; cursor: pointer; font-weight: 750; }
.primary-button { color: white; background: linear-gradient(135deg, #981f35, #731324); box-shadow: 0 8px 18px rgba(126,23,40,.18); }.primary-button:hover { transform: translateY(-1px); box-shadow: 0 11px 24px rgba(126,23,40,.25); }
.secondary-button { border: 1px solid #dbcac1; color: #674d45; background: #fff; }.secondary-button:hover { border-color: #ae8579; color: var(--wine); }
.danger-button { border: 1px solid #edcbd0; color: #a52135; background: #fff0f2; }
.filter-bar { display: grid; grid-template-columns: minmax(240px, 1fr) 190px 170px auto; gap: 10px; margin-bottom: 15px; padding: 13px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.7); }
.filter-bar.compact { grid-template-columns: 220px auto; justify-content: start; }
input, select, textarea { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid #ddcfc7; border-radius: 9px; outline: none; color: var(--ink); background: white; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: #b45968; box-shadow: 0 0 0 3px rgba(150,32,52,.08); }
input[type="checkbox"] { width: 17px; min-height: 17px; padding: 0; accent-color: var(--wine); }
input[type="file"] { padding: 8px; }

.table-panel { overflow: visible; }.table-wrap { width: 100%; overflow-x: auto; }.table-wrap table, .detail-panel table { width: 100%; border-collapse: collapse; }
th { color: #8c7972; background: #fcfaf8; font-size: 11px; text-align: left; white-space: nowrap; }
th, td { padding: 14px 16px; border-bottom: 1px solid #eee6e1; vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }tbody tr:hover td { background: #fffdfb; }
td small.block { display: block; color: var(--muted); }.strong-link, .row-action { color: var(--wine); font-weight: 750; }.row-action { padding: 6px 9px; border-radius: 8px; }.row-action:hover { background: var(--wine-soft); }
.price { color: #a51f35; }.empty-row, .empty-state { padding: 45px !important; color: var(--muted); text-align: center; }
.product-cell, .staff-cell { display: flex; align-items: center; gap: 11px; min-width: 220px; }.product-cell img, .product-cell > span { width: 48px; height: 48px; flex: 0 0 auto; border-radius: 11px; object-fit: cover; }.product-cell > span { display: grid; place-items: center; color: white; background: linear-gradient(145deg, #e7a09a, #b53e47); font-weight: 900; }.product-cell strong, .product-cell small, .staff-cell strong, .staff-cell small { display: block; }.product-cell small, .staff-cell small { color: var(--muted); font-size: 11px; }
.staff-cell > span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; color: white; background: var(--wine); font-weight: 800; }
.badge { display: inline-flex; align-items: center; margin: 2px 3px 2px 0; padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 750; white-space: nowrap; }.badge.large { padding: 7px 13px; font-size: 13px; }.badge.success { color: #1f764e; background: #e6f6ed; }.badge.warning { color: #9a6119; background: #fff0d8; }.badge.info { color: #356c96; background: #e7f1f8; }.badge.danger { color: #a72538; background: #fce9ec; }.badge.muted { color: #716b68; background: #efedeb; }
.pagination { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-top: 1px solid var(--line); color: var(--muted); }.pagination div { display: flex; align-items: center; gap: 12px; }.pagination a { color: var(--wine); font-weight: 700; }

.category-grid, .promotion-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }.category-card { display: flex; align-items: center; gap: 14px; min-height: 130px; padding: 19px; border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: var(--shadow); }.category-card > span { display: grid; width: 50px; height: 50px; flex: 0 0 auto; place-items: center; border-radius: 15px; color: var(--wine); background: var(--wine-soft); font-size: 18px; font-weight: 900; }.category-card h3, .category-card p { margin: 0; }.category-card p, .category-card small { color: var(--muted); font-size: 11px; }.category-card a { margin-left: auto; color: var(--wine); font-weight: 750; }
.promotion-card { overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: white; box-shadow: var(--shadow); }.promotion-visual { position: relative; display: grid; height: 180px; min-height: 180px; max-height: 180px; overflow: hidden; place-items: center; color: white; background: linear-gradient(130deg, #8b192e, #cf6a52); }.promotion-visual img { display: block; width: 100%; height: 100%; object-fit: cover; }.promotion-visual > span { font-size: 42px; font-weight: 900; }.promotion-visual b { position: absolute; z-index: 1; top: 12px; right: 12px; padding: 5px 9px; border-radius: 999px; background: rgba(0,0,0,.42); font-size: 10px; }.promotion-edit-float { position: absolute; z-index: 1; right: 12px; bottom: 12px; padding: 7px 10px; border-radius: 999px; color: var(--wine) !important; background: rgba(255,255,255,.94); box-shadow: 0 4px 12px rgba(0,0,0,.16); font-size: 12px; font-weight: 800; }.promotion-copy { display: flex; min-height: 120px; flex-direction: column; justify-content: space-between; gap: 14px; padding: 17px; }.promotion-copy h3, .promotion-copy p { margin: 0; }.promotion-copy p { color: var(--muted); }.promotion-copy__footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.promotion-copy a { color: var(--wine); font-weight: 750; }

.editor-layout, .detail-grid, .settings-layout { display: grid; grid-template-columns: minmax(0, 1fr) 350px; align-items: start; gap: 18px; }.editor-side, .detail-side { display: grid; gap: 15px; }.form-panel { padding-bottom: 20px; }.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; padding: 20px; }.form-grid.single { grid-template-columns: 1fr; }.form-grid label, .compact-form label { display: block; }.form-grid label > span, .compact-form label > span, .spec-row label { display: block; margin-bottom: 6px; color: #5e4d47; font-size: 12px; font-weight: 700; }.form-grid em { margin-left: 3px; color: var(--danger); font-style: normal; }.form-grid label > small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }.form-grid input[type="date"] { min-height: 48px; font-size: 16px; }.plain-language-tip { display: grid; gap: 5px; margin: 20px 20px 0; padding: 14px 16px; border: 1px solid #f0d6aa; border-radius: 12px; color: #714916; background: #fff8e9; }.plain-language-tip strong { font-size: 14px; }.plain-language-tip span { font-size: 12px; line-height: 1.55; }.quick-date-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }.quick-date-actions button { min-height: 35px; padding: 6px 11px; border: 1px solid #d8b1a1; border-radius: 9px; color: var(--wine); background: #fffaf7; cursor: pointer; font-size: 12px; font-weight: 750; }.quick-date-actions button:hover, .quick-date-actions button:focus { color: white; border-color: var(--wine); outline: none; background: var(--wine); }.span-2 { grid-column: 1 / -1; }.form-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 0 20px; }.narrow-form { max-width: 760px; margin: 0 auto; }.save-button { width: 100%; }.editor-actions { display: grid; gap: 10px; }.editor-actions .secondary-button { width: 100%; }
.spec-row { display: grid; gap: 9px; margin: 15px; padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: #fcfaf8; }.check-line { display: flex !important; align-items: center; gap: 7px; }.check-line input { order: -1; }.delete-check { color: var(--danger) !important; }
.form-error, .field-error { color: #a9273a !important; }.form-error { margin: 15px 20px 0; padding: 11px; border-radius: 9px; background: #fff0f2; }.field-error { display: block; margin-top: 4px; font-size: 11px; }
.errorlist { margin: 0; padding: 0; list-style: none; }

.detail-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }.detail-heading a { color: var(--wine); }.detail-heading h2, .detail-heading p { margin: 3px 0; }.detail-heading p { color: var(--muted); }.detail-panel { margin-bottom: 17px; }.amount-summary { display: flex; justify-content: flex-end; gap: 25px; padding: 16px 20px; border-top: 1px solid var(--line); }.amount-summary strong { color: var(--wine); }.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0; padding: 20px; }.info-grid div { padding: 12px; border-radius: 10px; background: #faf7f4; }.info-grid .wide { grid-column: 1 / -1; }.info-grid dt { color: var(--muted); font-size: 11px; }.info-grid dd { margin: 4px 0 0; font-weight: 650; }.order-actions { display: grid; gap: 9px; padding: 16px; }.order-actions button { width: 100%; }.compact-form { padding-bottom: 15px; }.compact-form > label { margin: 15px; }.compact-form > button { margin: 0 15px; width: calc(100% - 30px); }.action-panel { padding-bottom: 4px; }.inline-actions { display: flex; gap: 6px; }.mini-button { padding: 5px 8px; border: 0; border-radius: 7px; cursor: pointer; font-size: 11px; font-weight: 750; }.mini-button.success { color: #1e704a; background: #e4f5eb; }.mini-button.danger { color: #a52436; background: #fbe8eb; }

.settings-preview { position: sticky; top: 105px; }.settings-preview > span { display: block; margin-bottom: 9px; color: var(--muted); font-size: 11px; }.phone-card { min-height: 250px; padding: 28px 24px; border-radius: 22px; color: white; background: radial-gradient(circle at 82% 20%, rgba(255,222,169,.28), transparent 23%), linear-gradient(145deg, #7b1728, #c04a49); box-shadow: 0 18px 40px rgba(111,20,37,.2); }.phone-card small { color: #f4cbbf; }.phone-card h3 { margin: 12px 0 7px; font-size: 25px; }.phone-card p { min-height: 54px; color: #f8e1da; }.phone-card div { margin-top: 18px; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.2); }.role-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 17px; }.role-grid article { display: flex; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: white; }.role-grid article > span { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border-radius: 11px; color: var(--wine); background: var(--wine-soft); font-weight: 800; }.role-grid h3, .role-grid p { margin: 0; }.role-grid p { color: var(--muted); font-size: 11px; }

.login-body { overflow: hidden; background: #f5efe9; }.login-shell { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(420px, .9fr); min-height: 100vh; }.login-story { position: relative; display: flex; overflow: hidden; flex-direction: column; justify-content: space-between; padding: 50px 58px; color: white; background: radial-gradient(circle at 72% 18%, rgba(255,207,158,.22), transparent 20%), linear-gradient(145deg, #6c1020 0%, #991d34 58%, #c8584d 100%); }.login-brand { display: flex; align-items: center; gap: 13px; font-size: 19px; }.login-brand span, .mobile-mark { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 14px; color: var(--wine); background: #fff3e4; font-size: 21px; font-weight: 900; }.login-copy { position: relative; z-index: 2; max-width: 620px; }.login-copy h1 { margin: 12px 0 18px; font-size: clamp(38px, 4vw, 66px); line-height: 1.18; letter-spacing: -.04em; }.login-copy > p:last-child { max-width: 520px; color: #f1d7d2; font-size: 16px; }.login-promise { position: relative; z-index: 2; display: flex; gap: 9px; }.login-promise span { padding: 7px 11px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; color: #f5dfda; background: rgba(255,255,255,.07); font-size: 11px; }.meat-pattern { position: absolute; border: 1px solid rgba(255,255,255,.12); border-radius: 48% 52% 57% 43%; }.pattern-one { right: -100px; bottom: 80px; width: 360px; height: 280px; transform: rotate(-18deg); }.pattern-two { right: 150px; bottom: -130px; width: 300px; height: 250px; transform: rotate(25deg); }
.login-panel { display: grid; padding: 45px; place-items: center; }.login-card { width: min(420px, 100%); }.login-card__head { display: flex; align-items: center; gap: 13px; margin-bottom: 34px; }.login-card__head p, .login-card__head h2 { margin: 0; }.login-card__head p { color: var(--muted); font-size: 12px; }.login-card__head h2 { font-size: 27px; }.mobile-mark { display: none; }.login-card > label { display: block; margin: 18px 0; color: #5e4d47; font-size: 12px; font-weight: 700; }.login-card > label input { height: 50px; margin-top: 7px; padding: 0 14px; border-radius: 12px; }.login-button { width: 100%; height: 50px; justify-content: space-between; margin-top: 9px; padding: 0 18px; }.login-button span { font-size: 19px; }.login-help { margin-top: 18px; color: var(--muted); font-size: 11px; text-align: center; }

@media (max-width: 1180px) {
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .delivery-task-grid { grid-template-columns: 1fr; }
  .content-grid { grid-template-columns: 1fr; }.side-stack { grid-template-columns: 1fr 1fr; }
  .category-grid, .promotion-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .portal-shell { grid-template-columns: 82px minmax(0,1fr); }.portal-sidebar { width: 82px; }.portal-brand { justify-content: center; padding: 0; }.portal-brand > span + span, .portal-nav__label, .portal-nav a:not(.active) b, .portal-sidebar__foot div { display: none; }.portal-nav a { justify-content: center; padding: 0; font-size: 0; }.portal-nav a.active { background: rgba(255,255,255,.12); }.portal-nav a.active .nav-icon { color: var(--wine); background: white; }.portal-sidebar__foot { justify-content: center; }.portal-main { grid-column: 2; }
  .editor-layout, .detail-grid, .settings-layout { grid-template-columns: 1fr; }.settings-preview { position: static; }.login-shell { grid-template-columns: 1fr; }.login-story { display: none; }.login-panel { padding: 25px; }.mobile-mark { display: grid; }
}
@media (max-width: 640px) {
  .portal-shell { display: block; }.portal-sidebar { position: static; width: 100%; height: auto; }.portal-brand { height: 64px; }.portal-nav { display: flex; overflow-x: auto; padding: 7px; }.portal-nav__label, .portal-sidebar__foot { display: none; }.portal-nav a { min-width: 52px; margin: 0 2px; }.portal-main { width: 100%; }.portal-topbar { min-height: 70px; padding: 11px 16px; }.portal-topbar p, .portal-account > span + span { display: none; }.portal-topbar h1 { font-size: 18px; }.portal-content { padding: 17px 14px 35px; }.welcome-card { min-height: 190px; align-items: flex-start; flex-direction: column; padding: 24px; }.welcome-card h2 { font-size: 25px; }.stat-grid, .category-grid, .promotion-grid, .role-grid, .form-grid { grid-template-columns: 1fr; }.span-2 { grid-column: auto; }.side-stack { grid-template-columns: 1fr; }.filter-bar, .filter-bar.compact { grid-template-columns: 1fr; }.page-actions { align-items: stretch; flex-direction: column; }.page-actions .primary-button { width: 100%; }.info-grid { grid-template-columns: 1fr; }.info-grid .wide { grid-column: auto; }.message-stack { right: 14px; left: 14px; }.message { min-width: 0; }
}

.form-grid label[hidden]{display:none}.discount-buttons{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0}.discount-buttons button{padding:14px 24px;border:1px solid #ae2a20;border-radius:10px;background:#fff5ee;color:#ae2a20;font-size:18px;cursor:pointer}

/* Phase 9.1A: shared, readable controls for the daily operating pages. */
.portal-topbar { backdrop-filter: none; background: #f7f3ee; }.portal-sidebar { background: #721b2b; }
.portal-topbar h1 { font-size: 24px; }.form-grid label > span { font-size: 14px; }.form-grid label > small { font-size: 12px; }
.panel-head h3 { font-size: 18px; }.panel-head p { font-size: 13px; }.narrow-form { max-width: 1120px; }
.radio-row > div { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 15px; }
:root { --wine: #a71930; --wine-dark: #831023; --cream: #f7f3ee; --ink: #2f241f; --muted: #8a7468; --line: #eadfd7; --shadow: 0 6px 24px rgba(80,45,25,.06); }
.portal-content { max-width: 1400px; padding: 30px 30px 54px; }
.admin-page { display: grid; gap: 22px; min-width: 0; }
.admin-intro { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 1px 2px 5px; }
.admin-intro h2, .admin-intro p { margin: 0; }
.admin-intro h2 { font-size: 25px; line-height: 1.3; font-weight: 700; }
.admin-intro p:not(.eyebrow-red) { margin-top: 7px; color: var(--muted); font-size: 14px; }
.eyebrow-red { margin-bottom: 5px !important; color: var(--wine); font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.admin-card { min-width: 0; border: 1px solid var(--line); border-radius: 15px; background: white; box-shadow: var(--shadow); }
.admin-section { padding: 24px; }.admin-form .admin-section + .admin-section { border-top: 1px solid #f0e8e2; }
.admin-section-title { display: flex; align-items: center; justify-content: space-between; gap: 13px; margin-bottom: 21px; }
.admin-section-title:has(.step-number) { justify-content: flex-start; }
.admin-section-title h3, .admin-section-title p { margin: 0; }
.admin-section-title h3 { color: #30241f; font-size: 18px; font-weight: 700; }
.admin-section-title p { margin-top: 3px; color: var(--muted); font-size: 13px; }
.step-number { display: grid; width: 33px; height: 33px; flex: none; place-items: center; border-radius: 10px; color: var(--wine); background: #f8e9e7; font-size: 16px; font-weight: 800; }
.admin-fields { padding: 0; gap: 18px 20px; }.admin-fields label > span, .form-field > span { display: block; margin-bottom: 7px; color: #3d302a; font-size: 14px; font-weight: 650; }
.form-field { display: block; }.form-field[hidden], .product-choice[hidden], .empty-state-admin[hidden] { display: none !important; }
.form-field input:not([type=checkbox]), .form-field select, .form-field textarea, .selection-tools input, .inline-form input { min-height: 45px; border: 1px solid #dccfc7; border-radius: 8px; font-size: 15px; }
.form-field textarea { min-height: 105px; }.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--wine); box-shadow: 0 0 0 3px rgba(167,25,48,.08); }
.form-field > small, .help-text { display: block; margin-top: 6px; color: #8b7a70; font-size: 12px; }.field-error { display: block; margin-top: 6px; color: #a71930 !important; font-size: 12px; }
.form-error { margin: 20px 24px 0; line-height: 1.8; }.form-error strong { display: block; margin-bottom: 3px; }
.primary-button, .secondary-button, .danger-button { min-height: 44px; border-radius: 8px; font-size: 14px; font-weight: 700; }
.primary-button { background: var(--wine); box-shadow: none; }.primary-button:hover { background: var(--wine-dark); transform: none; box-shadow: none; }
.secondary-button:hover { border-color: #bca99e; background: #faf4ed; }.danger-button { color: #9b2133; background: #fff0f2; }.danger-button:hover { background: #fce3e7; }
.action-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 15px; padding: 22px 24px; border-top: 1px solid var(--line); background: #fdfbf9; border-radius: 0 0 15px 15px; }
.action-bar p { margin: 0; color: var(--muted); font-size: 13px; }
.discount-buttons { margin: 0 0 19px; gap: 10px; }.discount-buttons button, .template-shortcuts button { min-width: 70px; min-height: 46px; padding: 9px 16px; border: 1px solid #dcc8be; border-radius: 9px; color: #6c3938; background: #fff9f5; font-size: 16px; font-weight: 700; cursor: pointer; }
.discount-buttons button:hover, .discount-buttons button.is-selected, .template-shortcuts button:hover, .template-shortcuts button.is-selected { border-color: var(--wine); color: white; background: var(--wine); }
.template-shortcuts { display: flex; flex-wrap: wrap; gap: 9px; }.template-shortcuts button { font-size: 14px; }
.compact-field { max-width: 280px; }.selection-tools { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 15px; }.selection-tools input { flex: 1 1 270px; max-width: 390px; }.selection-tools button { flex: none; }
.product-choice-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; max-height: 330px; overflow-y: auto; }
.product-choice { display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: #fffdfa; cursor: pointer; }
.product-choice:has(input:checked) { border-color: var(--wine); background: #fff6f4; }.product-choice input { flex: none; margin-top: 2px; }.product-choice strong, .product-choice small { display: block; }.product-choice strong { font-size: 14px; }.product-choice small { margin-top: 5px; color: var(--muted); font-size: 12px; }
.selected-products { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }.selected-product-card { padding: 17px; border: 1px solid var(--line); border-radius: 11px; background: #fffdfa; }.selected-product-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 16px; }.text-danger { padding: 6px; border: 0; color: #a3273c; background: transparent; cursor: pointer; font-size: 13px; }
.selected-product-facts { display: grid; gap: 3px; margin: 10px 0 15px; color: var(--muted); }.selected-product-price { color: var(--wine); font-size: 20px; font-weight: 800; }.selected-product-card input { max-width: 185px; }
.radio-row ul { display: flex; flex-wrap: wrap; gap: 16px; margin: 0 0 15px; padding: 0; list-style: none; }.radio-row label { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }.radio-row input { width: 17px; min-height: 17px; margin: 0; accent-color: var(--wine); }
.check-line > span { display: flex; align-items: center; gap: 9px; }.check-line input { order: 0; }
.price-preview { padding: 19px; border: 1px solid #f2d3ce; border-radius: 11px; color: var(--wine); background: #fff6f3; font-size: 19px; font-weight: 700; }
.list-card > .admin-section-title { margin: 0; padding: 22px 24px; border-bottom: 1px solid var(--line); }.count-pill { padding: 5px 10px; border-radius: 999px; color: var(--wine); background: #f9e9e8; font-weight: 700; }
.data-table { width: 100%; border-collapse: collapse; }.data-table th { color: #6b5b54; font-size: 12px; }.data-table th, .data-table td { padding: 15px; white-space: nowrap; }.data-table td { font-size: 13px; }.data-table .price { display: block; font-size: 16px; }.original-price { margin-right: 8px; color: var(--muted); text-decoration: line-through; }.row-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }.row-actions .secondary-button, .row-actions .danger-button { min-height: 34px; padding: 0 11px; font-size: 12px; }
.status-badge { display: inline-block; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }.status-live { color: #216f4d; background: #e8f6ed; }.status-wait { color: #326988; background: #e7f2f8; }.status-preparing { color: #9b5a14; background: #fff0d8; }.status-off { color: #9c2438; background: #fae8eb; }.status-ended { color: #706b67; background: #efedeb; }.status-method { color: #774d2b; background: #f8eee2; }
.empty-state-admin { display: grid; justify-items: center; gap: 5px; padding: 33px 20px; color: var(--muted); text-align: center; }.empty-state-admin > span { color: #caa99c; font-size: 29px; }.empty-state-admin strong { color: #4a3c35; font-size: 16px; }.empty-state-admin p { max-width: 450px; margin: 0; font-size: 13px; }
.unit-chip-list { display: flex; flex-wrap: wrap; gap: 9px; }.unit-chip { padding: 8px 15px; border: 1px solid #ead7ce; border-radius: 999px; color: #7b2835; background: #fff8f4; font-weight: 700; }.inline-form { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }.inline-form .form-field { flex: 1 1 260px; max-width: 350px; }.help-banner { display: grid; gap: 5px; padding: 18px 22px; border: 1px solid #ead8b9; border-radius: 12px; color: #6d4b25; background: #fff8e9; }.help-banner strong { font-size: 15px; }
.summary-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }.summary-card { display: grid; gap: 3px; padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: white; box-shadow: var(--shadow); }.summary-card span, .summary-card small { color: var(--muted); }.summary-card strong { color: var(--wine); font-size: 29px; }.date-shortcuts, .status-filters { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 16px; }.date-shortcuts a, .status-filters a { padding: 7px 12px; border: 1px solid var(--line); border-radius: 8px; color: #624c42; background: #fff; }.date-shortcuts a:hover, .status-filters a.selected { border-color: var(--wine); color: var(--wine); background: #fff4f2; }.status-filters { padding: 18px 24px 0; }
.reservation-card { padding: 20px 24px; border-top: 1px solid var(--line); }.reservation-card-head, .reservation-card-body { display: flex; align-items: start; gap: 10px 15px; flex-wrap: wrap; }.reservation-card-head { justify-content: space-between; }.reservation-card-head strong { margin-right: 10px; }.reservation-card-head small { color: var(--muted); }.reservation-card-body { margin: 15px 0; }.reservation-card-body > div { display: grid; gap: 3px; min-width: 185px; flex: 1; }.reservation-card-body span, .reservation-card-body small { color: var(--muted); font-size: 12px; }.reservation-card-body strong { font-size: 13px; }
.spec-list { display: grid; gap: 12px; margin-bottom: 17px; }.spec-card { padding: 17px; border: 1px solid var(--line); border-radius: 11px; background: #fffdfa; }.spec-card-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }.spec-card-title strong { font-size: 15px; }.spec-card .form-grid { margin: 0; }.image-upload { display: flex; align-items: center; flex-wrap: wrap; gap: 13px; padding: 13px; border: 1px dashed #d8c6ba; border-radius: 10px; color: var(--muted); background: #fdfaf7; }.image-upload img { width: 78px; height: 78px; object-fit: cover; border-radius: 8px; }.image-upload input[type=file] { position: absolute; width: 1px; height: 1px; padding: 0; opacity: 0; }.image-upload .secondary-button { cursor: pointer; }
@media (max-width: 1100px) { .product-choice-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 900px) { .portal-content { padding: 22px; }.admin-fields, .selected-products { grid-template-columns: 1fr; }.summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 640px) { .portal-content { padding: 17px 14px 35px; }.admin-section { padding: 18px; }.product-choice-grid, .summary-grid { grid-template-columns: 1fr; }.list-card > .admin-section-title { padding: 18px; }.action-bar { padding: 18px; }.selection-tools input { flex-basis: 100%; }.discount-buttons button { min-width: 60px; }.admin-intro h2 { font-size: 22px; } }

/* Phase 9.1B: staff roles, protected location and storefront-style preview. */
.staff-role-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.staff-role-card { display: flex; align-items: flex-start; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: #fffdfa; cursor: pointer; }
.staff-role-card:has(input:checked) { border-color: var(--wine); background: #fff4f2; box-shadow: 0 0 0 2px rgba(167,25,48,.06); }
.staff-role-card input { width: 18px; min-height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--wine); }
.staff-role-card strong, .staff-role-card small { display: block; }.staff-role-card strong { color: #342620; font-size: 15px; }.staff-role-card small { margin-top: 5px; color: var(--muted); line-height: 1.55; }
.role-error { margin: 10px 24px 0; }.badge.role-super { color: #7f241e; background: #f8e0b7; }.badge.role-admin { color: #9b2133; background: #fbe7ea; }.protected-account { color: var(--muted); }
.settings-layout--wide { grid-template-columns: minmax(0,1.85fr) minmax(330px,.85fr); gap: 24px; }.settings-column { display: grid; gap: 22px; }.check-card { padding: 13px 14px; border: 1px solid #eee3dc; border-radius: 10px; background: #fdfaf7; }.check-card .check-line { display: flex; align-items: center; gap: 9px; margin: 0; color: #55443c; font-weight: 600; }.check-card .check-line input { width: 18px; min-height: 18px; }
.location-warning, .location-readonly { margin-bottom: 18px; padding: 16px 18px; border-radius: 11px; }.location-warning { display: grid; gap: 4px; color: #754613; border: 1px solid #edd2a7; background: #fff8e8; }.location-warning span { font-size: 13px; }
.location-readonly { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border: 1px solid #eadfd7; background: #fbf8f5; }.location-readonly div { padding: 12px; border-radius: 9px; background: white; }.location-readonly span, .location-readonly strong { display: block; }.location-readonly span { color: var(--muted); font-size: 12px; }.location-readonly strong { margin-top: 5px; font-size: 16px; }.location-readonly p { grid-column: 1/-1; margin: 0; color: #7b5544; font-size: 13px; }
.restore-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 24px; }.restore-card h3, .restore-card p { margin: 0; }.restore-card h3 { font-size: 17px; }.restore-card p { margin-top: 5px; color: var(--muted); font-size: 13px; }.restore-card .danger-button { flex: none; }
.restore-dialog { width: min(520px,calc(100vw - 32px)); padding: 0; border: 0; border-radius: 16px; color: var(--ink); box-shadow: 0 25px 80px rgba(46,24,17,.26); }.restore-dialog::backdrop { background: rgba(35,21,17,.48); }.restore-dialog form { padding: 26px; }.restore-dialog h3 { margin: 0 0 10px; font-size: 21px; }.restore-dialog ul { margin: 8px 0 18px; padding-left: 22px; line-height: 1.7; }.restore-safe { padding: 14px; border-radius: 10px; background: #f4f8f2; color: #315d3f; }.restore-safe p { margin: 4px 0 0; font-size: 13px; }.restore-dialog .row-actions { justify-content: flex-end; margin-top: 20px; }
.settings-preview { min-width: 0; }.settings-preview > span { font-size: 13px; font-weight: 700; }.mini-phone { width: min(100%,370px); overflow: hidden; margin: 0 auto; border: 8px solid #2f2623; border-radius: 30px; background: #fffcf7; box-shadow: 0 18px 44px rgba(68,37,28,.2); }.mini-brand { padding: 22px 18px 14px; color: #fff7e8; background: linear-gradient(110deg,#9f1d12,#ac2016); }.mini-brand strong, .mini-brand small { display: block; font-family: "STKaiti","KaiTi",serif; }.mini-brand strong { overflow: hidden; font-size: 21px; text-overflow: ellipsis; white-space: nowrap; }.mini-brand small { margin-top: 4px; font-size: 12px; letter-spacing: 1px; }
.mini-hero { display: flex; height: 150px; flex-direction: column; justify-content: center; padding: 18px 22px; color: #fffbed; background-position: center; background-size: cover; }.mini-hero b { font-family: "STKaiti","KaiTi",serif; font-size: 31px; line-height: 1.05; text-shadow: 0 2px 4px #281909; }.mini-hero span { width: max-content; max-width: 100%; margin-top: 12px; padding: 5px 8px; background: #b51d13; font-size: 10px; font-weight: 700; }
.mini-body { padding: 8px; }.mini-benefits { display: grid; grid-template-columns: repeat(3,1fr); padding: 11px 4px; border-radius: 12px; background: #fff7ec; text-align: center; }.mini-benefits span { color: #3b302b; font-size: 11px; font-weight: 700; }.mini-benefits small { display: block; margin-top: 2px; color: #777069; font-size: 9px; font-weight: 400; }
.mini-schedule { margin-top: 8px; padding: 11px; border-radius: 12px; background: linear-gradient(110deg,#ffede4,#fff3ed); }.mini-schedule header, .mini-section header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.mini-schedule header strong, .mini-section header strong { font-size: 13px; }.mini-schedule header small, .mini-section header small { color: #7c736e; font-size: 9px; }.mini-schedule > div { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 9px; }.mini-schedule > div span { padding: 7px; border-radius: 8px; background: rgba(255,255,255,.86); font-size: 9px; }.mini-schedule b { display: block; margin-top: 3px; color: #b91611; font-size: 12px; }.mini-schedule p { margin: 8px 0 0; color: #775d50; font-size: 9px; }.mini-schedule p[hidden] { display: none; }
.mini-section { margin: 14px 4px 0; }.mini-categories { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; margin-top: 8px; }.mini-categories span { padding: 12px 2px; border-radius: 8px; color: #8c241c; background: linear-gradient(145deg,#f8d8cd,#fff2e9); font-size: 10px; font-weight: 700; text-align: center; }
.mini-products { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-top: 8px; }.mini-products article { overflow: hidden; border-radius: 8px; background: white; box-shadow: 0 2px 8px rgba(79,46,29,.08); }.mini-products i { display: block; height: 48px; background: linear-gradient(145deg,#b9372e,#f0a08a); }.mini-products article:nth-child(2) i { background: linear-gradient(145deg,#e0a07e,#9f231a); }.mini-products article:nth-child(3) i { background: linear-gradient(145deg,#ab281f,#f0b293); }.mini-products b, .mini-products small { display: block; padding: 0 6px; }.mini-products b { margin-top: 5px; font-size: 10px; }.mini-products small { padding-bottom: 6px; color: #8a817b; font-size: 8px; }
.mini-fee { display: flex; justify-content: space-between; gap: 8px; margin: 10px 4px 3px; padding: 9px 10px; border-radius: 9px; color: #9e281f; background: #fff2e9; font-size: 10px; }.mini-tabs { display: grid; grid-template-columns: repeat(4,1fr); padding: 8px 4px 10px; border-top: 1px solid #eee4dd; background: white; text-align: center; }.mini-tabs span { color: #777; font-size: 15px; }.mini-tabs small { display: block; margin-top: 2px; font-size: 9px; }.mini-tabs .active { color: #b51913; }.preview-note { max-width: 370px; margin: 10px auto 0; color: var(--muted); font-size: 11px; text-align: center; }
@media (max-width: 1180px) { .settings-layout--wide { grid-template-columns: minmax(0,1fr) 340px; } }
@media (max-width: 900px) { .settings-layout--wide { grid-template-columns: 1fr; }.settings-preview { position: static; }.staff-role-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .restore-card { align-items: stretch; flex-direction: column; }.restore-card .danger-button { width: 100%; }.location-readonly { grid-template-columns: 1fr; }.location-readonly p { grid-column: auto; } }
.portal-content{max-width:1500px;padding-left:40px;padding-right:40px}.list-page,.dashboard{max-width:1500px}.form-page,.narrow-form{max-width:1280px}.primary-tabs,.segment-tabs{display:flex;gap:8px;align-items:center;margin:0 0 16px;overflow-x:auto}.primary-tabs a,.segment-tabs a,.segment-tabs button,.status-filters button{flex:none;padding:9px 15px;border:1px solid var(--line);border-radius:999px;color:#674f44;background:#fff;cursor:pointer}.primary-tabs a.selected,.segment-tabs a.selected,.segment-tabs button.selected,.status-filters button.selected{border-color:var(--wine);color:#fff;background:var(--wine)}.scroll-tabs{padding-bottom:5px}.admin-filter-stack{display:grid;gap:12px;padding:18px 24px}.admin-filter-stack>input{min-height:44px;padding:0 13px;border:1px solid var(--line);border-radius:9px}.capacity-input{width:120px;min-height:40px;padding:0 10px;border:1px solid var(--line);border-radius:8px}@media(max-width:900px){.portal-content{padding-left:22px;padding-right:22px}}