:root{
  --bg:#00030a;
  --electric:#00BFFF;
  --cyan:#47d7ff;
  --magenta:#ff4dd2;
  --purple:#9b59ff;
  --amber:#ffbf47;
  --lime:#bfff47;
  --glass-bg: rgba(255,255,255,0.03);
  --glass-border: rgba(255,255,255,0.06);
  --led-orange: #ff6a00;
  --led-blue: #47d7ff;
  --accent: #00BFFF;
  --text: #dfefff;
  --muted: rgba(223,239,255,0.42);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%; scroll-behavior: smooth;}
body{
  background:var(--bg);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:var(--text);
  overflow-y:auto;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  position:relative;
}

/* canvas covers entire viewport */
canvas#bg{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  z-index:0;
  background:transparent;
}

/* Centered entry panel */
.center-panel{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:3; }
.entry-inner{ display:flex; flex-direction:column; gap:18px; align-items:center; justify-content:center; padding:22px; width:min(94vw,420px); border-radius:16px; text-align:center; }
.entry-logo{ max-width:160px; filter: drop-shadow(0 18px 40px rgba(0,190,255,0.08)); border-radius:12px; }

/* assistant */
.assistant{ width:100%; max-width:420px; background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.01)); border-radius:10px; padding:10px; display:flex; gap:12px; align-items:center; justify-content:flex-start; border:1px solid rgba(71,215,255,0.06); }
.typing-led{ width:12px; height:12px; border-radius:50%; background:var(--electric); box-shadow:0 0 10px rgba(0,191,255,0.28); animation:ledPulse 2.6s infinite; }
@keyframes ledPulse{ 0%{transform:scale(0.8);opacity:0.6}50%{transform:scale(1.2);opacity:1}100%{transform:scale(0.9);opacity:0.7} }
.assistant-text{
  font-size:13px;
  color:var(--led-orange);
  text-align:left;
  min-height:40px;
  font-weight:600;
  text-shadow: 0 6px 18px rgba(255,106,0,0.08);
}

/* Host -> Login transition animations */
.host-fadeout {
  transition: opacity 1s ease, transform 1s ease;
  opacity: 0;
  transform: translateY(-6px) scale(0.995);
  pointer-events: none;
}
@keyframes fadeInSlow {
  from {
    opacity: 0;
    transform: translateY(10px);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
.animate-fadeInSlow {
  animation: fadeInSlow 1.2s ease forwards;
}

/* Login modules: small LED-titled feature cards shown in the entry screen */
.login-modules{ width:100%; max-width:420px; margin-top:10px; }
.login-modules-inner{ display:grid; grid-template-columns: repeat(2, 1fr); gap:8px; }
.login-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.06));
  border: 1px solid rgba(0,191,255,0.04);
  padding:8px;
  border-radius:10px;
  min-height:64px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.6);
}
.card-led{
  font-weight:900;
  font-size:12px;
  color:var(--led-orange);
  text-shadow:0 6px 18px rgba(255,106,0,0.06);
}
.card-body{
  font-size:12px;
  color:var(--muted);
  font-weight:700;
}

/* mobile collapse: make it a single column on narrow screens */
@media (max-width:540px){
  .login-modules-inner{ grid-template-columns: 1fr; }
  .login-card{ min-height:56px; padding:10px; }
}

/* Glass and dashboard base */
.glass{
  border-radius:16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid var(--glass-border);
  box-shadow: 0 12px 50px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
  backdrop-filter: blur(10px) saturate(120%);
  padding:14px;
}

/* Entry title glow */
.title-glow{
  font-size:18px;
  color:var(--electric);
  text-shadow: 0 0 18px rgba(0,191,255,0.28), 0 6px 28px rgba(0,120,255,0.06);
  margin-top:6px;
}

/* Buttons */
.btn{ -webkit-tap-highlight-color:transparent; padding:12px 20px; border-radius:12px; border:1px solid rgba(255,255,255,0.04); cursor:pointer; font-weight:800; letter-spacing:0.6px; box-shadow: 0 10px 40px rgba(0,0,0,0.7), 0 2px 12px rgba(0,191,255,0.04) inset; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, box-shadow 280ms ease; }
.btn:active{ transform:translateY(1px) scale(0.998); }

