/* Aliyan AI - green-blue glass. No inline styles anywhere (CSP: style-src 'self'). */
:root {
  --bg1: #052e2b; --bg2: #0b3b63; --glass: rgba(255,255,255,.09); --glass-2: rgba(255,255,255,.14);
  --line: rgba(255,255,255,.2); --text: #eafaf7; --muted: #a8cfd0; --accent: #2dd4bf; --accent-2: #38bdf8;
  --accent-text: #032420; --ok: #4ade80; --warn: #fbbf24; --bad: #fb7185; --radius: 18px;
  --shadow: 0 10px 40px rgba(0,0,0,.35);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg1: #d9fbf3; --bg2: #cfe9ff; --glass: rgba(255,255,255,.6); --glass-2: rgba(255,255,255,.85);
    --line: rgba(5,60,70,.18); --text: #072a2e; --muted: #3f6670; --accent-text: #fff;
    --accent: #0d9488; --accent-2: #0369a1; --shadow: 0 10px 40px rgba(5,60,70,.15);
  }
}
:root[data-theme="light"] {
  --bg1: #d9fbf3; --bg2: #cfe9ff; --glass: rgba(255,255,255,.6); --glass-2: rgba(255,255,255,.85);
  --line: rgba(5,60,70,.18); --text: #072a2e; --muted: #3f6670; --accent-text: #fff;
  --accent: #0d9488; --accent-2: #0369a1; --shadow: 0 10px 40px rgba(5,60,70,.15);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font: 15px/1.5 "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; color: var(--text);
  background: linear-gradient(135deg, var(--bg1), var(--bg2)) fixed; min-height: 100vh;
}
body::before, body::after { content: ""; position: fixed; width: 46vmax; height: 46vmax; border-radius: 50%;
  filter: blur(80px); opacity: .35; z-index: -1; pointer-events: none; }
body::before { background: var(--accent); top: -18vmax; left: -12vmax; }
body::after { background: var(--accent-2); bottom: -20vmax; right: -14vmax; }
a { color: var(--accent-2); }
h1, h2, h3 { margin: 0 0 .5em; line-height: 1.2; }
.muted { color: var(--muted); }
.hidden { display: none !important; }

.glass { background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); box-shadow: var(--shadow); }
.center { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.card { width: min(440px, 100%); padding: 28px; }
.card.wide { width: min(760px, 100%); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.3rem; margin-bottom: 18px; }
.logo { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: var(--accent-text);
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); font-weight: 800; }

label { display: block; font-size: .85rem; color: var(--muted); margin: 12px 0 4px; }
input, select, textarea { width: 100%; padding: 11px 13px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--glass); color: var(--text); font: inherit; outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(45,212,191,.25); }
input[type=checkbox] { width: auto; }
input[type=file] { padding: 8px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row > * { flex: 1 1 auto; }
.row > .shrink { flex: 0 0 auto; }
.btn { appearance: none; border: 0; cursor: pointer; padding: 11px 18px; border-radius: 12px; font: inherit; font-weight: 600;
  color: var(--accent-text); background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.btn:hover { filter: brightness(1.08); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.ghost { background: var(--glass-2); color: var(--text); border: 1px solid var(--line); }
.btn.danger { background: linear-gradient(135deg, #fb7185, #e11d48); color: #fff; }
.btn.small { padding: 6px 12px; font-size: .85rem; border-radius: 10px; }
.btn.full { width: 100%; margin-top: 18px; }
.msg { margin-top: 12px; padding: 10px 12px; border-radius: 12px; font-size: .9rem; }
.msg.err { background: rgba(251,113,133,.18); border: 1px solid var(--bad); }
.msg.ok { background: rgba(74,222,128,.15); border: 1px solid var(--ok); }
.chip { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: .78rem; border: 1px solid var(--line); background: var(--glass); }
.chip.ok { color: var(--ok); border-color: var(--ok); } .chip.warn { color: var(--warn); border-color: var(--warn); }
.chip.bad { color: var(--bad); border-color: var(--bad); }

/* app shell */
.shell { max-width: 1100px; margin: 0 auto; padding: 16px; }
.nav { display: flex; gap: 6px; align-items: center; padding: 8px 12px; margin-bottom: 16px; flex-wrap: wrap; }
.nav .brand { margin: 0 10px 0 0; font-size: 1.05rem; }
.nav a.tab { padding: 7px 14px; border-radius: 10px; color: var(--text); text-decoration: none; }
.nav a.tab:hover { background: var(--glass-2); }
.nav a.tab.active { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-text); }
.nav .spacer { flex: 1; }
.badge { background: var(--bad); color: #fff; border-radius: 99px; padding: 0 7px; font-size: .75rem; margin-left: 4px; }
.panel { padding: 20px; margin-bottom: 16px; }
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.stat { padding: 16px; } .stat b { display: block; font-size: 1.8rem; }
table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; }
.table-wrap { overflow-x: auto; }

/* plans */
.plan { padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.plan.current { outline: 2px solid var(--accent); }
.plan .price { font-size: 1.9rem; font-weight: 800; }
.plan ul { padding-left: 1.1em; margin: 6px 0; }
.plan li.locked { color: var(--muted); text-decoration: line-through; }

/* chat */
.chat { display: flex; flex-direction: column; height: calc(100vh - 130px); min-height: 360px; }
.log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.bubble { max-width: 82%; padding: 10px 14px; border-radius: 16px; white-space: pre-wrap; word-wrap: break-word; }
.bubble.me { align-self: flex-end; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-text); }
.bubble.ai { align-self: flex-start; background: var(--glass-2); border: 1px solid var(--line); }
.bubble.note { align-self: center; font-size: .82rem; color: var(--muted); }
.composer { display: flex; gap: 10px; padding: 12px; border-top: 1px solid var(--line); }
.composer input { flex: 1; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--bad); display: inline-block; margin-right: 6px; }
.dot.on { background: var(--ok); }

/* wizard + modal */
.steps { display: flex; gap: 6px; margin-bottom: 18px; }
.steps span { flex: 1; height: 5px; border-radius: 5px; background: var(--glass-2); }
.steps span.done { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.keyrow { padding: 12px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 14px; }
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: grid; place-items: center; padding: 16px; z-index: 50; }
.modal { width: min(520px, 100%); padding: 24px; max-height: 88vh; overflow-y: auto; }
.modal.block { border: 2px solid var(--warn); }
.news-img { max-width: 100%; border-radius: 12px; margin: 8px 0; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
pre.changelog { white-space: pre-wrap; font: inherit; margin: 6px 0 0; }
@media (max-width: 600px) { .card { padding: 20px; } .bubble { max-width: 94%; } }