@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&family=Roboto+Mono:wght@400;500;700&family=Noto+Sans+JP:wght@400;500;700;900&display=swap");

/* ============================================================
   PocketMi — Web fonts
   The app uses Roboto (Latin) + Hiragino Kaku Gothic ProN (JP, a
   macOS/iOS system font). No font binaries were available in the
   provided codebase mount, so these load from Google Fonts:
     • Roboto       — exact match for the app's Latin font
     • Noto Sans JP — closest free substitute for Hiragino JP
     • Roboto Mono  — for tabular/lab numerics
   SUBSTITUTION FLAGGED: replace with the licensed Hiragino files
   if pixel-exact Japanese rendering is required.
   ============================================================ */

/* ============================================================
   PocketMi — Color tokens
   Brand blue is inherited from the mnes / LookRec design tokens
   (@mnes/mnes-design-token). The warm rose + lavender accents and
   the warm-neutral surfaces are the "Warm Calm" friendly layer
   added on top, appropriate for a reassuring health companion.
   ============================================================ */

:root {
  /* ---- Brand: LookRec Blue (primary, trust) ----------------- */
  --blue-50:  #E8F4FD;   /* inset / pale wash (COLOR_..._BLUE_INSET) */
  --blue-100: #CFE8FB;
  --blue-200: #A6D6F8;
  --blue-300: #5FBBF5;
  --blue-400: #259EFC;
  --blue-500: #0094FF;   /* DEFAULT — primary action (mnesBlueDefault) */
  --blue-600: #0077DB;   /* EM — emphasis / hover (mnesBlueEm) */
  --blue-700: #0A5BA8;   /* deep / pressed */

  /* ---- Accent: Rose / Coral (warmth, wellness, diary) ------- */
  --rose-50:  #FDEEF1;
  --rose-100: #FBDCE3;
  --rose-200: #F6BDC9;
  --rose-300: #F0A0B1;
  --rose-400: #EC7C92;
  --rose-500: #E5607C;   /* DEFAULT accent */
  --rose-600: #CE4868;
  --rose-700: #A2324E;

  /* ---- Tertiary: Lavender (calm, trials, insight) ----------- */
  --lavender-50:  #F2ECFB;
  --lavender-100: #E5DAF6;
  --lavender-200: #CFBDEE;
  --lavender-300: #B49FE5;
  --lavender-400: #9B82DC;
  --lavender-500: #8268D0;   /* DEFAULT tertiary */
  --lavender-600: #6A50B8;
  --lavender-700: #503B92;

  /* ---- Warm neutrals (rose-tinted paper, not cold gray) ----- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #FBF8F7;   /* app page background — warm paper */
  --neutral-100: #F4EFED;   /* sunken surface */
  --neutral-200: #E9E2E0;   /* subtle border / hairline */
  --neutral-300: #D9CFCD;   /* default border */
  --neutral-400: #B4A9A7;   /* disabled fg / placeholder */
  --neutral-500: #897F7D;   /* muted / sub text */
  --neutral-600: #615957;   /* secondary body */
  --neutral-700: #443E3C;   /* body text */
  --neutral-900: #221E1D;   /* ink — primary text */

  /* ---- Semantic status -------------------------------------- */
  --success-500: #1FA37D;
  --success-50:  #E2F5EE;
  --warning-500: #D9930B;
  --warning-50:  #FCF1D8;
  --danger-500:  #E05249;
  --danger-50:   #FCE9E7;
  --info-500:    var(--blue-500);
  --info-50:     var(--blue-50);

  /* ============================================================
     SEMANTIC ALIASES — use these in components, not raw scales
     ============================================================ */

  /* Text */
  --text-strong:   var(--neutral-900);
  --text-body:     var(--neutral-700);
  --text-muted:    var(--neutral-500);
  --text-disabled: var(--neutral-400);
  --text-on-accent:#FFFFFF;
  --text-link:     var(--blue-600);

  /* Surfaces */
  --surface-page:      var(--neutral-50);
  --surface-card:      var(--neutral-0);
  --surface-sunken:    var(--neutral-100);
  --surface-primary-soft:   var(--blue-50);
  --surface-accent-soft:    var(--rose-50);
  --surface-tertiary-soft:  var(--lavender-50);

  /* Borders */
  --border-subtle:  var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong:  var(--neutral-400);
  --border-focus:   var(--blue-500);

  /* Primary action */
  --primary:        var(--blue-500);
  --primary-hover:  var(--blue-600);
  --primary-active: var(--blue-700);
  --primary-soft:   var(--blue-50);
  --on-primary:     #FFFFFF;

  /* Accent (rose) */
  --accent:        var(--rose-500);
  --accent-hover:  var(--rose-600);
  --accent-soft:   var(--rose-50);
  --on-accent:     #FFFFFF;

  /* Tertiary (lavender) */
  --tertiary:      var(--lavender-500);
  --tertiary-hover:var(--lavender-600);
  --tertiary-soft: var(--lavender-50);

  /* Feedback aliases */
  --success: var(--success-500);
  --warning: var(--warning-500);
  --danger:  var(--danger-500);
}
/* ============================================================
   PocketMi — Data & mood palettes
   The blood-test category palette ships in the codebase
   (constants/BloodTestCategories.ts): each category pairs a pale
   tint (light bg) with a saturated ink (label/value). Formalised
   here as the reusable "data palette" for charts, chips & section
   headers. Mood colors map the 5 diary states (great → awful).
   ============================================================ */

