/* =========================================================================
   ilmora skin · AI & Automation  —  "Midnight Gold"
   Palette: Midnight Blue #0F172A · Gold #D4AF37 · Silver Gray #E5E7EB
   Obsidian glass cards, a gold hairline on every edge, a light that follows the mouse,
   a gold neural network in the background that reacts to the cursor.
   Works on #ildash (dashboard) and #ilcourse (course, lesson, topic, quiz).
   Everything that moves stops with prefers-reduced-motion.
   ========================================================================= */

/* ---------- fonts (bundled — no Google Fonts, so they load fast in every country) ---------- */
@font-face{font-family:"ILM Vazir";font-weight:400;font-style:normal;font-display:swap;src:url("../../assets/fonts/Vazirmatn-FD-Regular.woff2") format("woff2")}
@font-face{font-family:"ILM Vazir";font-weight:500;font-style:normal;font-display:swap;src:url("../../assets/fonts/Vazirmatn-FD-Medium.woff2") format("woff2")}
@font-face{font-family:"ILM Vazir";font-weight:700;font-style:normal;font-display:swap;src:url("../../assets/fonts/Vazirmatn-FD-Bold.woff2") format("woff2")}
@font-face{font-family:"ILM Vazir";font-weight:800;font-style:normal;font-display:swap;src:url("../../assets/fonts/Vazirmatn-FD-ExtraBold.woff2") format("woff2")}
@font-face{font-family:"ILM Sora";font-weight:100 800;font-style:normal;font-display:swap;src:url("../../assets/fonts/sora-latin-wght-normal.woff2") format("woff2-variations"),url("../../assets/fonts/sora-latin-wght-normal.woff2") format("woff2")}
@font-face{font-family:"ILM Mono";font-weight:400;font-style:normal;font-display:swap;src:url("../../assets/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"ILM Mono";font-weight:500;font-style:normal;font-display:swap;src:url("../../assets/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"ILM Display";font-weight:600;font-style:normal;font-display:swap;src:url("../../assets/fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"ILM Display";font-weight:700;font-style:normal;font-display:swap;src:url("../../assets/fonts/cormorant-garamond-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"ILM Display";font-weight:600;font-style:italic;font-display:swap;src:url("../../assets/fonts/cormorant-garamond-latin-600-italic.woff2") format("woff2")}

/* angle that spins the gold ring around the avatar */
@property --ilm-ang{syntax:"<angle>";inherits:false;initial-value:0deg}

/* ---------- tokens: dark (default) ---------- */
#ildash[data-skin="ai"],#ilcourse[data-skin="ai"]{
  --ilm-g1:#8A6A1C; --ilm-g2:#D4AF37; --ilm-g3:#F3E3A0; --ilm-g4:#E5E7EB; --ilm-gink:#1A1405;
  --ilm-t0:#070C1A; --ilm-t1:#94A3B8; --ilm-t2:#CBD5E1; --ilm-t3:#E5E7EB;
  --ilm-accent:#D4AF37; --ilm-accent-ink:#F3E3A0;
  --gold:#D4AF37; --goldtx:#E3C25A; --teal:#B7C2D6; --soft:rgba(212,175,55,.12); --gold-soft:rgba(212,175,55,.12);
  --metal:linear-gradient(110deg,#8A6A1C 0%,#D4AF37 22%,#F6E7A6 42%,#D4AF37 60%,#9C7A22 80%,#E8CB6A 100%);
  --bg:#070C1A; --card:#0E1630; --panel:#0A1124; --raise:#141E3D;
  --line:rgba(212,175,55,.2); --line2:rgba(229,231,235,.08);
  --text:#E5E7EB; --muted:#98A3BC;
  --shadow:0 26px 60px rgba(0,0,0,.55);
  --serif:"ILM Display","Cormorant Garamond",Georgia,serif; --sans:"ILM Sora",system-ui,sans-serif; --mono:"ILM Mono",ui-monospace,monospace;
  /* skin-only tokens */
  --ilm-glass:linear-gradient(155deg,rgba(26,38,72,.6),rgba(10,16,36,.72));
  --ilm-glass-2:linear-gradient(155deg,rgba(22,32,62,.6),rgba(9,14,30,.72));
  --ilm-edge:linear-gradient(135deg,rgba(243,227,160,.85),rgba(212,175,55,.18) 34%,rgba(229,231,235,.06) 55%,rgba(212,175,55,.5));
  --ilm-spot:rgba(212,175,55,.2);
  --ilm-hl:inset 0 1px 0 rgba(255,255,255,.07);
  --ilm-btn-ink:#1A1405; --ilm-dir:to right; --ilm-nudge:5px;
  --ilm-b-fill:linear-gradient(180deg,#EACB5E 0%,#D4AF37 52%,#B08A22 100%);
  --ilm-b-ring:linear-gradient(180deg,#FFF2B8 0%,#E2BD45 38%,#8A6A1C 100%);
  --ilm-b-glass:linear-gradient(180deg,rgba(24,34,64,.9),rgba(10,16,34,.95));
  --ilm-b-glow:rgba(226,189,69,.55);
}
/* ---------- tokens: light ---------- */
#ildash.is-light[data-skin="ai"],html.is-light #ilcourse[data-skin="ai"]{
  --ilm-g1:#7A5C14; --ilm-g2:#B8922A; --ilm-g3:#E6CD7A; --ilm-g4:#F3F4F6; --ilm-gink:#0F172A;
  --ilm-t0:#0F172A; --ilm-t1:#475569; --ilm-t2:#64748B; --ilm-t3:#CBD5E1;
  --ilm-accent:#B8922A; --ilm-accent-ink:#7A5C14;
  --gold:#C29B2E; --goldtx:#8D6B14; --teal:#475569; --soft:rgba(184,146,42,.12); --gold-soft:rgba(184,146,42,.12);
  --metal:linear-gradient(110deg,#8A6A1C 0%,#C29B2E 24%,#E6C766 44%,#C29B2E 62%,#8A6A1C 82%,#D4B04A 100%);
  --bg:#ECEEF3; --card:#FFFFFF; --panel:#F6F7FA; --raise:#F1F3F8;
  --line:rgba(160,124,28,.28); --line2:rgba(15,23,42,.08);
  --text:#0F172A; --muted:#556077;
  --shadow:0 22px 50px rgba(15,23,42,.12);
  --ilm-glass:linear-gradient(155deg,rgba(255,255,255,.94),rgba(246,247,251,.88));
  --ilm-glass-2:linear-gradient(155deg,rgba(255,255,255,.78),rgba(244,245,250,.7));
  --ilm-edge:linear-gradient(135deg,rgba(184,146,42,.95),rgba(184,146,42,.2) 34%,rgba(15,23,42,.06) 55%,rgba(184,146,42,.6));
  --ilm-spot:rgba(184,146,42,.22);
  --ilm-hl:inset 0 1px 0 rgba(255,255,255,.9);
  --ilm-btn-ink:#3B2A05;
  --ilm-b-fill:linear-gradient(180deg,#F6E6A6 0%,#E4C766 50%,#CFA944 100%);
  --ilm-b-ring:linear-gradient(180deg,#FFF9DD 0%,#E8CE74 40%,#B8922A 100%);
  --ilm-b-glass:linear-gradient(180deg,#FFFFFF,#F4F1E6);
  --ilm-b-glow:rgba(214,172,52,.5);
}
/* Persian: one family for everything, so digits are Persian digits too */
#ildash[data-skin="ai"][dir="rtl"],html[dir="rtl"] #ilcourse[data-skin="ai"]{
  --serif:"ILM Vazir","ILM Sora",system-ui,sans-serif; --sans:"ILM Vazir","ILM Sora",system-ui,sans-serif; --mono:"ILM Vazir","ILM Mono",system-ui,sans-serif;
  --ilm-dir:to left; --ilm-nudge:-5px;
}

/* ---------- type ---------- */
#ildash[data-skin="ai"],#ilcourse[data-skin="ai"]{letter-spacing:0;font-feature-settings:"ss01","cv11"}
#ildash[data-skin="ai"] :is(h1,h2,h3),#ilcourse[data-skin="ai"] :is(h1,h2,h3){font-family:var(--serif);font-weight:600;letter-spacing:-.005em}
#ildash[data-skin="ai"][dir="rtl"] :is(h1,h2,h3),html[dir="rtl"] #ilcourse[data-skin="ai"] :is(h1,h2,h3){font-weight:800;letter-spacing:0}
#ildash[data-skin="ai"] .ild-metal,#ilcourse[data-skin="ai"] .ilc-metal{font-style:italic;background-size:240% 100%;animation:ilmShine 9s ease-in-out infinite alternate}
#ildash[data-skin="ai"][dir="rtl"] .ild-metal,html[dir="rtl"] #ilcourse[data-skin="ai"] .ilc-metal{font-style:normal}
@keyframes ilmShine{from{background-position:0% 50%}to{background-position:100% 50%}}
#ildash[data-skin="ai"] .ild-lbl{letter-spacing:.24em;font-size:10.5px}
#ildash[data-skin="ai"] .ild-eyebrow{color:var(--goldtx)}
#ildash[data-skin="ai"] .ila-top h2,#ildash[data-skin="ai"] .ild-head h2{font-size:clamp(40px,4.6vw,64px);line-height:1.02;margin-top:12px}
#ildash[data-skin="ai"] .ila-top h2 .ild-metal,#ildash[data-skin="ai"] .ild-head h2 .ild-metal{font-style:italic}
#ildash[data-skin="ai"][dir="rtl"] .ila-top h2,#ildash[data-skin="ai"][dir="rtl"] .ild-head h2{font-size:clamp(32px,3.6vw,50px);line-height:1.2}
#ildash[data-skin="ai"] .ila-top p,#ildash[data-skin="ai"] .ild-head p{color:var(--muted)}

/* ---------- page background (behind the plugin area) ---------- */
html:has(#ildash[data-skin="ai"]){background:#070C1A !important}
html:has(#ildash.is-light[data-skin="ai"]){background:#ECEEF3 !important}
html.ilc-html:has(#ilcourse[data-skin="ai"]){background:#070C1A}
html.ilc-html.is-light:has(#ilcourse[data-skin="ai"]){background:#ECEEF3}
#ildash[data-skin="ai"] .ild-bg{background:
  radial-gradient(1200px 700px at 88% -8%,rgba(212,175,55,.10),transparent 60%),
  radial-gradient(900px 700px at -6% 105%,rgba(70,92,170,.20),transparent 62%),
  var(--bg)}
#ildash.is-light[data-skin="ai"] .ild-bg{background:
  radial-gradient(1200px 700px at 88% -8%,rgba(212,175,55,.16),transparent 60%),
  radial-gradient(900px 700px at -6% 105%,rgba(120,140,200,.16),transparent 62%),
  var(--bg)}
#ildash[data-skin="ai"] :is(.ild-bg-grid,.ild-bg-dots,.ild-bg .sp,.ild-bg .orb),
#ilcourse[data-skin="ai"] :is(.ilc-bg .g,.ilc-bg .d,.ilc-bg .sp,.ilc-bg .orb){display:none}
/* slow gold + midnight light fields */
#ildash[data-skin="ai"] .ild-bg-glow.a,#ilcourse[data-skin="ai"] .ilc-bg .h.a{
  background:radial-gradient(circle,rgba(212,175,55,.2),transparent 62%);animation:ilmAurA 38s ease-in-out infinite alternate}
#ildash[data-skin="ai"] .ild-bg-glow.b,#ilcourse[data-skin="ai"] .ilc-bg .h.b{
  background:radial-gradient(circle,rgba(84,110,200,.26),transparent 64%);animation:ilmAurB 46s ease-in-out infinite alternate}
#ildash.is-light[data-skin="ai"] .ild-bg-glow.a,html.is-light #ilcourse[data-skin="ai"] .ilc-bg .h.a{background:radial-gradient(circle,rgba(212,175,55,.26),transparent 62%)}
#ildash.is-light[data-skin="ai"] .ild-bg-glow.b,html.is-light #ilcourse[data-skin="ai"] .ilc-bg .h.b{background:radial-gradient(circle,rgba(110,130,200,.2),transparent 64%)}
@keyframes ilmAurA{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-140px,90px,0) scale(1.18)}}
@keyframes ilmAurB{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(150px,-90px,0) scale(1.14)}}
.ilm-ai-net{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
#ilcourse.ill[data-skin="ai"] .ill-bg{background:var(--bg)}
#ilcourse.ill[data-skin="ai"] .ill-bg::before{content:"";position:absolute;top:-240px;inset-inline-end:-120px;width:780px;height:780px;border-radius:50%;
  background:radial-gradient(circle,rgba(212,175,55,.18),transparent 62%);animation:ilmAurA 38s ease-in-out infinite alternate}
#ilcourse.ill[data-skin="ai"] .ill-bg::after{content:"";position:absolute;bottom:-280px;inset-inline-start:-200px;width:700px;height:700px;border-radius:50%;
  background:radial-gradient(circle,rgba(84,110,200,.22),transparent 64%);animation:ilmAurB 46s ease-in-out infinite alternate}

/* ---------- logo: the ilmora wordmark is turned into polished gold ---------- */
#ildash[data-skin="ai"] .ild-brand img,#ilcourse[data-skin="ai"] :is(.ilc-logo img,.ill-drawer-logo img,.ilc-foot img,.ill-logo){
  filter:grayscale(1) brightness(1.1) sepia(1) saturate(1.8) hue-rotate(-4deg) drop-shadow(0 6px 18px rgba(212,175,55,.28))}
#ildash.is-light[data-skin="ai"] .ild-brand img,html.is-light #ilcourse[data-skin="ai"] :is(.ilc-logo img,.ill-drawer-logo img,.ilc-foot img,.ill-logo){
  filter:grayscale(1) brightness(.78) sepia(1) saturate(3.2) hue-rotate(-6deg) drop-shadow(0 4px 12px rgba(138,106,28,.25))}
