/* ─── RESET ─────────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { height: 100%; overflow-x: hidden; }
    body { font-family: 'DM Sans', system-ui, sans-serif; background: var(--bg); color: var(--text-1); font-size: 15px; }

    /* ─── TOKENS ─────────────────────────────────────────────────── */
    :root {
      --bg:         #FDF8F5;
      --bg2:        #F8F2EE;

      --pink:       #F4A0C0;
      --pink-soft:  #FDE8F2;
      --pink-mid:   #F7C4D8;

      --lavender:   #C4A8E8;
      --lav-soft:   #EEE8FC;
      --lav-mid:    #D8CCF4;

      --mint:       #8ECBA8;
      --mint-soft:  #E4F7EE;
      --mint-mid:   #B8E4CC;

      --peach:      #F8B48A;
      --peach-soft: #FEF0E8;
      --peach-mid:  #FDD4B8;

      --sky:        #A0C4F4;
      --sky-soft:   #E8F4FE;

      --text-1:  #2D1F3D;
      --text-2:  #8B6FA8;
      --text-3:  #C4B0D8;

      --card:         rgba(255,255,255,0.80);
      --card-border:  rgba(255,220,235,0.55);
      --card-shadow:  0 6px 28px rgba(200,140,180,0.13);

      /* Surface tokens — override per theme/dark mode */
      --s0: rgba(255,255,255,0.45);
      --s1: rgba(255,255,255,0.62);
      --s2: rgba(255,255,255,0.76);
      --s-hover: rgba(255,255,255,0.92);

      --radius:    18px;
      --radius-sm: 12px;

      /* Semantic tokens — override per theme variant */
      --danger:       #E06080;
      --danger-soft:  #FDE8EF;
      --input-bg:     rgba(255,255,255,0.80);
      --input-border: rgba(196,168,232,0.35);
      --popup-bg:     rgba(255,252,255,0.98);
      --sidebar-bg:   rgba(253,245,248,0.94);
    }

    /* ─── WATERCOLOUR BACKGROUND ─────────────────────────────────── */
    .wc-bg {
      position: fixed; inset: 0; z-index: 0; background: var(--bg);
      overflow: hidden; pointer-events: none;
    }
    .wc-bloom {
      position: absolute; border-radius: 50%;
      filter: blur(70px);
      animation: wc-drift 20s ease-in-out infinite alternate;
    }
    .bloom-tl { width:500px;height:420px; background:radial-gradient(circle, #FDE8F2 0%, transparent 70%); top:-120px;left:-120px; animation-delay:0s; }
    .bloom-tr { width:460px;height:380px; background:radial-gradient(circle, #EEE8FC 0%, transparent 70%); top:-80px;right:-100px; animation-delay:-7s; }
    .bloom-bl { width:420px;height:360px; background:radial-gradient(circle, #FEF0E8 0%, transparent 70%); bottom:-80px;left:10%; animation-delay:-14s; }
    .bloom-br { width:480px;height:400px; background:radial-gradient(circle, #E4F7EE 0%, transparent 70%); bottom:-100px;right:-80px; animation-delay:-4s; }
    @keyframes wc-drift {
      0%   { transform: scale(1) translate(0,0); }
      50%  { transform: scale(1.1) translate(30px,20px); }
      100% { transform: scale(0.95) translate(-15px,35px); }
    }

    /* ─── PETAL CANVAS ───────────────────────────────────────────── */
    #petal-canvas { position:fixed; inset:0; z-index:1; pointer-events:none; }

    /* ─── TOAST ──────────────────────────────────────────────────── */
    .toast {
      position: fixed; bottom: 28px; right: 28px; z-index: 600;
      background: rgba(255,255,255,0.96);
      border: 1px solid var(--pink-mid);
      border-radius: 999px;
      padding: 11px 22px;
      font-family: 'DM Sans', sans-serif;
      font-size: 13px; color: var(--text-1);
      box-shadow: 0 6px 24px rgba(244,160,192,0.28);
      transform: translateY(16px); opacity: 0;
      transition: all .3s cubic-bezier(.34,1.56,.64,1);
      white-space: nowrap;
    }
    .toast.show { transform: translateY(0); opacity: 1; }

    /* ─── AUTH SCREEN ────────────────────────────────────────────── */
    #auth-screen {
      position: fixed; inset: 0; z-index: 100;
      display: flex; align-items: center; justify-content: center;
    }
    .auth-flowers {
      position: absolute; inset: 0; pointer-events: none;
      overflow: hidden;
    }
    .auth-flower {
      position: absolute; font-size: 26px;
      animation: sway 4s ease-in-out infinite;
      opacity: 0.55;
    }
    .af1 { top:12%; left:8%;  animation-delay:0s;   font-size:22px; }
    .af2 { top:8%;  right:9%; animation-delay:-1.5s; font-size:28px; }
    .af3 { bottom:14%; left:6%;  animation-delay:-2.5s; font-size:20px; }
    .af4 { bottom:10%; right:8%; animation-delay:-0.8s; font-size:24px; }
    .af5 { top:35%; left:3%;  animation-delay:-3.5s; font-size:18px; }
    .af6 { top:40%; right:4%; animation-delay:-1s;   font-size:20px; }
    @keyframes sway {
      0%,100% { transform: rotate(-8deg) scale(1); }
      50%      { transform: rotate(8deg)  scale(1.12); }
    }
    .auth-card {
      position: relative; z-index: 2;
      background: rgba(255,255,255,0.88);
      border: 1.5px solid var(--pink-mid);
      backdrop-filter: blur(28px);
      border-radius: 28px;
      padding: 52px 48px 46px;
      width: 370px;
      box-shadow: 0 12px 48px rgba(244,160,192,0.25), 0 0 0 1px rgba(255,255,255,0.6);
      text-align: center;
      animation: fadeUp .5s cubic-bezier(.34,1.56,.64,1) both;
    }
    @keyframes fadeUp { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
    .auth-bloom-icon {
      font-size: 52px; display: block; margin: 0 auto 20px;
      animation: bloom-pulse 2.8s ease-in-out infinite;
    }
    @keyframes bloom-pulse {
      0%,100% { transform: scale(1) rotate(-3deg); filter: drop-shadow(0 0 0px rgba(244,160,192,0)); }
      50%      { transform: scale(1.15) rotate(3deg); filter: drop-shadow(0 0 14px rgba(244,160,192,0.7)); }
    }
    .auth-logo-text {
      font-family: 'Cormorant Garamond', serif;
      font-size: 13px; font-weight: 500; letter-spacing: .28em;
      text-transform: uppercase;
      background: linear-gradient(135deg, var(--pink), var(--lavender));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text;
      display: block; margin-bottom: 8px;
    }
    .auth-card h1 {
      font-family: 'Cormorant Garamond', serif;
      font-size: 36px; font-weight: 600; letter-spacing: -.5px;
      color: var(--text-1); margin-bottom: 8px; line-height: 1.1;
    }
    .auth-tagline {
      font-family: 'Dancing Script', cursive;
      font-size: 17px; color: var(--text-2);
      margin-bottom: 30px; line-height: 1.4;
    }
    .pw-wrap { position: relative; margin-bottom: 14px; }
    .pw-wrap input {
      width: 100%; padding: 14px 46px 14px 18px;
      background: rgba(255,240,248,0.6);
      border: 1.5px solid var(--pink-mid);
      border-radius: var(--radius-sm);
      color: var(--text-1); font-size: 14px;
      font-family: 'DM Sans', sans-serif;
      outline: none; transition: border-color .2s, box-shadow .2s;
    }
    .pw-wrap input:focus {
      border-color: var(--pink);
      box-shadow: 0 0 0 4px rgba(244,160,192,0.15);
    }
    .pw-wrap input::placeholder { color: var(--text-3); }
    .pw-toggle {
      position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
      background: none; border: none; cursor: pointer;
      font-size: 15px; opacity: 0.45; transition: opacity .2s;
    }
    .pw-toggle:hover { opacity: 1; }
    .unlock-btn {
      width: 100%; padding: 14px;
      background: linear-gradient(135deg, var(--pink) 0%, var(--lavender) 100%);
      border: none; border-radius: var(--radius-sm);
      color: #fff; font-size: 14px; font-weight: 600;
      font-family: 'DM Sans', sans-serif; cursor: pointer;
      letter-spacing: .04em;
      box-shadow: 0 4px 18px rgba(244,160,192,0.4);
      transition: opacity .2s, transform .15s, box-shadow .2s;
    }
    .unlock-btn:hover { opacity: .92; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(244,160,192,0.5); }
    .unlock-btn:active { transform: translateY(0); }
    .auth-error {
      margin-top: 14px; font-size: 13px; color: var(--danger);
      font-family: 'DM Sans', sans-serif; min-height: 18px;
    }

    /* ─── HUB ────────────────────────────────────────────────────── */
    #hub {
      /* overridden by new sidebar layout rule below */
    }
    .hidden { display: none !important; }

    /* ─── HEADER ─────────────────────────────────────────────────── */
    .hub-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 28px;
      background: rgba(255,255,255,0.78);
      border-bottom: 1px solid rgba(244,160,192,0.2);
      backdrop-filter: blur(24px);
      position: sticky; top: 0; z-index: 50;
      gap: 16px;
    }
    .header-brand { display: flex; align-items: center; gap: 10px; }
    .brand-mark {
      width: 36px; height: 36px; border-radius: 12px;
      background: linear-gradient(135deg, var(--pink), var(--lavender));
      display: flex; align-items: center; justify-content: center;
      font-size: 18px;
      box-shadow: 0 4px 14px rgba(244,160,192,0.4);
    }
    .brand-name {
      font-family: 'Cormorant Garamond', serif;
      font-size: 22px; font-weight: 600; letter-spacing: -.3px;
      background: linear-gradient(135deg, var(--pink), var(--lavender), var(--mint));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text; line-height: 1;
    }
    .brand-sub {
      font-size: 10px; color: var(--text-3); letter-spacing: .05em;
      text-transform: uppercase; margin-top: 1px;
    }
    .header-clock { text-align: center; }
    .clock-time {
      font-family: 'Cormorant Garamond', serif;
      font-size: 28px; font-weight: 300; color: var(--text-1);
      letter-spacing: -.5px; line-height: 1;
    }
    .clock-date { font-size: 11px; color: var(--text-2); margin-top: 2px; }
    .header-right { display: flex; align-items: center; gap: 12px; }
    .weather-pill {
      display: flex; align-items: center; gap: 8px;
      background: rgba(255,255,255,0.8);
      border: 1px solid var(--peach-mid);
      padding: 7px 14px; border-radius: 999px;
      font-size: 13px; color: var(--text-1);
      box-shadow: 0 2px 12px rgba(248,180,138,0.18);
    }
    .weather-pill .icon { font-size: 17px; }
    .weather-pill .temp { font-weight: 600; }
    .weather-pill .cond { color: var(--text-2); font-size: 12px; }
    .logout-btn {
      background: rgba(255,255,255,0.8); border: 1px solid var(--pink-mid);
      color: var(--text-2); width: 34px; height: 34px;
      border-radius: 10px; cursor: pointer; font-size: 14px;
      display: flex; align-items: center; justify-content: center;
      transition: all .2s;
    }
    .logout-btn:hover { color: var(--text-1); background: var(--pink-soft); border-color: var(--pink); }

    /* ─── MAIN GRID ──────────────────────────────────────────────── */
    .hub-main {
      display: grid;
      grid-template-columns: 300px 1fr;
      gap: 18px;
      padding: 18px 28px 0;
    }

    /* ─── GLASS CARD ─────────────────────────────────────────────── */
    .card {
      background: var(--card);
      border: 1px solid var(--card-border);
      border-radius: var(--radius);
      backdrop-filter: blur(18px);
      box-shadow: var(--card-shadow);
    }
    .card-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 17px 20px 13px;
      border-bottom: 1px solid rgba(244,160,192,0.15);
    }
    .card-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: 17px; font-weight: 600; color: var(--text-1);
    }

    /* Panel accent glows via box-shadow override */
    .card-peach  { box-shadow: var(--card-shadow), 0 0 40px rgba(248,180,138,0.18), inset 0 0 0 1px rgba(248,180,138,0.12); }
    .card-pink   { box-shadow: var(--card-shadow), 0 0 40px rgba(244,160,192,0.18), inset 0 0 0 1px rgba(244,160,192,0.12); }
    .card-mint   { box-shadow: var(--card-shadow), 0 0 40px rgba(142,203,168,0.18), inset 0 0 0 1px rgba(142,203,168,0.12); }
    .card-lav    { box-shadow: var(--card-shadow), 0 0 40px rgba(196,168,232,0.18), inset 0 0 0 1px rgba(196,168,232,0.12); }

    /* ─── SECTION TITLE (alias for card-title used outside card-header) */
    .section-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: 17px; font-weight: 600; color: var(--text-1);
      margin-bottom: 14px; padding: 17px 20px 0;
    }

    /* ─── PANEL LABEL — secondary label inside a card ────────────── */
    .panel-label {
      font-size: 11px; font-weight: 700; letter-spacing: .07em;
      text-transform: uppercase; color: var(--text-3);
      margin-bottom: 8px;
    }

    /* ─── CALENDAR ───────────────────────────────────────────────── */
    .calendar-card { display: flex; flex-direction: column; }
    .cal-nav {
      display: flex; align-items: center; gap: 12px;
      padding: 13px 16px 11px;
      border-bottom: 1px solid rgba(244,160,192,0.15);
    }
    .cal-nav h2 {
      flex: 1; text-align: center;
      font-family: 'Cormorant Garamond', serif;
      font-size: 17px; font-weight: 600; color: var(--text-1);
    }
    .nav-btn {
      background: var(--pink-soft); border: 1px solid var(--pink-mid);
      color: var(--text-2); width: 36px; height: 36px;
      border-radius: 999px; cursor: pointer; font-size: 16px;
      display: flex; align-items: center; justify-content: center;
      transition: all .2s; line-height: 1; gap: 2px;
    }
    .nav-btn:hover { color: var(--text-1); background: var(--pink-mid); transform: scale(1.08); }
    /* floral calendar arrows */
    #cal-prev, #cal-next { font-size: 20px; font-weight: 300; letter-spacing: 0; }
    #cal-prev { background: var(--pink-soft); border-color: var(--pink-mid); }
    #cal-next { background: var(--lav-soft); border-color: var(--lav-mid); }
    #cal-prev:hover { background: var(--pink-mid); transform: translateX(-2px); }
    #cal-next:hover { background: var(--lav-mid); transform: translateX(2px); }
    .cal-grid {
      display: grid; grid-template-columns: repeat(7,1fr);
      gap: 1px; padding: 6px 8px; flex: 1;
    }
    .cal-dow {
      text-align: center; font-size: 10px; font-weight: 600;
      letter-spacing: .08em; text-transform: uppercase;
      color: var(--text-3); padding: 6px 0;
      font-family: 'DM Sans', sans-serif;
    }
    .cal-day {
      position: relative;
      border-radius: 10px;
      display: flex; flex-direction: column;
      align-items: center; justify-content: flex-start;
      padding: 4px 3px 3px;
      cursor: pointer;
      transition: background .15s, transform .1s, box-shadow .15s;
      min-height: 68px; overflow: hidden;
    }
    .cal-day:hover {
      background: rgba(244,160,192,0.12);
      transform: scale(1.04);
      box-shadow: 0 4px 14px rgba(244,160,192,0.18);
    }
    .cal-day.other-month { opacity: 0.2; pointer-events: none; }
    .cal-day.today {
      background: rgba(244,160,192,0.15);
      border: 1.5px solid var(--pink-mid);
    }
    .cal-day.today .day-num { color: var(--pink); font-weight: 700; }
    .cal-day.perfect-day {
      background: rgba(248,180,138,0.12);
      border: 1px solid rgba(248,180,138,0.3);
    }
    .cal-day.perfect-day .day-num { color: var(--peach); font-weight: 600; }
    .cal-day.rainy-day {
      background: rgba(160,196,244,0.08);
    }
    .cal-day.selected {
      background: var(--lav-soft);
      border: 1.5px solid var(--lav-mid);
    }
    .day-num { font-size: 11px; font-weight: 500; color: var(--text-1); line-height: 1; z-index: 1; }
    .day-weather { font-size: 11px; margin-top: 2px; line-height: 1; }
    .day-temp { font-size: 8px; color: var(--text-3); margin-top: 1px; }
    .day-dots { display: flex; gap: 3px; margin-top: auto; padding-bottom: 2px; }
    .day-dot { width: 6px; height: 6px; border-radius: 50%; }
    .dot-task   { background: var(--mint); }
    .dot-dinner { background: var(--peach); }
    .dot-event  { background: var(--lavender); }
    .cal-legend {
      display: flex; gap: 14px; padding: 10px 16px 14px;
      border-top: 1px solid rgba(244,160,192,0.12);
      flex-wrap: wrap;
    }
    .legend-item { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--text-2); }
    .legend-swatch { width: 10px; height: 10px; border-radius: 3px; }

    /* ─── INLINE CALENDAR EVENTS ────────────────────────────────── */
    .day-header-row { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0 1px; }
    .day-ev {
      font-size: 10px; color: var(--lavender); font-weight: 600;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      width: 100%; padding: 2px 5px; line-height: 1.5; border-radius: 5px;
      background: rgba(196,168,232,0.28); margin-top: 2px;
      border-left: 2px solid rgba(196,168,232,0.6);
    }
    .day-ev-dinner { color: var(--peach); background: rgba(248,180,138,0.22); }
    .day-ev-task   { color: var(--mint);  background: rgba(142,203,168,0.22); }
    .day-ev-more   { font-size: 8px; color: var(--text-3); padding: 0 3px; }

    /* ─── DAY DETAIL INLINE (inside calendar card) ───────────────── */
    .day-detail-inline {
      border-top: 1px solid rgba(244,160,192,0.2);
      padding: 14px 16px 16px;
      background: rgba(255,255,255,0.35);
    }
    .day-detail-inline.hidden { display: none; }

    /* ─── RIGHT PANEL ────────────────────────────────────────────── */
    .right-panel { display: flex; flex-direction: column; gap: 16px; }

    /* ─── WEATHER WIDGET ─────────────────────────────────────────── */
    .weather-card { padding: 18px 20px 20px; }
    .weather-popover {
      position: absolute; bottom: calc(100% + 10px); left: 0; z-index: 400;
      width: 260px; background: var(--card);
      border: 1px solid var(--card-border); border-radius: 16px;
      box-shadow: 0 -6px 32px rgba(0,0,0,0.18);
      padding: 14px 16px 16px; backdrop-filter: blur(18px);
    }
    .weather-popover.hidden { display: none; }
    .wx-pop-today { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
    .wx-pop-icon { font-size: 38px; line-height: 1; }
    .wx-pop-temp { font-family: 'Cormorant Garamond', serif; font-size: 34px; font-weight: 300; color: var(--text-1); line-height: 1; }
    .wx-pop-temp sup { font-size: 16px; }
    .wx-pop-cond { font-size: 12px; color: var(--text-2); margin-top: 2px; }
    .wx-pop-stats { display: flex; gap: 10px; margin-bottom: 12px; font-size: 11px; color: var(--text-2); }
    .wx-pop-stat { display: flex; align-items: center; gap: 4px; }
    .wx-pop-fc { display: flex; gap: 4px; }
    .wx-pop-day { flex: 1; text-align: center; background: var(--s0); border: 1px solid rgba(244,160,192,0.15); border-radius: 9px; padding: 6px 3px; }
    .wx-pop-day.perfect { border-color: rgba(248,180,138,0.4); background: rgba(248,180,138,0.08); }
    .wx-pop-dow { font-size: 8px; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; }
    .wx-pop-wicon { font-size: 14px; margin: 3px 0; }
    .wx-pop-hi { font-size: 11px; font-weight: 600; color: var(--text-1); }
    .wx-pop-lo { font-size: 9px; color: var(--text-3); }
    .wx-live-badge { display:inline-block; font-size:9px; background:var(--mint-soft); color:var(--mint); border:1px solid var(--mint-mid); border-radius:999px; padding:1px 6px; margin-left:6px; vertical-align:middle; }
    .weather-today { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
    .weather-icon-big { font-size: 52px; line-height: 1; }
    .weather-main-temp {
      font-family: 'Cormorant Garamond', serif;
      font-size: 42px; font-weight: 300; color: var(--text-1);
      line-height: 1; letter-spacing: -1px;
    }
    .weather-main-temp sup { font-size: 22px; }
    .weather-main-cond { font-size: 13px; color: var(--text-2); margin-top: 3px; }
    .weather-main-loc  { font-size: 11px; color: var(--text-3); }
    .weather-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 14px; }
    .wstat {
      background: var(--s1); border: 1px solid rgba(244,160,192,0.2);
      border-radius: 10px; padding: 10px 8px; text-align: center;
    }
    .wstat-icon { font-size: 15px; }
    .wstat-val  {
      font-family: 'Cormorant Garamond', serif;
      font-size: 16px; font-weight: 600; color: var(--text-1);
    }
    .wstat-lbl  { font-size: 9px; color: var(--text-3); margin-top: 1px; text-transform: uppercase; letter-spacing: .05em; }
    .weather-forecast { display: flex; gap: 6px; }
    .fc-day {
      flex: 1; background: var(--s0);
      border: 1px solid rgba(244,160,192,0.15);
      border-radius: 10px; padding: 8px 4px; text-align: center;
      transition: all .2s;
    }
    .fc-day:hover { background: var(--s-hover); }
    .fc-day.fc-perfect {
      border-color: rgba(248,180,138,0.4);
      background: rgba(248,180,138,0.08);
    }
    .fc-name { font-size: 9px; color: var(--text-3); text-transform: uppercase; letter-spacing: .07em; }
    .fc-icon { font-size: 15px; margin: 4px 0; }
    .fc-hi   { font-family:'Cormorant Garamond',serif; font-size: 14px; font-weight: 600; color: var(--text-1); }
    .fc-lo   { font-size: 10px; color: var(--text-3); }

    /* ─── SUGGESTIONS ────────────────────────────────────────────── */
    .suggestions-card { padding: 18px 20px 20px; }
    .suggestion-item {
      display: flex; gap: 12px; align-items: flex-start;
      padding: 12px; border-radius: 12px;
      background: var(--s1);
      border: 1px solid rgba(244,160,192,0.2);
      margin-bottom: 8px; cursor: pointer;
      transition: all .2s;
    }
    .suggestion-item:hover {
      background: var(--s-hover);
      border-color: var(--pink-mid);
      box-shadow: 0 4px 16px rgba(244,160,192,0.18);
      transform: translateY(-1px);
    }
    .suggestion-item:last-child { margin-bottom: 0; }
    .sug-icon { font-size: 22px; flex-shrink: 0; }
    .sug-text { flex: 1; }
    .sug-title { font-size: 13px; font-weight: 500; color: var(--text-1); margin-bottom: 2px; }
    .sug-desc  { font-size: 11px; color: var(--text-2); line-height: 1.4; }
    .sug-action {
      font-size: 10px; font-weight: 600; letter-spacing: .05em;
      text-transform: uppercase; color: var(--pink);
      margin-top: 5px; display: inline-block;
    }

    /* ─── DAY DETAIL ─────────────────────────────────────────────── */
    .day-detail-card { padding: 18px 20px 20px; }
    .day-detail-date {
      font-family: 'Cormorant Garamond', serif;
      font-size: 20px; font-weight: 600; color: var(--text-1);
    }
    .day-detail-weather {
      display: flex; align-items: center; gap: 8px;
      margin: 6px 0 14px;
    }
    .day-detail-weather .icon  { font-size: 20px; }
    .day-detail-weather .info  { font-size: 12px; color: var(--text-2); }
    .add-event-form {
      display: flex; gap: 8px; margin-bottom: 12px;
      flex-wrap: wrap; align-items: stretch;
    }
    .add-event-form input {
      flex: 1; min-width: 0;
      background: rgba(255,240,248,0.6);
      border: 1px solid var(--pink-mid);
      border-radius: 9px; padding: 9px 12px;
      color: var(--text-1); font-size: 13px;
      font-family: 'DM Sans', sans-serif; outline: none;
      transition: border-color .2s, box-shadow .2s;
    }
    .add-event-form input:focus { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(244,160,192,0.15); }
    .add-event-form input::placeholder { color: var(--text-3); }
    /* Recurrence select lives inside add-event-form — match input height */
    .add-event-form .rrule-select {
      flex-shrink: 0; height: auto; align-self: stretch;
      padding: 0 8px; font-size: 11px; max-width: 78px;
    }
    /* On narrow right panels, push select+button to their own row */
    @media (max-width: 400px) {
      .add-event-form input       { flex-basis: 100%; }
      .add-event-form .rrule-select { flex: 1; max-width: none; }
    }
    .icon-btn {
      background: var(--pink-soft); border: 1px solid var(--pink-mid);
      border-radius: 9px; padding: 0 14px; flex-shrink: 0;
      color: var(--pink); cursor: pointer; font-size: 20px;
      transition: all .2s; font-family: inherit; align-self: stretch;
    }
    .icon-btn:hover { background: var(--pink-mid); }
    .event-list { display: flex; flex-direction: column; gap: 6px; }
    .event-chip {
      display: flex; align-items: center; gap: 8px;
      padding: 8px 10px; border-radius: 9px;
      background: var(--s1); border-left: 3px solid var(--lavender);
      border-top: 1px solid var(--card-border); border-right: 1px solid var(--card-border); border-bottom: 1px solid var(--card-border);
      font-size: 12px; color: var(--text-1); margin-bottom: 4px;
    }
    .event-chip-icon { font-size: 15px; flex-shrink: 0; }
    .event-chip .del {
      margin-left: auto; cursor: pointer; opacity: 0.35;
      font-size: 13px; transition: opacity .2s;
    }
    .event-chip .del:hover { opacity: 0.9; }

    /* ─── BOTTOM PANELS ──────────────────────────────────────────── */
    .bottom-panels {
      display: flex;
      gap: 16px;
      padding: 18px 28px 0;
      align-items: flex-start;
    }
    .panel-card {
      flex: 1; min-width: 0;
      transition: flex .35s cubic-bezier(.4,0,.2,1);
    }
    .panel-card.collapsed {
      flex: 0 0 auto; min-width: 130px; max-width: 160px;
    }
    .panel-card.collapsed .panel-body,
    .panel-card.collapsed .panel-footer,
    .panel-card.collapsed .shop-quick-bar { display: none; }
    .panel-card.expanded { flex: 2.2; }
    .panel-toggle-btn {
      background: none; border: none; cursor: pointer;
      font-size: 11px; color: var(--text-3); padding: 2px 5px;
      border-radius: 5px; transition: color .15s, transform .25s;
      flex-shrink: 0;
    }
    .panel-toggle-btn:hover { color: var(--text-2); }
    .panel-card.collapsed .panel-toggle-btn { transform: rotate(180deg); }
    .panel-card.auto-expanded { outline: 2px solid rgba(196,168,232,0.4); }
    /* ─── FAMILY NOTES ───────────────────────────────────────────── */
    .card-sky { box-shadow: var(--card-shadow), 0 0 40px rgba(160,196,244,0.18), inset 0 0 0 1px rgba(160,196,244,0.12); }
    .note-chip {
      display: flex; align-items: flex-start; gap: 8px;
      padding: 9px 10px; border-radius: 10px;
      margin-bottom: 6px;
      border: 1px solid rgba(196,168,232,0.25);
      font-size: 13px; color: var(--text-1);
      transition: all .2s;
    }
    .note-chip:last-child { margin-bottom: 0; }
    .note-emoji { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
    .note-text  { flex: 1; line-height: 1.45; word-break: break-word; }
    .note-del   { font-size: 13px; opacity: 0; cursor: pointer; transition: opacity .15s; color: var(--text-3); flex-shrink: 0; }
    .note-chip:hover { background: rgba(196,168,232,0.08); }
    .note-chip:hover .note-del { opacity: .5; }
    .note-del:hover { opacity: 1 !important; color: var(--danger); }
    .note-emoji-btn {
      width: 34px; height: 34px; border-radius: 50%;
      border: 1.5px solid var(--card-border); background: var(--s1);
      font-size: 17px; cursor: pointer; display: flex; align-items: center;
      justify-content: center; transition: all .15s; flex-shrink: 0;
    }
    .note-emoji-btn:hover { background: var(--s-hover); transform: scale(1.08); }
    .note-emoji-popover {
      position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 50;
      background: var(--card); border: 1px solid var(--card-border);
      border-radius: 14px; padding: 10px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.16); backdrop-filter: blur(16px);
      width: 188px;
    }
    .note-emoji-popover.hidden { display: none; }
    .note-colors { display: flex; flex-wrap: wrap; gap: 5px; }
    .note-color-btn {
      width: 26px; height: 26px; border-radius: 50%;
      border: 2px solid transparent; cursor: pointer;
      transition: transform .15s, border-color .15s;
      font-size: 15px; display: flex; align-items: center; justify-content: center;
      background: var(--s0);
    }
    .note-color-btn:hover { transform: scale(1.15); background: var(--s1); }
    .note-color-btn.active { border-color: var(--text-2); transform: scale(1.2); background: var(--s2); }
    .note-add-row { display: flex; gap: 8px; }
    .note-add-row input {
      flex: 1; background: rgba(255,255,255,0.6);
      border: 1px solid rgba(160,196,244,0.4);
      border-radius: 9px; padding: 9px 12px;
      color: var(--text-1); font-size: 13px;
      font-family: 'DM Sans', sans-serif; outline: none;
      transition: border-color .2s;
    }
    .note-add-row input:focus { border-color: var(--sky); box-shadow: 0 0 0 3px rgba(160,196,244,0.15); }
    .note-add-row input::placeholder { color: var(--text-3); }
    .note-add-btn {
      background: linear-gradient(135deg, var(--sky), var(--lavender));
      border: none; border-radius: 9px;
      width: 36px; height: 36px; flex-shrink: 0;
      color: #fff; font-size: 20px; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 3px 12px rgba(160,196,244,0.35);
      transition: opacity .2s, transform .15s;
    }
    .note-add-btn:hover { opacity: .9; transform: translateY(-1px); }
    .panel-card { display: flex; flex-direction: column; }
    .panel-body { padding: 12px 18px; flex: 1; max-height: 220px; overflow-y: auto; }
    .panel-footer { padding: 10px 18px 16px; border-top: 1px solid rgba(244,160,192,0.12); }
    .add-row { display: flex; gap: 8px; }
    .add-row input {
      flex: 1; background: rgba(255,255,255,0.6);
      border: 1px solid var(--card-border);
      border-radius: 9px; padding: 9px 12px;
      color: var(--text-1); font-size: 13px;
      font-family: 'DM Sans', sans-serif; outline: none;
      transition: border-color .2s, box-shadow .2s;
    }
    .add-row input:focus { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(244,160,192,0.12); }
    .add-row input::placeholder { color: var(--text-3); }
    .add-btn {
      background: linear-gradient(135deg, var(--pink), var(--lavender));
      border: none; border-radius: 9px;
      width: 36px; height: 36px; flex-shrink: 0;
      color: #fff; font-size: 20px; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 3px 12px rgba(244,160,192,0.35);
      transition: opacity .2s, transform .15s;
    }
    .add-btn:hover { opacity: .9; transform: translateY(-1px); }

    /* ─── TASK PILLS ─────────────────────────────────────────────── */
    .tasks-pill-wrap { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 4px; align-items: flex-start; }
    .task-pill {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 5px 9px 5px 7px;
      background: var(--s1); border: 1.5px solid var(--card-border);
      border-radius: 99px; cursor: pointer; max-width: 100%;
      font-size: 12px; color: var(--text-1);
      transition: background .15s, border-color .15s;
    }
    .task-pill:hover { background: var(--s-hover); border-color: var(--pink-mid); }
    .task-pill.done { opacity: 0.42; }
    .task-pill.done .task-pill-label { text-decoration: line-through; color: var(--text-3); }
    .task-cb {
      width: 14px; height: 14px; border-radius: 4px;
      border: 1.5px solid var(--pink-mid); flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      transition: all .15s; font-size: 9px;
    }
    .task-pill.done .task-cb { background: var(--mint); border-color: var(--mint); color: #fff; }
    .task-pill-icon { font-size: 13px; flex-shrink: 0; }
    .task-pill-label { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
    .task-pill .task-del { font-size: 11px; opacity: 0; cursor: pointer; transition: opacity .15s; color: var(--text-3); flex-shrink: 0; line-height: 1; }
    .task-pill:hover .task-del { opacity: .45; }
    .task-pill .task-del:hover { opacity: 1 !important; color: var(--danger); }
    .task-tag {
      font-size: 9px; padding: 2px 7px; border-radius: 999px;
      font-weight: 500; letter-spacing: .04em;
    }
    .task-pill .task-who {
      font-size: 11px; width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
      background: transparent; border: 1px dashed var(--lav-mid);
      color: var(--text-2); cursor: pointer; transition: all .15s;
      display: flex; align-items: center; justify-content: center;
      padding: 0; font-family: inherit;
    }
    .task-pill .task-who.assigned { border-style: solid; border-color: var(--lavender); background: var(--lav-soft); }
    .task-pill:hover .task-who { border-color: var(--lavender); }
    .task-pill .task-cal-btn { font-size: 11px; opacity: 0; cursor: pointer; transition: opacity .15s;
      background: none; border: none; padding: 0; color: var(--text-3); flex-shrink: 0; line-height: 1; }
    .task-pill:hover .task-cal-btn { opacity: .4; }
    .task-pill .task-cal-btn:hover { opacity: 1 !important; color: var(--lavender); }
    .task-sort-bar { display: flex; gap: 5px; align-items: center; padding: 0 0 8px; }
    .task-sort-btn { font-size: 10px; padding: 2px 9px; border-radius: 99px; border: 1px solid var(--card-border);
      background: var(--s0); color: var(--text-3); cursor: pointer; transition: all .15s; font-family: inherit; }
    .task-sort-btn.active { background: var(--lav-soft); color: var(--text-2); border-color: var(--lavender); font-weight: 600; }
    .task-group-pill-header { flex-basis: 100%; font-size: 9px; font-weight: 700; letter-spacing: .07em;
      text-transform: uppercase; color: var(--text-3); padding: 8px 2px 3px; }
    .task-done-sep { flex-basis: 100%; font-size: 10px; color: var(--text-3);
      padding: 10px 2px 4px; border-top: 1px solid var(--card-border); margin-top: 2px; }

    /* New task pop-in */
    @keyframes task-appear {
      from { opacity: 0; transform: scale(0.78); }
      to   { opacity: 1; transform: scale(1); }
    }
    .task-pill.is-new { animation: task-appear .22s cubic-bezier(.34,1.5,.64,1); }
    /* chat-style notes */
    .note-bubble {
      display: flex; flex-direction: column;
      padding: 8px 11px; border-radius: 14px;
      margin-bottom: 8px; max-width: 88%; font-size: 13px;
      line-height: 1.45; word-break: break-word;
      background: var(--lav-soft); border: 1px solid var(--card-border);
      position: relative;
    }
    .note-bubble.mine {
      align-self: flex-end; background: var(--pink-soft); border-color: var(--pink-mid);
      border-bottom-right-radius: 4px;
    }
    .note-bubble.other { border-bottom-left-radius: 4px; }
    .note-sender {
      font-size: 9px; font-weight: 700; letter-spacing: .05em;
      text-transform: uppercase; color: var(--text-3); margin-bottom: 3px;
    }
    .note-body-text { color: var(--text-1); }
    .note-meta { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
    .note-emoji-tag { font-size: 12px; }
    .note-del-btn {
      font-size: 11px; color: var(--text-3); cursor: pointer; opacity: 0;
      transition: opacity .15s; background: none; border: none; padding: 0; margin-left: auto;
    }
    .note-bubble:hover .note-del-btn { opacity: .6; }
    .note-del-btn:hover { opacity: 1 !important; color: var(--danger); }
    .notes-stream { display: flex; flex-direction: column; gap: 2px; }
    .tag-outdoor { background: var(--peach-soft); color: var(--peach); border: 1px solid var(--peach-mid); }
    .tag-smart   { background: var(--lav-soft);   color: var(--lavender); border: 1px solid var(--lav-mid); }

    /* ─── DINNER SUGGESTIONS ────────────────────────────────────── */
    .dsug-scroll { display:flex; gap:10px; overflow-x:auto; padding-bottom:8px; scrollbar-width:thin; }
    .dsug-scroll::-webkit-scrollbar { height:4px; }
    .dsug-scroll::-webkit-scrollbar-track { background:transparent; }
    .dsug-scroll::-webkit-scrollbar-thumb { background:var(--card-border); border-radius:99px; }
    .dsug-card {
      flex:0 0 154px; background:var(--s1);
      border:1.5px solid var(--card-border); border-radius:14px;
      padding:12px 11px; cursor:pointer; transition:all .2s;
      display:flex; flex-direction:column; gap:5px;
    }
    .dsug-card:hover { background:var(--s-hover); transform:translateY(-2px); box-shadow:0 6px 20px rgba(196,168,232,0.25); }
    .dsug-card:focus-visible { outline:2px solid var(--lavender); outline-offset:2px; }
    .dsug-emoji { font-size:28px; line-height:1; }
    .dsug-name { font-size:13px; font-weight:700; color:var(--text-1); line-height:1.3; }
    .dsug-meta { font-size:11px; color:var(--text-2); display:flex; gap:5px; flex-wrap:wrap; align-items:center; margin-top:2px; }
    .dsug-badge { background:var(--lav-soft); border:1px solid var(--lav-mid); border-radius:99px; padding:1px 6px; font-size:9px; font-weight:600; color:var(--lavender); }
    .dsug-badge.quick { background:var(--mint-soft); border-color:var(--mint-mid); color:var(--mint); }
    .dsug-badge.cozy  { background:var(--peach-soft); border-color:var(--peach-mid); color:var(--peach); }
    .dsug-badge.summer{ background:rgba(255,230,100,0.3); border-color:rgba(220,180,0,0.3); color:#A07000; }
    .dsug-assign-hint { margin-top:auto; font-size:10px; color:var(--lavender); font-weight:600; padding-top:6px; }
    /* Dinner-sug modal */
    .dsug-modal-overlay {
      position:fixed; inset:0; z-index:620;
      background:rgba(20,12,36,0.65); backdrop-filter:blur(5px);
      display:flex; align-items:center; justify-content:center; padding:20px;
    }
    .dsug-modal-overlay.hidden { display:none; }
    .dsug-modal-box {
      background:var(--card); border:1px solid var(--card-border);
      border-radius:20px; padding:22px 24px; max-width:420px; width:100%;
      max-height:92vh; overflow-y:auto;
      box-shadow:0 20px 60px rgba(0,0,0,0.28);
    }
    .dsug-modal-head { display:flex; align-items:flex-start; gap:14px; margin-bottom:4px; }
    .dsug-modal-icon { font-size:44px; line-height:1; flex-shrink:0; }
    .dsug-modal-title { font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:600; color:var(--text-1); line-height:1.2; }
    .dsug-modal-sub { font-size:12px; color:var(--text-2); margin-top:3px; display:flex; gap:8px; flex-wrap:wrap; }
    .dsug-section-lbl { font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); margin:14px 0 7px; }
    .dsug-ingr-list { display:flex; flex-direction:column; gap:5px; }
    .dsug-ingr-item { display:flex; align-items:center; gap:9px; font-size:13px; color:var(--text-1); }
    .dsug-ingr-item input[type=checkbox] { width:16px; height:16px; accent-color:var(--lavender); cursor:pointer; flex-shrink:0; }
    .dsug-ingr-cat { font-size:11px; color:var(--text-3); margin-left:auto; }
    .dsug-day-chips { display:flex; gap:6px; flex-wrap:wrap; }
    .dsug-day-chip {
      font-size:11px; font-weight:600; border:1.5px solid var(--card-border);
      background:var(--s0); border-radius:9px; padding:6px 8px;
      cursor:pointer; color:var(--text-2); transition:all .15s;
      display:flex; flex-direction:column; align-items:center; gap:1px; min-width:44px;
    }
    .dsug-day-chip:hover:not(.taken) { border-color:var(--lavender); color:var(--lavender); background:rgba(196,168,232,0.08); }
    .dsug-day-chip.taken { opacity:.4; cursor:not-allowed; }
    .dsug-day-chip.selected { background:var(--lavender); color:#fff; border-color:var(--lavender); }
    .dsug-day-chip.today { border-color:var(--pink); }
    .dsug-day-chip.selected.today { background:var(--pink); border-color:var(--pink); }
    .dsug-chip-dow { font-size:8px; text-transform:uppercase; letter-spacing:.06em; opacity:.8; }
    .dsug-chip-date { font-size:14px; font-weight:700; }
    .dsug-select-all-row { margin-top:8px; display:flex; align-items:center; gap:7px; font-size:12px; color:var(--text-2); cursor:pointer; }
    .dsug-actions { display:flex; gap:8px; margin-top:18px; flex-wrap:wrap; }
    /* dark mode overrides for dsug */
    @media (prefers-color-scheme: dark) {
      html:not([data-hub-theme="minecraft"]):not([data-hub-theme="lego"]) .dsug-modal-box { background:rgba(26,16,42,0.99) !important; }
    }
    /* ─── SHOPPING LIST ──────────────────────────────────────────── */
    /* ─── SHOPPING CHIPS ─────────────────────────────────────────── */
    #shop-body { max-height: none !important; overflow: visible !important; padding: 10px 20px 10px; }
    .shop-chip {
      display: inline-flex; align-items: center; gap: 4px;
      border-radius: 99px; padding: 4px 9px 4px 4px;
      border: 1.5px solid var(--cbo, rgba(196,168,232,0.35));
      background: var(--cb, rgba(196,168,232,0.10));
      font-size: 13px; color: var(--text-1);
      transition: all .15s; white-space: nowrap; user-select: none;
    }
    .shop-chip:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); filter: brightness(1.04); }
    .shop-chip.got { opacity: 0.45; }
    .shop-chip.got .shop-chip-label { text-decoration: line-through; color: var(--text-3); }
    .shop-chip[data-cat="produce"] { --cb: rgba(142,203,168,0.14); --cbo: rgba(142,203,168,0.50); --cc: var(--mint); }
    .shop-chip[data-cat="dairy"]   { --cb: rgba(91,164,223,0.10);  --cbo: rgba(91,164,223,0.38);  --cc: #5BA4DF; }
    .shop-chip[data-cat="meat"]    { --cb: rgba(248,180,138,0.12); --cbo: rgba(248,180,138,0.45); --cc: var(--peach); }
    .shop-chip[data-cat="pantry"]  { --cb: rgba(196,168,232,0.12); --cbo: rgba(196,168,232,0.40); --cc: var(--lavender); }
    .shop-chip[data-cat="household"]{ --cb: rgba(160,160,160,0.08);--cbo: rgba(160,160,160,0.28); --cc: #888; }
    .shop-chip[data-cat="other"]   { --cb: rgba(160,160,160,0.06); --cbo: rgba(160,160,160,0.22); --cc: #888; }
    .shop-chip-cb {
      width: 18px; height: 18px; border-radius: 50%;
      border: 1.5px solid var(--cbo, rgba(196,168,232,0.35));
      background: transparent; display: flex; align-items: center;
      justify-content: center; cursor: pointer; font-size: 10px;
      color: transparent; transition: all .15s; flex-shrink: 0; padding: 0;
      font-family: inherit;
    }
    .shop-chip.got .shop-chip-cb { background: var(--cc, var(--mint)); border-color: var(--cc, var(--mint)); color: #fff; }
    .shop-chip-label { cursor: default; font-size: 13px; line-height: 1.2; font-family: 'DM Sans', sans-serif; }
    .shop-chip-del {
      width: 14px; height: 14px; border-radius: 50%; border: none;
      background: rgba(0,0,0,0.07); color: var(--text-3);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; font-size: 9px; opacity: 0; transition: opacity .15s;
      padding: 0; flex-shrink: 0; line-height: 1; font-family: inherit;
    }
    .shop-chip:hover .shop-chip-del { opacity: 1; }
    .shop-chip-del:hover { background: var(--danger-soft); color: var(--danger); }
    .shop-chips-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 2px; }
    .shop-cat-pill {
      display: flex; align-items: center; gap: 5px;
      font-size: 12px; font-weight: 700; letter-spacing: .06em;
      text-transform: uppercase; color: var(--text-2);
      margin: 14px 0 7px;
    }
    .shop-cat-pill.first { margin-top: 2px; }
    .shop-cat-count {
      background: rgba(0,0,0,0.06); border-radius: 99px;
      padding: 1px 6px; font-size: 9px; color: var(--text-3); font-weight: 600;
    }
    .shop-chip-qty {
      font-size: 10px; font-weight: 700; color: var(--cc, var(--lavender));
      background: rgba(0,0,0,0.06); border-radius: 99px;
      padding: 1px 5px; cursor: pointer; transition: background .15s; flex-shrink: 0;
      font-family: inherit; border: none; line-height: 1.4;
    }
    .shop-chip-qty:hover { background: rgba(0,0,0,0.14); }
    .shop-chip-add {
      width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--cbo, rgba(196,168,232,0.4));
      background: transparent; color: var(--cc, var(--lavender));
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; font-size: 12px; font-weight: 700; opacity: 0; transition: opacity .15s;
      padding: 0; flex-shrink: 0; line-height: 1; font-family: inherit;
    }
    .shop-chip:hover .shop-chip-add { opacity: 1; }
    .shop-chip-add:hover { background: var(--cb, rgba(196,168,232,0.2)); }
    .shop-chip-src { font-size: 9px; opacity: 0.55; flex-shrink: 0; line-height: 1; }
    .shop-chip.from-meal { box-shadow: inset 3px 0 0 var(--cc, var(--lavender)); }
    /* swipe feedback */
    .shop-chip.swiping { transition: transform .06s linear !important; }
    .shop-collected-sep {
      display: flex; align-items: center; gap: 8px;
      font-size: 10px; color: var(--text-3); margin: 16px 0 8px; font-weight: 600; letter-spacing: .04em;
    }
    .shop-collected-sep::before, .shop-collected-sep::after {
      content: ''; flex: 1; height: 1px; background: var(--card-border);
    }

    /* ─── DINNER PLANNER ─────────────────────────────────────────── */
    .dinner-row {
      display: flex; align-items: center; gap: 10px;
      padding: 7px 6px; border-radius: 9px;
      transition: background .15s;
    }
    .dinner-row:hover { background: rgba(196,168,232,0.08); }
    .dinner-dow {
      font-size: 10px; font-weight: 600; color: var(--text-2);
      width: 28px; flex-shrink: 0; text-transform: uppercase;
      letter-spacing: .05em;
    }
    .dinner-meal {
      flex: 1; font-size: 13px; color: var(--text-1);
      border: none; background: transparent;
      outline: none; font-family: 'DM Sans', sans-serif;
      padding: 2px 6px; border-radius: 6px;
      transition: background .15s;
    }
    .dinner-meal:focus { background: rgba(196,168,232,0.1); }
    .dinner-meal::placeholder { color: var(--text-3); }
    .dinner-weather { font-size: 13px; flex-shrink: 0; }
    .dinner-suggestion {
      font-size: 13px; cursor: pointer; opacity: 0.5; transition: opacity .2s;
    }
    .dinner-suggestion:hover { opacity: 1; }

    /* ─── GEAR MODAL ─────────────────────────────────────────────── */
    .modal-overlay {
      position: fixed; inset: 0; z-index: 200;
      background: rgba(45,31,61,0.35);
      backdrop-filter: blur(8px);
      display: flex; align-items: center; justify-content: center;
      animation: fadeIn .2s ease;
    }
    @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
    .modal-box {
      background: rgba(255,252,255,0.97);
      border: 1.5px solid var(--pink-mid);
      border-radius: 22px; width: 420px; max-width: 90vw;
      box-shadow: 0 16px 56px rgba(200,140,180,0.28);
      animation: slideUp .25s cubic-bezier(.34,1.56,.64,1);
      max-height: 80vh; overflow-y: auto;
    }
    @keyframes slideUp { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
    .modal-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 20px 22px 16px;
      border-bottom: 1px solid rgba(244,160,192,0.2);
    }
    .modal-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: 20px; font-weight: 600; color: var(--text-1);
    }
    .modal-close {
      background: var(--pink-soft); border: 1px solid var(--pink-mid);
      color: var(--text-2); width: 30px; height: 30px;
      border-radius: 8px; cursor: pointer; font-size: 13px;
      display: flex; align-items: center; justify-content: center;
      transition: all .2s;
    }
    .modal-close:hover { color: var(--text-1); background: var(--pink-mid); }
    .modal-body { padding: 18px 22px; }
    .gear-list { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
    .gear-item {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 12px; border-radius: 10px;
      background: rgba(255,255,255,0.7);
      border: 1px solid rgba(244,160,192,0.2);
      cursor: pointer; transition: all .2s;
    }
    .gear-item:hover { background: var(--pink-soft); border-color: var(--pink-mid); }
    .gear-item.checked { background: var(--mint-soft); border-color: var(--mint-mid); }
    .gear-item .gear-cb {
      width: 17px; height: 17px; border-radius: 5px;
      border: 1.5px solid var(--pink-mid); flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 10px; transition: all .2s;
    }
    .gear-item.checked .gear-cb { background: var(--mint); border-color: var(--mint); color: #fff; }
    .gear-item span:last-child { font-size: 13px; color: var(--text-1); }
    .modal-actions { display: flex; gap: 10px; }
    .btn-primary {
      flex: 1; padding: 12px;
      background: linear-gradient(135deg, var(--pink), var(--lavender));
      border: none; border-radius: 10px;
      color: #fff; font-size: 13px; font-weight: 600;
      font-family: 'DM Sans', sans-serif; cursor: pointer;
      box-shadow: 0 4px 16px rgba(244,160,192,0.35);
      transition: opacity .2s, transform .15s;
    }
    .btn-primary:hover { opacity: .9; transform: translateY(-1px); }
    .btn-secondary {
      padding: 12px 18px;
      background: var(--s2); border: 1px solid var(--card-border);
      border-radius: 10px; color: var(--text-2);
      font-size: 13px; font-family: 'DM Sans', sans-serif;
      cursor: pointer; transition: all .2s;
    }
    .btn-secondary:hover { color: var(--text-1); background: var(--s-hover); }

    /* ─── ADMIN PANEL ───────────────────────────────────────────── */
    .admin-btn {
      background: rgba(255,255,255,0.8); border: 1px solid var(--lav-mid);
      color: var(--text-2); height: 34px; padding: 0 12px;
      border-radius: 10px; cursor: pointer; font-size: 13px;
      font-family: 'DM Sans', sans-serif; font-weight: 500;
      display: flex; align-items: center; gap: 6px;
      transition: all .2s;
    }
    .admin-btn:hover { color: var(--text-1); background: var(--lav-soft); border-color: var(--lavender); }

    /* Tabs inside admin modal */
    .admin-tabs { display: flex; gap: 6px; margin-bottom: 18px; }
    .admin-tab {
      flex: 1; padding: 9px; border-radius: 9px; cursor: pointer;
      font-size: 12px; font-weight: 600; text-align: center;
      border: 1.5px solid transparent;
      transition: all .2s; font-family: 'DM Sans', sans-serif;
      color: var(--text-2); background: var(--s0);
    }
    .admin-tab:hover { background: var(--s-hover); }
    .admin-tab.active {
      background: var(--lav-soft); border-color: var(--lav-mid); color: var(--text-1);
    }
    .admin-pane { display: none; }
    .admin-pane.active { display: block; }

    /* Member cards */
    .member-card {
      display: flex; align-items: center; gap: 12px;
      padding: 12px 14px; border-radius: 12px;
      background: rgba(255,255,255,0.65);
      border: 1px solid rgba(196,168,232,0.2);
      margin-bottom: 8px; transition: all .2s;
    }
    .member-card:last-child { margin-bottom: 0; }
    .member-avatar {
      width: 38px; height: 38px; border-radius: 50%;
      background: linear-gradient(135deg, var(--pink-soft), var(--lav-soft));
      border: 1.5px solid var(--lav-mid);
      display: flex; align-items: center; justify-content: center;
      font-size: 20px; flex-shrink: 0;
    }
    .member-info { flex: 1; }
    .member-name { font-size: 14px; font-weight: 500; color: var(--text-1); }
    .member-role {
      font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
      color: var(--text-3); margin-top: 1px;
    }
    .member-role.owner { color: var(--lavender); font-weight: 600; }
    .member-actions { display: flex; gap: 6px; }
    .member-action-btn {
      background: rgba(255,255,255,0.7); border: 1px solid var(--card-border);
      border-radius: 7px; padding: 5px 10px;
      font-size: 11px; font-weight: 500; color: var(--text-2);
      cursor: pointer; transition: all .2s; font-family: 'DM Sans', sans-serif;
    }
    .member-action-btn:hover { background: var(--lav-soft); color: var(--text-1); border-color: var(--lav-mid); }
    .member-action-btn.danger:hover { background: var(--danger-soft); color: var(--danger); border-color: var(--peach-mid); }

    /* Add user form inside modal */
    .admin-form-field { margin-bottom: 13px; }
    .admin-form-field label {
      display: block; font-size: 11px; font-weight: 600; color: var(--text-2);
      text-transform: uppercase; letter-spacing: .07em; margin-bottom: 5px;
    }
    .admin-form-field input,
    .admin-form-field select {
      width: 100%; padding: 10px 13px;
      background: rgba(255,240,248,0.5);
      border: 1.5px solid var(--pink-mid);
      border-radius: 9px; color: var(--text-1);
      font-size: 13px; font-family: 'DM Sans', sans-serif;
      outline: none; transition: border-color .2s, box-shadow .2s;
    }
    .admin-form-field input:focus,
    .admin-form-field select:focus {
      border-color: var(--lavender);
      box-shadow: 0 0 0 3px rgba(196,168,232,0.15);
    }
    .admin-form-field input::placeholder { color: var(--text-3); }
    .emoji-grid {
      display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px;
    }
    .emoji-opt {
      width: 36px; height: 36px; border-radius: 9px;
      border: 1.5px solid transparent;
      background: rgba(255,255,255,0.6);
      display: flex; align-items: center; justify-content: center;
      font-size: 20px; cursor: pointer; transition: all .18s;
    }
    .emoji-opt:hover { background: var(--lav-soft); border-color: var(--lav-mid); }
    .emoji-opt.selected { background: var(--lav-soft); border-color: var(--lavender); transform: scale(1.12); }
    .admin-divider {
      border: none; border-top: 1px solid rgba(196,168,232,0.2);
      margin: 16px 0;
    }
    .pw-change-row { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 12px; }
    .pw-change-row .admin-form-field { flex: 1; margin-bottom: 0; }

    /* ─── EMPTY STATES ───────────────────────────────────────────── */
    .empty-state {
      text-align: center; padding: 20px 10px;
      font-family: 'Dancing Script', cursive;
      font-size: 15px; color: var(--text-2);
    }

    /* ─── SCROLLBAR ──────────────────────────────────────────────── */
    ::-webkit-scrollbar { width: 4px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--pink-mid); border-radius: 999px; }

    /* ─── RESPONSIVE ─────────────────────────────────────────────── */
    @media (max-width: 960px) {
      .hub-main { grid-template-columns: 1fr; }
      .right-panel { display: grid; grid-template-columns: 1fr 1fr; }
      .bottom-panels { grid-template-columns: 1fr; }
    }
    @media (max-width: 600px) {
      .hub-header { padding: 12px 16px; }
      .hub-main, .bottom-panels { padding: 14px 14px 0; }
      .right-panel { grid-template-columns: 1fr; }
      .auth-card { width: 94vw; padding: 40px 26px 36px; }
    }

    /* ─── UPCOMING (right panel card) ───────────────────────── */
    .upcoming-section { padding: 14px 16px 16px; }
    .upcoming-label {
      font-size: 10px; font-weight: 700; color: var(--text-2);
      text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px;
    }
    .upcoming-strip { display: flex; flex-wrap: wrap; gap: 5px; align-items: flex-start; }
    .uc-ev-row {
      display: flex; align-items: center; gap: 8px;
      padding: 5px 7px; border-radius: 8px; cursor: pointer;
      transition: background .12s;
    }
    .uc-ev-row:hover { background: rgba(244,160,192,0.1); }
    .uc-day-label {
      font-size: 10px; font-weight: 700; letter-spacing: .05em;
      text-transform: uppercase; color: var(--text-3);
      padding: 6px 0 2px; margin-top: 2px;
    }
    .uc-day-label.uc-today { color: var(--pink); }

    /* ─── EVENT PILLS (upcoming + today) ────────────────────── */
    .ev-pill {
      display: flex; align-items: center; gap: 10px;
      padding: 8px 11px; border-radius: 10px; width: 100%; box-sizing: border-box;
      border-left: 3px solid var(--ep-accent, var(--lavender));
      background: var(--ep-bg, rgba(196,168,232,0.1));
      cursor: pointer; transition: filter .12s;
    }
    .ev-pill:hover { filter: brightness(1.07); }
    .ev-pill-icon { font-size: 15px; flex-shrink: 0; line-height: 1; }
    .ev-pill-title { flex: 1; font-size: 13px; font-weight: 500; color: var(--text-1);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ev-pill-time { font-size: 11px; color: var(--text-3);
      font-variant-numeric: tabular-nums; flex-shrink: 0; }
    .ev-pill-day { font-size: 10px; font-weight: 700; letter-spacing: .06em;
      text-transform: uppercase; color: var(--text-3); margin: 6px 0 3px; padding: 0 2px; }
    .ev-pill-day.is-today { color: var(--pink); }
    .ev-pill-compact {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 4px 9px 4px 7px; border-radius: 99px;
      border-left: 3px solid var(--ep-accent, var(--lavender));
      background: var(--ep-bg, rgba(196,168,232,0.1));
      cursor: pointer; transition: filter .12s; white-space: nowrap;
    }
    .ev-pill-compact:hover { filter: brightness(1.08); }
    .ev-pill-compact .ev-pill-icon { font-size: 13px; line-height: 1; }
    .ev-pill-compact .ev-pill-title { font-size: 12px; font-weight: 500; color: var(--text-1); }
    .ev-pill-compact .ev-pill-time { font-size: 10px; color: var(--text-3); font-variant-numeric: tabular-nums; margin-left: 3px; }
    .ev-pill-day-label {
      width: 100%; display: flex; align-items: center; justify-content: space-between;
      font-size: 10px; font-weight: 700; letter-spacing: .06em;
      text-transform: uppercase; color: var(--text-3); padding: 6px 2px 3px;
    }
    .ev-pill-day-label.is-today { color: var(--pink); }
    .ev-day-wx { font-size: 10px; font-weight: 500; color: var(--text-2);
      text-transform: none; letter-spacing: 0; opacity: 0.85; }
    .ev-creator-legend { width: 100%; display: flex; flex-wrap: wrap; gap: 6px;
      padding: 8px 2px 2px; margin-top: 4px;
      border-top: 1px solid var(--card-border); }
    .ev-creator-chip { display: inline-flex; align-items: center; gap: 5px;
      font-size: 11px; color: var(--text-2); font-weight: 500; }
    .ev-creator-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

    /* ─── TASK EMOJI (legacy — picker removed in pill layout) ── */
    .task-emoji-btn {
      width: 26px; height: 26px; border-radius: 50%;
      background: var(--s1); border: 1.5px solid var(--card-border);
      font-size: 14px; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; transition: background .15s; position: relative;
    }
    .task-emoji-btn:hover { background: var(--s2); }
    .task-emoji-pop {
      position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 60;
      background: var(--card); border: 1px solid var(--card-border);
      border-radius: 12px; padding: 8px; width: 174px;
      display: flex; flex-wrap: wrap; gap: 4px;
      box-shadow: 0 6px 20px rgba(140,120,180,0.2);
    }
    .task-emoji-pop.hidden { display: none; }
    .task-emoji-opt { width: 28px; height: 28px; border-radius: 7px; border: none;
      background: none; font-size: 16px; cursor: pointer; display: flex;
      align-items: center; justify-content: center; transition: background .12s; }
    .task-emoji-opt:hover { background: var(--s2); }

    /* ─── ADD-EVENT MODAL ────────────────────────────────────── */
    .ev-modal-overlay {
      position: fixed; inset: 0; z-index: 700;
      background: rgba(20,12,36,0.55); backdrop-filter: blur(4px);
      display: flex; align-items: center; justify-content: center;
    }
    .ev-modal-overlay.hidden { display: none; }
    .ev-modal-box {
      background: var(--card); border-radius: 20px;
      padding: 26px 24px 22px; width: min(400px, 92vw);
      box-shadow: 0 12px 40px rgba(120,80,180,0.22);
      animation: slideUp .2s cubic-bezier(.34,1.56,.64,1);
    }
    .ev-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
    .ev-modal-title { font-family: 'Cormorant Garamond', serif; font-size: 19px; font-weight: 600; color: var(--text-1); }
    .ev-modal-close { width: 30px; height: 30px; border-radius: 50%; background: var(--s1); border: none; font-size: 14px; cursor: pointer; color: var(--text-2); }
    .ev-modal-field { margin-bottom: 13px; }
    .ev-modal-lbl { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); margin-bottom: 5px; }
    .ev-modal-input {
      width: 100%; box-sizing: border-box; border: 1.5px solid var(--card-border);
      border-radius: 10px; padding: 9px 12px; font-family: inherit;
      font-size: 14px; background: var(--s0); color: var(--text-1); outline: none;
    }
    .ev-modal-input:focus { border-color: var(--lavender); }
    .ev-modal-row { display: flex; gap: 10px; }
    .ev-modal-row .ev-modal-field { flex: 1; }
    .ev-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
    .ev-modal-confirm { background: linear-gradient(135deg, var(--lavender), var(--pink));
      border: none; border-radius: 10px; color: #fff; font-size: 13px; font-weight: 600;
      padding: 9px 22px; cursor: pointer; font-family: 'DM Sans', sans-serif; }
    .ev-modal-cancel { background: var(--s1); border: 1px solid var(--card-border);
      border-radius: 10px; color: var(--text-2); font-size: 13px;
      padding: 9px 14px; cursor: pointer; font-family: 'DM Sans', sans-serif; }
    .ev-modal-delete { background: var(--s1); border: 1px solid var(--card-border);
      border-radius: 10px; color: #e57373; font-size: 13px;
      padding: 9px 14px; cursor: pointer; font-family: 'DM Sans', sans-serif; margin-right: auto; }
    .ev-modal-delete:hover { background: #fde8e8; }
    [data-color-scheme="dark"] .ev-modal-delete:hover { background: #3d2020; }

    /* ─── EVENT EDITING ─────────────────────────────────────── */
    .event-chip .edit-btn {
      opacity: 0; cursor: pointer; font-size: 11px;
      color: var(--text-3); background: none; border: none;
      padding: 2px 4px; border-radius: 4px; flex-shrink: 0;
      transition: opacity .15s;
    }
    .event-chip:hover .edit-btn { opacity: .6; }
    .event-chip .edit-btn:hover { opacity: 1 !important; color: var(--lavender); }
    .event-edit-input {
      flex: 1; background: rgba(255,255,255,0.9); border: 1px solid var(--lav-mid);
      border-radius: 6px; padding: 3px 8px; font-size: 12px;
      font-family: 'DM Sans', sans-serif; outline: none; color: var(--text-1);
    }
    .event-edit-input:focus { border-color: var(--lavender); }

    /* ─── RECURRENCE SELECT ──────────────────────────────────── */
    .rrule-select {
      background: rgba(255,255,255,0.7); border: 1px solid var(--lav-mid);
      border-radius: 8px; padding: 6px 8px; font-size: 11px;
      font-family: inherit; color: var(--text-2); outline: none;
      cursor: pointer; transition: border-color .2s; flex-shrink: 0;
    }
    .rrule-select:focus { border-color: var(--lavender); }

    /* ─── DAILY NOTE ─────────────────────────────────────────── */
    .day-note-area {
      margin-top: 10px; border-top: 1px solid rgba(196,168,232,0.2); padding-top: 10px;
    }
    .day-note-label {
      font-size: 10px; font-weight: 600; color: var(--text-2);
      text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px;
    }
    .day-note-input {
      width: 100%; background: rgba(255,255,255,0.6);
      border: 1px solid rgba(196,168,232,0.3); border-radius: 9px;
      padding: 8px 10px; font-size: 12px; color: var(--text-1);
      font-family: 'DM Sans', sans-serif; resize: none; outline: none;
      transition: border-color .2s; min-height: 52px; line-height: 1.4;
    }
    .day-note-input:focus { border-color: var(--lavender); }
    .day-note-saved {
      font-size: 10px; color: var(--mint); text-align: right;
      margin-top: 3px; height: 13px; opacity: 0; transition: opacity .3s;
    }
    .day-note-saved.show { opacity: 1; }

    /* ─── DINNER SAVED INDICATOR ─────────────────────────────── */
    .dinner-saved {
      font-size: 10px; color: var(--mint); opacity: 0;
      transition: opacity .3s; flex-shrink: 0;
    }
    .dinner-saved.show { opacity: 1; }

    /* ─── SHOPPING CATEGORIES ────────────────────────────────── */
    .shop-cat-header {
      font-size: 10px; font-weight: 700; color: var(--text-2);
      font-family: 'DM Sans', sans-serif;
      text-transform: uppercase; letter-spacing: .07em;
      padding: 8px 6px 3px; margin-top: 2px;
      border-top: 1px solid var(--card-border);
    }
    .shop-cat-header:first-child { border-top: none; margin-top: 0; padding-top: 2px; }
    .shop-cat-select {
      background: rgba(255,255,255,0.6); border: 1px solid var(--mint-mid);
      border-radius: 9px; padding: 8px 6px; font-size: 15px;
      font-family: inherit; outline: none; cursor: pointer;
      transition: border-color .2s; flex-shrink: 0; color: var(--text-1);
      -webkit-appearance: none; appearance: none; text-align: center;
    }
    .shop-cat-select:focus { border-color: var(--mint); }

    /* ─── TASK → CALENDAR BUTTON (base — overridden by .task-pill above) ── */
    .task-cal-btn { font-size: 12px; cursor: pointer; background: none; border: none; padding: 0; line-height: 1; }

    /* ─── PROFILE DROPDOWN ──────────────────────────────────────── */
    .profile-btn {
      display: flex; align-items: center; gap: 8px;
      background: var(--s2);
      border: 1px solid var(--card-border);
      border-radius: 999px; padding: 4px 12px 4px 4px;
      cursor: pointer; transition: all .2s; position: relative;
    }
    .profile-btn:hover { background: var(--s-hover); box-shadow: var(--card-shadow); }
    .profile-avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--pink), var(--lavender)); display: flex; align-items: center; justify-content: center; font-size: 16px; }
    .profile-name { font-size: 12px; font-weight: 600; color: var(--text-1); }
    .profile-caret { font-size: 9px; color: var(--text-3); margin-left: 2px; }
    .profile-dropdown {
      position: fixed; z-index: 400;
      background: var(--card); border: 1px solid var(--card-border); backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      border-radius: 16px; min-width: 210px;
      box-shadow: 0 12px 40px rgba(200,140,180,0.22);
      padding: 8px; opacity: 0; transform: translateY(6px) scale(0.97);
      pointer-events: none;
      transition: opacity .18s ease, transform .18s cubic-bezier(.34,1.56,.64,1);
    }
    .profile-dropdown.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
    .pd-section { padding: 6px 8px 4px; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
    .pd-item {
      display: flex; align-items: center; gap: 10px;
      padding: 9px 10px; border-radius: 10px;
      font-size: 13px; color: var(--text-1); cursor: pointer;
      transition: background .15s; border: none; background: none; width: 100%; text-align: left;
    }
    .pd-item:hover { background: var(--pink-soft); }
    .pd-item svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--text-2); }
    .pd-divider { height: 1px; background: rgba(244,160,192,0.2); margin: 4px 8px; }
    .pd-theme-row { display: flex; align-items: center; gap: 6px; padding: 7px 10px; }
    .pd-theme-label { font-size: 11px; color: var(--text-2); flex: 1; }
    .theme-btn { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid transparent; background: transparent; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .2s; opacity: 0.5; }
    .theme-btn:hover { opacity: 1; transform: scale(1.15); }
    .theme-btn.active { opacity: 1; border-color: var(--pink-mid); background: var(--s-hover); }

    /* ─── COMPACT LAYOUT ─────────────────────────────────────────── */
    .hub-main { grid-template-columns: 260px 1fr; gap: 12px; padding: 12px 16px 0; }
    .right-panel { gap: 10px; }
    .card { border-radius: 14px; }
    .card-header { padding: 11px 14px 9px; }
    .card-title { font-size: 15px; font-weight: 600; }
    .section-title { font-size: 15px; padding: 11px 14px 0; }
    .cal-nav { padding: 9px 12px 7px; }
    .cal-nav h2 { font-size: 15px; }
    .cal-grid { padding: 3px 6px; gap: 1px; }
    .cal-day { min-height: 36px; padding: 2px 2px 2px; border-radius: 7px; }
    .day-num { font-size: 10px; }
    .cal-legend { padding: 5px 10px 8px; gap: 8px; }
    .suggestions-card { padding: 10px 12px 12px; }
    .section-title { font-size: 11px; font-weight: 700; letter-spacing:.07em; text-transform:uppercase; color: var(--text-2); margin-bottom: 8px; }
    .upcoming-section { padding: 9px 12px 10px; }
    .upcoming-strip { gap: 3px; }
    .uc-week-day { padding: 5px 2px 4px; min-height: 40px; border-radius: 8px; }
    .uc-week-date { font-size: 12px; }
    .uc-week-ev { font-size: 7px; }
    .bottom-panels { gap: 10px; padding: 10px 16px 0; }
    .panel-card.collapsed { min-width: 100px; max-width: 130px; }
    .panel-body { padding: 8px 14px; max-height: 180px; }
    .panel-footer { padding: 8px 14px 12px; }
    .task-item { padding: 7px 4px; font-size: 12px; gap: 8px; }
    .task-cb { width: 15px; height: 15px; font-size: 9px; }
    .shop-item { padding: 7px 4px; font-size: 12px; gap: 8px; }
    .shop-cb { width: 15px; height: 15px; font-size: 9px; }
    .dinner-row { padding: 5px 4px; }
    .dinner-meal { font-size: 12px; }
    .note-chip { padding: 7px 8px; font-size: 12px; }

    /* ─── ACCESSIBLE LABELED BUTTONS ────────────────────────────── */
    .icon-label-btn {
      display: inline-flex; align-items: center; gap: 5px;
      background: var(--s2); border: 1px solid var(--card-border);
      border-radius: 8px; padding: 5px 10px;
      font-size: 11px; font-weight: 600; color: var(--text-2);
      cursor: pointer; transition: all .2s; white-space: nowrap;
    }
    .icon-label-btn:hover { background: var(--s-hover); color: var(--text-1); }
    .add-btn-labeled {
      display: inline-flex; align-items: center; gap: 4px;
      background: linear-gradient(135deg, var(--pink), var(--lavender));
      border: none; border-radius: 8px; padding: 0 12px;
      height: 34px; color: #fff; font-size: 12px; font-weight: 600;
      cursor: pointer; white-space: nowrap; flex-shrink: 0;
      transition: opacity .2s, transform .15s; font-family: inherit;
    }
    .add-btn-labeled:hover { opacity: .9; transform: translateY(-1px); }

    /* ─── SUGGESTION CHIPS ───────────────────────────────────────── */
    .sug-strip { display: flex; flex-direction: column; gap: 5px; }
    .sug-chip {
      display: flex; align-items: center; gap: 8px;
      background: var(--s1); border: 1px solid var(--card-border);
      border-radius: 10px; padding: 7px 10px;
      cursor: pointer; transition: all .18s; min-width: 0;
    }
    .sug-chip:hover { background: var(--s-hover); box-shadow: 0 2px 8px rgba(0,0,0,0.07); transform: translateY(-1px); }
    .sug-chip-icon { font-size: 16px; flex-shrink: 0; }
    .sug-chip-body { flex: 1; min-width: 0; }
    .sug-chip-title { font-size: 12px; font-weight: 600; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sug-chip-meta  { font-size: 10px; color: var(--text-2); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sug-chip-action { font-size: 10px; font-weight: 600; color: var(--pink); background: var(--pink-soft); border: 1px solid var(--pink-mid); border-radius: 6px; padding: 3px 7px; flex-shrink: 0; white-space: nowrap; transition: background .15s; }
    .sug-chip:hover .sug-chip-action { background: var(--pink-mid); }
    .sug-empty { font-size: 12px; color: var(--text-3); text-align: center; padding: 8px 0; }
    .sug-forecast-row { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin-bottom: 6px; }
    .sug-forecast-row::-webkit-scrollbar { display: none; }
    .sug-fc-day { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; background: var(--s1); border: 1px solid var(--card-border); border-radius: 8px; padding: 4px 6px; min-width: 36px; gap: 1px; }
    .sug-fc-day.perfect { background: rgba(142,203,168,0.18); border-color: var(--mint-mid); }
    .sug-fc-day.rainy   { background: rgba(160,196,244,0.18); border-color: var(--lav-mid); }
    .sug-fc-dow  { font-size: 8px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .05em; }
    .sug-fc-icon { font-size: 13px; }
    .sug-fc-hi   { font-size: 9px; font-weight: 600; color: var(--text-1); }
    .sug-fc-lo   { font-size: 8px; color: var(--text-3); }

    /* ─── SHOPPING ENHANCEMENTS ──────────────────────────────────── */
    .shop-quick-bar { display: flex; gap: 4px; flex-wrap: wrap; padding: 0 14px 8px; border-bottom: 1px solid rgba(142,203,168,0.15); }
    .shop-quick-chip { font-size: 10px; padding: 3px 8px; border-radius: 999px; cursor: pointer; background: var(--mint-soft); border: 1px solid var(--mint-mid); color: var(--text-2); transition: all .15s; white-space: nowrap; font-family: inherit; line-height: 1.4; }
    .shop-quick-chip:hover { background: var(--mint-mid); color: var(--text-1); }
    .shop-footer-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .shop-tpl-label { font-size: 10px; color: var(--text-3); white-space: nowrap; }
    .shop-tpl-btn { font-size: 10px; padding: 3px 8px; border-radius: 999px; cursor: pointer; background: var(--lav-soft); border: 1px solid var(--lav-mid); color: var(--text-2); transition: all .15s; font-family: inherit; white-space: nowrap; }
    .shop-tpl-btn:hover { background: var(--lav-mid); color: var(--text-1); }
    .shop-clear-btn { font-size: 10px; padding: 3px 9px; border-radius: 999px; cursor: pointer; background: var(--peach-soft); border: 1px solid var(--peach-mid); color: var(--peach); transition: all .15s; font-family: inherit; white-space: nowrap; }
    .shop-clear-btn:hover { background: var(--peach-mid); }
    .shop-modal-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
    .shop-modal-tab { flex: 1; padding: 7px 4px; border-radius: 8px; font-size: 11px; font-weight: 600; border: 1px solid var(--card-border); background: transparent; color: var(--text-2); cursor: pointer; transition: all .15s; font-family: inherit; text-align: center; }
    .shop-modal-tab.active { background: linear-gradient(135deg, var(--mint), var(--lavender)); color: #fff; border-color: transparent; }
    .shop-tpl-grid { display: flex; flex-direction: column; gap: 7px; }
    .shop-tpl-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--s2); border: 1px solid var(--card-border); cursor: pointer; transition: all .2s; }
    .shop-tpl-card:hover { background: var(--mint-soft); border-color: var(--mint-mid); }
    .shop-tpl-card-icon { font-size: 22px; flex-shrink: 0; }
    .shop-tpl-card-info { flex: 1; }
    .shop-tpl-card-name { font-size: 13px; font-weight: 600; color: var(--text-1); }
    .shop-tpl-card-count { font-size: 11px; color: var(--text-3); margin-top: 1px; }
    .shop-tpl-card-btn { font-size: 11px; padding: 4px 10px; border-radius: 7px; background: var(--mint-soft); border: 1px solid var(--mint-mid); color: var(--text-2); cursor: pointer; font-family: inherit; transition: all .15s; }
    .shop-tpl-card-btn:hover { background: var(--mint-mid); }
    .shop-saved-list { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; background: var(--s2); border: 1px solid var(--card-border); margin-bottom: 6px; transition: background .15s; }
    .shop-saved-list:hover { background: var(--lav-soft); border-color: var(--lav-mid); }
    .ssl-icon { font-size: 18px; flex-shrink: 0; }
    .ssl-info { flex: 1; }
    .ssl-name { font-size: 13px; font-weight: 600; color: var(--text-1); }
    .ssl-meta { font-size: 11px; color: var(--text-3); }
    .ssl-load { font-size: 11px; padding: 4px 10px; border-radius: 7px; background: var(--lav-soft); border: 1px solid var(--lav-mid); color: var(--text-2); cursor: pointer; font-family: inherit; transition: all .15s; flex-shrink: 0; }
    .ssl-load:hover { background: var(--lav-mid); }
    .ssl-del { font-size: 13px; color: var(--text-3); cursor: pointer; transition: color .15s; padding: 2px 4px; }
    .ssl-del:hover { color: var(--danger); }
    .shop-save-row { display: flex; gap: 8px; margin-top: 10px; }
    .shop-save-row input { flex: 1; background: rgba(255,255,255,0.7); border: 1px solid var(--lav-mid); border-radius: 9px; padding: 8px 12px; font-size: 13px; font-family: inherit; outline: none; color: var(--text-1); transition: border-color .2s; }
    .shop-save-row input:focus { border-color: var(--lavender); }
    .shop-save-row button { padding: 0 14px; border-radius: 9px; background: linear-gradient(135deg, var(--lavender), var(--pink)); border: none; color: #fff; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; white-space: nowrap; }

    /* ─── THEME OVERRIDES ────────────────────────────────────────── */
    .theme-switcher { display: none; }
    [data-hub-theme="minecraft"] { --bg:#0D1117; --bg2:#161B22; --pink:#5BAF4A; --pink-soft:#162414; --pink-mid:#3A6B30; --lavender:#FFC107; --lav-soft:#2A2200; --lav-mid:#7A5500; --mint:#4FC3F7; --mint-soft:#001A2A; --mint-mid:#005A8A; --peach:#CD6B2C; --peach-soft:#2A1200; --peach-mid:#7A3F10; --sky:#4FC3F7; --sky-soft:#001F2E; --text-1:#E8F0E8; --text-2:#8AA890; --text-3:#4A6050; --card:rgba(14,22,14,0.93); --card-border:rgba(58,107,48,0.45); --card-shadow:0 0 0 2px rgba(58,107,48,0.25),0 8px 32px rgba(0,0,0,0.6); --radius:4px; --radius-sm:2px; --s0:rgba(58,107,48,0.10); --s1:rgba(58,107,48,0.18); --s2:rgba(58,107,48,0.26); --s-hover:rgba(58,107,48,0.30); }
    [data-hub-theme="minecraft"] body { background:#0D1117; }
    [data-hub-theme="minecraft"] .wc-bg { background:#0A1208 !important; }
    [data-hub-theme="minecraft"] .wc-bloom { filter:none !important; border-radius:0 !important; opacity:0.6; }
    [data-hub-theme="minecraft"] .bloom-tl { background:#1A3D10 !important; } [data-hub-theme="minecraft"] .bloom-tr { background:#0A1A0A !important; } [data-hub-theme="minecraft"] .bloom-bl { background:#2A1800 !important; } [data-hub-theme="minecraft"] .bloom-br { background:#001830 !important; }
    [data-hub-theme="minecraft"] .wc-bg::after { content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background-image:linear-gradient(rgba(58,107,48,0.07) 1px,transparent 1px),linear-gradient(90deg,rgba(58,107,48,0.07) 1px,transparent 1px); background-size:32px 32px; }
    [data-hub-theme="minecraft"] .hub-header { background:rgba(8,14,8,0.92) !important; border-bottom:2px solid rgba(58,107,48,0.6) !important; }
    [data-hub-theme="minecraft"] .brand-name { font-family:'Press Start 2P',monospace !important; font-size:13px !important; letter-spacing:0 !important; background:linear-gradient(135deg,#5BAF4A,#FFC107) !important; -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important; background-clip:text !important; }
    [data-hub-theme="minecraft"] .brand-mark { background:linear-gradient(135deg,#3A6B30,#5BAF4A) !important; border-radius:4px !important; }
    [data-hub-theme="minecraft"] .card { border-radius:4px !important; border:2px solid rgba(58,107,48,0.4) !important; }
    [data-hub-theme="minecraft"] .card-header { border-bottom:1px solid rgba(58,107,48,0.25) !important; }
    [data-hub-theme="minecraft"] .card-title,[data-hub-theme="minecraft"] .section-title,[data-hub-theme="minecraft"] .cal-nav h2 { font-family:'Press Start 2P',monospace !important; font-size:10px !important; }
    [data-hub-theme="minecraft"] .clock-time { font-family:'VT323',monospace !important; font-size:36px !important; }
    [data-hub-theme="minecraft"] .nav-btn { background:#162414 !important; border:2px solid rgba(58,107,48,0.5) !important; border-radius:2px !important; color:#8AA890 !important; }
    [data-hub-theme="minecraft"] .auth-card { background:rgba(8,14,8,0.95) !important; border:2px solid #3A6B30 !important; border-radius:6px !important; box-shadow:0 0 0 4px rgba(14,22,14,0.8),0 16px 60px rgba(0,0,0,0.8) !important; }
    [data-hub-theme="minecraft"] .auth-card h1 { font-family:'Press Start 2P',monospace !important; font-size:18px !important; line-height:1.5 !important; background:linear-gradient(135deg,#5BAF4A,#FFC107) !important; -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important; background-clip:text !important; }
    [data-hub-theme="minecraft"] .unlock-btn { background:linear-gradient(180deg,#5BAF4A 0%,#3A6B30 100%) !important; border-radius:4px !important; border:none !important; border-bottom:4px solid #1A3D10 !important; font-family:'Press Start 2P',monospace !important; font-size:10px !important; box-shadow:none !important; text-shadow:0 1px 0 rgba(0,0,0,0.4) !important; }
    [data-hub-theme="minecraft"] .unlock-btn:hover { opacity:1 !important; transform:translateY(2px) !important; border-bottom-width:2px !important; }
    [data-hub-theme="minecraft"] .profile-btn { background:rgba(14,22,14,0.8) !important; border-color:rgba(58,107,48,0.4) !important; }
    [data-hub-theme="minecraft"] .profile-dropdown { background:rgba(8,14,8,0.97) !important; border-color:#3A6B30 !important; }
    [data-hub-theme="minecraft"] .pd-item:hover { background:rgba(58,107,48,0.2) !important; }
    [data-hub-theme="minecraft"] .toast { background:rgba(14,22,14,0.95) !important; border-color:rgba(58,107,48,0.4) !important; color:#E8F0E8 !important; border-radius:2px !important; }
    [data-hub-theme="lego"] { --bg:#F2F2F2; --bg2:#E8E8E8; --pink:#E53935; --pink-soft:#FFEBEE; --pink-mid:#EF9A9A; --lavender:#1565C0; --lav-soft:#E3F2FD; --lav-mid:#90CAF9; --mint:#2E7D32; --mint-soft:#E8F5E9; --mint-mid:#A5D6A7; --peach:#F9A825; --peach-soft:#FFFDE7; --peach-mid:#FFF59D; --sky:#0288D1; --sky-soft:#E1F5FE; --text-1:#1A1A1A; --text-2:#555555; --text-3:#999999; --card:rgba(255,255,255,0.97); --card-border:rgba(0,0,0,0.08); --card-shadow:0 4px 0 rgba(0,0,0,0.18),0 6px 24px rgba(0,0,0,0.06); --radius:10px; --radius-sm:7px; }
    [data-hub-theme="lego"] body { background:#F2F2F2; font-family:'Nunito','Arial Rounded MT Bold',sans-serif !important; }
    [data-hub-theme="lego"] .wc-bg { background:#EAEAEA !important; } [data-hub-theme="lego"] .wc-bloom { display:none !important; }
    [data-hub-theme="lego"] .wc-bg::after { content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background-image:radial-gradient(circle,rgba(0,0,0,0.1) 2.5px,transparent 2.5px); background-size:22px 22px; background-position:11px 11px; }
    [data-hub-theme="lego"] .hub-header { background:rgba(255,255,255,0.97) !important; border-bottom:4px solid #E53935 !important; }
    [data-hub-theme="lego"] .brand-name { font-family:'Fredoka One','Arial Rounded MT Bold',sans-serif !important; font-size:22px !important; background:linear-gradient(135deg,#E53935 30%,#1565C0 100%) !important; -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important; background-clip:text !important; }
    [data-hub-theme="lego"] .brand-mark { background:#E53935 !important; border-radius:8px !important; box-shadow:0 3px 0 #B71C1C !important; }
    [data-hub-theme="lego"] .card { border-radius:10px !important; border-bottom:4px solid rgba(0,0,0,0.14) !important; }
    [data-hub-theme="lego"] .card-title,[data-hub-theme="lego"] .section-title,[data-hub-theme="lego"] .cal-nav h2 { font-family:'Fredoka One',sans-serif !important; font-weight:400 !important; }
    [data-hub-theme="lego"] .clock-time { font-family:'Fredoka One',sans-serif !important; }
    [data-hub-theme="lego"] .auth-card { background:rgba(255,255,255,0.98) !important; border:3px solid #E53935 !important; border-bottom:8px solid #B71C1C !important; border-radius:16px !important; box-shadow:0 8px 0 rgba(183,28,28,0.25),0 12px 40px rgba(0,0,0,0.12) !important; }
    [data-hub-theme="lego"] .auth-card h1 { font-family:'Fredoka One',sans-serif !important; font-size:40px !important; font-weight:400 !important; background:linear-gradient(135deg,#E53935,#1565C0) !important; -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important; background-clip:text !important; }
    [data-hub-theme="lego"] .unlock-btn { background:#E53935 !important; border-radius:999px !important; border:none !important; border-bottom:4px solid #B71C1C !important; box-shadow:none !important; font-family:'Fredoka One',sans-serif !important; font-size:16px !important; }
    [data-hub-theme="lego"] .unlock-btn:hover { opacity:1 !important; transform:translateY(2px) !important; border-bottom-width:2px !important; }
    [data-hub-theme="lego"] .profile-btn { border-color:rgba(229,57,53,0.3) !important; }
    [data-hub-theme="lego"] .profile-dropdown { border-color:#EF9A9A !important; }
    [data-hub-theme="lego"] .pd-item:hover { background:#FFEBEE !important; }

    /* ─── MINECRAFT LIGHT (Overworld / day) ─────────────────────────── */
    [data-hub-theme="minecraft"][data-color-scheme="light"] {
      --bg:#C0CF94; --bg2:#B0C084;
      --pink:#5C8A2A; --pink-soft:#D4E8B0; --pink-mid:#A8CC78;
      --lavender:#8B6914; --lav-soft:#FFF5CC; --lav-mid:#DDB846;
      --mint:#2E8B6A; --mint-soft:#B0E8D0; --mint-mid:#6CC4A0;
      --peach:#C87A2A; --peach-soft:#F0D4A8; --peach-mid:#D8A870;
      --sky:#5A9BD4; --sky-soft:#C8E8F8;
      --text-1:#1A2E0A; --text-2:#4A7030; --text-3:#7A9060;
      --card:rgba(220,210,185,0.95); --card-border:rgba(90,120,60,0.30);
      --card-shadow:0 0 0 2px rgba(90,120,60,0.15),0 6px 20px rgba(0,0,0,0.10);
      --s0:rgba(255,255,255,0.30); --s1:rgba(255,255,255,0.48); --s2:rgba(255,255,255,0.62); --s-hover:rgba(255,255,255,0.78);
      --danger:#C0392B; --danger-soft:#FAD5CE;
      --input-bg:rgba(255,255,255,0.72); --input-border:rgba(90,120,60,0.35);
      --popup-bg:rgba(220,215,190,0.99); --sidebar-bg:rgba(185,200,150,0.96);
    }
    [data-hub-theme="minecraft"][data-color-scheme="light"] body { background:#C0CF94; }
    [data-hub-theme="minecraft"][data-color-scheme="light"] .wc-bg { background:#C8D89C !important; }
    [data-hub-theme="minecraft"][data-color-scheme="light"] .bloom-tl { background:#5C8A2A !important; }
    [data-hub-theme="minecraft"][data-color-scheme="light"] .bloom-tr { background:#4A7030 !important; }
    [data-hub-theme="minecraft"][data-color-scheme="light"] .bloom-bl { background:#8B6914 !important; }
    [data-hub-theme="minecraft"][data-color-scheme="light"] .bloom-br { background:#2E8B6A !important; }
    [data-hub-theme="minecraft"][data-color-scheme="light"] .wc-bg::after { background-image:linear-gradient(rgba(90,120,60,0.10) 1px,transparent 1px),linear-gradient(90deg,rgba(90,120,60,0.10) 1px,transparent 1px); }
    [data-hub-theme="minecraft"][data-color-scheme="light"] .hub-header { background:rgba(180,200,140,0.95) !important; border-bottom:2px solid rgba(90,120,60,0.50) !important; }
    [data-hub-theme="minecraft"][data-color-scheme="light"] .brand-name { background:linear-gradient(135deg,#3A6B20,#8B6914) !important; -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important; background-clip:text !important; }
    [data-hub-theme="minecraft"][data-color-scheme="light"] .brand-mark { background:linear-gradient(135deg,#5C8A2A,#8B6914) !important; }
    [data-hub-theme="minecraft"][data-color-scheme="light"] .nav-btn { background:#B8CC84 !important; border:2px solid rgba(90,120,60,0.45) !important; color:#2A4A10 !important; }
    [data-hub-theme="minecraft"][data-color-scheme="light"] .auth-card { background:rgba(220,215,190,0.97) !important; border:2px solid #5C8A2A !important; box-shadow:0 0 0 4px rgba(185,205,145,0.8),0 16px 60px rgba(0,0,0,0.15) !important; }
    [data-hub-theme="minecraft"][data-color-scheme="light"] .auth-card h1 { background:linear-gradient(135deg,#3A6B20,#8B6914) !important; -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important; background-clip:text !important; }
    [data-hub-theme="minecraft"][data-color-scheme="light"] .unlock-btn { background:linear-gradient(180deg,#6AA030 0%,#4A7820 100%) !important; border-bottom:4px solid #2A5010 !important; }
    [data-hub-theme="minecraft"][data-color-scheme="light"] .profile-btn { background:rgba(185,205,145,0.85) !important; border-color:rgba(90,120,60,0.40) !important; }
    [data-hub-theme="minecraft"][data-color-scheme="light"] .profile-dropdown { background:rgba(215,210,185,0.99) !important; border-color:#5C8A2A !important; }
    [data-hub-theme="minecraft"][data-color-scheme="light"] .pd-item:hover { background:rgba(90,120,60,0.18) !important; }
    [data-hub-theme="minecraft"][data-color-scheme="light"] .toast { background:rgba(215,210,185,0.97) !important; border-color:rgba(90,120,60,0.40) !important; color:#1A2E0A !important; }
    [data-hub-theme="minecraft"][data-color-scheme="light"] .note-bubble { background:rgba(180,210,140,0.35) !important; border-color:rgba(90,120,60,0.35) !important; color:#1A2E0A; }
    [data-hub-theme="minecraft"][data-color-scheme="light"] .note-bubble.mine { background:rgba(140,180,80,0.28) !important; border-color:rgba(90,150,40,0.45) !important; }
    [data-hub-theme="minecraft"][data-color-scheme="light"] .sidebar { background:rgba(185,200,150,0.96) !important; }

    /* ─── LEGO DARK (Factory floor / night) ─────────────────────────── */
    [data-hub-theme="lego"][data-color-scheme="dark"] {
      --bg:#1C1C1E; --bg2:#2A2A2E;
      --pink:#D32F2F; --pink-soft:rgba(211,47,47,0.12); --pink-mid:rgba(211,47,47,0.28);
      --lavender:#1976D2; --lav-soft:rgba(25,118,210,0.12); --lav-mid:rgba(25,118,210,0.28);
      --mint:#388E3C; --mint-soft:rgba(56,142,60,0.12); --mint-mid:rgba(56,142,60,0.28);
      --peach:#F57F17; --peach-soft:rgba(245,127,23,0.12); --peach-mid:rgba(245,127,23,0.28);
      --sky:#0277BD; --sky-soft:rgba(2,119,189,0.12);
      --text-1:#E8E8E8; --text-2:#ABABAB; --text-3:#666666;
      --card:rgba(38,38,42,0.97); --card-border:rgba(255,255,255,0.08);
      --card-shadow:0 4px 0 rgba(0,0,0,0.35),0 6px 24px rgba(0,0,0,0.30);
      --s0:rgba(255,255,255,0.04); --s1:rgba(255,255,255,0.08); --s2:rgba(255,255,255,0.12); --s-hover:rgba(255,255,255,0.17);
      --danger:#EF5350; --danger-soft:rgba(239,83,80,0.15);
      --input-bg:rgba(255,255,255,0.06); --input-border:rgba(255,255,255,0.14);
      --popup-bg:rgba(42,42,46,0.99); --sidebar-bg:rgba(24,24,26,0.97);
    }
    [data-hub-theme="lego"][data-color-scheme="dark"] body { background:#1C1C1E; font-family:'Nunito','Arial Rounded MT Bold',sans-serif !important; }
    [data-hub-theme="lego"][data-color-scheme="dark"] .wc-bg { background:#1A1A1C !important; }
    [data-hub-theme="lego"][data-color-scheme="dark"] .wc-bg::after { background-image:radial-gradient(circle,rgba(255,255,255,0.06) 2.5px,transparent 2.5px); }
    [data-hub-theme="lego"][data-color-scheme="dark"] .hub-header { background:rgba(28,28,30,0.97) !important; border-bottom:4px solid #D32F2F !important; }
    [data-hub-theme="lego"][data-color-scheme="dark"] .brand-name { font-family:'Fredoka One','Arial Rounded MT Bold',sans-serif !important; background:linear-gradient(135deg,#EF5350 30%,#1976D2 100%) !important; -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important; background-clip:text !important; }
    [data-hub-theme="lego"][data-color-scheme="dark"] .brand-mark { background:#D32F2F !important; border-radius:8px !important; box-shadow:0 3px 0 #7F0000 !important; }
    [data-hub-theme="lego"][data-color-scheme="dark"] .auth-card { background:rgba(38,38,42,0.99) !important; border:3px solid #D32F2F !important; border-bottom:8px solid #7F0000 !important; border-radius:16px !important; box-shadow:0 8px 0 rgba(127,0,0,0.4),0 12px 40px rgba(0,0,0,0.4) !important; }
    [data-hub-theme="lego"][data-color-scheme="dark"] .auth-card h1 { font-family:'Fredoka One',sans-serif !important; background:linear-gradient(135deg,#EF5350,#1976D2) !important; -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important; background-clip:text !important; }
    [data-hub-theme="lego"][data-color-scheme="dark"] .unlock-btn { background:#D32F2F !important; border-bottom:4px solid #7F0000 !important; font-family:'Fredoka One',sans-serif !important; }
    [data-hub-theme="lego"][data-color-scheme="dark"] .profile-btn { border-color:rgba(211,47,47,0.35) !important; }
    [data-hub-theme="lego"][data-color-scheme="dark"] .profile-dropdown { background:rgba(38,38,42,0.99) !important; border-color:rgba(211,47,47,0.35) !important; }
    [data-hub-theme="lego"][data-color-scheme="dark"] .pd-item:hover { background:rgba(211,47,47,0.12) !important; }
    [data-hub-theme="lego"][data-color-scheme="dark"] .toast { background:rgba(38,38,42,0.97) !important; border-color:rgba(255,255,255,0.12) !important; color:#E8E8E8 !important; }
    [data-hub-theme="lego"][data-color-scheme="dark"] input,
    [data-hub-theme="lego"][data-color-scheme="dark"] textarea,
    [data-hub-theme="lego"][data-color-scheme="dark"] select { background:rgba(255,255,255,0.05) !important; border-color:rgba(255,255,255,0.14) !important; color:#E8E8E8 !important; }
    [data-hub-theme="lego"][data-color-scheme="dark"] .note-bubble { background:rgba(255,255,255,0.06) !important; border-color:rgba(255,255,255,0.10) !important; }
    [data-hub-theme="lego"][data-color-scheme="dark"] .note-bubble.mine { background:rgba(211,47,47,0.12) !important; border-color:rgba(211,47,47,0.25) !important; }
    [data-hub-theme="lego"][data-color-scheme="dark"] .modal-box { background:rgba(38,38,42,0.99) !important; border-color:rgba(255,255,255,0.12) !important; }
    [data-hub-theme="lego"][data-color-scheme="dark"] .sidebar { background:rgba(24,24,26,0.97) !important; }

    /* ─── RESPONSIVE (tablet ≤ 900px) ───────────────────────────── */
    @media (max-width: 900px) {
      .hub-main { grid-template-columns: 1fr; padding: 10px 12px 0; }
      .right-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
      .bottom-panels { grid-template-columns: 1fr 1fr; padding: 10px 12px 0; }
    }

    /* ─── Mobile-only top-bar elements: hidden on desktop ────── */
    .mob-brand, .mob-profile-btn { display: none; }

    /* ════════════════════════════════════════
       MOBILE (≤ 600px) — bottom tab navigation
    ════════════════════════════════════════ */
    @media (max-width: 600px) {

      /* App shell stacks vertically */
      #hub { flex-direction: column; }

      /* ── Hub shell ─────────────────────────────────────────── */
      .hub-shell {
        flex: 1; order: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        /* push content above fixed tab bar + iPhone home indicator */
        padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px));
      }

      /* ── Sidebar → fixed bottom tab bar ───────────────────── */
      .sidebar {
        order: 2;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        width: 100%;
        height: auto;
        min-height: 58px;
        flex-direction: row;
        align-items: flex-start;
        padding: 0 8px;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        border-right: none;
        border-top: 1px solid var(--card-border);
        z-index: 100;
        gap: 0;
      }

      .sidebar-brand,
      .sidebar-clock,
      .sidebar-footer { display: none; }

      .sidebar-nav {
        flex-direction: row;
        justify-content: space-around;
        align-items: stretch;
        width: 100%; flex: 1;
        gap: 0; padding: 0;
      }
      .sidebar-nav li { flex: 1; display: flex; }

      .nav-item {
        flex-direction: column;
        gap: 2px;
        padding: 8px 4px 6px;
        border-radius: 12px;
        width: 100%;
        min-height: 50px;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-size: 9px;
        font-weight: 600;
        letter-spacing: .02em;
        text-transform: uppercase;
      }
      .nav-item.active { background: rgba(244,160,192,0.18); }
      .nav-icon { font-size: 22px; line-height: 1.1; }
      .nav-label { font-size: 9px; }

      /* ── Top bar → compact sticky mobile header ────────────── */
      .top-bar {
        position: sticky; top: 0; z-index: 50;
        background: var(--sidebar-bg);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        padding: 10px 14px;
        border-bottom: 1px solid var(--card-border);
      }

      .mob-brand {
        display: flex; align-items: center; gap: 5px;
        font-size: 15px; font-weight: 700; color: var(--text-1); flex-shrink: 0;
      }

      .mob-profile-btn {
        display: flex; align-items: center; justify-content: center;
        width: 32px; height: 32px; border-radius: 50%;
        border: 1.5px solid var(--card-border);
        background: var(--s1); cursor: pointer;
        flex-shrink: 0; padding: 0; font-size: 18px;
      }

      /* ── Views ─────────────────────────────────────────────── */
      .view { padding: 12px 12px 20px; }

      /* ── Ops: single column ─────────────────────────────────── */
      .ops-layout { grid-template-columns: 1fr; gap: 0; }
      .right-panel { display: flex; flex-direction: column; gap: 0; }
      .bottom-panels { grid-template-columns: 1fr; padding: 0; gap: 0; }

      /* ── Calendar: tighter cells ────────────────────────────── */
      .cal-day { min-height: 46px; font-size: 10px; }
      .day-ev { font-size: 9px; padding: 1px 4px; }

      /* ── Next up: allow it to shrink on small screens ──────── */
      .next-up { min-width: 0; flex: 1; font-size: 10px; }
      .sync-text { display: none; } /* hide "Synced" label, keep icon */
    }

    /* ─── SYNC INDICATOR ────────────────────────────────────────── */
    .sync-indicator {
      font-size: 10px; color: var(--text-3); display: flex; align-items: center;
      gap: 4px; transition: color .3s; cursor: pointer; user-select: none;
      padding: 4px 8px; border-radius: 999px;
      border: 1px solid transparent; transition: all .2s;
    }
    .sync-indicator:hover { color: var(--text-2); background: rgba(255,255,255,0.7); border-color: var(--lav-mid); }
    .sync-indicator.syncing { color: var(--lavender); }
    .sync-indicator.done    { color: var(--mint); }
    @keyframes spin { to { transform: rotate(360deg); } }
    .sync-indicator.syncing .sync-icon { display: inline-block; animation: spin .8s linear infinite; }

    /* ─── CLEAR BUTTONS ──────────────────────────────────────────── */
    .clear-btn {
      font-size: 10px; color: var(--text-3); background: none; border: none;
      cursor: pointer; padding: 0; font-family: inherit;
      transition: color .15s;
    }
    .clear-btn:hover { color: var(--danger); }

    /* ─── MEAL HISTORY DATALIST ──────────────────────────────────── */
    .dinner-meal::-webkit-calendar-picker-indicator { display: none; }

    /* ─── TASK → CAL MINI PICKER ─────────────────────────────── */
    .mini-picker {
      position: fixed; z-index: 500;
      background: var(--popup-bg); border: 1.5px solid var(--lav-mid);
      border-radius: 14px; padding: 14px; min-width: 190px;
      box-shadow: 0 8px 28px rgba(140,120,180,0.22);
      animation: slideUp .2s cubic-bezier(.34,1.56,.64,1);
    }
    .mini-picker-title {
      font-size: 11px; font-weight: 600; color: var(--text-2);
      margin-bottom: 8px;
    }
    .mini-picker input[type="date"] {
      width: 100%; border: 1px solid var(--lav-mid); border-radius: 8px;
      padding: 7px 10px; font-size: 13px; font-family: 'DM Sans', sans-serif;
      outline: none; color: var(--text-1); background: rgba(255,255,255,0.8);
    }
    .mini-picker input[type="date"]:focus { border-color: var(--lavender); }
    .mini-picker .pick-btns { display: flex; gap: 6px; margin-top: 8px; }
    .mini-picker .pick-confirm {
      flex: 1; background: linear-gradient(135deg, var(--lavender), var(--pink));
      border: none; border-radius: 7px; color: #fff; font-size: 12px;
      font-weight: 600; padding: 7px; cursor: pointer; font-family: 'DM Sans', sans-serif;
    }
    .mini-picker .pick-cancel {
      background: var(--lav-soft); border: 1px solid var(--lav-mid);
      border-radius: 7px; color: var(--text-2); font-size: 12px;
      padding: 7px 10px; cursor: pointer; font-family: 'DM Sans', sans-serif;
    }

    /* ─── SKIP LINK ──────────────────────────────────────────── */
    .skip-link {
      position: absolute; top: -48px; left: 16px; z-index: 9999;
      background: var(--pink); color: #fff; padding: 8px 18px;
      border-radius: 0 0 10px 10px; text-decoration: none; font-size: 13px;
      font-weight: 600; transition: top .18s; white-space: nowrap;
    }
    .skip-link:focus { top: 0; outline: 3px solid var(--lavender); }

    /* ─── SCREEN READER ONLY ─────────────────────────────────── */
    .sr-only {
      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
    }

    /* ─── APP SHELL ──────────────────────────────────────────── */
    #hub { display: flex; height: 100vh; overflow: hidden; position: relative; z-index: 2; }

    /* ─── SIDEBAR ────────────────────────────────────────────── */
    .sidebar {
      width: 210px; flex-shrink: 0; display: flex; flex-direction: column;
      background: rgba(255,255,255,0.78); backdrop-filter: blur(20px);
      border-right: 1px solid var(--card-border); padding: 16px 10px 14px;
      z-index: 10; overflow: visible; gap: 6px;
    }
    .sidebar-brand {
      display: flex; align-items: center; gap: 9px;
      padding: 0 6px 14px; border-bottom: 1px solid rgba(244,160,192,0.18);
      margin-bottom: 4px;
    }
    .sidebar-brand .brand-mark {
      width: 32px; height: 32px; border-radius: 9px;
      background: linear-gradient(135deg,var(--pink),var(--lavender));
      display: flex; align-items: center; justify-content: center;
      font-size: 17px; flex-shrink: 0;
    }
    .sidebar-brand .brand-name {
      font-family: 'Cormorant Garamond',serif; font-size: 20px; font-weight: 600;
      background: linear-gradient(135deg,var(--pink),var(--lavender));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }
    .sidebar-brand .brand-sub { font-size: 9px; color: var(--text-3); letter-spacing: .05em; }
    .sidebar-clock {
      font-size: 22px; font-weight: 700; color: var(--text-1);
      font-family: 'Cormorant Garamond',serif; padding: 0 6px; letter-spacing: .02em;
    }
    .sidebar-nav { list-style: none; display: flex; flex-direction: column; gap: 3px; flex: 1; }
    .nav-item {
      display: flex; align-items: center; gap: 10px; width: 100%;
      padding: 10px 12px; border-radius: 12px; border: none;
      background: none; cursor: pointer; font-family: 'DM Sans',sans-serif;
      font-size: 13px; font-weight: 500; color: var(--text-2);
      transition: background .15s, color .15s; text-align: left;
    }
    .nav-item:hover { background: rgba(244,160,192,0.12); color: var(--text-1); }
    .nav-item.active {
      background: linear-gradient(135deg,rgba(244,160,192,0.22),rgba(196,168,232,0.18));
      color: var(--text-1); font-weight: 600;
    }
    .nav-item:focus-visible { outline: 2px solid var(--pink); outline-offset: 1px; }
    .nav-icon { font-size: 17px; flex-shrink: 0; }
    .nav-label { flex: 1; }
    .sidebar-footer {
      display: flex; flex-direction: column; gap: 6px;
      padding-top: 10px; border-top: 1px solid rgba(244,160,192,0.15);
    }
    .sidebar-weather {
      display: flex; align-items: center; gap: 6px; width: 100%;
      background: rgba(255,255,255,0.6); border: 1px solid var(--card-border);
      border-radius: 10px; padding: 7px 10px; cursor: pointer;
      font-size: 12px; font-family: 'DM Sans',sans-serif;
      color: var(--text-1); transition: all .2s; text-align: left;
      position: relative;
    }
    .sidebar-weather:hover { background: rgba(255,255,255,0.92); }
    .sidebar-weather .wx-loc { font-size: 10px; color: var(--text-2); margin-left: 6px; font-weight: 500; }
    .sidebar-weather .weather-popover {
      position: absolute; bottom: calc(100% + 8px); left: 0; right: 0;
    }

    /* ─── HUB SHELL ──────────────────────────────────────────── */
    .hub-shell { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }

    /* ─── TOP BAR (thin ambient strip) ─────────────────────── */
    .top-bar {
      display: flex; align-items: center; justify-content: space-between;
      padding: 5px 20px; flex-shrink: 0; gap: 12px;
      border-bottom: 1px solid var(--card-border);
    }
    .next-up { font-size: 11px; color: var(--text-2); font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .next-up strong { color: var(--text-1); }
    .next-up-label { color: var(--text-3); margin-right: 4px; }

    /* ─── VIEWS ──────────────────────────────────────────────── */
    .view { flex: 1; overflow-y: auto; padding: 14px 20px 28px; display: none; }
    .view.active { display: block; }
    .view:focus { outline: none; }

    /* ─── FAMILY OPS ─────────────────────────────────────────── */
    .ops-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 1160px; }
    .ops-greeting { font-family: 'Cormorant Garamond',serif; font-size: 24px; font-weight: 600; color: var(--text-1); margin-bottom: 2px; }
    .ops-weather-line { font-size: 12px; color: var(--text-2); margin-bottom: 14px; }
    .ops-section {
      background: var(--card); border: 1px solid var(--card-border);
      border-radius: var(--radius); padding: 12px 14px; margin-bottom: 12px;
      box-shadow: var(--card-shadow);
    }
    .ops-section-title {
      display: flex; align-items: center; justify-content: space-between;
      font-size: 12px; font-weight: 700; text-transform: uppercase;
      letter-spacing: .06em; color: var(--text-2); margin-bottom: 8px;
    }
    .ops-add-row { display: flex; gap: 8px; margin-top: 8px; }
    .ops-add-row input {
      flex: 1; background: rgba(255,255,255,0.6); border: 1px solid var(--card-border);
      border-radius: 9px; padding: 8px 11px; color: var(--text-1); font-size: 13px;
      font-family: 'DM Sans',sans-serif; outline: none; transition: border-color .2s;
    }
    .ops-add-row input:focus { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(244,160,192,0.12); }
    .ops-add-row input::placeholder { color: var(--text-3); }
    .family-note-input {
      width: 100%; background: rgba(255,255,255,0.6); border: 1px solid rgba(196,168,232,0.3);
      border-radius: 9px; padding: 9px 11px; font-size: 13px; color: var(--text-1);
      font-family: 'DM Sans',sans-serif; outline: none; transition: border-color .2s;
    }
    .family-note-input:focus { border-color: var(--lavender); }
    .family-note-input::placeholder { color: var(--text-3); }

    /* TODAY SCHEDULE */
    .schedule-item {
      display: flex; align-items: flex-start; gap: 8px; padding: 6px 4px;
      border-radius: 8px; font-size: 12px; transition: background .15s;
    }
    .schedule-item:hover { background: rgba(244,160,192,0.06); }
    .schedule-time { font-size: 10px; color: var(--text-3); min-width: 36px; padding-top: 1px; flex-shrink: 0; font-weight: 600; }
    .schedule-icon { font-size: 14px; flex-shrink: 0; }
    .schedule-title { flex: 1; color: var(--text-1); line-height: 1.35; }
    .schedule-dinner { color: var(--peach); font-weight: 500; }
    .schedule-recipe { font-size: 10px; color: var(--lavender); text-decoration: underline; margin-left: 5px; }
    .schedule-empty { font-size: 13px; color: var(--text-3); text-align: center; padding: 10px 0; font-family: 'Dancing Script',cursive; }

    /* ─── TODAY: KID PROGRESS + REMINDERS ──────────────────── */
    .today-section-label {
      font-size: 10px; font-weight: 700; letter-spacing: .06em;
      text-transform: uppercase; color: var(--text-3);
      margin-bottom: 6px; padding-top: 2px;
    }
    .today-kid-progress {
      border-top: 1px solid var(--card-border);
      margin-top: 10px; padding-top: 10px;
    }
    .today-stars-row {
      display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    }
    .today-stars-row .today-section-label { margin-bottom: 0; }
    .today-star-chip {
      font-size: 13px; font-weight: 600; color: var(--text-1);
      background: var(--s1); padding: 3px 10px; border-radius: 99px;
      cursor: pointer; transition: all .15s; white-space: nowrap;
    }
    .today-star-chip:hover { background: var(--lav-soft); transform: scale(1.05); }

    .today-reminders {
      border-top: 1px solid var(--card-border);
      margin-top: 10px; padding-top: 10px;
    }
    .today-reminder-row {
      font-size: 12px; color: var(--text-2);
      padding: 4px 6px; border-radius: 8px;
      display: flex; align-items: center; gap: 6px;
      transition: background .12s;
    }
    .today-reminder-row.urgent { color: var(--text-1); font-weight: 500; }
    .today-reminder-row[onclick]:hover { background: var(--s1); }
    .today-reminder-icon { flex-shrink: 0; font-size: 14px; }
    .today-reminder-row span { flex: 1; line-height: 1.35; }
    .today-reminder-arrow { font-size: 14px; color: var(--text-3); flex-shrink: 0; }

    /* ─── PANTRY ─────────────────────────────────────────────── */
    .pantry-layout { display: flex; flex-direction: column; gap: 18px; max-width: 900px; }
    .pantry-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; flex-wrap: wrap; gap: 8px; }
    .pantry-heading { font-family: 'Cormorant Garamond',serif; font-size: 18px; font-weight: 600; color: var(--text-1); }
    .meals-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; margin-bottom: 6px; }
    .meal-day-cell {
      background: var(--s0); border: 1.5px solid var(--card-border);
      border-radius: 8px; padding: 6px 4px 5px; text-align: center;
      cursor: pointer; transition: border-color .18s, background .18s, box-shadow .18s;
      display: flex; flex-direction: column; align-items: center; gap: 3px;
      min-height: 0;
    }
    .meal-day-cell:hover { background: var(--s-hover); border-color: var(--pink-mid); }
    .meal-day-cell:focus-visible { outline: 2px solid var(--pink); outline-offset: 1px; }
    .meal-day-cell.selected { border-color: var(--lavender); background: var(--lav-soft); }
    .meal-day-cell.today-cell { border-color: var(--pink-mid); }
    /* Assigned day — subtle green tint */
    .meal-day-cell.has-meal {
      border-color: rgba(142,203,168,0.55);
      background: rgba(142,203,168,0.08);
      box-shadow: 0 0 0 0.5px rgba(142,203,168,0.25) inset;
    }
    .meal-day-cell.has-meal:hover { border-color: rgba(142,203,168,0.8); background: rgba(142,203,168,0.14); }
    .meal-day-cell.today-cell.has-meal { border-color: rgba(142,203,168,0.7); }
    .meal-dow { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); line-height: 1; }
    .meal-emoji { font-size: 20px; line-height: 1; }
    .meal-name { font-size: 9px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; padding: 0 3px; line-height: 1.3; }
    .meal-add-hint { font-size: 14px; color: var(--text-3); opacity: .25; }
    .meal-detail {
      background: var(--card); border: 1px solid var(--lav-mid);
      border-radius: var(--radius); padding: 14px 16px; margin-bottom: 10px;
      box-shadow: var(--card-shadow); animation: slideUp .2s ease;
    }
    .meal-detail-name { font-size: 12px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 10px; }
    .meal-detail-form { display: flex; flex-direction: column; gap: 7px; }
    .meal-input {
      background: rgba(255,255,255,0.7); border: 1px solid var(--card-border);
      border-radius: 9px; padding: 8px 11px; font-size: 13px;
      font-family: 'DM Sans',sans-serif; color: var(--text-1); outline: none;
      transition: border-color .2s; width: 100%;
    }
    .meal-input:focus { border-color: var(--lavender); }
    .meal-input::placeholder { color: var(--text-3); }
    .meal-detail-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
    .meal-rating { display: flex; gap: 4px; }
    .rating-btn {
      background: none; border: 1.5px solid transparent; border-radius: 8px;
      font-size: 16px; cursor: pointer; padding: 3px 5px; transition: all .15s;
    }
    .rating-btn:hover { border-color: var(--lav-mid); background: var(--lav-soft); }
    .rating-btn.active { border-color: var(--lavender); background: var(--lav-soft); }
    .pantry-coverage { font-size: 11px; color: var(--text-2); display: flex; align-items: center; gap: 10px; padding: 4px 0; }
    .coverage-bar { flex: 1; height: 5px; border-radius: 999px; background: rgba(244,160,192,0.2); overflow: hidden; }
    .coverage-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg,var(--mint),var(--lavender)); transition: width .4s; }
    .pantry-shop-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
    .pantry-shop-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

    /* ─── REWARDS ─────────────────────────────────────────────── */
    .rewards-layout { display: flex; flex-direction: column; gap: 18px; max-width: 900px; }
    .rewards-kids { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .kid-card { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--card-shadow); }
    .kid-header { padding: 14px 16px 10px; border-bottom: 1px solid rgba(244,160,192,0.1); }
    .kid-name { font-family: 'Cormorant Garamond',serif; font-size: 20px; font-weight: 600; color: var(--text-1); margin-bottom: 6px; }
    .kid-stars-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
    .kid-stars { display: flex; gap: 2px; flex-wrap: wrap; flex: 1; }
    .kid-star { font-size: 12px; opacity: .15; transition: opacity .25s, transform .25s; }
    .kid-star.earned { opacity: 1; }
    .kid-star-count { font-size: 12px; font-weight: 700; color: var(--text-2); white-space: nowrap; }
    .kid-streak { font-size: 11px; color: var(--text-3); margin-bottom: 3px; }
    .kid-motivation { font-size: 12px; color: var(--text-2); font-style: italic; font-family: 'Dancing Script',cursive; }
    .routine-section { padding: 10px 16px; border-bottom: 1px solid rgba(244,160,192,0.07); }
    .routine-section:last-child { border-bottom: none; padding-bottom: 14px; }
    .routine-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-2); margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; }
    .routine-complete-badge { font-size: 9px; background: var(--mint-soft); border: 1px solid var(--mint-mid); color: var(--mint); border-radius: 999px; padding: 2px 7px; font-weight: 600; }
    .task-cards { display: flex; flex-wrap: wrap; gap: 7px; }
    .task-card {
      width: 68px; min-height: 76px; border-radius: 11px;
      background: var(--s2); border: 2px solid rgba(244,160,192,0.15);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 3px; padding: 7px 3px; cursor: pointer;
      transition: all .18s; position: relative; user-select: none;
      -webkit-tap-highlight-color: transparent;
    }
    .task-card:hover { background: var(--s-hover); border-color: var(--pink-mid); transform: translateY(-1px); }
    .task-card.done { background: var(--mint-soft); border-color: var(--mint-mid); transform: none; }
    .task-card:focus-visible { outline: 2px solid var(--pink); outline-offset: 1px; }
    .task-card-emoji { font-size: 32px; line-height: 1; transition: transform .18s; }
    .task-card.done .task-card-emoji { transform: scale(0.88); }
    .task-card-label { font-size: 8px; color: var(--text-2); text-align: center; line-height: 1.3; font-weight: 600; padding: 0 2px; }
    .task-card-check { position: absolute; top: 4px; right: 5px; font-size: 11px; opacity: 0; transition: opacity .18s; }
    .task-card.done .task-card-check { opacity: 1; }
    .prize-ladder-card { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--card-shadow); }
    .prize-heading { font-size: 13px; font-weight: 700; color: var(--text-1); margin-bottom: 10px; }
    .prize-kids-totals { font-size: 11px; color: var(--text-3); margin-bottom: 10px; }
    .prize-tiers { display: flex; flex-direction: column; gap: 7px; }
    .prize-tier { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 10px; border: 1px solid rgba(244,160,192,0.12); background: var(--s0); }
    .prize-tier.reached { background: var(--mint-soft); border-color: var(--mint-mid); }
    .prize-tier-icon { font-size: 20px; flex-shrink: 0; }
    .prize-tier-info { flex: 1; }
    .prize-tier-name { font-size: 12px; font-weight: 600; color: var(--text-1); }
    .prize-tier-stars { font-size: 10px; color: var(--text-3); }
    .prize-tier-bar { flex: 1; height: 5px; border-radius: 999px; background: rgba(196,168,232,0.2); overflow: hidden; max-width: 100px; }
    .prize-tier-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg,var(--mint),var(--lavender)); transition: width .5s; }
    .claim-btn { font-size: 10px; padding: 5px 10px; border-radius: 7px; background: linear-gradient(135deg,var(--mint),var(--lavender)); border: none; color: #fff; font-weight: 600; cursor: pointer; font-family: 'DM Sans',sans-serif; white-space: nowrap; }
    .claim-btn:hover { opacity: .9; }

    /* ─── MINECRAFT REWARDS THEME ────────────────────────────── */
    #view-rewards { --mc-dirt: #6B5344; --mc-dirt-light: #8B7355; --mc-stone: #7F7F7F; --mc-stone-dark: #555555; --mc-green: #5BAF4A; --mc-green-dark: #3A6B30; --mc-green-bright: #7FCC19; --mc-gold: #FFC107; --mc-diamond: #4FC1E9; --mc-obsidian: #1A0A2E; --mc-slot: #1A1A2E; --mc-slot-border: #2A2A44; --mc-text: #E8E8E8; --mc-text-dim: #A0A0A0; --mc-enchant: #A855F7; --mc-netherite: #4A3C38; --mc-xp-bg: #1A2B1A; --mc-xp-fill: #80E040; }

    #view-rewards .rewards-layout { background: linear-gradient(180deg, rgba(26,20,15,0.95) 0%, rgba(20,15,12,0.98) 100%); border: 3px solid var(--mc-dirt); border-radius: 6px; padding: 20px; box-shadow: inset 0 0 40px rgba(0,0,0,0.3), 0 8px 32px rgba(0,0,0,0.5); position: relative; max-width: 960px; }
    #view-rewards .rewards-layout::before { content:''; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(rgba(107,83,68,0.06) 1px,transparent 1px),linear-gradient(90deg,rgba(107,83,68,0.06) 1px,transparent 1px); background-size:16px 16px; border-radius:4px; }

    .mc-header { text-align:center; margin-bottom:20px; position:relative; z-index:1; }
    .mc-title { font-family:'Press Start 2P',monospace; font-size:16px; color:var(--mc-green-bright); text-shadow: 2px 2px 0 #1A3D10, 0 0 10px rgba(91,175,74,0.3); margin-bottom:4px; letter-spacing:1px; }
    .mc-subtitle { font-family:'VT323',monospace; font-size:16px; color:var(--mc-text-dim); }
    .mc-edit-btn { position:absolute; top:0; right:0; background:var(--mc-slot); border:2px solid var(--mc-slot-border); border-radius:4px; color:var(--mc-text-dim); font-family:'VT323',monospace; font-size:16px; padding:4px 12px; cursor:pointer; transition:all .15s; }
    .mc-edit-btn:hover { border-color:var(--mc-green); color:var(--mc-green-bright); background:rgba(91,175,74,0.1); }

    .mc-kid-card { background:rgba(26,26,46,0.9); border:3px solid var(--mc-stone-dark); border-radius:4px; overflow:hidden; position:relative; z-index:1; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 4px 16px rgba(0,0,0,0.3); transition: border-color .3s, box-shadow .3s; }
    .mc-kid-card::after { content:''; position:absolute; inset:0; pointer-events:none; border:1px solid rgba(255,255,255,0.03); border-radius:3px; }

    /* ── Level card themes ── */
    .mc-kid-card.mc-theme-stone { border-color:#9E9E9E; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 16px rgba(0,0,0,0.35), 0 0 0 1px rgba(158,158,158,0.2); }
    .mc-kid-card.mc-theme-iron  { border-color:#7B9AAD; box-shadow: inset 0 1px 0 rgba(123,154,173,0.15), 0 4px 20px rgba(0,0,0,0.3), 0 0 12px rgba(123,154,173,0.2); }
    .mc-kid-card.mc-theme-iron::before { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg,rgba(123,154,173,0.07) 0%,transparent 40%,rgba(123,154,173,0.07) 100%); animation:mc-shimmer 3s ease-in-out infinite; z-index:0; }
    .mc-kid-card.mc-theme-diamond { border-color:#5BC8F5; box-shadow: inset 0 1px 0 rgba(91,200,245,0.2), 0 4px 28px rgba(0,0,0,0.3), 0 0 18px rgba(91,200,245,0.18); }
    .mc-kid-card.mc-theme-diamond::before { content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at 20% 10%,rgba(91,200,245,0.1) 0%,transparent 55%),radial-gradient(ellipse at 80% 90%,rgba(91,200,245,0.08) 0%,transparent 55%); animation:mc-sparkle 2.5s ease-in-out infinite alternate; z-index:0; }
    .mc-kid-card.mc-theme-netherite { border-color:#9B59B6; box-shadow: inset 0 1px 0 rgba(155,89,182,0.25), 0 4px 32px rgba(0,0,0,0.4), 0 0 24px rgba(155,89,182,0.22); }
    .mc-kid-card.mc-theme-netherite::before { content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at 50% 0%,rgba(155,89,182,0.15) 0%,transparent 65%); animation:mc-pulse 2.5s ease-in-out infinite; z-index:0; }

    @keyframes mc-shimmer { 0%,100%{opacity:.4} 50%{opacity:1} }
    @keyframes mc-sparkle { 0%{opacity:.5} 100%{opacity:1} }
    @keyframes mc-pulse   { 0%,100%{opacity:.4} 50%{opacity:1} }

    /* ── Companion ── */
    .mc-kid-companion { font-size:18px; position:absolute; bottom:-4px; right:-6px; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.6)); animation:mc-bob 2.2s ease-in-out infinite; line-height:1; pointer-events:none; }
    @keyframes mc-bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }

    .mc-kid-header { padding:14px 16px 12px; display:flex; align-items:center; gap:12px; border-bottom:2px solid rgba(91,175,74,0.15); background:rgba(0,0,0,0.2); }
    .mc-kid-avatar { font-size:32px; width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:var(--mc-slot); border:2px solid var(--mc-slot-border); border-radius:4px; box-shadow: inset 0 -2px 0 rgba(0,0,0,0.3); }
    .mc-kid-info { flex:1; }
    .mc-kid-name { font-family:'Press Start 2P',monospace; font-size:11px; color:var(--mc-text); margin-bottom:4px; }
    .mc-kid-meta { font-family:'VT323',monospace; font-size:15px; color:var(--mc-text-dim); display:flex; align-items:center; gap:8px; }
    .mc-level-badge { display:inline-flex; align-items:center; gap:4px; background:rgba(91,175,74,0.15); border:1px solid rgba(91,175,74,0.3); border-radius:3px; padding:2px 8px; font-family:'Press Start 2P',monospace; font-size:7px; color:var(--mc-green-bright); }

    .mc-xp-wrap { padding:8px 16px; background:rgba(0,0,0,0.15); }
    .mc-xp-label { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
    .mc-xp-level { font-family:'Press Start 2P',monospace; font-size:8px; color:var(--mc-green-bright); }
    .mc-xp-count { font-family:'VT323',monospace; font-size:15px; color:var(--mc-gold); display:flex; align-items:center; gap:4px; }
    .mc-xp-bar { height:10px; background:var(--mc-xp-bg); border:2px solid #0D1A0D; border-radius:2px; overflow:hidden; position:relative; }
    .mc-xp-fill { height:100%; background:linear-gradient(180deg, var(--mc-xp-fill) 0%, #60B030 50%, #40A020 100%); border-radius:1px; transition:width .5s cubic-bezier(.25,.8,.25,1); position:relative; }
    .mc-xp-fill::after { content:''; position:absolute; top:0; left:0; right:0; height:40%; background:rgba(255,255,255,0.2); }
    .mc-xp-segments { position:absolute; inset:0; display:flex; pointer-events:none; }
    .mc-xp-seg { flex:1; border-right:1px solid rgba(0,0,0,0.25); }
    .mc-xp-seg:last-child { border-right:none; }

    .mc-quest-section { padding:10px 16px 12px; border-bottom:1px solid rgba(91,175,74,0.08); }
    .mc-quest-section:last-child { border-bottom:none; }
    .mc-quest-section.mc-section-just-done { animation:mc-section-glow 1.5s ease-out forwards; }
    @keyframes mc-section-glow { 0%{background:rgba(91,175,74,0.32);box-shadow:0 0 24px rgba(91,175,74,0.65) inset} 100%{background:transparent;box-shadow:none} }
    .mc-quest-title { font-family:'Press Start 2P',monospace; font-size:8px; color:var(--mc-gold); margin-bottom:8px; display:flex; align-items:center; gap:8px; text-transform:uppercase; letter-spacing:0.5px; }
    .mc-quest-stars { font-family:'VT323',monospace; font-size:14px; color:var(--mc-green); }
    .mc-quest-complete { font-family:'VT323',monospace; font-size:13px; color:var(--mc-green-bright); background:rgba(91,175,74,0.15); border:1px solid rgba(91,175,74,0.3); border-radius:3px; padding:1px 8px; animation:mc-pulse 2s ease-in-out infinite; }
    @keyframes mc-pulse { 0%,100% { opacity:1; } 50% { opacity:.7; } }

    .mc-task-grid { display:flex; flex-wrap:wrap; gap:8px; }
    .mc-task-slot { width:76px; min-height:82px; background:var(--mc-slot); border:2px solid var(--mc-slot-border); border-radius:4px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:6px 4px; cursor:pointer; transition:all .18s; position:relative; user-select:none; -webkit-tap-highlight-color:transparent; box-shadow:inset 0 -2px 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05); }
    .mc-task-slot:hover { border-color:var(--mc-green); background:rgba(91,175,74,0.08); transform:translateY(-2px); box-shadow:inset 0 -2px 0 rgba(0,0,0,0.3), 0 4px 12px rgba(91,175,74,0.2); }
    .mc-task-slot:active { transform:translateY(0); }

    .mc-task-slot.done { border-color:var(--mc-green); background:rgba(91,175,74,0.12); animation:mc-enchant 3s ease-in-out infinite; }
    @keyframes mc-enchant { 0%,100% { box-shadow:inset 0 -2px 0 rgba(0,0,0,0.3), 0 0 8px rgba(91,175,74,0.3); } 50% { box-shadow:inset 0 -2px 0 rgba(0,0,0,0.3), 0 0 16px rgba(168,85,247,0.25), 0 0 8px rgba(91,175,74,0.4); } }
    .mc-task-slot.done::before { content:''; position:absolute; inset:-1px; border-radius:4px; background:linear-gradient(135deg, transparent 40%, rgba(168,85,247,0.1) 50%, transparent 60%); background-size:200% 200%; animation:mc-shimmer 2s linear infinite; pointer-events:none; }
    @keyframes mc-shimmer { 0% { background-position:200% 200%; } 100% { background-position:-200% -200%; } }

    .mc-task-emoji { font-size:34px; line-height:1; transition:transform .15s; filter:drop-shadow(0 2px 2px rgba(0,0,0,0.3)); }
    .mc-task-slot.done .mc-task-emoji { transform:scale(0.9); }
    .mc-task-label { font-family:'VT323',monospace; font-size:13px; color:var(--mc-text-dim); text-align:center; line-height:1.2; }
    .mc-task-slot.done .mc-task-label { color:var(--mc-green-bright); }
    .mc-task-check { position:absolute; top:3px; right:4px; font-size:12px; opacity:0; transition:opacity .15s; color:var(--mc-green-bright); }
    .mc-task-slot.done .mc-task-check { opacity:1; }

    .mc-bonus-section { padding:10px 16px 14px; }
    .mc-bonus-toggle { font-family:'Press Start 2P',monospace; font-size:8px; color:var(--mc-enchant); cursor:pointer; display:flex; align-items:center; gap:8px; margin-bottom:8px; background:none; border:none; padding:0; }
    .mc-bonus-toggle:hover { color:#C084FC; }
    .mc-bonus-toggle .arrow { transition:transform .2s; display:inline-block; font-size:10px; }
    .mc-bonus-toggle .arrow.open { transform:rotate(90deg); }
    .mc-bonus-grid { display:flex; flex-wrap:wrap; gap:8px; }
    .mc-bonus-grid.collapsed { display:none; }

    .mc-streak { display:flex; align-items:center; gap:6px; margin-top:8px; padding:6px 16px 10px; }
    .mc-streak-icon { font-size:18px; }
    .mc-streak-text { font-family:'VT323',monospace; font-size:15px; color:var(--mc-gold); }
    .mc-streak-count { font-family:'Press Start 2P',monospace; font-size:10px; color:#FF6B35; text-shadow:0 0 6px rgba(255,107,53,0.4); }

    .mc-badges { display:flex; flex-wrap:wrap; gap:6px; padding:4px 16px 10px; }
    .mc-badge { display:inline-flex; align-items:center; gap:4px; background:rgba(168,85,247,0.1); border:1px solid rgba(168,85,247,0.25); border-radius:3px; padding:3px 8px; font-family:'VT323',monospace; font-size:13px; color:var(--mc-enchant); }
    .mc-badge.locked { opacity:0.3; filter:grayscale(1); }

    .mc-enchant-table { background:rgba(26,26,46,0.9); border:3px solid var(--mc-stone-dark); border-radius:4px; padding:16px; position:relative; z-index:1; box-shadow:inset 0 1px 0 rgba(255,255,255,0.05), 0 4px 16px rgba(0,0,0,0.3); }
    .mc-enchant-title { font-family:'Press Start 2P',monospace; font-size:11px; color:var(--mc-enchant); text-align:center; margin-bottom:14px; text-shadow:0 0 10px rgba(168,85,247,0.3); }
    .mc-prize-row { display:flex; align-items:center; gap:12px; padding:10px; border-radius:4px; background:rgba(0,0,0,0.2); border:1px solid rgba(255,255,255,0.04); margin-bottom:6px; transition:all .2s; }
    .mc-prize-row:last-child { margin-bottom:0; }
    .mc-prize-row.reached { background:rgba(91,175,74,0.1); border-color:rgba(91,175,74,0.25); }
    .mc-prize-icon { font-size:24px; width:36px; text-align:center; flex-shrink:0; }
    .mc-prize-info { flex:1; }
    .mc-prize-name { font-family:'VT323',monospace; font-size:17px; color:var(--mc-text); }
    .mc-prize-cost { font-family:'VT323',monospace; font-size:14px; color:var(--mc-gold); display:flex; align-items:center; gap:4px; }
    .mc-prize-progress { flex:0 0 80px; }
    .mc-prize-bar { height:6px; background:var(--mc-xp-bg); border:1px solid #0D1A0D; border-radius:2px; overflow:hidden; margin-bottom:2px; }
    .mc-prize-bar-fill { height:100%; background:var(--mc-xp-fill); border-radius:1px; transition:width .4s; }
    .mc-prize-kids { font-family:'VT323',monospace; font-size:12px; color:var(--mc-text-dim); text-align:right; }

    .mc-emerald { display:inline-block; width:14px; height:14px; vertical-align:middle; margin-top:-2px; }
    .mc-emerald-sm { width:11px; height:11px; }
    .mc-emerald-lg { width:18px; height:18px; }

    /* Minecraft edit modal */
    .mc-editor-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:500; display:flex; align-items:center; justify-content:center; padding:20px; }
    .mc-editor-overlay.hidden { display:none; }
    .mc-editor-box { background:rgba(26,26,46,0.98); border:3px solid var(--mc-stone-dark); border-radius:6px; padding:20px; max-width:600px; width:100%; max-height:80vh; overflow-y:auto; }
    .mc-editor-box h2 { font-family:'Press Start 2P',monospace; font-size:12px; color:var(--mc-green-bright); margin-bottom:16px; }
    .mc-editor-section { margin-bottom:16px; }
    .mc-editor-section h3 { font-family:'VT323',monospace; font-size:18px; color:var(--mc-gold); margin-bottom:8px; }
    .mc-editor-task { display:flex; align-items:center; gap:8px; margin-bottom:6px; padding:6px 8px; background:var(--mc-slot); border:1px solid var(--mc-slot-border); border-radius:4px; }
    .mc-editor-task input { flex:1; background:rgba(255,255,255,0.06); border:1px solid var(--mc-slot-border); border-radius:3px; color:var(--mc-text); font-family:'VT323',monospace; font-size:16px; padding:4px 8px; outline:none; }
    .mc-editor-task input:focus { border-color:var(--mc-green); }
    .mc-editor-task .emoji-pick { font-size:22px; cursor:pointer; width:32px; text-align:center; }
    .mc-editor-del { background:none; border:none; color:#E53935; font-size:16px; cursor:pointer; padding:2px 6px; border-radius:3px; }
    .mc-editor-del:hover { background:rgba(229,57,53,0.15); }
    .mc-editor-add { font-family:'VT323',monospace; font-size:16px; color:var(--mc-green); background:none; border:1px dashed rgba(91,175,74,0.3); border-radius:4px; padding:6px 12px; cursor:pointer; width:100%; text-align:center; margin-top:4px; }
    .mc-editor-add:hover { border-color:var(--mc-green); background:rgba(91,175,74,0.05); }
    .mc-editor-stars { display:flex; align-items:center; gap:6px; margin-top:4px; }
    .mc-editor-stars label { font-family:'VT323',monospace; font-size:15px; color:var(--mc-text-dim); }
    .mc-editor-stars input[type=number] { width:50px; background:rgba(255,255,255,0.06); border:1px solid var(--mc-slot-border); border-radius:3px; color:var(--mc-gold); font-family:'VT323',monospace; font-size:16px; padding:3px 6px; text-align:center; }
    .mc-editor-btn { font-family:'Press Start 2P',monospace; font-size:9px; padding:8px 18px; border:none; border-radius:4px; cursor:pointer; margin-right:8px; }
    .mc-editor-save { background:linear-gradient(180deg,var(--mc-green) 0%,var(--mc-green-dark) 100%); color:white; border-bottom:3px solid #1A3D10; }
    .mc-editor-save:hover { opacity:.9; }
    .mc-editor-cancel { background:var(--mc-slot); color:var(--mc-text-dim); border:2px solid var(--mc-slot-border); }
    .mc-editor-cancel:hover { border-color:var(--mc-text-dim); }

    /* ─── PHASE 8: GAME ENHANCEMENTS ─────────────────────────── */

    /* Sound toggle button */
    .mc-sound-btn { position:absolute; top:0; right:70px; background:var(--mc-slot); border:2px solid var(--mc-slot-border); border-radius:4px; color:var(--mc-text-dim); font-size:16px; padding:4px 10px; cursor:pointer; transition:all .15s; }
    .mc-sound-btn:hover { border-color:var(--mc-green); background:rgba(91,175,74,0.1); }

    /* Clickable avatar */
    .mc-avatar-clickable { cursor:pointer; transition:all .2s; position:relative; }
    .mc-avatar-clickable:hover { transform:scale(1.15); box-shadow:0 0 12px rgba(168,85,247,0.4); border-color:var(--mc-enchant) !important; }
    .mc-avatar-clickable::after { content:'✏'; position:absolute; bottom:-2px; right:-2px; font-size:10px; background:var(--mc-enchant); color:white; border-radius:50%; width:16px; height:16px; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .2s; line-height:1; }
    .mc-avatar-clickable:hover::after { opacity:1; }

    /* Kid Profile Modal */
    .mc-profile-box { max-width:480px; text-align:center; }
    .mc-profile-header { display:flex; align-items:center; gap:14px; padding-bottom:14px; border-bottom:2px solid rgba(91,175,74,0.15); margin-bottom:14px; position:relative; }
    .mc-profile-avatar-big { font-size:56px; width:72px; height:72px; display:flex; align-items:center; justify-content:center; background:var(--mc-slot); border:3px solid var(--mc-enchant); border-radius:6px; box-shadow:0 0 20px rgba(168,85,247,0.3), inset 0 -3px 0 rgba(0,0,0,0.3); animation:mc-profile-glow 3s ease-in-out infinite; }
    @keyframes mc-profile-glow { 0%,100% { box-shadow:0 0 20px rgba(168,85,247,0.3), inset 0 -3px 0 rgba(0,0,0,0.3); } 50% { box-shadow:0 0 30px rgba(168,85,247,0.5), 0 0 10px rgba(91,175,74,0.2), inset 0 -3px 0 rgba(0,0,0,0.3); } }
    .mc-profile-info { text-align:left; flex:1; }
    .mc-profile-name { font-family:'Press Start 2P',monospace; font-size:14px; color:var(--mc-text); margin-bottom:4px; }
    .mc-profile-meta { font-family:'VT323',monospace; font-size:17px; color:var(--mc-text-dim); }
    .mc-profile-close { position:absolute; top:0; right:0; background:none; border:none; color:var(--mc-text-dim); font-size:24px; cursor:pointer; padding:4px 8px; }
    .mc-profile-close:hover { color:var(--mc-text); }

    .mc-profile-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:16px; }
    .mc-profile-stat { background:var(--mc-slot); border:2px solid var(--mc-slot-border); border-radius:4px; padding:10px 6px; }
    .mc-profile-stat-val { font-family:'Press Start 2P',monospace; font-size:12px; color:var(--mc-green-bright); margin-bottom:4px; }
    .mc-profile-stat-lbl { font-family:'VT323',monospace; font-size:13px; color:var(--mc-text-dim); }

    .mc-profile-badges { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-bottom:16px; padding:10px; background:rgba(0,0,0,0.2); border-radius:4px; }

    /* Avatar Picker Grid */
    .mc-avatar-picker-title { font-family:'Press Start 2P',monospace; font-size:9px; color:var(--mc-enchant); margin-bottom:10px; text-transform:uppercase; letter-spacing:1px; }
    .mc-avatar-grid { display:grid; grid-template-columns:repeat(8,1fr); gap:6px; max-height:220px; overflow-y:auto; padding:8px; background:rgba(0,0,0,0.2); border-radius:4px; border:1px solid var(--mc-slot-border); }
    .mc-avatar-option { font-size:28px; width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:var(--mc-slot); border:2px solid var(--mc-slot-border); border-radius:4px; cursor:pointer; transition:all .15s; }
    .mc-avatar-option:hover { transform:scale(1.15); border-color:var(--mc-green); background:rgba(91,175,74,0.1); box-shadow:0 0 8px rgba(91,175,74,0.3); }
    .mc-avatar-option.selected { border-color:var(--mc-enchant); background:rgba(168,85,247,0.15); box-shadow:0 0 12px rgba(168,85,247,0.4); animation:mc-selected-pulse 2s ease-in-out infinite; }
    @keyframes mc-selected-pulse { 0%,100% { box-shadow:0 0 12px rgba(168,85,247,0.4); } 50% { box-shadow:0 0 20px rgba(168,85,247,0.6); } }

    /* Daily Challenge */
    .mc-daily-challenge { margin:0 16px; padding:10px 12px; background:linear-gradient(135deg, rgba(168,85,247,0.1) 0%, rgba(91,175,74,0.08) 100%); border:2px dashed rgba(168,85,247,0.3); border-radius:6px; margin-bottom:4px; }
    .mc-daily-challenge.done { border-style:solid; border-color:var(--mc-green); background:rgba(91,175,74,0.08); }
    .mc-daily-header { display:flex; align-items:center; gap:6px; margin-bottom:6px; }
    .mc-daily-icon { font-size:16px; animation:mc-daily-flash 2s ease-in-out infinite; }
    @keyframes mc-daily-flash { 0%,100% { opacity:1; } 50% { opacity:0.5; } }
    .mc-daily-challenge.done .mc-daily-icon { animation:none; }
    .mc-daily-title { font-family:'Press Start 2P',monospace; font-size:7px; color:var(--mc-enchant); text-transform:uppercase; letter-spacing:0.5px; }
    .mc-daily-reward { font-family:'VT323',monospace; font-size:13px; color:var(--mc-gold); margin-left:auto; display:flex; align-items:center; gap:3px; }
    .mc-daily-task { display:flex; align-items:center; gap:8px; width:100%; background:var(--mc-slot); border:2px solid var(--mc-slot-border); border-radius:4px; padding:8px 10px; cursor:pointer; transition:all .15s; text-align:left; }
    .mc-daily-task:hover { border-color:var(--mc-enchant); background:rgba(168,85,247,0.08); }
    .mc-daily-task.done { border-color:var(--mc-green); background:rgba(91,175,74,0.12); }
    .mc-daily-check { width:20px; height:20px; border:2px solid var(--mc-slot-border); border-radius:3px; display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--mc-green-bright); flex-shrink:0; }
    .mc-daily-task.done .mc-daily-check { border-color:var(--mc-green); background:rgba(91,175,74,0.2); }
    .mc-daily-emoji { font-size:22px; }
    .mc-daily-label { font-family:'VT323',monospace; font-size:16px; color:var(--mc-text); flex:1; }
    .mc-daily-task.done .mc-daily-label { text-decoration:line-through; color:var(--mc-green-bright); }

    /* Prize Redeem */
    .mc-redeem-btn { background:linear-gradient(180deg, #FFC107 0%, #FF9800 100%); border:2px solid #E65100; border-radius:4px; color:#1A0A2E; font-size:12px; padding:3px 6px; cursor:pointer; transition:all .15s; animation:mc-redeem-pulse 2s ease-in-out infinite; flex-shrink:0; }
    .mc-redeem-btn:hover { transform:scale(1.15); box-shadow:0 0 10px rgba(255,193,7,0.5); }
    @keyframes mc-redeem-pulse { 0%,100% { box-shadow:0 0 4px rgba(255,193,7,0.3); } 50% { box-shadow:0 0 12px rgba(255,193,7,0.5); } }

    .mc-redeem-box { max-width:380px; text-align:center; }
    .mc-redeem-header { margin-bottom:16px; }
    .mc-redeem-icon { font-size:56px; margin-bottom:8px; animation:mc-redeem-bounce 1s ease-in-out infinite; }
    @keyframes mc-redeem-bounce { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }
    .mc-redeem-title { font-family:'Press Start 2P',monospace; font-size:12px; color:var(--mc-gold); }
    .mc-redeem-detail { background:rgba(0,0,0,0.2); border-radius:4px; padding:12px; margin-bottom:12px; }
    .mc-redeem-prize-name { font-family:'VT323',monospace; font-size:20px; color:var(--mc-text); margin-bottom:4px; }
    .mc-redeem-cost { font-family:'VT323',monospace; font-size:16px; color:var(--mc-gold); display:flex; align-items:center; justify-content:center; gap:4px; margin-bottom:4px; }
    .mc-redeem-for { font-family:'VT323',monospace; font-size:16px; color:var(--mc-text-dim); }
    .mc-redeem-balance { display:flex; justify-content:space-around; font-family:'VT323',monospace; font-size:15px; color:var(--mc-text-dim); }
    .mc-redeem-confirm { animation:mc-redeem-pulse 1.5s ease-in-out infinite; font-size:10px !important; }

    /* Boss Battle Overlay */
    /* ── Boss Battle — cinematic two-phase ── */
    .mc-boss-overlay { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.92); }
    .mc-boss-overlay.hidden { display:none; }
    .mc-boss-content { text-align:center; max-width:380px; width:90%; animation:mc-boss-enter 0.5s cubic-bezier(0.175,0.885,0.32,1.275); }
    @keyframes mc-boss-enter { 0% { transform:scale(0.4); opacity:0; } 100% { transform:scale(1); opacity:1; } }
    .mc-boss-phase { display:flex; flex-direction:column; align-items:center; }
    .mc-boss-phase.hidden { display:none; }

    /* Phase 1 — encounter */
    .mc-boss-encounter-label { font-family:'Press Start 2P',monospace; font-size:8px; color:#FF4444; letter-spacing:2px; margin-bottom:12px; animation:mc-pulse 1s ease-in-out infinite; }
    .mc-boss-name { font-family:'Press Start 2P',monospace; font-size:14px; color:var(--mc-text); margin:8px 0 16px; text-shadow:0 0 12px rgba(255,68,68,0.5); }
    .mc-boss-icon { font-size:90px; filter:drop-shadow(0 0 24px rgba(255,68,68,0.5)); }
    .mc-boss-menace { animation:mc-boss-menace 0.6s ease-in-out infinite alternate; }
    @keyframes mc-boss-menace { 0% { transform:scale(1) rotate(-3deg); } 100% { transform:scale(1.06) rotate(3deg); } }
    .mc-boss-dead { animation:mc-boss-die 0.5s ease-out forwards; }
    @keyframes mc-boss-die { 0% { transform:scale(1) rotate(0); opacity:1; } 50% { transform:scale(1.3) rotate(15deg); } 100% { transform:scale(0) rotate(45deg); opacity:0; } }

    /* HP bar */
    .mc-boss-hp-wrap { width:260px; margin:16px 0 12px; }
    .mc-boss-hp-label { font-family:'Press Start 2P',monospace; font-size:7px; color:#FF4444; margin-bottom:4px; text-align:left; }
    .mc-boss-hp-bar { height:18px; background:rgba(0,0,0,0.4); border:2px solid #FF4444; border-radius:3px; overflow:hidden; }
    .mc-boss-hp-fill { height:100%; background:linear-gradient(90deg, #FF1111 0%, #FF4444 50%, #FF6644 100%); border-radius:2px; box-shadow:0 0 8px rgba(255,68,68,0.5); }
    .mc-boss-team { font-family:'VT323',monospace; font-size:18px; color:var(--mc-text-dim); }

    /* Phase 2 — victory */
    .mc-boss-title { font-family:'Press Start 2P',monospace; font-size:18px; color:var(--mc-gold); text-shadow:0 0 20px rgba(255,193,7,0.6), 2px 2px 0 #1A0A2E; margin:12px 0 8px; letter-spacing:2px; animation:mc-boss-enter 0.5s cubic-bezier(0.175,0.885,0.32,1.275); }
    .mc-boss-sub { font-family:'VT323',monospace; font-size:22px; color:var(--mc-text); margin-bottom:6px; }
    .mc-boss-msg { font-family:'VT323',monospace; font-size:17px; color:var(--mc-green-bright); margin-bottom:6px; }
    .mc-boss-reward { font-family:'Press Start 2P',monospace; font-size:10px; color:var(--mc-gold); display:flex; align-items:center; justify-content:center; gap:6px; animation:mc-pulse 2s ease-in-out infinite; }
    .mc-boss-close-btn { margin-top:20px !important; }

    /* ── Weekly Recap Modal ── */
    .mc-recap-box { max-width:420px; }
    .mc-recap-header { text-align:center; margin-bottom:16px; }
    .mc-recap-title { font-family:'Press Start 2P',monospace; font-size:13px; color:var(--mc-gold); text-shadow:0 0 12px rgba(255,193,7,0.4); margin-bottom:4px; }
    .mc-recap-week { font-family:'VT323',monospace; font-size:16px; color:var(--mc-text-dim); }
    .mc-recap-kid { background:rgba(0,0,0,0.2); border:1px solid var(--mc-slot-border); border-radius:6px; padding:12px; margin-bottom:10px; }
    .mc-recap-kid-header { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
    .mc-recap-avatar { font-size:36px; width:48px; height:48px; display:flex; align-items:center; justify-content:center; background:var(--mc-slot); border:2px solid var(--mc-slot-border); border-radius:4px; flex-shrink:0; }
    .mc-recap-kid-name { font-family:'Press Start 2P',monospace; font-size:10px; color:var(--mc-text); margin-bottom:3px; }
    .mc-recap-kid-level { font-family:'VT323',monospace; font-size:15px; color:var(--mc-text-dim); }
    .mc-recap-em { font-family:'Press Start 2P',monospace; font-size:14px; color:var(--mc-green-bright); margin-left:auto; display:flex; align-items:center; gap:4px; }
    .mc-recap-stats { display:flex; flex-wrap:wrap; gap:6px; }
    .mc-recap-stat { font-family:'VT323',monospace; font-size:14px; color:var(--mc-text-dim); background:var(--mc-slot); border:1px solid var(--mc-slot-border); border-radius:3px; padding:2px 8px; }
    .mc-recap-badge { color:var(--mc-enchant); border-color:rgba(168,85,247,0.3); }
    .mc-recap-boss { font-family:'VT323',monospace; font-size:17px; color:var(--mc-gold); text-align:center; padding:10px; background:rgba(255,193,7,0.07); border:1px solid rgba(255,193,7,0.2); border-radius:4px; margin-bottom:14px; }
    .mc-recap-footer { text-align:center; }
    .mc-recap-newweek { font-family:'VT323',monospace; font-size:16px; color:var(--mc-text-dim); margin-bottom:12px; }

    /* Task slot — only enchant glow when done, pop only fires once via JS class */
    .mc-task-slot.done { animation:mc-enchant 3s ease-in-out infinite; }
    .mc-task-slot.just-done { animation:mc-enchant 3s ease-in-out infinite, mc-task-pop 0.35s cubic-bezier(0.175,0.885,0.32,1.275); }
    @keyframes mc-task-pop { 0% { transform:scale(0.82); } 55% { transform:scale(1.12); } 100% { transform:scale(1); } }
    .mc-task-slot:not(.done):active { transform:scale(0.92); }
    .mc-task-slot.just-done .mc-task-emoji { animation:mc-emoji-bounce 0.4s cubic-bezier(0.175,0.885,0.32,1.275); }
    @keyframes mc-emoji-bounce { 0% { transform:scale(0.4) rotate(-18deg); } 60% { transform:scale(1.25) rotate(6deg); } 100% { transform:scale(0.9) rotate(0); } }

    /* ─── RESPONSIVE (v4) ────────────────────────────────────── */
    @media (max-width: 1000px) {
      .sidebar { width: 186px; }
      .ops-layout { grid-template-columns: 1fr 290px; gap: 14px; }
    }
    @media (max-width: 800px) {
      .sidebar { width: 54px; padding: 12px 6px; }
      .sidebar-brand .brand-name, .sidebar-brand .brand-sub, .nav-label, .sidebar-clock, .sidebar-weather .wx-loc { display: none; }
      .sidebar-brand { padding-bottom: 10px; justify-content: center; }
      .nav-item { padding: 10px; justify-content: center; }
      .nav-icon { font-size: 20px; }
      .sidebar-weather { justify-content: center; padding: 7px; }
      .sidebar-weather .icon { font-size: 18px; }
      .sidebar-weather .temp { font-size: 11px; }
      .sidebar-weather .cond { display: none; }
      .profile-btn .profile-name, .profile-btn .profile-caret { display: none; }
      .profile-btn { padding: 4px; }
      .ops-layout { grid-template-columns: 1fr; }
      .ops-right { order: -1; }
      .meals-grid { grid-template-columns: repeat(4,1fr); }
      .rewards-kids { grid-template-columns: 1fr; }
      .mc-task-slot { width:68px; min-height:74px; }
      .mc-task-emoji { font-size:28px; }
      .mc-title { font-size:12px; }
      .mc-kid-name { font-size:9px; }
      .mc-quest-title { font-size:7px; }
      .mc-edit-btn { font-size:13px; padding:3px 8px; }
      .mc-avatar-grid { grid-template-columns:repeat(6,1fr); }
      .mc-avatar-option { width:38px; height:38px; font-size:24px; }
      .mc-profile-stats { grid-template-columns:repeat(2,1fr); }
      .mc-profile-avatar-big { font-size:44px; width:56px; height:56px; }
      .mc-boss-title { font-size:13px; }
      .mc-boss-icon { font-size:64px; }
      .mc-boss-hp-wrap { width:220px; }
      .mc-sound-btn { right:60px; }
    }
    @media (max-width: 540px) {
      #hub { flex-direction: column; }
      .sidebar {
        width: 100%; flex-direction: row; padding: 6px 10px;
        border-right: none; border-bottom: 1px solid var(--card-border);
        align-items: center; gap: 4px;
      }
      .sidebar-brand, .sidebar-clock, .sidebar-footer { display: none; }
      .sidebar-nav { flex-direction: row; flex: 1; gap: 0; }
      .nav-label { display: block; font-size: 9px; }
      .nav-item { flex-direction: column; gap: 2px; padding: 5px 8px; font-size: 9px; }
      .nav-icon { font-size: 16px; }
      .hub-shell { overflow: auto; }
      .view { padding: 12px 14px 20px; }
    }

    /* ─── AURORA DARK MODE ───────────────────────────────────────────
       Single source of truth. JS sets data-color-scheme="dark"|"light"
       on page load (reading OS preference + localStorage). No @media needed.
    ─────────────────────────────────────────────────────────────────── */
    html[data-hub-theme="aurora"][data-color-scheme="dark"] {
      --bg: #1A1228; --bg2: #211530;
      --card: rgba(30,20,46,0.92);
      --card-border: rgba(196,168,232,0.14);
      --card-shadow: 0 6px 28px rgba(0,0,0,0.32);
      --text-1: #D8C8EC; --text-2: #A888CC; --text-3: #6858A0;
      --danger: #FF7096; --danger-soft: rgba(255,112,150,0.15);
      --input-bg: rgba(255,255,255,0.06); --input-border: rgba(196,168,232,0.22);
      --popup-bg: rgba(26,16,42,0.99); --sidebar-bg: rgba(22,14,36,0.96);
      --pink-soft: rgba(244,160,192,0.10); --lav-soft: rgba(196,168,232,0.08);
      --mint-soft: rgba(142,203,168,0.09); --peach-soft: rgba(248,180,138,0.09);
      --s0: rgba(255,255,255,0.04); --s1: rgba(255,255,255,0.07);
      --s2: rgba(255,255,255,0.10); --s-hover: rgba(255,255,255,0.13);
    }
    html[data-hub-theme="aurora"][data-color-scheme="dark"] body { background: #1A1228; }
    html[data-hub-theme="aurora"][data-color-scheme="dark"] .sidebar { background: rgba(22,14,36,0.96); }
    html[data-hub-theme="aurora"][data-color-scheme="dark"] .top-bar { background: transparent; border-color: rgba(196,168,232,0.1); }
    html[data-hub-theme="aurora"][data-color-scheme="dark"] .wc-bg { background: #1A1228 !important; }
    html[data-hub-theme="aurora"][data-color-scheme="dark"] .profile-dropdown { background: rgba(26,16,42,0.99) !important; border-color: rgba(196,168,232,0.22) !important; }
    html[data-hub-theme="aurora"][data-color-scheme="dark"] .weather-popover { background: rgba(26,16,42,0.99) !important; border-color: rgba(196,168,232,0.18) !important; }
    html[data-hub-theme="aurora"][data-color-scheme="dark"] .day-detail-inline { background: rgba(28,18,44,0.7) !important; }
    html[data-hub-theme="aurora"][data-color-scheme="dark"] input,
    html[data-hub-theme="aurora"][data-color-scheme="dark"] textarea,
    html[data-hub-theme="aurora"][data-color-scheme="dark"] select { background: rgba(255,255,255,0.05) !important; border-color: rgba(196,168,232,0.2) !important; color: var(--text-1) !important; }
    html[data-hub-theme="aurora"][data-color-scheme="dark"] .modal-box,
    html[data-hub-theme="aurora"][data-color-scheme="dark"] .dsug-modal-box { background: rgba(26,16,42,0.99) !important; border-color: rgba(196,168,232,0.22) !important; }
    html[data-hub-theme="aurora"][data-color-scheme="dark"] .sug-fc-day.perfect { background: rgba(142,203,168,0.12) !important; }
    html[data-hub-theme="aurora"][data-color-scheme="dark"] .sug-fc-day.rainy { background: rgba(160,196,244,0.10) !important; }
    html[data-hub-theme="aurora"][data-color-scheme="dark"] .note-bubble { background: rgba(196,168,232,0.10) !important; border-color: rgba(196,168,232,0.18) !important; }
    html[data-hub-theme="aurora"][data-color-scheme="dark"] .note-bubble.mine { background: rgba(244,160,192,0.13) !important; border-color: rgba(244,160,192,0.28) !important; }
    html[data-hub-theme="aurora"][data-color-scheme="dark"] .wx-pop-day,
    html[data-hub-theme="aurora"][data-color-scheme="dark"] .fc-day,
    html[data-hub-theme="aurora"][data-color-scheme="dark"] .wstat { background: rgba(255,255,255,0.05) !important; border-color: rgba(196,168,232,0.14) !important; }
    html[data-hub-theme="aurora"][data-color-scheme="dark"] .fc-day:hover { background: rgba(255,255,255,0.10) !important; }
    html[data-hub-theme="aurora"][data-color-scheme="dark"] .suggestion-item { background: rgba(255,255,255,0.04) !important; border-color: rgba(196,168,232,0.14) !important; }
    html[data-hub-theme="aurora"][data-color-scheme="dark"] .suggestion-item:hover { background: rgba(255,255,255,0.08) !important; }
    html[data-hub-theme="aurora"][data-color-scheme="dark"] .sidebar-weather { background: rgba(255,255,255,0.06) !important; border-color: rgba(196,168,232,0.18) !important; }
    html[data-hub-theme="aurora"][data-color-scheme="dark"] .sidebar-weather:hover { background: rgba(255,255,255,0.11) !important; }
    html[data-hub-theme="aurora"][data-color-scheme="dark"] .auth-card { background: rgba(26,16,42,0.97) !important; border-color: rgba(196,168,232,0.3) !important; }
    html[data-hub-theme="aurora"][data-color-scheme="dark"] .toast { background: rgba(26,16,42,0.97) !important; border-color: rgba(196,168,232,0.3) !important; color: var(--text-1) !important; }
    html[data-hub-theme="aurora"][data-color-scheme="dark"] .sync-indicator:hover { background: var(--s1) !important; }
    html[data-hub-theme="aurora"][data-color-scheme="dark"] .shop-tpl-card:hover { background: var(--s2) !important; }
    html[data-hub-theme="aurora"][data-color-scheme="dark"] .shop-saved-list:hover { background: var(--s2) !important; }
    html[data-hub-theme="aurora"][data-color-scheme="dark"] .task-card.done { background: rgba(142,203,168,0.15) !important; }
    html[data-hub-theme="aurora"][data-color-scheme="dark"] .prize-tier.reached { background: rgba(142,203,168,0.15) !important; }
    /* ─── PANTRY / SHOPPING DARK MODE ──────────────────────── */
    html[data-hub-theme="aurora"][data-color-scheme="dark"] .shop-quick-bar { border-bottom-color: rgba(196,168,232,0.12) !important; }
    html[data-hub-theme="aurora"][data-color-scheme="dark"] .shop-quick-chip { background: rgba(196,168,232,0.08) !important; border-color: rgba(196,168,232,0.22) !important; color: var(--text-2) !important; }
    html[data-hub-theme="aurora"][data-color-scheme="dark"] .shop-quick-chip:hover { background: rgba(196,168,232,0.18) !important; color: var(--text-1) !important; }
    html[data-hub-theme="aurora"][data-color-scheme="dark"] .shop-staples-header { background: rgba(196,168,232,0.08) !important; border-color: rgba(196,168,232,0.22) !important; color: var(--lavender) !important; }
    html[data-hub-theme="aurora"][data-color-scheme="dark"] .shop-staple-row { background: rgba(196,168,232,0.06) !important; border: 1px solid rgba(196,168,232,0.12); }
    html[data-hub-theme="aurora"][data-color-scheme="dark"] .shop-staple-row:hover { background: rgba(196,168,232,0.13) !important; }
    html[data-hub-theme="aurora"][data-color-scheme="dark"] .shop-staple-rec { color: var(--lavender) !important; }
    html[data-hub-theme="aurora"][data-color-scheme="dark"] .shop-cat-header { color: var(--text-2) !important; }
    html[data-hub-theme="aurora"][data-color-scheme="dark"] .shop-cat-header:hover { background: rgba(196,168,232,0.08) !important; }
    html[data-hub-theme="aurora"][data-color-scheme="dark"] .panel-footer { border-top-color: rgba(196,168,232,0.12) !important; }
    /* ─── MINECRAFT THEME NOTE BUBBLES (dark default) ────────── */
    [data-hub-theme="minecraft"]:not([data-color-scheme="light"]) .note-bubble { background: rgba(40,80,32,0.25) !important; border-color: rgba(58,107,48,0.45) !important; color: #E0FFD0; }
    [data-hub-theme="minecraft"]:not([data-color-scheme="light"]) .note-bubble.mine { background: rgba(91,175,74,0.22) !important; border-color: rgba(91,175,74,0.5) !important; }
    [data-hub-theme="minecraft"]:not([data-color-scheme="light"]) .note-body-text { color: #D8F0C0; }

    /* ─── ECONOMY TAB ──────────────────────────────────────── */
    .econ-layout { display:flex; flex-direction:column; gap:16px; max-width:760px; margin:0 auto; }
    .econ-summary-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:0 4px 4px; }
    @media(max-width:640px){ .econ-summary-grid { grid-template-columns:repeat(2,1fr); } }
    .econ-stat { text-align:center; padding:8px 4px; }
    .econ-stat-val { font-family:'Cormorant Garamond',serif; font-size:18px; font-weight:700; color:var(--text-1); }
    .econ-stat-lbl { font-size:10px; color:var(--text-3); text-transform:uppercase; letter-spacing:.05em; margin-top:2px; }
    .econ-budget-bar-wrap { grid-column:1/-1; padding:4px 4px 2px; }
    .econ-budget-bar-track { height:6px; background:var(--lav-soft); border-radius:99px; overflow:hidden; }
    .econ-budget-bar-fill { height:100%; border-radius:99px; transition:width .5s; }
    .econ-budget-bar-label { font-size:10px; color:var(--text-3); margin-top:3px; display:block; text-align:right; }
    .econ-set-income-btn { background:none; border:none; color:var(--lavender); font-size:12px; cursor:pointer; font-family:inherit; padding:4px 0; }
    .econ-set-income-btn:hover { text-decoration:underline; }
    .econ-total-badge { font-size:11px; color:var(--text-3); font-family:inherit; }
    .econ-section-body { padding:0 4px 4px; }
    .econ-cat-group { margin-bottom:12px; }
    .econ-cat-header { display:flex; align-items:center; justify-content:space-between; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:6px 12px 4px; }
    .econ-cat-total { font-size:11px; font-weight:600; opacity:.8; }
    .econ-row { display:flex; align-items:center; gap:8px; padding:7px 12px; border-radius:8px; background:var(--s1); margin-bottom:3px; transition:background .15s; }
    .econ-row:hover { background:var(--s2); }
    .econ-row-label { flex:1; font-size:13px; color:var(--text-1); }
    .econ-row-amount { font-size:13px; font-weight:600; color:var(--text-1); white-space:nowrap; }
    .econ-row-period { font-size:10px; color:var(--text-3); font-weight:400; }
    .econ-row-actions { display:flex; gap:2px; opacity:0; transition:opacity .15s; }
    .econ-row:hover .econ-row-actions { opacity:1; }
    .econ-row-btn { background:none; border:none; cursor:pointer; font-size:14px; padding:2px 4px; border-radius:4px; line-height:1; }
    .econ-row-btn:hover { background:var(--s2); }
    .econ-row-del:hover { background:var(--danger-soft) !important; }
    .econ-empty { font-size:12px; color:var(--text-3); padding:10px 12px; }
    .econ-link-btn { background:none; border:none; color:var(--lavender); cursor:pointer; font-size:12px; font-family:inherit; text-decoration:underline; padding:0; }
    .econ-kid-section { margin-bottom:14px; }
    .econ-kid-header { display:flex; align-items:center; justify-content:space-between; font-size:13px; font-weight:600; color:var(--text-1); padding:6px 12px 4px; border-bottom:1px solid var(--card-border); margin-bottom:4px; }
    /* Annual bars */
    .econ-annual-bars { display:flex; align-items:flex-end; gap:4px; padding:10px 12px 0; height:110px; }
    .econ-annual-col { display:flex; flex-direction:column; align-items:center; flex:1; gap:4px; }
    .econ-annual-bar { width:100%; min-height:4px; border-radius:3px 3px 0 0; background:var(--lav-soft); border:1px solid rgba(196,168,232,0.25); transition:height .4s; }
    .econ-annual-col.current .econ-annual-bar { background:linear-gradient(180deg,var(--lavender),rgba(196,168,232,0.4)); }
    .econ-annual-label { font-size:9px; color:var(--text-3); letter-spacing:.02em; }
    .econ-annual-legend { padding:4px 12px 8px; }
    /* Smart tips */
    .econ-tip-row { display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border-radius:8px; margin-bottom:4px; background:var(--s1); }
    .econ-tip-row.current-month { background:rgba(196,168,232,0.1); border:1px solid rgba(196,168,232,0.2); }
    .econ-tip-icon { font-size:20px; flex-shrink:0; margin-top:1px; }
    .econ-tip-month { font-size:11px; font-weight:700; color:var(--lavender); text-transform:uppercase; letter-spacing:.05em; margin-bottom:2px; }
    .econ-tip-text { font-size:12px; color:var(--text-2); line-height:1.5; }
    /* Modal */
    .econ-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:700; display:flex; align-items:center; justify-content:center; padding:16px; }
    .econ-modal-overlay.hidden { display:none; }
    .econ-modal-box { background:var(--popup-bg); border:1.5px solid var(--card-border); border-radius:var(--radius); padding:20px; width:100%; max-width:400px; max-height:90vh; overflow-y:auto; box-shadow:0 12px 48px rgba(0,0,0,0.28); }
    .econ-form { display:flex; flex-direction:column; gap:6px; }
    .econ-form-label { font-size:11px; font-weight:600; color:var(--text-2); text-transform:uppercase; letter-spacing:.05em; margin-top:4px; }
    .econ-form-input,.econ-form-select { width:100%; padding:8px 10px; border:1.5px solid var(--card-border); border-radius:var(--radius-sm); background:var(--input-bg); color:var(--text-1); font-size:13px; font-family:inherit; outline:none; transition:border-color .15s; box-sizing:border-box; }
    .econ-form-input:focus,.econ-form-select:focus { border-color:var(--lavender); box-shadow:0 0 0 3px rgba(196,168,232,0.12); }
    .econ-tab-btn { flex:1; padding:6px 10px; border-radius:8px; font-size:12px; font-weight:600; border:1px solid var(--card-border); background:transparent; color:var(--text-2); cursor:pointer; font-family:inherit; transition:all .15s; }
    .econ-tab-btn.active { background:linear-gradient(135deg,var(--lavender),var(--pink)); color:#fff; border-color:transparent; }
    .econ-save-btn { flex:1; padding:9px 16px; background:linear-gradient(135deg,var(--lavender),var(--pink)); color:#fff; border:none; border-radius:var(--radius-sm); font-size:13px; font-weight:700; cursor:pointer; font-family:inherit; transition:opacity .15s; }
    .econ-save-btn:hover { opacity:.9; }
    .econ-cancel-btn { padding:9px 14px; background:transparent; border:1.5px solid var(--card-border); border-radius:var(--radius-sm); font-size:13px; color:var(--text-2); cursor:pointer; font-family:inherit; }

    /* ─── FAB ───────────────────────────────────────────────── */
    .fab {
      position: fixed; bottom: 24px; right: 24px; z-index: 500;
      width: 52px; height: 52px; border-radius: 50%;
      background: linear-gradient(135deg, var(--pink), var(--lavender));
      border: none; cursor: pointer; color: #fff; font-size: 22px;
      box-shadow: 0 6px 24px rgba(196,168,232,0.45);
      display: flex; align-items: center; justify-content: center;
      transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
    }
    .fab:hover { transform: scale(1.10); box-shadow: 0 10px 32px rgba(196,168,232,0.6); }
    .fab:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
    .fab-tooltip {
      position: fixed; bottom: 84px; right: 24px; z-index: 500;
      font-size: 11px; background: var(--card); border: 1px solid var(--card-border);
      border-radius: 8px; padding: 4px 10px; color: var(--text-2);
      pointer-events: none; opacity: 0; transition: opacity .15s;
      white-space: nowrap; backdrop-filter: blur(12px);
    }
    .fab:hover + .fab-tooltip, .fab:focus + .fab-tooltip { opacity: 1; }

    /* ─── GLOBAL SEARCH ─────────────────────────────────────── */
    .search-overlay {
      position: fixed; inset: 0; z-index: 700;
      background: rgba(26,18,40,0.72); backdrop-filter: blur(6px);
      display: flex; align-items: flex-start; justify-content: center;
      padding-top: 80px; animation: fadeIn .15s ease;
    }
    .search-overlay.hidden { display: none; }
    .search-box {
      background: var(--card); border: 1.5px solid var(--pink-mid);
      border-radius: 20px; width: 540px; max-width: 92vw;
      box-shadow: 0 20px 60px rgba(0,0,0,0.4);
      overflow: hidden; animation: slideUp .2s cubic-bezier(.34,1.56,.64,1);
    }
    .search-input-row {
      display: flex; align-items: center; gap: 10px; padding: 14px 18px;
      border-bottom: 1px solid var(--card-border);
    }
    .search-icon { font-size: 16px; color: var(--text-3); flex-shrink: 0; }
    .search-input {
      flex: 1; border: none; background: transparent; outline: none;
      font-size: 16px; color: var(--text-1); font-family: 'DM Sans', sans-serif;
    }
    .search-input::placeholder { color: var(--text-3); }
    .search-close { font-size: 13px; color: var(--text-3); cursor: pointer; padding: 4px; flex-shrink: 0; background: none; border: none; }
    .search-results { max-height: 360px; overflow-y: auto; padding: 8px 0; }
    .search-result {
      display: flex; align-items: center; gap: 12px;
      padding: 10px 18px; cursor: pointer; transition: background .12s;
    }
    .search-result:hover, .search-result.active { background: rgba(244,160,192,0.1); }
    .sr-icon { font-size: 16px; flex-shrink: 0; }
    .sr-label { flex: 1; font-size: 13px; color: var(--text-1); }
    .sr-meta  { font-size: 11px; color: var(--text-3); flex-shrink: 0; }
    .sr-category { font-size: 9px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); padding: 8px 18px 4px; }
    .search-empty { text-align: center; padding: 24px; font-size: 13px; color: var(--text-3); }

    /* ─── KEYBOARD SHORTCUTS OVERLAY ───────────────────────── */
    .shortcuts-overlay {
      position: fixed; inset: 0; z-index: 700;
      background: rgba(26,18,40,0.72); backdrop-filter: blur(6px);
      display: flex; align-items: center; justify-content: center;
      animation: fadeIn .15s ease;
    }
    .shortcuts-overlay.hidden { display: none; }
    .shortcuts-box {
      background: var(--card); border: 1px solid var(--card-border);
      border-radius: 20px; width: 400px; max-width: 92vw;
      padding: 22px 26px; box-shadow: 0 20px 60px rgba(0,0,0,0.4);
      animation: slideUp .2s cubic-bezier(.34,1.56,.64,1);
    }
    .shortcuts-title { font-size: 14px; font-weight: 700; color: var(--text-1); margin-bottom: 16px; }
    .shortcut-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--card-border); font-size: 13px; color: var(--text-2); }
    .shortcut-row:last-child { border-bottom: none; }
    .shortcut-key { display: inline-flex; align-items: center; gap: 4px; }
    kbd {
      display: inline-block; background: rgba(255,255,255,0.08);
      border: 1px solid var(--card-border); border-radius: 5px;
      padding: 2px 7px; font-size: 11px; font-family: monospace;
      color: var(--text-1); line-height: 1.6;
    }

    /* ─── ARIA SKIP LINK (visible on focus) ─────────────────── */
    .skip-link {
      position: absolute; top: -48px; left: 16px; z-index: 9999;
      background: var(--pink); color: #fff; padding: 8px 16px;
      border-radius: 0 0 10px 10px; font-size: 13px; font-weight: 600;
      transition: top .15s; text-decoration: none;
    }
    .skip-link:focus { top: 0; }

    /* ─── PREFERS REDUCED MOTION ─────────────────────────────── */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
    }

    /* ════════════════════════════════════════
       REWARDS v2 — new elements
    ════════════════════════════════════════ */

    /* XP bar next-level reward line */
    .mc-xp-next { display:flex; justify-content:space-between; font-family:'VT323',monospace; font-size:12px; color:var(--mc-text-dim); margin-top:3px; }
    .mc-xp-next-reward { color:var(--mc-enchant); font-size:12px; }

    /* Pop-up bonus section — auto-expanded, highlighted */
    .mc-popup-bonus-section { background:rgba(168,85,247,0.05); border:1px solid rgba(168,85,247,0.2); border-radius:4px; margin:0 16px 10px; padding:10px 10px 14px; }
    .mc-popup-bonus { border-color:rgba(168,85,247,0.4) !important; }
    .mc-popup-bonus.done { border-color:var(--mc-green) !important; }

    /* Badge categories */
    .mc-badges-wrap { padding:4px 16px 10px; }
    .mc-badge-cat { margin-bottom:10px; }
    .mc-badge-cat-label { font-family:'Press Start 2P',monospace; font-size:7px; color:var(--mc-text-dim); margin-bottom:5px; text-transform:uppercase; letter-spacing:1px; }
    .mc-badge-cat .mc-badges { padding:0; }

    /* Avatar tier groups in profile */
    .mc-avatar-tier { margin-bottom:12px; }
    .mc-avatar-tier-label { font-family:'Press Start 2P',monospace; font-size:7px; margin-bottom:6px; text-transform:uppercase; letter-spacing:0.5px; }
    .mc-avatar-tier-label.unlocked { color:var(--mc-green-bright); }
    .mc-avatar-tier-label.locked-label { color:var(--mc-text-dim); opacity:.6; }
    .locked-avatar { width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.2); border:1px solid rgba(255,255,255,0.05); border-radius:4px; font-size:16px; opacity:.4; cursor:not-allowed; }

    /* Level progress bar in profile */
    .mc-profile-lvl-bar { padding:10px 16px 4px; background:rgba(0,0,0,0.1); border-bottom:1px solid rgba(255,255,255,0.04); }

    /* Reset button in mc-header */
    .mc-reset-btn { font-family:'Press Start 2P',monospace; font-size:7px; padding:6px 10px; background:rgba(239,68,68,0.1); border:1px solid rgba(239,68,68,0.3); color:#ef4444; border-radius:3px; cursor:pointer; transition:all .15s; }
    .mc-reset-btn:hover { background:rgba(239,68,68,0.2); }

    /* Reset modal option blocks */
    .mc-reset-option { background:rgba(0,0,0,0.2); border:1px solid rgba(255,255,255,0.06); border-radius:4px; padding:14px; }
    .mc-reset-option-title { font-family:'Press Start 2P',monospace; font-size:9px; color:var(--mc-gold); margin-bottom:6px; }
    .mc-reset-option-desc { font-family:sans-serif; font-size:12px; color:var(--mc-text-dim); margin-bottom:10px; line-height:1.5; }

    /* Today panel — Stars This Week bars */
    .today-stars-section { margin-top:8px; padding:10px 14px 6px; background:rgba(var(--card-bg-rgb,255,255,255),0.03); border-radius:10px; }
    .today-week-bar-row { padding:5px 0; cursor:pointer; }
    .today-week-bar-row:hover .today-week-bar-fill { filter:brightness(1.15); }
    .today-week-bar-info { display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--text-1); margin-bottom:4px; }
    .today-week-bar-lvl { font-size:11px; }
    .today-week-bar-count { font-size:11px; color:var(--text-3); }
    .today-week-bar-track { height:5px; background:var(--lav-soft); border-radius:99px; overflow:hidden; }
    .today-week-bar-fill { height:100%; border-radius:99px; transition:width .4s; }
    .today-week-bar-next { font-size:10px; color:var(--text-3); margin-top:2px; }

    /* Smart reminders overflow / collapse */
    .today-reminders-overflow { overflow:hidden; }
    .today-reminders-overflow.collapsed { display:none; }
    .today-smart-more { width:100%; margin-top:4px; padding:4px 0; background:none; border:1px solid var(--card-border); border-radius:6px; font-size:11px; color:var(--text-3); cursor:pointer; transition:background .15s; }
    .today-smart-more:hover { background:var(--lav-soft); }