:root {
  /* ---- Category data palette (tint / ink pairs) ------------- */
  --cat-cbc-tint:          #FCE8EC;  --cat-cbc-ink:          #A32040;
  --cat-lipids-tint:       #FEF6DC;  --cat-lipids-ink:       #C48A14;
  --cat-liver-tint:        #FEEEE2;  --cat-liver-ink:        #C05A20;
  --cat-kidney-tint:       #E2F4FC;  --cat-kidney-ink:       #1870B8;
  --cat-electrolytes-tint: #D8F8F0;  --cat-electrolytes-ink: #10907A;
  --cat-diabetes-tint:     #EEE4FA;  --cat-diabetes-ink:     #7040B0;
  --cat-thyroid-tint:      #D8EEFA;  --cat-thyroid-ink:      #1880B8;
  --cat-iron-tint:         #FAECDC;  --cat-iron-ink:         #B85020;
  --cat-tumor-tint:        #E6F5E2;  --cat-tumor-ink:        #2A8A3E;
  --cat-inflammation-tint: #FCEAE0;  --cat-inflammation-ink: #C04030;
  --cat-coagulation-tint:  #F2E0FA;  --cat-coagulation-ink:  #8030B8;
  --cat-cardiac-tint:      #FAE0F2;  --cat-cardiac-ink:      #B81860;
  --cat-hormones-tint:     #E6DCF8;  --cat-hormones-ink:     #6040B8;
  --cat-serology-tint:     #DCF8EE;  --cat-serology-ink:     #10906A;
  --cat-vitamins-tint:     #EEF8DC;  --cat-vitamins-ink:     #709020;
  --cat-immunology-tint:   #E2E8FA;  --cat-immunology-ink:   #3050B8;

  /* ---- Chart line colors (bloodTests/graph) ----------------- */
  --chart-1: #4A90D9;
  --chart-2: #E05C5C;
  --chart-3: #E0A020;
  --chart-4: #7B5EA7;
  --chart-steps: #3B82F6;
  --chart-distance: #14B8A6;

  /* ---- Mood palette (diary: great → awful) ------------------ */
  --mood-great-ink:  #1FA37D;  --mood-great-tint:  #E2F5EE;
  --mood-good-ink:   #2E97C9;  --mood-good-tint:   #E0F1F9;
  --mood-okay-ink:   #D9930B;  --mood-okay-tint:   #FCF1D8;
  --mood-bad-ink:    #E07A2E;  --mood-bad-tint:    #FCEBDD;
  --mood-awful-ink:  #E5607C;  --mood-awful-tint:  #FDEEF1;
}
/* ============================================================
   PocketMi — Typography tokens
   Latin: Roboto (the app loads Roboto / Roboto_400Regular via
   expo-google-fonts). Japanese in-app uses "Hiragino Kaku Gothic
   ProN"; on the web we fall back to Noto Sans JP (closest free
   match). Both load from Google Fonts in fonts.css.
   ============================================================ */

