:root{
  /* colors */
  --bg-ink: #071029;            /* deep backdrop */
  --glass: rgba(255,255,255,0.06);
  --glass-2: rgba(255,255,255,0.04);
  --glass-border: rgba(255,255,255,0.12);
  --accent-1: #f4ed38;         /* yellow */
  --accent-2: #615321;         /* brown */
  --accent-grad: linear-gradient(135deg,var(--accent-1),var(--accent-2));
  --muted: rgba(226,232,240,0.75);
  --muted-2: rgba(226,232,240,0.45);
  --success: #10b981;
  --danger: #ef4444;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --glass-blur: 4px;
  --glass-shadow: 0 8px 30px rgba(12,18,40,0.6);
  --glow: 0 8px 40px rgba(123,92,255,0.14);
  --micro: all .28s cubic-bezier(.2,.9,.2,1);
  --accent-glow: 0 6px 28px rgba(70,193,246,0.12), 0 2px 6px rgba(123,92,255,0.06);
  --card-padding: 1.25rem;
  --max-width: 920px;
  --ui-gap: 1rem;
}

/* base */
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family: Inter, "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
  background: rgb(21, 77, 89);
  min-height: 100vh;
  color:var(--muted);
  padding:2rem;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-y: auto;
  overflow-x:hidden;
  line-height:1.5;
}

/* container */
.container{
  position: relative;
  width: 100vw;
  min-height: 100vh;
  z-index: 1;
  max-width:var(--max-width);
  margin:0 auto;
  display:block;
  gap:var(--ui-gap);
}
#particleCanvas {
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
  }
/* header */
.header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:calc(var(--card-padding) + .25rem);
  background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  border-radius:calc(var(--radius-lg) + 4px);
  border:1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur)) saturate(120%);
  box-shadow:var(--glass-shadow);
  margin: 2rem 0 1.25rem 0;
  transition:var(--micro);
  transform-origin:center;
}
.header:hover{transform:translateY(-4px)}

/* logo with subtle pulse */
.logo{
  font-size:1.9rem;
  font-weight:800;
  letter-spacing:.4px;
  background:var(--accent-grad);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 6px 18px rgba(75,45,160,0.12));
  animation:logoPulse 3.2s ease-in-out infinite alternate;
}
@keyframes logoPulse{
  from{filter:drop-shadow(0 6px 18px rgba(75,45,160,0.06))}
  to{filter:drop-shadow(0 18px 40px rgba(70,193,246,0.16))}
}

/* settings button */
.settings-btn{
  width:42px;height:42px;border-radius:10px;border:1px solid transparent;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  color:var(--muted);
  cursor:pointer;transition:var(--micro);
  backdrop-filter: blur(6px);
}
.settings-btn.active {
    background: var(--accent-grad);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: 26px 26px 52px #090637, -26px -26px 52px #0d0855;
    border-radius: 50px;
    background: #1d6a22 !important;
    box-shadow: 26px 26px 52px #090637, -26px -26px 52px #0d0855;
}
.settings-btn:hover{transform:rotate(8deg) scale(1.02);box-shadow:var(--accent-glow)}
.settings-btn.active{background:var(--accent-grad);color:#fff;border-color:rgba(255,255,255,0.06)}

/* cards / panels */
      /* Glassmorphism for cards */
        .card, .settings-panel, .content {
            background: rgba(25, 25, 45, 0.32);
            border-radius: calc(var(--radius-lg) + 4px);
            border: 1px solid var(--glass-border);
            backdrop-filter: blur(var(--glass-blur)) saturate(120%);
            box-shadow: var(--glass-shadow);
            margin: 2rem 0 1.25rem 0;
            transition: var(--micro);
            transform-origin: center;
            position: relative;
            overflow: hidden;
            padding: 1rem;
        }
        .card::before, .settings-panel::before, .content::before {
            content: '';
            position: absolute;
            top: -8px; left: -8px; right: -8px; bottom: -8px;
            background: linear-gradient(120deg, rgba(120,180,255,0.11) 0%, rgba(180,120,255,0.09) 100%);
            border-radius: 28px;
            pointer-events: none;
            filter: blur(18px);
            opacity: 0.7;
            z-index: 0;
        }
        .card, .settings-panel, .content {
            z-index: 2;
        }
        /* Optional: Slight text glow for glass panels  */
        .card, .settings-panel, .content {
            color: #eaf6ff;
            text-shadow: 0 1.5px 6px rgba(30,40,95, 0.12), 0 0.5px 0 rgba(255,255,255,0.09);
        }
.explanation-box {margin: 2rem 0;}
.explanation-box ul {margin-left: 2rem;}
.action-tabs button {padding: .5rem 1rem;
}
.mode-selector {margin: 1rem 0;}
/* collapsed settings */
.settings-panel{padding: 1rem;max-height:0;opacity:0;overflow:hidden}
.settings-panel.active{max-height:1600px;opacity:1}
#modeSelect option {color: black;}

/* typography helpers */
.section-title{font-size:1.05rem;font-weight:700;color: #e6eefc;margin-bottom:.6rem}
.small{font-size:.85rem;color:var(--muted-2)}

/* form controls (glass inputs) */
input,select,textarea{
  width:100%;padding:.75rem;border-radius:10px;border:1px solid rgba(255,255,255,0.06);
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  color:var(--muted);font-family:inherit;font-size:.95rem;
  transition:var(--micro);outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.02);
}
input:focus,select:focus,textarea:focus{
  border-color:var(--accent-1);box-shadow:0 6px 30px rgba(123,92,255,0.06);
}

/* form labels */
.form-group label{display:block;font-size:.82rem;font-weight:700;color:var(--muted-2);margin-bottom:.45rem}

/* range styles */
input[type=range]{height:6px;background:rgba(255,255,255,0.03);border-radius:6px}
input[type=range]::-webkit-slider-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent-1);box-shadow:0 4px 18px rgba(123,92,255,0.12);-webkit-appearance:none;cursor:pointer}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.9rem 1.1rem;border-radius:12px;font-weight:700;font-size:.95rem;
  cursor:pointer;border:1px solid transparent;transition:var(--micro);
  background:transparent;color:var(--muted);
}
.btn:active{transform:translateY(0)}
.btn-primary{
  background:var(--accent-grad);color:#fff;box-shadow:var(--accent-glow);border-radius:14px;
  border:1px solid rgba(255,255,255,0.06);
  position:relative;overflow:hidden;
}
.btn-primary::after{
  content:"";position:absolute;left:-60%;top:0;width:60%;height:100%;
  background:linear-gradient(90deg, rgba(255,255,255,0.18), rgba(255,255,255,0.04));
  transform:skewX(-18deg) translateX(0);transition:transform .6s ease;
  opacity:.18;
}
.btn-primary:hover::after{transform:skewX(-18deg) translateX(180%)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 18px 48px rgba(123,92,255,0.15)}
.btn-secondary{
  background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--muted-2);
  padding:.85rem 1rem;border-radius:10px;
}
.btn-secondary:hover{background:rgba(255,255,255,0.02);transform:translateY(-2px)}

