*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:"Segoe UI","Yu Gothic UI",sans-serif;
}

body{
  background:
    radial-gradient(circle at top left, rgba(59,130,246,.12), transparent 32%),
    radial-gradient(circle at top right, rgba(46,204,113,.08), transparent 28%),
    #0f172a;
  color:#fff;
}

.dashboard{
  width:1200px;
  margin:28px auto;
}

.header{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:start;
  gap:24px;
  margin-bottom:18px;
}

.header h1{
  font-size:42px;
  line-height:1;
  margin-bottom:10px;
}

.header p,
.last-update{
  color:#9fb2cf;
  font-size:14px;
}

.header-center{
  text-align:center;
  padding-top:2px;
}

.clock{
  font-size:42px;
  font-weight:900;
  letter-spacing:.5px;
  line-height:1;
}

.view-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:0 0 22px;
  padding-top:18px;
  border-top:1px solid rgba(159,178,207,.24);
}

.view-tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:0;
}

.view-tab{
  border:1px solid rgba(255,255,255,.08);
  background:#202b3d;
  color:#cbd5e1;
  padding:10px 22px;
  border-radius:999px;
  font-size:15px;
  cursor:pointer;
}

.view-tab.active{
  background:rgba(46,204,113,.16);
  color:#fff;
  box-shadow:
    0 0 0 1px rgba(46,204,113,.45),
    0 0 24px rgba(46,204,113,.10);
}

.language-switch{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  margin:0;
  color:#9fb2cf;
  font-size:13px;
  white-space:nowrap;
}

.language-button{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(32,43,61,.74);
  color:#cbd5e1;
  padding:7px 12px;
  border-radius:999px;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
}

.language-button.active{
  background:rgba(46,204,113,.18);
  border-color:rgba(46,204,113,.45);
  color:#dcfce7;
}

.card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)),
    #202b3d;
  border-radius:20px;
  padding:24px;
  box-shadow:
    0 12px 28px rgba(0,0,0,.28),
    inset 0 0 0 1px rgba(255,255,255,.04);
}

.label{
  font-size:24px;
  color:#e5e7eb;
}

.hero-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-bottom:18px;
}

.hero-score-card{
  min-height:250px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border:1px solid rgba(46,204,113,.35);
  background:
    radial-gradient(circle at 18% 15%, rgba(46,204,113,.10), transparent 40%),
    #202b3d;
}

.hero-current-card{
  min-height:250px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:
    radial-gradient(circle at 35% 20%, rgba(59,130,246,.08), transparent 45%),
    #202b3d;
}

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

.score-main{
  margin-top:24px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:28px;
  transform:translateY(-24px);
}

.score-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
}

.score-value{
  display:inline-block;
  font-size:92px;
  font-weight:900;
  line-height:.9;
  letter-spacing:-2px;
  color:#2ecc71;
}

.score-badge{
  padding:8px 18px;
  border-radius:999px;
  background:rgba(46,204,113,.12);
  border:1px solid rgba(46,204,113,.38);
  color:#2ecc71;
  font-size:17px;
  font-weight:800;
  white-space:nowrap;
}

.score-message{
  margin-top:10px;
  max-width:340px;
  font-size:20px;
  font-weight:600;
  line-height:1.35;
  color:#f8fafc;
}

.score-meta{
  margin-top:28px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  color:#cbd5e1;
  font-size:14px;
  opacity:.75;
}

.score-gluco{
  flex:0 0 132px;
  width:132px;
  height:132px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  overflow:hidden;
  background:radial-gradient(circle at 50% 45%, rgba(46,204,113,.18), rgba(46,204,113,.08) 68%, rgba(46,204,113,.03) 100%);
  border:1px solid rgba(46,204,113,.14);
  box-shadow:0 14px 24px rgba(0,0,0,.16);
}

.score-gluco-image{
  width:132px;
  height:132px;
  object-fit:cover;
}

.current-main{
  display:flex;
  align-items:flex-end;
  gap:22px;
  margin-top:18px;
  margin-bottom:24px;
}

.current-value-wrap{
  position:relative;
  display:inline-flex;
  align-items:flex-end;
}

#glucoseValue{
  font-size:82px;
  font-weight:900;
  line-height:1;
  color:#f8fafc;
  transition:color .22s ease, text-shadow .22s ease;
}

#glucoseValue.glucose-high{
  color:#facc15;
  text-shadow:0 0 18px rgba(250,204,21,.18);
}

#glucoseValue.glucose-low{
  color:#fb7185;
  text-shadow:0 0 18px rgba(251,113,133,.20);
}

#glucoseValue.glucose-in-range{
  color:#f8fafc;
}

.current-delta{
  position:absolute;
  top:-8px;
  right:-50px;
  min-width:44px;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(15,23,42,.38);
  border:1px solid rgba(255,255,255,.08);
  color:#cbd5e1;
  font-size:18px;
  font-weight:900;
  line-height:1;
  text-align:center;
  letter-spacing:.2px;
  white-space:nowrap;
}

.current-delta.delta-up{
  color:#facc15;
  border-color:rgba(250,204,21,.22);
}

.current-delta.delta-down{
  color:#7dd3fc;
  border-color:rgba(125,211,252,.22);
}

.current-delta.delta-flat{
  color:#cbd5e1;
}

.arrow{
  font-size:62px;
  color:#2ecc71;
  line-height:1;
}

.unit{
  font-size:28px;
  color:#e5e7eb;
  margin-bottom:10px;
}

