:root{
  --bg:#07080a; --bg-1:#0c0e14; --bg-2:#111520; --bg-3:#181d28;
  --border:rgba(255,255,255,0.07); --border-strong:rgba(255,255,255,0.14);
  --text:#e8ecf4; --text-2:#8e98ae; --text-3:#4e5669; --text-4:#2e3445;
  --accent:#3b82f6; --accent-2:#60a5fa; --accent-soft:rgba(59,130,246,0.12); --accent-strong:rgba(59,130,246,0.24);
  --green:#22c55e; --green-soft:rgba(34,197,94,0.12);
  --purple:#a855f7; --purple-soft:rgba(168,85,247,0.12);
  --orange:#f59e0b; --red:#ef4444;
  --font-sans:'Inter',-apple-system,sans-serif;
  --font-mono:'JetBrains Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body,html{min-height:100%}
html{overflow-x:clip}body{font-family:var(--font-sans);background:var(--bg);color:var(--text);overflow-x:clip}
a{text-decoration:none;color:inherit}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-sans);font-size:13px;font-weight:500;padding:8px 16px;border-radius:8px;border:1px solid var(--border-strong);color:var(--text-2);background:transparent;cursor:pointer;transition:all .15s;white-space:nowrap;line-height:1}
.btn:hover{color:var(--text);background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.18)}
.btn.ghost{border:none;background:transparent;color:var(--text-2)}
.btn.ghost:hover{background:rgba(255,255,255,0.06);color:var(--text)}
.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600;box-shadow:0 0 20px rgba(59,130,246,0.2)}
.btn.primary:hover{background:#2563eb;border-color:#2563eb;transform:translateY(-1px);box-shadow:0 4px 20px rgba(59,130,246,0.35)}
.btn.brand{background:linear-gradient(135deg,#3b82f6,#7c3aed);color:#fff;border:none;box-shadow:0 4px 20px rgba(59,130,246,0.25);font-weight:600}
.btn.brand:hover{transform:translateY(-1px);box-shadow:0 6px 28px rgba(59,130,246,0.35)}
.btn.xl{padding:12px 28px;font-size:15px;border-radius:10px;font-weight:600}
.btn.lg{padding:10px 20px;font-size:14px}

/* ── Cards ── */
.card{background:var(--bg-2);border:1px solid var(--border);border-radius:10px}

/* ── Dot ── */
.dot{width:8px;height:8px;border-radius:50%;background:var(--accent);display:inline-block;flex-shrink:0}
.dot.green{background:var(--green);box-shadow:0 0 0 0 rgba(34,197,94,0.6);animation:ping-green 2s infinite}
.dot.purple{background:var(--purple)}
.dot.orange{background:var(--orange)}
@keyframes ping-green{0%{box-shadow:0 0 0 0 rgba(34,197,94,0.6)}70%{box-shadow:0 0 0 10px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}

/* ── Form ── */
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px;background:transparent!important}
.field-label{font-size:12px;font-weight:600;color:var(--text-2);display:flex;justify-content:space-between;align-items:center}
.field-hint{font-size:11px;color:var(--text-3);margin-top:3px}
.text{background:#11151f!important;border:1.5px solid rgba(255,255,255,.1)!important;border-radius:8px;padding:9px 12px;font-size:13.5px;color:#e8ecf4!important;outline:none;font-family:var(--font-sans);transition:border-color .12s,box-shadow .12s;width:100%}
.text:focus{border-color:rgba(59,130,246,.6)!important;box-shadow:0 0 0 3px rgba(59,130,246,.12)!important}
.text::placeholder{color:var(--text-3)}

/* ── Auth shell ── */
.mk-body{overflow-x:clip}
.auth-shell{display:grid;grid-template-columns:1fr 1fr;height:100vh;overflow:hidden}
.auth-main{background:var(--bg-1);display:flex;flex-direction:column;overflow-y:auto}
.auth-nav-top{padding:20px 40px 0;display:flex;gap:6px;align-items:center;justify-content:flex-end;font-size:13px;color:var(--text-3);flex-shrink:0}
.auth-nav-top a{color:var(--accent-2);font-weight:500}
.auth-nav-top a:hover{text-decoration:underline}
.auth-card{flex:1;display:flex;flex-direction:column;justify-content:center;padding:40px;max-width:460px;width:100%;margin:0 auto}
.auth-title{font-size:22px;font-weight:600;letter-spacing:-.015em;margin-bottom:6px}
.auth-sub{font-size:13px;color:var(--text-2);line-height:1.55;margin-bottom:20px}
.auth-divider{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--text-3);margin:16px 0;background:transparent!important;padding:0!important;border:none!important;border-radius:0!important}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.08)}
.auth-form{display:flex;flex-direction:column;gap:0}
.auth-fineprint{font-size:11px;color:var(--text-3);margin-top:14px;line-height:1.6}
.auth-fineprint a{color:var(--text-3);text-decoration:underline}
.auth-switch{font-size:13px;color:var(--text-2);margin-top:16px;text-align:center}
.auth-switch a{color:var(--accent-2);font-weight:500}
.toast-stack{position:fixed;bottom:20px;right:20px;display:flex;flex-direction:column;gap:8px;z-index:9999}
.toast{background:var(--bg-2);border:1px solid var(--border-strong);border-radius:8px;padding:10px 14px;font-size:13px;display:flex;align-items:center;gap:8px;box-shadow:0 8px 24px rgba(0,0,0,.4);animation:toast-in .2s ease}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ic{display:flex;align-items:center}
@media(max-width:900px){
  .auth-shell{grid-template-columns:1fr!important}
  .hero-side{display:none!important}
  .auth-card{padding:24px}
  .auth-shell > div:last-child, .auth-shell > section:last-child {
    display:flex;align-items:center;justify-content:center;min-height:100vh;
  }
}
@media(max-width:480px){
  .auth-card{padding:20px 16px;border-radius:12px}
}


/* ===== GLOBAL RESPONSIVE - covers all pages ===== */
* { box-sizing: border-box; }

/* All tables scrollable on mobile */
@media(max-width:768px){
  .v2-dt-wrap, .table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .v2-dt { min-width:420px; }

  /* Any inline grid 2+ cols -> 1 col */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns:1fr!important;
  }
  [style*="grid-template-columns: 2fr 1fr"],
  [style*="grid-template-columns:2fr 1fr"]{
    grid-template-columns:1fr!important;
  }

  /* Page headers */
  .v2ph, .v2-page-header {
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:10px!important;
  }

  /* Cards padding */
  .v2-card-body { padding:14px!important; }
  .v2-card-header { padding:12px 14px!important; }

  /* Buttons in rows */
  .btn-row, .action-row {
    flex-direction:column!important;
    gap:8px!important;
  }
  .btn-row > *, .action-row > * {
    width:100%!important;
  }
}

