/* --- Re:Device Base Styles (From Design System) --- */
*{box-sizing:border-box}body{margin:0;background:#f7f8f5;color:#202b30;font:16px/1.65 Arial,"Noto Sans CJK JP","Noto Sans CJK SC",sans-serif}html:lang(zh) body{font-family:Arial,"Noto Sans CJK SC",sans-serif}button{font:inherit;cursor:default}svg{vertical-align:middle;flex-shrink:0}.demo{height:30px;background:#e8efeb;color:#41605a;padding:4px 4.5%;font-size:11px;letter-spacing:1.1px;display:flex;justify-content:space-between}.demo span{letter-spacing:.1px}header{height:88px;background:#fff;display:flex;align-items:center;padding:0 4.5%;gap:44px;border-bottom:1px solid #e3e9e4}.brand{font-size:25px;font-weight:700;letter-spacing:-1.2px;display:flex;align-items:center;gap:10px;white-space:nowrap}.brandmark{display:flex;align-items:center;justify-content:center;width:34px;height:36px;background:#136f70;border-radius:10px;color:white;font-size:28px;font-weight:500}.brandmark span{font-size:16px;margin-left:-2px;margin-top:-11px}nav{display:flex;gap:28px;font-size:14px;white-space:nowrap}.headright{margin-left:auto;display:flex;gap:22px;align-items:center}.langs{display:flex;gap:13px;align-items:center;font-size:13px;color:#5a6965;white-space:nowrap}.langs .active{color:#136f70;border-bottom:2px solid #136f70;font-weight:700;padding:7px 0}.btn{display:inline-flex;align-items:center;justify-content:center;gap:18px;border-radius:12px;border:1px solid transparent;min-height:54px;padding:12px 24px;font-size:16px;font-weight:700;line-height:1.5}.btn.primary{background:#136f70;color:white}.btn.secondary{background:white;border-color:#b5c8c1;color:#185e5d}.btn.small{font-size:13px;min-height:42px;padding:9px 16px}.home{max-width:1164px;margin:auto}.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:62px;align-items:center;padding:48px 0 42px}.eyebrow{font-size:11px;letter-spacing:1.9px;color:#45766a;font-weight:700;display:block}.hero h1{font-size:43px;line-height:1.4;letter-spacing:-1.4px;margin:18px 0 18px;font-weight:700}.hero .lead{font-size:16px;line-height:1.9;max-width:500px;margin:0 0 26px;color:#4c5e59}.hero .btn{min-width:270px}.subnote{font-size:12px;color:#66756f;margin-top:12px}.hero-visual{position:relative;background:#e8efdf;border-radius:24px;min-height:372px;overflow:visible;box-shadow:0 16px 30px #213d3010}.hero-visual img{width:100%;height:260px;object-fit:cover;border-radius:24px 24px 0 0;display:block}.photo-label{padding:21px 28px 23px;display:flex;flex-direction:column;gap:6px;background:#e8eddf;border-radius:0 0 24px 24px}.photo-label>span:last-child{font-size:22px;letter-spacing:-.4px}.floating{position:absolute;right:20px;top:226px;background:white;border-radius:12px;padding:12px 18px;color:#136f70;font-size:12px;box-shadow:0 7px 16px #16282012;display:flex;gap:9px;align-items:center}.categories{padding:14px 0 35px}.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;gap:16px}.section-head h2{font-size:25px;margin:0 0 4px}.section-head p{font-size:13px;color:#687970;margin:0}.section-no{font-size:11px;color:#73827b;letter-spacing:1.5px}.category-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.category{background:white;border:1px solid #e1e7e1;border-radius:18px;padding:17px 17px 15px;display:grid;grid-template-columns:102px 1fr;gap:13px;align-items:center;position:relative;min-height:142px}.category .device-art{width:100%;height:104px}.category h3{font-size:18px;margin:0 0 6px}.category p{font-size:11px;color:#67776e;margin:0;line-height:1.8}.circle-arrow{position:absolute;right:12px;top:12px;color:#136f70}.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;border-top:1px solid #dde5dc;padding:28px 0}.trust-grid article{display:grid;grid-template-columns:44px 1fr;column-gap:14px}.icon-tile{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:13px;background:#eaf3ef;color:#136f70}.trust-grid .icon-tile{grid-row:span 2}.trust-grid h3{font-size:15px;margin:0 0 5px}.trust-grid p{font-size:12px;color:#6a7971;margin:0}.home-bottom{display:flex;justify-content:space-between;align-items:center;padding:35px 0;border-top:1px solid #e1e6df;gap:20px}.home-bottom h2{font-size:20px}.home-bottom span{font-size:12px;color:#136f70}footer{max-width:1164px;margin:auto;display:flex;justify-content:space-between;gap:24px;padding:27px 0;color:#66756e;font-size:11px}footer b{color:#263b32;font-size:17px}.form-page{max-width:1100px;margin:32px auto 55px}.steps{max-width:740px;margin:0 auto 30px;display:flex;gap:12px}.step{flex:1;display:flex;gap:10px;align-items:center;border-bottom:2px solid #dce4dc;padding:8px 0 14px;font-size:13px;color:#75847c}.step>span{width:24px;height:24px;background:#e9eee8;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px}.step.on,.step.done{border-color:#136f70;color:#136f70}.step.on>span,.step.done>span{background:#136f70;color:white}.page-title{margin-bottom:25px}.page-title h1{font-size:32px;line-height:1.5;letter-spacing:-.8px;margin:10px 0 5px}.page-title p{margin:5px 0;color:#63746b;font-size:14px}.panel{background:white;border:1px solid #dfe7e0;border-radius:20px;padding:28px}.soft-panel{background:#eaf3ef;border-radius:16px;padding:24px;color:#3c5c51}.soft-panel h3{font-size:20px;margin:12px 0}.soft-panel p{font-size:14px}.form-layout{display:grid;grid-template-columns:2.2fr 1fr;gap:26px;align-items:start}.device-select{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.select-device{border:1px solid #dce5dd;border-radius:14px;position:relative;padding:13px 9px;text-align:center;font-size:14px}.select-device .device-art{width:100%;height:125px;display:block}.selected{background:#edf5ef;border:1.5px solid #136f70!important}.select-device>svg:last-child:not(.device-art){position:absolute;right:10px;top:10px;color:#136f70}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:28px}label{display:block;font-size:14px;font-weight:700}.input{border:1px solid #c9d7ce;background:#fff;padding:13px 14px;border-radius:9px;min-height:51px;margin-top:8px;display:flex;justify-content:space-between;font-size:15px;font-weight:400}.link{color:#136f70;font-size:14px;text-decoration:underline;text-underline-offset:4px}.actions{display:flex;justify-content:flex-end;align-items:center;gap:22px;margin-top:27px}.text-btn{border:0;background:none;color:#4f685b;min-height:48px;padding:8px 16px;margin-right:auto}hr{border:0;border-top:1px solid #dee7de;margin:23px 0}.smalltext{font-size:12px!important;line-height:1.85;color:#67776d}.tag{display:inline-flex;align-items:center;border-radius:7px;padding:5px 9px;background:#eaf3ef;color:#256c58;font-size:11px;font-weight:700;letter-spacing:.1px}.tag.amber{background:#faf0dd;color:#836021}.symptom-panel{max-width:900px;margin:auto}.issue-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.issue{padding:12px 11px;border:1px solid #d8e2d8;border-radius:10px;display:flex;align-items:center;gap:10px;font-size:14px}.radio{width:17px;height:17px;border:1px solid #879c8e;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#136f70;line-height:1}.upload-row{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:24px}.upload-row h3{font-size:15px;margin:0 0 5px}.upload-row p{margin:0 0 10px}.upload{border:1px dashed #9db6a4;background:#f6f9f5;border-radius:14px;min-height:136px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;color:#1d6b60;font-size:14px}.upload span{font-size:10px;color:#758778}.textarea{margin:8px 0 12px;border:1px solid #c9d7ce;border-radius:10px;padding:14px;min-height:135px;font-size:14px;font-weight:400;color:#4c6556}.privacy{display:block}.estimate-layout{display:grid;grid-template-columns:1.6fr 1fr;gap:24px}.estimate-main{padding:28px 36px}.device-summary{display:flex;align-items:center;gap:17px;margin:14px 0}.device-summary .device-art{width:90px;height:104px}.device-summary h3{margin:0;font-size:22px}.device-summary p{margin:2px 0;font-size:14px;color:#668071}.price{font-size:39px;line-height:1.3;color:#136f70;font-weight:700;letter-spacing:-1px;margin:14px 0 2px}.price.medium{font-size:37px}.price+.smalltext{margin-top:5px}.work{margin:18px 0 12px;font-size:14px;font-weight:700}.notice{background:#f1f5ef;border-radius:12px;padding:13px 16px;display:flex;align-items:flex-start;gap:11px;color:#446052;margin:17px 0}.notice p{font-size:13px;line-height:1.8;margin:0}.estimate-main>p:not(.smalltext):not(.work){font-size:13px;color:#607064}.estimate-main>.btn{width:100%;margin-top:10px}.estimate-side{padding:28px}.estimate-side>svg{color:#136f70}.estimate-side h2{font-size:23px;margin:14px 0}.estimate-side p{font-size:14px;color:#637369}.estimate-side .btn{width:100%;font-size:14px}.side-bottom{margin-top:35px;border-top:1px solid #e1e8df;padding-top:22px}.side-bottom b{font-size:14px}.side-bottom p{font-size:13px}.manual-panel{max-width:740px;margin:auto}.manual-panel>.tag{margin-left:14px}.manual-panel h1{font-size:30px;margin:20px 0 10px}.manual-panel .lead{font-size:16px;color:#567060}.manual-panel .btn{margin-top:24px}.ship-layout{display:grid;grid-template-columns:1.35fr 1fr;gap:25px}.receipt{display:flex;gap:16px;align-items:center;padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid #e2e8df;color:#263d32}.receipt p{margin:4px 0 0;font-size:12px;color:#738273}.receipt h3{margin:0}.receipt>.tag{margin-left:auto}.receipt>svg{color:#136f70}.code-placeholder{background:#f2f5ef;border:1px dashed #b3c4b4;border-radius:18px;padding:35px 18px;display:flex;align-items:center;flex-direction:column;gap:12px;min-height:230px;color:#4c7459}.code-placeholder strong{font-size:16px}.code-placeholder small{font-size:11px}.pack-list>div{display:flex;gap:19px;align-items:center;border-bottom:1px solid #e4eade;padding:15px 0}.pack-list>div:last-child{border:0}.pack-list span{font-size:21px;color:#8da78e}.pack-list p{margin:0;font-size:14px}.ship-layout h2{font-size:24px;margin:0 0 15px}.quote-layout{display:grid;grid-template-columns:1.5fr 1fr;gap:24px}.quote-layout>.panel>h3{font-size:16px}.quote-layout>.panel>p{font-size:14px}.cost-table{margin-top:20px}.cost-table>div{display:flex;justify-content:space-between;padding:11px 1px;border-bottom:1px solid #e4e9df;font-size:14px}.cost-table .total{font-size:20px;padding-top:18px;border:0;color:#136f70}.approval h3{margin:0 0 15px;font-size:20px}.approval .btn{width:100%;font-size:14px;padding:13px 15px}.approval .consent{display:flex;gap:12px;align-items:flex-start;margin:23px 0}.checkbox{display:inline-flex;width:20px;height:20px;min-width:20px;background:#136f70;border-radius:4px;color:white;align-items:center;justify-content:center;font-size:13px;margin-top:3px}.consent p{font-size:13px;margin:0}.order-layout{display:grid;grid-template-columns:1.8fr 1fr;gap:25px}.journey{display:flex;justify-content:space-between;margin:30px 0 28px}.journey>div{flex:1;position:relative;text-align:center}.journey>div:before{content:'';position:absolute;height:2px;background:#dce5d9;left:0;right:0;top:13px;z-index:0}.journey>div:first-child:before{left:50%}.journey>div:last-child:before{right:50%}.journey>div>span{position:relative;display:flex;align-items:center;justify-content:center;border-radius:50%;width:27px;height:27px;background:#e5ebe0;margin:auto;font-size:12px;color:#768570}.journey .done:before{background:#136f70}.journey .done>span{background:#136f70;color:#fff}.journey .current>span{background:#f5e5c1;color:#6b521e;border:1px solid #d5bd87}.journey small{display:block;font-size:10px;margin-top:9px}.status-card{display:flex;gap:17px;background:#edf5ec;padding:20px;border-radius:15px}.status-card h2{font-size:23px;line-height:1.5;margin:0 0 10px}.status-card p{font-size:13px;color:#53715a;margin:0}.event{display:flex;gap:18px;margin-top:23px}.event>span{background:#136f70;border-radius:50%;width:8px;height:8px;margin:9px 0 0 8px}.event small{color:#77866f;font-size:11px}.event p{margin:4px 0;font-size:14px}.order-layout aside h2{font-size:22px;margin:15px 0}.order-layout aside>.btn{width:100%;font-size:14px}.order-layout aside>p{font-size:14px}.order-layout>.panel>.link{margin-top:25px}.admin-main{display:grid;grid-template-columns:228px 1fr;max-width:1280px;margin:auto;min-height:780px}.admin-nav{background:#f0f4ed;border-right:1px solid #d9e2d5;padding:30px 20px}.admin-nav h2{font-size:21px;margin:12px 0 30px}.admin-nav>div{padding:13px 10px;display:flex;align-items:center;gap:12px;font-size:13px;margin-bottom:8px;border:1px solid transparent;border-radius:9px}.admin-content{padding:30px 32px}.admin-content h1{font-size:28px;margin:6px 0}.admin-content>.section-head{margin-bottom:22px}.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;margin-bottom:23px}.metric-grid .panel{padding:18px 22px;display:grid;grid-template-columns:1fr auto}.metric-grid span{font-size:12px;color:#68785f;grid-column:1/-1}.metric-grid b{font-size:30px;color:#136f70}.metric-grid small{font-size:9px;color:#9ca993;align-self:center}.admin-table{padding:0;overflow:hidden;margin-bottom:22px}.admin-table table{width:100%;border-collapse:collapse;font-size:12px}.admin-table th{text-align:left;color:#67815f;background:#f5f7f1;padding:14px;font-size:11px;font-weight:400}.admin-table td{padding:17px 14px;border-top:1px solid #e5ebdf;white-space:nowrap}.admin-table td small{display:block;font-size:10px;color:#748669;margin-top:4px}.admin-table .tag{font-size:10px}.admin-detail{display:grid;grid-template-columns:1fr 1fr;gap:28px}.admin-detail .soft-panel{padding:18px}.admin-detail p{font-size:13px}.admin-detail .input{font-size:12px}.admin-content>.panel>.section-head h3{font-size:17px;margin:0}.admin-content>.panel>.section-head{margin-bottom:10px}.admin-detail .soft-panel b{font-size:14px}.admin-detail .soft-panel p{font-size:12px;margin-bottom:0}@media(min-width:1300px){.home{max-width:1200px}.hero{gap:70px;padding-top:54px}.hero h1{font-size:47px}.hero-visual{min-height:388px}.hero-visual img{height:276px}.floating{top:242px}}
@media(max-width:760px){body{font-size:16px}.demo{font-size:9px;height:auto;min-height:26px;padding:5px 18px}.demo>span{display:none}header{height:73px;padding:0 20px;gap:12px}.brand{font-size:22px}.brandmark{width:29px;height:31px;font-size:25px}.headright{gap:5px}nav,.headright .small{display:none}.langs{gap:10px;font-size:11px}.home{margin:0 20px}.hero{display:flex;flex-direction:column;gap:22px;padding:34px 0 30px;align-items:stretch}.hero .eyebrow{font-size:9px;letter-spacing:1.3px}.hero h1{font-size:32px;letter-spacing:-1px;line-height:1.45;margin:14px 0}.hero .lead{font-size:14px;line-height:1.85;margin-bottom:20px}.hero .btn{width:100%;font-size:15px;min-height:54px}.subnote{font-size:11px;margin-bottom:0}.hero-visual{min-height:220px;border-radius:18px}.hero-visual img{height:167px;border-radius:18px 18px 0 0;object-position:center 55%}.photo-label{padding:13px 16px;border-radius:0 0 18px 18px}.photo-label>span:last-child{font-size:17px}.floating{top:145px;right:12px;padding:8px 10px;font-size:10px;gap:5px}.floating svg{width:16px}.categories{padding:4px 0 25px}.section-head h2{font-size:21px;line-height:1.55}.section-head p{font-size:11px}.section-no{display:none}.category-grid{gap:8px}.category{display:block;padding:8px 7px 12px;min-height:0;border-radius:12px}.category .device-art{height:73px}.category h3{font-size:12px;margin:4px 0 3px;text-align:center}.category p{display:none}.category .circle-arrow{display:none}.trust-grid{display:block;padding:20px 0}.trust-grid article{margin:0 0 22px}.trust-grid h3{font-size:14px}.trust-grid p{font-size:11px}.home-bottom{display:block;padding:10px 0 20px}.home-bottom h2{font-size:18px}.home-bottom span{font-size:11px}footer{margin:0 20px;display:flex;flex-wrap:wrap;padding:20px 0;gap:14px;font-size:10px}.form-page{margin:22px 18px 34px}.steps{gap:7px;margin:0 0 28px}.step{font-size:10px;gap:5px;padding-bottom:10px}.step>span{height:21px;width:21px;font-size:10px;flex-shrink:0}.page-title{margin-bottom:20px}.page-title h1{font-size:27px;line-height:1.45;margin-top:12px}.page-title p{font-size:13px;line-height:1.8}.page-title .eyebrow{font-size:9px}.panel{padding:20px;border-radius:15px}.form-layout,.estimate-layout,.ship-layout,.quote-layout,.order-layout{display:flex;flex-direction:column;gap:18px}.form-layout>*,.estimate-layout>*,.ship-layout>*,.quote-layout>*,.order-layout>*{width:100%}.device-select{gap:7px}.select-device{padding:8px 4px;border-radius:10px;font-size:11px}.select-device .device-art{height:83px}.select-device>svg:last-child:not(.device-art){width:12px;right:6px;top:6px}.field-row{display:block;margin-top:20px}.field-row label{margin-top:15px}.input{font-size:15px;min-height:50px;padding:12px}.actions{margin-top:22px;gap:12px}.actions .btn{flex:1;padding:13px;font-size:14px}.form-layout .soft-panel{padding:20px}.form-layout .soft-panel h3{font-size:19px}.issue-grid{grid-template-columns:repeat(2,1fr);gap:9px}.issue{font-size:11px;padding:11px 8px;gap:7px;min-height:48px}.radio{width:14px;height:14px;flex-shrink:0}.upload-row{display:flex;flex-direction:column;gap:18px;margin-top:21px}.upload-row p.smalltext{font-size:11px!important}.upload{min-height:125px}.textarea{min-height:110px}.symptom-panel{padding:17px}.symptom-panel .actions{margin-top:16px}.text-btn{padding:8px;font-size:13px}.price{font-size:28px;letter-spacing:-.8px}.device-summary .device-art{width:69px;height:91px}.device-summary h3{font-size:21px}.device-summary p{font-size:12px}.estimate-main{padding:23px}.estimate-main .btn{padding:13px 10px;font-size:14px}.notice{padding:12px}.notice p{font-size:12px}.estimate-side h2{font-size:21px}.estimate-side p{font-size:13px}.side-bottom{margin-top:23px}.manual-panel{padding:24px}.manual-panel h1{font-size:24px}.manual-panel .lead{font-size:14px}.manual-panel>.tag{font-size:10px}.manual-panel .btn{width:100%;font-size:14px;padding:12px}.receipt{gap:11px;margin-bottom:18px;padding-bottom:18px}.receipt b{font-size:14px}.receipt .tag{font-size:9px}.receipt p{font-size:11px}.code-placeholder{min-height:216px;padding:25px 10px}.code-placeholder strong{font-size:14px}.code-placeholder small{font-size:10px}.pack-list p{font-size:13px}.ship-layout h2{font-size:22px}.quote-layout>.panel>p{font-size:13px}.quote-layout>.panel>h3{font-size:15px}.cost-table>div{font-size:13px}.cost-table .total{font-size:20px}.approval .btn{font-size:13px;line-height:1.6}.journey{margin:23px 0}.journey small{font-size:8px;line-height:1.6}.journey>div>span{width:25px;height:25px}.status-card{padding:15px;gap:12px}.status-card h2{font-size:20px}.status-card p{font-size:12px}.status-card .icon-tile{min-width:38px;width:38px;height:38px}.order-layout aside>.btn{font-size:15px}.admin-main{display:block}.admin-nav{display:none}.admin-content{padding:22px 14px}.admin-content h1{font-size:25px}.admin-content .section-head p{font-size:12px}.metric-grid{gap:8px}.metric-grid .panel{padding:12px}.metric-grid span{font-size:10px}.metric-grid b{font-size:25px}.admin-table{overflow:auto}.admin-detail{grid-template-columns:1fr;gap:15px}}

/* Workflow additions: pickup booking, order center and logistics states. */
button,input,select,textarea{font:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.55}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #8cc5bd;outline-offset:2px}
.pickup-page,.order-center{max-width:1164px}
.section-head.compact{margin-bottom:16px;align-items:flex-start}
.section-head.compact h2{font-size:18px;margin:0 0 3px}
.section-head.compact p{font-size:12px;margin:0;color:#728078}
.pickup-layout{display:grid;grid-template-columns:1.55fr .85fr;gap:24px;align-items:start}
.pickup-form{padding:30px 32px}
.form-section{display:flex;flex-direction:column;gap:12px}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.address-grid{grid-template-columns:.75fr 1.25fr}
.pickup-form label{font-size:14px}
.input-control{width:100%;min-height:50px;margin-top:8px;border:1px solid #c9d7ce;border-radius:9px;background:#fff;color:#263b32;padding:11px 13px;font-size:15px}
.input-control:disabled{background:#eef3ee;color:#7a8980}
.check-row{display:flex!important;align-items:flex-start;gap:10px;font-weight:400!important;line-height:1.65}
.check-row input{width:20px;height:20px;min-width:20px;margin:2px 0 0;accent-color:#136f70}
.return-section{margin-top:22px}
.consent-row{margin-top:20px;font-size:13px!important;color:#4b6257}
.pickup-side{display:flex;flex-direction:column;gap:18px}
.estimate-recap{padding:25px}
.estimate-recap h2{font-size:23px;margin:14px 0 4px}
.estimate-recap p{font-size:13px;margin:0;color:#607267}
.estimate-recap .price{font-size:31px;margin:18px 0 3px}
.pickup-side-note{padding:24px}
.pickup-side-note h3{font-size:18px;margin:14px 0 6px}
.pickup-side-note p{font-size:13px;line-height:1.8;color:#617269;margin:0}
.danger-notice{background:#fff2e6;color:#7b5220}
.danger-notice span{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#d99443;color:#fff;font-weight:700;flex-shrink:0}
.ai-evidence{display:flex;gap:9px;align-items:flex-start;background:#eef6f1;border-radius:11px;padding:11px 13px;margin:5px 0 16px;color:#3c6a58}
.ai-evidence span{font-size:17px;line-height:1.4}
.ai-evidence p{font-size:12px;line-height:1.7;margin:0}
.booking-success{max-width:880px;margin:0 auto;padding:34px 38px}
.success-icon{background:#136f70;color:#fff;font-size:24px;margin-bottom:12px}
.booking-success h1{font-size:30px;margin:18px 0 8px}
.booking-success .lead{font-size:15px;color:#607269;margin:0 0 24px}
.booking-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;border-top:1px solid #dfe8df;border-bottom:1px solid #dfe8df;padding:22px 0}
.booking-grid div{display:flex;flex-direction:column;gap:4px}
.booking-grid small,.tracking-grid small{font-size:11px;color:#718078;letter-spacing:.04em}
.booking-grid b,.tracking-grid b{font-size:14px;color:#263d32}
.packing-panel{background:#f2f6ef;border-radius:14px;padding:20px;margin-top:22px}
.packing-panel h3{font-size:16px;margin:0 0 5px}
.packing-row{display:flex;gap:13px;align-items:center;border-top:1px solid #dde7dc;padding:12px 0}
.packing-row span{font-size:12px;color:#73907d;font-weight:700}
.packing-row p{font-size:14px;margin:0}
.demo-note{margin-top:18px}
.booking-actions{justify-content:flex-end}
.booking-actions .btn:first-child{font-size:12px}
.order-shell{display:grid;grid-template-columns:1.55fr .85fr;gap:24px;align-items:start}
.order-main-card{padding:30px 32px}
.order-card-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
.order-card-head h2{font-size:27px;margin:16px 0 6px}
.order-card-head p{font-size:14px;line-height:1.8;color:#60736a;max-width:620px;margin:0}
.status-orb{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:#eaf3ef;color:#136f70;font-size:24px;flex-shrink:0}
.order-phases{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin:31px 0 25px;border-top:1px solid #dce6dc;padding-top:18px}
.order-phase{display:flex;flex-direction:column;gap:9px;color:#87948c;font-size:11px}
.order-phase span{display:flex;align-items:center;justify-content:center;width:27px;height:27px;border-radius:50%;background:#e8eee7;color:#708078;font-size:12px}
.order-phase small{font-size:11px;line-height:1.45}
.order-phase.done,.order-phase.current{color:#136f70}
.order-phase.done span{background:#136f70;color:#fff}
.order-phase.current span{background:#faedcf;color:#86642b;border:1px solid #d6bd86}
.next-action{display:flex;justify-content:space-between;gap:18px;align-items:center;border-radius:14px;background:#f1f6f1;padding:17px 18px}
.next-action .eyebrow{font-size:10px;letter-spacing:1px}
.next-action p{font-size:13px;color:#567064;margin:5px 0 0;line-height:1.65}
.next-action .btn{min-width:190px;flex-shrink:0}
.action-muted{font-size:13px;color:#718078;margin:0}
.order-side-stack{display:flex;flex-direction:column;gap:18px}
.order-device-card{padding:24px}
.order-device-card h2{font-size:22px;margin:12px 0 4px}
.order-device-card p{font-size:13px;color:#65766d;margin:0 0 15px}
.payment-card{padding:24px}
.payment-card .section-head{margin-bottom:4px}
.payment-amount{font-size:32px;color:#136f70;font-weight:700;margin:16px 0 4px}
.order-grid{display:grid;grid-template-columns:1.55fr .85fr;gap:24px;align-items:start;margin-top:24px}
.order-stream{display:flex;flex-direction:column;gap:18px}
.shipment-card{padding:23px 25px}
.shipment-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.shipment-head h2{font-size:20px;margin:8px 0 0}
.shipment-head .eyebrow{font-size:10px;letter-spacing:1.4px}
.shipment-status-row{display:flex;gap:12px;align-items:center;margin:21px 0 14px}
.shipment-status-row b{font-size:15px}
.shipment-status-row p{font-size:12px;color:#78867e;margin:3px 0 0}
.shipment-dot{display:block;width:12px;height:12px;border-radius:50%;background:#bac8bd;box-shadow:0 0 0 6px #eff4ef;flex-shrink:0}
.shipment-dot.in_transit{background:#d49742;box-shadow:0 0 0 6px #fbf1df}
.shipment-dot.received,.shipment-dot.delivered{background:#136f70;box-shadow:0 0 0 6px #e6f2ed}
.tracking-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;border-top:1px solid #e3eae3;padding-top:15px}
.tracking-grid div{display:flex;flex-direction:column;gap:4px}
.shipment-footer{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin-top:17px}
.issue-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.issue-actions .btn{font-size:12px;padding:8px 11px;min-height:40px}
.timeline-card{padding:23px 25px}
.timeline-list{display:flex;flex-direction:column}
.timeline-event{display:grid;grid-template-columns:18px 1fr;gap:12px;position:relative;padding-bottom:17px}
.timeline-event:last-child{padding-bottom:0}
.timeline-event:before{content:'';position:absolute;width:1px;top:10px;bottom:0;left:5px;background:#dce6dc}
.timeline-event:last-child:before{display:none}
.timeline-event>span{position:relative;z-index:1;width:11px;height:11px;margin-top:4px;border-radius:50%;background:#136f70;box-shadow:0 0 0 4px #e7f1eb}
.timeline-event small{font-size:11px;color:#839087}
.timeline-event p{font-size:14px;margin:3px 0 0}
.order-help{position:sticky;top:20px}
.order-help .soft-panel{padding:24px}
.order-help h3{font-size:18px;margin:14px 0 6px}
.order-help p{font-size:13px;line-height:1.8;color:#587066;margin:0 0 18px}
.order-help .btn{width:100%;font-size:14px}
.after-sales-card{padding:20px 24px;background:#fff9ed;border-color:#ecdcb7}
.after-sales-card p{font-size:13px;line-height:1.8;color:#69583a;margin:12px 0 0}

@media(max-width:760px){
  .pickup-layout,.order-shell,.order-grid{display:flex;flex-direction:column;gap:18px}
  .pickup-layout>*,.order-shell>*,.order-grid>*{width:100%}
  .pickup-form,.order-main-card,.booking-success{padding:22px 19px}
  .field-grid,.address-grid,.booking-grid,.tracking-grid{grid-template-columns:1fr}
  .pickup-form label{font-size:14px}
  .input-control{font-size:16px;min-height:51px}
  .booking-success h1{font-size:25px;line-height:1.45}
  .booking-actions{display:flex;flex-direction:column-reverse;align-items:stretch}
  .booking-actions .btn{width:100%;font-size:13px;min-height:50px}
  .order-card-head h2{font-size:23px}
  .order-card-head p{font-size:13px}
  .order-phases{overflow-x:auto;grid-template-columns:repeat(5,minmax(86px,1fr));padding-bottom:5px}
  .next-action{display:flex;flex-direction:column;align-items:stretch}
  .next-action .btn{width:100%;min-height:50px}
  .shipment-card,.timeline-card{padding:20px 18px}
  .shipment-head h2{font-size:19px}
  .issue-actions{justify-content:flex-start}
  .issue-actions .btn{flex:1;min-width:135px}
  .order-help{position:static}
}

/* Keep the prototype's simulated 390px mode responsive even when the browser viewport is wide. */
@media(min-width:761px){
  .proto-viewport-wrapper.mobile-mode .demo{font-size:9px;height:auto;min-height:26px;padding:5px 18px}
  .proto-viewport-wrapper.mobile-mode .demo>span{display:none}
  .proto-viewport-wrapper.mobile-mode header{height:73px;padding:0 20px;gap:12px}
  .proto-viewport-wrapper.mobile-mode .brand{font-size:22px}
  .proto-viewport-wrapper.mobile-mode .brandmark{width:29px;height:31px;font-size:25px}
  .proto-viewport-wrapper.mobile-mode nav,
  .proto-viewport-wrapper.mobile-mode .headright .small{display:none}
  .proto-viewport-wrapper.mobile-mode .headright{gap:5px}
  .proto-viewport-wrapper.mobile-mode .langs{gap:10px;font-size:11px}
  .proto-viewport-wrapper.mobile-mode .home{margin:0 20px}
  .proto-viewport-wrapper.mobile-mode .hero{display:flex;flex-direction:column;gap:22px;padding:34px 0 30px;align-items:stretch}
  .proto-viewport-wrapper.mobile-mode .hero h1{font-size:32px;line-height:1.45;margin:14px 0}
  .proto-viewport-wrapper.mobile-mode .hero .lead{font-size:14px;line-height:1.85;margin-bottom:20px}
  .proto-viewport-wrapper.mobile-mode .hero .btn{width:100%;font-size:15px;min-height:54px}
  .proto-viewport-wrapper.mobile-mode .hero-visual{min-height:220px;border-radius:18px}
  .proto-viewport-wrapper.mobile-mode .hero-visual img{height:167px;border-radius:18px 18px 0 0}
  .proto-viewport-wrapper.mobile-mode .category-grid{gap:8px}
  .proto-viewport-wrapper.mobile-mode .category{display:block;padding:8px 7px 12px;min-height:0;border-radius:12px}
  .proto-viewport-wrapper.mobile-mode .category .device-art{height:73px}
  .proto-viewport-wrapper.mobile-mode .category h3{font-size:12px;margin:4px 0 3px;text-align:center}
  .proto-viewport-wrapper.mobile-mode .category p,
  .proto-viewport-wrapper.mobile-mode .category .circle-arrow{display:none}
  .proto-viewport-wrapper.mobile-mode .form-page{margin:22px 18px 34px}
  .proto-viewport-wrapper.mobile-mode .steps{gap:7px;margin:0 0 28px}
  .proto-viewport-wrapper.mobile-mode .step{font-size:10px;gap:5px;padding-bottom:10px}
  .proto-viewport-wrapper.mobile-mode .step>span{height:21px;width:21px;font-size:10px;flex-shrink:0}
  .proto-viewport-wrapper.mobile-mode .page-title h1{font-size:27px;line-height:1.45;margin-top:12px}
  .proto-viewport-wrapper.mobile-mode .page-title p{font-size:13px;line-height:1.8}
  .proto-viewport-wrapper.mobile-mode .pickup-layout,
  .proto-viewport-wrapper.mobile-mode .order-shell,
  .proto-viewport-wrapper.mobile-mode .order-grid{display:flex;flex-direction:column;gap:18px}
  .proto-viewport-wrapper.mobile-mode .pickup-layout>*,
  .proto-viewport-wrapper.mobile-mode .order-shell>*,
  .proto-viewport-wrapper.mobile-mode .order-grid>*{width:100%}
  .proto-viewport-wrapper.mobile-mode .pickup-form,
  .proto-viewport-wrapper.mobile-mode .order-main-card,
  .proto-viewport-wrapper.mobile-mode .booking-success{padding:22px 19px}
  .proto-viewport-wrapper.mobile-mode .field-grid,
  .proto-viewport-wrapper.mobile-mode .address-grid,
  .proto-viewport-wrapper.mobile-mode .booking-grid,
  .proto-viewport-wrapper.mobile-mode .tracking-grid{grid-template-columns:1fr}
  .proto-viewport-wrapper.mobile-mode .input-control{font-size:16px;min-height:51px}
  .proto-viewport-wrapper.mobile-mode .booking-success h1{font-size:25px;line-height:1.45}
  .proto-viewport-wrapper.mobile-mode .booking-actions{display:flex;flex-direction:column-reverse;align-items:stretch}
  .proto-viewport-wrapper.mobile-mode .booking-actions .btn{width:100%;font-size:13px;min-height:50px}
  .proto-viewport-wrapper.mobile-mode .order-card-head{gap:12px}
  .proto-viewport-wrapper.mobile-mode .order-card-head h2{font-size:23px}
  .proto-viewport-wrapper.mobile-mode .order-card-head p{font-size:13px}
  .proto-viewport-wrapper.mobile-mode .order-phases{overflow:visible;grid-template-columns:repeat(5,minmax(0,1fr));padding-bottom:5px}
  .proto-viewport-wrapper.mobile-mode .order-phase{font-size:10px;min-width:0}
  .proto-viewport-wrapper.mobile-mode .order-phase small{font-size:10px;line-height:1.4}
  .proto-viewport-wrapper.mobile-mode .next-action{display:flex;flex-direction:column;align-items:stretch}
  .proto-viewport-wrapper.mobile-mode .next-action .btn{width:100%;min-height:50px}
  .proto-viewport-wrapper.mobile-mode .shipment-card,
  .proto-viewport-wrapper.mobile-mode .timeline-card{padding:20px 18px}
  .proto-viewport-wrapper.mobile-mode .shipment-head h2{font-size:19px}
  .proto-viewport-wrapper.mobile-mode .issue-actions{display:grid;grid-template-columns:1fr;justify-content:stretch}
  .proto-viewport-wrapper.mobile-mode .issue-actions .btn{width:100%;min-width:0}
  .proto-viewport-wrapper.mobile-mode .order-help{position:static}
  .proto-viewport-wrapper.mobile-mode footer{margin:0 20px;display:flex;flex-wrap:wrap;padding:20px 0;gap:14px;font-size:10px}
}


/* --- Prototype Shell & Control Toolbar --- */
.proto-toolbar {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: #1c2725;
  color: #f7f8f5;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans CJK SC", "Noto Sans CJK JP", sans-serif;
  font-size: 13px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  flex-wrap: wrap;
  gap: 12px;
}
.proto-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: #a7dfd3;
  letter-spacing: 0.5px;
}
.proto-brand .badge {
  background: #136f70;
  color: #fff;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
}
.proto-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.proto-btn-group {
  display: inline-flex;
  background: #283734;
  border-radius: 8px;
  padding: 2px;
  border: 1px solid #3d4f4b;
}
.proto-btn {
  background: transparent;
  color: #b7c7c3;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.proto-btn:hover {
  color: #fff;
}
.proto-btn.active {
  background: #136f70;
  color: #ffffff;
}
.proto-flow-select {
  background: #283734;
  color: #e5eee0;
  border: 1px solid #3d4f4b;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
}
.proto-viewport-wrapper {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  margin: 0 auto;
  min-height: calc(100vh - 54px);
  display: flex;
  flex-direction: column;
}
.proto-viewport-wrapper.mobile-mode {
  max-width: 414px;
  box-shadow: 0 0 50px rgba(0,0,0,0.18);
  border-left: 1px solid #d2ddd4;
  border-right: 1px solid #d2ddd4;
  background: #f7f8f5;
}

/* Fix accessibility contrast and font sizes */
.smalltext, .subnote, .notice p {
  color: #4a5c54 !important;
}
.category p {
  color: #4a5c54 !important;
}
.step {
  color: #53675c !important;
}

/* Interactive Cursor / Hover */
button, .btn, .select-device, .issue, .category, .link, [data-action] {
  cursor: pointer !important;
}
.select-device {
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.select-device:hover {
  border-color: #136f70;
}
.issue {
  cursor: pointer;
  transition: all 0.15s ease;
}
.issue:hover {
  border-color: #136f70;
  background: #fbfdfa;
}

/* Toast feedback */
.proto-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #1c2725;
  color: #fff;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 14px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.25);
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(15px);
  transition: all 0.25s ease;
  pointer-events: none;
}
.proto-toast.show {
  opacity: 1;
  transform: translateY(0);
}
.proto-toast.success {
  border-left: 4px solid #136f70;
}
.proto-toast.warning {
  border-left: 4px solid #b87a28;
}

/* Form input styling for interactivity */
select.input-select {
  width: 100%;
  border: 1px solid #c9d7ce;
  background: #fff;
  padding: 13px 14px;
  border-radius: 9px;
  min-height: 51px;
  margin-top: 8px;
  font-size: 15px;
  color: #202b30;
  outline: none;
}
select.input-select:focus {
  border-color: #136f70;
}
textarea.interactive-textarea {
  width: 100%;
  border: 1px solid #c9d7ce;
  border-radius: 10px;
  padding: 14px;
  min-height: 110px;
  font-size: 14px;
  font-family: inherit;
  color: #202b30;
  resize: vertical;
  margin: 8px 0 12px;
  outline: none;
}
textarea.interactive-textarea:focus {
  border-color: #136f70;
}