#ilcourse[data-skin="ai"] .ilc-logo img,#ilcourse[data-skin="ai"] .ill-drawer-logo img{height:34px;width:auto}
#ilcourse[data-skin="ai"] .ilc-foot img{height:30px;width:auto}
#ildash[data-skin="ai"] .ild-brand{padding:6px 0 10px}
#ildash[data-skin="ai"] .ild-brand{--swing:30deg}
#ildash[data-skin="ai"] .ild-brand img{height:50px;width:auto}
#ildash[data-skin="ai"] .ill-logo{height:46px;width:auto}
#ilcourse[data-skin="ai"] .ilc-cover h1{font-size:clamp(38px,5vw,72px);line-height:1.04;max-width:18ch}
#ilcourse[data-skin="ai"] :is(.ill-title,.ill-main h1){font-size:clamp(32px,3.8vw,52px);line-height:1.1}

/* ---------- glass surfaces + gold hairline edge + cursor spotlight ---------- */
#ildash[data-skin="ai"] :is(.ild-rail,.ila-id,.ila-info,.ilc-card,.ilg-tile,.ilg-item,.ilx-card,.ild-card,.ilc-empty,.ild-confirm,.ila-guest,.ile-form,.ill-card){
  position:relative;background:var(--ilm-glass);border-color:transparent;box-shadow:var(--shadow),var(--ilm-hl);
  -webkit-backdrop-filter:blur(7px) saturate(1.2);backdrop-filter:blur(7px) saturate(1.2)}
