body.portal-body { background: #f4f5f3; }
.portal-shell { min-height: calc(100vh - 54px); display: grid; grid-template-columns: 240px minmax(0,1fr); }
.portal-sidebar { background: #211f1b; color: #fff; padding: 24px 18px; display: flex; flex-direction: column; gap: 24px; position: sticky; top: 54px; height: calc(100vh - 54px); }
.portal-brand { display:flex; align-items:center; gap:10px; font-weight:800; }
.portal-brand .brand-mark { flex:0 0 auto; }
.portal-user { padding: 14px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(255,255,255,.05); }
.portal-user strong { display:block; }
.portal-user small { color:#bdb8ae; }
.portal-nav { display:grid; gap:6px; }
.portal-nav a, .portal-nav button { border:0; color:#d9d5cd; background:transparent; text-decoration:none; text-align:left; padding:10px 12px; border-radius:10px; font-weight:700; }
.portal-nav a:hover, .portal-nav a.active, .portal-nav button:hover, .portal-nav button.active { background:rgba(255,255,255,.09); color:#fff; }
.portal-main { padding: 28px clamp(16px, 3.5vw, 48px) 64px; min-width:0; }
.portal-content { max-width: 1220px; margin:0 auto; }
.portal-topbar { display:flex; justify-content:space-between; gap:18px; align-items:center; margin-bottom:24px; }
.portal-topbar h1 { margin:0; font-size:clamp(26px,4vw,38px); }
.portal-topbar p { margin:4px 0 0; color:var(--muted); }
.portal-section { margin-top: 22px; }
.section-head { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:12px; }
.section-head h2 { margin:0; font-size:20px; }
.panel-tabs { display:flex; gap:8px; flex-wrap:wrap; }
.panel-tab { border:1px solid var(--line); background:#fff; color:var(--muted); padding:8px 12px; border-radius:999px; font-weight:700; }
.panel-tab.active { background:var(--brand-soft); border-color:#f3c46e; color:#7a4d00; }
.compact-card { padding:18px; }
.status-flow { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:16px; }
.status-node { padding:10px; border-radius:12px; background:#efeee9; color:#777; font-size:12px; font-weight:700; text-align:center; }
.status-node.done { background:#e8f6ee; color:var(--success); }
.status-node.current { background:var(--brand-soft); color:#805200; outline:2px solid rgba(233,145,0,.25); }
.project-switcher { display:flex; gap:10px; flex-wrap:wrap; }
.project-chip { border:1px solid var(--line); background:#fff; padding:10px 12px; border-radius:12px; min-width:180px; text-align:left; }
.project-chip.active { border-color:#e9a432; box-shadow:0 0 0 3px rgba(233,145,0,.10); }
.project-chip strong { display:block; }
.project-chip small { color:var(--muted); }
.application-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.application-card { border:1px solid var(--line); border-radius:16px; background:#fff; padding:18px; display:grid; gap:12px; position:relative; }
.application-card.selected { border-color:var(--brand); box-shadow:0 0 0 3px rgba(233,145,0,.12); }
.application-card .favorite { position:absolute; right:14px; top:14px; border:0; background:#f5f3ef; width:34px; height:34px; border-radius:999px; font-size:18px; }
.application-card .favorite.on { background:#fff0d2; color:#c77800; }
.provider-title { display:flex; gap:10px; align-items:center; padding-right:36px; }
.provider-title .avatar { width:48px; height:48px; border-radius:12px; font-size:18px; }
.rating { font-size:13px; color:#6b665f; }
.price-large { font-size:26px; font-weight:900; }
.card-actions { display:flex; gap:8px; margin-top:auto; }
.card-actions .btn { flex:1; }
.compare-bar { position:sticky; bottom:16px; z-index:5; background:#24211d; color:#fff; border-radius:16px; padding:14px 16px; display:flex; gap:16px; align-items:center; justify-content:space-between; box-shadow:0 16px 36px rgba(0,0,0,.2); margin-top:16px; }
.compare-bar small { color:#cbc5bb; }
.detail-list { display:grid; gap:10px; }
.detail-row { display:flex; justify-content:space-between; gap:20px; padding-bottom:9px; border-bottom:1px solid var(--line); }
.detail-row:last-child { border-bottom:0; }
.detail-row span:first-child { color:var(--muted); }
.notification-list { display:grid; gap:8px; }
.notification-item { border:1px solid var(--line); background:#fff; border-radius:12px; padding:13px 14px; display:flex; justify-content:space-between; gap:16px; align-items:flex-start; }
.notification-item.unread { border-left:4px solid var(--brand); background:#fffaf1; }
.notification-item p { margin:3px 0 0; color:var(--muted); font-size:13px; }
.notification-item time { color:var(--muted); font-size:12px; white-space:nowrap; }
.case-layout { display:grid; grid-template-columns:minmax(320px,.9fr) minmax(0,1.4fr); gap:18px; }
.case-list { display:grid; gap:10px; max-height:760px; overflow:auto; padding-right:3px; }
.case-card { border:1px solid var(--line); background:#fff; border-radius:14px; padding:15px; cursor:pointer; transition:.15s ease; }
.case-card:hover { transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.06); }
.case-card.active { border-color:var(--brand); box-shadow:0 0 0 3px rgba(233,145,0,.1); }
.case-card h3 { margin:5px 0 6px; font-size:16px; }
.case-meta { display:flex; flex-wrap:wrap; gap:6px 10px; color:var(--muted); font-size:12px; }
.filter-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }
.bid-form { display:grid; gap:12px; margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
.inline-fields { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.empty-state { text-align:center; color:var(--muted); padding:32px 12px; border:1px dashed #d8d4cb; border-radius:14px; }
.kpi-positive { color:var(--success); font-weight:700; }
.checkline { display:flex; gap:8px; align-items:flex-start; font-size:13px; color:var(--muted); }
.checkline input { margin-top:4px; }
.drawer { position:fixed; inset:0; display:none; z-index:30; }
.drawer.open { display:block; }
.drawer-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.35); }
.drawer-panel { position:absolute; top:0; right:0; height:100%; width:min(520px,92vw); background:#fff; padding:24px; overflow:auto; box-shadow:-16px 0 50px rgba(0,0,0,.18); }
.drawer-head { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:18px; }
.drawer-head h2 { margin:0; }
.icon-btn { border:1px solid var(--line); background:#fff; width:36px; height:36px; border-radius:10px; }
.wizard { display:grid; gap:16px; }
.wizard-step { display:none; }
.wizard-step.active { display:grid; gap:14px; }
.wizard-footer { display:flex; justify-content:space-between; gap:10px; }
.mini-photo-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.mini-photo { aspect-ratio:1.25; background:linear-gradient(135deg,#e3ddd1,#c7b69a); border-radius:10px; display:grid; place-items:center; color:#6d5b40; font-size:11px; font-weight:700; }
.quick-link-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.quick-link { border:1px solid var(--line); background:#fff; border-radius:14px; padding:16px; text-decoration:none; }
.quick-link strong { display:block; margin-bottom:4px; }
.quick-link small { color:var(--muted); }

.role-switchbar {
  min-height:54px;
  position:sticky;
  top:0;
  z-index:40;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:16px;
  padding:8px clamp(14px,3vw,28px);
  background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(12px);
}
.role-switchbar-brand { display:flex; align-items:center; gap:9px; text-decoration:none; font-weight:900; justify-self:start; }
.role-switchbar-brand .brand-mark { width:30px; height:30px; border-radius:9px; font-size:14px; }
.role-switchbar-links { display:flex; gap:4px; padding:4px; border-radius:12px; background:#ece9e3; }
.role-switchbar-links a { text-decoration:none; padding:7px 14px; border-radius:9px; color:var(--muted); font-size:13px; font-weight:800; }
.role-switchbar-links a.active { background:#fff; color:var(--text); box-shadow:0 2px 8px rgba(0,0,0,.07); }
.role-switchbar-home { justify-self:end; text-decoration:none; font-size:13px; font-weight:700; color:var(--muted); }
.role-switchbar-home:hover { color:var(--text); }

.mock-landing { min-height:100vh; background:linear-gradient(180deg,#fffaf0 0,#f5f5f2 42%,#f5f5f2 100%); }
.mock-landing-header { max-width:1160px; margin:0 auto; padding:22px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.mock-landing-brand { display:flex; align-items:center; gap:10px; font-weight:900; text-decoration:none; }
.mock-landing-main { max-width:1080px; margin:0 auto; padding:72px 24px 84px; }
.mock-landing-hero { text-align:center; max-width:760px; margin:0 auto 38px; }
.mock-landing-hero h1 { font-size:clamp(34px,6vw,62px); line-height:1.08; margin:10px 0 16px; }
.mock-landing-hero p { color:var(--muted); font-size:17px; margin:0 auto; max-width:650px; }
.role-card-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.role-card { display:grid; gap:14px; padding:28px; background:#fff; border:1px solid var(--line); border-radius:20px; text-decoration:none; box-shadow:var(--shadow); transition:.18s ease; }
.role-card:hover { transform:translateY(-3px); border-color:#e5b65e; box-shadow:0 18px 42px rgba(31,28,22,.12); }
.role-card h2 { margin:0; font-size:28px; }
.role-card p { margin:0; color:var(--muted); }
.role-card .role-icon { width:52px; height:52px; border-radius:15px; display:grid; place-items:center; background:var(--brand-soft); font-size:25px; }
.role-card .role-cta { margin-top:8px; font-weight:900; color:#8c5900; }
.mock-landing-links { margin-top:24px; display:flex; justify-content:center; flex-wrap:wrap; gap:12px; }
.mock-landing-links a { color:var(--muted); font-size:13px; }

@media (max-width: 1000px) {
  .portal-shell { grid-template-columns:1fr; }
  .portal-sidebar { position:static; height:auto; padding:14px 16px; gap:12px; }
  .portal-user { display:none; }
  .portal-nav { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .portal-nav a, .portal-nav button { text-align:center; padding:8px; font-size:13px; }
  .application-grid { grid-template-columns:1fr; }
  .case-layout { grid-template-columns:1fr; }
  .case-list { max-height:none; }
}
@media (max-width: 680px) {
  .portal-topbar, .section-head, .compare-bar { align-items:stretch; display:grid; }
  .portal-nav { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .status-flow { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .inline-fields, .filter-row, .quick-link-grid { grid-template-columns:1fr; }
  .mini-photo-grid { grid-template-columns:repeat(2,1fr); }
  .role-switchbar { grid-template-columns:1fr auto; }
  .role-switchbar-brand span:last-child, .role-switchbar-home { display:none; }
  .role-switchbar-links { justify-self:end; }
  .role-switchbar-links a { padding:7px 10px; }
  .role-card-grid { grid-template-columns:1fr; }
  .mock-landing-main { padding-top:44px; }
}