.current-status-row{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.pill-row,
.status-pill{
  display:inline-flex;
  align-items:center;
  padding:10px 18px;
  border-radius:999px;
  font-size:17px;
  font-weight:800;
}

.pill-row{
  background:#2d3748;
  color:#fff;
}

.status-pill.in-range{
  background:rgba(46,204,113,.16);
  color:#d1fae5;
}

.current-device-row{
  margin-top:20px;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.smartguard-row{
  padding:10px 14px;
  display:inline-flex;
  align-items:center;
  width:fit-content;
  border-radius:999px;
  background:rgba(59,130,246,.12);
  color:#e5e7eb;
  font-size:16px;
}

.device-pill{
  display:inline-flex;
  align-items:center;
  min-height:39px;
  padding:9px 12px;
  border-radius:999px;
  background:rgba(15,23,42,.24);
  border:1px solid rgba(255,255,255,.07);
  color:#f3f4f6;
  font-size:14px;
  font-weight:500;
  white-space:nowrap;
}

.device-pill.health-online{ color:#f3f4f6; border-color:rgba(46,204,113,.20); background:rgba(46,204,113,.08); }
.device-pill.health-stale{ color:#f3f4f6; border-color:rgba(250,204,21,.20); background:rgba(250,204,21,.07); }
.device-pill.health-error{ color:#f3f4f6; border-color:rgba(251,113,133,.22); background:rgba(251,113,133,.08); }
.device-pill.health-muted{ color:#cbd5e1; }

.current-small-note{
  margin-top:10px;
  color:#9fb2cf;
  font-size:13px;
  opacity:.8;
}

.metric-grid{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:16px;
  margin-bottom:18px;
}

.metric-card{
  min-height:138px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.metric-label{
  font-size:18px;
  color:#e5e7eb;
  white-space:nowrap;
}

.metric-label span{
  font-size:12px;
  opacity:.7;
}

.metric-value{
  font-size:44px;
  font-weight:900;
  line-height:1.05;
}

.metric-inline{
  display:flex;
  align-items:flex-end;
  gap:8px;
}

.metric-unit-inline{
  font-size:20px;
  color:#d7e1ef;
  font-weight:600;
  margin-bottom:4px;
  white-space:nowrap;
}

.metric-desc{
  font-size:14px;
  color:#d2d8e3;
  line-height:1.35;
}

.metric-desc small{
  display:block;
  margin-top:4px;
  font-size:11px;
  opacity:.7;
}

.green .metric-value{ color:#2ecc71; }
.yellow .metric-value{ color:#f5c542; }
.red .metric-value{ color:#ff5d73; }
.purple .metric-value{ color:#b784ff; }
.pink .metric-value{ color:#ff77b7; }

.chart-card{
  margin-top:18px;
}

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

.chart-actions{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
}

.period-switch{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}

.period-button{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(15,23,42,.28);
  color:#cbd5e1;
  padding:7px 12px;
  border-radius:999px;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
}

.period-button.active{
  background:rgba(46,204,113,.18);
  border-color:rgba(46,204,113,.45);
  color:#dcfce7;
  box-shadow:0 0 18px rgba(46,204,113,.10);
}

.custom-range-controls{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
  color:#9fb2cf;
  font-size:12px;
}

.custom-range-controls[hidden]{
  display:none;
}

.custom-range-controls label{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.date-input-wrap{
  position:relative;
  display:inline-flex;
  align-items:center;
}

.date-input-icon{
  position:absolute;
  right:5px;
  top:50%;
  transform:translateY(-50%);
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:999px;
  background:transparent;
  color:#dbe7f8;
  opacity:.88;
  font-size:13px;
  line-height:1;
  cursor:pointer;
}

.date-input-icon:hover{
  background:rgba(255,255,255,.08);
  opacity:1;
}

.custom-range-controls input{
  color:#e5eefb;
  background:rgba(15,23,42,.35);
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  padding:6px 36px 6px 9px;
  font-size:12px;
  cursor:pointer;
}

.custom-range-controls > button{
  border:1px solid rgba(46,204,113,.32);
  background:rgba(46,204,113,.12);
  color:#dcfce7;
  border-radius:999px;
  padding:7px 12px;
  font-size:12px;
  font-weight:900;
  cursor:pointer;
}

.plus-feature-notice{
  max-width:520px;
  margin:0;
  color:#dbeafe;
  font-size:12px;
  line-height:1.6;
  text-align:right;
}

.plus-feature-notice[hidden]{
  display:none;
}

.chart-range{
  color:#c3d0e4;
  font-size:14px;
  text-align:right;
}

.chart-legend{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
  color:#cbd5e1;
  font-size:12px;
}

.chart-legend-item{
  display:inline-flex;
  align-items:center;
  gap:6px;
  opacity:.86;
}

.chart-legend-item[hidden]{
  display:none;
}

.chart-legend-item::before{
  content:"";
  width:16px;
  height:3px;
  border-radius:999px;
  background:rgba(255,255,255,.32);
}

.chart-legend-item.today-line::before{
  background:#38bdf8;
}

.chart-legend-item.yesterday-line::before{
  background:rgba(203,213,225,.55);
}

.chart-legend-item.range-band::before{
  height:10px;
  background:rgba(46,204,113,.20);
  border:1px solid rgba(46,204,113,.20);
}

.chart-legend-item.meal-bolus-dot::before{
  width:9px;
  height:9px;
  background:#fbbf24;
  border-radius:50%;
}

.chart-legend-item.correction-bolus-dot::before{
  width:9px;
  height:9px;
  background:#a78bfa;
  border-radius:50%;
}

.chart-wrap{
  height:320px;
}

.comment-card{
  margin-top:18px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 22% 30%, rgba(46,204,113,.12), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)),
    #202b3d;
}

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

.comment-tag{
  padding:7px 12px;
  border-radius:999px;
  background:rgba(46,204,113,.14);
  border:1px solid rgba(46,204,113,.26);
  color:#9ff5bd;
  font-size:13px;
  font-weight:800;
  letter-spacing:.4px;
  white-space:nowrap;
}

.gluco-comment{
  display:grid;
  grid-template-columns:minmax(220px, 1fr) minmax(0, 2fr);
  gap:24px;
  align-items:stretch;
  margin-top:20px;
}

.gluco-comment-body{
  min-height:220px;
  padding:26px 28px;
  border-radius:22px;
  background:rgba(15,23,42,.24);
  border:1px solid rgba(255,255,255,.06);
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.gluco-comment-avatar{
  min-height:220px;
  position:relative;
  border-radius:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 50% 42%, rgba(46,204,113,.28), rgba(46,204,113,.08) 58%, transparent 74%),
    rgba(15,23,42,.20);
  border:1px solid rgba(46,204,113,.18);
  transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

.gluco-comment-avatar.lucky-gluco{
  background:
    radial-gradient(circle at 50% 42%, rgba(250,204,21,.34), rgba(46,204,113,.12) 56%, transparent 76%),
    linear-gradient(135deg, rgba(250,204,21,.13), rgba(46,204,113,.06)),
    rgba(15,23,42,.22);
  border-color:rgba(250,204,21,.78);
  box-shadow:
    0 0 0 1px rgba(250,204,21,.18),
    0 18px 38px rgba(250,204,21,.16),
    inset 0 0 0 1px rgba(255,255,255,.05);
  animation:luckyGlucoGlow 1.9s ease-in-out infinite;
}

@keyframes luckyGlucoGlow{
  0%, 100%{
    border-color:rgba(250,204,21,.55);
    box-shadow:
      0 0 0 1px rgba(250,204,21,.14),
      0 18px 34px rgba(250,204,21,.10),
      inset 0 0 0 1px rgba(255,255,255,.04);
  }

  50%{
    border-color:rgba(253,224,71,.96);
    box-shadow:
      0 0 0 3px rgba(250,204,21,.16),
      0 20px 46px rgba(250,204,21,.24),
      inset 0 0 0 1px rgba(255,255,255,.07);
  }
}

.gluco-letter-number{
  position:absolute;
  top:14px;
  left:14px;
  z-index:1;
  max-width:calc(100% - 28px);
  padding:6px 10px;
  border-radius:999px;
  background:rgba(15,23,42,.68);
  border:1px solid rgba(46,204,113,.28);
  color:#bdf7ce;
  font-size:12px;
  font-weight:900;
  letter-spacing:.2px;
  line-height:1.35;
  white-space:normal;
  box-shadow:0 10px 18px rgba(0,0,0,.16);
}

.gluco-letter-number.lucky-gluco{
  color:#fde68a;
  border-color:rgba(250,204,21,.82);
  background:rgba(69,47,5,.74);
  text-shadow:0 0 14px rgba(250,204,21,.25);
}

.gluco-lucky-badge{
  position:absolute;
  left:14px;
  right:14px;
  bottom:14px;
  z-index:1;
  padding:8px 12px;
  border-radius:18px;
  background:rgba(69,47,5,.76);
  border:1px solid rgba(250,204,21,.62);
  color:#fde68a;
  font-size:13px;
  font-weight:900;
  line-height:1.35;
  text-align:center;
  text-shadow:0 0 14px rgba(250,204,21,.24);
  box-shadow:0 12px 22px rgba(0,0,0,.20), inset 0 0 0 1px rgba(255,255,255,.04);
}

.gluco-lucky-badge[hidden]{
  display:none;
}

@media (prefers-reduced-motion: reduce){
  .gluco-comment-avatar.lucky-gluco{
    animation:none;
  }
}

.gluco-comment-image{
  width:190px;
  height:190px;
  object-fit:contain;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.24));
}


.letter-section{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.rule-letter-section{
  padding-bottom:20px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

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

.letter-section-title{
  color:#edf2f7;
  font-size:16px;
  font-weight:900;
  letter-spacing:.2px;
}

.letter-section-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:26px;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(46,204,113,.12);
  border:1px solid rgba(46,204,113,.24);
  color:#9ff5bd;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}

.letter-section-lead{
  margin:0;
  color:#9fb2cf;
  font-size:12px;
  line-height:1.6;
}

.letter-action-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
  margin-top:20px;
}

.letter-action-panel{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:188px;
  padding:18px;
  border-radius:20px;
  background:rgba(15,23,42,.28);
  border:1px solid rgba(255,255,255,.07);
}

.ai-letter-panel{
  background:
    radial-gradient(circle at 10% 0%, rgba(46,204,113,.12), transparent 38%),
    rgba(15,23,42,.28);
}

.chatgpt-letter-panel{
  background:
    radial-gradient(circle at 10% 0%, rgba(59,130,246,.13), transparent 38%),
    rgba(15,23,42,.28);
}

.ai-slot-badge{
  color:#fde68a;
  border-color:rgba(250,204,21,.30);
  background:rgba(250,204,21,.10);
}

.letter-button-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:auto;
}

.letter-primary-button,
.letter-secondary-button,
.letter-text-link{
  min-height:38px;
  border-radius:999px;
  padding:9px 14px;
  font-size:13px;
  font-weight:900;
  text-decoration:none;
}

.letter-primary-button,
.letter-secondary-button{
  cursor:pointer;
}

.letter-primary-button{
  border:1px solid rgba(46,204,113,.34);
  background:rgba(46,204,113,.15);
  color:#dcfce7;
}

.letter-primary-button:disabled{
  cursor:not-allowed;
  opacity:.62;
}

.letter-secondary-button{
  border:1px solid rgba(96,165,250,.34);
  background:rgba(59,130,246,.14);
  color:#dbeafe;
}

.letter-secondary-button:disabled{
  cursor:not-allowed;
  opacity:.55;
}

.letter-text-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.08);
  color:#cbd5e1;
  background:rgba(255,255,255,.04);
}

.letter-text-link:hover{
  color:#fff;
  border-color:rgba(255,255,255,.16);
}

.letter-panel-status{
  color:#9fb2cf;
  font-size:12px;
  line-height:1.6;
}

.letter-panel-status.success{
  color:#9ff5bd;
}

.letter-panel-status.error{
  color:#fca5a5;
}

.ai-letter-user-consent{
  display:grid;
  gap:10px;
  padding:14px;
  border:1px solid rgba(147,197,253,.28);
  border-radius:16px;
  background:rgba(30,64,175,.12);
}

.ai-letter-user-consent[hidden]{
  display:none;
}

.ai-letter-user-consent h3{
  margin:0;
  color:#eff6ff;
  font-size:15px;
  line-height:1.5;
}

.ai-letter-user-consent p{
  margin:0;
  color:#dbeafe;
  font-size:13px;
  line-height:1.7;
}

.ai-letter-consent-link{
  width:max-content;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  color:#bfdbfe;
  font-size:13px;
  font-weight:800;
}

.ai-letter-consent-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.ai-letter-consent-actions .letter-primary-button,
.ai-letter-consent-actions .letter-secondary-button{
  min-height:44px;
}

.ai-letter-result{
  margin-top:4px;
  padding:14px 15px;
  border-radius:16px;
  background:rgba(46,204,113,.08);
  border:1px solid rgba(46,204,113,.18);
  color:#edf2f7;
  font-size:14px;
  line-height:1.65;
  white-space:pre-line;
}

.ai-letter-result[hidden]{
  display:none;
}

#comment{
  font-size:19px;
  line-height:1.65;
  color:#edf2f7;
  white-space:pre-line;
}

@media (max-width: 720px), (max-width: 960px) and (orientation: landscape) and (hover: none) and (pointer: coarse){
  .comment-card-header{
    align-items:flex-start;
    flex-direction:column;
  }

  .gluco-comment{
    grid-template-columns:1fr;
  }

  .gluco-comment-body{
    min-height:auto;
    padding:20px;
  }

  .gluco-comment-avatar{
    min-height:160px;
  }

  .gluco-comment-image{
    width:128px;
    height:128px;
  }

  .letter-action-grid{
    grid-template-columns:1fr;
  }

  .letter-section-header,
  .letter-panel-topline{
    align-items:flex-start;
    flex-direction:column;
  }

  #comment{
    font-size:18px;
    line-height:1.65;
  }
}

@media (max-width: 720px), (max-width: 960px) and (orientation: landscape) and (hover: none) and (pointer: coarse){
  .score-main{
    gap:18px;
    transform:translateY(-12px);
  }

  .score-value{
    font-size:76px;
  }

  .score-message{
    font-size:18px;
  }

  .score-gluco{
    flex:0 0 92px;
    width:92px;
    height:92px;
  }

  .score-gluco-image{
    width:92px;
    height:92px;
    object-fit:cover;
  }
}

@media (max-width: 720px), (max-width: 960px) and (orientation: landscape) and (hover: none) and (pointer: coarse){
  .current-delta{
    top:-6px;
    right:-42px;
    min-width:38px;
    font-size:15px;
    padding:4px 7px;
  }
}

canvas{
  width:100%!important;
  height:100%!important;
}

@media (max-width: 1000px){
  .dashboard{
    width:auto;
    margin:18px;
  }

  .hero-grid{
    grid-template-columns:1fr;
  }

  .metric-grid{
    grid-template-columns:repeat(2, 1fr);
  }

  .header{
    grid-template-columns:1fr auto;
    gap:12px;
  }

  .header-center{
    grid-column:1 / -1;
    grid-row:2;
    text-align:left;
    padding-top:4px;
  }

  .header h1{
    font-size:34px;
  }

  .clock{
    font-size:34px;
  }
}


.live-indicator{
  justify-self:end;
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:8px;
    padding:8px 14px;
    border-radius:999px;
    font-size:15px;
    font-weight:900;
    letter-spacing:.6px;
    color:#2ecc71;
    background:rgba(46,204,113,.12);
    border:1px solid rgba(46,204,113,.32);
    box-shadow:0 0 22px rgba(46,204,113,.08);
}

.live-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#2ecc71;
    box-shadow:0 0 12px rgba(46,204,113,.75);
    animation:livePulse 2s infinite;
}

.live-online{
    color:#2ecc71;
    background:rgba(46,204,113,.12);
    border-color:rgba(46,204,113,.32);
}

.live-online .live-dot{
    background:#2ecc71;
    box-shadow:0 0 12px rgba(46,204,113,.75);
}

.live-stale{
    color:#f5c542;
    background:rgba(245,197,66,.12);
    border-color:rgba(245,197,66,.38);
}

.live-stale .live-dot{
    background:#f5c542;
    box-shadow:0 0 12px rgba(245,197,66,.75);
    animation:none;
}

.live-error{
    color:#ff5d73;
    background:rgba(255,93,115,.12);
    border-color:rgba(255,93,115,.38);
}

.live-error .live-dot{
    background:#ff5d73;
    box-shadow:0 0 12px rgba(255,93,115,.75);
    animation:none;
}

.live-pending{
    color:#9fb2cf;
    background:rgba(159,178,207,.10);
    border-color:rgba(159,178,207,.28);
}

.live-pending .live-dot{
    background:#9fb2cf;
    box-shadow:0 0 12px rgba(159,178,207,.45);
}

.status-pill.above-range{
  background:rgba(245,197,66,.16);
  color:#fef3c7;
}

.status-pill.below-range{
  background:rgba(255,93,115,.16);
  color:#ffe4e9;
}

@keyframes livePulse{

    0%{
        transform:scale(1);
        opacity:.9;
    }

    50%{
        transform:scale(1.35);
        opacity:.4;
    }

    100%{
        transform:scale(1);
        opacity:.9;
    }

}
.header{display:block;text-align:center;margin-bottom:20px}
.header-center.full{display:flex;flex-direction:column;align-items:center;gap:8px}
.header-date{color:#9fb2cf;font-size:18px}
.health-bar{display:flex;gap:32px;color:#cbd5e1;font-size:14px;border-top:2px solid rgba(255,255,255,.22);padding-top:10px;margin-top:8px}
.live-indicator{display:flex;align-items:center;gap:8px;color:#2ecc71;font-weight:700}
.live-dot{width:10px;height:10px;border-radius:50%;background:#2ecc71;animation:pulse 1.5s infinite}
@keyframes pulse{50%{opacity:.35;transform:scale(1.25)}}

/* Sprint 7.1: branded live header */
.header{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:start;
  gap:28px;
  margin-bottom:22px;
}

.brand-block{
  text-align:left;
}

.brand-block h1{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:38px;
  line-height:1;
  margin-bottom:18px;
  letter-spacing:-.6px;
}

.brand-icon{
  font-size:42px;
  filter:drop-shadow(0 0 16px rgba(46,204,113,.24));
}

.brand-kicker{
  color:#47e66e;
  font-size:18px;
  line-height:1.35;
  font-weight:900;
  margin-bottom:20px;
}

.brand-story{
  color:#d7e1ef;
  font-size:17px;
  line-height:1.55;
}

.header-center{
  min-width:420px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  text-align:center;
  padding-top:0;
}

.last-update{
  color:#9fb2cf;
  font-size:14px;
  margin-top:2px;
}

.clock{
  margin-top:4px;
  font-size:58px;
  font-weight:950;
  letter-spacing:.5px;
  line-height:1;
}

.header-date{
  color:#e5e7eb;
  font-size:20px;
  font-weight:500;
  line-height:1.2;
}

.health-bar{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  min-width:360px;
  color:#d7e1ef;
  font-size:15px;
  border-top:1px solid rgba(255,255,255,.10);
  padding-top:12px;
  margin-top:10px;
}


.health-item{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 0;
  white-space:nowrap;
}

.health-item.health-online{ color:#9ff5bd; }
.health-item.health-stale{ color:#facc15; }
.health-item.health-error{ color:#fb7185; }
.health-item.health-muted{ color:#9fb2cf; }

.app-credit{
  line-height:1.45;
}

.header-credit{
  justify-self:end;
  align-self:end;
  text-align:right;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
  margin-top:0;
}

.app-credit-version{
  color:#9fb2cf;
  font-size:14px;
  font-weight:800;
  letter-spacing:.2px;
}

.app-credit-line{
  font-size:14px;
  font-weight:800;
  color:#9fb2cf;
}

.app-credit-text{
  color:#9fb2cf;
}

.app-credit-clover{
  color:#2ecc71;
}

.app-credit a{
  color:#2ecc71;
  font-weight:800;
  text-decoration:none;
}

.app-credit a:hover{
  text-decoration:underline;
}

.live-indicator{
  justify-self:auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:0;
  padding:9px 17px;
  border-radius:999px;
  font-size:15px;
  font-weight:900;
  letter-spacing:.6px;
}

.current-label{
  display:flex;
  align-items:center;
  gap:10px;
}

.drop-icon{
  filter:drop-shadow(0 0 12px rgba(236,72,153,.35));
}

@media (max-width: 1000px){
  .header{
    grid-template-columns:1fr;
    gap:18px;
  }

  .header-center{
    min-width:0;
    width:100%;
    grid-column:auto;
    grid-row:auto;
    text-align:center;
    align-items:center;
  }

  .brand-block,
  .app-credit{
    text-align:center;
    justify-self:center;
    margin-top:0;
  }

  .header-credit{
    align-items:center;
    align-self:center;
  }

  .brand-block h1{
    justify-content:center;
    font-size:34px;
  }

  .clock{
    font-size:44px;
  }

  .health-bar{
    min-width:0;
    width:100%;
    flex-wrap:wrap;
    gap:14px;
  }
}

/* Sprint 8: About page */
.view-panel{display:none;}
.view-panel.active{display:block;}

.collection-view{
  margin-top:20px;
}

.collection-card{
  background:
    radial-gradient(circle at 12% 10%, rgba(46,204,113,.16), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)),
    #202b3d;
}

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

.collection-lead{
  margin-top:8px;
  color:#b8c7de;
  font-size:16px;
  line-height:1.6;
}

.collection-status{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
}

.collection-status-label{
  color:#b8c7de;
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
}

.collection-guide{
  margin:0 0 18px;
  padding:20px;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:16px;
  border-radius:22px;
  border:1px solid rgba(74,222,128,.20);
  background:
    radial-gradient(circle at 8% 12%, rgba(74,222,128,.16), transparent 34%),
    rgba(15,23,42,.28);
}

.collection-guide-icon{
  width:52px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:18px;
  background:rgba(46,204,113,.14);
  border:1px solid rgba(74,222,128,.20);
  font-size:28px;
}

.collection-guide-copy h2{
  margin:0 0 8px;
  color:#f8fafc;
  font-size:20px;
  line-height:1.35;
}

.collection-guide-copy p{
  margin:0;
  color:#d7e1ef;
  font-size:15px;
  line-height:1.75;
}

.collection-guide-copy .collection-guide-safety{
  margin-top:8px;
  color:#aebed4;
}

.collection-guide-points{
  margin-top:14px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.collection-guide-points span{
  padding:7px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);
  color:#dce7f5;
  font-size:12px;
  font-weight:800;
}

.collection-new-notice{
  margin:0 0 16px;
  padding:12px 14px;
  display:flex;
  align-items:center;
  gap:9px;
  border-radius:16px;
  border:1px solid rgba(74,222,128,.26);
  background:rgba(46,204,113,.12);
  color:#dcfce7;
  font-size:14px;
}

.collection-new-notice[hidden]{
  display:none;
}

.collection-progress{
  padding:10px 16px;
  border-radius:999px;
  background:rgba(46,204,113,.14);
  border:1px solid rgba(46,204,113,.28);
  color:#9ff5bd;
  font-size:18px;
  font-weight:900;
}

.collection-achievement{
  padding:8px 12px;
  border-radius:999px;
  background:rgba(250,204,21,.10);
  border:1px solid rgba(250,204,21,.22);
  color:#fde68a;
  font-size:13px;
  font-weight:900;
  text-align:right;
}

.collection-share-button{
  border:1px solid rgba(46,204,113,.28);
  background:rgba(46,204,113,.12);
  color:#dcfce7;
  border-radius:999px;
  padding:8px 12px;
  font-size:12px;
  font-weight:900;
  cursor:pointer;
}

.collection-share-button:hover{
  background:rgba(46,204,113,.18);
}

.collection-summary{
  margin-bottom:18px;
  color:#cbd5e1;
  font-size:14px;
}

.collection-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:14px;
}

.collection-item{
  min-height:176px;
  padding:14px;
  border-radius:20px;
  background:rgba(15,23,42,.24);
  border:1px solid rgba(255,255,255,.06);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.collection-item.collected{
  border-color:rgba(46,204,113,.22);
  background:
    radial-gradient(circle at 50% 26%, rgba(46,204,113,.14), transparent 52%),
    rgba(15,23,42,.24);
}

.collection-item.lucky-gluco{
  border-color:rgba(250,204,21,.16);
}

.collection-item.lucky-gluco.collected{
  border-color:rgba(250,204,21,.34);
  background:
    radial-gradient(circle at 50% 24%, rgba(250,204,21,.17), transparent 50%),
    radial-gradient(circle at 50% 62%, rgba(46,204,113,.10), transparent 54%),
    rgba(15,23,42,.24);
}

.collection-image-wrap,
.collection-locked{
  width:96px;
  height:96px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:rgba(15,23,42,.30);
  border:1px solid rgba(255,255,255,.07);
}

.collection-image-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.collection-item.lucky-gluco .collection-image-wrap{
  border-color:rgba(250,204,21,.30);
  box-shadow:0 12px 22px rgba(250,204,21,.08);
}

.collection-locked{
  color:#94a3b8;
  font-size:34px;
  font-weight:900;
  opacity:.72;
}

.collection-number{
  color:#dcfce7;
  font-size:13px;
  font-weight:900;
  text-align:center;
  line-height:1.35;
}

.collection-lucky-badge{
  margin-top:-4px;
  padding:4px 9px;
  border-radius:999px;
  background:rgba(250,204,21,.10);
  border:1px solid rgba(250,204,21,.22);
  color:#fde68a;
  font-size:11px;
  font-weight:900;
  text-align:center;
}

.collection-meta{
  color:#9fb2cf;
  font-size:12px;
  text-align:center;
  line-height:1.45;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.collection-item.locked .collection-number{
  color:#94a3b8;
}

.collection-locked-hint{
  color:#7f91ac;
  font-size:11px;
  line-height:1.4;
}

.unicorn-collection-details{
  margin:0 0 16px;
  padding:0 16px;
  border-radius:18px;
  border:1px solid rgba(196,181,253,.20);
  background:rgba(139,92,246,.07);
}

.unicorn-collection-details summary{
  padding:14px 0;
  cursor:pointer;
  color:#ede9fe;
  font-size:14px;
  font-weight:900;
}

.unicorn-collection-details p{
  margin:0 0 12px;
  color:#c7d2e4;
  font-size:13px;
  line-height:1.7;
}

.unicorn-collection-details .unicorn-collection-safety{
  color:#b8c7de;
}

.about-view{margin-top:20px;}
.about-hero{padding:34px 36px;margin-bottom:18px;background:radial-gradient(circle at 10% 10%, rgba(46,204,113,.16), transparent 42%),#202b3d;}
.about-eyebrow{color:#47e66e;font-size:14px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px;}
.about-hero h2{font-size:46px;line-height:1.08;letter-spacing:-1px;margin-bottom:18px;}
.about-hero p{color:#d7e1ef;font-size:20px;line-height:1.55;}
.about-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.about-card{display:flex;align-items:center;gap:18px;text-decoration:none;color:inherit;min-height:132px;transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;}
.about-card:hover{transform:translateY(-2px);box-shadow:0 18px 34px rgba(0,0,0,.34),0 0 0 1px rgba(46,204,113,.25) inset;}
.about-card span{font-size:34px;filter:drop-shadow(0 0 12px rgba(46,204,113,.18));}
.about-card h3{font-size:22px;margin-bottom:8px;}
.about-card p{color:#9fb2cf;font-size:15px;line-height:1.5;}
.about-footer-note{text-align:right;color:#9fb2cf;font-size:14px;margin-top:18px;}
@media (max-width:1000px){.about-grid{grid-template-columns:1fr}.about-hero h2{font-size:34px}}


/* About page Phase 1: readable bilingual story sections */
.about-view{
  margin-top:20px;
}

.about-first-message{
  padding:46px 44px;
  margin-bottom:18px;
  background:
    radial-gradient(circle at 16% 18%, rgba(46,204,113,.24), transparent 38%),
    radial-gradient(circle at 86% 16%, rgba(59,130,246,.14), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.018)),
    #1e293b;
  border:1px solid rgba(46,204,113,.18);
  overflow:hidden;
}

.about-first-grid,
.about-two-column{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}

.about-first-message-brand{
  text-align:center;
}

.about-brand-statement{
  font-size:64px;
  line-height:1.02;
  letter-spacing:-2.5px;
  margin:0 0 24px;
  font-weight:950;
}

.about-brand-copy{
  max-width:820px;
  margin:0 auto 22px;
}

.about-brand-copy p{
  color:#e6eef8;
  font-size:20px;
  line-height:1.95;
  margin-bottom:14px;
}

.about-brand-quote{
  color:#d1fae5!important;
  font-size:20px!important;
  line-height:1.55!important;
  font-weight:900;
  margin:24px 0 0!important;
}

.about-first-copy h2{
  font-size:44px;
  line-height:1.12;
  letter-spacing:-1px;
  margin-bottom:20px;
}

.about-first-copy p,
.about-language-card p{
  color:#d7e1ef;
  font-size:17px;
  line-height:1.8;
  margin-bottom:14px;
}

.about-copy-jp p{
  line-height:1.9;
}

.about-section-kicker{
  color:#47e66e!important;
  font-size:13px!important;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:12px!important;
}

.about-quote{
  color:#f8fafc!important;
  font-weight:800;
}

.about-section{
  margin-top:18px;
  padding:28px;
}

.about-section-heading{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:22px;
}

.about-section-heading > span{
  width:48px;
  height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  color:#47e66e;
  background:rgba(46,204,113,.12);
  border:1px solid rgba(46,204,113,.24);
  font-weight:950;
}

.about-section-heading h2{
  font-size:30px;
  line-height:1.15;
  margin-bottom:5px;
}

.about-section-heading p{
  color:#9fb2cf;
  font-size:15px;
  font-weight:700;
}

.about-language-card{
  background:rgba(15,23,42,.34);
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;
  padding:22px;
}

.about-language-card h3{
  color:#47e66e;
  font-size:13px;
  letter-spacing:.12em;
  margin-bottom:14px;
}

.about-profile-layout{
  display:grid;
  grid-template-columns:250px 1fr;
  gap:22px;
  align-items:start;
}

.about-profile-card,
.about-mascot-card{
  border:1px solid rgba(255,255,255,.06);
  background:rgba(15,23,42,.34);
  border-radius:22px;
  padding:20px;
  text-align:center;
}

.about-profile-image{
  width:138px;
  height:138px;
  border-radius:50%;
  object-fit:cover;
  display:block;
  margin:0 auto 16px;
  border:3px solid rgba(46,204,113,.38);
  box-shadow:0 16px 32px rgba(0,0,0,.28);
}

.about-profile-card strong{
  display:block;
  font-size:20px;
  margin-bottom:6px;
}

.about-profile-card a{
  color:#47e66e;
  text-decoration:none;
  font-weight:800;
}

.about-gluco-layout{
  grid-template-columns:300px 1fr;
}

.about-mascot-image{
  width:100%;
  max-width:240px;
  display:block;
  margin:0 auto 14px;
  filter:drop-shadow(0 16px 30px rgba(0,0,0,.34));
}

.about-gluco-letter{
  text-align:left;
  background:rgba(46,204,113,.10);
  border:1px solid rgba(46,204,113,.22);
  border-radius:18px;
  padding:16px;
}

.about-gluco-letter p{
  color:#eef7f0;
  line-height:1.65;
  font-size:15px;
  margin-bottom:12px;
}

.about-feature-grid,
.about-status-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
  margin-top:20px;
}

.about-mini-card,
.about-status-grid > div{
  background:rgba(15,23,42,.34);
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;
  padding:18px;
}

.about-mini-card span{
  font-size:26px;
  display:block;
  margin-bottom:10px;
}

.about-mini-card h3{
  font-size:17px;
  margin-bottom:8px;
}

.about-mini-card p,
.about-status-grid span{
  color:#9fb2cf;
  font-size:14px;
  line-height:1.55;
}

.about-mini-card code{
  display:block;
  margin-top:12px;
  white-space:pre-line;
  color:#d1fae5;
  background:rgba(46,204,113,.08);
  border:1px solid rgba(46,204,113,.18);
  border-radius:14px;
  padding:12px;
  font-family:inherit;
  font-weight:800;
  line-height:1.55;
}

.about-link-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:20px;
}

.about-link-row a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:10px 16px;
  border-radius:999px;
  color:#d1fae5;
  background:rgba(46,204,113,.12);
  border:1px solid rgba(46,204,113,.25);
  text-decoration:none;
  font-weight:850;
}

.about-status-grid{
  grid-template-columns:repeat(3, 1fr);
}

.about-status-grid strong{
  display:block;
  font-size:15px;
  margin-bottom:8px;
}

.about-trust-intro{
  margin-bottom:20px;
}

.about-doc-grid{
  margin-top:6px;
}

.about-card h3{
  line-height:1.35;
}

.about-card-planned{
  opacity:.78;
}

.about-future-note{
  margin-top:18px;
  color:#d7e1ef;
  line-height:1.75;
  font-size:15px;
  padding:16px 18px;
  border-radius:16px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.06);
}

@media (max-width:1000px){
  .about-first-message,
  .about-section{
    padding:22px;
  }

  .about-first-grid,
  .about-two-column,
  .about-profile-layout,
  .about-gluco-layout{
    grid-template-columns:1fr;
  }

  .about-first-copy.about-copy-jp{
    order:-1;
  }

  .about-first-copy h2{
    font-size:32px;
  }

  .about-brand-statement{
    font-size:42px;
    letter-spacing:-1.2px;
  }

  .about-brand-copy p{
    font-size:17px;
  }

  .about-section-heading{
    align-items:flex-start;
  }

  .about-section-heading h2{
    font-size:25px;
  }

  .about-feature-grid,
  .about-status-grid{
    grid-template-columns:1fr;
  }

  .about-profile-card,
  .about-mascot-card{
    text-align:center;
  }
}


/* About Phase 2: panel navigation and detail pages */
.about-index-section{
  margin-top:18px;
}

.about-index-lead{
  color:#cbd5e1;
  font-size:16px;
  line-height:1.8;
  margin:-6px 0 20px;
}

.about-section-panel-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:16px;
}

.about-section-panel{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:16px;
  min-height:150px;
  padding:22px;
  border-radius:22px;
  color:#fff;
  text-decoration:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
    #1e293b;
  border:1px solid rgba(148,163,184,.16);
  overflow:hidden;
  transition:transform .2s ease, border-color .2s ease, background .2s ease;
}

.about-section-panel:hover{
  transform:translateY(-2px);
  border-color:rgba(46,204,113,.42);
  background:
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
    #243247;
}

.about-panel-icon{
  width:48px;
  height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  color:#47e66e;
  background:rgba(46,204,113,.12);
  border:1px solid rgba(46,204,113,.24);
  font-size:24px;
  font-weight:950;
}

.about-section-panel h3{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:19px;
  line-height:1.35;
  margin-bottom:10px;
}

.about-panel-title-en{
  color:#fff;
}

.about-panel-title-jp{
  color:#9fb2cf;
  font-size:12px;
  font-weight:750;
  letter-spacing:.02em;
}

.about-section-panel p{
  color:#9fb2cf;
  font-size:15px;
  line-height:1.65;
  padding-right:10px;
}

.about-panel-arrow{
  grid-column:2;
  color:#d1fae5;
  font-size:14px;
  font-weight:900;
  align-self:end;
}

.about-gluco-panel{
  grid-column:span 2;
  grid-template-columns:minmax(280px, 340px) minmax(420px, 1fr);
  gap:22px;
  align-items:center;
  min-height:280px;
  background:
    radial-gradient(circle at 58% 48%, rgba(46,204,113,.18), transparent 34%),
    radial-gradient(circle at 78% 22%, rgba(250,204,21,.10), transparent 28%),
    rgba(15,23,42,.34);
}

.about-gluco-panel-copy{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:16px;
  align-items:start;
}

.about-gluco-panel-copy h3,
.about-gluco-panel-copy p,
.about-gluco-panel-copy .about-panel-arrow{
  grid-column:2;
}

.about-panel-gluco-image{
  width:100%;
  max-width:500px;
  justify-self:center;
  align-self:center;
  filter:drop-shadow(0 24px 36px rgba(0,0,0,.38));
}

.about-detail-body{
  min-height:100vh;
}

.about-detail-wrap{
  width:min(1120px, calc(100% - 32px));
  margin:28px auto 48px;
}

.about-detail-topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:18px;
}

.about-detail-brand{
  color:#fff;
  text-decoration:none;
  font-size:24px;
  font-weight:950;
}

.about-detail-back{
  color:#d1fae5;
  text-decoration:none;
  font-weight:900;
  background:rgba(46,204,113,.12);
  border:1px solid rgba(46,204,113,.25);
  padding:10px 14px;
  border-radius:999px;
}

.about-detail-hero{
  margin-bottom:18px;
  border:1px solid rgba(46,204,113,.18);
  background:
    radial-gradient(circle at top right, rgba(46,204,113,.14), transparent 35%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
    #1e293b;
}

.about-detail-hero h1{
  font-size:42px;
  line-height:1.15;
  margin-bottom:10px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.about-detail-hero p{
  color:#cbd5e1;
  line-height:1.8;
  font-size:16px;
}


.about-detail-hero-with-art{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 190px;
  gap:24px;
  align-items:center;
  overflow:hidden;
}

.about-detail-hero-copy{
  min-width:0;
}

.about-detail-hero-art{
  width:180px;
  max-width:100%;
  justify-self:end;
  align-self:center;
  border-radius:50%;
  filter:drop-shadow(0 22px 34px rgba(0,0,0,.34));
}

.about-detail-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  align-items:start;
}

.about-detail-language-stack{
  grid-template-columns:1fr;
}

.about-detail-card h2{
  color:#47e66e;
  font-size:15px;
  letter-spacing:.12em;
  margin-bottom:18px;
}

.about-detail-title-jp{
  color:#9fb2cf;
  font-size:18px;
  font-weight:800;
  letter-spacing:0;
}

.about-detail-card p,
.about-detail-card li{
  color:#d7e1ef;
  line-height:1.85;
  font-size:16px;
  margin-bottom:14px;
}

.about-detail-card.about-copy-jp p,
.about-detail-card.about-copy-jp li{
  color:#edf5ff;
  font-size:18px;
  line-height:1.95;
}

.about-detail-card.about-copy-en p,
.about-detail-card.about-copy-en li{
  color:#c7d2e3;
  font-size:15.5px;
  line-height:1.8;
}

.about-detail-card ul{
  padding-left:20px;
}

.about-detail-profile{
  display:grid;
  grid-template-columns:230px 1fr;
  gap:20px;
  align-items:start;
}

.about-detail-profile-image{
  width:180px;
  height:180px;
  border-radius:50%;
  object-fit:cover;
  border:3px solid rgba(46,204,113,.38);
  box-shadow:0 18px 34px rgba(0,0,0,.32);
}

.about-detail-gluco-wrap{
  width:min(1480px, calc(100% - 32px));
}

.about-detail-gluco-hero{
  text-align:center;
}

.about-detail-gluco-stage{
  display:grid;
  grid-template-columns:1fr;
  gap:28px;
  align-items:center;
  padding:22px;
  background:
    radial-gradient(circle at 20% 20%, rgba(46,204,113,.18), transparent 34%),
    radial-gradient(circle at 36% 70%, rgba(250,204,21,.10), transparent 30%),
    #202b3d;
}

.about-detail-gluco-visual{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.about-detail-gluco-image-large{
  width:min(100%, 1180px);
  display:block;
  margin:0 auto;
  filter:drop-shadow(0 32px 48px rgba(0,0,0,.46));
}

.about-detail-gluco-image{
  width:100%;
  max-width:420px;
  display:block;
  margin:0 auto;
  filter:drop-shadow(0 28px 42px rgba(0,0,0,.40));
}

.about-detail-letter{
  width:min(100%, 760px);
  background:rgba(46,204,113,.10);
  border:1px solid rgba(46,204,113,.24);
  border-radius:22px;
  padding:22px;
  margin:18px auto 0;
}

.about-detail-feature-grid,
.about-detail-doc-grid,
.about-detail-status-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:16px;
  margin-top:18px;
}

.about-detail-mini-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.018)),
    #1e293b;
  border:1px solid rgba(148,163,184,.15);
  border-radius:18px;
  padding:18px;
}

.about-detail-mini-card h3{
  font-size:18px;
  margin-bottom:8px;
}


.about-detail-mini-head{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin-bottom:10px;
}

.about-detail-mini-icon{
  width:40px;
  height:40px;
  flex:0 0 40px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:rgba(46,204,113,.14);
  border:1px solid rgba(46,204,113,.25);
  font-size:20px;
}

.about-detail-mini-card h3{
  display:flex;
  flex-direction:column;
  gap:3px;
  margin-bottom:0;
  line-height:1.35;
}

.about-detail-mini-title-en{
  color:#fff;
  font-size:17px;
  font-weight:900;
}

.about-detail-mini-title-jp{
  color:#9fb2cf;
  font-size:12px;
  font-weight:760;
}

.about-detail-mini-card p{
  color:#9fb2cf;
  font-size:15px;
  line-height:1.65;
}

.about-detail-mini-card a{
  color:#d1fae5;
  text-decoration:none;
  font-weight:900;
}

.about-detail-mini-card code{
  display:block;
  margin-top:12px;
  white-space:pre-line;
  color:#d1fae5;
  background:rgba(46,204,113,.08);
  border:1px solid rgba(46,204,113,.18);
  border-radius:14px;
  padding:12px;
  font-family:inherit;
  font-weight:800;
  line-height:1.55;
}

/* Development support page */
.support-detail-hero{
  border-color:rgba(132,204,22,.25);
  background:
    radial-gradient(circle at top right, rgba(163,230,53,.17), transparent 38%),
    radial-gradient(circle at 18% 110%, rgba(46,204,113,.12), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
    #1e293b;
}

.support-detail-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:7px;
  width:max-content;
  margin:0 0 14px;
  padding:7px 10px;
  border:1px solid rgba(163,230,53,.25);
  border-radius:999px;
  color:#d9f99d;
  background:rgba(132,204,22,.10);
  font-size:12px;
  font-weight:900;
  letter-spacing:.05em;
}

.support-detail-list{
  display:grid;
  gap:9px;
  margin:18px 0 0;
  padding:0 !important;
  list-style:none;
}

.support-detail-list li{
  position:relative;
  margin:0 !important;
  padding-left:28px;
}

.support-detail-list li::before{
  content:"✓";
  position:absolute;
  top:.15em;
  left:0;
  display:grid;
  place-items:center;
  width:20px;
  height:20px;
  border-radius:50%;
  color:#052e16;
  background:#86efac;
  font-size:12px;
  font-weight:950;
}

.support-detail-actions{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
  margin-top:24px;
}

.support-detail-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:50px;
  padding:13px 20px;
  border:1px solid rgba(217,249,157,.48);
  border-radius:15px;
  color:#052e16;
  background:linear-gradient(135deg, #bef264, #86efac);
  box-shadow:0 14px 30px rgba(34,197,94,.18);
  font-size:16px;
  font-weight:950;
  text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.support-detail-button:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 36px rgba(34,197,94,.27);
  filter:saturate(1.08);
}

.support-detail-button:focus-visible{
  outline:3px solid rgba(191,219,254,.95);
  outline-offset:3px;
}

.support-detail-note{
  max-width:700px;
  margin:0 !important;
  color:#9fb2cf !important;
  font-size:13px !important;
  line-height:1.65 !important;
}

.support-detail-boundary{
  margin-top:18px;
  border:1px solid rgba(250,204,21,.20);
  background:
    radial-gradient(circle at top left, rgba(250,204,21,.08), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)),
    #1e293b;
}

.support-detail-boundary > h2{
  margin-bottom:16px;
  color:#fde68a;
  font-size:17px;
}

.support-detail-boundary-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.support-detail-boundary-grid section{
  min-width:0;
}

.support-detail-boundary-grid h3{
  margin-bottom:8px;
  color:#fff;
  font-size:15px;
}

.support-detail-boundary-grid p{
  margin:0;
  color:#c7d2e3;
  font-size:14px;
  line-height:1.75;
}

.support-detail-links{
  margin-top:18px;
}

.support-detail-links > h2{
  margin-bottom:14px;
  color:#fff;
  font-size:17px;
}

.support-detail-related-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.support-detail-related-links a{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:9px 13px;
  border:1px solid rgba(148,163,184,.22);
  border-radius:12px;
  color:#dbeafe;
  background:rgba(15,23,42,.35);
  font-size:13px;
  font-weight:800;
  text-decoration:none;
}

.support-detail-related-links a:hover{
  border-color:rgba(134,239,172,.45);
  color:#dcfce7;
}

.support-detail-related-links a:focus-visible{
  outline:3px solid rgba(191,219,254,.95);
  outline-offset:3px;
}

@media (max-width:1000px){
  .about-section-panel-grid,
  .about-detail-grid,
  .about-detail-feature-grid,
  .about-detail-doc-grid,
  .about-detail-status-grid,
  .about-detail-profile,
  .about-detail-gluco-stage{
    grid-template-columns:1fr;
  }

  .about-gluco-panel{
    grid-column:span 1;
    grid-template-columns:1fr;
    text-align:left;
  }

  .about-panel-gluco-image{
    max-width:280px;
    order:-1;
  }

  .about-detail-gluco-stage{
    text-align:left;
  }

  .about-detail-gluco-image-large{
    width:100%;
  }


  .about-detail-hero-with-art{
    grid-template-columns:1fr;
    text-align:left;
  }

  .about-detail-hero-art{
    width:170px;
    justify-self:center;
    order:-1;
  }

  .about-detail-hero h1{
    font-size:32px;
  }

  .about-detail-topbar{
    align-items:flex-start;
    flex-direction:column;
  }
}


@media (max-width: 1000px){
  .view-toolbar{
    align-items:flex-start;
    flex-direction:column;
  }

  .language-switch{
    justify-content:flex-start;
  }

  .collection-grid{
    grid-template-columns:repeat(3, 1fr);
  }

  .collection-header{
    flex-direction:column;
  }

  .collection-status{
    width:100%;
    align-items:flex-start;
  }

  .collection-guide{
    grid-template-columns:1fr;
    padding:18px;
  }

  .collection-guide-icon{
    width:46px;
    height:46px;
  }

  .collection-guide-copy h2{
    font-size:19px;
  }
}

@media (max-width: 720px), (max-width: 960px) and (orientation: landscape) and (hover: none) and (pointer: coarse){
  .collection-grid{
    grid-template-columns:repeat(2, 1fr);
  }

  .collection-item{
    min-height:158px;
  }

  .collection-image-wrap,
  .collection-locked{
    width:82px;
    height:82px;
  }

  .chart-header{
    align-items:flex-start;
    flex-direction:column;
  }

  .chart-actions{
    align-items:flex-start;
    width:100%;
  }

  .custom-range-controls{
    justify-content:flex-start;
  }

  .chart-range{
    text-align:left;
  }
}

@media (max-width: 720px), (max-width: 960px) and (orientation: landscape) and (hover: none) and (pointer: coarse){
  .collection-status{
    align-items:flex-start;
  }
}

/* Coming soon views */
.coming-soon-view{
  padding:8px 0 0;
}

.coming-soon-card{
  max-width:860px;
  margin:0 auto;
  padding:34px;
  min-height:300px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:18px;
}

.coming-soon-eyebrow{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid rgba(46,204,113,.32);
  background:rgba(46,204,113,.12);
  color:#bbf7d0;
  border-radius:999px;
  padding:7px 13px;
  font-size:13px;
  font-weight:900;
  letter-spacing:.04em;
}

.coming-soon-card h2{
  font-size:32px;
  line-height:1.25;
}

.coming-soon-lead{
  color:#dbeafe;
  font-size:18px;
  line-height:1.8;
  max-width:720px;
}

.coming-soon-note{
  display:flex;
  gap:12px;
  align-items:flex-start;
  max-width:760px;
  margin-top:8px;
  padding:18px 20px;
  border:1px solid rgba(148,163,184,.18);
  border-radius:18px;
  background:rgba(15,23,42,.30);
  color:#a7f3d0;
}

.coming-soon-note span{
  font-size:22px;
  line-height:1.3;
}

.coming-soon-note p{
  color:#cbd5e1;
  font-size:15px;
  line-height:1.7;
}

@media (max-width: 760px){
  .coming-soon-card{
    padding:26px 22px;
    min-height:260px;
  }

  .coming-soon-card h2{
    font-size:25px;
  }

  .coming-soon-lead{
    font-size:16px;
  }
}



/* Mobile readability pass v1
   Keep the desktop layout intact and make only narrow screens easier to read. */
@media (max-width: 640px){
  html{
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
  }

  body{
    font-size:16px;
  }

  .dashboard{
    width:100%;
    margin:0;
    padding:12px 12px 92px;
  }

  .card{
    padding:20px;
    border-radius:20px;
  }

  .header{
    gap:14px;
    margin-bottom:16px;
    padding-top:4px;
  }

  .brand-block h1{
    font-size:32px;
    margin-bottom:14px;
  }

  .brand-icon{
    font-size:34px;
  }

  .brand-kicker{
    font-size:14px;
    line-height:1.45;
    margin-bottom:14px;
  }

  .brand-story{
    font-size:14px;
    line-height:1.6;
  }

  .last-update,
  .app-credit-version,
  .app-credit-line{
    font-size:13px;
  }

  .clock{
    font-size:42px;
  }

  .header-date{
    font-size:17px;
  }

  .live-indicator{
    min-height:38px;
    padding:8px 16px;
    font-size:14px;
  }

  .view-toolbar{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
    margin-bottom:16px;
    padding-top:14px;
  }

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

  .view-tab{
    min-height:44px;
    padding:10px 12px;
    font-size:14px;
    font-weight:800;
  }

  .language-switch{
    justify-content:flex-start;
    flex-wrap:wrap;
    font-size:14px;
  }

  .language-button{
    min-height:40px;
    padding:8px 14px;
    font-size:14px;
  }

  .hero-grid{
    gap:14px;
    margin-bottom:14px;
  }

  .hero-score-card,
  .hero-current-card{
    min-height:auto;
  }

  .label{
    font-size:22px;
  }

  .score-header{
    align-items:flex-start;
  }

  .score-badge{
    padding:7px 14px;
    font-size:15px;
  }

  .score-main{
    align-items:center;
    gap:16px;
    margin-top:22px;
    transform:none;
  }

  .score-value{
    font-size:82px;
  }

  .score-message{
    max-width:none;
    font-size:18px;
    line-height:1.55;
  }

  .score-meta{
    margin-top:18px;
    font-size:13px;
    line-height:1.6;
  }

  #glucoseValue{
    font-size:72px;
  }

  .current-main{
    gap:20px;
    margin-bottom:22px;
  }

  .arrow{
    font-size:48px;
  }

  .unit{
    font-size:24px;
  }

  .pill-row,
  .status-pill{
    min-height:40px;
    padding:9px 15px;
    font-size:15px;
  }

  .smartguard-row,
  .device-pill{
    min-height:38px;
    font-size:14px;
  }

  .current-small-note{
    font-size:14px;
    line-height:1.5;
  }

  .metric-grid{
    grid-template-columns:1fr;
    gap:12px;
    margin-bottom:14px;
  }

  .metric-card{
    min-height:126px;
    padding:20px;
  }

  .metric-label{
    font-size:17px;
  }

  .metric-label span{
    font-size:12px;
  }

  .metric-value{
    font-size:44px;
  }

  .metric-unit-inline{
    font-size:20px;
  }

  .metric-desc{
    font-size:15px;
    line-height:1.5;
  }

  .metric-desc small{
    font-size:12px;
  }

  .chart-card{
    margin-top:14px;
  }

  .chart-header{
    gap:14px;
  }

  .period-switch{
    justify-content:flex-start;
    gap:8px;
  }

  .period-button{
    min-height:40px;
    padding:8px 13px;
    font-size:13px;
  }

  .chart-range{
    font-size:14px;
    line-height:1.5;
  }

  .chart-legend{
    gap:9px 12px;
    font-size:13px;
    line-height:1.45;
  }

  .chart-wrap{
    height:330px;
  }

  .comment-card-header,
  .letter-section-header,
  .letter-panel-topline{
    gap:10px;
  }

  .comment-tag,
  .letter-section-badge{
    white-space:normal;
    text-align:left;
  }

  .gluco-comment{
    gap:16px;
  }

  .gluco-comment-body{
    padding:20px;
  }

  .gluco-comment-avatar{
    min-height:210px;
  }

  .gluco-comment-image{
    width:150px;
    height:150px;
  }

  .letter-section-title{
    font-size:18px;
  }

  .letter-section-lead,
  .letter-panel-status{
    font-size:14px;
    line-height:1.7;
  }

  .letter-action-panel{
    min-height:auto;
    padding:20px;
  }

  .letter-primary-button,
  .letter-secondary-button,
  .letter-text-link{
    min-height:44px;
    padding:10px 16px;
    font-size:14px;
  }

  .ai-letter-result{
    padding:16px;
    font-size:16px;
    line-height:1.85;
  }

  #comment{
    font-size:17px;
    line-height:1.8;
  }

  .coming-soon-card{
    padding:24px 20px;
  }

  .coming-soon-card h2{
    font-size:26px;
  }

  .coming-soon-lead,
  .coming-soon-note p{
    font-size:16px;
  }
}

@media (max-width: 420px){
  .dashboard{
    padding-left:10px;
    padding-right:10px;
  }

  .card{
    padding:18px;
  }

  .view-tabs{
    grid-template-columns:1fr 1fr;
  }

  .score-main{
    gap:14px;
  }

  .score-gluco,
  .score-gluco-image{
    width:86px;
    height:86px;
    flex-basis:86px;
  }

  .score-value{
    font-size:76px;
  }

  #glucoseValue{
    font-size:68px;
  }

  .metric-value{
    font-size:42px;
  }

  .chart-wrap{
    height:315px;
  }
}


/* Mobile app navigation phase 1
   The desktop dashboard stays intact. Phones get purpose-based pages. */
.header-status-block,
.header-time-block{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

.mobile-range-card,
.mobile-more-panel,
.mobile-bottom-nav{
  display:none;
}

@media (max-width: 720px), (max-width: 960px) and (orientation: landscape) and (hover: none) and (pointer: coarse){
  html{
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
  }

  body{
    min-width:0;
  }

  .dashboard{
    width:100%;
    margin:0;
    padding:10px 10px calc(104px + env(safe-area-inset-bottom));
  }

  /* Compact two-row mobile header: brand/time above, live/credit below. */
  .header{
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    grid-template-areas:
      "brand time"
      "status credit";
    align-items:center;
    gap:10px 14px;
    margin:0 0 14px;
    padding:8px 4px 14px;
    border-bottom:1px solid rgba(159,178,207,.22);
    text-align:left;
  }

  .brand-block{
    grid-area:brand;
    min-width:0;
    text-align:left;
    justify-self:start;
  }

  .brand-block h1{
    justify-content:flex-start;
    gap:7px;
    margin:0 0 6px;
    font-size:27px;
    letter-spacing:-.04em;
    white-space:nowrap;
  }

  .brand-icon{
    font-size:28px;
  }

  .brand-kicker{
    margin:0;
    color:#a7f3d0;
    font-size:12px;
    line-height:1.3;
  }

  .brand-story{
    display:none;
  }

  .header-center{
    display:contents;
  }

  .header-time-block{
    grid-area:time;
    align-items:flex-end;
    justify-self:end;
    gap:3px;
  }

  .clock{
    margin:0;
    font-size:38px;
    line-height:.95;
  }

  .header-date{
    color:#dbeafe;
    font-size:13px;
    white-space:nowrap;
  }

  .header-status-block{
    grid-area:status;
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    flex-wrap:wrap;
    gap:7px 9px;
    min-width:0;
  }

  .live-indicator{
    min-height:32px;
    margin:0;
    padding:6px 11px;
    font-size:12px;
  }

  .live-dot{
    width:8px;
    height:8px;
  }

  .last-update{
    margin:0;
    font-size:12px;
    white-space:nowrap;
  }

  .header-credit{
    grid-area:credit;
    justify-self:end;
    align-self:center;
    align-items:flex-end;
    gap:0;
    text-align:right;
  }

  .app-credit-version,
  .app-credit-line{
    font-size:11px;
    line-height:1.35;
    white-space:nowrap;
  }

  /* Desktop navigation is replaced by the bottom mobile navigation. */
  .view-toolbar{
    display:none;
  }

  .mobile-bottom-nav{
    position:fixed;
    z-index:1000;
    left:10px;
    right:10px;
    bottom:max(8px, env(safe-area-inset-bottom));
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:4px;
    padding:7px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:24px;
    background:rgba(16,24,40,.92);
    box-shadow:0 18px 50px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.08);
    -webkit-backdrop-filter:blur(18px);
    backdrop-filter:blur(18px);
  }

  .mobile-bottom-nav-button{
    min-width:0;
    min-height:58px;
    border:0;
    border-radius:18px;
    background:transparent;
    color:#b9c6d8;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    padding:5px 2px;
    font-size:11px;
    font-weight:800;
    cursor:pointer;
  }

  .mobile-bottom-nav-button.active{
    background:rgba(46,204,113,.18);
    color:#eafff1;
    box-shadow:inset 0 0 0 1px rgba(72,235,145,.28);
  }

  .mobile-bottom-nav-icon{
    min-height:23px;
    display:flex;
    align-items:center;
    font-size:20px;
    line-height:1;
  }

  /* Shared mobile page rhythm. */
  #liveView{
    min-width:0;
  }

  .hero-grid,
  .metric-grid{
    gap:12px;
    margin-bottom:12px;
  }

  .card{
    border-radius:20px;
  }

  .mobile-range-card{
    margin:0 0 12px;
    padding:18px;
  }

  .mobile-range-copy .label{
    font-size:18px;
  }

  .mobile-range-copy p{
    margin:5px 0 0;
    color:#9fb2cf;
    font-size:13px;
    line-height:1.55;
  }

  .mobile-range-layout{
    display:grid;
    grid-template-columns:150px minmax(0, 1fr);
    align-items:center;
    gap:18px;
    margin-top:16px;
  }

  .mobile-range-donut{
    width:150px;
    height:150px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:conic-gradient(
      #22c55e 0deg var(--tir-angle),
      #fbbf24 var(--tir-angle) var(--tar-angle),
      #fb7185 var(--tar-angle) 360deg
    );
    box-shadow:0 12px 30px rgba(0,0,0,.22);
  }

  .mobile-range-donut-inner{
    width:108px;
    height:108px;
    border-radius:50%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background:#1b2535;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  }

  .mobile-range-donut-inner strong{
    font-size:31px;
    line-height:1;
  }

  .mobile-range-donut-inner span{
    margin-top:5px;
    color:#9fb2cf;
    font-size:12px;
    font-weight:900;
    letter-spacing:.08em;
  }

  .mobile-range-values{
    display:grid;
    gap:9px;
  }

  .mobile-range-value{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    border-radius:14px;
    padding:10px 12px;
    background:rgba(255,255,255,.05);
  }

  .mobile-range-value span{
    font-size:13px;
    font-weight:900;
  }

  .mobile-range-value strong{
    font-size:22px;
  }

  .mobile-range-value.tir strong{ color:#42e681; }
  .mobile-range-value.tar strong{ color:#fbbf24; }
  .mobile-range-value.tbr strong{ color:#fb7185; }

  /* Monitor page: current glucose, graph, and range balance. */
  body.mobile-page-monitor #liveView > .hero-grid{
    display:block;
  }

  body.mobile-page-monitor #liveView .hero-score-card,
  body.mobile-page-monitor #liveView > .metric-grid,
  body.mobile-page-monitor #liveView > .comment-card,
  body.mobile-page-monitor #mobileMorePanel{
    display:none;
  }

  body.mobile-page-monitor #liveView .hero-current-card,
  body.mobile-page-monitor #liveView > .chart-card,
  body.mobile-page-monitor #mobileRangeCard{
    display:block;
  }

  body.mobile-page-monitor #liveView .hero-current-card{
    margin-bottom:12px;
  }

  body.mobile-page-monitor .chart-card{
    margin-top:0;
    padding:16px 12px;
  }

  body.mobile-page-monitor .chart-wrap{
    height:300px;
  }

  body.mobile-page-monitor .chart-legend{
    font-size:11px;
    gap:6px 10px;
  }

  body.mobile-page-monitor .period-switch{
    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    width:100%;
    gap:5px;
  }

  body.mobile-page-monitor .period-button{
    min-width:0;
    padding:8px 4px;
    font-size:11px;
  }

  /* Reflection page: score and key metrics only. */
  body.mobile-page-reflection #liveView > .hero-grid{
    display:block;
  }

  body.mobile-page-reflection #liveView .hero-current-card,
  body.mobile-page-reflection #liveView > .chart-card,
  body.mobile-page-reflection #liveView > .comment-card,
  body.mobile-page-reflection #mobileRangeCard,
  body.mobile-page-reflection #mobileMorePanel{
    display:none;
  }

  body.mobile-page-reflection #liveView .hero-score-card{
    display:block;
    margin-bottom:12px;
  }

  body.mobile-page-reflection #liveView > .metric-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
  }

  body.mobile-page-reflection .metric-card{
    min-height:118px;
    padding:16px;
  }

  body.mobile-page-reflection .metric-label{
    font-size:14px;
  }

  body.mobile-page-reflection .metric-value{
    font-size:37px;
  }

  body.mobile-page-reflection .metric-desc{
    font-size:13px;
  }

  body.mobile-page-reflection .metric-desc small{
    font-size:10px;
  }

  /* Letter page: a full-width reading experience. */
  body.mobile-page-letter #liveView > .hero-grid,
  body.mobile-page-letter #liveView > .metric-grid,
  body.mobile-page-letter #liveView > .chart-card,
  body.mobile-page-letter #mobileRangeCard,
  body.mobile-page-letter #mobileMorePanel{
    display:none;
  }

  body.mobile-page-letter #liveView > .comment-card{
    display:block;
    margin:0;
    padding:18px 14px;
  }

  body.mobile-page-letter .comment-card-header{
    align-items:flex-start;
    flex-direction:column;
  }

  body.mobile-page-letter .gluco-letter-controls,
  body.mobile-page-letter .gluco-letter-controls-inner,
  body.mobile-page-letter .gluco-letter-control-group{
    width:100%;
  }

  body.mobile-page-letter .gluco-letter-mode-toggle{
    display:grid;
    grid-template-columns:1fr 1fr;
    width:100%;
  }

  body.mobile-page-letter .gluco-comment{
    display:block;
  }

  body.mobile-page-letter .gluco-comment-avatar{
    min-height:0;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    gap:12px;
    padding:12px 4px 16px;
  }

  body.mobile-page-letter .gluco-comment-image{
    width:78px;
    height:78px;
    flex:0 0 auto;
  }

  body.mobile-page-letter .gluco-letter-number{
    position:static;
    order:2;
    font-size:12px;
  }

  body.mobile-page-letter .gluco-lucky-badge{
    position:static;
    order:3;
  }

  body.mobile-page-letter .gluco-comment-body{
    padding:0;
  }

  body.mobile-page-letter .letter-section,
  body.mobile-page-letter .letter-action-panel{
    padding:18px 16px;
    border-radius:18px;
  }

  body.mobile-page-letter .letter-action-grid{
    grid-template-columns:1fr;
  }

  body.mobile-page-letter #comment,
  body.mobile-page-letter .ai-letter-result{
    font-size:19px;
    line-height:1.9;
    letter-spacing:.01em;
  }

  body.mobile-page-letter .letter-section-lead,
  body.mobile-page-letter .letter-panel-status{
    font-size:14px;
    line-height:1.75;
  }

  /* More page: routes to secondary features and language settings. */
  body.mobile-page-more #liveView > .hero-grid,
  body.mobile-page-more #liveView > .metric-grid,
  body.mobile-page-more #liveView > .chart-card,
  body.mobile-page-more #liveView > .comment-card,
  body.mobile-page-more #mobileRangeCard{
    display:none;
  }

  body.mobile-page-more #mobileMorePanel{
    display:block;
  }

  .mobile-more-panel{
    padding:20px;
  }

  .mobile-more-heading{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:18px;
  }

  .mobile-more-icon{
    width:48px;
    height:48px;
    border-radius:16px;
    display:grid;
    place-items:center;
    background:rgba(46,204,113,.14);
    color:#a7f3d0;
    font-size:22px;
    font-weight:900;
  }

  .mobile-more-heading h2{
    font-size:26px;
  }

  .mobile-more-heading p{
    margin-top:3px;
    color:#9fb2cf;
    font-size:13px;
    line-height:1.5;
  }

  .mobile-more-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
  }

  .mobile-more-link{
    min-height:118px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:18px;
    background:rgba(255,255,255,.045);
    color:#fff;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:6px;
    padding:16px;
    text-align:left;
  }

  .mobile-more-link > span{
    font-size:24px;
  }

  .mobile-more-link strong{
    font-size:17px;
  }