#ildash[data-skin="ai"] :is(.ild-rail,.ila-id,.ila-info,.ilc-card,.ilg-tile,.ilg-item,.ilx-card,.ild-card,.ilc-empty,.ild-confirm,.ila-guest,.ile-form,.ill-card)::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:3;
  background:var(--ilm-edge);opacity:.55;transition:opacity .45s ease;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
#ildash[data-skin="ai"] :is(.ild-rail,.ila-id,.ila-info,.ilc-card,.ilg-tile,.ilg-item,.ilx-card,.ild-card,.ile-form):hover::after{opacity:1}
/* the light that follows the mouse (position set by skin.js) */
#ildash[data-skin="ai"] :is(.ila-id,.ila-info,.ilc-card,.ilg-tile,.ilg-item,.ilx-card,.ild-card,.ild-rail,.ile-form)::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),var(--ilm-spot),transparent 62%)}
#ildash[data-skin="ai"] :is(.ila-id,.ila-info,.ilc-card,.ilg-tile,.ilg-item,.ilx-card,.ild-card,.ild-rail,.ile-form):hover::before{opacity:1}
#ildash[data-skin="ai"] .ilc-card::before{z-index:1}
#ildash[data-skin="ai"] .ild-rail{border-radius:26px}
#ildash[data-skin="ai"] :is(.ila-id,.ila-info){border-radius:26px}
#ildash[data-skin="ai"] .ilc-card,#ildash[data-skin="ai"] .ilx-card{border-radius:22px;overflow:hidden}

/* ---------- top header of every panel: a gold line that fades out ---------- */
#ildash[data-skin="ai"] :is(.ila-top,.ild-head){border-bottom:0;position:relative;padding-bottom:28px}
#ildash[data-skin="ai"] :is(.ila-top,.ild-head)::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;
  background:linear-gradient(var(--ilm-dir),var(--ilm-g2),rgba(212,175,55,.25) 40%,transparent)}
#ildash[data-skin="ai"] :is(.ila-top,.ild-head)::before{content:"";position:absolute;bottom:-3px;inset-inline-start:0;width:7px;height:7px;transform:rotate(45deg);
  background:var(--metal);box-shadow:0 0 14px rgba(212,175,55,.8)}

/* ---------- side rail ---------- */
#ildash[data-skin="ai"] .ild-me{border-bottom-color:var(--line2)}
#ildash[data-skin="ai"] .ild-avatar{border-radius:16px;font-family:var(--serif);font-size:24px;font-weight:700;color:var(--ilm-btn-ink);
  box-shadow:0 8px 20px rgba(212,175,55,.3)}
#ildash[data-skin="ai"] .ild-avatar::after{background:#5FD8A4;box-shadow:0 0 0 0 rgba(95,216,164,.6);animation:ilmLive 2.8s ease-out infinite}
@keyframes ilmLive{0%{box-shadow:0 0 0 0 rgba(95,216,164,.55)}80%,100%{box-shadow:0 0 0 9px rgba(95,216,164,0)}}
#ildash[data-skin="ai"] .ild-me b{font-size:15.5px}
#ildash[data-skin="ai"] .ild-item{color:var(--muted);transition:color .25s,transform .35s cubic-bezier(.22,1,.36,1)}
#ildash[data-skin="ai"] .ild-item:hover{color:var(--text);transform:translateX(var(--ilm-nudge))}
#ildash[data-skin="ai"] .ild-item svg{transition:filter .3s,stroke .3s,transform .35s cubic-bezier(.22,1,.36,1)}
#ildash[data-skin="ai"] .ild-item:hover svg{stroke:var(--gold);filter:drop-shadow(0 0 7px rgba(212,175,55,.65));transform:scale(1.12)}
#ildash[data-skin="ai"] .ild-item[aria-selected="true"] svg{filter:drop-shadow(0 0 8px rgba(212,175,55,.7))}
#ildash[data-skin="ai"] .ild-pill{border-radius:16px;box-shadow:0 0 28px rgba(212,175,55,.14),inset 0 0 22px rgba(212,175,55,.07)}
#ildash[data-skin="ai"] .ild-sep{background:linear-gradient(var(--ilm-dir),transparent,var(--line),transparent);height:1px}
#ildash[data-skin="ai"] .ild-out:hover{color:#F08A74;background:rgba(240,138,116,.1)}
#ildash[data-skin="ai"] .ild-item em{color:var(--ilm-btn-ink)}

