/* GyneData · template redesign. Shared components retain the original contracts. */
:root {
  --primary:#7152cf;
  --primary-dark:#5839ad;
  --primary-deep:#42288d;
  --primary-light:#f0ebfc;
  --blue:#6d53c7;
  --blue-light:#f2effc;
  --bg:#f7f8fc;
  --text:#292a3f;
  --muted:#85859b;
  --border:#ecebf4;
  --sidebar-w:224px;
  --topbar-h:78px;
  --radius:14px;
  --shadow-sm:0 2px 8px #30205c03;
  --shadow-md:0 8px 28px #4432700b;
  --chart-0:#8061d3;
  --chart-1:#68a0f1;
  --chart-2:#43beb9;
  --chart-3:#f0bd65;
  --chart-4:#eb8d9c;
  --chart-5:#bcc0d6
}

body {
  font-size:13px;
  letter-spacing:.1px
}
.sidebar {
  background:#fff;
  color:var(--text);
  border-right:1px solid var(--border)
}
.sidebar-brand {
  height:78px;
  padding:17px 20px;
  gap:10px;
  border-bottom:1px solid var(--border)
}
.brand-icon {
  background:none;
  color:var(--primary);
  font-size:35px;
  width:36px
}
.brand-text {
  font-size:23px;
  font-weight:750;
  letter-spacing:-.5px;
  color:var(--primary-dark)
}
.brand-text small {
  color:var(--muted);
  font-size:10px;
  letter-spacing:0;
  margin-top:4px
}
.sidebar-nav {
  padding:20px 14px
}
.nav-group-title {
  color:#aaa8bb;
  font-size:10px;
  letter-spacing:1.6px;
  padding:18px 14px 8px
}
.nav-item {
  color:#74748c;
  min-height:46px;
  padding:12px 14px;
  gap:12px;
  margin:4px 0;
  border-radius:9px
}
.nav-item i {
  font-size:19px
}
.nav-item:hover {
  color:var(--primary);
  background:#f7f4fd
}
.nav-item.active {
  color:#fff;
  background:linear-gradient(110deg,#8060d6,#6244b8);
  box-shadow:0 5px 12px #7354c922
}
.nav-sub {
  padding:5px 0
}
.nav-sub .nav-item {
  font-size:12px;
  padding:9px 14px;
  line-height:1.6
}
.nav-dot {
  background:#c2b2e9;
  width:5px;
  height:5px
}
.sidebar-footer {
  border-top:1px solid var(--border);
  padding:15px
}
.platform-note {
  padding:14px;
  border:1px solid var(--border);
  border-radius:10px;
  color:var(--primary-dark);
  font-size:12px;
  margin-bottom:14px;
  background:linear-gradient(140deg,#fff,#faf8ff)
}
.platform-note small {
  display:block;
  color:var(--muted);
  font-size:10px;
  margin-top:8px
}
.user-card {
  background:#f8f7fc
}
.user-avatar {
  background:#eae3fb;
  color:#7555c6
}
.user-meta .name {
  color:var(--text)
}
.user-meta .role,.user-meta a {
  color:var(--muted)
}
.sidebar-close {
  color:var(--primary)
}
.topbar {
  padding:0 28px;
  background:#ffffffed
}
.topbar-title h1 {
  font-size:18px
}
.topbar-title .crumb {
  font-size:10px;
  margin-top:4px
}
.btn-ai,.btn-primary,.ai-input-bar .send-btn {
  background:linear-gradient(115deg,#8060d6,#6745bd);
  box-shadow:0 4px 9px #7354c91c
}
.btn-ai {
  border-radius:8px
}
.btn-primary:hover,.btn-primary:focus {
  background:#6745bd;
  color:#fff
}
.content {
  padding:26px 28px;
  max-width:2100px;
  width:100%;
  margin:auto
}
.card,.dataset-card,.model-card {
  box-shadow:var(--shadow-sm)
}
.card-header {
  background:#fff
}
.card-header:first-child {
  border-radius:14px 14px 0 0
}
.btn {
  border-radius:8px;
  font-size:12px
}
.form-control:focus,.form-select:focus {
  box-shadow:0 0 0 3px #7152cf17
}
.form-control,.form-select {
  min-height:40px
}
.table thead th,.recent-table th {
  background:#f8f7fc
}
.table tbody tr:hover {
  background:#faf8ff
}
.badge {
  font-size:10px
}
.alert-info {
  color:#77639e;
  background:#f3effc;
  border:1px solid #e7dff9
}
.ai-box,.context-card {
  background:#f7f4fd;
  border-color:#e9e2f8;
  color:#665580
}
.context-card p {
  color:var(--muted)
}
.ai-head {
  background:#fff;
  color:var(--text);
  border-bottom:1px solid var(--border);
  padding:22px
}
.ai-head .ai-avatar {
  background:var(--primary-light);
  color:var(--primary)
}
.ai-head .ai-sub {
  color:var(--muted);
  margin-top:3px
}
.ai-close {
  color:var(--muted)
}
.ai-context-bar {
  background:#faf8ff;
  color:var(--primary)
}
.ai-msg.bot {
  background:#fbfaff;
  color:#656078;
  border:1px solid var(--border);
  border-radius:12px 12px 12px 3px
}
.ai-msg.user {
  background:linear-gradient(115deg,#9575de,#7752c6)
}
.ai-input-bar input {
  min-width:0;
  border-radius:9px
}
.ai-input-bar .send-btn {
  border-radius:9px;
  flex-shrink:0
}
.ai-suggest .chip {
  background:#f5f1fd;
  color:var(--primary);
  border:1px solid #eae3f9;
  border-radius:8px;
  padding:8px 10px
}
.ai-context-bar[hidden] {
  display:none
}
.dashboard-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:24px;
  gap:18px
}
.dashboard-heading h2 {
  font-size:26px;
  font-weight:650;
  display:flex;
  gap:12px;
  align-items:center;
  margin:0 0 8px
}
.dashboard-heading p {
  font-size:12px;
  color:var(--muted);
  margin:0
}
.eyebrow {
  font-size:9px;
  letter-spacing:1.8px;
  color:#a09aac;
  margin-bottom:7px
}
.soft-pill {
  background:var(--primary-light);
  border:0;
  color:var(--primary);
  font-size:10px;
  font-weight:400
}
.overview-stats {
  gap:12px
}
.overview-stats .stat-card {
  padding:18px 14px;
  gap:12px;
  min-width:0
}
.overview-stats .stat-icon {
  width:40px;
  height:40px;
  border-radius:50%;
  color:var(--primary);
  background:#f2edfc;
  font-size:20px
}
.stat-info .value {
  color:var(--primary-dark);
  font-weight:650;
  font-size:26px;
  line-height:1.4;
  font-variant-numeric:tabular-nums
}
.stat-info .label {
  font-size:11px
}
.stat-card .hint {
  font-size:9px;
  color:#a7a3b5
}
.stat-card .value.text-value {
  font-size:20px
}
.section-heading {
  margin:26px 0 16px
}
.section-heading h4 {
  font-size:16px;
  font-weight:650
}
.section-heading p {
  font-size:11px;
  margin-top:6px
}
.section-count {
  font-size:11px;
  font-weight:500;
  color:#aaa4bb;
  margin-left:8px
}
.text-link {
  font-size:11px;
  color:var(--primary)
}
.cohort-grid {
  gap:18px;
  align-items:stretch
}
.cohort-card {
  display:flex;
  flex-direction:column;
  border-radius:14px
}
.cohort-head {
  display:flex;
  align-items:center;
  gap:10px;
  padding:22px 18px 10px
}
.cohort-icon {
  height:42px;
  width:42px;
  flex-shrink:0;
  border-radius:12px;
  background:var(--primary-light);
  color:var(--primary);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px
}
.cohort-head h3 {
  font-size:14px;
  line-height:1.55;
  color:#59448c;
  margin:3px 0 0
}
.cohort-index {
  font-size:9px;
  letter-spacing:1.5px;
  color:#aaa1bb
}
.cohort-arrow {
  margin-left:auto;
  align-self:flex-start;
  color:#b4a8ce
}
.cohort-desc {
  color:#9290a3;
  font-size:10px;
  line-height:1.8;
  padding:0 18px;
  margin:0 0 16px;
  min-height:54px
}
.cohort-stats {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  background:linear-gradient(110deg,#faf8ff,#fdfcff);
  border:1px solid var(--border);
  border-radius:9px;
  margin:0 18px 7px;
  padding:13px 0
}
.cohort-stats>div {
  text-align:center;
  border-right:1px solid var(--border)
}
.cohort-stats>div:last-child {
  border:0
}
.cohort-stats span {
  display:block;
  color:var(--muted);
  font-size:10px
}
.cohort-stats b {
  display:block;
  font-size:22px;
  font-weight:600;
  color:var(--primary-dark);
  margin-top:5px
}
.cohort-stats small {
  font-size:12px
}
.cohort-section {
  padding:18px;
  border-bottom:1px solid #f2f0f7
}
.cohort-section h4 {
  font-size:12px;
  margin:0 0 16px;
  font-weight:600;
  display:flex;
  justify-content:space-between;
  align-items:center
}
.cohort-section h4 small {
  font-size:9px;
  color:#aaa6b8;
  font-weight:400
}
.cohort-distribution {
  display:flex;
  gap:18px;
  align-items:center;
  min-height:155px
}
.donut {
  width:132px;
  height:132px;
  border-radius:50%;
  position:relative;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:rotate(-90deg)
}
.donut:before {
  content:'';
  position:absolute;
  inset:17px;
  background:#fff;
  border-radius:50%
}
.donut>div {
  position:relative;
  transform:rotate(90deg);
  text-align:center
}
.donut b {
  display:block;
  color:#383149;
  font-size:23px;
  font-weight:650
}
.donut span {
  display:block;
  color:#aaa5b6;
  font-size:10px
}
.donut-legend {
  flex:1;
  min-width:0
}
.donut-legend>div {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:10px;
  margin:9px 0
}
.legend-dot {
  width:7px;
  height:7px;
  border-radius:2px;
  flex-shrink:0
}
.donut-legend small {
  display:block;
  color:#aaa5b6;
  font-size:9px;
  margin-top:1px
}
.donut-legend b {
  margin-left:auto;
  font-weight:500;
  color:#82768e;
  font-size:10px
}
.clinical-stats {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px
}
.clinical-stats>div {
  border-right:1px solid var(--border);
  min-width:0
}
.clinical-stats>div:last-child {
  border:0
}
.clinical-stats span,.clinical-stats>div>small {
  display:block;
  color:#9993a9;
  font-size:10px
}
.clinical-stats b {
  display:block;
  font-size:14px;
  color:#6b549e;
  font-weight:600;
  margin:9px 0 5px
}
.clinical-stats b small {
  font-size:10px;
  font-weight:400;
  white-space:nowrap
}
.modality-list {
  display:flex;
  flex-wrap:wrap;
  gap:7px
}
.modality-list a {
  flex:1;
  min-width:64px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:12px 4px;
  background:#fcfbff;
  border:1px solid #efebf9;
  border-radius:7px;
  color:#8c80a4;
  font-size:9px;
  text-align:center
}
.modality-list i {
  font-size:21px;
  color:#947cd0
}
.modality-list a:hover {
  background:var(--primary-light)
}
.recent-section {
  margin-top:auto
}
.recent-table {
  margin-top:0;
  font-size:10px
}
.recent-table th {
  padding:9px 5px;
  font-size:9px
}
.recent-table td {
  padding:11px 5px
}
.recent-table a {
  color:#7c6c9b
}
.cohort-footer {
  padding:13px;
  text-align:center;
  font-size:11px;
  color:var(--primary);
  background:#fdfcff
}
.cohort-footer:hover {
  background:var(--primary-light)
}
.model-shortcut {
  background:#fff;
  border:1px solid var(--border);
  border-radius:11px;
  padding:18px;
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--text)
}
.model-shortcut h3 {
  font-size:12px;
  margin:0 0 6px
}
.model-shortcut span {
  font-size:10px;
  color:var(--muted)
}
.model-shortcut>i {
  margin-left:auto;
  color:#b4a7d0
}
.platform-banner {
  display:flex;
  align-items:center;
  gap:13px;
  border:1px solid #e9e2f8;
  border-radius:10px;
  padding:16px 18px;
  background:#f3effb;
  color:#8c79ac;
  font-size:10px;
  margin-top:24px;
  line-height:1.8
}
.platform-banner>i {
  font-size:20px;
  color:#8a6bca
}
.platform-banner b {
  margin-right:12px;
  color:#7455af
}
.model-detail-hero {
  border-color:var(--border);
  background:linear-gradient(120deg,#faf7ff,#fff)
}
.model-card::after {
  display:none
}
.model-card .mc-icon,.model-detail-icon {
  background:#9278ca!important
}
.top-strip {
  background:#a58adc!important
}
.upload-dropzone {
  border-color:#cabbe7;
  background:#fcfaff
}
.form-check-input:checked {
  background-color:var(--primary);
  border-color:var(--primary)
}

.patient-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  gap:20px;
  align-items:start
}
.patient-main {
  min-width:0
}
.patient-page .workspace-grid {
  display:block
}
.patient-page .patient-hero {
  padding:24px 20px;
  flex-wrap:wrap
}
.patient-avatar {
  background:#eee7fb;
  color:#957bcc;
  box-shadow:none;
  border-radius:50%;
  font-size:40px;
  width:62px;
  height:62px
}
.patient-meta h2 {
  font-size:18px
}
.patient-page .metric-card {
  background:#fff;
  padding:15px 12px;
  min-height:86px;
  gap:8px
}
.patient-page .metric-icon {
  background:#f4f0fd
}
.patient-page .metric-value b {
  color:#6e51b0;
  font-size:18px
}
.patient-page .metric-value span {
  font-size:10px
}
.patient-page .metric-card.abnormal .metric-value b {
  color:var(--danger)
}
.patient-page .ai-box {
  font-size:11px;
  line-height:1.9
}
.patient-page .tabs {
  flex-wrap:wrap;
  gap:2px;
  border-bottom:1px solid var(--border)
}
.patient-page .tab {
  font-size:12px;
  padding:12px
}
.clinical-field-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:15px
}
.clinical-field {
  background:linear-gradient(120deg,#fff,#fcfaff);
  border:1px solid var(--border);
  border-radius:9px;
  padding:18px 14px;
  min-height:106px
}
.clinical-field .fk {
  font-size:11px;
  color:#8a8499;
  margin-bottom:9px
}
.clinical-field .fv {
  font-size:17px;
  font-weight:500;
  color:#685198;
  overflow-wrap:anywhere
}
.clinical-field .fv .ref-tag {
  display:block;
  font-size:9px;
  color:#aaa0b9;
  font-weight:400;
  margin:7px 0 0
}
.clinical-field .abnormal-up,.clinical-field .abnormal-down {
  color:var(--danger)
}
.patient-model-entry {
  margin-top:20px
}
.patient-model-entry .card-body {
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap
}
.patient-model-entry h3 {
  font-size:15px;
  margin:0 0 6px
}
.patient-model-entry p {
  font-size:11px;
  color:var(--muted);
  margin:0
}
.patient-model-entry .btn {
  margin-left:auto
}
.patient-notes {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
  margin-top:20px
}
.patient-assistant {
  position:sticky;
  top:98px;
  height:calc(100vh - 125px);
  min-height:530px
}
.patient-assistant .assistant-panel {
  position:relative;
  inset:auto;
  width:100%;
  max-width:none;
  height:100%;
  transform:none;
  box-shadow:var(--shadow-sm);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  z-index:1
}
.patient-assistant .assistant-backdrop {
  display:none
}
.patient-assistant .ai-head {
  padding:20px 16px
}
.patient-assistant .ai-title {
  font-size:16px
}
.patient-assistant .ai-msg {
  max-width:97%;
  font-size:12px;
  line-height:1.9
}
.patient-assistant .ai-messages {
  padding:18px 15px
}
.patient-assistant .ai-suggest {
  padding:10px 15px
}
.patient-assistant .ai-suggest .chip {
  font-size:10px
}
.patient-assistant .ai-input-bar {
  padding:15px 12px
}
.patient-assistant .ai-input-bar input {
  font-size:11px
}
.patient-assistant .ai-close {
  display:none
}
.patient-assistant .ai-context-bar {
  padding:10px 16px;
  font-size:10px
}
.patient-page .content {
  padding:24px
}
.patient-page .metric-grid {
  gap:10px
}
.patient-page .field-section-label {
  border:0;
  margin-top:15px
}
.login-body {
  background:radial-gradient(ellipse at 15% 15%,#e7ddf8,transparent 45%),radial-gradient(ellipse at 95% 90%,#eee5fa,transparent 45%),#f9f8fc
}
.login-card {
  border:1px solid #eee6f8;
  box-shadow:0 25px 80px #60429212;
  padding:42px;
  border-radius:22px
}
.login-brand .lb-icon {
  background:#f1ebfc;
  color:var(--primary);
  font-size:37px;
  box-shadow:none
}
.login-brand h1 {
  font-size:25px;
  color:#4a386a
}
.login-brand p {
  font-size:11px;
  color:#9a8ea8
}
.login-eyebrow {
  font-size:8px;
  letter-spacing:2px;
  color:#a68bbc;
  margin:20px 0 10px
}
.login-hint {
  background:#f8f5fc;
  color:#9a8ba9
}
.login-hint code {
  color:#765aa1
}
.source-switch .form-check-input:focus-visible+.form-check-label {
  outline:3px solid #cdbdef
}

@media(min-width:1600px) {
  .cohort-distribution {
    gap:28px
  }
  .donut {
    width:156px;
    height:156px
  }
  .cohort-section {
    padding:22px
  }
  .patient-layout {
    grid-template-columns:minmax(0,1fr) 390px
  }
  
}

@media(max-width:1350px) {
  .overview-stats.stat-grid-six {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
  .cohort-grid {
    gap:12px
  }
  .cohort-head {
    padding:18px 12px 10px
  }
  .cohort-head h3 {
    font-size:12px
  }
  .cohort-section {
    padding:15px 12px
  }
  .cohort-distribution {
    gap:10px
  }
  .donut {
    width:106px;
    height:106px
  }
  .donut:before {
    inset:13px
  }
  .donut b {
    font-size:20px
  }
  .cohort-desc {
    padding:0 12px;
    min-height:72px
  }
  .cohort-stats {
    margin-left:12px;
    margin-right:12px
  }
  .clinical-stats b small {
    display:block
  }
  .patient-layout {
    grid-template-columns:minmax(0,1fr) 310px
  }
  .patient-page .metric-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .clinical-field-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .patient-notes {
    grid-template-columns:1fr
  }
  
}

@media(min-width:1101px) {
  .cohort-grid {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
  
}

@media(max-width:1100px) {
  .cohort-grid {
    grid-template-columns:1fr
  }
  .cohort-desc {
    min-height:0
  }
  .cohort-distribution {
    gap:35px
  }
  .donut {
    width:140px;
    height:140px
  }
  .donut-legend {
    max-width:300px
  }
  .clinical-stats b small {
    display:inline
  }
  .patient-layout {
    grid-template-columns:1fr
  }
  .patient-assistant {
    position:static;
    height:580px;
    min-height:0
  }
  .model-spotlight {
    grid-template-columns:1fr
  }
  .cohort-head h3 {
    font-size:16px
  }
  
}

@media(max-width:900px) {
  .sidebar {
    z-index:100
  }
  .topbar {
    padding:0 18px
  }
  .content {
    padding:20px
  }
  .dashboard-heading h2 {
    font-size:23px
  }
  .clinical-field-grid {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
  
}

@media(max-width:560px) {
  .content,.patient-page .content {
    padding:15px
  }
  .dashboard-heading {
    align-items:flex-start;
    flex-direction:column;
    gap:14px
  }
  .dashboard-heading h2 {
    font-size:23px
  }
  .overview-stats.stat-grid-six {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px
  }
  .overview-stats .stat-card {
    padding:14px 10px;
    gap:8px
  }
  .overview-stats .stat-icon {
    width:30px;
    height:30px;
    font-size:16px
  }
  .stat-info .value {
    font-size:22px
  }
  .stat-card .value.text-value {
    font-size:17px
  }
  .stat-card .hint {
    font-size:8px
  }
  .topbar-title .crumb {
    max-width:180px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
  }
  .topbar-title h1 {
    font-size:14px;
    max-width:180px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
  }
  .topbar-actions {
    gap:4px
  }
  .btn-ai span {
    display:none
  }
  .clinical-field-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .clinical-field {
    padding:13px 10px
  }
  .patient-page .patient-hero {
    padding:18px 15px
  }
  .patient-meta {
    min-width:160px
  }
  .patient-meta h2 {
    font-size:16px
  }
  .patient-model-entry .btn {
    margin-left:0
  }
  .login-card {
    padding:28px 22px;
    width:calc(100% - 32px)
  }
  .section-heading p {
    font-size:10px
  }
  .platform-banner {
    align-items:flex-start
  }
  .model-shortcut {
    padding:15px
  }
  .cohort-distribution {
    gap:20px
  }
  .donut-legend {
    max-width:none
  }
  
}