:root{
  --eto-bg1:#050816;
  --eto-bg2:#0b1229;
  --eto-card:rgba(255,255,255,.06);
  --eto-card2:rgba(255,255,255,.10);
  --eto-border:rgba(255,255,255,.14);
  --eto-text:rgba(255,255,255,.92);
  --eto-muted:rgba(255,255,255,.65);
  --eto-accent:#6ee7ff;
  --eto-accent2:#a78bfa;
  --eto-success:#34d399;
  --eto-warn:#fbbf24;
  --eto-danger:#fb7185;
  --eto-shadow: 0 20px 60px rgba(0,0,0,.55);
}

html,body{height:100%;}
body{
  color:var(--eto-text);
  background:
    radial-gradient(1200px 800px at 18% 12%, rgba(110,231,255,.20), transparent 55%),
    radial-gradient(1000px 700px at 82% 25%, rgba(167,139,250,.18), transparent 55%),
    radial-gradient(900px 700px at 45% 85%, rgba(52,211,153,.10), transparent 55%),
    linear-gradient(180deg, var(--eto-bg1), var(--eto-bg2));
  background-attachment: fixed;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

/* Top nav injected */
.eto-topbar{
  position: sticky; top:0; z-index: 999;
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(5,8,22,.85), rgba(5,8,22,.55));
  border-bottom: 1px solid var(--eto-border);
}
.eto-topbar .eto-topbar-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
.eto-brand{
  display:flex; align-items:center; gap:10px;
  font-weight: 700;
  letter-spacing: .3px;
}
.eto-brand i{
  color: var(--eto-accent);
  filter: drop-shadow(0 6px 16px rgba(110,231,255,.35));
}
.eto-brand span{font-size: 15px;}
.eto-topbar .eto-actions{display:flex; gap:10px; align-items:center; flex-wrap: wrap;}
.eto-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--eto-border);
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  color: var(--eto-text);
  text-decoration:none !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.eto-btn:hover{ transform: translateY(-1px); border-color: rgba(110,231,255,.45); box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.eto-btn:active{ transform: translateY(0px) scale(.99); }

.container, .container-fluid{
  padding-top: 26px;
  padding-bottom: 26px;
}

/* Cards */
.card, .panel, .box, .tool-box, .main, .wrap, .wrapper{
  background: var(--eto-card) !important;
  border: 1px solid var(--eto-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--eto-shadow) !important;
}
.card .card-header, .panel-heading{
  background: rgba(255,255,255,.06) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}
.card .card-body{ color: var(--eto-text); }
.card-title, h1,h2,h3,h4,h5,h6{ color: var(--eto-text); }

/* Inputs */
input, textarea, select, .form-control{
  color: var(--eto-text) !important;
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 12px !important;
  outline: none !important;
  box-shadow: none !important;
}
input:focus, textarea:focus, select:focus, .form-control:focus{
  border-color: rgba(110,231,255,.55) !important;
  box-shadow: 0 0 0 3px rgba(110,231,255,.10) !important;
}
label, .form-label{ color: var(--eto-muted) !important; }

/* Buttons */
button, .btn, input[type="button"], input[type="submit"], input[type="reset"]{
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  background: linear-gradient(135deg, rgba(110,231,255,.22), rgba(167,139,250,.14)) !important;
  color: var(--eto-text) !important;
  box-shadow: 0 12px 35px rgba(0,0,0,.30) !important;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease, border-color .15s ease;
}
button:hover, .btn:hover, input[type="button"]:hover, input[type="submit"]:hover{
  transform: translateY(-1px);
  border-color: rgba(110,231,255,.55) !important;
  filter: brightness(1.05);
}
button:active, .btn:active, input[type="button"]:active, input[type="submit"]:active{
  transform: translateY(0px) scale(.99);
}
.btn-danger{ background: linear-gradient(135deg, rgba(251,113,133,.35), rgba(167,139,250,.12)) !important; }
.btn-success{ background: linear-gradient(135deg, rgba(52,211,153,.35), rgba(110,231,255,.12)) !important; }
.btn-warning{ background: linear-gradient(135deg, rgba(251,191,36,.35), rgba(110,231,255,.10)) !important; }

/* Links */
a{ color: rgba(110,231,255,.95); }
a:hover{ color: rgba(167,139,250,.95); }

/* Small helpers */
.eto-footnote{ color: var(--eto-muted); font-size: 12px; }
.eto-divider{ height:1px; background: rgba(255,255,255,.10); margin: 14px 0; }

/* Make legacy white backgrounds transparent */
.bg-white, .background-white{ background: transparent !important; }

/* Avoid breaking canvas/video tools */
video, canvas{ border-radius: 14px; border: 1px solid rgba(255,255,255,.12); }