*{margin:0;padding:0;box-sizing:border-box;}
:root{
  --purple:#7B61FF;--purple-d:#6246EA;--purple-l:#EEF0FF;--purple-xl:#F5F4FF;
  --bg:#F7F8FA;--surface:#FFFFFF;--border:#E5E7EB;
  --txt:#111827;--txt2:#6B7280;--txt3:#9CA3AF;
  --ok:#10B981;--ok-l:#D1FAE5;--warn:#F59E0B;--warn-l:#FEF3C7;
  --err:#EF4444;--err-l:#FEE2E2;
  --shadow:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);
  --shadow-md:0 4px 12px rgba(0,0,0,.08),0 2px 4px rgba(0,0,0,.04);
  --sw:230px;--ff:'Inter',sans-serif;--fm:'JetBrains Mono',monospace;
}
html,body{height:100%;overflow:hidden;}
body{font-family:var(--ff);background:var(--bg);color:var(--txt);display:flex;font-size:14px;}

/* ── SIDEBAR ── */
.sidebar{width:var(--sw);height:100vh;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;left:0;top:0;bottom:0;z-index:100;}
.sb-brand{padding:16px 16px 12px;border-bottom:1px solid var(--border);}
.sb-brand-row{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.sb-avatar{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,var(--purple),var(--purple-d));display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:700;flex-shrink:0;box-shadow:0 2px 8px rgba(123,97,255,.35);}
.sb-title{font-size:15px;font-weight:700;color:var(--txt);letter-spacing:-.01em;line-height:1.1;}
.sb-sub{font-size:11px;color:var(--txt3);margin-top:1px;}
.sb-logo{border-radius:8px;overflow:hidden;border:1px solid var(--border);background:#0d0f1e;position:relative;}
.sb-logo img{width:100%;height:148px;object-fit:cover;display:block;}
.sb-logo-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.55));height:48px;}
.sb-divider{display:none;}
.sb-nav{flex:1;padding:10px 8px;overflow-y:auto;}
.nav-section{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--txt3);padding:10px 8px 4px;}
.nav-item{
  display:flex;align-items:center;gap:9px;
  padding:18px 12px;border-radius:7px;cursor:pointer;
  color:var(--txt2);font-size:13.5px;font-weight:500;
  transition:all .14s;margin-bottom:2px;user-select:none;
  width:100%;
}
.nav-item:hover{background:var(--bg);color:var(--txt);}
.nav-item.active{background:var(--purple-l);color:var(--purple);font-weight:600;}
.nav-item svg{width:16px;height:16px;flex-shrink:0;stroke-width:1.75;}
.nav-dot{width:6px;height:6px;border-radius:50%;background:var(--ok);margin-left:4px;flex-shrink:0;}
.sb-footer{padding:12px 16px;border-top:1px solid var(--border);font-size:11px;color:var(--txt3);display:flex;align-items:center;gap:6px;}
.ver{font-family:var(--fm);font-size:10px;background:var(--purple-l);color:var(--purple);padding:1px 6px;border-radius:3px;}
.sb-status-dot{display:none;}

/* ── SIDEBAR COLLAPSE ── */
.sidebar{transition:width .22s ease;}
.sidebar.collapsed{width:0;overflow:hidden;}
.main{transition:margin-left .22s ease;}
.main.expanded{margin-left:0;}
.topbar{transition:left .22s ease;}
.topbar.expanded{left:0;padding-left:52px;}
.sb-collapse-btn{
  position:absolute;top:14px;right:-13px;
  width:24px;height:24px;border-radius:50%;
  background:var(--surface);border:1px solid var(--border);
  box-shadow:var(--shadow-md);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:var(--txt3);transition:all .15s;z-index:101;
}
.sb-collapse-btn:hover{color:var(--purple);border-color:var(--purple);background:var(--purple-xl);}
.sb-collapse-btn svg{width:11px;height:11px;transition:transform .22s;}
.sidebar.collapsed .sb-collapse-btn svg{transform:rotate(180deg);}
.sb-expand-btn{
  display:none;position:fixed;top:11px;left:12px;
  width:30px;height:30px;border-radius:8px;z-index:102;
  background:var(--surface);border:1px solid var(--border);
  box-shadow:var(--shadow-md);
  cursor:pointer;align-items:center;justify-content:center;
  color:var(--txt2);transition:all .15s;
}
.sb-expand-btn:hover{color:var(--purple);border-color:var(--purple);background:var(--purple-xl);}
.sb-expand-btn svg{width:13px;height:13px;}
.sb-expand-btn.visible{display:flex;}