.gluco-peek-decor,
.mobile-more-gluco-slot{
  display:none;
}

.gluco-peek-image,
.mobile-more-gluco-image{
  display:block;
  width:100%;
  height:auto;
}

.mobile-more-link small{
    color:#9fb2cf;
    font-size:12px;
  }

  .mobile-more-language{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    margin-top:18px;
    padding-top:16px;
    border-top:1px solid rgba(255,255,255,.08);
    color:#9fb2cf;
    font-size:13px;
  }

  .mobile-more-links{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    margin-top:14px;
  }

  .mobile-more-links a{
    border-radius:999px;
    padding:9px 12px;
    background:rgba(59,130,246,.12);
    color:#bfdbfe;
    font-size:12px;
    font-weight:800;
    text-decoration:none;
  }

  /* Non-Live mobile views still use the More tab as their home. */
  body.mobile-secondary-view .mobile-bottom-nav-button[data-mobile-page="more"]{
    background:rgba(46,204,113,.18);
    color:#eafff1;
    box-shadow:inset 0 0 0 1px rgba(72,235,145,.28);
  }
}

@media (max-width: 390px){
  .brand-block h1{
    font-size:24px;
  }

  .clock{
    font-size:34px;
  }

  .mobile-range-layout{
    grid-template-columns:132px minmax(0, 1fr);
    gap:12px;
  }

  .mobile-range-donut{
    width:132px;
    height:132px;
  }

  .mobile-range-donut-inner{
    width:94px;
    height:94px;
  }

  body.mobile-page-reflection .metric-value{
    font-size:34px;
  }

  body.mobile-page-letter #comment,
  body.mobile-page-letter .ai-letter-result{
    font-size:18px;
  }
}