/* ---------- identity card: the ring turns, faster when you point at it ---------- */
#ildash[data-skin="ai"] .ila-id{padding:36px 26px 28px}
#ildash[data-skin="ai"] .ila-ring{width:158px;height:158px;padding:5px;position:relative;
  background:conic-gradient(from var(--ilm-ang),#8A6A1C,#F6E7A6,#D4AF37,#6E5314,#E8CB6A,#8A6A1C);
  box-shadow:0 0 0 1px rgba(212,175,55,.25),0 18px 44px rgba(212,175,55,.22);animation:ilmSpin 14s linear infinite;transition:transform .5s cubic-bezier(.22,1,.36,1)}
#ildash[data-skin="ai"] .ila-id:hover .ila-ring{animation-duration:4.5s;transform:scale(1.04)}
#ildash[data-skin="ai"] .ila-ring::before{content:"";position:absolute;inset:-12px;border-radius:50%;border:1px dashed rgba(212,175,55,.35);animation:ilmSpin2 40s linear infinite}
#ildash[data-skin="ai"] .ila-ring img{border-width:5px}
@keyframes ilmSpin{to{--ilm-ang:360deg}}
@keyframes ilmSpin2{to{transform:rotate(360deg)}}
#ildash[data-skin="ai"] .ila-name{font-family:var(--serif);font-size:32px;font-weight:700;margin-top:24px}
#ildash[data-skin="ai"][dir="rtl"] .ila-name{font-size:24px}
#ildash[data-skin="ai"] .ila-role{letter-spacing:.04em}
#ildash[data-skin="ai"] .ila-stats{border:0;border-radius:18px;gap:10px;overflow:visible;background:none}
#ildash[data-skin="ai"] .ila-stat{border:1px solid var(--line2) !important;border-radius:16px;background:var(--ilm-glass-2);
  transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .3s,box-shadow .3s}
#ildash[data-skin="ai"] .ila-stat:hover{transform:translateY(-4px);border-color:var(--line) !important;box-shadow:0 14px 30px rgba(212,175,55,.14)}
#ildash[data-skin="ai"] .ila-stat b{font-family:var(--serif);font-weight:700;font-size:46px}
#ildash[data-skin="ai"][dir="rtl"] .ila-stat b{font-size:34px}
#ildash[data-skin="ai"] .ila-stat span{color:var(--muted)}

/* ---------- gold corner brackets (added by skin.js); they open up when you point at the card ---------- */
.ilm-corner{position:absolute;width:22px;height:22px;pointer-events:none;z-index:4;opacity:.55;
  transition:width .45s cubic-bezier(.22,1,.36,1),height .45s cubic-bezier(.22,1,.36,1),opacity .4s}
.ilm-corner::before{content:"";position:absolute;inset:0;border:1.5px solid var(--gold);filter:drop-shadow(0 0 5px rgba(212,175,55,.7))}
.ilm-corner.tl{top:12px;left:12px}.ilm-corner.tl::before{border-right:0;border-bottom:0;border-top-left-radius:8px}
.ilm-corner.tr{top:12px;right:12px}.ilm-corner.tr::before{border-left:0;border-bottom:0;border-top-right-radius:8px}
.ilm-corner.bl{bottom:12px;left:12px}.ilm-corner.bl::before{border-right:0;border-top:0;border-bottom-left-radius:8px}
.ilm-corner.br{bottom:12px;right:12px}.ilm-corner.br::before{border-left:0;border-top:0;border-bottom-right-radius:8px}
:is(.ila-id,.ila-info,.ilx-card):hover>.ilm-corner{width:38px;height:38px;opacity:1}

/* ---------- info rows ---------- */
#ildash[data-skin="ai"] .ila-info{padding:14px 32px 32px}
#ildash[data-skin="ai"] .ila-row{border-bottom-color:var(--line2);transition:background .3s,padding .35s cubic-bezier(.22,1,.36,1)}
#ildash[data-skin="ai"] .ila-row:hover{background:linear-gradient(var(--ilm-dir),rgba(212,175,55,.08),transparent 70%);padding-inline-start:14px;border-radius:10px}
#ildash[data-skin="ai"] .ila-row dt svg{filter:drop-shadow(0 0 6px rgba(212,175,55,.4))}
#ildash[data-skin="ai"] .ila-ago{color:var(--goldtx)}

/* ---------- buttons: polished gold with a sweep of light ---------- */
#ildash[data-skin="ai"] .ild-b{position:relative;overflow:hidden;letter-spacing:.02em}
#ildash[data-skin="ai"] .ild-b--gold{background:var(--metal);background-size:200% 100%;color:var(--ilm-btn-ink);font-weight:700;
  box-shadow:0 10px 26px rgba(212,175,55,.28),inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s,background-position .6s}
#ildash[data-skin="ai"] .ild-b--gold::after{content:"";position:absolute;top:0;bottom:0;width:46%;left:-60%;transform:skewX(-22deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);transition:left .7s ease}
#ildash[data-skin="ai"] .ild-b--gold:hover{background-position:100% 0;filter:none;box-shadow:0 16px 36px rgba(212,175,55,.42),inset 0 1px 0 rgba(255,255,255,.5)}
#ildash[data-skin="ai"] .ild-b--gold:hover::after{left:120%}
#ildash[data-skin="ai"] .ild-b--ghost{border-color:var(--line);transition:border-color .3s,box-shadow .3s,transform .3s}
#ildash[data-skin="ai"] .ild-b--ghost:hover{border-color:var(--gold);box-shadow:0 0 22px rgba(212,175,55,.2)}
#ildash[data-skin="ai"] .ild-b{transform:translate(var(--bx,0),var(--by,0))}
#ildash[data-skin="ai"] .ild-b:hover{transform:translate(var(--bx,0),calc(var(--by,0px) - 2px))}

/* ---------- forms ---------- */
#ildash[data-skin="ai"] .ile-field input{background:rgba(5,9,22,.45);border-color:var(--line2);border-radius:14px;transition:border-color .25s,box-shadow .25s,background .25s}
#ildash.is-light[data-skin="ai"] .ile-field input{background:#fff}
#ildash[data-skin="ai"] .ile-field input:hover{border-color:var(--line)}
#ildash[data-skin="ai"] .ile-field input:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(212,175,55,.16),0 0 26px rgba(212,175,55,.12)}

/* ---------- courses ---------- */
#ildash[data-skin="ai"] .ilc-card{transform:perspective(1000px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) translateY(var(--lift,0px));
  transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .4s}