/* ── TOPBAR ── */
.topbar{position:fixed;top:0;left:var(--sw);right:0;height:52px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 24px;z-index:90;}
.tb-left{display:flex;align-items:center;gap:6px;}
.tb-bc{font-size:12px;color:var(--txt3);}
.tb-sep{color:var(--txt3);font-size:14px;margin:0 2px;}
.tb-page{font-size:13px;font-weight:600;color:var(--txt);}
.tb-right{display:flex;align-items:center;gap:8px;}
.btn-icon{width:32px;height:32px;border-radius:7px;border:1px solid var(--border);background:var(--surface);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--txt2);transition:all .14s;}
.btn-icon:hover{background:var(--bg);color:var(--txt);}
.btn-icon svg{width:15px;height:15px;stroke-width:1.75;}

/* ── MAIN ── */
.main{margin-left:var(--sw);margin-top:52px;flex:1;overflow-y:auto;height:calc(100vh - 52px);padding:24px 28px;}
.section{display:none;animation:fadeIn .2s ease;}
.section.active{display:block;}
@keyframes fadeIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* ── PAGE HEADER ── */
.ph{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-bottom:16px;border-bottom:1px solid var(--border);margin-bottom:20px;}
.ph-title{font-size:20px;font-weight:700;color:var(--txt);letter-spacing:-.02em;}
.ph-sub{font-size:12.5px;color:var(--txt2);margin-top:3px;}

