/* ── Modal overlay ── */
    .modal-overlay{
      position:absolute;
      inset:0;
      background:rgba(0,0,0,.45);
      z-index:10;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:20px;
      box-sizing:border-box;
      opacity:0;
      pointer-events:none;
      transition:.2s ease;
    }
    @media(max-width:600px){
      .modal-overlay{border-radius:0;}
    }

    .modal-overlay.show{
      opacity:1;
      pointer-events:auto;
    }

    .modal-box{
      background:#fff;
      border-radius:18px;
      padding:20px;
      margin:0;
      max-height:100%;
      overflow-y:auto;
      text-align:center;
      box-shadow:0 24px 48px rgba(0,0,0,.2);
      width:336px;
      max-width:92%;
      box-sizing:border-box;
    }
    .modal-box input, .modal-box div { min-width: 0; }

    .modal-box h3{
      margin:0 0 8px;
      font-family:"Space Grotesk",sans-serif;
      font-size:20px;
      letter-spacing:-.04em;
    }

    .modal-box p{
      margin:0 0 18px;
      color:#6f7d84;
      font-size:14px;
      line-height:1.55;
    }

    .modal-btn{
      width:100%;
      padding:12px 14px;
      border-radius:999px;
      border:none;
      background:linear-gradient(180deg,#2cdb8a,#19c474);
      color:#072317;
      font-family:inherit;
      font-weight:800;
      font-size:14px;
      cursor:pointer;
      margin-bottom:10px;
    }

    .modal-cancel{
      width:100%;
      padding:12px;
      border-radius:999px;
      border:1px solid var(--line);
      background:#f5f7f8;
      color:#38515a;
      font-family:inherit;
      font-weight:700;
      font-size:13px;
      cursor:pointer;
    }

    /* ── Contrast info strip ── */
    .contrast-info{
      width:100%;
      max-width:380px;
      padding:12px 16px;
      border-radius:18px;
      font-size:13px;
      font-weight:700;
      line-height:1.5;
      text-align:center;
    }

    .contrast-info.sms-info{
      background:#1e2426;
      color:#8ab0ba;
    }

    .contrast-info.wc-info{
      background:#eef8f5;
      color:#1f6d61;
      border:1px solid #d0ede5;
    }

    @media (max-width: 1120px){
      .layout{
        grid-template-columns:1fr;
      }
      .sidebar{
        position:relative;
        top:auto;
      }
      .phone-panel{
        order:2;
      }
    }

    @media (max-width: 520px){
      .wrap{width:min(100% - 12px, 1200px)}
      .phone{width:100%;max-width:400px;height:min(860px, 88vh)}
    }
  
@media (max-width:520px){
.phone{width:min(100%,360px)!important;height:88vh!important}.screen{font-size:.9em}.home-brand,.topbar,.chat-header,.sms-topbar,.sms-thread-header{height:54px}.search{height:44px;margin:10px 12px}.summary{gap:8px;margin:0 12px 10px}.sum-card,.chat,.report-item,.member-card{padding:10px;border-radius:16px}.avatar,.sms-av{width:46px;height:46px;font-size:20px}.chat-name,.report-item-name,.member-name{font-size:14px}.fab,.sms-fab{width:56px;height:56px;font-size:32px;bottom:84px;right:14px}.nav-bottom{height:68px;font-size:12px}.bubble{font-size:14px;line-height:18px}.promo{margin:0 12px 10px;padding:12px;font-size:13px}.list,.report-list{padding:0 12px 80px}.body-scroll,.chat-scroll,.sms-list,.sms-thread-body{scrollbar-width:thin}.body-scroll,.chat-scroll{height:calc(100% - 54px)}}