/* ============================================
   YvorAIO brand DNA — shared by all 10 mockups
   Source : cloud/admin-panel/src/styles.css
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
    --bg:              #06060a;
    --bg-raised:       #0a0a12;
    --bg-card:         #0d0d18;
    --bg-card-hover:   #12121e;
    --bg-input:        #080810;
    --bg-sidebar:      #08080e;

    --border:          rgba(124, 58, 237, 0.14);
    --border-strong:   rgba(124, 58, 237, 0.24);
    --border-neutral:  rgba(255, 255, 255, 0.06);

    --text:            #f4f4fb;
    --text-2:          #c5c5d4;
    --text-3:          #9494b8;
    --text-4:          #6b6b8f;
    --text-5:          #3a3a5c;

    --purple:          #7c3aed;
    --purple-dark:     #6d28d9;
    --purple-light:    #a78bfa;
    --purple-glow:     rgba(124, 58, 237, 0.35);
    --purple-soft:     rgba(124, 58, 237, 0.08);
    --purple-fill:     rgba(124, 58, 237, 0.14);

    --green:           #22c55e;
    --green-soft:      rgba(34, 197, 94, 0.12);
    --red:             #ef4444;
    --red-soft:        rgba(239, 68, 68, 0.12);
    --amber:           #f59e0b;
    --amber-soft:      rgba(245, 158, 11, 0.12);

    --safe-top:        env(safe-area-inset-top,  0);
    --safe-bot:        env(safe-area-inset-bottom,0);
}

*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:14px/1.5 'Inter',-apple-system,system-ui,sans-serif;overflow-x:hidden;letter-spacing:-0.005em}
button,a{font:inherit;color:inherit;background:transparent;border:0;cursor:pointer;text-decoration:none}
.mono{font-family:'JetBrains Mono','SF Mono',Menlo,monospace}

/* ── Brand "Y" logo ───────────────────────────────────── */
.brand-y{
    width:32px;height:32px;border-radius:8px;
    background:linear-gradient(135deg,var(--purple),var(--purple-dark));
    color:#fff;display:grid;place-items:center;
    font-weight:800;font-size:15px;letter-spacing:-0.5px;
    box-shadow:0 4px 14px var(--purple-glow);flex-shrink:0;
}
.brand-y.lg{width:40px;height:40px;font-size:18px;border-radius:10px}
.brand-y.sm{width:24px;height:24px;font-size:11px;border-radius:6px}

/* ── Buttons ───────────────────────────────────────────── */
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    padding:10px 16px;border-radius:8px;font:inherit;font-size:13px;font-weight:600;
    transition:all .15s ease;cursor:pointer;border:1px solid transparent;
    white-space:nowrap;
}
.btn-primary{
    background:linear-gradient(180deg,var(--purple),var(--purple-dark));
    color:#fff;border-color:var(--purple-dark);
    box-shadow:0 1px 2px rgba(0,0,0,0.4),0 4px 16px var(--purple-glow);
}
.btn-primary:active{transform:translateY(1px);box-shadow:0 1px 2px rgba(0,0,0,0.4),0 2px 8px var(--purple-glow)}
.btn-ghost{
    background:var(--purple-soft);color:var(--purple-light);
    border-color:var(--border);
}
.btn-ghost:hover{background:var(--purple-fill);border-color:var(--border-strong)}
.btn-icon{
    width:36px;height:36px;display:grid;place-items:center;
    background:var(--purple-soft);border:1px solid var(--border);border-radius:8px;
    color:var(--text-2);
}
.btn-danger{
    background:var(--red-soft);color:#fca5a5;border-color:rgba(239,68,68,0.3);
}

/* ── Pills / tags ──────────────────────────────────────── */
.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:20px;font-size:11px;font-weight:600;letter-spacing:0.2px}
.pill-purple{background:var(--purple-fill);color:var(--purple-light);border:1px solid var(--border-strong)}
.pill-green{background:var(--green-soft);color:#86efac;border:1px solid rgba(34,197,94,0.3)}
.pill-red{background:var(--red-soft);color:#fca5a5;border:1px solid rgba(239,68,68,0.3)}
.pill-amber{background:var(--amber-soft);color:#fcd34d;border:1px solid rgba(245,158,11,0.3)}
.pill-live::before{content:"";width:6px;height:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 8px rgba(34,197,94,0.6);animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}

/* ── Cards ─────────────────────────────────────────────── */
.card{background:var(--bg-card);border:1px solid var(--border-neutral);border-radius:14px;overflow:hidden}
.card-purple{background:linear-gradient(180deg,var(--bg-card),var(--bg-raised));border-color:var(--border)}