/* ==========================================================================
   Mobile Navigation Phase 2
   Five focused phone pages while preserving the desktop dashboard.
   ========================================================================== */

.mobile-view-return-button{
  display:none;
}

.force-desktop-view .mobile-view-return-button{
  position:fixed;
  z-index:2000;
  right:18px;
  bottom:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:10px 15px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(16,24,40,.92);
  color:#eafff1;
  box-shadow:0 12px 32px rgba(0,0,0,.38);
  font:800 13px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif;
  cursor:pointer;
}

@media (max-width: 720px), (max-width: 960px) and (orientation: landscape) and (hover: none) and (pointer: coarse){
  :root{
    --mobile-ui-font:13px;
    --mobile-small-font:11px;
    --mobile-body-font:15px;
    --mobile-letter-font:18px;
    --mobile-nav-height:74px;
  }

  html[lang="ja"],
  html[lang="en"]{
    font-size:16px;
  }

  body{
    font-size:var(--mobile-ui-font);
  }

  .dashboard{
    padding:6px 6px calc(var(--mobile-nav-height) + 16px + env(safe-area-inset-bottom));
  }

  .header{
    gap:6px 10px;
    margin-bottom:8px;
    padding:4px 2px 9px;
  }

  .brand-block h1{
    font-size:24px;
  }

  .brand-icon{
    font-size:24px;
  }

  .brand-kicker,
  .last-update,
  .header-date{
    font-size:var(--mobile-small-font);
  }

  .clock{
    font-size:34px;
  }

  .live-indicator{
    min-height:28px;
    padding:5px 9px;
    font-size:var(--mobile-small-font);
  }

  .app-credit-version,
  .app-credit-line{
    font-size:10px;
  }

  .mobile-bottom-nav{
    left:6px;
    right:6px;
    bottom:max(5px, env(safe-area-inset-bottom));
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:2px;
    padding:5px;
    border-radius:20px;
  }

  .mobile-bottom-nav-button{
    min-height:54px;
    gap:2px;
    padding:4px 1px;
    border-radius:15px;
    font-size:9px;
    line-height:1.15;
    letter-spacing:-.01em;
  }

  .mobile-bottom-nav-icon{
    min-height:20px;
    font-size:17px;
  }

  .mobile-more-language,
  .mobile-display-switch{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    margin-top:16px;
    padding-top:14px;
    border-top:1px solid rgba(255,255,255,.08);
    color:#9fb2cf;
    font-size:var(--mobile-ui-font);
  }

  .mobile-display-switch{
    margin-top:10px;
    padding-top:10px;
  }

  .mobile-display-button{
    min-height:36px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:999px;
    padding:7px 12px;
    background:rgba(255,255,255,.045);
    color:#cbd5e1;
    font-size:12px;
    font-weight:800;
    cursor:pointer;
  }

  /* Reset all Live dashboard pieces before enabling each focused page. */
  body.mobile-page-glucose #liveView > .hero-grid,
  body.mobile-page-graph #liveView > .hero-grid,
  body.mobile-page-reflection #liveView > .hero-grid{
    display:block;
  }

  body.mobile-page-glucose #liveView .hero-score-card,
  body.mobile-page-glucose #liveView > .metric-grid,
  body.mobile-page-glucose #liveView > .chart-card,
  body.mobile-page-glucose #liveView > .comment-card,
  body.mobile-page-glucose #mobileMorePanel,
  body.mobile-page-graph #liveView .hero-score-card,
  body.mobile-page-graph #liveView > .metric-grid,
  body.mobile-page-graph #liveView > .comment-card,
  body.mobile-page-graph #mobileMorePanel{
    display:none;
  }

  /* -----------------------------------------------------------------------
     1. Glucose: no-scroll glance view.
     ----------------------------------------------------------------------- */
  body.mobile-page-glucose{
    overflow:hidden;
  }

  body.mobile-page-glucose .dashboard{
    height:100dvh;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }

  body.mobile-page-glucose #liveView{
    flex:1 1 auto;
    min-height:0;
    display:grid;
    grid-template-rows:minmax(170px,1.02fr) minmax(150px,.82fr);
    gap:8px;
    overflow:hidden;
  }

  body.mobile-page-glucose #liveView > .hero-grid{
    min-height:0;
    margin:0;
  }

  body.mobile-page-glucose #liveView .hero-current-card,
  body.mobile-page-glucose #mobileRangeCard{
    display:flex;
  }

  body.mobile-page-glucose #liveView .hero-current-card{
    height:100%;
    min-height:0;
    margin:0;
    padding:14px;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
  }

  body.mobile-page-glucose .current-label,
  body.mobile-page-glucose .current-status-row,
  body.mobile-page-glucose .current-device-row,
  body.mobile-page-glucose .current-small-note{
    display:none;
  }

  body.mobile-page-glucose .current-main{
    justify-content:center;
    flex-wrap:nowrap;
    gap:12px;
    margin:0;
  }

  body.mobile-page-glucose #glucoseValue{
    font-size:clamp(74px,23vw,112px);
    line-height:.9;
  }

  body.mobile-page-glucose .current-delta{
    top:-.8em;
    font-size:16px;
  }

  body.mobile-page-glucose .arrow{
    font-size:clamp(44px,13vw,66px);
  }

  body.mobile-page-glucose .unit{
    align-self:flex-end;
    margin-bottom:9px;
    font-size:18px;
  }

  body.mobile-page-glucose #mobileRangeCard{
    min-height:0;
    margin:0;
    padding:12px 14px;
    flex-direction:column;
    justify-content:center;
  }

  body.mobile-page-glucose .mobile-range-copy{
    display:none;
  }

  body.mobile-page-glucose .mobile-range-layout{
    grid-template-columns:minmax(112px,132px) minmax(0,1fr);
    gap:12px;
    width:100%;
    margin:0;
  }

  body.mobile-page-glucose .mobile-range-donut{
    width:min(31vw,132px);
    height:min(31vw,132px);
  }

  body.mobile-page-glucose .mobile-range-donut-inner{
    width:min(22vw,94px);
    height:min(22vw,94px);
  }

  body.mobile-page-glucose .mobile-range-donut-inner strong{
    font-size:26px;
  }

  body.mobile-page-glucose .mobile-range-values{
    gap:6px;
  }

  body.mobile-page-glucose .mobile-range-value{
    min-height:36px;
    padding:6px 10px;
  }

  body.mobile-page-glucose .mobile-range-value strong{
    font-size:19px;
  }

  /* -----------------------------------------------------------------------
     2. Graph: graph-first page with compact glucose and balance cards.
     ----------------------------------------------------------------------- */
  body.mobile-page-graph{
    overflow:hidden;
  }

  body.mobile-page-graph .dashboard{
    height:100dvh;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }

  body.mobile-page-graph #liveView{
    flex:1 1 auto;
    min-height:0;
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto minmax(0,1fr);
    grid-template-areas:
      "current range"
      "chart chart";
    gap:7px;
    overflow:hidden;
  }

  body.mobile-page-graph #liveView > .hero-grid{
    display:contents;
  }

  body.mobile-page-graph #liveView .hero-current-card{
    grid-area:current;
    display:flex;
    min-height:104px;
    margin:0;
    padding:10px 12px;
    flex-direction:column;
    justify-content:center;
  }

  body.mobile-page-graph #mobileRangeCard{
    grid-area:range;
    display:flex;
    min-height:104px;
    margin:0;
    padding:8px 10px;
    align-items:center;
    justify-content:center;
  }

  body.mobile-page-graph #liveView > .chart-card{
    grid-area:chart;
    display:flex;
    min-height:0;
    margin:0;
    padding:9px 8px;
    flex-direction:column;
    overflow:hidden;
  }

  body.mobile-page-graph .current-label,
  body.mobile-page-graph .current-status-row,
  body.mobile-page-graph .current-device-row,
  body.mobile-page-graph .current-small-note{
    display:none;
  }

  body.mobile-page-graph .current-main{
    justify-content:center;
    gap:7px;
    margin:0;
  }

  body.mobile-page-graph #glucoseValue{
    font-size:46px;
    line-height:.9;
  }

  body.mobile-page-graph .current-delta{
    top:-.65em;
    font-size:12px;
  }

  body.mobile-page-graph .arrow{
    font-size:31px;
  }

  body.mobile-page-graph .unit{
    font-size:13px;
  }

  body.mobile-page-graph .mobile-range-copy,
  body.mobile-page-graph .mobile-range-values{
    display:none;
  }

  body.mobile-page-graph .mobile-range-layout{
    display:block;
    margin:0;
  }

  body.mobile-page-graph .mobile-range-donut{
    width:92px;
    height:92px;
  }

  body.mobile-page-graph .mobile-range-donut-inner{
    width:66px;
    height:66px;
  }

  body.mobile-page-graph .mobile-range-donut-inner strong{
    font-size:20px;
  }

  body.mobile-page-graph .mobile-range-donut-inner span{
    font-size:9px;
  }

  body.mobile-page-graph .chart-header{
    flex:0 0 auto;
    gap:5px;
    margin-bottom:4px;
  }

  body.mobile-page-graph .chart-header .label{
    font-size:14px;
  }

  body.mobile-page-graph .chart-legend{
    display:none;
  }

  body.mobile-page-graph .chart-actions{
    gap:4px;
  }

  body.mobile-page-graph .period-switch{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    width:100%;
    gap:3px;
  }

  body.mobile-page-graph .period-button{
    min-width:0;
    padding:5px 2px;
    font-size:9px;
  }

  body.mobile-page-graph .chart-range{
    font-size:9px;
  }

  body.mobile-page-graph .chart-wrap{
    flex:1 1 auto;
    min-height:0;
    height:auto;
  }

  /* Existing reflection, letter and more pages use identical type tokens in
     Japanese and English so switching language does not resize the layout. */
  body.mobile-page-reflection .metric-label,
  body.mobile-page-more .mobile-more-link small,
  body.mobile-page-letter .letter-section-lead,
  body.mobile-page-letter .letter-panel-status{
    font-size:var(--mobile-small-font);
  }

  body.mobile-page-reflection .metric-desc,
  body.mobile-page-more .mobile-more-heading p{
    font-size:12px;
  }

  body.mobile-page-letter #comment,
  body.mobile-page-letter .ai-letter-result{
    font-size:var(--mobile-letter-font);
    line-height:1.8;
  }

  body.mobile-page-letter .letter-section,
  body.mobile-page-letter .letter-action-panel{
    padding:16px 14px;
  }

  body.mobile-page-more .mobile-more-heading h2{
    font-size:23px;
  }

  body.mobile-page-more .mobile-more-link strong{
    font-size:15px;
  }
}

/* GuardianMonitor-like landscape desk mode for the Graph tab. */
@media (max-width: 960px) and (orientation: landscape){
  html:not(.force-desktop-view) body.mobile-page-graph .dashboard{
    padding:5px 6px calc(62px + env(safe-area-inset-bottom));
  }

  html:not(.force-desktop-view) body.mobile-page-graph .header{
    display:none;
  }

  html:not(.force-desktop-view) body.mobile-page-graph #liveView{
    grid-template-columns:minmax(0,2.55fr) minmax(190px,.75fr);
    grid-template-rows:1fr 1fr;
    grid-template-areas:
      "chart current"
      "chart range";
    gap:7px;
  }

  html:not(.force-desktop-view) body.mobile-page-graph #liveView > .chart-card{
    padding:7px;
  }

  html:not(.force-desktop-view) body.mobile-page-graph #liveView .hero-current-card,
  html:not(.force-desktop-view) body.mobile-page-graph #mobileRangeCard{
    min-height:0;
    height:100%;
  }

  html:not(.force-desktop-view) body.mobile-page-graph #glucoseValue{
    font-size:clamp(54px,9vw,86px);
  }

  html:not(.force-desktop-view) body.mobile-page-graph .arrow{
    font-size:clamp(34px,5vw,54px);
  }

  html:not(.force-desktop-view) body.mobile-page-graph .unit{
    font-size:14px;
  }

  html:not(.force-desktop-view) body.mobile-page-graph .mobile-range-donut{
    width:min(24vh,126px);
    height:min(24vh,126px);
  }

  html:not(.force-desktop-view) body.mobile-page-graph .mobile-range-donut-inner{
    width:min(17vh,88px);
    height:min(17vh,88px);
  }

  html:not(.force-desktop-view) body.mobile-page-graph .chart-header{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
  }

  html:not(.force-desktop-view) body.mobile-page-graph .chart-actions{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
  }

  html:not(.force-desktop-view) body.mobile-page-graph .chart-range{
    white-space:nowrap;
  }

  html:not(.force-desktop-view) body.mobile-page-graph .mobile-bottom-nav,
  html:not(.force-desktop-view) body.mobile-page-graph + .mobile-bottom-nav{
    min-height:0;
  }

  html:not(.force-desktop-view) .mobile-bottom-nav{
    left:50%;
    right:auto;
    width:min(620px,76vw);
    transform:translateX(-50%);
    bottom:max(3px,env(safe-area-inset-bottom));
    padding:4px;
  }

  html:not(.force-desktop-view) .mobile-bottom-nav-button{
    min-height:44px;
    flex-direction:row;
    gap:5px;
    font-size:10px;
  }

  html:not(.force-desktop-view) .mobile-bottom-nav-icon{
    min-height:0;
    font-size:15px;
  }
}


/* ==========================================================================
   Mobile Navigation Phase 2.1 refinements
   - Keep phone layout active in landscape
   - Prevent TIR text from touching the donut ring
   - Fit Reflection on one screen where practical
   ========================================================================== */

@media (max-width: 720px), (max-width: 960px) and (orientation: landscape) and (hover: none) and (pointer: coarse){
  .mobile-range-donut-inner strong{
    max-width:100%;
    padding:0 4px;
    font-size:clamp(18px,5.7vw,24px);
    line-height:.95;
    letter-spacing:-.055em;
    white-space:nowrap;
    text-align:center;
  }

  body.mobile-page-graph .mobile-range-donut-inner strong{
    font-size:clamp(16px,3.2vw,20px);
  }

  body.mobile-page-reflection{
    overflow:hidden;
  }

  body.mobile-page-reflection .dashboard{
    height:100dvh;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }

  body.mobile-page-reflection #liveView{
    flex:1 1 auto;
    min-height:0;
    display:grid;
    grid-template-rows:minmax(150px,.78fr) minmax(0,1.22fr);
    gap:8px;
    overflow:hidden;
  }

  body.mobile-page-reflection #liveView > .hero-grid{
    min-height:0;
    margin:0;
  }

  body.mobile-page-reflection #liveView .hero-score-card{
    height:100%;
    min-height:0;
    margin:0;
    padding:11px 13px;
  }

  body.mobile-page-reflection .score-header{
    min-height:30px;
    margin-bottom:4px;
  }

  body.mobile-page-reflection .score-header .label{
    font-size:17px;
  }

  body.mobile-page-reflection .score-badge{
    padding:6px 10px;
    font-size:12px;
  }

  body.mobile-page-reflection .score-main{
    display:grid;
    grid-template-columns:82px minmax(0,1fr);
    align-items:center;
    gap:10px;
    margin:0;
  }

  body.mobile-page-reflection .score-gluco,
  body.mobile-page-reflection .score-gluco-image{
    width:76px;
    height:76px;
  }

  body.mobile-page-reflection .score-value{
    font-size:clamp(54px,16vw,72px);
    line-height:.86;
  }

  body.mobile-page-reflection .score-message{
    margin-top:3px;
    font-size:14px;
    line-height:1.42;
  }

  body.mobile-page-reflection .score-meta{
    margin-top:5px;
    font-size:10px;
    line-height:1.25;
  }

  body.mobile-page-reflection #liveView > .metric-grid{
    min-height:0;
    height:100%;
    margin:0;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(3,minmax(0,1fr));
    gap:7px;
  }

  body.mobile-page-reflection .metric-card{
    min-height:0;
    height:100%;
    padding:9px 10px;
    border-radius:16px;
    overflow:hidden;
  }

  body.mobile-page-reflection .metric-label{
    font-size:11px;
    line-height:1.15;
  }

  body.mobile-page-reflection .metric-value{
    margin-top:2px;
    font-size:clamp(27px,8.8vw,38px);
    line-height:.95;
    letter-spacing:-.045em;
  }

  body.mobile-page-reflection .metric-desc{
    margin-top:2px;
    font-size:10px;
    line-height:1.15;
  }

  body.mobile-page-reflection .metric-desc small{
    display:none;
  }
}

