face-age 2.3.13 → 2.4.2

package/dist/faceage.css

@@ -340,6 +340,10 @@ body {
     width: 82px !important;
 }
 
+.face_slide .swiper-wrapper {
+    height: auto;
+}
+
 .face_slide {
     opacity: 1;
     -webkit-transition: all 0.2s;
@@ -1939,7 +1943,7 @@ body {
 }
 
 .face_age_info .items {
-    max-width: 400px;
+    /* max-width: 400px; */
     margin: 8px auto 0;
     display: flex;
     width: 100%;
@@ -1970,183 +1974,1462 @@ body {
     margin-top: 4px;
 }
 
-.face_age_info button {
-    background: var(--basic_action);
-    border: 0 solid;
-    padding: 12px;
+.face_age_info .items .history_item {
+    flex: 0 0 33.3333%;
+    max-width: 33.3333%;
+    padding: 6px;
+}
+
+.face_age_info .items .history_item .history_meta {
+    font-size: 12px;
+    opacity: 0.7;
+    margin-top: 6px;
+}
+.face_age_info .items .history_item .history_action {
+    margin-top: 10px;
+}
+.face_age_info .items .history_item .history_action .sc-1x1y2bq-3 {
+    padding: 8px 12px;
+}
+
+.face_age_info .items .history_item .history_card_media {
     width: 100%;
-    margin: 21px auto 0;
-    border-radius: 12px;
-    display: block;
-    color: #fff;
-    font-weight: bold;
+    aspect-ratio: 3 / 4;
+    border-radius: 14px;
+    background: #f3f4f6;
+    overflow: hidden;
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
     cursor: pointer;
+    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
+    border: 1px solid rgba(15, 23, 42, 0.08);
+    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
 }
-.face_age_info button.disable {
-    opacity: 0.5;
-    background: #a2a2a2;
+
+.face_age_info .items .history_item .history_card_media:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
+    border-color: rgba(15, 23, 42, 0.18);
 }
 
-.face_age_info button:hover {
-    background: var(--basic_action);
-    opacity: 0.8;
+.face_age_info .items .history_item .history_card_media.history_new_scan_btn {
+    border: 1px dashed var(--basic_action);
 }
-.face_age_info button.disable:hover {
-    opacity: 0.5;
-    background: #a2a2a2;
+
+.history_new_scan_btn {
+    width: 100%;
+    aspect-ratio: 3 / 4;
+    border-radius: 14px;
+    background: transparent;
+    border: 2px dashed var(--basic_action);
+    box-shadow: none;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    color: var(--basic_action);
 }
 
+.history_new_scan_btn:hover {
+    border-color: var(--basic_action);
+    border-style: dashed;
+    color: var(--basic_action);
+    box-shadow: none;
+    transform: translateY(-1px);
+}
 
-.face_age .image_itemReport{
-    width: 34px;
-    height: 34px;
-    display: block;
-    margin: 0 auto;
-    background-size: 34px;
-    background-repeat: no-repeat;
-    background-position: center;
+.history_card_plus {
+    width: 36px;
+    height: 36px;
+    border-radius: 999px;
+    border: 1px dashed var(--basic_action);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 22px;
+    line-height: 1;
+    padding-bottom: 2px;
+    color: var(--basic_action);
 }
 
+.history_card_label {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--basic_action);
+}
 
-.face_age .image_itemReport.acnes{
-    background-image: url('./images/Acnes.svg');
+.face_age_info .items .history_item .history_card_media img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
 }
-.face_age .image_itemReport.eyeBag{
-    background-image: url('./images/EyeBag.svg');
+
+.face_age_info .items .history_item .history_card_badge {
+    position: absolute;
+    left: 6px;
+    bottom: 6px;
+    background: rgba(0, 0, 0, 0.6);
+    color: #fff;
+    font-size: 11px;
+    padding: 4px 8px;
+    border-radius: 999px;
+    backdrop-filter: blur(6px);
 }
-.face_age .image_itemReport.darkCircle{
-    background-image: url('./images/DarkCircle.svg');
+
+.face_age_info .items .history_item .history_card_delete {
+    position: absolute;
+    right: 6px;
+    top: 6px;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 999px;
+    background: rgba(0, 0, 0, 0.6);
+    color: #fff;
+    font-size: 16px;
+    line-height: 26px;
+    text-align: center;
+    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.16);
+    cursor: pointer;
+    user-select: none;
+    backdrop-filter: blur(6px);
 }
-.face_age .image_itemReport.eyeWrinkles{
-    background-image: url('./images/EyeWrinkles.svg');
+
+.face_age_info .items .history_item .history_card_delete:hover {
+    background: rgba(0, 0, 0, 0.7);
 }
-.face_age .image_itemReport.deepWrinkles{
-    background-image: url('./images/DeepWrinkles.svg');
+
+/* History gate — glassmorphism panel */
+.face_age_info.history_gate {
+    position: relative;
+    isolation: isolate;
+    padding: 12px 10px 20px;
+    background:
+        radial-gradient(ellipse 80% 50% at 20% 0%, color-mix(in srgb, var(--basic) 14%, transparent), transparent 55%),
+        radial-gradient(ellipse 70% 45% at 90% 100%, color-mix(in srgb, var(--basic_action) 12%, transparent), transparent 50%),
+        linear-gradient(165deg, color-mix(in srgb, var(--background) 92%, #fff) 0%, color-mix(in srgb, var(--background) 78%, #e8edf8) 100%);
 }
-.face_age .image_itemReport.wrinkles{
-    background-image: url('./images/Wrinkles.svg');
+
+.face_age_info.history_gate::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    background-image:
+        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
+    background-size: 24px 24px;
+    mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 20%, transparent 100%);
+    opacity: 0.45;
 }
-.face_age .image_itemReport.pores{
-    background-image: url('./images/Pores.svg');
+
+.face_age_info.history_gate .history_info_window {
+    position: relative;
+    z-index: 1;
+    width: min(100%, 520px);
+    max-width: 520px;
+    margin: 8px auto 0;
+    padding: 20px 18px 18px;
+    border-radius: 24px;
+    background: rgba(255, 255, 255, 0.42);
+    border: 1px solid rgba(255, 255, 255, 0.72);
+    box-shadow:
+        0 1px 0 rgba(255, 255, 255, 0.85) inset,
+        0 24px 48px rgba(15, 23, 42, 0.1),
+        0 8px 16px rgba(15, 23, 42, 0.06);
+    backdrop-filter: blur(22px) saturate(165%);
+    -webkit-backdrop-filter: blur(22px) saturate(165%);
+    overflow: hidden;
 }
-.face_age .image_itemReport.pigment{
-    background-image: url('./images/Pigment.svg');
+
+.face_age_info.history_gate .history_info_window::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    pointer-events: none;
+    background: linear-gradient(145deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.08) 42%, rgba(255, 255, 255, 0) 100%);
 }
 
-.lbSetf {
-    -webkit-box-pack: center;
-    justify-content: center;
-    padding: 0px;
+.face_age_info.history_gate .history_gate_title {
+    position: relative;
+    z-index: 1;
+    margin-bottom: 6px;
+    padding-bottom: 16px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.55);
 }
-.dZaMnF {
+
+.face_age_info.history_gate .history_gate_header {
     display: flex;
-    gap: 8px;
-    -webkit-box-align: stretch;
-    align-items: stretch;
-    overflow: visible;
-    border-radius: 0px 0px 15px 15px;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+    text-align: center;
 }
 
-.bLwrg {
-    transition-timing-function: ease-out;
-    cursor: pointer;
+.face_age_info.history_gate .history_gate_icon {
+    width: 52px;
+    height: 52px;
     display: flex;
-    -webkit-box-flex: 1;
-    flex-grow: 1;
-    flex-basis: 0px;
-    margin-left: 0px;
-    -webkit-box-pack: center;
-    justify-content: center;
-    -webkit-box-align: center;
     align-items: center;
-    text-align: center;
-    padding: 12px;
-    font-weight: normal;
-    color: var(--color_action);
-    background-color: var(--basic_action);
+    justify-content: center;
+    border-radius: 16px;
+    color: var(--basic_action);
+    background: linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.28));
+    border: 1px solid rgba(255, 255, 255, 0.8);
+    box-shadow:
+        0 1px 0 rgba(255, 255, 255, 0.9) inset,
+        0 10px 24px color-mix(in srgb, var(--basic_action) 18%, transparent);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
 }
 
-.bLwrg:hover {
-    color: var(--color_action);
-    opacity: 0.8;
+.face_age_info.history_gate .history_gate_icon .history_gate_icon_asset {
+    width: 26px;
+    height: 26px;
+    display: block;
+    background: no-repeat center / contain url('./images/history.svg');
 }
 
-.bLwrg:first-of-type {
-    margin-left: 0px;
+.face_age_info.history_gate .history_gate_title h2.bt_title {
+    margin: 0;
+    font-size: 1.2rem;
+    font-weight: 700;
+    letter-spacing: -0.02em;
+    line-height: 1.25;
+    color: var(--color);
 }
 
-.modal_window {
-    background: #fff;
-    width: 80%;
-    max-width: 500px;
-    margin: 0 auto;
-    border-radius: 15px;
-    font-size: 14px;
+.face_age_info.history_gate .history_gate_title p.bt_description {
+    margin: 8px 0 0;
+    margin-left: auto;
+    margin-right: auto;
+    font-size: 0.8125rem;
+    line-height: 1.45;
+    opacity: 0.72;
+    color: var(--color);
+}
+
+.face_age_info.history_gate .history_privacy_notice {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    position: relative;
+    z-index: 1;
+    margin: 16px 2px;
+    padding: 10px 12px;
+    border-radius: 14px;
+    font-size: 0.75rem;
+    line-height: 1.5;
+    color: #0b3f63;
+    background: linear-gradient(150deg, #e6edf7 0%, #dce7f5 100%);
+    border: 1px solid #c7d5e8;
+    box-shadow:
+        0 1px 0 rgba(255, 255, 255, 0.55) inset,
+        0 4px 12px rgba(18, 59, 92, 0.08);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
     text-align: left;
-    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 14px 3px;
-    padding: 8px;
+    direction: ltr;
 }
 
-.modal_window .title {
-    margin-bottom: 10px;
-    padding: 10px 15px 5px;
-    font-weight: bold;
+.face_age_info.history_gate .history_privacy_notice .history_privacy_notice_icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    margin-top: 1px;
 }
 
-.modal_window .body {
-    padding: 2px 15px 15px;
-    overflow-y: auto;
-    max-height: 83%;
+.face_age_info.history_gate .history_privacy_notice .history_privacy_notice_icon svg {
+    width: 20px;
+    height: 20px;
 }
 
-[dir="rtl"] .modal_window .title
-, [dir="rtl"] .modal_window .body{
-    text-align:right;
+.face_age_info.history_gate .history_privacy_notice .history_privacy_notice_text {
+    flex: 1 1 auto;
 }
 
-.form_window {
-    background: #fff;
-    width: 80%;
-    max-width: 500px;
-    margin: 25px auto;
-    border-radius: 15px;
-    font-size: 14px;
-    text-align: left;
-    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 14px 3px;
+[dir="rtl"] .face_age_info.history_gate .history_privacy_notice {
+    text-align: right;
+    direction: rtl;
 }
 
-.form_window .title {
-    /* padding: 24px; */
-    font-weight: bold;
+.face_age_info.history_gate .history_gate_items {
+    position: relative;
+    z-index: 1;
+    margin: 4px -4px 0;
+    padding: 4px 2px 0;
+    gap: 2px 0;
 }
 
-.form_window .elements {
-    margin-bottom: 10px;
-    padding: 12px;
+.face_age_info.history_gate .history_gate_items .history_item {
+    padding: 8px;
 }
 
-.form_window .body {
-    padding: 2px 15px 19px;
+.face_age_info.history_gate .history_gate_items .history_card_media {
+    border-radius: 18px;
+    background: linear-gradient(160deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.12));
+    border: 1px solid rgba(255, 255, 255, 0.72);
+    box-shadow:
+        0 1px 0 rgba(255, 255, 255, 0.75) inset,
+        0 14px 28px rgba(15, 23, 42, 0.12);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
 }
 
-.face_age_form.widget .form_window {
-    box-shadow: none;
-    width: 100%;
+.face_age_info.history_gate .history_gate_items .history_card_media::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    pointer-events: none;
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(15, 23, 42, 0.22) 100%);
+    opacity: 0.35;
+    transition: opacity 0.22s ease;
 }
 
-.face_age_form.widget .action {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
+.face_age_info.history_gate .history_gate_items .history_card_media img {
+    position: relative;
+    z-index: 0;
 }
 
-.face_age_form .elements .action {
-    margin-top: 24px !important;
+.face_age_info.history_gate .history_gate_items .history_card_media:hover {
+    transform: translateY(-3px) scale(1.01);
+    border-color: rgba(255, 255, 255, 0.95);
+    box-shadow:
+        0 1px 0 rgba(255, 255, 255, 0.85) inset,
+        0 20px 36px rgba(15, 23, 42, 0.16);
 }
 
-.info_window {
-    background: #fff;
+.face_age_info.history_gate .history_gate_items .history_card_media:hover::after {
+    opacity: 0.22;
+}
+
+.face_age_info.history_gate .history_gate_items .history_card_media.history_new_scan_btn,
+.face_age_info.history_gate .history_new_scan_btn {
+    background: linear-gradient(155deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.12));
+    border: 1.5px dashed color-mix(in srgb, var(--basic_action) 55%, transparent);
+    box-shadow:
+        0 1px 0 rgba(255, 255, 255, 0.7) inset,
+        0 10px 24px color-mix(in srgb, var(--basic_action) 12%, transparent);
+}
+
+.face_age_info.history_gate .history_gate_items .history_card_media.history_new_scan_btn::after,
+.face_age_info.history_gate .history_new_scan_btn::after {
+    display: none;
+}
+
+.face_age_info.history_gate .history_new_scan_btn:hover {
+    border-color: var(--basic_action);
+    background: linear-gradient(155deg, rgba(255, 255, 255, 0.68), color-mix(in srgb, var(--basic_action) 8%, transparent));
+    box-shadow:
+        0 1px 0 rgba(255, 255, 255, 0.85) inset,
+        0 16px 32px color-mix(in srgb, var(--basic_action) 18%, transparent);
+}
+
+.face_age_info.history_gate .history_card_plus {
+    width: 42px;
+    height: 42px;
+    border-radius: 14px;
+    border: 1px solid rgba(255, 255, 255, 0.75);
+    background: linear-gradient(145deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.2));
+    box-shadow: 0 8px 18px color-mix(in srgb, var(--basic_action) 16%, transparent);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    font-size: 24px;
+}
+
+.face_age_info.history_gate .history_card_label {
+    font-size: 0.8125rem;
+    font-weight: 600;
+    letter-spacing: 0.01em;
+}
+
+.face_age_info.history_gate .history_card_badge {
+    z-index: 2;
+    left: 8px;
+    bottom: 8px;
+    padding: 5px 10px;
+    font-size: 0.6875rem;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    background: rgba(15, 23, 42, 0.42);
+    border: 1px solid rgba(255, 255, 255, 0.28);
+    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
+    backdrop-filter: blur(12px) saturate(140%);
+    -webkit-backdrop-filter: blur(12px) saturate(140%);
+}
+
+.face_age_info.history_gate .history_card_delete {
+    z-index: 2;
+    right: 8px;
+    top: 8px;
+    width: 30px;
+    height: 30px;
+    background: rgba(15, 23, 42, 0.38);
+    border: 1px solid rgba(255, 255, 255, 0.28);
+    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.2);
+    backdrop-filter: blur(12px) saturate(140%);
+    -webkit-backdrop-filter: blur(12px) saturate(140%);
+    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.face_age_info.history_gate .history_card_delete:hover {
+    background: rgba(220, 38, 38, 0.72);
+    transform: scale(1.05);
+    box-shadow: 0 8px 18px rgba(220, 38, 38, 0.28);
+}
+
+.face_age_info.widget.history_gate .history_info_window {
+    width: 100%;
+    max-width: none;
+    margin-top: 0;
+    border-radius: 20px 20px 0 0;
+    box-shadow:
+        0 1px 0 rgba(255, 255, 255, 0.85) inset,
+        0 -8px 32px rgba(15, 23, 42, 0.08);
+}
+
+@media (max-width: 768px) {
+    .face_age_info.history_gate {
+        padding: 8px 6px 16px;
+    }
+
+    .face_age_info.history_gate .history_info_window {
+        width: 100%;
+        padding: 16px 14px 14px;
+        border-radius: 20px;
+    }
+
+    .face_age_info.history_gate .history_gate_items .history_item {
+        flex: 0 0 50%;
+        max-width: 50%;
+    }
+}
+
+/* History detail page (result + routines + products) */
+#faceAge-module-body.section:has(.history-detail-page),
+#faceAge-module-body.widget:has(.history-detail-page),
+#faceAge-module-body.modal:has(.history-detail-page) {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+    overflow: hidden;
+}
+
+.history-detail-page {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 0%;
+    align-self: stretch;
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+    overflow: hidden;
+    --history-detail-gutter: 16px;
+    --skin-status-good: #22C55E;
+    --skin-status-fair: #F59E0B;
+    --skin-status-bad: #EF4444;
+    background:
+        radial-gradient(ellipse 80% 50% at 20% 0%, color-mix(in srgb, var(--basic) 10%, transparent), transparent 55%),
+        radial-gradient(ellipse 70% 45% at 90% 100%, color-mix(in srgb, var(--basic_action) 8%, transparent), transparent 50%),
+        linear-gradient(165deg, color-mix(in srgb, var(--background) 94%, #fff) 0%, var(--background) 100%);
+}
+
+.history-detail-page .history-detail-back {
+    position: sticky;
+    top: 0;
+    z-index: 20;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 16px;
+    border-bottom: 1px solid color-mix(in srgb, var(--divider) 80%, transparent);
+    background: color-mix(in srgb, var(--background) 88%, transparent);
+    backdrop-filter: blur(14px) saturate(140%);
+    -webkit-backdrop-filter: blur(14px) saturate(140%);
+}
+
+.history-detail-page .history-detail-back .goBack {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    background: color-mix(in srgb, var(--background) 70%, #fff);
+    border: 1px solid color-mix(in srgb, var(--divider) 70%, transparent);
+    border-radius: 999px;
+    padding: 8px 14px 8px 10px;
+    margin: 0;
+    width: auto;
+    cursor: pointer;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--color);
+    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
+    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
+}
+
+.history-detail-page .history-detail-back .goBack:hover {
+    background: #fff;
+    border-color: color-mix(in srgb, var(--basic) 24%, var(--divider));
+    transform: translateY(-1px);
+}
+
+.history-detail-page .history-detail-back-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border-radius: 999px;
+    color: var(--basic_action);
+    background: color-mix(in srgb, var(--basic_action) 10%, transparent);
+}
+
+[dir="rtl"] .history-detail-page .history-detail-back-icon svg {
+    transform: rotate(180deg);
+}
+
+.history-detail-page .history-detail-time {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    display: inline-flex;
+    padding: 5px 12px;
+    font-size: 0.6875rem;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--basic) 12%, #fff);
+    border: 1px solid color-mix(in srgb, var(--basic) 18%, transparent);
+    color: var(--color);
+    box-shadow: 0 4px 12px color-mix(in srgb, var(--basic) 10%, transparent);
+}
+
+.history-detail-page .history-detail-back-actions {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.history-detail-page .history-detail-problems-sticky-sentinel {
+    height: 1px;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    pointer-events: none;
+    visibility: hidden;
+}
+
+.history-detail-page .history-detail-problems-header {
+    --problems-stuck-ease: cubic-bezier(0.22, 1, 0.36, 1);
+    --problems-stuck-duration: 0.38s;
+    position: sticky;
+    top: 0;
+    z-index: 15;
+    display: flex;
+    justify-content: center;
+    flex: 0 0 auto;
+    width: 100%;
+    margin: 12px 0 4px;
+    padding: 0;
+    box-sizing: border-box;
+    transition: margin var(--problems-stuck-duration) var(--problems-stuck-ease);
+}
+
+.history-detail-page .history-detail-problems-header .face_slide {
+    margin: 0 auto !important;
+    position: static !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    box-sizing: border-box;
+    padding: 10px 12px !important;
+    border-radius: 20px !important;
+    background: linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.34)) !important;
+    border: 1px solid rgba(255, 255, 255, 0.78) !important;
+    box-shadow:
+        0 1px 0 rgba(255, 255, 255, 0.85) inset,
+        0 10px 24px rgba(15, 23, 42, 0.08) !important;
+    backdrop-filter: blur(12px) saturate(150%) !important;
+    -webkit-backdrop-filter: blur(12px) saturate(150%) !important;
+    transform-origin: top center;
+    will-change: max-width, padding, border-radius;
+    transition:
+        padding var(--problems-stuck-duration) var(--problems-stuck-ease),
+        border-radius var(--problems-stuck-duration) var(--problems-stuck-ease),
+        box-shadow var(--problems-stuck-duration) var(--problems-stuck-ease),
+        width var(--problems-stuck-duration) var(--problems-stuck-ease),
+        max-width var(--problems-stuck-duration) var(--problems-stuck-ease),
+        margin var(--problems-stuck-duration) var(--problems-stuck-ease);
+}
+
+.history-detail-page .history-detail-problems-header .point_analysis .count_box {
+    width: 50px;
+    height: 50px;
+    border: 0;
+    box-shadow:
+        0 1px 2px rgba(15, 23, 42, 0.04),
+        0 4px 12px rgba(15, 23, 42, 0.08),
+        0 10px 24px rgba(15, 23, 42, 0.06);
+    transition:
+        box-shadow var(--problems-stuck-duration) var(--problems-stuck-ease),
+        background var(--problems-stuck-duration) var(--problems-stuck-ease),
+        width var(--problems-stuck-duration) var(--problems-stuck-ease),
+        height var(--problems-stuck-duration) var(--problems-stuck-ease),
+        margin var(--problems-stuck-duration) var(--problems-stuck-ease);
+}
+
+.history-detail-page .history-detail-problems-header .point_analysis .progress-container,
+.history-detail-page .history-detail-problems-header .point_analysis .MuiCircularProgress-svg {
+    width: 50px;
+    height: 50px;
+    transition:
+        width var(--problems-stuck-duration) var(--problems-stuck-ease),
+        height var(--problems-stuck-duration) var(--problems-stuck-ease);
+}
+
+.history-detail-page .history-detail-problems-header .point_analysis .label_box,
+.history-detail-page .history-detail-problems-header .point_analysis .progress-label,
+.history-detail-page .history-detail-problems-header .skin_info_ico,
+.history-detail-page .history-detail-problems-header .skin_info_ico svg {
+    transition:
+        font-size var(--problems-stuck-duration) var(--problems-stuck-ease),
+        width var(--problems-stuck-duration) var(--problems-stuck-ease),
+        height var(--problems-stuck-duration) var(--problems-stuck-ease),
+        margin var(--problems-stuck-duration) var(--problems-stuck-ease),
+        line-height var(--problems-stuck-duration) var(--problems-stuck-ease);
+}
+
+.history-detail-page .history-detail-problems-header .face_slide .swiper-slide {
+    width: 82px !important;
+    transition: width var(--problems-stuck-duration) var(--problems-stuck-ease);
+}
+
+.history-detail-page .history-detail-problems-header .face_slide .swiper-button-next,
+.history-detail-page .history-detail-problems-header .face_slide .swiper-button-prev {
+    width: 44px;
+    height: 44px;
+    margin-top: -22px;
+    transition:
+        opacity 0.2s ease,
+        width var(--problems-stuck-duration) var(--problems-stuck-ease),
+        height var(--problems-stuck-duration) var(--problems-stuck-ease),
+        margin-top var(--problems-stuck-duration) var(--problems-stuck-ease);
+}
+
+.history-detail-page .history-detail-problems-header .face_slide .swiper-button-next:after,
+.history-detail-page .history-detail-problems-header .face_slide .swiper-button-prev:after {
+    font-size: 26px;
+    transition: font-size var(--problems-stuck-duration) var(--problems-stuck-ease);
+}
+
+/* Compact sticky mode */
+.history-detail-page .history-detail-problems-header--stuck {
+    margin-top: 0;
+    margin-bottom: 2px;
+}
+
+.history-detail-page .history-detail-problems-header--stuck .face_slide {
+    width: 100% !important;
+    max-width: 570px !important;
+    padding: 5px 10px !important;
+    border-radius: 14px !important;
+    box-shadow:
+        0 1px 0 rgba(255, 255, 255, 0.85) inset,
+        0 6px 16px rgba(15, 23, 42, 0.1) !important;
+}
+
+.history-detail-page .history-detail-problems-header--stuck .face_slide .swiper-slide {
+    width: 62px !important;
+}
+
+.history-detail-page .history-detail-problems-header--stuck .point_analysis .count_box {
+    width: 34px;
+    height: 34px;
+    margin-bottom: 1px;
+    box-shadow:
+        0 1px 2px rgba(15, 23, 42, 0.05),
+        0 3px 10px rgba(15, 23, 42, 0.08);
+}
+
+.history-detail-page .history-detail-problems-header--stuck .point_analysis .progress-container,
+.history-detail-page .history-detail-problems-header--stuck .point_analysis .MuiCircularProgress-svg {
+    width: 34px;
+    height: 34px;
+}
+
+.history-detail-page .history-detail-problems-header--stuck .point_analysis .progress-label {
+    font-size: 0.72em;
+}
+
+.history-detail-page .history-detail-problems-header--stuck .point_analysis .label_box {
+    font-size: 0.5625rem;
+    line-height: 1.15;
+}
+
+.history-detail-page .history-detail-problems-header--stuck .skin_info_ico {
+    width: 20px;
+    height: 20px;
+}
+
+.history-detail-page .history-detail-problems-header--stuck .skin_info_ico svg {
+    width: 20px;
+    height: 20px;
+    margin-top: 1px;
+}
+
+.history-detail-page .history-detail-problems-header--stuck .face_slide .swiper-button-next,
+.history-detail-page .history-detail-problems-header--stuck .face_slide .swiper-button-prev {
+    width: 22px;
+    height: 22px;
+    margin-top: -11px;
+}
+
+.history-detail-page .history-detail-problems-header--stuck .face_slide .swiper-button-next:after,
+.history-detail-page .history-detail-problems-header--stuck .face_slide .swiper-button-prev:after {
+    font-size: 14px;
+}
+
+.history-detail-page .history-detail-problems-header .point_analysis:not(.active) .count_box {
+    background: #ffffff !important;
+}
+
+.history-detail-page .history-detail-problems-header .point_analysis.active .count_box {
+    box-shadow:
+        0 2px 4px rgba(15, 23, 42, 0.06),
+        0 8px 18px rgba(15, 23, 42, 0.1),
+        0 14px 32px rgba(15, 23, 42, 0.08);
+}
+
+.history-detail-page .history-detail-problems-header .point_analysis.skin_info .count_box svg path {
+    fill: var(--basic_action);
+}
+
+.history-detail-page .history-detail-problems-header .point_analysis.skin_info.active .count_box {
+    background: var(--basic_action) !important;
+}
+
+.history-detail-page .history-detail-problems-header .point_analysis.skin_info.active .count_box svg path {
+    fill: #fff;
+}
+
+.history-detail-page .history-detail-problems-header .point_analysis .progress-label {
+    text-shadow: none;
+}
+
+.history-detail-page .history-detail-problems-header .point_analysis .label_box {
+    color: #1d1d1d;
+    text-shadow: none;
+    font-size: 0.6875rem;
+    font-weight: 600;
+}
+
+.history-detail-page .history-detail-problems-header .swiper-button-next,
+.history-detail-page .history-detail-problems-header .swiper-button-prev {
+    opacity: 0;
+    transition: opacity 0.2s ease;
+}
+
+.history-detail-page .history-detail-problems-header .face_slide:hover .swiper-button-next,
+.history-detail-page .history-detail-problems-header .face_slide:hover .swiper-button-prev {
+    opacity: 1;
+}
+
+.history-detail-page .history-detail-content {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-gutter: stable;
+    padding: 8px var(--history-detail-gutter) 28px;
+    box-sizing: border-box;
+}
+
+.history-detail-page .history-detail-section {
+    margin-bottom: 20px;
+}
+
+.history-detail-page .history-detail-result {
+    display: flex;
+    justify-content: center;
+    padding: 8px 0 4px;
+}
+
+.history-detail-page .history-detail-result-layout {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    align-items: stretch;
+    gap: 12px;
+    width: 100%;
+    max-width: 572px;
+    margin: 0 auto;
+}
+
+/* Center face_age when the summary column is not rendered */
+.history-detail-page .history-detail-result-layout:not(:has(.history-detail-summary-row)) {
+    grid-template-columns: minmax(0, 1fr);
+    justify-items: center;
+    max-width: 280px;
+}
+
+.history-detail-page .history-detail-result .face_age {
+    width: 100%;
+    max-width: none;
+    flex: none;
+    min-height: 0;
+    display: flex;
+}
+
+.history-detail-page .history-detail-summary-row {
+    display: grid;
+    grid-auto-rows: 1fr;
+    gap: 10px;
+    width: 100%;
+    max-width: none;
+    flex: none;
+    min-height: 0;
+    height: 100%;
+}
+
+.history-detail-page .history-detail-summary-card {
+    position: relative;
+    border-radius: 18px;
+    min-height: 0;
+    padding: 0;
+    overflow: hidden;
+    background: transparent;
+    border: 0;
+    box-shadow: none;
+}
+
+.history-detail-page .history-detail-summary-card-inner {
+    position: relative;
+    z-index: 1;
+    height: 100%;
+    padding: 14px 12px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    border-radius: 18px;
+    background:
+        linear-gradient(155deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.42) 48%, rgba(255, 255, 255, 0.28) 100%);
+    border: 1px solid rgba(255, 255, 255, 0.9);
+    box-shadow:
+        0 1px 0 rgba(255, 255, 255, 0.95) inset,
+        0 12px 28px rgba(15, 23, 42, 0.1);
+    backdrop-filter: blur(16px) saturate(165%);
+    -webkit-backdrop-filter: blur(16px) saturate(165%);
+}
+
+.history-detail-page .history-detail-summary-card::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: 18px;
+    padding: 1px;
+    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), color-mix(in srgb, var(--basic) 22%, transparent));
+    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+    pointer-events: none;
+}
+
+.history-detail-page .history-detail-summary-age::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 16px;
+    right: 16px;
+    height: 3px;
+    border-radius: 0 0 6px 6px;
+    background: linear-gradient(90deg, var(--basic_action), color-mix(in srgb, var(--basic_action) 55%, #fff));
+    z-index: 2;
+}
+
+.history-detail-page .history-detail-summary-health::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 16px;
+    right: 16px;
+    height: 3px;
+    border-radius: 0 0 6px 6px;
+    background: linear-gradient(90deg, var(--accepted_status), color-mix(in srgb, var(--accepted_status) 55%, #fff));
+    z-index: 2;
+}
+
+.history-detail-page .history-detail-summary-status-good::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 16px;
+    right: 16px;
+    height: 3px;
+    border-radius: 0 0 6px 6px;
+    background: linear-gradient(90deg, var(--skin-status-good), color-mix(in srgb, var(--skin-status-good) 55%, #fff));
+    z-index: 2;
+}
+
+.history-detail-page .history-detail-summary-status-fair::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 16px;
+    right: 16px;
+    height: 3px;
+    border-radius: 0 0 6px 6px;
+    background: linear-gradient(90deg, var(--skin-status-fair), color-mix(in srgb, var(--skin-status-fair) 55%, #fff));
+    z-index: 2;
+}
+
+.history-detail-page .history-detail-summary-status-bad::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 16px;
+    right: 16px;
+    height: 3px;
+    border-radius: 0 0 6px 6px;
+    background: linear-gradient(90deg, var(--skin-status-bad), color-mix(in srgb, var(--skin-status-bad) 55%, #fff));
+    z-index: 2;
+}
+
+.history-detail-page .history-detail-summary-label {
+    font-size: 0.625rem;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    font-weight: 700;
+    color: color-mix(in srgb, var(--color) 52%, transparent);
+}
+
+.history-detail-page .history-detail-summary-value {
+    margin-top: 6px;
+    font-size: clamp(1.5rem, 4.8vw, 1.85rem);
+    font-weight: 800;
+    line-height: 1.1;
+    letter-spacing: -0.02em;
+}
+
+.history-detail-page .history-detail-summary-health .history-detail-summary-value {
+    color: var(--accepted_status);
+}
+
+.history-detail-page .history-detail-summary-age .history-detail-summary-value {
+    color: var(--basic_action);
+}
+
+.history-detail-page .history-detail-summary-status-good .history-detail-summary-value {
+    color: var(--skin-status-good);
+}
+
+.history-detail-page .history-detail-summary-status-fair .history-detail-summary-value {
+    color: var(--skin-status-fair);
+}
+
+.history-detail-page .history-detail-summary-status-bad .history-detail-summary-value {
+    color: var(--skin-status-bad);
+}
+
+.history-detail-page .history-detail-analyzer {
+    width: 100%;
+    max-width: none;
+    aspect-ratio: 3 / 5;
+    height: auto;
+    margin: 0;
+    border-radius: 22px;
+    overflow: hidden;
+    background: #0f172a;
+    border: 1px solid rgba(255, 255, 255, 0.72);
+    box-shadow:
+        0 1px 0 rgba(255, 255, 255, 0.75) inset,
+        0 20px 40px rgba(15, 23, 42, 0.16),
+        0 0 0 1px color-mix(in srgb, var(--basic) 8%, transparent);
+}
+
+.history-detail-page .history-detail-analyzer .imageSubmit,
+.history-detail-page .history-detail-analyzer .imageLoad,
+.history-detail-page .history-detail-analyzer .imageLoad .fix,
+.history-detail-page .history-detail-analyzer .imageLoad .fix > div {
+    height: 100%;
+}
+
+.history-detail-page .history-detail-analyzer .imageSubmit canvas {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.history-detail-page .history-detail-analyzer .infoRepetition {
+    top: 10px !important;
+    right: 10px !important;
+    background: rgba(255, 255, 255, 0.92) !important;
+    border: 1px solid rgba(255, 255, 255, 0.8);
+    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);
+}
+
+.history-detail-page .history-detail-analyzer .title_point_select {
+    top: 10px;
+    font-size: 0.75rem;
+    font-weight: 600;
+    letter-spacing: 0.01em;
+    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
+}
+
+.history-detail-page .history-detail-tabs {
+    width: 100%;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+.history-detail-page .history-detail-tabs-header {
+    display: flex;
+    width: fit-content;
+    max-width: 100%;
+    gap: 4px;
+    margin: 4px auto 16px;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    padding: 4px;
+    border-radius: 16px;
+    background: color-mix(in srgb, var(--divider) 42%, transparent);
+    border: 1px solid color-mix(in srgb, var(--divider) 65%, transparent);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
+}
+
+.history-detail-page .history-detail-tab-active-pill {
+    position: absolute;
+    left: 0;
+    top: 4px;
+    bottom: 4px;
+    width: 0;
+    border-radius: 12px;
+    background: #fff;
+    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.1);
+    pointer-events: none;
+}
+
+.history-detail-page .history-detail-tab-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    border: 0;
+    border-radius: 12px;
+    background: transparent;
+    position: relative;
+    z-index: 1;
+    padding: 9px 16px;
+    font-size: 0.875rem;
+    font-weight: 600;
+    cursor: pointer;
+    color: color-mix(in srgb, var(--color) 58%, transparent);
+    transition: color 0.2s ease;
+}
+
+.history-detail-page .history-detail-tab-btn svg {
+    width: 20px;
+    height: 20px;
+    flex: 0 0 auto;
+}
+
+.history-detail-page .history-detail-tab-btn.is-active {
+    color: var(--color);
+}
+
+.history-detail-page .history-detail-tabs-body {
+    border-radius: 20px;
+    overflow: visible;
+    width: 100%;
+    box-sizing: border-box;
+    background: rgba(255, 255, 255, 0.55);
+    border: 1px solid rgba(255, 255, 255, 0.78);
+    box-shadow:
+        0 1px 0 rgba(255, 255, 255, 0.85) inset,
+        0 14px 30px rgba(15, 23, 42, 0.08);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+}
+
+.history-detail-page .history-detail-embed .recommendation_products,
+.history-detail-page .history-detail-embed .routines_products {
+    background: transparent !important;
+    min-height: auto !important;
+}
+
+.history-detail-page .history-detail-embed .recommendation_modal_window {
+    background: transparent;
+    box-shadow: none;
+    height: auto !important;
+    max-height: none !important;
+    overflow: visible !important;
+}
+
+.history-detail-page .history-detail-embed .header_tools {
+    display: none !important;
+}
+
+.history-detail-page .history-detail-products-panel .show_routine {
+    display: none !important;
+}
+
+.history-detail-page .history-detail-embed .recommendation_modal_window .body {
+    padding: 12px 12px 16px;
+}
+
+.history-detail-page .history-detail-embed .header_product_box {
+    margin-bottom: 8px;
+}
+
+.history-detail-page .history-detail-embed .header_product {
+    gap: 12px;
+}
+
+.history-detail-page .history-detail-embed .header_product .title {
+    font-size: 1rem;
+    font-weight: 700;
+    letter-spacing: -0.02em;
+}
+
+.history-detail-page .history-detail-embed .header_product .description {
+    font-size: 0.8125rem;
+    line-height: 1.45;
+    opacity: 0.72;
+}
+
+.history-detail-page .history-detail-embed .products,
+.history-detail-page .history-detail-embed .routine {
+    padding-top: 4px;
+}
+
+.history-detail-page .history-detail-embed .skin_report_embed {
+    background: transparent;
+    width: 100%;
+}
+
+.history-detail-page .history-detail-embed .skin_report_embed_window .body {
+    padding: 12px 12px 16px;
+    text-align: left;
+}
+
+.history-detail-page .history-detail-embed .skin_report_embed .chart {
+    width: 100% !important;
+    max-width: 420px;
+    margin: 0 auto;
+}
+
+.history-detail-page .history-detail-embed .problem_items {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 20px;
+    margin-top: 16px;
+}
+
+.history-detail-page .history-detail-embed .problem_items > div {
+    min-width: 0;
+}
+
+.history-detail-page .history-detail-embed .problem_items .box {
+    margin: 0;
+    height: 100%;
+}
+
+@media (min-width: 768px) {
+    .history-detail-page .history-detail-embed .problem_items {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+}
+
+@media (min-width: 992px) {
+    .history-detail-page .history-detail-embed .problem_items {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+}
+
+.history-detail-page .history-detail-section-title {
+    font-size: 1.125rem;
+    font-weight: 600;
+    margin: 0 0 12px 0;
+    color: var(--color);
+}
+
+/* Hide embedded Recommendation/Routines chrome when inside history detail */
+.history-detail-page .history-detail-embed .back,
+.history-detail-page .history-detail-embed .refresh {
+    display: none !important;
+}
+.history-detail-page .history-detail-embed .slider_header {
+    display: none !important;
+}
+.history-detail-page .history-detail-embed .header_tools .download {
+    display: none !important;
+}
+.history-detail-page .history-detail-back-actions .download {
+    display: inline-flex !important;
+    align-items: center;
+    cursor: pointer;
+    padding: 4px;
+    border-radius: 10px;
+    transition: background 0.2s ease;
+}
+
+.history-detail-page .history-detail-back-actions .download:hover {
+    background: color-mix(in srgb, var(--basic) 10%, transparent);
+}
+
+.history-detail-page .history-detail-embed .recommendation_modal_window .main {
+    max-width: none;
+    width: 100%;
+}
+
+.history-detail-page.modal .history-detail-problems-header {
+    padding-top: 8px;
+}
+
+
+@media (max-width: 768px) {
+    .history-detail-page .history-detail-back .goBack span:last-child {
+        display: none;
+    }
+
+    .history-detail-page .history-detail-back .goBack {
+        padding: 8px 10px;
+    }
+
+    .history-detail-page .history-detail-result-layout {
+        grid-template-columns: 1fr;
+        max-width: 280px;
+        gap: 10px;
+    }
+
+    .history-detail-page .history-detail-result .face_age {
+        max-width: 100%;
+        width: 100%;
+    }
+
+    .history-detail-page .history-detail-summary-row {
+        grid-template-rows: none;
+        grid-auto-rows: auto;
+        height: auto;
+        gap: 8px;
+    }
+
+    .history-detail-page .history-detail-summary-card-inner {
+        min-height: 88px;
+        padding: 12px 10px;
+    }
+
+    .history-detail-page .history-detail-summary-value {
+        font-size: 1.55rem;
+    }
+
+    .history-detail-page .history-detail-analyzer {
+        width: 100%;
+        max-width: 240px;
+        margin: 0 auto;
+        border-radius: 20px;
+    }
+
+    .history-detail-page .history-detail-tabs-header {
+        width: 100%;
+    }
+
+    .history-detail-page .history-detail-tab-btn {
+        flex: 1 1 0;
+        padding: 9px 10px;
+    }
+}
+
+.face_age_info button {
+    background: var(--basic_action);
+    border: 0 solid;
+    padding: 12px;
+    width: 100%;
+    margin: 21px auto 0;
+    border-radius: 12px;
+    display: block;
+    color: #fff;
+    font-weight: bold;
+    cursor: pointer;
+}
+.face_age_info button.disable {
+    opacity: 0.5;
+    background: #a2a2a2;
+}
+
+.face_age_info button:hover {
+    background: var(--basic_action);
+    opacity: 0.8;
+}
+.face_age_info button.disable:hover {
+    opacity: 0.5;
+    background: #a2a2a2;
+}
+
+
+.face_age .image_itemReport{
+    width: 34px;
+    height: 34px;
+    display: block;
+    margin: 0 auto;
+    background-size: 34px;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+
+.face_age .image_itemReport.acnes{
+    background-image: url('./images/Acnes.svg');
+}
+.face_age .image_itemReport.eyeBag{
+    background-image: url('./images/EyeBag.svg');
+}
+.face_age .image_itemReport.darkCircle{
+    background-image: url('./images/DarkCircle.svg');
+}
+.face_age .image_itemReport.eyeWrinkles{
+    background-image: url('./images/EyeWrinkles.svg');
+}
+.face_age .image_itemReport.deepWrinkles{
+    background-image: url('./images/DeepWrinkles.svg');
+}
+.face_age .image_itemReport.wrinkles{
+    background-image: url('./images/Wrinkles.svg');
+}
+.face_age .image_itemReport.pores{
+    background-image: url('./images/Pores.svg');
+}
+.face_age .image_itemReport.pigment{
+    background-image: url('./images/Pigment.svg');
+}
+
+.lbSetf {
+    -webkit-box-pack: center;
+    justify-content: center;
+    padding: 0px;
+}
+.dZaMnF {
+    display: flex;
+    gap: 8px;
+    -webkit-box-align: stretch;
+    align-items: stretch;
+    overflow: visible;
+    border-radius: 0px 0px 15px 15px;
+}
+
+.bLwrg {
+    transition-timing-function: ease-out;
+    cursor: pointer;
+    display: flex;
+    -webkit-box-flex: 1;
+    flex-grow: 1;
+    flex-basis: 0px;
+    margin-left: 0px;
+    -webkit-box-pack: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    align-items: center;
+    text-align: center;
+    padding: 12px;
+    font-weight: normal;
+    color: var(--color_action);
+    background-color: var(--basic_action);
+}
+
+.bLwrg:hover {
+    color: var(--color_action);
+    opacity: 0.8;
+}
+
+.bLwrg:first-of-type {
+    margin-left: 0px;
+}
+
+.modal_window {
+    background: #fff;
+    width: 80%;
+    max-width: 500px;
+    margin: 0 auto;
+    border-radius: 15px;
+    font-size: 14px;
+    text-align: left;
+    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 14px 3px;
+    padding: 8px;
+}
+
+.modal_window .title {
+    margin-bottom: 10px;
+    padding: 10px 15px 5px;
+    font-weight: bold;
+}
+
+.modal_window .body {
+    padding: 2px 15px 15px;
+    overflow-y: auto;
+    max-height: 83%;
+}
+
+[dir="rtl"] .modal_window .title
+, [dir="rtl"] .modal_window .body{
+    text-align:right;
+}
+
+.form_window {
+    background: #fff;
+    width: 80%;
+    max-width: 500px;
+    margin: 25px auto;
+    border-radius: 15px;
+    font-size: 14px;
+    text-align: left;
+    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 14px 3px;
+}
+
+.form_window .title {
+    /* padding: 24px; */
+    font-weight: bold;
+}
+
+.form_window .elements {
+    margin-bottom: 10px;
+    padding: 12px;
+}
+
+.form_window .body {
+    padding: 2px 15px 19px;
+}
+
+.face_age_form.widget .form_window {
+    box-shadow: none;
+    width: 100%;
+}
+
+.face_age_form.widget .action {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+
+.face_age_form .elements .action {
+    margin-top: 24px !important;
+}
+
+.info_window {
+    background: #fff;
     width: 80%;
     max-width: 500px;
     margin: 10px auto;
@@ -2155,7 +3438,7 @@ body {
     font-size: 14px;
     text-align: left;
     box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 14px 3px;
-    padding: 8px;
+    padding: 16px;
 }
 
 .info_window .action {
@@ -2565,6 +3848,18 @@ body {
     font-size: 14px;
 }
 
+.skin_report .score .type-good {
+    color: #22C55E;
+}
+
+.skin_report .score .type-fair {
+    color: #F59E0B;
+}
+
+.skin_report .score .type-bad {
+    color: #EF4444;
+}
+
 .skin_report .chart{
     width: 65%;
     margin: 0 auto;
@@ -2590,6 +3885,27 @@ body {
     opacity: 0.9;
 }
 
+.download,
+.header_tools .download {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 30px;
+    min-height: 28px;
+}
+
+.download.pdf-downloading {
+    opacity: 0.85;
+}
+
+.pdf-download-spinner {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 28px;
+}
+
 .modal_face_age .modal_window .close_btn {
     position: absolute;
     right: 10px;