/* MagicCode™ Chat: shared look for the landing, status, login, dashboard and admin pages. MagicCode brand: deep navy and orange. */
:root { --bg:#f4f6ff; --panel:#ffffff; --panel2:#eef1ff; --line:#e2e6f6; --text:#0f172a; --dim:#5b6785; --accent:#4f6bff; --accent2:#8b5cf6; --amber:#f59e0b; --on-accent:#ffffff; --grad:linear-gradient(135deg,#6d5dfc,#3b82f6); --good:#10b981; --bad:#ef4444; --radius:18px; --shadow:0 18px 50px rgba(79,107,255,.14); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.6 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color:var(--accent); text-underline-offset:3px; }
.wrap { max-width:1040px; margin:0 auto; padding:0 20px; }
header.top { display:flex; align-items:center; gap:16px; padding:18px 0; }
header.top .brand { font:700 20px Poppins, Inter, system-ui, sans-serif; color:var(--text); text-decoration:none; letter-spacing:-.01em; }
header.top .brand i { font-style:normal; color:var(--accent); }
header.top nav { margin-left:auto; display:flex; gap:18px; align-items:center; font-size:15px; }
header.top nav a { color:var(--dim); text-decoration:none; } header.top nav a:hover { color:var(--text); }
h1 { font:700 clamp(32px, 5.5vw, 54px)/1.08 Poppins, Inter, system-ui, sans-serif; letter-spacing:-.02em; margin:0 0 16px; }
h1 em { font-style:normal; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
h2 { font:600 26px/1.2 Poppins, Inter, system-ui, sans-serif; margin:0 0 12px; letter-spacing:-.01em; }
h3 { font-size:17px; margin:0 0 6px; }
p.lead { font-size:19px; color:var(--dim); max-width:640px; margin:0 0 26px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); }
.grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); }
.btn { box-shadow:0 8px 22px rgba(79,107,255,.28); display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius:12px; padding:0 22px; min-height:48px; font:600 16px Inter, system-ui, sans-serif; background:var(--grad); color:#fff; cursor:pointer; text-decoration:none; }
.btn:hover { filter:brightness(1.06); } .btn:disabled { opacity:.55; cursor:default; }
.btn.ghost { background:#fff; color:var(--text); border:1px solid var(--line); box-shadow:none; } .btn.small { min-height:36px; padding:0 14px; font-size:14px; border-radius:10px; }
.btn.danger { box-shadow:none; background:transparent; color:var(--bad); border:1px solid var(--bad); }
input, textarea, select { width:100%; background:var(--bg); color:var(--text); border:1px solid var(--line); border-radius:12px; padding:12px 14px; font:inherit; }
textarea { min-height:90px; resize:vertical; }
input:focus-visible, textarea:focus-visible, select:focus-visible, .btn:focus-visible, a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
label { display:block; font-size:14px; color:var(--dim); margin:14px 0 6px; }
.row { display:flex; gap:10px; flex-wrap:wrap; } .row > * { flex:1 1 200px; }
.msg-ok { color:var(--good); } .msg-bad { color:var(--bad); } .dim { color:var(--dim); } .small { font-size:14px; }
.pill { display:inline-block; font-size:12px; padding:2px 10px; border-radius:999px; border:1px solid var(--line); color:var(--dim); }
.pill.ready { color:var(--good); border-color:var(--good); } .pill.failed, .pill.expired { color:var(--bad); border-color:var(--bad); } .pill.building { color:var(--accent); border-color:var(--accent); }
.bar { height:10px; border-radius:99px; background:var(--panel2); overflow:hidden; } .bar > i { display:block; height:100%; width:0; background:var(--accent); transition:width .4s; }
code, pre { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:14px; }
pre { background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:14px; overflow:auto; white-space:pre-wrap; word-break:break-all; }
table { width:100%; border-collapse:collapse; font-size:14px; } th, td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top; } th { color:var(--dim); font-weight:500; }
footer { color:var(--dim); font-size:14px; padding:40px 0; }
.hero { padding:36px 0 24px; } .section { padding:36px 0; }
.steps { counter-reset:s; display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); }
.steps .card::before { counter-increment:s; content:counter(s); display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--grad); color:#fff; font-weight:700; margin-bottom:10px; }
.themes { display:flex; gap:10px; flex-wrap:wrap; } .themes button { border:2px solid var(--line); border-radius:12px; padding:8px 14px; background:var(--panel2); color:var(--text); cursor:pointer; } .themes button[aria-pressed="true"] { border-color:var(--accent); }
@media (prefers-reduced-motion: reduce) { * { transition:none !important; scroll-behavior:auto !important; } }

