:root { --ink:#252a34; --muted:#747b87; --line:#e5e6e3; --blue:#215bd5; --green:#247837; --paper:#fff; --warm:#fbfaf7; --shadow:0 14px 42px rgba(28,31,40,.07); }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:radial-gradient(circle at 90% 0,#fff9ed 0,transparent 28%),#f7f7f4; font:14px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
button,input { font:inherit; }
a { color:inherit; text-decoration:none; }
.portal-shell { width:min(1240px,calc(100% - 32px)); min-height:calc(100vh - 32px); margin:16px auto; overflow:hidden; border:1px solid #dedfdd; border-radius:18px; background:rgba(255,255,255,.96); box-shadow:var(--shadow); }
.portal-header { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; min-height:88px; padding:14px 30px; border-bottom:1px solid var(--line); background:#fff; }
.header-logo-link { display:block; width:116px; height:58px; background:#fff; }
.header-logo-link img { display:block; width:100%; height:100%; object-fit:contain; object-position:left center; background:#fff; }
.header-identity { text-align:center; }
.header-identity strong,.header-identity small { display:block; }
.header-identity strong { font-size:15px; letter-spacing:-.01em; }
.header-identity small { margin-top:3px; color:var(--muted); font-size:11px; }
.customer-brand { display:flex; align-items:center; gap:12px; }
.customer-logo,.login-mark { display:grid; place-items:center; width:44px; height:44px; border-radius:13px; color:#fff; background:linear-gradient(145deg,#173765,#0a1d3d); font-weight:700; letter-spacing:.05em; box-shadow:inset 0 0 0 1px rgba(255,213,119,.5); }
.customer-brand strong,.customer-brand small { display:block; }
.customer-brand strong { font-size:15px; }
.customer-brand small { margin-top:2px; color:var(--muted); font-size:11px; }
.header-actions { display:flex; align-items:center; justify-self:end; gap:16px; color:var(--muted); font-size:11px; }
.header-actions > span { text-align:right; }
.header-actions > span small { display:block; margin-bottom:1px; color:#9a9ea5; font-size:8px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.header-actions button { padding:8px 11px; border:1px solid var(--line); border-radius:8px; background:#fff; color:#59606c; cursor:pointer; }
.portal-content { max-width:1120px; margin:auto; padding:34px 34px 54px; }
.breadcrumb { margin-bottom:20px; color:#8b9098; font-size:11px; }
.back-link { display:inline-block; margin-bottom:22px; color:#526072; font-size:12px; }
.page-title { display:flex; justify-content:space-between; align-items:end; margin-bottom:24px; }
.page-title h1 { margin:0; font-size:clamp(32px,4vw,48px); line-height:1.06; letter-spacing:-.045em; }
.page-title p:not(.eyebrow) { margin:9px 0 0; color:var(--muted); }
.eyebrow { margin:0 0 8px; color:#8b7b61; font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.status-banner { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px; padding:16px 18px; border:1px solid #cee1ca; border-radius:12px; color:var(--green); background:linear-gradient(90deg,#f7fbf4,#fbfdf9); }
.status-banner.attention { border-color:#ecd8c3; color:#a8521c; background:#fff9f2; }
.status-icon { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; color:#fff; background:#52a458; font-weight:700; }
.attention .status-icon { background:#d0783d; }
.status-banner > span:last-child { font-size:12px; }
.status-banner > span:nth-child(2) strong,.status-banner > span:nth-child(2) small { display:block; }
.status-banner > span:nth-child(2) small { margin-top:3px; color:#9a5c33; font-size:11px; }
.status-banner > b { font-size:11px; }
.section-title { display:flex; align-items:end; justify-content:space-between; margin:28px 0 12px; }
.section-title h2 { margin:0; font-size:18px; }
.section-title span { color:var(--muted); font-size:11px; }
.pipeline { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.pipeline > article { display:grid; grid-template-columns:auto 1fr; gap:16px; padding:20px; border:1px solid var(--line); border-radius:13px; background:var(--paper); }
.pipeline p { margin:0 0 12px; color:#4b5361; font-weight:600; }
.metric-icon { display:grid; place-items:center; width:48px; height:48px; border-radius:50%; font-size:20px; }
.metric-icon svg,.category-icon svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.metric-icon.blue { color:var(--blue); background:#edf3ff; }
.metric-icon.green { color:var(--green); background:#eef8ef; }
.metric-grid { display:grid; grid-template-columns:repeat(3,1fr); }
.metric-grid strong { padding:0 14px; border-left:1px solid var(--line); font-size:17px; }
.metric-grid strong:first-child { padding-left:0; border-left:0; }
.metric-grid small { display:block; margin-top:4px; color:var(--muted); font-size:9px; font-weight:500; }
.category-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.category-card { overflow:hidden; border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:0 6px 20px rgba(30,34,42,.035); }
.card-heading { display:flex; align-items:center; gap:12px; padding:20px 20px 13px; }
.category-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; color:#7050c9; background:#f5efff; font-size:21px; }
.category-icon svg { width:22px; height:22px; }
.card-heading p,.card-heading h2 { margin:0; }
.card-heading p { color:var(--muted); font-size:9px; }
.card-heading h2 { font-size:22px; }
.category-metrics { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:0 20px 9px; }
.category-metrics div { padding:13px; border:1px solid #dae4fa; border-radius:9px; background:#f9fbff; }
.category-metrics div + div { border-color:#dce8d8; background:#f9fcf7; }
.category-metrics span,.arrival-row span { display:block; color:var(--muted); font-size:10px; }
.category-metrics strong,.arrival-row strong { display:block; margin-top:3px; font-size:16px; }
.arrival-row { margin:0 20px 12px; padding:12px 14px; border:1px solid var(--line); border-radius:9px; }
.card-link { display:flex; justify-content:space-between; padding:13px 20px; border-top:1px solid var(--line); font-size:12px; font-weight:600; }
.card-link:hover { background:#fafafa; }
.category-summary { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); border-radius:13px; background:#fff; }
.category-summary article { min-width:0; padding:18px; border-left:1px solid var(--line); }
.category-summary article:first-child { border-left:0; }
.category-summary span,.category-summary small,.schedule-grid span,.documents span,.documents small,.detail-summary span { display:block; color:var(--muted); font-size:10px; }
.category-summary strong { display:block; margin-top:5px; font-size:17px; }
.category-summary small { margin-top:3px; }
.mix-grid { display:grid; grid-template-columns:repeat(4,1fr); overflow:hidden; border:1px solid var(--line); border-radius:12px; background:#fff; }
.mix-grid > div { padding:17px; border-left:1px solid var(--line); text-align:center; }
.mix-grid > div:first-child { border-left:0; }
.mix-grid span,.mix-grid small { display:block; color:var(--muted); font-size:10px; }
.mix-grid strong { display:block; margin:4px 0; font-size:19px; }
.shipment-list { overflow:hidden; border:1px solid var(--line); border-radius:12px; background:#fff; }
.shipment-row { display:grid; grid-template-columns:1.2fr 1fr 1fr auto; align-items:center; gap:16px; padding:16px 18px; border-top:1px solid var(--line); }
.shipment-row:first-child { border-top:0; }
.shipment-row:hover { background:#fbfbfa; }
.shipment-row > div > strong,.shipment-row > div > small,.shipment-row > div > span:not(.status-chip) { display:block; }
.shipment-row > div > span:not(.status-chip),.shipment-row small { color:var(--muted); font-size:10px; }
.shipment-row strong { margin-top:3px; }
.status-chip { display:inline-block; padding:5px 8px; border-radius:999px; color:#405e9c; background:#edf3ff; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.status-chip.in_transit { color:#276f37; background:#edf8ef; }
.status-chip.arrived { color:#5c626c; background:#f1f1ef; }
.status-chip.large { padding:8px 11px; font-size:10px; }
.detail-title { align-items:center; }
.detail-summary,.schedule-grid,.documents,.payment-grid { display:grid; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:#fff; }
.detail-summary { grid-template-columns:repeat(4,1fr); }
.detail-summary div,.schedule-grid div,.documents div,.payment-grid div { padding:17px; border-left:1px solid var(--line); }
.detail-summary div:first-child,.schedule-grid div:first-child,.documents div:first-child,.payment-grid div:first-child { border-left:0; }
.detail-summary strong,.schedule-grid strong,.documents strong,.payment-grid strong { display:block; margin-top:5px; font-size:14px; }
.schedule-grid { grid-template-columns:repeat(5,1fr); }
.documents { grid-template-columns:repeat(3,1fr); }
.documents a { display:inline-block; margin-top:10px; color:var(--blue); font-size:11px; font-weight:700; }
.payment-grid { grid-template-columns:1fr 1fr 2fr; }
.payment-grid span { display:block; color:var(--muted); font-size:10px; }
.payment-grid.needs-payment { border-color:#ead7c5; background:#fffdf9; }
.payment-grid.needs-payment div:last-child { color:#a8521c; background:#fff9f2; }
.eta-update { display:flex; gap:12px; align-items:center; margin-bottom:14px; padding:13px 16px; border:1px solid #ead7c5; border-radius:10px; color:#b75b21; background:#fffaf4; }
.eta-update > span { font-size:21px; }
.eta-update strong,.eta-update p { display:block; margin:0; }
.eta-update p { margin-top:2px; font-size:11px; }
.customer-action { display:flex; align-items:center; gap:12px; margin-top:22px; padding:15px 17px; border:1px solid #d5e4d2; border-radius:11px; color:var(--green); background:#f8fcf6; }
.customer-action > span { display:grid; place-items:center; width:27px; height:27px; border-radius:50%; color:#fff; background:#57a65e; }
.customer-action small,.customer-action strong { display:block; }
.customer-action small { font-size:9px; text-transform:uppercase; letter-spacing:.08em; }
.customer-action.required { border-color:#ead7c5; color:#a8521c; background:#fff9f2; }
.customer-action.required > span { background:#cf7437; }
.empty-state { padding:30px; color:var(--muted); text-align:center; }
footer { padding:17px 30px; border-top:1px solid var(--line); color:#a1a4aa; font-size:10px; text-align:center; }
.login-screen { display:grid; place-items:center; min-height:100vh; padding:24px; }
.login-card { width:min(430px,100%); padding:40px; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:var(--shadow); }
.login-logo { display:block; width:185px; height:92px; margin:0 0 23px; object-fit:contain; object-position:left center; background:#fff; }
.login-card h1 { margin:0; font-size:34px; letter-spacing:-.04em; }
.login-card > p:not(.eyebrow) { color:var(--muted); }
.login-card label span { display:block; margin:22px 0 7px; color:#5c6470; font-size:11px; font-weight:600; }
.login-card input { width:100%; height:46px; padding:0 13px; border:1px solid #d9dbda; border-radius:9px; outline:0; }
.login-card input:focus { border-color:#7796d8; box-shadow:0 0 0 3px #edf2fd; }
.login-card button { width:100%; margin-top:12px; padding:12px; border:0; border-radius:9px; color:#fff; background:#1e56c7; cursor:pointer; }
.login-card button:disabled { opacity:.6; }
.login-error { color:#b23e31!important; font-size:11px; }
.email-sent { display:grid; grid-template-columns:auto 1fr; gap:3px 11px; align-items:center; margin-top:23px; padding:15px; border:1px solid #d2e4d0; border-radius:10px; color:var(--green); background:#f8fcf6; }
.email-sent > span { grid-row:1 / 3; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; color:#fff; background:#58a75f; }
.email-sent strong,.email-sent small { display:block; }
.email-sent small { color:#7f8a80; font-size:10px; }
.provider { display:block; margin-top:23px; color:#a0a3a8; font-size:9px; text-align:center; }
@media (max-width:850px) {
  .portal-shell { width:100%; min-height:100vh; margin:0; border:0; border-radius:0; }
  .portal-header { padding:14px 18px; }
  .header-actions > span { display:none; }
  .header-logo-link { width:96px; height:48px; }
  .portal-content { padding:26px 18px 42px; }
  .pipeline,.category-grid { grid-template-columns:1fr; }
  .category-summary { grid-template-columns:1fr 1fr; }
  .category-summary article:nth-child(3) { border-left:0; border-top:1px solid var(--line); }
  .category-summary article:nth-child(4) { border-top:1px solid var(--line); }
  .detail-summary { grid-template-columns:1fr 1fr; }
  .detail-summary div:nth-child(3) { border-left:0; border-top:1px solid var(--line); }
  .detail-summary div:nth-child(4) { border-top:1px solid var(--line); }
  .schedule-grid { grid-template-columns:1fr 1fr; }
  .schedule-grid div { border-top:1px solid var(--line); }
  .schedule-grid div:nth-child(odd) { border-left:0; }
  .schedule-grid div:nth-child(-n+2) { border-top:0; }
  .mix-grid { grid-template-columns:1fr 1fr; }
  .mix-grid > div:nth-child(odd) { border-left:0; }
  .mix-grid > div:nth-child(n+3) { border-top:1px solid var(--line); }
  .shipment-row { grid-template-columns:1fr auto; }
  .shipment-row > div:nth-child(2),.shipment-row > div:nth-child(3) { grid-column:1; }
}
@media (max-width:520px) {
  .customer-brand strong { max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .customer-logo { width:38px; height:38px; }
  .page-title { display:block; }
  .page-title h1 { font-size:34px; }
  .status-banner { grid-template-columns:auto 1fr; }
  .status-banner > span:last-child { grid-column:2; }
  .pipeline > article { grid-template-columns:1fr; }
  .metric-grid strong { font-size:15px; }
  .category-summary,.detail-summary,.documents,.payment-grid { grid-template-columns:1fr; }
  .category-summary article,.detail-summary div,.documents div,.payment-grid div { border-left:0; border-top:1px solid var(--line); }
  .category-summary article:first-child,.detail-summary div:first-child,.documents div:first-child,.payment-grid div:first-child { border-top:0; }
  .detail-title .status-chip { margin-top:14px; }
  .login-card { padding:28px 24px; }
}