@media(max-width:480px){
  /* Prevent iOS zoom on inputs */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="url"],
  select,
  textarea {
    font-size:16px!important;
  }
  .v2-dt { min-width:360px; }
  .v2-card-body { padding:12px!important; }
}


/* ===== TABLE OVERFLOW FIX - all devices ===== */
@media(max-width:900px){
  /* Wrap all tables that don't have a wrapper already */
  .v2-card .v2-dt,
  .v2-card table,
  .v2-card-body table {
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    max-width:100%;
  }
  /* Stats strip already handled in marketing.css */
  
  /* Any overflow hidden containers that clip content */
  .v2-card{overflow:visible!important}
}


/* ===== UNIVERSAL TEXT + LAYOUT FIX ===== */
/* Prevent ANY element from causing horizontal page scroll */
html {
  overflow-x: hidden !important;
}

/* All text elements wrap properly */  
p, li, span, td, th, label, a, div {
  word-wrap: break-word;
  overflow-wrap: break-word;
  min-width: 0; /* fixes flex overflow */
}

/* Images never overflow */
img, svg, canvas, video, iframe {
  max-width: 100%;
  height: auto;
}

/* Flex children don't overflow */
.v2-card, .v2-card-body, .v2-card-header {
  min-width: 0;
}

/* Code blocks scroll within themselves */
pre, code {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: pre;
}

@media(max-width:768px){
  /* Only kill clearly broken wide elements - don't apply universally */
  img, video, iframe {
    max-width: 100%;
  }
}

/* ── Dashboard Glass + Background Effect ── */
#v2app{position:relative;z-index:1}
.v2layout,.v2content,.v2main,.v2page{background:transparent !important}
.v2sb{
  background:var(--bg-1) !important;
  backdrop-filter:none !important;
}
.v2topbar{
  background:rgba(7,8,10,.80) !important;
  backdrop-filter:blur(14px) !important;
  -webkit-backdrop-filter:blur(14px) !important;
}
.v2-card{
  background:rgba(11,13,20,.74) !important;
  backdrop-filter:blur(10px) !important;
  -webkit-backdrop-filter:blur(10px) !important;
}
/* Remove solid bg from layout containers */
.v2main,.v2content{background:transparent !important}

/* ── Dashboard Body Background ── */
body:not(.auth-page) {
  background-image:
    radial-gradient(ellipse 800px 600px at 90% -10%, rgba(99,102,241,.12) 0%, transparent 70%),
    radial-gradient(ellipse 600px 500px at -10% 80%, rgba(37,99,235,.10) 0%, transparent 70%),
    radial-gradient(ellipse 500px 400px at 50% 110%, rgba(139,92,246,.08) 0%, transparent 70%);
  background-attachment: fixed;
  animation: bg-shift 20s ease-in-out infinite;
}
@keyframes bg-shift {
  0%,100% { background-position: 90% -10%, -10% 80%, 50% 110%; }
  33%      { background-position: 95% 20%,   5% 60%,  40% 90%; }
  66%      { background-position: 70% 5%,  -5% 95%,  60% 100%; }
}