:root{
    --navy-deep:#0B1F3A;
    --navy-mid:#123159;
    --navy-hero:#0E2A4E;
    --gold:#C9932E;
    --gold-dark:#9C6E1E;
    --green:#1F7A3D;
    --green-dark:#155C2C;
    --purple:#5B3E8C;
    --blue:#2C6E9E;
    --orange:#C9761E;
    --ivory:#FBF9F4;
    --paper:#F4F1EA;
    --ink:#16233A;
    --ink-soft:#5B677D;
    --border:#DDE2E8;
    --tile-red:#B23A2E;
    --tile-green:#2F6B3E;
  }
  *{box-sizing:border-box;}
  /* Several containers (.topbar, .body-wrap, .auth-gate) set `display`
     directly on the class, which ties with the UA stylesheet's `[hidden]`
     rule on specificity — without this override, toggling `.hidden` from
     JS silently does nothing on those elements. */
  [hidden]{display:none !important;}
  body{
    margin:0;
    font-family:'Source Sans Pro','Segoe UI',sans-serif;
    background:var(--paper);
    color:var(--ink);
  }
  h1,h2,h3{font-family:'Georgia','Times New Roman',serif; margin:0;}

  /* ===== HERO / TOPBAR ===== */
  .topbar{
    position:relative;
    height:128px;
    background:
      linear-gradient(180deg, rgba(11,31,58,0.55), rgba(11,31,58,0.75)),
      linear-gradient(180deg, #cfe4f2 0%, #a9c9de 35%, #7c9fb8 55%, #4f6f88 70%, var(--navy-hero) 100%);
    display:flex; align-items:center; justify-content:space-between;
    padding:0 28px;
    overflow:hidden;
    color:#fff;
  }
  .mtn{position:absolute; bottom:0; left:0; width:100%; height:70px; opacity:0.9;}
  .mtn.m1{background:var(--navy-hero); clip-path:polygon(0% 100%,0% 55%,10% 30%,18% 48%,28% 15%,38% 45%,48% 20%,58% 50%,68% 25%,78% 42%,88% 18%,100% 40%,100% 100%);}
  .mtn.m2{background:#2c4f6e; opacity:0.7; height:50px; clip-path:polygon(0% 100%,0% 70%,15% 40%,25% 62%,40% 30%,55% 58%,70% 35%,85% 55%,100% 30%,100% 100%);}

  .brand-block{display:flex; align-items:center; gap:16px; position:relative; z-index:2;}
  .tile-pair{position:relative; width:70px; height:56px; flex-shrink:0;}
  .tile{position:absolute; width:40px; height:52px; border-radius:6px; background:linear-gradient(160deg,#fff,#eee6d3); box-shadow:0 4px 10px rgba(0,0,0,0.35); display:flex; align-items:center; justify-content:center;}
  .tile.t1{left:0; top:4px; transform:rotate(-8deg);}
  .tile.t2{left:26px; top:0; transform:rotate(7deg);}
  .tile-glyph-red{color:var(--tile-red); font-size:24px; font-weight:900;}
  .tile-bamboo{display:flex; gap:3px;}
  .tile-bamboo i{width:5px; height:26px; background:var(--tile-green); border-radius:2px; display:inline-block;}

  .brand-text .name{font-size:26px; font-weight:800; letter-spacing:1px; line-height:1;}
  .brand-text .sub{font-size:12px; letter-spacing:2px; color:#dfe8f0; margin-top:2px;}

  .tagline{
    position:relative; z-index:2;
    font-family:Georgia, serif; font-style:italic; font-size:22px; color:#fff;
    text-shadow:0 2px 6px rgba(0,0,0,0.4);
  }

  .user-block{display:flex; align-items:center; gap:12px; position:relative; z-index:2;}
  .avatar-photo{
    width:44px; height:44px; border-radius:50%; border:2px solid #fff;
    background:linear-gradient(135deg,#e8c896,#c68a4e);
    display:flex; align-items:center; justify-content:center; font-weight:700; color:#5c3a1a; font-size:15px;
  }
  .welcome-text{font-size:14px; font-weight:600;}
  .welcome-text small{display:block; font-size:11px; font-weight:400; color:#cfe0ee;}
  .role-badge{display:inline-block; margin-left:8px; font-size:10px; font-weight:800; letter-spacing:0.4px; text-transform:uppercase; background:var(--gold); color:var(--navy-deep); padding:2px 8px; border-radius:10px; vertical-align:middle;}
  .topbar-install-btn{
    display:block; margin-top:5px; font-size:11px; font-weight:700; font-family:inherit;
    background:rgba(255,255,255,0.15); color:#fff; border:1px solid rgba(255,255,255,0.55);
    border-radius:12px; padding:3px 10px; cursor:pointer;
  }
  .topbar-install-btn:hover{background:rgba(255,255,255,0.28);}
  .live-badge{display:inline-block; margin-left:8px; font-size:10px; font-weight:800; letter-spacing:0.4px; text-transform:uppercase; background:var(--green); color:#fff; padding:2px 8px; border-radius:10px; vertical-align:middle;}
  .gear{font-size:18px; opacity:0.85; cursor:pointer;}
  .avatar-photo-lg{
    width:64px; height:64px; border-radius:50%; flex-shrink:0;
    background:linear-gradient(135deg,#e8c896,#c68a4e);
    display:flex; align-items:center; justify-content:center; font-weight:700; color:#5c3a1a; font-size:20px;
  }

  /* ===== LAYOUT ===== */
  .body-wrap{display:flex; min-height:calc(100vh - 128px);}
  .sidebar{
    width:216px; flex-shrink:0; background:var(--navy-deep); color:#fff;
    display:flex; flex-direction:column; padding:18px 0;
  }
  .nav-item{
    display:flex; align-items:center; gap:12px; padding:13px 22px; cursor:pointer;
    font-size:14.5px; font-weight:600; color:#c9d4e0;
    border-left:4px solid transparent;
  }
  .nav-item .ic{width:20px; text-align:center; font-size:16px;}
  .nav-item:hover{background:rgba(255,255,255,0.05); color:#fff;}
  .nav-item.active{background:var(--blue); color:#fff; border-left-color:var(--gold);}
  .sidebar-quote{
    margin-top:auto; padding:24px 22px; font-family:Georgia,serif; font-style:italic;
    font-size:13px; color:#9fb2c8; line-height:1.6; border-top:1px solid rgba(255,255,255,0.1);
  }

  .main{flex:1; padding:26px 30px 60px; min-width:0;}
  .view{display:none;}
  .view.active{display:block; animation:fadein .25s ease;}
  @keyframes fadein{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}

  .view-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;}
  .view-title-row{display:flex; align-items:center; gap:12px;}
  .mini-tile{width:34px; height:44px; border-radius:5px; background:linear-gradient(160deg,#fff,#eee6d3); box-shadow:0 2px 6px rgba(0,0,0,0.25); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
  .view-title{font-size:26px; font-weight:700; color:var(--navy-deep);}
  .btn{
    font-family:inherit; font-size:13.5px; font-weight:700; cursor:pointer; border-radius:8px;
    padding:10px 18px; border:1.5px solid transparent; display:inline-flex; align-items:center; gap:6px;
  }
  .btn-outline{background:#fff; border-color:var(--border); color:var(--navy-deep);}
  .btn-outline:hover{border-color:var(--blue);}
  .btn-green{background:var(--green); color:#fff;}
  .btn-green:hover{background:var(--green-dark);}
  .btn-navy{background:var(--navy-deep); color:#fff;}
  .btn[disabled]{opacity:0.45; cursor:not-allowed;}

  /* ===== DASHBOARD (HOME) ===== */
  .dashboard-grid{display:grid; grid-template-columns:2fr 1fr; gap:22px; align-items:start;}

  .next-game-card{
    background:#eef7ee; border:2px solid var(--green); border-radius:12px; padding:20px; margin-bottom:20px; position:relative;
  }
  .next-game-tag{
    position:absolute; top:-13px; left:20px; background:var(--green); color:#fff; font-size:11px;
    font-weight:800; letter-spacing:1px; padding:4px 12px; border-radius:5px;
  }
  .next-game-row{display:flex; gap:20px; align-items:center; margin-top:8px;}
  .date-block{
    background:#fff; border:1.5px solid var(--border); border-radius:8px; text-align:center; padding:8px 14px; min-width:82px;
  }
  .date-block .dow{background:var(--green); color:#fff; font-size:11px; font-weight:800; letter-spacing:1px; padding:3px 0; border-radius:4px; margin:-8px -14px 6px;}
  .date-block .day{font-size:30px; font-weight:800; color:var(--navy-deep); line-height:1;}
  .date-block .mon{font-size:12px; color:var(--ink-soft); font-weight:700; text-transform:uppercase;}
  .game-info{flex:1;}
  .game-time{font-size:19px; font-weight:800; color:var(--navy-deep);}
  .game-loc{font-size:15px; color:var(--ink-soft); margin-top:2px;}
  .game-addr{font-size:13px; color:var(--ink-soft); margin-top:2px;}
  .players-block{text-align:center; min-width:120px;}
  .players-count{font-size:20px; font-weight:800; color:var(--navy-deep);}
  .players-label{font-size:11px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.5px;}
  .avatars-row{display:flex; flex-wrap:wrap; gap:3px; justify-content:center; margin:6px 0; max-width:130px;}
  .next-game-attendees{font-size:11px; color:var(--ink-soft); line-height:1.4; max-width:130px; margin-bottom:6px;}
  .mini-avatar{width:22px; height:22px; border-radius:50%; background:var(--blue); border:1px solid #fff; flex-shrink:0;}
  .seat-pill{display:inline-block; background:var(--green); color:#fff; font-size:10.5px; font-weight:800; padding:3px 10px; border-radius:12px; letter-spacing:0.3px;}
  .next-game-actions{display:flex; gap:10px; margin-top:16px;}

  .section-label{font-size:16px; font-weight:700; color:var(--navy-deep); margin:22px 0 12px; display:flex; align-items:center; gap:10px;}
  .section-label::after{content:''; flex:1; height:1px; background:var(--border);}

  .game-row{
    display:flex; align-items:center; gap:18px; background:#fff; border:1px solid var(--border); border-radius:10px;
    padding:12px 16px; margin-bottom:10px; cursor:pointer;
  }
  .game-row:hover{border-color:var(--blue);}
  .game-row .date-block{min-width:60px; padding:6px 10px;}
  .game-row .date-block .day{font-size:22px;}
  .game-row-info{flex:1;}
  .game-row-time{font-size:14.5px; font-weight:700; color:var(--navy-deep);}
  .game-row-loc{font-size:13px; color:var(--ink-soft);}
  .game-row-attendees{font-size:12px; color:var(--ink-soft); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;}
  .game-row-players{text-align:center; min-width:80px;}
  .game-row-add-cal{font-size:16px; cursor:pointer; padding:6px; border-radius:6px; opacity:0.7;}
  .game-row-add-cal:hover{opacity:1; background:#eef1f5;}
  .chevron{color:var(--ink-soft); font-size:18px;}

  .view-all-link{text-align:center; margin-top:6px;}

  /* side panel */
  .side-card{background:#fff; border:1px solid var(--border); border-radius:12px; padding:18px; margin-bottom:20px;}
  .cal-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}
  .cal-header .arrow{cursor:pointer; font-size:16px; color:var(--navy-deep); padding:4px 8px;}
  .cal-title{font-size:15px; font-weight:800; color:var(--navy-deep);}
  .cal-nav-btn{
    cursor:pointer; font-size:16px; font-weight:700; color:var(--navy-deep); padding:9px 18px;
    border:1.5px solid var(--border); border-radius:8px; background:#fff; user-select:none;
  }
  .cal-nav-btn:hover{border-color:var(--blue); color:var(--blue);}
  .cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px; text-align:center;}
  .cal-dow{font-size:10px; font-weight:700; color:var(--ink-soft);}
  .cal-day{font-size:12.5px; padding:6px 0; border-radius:6px; position:relative; color:var(--ink);}
  .cal-day.other{color:#c7cdd6;}
  .cal-day.today{background:var(--navy-deep); color:#fff; font-weight:800;}
  .cal-day.has-game::after{content:'中'; position:absolute; bottom:-1px; right:2px; font-size:8px; color:var(--tile-red); font-weight:800;}
  .cal-day.has-game:hover::after{
    content:attr(data-tooltip); position:absolute; bottom:100%; left:50%; transform:translateX(-50%); margin-bottom:8px; z-index:20;
    background:var(--navy-deep); color:#fff; font-size:11.5px; font-weight:600; line-height:1.5; white-space:pre-line; text-align:left;
    padding:10px 12px; border-radius:8px; box-shadow:0 8px 20px rgba(0,0,0,0.28); width:max-content; max-width:200px; pointer-events:none;
  }
  .cal-day.has-game:hover::before{
    content:''; position:absolute; bottom:100%; left:50%; transform:translateX(-50%); margin-bottom:2px; z-index:20;
    border:6px solid transparent; border-top-color:var(--navy-deep); pointer-events:none;
  }
  .cal-legend{font-size:11px; color:var(--ink-soft); margin-top:10px; text-align:center;}

  .msg-row{display:flex; gap:10px; padding:10px 0; border-bottom:1px solid var(--border);}
  .msg-row:last-child{border-bottom:none;}
  .msg-avatar{width:34px; height:34px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:12px;}
  .msg-body{flex:1; min-width:0;}
  .msg-top{display:flex; justify-content:space-between;}
  .msg-name{font-size:13px; font-weight:700; color:var(--navy-deep);}
  .msg-time{font-size:11px; color:var(--ink-soft);}
  .msg-text{font-size:12.5px; color:var(--ink-soft); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .msg-delete-btn, .msg-edit-btn{cursor:pointer; opacity:0.75; flex-shrink:0; background:none; border:none; padding:0;}
  .msg-delete-btn{color:var(--orange);}
  .msg-edit-btn{color:var(--blue);}
  .msg-delete-btn:hover, .msg-edit-btn:hover{opacity:1;}
  .msg-row .msg-delete-btn, .msg-row .msg-edit-btn{align-self:center; font-size:14px; margin-left:4px;}
  .chat-meta .msg-delete-btn, .chat-meta .msg-edit-btn{font-size:11px; margin-left:6px;}

  /* action tiles */
  .action-tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:24px;}
  .action-tile{
    border-radius:10px; padding:18px 20px; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  }
  .action-tile .ic{font-size:26px; margin-right:14px;}
  .action-tile .txt .t1{font-size:15px; font-weight:800;}
  .action-tile .txt .t2{font-size:12px; opacity:0.85;}
  .action-tile.green{background:var(--green);}
  .action-tile.purple{background:var(--purple);}
  .action-tile.blue{background:var(--blue);}
  .action-tile.orange{background:var(--orange);}

  /* ===== CALENDAR VIEW ===== */
  .cal-big-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:6px;}
  .cal-big-dow{font-size:11px; font-weight:800; color:var(--ink-soft); text-align:center; padding-bottom:6px; text-transform:uppercase;}
  .cal-big-day{
    background:#fff; border:1px solid var(--border); border-radius:8px; min-height:84px; padding:6px; font-size:12px; color:var(--ink); cursor:pointer;
  }
  .cal-big-day:hover{border-color:var(--blue);}
  .cal-big-day.other{background:#f3f1ec; color:#b9bfc8;}
  .cal-big-day.today{border-color:var(--navy-deep); border-width:2px;}
  .cal-big-day.today .num{color:var(--navy-deep);}
  .cal-big-day .num{font-weight:700; font-size:13px;}
  .cal-big-day .game-chip{
    position:relative; margin-top:6px; background:#eef7ee; border:1px solid var(--green); color:var(--green-dark);
    font-size:10px; font-weight:700; padding:2px 5px; border-radius:5px; cursor:default;
  }
  .cal-big-day .game-chip:hover::after{
    content:attr(data-tooltip); position:absolute; bottom:100%; left:0; margin-bottom:8px; z-index:20;
    background:var(--navy-deep); color:#fff; font-size:11.5px; font-weight:600; line-height:1.5; white-space:pre-line;
    padding:10px 12px; border-radius:8px; box-shadow:0 8px 20px rgba(0,0,0,0.28); width:max-content; max-width:220px; pointer-events:none;
  }
  .cal-big-day .game-chip:hover::before{
    content:''; position:absolute; bottom:100%; left:10px; margin-bottom:2px; z-index:20;
    border:6px solid transparent; border-top-color:var(--navy-deep); pointer-events:none;
  }

  /* ===== FORM (Schedule Game) ===== */
  .form-card{background:#fff; border:1px solid var(--border); border-radius:12px; padding:24px; max-width:640px;}
  .field{margin-bottom:16px;}
  .field label{display:block; font-size:12.5px; font-weight:700; color:var(--ink-soft); margin-bottom:6px; text-transform:uppercase; letter-spacing:0.4px;}
  .field input, .field select, .field textarea{
    width:100%; padding:10px 12px; border:1.5px solid var(--border); border-radius:8px; font-size:14px; font-family:inherit; color:var(--ink);
  }
  .field-row{display:flex; gap:16px;}
  .password-field{position:relative;}
  .password-field input{padding-right:40px;}
  .password-toggle-btn{
    position:absolute; right:4px; top:50%; transform:translateY(-50%); width:32px; height:32px;
    background:none; border:none; cursor:pointer; font-size:16px; line-height:1; color:var(--ink-soft);
    display:flex; align-items:center; justify-content:center;
  }
  .password-toggle-btn:hover{color:var(--ink);}
  .field-row .field{flex:1;}
  .invite-grid{display:flex; flex-wrap:wrap; gap:8px;}
  .invite-chip{padding:8px 14px; border:1.5px solid var(--border); border-radius:20px; font-size:13px; cursor:pointer; font-weight:600;}
  .invite-chip.selected{background:var(--blue); border-color:var(--blue); color:#fff;}

  /* Reusable "pick a member" dropdown — invite players, message recipient,
     member directory — each row shows their avatar/photo and live status. */
  .dropdown-select{position:relative;}
  .dropdown-select-trigger{
    width:100%; padding:10px 12px; border:1.5px solid var(--border); border-radius:8px; font-size:14px; font-family:inherit; color:var(--ink);
    background:#fff; text-align:left; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:8px;
  }
  .dropdown-select-trigger:hover{border-color:var(--blue);}
  .dropdown-select-trigger::after{content:'▾'; color:var(--ink-soft); font-size:12px; flex-shrink:0;}
  .dropdown-select-panel{
    position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:30; background:#fff; border:1px solid var(--border); border-radius:10px;
    box-shadow:0 12px 30px rgba(0,0,0,0.18); max-height:320px; overflow-y:auto; padding:6px;
  }
  .dropdown-select-row{display:flex; align-items:center; gap:10px; padding:8px; border-radius:8px; cursor:pointer;}
  .dropdown-select-row:hover{background:var(--paper);}
  .dropdown-select-row.selected{background:#eaf1f7;}
  .dropdown-select-row-avatar{width:30px; height:30px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:11px;}
  .dropdown-select-row-name{flex:1; min-width:0; font-size:13.5px; font-weight:600; color:var(--ink);}
  .dropdown-select-row-preview{font-size:11.5px; font-weight:400; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .dropdown-select-check{color:var(--green); font-weight:800; opacity:0; flex-shrink:0;}
  .dropdown-select-row.selected .dropdown-select-check{opacity:1;}

  /* ===== MESSAGES VIEW ===== */
  .broadcast-card{background:#fff; border:1px solid var(--border); border-radius:12px; padding:18px; margin-bottom:16px;}
  .broadcast-card label{display:block; font-size:12.5px; font-weight:700; color:var(--ink-soft); margin-bottom:8px; text-transform:uppercase; letter-spacing:0.4px;}
  .broadcast-card .contact-list{margin-bottom:18px;}
  .broadcast-card textarea{width:100%; padding:10px 12px; border:1.5px solid var(--border); border-radius:8px; font-size:14px; font-family:inherit; color:var(--ink); resize:vertical;}
  .broadcast-actions{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:12px;}
  .broadcast-count{font-size:12.5px; color:var(--ink-soft);}

  .contact-list{
    display:flex; flex-direction:column; gap:2px; max-height:260px; overflow-y:auto;
    border:1px solid var(--border); border-radius:10px; padding:6px;
  }
  .contact-row{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; cursor:pointer;}
  .contact-row:hover{background:#f7f9fc;}
  .contact-row.selected{background:#eaf1fb;}
  .contact-row-avatar{
    width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    color:#fff; font-weight:800; font-size:12px; flex-shrink:0;
  }
  .contact-row-name{flex:1; font-size:13.5px; font-weight:600; color:var(--ink);}
  .contact-row-check{
    width:20px; height:20px; border-radius:50%; border:1.5px solid var(--border); flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:transparent;
  }
  .contact-row.selected .contact-row-check{background:var(--blue); border-color:var(--blue); color:#fff;}
  .thread-empty{padding:16px; font-size:13px; color:var(--ink-soft);}
  .messages-layout{display:flex; flex-direction:column; gap:14px;}
  .messages-picker-bar .dropdown-select{max-width:420px;}
  .thread-chat{display:flex; flex-direction:column; height:480px; background:#fff; border:1px solid var(--border); border-radius:12px; overflow:hidden;}
  .thread-chat-header{padding:14px 18px; border-bottom:1px solid var(--border); font-weight:700; color:var(--navy-deep);}
  .thread-chat-body{flex:1; padding:18px; overflow-y:auto; display:flex; flex-direction:column; gap:12px;}
  .chat-bubble{max-width:70%; padding:10px 14px; border-radius:12px; font-size:13.5px;}
  .chat-bubble.them{background:#f0f2f5; align-self:flex-start;}
  .chat-bubble.me{background:var(--blue); color:#fff; align-self:flex-end;}
  .chat-meta{font-size:10.5px; color:var(--ink-soft); margin-top:3px;}
  .thread-chat-input{display:flex; gap:10px; padding:14px; border-top:1px solid var(--border);}
  .thread-chat-input input{flex:1; padding:10px 12px; border:1.5px solid var(--border); border-radius:20px; font-size:13.5px;}

  /* ===== MEMBERS VIEW ===== */
  .members-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:14px;}
  .member-card{background:#fff; border:1px solid var(--border); border-radius:10px; padding:16px; display:flex; gap:12px; align-items:center;}
  .member-avatar{width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:15px; flex-shrink:0;}
  .member-name{font-size:14.5px; font-weight:700; color:var(--navy-deep);}
  .member-meta{font-size:12px; color:var(--ink-soft); margin-top:2px;}
  .member-card-editing{flex-direction:column; align-items:stretch; gap:0;}
  .member-card-editing .field-row{margin-bottom:12px;}
  .member-card-editing .field{margin-bottom:0;}

  /* ===== LOCATIONS VIEW ===== */
  .location-card{background:#fff; border:1px solid var(--border); border-radius:10px; padding:16px; margin-bottom:12px; display:flex; justify-content:space-between; align-items:center;}
  .location-name{font-size:15px; font-weight:700; color:var(--navy-deep);}
  .location-addr{font-size:13px; color:var(--ink-soft); margin-top:2px;}

  /* ===== MARKETPLACE VIEW ===== */
  .marketplace-subtitle{font-size:13px; color:var(--ink-soft); margin-top:4px; font-weight:400;}
  .market-form-card{background:#fff; border:1px solid var(--border); border-radius:12px; padding:22px; margin-bottom:20px;}
  .market-form-title{font-size:16px; font-weight:800; color:var(--navy-deep); margin-bottom:14px;}
  .market-filters{display:flex; gap:8px; margin-bottom:16px;}
  .market-filter-chip{padding:7px 16px; border:1.5px solid var(--border); border-radius:20px; font-size:13px; font-weight:700; cursor:pointer; background:#fff; color:var(--navy-deep);}
  .market-filter-chip.selected{background:var(--navy-deep); border-color:var(--navy-deep); color:#fff;}
  .market-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:16px;}
  .market-card{background:#fff; border:1px solid var(--border); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; cursor:pointer;}
  .market-photo{height:150px; position:relative; display:flex; align-items:center; justify-content:center; font-size:44px; background:linear-gradient(160deg,#eef1f5,#e2e7ee); overflow:hidden;}
  .market-photo img{width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in;}
  .market-photo-arrow{
    position:absolute; top:50%; transform:translateY(-50%); width:28px; height:28px; border-radius:50%;
    background:rgba(11,31,58,0.55); color:#fff; display:flex; align-items:center; justify-content:center;
    font-size:18px; cursor:pointer; line-height:1;
  }
  .market-photo-arrow-left{left:6px;}
  .market-photo-arrow-right{right:6px;}
  .market-photo-dots{position:absolute; bottom:7px; left:0; right:0; display:flex; justify-content:center; gap:4px;}
  .market-photo-dot{width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,0.65);}
  .market-photo-dot.active{background:#fff;}

  .mkt-photo-slots{display:flex; flex-wrap:wrap; gap:12px;}
  .mkt-photo-slot{
    position:relative; width:110px; height:110px; border:1.5px dashed var(--border); border-radius:10px;
    background:#f8f9fb; overflow:hidden; display:flex; align-items:center; justify-content:center;
  }
  .mkt-photo-slot-img{width:100%; height:100%; object-fit:cover;}
  .mkt-photo-slot-label{font-size:11.5px; font-weight:700; color:var(--ink-soft); text-align:center; cursor:pointer; padding:0 8px; text-transform:none; letter-spacing:0;}
  .mkt-photo-remove{
    position:absolute; top:4px; right:4px; width:20px; height:20px; border-radius:50%; background:rgba(11,31,58,0.75); color:#fff;
    font-size:11px; display:flex; align-items:center; justify-content:center; cursor:pointer;
  }
  .market-body{padding:14px; flex:1; display:flex; flex-direction:column; gap:6px;}
  .market-price{display:inline-block; align-self:flex-start; font-size:13px; font-weight:800; padding:3px 10px; border-radius:6px; background:var(--navy-deep); color:#fff;}
  .market-price.free{background:var(--green);}
  .market-title{font-size:15px; font-weight:700; color:var(--navy-deep);}
  .market-desc{font-size:12.5px; color:var(--ink-soft); line-height:1.5; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;}
  .market-meta{display:flex; align-items:center; gap:8px; margin-top:auto; padding-top:10px; border-top:1px solid var(--border);}
  .market-seller-avatar{width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:11px; flex-shrink:0;}
  .market-seller-name{font-size:12.5px; font-weight:700; color:var(--navy-deep);}
  .market-posted{font-size:11px; color:var(--ink-soft); margin-left:auto;}
  .market-remove{font-size:11.5px; color:var(--orange); font-weight:700; text-align:right; margin-top:4px; display:flex; gap:6px; justify-content:flex-end;}
  .market-remove span{cursor:pointer;}
  .market-hidden-badge{display:inline-block; align-self:flex-start; font-size:11px; font-weight:800; padding:2px 8px; border-radius:6px; background:var(--orange); color:#fff; letter-spacing:0.5px; text-transform:uppercase;}
  .market-empty{color:var(--ink-soft); grid-column:1/-1; text-align:center; padding:30px 0;}

  .lightbox-content{position:relative; max-width:min(94vw,900px); max-height:90vh; display:flex; align-items:center; justify-content:center; overflow:auto;}
  .lightbox-content img{max-width:100%; max-height:90vh; border-radius:10px; display:block; object-fit:contain; cursor:zoom-in;}
  .lightbox-content img.zoomed{max-width:none; max-height:none; width:auto; height:auto; cursor:zoom-out;}
  .lightbox-close{
    position:absolute; top:-14px; right:-14px; width:32px; height:32px; border-radius:50%; background:#fff; color:var(--navy-deep);
    font-size:15px; font-weight:700; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 4px 12px rgba(0,0,0,0.3); z-index:2;
  }
  .lightbox-nav{position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; padding:0 -8px; pointer-events:none;}
  .lightbox-nav span{
    pointer-events:auto; cursor:pointer; width:40px; height:40px; border-radius:50%; background:rgba(11,31,58,0.55); color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:22px; margin:0 -18px;
  }
  .lightbox-hint{
    position:absolute; bottom:10px; left:50%; transform:translateX(-50%); background:rgba(11,31,58,0.65); color:#fff;
    font-size:11.5px; font-weight:600; padding:4px 10px; border-radius:12px; pointer-events:none;
  }

  .market-detail-card{position:relative; background:#fff; border-radius:14px; max-width:560px; width:90vw; max-height:85vh; overflow-y:auto; padding:26px;}
  .market-detail-photo{margin:-26px -26px 16px -26px; position:relative;}
  .market-detail-photo > img{width:100%; max-height:320px; object-fit:cover; display:block; cursor:zoom-in; border-radius:14px 14px 0 0;}
  .market-detail-thumbs{display:flex; gap:8px; padding:10px 16px; background:#f8f9fb; flex-wrap:wrap;}
  .market-detail-thumbs img{width:56px; height:56px; object-fit:cover; border-radius:8px; cursor:pointer; border:1.5px solid var(--border);}
  .market-detail-title{font-size:19px; font-weight:800; color:var(--navy-deep); margin-top:8px;}
  .market-detail-desc{font-size:14px; color:var(--ink); line-height:1.6; white-space:pre-wrap; margin:10px 0;}

  /* ===== ABOUT VIEW ===== */
  .about-card{background:#fff; border:1px solid var(--border); border-radius:12px; padding:26px; max-width:680px; line-height:1.7; font-size:14.5px; color:var(--ink);}
  .about-card h3{margin-bottom:10px; color:var(--navy-deep);}
  .about-list{margin:0 0 4px 20px; padding:0;}
  .about-list li{margin-bottom:8px; line-height:1.6;}

  /* Deliberately larger and more spaced out than the rest of the app —
     this section is written for players who may not be comfortable with
     phones or computers, so extra breathing room and bigger touch targets
     matter more here than visual density. */
  .howto-section{margin-top:30px; padding-top:26px; border-top:1px solid var(--border);}
  .howto-intro{font-size:15px; color:var(--ink-soft); margin-bottom:22px; line-height:1.7;}
  .howto-step{display:flex; gap:16px; margin-bottom:22px; align-items:flex-start;}
  .howto-num{
    flex-shrink:0; width:38px; height:38px; border-radius:50%; background:var(--navy-deep); color:#fff;
    font-size:18px; font-weight:800; display:flex; align-items:center; justify-content:center;
  }
  .howto-text{font-size:15.5px; line-height:1.75; color:var(--ink); padding-top:5px;}
  .howto-text strong{display:block; color:var(--navy-deep); font-size:17px; margin-bottom:3px;}

  .app-footer{margin-top:40px; padding:18px 0; border-top:1px solid var(--border); text-align:center; font-size:11.5px; line-height:1.6; color:var(--ink-soft);}
  .footer-link{color:var(--blue); cursor:pointer; font-weight:700; text-decoration:underline;}
  .footer-link-light{color:#eef3f8; text-shadow:0 1px 3px rgba(0,0,0,0.35);}

  .privacy-policy-card{max-width:520px; max-height:80vh; overflow-y:auto;}
  .privacy-policy-card h2{color:var(--navy-deep); margin-bottom:4px;}
  .privacy-policy-card h3{color:var(--navy-deep); font-size:14px; margin:16px 0 6px;}
  .privacy-policy-card h3:first-of-type{margin-top:4px;}

  .toast{
    position:fixed; bottom:26px; left:50%; transform:translateX(-50%); background:var(--navy-deep); color:#fff;
    padding:11px 22px; border-radius:24px; font-size:13.5px; opacity:0; transition:opacity .3s ease; pointer-events:none; z-index:200;
  }
  .toast.show{opacity:1;}

  /* Hamburger + drawer scrim: hidden by default (desktop), shown at the
     tablet breakpoint below. Sidebar itself only becomes an overlay
     drawer inside that same breakpoint — on desktop it stays in normal
     flow as a permanent column. */
  .hamburger{
    display:none; background:rgba(255,255,255,0.12); border:none; color:#fff;
    width:38px; height:38px; border-radius:8px; font-size:18px; cursor:pointer; flex-shrink:0;
  }
  .scrim{display:none; position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:60;}
  .scrim.show{display:block;}

  /* ===== ACCOUNT (gear icon overlay) ===== */
  .login-overlay{display:none; position:fixed; inset:0; background:rgba(11,31,58,0.55); z-index:100; align-items:center; justify-content:center; padding:20px;}
  .login-overlay.show{display:flex;}
  .login-card{background:#fff; border-radius:14px; padding:28px; max-width:380px; width:100%; box-shadow:0 20px 50px rgba(0,0,0,0.35);}
  .login-card h3{color:var(--navy-deep); margin-bottom:10px;}

  .game-details-card{max-width:420px;}
  .game-details-row{font-size:14px; color:var(--ink); margin-bottom:10px; line-height:1.5;}
  .game-details-attendees{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:10px;}
  .game-details-actions{display:flex; flex-direction:column; gap:10px; margin-top:16px;}
  .game-details-actions .btn{width:100%; justify-content:center;}

  .guest-stepper{display:flex; align-items:center; gap:10px; margin-top:14px; padding-top:14px; border-top:1px solid var(--border); font-size:13.5px; color:var(--ink);}
  .guest-stepper-btn{
    width:26px; height:26px; border-radius:50%; border:1.5px solid var(--border); background:#fff; color:var(--navy-deep);
    font-size:16px; font-weight:800; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
  }
  .guest-stepper-btn:disabled{opacity:0.35; cursor:default;}
  .guest-stepper-count{font-weight:800; min-width:14px; text-align:center;}
  .login-note{font-size:12.5px; color:var(--ink-soft); line-height:1.5; margin-bottom:18px;}
  .back-arrow{display:none; font-size:20px; margin-right:8px; cursor:pointer;}

  /* ===== AUTH GATE (sign in / reset / join — full screen) ===== */
  .auth-gate{
    position:fixed; inset:0; z-index:150; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px;
    background:
      linear-gradient(180deg, rgba(11,31,58,0.55), rgba(11,31,58,0.8)),
      linear-gradient(180deg, #cfe4f2 0%, #a9c9de 35%, #7c9fb8 55%, #4f6f88 70%, var(--navy-hero) 100%);
    overflow-y:auto;
  }
  .auth-card{background:#fff; border-radius:16px; padding:32px; max-width:420px; width:100%; box-shadow:0 24px 60px rgba(0,0,0,0.4); flex-shrink:0;}
  .auth-welcome-text{max-width:420px; width:100%; margin:20px auto 0; color:#eef3f8; font-size:12.5px; line-height:1.6; text-align:center; text-shadow:0 1px 3px rgba(0,0,0,0.35);}
  .auth-brand{display:flex; align-items:center; gap:14px; justify-content:center; margin-bottom:24px;}
  .auth-brand .brand-text .name{font-size:22px; font-weight:800; color:var(--navy-deep); letter-spacing:0.5px;}
  .auth-brand .brand-text .sub{font-size:10px; font-weight:700; color:var(--ink-soft); letter-spacing:1.5px;}
  .auth-card h2{color:var(--navy-deep); font-size:20px; margin-bottom:16px; text-align:center;}
  .auth-links{display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin-top:16px; font-size:12.5px;}
  .auth-links span{color:var(--blue); cursor:pointer; font-weight:700;}
  .auth-links span.auth-link-join{font-size:18px;}
  .auth-error{background:#fdecea; border:1px solid #f3c2bc; color:#8a2c1f; font-size:12.5px; padding:9px 12px; border-radius:8px; margin-bottom:14px; line-height:1.5;}
  .reset-code-display{background:#eef7ee; border:1px solid var(--green); color:var(--green-dark); font-size:12.5px; padding:12px 14px; border-radius:8px; margin-top:14px; line-height:1.6;}

  /* ============ TABLET (≤968px) ============ */
  @media (max-width: 968px){
    .hamburger{display:block;}
    .sidebar{
      position:fixed; top:0; left:0; height:100%; z-index:65; width:240px;
      transform:translateX(-100%); transition:transform .25s ease; padding-top:24px;
      overflow-y:auto;
    }
    .sidebar.open{transform:translateX(0); box-shadow:8px 0 24px rgba(0,0,0,0.3);}
    .dashboard-grid{grid-template-columns:1fr;}
    .action-tiles{grid-template-columns:repeat(2,1fr);}
    .members-grid{grid-template-columns:repeat(auto-fill, minmax(180px,1fr));}
  }

  /* ============ PHONE (≤600px) ============ */
  @media (max-width: 600px){
    .topbar{height:auto; min-height:84px; padding:12px 14px; flex-wrap:wrap; gap:8px;}
    .tagline{display:none;}
    .brand-text .name{font-size:19px;}
    .brand-text .sub{font-size:9px; letter-spacing:1px;}
    .tile-pair{width:50px; height:40px; transform:scale(0.8); transform-origin:left center;}
    .welcome-text{display:none;}
    .user-block{gap:8px;}
    .avatar-photo{width:36px; height:36px; font-size:13px;}

    .main{padding:16px 14px 50px;}
    .view-header{flex-wrap:wrap; gap:10px;}
    .view-title{font-size:21px;}
    .view-header .btn{font-size:12.5px; padding:8px 12px;}

    .next-game-row{flex-wrap:wrap; gap:14px;}
    .players-block{min-width:0; flex:1 1 100%; display:flex; align-items:center; justify-content:space-between; text-align:left;}
    .avatars-row{margin:0;}
    .next-game-actions{flex-wrap:wrap;}
    .next-game-actions .btn{flex:1 1 auto;}

    .game-row{flex-wrap:wrap;}
    .game-row-info{flex:1 1 60%;}
    .game-row-players{flex:1 1 auto; text-align:right;}

    .action-tiles{grid-template-columns:repeat(2,1fr); gap:10px;}
    .action-tile{padding:14px; flex-direction:column; align-items:flex-start; gap:6px;}
    .action-tile .ic{margin-right:0;}

    .cal-big-grid{gap:3px;}
    .cal-big-day{min-height:56px; padding:4px; font-size:10.5px;}
    .cal-big-day .num{font-size:11px;}
    .cal-big-day .game-chip{font-size:8.5px; padding:1px 3px;}
    .cal-nav-btn{font-size:13px; padding:7px 12px;}
    .cal-title{font-size:15px !important;}

    .field-row{flex-direction:column; gap:0;}

    .thread-chat{height:65vh;}

    .location-card{flex-wrap:wrap; gap:10px;}
    .market-grid{grid-template-columns:repeat(auto-fill, minmax(160px,1fr));}
  }

  /* ============ MOBILE APP SHELL (phone-first) ============ */
  html{-webkit-text-size-adjust:100%;}
  body{-webkit-tap-highlight-color:transparent; overscroll-behavior-y:none;}
  .bottom-nav{display:none;}

  @media (max-width: 968px){
    .bottom-nav{
      display:flex; position:fixed; left:0; right:0; bottom:0; z-index:70;
      background:var(--navy-deep); border-top:1px solid rgba(255,255,255,0.12);
      padding-bottom:env(safe-area-inset-bottom);
    }
    .bottom-nav[hidden]{display:none;}
    .bottom-nav-item{
      flex:1; min-height:58px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
      background:none; border:none; color:#9fb2c8; font-family:inherit; font-size:11px; font-weight:700; cursor:pointer;
      border-top:3px solid transparent;
    }
    .bottom-nav-item .ic{font-size:20px; line-height:1;}
    .bottom-nav-item.active{color:#fff; border-top-color:var(--gold);}
    .hamburger{display:none;}
    .main{padding-bottom:calc(84px + env(safe-area-inset-bottom));}
    .toast{bottom:calc(76px + env(safe-area-inset-bottom));}
    .sidebar{padding-bottom:calc(18px + env(safe-area-inset-bottom));}
    .nav-item{min-height:48px;}
  }

  @media (max-width: 600px){
    /* Compact sticky app bar instead of the tall desktop hero */
    .topbar{position:sticky; top:0; z-index:55; min-height:0; height:auto; flex-wrap:nowrap; padding:calc(8px + env(safe-area-inset-top)) 12px 8px; gap:8px;}
    .mtn{display:none;}
    .tile-pair{width:44px; height:36px;}
    .tile{width:26px; height:34px;}
    .tile-glyph-red{font-size:15px;}
    .tile-bamboo i{width:3px; height:16px;}
    .brand-block{gap:8px;}
    .brand-text .name{font-size:17px;}
    .brand-text .sub{display:none;}
    .user-block{margin-left:auto;}
    .welcome-text{display:block; font-size:12px; max-width:130px; text-align:right;}
    .welcome-text > span:first-child{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
    .role-badge{display:none;}
    .topbar-install-btn{margin:3px 0 0 auto; font-size:11px; padding:5px 10px; min-height:0; white-space:nowrap;}
    .avatar-photo{width:38px; height:38px;}
    .gear{font-size:22px; min-width:40px; min-height:40px; display:flex; align-items:center; justify-content:center;}
    .body-wrap{min-height:0;}

    /* Touch targets and no iOS zoom-on-focus */
    .field input, .field select, .field textarea, input, select, textarea{font-size:16px !important;}
    .field input, .field select{min-height:46px;}
    .btn{min-height:44px; justify-content:center;}
    .view-header .btn{min-height:44px; font-size:14px;}
    .auth-links span{padding:8px 0; display:inline-block;}

    /* Auth screen: full-bleed card, scrolls with the keyboard open */
    .auth-gate{justify-content:flex-start; padding:calc(16px + env(safe-area-inset-top)) 14px calc(24px + env(safe-area-inset-bottom));}
    .auth-card{padding:22px 18px; border-radius:14px;}
    .login-card, .form-card, .about-card{padding:18px;}

    /* Modals become bottom sheets */
    .login-overlay{align-items:flex-end; padding:0;}
    .login-overlay > *{width:100%; max-width:none; border-radius:16px 16px 0 0; max-height:88vh; overflow-y:auto; padding-bottom:calc(20px + env(safe-area-inset-bottom));}
    .market-detail-card{width:100vw; max-width:100vw;}
    .chat-bubble{max-width:85%;}
    .members-grid{grid-template-columns:1fr 1fr; gap:10px;}
  }

  a.nav-item{text-decoration:none;}

  /* ============ MESSAGES (WhatsApp / iMessage style) ============ */
  .unread-badge{
    display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px;
    border-radius:10px; background:var(--green); color:#fff; font-size:11px; font-weight:800; flex-shrink:0;
  }
  .unread-badge[hidden]{display:none;}
  .nav-item .nav-unread{margin-left:auto;}
  .bottom-nav-item .ic{position:relative;}
  .bottom-nav-item .nav-unread{position:absolute; top:-6px; left:60%; min-width:17px; height:17px; font-size:10px; padding:0 4px; background:#d63b2f;}

  .icon-btn{
    width:40px; height:40px; border-radius:50%; border:1.5px solid var(--border); background:#fff; cursor:pointer;
    font-size:17px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; font-family:inherit; color:var(--navy-deep);
  }
  .icon-btn:hover{border-color:var(--blue);}
  .icon-btn[hidden]{display:none;}
  .icon-btn-primary{background:var(--green); border-color:var(--green); color:#fff;}
  .icon-btn-plain{border:none; background:transparent; font-size:22px;}

  .msgs-app{display:grid; grid-template-columns:340px 1fr; height:calc(100vh - 128px - 90px); min-height:480px; background:#fff; border:1px solid var(--border); border-radius:12px; overflow:hidden;}
  .msgs-list-pane{display:flex; flex-direction:column; min-height:0; border-right:1px solid var(--border);}
  .msgs-list-header{display:flex; align-items:center; justify-content:space-between; padding:14px 14px 8px;}
  .msgs-list-header .view-title{font-size:22px;}
  .msgs-list-actions{display:flex; gap:8px;}
  .msgs-list-pane .broadcast-card{margin:0 12px 10px; padding:14px;}
  .convo-search{padding:4px 12px 10px;}
  .convo-search input{width:100%; padding:10px 14px; border:none; border-radius:20px; background:#f0f2f5; font-family:inherit; font-size:14px;}
  .convo-list{flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;}
  .convo-empty{padding:28px 20px; text-align:center; color:var(--ink-soft); font-size:14px; line-height:1.6;}
  .convo-row{display:flex; gap:12px; padding:11px 14px; cursor:pointer; align-items:center; border-bottom:1px solid #f1f3f6;}
  .convo-row:hover{background:#f7f9fc;}
  .convo-row.active{background:#eaf1fb;}
  .convo-avatar{width:48px; height:48px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:16px; background-size:cover; background-position:center;}
  .convo-avatar-group{background:var(--purple); font-size:22px;}
  .convo-main{flex:1; min-width:0;}
  .convo-top, .convo-bottom{display:flex; align-items:center; justify-content:space-between; gap:8px;}
  .convo-name{font-size:15.5px; font-weight:700; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .convo-time{font-size:12px; color:var(--ink-soft); flex-shrink:0;}
  .convo-time.unread{color:var(--green); font-weight:700;}
  .convo-preview{font-size:13.5px; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

  .msgs-chat-pane{display:flex; flex-direction:column; min-width:0; min-height:0; background:#efeae2;}
  .msgs-empty{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--ink-soft); font-size:14px; text-align:center; padding:20px;}
  .msgs-empty[hidden], .chat-panel[hidden]{display:none;}
  .chat-panel{display:flex; flex-direction:column; flex:1; min-height:0;}
  .chat-header{display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--navy-deep); color:#fff; flex-shrink:0;}
  .chat-header .convo-avatar{width:40px; height:40px; font-size:14px;}
  .chat-header-text{flex:1; min-width:0;}
  .chat-header-name{font-size:16px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .chat-header-sub{font-size:12px; color:#b9c8da; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .chat-header .icon-btn-plain{color:#fff;}
  .chat-back-btn{display:none; background:none; border:none; color:#fff; font-size:34px; line-height:1; padding:0 6px 4px 0; cursor:pointer; font-family:inherit;}

  .chat-messages{flex:1; min-height:0; overflow-y:auto; padding:12px 12px 8px; display:flex; flex-direction:column; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;}
  .chat-empty{margin:auto; background:rgba(255,255,255,0.75); padding:8px 16px; border-radius:14px; font-size:13px; color:var(--ink-soft);}
  .chat-day{display:flex; justify-content:center; margin:12px 0 8px;}
  .chat-day span{background:rgba(255,255,255,0.85); color:var(--ink-soft); font-size:12px; font-weight:600; padding:4px 12px; border-radius:12px; box-shadow:0 1px 1px rgba(0,0,0,0.08);}
  .bubble-row{display:flex; flex-direction:column; margin-top:2px;}
  .bubble-row.first{margin-top:8px;}
  .bubble-row.mine{align-items:flex-end;}
  .bubble-row.theirs{align-items:flex-start;}
  .bubble{position:relative; max-width:min(78%, 520px); padding:7px 10px 6px; border-radius:12px; font-size:15px; line-height:1.4; word-wrap:break-word; overflow-wrap:anywhere; box-shadow:0 1px 1px rgba(0,0,0,0.1);}
  .bubble-row.mine .bubble{background:#d9fdd3; border-bottom-right-radius:12px;}
  .bubble-row.theirs .bubble{background:#fff;}
  .bubble-row.mine.last .bubble{border-bottom-right-radius:3px;}
  .bubble-row.theirs.last .bubble{border-bottom-left-radius:3px;}
  .bubble.pending{opacity:0.65;}
  .bubble.selected{outline:2px solid var(--blue);}
  .bubble-text{white-space:pre-wrap;}
  .bubble-text a{color:var(--blue); text-decoration:underline;}
  .bubble-sender{font-size:12.5px; font-weight:700; margin-bottom:1px;}
  .bubble-meta{float:right; margin:6px 0 0 10px; font-size:11px; color:#667781; white-space:nowrap;}
  .bubble-actions{display:flex; gap:8px; margin-top:4px;}
  .bubble-actions button{background:#fff; border:1px solid var(--border); border-radius:14px; padding:6px 12px; font-size:13px; font-family:inherit; cursor:pointer; color:var(--navy-deep); min-height:32px;}
  .bubble-actions button:last-child{color:#b23a2e;}

  .chat-composer{display:flex; align-items:flex-end; gap:8px; padding:8px 10px calc(8px + env(safe-area-inset-bottom)); background:#f0f2f5; flex-shrink:0;}
  .chat-composer textarea{flex:1; resize:none; border:none; border-radius:22px; padding:11px 16px; font-family:inherit; font-size:16px; line-height:1.35; max-height:140px; background:#fff; outline:none; min-height:44px;}
  .send-btn{width:44px; height:44px; border-radius:50%; border:none; background:var(--green); color:#fff; font-size:18px; cursor:pointer; flex-shrink:0;}
  .send-btn:active{background:var(--green-dark);}

  .newchat-card{max-width:440px; display:flex; flex-direction:column; max-height:86vh;}
  .newchat-tabs{display:flex; gap:6px; margin-bottom:12px; background:#f0f2f5; padding:4px; border-radius:22px;}
  .newchat-tabs button{flex:1; border:none; background:transparent; padding:10px; border-radius:18px; font-family:inherit; font-weight:700; font-size:14px; color:var(--ink-soft); cursor:pointer; min-height:40px;}
  .newchat-tabs button.active{background:#fff; color:var(--navy-deep); box-shadow:0 1px 3px rgba(0,0,0,0.12);}
  .newchat-input{width:100%; padding:11px 14px; border:1.5px solid var(--border); border-radius:10px; font-family:inherit; font-size:16px; margin-bottom:10px;}
  .newchat-list{overflow-y:auto; max-height:38vh; margin-bottom:12px;}
  .newchat-list .contact-row{min-height:52px;}
  .newchat-list .contact-row-avatar{width:38px; height:38px; font-size:13px;}
  .newchat-footer{display:flex; gap:10px; justify-content:space-between; margin-top:auto;}
  .newchat-footer .btn{flex:1;}
  .gi-rename{display:flex; gap:8px; align-items:flex-start;}
  .gi-rename .newchat-input{margin-bottom:0;}
  #gi-add-btn{margin-bottom:12px;}
  .gi-label{font-size:12px; font-weight:800; letter-spacing:0.5px; text-transform:uppercase; color:var(--ink-soft); margin:14px 0 6px;}

  /* Phones and tablets: list OR chat, WhatsApp style; the open chat covers the whole screen */
  @media (max-width: 968px){
    .msgs-app{display:block; height:auto; min-height:0; border:none; border-radius:0; background:transparent; margin:0;}
    .msgs-list-pane{border-right:none; background:#fff; min-height:calc(100vh - 150px);}
    .convo-list{overflow:visible;}
    .msgs-chat-pane{display:none;}
    .msgs-app.chat-open .msgs-chat-pane{
      display:flex; position:fixed; top:0; left:0; right:0; height:100dvh; z-index:90;
    }
    .chat-header{padding-top:calc(10px + env(safe-area-inset-top));}
    .chat-back-btn{display:block;}
    .bubble{max-width:82%;}
  }

  /* Privacy Policy must be readable from the login/join screen (auth gate is z-index 150) */
  #privacy-policy-modal{z-index:180;}

  /* ===== Chat photos, emoji ===== */
  .composer-btn{width:40px; height:44px; border:none; background:transparent; font-size:22px; cursor:pointer; flex-shrink:0; padding:0;}
  .chat-composer{gap:4px;}
  .chat-photo-preview{position:relative; padding:8px 12px 0; background:#f0f2f5; flex-shrink:0;}
  .chat-photo-preview[hidden], .emoji-panel[hidden]{display:none;}
  .chat-photo-preview-inner{position:relative; display:inline-block;}
  .chat-photo-preview img{max-height:120px; max-width:60vw; border-radius:10px; display:block;}
  .chat-photo-preview button{position:absolute; top:4px; right:4px; width:28px; height:28px; border-radius:50%; border:none; background:rgba(0,0,0,0.65); color:#fff; cursor:pointer; font-size:13px;}
  .emoji-panel{display:grid; grid-template-columns:repeat(auto-fill, minmax(42px, 1fr)); gap:2px; max-height:190px; overflow-y:auto; padding:8px; background:#fff; border-top:1px solid var(--border); flex-shrink:0;}
  .emoji-panel button{border:none; background:transparent; font-size:26px; padding:4px 0; cursor:pointer; border-radius:8px; min-height:42px;}
  .emoji-panel button:hover, .emoji-panel button:active{background:#eef1f5;}
  .bubble.has-photo{padding:4px 4px 6px;}
  .bubble.has-photo .bubble-text, .bubble.has-photo .bubble-sender{padding:0 6px; display:block;}
  .bubble.has-photo .bubble-meta{margin-right:4px;}
  .bubble-img{display:block; width:100%; max-width:280px; max-height:320px; object-fit:cover; border-radius:9px; cursor:zoom-in; background:#e4e7eb; min-height:80px;}
  .bubble.emoji-only{background:transparent !important; box-shadow:none; padding:0 2px;}
  .bubble.emoji-only .bubble-text{font-size:40px; line-height:1.15;}
  .bubble.emoji-only .bubble-meta{color:var(--ink-soft);}

  /* ===== Photo viewer: full screen, controls pinned to the screen (never clipped), no scrollbars ===== */
  #market-lightbox{padding:0; background:rgba(5,12,24,0.94); align-items:stretch; justify-content:stretch;}
  #market-lightbox .lightbox-content{
    position:relative; width:100vw; height:100vh; height:100dvh; max-width:none; max-height:none; padding:0; border-radius:0;
    display:flex; overflow:hidden; background:transparent; scrollbar-width:none; -ms-overflow-style:none;
  }
  #market-lightbox .lightbox-content::-webkit-scrollbar{display:none;}
  #market-lightbox .lightbox-content.zoomed{overflow:auto;}
  #market-lightbox .lightbox-content img{
    margin:auto; display:block; flex-shrink:0; width:auto; height:auto; border-radius:0; object-fit:contain;
    max-width:100vw; max-height:100vh; max-height:100dvh; cursor:zoom-in;
  }
  #market-lightbox .lightbox-content img.zoomed{max-width:none; max-height:none; cursor:zoom-out;}
  #market-lightbox .lightbox-close{
    position:fixed; top:calc(12px + env(safe-area-inset-top)); right:12px; width:44px; height:44px; font-size:18px; z-index:5;
    background:rgba(255,255,255,0.95);
  }
  #market-lightbox .lightbox-nav{position:fixed; inset:0; padding:0 10px; z-index:4; pointer-events:none;}
  #market-lightbox .lightbox-nav span{width:46px; height:46px; margin:0; font-size:26px; background:rgba(11,31,58,0.7);}
  #market-lightbox .lightbox-nav[hidden]{display:none;}
  #market-lightbox .lightbox-hint{position:fixed; bottom:calc(18px + env(safe-area-inset-bottom)); z-index:4;}

  /* Chat photo thumbnails: show the whole picture (no cropping); tap for full size */
  .bubble-img{width:auto; height:auto; max-width:min(280px, 68vw); max-height:360px; object-fit:contain; min-height:0; background:#e4e7eb;}
  .bubble.has-photo{width:fit-content;}