/* feature grid */
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.75rem;margin-top:1rem}
.feature-card{
  padding:.9rem;border-radius:12px;text-align:center;cursor:pointer;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid transparent;transition:var(--micro);min-height:88px;display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.feature-card:hover{transform:translateY(-6px);border-color:rgba(123,92,255,0.14);box-shadow:0 12px 36px rgba(75,45,160,0.08)}
.feature-icon{font-size:1.6rem;margin-bottom:.5rem;filter:drop-shadow(0 6px 18px rgba(75,45,160,0.06))}

/* result box / outputs */
.ai-output {
    white-space: normal;
    word-wrap: break-word;
    overflow-x: hidden;
    max-width: 100%;
    line-height: 1.6;
    font-family: inherit;
    padding: 0.5em 0;
    color: white;
}

.ai-output pre {
    background: #f4f4f4;
    padding: 0.5em;
    border-radius: 5px;
    overflow-x: auto; /* only code blocks scroll */
}

.ai-output a {
    color: #1a73e8;
    text-decoration: underline;
    word-break: break-word; /* prevent long URLs from breaking layout */
}
.ai-output h1 {font-size: 1rem;}
.ai-output hr {margin: 1rem 0;}
.result-box{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-left:4px solid var(--success);padding:1rem;border-radius:10px;color:var(--muted-2);
  max-height:420px;overflow-y:auto;margin-top:1rem;border:1px solid rgba(255,255,255,0.03)
}
.result-box.error{border-left-color:var(--danger)}

/* toast */
.toast{position:fixed;bottom:2rem;right:2rem;background:linear-gradient(135deg,rgba(0,0,0,0.35),rgba(0,0,0,0.25));color:#fff;padding:.9rem 1.25rem;border-radius:12px;box-shadow:0 12px 40px rgba(2,6,23,0.7);opacity:0;transform:translateY(18px);transition:var(--micro);z-index:1000}
.toast.show{opacity:1;transform:translateY(0)}

/* chat */
.chat-container{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));padding:1rem;border-radius:12px;min-height:200px;max-height:400px;overflow:auto;border:1px solid rgba(255,255,255,0.02)}
.chat-message{margin-bottom:.9rem;display:flex;flex-direction:column;gap:.35rem}
.chat-message.user{align-items:flex-end}
.chat-message .chat-message-content{
  padding:.7rem 1rem;border-radius:14px;max-width:80%;word-break:break-word;
  background:linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.02);color:var(--muted-2)
}
.chat-message.user .chat-message-content{
  background:var(--accent-grad);color:#fff;border:1px solid rgba(255,255,255,0.04);border-bottom-right-radius:6px
}
.chat-message.assistant .chat-message-content{border-bottom-left-radius:6px}
.chat-input-group #chat-input {
  width: 80%;
}
.chat-input-group #chat-send-btn {
    width: 10%;
    background: none;
    padding: .5rem;
    border: 1px solid #ffffff85;
    color: white;
    border-radius: .5rem;
}
/* small UI helpers */
.status-badge{display:inline-block;padding:.25rem .65rem;border-radius:999px;font-weight:700;font-size:.8rem}
.language-badge{display:inline-block;padding:.2rem .6rem;border-radius:999px;background:rgba(123,92,255,0.07);color:var(--accent-2);font-weight:700;font-size:.78rem}

/* spinner */
.spinner{width:20px;height:20px;border:3px solid rgba(255,255,255,0.06);border-top-color:var(--accent-2);border-radius:50%;animation:spin .8s linear infinite}

/* animations */
@keyframes spin{to{transform:rotate(360deg)}}

/* responsive */
@media (max-width:760px){
  body{padding:1rem}
  .header{padding:1rem}
  .logo{font-size:1.4rem}
  .card{padding:1rem}
  .feature-card{min-height:74px}
}