/* ================================================
   TINGLE TEACHING — CUSTOM ICON SPRITE SHEET
   Source : /assets/img/icons.png  (1888×560px)
   Grid   : 10 columns × 3 rows
   Display: 24×24px  (background-size: 240px 72px)
   ================================================ */

.icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url('/assets/img/icons.png');
    background-size: 240px 72px;   /* 10×24 wide, 3×24 tall */
    background-repeat: no-repeat;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Size modifiers */
.icon-sm { width: 16px; height: 16px; background-size: 160px 48px; }
.icon-lg { width: 32px; height: 32px; background-size: 320px 96px; }
.icon-xl { width: 48px; height: 48px; background-size: 480px 144px; }

/* ── Row 0 (y = 0px) ──────────────────────────── */
.icon-star      { background-position:    0px   0px; }
.icon-lightning { background-position:  -24px   0px; }
.icon-location  { background-position:  -48px   0px; }
.icon-trophy    { background-position:  -72px   0px; }
.icon-target    { background-position:  -96px   0px; }
.icon-celebrate { background-position: -120px   0px; }
.icon-rocket    { background-position: -144px   0px; }
.icon-lock      { background-position: -168px   0px; }
.icon-key       { background-position: -192px   0px; }
.icon-settings  { background-position: -216px   0px; }

/* ── Row 1 (y = -24px) ───────────────────────── */
.icon-eye       { background-position:    0px  -24px; }
.icon-trash     { background-position:  -24px  -24px; }
.icon-plus      { background-position:  -48px  -24px; }
.icon-chat      { background-position:  -72px  -24px; }
.icon-search    { background-position:  -96px  -24px; }
.icon-check     { background-position: -120px  -24px; }
.icon-cross     { background-position: -144px  -24px; }
.icon-warning   { background-position: -168px  -24px; }
.icon-book      { background-position: -192px  -24px; }
.icon-bulb      { background-position: -216px  -24px; }

/* ── Row 2 (y = -48px) ───────────────────────── */
.icon-chart     { background-position:    0px  -48px; }
.icon-news      { background-position:  -24px  -48px; }
.icon-grad      { background-position:  -48px  -48px; }
.icon-kid       { background-position:  -72px  -48px; }
.icon-teacher   { background-position:  -96px  -48px; }
.icon-skull     { background-position: -120px  -48px; }
.icon-fire      { background-position: -144px  -48px; }
.icon-health    { background-position: -168px  -48px; }
.icon-refresh   { background-position: -192px  -48px; }
.icon-download  { background-position: -216px  -48px; }