#ildash[data-skin="ai"] .ilc-card:hover{--lift:-8px;border-color:transparent;box-shadow:0 34px 70px rgba(0,0,0,.5),0 0 40px rgba(212,175,55,.12);transition:transform .12s ease-out,box-shadow .4s}
#ildash.is-light[data-skin="ai"] .ilc-card:hover{box-shadow:0 30px 60px rgba(15,23,42,.16),0 0 36px rgba(184,146,42,.16)}
#ildash[data-skin="ai"] .ilc-card:hover .ilc-media img{transform:scale(1.09)}
#ildash[data-skin="ai"] .ilc-title{font-family:var(--serif);font-size:25px;font-weight:700}
#ildash[data-skin="ai"][dir="rtl"] .ilc-title{font-size:19px}
#ildash[data-skin="ai"] .ilc-chip{backdrop-filter:blur(8px);border-color:var(--line)}
#ildash[data-skin="ai"] .ilc-f{transition:border-color .25s,background .25s,color .25s,box-shadow .25s}
#ildash[data-skin="ai"] .ilc-f:hover{border-color:var(--gold);box-shadow:0 0 18px rgba(212,175,55,.16)}
#ildash[data-skin="ai"] .ilc-f[aria-pressed="true"]{background:var(--metal);color:var(--ilm-btn-ink);border-color:transparent}
#ildash[data-skin="ai"] .ilc-search input{background:rgba(5,9,22,.4);border-radius:999px}
#ildash.is-light[data-skin="ai"] .ilc-search input{background:#fff}
#ildash[data-skin="ai"] .ilc-track{background:rgba(229,231,235,.1);height:7px}
#ildash.is-light[data-skin="ai"] .ilc-track{background:rgba(15,23,42,.08)}
#ildash[data-skin="ai"] .ilc-fill{background:var(--metal);background-size:200% 100%;box-shadow:0 0 14px rgba(212,175,55,.5);animation:ilmShine 5s linear infinite alternate}

/* ---------- grades ---------- */
#ildash[data-skin="ai"] .ilg-tile{transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s}
#ildash[data-skin="ai"] .ilg-tile:hover{transform:translateY(-6px);box-shadow:0 26px 54px rgba(212,175,55,.14),var(--shadow)}
#ildash[data-skin="ai"] .ilg-tile b{font-family:var(--serif);font-weight:700;font-size:58px}
#ildash[data-skin="ai"][dir="rtl"] .ilg-tile b{font-size:42px}
#ildash[data-skin="ai"] .ilg-item{border-radius:20px}
#ildash[data-skin="ai"] .ilg-table tbody tr{transition:background .25s}
#ildash[data-skin="ai"] .ilg-table tbody tr:hover{background:linear-gradient(var(--ilm-dir),rgba(212,175,55,.1),transparent)}
#ildash[data-skin="ai"] .ilg-ttl{font-family:var(--serif);font-size:21px;font-weight:700}
#ildash[data-skin="ai"][dir="rtl"] .ilg-ttl{font-size:16px}

/* ---------- certificates ---------- */
#ildash[data-skin="ai"] .ilx-card{transform:perspective(1000px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) translateY(var(--lift,0px));
  transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .4s}
#ildash[data-skin="ai"] .ilx-card:hover{--lift:-8px;box-shadow:0 34px 70px rgba(0,0,0,.45),0 0 40px rgba(212,175,55,.14);transition:transform .12s ease-out,box-shadow .4s}

/* ---------- inbox ---------- */
#ildash[data-skin="ai"] .ili-row{transition:background .3s,transform .35s cubic-bezier(.22,1,.36,1)}
#ildash[data-skin="ai"] .ili-row:hover{background:linear-gradient(var(--ilm-dir),rgba(212,175,55,.1),transparent 80%);transform:translateX(var(--ilm-nudge))}
#ildash[data-skin="ai"] .ili-row.is-unread .ili-dot{background:var(--gold);box-shadow:0 0 12px rgba(212,175,55,.8)}

/* ---------- theme switch ---------- */
#ildash[data-skin="ai"] .ild-theme{background:var(--ilm-glass);backdrop-filter:blur(16px);border:1px solid var(--line);
  width:140px;justify-content:space-between;transition:box-shadow .35s}
#ildash[data-skin="ai"] .ild-theme:hover{box-shadow:0 14px 34px rgba(212,175,55,.22)}
#ildash[data-skin="ai"] .ild-knob{box-shadow:0 0 14px rgba(212,175,55,.6)}

/* ---------- Live demo badge + copyright under the rail ---------- */
#ildash[data-skin="ai"] .ild-copy{opacity:.95}

/* ---------- the course, lesson and quiz pages share the same language ---------- */
#ilcourse[data-skin="ai"] :is(.ilc-card,.ilc-buy,.ilc-ins,.ilc-mod,.ill-table,.ilc-final){background:var(--ilm-glass);border-color:var(--line);box-shadow:var(--shadow),var(--ilm-hl)}
#ilcourse[data-skin="ai"] .ilc-mod{transition:border-color .3s,box-shadow .35s,transform .35s cubic-bezier(.22,1,.36,1)}
#ilcourse[data-skin="ai"] .ilc-mod:hover{border-color:var(--gold);box-shadow:0 20px 44px rgba(212,175,55,.12),var(--shadow);transform:translateY(-2px)}
#ilcourse[data-skin="ai"] .ilc-steps li a{transition:padding .3s cubic-bezier(.22,1,.36,1),color .25s,background .25s}
#ilcourse[data-skin="ai"] .ilc-steps li a:hover{padding-inline-start:calc(var(--ilm-pad,0px) + 8px);background:linear-gradient(var(--ilm-dir),rgba(212,175,55,.1),transparent)}
#ilcourse[data-skin="ai"] :is(.ilc-gold,.ill-next,.ilc-join input[type=submit]){background:var(--metal);background-size:200% 100%;color:var(--ilm-btn-ink);
  box-shadow:0 10px 26px rgba(212,175,55,.28),inset 0 1px 0 rgba(255,255,255,.45);transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s,background-position .6s}
#ilcourse[data-skin="ai"] :is(.ilc-gold,.ill-next):hover{background-position:100% 0;transform:translateY(-3px);box-shadow:0 16px 36px rgba(212,175,55,.42)}
#ilcourse[data-skin="ai"] :is(.ilc-ghost,.ill-prev):hover{border-color:var(--gold);box-shadow:0 0 22px rgba(212,175,55,.2)}
#ilcourse[data-skin="ai"] :is(.ilc-p-bar i,.ill-prog-bar i){background:var(--metal);background-size:200% 100%;box-shadow:0 0 14px rgba(212,175,55,.5);animation:ilmShine 5s linear infinite alternate}
#ilcourse[data-skin="ai"] .ilc-tab-ink{background:var(--metal);box-shadow:0 0 14px rgba(212,175,55,.6)}
#ilcourse[data-skin="ai"] .ill-drawer{background:var(--ilm-glass);backdrop-filter:blur(18px)}
#ilcourse[data-skin="ai"] .ill-tree li a:hover{background:linear-gradient(var(--ilm-dir),rgba(212,175,55,.1),transparent)}
/* the current row has its own gold frame (see "the outline" below); its link draws nothing extra —
   a gold edge on the link itself looked like a text cursor after the title */
