@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/static/fonts/ibm-plex-arabic-arabic-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/static/fonts/ibm-plex-arabic-arabic-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/static/fonts/ibm-plex-arabic-arabic-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/static/fonts/ibm-plex-arabic-arabic-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/static/fonts/ibm-plex-arabic-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/static/fonts/ibm-plex-arabic-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/static/fonts/ibm-plex-arabic-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/static/fonts/ibm-plex-arabic-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}

:root {
  color-scheme: light;
  /* Surfaces and text follow the OFinder App Design System v1.1 (light). */
  --ink: #18231f;
  --ink-soft: #3c5a52;
  --muted: #66746d;
  --line: #d8e1dc;
  --paper: #ffffff;
  --canvas: #f4f7f3;
  --navy: #183d36;
  --blue: #24735d;
  --blue-deep: #185842;
  --mint: #e2edb5;
  --mint-deep: #386447;
  --lilac: #eee8f5;
  --sand: #ffedcf;
  --rose: #ffebe3;
  --red: #a64e42;
  --lime: #d8ec9f;
  --coral: #ed9a74;
  --clay: #f0e8dc;
  --shadow: 0 18px 48px rgba(45, 57, 43, 0.09);
  font-family: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--canvas); scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 5% 10%, rgba(216, 236, 159, .30), transparent 24rem),
    radial-gradient(circle at 95% 5%, rgba(47, 140, 112, .08), transparent 22rem),
    var(--canvas);
  font-size: 15px;
  line-height: 1.65;
}

