:root{
  --bg0:#07090c;
  --bg1:#0b0f15;
  --stroke: rgba(255,255,255,.10);
  --muted: rgba(255,255,255,.70);
  --muted2: rgba(255,255,255,.55);
  --text: rgba(255,255,255,.92);
  --green:#39ff5a;
  --shadow: 0 18px 45px rgba(0,0,0,.45);
  --shadow2: 0 10px 25px rgba(0,0,0,.35);
  --r: 16px;
  --r2: 22px;
  --gap: 14px;
  --max: 1180px;
  --sidebar: 280px;
  --top: 64px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

*{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(1200px 700px at 70% 25%, rgba(57,255,90,.20), transparent 60%),
    radial-gradient(900px 600px at 25% 10%, rgba(65,180,255,.18), transparent 55%),
    radial-gradient(800px 600px at 10% 70%, rgba(255,255,255,.07), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
}

a{ color: inherit; text-decoration:none; }

button,input,select,textarea{
  font-family:inherit;
  color:inherit;
}

.shell{
  display:flex;
  min-height:100vh;
}

.sidebar{
  width: var(--sidebar);
  border-right: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  position: sticky;
  top:0;
  height: 100vh;
  padding: 18px 14px;
  display:flex;
  flex-direction:column;
  gap: 14px;
  z-index: 20;
}

.main{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
}

.topbar{
  height: var(--top);
  min-height: var(--top);
  position: sticky;
  top:0;
  z-index: 10;
  border-bottom: 1px solid var(--stroke);
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 18px;
  gap: 12px;
}

.content{
  padding: 18px;
}

.wrap{
  max-width: var(--max);
  margin: 0 auto;
  display:flex;
  flex-direction:column;
  gap: 16px;
  width:100%;
}

.card{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  border-radius: var(--r2);
  box-shadow: var(--shadow);
  overflow:hidden;
}

.card .hd{
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}

.card .hd h2{
  margin:0;
  font-size:16px;
}

.card .bd{
  padding: 16px 18px;
  color: var(--muted);
  line-height: 1.6;
}

.btn{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  padding: 10px 16px;
  border-radius: 12px;
  cursor:pointer;
  transition:.15s ease;
  user-select:none;
}

.btn:hover{
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.18);
}

.btn.green{
  border-color: rgba(57,255,90,.35);
  background: linear-gradient(180deg, rgba(57,255,90,.30), rgba(31,214,74,.20));
}

.btn.disabled{
  opacity:.45;
  pointer-events:none;
}

.btn.ready{
  opacity:1;
  pointer-events:auto;
}

.btn.green.ready{
  animation:pulseGlow 1.4s infinite;
}

@keyframes pulseGlow{
  0%{
    box-shadow:0 0 0 0 rgba(57,255,90,.4);
  }

  70%{
    box-shadow:0 0 0 12px rgba(57,255,90,0);
  }

  100%{
    box-shadow:0 0 0 0 rgba(57,255,90,0);
  }
}

.toast{
  position: fixed;
  right: 18px;
  bottom: 18px;
  min-width: 280px;
  max-width: 420px;
  border-radius: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  display:none;
  z-index: 200;
}

.toast.show{ display:block; }

.toast b{
  display:block;
  margin-bottom:4px;
}

.toast span{
  color: var(--muted2);
  font-size: 13px;
}

.nav{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:6px;
  border:1px solid var(--stroke);
  border-radius: var(--r);
  background: rgba(0,0,0,.16);
}

.nav a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border-radius:12px;
  color: var(--muted);
  border:1px solid transparent;
}

.nav a:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.08);
  color: var(--text);
}

.nav a.active{
  background: rgba(57,255,90,.14);
  border-color: rgba(57,255,90,.26);
  color: rgba(255,255,255,.96);
}

.sidebar-quick{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:12px;
  border:1px solid var(--stroke);
  border-radius:16px;
  background: linear-gradient(180deg, rgba(74,191,117,.10), rgba(0,0,0,.16));
}

.sidebar-quick-label{
  font-size:12px;
  color:var(--muted2);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.quick-link{
  display:block;
  padding:11px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:var(--text);
  font-weight:700;
}

.quick-link:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.14);
}

.quick-link.primary{
  border-color:rgba(57,255,90,.26);
  background:linear-gradient(180deg, rgba(57,255,90,.22), rgba(31,214,74,.12));
}

.top-cta{
  border-color:rgba(57,255,90,.28);
  background:linear-gradient(180deg, rgba(57,255,90,.22), rgba(31,214,74,.14));
}

.table-actions{
  display:flex;
  gap:8px;
  align-items:center;
  white-space:nowrap;
  flex-wrap:wrap;
}

.mini-btn{
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(245,248,250,.96), rgba(224,231,236,.90));
  color:#0f1720;
  cursor:pointer;
  font-weight:700;
  box-shadow:0 2px 6px rgba(0,0,0,.18);
}

.mini-btn:hover{
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(235,241,245,.96));
  color:#0a1218;
}

.mini-btn.danger{
  border-color:rgba(255,120,120,.34);
  background:linear-gradient(180deg, rgba(255,233,233,.98), rgba(255,208,208,.94));
  color:#5a1010;
}

.mini-btn.danger:hover{
  background:linear-gradient(180deg, rgba(255,242,242,.98), rgba(255,220,220,.96));
  color:#4c0c0c;
}

.pill{
  font-size: 11px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(57,255,90,.35);
  background: rgba(57,255,90,.12);
}

/* ============================= */
/* WELCOME VIDEO */
/* ============================= */