/* Chat input subtle breathing and focus glow */
#domAssistantChat_v1 input, .ai-chat-input{
  transition: opacity 320ms ease, box-shadow 220ms ease, transform 160ms ease;
}
#domAssistantChat_v1 input:focus, .ai-chat-input:focus{
  outline: none;
  box-shadow: 0 8px 28px rgba(0,191,255,0.14);
  transform: translateY(-1px);
}

/* small variant for compact action buttons */
.btn[style], .btn.small{
  padding:6px 10px; font-size:12px; border-radius:10px;
}

/* Premium button style: glass frame with subtle orange LED lettering and glow */
.btn-premium{
  --led: var(--led-orange);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 16px;
  border-radius:12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
  border: 1px solid rgba(255,106,0,0.08);
  color: var(--led-orange);
  font-weight:900;
  letter-spacing:0.6px;
  text-shadow: 0 6px 18px rgba(255,106,0,0.06);
  box-shadow:
    0 12px 40px rgba(0,0,0,0.6),
    0 6px 20px rgba(255,110,20,0.04) inset,
    0 0 18px rgba(255,106,0,0.06);
  backdrop-filter: blur(8px) saturate(120%);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease, background .18s ease;
  min-width:120px;
}

/* hover / active states to feel premium */
.btn-premium:hover{
  transform: translateY(-3px);
  box-shadow:
    0 20px 60px rgba(0,0,0,0.6),
    0 10px 30px rgba(255,110,20,0.10) inset,
    0 0 28px rgba(255,126,10,0.12);
}
.btn-premium:active{ transform: translateY(1px) scale(0.998); }

/* small variant for premium (used in tabs or compact contexts) */
.btn-premium.small{
  padding:6px 10px;
  font-size:12px;
  border-radius:10px;
  min-width:unset;
}

/* subtle cursor glow */
input, .input{
  caret-color: #00e5ff;
  transition: box-shadow 240ms ease, transform 160ms ease;
}
input:focus, .input:focus {
  box-shadow: 0 10px 30px rgba(0,191,255,0.06);
}

.btn.primary{
  background: linear-gradient(180deg, rgba(255,120,20,0.98), rgba(255,190,80,0.98));
  color: #111;
  padding:12px 22px;
  border-radius:14px;
  border: 1px solid rgba(255,180,90,0.12);
  box-shadow: 0 18px 60px rgba(255,110,20,0.12), 0 6px 20px rgba(0,0,0,0.6) inset;
  text-shadow: 0 2px 8px rgba(255,200,120,0.08);
  font-weight:900;
}
.btn.primary:hover{ transform: translateY(-2px); filter: saturate(1.06) brightness(1.02); box-shadow: 0 22px 80px rgba(255,110,20,0.14), 0 8px 28px rgba(0,0,0,0.6) inset; }

.btn.accent{
  background: linear-gradient(90deg, #ff9a3c, #ffd07a);
  color: #111;
  border: 1px solid rgba(255,200,120,0.08);
  box-shadow: 0 12px 48px rgba(255,150,40,0.08);
  font-weight:800;
}
.btn.accent{ background: linear-gradient(90deg,var(--cyan),var(--magenta)); color:#001; }
.btn:active{ transform:translateY(1px); }

/* App root hidden by default */
.hidden{ display:none !important; }

/* Dashboard layout */
.app-root{ position:fixed; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; padding:18px; }
.dashboard{ width:96vw; max-width:1200px; height:86vh; min-height:520px; display:flex; flex-direction:column; gap:12px; }

/* Topbar */
.topbar{ display:flex; align-items:center; justify-content:space-between; padding:8px 12px; }

/* Move brand text slightly to the right for better visual balance */
.brand > div{ margin-left:8px; }

.brand .small{ margin:0; font-size:14px; color:var(--electric); text-shadow:0 0 14px rgba(0,191,255,0.18); }
.brand .tiny{ margin:0; font-size:11px; color:var(--muted); }

/* Body: left panel and projects grid */
.dash-body{ display:flex; gap:12px; flex:1; align-items:stretch; padding:8px; }
.left-panel{ width:320px; display:flex; flex-direction:column; gap:10px; align-items:stretch; padding:8px; }
.modules-column{ overflow:auto; padding-right:6px; }

.module{ padding:10px; border-radius:10px; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.16)); border:1px solid rgba(0,191,255,0.04); box-shadow: 0 8px 30px rgba(0,0,0,0.6); display:flex; flex-direction:column; gap:8px; min-height:72px; }
.module-title{ font-weight:800; font-size:12px; color:var(--led-orange); text-shadow:0 0 10px rgba(255,106,0,0.16); display:flex; align-items:center; gap:8px; }