button, input, select, textarea { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible {
  outline: 3px solid #39a88b;
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.demo-banner {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px 18px;
  color: #573b09;
  background: #fff2d5;
  border-bottom: 1px solid #f1ddae;
  text-align: center;
  font-size: 13px;
  font-weight: 650;
}
.demo-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 99px; background: #d39015; }

.brand { display: inline-flex; align-items: center; gap: 8px; direction: ltr; unicode-bidi: isolate; color: var(--navy); font-size: 20px; font-weight: 700; letter-spacing: -.7px; }
/* The canonical OFinder mark: lime circular shape with the filled dark-green soft spark. */
.brand-mark {
  display: inline-block;
  flex: 0 0 auto;
  width: 31px;
  height: 31px;
  color: transparent;
  background: url("/static/brand/ofinder-mark.svg") center / contain no-repeat;
  font-size: 0;
  overflow: hidden;
}
.brand-large { font-size: 27px; color: #fffdf8; }
.brand-large .brand-mark { width: 39px; height: 39px; }
.brand-small { font-size: 17px; }
.brand-small .brand-mark { width: 27px; height: 27px; }

.auth-layout {
  width: min(1120px, calc(100% - 48px));
  min-height: min(760px, calc(100svh - 48px));
  min-height: min(760px, calc(100dvh - 48px));
  margin: 24px auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr);
  overflow: hidden;
  background: var(--paper);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 26px;
  box-shadow: 0 30px 80px rgba(36, 49, 40, .14);
}
.auth-intro {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: min(600px, calc(100dvh - 50px));
  overflow: hidden;
  padding: clamp(38px, 7vw, 80px);
  color: #f3f9fa;
  background:
    radial-gradient(circle at 12% 88%, rgba(209, 232, 148, .24), transparent 17rem),
    radial-gradient(circle at 89% 18%, rgba(241, 155, 111, .24), transparent 18rem),
    linear-gradient(145deg, #173b34 4%, #21584b 65%, #2d6d58);
}
.auth-intro .eyebrow { margin-top: clamp(20px, 7vh, 76px); color: #d8eb9f; }
.eyebrow { margin: 0 0 9px; color: var(--mint-deep); font-size: 12px; font-weight: 750; letter-spacing: .02em; }
.auth-intro h1 { position: relative; z-index: 1; margin: 0; font-size: clamp(33px, 4.4vw, 52px); line-height: 1.22; letter-spacing: -1.2px; }
.auth-intro h1 span { color: #d9ed9f; }
.auth-lead { position: relative; z-index: 1; max-width: 440px; margin: 16px 0 24px; color: #e1e9d9; font-size: 16px; }
.auth-points { position: relative; z-index: 1; display: grid; gap: 10px; color: #edf2e7; font-size: 14px; }
.auth-points > div { display: flex; align-items: center; gap: 11px; }
.point-check { display: inline-grid; place-items: center; width: 21px; height: 21px; color: #173d33; background: #d8ec9f; border-radius: 50%; font-size: 12px; font-weight: 900; }
.auth-orbit { position: absolute; border: 1px solid rgba(180, 228, 210, .14); border-radius: 50%; pointer-events: none; }
.orbit-one { width: 410px; height: 410px; bottom: -275px; left: -100px; }
.orbit-two { width: 580px; height: 580px; bottom: -355px; left: -180px; }
.auth-card { align-self: center; width: min(430px, 100%); margin: auto; padding: 46px 42px; }
.auth-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 34px; }
.auth-private { padding: 5px 10px; color: #4d6a5c; background: #eff2e3; border-radius: 99px; font-size: 11px; }
.auth-card h2 { margin: 0 0 4px; font-size: 25px; letter-spacing: -.5px; }
.muted { margin: 0; color: var(--muted); font-size: 13px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; margin: 27px 0 20px; padding: 4px; background: #f2eee5; border-radius: 10px; }
.auth-tab { padding: 9px 12px; border: 0; color: var(--muted); background: transparent; border-radius: 7px; cursor: pointer; font-size: 13px; font-weight: 650; }
.auth-tab.active { color: var(--ink); background: #fffdf8; box-shadow: 0 2px 8px rgba(45, 57, 43, .07); }
.form-stack { display: grid; gap: 15px; }
.field { display: grid; gap: 7px; color: #293f53; font-size: 13px; font-weight: 650; }
.field > span small, .field-hint { color: #8291a0; font-size: 11px; font-weight: 450; }
.field-hint { display: block; line-height: 1.5; }
.field input, .field select, .field textarea, .search-field input, .select-field select {
  width: 100%;
  min-width: 0;
  padding: 11px 13px;
  color: var(--ink);
  background: #fff;
  border: 1px solid #dce5ec;
  border-radius: 9px;
  box-shadow: inset 0 1px 1px rgba(16, 38, 61, .015);
}
.field input::placeholder, .field textarea::placeholder, .search-field input::placeholder { color: #a3afbb; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #b4c7d1; }
.field textarea { resize: vertical; }
.auth-footnote { margin: 23px 0 0; padding-top: 16px; color: #8a98a6; border-top: 1px solid var(--line); font-size: 11px; line-height: 1.6; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 43px;
  padding: 10px 17px;
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.button:hover { transform: translateY(-1px); }
.button:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.button-primary { color: #fff; background: var(--blue); box-shadow: 0 5px 12px rgba(40, 107, 131, .14); }
.button-primary:hover { background: var(--blue-deep); }
.button-secondary { color: #24485a; background: #fff; border-color: #d9e5ea; }
.button-secondary:hover { background: #f3f9f7; border-color: #b8d8cc; }
.button-wide { width: 100%; }
.button-small { min-height: 33px; padding: 6px 10px; font-size: 11px; }
.button-text { color: var(--blue); background: transparent; border-color: transparent; }
.button-danger-text { color: #9a5149; background: transparent; border-color: transparent; }
.text-button { padding: 7px 0; color: var(--blue); background: transparent; border: 0; cursor: pointer; font-weight: 700; font-size: 13px; }
.inline-error { margin: 0; color: #9b3e34; font-size: 12px; }

.topbar { position: sticky; z-index: 4; top: 0; background: rgba(255,255,255,.93); border-bottom: 1px solid #e8edf1; backdrop-filter: blur(14px); }
.topbar-inner { width: min(1250px, calc(100% - 48px)); min-height: 70px; margin: auto; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 25px; }
.main-nav { display: flex; align-items: center; justify-content: safe center; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.main-nav::-webkit-scrollbar { display: none; }
.nav-link { display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; color: #65788a; background: transparent; border: 0; border-radius: 8px; cursor: pointer; font-size: 12px; font-weight: 650; white-space: nowrap; }
.nav-link:hover { color: var(--ink); background: #f4f7f8; }
.nav-link.active { color: var(--blue-deep); background: #eaf4f1; }
.nav-icon { font-size: 17px; line-height: 1; }
.topbar-user { display: flex; align-items: center; gap: 9px; min-width: 0; }
.user-avatar { display: inline-grid; place-items: center; width: 33px; height: 33px; flex: 0 0 auto; color: #27556a; background: #dcefeb; border-radius: 50%; font-size: 13px; font-weight: 800; }
.user-greeting { max-width: 110px; overflow: hidden; color: #516477; font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.icon-button { display: inline-grid; place-items: center; width: 36px; height: 36px; color: #5d7181; background: transparent; border: 1px solid transparent; border-radius: 9px; cursor: pointer; font-size: 19px; }
.icon-button:hover { color: var(--ink); background: #f2f5f6; border-color: #e4eaed; }

.page-wrap { width: min(1190px, calc(100% - 48px)); min-height: calc(100vh - 145px); margin: 0 auto; padding: 33px 0 65px; }
.page-section { display: none; animation: fade-up .24s ease both; }
.page-section.active { display: block; }
@keyframes fade-up { from { opacity: .4; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

.welcome-grid { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; min-height: 290px; overflow: hidden; padding: 35px 42px; color: #f7fbfc; background: linear-gradient(118deg, #10263d 0%, #163e52 68%, #205d6d 100%); border-radius: 20px; box-shadow: var(--shadow); }
.welcome-grid::after { position: absolute; content: ""; inset: 0; background: radial-gradient(circle at 75% 20%, rgba(138, 215, 183, .13), transparent 22rem); pointer-events: none; }
.welcome-copy { position: relative; z-index: 1; max-width: 560px; }
.welcome-copy .eyebrow { color: #9bd8be; }
.welcome-copy h1 { max-width: 570px; margin: 0; font-size: clamp(27px, 3.6vw, 42px); line-height: 1.28; letter-spacing: -.7px; }
.welcome-copy h1 span { color: #b4e8d1; }
.welcome-lead { max-width: 500px; margin: 14px 0 22px; color: #c8d8dc; font-size: 14px; }
.welcome-copy .button { color: var(--navy); background: #c1ecd8; box-shadow: none; }
.welcome-copy .button:hover { background: #d9f4e7; }
.welcome-visual { position: relative; z-index: 1; height: 225px; overflow: hidden; }
.visual-sun { position: absolute; top: 13px; right: 36%; width: 135px; height: 135px; background: linear-gradient(135deg, #c7f0dc, #63bda2); border-radius: 50%; box-shadow: 0 0 65px rgba(145, 226, 189, .26); }
.visual-orbit { position: absolute; width: 265px; height: 265px; top: -51px; right: 16%; border: 1px solid rgba(207, 245, 222, .34); border-radius: 50%; transform: scaleX(1.37) rotate(-24deg); }
.orbit-b { top: -66px; right: 7%; width: 315px; height: 315px; border-color: rgba(207,245,222,.15); transform: scaleX(1.17) rotate(33deg); }
.visual-star { position: absolute; color: #e7f7cb; font-size: 23px; }
.star-a { top: 17px; right: 24%; }.star-b { top: 123px; right: 8%; color: #b9ead1; font-size: 15px; }
.visual-card { position: absolute; top: 84px; right: 27%; display: flex; align-items: center; gap: 11px; width: 170px; height: 72px; padding: 14px; background: rgba(255,255,255,.96); border: 1px solid rgba(255,255,255,.8); border-radius: 13px; box-shadow: 0 16px 35px rgba(7, 25, 38, .19); transform: rotate(-5deg); }
.visual-card-mark { display: grid; place-items: center; width: 37px; height: 37px; color: #196956; background: #def5e8; border-radius: 10px; font-weight: 900; }
.visual-card-lines { display: grid; gap: 8px; flex: 1; }.visual-card-lines i { display: block; height: 7px; background: #d6e0e5; border-radius: 99px; }.visual-card-lines i:last-child { width: 65%; height: 5px; background: #e6ecee; }
.visual-label { position: absolute; right: 24%; bottom: 2px; color: #c0dbd6; font-size: 11px; letter-spacing: .04em; }

.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 18px 0 34px; }
.stat-card { position: relative; min-height: 139px; padding: 17px 19px; background: #fff; border: 1px solid #e7edf1; border-radius: 14px; box-shadow: 0 8px 24px rgba(16,38,61,.025); }
.stat-accent { border-color: #d5eae1; }
.stat-icon { position: absolute; top: 16px; inset-inline-end: 17px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #285369; font-size: 20px; }
.icon-mint { background: var(--mint); color: #226f59; }.icon-lilac { background: var(--lilac); color: #69528f; }.icon-sand { background: var(--sand); color: #8b651e; }
.stat-label { display: block; color: #718195; font-size: 12px; }
.stat-value { display: block; margin-top: 6px; color: var(--ink); font-size: 27px; font-weight: 750; line-height: 1.2; }
.stat-note { display: block; margin-top: 7px; color: #9aa6b2; font-size: 10px; }

.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.section-heading h2, .page-title-row h1 { margin: 0; font-size: 23px; line-height: 1.3; letter-spacing: -.3px; }
.section-heading .eyebrow { margin-bottom: 4px; }
.section-heading-space { margin-top: 36px; }
.home-lower-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 14px; }
.profile-progress-card, .upcoming-card { display: flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 164px; padding: 20px 22px; background: #fff; border: 1px solid #e6edf0; border-radius: 14px; }
.progress-copy { min-width: 0; flex: 1; }
.progress-title-row, .upcoming-head { display: flex; align-items: center; gap: 11px; }
.progress-title-row h3, .upcoming-head h3 { margin: 0; font-size: 14px; }
.progress-icon, .upcoming-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; color: #216b58; background: #e0f4e9; border-radius: 10px; font-size: 19px; }
.progress-copy p { margin: 9px 0 13px; color: var(--muted); font-size: 11px; }
.progress-track { width: min(100%, 370px); height: 6px; overflow: hidden; background: #edf1f3; border-radius: 99px; }
.progress-track span { display: block; width: 0; height: 100%; background: #49a886; border-radius: inherit; transition: width .3s ease; }
.progress-copy small { display: block; margin-top: 5px; color: #8e9da8; font-size: 10px; }
.upcoming-card { align-items: flex-start; justify-content: flex-start; flex-direction: column; gap: 12px; }
.upcoming-head p { margin: 2px 0 0; color: var(--muted); font-size: 10px; }
.upcoming-list { width: 100%; }
.upcoming-task { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid #eef2f4; font-size: 11px; }
.upcoming-task strong { display: block; font-size: 11px; font-weight: 650; }.upcoming-task small { color: var(--muted); font-size: 10px; }.upcoming-date { color: var(--mint-deep); white-space: nowrap; }
.empty-copy { margin: 0; color: #8b99a5; font-size: 11px; }

.page-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 15px; margin: 5px 0 23px; }
.page-title-row .eyebrow { margin-bottom: 4px; }
.page-intro { margin: 7px 0 0; color: var(--muted); font-size: 13px; }
.result-count, .private-chip, .admin-chip { padding: 8px 12px; color: #446174; background: #e9f2f2; border-radius: 99px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.private-chip { color: #28684f; background: #e3f4e9; }.private-chip span { font-size: 8px; }
.admin-chip { color: #6d4d84; background: #f0eafa; }
.filter-bar { display: flex; align-items: center; gap: 10px; padding: 12px; background: #fff; border: 1px solid #e3eaef; border-radius: 13px; }
.search-field { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 160px; color: #6b8090; }
.search-field > span { font-size: 19px; }
.search-field input { padding: 7px 4px; border: 0; outline: 0; box-shadow: none; font-size: 12px; }
.search-field input:focus-visible { outline: 2px solid #39a88b; outline-offset: 2px; border-radius: 4px; }
.select-field select { min-width: 130px; padding: 8px 11px; font-size: 11px; }
.filter-reset { min-height: 35px; padding: 7px 11px; font-size: 11px; }

.opportunity-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; margin-top: 17px; }
.compact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
.opportunity-card { position: relative; display: flex; flex-direction: column; min-height: 267px; padding: 17px; background: #fff; border: 1px solid #e3eaef; border-radius: 14px; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.opportunity-card:hover { transform: translateY(-2px); border-color: #c9ddd8; box-shadow: 0 12px 28px rgba(16,38,61,.07); }
.opp-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.opp-org { display: flex; align-items: center; gap: 8px; min-width: 0; color: #718195; font-size: 10px; }
.org-mark { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto; color: #2c6675; background: #e5f1ef; border-radius: 9px; font-size: 12px; font-weight: 800; }
.opp-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.tag { display: inline-flex; align-items: center; padding: 4px 7px; color: #4f6679; background: #f0f4f6; border-radius: 99px; font-size: 9px; font-weight: 650; }
.tag-demo { color: #795414; background: #fff0ce; }
.tag-online { color: #256b57; background: #e2f3ea; }
.opp-title { margin: 13px 0 5px; font-size: 16px; line-height: 1.45; letter-spacing: -.2px; }
.opp-summary { display: -webkit-box; min-height: 42px; margin: 0; overflow: hidden; color: #788797; font-size: 11px; line-height: 1.7; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.opp-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 13px; padding: 10px 0; border-top: 1px solid #eef2f4; border-bottom: 1px solid #eef2f4; }
.meta-item { color: #7b8995; font-size: 10px; }
.meta-item strong { display: block; margin-top: 2px; color: #344e62; font-size: 10px; font-weight: 650; }
.opp-reasons { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.reason-chip { padding: 3px 6px; color: #39725c; background: #edf7f1; border-radius: 6px; font-size: 9px; }
.reason-chip.conflict { color: #9a5149; background: #fff0ed; }
.opp-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 12px; }
.opp-fit { color: #65798a; font-size: 10px; }.opp-fit strong { color: #226c55; font-size: 12px; }
.opp-actions { display: flex; gap: 6px; }
.save-button { display: inline-grid; place-items: center; width: 35px; height: 35px; color: #617688; background: #fff; border: 1px solid #e2e9ec; border-radius: 9px; cursor: pointer; font-size: 19px; }
.save-button.saved { color: #ab625a; background: #fff4f1; border-color: #f2d6d0; }
.save-button:hover { background: #f7fafb; }
.open-detail { min-height: 35px; padding: 6px 10px; font-size: 10px; }
.freshness-note { margin-top: 9px; color: #91a0aa; font-size: 9px; }
.empty-state { display: grid; justify-items: center; max-width: 440px; margin: 48px auto; padding: 34px; text-align: center; background: #fff; border: 1px dashed #d8e2e8; border-radius: 16px; }
.empty-symbol { display: grid; place-items: center; width: 49px; height: 49px; color: #377461; background: #e5f4eb; border-radius: 14px; font-size: 25px; }
.empty-state h3 { margin: 15px 0 2px; font-size: 16px; }.empty-state p { margin: 3px 0 16px; color: var(--muted); font-size: 12px; }

.tracker-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; padding: 12px 15px; background: #fff; border: 1px solid #e6edf1; border-radius: 11px; color: #738496; font-size: 10px; }
.legend-dot { display: inline-block; width: 8px; height: 8px; margin-left: 6px; background: #42a382; border-radius: 50%; }.dot-future { background: #cfd8de; }
.tracker-privacy { margin-right: auto; color: #397258; }
.applications-list { display: grid; gap: 13px; margin-top: 16px; }
.application-card { padding: 18px; background: #fff; border: 1px solid #e4ebef; border-radius: 13px; }
.application-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.application-title-group { min-width: 0; }.application-title-group h3 { margin: 0; font-size: 16px; }.application-title-group p { margin: 3px 0; color: var(--muted); font-size: 11px; }
.status-select { width: min(220px, 44%); padding: 9px 10px; color: #285767; background: #f4faf7; border: 1px solid #d6e9df; border-radius: 8px; font-size: 11px; }
.pipeline { display: flex; align-items: center; gap: 0; margin: 19px 0 15px; overflow-x: auto; padding-bottom: 4px; }
.pipeline-step { display: flex; align-items: center; gap: 6px; color: #9aa7b1; font-size: 9px; white-space: nowrap; }
.pipeline-step::after { content: ""; display: block; width: clamp(13px, 3vw, 37px); height: 1px; margin: 0 7px; background: #dfe6ea; }
.pipeline-step:last-child::after { display: none; }
.pipeline-step.is-complete, .pipeline-step.is-current { color: #277459; font-weight: 700; }
.pipeline-step.is-current .step-dot { color: #fff; background: #278064; box-shadow: 0 0 0 4px #e2f3ea; }
.step-dot { display: grid; place-items: center; width: 17px; height: 17px; color: #8294a2; background: #edf1f3; border-radius: 50%; font-size: 9px; }
.application-tools { display: grid; grid-template-columns: 145px minmax(0, 1fr) auto; align-items: end; gap: 10px; padding-top: 13px; border-top: 1px solid #edf1f3; }
.task-add { display: flex; align-items: flex-end; gap: 7px; }
.application-tools .application-notes textarea { min-height: 38px; padding: 7px 9px; font-size: 11px; }
.application-tools .task-add { grid-column: 1 / -1; }
.task-add .field { flex: 1; }.task-add input, .application-deadline input { min-height: 36px; padding: 7px 9px; font-size: 11px; }
.application-deadline { width: 145px; }
.tasks-list { display: grid; gap: 5px; margin-top: 10px; }
.task-row { display: flex; align-items: center; gap: 7px; color: #52687a; font-size: 11px; }
.task-row input { accent-color: #2d8568; }
.task-row.completed span { color: #9aa6af; text-decoration: line-through; }
.task-row small { margin-right: auto; color: #99a5af; font-size: 10px; }
.task-remove { padding: 0 5px; color: #9b675f; background: transparent; border: 0; cursor: pointer; font-size: 15px; }

.profile-layout { display: grid; grid-template-columns: minmax(0, 1fr) 270px; align-items: start; gap: 15px; }
.profile-main { display: grid; gap: 14px; }
.form-card, .admin-table-card { padding: 22px; background: #fff; border: 1px solid #e4ebef; border-radius: 14px; }
.form-card-heading { display: flex; align-items: center; gap: 11px; margin-bottom: 20px; }
.form-heading-icon { display: grid; place-items: center; width: 37px; height: 37px; flex: 0 0 auto; color: #23664f; background: #dff3e8; border-radius: 11px; font-size: 18px; }
.form-card-heading h2 { margin: 0; font-size: 15px; }.form-card-heading p { margin: 2px 0 0; color: #8896a2; font-size: 10px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 13px; }
.field-full, .form-end { grid-column: 1 / -1; }
.choice-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.choice-field legend { padding: 0 0 8px; color: #293f53; font-size: 13px; font-weight: 650; }
.checkbox-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.check-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; color: #53697b; background: #f7f9fa; border: 1px solid #e3eaee; border-radius: 8px; font-size: 10px; cursor: pointer; }
.check-chip:has(input:checked) { color: #245b4a; background: #ebf6ef; border-color: #b9dfc8; }
.check-chip input { accent-color: #2c8566; }
.profile-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.profile-aside { display: grid; gap: 12px; }
.aside-note { padding: 17px; background: #edf6f3; border: 1px solid #dcece5; border-radius: 13px; }
.aside-note-warm { background: #fff7e9; border-color: #f0e4ca; }
.aside-note-icon { display: grid; place-items: center; width: 27px; height: 27px; color: #287259; background: #d7eee2; border-radius: 8px; font-size: 13px; font-weight: 800; }
.aside-note h3 { margin: 11px 0 4px; font-size: 13px; }.aside-note p, .aside-note li { color: #63798a; font-size: 10px; line-height: 1.7; }
.aside-note p { margin: 0; }.aside-note ul { display: grid; gap: 6px; margin: 12px 0 0; padding-right: 17px; }

.admin-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 15px; }
.admin-stat { padding: 14px 16px; background: #fff; border: 1px solid #e5ebef; border-radius: 11px; }
.admin-stat small { display: block; color: #788999; font-size: 10px; }.admin-stat strong { display: block; margin-top: 2px; font-size: 22px; }
.admin-layout { display: grid; grid-template-columns: minmax(0, 1fr) 315px; align-items: start; gap: 15px; }
.admin-main, .admin-side { display: grid; gap: 14px; min-width: 0; }
.admin-create-card .form-card-heading { margin-bottom: 17px; }
.admin-create-card > .form-grid { gap: 12px; }
.admin-create-card .field input, .admin-create-card .field select, .admin-create-card .field textarea { padding: 9px 10px; font-size: 11px; }
.builder-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.builder-head strong { display: block; color: #293f53; font-size: 12px; }.builder-head small { display: block; margin-top: 1px; color: #8795a0; font-size: 10px; font-weight: 400; }
.builder-rows { display: grid; gap: 8px; }
.builder-row { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; padding: 11px; background: #f8fafb; border: 1px solid #e9eef1; border-radius: 9px; }
.builder-row .field { gap: 4px; font-size: 10px; }.builder-row .field input, .builder-row .field select { padding: 7px 8px; font-size: 10px; }
.builder-wide { grid-column: 1 / -1; }
.builder-remove { position: absolute; top: 5px; left: 5px; display: grid; place-items: center; width: 24px; height: 24px; color: #9a625a; background: transparent; border: 0; border-radius: 6px; cursor: pointer; font-size: 17px; }
.builder-remove:hover { background: #fff0ed; }
.form-end { display: flex; align-items: center; justify-content: flex-start; gap: 10px; }
.form-end .inline-error { flex: 1; }
.admin-table-card { padding: 18px; }
.table-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 13px; }
.table-card-heading h2 { margin: 0; font-size: 15px; }.table-card-heading p { margin: 2px 0 0; color: var(--muted); font-size: 10px; }
.admin-record-list { display: grid; gap: 8px; }
.admin-record { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; background: #fafcfd; border: 1px solid #edf1f4; border-radius: 10px; }
.admin-record-copy { min-width: 0; }.admin-record-copy strong { display: block; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.admin-record-copy small { display: block; color: #7b8b99; font-size: 10px; }
.admin-record-actions { display: flex; align-items: center; flex: 0 0 auto; gap: 6px; }
.record-status { padding: 4px 7px; color: #687c8d; background: #edf1f4; border-radius: 99px; font-size: 9px; white-space: nowrap; }
.record-status.published { color: #246548; background: #e0f2e6; }.record-status.needs_review { color: #835f20; background: #fff0d0; }.record-status.rejected { color: #96574e; background: #ffefeb; }
.review-principles { padding: 18px; color: #f0f6f6; background: #15364b; border-radius: 13px; }
.review-principles .eyebrow { color: #9bd9be; }.review-principles h3 { margin: 0; font-size: 15px; }.review-principles ul { display: grid; gap: 7px; margin: 12px 0 0; padding-right: 18px; color: #ccdcdf; font-size: 10px; }

.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: min(1190px, calc(100% - 48px)); margin: 0 auto; padding: 17px 0 25px; color: #8d9aa5; border-top: 1px solid #e3e9ed; font-size: 10px; }
.brand-footer { color: #4b6679; font-size: 13px; }.brand-footer .brand-mark { width: 23px; height: 23px; color: #fff; font-size: 13px; border-radius: 7px 7px 7px 3px; }

.opportunity-dialog { width: min(760px, calc(100% - 24px)); max-width: 760px; max-height: min(90vh, 850px); padding: 0; color: var(--ink); background: transparent; border: 0; border-radius: 18px; }
.opportunity-dialog::backdrop { background: rgba(9, 29, 44, .58); backdrop-filter: blur(3px); }
.dialog-shell { position: relative; max-height: min(90vh, 850px); overflow-y: auto; padding: 25px; background: #fff; border: 1px solid #edf1f4; border-radius: 18px; box-shadow: 0 30px 90px rgba(6, 20, 31, .25); }
.dialog-close { position: sticky; z-index: 1; top: 0; float: left; margin: -8px -7px 0 0; color: #63788a; background: #f4f7f8; }
.dialog-kicker { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }.dialog-title { max-width: 640px; margin: 0; font-size: 24px; line-height: 1.35; }.dialog-org { margin: 5px 0 15px; color: #708295; font-size: 12px; }
.dialog-warning { margin: 13px 0; padding: 11px 13px; color: #725216; background: #fff4db; border: 1px solid #f0dfb6; border-radius: 9px; font-size: 11px; }
.dialog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 15px 0; }
.detail-panel { padding: 14px; background: #f8fafb; border: 1px solid #e9eef1; border-radius: 10px; }
.detail-panel h3 { margin: 0 0 9px; font-size: 13px; }.detail-panel p { margin: 0; color: #687c8d; font-size: 11px; white-space: pre-wrap; }
.rule-list, .funding-list { display: grid; gap: 8px; }
.rule-item, .funding-item { display: grid; grid-template-columns: auto 1fr; gap: 8px; padding: 8px 0; border-top: 1px solid #e7edf0; }
.rule-state { min-width: 69px; color: #296b50; font-size: 10px; font-weight: 750; }.rule-state.not_met { color: #9a5149; }.rule-state.unknown, .rule-state.needs_review { color: #89651e; }
.rule-item strong, .funding-item strong { display: block; font-size: 11px; }.rule-item small, .funding-item small { display: block; color: #7b8c9a; font-size: 10px; line-height: 1.55; }
.source-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 13px; padding-top: 12px; border-top: 1px solid #e9eef1; color: #758697; font-size: 10px; }.source-link { color: #25667f; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.dialog-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.dialog-explain { margin: 0 0 13px; color: #677c8e; font-size: 11px; }
.toast-region { position: fixed; z-index: 10; left: 20px; bottom: 20px; display: grid; gap: 8px; width: min(360px, calc(100% - 40px)); }
.toast { padding: 12px 15px; color: #f7fbfc; background: #17374a; border: 1px solid rgba(255,255,255,.15); border-radius: 10px; box-shadow: 0 12px 30px rgba(9,28,43,.23); font-size: 12px; animation: toast-in .2s ease both; }
.toast.error { background: #873e36; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 980px) {
  .topbar-inner { grid-template-columns: auto 1fr auto; gap: 10px; }
  .main-nav { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }.main-nav::-webkit-scrollbar { display: none; }
  .nav-link { padding: 9px 8px; }.nav-link .nav-icon { display: none; }
  .welcome-grid { padding: 30px; }.welcome-visual { height: 190px; }
  .opportunity-grid, .compact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-layout { grid-template-columns: minmax(0, 1fr) 280px; }
}

@media (max-width: 740px) {
  .auth-layout { width: min(500px, calc(100% - 24px)); min-height: 0; margin: 12px auto; grid-template-columns: 1fr; border-radius: 19px; }
  .auth-intro { min-height: 275px; padding: 27px 27px 30px; }
  .auth-intro .eyebrow { margin-top: 25px; }.auth-intro h1 { font-size: 31px; }.auth-lead { margin: 10px 0 15px; font-size: 12px; }
  .auth-points { gap: 8px; font-size: 11px; }.point-check { width: 18px; height: 18px; }
  .auth-card { width: 100%; padding: 28px 26px; }.auth-card-head { margin-bottom: 23px; }
  .topbar { position: sticky; }
  .topbar-inner { width: 100%; min-height: 62px; grid-template-columns: auto 1fr auto; gap: 7px; padding: 0 12px; }
  .brand { gap: 5px; font-size: 17px; }.brand-mark { width: 27px; height: 27px; font-size: 15px; }
  .main-nav { justify-content: flex-start; gap: 2px; padding: 0 2px; }
  .nav-link { padding: 8px 9px; font-size: 10px; }.nav-link.active { background: #edf5f2; }
  .topbar-user { gap: 3px; }.user-avatar { width: 29px; height: 29px; font-size: 11px; }.user-greeting { display: none; }.topbar-user .icon-button { width: 30px; }
  .page-wrap { width: calc(100% - 28px); min-height: calc(100vh - 130px); padding: 20px 0 40px; }
  .welcome-grid { grid-template-columns: 1fr; min-height: 285px; padding: 26px 23px; }
  .welcome-copy h1 { font-size: 29px; }.welcome-lead { max-width: 330px; font-size: 12px; }
  /* Decoration sits opposite the button (inline-end) and behind the text, so it never covers the button. */
  .welcome-visual { position: absolute; inset-inline-end: 0; bottom: -12px; z-index: 0; width: 190px; height: 150px; opacity: .55; transform: scale(.72); transform-origin: bottom center; pointer-events: none; }
  .welcome-copy { z-index: 2; }
  .visual-sun { right: 25%; }.visual-card { right: 12%; }.visual-label { right: 9%; }
  .stats-grid { gap: 8px; margin: 12px 0 27px; }.stat-card { min-height: 121px; padding: 13px 12px; }.stat-icon { top: 12px; inset-inline-end: 11px; width: 28px; height: 28px; font-size: 16px; }.stat-label { max-width: 73%; font-size: 10px; }.stat-value { margin-top: 6px; font-size: 23px; }.stat-note { font-size: 9px; line-height: 1.4; }
  .home-lower-grid { grid-template-columns: 1fr; }.profile-progress-card { min-height: 150px; padding: 17px; }.profile-progress-card .button { flex: 0 0 auto; padding: 8px 10px; font-size: 10px; }
  .upcoming-card { min-height: 125px; }.section-heading h2, .page-title-row h1 { font-size: 20px; }
  .page-title-row { align-items: flex-start; margin-bottom: 17px; }.page-intro { max-width: 480px; font-size: 11px; }.result-count { padding: 7px 9px; font-size: 9px; }
  .filter-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 9px; }.search-field { grid-column: 1 / -1; padding: 0 6px; }.select-field select { width: 100%; min-width: 0; }.filter-reset { grid-column: 1 / -1; }
  .opportunity-grid, .compact-grid { grid-template-columns: 1fr; gap: 10px; }.opportunity-card { min-height: 240px; padding: 15px; }.compact-grid .opportunity-card { min-height: 220px; }
  .profile-layout { grid-template-columns: 1fr; }.profile-aside { grid-template-columns: 1fr 1fr; }.form-card { padding: 18px 15px; }.form-grid { gap: 13px 10px; }
  .admin-stats { grid-template-columns: repeat(2, 1fr); }.admin-layout { grid-template-columns: 1fr; }.admin-side { grid-template-columns: 1fr; }.builder-row { grid-template-columns: 1fr 1fr; }
  .application-tools { grid-template-columns: 1fr 130px; }.task-add { grid-column: 1 / -1; order: 2; }.application-deadline { width: auto; }.application-card { padding: 14px; }
  .pipeline-step { gap: 4px; font-size: 8px; }.pipeline-step::after { width: 13px; margin: 0 4px; }.tracker-privacy { width: 100%; margin-right: 0; }
  .dialog-shell { padding: 20px 15px; }.dialog-grid { grid-template-columns: 1fr; }.dialog-title { font-size: 20px; }.application-head { align-items: stretch; flex-direction: column; }.status-select { width: 100%; }
  .site-footer { width: calc(100% - 28px); flex-wrap: wrap; font-size: 9px; }.site-footer > span:last-child { width: 100%; }
}
.onboarding-note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 15px;
  padding: 14px 17px;
  color: #244a3d;
  background: #e9efcf;
  border: 1px solid #d9e3b5;
  border-radius: 11px 19px 11px 11px;
}
.onboarding-note[hidden] { display: none; }
.onboarding-note strong { display: block; font-size: 13px; }
.onboarding-note p { margin: 2px 0 0; color: #65755e; font-size: 11px; }
.onboarding-mark { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; color: #385a3d; background: #d2e39a; border-radius: 50%; }
.preference-disclosure {
  padding: 16px 19px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 11px 22px 11px 11px;
}
.preference-disclosure summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; }
.preference-disclosure summary::-webkit-details-marker { display: none; }
.preference-disclosure summary strong { display: block; color: var(--ink); font-size: 14px; }
.preference-disclosure summary small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; font-weight: 400; }
.preference-disclosure summary b { display: grid; width: 29px; height: 29px; place-items: center; color: var(--blue-deep); background: #e7edcf; border-radius: 50%; font-size: 17px; }
.preference-disclosure[open] summary b { transform: rotate(45deg); }
.preference-disclosure .form-grid { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }

@media (max-width: 410px) {
  .topbar-inner { gap: 4px; padding: 0 8px; }.nav-link { padding: 8px 6px; font-size: 9px; }.brand { font-size: 15px; }.brand-mark { width: 25px; height: 25px; }
  .form-grid { grid-template-columns: 1fr; }.field-full { grid-column: auto; }.profile-aside { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.stat-card { padding: 10px 8px; }.stat-label { font-size: 9px; }.stat-note { font-size: 8px; }
  .admin-create-card .form-grid { grid-template-columns: 1fr; }.admin-create-card .field-full { grid-column: auto; }.builder-row { grid-template-columns: 1fr; }.builder-wide { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* OFinder visual system: warm paper, deep botanical green, and a small citrus accent. */
.auth-layout { border-radius: 34px 54px 34px 34px; border-color: rgba(255,253,248,.9); }
.auth-intro { background:
  radial-gradient(ellipse at 12% 91%, rgba(216,236,159,.23), transparent 16rem),
  radial-gradient(ellipse at 91% 12%, rgba(237,154,116,.24), transparent 19rem),
  linear-gradient(145deg, #173b34 4%, #21584b 67%, #2d6d58); }
.auth-intro h1 { letter-spacing: -.035em; }
.auth-intro .eyebrow { margin-top: 62px; }
.auth-card { padding: clamp(20px, 4vh, 42px) clamp(25px, 4vw, 46px); }
.auth-card h2 { letter-spacing: -.025em; }
.auth-tabs { margin-top: 22px; }
.brand { letter-spacing: -.035em; }
.brand-mark { box-shadow: 0 5px 12px rgba(36, 80, 62, .10); }
.welcome-grid {
  min-height: 275px;
  border-radius: 18px 38px 18px 18px;
  background:
    radial-gradient(circle at 87% 20%, rgba(237,154,116,.34), transparent 17rem),
    linear-gradient(115deg, #173b34 0%, #21584b 71%, #306a55 100%);
}
.welcome-grid::after { background: radial-gradient(circle at 70% 94%, rgba(216,236,159,.17), transparent 18rem); }
.welcome-copy h1 { letter-spacing: -.04em; }
.welcome-copy .button { min-height: 40px; color: var(--ink); background: #f8f4e9; border-color: rgba(255,255,255,.35); }
.welcome-copy .button:hover { background: var(--lime); }
.visual-sun { background: linear-gradient(135deg, #f5bd92, #e78d69); box-shadow: 0 0 60px rgba(237,154,116,.24); }
.visual-orbit { border-color: rgba(227,239,183,.40); }
.visual-card { border-radius: 16px 16px 16px 5px; }
.visual-card-mark { color: #24543f; background: #e7efc6; }
.stat-card, .profile-progress-card, .upcoming-card, .form-card, .admin-table-card,
.application-card, .opportunity-card, .filter-bar, .tracker-legend, .empty-state {
  background: var(--paper);
  border-color: var(--line);
}
.stat-card { border-radius: 10px 19px 10px 10px; box-shadow: 0 7px 22px rgba(48,58,43,.035); }
.opportunity-card { border-radius: 11px 21px 11px 11px; box-shadow: 0 10px 30px rgba(48,58,43,.055); }
.form-card, .admin-table-card { border-radius: 11px 22px 11px 11px; }
.notfit-disclosure {
  margin-top: 21px;
  padding: 15px 17px;
  color: var(--ink);
  background: #f0ebe2;
  border: 1px solid #e5ddd0;
  border-radius: 12px 22px 12px 12px;
}
.notfit-disclosure summary { display: flex; align-items: center; gap: 9px; cursor: pointer; font-weight: 700; }
.notfit-disclosure > .muted { margin: 8px 0 12px; }
.count-chip { display: inline-grid; min-width: 24px; height: 24px; place-items: center; padding: 0 7px; color: #78533f; background: #f5d3bd; border-radius: 99px; font-size: 11px; }
.daily-empty { max-width: 600px; margin: 24px 0; padding: 26px; }
.daily-empty p { max-width: 430px; }
.field input, .field select, .field textarea, .search-field input, .select-field select { background: #fffefa; border-color: #e3ddd1; border-radius: 10px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #79a38a; }
.button-primary { background: #24735d; box-shadow: 0 6px 15px rgba(36,115,93,.16); }
.button-primary:hover { background: #185842; }
.nav-link.active { color: #185842; background: #e7edcf; }
.user-avatar { color: #24543f; background: #e3edc6; }
@media (max-width: 740px) {
  .auth-layout { border-radius: 24px; }
  .auth-intro .eyebrow { margin-top: 30px; }
  .welcome-grid { border-radius: 17px 29px 17px 17px; }
}

.picker-row, .phone-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}
.language-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(140px, .65fr) auto;
  gap: 9px;
  align-items: center;
}
.phone-row { grid-template-columns: minmax(130px, .85fr) minmax(0, 1.15fr); }
.phone-row input { direction: ltr; text-align: left; }
.phone-row select { min-width: 0; }
.selected-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.selected-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px 4px 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-soft);
  font-size: .82rem;
}
.chip-remove {
  display: inline-grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border: 0;
  border-radius: 50%;
  background: var(--clay);
  color: var(--ink);
  cursor: pointer;
  line-height: 1;
}
@media (max-width: 520px) {
  .phone-row { grid-template-columns: minmax(0, 1fr); }
  .language-picker { grid-template-columns: 1fr 1fr; }
  .language-picker input { grid-column: 1 / -1; }
}

/* A complete low-glare theme. The opportunity/status colors stay distinct. */
:root[data-theme="dark"] {
  color-scheme: dark;
  /* Surfaces and text follow the OFinder App Design System v1.1 (dark). */
  --ink: #f3f7f4;
  --ink-soft: #c6d5cd;
  --muted: #a7b5ae;
  --line: #30453c;
  --paper: #16221d;
  --canvas: #0b1210;
  --navy: #e4efe8;
  --blue: #64b38f;
  --blue-deep: #8ecbaa;
  --mint: #405039;
  --mint-deep: #b9d59a;
  --lilac: #41364b;
  --sand: #51432e;
  --rose: #503630;
  --red: #ffb5a8;
  --lime: #4b5b3b;
  --coral: #e99b78;
  --clay: #393a32;
  --shadow: 0 20px 52px rgba(0, 0, 0, .28);
}

html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 5% 10%, rgba(23, 55, 45, .45), transparent 24rem),
    radial-gradient(circle at 95% 5%, rgba(47, 140, 112, .14), transparent 22rem),
    var(--canvas);
}
html[data-theme="dark"] .auth-layout { border-color: #34453e; box-shadow: 0 30px 80px rgba(0, 0, 0, .34); }
html[data-theme="dark"] .auth-tabs { background: #18221e; }
html[data-theme="dark"] .auth-tab.active { background: #293831; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }
html[data-theme="dark"] .auth-private { color: #c5d9c7; background: #344337; }
html[data-theme="dark"] .field,
html[data-theme="dark"] .choice-field legend,
html[data-theme="dark"] .builder-head strong { color: #d9e6df; }
html[data-theme="dark"] .field > span small,
html[data-theme="dark"] .field-hint { color: #a5b6ad; }
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field select,
html[data-theme="dark"] .field textarea,
html[data-theme="dark"] .search-field input,
html[data-theme="dark"] .select-field select {
  color: var(--ink);
  background: #18221e;
  border-color: #40534a;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .18);
}
html[data-theme="dark"] .field input::placeholder,
html[data-theme="dark"] .field textarea::placeholder,
html[data-theme="dark"] .search-field input::placeholder { color: #82948a; }
html[data-theme="dark"] .field input:hover,
html[data-theme="dark"] .field select:hover,
html[data-theme="dark"] .field textarea:hover { border-color: #688779; }
html[data-theme="dark"] .button-secondary { color: #d7e7df; background: #26352e; border-color: #40554a; }
html[data-theme="dark"] .button-secondary:hover { background: #30443a; border-color: #5a806c; }
html[data-theme="dark"] .button-danger-text { color: #ffb5a8; }
html[data-theme="dark"] .topbar { background: rgba(20, 29, 25, .94); border-color: #34443d; }
html[data-theme="dark"] .nav-link { color: #aabbb2; }
html[data-theme="dark"] .nav-link:hover,
html[data-theme="dark"] .icon-button:hover { color: var(--ink); background: #293831; border-color: #40534a; }
html[data-theme="dark"] .nav-link.active { color: #c8e5be; background: #344332; }
html[data-theme="dark"] .user-greeting { color: #c6d5cd; }
html[data-theme="dark"] .user-avatar { color: #d8ecc1; background: #3c4b35; }
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .profile-progress-card,
html[data-theme="dark"] .upcoming-card,
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .admin-table-card,
html[data-theme="dark"] .application-card,
html[data-theme="dark"] .opportunity-card,
html[data-theme="dark"] .filter-bar,
html[data-theme="dark"] .tracker-legend,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .admin-stat {
  color: var(--ink);
  background: var(--paper);
  border-color: var(--line);
  box-shadow: 0 9px 26px rgba(0, 0, 0, .15);
}
html[data-theme="dark"] .stat-label,
html[data-theme="dark"] .opp-org,
html[data-theme="dark"] .opp-summary,
html[data-theme="dark"] .meta-item,
html[data-theme="dark"] .opp-fit,
html[data-theme="dark"] .empty-copy,
html[data-theme="dark"] .form-card-heading p,
html[data-theme="dark"] .admin-stat small,
html[data-theme="dark"] .admin-record-copy small,
html[data-theme="dark"] .dialog-org,
html[data-theme="dark"] .dialog-explain,
html[data-theme="dark"] .detail-panel p,
html[data-theme="dark"] .rule-item small,
html[data-theme="dark"] .funding-item small,
html[data-theme="dark"] .source-line { color: #a7b7ae; }
html[data-theme="dark"] .stat-note,
html[data-theme="dark"] .progress-copy small { color: #93a59b; }
html[data-theme="dark"] .meta-item strong,
html[data-theme="dark"] .dialog-title { color: var(--ink); }
html[data-theme="dark"] .progress-track,
html[data-theme="dark"] .step-dot { background: #34433c; }
html[data-theme="dark"] .result-count,
html[data-theme="dark"] .private-chip { color: #c6e2d1; background: #2c4438; }
html[data-theme="dark"] .admin-chip { color: #d4c6e6; background: #40374d; }
html[data-theme="dark"] .tag { color: #cfdbd5; background: #35423c; }
html[data-theme="dark"] .tag-demo { color: #f0d395; background: #493e2b; }
html[data-theme="dark"] .tag-online { color: #bfe6cf; background: #2b4437; }
html[data-theme="dark"] .reason-chip { color: #c1e4cf; background: #2a4034; }
html[data-theme="dark"] .reason-chip.conflict { color: #ffc1b6; background: #4b322f; }
html[data-theme="dark"] .save-button { color: #cfddd6; background: #26342e; border-color: #405149; }
html[data-theme="dark"] .save-button.saved { color: #ffc2b8; background: #49332f; border-color: #66413b; }
html[data-theme="dark"] .empty-state { border-style: dashed; }
html[data-theme="dark"] .application-card,
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .admin-table-card { border-radius: 11px 22px 11px 11px; }
html[data-theme="dark"] .status-select { color: #c7e4d3; background: #263a30; border-color: #3f5d4b; }
html[data-theme="dark"] .pipeline-step { color: #9eafa6; }
html[data-theme="dark"] .pipeline-step.is-complete,
html[data-theme="dark"] .pipeline-step.is-current { color: #b5dfc3; }
html[data-theme="dark"] .pipeline-step.is-current .step-dot { color: #15221b; background: #86c49d; box-shadow: 0 0 0 4px #304538; }
html[data-theme="dark"] .check-chip { color: #c5d4cc; background: #26322d; border-color: #3b4b43; }
html[data-theme="dark"] .check-chip:has(input:checked) { color: #c6e5cf; background: #2e4638; border-color: #52775d; }
html[data-theme="dark"] .aside-note { color: #d0e0d7; background: #263a31; border-color: #3b5748; }
html[data-theme="dark"] .aside-note-warm { background: #3a3429; border-color: #514735; }
html[data-theme="dark"] .aside-note p,
html[data-theme="dark"] .aside-note li { color: #b4c5bc; }
html[data-theme="dark"] .builder-row,
html[data-theme="dark"] .admin-record,
html[data-theme="dark"] .detail-panel { color: var(--ink); background: #1a2520; border-color: #35463e; }
html[data-theme="dark"] .builder-head small { color: #a2b3aa; }
html[data-theme="dark"] .notfit-disclosure { color: var(--ink); background: #2b2d27; border-color: #42463a; }
html[data-theme="dark"] .count-chip { color: #f0d2bd; background: #523e32; }
html[data-theme="dark"] .onboarding-note { color: #dbe8d8; background: #2c392b; border-color: #46563a; }
html[data-theme="dark"] .onboarding-note p { color: #b8c8b2; }
html[data-theme="dark"] .site-footer { color: #a0b0a7; border-color: #34443d; }
html[data-theme="dark"] .brand-footer { color: #c2d3ca; }
html[data-theme="dark"] .dialog-shell { color: var(--ink); background: #202c27; border-color: #3a4a43; }
html[data-theme="dark"] .dialog-close { color: #c5d4cc; background: #2d3b34; }
html[data-theme="dark"] .dialog-warning { color: #f1d79f; background: #403826; border-color: #5a4a2e; }
html[data-theme="dark"] .source-line { border-color: #35463e; }
html[data-theme="dark"] .source-link { color: #91d2b7; }
html[data-theme="dark"] .demo-banner { color: #f0d79d; background: #3e3525; border-color: #59492b; }
html[data-theme="dark"] .record-status { color: #c1d0c8; background: #34413b; }
html[data-theme="dark"] .record-status.published { color: #c2e5cb; background: #2d4635; }
html[data-theme="dark"] .record-status.needs_review { color: #f0d79d; background: #493e28; }
html[data-theme="dark"] .record-status.rejected { color: #ffc2b7; background: #4a3330; }
html[data-theme="dark"] .task-row { color: #c7d5ce; }
html[data-theme="dark"] .task-row.completed span { color: #98a89f; }
html[data-theme="dark"] .task-row small,
html[data-theme="dark"] .freshness-note { color: #9baca2; }
html[data-theme="dark"] .tracker-privacy { color: #bde0c8; }
html[data-theme="dark"] .detail-panel h3,
html[data-theme="dark"] .form-card-heading h2,
html[data-theme="dark"] .upcoming-head h3,
html[data-theme="dark"] .progress-title-row h3 { color: var(--ink); }
html[data-theme="dark"] .auth-footnote { color: #a3b2aa; }
html[data-theme="dark"] .inline-error { color: #ffb5a8; }
html[data-theme="dark"] .theme-toggle { color: #d5e8ce; }

@media (max-width: 520px) {
  .auth-card-head { gap: 8px; }
  .auth-private { padding: 5px 7px; font-size: 10px; }
.theme-toggle { flex: 0 0 34px; }
}

.notification-control { position: relative; flex: 0 0 auto; }
.notification-toggle { position: relative; font-size: 17px; }
.notification-badge {
  position: absolute;
  top: -3px;
  right: -4px;
  display: grid;
  min-width: 17px;
  height: 17px;
  place-items: center;
  padding: 0 4px;
  color: #fff;
  background: #b85c49;
  border: 2px solid var(--paper);
  border-radius: 99px;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
}
.notification-menu {
  position: fixed;
  z-index: 8;
  inset: 80px 12px auto auto;
  display: grid;
  gap: 9px;
  width: min(380px, calc(100vw - 24px));
  max-height: calc(100dvh - 96px);
  overflow-y: auto;
  padding: 14px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 15px;
  box-shadow: var(--shadow);
}
.notification-menu-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.notification-menu-head strong { font-size: 14px; }
.notification-menu-head .text-button { font-size: 10px; white-space: nowrap; }
.notification-items { display: grid; gap: 7px; max-height: min(58vh, 420px); overflow: auto; overscroll-behavior: contain; }
.notification-row { display: flex; align-items: flex-start; gap: 8px; padding: 10px; background: var(--canvas); border: 1px solid var(--line); border-radius: 10px; }
.notification-row.is-unread { border-right: 3px solid var(--blue); }
.notification-row.is-read { opacity: .76; }
.notification-copy { min-width: 0; flex: 1; }
.notification-copy strong { display: block; font-size: 11px; line-height: 1.5; }
.notification-copy p { margin: 3px 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.notification-copy small { color: var(--muted); font-size: 9px; }
.notification-read { flex: 0 0 auto; padding: 4px 7px; color: var(--blue-deep); background: transparent; border: 1px solid var(--line); border-radius: 7px; cursor: pointer; font-size: 9px; }
.notification-read:hover { background: var(--paper); }
.notification-empty { margin: 0; padding: 18px 10px; color: var(--muted); font-size: 11px; text-align: center; }
html[data-theme="dark"] .notification-row { background: #18221e; }
html[data-theme="dark"] .notification-badge { border-color: var(--paper); }

body { min-height: 100vh; display: flex; flex-direction: column; }
.app-view { min-height: 100vh; display: flex; flex-direction: column; }
.page-wrap { flex: 1 0 auto; }
.auth-site-footer { grid-column: 1 / -1; align-self: end; width: min(100%, 1050px); margin: 0 auto; padding: 15px 30px 22px; }
.app-site-footer { flex: 0 0 auto; }
.auth-control-group, .creator-controls { display: inline-flex; align-items: center; gap: 7px; }
.language-select {
  min-width: 88px;
  height: 35px;
  padding: 5px 8px;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 9px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 650;
}
html[data-theme="dark"] .language-select { color: var(--ink); background: #18221e; border-color: #40534a; }

html[dir="ltr"] .main-nav { direction: ltr; }
html[dir="ltr"] .topbar-user { direction: ltr; }
html[dir="ltr"] .notification-menu { right: auto; }
html[dir="ltr"] .notification-row.is-unread { border-right: 1px solid var(--line); border-left: 3px solid var(--blue); }
html[dir="ltr"] .dialog-close { float: right; margin: -8px 0 0 -7px; }
html[dir="ltr"] .site-footer,
html[dir="ltr"] .auth-card,
html[dir="ltr"] .page-section,
html[dir="ltr"] .creator-copy { text-align: left; }
html[dir="ltr"] .notfit-disclosure summary { direction: ltr; }
html[dir="ltr"] .tracker-privacy { margin-right: 0; margin-left: auto; }

.creator-body { background: var(--canvas); }
.creator-shell { width: min(1120px, calc(100% - 40px)); min-height: 100vh; margin: 0 auto; display: flex; flex-direction: column; }
.creator-topbar { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid var(--line); }
.creator-main { flex: 1 0 auto; display: grid; align-content: center; padding: clamp(26px, 7vh, 70px) 0; }
.creator-back { justify-self: start; margin-bottom: 17px; color: var(--blue-deep); font-size: 12px; font-weight: 700; }
.creator-card { display: grid; grid-template-columns: 190px minmax(0, 1fr); align-items: center; gap: clamp(24px, 6vw, 64px); padding: clamp(24px, 5vw, 52px); background: var(--paper); border: 1px solid var(--line); border-radius: 20px 38px 20px 20px; box-shadow: var(--shadow); }
.creator-portrait-wrap { display: grid; justify-items: center; }
.creator-avatar { width: 170px; height: 170px; display: grid; place-items: center; object-fit: cover; color: #194537; background: linear-gradient(145deg, #dbe9b6, #b6d8c5); border: 5px solid var(--paper); border-radius: 50%; box-shadow: 0 0 0 1px var(--line), 0 15px 34px rgba(26, 72, 54, .13); font-size: 38px; font-weight: 800; }
.creator-copy .eyebrow { margin-bottom: 8px; }
.creator-copy h1 { margin: 0; color: var(--ink); font-size: clamp(28px, 4vw, 40px); line-height: 1.2; }
.creator-title { margin: 8px 0 0; color: var(--blue-deep); font-size: 15px; font-weight: 700; }
.creator-bio { max-width: 650px; margin: 16px 0 0; color: var(--muted); font-size: 13px; line-height: 1.8; }
.creator-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 27px; }
.creator-links a { min-width: 0; display: grid; gap: 4px; padding: 12px; color: var(--ink); background: var(--canvas); border: 1px solid var(--line); border-radius: 10px; overflow-wrap: anywhere; }
.creator-links a:hover { border-color: var(--blue); transform: translateY(-1px); }
.creator-link-label { color: var(--muted); font-size: 10px; }
.creator-links strong { font-size: 11px; }
.creator-site-footer { width: 100%; margin-top: auto; }
.founder-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(240px, .8fr); align-items: start; gap: 17px; }
.founder-report-card { grid-column: 1 / -1; }
.founder-report { align-items: flex-start; }
.founder-report .admin-record-copy { overflow-wrap: anywhere; }
.founder-photo-preview { margin: 0 auto 18px; }
.creator-photo-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.taxonomy-field { min-width: 0; }
.taxonomy-search { width: 100%; margin: 0 0 9px; }
.taxonomy-options { max-height: 230px; overflow-y: auto; padding: 3px; }
.taxonomy-option { min-width: 0; }
.achievement-entry-row { display: grid; grid-template-columns: minmax(150px, .8fr) minmax(180px, 1fr) minmax(150px, .8fr) auto; gap: 8px; }
.achievement-entry-row > * { min-width: 0; }
.achievement-list { display: grid; gap: 8px; margin-top: 12px; }
.achievement-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.achievement-copy { min-width: 0; display: grid; gap: 3px; }
.achievement-copy strong { overflow-wrap: anywhere; }
.achievement-copy small { color: var(--muted); }
.achievement-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 5px; }
.achievement-file-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
html[data-theme="dark"] .creator-avatar { color: #e4efc8; background: linear-gradient(145deg, #45553a, #2e5243); }
html[dir="ltr"] .creator-card { direction: ltr; }
html[dir="ltr"] .auth-site-footer,
html[dir="ltr"] .app-site-footer,
html[dir="ltr"] .creator-site-footer { direction: ltr; }

@media (max-width: 740px) {
  .auth-site-footer { padding: 12px 18px 18px; }
  .creator-shell { width: min(100% - 24px, 620px); }
  .creator-card { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .creator-card .creator-copy { width: 100%; }
  .creator-back { justify-self: start; }
  .founder-layout { grid-template-columns: 1fr; }
  .founder-report-card { grid-column: 1; }
  .achievement-entry-row { grid-template-columns: 1fr 1fr; }
  .achievement-entry-row input[type="file"] { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .auth-card-head { display: grid; grid-template-columns: 1fr auto; row-gap: 12px; margin-bottom: 24px; }
  .auth-private { grid-column: 1 / -1; justify-self: start; }
  .auth-control-group { justify-self: end; }
  .language-select { min-width: 80px; height: 32px; font-size: 10px; }
  .topbar-user { gap: 2px; }
  .topbar-user .language-select { min-width: 70px; padding: 4px 5px; }
  .creator-links { grid-template-columns: 1fr; }
  .creator-avatar { width: 138px; height: 138px; }
  .creator-topbar .brand { font-size: 17px; }
  .achievement-entry-row { grid-template-columns: 1fr; }
  .achievement-entry-row input[type="file"] { grid-column: auto; }
  .achievement-item { align-items: flex-start; flex-direction: column; }
  .achievement-actions { justify-content: flex-start; }
}

/* Review & revision dialogs */
.review-checks { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 6px; }
.review-check { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; background: var(--surface-soft, rgba(127,127,127,.08)); }
.review-check-mark { font-weight: 700; min-width: 1.2em; text-align: center; }
.review-check.is-ok .review-check-mark { color: #1f8a5b; }
.review-check.is-warning .review-check-mark { color: #b7791f; }
.review-check.is-blocking .review-check-mark { color: #c53030; }
.revision-diff { display: grid; gap: 8px; margin: 12px 0; }
.revision-row { display: grid; grid-template-columns: minmax(110px, 1fr) 2fr 2fr; gap: 8px; padding: 8px; border-radius: 10px; background: rgba(127,127,127,.08); overflow-wrap: anywhere; font-size: .9rem; }
.revision-before { text-decoration: line-through; opacity: .7; }
.revision-after { font-weight: 600; }
.document-list { margin: 0; padding-inline-start: 1.2em; }
.achievement-description { margin: 4px 0 0; font-size: .9rem; opacity: .85; }
@media (max-width: 640px) { .revision-row { grid-template-columns: 1fr; } }
.extraction-box { margin: 12px 0; padding: 10px 12px; border-radius: 12px; border: 1px dashed rgba(183,121,31,.5); }
.extraction-evidence { opacity: .75; }
.tag-new { background: #e6f4ea; color: #1b6b3a; }
.tag-eligibility.is-eligible { background: #e3f1ec; color: #1f6b4f; }
.tag-eligibility.is-ineligible { background: #fbe9e7; color: #9b2c2c; }
.tag-eligibility.is-unknown { background: #f5efe0; color: #7a5b16; }
html[data-theme="dark"] .tag-new { background: #1f3b2b; color: #9fe0b5; }
html[data-theme="dark"] .tag-eligibility.is-eligible { background: #1d3a30; color: #9fd9c0; }
html[data-theme="dark"] .tag-eligibility.is-ineligible { background: #4a2323; color: #f2b8b5; }
html[data-theme="dark"] .tag-eligibility.is-unknown { background: #3d3420; color: #e9d29a; }

/* Match explanation, partial matches, password reset and notification settings */
.partial-section { margin-top: 8px; }
.partial-section > .muted { margin: 0 0 12px; }
.reason-lead { color: var(--muted); font-size: 10px; font-weight: 700; }
.opp-fit strong.match-strong { color: #226c55; }
.opp-fit strong.match-moderate { color: #3d6f8a; }
.opp-fit strong.match-weak, .opp-fit strong.match-partial { color: #8a6a2c; }
.opp-fit strong.match-not_eligible { color: #9a5149; }
.match-strength { margin: 0 0 8px; }
.match-strength strong { display: inline-block; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; }
.match-reason-list { margin: 0 0 10px; padding-inline-start: 20px; font-size: 13px; line-height: 1.8; }
.match-reason-list.is-positive li::marker { content: "✓  "; color: #2f8a68; }
.match-reason-list.is-negative li::marker { content: "–  "; color: #b0655c; }
.detail-line strong { font-weight: 700; }
.auth-secondary-action { align-self: flex-start; margin-top: 10px; padding-inline: 0; }
.auth-partner-link { color: var(--blue-deep); font-weight: 700; }
.inline-success { margin: 0; padding: 10px 12px; color: #1f6b50; background: #eaf6ef; border-radius: 10px; font-size: 13px; }
html[data-theme="dark"] .inline-success { color: #c1e4cf; background: #2a4034; }
html[data-theme="dark"] .opp-fit strong.match-strong { color: #9fdcbf; }
html[data-theme="dark"] .opp-fit strong.match-moderate { color: #a9cfe6; }
html[data-theme="dark"] .opp-fit strong.match-weak, html[data-theme="dark"] .opp-fit strong.match-partial { color: #e3c98f; }
html[data-theme="dark"] .opp-fit strong.match-not_eligible { color: #ffc1b6; }

/* ---------------------------------------------------------------- apply, applications, confirmations */
.apply-panel { display: grid; gap: 6px; margin: 14px 0 6px; padding: 14px 16px; background: #eef6ee; border: 1px solid #cfe3d2; border-radius: 12px; }
.apply-mode { margin: 0; color: var(--blue-deep); font-size: 12px; font-weight: 750; }
.apply-explain { margin: 0; color: var(--ink-soft); font-size: 12px; }
.apply-cta { justify-self: start; min-height: 46px; padding-inline: 22px; font-size: 15px; font-weight: 750; }
.apply-host { color: var(--muted); font-size: 11px; }
.public-id { display: inline-block; color: var(--muted); font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 11px; letter-spacing: .02em; direction: ltr; unicode-bidi: isolate; }
.application-ids { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 0; }
.tag-internal { color: #3b4f8f; background: #e7ecfb; }
.tag-external { color: #6a5520; background: #fbf1d8; }
.application-notice { margin: 10px 0 0; padding: 9px 12px; color: var(--ink-soft); background: #f7f5ef; border-radius: 9px; font-size: 12px; }
.application-notice p { margin: 0; }
.application-notice small { color: var(--muted); }
.application-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.button-danger { color: #fff; background: #a64e42; border-color: #a64e42; }
.button-danger:hover { background: #8f4136; }
.confirm-dialog .dialog-shell { max-width: 560px; }
.confirm-details { margin: 8px 0 12px; padding-inline-start: 18px; color: var(--ink-soft); font-size: 13px; }
.confirm-details li { margin: 4px 0; overflow-wrap: anywhere; }
.confirm-details .confirm-section { margin-top: 10px; list-style: none; margin-inline-start: -18px; color: var(--ink); font-weight: 700; }
.notification-open { display: grid; gap: 2px; width: 100%; padding: 0; border: 0; background: transparent; text-align: start; cursor: pointer; }
.notification-open:hover strong { text-decoration: underline; }
.notification-subject { color: var(--ink); font-size: 12px; font-weight: 700; }
.apply-content { display: grid; gap: 14px; max-width: 820px; }
.apply-head { display: grid; gap: 2px; }
.apply-head p { margin: 0; }
.privacy-note { padding: 12px 14px; background: #eef3fb; border: 1px solid #d8e2f4; border-radius: 10px; font-size: 12px; }
.privacy-note p { margin: 4px 0 0; }
.apply-instructions { margin: 0; white-space: pre-line; }
.apply-section { display: grid; gap: 14px; border: 1px solid var(--line); }
.apply-section legend { padding: 0 6px; font-weight: 750; }
.apply-question { display: grid; gap: 6px; }
.question-label { font-weight: 650; font-size: 13px; }
.required-mark { color: #a64e42; }
.choice-group { display: flex; flex-wrap: wrap; gap: 8px; }
.file-answer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.file-name { font-weight: 650; overflow-wrap: anywhere; }
.apply-success { display: grid; gap: 8px; padding: 22px; background: #eef6ee; border-radius: 14px; }
.apply-success h2 { margin: 0; }
.apply-success .public-id { font-size: 15px; color: var(--blue-deep); }
html[data-theme="dark"] .apply-panel, html[data-theme="dark"] .apply-success { background: #1d3229; border-color: #2d4a3d; }
html[data-theme="dark"] .apply-mode { color: #a9dcc3; }
html[data-theme="dark"] .apply-explain, html[data-theme="dark"] .application-notice { color: #c8d6ce; }
html[data-theme="dark"] .application-notice { background: #22302b; }
html[data-theme="dark"] .privacy-note { background: #1f2a3a; border-color: #2e3d55; }
html[data-theme="dark"] .tag-internal { color: #c7d3ff; background: #2b3557; }
html[data-theme="dark"] .tag-external { color: #f3dca4; background: #4a3d1c; }
html[data-theme="dark"] .notification-subject, html[data-theme="dark"] .confirm-details .confirm-section { color: #e9f1ec; }
html[data-theme="dark"] .button-danger { color: #fff; background: #b4574a; border-color: #b4574a; }
@media (max-width: 640px) {
  .apply-cta { justify-self: stretch; text-align: center; }
  .application-actions .button { flex: 1 1 auto; }
}

/* ---------------------------------------------------------------- verification badges (shared)
   Gold is reserved for the Founder; blue marks staff, verified accounts and verified organizations. */
:root { --badge-gold-ink: #6b4d00; --badge-gold-bg: #fdf0c4; --badge-gold-line: #e3c25a;
        --badge-blue-ink: #0f4c8a; --badge-blue-bg: #e1eefc; --badge-blue-line: #9cc3ef; }
:root[data-theme="dark"] { --badge-gold-ink: #ffe08a; --badge-gold-bg: #3f3414; --badge-gold-line: #8a6d1f;
                           --badge-blue-ink: #a9d1ff; --badge-blue-bg: #17304a; --badge-blue-line: #2f5f8e; }
.verify-badge { display: inline-flex; align-items: center; gap: 4px; padding-block: 1px; padding-inline: 7px; border: 1px solid;
  border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 1.6; white-space: nowrap; vertical-align: middle; }
.verify-badge-gold { color: var(--badge-gold-ink); background: var(--badge-gold-bg); border-color: var(--badge-gold-line); }
.verify-badge-blue { color: var(--badge-blue-ink); background: var(--badge-blue-bg); border-color: var(--badge-blue-line); }
.founder-label { display: block; color: var(--badge-gold-ink); font-size: 11px; font-weight: 650; letter-spacing: .02em; }

/* ---------------------------------------------------------------- identity, comments, quality, pipeline */
.user-avatar { overflow: hidden; }
.user-avatar img, .avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.user-badge { display: inline-flex; }
.avatar { display: inline-grid; flex: 0 0 auto; width: 36px; height: 36px; place-items: center; overflow: hidden; color: var(--ink);
  background: var(--lime); border-radius: 50%; font-weight: 700; }
.avatar-small { width: 32px; height: 32px; font-size: 13px; }
.avatar-large { width: 96px; height: 96px; font-size: 34px; }
.author-line { display: flex; align-items: center; gap: 10px; min-width: 0; }
.author-names { display: grid; min-width: 0; }
.author-name-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.comments-section { display: grid; gap: 12px; margin-block-start: 22px; padding-block-start: 18px; border-block-start: 1px solid var(--line); }
.comments-section h3 { margin: 0; }
.comment-list { display: grid; gap: 12px; }
.comment { display: grid; gap: 8px; padding: 14px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; }
.comment-reply { padding: 10px; background: transparent; border-inline-start: 3px solid var(--line); border-radius: 0; border-block: 0; border-inline-end: 0; }
.comment-removed { color: var(--muted); font-style: italic; }
.comment-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.comment-time { color: var(--muted); font-size: 12px; }
.comment-body { margin: 0; white-space: pre-line; overflow-wrap: anywhere; line-height: 1.7; }
.comment-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.comment-action { padding-block: 4px; padding-inline: 10px; color: var(--ink-soft); background: transparent; border: 1px solid var(--line);
  border-radius: 999px; font: inherit; font-size: 12px; cursor: pointer; }
.comment-action:hover, .comment-action:focus-visible { border-color: var(--blue); color: var(--ink); }
.comment-action.is-liked { color: var(--red); border-color: var(--red); }
.comment-action.is-danger { color: var(--red); }
.comment-replies { display: grid; gap: 8px; margin-inline-start: 22px; }
.comment-form { display: grid; gap: 8px; }
.comment-form textarea { width: 100%; padding: 10px 12px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 12px; font: inherit; resize: vertical; }
.comment-form .button { justify-self: end; }
.quality-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.quality-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; }
.quality-list progress { width: 120px; height: 8px; accent-color: var(--mint-deep); }
.match-subtitle { margin-block: 10px 4px; font-weight: 700; font-size: 14px; }
.pipeline-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block-end: 16px; }
.pipeline-summary-stage { display: grid; gap: 2px; min-width: 92px; padding-block: 10px; padding-inline: 14px; background: var(--paper);
  border: 1px solid var(--line); border-radius: 14px; text-align: center; }
.pipeline-summary-stage span { color: var(--muted); font-size: 12px; }
.pipeline-summary-stage strong { font-size: 22px; }
.pipeline-summary .stage-accepted { border-color: var(--mint-deep); }
.pipeline-summary .stage-rejected { border-color: var(--coral); }
.pipeline-arrow { color: var(--muted); font-size: 20px; }
[dir="rtl"] .pipeline-arrow { transform: scaleX(-1); }
.onboarding-progress-row { display: grid; gap: 10px; margin-block-end: 16px; }
.onboarding-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.onboarding-step { display: flex; gap: 10px; align-items: flex-start; padding: 12px; color: var(--muted); background: var(--paper); border: 1px solid var(--line); border-radius: 14px; }
.onboarding-step strong { display: block; color: inherit; }
.onboarding-step small { display: block; font-size: 12px; }
.onboarding-step.is-current { color: var(--ink); border-color: var(--mint-deep); box-shadow: 0 0 0 2px color-mix(in srgb, var(--mint-deep) 25%, transparent); }
.onboarding-step.is-done { color: var(--ink-soft); }
.onboarding-step-number { display: inline-grid; flex: 0 0 auto; width: 26px; height: 26px; place-items: center; color: var(--ink); background: var(--lime); border-radius: 50%; font-weight: 700; }
.onboarding-progress { width: 100%; height: 8px; accent-color: var(--mint-deep); }
.onboarding-progress-row:has(.onboarding-steps[hidden]) .onboarding-progress { display: none; }
.onboarding-nav { display: flex; justify-content: space-between; gap: 10px; margin-block: 8px; }
.announcement-content { display: grid; gap: 14px; max-width: 760px; }
.announcement-body { margin: 0; white-space: pre-line; line-height: 1.8; overflow-wrap: anywhere; }
.announcement-image { max-width: 100%; max-height: 360px; object-fit: contain; border-radius: 14px; }
.identity-settings { align-items: center; }
.avatar-preview { display: flex; justify-content: center; }
.my-reports-list { display: grid; gap: 10px; }
.my-report { display: grid; gap: 6px; padding: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
.my-report-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.terms-text { display: grid; gap: 6px; max-height: 50vh; overflow-y: auto; padding: 12px; border: 1px solid var(--line); border-radius: 12px; line-height: 1.7; }
.terms-text p { margin: 0; }
.terms-version { color: var(--muted); font-size: 12px; }
.register-terms { margin: 0; }
.register-terms .button-text { padding: 0; }
@media (max-width: 640px) {
  .comment-replies { margin-inline-start: 10px; }
  .pipeline-arrow { display: none; }
  .pipeline-summary-stage { flex: 1 1 40%; }
}

/* Optional opportunity cover. Without one, the same space shows the OFinder visual so
   image-less opportunities keep the same weight and hierarchy. */
.opp-card-cover, .dialog-cover {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  border-radius: 16px;
  background: linear-gradient(135deg, #f4f7f3 0%, #d8ec9f 100%);
}
.opp-card-cover { margin-bottom: 14px; }
.dialog-cover { aspect-ratio: 1200 / 630; max-height: 240px; margin-bottom: 14px; }
.opp-cover-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #1b3d33;
  font-weight: 700;
}
.opp-cover-fallback .brand-mark { width: 40px; height: 40px; }
.dialog-cover.opp-cover-fallback .brand-mark { width: 64px; height: 64px; }
html[data-theme="dark"] .opp-card-cover, html[data-theme="dark"] .dialog-cover {
  background: linear-gradient(135deg, #17372d 0%, #2f8c70 100%);
}
html[data-theme="dark"] .opp-cover-fallback { color: #d8ec9f; }
.tag-language { background: var(--clay); color: var(--ink-soft); }
.dialog-language-note {
  display: block;
  margin: 6px 0 10px;
  padding: 6px 12px;
  border-radius: 12px;
  background: var(--clay);
  color: var(--ink-soft);
  font-size: 13px;
}
.dialog-share { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 8px 0 14px; }
.dialog-public-link { color: var(--blue); text-decoration: underline; font-size: 14px; }
.share-button { font-size: 18px; }
.localized-fieldset { display: grid; gap: 10px; padding: 12px 14px; border: 1px dashed var(--line); border-radius: 14px; }
.localized-fieldset legend { padding: 0 6px; font-weight: 700; }
.cover-editor-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; }
.cover-editor-preview { width: 160px; aspect-ratio: 16 / 7; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }

/* ---------------------------------------------------------------- 0.7: sign-in challenges, security, opportunity page, exploration */
:root { --state-ok-ink: #1a6b45; --state-ok-bg: #e3f3ea; --state-warn-ink: #7a5300; --state-warn-bg: #fff1cf; --state-fail-ink: #a12d2d; --state-fail-bg: #fde8e6; }
:root[data-theme="dark"] { --state-ok-ink: #9fe0b5; --state-ok-bg: #1f3b2b; --state-warn-ink: #f1d58a; --state-warn-bg: #43361a; --state-fail-ink: #ffb9b0; --state-fail-bg: #4a2523; }

.code-input { font-size: 24px; font-weight: 700; letter-spacing: .5em; text-align: center; font-variant-numeric: tabular-nums; }
.auth-challenge-email { margin: 0; text-align: center; overflow-wrap: anywhere; }
.auth-challenge-email strong { padding: 4px 10px; background: var(--canvas); border: 1px solid var(--line); border-radius: 999px; font-size: 13px; }
.security-panel { display: grid; gap: 18px; padding-block-start: 6px; }
.security-block { display: grid; gap: 10px; }
.security-block h4 { margin: 0; font-size: 15px; }
.security-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.security-label { color: var(--muted); font-size: 12px; }
.security-email { overflow-wrap: anywhere; font-size: 14px; }
.security-state { padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.security-state.is-ok { color: var(--state-ok-ink); background: var(--state-ok-bg); }
.security-state.is-warn { color: var(--state-warn-ink); background: var(--state-warn-bg); }
.security-step { max-width: 440px; }
.security-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; }
.quiet-hours { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-block: 10px; }
@media (max-width: 520px) { .quiet-hours { grid-template-columns: minmax(0, 1fr); } .code-input { letter-spacing: .35em; } }

.footer-download-link { font-weight: 700; }

/* the opportunity as a page */
.opportunity-page-bar { display: flex; align-items: center; gap: 12px; margin-block-end: 14px; }
.opportunity-page-card { max-width: 920px; margin-inline: auto; padding: 26px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.opportunity-page-card .dialog-title { max-width: none; }
.opportunity-page-card .dialog-explain,
.opportunity-page-card .dialog-org { color: var(--muted); }
html[dir="ltr"] .back-arrow { display: inline-block; transform: scaleX(-1); }
@media (max-width: 640px) { .opportunity-page-card { padding: 16px 14px; border-radius: 14px; } }

/* comments */
.comment-compose-row { display: flex; align-items: flex-start; gap: 10px; }
.comment-compose-row .comment-form { flex: 1 1 auto; min-width: 0; }
.comment-compose-row.is-reply .avatar { width: 28px; height: 28px; font-size: 12px; }
.comment-highlight { outline: 2px solid var(--blue); outline-offset: 2px; background: var(--state-ok-bg); transition: background .4s ease; }
.comment-removed + .comment-replies, .comment-removed .comment-replies { margin-block-start: 4px; }

/* badges: Founder is gold with a star, verified is blue with a check */
.verify-badge-mark { display: inline-grid; place-items: center; min-width: 14px; height: 14px; border-radius: 50%; font-size: 10px; line-height: 1; }
.verify-badge-gold { background: linear-gradient(180deg, var(--badge-gold-bg), color-mix(in srgb, var(--badge-gold-line) 45%, var(--badge-gold-bg))); box-shadow: 0 0 0 1px color-mix(in srgb, var(--badge-gold-line) 40%, transparent); }
.verify-badge-gold .verify-badge-mark { font-size: 13px; }
.verify-badge-blue .verify-badge-mark { color: #fff; background: #1b6ec2; }
:root[data-theme="dark"] .verify-badge-blue .verify-badge-mark { color: #0b1a2b; background: #7db7f0; }

/* notifications */
.notification-title-row { display: flex; align-items: center; gap: 6px; }
.notification-kind { display: inline-grid; flex: 0 0 auto; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: 10px; color: var(--state-ok-ink); background: var(--state-ok-bg); }
.notification-kind-comment_like { color: var(--state-fail-ink); background: var(--state-fail-bg); }
.notification-kind-match_digest { color: var(--state-warn-ink); background: var(--state-warn-bg); }
.notification-title-row strong { flex: 1 1 auto; }

/* exploration */
.explore-more-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-block: 22px 8px; }
.exploration-notice { margin: 0 0 14px; padding: 10px 13px; color: var(--state-warn-ink); background: var(--state-warn-bg); border-radius: 10px; font-size: 13px; line-height: 1.6; }
.exploration-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-block-end: 12px; }
.exploration-tab { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
.exploration-tab.active { color: #fff; background: var(--blue); border-color: var(--blue); }
:root[data-theme="dark"] .exploration-tab.active { color: #0b1210; }
.exploration-tab.active .count-chip { color: #18231f; background: rgba(255, 255, 255, .88); }
.exploration-relax { display: grid; gap: 6px; margin-block-end: 6px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.relax-chip { padding: 6px 12px; color: var(--ink-soft); background: transparent; border: 1px dashed var(--line); border-radius: 999px; font: inherit; font-size: 12px; cursor: pointer; }
.relax-chip.active { color: var(--state-ok-ink); background: var(--state-ok-bg); border: 1px solid var(--state-ok-ink); }
.exploration-more { display: flex; justify-content: center; margin-block-start: 18px; }
.group-badge { font-size: 10px; font-weight: 700; }
.group-eligible { color: var(--state-ok-ink); background: var(--state-ok-bg); }
.group-possibly_suitable { color: var(--state-warn-ink); background: var(--state-warn-bg); }
.group-not_matching { color: var(--state-warn-ink); background: var(--state-warn-bg); }
.group-hard_ineligible { color: var(--state-fail-ink); background: var(--state-fail-bg); }
.exploration-block { display: grid; gap: 6px; margin-block: 10px; }
.explore-checks { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.explore-check { display: flex; align-items: flex-start; gap: 7px; font-size: 12px; line-height: 1.5; }
.explore-check-mark { display: inline-grid; flex: 0 0 auto; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: 11px; font-weight: 800; }
.explore-check.is-ok .explore-check-mark { color: var(--state-ok-ink); background: var(--state-ok-bg); }
.explore-check.is-warn .explore-check-mark { color: var(--state-warn-ink); background: var(--state-warn-bg); }
.explore-check.is-fail .explore-check-mark { color: var(--state-fail-ink); background: var(--state-fail-bg); }
.explore-check-copy { display: grid; min-width: 0; }
.explore-check-label { overflow-wrap: anywhere; }
.explore-check-tag, .explore-check-note, .explore-relaxed-note { color: var(--muted); font-size: 11px; }
.explore-relaxed-note { margin: 0; }
@media (max-width: 640px) { .exploration-tabs { gap: 6px; } .exploration-tab { padding: 7px 10px; font-size: 12px; } }

/* When the nav links do not fit beside the logo and the account controls (narrow window, longer
   language, extra staff/founder links), app.js adds .nav-stacked: the links move to their own
   full-width row and wrap instead of being cut off. */
.topbar-inner.nav-stacked { grid-template-columns: auto 1fr; grid-template-areas: "brand user" "nav nav"; row-gap: 2px; padding-bottom: 8px; }
.topbar-inner.nav-stacked > .brand { grid-area: brand; }
.topbar-inner.nav-stacked > .topbar-user { grid-area: user; justify-self: end; }
.topbar-inner.nav-stacked > .main-nav { grid-area: nav; flex-wrap: wrap; justify-content: center; overflow: visible; row-gap: 4px; }

/* Registration: the yes/no language certificate question. */
.language-certificate-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.language-certificate-choices .check-chip { min-height: 40px; padding: 8px 16px; font-size: 12px; }

/* "My profile": the account's permanent public ID with a copy button. */
.account-id-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 14px; font-size: 14px; color: var(--muted, inherit); }
.account-id-value { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; letter-spacing: .03em; color: var(--text, inherit); }