:root{--ink:#101828;--muted:#667085;--line:#e5edf0;--blue:#0aa8da;--blue2:#e6f8fd;--green:#0fa36d;--soft:#f6fafb}
*{box-sizing:border-box}body.portal-page{margin:0;background:#f5f9fa;color:var(--ink);font-family:"DM Sans",sans-serif}button{font-family:inherit;cursor:pointer}.portal-topbar{height:78px;background:rgba(255,255,255,.94);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 38px;position:sticky;top:0;z-index:50;backdrop-filter:blur(16px)}.portal-logo{color:var(--ink);font:800 1.45rem Manrope;text-decoration:none;letter-spacing:-.06em}.portal-logo span{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--ink);color:#fff;font-size:.9rem;margin-right:7px}.portal-logo b{color:var(--blue)}.portal-top-actions{display:flex;align-items:center;gap:22px}.portal-back{color:#667085;text-decoration:none;font-size:.75rem;font-weight:700}.portal-notify{position:relative;border:0;background:none;font-size:22px;color:#667085}.portal-notify i{position:absolute;right:1px;top:3px;width:6px;height:6px;background:#0aa8da;border-radius:50%}.portal-user{display:flex;align-items:center;gap:9px;border-left:1px solid var(--line);padding-left:20px}.portal-user>div:nth-child(2) strong,.portal-user>div:nth-child(2) small{display:block}.portal-user strong{font-size:.72rem}.portal-user small{font-size:.58rem;color:#98a2b3;margin-top:2px}.portal-user>span{color:#98a2b3;margin-left:8px}.portal-avatar{width:38px;height:38px;border-radius:12px;background:#101828;color:#fff;display:grid;place-items:center;font-size:.66rem;font-weight:800}
.portal-shell{display:flex;min-height:calc(100vh - 78px)}.portal-sidebar{width:250px;flex:none;background:#fff;border-right:1px solid var(--line);padding:30px 20px;display:flex;flex-direction:column}.portal-sidebar-label,.portal-eyebrow{font-size:8px;font-weight:800;letter-spacing:.16em;color:#98a2b3}.portal-sidebar nav{margin-top:18px}.portal-nav{width:100%;border:0;background:transparent;text-align:left;padding:13px 14px;border-radius:12px;color:#667085;font-size:.76rem;font-weight:700;margin-bottom:4px;display:flex;align-items:center;gap:11px}.portal-nav span{width:20px;text-align:center;font-size:17px}.portal-nav b{margin-left:auto;font-size:.58rem;padding:4px 7px;background:#f1f5f7;border-radius:99px;color:#667085}.portal-nav b.blue{background:var(--blue2);color:var(--blue)}.portal-nav.active{background:#edf9fc;color:#101828}.portal-nav.active span{color:var(--blue)}.portal-help{margin-top:auto;padding:18px;background:#f5fafb;border:1px solid #e4eff2;border-radius:18px}.portal-help>span{display:grid;place-items:center;width:28px;height:28px;background:#fff;border-radius:9px;color:var(--blue);font-weight:800}.portal-help strong{display:block;font-size:.73rem;margin-top:12px}.portal-help p{font-size:.61rem;color:#98a2b3;line-height:1.5;margin:5px 0 12px}.portal-help button{border:0;background:none;color:var(--blue);font-size:.62rem;font-weight:800;padding:0}.portal-logout{border:0;background:none;text-align:left;color:#98a2b3;font-size:.68rem;margin-top:22px;padding:5px 14px}
.portal-main{flex:1;min-width:0;padding:48px clamp(25px,4vw,65px);max-width:1480px}.portal-view{display:none}.portal-view.active{display:block;animation:portalIn .45s ease both}.portal-welcome{display:flex;justify-content:space-between;align-items:end;margin-bottom:35px}.portal-welcome h1,.portal-page-heading h1{font:800 clamp(2.5rem,4vw,4.5rem)/.95 Manrope;letter-spacing:-.065em;margin:14px 0 12px}.portal-welcome h1 em,.portal-page-heading h1 em,.order-hero-copy h2 em,.design-details h2 em{font-style:normal;color:var(--blue)}.portal-welcome p,.portal-page-heading p{color:var(--muted);font-size:.82rem;margin:0}.portal-primary{border:0;background:var(--ink);color:#fff;border-radius:99px;padding:13px 20px;font-size:.7rem;font-weight:800;box-shadow:0 10px 25px rgba(16,24,40,.12);transition:.25s}.portal-primary:hover{transform:translateY(-2px);box-shadow:0 15px 30px rgba(16,24,40,.16)}.portal-primary.small{padding:10px 15px}.portal-outline{border:1px solid #d8e3e7;background:#fff;color:var(--ink);border-radius:99px;padding:10px 15px;font-size:.68rem;font-weight:800}
.portal-hero-order{min-height:390px;border-radius:30px;background:#fff;border:1px solid var(--line);display:grid;grid-template-columns:1.1fr .9fr;overflow:hidden;box-shadow:0 25px 70px rgba(27,79,96,.07)}.order-hero-copy{padding:42px 45px}.order-id-row{display:flex;align-items:center;gap:8px;font-size:7px;letter-spacing:.12em;font-weight:800;color:#98a2b3}.order-id-row b{color:#101828;margin-left:6px}.live-dot{width:6px;height:6px;background:#10b981;border-radius:50%;box-shadow:0 0 0 5px rgba(16,185,129,.1);animation:livePulse 1.7s infinite}.order-hero-copy h2{font:800 clamp(2.7rem,4.3vw,4.6rem)/.93 Manrope;letter-spacing:-.065em;margin:22px 0 13px}.order-hero-copy>p{font-size:.8rem;color:#667085}.production-progress{margin:32px 0 25px;display:flex;align-items:center;gap:14px}.production-track{height:6px;background:#edf2f4;border-radius:99px;overflow:hidden;flex:1}.production-track span{display:block;height:100%;background:linear-gradient(90deg,#0aa8da,#57d8ef);border-radius:99px}.production-progress strong{font:800 .8rem Manrope}.production-progress small{display:block;color:#98a2b3;font-size:.55rem;margin-top:3px}.order-meta{display:flex;gap:28px;padding:17px 0;border-top:1px solid #edf2f5;border-bottom:1px solid #edf2f5;margin-bottom:18px}.order-meta span,.order-meta b{display:block}.order-meta span{font-size:.55rem;color:#98a2b3}.order-meta b{font-size:.68rem;margin-top:5px}.approved{color:var(--green)}.text-action{border:0;background:none;padding:0;color:var(--blue);font-size:.68rem;font-weight:800}.order-visual{position:relative;display:grid;place-items:center;background:radial-gradient(circle at 50% 46%,#d9f8ff,#f6fcfd 65%);overflow:hidden;perspective:1000px}.portal-orbit{position:absolute;border:1px solid rgba(10,168,218,.15);border-radius:50%;transform:rotateX(65deg)}.orbit-a{width:450px;height:450px}.orbit-b{width:320px;height:320px}.portal-bottle{position:relative;width:155px;height:320px;transform:rotateY(-13deg) rotateX(2deg);transform-style:preserve-3d;animation:portalFloat 4s ease-in-out infinite}.pb-cap{position:absolute;top:0;left:51px;width:53px;height:28px;border-radius:8px;background:linear-gradient(90deg,#aeb8bf,#fff,#a8b1b7);z-index:3}.pb-neck{position:absolute;top:25px;left:45px;width:65px;height:58px;border-radius:15px 15px 7px 7px;background:linear-gradient(90deg,#c1e7ee,#fff,#b4dfe7);border:1px solid #c4e8ee}.pb-body{position:absolute;top:68px;left:4px;width:147px;height:244px;border-radius:35px;background:linear-gradient(90deg,#bde4ea,#fff 43%,#c5e9ee);border:1px solid #c7e9ee;overflow:hidden;box-shadow:inset -16px 0 25px rgba(58,140,165,.08)}.pb-glass{position:absolute;left:21px;top:14px;width:15px;height:205px;background:rgba(255,255,255,.6);filter:blur(3px);border-radius:50%}.pb-label{position:absolute;left:11px;right:11px;top:75px;height:115px;background:#101828;border-radius:14px;color:#fff;text-align:center;padding:14px 5px;box-shadow:0 18px 30px rgba(16,24,40,.17)}.pb-label small{font-size:5px;letter-spacing:.14em;color:#58d8f2}.pb-label strong{font:800 17px/.88 Manrope;display:block;margin:8px}.pb-label i{display:block;width:23px;height:23px;background:repeating-linear-gradient(45deg,#fff 0 2px,#101828 2px 4px);margin:auto;border:3px solid #fff;border-radius:3px}.visual-chip{position:absolute;background:#fff;border:1px solid #e2ecef;border-radius:99px;padding:9px 12px;font-size:6px;letter-spacing:.08em;font-weight:800;box-shadow:0 15px 35px rgba(20,75,90,.1)}.chip-top{top:28%;right:10%}.chip-bottom{bottom:22%;left:10%}
.portal-section-title{display:flex;justify-content:space-between;align-items:end;margin:46px 0 18px}.portal-section-title span{font-size:7px;letter-spacing:.15em;color:#98a2b3;font-weight:800}.portal-section-title h3{font:800 1.65rem Manrope;margin:7px 0 0;letter-spacing:-.04em}.portal-section-title button{border:0;background:none;color:var(--blue);font-size:.68rem;font-weight:800}.recent-orders{display:grid;grid-template-columns:1fr 1fr;gap:14px}.recent-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:17px;display:flex;align-items:center;gap:13px}.recent-card>div:nth-child(2){flex:1}.recent-card span,.recent-card strong,.recent-card small{display:block}.recent-card span{font-size:.52rem;color:#98a2b3}.recent-card strong{font-size:.72rem;margin:5px 0}.recent-card small{font-size:.58rem;color:#667085}.mini-order-bottle{width:38px;height:58px;border-radius:11px 11px 9px 9px;background:linear-gradient(90deg,#c4eaf0,#fff,#bee3e9);position:relative;flex:none}.mini-order-bottle:after{content:"";position:absolute;left:4px;right:4px;top:20px;height:20px;background:#d71920;border-radius:4px}.mini-order-bottle.gold:after{background:#111}.status{font-size:.58rem!important;padding:6px 8px;border-radius:99px!important;white-space:nowrap}.status.production{background:#e9f8fc;color:#008ab7}.status.delivered{background:#e8f8f1;color:#087b52}
.portal-page-heading{margin-bottom:35px}.portal-page-heading h1{margin-bottom:10px}.order-list-card,.design-approval-card,.revision-history,.document-card,.profile-card{background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:0 18px 55px rgba(27,79,96,.05)}.order-list-card{padding:25px;margin-bottom:16px}.order-list-head{display:flex;justify-content:space-between;align-items:center}.order-list-head span,.order-list-head strong{display:block}.order-list-head span{font-size:7px;color:#98a2b3;letter-spacing:.12em;font-weight:800}.order-list-head strong{font:800 1.05rem Manrope;margin-top:5px}.journey{position:relative;display:flex;justify-content:space-between;margin:55px 0 35px;gap:5px}.journey-line{position:absolute;left:5%;right:5%;top:15px;height:3px;background:#e9eff2;z-index:0}.journey-line span{display:block;height:100%;background:#0aa8da}.journey-step{position:relative;z-index:1;text-align:center;width:14%;font-size:.6rem}.journey-step i{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;margin:auto;background:#edf2f4;color:#98a2b3;font-style:normal;font-size:8px;font-weight:800}.journey-step.done i{background:#e7f8fd;color:#0aa8da}.journey-step.current i{background:#101828;color:#fff;box-shadow:0 0 0 7px rgba(16,24,40,.06);animation:livePulse 1.7s infinite}.journey-step b,.journey-step small{display:block}.journey-step b{margin-top:9px;font-size:.59rem}.journey-step small{color:#98a2b3;margin-top:3px;font-size:.53rem}.order-list-footer{display:flex;justify-content:flex-end;align-items:center;gap:10px;border-top:1px solid #edf2f5;padding-top:17px}.order-list-footer>span{margin-right:auto;color:#98a2b3;font-size:.56rem}.past-order-info{display:flex;align-items:center;gap:20px;padding-top:25px}.past-bottle{width:80px;height:125px;border-radius:19px;background:linear-gradient(90deg,#c6eaf0,#fff,#c3e7ec);position:relative}.past-bottle:after{content:"";position:absolute;left:7px;right:7px;top:47px;height:43px;border-radius:7px;background:#d71920}.past-order-info strong{font-size:.8rem}.past-order-info p{font-size:.65rem;color:#98a2b3;margin:7px 0 13px}
.design-approval-card{display:grid;grid-template-columns:1fr 1fr;overflow:hidden}.design-preview{min-height:560px;display:grid;place-items:center;background:radial-gradient(circle,#dff9ff,#f8fcfd 68%);position:relative;perspective:1000px}.design-preview-bottle{width:165px;height:370px;position:relative;animation:portalFloat 4s ease-in-out infinite}.dp-cap{position:absolute;left:57px;top:0;width:52px;height:30px;border-radius:8px;background:linear-gradient(90deg,#aaa,#fff,#aaa)}.dp-body{position:absolute;left:4px;top:24px;width:157px;height:340px;border-radius:42px;background:linear-gradient(90deg,#c2e8ee,#fff 45%,#bde5eb);overflow:hidden;border:1px solid #c7e8ed}.dp-label{position:absolute;left:12px;right:12px;top:95px;height:185px;background:#d71920;border-radius:18px;color:#fff;text-align:center;padding:22px 8px}.dp-label small{font-size:6px;font-weight:800;letter-spacing:.13em}.dp-label strong{display:block;font:800 26px/.9 Manrope;margin:15px}.dp-qr{width:45px;height:45px;background:repeating-linear-gradient(45deg,#fff 0 3px,#111 3px 5px);border:5px solid #fff;margin:auto;border-radius:3px}.preview-badge,.preview-note{position:absolute;font-size:6px;letter-spacing:.13em;font-weight:800;padding:8px 10px;border-radius:99px;background:#fff;border:1px solid #e0ebee;box-shadow:0 10px 25px rgba(20,75,90,.08)}.preview-badge{top:25px;left:25px;color:#0aa8da}.preview-note{bottom:25px;right:25px;color:#98a2b3}.design-details{padding:50px}.design-status{display:inline-flex;gap:6px;padding:8px 10px;background:#eaf9f3;color:#0c875b;border-radius:99px;font-size:.58rem;font-weight:800}.design-details h2{font:800 2.6rem/.95 Manrope;letter-spacing:-.06em;margin:25px 0 14px}.design-details>p{color:#667085;font-size:.76rem;line-height:1.7}.design-checks{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:25px 0}.design-checks span{font-size:.62rem;background:#f6fafb;border-radius:10px;padding:10px;color:#475467}.design-actions{display:flex;gap:9px;margin-top:28px}.design-safe{display:block;color:#98a2b3;font-size:.56rem;margin-top:14px}.revision-history{margin-top:16px;padding:25px}.revision-history>div:first-child span{font-size:7px;color:#98a2b3;letter-spacing:.14em}.revision-history h3{font:800 1.3rem Manrope;margin:7px 0 20px}.revision-row{display:grid;grid-template-columns:55px 1fr 150px 90px;align-items:center;border-top:1px solid #edf2f5;padding:15px 0}.revision-row>b{font:800 .7rem Manrope}.revision-row strong{font-size:.68rem}.revision-row small,.revision-row span{font-size:.57rem;color:#98a2b3}.revision-row .approved{color:var(--green);font-weight:800}
.document-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.document-card{padding:18px;display:flex;align-items:center;gap:13px}.document-card>span{width:42px;height:42px;border-radius:12px;background:#edf9fc;color:#0aa8da;display:grid;place-items:center;font-size:.55rem;font-weight:800}.document-card div{flex:1}.document-card strong,.document-card small{display:block}.document-card strong{font-size:.7rem}.document-card small{font-size:.57rem;color:#98a2b3;margin-top:4px}.document-card button{border:1px solid #dfe8eb;background:#fff;border-radius:50%;width:32px;height:32px;color:#667085}
.profile-card{padding:35px;display:grid;grid-template-columns:80px 1fr;gap:25px}.profile-avatar-large{width:70px;height:70px;border-radius:20px;background:#101828;color:#fff;display:grid;place-items:center;font:800 1rem Manrope}.profile-fields{display:grid;grid-template-columns:1fr 1fr;gap:17px}.profile-fields label{font-size:.63rem;font-weight:800}.profile-fields input,.profile-fields select{display:block;width:100%;margin-top:7px;border:1px solid #dce7eb;border-radius:13px;padding:11px;outline:0;font:.7rem "DM Sans"}.profile-card>.portal-primary{grid-column:2;width:max-content}
.portal-toast{position:fixed;right:25px;bottom:25px;z-index:100;max-width:340px;background:#101828;color:#fff;border-radius:15px;padding:14px 18px;font-size:.68rem;box-shadow:0 20px 45px rgba(16,24,40,.2);display:none}.portal-toast.show{display:block;animation:toastIn .35s ease}
.portal-loader{position:fixed;inset:0;background:#fff;z-index:1000;display:grid;place-items:center;transition:.5s}.portal-loader.hide{opacity:0;visibility:hidden}.portal-loader-mark{width:42px;height:42px;background:#101828;color:#fff;border-radius:13px;display:grid;place-items:center;font-weight:800;margin:auto}.portal-loader strong{font:800 1.4rem Manrope;position:absolute;margin-top:105px}.portal-loader strong span{color:var(--blue)}
@keyframes portalIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes portalFloat{50%{transform:translateY(-10px) rotateY(-13deg)}}@keyframes livePulse{50%{box-shadow:0 0 0 7px rgba(16,185,129,.04)}}@keyframes toastIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:1000px){.portal-sidebar{width:80px;padding:25px 12px}.portal-sidebar-label,.portal-nav:not(.active) b,.portal-nav{font-size:0}.portal-nav span{font-size:18px}.portal-nav{justify-content:center}.portal-help{display:none}.portal-logout{font-size:0;text-align:center}.portal-logout:first-letter{font-size:18px}.portal-hero-order{grid-template-columns:1fr}.order-visual{min-height:380px}.portal-main{padding:35px 25px}}
@media(max-width:700px){.portal-topbar{padding:0 15px;height:66px}.portal-back{display:none}.portal-user>div:nth-child(2),.portal-user>span{display:none}.portal-shell{min-height:calc(100vh - 66px)}.portal-sidebar{position:fixed;bottom:0;left:0;right:0;width:100%;height:65px;z-index:40;flex-direction:row;padding:7px 8px;border-right:0;border-top:1px solid var(--line);justify-content:space-around}.portal-sidebar nav{display:flex;width:100%;justify-content:space-around;margin:0}.portal-nav{width:auto;margin:0;padding:8px 11px}.portal-nav span{font-size:18px}.portal-nav.active{background:#edf9fc}.portal-help,.portal-logout{display:none}.portal-main{padding:28px 16px 90px}.portal-welcome{display:block}.portal-welcome .portal-primary{margin-top:20px}.portal-hero-order{border-radius:22px}.order-hero-copy{padding:28px}.order-meta{gap:15px;flex-wrap:wrap}.order-visual{min-height:330px}.recent-orders,.document-grid{grid-template-columns:1fr}.journey{overflow-x:auto;padding-bottom:15px;min-width:700px}.order-list-card{overflow:hidden}.order-list-footer{flex-wrap:wrap}.order-list-footer>span{width:100%;margin-bottom:5px}.design-approval-card{grid-template-columns:1fr}.design-preview{min-height:430px}.design-details{padding:30px}.design-checks,.profile-fields{grid-template-columns:1fr}.revision-row{grid-template-columns:45px 1fr}.revision-row small,.revision-row span{display:none}.profile-card{grid-template-columns:1fr}.profile-card>.portal-primary{grid-column:1}}