@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@600;700&display=swap");

      :root {
        color-scheme: light;
        --bg: #f6fbfd;
        --surface: #ffffff;
        --surface-soft: #f3fbff;
        --text: #13194d;
        --muted: #66718d;
        --border: rgba(19, 25, 77, 0.1);
        --primary: #08bdf2;
        --primary-strong: #0d8bda;
        --accent: #6861eb;
        --success-bg: #eaf9f2;
        --success-text: #187449;
        --error-bg: #fff1ef;
        --error-text: #b13c35;
        --shadow: 0 20px 60px rgba(19, 25, 77, 0.08);
        --radius-xl: 26px;
        --radius-lg: 18px;
        --radius-md: 14px;
      }

      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        min-height: 100vh;
        color: var(--text);
        font-family: "Inter", sans-serif;
        background:
          radial-gradient(circle at top left, rgba(8, 189, 242, 0.08), transparent 24%),
          radial-gradient(circle at top right, rgba(104, 97, 235, 0.08), transparent 20%),
          linear-gradient(180deg, #fbfeff 0%, var(--bg) 100%);
      }

      img {
        display: block;
        max-width: 100%;
      }

      button,
      input,
      textarea,
      select {
        font: inherit;
      }

      .hidden {
        display: none !important;
      }

      .page {
        width: min(1040px, calc(100% - 24px));
        margin: 24px auto 40px;
      }

      .card,
      .status {
        background: rgba(255, 255, 255, 0.94);
        border: 1px solid var(--border);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
      }

      .status {
        margin-bottom: 16px;
        padding: 14px 16px;
        line-height: 1.5;
      }

      .status.info {
        color: var(--text);
        background: rgba(8, 189, 242, 0.08);
      }

      .status.success {
        color: var(--success-text);
        background: var(--success-bg);
      }

      .status.error {
        color: var(--error-text);
        background: var(--error-bg);
      }

      .login-shell {
        min-height: calc(100vh - 48px);
        display: grid;
        place-items: center;
      }

      .login-card {
        width: min(420px, 100%);
        padding: 36px 30px;
        text-align: center;
      }

      .brand-logo {
        width: 76px;
        height: 76px;
        margin: 0 auto 18px;
        padding: 12px;
        border-radius: 24px;
        background: linear-gradient(180deg, #fff, #eefbff);
        box-shadow: inset 0 0 0 1px rgba(19, 25, 77, 0.08);
      }

      h1,
      h2,
      h3 {
        margin: 0;
        font-family: "Montserrat", sans-serif;
      }

      .login-card h1 {
        font-size: 2rem;
        margin-bottom: 8px;
      }

      .login-card p,
      .section-copy,
      .field-help,
      .meta {
        color: var(--muted);
      }

      .login-card p {
        margin: 0 0 22px;
        line-height: 1.6;
      }

      .editor-card {
        position: relative;
        padding: 24px;
      }

      .loading-overlay {
        position: absolute;
        inset: 0;
        z-index: 20;
        display: grid;
        place-items: center;
        padding: 24px;
        background: rgba(246, 251, 253, 0.72);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        border-radius: var(--radius-xl);
      }

      .loading-overlay-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        padding: 22px 26px;
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow);
      }

      .loading-overlay-message {
        margin: 0;
        font-weight: 600;
        color: var(--text);
      }

      .spinner {
        width: 34px;
        height: 34px;
        border-radius: 999px;
        border: 3px solid rgba(8, 189, 242, 0.18);
        border-top-color: var(--primary);
        animation: spin 0.85s linear infinite;
      }

      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }

      .editor-card.is-loading > :not(.loading-overlay) {
        pointer-events: none;
        user-select: none;
      }

      .editor-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 16px;
        margin-bottom: 20px;
      }

      .editor-header h2 {
        margin-bottom: 6px;
      }

      .section-copy,
      .field-help {
        margin: 0;
        line-height: 1.5;
      }

      .meta {
        text-align: right;
        font-size: 0.94rem;
        display: grid;
        gap: 6px;
      }

      .grid {
        display: grid;
        gap: 18px;
      }

      .section {
        padding: 20px;
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        background: linear-gradient(180deg, #ffffff, #fcfeff);
        min-width: 0;
      }

      .section h3 {
        margin-bottom: 6px;
        font-size: 1.06rem;
      }

      .fields {
        display: grid;
        gap: 14px;
        margin-top: 16px;
      }

      .fields.two-col {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .field {
        padding: 16px;
        border-radius: var(--radius-md);
        background: var(--surface-soft);
        border: 1px solid rgba(19, 25, 77, 0.06);
      }

      .field label {
        display: grid;
        gap: 8px;
        font-weight: 600;
        font-size: 0.93rem;
      }

      .field-title {
        margin-bottom: 6px;
      }

      .field-help {
        margin-bottom: 12px;
        font-size: 0.92rem;
      }

      .timestamp {
        margin-top: 10px;
        font-size: 0.86rem;
        color: var(--muted);
      }

      .toggle {
        display: flex;
        justify-content: space-between;
        gap: 14px;
        align-items: center;
      }

      .toggle input[type="checkbox"] {
        width: 22px;
        height: 22px;
        accent-color: var(--primary);
      }

      input,
      textarea,
      select {
        width: 100%;
        padding: 12px 14px;
        color: var(--text);
        background: #fff;
        border: 1px solid rgba(19, 25, 77, 0.12);
        border-radius: 12px;
        outline: none;
        transition: border-color 0.18s ease, box-shadow 0.18s ease;
      }

      input:focus,
      textarea:focus,
      select:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 4px rgba(8, 189, 242, 0.12);
      }

      textarea {
        min-height: 120px;
        resize: vertical;
        line-height: 1.55;
      }

      .editor-toolbar {
        display: grid;
        gap: 14px;
        margin-bottom: 20px;
      }

      .toolbar-controls {
        display: grid;
        gap: 14px;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      }

      .mode-switcher {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: flex-end;
      }

      .nav-group {
        display: flex;
        flex-direction: column;
        gap: 6px;
      }

      .nav-group-label {
        font-size: 0.68rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--muted);
        padding: 0 4px;
      }

      .nav-group-buttons {
        display: flex;
        gap: 6px;
      }

      .nav-group + .nav-group {
        padding-left: 14px;
        border-left: 1px solid var(--border);
        margin-left: 4px;
      }

      .mode-switcher button {
        color: var(--text);
        background: rgba(19, 25, 77, 0.06);
      }

      .mode-switcher button.is-active {
        color: #fff;
        background: linear-gradient(135deg, var(--primary), var(--primary-strong));
      }

      .analytics-grid {
        display: grid;
        gap: 14px;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      }

      .analytics-stat {
        padding: 18px;
        border-radius: var(--radius-md);
        background: var(--surface-soft);
        border: 1px solid rgba(19, 25, 77, 0.06);
      }

      .analytics-stat strong {
        display: block;
        font-size: 1.8rem;
        margin-top: 8px;
      }

      .all-doctors-modal-card {
        width: min(1100px, 100%);
        max-height: min(92vh, 900px);
      }

      .all-doctors-toolbar {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        align-items: center;
        margin-bottom: 16px;
      }

      .all-doctors-toolbar input[type="text"] {
        flex: 1 1 240px;
        min-width: 220px;
      }

      .all-doctors-toolbar select {
        flex: 0 0 auto;
      }

      .all-doctors-summary {
        margin-left: auto;
        white-space: nowrap;
      }

      .chart-shell,
      .table-shell,
      .boxplot-grid {
        margin-top: 16px;
      }

      .chart-shell {
        min-height: 280px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
      }

      .chart-empty {
        min-height: 220px;
        display: grid;
        place-items: center;
        color: var(--muted);
        border: 1px dashed var(--border);
        border-radius: var(--radius-md);
        background: rgba(8, 189, 242, 0.04);
      }

      .chart-legend {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 12px;
        max-width: 100%;
      }

      .legend-item {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--muted);
        font-size: 0.92rem;
        min-width: 0;
      }

      .legend-swatch {
        width: 10px;
        height: 10px;
        border-radius: 999px;
      }

      .chart-shell svg {
        display: block;
        max-width: 100%;
      }

      .funnel-summary {
        display: flex;
        align-items: baseline;
        gap: 12px;
        flex-wrap: wrap;
        margin-bottom: 16px;
      }

      .funnel-summary strong {
        font-size: 1.8rem;
      }

      .funnel-conversion {
        margin-left: auto;
        color: var(--muted);
        font-size: 0.92rem;
      }

      .funnel-chart {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      .funnel-row {
        display: grid;
        grid-template-columns: minmax(180px, 260px) 1fr auto;
        align-items: center;
        gap: 16px;
        padding: 12px 16px;
        border-radius: var(--radius-md);
        background: var(--surface-soft);
        border: 1px solid rgba(19, 25, 77, 0.06);
      }

      .funnel-row-complete {
        background: rgba(34, 197, 94, 0.08);
        border-color: rgba(34, 197, 94, 0.2);
      }

      .funnel-stage {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
      }

      .funnel-stage-label {
        font-weight: 600;
        font-size: 0.95rem;
      }

      .funnel-bar-wrap {
        height: 24px;
        background: rgba(19, 25, 77, 0.04);
        border-radius: 999px;
        overflow: hidden;
        min-width: 80px;
      }

      .funnel-bar {
        height: 100%;
        border-radius: 999px;
        background: linear-gradient(90deg, rgba(8, 189, 242, 0.5), rgba(8, 189, 242, 0.3));
        transition: width 0.3s ease;
        min-width: 4px;
      }

      .funnel-bar-complete {
        background: linear-gradient(90deg, rgba(34, 197, 94, 0.6), rgba(34, 197, 94, 0.4));
      }

      .funnel-numbers {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 2px;
        white-space: nowrap;
      }

      .funnel-pct {
        color: var(--muted);
        font-size: 0.8rem;
      }

      .funnel-drop {
        color: rgba(239, 68, 68, 0.7);
        font-size: 0.78rem;
      }

      @media (max-width: 720px) {
        .funnel-row {
          grid-template-columns: 1fr;
          gap: 8px;
        }

        .funnel-bar-wrap {
          order: 3;
        }

        .funnel-numbers {
          order: 2;
          flex-direction: row;
          align-items: center;
          gap: 8px;
        }
      }

      .chart-point {
        cursor: default;
      }

      .table-shell {
        overflow-x: auto;
      }

      .table-action-button {
        padding: 8px 12px;
        white-space: nowrap;
      }

      table {
        width: 100%;
        border-collapse: collapse;
      }

      th,
      td {
        padding: 12px 10px;
        text-align: left;
        border-bottom: 1px solid rgba(19, 25, 77, 0.08);
        vertical-align: top;
      }

      th {
        font-size: 0.86rem;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.04em;
      }

      .boxplot-grid {
        display: grid;
        gap: 14px;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      }

      .boxplot-card {
        padding: 16px;
        border-radius: var(--radius-md);
        background: var(--surface-soft);
        border: 1px solid rgba(19, 25, 77, 0.06);
      }

      .boxplot-title {
        font-weight: 700;
        margin-bottom: 12px;
      }

      .boxplot-meta {
        margin-top: 12px;
        color: var(--muted);
        font-size: 0.9rem;
        display: grid;
        gap: 4px;
      }

      .insight-card {
        padding: 18px;
        border-radius: var(--radius-md);
        background: var(--surface-soft);
        border: 1px solid rgba(19, 25, 77, 0.06);
      }

      .insight-meta {
        margin-bottom: 12px;
        color: var(--muted);
        font-size: 0.9rem;
      }

      .insight-content {
        white-space: pre-wrap;
        line-height: 1.6;
      }

      .actions {
        display: flex;
        justify-content: flex-end;
        gap: 12px;
        margin-top: 20px;
      }

      button {
        border: 0;
        border-radius: 12px;
        padding: 12px 18px;
        cursor: pointer;
        font-weight: 600;
        transition: transform 0.18s ease, opacity 0.18s ease;
      }

      button:hover:not(:disabled) {
        transform: translateY(-1px);
      }

      button:disabled {
        opacity: 0.76;
        cursor: wait;
      }

      .primary {
        color: #fff;
        background: linear-gradient(135deg, var(--primary), var(--primary-strong));
      }

      .secondary {
        color: var(--text);
        background: rgba(19, 25, 77, 0.06);
      }

      .danger {
        color: #a63b34;
        background: rgba(176, 55, 47, 0.1);
      }

      .modal-backdrop {
        position: fixed;
        inset: 0;
        z-index: 30;
        display: grid;
        place-items: center;
        padding: 24px;
        background: rgba(19, 25, 77, 0.45);
      }

      .modal-card {
        width: min(640px, 100%);
        max-height: min(88vh, 760px);
        overflow: auto;
        padding: 24px;
        border-radius: var(--radius-xl);
        background: rgba(255, 255, 255, 0.98);
        border: 1px solid var(--border);
        box-shadow: var(--shadow);
      }

      .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 16px;
        margin-bottom: 18px;
      }

      .modal-close {
        padding: 10px 14px;
        flex-shrink: 0;
      }

      .analytics-detail-grid {
        display: grid;
        gap: 14px;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      }

      .analytics-detail-item {
        padding: 16px;
        border-radius: var(--radius-md);
        background: var(--surface-soft);
        border: 1px solid rgba(19, 25, 77, 0.06);
      }

      .analytics-detail-item strong,
      .analytics-detail-item a {
        display: block;
        margin-top: 8px;
        color: var(--text);
        text-decoration: none;
        word-break: break-word;
      }

      .modal-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 12px;
        margin-top: 20px;
      }

      .modal-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        padding: 12px 18px;
        font-weight: 600;
        text-decoration: none;
      }

      @media (max-width: 760px) {
        .page {
          width: min(100% - 16px, 100%);
          margin: 16px auto 24px;
        }

        .editor-card,
        .login-card {
          padding: 22px 18px;
        }

        .editor-header,
        .actions {
          flex-direction: column;
          align-items: stretch;
        }

        .modal-backdrop {
          padding: 16px;
        }

        .modal-card {
          padding: 20px;
        }

        .toolbar-controls {
          grid-template-columns: 1fr;
        }

        .meta {
          text-align: left;
        }

        .fields.two-col {
          grid-template-columns: 1fr;
        }
      }