.module-canvas{ width:100%; height:80px; border-radius:8px; background:linear-gradient(90deg, rgba(0,0,0,0.18), rgba(255,255,255,0.01)); display:block; }

/* long code */
.module-code{ background:rgba(0,0,0,0.4); color:var(--electric); padding:10px; border-radius:8px; font-family:ui-monospace, monospace; font-size:12px; height:80px; overflow:hidden; margin:0; }

/* agent report area - crowned, luxe visuals, and thinking dots */
.module-report{
  background: linear-gradient(90deg, rgba(2,6,12,0.48), rgba(255,255,255,0.01));
  border-radius:10px;
  padding:12px;
  min-height:96px;
  color:var(--muted);
  font-weight:700;
  font-family:Inter, ui-sans-serif, system-ui;
  font-size:13px;
  display:flex;
  flex-direction:column;
  gap:8px;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(0,191,255,0.06);
  box-shadow: 0 18px 60px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
}

/* decorative crown bar above the module */
.module[id="mod-agentreport"]{ position:relative; }
.module[id="mod-agentreport"]::before{
  content: " ";
  position:absolute;
  top:-12px;
  left:50%;
  transform:translateX(-50%);
  width:120px;
  height:10px;
  background:linear-gradient(90deg, rgba(255,106,0,0.95), rgba(255,191,71,0.9));
  border-radius:6px;
  box-shadow: 0 10px 30px rgba(255,140,30,0.06), 0 2px 8px rgba(0,0,0,0.5);
  z-index:4;
  filter: blur(0.6px);
}

/* thinking dots */
.thinking{
  position:absolute;
  bottom:8px;
  right:10px;
  display:flex;
  gap:4px;
  align-items:center;
  pointer-events:none;
  opacity:0;
  transition:opacity 180ms ease;
  z-index:5;
}
.thinking .dot{
  color:var(--electric);
  font-weight:900;
  font-size:18px;
  line-height:1;
  opacity:0.12;
  text-shadow: 0 6px 20px rgba(0,191,255,0.06);
  animation: blinkDot 1200ms infinite ease-in-out;
}
.thinking .dot:nth-child(2){ animation-delay:160ms; }
.thinking .dot:nth-child(3){ animation-delay:320ms; }
@keyframes blinkDot{
  0%{ opacity:0.08; transform:translateY(0) }
  30%{ opacity:0.9; transform:translateY(-4px) }
  60%{ opacity:0.3; transform:translateY(0) }
  100%{ opacity:0.08; transform:translateY(0) }
}

/* spacer to fill remaining space */
.module-spacer{ flex:1; background:transparent; border:0; box-shadow:none; }

/* smaller tweaks for module internal elements */
.module .led-dot{ width:8px;height:8px;border-radius:50%; box-shadow:0 0 8px currentColor; display:inline-block; margin-right:8px; }

/* ensure the dashboard still scrolls nicely */
.dashboard{ overflow-y:auto; -webkit-overflow-scrolling: touch; }

/* Projects grid */
.projects-grid{ flex:1; display:grid; grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); gap:14px; align-content:start; padding:6px; }

