/* ==========================================================================
   AYUSH.OS — PORTFOLIO APPLICATIONS SUITE (RETRO OS THEME)
   Strictly aligned with localhost:3000 & the authentic OS design system:
   - Primary Parchment / Paper Canvas: var(--paper, #fff8dc) / var(--sand, #fff8dc)
   - Secondary Cream Surface: var(--paper-2, #f4e8bb) / var(--cream, #f4e8bb)
   - Deep Ink Borders & Typography: var(--ink, #17131b)
   - Signature Wine Accents: var(--wine, #7b1635)
   - Retro Pastel Palette:
       * Lime: var(--lime, #c7f36b)
       * Yellow / Gold: var(--yellow, #ffd95a)
       * Sky Blue: var(--blue, #a8d7e8) / var(--sky, #d8f0f2)
       * Coral Pink: var(--pink, #f7a9bd) / #f5a39c
       * Lavender Violet: var(--violet, #8d78d8) / #b8a7e8
       * Muted Ink: var(--muted, #6f6870) / #453e47
   - Hard Pixel Drop Shadows: 2px / 3px / 4px / 6px solid #17131b
   - Typography Hierarchy: Silkscreen Pixel Headers, Instrument Serif Titles, DM Mono Body
   ========================================================================== */

:root {
  --ink: #17131b;
  --paper: #fff8dc;
  --paper-2: #f4e8bb;
  --sand: #fff8dc;
  --cream: #f4e8bb;
  --pink: #f7a9bd;
  --rose: #d74e73;
  --wine: #7b1635;
  --blue: #a8d7e8;
  --sky: #d8f0f2;
  --lime: #c7f36b;
  --yellow: #ffd95a;
  --violet: #8d78d8;
  --muted: #6f6870;
  --shadow: 8px 8px 0 rgba(23, 19, 27, .22);
  --pixel: "Silkscreen", "Courier New", monospace;
  --serif: "Instrument Serif", Georgia, serif;
  --mono: "DM Mono", "SFMono-Regular", Consolas, monospace;
}

/* -------------------------------------------------------------
   Common App Typography & Editorial Headers (Matching localhost:3000)
   ------------------------------------------------------------- */
