:root{--ink:#102033;--muted:#64748b;--line:#e5e7eb;--paper:#f7f8fa;--white:#fff;--accent:#c94f35;--gold:#f5c400;--ok:#177245;--warn:#a35b00;--danger:#b42318;--shadow:0 18px 50px rgba(16,32,51,.08)}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.55 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}.portal-shell{min-height:100vh}.portal-header{height:72px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,5vw,72px);position:sticky;top:0;z-index:5}.brand{display:flex;align-items:center;gap:11px;color:var(--ink);font-weight:800;letter-spacing:.04em;text-decoration:none;font-size:13px}.brand small{display:block;color:var(--muted);font-weight:500;letter-spacing:0;font-size:11px}.brand-mark{width:34px;height:34px;display:grid;place-items:center;background:var(--ink);color:#fff;border-radius:9px;font-size:12px}.header-actions{display:flex;align-items:center;gap:18px}.header-actions .text-button{text-decoration:none}.portal-main{max-width:1180px;margin:auto;padding:34px clamp(18px,5vw,72px) 70px}.grid{display:grid;gap:18px}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-2{grid-template-columns:repeat(2,1fr)}.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:0 8px 22px rgba(16,32,51,.03)}.hero{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:24px}.eyebrow{text-transform:uppercase;font-size:11px;letter-spacing:.12em;color:var(--accent);font-weight:800}.hero h1{font-size:clamp(27px,4vw,42px);line-height:1.08;margin:7px 0}.muted{color:var(--muted)}.summary strong{display:block;font-size:30px;margin:4px 0}.summary span{color:var(--muted);font-size:13px}.section-title{display:flex;justify-content:space-between;align-items:center;margin:30px 0 12px}.section-title h2{font-size:19px;margin:0}.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:9px;padding:11px 15px;font-weight:750;text-decoration:none;cursor:pointer;font-size:14px}.btn-primary{background:var(--ink);color:#fff}.btn-secondary{background:#fff;color:var(--ink);border:1px solid var(--line)}.btn-danger{color:var(--accent);background:#fff4f1}.text-button{background:none;border:0;color:var(--muted);cursor:pointer;font-weight:700}.hidden{display:none!important}.list{display:grid;gap:10px}.list-row{display:flex;justify-content:space-between;gap:18px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:15px 16px;background:#fff}.list-row h3{font-size:15px;margin:0 0 4px}.list-row p{margin:0;color:var(--muted);font-size:13px}.badge{display:inline-flex;padding:4px 9px;border-radius:99px;background:#f3f4f6;color:#475569;font-size:11px;font-weight:750;white-space:nowrap}.badge.ok{background:#eaf7ef;color:var(--ok)}.empty{padding:28px;text-align:center;color:var(--muted);border:1px dashed #cbd5e1;border-radius:12px}.login-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(360px,.8fr);min-height:calc(100vh - 140px);align-items:center;gap:clamp(28px,6vw,90px);max-width:1120px;margin:0 auto;padding:26px;border-radius:28px;background:linear-gradient(var(--accent),var(--accent)) left top/54px 2px no-repeat,linear-gradient(var(--accent),var(--accent)) left top/2px 54px no-repeat,linear-gradient(var(--accent),var(--accent)) right top/54px 2px no-repeat,linear-gradient(var(--accent),var(--accent)) right top/2px 54px no-repeat,linear-gradient(var(--accent),var(--accent)) left bottom/54px 2px no-repeat,linear-gradient(var(--accent),var(--accent)) left bottom/2px 54px no-repeat,linear-gradient(var(--accent),var(--accent)) right bottom/54px 2px no-repeat,linear-gradient(var(--accent),var(--accent)) right bottom/2px 54px no-repeat}.login-visual{position:relative;min-height:620px;display:flex;flex-direction:column;justify-content:center;padding:50px 0 30px}.login-visual:before{content:"";position:absolute;inset:10% -10% 3% -18%;z-index:-1;border-radius:42% 58% 48% 52%/44% 38% 62% 56%;background:radial-gradient(circle at 75% 35%,#ffe676 0 7%,transparent 7.5%),linear-gradient(145deg,#fff8d9 0%,#fff1a8 48%,#f7cf34 100%);transform:rotate(-3deg)}.visual-kicker{color:var(--accent);font-size:11px;font-weight:850;letter-spacing:.14em;text-transform:uppercase}.login-visual h1{font-size:clamp(38px,5vw,68px);line-height:.98;letter-spacing:-.055em;margin:15px 0 17px;max-width:560px}.login-visual h1 em{font-style:normal;color:var(--accent)}.login-visual>p{max-width:390px;color:#475569;font-size:16px;margin:0}.login-visual img{width:min(760px,110%);height:auto;object-fit:contain;align-self:center;margin:-18px -8% 12px -3%;filter:drop-shadow(0 22px 18px rgba(16,32,51,.18))}.visual-note{display:flex;align-items:center;gap:12px;font-size:11px;color:#475569}.visual-note span{color:var(--ink);font-weight:900;letter-spacing:.12em}.visual-note b{font-weight:650}.auth{max-width:480px;margin:0;padding:31px;box-shadow:var(--shadow);border-radius:20px}.auth h2{font-size:31px;letter-spacing:-.035em;margin:8px 0}.field{display:grid;gap:7px;margin:16px 0}.field label{font-size:13px;font-weight:750}.field input,.field select{width:100%;padding:12px;border:1px solid #cbd5e1;border-radius:9px;font:inherit}.notice{padding:11px 13px;background:#fff8e7;border:1px solid #f0d890;border-radius:9px;color:#765b13;font-size:13px}.link-button{display:block;margin:17px auto 0;padding:0;border:0;background:transparent;color:var(--accent);cursor:pointer;font:inherit;font-size:13px;font-weight:750}.link-button:hover{text-decoration:underline}.error{color:#b42318;font-size:13px}.timeline{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin:24px 0}.timeline-step{font-size:11px;color:#94a3b8;text-align:center}.timeline-step i{display:block;height:5px;background:#e2e8f0;border-radius:4px;margin-bottom:8px}.timeline-step.done{color:var(--ok);font-weight:750}.timeline-step.done i{background:var(--ok)}.detail-head{display:flex;justify-content:space-between;align-items:start;gap:20px}.price{font-size:24px;font-weight:800}.kv{display:grid;grid-template-columns:150px 1fr;border-top:1px solid var(--line);padding:10px 0}.kv:first-child{border-top:0}.portal-nav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}.portal-nav a{color:var(--muted);padding:8px 11px;border-radius:8px;text-decoration:none}.portal-nav a.active,.portal-nav a:hover{background:#fff;color:var(--ink)}@media(max-width:850px){.login-layout{grid-template-columns:1fr;min-height:auto;gap:16px;padding:20px 16px}.login-visual{min-height:0;padding:40px 0 0}.login-visual:before{inset:0 -8% 5% -8%}.login-visual img{width:100%;margin:-8px auto 12px}.visual-note{margin-bottom:10px}.auth{margin:0 auto 36px;width:100%}}@media(max-width:760px){.grid-3,.grid-2{grid-template-columns:1fr}.hero,.detail-head{display:block}.hero .btn{margin-top:16px}.timeline{overflow:auto;grid-template-columns:repeat(6,100px)}.kv{grid-template-columns:115px 1fr}.list-row{align-items:flex-start;flex-direction:column}.list-row .btn{width:100%}.login-visual h1{font-size:42px}}
.login-layout{background:none;padding:0;border-radius:0}
.auth{position:relative;background:linear-gradient(var(--accent),var(--accent)) left top/42px 2px no-repeat,linear-gradient(var(--accent),var(--accent)) left top/2px 42px no-repeat,linear-gradient(var(--accent),var(--accent)) right top/42px 2px no-repeat,linear-gradient(var(--accent),var(--accent)) right top/2px 42px no-repeat,linear-gradient(var(--accent),var(--accent)) left bottom/42px 2px no-repeat,linear-gradient(var(--accent),var(--accent)) left bottom/2px 42px no-repeat,linear-gradient(var(--accent),var(--accent)) right bottom/42px 2px no-repeat,linear-gradient(var(--accent),var(--accent)) right bottom/2px 42px no-repeat,#fff}
.password-wrap{position:relative}.password-wrap input{padding-right:46px}.password-toggle{position:absolute;right:9px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:0;background:transparent;color:#64748b;cursor:pointer;display:grid;place-items:center;border-radius:7px}.password-toggle:hover,.password-toggle:focus-visible{background:#f1f5f9;color:var(--ink)}.password-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.password-action{display:block;margin:10px auto 0;padding:0;border:0;background:transparent;color:var(--muted);cursor:pointer;font:inherit;font-size:13px;font-weight:750}.password-action:hover{text-decoration:underline;color:var(--ink)}
.google-action{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;margin-top:18px;padding:10px 14px;border:1px solid #d7dce3;border-radius:9px;background:#fff;color:var(--ink);cursor:pointer;font:inherit;font-weight:750}.google-action:hover{border-color:#94a3b8;background:#f8fafc}.google-action:disabled{opacity:.6;cursor:wait}.google-mark{width:18px;height:18px;display:block;flex:0 0 18px}.google-action.loading:after{content:"…";margin-left:2px}

/* ===== Customer Workspace UX V2 ===== */
.portal-main{max-width:1200px}
.portal-nav a{position:relative;font-weight:650;font-size:14px}
.portal-nav a.nav-primary{background:var(--ink);color:#fff;font-weight:800}
.portal-nav a.nav-primary:hover{background:#0b1826;color:#fff}
.nav-badge{display:inline-flex;min-width:18px;height:18px;padding:0 5px;margin-left:6px;border-radius:99px;background:var(--accent);color:#fff;font-size:10px;font-weight:800;align-items:center;justify-content:center}
.customer-hero{align-items:center}
.hero h1{font-size:clamp(26px,3.4vw,36px)}
.btn-lg{padding:14px 22px;font-size:15px;border-radius:11px}
.btn-sm{padding:8px 12px;font-size:13px;border-radius:8px}
.section-title h2{font-size:17px;font-weight:800}
.wq-list{display:grid;gap:10px;margin-bottom:6px}
.wq-card{display:flex;justify-content:space-between;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.wq-top{display:flex;align-items:center;gap:10px;margin-bottom:5px}
.wq-top b{font-size:15px}
.wq-summary{font-size:14px;color:var(--ink);font-weight:600;margin-bottom:3px}
.wq-meta{font-size:12.5px;color:var(--muted)}
.wq-action{flex:0 0 auto}
.badge.neutral{background:#f1f5f9;color:#475569}
.badge.attention{background:#fff2e2;color:var(--warn)}
.badge.progress{background:#e9f0ff;color:#1d4ed8}
.badge.success{background:#eaf7ef;color:var(--ok)}
.badge.danger{background:#fdecea;color:var(--danger)}
.empty-state{padding:26px 24px;text-align:center;border:1px dashed #cbd5e1;border-radius:14px;background:#fff}
.empty-state .es-what{font-weight:800;color:var(--ink);margin:0 0 4px;font-size:14.5px}
.empty-state .es-why{color:var(--muted);margin:0 0 14px;font-size:13px}
.filter-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.filter-tab{padding:7px 13px;border-radius:99px;border:1px solid var(--line);background:#fff;color:var(--muted);font-size:13px;font-weight:700;text-decoration:none}
.filter-tab.active,.filter-tab:hover{border-color:var(--ink);color:var(--ink);background:#f1f5f9}
.detail-cta{margin:16px 0}
.account-grid{margin-top:6px}
.card-title{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 16px;font-weight:800}
.salutation-grid.mini{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:14px}
.salutation-grid.mini .salutation-option{position:relative;margin:0}
.salutation-grid.mini .salutation-option input{position:absolute;opacity:0}
.salutation-grid.mini .salutation-option span{display:block;text-align:center;padding:9px 6px;border:1px solid #dbe2e8;border-radius:9px;color:#526274;font-size:12.5px;font-weight:700;cursor:pointer}
.salutation-grid.mini .salutation-option input:checked+span{border-color:var(--ink);background:var(--ink);color:#fff}
.field.read-only input{background:#f8fafc;color:var(--muted)}
.account-save-row{grid-column:1/-1;display:flex;align-items:center;justify-content:flex-end;gap:14px;margin-top:4px}
@media(max-width:760px){.wq-card{flex-direction:column;align-items:stretch}.wq-action{width:100%}.wq-action .btn{width:100%}.account-grid{grid-template-columns:1fr}.customer-hero{display:block}.customer-hero .btn{margin-top:14px}}

/* Order detail — action-first status, payment, artwork */
.action-card{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:8px}
.action-card.attention{border-color:#f3d8ab;background:#fffaf0}
.action-card.ok{border-color:#c9e8d4;background:#f4fbf6}
.action-icon{font-size:20px;flex:0 0 auto}
.action-card b{display:block;font-size:14.5px;margin-bottom:2px}
.action-card .btn{margin-left:auto}
.kv.total{font-weight:800;border-top:2px solid var(--ink)}
.payment-box{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)}
.payment-qr{display:block;width:180px;height:auto;margin:0 auto 14px;border:1px solid var(--line);border-radius:10px}
.artwork-form{display:grid;gap:10px;margin-top:12px}
.artwork-form input[type="text"],.artwork-form input[type="file"]{width:100%;border:1px solid #cbd5e1;border-radius:9px;padding:10px 12px;font:inherit}
.support-card{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.small{font-size:12px}
@media(max-width:760px){.action-card{flex-wrap:wrap}.action-card .btn{margin-left:0;width:100%}}

/* Address book */
.address-book{margin-top:2px}
.address-actions{display:flex;gap:6px;flex-wrap:wrap}
.address-form{margin-top:14px;padding:20px}
.address-form .grid-2{margin-bottom:6px}
.address-form select{width:100%;border:1px solid #cbd5e1;border-radius:9px;padding:10px 12px;font:inherit;background:#fff}
@media(max-width:760px){.address-card{flex-direction:column;align-items:stretch}.address-actions{width:100%}.address-actions .btn{flex:1}}