/* Illustrated icons (icons.js): menu, home tiles, buttons and messages. */
.amg-art { display: inline-block; width: 1.3em; height: 1.3em; flex: none; vertical-align: -.3em; line-height: 0; }
.amg-art svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 1px 1.5px rgba(10, 20, 60, .28)); }
.amg-art.inl { margin: 0 .12em; }

/* menu */
.navitem .ni-ico[data-amg] { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 13px; background: rgba(255, 255, 255, .11); display: inline-grid; place-items: center; font-size: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); transition: background .15s, transform .15s; }
.navitem .ni-ico[data-amg] .amg-art { width: 29px; height: 29px; }
.navitem:hover .ni-ico[data-amg] { background: rgba(255, 255, 255, .2); transform: translateY(-1px); }
.navitem.active .ni-ico[data-amg] { background: rgba(255, 255, 255, .95); box-shadow: 0 4px 12px rgba(0, 0, 0, .3); }

/* home tiles */
.tile .t-ico[data-amg] { width: 68px; height: 68px; border-radius: 22px; background: var(--tint, #eef3ff); display: grid; place-items: center; font-size: 0; margin-bottom: 14px; box-shadow: inset 0 0 0 1px rgba(20, 40, 100, .06); transition: transform .18s; }
.tile .t-ico[data-amg] .amg-art { width: 46px; height: 46px; }
.tile:hover .t-ico[data-amg] { transform: scale(1.06) rotate(-2deg); }
[data-theme="dark"] .tile .t-ico[data-amg] { background: rgba(255, 255, 255, .09); }

/* banner picture */
.hero .hero-emoji[data-amg] { font-size: 0; opacity: .95; }
.hero .hero-emoji .amg-art { width: 110px; height: 110px; filter: drop-shadow(0 8px 16px rgba(0, 0, 40, .35)); }

/* theme switch, buttons, chips */
.theme-toggle .amg-art { width: 22px; height: 22px; vertical-align: middle; }
.btn .amg-art.inl, .chip .amg-art.inl { width: 1.2em; height: 1.2em; }
h1 .amg-art.inl, h2 .amg-art.inl, h3 .amg-art.inl { width: 1.15em; height: 1.15em; vertical-align: -.2em; }

/* logo in the sidebar and sign-in cards: the full colour badge, no tile behind it */
.brand-badge.brand-logo { background: none; box-shadow: none; padding: 0; width: 52px; height: 52px; flex: 0 0 52px; }
.brand-badge.brand-logo img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .35)); }

/* ------------------------------------------------------------------ design polish */
.sidebar .brand-badge.brand-logo { width: 58px; height: 58px; flex: 0 0 58px; }
.gate-brand .brand-badge.brand-logo, .gate .brand-badge.brand-logo { width: 68px; height: 68px; flex: 0 0 68px; }

/* banner: soft light and a road-stripe accent */
.hero { background-image: radial-gradient(circle at 88% 8%, rgba(255, 255, 255, .22), transparent 42%), radial-gradient(circle at 8% 110%, rgba(255, 210, 63, .28), transparent 40%), linear-gradient(120deg, var(--blue-800), var(--blue-600) 60%, var(--accent)); }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: repeating-linear-gradient(90deg, #ffd23f 0 26px, transparent 26px 44px); opacity: .9; }
.hero h1 { letter-spacing: -.01em; text-shadow: 0 2px 10px rgba(0, 0, 40, .25); }
.hs .n { font-size: 30px; }

/* buttons */
.btn { box-shadow: 0 4px 12px rgba(36, 83, 214, .28); transition: transform .12s, box-shadow .12s, background .15s; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(36, 83, 214, .35); }
.btn:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(36, 83, 214, .3); }
.btn.ghost, .btn.accent { box-shadow: none; }
.btn.accent { box-shadow: 0 4px 12px rgba(0, 175, 211, .32); }

/* cards and tiles */
.card, .tile, .stat, .term, .sign-card { box-shadow: 0 1px 2px rgba(18, 39, 107, .06), 0 10px 26px rgba(18, 39, 107, .08); }
.tile { border-radius: 20px; }
.tile:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(36, 83, 214, .18); border-color: var(--blue-300); }
.tile .t-name { font-size: 16.5px; }
.sign-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(36, 83, 214, .16); }
.section-title { display: flex; align-items: center; gap: 10px; }
.section-title::before { content: ""; width: 5px; height: 16px; border-radius: 3px; background: linear-gradient(180deg, var(--accent), var(--blue-500)); }

/* answer choices: colour coded letters */
.opt { border-radius: 16px; transition: border-color .14s, background .14s, transform .12s, box-shadow .14s; }
.opt:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(36, 83, 214, .12); }
.opt .k { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 11px; font-size: 15px; background: linear-gradient(135deg, #e6eeff, #cddcff); color: var(--blue-700); }
.opt.sel .k { background: linear-gradient(135deg, var(--blue-500), var(--blue-700)); color: #fff; }
.opt.correct .k { background: linear-gradient(135deg, #4fdc8b, #17904f); color: #fff; }
.opt.wrong .k { background: linear-gradient(135deg, #ff8080, #e0303f); color: #fff; }
.opt.correct { box-shadow: 0 6px 18px rgba(29, 185, 84, .16); }
.opt.wrong { box-shadow: 0 6px 18px rgba(229, 72, 77, .14); }
.explain { border-radius: 14px; border-left-width: 5px; }
.q-progress > div { background: linear-gradient(90deg, var(--accent-2), var(--blue-500)); }

/* filters and chips */
.chip { transition: background .14s, transform .12s; }
.chip:hover { transform: translateY(-1px); }
.chip.active { background: linear-gradient(135deg, var(--blue-500), var(--blue-700)); box-shadow: 0 4px 10px rgba(36, 83, 214, .28); }

/* readiness ring */
.ring { box-shadow: 0 6px 16px rgba(29, 185, 84, .18); }

/* menu */
.nav-section { letter-spacing: 1px; padding-top: 16px; }
.navitem { border-radius: 14px; }
.navitem.active { background: linear-gradient(90deg, var(--blue-600), var(--blue-500)); }

/* modals and toasts */
.modal { border-radius: 24px; }
.toast { border-radius: 14px; box-shadow: 0 12px 30px rgba(0, 0, 30, .3); }

@media (max-width: 860px) {
  .tile .t-ico[data-amg] { width: 58px; height: 58px; border-radius: 18px; }
  .tile .t-ico[data-amg] .amg-art { width: 40px; height: 40px; }
}