/* Project card */
.card{
  position:relative;
  padding:12px;
  border-radius:12px;
  min-height:120px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.16));
  border:1px solid rgba(0,191,255,0.06);
  box-shadow: 0 8px 36px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
  transition: transform .22s ease, box-shadow .22s ease;
  overflow:hidden;
}
.card .logo-thumb{ width:48px;height:48px;border-radius:8px;object-fit:cover;border:1px solid rgba(255,255,255,0.03);box-shadow:0 6px 18px rgba(0,0,0,0.5); }
.card .title{ font-weight:800; color:var(--electric); text-shadow:0 0 12px rgba(0,191,255,0.2); display:flex; gap:8px; align-items:center; }
.card .meta{ font-size:12px; color:var(--muted); display:flex; justify-content:space-between; align-items:center; gap:8px; }
.card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:12px;
  padding:1px;
  background: linear-gradient(90deg, rgba(0,191,255,0.16), rgba(155,89,255,0.12), rgba(255,77,210,0.08));
  pointer-events:none;
  mix-blend-mode:screen;
  opacity:0.9;
  transition:opacity .28s ease, transform .5s ease;
}
.card:hover::before{ transform:translateY(-6px); opacity:1; }
.card:hover{ transform: translateY(-6px); box-shadow: 0 28px 80px rgba(0,0,0,0.7); }

/* modal */
.modal-back{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:6; background:linear-gradient(0deg, rgba(0,0,0,0.45), rgba(0,0,0,0.45)); }
.modal{ width:min(92vw,720px); padding:18px; border-radius:12px; color:var(--text); max-height:90vh; overflow:auto; -webkit-overflow-scrolling:touch; box-sizing:border-box; }

/* form */
.form-row{ display:flex; flex-direction:column; gap:8px; margin:8px 0; }
.input{ padding:10px 12px; border-radius:8px; border:1px solid rgba(255,255,255,0.03); background:rgba(255,255,255,0.01); color:var(--text); outline:none; }
.checkbox-row{ display:flex; align-items:center; gap:8px; color:var(--muted); }
.code-box{ font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace; background:rgba(0,0,0,0.38); padding:12px; border-radius:8px; color:var(--electric); box-shadow: 0 8px 40px rgba(0,191,255,0.06); word-break:break-all; font-size:12px; }

/* result lines */
.result-line{ display:flex; gap:8px; align-items:center; justify-content:space-between; padding:10px; border-radius:8px; background:linear-gradient(90deg, rgba(255,255,255,0.01), rgba(0,0,0,0.12)); border:1px solid rgba(255,255,255,0.02);}
.result-line .label{ font-weight:700; font-size:12px; color:var(--muted); }
.result-line .value{ font-family:ui-monospace, monospace; color:var(--electric); font-size:13px; word-break:break-all; }

/* footer */
.footer{ text-align:center; color:var(--muted); font-size:12px; }

/* Smooth scroll + Custom neon scrollbar (Chrome, Edge, Safari + Firefox fallback) */
/* Smooth scrolling already enabled on html above */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(0, 191, 255, 0.3);
  border-radius: 10px;
  backdrop-filter: blur(4px);
  transition: all 0.28s ease;
  box-shadow: 0 0 12px rgba(0,191,255,0.06) inset;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 191, 255, 0.72);
  box-shadow: 0 0 14px rgba(0, 191, 255, 0.9);
}

/* Firefox fallback */
*{
  scrollbar-width: thin;
  scrollbar-color: rgba(0,191,255,0.4) transparent;
}

/* Keep utilities */
 /* small utilities */
.muted{ color:var(--muted); font-size:12px; }
.tiny{ font-size:11px; color:var(--muted); }

/* Dashboard scroll container to ensure overflow content is accessible */
.dashboard{ width:96vw; max-width:1200px; height:86vh; min-height:520px; display:flex; flex-direction:column; gap:12px; overflow-y:auto; -webkit-overflow-scrolling: touch; }