:root {
  /* ---- Families -------------------------------------------- */
  --font-sans: "Roboto", "Noto Sans JP", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Helvetica, Arial, sans-serif;
  --font-jp:   "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Roboto", sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- Weights (Roboto ships 300/400/500/700/900) ----------- */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 700; /* Roboto has no 600; 700 carries "semibold" */
  --weight-bold:     700;
  --weight-heavy:    900;

  /* ---- Type scale (px) — anchored to the app's real sizes --- */
  --text-display:  28px;  /* hero / big numbers headers */
  --text-title:    22px;  /* screen titles */
  --text-heading:  19px;  /* section heading (vitals "Today") */
  --text-body-lg:  16px;
  --text-body:     14px;  /* default body / inputs */
  --text-label:    13px;  /* card titles, list labels */
  --text-caption:  11px;  /* field labels */
  --text-micro:    10px;  /* uppercase eyebrow / units */
  --text-metric:   24px;  /* primary vital value */

  /* ---- Line heights ---------------------------------------- */
  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.45;
  --leading-relaxed:1.6;

  /* ---- Letter spacing -------------------------------------- */
  --tracking-tight:  -0.3px;
  --tracking-normal: 0;
  --tracking-wide:   0.2px;
  --tracking-caps:   0.6px;  /* uppercase micro labels */

  /* ---- Semantic roles -------------------------------------- */
  --font-screen-title-size:   var(--text-title);
  --font-screen-title-weight: var(--weight-semibold);
  --font-section-size:        var(--text-heading);
  --font-section-weight:      var(--weight-semibold);
  --font-card-title-size:     var(--text-label);
  --font-card-title-weight:   var(--weight-bold);
  --font-body-size:           var(--text-body);
  --font-body-weight:         var(--weight-regular);
  --font-metric-size:         var(--text-metric);
  --font-metric-weight:       var(--weight-heavy);
}
/* ============================================================
   PocketMi — Spacing, radii, shadows, motion
   Spacing follows the 4px base scale used throughout the app
   (4/8/10/12/16/20/32/40). Radii lean slightly softer than the
   raw app values (4 input / 8 card) to suit the friendlier
   "Warm Calm" direction, while keeping the same anchors.
   ============================================================ */

:root {
  /* ---- Spacing (4px base) ---------------------------------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---- Radii ------------------------------------------------ */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  20px;
  --radius-2xl: 24px;
  --radius-pill: 999px;

  /* Semantic radii (friendly: a touch rounder than raw app) */
  --radius-input:  10px;
  --radius-button: 12px;
  --radius-card:   16px;
  --radius-sheet:  24px;
  --radius-chip:   var(--radius-pill);

  /* ---- Elevation — soft, warm-tinted shadows ---------------- */
  /* Warm shadow color (ink at low alpha keeps it from looking cold) */
  --shadow-color: 25 18 16;  /* ~neutral-900 rgb */
  --shadow-xs: 0 1px 2px rgb(var(--shadow-color) / 0.05);
  --shadow-sm: 0 1px 3px rgb(var(--shadow-color) / 0.06),
               0 1px 2px rgb(var(--shadow-color) / 0.04);
  --shadow-md: 0 4px 10px rgb(var(--shadow-color) / 0.07),
               0 2px 4px rgb(var(--shadow-color) / 0.05);
  --shadow-lg: 0 12px 28px rgb(var(--shadow-color) / 0.10),
               0 4px 10px rgb(var(--shadow-color) / 0.05);
  --shadow-card: var(--shadow-sm);
  --shadow-pop:  var(--shadow-lg);

  /* Soft colored glow for primary/accent emphasis */
  --shadow-primary: 0 6px 16px rgb(0 148 255 / 0.22);
  --shadow-accent:  0 6px 16px rgb(229 96 124 / 0.22);

  /* ---- Borders --------------------------------------------- */
  --border-width: 1px;
  --border-width-strong: 1.5px;

  /* ---- Motion ---------------------------------------------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);   /* @kind other */
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);   /* @kind other */
  /* gentle overshoot */
  --ease-soft:  cubic-bezier(0.34, 1.2, 0.64, 1); /* @kind other */
  --duration-fast:   120ms;   /* @kind other */
  --duration-normal: 200ms;   /* @kind other */
  --duration-slow:   320ms;   /* @kind other */

  /* ---- Layout ---------------------------------------------- */
  --tap-target-min: 44px;   /* min touch target */
  --app-max-width:  430px;  /* phone frame width */
}
/* ============================================================
   PocketMi — base element styling & utility primitives
   Light, opt-in resets so specimen cards and UI kits inherit the
   brand defaults without fighting them.
   ============================================================ */

*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings inherit the brand type roles */
h1, h2, h3, h4 {
  margin: 0;
  color: var(--text-strong);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}