@media (max-width: 960px) and (orientation: landscape) and (hover: none) and (pointer: coarse){
  html:not(.force-desktop-view) body.mobile-page-graph{
    overflow:hidden;
  }

  html:not(.force-desktop-view) body.mobile-page-graph .mobile-range-donut-inner strong{
    font-size:clamp(15px,2.4vw,19px);
  }
}

/* ==========================================================================
   Mobile Navigation Phase 2.2 refinements
   - Landscape desk mode is optimized only for the Graph tab
   - Respect iPhone landscape safe areas
   - Keep current glucose inside its card
   - Show TAR / TBR beside the compact graph donut
   - Visually center donut labels
   - Give Gluco more presence on the Letter tab
   ========================================================================== */

@media (max-width: 720px), (max-width: 960px) and (orientation: landscape) and (hover: none) and (pointer: coarse){
  .mobile-range-donut-inner{
    display:grid;
    place-content:center;
    justify-items:center;
    gap:2px;
    box-sizing:border-box;
    padding:0;
    transform:translateY(-1px);
  }

  .mobile-range-donut-inner strong{
    display:block;
    margin:0;
    line-height:.92;
  }

  .mobile-range-donut-inner span{
    display:block;
    margin:1px 0 0;
    line-height:1;
  }

  /* The graph donut repeats TIR in its center, so the compact side list only
     needs TAR and TBR. */
  body.mobile-page-graph .mobile-range-layout{
    display:grid;
    grid-template-columns:auto minmax(42px,1fr);
    align-items:center;
    gap:7px;
    width:100%;
    margin:0;
  }

  body.mobile-page-graph .mobile-range-values{
    display:grid;
    gap:5px;
    min-width:0;
  }

  body.mobile-page-graph .mobile-range-value.tir{
    display:none;
  }

  body.mobile-page-graph .mobile-range-value{
    display:grid;
    gap:1px;
    min-height:0;
    padding:3px 4px;
    border-radius:9px;
    background:rgba(255,255,255,.045);
  }

  body.mobile-page-graph .mobile-range-value span{
    font-size:8px;
    line-height:1;
  }

  body.mobile-page-graph .mobile-range-value strong{
    font-size:12px;
    line-height:1;
    white-space:nowrap;
  }

  /* Gluco is a central part of the Letter experience, not a small utility
     thumbnail. */
  body.mobile-page-letter .gluco-comment-avatar{
    display:grid;
    grid-template-columns:minmax(118px,38vw) minmax(0,1fr);
    align-items:center;
    gap:14px;
    padding:12px 4px 18px;
  }

  body.mobile-page-letter .gluco-comment-image{
    width:clamp(118px,38vw,154px);
    height:clamp(118px,38vw,154px);
    grid-column:1;
    grid-row:1 / span 2;
    object-fit:cover;
  }

  body.mobile-page-letter .gluco-letter-number,
  body.mobile-page-letter .gluco-lucky-badge{
    grid-column:2;
    width:fit-content;
    max-width:100%;
  }
}

/* On a phone in landscape, only the Graph tab becomes a fixed one-screen desk
   display. Every other mobile tab remains scrollable, so rotating the phone
   cannot crop the letter, reflection, glucose, or more pages. */
@media (max-width: 960px) and (orientation: landscape) and (hover: none) and (pointer: coarse){
  html:not(.force-desktop-view) body:not(.mobile-page-graph){
    overflow-x:hidden;
    overflow-y:auto;
  }

  html:not(.force-desktop-view) body:not(.mobile-page-graph) .dashboard{
    width:100%;
    min-height:100dvh;
    height:auto;
    overflow:visible;
    padding-left:max(10px, env(safe-area-inset-left));
    padding-right:max(10px, env(safe-area-inset-right));
    padding-bottom:calc(var(--mobile-nav-height) + 22px + env(safe-area-inset-bottom));
  }

  html:not(.force-desktop-view) body:not(.mobile-page-graph) #liveView{
    min-height:0;
    height:auto;
    overflow:visible;
  }

  html:not(.force-desktop-view) body.mobile-page-glucose #liveView,
  html:not(.force-desktop-view) body.mobile-page-reflection #liveView{
    display:block;
  }

  html:not(.force-desktop-view) body.mobile-page-glucose #liveView > .hero-grid,
  html:not(.force-desktop-view) body.mobile-page-glucose #mobileRangeCard,
  html:not(.force-desktop-view) body.mobile-page-reflection #liveView > .hero-grid,
  html:not(.force-desktop-view) body.mobile-page-reflection #liveView > .metric-grid{
    height:auto;
    min-height:0;
    margin-bottom:10px;
  }

  html:not(.force-desktop-view) body:not(.mobile-page-graph) .mobile-bottom-nav{
    left:max(10px, env(safe-area-inset-left));
    right:max(10px, env(safe-area-inset-right));
    width:auto;
    transform:none;
  }
}

/* GuardianMonitor-like desk layout: Graph tab only. */
@media (max-width: 960px) and (orientation: landscape) and (hover: none) and (pointer: coarse){
  html:not(.force-desktop-view) body.mobile-page-graph .dashboard{
    padding-top:5px;
    padding-right:max(8px, env(safe-area-inset-right));
    padding-bottom:calc(60px + env(safe-area-inset-bottom));
    padding-left:max(8px, env(safe-area-inset-left));
  }

  html:not(.force-desktop-view) body.mobile-page-graph #liveView{
    grid-template-columns:minmax(0,1fr) clamp(168px,23vw,208px);
    gap:7px;
  }

  html:not(.force-desktop-view) body.mobile-page-graph #liveView > .chart-card,
  html:not(.force-desktop-view) body.mobile-page-graph #liveView .hero-current-card,
  html:not(.force-desktop-view) body.mobile-page-graph #mobileRangeCard{
    min-width:0;
    overflow:hidden;
  }

  html:not(.force-desktop-view) body.mobile-page-graph #liveView .hero-current-card{
    padding:6px 8px;
  }

  /* Stack arrow and unit in a narrow second column. This keeps even a
     three-digit glucose value and delta inside the safe area. */
  html:not(.force-desktop-view) body.mobile-page-graph .current-main{
    display:grid;
    grid-template-columns:minmax(0,auto) auto;
    grid-template-rows:auto auto;
    grid-template-areas:
      "value arrow"
      "value unit";
    align-items:center;
    justify-content:center;
    column-gap:5px;
    row-gap:0;
    width:100%;
    max-width:100%;
    margin:0;
    overflow:visible;
  }

  html:not(.force-desktop-view) body.mobile-page-graph .current-value-wrap{
    grid-area:value;
    min-width:0;
    padding-right:18px;
  }

  html:not(.force-desktop-view) body.mobile-page-graph #glucoseValue{
    font-size:clamp(48px,7.2vw,72px);
    line-height:.86;
    white-space:nowrap;
  }

  html:not(.force-desktop-view) body.mobile-page-graph .current-delta{
    top:-.34em;
    right:-1px;
    min-width:0;
    padding:3px 6px;
    font-size:clamp(10px,1.55vw,13px);
  }

  html:not(.force-desktop-view) body.mobile-page-graph .arrow{
    grid-area:arrow;
    align-self:end;
    font-size:clamp(27px,3.7vw,38px);
    line-height:.9;
  }

  html:not(.force-desktop-view) body.mobile-page-graph .unit{
    grid-area:unit;
    align-self:start;
    margin:0;
    font-size:clamp(10px,1.55vw,13px);
    line-height:1.1;
    white-space:nowrap;
  }

  html:not(.force-desktop-view) body.mobile-page-graph #mobileRangeCard{
    padding:6px 7px;
  }

  html:not(.force-desktop-view) body.mobile-page-graph .mobile-range-layout{
    grid-template-columns:minmax(72px,92px) minmax(44px,1fr);
    gap:6px;
  }

  html:not(.force-desktop-view) body.mobile-page-graph .mobile-range-donut{
    width:min(19vh,92px);
    height:min(19vh,92px);
  }

  html:not(.force-desktop-view) body.mobile-page-graph .mobile-range-donut-inner{
    width:min(13.5vh,66px);
    height:min(13.5vh,66px);
  }

  html:not(.force-desktop-view) body.mobile-page-graph .mobile-range-donut-inner strong{
    font-size:clamp(14px,2.2vw,18px);
  }

  html:not(.force-desktop-view) body.mobile-page-graph .mobile-range-donut-inner span{
    font-size:8px;
  }

  html:not(.force-desktop-view) body.mobile-page-graph .mobile-bottom-nav{
    left:calc(50% + (env(safe-area-inset-left) - env(safe-area-inset-right)) / 2);
    right:auto;
    width:min(620px,calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 24px));
    transform:translateX(-50%);
  }
}


/* ==========================================================================
   Mobile Navigation Phase 2.3 refinements
   - Keep three-digit glucose, delta, arrow and unit inside the landscape card
   - Show the last measured date/time when the compact header is hidden
   - Give the compact graph donut more breathing room
   - Separate Reflection comparison metadata from the main score copy
   - Center a larger, uncropped Gluco illustration on the Letter page
   ========================================================================== */

.graph-last-update{
  display:none;
}

@media (max-width: 720px), (max-width: 960px) and (orientation: landscape) and (hover: none) and (pointer: coarse){
  body.mobile-page-reflection .score-meta{
    margin-top:10px;
    padding-top:5px;
    border-top:1px solid rgba(255,255,255,.06);
  }

  body.mobile-page-letter .gluco-comment-avatar{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:9px;
    width:100%;
    padding:14px 8px 20px;
    text-align:center;
  }

  body.mobile-page-letter .gluco-comment-image{
    order:1;
    width:min(76vw,300px);
    height:auto;
    max-height:none;
    aspect-ratio:1 / 1;
    object-fit:contain;
    object-position:center;
    border-radius:24px;
  }

  body.mobile-page-letter .gluco-letter-number{
    position:static;
    order:2;
    width:fit-content;
    max-width:min(92%,360px);
    margin:0 auto;
  }

  body.mobile-page-letter .gluco-lucky-badge{
    position:static;
    order:3;
    width:fit-content;
    max-width:min(92%,360px);
    margin:0 auto;
  }
}

@media (max-width: 960px) and (orientation: landscape) and (hover: none) and (pointer: coarse){
  html:not(.force-desktop-view) body.mobile-page-graph #liveView .hero-current-card{
    padding:7px 8px 6px;
    align-items:center;
    justify-content:center;
  }

  html:not(.force-desktop-view) body.mobile-page-graph .current-main{
    display:grid;
    grid-template-columns:minmax(0,auto) auto;
    grid-template-rows:auto auto;
    grid-template-areas:
      "value arrow"
      "value unit";
    align-items:center;
    justify-content:center;
    column-gap:5px;
    row-gap:0;
    width:100%;
    max-width:100%;
    margin:0;
    overflow:hidden;
  }

  html:not(.force-desktop-view) body.mobile-page-graph .current-value-wrap{
    grid-area:value;
    position:relative;
    display:inline-flex;
    align-items:center;
    min-width:0;
    padding:5px 32px 0 0;
  }

  html:not(.force-desktop-view) body.mobile-page-graph #glucoseValue{
    max-width:100%;
    font-size:clamp(39px,5.25vw,56px);
    line-height:.88;
    letter-spacing:-.055em;
    white-space:nowrap;
  }

  html:not(.force-desktop-view) body.mobile-page-graph .current-delta{
    top:0;
    right:0;
    min-width:28px;
    padding:2px 5px;
    font-size:clamp(9px,1.35vw,11px);
    line-height:1;
  }

  html:not(.force-desktop-view) body.mobile-page-graph .arrow{
    grid-area:arrow;
    align-self:end;
    font-size:clamp(24px,3.2vw,32px);
    line-height:.88;
  }

  html:not(.force-desktop-view) body.mobile-page-graph .unit{
    grid-area:unit;
    align-self:start;
    margin:0;
    font-size:clamp(9px,1.3vw,11px);
    line-height:1.05;
    white-space:nowrap;
  }

  html:not(.force-desktop-view) body.mobile-page-graph .graph-last-update{
    display:block;
    width:100%;
    margin-top:5px;
    color:#9fb2cf;
    font-size:clamp(8px,1.15vw,10px);
    font-weight:700;
    line-height:1.2;
    text-align:center;
    white-space:nowrap;
  }

  html:not(.force-desktop-view) body.mobile-page-graph .mobile-range-donut-inner{
    transform:translateY(1px);
  }

  html:not(.force-desktop-view) body.mobile-page-graph .mobile-range-donut-inner strong{
    font-size:clamp(13px,1.85vw,16px);
    letter-spacing:-.045em;
  }

  html:not(.force-desktop-view) body.mobile-page-graph .mobile-range-donut-inner span{
    margin-top:2px;
    font-size:7px;
  }
}

/* Trust Pack public documents / Usage Dashboard */
.trust-document-wrap,
.usage-dashboard-wrap{
  width:min(1040px, calc(100% - 32px));
}

.trust-document-hero{
  margin-bottom:14px;
}

.trust-source-note{
  margin:0 0 18px;
  padding:12px 16px;
  border-radius:16px;
  color:#cfe9db;
  background:rgba(46,204,113,.08);
  border:1px solid rgba(46,204,113,.20);
  font-size:14px;
  line-height:1.7;
}

.trust-language-panel{
  margin-top:18px;
  padding:24px;
}

.trust-language-panel-en{
  background:
    linear-gradient(180deg, rgba(148,163,184,.06), rgba(148,163,184,.018)),
    #1e293b;
}

.trust-language-heading{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
}

.trust-language-heading > span{
  display:grid;
  place-items:center;
  min-width:42px;
  height:32px;
  padding:0 10px;
  border-radius:999px;
  color:#d1fae5;
  background:rgba(46,204,113,.12);
  border:1px solid rgba(46,204,113,.24);
  font-size:12px;
  font-weight:950;
  letter-spacing:.08em;
}

.trust-language-heading h2{
  margin:0;
  color:#fff;
  font-size:22px;
}

.trust-section{
  padding:18px 0;
  border-top:1px solid rgba(148,163,184,.14);
}

.trust-section:first-of-type{
  border-top:0;
}

.trust-section h2{
  margin:0 0 8px;
  color:#ecfdf5;
  font-size:19px;
  line-height:1.45;
}

.trust-section p{
  margin:0;
  color:#d7e1ef;
  font-size:16.5px;
  line-height:1.9;
}

.public-demo-banner{
  display:none;
}

body.public-demo-mode .public-demo-banner{
  display:flex;
  align-items:center;
  gap:10px 14px;
  margin:0 0 16px;
  padding:11px 14px;
  border:1px solid rgba(147,197,253,.42);
  border-radius:14px;
  background:rgba(37,99,235,.16);
  color:#e8eef8;
  font-size:14px;
  line-height:1.55;
}

.public-demo-banner strong{
  flex:0 0 auto;
  color:#dbeafe;
  font-weight:900;
  letter-spacing:.04em;
}

@media (max-width: 720px){
  body.public-demo-mode .public-demo-banner{
    align-items:flex-start;
    margin:0 0 12px;
    padding:9px 11px;
    border-radius:12px;
    font-size:12px;
  }
}

@media (max-width: 960px) and (orientation: landscape){
  html:not(.force-desktop-view) body.public-demo-mode .public-demo-banner{
    gap:7px;
    margin:0 0 5px;
    padding:4px 8px;
    border-radius:9px;
    font-size:10px;
    line-height:1.3;
  }
}

.trust-section ol{
  margin:10px 0 18px;
  padding-left:1.5em;
  color:#d7e1ef;
  font-size:16.5px;
  line-height:1.8;
}

.trust-section li + li{
  margin-top:6px;
}

.trust-language-panel-en .trust-section h2{
  color:#dbeafe;
  font-size:17px;
}

.trust-language-panel-en .trust-section p{
  color:#bdcadc;
  font-size:15px;
  line-height:1.8;
}

.trust-language-panel-en .trust-section ol{
  color:#bdcadc;
  font-size:15px;
}

.trust-related{
  margin-top:18px;
  padding:20px;
}

.trust-related h2{
  margin:0 0 14px;
  color:#fff;
  font-size:18px;
}

.trust-related-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.trust-related-links a{
  color:#d1fae5;
  text-decoration:none;
  font-weight:850;
  padding:10px 13px;
  border-radius:999px;
  background:rgba(46,204,113,.10);
  border:1px solid rgba(46,204,113,.20);
}

.usage-notice{
  display:grid;
  grid-template-columns:56px 1fr;
  gap:16px;
  align-items:start;
  margin-bottom:18px;
  padding:20px;
  border:1px solid rgba(250,204,21,.24);
  background:
    linear-gradient(180deg, rgba(250,204,21,.07), rgba(255,255,255,.018)),
    #1e293b;
}

.usage-notice-icon{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:rgba(250,204,21,.13);
  font-size:25px;
}

.usage-notice strong{
  display:block;
  color:#fff7c7;
  font-size:17px;
  line-height:1.55;
}

.usage-notice p{
  margin:8px 0 0;
  color:#cbd5e1;
  font-size:14px;
  line-height:1.7;
}

.usage-notice-en{
  color:#94a3b8 !important;
  font-size:12.5px !important;
}

.usage-loading,
.usage-status-banner{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:18px;
  padding:15px 18px;
}

.usage-loading-dot{
  width:11px;
  height:11px;
  border-radius:50%;
  background:#47e66e;
  box-shadow:0 0 0 6px rgba(71,230,110,.12);
  animation:usagePulse 1.2s ease-in-out infinite;
}

@keyframes usagePulse{
  50%{opacity:.38; transform:scale(.82)}
}

.usage-status-banner{
  display:grid;
  grid-template-columns:18px 1fr;
  column-gap:10px;
}

.usage-status-banner > span{
  grid-row:1 / span 2;
  color:#47e66e;
  align-self:center;
}

.usage-status-banner strong{
  color:#ecfdf5;
  font-size:16px;
}

.usage-status-banner small{
  color:#9fb2cf;
  line-height:1.55;
}

.usage-status-warn > span{
  color:#facc15;
}

.usage-dashboard-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:14px;
  margin-bottom:18px;
}

.usage-metric-card{
  min-height:154px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:20px;
  border-radius:20px;
  background:
    radial-gradient(circle at top right, rgba(59,130,246,.12), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
    #1e293b;
  border:1px solid rgba(148,163,184,.15);
}

.usage-metric-primary{
  border-color:rgba(46,204,113,.26);
  background:
    radial-gradient(circle at top right, rgba(46,204,113,.18), transparent 44%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
    #1e293b;
}

.usage-cost-card{
  border-color:rgba(250,204,21,.22);
}

.usage-metric-kicker,
.usage-section-kicker{
  color:#86a1c5;
  font-size:11px;
  font-weight:900;
  letter-spacing:.13em;
}

.usage-metric-value{
  color:#fff;
  font-size:44px;
  line-height:1.05;
  font-weight:950;
  margin:8px 0;
  font-variant-numeric:tabular-nums;
}

.usage-metric-primary .usage-metric-value{
  color:#47e66e;
}

.usage-cost-card .usage-metric-value{
  color:#facc15;
}

.usage-metric-label{
  color:#aabbd2;
  font-size:13px;
  line-height:1.5;
}

.usage-budget-card{
  margin-bottom:18px;
  padding:20px;
}

.usage-section-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}

.usage-section-heading h2{
  margin:4px 0 0;
  color:#fff;
  font-size:21px;
}

.usage-section-heading strong{
  color:#fff7c7;
  font-size:19px;
  font-variant-numeric:tabular-nums;
}

.usage-progress-track{
  height:13px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(15,23,42,.75);
  border:1px solid rgba(148,163,184,.14);
}

.usage-progress-bar{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg, #47e66e, #facc15);
  transition:width .45s ease;
}

.usage-budget-card > p{
  margin:12px 0 0;
  color:#9fb2cf;
  line-height:1.65;
}

.usage-detail-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-bottom:18px;
}

.usage-detail-card{
  padding:19px;
}

.usage-detail-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:13px;
}

.usage-detail-head span{
  font-size:23px;
}

.usage-detail-head h2{
  margin:0;
  color:#fff;
  font-size:18px;
}

.usage-data-list{
  margin:0;
}

.usage-data-list > div{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:11px 0;
  border-top:1px solid rgba(148,163,184,.12);
}

.usage-data-list > div:first-child{
  border-top:0;
}

.usage-data-list dt{
  color:#9fb2cf;
  font-size:14px;
}

.usage-data-list dd{
  margin:0;
  color:#f8fafc;
  font-size:15px;
  font-weight:900;
  text-align:right;
}

