:root {
  --bg: #F8F6F1;
  --panel: #ffffff;
  --panel-soft: #fbf8f3;
  --ink: #171411;
  --muted: #6E675E;
  --line: #E8E1D4;
  --brown: #8B6914;
  --brown-dark: #6F5310;
  --green: #14753F;
  --red: #bf3b35;
  --amber: #b26b00;
  --blue: #305edb;
  --shadow: 0 18px 45px rgba(44, 33, 20, 0.10);
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --sidebar: 292px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgba(139, 94, 52, 0.16), transparent 34rem),
    radial-gradient(circle at bottom right, rgba(20, 125, 85, 0.12), transparent 35rem),
    var(--bg);
  color: var(--ink);
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }

.login-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 2rem;
  padding: 2rem;
}
.hero-card, .login-card, .card, .modal-box {
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(230, 222, 212, 0.9);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}
.hero-card {
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  position: relative;
}
.hero-card::after {
  content: "";
  position: absolute;
  right: -9rem;
  bottom: -9rem;
  width: 28rem;
  height: 28rem;
  border-radius: 50%;
  border: 48px solid rgba(139, 94, 52, 0.08);
}
.login-card {
  padding: 2rem;
  align-self: center;
}
.brand-wordmark {
  display: inline-flex;
  flex-direction: column;
  gap: .1rem;
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 900;
  font-size: 2rem;
}
.brand-wordmark .dot { color: var(--brown); }
.brand-wordmark small {
  font-size: .56rem;
  letter-spacing: .2em;
  font-weight: 800;
  margin-left: auto;
  color: #111;
}

.brand-logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.brand-logo-link img {
  width: 190px;
  max-width: 100%;
  height: auto;
  display: block;
}
.site-links {
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
  margin-top:1rem;
}
.site-links a {
  text-decoration:none;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  border-radius:999px;
  padding:.62rem .85rem;
  font-weight:850;
  font-size:.82rem;
}
.site-links a:hover { border-color:var(--brown); color:var(--brown-dark); transform:translateY(-1px); }

