:root { --ink:#18312a; --muted:#718078; --line:rgba(255,255,255,.72); --panel:rgba(255,255,248,.78); --green:#11886d; --blue:#315f91; --danger:#b53a3a; --shadow:rgba(41,64,48,.22); }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; background:linear-gradient(rgba(248,249,234,.58),rgba(225,239,222,.52)),url('/assets/customer-bg.png') center/cover fixed; }
button,.button { border:1px solid var(--green); border-radius:10px; padding:10px 16px; background:var(--green); color:#fff; font:inherit; font-weight:750; cursor:pointer; text-decoration:none; text-align:center; }
button:hover,.button:hover { filter:brightness(.96); }
button:disabled { opacity:.45; cursor:not-allowed; }
.ghost { background:rgba(255,255,255,.58); border-color:rgba(24,49,42,.18); color:var(--ink); }
.danger { background:var(--danger); border-color:var(--danger); }
input,select,textarea { width:100%; border:1px solid rgba(24,49,42,.18); border-radius:9px; padding:10px 11px; color:var(--ink); background:rgba(255,255,255,.78); font:inherit; }
input[readonly] { color:var(--ink); background:rgba(226,235,226,.82); cursor:default; }
textarea { min-height:90px; resize:vertical; }
label { display:grid; gap:6px; color:var(--muted); font-size:13px; font-weight:750; }
h1,h2,h3,p { margin-top:0; }
h1 { margin-bottom:6px; font-size:30px; }
h2 { margin-bottom:5px; }
h3 { margin-bottom:16px; }
.hidden { display:none !important; }
.glass,.panel,.metrics article,.modal { border:1px solid var(--line); background:var(--panel); box-shadow:0 24px 70px var(--shadow); backdrop-filter:blur(18px) saturate(1.08); }
.login-shell { min-height:100vh; display:grid; place-items:center; padding:24px; }
.login-card { width:min(460px,100%); border-radius:24px; padding:38px; }
.stack { display:grid; gap:16px; }
.eyebrow { margin-bottom:7px; color:var(--blue); text-transform:uppercase; letter-spacing:.1em; font-size:11px; font-weight:850; }
.muted { color:var(--muted); }
.app { min-height:100vh; display:grid; grid-template-columns:245px 1fr; gap:18px; padding:18px; }
.sidebar { position:sticky; top:18px; height:calc(100vh - 36px); display:flex; flex-direction:column; gap:25px; padding:24px; border-radius:20px; }
.sidebar nav { display:grid; gap:8px; }
.sidebar .nav { text-align:left; color:var(--ink); background:transparent; border-color:transparent; }
.sidebar .nav.active { background:var(--green); color:white; }
.sidebar > .ghost { margin-top:auto; }
.system-switcher { border-top:1px solid rgba(24,49,42,.12); padding-top:16px; }
.system-switcher summary { cursor:pointer; color:var(--blue); font-size:12px; font-weight:850; letter-spacing:.04em; text-transform:uppercase; }
.system-links { display:grid; gap:7px; margin-top:10px; }
.system-link { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 10px; border:1px solid rgba(24,49,42,.12); border-radius:9px; color:var(--ink); background:rgba(255,255,255,.5); text-decoration:none; font-size:12px; font-weight:800; }
.system-link:hover { border-color:var(--green); background:rgba(255,255,255,.9); }
.system-link small { color:var(--muted); font-size:10px; font-weight:750; }
.system-link.current { color:#fff; border-color:var(--green); background:var(--green); }
.system-link.current small { color:rgba(255,255,255,.8); }
.role-pill { display:inline-block; padding:4px 9px; border-radius:999px; color:#fff; background:var(--blue); font-size:11px; font-weight:800; }
.content { min-width:0; padding:12px 8px 40px; }
.tab { display:none; }
.tab.active { display:block; animation:fade .18s ease-out; }
@keyframes fade { from { opacity:.35; transform:translateY(4px); } }
.topbar { display:flex; justify-content:space-between; gap:18px; align-items:center; margin-bottom:18px; }
.topbar h1 { margin-bottom:0; }
.panel { padding:18px; border-radius:15px; margin-bottom:18px; }
.panel-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:18px; }
.metrics.four { grid-template-columns:repeat(4,minmax(0,1fr)); }
.metrics.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.metrics article { min-height:110px; display:grid; align-content:center; gap:9px; padding:18px; border-radius:15px; }
.month-slider-panel { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:16px; padding:14px; }
.month-slider { display:flex; align-items:center; gap:9px; overflow-x:auto; padding:0 3px; scrollbar-width:thin; scroll-snap-type:x proximity; }
.month-slide { flex:0 0 auto; min-width:112px; height:48px; padding:0 17px; border-color:rgba(24,49,42,.14); color:var(--ink); background:rgba(255,255,255,.72); scroll-snap-align:center; }
.month-slide:hover { border-color:var(--green); color:var(--green); background:#fff; }
.month-slide.active { border-color:var(--green); color:#fff; background:var(--green); box-shadow:0 8px 20px rgba(17,136,109,.22); }
.month-slider-year { display:block; min-width:112px; }
.month-slider-year select { min-width:112px; height:48px; padding:0 34px 0 17px; border-radius:10px; color:var(--ink); background:rgba(255,255,255,.72); font-size:14px; font-weight:750; line-height:1.2; }
.metrics span { color:var(--muted); font-size:13px; font-weight:750; }
.metrics strong { font-size:29px; }
.grid { display:grid; gap:14px; }
.grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.bars { display:grid; gap:12px; }
.status-horizontal { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; }
.status-card:nth-child(-n+3) { grid-column:span 2; }
.status-card:nth-child(n+4) { grid-column:span 3; }
.status-card { width:100%; min-height:105px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:12px; padding:17px; border:1px solid var(--line); border-radius:15px; color:var(--ink); background:rgba(255,255,248,.78); box-shadow:0 12px 32px rgba(41,64,48,.12); text-align:left; transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease; }
.status-card:hover { filter:none; transform:translateY(-2px); border-color:rgba(17,136,109,.45); box-shadow:0 16px 36px rgba(41,64,48,.18); }
.status-card span { color:var(--muted); font-size:14px; font-weight:800; white-space:normal; }
.status-card strong { color:var(--ink); font-size:29px; line-height:1; }
.bar-head { display:flex; justify-content:space-between; gap:12px; font-size:13px; }
.bar-track { height:9px; border-radius:99px; background:rgba(24,49,42,.1); overflow:hidden; }
.bar-fill { height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--green),#31aa88); }
.table-wrap { overflow:auto; padding:0; }
.table-wrap .panel-heading { padding:18px 18px 0; }
table { width:100%; border-collapse:collapse; }
th,td { padding:12px 14px; border-bottom:1px solid rgba(24,49,42,.09); text-align:left; white-space:nowrap; font-size:13px; }
th { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.04em; }
tbody tr:hover { background:rgba(17,136,109,.06); }
.choice-trigger { width:100%; height:51px; min-height:51px; display:flex; align-items:center; justify-content:flex-start; padding:0 12px; color:var(--ink); background:rgba(255,255,255,.78); border:1px solid rgba(24,49,42,.18); border-radius:10px; text-align:left; }
.choice-trigger:hover { filter:none; border-color:var(--green); background:rgba(255,255,255,.94); }
.choice-trigger.selected { border-color:rgba(17,136,109,.48); background:rgba(231,246,238,.9); }
.choice-trigger .choice-value { font-size:14px; font-weight:800; white-space:normal; }
.choice-dialog { width:min(980px,calc(100vw - 28px)); }
.choice-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; max-height:52vh; overflow:auto; padding:2px; }
.choice-add-row { display:grid; grid-template-columns:minmax(0,1fr) 170px auto; gap:10px; }
.choice-option-row { position:relative; min-width:0; }
.choice-option { width:100%; min-height:58px; padding:11px 42px 11px 13px; color:var(--ink); background:rgba(255,255,255,.72); border-color:rgba(24,49,42,.14); text-align:left; white-space:normal; font-weight:650; }
.choice-option span,.choice-option small { display:block; }
.choice-option small { margin-top:4px; color:var(--muted); }
.choice-option.selected small { color:rgba(255,255,255,.82); }
.choice-delete { position:absolute; top:9px; right:9px; z-index:1; width:30px; height:30px; padding:0; border-radius:50%; border-color:rgba(178,50,50,.18); color:#b23232; background:#fff; font-size:19px; line-height:1; }
.choice-delete:hover { color:#fff; background:#b23232; border-color:#b23232; }
.choice-option:hover { filter:none; border-color:var(--green); background:rgba(231,246,238,.9); }
.choice-option.selected { color:#fff; background:var(--green); border-color:var(--green); }
.choice-dialog footer { display:flex; justify-content:flex-end; gap:10px; }
.toolbar { display:grid; grid-template-columns:minmax(240px,1fr) minmax(140px,220px) auto; gap:10px; }
.orders-toolbar { grid-template-columns:minmax(260px,1fr) minmax(130px,180px) minmax(130px,180px) auto; }
.toolbar input:only-child { grid-column:auto; }
.pagination { display:flex; justify-content:flex-end; align-items:center; gap:12px; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.order-id-field { max-width:none; }
#orderForm input:not([type="hidden"]), #orderForm .choice-trigger, #orderForm .completed-date-picker { box-sizing:border-box; height:51px; min-height:51px; border-width:1px; border-radius:10px; }
.completed-date-picker { position:relative; display:flex; align-items:center; padding:0 12px; border:1px solid rgba(24,49,42,.18); background:rgba(255,255,255,.82); font-weight:700; cursor:pointer; }
.completed-date-picker:focus-within { border-color:var(--green); box-shadow:0 0 0 3px rgba(20,145,113,.12); }
.completed-date-picker input[type="date"] { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
#orderForm input.price-selected { border-color:rgba(17,136,109,.48); background:rgba(231,246,238,.9); color:var(--ink); font-weight:800; }
.form-grid.compact { grid-template-columns:repeat(5,minmax(0,1fr)); align-items:end; }
.wide { grid-column:1/-1; }
footer.wide { display:flex; justify-content:flex-end; gap:10px; }
.modal { width:min(760px,calc(100vw - 28px)); max-height:calc(100vh - 28px); padding:0; border-radius:18px; color:var(--ink); }
.wide-modal { width:min(1080px,calc(100vw - 28px)); }
.modal::backdrop { background:rgba(18,36,30,.56); backdrop-filter:blur(5px); }
.modal > header { position:sticky; top:0; z-index:2; display:flex; justify-content:space-between; align-items:center; gap:15px; padding:17px 20px; background:rgba(250,252,244,.95); border-bottom:1px solid rgba(24,49,42,.1); }
.modal > header h2 { margin:0; }
.dialog-close { width:40px; height:40px; padding:0; border-radius:50%; background:rgba(24,49,42,.06); border-color:transparent; color:var(--ink); font-size:24px; }
.modal-body { padding:20px; max-height:calc(100vh - 105px); overflow:auto; }
.detail-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.detail-grid > div { padding:12px; border-radius:10px; background:rgba(255,255,255,.6); }
.detail-grid > .detail-wide { grid-column:1/-1; }
.detail-grid > .detail-p11 { grid-area:1/1; }.detail-grid > .detail-p12 { grid-area:1/2; }.detail-grid > .detail-p13 { grid-area:1/3; }
.detail-grid > .detail-p21 { grid-area:2/1; }.detail-grid > .detail-p22 { grid-area:2/2; }
.detail-grid > .detail-p31 { grid-area:3/1; }.detail-grid > .detail-p32 { grid-area:3/2; }.detail-grid > .detail-p33 { grid-area:3/3; }
.detail-grid > .detail-p41 { grid-area:4/1; }.detail-grid > .detail-p42 { grid-area:4/2; }
.detail-grid > .detail-p51 { grid-area:5/1; }.detail-grid > .detail-p52 { grid-area:5/2; }.detail-grid > .detail-p53 { grid-area:5/3; }
.detail-grid > .detail-p61 { grid-area:6/1/6/4; }
.detail-grid span { display:block; margin-bottom:4px; color:var(--muted); font-size:11px; font-weight:800; text-transform:uppercase; }
.timeline { display:grid; gap:9px; }
.timeline li { border-left:3px solid var(--green); padding:9px 12px; background:rgba(255,255,255,.55); border-radius:0 9px 9px 0; }
.timeline li span { display:block; color:var(--muted); font-size:11px; margin-top:3px; }
.rules li { margin:8px 0; }
.small-btn { padding:6px 10px; border-radius:8px; font-size:12px; }
#toast { position:fixed; right:22px; bottom:22px; z-index:20; max-width:380px; padding:13px 17px; border-radius:10px; color:#fff; background:var(--ink); box-shadow:0 15px 40px rgba(0,0,0,.25); opacity:0; transform:translateY(12px); pointer-events:none; transition:.2s; }
#toast.show { opacity:1; transform:none; }
.pivot-grid { display:grid; grid-template-columns:minmax(360px,.65fr) minmax(0,1.35fr); gap:16px; align-items:start; }
.pivot-panel { min-width:0; margin-top:0; }
.pivot-filter { margin-top:16px; display:flex; align-items:end; justify-content:space-between; gap:18px; }
.pivot-filter label { min-width:180px; }
.pivot-wrap { max-height:520px; overflow:auto; border:1px solid rgba(24,49,42,.08); border-radius:10px; cursor:grab; touch-action:pan-x pan-y; scrollbar-gutter:stable; }
.pivot-wrap.dragging { cursor:grabbing; user-select:none; }
.pivot-table { min-width:620px; }
.amount-pivot .pivot-table { min-width:360px; }
.pivot-table th { font-size:13px; }
.pivot-table td { font-size:15px; }
.pivot-table th,.pivot-table td { padding:14px 13px; }
.pivot-table tbody tr { background:transparent; }
.pivot-table tbody tr > th,.pivot-table tbody tr > td { transition:background-color .14s ease; }
.pivot-table tbody tr:hover { background:transparent; }
.pivot-table tbody tr:hover > th,.pivot-table tbody tr:hover > td { background:#e8f2ea; }
.pivot-panel h3 { font-size:20px; margin-bottom:16px; }
.pivot-table thead th { position:sticky; top:0; z-index:2; background:#eef4ed; }
.pivot-table tbody th,.pivot-table tfoot th { position:sticky; left:0; z-index:1; background:#f7f8f0; text-align:left; }
.pivot-table tfoot th,.pivot-table tfoot td { position:sticky; bottom:0; background:#e5eee7; border-top:2px solid rgba(17,136,109,.35); }
.pivot-table td { text-align:right; font-variant-numeric:tabular-nums; }
.pivot-value-button { padding:2px 4px; border:0; border-radius:5px; color:var(--ink); background:transparent; font-weight:inherit; text-decoration:underline; text-decoration-color:rgba(17,136,109,.35); text-underline-offset:3px; }
.pivot-value-button:hover { filter:none; color:var(--green); background:rgba(17,136,109,.09); }
.address-cell { min-width:260px; white-space:normal; line-height:1.45; }
.profile-layout { display:grid; grid-template-columns:minmax(300px,34%) minmax(0,1fr); gap:16px; min-height:680px; height:calc(100vh - 135px); }
.profile-directory,.profile-workspace { min-height:0; height:100%; margin:0; }
.profile-directory { display:grid; grid-template-rows:auto auto minmax(0,1fr) auto; gap:13px; padding:16px; overflow:hidden; }
.profile-directory-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.profile-directory-head h3 { margin:0; font-size:18px; }
.profile-directory-head > strong { display:grid; place-items:center; min-width:42px; height:32px; padding:0 10px; border-radius:999px; color:var(--green); background:rgba(17,136,109,.1); font-size:14px; }
.profile-search { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
.profile-search button { padding-inline:13px; }
.order-directory-filters { display:grid; gap:8px; }
.order-layout .profile-directory { grid-template-rows:auto auto auto minmax(0,1fr) auto; }
.order-pivot-filter { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; border-radius:9px; color:#286b59; background:#e1f2e8; font-size:12px; font-weight:800; }
.order-pivot-filter button { padding:5px 8px; font-size:11px; }
.order-filter-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.order-list-card { padding-right:112px; }
.order-list-status { position:absolute; right:13px; top:14px; padding:6px 9px; border-radius:999px; color:#286b59; background:#d8f1e8; font-size:10px; font-weight:850; }
.order-list-upfront-done { position:absolute; right:13px; bottom:13px; padding:5px 9px; border-radius:999px; color:#fff; background:#7356a5; font-size:10px; font-weight:850; }
.order-workspace-section { padding:22px 24px; border-bottom:1px solid rgba(24,49,42,.08); }
.order-workspace-section:last-child { border-bottom:0; }
.order-record-hero { grid-template-columns:minmax(0,1fr) minmax(220px,.42fr); min-height:123px; }
.order-record-hero, .order-workspace-section { font-weight:700; }
.order-record-hero .profile-hero-identity h2 { font-weight:400; }
.order-workspace-section .detail-grid strong, .order-record-hero strong { font-weight:700; }
.order-details-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.profiles-list { min-height:0; display:grid; align-content:start; gap:9px; overflow-y:auto; padding:2px 5px 2px 2px; }
.profile-list-card { position:relative; width:100%; min-height:88px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:7px; padding:14px 15px; border:1px solid rgba(24,49,42,.08); border-radius:14px; color:var(--ink); background:rgba(255,255,255,.56); box-shadow:0 8px 22px rgba(41,64,48,.07); text-align:left; }
.profile-list-card:hover { filter:none; border-color:rgba(17,136,109,.42); background:rgba(244,251,245,.9); }
.profile-list-card.selected { border-color:#4c92e9; background:rgba(232,242,255,.9); box-shadow:0 10px 26px rgba(49,95,145,.14); }
.profile-list-name { max-width:100%; font-size:14px; font-weight:850; line-height:1.3; white-space:normal; }
.profile-list-meta { color:var(--muted); font-size:12px; font-weight:550; white-space:normal; }
.profile-empty-list,.profile-empty { display:grid; place-items:center; align-content:center; min-height:220px; padding:30px; text-align:center; }
.profile-pagination { justify-content:space-between; gap:8px; }
.profile-pagination button { padding:8px 10px; }
.profile-pagination .muted { font-size:11px; text-align:center; }
.profile-workspace { padding:0; overflow-y:auto; }
.profile-hero { position:sticky; top:0; z-index:3; display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,.7fr) auto; align-items:center; gap:24px; padding:22px 24px; background:rgba(250,252,244,.94); border-bottom:1px solid rgba(24,49,42,.09); backdrop-filter:blur(18px); }
.profile-hero h2 { margin:0 0 4px; font-size:25px; }
.profile-hero p:last-child { margin:0; }
.profile-hero-nric { color:var(--muted); font-size:13px; font-weight:700; }
.profile-hero-contact { display:grid; gap:10px; }
.profile-hero-contact > div { display:grid; gap:3px; }
.profile-hero-contact span { color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.profile-hero-contact strong { font-size:13px; font-weight:650; overflow-wrap:anywhere; }
.customer-profile-hero { grid-template-columns:minmax(480px,1.55fr) minmax(190px,.55fr) auto; align-items:center; }
.customer-profile-hero .profile-hero-identity h2 { white-space:nowrap; font-size:clamp(19px,1.8vw,25px); }
.customer-profile-hero .profile-hero-contact { display:block; }
.customer-profile-hero .profile-hero-contact > div { min-height:38px; align-content:center; }
.customer-profile-hero .profile-contact-nric { margin:0; color:var(--ink); }
.customer-profile-hero .profile-contact-nric span { display:block; }
.customer-profile-hero .profile-contact-nric strong { display:block; }
.profile-identity-contact-row { display:grid; grid-template-columns:minmax(150px,.7fr) minmax(240px,1.3fr); gap:18px; max-width:610px; margin-top:10px; }
.profile-identity-contact-row > div { display:grid; align-content:center; min-height:38px; }
.profile-identity-contact-row span { color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.profile-identity-contact-row strong { font-size:13px; font-weight:650; overflow-wrap:anywhere; }
.profile-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.profile-orders,.profile-history { padding:22px 24px; }
.profile-history > h3 { margin-bottom:14px; }
.profile-order-fields span { color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; }
.profile-orders { background:rgba(255,250,244,.3); border-bottom:1px solid rgba(24,49,42,.08); }
.profile-section-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px; }
.profile-section-heading h3 { margin:0; font-size:20px; }
.profile-orders-title { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:5px; }
.profile-order-upload { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.order-upload-select { width:auto; min-width:150px; padding:8px 30px 8px 10px; }
.profile-order-list { display:grid; gap:12px; }
.profile-order-card { border:1px solid rgba(24,49,42,.08); border-radius:16px; background:rgba(255,255,255,.68); overflow:hidden; cursor:pointer; transition:.15s ease; }
.profile-order-card:hover,.profile-order-card:focus { transform:translateY(-2px); border-color:rgba(17,136,109,.4); box-shadow:0 12px 28px rgba(41,64,48,.12); outline:none; }
.profile-order-card > header { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:14px 16px; border-bottom:1px solid rgba(24,49,42,.08); }
.profile-order-card h3 { margin:1px 0 0; font-size:16px; }
.profile-order-meta { display:flex; align-items:center; justify-content:flex-end; gap:10px; }
.order-agent-name { color:var(--muted); font-size:12px; font-weight:750; }
.order-status-chip { padding:7px 11px; border-radius:999px; color:#286b59; background:#d8f1e8; font-size:11px; font-weight:850; }
.profile-order-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-areas:"service empty" "completed empty" "package price" "address address"; gap:16px 26px; padding:16px; }
.profile-order-fields > div { display:grid; gap:5px; }
.profile-order-fields .order-service-field { grid-area:service; }
.profile-order-fields .order-completed-field { grid-area:completed; }
.profile-order-fields .order-package-field { grid-area:package; }
.profile-order-fields .order-price-field { grid-area:price; }
.profile-order-fields .order-address-field { grid-area:address; }
.order-upload-button { min-width:118px; padding:9px 15px; border-radius:9px; }
.order-upload-button.uploaded { border-color:#2f6fa3; background:#2f6fa3; }
.order-upload-button.uploaded:hover { background:#285e89; border-color:#285e89; }
.upfront-payment-button { border-color:#d38a20; background:#d38a20; white-space:nowrap; }
.upfront-payment-button:hover { background:#b97318; border-color:#b97318; }
.upfront-payment-button.done { border-color:#7356a5; background:#7356a5; color:#fff; cursor:pointer; }
.upfront-payment-button.done:hover { border-color:#60458f; background:#60458f; }
.profile-order-fields strong { font-size:13px; font-weight:600; white-space:normal; overflow-wrap:anywhere; }
.profile-orders-empty { padding:32px; border:1px dashed rgba(24,49,42,.2); border-radius:16px; text-align:center; }
.profile-orders-empty h3 { margin-bottom:5px; }
.profile-history .timeline { margin-bottom:0; }
@media(max-width:1400px){ .pivot-grid{grid-template-columns:1fr} }
@media(max-width:1100px){ .profile-layout{grid-template-columns:300px minmax(0,1fr)} }
@media(max-width:800px){ .customer-profile-hero{grid-template-columns:1fr}.customer-profile-hero .profile-hero-identity h2{white-space:normal}.profile-identity-contact-row{grid-template-columns:1fr;gap:8px}.customer-profile-hero .profile-contact-nric{grid-column:auto} }
@media(max-width:980px){ .app{grid-template-columns:1fr;padding:10px}.sidebar{position:static;height:auto;display:grid;grid-template-columns:1fr auto auto;padding:15px}.sidebar nav{grid-column:1/-1;display:flex;overflow:auto}.sidebar>.ghost{margin:0}.system-switcher{padding-top:0;border-top:0;align-self:start}.system-links{position:absolute;z-index:12;width:min(240px,calc(100vw - 30px));padding:10px;border:1px solid var(--line);border-radius:12px;background:#f7faf3;box-shadow:0 18px 40px rgba(24,49,42,.2)}.metrics.four{grid-template-columns:repeat(2,1fr)}.grid.two{grid-template-columns:1fr}.form-grid.compact{grid-template-columns:repeat(2,1fr)}.profile-layout{height:auto;grid-template-columns:1fr}.profile-directory{height:520px}.profile-workspace{height:auto;max-height:none}.profile-hero{position:static} }
@media(max-width:620px){ .metrics,.metrics.four{grid-template-columns:1fr}.status-horizontal{grid-template-columns:repeat(2,minmax(0,1fr))}.status-card:nth-child(n){grid-column:auto}.status-card:last-child{grid-column:1/-1}.choice-grid{grid-template-columns:1fr}.form-grid,.form-grid.compact,.detail-grid{grid-template-columns:1fr}.wide{grid-column:auto}.toolbar{grid-template-columns:1fr}.topbar{align-items:flex-start}.login-card{padding:25px}.content{padding:8px 2px 30px}.sidebar{grid-template-columns:1fr auto}.sidebar nav{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,1fr)}.sidebar>.ghost{grid-column:1/-1}.system-switcher{grid-column:2}.profile-order-fields{grid-template-columns:1fr;grid-template-areas:none}.profile-order-fields>div{grid-area:auto}.profile-order-fields .wide-field{grid-column:auto}.profile-hero{grid-template-columns:1fr}.profile-section-heading{align-items:flex-start;flex-direction:column}.profile-actions{justify-content:flex-start}.profile-orders,.profile-history{padding:18px 15px} }
@media(max-width:620px){ .detail-grid>[class*="detail-p"]{grid-area:auto}.detail-grid>.detail-wide{grid-column:auto} }