#ilcourse[data-skin="ai"] .ill-tree li.is-here a{background:none;box-shadow:none}
#ilcourse[data-skin="ai"] .ill-content :is(h1,h2,h3){font-family:var(--serif)}

/* ---------- Persian: labels were tiny tracked-out capitals; give them a readable size ---------- */
#ildash[data-skin="ai"][dir="rtl"] :is(.ild-lbl,.ilc-lbl,.ild-eyebrow,.ila-stat span,.ilc-chip,.ilg-res),
html[dir="rtl"] #ilcourse[data-skin="ai"] :is(.ilc-lbl,.ilc-eyebrow,.ilc-mod-meta,.ilc-chip){font-size:12.5px;font-weight:500;letter-spacing:0}

/* ---------- entrance: cards rise one after another ---------- */
@keyframes ilmRise{from{opacity:0;transform:translateY(26px) scale(.985)}to{opacity:1;transform:none}}
#ildash[data-skin="ai"] .ild-panel.is-on :is(.ila-id,.ila-info,.ilg-tile,.ilx-card,.ilc-bar-top,.ili-wrap){animation:ilmRise .8s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i,0) * 90ms)}
#ildash[data-skin="ai"] .ild-panel.is-on .ilc-card{animation:ilmRise .8s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i,0) * 90ms)}
#ildash[data-skin="ai"] .ild-panel.is-on .ila-info{--i:1}
#ildash[data-skin="ai"] .ild-panel.is-on .ilg-tile:nth-child(2),#ildash[data-skin="ai"] .ild-panel.is-on .ilc-card:nth-child(2){--i:1}
#ildash[data-skin="ai"] .ild-panel.is-on .ilg-tile:nth-child(3),#ildash[data-skin="ai"] .ild-panel.is-on .ilc-card:nth-child(3){--i:2}
#ildash[data-skin="ai"] .ild-panel.is-on .ilc-card:nth-child(n+4){--i:3}

@media (prefers-reduced-motion:reduce){
  #ildash[data-skin="ai"] *,#ildash[data-skin="ai"] *::before,#ildash[data-skin="ai"] *::after,
  #ilcourse[data-skin="ai"] *,#ilcourse[data-skin="ai"] *::before,#ilcourse[data-skin="ai"] *::after{animation:none !important}
}
@media (max-width:1040px){
  #ildash[data-skin="ai"] .ild-rail{border-radius:22px}
  #ildash[data-skin="ai"] .ild-item:hover{transform:none}
}

/* drawer logo: some air above and below the wordmark */
#ilcourse[data-skin="ai"] .ill-drawer.is-open .ill-drawer-logo{padding:20px 0 16px}
#ilcourse[data-skin="ai"] .ill-drawer-logo img{height:36px}


/* =========================================================================
   v1.1 — modern buttons, sidebar of the lesson page, small repairs
   ========================================================================= */

/* ---------- buttons: a bevelled gold ring around the fill (rounded rectangle, not a pill) ---------- */
#ildash[data-skin="ai"] :is(.ild-b--gold,.ila-editbtn),
#ilcourse[data-skin="ai"] :is(.ilc-gold,.ill-next,.ilc-join input[type=submit],.ilc-join .btn-join,.ill-lock input[type=submit]){
  position:relative;overflow:hidden;isolation:isolate;border:2px solid transparent;border-radius:14px;color:var(--ilm-btn-ink);font-weight:700;letter-spacing:.01em;
  background:var(--ilm-b-fill) padding-box,var(--ilm-b-ring) border-box;background-size:100% 100%;
  box-shadow:0 8px 22px rgba(0,0,0,.28),0 0 0 1px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.65),inset 0 -2px 0 rgba(0,0,0,.14);
  text-shadow:0 1px 0 rgba(255,255,255,.35);
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .35s,filter .35s}
#ildash.is-light[data-skin="ai"] :is(.ild-b--gold,.ila-editbtn),
html.is-light #ilcourse[data-skin="ai"] :is(.ilc-gold,.ill-next,.ilc-join input[type=submit],.ill-lock input[type=submit]){
  box-shadow:0 8px 20px rgba(160,120,20,.26),0 0 0 1px rgba(138,106,28,.18),inset 0 1px 0 rgba(255,255,255,.9),inset 0 -2px 0 rgba(138,106,28,.18);text-shadow:0 1px 0 rgba(255,255,255,.55)}
/* the sweep of light */
#ildash[data-skin="ai"] :is(.ild-b--gold,.ild-b--ghost,.ila-editbtn)::after,
#ilcourse[data-skin="ai"] :is(.ilc-gold,.ilc-ghost,.ill-next,.ill-prev)::after{
  content:"";position:absolute;z-index:1;top:-20%;bottom:-20%;width:42%;left:-70%;transform:skewX(-20deg);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);transition:left .75s cubic-bezier(.22,1,.36,1)}
#ildash[data-skin="ai"] :is(.ild-b--gold,.ild-b--ghost,.ila-editbtn):hover::after,
#ilcourse[data-skin="ai"] :is(.ilc-gold,.ilc-ghost,.ill-next,.ill-prev):hover::after{left:130%}
#ildash[data-skin="ai"] :is(.ild-b--gold,.ila-editbtn):hover,
#ilcourse[data-skin="ai"] :is(.ilc-gold,.ill-next,.ilc-join input[type=submit]):hover{
  transform:translate(var(--bx,0),calc(var(--by,0px) - 3px));filter:saturate(1.12) brightness(1.06);
  box-shadow:0 14px 34px rgba(0,0,0,.34),0 0 0 1px rgba(255,236,160,.35),0 0 30px var(--ilm-b-glow),inset 0 1px 0 rgba(255,255,255,.8),inset 0 -2px 0 rgba(0,0,0,.12);background-position:0 0}
#ildash.is-light[data-skin="ai"] :is(.ild-b--gold,.ila-editbtn):hover,
html.is-light #ilcourse[data-skin="ai"] :is(.ilc-gold,.ill-next,.ilc-join input[type=submit]):hover{
  box-shadow:0 14px 30px rgba(160,120,20,.3),0 0 0 1px rgba(214,172,52,.4),0 0 28px var(--ilm-b-glow),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -2px 0 rgba(138,106,28,.16)}
