:root{
    --bg: #09090b;
    --surface: #111113;
    --surface-2: #18181b;
    --border: #27272a;
    --border-soft: #202023;
    --text: #fafafa;
    --muted: #8b8b93;
    --muted-2: #6b6b72;
    --mild: #34d399;
    --moderate: #fbbf24;
    --severe: #f87171;
    --nav-bg: rgba(9,9,11,0.92);
    --nav-active-bg: rgba(255,255,255,0.08);
    --radius: 16px;
    --app-height: 100vh;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* Use the visible viewport in regular Safari. In standalone PWA, --app-height is pinned to 100vh */
  @supports (height: 100dvh) {
    :root:not(.is-standalone) { --app-height: 100dvh; }
  }

  .is-standalone,
  .is-standalone html,
  .is-standalone body,
  .is-standalone #app {
    height: var(--app-height) !important;
    min-height: var(--app-height) !important;
    max-height: var(--app-height) !important;
    overflow: hidden !important;
  }

  [data-theme="light"]{
    --bg: #f9f9fb;
    --surface: #ffffff;
    --surface-2: #f3f3f5;
    --border: #e4e4e7;
    --border-soft: #ececee;
    --text: #18181b;
    --muted: #71717a;
    --muted-2: #a1a1aa;
    --nav-bg: rgba(249,249,251,0.92);
    --nav-active-bg: rgba(24,24,27,0.08);
  }

  /* Hide scrollbars (keep vertical scrolling enabled) */
  *{
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  *::-webkit-scrollbar{
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  html{
    width: 100%;
    height: 100%;
    height: -webkit-fill-available;
    margin: 0;
    padding: 0;
    overscroll-behavior: none;
    background: var(--bg);
    -webkit-text-size-adjust: 100%;
  }

  body{
    width: 100%;
    height: 100%;
    height: var(--app-height, 100vh);
    min-height: 100%;
    min-height: -webkit-fill-available;
    margin: 0;
    padding: 0;
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", ui-sans-serif, system-ui, Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
    overscroll-behavior: none;
    background: var(--bg);
  }

  #app{
    width: 100%;
    height: 100%;
    height: var(--app-height, 100vh);
    min-height: 100%;
    min-height: -webkit-fill-available;
    max-width: 520px;
    margin: 0 auto;
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    overflow: hidden;
  }

  .status-bar-tap-area{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: max(22px, var(--safe-top));
    z-index: 75;
    cursor: pointer;
  }

  /* ---------- HEADER ---------- */
  header.app-header{
    padding: calc(var(--safe-top) + 18px) 20px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border-soft);
    background: var(--bg);
    z-index: 70;
  }

  header.app-header h1{
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0;
  }

  header.app-header .sub{
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 2px;
    transition: opacity .2s ease;
  }

  .header-right{
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .stat-pill{
    font-size: 12px;
    color: var(--muted);
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 6px 11px;
    border-radius: 999px;
    white-space: nowrap;
  }

  .icon-btn{
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .15s ease;
    flex-shrink: 0;
  }

  
  .settings-btn{
    position: relative;
    overflow: hidden;
  }

  .settings-btn .gear-icon,
  .settings-btn .close-icon{
    position: absolute;
    inset: 0;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .25s cubic-bezier(.32,.72,0,1), opacity .2s ease;
  }

  .settings-btn .close-icon{
    opacity: 0;
    transform: rotate(-90deg) scale(0.7);
    pointer-events: none;
  }

  .settings-btn.is-open .gear-icon{
    opacity: 0;
    transform: rotate(90deg) scale(0.7);
    pointer-events: none;
  }

  .settings-btn.is-open .close-icon{
    opacity: 1;
    transform: rotate(0) scale(1);
    pointer-events: auto;
  }

  .icon-btn:active{
    background: var(--surface-2);
    color: var(--text);
    transform: scale(0.94);
  }

  /* ---------- SCREENS / SLIDING ---------- */
  .screens-viewport{
    flex: 1 1 0%;
    min-height: 0;
    overflow: hidden;
    position: relative;
    touch-action: pan-y;
  }

  .screens{
    position: relative;
    width: 100%;
    height: 100%;
  }

  .screen{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(100%);
    will-change: transform;
  }

  .screen.active{
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
  }

  .screen-pad{
    padding: 22px 20px 32px;
  }

  #screen-add{
    overflow: hidden !important;
  }

  #screen-add .screen-pad{
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 18px 20px 20px;
    box-sizing: border-box;
    overflow: hidden;
  }

  #screen-add .view-heading{
    margin-bottom: 4px;
    flex-shrink: 0;
  }

  #screen-add .now-display{
    margin: 0 0 18px;
    font-size: 13px;
    line-height: 1.2;
    flex-shrink: 0;
  }

  .stat-dot{
    display: inline-block;
    color: #71717a;
    font-weight: 400;
    margin: 0 4px;
    opacity: 0.75;
    user-select: none;
  }

  #screen-add .intensity-grid{
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  #screen-add .intensity-option{
    flex: 1;
    min-height: 0;
    padding: 8px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    gap: 8px;
  }

  #screen-add .intensity-option .num{
    width: 42px;
    height: 42px;
    font-size: 19px;
    border-radius: 13px;
    margin: 0 auto;
    flex-shrink: 0;
  }

  #screen-add .intensity-option .texts{
    flex: initial;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #screen-add .intensity-option .texts .name{
    font-size: 15.5px;
    font-weight: 500;
  }

  /* When 5 options are present, make number squares smaller to fit perfectly */
  #screen-add[data-count="5"] .intensity-option{
    padding: 6px 12px;
    gap: 6px;
  }

  #screen-add[data-count="5"] .intensity-option .num{
    width: 34px;
    height: 34px;
    font-size: 16px;
    border-radius: 11px;
  }

  #screen-add[data-count="5"] .intensity-option .texts .name{
    font-size: 14.5px;
    font-weight: 500;
  }

  #screen-add .intensity-option .texts .desc{
    font-size: 12.5px;
    margin-top: 2px;
  }

  #screen-add .intensity-option .check{
    position: absolute;
    top: 14px;
    right: 14px;
  }

  #screen-add .primary-btn{
    margin-top: 14px;
    padding: 16px;
    flex-shrink: 0;
  }

  .card{
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
  }

  .view-heading{
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--text);
    margin: 0 0 14px;
  }

  .screen-heading-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 14px;
  }

  .screen-heading-row .view-heading{
    margin-bottom: 0;
  }

  .screen-heading-actions{
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .add-btn-spacer{
    display: none;
    height: 0;
    flex-shrink: 0;
  }

  .card-title{
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 12px;
  }

  /* ---------- LIST SCREEN ---------- */
  .list-header-row{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0 0 12px;
  }

  .list-header-row h2{
    font-size: 15px;
    font-weight: 600;
    margin: 0;
  }

  .list-count{
    font-size: 12px;
    color: var(--muted-2);
  }

  #entryList{
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .list-month-header{
    font-size: 13px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    color: var(--muted);
    padding: 16px 2px 6px;
  }

  .list-month-header:first-child{
    padding-top: 2px;
  }

  .entry-item{
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px 12px;
  }

  .entry-badge{
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
  }

  .entry-info{
    flex: 1;
    min-width: 0;
  }

  .entry-date{ font-size: 14px; font-weight: 600; color: var(--text); }

  .entry-label{ font-size: 12px; color: var(--muted); margin-top: 2px; }

  .entry-delete{
    width: 32px;
    height: 32px;
    border-radius: 9px;
    border: none;
    background: transparent;
    color: var(--muted-2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .entry-delete:active{ background: var(--surface-2); color: var(--severe); }

  #screen-list .screen-pad{
    min-height: 100%;
    display: flex;
    flex-direction: column;
  }

  #entryList{
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
  }

  .empty-state{
    text-align: center;
    padding: 20px;
    color: var(--muted);
    font-size: 13.5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    margin: auto 0;
  }

  .empty-state .empty-icon{
    width: 84px;
    height: 84px;
    border-radius: 22px;
    background: var(--surface);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    margin-bottom: 20px;
  }

  .empty-state .empty-icon svg{
    display: block;
    stroke: var(--muted);
  }

  .empty-state .empty-text{
    line-height: 1.5;
  }

  /* ---------- ADD SCREEN ---------- */
  .now-display{ font-size: 12.5px; color: var(--muted); margin: 0 0 20px; }

  .intensity-grid{ display: flex; flex-direction: column; gap: 10px; }

  .intensity-option{
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 14px;
    color: var(--text);
    text-align: left;
    transition: border-color .15s ease, background .15s ease;
  }

  .intensity-option .num{
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    background: var(--surface-2);
    flex-shrink: 0;
    transition: background .18s ease, color .18s ease;
  }

  .intensity-option .texts{ flex: 1; }
  .intensity-option .texts .name{ font-size: 14.5px; font-weight: 500; }
  .intensity-option .texts .desc{ font-size: 12px; color: var(--muted); margin-top: 2px; }

  .intensity-option .check{
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .intensity-option[data-level="1"].selected{ border-color: var(--mild); background: rgba(52,211,153,0.06); }
  .intensity-option[data-level="2"].selected{ border-color: var(--moderate); background: rgba(251,191,36,0.06); }
  .intensity-option[data-level="3"].selected{ border-color: var(--severe); background: rgba(248,113,113,0.06); }

  .intensity-option[data-level="1"] .num{ color: var(--mild); }
  .intensity-option[data-level="2"] .num{ color: var(--moderate); }
  .intensity-option[data-level="3"] .num{ color: var(--severe); }

  /* Filled faint square when selected */
  .intensity-option[data-level="1"].selected .num{ background: rgba(52, 211, 153, 0.22); color: #34d399; }
  .intensity-option[data-level="2"].selected .num{ background: rgba(251, 191, 36, 0.22); color: #fbbf24; }
  .intensity-option[data-level="3"].selected .num{ background: rgba(248, 113, 113, 0.22); color: #f87171; }

  .intensity-option.selected .check{ background: var(--text); border-color: var(--text); }
  .intensity-option.selected .check::after{
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--bg);
  }

  .primary-btn{
    margin-top: 24px;
    width: 100%;
    padding: 15px;
    border-radius: 14px;
    border: none;
    background: var(--text);
    color: var(--bg);
    font-size: 15px;
    font-weight: 600;
    transition: opacity .15s ease, transform .1s ease;
  }

  .primary-btn:disabled{ opacity: 0.35; }
  .primary-btn:not(:disabled):active{ transform: scale(0.98); }

  .danger-btn{
    margin-top: 10px;
    width: 100%;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--severe);
    font-size: 14.5px;
    font-weight: 600;
  }

  .danger-btn:active{ background: rgba(248,113,113,0.08); }

  .danger-btn-solid{
    background: #d65555;
    border: 1px solid #d65555;
    color: #ffffff;
  }

  .danger-btn-solid:active{
    opacity: 0.88;
    transform: scale(0.98);
  }

  .ghost-btn{
    margin-top: 8px;
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    border: none;
    background: transparent;
    color: var(--muted);
    font-size: 14.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s ease;
  }

  /* ---------- FILTER BARS ---------- */
  .filter-bar{
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .filter-chip{
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: all .15s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .filter-chip:active{ transform: scale(0.96); }

  .filter-chip.active{
    background: var(--text);
    border-color: var(--text);
    color: var(--bg);
    font-weight: 600;
  }

  /* ---------- FILTER BUTTON & SHEET ---------- */
  .filter-trigger-btn{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 12.5px;
    font-weight: 500;
    padding: 6px 11px;
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
    user-select: none;
    -webkit-user-select: none;
  }

  .filter-trigger-btn:active{
    background: var(--surface-2);
  }

  .filter-trigger-btn.has-filter{
    border-color: rgba(255,255,255,0.22);
    background: var(--surface-2);
  }

  [data-theme="light"] .filter-trigger-btn.has-filter{
    border-color: rgba(0,0,0,0.18);
  }

  .filter-trigger-icon{
    display: flex;
    align-items: center;
    color: var(--muted);
  }

  .filter-trigger-label{
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .filter-options-list{
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 4px 0 10px;
  }

  .filter-option-item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
    user-select: none;
    -webkit-user-select: none;
  }

  .filter-option-item:active{
    background: var(--surface-2);
  }

  .filter-option-item.selected{
    border-color: rgba(255,255,255,0.24);
    background: var(--surface-2);
  }

  [data-theme="light"] .filter-option-item.selected{
    border-color: rgba(0,0,0,0.2);
  }

  .filter-option-left{
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .filter-option-dot{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .filter-option-check{
    display: flex;
    align-items: center;
    color: var(--text);
  }

  .filter-chip .chip-dot{
    width: 6px;
    height: 6px;
    border-radius: 50%;
  }

  /* ---------- GRAPH SCREEN ---------- */
  .graph-card{
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 16px 16px 10px;
    overflow: hidden;
  }

  .graph-card-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 16px;
    padding-left: 8px;
  }

  .chart-filter-bar{
    margin-bottom: 0;
    flex: 1;
    min-width: 0;
  }

  .chart-expand-btn{
    width: 32px;
    height: 32px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all .15s ease;
  }

  .chart-expand-btn:active{
    transform: scale(0.94);
    color: var(--text);
  }

  .graph-row{
    display: flex;
    align-items: stretch;
  }

  .y-axis{
    flex-shrink: 0;
    width: 26px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 4px 0 26px;
  }

  .y-axis span{
    font-size: 10.5px;
    color: var(--muted-2);
    text-align: right;
    padding-right: 6px;
  }

  .chart-scroll{
    flex: 1;
    overflow-x: hidden; /* Standard view: no horizontal scroll */
    -webkit-overflow-scrolling: touch;
  }

  .chart-scroll svg{ display: block; }

  .legend{ display: flex; gap: 14px; margin-top: 14px; flex-wrap: wrap; padding-left: 10px; }
  .legend-item{ display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); }
  .legend-dot{ width: 8px; height: 8px; border-radius: 50%; }

  .graph-stats{
    display: grid;
    grid-template-columns: 1.38fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
  }

  .stat-box{
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px;
  }

  .stat-box .label{ font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .stat-box .value{ font-size: 16px; font-weight: 700; margin-top: 4px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .stat-box .value-sub{ font-size: 11.5px; font-weight: 500; color: var(--muted); margin-top: 2px; }
  .stat-box .stat-light{ font-weight: 450; color: #d4d4d8; }

  /* ---------- FULLSCREEN CHART MODAL ---------- */
  .chart-fullscreen-modal{
    position: absolute;
    top: var(--header-height, calc(var(--safe-top) + 72px));
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    padding: 16px 16px max(14px, env(safe-area-inset-bottom, 14px));
    box-sizing: border-box;
    opacity: 0;
    pointer-events: none;
    transform: translateY(18px) scale(0.98);
    transition: opacity .24s ease, transform .24s cubic-bezier(.25,1,.5,1);
  }

  .chart-fullscreen-modal.show{
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }

  .chart-fullscreen-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    padding: 0 4px;
  }

  .chart-fullscreen-title{
    font-size: 19px;
    font-weight: 700;
    margin: 0;
  }

  .chart-fullscreen-sub{
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
  }

  .chart-fullscreen-controls{
    margin-bottom: 18px;
    padding: 0 4px;
  }

  .chart-fullscreen-body{
    flex: 1;
    min-height: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 14px 14px 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
  }

  .chart-fullscreen-body .graph-row{
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: stretch;
  }

  .chart-fullscreen-body .y-axis{
    height: 100%;
    box-sizing: border-box;
  }

  .chart-fullscreen-body .fullscreen-scroll{
    flex: 1;
    height: 100%;
    min-height: 0;
    overflow-x: auto !important; /* Fullscreen: horizontally scrollable */
    -webkit-overflow-scrolling: touch;
  }

  .chart-fullscreen-body .fullscreen-scroll svg{
    height: 100%;
    min-height: 100%;
    display: block;
  }

  .chart-fullscreen-body .legend{
    flex-shrink: 0;
    margin-top: 10px;
  }

  /* ---------- BOTTOM NAV WITH SLIDING RECTANGLE ---------- */
  nav.bottom-nav{
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-around;
    padding-top: 10px;
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: calc(10px + var(--safe-bottom));
    height: calc(68px + var(--safe-bottom));
    box-sizing: border-box;
    background: var(--nav-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--border-soft);
    position: relative;
    z-index: 10;
  }

  .nav-indicator{
    position: absolute;
    top: 10px;
    left: 0;
    height: 48px;
    border-radius: 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    transition: transform .28s cubic-bezier(.25,1,.5,1), width .22s ease, opacity .18s ease;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
  }

  .nav-btn{
    background: none;
    border: none;
    color: var(--muted-2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 11px;
    min-width: 72px;
    height: 48px;
    padding: 4px 18px;
    border-radius: 14px;
    cursor: pointer;
    position: relative;
    z-index: 2;
    transition: color .18s ease;
  }

  .nav-btn svg{
    stroke: var(--muted-2);
    transition: stroke .18s ease, transform .18s ease;
  }

  .nav-btn span{
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: color .18s ease;
  }

  .nav-btn.active{
    color: var(--text);
    background: transparent !important;
  }

  .nav-btn.active svg{
    stroke: var(--text);
    transform: translateY(-1px);
  }

  .nav-btn.active span{
    color: var(--text);
  }

  /* ---------- EDIT SHEET ---------- */
  #backdrop{
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    z-index: 100;
  }

  #backdrop.show{ opacity: 1; pointer-events: auto; }

  #editSheet, #confirmSheet, #clearAllSheet, #signInSheet, #deleteAccountSheet, #filterSheet{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg);
    border-top: 1px solid var(--border);
    border-radius: 24px 24px 0 0;
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.32,.72,0,1);
    z-index: 101;
    padding-bottom: calc(10px + var(--safe-bottom));
    max-height: 90%;
    display: flex;
    flex-direction: column;
  }

  #editSheet.show, #confirmSheet.show, #clearAllSheet.show, #signInSheet.show, #deleteAccountSheet.show, #filterSheet.show{ transform: translateY(0); }

  .confirm-desc{
    font-size: 13.5px;
    color: var(--muted);
    line-height: 1.45;
    margin: 0 0 16px;
  }

  #confirmSheet .confirm-desc{
    margin: 0 0 16px;
  }

  .confirm-target{
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
  }

  .sheet-grip{ width: 36px; height: 4px; border-radius: 999px; background: var(--border); margin: 10px auto 6px; }

  .sheet-header{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px 4px;
    position: relative;
  }

  .sheet-header h2{ font-size: 16px; font-weight: 600; margin: 0; text-align: center; }

  .sheet-cancel{ background: none; border: none; color: var(--muted); font-size: 14.5px; padding: 6px 2px; }

  .sheet-body{ padding: 8px 20px 0; overflow-y: auto; }

  #editSheet .sheet-body{
    padding-top: 6px;
  }

  #editSheet #editDateDisplay{
    text-align: center;
    justify-content: center;
    margin: 0 0 16px;
  }

  
  .no-theme-transition,
  .no-theme-transition *,
  .no-theme-transition *::before,
  .no-theme-transition *::after {
    transition: none !important;
  }

  
  /* ---------- AUTH & USER ACCOUNT STYLING ---------- */
  .sign-in-btn{
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    transition: all .15s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 32px;
  }

  .sign-in-btn:active{
    background: var(--surface-2);
    transform: scale(0.96);
  }

  .user-badge-header{
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: 1px solid var(--border);
    overflow: hidden;
    cursor: pointer;
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
  }

  .user-badge-header img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .user-account-card{
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .user-account-header{
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
  }

  .user-avatar-wrap{
    position: relative;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
  }

  .user-avatar{
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--surface-2);
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    overflow: hidden;
    flex-shrink: 0;
  }

  .user-provider-badge{
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--surface);
    border: 1.5px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.35);
    z-index: 2;
  }

  .user-provider-badge svg{
    width: 12px;
    height: 12px;
    display: block;
  }

  .user-avatar img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .user-info{
    flex: 1;
    min-width: 0;
  }

  .user-signed-as{
    font-size: 11.5px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .user-name{
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .oauth-btn{
    width: 100%;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 14.5px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
    transition: background .15s ease, transform .1s ease;
    text-decoration: none;
    box-sizing: border-box;
  }

  .oauth-btn:active{
    background: var(--surface-2);
    transform: scale(0.98);
  }

  .oauth-btn svg{
    flex-shrink: 0;
  }

  .oauth-btn-demo{
    background: var(--surface-2);
    border-color: var(--border-soft);
    font-size: 13.5px;
    margin-top: 8px;
    color: var(--muted);
  }

  .sign-out-btn{
    margin-top: 0;
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s ease;
  }

  .sign-out-btn:active{
    background: var(--border);
  }

  
  .export-btn{
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    font-size: 13.5px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all .15s ease;
  }

  .export-btn:not(:disabled):active{
    transform: scale(0.97);
    background: var(--border);
  }

  .export-btn:disabled{
    opacity: 0.38;
    cursor: not-allowed;
    pointer-events: none;
  }

  /* ---------- SETTINGS SCREEN ---------- */
  .theme-picker{
    display: flex;
    gap: 4px;
    background: var(--surface-2);
    padding: 3px;
    border-radius: 10px;
    border: 1px solid var(--border);
    position: relative;
  }

  .theme-btn{
    padding: 5px 14px;
    border-radius: 7px;
    border: none;
    background: transparent;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .12s ease;
  }

  .theme-btn.active{
    background: var(--text);
    color: var(--bg);
  }

  .theme-btn:active{
    transform: scale(0.95);
  }

  .settings-card{
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
    margin-top: 4px;
    
  }

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

  .settings-title{
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
  }

  .settings-sub{
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
  }

  .scale-count-picker{
    position: relative;
    display: flex;
    gap: 4px;
    background: var(--surface-2);
    padding: 3px;
    border-radius: 10px;
    border: 1px solid var(--border);
  }

  .scale-count-slider{
    position: absolute;
    top: 3px;
    left: 3px;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: var(--text);
    transition: transform .34s cubic-bezier(.32,.72,0,1);
    pointer-events: none;
    z-index: 1;
  }

  .scale-count-btn{
    position: relative;
    z-index: 2;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    border: none;
    background: transparent;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: color .25s ease;
  }

  .scale-count-btn.active{
    color: var(--bg);
  }

  .settings-divider{
    height: 1px;
    background: var(--border-soft);
    margin: 16px 0;
  }

  .scale-labels-wrapper{
    overflow: hidden;
    transition: height .32s cubic-bezier(.25,1,.5,1);
    will-change: height;
  }

  .scale-labels-list{
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .scale-label-row{
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .scale-level-badge{
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
  }

  .scale-label-input{
    flex: 1;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px;
    color: var(--text);
    font-size: 14px;
    outline: none;
    transition: border-color .15s ease;
  }

  .scale-label-input:focus{
    border-color: var(--text);
  }

  /* ---------- RECORD LIST SEE MORE ---------- */
  .see-more-container{
    display: flex;
    justify-content: center;
    padding: 14px 0 24px;
  }

  .see-more-btn{
    padding: 11px 24px;
    border-radius: 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s ease;
  }

  .see-more-btn:active{
    transform: scale(0.97);
    background: var(--border);
  }

  /* ---------- TRENDS LEVEL BREAKDOWN ---------- */
  .breakdown-card{
    margin-top: 14px;
    margin-bottom: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 16px;
  }

  .breakdown-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
  }

  .breakdown-toggle{
    display: flex;
    gap: 4px;
    background: var(--surface-2);
    padding: 3px;
    border-radius: 10px;
    border: 1px solid var(--border);
    position: relative;
  }

  .breakdown-toggle .theme-btn{
    padding: 5px 14px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
  }

  .breakdown-list{
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .breakdown-row{
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .breakdown-row-top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13.5px;
  }

  .breakdown-level-info{
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
  }

  .breakdown-level-badge{
    width: 22px;
    height: 22px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11.5px;
    font-weight: 700;
    flex-shrink: 0;
  }

  .breakdown-counts{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
  }

  .breakdown-primary-count{
    display: inline-flex;
    align-items: center;
    color: var(--text);
    font-size: 13.5px;
  }

  .breakdown-days{
    font-weight: 600;
    color: var(--text);
  }

  .breakdown-pct{
    font-weight: 400;
    color: var(--muted);
    font-size: 13px;
  }

  .breakdown-none{
    font-weight: 500;
    color: var(--muted);
    font-size: 13px;
  }

  .breakdown-secondary-count{
    color: var(--muted);
    font-size: 11.5px;
  }

  .breakdown-bar-track{
    width: 100%;
    height: 6px;
    background: var(--surface-2);
    border-radius: 999px;
    overflow: hidden;
  }

  .breakdown-bar-fill{
    height: 100%;
    border-radius: 999px;
    transition: width .3s cubic-bezier(.25,1,.5,1);
  }

  .breakdown-footer{
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border-soft);
    font-size: 12px;
    color: var(--muted);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  .breakdown-empty{
    font-size: 13px;
    color: var(--muted);
    text-align: center;
    padding: 12px 0;
  }