/* ---- Magic the mascot and delight ---- */
.mg { overflow:visible; display:block; }
.mg-body { transform-origin:80px 150px; animation:mg-float 3.4s ease-in-out infinite; }
.mg-shadow { transform-origin:80px 160px; animation:mg-shadow 3.4s ease-in-out infinite; }
.mg-eyes { transform-origin:80px 76px; animation:mg-blink 5s infinite; }
.mg-eye-h { stroke:#1b1230; stroke-width:4; fill:none; stroke-linecap:round; }
.mg-hat { transform-origin:84px 54px; animation:mg-hat 3.4s ease-in-out infinite; }
.mg-sparks path { transform-box:fill-box; transform-origin:center; animation:mg-twinkle 2.6s ease-in-out infinite; } .mg-sparks .s2 { animation-delay:.8s } .mg-sparks .s3 { animation-delay:1.5s }
.mg-happy .mg-body { animation:mg-hop .9s ease-in-out infinite; } .mg-wow .mg-body { animation:mg-hop 1.2s ease-in-out infinite; }
.mg-think .mg-body { animation:mg-float 2s ease-in-out infinite; }
.mg-orbit { transform-origin:80px 92px; animation:mg-spin 2.4s linear infinite; } .mg-orbit circle:first-child { stroke:none }
@keyframes mg-float { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-9px) } }
@keyframes mg-shadow { 0%,100% { transform:scale(1); opacity:.18 } 50% { transform:scale(.82); opacity:.1 } }
@keyframes mg-hop { 0%,100% { transform:translateY(0) scale(1,1) } 40% { transform:translateY(-16px) scale(.97,1.04) } 60% { transform:translateY(-16px) } 92% { transform:translateY(0) scale(1.05,.93) } }
@keyframes mg-blink { 0%,93%,100% { transform:scaleY(1) } 96% { transform:scaleY(.08) } }
@keyframes mg-hat { 0%,100% { transform:rotate(-2deg) } 50% { transform:rotate(3deg) } }
@keyframes mg-twinkle { 0%,100% { transform:scale(.4); opacity:.35 } 50% { transform:scale(1.1); opacity:1 } }
@keyframes mg-spin { to { transform:rotate(360deg) } }
.glow-bg { position:fixed; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(60vw 40vw at 85% -5%, rgba(139,92,246,.20), transparent 60%), radial-gradient(50vw 40vw at -5% 30%, rgba(245,158,11,.16), transparent 60%); }
.hero-grid { display:grid; gap:30px; grid-template-columns:1.15fr .85fr; align-items:center; } @media (max-width:820px) { .hero-grid { grid-template-columns:1fr; } }
.phone { background:var(--panel); border:1px solid var(--line); border-radius:22px; padding:14px; box-shadow:0 24px 70px rgba(0,0,0,.35); max-width:380px; margin-left:auto; }
.phone .top { display:flex; gap:10px; align-items:center; border-bottom:1px solid var(--line); padding:0 0 10px; font-weight:600; } .phone .top small { color:var(--dim); font-weight:400; display:block; line-height:1.2; }
.bub { max-width:88%; padding:9px 13px; border-radius:15px; margin:10px 0; font-size:15px; line-height:1.45; animation:pop .3s ease-out; } .bub.me { margin-left:auto; background:var(--accent); color:var(--on-accent); border-bottom-right-radius:4px; } .bub.bot { background:var(--panel2); border-bottom-left-radius:4px; }
@keyframes pop { from { transform:translateY(8px) scale(.96); opacity:0 } to { transform:none; opacity:1 } }
.caret::after { content:"\258B"; margin-left:2px; opacity:.6; animation:caret 1s steps(2) infinite; } @keyframes caret { 50% { opacity:0 } }
.ticker { height:150px; overflow:hidden; position:relative; mask-image:linear-gradient(transparent, #000 25%, #000 80%, transparent); } .ticker div { padding:3px 0; color:var(--dim); font-size:14px; animation:pop .3s ease-out; } .ticker div:last-child { color:var(--text); } .ticker { margin:10px 0; }
.chips { display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 2px; } .chip { border:1px solid var(--line); background:var(--panel2); color:var(--text); border-radius:999px; padding:7px 14px; font:inherit; font-size:14px; cursor:pointer; } .chip:hover { border-color:var(--accent); }
.wiggle:hover .mg-body { animation-duration:1s; }

/* ---- the living mascot ---- */
.mg-live { position:relative; cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent; border-radius:50%; }
.mg-live:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
.mg-pupils { transition:transform .08s linear; }
.mg-live.mg-hover .mg-hat { animation:mg-hat-tip .5s ease-in-out infinite; }
.mg-live.mg-asleep .mg-eyes { animation:none; transform:scaleY(.12); } .mg-live.mg-asleep .mg-body { animation-duration:6s; }
.mg-bubble { position:absolute; left:50%; bottom:100%; transform:translateX(-50%); margin-bottom:4px; background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:14px; padding:7px 13px; font:600 14px/1.25 Inter, system-ui, sans-serif; white-space:nowrap; box-shadow:0 8px 24px rgba(0,0,0,.3); animation:pop .22s ease-out; z-index:5; pointer-events:none; }
.mg-bubble::after { content:""; position:absolute; left:50%; top:100%; width:10px; height:10px; background:var(--panel); border-right:1px solid var(--line); border-bottom:1px solid var(--line); transform:translate(-50%,-6px) rotate(45deg); }
.mg-bubble.out { opacity:0; transition:opacity .3s; }
.bub-right .mg-bubble { left:100%; bottom:50%; transform:translateY(50%); margin:0 0 0 8px; } .bub-right .mg-bubble::after { display:none; }
.mg.react-hop .mg-body { animation:mg-hop .55s ease-out 1 !important; }
.mg.react-wiggle { animation:mg-wiggle .7s ease-in-out 1; transform-origin:50% 90%; }
.mg.react-spin { animation:mg-spin3d .8s cubic-bezier(.3,.7,.3,1) 1; }
.mg.react-puff .mg-body { animation:mg-puff .6s ease-out 1 !important; }
@keyframes mg-wiggle { 0%,100% { transform:rotate(0) } 20% { transform:rotate(-9deg) } 45% { transform:rotate(8deg) } 70% { transform:rotate(-5deg) } }
@keyframes mg-spin3d { from { transform:rotateY(0) } to { transform:rotateY(360deg) } }
@keyframes mg-puff { 0% { transform:scale(1) } 35% { transform:scale(1.14,.9) } 65% { transform:scale(.94,1.08) } 100% { transform:scale(1) } }
@keyframes mg-hat-tip { 0%,100% { transform:rotate(-4deg) translateY(0) } 50% { transform:rotate(7deg) translateY(-3px) } }
.stage { display:flex; flex-direction:column; align-items:center; gap:6px; padding:18px 0 6px; text-align:center; } .stage .nm { font:700 18px Poppins, Inter, sans-serif; } .stage .tag { color:var(--dim); font-size:14px; margin-top:-2px; }
header.top nav a.btn { color:#fff; } header.top nav a.btn:hover { color:#fff; }