/* ===== Real HelperFlow app screens (v7) =====
         Drawn at the app's own size (390 pt wide, Inter, classic theme tokens from
         helperflow/frontend/src/index.css) and scaled into the phone, so every
         size below is the app's real pt value. References: ref/app-*.png (hero.mp4). */
      @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; src: url("fonts/inter-400-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
      @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; src: url("fonts/inter-400-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF; }
      @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; src: url("fonts/inter-500-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
      @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; src: url("fonts/inter-500-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF; }
      @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; src: url("fonts/inter-600-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
      @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; src: url("fonts/inter-600-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF; }
      @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; src: url("fonts/inter-700-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
      @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; src: url("fonts/inter-700-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF; }
      @font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; src: url("fonts/inter-800-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
      @font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; src: url("fonts/inter-800-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF; }
      .app { position: absolute; left: 0; top: 0; width: 390px; height: 720px; transform: scale(1.754); transform-origin: 0 0; overflow: hidden;
        background: #FEFCF8; color: #111827; font-family: 'Inter', 'Noto Sans HK', sans-serif; font-size: 15px; letter-spacing: -0.01em; }
      .app .ic { width: 22px; height: 22px; flex: none; }
      /* status bar */
      .app .stb { position: absolute; left: 0; right: 0; top: 0; height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 6px 30px 0 34px; z-index: 5; font-weight: 600; font-size: 16px; }
      .app .stb .sig { display: flex; gap: 6px; align-items: center; }
      .app .stb .bars { display: flex; gap: 2px; align-items: flex-end; height: 12px; }
      .app .stb .bars i { width: 3px; background: currentColor; border-radius: 1px; }
      .app .stb .bat { width: 25px; height: 12px; border: 1.5px solid currentColor; border-radius: 4px; padding: 1.5px; opacity: .9; }
      .app .stb .bat::after { content: ""; display: block; height: 100%; width: 85%; background: currentColor; border-radius: 1.5px; }
      /* mint page header */
      .app .ahd { position: relative; background: #E6F5F3; border-radius: 0 0 26px 26px; padding: 56px 20px 20px; }
      .app .ahd .btns { display: flex; justify-content: flex-end; gap: 6px; margin-right: -8px; }
      .app .ahd .rb { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; position: relative; }
      .app .ahd .rb.plus { background: #085751; color: #fff; box-shadow: 0 8px 18px -8px rgba(6,64,57,.7); }
      .app .ahd .rb.bell { background: #fff; color: #6B7280; box-shadow: 0 2px 8px rgba(8,87,81,.12); }
      .app .ahd .rb.bell .ic { width: 21px; height: 21px; }
      .app .ahd .rb.bell b { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; border-radius: 9px; background: #EF4444; color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; padding: 0 4px; }
      .app .ahd .rb.me { width: 40px; height: 40px; margin: 2px; background: #0B7069; color: #fff; font-weight: 700; font-size: 14px; box-shadow: 0 0 0 2px #fff, 0 2px 8px rgba(8,87,81,.3); }
      .app .ahd .sub { color: #085751; font-size: 14px; font-weight: 600; margin-top: 10px; }
      .app .ahd h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; margin-top: 2px; }
      .app .main { padding: 16px 16px 0; }
      .app .sec { font-size: 18px; font-weight: 700; color: #1F2937; letter-spacing: -0.02em; margin: 22px 4px 12px; display: flex; justify-content: space-between; align-items: baseline; }
      .app .sec small { font-size: 14px; font-weight: 500; color: #9CA3AF; }
      .app .crd { background: #fff; border: 2px solid #F5F0EB; border-radius: 16px; }
      /* bottom tab bar */
      .app .tabs { position: absolute; left: 12px; right: 12px; bottom: 14px; height: 64px; background: #fff; border-radius: 9999px; display: flex; align-items: stretch;
        box-shadow: 0 10px 30px -8px rgba(8,87,81,.28), 0 2px 8px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.04); z-index: 6; }
      .app .tabs .t { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 11px; line-height: 1; font-weight: 500; color: #6B7280; }
      .app .tabs .t .w { width: 44px; height: 28px; border-radius: 9999px; display: grid; place-items: center; }
      .app .tabs .t .ic { width: 24px; height: 24px; stroke-width: 1.75; }
      .app .tabs .t.on { color: #0E8A7E; font-weight: 700; }
      .app .tabs .t.on .w { background: #E6F5F3; }
      .app .tabs .t.on .ic { stroke-width: 2.5; }
      .app .tabs .mid { flex: 1; position: relative; height: 100%; }
      .app .tabs .menu { position: absolute; left: 50%; margin-left: -38px; top: -6px; width: 76px; height: 76px; border-radius: 50%; border: 3px solid #4ADEAB;
        background: radial-gradient(circle at 30% 25%, #FFFFFF 0%, #E6F5F3 100%); box-shadow: 0 0 0 4px #fff, 0 12px 28px -6px rgba(8,87,81,.5);
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 11px; font-weight: 700; color: #0E8A7E; }
      .app .tabs .menu img { width: 32px; height: 33px; }
      /* chat */
      .app .chd { position: relative; background: #E6F5F3; border-radius: 0 0 26px 26px; padding: 56px 18px 12px 14px; display: flex; align-items: center; gap: 10px; }
      .app .chd .avs { display: flex; margin-left: 8px; }
      .app .chd .avs span { width: 38px; height: 38px; border-radius: 50%; border: 2px solid #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; }
      .app .chd .avs span + span { margin-left: -12px; }
      .app .chd .ttl { font-size: 17px; font-weight: 700; }
      .app .chd .sb2 { font-size: 13px; color: #6B7280; }
      .app .chd .r { margin-left: auto; display: flex; gap: 18px; color: #1F2937; }
      .app .cm { padding: 14px 16px 0; display: flex; flex-direction: column; gap: 4px; }
      .app .bb { max-width: 300px; padding: 13px 16px; border-radius: 22px; font-size: 17px; line-height: 1.42; position: relative; }
      .app .bb .tx { padding-right: 26px; }
      .app .bb .spk { position: absolute; right: 12px; top: 14px; width: 18px; height: 18px; }
      .app .bb.in { background: #FBF7F0; border: 1px solid #F5F0EB; align-self: flex-start; }
      .app .bb.out { background: #064039; color: #fff; align-self: flex-end; }
      .app .bb .trb { display: inline-flex; align-items: center; gap: 6px; margin-top: 9px; background: #E6F5F3; color: #085751; border-radius: 9999px; padding: 5px 12px 5px 9px; font-size: 13.5px; font-weight: 600; }
      .app .bb .trb .ic { width: 16px; height: 16px; }
      .app .mt { font-size: 12.5px; color: #9CA3AF; margin: 2px 4px 12px; display: flex; gap: 4px; align-items: center; }
      .app .mt.r { justify-content: flex-end; }
      .app .mt .ic { width: 16px; height: 16px; color: #0EA5E9; }
      .app .cmp { position: absolute; left: 0; right: 0; bottom: 92px; display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid #F3F4F6; background: #FEFCF8; color: #1F2937; }
      .app .cmp .in2 { flex: 1; height: 42px; border: 1.5px solid #EDE5DB; border-radius: 14px; display: flex; align-items: center; padding: 0 14px; color: #9CA3AF; font-size: 16px; }
      /* home */
      .app .prog { background: #064039; color: #fff; border-radius: 20px; padding: 18px 20px 20px; }
      .app .prog .top { display: flex; align-items: center; gap: 18px; }
      .app .prog .big { font-size: 34px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
      .app .prog .big i { font-style: normal; color: #99D7CF; }
      .app .prog .lb { font-size: 13.5px; color: #CCEBE7; margin-top: 5px; }
      .app .prog .bar { flex: 1; height: 16px; border-radius: 9px; background: #032A25; overflow: hidden; }
      .app .prog .bar i { display: block; height: 100%; width: 60%; background: #4ADE80; border-radius: 9px; }
      .app .prog hr { border: 0; border-top: 1px solid rgba(255,255,255,.14); margin: 16px 0 12px; }
      .app .prog .eb { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #99D7CF; }
      .app .prog .sum { font-size: 15.5px; line-height: 1.45; margin-top: 6px; }
      .app .nrow { display: flex; align-items: center; gap: 14px; padding: 13px 14px; margin-bottom: 10px; font-size: 15px; font-weight: 600; }
      .app .nrow .tile { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; flex: none; }
      .app .nrow .tile .ic { width: 22px; height: 22px; }
      .app .nrow .ch { margin-left: auto; color: #9CA3AF; width: 18px; height: 18px; }
      .app .nrow small { display: block; font-size: 13.5px; font-weight: 400; color: #6B7280; margin-top: 2px; }
      /* calendar */
      .app .seg { display: flex; gap: 4px; max-width: 200px; background: #FBF7F0; border-radius: 12px; padding: 4px; margin: 0 0 20px; }
      .app .seg span { flex: 1; text-align: center; padding: 10px 8px; border-radius: 9.6px; font-size: 15px; font-weight: 600; line-height: 1.2; color: #6B7280; }
      .app .seg span.on { background: #fff; color: #111827; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
      .app .wk { padding: 16px; }
      .app .wk .mo { display: flex; justify-content: space-between; align-items: center; padding: 0 10px; font-size: 18px; font-weight: 700; color: #111827; }
      .app .wk .mo .ic { width: 20px; height: 20px; color: #374151; }
      .app .wk .ds { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; margin-top: 12px; }
      .app .wk .ds span { font-size: 11px; font-weight: 600; color: #9CA3AF; letter-spacing: .04em; }
      .app .wk .ds b { display: grid; place-items: center; width: 40px; height: 40px; margin: 6px auto 0; border-radius: 12px; font-size: 16px; font-weight: 700; color: #374151; }
      .app .wk .ds b.on { background: #085751; color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
      .app .wk .ds em { display: flex; justify-content: center; gap: 2px; height: 6px; margin-top: 4px; }
      .app .wk .ds em i { width: 6px; height: 6px; border-radius: 50%; background: #0B7069; }
      .app .wk .ds em i.sq { border-radius: 2px; }
      .app .wk .ds em i.y { background: #FCD34D; } .app .wk .ds em i.g { background: #86EFAC; }
      .app .ev { display: flex; gap: 16px; align-items: center; padding: 16px; margin-bottom: 12px; }
      .app .ev .cb { width: 48px; height: 48px; border-radius: 12px; border: 2px solid #D1D5DB; background: #F3F4F6; display: grid; place-items: center; flex: none; color: #D1D5DB; }
      .app .ev .cb .ic { width: 24px; height: 24px; }
      .app .ev .cb.evt { border: 0; }
      .app .ev .tm { font-size: 14px; font-weight: 700; color: #6B7280; margin-bottom: 2px; }
      .app .ev .tt { font-size: 16px; font-weight: 600; line-height: 1.25; }
      .app .ev .wh { font-size: 14px; color: #6B7280; margin-top: 2px; }
      .app .ev.done { background: #F0FDF4; border-color: #BBF7D0; }
      .app .ev.done .cb { background: #22C55E; border-color: #22C55E; color: #fff; }
      .app .ev.done .tt { color: #9CA3AF; text-decoration: line-through; }
      .app .ev.done .wh { color: #16A34A; }
      /* iOS lock screen + push with the real app icon */
      /* detail header (Meals, House rules, Shopping) — screen-header.tsx */
      .app .dhd { position: relative; background: #E6F5F3; border-radius: 0 0 24px 24px; padding-top: 50px; }
      .app .dhd .row { height: 56px; padding: 0 8px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
      .app .dhd .bk { width: 44px; height: 44px; display: grid; place-items: center; color: #374151; }
      .app .dhd .bk .ic { width: 24px; height: 24px; stroke-width: 2.25; }
      .app .dhd h1 { font-size: 16px; font-weight: 600; text-align: center; white-space: nowrap; }
      .app .dhd .acts { display: flex; justify-content: flex-end; gap: 4px; }
      .app .dhd .sa { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #374151; position: relative; }
      .app .dhd .sa .ic { width: 20px; height: 20px; }
      .app .dhd .sa.pri { background: #085751; color: #fff; box-shadow: 0 6px 16px -6px rgba(8,87,81,.6); }
      .app .dhd .sa.pri .ic { width: 24px; height: 24px; }
      .app .dhd .sa b { position: absolute; right: -2px; top: 2px; min-width: 20px; padding: 0 4px; border-radius: 9999px; background: #EF4444; color: #fff; font-size: 11px; line-height: 16px; font-weight: 900; text-align: center; }
      .app .intro { font-size: 14px; color: #6B7280; margin: 0 0 16px; }
      .app .lr { display: flex; gap: 16px; padding: 16px; margin-bottom: 12px; }
      .app .tile48 { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; flex: none; }
      .app .tile48 .ic { width: 24px; height: 24px; }
      .app .lr .tt { font-size: 16px; font-weight: 600; line-height: 1.25; }
      .app .lr .ds2 { font-size: 16px; color: #4B5563; margin-top: 4px; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .app .lr .ft { font-size: 14px; color: #6B7280; margin-top: 8px; }
      .app .lr .mt2 { font-size: 14px; color: #6B7280; margin-top: 2px; }
      .app .lr.done { background: #F0FDF4; border-color: #BBF7D0; }
      .app .lr.done .tt { color: #9CA3AF; text-decoration: line-through; }
      .app .tick48 { width: 48px; height: 48px; border-radius: 12px; border: 2px solid #D1D5DB; background: #F3F4F6; display: grid; place-items: center; flex: none; color: #D1D5DB; }
      .app .tick48 .ic { width: 24px; height: 24px; }
      .app .tick48.ok { background: #22C55E; border-color: #22C55E; color: #fff; }
      .app .tick48.ok .ic { stroke-width: 3; }
      .app .addr { display: flex; gap: 8px; margin-bottom: 4px; }
      .app .addr .inp { flex: 1; height: 48px; border-radius: 12px; border: 2px solid #EDE5DB; background: #fff; padding: 0 16px; display: flex; align-items: center; font-size: 16px; color: #9CA3AF; }
      .app .addr .pb { width: 48px; height: 48px; border-radius: 12px; background: #085751; color: #fff; display: grid; place-items: center; }
      .app .addr .pb .ic { width: 24px; height: 24px; }
      /* meals day sheet */
      .app .shade { position: absolute; inset: 0; background: rgba(0,0,0,.4); z-index: 7; }
      .app .sheet { position: absolute; left: 0; right: 0; bottom: 0; top: 150px; background: #fff; border-radius: 24px 24px 0 0; z-index: 8; padding: 20px 20px 0; box-shadow: 0 -10px 30px rgba(0,0,0,.15); }
      .app .sheet .shd { display: flex; align-items: center; gap: 4px; margin-bottom: 12px; }
      .app .sheet .shd .nv { width: 44px; height: 44px; display: grid; place-items: center; color: #4B5563; }
      .app .sheet .shd .dt { flex: 1; text-align: center; }
      .app .sheet .shd .dt b { display: block; font-size: 18px; font-weight: 700; line-height: 1.2; }
      .app .sheet .shd .dt span { font-size: 14px; color: #6B7280; }
      .app .sheet .shd .cl { width: 40px; height: 40px; border-radius: 50%; background: #FBF7F0; color: #6B7280; display: grid; place-items: center; }
      .app .mc { border: 2px solid #F5F0EB; border-radius: 16px; padding: 12px; margin-bottom: 8px; }
      .app .mc .sl { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #9CA3AF; }
      .app .mc .bd { display: inline-flex; gap: 4px; align-items: center; border-radius: 9999px; padding: 4px 10px; font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; background: #DCFCE7; color: #166534; }
      .app .dish2 { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 0; }
      .app .dish2 .th { width: 40px; height: 40px; border-radius: 12px; border: 2px solid #F5F0EB; background: #F5F0EB; color: #064039; display: grid; place-items: center; flex: none; }
      .app .dish2 .th .ic { width: 20px; height: 20px; }
      .app .dish2 .nm { flex: 1; font-size: 15px; font-weight: 600; line-height: 1.3; }
      .app .dish2 .x { color: #D1D5DB; width: 16px; height: 16px; }
      .app .mc .add { display: flex; align-items: center; gap: 12px; margin-top: 6px; border: 2px dashed #EDE5DB; border-radius: 12px; padding: 8px 12px; font-size: 14px; font-weight: 600; color: #085751; }
      .app .mc .add .ic { width: 18px; height: 18px; }
      .app .dayrow { display: flex; align-items: center; gap: 12px; padding: 14px; margin-bottom: 12px; }
      .app .dayrow .dtl { width: 40px; height: 40px; border-radius: 12px; background: #FBF7F0; color: #374151; display: flex; flex-direction: column; align-items: center; justify-content: center; }
      .app .dayrow .dtl small { font-size: 10px; font-weight: 700; text-transform: uppercase; opacity: .8; }
      .app .dayrow .dtl b { font-size: 14px; font-weight: 700; margin-top: 1px; }
      .app .dayrow.today { border-color: #0E8A7E; }
      .app .dayrow.today .dtl { background: #085751; color: #fff; }
      .app .tick48 .c2 { display: none; } .app .tick48.ok .c1 { display: none; } .app .tick48.ok .c2 { display: block; }
      .app .lr.done .mt2::after { content: " · Binili ni Maria"; }