:root{--bg:#08090b;--panel:#111317;--panel2:#171a20;--line:#262a31;--text:#f7f7f8;--muted:#9298a3;--red:#e5252a;--green:#31c48d;--amber:#f6ad3c;--radius:18px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.shell{display:grid;grid-template-columns:250px 1fr;min-height:100vh}.sidebar{border-right:1px solid var(--line);padding:24px 18px;display:flex;flex-direction:column;background:#0b0c0f}.brand{display:flex;gap:11px;align-items:center;margin-bottom:34px}.brand-mark{width:42px;height:42px;border-radius:13px;background:var(--red);display:grid;place-items:center;font-weight:900;letter-spacing:-1px}.brand strong,.brand span{display:block}.brand span{font-size:12px;color:var(--muted);margin-top:2px}.sidebar nav{display:grid;gap:7px}.nav{display:block;border:0;background:transparent;color:#a9afb9;text-align:left;padding:12px 13px;border-radius:11px;font-size:14px;cursor:pointer;text-decoration:none}.nav:hover,.nav.active{background:#1a1d22;color:#fff}.nav.active{box-shadow:inset 3px 0 var(--red)}.sidebar-footer{margin-top:auto;font-size:12px;color:var(--muted);line-height:2}.sidebar-footer a{color:#fff}.dot{display:inline-block;width:8px;height:8px;background:var(--green);border-radius:50%;margin-right:7px;box-shadow:0 0 12px var(--green)}.main{padding:28px 34px;max-width:1600px;width:100%;margin:auto}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.topbar h1{margin:0;font-size:29px}.topbar p{margin:5px 0 0;color:var(--muted);font-size:13px}.primary{display:inline-block;border:0;border-radius:11px;padding:12px 16px;color:#fff;background:var(--red);font-weight:750;cursor:pointer;text-decoration:none}.primary:hover{filter:brightness(1.08)}.view{display:none}.view.active{display:block}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:14px}.metric,.card{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:var(--radius)}.metric{padding:20px}.metric span{display:block;color:var(--muted);font-size:12px}.metric strong{display:block;font-size:31px;margin-top:7px}.metric em{font-style:normal;font-size:11px;color:#727985}.grid{display:grid;gap:14px}.grid.two{grid-template-columns:1fr 1fr}.card{padding:20px}.card-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:16px}.card-head h2{margin:0;font-size:16px}.card-head span{color:var(--muted);font-size:11px}.list{display:grid;gap:8px}.row{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--line);background:#0d0f12;padding:11px 12px;border-radius:11px;gap:12px}.row-main strong,.row-main span{display:block}.row-main strong{font-size:13px}.row-main span{font-size:11px;color:var(--muted);margin-top:3px}.badge{font-size:10px;padding:5px 8px;border-radius:99px;background:#22262d;color:#c5cad2}.badge.online,.badge.completed,.badge.answered{background:#12362b;color:#77e4b8}.badge.running,.badge.dialing,.badge.ringing{background:#3a2913;color:#ffd18b}.badge.failed,.badge.rejected{background:#3c1518;color:#ff9da1}.flow-card{margin-top:14px}.flow{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.flow b{background:#0d0f12;border:1px solid var(--line);padding:12px 14px;border-radius:10px;font-size:12px}.flow i{color:var(--red);font-style:normal}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:12px 10px;text-align:left;border-bottom:1px solid var(--line);font-size:12px}.table th{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.06em}.campaign-layout{grid-template-columns:minmax(360px,.85fr) minmax(420px,1.15fr)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.form-grid label{display:grid;gap:7px;color:#c8ccd2;font-size:11px}.form-grid .full{grid-column:1/-1}input,textarea,select{width:100%;background:#090b0e;border:1px solid #2d323a;color:#fff;border-radius:10px;padding:11px 12px;outline:none;font:inherit}input:focus,textarea:focus,select:focus{border-color:#5b616c}.status-card{text-align:center;padding:36px}.big-status{font-size:28px;font-weight:900;letter-spacing:.08em;margin:22px}.big-status.ok{color:var(--green)}.big-status.pending{color:var(--amber)}.status-card p{color:var(--muted);font-size:13px;line-height:1.65}.modal-backdrop{display:none;position:fixed;inset:0;background:#000b;place-items:center;padding:20px;z-index:10}.modal-backdrop.open{display:grid}.modal{width:min(440px,100%);position:relative;background:#15181d;border:1px solid #30353d;border-radius:22px;padding:30px;text-align:center;box-shadow:0 30px 80px #000}.close{position:absolute;right:14px;top:12px;border:0;background:transparent;color:#aaa;font-size:26px;cursor:pointer}.eyebrow{color:var(--red);font-size:10px;font-weight:800;letter-spacing:.16em}.modal h2{margin:10px 0 7px}.modal p,.muted{color:var(--muted);font-size:12px}.pair-code{font-size:43px;font-weight:900;letter-spacing:.16em;margin:24px 0}.login-body{min-height:100vh;display:grid;place-items:center;padding:20px}.login-card{width:min(400px,100%);background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:30px}.login-card .brand-mark{margin-bottom:18px}.login-card h1{font-size:21px;margin:0}.login-card p{color:var(--muted);font-size:12px}.login-card form{display:grid;gap:10px;margin-top:22px}.alert{padding:10px;background:#3c1518;color:#ffb0b2;border-radius:9px;font-size:12px}.empty{color:var(--muted);font-size:12px;padding:16px;border:1px dashed var(--line);border-radius:11px;text-align:center}@media(max-width:950px){.shell{grid-template-columns:1fr}.sidebar{position:sticky;top:0;z-index:5;display:block;padding:12px 14px}.brand{margin:0 0 10px}.sidebar nav{display:flex;overflow:auto}.nav{white-space:nowrap}.sidebar-footer{display:none}.main{padding:20px 14px}.metrics{grid-template-columns:1fr 1fr}.grid.two,.campaign-layout{grid-template-columns:1fr}.topbar{align-items:flex-start;gap:14px}.topbar .primary{font-size:11px}.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}}@media(max-width:520px){.metrics{grid-template-columns:1fr 1fr}.metric strong{font-size:24px}.card{padding:15px}.table{display:block;overflow-x:auto}.pair-code{font-size:34px}}
.recording-link{display:inline-block;color:#fff;text-decoration:none;background:#252930;border:1px solid #343942;border-radius:8px;padding:6px 9px;font-size:11px}.recording-link:hover{border-color:#555d69}.table .row-main strong{font-size:12px}.table .row-main span{font-size:10px}
.badge.offline{background:#2b2f36;color:#9298a3}
.tiny{font-size:10px;color:var(--muted);margin-top:3px}
.row-actions{display:flex;gap:7px;flex-wrap:wrap}
.mini-action,.secondary-action,.danger-action{border:1px solid #363b44;border-radius:9px;background:#20242a;color:#fff;padding:8px 10px;font-size:11px;font-weight:750;cursor:pointer}
.mini-action:hover,.secondary-action:hover{border-color:#59616e}
.mini-action.danger,.danger-action{background:#38171a;border-color:#5a2328;color:#ffb0b3}
.danger-action:hover,.mini-action.danger:hover{background:#4a1a1f}
.history-toolbar{display:grid;grid-template-columns:minmax(220px,1fr) 180px auto auto;gap:10px;margin-bottom:16px}
.media-strip{margin-top:14px}
.media-status-card{display:flex;justify-content:space-between;gap:14px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:13px 14px;font-size:12px}
.media-status-card span{color:var(--muted)}
.media-status-card.connected{background:#102a22;border-color:#1c5e49}
.media-status-card.disconnected{background:#211719;border-color:#553036}
.media-chip{display:inline-block;border-radius:99px;padding:5px 8px;font-size:10px;font-weight:800}
.media-chip.off{background:#32191c;color:#ff9da1}
.media-chip.on{background:#12362b;color:#77e4b8}
.big-status.media-off{color:#ff9da1}
.media-state-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.media-state-grid>div{background:#0d0f12;border:1px solid var(--line);border-radius:12px;padding:14px}
.media-state-grid span,.media-state-grid strong{display:block}
.media-state-grid span{color:var(--muted);font-size:10px;margin-bottom:7px}
.media-state-grid strong{font-size:12px}
.state-ok{color:var(--green)}
.state-off{color:#ff9da1}
.call-audio{width:230px;max-width:100%;height:34px}
@media(max-width:1100px){.history-toolbar{grid-template-columns:1fr 1fr}.media-state-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.history-toolbar{grid-template-columns:1fr}.media-state-grid{grid-template-columns:1fr}}

.conference-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.conference-device{background:#0d0f12;border:1px solid var(--line);border-radius:14px;padding:15px}
.conference-device-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:13px}
.conference-device-head strong,.conference-device-head span{display:block}
.conference-device-head strong{font-size:13px}
.conference-device-head div>span{font-size:10px;color:var(--muted);margin-top:3px}
.conference-badge{font-size:9px;font-weight:850;letter-spacing:.05em;padding:6px 8px;border-radius:99px;white-space:nowrap}
.conference-badge.ready{background:#12362b;color:#77e4b8}
.conference-badge.partial{background:#3a2913;color:#ffd18b}
.conference-badge.blocked{background:#3c1518;color:#ff9da1}
.conference-badge.unknown{background:#252930;color:#aeb4bd}
.conference-facts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.conference-facts>div{background:#090b0e;border:1px solid #272b32;border-radius:10px;padding:10px}
.conference-facts span,.conference-facts b{display:block}
.conference-facts span{font-size:9px;color:var(--muted);margin-bottom:5px}
.conference-facts b{font-size:11px}
.conference-note{margin-top:12px;color:var(--muted);font-size:11px;line-height:1.55}
@media(max-width:900px){.conference-grid{grid-template-columns:1fr}}

.app-release-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.app-release-grid>div{background:#0d0f12;border:1px solid var(--line);border-radius:12px;padding:13px}
.app-release-grid span,.app-release-grid strong{display:block}
.app-release-grid span{font-size:9px;color:var(--muted);margin-bottom:6px}
.app-release-grid strong{font-size:12px}
.app-release-actions{display:flex;align-items:center;gap:12px;justify-content:space-between;margin-top:12px;flex-wrap:wrap}
.app-release-actions span{font-size:9px;color:var(--muted);word-break:break-all}
@media(max-width:900px){.app-release-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.app-release-grid{grid-template-columns:1fr}}

.update-actions{display:flex;gap:10px;align-items:center;margin-top:14px;flex-wrap:wrap}
.update-status-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.update-status-grid>div{background:#0d0f12;border:1px solid var(--line);border-radius:12px;padding:14px}
.update-status-grid span,.update-status-grid strong{display:block}
.update-status-grid span{font-size:9px;color:var(--muted);margin-bottom:6px}
.update-status-grid strong{font-size:12px;word-break:break-all}
.update-commit-message{margin-top:10px;padding:11px 12px;border-radius:10px;background:#0b0d10;border:1px solid #272b32;color:var(--muted);font-size:11px;line-height:1.45}
.update-error{padding:12px;border-radius:10px;background:#3b171a;border:1px solid #63252b;color:#ffb2b5;font-size:12px}
@media(max-width:760px){.update-status-grid{grid-template-columns:1fr}}

/* Responsive dashboard v2 */
html,body{max-width:100%;overflow-x:hidden}
.shell,.main,.card,.metric,.grid,.view{min-width:0}
.topbar-title{display:flex;align-items:center;gap:12px;min-width:0}
.mobile-menu-toggle,.mobile-nav-overlay{display:none}
#devicesTable,#contactsTable,#callsTable{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
#devicesTable .table,#contactsTable .table,#callsTable .table{min-width:760px}
.table td,.table th{white-space:nowrap}
.table td:first-child,.table th:first-child{white-space:normal}
.primary,.secondary-action,.danger-action,.mini-action,button{min-height:42px}
input,select,textarea,button,a{touch-action:manipulation}
.card-head{gap:12px}
.card-head>*{min-width:0}
.card-head span{max-width:58%;text-align:right;line-height:1.35}
.topbar .primary{flex:0 0 auto}

@media(max-width:1100px){
  .main{padding:22px 20px}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid.two,.campaign-layout{grid-template-columns:1fr}
  .media-state-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:900px){
  .shell{display:block;min-height:100vh}
  .main{margin:0;padding:18px 16px 28px;width:100%;max-width:none}

  .mobile-menu-toggle{
    display:grid;
    place-items:center;
    width:42px;
    min-width:42px;
    height:42px;
    border:1px solid var(--line);
    border-radius:11px;
    background:#171a20;
    color:#fff;
    font-size:20px;
    cursor:pointer;
    padding:0;
  }

  .sidebar{
    position:fixed;
    inset:0 auto 0 0;
    z-index:1002;
    width:min(320px,86vw);
    height:100dvh;
    padding:20px 16px;
    display:flex;
    flex-direction:column;
    background:#0b0c0f;
    border-right:1px solid var(--line);
    transform:translateX(-104%);
    transition:transform .22s ease;
    box-shadow:18px 0 55px #0009;
    overflow-y:auto;
  }

  body.mobile-nav-open .sidebar{transform:translateX(0)}

  .mobile-nav-overlay{
    position:fixed;
    inset:0;
    z-index:1001;
    border:0;
    background:#000a;
    width:100%;
    height:100%;
    padding:0;
  }

  body.mobile-nav-open .mobile-nav-overlay{display:block}

  .sidebar .brand{margin-bottom:24px}
  .sidebar nav{display:grid;gap:7px;overflow:visible}
  .sidebar .nav{white-space:normal;font-size:14px;padding:13px}
  .sidebar-footer{display:block;margin-top:auto;padding-top:22px}

  .topbar{
    align-items:center;
    gap:12px;
    margin-bottom:18px;
  }

  .topbar h1{font-size:24px;line-height:1.12}
  .topbar p{font-size:12px;line-height:1.35}
  .pair-phone-button{padding:11px 13px;font-size:11px}

  .status-card{padding:26px 18px}
  .big-status{font-size:24px;margin:18px 0}
  .conference-grid{grid-template-columns:1fr}
  .app-release-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:680px){
  .main{padding:14px 12px 24px}
  .topbar{align-items:stretch;flex-direction:column}
  .topbar-title{width:100%}
  .topbar-title>div{min-width:0}
  .pair-phone-button{width:100%;text-align:center}

  .metrics{grid-template-columns:1fr 1fr;gap:10px}
  .metric{padding:15px}
  .metric strong{font-size:25px}

  .card{padding:14px;border-radius:15px}
  .card-head{align-items:flex-start;flex-direction:column;margin-bottom:13px}
  .card-head span{max-width:none;text-align:left}

  .row{align-items:flex-start;flex-direction:column}
  .row>.badge{align-self:flex-start}
  .row .row-main[style]{text-align:left!important}

  .form-grid{grid-template-columns:1fr}
  .form-grid .full{grid-column:auto}
  .history-toolbar{grid-template-columns:1fr}
  .history-toolbar>*{width:100%}
  .media-state-grid{grid-template-columns:1fr}
  .media-status-card{align-items:flex-start;flex-direction:column}

  .conference-device-head{flex-direction:column}
  .conference-badge{white-space:normal}
  .conference-facts{grid-template-columns:1fr 1fr}

  .flow{display:grid;grid-template-columns:1fr;gap:7px}
  .flow i{display:none}
  .flow b{text-align:center;width:100%}

  .app-release-grid,.update-status-grid{grid-template-columns:1fr}
  .app-release-actions{align-items:stretch;flex-direction:column}
  .app-release-actions .primary{width:100%;text-align:center}
  .update-actions .primary{width:100%}

  #devicesTable,#contactsTable,#callsTable{
    margin:0 -4px;
    width:calc(100% + 8px);
    padding-bottom:4px;
  }
  #devicesTable .table,#contactsTable .table,#callsTable .table{min-width:720px}
}

@media(max-width:440px){
  .main{padding:12px 10px 22px}
  .mobile-menu-toggle{width:40px;min-width:40px;height:40px}
  .topbar h1{font-size:21px}
  .topbar p{font-size:11px}
  .metrics{grid-template-columns:1fr}
  .metric{padding:14px}
  .metric strong{font-size:24px}
  .card{padding:13px}
  .status-card{padding:22px 14px}
  .big-status{font-size:20px;letter-spacing:.04em}
  .conference-facts{grid-template-columns:1fr}
  .pair-code{font-size:29px;letter-spacing:.12em}
  .login-card{padding:22px 18px}
}

@media(prefers-reduced-motion:reduce){
  .sidebar{transition:none}
}

/* Mobile data tables become native cards — no horizontal scrolling */
@media(max-width:680px){
  #devicesTable,#contactsTable,#callsTable{
    overflow:visible!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
  }

  #devicesTable .table,
  #contactsTable .table,
  #callsTable .table{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    border-collapse:separate;
  }

  #devicesTable .table thead,
  #contactsTable .table thead,
  #callsTable .table thead{
    display:none!important;
  }

  #devicesTable .table tbody,
  #contactsTable .table tbody,
  #callsTable .table tbody{
    display:grid;
    gap:12px;
    width:100%;
  }

  #devicesTable .table tr,
  #contactsTable .table tr,
  #callsTable .table tr{
    display:block;
    width:100%;
    padding:14px;
    border:1px solid var(--line);
    border-radius:14px;
    background:#0d0f12;
  }

  #devicesTable .table td,
  #contactsTable .table td,
  #callsTable .table td{
    display:grid;
    grid-template-columns:108px minmax(0,1fr);
    align-items:start;
    gap:12px;
    width:100%;
    padding:9px 0;
    border:0;
    border-bottom:1px solid #242830;
    white-space:normal!important;
    overflow-wrap:anywhere;
    line-height:1.4;
  }

  #devicesTable .table td:last-child,
  #contactsTable .table td:last-child,
  #callsTable .table td:last-child{
    border-bottom:0;
    padding-bottom:0;
  }

  #devicesTable .table td::before,
  #contactsTable .table td::before,
  #callsTable .table td::before{
    color:var(--muted);
    font-size:9px;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
    padding-top:2px;
  }

  #devicesTable td:nth-child(1)::before{content:"Device"}
  #devicesTable td:nth-child(2)::before{content:"SIM Number"}
  #devicesTable td:nth-child(3)::before{content:"Model"}
  #devicesTable td:nth-child(4)::before{content:"Last Seen"}
  #devicesTable td:nth-child(5)::before{content:"Status"}
  #devicesTable td:nth-child(6)::before{content:"Actions"}

  #contactsTable td:nth-child(1)::before{content:"Name"}
  #contactsTable td:nth-child(2)::before{content:"Phone"}
  #contactsTable td:nth-child(3)::before{content:"Device"}
  #contactsTable td:nth-child(4)::before{content:"Last Sync"}

  #callsTable td:nth-child(1)::before{content:"Caller"}
  #callsTable td:nth-child(2)::before{content:"Direction"}
  #callsTable td:nth-child(3)::before{content:"Status"}
  #callsTable td:nth-child(4)::before{content:"Outcome"}
  #callsTable td:nth-child(5)::before{content:"Duration"}
  #callsTable td:nth-child(6)::before{content:"Server Media"}
  #callsTable td:nth-child(7)::before{content:"Recording"}
  #callsTable td:nth-child(8)::before{content:"Created"}
  #callsTable td:nth-child(9)::before{content:"Actions"}

  #devicesTable .row-actions,
  #callsTable .row-actions{
    width:100%;
  }

  #devicesTable .row-actions .mini-action,
  #callsTable .mini-action{
    flex:1 1 0;
    min-width:0;
  }

  #callsTable .call-audio{
    width:100%;
    max-width:100%;
  }

  #callsTable .muted{
    line-height:1.45;
  }
}

@media(max-width:430px){
  #devicesTable .table td,
  #contactsTable .table td,
  #callsTable .table td{
    grid-template-columns:92px minmax(0,1fr);
    gap:9px;
  }
}

.media-status-card.ready{background:#2a2110;border-color:#5d481c}
.media-chip.pending{background:#3a2913;color:#ffd18b}
.recording-live{display:inline-block;color:#ff8e93;font-size:11px;font-weight:850;letter-spacing:.04em}
.secret-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center}
.secret-row .secondary-action{white-space:nowrap}
@media(max-width:680px){
  .secret-row{grid-template-columns:1fr 1fr}
  .secret-row input{grid-column:1/-1}
}