* {
        box-sizing: border-box;
        font-family: system-ui, sans-serif;
      }

      body {
        margin: 0;
        padding: 20px;
        background: #f5f5f5;
      }

      .panel {
        background: #fff;
        padding: 16px;
        margin-bottom: 16px;
        border-radius: 8px;
      }

      .app-header {
        display: flex;
        align-items: stretch;
        justify-content: space-between;
        gap: 20px;
        padding: 20px 24px;
        border: 1px solid #dbe7f5;
        background: linear-gradient(135deg, #f7fbff 0%, #ffffff 58%, #f1f7ff 100%);
        box-shadow: 0 10px 24px rgba(46, 102, 170, 0.08);
      }

      .app-header-main {
        flex: 1 1 520px;
        min-width: 280px;
      }

      .app-eyebrow {
        display: inline-flex;
        align-items: center;
        padding: 4px 10px;
        border-radius: 999px;
        background: #e9f3ff;
        color: #255f9c;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.04em;
      }

      .app-title {
        margin: 12px 0 0;
        font-size: 28px;
        line-height: 1.2;
        color: #16202a;
      }

      .app-subtitle {
        margin-top: 10px;
        max-width: 760px;
        color: #566474;
        line-height: 1.6;
      }

      .app-feature-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 16px;
      }

      .app-feature-pill {
        display: inline-flex;
        align-items: center;
        padding: 6px 10px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.92);
        border: 1px solid #d7e4f3;
        color: #415161;
        font-size: 12px;
      }

      .app-header-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 12px;
        flex-wrap: wrap;
      }

      .user-summary-card {
        min-width: 260px;
        padding: 14px 16px;
        border-radius: 12px;
        border: 1px solid #d7e4f3;
        background: rgba(255, 255, 255, 0.94);
      }

      .user-summary-label {
        color: #728294;
        font-size: 12px;
        letter-spacing: 0.06em;
      }

      .user-summary-name {
        margin-top: 6px;
        font-size: 18px;
        font-weight: 600;
        color: #18222d;
      }

      .user-summary-meta {
        margin-top: 8px;
        color: #5b6875;
        font-size: 13px;
        line-height: 1.5;
      }

      .user-role-badge {
        margin-top: 10px;
      }

      .app-logout-button {
        margin: 0;
        white-space: nowrap;
      }

      .auth-shell {
        max-width: 1080px;
        margin: 32px auto;
        padding: 0;
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(340px, 420px);
        overflow: hidden;
        border: 1px solid #dbe7f5;
        background: #fff;
        box-shadow: 0 18px 40px rgba(40, 83, 136, 0.12);
      }

      .auth-hero {
        padding: 42px 40px 36px;
        background: linear-gradient(135deg, #eef6ff 0%, #f8fbff 50%, #edf5ff 100%);
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      .auth-hero-title {
        margin: 14px 0 0;
        font-size: 34px;
        line-height: 1.2;
        color: #16202a;
      }

      .auth-hero-subtitle {
        margin-top: 14px;
        color: #566474;
        line-height: 1.7;
      }

      .auth-hero-highlight {
        margin-top: 18px;
        padding: 16px 18px;
        border-radius: 14px;
        border: 1px solid #d8e4f2;
        background: rgba(255, 255, 255, 0.88);
        color: #3f4f60;
        line-height: 1.6;
      }

      .auth-hero-pills {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 18px;
      }

      .auth-card {
        padding: 34px 32px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background: #fff;
      }

      .auth-card-title {
        margin: 0;
        font-size: 24px;
        color: #18222d;
      }

      .auth-card-subtitle {
        margin-top: 8px;
        color: #637181;
        line-height: 1.6;
      }

      .auth-form-grid {
        display: grid;
        gap: 12px;
        margin-top: 22px;
      }

      .auth-form-grid input {
        width: 100%;
        min-height: 44px;
        margin: 0;
        padding: 10px 12px;
        border: 1px solid #d5dfeb;
        background: #fbfdff;
      }

      .auth-form-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 18px;
      }

      .auth-form-actions button {
        margin: 0;
        min-width: 120px;
      }

      .auth-switch-text {
        margin-top: 16px;
        color: #6c7a89;
        font-size: 13px;
        line-height: 1.6;
      }

      .status-message {
        margin-top: 14px;
        min-height: 20px;
        font-size: 13px;
      }

      .status-message.success {
        color: #1d7a45;
      }

      .status-message.error {
        color: #c0392b;
      }

      input,
      select,
      button {
        padding: 8px;
        margin: 4px;
        border: 1px solid #ccc;
        border-radius: 4px;
      }

      button {
        background: #4a90d9;
        color: #fff;
        cursor: pointer;
        border: none;
      }

      button:hover {
        background: #357abd;
      }

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

      th,
      td {
        padding: 8px;
        text-align: left;
        border-bottom: 1px solid #eee;
      }

      tr:hover {
        background: #f9f9f9;
        cursor: pointer;
      }

      .hidden {
        display: none;
      }

      .error {
        color: red;
      }

      .detail-row {
        display: flex;
        gap: 8px;
        margin: 4px 0;
      }

      .detail-label {
        font-weight: bold;
        min-width: 100px;
      }

      #results-table th,
      #results-table td {
        font-size: 14px;
      }

      .autocomplete {
        position: relative;
      }

      .autocomplete-list {
        position: absolute;
        top: 100%;
        left: 4px;
        background: #fff;
        border: 1px solid #ccc;
        max-height: 150px;
        overflow-y: auto;
        z-index: 10;
      }

      .autocomplete-list div {
        padding: 6px 10px;
        cursor: pointer;
      }

      .autocomplete-list div:hover {
        background: #e3f2fd;
      }

      .pagination {
        margin-top: 12px;
      }

      .pagination button {
        margin: 0 2px;
      }

      .modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 100;
      }

      .modal.show {
        display: flex;
      }

      .modal-content {
        background: #fff;
        padding: 20px;
        border-radius: 8px;
        max-width: 800px;
        max-height: 80vh;
        overflow-y: auto;
        position: relative;
        min-width: 400px;
      }

      .modal-close {
        position: absolute;
        top: 10px;
        right: 14px;
        font-size: 20px;
        cursor: pointer;
        color: #666;
      }

      .modal-close:hover {
        color: #000;
      }

      .result-link {
        color: #4a90d9;
        text-decoration: underline;
        cursor: pointer;
      }

      .result-link:hover {
        color: #357abd;
      }

      .ai-search-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
      }

      .ai-search-row input {
        flex: 1 1 420px;
        min-width: 280px;
      }

      .ai-card {
        margin-top: 12px;
        padding: 12px;
        border: 1px solid #d7e7fb;
        border-radius: 8px;
        background: #f8fbff;
      }

      .ai-muted {
        color: #666;
        font-size: 13px;
      }

      .ai-chip {
        display: inline-block;
        margin: 4px 6px 0 0;
        padding: 4px 10px;
        border-radius: 999px;
        background: #e8f2ff;
        color: #245a9a;
        font-size: 13px;
      }

      .ai-candidate-group {
        margin-top: 10px;
      }

      .ai-candidate-actions {
        margin-top: 6px;
      }

      .ai-candidate-actions button {
        background: #f3f5f7;
        color: #333;
        border: 1px solid #ccd4dd;
      }

      .ai-candidate-actions button.selected {
        background: #4a90d9;
        color: #fff;
        border-color: #4a90d9;
      }

      .section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
      }

      .section-header h3 {
        margin: 0;
      }

      .section-subtitle {
        margin-top: 6px;
      }

      .secondary-button {
        background: #eef2f6;
        color: #2f3a45;
        border: 1px solid #ccd4dd;
      }

      .secondary-button:hover {
        background: #dde5ed;
      }

      .custom-search-panel {
        margin-top: 12px;
      }

      .research-grid {
        display: grid;
        grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
        gap: 16px;
        margin-top: 12px;
      }

      .research-project-list {
        display: grid;
        gap: 8px;
        max-height: 360px;
        overflow: auto;
      }

      .research-project-item {
        width: 100%;
        padding: 10px 12px;
        text-align: left;
        background: #f7f9fb;
        color: #26313d;
        border: 1px solid #d8e0ea;
        border-radius: 8px;
        cursor: pointer;
      }

      .research-project-item.active {
        background: #e7f1fc;
        border-color: #76a9dc;
      }

      .research-form-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(160px, 1fr));
        gap: 10px;
        margin: 12px 0;
      }

      .research-form-grid label {
        display: grid;
        gap: 6px;
        color: #5b6875;
        font-size: 13px;
      }

      .research-form-grid input,
      .research-form-grid textarea {
        width: 100%;
        min-height: 40px;
        margin: 0;
      }

      .research-form-grid textarea {
        min-height: 68px;
        resize: vertical;
      }

      .research-metrics {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 10px 0;
      }

      .research-metric {
        padding: 8px 10px;
        border: 1px solid #d8e0ea;
        border-radius: 8px;
        background: #f7f9fb;
        color: #344150;
        font-size: 13px;
      }

      .research-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 10px 0;
      }

      .research-table-wrap {
        overflow: auto;
        margin-top: 10px;
      }

      .empty-state {
        text-align: center;
        color: #666;
        padding: 24px 12px;
      }

      @media (max-width: 900px) {
        .auth-shell {
          grid-template-columns: 1fr;
        }

        .auth-hero,
        .auth-card {
          padding: 24px 20px;
        }

        .app-header {
          padding: 18px;
        }

        .app-header-actions {
          width: 100%;
          justify-content: space-between;
        }

        .user-summary-card {
          flex: 1 1 260px;
        }

        .research-grid,
        .research-form-grid {
          grid-template-columns: 1fr;
        }
      }

      .workspace-tabs,
      .research-tabs {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0 0 14px;
        border-bottom: 1px solid #dbe4ee;
      }

      .workspace-tab,
      .research-tab {
        margin: 0;
        padding: 10px 14px;
        border: 0;
        border-bottom: 2px solid transparent;
        border-radius: 0;
        background: transparent;
        color: #536273;
        font-weight: 600;
      }

      .workspace-tab.active,
      .research-tab.active {
        color: #1f5f99;
        border-bottom-color: #1f78c8;
        background: #f3f8fd;
      }

      .workspace-panel.hidden,
      .research-tab-panel {
        display: none;
      }

      .workspace-inactive {
        display: none !important;
      }

      .research-tab-panel.active {
        display: block;
      }

      .workspace-panel[data-workspace="research"] > .research-grid {
        grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
        align-items: start;
      }

      .workspace-panel[data-workspace="research"] > .research-grid > div:first-child {
        position: sticky;
        top: 12px;
        align-self: start;
      }

      .research-tab-panel > h4:first-child {
        margin-top: 4px;
      }

      .research-table-wrap {
        max-width: 100%;
        overflow: auto;
      }

      .research-table-wrap table {
        min-width: 860px;
      }

      .research-table-wrap th {
        position: sticky;
        top: 0;
        background: #f8fafc;
        z-index: 1;
      }

      .research-review-drawer {
        margin-top: 16px;
        padding: 16px;
        border: 1px solid #d7e4f3;
        border-radius: 8px;
        background: #fbfdff;
      }

      @media (max-width: 980px) {
        .workspace-panel[data-workspace="research"] > .research-grid {
          grid-template-columns: 1fr;
        }

        .workspace-panel[data-workspace="research"] > .research-grid > div:first-child {
          position: static;
        }

        .workspace-tabs,
        .research-tabs {
          overflow-x: auto;
          white-space: nowrap;
        }
      }