:root{
    --bezel:#1c1c1e;
    --bezel2:#2a2a2c;
    --key:#3a3a3c;
    --keyHi:#48484a;
    --keyText:#e8e8e8;
    --screenBg:#0d2b3e;
    --screenFg:#ffffff;
    --accent:#1d8fd6;
    --accent2:#4fc3f7;
    --warn:#ff9800;
    --ok:#4caf50;
    --err:#f44336;
    --softBlue:#1d4f8a;
    --line:#ffffff22;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;background:#0e0e10;color:#eee;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;min-height:100vh}
  body{display:flex;align-items:flex-start;justify-content:center;padding:24px;gap:24px;flex-wrap:nowrap}

  /* ---------- Phone shell ---------- */
  .phone{
    width:720px;
    background:linear-gradient(160deg,var(--bezel) 0%,var(--bezel2) 100%);
    border-radius:22px;
    padding:22px 22px 40px;
    box-shadow:0 30px 60px rgba(0,0,0,.5),inset 0 0 0 1px #000;
    position:relative;
    user-select:none;
  }
  .phone .topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-bottom:14px;color:#aaa;font-size:11px;letter-spacing:.15em}
  .phone .topbar .tb-center{display:flex;justify-content:center}
  .phone .topbar .tb-right{display:flex;justify-content:flex-end;align-items:center;gap:10px}
  .topbar-logo{height:20px;opacity:.88;filter:brightness(0) invert(1)}
  .phone .topbar .led{width:8px;height:8px;border-radius:50%;background:#ff3b30;box-shadow:0 0 8px #ff3b30aa;display:inline-block;margin-right:8px;vertical-align:middle}
  .phone .topbar .led.idle{background:#3a3a3c;box-shadow:none}
  .phone .topbar .brand{font-weight:700;color:#e8e8e8;letter-spacing:.25em}
  .phone .topbar .model{font-size:10px;color:#888}

  /* ---------- Screen ---------- */
  /* Wrapper écran + softrow pour alignement naturel */
  .screen-and-soft{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .screen{
    width:100%;
    height:280px;
    border-radius:6px;
    box-shadow:inset 0 0 0 2px #000,inset 0 0 10px #00000088;
    overflow:hidden;
    position:relative;
    color:var(--screenFg);
    font-family:"Helvetica Neue",Arial,sans-serif;
  }
  .screen-inner{position:absolute;inset:0;display:flex;flex-direction:column}
  /* statusbar supprimée — fusionnée dans titlebar */
  .icon{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;color:#cfeaff}
  .titlebar{
    height:30px;
    padding:10px 10px 3px;
    font-weight:600;
    font-size:13px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-shrink:0;
  }
  .tb-left{display:flex;align-items:center;gap:6px}
  .tb-right{display:flex;align-items:center;gap:5px;font-size:12px}
  .tb-reg-icon{font-size:13px}
  .tb-status-icon{font-size:12px}
  .content{flex:1;overflow:hidden;position:relative}
  .softbar{
    height:26px;display:grid;grid-template-columns:repeat(4,1fr);
    background:#0b243a;border-top:1px solid var(--line);
  }
  .softbar div{
    display:flex;align-items:center;justify-content:center;font-size:11px;
    border-right:1px solid var(--line);color:#cfeaff;font-weight:600;
    text-transform:uppercase;letter-spacing:.04em
  }
  .softbar div:last-child{border-right:none}
  .softbar div.empty{color:transparent}

  /* ---------- Idle screen ---------- */
  .idle{display:flex;flex-direction:column;height:100%}
  .idle .clock{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
  .idle .time{font-size:48px;font-weight:200;letter-spacing:.04em}
  .idle .date{font-size:13px;color:#bcd}
  .idle .lines{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);padding:1px}
  .idle .lk{
    background:linear-gradient(180deg,#0e3a55,#0a2336);padding:6px 10px;
    display:flex;align-items:center;gap:8px;font-size:12px
  }
  .idle .lk .dot{width:8px;height:8px;border-radius:50%;background:var(--ok)}
  .idle .lk.unreg .dot{background:#888}

  /* ---------- Menu list ---------- */
  .menu{height:100%;overflow-y:auto;background:#0a2336}
  .menu .item{
    padding:8px 12px;border-bottom:1px solid var(--line);
    display:flex;align-items:center;gap:10px;font-size:13px;cursor:pointer
  }
  .menu .item .ico{width:22px;height:22px;display:flex;align-items:center;justify-content:center;color:var(--accent2)}
  .menu .item.active{background:linear-gradient(90deg,var(--accent),#0e3a55);color:#fff}
  .menu .item .num{margin-left:auto;color:#9bd}
  .menu .item .val{margin-left:auto;color:#bcd;font-size:12px}

  /* ---------- Dialer ---------- */
  .dialer{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
  .dialer .label{font-size:12px;color:#bcd}
  .dialer .num{font-size:32px;font-weight:300;min-height:42px;letter-spacing:.05em}
  .dialer .acc{font-size:11px;color:#9bd}

  /* ---------- In-call ---------- */
  .incall{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:8px}
  .incall .who{font-size:22px;font-weight:300}
  .incall .num{font-size:14px;color:#bcd}
  .incall .state{font-size:12px;color:#9bd;margin-top:2px}
  .incall .timer{font-size:14px;color:#fff;font-variant-numeric:tabular-nums}
  .incall .icons{display:flex;gap:14px;margin-top:6px;font-size:11px;color:#bcd}
  .incall .icons div{display:flex;flex-direction:column;align-items:center;gap:2px;opacity:.65}
  .incall .icons div.on{opacity:1;color:var(--accent2)}

  /* ---------- Form list (settings) ---------- */
  .form{height:100%;overflow-y:auto;background:#0a2336;padding:0}
  .form .row{
    display:flex;align-items:center;justify-content:space-between;
    padding:7px 10px;border-bottom:1px solid var(--line);font-size:12px
  }
  .form .row .k{color:#bcd}
  .form .row .v{color:#fff;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* ---------- SIP account form inputs ---------- */
  #sip-acc-form input:focus,
  #sip-acc-form select:focus{
    border-bottom-color:var(--accent2) !important;
    background:#0a2f47 !important;
  }
  #sip-acc-form .row{ flex-wrap:nowrap; gap:6px }

  /* ---------- Toggle widgets in menu ---------- */
  .toggle{padding:2px 8px;border-radius:10px;font-size:10px;font-weight:700;letter-spacing:.06em}
  .toggle.on{background:var(--ok);color:#031}
  .toggle.off{background:#444;color:#aaa}

  /* ---------- Keys ---------- */
  .keys{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .keypad,.functions{display:grid;gap:8px}
  .keypad{grid-template-columns:repeat(3,1fr)}
  .functions{grid-template-columns:repeat(3,1fr)}
  .key{
    background:linear-gradient(180deg,var(--key),#2c2c2e);
    border:1px solid #00000080;
    border-radius:8px;
    color:var(--keyText);
    padding:8px 4px;
    text-align:center;
    cursor:pointer;
    font-size:13px;
    box-shadow:0 3px 0 #000a, inset 0 1px 0 #ffffff10;
    transition:transform .06s ease, background .15s ease;
    position:relative;
    min-height:46px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
  }
  .key:hover{background:linear-gradient(180deg,var(--keyHi),#3a3a3c)}
  .key:active{transform:translateY(1px);box-shadow:0 1px 0 #000a, inset 0 1px 0 #ffffff10}
  .key .big{font-size:18px;font-weight:600;line-height:1}
  .key .alt{font-size:9px;color:#aaa;margin-top:2px;letter-spacing:.04em}
  .key.fn{background:linear-gradient(180deg,#2a2a2c,#1c1c1e);font-size:14px;color:#cfd8e3;min-height:30px;padding:3px}
  .key.fn.red{color:#ff6b6b}
  .key.fn.green{color:#7bd57b}
  .key.fn.blue{color:#4fc3f7}
  /* Soft key — même style que PK, légèrement moins large, centrée dans sa cellule */
  .key.soft{
    justify-self:center;
    width:64px;
    height:22px;
    padding:0;
    min-height:unset;
    background:linear-gradient(180deg,#2c2c2e,#1a1a1c);
    border:1px solid #00000099;
    border-radius:10px;
    box-shadow:0 2px 0 #000b, inset 0 1px 0 #ffffff10;
    transition:filter .12s;
  }
  .key.soft:hover { filter:brightness(1.35); }
  .key.soft:active{ transform:translateY(1px); box-shadow:0 1px 0 #000b; filter:none; }

  .softrow{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:6px;
  }

  /* ---------- Programmable / line keys ---------- */
  /*
    Layout vertical des zones (screen height = 300px) :
      titlebar  : 30px   ← total top offset = 30px
      content   : 244px  ← zone d'alignement
      softbar   : 26px
    Les boutons physiques sont paddés top:30px bottom:40px pour
    que les 6 rangées tombent exactement dans la zone "content".
  */
  .screenrow{
    display:flex;
    gap:6px;
    align-items:flex-start; /* pk-col ne doit pas s'étirer jusqu'à la softrow */
  }

  /* Colonne de boutons physiques — hauteur calée sur l'écran uniquement */
  .pk-col{
    display:grid;
    grid-template-rows:repeat(6,1fr);
    gap:3px;
    width:58px;
    height:280px;          /* = hauteur fixe de l'écran */
    flex-shrink:0;
    padding-top:40px;      /* titlebar(30) + décalage(10) */
    padding-bottom:40px;   /* softbar(26) + marge(14) */
    box-sizing:border-box;
  }

  /* Chaque rangée = conteneur centrant le bouton */
  .pk-row{
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    user-select:none;
    min-height:0;
  }

  /* Bouton horizontal */
  .pk-btn{
    width:52px;
    height:22px;
    background:linear-gradient(180deg,#2c2c2e,#1a1a1c);
    border:1px solid #00000099;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 2px 0 #000b, inset 0 1px 0 #ffffff10;
    transition:filter .12s;
    position:relative;
    flex-shrink:0;
  }
  .pk-row:hover  .pk-btn{ filter:brightness(1.35); }
  .pk-row:active .pk-btn{ transform:translateY(1px); box-shadow:0 1px 0 #000b; }

  /* LED — sur le bord face à l'écran */
  .pk-led{
    position:absolute;
    width:5px; height:5px;
    border-radius:50%;
    background:#252525;
    top:50%; transform:translateY(-50%);
  }
  .pk-col.left  .pk-led{ right:4px; }
  .pk-col.right .pk-led{ left:4px;  }
  .pk-row.on   .pk-led{ background:var(--ok);  box-shadow:0 0 5px var(--ok);  }
  .pk-row.warn .pk-led{ background:var(--warn); box-shadow:0 0 5px var(--warn); }
  .pk-row.empty .pk-led{ background:#1c1c1c; }

  /* Labels dans l'écran — même zone que les boutons physiques */
  .pk-screen-labels{
    position:absolute;
    top:40px;    /* titlebar(30) + décalage(10) */
    bottom:40px; /* softbar(26) + marge(14) */
    width:96px;
    z-index:6;
    display:flex;
    flex-direction:column;
    gap:3px;     /* même gap que pk-col → alignement pixel-perfect */
    pointer-events:none;
  }
  .pk-screen-labels.left { left:3px; }
  .pk-screen-labels.right{ right:3px; }

  /* Slot — même hauteur que le bouton en face */
  .pk-screen-label{
    flex:1;
    min-height:0;
    display:flex;
    align-items:center;
    pointer-events:auto;
    cursor:pointer;
    padding:0 4px;
  }

  /* Label : largeur fixe 88px, fond noir transparent, flou pour rendre la transparence visible */
  .pk-screen-label span{
    display:block;
    width:88px;
    box-sizing:border-box;
    background:hsl(0deg 0% 0% / 70%);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    border-radius:4px;
    padding:4px 6px 4px 10px;
    font-size:10px;
    font-weight:500;
    color:#ffffff;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    text-align:left;
    line-height:1.3;
  }
  .pk-screen-label.empty{ pointer-events:none; }
  .pk-screen-label.empty span{ display:none; }

  /* ===== KEYS 3 colonnes ===== */
  .keys{
    margin-top:0;
    padding:30px 10px 0;
    display:flex;
    gap:28px;
    align-items:flex-end;
    justify-content:center;
  }
  .keys-left{
    display:flex;flex-direction:column;align-items:center;gap:20px;
    flex-shrink:0;width:114px;
  }
  .keys-mid{ flex:0 0 230px; }
  .keypad{ display:grid;grid-template-columns:repeat(3,1fr);gap:8px; }
  .keys-right{
    display:flex;flex-direction:column;gap:20px;
    flex-shrink:0;width:90px;
  }
  .fn-pair{ display:grid;grid-template-columns:1fr 1fr;gap:8px; }
  .fn-solo{ width:100%; }

  /* ===== D-pad circulaire ===== */
  .dpad{
    position:relative;
    width:106px;height:106px;flex-shrink:0;
  }
  .dpad-ring{
    position:absolute;inset:0;border-radius:50%;
    background:radial-gradient(circle at 38% 30%,#424244,#1c1c1e);
    border:2px solid #0a0a0a;
    box-shadow:0 6px 16px #000c,inset 0 1px 0 #ffffff16;
  }
  /* Zones directionnelles — dimple sombre à la place des icônes */
  .dpad-btn{
    position:absolute;
    width:32px;height:32px;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;border-radius:50%;
    transition:background .1s;
    z-index:1;
  }
  .dpad-btn::after{
    content:'';display:block;
    width:7px;height:7px;border-radius:50%;
    background:#111315;
    box-shadow:inset 0 1px 3px #000a,0 1px 0 rgba(255,255,255,.06);
  }
  .dpad-btn:hover{ background:rgba(255,255,255,.06); }
  .dpad-btn:active{ background:rgba(255,255,255,.12); }
  .dpad-up   { top:3px;   left:50%;transform:translateX(-50%); }
  .dpad-down { bottom:3px;left:50%;transform:translateX(-50%); }
  .dpad-left { left:3px;  top:50%; transform:translateY(-50%); }
  .dpad-right{ right:3px; top:50%; transform:translateY(-50%); }
  /* Bouton OK — rond métal brossé */
  .dpad-ok{
    position:absolute;
    top:50%;left:50%;transform:translate(-50%,-50%);
    width:42px;height:42px;border-radius:50%;
    border:2px solid #444;
    cursor:pointer;z-index:2;
    transition:filter .1s;
    background-color:hsl(0,0%,90%);
    background-image:
      -webkit-radial-gradient(50% 0%,8% 50%,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 100%),
      -webkit-radial-gradient(50% 100%,12% 50%,rgba(255,255,255,.6) 0%,rgba(255,255,255,0) 100%),
      -webkit-radial-gradient(0% 50%,50% 7%,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 100%),
      -webkit-radial-gradient(100% 50%,50% 5%,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 100%),
      -webkit-repeating-radial-gradient(50% 50%,100% 100%,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 3%,rgba(0,0,0,.1) 3.5%),
      -webkit-repeating-radial-gradient(50% 50%,100% 100%,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 6%,rgba(255,255,255,.1) 7.5%),
      -webkit-repeating-radial-gradient(50% 50%,100% 100%,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 1.2%,rgba(255,255,255,.2) 2.2%),
      -webkit-radial-gradient(50% 50%,200% 50%,rgb(230,230,230) 5%,rgb(217,217,217) 30%,rgb(153,153,153) 100%);
  }
  .dpad-ok:hover{ filter:brightness(1.12); }
  .dpad-ok:active{ transform:translate(-50%,-50%) scale(.94);filter:brightness(.9); }

  /* Bouton annuler/raccrocher — croix blanche ronde */
  .btn-cancel-row{
    display:flex;align-items:center;justify-content:center;gap:12px;width:100%;
  }
  .btn-round{
    width:36px;height:36px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;border:2px solid #111;
    box-shadow:0 3px 8px #000b,inset 0 1px 0 #ffffff18;
    transition:filter .1s;font-size:15px;
  }
  .btn-round:hover{ filter:brightness(1.2); }
  .btn-round:active{ transform:scale(.93); }
  .btn-cancel{
    background:radial-gradient(circle at 38% 30%,#444446,#222224);
    color:#fff;font-weight:700;
  }
  .btn-answer{
    background:radial-gradient(circle at 38% 30%,#3a7a3a,#1a4a1a);
    color:#7ddf7d;
  }

  /* Barre de volume */
  .vol-row{
    width:100%;display:flex;align-items:center;
    background:linear-gradient(180deg,#2c2c2e,#1a1a1c);
    border:1px solid #00000099;border-radius:20px;
    box-shadow:0 2px 6px #000a,inset 0 1px 0 #ffffff0e;
    padding:0 4px;height:28px;box-sizing:border-box;overflow:hidden;
  }
  .vol-btn{
    width:28px;height:100%;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    color:#ccd;font-size:17px;font-weight:300;
    cursor:pointer;border-radius:20px;transition:background .1s;line-height:1;
  }
  .vol-btn:hover{ background:rgba(255,255,255,.1); }
  .vol-btn:active{ background:rgba(255,255,255,.18); }
  .vol-bars{
    flex:1;display:flex;align-items:center;
    justify-content:center;gap:3px;
  }
  .vol-bars span{
    width:3px;border-radius:2px;background:#445566;
  }
  .vol-bars span:nth-child(1){ height:5px; }
  .vol-bars span:nth-child(2){ height:8px; }
  .vol-bars span:nth-child(3){ height:11px; }
  .vol-bars span:nth-child(4){ height:14px; }

  /* ringing pulse */
  @keyframes pulse {
    0%{box-shadow:0 0 0 0 #ff3b3088}
    70%{box-shadow:0 0 0 12px #ff3b3000}
    100%{box-shadow:0 0 0 0 #ff3b3000}
  }
  .ringing{animation:pulse 1.2s infinite}

  /* small screen tablet */
  @media(max-width:980px){
    body{flex-direction:column;align-items:center;flex-wrap:wrap}
    .phone{width:min(96vw,560px)}
  }

  /* ===== Boutons mobile (masqués sur desktop) ===== */
  .mobile-controls,.mobile-bottom{ display:none; }

  .mc-col{
    display:flex;flex-direction:column;align-items:center;gap:10px;
    flex-shrink:0;
  }
  .mc-center{
    flex:1;display:flex;align-items:center;justify-content:center;
  }
  .mc-btn{
    width:44px;height:44px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(180deg,var(--key),#2c2c2e);
    border:1px solid #00000080;
    box-shadow:0 3px 0 #000a,inset 0 1px 0 #ffffff10;
    cursor:pointer;color:var(--keyText);
    font-size:12px;font-weight:700;
    transition:filter .1s;
    user-select:none;
  }
  .mc-btn:active{transform:scale(.93);box-shadow:0 1px 0 #000a}
  .mc-btn svg{width:18px;height:18px;stroke-width:1.5}
  .mc-answer{background:radial-gradient(circle at 38% 30%,#2e7d32,#1b5e20);color:#a5d6a7}
  .mc-cancel{background:radial-gradient(circle at 38% 30%,#b71c1c,#7f0000);color:#ef9a9a}
  .mc-speaker{color:#4fc3f7}
  .mc-voicemail svg{fill:white;stroke:rgba(0,0,0,.35);stroke-width:1.5}
  .mc-mute{color:#f44336}
  .mc-tran{font-size:11px;font-weight:700;border-radius:10px;width:52px;height:32px}

  /* ===== RESPONSIVE MOBILE ===== */
  @media(max-width:640px){
    body{padding:0;gap:0;background:#0a0a0c}

    .phone{
      width:100vw;
      max-width:320px;
      border-radius:14px 14px 0 0;
      padding:12px 10px 28px;
      min-height:100dvh;
      box-sizing:border-box;
    }

    /* Masquer éléments desktop */
    .pk-col,
    .pk-screen-labels,
    .indicator-band,
    .keys-left,
    .keys-right,
    .btn-cancel-row,
    .vol-row,
    .softrow{ display:none !important; }

    /* Screenrow sans marges pk */
    .screenrow{ gap:0 }
    .screen{ border-radius:6px; height:50dvh; }
    .screen-and-soft{ width:100%; }

    /* Keys: colonne verticale */
    .keys{
      flex-direction:column;
      align-items:stretch;
      gap:14px;
      padding:0;
      justify-content:flex-start;
      border-top:35px solid #1b1b1d;
    }
    .keys-mid{ flex:none;width:100%; }
    .keypad{ gap:10px; }
    .key{ min-height:52px; }

    /* ── Bloc de contrôles mobile ── */
    .mobile-controls{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:6px;
      width:100%;
      background:linear-gradient(180deg,#3c3c3e,#2a2a2c);
      border-radius:24px;
      border-top-left-radius:0;
      border-top-right-radius:0;
      border:1px solid #00000099;
      box-shadow:0 4px 14px #000a,inset 0 1px 0 #ffffff08;
      padding:5px 10px;
    }

    /* Boutons du bloc : plats, pas de rond */
    .mobile-controls .mc-btn{
      background:none;
      border:none;
      box-shadow:none;
      border-radius:10px;
      width:44px;
      height:44px;
      transition:background .12s;
    }
    .dpad{ width:126px;height:126px; }
    .dpad-ok{ width:52px;height:52px; }

    .mobile-controls .mc-btn:hover{background:rgba(255,255,255,.09)}
    .mobile-controls .mc-btn:active{background:rgba(255,255,255,.16);transform:none;box-shadow:none}
    /* Couleurs sémantiques sans fond */
    .mobile-controls .mc-answer{color:#4caf50;background:none}
    .mobile-controls .mc-cancel{color:#f44336;background:none}
    .mobile-controls .mc-speaker{color:#4fc3f7;background:none}
    .mobile-controls .mc-voicemail{color:white;background:none}

    /* Ligne basse */
    .softbar{
      display:flex;
      justify-content:space-between;
    }
    .softbar div{ flex:1; }
    .softbar div.empty{ display:none !important; }

    .mobile-bottom{
      display:grid;
      grid-template-columns:1fr 1fr 1fr;
      gap:10px;
      width:100%;
      padding:0;
    }
  }

  /* ===== Bandeau indicateurs ===== */
  .indicator-band{
    margin:10px -22px 0;
    height:35px;
    background-color:#959CA5;
    background:linear-gradient(180deg,#959CA5 0%,#959CA5 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.13),inset 0 -1px 0 rgba(0,0,0,.55),0 2px 4px rgba(0,0,0,.25);
    display:flex;
    align-items:center;
    border-bottom-left-radius:20px;
    border-bottom-right-radius:20px;
    border:2px solid #1d1d1f;
  }
  /* spacer = padding phone(22) + pk-col(58) + gap(6) = 86px */
  .ind-spacer{ flex:0 0 86px; }
  .ind-icons{
    flex:1;
    display:grid;
    grid-template-columns:repeat(4,1fr);
  }
  .ind-icon-cell{
    display:flex;align-items:center;justify-content:center;
    color:#0a0a0b;
  }
  .ind-icon-cell svg{ width:20px;height:18px;stroke-width:1.5; }
  .ind-icon-cell.ind-green{ color:#2fd836; }
  .ind-icon-cell.ind-red  { color:#e83123; }