.usage-explainer{
  margin-top:0;
}

.usage-explainer .about-detail-card h2{
  color:#47e66e;
  font-size:18px;
  letter-spacing:0;
}

.usage-raw-details{
  margin-top:18px;
  padding:18px;
}

.usage-raw-details summary{
  color:#d1fae5;
  cursor:pointer;
  font-weight:900;
}

.usage-raw-details a{
  color:#d1fae5;
}

.usage-raw-details pre{
  max-height:430px;
  overflow:auto;
  padding:14px;
  border-radius:14px;
  color:#cbd5e1;
  background:#0f172a;
  font-size:12px;
  line-height:1.55;
  white-space:pre-wrap;
  word-break:break-word;
}

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

@media (max-width:640px){
  .trust-document-wrap,
  .usage-dashboard-wrap{
    width:min(100% - 20px, 1040px);
    margin-top:14px;
  }

  .trust-language-panel,
  .trust-related,
  .usage-budget-card,
  .usage-detail-card,
  .usage-notice{
    padding:16px;
  }

  .trust-section p,
  .trust-section ol{
    font-size:15.5px;
    line-height:1.85;
  }

  .trust-related-links{
    flex-direction:column;
  }

  .trust-related-links a{
    text-align:center;
  }

  .usage-notice{
    grid-template-columns:42px 1fr;
    gap:12px;
  }

  .usage-notice-icon{
    width:42px;
    height:42px;
    border-radius:13px;
    font-size:21px;
  }

  .usage-dashboard-grid,
  .usage-detail-grid{
    grid-template-columns:1fr 1fr;
    gap:10px;
  }

  .usage-metric-card{
    min-height:128px;
    padding:15px;
  }

  .usage-metric-value{
    font-size:36px;
  }

  .usage-metric-label{
    font-size:11.5px;
  }

  .usage-section-heading{
    align-items:flex-start;
    flex-direction:column;
  }

  .usage-detail-card{
    min-width:0;
  }

  .usage-data-list > div{
    align-items:flex-start;
    flex-direction:column;
    gap:4px;
  }

  .usage-data-list dd{
    text-align:left;
    word-break:break-word;
  }
}

@media (max-width:390px){
  .usage-dashboard-grid,
  .usage-detail-grid{
    grid-template-columns:1fr;
  }
}

/* ==========================================================================
   Mobile Phase 2.4
   - Compact iPhone SE / narrow-screen layouts
   - Shared mobile treatment for every About detail page
   ========================================================================== */

@media (max-width: 375px) and (orientation: portrait) and (hover: none) and (pointer: coarse){
  :root{
    --mobile-ui-font:11px;
    --mobile-small-font:9px;
    --mobile-body-font:13px;
    --mobile-letter-font:17px;
    --mobile-nav-height:62px;
  }

  .dashboard{
    padding:4px 5px calc(var(--mobile-nav-height) + 10px + env(safe-area-inset-bottom));
  }

  .header{
    gap:4px 7px;
    margin-bottom:5px;
    padding:2px 1px 6px;
  }

  .brand-block h1{
    gap:4px;
    margin-bottom:3px;
    font-size:20px;
  }

  .brand-icon{
    font-size:20px;
  }

  .brand-kicker{
    font-size:10px;
    line-height:1.12;
  }

  .clock{
    font-size:28px;
  }

  .header-date{
    font-size:9px;
  }

  .header-status-block{
    gap:4px 6px;
  }

  .live-indicator{
    min-height:23px;
    padding:3px 7px;
    font-size:9px;
  }

  .last-update{
    font-size:9px;
  }

  .app-credit-version,
  .app-credit-line{
    font-size:8px;
    line-height:1.15;
  }

  .mobile-bottom-nav{
    left:4px;
    right:4px;
    gap:1px;
    padding:3px;
    border-radius:16px;
  }

  .mobile-bottom-nav-button{
    min-height:47px;
    padding:3px 0;
    border-radius:12px;
    font-size:8px;
  }

  .mobile-bottom-nav-icon{
    min-height:17px;
    font-size:14px;
  }

  body.mobile-page-glucose #liveView{
    grid-template-rows:minmax(132px,.95fr) minmax(126px,.9fr);
    gap:5px;
  }

  body.mobile-page-glucose #liveView .hero-current-card{
    padding:8px;
  }

  body.mobile-page-glucose .current-main{
    gap:7px;
  }

  body.mobile-page-glucose #glucoseValue{
    font-size:clamp(62px,22vw,78px);
  }

  body.mobile-page-glucose .current-delta{
    top:-.68em;
    padding:2px 5px;
    font-size:11px;
  }

  body.mobile-page-glucose .arrow{
    font-size:38px;
  }

  body.mobile-page-glucose .unit{
    margin-bottom:5px;
    font-size:14px;
  }

  body.mobile-page-glucose #mobileRangeCard{
    padding:7px 8px;
  }

  body.mobile-page-glucose .mobile-range-layout{
    grid-template-columns:94px minmax(0,1fr);
    gap:7px;
  }

  body.mobile-page-glucose .mobile-range-donut{
    width:94px;
    height:94px;
  }

  body.mobile-page-glucose .mobile-range-donut-inner{
    width:66px;
    height:66px;
  }

  body.mobile-page-glucose .mobile-range-donut-inner strong{
    padding:0 2px;
    font-size:18px;
    letter-spacing:-.06em;
  }

  body.mobile-page-glucose .mobile-range-donut-inner span{
    font-size:9px;
  }

  body.mobile-page-glucose .mobile-range-values{
    gap:4px;
  }

  body.mobile-page-glucose .mobile-range-value{
    min-height:28px;
    padding:4px 7px;
  }

  body.mobile-page-glucose .mobile-range-value span{
    font-size:9px;
  }

  body.mobile-page-glucose .mobile-range-value strong{
    font-size:15px;
  }

  body.mobile-page-graph #liveView{
    grid-template-rows:78px minmax(0,1fr);
    gap:5px;
  }

  body.mobile-page-graph #liveView .hero-current-card,
  body.mobile-page-graph #mobileRangeCard{
    min-height:78px;
    padding:5px 6px;
  }

  body.mobile-page-graph #glucoseValue{
    font-size:36px;
  }

  body.mobile-page-graph .current-delta{
    top:-.5em;
    padding:2px 4px;
    font-size:9px;
  }

  body.mobile-page-graph .arrow{
    font-size:25px;
  }

  body.mobile-page-graph .unit{
    font-size:10px;
  }

  body.mobile-page-graph .mobile-range-layout{
    grid-template-columns:62px minmax(0,1fr);
    gap:4px;
    min-width:0;
    width:100%;
  }

  body.mobile-page-graph .mobile-range-donut{
    width:62px;
    height:62px;
  }

  body.mobile-page-graph .mobile-range-donut-inner{
    width:44px;
    height:44px;
  }

  body.mobile-page-graph .mobile-range-donut-inner strong{
    padding:0 1px;
    font-size:13px;
    letter-spacing:-.06em;
  }

  body.mobile-page-graph .mobile-range-donut-inner span{
    font-size:7px;
  }

  body.mobile-page-graph .mobile-range-values{
    gap:3px;
    min-width:0;
  }

  body.mobile-page-graph .mobile-range-value{
    min-width:0;
    padding:2px 3px;
    border-radius:7px;
  }

  body.mobile-page-graph .mobile-range-value span{
    font-size:7px;
  }

  body.mobile-page-graph .mobile-range-value strong{
    font-size:10px;
  }

  body.mobile-page-graph #liveView > .chart-card{
    padding:6px 5px;
  }

  body.mobile-page-graph .chart-header{
    gap:3px;
    margin-bottom:2px;
  }

  body.mobile-page-graph .chart-header .label{
    font-size:12px;
  }

  body.mobile-page-graph .period-switch{
    gap:2px;
  }

  body.mobile-page-graph .period-button{
    min-height:27px;
    padding:4px 0;
    font-size:7.5px;
    line-height:1;
    letter-spacing:-.04em;
    white-space:nowrap;
  }

  body.mobile-page-graph .chart-range{
    max-width:100%;
    font-size:8px;
    line-height:1.05;
    white-space:normal;
  }

  body.mobile-page-reflection #liveView{
    grid-template-rows:minmax(106px,.82fr) minmax(0,1.18fr);
    gap:4px;
  }

  body.mobile-page-reflection #liveView .hero-score-card{
    padding:6px 8px;
    border-radius:14px;
  }

  body.mobile-page-reflection .score-header{
    min-height:21px;
    margin-bottom:1px;
  }

  body.mobile-page-reflection .score-header .label{
    font-size:13px;
  }

  body.mobile-page-reflection .score-badge{
    padding:4px 7px;
    font-size:9px;
  }

  body.mobile-page-reflection .score-main{
    grid-template-columns:50px minmax(0,1fr);
    gap:6px;
  }

  body.mobile-page-reflection .score-gluco,
  body.mobile-page-reflection .score-gluco-image{
    width:48px;
    height:48px;
  }

  body.mobile-page-reflection .score-value{
    font-size:44px;
    line-height:.84;
  }

  body.mobile-page-reflection .score-message{
    display:-webkit-box;
    margin-top:1px;
    overflow:hidden;
    font-size:9.5px;
    line-height:1.2;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
  }

  body.mobile-page-reflection .score-meta{
    margin-top:3px;
    padding-top:3px;
    font-size:7.5px;
    line-height:1.1;
    white-space:nowrap;
  }

  body.mobile-page-reflection #liveView > .metric-grid{
    gap:4px;
  }

  body.mobile-page-reflection .metric-card{
    padding:5px 6px;
    border-radius:11px;
  }

  body.mobile-page-reflection .metric-label{
    font-size:8px;
    line-height:1.05;
    white-space:nowrap;
  }

  body.mobile-page-reflection .metric-value{
    margin-top:1px;
    font-size:22px;
    line-height:.9;
  }

  body.mobile-page-reflection .metric-unit-inline{
    font-size:9px;
  }

  body.mobile-page-reflection .metric-desc{
    display:none;
  }
}

@media (max-width: 375px) and (max-height: 680px) and (orientation: portrait) and (hover: none) and (pointer: coarse){
  body.mobile-page-reflection #liveView{
    grid-template-rows:102px minmax(0,1fr);
  }

  body.mobile-page-reflection .score-value{
    font-size:40px;
  }

  body.mobile-page-reflection .score-message{
    -webkit-line-clamp:1;
  }
}



/* ==========================================================================
   Mobile Gluco decorations
   - Use a tightly cropped transparent illustration
   - Show Gluco larger without covering glucose data
   - Use the empty grid cell to the right of Journal on the More tab
   ========================================================================== */

.gluco-peek-decor{
  display:none;
}

@media (max-width: 720px) and (orientation: portrait) and (hover: none) and (pointer: coarse){
  body.mobile-page-glucose #liveView .hero-current-card{
    position:relative;
    overflow:hidden;
    padding:14px 14px 38px;
  }

  body.mobile-page-glucose .current-main{
    position:relative;
    z-index:2;
  }

  body.mobile-page-glucose .gluco-peek-decor{
    position:absolute;
    right:4px;
    bottom:-1px;
    width:min(40vw,166px);
    pointer-events:none;
    z-index:1;
  }

  body.mobile-page-glucose .gluco-peek-image{
    object-fit:contain;
    object-position:bottom right;
  }

  body.mobile-page-more .mobile-more-gluco-slot{
    min-height:118px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    overflow:hidden;
    pointer-events:none;
  }

  body.mobile-page-more .mobile-more-gluco-image{
    width:min(50vw,190px);
    max-width:100%;
    object-fit:contain;
    object-position:center bottom;
  }
}

@media (max-width: 480px) and (orientation: portrait) and (hover: none) and (pointer: coarse){
  body.mobile-page-glucose .gluco-peek-decor{
    display:block;
  }
}
@media (max-width: 390px) and (orientation: portrait) and (hover: none) and (pointer: coarse){
  body.mobile-page-glucose #liveView .hero-current-card{
    padding-bottom:32px;
  }

  body.mobile-page-glucose .gluco-peek-decor{
    right:2px;
    width:min(38vw,148px);
  }

  body.mobile-page-more .mobile-more-gluco-slot{
    min-height:104px;
  }

  body.mobile-page-more .mobile-more-gluco-image{
    width:min(48vw,164px);
  }
}

/* Every About detail page uses the same readable phone layout. Older detail
   pages only needed a viewport declaration; these rules keep the visual
   language consistent with the newer Trust and Usage pages. */
@media (max-width: 640px){
  .about-detail-body{
    overflow-x:hidden;
  }

  .about-detail-wrap,
  .about-detail-gluco-wrap{
    width:calc(100% - 20px);
    margin:10px auto 30px;
  }

  .about-detail-topbar{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-bottom:10px;
  }

  .about-detail-brand{
    min-width:0;
    font-size:19px;
    white-space:nowrap;
  }

  .about-detail-back{
    flex:0 1 auto;
    padding:7px 9px;
    font-size:11px;
    text-align:center;
  }

  .about-detail-hero,
  .about-detail-card,
  .about-detail-mini-card,
  .about-detail-gluco-stage{
    padding:16px;
    border-radius:18px;
  }

  .about-detail-hero-with-art{
    gap:10px;
  }

  .about-detail-hero-art{
    width:112px;
  }

  .about-detail-hero h1{
    gap:3px;
    margin-bottom:7px;
    font-size:27px;
    line-height:1.08;
  }

  .about-detail-title-jp{
    font-size:15px;
  }

  .about-detail-hero p{
    font-size:14px;
    line-height:1.65;
  }

  .about-detail-grid,
  .about-detail-feature-grid,
  .about-detail-doc-grid,
  .about-detail-status-grid{
    gap:10px;
    margin-top:10px;
  }

  .about-detail-card.about-copy-jp p,
  .about-detail-card.about-copy-jp li{
    font-size:16px;
    line-height:1.8;
  }

  .about-detail-card.about-copy-en p,
  .about-detail-card.about-copy-en li{
    font-size:14px;
    line-height:1.7;
  }

  .about-detail-mini-card{
    min-width:0;
  }

  .about-detail-mini-icon{
    width:34px;
    height:34px;
    flex-basis:34px;
    border-radius:11px;
    font-size:17px;
  }

  .about-detail-mini-title-en{
    font-size:15px;
  }

  .about-detail-mini-title-jp{
    font-size:11px;
  }

  .about-detail-mini-card p{
    font-size:13px;
    line-height:1.55;
  }

  .about-detail-profile{
    gap:12px;
  }

  .about-detail-profile-image{
    width:132px;
    height:132px;
    margin:0 auto;
  }

  .about-detail-gluco-image,
  .about-detail-gluco-image-large{
    max-width:100%;
  }

  .support-detail-eyebrow{
    margin-bottom:10px;
    padding:6px 9px;
    font-size:10px;
  }

  .support-detail-list{
    gap:8px;
    margin-top:14px;
  }

  .support-detail-list li{
    padding-left:25px;
  }

  .support-detail-list li::before{
    width:18px;
    height:18px;
  }

  .support-detail-actions{
    margin-top:18px;
  }

  .support-detail-button{
    width:100%;
    min-height:48px;
    padding:12px 14px;
    font-size:15px;
    text-align:center;
  }

  .support-detail-boundary-grid{
    grid-template-columns:1fr;
    gap:14px;
  }

  .support-detail-related-links{
    display:grid;
  }
}

@media (max-width: 390px){
  .about-detail-wrap,
  .about-detail-gluco-wrap{
    width:calc(100% - 14px);
    margin-top:7px;
  }

  .about-detail-brand{
    font-size:17px;
  }

  .about-detail-back{
    max-width:46%;
    font-size:10px;
  }

  .about-detail-hero,
  .about-detail-card,
  .about-detail-mini-card,
  .about-detail-gluco-stage{
    padding:13px;
  }

  .about-detail-hero-art{
    width:96px;
  }

  .about-detail-hero h1{
    font-size:23px;
  }

  .about-detail-card.about-copy-jp p,
  .about-detail-card.about-copy-jp li{
    font-size:15px;
  }
}

.usage-detail-note{
  margin:12px 0 0;
  color:#9fb2cf;
  font-size:13px;
  line-height:1.65;
}

/* ==========================================================================
   Mobile Phase 2.5
   - Keep multi-digit glucose deltas out of the glucose value
   - Use a mobile custom-range dialog instead of expanding inside the graph
   - Restore short metric descriptions on iPhone SE-sized screens
   ========================================================================== */

.custom-range-dialog-header{
  display:none;
}

.custom-range-close{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  padding:0;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(15,23,42,.54);
  color:#e5eefb;
  font-size:22px;
  line-height:1;
}

@media (max-width:720px) and (orientation:portrait) and (hover:none) and (pointer:coarse){
  body.mobile-page-glucose .current-main{
    gap:7px;
    width:100%;
    justify-content:center;
  }

  body.mobile-page-glucose .current-value-wrap{
    min-width:0;
    padding-right:clamp(46px,12vw,60px);
  }

  body.mobile-page-glucose #glucoseValue{
    font-size:clamp(68px,21vw,100px);
    letter-spacing:-.045em;
  }

  body.mobile-page-glucose .current-delta{
    top:4px;
    right:0;
    min-width:42px;
    max-width:58px;
    padding:3px 6px;
    font-size:clamp(11px,3.2vw,15px);
  }

  body.mobile-page-glucose .arrow{
    font-size:clamp(40px,11vw,56px);
  }

  body.mobile-page-glucose .unit{
    margin-bottom:7px;
    font-size:clamp(13px,3.8vw,17px);
  }

  body.custom-range-dialog-open{
    overflow:hidden !important;
  }

  body.custom-range-dialog-open::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:300;
    background:rgba(3,8,20,.76);
    backdrop-filter:blur(6px);
  }

  .custom-range-controls:not([hidden]){
    position:fixed;
    left:max(14px, env(safe-area-inset-left));
    right:max(14px, env(safe-area-inset-right));
    top:50%;
    z-index:310;
    display:grid !important;
    grid-template-columns:1fr;
    gap:12px;
    width:auto;
    max-width:420px;
    margin:0 auto;
    padding:16px;
    transform:translateY(-50%);
    border:1px solid rgba(92,226,135,.34);
    border-radius:22px;
    background:linear-gradient(180deg,rgba(32,47,70,.98),rgba(18,29,48,.98));
    box-shadow:0 28px 70px rgba(0,0,0,.48);
  }

  .custom-range-dialog-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }

  .custom-range-dialog-header strong{
    color:#f4f8ff;
    font-size:16px;
    line-height:1.3;
  }

  .custom-range-controls label{
    display:grid;
    grid-template-columns:46px minmax(0,1fr);
    align-items:center;
    gap:8px;
    min-width:0;
    color:#cbd8ea;
    font-size:13px;
    font-weight:800;
  }

  .custom-range-controls .date-input-wrap,
  .custom-range-controls input[type="date"]{
    min-width:0;
    width:100%;
  }

  .custom-range-controls #customRangeApply{
    min-height:44px;
    border-radius:14px;
    font-size:14px;
    font-weight:900;
  }

  body.mobile-page-graph .period-button{
    white-space:nowrap;
    word-break:keep-all;
    overflow:hidden;
    text-overflow:clip;
  }
}

@media (max-width:375px) and (orientation:portrait) and (hover:none) and (pointer:coarse){
  body.mobile-page-glucose .current-value-wrap{
    padding-right:45px;
  }

  body.mobile-page-glucose #glucoseValue{
    font-size:clamp(58px,18vw,70px);
  }

  body.mobile-page-glucose .current-delta{
    top:2px;
    min-width:38px;
    max-width:44px;
    padding:2px 4px;
    font-size:10px;
  }

  body.mobile-page-graph .period-button{
    min-width:0;
    padding-inline:1px;
    font-size:7px;
    letter-spacing:-.06em;
  }

  body.mobile-page-reflection #liveView{
    grid-template-rows:minmax(100px,.78fr) minmax(0,1.22fr);
    gap:3px;
  }

  body.mobile-page-reflection .metric-card{
    padding:4px 5px;
  }

  body.mobile-page-reflection .metric-label{
    font-size:7.5px;
  }

  body.mobile-page-reflection .metric-value{
    font-size:20px;
  }

  body.mobile-page-reflection .metric-desc{
    display:block;
    max-width:100%;
    margin-top:2px;
    overflow:hidden;
    color:#aebdd2;
    font-size:7px;
    font-weight:700;
    line-height:1.05;
    white-space:nowrap;
    text-overflow:ellipsis;
  }

  body.mobile-page-reflection .metric-desc small{
    display:none;
  }
}

@media (max-width:960px) and (orientation:landscape) and (hover:none) and (pointer:coarse){
  body.custom-range-dialog-open{
    overflow:hidden !important;
  }

  body.custom-range-dialog-open::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:300;
    background:rgba(3,8,20,.76);
    backdrop-filter:blur(6px);
  }

  .custom-range-controls:not([hidden]){
    position:fixed;
    left:max(18px, env(safe-area-inset-left));
    right:max(18px, env(safe-area-inset-right));
    top:50%;
    z-index:310;
    display:grid !important;
    grid-template-columns:1fr 1fr auto;
    align-items:end;
    gap:10px;
    width:min(680px,calc(100vw - 36px - env(safe-area-inset-left) - env(safe-area-inset-right)));
    max-height:calc(100dvh - 24px);
    margin:0 auto;
    padding:14px;
    overflow:auto;
    transform:translateY(-50%);
    border:1px solid rgba(92,226,135,.34);
    border-radius:20px;
    background:linear-gradient(180deg,rgba(32,47,70,.98),rgba(18,29,48,.98));
    box-shadow:0 28px 70px rgba(0,0,0,.48);
  }

  .custom-range-dialog-header{
    display:flex;
    grid-column:1 / -1;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }

  .custom-range-dialog-header strong{
    color:#f4f8ff;
    font-size:14px;
    line-height:1.3;
  }

  .custom-range-controls label{
    display:grid;
    grid-template-columns:38px minmax(0,1fr);
    align-items:center;
    gap:6px;
    min-width:0;
    color:#cbd8ea;
    font-size:11px;
    font-weight:800;
  }

  .custom-range-controls .date-input-wrap,
  .custom-range-controls input[type="date"]{
    min-width:0;
    width:100%;
  }

  .custom-range-controls #customRangeApply{
    min-height:38px;
    min-width:72px;
    border-radius:12px;
    font-size:12px;
    font-weight:900;
  }

  body.mobile-page-graph .period-button{
    min-width:0;
    white-space:nowrap;
    word-break:keep-all;
    overflow:hidden;
    text-overflow:clip;
  }
}