.welcome-body{
  text-align:center;
}

.welcome-video-wrap{
  display:flex;
  justify-content:center;
  margin: 4px 0 22px;
}

.welcome-video-box{
  width: 220px;
  max-width: 220px;
  min-width: 220px;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
}

.welcome-video-box video{
  display:block;
  width:100%;
  height:auto;
  background:#000;
}

.welcome-text{
  max-width:760px;
  margin:0 auto 22px;
  font-size:15px;
  line-height:1.75;
  color: var(--muted);
}

.welcome-text p{
  margin:0 0 18px;
}

.welcome-actions{
  display:flex;
  justify-content:center;
  margin-top:10px;
}

.page-intro{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr);
  gap:14px;
  margin-bottom:14px;
}

.hero-card,
.hero-side{
  border:1px solid rgba(255,255,255,.10);
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.18));
  box-shadow:var(--shadow2);
}

.hero-card{
  padding:18px;
}

.hero-side{
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.hero-kicker{
  font-size:12px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:rgba(182,255,198,.82);
  font-weight:800;
}

.hero-title{
  margin:6px 0 10px;
  font-size:28px;
  line-height:1.1;
  font-weight:900;
}

.hero-copy{
  color:var(--muted);
  line-height:1.7;
  max-width:780px;
}

.hero-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:16px;
}

.hero-steps{
  display:grid;
  gap:10px;
}

.hero-step{
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.14);
}

.hero-step strong{
  display:block;
  margin-bottom:4px;
}

.hero-step span{
  color:var(--muted2);
  font-size:13px;
  line-height:1.5;
}

.step-strip{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:0 0 14px;
}

.step-strip .step-chip{
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.16);
}

.step-chip b{
  display:block;
  margin-bottom:4px;
}

.step-chip span{
  color:var(--muted2);
  font-size:12px;
  line-height:1.45;
}

.sticky-actionbar{
  position:sticky;
  top:76px;
  z-index:5;
  margin:0 0 14px;
  padding:12px 14px;
  border-radius:18px;
  border:1px solid rgba(111,211,255,.16);
  background:linear-gradient(180deg, rgba(14,25,22,.96), rgba(9,15,12,.98));
  box-shadow:var(--shadow2);
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
}

.sticky-actionbar .summary{
  min-width:0;
}

.sticky-actionbar .summary b{
  display:block;
  margin-bottom:4px;
}

.sticky-actionbar .summary span{
  color:var(--muted2);
  font-size:13px;
}

.sticky-actionbar .actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

@media (max-width: 820px){
  .welcome-video-box{
    width: 190px;
    max-width: 190px;
    min-width: 190px;
  }
}

@media (max-width: 980px){
  .page-intro,
  .step-strip{
    grid-template-columns:1fr;
  }

  .sticky-actionbar{
    top:68px;
    flex-direction:column;
    align-items:stretch;
  }
}

/* ============================= */
/* GLOBAL TUTORIAL MODE */
/* ============================= */

.tutorial-off .tutorial-block{
  display:none !important;
}

/* ============================= */
/* MOBILE SHELL */
/* ============================= */

.overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.48);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 110;
}

.mobile-menu-btn{
  position: fixed;
  top: 12px;
  left: 12px;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.32);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--text);
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  z-index: 130;
  box-shadow: var(--shadow2);
}

.mobile-menu-btn:hover{
  background: rgba(255,255,255,.08);
}

.mobile-menu-btn .close-icon{ display:none; }
body.menu-open .mobile-menu-btn .open-icon{ display:none; }
body.menu-open .mobile-menu-btn .close-icon{ display:inline; }

@media (max-width: 980px){
  .shell{
    display:block;
  }

  .sidebar{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(86vw, 320px);
    max-width: 320px;
    height: 100vh;
    transform: translateX(-104%);
    transition: transform .22s ease;
    z-index: 120;
    border-right: 1px solid rgba(255,255,255,.10);
    box-shadow: var(--shadow);
    overflow-y: auto;
  }

  body.menu-open{
    overflow: hidden;
  }

  body.menu-open .sidebar{
    transform: translateX(0);
  }

  body.menu-open .overlay{
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-menu-btn{
    display:flex;
  }

  .main{
    width:100%;
    min-width: 0;
  }

  .topbar{
    padding: 10px 12px 10px 66px;
    min-height: 64px;
    height: auto;
    gap: 10px;
    flex-wrap: wrap;
  }

  .content{
    padding: 12px;
  }

  .wrap{
    gap: 12px;
  }

  .card .hd{
    padding: 14px 14px;
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .card .bd{
    padding: 14px;
  }

  .btn{
    padding: 10px 14px;
  }

  .toast{
    left: 12px;
    right: 12px;
    bottom: 12px;
    min-width: 0;
    max-width: none;
    width: auto;
  }

  .welcome-video-box{
    width: min(100%, 260px);
    max-width: min(100%, 260px);
    min-width: 0;
  }

  .welcome-text{
    font-size: 14px;
    line-height: 1.7;
  }
}

@media (max-width: 640px){
  :root{
    --r: 14px;
    --r2: 18px;
  }

  .topbar{
    padding: 10px 12px 10px 62px;
  }

  .content{
    padding: 10px;
  }

  .card .hd h2{
    font-size: 15px;
  }

  .card .bd{
    font-size: 14px;
  }

  .nav a{
    padding: 11px 10px;
  }

  .welcome-video-wrap{
    margin: 2px 0 16px;
  }

  .welcome-text{
    margin: 0 auto 18px;
  }
}