.phone-panel{
      padding:18px;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:16px;
    }

    /* ── Contrast switcher ── */
    .contrast-switcher{
      display:flex;
      gap:0;
      border-radius:999px;
      overflow:hidden;
      border:2px solid rgba(17,33,38,.10);
      background:#f0f3f4;
      width:100%;
      max-width:380px;
    }

    .cs-btn{
      flex:1;
      padding:13px 10px;
      border:none;
      background:transparent;
      font-family:inherit;
      font-size:13px;
      font-weight:800;
      color:#6f8088;
      cursor:pointer;
      transition:.22s ease;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:7px;
    }

    .cs-btn.active{
      background:#1a1c1e;
      color:#fff;
      border-radius:999px;
    }

    .cs-btn.active.whatscash{
      background:linear-gradient(135deg,#109d88,#0b8f7d);
    }

    .cs-label-badge{
      font-size:10px;
      font-weight:800;
      padding:3px 7px;
      border-radius:999px;
      background:rgba(255,255,255,.18);
      letter-spacing:.06em;
    }

    .phone{
      width:420px;
      height:min(860px, 88vh);
      border-radius:52px;
      -webkit-user-select:none;
      user-select:none;
      background:linear-gradient(160deg,#1a2628 0%,#0a1214 40%,#070e10 100%);
      padding:14px 12px 10px;
      position:relative;
      box-shadow:
        /* outer ambient */
        0 60px 120px rgba(0,0,0,.65),
        0 30px 60px rgba(0,0,0,.45),
        0 10px 20px rgba(0,0,0,.30),
        /* inner frame highlight */
        inset 0 1px 0 rgba(255,255,255,.12),
        inset 0 -1px 0 rgba(255,255,255,.04),
        inset 1px 0 0 rgba(255,255,255,.06),
        inset -1px 0 0 rgba(255,255,255,.06);
      /* metal edge border */
      outline: 3px solid rgba(255,255,255,.07);
      outline-offset: -1px;
    }

    /* Volume buttons — left side */
    .phone::before{
      content:"";
      position:absolute;
      left:-4px;
      top:110px;
      width:4px;
      height:80px;
      background:linear-gradient(180deg,#1e2e32,#0f1e22);
      border-radius:3px 0 0 3px;
      box-shadow:
        0 -50px 0 0 #1e2e32,
        0 -50px 0 1px rgba(255,255,255,.06),
        0 0 0 1px rgba(255,255,255,.06),
        0 55px 0 0 #1e2e32,
        0 55px 0 1px rgba(255,255,255,.06);
    }

    /* Power button — right side */
    .phone::after{
      content:"";
      position:absolute;
      right:-4px;
      top:150px;
      width:4px;
      height:64px;
      background:linear-gradient(180deg,#1e2e32,#0f1e22);
      border-radius:0 3px 3px 0;
      box-shadow:0 0 0 1px rgba(255,255,255,.06);
    }

    /* Punch-hole camera */
    .phone .camera-island {
      position: absolute;
      top: 24px;
      left: 50%;
      transform: translateX(-50%);
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: 
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8) 0%, transparent 15%),
        radial-gradient(circle at 70% 70%, rgba(60, 40, 100, 0.5) 0%, transparent 45%),
        #050505;
      z-index: 100;
      box-shadow: 
        inset 0 2px 4px rgba(0,0,0,0.9),
        inset 0 -1px 2px rgba(255,255,255,0.15),
        0 0 0 2px #050505,
        0 0 0 3px rgba(255,255,255,0.05);
    }
    .phone .camera-island::after {
      content: "";
      position: absolute;
      top: 5px; left: 5px;
      width: 6px; height: 6px;
      border-radius: 50%;
      background: radial-gradient(circle at 40% 40%, rgba(40, 80, 120, 0.9), transparent 70%);
      box-shadow: inset 0 0 2px rgba(0,0,0,0.9);
    }

    /* Bottom chin / speaker bar */
    .phone .phone-chin{
      position:absolute;
      bottom:0; left:0; right:0;
      height:28px;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:5px;
      padding-bottom:4px;
    }
    .phone .phone-chin::before{
      content:"";
      width:120px; height:4px;
      border-radius:3px;
      background:rgba(255,255,255,.18);
      box-shadow:0 1px 0 rgba(0,0,0,.4);
    }

    .screen{
      width:100%;
      height:calc(100% - 28px);
      border-radius:40px;
      overflow:hidden;
      background:#f1f3f4;
      position:relative;
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
    }

    /* WhatsCash dark mode */
    .screen.dark{
      background:#111;
    }
    .screen.dark .home-brand{background:#0b141a;border-color:#233138;color:#e9edef;}
    .screen.dark .home-brand .logo{color:#ffffff;}
    .screen.dark .body-scroll{background:#111}
    .screen.dark .search{background:#1e2c30;color:#7a9098}
    .screen.dark .sum-card{background:#1a2628;border-color:#2d3e42}
    .screen.dark .sum-meta strong{color:#e8f0f2}
    .screen.dark .promo{background:#1a2a22;border-color:#2d4d38;color:#8abfa8}
    .screen.dark .chat{background:#1a2628;border-color:#2d3e42}
    .screen.dark .chat-name{color:#e4eef0}
    .screen.dark .nav-bottom{background:#141e21;border-color:#2a3a3e;color:#5a7080}
    .screen.dark .nav-bottom .active{color:#2dd66f}
    .screen.dark .fab{background:linear-gradient(180deg,#20c26a,#14a558)}
    .screen.dark .chat-scroll{background:#0d1a1d}
    .screen.dark .bubble.in{background:#1e2e32}
    .screen.dark .bubble.in .amt{color:#2fd46d}
    .screen.dark .bubble.in .meta{color:#5a7a80}
    .screen.dark .insight{background:#2a2510;color:#c8b860}
    .screen.dark .topbar{background:#202c33;box-shadow:none;}
    .screen.dark .chat-header{background:#202c33;box-shadow:none;}
    .screen.dark .reports-search-top{background:#202c33;}
    .screen.dark .body-scroll .report-card-lg,
    .screen.dark .report-item,
    .screen.dark .member-card{background:#202c33;border-color:#2a3942}
    .screen.dark .tab{background:#202c33;border-color:#2a3942;color:#8696a0}
    .screen.dark .member-av-ring circle:first-child{stroke:#2a3942}
    .screen.dark .pay-chip{background:#1f2d30;color:#00a884}
    .screen.dark .report-item-name,.screen.dark .member-name{color:#e9edef}
    .screen.dark .paid-badge{background:rgba(0,168,132,.12);border-color:#00a884;color:#00a884}
    .screen.dark .needs-more{color:#cf6679}
    .screen.dark .empty-state .es-icon{background:#1f2d30}
    .screen.dark .empty-state .es-title{color:#e9edef}
    .screen.dark .how-card{background:#1c2b2d;border-color:#2a3942}
    .screen.dark .how-card .hc-title{color:#e9edef}
    .screen.dark .how-card .hc-icon{background:#1f2d30;color:#00a884}
    .screen.dark .report-card-lg{background:#202c33;border-color:#2a3942}
    .screen.dark .ring-track{stroke:#2a3942}
    .screen.dark .ring-fill{stroke:#00a884}
    .screen.dark .ring-label{color:#00a884}
    .screen.dark .ring-label span{color:#8696a0}
    .screen.dark .big-money{color:#00a884}
    .screen.dark .report-mini strong{color:#e9edef}
    .screen.dark .copy-btn{background:#202c33;border-color:#2a3942;color:#8696a0}
    .screen.dark .status-active{background:rgba(0,168,132,.12);color:#00a884}
    .screen.dark .status-tracking{background:#202c33;color:#8696a0}
    .screen.dark .member-amount{color:#00a884}
    .screen.dark .view{background:#111}
    .screen.dark .about-view{background:#0b141a}
    .screen.dark .about-header{background:#202c33}
    .screen.dark .about-hero{background:#202c33;border-color:#2a3942}
    .screen.dark .about-hero h3{color:#e9edef}
    .screen.dark .about-hero .version{color:#00a884}
    .screen.dark .about-hero .builder{color:#8696a0}
    .screen.dark .about-logo-circle{fill:#00a884}
    .screen.dark .about-section{background:#202c33;border-color:#2a3942}
    .screen.dark .about-section-label{color:#00a884}
    .screen.dark .about-divider{background:#233138}
    .screen.dark .about-section p,.screen.dark .about-section ul{color:#8696a0}
    .screen.dark .about-contact{color:#00a884}
    .screen.dark .about-footer{color:#8696a0}
    .screen.dark .modal-box{background:#202c33;border:1px solid #2a3942;color:#e9edef;}
    .screen.dark .modal-box h3{color:#e9edef;}
    .screen.dark .modal-box p{color:#8696a0;}
    .screen.dark .modal-box input,
    .screen.dark .search-input {color:#e9edef !important;background:transparent !important;}
    .screen.dark .modal-box input::-webkit-calendar-picker-indicator {filter:invert(1);}
    .screen.dark .modal-cancel{background:#111b21;color:#8696a0;border:1px solid #2a3942;}
    .screen.dark .menu{background:#0b141a;border-color:#2a3942;box-shadow:0 10px 30px rgba(0,0,0,0.5);}
    .screen.dark .menu button{background:transparent;color:#e9edef;border-bottom:1px solid #2a3942;}
    .screen.dark .menu button:hover{background:#111b21;}

    /* Selection mode toolbar */
    .sel-toolbar{
      height:60px;
      background:linear-gradient(180deg,var(--teal-2),var(--teal));
      color:#fff;
      display:flex;
      align-items:center;
      padding:0 14px;
      position:absolute;top:0;left:0;right:0;z-index:15;
    }
    .screen.dark .sel-toolbar{background:#202c33}
    .chat-item-selected{background:rgba(18,140,126,.15) !important}
    .screen.dark .chat-item-selected{background:rgba(0,168,132,.18) !important}
    .msg-item-selected{opacity:.6}
    .chat-picker-row{
      display:flex;align-items:center;gap:12px;
      padding:12px 0;border-bottom:1px solid #e9edef;
      cursor:pointer;
    }
    .chat-picker-row .avatar { display:flex; align-items:center; justify-content:center; }
    .chat-picker-row .avatar::after { display:none; }
    .chat-picker-row:hover{background:#f8fafb}
    .screen.dark .chat-picker-row{border-color:#2a3942}
    .screen.dark .chat-picker-row:hover{background:#1a2628}