/* ==========================================================================
   Mobile review fixes
   - Keep the graph-page delta clear of the trend arrow in portrait
   - Keep the custom-period button legible on iPhone SE landscape
   ========================================================================== */

@media (max-width: 720px) and (orientation: portrait) and (hover: none) and (pointer: coarse){
  html:not(.force-desktop-view) body.mobile-page-graph .current-main{
    display:grid;
    grid-template-columns:minmax(0,auto) auto;
    grid-template-rows:auto auto;
    grid-template-areas:
      "value arrow"
      "value unit";
    align-items:center;
    justify-content:center;
    column-gap:5px;
    row-gap:0;
    width:100%;
    max-width:100%;
    margin:0;
  }

  html:not(.force-desktop-view) body.mobile-page-graph .current-value-wrap{
    grid-area:value;
    min-width:0;
    padding:3px 36px 0 0;
  }

  html:not(.force-desktop-view) body.mobile-page-graph .current-delta{
    top:0;
    right:0;
    min-width:32px;
    max-width:36px;
    padding:2px 4px;
    font-size:10px;
  }

  html:not(.force-desktop-view) body.mobile-page-graph .arrow{
    grid-area:arrow;
    align-self:end;
    line-height:.9;
  }

  html:not(.force-desktop-view) body.mobile-page-graph .unit{
    grid-area:unit;
    align-self:start;
    margin:0;
    line-height:1.05;
    white-space:nowrap;
  }
}

@media (max-width: 667px) and (orientation: landscape) and (hover: none) and (pointer: coarse){
  html:not(.force-desktop-view) body.mobile-page-graph .period-switch{
    grid-template-columns:repeat(4,minmax(0,1fr)) minmax(42px,1.16fr);
  }

  html[lang="ja"]:not(.force-desktop-view) body.mobile-page-graph .period-button[data-period="custom"],
  html[lang="en"]:not(.force-desktop-view) body.mobile-page-graph .period-button[data-period="custom"]{
    font-size:0;
  }

  html[lang="ja"]:not(.force-desktop-view) body.mobile-page-graph .period-button[data-period="custom"]::after{
    content:"指定";
    font-size:9px;
    letter-spacing:0;
  }

  html[lang="en"]:not(.force-desktop-view) body.mobile-page-graph .period-button[data-period="custom"]::after{
    content:"Range";
    font-size:8px;
    letter-spacing:-.02em;
  }
}


/* Unicorn Gluco: a local, once-per-day encounter triggered by a fresh
   latest reading received while the page is open. */
.gluco-comment-avatar.unicorn-gluco{
  border-color:rgba(196,181,253,.62);
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.20), transparent 34%),
    linear-gradient(145deg, rgba(147,197,253,.20), rgba(244,114,182,.14), rgba(74,222,128,.12));
  box-shadow:0 16px 38px rgba(129,140,248,.24), inset 0 0 0 1px rgba(255,255,255,.07);
}

.gluco-letter-number.unicorn-gluco{
  color:#f5f3ff;
  border-color:rgba(196,181,253,.42);
  background:rgba(139,92,246,.18);
}

.gluco-lucky-badge.unicorn-gluco{
  color:#f5f3ff;
  border-color:rgba(196,181,253,.44);
  background:linear-gradient(90deg, rgba(59,130,246,.18), rgba(236,72,153,.16), rgba(34,197,94,.14));
}

.unicorn-collection-section{
  margin-top:28px;
  padding-top:26px;
  border-top:1px solid rgba(196,181,253,.20);
}

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

.unicorn-collection-grid .collection-item.unicorn-gluco.collected{
  border-color:rgba(196,181,253,.36);
  background:
    radial-gradient(circle at 50% 14%, rgba(255,255,255,.10), transparent 30%),
    linear-gradient(155deg, rgba(59,130,246,.10), rgba(236,72,153,.08), rgba(34,197,94,.08)),
    rgba(255,255,255,.035);
}

.unicorn-collection-grid .collection-item.unicorn-gluco .collection-image-wrap{
  border-color:rgba(196,181,253,.34);
}

@media (max-width: 720px){
  .unicorn-collection-header{
    flex-direction:column;
    gap:10px;
  }

  .unicorn-collection-section{
    margin-top:20px;
    padding-top:20px;
  }
}

/* Unicorn 100 visual moment v1 */
/* Unicorn 100 visual moment v1
   A soft, celebratory state shown only for a fresh current 100mg/dL reading.
   The debug query changes presentation only and never unlocks a collection item. */

.unicorn-visual-debug-banner{
  position:fixed;
  top:max(8px, env(safe-area-inset-top));
  left:50%;
  z-index:5000;
  display:flex;
  align-items:center;
  gap:9px;
  transform:translateX(-50%);
  padding:7px 9px 7px 12px;
  border:1px solid rgba(196,181,253,.48);
  border-radius:999px;
  background:rgba(15,23,42,.92);
  color:#ede9fe;
  box-shadow:0 10px 30px rgba(0,0,0,.34);
  backdrop-filter:blur(12px);
  font-size:11px;
  font-weight:900;
  line-height:1;
  white-space:nowrap;
}

.unicorn-visual-debug-banner[hidden]{
  display:none;
}

.unicorn-visual-debug-banner button{
  min-height:26px;
  padding:4px 9px;
  border:1px solid rgba(167,243,208,.34);
  border-radius:999px;
  background:rgba(52,211,153,.13);
  color:#d1fae5;
  font:inherit;
  cursor:pointer;
}

.unicorn-moment-badge{
  display:none;
}

@media (max-width:480px) and (orientation:portrait) and (hover:none) and (pointer:coarse){
  body.mobile-page-glucose #liveView .hero-current-card.is-unicorn-moment{
    /* unicorn-soft-panel-glow */
    border:1px solid rgba(167,243,208,.58);
    background:
      radial-gradient(circle at 82% 78%, rgba(196,181,253,.17), transparent 31%),
      radial-gradient(circle at 20% 16%, rgba(110,231,183,.12), transparent 43%),
      linear-gradient(150deg, rgba(167,243,208,.055), rgba(196,181,253,.06)),
      #202b3d;
    box-shadow:
      0 0 0 1px rgba(196,181,253,.22),
      0 0 25px rgba(110,231,183,.15),
      0 0 42px rgba(196,181,253,.11),
      inset 0 0 32px rgba(167,243,208,.045);
  }

  body.mobile-page-glucose .hero-current-card .current-main{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto auto;
    align-items:start;
    justify-content:center;
    gap:0 clamp(3px,1.4vw,7px);
    width:100%;
    max-width:100%;
    padding:0 clamp(1px,1vw,4px);
    overflow:visible;
  }

  body.mobile-page-glucose .hero-current-card .current-value-wrap{
    justify-self:center;
    min-width:0;
    padding-right:clamp(42px,11vw,54px);
    overflow:visible;
  }

  body.mobile-page-glucose .hero-current-card.is-unicorn-moment #glucoseValue{
    /* unicorn-gentle-gold-value */
    display:block;
    max-width:none;
    padding-right:.055em;
    overflow:visible;
    color:#f4d477;
    background:none;
    -webkit-text-fill-color:currentColor;
    filter:none;
    text-shadow:
      0 0 11px rgba(253,230,138,.16),
      0 0 20px rgba(110,231,183,.09);
  }

  body.mobile-page-glucose .hero-current-card .current-delta{
    top:clamp(2px,.8vw,4px);
    right:0;
  }

  body.mobile-page-glucose .hero-current-card .arrow{
    align-self:start;
    margin-top:clamp(8px,2.2vw,12px);
    font-size:clamp(34px,9vw,44px);
    line-height:.86;
    white-space:nowrap;
  }

  body.mobile-page-glucose .hero-current-card .unit{
    align-self:start;
    margin:clamp(13px,3.2vw,17px) 0 0;
    font-size:clamp(12px,3.3vw,15px);
    line-height:1;
    white-space:nowrap;
  }

  body.mobile-page-glucose .hero-current-card.is-unicorn-moment .current-delta{
    border-color:rgba(253,230,138,.52);
    background:linear-gradient(135deg,rgba(16,185,129,.25),rgba(251,191,36,.20));
    color:#fef3c7;
    box-shadow:
      0 0 0 1px rgba(167,243,208,.10),
      0 0 14px rgba(251,191,36,.12);
  }

  body.mobile-page-glucose .unicorn-moment-badge:not([hidden]){
    position:absolute;
    top:12px;
    right:12px;
    z-index:4;
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:6px 10px;
    border:1px solid rgba(253,230,138,.48);
    border-radius:999px;
    background:
      linear-gradient(135deg,rgba(16,185,129,.18),rgba(196,181,253,.14)),
      rgba(15,23,42,.74);
    color:#fef3c7;
    box-shadow:
      0 0 15px rgba(110,231,183,.10),
      0 0 20px rgba(196,181,253,.08);
    backdrop-filter:blur(8px);
    font-size:11px;
    font-weight:900;
    letter-spacing:.025em;
    line-height:1;
    white-space:nowrap;
  }

  body.mobile-page-glucose .unicorn-moment-badge-icon{
    font-size:13px;
  }

  body.mobile-page-glucose .gluco-peek-decor.is-unicorn-moment{
    z-index:2;
    overflow:visible;
  }

  body.mobile-page-glucose .gluco-peek-image{
    transition:
      transform .24s ease,
      filter .24s ease;
  }

  body.mobile-page-glucose .gluco-peek-image.is-unicorn{
    position:relative;
    z-index:2;
    transform:translate(2px,2px) scale(1.2);
    transform-origin:100% 100%;
    filter:
      drop-shadow(0 7px 9px rgba(0,0,0,.19))
      drop-shadow(0 0 11px rgba(196,181,253,.13));
  }

  body.mobile-page-glucose .gluco-peek-decor.is-unicorn-moment::before,
  body.mobile-page-glucose .gluco-peek-decor.is-unicorn-moment::after{
    position:absolute;
    z-index:3;
    pointer-events:none;
    line-height:1;
    text-shadow:0 0 8px currentColor;
    animation:unicorn-sparkle-twinkle 2.4s ease-in-out infinite alternate;
  }

  body.mobile-page-glucose .gluco-peek-decor.is-unicorn-moment::before{
    content:"✦";
    top:12%;
    left:5%;
    color:#fde68a;
    font-size:11px;
  }

  body.mobile-page-glucose .gluco-peek-decor.is-unicorn-moment::after{
    content:"✧";
    top:1%;
    right:12%;
    color:#ddd6fe;
    font-size:9px;
    animation-delay:.65s;
  }
}

@media (max-width:390px) and (orientation:portrait) and (hover:none) and (pointer:coarse){
  body.mobile-page-glucose .unicorn-moment-badge:not([hidden]){
    top:9px;
    right:9px;
    padding:5px 8px;
    font-size:10px;
  }

  body.mobile-page-glucose .hero-current-card .current-main{
    gap:0 3px;
    padding-right:1px;
    padding-left:1px;
  }

  body.mobile-page-glucose .hero-current-card .current-value-wrap{
    padding-right:42px;
  }

  body.mobile-page-glucose .hero-current-card.is-unicorn-moment #glucoseValue{
    font-size:clamp(66px,20vw,78px);
    letter-spacing:-.05em;
  }

  body.mobile-page-glucose .hero-current-card .current-delta{
    min-width:38px;
    max-width:46px;
    padding:3px 5px;
    font-size:12px;
  }

  body.mobile-page-glucose .hero-current-card .arrow{
    margin-top:8px;
    font-size:32px;
  }

  body.mobile-page-glucose .hero-current-card .unit{
    margin-top:12px;
    font-size:11px;
  }
}

@keyframes unicorn-sparkle-twinkle{
  from{
    opacity:.46;
    transform:scale(.82) rotate(-5deg);
  }
  to{
    opacity:1;
    transform:scale(1.12) rotate(5deg);
  }
}

@media (prefers-reduced-motion: reduce){
  body.mobile-page-glucose .gluco-peek-image,
  body.mobile-page-glucose .gluco-peek-decor.is-unicorn-moment::before,
  body.mobile-page-glucose .gluco-peek-decor.is-unicorn-moment::after{
    animation:none;
    transition:none;
  }
}

/* Compassion and First Message readability v1 */
@media (max-width:480px){
  body.mobile-page-more .about-first-message-brand{
    padding:30px 22px 32px;
  }

  body.mobile-page-more .about-brand-statement{
    margin-bottom:28px;
    font-size:clamp(42px,12vw,52px);
    line-height:1.03;
    letter-spacing:-1.25px;
  }

  body.mobile-page-more .about-brand-copy{
    max-width:31em;
    margin:0 auto 24px;
  }

  body.mobile-page-more .about-brand-copy p{
    margin:0 0 18px;
    color:#e6eef8;
    font-size:clamp(16px,4.25vw,18px);
    line-height:1.9;
    letter-spacing:.01em;
    line-break:strict;
    word-break:normal;
    text-wrap:pretty;
  }

  body.mobile-page-more .about-brand-copy p:last-child{
    margin-bottom:0;
  }

  body.mobile-page-more .about-brand-quote{
    margin-top:28px!important;
    font-size:clamp(17px,4.8vw,20px)!important;
    line-height:1.58!important;
  }
}

/* User Foundation 0.3: one-choice onboarding and maintainable guides */

body.data-source-dialog-open {
  overflow:hidden;
}

body.local-profile-dialog-open {
  overflow:hidden;
}

.view-toolbar-actions {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  min-width:0;
}

.data-source-toolbar-button {
  border:1px solid rgba(46,204,113,.38);
  background:rgba(46,204,113,.10);
  color:#dcfce7;
  padding:8px 14px;
  border-radius:999px;
  font-size:13px;
  font-weight:800;
  line-height:1.2;
  cursor:pointer;
  white-space:nowrap;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}

.data-source-toolbar-button:hover {
  background:rgba(46,204,113,.18);
  border-color:rgba(74,222,128,.58);
  transform:translateY(-1px);
}

.local-profile-toolbar-button {
  border:1px solid rgba(167,243,208,.24);
  background:rgba(15,118,110,.13);
  color:#d9fbe9;
  padding:8px 14px;
  border-radius:999px;
  font-size:13px;
  font-weight:800;
  line-height:1.2;
  cursor:pointer;
  white-space:nowrap;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}

.local-profile-toolbar-button:hover {
  background:rgba(15,118,110,.22);
  border-color:rgba(167,243,208,.42);
  transform:translateY(-1px);
}

.local-profile-toolbar-button:focus-visible,
.mobile-local-profile-button:focus-visible,
.local-profile-dialog button:focus-visible,
.local-profile-dialog input:focus-visible {
  outline:3px solid rgba(134,239,172,.52);
  outline-offset:3px;
}

.local-profile-dialog {
  position:fixed;
  inset:0;
  z-index:10010;
  display:grid;
  place-items:center;
  padding:max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));
  overflow:auto;
  background:rgba(5,12,24,.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.local-profile-dialog[hidden] {
  display:none;
}

.local-profile-dialog-card {
  position:relative;
  width:min(520px,100%);
  max-height:calc(100dvh - 40px);
  overflow:auto;
  border:1px solid rgba(134,239,172,.28);
  border-radius:28px;
  padding:30px;
  background:radial-gradient(circle at 94% 4%,rgba(74,222,128,.13),transparent 34%),linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01)),#172235;
  box-shadow:0 28px 80px rgba(0,0,0,.46);
  scrollbar-width:thin;
}

.local-profile-dialog-close {
  position:absolute;
  top:14px;
  right:16px;
  width:44px;
  height:44px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(15,23,42,.74);
  color:#dbeafe;
  font-size:27px;
  line-height:1;
  cursor:pointer;
}

.local-profile-dialog-heading {
  display:flex;
  align-items:center;
  gap:14px;
  padding-right:42px;
}

.local-profile-dialog-icon {
  width:56px;
  height:56px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:rgba(46,204,113,.14);
  font-size:28px;
}

.local-profile-eyebrow {
  margin:0 0 3px;
  color:#9ee7bd;
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
}

.local-profile-dialog h2 {
  margin:0;
  font-size:28px;
  line-height:1.35;
}

.local-profile-lead {
  margin:20px 0 16px;
  color:#dce8f6;
  font-size:16px;
  line-height:1.8;
}

.local-profile-form {
  display:grid;
  gap:18px;
  margin-top:20px;
}

.local-profile-field {
  display:grid;
  gap:8px;
  color:#eef7ff;
  font-size:15px;
  font-weight:800;
}

.local-profile-field input {
  width:100%;
  min-height:48px;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.14);
  border-radius:13px;
  padding:11px 13px;
  background:rgba(15,23,42,.66);
  color:#fff;
  font:inherit;
  font-size:16px;
}

.local-profile-field small {
  color:#aebfd3;
  font-size:12.5px;
  font-weight:500;
  line-height:1.65;
}

.usage-profile-card {
  display:grid;
  gap:12px;
  padding:15px;
  border:1px solid rgba(110,231,183,.18);
  border-radius:16px;
  background:linear-gradient(180deg,rgba(15,118,110,.10),rgba(15,23,42,.22));
}

.usage-profile-card[hidden] {
  display:none !important;
}

.plus-account-card {
  display:grid;
  gap:13px;
  padding:16px;
  border:1px solid rgba(147,197,253,.24);
  border-radius:16px;
  background:linear-gradient(180deg,rgba(37,99,235,.11),rgba(15,23,42,.24));
}

.plus-account-card[hidden],
.plus-account-panel[hidden],
.plus-account-code-panel[hidden],
.plus-account-check[hidden] {
  display:none !important;
}

.plus-account-card-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.plus-account-card-head > div {
  display:grid;
  gap:7px;
}

.plus-account-card-head strong {
  color:#eff6ff;
  font-size:17px;
}

.plus-account-badge,
.plus-account-state-badge {
  width:max-content;
  border:1px solid rgba(147,197,253,.34);
  border-radius:999px;
  padding:4px 9px;
  background:rgba(30,64,175,.22);
  color:#dbeafe;
  font-size:11px;
  font-weight:900;
}

.plus-account-state-badge.is-active {
  border-color:rgba(74,222,128,.34);
  background:rgba(22,101,52,.25);
  color:#bbf7d0;
}

.plus-account-price {
  margin:0;
  color:#fff;
  font-size:15px;
  font-weight:900;
  line-height:1.6;
}

.plus-account-lead,
.plus-account-safety,
#plusAccountSummary {
  margin:0;
  color:#c7d7ea;
  font-size:13px;
  line-height:1.75;
}

.plus-account-benefits {
  display:grid;
  gap:7px;
  margin:0;
  padding-left:1.25em;
  color:#dbeafe;
  font-size:13px;
  line-height:1.65;
}

.plus-account-panel,
.plus-account-code-panel {
  display:grid;
  gap:12px;
}

.plus-account-confirmation {
  display:grid;
  gap:9px;
  margin:0;
  padding:12px;
  border:1px solid rgba(147,197,253,.22);
  border-radius:12px;
}

.plus-account-confirmation legend {
  padding:0 5px;
  color:#eff6ff;
  font-size:13px;
  font-weight:800;
}

.plus-account-confirmation label,
.plus-account-check {
  display:flex;
  align-items:center;
  gap:9px;
  min-height:44px;
  padding:8px 4px;
  color:#dbeafe;
  font-size:14px;
  line-height:1.55;
  cursor:pointer;
}

.plus-account-confirmation input,
.plus-account-check input {
  flex:0 0 auto;
  width:18px;
  height:18px;
  margin:0;
}

.plus-account-confirmation small {
  color:#aebfd3;
  font-size:13px;
  line-height:1.65;
}

.plus-account-turnstile {
  min-height:65px;
}

.plus-account-safety {
  padding:10px 11px;
  border-radius:12px;
  background:rgba(15,23,42,.42);
  color:#dbeafe;
}

.usage-profile-card-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.usage-profile-card-head strong {
  color:#ecfdf5;
  font-size:15px;
}

.usage-profile-state-badge {
  flex:0 0 auto;
  padding:4px 9px;
  border:1px solid rgba(148,163,184,.26);
  border-radius:999px;
  background:rgba(30,41,59,.64);
  color:#cbd5e1;
  font-size:11px;
  font-weight:900;
}

.usage-profile-state-badge.is-active {
  border-color:rgba(74,222,128,.34);
  background:rgba(22,101,52,.26);
  color:#bbf7d0;
}

.usage-profile-state-badge.is-stopped {
  border-color:rgba(251,191,36,.30);
  background:rgba(120,53,15,.22);
  color:#fde68a;
}

.usage-profile-preparing,
.usage-profile-notice p,
.usage-profile-state-panel p {
  margin:0;
  color:#c5d4e6;
  font-size:13px;
  line-height:1.7;
}

.usage-profile-notice,
.usage-profile-state-panel {
  display:grid;
  gap:11px;
}

.usage-profile-notice[hidden],
.usage-profile-state-panel[hidden],
.usage-profile-turnstile[hidden] {
  display:none !important;
}

.usage-profile-notice ul {
  display:grid;
  gap:5px;
  margin:0;
  padding-left:1.35em;
  color:#dbeafe;
  font-size:13px;
  line-height:1.6;
}

.usage-profile-boundary {
  padding:10px 11px;
  border-radius:12px;
  background:rgba(15,23,42,.38);
  color:#d9fbe9 !important;
}