.app-content {
  padding: 24px;
  background: var(--paper, #fff8dc);
  color: var(--ink, #17131b);
  overflow-y: auto;
  box-sizing: border-box;
  height: 100%;
}

.app-kicker {
  display: inline-block;
  padding: 5px 8px;
  background: var(--ink, #17131b);
  color: var(--paper, #fff8dc);
  box-shadow: 4px 4px 0 var(--lime, #c7f36b);
  font: 8px/1 var(--pixel, monospace);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.app-heading {
  margin: 14px 0 8px;
  font: clamp(34px, 5vw, 56px)/0.9 var(--serif, Georgia, serif);
  font-weight: 400;
  letter-spacing: -0.035em;
  color: var(--ink, #17131b);
}

.app-heading em {
  color: var(--wine, #7b1635);
  font-style: italic;
}

.app-deck {
  max-width: 680px;
  margin: 0 0 20px;
  color: #453e47;
  font-size: 13px;
  line-height: 1.6;
  font-family: var(--mono, monospace);
}

/* -------------------------------------------------------------
   1. Shared Evidence & Document Viewer Modal
   ------------------------------------------------------------- */
.evidence-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.evidence-modal[hidden] {
  display: none !important;
}
.evidence-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(23, 19, 27, 0.65);
  backdrop-filter: blur(5px);
}
.evidence-modal-window {
  position: relative;
  z-index: 2;
  width: min(860px, 94vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: var(--paper, #fff8dc);
  border: 3px solid var(--ink, #17131b);
  box-shadow: 8px 8px 0 var(--ink, #17131b);
  border-radius: 0;
  overflow: hidden;
  color: var(--ink, #17131b);
  font-family: var(--mono, monospace);
}
.evidence-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--paper-2, #f4e8bb);
  border-bottom: 2px solid var(--ink, #17131b);
}
.evidence-header-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
}
.evidence-header-title strong {
  font: 11px/1 var(--pixel, monospace);
  font-weight: 700;
  color: var(--ink, #17131b);
  letter-spacing: 0.5px;
}
.evidence-header-title small {
  font-size: 11px;
  color: var(--wine, #7b1635);
  font-weight: 700;
}
.evidence-close-btn {
  background: #f06c68;
  border: 2px solid var(--ink, #17131b);
  color: var(--ink, #17131b);
  width: 26px;
  height: 26px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 13px;
  transition: transform 0.1s ease;
}
.evidence-close-btn:hover {
  transform: scale(1.1);
  background: #d74e73;
}
.evidence-modal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 16px;
  background: var(--paper, #fff8dc);
  border-bottom: 2px dashed var(--ink, #17131b);
}
.evidence-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: #fff;
  border: 1.5px solid var(--ink, #17131b);
  font-family: var(--mono, monospace);
  font-size: 0.75rem;
}
.evidence-meta-pill span {
  color: var(--muted, #6f6870);
  text-transform: uppercase;
  font: 8px/1 var(--pixel, monospace);
  letter-spacing: 0.5px;
}
.evidence-meta-pill strong {
  color: var(--ink, #17131b);
  font-weight: 700;
}
.evidence-meta-pill.highlight code {
  color: var(--wine, #7b1635);
  font-weight: bold;
}
.evidence-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background: var(--paper-2, #f4e8bb);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
}
.evidence-img-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.evidence-pdf-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}
.evidence-pdf-frame {
  width: 100%;
  height: 520px;
  max-height: 65vh;
  border: 2px solid var(--ink, #17131b);
  box-shadow: 4px 4px 0 var(--ink, #17131b);
  background: #fff;
}
.evidence-doc-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  width: 100%;
}
.evidence-btn {
  background: var(--paper, #fff8dc);
  border: 2px solid var(--ink, #17131b);
  color: var(--ink, #17131b);
  padding: 4px 10px;
  font: 9px/1 var(--pixel, monospace);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 2px 2px 0 var(--ink, #17131b);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: transform 0.1s ease, background 0.1s ease;
}
.evidence-btn:hover {
  background: var(--lime, #c7f36b);
  transform: translate(-1px, -1px);
}
.evidence-img {
  max-width: 100%;
  max-height: 60vh;
  object-fit: contain;
  border: 2px solid var(--ink, #17131b);
  box-shadow: 4px 4px 0 var(--ink, #17131b);
  background: #fff;
}
.evidence-fallback {
  text-align: center;
  padding: 32px 24px;
  background: #fff;
  border: 2px dashed var(--ink, #17131b);
  max-width: 520px;
  box-shadow: 4px 4px 0 var(--ink, #17131b);
}
.evidence-fallback-icon {
  font-size: 2.8rem;
  margin-bottom: 12px;
}
.evidence-fallback h4 {
  font: 12px/1.3 var(--pixel, monospace);
  color: var(--ink, #17131b);
  margin-bottom: 8px;
}
.evidence-fallback p {
  font-size: 12px;
  color: #453e47;
  line-height: 1.5;
  margin-bottom: 12px;
}
.evidence-fallback code {
  background: var(--paper-2, #f4e8bb);
  border: 1px solid var(--ink, #17131b);
  padding: 3px 8px;
  font-size: 11px;
  color: var(--wine, #7b1635);
  font-weight: bold;
}
.evidence-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--paper-2, #f4e8bb);
  border-top: 2px solid var(--ink, #17131b);
}
.evidence-security-tag {
  font: 9px/1.2 var(--pixel, monospace);
  color: #166534;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.evidence-done-btn {
  background: var(--wine, #7b1635);
  border: 2px solid var(--ink, #17131b);
  color: var(--paper, #fff8dc);
  padding: 6px 16px;
  cursor: pointer;
  font: 10px/1 var(--pixel, monospace);
  font-weight: 700;
  box-shadow: 2px 2px 0 var(--ink, #17131b);
  transition: transform 0.1s ease;
}
.evidence-done-btn:hover {
  transform: translate(-1px, -1px);
  background: var(--ink, #17131b);
}

/* -------------------------------------------------------------
   2. Achievements & Results App Styles
   ------------------------------------------------------------- */
.achievements-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background: var(--paper, #fff8dc);
  color: var(--ink, #17131b);
  font-family: var(--mono, monospace);
}
.achievements-toolbar {
  padding: 10px 16px;
  background: var(--paper-2, #f4e8bb);
  border-bottom: 2px solid var(--ink, #17131b);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.achievements-stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ach-stat-chip {
  background: #fff;
  border: 2px solid var(--ink, #17131b);
  padding: 5px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  box-shadow: 2px 2px 0 var(--ink, #17131b);
}
.ach-stat-chip strong {
  color: var(--wine, #7b1635);
  font-size: 13px;
  font-weight: 800;
}
.ach-stat-chip span {
  color: var(--muted, #6f6870);
  font: 8px/1 var(--pixel, monospace);
  text-transform: uppercase;
}
.achievements-filter-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.ach-tab-btn {
  background: #fff;
  border: 1.5px solid var(--ink, #17131b);
  color: var(--ink, #17131b);
  padding: 5px 12px;
  cursor: pointer;
  font: 10px/1.2 var(--mono, monospace);
  font-weight: 600;
  transition: all 0.12s ease;
}
.ach-tab-btn.is-active, .ach-tab-btn:hover {
  background: var(--wine, #7b1635);
  color: var(--paper, #fff8dc);
  border-color: var(--ink, #17131b);
  box-shadow: 2px 2px 0 var(--ink, #17131b);
}
.achievements-scroll-area {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background: var(--paper, #fff8dc);
}
.achievements-section {
  margin-bottom: 28px;
}
.ach-section-header {
  margin-bottom: 12px;
}
.ach-section-badge {
  font: 9px/1.2 var(--pixel, monospace);
  font-weight: 700;
  color: var(--wine, #7b1635);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.ach-section-header h3 {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink, #17131b);
  margin-top: 4px;
}
.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.ach-card {
  background: #fff;
  border: 2px solid var(--ink, #17131b);
  box-shadow: 4px 4px 0 var(--ink, #17131b);
  padding: 16px;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ach-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--wine, #7b1635);
}
.ach-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.ach-rank-tag {
  font: 9px/1.2 var(--pixel, monospace);
  font-weight: 700;
  padding: 4px 8px;
  border: 1.5px solid var(--ink, #17131b);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.ach-rank-tag.gold {
  background: var(--yellow, #ffd95a);
  color: var(--ink, #17131b);
}
.ach-rank-tag.silver {
  background: var(--blue, #a8d7e8);
  color: var(--ink, #17131b);
}
.ach-rank-tag.bronze {
  background: var(--pink, #f7a9bd);
  color: var(--ink, #17131b);
}
.ach-status-pill {
  font: 9px/1.2 var(--pixel, monospace);
  font-weight: 700;
  color: #166534;
  background: #dcfce7;
  border: 1px solid #166534;
  padding: 3px 8px;
}
.ach-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink, #17131b);
  margin-bottom: 4px;
}
.ach-organizer {
  font-size: 11px;
  font-weight: 600;
  color: var(--wine, #7b1635);
  margin-bottom: 10px;
  font-family: var(--mono, monospace);
}
.ach-desc {
  font-size: 12px;
  color: #453e47;
  line-height: 1.5;
  margin-bottom: 12px;
  flex: 1;
}
.ach-metrics-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.ach-metric {
  background: var(--paper-2, #f4e8bb);
  padding: 6px 10px;
  border: 1.5px dashed var(--ink, #17131b);
  flex: 1;
  min-width: 90px;
}
.ach-m-label {
  display: block;
  font: 8px/1 var(--pixel, monospace);
  color: var(--muted, #6f6870);
  text-transform: uppercase;
}
.ach-m-value {
  font-size: 13px;
  color: var(--ink, #17131b);
  font-weight: 800;
  margin-top: 3px;
}
.ach-inspect-btn {
  width: 100%;
  background: var(--wine, #7b1635);
  border: 2px solid var(--ink, #17131b);
  color: var(--paper, #fff8dc);
  padding: 8px 14px;
  cursor: pointer;
  font: 10px/1.2 var(--pixel, monospace);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 2px 2px 0 var(--ink, #17131b);
  transition: all 0.12s ease;
}
.ach-inspect-btn:hover {
  background: var(--ink, #17131b);
  color: var(--paper, #fff8dc);
  transform: translate(-1px, -1px);
}

/* -------------------------------------------------------------
   3. Tech Stack & Systems App Styles
   ------------------------------------------------------------- */
.techstack-container {
  display: flex;
  flex-direction: column;
  background: var(--paper, #fff8dc);
  color: var(--ink, #17131b);
  font-family: var(--mono, monospace);
}
.techstack-header-bar {
  padding: 10px 16px;
  background: var(--paper-2, #f4e8bb);
  border: 2px solid var(--ink, #17131b);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.tech-radar-label {
  font: 8px/1 var(--pixel, monospace);
  color: var(--wine, #7b1635);
  font-weight: 700;
  text-transform: uppercase;
}
.techstack-view-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.tech-tab-btn {
  background: #fff;
  border: 2px solid var(--ink, #17131b);
  color: var(--ink, #17131b);
  padding: 6px 12px;
  cursor: pointer;
  font: 8px/1 var(--pixel, monospace);
  font-weight: 600;
  transition: all 0.12s ease;
}
.tech-tab-btn.is-active, .tech-tab-btn:hover {
  background: var(--wine, #7b1635);
  color: var(--paper, #fff8dc);
  border-color: var(--ink, #17131b);
  box-shadow: 2px 2px 0 var(--ink, #17131b);
}
.techstack-content-scroll {
  flex: 1;
}
.techstack-pipeline-box {
  background: #fff;
  border: 2px solid var(--ink, #17131b);
  box-shadow: 4px 4px 0 var(--ink, #17131b);
  padding: 16px;
  margin-bottom: 24px;
}
.pipeline-header {
  margin-bottom: 12px;
}
.pipeline-badge {
  font: 9px/1.2 var(--pixel, monospace);
  color: var(--wine, #7b1635);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.pipeline-header h4 {
  font: 13px/1.3 var(--pixel, monospace);
  font-weight: 800;
  color: var(--ink, #17131b);
  margin-top: 4px;
}
.systems-pipeline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 12px;
}
.pipeline-node {
  background: var(--paper-2, #f4e8bb);
  border: 2px solid var(--ink, #17131b);
  box-shadow: 2px 2px 0 var(--ink, #17131b);
  padding: 10px 14px;
  text-align: center;
  cursor: pointer;
  flex: 1;
  min-width: 120px;
  transition: all 0.15s ease;
}
.pipeline-node.is-active, .pipeline-node:hover {
  background: #fff;
  border-color: var(--wine, #7b1635);
  box-shadow: 4px 4px 0 var(--wine, #7b1635);
  transform: translate(-2px, -2px);
}
.node-icon {
  font-size: 1.4rem;
  display: block;
  margin-bottom: 4px;
}
.pipeline-node strong {
  display: block;
  font: 9px/1.2 var(--pixel, monospace);
  font-weight: 700;
  color: var(--ink, #17131b);
}
.pipeline-node small {
  display: block;
  font-size: 10px;
  color: #453e47;
  margin-top: 2px;
}
.pipeline-arrow {
  color: var(--ink, #17131b);
  font-weight: bold;
  font-size: 14px;
}
.pipeline-detail-panel {
  background: var(--paper-2, #f4e8bb);
  border: 1.5px dashed var(--ink, #17131b);
  padding: 12px;
  font-size: 12px;
  color: #453e47;
  line-height: 1.5;
}
.detail-tag {
  font: 8px/1 var(--pixel, monospace);
  color: var(--wine, #7b1635);
  font-weight: 700;
  display: block;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.techstack-tier-section {
  margin-bottom: 24px;
}
.tier-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 10px;
}
.tier-title-row h4 {
  font: 13px/1 var(--pixel, monospace);
  font-weight: 800;
  color: var(--ink, #17131b);
  margin: 0;
}
.tier-title-row small {
  font: 11px/1.4 var(--mono, monospace);
  color: var(--muted, #6f6870);
}
.tier-badge {
  font: 8px/1 var(--pixel, monospace);
  font-weight: 700;
  padding: 3px 8px;
  border: 1.5px solid var(--ink, #17131b);
}
.tier-badge.core {
  background: var(--lime, #c7f36b);
  color: var(--ink, #17131b);
}
.tier-badge.active {
  background: var(--blue, #a8d7e8);
  color: var(--ink, #17131b);
}
.tier-badge.exploring {
  background: var(--yellow, #ffd95a);
  color: var(--ink, #17131b);
}
.techstack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.tool-card {
  background: #fff;
  border: 2px solid var(--ink, #17131b);
  box-shadow: 3px 3px 0 var(--ink, #17131b);
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.tool-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--wine, #7b1635);
}
.tool-card-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.tool-name {
  font: 16px/1.2 var(--serif, Georgia, serif);
  font-weight: 700;
  color: var(--ink, #17131b);
}
.tool-category {
  font: 8px/1 var(--pixel, monospace);
  color: var(--wine, #7b1635);
  font-weight: 700;
  text-transform: uppercase;
}
.tool-desc {
  font: 11px/1.55 var(--mono, monospace);
  color: #453e47;
  margin: 6px 0 10px;
  flex: 1;
}
.tool-card-footer {
  margin-top: 4px;
}
.tool-verified-tag {
  font: 8px/1 var(--pixel, monospace);
  font-weight: 700;
  color: #166534;
  background: #dcfce7;
  border: 1px solid #166534;
  padding: 2px 6px;
  display: inline-block;
}

/* -------------------------------------------------------------
   4. Research & Publications App Styles
   ------------------------------------------------------------- */
.research-container {
  display: flex;
  flex-direction: column;
  background: var(--paper, #fff8dc);
  color: var(--ink, #17131b);
  font-family: var(--mono, monospace);
}
.research-header-banner {
  padding: 10px 16px;
  background: var(--paper-2, #f4e8bb);
  border: 2px solid var(--ink, #17131b);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}
.research-lab-badge {
  font: 9px/1.2 var(--pixel, monospace);
  color: var(--wine, #7b1635);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.research-status-legend {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.res-status-tag {
  font: 7px/1 var(--pixel, monospace);
  font-weight: 700;
  padding: 4px 6px;
  border: 1px solid var(--ink, #17131b);
  background: #fff;
}
.res-status-tag.wip { background: var(--blue, #a8d7e8); }
.res-status-tag.submitted { background: var(--yellow, #ffd95a); }
.res-status-tag.under-review { background: var(--pink, #f7a9bd); }
.res-status-tag.published { background: var(--lime, #c7f36b); }

.research-list-scroll {
  flex: 1;
}
.research-card {
  background: #fff;
  border: 2px solid var(--ink, #17131b);
  box-shadow: 4px 4px 0 var(--ink, #17131b);
  padding: 18px;
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.research-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--wine, #7b1635);
}
.res-card-header {
  margin-bottom: 12px;
}
.res-card-badges {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}
.res-status-pill {
  font: 8px/1 var(--pixel, monospace);
  font-weight: 700;
  padding: 3px 8px;
  border: 1px solid var(--ink, #17131b);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.res-status-pill.work_in_progress, .res-status-pill.wip {
  background: var(--blue, #a8d7e8);
  color: var(--ink, #17131b);
}
.res-status-pill.submitted, .res-status-pill.under_review {
  background: var(--yellow, #ffd95a);
  color: var(--ink, #17131b);
}
.res-status-pill.published {
  background: var(--lime, #c7f36b);
  color: var(--ink, #17131b);
}
.res-focus-tag {
  font: 8px/1 var(--pixel, monospace);
  color: var(--ink, #17131b);
  background: var(--paper-2, #f4e8bb);
  border: 1px solid var(--ink, #17131b);
  padding: 3px 6px;
  text-transform: uppercase;
}
.res-card-title {
  font: 22px/1.1 var(--serif, Georgia, serif);
  font-weight: 700;
  color: var(--ink, #17131b);
  line-height: 1.2;
  margin: 6px 0 12px;
}
.res-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.res-field-box {
  background: var(--paper-2, #f4e8bb);
  border: 1.5px solid var(--ink, #17131b);
  padding: 12px;
}
.res-field-label {
  font: 8px/1 var(--pixel, monospace);
  color: var(--wine, #7b1635);
  font-weight: 700;
  text-transform: uppercase;
  display: block;
  margin-bottom: 4px;
}
.res-field-text {
  font-size: 12px;
  color: #453e47;
  line-height: 1.55;
  margin: 0;
}
.res-metrics-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.res-metric-item {
  background: #fff;
  padding: 6px 12px;
  border: 1.5px dashed var(--ink, #17131b);
}
.res-metric-item small {
  display: block;
  font: 7px/1 var(--pixel, monospace);
  color: var(--muted, #6f6870);
}
.res-metric-item strong {
  font: 14px/1 var(--serif);
  color: var(--wine, #7b1635);
  font-weight: 700;
}
.res-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 2px dashed var(--ink, #17131b);
  padding-top: 12px;
  flex-wrap: wrap;
  gap: 8px;
}
.res-open-science-tag {
  font: 8px/1 var(--pixel, monospace);
  color: #166534;
  font-weight: 700;
}
.res-code-link {
  color: var(--paper, #fff8dc);
  background: var(--wine, #7b1635);
  text-decoration: none;
  font: 9px/1 var(--pixel, monospace);
  font-weight: 700;
  border: 2px solid var(--ink, #17131b);
  box-shadow: 2px 2px 0 var(--ink, #17131b);
  padding: 6px 12px;
  transition: transform .1s ease;
}
.res-code-link:hover {
  background: var(--ink, #17131b);
  transform: translate(-1px, -1px);
}

/* -------------------------------------------------------------
   5. Certifications & Learning App Styles
   ------------------------------------------------------------- */
.certifications-container {
  display: flex;
  flex-direction: column;
  background: var(--paper, #fff8dc);
  color: var(--ink, #17131b);
  font-family: var(--mono, monospace);
}
.cert-toolbar {
  padding: 10px 16px;
  background: var(--paper-2, #f4e8bb);
  border: 2px solid var(--ink, #17131b);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.cert-stats-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.cert-stat-chip {
  background: #fff;
  border: 2px solid var(--ink, #17131b);
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  box-shadow: 2px 2px 0 var(--ink, #17131b);
}
.cert-stat-chip strong {
  font: 14px/1 var(--serif, Georgia, serif);
  color: var(--wine, #7b1635);
  font-weight: 700;
}
.cert-stat-chip span {
  font: 8px/1 var(--pixel, monospace);
  color: var(--muted, #6f6870);
  text-transform: uppercase;
}
.cert-filters {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.cert-filter-btn {
  background: #fff;
  border: 1.5px solid var(--ink, #17131b);
  color: var(--ink, #17131b);
  padding: 6px 10px;
  cursor: pointer;
  font: 8px/1 var(--pixel, monospace);
  font-weight: 600;
  transition: all 0.12s ease;
}
.cert-filter-btn.is-active, .cert-filter-btn:hover {
  background: var(--wine, #7b1635);
  color: var(--paper, #fff8dc);
  border-color: var(--ink, #17131b);
  box-shadow: 2px 2px 0 var(--ink, #17131b);
}
.cert-scroll-area {
  flex: 1;
}
.cert-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.cert-card {
  background: #fff;
  border: 2px solid var(--ink, #17131b);
  box-shadow: 4px 4px 0 var(--ink, #17131b);
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cert-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--wine, #7b1635);
}
.cert-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.cert-type-pill {
  font: 8px/1 var(--pixel, monospace);
  background: var(--paper-2, #f4e8bb);
  border: 1.5px solid var(--ink, #17131b);
  padding: 3px 6px;
  color: var(--ink, #17131b);
  text-transform: uppercase;
}
.cert-status-badge {
  font: 8px/1 var(--pixel, monospace);
  font-weight: 700;
  color: #166534;
  background: #dcfce7;
  border: 1.5px solid #166534;
  padding: 3px 6px;
}
.cert-title {
  font: 18px/1.2 var(--serif, Georgia, serif);
  font-weight: 700;
  color: var(--ink, #17131b);
  margin: 6px 0 4px;
}
.cert-issuer {
  font: 11px/1 var(--mono, monospace);
  font-weight: 700;
  color: var(--wine, #7b1635);
  margin: 0 0 4px;
}
.cert-date {
  font: 10px/1 var(--mono, monospace);
  color: var(--muted, #6f6870);
  margin: 0 0 10px;
}
.cert-grade-tag {
  font: 8px/1 var(--pixel, monospace);
  background: var(--yellow, #ffd95a);
  border: 1.5px solid var(--ink, #17131b);
  padding: 4px 8px;
  display: inline-block;
  margin-bottom: 8px;
}
.cert-verif-box {
  background: var(--paper-2, #f4e8bb);
  border: 1.5px dashed var(--ink, #17131b);
  padding: 8px 10px;
  margin-bottom: 8px;
}
.cert-verif-box small {
  font: 7px/1 var(--pixel, monospace);
  color: var(--muted, #6f6870);
  display: block;
  margin-bottom: 2px;
}
.cert-verif-box code {
  font-size: 11px;
  color: var(--ink, #17131b);
  font-weight: 700;
  font-family: var(--mono, monospace);
}
.cert-skills-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0;
}
.cert-skill-pill {
  background: #fff;
  border: 1px solid var(--ink, #17131b);
  color: var(--ink, #17131b);
  padding: 3px 7px;
  font-size: 10px;
}
.cert-signatory {
  font: 11px/1.4 var(--mono, monospace);
  color: #453e47;
  font-style: italic;
  margin: 0 0 12px;
}
.cert-inspect-btn {
  width: 100%;
  background: var(--wine, #7b1635);
  border: 2px solid var(--ink, #17131b);
  color: var(--paper, #fff8dc);
  padding: 10px;
  cursor: pointer;
  font: 9px/1 var(--pixel, monospace);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 2px 2px 0 var(--ink, #17131b);
  transition: all 0.12s ease;
}
.cert-inspect-btn:hover {
  background: var(--ink, #17131b);
  color: var(--paper, #fff8dc);
  transform: translate(-1px, -1px);
}

/* -------------------------------------------------------------
   6. Journey & Story App Styles (Matching localhost:3000 chapters)
   ------------------------------------------------------------- */
.journey-container {
  display: flex;
  flex-direction: column;
  background: var(--paper, #fff8dc);
  color: var(--ink, #17131b);
  font-family: var(--mono, monospace);
}
.journey-scroll-area {
  flex: 1;
}
.journey-list {
  margin-top: 14px;
  display: grid;
  border-top: 2px solid var(--ink, #17131b);
  border-bottom: 2px solid var(--ink, #17131b);
}
.journey-entry {
  display: grid;
  grid-template-columns: 110px 1fr;
  border-top: 2px solid var(--ink, #17131b);
  background: linear-gradient(90deg, var(--milestone) 0 110px, transparent 110px);
}
.journey-entry:first-child {
  border-top: none;
}
.journey-entry time {
  padding: 22px 14px;
  font: 22px/1 var(--serif, Georgia, serif);
  color: var(--wine, #7b1635);
  font-weight: 700;
  text-align: center;
}
.journey-entry .journey-card {
  padding: 18px 20px;
  border-left: 2px solid var(--ink, #17131b);
  background: #fff;
  border-top: none;
  border-right: none;
  border-bottom: none;
  box-shadow: none;
}
.journey-entry:hover .journey-card {
  background: #fffdf5;
}
.journey-card-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.journey-phase-tag {
  font: 8px/1 var(--pixel, monospace);
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  background: var(--paper-2, #f4e8bb);
  border: 1px solid var(--ink, #17131b);
  color: var(--wine, #7b1635);
}
.journey-phase-tag.horizon {
  background: var(--yellow, #ffd95a);
  color: var(--ink, #17131b);
}
.journey-metric-pill {
  font: 8px/1 var(--pixel, monospace);
  font-weight: 700;
  padding: 3px 10px;
  background: var(--lime, #c7f36b);
  border: 1px solid var(--ink, #17131b);
  color: var(--ink, #17131b);
}
.journey-metric-pill.horizon {
  background: var(--yellow, #ffd95a);
  color: var(--ink, #17131b);
}
.journey-title {
  font: 18px/1.2 var(--serif, Georgia, serif);
  font-weight: 700;
  color: var(--ink, #17131b);
  margin: 4px 0 4px;
}
.journey-tagline {
  font: 11px/1 var(--mono, monospace);
  color: var(--wine, #7b1635);
  font-weight: 700;
  margin-bottom: 4px;
}
.journey-institution {
  font: 11px/1.3 var(--mono, monospace);
  color: #453e47;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
}
.journey-inst-icon {
  font-size: 0.9rem;
}
.journey-desc {
  font: 12px/1.55 var(--mono, monospace);
  color: #453e47;
  margin-bottom: 10px;
}
.journey-highlights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  margin: 10px 0;
  padding: 10px;
  background: var(--paper-2, #f4e8bb);
  border: 1.5px dashed var(--ink, #17131b);
}
.journey-highlight-chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.journey-hl-label {
  font: 8px/1 var(--pixel, monospace);
  color: var(--muted, #6f6870);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.journey-hl-val {
  font: 12px/1.2 var(--mono, monospace);
  color: var(--ink, #17131b);
  font-weight: 700;
}
.journey-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.journey-tag {
  font-size: 10px;
  padding: 2px 7px;
  background: #fff;
  border: 1px solid var(--ink, #17131b);
  color: var(--ink, #17131b);
  font-family: var(--mono, monospace);
}

/* -------------------------------------------------------------
   7. Contact & Collaborate App Styles (Matching localhost:3000)
   ------------------------------------------------------------- */
.contact-app-container {
  display: flex;
  flex-direction: column;
  background: var(--paper, #fff8dc);
  color: var(--ink, #17131b);
  font-family: var(--mono, monospace);
}
.contact-header-full {
  margin-bottom: 16px;
}
.contact-direct-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
@media (max-width: 768px) {
  .contact-direct-cards {
    grid-template-columns: 1fr;
  }
}
.contact-card-box {
  background: #fffdf4;
  border: 3px solid var(--ink, #17131b);
  box-shadow: 6px 6px 0 var(--ink, #17131b);
  display: flex;
  flex-direction: column;
  padding: 20px;
  gap: 16px;
}
.contact-card-box.phone-box {
  background: #fbf8eb;
}
.contact-card-box.email-box {
  background: #fdf5ea;
}
.contact-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px dashed var(--ink, #17131b);
  padding-bottom: 10px;
}
.contact-badge {
  font: 9px/1 var(--pixel, monospace);
  font-weight: 700;
  color: var(--wine, #7b1635);
  letter-spacing: 0.5px;
}
.contact-live-tag {
  font: 8px/1 var(--pixel, monospace);
  background: var(--lime, #c7f36b);
  color: var(--ink, #17131b);
  border: 1.5px solid var(--ink, #17131b);
  padding: 3px 6px;
  font-weight: 700;
}
.contact-card-body {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 0;
}
.contact-icon {
  font-size: 2.2rem;
  background: #fff;
  border: 2px solid var(--ink, #17131b);
  box-shadow: 3px 3px 0 var(--ink, #17131b);
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
}
.contact-details small {
  font: 8px/1 var(--pixel, monospace);
  color: var(--muted, #6f6870);
  letter-spacing: 0.5px;
}
.contact-big-value {
  font-family: var(--mono, monospace);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink, #17131b);
  letter-spacing: 0.5px;
  word-break: break-all;
}
.contact-big-value.email-text {
  font-size: 1.05rem;
}
.contact-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 2px dashed var(--ink, #17131b);
}
.contact-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  font: 9px/1 var(--pixel, monospace);
  font-weight: 700;
  text-decoration: none;
  color: var(--ink, #17131b);
  background: #fff;
  border: 2px solid var(--ink, #17131b);
  box-shadow: 3px 3px 0 var(--ink, #17131b);
  cursor: pointer;
  transition: transform 0.1s ease, background 0.1s ease;
}
.contact-action-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--ink, #17131b);
}
.contact-action-btn.call-action {
  background: var(--lime, #c7f36b);
}
.contact-action-btn.call-action:hover {
  background: #b5e855;
}
.contact-action-btn.whatsapp-action {
  background: #a3e635;
}
.contact-action-btn.email-action {
  background: var(--yellow, #ffd95a);
}
.contact-action-btn.copy-action {
  background: #fff;
}
.contact-action-btn.copy-action:hover {
  background: var(--paper-2, #f4e8bb);
}
.contact-meta-strip {
  background: var(--paper-2, #f4e8bb);
  border: 2px solid var(--ink, #17131b);
  box-shadow: 4px 4px 0 var(--ink, #17131b);
  padding: 14px 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
}
.meta-strip-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.meta-strip-item span {
  font: 8px/1 var(--pixel, monospace);
  color: var(--muted, #6f6870);
  letter-spacing: 0.5px;
}
.meta-strip-item strong {
  font-family: var(--mono, monospace);
  font-size: 11px;
  color: var(--ink, #17131b);
}
.contact-two-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 768px) {
  .contact-two-columns {
    grid-template-columns: 1fr;
  }
}
.contact-left-col {
  display: flex;
  flex-direction: column;
}
.contact-links {
  display: grid;
  gap: 10px;
  align-content: start;
  margin-bottom: 16px;
}
.big-contact {
  display: block;
  padding: 16px;
  border: 2px solid var(--ink, #17131b);
  background: var(--lime, #c7f36b);
  box-shadow: 4px 4px 0 var(--ink, #17131b);
  color: var(--ink, #17131b);
  text-decoration: none;
  font: 10px/1.3 var(--pixel, monospace);
  text-align: center;
  transition: transform 0.12s ease;
}
.big-contact:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--ink, #17131b);
}
.contact-option {
  display: block;
  padding: 12px;
  border: 2px solid var(--ink, #17131b);
  background: white;
  box-shadow: 3px 3px 0 var(--ink, #17131b);
  font: 9px/1 var(--pixel, monospace);
  text-align: left;
  color: var(--ink, #17131b);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s ease;
}
.contact-option:hover {
  background: var(--blue, #a8d7e8);
}
.system-card {
  padding: 16px;
  border: 2px solid var(--ink, #17131b);
  background: var(--paper-2, #f4e8bb);
  box-shadow: 3px 3px 0 var(--ink, #17131b);
}
.system-card .availability {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 8px/1.4 var(--pixel, monospace);
  color: var(--ink, #17131b);
  margin-bottom: 10px;
}
.system-card .availability i {
  width: 10px;
  height: 10px;
  background: #38aa67;
  border: 2px solid var(--ink, #17131b);
  display: inline-block;
}
.system-card ul {
  padding-left: 17px;
  font-size: 11px;
  line-height: 1.7;
  color: #453e47;
  margin: 0 0 10px;
}
.source-note {
  margin-top: 10px;
  padding: 9px;
  border-left: 4px solid var(--wine, #7b1635);
  background: rgba(123, 22, 53, .07);
  font-size: 8px;
  line-height: 1.5;
  color: var(--muted, #6f6870);
  font-family: var(--pixel, monospace);
}
.garage-mail {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 2px solid var(--ink, #17131b);
  background: #fffdf4;
  box-shadow: 6px 7px 0 rgba(23, 19, 27, .16);
}
.garage-mail header {
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ink, #17131b);
  font: 8px/1 var(--pixel, monospace);
}
.garage-mail label {
  display: grid;
  gap: 6px;
  font: 8px/1 var(--pixel, monospace);
  color: var(--ink, #17131b);
}
.garage-mail input,
.garage-mail select,
.garage-mail textarea {
  width: 100%;
  padding: 10px;
  border: 2px solid var(--ink, #17131b);
  border-radius: 0;
  background: #fff;
  font: 11px/1.4 var(--mono, monospace);
  color: var(--ink, #17131b);
  box-sizing: border-box;
}
.garage-mail input:focus,
.garage-mail select:focus,
.garage-mail textarea:focus {
  outline: 3px solid var(--lime, #c7f36b);
  outline-offset: 1px;
}
.contact-status-banner {
  padding: 8px 12px;
  font-size: 11px;
  font-family: var(--mono, monospace);
  margin-bottom: 6px;
  border: 2px solid var(--ink, #17131b);
}
.contact-status-banner.success {
  background: #dcfce7;
  color: #166534;
  border-color: #166534;
}
.contact-status-banner.error {
  background: #fde8e8;
  color: var(--wine, #7b1635);
  border-color: var(--wine, #7b1635);
}
.garage-mail button[type="submit"],
.contact-submit-btn {
  min-height: 44px;
  border: 2px solid var(--ink, #17131b);
  background: var(--wine, #7b1635);
  color: var(--paper, #fff8dc);
  font: 8px/1 var(--pixel, monospace);
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink, #17131b);
  transition: transform 0.1s ease;
}
.garage-mail button[type="submit"]:hover,
.contact-submit-btn:hover {
  transform: translate(-1px, -1px);
  background: var(--ink, #17131b);
}
.form-status {
  margin: 0;
  font: 7px/1.4 var(--pixel, monospace);
  color: var(--muted, #6f6870);
}

/* ==========================================================================
   RESUME / PERSONNEL FILE APPLICATION (AYUSH.OS)
   ========================================================================== */

.resume-app-container {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
  background: var(--sand, #f6f0dd);
  color: var(--ink, #17131b);
  box-sizing: border-box;
}

.resume-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  border-bottom: 2px solid var(--ink, #17131b);
  padding-bottom: 14px;
}

.resume-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.resume-status-badge-wrap {
  flex-shrink: 0;
}

.resume-status-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--cream, #fffdfa);
  border: 2px solid var(--ink, #17131b);
  box-shadow: 2px 2px 0 var(--ink, #17131b);
  font: 8px/1 var(--pixel, monospace);
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.resume-status-tag:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--ink, #17131b);
}

.resume-status-tag:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--ink, #17131b);
}

.resume-status-tag .status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f59e0b;
}

.resume-status-tag.ready .status-dot {
  background: #10b981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
}

.resume-status-tag.ready {
  background: #dcfce7;
  color: #166534;
}

.resume-status-tag.pending .status-dot {
  background: #f59e0b;
}

/* Candidate Identity Summary */
.resume-identity-card {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 20px;
  background: var(--cream, #fffdfa);
  border: 2px solid var(--ink, #17131b);
  box-shadow: 4px 4px 0 var(--ink, #17131b);
  padding: 18px;
}

.identity-photo-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.identity-avatar-frame {
  width: 120px;
  height: 140px;
  border: 2px solid var(--ink, #17131b);
  background: linear-gradient(135deg, var(--sand, #f6f0dd) 0%, #e2d9c2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.identity-avatar-frame img {
  width: 90%;
  height: 90%;
  object-fit: contain;
}

.identity-role-tag {
  font: 7px/1 var(--pixel, monospace);
  background: var(--wine, #7b1635);
  color: var(--paper, #fff8dc);
  padding: 3px 6px;
  letter-spacing: 0.5px;
}

.identity-details-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.identity-name-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}

.identity-name-line h3 {
  margin: 0;
  font: 24px/1.1 var(--serif, Georgia, serif);
  font-weight: 700;
  color: var(--ink, #17131b);
}

.identity-location {
  font: 11px/1 var(--mono, monospace);
  color: var(--muted, #6f6870);
}

.identity-headline {
  margin: 0;
  font: 13px/1.3 var(--mono, monospace);
  color: var(--wine, #7b1635);
  font-weight: 700;
}

.identity-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin-top: 4px;
  padding: 10px;
  background: var(--sand, #f6f0dd);
  border: 1px dashed var(--ink, #17131b);
}

.identity-meta-item small {
  display: block;
  font: 7px/1 var(--pixel, monospace);
  color: var(--muted, #6f6870);
  margin-bottom: 3px;
}

.identity-meta-item strong {
  display: block;
  font: 12px/1.2 var(--mono, monospace);
  color: var(--ink, #17131b);
}

.identity-meta-item strong.highlight-val {
  color: #166534;
  font-weight: 700;
}

.identity-contact-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.identity-contact-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: #fff;
  border: 1px solid var(--ink, #17131b);
  font: 10px/1.2 var(--mono, monospace);
  color: var(--ink, #17131b);
  text-decoration: none;
  transition: all 0.12s ease;
}

.identity-contact-pill:hover {
  background: var(--wine, #7b1635);
  color: var(--paper, #fff8dc);
}

/* Action Bar */
.resume-action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  background: var(--cream, #fffdfa);
  border: 2px solid var(--ink, #17131b);
  box-shadow: 3px 3px 0 var(--ink, #17131b);
  padding: 12px 16px;
}

.resume-file-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-family: var(--mono, monospace);
}

.resume-file-meta .meta-label {
  font: 7px/1 var(--pixel, monospace);
  color: var(--muted, #6f6870);
}

.resume-file-meta code {
  background: var(--sand, #f6f0dd);
  padding: 3px 6px;
  border: 1px solid var(--ink, #17131b);
  font-size: 11px;
}

.resume-file-meta .meta-format {
  font-weight: 700;
  color: var(--wine, #7b1635);
}

.resume-button-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.resume-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  font: 8px/1 var(--pixel, monospace);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid var(--ink, #17131b);
  box-shadow: 3px 3px 0 var(--ink, #17131b);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.resume-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--ink, #17131b);
}

.resume-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ink, #17131b);
}

.resume-btn.btn-primary {
  background: var(--wine, #7b1635);
  color: var(--paper, #fff8dc);
}

.resume-btn.btn-secondary {
  background: var(--lime, #c7f36b);
  color: var(--ink, #17131b);
}

.resume-btn.btn-accent {
  background: var(--yellow, #ffd95a);
  color: var(--ink, #17131b);
}

.resume-btn.btn-outline {
  background: var(--paper-2, #f4e8bb);
  color: var(--ink, #17131b);
}

/* Notice Banner */
.resume-notice-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #fef3c7;
  border: 2px solid #b45309;
  padding: 10px 14px;
  font-size: 11px;
  font-family: var(--mono, monospace);
  color: #78350f;
}

.resume-notice-banner .notice-icon {
  font-size: 14px;
  line-height: 1;
}

.resume-notice-banner code {
  background: #fde68a;
  padding: 1px 4px;
  border: 1px solid #b45309;
}

/* Viewer Shell & Frame */
.resume-viewer-shell {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.resume-pdf-frame-wrapper {
  width: 100%;
  height: 600px;
  border: 2px solid var(--ink, #17131b);
  box-shadow: 4px 4px 0 var(--ink, #17131b);
  background: #fff;
  overflow: hidden;
}

.resume-pdf-frame {
  width: 100%;
  height: 100%;
  border: none;
}

/* Structured Recruiter Dossier */
.resume-structured-dossier {
  background: var(--cream, #fffdfa);
  border: 2px solid var(--ink, #17131b);
  box-shadow: 4px 4px 0 var(--ink, #17131b);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dossier-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-bottom: 1px dashed rgba(23, 19, 27, 0.2);
  padding-bottom: 16px;
}

.dossier-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.dossier-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.dossier-heading {
  margin: 0;
  font: 11px/1 var(--pixel, monospace);
  font-weight: 700;
  color: var(--ink, #17131b);
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.dossier-heading span {
  color: var(--wine, #7b1635);
}

.dossier-nav-btn {
  background: none;
  border: none;
  font: 8px/1 var(--pixel, monospace);
  color: var(--wine, #7b1635);
  font-weight: 700;
  cursor: pointer;
  padding: 3px 6px;
}

.dossier-nav-btn:hover {
  text-decoration: underline;
}

.dossier-summary-text {
  margin: 0;
  font: 13px/1.6 var(--serif, Georgia, serif);
  color: var(--ink, #17131b);
}

.dossier-skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.dossier-skill-block {
  background: var(--sand, #f6f0dd);
  border: 1px solid var(--ink, #17131b);
  padding: 10px;
}

.dossier-skill-block small {
  display: block;
  font: 7px/1 var(--pixel, monospace);
  color: var(--muted, #6f6870);
  margin-bottom: 6px;
}

.dossier-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.dossier-tag {
  display: inline-block;
  padding: 3px 7px;
  background: #fff;
  border: 1px solid var(--ink, #17131b);
  font: 10px/1.2 var(--mono, monospace);
  color: var(--ink, #17131b);
}

.dossier-tag.highlight {
  background: var(--blue, #a8d7e8);
  font-weight: 700;
}

.dossier-tag.domain {
  background: var(--cream, #fffdfa);
  border-style: dashed;
}

.dossier-items-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.dossier-card {
  background: #fff;
  border: 1px solid var(--ink, #17131b);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dossier-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.dossier-card-title {
  font: 14px/1.2 var(--serif, Georgia, serif);
  font-weight: 700;
  color: var(--ink, #17131b);
}

.dossier-card-desc {
  margin: 0;
  font: 11px/1.5 var(--mono, monospace);
  color: var(--muted, #6f6870);
}

.dossier-badge {
  font: 7px/1 var(--pixel, monospace);
  background: var(--sand, #f6f0dd);
  border: 1px solid var(--ink, #17131b);
  padding: 2px 5px;
}

.dossier-bullet-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dossier-bullet-list li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font: 12px/1.4 var(--mono, monospace);
}

.dossier-bullet-list li strong {
  color: var(--wine, #7b1635);
  font-size: 8px;
}

/* Recruiter Quick Nav */
.resume-recruiter-nav {
  background: var(--cream, #fffdfa);
  border: 2px solid var(--ink, #17131b);
  box-shadow: 4px 4px 0 var(--ink, #17131b);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.recruiter-nav-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 8px/1 var(--pixel, monospace);
  color: var(--ink, #17131b);
}

.recruiter-shortcuts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.recruiter-pill {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 8px 10px;
  background: #fff;
  border: 2px solid var(--ink, #17131b);
  box-shadow: 2px 2px 0 var(--ink, #17131b);
  cursor: pointer;
  text-align: left;
  transition: all 0.12s ease;
}

.recruiter-pill:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--wine, #7b1635);
  background: var(--sand, #f6f0dd);
}

.recruiter-pill strong {
  font: 11px/1.2 var(--mono, monospace);
  color: var(--ink, #17131b);
}

.recruiter-pill small {
  font: 7px/1 var(--pixel, monospace);
  color: var(--wine, #7b1635);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .resume-identity-card {
    grid-template-columns: 1fr;
  }
  .identity-photo-col {
    flex-direction: row;
    justify-content: flex-start;
  }
  .identity-avatar-frame {
    width: 80px;
    height: 90px;
  }
  .resume-action-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .resume-button-group {
    flex-direction: column;
  }
  .resume-btn {
    width: 100%;
  }
}

/* ==========================================================================
   AYUSH.OS — GALLERY APPLICATION STYLING
   ========================================================================== */

.gallery-app-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
  max-width: 1100px;
  margin: 0 auto;
}

.gallery-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  border-bottom: 2px solid var(--ink, #17131b);
  padding-bottom: 16px;
  flex-wrap: wrap;
}

.gallery-stats-badge {
  flex-shrink: 0;
}

.gallery-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--cream, #fffdfa);
  border: 2px solid var(--ink, #17131b);
  box-shadow: 2px 2px 0 var(--ink, #17131b);
  font: 8px/1 var(--pixel, monospace);
  font-weight: 700;
  letter-spacing: 0.5px;
}

.gallery-stat-pill .status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
}

/* Category Filter Tabs */
.gallery-filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.gallery-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--cream, #fffdfa);
  border: 2px solid var(--ink, #17131b);
  box-shadow: 2px 2px 0 var(--ink, #17131b);
  font: 8px/1 var(--pixel, monospace);
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.gallery-filter-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--ink, #17131b);
  background: var(--paper-2, #f4e8bb);
}

.gallery-filter-btn.active {
  background: var(--wine, #7b1635);
  color: var(--paper, #fff8dc);
  border-color: var(--ink, #17131b);
}

.gallery-filter-btn .filter-count {
  font-size: 7px;
  opacity: 0.85;
}

/* Gallery Grid */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}

.gallery-card {
  background: var(--cream, #fffdfa);
  border: 2px solid var(--ink, #17131b);
  box-shadow: 4px 4px 0 var(--ink, #17131b);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.gallery-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--ink, #17131b);
}

.gallery-thumbnail-wrap {
  position: relative;
  width: 100%;
  height: 200px;
  background: #17131b;
  overflow: hidden;
  cursor: pointer;
}

.gallery-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.gallery-card:hover .gallery-thumbnail {
  transform: scale(1.04);
}

.gallery-card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(23, 19, 27, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.gallery-thumbnail-wrap:hover .gallery-card-overlay {
  opacity: 1;
}

.overlay-zoom-icon {
  background: var(--paper, #fff8dc);
  color: var(--ink, #17131b);
  border: 1.5px solid var(--ink, #17131b);
  box-shadow: 2px 2px 0 var(--ink, #17131b);
  padding: 6px 12px;
  font: 8px/1 var(--pixel, monospace);
  font-weight: 700;
  letter-spacing: 0.5px;
}

.gallery-card-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 8px;
}

.gallery-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}

.gallery-category-tag {
  font: 7px/1 var(--pixel, monospace);
  font-weight: 700;
  padding: 3px 6px;
  border: 1px solid var(--ink, #17131b);
}

.gallery-category-tag.3d_avatar {
  background: #dbeafe;
  color: #1e40af;
}

.gallery-category-tag.portrait {
  background: #fef3c7;
  color: #92400e;
}

.gallery-category-tag.credential {
  background: #dcfce7;
  color: #166534;
}

.gallery-category-tag.hackathon {
  background: #fef08a;
  color: #854d0e;
}

.gallery-aspect-badge {
  font: 7px/1 var(--pixel, monospace);
  color: #716b76;
}

.gallery-card-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink, #17131b);
  line-height: 1.3;
  margin: 0;
}

.gallery-card-desc {
  font-size: 11px;
  line-height: 1.45;
  color: #4b4650;
  margin: 0;
  flex: 1;
}

.gallery-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.gallery-btn-action {
  flex: 1;
  padding: 6px 10px;
  background: var(--paper-2, #f4e8bb);
  border: 1.5px solid var(--ink, #17131b);
  box-shadow: 2px 2px 0 var(--ink, #17131b);
  font: 7px/1 var(--pixel, monospace);
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.gallery-btn-action:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--ink, #17131b);
  background: var(--yellow, #ffd95a);
}

.gallery-btn-dl {
  padding: 6px 10px;
  background: var(--cream, #fffdfa);
  border: 1.5px solid var(--ink, #17131b);
  box-shadow: 2px 2px 0 var(--ink, #17131b);
  font: 9px/1 var(--pixel, monospace);
  font-weight: 700;
  text-decoration: none;
  color: var(--ink, #17131b);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.gallery-btn-dl:hover {
  background: var(--lime, #c7f36b);
}

/* Lightbox Modal */
.gallery-lightbox-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-lightbox-modal[hidden] {
  display: none !important;
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(23, 19, 27, 0.85);
  backdrop-filter: blur(4px);
}

.lightbox-dialog {
  position: relative;
  z-index: 2;
  width: 90vw;
  max-width: 960px;
  max-height: 90vh;
  background: var(--cream, #fffdfa);
  border: 3px solid var(--ink, #17131b);
  box-shadow: 8px 8px 0 var(--ink, #17131b);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.lightbox-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  background: var(--sand, #f8eed1);
  border-bottom: 2px solid var(--ink, #17131b);
}

.lightbox-kicker {
  font: 7px/1 var(--pixel, monospace);
  font-weight: 700;
  color: var(--wine, #7b1635);
  display: block;
  margin-bottom: 3px;
}

.lightbox-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink, #17131b);
  margin: 0;
}

.lightbox-header-actions {
  display: flex;
  gap: 8px;
}

.lightbox-header-btn,
.lightbox-close-btn {
  padding: 6px 12px;
  font: 8px/1 var(--pixel, monospace);
  font-weight: 700;
  border: 1.5px solid var(--ink, #17131b);
  box-shadow: 2px 2px 0 var(--ink, #17131b);
  cursor: pointer;
  text-decoration: none;
  color: var(--ink, #17131b);
  background: var(--paper, #fff8dc);
}

.lightbox-close-btn {
  background: #fca5a5;
}

.lightbox-content-body {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #17131b;
  min-height: 400px;
  max-height: 60vh;
  overflow: hidden;
}

.lightbox-image-stage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.lightbox-image {
  max-width: 100%;
  max-height: 56vh;
  object-fit: contain;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.lightbox-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  background: var(--paper, #fff8dc);
  border: 2px solid var(--ink, #17131b);
  box-shadow: 3px 3px 0 var(--ink, #17131b);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s ease;
}

.lightbox-nav-btn.prev {
  left: 16px;
}

.lightbox-nav-btn.next {
  right: 16px;
}

.lightbox-nav-btn:hover {
  transform: translateY(-50%) scale(1.08);
  background: var(--lime, #c7f36b);
}

.lightbox-footer {
  padding: 12px 18px;
  background: var(--cream, #fffdfa);
  border-top: 2px solid var(--ink, #17131b);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.lightbox-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lightbox-cat-badge {
  font: 7px/1 var(--pixel, monospace);
  font-weight: 700;
  padding: 3px 6px;
  border: 1px solid var(--ink, #17131b);
}

.lightbox-index-text {
  font: 8px/1 var(--pixel, monospace);
  color: #716b76;
}

.lightbox-desc {
  font-size: 12px;
  color: #4b4650;
  margin: 0;
  flex: 1;
  text-align: right;
}

@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: 1fr;
  }
  .lightbox-nav-btn {
    width: 36px;
    height: 36px;
  }
  .lightbox-footer {
    flex-direction: column;
    align-items: flex-start;
  }
  .lightbox-desc {
    text-align: left;
  }
}