:root {
  --navy: #102844;
  --blue: #078fca;
  --blue-soft: #e9f7fd;
  --canvas: #f3f8fb;
  --line: #dce8ef;
  --ink: #17304b;
  --muted: #64778a;
  --shadow: 0 18px 50px rgba(24, 73, 105, .09);
}

body {
  font-size: 15px;
  background:
    radial-gradient(circle at 76% 0%, rgba(146, 213, 239, .32), transparent 27rem),
    linear-gradient(145deg, #f8fbfd 0%, #eff7fb 55%, #f8fbfd 100%);
}

.app-shell { grid-template-columns: 292px 1fr; }
.sidebar {
  width: 292px;
  padding: 24px 24px 28px;
  background:
    radial-gradient(circle at 20% 10%, rgba(28, 159, 211, .26), transparent 15rem),
    linear-gradient(170deg, #133657 0%, #102844 58%, #0d223a 100%);
  box-shadow: 12px 0 40px rgba(14, 41, 68, .12);
}

.brand { display: block; margin-bottom: 28px; }
.brand img {
  display: block;
  width: 100%;
  height: 132px;
  object-fit: contain;
  padding: 9px 12px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 14px 36px rgba(2, 23, 44, .22);
}
.brand .product-name { margin-top: 15px; padding: 0 4px; }
.brand .product-name strong {
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: 0;
}
.brand .product-name span {
  margin-top: 6px;
  color: #a9c6d8;
  font-size: 11px;
  line-height: 1.4;
  text-transform: none;
  letter-spacing: .25px;
}

.case-label { padding: 0 12px 20px; }
.case-label span { font-size: 15px; }
.case-label small { font-size: 12px; }
.steps { gap: 9px; }
.step { padding: 13px 12px; border-radius: 13px; }
.step > span { width: 32px; height: 32px; font-size: 13px; }
.step b { font-size: 15px; }
.step small { font-size: 12px; }
.step.active {
  background: linear-gradient(90deg, rgba(77, 185, 228, .23), rgba(77, 185, 228, .08));
  box-shadow: inset 3px 0 #44b7e4;
}
.step.active > span { background: #159bd1; border-color: #159bd1; }
.privacy-note { border-radius: 15px; padding: 15px; }
.privacy-note p { font-size: 11.5px; }

.topbar {
  height: 78px;
  padding: 0 48px;
  background: rgba(255, 255, 255, .84);
  backdrop-filter: blur(16px);
}
.breadcrumbs { font-size: 14px; }
.status-pill { font-size: 12px; padding: 9px 14px; }
.icon-button { width: 36px; height: 36px; font-size: 15px; }
.workspace { max-width: 1280px; padding: 54px 52px 84px; }
.page-heading { margin-bottom: 34px; }
.page-heading > div { max-width: 830px; }
.eyebrow { font-size: 12px; color: #087fac; letter-spacing: 1.45px; }
.page-heading h1 {
  margin: 8px 0 12px;
  font-size: 42px;
  line-height: 1.1;
  color: #173956;
}
.page-heading p { font-size: 15px; line-height: 1.65; }
.page-heading code { font-size: 13px; padding: 4px 7px; }

.grid.two-thirds, .party-grid { gap: 25px; }
.panel {
  border-color: rgba(188, 211, 223, .72);
  border-radius: 22px;
  box-shadow: var(--shadow);
}
article.panel { padding: 29px; }
.panel-title { margin-bottom: 23px; }
.panel-title h2, .party-head h2, .section-kicker h2 { font-size: 17px; }
.panel-title p, .party-head p, .section-kicker p { font-size: 13px; }
.panel-icon { width: 44px; height: 44px; border-radius: 13px; font-size: 20px; }
.dropzone {
  min-height: 224px;
  border-width: 2px;
  border-radius: 17px;
  background: linear-gradient(145deg, #fbfdff, #f3faff);
}
.upload-icon { width: 48px; height: 48px; border-radius: 13px; font-size: 22px; }
.dropzone strong { font-size: 15px; }
.dropzone small { font-size: 13px; }
.or { margin: 20px 0; font-size: 11px; }

.field { gap: 8px; }
.field > span { font-size: 12px; letter-spacing: .55px; }
.field input, .field select, .field textarea {
  border-radius: 11px;
  padding: 12px 13px;
  font-size: 14px;
}
.field input, .field select { height: 46px; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: #35a9d7;
  box-shadow: 0 0 0 4px rgba(23, 157, 210, .12);
}
.tag { padding: 8px 10px; font-size: 11px; border-radius: 8px; }
.soft-note { border-radius: 13px; padding: 17px; }
.soft-note b, .soft-note p { font-size: 13px; }
.primary, .secondary, .ghost {
  min-height: 44px;
  padding: 12px 19px;
  border-radius: 11px;
  font-size: 14px;
}
.primary {
  background: linear-gradient(135deg, #0aa0d7, #087db8);
  box-shadow: 0 8px 20px rgba(7, 143, 202, .24);
}
.primary:hover { background: linear-gradient(135deg, #0894c9, #066fa5); }

.party-panel { padding: 28px !important; }
.party-head { padding-bottom: 20px; margin-bottom: 20px; }
.party-head > span { width: 39px; height: 39px; border-radius: 11px; font-size: 15px; }
.form-grid { gap: 17px; }
.party-form details { margin-top: 20px; padding-top: 18px; }
.party-form summary { font-size: 13px; }
.save-party { margin-top: 20px; }
.terms-panel { padding: 34px; }
.section-kicker > span { font-size: 12px; padding: 7px; }
.risk-summary h2 { font-size: 18px; }
.risk-summary p, .risk-title p, .recommendation p, .review-aside p { font-size: 13px; }
.risk-title h3, .review-aside h3, .list-heading h2 { font-size: 15px; }
.source-text, .proposal { font-size: 12px; }

.party-import {
  gap: 13px;
  border-width: 2px;
  border-radius: 14px;
  padding: 15px;
  background: linear-gradient(145deg, #fbfdff, #f1f9fd);
}
.party-import .import-icon { width: 38px; height: 38px; border-radius: 10px; }
.party-import b { font-size: 13px; }
.party-import small { margin-top: 4px; font-size: 11px; }
.import-result { border-radius: 12px; padding: 13px 15px; font-size: 12px; }
.agent-badge { padding: 8px 13px; font-size: 12px; }

@media(max-width: 960px) {
  .app-shell { display: block; }
  .sidebar { position: static; width: auto; padding: 18px 22px; }
  .brand { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
  .brand img { width: 142px; height: 82px; border-radius: 13px; }
  .brand .product-name { margin: 0; }
  .steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }
  .step { min-width: 0; }
  .workspace { padding: 38px 25px 65px; }
  .grid.two-thirds, .party-grid, .review-layout { grid-template-columns: 1fr; }
}

@media(max-width: 640px) {
  .brand img { width: 116px; height: 69px; }
  .brand .product-name strong { font-size: 14px; }
  .brand .product-name span { display: none; }
  .page-heading h1 { font-size: 34px; }
  .topbar { height: 66px; padding: 0 18px; }
  .workspace { padding: 30px 18px 55px; }
  article.panel, .party-panel { padding: 22px !important; }
}