.usage-profile-device-note {
  color:#aebfd3 !important;
  font-size:12px !important;
}

.usage-profile-operational-note,
.usage-profile-retention-note {
  color:#b9c9dc !important;
  font-size:12px !important;
}

.usage-profile-retention-note a {
  display:inline-block;
  margin-top:4px;
  color:#b7f7d0;
  font-weight:700;
}

.usage-profile-actions {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.usage-profile-advanced {
  padding-top:9px;
  border-top:1px solid rgba(148,163,184,.16);
}

.usage-profile-advanced summary {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  width:max-content;
  color:#aebfd3;
  font-size:12.5px;
  font-weight:700;
  cursor:pointer;
}

.usage-profile-advanced summary:hover {
  color:#d8e4f2;
}

.usage-profile-advanced summary:focus-visible {
  border-radius:5px;
  outline:3px solid rgba(74,222,128,.30);
  outline-offset:3px;
}

.usage-profile-advanced-body {
  display:grid;
  justify-items:start;
  gap:8px;
  margin-top:9px;
}

.usage-profile-advanced .usage-profile-export-link {
  min-height:44px;
  padding-block:10px;
}

.usage-profile-advanced-body p {
  margin:0;
  color:#aebfd3;
  font-size:12.5px;
  line-height:1.65;
}

.usage-profile-primary-button,
.usage-profile-secondary-button,
.usage-profile-delete-button {
  min-height:44px;
  border-radius:12px;
  padding:9px 12px;
  font:inherit;
  font-size:13px;
  font-weight:850;
  cursor:pointer;
}

.usage-profile-primary-button {
  border:1px solid rgba(74,222,128,.42);
  background:#1f8c52;
  color:#fff;
}

.usage-profile-secondary-button {
  border:1px solid rgba(148,163,184,.28);
  background:rgba(30,41,59,.68);
  color:#e2e8f0;
}

.usage-profile-delete-button {
  border:1px solid rgba(248,113,113,.30);
  background:rgba(127,29,29,.18);
  color:#fecaca;
}

.usage-profile-export-link {
  justify-self:start;
  border:0;
  padding:2px 0;
  background:transparent;
  color:#b7f7d0;
  font:inherit;
  font-size:12px;
  font-weight:750;
  line-height:1.6;
  text-align:left;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}

.usage-profile-export-link:hover {
  color:#dcfce7;
}

.usage-profile-export-link:focus-visible {
  border-radius:5px;
  outline:3px solid rgba(74,222,128,.30);
  outline-offset:3px;
}

.usage-profile-export-link:disabled {
  cursor:not-allowed;
  opacity:.58;
}

.usage-profile-primary-button:disabled,
.usage-profile-secondary-button:disabled,
.usage-profile-delete-button:disabled {
  cursor:not-allowed;
  opacity:.58;
}

.usage-profile-turnstile {
  min-height:66px;
  width:100%;
  overflow:hidden;
}

.usage-profile-status {
  min-height:0;
  color:#b9c9dd;
  font-size:12.5px;
  line-height:1.6;
}

.usage-profile-status:empty {
  display:none;
}

.usage-profile-status:not(:empty) {
  min-height:20px;
}

.usage-profile-status.success {
  color:#bbf7d0;
}

.usage-profile-status.error {
  color:#fecaca;
}

.local-profile-status {
  min-height:22px;
  color:#b9c9dd;
  font-size:13px;
  line-height:1.6;
}

.local-profile-status.success {
  color:#bbf7d0;
}

.local-profile-status.error {
  color:#fecaca;
}

.local-profile-actions {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.local-profile-save-button,
.local-profile-delete-button {
  min-height:46px;
  border-radius:13px;
  padding:11px 16px;
  font:inherit;
  font-size:14px;
  font-weight:900;
  cursor:pointer;
}

.local-profile-save-button {
  border:1px solid rgba(74,222,128,.44);
  background:#1f8c52;
  color:#fff;
}

.local-profile-delete-button {
  border:1px solid rgba(248,113,113,.30);
  background:rgba(127,29,29,.18);
  color:#fecaca;
}

.mobile-local-profile-button {
  display:none;
}

.data-source-dialog {
  position:fixed;
  inset:0;
  z-index:10000;
  display:grid;
  place-items:center;
  padding:max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));
  overflow:auto;
  background:rgba(5,12,24,.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.data-source-dialog[hidden],.data-source-choose-panel[hidden],.data-source-gluroo-prep-panel[hidden],.data-source-connect-panel[hidden],.data-source-help[hidden] {
  display:none;
}

.data-source-dialog-card {
  position:relative;
  width:min(760px,100%);
  max-height:calc(100dvh - 40px);
  overflow:auto;
  border:1px solid rgba(134,239,172,.28);
  border-radius:28px;
  padding:28px;
  background:radial-gradient(circle at 92% 4%,rgba(74,222,128,.12),transparent 32%),linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01)),#172235;
  box-shadow:0 28px 80px rgba(0,0,0,.46);
  scrollbar-width:thin;
}

.data-source-dialog-close {
  position:absolute;
  top:14px;
  right:16px;
  width:42px;
  height:42px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(15,23,42,.74);
  color:#dbeafe;
  font-size:27px;
  line-height:1;
  cursor:pointer;
  z-index:2;
}

.data-source-dialog-hero {
  display:grid;
  grid-template-columns:118px minmax(0,1fr);
  align-items:center;
  gap:20px;
  padding-right:34px;
}

.data-source-dialog-gluco {
  display:block;
  width:118px;
  height:118px;
  object-fit:contain;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.22));
}

.data-source-dialog h2 {
  margin:0 0 8px;
  font-size:30px;
  line-height:1.35;
}

.data-source-dialog-hero p,.data-source-notice p,.data-source-safety-note,.data-source-external-note p {
  color:#c1cee0;
  line-height:1.8;
}

.data-source-step-lead {
  margin:20px 0 14px;
  color:#e4edf8;
  font-size:17px;
  font-weight:800;
}

.data-source-step-lead {
  display:grid;
  gap:5px;
}

.data-source-step-lead strong {
  color:#e7fbe9;
  font-size:17px;
}

.data-source-step-lead span {
  color:#b8c8dc;
  font-size:14px;
}

.data-source-provider-fieldset {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  min-width:0;
}

.data-source-provider-fieldset h3 {
  grid-column:1/-1;
  margin:0 0 8px;
  color:#dbeafe;
  font-size:15px;
  font-weight:900;
}

.data-source-provider-option {
  position:relative;
  display:flex;
  min-height:164px;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:7px;
  width:100%;
  padding:22px 20px 18px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background:rgba(15,23,42,.52);
  color:#f7fbff;
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease,transform .2s ease;
}

.data-source-provider-option:hover,
.data-source-provider-option:focus-visible {
  border-color:rgba(74,222,128,.70);
  background:rgba(46,204,113,.13);
  box-shadow:0 0 0 3px rgba(74,222,128,.14);
  transform:translateY(-1px);
  outline:none;
}

.data-source-provider-option strong {
  margin-top:16px;
  font-size:18px;
  line-height:1.45;
}

.data-source-provider-option small {
  color:#afc0d6;
  font-size:14px;
  line-height:1.65;
}

.data-source-method-badge {
  display:inline-flex;
  width:max-content;
  padding:4px 9px;
  border-radius:999px;
  background:rgba(147,197,253,.14);
  color:#cfe6ff;
  font-size:12px;
  font-weight:900;
}

.data-source-recommend-badge {
  position:absolute;
  top:11px;
  right:11px;
  padding:4px 8px;
  border-radius:999px;
  background:#dcfce7;
  color:#14532d;
  font-size:11px;
  font-weight:900;
}

.data-source-choice-action {
  margin-top:auto;
  color:#b7f7cb;
  font-size:13px;
  font-weight:900;
}

.data-source-prep-card {
  display:grid;
  gap:10px;
  margin-top:4px;
  padding:20px;
  border:1px solid rgba(134,239,172,.23);
  border-radius:18px;
  background:rgba(20,83,45,.12);
}

.data-source-prep-card h3 {
  margin:0;
  color:#ecfdf5;
  font-size:21px;
}

.data-source-prep-card p {
  margin:0;
  color:#c7d5e4;
  line-height:1.75;
}

.data-source-supported-note {
  padding:10px 12px;
  border-radius:12px;
  background:rgba(15,23,42,.42);
  font-size:14px;
}

.data-source-prep-actions {
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

.data-source-demo-only {
  justify-content:center;
}

.data-source-start-links {
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  margin:16px 0;
}

.data-source-primary-guide-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:11px 16px;
  border:1px solid rgba(74,222,128,.48);
  border-radius:13px;
  background:rgba(46,204,113,.13);
  color:#dcfce7;
  font-weight:900;
  text-decoration:none;
  text-align:center;
}

.data-source-start-links>a:not(.data-source-primary-guide-link),.data-source-secondary-links a,.data-source-help>a:not(.data-source-primary-guide-link),.data-source-demo-link {
  color:#9acbff;
  text-underline-offset:3px;
}

.data-source-external-note {
  margin:18px 0;
  padding:15px 17px;
  border:1px solid rgba(251,191,36,.22);
  border-radius:16px;
  background:rgba(120,78,10,.13);
}

.data-source-external-note strong {
  display:block;
  margin-bottom:4px;
  color:#fde7aa;
}

.data-source-external-note p {
  margin:0;
  font-size:13px;
}

.data-source-choose-actions {
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

.data-source-back-button {
  margin:18px 0 12px;
  padding:8px 0;
  border:0;
  background:transparent;
  color:#9acbff;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:3px;
}

.data-source-form {
  display:grid;
  gap:18px;
}

.data-source-help {
  padding:17px 18px;
  border:1px solid rgba(134,239,172,.20);
  border-radius:16px;
  background:rgba(20,83,45,.11);
  color:#d4deeb;
}

.data-source-help-advanced {
  border-color:rgba(147,197,253,.22);
  background:rgba(30,64,175,.10);
}

.data-source-help strong {
  display:block;
  margin-bottom:7px;
  color:#dcfce7;
  font-size:16px;
}

.data-source-help p {
  margin:0 0 12px;
  color:#c0cede;
  line-height:1.75;
}

.data-source-secondary-links {
  margin-top:12px;
  font-size:13px;
}

.data-source-notice {
  margin:0;
  padding:16px 18px;
  border:1px solid rgba(96,165,250,.24);
  border-radius:16px;
  background:rgba(30,64,175,.10);
}

.data-source-notice strong {
  display:block;
  margin-bottom:5px;
  color:#dbeafe;
  font-size:16px;
}

.data-source-notice p {
  margin:0;
}

.data-source-notice p span {
  display:block;
}

.data-source-notice p span+span {
  margin-top:7px;
}

.data-source-field {
  display:grid;
  gap:8px;
  color:#e3edf9;
  font-size:16px;
  font-weight:900;
}

.data-source-field input {
  width:100%;
  min-height:54px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:13px;
  padding:12px 14px;
  background:rgba(8,15,29,.68);
  color:#fff;
  font:inherit;
  font-size:17px;
  font-weight:500;
  outline:none;
}

.data-source-field input:focus {
  border-color:rgba(74,222,128,.64);
  box-shadow:0 0 0 3px rgba(74,222,128,.10);
}

.data-source-field small {
  color:#a9bbd2;
  font-size:13px;
  font-weight:500;
  line-height:1.65;
}

.data-source-usage-note {
  display:grid;
  gap:5px;
  margin:0;
  padding:11px 13px;
  border:1px solid rgba(74,222,128,.18);
  border-radius:13px;
  background:rgba(15,118,110,.10);
  color:#d9fbe9;
  font-size:13px;
  font-weight:550;
  line-height:1.7;
}

.data-source-usage-note a {
  justify-self:start;
  color:#b7f7d0;
  font-size:12px;
  font-weight:750;
  text-underline-offset:3px;
}

.data-source-usage-turnstile {
  margin-top:2px;
}

.data-source-secret-row {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
}

.data-source-secret-toggle {
  min-width:74px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:12px;
  background:#26344a;
  color:#dbeafe;
  font-weight:900;
  cursor:pointer;
}

.data-source-save-option {
  display:flex;
  align-items:flex-start;
  gap:11px;
  color:#d4deeb;
  line-height:1.6;
  cursor:pointer;
}

.data-source-save-option input {
  width:20px;
  height:20px;
  margin-top:3px;
  accent-color:#4ade80;
  flex:0 0 auto;
}

.data-source-save-option span {
  display:grid;
  gap:2px;
}

.data-source-save-option strong {
  font-size:16px;
}

.data-source-save-option small {
  color:#a8bad0;
  font-size:13px;
}

.data-source-relay-consent {
  padding:14px 16px;
  border:1px solid rgba(74,222,128,.24);
  border-radius:15px;
  background:rgba(22,163,74,.08);
}

.data-source-relay-consent[hidden] {
  display:none;
}

.data-source-test-row {
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:12px;
}

.data-source-test-status {
  min-height:48px;
  display:flex;
  align-items:center;
  padding:10px 13px;
  border-radius:12px;
  background:rgba(15,23,42,.46);
  color:#bdcbe0;
  font-size:14px;
  line-height:1.6;
}

.data-source-test-status.success {
  background:rgba(22,163,74,.13);
  color:#c7f9d5;
}

.data-source-test-status.error {
  background:rgba(190,24,93,.11);
  color:#ffd0d9;
}

.data-source-test-status.pending {
  color:#c5dcff;
}

.data-source-actions {
  display:flex;
  align-items:center;
  gap:11px;
  flex-wrap:wrap;
}

.data-source-primary-button,.data-source-secondary-button,.data-source-danger-button {
  min-height:50px;
  border-radius:13px;
  padding:11px 18px;
  font-size:15px;
  font-weight:900;
  cursor:pointer;
}

.data-source-primary-button {
  border:1px solid rgba(74,222,128,.58);
  background:#22c55e;
  color:#07130b;
}

.data-source-primary-button:disabled,.data-source-secondary-button:disabled {
  opacity:.46;
  cursor:not-allowed;
}

.data-source-secondary-button {
  border:1px solid rgba(96,165,250,.40);
  background:rgba(37,99,235,.18);
  color:#e5f0ff;
}

.data-source-danger-button {
  border:1px solid rgba(251,113,133,.32);
  background:rgba(190,24,93,.11);
  color:#ffd0d9;
}

.data-source-demo-link {
  margin-left:auto;
  font-size:14px;
  font-weight:800;
}

.data-source-safety-note {
  margin-top:20px;
  padding-top:17px;
  border-top:1px solid rgba(255,255,255,.09);
  font-size:13px;
}

.mobile-data-source-button {
  display:none;
}

@media(max-width:720px),(max-width:960px) and (orientation:landscape) and (hover:none) and (pointer:coarse) {
  .data-source-toolbar-button,
  .local-profile-toolbar-button {
    display:none;
  }

  .mobile-data-source-button {
    width:100%;
    display:flex;
    align-items:center;
    gap:12px;
    margin:4px 0 14px;
    padding:14px 15px;
    border:1px solid rgba(74,222,128,.26);
    border-radius:16px;
    background:rgba(46,204,113,.10);
    color:#e7fbe9;
    text-align:left;
  }

  .mobile-local-profile-button {
    width:100%;
    min-height:58px;
    display:flex;
    align-items:center;
    gap:12px;
    margin:0 0 14px;
    padding:14px 15px;
    border:1px solid rgba(167,243,208,.20);
    border-radius:16px;
    background:rgba(15,118,110,.10);
    color:#e7fbe9;
    text-align:left;
  }

  .mobile-local-profile-button>span:first-child {
    font-size:22px;
  }

  .mobile-local-profile-button>span:last-child {
    display:grid;
    gap:2px;
  }

  .mobile-local-profile-button strong {
    font-size:15px;
  }

  .mobile-local-profile-button small {
    color:#a9bcd3;
    font-size:12px;
  }

  .mobile-data-source-button>span:first-child {
    font-size:22px;
  }

  .mobile-data-source-button>span:last-child {
    display:grid;
    gap:2px;
  }

  .mobile-data-source-button strong {
    font-size:15px;
  }

  .mobile-data-source-button small {
    color:#a9bcd3;
    font-size:12px;
  }

  .data-source-dialog {
    align-items:end;
    padding:max(10px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
  }

  .local-profile-dialog {
    align-items:end;
    padding:max(10px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
  }

  .local-profile-dialog-card {
    width:100%;
    max-height:calc(100dvh - max(18px,env(safe-area-inset-top)));
    border-radius:24px 24px 18px 18px;
    padding:22px 17px max(22px,calc(16px + env(safe-area-inset-bottom)));
  }

  .local-profile-dialog h2 {
    font-size:23px;
  }

  .local-profile-dialog-icon {
    width:48px;
    height:48px;
    border-radius:15px;
    font-size:23px;
  }

  .local-profile-lead {
    font-size:14px;
    line-height:1.7;
  }

  .local-profile-actions {
    display:grid;
    grid-template-columns:1fr;
  }

  .usage-profile-actions {
    display:grid;
    grid-template-columns:1fr;
  }

  .local-profile-save-button,
  .local-profile-delete-button,
  .usage-profile-primary-button,
  .usage-profile-secondary-button,
  .usage-profile-delete-button {
    width:100%;
  }

  .data-source-dialog-card {
    width:100%;
    max-height:calc(100dvh - max(18px,env(safe-area-inset-top)));
    border-radius:24px 24px 18px 18px;
    padding:22px 17px max(22px,calc(16px + env(safe-area-inset-bottom)));
  }

  .data-source-dialog-hero {
    grid-template-columns:76px minmax(0,1fr);
    gap:13px;
    padding-right:28px;
  }

  .data-source-dialog-gluco {
    width:76px;
    height:76px;
  }

  .data-source-dialog h2 {
    font-size:24px;
  }

  .data-source-dialog-hero p {
    font-size:14px;
    line-height:1.7;
  }

  .data-source-provider-fieldset {
    grid-template-columns:1fr;
  }

  .data-source-provider-option {
    min-height:148px;
    padding:20px 18px 17px;
  }

  .data-source-start-links {
    display:grid;
  }

  .data-source-primary-guide-link {
    width:100%;
  }

  .data-source-choose-actions,.data-source-prep-actions {
    display:grid;
  }

  .data-source-prep-actions .data-source-primary-button {
    width:100%;
  }

  .data-source-test-row {
    grid-template-columns:1fr;
  }

  .data-source-test-row button,.data-source-primary-button,.data-source-danger-button {
    width:100%;
  }

  .data-source-actions {
    display:grid;
    grid-template-columns:1fr;
  }

  .data-source-demo-link {
    margin:5px auto 0;
    padding:8px;
  }

  .data-source-field {
    font-size:16px;
  }

  .data-source-field input {
    font-size:16px;
  }

}

@media(max-width:390px) {
  .data-source-dialog-card {
    padding-left:14px;
    padding-right:14px;
  }

  .data-source-dialog-hero {
    grid-template-columns:62px minmax(0,1fr);
  }

  .data-source-dialog-gluco {
    width:62px;
    height:62px;
  }

  .data-source-dialog h2 {
    font-size:21px;
  }

  .data-source-provider-option {
    padding:18px 16px 16px;
  }

  .data-source-secret-row {
    grid-template-columns:1fr;
  }

  .data-source-secret-toggle {
    min-height:44px;
  }

  .local-profile-dialog-card {
    padding-left:14px;
    padding-right:14px;
  }

  .local-profile-dialog-heading {
    gap:10px;
    padding-right:34px;
  }

  .local-profile-dialog-icon {
    width:42px;
    height:42px;
    font-size:20px;
  }

  .local-profile-dialog h2 {
    font-size:20px;
  }

}


/* ==========================================================================
   GlucoScope Limited Data Relay Paused Acceptance
   Gluroo-only disclosure and lazy Turnstile container.
   ========================================================================== */
.data-source-device-guide-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.data-source-device-guide-link{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  min-height:92px;
  padding:15px 16px;
  border:1px solid rgba(96,165,250,.28);
  border-radius:15px;
  background:rgba(30,64,175,.10);
  color:#eff6ff;
  text-decoration:none;
  transition:border-color .2s ease,background .2s ease,transform .2s ease;
}
.data-source-device-guide-link:hover{
  border-color:rgba(74,222,128,.48);
  background:rgba(46,204,113,.11);
  transform:translateY(-1px);
}
.data-source-device-guide-link:focus-visible{
  outline:3px solid rgba(147,197,253,.85);
  outline-offset:3px;
}
.data-source-device-guide-link strong{
  color:#f8fafc;
  font-size:15px;
  line-height:1.45;
}
.data-source-device-guide-link small{
  color:#a7f3d0;
  font-size:12.5px;
  font-weight:850;
  line-height:1.45;
}
.data-source-relay-notice{border-color:rgba(96,165,250,.28);background:linear-gradient(180deg,rgba(59,130,246,.10),rgba(59,130,246,.035))}
.data-source-direct-notice{border-color:rgba(52,211,153,.26);background:linear-gradient(180deg,rgba(16,185,129,.10),rgba(16,185,129,.035))}
.data-source-relay-check{display:grid;gap:7px;padding:15px;border:1px solid rgba(148,163,184,.18);border-radius:16px;background:rgba(15,23,42,.28)}
.data-source-relay-check[hidden],.data-source-relay-turnstile[hidden]{display:none}
.data-source-relay-check strong{color:#e0f2fe}
.data-source-relay-check p{margin:0;color:#b7c7dc;font-size:13px;line-height:1.7}
.data-source-relay-turnstile{min-height:66px;width:100%;overflow:hidden}
.data-source-relay-turnstile.is-visible{display:block}
@media (max-width:640px){.data-source-device-guide-grid{grid-template-columns:1fr}.data-source-device-guide-link{min-height:78px;padding:13px 14px}.data-source-relay-check{padding:13px}.data-source-relay-check p{font-size:12.5px}}