.hero-title {
  max-width: 820px;
  font-size: clamp(2.4rem, 6vw, 5.8rem);
  line-height: .92;
  letter-spacing: -0.07em;
  margin: 4rem 0 1rem;
}
.hero-title span { color: var(--brown-dark); }
.hero-text {
  max-width: 680px;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1.65;
}
.hero-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .9rem;
  margin-top: 2rem;
}
.hero-tile {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1rem;
  min-height: 130px;
}
.hero-tile b { display: block; font-size: 1.1rem; margin-bottom: .4rem; }
.hero-tile p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.45; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid.one { grid-template-columns: 1fr; }
.field { display: flex; flex-direction: column; gap: .42rem; }
.field label { font-size: .8rem; color: var(--muted); font-weight: 750; }
.field input, .field select, .field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
  padding: .86rem .95rem;
  color: var(--ink);
  outline: none;
}
.field textarea { min-height: 104px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--brown);
  box-shadow: 0 0 0 4px rgba(139, 94, 52, .12);
}
.button-row { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; }
.btn {
  border: 1px solid transparent;
  border-radius: 999px;
  padding: .82rem 1.1rem;
  font-weight: 850;
  background: var(--ink);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 42px;
}
.btn:hover { transform: translateY(-1px); }
.btn.secondary { background: #fff; color: var(--ink); border-color: var(--line); }
.btn.soft { background: var(--panel-soft); color: var(--brown-dark); border-color: var(--line); }
.btn.success { background: var(--green); color: #fff; }
.btn.danger { background: var(--red); color: #fff; }
.btn.small { padding: .58rem .8rem; min-height: 34px; font-size: .84rem; }
.btn.full { width: 100%; }
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .32rem;
  padding: .36rem .68rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: #fff;
  font-size: .78rem;
  font-weight: 850;
  white-space: nowrap;
}
.pill.green { background: rgba(20, 125, 85, .1); color: var(--green); border-color: rgba(20, 125, 85, .16); }
.pill.amber { background: rgba(178, 107, 0, .1); color: var(--amber); border-color: rgba(178, 107, 0, .16); }
.pill.red { background: rgba(191, 59, 53, .1); color: var(--red); border-color: rgba(191, 59, 53, .16); }
.pill.blue { background: rgba(48, 94, 219, .1); color: var(--blue); border-color: rgba(48, 94, 219, .16); }

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
}
.sidebar {
  padding: 1.3rem;
  border-right: 1px solid var(--line);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(16px);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: auto;
}
.main { min-width: 0; }
.topbar {
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.6rem;
  border-bottom: 1px solid var(--line);
  background: rgba(246, 242, 236, .72);
  backdrop-filter: blur(14px);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar h1 { margin: 0; font-size: 1.2rem; letter-spacing: -.03em; }
.topbar p { margin: .2rem 0 0; color: var(--muted); font-size: .86rem; }
.content { padding: 1.6rem; }
.nav-title { color: var(--muted); font-size: .74rem; font-weight: 850; margin: 1.4rem .45rem .6rem; text-transform: uppercase; letter-spacing: .08em; }
.nav-list { display: flex; flex-direction: column; gap: .35rem; }
.nav-item {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: .84rem .9rem;
  border-radius: 14px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 800;
}
.nav-item:hover, .nav-item.active { background: var(--ink); color: #fff; }
.nav-item small { opacity: .72; }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.stat-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 1.15rem;
  box-shadow: 0 8px 22px rgba(44,33,20,.05);
}
.stat-card span { color: var(--muted); font-size: .8rem; font-weight: 800; }
.stat-card strong { display: block; font-size: 2rem; letter-spacing: -.05em; margin-top: .4rem; }
.stat-card p { margin: .25rem 0 0; color: var(--muted); font-size: .82rem; }

.card { padding: 1.15rem; margin-bottom: 1rem; }
.card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.card-header h2 { margin: 0; font-size: 1.05rem; letter-spacing: -.025em; }
.card-header p { margin: .25rem 0 0; color: var(--muted); font-size: .86rem; }
.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
table { width: 100%; border-collapse: collapse; min-width: 860px; }
th, td { padding: .9rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; background: var(--panel-soft); }
td { font-size: .9rem; }
tr:last-child td { border-bottom: 0; }
.cell-title { font-weight: 900; }
.cell-sub { color: var(--muted); font-size: .78rem; margin-top: .2rem; }
.money { font-weight: 900; white-space: nowrap; }

.workspace-grid { display: grid; grid-template-columns: 1fr 370px; gap: 1rem; align-items: start; }
.module-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.module-card {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 20px;
  padding: 1rem;
  min-height: 150px;
}
.module-icon { width: 44px; height: 44px; border-radius: 14px; background: var(--panel-soft); display:grid; place-items:center; font-weight:900; color: var(--brown-dark); margin-bottom: .9rem; }
.module-card h3 { margin: 0 0 .4rem; font-size: 1rem; }
.module-card p { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.45; }
.segmented { display:flex; gap:.4rem; padding:.35rem; background:var(--panel-soft); border:1px solid var(--line); border-radius:999px; flex-wrap:wrap; }
.segmented button { border:0; border-radius:999px; padding:.58rem .85rem; background:transparent; font-weight:850; color: var(--muted); }
.segmented button.active { background:#fff; color: var(--ink); box-shadow:0 6px 18px rgba(44,33,20,.08); }

.segmented-auth {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:.75rem;
  border-radius:2rem;
  padding:.85rem;
}
.segmented-auth button {
  width:100%;
  text-align:center;
  min-height:4.2rem;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:clamp(1rem, 2.2vw, 1.15rem);
  line-height:1.15;
  white-space:normal;
}
@media (max-width: 640px) {
  .segmented-auth { gap:.55rem; padding:.6rem; }
  .segmented-auth button { min-height:3.7rem; font-size:1rem; padding:.75rem .65rem; }
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(21,20,18,.38);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 100;
}
.modal.show { display: flex; }
.modal-box { width: min(980px, 100%); max-height: 90vh; overflow: auto; padding: 1.3rem; }
.modal-header { display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; margin-bottom:1rem; }
.modal-header h2 { margin:0; letter-spacing:-.03em; }
.modal-header p { margin:.25rem 0 0; color:var(--muted); }
.close-btn { border:0; background:var(--panel-soft); border-radius:50%; width:38px; height:38px; font-weight:900; }

.toast {
  position: fixed;
  right: 1.3rem;
  bottom: 1.3rem;
  padding: .9rem 1rem;
  border-radius: 14px;
  background: var(--ink);
  color: white;
  box-shadow: var(--shadow);
  display: none;
  z-index: 300;
  font-weight: 850;
}
.toast.show { display: block; }
.empty-state { text-align:center; padding:2.6rem 1rem; color:var(--muted); }
.empty-icon { margin:0 auto 1rem; width:58px; height:58px; border-radius:18px; background:var(--panel-soft); display:grid; place-items:center; color:var(--brown-dark); font-weight:1000; }
.empty-state h3 { margin:.2rem 0; color:var(--ink); }
.empty-state p { margin:.4rem auto 0; max-width:430px; }

.quote-cards { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:1rem; }
.quote-card { border:1px solid var(--line); background:#fff; border-radius:20px; padding:1rem; position:relative; }
.quote-card.selected { border-color: rgba(20,125,85,.45); box-shadow: 0 0 0 4px rgba(20,125,85,.1); }
.quote-card h3 { margin: .4rem 0 .2rem; }
.quote-card .premium { font-size: 2rem; font-weight: 1000; letter-spacing:-.06em; margin:.7rem 0; }
.kv { display:grid; grid-template-columns: 1fr auto; gap:.45rem; padding:.45rem 0; border-bottom:1px dashed var(--line); font-size:.86rem; }
.kv:last-child { border-bottom:0; }
.kv span:first-child { color:var(--muted); }
.kv span:last-child { font-weight:850; }
.badge-row { display:flex; gap:.4rem; flex-wrap:wrap; }
.timeline { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.timeline .step { padding:.45rem .65rem; border-radius:999px; background:var(--panel-soft); color:var(--muted); font-size:.78rem; font-weight:850; border:1px solid var(--line); }
.timeline .step.done { background:rgba(20,125,85,.1); color:var(--green); border-color:rgba(20,125,85,.2); }

@media (max-width: 1100px) {
  .login-shell { grid-template-columns: 1fr; }
  .hero-grid, .module-grid, .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace-grid { grid-template-columns: 1fr; }
  .quote-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 780px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: relative; height:auto; border-right:0; border-bottom:1px solid var(--line); }
  .hero-card { padding: 1.4rem; }
  .login-shell { padding: .75rem; gap:.75rem; }
  
.brand-logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.brand-logo-link img {
  width: 190px;
  max-width: 100%;
  height: auto;
  display: block;
}
.site-links {
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
  margin-top:1rem;
}
.site-links a {
  text-decoration:none;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  border-radius:999px;
  padding:.62rem .85rem;
  font-weight:850;
  font-size:.82rem;
}
.site-links a:hover { border-color:var(--brown); color:var(--brown-dark); transform:translateY(-1px); }

.hero-title { margin: 2rem 0 1rem; }
  .hero-grid, .module-grid, .stats-grid, .form-grid, .form-grid.three, .quote-cards { grid-template-columns: 1fr; }
  .topbar { position: relative; height:auto; align-items:flex-start; flex-direction:column; }
  .content { padding: .9rem; }
}

h1,h2,h3,.hero-title,.topbar h1{font-family:Manrope,Inter,system-ui,sans-serif;}

/* RiskDesk role-flow additions */
.portal-choice-grid{display:grid;grid-template-columns:1fr;gap:1rem;margin:1rem 0;}
.choice-card{border:1px solid var(--line);background:#fff;border-radius:22px;padding:1.25rem;text-align:left;display:flex;flex-direction:column;gap:.45rem;min-height:150px;box-shadow:0 8px 22px rgba(44,33,20,.05);}
.choice-card:hover{transform:translateY(-2px);border-color:var(--brown);}
.choice-card span{width:46px;height:46px;border-radius:15px;background:var(--panel-soft);display:grid;place-items:center;font-weight:1000;color:var(--brown-dark);font-size:1.4rem;}
.choice-card b{font-size:1.35rem;letter-spacing:-.04em;}
.choice-card small{color:var(--muted);font-weight:750;}
.choice-card.dark{background:var(--ink);color:#fff;border-color:var(--ink);}
.choice-card.dark span{background:rgba(255,255,255,.12);color:#fff;}
.choice-card.dark small{color:rgba(255,255,255,.74);}
.info-note{margin-top:1rem;padding:1rem;border-radius:16px;background:var(--panel-soft);border:1px solid var(--line);color:var(--muted);line-height:1.55;font-size:.9rem;}
.btn.danger{background:var(--red);color:#fff;border-color:var(--red);}
.btn.danger:hover{filter:brightness(.98);}
.form-grid.two{grid-template-columns:repeat(2,minmax(0,1fr));}
.stat-card strong small{font-size:.8rem;color:var(--muted);}
@media (max-width:780px){.form-grid.two{grid-template-columns:1fr;}}

/* RiskDesk company portal improvements: intro, clickable cards, document storage */
.intro-panel{
  border:1px solid var(--line);
  background:linear-gradient(135deg,#fff 0%, var(--panel-soft) 100%);
  border-radius:28px;
  padding:1.25rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1rem;
  box-shadow:0 14px 34px rgba(44,33,20,.05);
}
.intro-panel.compact{padding:1rem 1.1rem;border-radius:22px;}
.intro-panel h2{margin:.2rem 0 .35rem;letter-spacing:-.045em;font-size:clamp(1.4rem,2.4vw,2.15rem);}
.intro-panel p{margin:0;color:var(--muted);line-height:1.55;max-width:720px;}
.eyebrow{display:inline-flex;align-items:center;gap:.35rem;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;font-weight:1000;color:var(--brown-dark);}
.intro-actions{display:flex;align-items:center;justify-content:flex-end;gap:.65rem;flex-wrap:wrap;}
.category-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-bottom:1rem;}
.category-card{border:1px solid var(--line);background:#fff;border-radius:24px;padding:1.1rem;text-align:left;min-height:195px;display:flex;flex-direction:column;align-items:flex-start;gap:.45rem;box-shadow:0 10px 24px rgba(44,33,20,.045);cursor:pointer;color:var(--ink);transition:.18s ease;}
.category-card:hover{transform:translateY(-3px);border-color:var(--brown);box-shadow:0 18px 34px rgba(44,33,20,.075);}
.category-card.active{border-color:var(--brown);box-shadow:0 0 0 4px rgba(139,105,20,.11);}
.category-card span{width:44px;height:44px;border-radius:16px;background:var(--panel-soft);display:grid;place-items:center;font-size:1.3rem;}
.category-card h3{margin:.2rem 0 0;font-size:1.1rem;letter-spacing:-.03em;}
.category-card strong{font-size:2.7rem;letter-spacing:-.08em;line-height:1;}
.category-card p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.35;}
.card-mini-row{margin-top:auto;width:100%;display:flex;align-items:center;justify-content:space-between;gap:.5rem;color:var(--muted);font-weight:850;font-size:.76rem;border-top:1px dashed var(--line);padding-top:.65rem;}
.document-drop-note{border:1px dashed var(--line);border-radius:20px;padding:1rem;background:var(--panel-soft);color:var(--muted);}
.table-wrap a{color:var(--brown-dark);font-weight:850;text-decoration:none;}
.table-wrap a:hover{text-decoration:underline;}
@media (max-width:1100px){.category-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.intro-panel{align-items:flex-start;flex-direction:column;}.intro-actions{justify-content:flex-start;}}
@media (max-width:780px){.category-grid{grid-template-columns:1fr;}.category-card{min-height:auto;}.intro-panel{border-radius:22px;}.intro-actions .btn{width:100%;}.intro-actions{width:100%;}}


/* Role dropdown login v5 */
.login-mode-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: .8rem;
  padding: .95rem;
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  background: var(--panel-soft);
  margin-bottom: 1rem;
}
.login-mode-card .field select {
  font-size: 1.05rem;
  font-weight: 850;
  min-height: 3.25rem;
  border-radius: 1rem;
}
.login-mode-note {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.7rem;
  flex-wrap:wrap;
  background:#fff;
  border:1px solid var(--line);
  border-radius:1rem;
  padding:.75rem .9rem;
}
.login-mode-note b { color: var(--ink); }
.login-mode-note span { color: var(--muted); font-size:.88rem; font-weight:700; }
@media (max-width: 640px) {
  .login-mode-card { padding:.75rem; border-radius:1rem; }
  .login-mode-card .field select { font-size:1rem; min-height:3rem; }
}

/* v7: login note removed from markup; keep hidden if older cache injects it */
.login-mode-note{display:none!important;}

/* v12 customer sign-in/admin customer login refinement */
.login-mode-card select option[value="company-create"]{display:none}

/* v13 visible RiskDesk sign-in choices */
.signin-choice-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:18px;
}
.signin-choice{
  border:1px solid #e6dccb;
  background:#fff;
  border-radius:999px;
  padding:16px 18px;
  font-weight:900;
  font-size:1rem;
  color:#17120d;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(29,20,9,.04);
}
.signin-choice.active{
  background:#17120d;
  color:#fff;
  border-color:#17120d;
}
.signin-choice.small{
  font-size:.95rem;
  padding:13px 16px;
}
@media (max-width:720px){
  .signin-choice-row{grid-template-columns:1fr;}
}


/* v14 login + create account panels */
.signin-choice-row{display:none!important}
.split-auth-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-top:24px;
}
.auth-panel{
  border:1px solid #eadfce;
  border-radius:28px;
  padding:24px;
  background:#fff;
  box-shadow:0 14px 32px rgba(29,20,9,.045);
}
.auth-panel.soft-panel{
  background:#fbf8f1;
}
.auth-panel .card-header{
  margin-bottom:18px;
}
.auth-panel .btn.full{
  margin-top:8px;
}
@media (max-width:900px){
  .split-auth-grid{grid-template-columns:1fr;}
}


/* v15 dropdown with 4 login roles + Login/Sign in labels */
.auth-panel .card-header h2{
  font-size:clamp(1.55rem,2.5vw,2.25rem);
}
.auth-panel.soft-panel .card-header p strong{
  color:#17120d;
}


/* v16 login-first layout with first-time sign in toggle */
.single-auth-panel{
  margin-top:24px;
  max-width:760px;
}
.auth-switch-note{
  margin-top:24px;
  padding:18px 20px;
  border:1px solid #eadfce;
  border-radius:22px;
  background:#fbf8f1;
  color:#6b6259;
  font-size:1.05rem;
}
.auth-switch-note button{
  border:0;
  background:#17120d;
  color:#fff;
  border-radius:999px;
  padding:10px 20px;
  font-weight:900;
  margin-left:8px;
  cursor:pointer;
}
@media (max-width:720px){
  .auth-switch-note button{
    display:block;
    margin:12px 0 0;
    width:100%;
  }
}