@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700;800&display=swap');

:root { --ink:#171719; --muted:#797a7d; --line:#e9e9e5; --paper:#fbfbf8; --white:#fff; --yellow:#f4df42; --yellow-deep:#e4ca2e; --green:#1a9b68; --green-soft:#e8f6ef; --orange:#f4774e; --purple:#8474d9; --shadow:0 10px 35px rgba(34,33,20,.06); }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:#f4f4ef; font-family:'DM Sans',sans-serif; font-size:14px; -webkit-font-smoothing:antialiased; }
button,input { font:inherit; } button { cursor:pointer; border:0; } button:focus-visible,input:focus-visible { outline:3px solid rgba(26,155,104,.3); outline-offset:2px; }
.app-shell { min-height:100vh; display:flex; }
.sidebar { width:238px; flex:none; min-height:100vh; background:var(--white); border-right:1px solid var(--line); display:flex; flex-direction:column; padding:26px 16px 20px; }
.brand-lockup { display:flex; align-items:center; gap:10px; padding:0 9px 26px; }
.brand-logo-wrap { width:43px; height:43px; border-radius:50%; overflow:hidden; border:2px solid var(--ink); background:var(--yellow); flex:none; }
.brand-logo { width:100%; height:100%; object-fit:cover; }
.brand-copy { display:flex; flex-direction:column; line-height:1.05; }
.brand-copy strong { font-family:'Playfair Display',serif; font-size:17px; letter-spacing:-.6px; }
.brand-kicker { font-size:8px; text-transform:uppercase; letter-spacing:1.35px; color:#5b5b58; margin-bottom:4px; }
.nav-label,.section-eyebrow { color:#a1a19b; font-size:9px; font-weight:700; letter-spacing:1.3px; text-transform:uppercase; }
.nav-label { padding:4px 12px 10px; }
.main-nav { display:flex; flex-direction:column; gap:4px; }
.nav-item { display:flex; align-items:center; gap:12px; width:100%; color:#6f706e; background:transparent; border-radius:10px; padding:11px 12px; text-align:left; transition:.2s ease; }
.nav-item:hover { color:var(--ink); background:#faf9e9; }.nav-item.active { background:var(--yellow); color:var(--ink); font-weight:700; }.nav-icon { width:17px; text-align:center; font-size:17px; line-height:1; }.nav-count { margin-left:auto; font-size:11px; color:#79713b; background:rgba(255,255,255,.55); border-radius:99px; padding:2px 7px; }.sidebar-spacer { flex:1; min-height:40px; }
.help-card { display:flex; gap:9px; align-items:flex-start; background:#f5f8ec; border-radius:12px; padding:13px 11px; margin:0 4px 20px; }.help-icon { width:21px; height:21px; display:grid; place-items:center; border-radius:50%; color:white; background:var(--green); font-size:12px; }.help-card strong { font-size:11px; }.help-card p { margin:4px 0 0; color:#888982; font-size:10px; }.arrow { margin-left:auto; color:var(--green); font-size:14px; }.profile-row { border-top:1px solid var(--line); padding:17px 5px 0; display:flex; align-items:center; gap:9px; }.avatar { width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:var(--yellow); font-weight:700; font-size:12px; }.profile-row strong,.profile-row span { display:block; }.profile-row strong { font-size:11px; }.profile-row span { color:#92938e; font-size:10px; margin-top:3px; }.more-btn { margin-left:auto; color:#9d9d98; background:transparent; letter-spacing:1px; }
.content-area { flex:1; min-width:0; }.topbar { height:74px; background:var(--white); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 42px; }.breadcrumb { display:flex; align-items:center; gap:9px; color:#a0a09b; font-size:12px; }.breadcrumb b { font-weight:400; color:#d2d2cb; }.breadcrumb strong { color:var(--ink); font-weight:600; }.top-actions { display:flex; align-items:center; gap:20px; }.icon-btn { position:relative; color:#6f706c; background:transparent; font-size:22px; }.notification-btn i { position:absolute; width:5px; height:5px; border-radius:50%; background:var(--orange); right:-2px; top:1px; }.date-chip { display:flex; align-items:center; gap:9px; color:#676863; border:1px solid var(--line); background:white; border-radius:8px; padding:9px 11px; font-size:11px; }.date-chip b { color:#abab9f; font-size:12px; }.calendar-icon { color:var(--green); font-size:15px; }.mobile-brand { display:none; }
.page-content { padding:31px 42px 42px; max-width:1520px; margin:0 auto; }.welcome-row { display:flex; justify-content:space-between; align-items:end; margin-bottom:27px; }.eyebrow { display:flex; align-items:center; gap:7px; color:#9b9b93; font-size:10px; text-transform:uppercase; letter-spacing:1.15px; font-weight:700; }.eyebrow-dot { width:6px; height:6px; border-radius:50%; background:var(--green); }.welcome-row h1 { margin:9px 0 5px; font:700 30px/1.1 'Playfair Display',serif; letter-spacing:-1px; }.wave { display:inline-block; color:var(--yellow-deep); font-size:24px; transform:rotate(20deg); }.welcome-row p { margin:0; color:var(--muted); font-size:13px; }.primary-btn { background:var(--ink); color:white; border-radius:9px; padding:13px 16px; font-weight:700; transition:.2s; box-shadow:0 4px 0 #3c3c3c; }.primary-btn:hover { transform:translateY(-1px); box-shadow:0 5px 0 #3c3c3c; }.small-btn { font-size:11px; padding:11px 14px; }.small-btn span { font-size:16px; vertical-align:-1px; margin-right:2px; }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin-bottom:17px; }.stat-card { min-height:130px; padding:17px 18px; background:var(--white); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); }.stat-card.yellow-stat { background:var(--yellow); border-color:transparent; }.stat-top { display:flex; justify-content:space-between; color:#7c7d76; font-size:11px; }.yellow-stat .stat-top { color:#65602b; }.stat-icon { width:23px; height:23px; display:grid; place-items:center; border-radius:7px; background:#f5f5ef; color:#777771; font-size:13px; font-weight:700; }.yellow-stat .stat-icon { background:rgba(255,255,255,.45); color:#474520; }.green-icon { color:var(--green); background:var(--green-soft); font-size:9px; }.orange-icon { color:var(--orange); background:#fff0e9; }.purple-icon { color:var(--purple); background:#eeebff; }.stat-card > strong { display:block; margin:15px 0 10px; font-size:22px; letter-spacing:-.8px; }.stat-card strong small { font-size:12px; color:#8d8d87; font-weight:500; letter-spacing:0; }.stat-foot { display:flex; gap:6px; align-items:center; font-size:10px; }.stat-foot span { font-weight:700; }.stat-foot em { color:#9b9b95; font-style:normal; }.positive span { color:var(--green); }.warning span { color:var(--orange); }.yellow-stat .stat-foot em { color:#7d7638; }
.workspace-grid { display:grid; grid-template-columns:minmax(0,1.64fr) minmax(320px,.86fr); gap:17px; align-items:start; }.panel-card { background:var(--white); border:1px solid var(--line); border-radius:13px; box-shadow:var(--shadow); }.catalog-panel { padding:24px 24px 23px; }.panel-heading { display:flex; justify-content:space-between; align-items:flex-start; }.panel-heading h2,.cart-heading h2 { margin:7px 0 3px; font:700 20px/1.1 'Playfair Display',serif; letter-spacing:-.4px; }.panel-heading p { margin:0; color:#999a94; font-size:11px; }.ghost-btn { background:transparent; color:#777873; padding:7px 0; font-size:11px; }.ghost-btn span,.text-btn span { color:var(--green); font-size:16px; margin-left:7px; vertical-align:-1px; }.order-controls { display:flex; gap:18px; padding:20px 0 17px; margin-top:16px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.date-field,.meal-field { display:flex; flex-direction:column; gap:7px; }.date-field { width:166px; flex:none; }.date-field > span,.meal-field > span { color:#969791; font-size:10px; font-weight:600; }.input-shell { height:35px; display:flex; align-items:center; gap:7px; border:1px solid var(--line); border-radius:7px; padding:0 9px; color:var(--green); }.input-shell input { border:0; outline:0; min-width:0; width:100%; color:#50514e; font-size:11px; background:transparent; }.input-shell b { color:#aaa; font-size:10px; }.meal-field { flex:1; }.meal-tabs { display:flex; gap:6px; }.meal-tab { display:flex; align-items:center; justify-content:center; gap:6px; color:#858680; background:#f8f8f4; border:1px solid transparent; border-radius:7px; height:35px; padding:0 15px; font-size:11px; }.meal-tab span { font-size:15px; color:#b9b9b0; }.meal-tab.active { color:var(--ink); background:#fffbea; border-color:var(--yellow-deep); font-weight:700; }.meal-tab.active span { color:#c29d13; }.category-row { display:flex; gap:8px; overflow-x:auto; padding:17px 0 18px; scrollbar-width:none; }.category-row::-webkit-scrollbar { display:none; }.category-pill { white-space:nowrap; border-radius:99px; border:1px solid var(--line); color:#858680; background:var(--white); padding:7px 10px; font-size:10px; }.category-pill span { color:#aaa; margin-left:3px; }.category-pill.active { background:var(--ink); border-color:var(--ink); color:white; }.category-pill.active span { color:#eee; }
.menu-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; }.menu-card { border:1px solid var(--line); border-radius:10px; overflow:hidden; background:white; transition:.2s; }.menu-card:hover { transform:translateY(-2px); box-shadow:0 7px 18px rgba(33,32,19,.09); border-color:#dfdcbf; }.food-visual { height:102px; display:grid; place-items:center; position:relative; overflow:hidden; }.food-visual:before,.food-visual:after { content:''; position:absolute; width:110px; height:110px; border-radius:50%; border:1px solid rgba(255,255,255,.42); }.food-visual:before { transform:translate(-38px,-16px); }.food-visual:after { transform:translate(40px,18px); }.food-emoji { position:relative; z-index:1; font-size:45px; filter:drop-shadow(0 8px 6px rgba(0,0,0,.12)); }.visual-yellow { background:#f5df70; }.visual-green { background:#bcdcae; }.visual-peach { background:#f8c5a9; }.visual-lilac { background:#d1c5e9; }.visual-orange { background:#f4b37f; }.visual-mint { background:#b4ded3; }.menu-info { padding:11px 11px 12px; }.menu-label { display:flex; justify-content:space-between; align-items:center; color:#8c8d86; font-size:9px; }.menu-label span:first-child { color:var(--green); }.halal { font-size:9px; color:var(--green); font-weight:700; }.menu-info h3 { margin:7px 0 4px; font-size:12px; letter-spacing:-.15px; }.menu-info p { margin:0; color:#999a93; font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.menu-bottom { display:flex; align-items:center; justify-content:space-between; margin-top:11px; }.menu-price { font-weight:700; font-size:12px; }.add-menu-btn { width:24px; height:24px; display:grid; place-items:center; border-radius:7px; background:var(--yellow); color:var(--ink); font-size:18px; line-height:1; font-weight:600; transition:.2s; }.add-menu-btn:hover { background:var(--ink); color:white; }
.cart-panel { padding:24px 21px 19px; position:sticky; top:17px; }.cart-heading { display:flex; align-items:flex-start; justify-content:space-between; }.cart-heading h2 { display:flex; align-items:center; gap:7px; }.cart-heading h2 span { display:inline-grid; place-items:center; min-width:18px; height:18px; background:var(--yellow); border-radius:50%; font:700 10px 'DM Sans'; }.clear-btn { color:#bbbcb7; background:transparent; font-size:10px; padding-top:5px; }.cart-context { display:flex; align-items:center; gap:10px; background:#f8f8f3; border-radius:9px; padding:11px; margin:19px 0 14px; }.context-icon { width:27px; height:27px; display:grid; place-items:center; border-radius:8px; background:var(--yellow); font-size:15px; }.cart-context strong,.cart-context span { display:block; }.cart-context strong { font-size:10px; }.cart-context span { color:#9c9d96; font-size:9px; margin-top:4px; }.cart-context button { margin-left:auto; color:var(--green); background:transparent; font-size:14px; }.cart-items { min-height:104px; }.cart-item { display:grid; grid-template-columns:39px 1fr auto; gap:9px; align-items:center; padding:10px 0; border-bottom:1px solid #f1f1ed; }.cart-thumb { width:39px; height:39px; display:grid; place-items:center; border-radius:8px; font-size:20px; }.cart-item strong,.cart-item span { display:block; }.cart-item strong { font-size:11px; }.cart-item .item-meta { color:#a2a29b; font-size:9px; margin-top:3px; }.item-price { text-align:right; font-size:11px; font-weight:700; }.qty-control { display:flex; align-items:center; gap:7px; margin-top:7px; }.qty-control button { width:18px; height:18px; border-radius:5px; background:#f0f0ea; color:#676863; font-size:14px; line-height:1; }.qty-control span { font-size:10px; color:#676863; }.empty-cart { display:none; min-height:100px; text-align:center; padding:16px 0 12px; color:#92938c; }.empty-cart.visible { display:block; }.empty-cart-icon { width:28px; height:28px; margin:0 auto 7px; border-radius:50%; display:grid; place-items:center; background:#f4f4ef; color:#bbbcb5; font-size:18px; }.empty-cart strong { color:#666762; font-size:11px; }.empty-cart p { font-size:10px; margin:4px 0; }.cart-summary { border-top:1px solid var(--line); margin-top:11px; padding-top:14px; }.cart-summary > div { display:flex; justify-content:space-between; color:#969791; font-size:10px; margin-bottom:9px; }.cart-summary strong { color:#595a55; font-size:10px; }.cart-summary .total-row { color:var(--ink); margin-top:14px; margin-bottom:15px; }.total-row strong { color:var(--ink); font-size:17px; }.checkout-btn { width:100%; display:flex; justify-content:space-between; align-items:center; border-radius:8px; color:var(--ink); background:var(--yellow); padding:13px 14px; font-size:11px; font-weight:700; transition:.2s; }.checkout-btn:hover { background:var(--yellow-deep); }.checkout-btn span { font-size:17px; }.secure-note { text-align:center; color:#aeafa9; font-size:9px; margin:12px 0 0; }.secure-note span { color:var(--green); font-weight:700; margin-right:3px; }
.bottom-grid { display:grid; grid-template-columns:minmax(0,1.64fr) minmax(320px,.86fr); gap:17px; margin-top:17px; }.mini-orders { padding:22px 24px 12px; }.order-list { margin-top:12px; }.order-row { display:flex; align-items:center; min-height:57px; border-top:1px solid #f1f1ed; gap:10px; }.order-avatar { width:30px; height:30px; flex:none; display:grid; place-items:center; border-radius:50%; font-size:9px; font-weight:700; }.peach { background:#ffd4bf; color:#a35338; }.mint { background:#c7ebdd; color:#2e7c62; }.lilac { background:#ddd5f5; color:#6554a1; }.order-info { flex:1; min-width:0; }.order-info strong,.order-info span { display:block; }.order-info strong { font-size:11px; }.order-info span { color:#a3a39b; font-size:9px; margin-top:3px; }.order-price { font-size:10px; font-weight:700; min-width:70px; text-align:right; }.status { border-radius:99px; padding:5px 8px; font-size:9px; min-width:62px; text-align:center; }.status.ready { color:var(--green); background:var(--green-soft); }.status.cooking { color:#b7731c; background:#fff4d6; }.status.pending { color:#7d70bd; background:#f0edff; }.tip-card { padding:22px 23px; background:var(--ink); color:white; position:relative; overflow:hidden; }.tip-card:after { content:''; position:absolute; width:160px; height:160px; border:1px solid rgba(244,223,66,.35); border-radius:50%; right:-68px; bottom:-74px; }.tip-mark { color:var(--yellow); font-size:22px; margin-bottom:10px; }.tip-card .section-eyebrow { color:#aaa99d; }.tip-card h3 { margin:9px 0 7px; font:700 19px/1.15 'Playfair Display',serif; max-width:220px; }.tip-card p { color:#aeaea7; line-height:1.55; font-size:10px; max-width:260px; margin:0 0 13px; }.text-btn { background:transparent; color:var(--yellow); padding:0; font-size:10px; font-weight:700; position:relative; z-index:1; }
.toast { position:fixed; bottom:24px; left:50%; transform:translate(-50%,20px); opacity:0; pointer-events:none; background:var(--ink); color:white; padding:11px 16px; border-radius:9px; box-shadow:0 8px 25px rgba(0,0,0,.18); font-size:11px; transition:.25s; z-index:20; }.toast.show { opacity:1; transform:translate(-50%,0); }.modal-backdrop { position:fixed; inset:0; display:grid; place-items:center; padding:20px; background:rgba(20,20,18,.45); opacity:0; pointer-events:none; transition:.2s; z-index:30; }.modal-backdrop.open { opacity:1; pointer-events:auto; }.modal-card { width:min(100%,390px); background:white; border-radius:16px; padding:28px; position:relative; box-shadow:0 25px 70px rgba(0,0,0,.22); }.modal-close { position:absolute; top:14px; right:17px; background:transparent; color:#a0a09a; font-size:22px; }.modal-icon { width:42px; height:42px; display:grid; place-items:center; background:var(--green-soft); color:var(--green); border-radius:50%; font-size:22px; margin-bottom:17px; }.modal-card h2 { font:700 25px/1.1 'Playfair Display',serif; margin:8px 0; }.modal-card > p { color:#8c8d86; line-height:1.5; font-size:11px; margin:0 0 17px; }.modal-summary { background:#f8f8f3; border-radius:9px; padding:12px; margin-bottom:16px; display:flex; justify-content:space-between; }.modal-summary span,.modal-summary strong { display:block; }.modal-summary span { color:#999a94; font-size:9px; margin-bottom:5px; }.modal-summary strong { font-size:11px; }.modal-summary div:last-child { text-align:right; }.modal-card .checkout-btn { padding:14px; }
@media (max-width:1120px) { .sidebar { width:208px; }.topbar,.page-content { padding-left:27px; padding-right:27px; }.menu-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.stats-grid { grid-template-columns:repeat(2,1fr); }.workspace-grid,.bottom-grid { grid-template-columns:1fr; }.cart-panel { position:static; }.cart-items { display:grid; grid-template-columns:repeat(2,1fr); gap:15px; }.cart-item { border-bottom:0; }.cart-summary { margin-top:5px; }.empty-cart { grid-column:1/-1; } }
@media (max-width:720px) { .sidebar { width:63px; padding:16px 8px; align-items:center; }.brand-lockup { padding:0 0 22px; }.brand-copy,.nav-label,.nav-item > span:not(.nav-icon),.nav-count,.help-card,.profile-row > div:not(.avatar),.more-btn { display:none; }.brand-logo-wrap { width:43px; height:43px; }.nav-item { justify-content:center; padding:12px 0; }.nav-icon { font-size:20px; }.profile-row { border:0; padding:0; }.topbar { height:62px; padding:0 16px; }.breadcrumb { display:none; }.mobile-brand { display:block; }.mobile-brand img { width:34px; height:34px; border-radius:50%; border:1px solid var(--ink); object-fit:cover; }.top-actions { gap:10px; }.date-chip { padding:7px 8px; }.date-chip span:not(.calendar-icon) { display:none; }.page-content { padding:24px 15px 28px; }.welcome-row { align-items:flex-start; flex-direction:column; gap:17px; }.welcome-row h1 { font-size:25px; }.small-btn { align-self:stretch; }.stats-grid { gap:9px; }.stat-card { padding:13px; min-height:115px; }.stat-card > strong { font-size:18px; margin:13px 0 9px; }.stat-foot { display:block; line-height:1.5; }.stat-foot em { display:block; }.catalog-panel,.mini-orders { padding:18px 14px; }.panel-heading h2,.cart-heading h2 { font-size:18px; }.panel-heading p { line-height:1.4; max-width:210px; }.order-controls { display:block; }.date-field { width:100%; }.meal-field { margin-top:12px; }.meal-tab { flex:1; padding:0 5px; }.category-row { margin-right:-14px; }.menu-grid { gap:8px; }.food-visual { height:88px; }.food-emoji { font-size:36px; }.menu-info { padding:9px; }.menu-info h3 { font-size:11px; }.menu-bottom { margin-top:8px; }.menu-price { font-size:10px; }.cart-items { display:block; }.cart-item { border-bottom:1px solid #f1f1ed; }.bottom-grid { gap:12px; }.order-price { display:none; }.status { font-size:8px; min-width:56px; padding:4px 5px; }.mini-orders .ghost-btn { display:none; }.tip-card { padding:20px; } }

/* Subscription management */
.subscription-panel { margin-top:17px; padding:24px; }
.subscription-heading { align-items:center; }
.subscription-actions { display:flex; align-items:center; gap:10px; }
.plan-switch { display:flex; align-items:center; gap:3px; padding:3px; border:1px solid var(--line); border-radius:8px; background:#f8f8f4; }
.plan-tab { padding:8px 11px; border-radius:6px; color:#91928b; background:transparent; font-size:10px; }
.plan-tab.active { color:var(--ink); background:var(--white); box-shadow:0 2px 6px rgba(31,31,18,.08); font-weight:700; }
.subscription-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:19px; padding:13px 0; }
.subscription-metric { display:flex; flex-direction:column; gap:3px; padding-left:14px; border-left:2px solid var(--yellow); }
.subscription-metric:first-child { padding-left:0; border-left:0; }
.subscription-metric strong { font-size:17px; letter-spacing:-.5px; }.subscription-metric span { color:#9b9c94; font-size:10px; }
.subscription-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:14px; }
.subscription-card { min-width:0; display:grid; grid-template-columns:34px minmax(0,1fr) auto; column-gap:9px; row-gap:3px; align-items:center; padding:11px; border:1px solid var(--line); border-radius:9px; }
.subscription-avatar { grid-row:span 2; width:34px; height:34px; display:grid; place-items:center; border-radius:50%; font-weight:700; font-size:9px; }.subscription-avatar.mint { background:#c7ebdd; color:#2e7c62; }.subscription-avatar.peach { background:#ffd4bf; color:#a35338; }.subscription-avatar.lilac { background:#ddd5f5; color:#6554a1; }.subscription-avatar.yellow { background:#fff0a5; color:#8c7515; }
.subscription-customer strong,.subscription-customer span,.subscription-next span,.subscription-next strong { display:block; }.subscription-customer strong { font-size:11px; }.subscription-customer span { color:#999a93; font-size:9px; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.subscription-next { text-align:right; }.subscription-next span { color:#aaa9a0; font-size:8px; }.subscription-next strong { font-size:9px; margin-top:3px; }.subscription-status { grid-column:2; justify-self:start; color:var(--green); background:var(--green-soft); border-radius:99px; padding:4px 7px; font-size:8px; margin-top:5px; }.manage-subscription { grid-column:3; grid-row:2; color:var(--green); background:transparent; font-size:9px; font-weight:700; }.manage-subscription span { font-size:13px; margin-left:4px; vertical-align:-1px; }.subscription-note { display:flex; align-items:center; gap:9px; margin-top:15px; padding:10px 12px; background:#fffbea; border-radius:8px; }.subscription-note > span { color:#d2af18; font-size:16px; }.subscription-note p { margin:0; color:#94948c; font-size:9px; line-height:1.45; }.subscription-note strong { color:#67675f; }
@media (max-width:720px) { .subscription-panel { padding:18px 14px; }.subscription-heading { display:block; }.subscription-actions { margin-top:15px; display:block; }.plan-switch { display:inline-flex; }.subscription-actions .small-btn { display:inline-block; margin-left:6px; padding:9px 10px; }.subscription-list { grid-template-columns:1fr; }.subscription-card { grid-template-columns:34px minmax(0,1fr) auto; }.subscription-next { display:none; } }

/* Authentication and customer portal */
.auth-screen { min-height:100vh; display:grid; place-items:center; padding:28px; background:radial-gradient(circle at 8% 12%,#fff6ad 0,transparent 30%),#f5f4ed; }
.auth-brand { position:absolute; top:28px; left:34px; display:flex; align-items:center; gap:10px; }.auth-brand > div:last-child { display:flex; flex-direction:column; line-height:1; }.auth-brand strong { font:700 17px 'Playfair Display',serif; }.auth-layout { width:min(960px,100%); display:grid; grid-template-columns:1fr 390px; gap:54px; align-items:center; }.auth-intro { padding:32px 0; }.auth-ring { width:78px; height:78px; display:grid; place-items:center; border:1px solid var(--ink); border-radius:50%; color:var(--ink); background:var(--yellow); font-size:29px; margin-bottom:29px; box-shadow:10px 10px 0 rgba(23,23,25,.08); }.auth-intro h1 { max-width:480px; margin:13px 0 15px; font:700 clamp(37px,5vw,61px)/.98 'Playfair Display',serif; letter-spacing:-2px; }.auth-intro p { max-width:430px; color:#777871; font-size:14px; line-height:1.65; }.auth-perks { display:flex; flex-wrap:wrap; gap:9px; margin-top:27px; }.auth-perks span { color:#5d655d; background:rgba(255,255,255,.8); border:1px solid #e5e4d9; border-radius:99px; padding:8px 10px; font-size:10px; }.auth-card { background:var(--white); border:1px solid var(--line); border-radius:18px; padding:29px; box-shadow:0 20px 55px rgba(34,33,20,.1); }.auth-card-heading h2 { margin:8px 0 5px; font:700 26px/1.1 'Playfair Display',serif; }.auth-card-heading p { margin:0 0 20px; color:#92938d; font-size:11px; }.auth-role-switch { display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; margin-bottom:20px; border-radius:8px; background:#f5f5ef; }.auth-role { padding:9px; border-radius:6px; background:transparent; color:#91928b; font-size:11px; }.auth-role.active { color:var(--ink); background:white; font-weight:700; box-shadow:0 2px 7px rgba(31,31,18,.08); }.auth-card label,.profile-form label { display:block; color:#75766f; font-size:10px; font-weight:600; margin-bottom:13px; }.auth-card input,.profile-form input { width:100%; border:1px solid var(--line); border-radius:8px; padding:11px 12px; color:var(--ink); background:#fcfcf9; margin-top:6px; font-size:11px; }.auth-submit { margin-top:5px; }.login-error { min-height:15px; color:#c45a3a; font-size:10px; margin:9px 0 0; }.demo-box { display:flex; align-items:center; gap:9px; margin-top:16px; padding:11px; border-radius:9px; background:#fffbea; }.demo-box > div { flex:1; min-width:0; }.demo-label { align-self:flex-start; color:#b59917; font-size:8px; font-weight:700; letter-spacing:1px; writing-mode:vertical-rl; }.demo-box strong,.demo-box span { display:block; }.demo-box strong { color:#69675b; font-size:10px; }.demo-box span:not(.demo-label) { color:#a3a39a; font-size:9px; margin-top:3px; }.demo-box button { color:var(--green); background:transparent; font-size:10px; font-weight:700; }.auth-footnote { color:#a0a09a; font-size:10px; text-align:center; margin:19px 0 0; }.auth-footnote button { color:var(--green); background:transparent; font-weight:700; font-size:10px; }
.logout-link { color:#8f9089; background:transparent; font-size:10px; padding:8px 0; }.logout-link:hover { color:var(--orange); }.customer-shell { min-height:100vh; background:#f4f4ef; }.customer-topbar { height:74px; display:flex; align-items:center; justify-content:space-between; padding:0 6vw; background:white; border-bottom:1px solid var(--line); }.customer-topbar .brand-lockup { padding:0; }.customer-user { display:flex; align-items:center; gap:12px; color:#65665f; font-size:11px; }.customer-main { width:min(1050px,calc(100% - 48px)); margin:0 auto; padding:44px 0 60px; }.customer-welcome h1 { margin:10px 0 5px; font:700 35px/1.1 'Playfair Display',serif; letter-spacing:-1px; }.customer-welcome p { margin:0; color:#888983; font-size:13px; }.customer-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:28px; }.customer-profile,.customer-next,.customer-subscription,.customer-history { padding:23px; }.profile-hero { display:flex; align-items:center; gap:10px; padding-bottom:17px; border-bottom:1px solid var(--line); }.customer-avatar-large { width:45px; height:45px; display:grid; place-items:center; background:var(--yellow); border-radius:50%; font-size:17px; font-weight:700; }.profile-hero h2 { margin:5px 0 4px; font:700 19px 'Playfair Display',serif; }.profile-hero .ghost-btn { margin-left:auto; }.profile-status { color:var(--green); font-size:9px; }.profile-form { display:grid; grid-template-columns:1fr 1fr; column-gap:11px; padding-top:18px; }.profile-form label:last-of-type { grid-column:1/-1; }.profile-form .small-btn { grid-column:1/-1; justify-self:start; margin-top:2px; }.customer-order-status { color:var(--green); background:var(--green-soft); border-radius:99px; padding:6px 8px; font-size:9px; }.customer-next h2 { margin:7px 0 3px; font:700 22px 'Playfair Display',serif; }.customer-next .panel-heading p { font-size:10px; }.customer-order-items { border-top:1px solid var(--line); margin-top:18px; padding-top:5px; }.customer-order-items > div { display:flex; align-items:center; gap:9px; padding:10px 0; border-bottom:1px solid #f1f1ed; }.customer-food-icon { width:35px; height:35px; display:grid; place-items:center; border-radius:8px; font-size:20px; }.customer-order-items > div > div { flex:1; }.customer-order-items strong,.customer-order-items span { display:block; }.customer-order-items strong { font-size:11px; }.customer-order-items span { color:#9a9b94; font-size:9px; margin-top:3px; }.customer-order-items b { font-size:10px; }.customer-total { display:flex; justify-content:space-between; align-items:center; padding:15px 0; color:#90918a; font-size:10px; }.customer-total strong { color:var(--ink); font-size:16px; }.customer-subscription,.customer-history { margin-top:16px; }.subscription-status { color:var(--green); background:var(--green-soft); border-radius:99px; padding:6px 9px; font-size:9px; }.customer-subscription-grid { display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:14px; margin-top:19px; padding-top:16px; border-top:1px solid var(--line); align-items:end; }.customer-subscription-grid span,.customer-subscription-grid strong { display:block; }.customer-subscription-grid span { color:#9b9c95; font-size:9px; margin-bottom:5px; }.customer-subscription-grid strong { font-size:11px; }.customer-subscription-grid .ghost-btn { color:var(--green); padding:0; }.customer-history-row { display:grid; grid-template-columns:55px 1fr auto 72px; gap:10px; align-items:center; padding:13px 0; border-top:1px solid #f1f1ed; }.history-date { color:#9b9c95; font-size:10px; }.customer-history-row strong,.customer-history-row span { display:block; }.customer-history-row div strong { font-size:11px; }.customer-history-row div span { color:#9b9c95; font-size:9px; margin-top:3px; }.customer-history-row > strong { font-size:10px; }.customer-history-row .status { justify-self:end; }
@media (max-width:720px) { .auth-screen { padding:23px 15px; align-items:end; }.auth-brand { top:18px; left:18px; }.auth-layout { display:block; padding-top:62px; }.auth-intro { padding:8px 6px 26px; }.auth-ring { width:52px; height:52px; font-size:20px; margin-bottom:18px; }.auth-intro h1 { font-size:36px; letter-spacing:-1.2px; }.auth-intro p { font-size:12px; }.auth-perks { display:none; }.auth-card { padding:22px 18px; }.customer-topbar { height:64px; padding:0 15px; }.customer-topbar .brand-copy { display:none; }.customer-user > span { display:none; }.customer-main { width:calc(100% - 30px); padding:28px 0 40px; }.customer-welcome h1 { font-size:28px; }.customer-grid { grid-template-columns:1fr; margin-top:22px; }.customer-profile,.customer-next,.customer-subscription,.customer-history { padding:17px 15px; }.customer-subscription-grid { grid-template-columns:1fr 1fr; }.customer-subscription-grid .ghost-btn { grid-column:1/-1; justify-self:start; }.customer-history-row { grid-template-columns:45px 1fr auto; }.customer-history-row .status { display:none; }.customer-history-row > strong { font-size:9px; }.top-actions { gap:10px; }.top-actions .logout-link { display:none; } }

/* Registration and login forms toggle without disturbing Manus layout. */
#registration-form[hidden], #login-form[hidden] { display: none !important; }
#registration-form { display: grid; gap: 12px; margin-top: 20px; }
#registration-form label { display: grid; gap: 6px; }
#registration-form input { width: 100%; max-width: 100%; }

/* Honest empty states until live menu, order, and subscription APIs are enabled. */
.empty-data-message { margin: 12px 0; padding: 24px; color: #77776e; background: #f8f7f2; border: 1px dashed #deddd4; border-radius: 14px; line-height: 1.6; text-align: center; }
.menu-grid > .empty-data-message { grid-column: 1 / -1; }

/* Live owner menu manager, isolated from the customer layout. */
#menu-manager[hidden] { display: none !important; }
.menu-manager { padding: 18px; margin-bottom: 22px; background: #fbfaf5; border: 1px solid #e6e2d7; border-radius: 16px; }
.menu-editor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.menu-editor label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: #655f54; }
.menu-editor input:not([type="checkbox"]), .menu-editor textarea { width: 100%; box-sizing: border-box; background: #fff; border: 1px solid #dfddd3; border-radius: 9px; padding: 12px; font: inherit; color: #201f1c; }
.menu-editor-wide { grid-column: 1 / -1; }
.menu-editor .menu-available { flex-direction: row; align-items: center; }
.menu-editor-actions { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; }
.menu-management-list { margin-top: 20px; display: grid; gap: 8px; }
.menu-manage-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px; border: 1px solid #e6e2d7; background: #fff; border-radius: 12px; }
.menu-manage-item div { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.menu-manage-item strong { overflow-wrap: anywhere; }
.menu-manage-item span { color: #6f6b60; font-size: 12px; }
.unavailable-label { color: #9a5c48; font-size: 12px; }
@media (max-width: 700px) { .menu-editor { grid-template-columns: 1fr; } .menu-editor-wide, .menu-editor-actions { grid-column: 1; } }

/* Transactional order panels (staging; payments not enabled). */
.order-workflow { margin: 22px 0; padding: 24px; }
.order-workflow-row { display: flex; justify-content: space-between; gap: 18px; padding: 16px 0; border-top: 1px solid #eae6dd; }
.order-workflow-row > div { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.order-workflow-row span { color: #756e62; font-size: 12px; overflow-wrap: anywhere; }
.order-workflow-row strong { font-size: 15px; }
.order-status-action { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.order-status-action select, .customer-order-form input, .customer-order-form select { border: 1px solid #dfddd4; border-radius: 10px; padding: 10px; background: white; color: #24221e; font: inherit; }
.customer-order-panel { padding: 24px; margin-top: 20px; }
.customer-order-menu { display: grid; gap: 8px; margin: 20px 0; }
.customer-order-menu-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #e8e4db; border-radius: 12px; padding: 14px; }
.customer-order-menu-row > div:first-child { display: flex; flex-direction: column; gap: 6px; }
.customer-order-menu-row span, .customer-address-note { font-size: 12px; color: #777164; }
.order-qty-controls { display: flex; align-items: center; gap: 12px; }
.order-qty-controls button { width: 30px; height: 30px; background: #f6e34b; border: 0; border-radius: 7px; cursor: pointer; }
.customer-order-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.customer-order-form label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.customer-order-summary, .customer-address-note, .customer-order-form button[type="submit"] { grid-column: 1 / -1; }
.customer-order-summary { padding: 14px; background: #f8f7f2; border-radius: 10px; }
@media(max-width:700px) { .order-workflow-row,.customer-order-menu-row { flex-direction: column; align-items: stretch; } .customer-order-form { grid-template-columns: 1fr; } }

/* Owner workspace: live operations first; prototype cart is not an owner workflow. */
#admin-view .workspace-grid { grid-template-columns: minmax(0, 1fr); }
#admin-view .cart-panel,
#admin-view .order-controls,
#admin-view .category-row,
#admin-view #menu-grid { display: none !important; }
#admin-view .catalog-heading { margin-bottom: 16px; }
#admin-view #owner-orders-panel { margin: 18px 0 22px; }
#admin-view .owner-recent-order { display:flex; justify-content:space-between; gap:16px; padding:13px 0; border-top:1px solid #eeeae2; }
#admin-view .owner-recent-order > div { display:flex; flex-direction:column; gap:5px; min-width:0; }
#admin-view .owner-recent-order > div:last-child { text-align:right; }
#admin-view .owner-recent-order strong { font-size:12px; overflow-wrap:anywhere; }
#admin-view .owner-recent-order span { font-size:10px; color:#84857f; }
@media(max-width:720px) {
  #admin-view .owner-recent-order { gap:8px; }
  #admin-view .order-workflow { padding:18px 14px; }
}


/* Owner order triage: keep status filters readable on desktop and mobile. */
.owner-order-filters { display:flex; align-items:end; justify-content:space-between; flex-wrap:wrap; gap:12px; margin:14px 0 18px; }
.owner-order-filter-tabs { display:flex; flex-wrap:wrap; gap:7px; }
.owner-order-filter-tabs button { display:inline-flex; align-items:center; gap:7px; padding:9px 11px; border:1px solid #e5e3d7; border-radius:8px; background:#fff; color:#65665f; font:600 11px 'DM Sans',sans-serif; cursor:pointer; }
.owner-order-filter-tabs button[aria-pressed="true"] { border-color:#1e1e1b; background:#1e1e1b; color:#fff; }
.owner-order-filter-tabs button span { display:inline-grid; place-items:center; min-width:19px; min-height:19px; padding:0 4px; border-radius:99px; background:#f4f1dd; color:#3d3e38; font-size:10px; }
.owner-order-search-label { display:flex; flex-direction:column; gap:5px; font-size:10px; font-weight:600; color:#77786f; }
.owner-order-search-label input { min-width:220px; min-height:38px; padding:9px 11px; border:1px solid #deded5; border-radius:8px; font:12px 'DM Sans',sans-serif; background:white; color:#242420; }
.owner-order-search-label input:focus-visible,.owner-order-filter-tabs button:focus-visible { outline:2px solid #c4a600; outline-offset:2px; }
@media (max-width:720px) { .owner-order-filters { align-items:stretch; }.owner-order-filter-tabs { gap:5px; }.owner-order-filter-tabs button { padding:8px; font-size:10px; }.owner-order-search-label,.owner-order-search-label input { width:100%; min-width:0; } }


/* Owner order details */
.owner-order-detail-button { display:inline-flex; margin-top:10px; padding:7px 10px; border:1px solid #d9d7c8; border-radius:7px; background:#fff; color:#494a42; font-size:11px; font-weight:700; cursor:pointer; }
.owner-order-detail-button:hover { border-color:#c5b13d; background:#fffbed; }
.owner-order-detail-button:focus-visible,.owner-order-details-close:focus-visible { outline:2px solid #c4a600; outline-offset:2px; }
.owner-order-details-backdrop { position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(22,22,18,.54); }
.owner-order-details-backdrop[hidden] { display:none; }
.owner-details-open { overflow:hidden; }
.owner-order-details-dialog { width:min(100%,650px); max-height:min(90vh,850px); overflow-y:auto; border-radius:16px; padding:24px; background:#fff; box-shadow:0 20px 65px rgba(0,0,0,.22); }
.owner-order-details-header { display:flex; justify-content:space-between; gap:15px; align-items:flex-start; border-bottom:1px solid #e9e8df; padding-bottom:16px; }
.owner-order-details-header h2 { font:700 23px/1.3 'Playfair Display',serif; overflow-wrap:anywhere; margin:5px 0 0; }
.owner-order-details-close { flex:none; font-size:25px; line-height:1; width:32px; height:32px; border-radius:8px; color:#53554f; background:#f4f4f0; cursor:pointer; }
.owner-detail-status { display:inline-block; background:#fff4c4; color:#614c07; border-radius:99px; padding:6px 11px; margin:16px 0; font-size:11px; font-weight:700; }
.owner-detail-info { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.owner-detail-info > div { min-width:0; }
.owner-detail-info span,.owner-detail-info strong { display:block; }
.owner-detail-info span { color:#888981; font-size:10px; margin-bottom:5px; }
.owner-detail-info strong { font-size:12px; overflow-wrap:anywhere; white-space:pre-wrap; }
.owner-detail-info em { color:#989990; font-weight:400; }
.owner-detail-full { grid-column:1/-1; }
.owner-detail-items { margin-top:22px; }
.owner-detail-items h3 { font:700 17px 'Playfair Display',serif; margin:0 0 10px; }
.owner-detail-table-scroll { overflow-x:auto; }
.owner-detail-items table { width:100%; border-collapse:collapse; text-align:left; font-size:11px; min-width:440px; }
.owner-detail-items th,.owner-detail-items td { border-bottom:1px solid #eeede5; padding:10px 8px; }
.owner-detail-items th { color:#7e8078; font-weight:600; background:#fafaf6; }
.owner-detail-items th:not(:first-child),.owner-detail-items td:not(:first-child) { text-align:right; }
.owner-detail-totals { margin-top:16px; border-top:1px solid #e6e5dc; padding-top:12px; }
.owner-detail-totals > div { display:flex; justify-content:space-between; gap:12px; padding:7px 0; font-size:12px; }
.owner-detail-totals span { color:#85867e; }
.owner-detail-grand-total { margin-top:5px; border-top:1px solid #e6e5dc; font-size:15px !important; }
.owner-detail-grand-total strong { color:#25251e; }
@media (max-width:600px) { .owner-order-details-backdrop { padding:10px; }.owner-order-details-dialog { padding:18px; max-height:94vh; }.owner-detail-info { grid-template-columns:1fr; }.owner-order-details-header h2 { font-size:20px; } }


/* Owner one-click order workflow actions. */
.owner-order-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px; margin-top:10px; }
.owner-order-actions .primary-btn { white-space:nowrap; }
.owner-cancel-order-btn { border:1px solid #e9c6c0; background:#fff8f7; color:#a84237; border-radius:8px; padding:10px 12px; font-size:11px; font-weight:700; cursor:pointer; }
.owner-cancel-order-btn:hover { background:#ffefed; }
.owner-cancel-order-btn:focus-visible,.owner-order-actions .primary-btn:focus-visible { outline:2px solid #b89000; outline-offset:2px; }
.owner-order-actions button:disabled { opacity:.55; cursor:wait; }
@media (max-width:720px) { .owner-order-actions { justify-content:flex-start; }.owner-order-actions button { flex:1 1 auto; } }


/* 2026 Owner workspace redesign: no permanent sidebar, readable typography. */
#admin-view.app-shell { flex-direction:column; background:#f7f6f1; }
#admin-view .content-area { width:100%; flex:1; }
#admin-view .owner-legacy-topbar { display:none !important; }
#admin-view .owner-section-hidden { display:none !important; }
#admin-view .owner-top-header { display:flex; align-items:center; gap:26px; width:100%; min-height:88px; padding:16px clamp(18px,4vw,64px); background:#fff; border-bottom:1px solid #e6e4d9; }
#admin-view .owner-header-brand { flex:none; }
#admin-view .owner-header-brand .brand-lockup { align-items:center; gap:12px; padding:0; }
#admin-view .owner-header-brand .brand-logo-wrap { width:51px; height:51px; }
#admin-view .owner-header-brand .brand-copy strong { font-size:21px; letter-spacing:-.5px; }
#admin-view .owner-header-brand .brand-kicker { font-size:10px; }
#admin-view .owner-horizontal-nav { display:flex; align-items:center; gap:6px; flex:1; justify-content:center; min-width:0; }
#admin-view .owner-horizontal-nav .nav-item { display:inline-flex; width:auto; padding:12px 16px; min-height:45px; border-radius:10px; font-size:15px; font-weight:600; white-space:nowrap; }
#admin-view .owner-horizontal-nav .nav-item.active { background:#f4df42; }
#admin-view .owner-header-actions { display:flex; align-items:center; gap:18px; flex:none; }
#admin-view .owner-header-actions .date-chip { font-size:13px; padding:10px 12px; }
#admin-view .owner-header-actions .logout-link { font-size:14px; font-weight:600; }
#admin-view .page-content { max-width:1480px; padding:38px clamp(18px,4vw,64px) 60px; }
#admin-view .welcome-row { margin-bottom:26px; gap:18px; }
#admin-view .welcome-row h1 { font-size:clamp(29px,3vw,40px); line-height:1.2; }
#admin-view .welcome-row p { font-size:16px; line-height:1.6; }
#admin-view .eyebrow { font-size:12px; }
#admin-view .section-eyebrow { font-size:11px; }
#admin-view .stat-card { min-height:154px; padding:22px; border-radius:15px; }
#admin-view .stat-top { font-size:14px; }
#admin-view .stat-card > strong { font-size:clamp(25px,2.5vw,34px); margin:14px 0 8px; }
#admin-view .stat-foot em { font-size:13px; line-height:1.5; }
#admin-view .stats-grid { gap:16px; margin-bottom:24px; }
#admin-view .panel-card { border-radius:16px; }
#admin-view .panel-heading h2 { font-size:clamp(22px,2vw,28px); }
#admin-view .panel-heading p { font-size:14px; line-height:1.5; max-width:none; }
#admin-view .order-workflow { margin-top:0; padding:28px; }
#admin-view .owner-order-filters { gap:16px; margin:22px 0; }
#admin-view .owner-order-filter-tabs button { font-size:13px; padding:11px 14px; }
#admin-view .owner-order-search-label { font-size:13px; }
#admin-view .owner-order-search-label input { min-height:44px; font-size:14px; }
#admin-view .order-workflow-row { font-size:14px; line-height:1.6; }
#admin-view .order-workflow-row strong { font-size:15px; }
#admin-view .order-workflow-row span { font-size:13px; }
#admin-view .order-workflow-row b { font-size:17px; }
#admin-view .owner-order-detail-button,#admin-view .owner-order-actions button { font-size:13px; min-height:42px; }
#admin-view .menu-manager label,#admin-view .menu-editor label { font-size:14px; }
#admin-view .menu-editor input,#admin-view .menu-editor textarea { font-size:15px; min-height:44px; }
#admin-view .menu-management-list { font-size:14px; }
#admin-view .small-btn,#admin-view .ghost-btn { font-size:13px; }
#admin-view .subscription-panel { margin-top:0; }
@media (max-width:1100px) {
  #admin-view .owner-top-header { flex-wrap:wrap; gap:14px; }
  #admin-view .owner-horizontal-nav { order:3; flex:1 0 100%; justify-content:flex-start; overflow-x:auto; padding-bottom:2px; }
  #admin-view .owner-header-actions { margin-left:auto; }
}
@media (max-width:720px) {
  #admin-view .owner-top-header { padding:13px 16px; }
  #admin-view .owner-header-brand .brand-logo-wrap { width:43px; height:43px; }
  #admin-view .owner-header-brand .brand-copy strong { font-size:18px; }
  #admin-view .owner-header-actions { gap:8px; }
  #admin-view .owner-header-actions .date-chip { display:none; }
  #admin-view .owner-horizontal-nav { gap:6px; }
  #admin-view .owner-horizontal-nav .nav-item { font-size:14px; padding:10px 12px; min-height:42px; }
  #admin-view .page-content { padding:24px 15px 40px; }
  #admin-view .stat-card { min-height:140px; padding:16px; }
  #admin-view .stat-top { font-size:12px; }
  #admin-view .stat-foot em { font-size:12px; }
  #admin-view .order-workflow { padding:18px 14px; }
  #admin-view .owner-order-filter-tabs button { font-size:12px; padding:9px; }
  #admin-view .owner-order-search-label input { width:100%; }
  #admin-view .welcome-row h1 { font-size:29px; }
}


/* Destructive actions belong in the details panel, away from the primary order CTA. */
.owner-detail-danger { border-top:1px solid #ece8e4; margin-top:18px; padding-top:18px; text-align:right; }
.owner-detail-danger button { min-height:42px; border:1px solid #e7b6ae; color:#a13f34; background:#fff6f4; border-radius:9px; padding:10px 14px; font-size:13px; font-weight:700; }
.owner-detail-danger button:disabled { opacity:.6; cursor:wait; }
.owner-detail-danger button:focus-visible { outline:2px solid #b89000; outline-offset:2px; }


/* Owner typography A — Plus Jakarta Sans headings, DM Sans operational UI. */
#admin-view { font-family:'DM Sans',sans-serif; }
#admin-view .owner-header-brand .brand-copy strong,
#admin-view .welcome-row h1,
#admin-view .panel-heading h2,
#admin-view .cart-heading h2,
#admin-view .tip-card h3,
#admin-view .subscription-heading h2 {
  font-family:'Plus Jakarta Sans','DM Sans',sans-serif;
  font-weight:700;
  letter-spacing:-.035em;
}
#admin-view .welcome-row h1 { line-height:1.24; }
#admin-view .panel-heading h2,#admin-view .cart-heading h2 { line-height:1.3; }
#admin-view .owner-horizontal-nav .nav-item,
#admin-view .stat-card,
#admin-view .order-workflow-row,
#admin-view button,
#admin-view input,
#admin-view textarea,
#admin-view select { font-family:'DM Sans',sans-serif; }
.owner-order-details-dialog { font-family:'DM Sans',sans-serif; }
.owner-order-details-header h2,
.owner-detail-items h3 { font-family:'Plus Jakarta Sans','DM Sans',sans-serif; font-weight:700; letter-spacing:-.03em; }


/* Match the Customer dashboard to Owner typography option A. */
#customer-view { font-family:'DM Sans',sans-serif; }
#customer-view .brand-copy strong,
#customer-view .customer-welcome h1,
#customer-view .profile-hero h2,
#customer-view .panel-heading h2,
#customer-view .customer-order-panel h2 {
  font-family:'Plus Jakarta Sans','DM Sans',sans-serif;
  font-weight:700;
  letter-spacing:-.035em;
  line-height:1.28;
}
#customer-view .customer-welcome h1 { letter-spacing:-.04em; }
#customer-view button,
#customer-view input,
#customer-view select,
#customer-view textarea,
#customer-view .profile-form,
#customer-view .customer-order-form,
#customer-view .customer-history,
#customer-view .customer-order-menu {
  font-family:'DM Sans',sans-serif;
}


/* Customer landing: food selection is the primary task, account cards come later. */
#customer-view .customer-order-panel { margin:22px 0 26px; padding:clamp(20px,3vw,32px); }
#customer-view .customer-order-panel .panel-heading h2 { font-size:clamp(24px,2.8vw,32px); }
#customer-view .customer-order-panel .panel-heading p { font-size:15px; line-height:1.6; color:#74756e; }
#customer-view .customer-order-menu { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:24px 0; }
#customer-view .customer-order-menu-row { background:#fffefa; border:1px solid #e8e4d5; padding:18px; border-radius:14px; min-height:92px; }
#customer-view .customer-order-menu-row strong { font-size:16px; line-height:1.4; }
#customer-view .customer-order-menu-row span { font-size:14px; line-height:1.5; }
#customer-view .order-qty-controls button { min-width:34px; min-height:34px; font-size:17px; }
#customer-view .customer-order-form { border-top:1px solid #eae8dc; padding-top:22px; }
#customer-view .customer-order-form label { font-size:14px; }
#customer-view .customer-order-form input,#customer-view .customer-order-form select { min-height:46px; font-size:15px; }
#customer-view #customer-place-order { font-size:15px; min-height:48px; }
#customer-view .customer-grid { margin-top:0; }
@media (max-width:760px) {
  #customer-view .customer-order-menu { grid-template-columns:1fr; }
  #customer-view .customer-order-menu-row { min-height:78px; padding:15px; }
  #customer-view .customer-order-panel { margin:16px 0 22px; }
}


/* Main product-type categories, separate from Diet/Ibu Hamil special menu tags. */
#customer-view .customer-type-filters {
  display:flex; gap:10px; overflow-x:auto; padding:2px 0 10px; margin:16px 0 0;
  scrollbar-width:thin;
}
#customer-view .customer-type-filter {
  flex:none; min-height:46px; padding:11px 16px;
  border:1px solid #e2dfd1; border-radius:12px;
  background:#fff; color:#44463e; font:600 14px 'DM Sans',sans-serif;
  white-space:nowrap; transition:background .15s,border-color .15s;
}
#customer-view .customer-type-filter:hover { background:#fffae5; }
#customer-view .customer-type-filter[aria-pressed="true"] {
  color:#20201c; border-color:#e6ca30; background:#f4df42; box-shadow:0 3px 0 #d6bf35;
}
#customer-view .customer-type-filter:focus-visible { outline:2px solid #af960b; outline-offset:2px; }
#admin-view #menu-editor select {
  width:100%; min-height:44px; border:1px solid #dedcd1;
  border-radius:8px; background:#fff; color:#292923;
  padding:10px 12px; font:15px 'DM Sans',sans-serif;
}
@media (max-width:720px) {
  #customer-view .customer-type-filters { gap:8px; margin-top:14px; }
  #customer-view .customer-type-filter { font-size:13px; min-height:42px; padding:9px 12px; }
}


/* Keep both Owner dropdowns visually identical to text inputs. */
#admin-view #menu-editor input:not([type="checkbox"]),
#admin-view #menu-editor select {
  display:block;
  width:100%;
  height:48px;
  min-height:48px;
  box-sizing:border-box;
  padding:12px 14px;
  margin:0;
  border:1px solid #dfddd3;
  border-radius:9px;
  background-color:#fff;
  color:#201f1c;
  font:400 15px/22px 'DM Sans',sans-serif;
}
#admin-view #menu-editor select {
  appearance:auto;
  cursor:pointer;
}
#admin-view #menu-editor input:not([type="checkbox"]):focus-visible,
#admin-view #menu-editor select:focus-visible {
  outline:2px solid #96cbb7;
  outline-offset:1px;
  border-color:#91c8b2;
}

/* Manual payment workflow */
#customer-payment-panel{margin:20px 0;padding:20px;border:1px solid #e4e0d5;border-radius:16px;background:#fff}
#customer-payment-panel h3{margin:0 0 16px;font-size:20px}
.customer-payment-card{padding:16px 0;border-top:1px solid #eee9dc}
.customer-payment-form{display:grid;gap:12px;margin-top:12px;padding:16px;background:#faf8f1;border-radius:12px}
.customer-payment-form p{margin:0;line-height:1.7}
.customer-payment-form label{display:grid;gap:6px;font-weight:600}
.customer-payment-form select,.customer-payment-form input[type=file]{width:100%;padding:11px;border:1px solid #ddd5c9;border-radius:9px;background:white;font:inherit}
.customer-payment-form button{justify-self:start}
.customer-dana-qr{display:block;max-width:230px;width:100%;height:auto;border:1px solid #e4e0d5;border-radius:10px}
.payment-state{display:inline-block;padding:5px 9px;border-radius:99px;font-size:12px;font-weight:700;background:#f1f1ed;color:#555}
.payment-state-pending{background:#fff2cb;color:#735400}
.payment-state-verified{background:#e2f5e8;color:#18643a}
.payment-state-rejected{background:#fee8e8;color:#8e2525}
.owner-payment-review{margin-top:18px;padding:16px;background:#faf8f1;border:1px solid #e4e0d5;border-radius:12px}
.owner-payment-review h3{margin:0 0 8px}
.owner-payment-review>a{display:inline-block;margin:10px 0}
.owner-payment-review .owner-order-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}

/* Successful order confirmation */
.order-success-dialog{width:min(480px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;padding:0;border:0;border-radius:22px;background:#fff;color:#181819;box-shadow:0 24px 80px rgba(0,0,0,.22)}
.order-success-dialog::backdrop{background:rgba(20,20,20,.58)}
.order-success-content{padding:32px;text-align:center}
.order-success-icon{display:grid;place-items:center;margin:0 auto 16px;width:60px;height:60px;border-radius:50%;background:#e2f7e7;color:#168044;font-size:32px;font-weight:800}
.order-success-content h2{font-size:26px;line-height:1.25;margin:0 0 10px}
.order-success-content>p{color:#74736f;line-height:1.6;margin:0 0 22px}
.order-success-summary{padding:15px 18px;border:1px solid #e9e5d9;border-radius:14px;background:#faf9f3;text-align:left}
.order-success-summary>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px solid #e9e5d9}
.order-success-summary>div:last-child{border-bottom:0}
.order-success-summary span{color:#75736d;font-size:13px}
.order-success-summary strong{text-align:right;overflow-wrap:anywhere}
.order-success-actions{display:grid;gap:10px;margin-top:22px}
.order-success-actions button{width:100%;min-height:44px}
@media(max-width:480px){.order-success-content{padding:24px 18px}.order-success-summary>div{display:block}.order-success-summary strong{display:block;text-align:left;margin-top:4px}}

.customer-payment-status{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;font-size:13px;color:#666}
.customer-history-row>.payment-state{align-self:center}

/* Compact combined order history and payment details */
#real-customer-orders{display:grid;gap:8px;margin-top:12px}
.customer-order-entry{border:1px solid #e7e2d8;border-radius:13px;background:#fff;overflow:hidden}
.customer-order-entry>summary{display:grid;grid-template-columns:minmax(170px,2fr) minmax(88px,1fr) minmax(105px,1fr) minmax(125px,1fr) 16px;align-items:center;gap:12px;padding:13px 16px;cursor:pointer;list-style:none}
.customer-order-entry>summary::-webkit-details-marker{display:none}
.customer-order-entry>summary:hover{background:#fbfaf5}
.customer-order-entry[open]>summary{border-bottom:1px solid #eee8df;background:#fbfaf6}
.customer-order-summary-main{display:grid;gap:3px;min-width:0}
.customer-order-summary-main strong{font-size:13px;overflow-wrap:anywhere}
.customer-order-summary-main small{color:#807c74;font-size:12px}
.customer-order-summary-total{font-weight:700;font-size:13px}
.customer-order-summary-status{color:#6c6860;font-size:12px}
.customer-order-entry .payment-state{justify-self:start}
.customer-order-chevron{font-size:22px;color:#8a8375;transition:transform .2s}
.customer-order-entry[open] .customer-order-chevron{transform:rotate(180deg)}
.customer-order-expanded{padding:15px 16px 18px;background:#fff}
.customer-order-expanded>p{font-size:13px;color:#65635d;margin:0 0 12px;line-height:1.6}
.customer-order-expanded .customer-payment-card{border:0;padding:0}
.customer-order-expanded .customer-payment-form{margin:0}
.customer-cancelled-group{margin-top:12px;border-top:1px solid #e9e4db;padding-top:12px}
.customer-cancelled-group>summary{cursor:pointer;color:#79766e;font-size:13px;font-weight:600;padding:8px}
.customer-cancelled-group .customer-order-entry{margin:8px 0}
@media(max-width:750px){
  .customer-order-entry>summary{grid-template-columns:minmax(0,1fr) auto 16px;gap:7px 10px}
  .customer-order-summary-main{grid-column:1}
  .customer-order-summary-total{grid-column:2;grid-row:1;text-align:right}
  .customer-order-summary-status{grid-column:1;grid-row:2}
  .customer-order-entry .payment-state{grid-column:2;grid-row:2}
  .customer-order-chevron{grid-column:3;grid-row:1/3}
}

/* Customer menu category selector */
.customer-category-filters{display:flex;gap:10px;overflow-x:auto;scrollbar-width:thin;padding:2px 0 14px;margin:0 0 6px}
.customer-category-tab{flex:none;min-height:42px;padding:10px 17px;border:1px solid #e5e0d5;border-radius:12px;background:#fff;color:#44403a;font:inherit;font-weight:700;white-space:nowrap;transition:background .15s,border-color .15s}
.customer-category-tab:hover{border-color:#d8bf34;background:#fffdf0}
.customer-category-tab[aria-pressed="true"]{background:#f4df42;border-color:#f4df42;color:#171719}
.customer-category-tab:focus-visible{outline:3px solid rgba(26,155,104,.32);outline-offset:2px}
@media(max-width:600px){.customer-category-filters{gap:8px}.customer-category-tab{padding:9px 13px;font-size:13px}}

/* Dense Owner order queue */
#owner-orders-list{display:grid;gap:6px}
.owner-order-compact-row{display:flex;align-items:center;gap:8px;min-width:0;padding:7px 9px;border:1px solid #e9e4da;border-radius:12px;background:#fff}
.owner-order-compact-row:hover{border-color:#d9ceaf}
.owner-order-compact-main{display:grid;grid-template-columns:minmax(180px,2fr) minmax(90px,.8fr) minmax(90px,.9fr) minmax(115px,1fr) 16px;align-items:center;gap:10px;min-width:0;flex:1;padding:6px;text-align:left;border:0;border-radius:8px;background:transparent;color:#1b1b1b;cursor:pointer}
.owner-order-compact-main:hover{background:#faf8f1}
.owner-order-compact-identity{display:grid;gap:3px;min-width:0}
.owner-order-compact-identity strong{font-size:13px;overflow-wrap:anywhere}
.owner-order-compact-identity small{font-size:11px;color:#77736c;line-height:1.35}
.owner-order-compact-total{font-size:13px;white-space:nowrap}
.owner-order-compact-state{font-size:12px;color:#746e63}
.owner-order-compact-chevron{font-size:23px;color:#9b907f}
.owner-order-compact-actions{flex:none}
.owner-order-compact-actions .small-btn{padding:8px 12px;font-size:12px;white-space:nowrap}
.owner-order-compact-main .payment-state{justify-self:start;white-space:nowrap}
@media(max-width:1000px){
 .owner-order-compact-row{flex-wrap:wrap}
 .owner-order-compact-main{flex-basis:100%;grid-template-columns:minmax(150px,2fr) minmax(70px,1fr) minmax(90px,1fr) minmax(100px,1fr) 14px}
 .owner-order-compact-actions{margin-left:auto}
}
@media(max-width:650px){
 .owner-order-compact-main{grid-template-columns:minmax(0,1fr) auto 14px;gap:7px}
 .owner-order-compact-identity{grid-column:1;grid-row:1}
 .owner-order-compact-total{grid-column:2;grid-row:1;text-align:right}
 .owner-order-compact-state{grid-column:1;grid-row:2}
 .owner-order-compact-main .payment-state{grid-column:2;grid-row:2}
 .owner-order-compact-chevron{grid-column:3;grid-row:1/3}
}

/* Owner read-only customer catalog preview */
.owner-preview-button{white-space:nowrap}
.owner-customer-preview{width:min(840px,calc(100vw - 28px));max-height:min(88vh,900px);padding:0;border:0;border-radius:20px;background:#f6f5ef;color:#191919;box-shadow:0 25px 85px rgba(0,0,0,.23)}
.owner-customer-preview::backdrop{background:rgba(15,15,15,.6)}
.owner-preview-shell{padding:28px;display:grid;gap:18px}
.owner-preview-topbar{display:flex;align-items:center;justify-content:space-between;gap:14px}
.owner-preview-topbar h2{margin:4px 0 0;font-size:25px}
.owner-preview-eyebrow{font-size:11px;letter-spacing:.14em;color:#827b6d;font-weight:800}
.owner-preview-close{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:#fff;border:1px solid #e5dfd0;font-size:18px}
.owner-preview-note{margin:0;color:#68645f;font-size:13px}
.owner-preview-categories{display:flex;gap:9px;flex-wrap:wrap}
.owner-preview-menu-list{display:grid;gap:10px}
.owner-preview-menu-item{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;border:1px solid #e5dfd2;border-radius:13px;background:#fff}
.owner-preview-menu-item>div:first-child{display:grid;gap:5px}
.owner-preview-menu-item strong{font-size:15px}
.owner-preview-menu-item span{font-size:13px;color:#77736d}
.owner-preview-menu-item p{margin:2px 0;color:#79756d;font-size:13px}
.owner-preview-qty{display:flex;align-items:center;gap:12px;flex:none}
.owner-preview-qty span{display:grid;place-items:center;width:34px;height:34px;border-radius:7px;background:#f4df42;color:#171719;font-size:18px;font-weight:700;opacity:.6}
.owner-preview-qty b{font-size:14px}
@media(max-width:650px){.owner-preview-shell{padding:18px}.owner-preview-topbar h2{font-size:20px}.owner-preview-menu-item{padding:12px}.owner-preview-qty{gap:6px}.owner-preview-qty span{width:28px;height:28px}.catalog-heading .owner-preview-button{margin-top:8px}}

/* Owner notification center */
.owner-header-actions{position:relative}
.owner-notify-bell{position:relative;flex:none;display:grid;place-items:center;width:40px;height:40px;border:1px solid #e6e1d8;border-radius:11px;background:#fff;font-size:19px}
.owner-notify-bell:hover{background:#fff9d8}
.owner-notify-count{position:absolute;top:-6px;right:-7px;min-width:19px;height:19px;padding:2px 4px;border-radius:999px;background:#e74c3c;color:white;font-size:10px;font-weight:800;line-height:15px;text-align:center}
.owner-notify-panel{position:absolute;top:calc(100% + 10px);right:0;z-index:90;width:min(340px,calc(100vw - 24px));padding:16px;border:1px solid #e6e0d4;border-radius:15px;background:#fff;box-shadow:0 18px 55px rgba(0,0,0,.14)}
.owner-notify-panel[hidden]{display:none}
.owner-notify-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.owner-notify-heading strong{font-size:16px}
.owner-notify-close{background:#f6f4ee;padding:6px 9px;border-radius:7px}
.owner-notify-stats{display:flex;gap:7px;flex-wrap:wrap}
.owner-notify-stats span{padding:6px 9px;border-radius:9px;background:#faf4d9;color:#625016;font-size:12px;font-weight:700}
.owner-notify-events{display:grid;gap:6px;max-height:230px;overflow:auto;margin:12px 0}
.owner-notify-events p{display:flex;justify-content:space-between;gap:10px;margin:0;padding:10px 0;border-bottom:1px solid #eeeae0;font-size:12px}
.owner-notify-events span{overflow-wrap:anywhere;color:#6d6860;text-align:right}
.owner-notify-actions{display:flex;gap:8px;flex-wrap:wrap}
.owner-notify-actions button{flex:1;padding:10px;border-radius:9px;background:#f4df42;font-size:12px;font-weight:700}
.owner-notify-toast{position:fixed;top:80px;right:20px;z-index:9999;max-width:min(350px,calc(100vw - 40px));padding:15px 18px;border-radius:12px;background:#191919;color:#fff;font-size:13px;font-weight:700;box-shadow:0 16px 45px rgba(0,0,0,.2)}

/* Persisted food photos */
.menu-photo-upload input[type=file]{max-width:520px;cursor:pointer}
.menu-photo-upload small{color:#817c72;font-size:12px}
#menu-photo-preview{width:200px;height:140px;object-fit:cover;border:1px solid #e5dfd1;border-radius:12px;margin-top:5px}
#menu-photo-preview[hidden]{display:none}
.menu-manage-item .menu-manage-details{display:flex;flex-direction:row;align-items:center;gap:12px;min-width:0}
.menu-manage-thumb{width:62px;height:54px;flex:none;object-fit:cover;border-radius:9px;border:1px solid #e7e1d7}
.menu-photo-placeholder{display:grid;place-items:center;background:#f7efc1;font-size:24px}
.food-visual .food-image{position:relative;z-index:1;width:100%;height:100%;object-fit:cover}
.customer-order-menu-row > .customer-order-item-info{display:flex;flex-direction:row;align-items:center;gap:13px;min-width:0}
.customer-order-item-info>div{display:grid;gap:5px}
.customer-order-photo{width:74px;height:68px;flex:none;border-radius:10px;object-fit:cover;border:1px solid #ebe3d7}
.owner-preview-food-photo{width:85px;height:75px;flex:none;object-fit:cover;border-radius:10px;border:1px solid #ebe3d7}
.owner-preview-menu-item>.owner-preview-food-copy{display:grid;gap:5px;flex:1;min-width:0}
.owner-preview-menu-item .owner-preview-qty{flex:none}
@media(max-width:650px){.customer-order-menu-row>.customer-order-item-info{align-self:stretch}.customer-order-photo{width:66px;height:60px}.owner-preview-food-photo{width:66px;height:64px}}


/* Owner prepaid subscriptions — compact expandable rows and focused form. */
#admin-view .subscription-list{display:grid;grid-template-columns:1fr;gap:8px}
#admin-view .subscription-live-row{border:1px solid #e7dfd1;border-radius:12px;background:#fff}
#admin-view .subscription-live-row summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1.5fr) auto minmax(130px,.8fr) 20px;gap:14px;align-items:center;padding:14px 16px}
#admin-view .subscription-live-row summary::-webkit-details-marker{display:none}
#admin-view .subscription-live-row summary>div{min-width:0}
#admin-view .subscription-live-row summary strong{font-size:13px}
#admin-view .subscription-live-row summary div strong,#admin-view .subscription-live-row summary div span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#admin-view .subscription-live-row summary div span{font-size:11px;color:#8a8176;margin-top:4px}
#admin-view .subscription-payment-tag{font-size:11px;background:#f6eee2;border-radius:30px;padding:7px 9px;text-align:center;color:#7e5e32;font-weight:700}
#admin-view .subscription-payment-tag.paid{background:#e4f7ed;color:#087445}
#admin-view .subscription-live-detail{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;border-top:1px solid #eee8dc;padding:12px 16px;color:#645b53;font-size:12px}
#admin-view .subscription-live-actions{display:flex;gap:8px;flex-wrap:wrap;width:100%}
#admin-view .subscription-live-actions button{cursor:pointer;background:#fff;border:1px solid #dfd6c7;border-radius:8px;padding:9px 12px;font-weight:650;color:#282828}
#admin-view .subscription-live-actions button:first-child{background:#f8e439;border-color:#f8e439}
#admin-view .subscription-live-status-note{margin:0;width:100%;font-size:11px}
#admin-view .subscription-error{margin:0;color:#a53629}
.subscription-form-dialog{width:min(700px,calc(100vw - 28px));max-height:90vh;overflow:auto;border:0;border-radius:18px;padding:0;background:#fff;color:#141414;box-shadow:0 22px 80px #0003}
.subscription-form-dialog::backdrop{background:#0009}
.subscription-form{padding:24px;display:grid;gap:18px}
.subscription-form-top{display:flex;justify-content:space-between;gap:12px;align-items:start}
.subscription-form-top h2{margin:7px 0;font-size:23px}
.subscription-form-top p{margin:0;color:#887d71;font-size:13px}
.subscription-close{cursor:pointer;border:0;background:transparent;font-size:20px;padding:5px}
.subscription-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.subscription-form-grid label{display:grid;gap:7px;font-size:12px;font-weight:650}
.subscription-form-grid input,.subscription-form-grid select{box-sizing:border-box;width:100%;min-width:0;border:1px solid #e0d8cd;border-radius:10px;background:#fff;height:44px;padding:0 12px;font:inherit;color:#171717}
.subscription-price-preview{padding:13px 15px;border-radius:10px;background:#fff8c9;font-size:14px;font-weight:700}
.subscription-form-help{margin:0;color:#756e62;font-size:12px;line-height:1.55}
.subscription-form-error{margin:0;color:#a53629;font-size:12px}
.subscription-form-actions{display:flex;justify-content:flex-end;gap:10px}
.subscription-form-actions button{cursor:pointer}
@media(max-width:650px){#admin-view .subscription-live-row summary{grid-template-columns:minmax(0,1fr) auto;gap:8px}.subscription-form-grid{grid-template-columns:1fr}.subscription-form-actions{flex-direction:column}.subscription-form-actions button{width:100%}}


/* Customer-selected subscriptions and per-customer Owner discounts. */
.subscription-discount-label{display:grid;gap:8px;font-size:13px;font-weight:700}
.subscription-discount-label select{height:46px;border:1px solid #ddd5ca;border-radius:10px;padding:0 12px;background:#fff}
.subscription-discount-options{border:1px solid #e3dcd1;border-radius:12px;padding:16px;display:flex;flex-wrap:wrap;gap:12px}
.subscription-discount-options legend{font-weight:700;font-size:13px;padding:0 6px}
.subscription-discount-options label{display:flex;align-items:center;gap:5px;border:1px solid #e8dfcf;border-radius:9px;padding:9px 12px;cursor:pointer}
.subscription-discount-options input{accent-color:#d8b800}
#admin-view .subscription-live-actions a{border-radius:8px;border:1px solid #e0d6c7;padding:9px 12px;color:#1d1d1d;text-decoration:none;font-weight:700}
#admin-view .subscription-live-actions button:first-of-type{background:#f8e439;border-color:#f8e439}
.customer-subscription-list{margin-top:17px;display:grid;gap:9px}
.customer-sub-discount{margin:0;background:#fff9d9;padding:12px 14px;border-radius:10px;font-size:13px}
.customer-sub-row{border:1px solid #e6ded3;border-radius:12px;background:#fff}
.customer-sub-row summary{list-style:none;cursor:pointer;padding:14px;display:flex;justify-content:space-between;gap:12px;align-items:center}
.customer-sub-row summary::-webkit-details-marker{display:none}
.customer-sub-row summary>span{display:grid;gap:4px}
.customer-sub-row summary>span:last-child{text-align:right}
.customer-sub-row summary strong{font-size:13px}
.customer-sub-row summary small{font-size:11px;color:#81786c}
.customer-sub-body{padding:14px;border-top:1px solid #e9e1d6;display:grid;gap:12px}
.customer-sub-body>p{font-size:12px;margin:0}
.customer-sub-body .customer-payment-form{max-width:650px}
.customer-sub-body .customer-dana-qr{max-width:170px}
@media(max-width:600px){.subscription-discount-options{display:grid;grid-template-columns:1fr 1fr}.customer-sub-row summary{align-items:start}.customer-sub-row summary strong{font-size:12px}}


/* Owner invoice: on-screen hidden sheet, browser Print / Save as PDF. */
#dy-print-invoice{display:none}
.owner-invoice-action{margin:14px 0}
.owner-invoice-action button,.subscription-invoice-action button{cursor:pointer;border:1px solid #dcd2c1;background:#fff;border-radius:9px;padding:10px 14px;font-weight:700;color:#282828}
.subscription-invoice-action{width:100%}
@page{size:A4;margin:14mm}
@media print{
  html,body{background:#fff!important;color:#171717!important;margin:0!important;padding:0!important}
  body>*:not(#dy-print-invoice){display:none!important}
  #dy-print-invoice{display:block!important;position:static!important;width:100%!important;max-width:none!important;padding:0!important;margin:0!important;box-shadow:none!important;visibility:visible!important;font:12px/1.5 Arial,sans-serif;color:#161616}
  #dy-print-invoice *{box-sizing:border-box}
  .dy-invoice-header{display:flex;justify-content:space-between;gap:25px;border-bottom:3px solid #191919;padding-bottom:18px;margin-bottom:20px}
  .dy-invoice-header>div:last-child{text-align:right}
  .dy-invoice-header strong{font-size:25px;letter-spacing:1px}
  .dy-invoice-header h1{font-size:19px;margin:0}
  .dy-invoice-header p{margin:4px 0;font-size:11px}
  .dy-invoice-metadata{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px}
  .dy-invoice-metadata>div{display:grid;gap:4px;align-content:start}
  .dy-invoice-metadata span{color:#666;font-size:10px;text-transform:uppercase;letter-spacing:.5px}
  .dy-invoice-metadata strong{font-size:13px}
  .dy-invoice-metadata p{margin:0;white-space:pre-wrap}
  .dy-invoice-table{border-collapse:collapse;width:100%}
  .dy-invoice-table th{border-bottom:2px solid #222;border-top:1px solid #ccc;text-align:left;padding:9px 5px}
  .dy-invoice-table td{border-bottom:1px solid #ddd;padding:9px 5px;vertical-align:top}
  .dy-invoice-table .num{text-align:right;white-space:nowrap}
  .dy-invoice-totals{margin:22px 0 0 auto;max-width:310px;display:grid;gap:6px}
  .dy-invoice-totals>div{display:flex;justify-content:space-between;gap:16px}
  .dy-invoice-grand{border-top:2px solid #222;padding-top:10px;font-size:16px}
  .dy-invoice-payment{border:1px solid #bbb;border-radius:5px;padding:12px;margin-top:28px;break-inside:avoid}
  .dy-invoice-payment strong{font-size:13px}
  .dy-invoice-payment p{margin:6px 0 0}
  #dy-print-invoice footer{border-top:1px solid #ccc;margin-top:30px;padding-top:15px;text-align:center;font-size:11px;break-inside:avoid}
  #dy-print-invoice footer p{margin:4px 0;color:#555}
}


/* Primary customer subscription action: visible and finger-friendly. */
#manage-customer-subscription{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  min-width:198px;
  padding:12px 20px;
  margin-top:15px;
  border:1px solid #e8d32a;
  border-radius:11px;
  background:#f8e43d;
  color:#171717;
  font-size:14px;
  font-weight:750;
  line-height:1.2;
  cursor:pointer;
  box-shadow:0 3px 0 #cfb920;
  transition:background .15s ease,transform .15s ease;
}
#manage-customer-subscription:hover{background:#ffe955;transform:translateY(-1px)}
#manage-customer-subscription:focus-visible{outline:3px solid #262626;outline-offset:3px}
@media(max-width:600px){#manage-customer-subscription{width:100%;min-width:0}}


@media print{
  #dy-print-invoice .dy-invoice-brand{display:flex;align-items:center;gap:13px;min-width:0}
  #dy-print-invoice .dy-invoice-brand>div{min-width:0}
  #dy-print-invoice .dy-invoice-logo{display:block;width:76px;height:76px;object-fit:contain;flex:0 0 76px}
  #dy-print-invoice .dy-invoice-brand strong{font-size:21px;line-height:1.1}
  #dy-print-invoice .dy-invoice-brand p{margin:2px 0;font-size:10px;line-height:1.35}
  #dy-print-invoice .dy-invoice-payment p{line-height:1.55}
}


/* Formal invoice masthead: official brand mark and complete address. */
@media print {
  #dy-print-invoice .dy-invoice-header {
    align-items:flex-start;
    gap:18px;
  }
  #dy-print-invoice .dy-invoice-brand {
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
    flex:1 1 auto;
  }
  #dy-print-invoice .dy-invoice-logo {
    display:block;
    flex:0 0 74px;
    width:74px;
    height:74px;
    max-width:74px;
    max-height:74px;
    border-radius:50%;
    object-fit:contain;
  }
  #dy-print-invoice .dy-invoice-brand > div {
    min-width:0;
    overflow-wrap:break-word;
  }
  #dy-print-invoice .dy-invoice-brand strong {
    display:block;
    font:700 19px/1.2 Arial,sans-serif;
    letter-spacing:0;
  }
  #dy-print-invoice .dy-invoice-brand p {
    margin:3px 0;
    font:10px/1.4 Arial,sans-serif;
  }
  #dy-print-invoice .dy-invoice-header > div:last-child {
    flex:0 0 31%;
    min-width:0;
    text-align:right;
  }
  #dy-print-invoice .dy-invoice-header h1 {
    font:700 16px/1.3 Arial,sans-serif;
    overflow-wrap:break-word;
  }
}


/* Dapur Yurico identity hero on the sign-in screen */
.auth-intro.auth-intro-logo { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:18px; padding:20px 0; text-align:center; min-width:0; }
.auth-hero-logo { display:block; width:min(100%,430px); height:auto; max-height:440px; object-fit:contain; border-radius:50%; }
.auth-intro .auth-hero-tagline { max-width:480px; margin:0; color:var(--ink); font:700 clamp(22px,2.6vw,32px)/1.3 'Playfair Display',serif; letter-spacing:-.4px; }
@media (max-width:720px) {
  .auth-intro.auth-intro-logo { padding:6px 0 25px; gap:12px; }
  .auth-hero-logo { width:min(73vw,260px); max-height:260px; }
  .auth-intro .auth-hero-tagline { max-width:330px; font-size:clamp(18px,5vw,24px); line-height:1.3; letter-spacing:0; }
}

/* Ukuran logo halaman login Dapur Yurico */
.auth-intro.auth-intro-logo {
  max-width: 380px;
  margin: 0 auto;
  align-items: center;
  gap: 16px;
}

.auth-intro .auth-hero-logo {
  width: 100%;
  max-width: 290px;
  height: auto;
}

.auth-intro .auth-hero-tagline {
  max-width: 350px;
  margin: 0;
  font-size: 26px;
  line-height: 1.25;
  text-align: center;
  letter-spacing: 0;
}

@media (max-width: 720px) {
  .auth-intro .auth-hero-logo {
    max-width: 220px;
  }

  .auth-intro .auth-hero-tagline {
    font-size: 21px;
  }
}