#ildash[data-skin="ai"] :is(.ild-b--gold,.ila-editbtn):active,
#ilcourse[data-skin="ai"] :is(.ilc-gold,.ill-next):active{transform:translateY(0) scale(.985);transition-duration:.08s}
/* ghost: glass inside a gold ring */
#ildash[data-skin="ai"] .ild-b--ghost,
#ilcourse[data-skin="ai"] :is(.ilc-ghost,.ill-prev){
  position:relative;overflow:hidden;isolation:isolate;border:2px solid transparent;border-radius:14px;color:var(--text);font-weight:600;
  background:var(--ilm-b-glass) padding-box,var(--ilm-b-ring) border-box;
  box-shadow:0 6px 18px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.07);transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .35s}
#ildash.is-light[data-skin="ai"] .ild-b--ghost,html.is-light #ilcourse[data-skin="ai"] :is(.ilc-ghost,.ill-prev){box-shadow:0 6px 16px rgba(120,90,20,.14),inset 0 1px 0 #fff}
#ildash[data-skin="ai"] .ild-b--ghost:hover,#ilcourse[data-skin="ai"] :is(.ilc-ghost,.ill-prev):hover{
  transform:translateY(-3px);border-color:transparent;box-shadow:0 12px 28px rgba(0,0,0,.3),0 0 26px var(--ilm-b-glow)}
/* the radius of every button-like element is the same */
#ilcourse[data-skin="ai"] .ill-nav-b,#ilcourse[data-skin="ai"] .ilc-sm{border-radius:14px}
#ilcourse[data-skin="ai"] .ill-next-f{background:none !important;box-shadow:none !important;border:0;border-radius:14px}
#ilcourse[data-skin="ai"] .ill-nav-b.is-off{opacity:.6}
/* arrows point the way the text runs */
html[dir="rtl"] #ilcourse[data-skin="ai"] .ill-nav-b svg{transform:scaleX(-1)}
/* filters in the Courses slide */
#ildash[data-skin="ai"] .ilc-f[aria-pressed="true"]{background:var(--ilm-b-fill) padding-box,var(--ilm-b-ring) border-box;border:2px solid transparent;color:var(--ilm-btn-ink);border-radius:14px}
#ildash[data-skin="ai"] .ilc-f{border-radius:14px}
#ildash[data-skin="ai"] .ilc-fill,#ilcourse[data-skin="ai"] :is(.ilc-p-bar i,.ill-prog-bar i){background:var(--ilm-b-fill)}
#ildash[data-skin="ai"] .ild-item em{background:var(--ilm-b-fill)}

/* ---------- theme switch: fixed width, so the label never moves the button under the mouse ---------- */
#ilcourse[data-skin="ai"] .ilc-theme{min-width:132px;justify-content:space-between}
#ilcourse[data-skin="ai"] .ilc-theme:hover{transform:none}

/* ---------- light mode: the page stays bright ---------- */
#ildash.is-light[data-skin="ai"] .ila-stat b,#ildash.is-light[data-skin="ai"] .ilg-tile b{filter:saturate(1.1)}

/* ---------- the lesson sidebar: course outline ---------- */
#ilcourse.ill[data-skin="ai"] .ill-drawer.is-open{width:380px;max-width:92vw;border:0;background:var(--ilm-glass);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);
  box-shadow:18px 0 60px rgba(0,0,0,.35);border-inline-end:1px solid var(--line)}
html[dir="rtl"] #ilcourse.ill[data-skin="ai"] .ill-drawer.is-open{box-shadow:-18px 0 60px rgba(0,0,0,.35)}
html.is-light #ilcourse.ill[data-skin="ai"] .ill-drawer.is-open{box-shadow:18px 0 50px rgba(15,23,42,.1)}
#ilcourse.ill[data-skin="ai"] .ill-drawer.is-open::before{content:"";position:absolute;inset-block:0;inset-inline-end:0;width:1px;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--ilm-g2) 25%,rgba(212,175,55,.25) 60%,transparent)}
#ilcourse.ill[data-skin="ai"] .ill-drawer.is-open{border-inline-end:0}
#ilcourse.ill[data-skin="ai"] .ill-drawer-head{padding:18px 22px 16px;border-bottom:1px solid var(--line2);align-items:flex-start}
#ilcourse.ill[data-skin="ai"] .ill-drawer-head .ilc-lbl{color:var(--goldtx);letter-spacing:.22em}
#ilcourse.ill[data-skin="ai"] .ill-drawer-head b{font-family:var(--serif);font-weight:700;font-size:23px;line-height:1.22;margin-top:8px;color:var(--text)}
html[dir="rtl"] #ilcourse.ill[data-skin="ai"] .ill-drawer-head b{font-size:17px;line-height:1.6}
#ilcourse.ill[data-skin="ai"] .ill-d-prog{margin-top:14px;display:flex;align-items:center;gap:10px}
#ilcourse.ill[data-skin="ai"] .ill-d-prog .ill-prog-bar{flex:1;height:6px;border-radius:99px;background:rgba(229,231,235,.1);overflow:hidden}
html.is-light #ilcourse.ill[data-skin="ai"] .ill-d-prog .ill-prog-bar{background:rgba(15,23,42,.09)}
#ilcourse.ill[data-skin="ai"] .ill-d-prog .ill-prog-bar i{display:block;height:100%;border-radius:inherit;box-shadow:0 0 12px rgba(212,175,55,.6)}
#ilcourse.ill[data-skin="ai"] .ill-d-prog em{font-style:normal;font-size:11.5px;color:var(--goldtx);font-weight:600;white-space:nowrap}
/* the open / close button: a gold ring with a cross; closed, it is a gold pill that says "Outline" */
#ilcourse.ill[data-skin="ai"] .ill-x{width:38px;height:38px;border:2px solid transparent !important;color:var(--text);border-radius:12px !important;
  background:var(--ilm-b-glass) padding-box,var(--ilm-b-ring) border-box !important;box-shadow:0 6px 16px rgba(0,0,0,.25);transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s}
#ilcourse.ill[data-skin="ai"] .ill-x svg{stroke:var(--goldtx) !important;width:16px;height:16px}
#ilcourse.ill[data-skin="ai"] .ill-x:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.3),0 0 22px var(--ilm-b-glow);background:var(--ilm-b-glass) padding-box,var(--ilm-b-ring) border-box !important}
#ilcourse.ill[data-skin="ai"] .ill-drawer:not(.is-open) .ill-x{width:auto !important;height:44px !important;padding:0 20px !important;border-radius:14px !important;
  background:var(--ilm-b-fill) padding-box,var(--ilm-b-ring) border-box !important;border-color:transparent !important;
  box-shadow:0 10px 26px rgba(0,0,0,.35),0 0 24px var(--ilm-b-glow) !important}
