:root {
    --espresso: #251812;
    --espresso-2: #34231c;
    --mocha: #4a3329;
    --caramel: #c89a68;
    --caramel-dark: #a87542;
    --cream: #f7f1e8;
    --cream-2: #eee4d7;
    --paper: #fffdf9;
    --ink: #211b18;
    --muted: #6c625b;
    --line: #e5ddd3;
    --sage: #5e775e;
    --green: #246342;
    --red: #b44b3e;
    --amber: #82551c;
    --shadow: 0 20px 55px rgba(43, 28, 20, .12);
    --radius: 20px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(200,154,104,.45); outline-offset: 2px; }
.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand-mark { width: 42px; height: 42px; border-radius: 14px 14px 14px 5px; background: var(--espresso); color: var(--cream); display: inline-grid; place-items: center; font-weight: 900; letter-spacing: -1px; }
.brand-copy { display: flex; align-items: baseline; gap: 4px; font-size: 18px; }
.brand-copy strong { font-weight: 850; }
.brand-copy small { color: var(--caramel-dark); font-weight: 700; }
.brand-light { color: white; }
.brand-light .brand-mark { background: var(--caramel); color: var(--espresso); }
.brand-light .brand-copy small { color: var(--caramel); }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--caramel-dark); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; }
.eyebrow i { width: 26px; height: 1px; background: currentColor; }
.eyebrow-light { color: #e3bf96; }
.btn-primary-tonton, .btn-caramel { border: 0; background: var(--caramel); color: var(--espresso); border-radius: 12px; font-weight: 800; padding: 12px 19px; display: inline-flex; align-items: center; justify-content: center; gap: 14px; transition: .18s ease; }
.btn-primary-tonton:hover, .btn-caramel:hover { background: #d6aa79; color: var(--espresso); transform: translateY(-1px); }
.btn-primary-tonton.btn-lg { padding: 16px 24px; border-radius: 14px; }
.btn-dark-tonton { background: var(--espresso); color: white; border-color: var(--espresso); }
.btn-dark-tonton:hover { background: var(--mocha); color: white; }
.btn-ghost { padding: 15px 20px; border-bottom: 1px solid var(--ink); font-weight: 700; }

/* Landing */
.landing-body { background: var(--paper); }
.landing-header { max-width: 1240px; margin: 0 auto; height: 88px; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; position: relative; z-index: 5; }
.landing-header nav { display: flex; gap: 34px; font-size: 14px; color: #584f49; }
.landing-header nav a:hover { color: var(--caramel-dark); }
.landing-actions { display: flex; align-items: center; gap: 20px; }
.link-login { font-weight: 700; font-size: 14px; }
.hero-section { min-height: 680px; padding: 74px max(28px, calc((100vw - 1240px)/2)); display: grid; grid-template-columns: .92fr 1.08fr; gap: 70px; align-items: center; background: radial-gradient(circle at 85% 25%, #efe1cf 0, transparent 36%), linear-gradient(155deg, #fffdf9 58%, #f6eee4 58%); overflow: hidden; }
.hero-copy h1, .section-heading h2, .intelligence-copy h2, .final-cta h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; letter-spacing: -.045em; line-height: .98; }
.hero-copy h1 { font-size: clamp(53px, 5.3vw, 78px); margin: 25px 0; max-width: 620px; }
.hero-copy h1 em, .section-heading h2 em, .intelligence-copy h2 em, .final-cta h2 em { color: var(--caramel-dark); font-weight: 500; }
.hero-copy > p { color: #625a54; font-size: 18px; line-height: 1.75; max-width: 600px; }
.hero-actions { display: flex; align-items: center; gap: 24px; margin: 34px 0 28px; }
.trust-row { display: flex; gap: 21px; color: #6f675f; font-size: 13px; }
.hero-product { position: relative; min-width: 0; }
.mock-window { height: 460px; border: 9px solid #2b211c; border-radius: 24px; background: #f4ede5; box-shadow: 0 40px 70px rgba(43,28,20,.24); display: grid; grid-template-columns: 62px 1fr 190px; overflow: hidden; transform: perspective(1200px) rotateY(-2deg) rotateX(1deg); }
.mock-sidebar { background: var(--espresso); padding: 20px 12px; color: #cbbdaf; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.mock-sidebar b { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--caramel); color: var(--espresso); font-size: 12px; margin-bottom: 16px; }
.mock-sidebar span { width: 34px; height: 34px; display: grid; place-items: center; }
.mock-sidebar .on { background: rgba(255,255,255,.12); border-radius: 10px; color: white; }
.mock-catalog { padding: 26px 20px; min-width: 0; }
.mock-top { display: flex; flex-direction: column; gap: 2px; }
.mock-top small { color: #8b817a; }.mock-top b { font-size: 17px; }
.mock-tabs { display: flex; gap: 8px; margin: 20px 0; font-size: 10px; }
.mock-tabs span, .mock-tabs i { padding: 7px 11px; background: white; border-radius: 20px; font-style: normal; }.mock-tabs i { background: var(--espresso); color: white; }
.mock-products { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.mock-products article { background: white; padding: 10px; border-radius: 13px; display: grid; gap: 4px; }
.mock-products article div { height: 70px; border-radius: 10px; background: linear-gradient(145deg,#e7d5c0,#f9f3ed); display: grid; place-items: center; font-size: 35px; }
.mock-products b { font-size: 11px; }.mock-products small { color: var(--caramel-dark); font-size: 10px; }
.mock-order { background: var(--espresso-2); color: white; padding: 30px 18px; display: flex; flex-direction: column; gap: 6px; }
.mock-order > small { color: #c6bcb3; }.mock-order > b { font-size: 18px; margin-bottom: 20px; }
.mock-order > div { display: flex; justify-content: space-between; gap: 8px; padding: 11px 0; font-size: 10px; border-bottom: 1px solid rgba(255,255,255,.1); }
.mock-order hr { border-color: rgba(255,255,255,.2); margin-top: auto; }.mock-order p { display: flex; justify-content: space-between; align-items: center; }.mock-order button { border: 0; border-radius: 10px; padding: 12px 6px; background: var(--caramel); color: var(--espresso); font-weight: 800; font-size: 10px; }
.floating-stat { position: absolute; display: flex; gap: 11px; align-items: center; background: white; border-radius: 14px; padding: 13px 16px; box-shadow: var(--shadow); }
.floating-stat > span { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #e8f1e9; color: var(--green); font-weight: 900; }.floating-stat div { display: flex; flex-direction: column; }.floating-stat small { color: var(--muted); font-size: 10px; }.floating-stat strong { font-size: 14px; }.stat-profit { right: -20px; top: -30px; }.stat-waste { left: 10px; bottom: -33px; }.stat-waste > span { background: #f6e9df; color: var(--caramel-dark); }
.brand-strip { background: var(--espresso); color: white; padding: 22px max(28px, calc((100vw - 1240px)/2)); display: flex; align-items: center; justify-content: space-between; }
.brand-strip p { margin: 0; color: #cbbfb7; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }.brand-strip div { display: flex; gap: 22px; color: #dbcbbd; font-size: 12px; letter-spacing: .1em; }.brand-strip i { color: var(--caramel); }
.section-pad { padding: 110px max(28px, calc((100vw - 1180px)/2)); }
.section-heading h2, .intelligence-copy h2 { font-size: clamp(43px, 4.5vw, 64px); margin: 20px 0 18px; }.section-heading p { max-width: 560px; color: var(--muted); font-size: 17px; line-height: 1.7; }.section-heading.centered { text-align: center; }.section-heading.centered p { margin-left: auto; margin-right: auto; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 60px; }
.feature-card { position: relative; padding: 34px; background: #faf7f2; border: 1px solid #eee7dd; border-radius: 22px; min-height: 390px; transition: .2s ease; }.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }.feature-card.featured { background: var(--espresso); color: white; }.feature-number { position: absolute; right: 28px; top: 24px; color: #b8aaa0; font-family: Georgia,serif; }.feature-icon { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 14px; background: #eddfcf; color: var(--caramel-dark); font-size: 23px; }.feature-card.featured .feature-icon { background: var(--caramel); color: var(--espresso); }.feature-card h3 { font-family: Georgia,serif; font-size: 27px; margin: 28px 0 14px; }.feature-card > p { color: #776d66; line-height: 1.65; }.feature-card.featured > p { color: #cfc2b8; }.feature-card ul, .price-card ul { list-style: none; padding: 0; margin: 25px 0 0; display: grid; gap: 11px; }.feature-card li:before, .price-card li:before { content: "✓"; color: var(--caramel-dark); font-weight: 900; margin-right: 10px; }.feature-card.featured li:before { color: var(--caramel); }
.intelligence-section { background: var(--espresso); color: white; display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; align-items: center; }.intelligence-copy > p { color: #c9bdb4; font-size: 17px; line-height: 1.7; }.insight-list { margin-top: 35px; display: grid; gap: 18px; }.insight-list > div { display: flex; align-items: center; gap: 15px; }.insight-list > div > span { width: 42px; height: 42px; border: 1px solid #6e5546; color: var(--caramel); display: grid; place-items: center; border-radius: 12px; }.insight-list p { margin: 0; display: grid; gap: 4px; }.insight-list small { color: #b9aca3; }
.profit-panel { background: #f8f3ec; color: var(--ink); border-radius: 25px; padding: 30px; box-shadow: 0 30px 80px rgba(0,0,0,.28); }.panel-head { display: flex; justify-content: space-between; }.panel-head div { display: grid; gap: 4px; }.panel-head small { color: var(--muted); }.panel-head > span { color: var(--green); background: #e3efe7; padding: 6px 10px; border-radius: 30px; font-size: 11px; }.profit-main { margin-top: 35px; }.profit-main p { color: var(--muted); margin: 0; }.profit-main h3 { font-size: 40px; margin: 7px 0; }.positive { color: var(--green); }.mini-bars { height: 105px; display: flex; align-items: flex-end; gap: 13px; margin: 28px 0; border-bottom: 1px solid var(--line); }.mini-bars span { flex: 1; border-radius: 6px 6px 0 0; background: #d8c8b7; }.mini-bars .active { background: var(--caramel); }.profit-kpis { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }.profit-kpis > div { display: grid; gap: 5px; padding: 15px; border: 1px solid var(--line); border-radius: 12px; }.profit-kpis small { color: var(--muted); font-size: 11px; }.smart-alert { margin-top: 18px; display: flex; gap: 12px; align-items: center; background: #fff2e5; border: 1px solid #f0d4b8; border-radius: 13px; padding: 13px; }.smart-alert > span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--caramel); font-weight: 900; }.smart-alert p { margin: 0; flex: 1; display: grid; }.smart-alert small { color: var(--muted); }.smart-alert button { border: 0; background: transparent; color: var(--caramel-dark); font-weight: 800; }
.pricing-section { background: var(--cream); }.pricing-grid { display: grid; grid-template-columns: repeat(3,1fr); align-items: center; gap: 18px; margin-top: 55px; }.price-card { position: relative; background: white; border: 1px solid var(--line); border-radius: 22px; padding: 34px; min-height: 470px; display: flex; flex-direction: column; }.price-card.popular { background: var(--espresso); color: white; transform: scale(1.035); box-shadow: var(--shadow); border-color: var(--espresso); }.popular-tag { position: absolute; top: -14px; right: 25px; background: var(--caramel); color: var(--espresso); padding: 7px 13px; border-radius: 20px; text-transform: uppercase; font-size: 10px; letter-spacing: .1em; font-weight: 900; }.price-card > div:not(.popular-tag) { display: grid; gap: 7px; }.price-card > div > span { font-family: Georgia,serif; font-size: 27px; }.price-card > div > small { color: var(--muted); }.price-card.popular > div > small { color: #c8bbb2; }.price-card > p { margin: 35px 0 25px; display: flex; align-items: flex-start; }.price-card sup { margin-top: 13px; }.price-card p strong { font-family: Georgia,serif; font-size: 58px; font-weight: 500; letter-spacing: -.05em; }.price-card sub { align-self: flex-end; margin-bottom: 13px; color: var(--muted); }.price-card ul { margin-bottom: 32px; line-height: 1.45; }.price-card > a { margin-top: auto; border: 1px solid var(--espresso); border-radius: 12px; padding: 13px; text-align: center; font-weight: 800; }.price-card.popular > a { background: var(--caramel); color: var(--espresso); border: 0; }.price-card.popular li:before { color: var(--caramel); }
.security-callout { margin: 0 max(28px, calc((100vw - 1180px)/2)) 100px; border: 1px solid var(--line); background: white; border-radius: 20px; padding: 28px 34px; display: flex; align-items: center; justify-content: space-between; }.security-callout > div { display: flex; align-items: center; gap: 18px; }.security-callout p { margin: 0; display: grid; gap: 5px; }.security-callout p small { color: var(--caramel-dark); text-transform: uppercase; letter-spacing: .1em; }.security-callout ul { display: flex; gap: 23px; list-style: none; color: var(--muted); font-size: 13px; }.security-callout li:before { content: "✓"; color: var(--green); margin-right: 7px; }
.final-cta { background: linear-gradient(135deg,#2a1a14,#3b281f); color: white; padding: 100px 28px; text-align: center; }.final-cta h2 { font-size: clamp(52px,6vw,76px); margin: 24px 0; }.final-cta p { color: #c9bbb1; margin-bottom: 30px; }.landing-footer { background: #1b120e; color: #d7cbc2; padding: 44px max(28px,calc((100vw - 1180px)/2)); display: grid; grid-template-columns: auto 1fr auto; gap: 35px; align-items: center; }.landing-footer p { margin: 0; }.landing-footer > small { color: #8f8177; }

/* Authentication */
.auth-body { background: var(--paper); }.auth-layout { min-height: 100vh; display: grid; grid-template-columns: .9fr 1.1fr; }.auth-art { min-height: 100vh; background: radial-gradient(circle at 85% 20%,#543c30,transparent 30%), var(--espresso); color: white; padding: 50px max(45px,7vw); display: flex; flex-direction: column; justify-content: space-between; }.auth-art h1 { font-family: Georgia,serif; font-size: clamp(53px,6vw,80px); line-height: .98; letter-spacing: -.05em; font-weight: 500; margin: 25px 0; }.auth-art h1 em { color: var(--caramel); font-weight: 500; }.auth-art p { color: #c7bbb2; max-width: 480px; line-height: 1.7; }.auth-art > small { color: #8e7f75; }.auth-form-wrap { display: grid; place-items: center; padding: 50px 28px; }.auth-card { width: min(460px,100%); }.back-link { color: var(--muted); font-size: 14px; }.auth-heading { margin: 48px 0 30px; }.auth-heading > small { color: var(--caramel-dark); text-transform: uppercase; letter-spacing: .12em; font-weight: 800; }.auth-heading h2 { font-family: Georgia,serif; font-size: 40px; margin: 9px 0; }.auth-heading p { color: var(--muted); }.auth-card form { display: grid; gap: 18px; }.auth-card label { display: grid; gap: 7px; font-size: 13px; font-weight: 750; }.auth-card label small { color: var(--muted); font-weight: 500; }.auth-card input { border: 1px solid var(--line); border-radius: 12px; padding: 14px 15px; background: white; }.auth-footer { text-align: center; color: var(--muted); margin-top: 25px; font-size: 14px; }.auth-footer a { color: var(--caramel-dark); font-weight: 800; }.auth-benefits { list-style: none; padding: 0; display: grid; gap: 15px; }.auth-benefits li:before { content: "✓"; display: inline-grid; place-items: center; width: 25px; height: 25px; background: rgba(200,154,104,.15); color: var(--caramel); border-radius: 50%; margin-right: 10px; }

/* Master MFA */
.mfa-body { min-height: 100vh; background: var(--paper); }
.mfa-layout { min-height: 100vh; display: grid; grid-template-columns: minmax(390px,.86fr) minmax(560px,1.14fr); }
.mfa-security-panel { position: relative; isolation: isolate; overflow: hidden; min-height: 100vh; padding: 44px clamp(38px,5vw,76px); background: radial-gradient(circle at 84% 18%,rgba(200,154,104,.24),transparent 27%),radial-gradient(circle at 8% 72%,rgba(112,78,60,.38),transparent 29%),var(--espresso); color: white; display: flex; flex-direction: column; justify-content: space-between; }
.mfa-security-panel:after { content: ""; position: absolute; z-index: -1; width: 390px; height: 390px; border: 1px solid rgba(255,255,255,.07); border-radius: 50%; right: -205px; bottom: 17%; box-shadow: 0 0 0 58px rgba(255,255,255,.025),0 0 0 116px rgba(255,255,255,.018); }
.mfa-security-copy { max-width: 510px; margin: 55px 0 44px; }
.mfa-secure-label { display: inline-flex; align-items: center; gap: 10px; color: #e6c39d; text-transform: uppercase; letter-spacing: .14em; font-size: 11px; font-weight: 850; }
.mfa-secure-label i { width: 28px; height: 1px; background: currentColor; }
.mfa-shield { width: 74px; height: 82px; margin: 30px 0 25px; display: grid; place-items: center; background: linear-gradient(145deg,#ddb482,var(--caramel)); color: var(--espresso); clip-path: polygon(50% 0,92% 15%,87% 69%,50% 100%,13% 69%,8% 15%); filter: drop-shadow(0 18px 24px rgba(0,0,0,.22)); }
.mfa-shield span { width: 31px; height: 31px; display: grid; place-items: center; background: rgba(37,24,18,.14); border-radius: 50%; font-size: 19px; font-weight: 900; }
.mfa-security-copy h2 { max-width: 490px; margin: 0 0 19px; font: 500 clamp(38px,4vw,60px)/1.02 Georgia,serif; letter-spacing: -.045em; }
.mfa-security-copy p { max-width: 485px; margin: 0; color: #c9bcb3; line-height: 1.7; font-size: 15px; }
.mfa-security-points { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.mfa-security-points li { min-width: 0; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.14); display: grid; gap: 9px; }
.mfa-security-points li > span { color: var(--caramel); font: 500 13px Georgia,serif; }
.mfa-security-points p { min-width: 0; margin: 0; display: grid; gap: 4px; }
.mfa-security-points strong { font-size: 11px; }
.mfa-security-points small { color: #9f9187; font-size: 9px; line-height: 1.4; }
.mfa-form-panel { min-height: 100vh; display: grid; place-items: center; padding: 46px clamp(28px,7vw,110px); background: radial-gradient(circle at 90% 7%,#f3e7d8 0,transparent 30%),linear-gradient(150deg,#fffdf9,#f9f4ed); }
.mfa-card { width: min(570px,100%); padding: 42px 44px 30px; background: rgba(255,255,255,.9); border: 1px solid rgba(229,221,211,.9); border-radius: 24px; box-shadow: 0 30px 80px rgba(53,34,24,.13); backdrop-filter: blur(10px); }
.mfa-card-heading h1 { margin: 10px 0 12px; font: 500 clamp(38px,4vw,50px)/1 Georgia,serif; letter-spacing: -.04em; }
.mfa-card-heading > p { max-width: 470px; margin: 0 0 28px; color: var(--muted); font-size: 15px; line-height: 1.65; }
.mfa-form { display: grid; gap: 10px; }
.mfa-form > label { color: #504640; font-size: 12px; font-weight: 800; }
.mfa-code-input { width: 100%; height: 70px; border: 1px solid #d9cfc5; border-radius: 15px; padding: 12px 18px; background: #fff; color: var(--espresso); text-align: center; font: 750 28px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .42em; text-indent: .42em; transition: border-color .18s,box-shadow .18s; }
.mfa-code-input::placeholder { color: #cfc4ba; }
.mfa-code-input:focus { outline: 0; border-color: var(--caramel); box-shadow: 0 0 0 4px rgba(200,154,104,.15); }
.mfa-field-help { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; color: var(--muted); font-size: 11px; }
.mfa-field-help span { color: var(--caramel-dark); font-size: 15px; }
.mfa-form .btn-primary-tonton { min-height: 54px; margin-top: 2px; }
.mfa-alert { display: flex; align-items: center; gap: 10px; margin: -8px 0 18px; padding: 11px 13px; border: 1px solid #efd1ca; border-radius: 11px; background: #fff3f0; color: #8d3d32; font-size: 12px; }
.mfa-alert span { width: 23px; height: 23px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--red); color: white; font-weight: 900; }
.mfa-setup { margin-top: 22px; border: 1px solid var(--line); border-radius: 14px; background: #fbf8f3; overflow: hidden; }
.mfa-setup summary { list-style: none; cursor: pointer; padding: 14px 15px; display: flex; align-items: center; gap: 11px; }
.mfa-setup summary::-webkit-details-marker { display: none; }
.mfa-setup summary:after { content: "+"; margin-left: auto; color: var(--caramel-dark); font-size: 20px; }
.mfa-setup[open] summary:after { content: "−"; }
.mfa-setup-icon { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 9px; background: #efe0ce; color: var(--caramel-dark); font-weight: 900; }
.mfa-setup summary > span:nth-child(2) { display: grid; gap: 2px; }
.mfa-setup summary strong { font-size: 12px; }
.mfa-setup summary small { color: var(--muted); font-size: 10px; }
.mfa-setup-content { border-top: 1px solid var(--line); padding: 15px; }
.mfa-setup-content ol { margin: 0 0 16px; padding-left: 20px; color: #625952; font-size: 11px; line-height: 1.65; }
.mfa-key-label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.mfa-key-row { display: flex; border: 1px solid #ded3c8; border-radius: 10px; background: white; overflow: hidden; }
.mfa-key-row code { flex: 1; min-width: 0; padding: 11px 12px; color: var(--espresso); font-size: 12px; letter-spacing: .08em; overflow-wrap: anywhere; }
.mfa-key-row button { border: 0; border-left: 1px solid var(--line); padding: 0 13px; background: #f6eee4; color: var(--caramel-dark); font-size: 10px; font-weight: 850; }
.mfa-key-row button:hover { background: #eee1d1; }
.mfa-setup-content > p { margin: 12px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.mfa-card-footer { display: flex; justify-content: center; gap: 7px; margin-top: 22px; color: #948982; font-size: 9px; text-align: center; }

@media (max-width: 1020px) {
    .mfa-layout { grid-template-columns: minmax(330px,.75fr) minmax(490px,1.25fr); }
    .mfa-security-panel { padding: 36px; }
    .mfa-security-points { grid-template-columns: 1fr; gap: 8px; }
    .mfa-security-points li { grid-template-columns: 25px 1fr; }
}
@media (max-width: 760px) {
    .mfa-layout { display: block; background: var(--espresso); }
    .mfa-security-panel { min-height: auto; padding: 24px 20px 62px; }
    .mfa-security-copy { margin: 48px 0 0; }
    .mfa-security-copy h2 { max-width: 360px; font-size: 39px; }
    .mfa-security-copy p,.mfa-shield,.mfa-security-points { display: none; }
    .mfa-form-panel { min-height: auto; margin-top: -31px; padding: 0 14px 28px; border-radius: 28px 28px 0 0; }
    .mfa-card { margin-top: 0; padding: 32px 24px 24px; border-radius: 21px; box-shadow: none; }
    .mfa-card-heading h1 { font-size: 38px; }
}

/* Application shell */
.app-body { background: #f3eee7; }.app-shell { min-height: 100vh; display: grid; grid-template-columns: 232px minmax(0,1fr); transition: .2s; }.app-sidebar { position: sticky; top: 0; height: 100vh; background: var(--espresso); color: #d8cbc1; padding: 24px 17px; display: flex; flex-direction: column; z-index: 20; }.app-sidebar .brand { padding: 0 8px 28px; }.app-nav { display: flex; flex-direction: column; gap: 6px; }.app-nav a { display: flex; align-items: center; gap: 13px; padding: 11px 13px; border-radius: 11px; font-size: 14px; color: #c7bab1; }.app-nav a:hover { background: rgba(255,255,255,.06); color: white; }.app-nav a.active { background: var(--caramel); color: var(--espresso); font-weight: 800; }.nav-icon { width: 23px; text-align: center; font-size: 18px; }.nav-section { margin: 16px 13px 5px; color: #796b62; text-transform: uppercase; letter-spacing: .13em; font-size: 9px; font-weight: 800; }.sidebar-user { margin-top: auto; display: flex; align-items: center; gap: 11px; padding: 14px 8px 0; border-top: 1px solid rgba(255,255,255,.08); }.avatar { width: 35px; height: 35px; display: inline-grid; place-items: center; border-radius: 11px; background: #5a4033; color: #f0d1ad; font-style: normal; font-weight: 900; flex: none; }.sidebar-user .nav-label { display: grid; min-width: 0; }.sidebar-user strong { color: white; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.sidebar-user small { color: #988b81; font-size: 10px; }.app-main { min-width: 0; }.app-topbar { height: 70px; background: rgba(255,253,249,.95); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 16px; padding: 0 30px; position: sticky; top: 0; z-index: 15; backdrop-filter: blur(10px); }.sidebar-toggle { border: 0; background: transparent; font-size: 19px; color: var(--muted); }.app-topbar > div:nth-child(2) { display: grid; }.app-topbar small { color: var(--muted); font-size: 11px; }.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 18px; }.trial-chip, .security-chip { background: #efe5d7; color: #795a3c; border-radius: 30px; padding: 7px 11px; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; font-weight: 850; }.link-button { border: 0; background: transparent; color: var(--muted); font-size: 13px; }.app-content { padding: 28px 30px 60px; max-width: 1700px; margin: 0 auto; }.sidebar-collapsed { grid-template-columns: 76px minmax(0,1fr); }.sidebar-collapsed .brand-copy, .sidebar-collapsed .nav-label, .sidebar-collapsed .nav-section { display: none; }.sidebar-collapsed .app-sidebar { padding-left: 12px; padding-right: 12px; }.sidebar-collapsed .app-sidebar .brand { padding-left: 5px; }.sidebar-collapsed .app-nav a { justify-content: center; padding-left: 8px; padding-right: 8px; }.support-banner { min-height: 46px; padding: 8px 30px; background: #9b4c3e; color: white; display: flex; justify-content: space-between; align-items: center; font-size: 13px; }.support-banner form { margin: 0; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 28px; }.page-heading.compact { margin-bottom: 20px; }.page-kicker { color: var(--caramel-dark); text-transform: uppercase; letter-spacing: .13em; font-size: 10px; font-weight: 850; }.page-heading h1 { margin: 5px 0 2px; font-family: Georgia,serif; font-size: 37px; font-weight: 500; }.page-heading p { color: var(--muted); margin: 0; }.heading-actions { display: flex; align-items: center; gap: 10px; }.cash-open { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #cfe1d4; color: var(--green); background: #f2f8f3; border-radius: 10px; padding: 9px 12px; font-size: 12px; }.cash-open i, .live-indicator i { width: 7px; height: 7px; background: #37a36b; border-radius: 50%; box-shadow: 0 0 0 4px #d9eee1; }.tonton-modal { border: 0; border-radius: 20px; overflow: hidden; }.tonton-modal .modal-header { padding: 24px 25px 15px; border: 0; }.tonton-modal .modal-header small { color: var(--caramel-dark); text-transform: uppercase; letter-spacing: .1em; }.tonton-modal .modal-header h2 { font-family: Georgia,serif; font-size: 28px; margin: 3px 0 0; }.tonton-modal .modal-body { padding: 10px 25px 24px; }.tonton-modal .modal-footer { border: 0; background: #f8f4ee; padding: 15px 25px; }.form-control, .form-select, .input-group-text { border-color: var(--line); border-radius: 10px; padding: 10px 12px; }.form-control:focus, .form-select:focus { border-color: var(--caramel); box-shadow: 0 0 0 .2rem rgba(200,154,104,.16); }.form-label { font-size: 12px; font-weight: 750; }.form-help { color: var(--muted); font-size: 12px; margin: 12px 0 0; }.form-section-title { font-weight: 800; }.form-section-title small { color: var(--muted); font-weight: 500; }

/* Operation */
.operation-layout { display: grid; grid-template-columns: minmax(0,1fr) 335px; gap: 18px; align-items: start; }.catalog-panel, .current-order-panel, .dashboard-card { background: white; border: 1px solid var(--line); border-radius: var(--radius); }.catalog-panel { padding: 20px; min-height: 610px; }.catalog-toolbar { display: flex; gap: 15px; align-items: center; margin-bottom: 20px; }.search-box { flex: 1; display: flex; align-items: center; gap: 8px; background: #f4efe9; border-radius: 11px; padding: 9px 12px; color: #6c625b; }.search-box input { border: 0; outline: 0; background: transparent; width: 100%; font-size: 13px; }.category-tabs { display: flex; gap: 7px; overflow-x: auto; }.category-tabs button { border: 0; white-space: nowrap; background: #f4efe9; color: var(--muted); border-radius: 20px; padding: 8px 12px; font-size: 11px; }.category-tabs .active { background: var(--espresso); color: white; }.product-grid { display: grid; grid-template-columns: repeat(3,minmax(145px,1fr)); gap: 12px; }.product-card { position: relative; border: 1px solid #eee7dd; border-radius: 15px; overflow: hidden; background: white; min-width: 0; }.product-visual { height: 105px; background: linear-gradient(145deg,#ebded0,#f8f3ec); display: grid; place-items: center; }.product-visual span { font-size: 53px; filter: drop-shadow(0 8px 8px rgba(60,35,20,.12)); }.tone-espresso .product-visual { background: linear-gradient(145deg,#7f614d,#30201a); }.tone-cream .product-visual { background: linear-gradient(145deg,#f1e2d1,#fffaf3); }.tone-caramel .product-visual { background: linear-gradient(145deg,#ca9c6b,#f0d2ae); }.tone-burger .product-visual { background: linear-gradient(145deg,#ecd2a9,#f9eee0); }.tone-burger-dark .product-visual { background: linear-gradient(145deg,#8b5e3a,#d9a36b); }.tone-cocoa .product-visual { background: linear-gradient(145deg,#51362a,#a67558); }.product-info { padding: 13px 13px 16px; display: grid; gap: 3px; }.product-info small { color: var(--caramel-dark); text-transform: uppercase; font-size: 8px; font-weight: 850; letter-spacing: .08em; }.product-info h3 { margin: 0; font-size: 14px; }.product-info p { color: var(--muted); margin: 2px 0 8px; font-size: 10px; line-height: 1.35; height: 27px; overflow: hidden; }.product-info strong { font-size: 13px; }.product-card > form button, .product-card > button { position: absolute; right: 10px; bottom: 10px; width: 29px; height: 29px; border: 0; border-radius: 9px; background: var(--espresso); color: white; font-size: 19px; }.product-card > button:disabled { background: #c7bdb5; }.current-order-panel { position: sticky; top: 90px; min-height: 610px; overflow: hidden; display: flex; flex-direction: column; }.order-panel-head { padding: 20px 20px 15px; display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); }.order-panel-head span { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }.order-panel-head h2 { font-family: Georgia,serif; font-size: 23px; margin: 3px 0; }.order-number { align-self: start; background: var(--cream); padding: 6px 9px; border-radius: 9px; color: var(--caramel-dark)!important; }.order-items { padding: 10px 20px; min-height: 250px; max-height: 330px; overflow: auto; }.order-line { display: grid; grid-template-columns: 28px 1fr auto; gap: 9px; align-items: center; padding: 12px 0; border-bottom: 1px dashed var(--line); }.order-line .qty { width: 27px; height: 27px; display: grid; place-items: center; background: var(--cream); border-radius: 8px; font-size: 11px; }.order-line div { display: grid; }.order-line strong { font-size: 12px; }.order-line small { color: var(--muted); font-size: 10px; }.order-line b { font-size: 11px; }.empty-order { min-height: 230px; display: grid; place-content: center; text-align: center; justify-items: center; color: var(--muted); }.empty-order.tall { min-height: 450px; padding: 30px; }.empty-order > span { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--cream); font-size: 26px; margin-bottom: 13px; }.empty-order strong { color: var(--ink); }.empty-order p { font-size: 12px; max-width: 200px; }.order-summary { margin-top: auto; background: #f9f5ef; padding: 17px 20px 20px; }.order-summary p { display: flex; justify-content: space-between; margin: 7px 0; font-size: 12px; }.order-summary p span { color: var(--muted); }.order-summary .total { font-size: 17px; align-items: center; }.send-kitchen { width: 100%; border: 0; border-radius: 11px; background: var(--caramel); color: var(--espresso); font-weight: 850; padding: 13px 15px; display: flex; justify-content: space-between; margin-top: 14px; }.choice-card { display: flex; gap: 13px; align-items: center; border: 1px solid var(--line); border-radius: 13px; padding: 13px; }.choice-card > span { width: 40px; height: 40px; border-radius: 10px; background: var(--cream); display: grid; place-items: center; font-size: 20px; }.choice-card div { display: grid; }.choice-card small { color: var(--muted); }.choice-inline { font-size: 12px; color: var(--muted); }.active-orders-section { margin-top: 30px; }.section-title-row { display: flex; justify-content: space-between; align-items: end; margin-bottom: 15px; }.section-title-row h2 { font-family: Georgia,serif; margin: 3px 0 0; }.section-title-row a { color: var(--caramel-dark); font-weight: 800; font-size: 12px; }.active-order-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }.active-order-card { background: white; border: 1px solid var(--line); border-radius: 15px; padding: 15px; }.active-order-card > div:first-child { display: flex; align-items: center; gap: 7px; }.active-order-card > div:first-child b { margin-left: auto; font-size: 11px; }.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }.status-ready .status-dot { background: var(--green); }.active-order-card h3 { font-family: Georgia,serif; margin: 14px 0 4px; }.active-order-card p { color: var(--muted); font-size: 11px; }.active-order-card footer { border-top: 1px solid var(--line); padding-top: 10px; display: flex; justify-content: space-between; align-items: center; }.active-order-card footer > div { display: flex; gap: 5px; }.active-order-card footer form { margin: 0; }.empty-wide { grid-column: 1/-1; padding: 30px; background: white; border: 1px dashed var(--line); border-radius: 14px; display: flex; align-items: center; justify-content: center; gap: 13px; color: var(--muted); }.empty-wide p { margin: 0; display: grid; }.empty-wide strong { color: var(--ink); }.empty-wide small { color: var(--muted); }

/* KDS */
.live-indicator { display: flex; align-items: center; gap: 9px; color: var(--green); background: white; border: 1px solid #dbe8de; border-radius: 30px; padding: 9px 13px; font-size: 12px; font-weight: 800; }.kds-board { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; }.kds-ticket { background: white; border: 1px solid var(--line); border-top: 5px solid var(--amber); border-radius: 15px; overflow: hidden; }.kds-ticket.status-ready { border-top-color: var(--green); }.kds-ticket header { padding: 16px; display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); }.kds-ticket header span { color: var(--caramel-dark); text-transform: uppercase; letter-spacing: .08em; font-size: 10px; font-weight: 800; }.kds-ticket header h2 { margin: 3px 0 0; font-size: 18px; }.kds-ticket header time { color: var(--muted); font-weight: 750; }.kds-items { padding: 8px 16px; }.kds-item { padding: 11px 0; border-bottom: 1px dashed var(--line); display: flex; justify-content: space-between; align-items: center; gap: 10px; }.kds-item > div { display: flex; gap: 9px; }.kds-item > div > span { width: 27px; height: 27px; display: grid; place-items: center; background: var(--cream); border-radius: 8px; font-weight: 800; }.kds-item p { margin: 0; display: grid; }.kds-item small { color: var(--red); font-size: 10px; }.kds-item form { margin: 0; }.kds-item button { border: 0; border-radius: 8px; padding: 7px 9px; font-size: 10px; font-weight: 850; }.btn-start { background: var(--espresso); color: white; }.btn-ready { background: #ddefe2; color: var(--green); }.done { color: var(--green); font-size: 10px; font-weight: 850; }.kds-ticket footer { background: #faf7f2; padding: 11px 16px; display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; }.kds-ticket footer strong { color: var(--ink); }.kds-empty { grid-column: 1/-1; text-align: center; padding: 100px 20px; background: white; border: 1px dashed var(--line); border-radius: var(--radius); }.kds-empty span { width: 70px; height: 70px; display: inline-grid; place-items: center; border-radius: 50%; background: #e4f0e6; color: var(--green); font-size: 28px; }.kds-empty h2 { font-family: Georgia,serif; margin: 15px 0 5px; }.kds-empty p, .kds-loading { color: var(--muted); }

/* Management */
.metric-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 13px; margin-bottom: 20px; }.metric-grid article { background: white; border: 1px solid var(--line); border-radius: 15px; padding: 18px; display: flex; gap: 13px; }.metric-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: #e6f1e8; color: var(--green); font-weight: 900; }.metric-icon.margin { background: #f1e5d7; color: var(--caramel-dark); }.metric-icon.ticket { background: #e8e6f3; color: #5a5480; }.metric-icon.waste { background: #f5e4df; color: var(--red); }.metric-grid article > div { display: grid; gap: 3px; }.metric-grid small { color: var(--muted); font-size: 10px; }.metric-grid h2 { margin: 0; font-size: 22px; }.metric-grid p { margin: 0; color: var(--muted); font-size: 10px; }.management-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }.dashboard-card { padding: 22px; }.wide-card { grid-column: 1/-1; }.card-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }.card-heading h2 { font-family: Georgia,serif; font-size: 24px; margin: 3px 0 0; }.card-heading a { color: var(--caramel-dark); font-size: 11px; font-weight: 800; }.beta-chip { color: #715132; background: #f1e4d4; padding: 6px 9px; border-radius: 20px; font-size: 9px; text-transform: uppercase; font-weight: 850; }.margin-gauge { height: 160px; border-radius: 16px; background: radial-gradient(circle at center,#fff 0 38%,transparent 39%), conic-gradient(var(--caramel) 0 var(--margin-progress, 0%),#ece4da var(--margin-progress, 0%)); display: grid; place-items: center; margin: 20px auto; max-width: 270px; }.gauge-value { display: grid; text-align: center; }.gauge-value span { color: var(--muted); font-size: 10px; }.gauge-value strong { font-size: 25px; }.explain-box { display: flex; gap: 11px; background: #faf4eb; border-radius: 12px; padding: 12px; }.explain-box > span { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: var(--caramel); font-weight: 900; }.explain-box p { display: grid; margin: 0; }.explain-box small { color: var(--muted); }.stock-list, .catalog-list, .role-list, .audit-list { display: grid; }.stock-list > div, .catalog-list > div, .role-list > div, .audit-list > div { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); }.stock-dot { width: 9px; height: 9px; background: var(--green); border-radius: 50%; flex: none; }.stock-dot.low { background: var(--red); }.stock-list p, .catalog-list p, .role-list p, .audit-list p { margin: 0; display: grid; flex: 1; }.stock-list small, .catalog-list small, .role-list small, .audit-list small { color: var(--muted); font-size: 10px; }.stock-list b, .catalog-list b { font-size: 11px; }.waste-table, .team-table { display: grid; }.waste-table > div, .team-table > div { display: grid; grid-template-columns: 1.3fr 1fr .8fr .8fr; gap: 15px; padding: 12px 8px; border-bottom: 1px solid var(--line); align-items: center; font-size: 12px; }.table-head { color: var(--muted); font-size: 9px!important; text-transform: uppercase; letter-spacing: .08em; }.waste-table > div > span:first-child { display: grid; }.waste-table small { color: var(--muted); }.empty-row { grid-column: 1/-1!important; color: var(--muted); text-align: center; padding: 30px!important; }.catalog-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--cream); font-weight: 850; }.recipe-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }.recipe-grid article { border: 1px solid var(--line); border-radius: 12px; padding: 13px; }.recipe-grid h3 { font-size: 13px; }.recipe-grid p { display: flex; justify-content: space-between; font-size: 10px; border-top: 1px solid var(--line); padding-top: 6px; margin: 6px 0; }.recipe-grid > article > small { color: var(--muted); }.user-cell { display: flex; align-items: center; gap: 9px; }.user-cell p { margin: 0; display: grid; }.user-cell small { color: var(--muted); }.status-badge { display: inline-flex; width: fit-content; padding: 5px 8px; border-radius: 20px; font-size: 9px; text-transform: uppercase; font-weight: 850; }.status-badge.success { color: var(--green); background: #e4f1e7; }.status-badge.warning { color: var(--amber); background: #f5ebd8; }.status-badge.danger { color: var(--red); background: #f6e5e1; }.permission-simulator { display: grid; gap: 13px; }.permission-simulator label { display: grid; gap: 5px; font-size: 11px; font-weight: 750; }.decision-box { margin-top: 16px; border-radius: 12px; padding: 13px; }.decision-box.allowed { background: #e6f1e8; color: #245e42; }.decision-box.denied { background: #f5e4df; color: #8b382d; }.decision-box p { margin: 4px 0; font-size: 12px; }.decision-box small { opacity: .75; }.role-list > div span { color: var(--muted); font-size: 9px; }.empty-text { color: var(--muted); }

/* Platform and receipt */
.platform-warning { display: flex; gap: 12px; background: #fff1de; border: 1px solid #efd5ad; padding: 14px; border-radius: 13px; margin-bottom: 18px; }.platform-warning > span { width: 30px; height: 30px; display: grid; place-items: center; background: var(--amber); color: white; border-radius: 50%; font-weight: 900; }.platform-warning p { margin: 0; display: grid; }.platform-warning small { color: #806b4d; }.tenant-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; }.tenant-card { background: white; border: 1px solid var(--line); border-radius: 17px; padding: 18px; }.tenant-card header { display: flex; gap: 10px; align-items: center; }.tenant-avatar { width: 42px; height: 42px; display: grid; place-items: center; background: var(--espresso); color: var(--caramel); border-radius: 12px; font-weight: 900; }.tenant-card header > div { min-width: 0; flex: 1; }.tenant-card h2 { margin: 0; font-size: 15px; }.tenant-card header p { margin: 3px 0 0; color: var(--muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.tenant-metrics { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; margin: 18px 0; }.tenant-metrics > div { background: #f8f4ef; padding: 9px 6px; border-radius: 8px; display: grid; text-align: center; }.tenant-metrics small { color: var(--muted); font-size: 8px; }.tenant-metrics strong { font-size: 12px; }.trial-date { color: var(--muted); font-size: 10px; }.tenant-card footer { display: flex; justify-content: flex-end; gap: 7px; border-top: 1px solid var(--line); padding-top: 13px; }.tenant-card footer form { margin-right: auto; }.audit-dot { width: 9px; height: 9px; background: var(--caramel); border-radius: 50%; }.audit-list time { color: var(--muted); font-size: 10px; }.receipt-wrap { max-width: 620px; margin: 20px auto; }.receipt { background: white; border: 1px solid var(--line); border-radius: 20px; padding: 40px; box-shadow: var(--shadow); }.receipt-brand { text-align: center; }.receipt-brand .brand-mark { margin: 0 auto 15px; }.receipt-brand h1 { font-family: Georgia,serif; margin: 0; }.receipt-brand p { color: var(--muted); }.receipt-meta { display: flex; justify-content: space-between; background: var(--cream); padding: 10px 13px; border-radius: 9px; font-size: 11px; }.receipt-lines { margin-top: 20px; }.receipt-lines p, .receipt-payments p, .receipt-total p { display: flex; justify-content: space-between; padding: 8px 0; margin: 0; border-bottom: 1px dashed var(--line); }.receipt-total { margin-top: 15px; font-size: 19px; }.receipt-payments h2 { font-size: 13px; margin-top: 22px; }.fiscal-note { display: grid; margin-top: 20px; background: #e6f1e8; color: var(--green); border-radius: 10px; padding: 12px; }.receipt footer { margin-top: 25px; text-align: center; color: var(--muted); font-size: 10px; }.receipt-actions { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }

/* Platform control plane */
.platform-heading { align-items: center; }.platform-count { display: inline-flex; padding: 7px 11px; border: 1px solid var(--line); border-radius: 20px; color: var(--muted); background: white; font-size: 10px; font-weight: 800; }.platform-kpi-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 13px; margin-bottom: 20px; }.platform-kpi-grid article { min-width: 0; display: flex; align-items: center; gap: 13px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: white; }.platform-kpi-grid article > div { min-width: 0; display: grid; gap: 2px; }.platform-kpi-grid small { color: var(--muted); font-size: 9px; }.platform-kpi-grid strong { overflow: hidden; text-overflow: ellipsis; font-size: 21px; white-space: nowrap; }.platform-kpi-grid p { margin: 0; color: var(--muted); font-size: 10px; }.platform-kpi-icon { width: 43px; height: 43px; flex: none; display: grid; place-items: center; border-radius: 12px; font-weight: 900; }.platform-kpi-icon.cocoa { background: #eee3dc; color: var(--mocha); }.platform-kpi-icon.caramel { background: #f4e6d5; color: var(--caramel-dark); }.platform-kpi-icon.green { background: #e4f0e7; color: var(--green); }.platform-kpi-icon.violet { background: #eae8f3; color: #655b89; }.platform-attention { margin-bottom: 20px; padding: 14px 16px; border: 1px solid #efd5ad; border-radius: 14px; background: #fff4e2; display: flex; align-items: center; justify-content: space-between; gap: 18px; }.platform-attention > div:first-child { display: flex; align-items: center; gap: 11px; }.platform-attention > div:first-child > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--amber); color: white; font-weight: 900; }.platform-attention p { margin: 0; display: grid; }.platform-attention small { color: #806b4d; }.platform-attention-links { display: flex; gap: 7px; }.platform-attention-links a { padding: 7px 9px; border-radius: 9px; background: white; font-size: 10px; }.platform-attention-links b { color: var(--amber); margin-left: 5px; }.platform-dashboard-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }.platform-span-2 { grid-column: span 2; }.platform-span-3 { grid-column: 1/-1; }.platform-company-list > a { display: grid; grid-template-columns: 38px minmax(130px,1fr) 120px 75px 16px; gap: 10px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); }.platform-company-list > a:last-child { border-bottom: 0; }.platform-company-list p,.platform-company-list div { min-width: 0; margin: 0; display: grid; }.platform-company-list p small,.platform-company-list div small { color: var(--muted); font-size: 9px; }.platform-company-list div { text-align: right; }.platform-company-list div b { font-size: 11px; }.platform-company-list i { color: var(--caramel-dark); font-style: normal; }.platform-timeline > div,.platform-event-table > div { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }.platform-timeline p,.platform-event-table p { min-width: 0; margin: 0; display: grid; flex: 1; }.platform-timeline p small,.platform-event-table p small { overflow: hidden; color: var(--muted); font-size: 9px; white-space: nowrap; text-overflow: ellipsis; }.platform-timeline time,.platform-event-table time { color: var(--muted); font-size: 9px; white-space: nowrap; }.timeline-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #c8bbae; }.timeline-dot.live { background: #36a36c; box-shadow: 0 0 0 4px #dff0e5; }.platform-event-table code { color: #6c625b; font-size: 9px; }.platform-filters { display: flex; gap: 9px; margin-bottom: 20px; padding: 13px; border: 1px solid var(--line); border-radius: 15px; background: white; }.platform-filters select { min-width: 160px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: white; color: var(--ink); font-size: 11px; }.platform-search { min-width: 240px; flex: 1; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; }.platform-search span { color: var(--muted); }.platform-search input { width: 100%; border: 0; outline: 0; font-size: 11px; }.platform-tenant-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; }.platform-tenant-card { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 17px; background: white; }.platform-tenant-card header { display: flex; align-items: center; gap: 10px; }.platform-tenant-card header > div { min-width: 0; flex: 1; }.platform-tenant-card h2 { overflow: hidden; margin: 0; font-size: 15px; white-space: nowrap; text-overflow: ellipsis; }.platform-tenant-card header p { margin: 2px 0 0; color: var(--muted); font-size: 9px; }.platform-plan-row { display: flex; justify-content: space-between; margin: 17px 0 10px; padding: 11px; border-radius: 10px; background: #f8f4ef; }.platform-plan-row span { display: grid; }.platform-plan-row span:last-child { text-align: right; }.platform-plan-row small { color: var(--muted); font-size: 8px; }.platform-plan-row strong { font-size: 11px; }.platform-tenant-card .tenant-metrics { margin: 0 0 15px; }.platform-tenant-card footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 13px; border-top: 1px solid var(--line); }.platform-tenant-card footer > span { color: var(--muted); font-size: 8px; }.platform-empty { grid-column: 1/-1; padding: 90px 20px; border: 1px dashed var(--line); border-radius: 18px; background: white; text-align: center; }.platform-empty > span { width: 54px; height: 54px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--cream); font-size: 24px; }.platform-empty h2 { margin: 14px 0 5px; font: 500 26px Georgia,serif; }.platform-empty p { color: var(--muted); }.platform-tenant-hero { display: flex; align-items: center; gap: 15px; margin: 20px 0; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: white; }.tenant-avatar.large { width: 58px; height: 58px; font-size: 17px; }.platform-tenant-hero > div:nth-child(2) { min-width: 0; flex: 1; }.platform-tenant-hero h1 { margin: 4px 0 2px; font: 500 32px Georgia,serif; }.platform-tenant-hero p { margin: 0; color: var(--muted); font-size: 10px; }.platform-kpi-grid.compact { margin-bottom: 16px; }.platform-detail-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }.platform-detail-wide { grid-column: 1/-1; }.platform-simple-list > div { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }.platform-simple-list p { min-width: 0; flex: 1; margin: 0; display: grid; }.platform-simple-list p small { overflow: hidden; color: var(--muted); font-size: 9px; white-space: nowrap; text-overflow: ellipsis; }.list-icon { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--cream); }.platform-data-table { overflow-x: auto; }.platform-data-table > div { min-width: 680px; display: grid; grid-template-columns: 1fr 1.2fr .9fr .8fr .9fr; gap: 12px; align-items: center; padding: 11px 8px; border-bottom: 1px solid var(--line); font-size: 10px; }.platform-data-table .table-head { color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }.platform-data-table i { font-style: normal; }.platform-data-table time { color: var(--muted); }.platform-data-table p.empty-text { padding: 25px 8px; }.platform-account-control p { display: flex; justify-content: space-between; padding: 10px 0; margin: 0; border-bottom: 1px solid var(--line); font-size: 11px; }.platform-account-control p span { color: var(--muted); }.platform-account-control form { margin-top: 16px; }.platform-policy { display: flex; gap: 12px; margin-bottom: 20px; padding: 15px; border: 1px solid #dfd5c8; border-radius: 14px; background: #faf6ef; }.platform-policy > span { width: 31px; height: 31px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--espresso); color: var(--caramel); font-weight: 900; }.platform-policy p { margin: 0; display: grid; }.platform-policy small { color: var(--muted); }.support-table > div { grid-template-columns: 1.1fr 1fr 2fr 1.1fr 1fr .7fr; }.support-table > div > span:nth-child(3),.audit-table > div > span:nth-child(4) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }.audit-table > div { grid-template-columns: 1.15fr 1fr 1fr 1.2fr .8fr 1fr; }.audit-table span small { display: block; color: var(--caramel-dark); }.master-table > div { grid-template-columns: 1.1fr 1.5fr .8fr .7fr 1fr; }.master-table .user-cell { display: flex; }.master-table .user-cell i { font-style: normal; }.platform-plan-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }.platform-plan-card { overflow: hidden; padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: white; }.platform-plan-card.featured { border-color: #d8b88f; box-shadow: 0 20px 45px rgba(81,51,31,.1); }.platform-plan-card header { display: flex; justify-content: space-between; }.platform-plan-card header span { font: 500 25px Georgia,serif; }.platform-plan-card header b { padding: 5px 8px; border-radius: 20px; background: var(--espresso); color: white; font-size: 8px; text-transform: uppercase; }.platform-price { margin: 25px 0 5px; }.platform-price strong { font-size: 34px; }.platform-price small,.platform-plan-card > p { color: var(--muted); }.platform-plan-card > p { font-size: 10px; }.platform-plan-card ul { min-height: 115px; padding: 20px 0; list-style: none; display: grid; gap: 10px; }.platform-plan-card li:before { content: "✓"; margin-right: 8px; color: var(--green); font-weight: 900; }.platform-plan-card footer { display: flex; justify-content: space-between; padding-top: 15px; border-top: 1px solid var(--line); font-size: 10px; }.platform-plan-card footer span { display: grid; }.platform-plan-card footer a { color: var(--caramel-dark); font-weight: 800; }.platform-service-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }.platform-service-grid article { min-height: 125px; display: flex; gap: 13px; padding: 19px; border: 1px solid var(--line); border-radius: 16px; background: white; }.service-status { width: 10px; height: 10px; flex: none; margin-top: 5px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 5px #f4ead8; }.service-status.operational { background: #3a9b69; box-shadow: 0 0 0 5px #e0f0e6; }.service-status.configured { background: #6a66a3; box-shadow: 0 0 0 5px #e9e7f3; }.platform-service-grid small { color: var(--green); font-size: 8px; text-transform: uppercase; font-weight: 850; }.platform-service-grid h2 { margin: 7px 0 4px; font-size: 15px; }.platform-service-grid p { margin: 0; color: var(--muted); font-size: 10px; }.system-big-number { display: grid; text-align: center; padding: 22px; }.system-big-number strong { font: 500 54px Georgia,serif; }.system-big-number span,.system-note { color: var(--muted); font-size: 11px; line-height: 1.7; }

/* Platform CRUD, DataTables and Select2 */
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }.form-grid > label,.form-stack > label { display: grid; gap: 6px; color: var(--ink); font-size: 11px; font-weight: 750; }.form-grid-wide { grid-column: 1/-1; }.form-grid label small { color: var(--muted); font-weight: 500; }.form-stack { display: grid; gap: 14px; }.platform-check { min-width: max-content; align-self: center; display: flex; align-items: center; gap: 7px; margin: 0 4px; font-size: 11px; }.tenant-avatar.mini { width: 34px; height: 34px; flex: none; border-radius: 10px; font-size: 10px; }.user-cell > span { min-width: 0; display: grid; }.user-cell > span small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; }.table-actions { display: flex; flex-wrap: wrap; gap: 5px; }.platform-table-card { overflow: hidden; padding: 18px 20px; }.tonton-table { width: 100%!important; margin: 0!important; color: var(--ink); font-size: 10px; }.tonton-table thead th { padding: 10px 9px; border-bottom-color: var(--line); color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }.tonton-table tbody td { max-width: 280px; padding: 11px 9px; border-bottom-color: var(--line); vertical-align: middle; }.tonton-table tbody tr:last-child td { border-bottom: 0; }.tonton-table code { color: #b33a73; font-size: 9px; }.tonton-table td > small { display: block; color: var(--muted); }.dt-container .dt-layout-row { align-items: center; gap: 12px; margin: 0 0 14px!important; }.dt-container .dt-layout-row:last-child { margin: 14px 0 0!important; }.dt-container .dt-layout-table { overflow-x: auto; margin: 0!important; }.dt-container .dt-search label,.dt-container .dt-length label { color: var(--muted); font-size: 10px; }.dt-container .dt-input { min-height: 34px; margin: 0 0 0 6px!important; padding: 6px 9px!important; border: 1px solid var(--line)!important; border-radius: 9px!important; background: white!important; font-size: 10px!important; }.dt-container .dt-search .dt-input { min-width: 210px; }.dt-container .dt-info { color: var(--muted); font-size: 9px; }.dt-container .pagination { gap: 4px; }.dt-container .page-link { min-width: 31px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px!important; color: var(--mocha); font-size: 9px; text-align: center; }.dt-container .active > .page-link { border-color: var(--espresso); background: var(--espresso); color: white; }.select2-container { min-width: 160px; font-size: 11px; }.select2-container--default .select2-selection--single,.select2-container--default .select2-selection--multiple { min-height: 40px; border-color: var(--line); border-radius: 10px; }.select2-container--default .select2-selection--single .select2-selection__rendered { padding: 6px 34px 6px 11px; line-height: 27px; }.select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px; }.select2-container--default .select2-selection--multiple { padding: 4px 7px; }.select2-dropdown { z-index: 1080; overflow: hidden; border-color: var(--line); border-radius: 10px; box-shadow: 0 12px 35px rgba(43,28,20,.13); }.select2-search__field { outline: 0; }.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background: var(--mocha); }.platform-plan-card.inactive { opacity: .68; }.platform-plan-card header > div { display: flex; align-items: center; gap: 6px; }.platform-plan-card header i { font-style: normal; }.platform-plan-card footer > div { display: flex; gap: 10px; }.platform-plan-card footer button { border: 0; padding: 0; color: var(--caramel-dark); font-size: 10px; font-weight: 800; }.platform-secret { display: flex; gap: 13px; margin-bottom: 20px; padding: 16px; border: 1px solid #d8b88f; border-radius: 14px; background: #fff5e7; }.platform-secret > span { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--espresso); color: var(--caramel); font-weight: 900; }.platform-secret > div { display: grid; gap: 5px; }.platform-secret code { width: fit-content; padding: 6px 9px; border-radius: 7px; background: white; color: var(--mocha); font-size: 15px; letter-spacing: .12em; }.platform-secret small { color: var(--muted); }.billing-overview { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; margin-bottom: 16px; }.billing-overview > div { min-width: 0; display: grid; gap: 3px; padding: 12px; border-radius: 10px; background: #f8f4ef; }.billing-overview small { color: var(--muted); font-size: 8px; text-transform: uppercase; }.billing-overview strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-color: #e9cbc4; }.danger-zone h2 { margin: 3px 0; font: 500 24px Georgia,serif; }.danger-zone p { margin: 0; color: var(--muted); font-size: 10px; }.platform-service-grid em { display: block; margin-top: 10px; color: #6c625b; font-size: 8px; font-style: normal; }.live-indicator.warning { color: var(--amber); border-color: #ead6b5; background: #fff8ed; }.live-indicator.warning i { background: var(--amber); box-shadow: 0 0 0 4px #f5ead6; }

@media (max-width: 1180px) {
    .hero-section { grid-template-columns: 1fr; padding-top: 55px; }.hero-copy { max-width: 760px; }.hero-product { max-width: 800px; }.feature-grid, .pricing-grid { grid-template-columns: repeat(3,1fr); }.mock-window { transform: none; }.operation-layout { grid-template-columns: 1fr 300px; }.product-grid { grid-template-columns: repeat(2,1fr); }.active-order-grid { grid-template-columns: repeat(3,1fr); }.tenant-grid,.platform-tenant-grid,.platform-service-grid { grid-template-columns: repeat(2,1fr); }.platform-kpi-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 900px) {
    .landing-header nav { display: none; }.feature-grid, .pricing-grid, .intelligence-section { grid-template-columns: 1fr; }.price-card.popular { transform: none; }.security-callout { align-items: flex-start; }.security-callout ul { flex-direction: column; }.auth-layout { grid-template-columns: 1fr; }.auth-art { min-height: 430px; }.app-shell { grid-template-columns: 76px minmax(0,1fr); }.app-sidebar { padding-left: 12px; padding-right: 12px; }.app-sidebar .brand-copy, .app-sidebar .nav-label, .app-sidebar .nav-section { display: none; }.app-nav a { justify-content: center; }.operation-layout { grid-template-columns: 1fr; }.current-order-panel { position: relative; top: 0; min-height: 480px; }.metric-grid { grid-template-columns: repeat(2,1fr); }.management-grid { grid-template-columns: 1fr; }.wide-card { grid-column: auto; }.kds-board { grid-template-columns: repeat(2,1fr); }.active-order-grid { grid-template-columns: repeat(2,1fr); }.platform-dashboard-grid,.platform-plan-grid { grid-template-columns: 1fr; }.platform-span-2,.platform-span-3 { grid-column: 1/-1; }.platform-attention { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 650px) {
    .landing-header { height: 72px; padding: 0 18px; }.landing-actions .link-login { display: none; }.hero-section { padding: 45px 18px 75px; }.hero-copy h1 { font-size: 49px; }.hero-actions { align-items: stretch; flex-direction: column; }.trust-row { flex-wrap: wrap; }.mock-window { height: 370px; grid-template-columns: 45px 1fr; }.mock-order { display: none; }.floating-stat { display: none; }.brand-strip { overflow: hidden; }.brand-strip p { display: none; }.brand-strip div { white-space: nowrap; }.section-pad { padding: 75px 18px; }.feature-grid, .pricing-grid { grid-template-columns: 1fr; }.section-heading h2, .intelligence-copy h2 { font-size: 42px; }.profit-kpis { grid-template-columns: 1fr; }.security-callout { margin: 0 18px 70px; flex-direction: column; }.landing-footer { grid-template-columns: 1fr; }.app-shell, .sidebar-collapsed { display: block; }.app-sidebar { position: fixed; left: 0; right: 0; bottom: 0; top: auto; height: 65px; padding: 8px 12px; flex-direction: row; z-index: 50; }.app-sidebar .brand, .sidebar-user, .nav-section { display: none; }.app-nav { flex: 1; flex-direction: row; justify-content: space-around; }.app-nav a { padding: 8px; }.app-nav a:nth-of-type(n+5) { display: none; }.nav-icon { font-size: 20px; }.app-main { padding-bottom: 65px; }.app-topbar { padding: 0 15px; }.trial-chip { display: none; }.app-content { padding: 20px 14px 40px; }.page-heading { align-items: flex-start; flex-direction: column; }.heading-actions { flex-wrap: wrap; }.catalog-toolbar { align-items: stretch; flex-direction: column; }.product-grid { grid-template-columns: repeat(2,1fr); }.product-visual { height: 90px; }.metric-grid, .kds-board, .active-order-grid, .tenant-grid,.platform-kpi-grid,.platform-tenant-grid,.platform-service-grid,.platform-detail-grid { grid-template-columns: 1fr; }.waste-table > div, .team-table > div { grid-template-columns: 1fr 1fr; }.recipe-grid { grid-template-columns: 1fr; }.support-banner { padding: 8px 12px; }.support-banner span { font-size: 10px; }.platform-filters { align-items: stretch; flex-direction: column; }.platform-search { min-height: 42px; min-width: 0; }.platform-filters select { min-width: 0; }.platform-tenant-hero { align-items: flex-start; flex-wrap: wrap; }.platform-tenant-hero > div:nth-child(2) { flex-basis: calc(100% - 75px); }.platform-company-list > a { grid-template-columns: 38px 1fr 16px; }.platform-company-list > a > div,.platform-company-list > a > .status-badge { display: none; }.platform-attention-links { flex-wrap: wrap; }.platform-detail-wide { grid-column: auto; }.form-grid,.billing-overview { grid-template-columns: 1fr; }.danger-zone { align-items: flex-start; flex-direction: column; }.dt-container .dt-layout-row { align-items: stretch; flex-direction: column; }.dt-container .dt-search .dt-input { width: 100%; min-width: 0; margin: 0!important; }.dt-container .dt-search label { width: 100%; }
}
@media print { .app-sidebar,.app-topbar,.receipt-actions,.support-banner,.app-content > .alert { display:none!important; }.app-shell { display:block; }.app-content { padding:0; }.receipt { box-shadow:none; border:0; } }

/* Beta: readable controls, visible focus and usable tablet navigation. */
[hidden] { display: none !important; }
:root { --caramel-dark: #855726; }
:focus-visible { outline: 3px solid #855726 !important; outline-offset: 3px; }
.skip-link { position: fixed; left: 12px; top: -80px; z-index: 2000; background: white; padding: 12px 20px; border: 2px solid var(--espresso); }
.skip-link:focus { top: 12px; }
.app-nav .nav-icon { flex-shrink: 0; }
.nav-section { color: #b9a99d; }
.sidebar-toggle, .link-button { min-height: 44px; min-width: 44px; }
.catalog-toolbar { flex-wrap: wrap; }
.catalog-toolbar .search-box { min-width: 180px; }
.catalog-result-count { font-size: 12px; color: var(--muted); }
.product-info small { font-size: 11px; }
.product-info p { font-size: 13px; height: auto; min-height: 36px; }
.product-info strong { font-size: 15px; padding-right: 45px; }
.product-card > form button, .product-card > button { width: 44px; height: 44px; }
.product-card > form select { max-width: calc(100% - 70px); margin-left: 10px; }
.category-tabs button, .btn, .btn-start, .btn-ready, .form-select, .form-control { min-height: 44px; }
.order-line strong, .order-line b, .active-order-card p { font-size: 14px; }
.order-line small { font-size: 12px; }
.active-order-card footer, .active-order-card footer > div { flex-wrap: wrap; gap: 8px; }
.active-order-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.form-text, .form-label { font-size: 14px; }
.app-sidebar { overflow-y: auto; }
@media (min-width: 901px) and (max-width: 1180px) { .catalog-toolbar { flex-direction: column; align-items: stretch; } }
@media (min-width: 651px) and (max-width: 900px) {
    .sidebar-expanded { grid-template-columns: 200px minmax(0,1fr); }
    .sidebar-expanded .nav-label, .sidebar-expanded .nav-section, .sidebar-expanded .brand-copy { display: block; }
    .sidebar-expanded .app-nav a { justify-content: flex-start; }
    .app-content { padding: 24px 18px 48px; }
    .operation-layout { grid-template-columns: minmax(0,1fr) 270px; gap: 12px; }
    .catalog-panel { padding: 12px; }
    .catalog-toolbar { flex-direction: column; align-items: stretch; }
    .category-tabs { max-width: 100%; }
    .product-grid { grid-template-columns: 1fr; }
    .current-order-panel { position: sticky; top: 86px; min-height: 450px; }
    .sidebar-expanded .operation-layout { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
    .app-sidebar { height: 76px; overflow: auto; }
    .app-main { padding-bottom: 90px; }
    .app-nav a:nth-of-type(n+5) { display: flex; }
    .app-nav { justify-content: flex-start; gap: 6px; }
    .app-nav a { flex-direction: column; gap: 2px; min-width: 66px; padding: 4px; }
    .app-sidebar .app-nav .nav-label { display: block; font-size: 10px; white-space: nowrap; }
    .sidebar-expanded .app-sidebar { height: auto; max-height: 50vh; }
    .sidebar-expanded .app-nav { flex-wrap: wrap; }
    .modal-dialog { margin-bottom: 90px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }

.dt-container .dt-input, .dt-container .page-link { min-height: 44px; font-size: 13px !important; }
.dt-container .dt-search label { display: block; min-width: 44px; }

.dt-container .dt-length select { min-width: 78px; padding-right: 28px !important; }
.dt-container .dt-info { font-size: 12px; }
@media (min-width: 651px) and (max-width: 900px) {
    .page-heading { flex-direction: column; align-items: stretch; gap: 16px; }
    .heading-actions { flex-wrap: wrap; justify-content: flex-start; }
    .heading-actions .btn, .cash-open, .live-indicator { white-space: nowrap; }
    .platform-filters { align-items: stretch; flex-direction: column; }
    .platform-search { min-width: 0; min-height: 44px; }
    .platform-filters select { min-width: 0; }
    .platform-check { align-self: flex-start; }
    .catalog-panel .product-grid { max-height: calc(100vh - 410px); overflow-y: auto; padding: 3px; }
    .catalog-panel .product-visual { display: none; }
    .catalog-panel .product-info p { min-height: 0; }
    .catalog-panel .product-info { padding: 12px; }
}

.mock-top > small, .feature-card .feature-number { color: #6c625b; }
.intelligence-copy h2 em { color: var(--caramel); }
.panel-head > span { color: #246342; }

.select2-container--default .select2-selection--single .select2-selection__placeholder { color: #6c625b; }

.feature-card.featured .feature-number { color: var(--caramel); }

/* Catalog tasks adapt to the available content width, including expanded navigation. */
.app-content { container-type: inline-size; }
.section-tabs { display: flex; flex-wrap: wrap; gap: 8px; border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 24px; }
.section-tabs a { padding: 12px 18px; border-radius: 10px; font-weight: 700; }
.section-tabs a[aria-current] { background: var(--espresso); color: white; }
.catalog-list, .product-editor > *, .editor-row > *, .dt-container { min-width: 0; }
.catalog-list .card-heading p, .recipe-editor .card-heading p { color: var(--muted); font-size: 14px; max-width: 65ch; margin: 8px 0; }
.catalog-list table, .recipe-editor table { font-size: 14px; width: 100% !important; }
.catalog-product-link { display: flex; align-items: center; gap: 12px; min-width: 0; }
.catalog-product-link strong { overflow-wrap: anywhere; }
.catalog-product-link img, .catalog-thumb-placeholder { width: 64px; height: 48px; object-fit: cover; border-radius: 8px; flex: none; }
.catalog-thumb-placeholder { display: grid; place-items: center; background: #f4e6d5; font-size: 22px; }
.setup-empty { text-align: center; padding: 40px 20px; }
.setup-empty > span { font-size: 36px; }
.setup-empty p { max-width: 50ch; margin: 12px auto 24px; color: var(--muted); }
.product-editor { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: 24px; align-items: start; }
.product-editor h2, .simple-editor h2 { margin-bottom: 24px; font-size: 22px; }
.editor-fields .form-label, .simple-editor .form-label, .photo-editor .form-label { margin-top: 18px; }
.editor-fields > .form-label:first-of-type, .simple-editor > .form-label:first-of-type { margin-top: 0; }
.editor-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.check-option { display: flex; align-items: flex-start; gap: 12px; padding: 18px 0; cursor: pointer; }
.check-option input { width: 20px; height: 20px; flex: none; margin-top: 3px; accent-color: var(--espresso); }
.check-option span { display: grid; gap: 4px; font-size: 14px; }
.check-option small { color: var(--muted); font-size: 13px; }
.photo-preview { aspect-ratio: 4/3; background: #f8f4ee; border: 1px dashed #a89482; border-radius: 12px; overflow: hidden; display: grid; place-items: center; }
.photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.photo-preview span { color: var(--muted); font-size: 14px; }
.photo-editor input[type=file] { width: 100%; font-size: 13px; }
.editor-actions { grid-column: 1/-1; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; padding-top: 16px; }
.simple-editor { max-width: 720px; }
.recipe-editor { margin-top: 32px; }
.recipe-change { display: grid; gap: 10px; padding: 18px 0; max-width: 480px; }
.recipe-change .heading-actions { flex-wrap: wrap; }
.recipe-add { margin-top: 20px; }
.product-visual img { width: 100%; height: 100%; object-fit: cover; }
.dt-container .dt-layout-row { flex-wrap: wrap; gap: 12px; }
.dt-container .dt-search input { max-width: 100%; }
@container (max-width: 760px) {
    .product-editor { grid-template-columns: minmax(0,1fr); }
    .photo-editor { max-width: 480px; width: 100%; }
}
@container (max-width: 560px) {
    .responsive-records thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .responsive-records, .responsive-records tbody { display: block; }
    .responsive-records tbody tr { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); padding: 16px 0; border-bottom: 1px solid var(--line); }
    .responsive-records tbody td { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 4px; border: 0; padding: 6px 0; box-shadow: none !important; overflow-wrap: anywhere; }
    .responsive-records tbody td[data-label]::before { content: attr(data-label); color: var(--muted); font-size: 12px; }
    .responsive-records tbody td:first-child { grid-column: 1/-1; padding-bottom: 12px; }
    .responsive-records tbody td:first-child::before, .responsive-records tbody td:last-child::before { display: none; }
    .responsive-records tbody td:last-child { align-items: flex-end; justify-content: center; }
    .responsive-records .catalog-product-link { flex: 1; }
    .responsive-records .dt-empty { display: block; }
    .dt-container .dt-layout-cell, .dt-container .dt-search { max-width: 100%; }
    .dt-container .pagination { flex-wrap: wrap; }
}
@container (max-width: 420px) {
    .editor-row { grid-template-columns: minmax(0,1fr); gap: 0; }
    .editor-actions .btn { flex: 1; }
    .dashboard-card { padding: 18px; }

}

.select2-container .select2-selection__rendered { font-size: 14px; }
@media (min-width:651px) and (max-width:900px) {
    .catalog-panel .product-card:has(.product-visual img) { display: grid; grid-template-columns: 64px minmax(0,1fr); }
    .catalog-panel .product-card:has(.product-visual img) .product-visual { display: block; height: 64px; margin: 10px 0 0 10px; }
}

.mobile-more { display: none; }
@media (max-width:650px) {
    .app-sidebar { overflow-x: hidden; }
    .app-nav { justify-content: space-around; min-width: 0; }
    .app-nav a { min-width: 0; flex: 1; }
    .app-nav a:nth-of-type(n+4) { display: none; }
    .mobile-more { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 64px; min-height: 48px; color: #eee3d7; background: transparent; border: 0; }
    .app-sidebar .mobile-more .nav-label { display: block; font-size: 11px; }
    .sidebar-expanded .app-sidebar { flex-direction: column; padding: 12px; max-height: 65vh; }
    .sidebar-expanded .app-nav { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); width: 100%; }
    .sidebar-expanded .app-nav a { display: flex; padding: 10px 4px; }
    .sidebar-expanded .mobile-more { width: 100%; margin-top: 8px; }
    .app-topbar > div:nth-child(2) { min-width: 0; }
    .app-topbar > div:nth-child(2) strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

.simple-editor > label:not(.check-option), .simple-editor .editor-row > label { display: block; width: 100%; margin-bottom: 18px; }
.simple-editor .form-actions { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 12px; }
.simple-editor textarea { min-height: 96px; resize: vertical; }

.card-heading a.btn-caramel { color: var(--espresso); }

.payment-due { display: grid; gap: 4px; color: var(--espresso); }
.payment-due strong { font-size: 32px; }
.payment-due small, .payment-due span { font-size: 14px; color: var(--muted); }
.payment-feedback { padding: 14px; background: #f8f4ee; border-radius: 10px; margin-top: 20px; font-size: 14px; }
.optional-fields { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 16px; }
.optional-fields summary { cursor: pointer; padding: 10px 0; font-weight: 700; }
.optional-fields summary small { font-weight: 400; }

@container (max-width:560px) {
    .settings-section-heading { align-items: stretch; flex-direction: column; gap: 12px; }
    .settings-section-heading > a.btn { align-self: flex-start; }
}

.mock-send {display:block;background:var(--caramel);color:var(--ink);padding:12px;border-radius:8px;text-align:center;font-weight:700;font-size:11px}

.support-banner { gap: 16px; }
.support-banner > span { min-width: 0; overflow-wrap: anywhere; }
.support-banner form { flex: none; }
@media (max-width:650px) { .support-banner span { font-size: 12px; line-height: 1.45; } }