/* ===================== Magic: dark and mystic — black, gold and emerald =====================
   Jadu means magic. This look is a set of colour swaps (the app is built on tokens, so every screen follows) plus some
   decoration: a gold serif wordmark, glowing gold outlines, mist and drifting dust, and the golden-J welcome scene.
   Pick it from the account menu or from the Jarvis screen; Classic and Light are untouched. */
:root[data-theme="magic"] {
  --bg: #050706; --bg-2: #0a0e0c; --bg-3: #0f1613; --bg-4: #17211c;
  --line: #1c2a23; --line-2: #2c4033;
  --ink: #f1ead3; --ink-2: #bdb79d; --ink-3: #85816b;
  --gold: #dcb24c; --gold-2: #f3d27a; --gold-ink: #17110a; --gold-wash: rgba(220, 178, 76, .12);
  --cyan: #33d4a0; --cyan-wash: rgba(51, 212, 160, .12);
  --red: #e5675f; --red-wash: rgba(229, 103, 95, .14);
  --wts: #33d4a0; --wtb: #e6b457;
  --s1: #33d4a0; --s2: #dcb24c; --s3: #8f7fd6; --s4: #7fbf5e; --s5: #d4799f;
  --shadow: 0 18px 54px rgba(0, 0, 0, .65);
  --serif: 'Cinzel', 'Marcellus', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --gold-grad: linear-gradient(180deg, #fff1b5 0%, #e7bd57 46%, #a87c22 100%);
  color-scheme: dark;
}
:root[data-theme="magic"] body {
  background:
    radial-gradient(ellipse 70% 45% at 50% -8%, rgba(51, 212, 160, .08), transparent 62%),
    radial-gradient(ellipse 55% 40% at 100% 105%, rgba(220, 178, 76, .07), transparent 62%),
    radial-gradient(ellipse 40% 35% at 0% 80%, rgba(51, 212, 160, .045), transparent 62%), var(--bg);
  background-attachment: fixed;
}
/* dust: a faint scatter of gold and emerald specks that never moves, so it costs nothing */
:root[data-theme="magic"] body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .55;
  background-image:
    radial-gradient(1px 1px at 18px 42px, rgba(243, 210, 122, .55), transparent 60%), radial-gradient(1px 1px at 96px 130px, rgba(51, 212, 160, .5), transparent 60%),
    radial-gradient(1.4px 1.4px at 170px 20px, rgba(243, 210, 122, .4), transparent 60%), radial-gradient(1px 1px at 230px 190px, rgba(243, 210, 122, .5), transparent 60%),
    radial-gradient(1px 1px at 60px 220px, rgba(51, 212, 160, .4), transparent 60%);
  background-size: 260px 260px;
}
:root[data-theme="magic"] #app { position: relative; z-index: 1; }
:root[data-theme="magic"] ::selection { background: var(--gold); color: var(--gold-ink); }