#ilcourse.ill[data-skin="ai"] .ill-drawer:not(.is-open) .ill-x svg{stroke:var(--ilm-btn-ink) !important}
#ilcourse.ill[data-skin="ai"] .ill-drawer:not(.is-open) .ill-x .ill-x-t{color:var(--ilm-btn-ink);font-weight:700}
#ilcourse.ill[data-skin="ai"] .ill-drawer:not(.is-open) .ill-x:hover{background:var(--ilm-b-fill) padding-box,var(--ilm-b-ring) border-box !important}
/* the outline: modules with gold numbers, topics on a thin gold line */
#ilcourse.ill[data-skin="ai"] .ill-tree{padding:14px 14px 18px;scrollbar-width:thin;scrollbar-color:rgba(212,175,55,.4) transparent}
#ilcourse.ill[data-skin="ai"] .ill-tree li{position:relative;border-radius:14px;transition:background .3s,transform .35s cubic-bezier(.22,1,.36,1)}
#ilcourse.ill[data-skin="ai"] .ill-tree li.is-mod{padding:11px 12px;margin-top:6px}
#ilcourse.ill[data-skin="ai"] .ill-tree li.is-mod>a{font-weight:700;font-size:14.5px;color:var(--text)}
#ilcourse.ill[data-skin="ai"] .ill-tree-no{font-family:var(--serif);font-size:20px;font-weight:700;color:var(--goldtx);min-width:30px;letter-spacing:0;opacity:.95}
#ilcourse.ill[data-skin="ai"] .ill-tree li.is-sub{margin-inline-start:30px;padding-inline-start:24px;padding-inline-end:10px;border-radius:12px}
#ilcourse.ill[data-skin="ai"] .ill-tree li.is-sub::before{content:"";position:absolute;inset-inline-start:8px;top:0;bottom:0;width:1px;background:linear-gradient(180deg,rgba(212,175,55,.45),rgba(212,175,55,.12))}
#ilcourse.ill[data-skin="ai"] .ill-tree li.is-sub::after{content:"";position:absolute;inset-inline-start:5px;top:50%;width:7px;height:7px;margin-top:-3px;border-radius:50%;background:var(--bg);border:1.5px solid rgba(212,175,55,.6)}
#ilcourse.ill[data-skin="ai"] .ill-tree li.is-sub.is-done::after{background:var(--gold);border-color:var(--gold);box-shadow:0 0 8px rgba(212,175,55,.7)}
#ilcourse.ill[data-skin="ai"] .ill-tree li:hover{background:linear-gradient(var(--ilm-dir),rgba(212,175,55,.1),transparent);transform:translateX(var(--ilm-nudge))}
#ilcourse.ill[data-skin="ai"] .ill-tree li.is-here{background:linear-gradient(var(--ilm-dir),rgba(212,175,55,.2),rgba(212,175,55,.03));box-shadow:inset 0 0 0 1px rgba(212,175,55,.38),0 0 26px rgba(212,175,55,.12)}
#ilcourse.ill[data-skin="ai"] .ill-tree li.is-here>a{color:var(--text);font-weight:700}
html[dir="rtl"] #ilcourse.ill[data-skin="ai"] .ill-tree li.is-here{box-shadow:inset 0 0 0 1px rgba(212,175,55,.38),0 0 26px rgba(212,175,55,.12)}
#ilcourse.ill[data-skin="ai"] .ill-tree-tick{width:22px;height:22px;border-radius:50%;border:1.5px solid rgba(212,175,55,.45);display:flex;align-items:center;justify-content:center;flex:none}
#ilcourse.ill[data-skin="ai"] .ill-tree-tick svg{width:12px;height:12px;opacity:0;stroke:var(--ilm-btn-ink) !important;fill:none;stroke-width:3}
#ilcourse.ill[data-skin="ai"] .ill-tree li.is-done>.ill-tree-tick{background:var(--ilm-b-fill);border-color:transparent;box-shadow:0 0 12px rgba(212,175,55,.5)}
#ilcourse.ill[data-skin="ai"] .ill-tree li.is-done>.ill-tree-tick svg{opacity:1}
#ilcourse.ill[data-skin="ai"] .ill-tree li.is-sub .ill-tree-tick{display:none}
#ilcourse.ill[data-skin="ai"] .ill-drawer-brand{padding:6px 14px 18px;border-top:1px solid var(--line2)}
/* the edge handle: always visible, on the border of the sidebar (added by skin.js) */
#ilcourse .ilm-handle{position:fixed;z-index:62;top:50%;width:30px;height:64px;margin-top:-32px;padding:0;border:2px solid transparent;border-radius:12px;cursor:pointer;color:var(--ilm-btn-ink);
  background:var(--ilm-b-fill) padding-box,var(--ilm-b-ring) border-box;box-shadow:0 8px 22px rgba(0,0,0,.35),0 0 18px var(--ilm-b-glow);
  display:flex;align-items:center;justify-content:center;transition:inset-inline-start .35s cubic-bezier(.22,1,.36,1),transform .3s,box-shadow .3s}
#ilcourse .ilm-handle svg{width:16px;height:16px;fill:none;stroke:var(--ilm-btn-ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s}
#ilcourse .ilm-handle:hover{box-shadow:0 10px 26px rgba(0,0,0,.4),0 0 30px var(--ilm-b-glow);transform:scale(1.06)}
#ilcourse .ilm-handle[data-open="1"]{inset-inline-start:calc(380px - 15px)}
#ilcourse .ilm-handle[data-open="0"]{inset-inline-start:0;border-start-start-radius:0;border-end-start-radius:0;border-inline-start:0}
html[dir="rtl"] #ilcourse .ilm-handle svg{transform:scaleX(-1)}
#ilcourse .ilm-handle[data-open="0"] svg{transform:scaleX(-1)}
html[dir="rtl"] #ilcourse .ilm-handle[data-open="0"] svg{transform:none}
@media (max-width:1024px){#ilcourse .ilm-handle{display:none}}

/* ---------- inbox / grades panes keep their own radius ---------- */
#ildash[data-skin="ai"] :is(.ili-list,.ili-msg,.ili-empty){border-radius:22px}

/* closed: only the gold "Outline" pill stays, on a clear background */
#ilcourse.ill[data-skin="ai"] .ill-drawer:not(.is-open){width:170px;background:transparent !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;box-shadow:none !important;border:0 !important}
#ilcourse.ill[data-skin="ai"] .ill-drawer:not(.is-open) .ill-drawer-brand{display:none}