@jjlmoya/utils-health 1.1.0

package/src/tool/caffeineTracker/component.astro

@@ -0,0 +1,1210 @@
+---
+import { Icon } from 'astro-icon/components';
+import { DRINK_PRESETS, METABOLISM_PRESETS } from './logic';
+import type { CaffeineTrackerUI } from './ui';
+
+interface Props {
+  ui?: Record<string, unknown>;
+}
+
+const ui = (Astro.props.ui ?? {}) as CaffeineTrackerUI;
+
+interface DrinkUI {
+  name: string;
+  desc: string;
+}
+const drinkUIMap: Record<string, DrinkUI> = {
+  espresso: { name: ui.drinkEspressoName, desc: ui.drinkEspressoDesc },
+  double_espresso: { name: ui.drinkDoubleEspressoName, desc: ui.drinkDoubleEspressoDesc },
+  brewed: { name: ui.drinkBrewedName, desc: ui.drinkBrewedDesc },
+  energy_small: { name: ui.drinkEnergySmallName, desc: ui.drinkEnergySmallDesc },
+  monster: { name: ui.drinkMonsterName, desc: ui.drinkMonsterDesc },
+  soda: { name: ui.drinkSodaName, desc: ui.drinkSodaDesc },
+  tea: { name: ui.drinkTeaName, desc: ui.drinkTeaDesc },
+};
+
+interface MetaUI {
+  label: string;
+  desc: string;
+}
+const metaUIMap: Record<string, MetaUI> = {
+  fast: { label: ui.metabolismFastLabel, desc: ui.metabolismFastDesc },
+  normal: { label: ui.metabolismNormalLabel, desc: ui.metabolismNormalDesc },
+  slow: { label: ui.metabolismSlowLabel, desc: ui.metabolismSlowDesc },
+  pregnancy: { label: ui.metabolismPregnancyLabel, desc: ui.metabolismPregnancyDesc },
+};
+---
+
+<section class="ct" id="ct-container" data-ui={JSON.stringify(ui)}>
+  <div class="ct__card">
+    <div class="ct__grid">
+
+      
+      <div class="ct__panel ct__scrollable">
+
+        <div class="ct__section">
+          <h2 class="ct__section-title">
+            <Icon name="mdi:coffee" class="ct__section-icon" />
+            {ui.sectionAddDrink}
+          </h2>
+          <div class="ct__drink-grid">
+            {DRINK_PRESETS.map((drink) => {
+              const dui = drinkUIMap[drink.id];
+              return (
+                <button
+                  data-drink-id={drink.id}
+                  data-mg={drink.mg}
+                  data-name={dui?.name ?? drink.id}
+                  class="ct__drink-btn"
+                >
+                  <div class="ct__drink-btn-icon">
+                    <span class="ct__icon-to-fly">
+                      <Icon name={drink.icon} class="ct__icon-5" />
+                    </span>
+                  </div>
+                  <div class="ct__drink-info">
+                    <h3 class="ct__drink-name">{dui?.name ?? drink.id}</h3>
+                    <p class="ct__drink-desc">{dui?.desc ?? `${drink.mg}mg`}</p>
+                  </div>
+                  <Icon name="mdi:plus-circle" class="ct__drink-add" />
+                </button>
+              );
+            })}
+          </div>
+        </div>
+
+        <div class="ct__section ct__section--bordered">
+          <h3 class="ct__meta-title">{ui.sectionMetabolism}</h3>
+          <div class="ct__meta-grid">
+            {METABOLISM_PRESETS.map((profile) => {
+              const mui = metaUIMap[profile.id];
+              return (
+                <label class="ct__meta-option">
+                  <input
+                    type="radio"
+                    name="ct-metabolism"
+                    value={profile.halfLife}
+                    checked={profile.id === 'normal'}
+                    class="ct__meta-radio"
+                  />
+                  <div class="ct__meta-text">
+                    <div class="ct__meta-label">{mui?.label ?? profile.id}</div>
+                    <p class="ct__meta-desc">{mui?.desc ?? ''}</p>
+                  </div>
+                </label>
+              );
+            })}
+          </div>
+        </div>
+
+        <div class="ct__section ct__section--bordered">
+          <h3 class="ct__journal-header">
+            <span>{ui.sectionJournal}</span>
+            <span id="ct-journal-count" class="ct__journal-count">0</span>
+          </h3>
+          <div id="ct-drink-journal" class="ct__journal">
+            <div class="ct__journal-empty">
+              <p>{ui.journalEmpty}</p>
+            </div>
+          </div>
+        </div>
+
+      </div>
+
+      
+      <div class="ct__main">
+
+        <div class="ct__stats">
+          <div class="ct__stats-left">
+            <div class="ct__stat">
+              <span class="ct__stat-label">{ui.labelCurrentMg}</span>
+              <div class="ct__stat-value" id="ct-current-container">
+                <span id="ct-current-mg">0</span><span class="ct__stat-unit">mg</span>
+              </div>
+            </div>
+            <div class="ct__stat">
+              <span class="ct__stat-label">{ui.labelEliminationTime}</span>
+              <div class="ct__stat-value">
+                <span id="ct-elimination-time">--</span><span class="ct__stat-unit">h</span>
+              </div>
+            </div>
+          </div>
+          <button id="ct-reset-btn" class="ct__reset-btn">
+            <Icon name="mdi:refresh" class="ct__icon-4" />
+            {ui.btnReset}
+          </button>
+        </div>
+
+        <div class="ct__main-body ct__scrollable">
+
+          <div class="ct__chart-wrap">
+            <div class="ct__chart-grid" aria-hidden="true">
+              {[150, 100, 50, 0].map((val) => (
+                <div class="ct__chart-gridline">
+                  <span class="ct__chart-gridlabel">{val}mg</span>
+                </div>
+              ))}
+            </div>
+            <svg id="ct-decaysvg" class="ct__chart-svg" preserveAspectRatio="none">
+              <defs>
+                <linearGradient id="ct-chartGradient" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="0%" stop-color="#f59e0b" stop-opacity="0.3"></stop>
+                  <stop offset="100%" stop-color="#6366f1" stop-opacity="0"></stop>
+                </linearGradient>
+              </defs>
+              <path id="ct-chart-area" fill="url(#ct-chartGradient)"></path>
+              <path
+                id="ct-chart-line"
+                fill="none"
+                class="ct__chart-line"
+                stroke-width="3"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              ></path>
+            </svg>
+          </div>
+
+          <div class="ct__sleep">
+            <div class="ct__sleep-inner">
+              <div class="ct__sleep-controls">
+                <div class="ct__sleep-top">
+                  <label class="ct__sleep-question">{ui.labelSleepQuestion}</label>
+                  <span id="ct-sleep-time" class="ct__sleep-time">--</span>
+                </div>
+                <input
+                  type="range"
+                  id="ct-sleep-slider"
+                  min="0"
+                  max="24"
+                  value="12"
+                  step="0.5"
+                  class="ct__sleep-input"
+                />
+              </div>
+              <div class="ct__sleep-result">
+                <div id="ct-sleep-status" class="ct__sleep-status">--</div>
+                <div class="ct__sleep-mg">
+                  <span id="ct-final-mg">0</span
+                  ><span class="ct__sleep-mg-unit">mg</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="ct__icon-cache" aria-hidden="true">
+    {DRINK_PRESETS.map((drink) => (
+      <span id={`ct-icon-${drink.id}`}><Icon name={drink.icon} /></span>
+    ))}
+    <span id="ct-icon-remove"><Icon name="mdi:close-circle-outline" /></span>
+  </div>
+</section>
+
+<script>
+  import { calculateDecay } from './logic';
+  import type { CaffeineTrackerUI } from './ui';
+
+  const container = document.getElementById('ct-container');
+  const t = JSON.parse(container?.dataset.ui ?? '{}') as CaffeineTrackerUI;
+
+  const currentMgEl = document.getElementById('ct-current-mg');
+  const currentMgContainer = document.getElementById('ct-current-container');
+  const eliminationTimeEl = document.getElementById('ct-elimination-time');
+  const finalMgEl = document.getElementById('ct-final-mg');
+  const sleepSlider = document.getElementById('ct-sleep-slider') as HTMLInputElement | null;
+  const sleepTimeDisplay = document.getElementById('ct-sleep-time');
+  const sleepStatus = document.getElementById('ct-sleep-status');
+  const chartLine = document.getElementById('ct-chart-line') as SVGPathElement | null;
+  const chartArea = document.getElementById('ct-chart-area') as SVGPathElement | null;
+  const svg = document.getElementById('ct-decaysvg') as SVGSVGElement | null;
+  const resetBtn = document.getElementById('ct-reset-btn');
+  const journalCountEl = document.getElementById('ct-journal-count');
+  const drinkJournalEl = document.getElementById('ct-drink-journal');
+
+  interface JournalItem {
+    id: number;
+    name: string;
+    mg: number;
+    drinkId: string;
+  }
+
+  let journal: JournalItem[] = [];
+  let totalMg = 0;
+  let halfLife = 5.5;
+
+  function triggerBump(el: HTMLElement | null, cls: string) {
+    if (!el) return;
+    el.classList.add(cls);
+    setTimeout(() => el.classList.remove(cls), 200);
+  }
+
+  function updateCurrentDisplay(mg: number, animate: boolean) {
+    if (!currentMgEl) return;
+    currentMgEl.textContent = Math.round(mg).toString();
+    if (animate) triggerBump(currentMgContainer, 'ct__current-container--bump');
+  }
+
+  function updateSleepTimeDisplay(hours: number) {
+    if (!sleepTimeDisplay) return;
+    const d = new Date();
+    d.setMinutes(d.getMinutes() + hours * 60);
+    const str = d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    sleepTimeDisplay.textContent = `${t.sleepAtPrefix} ${str} (+${hours.toFixed(1)}h)`;
+  }
+
+  function updateSleepStatus(mg: number) {
+    if (!sleepStatus) return;
+    sleepStatus.classList.remove(
+      'ct__sleep-status--optimal',
+      'ct__sleep-status--moderate',
+      'ct__sleep-status--critical',
+    );
+    if (mg < 5) {
+      sleepStatus.textContent = t.statusOptimal;
+      sleepStatus.classList.add('ct__sleep-status--optimal');
+    } else if (mg < 20) {
+      sleepStatus.textContent = t.statusModerate;
+      sleepStatus.classList.add('ct__sleep-status--moderate');
+    } else {
+      sleepStatus.textContent = t.statusCritical;
+      sleepStatus.classList.add('ct__sleep-status--critical');
+    }
+  }
+
+  function updateSleepSection() {
+    if (!finalMgEl || !sleepSlider) return;
+    const sleepHours = parseFloat(sleepSlider.value);
+    updateSleepTimeDisplay(sleepHours);
+    const finalMg = calculateDecay(totalMg, sleepHours, halfLife);
+    finalMgEl.textContent = Math.round(finalMg).toString();
+    updateSleepStatus(finalMg);
+  }
+
+  function updateEliminationTime() {
+    if (!eliminationTimeEl) return;
+    if (totalMg > 0) {
+      const ttc = halfLife * Math.log2(totalMg / 5);
+      eliminationTimeEl.textContent = ttc > 0 ? Math.round(ttc).toString() : '0';
+    } else {
+      eliminationTimeEl.textContent = '--';
+    }
+  }
+
+  function update(animate = false) {
+    totalMg = journal.reduce((acc, item) => acc + item.mg, 0);
+    updateCurrentDisplay(totalMg, animate);
+    updateSleepSection();
+    updateEliminationTime();
+    renderJournal();
+    drawChart();
+  }
+
+  function drawChart() {
+    if (!svg || !chartLine || !chartArea) return;
+    const w = svg.clientWidth;
+    const h = svg.clientHeight;
+    const maxMg = Math.max(150, totalMg + 20);
+    const dur = 24;
+    let line = '';
+    let area = '';
+    for (let i = 0; i <= dur; i += 0.2) {
+      const mg = calculateDecay(totalMg, i, halfLife);
+      const x = (i / dur) * w;
+      const y = h - (mg / maxMg) * h;
+      if (i === 0) {
+        line = `M ${x} ${y}`;
+        area = `M ${x} ${h} L ${x} ${y}`;
+      } else {
+        line += ` L ${x} ${y}`;
+        area += ` L ${x} ${y}`;
+      }
+    }
+    area += ` L ${w} ${h} Z`;
+    chartLine.setAttribute('d', line);
+    chartArea.setAttribute('d', area);
+  }
+
+  function buildItemHTML(item: JournalItem): string {
+    const iconEl = document.getElementById(`ct-icon-${item.drinkId}`);
+    const removeEl = document.getElementById('ct-icon-remove');
+    const iconHtml = iconEl?.innerHTML ?? '';
+    const removeHtml = removeEl?.innerHTML ?? '';
+    return `<div id="item-${item.id}" class="ct__item">
+      <span class="ct__item-icon">${iconHtml}</span>
+      <div class="ct__item-info">
+        <div class="ct__item-name">${item.name}</div>
+        <div class="ct__item-mg">${item.mg}mg</div>
+      </div>
+      <button data-id="${item.id}" class="ct__remove-btn" aria-label="Remove">
+        <span class="ct__remove-icon">${removeHtml}</span>
+      </button>
+    </div>`;
+  }
+
+  function handleRemove(btn: Element) {
+    const id = parseInt(btn.getAttribute('data-id') ?? '0');
+    const element = document.getElementById(`item-${id}`);
+    if (element) {
+      element.classList.add('ct__item--removing');
+      setTimeout(() => {
+        journal = journal.filter((it) => it.id !== id);
+        update();
+      }, 300);
+    } else {
+      journal = journal.filter((it) => it.id !== id);
+      update();
+    }
+  }
+
+  function attachRemoveListeners() {
+    drinkJournalEl?.querySelectorAll('.ct__remove-btn').forEach((btn) => {
+      btn.addEventListener('click', () => handleRemove(btn));
+    });
+  }
+
+  function renderJournal() {
+    if (!drinkJournalEl || !journalCountEl) return;
+    journalCountEl.textContent = journal.length.toString();
+    if (journal.length === 0) {
+      drinkJournalEl.innerHTML = `<div class="ct__journal-empty"><p>${t.journalEmpty}</p></div>`;
+      return;
+    }
+    drinkJournalEl.innerHTML = journal.slice().reverse().map(buildItemHTML).join('');
+    attachRemoveListeners();
+  }
+
+  function animateFlyer(
+    flyer: HTMLElement,
+    src: DOMRect,
+    tgt: DOMRect,
+    start: number,
+  ) {
+    const dur = 600;
+    const elapsed = performance.now() - start;
+    const prog = Math.min(elapsed / dur, 1);
+    const ease = prog * (2 - prog);
+    const x = src.left + (tgt.left - src.left) * ease;
+    const y = src.top + (tgt.top - src.top) * ease;
+    flyer.style.transform = `translate(${x - src.left}px,${y - src.top}px) scale(${1 - prog * 0.5})`;
+    flyer.style.opacity = `${1 - prog / 2}`;
+    if (prog < 1) {
+      requestAnimationFrame(() => animateFlyer(flyer, src, tgt, start));
+    } else {
+      flyer.remove();
+      triggerBump(journalCountEl, 'ct__journal-count--bump');
+    }
+  }
+
+  function flyToJournal(btn: HTMLElement) {
+    const iconSource = btn.querySelector('.ct__icon-to-fly');
+    if (!iconSource || !journalCountEl) return;
+    const src = iconSource.getBoundingClientRect();
+    const tgt = journalCountEl.getBoundingClientRect();
+    const flyer = document.createElement('div');
+    flyer.className = 'ct__flyer';
+    flyer.style.cssText = `left:${src.left}px;top:${src.top}px;width:${src.width}px;height:${src.height}px;`;
+    flyer.innerHTML = iconSource.innerHTML;
+    document.body.appendChild(flyer);
+    animateFlyer(flyer, src, tgt, performance.now());
+  }
+
+  container?.querySelectorAll<HTMLElement>('.ct__drink-btn').forEach((btn) => {
+    btn.addEventListener('click', () => {
+      const mg = parseInt(btn.getAttribute('data-mg') ?? '0');
+      const name = btn.getAttribute('data-name') ?? '';
+      const drinkId = btn.getAttribute('data-drink-id') ?? '';
+      flyToJournal(btn);
+      journal.push({ id: Date.now(), name, mg, drinkId });
+      update(true);
+    });
+  });
+
+  container?.querySelectorAll<HTMLInputElement>('input[name="ct-metabolism"]').forEach((radio) => {
+    radio.addEventListener('change', (e) => {
+      halfLife = parseFloat((e.target as HTMLInputElement).value);
+      update();
+    });
+  });
+
+  sleepSlider?.addEventListener('input', () => update());
+  resetBtn?.addEventListener('click', () => {
+    journal = [];
+    update();
+  });
+  window.addEventListener('resize', drawChart);
+  update();
+</script>
+
+<style>
+  .ct {
+    --ct-bg: #fff;
+    --ct-bg-panel: #f8fafc;
+    --ct-bg-item: #fff;
+    --ct-bg-icon: #f1f5f9;
+    --ct-border: #e2e8f0;
+    --ct-text: #0f172a;
+    --ct-text-sub: #475569;
+    --ct-text-muted: #94a3b8;
+    --ct-primary: #f59e0b;
+    --ct-secondary: #6366f1;
+
+    max-width: 72rem;
+    margin: 0 auto;
+    padding: 2rem 1rem;
+  }
+
+  :global(.theme-dark) .ct {
+    --ct-bg: #09090b;
+    --ct-bg-panel: rgba(24, 24, 27, 0.5);
+    --ct-bg-item: #18181b;
+    --ct-bg-icon: #27272a;
+    --ct-border: #27272a;
+    --ct-text: #fafafa;
+    --ct-text-sub: #a1a1aa;
+    --ct-text-muted: #71717a;
+  }
+
+  .ct__card {
+    width: 100%;
+    background-color: var(--ct-bg);
+    border: 1px solid var(--ct-border);
+    border-radius: 3rem;
+    box-shadow:
+      0 25px 50px -12px rgba(0, 0, 0, 0.25),
+      0 0 0 1px rgba(99, 102, 241, 0.05);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    transition: all 0.5s;
+  }
+
+  .ct__grid {
+    display: grid;
+  }
+
+  .ct__panel {
+    background-color: var(--ct-bg-panel);
+    padding: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  .ct__main {
+    display: flex;
+    flex-direction: column;
+    background-color: var(--ct-bg);
+  }
+
+  
+  @media (min-width: 1024px) {
+    .ct__card {
+      max-height: 85vh;
+      overflow: hidden;
+    }
+
+    .ct__grid {
+      grid-template-columns: 33.333% 66.667%;
+      overflow: hidden;
+      height: 100%;
+      min-height: 0;
+    }
+
+    .ct__panel {
+      border-right: 1px solid var(--ct-border);
+      overflow-y: auto;
+    }
+
+    .ct__main {
+      height: 100%;
+      overflow: hidden;
+    }
+  }
+
+  .ct__scrollable::-webkit-scrollbar {
+    width: 3px;
+  }
+
+  .ct__scrollable::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .ct__scrollable::-webkit-scrollbar-thumb {
+    background: rgba(155, 155, 155, 0.1);
+    border-radius: 10px;
+  }
+
+  .ct__scrollable::-webkit-scrollbar-thumb:hover {
+    background: rgba(155, 155, 155, 0.3);
+  }
+
+  
+  .ct__section {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .ct__section--bordered {
+    padding-top: 1.5rem;
+    border-top: 1px solid var(--ct-border);
+  }
+
+  .ct__section-title {
+    font-size: 1.125rem;
+    font-weight: 700;
+    color: var(--ct-text);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin: 0;
+  }
+
+  .ct__section-icon {
+    color: #92400e;
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  :global(.theme-dark) .ct__section-icon {
+    color: #f59e0b;
+  }
+
+  
+  .ct__drink-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 0.5rem;
+  }
+
+  .ct__drink-btn {
+    position: relative;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.75rem;
+    border-radius: 0.75rem;
+    background-color: var(--ct-bg-item);
+    border: 1px solid var(--ct-border);
+    cursor: pointer;
+    text-align: left;
+    overflow: hidden;
+    transition:
+      border-color 0.2s,
+      box-shadow 0.2s;
+  }
+
+  .ct__drink-btn:hover {
+    border-color: rgba(245, 158, 11, 0.5);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  }
+
+  .ct__drink-btn-icon {
+    padding: 0.5rem;
+    border-radius: 0.5rem;
+    background-color: var(--ct-bg-icon);
+    color: var(--ct-text-muted);
+    transition:
+      background-color 0.2s,
+      color 0.2s;
+    pointer-events: none;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .ct__drink-btn:hover .ct__drink-btn-icon {
+    background-color: rgba(245, 158, 11, 0.1);
+    color: var(--ct-primary);
+  }
+
+  .ct__icon-to-fly {
+    display: contents;
+  }
+
+  .ct__icon-5 {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  .ct__drink-info {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .ct__drink-name {
+    font-weight: 700;
+    color: var(--ct-text);
+    font-size: 0.75rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin: 0;
+  }
+
+  .ct__drink-desc {
+    font-size: 0.5625rem;
+    color: var(--ct-text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin: 0;
+  }
+
+  .ct__drink-add {
+    width: 1rem;
+    height: 1rem;
+    color: var(--ct-border);
+    transition: color 0.2s;
+    flex-shrink: 0;
+  }
+
+  .ct__drink-btn:hover .ct__drink-add {
+    color: var(--ct-primary);
+  }
+
+  
+  .ct__meta-title {
+    font-size: 0.625rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.15em;
+    color: var(--ct-text-muted);
+    margin: 0;
+  }
+
+  .ct__meta-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 0.375rem;
+  }
+
+  .ct__meta-option {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.625rem;
+    border-radius: 0.75rem;
+    cursor: pointer;
+    transition:
+      background-color 0.2s,
+      border-color 0.2s;
+    border: 1px solid transparent;
+  }
+
+  .ct__meta-option:hover {
+    background-color: var(--ct-bg-item);
+    border-color: var(--ct-border);
+  }
+
+  .ct__meta-radio {
+    accent-color: #d97706;
+    width: 0.875rem;
+    height: 0.875rem;
+    flex-shrink: 0;
+  }
+
+  .ct__meta-text {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .ct__meta-label {
+    font-size: 0.75rem;
+    font-weight: 700;
+    color: var(--ct-text);
+    transition: color 0.2s;
+  }
+
+  .ct__meta-option:hover .ct__meta-label {
+    color: var(--ct-primary);
+  }
+
+  .ct__meta-desc {
+    font-size: 0.5625rem;
+    color: var(--ct-text-muted);
+    line-height: 1.4;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin: 0;
+  }
+
+  
+  .ct__journal-header {
+    font-size: 0.625rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.15em;
+    color: var(--ct-text-muted);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 0;
+  }
+
+  .ct__journal-count {
+    font-size: 0.5625rem;
+    background-color: var(--ct-bg-icon);
+    padding: 0.125rem 0.375rem;
+    border-radius: 9999px;
+    font-weight: 700;
+    transition: all 0.3s;
+  }
+
+  .ct__journal-count--bump {
+    transform: scale(1.25);
+    background-color: var(--ct-primary);
+    color: #fff;
+  }
+
+  .ct__journal {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+  }
+
+  
+  :global(.ct__journal-empty) {
+    text-align: center;
+    padding: 1.5rem;
+    opacity: 0.3;
+    border: 2px dashed var(--ct-border);
+    border-radius: 0.75rem;
+  }
+
+  :global(.ct__journal-empty p) {
+    font-size: 0.5625rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    margin: 0;
+  }
+
+  
+  :global(.ct__item) {
+    display: flex;
+    align-items: center;
+    gap: 0.625rem;
+    padding: 0.5rem;
+    background-color: var(--ct-bg-item);
+    border-radius: 0.5rem;
+    border: 1px solid var(--ct-border);
+    transition:
+      opacity 0.3s,
+      transform 0.3s;
+  }
+
+  :global(.ct__item--removing) {
+    opacity: 0;
+    transform: translateX(-1rem);
+  }
+
+  :global(.ct__item-icon) {
+    padding: 0.375rem;
+    background-color: var(--ct-bg-icon);
+    border-radius: 0.25rem;
+    color: var(--ct-text-muted);
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  :global(.ct__item-icon svg) {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+
+  :global(.ct__item:hover .ct__item-icon) {
+    color: var(--ct-primary);
+  }
+
+  :global(.ct__item-info) {
+    flex: 1;
+    min-width: 0;
+    text-align: left;
+  }
+
+  :global(.ct__item-name) {
+    font-size: 0.625rem;
+    font-weight: 700;
+    color: var(--ct-text);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 1;
+    margin-bottom: 0.125rem;
+  }
+
+  :global(.ct__item-mg) {
+    font-size: 0.5rem;
+    color: var(--ct-primary);
+    font-weight: 700;
+    line-height: 1;
+  }
+
+  :global(.ct__remove-btn) {
+    padding: 0.375rem;
+    color: var(--ct-border);
+    border: none;
+    background: none;
+    cursor: pointer;
+    border-radius: 0.25rem;
+    transition:
+      color 0.2s,
+      background-color 0.2s;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  :global(.ct__remove-btn:hover) {
+    color: #f43f5e;
+    background-color: rgba(244, 63, 94, 0.1);
+  }
+
+  :global(.ct__remove-icon svg) {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+
+  
+  .ct__stats {
+    padding: 2rem;
+    border-bottom: 1px solid var(--ct-border);
+    background-color: rgba(248, 250, 252, 0.3);
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 2rem;
+    flex-shrink: 0;
+  }
+
+  :global(.theme-dark) .ct__stats {
+    background-color: rgba(24, 24, 27, 0.1);
+    border-bottom-color: #18181b;
+  }
+
+  .ct__stats-left {
+    display: flex;
+    gap: 3rem;
+    text-align: left;
+  }
+
+  .ct__stat {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+  }
+
+  .ct__stat-label {
+    font-size: 0.5625rem;
+    font-weight: 700;
+    color: var(--ct-text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+  }
+
+  .ct__stat-value {
+    font-size: 2.25rem;
+    font-weight: 900;
+    color: var(--ct-text);
+    font-variant-numeric: tabular-nums;
+    display: flex;
+    align-items: baseline;
+    gap: 0.25rem;
+    transition: all 0.3s;
+    transform-origin: left;
+  }
+
+  .ct__current-container--bump {
+    transform: scale(1.1);
+    color: var(--ct-primary);
+    transition:
+      transform 0.1s ease-out,
+      color 0.1s ease-out;
+  }
+
+  .ct__stat-unit {
+    font-size: 0.875rem;
+    font-weight: 400;
+    color: var(--ct-text-muted);
+  }
+
+  .ct__reset-btn {
+    padding: 0.5rem 1rem;
+    border-radius: 0.75rem;
+    background-color: var(--ct-bg-icon);
+    color: var(--ct-text-muted);
+    border: none;
+    cursor: pointer;
+    font-size: 0.625rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    transition: color 0.2s;
+  }
+
+  .ct__reset-btn:hover {
+    color: #f43f5e;
+  }
+
+  .ct__icon-4 {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  
+  .ct__main-body {
+    padding: 2rem;
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+  }
+
+  @media (min-width: 1024px) {
+    .ct__main-body {
+      flex: 1;
+      overflow-y: auto;
+    }
+  }
+
+  
+  .ct__chart-wrap {
+    min-height: 250px;
+    position: relative;
+    width: 100%;
+  }
+
+  .ct__chart-grid {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    pointer-events: none;
+    opacity: 0.3;
+  }
+
+  .ct__chart-gridline {
+    width: 100%;
+    border-top: 1px solid var(--ct-border);
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .ct__chart-gridlabel {
+    font-size: 0.5rem;
+    margin-top: -0.5rem;
+    padding-right: 0.5rem;
+    color: var(--ct-text-muted);
+  }
+
+  .ct__chart-svg {
+    width: 100%;
+    height: 100%;
+    overflow: visible;
+  }
+
+  .ct__chart-line {
+    stroke: #f59e0b;
+  }
+
+  :global(.theme-dark) .ct__chart-line {
+    stroke: #fbbf24;
+  }
+
+  
+  .ct__sleep {
+    background-color: #0f172a;
+    border-radius: 2.5rem;
+    padding: 2rem;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    position: relative;
+    overflow: hidden;
+    flex-shrink: 0;
+    background-image: linear-gradient(
+      to bottom right,
+      rgba(245, 158, 11, 0.1),
+      transparent,
+      rgba(99, 102, 241, 0.1)
+    );
+  }
+
+  :global(.theme-dark) .ct__sleep {
+    background-color: #18181b;
+  }
+
+  .ct__sleep-inner {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    gap: 2.5rem;
+    position: relative;
+    z-index: 1;
+  }
+
+  @media (min-width: 768px) {
+    .ct__sleep-inner {
+      flex-direction: row;
+    }
+  }
+
+  .ct__sleep-controls {
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+    width: 100%;
+  }
+
+  @media (min-width: 768px) {
+    .ct__sleep-controls {
+      width: 60%;
+    }
+  }
+
+  .ct__sleep-top {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    text-align: left;
+  }
+
+  .ct__sleep-question {
+    font-size: 0.625rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.2em;
+    color: #94a3b8;
+  }
+
+  .ct__sleep-time {
+    font-size: 0.75rem;
+    color: var(--ct-primary);
+    font-weight: 700;
+  }
+
+  .ct__sleep-input {
+    width: 100%;
+    height: 0.375rem;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 9999px;
+    appearance: none;
+    cursor: pointer;
+    accent-color: var(--ct-primary);
+  }
+
+  .ct__sleep-input::-webkit-slider-thumb {
+    appearance: none;
+    width: 18px;
+    height: 18px;
+    background: var(--ct-primary);
+    border-radius: 50%;
+    cursor: pointer;
+    border: 3px solid #0f172a;
+    box-shadow: 0 0 15px rgba(245, 158, 11, 0.5);
+  }
+
+  .ct__sleep-result {
+    text-align: center;
+    flex-shrink: 0;
+  }
+
+  @media (min-width: 768px) {
+    .ct__sleep-result {
+      text-align: right;
+    }
+  }
+
+  .ct__sleep-status {
+    padding: 0.25rem 0.75rem;
+    border-radius: 9999px;
+    font-size: 0.5625rem;
+    font-weight: 900;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    margin-bottom: 0.75rem;
+    display: inline-block;
+    border: 1px solid transparent;
+  }
+
+  .ct__sleep-status--optimal {
+    background-color: rgba(16, 185, 129, 0.2);
+    color: #10b981;
+    border-color: rgba(16, 185, 129, 0.3);
+    box-shadow: 0 10px 15px -3px rgba(16, 185, 129, 0.1);
+  }
+
+  .ct__sleep-status--moderate {
+    background-color: rgba(245, 158, 11, 0.2);
+    color: #f59e0b;
+    border-color: rgba(245, 158, 11, 0.3);
+    box-shadow: 0 10px 15px -3px rgba(245, 158, 11, 0.1);
+  }
+
+  .ct__sleep-status--critical {
+    background-color: rgba(244, 63, 94, 0.2);
+    color: #f43f5e;
+    border-color: rgba(244, 63, 94, 0.3);
+    box-shadow: 0 10px 15px -3px rgba(244, 63, 94, 0.2);
+    transform: scale(1.05);
+  }
+
+  .ct__sleep-mg {
+    font-size: 3rem;
+    font-weight: 900;
+    color: #fff;
+    line-height: 1;
+    letter-spacing: -0.05em;
+    display: flex;
+    align-items: baseline;
+    justify-content: center;
+    gap: 0.25rem;
+  }
+
+  @media (min-width: 768px) {
+    .ct__sleep-mg {
+      justify-content: flex-end;
+    }
+  }
+
+  .ct__sleep-mg-unit {
+    font-size: 0.875rem;
+    font-weight: 400;
+    opacity: 0.4;
+    margin-left: 0.5rem;
+  }
+
+  
+  :global(.ct__flyer) {
+    position: fixed;
+    z-index: 100;
+    pointer-events: none;
+    color: var(--ct-primary);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  
+  .ct__icon-cache {
+    display: none;
+  }
+</style>