/* Responsive */
@media (max-width:900px){
  /* Stack layout on narrow viewports: left modules become a vertical list
     to avoid horizontal pushing and ensure each module sits one below another. */
  .dash-body{ flex-direction:column; gap:10px; }
  .left-panel{
    width:100%;
    display:grid;
    grid-template-columns: 1fr; /* single column list on mobile */
    gap:10px;
    padding:6px;
    align-items:start;
  }
  .modules-column{ overflow:visible; padding-right:0; }
  /* Ensure canvases and module contents adapt to full width */
  .module, .module-canvas, .module-report, .module-code { width:100%; height:auto; min-height:72px; }
  .module-canvas{ height:96px; }
  .module-report{ min-height:96px; }
  .projects-grid{ grid-template-columns: 1fr; }

  /* MOBILE: stack topbar controls under brand/title as a vertical list */
  .topbar{ flex-direction:column; align-items:flex-start; gap:12px; padding:10px; }
  .topbar .brand{ width:100%; display:flex; align-items:center; justify-content:flex-start; gap:12px; }
  .topbar .controls{ width:100%; display:flex; flex-direction:column; gap:10px; align-items:stretch; }
  .topbar .controls .btn, .topbar .controls .btn-premium{ width:100%; min-width:0; justify-content:center; }
  /* ensure the small variant buttons remain touch-friendly */
  .topbar .controls .btn.small, .topbar .controls .btn-premium.small { padding:10px 12px; }
}

/* Mobile modal / dashboard adjustments for small devices */
@media (max-width:640px){
  .modal{
    width:100vw !important;
    height:100vh !important;
    max-width:100vw;
    max-height:100vh;
    border-radius:0 !important;
    margin:0;
    padding:14px;
    box-sizing:border-box;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }

  .modal-back{
    align-items:flex-start;
    padding-top:12px;
    background: linear-gradient(0deg, rgba(0,0,0,0.6), rgba(0,0,0,0.6));
  }

  /* Ensure inner container uses full height but remains scrollable */
  .modal > * {
    max-height: calc(100vh - 48px);
    overflow:auto;
  }

  /* Make modal content stack nicely and preserve touch targets */
  .modal .glass, .modal .form-row, .modal .result-line {
    border-radius:8px;
  }

  /* Ensure the large dashboard grid stacks vertically and fits mobile */
  .modal .projects-grid { grid-template-columns: 1fr; gap:10px; }
  .modal .dash-body { flex-direction:column; gap:10px; }
}

/* Lightweight particle layer used by PremiumLogin component — subtle, non-invasive movement */
.particles {
  background-image: radial-gradient(rgba(0,255,255,0.12) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.18;
  will-change: transform;
  animation: particlesMove 20s linear infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}

@keyframes particlesMove {
  from { transform: translateY(0); }
  to   { transform: translateY(-40px); }
}

/* Bottom fixed translucent LED banner (thin glass strip) */
.bottom-banner{
  position:fixed;
  left:12px;
  right:12px;
  bottom:12px;
  z-index: 20;
  pointer-events: none; /* non-interactive */
  display:flex;
  justify-content:center;
  align-items:center;
  height:44px;
  border-radius:10px;
  backdrop-filter: blur(8px) saturate(140%);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: 0 12px 40px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.02);
}

/* inner content row: LED text and small subtext */
.bottom-banner-inner{
  display:flex;
  align-items:center;
  gap:10px;
  pointer-events: none;
  user-select: none;
  padding: 6px 12px;
}

/* LED main label (orange) */
.bottom-banner-inner .led.orange{
  color: var(--led-orange);
  font-weight:900;
  font-size:14px;
  letter-spacing:0.8px;
  text-shadow:
    0 0 18px rgba(255,106,0,0.22),
    0 8px 28px rgba(255,106,0,0.06);
  -webkit-font-smoothing:antialiased;
}

/* sub text (site root) */
.bottom-banner-inner .sub{
  color: rgba(255,180,90,0.95);
  font-weight:800;
  font-size:12px;
  text-shadow: 0 6px 18px rgba(255,140,30,0.06);
  opacity:0.95;
}

/* Slightly adapt spacing on small screens */
@media (max-width:540px){
  .bottom-banner{ left:8px; right:8px; bottom:8px; height:40px; }
  .bottom-banner-inner .led.orange{ font-size:13px; }
  .bottom-banner-inner .sub{ font-size:11px; }
}