:root {
      /* Colors */
      --bg: #fbfdfc;
      --panel: #ffffff;
      --panel-2: #f4f7f5;
      --text: #1f2328;
      --muted: #66736f;
      --accent: #0f766e;
      --accent-2: #8a9c96;
      --warning: #946800;
      --danger: #c0342b;
      --border: #e3e8e5;

      /* Typography */
      --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
      --text-xs: 0.75rem;    /* 12px */
      --text-sm: 0.875rem;   /* 14px */
      --text-base: 1rem;     /* 16px */
      --text-lg: 1.125rem;   /* 18px */
      --text-xl: 1.25rem;    /* 20px */
      --text-2xl: 1.5rem;    /* 24px */
      --text-3xl: 1.875rem;  /* 30px */
      --text-4xl: 2.25rem;   /* 36px */
      --text-5xl: 3rem;      /* 48px */
      --text-6xl: 4rem;      /* 64px */
      --leading-tight: 1.05;
      --leading-snug: 1.2;
      --leading-relaxed: 1.7;
      --tracking-tight: 0;

      /* Spacing */
      --space-1: 0.25rem;    /* 4px */
      --space-2: 0.5rem;     /* 8px */
      --space-3: 0.75rem;    /* 12px */
      --space-4: 1rem;       /* 16px */
      --space-5: 1.25rem;    /* 20px */
      --space-6: 1.5rem;     /* 24px */
      --space-7: 1.75rem;    /* 28px */
      --space-8: 2rem;       /* 32px */
      --space-10: 2.5rem;    /* 40px */
      --space-12: 3rem;      /* 48px */
      --space-14: 3.5rem;    /* 56px */
      --space-16: 4rem;      /* 64px */
      --space-20: 5rem;      /* 80px */
      --space-24: 6rem;      /* 96px */

      /* Radius */
      --radius-sm: 4px;
      --radius-md: 8px;
      --radius-lg: 12px;
      --radius-xl: 18px;
      --radius-full: 9999px;

      /* Shadows */
      --shadow-sm: 0 1px 2px rgba(31, 35, 40, 0.04);
      --shadow-subtle: 0 6px 18px rgba(31, 35, 40, 0.045), 0 1px 2px rgba(31, 35, 40, 0.025);
      --shadow-md: 0 14px 36px rgba(31, 35, 40, 0.07), 0 4px 10px rgba(31, 35, 40, 0.035);
      --shadow-soft: 0 28px 72px rgba(31, 35, 40, 0.075), 0 8px 18px rgba(31, 35, 40, 0.035);
      --shadow-lift: 0 22px 52px rgba(31, 35, 40, 0.095), 0 5px 14px rgba(31, 35, 40, 0.045);
      --shadow-premium: 0 34px 92px rgba(31, 35, 40, 0.105), 0 12px 30px rgba(15, 118, 110, 0.08);
      --ring-accent: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
      --surface-glass: color-mix(in srgb, var(--panel) 86%, transparent);
      --surface-raised: linear-gradient(180deg, color-mix(in srgb, var(--panel) 98%, transparent), color-mix(in srgb, var(--panel-2) 24%, var(--panel)));
      --border-soft: color-mix(in srgb, var(--border) 78%, transparent);
      --border-accent: color-mix(in srgb, var(--accent) 30%, var(--border));

      /* Transitions */
      --transition-fast: 0.15s ease-out;
      --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      --transition-premium: 0.42s cubic-bezier(0.16, 1, 0.3, 1);
    }

    :root[data-theme="dark"] {
      --bg: #111412;
      --panel: #191d1b;
      --panel-2: #202622;
      --text: #f2f5f3;
      --muted: #a9b4af;
      --accent: #58c7b1;
      --accent-2: #7f918a;
      --warning: #e5b75a;
      --danger: #ff7b72;
      --border: #303934;

      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.18);
      --shadow-subtle: 0 6px 18px rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.12);
      --shadow-md: 0 14px 36px rgba(0, 0, 0, 0.24), 0 4px 10px rgba(0, 0, 0, 0.16);
      --shadow-soft: 0 28px 72px rgba(0, 0, 0, 0.28), 0 8px 18px rgba(0, 0, 0, 0.18);
      --shadow-lift: 0 22px 52px rgba(0, 0, 0, 0.32), 0 5px 14px rgba(0, 0, 0, 0.20);
      --shadow-premium: 0 34px 92px rgba(0, 0, 0, 0.36), 0 12px 30px rgba(88, 199, 177, 0.10);
      --ring-accent: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);
      --surface-glass: color-mix(in srgb, var(--panel) 86%, transparent);
      --surface-raised: linear-gradient(180deg, color-mix(in srgb, var(--panel) 98%, transparent), color-mix(in srgb, var(--panel-2) 24%, var(--panel)));
      --border-soft: color-mix(in srgb, var(--border) 76%, transparent);
      --border-accent: color-mix(in srgb, var(--accent) 36%, var(--border));
    }

    :root[data-theme="focus"] {
      --bg: #f6f8fb;
      --panel: #ffffff;
      --panel-2: #eef3f7;
      --text: #1f2f3d;
      --muted: #647582;
      --accent: #386f8f;
      --accent-2: #8299a8;
      --warning: #8a6416;
      --danger: #b42318;
      --border: #d8e2ea;

      --shadow-sm: 0 1px 2px rgba(31, 47, 61, 0.04);
      --shadow-subtle: 0 6px 18px rgba(31, 47, 61, 0.055), 0 1px 2px rgba(31, 47, 61, 0.025);
      --shadow-md: 0 14px 36px rgba(31, 47, 61, 0.08), 0 4px 10px rgba(31, 47, 61, 0.04);
      --shadow-soft: 0 28px 72px rgba(31, 47, 61, 0.08), 0 8px 18px rgba(31, 47, 61, 0.04);
      --shadow-lift: 0 22px 52px rgba(31, 47, 61, 0.105), 0 5px 14px rgba(31, 47, 61, 0.05);
      --shadow-premium: 0 34px 92px rgba(31, 47, 61, 0.11), 0 12px 30px rgba(56, 111, 143, 0.10);
      --ring-accent: 0 0 0 4px color-mix(in srgb, var(--accent) 15%, transparent);
      --surface-glass: color-mix(in srgb, var(--panel) 86%, transparent);
      --surface-raised: linear-gradient(180deg, color-mix(in srgb, var(--panel) 98%, transparent), color-mix(in srgb, var(--panel-2) 22%, var(--panel)));
      --border-soft: color-mix(in srgb, var(--border) 78%, transparent);
      --border-accent: color-mix(in srgb, var(--accent) 30%, var(--border));
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      font-family: var(--font-sans);
      background: var(--bg);
      color: var(--text);
      min-height: 100vh;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      line-height: 1.6;
    }

    ::selection {
      background: color-mix(in srgb, var(--accent) 24%, transparent);
      color: var(--text);
    }

    :focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 3px;
      box-shadow: var(--ring-accent);
    }

    header {
      padding: 22px;
      border-bottom: 1px solid var(--border);
      background: color-mix(in srgb, var(--panel) 92%, transparent);
      backdrop-filter: blur(16px);
      position: sticky;
      top: 0;
      z-index: 10;
    }

    header h1 {
      margin: 0 0 var(--space-2);
      font-size: var(--text-2xl);
      font-weight: 700;
      letter-spacing: var(--tracking-tight);
    }
    header p { margin: 0; color: var(--muted); font-size: var(--text-sm); }

    .cloud-sync-status {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 8px;
      padding: 4px 10px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.02em;
      border: 1px solid var(--border);
      background: var(--panel-2);
      color: var(--muted);
    }

    .cloud-sync-status::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: currentColor;
      opacity: 0.55;
    }

    .cloud-sync-status[data-status="synced"] {
      color: var(--accent);
      border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
      background: color-mix(in srgb, var(--accent) 10%, var(--panel));
    }

    .cloud-sync-status[data-status="syncing"],
    .cloud-sync-status[data-status="connecting"] {
      color: var(--warning);
      border-color: color-mix(in srgb, var(--warning) 35%, var(--border));
      background: color-mix(in srgb, var(--warning) 10%, var(--panel));
    }

    .cloud-sync-status[data-status="offline"] {
      color: var(--danger);
      border-color: color-mix(in srgb, var(--danger) 35%, var(--border));
      background: color-mix(in srgb, var(--danger) 8%, var(--panel));
    }

    .portfolio-body {
      background: var(--bg);
    }

    .site-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 16px 22px;
      max-width: 1240px;
      margin: 0 auto;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--text);
      text-decoration: none;
    }

    .brand span {
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border-radius: 10px;
      background: var(--accent);
      color: #ffffff;
      font-weight: bold;
    }

    .site-nav {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .theme-menu {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 38px;
      padding: 6px 10px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: var(--panel);
      color: var(--muted);
      font-size: 13px;
    }

    .theme-menu select {
      width: auto;
      min-width: 92px;
      margin: 0;
      padding: 6px 8px;
      border-radius: 999px;
      background: var(--panel-2);
    }

    .customer-theme-menu {
      margin-left: 6px;
      vertical-align: top;
    }

    .site-tab {
      min-height: 38px;
      border-radius: 999px;
      padding: 8px 14px;
    }

    .site-link,
    .back-home-link {
      display: inline-flex;
      align-items: center;
      min-height: 38px;
      padding: 8px 12px;
      border: 1px solid var(--border);
      border-radius: 999px;
      color: var(--text);
      background: transparent;
      text-decoration: none;
    }

    button.site-link {
      cursor: pointer;
      font: inherit;
    }

    .site-link:hover,
    .back-home-link:hover {
      border-color: var(--accent);
    }

    .back-home-link {
      margin-bottom: 12px;
      font-size: 13px;
    }

    .site-tab.active {
      background: var(--accent);
      color: #ffffff;
      border-color: var(--accent);
      font-weight: bold;
    }

    .source-dialog {
      width: min(1100px, calc(100vw - 24px));
      max-width: 1100px;
      border: none;
      padding: 0;
      background: transparent;
      color: var(--text);
    }

    .source-dialog::backdrop {
      background: rgba(8, 13, 19, 0.72);
      backdrop-filter: blur(4px);
    }

    .source-dialog-shell {
      display: grid;
      gap: 14px;
      padding: 18px;
      border-radius: 22px;
      border: 1px solid var(--border);
      background: color-mix(in srgb, var(--panel) 95%, transparent);
      box-shadow: var(--shadow-soft);
    }

    .source-dialog-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
    }

    .source-dialog-header h2 {
      margin: 4px 0 6px;
    }

    .source-dialog-header p {
      margin: 0;
    }

    .source-dialog-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    .source-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .source-tabs button {
      min-height: 38px;
      padding: 8px 14px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--panel-2);
      color: var(--text);
    }

    .source-tabs button.active {
      border-color: var(--accent);
      background: var(--accent);
      color: #ffffff;
    }

    .source-code {
      margin: 0;
      max-height: min(68vh, 760px);
      overflow: auto;
      padding: 16px;
      border-radius: 18px;
      border: 1px solid var(--border);
      background: #0d1320;
      color: #e7edf7;
      font-family: Consolas, 'Liberation Mono', Menlo, monospace;
      font-size: 12px;
      line-height: 1.55;
      white-space: pre;
      tab-size: 2;
    }

    .portfolio-body {
      background:
        radial-gradient(circle at 50% -12rem, color-mix(in srgb, var(--accent) 10%, transparent), transparent 38rem),
        linear-gradient(180deg, color-mix(in srgb, var(--panel) 42%, var(--bg)) 0%, var(--bg) 38rem),
        var(--bg);
    }

    .site-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 16px 22px;
      max-width: 1240px;
      margin: 0 auto;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--text);
      text-decoration: none;
    }

    .brand span {
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border-radius: 10px;
      background: var(--accent);
      color: #ffffff;
      font-weight: bold;
    }

    .site-nav {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .theme-menu {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 38px;
      padding: 6px 10px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: var(--panel);
      color: var(--muted);
      font-size: 13px;
    }

    .theme-menu select {
      width: auto;
      min-width: 92px;
      margin: 0;
      padding: 6px 8px;
      border-radius: 999px;
      background: var(--panel-2);
    }

    .customer-theme-menu {
      margin-left: 6px;
      vertical-align: top;
    }

    .site-tab {
      min-height: 38px;
      border-radius: 999px;
      padding: 8px 14px;
    }

    .site-link,
    .back-home-link {
      display: inline-flex;
      align-items: center;
      min-height: 38px;
      padding: 8px 12px;
      border: 1px solid var(--border);
      border-radius: 999px;
      color: var(--text);
      background: transparent;
      text-decoration: none;
    }

    button.site-link {
      cursor: pointer;
      font: inherit;
    }

    .site-link:hover,
    .back-home-link:hover {
      border-color: var(--accent);
    }

    .back-home-link {
      margin-bottom: 12px;
      font-size: 13px;
    }

    .site-tab.active {
      background: var(--accent);
      color: #ffffff;
      border-color: var(--accent);
      font-weight: bold;
    }

    .source-dialog {
      width: min(1100px, calc(100vw - 24px));
      max-width: 1100px;
      border: none;
      padding: 0;
      background: transparent;
      color: var(--text);
    }

    .source-dialog::backdrop {
      background: rgba(8, 13, 19, 0.72);
      backdrop-filter: blur(4px);
    }

    .source-dialog-shell {
      display: grid;
      gap: 14px;
      padding: 18px;
      border-radius: 22px;
      border: 1px solid var(--border);
      background: color-mix(in srgb, var(--panel) 95%, transparent);
      box-shadow: var(--shadow-soft);
    }

    .source-dialog-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
    }

    .source-dialog-header h2 {
      margin: 4px 0 6px;
    }

    .source-dialog-header p {
      margin: 0;
    }

    .source-dialog-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    .source-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .source-tabs button {
      min-height: 38px;
      padding: 8px 14px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--panel-2);
      color: var(--text);
    }

    .source-tabs button.active {
      border-color: var(--accent);
      background: var(--accent);
      color: #ffffff;
    }

    .source-code {
      margin: 0;
      max-height: min(68vh, 760px);
      overflow: auto;
      padding: 16px;
      border-radius: 18px;
      border: 1px solid var(--border);
      background: #0d1320;
      color: #e7edf7;
      font-family: Consolas, 'Liberation Mono', Menlo, monospace;
      font-size: 12px;
      line-height: 1.55;
      white-space: pre;
      tab-size: 2;
    }

    .source-status {
      margin: 0;
    }

    .portfolio-main {
      display: flex;
      flex-direction: column;
      gap: clamp(var(--space-20), 9vw, var(--space-24));
      max-width: 1240px;
      margin: 0 auto;
      padding: clamp(var(--space-10), 6vw, var(--space-20)) clamp(var(--space-4), 4vw, var(--space-8)) var(--space-24);
    }

    .portfolio-tab {
      display: none;
    }

    .portfolio-tab.active {
      display: block;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.6fr);
      gap: 18px;
      align-items: stretch;
    }

    .hero-copy,
    .profile-card,
    .labs-hero,
    .project-hero {
      background: var(--surface-glass);
      backdrop-filter: blur(24px) saturate(1.08);
      border: 1px solid color-mix(in srgb, var(--border) 58%, transparent);
      border-radius: 28px;
      padding: var(--space-10) var(--space-8);
      box-shadow: 0 30px 90px rgba(18, 24, 21, 0.08), 0 1px 0 rgba(255,255,255,0.5) inset;
      transition: transform var(--transition-premium), border-color var(--transition-premium), box-shadow var(--transition-premium), background var(--transition-premium);
    }

    .hero-copy h1,
    .labs-hero h1,
    .project-hero h1 {
      margin: var(--space-2) 0 var(--space-4);
      font-size: clamp(3rem, 6vw, 4.5rem);
      line-height: var(--leading-tight);
      letter-spacing: var(--tracking-tight);
      font-weight: 800;
    }

    .hero-lead,
    .project-hero p {
      color: var(--text);
      font-size: var(--text-lg);
      line-height: var(--leading-relaxed);
      max-width: 65ch;
      opacity: 0.9;
    }

    .labs-hero {
      display: grid;
      gap: clamp(var(--space-5), 2.4vw, var(--space-8));
      width: 100%;
      max-width: none;
      min-height: clamp(560px, 68vh, 760px);
      align-content: center;
      justify-items: center;
      text-align: center;
      padding: clamp(var(--space-12), 8vw, var(--space-24)) clamp(var(--space-6), 7vw, var(--space-20));
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 34rem),
        linear-gradient(180deg, color-mix(in srgb, var(--panel) 86%, transparent) 0%, color-mix(in srgb, var(--panel) 58%, var(--panel-2)) 100%);
      box-shadow: 0 36px 100px rgba(18, 24, 21, 0.09), 0 1px 0 rgba(255,255,255,0.56) inset;
    }

    .labs-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.36), transparent 38%),
        linear-gradient(90deg, transparent 18%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 82%);
      opacity: 0.72;
    }

    .labs-hero::after {
      content: "";
      position: absolute;
      inset: auto 12% clamp(var(--space-8), 5vw, var(--space-14));
      width: auto;
      height: 1px;
      background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 50%, var(--border)), transparent);
      opacity: 0.66;
    }

    .labs-hero > * {
      position: relative;
      z-index: 1;
    }

    .labs-hero h1 {
      max-width: 12ch;
      margin: 0;
      font-size: clamp(4.25rem, 9vw, 7.4rem);
      line-height: 0.96;
      font-weight: 850;
    }

    .labs-hero .hero-lead {
      max-width: 42rem;
      margin: 0;
      color: var(--muted);
      font-size: clamp(var(--text-lg), 1.8vw, var(--text-2xl));
      line-height: 1.45;
    }

    .print-portfolio-main {
      width: min(1180px, 100% - 36px);
      margin: 0 auto;
    }

    .print-portfolio-body {
      overflow-x: hidden;
    }

    .print-hero {
      display: grid;
      grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
      gap: 18px;
      align-items: stretch;
    }

    .print-hero-copy,
    .print-hero-media {
      min-width: 0;
      min-height: 470px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: color-mix(in srgb, var(--panel) 92%, transparent);
      box-shadow: var(--shadow-soft);
      overflow: hidden;
    }

    .print-hero-copy {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 28px;
    }

    .print-hero-copy h1 {
      margin: 6px 0 12px;
      max-width: 13ch;
      font-size: clamp(34px, 4.4vw, 56px);
      line-height: 1.02;
      letter-spacing: 0;
    }

    .print-hero-media {
      background: #101418;
    }

    .print-hero-mosaic {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(180px, 0.8fr);
      grid-template-rows: repeat(2, minmax(0, 1fr));
      gap: 10px;
      width: 100%;
      height: 100%;
      padding: 10px;
    }

    .print-hero-tile,
    .print-gallery-media {
      position: relative;
      display: grid;
      place-items: center;
      margin: 0;
      overflow: hidden;
      border-radius: 8px;
      background: #0f1317;
    }

    .print-hero-tile.featured {
      grid-row: 1 / span 2;
    }

    .print-hero-image,
    .print-gallery-image {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .print-hero-tile figcaption {
      position: absolute;
      left: 10px;
      right: 10px;
      bottom: 10px;
      padding: 7px 9px;
      border-radius: 999px;
      background: rgba(8, 13, 19, 0.72);
      color: #ffffff;
      font-size: 12px;
      font-weight: 700;
    }

    .print-proof-grid,
    .print-card-grid,
    .print-process,
    .print-gallery-grid {
      display: grid;
      gap: 14px;
    }

    .print-proof-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .print-proof-grid article,
    .print-card,
    .print-process article {
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--panel);
      box-shadow: var(--shadow-subtle);
    }

    .print-proof-grid article {
      padding: 18px;
    }

    .print-proof-grid h2,
    .print-proof-grid p,
    .print-card h3,
    .print-card p,
    .print-process h3,
    .print-process p {
      margin: 0;
    }

    .print-stat {
      display: inline-grid;
      place-items: center;
      width: 42px;
      height: 42px;
      margin-bottom: 16px;
      border-radius: 10px;
      background: var(--accent);
      color: #ffffff;
      font-weight: bold;
    }

    .print-proof-grid p,
    .print-card p,
    .print-process p {
      color: var(--muted);
      line-height: 1.5;
    }

    .print-card-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .project-card {
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
      min-height: 280px;
      padding: var(--space-6);
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-sm);
      transition: var(--transition-smooth);
      position: relative;
    }

    .project-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-md);
      border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
    }

    .print-card {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-height: 310px;
      padding: 18px;
    }

    .print-card dl {
      display: grid;
      gap: 8px;
      margin: auto 0 0;
    }

    .print-card dl div {
      display: grid;
      gap: 2px;
      padding-top: 10px;
      border-top: 1px solid var(--border);
    }

    .print-card dt {
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
    }

    .print-card dd {
      margin: 0;
      font-weight: 700;
    }

    .print-process-section {
      padding-bottom: 24px;
    }

    .print-process {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .print-gallery-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .print-gallery-card {
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-width: 0;
      padding: 14px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--panel);
      box-shadow: var(--shadow-subtle);
    }

    .print-gallery-media {
      aspect-ratio: 4 / 5;
      border: 1px solid var(--border);
    }

    .print-gallery-card h3,
    .print-gallery-card p {
      margin: 0;
    }

    .print-gallery-card p {
      color: var(--muted);
      line-height: 1.5;
    }

    .print-gallery-notes {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      padding: 0;
      margin: auto 0 0;
      list-style: none;
    }

    .print-gallery-notes li {
      padding: 6px 9px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: var(--panel-2);
      font-size: 12px;
      font-weight: 700;
    }

    .print-gallery-facts {
      display: grid;
      gap: 10px;
      margin: 0;
    }

    .print-gallery-facts div {
      display: grid;
      gap: 4px;
      padding-top: 10px;
      border-top: 1px solid var(--border);
    }

    .print-gallery-facts dt {
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
    }

    .print-gallery-facts dd {
      margin: 0;
      color: var(--text);
      font-size: 13px;
      line-height: 1.42;
    }

    .print-gallery-loading {
      padding: 18px;
      color: var(--muted);
    }

    .print-process article {
      padding: 18px;
    }

    .print-process span {
      display: inline-grid;
      place-items: center;
      width: 34px;
      height: 34px;
      margin-bottom: 14px;
      border: 1px solid var(--border);
      border-radius: 999px;
      color: var(--accent);
      font-weight: bold;
    }

    .labs-meta span {
      border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
      border-radius: 999px;
      background: color-mix(in srgb, var(--panel) 54%, transparent);
      color: var(--text);
      padding: 8px 13px;
      font-size: var(--text-xs);
      font-weight: 700;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.42), 0 8px 24px rgba(18, 24, 21, 0.04);
    }

    .labs-meta {
      display: flex;
      justify-content: center;
      gap: var(--space-3);
      flex-wrap: wrap;
      margin-top: var(--space-1);
    }

    .hero-actions,
    .project-actions {
      display: flex;
      gap: var(--space-3);
      flex-wrap: wrap;
      margin-top: auto;
    }

    .button-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 46px;
      padding: 11px 18px;
      border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
      border-radius: 999px;
      background: color-mix(in srgb, var(--panel) 68%, var(--panel-2));
      color: var(--text);
      text-decoration: none;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.42), 0 8px 22px rgba(18, 24, 21, 0.04);
      transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
    }

    .button-link:hover,
    .button-link:focus-visible {
      border-color: var(--accent);
      transform: translateY(-1px);
      box-shadow: 0 14px 34px rgba(18, 24, 21, 0.08);
    }

    .button-link:active {
      transform: translateY(0);
    }

    .button-link.primary {
      background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 86%, #ffffff), var(--accent));
      color: #ffffff;
      border-color: var(--accent);
      font-weight: bold;
      box-shadow: 0 16px 34px color-mix(in srgb, var(--accent) 20%, transparent);
    }

    .button-link.primary:hover {
      box-shadow: 0 20px 42px color-mix(in srgb, var(--accent) 25%, transparent);
    }

    .button-link,
    button {
      font-weight: 600;
    }

    .profile-list {
      display: grid;
      gap: 12px;
      margin: 16px 0 0;
    }

    .profile-list div {
      border-top: 1px solid var(--border);
      padding-top: 12px;
    }

    .profile-list dt {
      color: var(--muted);
      font-size: 13px;
    }

    .profile-list dd {
      margin: 4px 0 0;
      font-weight: bold;
    }

    .content-section {
      margin-top: clamp(var(--space-16), 8vw, var(--space-24));
    }

    .highlight-grid,
    .project-card-grid,
    .experience-grid,
    .project-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: clamp(var(--space-4), 2vw, var(--space-6));
    }

    .project-card-grid {
      grid-template-columns: repeat(6, minmax(0, 1fr));
      align-items: stretch;
      gap: clamp(var(--space-5), 2.4vw, var(--space-8));
      perspective: 1400px;
    }

    .project-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      margin-top: 18px;
    }

    .experience-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      margin-top: 14px;
    }

    .project-card {
      grid-column: span 2;
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
      min-height: 310px;
      padding: clamp(var(--space-6), 2.7vw, var(--space-8));
      overflow: hidden;
      background:
        linear-gradient(180deg, color-mix(in srgb, var(--panel) 96%, transparent), color-mix(in srgb, var(--panel-2) 10%, var(--panel)));
      border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
      border-radius: 24px;
      box-shadow: 0 18px 48px rgba(18, 24, 21, 0.06), 0 1px 0 rgba(255,255,255,0.42) inset;
      position: relative;
      isolation: isolate;
      transform: translateY(0) rotateX(0);
      transition: transform var(--transition-premium), border-color var(--transition-premium), box-shadow var(--transition-premium), background var(--transition-premium);
    }

    .project-card::after {
      content: "";
      position: absolute;
      inset: 1px;
      border-radius: 23px;
      background: linear-gradient(145deg, rgba(255,255,255,0.36), transparent 38%);
      opacity: 0.34;
      pointer-events: none;
      z-index: 0;
    }

    .project-card > * {
      position: relative;
      z-index: 1;
    }

    .project-card::before {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      height: 3px;
      background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 70%, transparent), transparent 72%);
      opacity: 0;
      transition: opacity var(--transition-premium);
    }

    .project-card:hover {
      transform: translateY(-8px);
      border-color: var(--border-accent);
      box-shadow: 0 30px 70px rgba(18, 24, 21, 0.10), 0 1px 0 rgba(255,255,255,0.52) inset;
    }

    .project-card:hover::before {
      opacity: 1;
    }

    .project-card h3,
    .project-card p {
      margin: 0;
    }

    .project-card h3 {
      font-size: clamp(var(--text-xl), 1.8vw, var(--text-2xl));
      line-height: var(--leading-snug);
      letter-spacing: var(--tracking-tight);
      text-wrap: balance;
    }

    .project-card p {
      color: color-mix(in srgb, var(--text) 78%, var(--muted));
      line-height: 1.62;
      text-wrap: pretty;
    }

    .project-card .button-link,
    .project-card button {
      margin-top: auto;
    }

    .project-card-tags {
      display: flex;
      gap: var(--space-2);
      flex-wrap: wrap;
      align-items: center;
      align-self: flex-start;
    }

    .project-card > .pill {
      align-self: flex-start;
    }

    .education-block {
      max-width: 720px;
      padding: var(--space-5) var(--space-6);
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      color: var(--text);
      line-height: 1.6;
      box-shadow: var(--shadow-sm);
    }

    .education-block p {
      margin: 0.4em 0;
    }

    .thesis-section {
      margin: 0.9rem 0 0.6rem;
      padding: 0.75rem 0 0.5rem 0.9rem;
      border-left: 3px solid var(--accent);
    }

    .thesis-label {
      font-size: 0.7rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--accent);
      margin-bottom: 0.35rem;
    }

    .thesis-section p {
      margin: 0.35em 0;
    }

    .thesis-section strong {
      font-size: 1.02em;
      line-height: 1.35;
    }

    /* Homepage premium system: dark technical surfaces with equal project weight. */
    .portfolio-body {
      --home-bg-top: color-mix(in srgb, var(--bg) 84%, #02050a);
      --home-bg-bottom: color-mix(in srgb, var(--bg) 92%, #000000);
      --home-panel: color-mix(in srgb, var(--panel) 88%, #0b1018);
      --home-panel-strong: color-mix(in srgb, var(--panel) 74%, #04070d);
      --home-line: color-mix(in srgb, var(--accent) 18%, var(--border));
      --home-ambient: color-mix(in srgb, var(--accent) 12%, transparent);
      --home-ambient-2: color-mix(in srgb, #7b8796 12%, transparent);
      --home-deck: color-mix(in srgb, var(--panel) 24%, transparent);
      --home-grid: color-mix(in srgb, var(--border) 34%, transparent);
      --home-vignette: rgba(0, 0, 0, 0.44);
      --home-side-vignette: rgba(0, 0, 0, 0.24);
      --home-edge: color-mix(in srgb, var(--accent) 22%, transparent);
      --home-sheen: rgba(255, 255, 255, 0.1);
      --home-card-sheen: rgba(255, 255, 255, 0.09);
      --home-card-shadow-deep: 0 58px 150px rgba(0, 0, 0, 0.2);
      --home-card-bg: linear-gradient(180deg, color-mix(in srgb, var(--home-panel) 98%, transparent), color-mix(in srgb, var(--home-panel-strong) 98%, transparent));
      --home-card-border: color-mix(in srgb, var(--border) 68%, transparent);
      --home-card-shadow: 0 24px 64px rgba(0, 0, 0, 0.24), 0 1px 0 rgba(255, 255, 255, 0.08) inset;
      --home-card-shadow-hover: 0 42px 110px rgba(0, 0, 0, 0.44), 0 1px 0 rgba(255, 255, 255, 0.12) inset;
      --home-shadow: 0 34px 96px rgba(0, 0, 0, 0.38), 0 1px 0 rgba(255, 255, 255, 0.09) inset;
      --home-shadow-lift: var(--home-card-shadow-hover);
      position: relative;
      overflow-x: hidden;
      background:
        linear-gradient(115deg, transparent 0%, var(--home-ambient) 28%, transparent 55%),
        linear-gradient(245deg, transparent 0%, var(--home-ambient-2) 34%, transparent 64%),
        linear-gradient(180deg, transparent 0%, var(--home-deck) 44%, transparent 72%),
        linear-gradient(145deg, var(--home-bg-top) 0%, var(--home-bg-bottom) 100%);
    }

    :root:not([data-theme]) .portfolio-body,
    :root[data-theme="fresh"] .portfolio-body {
      --home-bg-top: #eef3f1;
      --home-bg-bottom: #d9dfdd;
      --home-panel: rgba(255, 255, 255, 0.82);
      --home-panel-strong: rgba(219, 225, 223, 0.78);
      --home-line: rgba(25, 96, 88, 0.2);
      --home-ambient: rgba(28, 118, 106, 0.1);
      --home-ambient-2: rgba(67, 79, 94, 0.12);
      --home-deck: rgba(97, 107, 105, 0.1);
      --home-grid: rgba(78, 92, 88, 0.14);
      --home-vignette: rgba(21, 27, 25, 0.16);
      --home-side-vignette: rgba(37, 47, 44, 0.13);
      --home-edge: rgba(16, 109, 98, 0.18);
      --home-sheen: rgba(255, 255, 255, 0.64);
      --home-card-sheen: rgba(255, 255, 255, 0.5);
      --home-card-shadow-deep: 0 58px 150px rgba(39, 48, 45, 0.12);
      --home-card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(222, 229, 226, 0.86));
      --home-card-border: rgba(80, 94, 90, 0.2);
      --home-card-shadow: 0 30px 78px rgba(28, 35, 33, 0.17), 0 16px 38px rgba(28, 35, 33, 0.08), 0 1px 0 rgba(255, 255, 255, 0.86) inset;
      --home-card-shadow-hover: 0 48px 110px rgba(28, 35, 33, 0.24), 0 20px 48px rgba(28, 35, 33, 0.1), 0 1px 0 rgba(255, 255, 255, 0.94) inset;
      --home-shadow: 0 38px 100px rgba(28, 35, 33, 0.2), 0 1px 0 rgba(255, 255, 255, 0.84) inset;
    }

    :root[data-theme="dark"] .portfolio-body {
      --home-bg-top: #07110f;
      --home-bg-bottom: #050706;
      --home-panel: rgba(20, 28, 25, 0.84);
      --home-panel-strong: rgba(8, 12, 11, 0.92);
      --home-line: rgba(104, 215, 194, 0.2);
      --home-ambient: rgba(88, 199, 177, 0.14);
      --home-ambient-2: rgba(104, 123, 145, 0.1);
      --home-deck: rgba(18, 25, 23, 0.54);
      --home-grid: rgba(132, 169, 160, 0.12);
      --home-vignette: rgba(0, 0, 0, 0.58);
      --home-side-vignette: rgba(0, 0, 0, 0.42);
      --home-edge: rgba(93, 205, 184, 0.2);
      --home-sheen: rgba(255, 255, 255, 0.11);
      --home-card-sheen: rgba(255, 255, 255, 0.1);
      --home-card-shadow-deep: 0 62px 170px rgba(0, 0, 0, 0.38);
      --home-card-bg: linear-gradient(180deg, rgba(23, 31, 28, 0.94), rgba(7, 12, 11, 0.97));
      --home-card-border: rgba(126, 160, 151, 0.18);
      --home-card-shadow: 0 32px 86px rgba(0, 0, 0, 0.38), 0 18px 46px rgba(0, 0, 0, 0.24), 0 1px 0 rgba(255, 255, 255, 0.09) inset;
      --home-card-shadow-hover: 0 54px 140px rgba(0, 0, 0, 0.56), 0 24px 58px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.15) inset;
      --home-shadow: 0 42px 118px rgba(0, 0, 0, 0.48), 0 1px 0 rgba(255, 255, 255, 0.11) inset;
    }

    :root[data-theme="focus"] .portfolio-body {
      --home-bg-top: #edf4f8;
      --home-bg-bottom: #dbe5eb;
      --home-panel: rgba(255, 255, 255, 0.84);
      --home-panel-strong: rgba(221, 231, 237, 0.82);
      --home-line: rgba(56, 111, 143, 0.2);
      --home-ambient: rgba(56, 111, 143, 0.11);
      --home-ambient-2: rgba(65, 83, 96, 0.1);
      --home-deck: rgba(84, 102, 114, 0.1);
      --home-grid: rgba(65, 83, 96, 0.14);
      --home-vignette: rgba(18, 35, 48, 0.14);
      --home-side-vignette: rgba(28, 48, 62, 0.12);
      --home-edge: rgba(56, 111, 143, 0.18);
      --home-sheen: rgba(255, 255, 255, 0.62);
      --home-card-sheen: rgba(255, 255, 255, 0.48);
      --home-card-shadow-deep: 0 58px 150px rgba(31, 47, 61, 0.12);
      --home-card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(224, 234, 240, 0.87));
      --home-card-border: rgba(58, 80, 96, 0.2);
      --home-card-shadow: 0 30px 78px rgba(31, 47, 61, 0.16), 0 16px 38px rgba(31, 47, 61, 0.08), 0 1px 0 rgba(255, 255, 255, 0.86) inset;
      --home-card-shadow-hover: 0 48px 110px rgba(31, 47, 61, 0.23), 0 20px 48px rgba(31, 47, 61, 0.1), 0 1px 0 rgba(255, 255, 255, 0.94) inset;
      --home-shadow: 0 38px 100px rgba(31, 47, 61, 0.19), 0 1px 0 rgba(255, 255, 255, 0.84) inset;
    }

    .portfolio-body::before,
    .portfolio-body::after {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
    }

    .portfolio-body::before {
      background-image:
        linear-gradient(var(--home-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--home-grid) 1px, transparent 1px),
        linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--accent) 8%, transparent) 45%, transparent 78%);
      background-position: center top;
      background-size: 104px 104px, 104px 104px, 100% 100%;
      mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.5) 42%, transparent 76%);
      opacity: 0.44;
    }

    .portfolio-body::after {
      background:
        linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.06) 45%, var(--home-vignette) 100%),
        linear-gradient(90deg, var(--home-side-vignette), transparent 18%, transparent 82%, var(--home-side-vignette));
      opacity: 0.82;
    }

    .portfolio-body .site-header,
    .portfolio-body .portfolio-main {
      position: relative;
      z-index: 1;
    }

    .portfolio-body .site-header {
      width: min(1240px, calc(100% - 40px));
      margin-top: var(--space-3);
      border: 1px solid color-mix(in srgb, var(--border) 62%, transparent);
      border-radius: 20px;
      background: color-mix(in srgb, var(--panel) 64%, transparent);
      backdrop-filter: blur(18px) saturate(1.12);
      box-shadow: 0 18px 50px rgba(0, 0, 0, 0.16), 0 1px 0 rgba(255, 255, 255, 0.08) inset;
    }

    .portfolio-body .brand span {
      background:
        linear-gradient(135deg, color-mix(in srgb, var(--accent) 92%, #ffffff), color-mix(in srgb, var(--accent) 64%, #6f7f90));
      color: #07100f;
      box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 22%, transparent);
    }

    .portfolio-body .portfolio-main {
      width: min(1220px, calc(100% - clamp(28px, 6vw, 88px)));
      margin: 0 auto;
      padding: clamp(var(--space-12), 7rem, var(--space-24)) 0 clamp(var(--space-16), 7rem, var(--space-24));
      isolation: isolate;
    }

    .portfolio-body .portfolio-main::before {
      content: "";
      position: absolute;
      top: clamp(660px, 52rem, 820px);
      left: 50%;
      width: 100vw;
      height: clamp(520px, 42rem, 720px);
      transform: translateX(-50%);
      z-index: -1;
      pointer-events: none;
      background:
        linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--home-edge) 42%, transparent) 18%, transparent 26%),
        linear-gradient(180deg, transparent 0%, var(--home-deck) 24%, var(--home-deck) 68%, transparent 100%),
        linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 7%, transparent) 50%, transparent),
        repeating-linear-gradient(90deg, transparent 0 118px, color-mix(in srgb, var(--home-grid) 62%, transparent) 119px 120px),
        repeating-linear-gradient(180deg, transparent 0 74px, color-mix(in srgb, var(--home-grid) 46%, transparent) 75px 76px);
      opacity: 0.72;
    }

    .portfolio-body .portfolio-main::after {
      content: "";
      position: absolute;
      top: clamp(710px, 55rem, 870px);
      left: 50%;
      width: min(1380px, 100vw);
      height: clamp(360px, 34rem, 560px);
      transform: translateX(-50%);
      z-index: -1;
      pointer-events: none;
      border-top: 1px solid color-mix(in srgb, var(--home-edge) 42%, transparent);
      background:
        linear-gradient(180deg, color-mix(in srgb, var(--home-sheen) 24%, transparent), transparent 22%),
        linear-gradient(90deg, transparent, color-mix(in srgb, var(--home-deck) 58%, transparent) 50%, transparent);
      box-shadow: var(--home-card-shadow-deep);
      opacity: 0.44;
    }

    .portfolio-body .labs-hero {
      min-height: clamp(520px, 40rem, 680px);
      padding: clamp(var(--space-16), 7rem, 7.5rem) clamp(var(--space-8), 6rem, var(--space-24));
      border-radius: 24px;
      border-color: color-mix(in srgb, var(--home-line) 72%, transparent);
      background:
        linear-gradient(180deg, color-mix(in srgb, var(--home-sheen) 44%, transparent), transparent 26%),
        linear-gradient(120deg, rgba(255, 255, 255, 0.11), transparent 30%),
        linear-gradient(180deg, color-mix(in srgb, var(--home-panel) 96%, transparent), color-mix(in srgb, var(--home-panel-strong) 98%, transparent)),
        linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, transparent), transparent 42%),
        repeating-linear-gradient(90deg, transparent 0 78px, color-mix(in srgb, var(--home-grid) 56%, transparent) 79px 80px);
      box-shadow: var(--home-shadow);
    }

    .portfolio-body .labs-hero::before {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 32%),
        linear-gradient(90deg, transparent 12%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 88%);
      opacity: 0.9;
    }

    .portfolio-body .labs-hero::after {
      inset: auto clamp(var(--space-8), 6rem, var(--space-24)) clamp(var(--space-8), 3.5rem, var(--space-14));
      height: 1px;
      background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 62%, var(--border)), transparent);
      opacity: 0.72;
    }

    .portfolio-body .labs-hero h1 {
      max-width: 11ch;
      font-size: clamp(4rem, 7rem, 7.25rem);
      line-height: 0.94;
      font-weight: 850;
      letter-spacing: 0;
      text-wrap: balance;
    }

    .portfolio-body .labs-hero .hero-lead {
      max-width: 40rem;
      color: color-mix(in srgb, var(--text) 78%, var(--muted));
      font-size: clamp(var(--text-lg), 1.35rem, var(--text-2xl));
      line-height: 1.5;
    }

    .portfolio-body .eyebrow {
      color: color-mix(in srgb, var(--accent) 74%, var(--text));
    }

    .portfolio-body .labs-meta {
      gap: var(--space-3);
      margin-top: var(--space-3);
    }

    .portfolio-body .labs-meta span {
      border: 1px solid color-mix(in srgb, var(--border) 64%, transparent);
      background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 70%, transparent), color-mix(in srgb, var(--panel-2) 44%, transparent));
      box-shadow: 0 12px 34px rgba(0, 0, 0, 0.16), 0 1px 0 rgba(255, 255, 255, 0.08) inset;
    }

    .portfolio-body .content-section {
      margin-top: clamp(var(--space-16), 6rem, 7.5rem);
    }

    .portfolio-body .section-title {
      margin-bottom: clamp(var(--space-6), 2.5rem, var(--space-10));
    }

    .portfolio-body .section-title h2 {
      margin: 0;
      font-size: clamp(var(--text-3xl), 2.6rem, var(--text-5xl));
      line-height: var(--leading-tight);
      letter-spacing: 0;
    }

    .portfolio-body .section-title .muted {
      color: color-mix(in srgb, var(--text) 60%, var(--muted));
      font-size: var(--text-lg);
    }

    .portfolio-body .project-card-grid {
      gap: clamp(var(--space-5), 2rem, var(--space-8));
      perspective: none;
    }

    .portfolio-body .project-card {
      min-height: 330px;
      padding: clamp(var(--space-6), 2rem, var(--space-8));
      border-radius: 20px;
      border-color: var(--home-card-border);
      background:
        linear-gradient(180deg, var(--home-card-sheen), transparent 24%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.09), transparent 31%),
        linear-gradient(225deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 44%),
        var(--home-card-bg);
      box-shadow: var(--home-card-shadow);
      backdrop-filter: blur(18px) saturate(1.05);
      outline: 1px solid color-mix(in srgb, var(--home-sheen) 18%, transparent);
      outline-offset: -2px;
      transform: translateY(0);
      will-change: transform, box-shadow;
    }

    .portfolio-body .project-card::after {
      inset: 1px;
      border-radius: 19px;
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.16), transparent 32%),
        linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.18) 100%),
        repeating-linear-gradient(135deg, transparent 0 18px, color-mix(in srgb, var(--home-grid) 30%, transparent) 19px 20px);
      opacity: 0.78;
    }

    .portfolio-body .project-card::before {
      inset: 0 18px auto;
      height: 1px;
      background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 62%, var(--border)), color-mix(in srgb, var(--home-sheen) 42%, transparent), transparent);
      opacity: 0.5;
    }

    .portfolio-body .project-card:hover {
      transform: translateY(-9px);
      border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
      outline-color: color-mix(in srgb, var(--accent) 18%, transparent);
      box-shadow: var(--home-card-shadow-hover);
      background:
        linear-gradient(180deg, color-mix(in srgb, var(--home-card-sheen) 72%, var(--accent) 8%), transparent 24%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.13), transparent 31%),
        linear-gradient(225deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 44%),
        var(--home-card-bg);
    }

    .portfolio-body .project-card:hover::before {
      opacity: 0.96;
    }

    .portfolio-body .project-card:hover::after {
      opacity: 0.92;
    }

    .portfolio-body .project-card h3 {
      font-size: clamp(var(--text-2xl), 1.75rem, var(--text-3xl));
      line-height: 1.12;
      letter-spacing: 0;
    }

    .portfolio-body .project-card p {
      color: color-mix(in srgb, var(--text) 72%, var(--muted));
      line-height: 1.64;
    }

    .portfolio-body .project-card > .pill {
      border-color: color-mix(in srgb, var(--border) 72%, transparent);
      background: color-mix(in srgb, var(--panel) 52%, transparent);
      color: color-mix(in srgb, var(--text) 78%, var(--muted));
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset;
    }

    .portfolio-body .project-actions {
      gap: var(--space-3);
    }

    .portfolio-body .project-card .button-link,
    .portfolio-body .project-card button {
      min-height: 46px;
      border-radius: var(--radius-full);
      border-color: color-mix(in srgb, var(--border) 78%, transparent);
      background: color-mix(in srgb, var(--panel) 44%, transparent);
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.09) inset;
      transition: transform var(--transition-premium), background var(--transition-premium), border-color var(--transition-premium), box-shadow var(--transition-premium);
    }

    .portfolio-body .project-card .button-link.primary,
    .portfolio-body .project-card button.primary {
      color: #06110f;
      border-color: color-mix(in srgb, var(--accent) 62%, var(--border));
      background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 96%, #ffffff), color-mix(in srgb, var(--accent) 72%, #8ea19a));
      box-shadow: 0 16px 38px color-mix(in srgb, var(--accent) 18%, transparent), 0 1px 0 rgba(255, 255, 255, 0.24) inset;
    }

    .portfolio-body .project-card .button-link:hover,
    .portfolio-body .project-card button:hover {
      transform: translateY(-2px);
      border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
      box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22), 0 1px 0 rgba(255, 255, 255, 0.12) inset;
    }

    .experience-details {
      background: color-mix(in srgb, var(--panel) 92%, transparent);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 18px;
    }

    .experience-details summary {
      cursor: pointer;
      font-size: 20px;
      font-weight: bold;
    }

    .exp-list {
      display: flex;
      flex-direction: column;
      gap: 14px;
      margin-top: 12px;
    }

    .exp-entry,
    .exp-education {
      display: grid;
      grid-template-columns: 105px 1fr;
      gap: 14px;
      align-items: start;
    }

    .exp-period {
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--accent);
      padding-top: 2px;
      white-space: nowrap;
    }

    .exp-details {
      min-width: 0;
    }

    .exp-title {
      font-weight: 600;
      line-height: 1.3;
    }

    .exp-org {
      font-size: 0.9rem;
      color: var(--muted);
      margin-bottom: 4px;
    }

    .exp-details p {
      font-size: 0.9rem;
      color: var(--text);
      margin: 4px 0 0;
      line-height: 1.45;
    }

    .exp-education {
      margin-top: 16px;
      padding-top: 12px;
      border-top: 1px solid var(--border);
    }

    .workstation-section .section-title {
      align-items: flex-end;
    }

    .workstation-section .section-title .muted {
      max-width: 520px;
    }

    .workstation-shell {
      display: grid;
      grid-template-columns: minmax(320px, 0.95fr) minmax(320px, 0.85fr);
      grid-template-areas:
        "visual info"
        "visual list";
      gap: 16px;
      align-items: stretch;
    }

    .workstation-loading {
      grid-column: 1 / -1;
      padding: 24px;
      border: 1px solid var(--border);
      border-radius: 18px;
      background: color-mix(in srgb, var(--panel) 92%, transparent);
      color: var(--muted);
    }

    .workstation-visual,
    .workstation-info,
    .workstation-list {
      background: color-mix(in srgb, var(--panel) 92%, transparent);
      border: 1px solid var(--border);
      border-radius: 18px;
      box-shadow: var(--shadow-soft);
    }

    .workstation-visual {
      grid-area: visual;
      min-height: 500px;
      padding: 26px;
      display: grid;
      place-items: center;
      overflow: hidden;
    }

    .pc-frame {
      position: relative;
      width: min(100%, 460px);
      aspect-ratio: 0.78;
      border: 1px solid rgba(148, 163, 184, 0.45);
      border-radius: 26px;
      background:
        linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.98)),
        radial-gradient(circle at 70% 20%, rgba(79, 183, 164, 0.14), transparent 34%);
      box-shadow:
        inset 0 0 0 10px rgba(15, 23, 42, 0.72),
        0 30px 70px rgba(0,0,0,0.35);
    }

    .pc-frame::before {
      content: "";
      position: absolute;
      inset: 9%;
      border: 1px solid rgba(51, 65, 85, 0.9);
      border-radius: 18px;
      background:
        linear-gradient(90deg, transparent 48%, rgba(51, 65, 85, 0.65) 49%, rgba(51, 65, 85, 0.65) 51%, transparent 52%),
        linear-gradient(180deg, rgba(30, 41, 59, 0.45), rgba(2, 6, 23, 0.24));
    }

    .pc-frame::after {
      content: "";
      position: absolute;
      right: 8%;
      top: 18%;
      width: 5px;
      height: 64%;
      border-radius: 999px;
      background: linear-gradient(180deg, var(--accent), var(--accent-2));
      opacity: 0.9;
      box-shadow: 0 0 24px rgba(79, 183, 164, 0.24);
    }

    .pc-glow {
      position: absolute;
      left: 20%;
      top: 18%;
      width: 44%;
      height: 58%;
      border-radius: 20px;
      background:
        radial-gradient(circle at 50% 26%, rgba(79, 183, 164, 0.14), transparent 32%),
        linear-gradient(180deg, rgba(31, 41, 55, 0.9), rgba(15, 23, 42, 0.68));
      border: 1px solid rgba(51, 65, 85, 0.8);
    }

    .pc-label {
      position: absolute;
      left: 12%;
      top: 5%;
      color: rgba(229, 231, 235, 0.48);
      font-size: 11px;
      font-weight: bold;
      letter-spacing: 0.16em;
    }

    .pc-hotspot {
      position: absolute;
      z-index: 2;
      display: grid;
      place-items: center;
      padding: 0;
      min-height: 0;
      border-radius: 8px;
      border: 1px solid rgba(148, 163, 184, 0.38);
      background: rgba(2, 6, 23, 0.68);
      color: var(--muted);
      transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
    }

    .pc-hotspot span {
      font-size: 10px;
      font-weight: bold;
      pointer-events: none;
      white-space: nowrap;
    }

    .pc-hotspot:hover,
    .pc-hotspot.active {
      transform: translateY(-1px);
      border-color: var(--accent);
      background: rgba(79, 183, 164, 0.14);
      color: var(--text);
      box-shadow: 0 0 0 2px rgba(31, 122, 104, 0.12), 0 0 22px rgba(31, 122, 104, 0.14);
    }

    .pc-hotspot-system {
      background: transparent;
      border-style: dashed;
      color: rgba(229, 231, 235, 0.7);
      z-index: 1;
    }

    .pc-hotspot:not(.pc-hotspot-system) {
      z-index: 3;
    }

    .workstation-info {
      grid-area: info;
      padding: 18px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .workstation-info h3 {
      margin: 4px 0 0;
      font-size: 24px;
    }

    .workstation-info p {
      margin: 0;
      line-height: 1.45;
    }

    .workstation-purpose {
      padding: 14px;
      border: 1px solid rgba(31, 122, 104, 0.20);
      border-radius: 14px;
      background: rgba(31, 122, 104, 0.08);
    }

    .workstation-detail-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      padding: 0;
      margin: 0;
      list-style: none;
    }

    .workstation-detail-list li {
      padding: 8px 10px;
      border: 1px solid rgba(148, 163, 184, 0.22);
      border-radius: 10px;
      background: rgba(2, 6, 23, 0.56);
      color: var(--text);
      font-size: 13px;
      line-height: 1.3;
    }

    .storage-meter {
      display: grid;
      gap: 8px;
      margin-top: 10px;
    }

    .storage-meter-top {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 10px;
      align-items: center;
      color: var(--muted);
      font-size: 12px;
    }

    .storage-meter-top strong {
      color: var(--text);
      font-size: 18px;
    }

    .storage-meter-top span:last-child {
      text-align: right;
    }

    .storage-track {
      height: 12px;
      overflow: hidden;
      border: 1px solid rgba(148, 163, 184, 0.26);
      border-radius: 999px;
      background: rgba(2, 6, 23, 0.82);
    }

    .storage-track span {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--accent), var(--accent-2));
    }

    .workstation-purpose span {
      display: block;
      color: var(--muted);
      font-size: 12px;
      margin-bottom: 6px;
    }

    .workstation-purpose strong {
      display: block;
      line-height: 1.35;
    }

    .workstation-list {
      grid-area: list;
      padding: 14px;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .component-chip {
      text-align: left;
      border-radius: 12px;
      background: var(--panel);
      min-height: 70px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .component-chip span {
      color: var(--accent);
      font-size: 12px;
      font-weight: bold;
    }

    .component-chip strong {
      font-size: 13px;
      line-height: 1.25;
    }

    .component-chip.active {
      border-color: var(--accent);
      box-shadow: 0 0 0 2px rgba(31, 122, 104, 0.12);
    }

    .admin-login-card {
      max-width: 520px;
      margin: 0 auto;
    }

    .pt-sales-hero {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.9fr);
      gap: 18px;
      align-items: stretch;
      margin-bottom: 18px;
    }

    .pt-sales-copy,
    .pt-founder-card {
      border: 1px solid var(--border);
      border-radius: 18px;
      background: var(--panel);
      padding: 18px;
      box-shadow: var(--shadow-soft);
    }

    .pt-sales-copy h2 {
      margin: 6px 0 12px;
      font-size: clamp(32px, 5vw, 58px);
      line-height: 1;
    }

    .pt-founder-card {
      display: grid;
      grid-template-columns: 130px 1fr;
      gap: 14px;
      align-items: center;
    }

    .pt-founder-card img {
      width: 100%;
      aspect-ratio: 4 / 5;
      object-fit: cover;
      object-position: center top;
      border-radius: 16px;
      border: 1px solid var(--border);
    }

    .pt-login-grid {
      align-items: stretch;
    }

    .customer-login-form {
      margin-bottom: 0;
    }

    .demo-login-row {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin: 8px 0 12px;
    }

    .form-error {
      min-height: 20px;
      color: #fca5a5;
      margin: 4px 0 10px;
      font-size: 13px;
    }

    .form-success {
      min-height: 20px;
      color: #86efac;
      margin: 4px 0 10px;
      font-size: 13px;
    }

    .booking-request-card {
      margin-top: 14px;
    }

    .timeline {
      display: grid;
      gap: 12px;
    }

    .timeline-item {
      display: grid;
      grid-template-columns: 120px 1fr;
      gap: 14px;
      padding: 16px;
      border: 1px solid var(--border);
      border-radius: 16px;
      background: var(--panel);
    }

    .timeline-item span {
      color: var(--accent);
      font-weight: bold;
    }

    .timeline-item h3,
    .timeline-item p {
      margin: 0 0 8px;
    }

    .project-hero {
      margin-bottom: 18px;
    }

    main {
      display: grid;
      grid-template-columns: 280px 1fr;
      gap: 18px;
      padding: 18px;
      max-width: 1450px;
      margin: 0 auto;
    }

    .customer-main {
      display: block;
      max-width: 1120px;
    }

    .customer-main.is-customer-shell {
      max-width: none;
      width: 100%;
    }

    .customer-main.is-customer-shell .panel {
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
      margin-bottom: 0;
    }

    .customer-main.is-calendar-view #clientView {
      min-height: calc(100vh - 160px);
    }

    .start-main {
      display: block;
      max-width: 1000px;
      padding-top: 28px;
    }

    .start-panel {
      display: grid;
      gap: 22px;
    }

    .start-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
    }

    .start-card {
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-height: 190px;
      padding: 18px;
      border: 1px solid var(--border);
      border-radius: 16px;
      background: var(--panel);
      color: var(--text);
      text-decoration: none;
    }

    .start-card:hover {
      border-color: var(--accent);
      box-shadow: 0 0 0 2px rgba(31, 122, 104, 0.12);
    }

    .start-card span,
    .eyebrow {
      color: var(--accent);
      font-size: 13px;
      font-weight: bold;
      text-transform: uppercase;
      letter-spacing: 0;
      margin: 0;
    }

    .start-card strong {
      font-size: 24px;
    }

    .start-card p {
      margin: 0;
      color: var(--text);
      line-height: 1.35;
    }

    .start-card small {
      margin-top: auto;
      color: var(--muted);
    }

    .customer-main .panel {
      margin-bottom: 18px;
    }

    .customer-tabs {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 8px;
      margin-bottom: 18px;
      position: sticky;
      top: 0;
      z-index: 5;
      padding: 8px 0;
      background: color-mix(in srgb, var(--bg) 92%, transparent);
      backdrop-filter: blur(14px);
    }

    .customer-calendar-shell {
      display: grid;
      grid-template-columns: 248px minmax(0, 1fr);
      gap: 0;
      min-height: calc(100vh - 180px);
      border: 1px solid var(--border);
      border-radius: 16px;
      overflow: hidden;
      background: var(--panel);
      box-shadow: var(--shadow-soft);
    }

    .customer-calendar-sidebar {
      border-right: 1px solid var(--border);
      background: var(--panel);
      padding: 16px 0 12px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      min-height: 100%;
    }

    .customer-sidebar-profile {
      display: flex;
      gap: 12px;
      align-items: center;
      padding: 0 16px;
    }

    .customer-sidebar-avatar {
      width: 48px;
      height: 48px;
      border-radius: 999px;
      object-fit: cover;
      border: 2px solid color-mix(in srgb, var(--accent) 25%, var(--border));
      flex-shrink: 0;
    }

    .customer-sidebar-profile strong {
      display: block;
      font-size: 15px;
      line-height: 1.25;
    }

    .customer-sidebar-profile p {
      margin: 4px 0 0;
      font-size: 12px;
      line-height: 1.35;
    }

    .customer-sidebar-photo {
      margin: 0 16px;
      font-size: 12px;
      color: var(--muted);
      cursor: pointer;
    }

    .customer-sidebar-photo input {
      display: none;
    }

    .customer-sidebar-coach {
      margin: 0 12px;
      padding: 12px;
      border-radius: 12px;
      background: color-mix(in srgb, var(--accent) 8%, var(--panel-2));
      border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
    }

    .customer-sidebar-coach span {
      display: block;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--accent);
      margin-bottom: 6px;
    }

    .customer-sidebar-coach p {
      margin: 0;
      font-size: 12px;
      line-height: 1.4;
      color: var(--text);
    }

    .sidebar-logout {
      margin: auto 12px 0;
      width: calc(100% - 24px);
      border-radius: 12px;
      font-size: 13px;
      background: var(--panel-2);
    }

    .customer-page-main {
      padding: 18px;
      overflow: auto;
    }

    .customer-page-header {
      margin-bottom: 16px;
    }

    .customer-page-header h2 {
      margin: 0 0 6px;
    }

    .customer-page-header p {
      margin: 0;
    }

    .gcal-toolbar-title .eyebrow {
      margin-bottom: 4px;
    }

    .customer-header-nav {
      display: none;
    }

    .customer-sidebar-nav {
      display: flex;
      flex-direction: column;
      gap: 2px;
      padding: 0 8px;
    }

    .customer-sidebar-nav .sidebar-tab {
      border: 0;
      border-radius: 0 24px 24px 0;
      background: transparent;
      text-align: left;
      padding: 12px 18px;
      min-height: 44px;
      font-weight: 600;
      transform: none;
    }

    .customer-sidebar-nav .sidebar-tab:hover {
      background: color-mix(in srgb, var(--accent) 8%, transparent);
      border-color: transparent;
      transform: none;
    }

    .customer-sidebar-nav .sidebar-tab.active {
      background: color-mix(in srgb, var(--accent) 14%, var(--panel));
      color: var(--accent);
      box-shadow: none;
    }

    .customer-sidebar-nav .sidebar-tab.sidebar-action {
      margin-top: 8px;
      border: 1px dashed color-mix(in srgb, var(--accent) 35%, var(--border));
      background: color-mix(in srgb, var(--accent) 5%, var(--panel));
    }

    .customer-sidebar-nav .sidebar-tab.sidebar-action:hover {
      border-color: var(--accent);
      background: color-mix(in srgb, var(--accent) 10%, var(--panel));
    }

    .customer-calendar-main {
      min-width: 0;
      display: flex;
      flex-direction: column;
      background: var(--bg);
    }

    .gcal-app {
      display: flex;
      flex-direction: column;
      min-height: calc(100vh - 180px);
    }

    .gcal-toolbar {
      display: grid;
      grid-template-columns: minmax(200px, 1fr) auto minmax(200px, 1fr);
      align-items: center;
      gap: 12px;
      padding: 14px 18px;
      border-bottom: 1px solid var(--border);
      background: var(--panel);
      position: sticky;
      top: 0;
      z-index: 4;
    }

    .gcal-toolbar-nav {
      display: flex;
      align-items: center;
      gap: 6px;
      justify-self: start;
    }

    .gcal-toolbar-title {
      justify-self: center;
      text-align: center;
    }

    .gcal-toolbar-spacer {
      justify-self: end;
      min-height: 1px;
    }

    .gcal-nav-btn {
      min-width: 40px;
      min-height: 40px;
      padding: 0 12px;
      border-radius: 999px;
      font-size: 18px;
      line-height: 1;
    }

    .gcal-today-btn {
      font-size: 14px;
      font-weight: 600;
      min-width: auto;
    }

    .gcal-toolbar-title h2 {
      margin: 0;
      font-size: 22px;
    }

    .gcal-toolbar-title p {
      margin: 2px 0 0;
      font-size: 13px;
    }

    .gcal-toolbar-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .gcal-toolbar-actions button {
      min-height: 40px;
      font-size: 13px;
      padding: 8px 14px;
    }

    .gcal-board {
      flex: 1;
      min-height: 0;
      background: var(--panel);
    }

    .gcal-board-scroll {
      overflow: auto;
      max-height: calc(100vh - 320px);
    }

    .gcal-header-row {
      display: grid;
      grid-template-columns: repeat(7, minmax(120px, 1fr));
      min-width: 900px;
      position: sticky;
      top: 0;
      z-index: 3;
      background: var(--panel);
      border-bottom: 1px solid var(--border);
    }

    .gcal-day-header {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      padding: 10px 6px;
      border: 0;
      border-right: 1px solid var(--border);
      background: transparent;
      cursor: pointer;
      min-height: 58px;
    }

    .gcal-day-header:last-child {
      border-right: 0;
    }

    .gcal-dow {
      font-size: 11px;
      font-weight: 700;
      color: var(--muted);
      letter-spacing: 0.04em;
    }

    .gcal-dom {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      font-size: 18px;
      font-weight: 700;
      line-height: 1;
    }

    .gcal-day-header.is-today .gcal-dom {
      background: var(--accent);
      color: #fff;
    }

    .gcal-day-header.is-selected {
      background: color-mix(in srgb, var(--accent) 8%, transparent);
    }

    .gcal-list-board {
      display: grid;
      grid-template-columns: repeat(7, minmax(120px, 1fr));
      min-width: 900px;
      align-items: start;
    }

    .gcal-day-list {
      border-right: 1px solid var(--border);
      padding: 8px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      min-height: 220px;
      background: var(--panel);
      cursor: pointer;
    }

    .gcal-day-list:last-child {
      border-right: 0;
    }

    .gcal-day-list.is-selected {
      background: color-mix(in srgb, var(--accent) 5%, var(--panel));
    }

    .gcal-list-item {
      width: 100%;
      text-align: left;
      border: 0;
      border-radius: 10px;
      padding: 8px 10px;
      display: flex;
      flex-direction: column;
      gap: 3px;
      min-height: 0;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1);
      transform: none;
    }

    .gcal-list-item:hover {
      transform: translateY(-1px);
      filter: brightness(0.98);
    }

    .gcal-list-item strong {
      font-size: 12px;
      line-height: 1.25;
    }

    .gcal-list-time {
      font-size: 11px;
      font-weight: 700;
      opacity: 0.92;
      letter-spacing: 0.02em;
    }

    .gcal-list-meta {
      font-size: 11px;
      line-height: 1.3;
      opacity: 0.9;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .gcal-list-checkin {
      background: var(--panel-2);
      color: var(--text);
      border: 1px solid var(--border);
    }

    .gcal-list-checkin.has-data {
      background: #ecfdf3;
      color: #166534;
      border: 1px solid #86efac;
    }

    .gcal-list-nutrition.is-high {
      background: #dbeafe;
      color: #1d4ed8;
    }

    .gcal-list-nutrition.is-low {
      background: #fef3c7;
      color: #92400e;
    }

    .gcal-list-nutrition.is-flex {
      background: #ede9fe;
      color: #5b21b6;
    }

    .gcal-list-training {
      background: #34a853;
      color: #fff;
    }

    .gcal-list-booking {
      background: #4285f4;
      color: #fff;
    }

    .gcal-list-customer {
      background: #fbbc04;
      color: #3b2f04;
      margin-top: auto;
    }

    .gcal-day-overview {
      margin: 12px 14px 14px;
      border-radius: 14px;
      padding: 16px;
    }

    .gcal-day-overview-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
    }

    .gcal-day-overview-header h3 {
      margin: 4px 0 0;
      font-size: 20px;
      line-height: 1.25;
    }

    .gcal-day-overview-header .muted {
      margin: 4px 0 0;
      font-size: 13px;
    }

    .gcal-overview-pill {
      flex-shrink: 0;
      border-radius: 999px;
      padding: 6px 12px;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }

    .gcal-overview-pill.is-high {
      background: #dbeafe;
      color: #1d4ed8;
    }

    .gcal-overview-pill.is-low {
      background: #fef3c7;
      color: #92400e;
    }

    .gcal-overview-pill.is-flex {
      background: #ede9fe;
      color: #5b21b6;
    }

    .gcal-day-overview-info {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 12px;
    }

    .gcal-info-card {
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--panel-2);
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      min-height: 0;
    }

    .gcal-info-card.has-data {
      border-color: #86efac;
      background: #ecfdf3;
    }

    .gcal-info-label {
      font-size: 11px;
      color: var(--muted);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }

    .gcal-info-card.has-data .gcal-info-label {
      color: #166534;
    }

    button.gcal-info-card-tap {
      width: 100%;
      text-align: left;
      cursor: pointer;
      font: inherit;
      color: inherit;
      transition: border-color 0.15s ease, background 0.15s ease;
    }

    button.gcal-info-card-tap:hover,
    button.gcal-info-card-tap:focus-visible {
      border-color: var(--accent);
      background: color-mix(in srgb, var(--accent) 6%, var(--panel-2));
      outline: none;
    }

    button.gcal-info-card-tap:active {
      transform: scale(0.99);
    }

    .gcal-info-value {
      margin: 0;
      font-size: 15px;
      font-weight: 700;
      line-height: 1.3;
    }

    .gcal-info-detail {
      margin: 0;
      font-size: 12px;
      line-height: 1.4;
      color: var(--muted);
    }

    .gcal-info-empty {
      margin: 0;
      font-size: 12px;
      color: var(--muted);
    }

    .gcal-info-list {
      margin: 0;
      padding-left: 16px;
      font-size: 12px;
      line-height: 1.45;
    }

    .gcal-info-list li {
      margin: 0 0 2px;
    }

    .gcal-day-overview-body {
      padding: 12px;
      border-radius: 12px;
      background: color-mix(in srgb, var(--panel-2) 65%, var(--panel));
      border: 1px solid var(--border);
      margin-bottom: 12px;
    }

    .gcal-selected-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 12px;
    }

    .gcal-bookings h4 {
      margin: 0 0 8px;
      font-size: 14px;
    }

    .panel {
      background: color-mix(in srgb, var(--panel) 92%, transparent);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 18px;
      box-shadow: var(--shadow-soft);
    }

    .client-list, .nav-tabs { display: flex; flex-direction: column; gap: 10px; }

    button, input, textarea, select {
      font: inherit;
      border-radius: 8px;
      border: 1px solid var(--border);
      padding: 10px 12px;
    }

    input, textarea, select {
      width: 100%;
      background: var(--panel);
      color: var(--text);
      margin: 6px 0 12px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
    }

    textarea { min-height: 90px; resize: vertical; }

    button {
      background: var(--panel-2);
      color: var(--text);
      cursor: pointer;
      border: 1px solid var(--border);
      min-height: 42px;
      transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
    }

    button:hover { border-color: var(--accent); transform: translateY(-1px); }

    .primary { background: var(--accent); color: #ffffff; font-weight: bold; border: none; }
    .success { background: var(--accent-2); color: #0f160c; font-weight: bold; border: none; }
    .warning { background: var(--warning); color: #1a1000; font-weight: bold; border: none; }
    .danger { background: #fff5f5; color: var(--danger); border-color: rgba(239, 68, 68, 0.35); }
    .danger.active { background: var(--danger); color: #ffffff; }

    .client-card, .tab-button { text-align: left; padding: 12px; background: var(--panel); }
    .client-card.active, .tab-button.active {
      border-color: var(--accent);
      box-shadow: 0 0 0 2px rgba(31, 122, 104, 0.12);
    }

    .top-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: wrap;
    }

    .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
    .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
    .macro-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }

    .calendar-shell {
      display: flex;
      flex-direction: column;
      gap: 18px;
      margin-top: 14px;
    }

    .calendar-week {
      border: 1px solid var(--border);
      border-radius: 16px;
      overflow: hidden;
      background: var(--panel);
    }

    .calendar-week-title {
      padding: 10px 12px;
      background: var(--panel-2);
      color: var(--text);
      font-weight: bold;
      border-bottom: 1px solid var(--border);
    }

    .calendar-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      min-height: 200px;
    }

    .calendar-day {
      min-height: 200px;
      text-align: left;
      background: var(--panel);
      border: 0;
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      gap: 0;
      border-radius: 0;
      padding: 0;
      overflow: hidden;
    }

    .calendar-day:last-child {
      border-right: 0;
    }

    .calendar-day-head {
      flex: 1;
      text-align: left;
      background: transparent;
      border: 0;
      padding: 10px 10px 6px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      cursor: pointer;
      font: inherit;
      color: inherit;
      width: 100%;
      min-height: 0;
    }

    .calendar-day-head span {
      color: var(--muted);
      font-size: 13px;
    }

    .calendar-day-head strong {
      line-height: 1.25;
    }

    .calendar-day-head small,
    .calendar-macros {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.25;
    }

    .calendar-day-actions {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 4px;
      padding: 0 6px 6px;
      margin-top: auto;
    }

    .calendar-day-chip {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      padding: 7px 4px;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: var(--panel-2);
      font-size: 10px;
      line-height: 1.15;
      cursor: pointer;
      min-height: 46px;
      transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
    }

    .calendar-day-chip .chip-label {
      font-weight: 600;
      text-align: center;
      word-break: break-word;
    }

    .calendar-day-chip:active {
      transform: scale(0.98);
    }

    .chip-checkin.has-data {
      border-color: #86efac;
      background: #ecfdf3;
      color: #166534;
    }

    .chip-nutrition {
      border-color: rgba(31, 122, 104, 0.28);
      background: rgba(31, 122, 104, 0.07);
      color: var(--text);
    }

    .chip-training.has-data {
      border-color: #93c5fd;
      background: #eff6ff;
      color: #1d4ed8;
    }

    .chip-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #22c55e;
      flex-shrink: 0;
    }

    .calendar-selected-card {
      margin-bottom: 14px;
    }

    .calendar-selected-actions {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin-bottom: 14px;
    }

    .calendar-action-btn {
      min-height: 44px;
      border-radius: 12px;
      font-weight: 600;
      font-size: 13px;
    }

    .calendar-modal-card-wide {
      width: min(560px, 100%);
    }

    .calendar-modal-metrics,
    .calendar-modal-overview {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 14px;
    }

    .calendar-macro-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .calendar-meal-list {
      display: grid;
      gap: 10px;
    }

    .calendar-meal-card .meal-check-head strong {
      display: block;
      margin-bottom: 4px;
    }

    .calendar-meal-card .meal-check-head p {
      margin: 0;
      line-height: 1.4;
    }

    .calendar-coach-comment {
      margin-bottom: 14px;
      padding: 14px;
      border-radius: 12px;
      border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
      background: color-mix(in srgb, var(--accent) 6%, var(--panel-2));
    }

    .calendar-coach-comment h4 {
      margin: 0 0 8px;
      font-size: 14px;
      color: var(--accent);
    }

    .calendar-coach-comment p {
      margin: 0 0 8px;
      line-height: 1.45;
    }

    .calendar-coach-comment p:last-child {
      margin-bottom: 0;
    }

    .calendar-coach-note {
      color: var(--muted);
      font-size: 13px;
    }

    .gcal-week-coach-note {
      margin: 0;
      border-radius: 0;
      border-left: 0;
      border-right: 0;
      border-top: 0;
    }

    .meal-saved-banner {
      margin: 8px 0;
      padding: 10px 12px;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: var(--panel-2);
      font-size: 13px;
      color: var(--muted);
    }

    .meal-saved-banner.is-success {
      border-color: #86efac;
      background: #ecfdf3;
      color: #166534;
      font-weight: 600;
    }

    .calendar-meal-card.is-pending {
      border-color: #d1d5db;
      background: #f3f4f6;
      color: #6b7280;
    }

    .calendar-meal-card.is-pending .meal-builder-slot-label,
    .calendar-meal-card.is-pending .meal-builder-title {
      color: #6b7280;
    }

    .calendar-meal-card.is-pending:not(.is-next) {
      opacity: 0.72;
    }

    .calendar-meal-card.is-pending.is-next {
      opacity: 1;
      border-color: #94a3b8;
      background: #f8fafc;
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #2563eb) 18%, transparent);
      color: var(--text);
    }

    .calendar-meal-card.is-pending.is-next .meal-builder-slot-label,
    .calendar-meal-card.is-pending.is-next .meal-builder-title {
      color: var(--text);
    }

    .meal-card-title-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 4px;
    }

    .meal-next-badge {
      display: inline-flex;
      align-items: center;
      padding: 4px 10px;
      border-radius: 999px;
      background: #e0e7ff;
      color: #3730a3;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.02em;
      text-transform: uppercase;
    }

    .meal-done-badge {
      display: inline-flex;
      align-items: center;
      padding: 4px 10px;
      border-radius: 999px;
      background: #dcfce7;
      color: #166534;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.02em;
      text-transform: uppercase;
    }

    .calendar-meal-card.is-declined {
      border-color: #fca5a5;
      background: linear-gradient(135deg, rgba(239, 68, 68, 0.04), rgba(239, 68, 68, 0.08));
      opacity: 1;
      color: var(--text);
    }

    .calendar-meal-card.is-comment-saved {
      border-color: #fca5a5;
      background: linear-gradient(135deg, rgba(239, 68, 68, 0.04), rgba(239, 68, 68, 0.08));
    }

    .calendar-meal-card.is-followed {
      border-color: #86efac;
      background: linear-gradient(135deg, rgba(34, 197, 94, 0.05), rgba(34, 197, 94, 0.1));
      opacity: 1;
      color: var(--text);
    }

    .calendar-meal-card.is-followed.is-collapsed,
    .calendar-exercise-card.is-declined.is-collapsed {
      padding: 0;
      border: none;
      background: transparent;
    }

    .training-calendar-specs {
      margin: 0 0 4px;
      font-size: 13px;
      font-weight: 700;
      color: var(--accent, #2563eb);
    }

    .calendar-exercise-card .meal-check-head {
      margin-bottom: 0;
    }

    .calendar-exercise-builder {
      display: grid;
      gap: 8px;
    }

    .calendar-set-log-list {
      margin: 8px 0 4px;
      display: grid;
      gap: 8px;
    }

    .calendar-set-log-head,
    .calendar-set-log-row {
      display: grid;
      grid-template-columns: 42px 1fr 1fr;
      gap: 8px;
      align-items: center;
    }

    .calendar-set-log-head {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      color: var(--muted);
    }

    .calendar-set-label {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border-radius: 999px;
      background: var(--panel-2);
      border: 1px solid var(--border);
      font-size: 13px;
      font-weight: 700;
      color: var(--text);
    }

    .calendar-set-log-row input {
      min-height: 44px;
      margin: 0;
      font-size: 16px;
    }

    .calendar-exercise-note {
      width: 100%;
      min-height: 72px;
      margin: 0;
      font-size: 16px;
      resize: vertical;
    }

    .calendar-exercise-card.is-next .calendar-set-log-row {
      border-color: color-mix(in srgb, var(--accent, #2563eb) 24%, var(--border));
    }

    @media (max-width: 520px) {
      .calendar-set-log-head {
        display: none;
      }

      .calendar-set-log-row {
        grid-template-columns: 36px 1fr 1fr;
        padding: 10px;
        border-radius: 12px;
        background: var(--panel-2);
        border: 1px solid var(--border);
      }

      .calendar-set-log-row input {
        min-height: 48px;
      }

      .calendar-exercise-card .meal-check-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
      }

      .calendar-exercise-card .meal-check-actions button {
        min-height: 48px;
        width: 100%;
      }
    }

    .meal-followed-dropdown {
      border: 1px solid #86efac;
      border-radius: 12px;
      background: linear-gradient(135deg, rgba(34, 197, 94, 0.05), rgba(34, 197, 94, 0.1));
      overflow: hidden;
    }

    .meal-followed-dropdown summary {
      cursor: pointer;
      padding: 12px 14px;
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }

    .meal-followed-dropdown summary::-webkit-details-marker {
      display: none;
    }

    .meal-followed-dropdown summary::before {
      content: "▸";
      display: inline-block;
      margin-right: 8px;
      color: #16a34a;
      font-size: 12px;
      transition: transform 0.15s ease;
      flex-shrink: 0;
    }

    .meal-followed-dropdown[open] summary::before {
      transform: rotate(90deg);
    }

    .meal-followed-summary-label {
      font-weight: 700;
      font-size: 14px;
      color: #166534;
      flex: 1 1 auto;
    }

    .meal-followed-summary-label::after {
      content: " ✓";
      color: #16a34a;
    }

    .meal-followed-summary-detail {
      font-size: 12px;
      color: #15803d;
      font-weight: 600;
      text-align: right;
      flex: 1 1 160px;
      line-height: 1.35;
    }

    .meal-followed-body {
      padding: 0 14px 14px;
      border-top: 1px solid #bbf7d0;
    }

    .meal-followed-body .meal-check-actions {
      margin-top: 12px;
    }

    :root[data-theme="dark"] .meal-followed-dropdown {
      border-color: #166534;
      background: linear-gradient(135deg, rgba(34, 197, 94, 0.08), rgba(34, 197, 94, 0.14));
    }

    :root[data-theme="dark"] .meal-followed-summary-label {
      color: #86efac;
    }

    :root[data-theme="dark"] .meal-followed-summary-detail {
      color: #4ade80;
    }

    :root[data-theme="dark"] .meal-followed-body {
      border-top-color: #166534;
    }

    .exercise-skipped-dropdown {
      border: 1px solid #fca5a5;
      border-radius: 12px;
      background: linear-gradient(135deg, rgba(239, 68, 68, 0.04), rgba(239, 68, 68, 0.08));
      overflow: hidden;
    }

    .exercise-skipped-dropdown summary {
      cursor: pointer;
      padding: 12px 14px;
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }

    .exercise-skipped-dropdown summary::-webkit-details-marker {
      display: none;
    }

    .exercise-skipped-dropdown summary::before {
      content: "▸";
      display: inline-block;
      margin-right: 8px;
      color: #dc2626;
      font-size: 12px;
      transition: transform 0.15s ease;
      flex-shrink: 0;
    }

    .exercise-skipped-dropdown[open] summary::before {
      transform: rotate(90deg);
    }

    .exercise-skipped-summary-label {
      font-weight: 700;
      font-size: 14px;
      color: #991b1b;
      flex: 1 1 auto;
    }

    .exercise-skipped-summary-label::after {
      content: " ✕";
      color: #dc2626;
    }

    .exercise-skipped-summary-detail {
      font-size: 12px;
      color: #b91c1c;
      font-weight: 600;
      text-align: right;
      flex: 1 1 160px;
      line-height: 1.35;
    }

    .exercise-skipped-body {
      padding: 0 14px 14px;
      border-top: 1px solid #fecaca;
    }

    .exercise-skipped-body .meal-check-actions {
      margin-top: 12px;
    }

    :root[data-theme="dark"] .exercise-skipped-dropdown {
      border-color: #991b1b;
      background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(239, 68, 68, 0.14));
    }

    :root[data-theme="dark"] .exercise-skipped-summary-label {
      color: #fca5a5;
    }

    :root[data-theme="dark"] .exercise-skipped-summary-detail {
      color: #f87171;
    }

    :root[data-theme="dark"] .exercise-skipped-body {
      border-top-color: #991b1b;
    }

    :root[data-theme="dark"] .calendar-meal-card.is-pending {
      border-color: #374151;
      background: #1f2937;
      color: #9ca3af;
    }

    :root[data-theme="dark"] .calendar-meal-card.is-pending.is-next {
      border-color: #4b5563;
      background: #111827;
      color: var(--text);
    }

    :root[data-theme="dark"] .meal-next-badge {
      background: #312e81;
      color: #c7d2fe;
    }

    .calendar-modal-metrics .metric strong,
    .calendar-modal-overview .metric strong {
      font-size: 18px;
    }

    .calendar-modal-section {
      margin-bottom: 14px;
    }

    .calendar-modal-section h4 {
      margin: 0 0 8px;
      font-size: 14px;
    }

    .calendar-event {
      margin-top: 4px;
      padding: 5px 7px;
      border-radius: 8px;
      background: rgba(31, 122, 104, 0.08);
      border: 1px solid rgba(31, 122, 104, 0.18);
      color: var(--text);
      font-size: 12px;
      line-height: 1.25;
    }

    .calendar-event.customer-owned {
      background: #ecfdf3;
      color: #166534;
      border: 1px solid #86efac;
    }

    .calendar-mode-info {
      margin-bottom: 12px;
    }

    .calendar-plan-text {
      white-space: pre-wrap;
      font-family: inherit;
      background: var(--panel-2);
      border-radius: 10px;
      padding: 10px 12px;
      margin: 8px 0 0;
    }

    .customer-activity-box {
      margin-top: 10px;
      padding: 12px;
      border-radius: 12px;
      border: 1px solid #86efac;
      background: #ecfdf3;
    }

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

    .calendar-modal {
      position: fixed;
      inset: 0;
      z-index: 1000;
      display: grid;
      place-items: center;
      padding: 20px;
    }

    .calendar-modal-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(15, 23, 42, 0.45);
    }

    .calendar-modal-card {
      position: relative;
      width: min(520px, 100%);
      max-height: 90vh;
      overflow: auto;
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: 18px;
      box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
    }

    .calendar-modal-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 12px;
    }

    .calendar-day.active {
      background: rgba(31, 122, 104, 0.08);
      box-shadow: inset 0 0 0 2px var(--accent);
    }

    .metric {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 14px;
    }

    .metric span { display: block; color: var(--muted); font-size: 13px; }
    .metric strong { font-size: 24px; }

    .metric-clickable {
      cursor: pointer;
      text-align: left;
      width: 100%;
      font: inherit;
      transition: border-color 0.15s ease, transform 0.15s ease;
    }

    .metric-clickable:hover {
      border-color: var(--accent, #2457d6);
      transform: translateY(-1px);
    }

    .checkin-field-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: end;
      margin-bottom: 10px;
    }

    .checkin-field-row button {
      margin-bottom: 0;
      white-space: nowrap;
    }

    .checkin-yesterday {
      margin: 4px 0 0;
      font-size: 12px;
    }

    .checkin-saved-banner {
      margin-bottom: 12px;
      padding: 10px 12px;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: var(--panel-2);
      font-size: 13px;
      color: var(--muted);
    }

    .checkin-saved-banner.is-success {
      border-color: #86efac;
      background: #ecfdf3;
      color: #166534;
      font-weight: 600;
    }

    .checkin-field-row button.is-saved,
    button.primary.is-saved {
      background: #166534;
      border-color: #166534;
      color: #fff;
    }

    .section-title {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: var(--space-8);
      margin-top: 0;
      margin-bottom: clamp(var(--space-6), 4vw, var(--space-10));
      flex-wrap: wrap;
    }

    .section-title h2,
    .section-title p {
      margin: 0;
    }

    .section-title h2 {
      font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
      line-height: var(--leading-tight);
      letter-spacing: var(--tracking-tight);
      font-weight: 800;
    }

    .section-title .muted {
      max-width: 34rem;
      line-height: 1.55;
    }

    .card {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 14px;
      margin-bottom: 12px;
    }

    .widget-board {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .today-hero {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(260px, 0.45fr);
      gap: 18px;
      align-items: stretch;
      margin-bottom: 12px;
    }

    .today-hero h2 {
      margin: 4px 0 10px;
      font-size: clamp(30px, 5vw, 54px);
      line-height: 1;
    }

    .today-coach-note {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 8px;
      padding: 16px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--panel-2);
    }

    .today-coach-note span {
      color: var(--muted);
      font-size: 12px;
      text-transform: uppercase;
      font-weight: 700;
    }

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

    .today-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
      gap: 12px;
      align-items: start;
    }

    .today-card {
      margin-bottom: 0;
    }

    .main-action-card,
    .chat-today-card {
      grid-column: span 2;
    }

    .compact-title {
      margin: 0 0 12px;
      align-items: center;
    }

    .compact-title h3,
    .compact-title p {
      margin: 0;
    }

    .today-list-row {
      padding: 10px 0;
      border-top: 1px solid var(--border);
    }

    .today-list-row:first-of-type {
      border-top: 0;
      padding-top: 0;
    }

    .today-list-row span,
    .today-list-row p {
      display: block;
      margin: 4px 0 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.35;
    }

    .meal-plan-lines {
      display: grid;
      gap: 8px;
    }

    .meal-plan-lines p {
      margin: 0;
      padding: 8px 0;
      border-top: 1px solid var(--border);
      line-height: 1.4;
    }

    .meal-plan-lines p:first-child {
      border-top: 0;
      padding-top: 0;
    }

    .nutrition-library-page {
      max-width: 1100px;
    }

    .nutrition-library-header {
      margin-bottom: 18px;
    }

    .nutrition-library-header h2 {
      margin: 0 0 6px;
    }

    .link-button {
      margin-top: 10px;
      padding: 0;
      border: 0;
      background: none;
      color: var(--accent, #2563eb);
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .nutrition-library-grid,
    .nutrition-schema-admin-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 14px;
    }

    .nutrition-library-card {
      border-top: 4px solid var(--border);
    }

    .nutrition-library-card.is-high {
      border-top-color: #3b82f6;
    }

    .nutrition-library-card.is-low {
      border-top-color: #f59e0b;
    }

    .nutrition-library-card.is-flex {
      border-top-color: #8b5cf6;
    }

    .nutrition-library-card-head h3 {
      margin: 4px 0 0;
    }

    .nutrition-library-when {
      margin: 0 0 12px;
      font-size: 14px;
    }

    .nutrition-library-macros {
      margin-bottom: 12px;
    }

    .nutrition-library-meals {
      display: grid;
      gap: 10px;
    }

    .nutrition-library-meal {
      padding: 10px 0;
      border-top: 1px solid var(--border);
    }

    .nutrition-library-meal strong {
      display: block;
      margin-bottom: 4px;
    }

    .nutrition-library-meal p {
      margin: 0;
      color: var(--muted);
      line-height: 1.45;
      font-size: 14px;
    }

    .nutrition-food-groups {
      display: grid;
      gap: 8px;
      margin-top: 6px;
    }

    .nutrition-food-group {
      display: grid;
      grid-template-columns: 88px 1fr;
      gap: 8px;
      align-items: start;
      font-size: 13px;
    }

    .nutrition-food-slot {
      font-weight: 700;
      color: var(--muted);
      text-transform: uppercase;
      font-size: 11px;
      letter-spacing: 0.03em;
      padding-top: 2px;
    }

    .nutrition-food-group ul {
      margin: 0;
      padding-left: 16px;
      color: var(--text);
      line-height: 1.4;
    }

    .meal-builder {
      margin-top: 8px;
      display: grid;
      gap: 10px;
    }

    .meal-builder-hint {
      margin: 0;
    }

    .meal-builder-title {
      display: block;
      font-size: 16px;
      margin-bottom: 4px;
    }

    .meal-builder-slot {
      display: grid;
      gap: 6px;
    }

    .meal-builder-slot-label {
      font-size: 13px;
      font-weight: 700;
      color: var(--text);
    }

    .meal-food-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .meal-food-chip {
      border: 1px solid var(--border);
      border-radius: 999px;
      background: var(--panel-2);
      color: var(--text);
      padding: 7px 12px;
      font-size: 13px;
      line-height: 1.3;
      cursor: pointer;
      transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }

    .meal-food-chip:hover:not(:disabled) {
      border-color: #93c5fd;
      background: #eff6ff;
    }

    .meal-food-chip.is-selected {
      border-color: #2563eb;
      background: #dbeafe;
      color: #1d4ed8;
      font-weight: 700;
    }

    .meal-food-chip:disabled {
      cursor: default;
      opacity: 0.85;
    }

    .meal-other-input {
      width: 100%;
      margin-top: 2px;
    }

    .meal-choice-summary {
      margin: 8px 0 0;
      font-size: 12px;
      color: var(--muted);
      line-height: 1.4;
    }

    .meal-choice-summary.is-saved {
      color: #166534;
      font-weight: 600;
    }

    .decline-reason-dropdown {
      margin-top: 10px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--panel-2);
      overflow: hidden;
    }

    .decline-reason-dropdown.is-saved {
      border-color: #fecaca;
      background: #fff7f7;
    }

    .decline-reason-dropdown summary {
      cursor: pointer;
      padding: 10px 12px;
      font-weight: 700;
      font-size: 13px;
      list-style: none;
    }

    .decline-reason-dropdown summary::-webkit-details-marker {
      display: none;
    }

    .decline-reason-dropdown summary::before {
      content: "▸ ";
      display: inline-block;
      transition: transform 0.15s ease;
    }

    .decline-reason-dropdown[open] summary::before {
      transform: rotate(90deg);
    }

    .decline-reason-dropdown .decline-reason-body {
      padding: 0 12px 12px;
      border-top: 1px solid var(--border);
    }

    .meal-log-admin-row p {
      margin: 4px 0 0;
    }

    .nutrition-library-coach {
      margin-top: 14px;
      padding: 12px;
      border-radius: 12px;
      background: var(--panel-2);
      border: 1px solid var(--border);
    }

    .nutrition-library-coach h4 {
      margin: 0 0 6px;
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      color: var(--muted);
    }

    .nutrition-library-coach p {
      margin: 0;
      line-height: 1.45;
    }

    .training-library-page {
      max-width: 1100px;
    }

    .training-library-header {
      margin-bottom: 18px;
    }

    .training-library-header h2 {
      margin: 0 0 6px;
    }

    .training-library-overview-coach {
      margin-bottom: 14px;
      padding: 14px;
      border-radius: 12px;
      border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
      background: color-mix(in srgb, var(--accent) 6%, var(--panel-2));
    }

    .training-library-overview-coach h4 {
      margin: 0 0 8px;
      font-size: 14px;
      color: var(--accent);
    }

    .training-library-overview-coach p {
      margin: 0;
      line-height: 1.45;
    }

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

    .training-library-card {
      border-top: 4px solid var(--border);
      overflow: hidden;
      padding: 0;
    }

    .training-library-card.is-back {
      border-top-color: #0ea5e9;
    }

    .training-library-card.is-chest {
      border-top-color: #ef4444;
    }

    .training-library-card.is-upper {
      border-top-color: #8b5cf6;
    }

    .training-library-card.is-default {
      border-top-color: #64748b;
    }

    .training-library-hero {
      height: 140px;
      overflow: hidden;
      background: #0f172a;
    }

    .training-library-hero img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 20%;
      display: block;
    }

    .training-library-card-head,
    .training-library-when,
    .training-library-exercises,
    .training-library-coach {
      padding-left: 14px;
      padding-right: 14px;
    }

    .training-library-card-head {
      padding-top: 14px;
    }

    .training-library-card-head h3 {
      margin: 4px 0 0;
    }

    .training-library-when {
      margin: 0 0 12px;
      font-size: 14px;
    }

    .training-library-exercises {
      display: grid;
      gap: 10px;
      padding-bottom: 12px;
    }

    .training-library-exercise {
      display: grid;
      grid-template-columns: 88px 1fr;
      gap: 10px;
      padding: 10px 0;
      border-top: 1px solid var(--border);
      align-items: start;
    }

    .training-library-exercise-media {
      width: 88px;
      height: 88px;
      border-radius: 10px;
      overflow: hidden;
      background: #0f172a;
      flex-shrink: 0;
    }

    .training-library-exercise-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .training-library-exercise-fallback {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 8px;
      text-align: center;
      font-size: 11px;
      color: #94a3b8;
      background: linear-gradient(135deg, #1e293b, #0f172a);
    }

    .training-library-exercise-body strong {
      display: block;
      margin-bottom: 4px;
      font-size: 15px;
    }

    .training-library-exercise-specs {
      margin: 0 0 4px;
      font-size: 13px;
      font-weight: 700;
      color: var(--accent, #2563eb);
    }

    .training-library-coach {
      margin: 0 14px 14px;
      padding: 12px;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: var(--panel-2);
    }

    .training-library-coach h4 {
      margin: 0 0 8px;
      font-size: 13px;
      color: var(--accent);
    }

    .training-library-coach p {
      margin: 0;
      line-height: 1.45;
      font-size: 14px;
    }

    .training-library-admin-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 14px;
      margin: 14px 0;
    }

    .training-admin-split-card {
      border-top: 4px solid var(--border);
    }

    .training-admin-split-card.is-back { border-top-color: #0ea5e9; }
    .training-admin-split-card.is-chest { border-top-color: #ef4444; }
    .training-admin-split-card.is-upper { border-top-color: #8b5cf6; }

    .training-admin-hero-preview {
      width: 100%;
      height: 120px;
      object-fit: cover;
      border-radius: 10px;
      margin-bottom: 10px;
      display: block;
    }

    .training-admin-exercise-list {
      display: grid;
      gap: 10px;
      margin-top: 10px;
    }

    .training-admin-exercise {
      display: grid;
      grid-template-columns: 92px 1fr;
      gap: 12px;
      padding: 12px;
      background: var(--panel-2);
    }

    .training-admin-exercise-preview-wrap {
      width: 92px;
      height: 92px;
      border-radius: 10px;
      overflow: hidden;
      background: #0f172a;
    }

    .training-admin-exercise-preview {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .training-admin-exercise-preview.is-empty {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #94a3b8;
      font-size: 11px;
      text-align: center;
      padding: 8px;
    }

    .training-admin-exercise-fields {
      display: grid;
      gap: 8px;
    }

    .training-admin-image-row {
      display: grid;
      grid-template-columns: 1fr 180px;
      gap: 8px;
    }

    .training-admin-archive {
      margin-top: 18px;
      padding: 12px;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--panel-2);
    }

    .training-admin-archive summary {
      cursor: pointer;
      font-weight: 700;
      margin-bottom: 10px;
    }

    .nutrition-schema-admin-card.is-high {
      border-left: 4px solid #3b82f6;
    }

    .nutrition-schema-admin-card.is-low {
      border-left: 4px solid #f59e0b;
    }

    .nutrition-schema-admin-card.is-flex {
      border-left: 4px solid #8b5cf6;
    }

    .grid-4 {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }

    @media (max-width: 720px) {
      .grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    .section-toggle-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .section-toggle {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 8px 10px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: var(--panel-2);
      color: var(--text);
      font-size: 13px;
      cursor: pointer;
    }

    .section-toggle input {
      width: auto;
      margin: 0;
    }

    .customer-identity-row {
      align-items: center;
    }

    .customer-identity {
      display: flex;
      align-items: center;
      gap: 14px;
      min-width: 0;
    }

    .customer-avatar {
      width: 64px;
      height: 64px;
      border-radius: 999px;
      object-fit: cover;
      border: 1px solid var(--border);
      background: var(--panel-2);
      flex: 0 0 auto;
    }

    .customer-photo-upload {
      display: block;
      margin-top: 6px;
    }

    .customer-photo-upload input {
      display: block;
      max-width: 220px;
      margin-top: 5px;
      font-size: 12px;
    }

    .today-settings-card summary,
    .nutrition-settings-card summary {
      cursor: pointer;
      font-weight: 800;
      color: var(--text);
    }

    .today-settings-card[open] summary,
    .nutrition-settings-card[open] summary {
      margin-bottom: 8px;
    }

    .calendar-mode-card select {
      max-width: 260px;
    }

    .previous-exercise-note {
      display: grid;
      gap: 4px;
      margin: 10px 0;
      padding: 10px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--panel-2);
    }

    .previous-exercise-note span {
      color: var(--muted);
      font-size: 13px;
    }

    .playful-widgets .widget-card {
      animation: widget-pop 420ms ease both;
    }

    .widget-card {
      margin-bottom: 0;
      box-shadow: var(--shadow-subtle);
    }

    @keyframes widget-pop {
      from { opacity: 0; transform: translateY(10px) scale(0.985); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    .widget-title-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }

    .widget-title-row h3 {
      margin-top: 0;
    }

    .widget-actions,
    .widget-picker,
    .widget-add-row {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .widget-add-row {
      align-items: center;
      margin: 10px 0;
    }

    .widget-add-row select {
      flex: 1 1 190px;
      margin: 0;
    }

    .widget-actions button {
      padding: 7px 9px;
      font-size: 13px;
    }

    .client-list-item {
      border-top: 1px solid var(--border);
      padding-top: 12px;
      margin-top: 12px;
    }

    .client-list-item span {
      display: block;
      margin-top: 4px;
    }

    .meal-check-card {
      background: linear-gradient(135deg, rgba(31, 122, 104, 0.05), rgba(143, 163, 154, 0.08));
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 12px;
    }

    .meal-check-actions,
    .chat-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 10px;
    }

    .decline-reason {
      margin-top: 10px;
      padding: 10px;
      border-radius: 12px;
      border: 1px solid rgba(239, 68, 68, 0.24);
      background: rgba(239, 68, 68, 0.07);
    }

    .chat-thread {
      display: grid;
      gap: 8px;
      max-height: 260px;
      overflow: auto;
      padding-right: 2px;
    }

    #customerMessageText {
      min-height: 58px;
      margin-bottom: 8px;
    }

    .chat-message {
      padding: 10px;
      border-radius: 14px;
      background: var(--panel-2);
      border: 1px solid var(--border);
    }

    .chat-message.to-admin {
      background: rgba(31, 122, 104, 0.08);
      border-color: rgba(31, 122, 104, 0.20);
    }

    .chat-message.self-note {
      background: rgba(54, 199, 172, 0.10);
      border-color: rgba(54, 199, 172, 0.24);
    }

    .chat-message span {
      color: var(--muted);
      font-size: 12px;
    }

    .chat-message p {
      margin: 6px 0 0;
    }

    .appointment-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      border-top: 1px solid var(--border);
      padding-top: 12px;
      margin-top: 12px;
    }

    .appointment-row p {
      margin: 6px 0 0;
    }

    .exercise-guide-card {
      display: grid;
      grid-template-columns: 180px 1fr;
      gap: 16px;
      align-items: stretch;
    }

    .exercise-media-wrap {
      min-height: 160px;
    }

    .exercise-library-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }

    .exercise-library-card {
      display: grid;
      grid-template-columns: 170px 1fr;
      gap: 14px;
      align-items: stretch;
    }

    .exercise-image-placeholder {
      min-height: 140px;
      border: 1px dashed var(--border);
      border-radius: 12px;
      background: var(--panel-2);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      color: var(--muted);
      text-align: center;
      padding: 12px;
    }

    .exercise-media {
      width: 100%;
      min-height: 160px;
      max-height: 260px;
      object-fit: cover;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--panel-2);
    }

    .exercise-admin-preview {
      max-width: 220px;
      margin-bottom: 12px;
    }

    .set-log-list {
      display: grid;
      gap: 8px;
      margin: 12px 0;
    }

    .set-log-row {
      display: grid;
      grid-template-columns: 64px 1fr 1fr 1fr;
      gap: 8px;
      align-items: center;
    }

    .comparison-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }

    .comparison-metric small {
      display: block;
      color: var(--muted);
      margin-top: 4px;
    }

    .exercise-group-section {
      margin-top: 18px;
    }

    .set-log-row span {
      color: var(--muted);
      font-size: 13px;
    }

    .set-log-row input {
      margin: 0;
    }

    .appointment-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .calendar-event.pending {
      background: rgba(245, 158, 11, 0.18);
      border-color: rgba(245, 158, 11, 0.45);
    }

    .calendar-event.rejected {
      background: rgba(239, 68, 68, 0.16);
      border-color: rgba(239, 68, 68, 0.42);
    }

    .exercise-row, .data-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
    }

    .food-row {
      display: grid;
      grid-template-columns: 1.4fr repeat(6, 0.7fr);
      gap: 10px;
    }

    .slv-result {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 10px 0;
      border-top: 1px solid var(--border);
    }

    .muted { color: var(--muted); }
    .small { font-size: 13px; }

    .video-box { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 10px;
      overflow: hidden;
      border-radius: 12px;
    }

    th, td {
      border-bottom: 1px solid var(--border);
      padding: 10px;
      text-align: left;
      font-size: 14px;
      vertical-align: top;
    }

    th { color: var(--muted); font-weight: normal; }

    .table-input {
      min-width: 90px;
      margin: 0;
      padding: 7px 8px;
      border-radius: 8px;
      font-size: 13px;
    }

    .table-comment {
      min-width: 220px;
    }

    .pill {
      display: inline-block;
      padding: 6px 10px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--panel) 62%, transparent);
      border: 1px solid color-mix(in srgb, var(--border) 64%, transparent);
      font-size: var(--text-xs);
      line-height: 1.1;
      font-weight: 700;
      color: var(--muted);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.30);
    }

    .pill--accent {
      background: color-mix(in srgb, var(--accent) 9%, var(--panel));
      border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
      color: var(--accent);
    }

    .pill--new {
      background: color-mix(in srgb, var(--warning) 9%, var(--panel));
      border-color: color-mix(in srgb, var(--warning) 24%, var(--border));
      color: var(--warning);
    }

    .diff-positive { color: #86efac; }
    .diff-negative { color: #fca5a5; }

    .datasheet-card h3 { margin-top: 0; }

    .datasheet-card,
    .datasheet-card *,
    .admin-main-panel,
    .admin-tools-panel {
      min-width: 0;
    }

    .datasheet-field-grid {
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
      margin-bottom: 10px;
    }

    .datasheet-actions {
      margin: 4px 0 12px;
    }

    .datasheet-quick-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
      gap: 10px 12px;
      margin-top: 10px;
    }

    .datasheet-quick-span-2 {
      grid-column: span 2;
    }

    .datasheet-quick-action {
      display: flex;
      align-items: flex-end;
    }

    .datasheet-quick-action button {
      width: 100%;
    }

    .datasheet-history-toolbar {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 10px;
    }

    .datasheet-history-toolbar h3 {
      margin: 0 0 4px;
    }

    .datasheet-search {
      min-width: 220px;
      max-width: 300px;
      margin: 0;
    }

    .datasheet-table-wrap {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--panel-2);
      max-width: 100%;
    }

    .datasheet-table {
      width: 100%;
      min-width: 1080px;
      margin-top: 0;
      border-radius: 0;
    }

    .datasheet-table thead th {
      position: sticky;
      z-index: 2;
      background: var(--panel);
      box-shadow: inset 0 -1px 0 var(--border);
    }

    .datasheet-table thead tr.datasheet-group-row th {
      top: 0;
      font-size: 11px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      padding-top: 8px;
      padding-bottom: 6px;
    }

    .datasheet-table thead tr.datasheet-subhead th {
      top: 31px;
      font-size: 12px;
      color: var(--muted);
      padding-top: 6px;
      padding-bottom: 8px;
    }

    .datasheet-col-group {
      text-align: center;
      border-left: 1px solid var(--border);
    }

    .datasheet-col-group--body { background: rgba(59, 130, 246, 0.08); }
    .datasheet-col-group--kcal { background: rgba(34, 197, 94, 0.08); }
    .datasheet-col-group--protein { background: rgba(168, 85, 247, 0.08); }
    .datasheet-col-group--steps { background: rgba(14, 165, 233, 0.08); }
    .datasheet-col-group--other { background: rgba(148, 163, 184, 0.08); }

    .datasheet-table tbody tr:nth-child(even) {
      background: rgba(255, 255, 255, 0.02);
    }

    .datasheet-table tbody tr:hover {
      background: rgba(255, 255, 255, 0.04);
    }

    .datasheet-group-start {
      border-left: 1px solid rgba(148, 163, 184, 0.22);
    }

    .datasheet-cell-week {
      text-align: center;
      white-space: nowrap;
    }

    .datasheet-week-pill {
      min-width: 34px;
      text-align: center;
      font-size: 11px;
      padding: 3px 7px;
    }

    .datasheet-diff {
      font-size: 12px;
      font-weight: 600;
      text-align: center;
      white-space: nowrap;
      min-width: 42px;
      padding-left: 6px;
      padding-right: 6px;
    }

    .datasheet-cell-action {
      text-align: right;
      white-space: nowrap;
    }

    .table-input--compact {
      min-width: 58px;
      max-width: 76px;
      padding: 6px 7px;
    }

    .table-input--date {
      min-width: 126px;
      max-width: 140px;
    }

    .datasheet-empty,
    .datasheet-filter-empty {
      padding: 18px 8px;
      text-align: center;
    }

    .chart-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
      margin-top: 14px;
    }

    .chart-card {
      height: 310px;
      position: relative;
      overflow: hidden;
    }

    .chart-card h3 { margin-top: 0; }

    .chart-card canvas {
      display: block;
      width: 100%;
      height: 240px !important;
      max-height: 240px;
    }

    .stats-week-snapshot {
      padding: 0;
      overflow: hidden;
      border: 2px solid var(--border);
    }

    .stats-week-snapshot-head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 12px;
      flex-wrap: wrap;
      padding: 14px 16px;
      border-bottom: 1px solid var(--border);
      background: var(--panel-2);
    }

    .stats-week-snapshot-head h3 {
      margin: 0;
      font-size: 20px;
      font-weight: 800;
    }

    .stats-week-snapshot-week {
      margin: 0;
      font-size: 14px;
      font-weight: 700;
      color: var(--accent);
    }

    .stats-week-snapshot-metrics {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0;
      border-bottom: 1px solid var(--border);
    }

    .stats-week-snapshot-item {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 12px;
      padding: 12px 16px;
      border-bottom: 1px solid var(--border);
      font-size: 14px;
    }

    .stats-week-snapshot-item:nth-last-child(-n+2) {
      border-bottom: none;
    }

    .stats-week-snapshot-item span {
      color: var(--muted);
      font-weight: 600;
    }

    .stats-week-snapshot-item strong {
      font-size: 15px;
      text-align: right;
    }

    .stats-week-snapshot-nav {
      display: flex;
      align-items: stretch;
      gap: 0;
      padding: 0;
    }

    .stats-week-snapshot-nav .stats-week-sheet-nav {
      flex: 1 1 auto;
      border-top: 0;
    }

    .stats-charts-section {
      margin-top: 14px;
    }

    .stats-charts-section summary {
      cursor: pointer;
      font-weight: 800;
      font-size: 16px;
      padding: 4px 0;
    }

    .stats-week-sheet {
      padding: 0;
      overflow: hidden;
      border: 2px solid var(--border);
    }

    .stats-week-sheet-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 10px 12px;
      border-bottom: 1px solid var(--border);
      background: var(--panel-2);
    }

    .stats-week-arrow {
      flex: 0 0 auto;
      width: 40px;
      height: 40px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--panel);
      color: var(--text);
      font-size: 24px;
      line-height: 1;
      font-weight: 700;
      cursor: pointer;
    }

    .stats-week-arrow:disabled {
      opacity: 0.35;
      cursor: not-allowed;
    }

    .stats-week-sheet-title {
      flex: 1 1 auto;
      text-align: center;
      font-size: 20px;
      font-weight: 800;
    }

    .stats-week-window-note {
      margin: 0;
      padding: 12px 16px 0;
    }

    .stats-metric-charts-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      padding: 12px 16px 16px;
    }

    .stats-metric-chart-card {
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--panel);
      padding: 12px;
      min-height: 220px;
    }

    .stats-metric-chart-card h4 {
      margin: 0 0 8px;
      font-size: 13px;
      font-weight: 700;
      color: var(--muted, #9ca3af);
    }

    .stats-metric-chart-card canvas {
      height: 160px !important;
      max-height: 160px;
    }

    #adminApp.is-customer-preview {
      max-width: none;
    }

    #adminApp.is-customer-preview .admin-main-panel {
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
      overflow: visible;
    }

    .admin-app-shell {
      display: block;
      max-width: none;
      margin: 0;
      padding: 0;
      grid-template-columns: none;
    }

    .admin-site-header {
      max-width: 1600px;
      margin: 0 auto;
      padding: 12px 18px 0;
    }

    .admin-client-bar {
      position: sticky;
      top: 0;
      z-index: 40;
      padding: 12px 18px;
      border-bottom: 1px solid var(--border);
      background: var(--panel);
    }

    .admin-client-bar-inner {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 12px 16px;
      max-width: 1600px;
      margin: 0 auto;
    }

    .admin-client-bar-label {
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--muted);
    }

    .admin-client-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      flex: 1 1 auto;
    }

    .admin-client-pill {
      border: 1px solid var(--border);
      border-radius: 999px;
      background: var(--panel-2);
      color: var(--text);
      padding: 8px 14px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      min-height: 40px;
    }

    .admin-client-pill.active {
      background: var(--accent, #2563eb);
      border-color: transparent;
      color: #fff;
    }

    .admin-client-bar-meta {
      margin-left: auto;
    }

    .admin-workspace {
      display: grid;
      grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
      gap: clamp(14px, 1.4vw, 22px);
      padding: 18px;
      max-width: 1600px;
      margin: 0 auto;
      align-items: start;
      width: 100%;
      box-sizing: border-box;
    }

    .admin-tools-panel {
      max-height: calc(100vh - 140px);
      overflow: auto;
    }

    .admin-main-panel {
      width: 100%;
      max-width: 100%;
      overflow: hidden;
    }

    .admin-main-panel .card {
      max-width: 100%;
    }

    .admin-tools-divider {
      border: 0;
      border-top: 1px solid var(--border);
      margin: 16px 0;
    }

    .admin-tools-tabs {
      display: grid;
      gap: 8px;
    }

    .admin-tools-hint {
      margin-top: 12px;
    }

    .admin-client-list-compact .client-card {
      font-size: 12px;
      padding: 8px 10px;
    }

    .admin-coach-edit-layer {
      display: grid;
      gap: 12px;
      margin-top: 16px;
      padding-top: 16px;
      border-top: 2px dashed var(--border);
    }

    .admin-coach-edit-panel {
      background: var(--panel-2);
    }

    .admin-inline-edit {
      margin: 8px 12px 0;
    }

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

    .admin-password-row input {
      flex: 1 1 180px;
      min-width: 0;
    }

    .admin-login-credentials-card {
      margin-top: 12px;
      background: var(--panel-2);
    }

    .admin-login-credentials-card h4 {
      margin: 0 0 8px;
    }

    .admin-customer-preview-root {
      display: grid;
      gap: 12px;
    }

    .admin-preview-banner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
      padding: 14px 16px;
      margin-bottom: 0;
    }

    .admin-preview-banner-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items: center;
    }

    .admin-preview-shell {
      min-height: 640px;
      border: 1px solid var(--border);
      border-radius: 16px;
      overflow: hidden;
      background: var(--panel);
    }

    .admin-preview-sidebar-tools {
      display: grid;
      gap: 8px;
      padding: 0 12px 12px;
      border-top: 1px solid var(--border);
      margin-top: 8px;
      padding-top: 12px;
    }

    .admin-preview-page .admin-preview-inline-settings {
      margin-bottom: 12px;
    }

    .admin-edit-target {
      position: relative;
      border-radius: 8px;
      outline: 1px dashed color-mix(in srgb, var(--accent) 52%, transparent);
      outline-offset: 4px;
      cursor: pointer;
      transition: background 140ms ease, outline-color 140ms ease, box-shadow 140ms ease;
    }

    .admin-edit-target:hover,
    .admin-edit-target:focus-visible {
      background: color-mix(in srgb, var(--accent) 9%, transparent);
      outline-color: var(--accent);
      box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 8%, transparent);
    }

    .admin-edit-panel {
      position: fixed;
      inset: 0 0 0 auto;
      z-index: 90;
      width: min(420px, calc(100vw - 24px));
      padding: 16px;
      pointer-events: none;
    }

    .admin-edit-panel[hidden] {
      display: none;
    }

    .admin-edit-panel-card {
      display: grid;
      gap: 14px;
      max-height: calc(100vh - 32px);
      overflow: auto;
      padding: 18px;
      border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
      border-radius: 16px;
      background:
        linear-gradient(180deg, color-mix(in srgb, var(--panel) 92%, var(--accent) 8%), var(--panel));
      box-shadow: var(--shadow-lg, 0 24px 70px rgba(0, 0, 0, 0.28));
      pointer-events: auto;
    }

    .admin-edit-panel-card header {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: flex-start;
    }

    .admin-edit-panel-card h3,
    .admin-edit-panel-card p {
      margin: 0;
    }

    .admin-edit-panel-card label {
      display: block;
      margin-bottom: 6px;
      font-weight: 800;
    }

    .admin-edit-panel-card input,
    .admin-edit-panel-card textarea {
      width: 100%;
    }

    .admin-edit-panel-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 12px;
    }

    .admin-draggable-grid {
      position: relative;
    }

    .admin-draggable-block {
      position: relative;
    }

    .admin-draggable-block.is-dragging {
      opacity: 0.55;
    }

    .admin-drag-handle {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 2;
      width: 34px;
      height: 34px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--panel-2);
      color: var(--muted);
      font-size: 14px;
      line-height: 1;
      cursor: grab;
      padding: 0;
    }

    .admin-drag-handle:active {
      cursor: grabbing;
    }

    .stats-metric-chart-card.admin-draggable-block {
      padding-top: 42px;
    }

    .stats-week-sheet-metrics {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      border-bottom: 1px solid var(--border);
    }

    .stats-week-metric {
      padding: 12px 14px;
      font-size: 14px;
      font-weight: 600;
      border-right: 1px solid var(--border);
      text-transform: lowercase;
    }

    .stats-week-metric:last-child {
      border-right: none;
    }

    .stats-week-sheet-chart {
      padding: 16px;
      min-height: 260px;
      border-bottom: 1px solid var(--border);
      background: var(--panel);
    }

    .stats-week-chart-head {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 10px;
    }

    .stats-week-sheet-chart canvas {
      height: 220px !important;
      max-height: 220px;
    }

    .stats-week-sheet-metric-tabs,
    .stats-week-sheet-nav {
      display: flex;
      flex-wrap: wrap;
      gap: 0;
      border-top: 1px solid var(--border);
    }

    .stats-week-sheet-metric-tabs {
      border-bottom: 1px solid var(--border);
      background: var(--panel-2);
    }

    .stats-week-sheet-metric-tabs button,
    .stats-week-nav-btn {
      flex: 1 1 auto;
      min-width: 72px;
      border: none;
      border-right: 1px solid var(--border);
      background: transparent;
      color: var(--text);
      padding: 12px 10px;
      font-weight: 700;
      cursor: pointer;
    }

    .stats-week-sheet-metric-tabs button:last-child,
    .stats-week-nav-btn:last-child {
      border-right: none;
    }

    .stats-week-sheet-metric-tabs button.active,
    .stats-week-nav-btn.active {
      background: color-mix(in srgb, var(--accent, #2563eb) 12%, var(--panel-2));
      color: var(--accent, #2563eb);
    }

    .stats-training-section {
      margin-top: 14px;
    }

    .stats-training-section > h3 {
      margin-top: 0;
    }

    .stats-exercise-dropdown {
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
      margin-top: 10px;
      background: var(--panel-2);
    }

    .stats-exercise-dropdown summary {
      cursor: pointer;
      list-style: none;
      padding: 14px 16px;
      display: flex;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      align-items: center;
      font-weight: 700;
    }

    .stats-exercise-dropdown summary::-webkit-details-marker {
      display: none;
    }

    .stats-exercise-dropdown summary::before {
      content: "▸";
      margin-right: 10px;
      color: var(--accent, #2563eb);
      transition: transform 0.15s ease;
    }

    .stats-exercise-dropdown[open] summary::before {
      transform: rotate(90deg);
    }

    .stats-exercise-dropdown-title {
      flex: 1 1 auto;
    }

    .stats-exercise-dropdown-body {
      padding: 0 16px 16px;
      border-top: 1px solid var(--border);
    }

    .stats-week-table {
      width: 100%;
      border-collapse: collapse;
      margin: 12px 0;
      font-size: 14px;
    }

    .stats-week-table th,
    .stats-week-table td {
      border: 1px solid var(--border);
      padding: 10px 12px;
      text-align: left;
    }

    .stats-week-table th {
      background: var(--panel);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }

    .stats-week-table tr.is-selected-week td {
      background: color-mix(in srgb, var(--accent, #2563eb) 10%, var(--panel-2));
      font-weight: 700;
    }

    .stats-exercise-dropdown-charts {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .stats-mini-chart {
      display: flex;
      flex-direction: column;
      min-height: 200px;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--panel);
      padding: 10px;
    }

    .stats-mini-chart canvas {
      display: block;
      width: 100% !important;
      height: 160px !important;
      max-height: 160px;
    }

    @media (max-width: 1040px) {
      .print-hero,
      .print-proof-grid {
        grid-template-columns: 1fr;
      }

      .print-card-grid,
      .print-process,
      .print-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .print-hero-media {
        aspect-ratio: 16 / 9;
      }
    }

    @media (max-width: 760px) {
      .stats-metric-charts-grid {
        grid-template-columns: 1fr;
      }

      .stats-week-snapshot-nav {
        flex-wrap: wrap;
      }

      .stats-exercise-dropdown-charts {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 950px) {
      header { position: static; }
      main { grid-template-columns: 1fr; padding: 12px; }
      .customer-main.is-calendar-view { max-width: none; }
      .customer-calendar-shell {
        grid-template-columns: 1fr;
        min-height: auto;
      }
      .customer-calendar-sidebar {
        border-right: 0;
        border-bottom: 1px solid var(--border);
        padding: 12px 0;
        min-height: auto;
      }
      .customer-sidebar-profile {
        padding: 0 12px;
      }
      .customer-sidebar-coach {
        display: none;
      }
      .customer-sidebar-nav {
        flex-direction: row;
        overflow-x: auto;
        padding: 0 10px;
        gap: 6px;
      }
      .customer-sidebar-nav .sidebar-tab {
        border-radius: 999px;
        white-space: nowrap;
        padding: 10px 14px;
      }
      .sidebar-logout {
        display: none;
      }
      .customer-page-main {
        padding: 14px;
      }
      .gcal-toolbar {
        padding: 12px;
      }
      .gcal-board-scroll {
        max-height: none;
      }
      .gcal-toolbar {
        grid-template-columns: 1fr;
        justify-items: center;
      }
      .gcal-toolbar-nav {
        justify-self: center;
        order: 2;
      }
      .gcal-toolbar-title {
        order: 1;
      }
      .gcal-toolbar-spacer {
        display: none;
      }
      .gcal-day-overview-info {
        grid-template-columns: 1fr;
      }
      .gcal-day-overview-header {
        flex-direction: column;
      }
      .panel { padding: 14px; }
      .site-header { align-items: flex-start; flex-direction: column; }
      .site-nav { justify-content: flex-start; }
      .portfolio-body .site-header {
        width: calc(100% - 28px);
        max-width: 1240px;
      }
      .portfolio-body .portfolio-main {
        width: calc(100% - 28px);
        max-width: 1220px;
        padding-top: var(--space-10);
      }
      .portfolio-body .labs-hero {
        min-height: 500px;
        padding: var(--space-14) var(--space-8);
      }
      .portfolio-body .labs-hero h1 {
        font-size: clamp(3.5rem, 4.75rem, 5rem);
      }
      .portfolio-body .project-card {
        min-height: 300px;
      }
      .hero-grid, .highlight-grid, .project-grid, .experience-grid { grid-template-columns: 1fr; }
      .project-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .project-card { grid-column: span 1; }
      .print-hero, .print-proof-grid, .print-card-grid, .print-process, .print-gallery-grid { grid-template-columns: 1fr; }
      .print-portfolio-main {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px);
        padding: 0 !important;
      }
      .print-hero, .print-hero-copy, .print-hero-media, .print-proof-grid, .print-card-grid, .print-process { width: 100%; max-width: 100%; }
      .print-hero-copy, .print-hero-media { min-height: auto; }
      .print-hero-copy { padding: 16px; }
      .print-hero-copy h1,
      .print-hero-copy .hero-lead,
      .print-hero-copy .labs-meta {
        max-width: calc(100vw - 54px);
      }
      .print-hero-copy h1 {
        overflow-wrap: break-word;
      }
      .print-hero-copy .labs-meta span {
        flex: 1 1 calc(50% - 8px);
        min-width: 0;
        text-align: center;
      }
      .print-hero-copy .hero-lead,
      .print-proof-grid p,
      .print-card p,
      .print-process p {
        max-width: 34ch;
      }
      .print-hero-media {
        aspect-ratio: auto;
      }
      .print-hero-mosaic {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        gap: 6px;
        padding: 6px;
        height: auto;
      }
      .print-hero-tile { aspect-ratio: 4 / 3; }
      .print-hero-tile.featured { grid-row: auto; }
      .print-hero-tile figcaption { display: none; }
      .workstation-shell {
        grid-template-columns: 1fr;
        grid-template-areas:
          "visual"
          "info"
          "list";
      }
      .workstation-visual { min-height: 390px; }
      .grid, .grid-2, .grid-3, .macro-grid, .chart-grid, .customer-tabs, .today-hero, .today-metrics, .today-grid, .exercise-guide-card, .exercise-library-grid, .exercise-library-card, .comparison-grid, .pt-sales-hero, .start-grid { grid-template-columns: 1fr; }
      .main-action-card,
      .chat-today-card { grid-column: auto; }
      .calendar-grid { grid-template-columns: repeat(2, 1fr); min-height: auto; }
      .calendar-day { border-right: 0; border-bottom: 1px solid var(--border); min-height: auto; }
      .calendar-selected-actions { grid-template-columns: 1fr; }
      .calendar-modal-metrics,
      .calendar-modal-overview { grid-template-columns: 1fr; }
      .calendar-macro-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .exercise-row, .data-row, .food-row, .datasheet-quick-grid { grid-template-columns: 1fr 1fr; }
      .datasheet-quick-span-2 { grid-column: span 2; }
    }

    @media (max-width: 550px) {
      header { padding: 16px; }
      header h1 { font-size: 23px; }
      main { padding: 10px; }
      .client-list, .nav-tabs { gap: 8px; }
      .card, .metric { padding: 12px; }
      .calendar-grid { grid-template-columns: 1fr; }
      .calendar-day { min-height: auto; }
      .calendar-day-actions { gap: 6px; padding: 0 8px 8px; }
      .calendar-day-chip { min-height: 48px; font-size: 11px; }
      .calendar-selected-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
      .calendar-action-btn { padding: 10px 8px; font-size: 12px; }
      .customer-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .customer-tabs .tab-button {
        text-align: center;
        min-height: 46px;
      }
      .appointment-row { flex-direction: column; }
      .appointment-actions { justify-content: flex-start; }
      .exercise-row, .data-row, .food-row, .datasheet-quick-grid { grid-template-columns: 1fr; }
      .datasheet-quick-span-2 { grid-column: span 1; }
      .datasheet-search { min-width: 0; max-width: none; width: 100%; }
      .exercise-media,
      .exercise-image-placeholder {
        min-height: 220px;
      }
      .exercise-admin-preview {
        max-width: none;
      }
      .set-log-row {
        grid-template-columns: 1fr 1fr;
      }
      .set-log-row span { grid-column: 1 / -1; }
      .pt-founder-card { grid-template-columns: 96px 1fr; }
      .portfolio-main { padding: 12px 10px 36px; }
      .project-card-grid { grid-template-columns: 1fr; }
      .project-card { grid-column: auto; min-height: 280px; border-radius: 20px; }
      .project-card::after { border-radius: 19px; }
      .portfolio-body .site-header {
        width: calc(100% - 20px);
        margin-top: 10px;
        border-radius: 16px;
      }
      .portfolio-body .portfolio-main {
        width: calc(100% - 20px);
        padding: var(--space-8) 0 var(--space-14);
      }
      .portfolio-body .labs-hero {
        min-height: 470px;
        padding: var(--space-10) var(--space-5);
        border-radius: 20px;
      }
      .portfolio-body .labs-hero h1 {
        font-size: clamp(3rem, 3.6rem, 3.9rem);
        line-height: 0.96;
      }
      .portfolio-body .labs-hero .hero-lead {
        font-size: var(--text-base);
      }
      .portfolio-body .labs-meta span {
        flex: 1 1 100%;
        text-align: center;
      }
      .portfolio-body .project-card {
        min-height: 280px;
        border-radius: 18px;
      }
      .portfolio-body .project-card::after {
        border-radius: 17px;
      }
      .labs-hero {
        min-height: 430px;
        padding: 22px;
      }
      .labs-hero::after {
        right: 22px;
        bottom: 22px;
      }
      .print-portfolio-main {
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100%;
        padding: 0 !important;
        overflow-x: hidden;
      }
      .hero-copy, .profile-card, .labs-hero, .project-hero { padding: 16px; }
      .hero-copy h1, .labs-hero h1, .project-hero h1, .print-hero-copy h1 { font-size: 38px; }
      .labs-hero h1 { font-size: clamp(50px, 15vw, 66px); }
      .labs-hero {
        min-height: 520px;
        padding: 28px 18px;
      }
      .print-hero-copy h1 { font-size: 34px; }
      .hero-lead, .project-hero p { font-size: 16px; }
      .timeline-item { grid-template-columns: 1fr; }
      .site-tab { flex: 1 1 auto; }
      .site-link { flex: 1 1 auto; justify-content: center; }
      .source-dialog { width: calc(100vw - 18px); }
      .source-dialog-shell { padding: 14px; }
      .source-code { max-height: 56vh; }
      .workstation-list { grid-template-columns: 1fr; }
      .workstation-visual { min-height: 310px; padding: 14px; }
      .workstation-detail-list { grid-template-columns: 1fr; }
    }

    .exercise-coach-comment {
      margin: 8px 0 0;
      padding: 10px 12px;
      border-radius: 10px;
      border: 1px solid color-mix(in srgb, var(--accent, #2563eb) 24%, var(--border));
      background: color-mix(in srgb, var(--accent, #2563eb) 6%, var(--panel-2));
    }

    .exercise-coach-comment h5 {
      margin: 0 0 4px;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--accent, #2563eb);
    }

    .exercise-coach-comment p {
      margin: 0;
      font-size: 13px;
      line-height: 1.45;
    }

    .training-admin-exercise-fields textarea {
      min-height: 72px;
      resize: vertical;
    }

    .weekly-checkin-page {
      display: grid;
      gap: 18px;
    }

    .weekly-checkin-progress {
      display: grid;
      gap: 14px;
      padding: 18px;
      background:
        linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 42%),
        var(--panel);
    }

    .weekly-progress-heading {
      display: flex;
      justify-content: space-between;
      gap: 14px;
      align-items: flex-start;
      flex-wrap: wrap;
    }

    .weekly-progress-heading strong {
      display: block;
      margin-top: 4px;
      font-size: clamp(20px, 3vw, 30px);
      letter-spacing: 0;
      line-height: 1.05;
    }

    .weekly-progress-pill {
      display: inline-flex;
      align-items: center;
      min-height: 30px;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--panel-2);
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
    }

    .weekly-progress-track {
      height: 8px;
      border-radius: 999px;
      overflow: hidden;
      background: color-mix(in srgb, var(--border) 60%, transparent);
    }

    .weekly-progress-track span {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 72%, #ffffff));
      transition: width 180ms ease;
    }

    .weekly-checkin-steps {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }

    .weekly-checkin-step {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      padding: 10px;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--panel-2);
      color: var(--muted);
      transition: border-color 160ms ease, transform 160ms ease, background 160ms ease;
    }

    .weekly-checkin-step.is-done {
      border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
      background: color-mix(in srgb, var(--accent) 11%, var(--panel-2));
      color: var(--text);
    }

    .weekly-step-dot {
      display: inline-grid;
      place-items: center;
      flex: 0 0 26px;
      width: 26px;
      height: 26px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--panel);
      color: var(--accent);
      font-size: 13px;
      font-weight: 900;
    }

    .weekly-checkin-step strong,
    .weekly-checkin-step small {
      display: block;
      min-width: 0;
    }

    .weekly-checkin-step strong {
      font-size: 13px;
    }

    .weekly-checkin-step small {
      margin-top: 2px;
      font-size: 11px;
      color: var(--muted);
    }

    .weekly-reference-link a {
      color: var(--accent, #2563eb);
      font-weight: 600;
      text-decoration: none;
    }

    .weekly-reference-link a:hover {
      text-decoration: underline;
    }

    .body-measurement-panel {
      display: grid;
      grid-template-columns: minmax(220px, 320px) 1fr;
      gap: 18px;
      align-items: start;
    }

    .body-measurement-visual {
      border-radius: 14px;
      overflow: hidden;
      border: 1px solid var(--border);
      background: #e5e5e5;
    }

    .body-measurement-visual img,
    .body-measurement-svg {
      display: block;
      width: 100%;
      height: auto;
    }

    .body-measurement-inputs {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 12px;
    }

    .body-measurement-field {
      display: grid;
      gap: 4px;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: var(--panel-2);
    }

    .body-measurement-label {
      font-weight: 700;
      font-size: 14px;
    }

    .body-measurement-hint {
      font-size: 12px;
      color: var(--muted);
      line-height: 1.35;
    }

    .body-measurement-input-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .body-measurement-input-row input {
      flex: 1;
      min-height: 44px;
      margin: 0;
    }

    .body-measurement-unit {
      font-size: 13px;
      font-weight: 700;
      color: var(--muted);
    }

    .weekly-question-list {
      display: grid;
      gap: 14px;
      margin-bottom: 14px;
    }

    .weekly-question-item label {
      display: block;
      margin-bottom: 8px;
      font-weight: 700;
    }

    .weekly-scale-row {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .weekly-scale-row input[type="range"] {
      flex: 1;
      margin: 0;
    }

    .weekly-scale-row strong {
      min-width: 28px;
      text-align: center;
      font-size: 18px;
      color: var(--accent, #2563eb);
    }

    .weekly-checkin-history {
      display: grid;
      gap: 8px;
    }

    .weekly-checkin-history-item {
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
      background: var(--panel-2);
    }

    .weekly-checkin-history-item summary {
      cursor: pointer;
      padding: 12px 14px;
      display: flex;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
      list-style: none;
      font-weight: 700;
    }

    .weekly-checkin-history-item summary::-webkit-details-marker {
      display: none;
    }

    .weekly-checkin-history-body {
      padding: 0 14px 14px;
      border-top: 1px solid var(--border);
      display: grid;
      gap: 10px;
    }

    .weekly-admin-question-list {
      display: grid;
      gap: 10px;
      margin-bottom: 14px;
    }

    .weekly-admin-question {
      display: grid;
      gap: 10px;
    }

    .weekly-photo-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
      gap: 12px;
      margin-top: 12px;
    }

    .weekly-photo-card {
      margin: 0;
      display: grid;
      gap: 8px;
      padding: 10px;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: var(--panel-2);
    }

    .weekly-photo-card.is-uploading,
    .weekly-photo-card.is-queued {
      border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
    }

    .weekly-photo-card.is-failed {
      border-color: color-mix(in srgb, #ef4444 58%, var(--border));
      background: color-mix(in srgb, #ef4444 8%, var(--panel-2));
    }

    .weekly-photo-card img {
      width: 100%;
      aspect-ratio: 3 / 4;
      object-fit: cover;
      border-radius: 10px;
      display: block;
      background: #111827;
    }

    .weekly-photo-coach-comment {
      margin: 0;
      font-size: 12px;
      line-height: 1.4;
      color: var(--text);
    }

    .weekly-photo-upload-state {
      display: grid;
      gap: 6px;
      margin: 0;
      font-size: 12px;
      line-height: 1.35;
      color: var(--muted);
    }

    .weekly-photo-card.is-failed .weekly-photo-upload-state {
      color: color-mix(in srgb, #ef4444 78%, var(--text));
    }

    .weekly-photo-upload-track {
      display: block;
      width: 100%;
      height: 5px;
      overflow: hidden;
      border-radius: 999px;
      background: color-mix(in srgb, var(--border) 74%, transparent);
    }

    .weekly-photo-upload-track i {
      display: block;
      width: 0;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #ffffff));
      transition: width 180ms ease;
    }

    .weekly-photo-card.is-failed .weekly-photo-upload-track i {
      background: #ef4444;
    }

    .weekly-photo-upload input[type="file"] {
      display: none;
    }

    .weekly-photo-upload span {
      display: inline-flex;
      margin-bottom: 8px;
      cursor: pointer;
    }

    .weekly-photo-dropzone {
      display: grid;
      place-items: center;
      gap: 6px;
      min-height: 154px;
      padding: 20px;
      border: 1px dashed color-mix(in srgb, var(--accent) 55%, var(--border));
      border-radius: 16px;
      background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 45%),
        var(--panel-2);
      text-align: center;
      cursor: pointer;
      transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
    }

    .weekly-photo-dropzone:hover {
      transform: translateY(-1px);
      border-color: var(--accent);
      background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 50%),
        var(--panel-2);
    }

    .weekly-photo-upload-icon {
      display: inline-grid;
      place-items: center;
      width: 42px;
      height: 42px;
      margin: 0;
      border-radius: 999px;
      background: var(--accent);
      color: var(--accent-contrast, #ffffff);
      font-size: 24px;
      font-weight: 800;
      line-height: 1;
    }

    .weekly-photo-dropzone strong {
      font-size: 17px;
    }

    .weekly-photo-dropzone small {
      color: var(--muted);
      line-height: 1.35;
    }

    .weekly-submit-card {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 14px;
      align-items: center;
    }

    .weekly-submit-card h3,
    .weekly-submit-card p {
      margin: 0;
    }

    .weekly-submit-card h3 {
      margin-bottom: 4px;
    }

    .weekly-submit-button {
      min-width: 210px;
      min-height: 48px;
      font-weight: 900;
    }

    .weekly-submit-button:disabled {
      cursor: not-allowed;
      opacity: 0.55;
      transform: none;
    }

    .weekly-checkin-feedback {
      grid-column: 1 / -1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: var(--panel-2);
      font-size: 13px;
    }

    .weekly-checkin-feedback[hidden] {
      display: none;
    }

    .weekly-checkin-feedback span {
      color: var(--muted);
      font-size: 12px;
      white-space: nowrap;
    }

    .weekly-checkin-feedback[data-status="saving"],
    .weekly-checkin-feedback[data-status="syncing"] {
      border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
    }

    .weekly-checkin-feedback[data-status="local"],
    .weekly-checkin-feedback[data-status="synced"] {
      border-color: color-mix(in srgb, #22c55e 55%, var(--border));
      background: color-mix(in srgb, #22c55e 10%, var(--panel-2));
    }

    .weekly-checkin-feedback[data-status="warning"],
    .weekly-checkin-feedback[data-status="offline"] {
      border-color: color-mix(in srgb, #f59e0b 55%, var(--border));
      background: color-mix(in srgb, #f59e0b 10%, var(--panel-2));
    }

    .weekly-checkin-feedback[data-status="error"] {
      border-color: color-mix(in srgb, #ef4444 60%, var(--border));
      background: color-mix(in srgb, #ef4444 10%, var(--panel-2));
    }

    .weekly-admin-entry summary {
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
      list-style: none;
      padding: 4px 0;
    }

    .weekly-admin-entry summary::-webkit-details-marker {
      display: none;
    }

    .weekly-admin-entry-body {
      display: grid;
      gap: 10px;
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid var(--border);
    }

    .weekly-admin-photo-review h5 {
      margin: 0 0 8px;
    }

    .small-btn {
      font-size: 12px;
      padding: 6px 10px;
    }

    @media (max-width: 760px) {
      .weekly-checkin-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .weekly-progress-heading strong {
        font-size: 22px;
      }

      .body-measurement-panel {
        grid-template-columns: 1fr;
      }

      .body-measurement-visual {
        max-width: 280px;
        margin: 0 auto;
      }

      .weekly-submit-card {
        position: sticky;
        bottom: max(10px, env(safe-area-inset-bottom));
        z-index: 25;
        grid-template-columns: 1fr;
        box-shadow: 0 18px 45px rgba(0, 0, 0, 0.24);
      }

      .weekly-submit-button {
        width: 100%;
      }
    }

    @media (max-width: 480px) {
      .weekly-checkin-steps {
        grid-template-columns: 1fr;
      }

      .weekly-photo-dropzone {
        min-height: 132px;
        padding: 16px;
      }
    }

    /* PT App — mobil & träning */
    html {
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
    }

    .gcal-board-scroll {
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-x: contain;
    }

    @media (max-width: 768px) {
      body.is-customer-app {
        padding-bottom: env(safe-area-inset-bottom, 0);
      }

      body.is-customer-app header {
        position: sticky;
        top: 0;
        z-index: 40;
        padding: 10px 12px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        background: var(--panel);
        box-shadow: 0 1px 0 var(--border);
      }

      body.is-customer-app header h1 {
        flex: 1 1 auto;
        margin: 0;
        font-size: 18px;
        order: 3;
        width: 100%;
      }

      body.is-customer-app .customer-header-nav {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        order: 4;
        width: 100%;
        gap: 4px;
        padding: 6px 0 2px;
        margin-top: 2px;
        border-top: 1px solid var(--border);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
      }

      body.is-customer-app .customer-header-nav::-webkit-scrollbar {
        display: none;
      }

      body.is-customer-app .customer-header-nav .sidebar-tab {
        flex: 1 1 0;
        min-width: 62px;
        border-radius: 12px;
        text-align: center;
        padding: 8px 4px;
        min-height: 44px;
        font-size: 11px;
        line-height: 1.2;
        white-space: normal;
      }

      body.is-customer-app header p {
        display: none;
      }

      body.is-customer-app header > .back-home-link:not(.admin-route-link) {
        display: none;
      }

      body.is-customer-app .customer-theme-menu {
        margin-left: auto;
        order: 2;
        font-size: 12px;
      }

      body.is-customer-app .customer-main {
        padding: 0;
        max-width: none;
      }

      body.is-customer-app .customer-main.is-customer-shell .panel {
        border-radius: 0;
      }

      body.is-customer-app .customer-calendar-shell {
        display: flex;
        flex-direction: column;
        min-height: calc(100dvh - 120px);
        border: 0;
        border-radius: 0;
        box-shadow: none;
      }

      body.is-customer-app .customer-calendar-sidebar {
        display: none;
      }

      body.is-customer-app .customer-calendar-main {
        flex: 1 1 auto;
        min-height: 0;
        overflow: visible;
      }

      body.is-customer-app .customer-sidebar-profile,
      body.is-customer-app .customer-sidebar-photo,
      body.is-customer-app .sidebar-logout,
      body.is-customer-app .admin-preview-sidebar-tools {
        display: none;
      }

      body.is-customer-app .customer-sidebar-nav {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 4px;
        padding: 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
      }

      body.is-customer-app .customer-sidebar-nav::-webkit-scrollbar {
        display: none;
      }

      body.is-customer-app .customer-sidebar-nav .sidebar-tab {
        flex: 1 1 0;
        min-width: 68px;
        border-radius: 12px;
        text-align: center;
        padding: 10px 6px;
        min-height: 48px;
        font-size: 12px;
        line-height: 1.2;
        white-space: normal;
      }

      body.is-customer-app .customer-sidebar-nav .sidebar-tab.sidebar-action {
        display: none;
      }

      body.is-customer-app .customer-page-main {
        padding: 12px;
      }

      body.is-customer-app .gcal-app {
        min-height: auto;
      }

      body.is-customer-app .gcal-toolbar {
        padding: 10px 12px;
        gap: 8px;
        position: static;
        top: auto;
        z-index: auto;
      }

      body.is-customer-app .gcal-toolbar-title h2 {
        font-size: 18px;
      }

      body.is-customer-app .gcal-nav-btn,
      body.is-customer-app .gcal-today-btn {
        min-height: 44px;
        padding: 8px 12px;
      }

      body.is-customer-app .gcal-board-scroll {
        max-height: none;
        overflow-x: hidden;
        overflow-y: auto;
      }

      body.is-customer-app .gcal-board {
        overflow: visible;
        flex: 0 0 auto;
      }

      body.is-customer-app .gcal-header-row,
      body.is-customer-app .gcal-list-board {
        min-width: 0;
        width: 100%;
        grid-template-columns: repeat(7, minmax(0, 1fr));
      }

      body.is-customer-app .gcal-header-row {
        position: static;
        top: auto;
      }

      body.is-customer-app .gcal-day-header {
        min-height: 44px;
        padding: 6px 2px;
      }

      body.is-customer-app .gcal-dow {
        font-size: 9px;
        letter-spacing: 0.02em;
      }

      body.is-customer-app .gcal-dom {
        width: 26px;
        height: 26px;
        font-size: 13px;
      }

      body.is-customer-app .gcal-day-list {
        min-height: auto;
        padding: 4px 2px;
        gap: 4px;
      }

      body.is-customer-app .gcal-list-item {
        min-height: 34px;
        padding: 5px 3px;
        font-size: 10px;
        line-height: 1.25;
      }

      body.is-customer-app .gcal-list-item strong {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 10px;
      }

      body.is-customer-app .gcal-list-meta {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 9px;
        line-height: 1.2;
      }

      body.is-customer-app .gcal-week-coach-note {
        padding: 10px 12px;
      }

      body.is-customer-app .gcal-week-coach-note p {
        font-size: 12px;
      }

      body.is-customer-app .gcal-info-card-tap {
        min-height: 48px;
      }

      body.is-customer-app .gcal-selected-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
      }

      body.is-customer-app .gcal-selected-actions button,
      body.is-customer-app .gcal-day-overview-header button {
        min-height: 48px;
        width: 100%;
      }

      body.is-customer-app .gcal-day-overview {
        flex-shrink: 0;
        margin: 8px 10px 12px;
        padding: 12px;
      }

      body.is-customer-app .calendar-modal {
        padding: 0;
        align-items: stretch;
        place-items: stretch;
      }

      body.is-customer-app .calendar-modal-card,
      body.is-customer-app .calendar-modal-card-wide {
        width: 100%;
        max-width: none;
        max-height: none;
        height: 100%;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        padding: 14px 12px calc(14px + env(safe-area-inset-bottom, 0));
      }

      body.is-customer-app .calendar-modal-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
      }

      body.is-customer-app .calendar-modal-actions button {
        min-height: 48px;
        width: 100%;
        margin: 0;
      }

      body.is-customer-app .calendar-macro-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      body.is-customer-app .calendar-set-log-row input,
      body.is-customer-app .calendar-exercise-note,
      body.is-customer-app .set-log-row input,
      body.is-customer-app select,
      body.is-customer-app textarea {
        font-size: 16px;
      }

      body.is-customer-app .calendar-exercise-card .meal-check-actions,
      body.is-customer-app .meal-check-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
      }

      body.is-customer-app .calendar-exercise-card .meal-check-actions button,
      body.is-customer-app .meal-check-actions button {
        min-height: 48px;
        width: 100%;
      }

      body.is-customer-app .exercise-guide-card,
      body.is-customer-app .exercise-library-card {
        grid-template-columns: 1fr;
      }

      body.is-customer-app .exercise-media {
        max-height: 220px;
        min-height: 160px;
      }

      body.is-customer-app .set-log-row {
        grid-template-columns: 44px 1fr 1fr;
        padding: 10px;
        border-radius: 12px;
        background: var(--panel-2);
        border: 1px solid var(--border);
      }

      body.is-customer-app .set-log-row span {
        grid-column: auto;
      }

      body.is-customer-app .set-log-row input {
        min-height: 48px;
        margin: 0;
      }

      body.is-customer-app .top-row {
        flex-direction: column;
        align-items: stretch;
      }

      body.is-customer-app .top-row button {
        width: 100%;
        min-height: 48px;
      }

      body.is-customer-app button.primary,
      body.is-customer-app .primary {
        min-height: 48px;
      }

      body.is-customer-app .training-library-grid {
        grid-template-columns: 1fr;
      }

      body.is-customer-app .training-library-exercise {
        grid-template-columns: 72px 1fr;
        gap: 10px;
      }

      body.is-customer-app .training-library-exercise-media {
        width: 72px;
        height: 72px;
      }

      body.is-customer-app .nutrition-library-grid {
        grid-template-columns: 1fr;
      }

      body.is-customer-app .nutrition-library-tabs {
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
        margin-bottom: 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
      }

      body.is-customer-app .nutrition-library-tabs::-webkit-scrollbar {
        display: none;
      }

      body.is-customer-app .nutrition-library-tab {
        flex: 1 1 0;
        min-width: 88px;
        min-height: 44px;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--panel-2);
        color: var(--text);
        font-size: 12px;
        font-weight: 700;
        line-height: 1.2;
        padding: 8px 10px;
        cursor: pointer;
        white-space: normal;
        text-align: center;
      }

      body.is-customer-app .nutrition-library-tab.is-high.active {
        border-color: #3b82f6;
        background: #dbeafe;
        color: #1d4ed8;
      }

      body.is-customer-app .nutrition-library-tab.is-low.active {
        border-color: #f59e0b;
        background: #fef3c7;
        color: #92400e;
      }

      body.is-customer-app .nutrition-library-tab.is-flex.active {
        border-color: #8b5cf6;
        background: #ede9fe;
        color: #5b21b6;
      }

      body.is-customer-app .nutrition-library-tab-panel {
        display: block;
      }

      body.is-customer-app .nutrition-library-page-mobile .nutrition-library-header {
        margin-bottom: 12px;
      }

      body.is-customer-app .stats-week-snapshot-metrics {
        grid-template-columns: 1fr;
      }

      body.is-customer-app .stats-week-snapshot-item:nth-last-child(-n+2) {
        border-bottom: 1px solid var(--border);
      }

      body.is-customer-app .stats-week-snapshot-item:last-child {
        border-bottom: none;
      }

      body.is-customer-app .stats-week-snapshot-nav {
        flex-wrap: wrap;
      }

      body.is-customer-app .stats-week-snapshot-nav .stats-week-sheet-nav {
        flex: 1 1 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }

      body.is-customer-app .checkin-field-row {
        grid-template-columns: 1fr;
      }

      body.is-customer-app .checkin-field-row button {
        width: 100%;
        min-height: 48px;
      }

      body.is-customer-app button,
      body.is-customer-app .tab-button,
      body.is-customer-app .link-button {
        touch-action: manipulation;
      }

      #adminApp.is-customer-preview .customer-calendar-shell {
        min-height: 70vh;
      }

      #adminApp.is-customer-preview .admin-preview-banner {
        flex-direction: column;
        align-items: stretch;
      }

      #adminApp.is-customer-preview .admin-preview-banner-actions {
        flex-direction: column;
      }

      #adminApp.is-customer-preview .admin-preview-banner-actions button,
      #adminApp.is-customer-preview .admin-preview-banner-actions .link-button {
        width: 100%;
        min-height: 44px;
        text-align: center;
      }
    }

    @media (max-width: 768px) {
      main {
        padding: 10px;
      }

      .admin-workspace {
        grid-template-columns: 1fr;
      }

      .admin-tools-panel {
        position: sticky;
        top: 56px;
        z-index: 20;
        max-height: 38vh;
        overflow: auto;
      }

      .admin-client-bar-meta {
        margin-left: 0;
        width: 100%;
      }

      #adminApp .client-card {
        min-height: 44px;
      }

      #adminApp .tab-button {
        min-height: 44px;
      }
    }

    @media (max-width: 550px) {
      .print-hero-copy h1,
      .print-hero-copy .hero-lead,
      .print-hero-copy .labs-meta {
        max-width: min(100%, 320px);
      }

      .print-hero-copy .labs-meta span {
        flex-basis: 100%;
      }
    }