:root{
    --terrazzo:#E4E0D6;
    --terrazzo-dark:#d5d0c1;
    --ink:#24291F;
    --ink-soft:#5c604f;
    --hdb-red:#C0392B;
    --price-brown:#6B4226;
    --zinc-blue:#3C6E71;
    --sunny:#E8A93E;
    --olive:#6B7A3D;
    --card:#FBF9F4;
    --line:rgba(36,41,31,0.14);
    --shadow:0 2px 0 rgba(36,41,31,0.9);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--terrazzo);
    background-image:
      radial-gradient(circle at 15% 20%, rgba(60,110,113,0.10) 0, rgba(60,110,113,0.10) 3px, transparent 3px),
      radial-gradient(circle at 65% 65%, rgba(192,57,43,0.08) 0, rgba(192,57,43,0.08) 2.5px, transparent 2.5px),
      radial-gradient(circle at 85% 30%, rgba(232,169,62,0.10) 0, rgba(232,169,62,0.10) 2px, transparent 2px);
    background-size: 90px 90px, 70px 70px, 110px 110px;
    color:var(--ink);
    font-family:'Inter',sans-serif;
    min-height:100vh;
    display:flex;
    justify-content:center;
  }
  .app{
    width:100%;
    max-width:480px;
    min-height:100vh;
    background:transparent;
    display:flex;
    flex-direction:column;
    position:relative;
  }
  .display{font-family:'Anton',sans-serif; letter-spacing:0.01em;}
  .mono{font-family:'IBM Plex Mono',monospace;}

  /* ---------- Top bar ---------- */
  .topbar{
    padding:18px 18px 14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:sticky; top:0; z-index:20;
    background:var(--terrazzo);
    border-bottom:2px solid var(--ink);
  }
  .topbar .brand{
    font-family:'Anton',sans-serif;
    font-size:18px;
    letter-spacing:0.01em;
    display:flex;
    align-items:center;
    gap:7px;
    white-space:nowrap;
  }
  .brand .dot{width:10px;height:10px;background:var(--hdb-red);border-radius:50%;display:inline-block;}
  .topbar .sub{font-size:11px;color:var(--ink-soft); margin-top:2px;}
  .iconbtn{
    width:36px;height:36px;border-radius:8px;border:2px solid var(--ink);
    background:var(--card); display:flex;align-items:center;justify-content:center;cursor:pointer;
  }

  /* ---------- Screens ---------- */
  .screen{display:none; flex:1; padding:16px 16px 96px;}
  .screen.active{display:block;}

  /* ---------- Section divider (laundry pole motif) ---------- */
  .pole-divider{
    display:flex; align-items:center; gap:6px; margin:22px 0 14px; color:var(--ink-soft);
  }
  .pole-divider::before, .pole-divider::after{
    content:""; flex:1; height:0; border-top:2px dashed rgba(36,41,31,0.28);
  }
  .pole-divider span{font-size:11px; text-transform:uppercase; letter-spacing:0.12em; font-weight:700; white-space:nowrap;}

  /* ---------- GPS / hero ---------- */
  .gps-card{
    background:var(--ink); color:var(--terrazzo); border-radius:14px; padding:22px 20px; margin-top:8px;
    box-shadow:var(--shadow); border:2px solid var(--ink);
  }
  .gps-card h1{
    font-family:'Anton',sans-serif; font-size:26px; line-height:1.15; margin:0 0 8px; letter-spacing:0.01em;
  }
  .gps-card p{margin:0 0 16px; font-size:13.5px; color:#d8d4c6; line-height:1.5;}
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-family:'Inter',sans-serif; font-weight:700; font-size:14px;
    padding:12px 18px; border-radius:9px; border:2px solid var(--ink); cursor:pointer;
    background:var(--sunny); color:var(--ink); box-shadow:var(--shadow);
    transition:transform .08s ease;
  }
  .btn:active{transform:translateY(2px); box-shadow:none;}
  .btn.secondary{background:var(--card);}
  .btn.block{width:100%;}
  .btn.small{padding:8px 12px; font-size:12.5px; box-shadow:none; border-width:1.5px;}
  .btn.ghost{background:transparent; border:1.5px solid var(--ink);}
  .btn.red{background:var(--hdb-red); color:#fff;}

  .pulse-row{display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--ink-soft); margin-top:14px;}
  .pulse-dot{width:9px;height:9px;border-radius:50%;background:var(--olive); animation:pulse 1.4s infinite;}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(107,122,61,0.5);}70%{box-shadow:0 0 0 8px rgba(107,122,61,0);}100%{box-shadow:0 0 0 0 rgba(107,122,61,0);}}

  /* ---------- Estate banner (after gps) ---------- */
  .estate-banner{
    display:flex; align-items:center; justify-content:space-between; margin-top:10px; margin-bottom:4px;
  }
  .estate-banner .where{font-size:12px; color:var(--ink-soft);}
  .estate-banner .where b{color:var(--ink);}

  /* ---------- Location warning banner ---------- */
  .location-warning{
    display:flex; align-items:center; gap:10px; background:var(--sunny); border:2px solid var(--ink);
    border-radius:12px; padding:12px; margin-top:8px; cursor:pointer;
  }
  .location-warning .glyph{font-size:20px;}
  .location-warning .txt{flex:1; font-size:12.5px; font-weight:600; line-height:1.4;}
  .location-warning .go{font-size:12px; font-weight:800; text-decoration:underline; white-space:nowrap;}

  /* ---------- Search + filters ---------- */
  .searchbar{
    display:flex; gap:8px; margin-top:14px;
  }
  .searchbar input{
    flex:1; padding:11px 12px; border-radius:9px; border:2px solid var(--ink); background:var(--card);
    font-family:'Inter'; font-size:16px; color:var(--ink);
  }
  .searchbar input:focus{outline:2px solid var(--zinc-blue); outline-offset:1px;}
  .chips{display:flex; gap:8px; overflow-x:auto; margin-top:12px; padding-bottom:4px;}
  .chips.chips-wrap{flex-wrap:wrap; overflow-x:visible;}
  .radius-label{font-size:10px; text-transform:uppercase; letter-spacing:0.06em; font-weight:700; color:var(--ink-soft); margin-top:14px;}
  .garage-like-btn{
    position:absolute; top:12px; right:12px; width:32px; height:32px; border-radius:50%;
    background:var(--card); border:1.5px solid var(--ink); display:flex; align-items:center; justify-content:center;
    font-size:15px; z-index:2; cursor:pointer;
  }
  .garage-like-btn.liked{background:var(--hdb-red); color:#fff; border-color:var(--hdb-red);}
  .chip{
    flex:0 0 auto; padding:7px 13px; border-radius:999px; border:1.5px solid var(--ink);
    font-size:12.5px; font-weight:600; cursor:pointer; background:var(--card); white-space:nowrap;
  }
  .chip.active{background:var(--ink); color:var(--terrazzo);}

  /* ---------- Block number tile (signature element) ---------- */
  .block-tile{
    font-family:'Anton',sans-serif; color:#fff; border-radius:10px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    line-height:1; border:2px solid var(--ink); flex:0 0 auto;
  }
  .block-tile .num{letter-spacing:0.02em; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:0 3px;}
  .block-tile .town{font-family:'IBM Plex Mono',monospace; font-weight:500; letter-spacing:0.01em; text-transform:uppercase; opacity:0.85; text-align:center; line-height:1.15; white-space:normal; padding:0 3px; word-break:break-word;}
  .block-tile.sz-list{width:64px;height:64px;}
  .block-tile.sz-list .num{font-size:20px;}
  .block-tile.sz-list .town{font-size:6px; margin-top:2px;}
  .block-tile.sz-hero{width:84px;height:84px;}
  .block-tile.sz-hero .num{font-size:26px;}
  .block-tile.sz-hero .town{font-size:7px; margin-top:3px;}
  .block-tile.sz-sm{width:40px;height:40px;}
  .block-tile.sz-sm .num{font-size:13px;}
  .block-tile.sz-sm .town{display:none;}

  /* ---------- Garage list card ---------- */
  .garage-list{display:flex; flex-direction:column; gap:10px; margin-top:14px;}
  .search-hl{background:var(--sunny); color:var(--ink); border-radius:3px; padding:0 2px; font-weight:800;}
  .garage-card{
    display:flex; gap:12px; padding:12px; background:var(--card); border-radius:12px;
    border:2px solid var(--ink); cursor:pointer; box-shadow:var(--shadow);
  }
  .garage-card .info{flex:1; min-width:0; padding-right:38px;}
  .garage-card .row1{display:flex; align-items:center; justify-content:space-between; gap:6px;}
  .garage-card .name{font-weight:800; font-size:15px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .garage-card .dist{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--zinc-blue); font-weight:600; flex:0 0 auto;}
  .garage-card .addr{font-size:11.5px; color:var(--ink-soft); margin-top:2px;}
  .garage-card .preview{display:flex; gap:6px; margin-top:8px; flex-wrap:wrap;}
  .mini-item{
    font-size:16px; width:28px;height:28px; border-radius:6px; display:flex;align-items:center;justify-content:center;
    background:var(--terrazzo); border:1px solid var(--line); overflow:hidden;
  }
  .mini-item.more{font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--ink-soft); font-weight:600;}

  .empty{
    text-align:center; padding:40px 16px; color:var(--ink-soft);
  }
  .empty .glyph{font-size:34px; margin-bottom:10px;}
  .empty p{font-size:13px; line-height:1.5; margin:4px 0 16px;}

  /* ---------- Garage page ---------- */
  .garage-header{
    margin-top:6px; padding-bottom:16px; border-bottom:2px dashed rgba(36,41,31,0.25);
  }
  .garage-header-top{display:flex; gap:14px; align-items:flex-start;}
  .garage-header .who{flex:1; min-width:0;}
  .garage-header .name{font-size:19px; font-weight:800; line-height:1.3; overflow-wrap:break-word; word-break:break-word;}
  .garage-header .addr{font-size:12.5px; color:var(--ink-soft); margin-top:3px;}
  .garage-header .tagline{font-size:12.5px; color:var(--ink-soft); margin-top:8px; line-height:1.5; font-style:italic;}
  .garage-header-like{
    display:inline-flex; align-items:center; gap:6px; margin-top:14px;
    font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:700; text-transform:uppercase;
    border:1.5px solid var(--ink); border-radius:8px; padding:8px 12px; cursor:pointer; white-space:nowrap; background:var(--card);
  }
  .garage-header-like.liked{background:var(--hdb-red); color:#fff; border-color:var(--hdb-red);}

  .item-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px;}
  .item-card{
    background:var(--card); border:2px solid var(--ink); border-radius:12px; overflow:hidden; cursor:pointer;
    box-shadow:var(--shadow); display:flex; flex-direction:column;
  }
  .item-photo{
    height:96px; display:flex; align-items:center; justify-content:center; font-size:36px;
    border-bottom:2px solid var(--ink); position:relative; overflow:hidden;
  }
  .status-tag{
    position:absolute; top:6px; right:6px; font-size:9px; font-weight:800; text-transform:uppercase;
    padding:3px 7px; border-radius:5px; letter-spacing:0.04em; font-family:'IBM Plex Mono',monospace;
  }
  .status-tag.available{background:var(--olive); color:#fff;}
  .status-tag.reserved{background:var(--sunny); color:var(--ink);}
  .status-tag.sold{background:var(--ink); color:var(--terrazzo);}
  .item-body{padding:9px 10px 11px;}
  .item-title{font-size:12.5px; font-weight:700; line-height:1.3; min-height:32px; max-height:32px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
  .item-price{font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:13.5px; color:var(--price-brown); margin-top:5px;}
  .item-cond{font-size:10px; color:var(--ink-soft); margin-top:2px; text-transform:uppercase; letter-spacing:0.03em;}

  /* ---------- Item detail ---------- */
  .item-detail-photo{
    height:220px; border-radius:14px; border:2px solid var(--ink); display:flex; align-items:center; justify-content:center;
    font-size:76px; background:var(--card); box-shadow:var(--shadow); position:relative; overflow:hidden;
  }
  .lightbox-overlay{
    position:fixed; inset:0; background:rgba(20,18,14,0.94); z-index:999;
    display:flex; align-items:center; justify-content:center; cursor:zoom-out;
    animation:fadeIn .15s ease;
  }
  @keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
  .lightbox-overlay img{max-width:92%; max-height:82%; object-fit:contain; border-radius:8px;}
  .lightbox-close{
    position:absolute; top:18px; right:18px; width:38px; height:38px; border-radius:50%;
    background:var(--card); border:2px solid var(--ink); display:flex; align-items:center; justify-content:center;
    font-size:18px; color:var(--ink);
  }
  .lightbox-hint{position:absolute; bottom:22px; color:#fff; font-size:11.5px; opacity:0.7; font-family:'IBM Plex Mono',monospace;}
  .photo-dots{position:absolute; bottom:10px; left:0; right:0; display:flex; justify-content:center; gap:6px;}
  .photo-dot{width:7px;height:7px;border-radius:50%; background:rgba(255,255,255,0.55); border:1px solid rgba(0,0,0,0.25); cursor:pointer;}
  .photo-dot.active{background:var(--sunny);}
  .idet-thumbrow{display:flex; gap:8px; margin-top:10px;}
  .idet-thumbrow .t{width:52px;height:52px; border-radius:8px; border:2px solid var(--ink); overflow:hidden; cursor:pointer; opacity:0.55;}
  .idet-thumbrow .t.active{opacity:1;}
  .idet-thumbrow img{width:100%;height:100%;object-fit:cover; display:block;}

  /* ---------- Photo upload widget (Add Item) ---------- */
  .photo-upload-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:2px;}
  .photo-slot{
    width:78px;height:78px; border-radius:12px; border:2px dashed var(--ink); background:var(--card);
    display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative; overflow:hidden; flex:0 0 auto;
  }
  .photo-slot img{width:100%;height:100%;object-fit:cover; display:block;}
  .photo-slot .plus{font-size:22px; color:var(--ink-soft);}
  .photo-slot .lockmsg{font-size:8.5px; text-align:center; color:var(--ink-soft); padding:0 6px; line-height:1.3; font-weight:600; text-transform:uppercase;}
  .photo-remove{
    position:absolute; top:2px; right:2px; width:18px;height:18px; border-radius:50%; background:var(--ink); color:#fff;
    font-size:11px; display:flex; align-items:center; justify-content:center; cursor:pointer;
  }
  .field-hint{font-size:11px; color:var(--ink-soft); margin-top:6px; line-height:1.4;}
  .icon-fallback-toggle{font-size:11.5px; color:var(--zinc-blue); font-weight:700; cursor:pointer; margin-top:10px; display:inline-block;}
  .save-btn{
    position:absolute; top:12px; right:12px; width:38px;height:38px; border-radius:50%;
    background:var(--card); border:2px solid var(--ink); display:flex; align-items:center;justify-content:center; cursor:pointer;
    font-size:17px;
  }
  .save-btn.saved{background:var(--hdb-red); color:#fff;}
  .idet-title{font-size:20px; font-weight:800; margin-top:16px; line-height:1.3;}
  .idet-price{font-family:'IBM Plex Mono',monospace; font-size:22px; font-weight:700; color:var(--price-brown); margin-top:6px;}
  .idet-badges{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap;}
  .badge{font-size:11px; font-weight:700; padding:5px 10px; border-radius:999px; border:1.5px solid var(--ink); text-transform:uppercase; letter-spacing:0.02em;}
  .badge.available{background:var(--olive); color:#fff; border-color:var(--olive);}
  .badge.reserved{background:var(--sunny); color:var(--ink); border-color:var(--sunny);}
  .badge.sold{background:var(--ink); color:var(--terrazzo); border-color:var(--ink);}
  .idet-desc{font-size:13.5px; line-height:1.6; color:var(--ink-soft); margin-top:14px;}
  .seller-strip{
    display:flex; align-items:center; gap:10px; margin-top:18px; padding:12px; background:var(--card);
    border:2px solid var(--ink); border-radius:12px; cursor:pointer;
  }
  .seller-strip .name{font-weight:700; font-size:13.5px;}
  .seller-strip .addr{font-size:11px; color:var(--ink-soft);}
  .action-row{display:flex; gap:10px; margin-top:18px;}

  /* ---------- Chats ---------- */
  .convo-list{display:flex; flex-direction:column; gap:8px; margin-top:14px;}
  .convo-card{
    display:flex; gap:10px; align-items:center; padding:11px; background:var(--card); border:2px solid var(--ink);
    border-radius:12px; cursor:pointer; box-shadow:var(--shadow); position:relative;
  }
  .convo-thumb{font-size:22px; width:44px;height:44px; border-radius:9px; background:var(--terrazzo); display:flex;align-items:center;justify-content:center; border:1px solid var(--line); flex:0 0 auto; overflow:hidden;}
  .convo-info{flex:1; min-width:0;}
  .convo-name{font-weight:700; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .convo-item{font-size:11.5px; color:var(--ink-soft); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .convo-price{color:var(--price-brown); font-weight:700;}
  .convo-last{font-size:12px; color:var(--ink-soft); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .unread-dot{width:9px;height:9px; border-radius:50%; background:var(--hdb-red); flex:0 0 auto;}

  /* ---------- Chat thread ---------- */
  .thread-header{
    display:flex; align-items:center; gap:10px; padding-bottom:14px; border-bottom:2px solid var(--ink); margin-bottom:4px;
  }
  .thread-header .back{cursor:pointer; font-size:20px; font-weight:700;}
  .thread-item-strip{
    display:flex; gap:10px; align-items:center; background:var(--card); border:1.5px solid var(--ink); border-radius:10px;
    padding:8px 10px; margin:12px 0;
  }
  .thread-item-strip .ph{font-size:20px; width:34px;height:34px; border-radius:7px; background:var(--terrazzo); display:flex;align-items:center;justify-content:center; overflow:hidden;}
  .thread-item-strip .t{font-size:12px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .thread-item-strip .p{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--price-brown);}
  .messages{display:flex; flex-direction:column; gap:8px; min-height:120px; padding:6px 0 12px;}
  .msg{max-width:78%; padding:9px 12px; border-radius:12px; font-size:13.5px; line-height:1.45; border:1.5px solid var(--ink); overflow-wrap:break-word; word-break:break-word;}
  .msg.me{align-self:flex-end; background:var(--sunny); border-bottom-right-radius:3px;}
  .msg.them{align-self:flex-start; background:var(--card); border-bottom-left-radius:3px;}
  .msg-time{font-size:9.5px; color:var(--ink-soft); margin-top:3px; font-family:'IBM Plex Mono',monospace;}
  .msg.me .msg-time{text-align:right;}
  .composer{
    position:sticky; bottom:64px; display:flex; gap:8px; padding-top:10px; background:var(--terrazzo);
  }
  .composer input{
    flex:1; padding:12px; border-radius:10px; border:2px solid var(--ink); font-family:'Inter'; font-size:16px; background:var(--card);
  }
  .composer button{
    width:46px; border-radius:10px; border:2px solid var(--ink); background:var(--hdb-red); color:#fff; font-size:17px; cursor:pointer;
  }
  .typing{font-size:11.5px; color:var(--ink-soft); font-style:italic; padding:2px 0 6px 4px;}

  /* ---------- My Garage ---------- */
  .my-header{
    display:flex; gap:14px; align-items:center; margin-top:4px;
  }
  .my-header .who{flex:1;}
  .my-header .name{font-size:19px; font-weight:800;}
  .my-header .addr{font-size:12px; color:var(--ink-soft); margin-top:2px;}
  .stat-strip{display:flex; gap:10px; margin-top:16px;}
  .stat-box{flex:1; background:var(--card); border:2px solid var(--ink); border-radius:10px; padding:10px; text-align:center;}
  .stat-box .n{font-family:'Anton',sans-serif; font-size:20px;}
  .stat-box .l{font-size:9.5px; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-soft); margin-top:2px;}
  .my-item-row{
    background:var(--card); border:2px solid var(--ink); border-radius:12px;
    padding:10px; margin-bottom:9px;
  }
  .my-item-row .row-top{display:flex; align-items:center; gap:10px;}
  .my-item-row .ph{font-size:24px; width:48px;height:48px; border-radius:9px; background:var(--terrazzo); display:flex;align-items:center;justify-content:center; flex:0 0 auto; overflow:hidden;}
  .my-item-row .body{flex:1; min-width:0;}
  .my-item-row .t{font-weight:700; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .my-item-row .p{font-family:'IBM Plex Mono',monospace; color:var(--price-brown); font-size:12.5px; margin-top:2px;}
  .my-item-row .row-bottom{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    margin-top:10px; padding-top:10px; border-top:1.5px dashed rgba(36,41,31,0.2);
  }
  .status-pills{display:flex; gap:6px;}
  .status-pill{
    font-family:'IBM Plex Mono',monospace; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.02em;
    border-radius:6px; padding:7px 9px; border:1.5px solid var(--ink); background:var(--terrazzo); color:var(--ink-soft);
    cursor:pointer;
  }
  .status-pill.active{background:var(--ink); color:var(--terrazzo); border-color:var(--ink);}
  .status-pill.active.available{background:var(--olive); color:#fff; border-color:var(--olive);}
  .status-pill.active.reserved{background:var(--sunny); color:var(--ink); border-color:var(--sunny);}
  .status-pill.active.sold{background:var(--ink); color:var(--terrazzo);}
  .status-pill.active.mode-fixed{background:var(--zinc-blue); color:#fff; border-color:var(--zinc-blue);}
  .status-pill.active.mode-live{background:var(--sunny); color:var(--ink); border-color:var(--sunny);}
  .del-x{cursor:pointer; font-size:16px; color:var(--ink-soft); padding:4px;}

  /* ---------- Add item form ---------- */
  .field{margin-top:14px;}
  .field label{font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-soft); display:block; margin-bottom:6px;}
  .field input, .field select, .field textarea{
    width:100%; padding:11px; border-radius:9px; border:2px solid var(--ink); font-family:'Inter'; font-size:16px; background:var(--card); color:var(--ink);
  }
  .field textarea{resize:vertical; min-height:70px;}
  .emoji-pick{display:flex; gap:8px; flex-wrap:wrap; margin-top:2px;}
  .emoji-opt{
    width:42px;height:42px; border-radius:9px; border:2px solid var(--ink); background:var(--card); font-size:20px;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
  }
  .emoji-opt.active{background:var(--sunny);}

  /* ---------- Profile ---------- */
  .profile-hero{display:flex; flex-direction:column; align-items:center; text-align:center; margin-top:10px;}
  .profile-hero .name{font-size:19px; font-weight:800; margin-top:12px;}
  .profile-hero .addr{font-size:12.5px; color:var(--ink-soft); margin-top:3px;}
  .profile-list{margin-top:20px; display:flex; flex-direction:column; gap:8px;}
  .profile-row{
    display:flex; align-items:center; justify-content:space-between; padding:13px 14px; background:var(--card);
    border:2px solid var(--ink); border-radius:11px; font-size:13.5px; font-weight:600;
  }
  .profile-row .r{color:var(--ink-soft); font-weight:500; font-size:12.5px;}

  /* ---------- Boosted tag (used on cards) ---------- */
  .boost-tag{
    position:absolute; top:-9px; right:12px; font-size:9px; font-weight:800; text-transform:uppercase;
    padding:3px 8px; border-radius:5px; letter-spacing:0.03em; font-family:'IBM Plex Mono',monospace;
    background:var(--hdb-red); color:#fff; display:flex; align-items:center; gap:3px; border:1.5px solid var(--ink);
  }
  .mi-boost-flag{
    position:absolute; top:-4px; left:-4px; font-size:11px; background:var(--hdb-red); color:#fff;
    width:18px;height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1.5px solid var(--card);
  }
  .boost-btn{
    font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:700; text-transform:uppercase;
    padding:6px 9px; border-radius:6px; border:1.5px solid var(--hdb-red); color:var(--hdb-red); background:transparent;
    cursor:pointer; white-space:nowrap;
  }
  .boost-btn.is-boosted{background:var(--hdb-red); color:#fff;}
  .boost-btn.is-disabled{border-color:var(--ink-soft); color:var(--ink-soft); cursor:not-allowed; opacity:0.6;}
  .boost-btn.is-boosted.is-disabled{background:var(--hdb-red); color:#fff; border-color:var(--hdb-red); opacity:1; cursor:not-allowed;}

  /* ---------- Pro upsell banner ---------- */
  .pro-banner{
    margin-top:16px; padding:16px; border-radius:14px; border:2px solid var(--ink);
    background:linear-gradient(135deg, var(--ink) 0%, #33392a 100%); color:var(--terrazzo);
    box-shadow:var(--shadow); cursor:pointer;
  }
  .pro-banner .top{display:flex; align-items:center; justify-content:space-between;}
  .pro-banner .kicker{font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.08em; color:var(--sunny); font-weight:700; text-transform:uppercase;}
  .pro-banner h3{font-family:'Anton',sans-serif; font-size:18px; margin:6px 0 4px; letter-spacing:0.01em;}
  .pro-banner p{font-size:12px; color:#c9c6b8; margin:0 0 12px; line-height:1.5;}
  .pro-badge{
    font-family:'IBM Plex Mono',monospace; font-size:9px; font-weight:800; letter-spacing:0.04em;
    background:var(--sunny); color:var(--ink); padding:3px 7px; border-radius:5px; margin-left:8px; vertical-align:middle;
  }

  /* ---------- Pricing cards (boost + pro) ---------- */
  .price-card{
    display:flex; align-items:center; justify-content:space-between; padding:14px; border-radius:12px;
    border:2px solid var(--ink); background:var(--card); margin-top:10px; cursor:pointer; box-shadow:var(--shadow);
  }
  .price-card .l{flex:1; min-width:0;}
  .price-card .right{display:flex; align-items:center; gap:10px; flex:0 0 auto;}
  .price-card.selected{background:var(--sunny);}
  .price-card .l .t{font-weight:800; font-size:14px;}
  .price-card .l .s{font-size:11.5px; color:var(--ink-soft); margin-top:2px;}
  .price-card .p{font-family:'Anton',sans-serif; font-size:19px; text-align:right; min-width:56px;}
  .radio-dot{
    width:20px;height:20px; border-radius:50%; border:2px solid var(--ink); flex:0 0 auto;
    display:flex; align-items:center; justify-content:center;
  }
  .price-card.selected .radio-dot::after{content:""; width:10px;height:10px;border-radius:50%; background:var(--ink);}

  .preview-box{
    margin-top:16px; padding:14px; background:var(--terrazzo-dark); border-radius:12px; border:1.5px dashed rgba(36,41,31,0.35);
  }
  .preview-box .lbl{font-size:10px; text-transform:uppercase; letter-spacing:0.06em; font-weight:700; color:var(--ink-soft); margin-bottom:8px;}

  .paynow-row{
    display:flex; align-items:center; gap:10px; padding:12px; border:1.5px solid var(--ink); border-radius:10px;
    background:var(--card); margin-top:16px;
  }
  .paynow-row .icon{font-size:20px;}
  .paynow-row .t{font-size:12.5px; font-weight:700;}
  .paynow-row .s{font-size:10.5px; color:var(--ink-soft);}

  .feature-list{list-style:none; padding:0; margin:16px 0 0;}
  .feature-list li{display:flex; gap:10px; align-items:flex-start; font-size:13px; padding:9px 0; border-bottom:1px solid var(--line);}
  .feature-list li:last-child{border-bottom:none;}
  .feature-list .tick{color:var(--olive); font-weight:800; flex:0 0 auto;}

  .success-box{
    text-align:center; padding:40px 16px;
  }
  .success-box .glyph{font-size:44px; margin-bottom:14px;}
  .success-box h2{font-family:'Anton',sans-serif; font-size:20px; margin:0 0 8px;}
  .success-box p{font-size:13px; color:var(--ink-soft); line-height:1.5; margin:0 0 20px;}
  .disclaimer{font-size:10.5px; color:var(--ink-soft); text-align:center; margin-top:14px; line-height:1.5;}

  /* ---------- Bottom nav ---------- */
  .bottomnav{
    position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:480px;
    background:var(--ink); border-top:2px solid var(--ink); display:flex; z-index:30;
  }
  .navbtn{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; padding:11px 0 9px;
    color:#a9ad9c; cursor:pointer; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.03em;
    background:none; border:none; font-family:'Inter';
  }
  .navbtn.active{color:var(--sunny);}
  .navbtn svg{width:20px;height:20px;}
  .nav-icon-wrap{position:relative; display:inline-flex;}
  .nav-badge{
    position:absolute; top:-6px; right:-9px; background:var(--hdb-red); color:#fff;
    font-family:'IBM Plex Mono',monospace; font-size:9px; font-weight:800; min-width:15px; height:15px;
    border-radius:50%; align-items:center; justify-content:center; padding:0 3px; border:1.5px solid var(--ink);
  }

  a{color:inherit;}
  ::-webkit-scrollbar{display:none;}

/* ---------- Auth / onboarding (new for the real app) ---------- */
.auth-wrap{ display:flex; flex-direction:column; justify-content:center; min-height:100vh; padding:24px; }
.auth-card{
  background:var(--card); border:2px solid var(--ink); border-radius:16px; padding:28px 22px;
  box-shadow:var(--shadow); text-align:center;
}
.auth-card .glyph{font-size:38px; margin-bottom:10px;}
.auth-card h1{font-family:'Anton',sans-serif; font-size:24px; margin:0 0 8px;}
.auth-card p{font-size:13px; color:var(--ink-soft); line-height:1.5; margin:0 0 18px;}
.auth-card input{width:100%; padding:12px; border-radius:9px; border:2px solid var(--ink); font-family:'Inter'; font-size:16px; margin-bottom:12px; background:#fff;}
.auth-msg{font-size:12.5px; margin-top:12px; line-height:1.5;}
.auth-msg.error{color:var(--hdb-red); font-weight:600;}
.auth-msg.ok{color:var(--olive); font-weight:600;}
.center-loader{display:flex; align-items:center; justify-content:center; min-height:100vh; font-family:'IBM Plex Mono',monospace; color:var(--ink-soft); font-size:13px;}
.toast{
  position:fixed; bottom:78px; left:50%; transform:translateX(-50%); background:var(--ink); color:var(--terrazzo);
  padding:10px 16px; border-radius:10px; font-size:12.5px; font-weight:600; z-index:100; box-shadow:0 4px 0 rgba(0,0,0,0.3);
  max-width:88%; text-align:center;
}