/* ==================================================
   ICON SYSTEM – BASE
================================================== */

.icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;

    /* defaults (override per icon / modifier) */
    --icon-size: 20px;
    --icon-color: currentColor;

    padding-left: calc(var(--icon-size) + 8px);
}

.icon::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;

    width: var(--icon-size);
    height: var(--icon-size);

    background-color: var(--icon-color);

    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;

            mask-repeat: no-repeat;
            mask-position: center;
            mask-size: contain;
}

/* ==================================================
   ICON: CHECK (✔ Verified / Success)
================================================== */

.icon-check::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M7 12l3 3 7-7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M7 12l3 3 7-7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ==================================================
   ICON: INSTANT SCORE (A+)
================================================== */

.icon-score::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M9 15l3-8 3 8' fill='none' stroke='black' stroke-width='2'/%3E%3Cline x1='10.5' y1='12' x2='13.5' y2='12' stroke='black' stroke-width='2'/%3E%3Cline x1='15.5' y1='9' x2='18' y2='9' stroke='black' stroke-width='2'/%3E%3Cline x1='16.75' y1='7.75' x2='16.75' y2='10.25' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M9 15l3-8 3 8' fill='none' stroke='black' stroke-width='2'/%3E%3Cline x1='10.5' y1='12' x2='13.5' y2='12' stroke='black' stroke-width='2'/%3E%3Cline x1='15.5' y1='9' x2='18' y2='9' stroke='black' stroke-width='2'/%3E%3Cline x1='16.75' y1='7.75' x2='16.75' y2='10.25' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
}

/* ==================================================
   ICON: SECTION ANALYSIS (BAR CHART)
================================================== */

.icon-analysis::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cline x1='6' y1='20' x2='6' y2='11' stroke='black' stroke-width='2'/%3E%3Cline x1='12' y1='20' x2='12' y2='7' stroke='black' stroke-width='2'/%3E%3Cline x1='18' y1='20' x2='18' y2='14' stroke='black' stroke-width='2'/%3E%3Cline x1='4' y1='20' x2='20' y2='20' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cline x1='6' y1='20' x2='6' y2='11' stroke='black' stroke-width='2'/%3E%3Cline x1='12' y1='20' x2='12' y2='7' stroke='black' stroke-width='2'/%3E%3Cline x1='18' y1='20' x2='18' y2='14' stroke='black' stroke-width='2'/%3E%3Cline x1='4' y1='20' x2='20' y2='20' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
}

/* ==================================================
   ICON: ANSWER REVIEW (STAR)
================================================== */

.icon-review::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l2.6 5.3 5.9.9-4.2 4.1 1 5.8-5.3-2.8-5.3 2.8 1-5.8-4.2-4.1 5.9-.9z' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l2.6 5.3 5.9.9-4.2 4.1 1 5.8-5.3-2.8-5.3 2.8 1-5.8-4.2-4.1 5.9-.9z' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
}

/* ==================================================
   SIZE MODIFIERS
================================================== */

.icon.sm { --icon-size: 16px; padding-left: 22px; }
.icon.lg { --icon-size: 24px; padding-left: 32px; }

/* ==================================================
   COLOR MODIFIERS
================================================== */

.icon.green  { --icon-color: #6acb2a; }
.icon.blue   { --icon-color: #2563eb; }
.icon.orange { --icon-color: #f97316; }
.icon.gray   { --icon-color: #6b7280; }