/* Screenshot reference: ivory canvas, yellow dimensional artwork, soft white panels.
   Shared presentation only; existing routes, field names and action scripts are unchanged. */
:root{--ink:#13130f;--muted:#706d65;--line:#eae8e1;--pale:#faf9f4;--yellow:#ffdc31;--blue:#302b1c;--violet:#a77b06;--canvas:#fffdf4;--panel:#fffefa;--cta:linear-gradient(110deg,#ffe943,#ffda20);--soft-shadow:0 5px 22px #69501908}
html:has(.customer-page){background:var(--canvas)}
body{background:var(--canvas);color:var(--ink)}
.customer-page{max-width:1080px;background:var(--canvas);box-shadow:none;position:relative;isolation:isolate;margin-top:0;border-radius:0;overflow:visible}
body:before,body:after{content:"";position:fixed;z-index:-1;pointer-events:none;width:280px;height:270px;background:linear-gradient(140deg,#ffe58285,#fff2b529);border-radius:34% 66% 68% 32% / 38% 42% 58% 62%;transform:rotate(22deg)}
body:before{top:-100px;left:-155px;box-shadow:60px 80px 0 -36px #ffec9b66,145px 125px 0 -76px #fff0ae77}
body:after{bottom:-190px;right:-85px;box-shadow:-65px -32px 0 -10px #ffe88d69,-125px 8px 0 -35px #ffe99970;transform:rotate(-22deg)}
main{min-width:0}.customer-page main{padding:0 18px 26px;min-height:calc(100vh - 230px)}
.customer-page .app-header{height:104px;padding:20px 24px;background:transparent}
.brand .brand-word{font-size:30px;letter-spacing:-1.5px}.brand img{width:40px;height:40px}.head-btn{width:44px;height:44px}.head-actions{gap:5px}
.card,.offer-detail,.table-wrap{border:1px solid var(--line);border-radius:19px;background:#ffffffee;box-shadow:var(--soft-shadow)}
.card{padding:22px}.service-row{border-radius:16px;box-shadow:var(--soft-shadow);border-color:var(--line)}
button,.button,.cart-btn{background:var(--cta);color:var(--ink);border-radius:12px;min-height:44px;box-shadow:0 4px 12px #eac83812}
.ghost,.tabs button,.quick>a{background:#f5f1e4;color:#514a35;box-shadow:none}.danger{background:#fff0ed;color:#a72f26}.text-button,.icon-button{background:none;box-shadow:none;color:#655a36}.text-button,.icon-button{min-height:44px;min-width:44px}
input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea{min-width:0;max-width:100%;min-height:46px;background:#fafafc;border:1px solid #e4e3e5;border-radius:11px;color:var(--ink);box-shadow:inset 0 1px 3px #24242403;font-size:16px}
input::placeholder,textarea::placeholder{color:#807e79;opacity:1}
input[type=checkbox],input[type=radio],progress{accent-color:#a6800b}
label{color:var(--ink)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #8e6a00;outline-offset:3px}
.page-title>a{display:grid;place-items:center;width:44px;height:44px;top:5px}.page-title{padding:12px 46px 22px}.customer-page .page-title h1{font-size:25px}
.sec-head a,.section-heading a,.auth-links a,.pill-link,td a{min-height:44px;min-width:44px;display:inline-flex;align-items:center}
.active-summary .pill-link{padding:8px 12px;vertical-align:middle}.active-summary{height:auto;min-height:108px}
.customer-page footer{padding:12px 20px 115px;color:var(--muted);font-size:13px;text-align:center}
.site-footer-line{display:block;margin-top:3px}.customer-page:not(:has(.customer-bottom-nav)) footer{padding-bottom:22px}
.customer-bottom-nav{width:min(calc(100% - 28px),520px);border-color:var(--line)}
/* Reference login composition: text right, exact cropped K left, no phone chrome. */
.customer-page:has(.reference-auth){max-width:760px}
.customer-page:has(.reference-auth) main{min-height:0;padding:0 10px 4px}
.customer-page:has(.reference-auth) .app-header{height:110px;padding:20px 24px}
.reference-auth{max-width:none;margin:8px auto 0;padding:22px 15px 23px;border:1px solid #f5f2e8;border-radius:19px;background:radial-gradient(ellipse at 3% 12%,#fff9dd75,transparent 45%),#ffffffeb;box-shadow:0 3px 18px #70580e07}
.auth-intro{display:flex;align-items:center;justify-content:space-between;gap:0;min-height:136px;margin:0 0 12px}
.auth-copy{width:62%;position:relative;z-index:1;text-align:right}.auth-copy .eyebrow{font-size:14px;color:#77766e}.auth-copy h1{font-size:clamp(26px,7.2vw,40px);font-weight:900;line-height:1.4;letter-spacing:-.8px;margin:7px 0 5px;white-space:normal}.welcome-wave{font-size:.8em;margin-right:5px;display:inline-block}.auth-copy p{font-size:13px;line-height:1.65;margin:0;color:#62615b}.dimensional-art{width:40%;height:auto;object-fit:contain;align-self:center;margin-left:-4px;max-width:221px}
.field-panel{border:1px solid #e5e4e3;border-radius:11px;background:#ffffffc9;padding:9px 10px 10px;margin:12px 0;font-size:15px;font-weight:700;box-shadow:0 1px 3px #2d270705}
.field-input{display:block;position:relative;margin-top:4px}.field-input>.icon{position:absolute;right:11px;top:50%;transform:translateY(-50%);z-index:1;width:20px;height:20px;color:#302f29;pointer-events:none}
.field-panel .field-input input{margin:0;padding:10px 38px 10px 11px;min-height:42px;font-size:14px;font-weight:400;text-align:right}
.field-panel input[dir=ltr]:not(:placeholder-shown){text-align:left}
.customer-page .auth-form>button{margin-top:0;min-height:50px;width:100%;font-size:21px;border-radius:12px;gap:10px;box-shadow:0 7px 18px #efd22d24}.auth-submit .icon{width:25px;height:25px;stroke-width:2.6}
.auth-links{display:flex;justify-content:space-between;gap:8px;align-items:center;margin:8px 0 12px}.auth-links a{gap:5px;color:#24221b;font-size:13px;line-height:1.4}.auth-links .icon{width:19px;height:19px;color:#a47b00}
.auth-benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #eeede7;padding-top:15px;gap:5px;text-align:center}.auth-benefits>div>span{display:grid;place-items:center;margin:0 auto 7px;width:48px;height:48px;border-radius:50%;background:radial-gradient(circle,#fff4cf,#fff9e8)}.auth-benefits .icon{width:26px;height:26px;stroke:#392e12}.auth-benefits b{display:block;font-size:14px;line-height:1.5}.auth-benefits small{font-size:12px;color:#76736b;margin-top:3px}.auth-note{font-size:11px;color:#756f61;text-align:center;line-height:1.7;margin:12px auto 0;max-width:560px;padding:0 12px}
/* The same panel / field / yellow action language throughout customer flows. */
.hero{background:radial-gradient(ellipse at 5% 20%,#fff5c9,transparent 50%),#ffffffeb;border:1px solid #f0ead8;border-radius:20px;box-shadow:var(--soft-shadow)}
.hero-copy h1{color:var(--ink)}.hero-copy p{color:#696356}.hero-cta{background:var(--cta);color:var(--ink);border-radius:12px;min-height:44px}.hero-art{height:auto}.hero-art>.dimensional-art{width:100%;margin:0;max-width:none}.hero-copy{max-width:59%}
.prod{border:1px solid #f1ede1}.prod-grid .prod{border-radius:17px}.prod .prod-media{aspect-ratio:16/9}.details-btn{min-height:44px}
.active-summary{border-radius:18px}.quick-actions a{color:#504a3b;white-space:normal}.quick-actions a>span{border-radius:50%}
.subscription-meta,.delivery-item,.credential-field,.info-box,.notice{background:#fffdf5;border-color:#ece5d4;color:#635d4d;border-radius:14px}.info-box h3,.support-event b,.delivery-item strong,.complete strong,.delivery-item:nth-child(2) strong,.subscription-meta strong{color:#544b35}.subscription-meta>div{color:#6c6555}
.delivery-timeline:before,.order-timeline>div{border-color:#e4decd}.delivery-timeline:before{background:#e4decd}.timeline-dot{background:#a49b83;border-color:#fffaf0}.delivery-item:nth-child(2) .timeline-dot{background:#b48a0b;box-shadow:0 0 0 2px #d8b642}.delivery-actions button{min-height:44px}
.support-event{border-color:#e7dbb3}.support-event:before{background:#d6aa20;border-color:#fff1bd}
.order-timeline .current>span{color:#8f6e00;border-color:#be980e}.order-timeline .current h3{color:#7e620a}.order-timeline p{color:#777161}
.upload-zone{border-color:#d1bd79;color:#6f5712;background:#fffdf6}.payment-choice{border-color:var(--line)}
.otp{gap:5px}.otp span{min-width:0;width:40px;height:60px;font-size:28px;background:#fffefa;color:#3b3119;border-color:#e8dec0}.countdown-row strong{color:#6c5717}.timer-ring{border-color:#fff1c0;border-top-color:#e5b923;border-right-color:#d5a91c;border-bottom-color:#b78e12}.activation-steps{color:#6c6453}
.tabs .selected,.table-tabs .selected{color:#4b3a08;background:#fff0a8;border-color:#d7af21}.empty{color:#746d5e;border-color:#d7ceb8}.badge{color:#615744;background:#f3eedf}.status-active,.status-approved,.status-available,.status-resolved{background:#e9f7ee;color:#25774d}.status-rejected,.status-problem,.status-disabled{background:#fff0ed;color:#a73c30}.status-pending,.status-waiting{background:#fff1c3;color:#7c5e05}.status-review{background:#eef3f7;color:#3b6076}
/* Admin stays a working desktop workspace, not an enlarged login screen. */
.admin-page{position:relative;isolation:isolate;background:var(--canvas)}.admin-sidebar{top:0;background:#fffdf8;border-color:var(--line)}.admin-page:has(.preview-banner) .admin-sidebar{top:24px}.admin-page .app-header{background:#fffef9d9;border-color:var(--line)}.admin-sidebar>a:not(.brand){color:#6a6455;border-radius:11px;min-height:44px}.admin-sidebar .selected{background:#fff1b4;border-right-color:#d5a900;color:#44350d!important}.profile>.icon{background:#fff0b7;color:#6b5411}
.header-search input:not([type]){background:#faf9f3}.stats .card{border-radius:18px;color:#716951}.stats strong{color:#201c13}.stats .card:after,.stats .card:nth-child(4):after{background:#fff2bf;color:#8c6d0f}.dashboard-panels>.card{border-radius:18px}.mini-order{color:#514a3a;border-color:var(--line)}.order-distribution>div{color:#6f6651}
th{background:#f8f3e2;color:#61563c}td{color:#554e3f;border-color:#efebe0}.table-wrap{max-width:100%}.table-actions summary{min-height:44px;min-width:44px;display:grid;place-items:center;border-radius:9px;background:#faf6e8;border-color:#e9dfc3}.table-actions button,.table-actions a{min-height:44px}.table-actions a{display:flex;align-items:center}.table-tabs button{min-height:44px}.inventory-add summary{color:#6e560e;min-height:44px}.product-types label{border-radius:14px;border-color:#e6decd}.product-types label:has(input:checked){background:#fff9de;border-color:#cca824}.product-types label>.icon{color:#886908;background:#fff0b4;border-radius:8px}.wizard-stepper .current{color:#7c5f03}.wizard-stepper .current b{color:#362a0a;background:#ffdd40}.wizard-stepper b{background:#f4efde;border-color:#fffaf0}.wizard-stepper span,.progress{color:#7b735f}.wizard-stepper:before{background:#e8ddbc}.progress progress{accent-color:#d0a418}.recipes summary,.quick a{background:#faf5e6;color:#51462b}.quick a{min-height:44px;display:inline-flex;align-items:center}
.notification-panel,.notification-row,.notification-toast{border-color:var(--line)}
.product-icon.generic{background:#fff2c5;color:#8a6a0e}.trend-chart polyline{stroke:#b68b0a}.trend-chart polygon{fill:#fff5cc}.trend-chart line{stroke:#eee8d7}.trend-chart text{fill:#7f755e}.donut-chart circle:nth-child(1){stroke:#eec42c}.donut-chart circle:nth-child(2){stroke:#75633a}.donut-chart circle:nth-child(3){stroke:#c9b273}.donut-chart circle:nth-child(4){stroke:#8cb2a2}.donut-chart circle:nth-child(5){stroke:#d4d0bd}
/* Long identifiers stay in their panel; wide tables/rails scroll locally only. */
.card,.auth-copy,.service-name,.header-search,.profile,.wizard-fields>*{min-width:0}.pre,pre,.credential-field,.service-name,.info-box,.warning,.card p{overflow-wrap:anywhere}pre{white-space:pre-wrap}button{max-width:100%}.table-wrap,.tabs,.wizard-stepper,.cat-scroll{overscroll-behavior-inline:contain}
@media(min-width:700px){.customer-page .app-header{padding:24px 32px;height:110px}.customer-page main{padding:0 32px 30px}.prod-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.hero{min-height:260px;padding:28px 42px}.hero-copy h1{font-size:40px}.hero-copy p{font-size:17px}.hero-art{max-width:240px;transform:none}.hero-cta{font-size:16px}.offer-detail{max-width:680px;margin:auto}.reference-auth{padding:30px 28px}.auth-intro{min-height:190px;margin-bottom:18px}.auth-copy h1{font-size:40px}.auth-copy p{font-size:17px}.auth-copy .eyebrow{font-size:18px}.field-panel{padding:12px 14px;font-size:18px;margin:16px 0}.field-panel .field-input input{font-size:16px;min-height:50px}.customer-page .auth-form>button{min-height:58px;font-size:25px}.auth-links a{font-size:16px}.auth-benefits{padding-top:22px}.auth-benefits>div>span{width:60px;height:60px}.auth-benefits b{font-size:17px}.auth-benefits small{font-size:14px}.customer-page:has(.reference-auth){max-width:700px}.customer-page:has(.reference-auth) .app-header{height:120px}.customer-page:has(.reference-auth) main{padding:0 16px 4px}.customer-page:has(.reference-auth) footer{padding-bottom:30px}}
@media(max-width:600px){.admin-page:has(.preview-banner) .admin-sidebar{top:auto}.admin-sidebar{border-color:var(--line)}.admin-sidebar>a:not(.brand){min-height:44px}.admin-page .app-header{gap:10px}.header-search{flex:1}.header-search input:not([type]){width:100%;padding-right:32px;font-size:12px}.profile{flex-shrink:0}.profile>.icon{display:none}.admin-page .card{padding:16px}.admin-page .stats{margin:18px 0}.product-types label{padding:18px 10px}.admin-page .page-description{overflow-wrap:anywhere}.wizard-stepper{max-width:100%}.auth-copy h1{font-size:clamp(25px,7.2vw,34px)}}
@media(max-width:350px){.customer-page .app-header{padding:17px 18px;height:90px}.customer-page:has(.reference-auth) .app-header{height:90px;padding:17px 19px}.brand .brand-word{font-size:27px}.brand img{width:36px;height:36px}.reference-auth{padding:16px 12px 18px}.auth-intro{min-height:120px}.auth-copy h1{font-size:25px;letter-spacing:-.9px}.auth-copy p{font-size:11px}.auth-copy .eyebrow{font-size:12px}.auth-links{gap:4px}.auth-links a{font-size:11px}.auth-links .icon{width:16px;height:16px}.auth-benefits b{font-size:12px}.auth-benefits small{font-size:11px}.auth-benefits>div>span{width:43px;height:43px}.customer-page main{padding-left:12px;padding-right:12px}.prod .prod-actions a{font-size:11px}.prod-actions{gap:4px;margin-right:7px;margin-left:7px}.countdown-row{gap:12px}.auth-note{font-size:10px}.hero-art{transform:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}