/* ---------- headings and the wordmark ---------- */
:root[data-theme="magic"][data-lang="en"] :is(h1, h2) { font-family: var(--serif); font-weight: 600; font-stretch: 100%; letter-spacing: .035em; }
:root[data-theme="magic"][data-lang="en"] h1 { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
:root[data-theme="magic"] .brand-name { font-family: var(--serif); font-stretch: 100%; font-weight: 700; letter-spacing: .26em; font-size: 21px; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 10px rgba(220, 178, 76, .35)); }
:root[data-theme="magic"] .brand-sub { color: var(--ink-3); letter-spacing: .04em; }
:root[data-theme="magic"] .orb { filter: drop-shadow(0 0 7px rgba(220, 178, 76, .55)); }
:root[data-theme="magic"] .orb .core { fill: #070a08; }

/* ---------- the rail and the top bar ---------- */
:root[data-theme="magic"] .rail { background: linear-gradient(180deg, rgba(10, 14, 12, .96), rgba(5, 8, 6, .96)); border-right: 1px solid rgba(220, 178, 76, .16); box-shadow: 1px 0 28px rgba(0, 0, 0, .5); }
:root[data-theme="magic"] .brand { border-bottom-color: rgba(220, 178, 76, .16); }
:root[data-theme="magic"] .nav a { border: 1px solid transparent; transition: box-shadow .2s, color .2s, border-color .2s, background .2s; }
:root[data-theme="magic"] .nav a:hover { background: rgba(220, 178, 76, .05); border-color: rgba(220, 178, 76, .18); }
:root[data-theme="magic"] .nav a.on { background: rgba(220, 178, 76, .06); border-color: rgba(220, 178, 76, .75); box-shadow: 0 0 18px rgba(220, 178, 76, .16), inset 0 0 14px rgba(220, 178, 76, .06); color: var(--gold-2); }
:root[data-theme="magic"] .nav a.on::before { display: none; }
:root[data-theme="magic"] .nav a.on svg { color: var(--gold-2); filter: drop-shadow(0 0 5px rgba(220, 178, 76, .6)); }
:root[data-theme="magic"] .nav-sep, :root[data-theme="magic"] .rail-foot { border-color: rgba(220, 178, 76, .14); background-color: rgba(220, 178, 76, .14); }
:root[data-theme="magic"] .rail-foot { background: none; }
:root[data-theme="magic"] .top { background: rgba(5, 7, 6, .82); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, transparent, rgba(220, 178, 76, .45), transparent) 1; }
:root[data-theme="magic"] .leds, :root[data-theme="magic"] .jadu-btn { border-color: rgba(220, 178, 76, .28); }
:root[data-theme="magic"] .avatar { background: radial-gradient(circle at 35% 30%, #24331f, #0b100c); border-color: rgba(220, 178, 76, .6); box-shadow: 0 0 12px rgba(220, 178, 76, .22); }
:root[data-theme="magic"] .menu { border-color: rgba(220, 178, 76, .3); background: rgba(8, 12, 10, .97); }

/* ---------- surfaces, buttons, fields ---------- */
:root[data-theme="magic"] .panel, :root[data-theme="magic"] .ticker { background: linear-gradient(180deg, rgba(14, 20, 17, .9), rgba(7, 10, 8, .92)); border-color: rgba(220, 178, 76, .16); box-shadow: inset 0 0 44px rgba(51, 212, 160, .022), 0 10px 32px rgba(0, 0, 0, .42); }
:root[data-theme="magic"] .panel:hover { border-color: rgba(220, 178, 76, .26); }
:root[data-theme="magic"] .ticker a { border-right-color: rgba(220, 178, 76, .12); }
:root[data-theme="magic"] .ticker a:hover { background: rgba(220, 178, 76, .05); }
:root[data-theme="magic"] .btn { border-color: rgba(220, 178, 76, .28); background: rgba(220, 178, 76, .04); }
:root[data-theme="magic"] .btn:hover { border-color: rgba(220, 178, 76, .6); box-shadow: 0 0 16px rgba(220, 178, 76, .16); }
:root[data-theme="magic"] .btn.primary { background: linear-gradient(180deg, #f6d97c, #cf9f33); border-color: #ecc659; color: var(--gold-ink); box-shadow: 0 0 22px rgba(220, 178, 76, .26); }
:root[data-theme="magic"] .btn.primary:hover { background: linear-gradient(180deg, #ffe8a0, #dcae42); box-shadow: 0 0 30px rgba(220, 178, 76, .45); }
:root[data-theme="magic"] .btn.ghost { background: transparent; border-color: transparent; }
:root[data-theme="magic"] input, :root[data-theme="magic"] select, :root[data-theme="magic"] textarea { background: rgba(15, 22, 19, .85); border-color: rgba(220, 178, 76, .2); }
:root[data-theme="magic"] input:focus, :root[data-theme="magic"] select:focus, :root[data-theme="magic"] textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(220, 178, 76, .14), 0 0 18px rgba(220, 178, 76, .12); }
:root[data-theme="magic"] .bubble.in { background: linear-gradient(180deg, #f1cf74, #c99b30); }
:root[data-theme="magic"] .bubble.out { border: 1px solid rgba(51, 212, 160, .22); }
:root[data-theme="magic"] .tag.WTB { background: rgba(230, 180, 87, .14); }
:root[data-theme="magic"] th { color: var(--gold); }
:root[data-theme="magic"] hr, :root[data-theme="magic"] .divider { background-color: rgba(220, 178, 76, .14); }
:root[data-theme="magic"] * { scrollbar-color: rgba(220, 178, 76, .35) transparent; }

/* ---------- the account menu: Look and Language rows (all looks) ---------- */
.menu-row { padding: 8px 8px 6px; border-top: 1px solid var(--line); margin-top: 4px; }
.menu-row > span { display: block; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 0 2px 6px; }
.menu-row > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.menu .menu-row button { justify-content: center; padding: 7px 4px; font-size: 13px; border: 1px solid var(--line-2); border-radius: 99px; width: auto; }
.menu .menu-row button[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); background: var(--gold-wash); }
.menu .menu-row button[data-lang="pa-Arab"] { font-size: 14.5px; line-height: 1.6; }

/* ---------- the Magic welcome scene on the home page ---------- */
.mhero { display: none; }
:root[data-theme="magic"] .mhero { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, 1fr); gap: 18px; margin-bottom: 22px; }
:root[data-theme="magic"] .mhero + .page-head { display: none; }
.mh-main { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 4px 4px 18px; border: 1px solid rgba(220, 178, 76, .14); border-radius: var(--r-l); background: radial-gradient(ellipse 60% 55% at 50% 38%, rgba(51, 212, 160, .07), transparent 70%), rgba(6, 9, 7, .55); overflow: hidden; }
.mh-stage { position: relative; height: clamp(300px, 40vh, 430px); }
.mh-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mh-greet { position: absolute; left: 20px; top: 16px; max-width: 46%; }
.mh-greet h1 { font-size: clamp(22px, 2.3vw, 32px); }
.mh-greet p { margin: 6px 0 0; color: var(--ink-2); font-size: 15px; }
.mh-ready { text-align: center; margin: -6px 0 10px; font-family: var(--serif); font-size: clamp(19px, 2vw, 27px); letter-spacing: .03em; color: var(--ink); text-shadow: 0 0 22px rgba(220, 178, 76, .35); }
:root[data-theme="magic"][data-lang^="pa"] .mh-ready, :root[data-theme="magic"][data-lang^="pa"] .mh-greet h1 { font-family: var(--font); letter-spacing: 0; }
.mh-ask { display: flex; align-items: center; gap: 8px; margin: 0 auto; width: min(640px, calc(100% - 36px)); padding: 6px 8px 6px 14px; border: 1px solid rgba(220, 178, 76, .4); border-radius: 99px; background: rgba(8, 12, 10, .85); box-shadow: 0 0 24px rgba(220, 178, 76, .12), inset 0 0 18px rgba(51, 212, 160, .04); }
.mh-ask:focus-within { border-color: var(--gold-2); box-shadow: 0 0 30px rgba(220, 178, 76, .26); }
.mh-ask input { flex: 1; min-width: 0; border: 0; background: transparent; box-shadow: none !important; padding: 8px 4px; min-height: 0; }
.mh-ask button { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(220, 178, 76, .5); background: rgba(220, 178, 76, .08); color: var(--gold-2); cursor: pointer; padding: 0; }
.mh-ask button:last-child { background: linear-gradient(180deg, #f6d97c, #cf9f33); color: #17110a; border-color: #ecc659; }
.mh-ask button svg { width: 18px; height: 18px; }
.mh-ask button:hover { box-shadow: 0 0 16px rgba(220, 178, 76, .45); }
.mh-wave { display: inline-flex; align-items: center; gap: 2px; height: 26px; flex: none; }
.mh-wave i { width: 2px; border-radius: 2px; background: linear-gradient(180deg, #7bf3c8, #2fd09a); height: 14px; height: calc(5px + 15px * abs(sin(var(--i) * .55))); opacity: .85; animation: mhWave 1.6s ease-in-out infinite; animation-delay: calc(var(--i) * -0.09s); }
@keyframes mhWave { 50% { transform: scaleY(.45); opacity: .5; } }
#mhOut { padding: 0 18px; }
.mh-opps { display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1px solid rgba(220, 178, 76, .22); border-radius: var(--r-l); background: linear-gradient(180deg, rgba(14, 20, 17, .9), rgba(7, 10, 8, .92)); box-shadow: inset 0 0 44px rgba(51, 212, 160, .03), 0 10px 32px rgba(0, 0, 0, .42); min-width: 0; }
.mh-opps h3 { font-family: var(--serif); font-weight: 600; letter-spacing: .05em; font-size: 17px; color: var(--ink); margin-bottom: 4px; }
:root[data-theme="magic"][data-lang^="pa"] .mh-opps h3 { font-family: var(--font); letter-spacing: 0; }
#mhOpps { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.mh-opp { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid rgba(220, 178, 76, .16); border-radius: 10px; background: rgba(220, 178, 76, .035); color: var(--ink); text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.mh-opp:hover { border-color: rgba(220, 178, 76, .55); box-shadow: 0 0 18px rgba(220, 178, 76, .12); text-decoration: none; }
.mh-gem { width: 34px; height: 34px; flex: none; border-radius: 8px; border: 1px solid rgba(51, 212, 160, .45); background: radial-gradient(circle at 35% 30%, rgba(51, 212, 160, .45), rgba(51, 212, 160, .05)); box-shadow: 0 0 12px rgba(51, 212, 160, .25); position: relative; }
.mh-gem::after { content: ''; position: absolute; inset: 9px 8px; border: 2px solid rgba(220, 178, 76, .85); border-radius: 2px 2px 5px 5px; }
.mh-opp b { display: block; font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mh-opp small { display: block; color: var(--ink-3); font-size: 12.5px; }
.mh-opp em { font-style: normal; font-weight: 650; color: var(--cyan); font-size: 13px; white-space: nowrap; }
.mh-none { color: var(--ink-3); font-size: 14px; margin: 0; }
.mh-btn { display: block; text-align: center; padding: 11px 14px; border-radius: 99px; border: 1px solid #ecc659; background: linear-gradient(180deg, #f6d97c, #cf9f33); color: #17110a; font-weight: 700; text-decoration: none; box-shadow: 0 0 22px rgba(220, 178, 76, .28); }
.mh-btn:hover { text-decoration: none; box-shadow: 0 0 32px rgba(220, 178, 76, .5); }
.mh-cards { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.mh-card { position: relative; display: flex; flex-direction: column; gap: 3px; min-height: 124px; padding: 14px 16px 12px; border: 1px solid rgba(220, 178, 76, .18); border-radius: var(--r-l); background: linear-gradient(180deg, rgba(14, 20, 17, .9), rgba(7, 10, 8, .92)); color: var(--ink); text-decoration: none; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.mh-card:hover { text-decoration: none; border-color: rgba(220, 178, 76, .5); box-shadow: 0 0 22px rgba(220, 178, 76, .12); }
.mh-k { font-size: 12.5px; color: var(--gold); letter-spacing: .04em; }
.mh-card b { font-size: 34px; line-height: 1.1; font-family: var(--serif); font-weight: 600; color: var(--ink); }
.mh-card b.mh-sm { font-size: 18px; font-family: var(--font); font-weight: 650; }
.mh-card small { color: var(--ink-3); font-size: 12.5px; }
.mh-spread { font-weight: 700; color: var(--gold-2); font-size: 17px; }
.mh-spread small { font-weight: 400; }
.mh-spark { position: absolute; right: 12px; bottom: 10px; width: 46%; height: 34px; }
.mh-need { display: block; padding: 8px 12px; border: 1px solid rgba(240, 150, 100, .5); border-radius: 99px; background: rgba(240, 150, 100, .08); color: #f4b48c; font-size: 13px; font-weight: 600; text-decoration: none; }
.mh-need:hover { text-decoration: none; box-shadow: 0 0 16px rgba(240, 150, 100, .25); }
/* Shahmukhi reads right to left: the greeting sits on the right, the cards and deal rows mirror, the sparkline moves left */
:root[data-lang="pa-Arab"] .mh-greet { left: auto; right: 20px; }
:root[data-lang="pa-Arab"] .mh-card, :root[data-lang="pa-Arab"] .mh-opp { direction: rtl; }
:root[data-lang="pa-Arab"] .mh-spark { right: auto; left: 12px; }
@media (max-width: 1000px) { :root[data-theme="magic"] .mhero { grid-template-columns: minmax(0, 1fr); } .mh-cards { grid-template-columns: minmax(0, 1fr); } .mh-greet { max-width: 90%; } .mh-stage { height: 340px; } }

/* ---------- the Jarvis screen in Magic ---------- */
.hud[data-skin="magic"] { --hc: 51, 212, 160; --hg: 224, 182, 78; --ha: 51, 212, 160;
  background: radial-gradient(ellipse 52% 50% at 50% 42%, rgba(var(--hg), .075), transparent 64%), radial-gradient(ellipse 100% 55% at 50% 125%, rgba(var(--hc), .1), transparent 62%), radial-gradient(ellipse 40% 40% at 0% 0%, rgba(var(--hc), .05), transparent 70%), linear-gradient(#030403, #060907 55%, #020302); }
.hud[data-skin="magic"][data-mode="command"] { --ha: 96, 255, 196; }
.hud[data-skin="magic"][data-mode="thinking"] { --ha: 246, 205, 100; }
.hud[data-skin="magic"][data-mode="speaking"] { --ha: 255, 236, 170; }
.hud[data-skin="magic"][data-mode="waiting"] { --ha: 240, 150, 100; }
.hud[data-skin="magic"] .hud-scan { opacity: .35; }
.hud[data-skin="magic"] .hud-vig { background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 2, 1, .82) 100%); }
.hud[data-skin="magic"] .hud-corner { border-color: rgba(var(--hg), .75); border-width: 1.5px; }
.hud[data-skin="magic"] .hud-top { border-bottom-color: rgba(var(--hg), .22); }
.hud[data-skin="magic"] .hud-top::after { background: linear-gradient(90deg, transparent, rgb(var(--hg)), transparent); }
.hud[data-skin="magic"] .hud-brand .orb { filter: drop-shadow(0 0 10px rgba(var(--hg), .75)); }
.hud[data-skin="magic"] .hud-brand b { font-family: var(--serif); font-stretch: 100%; font-weight: 700; letter-spacing: .34em; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 0 12px rgba(var(--hg), .45)); }
.hud[data-skin="magic"] .hud-brand span { color: rgba(241, 234, 211, .5); }
.hud[data-skin="magic"] .hp { border-radius: 10px; border-color: rgba(var(--hg), .24); background: linear-gradient(165deg, rgba(12, 18, 15, .8), rgba(3, 7, 5, .72)); box-shadow: inset 0 0 40px rgba(var(--hc), .035), 0 10px 40px rgba(0, 0, 0, .5); }
.hud[data-skin="magic"] .hp::before, .hud[data-skin="magic"] .hp::after { border-color: rgba(var(--hg), .9); }
.hud[data-skin="magic"] .hp h3 { color: rgb(var(--hg)); font-family: var(--serif); letter-spacing: .14em; font-weight: 600; }
.hud[data-skin="magic"][data-lang^="pa"] .hp h3 { font-family: var(--font); letter-spacing: 0; }
.hud[data-skin="magic"] .hp h3 .pip { background: rgb(var(--hc)); box-shadow: 0 0 9px rgb(var(--hc)); }
.hud[data-skin="magic"] .hud-sys .chip, .hud[data-skin="magic"] .hud-type input, .hud[data-skin="magic"] .hud-chips button, .hud[data-skin="magic"] .hud-seg { background: rgba(6, 10, 8, .72); border-color: rgba(var(--hg), .26); }
.hud[data-skin="magic"] .hud-state { font-family: var(--serif); font-weight: 600; letter-spacing: .36em; }
.hud[data-skin="magic"][data-lang^="pa"] .hud-state { font-family: var(--font); letter-spacing: 0; }
.hud[data-skin="magic"][data-lang="en"] .hud-cap { font-family: var(--serif); font-weight: 500; letter-spacing: .01em; }
.hud[data-skin="magic"] .hud-clock b { font-family: var(--serif); font-stretch: 100%; font-weight: 600; letter-spacing: .06em; color: var(--ink); }
.hud[data-skin="magic"] .hstats b { font-family: var(--serif); font-stretch: 100%; font-weight: 600; }
.hud[data-skin="magic"] .hud-readouts b { font-family: var(--serif); font-stretch: 100%; }
.hud[data-skin="magic"] .hud-chips button { border-radius: 99px; }
.hud[data-skin="magic"] .hud-chips button:hover { border-color: rgb(var(--hg)); }
.hud[data-skin="magic"] .hud-start { top: 77%; background: linear-gradient(180deg, #f8dc82, #cf9f33); box-shadow: 0 0 0 0 rgba(var(--hg), .6), 0 0 50px rgba(var(--hg), .4); }
.hud[data-skin="magic"] .hud-mic { border-color: rgba(var(--hg), .85); background: radial-gradient(circle, rgba(var(--hg), .2), rgba(var(--hg), .03)); color: rgb(var(--hg)); }
.hud[data-skin="magic"][data-mode="command"] .hud-mic { background: rgb(var(--ha)); color: #03140e; }
.hud[data-skin="magic"] .hud-work { border-color: rgba(var(--hg), .55); background: rgba(5, 8, 6, .78); clip-path: none; border-radius: 99px; color: var(--ink); }
.hud[data-skin="magic"] .job { border-color: rgba(var(--hg), .3); }
.hud[data-skin="magic"] .hjobs .none, .hud[data-skin="magic"] .hconvo .hint { color: rgba(241, 234, 211, .45); }
.hud[data-skin="magic"] .hud-ctl .hud-seg button[aria-pressed="true"] { background: rgba(var(--hg), .2); }