/* ── METRIC CARDS ── */
.metrics{display:flex;gap:10px;flex-wrap:nowrap;margin-bottom:20px;width:100%;}
.mcard{flex:1;min-width:0;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:10px 14px;box-shadow:var(--shadow);transition:all .14s;display:flex;align-items:center;gap:10px;}
.mcard:hover{border-color:#D1D5DB;box-shadow:var(--shadow-md);}
.mcard-icon{width:32px;height:32px;border-radius:8px;background:var(--purple-l);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.mcard-icon svg{width:15px;height:15px;stroke:var(--purple);}
.mcard-body{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0;}
.mcard-label{font-size:11px;font-weight:500;color:var(--txt3);white-space:nowrap;}
.mcard-val{font-size:17px;font-weight:800;color:var(--txt);letter-spacing:-.02em;line-height:1;white-space:nowrap;}

/* ── CARD ── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);}
.card-header{padding:14px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;}
.card-title{font-size:13.5px;font-weight:600;color:var(--txt);display:flex;align-items:center;gap:8px;}
.card-dot{width:8px;height:8px;border-radius:50%;background:var(--purple);flex-shrink:0;}

/* ── ENV BUTTONS ── */
.env-btns{display:flex;gap:8px;flex-wrap:wrap;}
.env-btn{padding:7px 14px;background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--txt);font-size:12.5px;font-weight:600;font-family:var(--ff);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:all .14s;box-shadow:var(--shadow);}
.env-btn:hover{border-color:var(--purple);color:var(--purple);background:var(--purple-xl);}
.env-btn svg{width:11px;height:11px;opacity:.55;}

/* ── TABLE ── */
.table-wrap{overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:13px;}
thead th{background:#F9FAFB;color:var(--txt2);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;padding:10px 14px;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap;}
thead th.center{text-align:center;}
tbody td{padding:10px 14px;border-bottom:1px solid #F3F4F6;color:var(--txt2);vertical-align:middle;}
tbody td.center{text-align:center;vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover td{background:#FAFBFF;}
.mac-num{font-family:var(--fm);font-size:12px;color:var(--purple);font-weight:600;}
.abtn{padding:4px 10px;background:var(--surface);border:1px solid var(--border);border-radius:6px;color:var(--txt2);font-size:11.5px;font-weight:500;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:4px;transition:all .13s;}
.abtn:hover{border-color:var(--purple);color:var(--purple);background:var(--purple-xl);}
.abtn.dis{opacity:.3;cursor:not-allowed;pointer-events:none;}
.abtn svg{width:10px;height:10px;}

/* ── TOOLBAR ── */
.toolbar{display:flex;align-items:center;gap:10px;margin-bottom:20px;flex-wrap:wrap;}
.btn-primary{padding:8px 16px;background:var(--purple);border:none;border-radius:8px;color:#fff;font-size:13px;font-weight:600;font-family:var(--ff);cursor:pointer;transition:all .16s;display:inline-flex;align-items:center;gap:6px;box-shadow:0 2px 8px rgba(123,97,255,.28);}
.btn-primary:hover{background:var(--purple-d);box-shadow:0 4px 14px rgba(123,97,255,.38);transform:translateY(-1px);}
.btn-primary.danger{background:#EF4444;box-shadow:0 2px 8px rgba(239,68,68,.25);}
.btn-primary.danger:hover{background:#DC2626;box-shadow:0 4px 14px rgba(239,68,68,.32);}
.btn-refresh{padding:7px 13px;background:var(--surface);border:1px solid var(--border);border-radius:7px;color:var(--txt2);font-size:12.5px;font-weight:500;cursor:pointer;transition:all .14s;display:flex;align-items:center;gap:6px;box-shadow:var(--shadow);}
.btn-refresh:hover{border-color:var(--purple);color:var(--purple);background:var(--purple-xl);}
.btn-refresh svg{width:13px;height:13px;stroke-width:2;}
.edit-badge{padding:5px 12px;background:var(--ok-l);border:1px solid rgba(16,185,129,.3);border-radius:6px;color:var(--ok);font-size:12px;font-weight:600;display:none;align-items:center;gap:6px;}
.edit-badge.on{display:flex;}
.pulse{animation:pulse 2s ease infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ── SEARCH ── */
.search-wrap{position:relative;margin-bottom:14px;}
.search-wrap svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--txt3);pointer-events:none;}
.search-input{width:100%;padding:8px 12px 8px 34px;background:var(--surface);border:1px solid var(--border);border-radius:8px;font-size:13px;font-family:var(--ff);color:var(--txt);outline:none;box-shadow:var(--shadow);transition:all .14s;}
.search-input::placeholder{color:var(--txt3);}
.search-input:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(123,97,255,.1);}

/* ── ACCORDION ── */
.accord{display:flex;flex-direction:column;gap:6px;}
.acc-item{background:var(--surface);border:1px solid var(--border);border-radius:9px;overflow:hidden;transition:all .16s;box-shadow:var(--shadow);}
.acc-item:hover{border-color:#D1D5DB;}
.acc-item.open{border-color:var(--purple);box-shadow:0 0 0 3px rgba(123,97,255,.08),var(--shadow);}
.acc-hdr{display:flex;align-items:center;justify-content:space-between;padding:13px 18px;cursor:pointer;user-select:none;}
.acc-hdr-left{display:flex;align-items:center;gap:10px;}
.acc-icon{width:28px;height:28px;border-radius:7px;background:var(--purple-l);color:var(--purple);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;}
.acc-t{font-size:13.5px;font-weight:600;color:var(--txt);}
.acc-s{font-size:11.5px;color:var(--txt3);margin-top:1px;}
.acc-chev{width:16px;height:16px;color:var(--txt3);transition:transform .2s;flex-shrink:0;}
.acc-item.open .acc-chev{transform:rotate(180deg);}
.acc-body{max-height:0;overflow:hidden;transition:max-height .32s ease;}
.acc-item.open .acc-body{max-height:4000px;}
.acc-content{padding:4px 18px 18px;}
.acc-div{height:1px;background:var(--border);margin-bottom:14px;}

/* ── FIELDS ── */
.fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px;}
.fg{display:flex;flex-direction:column;gap:5px;}
.fl{font-size:11px;font-weight:600;color:var(--txt2);text-transform:uppercase;letter-spacing:.05em;}
.fr{display:flex;align-items:center;gap:6px;}
.fi-wrap{flex:1;position:relative;display:flex;align-items:center;}
.fi{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:7px;padding:7px 30px 7px 11px;color:var(--txt);font-size:13px;font-family:var(--ff);transition:all .14s;outline:none;}
.fi:focus{border-color:var(--purple);background:#fff;box-shadow:0 0 0 3px rgba(123,97,255,.1);}
.fi:disabled{opacity:.5;cursor:not-allowed;background:#F9FAFB;}
.fi:disabled~.expand-btn{opacity:.3;pointer-events:none;}
.fi.changed{border-color:var(--warn);background:#FFFDF0;}
.btn-sv{padding:5px 10px;background:var(--surface);border:1px solid var(--border);border-radius:6px;color:var(--txt2);font-size:11.5px;font-weight:500;font-family:var(--ff);cursor:pointer;transition:all .13s;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;}
.btn-sv:hover{border-color:var(--ok);color:var(--ok);background:var(--ok-l);}
.btn-sv:disabled{opacity:.3;cursor:not-allowed;}
.btn-sv svg{width:10px;height:10px;stroke-width:2.5;}

/* ── FLUXOS CHIPS ── */
.fl-chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px;}
.chip{padding:8px 16px;background:var(--surface);border:1px solid var(--border);border-radius:8px;font-size:12.5px;font-weight:500;color:var(--txt2);display:flex;align-items:center;gap:8px;box-shadow:var(--shadow);}
.chip strong{color:var(--purple);font-size:18px;font-weight:800;letter-spacing:-.02em;line-height:1;}

/* ── TOGGLE ── */
.toggle{position:relative;display:inline-block;width:38px;height:20px;}
.toggle input{opacity:0;width:0;height:0;position:absolute;}
.ts{position:absolute;cursor:pointer;inset:0;background:#E5E7EB;border-radius:20px;transition:all .2s;}
.ts:before{content:'';position:absolute;height:14px;width:14px;left:3px;top:3px;background:#fff;border-radius:50%;transition:all .2s;box-shadow:0 1px 3px rgba(0,0,0,.2);}
.toggle input:checked+.ts{background:var(--purple);}
.toggle input:checked+.ts:before{transform:translateX(18px);}

/* ── DATE / RESET ── */
.date-wrap{display:flex;align-items:center;gap:7px;}
.date-disp{font-family:var(--fm);font-size:11.5px;color:var(--txt2);background:var(--bg);border:1px solid var(--border);border-radius:5px;padding:3px 8px;white-space:nowrap;}
.btn-rst{padding:4px 10px;background:var(--surface);border:1px solid var(--border);border-radius:6px;color:var(--txt2);font-size:11px;font-weight:500;cursor:pointer;transition:all .13s;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;}
.btn-rst:hover{border-color:var(--warn);color:var(--warn);background:var(--warn-l);}
.btn-rst svg{width:10px;height:10px;stroke-width:2.5;}

/* ── IMPLANTAR ── */
.impl-body{padding:20px;}
.impl-footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:16px 20px;border-top:1px solid var(--border);}
.impl-hint{font-size:12px;color:var(--txt3);flex:1;}
.impl-hint.err{color:var(--err);font-weight:500;}
.impl-hint.ok{color:var(--ok);font-weight:500;}

/* ── FIELD EXPAND ── */
.expand-btn{
  position:absolute;right:7px;
  width:18px;height:18px;border-radius:4px;
  background:transparent;border:none;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  color:var(--txt3);transition:all .14s;padding:0;flex-shrink:0;
}
.expand-btn:hover{background:var(--purple-l);color:var(--purple);}
.expand-btn svg{width:10px;height:10px;pointer-events:none;}

.field-overlay{
  display:none;position:absolute;inset:0;z-index:200;
  background:var(--surface);border-radius:9px;
  border:2px solid var(--purple);
  box-shadow:0 8px 32px rgba(123,97,255,.18);
  flex-direction:column;padding:16px;gap:10px;
}
.field-overlay.open{display:flex;}
.fo-label{font-size:11px;font-weight:600;color:var(--purple);text-transform:uppercase;letter-spacing:.06em;display:flex;align-items:center;justify-content:space-between;}
.fo-close{
  width:26px;height:26px;border-radius:6px;border:1px solid var(--border);
  background:var(--bg);cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:var(--txt2);transition:all .14s;
}
.fo-close:hover{border-color:var(--err);color:var(--err);background:var(--err-l);}
.fo-close svg{width:12px;height:12px;}
.fo-textarea{
  flex:1;resize:none;background:var(--bg);border:1px solid var(--border);
  border-radius:7px;padding:10px 12px;font-size:13px;font-family:var(--ff);
  color:var(--txt);outline:none;line-height:1.55;transition:border-color .14s;
}
.fo-textarea:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(123,97,255,.1);}
.fo-footer{display:flex;align-items:center;justify-content:flex-end;gap:8px;}
.fo-save{
  padding:7px 16px;background:var(--purple);border:none;border-radius:7px;
  color:#fff;font-size:13px;font-weight:600;font-family:var(--ff);
  cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:6px;
}
.fo-save:hover{background:var(--purple-d);}
.fo-cancel{
  padding:7px 14px;background:var(--surface);border:1px solid var(--border);
  border-radius:7px;color:var(--txt2);font-size:13px;font-weight:500;font-family:var(--ff);
  cursor:pointer;transition:all .14s;
}
.fo-cancel:hover{border-color:var(--txt2);color:var(--txt);}

/* accordion content needs position:relative for overlay */
.acc-content{position:relative;}

/* ── SPINNER / EMPTY ── */
.spin{display:inline-block;width:15px;height:15px;border:2px solid var(--border);border-top-color:var(--purple);border-radius:50%;animation:spin .6s linear infinite;vertical-align:middle;}
@keyframes spin{to{transform:rotate(360deg)}}
.empty{padding:32px;text-align:center;color:var(--txt3);font-size:13px;}

/* ── TOASTS ── */
.toast-c{position:fixed;bottom:20px;right:20px;display:flex;flex-direction:column;gap:6px;z-index:9999;}
.toast{padding:10px 14px;border-radius:8px;font-size:13px;font-weight:500;display:flex;align-items:center;gap:8px;animation:slideIn .25s ease;max-width:290px;box-shadow:var(--shadow-md);}
.toast.ok{background:var(--ok-l);border:1px solid rgba(16,185,129,.25);color:#065F46;}
.toast.err{background:var(--err-l);border:1px solid rgba(239,68,68,.25);color:#991B1B;}
@keyframes slideIn{from{transform:translateX(110%);opacity:0}to{transform:none;opacity:1}}

::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:#D1D5DB;border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:#9CA3AF;}

/* ══════════════════════════════════════
   RESPONSIVE — MOBILE
══════════════════════════════════════ */

/* Overlay backdrop when sidebar is open on mobile */
.sb-backdrop{
  display:none;position:fixed;inset:0;z-index:99;
  background:rgba(0,0,0,.35);
}
.sb-backdrop.visible{display:block;}

@media (max-width: 768px) {
  /* Sidebar becomes a drawer overlay */
  :root{--sw:230px;}
  html,body{overflow:hidden;}

  .sidebar{
    position:fixed;left:0;top:0;bottom:0;
    transform:translateX(-100%);width:var(--sw) !important;
    transition:transform .22s ease;
    z-index:200;overflow:hidden;
  }
  .sidebar.mobile-open{transform:translateX(0);}
  .sidebar.collapsed{transform:translateX(-100%);width:var(--sw) !important;}

  /* Hide the desktop collapse button on mobile */
  .sb-collapse-btn{display:none;}

  /* Mobile hamburger — always visible at top-left */
  .sb-expand-btn{
    display:flex !important;
    top:11px;left:12px;
    z-index:201;
  }

  /* Topbar takes full width */
  .topbar{left:0 !important;padding-left:52px;transition:none;}
  .topbar.expanded{padding-left:52px;}

  /* Main takes full width — use padding-bottom so save btn is never cut off */
  .main{margin-left:0 !important;padding:16px 14px 100px 14px;transition:none;height:calc(100vh - 52px);overflow-y:auto;}
  .main.expanded{margin-left:0 !important;}

  /* Metrics wrap to 2 columns on mobile */
  .metrics{flex-wrap:wrap;gap:8px;}
  .mcard{flex:1 1 calc(50% - 4px);min-width:calc(50% - 4px);}

  /* Page header stack */
  .ph{flex-direction:column;gap:6px;}

  /* Card headers stack */
  .card-header{flex-direction:column;align-items:flex-start;}
  .env-btns{width:100%;}
  .env-btn{flex:1;justify-content:center;}

  /* Fields grid single column */
  .fields{grid-template-columns:1fr;}

  /* Accordion full width */
  .acc-content{padding:4px 12px 14px;}

  /* Toolbar wrap */
  .toolbar{flex-wrap:wrap;}
  .btn-primary{width:100%;justify-content:center;}

  /* Impl footer — fixed at bottom on mobile */
  .impl-footer{
    position:fixed;bottom:0;left:0;right:0;
    flex-direction:row;align-items:center;gap:8px;
    background:var(--surface);border-top:1px solid var(--border);
    padding:12px 16px;z-index:50;
    box-shadow:0 -4px 12px rgba(0,0,0,.08);
  }
  .impl-hint{flex:1;font-size:11px;}
  #btn-impl-save{flex:1;justify-content:center;}
  /* Extra bottom padding so last field isn't hidden behind the fixed bar */
  #s-implantar .card{margin-bottom:72px;}

  /* Fluxos chips wrap */
  .fl-chips{gap:8px;}
  .chip{flex:1 1 calc(50% - 4px);}

  /* Toasts full width on mobile */
  .toast-c{left:12px;right:12px;bottom:14px;}
  .toast{max-width:100%;}
}

@media (max-width: 420px) {
  /* Single column metrics on very small screens */
  .mcard{flex:1 1 100%;}
  .chip{flex:1 1 100%;}
  .env-btn{flex:1 1 100%;}
  .main{padding:12px 10px;}
  .ph-title{font-size:17px;}
}