h1 { font-size: var(--text-display); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--text-title); }
h3 { font-size: var(--text-heading); }

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Eyebrow / micro uppercase label */
.pm-eyebrow {
  font-size: var(--text-micro);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
/* ---------- landing page styles (from PocketMi-Landing.html) ---------- */
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    font-family: var(--font-sans);
    color: var(--text-body);
    background: var(--surface-page);
    -webkit-font-smoothing: antialiased;
    line-height: var(--leading-normal);
  }
  h1, h2, h3, h4, p { margin: 0; }
  a { color: inherit; text-decoration: none; }
  .material-symbols-rounded { font-variation-settings: 'wght' 400; line-height: 1; }

  .wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 24px; }

  .eyebrow {
    font-size: var(--text-micro);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--primary);
  }
  .eyebrow.rose { color: var(--accent); }
  .eyebrow.lav { color: var(--tertiary); }

  /* ---------- Buttons ---------- */
  .btn {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: inherit; font-size: var(--text-body);
    font-weight: var(--weight-bold);
    border-radius: var(--radius-button);
    padding: 12px 22px; border: none; cursor: pointer;
    transition: transform var(--duration-fast) var(--ease-soft),
                box-shadow var(--duration-normal) var(--ease-out),
                background var(--duration-normal) var(--ease-out);
  }
  .btn:active { transform: scale(0.97); }
  .btn-primary { background: var(--primary); color: var(--on-primary); }
  .btn-primary:hover { background: var(--primary-hover); box-shadow: var(--shadow-primary); }
  .btn-ghost { background: transparent; color: var(--text-strong); border: 1px solid var(--border-default); }
  .btn-ghost:hover { background: var(--surface-sunken); }
  .btn .material-symbols-rounded { font-size: 20px; }

  /* ---------- Nav ---------- */
  header.nav {
    position: sticky; top: 0; z-index: 50;
    background: var(--nav-bg);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--border-subtle);
  }
  .nav-inner { display: flex; align-items: center; gap: 24px; height: 64px; }
  .nav-inner img.logo { height: 26px; width: auto; display: block; }
  .nav-links { display: flex; gap: 28px; margin-left: 12px; }
  .nav-links a {
    font-size: var(--text-body); font-weight: var(--weight-medium);
    color: var(--text-body); transition: color var(--duration-fast) var(--ease-out);
  }
  .nav-links a:hover { color: var(--primary); }
  .nav-cta { margin-left: auto; display: flex; align-items: center; gap: 12px; }
  .nav-cta .signin { font-weight: var(--weight-medium); color: var(--text-body); }
  .nav-cta .signin:hover { color: var(--primary); }
  @media (max-width: 760px) { .nav-links, .nav-cta .signin { display: none; } }

  /* ---------- Hero ---------- */
  .hero { padding: 72px 0 40px; overflow: hidden; }
  .hero-grid {
    display: grid; grid-template-columns: 1.05fr 0.95fr;
    gap: 40px; align-items: center;
  }
  .hero h1 {
    font-size: clamp(40px, 5.4vw, 60px); line-height: 1.05;
    font-weight: var(--weight-heavy); color: var(--text-strong);
    letter-spacing: -1px; margin: 18px 0 0;
  }
  .hero h1 .accent { color: var(--primary); }
  .hero .lede {
    font-size: var(--text-body-lg); color: var(--text-muted);
    max-width: 30em; margin-top: 18px; line-height: var(--leading-relaxed);
  }
  .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
  .store-badges { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
  .store-badge {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--text-strong); color: var(--surface-page);
    border-radius: var(--radius-md); padding: 9px 16px;
    transition: transform var(--duration-fast) var(--ease-soft);
  }
  .store-badge:hover { transform: translateY(-2px); }
  .store-badge .material-symbols-rounded { font-size: 26px; }
  .store-badge small { display: block; font-size: 10px; opacity: 0.7; line-height: 1.1; }
  .store-badge b { display: block; font-size: 15px; font-weight: var(--weight-bold); line-height: 1.15; }
  .hero-meta { display: flex; gap: 22px; margin-top: 30px; flex-wrap: wrap; }
  .hero-meta .item { display: flex; align-items: center; gap: 8px; font-size: var(--text-label); color: var(--text-muted); }
  .hero-meta .material-symbols-rounded { font-size: 18px; color: var(--success); }
  .hero-visual { display: flex; justify-content: center; position: relative; }

  @media (max-width: 860px) {
    .hero-grid { grid-template-columns: 1fr; text-align: center; }
    .hero .lede { margin-left: auto; margin-right: auto; }
    .hero-actions, .store-badges, .hero-meta { justify-content: center; }
    .hero { padding-top: 48px; }
  }

  /* ---------- Phone frame ---------- */
  .phone {
    width: 300px; flex: none;
    background: #15110F; border-radius: 44px; padding: 11px;
    box-shadow: var(--shadow-lg), 0 30px 60px rgb(var(--shadow-color) / 0.14);
  }
  .phone-screen {
    background: var(--surface-page); border-radius: 34px; overflow: hidden;
    height: 600px; display: flex; flex-direction: column; position: relative;
  }
  .statusbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 20px 6px; font-size: 12px; font-weight: var(--weight-bold);
    color: var(--text-strong); flex: none;
  }
  .statusbar .sdots { display: flex; gap: 5px; align-items: center; }
  .statusbar .material-symbols-rounded { font-size: 15px; }
  .appbar {
    display: flex; align-items: center; gap: 8px; padding: 6px 18px 10px; flex: none;
  }
  .appbar h4 { font-size: var(--text-heading); font-weight: var(--weight-bold); color: var(--text-strong); white-space: nowrap; }
  .appbar .acts { margin-left: auto; display: flex; gap: 6px; color: var(--primary); }
  .appbar .acts .material-symbols-rounded { font-size: 22px; }
  .subtabs { display: flex; gap: 6px; padding: 0 16px 10px; flex: none; overflow: hidden; }
  .subtab {
    font-size: 12px; font-weight: var(--weight-medium); color: var(--text-muted);
    padding: 6px 12px; border-radius: var(--radius-pill); background: transparent;
    border: none; white-space: nowrap;
  }
  .subtab.active { background: var(--primary-soft); color: var(--primary); font-weight: var(--weight-bold); }
  .screen-scroll { flex: 1; overflow: hidden; padding: 0 16px 16px; }
  .tabbar {
    display: flex; flex: none; border-top: 1px solid var(--border-subtle);
    background: var(--surface-card); padding: 8px 8px 14px;
  }
  .tabbar .tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    background: none; border: none; color: var(--text-muted); font-size: 10px; font-weight: var(--weight-medium);
  }
  .tabbar .tab .material-symbols-rounded { font-size: 24px; }
  .tabbar .tab.active { color: var(--primary); }

  /* in-screen pieces */
  .day-row { display: flex; align-items: center; gap: 8px; padding: 4px 2px 12px; }
  .day-row .material-symbols-rounded { font-size: 18px; color: var(--text-muted); }
  .day-row b { font-size: var(--text-label); color: var(--text-strong); font-weight: var(--weight-bold); }
  .day-row span { font-size: 11px; color: var(--text-muted); }

  .connect-banner {
    display: flex; align-items: center; gap: 10px;
    background: var(--primary); color: #fff; border-radius: var(--radius-md);
    padding: 12px 14px; margin-bottom: 12px;
  }
  .connect-banner .ci { width: 30px; height: 30px; border-radius: 8px; background: rgba(255,255,255,0.18); display: grid; place-items: center; }
  .connect-banner .material-symbols-rounded { font-size: 18px; }
  .connect-banner b { font-size: 13px; font-weight: var(--weight-bold); flex: 1; }
  .connect-banner .go { display: flex; align-items: center; gap: 2px; font-size: 11px; font-weight: var(--weight-bold); }
  .connect-banner .go .material-symbols-rounded { font-size: 16px; }

  .stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat {
    background: var(--surface-card); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card); box-shadow: var(--shadow-sm);
    padding: 12px; position: relative; overflow: hidden;
  }
  .stat::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accentline, var(--primary)); }
  .stat .shead { display: flex; align-items: center; gap: 6px; }
  .stat .shead .material-symbols-rounded { font-size: 17px; }
  .stat .shead b { font-size: 12px; font-weight: var(--weight-bold); color: var(--text-strong); flex: 1; }
  .stat .shead .chev { font-size: 16px !important; color: var(--text-disabled); }
  .stat .slabel { font-size: 9px; font-weight: var(--weight-bold); letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-muted); margin-top: 10px; }
  .stat .sval { font-size: var(--text-metric); font-weight: var(--weight-heavy); color: var(--text-strong); line-height: 1.1; margin-top: 2px; }
  .stat .sval small { font-size: 12px; font-weight: var(--weight-medium); color: var(--text-muted); }

  /* diary */
  .diary-card {
    background: var(--surface-card); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card); box-shadow: var(--shadow-sm);
    padding: 14px; position: relative; overflow: hidden; margin-bottom: 14px;
  }
  .diary-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent); }
  .diary-card .eyer { font-size: 9px; font-weight: var(--weight-bold); letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-muted); }
  .diary-card .q { font-size: var(--text-heading); font-weight: var(--weight-bold); color: var(--text-strong); margin: 4px 0 12px; }
  .moods { display: flex; gap: 6px; }
  .mood {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 8px 2px; border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); background: var(--surface-card);
  }
  .mood.sel { background: var(--accent-soft); border-color: var(--accent); }
  .mood .face { font-size: 13px; color: var(--text-body); font-family: var(--font-mono); }
  .mood.sel .face { color: var(--accent); }
  .mood .ml { font-size: 9px; font-weight: var(--weight-medium); color: var(--text-muted); }
  .mood.sel .ml { color: var(--accent); font-weight: var(--weight-bold); }
  .field-label { font-size: 11px; font-weight: var(--weight-bold); color: var(--text-body); margin: 14px 0 6px; }
  .field {
    background: var(--surface-card); border: 1px solid var(--border-default);
    border-radius: var(--radius-input); padding: 11px 12px; font-size: 12px; color: var(--text-muted);
  }
  .addrow { display: flex; gap: 8px; margin-top: 12px; }
  .addbtn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; border-radius: var(--radius-input); border: 1px solid var(--primary); color: var(--primary); font-size: 12px; font-weight: var(--weight-bold); background: var(--surface-card); }
  .addbtn .material-symbols-rounded { font-size: 17px; }
  .save-btn { margin-top: 14px; width: 100%; justify-content: center; background: var(--accent); color: #fff; border: none; padding: 13px; border-radius: var(--radius-button); font-weight: var(--weight-bold); font-size: 14px; }

  /* trials */
  .learn-banner {
    display: flex; align-items: center; gap: 10px;
    background: var(--tertiary-soft); border-radius: var(--radius-md);
    padding: 12px 14px; margin-bottom: 14px;
  }
  .learn-banner .li { width: 30px; height: 30px; border-radius: 8px; background: var(--surface-card); display: grid; place-items: center; color: var(--tertiary); }
  .learn-banner .material-symbols-rounded { font-size: 18px; }
  .learn-banner b { font-size: 13px; font-weight: var(--weight-bold); color: var(--text-strong); flex: 1; }
  .learn-banner .go { font-size: 11px; font-weight: var(--weight-bold); color: var(--tertiary); }
  .trial-section-h { font-size: 13px; font-weight: var(--weight-bold); color: var(--text-strong); margin: 14px 2px 8px; }
  .trial-list { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); overflow: hidden; }
  .trial-row { display: flex; align-items: center; gap: 10px; padding: 12px; border-bottom: 1px solid var(--border-subtle); }
  .trial-row:last-child { border-bottom: none; }
  .trial-ic { width: 32px; height: 32px; border-radius: 8px; background: var(--tertiary-soft); display: grid; place-items: center; color: var(--tertiary); flex: none; }
  .trial-ic .material-symbols-rounded { font-size: 18px; }
  .trial-ic.rose { background: var(--accent-soft); color: var(--accent); }
  .trial-ic.blue { background: var(--primary-soft); color: var(--primary); }
  .trial-meta { flex: 1; min-width: 0; }
  .trial-meta b { display: block; font-size: 12.5px; font-weight: var(--weight-bold); color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .trial-meta span { font-size: 10.5px; color: var(--text-muted); }
  .badge { font-size: 9px; font-weight: var(--weight-bold); letter-spacing: 0.4px; text-transform: uppercase; padding: 4px 8px; border-radius: var(--radius-pill); white-space: nowrap; }
  .badge.green { background: var(--success-50); color: var(--success); }
  .badge.warn { background: var(--warning-50); color: var(--warning); }
  .badge.gray { background: var(--surface-sunken); color: var(--text-muted); }
  .badge.blue { background: var(--primary-soft); color: var(--primary); }
  .trial-row .chev { font-size: 16px; color: var(--text-disabled); }

  /* ---------- Trust strip ---------- */
  .trust { border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); background: var(--surface-card); }
  .trust-inner { display: flex; flex-wrap: wrap; gap: 14px 40px; align-items: center; justify-content: center; padding: 22px 0; }
  .trust-item { display: flex; align-items: center; gap: 9px; font-size: var(--text-label); font-weight: var(--weight-medium); color: var(--text-body); }
  .trust-item .material-symbols-rounded { font-size: 20px; color: var(--primary); }

  /* ---------- Section / features ---------- */
  section.block { padding: 88px 0; }
  .section-head { max-width: 620px; margin: 0 auto 56px; text-align: center; }
  .section-head h2 { font-size: clamp(28px, 3.6vw, 40px); font-weight: var(--weight-heavy); color: var(--text-strong); letter-spacing: -0.6px; margin-top: 12px; line-height: 1.12; }
  .section-head p { font-size: var(--text-body-lg); color: var(--text-muted); margin-top: 14px; line-height: var(--leading-relaxed); }

  .feature-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  @media (max-width: 900px) { .feature-cards { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 520px) { .feature-cards { grid-template-columns: 1fr; } }
  .fcard {
    background: var(--surface-card); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card); box-shadow: var(--shadow-sm);
    padding: 24px 22px; transition: transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
  }
  .fcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
  .fcard .fic { width: 46px; height: 46px; border-radius: var(--radius-md); display: grid; place-items: center; margin-bottom: 16px; }
  .fcard .fic .material-symbols-rounded { font-size: 26px; }
  .fic.blue { background: var(--primary-soft); color: var(--primary); }
  .fic.rose { background: var(--accent-soft); color: var(--accent); }
  .fic.lav { background: var(--tertiary-soft); color: var(--tertiary); }
  .fic.green { background: var(--success-50); color: var(--success); }
  .fcard h3 { font-size: var(--text-body-lg); font-weight: var(--weight-bold); color: var(--text-strong); margin-bottom: 8px; }
  .fcard p { font-size: var(--text-label); color: var(--text-muted); line-height: var(--leading-normal); }

  /* split feature row */
  .split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
  .split.reverse .split-visual { order: -1; }
  .split-visual { display: flex; justify-content: center; }
  .split-copy h2 { font-size: clamp(26px, 3.2vw, 36px); font-weight: var(--weight-heavy); color: var(--text-strong); letter-spacing: -0.5px; margin: 12px 0 16px; line-height: 1.12; }
  .split-copy p { font-size: var(--text-body-lg); color: var(--text-muted); line-height: var(--leading-relaxed); }
  .feat-list { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-direction: column; gap: 14px; }
  .feat-list li { display: flex; gap: 12px; align-items: flex-start; }
  .feat-list .tick { width: 24px; height: 24px; border-radius: var(--radius-pill); display: grid; place-items: center; flex: none; margin-top: 1px; }
  .feat-list .tick .material-symbols-rounded { font-size: 16px; }
  .feat-list b { color: var(--text-strong); font-weight: var(--weight-bold); font-size: var(--text-body); }
  .feat-list span { display: block; color: var(--text-muted); font-size: var(--text-label); margin-top: 2px; }
  @media (max-width: 860px) {
    .split { grid-template-columns: 1fr; gap: 36px; text-align: center; }
    .split.reverse .split-visual { order: 0; }
    .feat-list { text-align: left; max-width: 420px; margin-left: auto; margin-right: auto; }
  }

  /* privacy band */
  .privacy-band { background: var(--band-bg); color: #fff; }
  .privacy-band .section-head h2 { color: #fff; }
  .privacy-band .section-head p { color: rgba(255,255,255,0.66); }
  .priv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  @media (max-width: 760px) { .priv-grid { grid-template-columns: 1fr; } }
  .priv-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10); border-radius: var(--radius-card); padding: 26px 24px; }
  .priv-card .material-symbols-rounded { font-size: 28px; color: var(--blue-300); }
  .priv-card h3 { font-size: var(--text-body-lg); font-weight: var(--weight-bold); color: #fff; margin: 14px 0 8px; }
  .priv-card p { font-size: var(--text-label); color: rgba(255,255,255,0.62); line-height: var(--leading-normal); }

  /* languages */
  .langs { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
  .lang-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); padding: 9px 18px; font-size: var(--text-label); font-weight: var(--weight-medium); color: var(--text-body); }

  /* CTA */
  .cta-band { padding: 96px 0; text-align: center; }
  .cta-card {
    background: var(--primary); color: #fff; border-radius: var(--radius-2xl);
    padding: 64px 40px; box-shadow: 0 30px 60px rgb(0 148 255 / 0.20);
    position: relative; overflow: hidden;
  }
  .cta-card .tile { width: 64px; height: 64px; border-radius: 18px; margin: 0 auto 22px; display: block; box-shadow: var(--shadow-md); }
  .cta-card h2 { font-size: clamp(30px, 4vw, 46px); font-weight: var(--weight-heavy); letter-spacing: -0.8px; line-height: 1.08; }
  .cta-card p { font-size: var(--text-body-lg); color: rgba(255,255,255,0.82); margin: 16px auto 0; max-width: 32em; }
  .cta-actions { display: flex; gap: 12px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }
  .cta-card .btn-white { background: #fff; color: var(--primary); }
  .cta-card .btn-white:hover { background: var(--blue-50); }
  .cta-card .btn-outline { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.5); }
  .cta-card .btn-outline:hover { background: rgba(255,255,255,0.12); }

  /* footer */
  footer { border-top: 1px solid var(--border-subtle); padding: 56px 0 40px; }
  .foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
  .foot-brand img { height: 24px; margin-bottom: 14px; }
  .foot-brand p { font-size: var(--text-label); color: var(--text-muted); max-width: 24em; line-height: var(--leading-normal); }
  .foot-col h4 { font-size: var(--text-caption); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-muted); margin-bottom: 14px; }
  .foot-col a { display: block; font-size: var(--text-label); color: var(--text-body); margin-bottom: 10px; }
  .foot-col a:hover { color: var(--primary); }
  .foot-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--border-subtle); }
  .foot-bottom p { font-size: var(--text-caption); color: var(--text-muted); }
  .foot-bottom .disc { max-width: 46em; }
  @media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 460px) { .foot-grid { grid-template-columns: 1fr; } }

  /* ---------- Toggles (lang + theme) ---------- */
  body { transition: background var(--duration-normal) var(--ease-out), color var(--duration-normal) var(--ease-out); }
  html { background: var(--surface-page); }
  html[lang="ja"] body { font-family: var(--font-jp); }
  :root { --nav-bg: rgba(251,248,247,0.82); --band-bg: var(--neutral-900); }

  .nav-tools { display: flex; align-items: center; gap: 10px; }
  .lang-switch { display: inline-flex; background: var(--surface-sunken); border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); padding: 2px; }
  .lang-switch button { font-family: inherit; font-size: 12px; font-weight: var(--weight-bold); border: none; background: transparent; color: var(--text-muted); padding: 6px 11px; border-radius: var(--radius-pill); cursor: pointer; line-height: 1.2; transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
  .lang-switch button.active { background: var(--surface-card); color: var(--primary); box-shadow: var(--shadow-xs); }
  .theme-btn { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--radius-pill); border: 1px solid var(--border-subtle); background: var(--surface-card); color: var(--text-body); cursor: pointer; transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-soft); }
  .theme-btn:hover { color: var(--primary); border-color: var(--border-default); }
  .theme-btn:active { transform: scale(0.9); }
  .theme-btn .material-symbols-rounded { font-size: 20px; }
  @media (max-width: 420px) { .lang-switch button { padding: 6px 9px; } }

  /* ---------- Dark theme ---------- */
  html[data-theme="dark"] {
    --nav-bg: rgba(20,16,15,0.82);
    --band-bg: #100C0B;
    --surface-page: #181412;
    --surface-card: #221E1D;
    --surface-sunken: #2A2523;
    --text-strong: #F6F2F0;
    --text-body: #DBD3D0;
    --text-muted: #A89E9B;
    --text-disabled: #6F6663;
    --border-subtle: #322B29;
    --border-default: #3E3633;
    --primary-soft: rgba(0,148,255,0.16);
    --accent-soft: rgba(229,96,124,0.16);
    --tertiary-soft: rgba(130,104,208,0.20);
    --surface-primary-soft: rgba(0,148,255,0.16);
    --surface-accent-soft: rgba(229,96,124,0.16);
    --surface-tertiary-soft: rgba(130,104,208,0.20);
    --blue-50: rgba(0,148,255,0.16);
    --success-50: rgba(31,163,125,0.20);
    --warning-50: rgba(217,147,11,0.22);
    --danger-50: rgba(224,82,73,0.22);
    --shadow-color: 0 0 0;
  }

  /* soft entrance */
  @media (prefers-reduced-motion: no-preference) {
    .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
    .reveal.in { opacity: 1; transform: none; }
  }