@import url("https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap");

:root{
    --font-body:"Almarai","Segoe UI",Tahoma,Arial,sans-serif;
    --font-display:"Almarai","Segoe UI",Tahoma,Arial,sans-serif;
    --line-body:1.75;
    --line-tight:1.35;
    --fay-bg:#fff8f5;
    --fay-bg-soft:#fff1ea;
    --fay-cream:#fff4ed;
    --fay-pink:#6fa9bd;
    --fay-pink-dark:#246a78;
    --fay-text:#5b4038;
    --fay-muted:#96776e;
    --fay-border:rgba(47,127,143,.24);
    --fay-shadow:0 24px 60px rgba(31,88,110,.13);
    --fay-shadow-soft:0 14px 34px rgba(31,88,110,.10);
    --danger:#dd5c5c;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
}

body{
    margin:0;
    font-family:var(--font-body);
    line-height:var(--line-body);
    color:var(--fay-text);
    overflow-x:hidden;
    background:
        radial-gradient(circle at 16% 20%,rgba(255,255,255,.96),transparent 24%),
        radial-gradient(circle at 78% 28%,rgba(250,219,210,.72),transparent 32%),
        linear-gradient(115deg,#fff9f6 0%,#fdece5 52%,#fff7f3 100%);
}

a{
    text-decoration:none;
    color:inherit;
}

img{
    display:block;
    max-width:100%;
}

button,
input,
select,
textarea{
    font-family:inherit;
}

h1,
h2,
h3,
h4,
h5,
h6,
.fay-logo,
.site-logo-text strong,
.home-hero-copy h1,
.catalog-hero-copy h1,
.admin-sidebar-brand strong{
    font-family:var(--font-display);
    line-height:var(--line-tight);
}

/* =========================
   MOTION
========================= */

body.fay-home-body{
    opacity:0;
    transform:translateY(10px);
    animation:fayPageEnter .55s ease forwards;
}

body.fay-page-leaving{
    opacity:0;
    transform:translateY(8px) scale(.992);
    transition:.17s ease;
}

@keyframes fayPageEnter{
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes fayRise{
    from{
        opacity:0;
        transform:translateY(22px) scale(.985);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

@keyframes skinaiCardFloat{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-5px);
    }
}

/* =========================
   PAGE
========================= */

.fay-page,
.skinai-page{
    width:100%;
    margin:0;
}

.skinai-page .fay-smart-section,
.skinai-page .fay-products-section,
.skinai-page .fay-promo-section,
.skinai-page .fay-category-view,
.skinai-page .fay-footer{
    width:min(94%,1280px);
    margin-left:auto;
    margin-right:auto;
}

/* =========================
   NAVBAR
========================= */

.fay-navbar,
.skinai-navbar{
    width:min(96%,1480px);
    margin:0 auto;
    padding:16px 22px 8px;
    position:relative;
    z-index:70;
    direction:ltr;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:22px;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
}

.fay-logo,
.skinai-logo{
    display:inline-flex;
    align-items:center;
    gap:12px;
    color:#101a24;
    font-size:34px;
    font-weight:950;
    letter-spacing:0;
}

.fay-logo img{
    width:46px;
    height:46px;
    object-fit:contain;
    border-radius:14px;
}

.skinai-logo-mark{
    width:42px;
    height:42px;
    display:inline-grid;
    place-items:center;
}

.skinai-logo-mark::before{
    content:"✾";
    color:#2f7f8f;
    font-size:44px;
    line-height:1;
}

.fay-nav-links,
.skinai-nav-links{
    direction:rtl;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:34px;
}

.fay-nav-link{
    position:relative;
    border:0;
    cursor:pointer;
    background:transparent;
    color:#101a24;
    padding:10px 4px 16px;
    border-radius:0;
    font-size:16px;
    font-weight:850;
    transition:.22s ease;
}

.fay-nav-link:hover{
    color:#246a78;
}

.fay-nav-link.active::after{
    content:"";
    position:absolute;
    left:4px;
    right:4px;
    bottom:5px;
    height:2px;
    border-radius:99px;
    background:#2f7f8f;
}

.fay-nav-actions,
.skinai-nav-actions{
    direction:rtl;
    display:flex;
    align-items:center;
    gap:18px;
}

.skinai-login-btn{
    min-width:128px;
    height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 20px;
    border:1px solid rgba(16,26,36,.38);
    border-radius:999px;
    color:#101a24;
    background:rgba(255,255,255,.20);
    font-size:15px;
    font-weight:850;
    transition:.22s ease;
}

.skinai-login-btn:hover{
    background:rgba(255,255,255,.66);
    transform:translateY(-2px);
}

.fay-icon-btn{
    position:relative;
    width:42px;
    height:42px;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.72);
    color:#101a24;
    display:inline-grid;
    place-items:center;
    cursor:pointer;
    font-size:17px;
    transition:.22s ease;
}

.fay-icon-btn:hover{
    transform:translateY(-2px);
    background:#fff;
}

.skinai-bag-btn{
    width:42px;
    height:44px;
    border-radius:14px;
    background:transparent;
    box-shadow:none;
}

.skinai-bag-btn > span{
    width:21px;
    height:23px;
    position:relative;
    display:block;
    border:2px solid currentColor;
    border-radius:5px;
}

.skinai-bag-btn > span::before{
    content:"";
    position:absolute;
    left:50%;
    top:-9px;
    width:12px;
    height:10px;
    border:2px solid currentColor;
    border-bottom:0;
    border-radius:10px 10px 0 0;
    transform:translateX(-50%);
}

.skinai-bag-btn b{
    position:absolute;
    top:0;
    left:-2px;
    min-width:18px;
    height:18px;
    display:grid;
    place-items:center;
    padding:0 5px;
    border-radius:999px;
    color:#fff;
    background:#6fa9bd;
    font-size:10px;
}

.skinai-menu-btn{
    display:none;
    border:1px solid rgba(16,26,36,.18);
    background:rgba(255,255,255,.58);
}

/* =========================
   DROPDOWN
========================= */

.fay-categories-menu{
    position:relative;
}

.fay-dropdown-btn{
    display:inline-flex;
    align-items:center;
    gap:5px;
}

.fay-dropdown{
    position:absolute;
    top:calc(100% + 12px);
    right:0;
    min-width:230px;
    padding:10px;
    border-radius:22px;
    background:rgba(255,255,255,.94);
    border:1px solid rgba(255,255,255,.82);
    box-shadow:var(--fay-shadow-soft);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    display:none;
    z-index:80;
}

.fay-dropdown.show{
    display:grid;
    gap:7px;
    animation:fayRise .22s ease both;
}

.fay-dropdown-item{
    border:0;
    cursor:pointer;
    text-align:right;
    padding:11px 13px;
    border-radius:15px;
    color:var(--fay-text);
    background:transparent;
    font-weight:850;
    transition:.2s ease;
}

.fay-dropdown-item:hover{
    background:rgba(47,127,143,.13);
    color:var(--fay-pink-dark);
}

.fay-dropdown-empty{
    color:var(--fay-muted);
    padding:10px;
}

/* =========================
   DRAWER
========================= */

.fay-overlay{
    position:fixed;
    inset:0;
    background:rgba(16,36,54,.28);
    opacity:0;
    visibility:hidden;
    transition:.22s ease;
    z-index:90;
}

.fay-overlay.show{
    opacity:1;
    visibility:visible;
}

.fay-drawer{
    position:fixed;
    top:0;
    right:-340px;
    width:min(320px,88vw);
    height:100vh;
    padding:0;
    z-index:100;
    overflow:auto;
    border-left:1px solid rgba(47,127,143,.14);
    background:
        linear-gradient(180deg,rgba(238,248,246,.92) 0%,rgba(255,255,255,.98) 140px),
        #fff;
    box-shadow:-22px 0 56px rgba(31,88,110,.16);
    transition:right .24s ease;
    direction:rtl;
    font-family:var(--font-body);
}

.fay-drawer.open{
    right:0;
}

.fay-drawer-head{
    position:sticky;
    top:0;
    z-index:1;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:18px 16px 16px;
    border-bottom:1px solid rgba(47,127,143,.14);
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
}

.fay-drawer-brand{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
}

.fay-drawer-mark{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    overflow:hidden;
    flex-shrink:0;
    border-radius:50%;
    background:#fbf5ed;
    border:1px solid rgba(210,125,154,.22);
    box-shadow:0 10px 24px rgba(210,125,154,.14);
}

.fay-drawer-mark img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.fay-drawer-copy{
    display:grid;
    gap:2px;
    line-height:1.1;
}

.fay-drawer-copy strong{
    color:#122434;
    font-size:18px;
    font-weight:950;
}

.fay-drawer-copy small{
    color:#2f7f8f;
    font-size:12px;
    font-weight:850;
}

.fay-drawer-close{
    width:42px;
    height:42px;
    flex-shrink:0;
    transform:rotate(45deg);
}

.fay-drawer .fay-icon-btn{
    width:42px;
    height:42px;
    padding:0;
    display:grid;
    place-items:center;
    border:1px solid rgba(47,127,143,.12);
    border-radius:13px;
    color:#102436;
    background:#fff;
    box-shadow:0 10px 24px rgba(31,88,110,.06);
    cursor:pointer;
    font-family:inherit;
}

.fay-drawer .fay-icon-btn:hover{
    color:#246a78;
    background:#eef8f6;
    transform:rotate(45deg) translateY(-2px);
}

.fay-drawer-links{
    padding:14px 12px 22px;
    display:grid;
    gap:6px;
}

.fay-drawer-links a,
.fay-drawer-links button.fay-pwa-install{
    min-height:46px;
    padding:0 14px;
    display:grid;
    grid-template-columns:24px 1fr;
    align-items:center;
    gap:14px;
    border-radius:12px;
    border:1px solid transparent;
    color:#102436;
    font-size:13px;
    font-weight:850;
    text-align:right;
    transition:background .18s ease,border-color .18s ease,color .18s ease;
}

.fay-drawer-links button.fay-pwa-install{
    width:100%;
    background:transparent;
    cursor:pointer;
    font-family:inherit;
}

.fay-drawer-links a .site-nav-icon,
.fay-drawer-links button.fay-pwa-install .site-nav-icon{
    width:22px;
    height:22px;
    color:#3f5864;
}

.fay-drawer-links a:hover,
.fay-drawer-links a.active,
.fay-drawer-links button.fay-pwa-install:hover{
    color:#246a78;
    background:#eef8f6;
    border-color:rgba(47,127,143,.10);
}

.fay-drawer-links a:hover .site-nav-icon,
.fay-drawer-links a.active .site-nav-icon,
.fay-drawer-links button.fay-pwa-install:hover .site-nav-icon{
    color:#2f7f8f;
}

.fay-pwa-tip{
    position:fixed;
    inset:0;
    z-index:12000;
    display:grid;
    place-items:center;
    padding:20px;
    background:rgba(16,36,54,.46);
    backdrop-filter:blur(4px);
}

.fay-pwa-tip[hidden],
.fay-pwa-tip-card p[hidden],
.fay-pwa-tip-steps[hidden]{
    display:none !important;
}

.fay-pwa-tip-card{
    position:relative;
    width:min(100%, 360px);
    padding:22px 20px 18px;
    border-radius:18px;
    background:#fff;
    color:#102436;
    box-shadow:0 18px 50px rgba(16,36,54,.22);
    text-align:right;
}

.fay-pwa-tip-close{
    position:absolute;
    top:10px;
    left:10px;
    width:36px;
    height:36px;
    border:0;
    border-radius:999px;
    background:#f2f6f8;
    display:grid;
    place-items:center;
    cursor:pointer;
}

.fay-pwa-tip-close .site-nav-icon{
    width:18px;
    height:18px;
    transform:rotate(45deg);
    color:#3f5864;
}

.fay-pwa-tip-card h3{
    margin:0 0 10px;
    font-size:17px;
    font-weight:900;
}

.fay-pwa-tip-card p,
.fay-pwa-tip-steps{
    margin:0 0 14px;
    color:#4d6470;
    font-size:13.5px;
    line-height:1.7;
}

.fay-pwa-tip-steps{
    padding-right:18px;
    display:grid;
    gap:8px;
}

.fay-pwa-tip-steps .site-nav-icon{
    width:16px;
    height:16px;
    vertical-align:-3px;
    color:#2f7f8f;
}

.fay-pwa-tip-ok{
    width:100%;
    min-height:44px;
    border:0;
    border-radius:12px;
    background:#2f7f8f;
    color:#fff;
    font-weight:850;
    font-size:14px;
    cursor:pointer;
}

body.drawer-open{
    overflow:hidden;
}

/* =========================
   UNIFIED HERO
========================= */

.skinai-hero-v2{
    display:none;
}

.skinai-hero-unified{
    position:relative;
    width:min(92%,1536px);
    max-width:none;
    height:clamp(620px,42vw,760px);
    min-height:0;
    margin:0 auto;
    overflow:hidden;
    border-radius:0;
    background:#fff5f1;
}

.skinai-hero-bg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:fill;
    object-position:center center;
    z-index:1;
}

.skinai-hero-unified::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    background:
        linear-gradient(
            90deg,
            rgba(255,247,243,.06) 0%,
            rgba(255,247,243,.08) 42%,
            rgba(255,247,243,.55) 58%,
            rgba(255,247,243,.90) 100%
        );
    pointer-events:none;
}

/* =========================
   HERO LEFT CARDS
========================= */

.skinai-hero-side-cards{
    position:absolute;
    z-index:4;
    left:28px;
    top:66px;
    width:235px;
    display:grid;
    gap:28px;
    direction:rtl;
}

.skinai-side-card{
    position:relative;
    min-height:104px;
    padding:16px 16px 20px;
    overflow:hidden;
    border-radius:18px;
    background:
        linear-gradient(145deg,rgba(255,255,255,.68),rgba(255,244,240,.46));
    border:1px solid rgba(255,255,255,.82);
    box-shadow:
        0 18px 44px rgba(31,88,110,.08),
        inset 0 1px 0 rgba(255,255,255,.85);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    display:grid;
    grid-template-columns:32px 1fr;
    gap:10px;
    align-items:start;
    animation:skinaiCardFloat 5s ease-in-out infinite;
    transition:.28s ease;
}

a.skinai-side-card{
    color:inherit;
    text-decoration:none;
}

.skinai-side-card:nth-child(2){
    animation-delay:.35s;
}

.skinai-side-card:nth-child(3){
    animation-delay:.70s;
}

.skinai-side-card:nth-child(4){
    animation-delay:1.05s;
}

.skinai-side-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 18% 12%,rgba(255,255,255,.82),transparent 28%),
        linear-gradient(135deg,rgba(47,127,143,.08),rgba(215,93,126,.08));
    opacity:.75;
    pointer-events:none;
}

.skinai-side-card:hover{
    transform:translateY(-5px);
    box-shadow:
        0 24px 56px rgba(31,88,110,.13),
        inset 0 1px 0 rgba(255,255,255,.92);
    background:
        linear-gradient(145deg,rgba(255,255,255,.82),rgba(255,244,240,.58));
}

.skinai-side-card span,
.skinai-side-card div{
    position:relative;
    z-index:2;
}

.skinai-side-card span{
    width:32px;
    height:32px;
    display:grid;
    place-items:center;
    border-radius:12px;
    color:#fff;
    background:rgba(47,127,143,.62);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
    font-size:21px;
    line-height:1;
}

.skinai-side-card span .home-icon{
    width:18px;
    height:18px;
    color:#fff;
}

.skinai-side-card strong{
    display:block;
    color:#172737;
    font-size:16px;
    font-weight:950;
    margin-bottom:6px;
}

.skinai-side-card p{
    margin:0;
    color:#263c4d;
    font-size:13px;
    line-height:1.7;
    font-weight:750;
}

.skinai-side-card i{
    position:absolute;
    right:16px;
    bottom:11px;
    width:78px;
    height:3px;
    border-radius:99px;
    background:rgba(47,127,143,.13);
}

.skinai-side-card i::before{
    content:"";
    position:absolute;
    right:0;
    top:0;
    width:42px;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg,#2f7f8f,#6fa9bd);
}

/* =========================
   HERO RIGHT CONTENT
========================= */

.skinai-hero-overlay-content{
    position:relative;
    z-index:3;
    width:min(570px,43%);
    margin-right:4%;
    margin-left:auto;
    padding:74px 0 48px;
    direction:rtl;
    text-align:center;
}

.skinai-hero-overlay-content h1{
    margin:0;
    color:#172737;
    font-size:44px;
    line-height:1.36;
    font-weight:950;
}

.skinai-hero-overlay-content h1 strong{
    display:block;
    color:#6fa9bd;
    font-size:34px;
    line-height:1.5;
    font-weight:950;
}

.skinai-hero-overlay-content > p{
    width:min(500px,100%);
    margin:12px auto 0;
    color:#34495a;
    font-size:16px;
    line-height:1.9;
}

/* =========================
   HERO RIGHT LONG CARDS
========================= */

.skinai-right-long-cards{
    width:min(430px,100%);
    margin:30px auto 0;
    display:grid;
    gap:14px;
    direction:rtl;
    transform:translateX(90px);
}


.skinai-long-card{
    position:relative;
    min-height:108px;
    padding:18px 20px 22px;
    overflow:hidden;
    border-radius:18px;
    background:
        linear-gradient(145deg,rgba(255,255,255,.72),rgba(255,244,240,.48));
    border:1px solid rgba(255,255,255,.82);
    box-shadow:
        0 18px 44px rgba(31,88,110,.08),
        inset 0 1px 0 rgba(255,255,255,.85);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    display:grid;
    grid-template-columns:46px 1fr auto;
    gap:14px;
    align-items:center;
    text-align:right;
    transition:.25s ease;
}

.skinai-long-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 12% 18%,rgba(255,255,255,.85),transparent 28%),
        linear-gradient(135deg,rgba(47,127,143,.08),rgba(214,95,130,.08));
    pointer-events:none;
}

.skinai-long-card:hover{
    transform:translateY(-5px);
    box-shadow:
        0 24px 58px rgba(31,88,110,.14),
        inset 0 1px 0 rgba(255,255,255,.92);
}

.skinai-long-card span,
.skinai-long-card div,
.skinai-long-card em{
    position:relative;
    z-index:2;
}

.skinai-long-card span{
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border-radius:16px;
    color:#6fa9bd;
    background:rgba(47,127,143,.64);
    font-size:25px;
}

.skinai-long-card strong{
    display:block;
    color:#172737;
    font-size:18px;
    font-weight:950;
    margin-bottom:6px;
}

.skinai-long-card p{
    margin:0;
    color:#304558;
    font-size:13px;
    line-height:1.7;
    font-weight:750;
}

.skinai-long-card em{
    min-width:76px;
    padding:8px 13px;
    border-radius:999px;
    color:#fff;
    background:linear-gradient(90deg,#6fa9bd,#2f7f8f);
    font-size:12px;
    font-style:normal;
    font-weight:950;
    text-align:center;
}

.skinai-long-card:not(.is-primary) em{
    display:none;
}

.skinai-long-card i{
    position:absolute;
    right:20px;
    bottom:12px;
    width:84px;
    height:3px;
    border-radius:999px;
    background:rgba(47,127,143,.13);
}

.skinai-long-card i::before{
    content:"";
    position:absolute;
    right:0;
    top:0;
    width:44px;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg,#2f7f8f,#6fa9bd);
}

/* =========================
   SECTION HEAD
========================= */

.fay-smart-section,
.fay-products-section,
.fay-promo-section,
.fay-category-view{
    margin-top:34px;
}

.fay-section-head{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:16px;
    margin-bottom:18px;
}

.fay-eyebrow{
    color:var(--fay-pink-dark);
    font-size:13px;
    font-weight:950;
    letter-spacing:1px;
    text-transform:uppercase;
}

.fay-section-head h2{
    margin:8px 0 6px;
    font-size:34px;
    color:var(--fay-text);
}

.fay-section-head p{
    margin:0;
    color:var(--fay-muted);
    line-height:1.8;
}

/* =========================
   SMART CARDS
========================= */

.fay-smart-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
}

.fay-smart-card{
    position:relative;
    overflow:hidden;
    min-height:180px;
    padding:22px;
    border-radius:32px;
    background:
        radial-gradient(circle at 20% 16%,rgba(255,255,255,.95),transparent 30%),
        rgba(255,255,255,.58);
    border:1px solid rgba(255,255,255,.72);
    box-shadow:var(--fay-shadow-soft);
    transition:.24s ease;
}

.fay-smart-card:hover{
    transform:translateY(-7px);
    box-shadow:var(--fay-shadow);
}

.fay-smart-card span{
    width:54px;
    height:54px;
    display:grid;
    place-items:center;
    border-radius:20px;
    background:var(--fay-cream);
    font-size:24px;
}

.fay-smart-card h3{
    margin:16px 0 8px;
    color:var(--fay-text);
    font-size:20px;
}

.fay-smart-card p{
    margin:0;
    color:var(--fay-muted);
    line-height:1.8;
}

/* =========================
   PRODUCTS
========================= */

.fay-products-grid,
.skin-results-grid,
.cases-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
}

.fay-product-card,
.skin-result-card,
.case-card{
    overflow:hidden;
    border-radius:30px;
    background:rgba(255,255,255,.64);
    border:1px solid rgba(255,255,255,.78);
    box-shadow:var(--fay-shadow-soft);
    transition:.23s ease;
}

.fay-product-card:hover,
.skin-result-card:hover,
.case-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--fay-shadow);
}

.fay-product-img,
.skin-result-image-wrap{
    height:230px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:18px;
    background:
        radial-gradient(circle at center,rgba(255,255,255,.9),transparent 42%),
        linear-gradient(135deg,#fff8f5,#fde7df);
}

.fay-product-img img,
.skin-result-image{
    width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
    object-fit:contain;
}

.fay-product-img span{
    font-size:42px;
    color:var(--fay-pink-dark);
    font-weight:950;
}

.fay-product-info,
.skin-result-info,
.case-content{
    padding:16px;
}

.fay-product-info h3,
.skin-result-info h3,
.case-content h3{
    margin:0 0 8px;
    color:var(--fay-text);
    font-size:16px;
    line-height:1.55;
}

.fay-product-info p,
.case-desc{
    margin:0 0 10px;
    color:var(--fay-muted);
    font-size:13px;
    line-height:1.7;
}

.fay-product-info strong,
.skin-result-price{
    color:var(--fay-pink-dark);
    font-size:16px;
    font-weight:950;
}

/* =========================
   PROMO
========================= */

.fay-promo-card{
    display:grid;
    grid-template-columns:1fr 320px;
    align-items:center;
    gap:22px;
    padding:32px;
    border-radius:38px;
    background:linear-gradient(135deg,rgba(47,127,143,.22),rgba(255,255,255,.72));
    border:1px solid rgba(255,255,255,.76);
    box-shadow:var(--fay-shadow-soft);
}

.fay-promo-card h2{
    margin:8px 0 10px;
    font-size:38px;
    color:var(--fay-text);
}

.fay-promo-card p{
    color:var(--fay-muted);
    line-height:1.8;
}

.fay-promo-image{
    height:220px;
    border-radius:30px;
    overflow:hidden;
    background:rgba(255,255,255,.60);
}

.fay-promo-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* =========================
   CATEGORY VIEW
========================= */

.fay-category-view,
.fay-inline-section{
    animation:fayRise .28s ease both;
}

.fay-empty-box{
    padding:22px;
    border-radius:24px;
    background:rgba(255,255,255,.62);
    color:var(--fay-muted);
}

.fay-soft-btn{
    min-height:46px;
    padding:12px 22px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.82);
    border-radius:999px;
    cursor:pointer;
    background:rgba(255,255,255,.76);
    color:var(--fay-pink-dark);
    font-weight:950;
    transition:.22s ease;
}

.fay-soft-btn:hover{
    transform:translateY(-3px);
}

/* =========================
   FOOTER
========================= */

.fay-footer{
    margin-top:48px;
    padding:30px;
    border-radius:36px;
    background:rgba(255,255,255,.62);
    border:1px solid rgba(255,255,255,.78);
    box-shadow:var(--fay-shadow-soft);
    display:grid;
    grid-template-columns:1.3fr .8fr .9fr;
    gap:20px;
}

.fay-footer h2,
.fay-footer h3{
    margin:0 0 10px;
    color:var(--fay-text);
}

.fay-footer p{
    margin:0 0 10px;
    color:var(--fay-muted);
    line-height:1.8;
}

.fay-footer a{
    display:block;
    margin:7px 0;
    color:var(--fay-pink-dark);
    font-weight:950;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1150px){
    .skinai-hero-unified{
        width:94%;
        height:clamp(580px,48vw,720px);
    }

    .skinai-hero-side-cards{
        left:28px;
        top:42px;
        width:215px;
    }

    .skinai-side-card{
        min-height:96px;
    }

    .skinai-hero-overlay-content{
        width:min(540px,46%);
        margin-right:3%;
        padding-top:60px;
    }

    .skinai-hero-overlay-content h1{
        font-size:38px;
    }

    .skinai-hero-overlay-content h1 strong{
        font-size:29px;
    }

    .skinai-right-long-cards{
        width:min(400px,100%);
    }

    .fay-smart-grid,
    .fay-products-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .fay-promo-card,
    .fay-footer{
        grid-template-columns:1fr;
    }
}

@media(max-width:980px){
    .skinai-navbar{
        grid-template-columns:auto auto;
        padding:14px 18px 8px;
    }

    .skinai-nav-links{
        display:none;
    }

    .skinai-menu-btn{
        display:inline-grid;
    }

    .skinai-login-btn{
        min-width:auto;
        height:42px;
        padding:0 16px;
        font-size:14px;
    }

    .skinai-hero-unified{
        width:100%;
        height:auto;
        min-height:0;
        padding-top:430px;
    }

    .skinai-hero-bg{
        height:470px;
        object-fit:cover;
        object-position:center top;
    }

    .skinai-hero-unified::after{
        background:
            linear-gradient(
                180deg,
                rgba(255,247,243,.02) 0%,
                rgba(255,247,243,.10) 36%,
                rgba(255,247,243,.96) 64%,
                rgba(255,247,243,1) 100%
            );
    }

    .skinai-hero-side-cards{
        display:none;
    }

    .skinai-hero-overlay-content{
        width:min(92%,700px);
        margin:0 auto;
        padding:28px 0 42px;
    }

    .skinai-hero-overlay-content h1{
        font-size:34px;
    }

    .skinai-hero-overlay-content h1 strong{
        font-size:26px;
    }
}

@media(max-width:760px){
    .fay-logo,
    .skinai-logo{
        font-size:28px;
    }

    .skinai-logo-mark{
        width:34px;
        height:34px;
    }

    .skinai-logo-mark::before{
        font-size:36px;
    }

    .skinai-login-btn{
        display:none;
    }

    .skinai-hero-unified{
        padding-top:360px;
    }

    .skinai-hero-bg{
        height:390px;
    }

    .skinai-hero-overlay-content h1{
        font-size:31px;
    }

    .skinai-hero-overlay-content h1 strong{
        font-size:24px;
    }

    .skinai-hero-overlay-content > p{
        font-size:15px;
    }

    .skinai-right-long-cards{
        width:100%;
    }

    .skinai-long-card{
        grid-template-columns:42px 1fr;
        min-height:104px;
    }

    .skinai-long-card em{
        grid-column:1 / -1;
        justify-self:start;
    }

    .fay-smart-grid,
    .fay-products-grid,
    .skin-results-grid,
    .cases-grid{
        grid-template-columns:1fr;
    }

    .fay-section-head{
        align-items:flex-start;
        flex-direction:column;
    }

    .fay-section-head h2{
        font-size:27px;
    }
}

@media(prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }
}

/* =========================
   HOME 2026 TEAL REDESIGN
========================= */

.skinai-home-body{
    --home-primary:#0f7380;
    --home-primary-dark:#075f6b;
    --home-primary-soft:#eaf7f7;
    --home-accent:#5f91a5;
    --home-ink:#0d1b2a;
    --home-muted:#667785;
    --home-line:rgba(15,115,128,.14);
    --home-line-strong:rgba(15,115,128,.28);
    --home-surface:#ffffff;
    --home-shadow:0 24px 70px rgba(31,76,88,.10);
    --home-shadow-soft:0 14px 42px rgba(31,76,88,.08);
    color:var(--home-ink);
    font-family:var(--font-body);
    background:
        radial-gradient(circle at 10% 8%,rgba(234,247,247,.9),transparent 26%),
        radial-gradient(circle at 92% 16%,rgba(240,250,249,.92),transparent 28%),
        linear-gradient(180deg,#ffffff 0%,#fbfefe 48%,#f6fbfb 100%);
}

.skinai-home-body .skinai-page{
    background:transparent;
}

.home-icon{
    width:20px;
    height:20px;
    display:block;
    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.skinai-home-body .skinai-navbar{
    width:100%;
    max-width:none;
    min-height:76px;
    margin:0;
    padding:14px 38px 12px;
    position:sticky;
    top:0;
    z-index:90;
    border-bottom:1px solid rgba(15,115,128,.10);
    background:rgba(255,255,255,.86);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

.skinai-home-body .skinai-logo{
    gap:11px;
    color:var(--home-ink);
    font-size:0;
}

.skinai-home-body .skinai-logo-mark{
    width:42px;
    height:42px;
    position:relative;
    color:var(--home-primary);
}

.skinai-home-body .skinai-logo-mark::before,
.skinai-home-body .skinai-logo-mark::after{
    content:"";
    position:absolute;
    inset:8px;
    border:2px solid currentColor;
    border-radius:70% 70% 8px 70%;
    transform:rotate(45deg);
}

.skinai-home-body .skinai-logo-mark::after{
    inset:5px 13px 13px 5px;
    opacity:.65;
    transform:rotate(12deg);
    box-shadow:
        10px 4px 0 -8px currentColor,
        17px 11px 0 -9px currentColor;
}

.skinai-logo-text{
    display:grid;
    line-height:1;
}

.skinai-logo-text strong{
    color:var(--home-ink);
    font-size:28px;
    font-weight:950;
}

.skinai-logo-text small{
    margin-top:2px;
    color:var(--home-primary);
    font-size:14px;
    font-weight:850;
    text-align:center;
}

.skinai-home-body .skinai-nav-links{
    gap:30px;
}

.skinai-home-body .fay-nav-link{
    color:#102436;
    font-size:15px;
    padding:10px 4px 15px;
    white-space:nowrap;
}

.skinai-home-body .fay-nav-link:hover,
.skinai-home-body .fay-nav-link.active{
    color:var(--home-primary-dark);
}

.skinai-home-body .fay-nav-link.active::after{
    background:var(--home-primary);
    height:3px;
}

.skinai-home-body .skinai-nav-actions{
    direction:ltr;
    justify-content:flex-end;
    gap:16px;
}

.skinai-home-search{
    width:min(280px,26vw);
    height:44px;
    padding:0 14px 0 16px;
    display:flex;
    align-items:center;
    gap:8px;
    border:1px solid rgba(16,36,54,.11);
    border-radius:13px;
    background:#fff;
    box-shadow:0 10px 28px rgba(31,76,88,.05);
}

.skinai-home-search input{
    width:100%;
    min-width:0;
    border:0;
    outline:0;
    background:transparent;
    color:var(--home-ink);
    font-size:14px;
    text-align:right;
}

.skinai-home-search input::placeholder{
    color:#8a9aa5;
}

.skinai-home-search button{
    width:28px;
    height:28px;
    border:0;
    background:transparent;
    color:var(--home-ink);
    display:grid;
    place-items:center;
    cursor:pointer;
}

.skinai-home-body .fay-icon-btn{
    width:42px;
    height:42px;
    color:#071827;
    background:transparent;
    border-radius:13px;
}

.skinai-home-body .fay-icon-btn:hover{
    color:var(--home-primary);
    background:var(--home-primary-soft);
}

.skinai-home-body .skinai-bag-btn > span,
.skinai-home-body .skinai-bag-btn > span::before{
    display:none;
}

.skinai-home-body .skinai-bag-btn b,
.skinai-notification-btn b{
    position:absolute;
    top:1px;
    left:0;
    min-width:18px;
    height:18px;
    padding:0 5px;
    display:grid;
    place-items:center;
    border-radius:999px;
    color:#fff;
    background:var(--home-primary);
    font-size:10px;
    font-weight:950;
}

.site-notification-btn span,
.site-cart-btn span{
    position:absolute;
    top:-5px;
    right:-5px;
    min-width:18px;
    height:18px;
    padding:0 5px;
    display:grid;
    place-items:center;
    border-radius:999px;
    color:#fff;
    background:#2f7f8f;
    font-size:10px;
    font-weight:950;
}

.site-cart-btn span[hidden],
.skinai-bag-btn b[hidden]{
    display:none !important;
}

.site-navbar{
    width:100%;
    max-width:none;
    margin:0;
    min-height:76px;
    padding:12px clamp(18px,3vw,42px);
    position:sticky;
    top:0;
    z-index:95;
    display:grid;
    grid-template-columns:minmax(170px,1fr) auto minmax(170px,1fr);
    align-items:center;
    column-gap:clamp(12px,2vw,24px);
    row-gap:10px;
    border-bottom:1px solid rgba(47,127,143,.14);
    background:rgba(255,255,255,.92);
    box-shadow:0 14px 40px rgba(31,88,110,.08);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    direction:ltr;
    font-family:var(--font-body);
}

.fay-navbar.site-navbar{
    width:100%;
    max-width:none;
    margin:0;
    padding:12px clamp(18px,3vw,42px);
    position:sticky;
    top:0;
    z-index:95;
    border:0;
    border-bottom:1px solid rgba(47,127,143,.14);
    border-radius:0;
    background:rgba(255,255,255,.92);
    box-shadow:0 14px 40px rgba(31,88,110,.08);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

.site-nav-start{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
    justify-self:start;
}

.site-logo{
    gap:11px;
    font-size:0;
    white-space:nowrap;
}

.site-logo-mark{
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    overflow:hidden;
    border-radius:50%;
    color:#2f7f8f;
    background:#fbf5ed;
    border:1px solid rgba(210,125,154,.22);
    box-shadow:0 10px 24px rgba(210,125,154,.14);
}

.site-logo-mark::before{
    content:none;
}

.site-logo-mark img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.site-logo-text{
    display:grid;
    gap:0;
    color:#122434;
    line-height:1;
}

.site-logo-text strong{
    font-size:25px;
    font-weight:950;
}

.site-logo-text small{
    color:#2f7f8f;
    font-size:13px;
    font-weight:900;
}

.site-nav-links{
    justify-self:center;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:clamp(14px,2vw,24px);
    min-width:0;
    direction:rtl;
}

.site-nav-links .fay-nav-link{
    position:relative;
    flex:0 0 auto;
    padding:10px 2px 14px;
    color:#102436;
    font-size:15px;
    white-space:nowrap;
    text-align:center;
}

.site-nav-links .fay-nav-link:hover,
.site-nav-links .fay-nav-link.active{
    color:#246a78;
}

.site-nav-links .fay-nav-link.active::after{
    height:3px;
    background:#2f7f8f;
}

.site-nav-actions{
    justify-self:end;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    direction:ltr;
    gap:12px;
}

.site-nav-search{
    width:min(280px,24vw);
    height:44px;
    padding:0 13px 0 12px;
    display:flex;
    align-items:center;
    gap:8px;
    border:1px solid rgba(47,127,143,.14);
    border-radius:13px;
    background:#fff;
    box-shadow:0 10px 26px rgba(31,88,110,.06);
}

.site-nav-search input{
    width:100%;
    min-width:0;
    border:0;
    outline:0;
    background:transparent;
    color:#102436;
    font-size:13px;
    font-weight:750;
    text-align:right;
}

.site-nav-search input::placeholder{
    color:#7d929b;
}

.site-nav-search button{
    width:28px;
    height:28px;
    border:0;
    display:grid;
    place-items:center;
    color:#246a78;
    background:transparent;
    cursor:pointer;
}

.site-nav-icon{
    width:21px;
    height:21px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.site-navbar .fay-icon-btn,
.site-avatar-link{
    width:42px;
    height:42px;
    padding:0;
    display:grid;
    place-items:center;
    border:1px solid rgba(47,127,143,.12);
    border-radius:13px;
    color:#102436;
    background:#fff;
    box-shadow:0 10px 24px rgba(31,88,110,.06);
    cursor:pointer;
    font-family:inherit;
}

.site-navbar .fay-icon-btn:hover,
.site-avatar-link:hover{
    color:#246a78;
    background:#eef8f6;
    transform:translateY(-2px);
}

.site-avatar-link span{
    width:26px;
    height:26px;
    display:grid;
    place-items:center;
    border-radius:999px;
    color:#fff;
    background:linear-gradient(135deg,#2f7f8f,#78b8a7);
    font-size:13px;
    font-weight:950;
}

.site-avatar-link span .site-nav-icon{
    width:16px;
    height:16px;
    stroke:#fff;
}

.site-profile-wrap{
    position:relative;
    display:inline-grid;
    place-items:center;
}

.site-profile-menu{
    position:absolute;
    top:calc(100% + 12px);
    right:0;
    z-index:92;
    width:286px;
    max-height:min(680px,calc(100vh - 96px));
    overflow:auto;
    padding:12px 12px 14px;
    display:grid;
    gap:6px;
    border:1px solid rgba(47,127,143,.14);
    border-radius:0 0 16px 16px;
    background:rgba(255,255,255,.99);
    box-shadow:0 22px 56px rgba(31,88,110,.16);
    direction:rtl;
    font-family:var(--font-body);
}

.site-profile-menu[hidden]{
    display:none;
}

.site-profile-menu a{
    min-height:46px;
    padding:0 14px;
    display:grid;
    grid-template-columns:24px 1fr;
    align-items:center;
    gap:14px;
    border-radius:12px;
    color:#102436;
    font-size:13px;
    font-weight:850;
    text-align:right;
}

.site-profile-menu a:hover,
.site-profile-menu a.active{
    color:#246a78;
    background:#eef8f6;
}

.site-profile-menu .site-nav-icon{
    width:22px;
    height:22px;
    color:#3f5864;
}

.site-profile-menu a:hover .site-nav-icon,
.site-profile-menu a.active .site-nav-icon{
    color:#2f7f8f;
}

.site-profile-menu .site-profile-logout{
    margin-top:6px;
    color:#9b3f45;
    background:#fff7f7;
}

.site-profile-menu .site-profile-logout .site-nav-icon{
    color:#9b3f45;
}

.site-profile-menu .site-profile-logout:hover{
    color:#7f2f35;
    background:#ffefef;
}

.skinai-notification-wrap{
    position:relative;
    display:inline-grid;
    place-items:center;
}

.skinai-notification-panel{
    position:absolute;
    top:calc(100% + 12px);
    right:0;
    z-index:90;
    width:min(330px,calc(100vw - 28px));
    display:grid;
    gap:10px;
    padding:14px;
    border:1px solid rgba(47,127,143,.16);
    border-radius:16px;
    background:rgba(255,255,255,.98);
    box-shadow:0 18px 44px rgba(31,88,110,.14);
    direction:rtl;
}

.skinai-notification-panel[hidden]{
    display:none;
}

.skinai-notification-panel strong{
    color:#14323d;
    font-size:15px;
    font-weight:950;
}

.skinai-notification-panel a{
    display:grid;
    gap:4px;
    padding:11px 12px;
    border:1px solid rgba(47,127,143,.12);
    border-radius:12px;
    background:#f6fbfb;
    color:#14323d;
}

.skinai-notification-panel a:hover{
    border-color:rgba(47,127,143,.28);
    background:#edf8f7;
}

.skinai-notification-panel b{
    color:#246a78;
    font-size:13px;
}

.skinai-notification-panel small{
    color:#647983;
    line-height:1.6;
    font-size:12px;
}

.skinai-home-avatar{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:var(--home-primary-dark);
    background:
        radial-gradient(circle at 45% 36%,#fff 0 20%,transparent 21%),
        linear-gradient(145deg,#dff2f2,#ffffff);
    border:1px solid rgba(15,115,128,.18);
    font-size:16px;
    font-weight:950;
    box-shadow:0 10px 24px rgba(31,76,88,.09);
}

.skinai-home-main{
    --home-layout-columns:minmax(0,1.1fr) minmax(0,.78fr) minmax(0,.5fr);
    --home-layout-gap:20px;
    width:min(96%,1540px);
    margin:0 auto;
    padding:8px clamp(12px,3vw,0) 28px;
    box-sizing:border-box;
}

body.skinai-home-body .fay-navbar.site-navbar,
body.fay-home-body .site-navbar{
    margin-bottom:20px !important;
}

body.skinai-home-body .skinai-home-main{
    padding-top:0;
}

body.skinai-home-body .home-hero-showcase{
    margin-top:0;
}

.home-hero-showcase{
    min-height:320px;
    margin-top:0;
    display:grid;
    grid-template-columns:var(--home-layout-columns);
    align-items:stretch;
    gap:var(--home-layout-gap);
    direction:ltr;
}

.home-hero-visual,
.home-hero-copy,
.home-fay-card{
    direction:rtl;
}

.home-hero-visual{
    grid-column:1;
    min-height:320px;
    position:relative;
    overflow:hidden;
    border-left:1px solid rgba(15,115,128,.08);
    background:
        radial-gradient(circle at 12% 23%,rgba(154,182,161,.20),transparent 16%),
        radial-gradient(circle at 55% 35%,rgba(255,255,255,.92),transparent 34%),
        linear-gradient(120deg,#f3faf9 0%,#ffffff 46%,#edf6f6 100%);
}

.home-hero-visual:has(.home-hero-ads){
    min-height:280px;
    height:320px;
    max-height:360px;
    aspect-ratio:auto;
    align-self:start;
    width:100%;
    border-radius:10px;
    background:#edf6f6;
}

.home-hero-ads{
    position:absolute;
    inset:0;
    z-index:2;
}

@media (max-width: 760px){
    .home-hero-ads{
        touch-action:pan-y;
    }

    .home-hero-ad-controls{
        display:none !important;
    }
}

.home-hero-ad{
    position:absolute;
    inset:0;
    opacity:0;
    visibility:hidden;
    transition:opacity .35s ease;
    background:#edf6f6;
}

.home-hero-ad.is-active{
    opacity:1;
    visibility:visible;
}

.home-hero-ad-link,
.home-hero-ad img{
    width:100%;
    height:100%;
    display:block;
}

.home-hero-ad img{
    object-fit:contain;
    object-position:center center;
}

.home-hero-ad-controls{
    position:absolute;
    left:16px;
    right:16px;
    bottom:14px;
    z-index:3;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
}

.home-hero-ad-nav{
    width:34px;
    height:34px;
    border:0;
    border-radius:999px;
    color:#fff;
    background:rgba(13,27,42,.55);
    font-size:22px;
    line-height:1;
    cursor:pointer;
}

.home-hero-ad-dots{
    display:flex;
    align-items:center;
    gap:6px;
}

.home-hero-ad-dot{
    width:8px;
    height:8px;
    padding:0;
    border:0;
    border-radius:999px;
    background:rgba(255,255,255,.55);
    cursor:pointer;
}

.home-hero-ad-dot.is-active{
    width:22px;
    background:#fff;
}

.home-hero-visual::before{
    content:"";
    position:absolute;
    left:-50px;
    bottom:-62px;
    width:380px;
    height:190px;
    border-radius:50%;
    background:rgba(255,255,255,.84);
    box-shadow:
        0 -18px 70px rgba(31,76,88,.08),
        inset 0 1px 0 rgba(255,255,255,.9);
}

.home-hero-visual::after{
    content:"";
    position:absolute;
    left:18px;
    top:28px;
    width:90px;
    height:140px;
    opacity:.35;
    border-left:2px solid #8da786;
    border-radius:60% 0 0 60%;
    transform:rotate(-22deg);
}

.home-hero-products{
    position:absolute;
    left:22px;
    right:168px;
    bottom:46px;
    height:220px;
    display:flex;
    align-items:flex-end;
    gap:12px;
    z-index:2;
}

.home-hero-bottle{
    flex:1 1 0;
    min-width:58px;
    height:190px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    padding:10px;
    border-radius:18px;
    background:rgba(255,255,255,.54);
    border:1px solid rgba(255,255,255,.72);
    box-shadow:0 22px 55px rgba(31,76,88,.10);
    transition:.24s ease;
}

.home-hero-bottle:hover{
    transform:translateY(-8px);
}

.home-hero-bottle img{
    width:100%;
    height:100%;
    object-fit:contain;
    filter:drop-shadow(0 16px 18px rgba(10,32,38,.13));
}

.home-hero-bottle-2{
    height:208px;
}

.home-hero-bottle-3{
    height:182px;
}

.home-hero-bottle-4{
    height:128px;
}

.home-hero-empty-product{
    position:absolute;
    left:80px;
    bottom:88px;
    width:210px;
    height:210px;
    display:grid;
    place-items:center;
    border-radius:28px;
    color:var(--home-primary);
    background:#fff;
    font-size:28px;
    font-weight:950;
    box-shadow:var(--home-shadow-soft);
}

.home-hero-tablet{
    position:absolute;
    right:18px;
    bottom:42px;
    width:198px;
    padding:16px 14px 14px;
    z-index:3;
    border:9px solid #1f252b;
    border-radius:18px;
    background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(246,251,250,.90));
    box-shadow:0 26px 70px rgba(14,31,38,.20);
    transform:rotate(-2deg);
    transition:.22s ease;
}

a.home-hero-tablet{
    color:inherit;
    text-decoration:none;
}

a.home-hero-tablet:hover{
    transform:rotate(-2deg) translateY(-4px);
}

.home-hero-tablet strong{
    display:block;
    margin-bottom:10px;
    text-align:center;
    color:var(--home-ink);
    font-size:14px;
    font-weight:950;
}

.home-hero-tablet span{
    min-height:44px;
    margin-bottom:8px;
    padding:8px 10px;
    display:grid;
    grid-template-columns:24px 1fr 16px;
    align-items:center;
    gap:9px;
    border:1px solid rgba(15,115,128,.08);
    border-radius:12px;
    background:rgba(255,255,255,.82);
}

.home-hero-tablet span .home-icon{
    width:28px;
    height:28px;
    padding:5px;
    border-radius:10px;
    stroke-width:2.1;
}

.home-hero-tablet span.is-morning .home-icon{
    color:#d89114;
    background:#fff6df;
}

.home-hero-tablet span.is-night .home-icon{
    color:#3f7293;
    background:#edf7fb;
}

.home-hero-tablet span.is-weekly .home-icon{
    color:#2f7f8f;
    background:#eaf7f4;
}

.home-hero-tablet span::after{
    content:"›";
    color:#97a9b0;
    font-size:20px;
}

.home-hero-tablet b,
.home-hero-tablet small{
    display:block;
}

.home-hero-tablet b{
    color:var(--home-ink);
    font-size:13px;
}

.home-hero-tablet small{
    margin-top:2px;
    color:var(--home-muted);
    font-size:11px;
}

.home-hero-tablet em{
    display:block;
    margin-top:13px;
    padding:11px 12px;
    border-radius:10px;
    color:var(--home-primary-dark);
    background:#dfeff0;
    font-size:13px;
    font-style:normal;
    font-weight:850;
    text-align:center;
}

.home-hero-copy{
    grid-column:2;
    min-height:320px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    padding:24px 4px 20px;
}

.home-hero-copy h1{
    margin:0;
    color:var(--home-ink);
    font-size:clamp(30px,3.2vw,46px);
    line-height:1.22;
    font-weight:950;
    letter-spacing:0;
}

.home-hero-copy h1 strong{
    display:block;
    margin-top:6px;
    color:var(--home-primary);
    font-size:.76em;
}

.home-hero-copy p{
    width:min(430px,100%);
    margin:14px 0 0;
    color:#283e4f;
    font-size:15px;
    line-height:1.75;
    font-weight:650;
}

.home-hero-actions{
    margin-top:18px;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    width:min(460px,100%);
}

.home-hero-actions .home-primary-btn,
.home-hero-actions .home-secondary-btn{
    width:100%;
}

.home-primary-btn,
.home-secondary-btn,
.home-fay-form button,
.home-fay-login{
    min-height:46px;
    padding:0 22px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border-radius:10px;
    font-size:14px;
    font-weight:900;
    transition:.22s ease;
}

.home-primary-btn{
    color:#fff;
    background:linear-gradient(135deg,var(--home-primary),var(--home-primary-dark));
    box-shadow:0 18px 38px rgba(15,115,128,.22);
}

.home-secondary-btn{
    color:var(--home-ink);
    border:1px solid var(--home-primary);
    background:#fff;
}

.home-primary-btn:hover,
.home-secondary-btn:hover,
.home-fay-form button:hover,
.home-fay-login:hover{
    transform:translateY(-3px);
}

.home-fay-quick-links{
    margin-top:12px;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
}

.home-fay-quick-links a{
    min-height:36px;
    display:grid;
    place-items:center;
    border:1px solid rgba(15,115,128,.12);
    border-radius:10px;
    color:var(--home-primary-dark);
    background:#fff;
    font-size:12px;
    font-weight:900;
}

.home-fay-quick-links a:hover{
    color:#fff;
    background:var(--home-primary);
    border-color:var(--home-primary);
}

.home-daily-tip-card{
    width:100%;
    min-height:112px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin:22px 0;
    padding:22px 24px;
    border:1px solid var(--home-line);
    border-radius:18px;
    background:rgba(255,255,255,.92);
    box-shadow:var(--home-shadow-soft);
}

.home-daily-tip-card div{
    display:grid;
    gap:8px;
}

.home-daily-tip-card span{
    width:max-content;
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--home-primary-dark);
    font-size:13px;
    font-weight:950;
}

.home-daily-tip-card span .home-icon{
    color:#d69b23;
}

.home-daily-tip-card p{
    margin:0;
    color:var(--home-muted);
    line-height:1.8;
    font-size:15px;
}

.home-daily-tip-card a{
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:0 18px;
    border-radius:12px;
    color:#fff;
    background:var(--home-primary);
    font-weight:950;
    white-space:nowrap;
}

.home-alert-banner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:18px;
    padding:16px 20px;
    border:1px solid rgba(214,155,35,.28);
    border-radius:16px;
    background:linear-gradient(135deg,#fff9ef,#fff);
    box-shadow:var(--home-shadow-soft);
}

.home-alert-banner strong{
    display:block;
    color:var(--home-ink);
    font-size:15px;
    font-weight:950;
}

.home-alert-banner p{
    margin:6px 0 0;
    color:var(--home-muted);
    font-size:13px;
    line-height:1.7;
}

.home-alert-banner a{
    flex:0 0 auto;
    min-height:42px;
    padding:0 16px;
    display:inline-flex;
    align-items:center;
    border-radius:10px;
    color:#fff;
    background:var(--home-primary);
    font-size:13px;
    font-weight:950;
    white-space:nowrap;
}

.home-quick-actions{
    margin:22px 0 0;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
}

.home-quick-card{
    min-height:112px;
    padding:16px 18px;
    display:grid;
    gap:6px;
    border:1px solid var(--home-line);
    border-radius:16px;
    background:rgba(255,255,255,.9);
    box-shadow:var(--home-shadow-soft);
    transition:.22s ease;
}

.home-quick-card:hover{
    transform:translateY(-4px);
    border-color:var(--home-line-strong);
    box-shadow:var(--home-shadow);
}

.home-quick-icon{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:12px;
    color:var(--home-primary);
    background:var(--home-primary-soft);
}

.home-quick-icon svg{
    width:20px;
    height:20px;
}

.home-quick-card strong{
    color:var(--home-ink);
    font-size:15px;
    font-weight:950;
}

.home-quick-card small{
    color:var(--home-muted);
    font-size:12px;
    line-height:1.6;
}

.home-section{
    margin-top:28px;
    padding:22px;
    border:1px solid var(--home-line);
    border-radius:18px;
    background:rgba(255,255,255,.88);
    box-shadow:var(--home-shadow-soft);
}

.home-community-section{
    margin-bottom:8px;
}

.home-section-head{
    margin-bottom:18px;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:14px;
}

.home-section-head h2{
    margin:0;
    color:var(--home-ink);
    font-size:22px;
    font-weight:950;
}

.home-section-head p{
    margin:8px 0 0;
    color:var(--home-muted);
    font-size:14px;
    line-height:1.7;
}

.home-section-head a{
    flex:0 0 auto;
    color:var(--home-primary);
    font-size:13px;
    font-weight:900;
    white-space:nowrap;
}

.home-categories-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
    gap:14px;
}

.home-category-card{
    min-height:148px;
    padding:18px;
    display:grid;
    gap:8px;
    border:1px solid rgba(15,115,128,.10);
    border-radius:14px;
    background:linear-gradient(180deg,#ffffff,#f8fcfc);
    transition:.22s ease;
}

.home-category-card:hover{
    transform:translateY(-4px);
    border-color:var(--home-line-strong);
    box-shadow:0 16px 36px rgba(31,76,88,.08);
}

.home-category-card strong{
    color:var(--home-ink);
    font-size:16px;
    font-weight:950;
}

.home-category-card p{
    margin:0;
    color:var(--home-muted);
    font-size:13px;
    line-height:1.75;
}

.home-category-card span{
    margin-top:auto;
    color:var(--home-primary);
    font-size:12px;
    font-weight:900;
}

.home-product-grid,
.home-community-grid{
    display:grid;
    gap:14px;
}

.home-product-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
}

.home-community-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
}

.home-product-image{
    position:relative;
}

.home-product-badge{
    position:absolute;
    top:8px;
    right:8px;
    z-index:1;
    padding:4px 8px;
    border-radius:999px;
    color:#fff;
    background:#d64545;
    font-size:11px;
    font-weight:950;
}

.home-product-meta{
    margin-top:auto;
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:8px;
}

.home-hero-trust{
    margin-top:16px;
    display:flex;
    flex-wrap:wrap;
    gap:12px 18px;
    color:#274757;
    font-size:13px;
    font-weight:800;
}

.home-hero-trust span{
    display:inline-flex;
    align-items:center;
    gap:8px;
}

.home-hero-trust svg{
    color:var(--home-primary);
}

.home-fay-card{
    grid-column:3;
    align-self:center;
    min-height:320px;
    padding:18px 16px 16px;
    display:flex;
    flex-direction:column;
    border:1px solid var(--home-line);
    border-radius:18px;
    background:rgba(255,255,255,.88);
    box-shadow:var(--home-shadow);
}

.home-fay-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    color:var(--home-ink);
}

.home-fay-head strong,
.home-fay-head span{
    display:block;
}

.home-fay-head strong{
    font-size:16px;
    font-weight:950;
}

.home-fay-head span{
    margin-top:8px;
    color:var(--home-muted);
    font-size:13px;
    font-weight:750;
}

.home-fay-chat{
    flex:1;
    min-height:0;
    margin-top:14px;
    display:block;
}

.home-fay-robot{
    flex:0 0 auto;
    width:48px;
    height:48px;
    position:relative;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:linear-gradient(145deg,#dbf1f2,#ffffff);
    box-shadow:inset 0 0 0 8px rgba(15,115,128,.06);
}

.home-fay-robot::before{
    content:"";
    width:40px;
    height:28px;
    border-radius:20px;
    background:linear-gradient(180deg,#165d68,#0a2028);
    box-shadow:0 12px 24px rgba(15,115,128,.18);
}

.home-fay-robot::after{
    content:"";
    position:absolute;
    width:5px;
    height:5px;
    border-radius:50%;
    background:#9ff3f1;
    box-shadow:16px 0 0 #9ff3f1;
    transform:translateX(-8px);
}

.home-fay-robot i{
    position:absolute;
    inset:auto 14px -6px;
    height:14px;
    border-radius:14px 14px 8px 8px;
    background:#fff;
    border:1px solid rgba(15,115,128,.12);
}

.home-fay-log{
    height:180px;
    overflow:auto;
    display:grid;
    align-content:start;
    gap:10px;
    padding:4px 2px 6px;
    scrollbar-width:thin;
}

.home-fay-chat p{
    margin:0;
    padding:12px 13px;
    border:1px solid rgba(15,115,128,.10);
    border-radius:14px;
    color:#31495a;
    background:#fff;
    font-size:13px;
    line-height:1.65;
    box-shadow:0 12px 28px rgba(31,76,88,.06);
}

.home-fay-message.user{
    justify-self:end;
    max-width:92%;
    color:#fff;
    background:linear-gradient(135deg,var(--home-primary),var(--home-primary-dark));
}

.home-fay-message.assistant{
    justify-self:start;
    max-width:96%;
}

.home-fay-form{
    margin-top:10px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px;
    align-items:center;
}

.home-fay-form input{
    min-width:0;
    width:100%;
    min-height:42px;
    border:1px solid rgba(15,115,128,.16);
    border-radius:10px;
    padding:0 12px;
    color:var(--home-text);
    background:#fff;
    font:inherit;
    font-size:13px;
    font-weight:750;
    outline:none;
    box-shadow:0 12px 26px rgba(31,76,88,.05);
}

.home-fay-form input:focus{
    border-color:var(--home-line-strong);
    box-shadow:0 0 0 4px rgba(15,115,128,.09);
}

.home-fay-form button,
.home-fay-login{
    min-height:42px;
    min-width:88px;
    border:0;
    color:#fff;
    background:linear-gradient(135deg,var(--home-primary),var(--home-primary-dark));
    box-shadow:0 18px 34px rgba(15,115,128,.18);
    cursor:pointer;
}

.home-content-split{
    margin-top:clamp(24px,3vw,32px);
    display:grid;
    grid-template-columns:var(--home-layout-columns);
    gap:var(--home-layout-gap);
    align-items:start;
    direction:ltr;
    content-visibility:auto;
    contain-intrinsic-size:900px;
}

.home-content-split.is-products-only{
    grid-template-columns:1fr;
}

.home-content-split.is-products-only .home-products-panel{
    grid-column:1 / -1;
}

.home-hero-showcase.no-fay-assistant{
    --home-layout-columns:minmax(0,1.15fr) minmax(0,.85fr);
}

.home-hero-showcase.no-fay-assistant .home-hero-visual{
    grid-column:1;
}

.home-hero-showcase.no-fay-assistant .home-hero-copy{
    grid-column:2;
}

.home-products-panel{
    grid-column:2 / 4;
    grid-row:1;
    direction:rtl;
}

.home-community-panel{
    grid-column:1 / 2;
    grid-row:1;
    direction:rtl;
}

.home-products-panel,
.home-community-panel{
    padding:20px;
    border:1px solid var(--home-line);
    border-radius:12px;
    background:rgba(255,255,255,.86);
    box-shadow:0 12px 40px rgba(31,76,88,.06);
}

.home-panel-head{
    margin-bottom:16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.home-panel-head h2{
    margin:0;
    color:var(--home-ink);
    font-size:20px;
    font-weight:950;
}

.home-panel-head a{
    color:var(--home-primary);
    font-size:13px;
    font-weight:850;
}

.home-product-row{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:14px;
}

.home-product-card{
    min-height:246px;
    padding:12px;
    display:flex;
    flex-direction:column;
    border:1px solid rgba(15,115,128,.10);
    border-radius:11px;
    background:#fff;
    transition:.22s ease;
}

.home-product-card:hover{
    transform:translateY(-5px);
    box-shadow:0 16px 34px rgba(31,76,88,.08);
}

.home-product-link{
    display:block;
    text-align:center;
}

.home-product-image{
    height:116px;
    display:grid;
    place-items:center;
    margin-bottom:10px;
    border-radius:10px;
    background:linear-gradient(180deg,#fbfdfd,#f4faf9);
}

.home-product-image img{
    max-width:88%;
    max-height:104px;
    object-fit:contain;
}

.home-product-image span{
    color:var(--home-primary);
    font-weight:950;
}

.home-product-card h3{
    min-height:42px;
    margin:0;
    color:var(--home-ink);
    font-size:13px;
    line-height:1.55;
    font-weight:950;
}

.home-product-card small{
    display:block;
    margin-top:4px;
    color:var(--home-muted);
    font-size:12px;
}

.home-product-meta{
    margin-top:auto;
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:8px;
}

.home-product-meta span{
    color:#b17a24;
    font-size:12px;
    font-weight:850;
}

.home-product-meta strong{
    color:var(--home-ink);
    font-size:13px;
    font-weight:950;
    white-space:nowrap;
}

.home-product-add{
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    border:1px solid var(--home-line);
    border-radius:9px;
    color:var(--home-primary);
    background:#fff;
    cursor:pointer;
    transition:.18s ease;
}

.home-product-add svg{
    width:17px;
    height:17px;
}

.home-product-add:hover,
.home-product-add.is-added{
    color:#fff;
    border-color:var(--home-primary);
    background:var(--home-primary);
}

.home-community-row{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
}

.home-community-card{
    min-height:246px;
    padding:14px;
    border:1px solid rgba(15,115,128,.10);
    border-radius:11px;
    background:#fff;
    display:flex;
    flex-direction:column;
    gap:11px;
}

.home-community-card header{
    display:flex;
    align-items:center;
    gap:10px;
}

.home-community-avatar{
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    flex:0 0 auto;
    border-radius:50%;
    color:#fff;
    background:linear-gradient(135deg,var(--home-primary),var(--home-accent));
    font-size:12px;
    font-weight:950;
}

.home-community-card header strong,
.home-community-card header span{
    display:block;
}

.home-community-card header strong{
    color:var(--home-ink);
    font-size:13px;
    font-weight:950;
}

.home-community-card header span{
    margin-top:2px;
    color:var(--home-muted);
    font-size:11px;
}

.home-community-card p{
    margin:0;
    color:#2e4758;
    font-size:13px;
    line-height:1.8;
}

.home-community-image{
    height:78px;
    display:block;
    overflow:hidden;
    border-radius:10px;
    background:var(--home-primary-soft);
}

.home-community-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.home-community-card footer{
    margin-top:auto;
    display:flex;
    align-items:center;
    gap:16px;
    color:#102436;
    font-size:12px;
    font-weight:850;
}

.home-community-card footer span,
.home-community-card footer a{
    display:inline-flex;
    align-items:center;
    gap:5px;
}

.home-community-card footer svg{
    width:17px;
    height:17px;
}

.home-empty-card,
.home-community-empty{
    padding:22px;
    border:1px dashed var(--home-line-strong);
    border-radius:12px;
    color:var(--home-muted);
    background:var(--home-primary-soft);
}

.home-community-empty{
    grid-column:1 / -1;
}

.home-community-empty strong{
    display:block;
    color:var(--home-ink);
    margin-bottom:8px;
}

.home-community-empty p{
    margin:0 0 12px;
}

.home-community-empty a{
    color:var(--home-primary);
    font-weight:950;
}

.home-benefits-bar{
    margin-top:clamp(36px,5vw,56px);
    padding-top:clamp(28px,4vw,40px);
    display:flex;
    justify-content:center;
    align-items:flex-start;
    flex-wrap:wrap;
    gap:clamp(28px,6vw,72px);
    border-top:1px solid rgba(31,76,88,.08);
    background:transparent;
}

.home-benefits-bar p{
    margin:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    text-align:center;
}

.home-benefits-bar strong{
    color:var(--home-ink);
    font-size:14px;
    font-weight:900;
}

.home-benefits-bar span{
    color:var(--home-muted);
    font-size:12px;
    line-height:1.5;
}

@media(max-width:1180px){
    .site-navbar,
    .fay-navbar.site-navbar{
        grid-template-columns:minmax(140px,1fr) auto minmax(140px,1fr);
        column-gap:16px;
    }

    .site-nav-links{
        gap:14px;
    }

    .skinai-home-main{
        --home-layout-columns:1fr;
        width:100%;
        max-width:100%;
        padding-inline:16px;
    }

    .home-hero-showcase,
    .home-content-split{
        grid-template-columns:1fr !important;
        direction:rtl;
    }

    .home-hero-visual,
    .home-hero-copy,
    .home-fay-card,
    .home-products-panel,
    .home-community-panel{
        grid-column:1 / -1 !important;
        grid-row:auto !important;
        width:100%;
        max-width:100%;
        min-width:0;
    }

    .home-hero-showcase{
        grid-template-columns:1fr;
    }

    .home-hero-visual,
    .home-hero-copy{
        grid-column:auto;
    }

    .home-fay-card{
        grid-column:1 / -1;
        min-height:0;
        display:grid;
        grid-template-columns:.7fr 1fr;
        gap:18px;
        align-items:center;
    }

    .home-fay-chat,
    .home-fay-form{
        margin-top:0;
    }

    .home-product-row{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .home-community-row{
        grid-template-columns:1fr;
    }
}

@media(max-width:1080px){
    .site-nav-search,
    .skinai-home-search{
        display:none;
    }

    .home-product-row{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .home-community-row{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:980px){
    .site-navbar,
    .fay-navbar.site-navbar{
        grid-template-columns:minmax(0,1fr) auto;
        grid-template-rows:auto auto;
        align-items:center;
    }

    .site-nav-start{
        grid-column:1;
        grid-row:1;
    }

    .site-nav-actions{
        grid-column:2;
        grid-row:1;
    }

    .site-nav-links{
        grid-column:1 / -1;
        grid-row:2;
        justify-self:stretch;
        justify-content:center;
        flex-wrap:wrap;
        overflow-x:auto;
        padding-bottom:2px;
        scrollbar-width:none;
    }

    .site-nav-links::-webkit-scrollbar{
        display:none;
    }

    .skinai-home-body .skinai-navbar{
        grid-template-columns:auto auto;
        padding:12px 18px;
    }

    .skinai-home-main{
        --home-layout-columns:1fr;
        width:100%;
        padding-inline:14px;
    }

    .home-hero-showcase,
    .home-content-split{
        grid-template-columns:1fr !important;
        direction:rtl;
        width:100%;
    }

    .home-hero-visual,
    .home-hero-copy,
    .home-fay-card,
    .home-products-panel,
    .home-community-panel{
        grid-column:1 / -1 !important;
        grid-row:auto !important;
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        box-sizing:border-box;
    }

    .home-hero-visual{
        min-height:300px;
    }

    .home-hero-visual:has(.home-hero-ads){
        min-height:260px;
        height:280px;
        max-height:280px;
        aspect-ratio:auto;
        align-self:stretch;
        border-radius:10px;
    }

    .home-hero-products{
        right:170px;
        left:22px;
        bottom:40px;
        height:190px;
    }

    .home-hero-tablet{
        right:16px;
        width:188px;
    }

    .home-hero-copy{
        min-height:0;
        padding:22px 0 8px;
        align-items:center;
        text-align:center;
    }

    .home-hero-trust{
        justify-content:center;
    }

    .home-fay-card{
        display:block;
    }

    .home-fay-chat,
    .home-fay-form{
        margin-top:18px;
    }

    .home-product-row{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        width:100%;
    }

    .home-product-card{
        width:100%;
        min-width:0;
    }
}

@media(max-width:720px){
    .site-navbar,
    .fay-navbar.site-navbar{
        width:100%;
        min-height:0;
        padding:10px 12px;
        gap:10px;
    }

    .site-logo-mark,
    .site-navbar .fay-icon-btn,
    .site-avatar-link{
        width:38px;
        height:38px;
    }

    .site-logo-text strong{
        font-size:22px;
    }

    .site-logo-text small{
        font-size:12px;
    }

    .site-nav-actions{
        gap:7px;
    }

    .site-inbox-btn{
        display:none !important;
    }

    .site-nav-links{
        gap:16px;
    }

    .site-nav-links .fay-nav-link{
        font-size:13px;
        padding-bottom:12px;
    }

    .skinai-logo-text strong{
        font-size:23px;
    }

    .skinai-home-body .skinai-navbar{
        gap:12px;
    }

    .home-hero-visual{
        min-height:270px;
    }

    .home-hero-visual:has(.home-hero-ads){
        min-height:220px;
        height:240px;
        max-height:240px;
        aspect-ratio:auto;
        border-radius:8px;
    }

    .home-hero-products{
        right:14px;
        left:14px;
        bottom:34px;
        height:165px;
        gap:8px;
    }

    .home-hero-bottle{
        height:155px;
        padding:8px;
    }

    .home-hero-bottle-4{
        display:none;
    }

    .home-hero-tablet{
        display:none;
    }

    .home-hero-copy h1{
        font-size:32px;
    }

    .home-hero-actions{
        grid-template-columns:1fr;
    }

    .home-primary-btn,
    .home-secondary-btn{
        width:100%;
    }

    .home-daily-tip-card{
        flex-direction:column;
        align-items:stretch;
    }

    .home-product-row,
    .home-community-row{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .home-benefits-bar{
        flex-direction:column;
        align-items:center;
        gap:22px;
    }
}

/* =========================
   CATALOG PAGE
========================= */

body.catalog-body{
    min-height:100vh;
    color:#171824;
    background:
        linear-gradient(135deg,#ffffff 0%,#fbfefe 42%,#eef8f6 100%);
}

.catalog-body button,
.catalog-body input,
.catalog-body select{
    font-family:var(--font-body);
}

.catalog-body button{
    cursor:pointer;
}

.catalog-page{
    min-height:100vh;
    padding-bottom:38px;
}

.catalog-page svg{
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.catalog-navbar{
    width:min(96%,1540px);
    margin:0 auto;
    padding:18px 6px 14px;
    display:grid;
    grid-template-columns:auto minmax(420px,1fr) auto;
    align-items:center;
    gap:24px;
    direction:ltr;
}

.catalog-logo{
    display:inline-flex;
    align-items:center;
    gap:12px;
    color:#111421;
    font-size:28px;
    font-weight:950;
    letter-spacing:0;
}

.catalog-logo-mark{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    color:#2f7f8f;
}

.catalog-logo-mark::before{
    content:"✾";
    font-size:39px;
    line-height:1;
}

.catalog-nav-links{
    direction:rtl;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:34px;
}

.catalog-nav-links a{
    position:relative;
    min-height:44px;
    display:inline-flex;
    align-items:center;
    color:#151723;
    font-size:15px;
    font-weight:850;
    white-space:nowrap;
    transition:.2s ease;
}

.catalog-nav-links a:hover,
.catalog-nav-links a.active{
    color:#246a78;
}

.catalog-nav-links a.active::after{
    content:"";
    position:absolute;
    right:0;
    left:0;
    bottom:0;
    height:2px;
    border-radius:99px;
    background:#2f7f8f;
}

.catalog-actions{
    direction:rtl;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
}

.catalog-search{
    width:250px;
    height:46px;
    padding:0 17px;
    display:flex;
    align-items:center;
    gap:10px;
    border:1px solid rgba(30,32,48,.10);
    border-radius:999px;
    background:rgba(255,255,255,.72);
    box-shadow:0 10px 30px rgba(31,88,110,.06);
}

.catalog-search input{
    width:100%;
    min-width:0;
    border:0;
    outline:0;
    background:transparent;
    color:#171824;
    font-size:14px;
    text-align:right;
}

.catalog-search input::placeholder{
    color:#9a95a8;
}

.catalog-search svg{
    color:#6d687b;
    flex:0 0 auto;
}

.catalog-icon-btn{
    position:relative;
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border:0;
    border-radius:50%;
    color:#111421;
    background:transparent;
    transition:.2s ease;
}

.catalog-icon-btn:hover{
    color:#2f7f8f;
    background:rgba(47,127,143,.08);
}

.catalog-cart-btn span{
    position:absolute;
    top:0;
    left:0;
    min-width:19px;
    height:19px;
    display:grid;
    place-items:center;
    padding:0 5px;
    border-radius:99px;
    color:#fff;
    background:#2f7f8f;
    font-size:11px;
    font-weight:850;
}

.catalog-avatar{
    min-width:66px;
    height:46px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    color:#111421;
}

.catalog-avatar img{
    width:42px;
    height:42px;
    border-radius:50%;
    object-fit:cover;
    border:1px solid rgba(17,20,33,.12);
}

.catalog-avatar svg{
    width:16px;
    height:16px;
}

.catalog-shell{
    width:min(96%,1480px);
    margin:10px auto 0;
}

.catalog-hero-panel{
    min-height:310px;
    padding:30px 34px;
    border:1px solid rgba(15,115,128,.16);
    border-radius:20px;
    background:
        radial-gradient(circle at 12% 0%,rgba(95,145,165,.16),transparent 34%),
        linear-gradient(135deg,#ffffff,#f3faf9);
    box-shadow:0 24px 70px rgba(31,88,110,.09);
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(300px,.68fr);
    gap:26px;
    align-items:center;
    overflow:hidden;
}

.catalog-hero-decor{
    min-height:260px;
    grid-template-columns:1fr;
    padding:0;
}

.catalog-hero-decor .catalog-hero-visual{
    width:min(720px,100%);
    min-height:260px;
    margin:0 auto;
}

.catalog-breadcrumb{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:9px;
    color:#7e778d;
    font-size:13px;
}

.catalog-breadcrumb a{
    display:inline-grid;
    place-items:center;
    color:#7e778d;
}

.catalog-breadcrumb svg{
    width:17px;
    height:17px;
}

.catalog-hero-copy{
    text-align:right;
    display:grid;
    gap:12px;
}

.catalog-hero-kicker{
    width:max-content;
    min-height:30px;
    display:inline-flex;
    align-items:center;
    padding:0 12px;
    border:1px solid rgba(15,115,128,.18);
    border-radius:999px;
    color:#0f7380;
    background:#eaf7f7;
    font-size:12px;
    font-weight:950;
}

.catalog-hero-copy h1{
    margin:0;
    color:#0d1b2a;
    font-size:clamp(34px,4vw,56px);
    line-height:1.35;
    font-weight:950;
}

.catalog-hero-copy p{
    margin:0;
    max-width:720px;
    color:#667785;
    font-size:16px;
    line-height:1.8;
    font-weight:650;
}

.catalog-hero-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.catalog-hero-actions a{
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:0 18px;
    border-radius:12px;
    color:#fff;
    background:#0f7380;
    font-weight:950;
}

.catalog-hero-actions a.catalog-hero-secondary{
    color:#0d1b2a;
    border:1px solid rgba(15,115,128,.28);
    background:#fff;
}

.catalog-hero-actions svg{
    width:18px;
    height:18px;
}

.catalog-hero-stats{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,130px));
    gap:10px;
    margin-top:4px;
}

.catalog-hero-stats div{
    min-height:76px;
    display:grid;
    place-items:center;
    gap:4px;
    padding:10px;
    border:1px solid rgba(15,115,128,.14);
    border-radius:14px;
    background:rgba(255,255,255,.76);
}

.catalog-hero-stats strong{
    color:#0f7380;
    font-size:22px;
}

.catalog-hero-stats span{
    color:#667785;
    font-size:12px;
    font-weight:800;
}

.catalog-hero-visual{
    min-height:250px;
    position:relative;
}

.catalog-hero-visual::before{
    content:"";
    position:absolute;
    inset:20px 34px 18px;
    border-radius:999px;
    background:#dff2f0;
    filter:blur(2px);
}

.catalog-hero-product{
    position:absolute;
    display:grid;
    place-items:center;
    width:132px;
    height:184px;
    padding:12px;
    border:1px solid rgba(15,115,128,.14);
    border-radius:18px;
    color:#0f7380;
    background:rgba(255,255,255,.92);
    box-shadow:0 18px 42px rgba(31,88,110,.13);
    font-weight:950;
}

.catalog-hero-product img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.catalog-hero-product-1{
    right:50%;
    bottom:18px;
    transform:translateX(50%);
    z-index:3;
}

.catalog-hero-product-2{
    right:18px;
    bottom:36px;
    transform:rotate(5deg);
    z-index:2;
}

.catalog-hero-product-3{
    left:16px;
    bottom:30px;
    transform:rotate(-5deg);
    z-index:1;
}

.catalog-layout{
    margin-top:0;
    display:block;
    direction:rtl;
}

.catalog-content{
    direction:rtl;
}

.catalog-inline-filters{
    margin-top:14px;
    display:grid;
    gap:12px;
}

.catalog-filter-row{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:12px;
    min-width:0;
}

.catalog-filter-label{
    flex:0 0 auto;
    min-width:92px;
    color:#151723;
    font-size:13px;
    font-weight:950;
}

.catalog-filter-row .catalog-category-tabs{
    flex:1 1 auto;
}

.catalog-filter-row-tools{
    flex-wrap:wrap;
    gap:14px;
}

.catalog-inline-price{
    flex:1 1 280px;
    min-width:220px;
    display:grid;
    grid-template-columns:auto minmax(120px,1fr) auto;
    align-items:center;
    gap:12px;
    padding:10px 14px;
    border:1px solid rgba(30,32,48,.10);
    border-radius:8px;
    background:rgba(255,255,255,.82);
}

.catalog-inline-price strong{
    color:#151723;
    font-size:13px;
    font-weight:950;
}

.catalog-inline-price span{
    color:#6e6879;
    font-size:12px;
    font-weight:800;
    white-space:nowrap;
}

.catalog-inline-price input[type="range"]{
    width:100%;
    accent-color:#2f7f8f;
}

.catalog-filter-chip.active,
.catalog-reset-chip.active{
    color:#2f7f8f;
    border-color:#76aeba;
    background:#fff;
}

.catalog-reset-chip{
    flex:0 0 auto;
    min-width:132px;
    color:#246a78;
    border-color:#9fcdd6;
    background:#f6fbfb;
}

.catalog-reset-chip:hover{
    background:#eef8f7;
}

.catalog-filter-panel{
    position:sticky;
    top:16px;
    padding:22px;
    border:1px solid rgba(30,32,48,.08);
    border-radius:18px;
    background:rgba(255,255,255,.82);
    box-shadow:0 20px 58px rgba(31,88,110,.07);
}

.catalog-filter-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding-bottom:16px;
    border-bottom:1px solid rgba(30,32,48,.08);
}

.catalog-filter-head h2{
    margin:0;
    color:#151723;
    font-size:15px;
    font-weight:950;
}

.catalog-filter-head svg{
    color:#111421;
    width:19px;
    height:19px;
}

.catalog-filter-group{
    padding:16px 0;
    border-bottom:1px solid rgba(30,32,48,.08);
}

.catalog-filter-group:last-of-type{
    border-bottom:0;
}

.catalog-filter-group summary{
    list-style:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:#151723;
    font-size:14px;
    font-weight:950;
}

.catalog-filter-group summary::-webkit-details-marker{
    display:none;
}

.catalog-filter-group summary::after{
    content:"⌄";
    color:#111421;
    font-size:19px;
    line-height:1;
    transition:.18s ease;
}

.catalog-filter-group[open] summary::after{
    transform:rotate(180deg);
}

.catalog-check-list{
    margin-top:13px;
    display:grid;
    gap:10px;
}

.catalog-check{
    position:relative;
    display:grid;
    grid-template-columns:20px minmax(0,1fr) auto;
    align-items:center;
    gap:8px;
    color:#6e6879;
    font-size:13px;
    font-weight:700;
}

.catalog-check input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.catalog-check span{
    width:18px;
    height:18px;
    border:1px solid rgba(88,82,103,.24);
    border-radius:5px;
    background:#fff;
    transition:.18s ease;
}

.catalog-check span::after{
    content:"";
    width:8px;
    height:4px;
    display:block;
    margin:5px auto 0;
    border-right:2px solid #fff;
    border-bottom:2px solid #fff;
    opacity:0;
    transform:rotate(45deg);
}

.catalog-check input:checked + span{
    border-color:#2f7f8f;
    background:#2f7f8f;
}

.catalog-check input:checked + span::after{
    opacity:1;
}

.catalog-check b{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:13px;
}

.catalog-check em{
    color:#837d91;
    font-style:normal;
    font-size:12px;
}

.catalog-muted{
    margin:0;
    color:#8c8596;
    font-size:12px;
    line-height:1.7;
}

.catalog-price-filter{
    display:grid;
    gap:13px;
}

.catalog-price-head,
.catalog-price-scale{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.catalog-price-head strong{
    color:#151723;
    font-size:14px;
    font-weight:950;
}

.catalog-price-head span,
.catalog-price-scale span{
    color:#6e6879;
    font-size:12px;
    font-weight:800;
}

.catalog-price-filter input[type="range"]{
    width:100%;
    accent-color:#2f7f8f;
}

.catalog-filter-apply{
    width:100%;
    min-height:44px;
    margin-top:4px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:0;
    border-radius:8px;
    color:#246a78;
    background:#eef8f7;
    font-size:13px;
    font-weight:950;
    transition:.2s ease;
}

.catalog-filter-apply:hover{
    background:#eadcf8;
    transform:translateY(-1px);
}

.catalog-filter-apply svg{
    width:17px;
    height:17px;
}

.catalog-toolbar{
    min-height:48px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}

.catalog-toolbar-controls{
    display:flex;
    align-items:center;
    gap:12px;
    flex-shrink:0;
}

.catalog-sort-box{
    position:relative;
    flex:0 0 auto;
    min-width:158px;
}

.catalog-sort-box select{
    width:100%;
    height:46px;
    padding:0 38px 0 14px;
    border:1px solid rgba(30,32,48,.10);
    border-radius:8px;
    color:#4d6368;
    background:#fff;
    font-size:13px;
    font-weight:800;
    appearance:none;
    outline:0;
}

.catalog-sort-box svg{
    position:absolute;
    top:50%;
    right:12px;
    width:17px;
    height:17px;
    color:#587178;
    transform:translateY(-50%);
    pointer-events:none;
}

.catalog-tabs-area{
    min-width:0;
    flex:1 1 auto;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:9px;
    direction:rtl;
}

.catalog-category-tabs{
    min-width:0;
    flex:1 1 auto;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:9px;
    overflow:auto;
    scrollbar-width:none;
}

.catalog-category-tabs::-webkit-scrollbar{
    display:none;
}

.catalog-chip{
    flex:0 0 auto;
    min-width:82px;
    height:52px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 22px;
    border:1px solid rgba(30,32,48,.10);
    border-radius:8px;
    color:#5d5869;
    background:rgba(255,255,255,.82);
    font-size:13px;
    font-weight:850;
    white-space:nowrap;
    transition:.18s ease;
}

.catalog-chip:hover,
.catalog-chip.active{
    color:#2f7f8f;
    border-color:#76aeba;
    background:#fff;
}

.catalog-back-chip{
    position:relative;
    z-index:2;
    flex:0 0 auto;
    min-width:88px;
    color:#246a78;
    border-color:#9fcdd6;
    background:#f6fbfb;
    box-shadow:0 8px 20px rgba(47,127,143,.08);
}

.catalog-results-row{
    margin:14px 0 16px;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:14px;
}

.catalog-results-row p{
    margin:0;
    color:#6f687a;
    font-size:13px;
    font-weight:800;
}

.catalog-view-toggle{
    display:inline-flex;
    gap:4px;
    padding:4px;
    border:1px solid rgba(30,32,48,.08);
    border-radius:8px;
    background:#fff;
}

.catalog-view-toggle button{
    width:34px;
    height:34px;
    border:0;
    border-radius:6px;
    color:#777083;
    background:transparent;
    display:grid;
    place-items:center;
}

.catalog-view-toggle button.active{
    color:#fff;
    background:#2f7f8f;
}

.catalog-view-toggle svg{
    width:18px;
    height:18px;
}

.catalog-products-grid{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:14px;
}

.catalog-product-card{
    min-width:0;
    overflow:hidden;
    border:1px solid rgba(30,32,48,.09);
    border-radius:8px;
    background:#fff;
    box-shadow:0 8px 22px rgba(31,88,110,.07);
    transition:.2s ease;
}

.catalog-product-card:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 32px rgba(31,88,110,.10);
}

.catalog-product-card[hidden],
.catalog-card-actions[hidden],
.catalog-qty-panel[hidden]{
    display:none !important;
}

.catalog-product-media{
    position:relative;
    height:168px;
    overflow:hidden;
    background:
        linear-gradient(145deg,#fff7f4 0%,#fff 50%,#f4fbfa 100%);
}

.catalog-product-image{
    position:relative;
    height:100%;
    padding:12px 10px 8px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.catalog-product-image img{
    width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    filter:drop-shadow(0 18px 18px rgba(31,88,110,.12));
}

.catalog-product-image span{
    color:#2f7f8f;
    font-size:20px;
    font-weight:950;
}

.catalog-badge{
    position:absolute;
    top:8px;
    right:8px;
    z-index:3;
    min-height:22px;
    padding:4px 8px;
    border-radius:999px;
    color:#fff;
    font-size:10px;
    font-weight:950;
}

.catalog-badge.best-seller{
    background:#2f7f8f;
}

.catalog-badge.green{
    background:#55bb84;
}

.catalog-badge.red{
    background:#e45778;
}

.catalog-badge + .catalog-badge{
    top:34px;
}

.catalog-wish-btn{
    position:absolute;
    top:8px;
    left:8px;
    z-index:4;
    width:30px;
    height:30px;
    border:0;
    border-radius:50%;
    display:grid;
    place-items:center;
    color:#73707d;
    background:rgba(255,255,255,.72);
    transition:.18s ease;
}

.catalog-wish-btn:hover{
    color:#e45778;
    background:#fff;
}

.catalog-wish-btn.is-favorite,
.detail-wish-btn.is-favorite{
    color:#e45778;
    background:#fff4f6;
}

.catalog-wish-btn svg{
    width:16px;
    height:16px;
}

.catalog-wish-btn.is-favorite svg,
.detail-wish-btn.is-favorite svg{
    fill:currentColor;
}

.catalog-product-info{
    padding:10px 12px 12px;
    text-align:center;
}

.catalog-product-type{
    display:block;
    min-height:18px;
    color:#246a78;
    font-size:11px;
    line-height:1.5;
    font-weight:950;
}

.catalog-product-info h2{
    min-height:38px;
    margin:4px 0 5px;
    color:#171824;
    font-size:13px;
    line-height:1.45;
    font-weight:950;
    overflow-wrap:anywhere;
}

.catalog-product-info h2 a{
    color:inherit;
}

.catalog-product-info p{
    min-height:32px;
    margin:0 0 6px;
    color:#6f687a;
    font-size:11px;
    line-height:1.6;
    font-weight:650;
}

.catalog-rating{
    min-height:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    color:#6f687a;
    font-size:11px;
}

.catalog-rating span{
    color:#f6a51a;
    font-size:13px;
    line-height:1;
}

.catalog-rating b{
    color:#171824;
}

.catalog-rating em{
    color:#7d7689;
    font-style:normal;
}

.catalog-price{
    margin:4px 0 8px;
    color:#171824;
    font-size:14px;
    font-weight:950;
}

.catalog-card-actions{
    display:grid;
    grid-template-columns:38px minmax(0,1fr);
    gap:8px;
    align-items:center;
}

.catalog-routine-form{
    min-width:0;
    order:2;
}

.catalog-routine-btn,
.catalog-mini-cart,
.catalog-add-btn,
.catalog-confirm-btn,
.catalog-cancel-btn{
    height:34px;
    border-radius:7px;
    font-size:11px;
    font-weight:950;
    transition:.18s ease;
}

.catalog-routine-btn{
    width:100%;
    border:1px solid rgba(47,127,143,.22);
    color:#246a78;
    background:#eef8f7;
}

.catalog-routine-btn:hover,
.catalog-routine-btn.is-added{
    color:#fff;
    background:#2f7f8f;
    border-color:#2f7f8f;
}

.catalog-mini-cart{
    order:1;
    border:1px solid rgba(47,127,143,.22);
    color:#246a78;
    background:#fff;
    display:grid;
    place-items:center;
}

.catalog-mini-cart:hover{
    color:#fff;
    background:#2f7f8f;
    border-color:#2f7f8f;
}

.catalog-mini-cart.is-in-cart{
    color:#fff;
    background:#2f7f8f;
    border-color:#2f7f8f;
    box-shadow:0 10px 18px rgba(47,127,143,.18);
}

.catalog-mini-cart.cart-pop{
    animation:cartButtonPop .34s ease;
}

.catalog-mini-cart.cart-error{
    color:#fff;
    background:#a74444;
    border-color:#a74444;
}

.catalog-mini-cart svg{
    width:16px;
    height:16px;
}

.catalog-add-btn,
.catalog-confirm-btn{
    border:0;
    color:#fff;
    background:#2f7f8f;
}

.catalog-add-btn:hover,
.catalog-confirm-btn:hover{
    background:#246a78;
}

.catalog-add-btn{
    display:none;
}

@keyframes cartButtonPop{
    0%{transform:scale(1);}
    45%{transform:scale(1.12);}
    100%{transform:scale(1);}
}

.catalog-qty-panel{
    display:grid;
    gap:10px;
}

.catalog-qty-row{
    display:grid;
    grid-template-columns:42px 1fr 42px;
    gap:8px;
}

.catalog-qty-row button,
.catalog-qty-row input{
    height:40px;
    border-radius:8px;
    border:1px solid rgba(30,32,48,.10);
    background:#fff;
    color:#171824;
    text-align:center;
    font-size:14px;
    font-weight:950;
}

.catalog-qty-row button:hover{
    color:#2f7f8f;
    border-color:#9fcdd6;
}

.catalog-total-line{
    color:#5d5869;
    font-size:12px;
    font-weight:850;
}

.catalog-confirm-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) 74px;
    gap:8px;
}

.catalog-cancel-btn{
    border:1px solid rgba(30,32,48,.10);
    color:#557078;
    background:#fff;
}

.catalog-cancel-btn:hover{
    border-color:#9fcdd6;
    color:#2f7f8f;
}

.card-cart-message{
    min-height:18px;
    color:#4f8a67;
    font-size:12px;
    font-weight:850;
}

.card-cart-message.error{
    color:#d64f67;
}

.catalog-products-grid.is-list-view{
    grid-template-columns:1fr;
}

.catalog-products-grid.is-list-view .catalog-product-card{
    display:grid;
    grid-template-columns:230px minmax(0,1fr);
}

.catalog-products-grid.is-list-view .catalog-product-media{
    height:260px;
}

.catalog-products-grid.is-list-view .catalog-product-info{
    text-align:right;
    display:grid;
    align-content:center;
}

.catalog-products-grid.is-list-view .catalog-rating{
    justify-content:flex-start;
}

.catalog-empty-state{
    padding:28px;
    border:1px solid rgba(30,32,48,.08);
    border-radius:8px;
    background:#fff;
    text-align:center;
    color:#6f687a;
}

.catalog-empty-state strong{
    display:block;
    margin-bottom:8px;
    color:#171824;
    font-size:18px;
}

.catalog-empty-state p{
    margin:0;
    line-height:1.8;
}

.catalog-pagination{
    margin-top:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    direction:ltr;
}

.catalog-pagination button{
    min-width:34px;
    height:34px;
    border:0;
    border-radius:8px;
    color:#4d6368;
    background:transparent;
    font-size:13px;
    font-weight:950;
}

.catalog-pagination button:hover,
.catalog-pagination button.active{
    color:#fff;
    background:#2f7f8f;
}

.catalog-pagination button:disabled{
    opacity:.45;
    cursor:not-allowed;
}

.catalog-service-strip{
    margin-top:18px;
    padding:18px 20px;
    border:1px solid rgba(30,32,48,.08);
    border-radius:18px;
    background:rgba(255,255,255,.78);
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:0;
    box-shadow:0 18px 50px rgba(31,88,110,.07);
}

.catalog-service-strip > div{
    min-width:0;
    display:grid;
    grid-template-columns:46px minmax(0,1fr);
    column-gap:12px;
    align-items:center;
    padding:0 18px;
    border-left:1px solid rgba(30,32,48,.08);
}

.catalog-service-strip > div:last-child{
    border-left:0;
}

.catalog-service-strip span{
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:#2f7f8f;
    background:#eef8f7;
    grid-row:1 / span 2;
}

.catalog-service-strip strong{
    min-width:0;
    color:#171824;
    font-size:14px;
    line-height:1.5;
    font-weight:950;
    overflow-wrap:anywhere;
}

.catalog-service-strip p{
    min-width:0;
    margin:3px 0 0;
    color:#6f687a;
    font-size:12px;
    line-height:1.6;
    font-weight:700;
}

.catalog-chat-btn{
    position:fixed;
    right:28px;
    bottom:28px;
    z-index:60;
    width:58px;
    height:58px;
    border:0;
    border-radius:50%;
    display:grid;
    place-items:center;
    color:#fff;
    background:#2f7f8f;
    box-shadow:0 18px 34px rgba(47,127,143,.28);
    transition:.2s ease;
}

.catalog-chat-btn:hover{
    transform:translateY(-3px);
    background:#246a78;
}

.catalog-chat-btn svg{
    width:27px;
    height:27px;
}

@media(max-width:1280px){
    .catalog-navbar{
        grid-template-columns:auto 1fr auto;
        gap:16px;
    }

    .catalog-nav-links{
        gap:20px;
    }

    .catalog-search{
        width:210px;
    }

    .catalog-products-grid{
        grid-template-columns:repeat(4,minmax(0,1fr));
    }
}

@media(max-width:1050px){
    .catalog-navbar{
        grid-template-columns:1fr auto;
    }

    .catalog-nav-links{
        order:3;
        grid-column:1 / -1;
        justify-content:flex-start;
        overflow:auto;
        padding-bottom:3px;
        scrollbar-width:none;
    }

    .catalog-nav-links::-webkit-scrollbar{
        display:none;
    }

    .catalog-layout{
        display:block;
    }

    .catalog-filter-row{
        flex-direction:column;
        align-items:stretch;
    }

    .catalog-filter-label{
        min-width:0;
    }

    .catalog-inline-price{
        min-width:0;
    }

    .catalog-hero-panel{
        grid-template-columns:1fr;
    }

    .catalog-hero-visual{
        min-height:220px;
    }

    .catalog-filter-panel{
        position:relative;
        top:auto;
        order:1;
    }

    .catalog-content{
        order:2;
    }

    .catalog-check-list{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .catalog-service-strip{
        grid-template-columns:repeat(2,minmax(0,1fr));
        row-gap:18px;
    }

    .catalog-service-strip > div:nth-child(2n){
        border-left:0;
    }
}

@media(max-width:760px){
    .catalog-page{
        padding-bottom:28px;
    }

    .catalog-navbar{
        width:min(94%,680px);
        grid-template-columns:1fr;
        padding-top:14px;
    }

    .catalog-logo{
        font-size:25px;
    }

    .catalog-actions{
        width:100%;
        justify-content:space-between;
        flex-wrap:wrap;
    }

    .catalog-search{
        order:5;
        width:100%;
    }

    .catalog-nav-links{
        gap:18px;
    }

    .catalog-nav-links a{
        font-size:14px;
    }

    .catalog-shell{
        width:min(94%,680px);
        margin-top:4px;
    }

    .catalog-hero-panel{
        min-height:0;
        padding:20px 18px;
        border-radius:14px;
    }

    .catalog-hero-copy h1{
        font-size:32px;
    }

    .catalog-hero-actions{
        display:grid;
        grid-template-columns:1fr;
    }

    .catalog-hero-stats{
        grid-template-columns:1fr;
    }

    .catalog-hero-actions a{
        width:100%;
    }

    .catalog-hero-decor .catalog-hero-visual{
        min-height:220px;
    }

    .catalog-layout{
        margin-top:16px;
    }

    .catalog-filter-row{
        flex-direction:column;
        align-items:stretch;
    }

    .catalog-filter-label{
        min-width:0;
    }

    .catalog-inline-price{
        min-width:0;
    }

    .catalog-toolbar,
    .catalog-results-row{
        align-items:stretch;
        flex-direction:column;
    }

    .catalog-tabs-area{
        width:100%;
    }

    .catalog-sort-box{
        width:100%;
    }

    .catalog-toolbar-controls{
        width:100%;
        flex-direction:column;
        align-items:stretch;
    }

    .catalog-search{
        width:100%;
    }

    .catalog-results-row{
        margin-top:12px;
    }

    .catalog-results-row p{
        text-align:right;
    }

    .catalog-view-toggle{
        align-self:flex-start;
    }

    .catalog-products-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .catalog-product-media{
        height:150px;
    }

    .catalog-products-grid.is-list-view .catalog-product-card{
        grid-template-columns:1fr;
    }

    .catalog-products-grid.is-list-view .catalog-product-media{
        height:140px;
    }

    .catalog-service-strip{
        grid-template-columns:1fr;
        gap:14px;
        padding:16px;
    }

    .catalog-service-strip > div,
    .catalog-service-strip > div:nth-child(2n){
        border-left:0;
        padding:0;
    }

    .catalog-chat-btn{
        right:18px;
        bottom:18px;
        width:52px;
        height:52px;
    }
}

/* =========================
   PRODUCT DETAIL PAGE
========================= */

.product-detail-body{
    min-height:100vh;
    color:#1a2c32;
    background:
        radial-gradient(ellipse 70% 50% at 10% 0%, rgba(111,169,189,.18), transparent 55%),
        radial-gradient(ellipse 55% 45% at 90% 12%, rgba(238,248,247,.9), transparent 50%),
        linear-gradient(165deg, #f7fbfb 0%, #eef6f7 42%, #fafcfc 100%);
}

.product-detail-page svg{
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.product-detail-shell{
    width:min(92%, 1120px);
    margin:0 auto 56px;
    padding-top:4px;
}

.pd-back{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin:4px 0 20px;
    padding:6px 14px 6px 6px;
    border:1px solid rgba(47,127,143,.18);
    border-radius:999px;
    color:#246a78;
    background:rgba(255,255,255,.88);
    font-size:13px;
    font-weight:800;
    box-shadow:0 4px 14px rgba(31,88,110,.06);
    transition:background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.pd-back-icon{
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:#fff;
    background:#2f7f8f;
    flex:0 0 30px;
}

.pd-back-icon svg{
    width:15px;
    height:15px;
    transform:scaleX(-1);
}

.pd-back-text{
    line-height:1;
    padding-inline-end:4px;
}

.pd-back:hover{
    color:#1a5f6c;
    border-color:rgba(47,127,143,.35);
    background:#fff;
    transform:translateY(-1px);
    box-shadow:0 8px 18px rgba(31,88,110,.1);
}

.pd-back:hover .pd-back-icon{
    background:#246a78;
}

.product-detail-messages p{
    margin:0 0 14px;
    padding:12px 16px;
    border-radius:10px;
    background:#eef8f7;
    color:#246a78;
    font-weight:800;
}

.pd-hero{
    display:grid;
    grid-template-columns:minmax(0,.85fr) minmax(300px,1fr);
    gap:clamp(24px, 3.5vw, 48px);
    align-items:start;
    animation:pdFadeUp .55s ease both;
}

@keyframes pdFadeUp{
    from{ opacity:0; transform:translateY(14px); }
    to{ opacity:1; transform:translateY(0); }
}

.pd-gallery{
    display:grid;
    gap:12px;
}

.pd-gallery-main{
    position:relative;
    aspect-ratio:1 / 1;
    max-width:380px;
    width:100%;
    min-height:0;
    padding:18px;
    border-radius:16px;
    background:linear-gradient(160deg, #fff 0%, #eef8f7 100%);
    overflow:hidden;
    margin-inline:auto;
}

.pd-gallery-main::after{
    content:"";
    position:absolute;
    inset:auto -18% -36% auto;
    width:50%;
    height:50%;
    border-radius:50%;
    background:radial-gradient(circle, rgba(47,127,143,.07), transparent 70%);
    pointer-events:none;
}

.pd-gallery-main img{
    position:absolute;
    inset:18px;
    z-index:1;
    width:calc(100% - 36px);
    height:calc(100% - 36px);
    max-width:none;
    max-height:none;
    margin:auto;
    object-fit:contain;
    object-position:center;
    filter:drop-shadow(0 18px 24px rgba(31,88,110,.12));
    transition:transform .45s ease, opacity .35s ease;
}

.pd-gallery-main img.pd-img-swap{
    animation:pdImgIn .35s ease;
}

@keyframes pdImgIn{
    from{ opacity:.35; transform:scale(.97); }
    to{ opacity:1; transform:scale(1); }
}

.pd-gallery-fallback{
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    color:#2f7f8f;
    font-size:40px;
    font-weight:900;
}

.pd-gallery-thumbs{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.pd-gallery-thumbs button{
    width:64px;
    height:64px;
    padding:5px;
    border:1px solid rgba(47,127,143,.16);
    border-radius:10px;
    background:rgba(255,255,255,.85);
    cursor:pointer;
    transition:border-color .2s ease, transform .2s ease;
}

.pd-gallery-thumbs button:hover{
    transform:translateY(-2px);
}

.pd-gallery-thumbs button.active{
    border-color:#2f7f8f;
    background:#fff;
}

.pd-gallery-thumbs img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.pd-info{
    display:flex;
    flex-direction:column;
    gap:0;
    padding-top:4px;
    min-width:0;
}

.pd-brand{
    margin:0 0 6px;
    color:#6fa9bd;
    font-size:12px;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.pd-title{
    margin:0 0 10px;
    color:#12262c;
    font-size:clamp(1.4rem, 2.1vw, 1.85rem);
    line-height:1.4;
    font-weight:900;
}

.pd-rating{
    display:flex;
    align-items:center;
    gap:8px;
    margin:0 0 12px;
    color:#5a737a;
    font-size:13px;
}

.pd-rating .stars,
.pd-section-head .stars,
.review-list article .stars{
    color:#d4a017;
}

.pd-discount{
    display:inline-flex;
    align-self:flex-start;
    align-items:center;
    margin:0 0 12px;
    padding:3px 10px;
    border-radius:999px;
    color:#246a78;
    background:rgba(47,127,143,.12);
    font-size:11px;
    font-weight:800;
}

.pd-lead{
    margin:0 0 14px;
    color:#4d646b;
    font-size:14px;
    line-height:1.8;
    font-weight:600;
}

.pd-benefits{
    margin:0 0 16px;
    padding:0;
    list-style:none;
    display:grid;
    gap:6px;
}

.pd-benefits li{
    position:relative;
    padding-inline-start:16px;
    color:#3f585f;
    font-size:13px;
    line-height:1.55;
    font-weight:650;
}

.pd-benefits li::before{
    content:"";
    position:absolute;
    right:0;
    top:.55em;
    width:6px;
    height:6px;
    border-radius:50%;
    background:#6fa9bd;
}

.pd-variants{
    margin:0 0 16px;
}

.pd-label{
    display:block;
    margin-bottom:8px;
    color:#24383e;
    font-size:12px;
    font-weight:850;
}

.variant-options{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.variant-options button{
    min-width:64px;
    height:36px;
    padding:0 14px;
    border:1px solid rgba(47,127,143,.2);
    border-radius:9px;
    color:#3f585f;
    background:rgba(255,255,255,.85);
    font-size:13px;
    font-weight:800;
    cursor:pointer;
    transition:border-color .2s ease, background .2s ease, color .2s ease;
}

.variant-options button.active{
    color:#fff;
    border-color:#2f7f8f;
    background:#2f7f8f;
}

.variant-options button:disabled{
    opacity:.4;
    cursor:not-allowed;
}

.pd-buy{
    margin-top:4px;
    padding-top:16px;
    border-top:1px solid rgba(47,127,143,.12);
}

.pd-price{
    margin:0 0 14px;
    display:flex;
    align-items:baseline;
    gap:12px;
}

.pd-price strong{
    color:#1a5f6c;
    font-size:clamp(1.35rem, 2vw, 1.65rem);
    font-weight:900;
    letter-spacing:-.01em;
}

.pd-price strong em{
    font-style:normal;
    font-size:.55em;
    font-weight:800;
    margin-inline-start:4px;
    opacity:.85;
}

.pd-price del{
    color:#8fa0a6;
    font-size:14px;
    font-weight:700;
}

.pd-actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
}

.detail-wish-btn,
.detail-add-btn,
.detail-routine-btn{
    height:40px;
    border-radius:10px;
    font-weight:800;
    cursor:pointer;
}

.detail-wish-btn{
    width:40px;
    flex:0 0 40px;
    border:1px solid rgba(47,127,143,.22);
    color:#1a2c32;
    background:#fff;
    display:grid;
    place-items:center;
    transition:border-color .2s ease, color .2s ease, background .2s ease;
}

.detail-wish-btn svg{
    width:17px;
    height:17px;
}

.detail-wish-btn:hover{
    border-color:#2f7f8f;
    color:#2f7f8f;
}

.detail-wish-btn.is-favorite{
    color:#c45b6a;
    border-color:rgba(196,91,106,.35);
    background:#fff5f6;
}

.detail-wish-btn.is-favorite svg{
    fill:currentColor;
    stroke:currentColor;
}

.detail-add-btn{
    flex:0 1 auto;
    min-width:132px;
    padding:0 18px;
    border:0;
    color:#fff;
    background:#2f7f8f;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    box-shadow:none;
    transition:background .2s ease, transform .2s ease;
}

.detail-add-btn:hover{
    background:#246a78;
    transform:translateY(-1px);
    box-shadow:none;
    filter:none;
}

.detail-add-btn:disabled{
    opacity:.55;
    cursor:not-allowed;
    transform:none;
}

.detail-routine-form{
    margin:0;
    display:inline-flex;
}

.detail-routine-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-height:40px;
    padding:0 14px;
    border:1px solid rgba(47,127,143,.26);
    color:#246a78;
    background:#fff;
    font-size:13px;
    transition:background .2s ease, border-color .2s ease, color .2s ease;
}

.detail-routine-btn svg{
    width:15px;
    height:15px;
}

.detail-routine-btn:hover{
    background:#eef8f7;
    border-color:#2f7f8f;
}

.detail-routine-btn.is-added{
    color:#1a5f6c;
    border-color:rgba(47,127,143,.35);
    background:#e8f4f5;
}

.detail-routine-btn.is-added svg{
    display:none;
}

.detail-cart-message{
    min-height:20px;
    margin:10px 0 0;
    color:#3d8a5c;
    font-size:12px;
    font-weight:800;
}

.detail-cart-message.error{
    color:#c45b6a;
}

.product-fly-clone{
    position:fixed;
    z-index:9999;
    object-fit:contain;
    border-radius:16px;
    pointer-events:none;
    box-shadow:0 18px 36px rgba(33,91,104,.24);
    transition:transform .72s cubic-bezier(.2,.8,.2,1), opacity .72s ease;
    will-change:transform, opacity;
}

.site-cart-btn.is-cart-bump,
.fay-cart-icon.is-cart-bump,
.catalog-cart-btn.is-cart-bump{
    animation:cartBump .5s cubic-bezier(.2,.9,.2,1);
}

.site-cart-btn.is-cart-bump span,
.fay-cart-icon.is-cart-bump [data-home-cart-count]{
    animation:cartBadgePop .45s ease;
}

@keyframes cartBump{
    0%{ transform:scale(1); }
    35%{ transform:scale(1.22); }
    70%{ transform:scale(.94); }
    100%{ transform:scale(1); }
}

@keyframes cartBadgePop{
    0%{ transform:scale(.6); }
    55%{ transform:scale(1.25); }
    100%{ transform:scale(1); }
}

.pd-lower{
    margin-top:36px;
    padding-top:28px;
    border-top:1px solid rgba(47,127,143,.18);
    display:grid;
    gap:0;
}

.pd-specs,
.pd-reviews,
.pd-related{
    margin-top:0;
    padding:24px 0;
    animation:pdFadeUp .6s ease .08s both;
}

.pd-specs + .pd-reviews,
.pd-specs + .pd-related,
.pd-reviews + .pd-related{
    border-top:1px solid rgba(47,127,143,.14);
}

.pd-section-head{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:14px;
    margin-bottom:16px;
    padding-bottom:10px;
    border-bottom:1px solid rgba(47,127,143,.12);
}

.pd-section-head h2{
    margin:0;
    color:#12262c;
    font-size:1.05rem;
    font-weight:900;
}

.pd-section-head p{
    margin:0;
    color:#5a737a;
    font-size:12px;
}

.pd-section-head a{
    color:#2f7f8f;
    font-size:12px;
    font-weight:800;
}

.pd-specs{
    display:grid;
    gap:0;
}

.pd-spec{
    padding:18px 0;
    border-bottom:1px solid rgba(47,127,143,.12);
}

.pd-spec:first-child{
    padding-top:0;
}

.pd-spec:last-child{
    border-bottom:0;
    padding-bottom:0;
}

.pd-spec h2{
    margin:0 0 8px;
    color:#1a5f6c;
    font-size:13px;
    font-weight:900;
}

.pd-spec p{
    margin:0;
    color:#4d646b;
    font-size:14px;
    line-height:1.85;
    white-space:pre-line;
}

.pd-reviews .review-form{
    display:grid;
    gap:10px;
    margin-bottom:20px;
    max-width:520px;
}

.review-form-label{
    font-size:13px;
    font-weight:700;
    color:#24383e;
}

.review-star-picker{
    display:inline-flex;
    flex-direction:row-reverse;
    gap:4px;
    direction:ltr;
}

.review-star-option{
    position:relative;
    cursor:pointer;
}

.review-star-option input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.review-star-option span{
    display:block;
    font-size:28px;
    line-height:1;
    color:#d5dde0;
    transition:color .15s ease, transform .15s ease;
}

.review-star-option:hover span,
.review-star-option:hover ~ .review-star-option span,
.review-star-option:has(input:checked) span,
.review-star-option:has(input:checked) ~ .review-star-option span{
    color:#d4a017;
}

.review-star-option:hover span{
    transform:scale(1.08);
}

.review-form textarea{
    width:100%;
    border:1px solid rgba(47,127,143,.18);
    border-radius:12px;
    padding:12px 14px;
    outline:0;
    resize:vertical;
    min-height:88px;
    font:inherit;
    background:rgba(255,255,255,.8);
}

.review-form button,
.review-login{
    height:44px;
    max-width:220px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:12px;
    color:#fff;
    background:#2f7f8f;
    font-weight:900;
    text-decoration:none;
    cursor:pointer;
}

.review-note{
    padding:12px 14px;
    border-radius:12px;
    color:#246a78;
    background:rgba(238,248,247,.9);
    margin:0 0 14px;
    max-width:520px;
}

.review-empty{
    margin:0;
    color:#7a9096;
    font-size:14px;
}

.review-list{
    margin-top:8px;
    display:grid;
    gap:12px;
    max-width:720px;
}

.review-list article{
    padding:14px 0;
    border-bottom:1px solid rgba(47,127,143,.1);
    background:transparent;
    border-radius:0;
    border-left:0;
    border-right:0;
    border-top:0;
}

.review-list article:last-child{
    border-bottom:0;
}

.review-list article header{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px 12px;
    margin-bottom:6px;
}

.review-list article strong{
    color:#12262c;
}

.review-list article time{
    margin-inline-start:auto;
    color:#8a9aa0;
    font-size:12px;
}

.review-list article p{
    margin:0;
    color:#4d646b;
    line-height:1.7;
    font-size:14px;
}

.visually-hidden{
    position:absolute !important;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

.pd-related-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:20px;
}

.pd-related-item{
    display:grid;
    gap:10px;
    min-width:0;
    transition:transform .25s ease;
}

.pd-related-item:hover{
    transform:translateY(-3px);
}

.pd-related-item img,
.pd-related-fallback{
    width:100%;
    height:160px;
    object-fit:contain;
    border-radius:14px;
    background:rgba(238,248,247,.75);
}

.pd-related-fallback{
    display:grid;
    place-items:center;
    color:#2f7f8f;
    font-weight:900;
    font-size:22px;
}

.pd-related-item strong{
    color:#12262c;
    font-size:14px;
    line-height:1.45;
    font-weight:800;
}

.pd-related-item span{
    color:#246a78;
    font-size:14px;
    font-weight:900;
}

@media(max-width:980px){
    .pd-hero{
        grid-template-columns:1fr;
        gap:20px;
    }

    .pd-gallery-main{
        aspect-ratio:1 / 1;
        max-width:300px;
        max-height:300px;
        min-height:0;
    }

    .pd-related-grid{
        grid-template-columns:repeat(2, minmax(0,1fr));
        gap:14px;
    }
}

@media(max-width:560px){
    .product-detail-shell{
        width:min(94%, 100%);
        margin-bottom:36px;
    }

    .pd-gallery-main{
        border-radius:14px;
        max-width:260px;
        max-height:260px;
    }

    .pd-gallery-thumbs button{
        width:56px;
        height:56px;
    }

    .pd-related-grid{
        grid-template-columns:1fr 1fr;
        gap:12px;
    }

    .pd-related-item img,
    .pd-related-fallback{
        height:110px;
    }

    .pd-section-head{
        flex-direction:column;
        align-items:flex-start;
    }

    .pd-actions .detail-routine-form{
        flex:1 1 100%;
    }

    .pd-actions .detail-routine-btn{
        width:100%;
    }
}


/* =========================
   ADMIN DASHBOARD MODERN
========================= */

body.admin-modern-body{
    --admin-primary:#0f7380;
    --admin-primary-dark:#075f6b;
    --admin-primary-soft:#eaf7f7;
    --admin-ink:#102636;
    --admin-muted:#667985;
    --admin-surface:#ffffff;
    --admin-surface-soft:#f5fbfb;
    --admin-line:rgba(15,115,128,.14);
    --admin-line-strong:rgba(15,115,128,.28);
    --admin-danger:#c86f6f;
    --admin-danger-soft:#fff2f1;
    --admin-warning:#b98635;
    --admin-warning-soft:#fff8eb;
    --admin-shadow:0 22px 65px rgba(31,76,88,.10);
    --admin-shadow-soft:0 12px 34px rgba(31,76,88,.07);
    margin:0;
    min-height:100vh;
    color:var(--admin-ink);
    font-family:var(--font-body);
    background:
        radial-gradient(circle at 8% 8%,rgba(234,247,247,.96),transparent 30%),
        radial-gradient(circle at 92% 16%,rgba(240,250,249,.88),transparent 30%),
        linear-gradient(180deg,#fff 0%,#f7fcfc 45%,#eef8f8 100%);
}

.admin-modern-body *,
.admin-modern-body *::before,
.admin-modern-body *::after{
    box-sizing:border-box;
}

.admin-modern-body a{
    color:inherit;
    text-decoration:none;
}

.admin-modern-body button,
.admin-modern-body input,
.admin-modern-body select,
.admin-modern-body textarea{
    font-family:inherit;
}

.admin-icon{
    width:20px;
    height:20px;
    display:block;
    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.admin-modern-shell{
    width:min(96%,1540px);
    margin:0 auto;
    padding:18px 0 34px;
}

.admin-modern-topbar{
    min-height:92px;
    padding:18px 20px;
    display:grid;
    grid-template-columns:230px minmax(320px,1fr) auto;
    align-items:center;
    gap:20px;
    border:1px solid var(--admin-line);
    border-radius:20px;
    background:rgba(255,255,255,.88);
    box-shadow:var(--admin-shadow-soft);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

.admin-modern-logo{
    display:inline-flex;
    align-items:center;
    gap:12px;
    direction:ltr;
}

.admin-modern-logo-mark{
    width:42px;
    height:42px;
    position:relative;
    color:var(--admin-primary);
}

.admin-modern-logo-mark::before,
.admin-modern-logo-mark::after{
    content:"";
    position:absolute;
    inset:8px;
    border:2px solid currentColor;
    border-radius:70% 70% 8px 70%;
    transform:rotate(45deg);
}

.admin-modern-logo-mark::after{
    inset:5px 13px 13px 5px;
    opacity:.65;
    transform:rotate(12deg);
    box-shadow:
        10px 4px 0 -8px currentColor,
        17px 11px 0 -9px currentColor;
}

.admin-modern-logo span:last-child{
    display:grid;
    line-height:1;
}

.admin-modern-logo strong{
    color:var(--admin-ink);
    font-size:27px;
    font-weight:950;
}

.admin-modern-logo small{
    margin-top:4px;
    color:var(--admin-primary);
    font-size:12px;
    font-weight:850;
}

.admin-modern-title span,
.admin-content-head span,
.admin-hero-card span{
    display:inline-flex;
    align-items:center;
    min-height:24px;
    padding:3px 10px;
    border-radius:999px;
    color:var(--admin-primary-dark);
    background:var(--admin-primary-soft);
    font-size:12px;
    font-weight:950;
}

.admin-modern-title h1{
    margin:8px 0 5px;
    color:var(--admin-ink);
    font-size:25px;
    font-weight:950;
}

.admin-modern-title p{
    margin:0;
    color:var(--admin-muted);
    font-size:13px;
    line-height:1.8;
}

.admin-modern-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.admin-modern-actions a{
    min-height:42px;
    padding:0 14px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    border:1px solid var(--admin-line);
    border-radius:12px;
    color:var(--admin-ink);
    background:#fff;
    font-size:13px;
    font-weight:850;
    transition:.18s ease;
}

.admin-modern-actions a:hover{
    color:var(--admin-primary-dark);
    border-color:var(--admin-line-strong);
    transform:translateY(-2px);
}

.admin-modern-actions b{
    min-width:18px;
    height:18px;
    display:grid;
    place-items:center;
    border-radius:999px;
    color:#fff;
    background:var(--admin-primary);
    font-size:10px;
}

.admin-modern-layout{
    margin-top:18px;
    display:grid;
    grid-template-columns:280px minmax(0,1fr);
    gap:20px;
    align-items:start;
}

.admin-modern-sidebar{
    position:sticky;
    top:16px;
    display:grid;
    gap:14px;
}

.admin-sidebar-card{
    padding:18px;
    border:1px solid var(--admin-line);
    border-radius:18px;
    background:linear-gradient(145deg,#fff,#eef8f8);
    box-shadow:var(--admin-shadow-soft);
}

.admin-sidebar-orb{
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border-radius:16px;
    color:var(--admin-primary);
    background:#fff;
    box-shadow:inset 0 0 0 1px var(--admin-line);
}

.admin-sidebar-card strong{
    display:block;
    margin-top:13px;
    color:var(--admin-ink);
    font-size:18px;
    font-weight:950;
}

.admin-sidebar-card p{
    margin:8px 0 0;
    color:var(--admin-muted);
    font-size:13px;
    line-height:1.8;
}

.admin-menu{
    padding:10px;
    display:grid;
    gap:7px;
    border:1px solid var(--admin-line);
    border-radius:18px;
    background:rgba(255,255,255,.88);
    box-shadow:var(--admin-shadow-soft);
}

.admin-menu-btn,
.admin-menu-link{
    width:100%;
    min-height:44px;
    padding:10px 12px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:10px;
    border:0;
    border-radius:12px;
    color:var(--admin-ink);
    background:transparent;
    font-size:13px;
    font-weight:900;
    text-align:right;
    cursor:pointer;
    transition:.18s ease;
}

.admin-menu-link{
    justify-content:space-between;
}

.admin-menu-link span{
    display:inline-flex;
    align-items:center;
    gap:10px;
}

.admin-menu-btn svg,
.admin-menu-link svg{
    color:var(--admin-primary);
    flex:0 0 auto;
}

.admin-menu-btn:hover,
.admin-menu-link:hover{
    background:var(--admin-primary-soft);
}

.admin-menu-btn.active{
    color:#fff;
    background:linear-gradient(135deg,var(--admin-primary),var(--admin-primary-dark));
    box-shadow:0 12px 24px rgba(15,115,128,.18);
}

.admin-menu-btn.active svg{
    color:#fff;
}

.admin-menu-btn b,
.admin-menu-link b{
    min-width:20px;
    height:20px;
    display:grid;
    place-items:center;
    border-radius:999px;
    color:#fff;
    background:var(--admin-danger);
    font-size:11px;
}

.admin-modern-content{
    min-width:0;
    display:grid;
    gap:16px;
}

.admin-content-head{
    padding:18px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    border:1px solid var(--admin-line);
    border-radius:18px;
    background:rgba(255,255,255,.90);
    box-shadow:var(--admin-shadow-soft);
}

.admin-content-head h2{
    margin:8px 0 0;
    color:var(--admin-ink);
    font-size:24px;
    font-weight:950;
}

.admin-content-search{
    width:min(350px,42vw);
    height:46px;
    padding:0 14px;
    display:flex;
    align-items:center;
    gap:10px;
    border:1px solid var(--admin-line);
    border-radius:13px;
    color:var(--admin-muted);
    background:#fff;
}

.admin-content-search input{
    width:100%;
    border:0;
    outline:0;
    color:var(--admin-ink);
    background:transparent;
    font-size:13px;
}

.admin-panel{
    display:none;
    animation:fayRise .24s ease both;
}

.admin-panel.active{
    display:grid;
    gap:16px;
}

.admin-hero-grid{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr;
    gap:16px;
}

.admin-hero-card{
    min-height:150px;
    padding:24px;
    overflow:hidden;
    position:relative;
    border:1px solid var(--admin-line);
    border-radius:20px;
    background:
        radial-gradient(circle at 16% 20%,rgba(255,255,255,.86),transparent 32%),
        linear-gradient(135deg,#eaf7f7,#fff);
    box-shadow:var(--admin-shadow-soft);
}

.admin-hero-card::after{
    content:"";
    position:absolute;
    left:-28px;
    bottom:-42px;
    width:150px;
    height:150px;
    border-radius:50%;
    background:rgba(15,115,128,.08);
}

.admin-hero-card.soft{
    background:linear-gradient(135deg,#fff,#f3faf9);
}

.admin-hero-card.warning{
    background:linear-gradient(135deg,#fff8eb,#fff);
}

.admin-hero-card h3{
    margin:16px 0 8px;
    color:var(--admin-ink);
    font-size:32px;
    font-weight:950;
}

.admin-hero-card p{
    margin:0;
    color:var(--admin-muted);
    line-height:1.8;
    font-size:13px;
}

.stats-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
}

.stat-card{
    min-height:104px;
    padding:16px;
    display:flex;
    align-items:center;
    gap:14px;
    border:1px solid var(--admin-line);
    border-radius:16px;
    background:rgba(255,255,255,.90);
    box-shadow:var(--admin-shadow-soft);
}

.stat-card > span{
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border-radius:15px;
    color:var(--admin-primary);
    background:var(--admin-primary-soft);
    flex:0 0 auto;
}

.stat-text h3{
    margin:0 0 7px;
    color:var(--admin-muted);
    font-size:12px;
    font-weight:850;
}

.stat-text .number{
    color:var(--admin-ink);
    font-size:25px;
    font-weight:950;
}

.admin-overview-split{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}

.admin-mini-panel,
.section-card,
.table-card,
.form-box{
    border:1px solid var(--admin-line);
    border-radius:18px;
    background:rgba(255,255,255,.92);
    box-shadow:var(--admin-shadow-soft);
}

.admin-mini-panel,
.section-card,
.table-card{
    padding:20px;
}

.section-head{
    margin-bottom:18px;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
}

.section-head h2,
.table-title,
.form-box h3{
    margin:0;
    color:var(--admin-ink);
    font-size:20px;
    font-weight:950;
}

.section-head p{
    margin:8px 0 0;
    color:var(--admin-muted);
    font-size:13px;
    line-height:1.8;
}

.admin-inline-switch{
    min-height:38px;
    padding:0 14px;
    border:1px solid var(--admin-line);
    border-radius:11px;
    color:var(--admin-primary-dark);
    background:#fff;
    font-weight:900;
    cursor:pointer;
}

.admin-product-preview-list,
.admin-order-preview-list{
    display:grid;
    gap:10px;
}

.admin-product-preview-list a,
.admin-order-preview-list div{
    min-height:66px;
    padding:10px;
    display:flex;
    align-items:center;
    gap:12px;
    border:1px solid rgba(15,115,128,.10);
    border-radius:13px;
    background:#fff;
}

.admin-product-preview-list span{
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:var(--admin-primary-soft);
    overflow:hidden;
}

.admin-product-preview-list img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
}

.admin-product-preview-list strong,
.admin-order-preview-list strong{
    display:block;
    color:var(--admin-ink);
    font-size:13px;
}

.admin-product-preview-list small,
.admin-order-preview-list small{
    display:block;
    margin-top:4px;
    color:var(--admin-muted);
    font-size:12px;
}

.admin-order-preview-list span{
    margin-right:auto;
    color:var(--admin-primary-dark);
    font-weight:950;
}

.forms-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
}

.form-box{
    padding:18px;
}

.form-box.wide{
    grid-column:1 / -1;
}

.admin-form-columns{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}

.field-group{
    margin-bottom:14px;
    display:grid;
    gap:8px;
}

.field-group label{
    color:var(--admin-ink);
    font-size:13px;
    font-weight:900;
}

.field-hint{
    display:block;
    color:var(--admin-muted);
    font-size:12px;
    line-height:1.55;
    font-weight:700;
}

.admin-settings-preview{
    margin:0 0 14px;
    padding:12px 14px;
    border-radius:12px;
    border:1px solid var(--admin-line);
    background:var(--admin-primary-soft);
    color:var(--admin-ink);
    font-size:13px;
    font-weight:800;
}

.admin-settings-preview strong{
    color:var(--admin-primary-dark);
    font-weight:950;
}

.admin-settings-preview.is-warning{
    background:#fff8ef;
    border-color:rgba(196,150,60,.28);
    color:#8b6914;
}

.field-group input,
.field-group select,
.field-group textarea{
    width:100%;
    min-height:44px;
    border:1px solid var(--admin-line);
    border-radius:12px;
    padding:11px 12px;
    color:var(--admin-ink);
    background:#fff;
    outline:0;
    font-size:13px;
    transition:.18s ease;
}

.field-group textarea{
    min-height:110px;
    resize:vertical;
}

.field-group input:focus,
.field-group select:focus,
.field-group textarea:focus{
    border-color:var(--admin-primary);
    box-shadow:0 0 0 4px rgba(15,115,128,.10);
}

.file-input-wrap input{
    padding:9px;
    background:var(--admin-surface-soft);
}

.tip-box,
.error-box,
.empty-state-box{
    padding:13px 14px;
    border-radius:13px;
    font-size:13px;
    line-height:1.8;
}

.tip-box{
    margin:10px 0 16px;
    color:var(--admin-primary-dark);
    background:var(--admin-primary-soft);
    border:1px solid rgba(15,115,128,.12);
}

.error-box{
    margin:10px 0 14px;
    color:#9f4141;
    background:var(--admin-danger-soft);
    border:1px solid rgba(200,111,111,.25);
}

.empty-state-box{
    color:var(--admin-muted);
    background:var(--admin-surface-soft);
    border:1px dashed var(--admin-line-strong);
}

.checkbox-grid{
    max-height:230px;
    overflow:auto;
    padding:8px;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    border:1px solid var(--admin-line);
    border-radius:13px;
    background:var(--admin-surface-soft);
}

.check-chip{
    min-height:36px;
    padding:8px 10px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    border:1px solid var(--admin-line);
    border-radius:999px;
    color:var(--admin-ink);
    background:#fff;
    font-size:12px;
    font-weight:850;
}

.check-chip input{
    width:14px;
    height:14px;
    accent-color:var(--admin-primary);
}

.primary-btn,
.danger-btn{
    min-height:38px;
    padding:9px 14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:11px;
    font-size:13px;
    font-weight:950;
    cursor:pointer;
    transition:.18s ease;
}

.primary-btn{
    color:#fff;
    background:linear-gradient(135deg,var(--admin-primary),var(--admin-primary-dark));
    box-shadow:0 12px 26px rgba(15,115,128,.18);
}

.danger-btn{
    color:#a84f4f;
    background:var(--admin-danger-soft);
    border:1px solid rgba(200,111,111,.22);
}

.primary-btn:hover,
.danger-btn:hover{
    transform:translateY(-2px);
}

body.admin-modern-body .variant-admin-grid{
    display:grid;
    gap:10px;
}

body.admin-modern-body .variant-admin-row{
    display:grid;
    grid-template-columns:34px repeat(3,minmax(0,1fr));
    gap:10px;
}

body.admin-modern-body .variant-admin-row input[type="radio"]{
    width:18px;
    height:18px;
    align-self:center;
    accent-color:var(--admin-primary);
}

.tables-pair{
    margin-top:16px;
}

.inner-table{
    margin-top:18px;
}

.table-title{
    margin-bottom:14px;
}

.table-wrap{
    width:100%;
    overflow:auto;
}

.table-wrap table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    min-width:760px;
}

.table-wrap th,
.table-wrap td{
    padding:13px 12px;
    border-bottom:1px solid rgba(15,115,128,.10);
    color:var(--admin-ink);
    text-align:right;
    vertical-align:middle;
    font-size:13px;
}

.table-wrap th{
    position:sticky;
    top:0;
    z-index:1;
    color:#486373;
    background:#f4fbfb;
    font-size:12px;
    font-weight:950;
}

.table-wrap tr:last-child td{
    border-bottom:0;
}

.table-wrap tbody tr{
    transition:.16s ease;
}

.table-wrap tbody tr:hover{
    background:rgba(15,115,128,.035);
}

.mini-img{
    width:52px;
    height:52px;
    border-radius:12px;
    object-fit:cover;
    background:var(--admin-primary-soft);
    border:1px solid var(--admin-line);
}

.product-badge{
    min-height:24px;
    margin:2px;
    padding:4px 9px;
    display:inline-flex;
    align-items:center;
    border-radius:999px;
    color:var(--admin-primary-dark);
    background:var(--admin-primary-soft);
    font-size:11px;
    font-weight:900;
}

.product-badge.muted{
    color:var(--admin-muted);
    background:#f2f6f6;
}

.admin-row-actions{
    display:flex;
    gap:7px;
    flex-wrap:wrap;
}

.order-items-cell{
    max-width:360px;
    white-space:pre-line;
}

.admin-consultation-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
}

.consultation-card{
    display:grid;
    gap:12px;
}

.consultation-card-head{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:flex-start;
}

.consultation-card-head h3{
    margin:0 0 5px;
}

.consultation-card-head span{
    color:var(--admin-muted);
    font-size:12px;
}

.consultation-card-head b{
    padding:6px 10px;
    border-radius:999px;
    color:var(--admin-primary-dark);
    background:var(--admin-primary-soft);
    font-size:11px;
}

.empty-text{
    color:var(--admin-muted);
    font-size:13px;
}

@media(max-width:1180px){
    .admin-modern-topbar,
    .admin-modern-layout{
        grid-template-columns:1fr;
    }

    .admin-modern-sidebar{
        position:static;
    }

    .admin-menu{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

    .admin-hero-grid,
    .stats-grid,
    .admin-overview-split,
    .admin-overview-metric-grid,
    .admin-overview-action-grid,
    .admin-dashboard-tables,
    .admin-orders-filterbar,
    .admin-consultation-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .admin-filter-more{
        grid-column:1 / -1;
    }
}

@media(max-width:760px){
    .admin-modern-shell{
        width:94%;
        padding-top:12px;
    }

    .admin-modern-actions,
    .admin-content-head,
    .section-head{
        align-items:flex-start;
        flex-direction:column;
    }

    .admin-content-search{
        width:100%;
    }

    .admin-menu,
    .admin-hero-grid,
    .stats-grid,
    .admin-overview-split,
    .admin-overview-metric-grid,
    .admin-overview-action-grid,
    .admin-dashboard-tables,
    .admin-orders-filterbar,
    .forms-grid,
    .admin-form-columns,
    .admin-consultation-grid{
        grid-template-columns:1fr;
    }

    .admin-orders-head{
        flex-direction:column-reverse;
        padding:20px;
    }

    .admin-orders-head h1{
        font-size:24px;
    }

    .admin-order-actions-menu > div{
        left:auto;
        right:0;
        width:min(82vw,310px);
    }

    .admin-overview-welcome{
        flex-direction:column;
        padding:20px;
    }

    .admin-overview-welcome h1{
        font-size:23px;
    }

    body.admin-modern-body .variant-admin-row{
        grid-template-columns:34px 1fr;
    }
}

/* =========================
   PRODUCT ADMIN EDIT
========================= */

.variant-admin-grid{
    display:grid;
    gap:10px;
}

.variant-admin-row{
    display:grid;
    grid-template-columns:28px minmax(90px,1fr) minmax(90px,1fr) minmax(90px,1fr);
    gap:8px;
    align-items:center;
}

.variant-admin-row input{
    min-width:0;
}

.admin-edit-page{
    width:min(94%,1180px);
    margin:24px auto 44px;
}

.admin-edit-head{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    margin-bottom:18px;
}

.admin-edit-head h1{
    margin:0;
    color:#151723;
    font-size:26px;
    text-align:right;
}

.admin-edit-back,
.admin-edit-actions a,
.admin-edit-actions button{
    min-height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 16px;
    border:0;
    border-radius:8px;
    color:#fff;
    background:#2f7f8f;
    font-weight:950;
}

.admin-edit-actions a{
    color:#246a78;
    background:#eef8f7;
}

.admin-edit-form{
    display:grid;
    gap:16px;
}

.admin-edit-card{
    padding:22px;
    border:1px solid rgba(30,32,48,.08);
    border-radius:14px;
    background:#fff;
    box-shadow:0 18px 48px rgba(31,88,110,.07);
    display:grid;
    gap:14px;
}

.admin-edit-card h2{
    margin:0;
    color:#151723;
    font-size:18px;
}

.admin-edit-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}

.admin-edit-card label{
    display:grid;
    gap:8px;
    color:#4d6368;
    font-size:13px;
    font-weight:900;
}

.admin-edit-card input,
.admin-edit-card select,
.admin-edit-card textarea{
    width:100%;
    border:1px solid rgba(30,32,48,.12);
    border-radius:8px;
    padding:11px 12px;
    outline:0;
    background:#fff;
}

.admin-gallery-list{
    display:flex;
    align-items:stretch;
    gap:12px;
    flex-wrap:wrap;
}

.admin-gallery-list div,
.admin-gallery-list label{
    width:120px;
    padding:8px;
    border:1px solid rgba(30,32,48,.10);
    border-radius:8px;
    text-align:center;
}

.admin-gallery-list img{
    width:100%;
    height:90px;
    object-fit:contain;
}

.admin-edit-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
}

.admin-edit-messages p{
    padding:12px 14px;
    border-radius:8px;
    color:#246a78;
    background:#eef8f7;
    font-weight:900;
}

@media(max-width:1180px){
    .product-detail-nav{
        grid-template-columns:auto 1fr auto;
    }

    .product-detail-search{
        display:none;
    }

    .product-detail-nav nav{
        grid-column:1 / -1;
        order:3;
        justify-content:flex-start;
        overflow:auto;
    }

    .product-detail-hero,
    .product-detail-lower{
        grid-template-columns:1fr;
    }

    .product-gallery-panel{
        order:-1;
    }
}

@media(max-width:760px){
    .product-detail-nav,
    .product-detail-shell{
        width:min(94%,680px);
    }

    .product-detail-nav{
        grid-template-columns:1fr auto;
        gap:12px;
    }

    .product-detail-nav nav{
        gap:18px;
    }

    .product-detail-hero{
        gap:22px;
    }

    .product-gallery-panel{
        min-height:420px;
        grid-template-columns:1fr;
    }

    .gallery-thumbs{
        display:flex;
        overflow:auto;
        padding:14px;
        order:2;
    }

    .main-product-image{
        padding:28px;
        min-height:330px;
    }

    .main-product-image img{
        max-height:310px;
    }

    .product-benefits,
    .variant-options,
    .suggested-grid,
    .admin-edit-grid{
        grid-template-columns:1fr;
    }

    .product-detail-lower{
        gap:18px;
    }

    .variant-admin-row{
        grid-template-columns:28px 1fr;
    }

    .admin-edit-head{
        flex-direction:column;
        align-items:stretch;
    }
}

/* =========================
   SKIN ANALYSIS SYSTEM
========================= */

.skin-analysis-body{
    --sa-medical-primary:#2f7f9f;
    --sa-medical-primary-dark:#245f78;
    --sa-medical-secondary:#6fa9bd;
    --sa-medical-surface:#ffffff;
    --sa-medical-surface-soft:#f7fcff;
    --sa-medical-border:rgba(47,127,159,.16);
    --sa-medical-border-strong:rgba(47,127,159,.42);
    --sa-medical-shadow:rgba(31,88,110,.10);
    --sa-medical-text:#14323d;
    --sa-medical-muted:#5f7480;
    --sa-tone-blue:#2f7f9f;
    --sa-tone-blue-bg:#f0f9fd;
    --sa-tone-rose:#c77b75;
    --sa-tone-rose-bg:#fff5f2;
    --sa-tone-amber:#a98c45;
    --sa-tone-amber-bg:#fff9ec;
    --sa-tone-green:#4f9276;
    --sa-tone-green-bg:#f1fbf5;
    --sa-tone-teal:#3d91a5;
    --sa-tone-teal-bg:#f0fafd;
    margin:0;
    min-height:100vh;
    direction:rtl;
    color:var(--sa-medical-text);
    background:
        radial-gradient(circle at 12% 10%,rgba(255,255,255,.96),transparent 32%),
        radial-gradient(circle at 86% 18%,rgba(220,241,249,.72),transparent 34%),
        linear-gradient(135deg,#ffffff 0%,#f4fbfe 48%,#eaf6fb 100%);
}


.skin-analysis-page{
    direction:rtl;
    width:100%;
    margin:0;
    padding:0 0 34px;
}

.skin-analysis-header{
    direction:rtl;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
    padding:10px 4px 20px;
}

.skin-analysis-logo{
    display:inline-grid;
    grid-template-columns:auto auto;
    align-items:center;
    column-gap:10px;
    color:var(--sa-medical-text);
    font-weight:950;
    font-size:28px;
    letter-spacing:0;
}

.skin-analysis-logo small{
    grid-column:2;
    margin-top:-5px;
    font-size:11px;
    font-weight:800;
    color:var(--sa-medical-muted);
}

.skin-analysis-logo-mark{
    width:42px;
    height:42px;
    border-radius:14px;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,#fff,#e7f4f3);
    border:1px solid var(--sa-medical-border);
}

.skin-analysis-logo-mark::before{
    content:"✾";
    color:#2f7f8f;
    font-size:30px;
    line-height:1;
}

.skin-analysis-icon-sprite{
    position:absolute;
    width:0;
    height:0;
    overflow:hidden;
}

.skin-analysis-logo-mark::before{
    content:none;
}

.sa-icon{
    width:22px;
    height:22px;
    display:inline-block;
    flex:0 0 auto;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
    color:var(--sa-medical-primary);
}

.sa-icon-pink{
    color:var(--sa-tone-rose);
}

.sa-card-icon{
    width:22px;
    height:22px;
    display:block;
    fill:none;
    stroke:currentColor;
    stroke-width:1.75;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.sa-icon-soft{
    width:54px;
    height:54px;
    border-radius:20px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(145deg,#fff,var(--sa-tone-teal-bg));
    color:var(--sa-medical-primary);
    border:1px solid var(--sa-medical-border);
    box-shadow:0 12px 24px var(--sa-medical-shadow), inset 0 1px 0 rgba(255,255,255,.95);
}

.sa-icon-soft-pink{
    background:linear-gradient(145deg,#fff,var(--sa-tone-rose-bg));
    border-color:rgba(201,121,122,.18);
    color:var(--sa-tone-rose);
}

.sa-icon-soft .sa-icon{
    color:currentColor;
    width:26px;
    height:26px;
    stroke-width:1.9;
}

.skin-analysis-option-icon .sa-icon,
.skin-analysis-side-steps b .sa-icon,
.skin-analysis-header-links a .sa-icon,
.skin-analysis-primary-btn .sa-icon,
.skin-analysis-secondary-btn .sa-icon,
.skin-analysis-ghost-btn .sa-icon,
.skin-analysis-history-list a .sa-icon,
.skin-analysis-history-score .sa-icon{
    color:currentColor;
}

.skin-analysis-header-links a .sa-icon{
    width:18px;
    height:18px;
    stroke-width:2;
}

.skin-analysis-logo-mark .sa-icon{
    width:26px;
    height:26px;
}

.skin-analysis-header-links{
    direction:rtl;
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}

.skin-analysis-header-links a{
    gap:8px;
    direction:rtl;
    min-height:38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 14px;
    border-radius:14px;
    color:#171d34;
    font-weight:850;
    border:1px solid transparent;
}

.skin-analysis-header-links a:hover{
    color:var(--sa-medical-primary-dark);
    border-color:var(--sa-medical-border);
    background:rgba(255,255,255,.66);
}

.skin-analysis-header-links b{
    min-width:20px;
    height:20px;
    margin-inline-start:6px;
    display:inline-grid;
    place-items:center;
    border-radius:999px;
    background:var(--sa-medical-primary);
    color:#fff;
    font-size:11px;
}

.skin-analysis-shell,
.skin-analysis-result-shell{
    direction:ltr;
    width:min(96%,1480px);
    margin:22px auto 0;
    display:grid;
    grid-template-columns:minmax(0,1fr) 300px;
    gap:22px;
    align-items:start;
}

.skin-analysis-card,
.skin-analysis-result-main,
.skin-analysis-sidebar,
.skin-analysis-result-side{
    direction:rtl;
    border:1px solid var(--sa-medical-border);
    border-radius:20px;
    background:rgba(255,255,255,.86);
    box-shadow:0 24px 70px var(--sa-medical-shadow);
    backdrop-filter:blur(16px);
}

.skin-analysis-card,
.skin-analysis-result-main{
    grid-column:1;
    grid-row:1;
}

.skin-analysis-sidebar,
.skin-analysis-result-side{
    grid-column:2;
    grid-row:1;
}

.skin-analysis-card,
.skin-analysis-result-main{
    padding:28px;
    min-height:680px;
}

.skin-analysis-sidebar,
.skin-analysis-result-side{
    position:sticky;
    top:18px;
    padding:20px;
}

.skin-analysis-topbar{
    direction:ltr;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin-bottom:22px;
}

.skin-analysis-progress-steps{
    direction:ltr;
    display:flex;
    align-items:center;
    gap:22px;
}

.skin-analysis-progress-steps span{
    position:relative;
    width:32px;
    height:32px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#fff;
    border:1px solid var(--sa-medical-border);
    color:#60747d;
    font-size:13px;
    font-weight:900;
    box-shadow:0 8px 20px var(--sa-medical-shadow);
}

.skin-analysis-progress-steps span:not(:last-child)::after{
    content:"";
    position:absolute;
    left:calc(100% + 5px);
    right:auto;
    top:50%;
    width:15px;
    height:1px;
    background:var(--sa-medical-border);
}

.skin-analysis-progress-steps span.is-active{
    background:var(--sa-medical-primary);
    color:#fff;
    border-color:var(--sa-medical-primary);
}

.skin-analysis-progress-steps span.is-done{
    background:#edf9f1;
    color:#18834d;
    border-color:rgba(24,131,77,.22);
}

.skin-analysis-progress-percent{
    min-width:160px;
    display:grid;
    gap:8px;
    color:var(--sa-medical-primary-dark);
    font-weight:900;
    direction:ltr;
    text-align:left;
}

.skin-analysis-progress-percent i,
.skin-analysis-metric i{
    display:block;
    height:7px;
    overflow:hidden;
    border-radius:999px;
    background:#dfeeee;
}

.skin-analysis-progress-percent i span,
.skin-analysis-metric i span{
    display:block;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg,var(--sa-medical-primary),#76aeba);
}

.skin-analysis-title{
    max-width:760px;
    width:min(100%,760px);
    margin:0 auto 24px;
    display:grid;
    justify-items:center;
    text-align:center;
}

.skin-analysis-title span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:32px;
    padding:6px 14px;
    border-radius:999px;
    background:#e7f4f3;
    color:var(--sa-medical-primary-dark);
    font-weight:900;
    font-size:13px;
}

.skin-analysis-title h1{
    margin:14px 0 8px;
    color:var(--sa-medical-text);
    font-size:30px;
    line-height:1.35;
    letter-spacing:0;
}

.skin-analysis-title p{
    margin:0;
    color:var(--sa-medical-muted);
    font-size:15px;
    line-height:1.9;
}

.skin-analysis-message,
.skin-analysis-error{
    margin:0 0 18px;
    padding:12px 16px;
    border-radius:16px;
    font-weight:850;
    line-height:1.8;
}

.skin-analysis-message{
    background:#effaf4;
    color:#177347;
    border:1px solid rgba(23,115,71,.14);
}

.skin-analysis-message p{
    margin:0;
}

.skin-analysis-error{
    background:#fff1f4;
    color:#b22950;
    border:1px solid rgba(178,41,80,.16);
}

.skin-analysis-form{
    display:grid;
    gap:18px;
}

.skin-analysis-question{
    margin:0;
    padding:18px;
    border:1px solid var(--sa-medical-border);
    border-radius:18px;
    background:linear-gradient(180deg,#fff,#fbfffc);
}

.skin-analysis-question.needs-answer{
    border-color:rgba(201,121,122,.55);
    box-shadow:0 0 0 4px rgba(201,121,122,.10);
}

.skin-analysis-question legend{
    width:100%;
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 0 14px;
    color:var(--sa-medical-text);
    font-size:15px;
    font-weight:950;
}

.skin-analysis-question legend b{
    width:24px;
    height:24px;
    flex:0 0 auto;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--sa-medical-primary);
    color:#fff;
    font-size:12px;
}

.skin-analysis-options{
    direction:rtl;
    display:grid;
    grid-template-columns:repeat(4,minmax(140px,1fr));
    gap:12px;
}

.skin-analysis-options-compact{
    grid-template-columns:repeat(4,minmax(120px,1fr));
}

.skin-analysis-option{
    position:relative;
    min-height:106px;
    display:grid;
    align-content:center;
    justify-items:center;
    gap:8px;
    padding:15px 12px 14px;
    border:1px solid var(--sa-medical-border);
    border-radius:18px;
    background:linear-gradient(180deg,#fff,#fbfffc);
    text-align:center;
    cursor:pointer;
    overflow:hidden;
    transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}

.skin-analysis-option input,
.skin-analysis-visual-card input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.skin-analysis-option:hover,
.skin-analysis-visual-card:hover{
    transform:translateY(-2px);
    border-color:var(--sa-medical-border-strong);
    box-shadow:0 16px 32px var(--sa-medical-shadow);
}

.skin-analysis-option.is-selected,
.skin-analysis-visual-card.is-selected{
    border-color:var(--sa-medical-primary);
    background:linear-gradient(180deg,#fff,#edf8f8);
    box-shadow:0 0 0 3px rgba(47,127,143,.12),0 18px 36px rgba(33,91,104,.14);
}

.skin-analysis-visual-card.is-selected .skin-analysis-visual-sticker{
    color:#fff;
    background:linear-gradient(135deg,var(--sa-medical-primary),var(--sa-medical-secondary));
    border-color:rgba(47,127,143,.20);
}

.skin-analysis-option-icon{
    --sticker-color:var(--sa-tone-teal);
    --sticker-bg:var(--sa-tone-teal-bg);
    --sticker-edge:rgba(47,127,143,.14);
    position:relative;
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:15px;
    background:var(--sticker-bg);
    color:var(--sticker-color);
    border:1px solid var(--sticker-edge);
    box-shadow:0 8px 16px rgba(33,91,104,.08), inset 0 1px 0 rgba(255,255,255,.95);
    transition:transform .18s ease, color .18s ease, background .18s ease, box-shadow .18s ease;
}

.skin-analysis-option:nth-child(even) .skin-analysis-option-icon{
    transform:none;
}

.skin-analysis-option:hover .skin-analysis-option-icon,
.skin-analysis-option.is-selected .skin-analysis-option-icon{
    transform:translateY(-1px);
}

.skin-analysis-option-icon::after{
    content:none;
}

.skin-analysis-option-icon svg{
    width:22px;
    height:22px;
    display:block;
    fill:none;
    stroke:currentColor;
    stroke-width:1.75;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.skin-analysis-option.is-selected .skin-analysis-option-icon{
    color:#fff;
    --sticker-bg:linear-gradient(135deg,var(--sa-medical-primary),var(--sa-medical-secondary));
    --sticker-edge:rgba(47,127,143,.22);
    box-shadow:0 12px 22px rgba(47,127,143,.22);
}

.skin-analysis-option-icon[data-sa-tone="blue"],
.skin-analysis-visual-sticker[data-sa-tone="blue"]{
    --sticker-color:var(--sa-tone-blue);
    --sticker-bg:var(--sa-tone-blue-bg);
    --sticker-edge:rgba(77,146,173,.18);
}

.skin-analysis-option-icon[data-sa-tone="rose"],
.skin-analysis-visual-sticker[data-sa-tone="rose"]{
    --sticker-color:var(--sa-tone-rose);
    --sticker-bg:var(--sa-tone-rose-bg);
    --sticker-edge:rgba(201,121,122,.20);
}

.skin-analysis-option-icon[data-sa-tone="amber"],
.skin-analysis-visual-sticker[data-sa-tone="amber"]{
    --sticker-color:var(--sa-tone-amber);
    --sticker-bg:var(--sa-tone-amber-bg);
    --sticker-edge:rgba(183,138,66,.18);
}

.skin-analysis-option-icon[data-sa-tone="green"],
.skin-analysis-visual-sticker[data-sa-tone="green"]{
    --sticker-color:var(--sa-tone-green);
    --sticker-bg:var(--sa-tone-green-bg);
    --sticker-edge:rgba(79,146,118,.18);
}

.skin-analysis-option-icon[data-sa-tone="teal"],
.skin-analysis-visual-sticker[data-sa-tone="teal"]{
    --sticker-color:var(--sa-tone-teal);
    --sticker-bg:var(--sa-tone-teal-bg);
    --sticker-edge:rgba(47,127,143,.16);
}

.skin-analysis-option.is-selected .skin-analysis-option-icon{
    color:#fff;
    --sticker-bg:linear-gradient(135deg,var(--sa-medical-primary),var(--sa-medical-secondary));
    --sticker-edge:rgba(47,127,143,.22);
}

.skin-analysis-option strong{
    color:#202640;
    font-size:14px;
    line-height:1.5;
}

.skin-analysis-option small{
    color:#777b8d;
    font-size:12px;
    line-height:1.6;
}

.skin-analysis-visual-grid{
    direction:rtl;
    display:grid;
    grid-template-columns:repeat(4,minmax(150px,1fr));
    gap:14px;
}

.skin-analysis-visual-card{
    direction:rtl;
    position:relative;
    min-height:270px;
    display:grid;
    grid-template-rows:150px auto 1fr;
    gap:10px;
    padding:12px;
    border:1px solid var(--sa-medical-border);
    border-radius:16px;
    background:#fff;
    cursor:pointer;
    transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}

.skin-analysis-visual-sticker{
    position:absolute;
    top:22px;
    right:22px;
    z-index:2;
    --sticker-color:var(--sa-tone-teal);
    --sticker-bg:var(--sa-tone-teal-bg);
    --sticker-edge:rgba(47,127,143,.16);
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:14px;
    color:var(--sticker-color);
    background:rgba(255,255,255,.94);
    border:1px solid var(--sticker-edge);
    box-shadow:0 10px 20px var(--sa-medical-shadow);
}

.skin-analysis-visual-sticker .sa-icon,
.skin-analysis-visual-sticker .sa-card-icon{
    width:21px;
    height:21px;
    color:currentColor;
    stroke-width:1.75;
}

.skin-analysis-visual-image{
    overflow:hidden;
    display:grid;
    place-items:center;
    border-radius:14px;
    background:
        linear-gradient(135deg,rgba(241,252,246,.96),rgba(255,255,255,.94)),
        #f0fbf5;
    border:1px solid var(--sa-medical-border);
}

.skin-analysis-visual-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.skin-analysis-visual-placeholder{
    max-width:92%;
    display:grid;
    place-items:center;
    gap:10px;
    color:var(--sa-medical-primary);
    text-align:center;
}

.skin-analysis-visual-placeholder .sa-icon,
.skin-analysis-visual-placeholder .sa-card-icon{
    width:42px;
    height:42px;
    color:currentColor;
    stroke-width:1.55;
}

.skin-analysis-visual-image b{
    max-width:92%;
    color:var(--sa-medical-primary-dark);
    font-size:12px;
    line-height:1.6;
    text-align:center;
    overflow-wrap:anywhere;
}

.skin-analysis-visual-card strong{
    color:var(--sa-medical-text);
    font-size:14px;
    line-height:1.5;
}

.skin-analysis-visual-card small{
    color:var(--sa-medical-muted);
    font-size:12px;
    line-height:1.7;
}

.skin-analysis-actions,
.skin-analysis-result-actions{
    direction:rtl;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    padding-top:8px;
}

.skin-analysis-next-action{
    order:1;
}

.skin-analysis-save-action{
    order:2;
}

.skin-analysis-prev-action{
    order:3;
}

.skin-analysis-primary-btn,
.skin-analysis-secondary-btn,
.skin-analysis-ghost-btn{
    direction:rtl;
    min-height:46px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border-radius:13px;
    border:1px solid transparent;
    padding:12px 22px;
    font-weight:950;
    font-size:14px;
    cursor:pointer;
    transition:.18s ease;
}

.skin-analysis-primary-btn{
    min-width:220px;
    color:#fff;
    background:linear-gradient(135deg,var(--sa-medical-primary),var(--sa-medical-primary-dark));
    box-shadow:0 16px 32px rgba(47,127,143,.20);
}

.skin-analysis-secondary-btn{
    color:var(--sa-medical-text);
    background:#fff;
    border-color:var(--sa-medical-border);
}

.skin-analysis-ghost-btn{
    color:var(--sa-medical-primary-dark);
    background:#eaf6f5;
}

.skin-analysis-primary-btn:hover,
.skin-analysis-secondary-btn:hover,
.skin-analysis-ghost-btn:hover{
    transform:translateY(-1px);
}

.skin-analysis-secondary-btn.is-disabled,
.skin-analysis-secondary-btn:disabled{
    opacity:.45;
    cursor:not-allowed;
    transform:none;
}

.skin-analysis-sidebar-head{
    margin-bottom:16px;
    padding-bottom:14px;
    border-bottom:1px solid var(--sa-medical-border);
}

.skin-analysis-sidebar-head strong{
    display:block;
    color:var(--sa-medical-text);
    font-size:16px;
    font-weight:950;
}

.skin-analysis-sidebar-head span{
    display:block;
    margin-top:5px;
    color:var(--sa-medical-muted);
    font-size:12px;
    font-weight:800;
}

.skin-analysis-side-steps{
    direction:rtl;
    list-style:none;
    display:grid;
    gap:10px;
    margin:0;
    padding:0;
}

.skin-analysis-side-steps li{
    direction:rtl;
    display:grid;
    grid-template-columns:30px 1fr;
    gap:10px;
    align-items:center;
    padding:10px;
    border-radius:14px;
    border:1px solid transparent;
}

.skin-analysis-side-steps li b{
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#eaf5f4;
    color:#657982;
    font-size:12px;
}

.skin-analysis-side-steps li strong{
    direction:rtl;
    display:block;
    color:var(--sa-medical-text);
    font-size:13px;
    line-height:1.5;
}

.skin-analysis-side-steps li small{
    direction:rtl;
    display:block;
    color:var(--sa-medical-muted);
    font-size:11px;
    line-height:1.5;
}

.skin-analysis-side-steps li.active{
    background:#edf8f8;
    border-color:var(--sa-medical-border-strong);
}

.skin-analysis-side-steps li.active b{
    background:var(--sa-medical-primary);
    color:#fff;
}

.skin-analysis-side-steps li.done b{
    background:#eaf8ef;
    color:#15844b;
}

.skin-analysis-note{
    margin-top:18px;
    padding:16px;
    border-radius:16px;
    background:linear-gradient(135deg,#edf8f8,#fbfdfc);
    border:1px solid var(--sa-medical-border);
}

.skin-analysis-note strong{
    display:block;
    margin-bottom:6px;
    color:var(--sa-medical-primary-dark);
    font-size:14px;
}

.skin-analysis-note p{
    margin:0;
    color:var(--sa-medical-muted);
    font-size:12px;
    line-height:1.8;
}

.skin-analysis-result-shell{
    grid-template-columns:minmax(0,1fr) 320px;
}

.skin-analysis-result-main{
    display:grid;
    gap:20px;
}

.skin-analysis-result-head{
    display:grid;
    grid-template-columns:1fr auto;
    gap:24px;
    align-items:center;
    padding:22px;
    border-radius:20px;
    background:linear-gradient(135deg,#fff,#edf8f8 58%,#f9fcfb);
    border:1px solid var(--sa-medical-border);
}

.skin-analysis-result-head span{
    color:var(--sa-medical-primary-dark);
    font-size:13px;
    font-weight:950;
}

.skin-analysis-result-head h1{
    margin:8px 0;
    color:var(--sa-medical-text);
    font-size:30px;
    line-height:1.35;
}

.skin-analysis-result-head p{
    max-width:760px;
    margin:0;
    color:var(--sa-medical-muted);
    font-size:15px;
    line-height:1.9;
}

.skin-score-ring{
    position:relative;
    width:168px;
    height:168px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:
        radial-gradient(circle at center,#fff 58%,transparent 59%),
        conic-gradient(var(--sa-medical-primary) calc(var(--score) * 1%), #dceeee 0);
    box-shadow:inset 0 0 0 1px var(--sa-medical-border),0 18px 40px rgba(33,91,104,.14);
}

.skin-score-ring .sa-icon{
    position:absolute;
    top:26px;
    width:24px;
    height:24px;
    color:var(--sa-medical-primary);
}

.skin-score-ring strong{
    color:var(--sa-medical-primary-dark);
    font-size:42px;
    line-height:1;
}

.skin-score-ring small{
    margin-top:-42px;
    color:#272d44;
    font-size:13px;
    font-weight:900;
}

.skin-analysis-summary-grid{
    direction:rtl;
    display:grid;
    grid-template-columns:repeat(4,minmax(160px,1fr));
    gap:14px;
}

.skin-analysis-summary-grid article,
.skin-analysis-metrics-card,
.skin-analysis-priority-card,
.skin-analysis-warning{
    border:1px solid var(--sa-medical-border);
    border-radius:18px;
    background:#fff;
    box-shadow:0 14px 34px var(--sa-medical-shadow);
}

.skin-analysis-summary-grid article{
    direction:rtl;
    min-height:110px;
    display:grid;
    gap:8px;
    align-content:center;
    padding:18px;
}

.skin-analysis-summary-grid article .sa-icon-soft{
    margin-bottom:4px;
}

.skin-analysis-summary-grid span{
    color:var(--sa-medical-muted);
    font-size:12px;
    font-weight:850;
}

.skin-analysis-summary-grid .sa-icon-soft{
    color:var(--sa-medical-primary);
    font-size:inherit;
    font-weight:inherit;
}

.skin-analysis-summary-grid strong{
    color:var(--sa-medical-text);
    font-size:17px;
    line-height:1.6;
}

.skin-analysis-metrics-card,
.skin-analysis-priority-card,
.skin-analysis-warning{
    padding:20px;
}

.skin-analysis-section-title{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:14px;
    margin-bottom:16px;
}

.skin-analysis-section-title h2{
    margin:0;
    color:var(--sa-medical-text);
    font-size:20px;
}

.skin-analysis-section-title p{
    margin:0;
    color:var(--sa-medical-muted);
    font-size:13px;
}

.skin-analysis-metrics-grid{
    direction:rtl;
    display:grid;
    grid-template-columns:repeat(3,minmax(160px,1fr));
    gap:14px;
}

.skin-analysis-metric{
    direction:rtl;
    display:grid;
    gap:10px;
    padding:14px;
    border-radius:15px;
    background:#fbfffc;
    border:1px solid var(--sa-medical-border);
}

.skin-analysis-metric > .sa-icon-soft{
    width:42px;
    height:42px;
    border-radius:15px;
}

.skin-analysis-metric div{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
}

.skin-analysis-metric strong{
    color:var(--sa-medical-text);
    font-size:14px;
}

.skin-analysis-metric span{
    display:block;
    color:var(--sa-medical-muted);
    font-size:11px;
    line-height:1.5;
}

.skin-analysis-metric b{
    color:var(--sa-medical-primary-dark);
    font-size:20px;
}

.skin-analysis-priority-card ol{
    direction:rtl;
    display:grid;
    grid-template-columns:repeat(2,minmax(180px,1fr));
    gap:12px;
    margin:0;
    padding:0;
    list-style:none;
}

.skin-analysis-priority-card li{
    direction:rtl;
    position:relative;
    min-height:48px;
    display:flex;
    align-items:center;
    padding:10px 42px 10px 14px;
    border-radius:14px;
    color:var(--sa-medical-text);
    background:#fbfffc;
    border:1px solid var(--sa-medical-border);
    font-weight:850;
    line-height:1.6;
}

.skin-analysis-priority-card li::before{
    content:counter(list-item);
    position:absolute;
    right:12px;
    width:22px;
    height:22px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#e2f1f0;
    color:var(--sa-medical-primary-dark);
    font-size:12px;
    font-weight:950;
}

.skin-analysis-warning{
    background:#fff8ef;
    border-color:rgba(202,122,34,.18);
}

.skin-analysis-warning strong{
    display:block;
    margin-bottom:6px;
    color:#a15d12;
    font-size:16px;
}

.skin-analysis-warning .sa-icon-soft{
    float:right;
    margin-left:12px;
}

.skin-analysis-warning p{
    margin:0;
    color:#745333;
    line-height:1.8;
}

.skin-analysis-history-card{
    padding:20px;
    border:1px solid var(--sa-medical-border);
    border-radius:18px;
    background:#fff;
    box-shadow:0 14px 34px var(--sa-medical-shadow);
}

.skin-analysis-history-list{
    display:grid;
    gap:12px;
}

.skin-analysis-history-list article{
    direction:rtl;
    display:grid;
    grid-template-columns:58px minmax(0,1fr) auto;
    gap:14px;
    align-items:center;
    padding:14px;
    border-radius:16px;
    border:1px solid var(--sa-medical-border);
    background:#fbfffc;
}

.skin-analysis-history-list article.is-latest{
    border-color:var(--sa-medical-border-strong);
    background:linear-gradient(135deg,#edf8f8,#fbfdfc);
}

.skin-analysis-history-score{
    width:52px;
    height:52px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    border-radius:16px;
    color:var(--sa-medical-primary-dark);
    background:#e2f1f0;
    font-size:20px;
    font-weight:950;
}

.skin-analysis-history-score .sa-icon{
    width:15px;
    height:15px;
}

.skin-analysis-history-list strong{
    display:block;
    color:var(--sa-medical-text);
    font-size:15px;
    line-height:1.5;
}

.skin-analysis-history-list span,
.skin-analysis-history-list small{
    display:block;
    color:var(--sa-medical-muted);
    font-size:12px;
    line-height:1.6;
}

.skin-analysis-history-list a{
    min-width:74px;
    min-height:38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    color:var(--sa-medical-primary-dark);
    background:#eaf6f5;
    font-weight:950;
    gap:6px;
}

.skin-analysis-history-list a .sa-icon{
    width:16px;
    height:16px;
}

.skin-analysis-result-actions{
    justify-content:flex-start;
}

@media(max-width:1180px){
    .skin-analysis-shell,
    .skin-analysis-result-shell{
        grid-template-columns:1fr;
    }

    .skin-analysis-card,
    .skin-analysis-result-main,
    .skin-analysis-sidebar,
    .skin-analysis-result-side{
        grid-column:1;
        grid-row:auto;
    }

    .skin-analysis-sidebar,
    .skin-analysis-result-side{
        position:static;
        order:-1;
    }

    .skin-analysis-side-steps{
        grid-template-columns:repeat(3,1fr);
    }

    .skin-analysis-options,
    .skin-analysis-visual-grid,
    .skin-analysis-summary-grid,
    .skin-analysis-metrics-grid{
        grid-template-columns:repeat(2,minmax(150px,1fr));
    }
}

@media(max-width:720px){
    .skin-analysis-page{
        width:100%;
        padding-top:0;
    }

    .skin-analysis-shell,
    .skin-analysis-result-shell{
        width:min(94%,680px);
    }

    .skin-analysis-header{
        direction:rtl;
        flex-direction:column;
        align-items:stretch;
    }

    .skin-analysis-header-links{
        justify-content:flex-end;
        overflow:auto;
        flex-wrap:nowrap;
        padding-bottom:4px;
    }

    .skin-analysis-card,
    .skin-analysis-result-main,
    .skin-analysis-sidebar,
    .skin-analysis-result-side{
        border-radius:16px;
    }

    .skin-analysis-card,
    .skin-analysis-result-main{
        padding:18px;
        min-height:auto;
    }

    .skin-analysis-topbar,
    .skin-analysis-result-head,
    .skin-analysis-section-title{
        grid-template-columns:1fr;
        flex-direction:column;
        align-items:stretch;
    }

    .skin-analysis-progress-steps{
        gap:14px;
        justify-content:center;
    }

    .skin-analysis-progress-steps span:not(:last-child)::after{
        width:7px;
        left:calc(100% + 3px);
        right:auto;
    }

    .skin-analysis-title h1,
    .skin-analysis-result-head h1{
        font-size:24px;
    }

    .skin-analysis-options,
    .skin-analysis-options-compact,
    .skin-analysis-visual-grid,
    .skin-analysis-summary-grid,
    .skin-analysis-metrics-grid,
    .skin-analysis-priority-card ol,
    .skin-analysis-side-steps{
        grid-template-columns:1fr;
    }

    .skin-analysis-result-head{
        justify-items:center;
        text-align:center;
    }

    .skin-analysis-actions,
    .skin-analysis-result-actions{
        align-items:stretch;
    }

    .skin-analysis-primary-btn,
    .skin-analysis-secondary-btn,
    .skin-analysis-ghost-btn{
        width:100%;
    }
}

/* Smart Intake Assistant */
.skin-intake-shell{
    align-items:stretch;
    margin-top:12px;
    gap:16px;
}

.skin-intake-shell .skin-analysis-card,
.skin-intake-shell .skin-analysis-sidebar{
    align-self:stretch;
}

.skin-intake-shell .skin-analysis-sidebar{
    display:flex;
    flex-direction:column;
    position:relative;
    top:auto;
}

.skin-intake-shell .skin-analysis-side-steps{
    flex:1 1 auto;
}

.skin-intake-shell .skin-analysis-note{
    margin-top:auto;
}

.skin-intake-card.skin-analysis-card{
    padding:16px 20px 14px;
    min-height:0;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.skin-intake-card{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.skin-intake-topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding-bottom:4px;
    border-bottom:1px solid var(--sa-medical-border);
}

.skin-intake-agent{
    display:flex;
    align-items:center;
    gap:10px;
}

.skin-intake-agent-centered{
    justify-content:center;
    margin-bottom:8px;
}

.skin-intake-agent-avatar{
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:linear-gradient(135deg,var(--sa-medical-primary),var(--sa-medical-secondary));
    color:#fff;
    font-weight:950;
    font-size:14px;
    box-shadow:0 8px 18px rgba(47,127,159,.16);
}

.skin-intake-agent strong{
    display:block;
    color:var(--sa-medical-text);
    font-size:14px;
}

.skin-intake-agent small{
    display:block;
    color:var(--sa-medical-muted);
    font-size:11px;
}

.skin-intake-progress small{
    display:block;
    margin-top:2px;
    color:var(--sa-medical-muted);
    font-size:11px;
    text-align:left;
}

.skin-intake-chat{
    display:grid;
    gap:10px;
    max-height:240px;
    overflow:auto;
    padding:4px 2px 8px;
}

.skin-intake-context-line{
    padding:6px 12px;
    border-radius:10px;
    background:rgba(237,248,248,.65);
    border:1px dashed var(--sa-medical-border);
    animation:skinIntakeBubbleIn .35s ease;
}

.skin-intake-context-line p{
    margin:0;
    color:var(--sa-medical-muted);
    font-size:12.5px;
    line-height:1.45;
}

.skin-intake-question-block{
    display:flex;
    align-items:center;
    gap:12px;
    margin:0 0 8px;
    animation:skinIntakeFadeUp .4s ease both;
}

.skin-intake-robot{
    flex:0 0 auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    width:56px;
}

.skin-intake-robot-head{
    position:relative;
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border-radius:14px;
    background:linear-gradient(145deg,#ffffff,#edf8f8);
    border:2px solid rgba(47,127,159,.22);
    box-shadow:0 8px 18px rgba(47,127,159,.14);
}

.skin-intake-robot-face{
    position:relative;
    width:28px;
    height:20px;
}

.skin-intake-robot-eye{
    position:absolute;
    top:1px;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--sa-medical-primary-dark);
    animation:skinIntakeRobotBlink 4.8s ease-in-out infinite;
}

.skin-intake-robot-eye-right{ right:3px; }
.skin-intake-robot-eye-left{ left:3px; }

.skin-intake-robot-smile{
    position:absolute;
    bottom:0;
    left:50%;
    width:15px;
    height:7px;
    transform:translateX(-50%);
    border-bottom:2.5px solid var(--sa-medical-primary);
    border-radius:0 0 18px 18px;
}

.skin-intake-robot-label{
    color:var(--sa-medical-primary-dark);
    font-size:10px;
    font-weight:950;
    letter-spacing:.02em;
}

.skin-intake-bubble-question{
    flex:1;
    min-width:0;
    max-width:none;
    padding:10px 14px 12px;
    border-radius:18px 18px 18px 8px;
    background:linear-gradient(135deg,#ffffff,#f3fbfb);
    border:1px solid rgba(47,127,159,.24);
    box-shadow:0 8px 20px rgba(47,127,159,.1);
}

.skin-intake-bubble-tag{
    display:inline-flex;
    align-items:center;
    margin-bottom:4px;
    padding:3px 8px;
    border-radius:999px;
    background:rgba(47,127,159,.1);
    color:var(--sa-medical-primary-dark);
    font-size:10px;
    font-weight:900;
}

.skin-intake-question-text{
    margin:0;
    color:var(--sa-medical-text);
    font-size:15px;
    font-weight:800;
    line-height:1.45;
}

.skin-intake-bubble{
    max-width:92%;
    padding:12px 14px;
    border-radius:18px;
    animation:skinIntakeBubbleIn .35s ease;
}

.skin-intake-bubble-assistant{
    justify-self:start;
    background:linear-gradient(135deg,#edf8f8,#f7fcff);
    border:1px solid var(--sa-medical-border);
}

.skin-intake-bubble-label{
    display:block;
    margin-bottom:4px;
    color:var(--sa-medical-primary-dark);
    font-size:11px;
    font-weight:950;
}

.skin-intake-bubble p{
    margin:0;
    color:var(--sa-medical-text);
    font-size:14px;
    line-height:1.7;
}

.skin-intake-question-help{
    margin:0 0 8px;
    color:var(--sa-medical-muted);
    font-size:12.5px;
    line-height:1.45;
}

.skin-intake-form{
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
    gap:12px;
    min-height:0;
    animation:skinIntakeFadeUp .35s ease .08s both;
}

.skin-intake-question{
    border:none;
    padding:0;
    margin:0;
    background:transparent;
    box-shadow:none;
}

.skin-intake-question .skin-analysis-options,
.skin-intake-question .skin-analysis-visual-grid{
    margin-top:0;
    gap:12px;
}

.skin-intake-question .skin-analysis-option{
    min-height:92px;
    gap:8px;
    padding:14px 12px 13px;
    border-radius:16px;
}

.skin-intake-question .skin-analysis-option-icon{
    width:38px;
    height:38px;
    border-radius:13px;
}

.skin-intake-question .skin-analysis-option-icon svg{
    width:20px;
    height:20px;
}

.skin-intake-question .skin-analysis-option strong{
    font-size:13.5px;
    line-height:1.4;
}

.skin-intake-actions{
    margin-top:auto;
    padding-top:14px;
    border-top:1px solid var(--sa-medical-border);
}

.skin-intake-actions .skin-analysis-primary-btn,
.skin-intake-actions .skin-analysis-secondary-btn,
.skin-intake-actions .skin-analysis-ghost-btn{
    min-height:40px;
    padding:8px 18px;
}

.skin-intake-error{
    margin-top:-4px;
}

.skin-intake-phase-intro{
    margin:0;
    padding:10px 14px;
    border-radius:12px;
    background:#f7fcff;
    border:1px solid var(--sa-medical-border);
    color:var(--sa-medical-muted);
    font-size:13px;
    line-height:1.7;
}

.consultation-intro-shell,
.consultation-received-shell{
    min-height:calc(100vh - 120px);
    display:grid;
    place-items:center;
    padding:24px;
}

.consultation-intro-main{
    display:grid;
    gap:20px;
}

.consultation-intro-card,
.consultation-received-card{
    padding:28px 24px;
    border-radius:24px;
    background:linear-gradient(135deg,#fff,#f7fcff 58%,#edf8f8);
    border:1px solid var(--sa-medical-border);
    box-shadow:0 20px 48px rgba(31,88,110,.08);
}

.consultation-intro-card span,
.consultation-received-card span{
    display:inline-block;
    margin-bottom:8px;
    color:var(--sa-medical-primary-dark);
    font-size:12px;
    font-weight:950;
}

.consultation-intro-card h1,
.consultation-received-card h1{
    margin:0 0 12px;
    color:var(--sa-medical-text);
    font-size:28px;
}

.consultation-intro-points{
    margin:16px 0 20px;
    padding:0 20px 0 0;
    color:var(--sa-medical-muted);
    line-height:1.9;
}

.consultation-intro-status{
    margin:0 0 16px;
    padding:14px 16px;
    border-radius:16px;
    border:1px solid var(--sa-medical-border);
    background:#fff;
}

.consultation-intro-status strong{
    display:block;
    margin-bottom:6px;
    color:var(--sa-medical-text);
    font-size:15px;
}

.consultation-intro-status p{
    margin:0;
    color:var(--sa-medical-muted);
    font-size:13px;
    line-height:1.65;
}

.consultation-intro-status-waiting{
    border-color:rgba(196,150,60,.28);
    background:linear-gradient(135deg,#fffdf8,#fff);
}

.consultation-intro-status-draft{
    border-color:rgba(47,127,159,.22);
    background:linear-gradient(135deg,#f7fcff,#fff);
}

.consultation-intro-status-saved{
    border-color:rgba(79,146,118,.22);
    background:linear-gradient(135deg,#f6fcf8,#fff);
}

.consultation-intro-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.consultation-intro-actions .skin-analysis-primary-btn,
.consultation-intro-actions .skin-analysis-secondary-btn{
    flex:1 1 220px;
    justify-content:center;
}

.consultation-received-shell{
    width:min(640px,100%);
    margin:0 auto;
}

.consultation-received-card{
    text-align:center;
}

.consultation-received-icon{
    width:64px;
    height:64px;
    margin:0 auto 16px;
    display:grid;
    place-items:center;
    border-radius:20px;
    background:#f1fbf5;
    color:#15844b;
}

.consultation-received-icon .sa-icon{
    width:32px;
    height:32px;
}

.consultation-received-lead{
    margin:0 0 12px;
    color:var(--sa-medical-text);
    font-size:16px;
    line-height:1.8;
}

.consultation-received-note,
.consultation-received-thanks{
    margin:0 0 10px;
    color:var(--sa-medical-muted);
    font-size:14px;
    line-height:1.7;
}

.consultation-received-btn{
    margin-top:20px;
    width:100%;
    justify-content:center;
}

.consultation-waiting-card{
    padding:22px 20px;
    border-radius:20px;
    background:linear-gradient(135deg,#fff,#f7fcff);
    border:1px solid var(--sa-medical-border);
}

.consultation-waiting-card h3{
    margin:0 0 10px;
    color:var(--sa-medical-text);
}

.consultation-waiting-card p{
    margin:0 0 8px;
    color:var(--sa-medical-muted);
    line-height:1.8;
    font-size:14px;
}

.consultation-waiting-steps{
    list-style:none;
    margin:18px 0;
    padding:0;
    display:grid;
    gap:8px;
}

.consultation-waiting-steps li{
    position:relative;
    padding:11px 14px 11px 40px;
    border-radius:12px;
    background:#fff;
    border:1px solid var(--sa-medical-border);
    color:var(--sa-medical-muted);
    font-size:14px;
}

.consultation-waiting-steps li::before{
    content:"○";
    position:absolute;
    left:14px;
    top:50%;
    transform:translateY(-50%);
    font-weight:950;
}

.consultation-waiting-steps li.is-done{
    color:#15844b;
    background:#f1fbf5;
    border-color:rgba(79,146,118,.22);
}

.consultation-waiting-steps li.is-done::before{
    content:"✓";
    color:#15844b;
}

.consultation-waiting-steps li.is-active{
    color:var(--sa-medical-text);
    background:#edf8f8;
    border-color:var(--sa-medical-border-strong);
}

.consultation-waiting-steps li.is-active::before{
    content:"◉";
    color:var(--sa-medical-primary);
}

.routine-duration-note{
    margin:12px 0 0;
    color:var(--sa-medical-muted);
    font-size:13px;
}

.skin-intake-visual-hint{
    margin:0;
    padding:12px 14px;
    border-radius:14px;
    background:#f7fcff;
    border:1px solid var(--sa-medical-border);
    color:var(--sa-medical-muted);
    font-size:13px;
    line-height:1.7;
}

.skin-intake-visual-hint b{
    color:var(--sa-medical-primary-dark);
}

.skin-intake-intro-shell .skin-intake-intro-main{
    display:grid;
    gap:18px;
}

.skin-intake-intro-chat{
    display:grid;
    gap:10px;
}

.skin-intake-intro-head{
    margin-top:4px;
}

.skin-intake-processing{
    position:fixed;
    inset:0;
    z-index:1200;
    display:grid;
    place-items:center;
    padding:24px;
    background:rgba(16,36,54,.34);
    backdrop-filter:blur(6px);
}

.skin-intake-processing-card{
    width:min(520px,100%);
    padding:28px 24px;
    border-radius:24px;
    background:#fff;
    border:1px solid var(--sa-medical-border);
    box-shadow:0 28px 60px rgba(16,36,54,.18);
    text-align:center;
}

.skin-intake-processing-card h2{
    margin:12px 0 18px;
    color:var(--sa-medical-text);
    font-size:24px;
}

.skin-intake-processing-steps{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    gap:10px;
    text-align:right;
}

.skin-intake-processing-steps li{
    position:relative;
    padding:12px 14px 12px 42px;
    border-radius:14px;
    background:#f7fcff;
    border:1px solid var(--sa-medical-border);
    color:var(--sa-medical-muted);
    font-size:14px;
    transition:all .25s ease;
}

.skin-intake-processing-steps li::before{
    content:"";
    position:absolute;
    left:14px;
    top:50%;
    width:18px;
    height:18px;
    margin-top:-9px;
    border-radius:50%;
    border:2px solid rgba(47,127,159,.24);
}

.skin-intake-processing-steps li.is-active{
    color:var(--sa-medical-text);
    border-color:var(--sa-medical-border-strong);
    background:#edf8f8;
}

.skin-intake-processing-steps li.is-active::before{
    border-color:var(--sa-medical-primary);
    border-top-color:transparent;
    animation:skinIntakeSpin .8s linear infinite;
}

.skin-intake-processing-steps li.is-done{
    color:#15844b;
    background:#f1fbf5;
    border-color:rgba(79,146,118,.22);
}

.skin-intake-processing-steps li.is-done::before{
    content:"✓";
    display:grid;
    place-items:center;
    border:none;
    background:#15844b;
    color:#fff;
    font-size:11px;
    font-weight:950;
    animation:none;
}

.skin-intake-processing-note{
    margin:16px 0 0;
    color:var(--sa-medical-muted);
    font-size:13px;
}

.skin-intake-ready-banner{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:14px;
    align-items:center;
    padding:16px 18px;
    border-radius:18px;
    background:linear-gradient(135deg,#edf8f8,#f1fbf5);
    border:1px solid rgba(79,146,118,.22);
}

.skin-intake-ready-banner .sa-icon{
    width:28px;
    height:28px;
    color:var(--sa-medical-primary);
}

.skin-intake-ready-banner strong{
    display:block;
    margin-bottom:4px;
    color:var(--sa-medical-text);
}

.skin-intake-ready-banner p{
    margin:0;
    color:var(--sa-medical-muted);
    font-size:13px;
    line-height:1.7;
}

.is-processing-hidden{
    visibility:hidden;
    height:0;
    overflow:hidden;
}

.is-processing-hidden.is-revealed{
    visibility:visible;
    height:auto;
    overflow:visible;
    animation:skinIntakeFadeUp .45s ease;
}

.admin-consultation-summary-card{
    grid-column:1 / -1;
    background:linear-gradient(135deg,#fff,#f7fcff 58%,#edf8f8);
    border:1px solid var(--sa-medical-border-strong);
}

.admin-consultation-summary-head span{
    display:inline-block;
    margin-bottom:6px;
    color:var(--routine-primary,#2f7f8f);
    font-size:12px;
    font-weight:950;
    letter-spacing:.04em;
}

.admin-consultation-summary-head h2{
    margin:0 0 6px;
}

.admin-consultation-summary-head p{
    margin:0 0 16px;
    color:#5f7480;
}

.admin-consultation-summary-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
}

.admin-consultation-summary-grid article{
    padding:14px;
    border-radius:14px;
    background:#fff;
    border:1px solid rgba(47,127,143,.12);
}

.admin-consultation-summary-grid span{
    display:block;
    margin-bottom:6px;
    color:#5f7480;
    font-size:12px;
}

.admin-consultation-summary-grid strong{
    display:block;
    color:#14323d;
    font-size:14px;
    line-height:1.6;
}

.admin-consultation-summary-text{
    margin-top:14px;
}

.admin-consultation-extra-notes{
    margin-top:14px;
    padding-top:12px;
    border-top:1px dashed rgba(47,127,143,.18);
}

.admin-consultation-extra-notes h3{
    margin:0 0 8px;
    font-size:14px;
}

.admin-consultation-extra-notes p{
    margin:0 0 6px;
    color:#5f7480;
    font-size:13px;
    line-height:1.7;
}

@keyframes skinIntakeBubbleIn{
    from{ opacity:0; transform:translateY(8px); }
    to{ opacity:1; transform:translateY(0); }
}

@keyframes skinIntakeFadeUp{
    from{ opacity:0; transform:translateY(10px); }
    to{ opacity:1; transform:translateY(0); }
}

@keyframes skinIntakeRobotBlink{
    0%, 44%, 48%, 100%{ transform:scaleY(1); }
    46%{ transform:scaleY(.12); }
}

@keyframes skinIntakeSpin{
    to{ transform:rotate(360deg); }
}

@media (max-width:900px){
    .admin-consultation-summary-grid{
        grid-template-columns:1fr;
    }

    .skin-intake-topbar{
        flex-direction:column;
        align-items:stretch;
    }

    .skin-intake-question-block{
        align-items:flex-start;
    }

    .skin-intake-robot{
        width:48px;
    }

    .skin-intake-robot-head{
        width:42px;
        height:42px;
    }

    .skin-intake-question-text{
        font-size:14px;
    }
}

/* Admin Skin Intake Builder */
.admin-skin-intake-body{
    background:#f4fafb;
}

.admin-skin-intake-page{
    max-width:1100px;
    margin:0 auto;
    padding:28px 20px 48px;
}

.admin-skin-intake-head{
    margin-bottom:22px;
}

.admin-skin-intake-head.is-split{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
}

.admin-skin-intake-back{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:#2f7f8f;
    text-decoration:none;
    font-weight:800;
    margin-bottom:10px;
}

.admin-skin-intake-eyebrow{
    display:block;
    color:#5f7480;
    font-size:12px;
    font-weight:800;
}

.admin-skin-intake-head h1{
    margin:6px 0;
    color:#14323d;
}

.admin-skin-intake-head p{
    margin:0;
    color:#5f7480;
    line-height:1.7;
}

.admin-skin-intake-stats{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
    margin-bottom:22px;
}

.admin-skin-intake-stats article{
    background:#fff;
    border:1px solid rgba(47,127,143,.14);
    border-radius:18px;
    padding:18px;
}

.admin-skin-intake-stats strong{
    display:block;
    font-size:28px;
    color:#2f7f8f;
}

.admin-skin-intake-stats span{
    display:block;
    margin-top:4px;
    color:#14323d;
    font-weight:800;
}

.admin-skin-intake-stats small{
    color:#5f7480;
}

.admin-skin-intake-cards{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
    margin-bottom:18px;
}

.admin-skin-intake-card,
a.admin-skin-intake-card{
    display:flex;
    gap:14px;
    align-items:flex-start;
    background:#fff;
    border:1px solid rgba(47,127,143,.14);
    border-radius:18px;
    padding:18px;
    text-decoration:none;
    color:inherit;
    transition:transform .2s ease, box-shadow .2s ease;
}

.admin-skin-intake-card:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 30px rgba(47,127,143,.12);
}

.admin-skin-intake-card .admin-icon{
    width:28px;
    height:28px;
    color:#2f7f8f;
    flex:0 0 auto;
}

.admin-skin-intake-note,
.admin-skin-intake-messages{
    background:#fff;
    border:1px dashed rgba(47,127,143,.22);
    border-radius:16px;
    padding:14px 16px;
    margin-bottom:18px;
}

.admin-skin-intake-primary-btn,
.admin-skin-intake-secondary-btn,
.admin-skin-intake-danger-btn{
    border:none;
    border-radius:12px;
    padding:10px 16px;
    font-weight:800;
    cursor:pointer;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.admin-skin-intake-primary-btn{
    background:linear-gradient(135deg,#2f7f8f,#5fb3c4);
    color:#fff;
}

.admin-skin-intake-secondary-btn{
    background:#edf8f8;
    color:#2f7f8f;
}

.admin-skin-intake-danger-btn{
    background:#fff1f2;
    color:#be123c;
}

.admin-skin-intake-filters{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:16px;
}

.admin-skin-intake-toolbar{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:16px;
}

.admin-skin-intake-toolbar .admin-skin-intake-filters{
    margin-bottom:0;
}

.admin-skin-intake-toolbar .admin-skin-intake-hint{
    margin:0;
    flex:1;
    min-width:200px;
}

#adminSkinIntakePhaseFilter select,
#adminSkinIntakeGroupFilter select,
.admin-skin-intake-toolbar select{
    max-width:280px;
}
#adminSkinIntakeGroupFilter select,
.admin-skin-intake-toolbar select{
    max-width:280px;
}

.admin-skin-intake-filters input,
.admin-skin-intake-filters select,
.admin-skin-intake-form input,
.admin-skin-intake-form textarea,
.admin-skin-intake-form select{
    width:100%;
    border:1px solid rgba(47,127,143,.18);
    border-radius:12px;
    padding:10px 12px;
    background:#fff;
}

.admin-skin-intake-table-wrap{
    overflow:auto;
    background:#fff;
    border:1px solid rgba(47,127,143,.14);
    border-radius:18px;
}

.admin-skin-intake-table{
    width:100%;
    border-collapse:collapse;
}

.admin-skin-intake-table th,
.admin-skin-intake-table td{
    padding:12px 14px;
    border-bottom:1px solid rgba(47,127,143,.08);
    text-align:right;
    vertical-align:top;
}

.admin-skin-intake-row-actions{
    display:flex;
    gap:10px;
    align-items:center;
}

.admin-skin-intake-row-actions form{
    margin:0;
}

.admin-skin-intake-row-actions .is-danger{
    background:none;
    border:none;
    color:#be123c;
    cursor:pointer;
    font-weight:800;
}

.admin-skin-intake-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}

.admin-skin-intake-grid .full{
    grid-column:1 / -1;
}

.admin-skin-intake-grid label{
    display:grid;
    gap:6px;
    color:#14323d;
    font-weight:700;
    font-size:13px;
}

.admin-skin-intake-grid small{
    color:#5f7480;
    font-weight:500;
}

.checkbox-label{
    display:flex !important;
    align-items:center;
    gap:8px;
}

.admin-skin-intake-card-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:14px;
}

.admin-skin-intake-form .admin-skin-intake-card{
    display:block;
    margin-bottom:18px;
}

.admin-skin-intake-option-row,
.admin-skin-intake-flow-row{
    border:1px solid rgba(47,127,143,.12);
    border-radius:16px;
    padding:14px;
    margin-bottom:12px;
    background:#f9fdfd;
}

.admin-skin-intake-hint{
    margin:0 0 14px;
    color:#5f7480;
    font-size:13px;
    line-height:1.6;
}

.admin-skin-intake-condition-fields{
    display:grid;
    gap:14px;
    padding:14px;
    border:1px dashed rgba(47,127,143,.22);
    border-radius:14px;
    background:#fff;
}

.admin-skin-intake-option-fields{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto auto;
    gap:12px;
    align-items:end;
}

.admin-skin-intake-option-label{
    display:grid;
    gap:6px;
    color:#14323d;
    font-weight:700;
    font-size:13px;
}

.admin-skin-intake-color-picker{
    display:grid;
    gap:6px;
}

.admin-skin-intake-color-title{
    color:#14323d;
    font-weight:700;
    font-size:13px;
}

.admin-skin-intake-color-options{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.admin-skin-intake-color-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:64px;
    padding:8px 12px;
    border-radius:999px;
    border:2px solid transparent;
    font-size:12px;
    font-weight:800;
    cursor:pointer;
    background:none;
    transition:transform .15s ease, box-shadow .15s ease;
}

.admin-skin-intake-color-pill.is-red{
    background:#fff1f2;
    color:#be123c;
}

.admin-skin-intake-color-pill.is-blue{
    background:#ecfeff;
    color:#0f766e;
}

.admin-skin-intake-color-pill.is-green{
    background:#ecfdf5;
    color:#047857;
}

.admin-skin-intake-color-pill.is-selected{
    box-shadow:0 0 0 2px rgba(15,118,110,.12);
    transform:translateY(-1px);
}

.admin-skin-intake-color-pill.is-red.is-selected{
    border-color:#be123c;
}

.admin-skin-intake-color-pill.is-blue.is-selected{
    border-color:#0f766e;
}

.admin-skin-intake-color-pill.is-green.is-selected{
    border-color:#047857;
}

.admin-skin-intake-option-remove{
    min-width:42px;
    height:42px;
    padding:0;
    font-size:22px;
    line-height:1;
}

@media (max-width: 760px){
    .admin-skin-intake-option-fields{
        grid-template-columns:1fr;
    }

    .admin-skin-intake-option-remove{
        justify-self:start;
    }
}

.admin-skin-intake-form-actions{
    display:flex;
    gap:12px;
}

.admin-skin-intake-visual-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
    gap:16px;
}

.admin-skin-intake-visual-card{
    background:#fff;
    border:1px solid rgba(47,127,143,.14);
    border-radius:18px;
    overflow:hidden;
}

.admin-skin-intake-visual-image{
    aspect-ratio:4/3;
    background:#edf8f8;
    display:grid;
    place-items:center;
}

.admin-skin-intake-visual-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.admin-skin-intake-visual-body{
    padding:14px;
}

.admin-skin-intake-preview{
    display:block;
    max-width:220px;
    margin-top:10px;
    border-radius:12px;
}

.is-active{ color:#15844b; font-weight:800; }
.is-muted{ color:#94a3b8; font-weight:800; }

@media (max-width:900px){
    .admin-skin-intake-stats,
    .admin-skin-intake-cards,
    .admin-skin-intake-grid{
        grid-template-columns:1fr;
    }
}

/* =========================
   ROUTINE WORKFLOW
========================= */

.my-routine-page,
.custom-routine-page,
.routine-wizard-page,
.admin-routine-page{
    --routine-primary:#2f7f8f;
    --routine-primary-dark:#246a78;
    --routine-soft:#eef8f7;
    --routine-border:rgba(47,127,143,.16);
    --routine-border-strong:rgba(47,127,143,.34);
    --routine-shadow:0 18px 46px rgba(33,91,104,.10);
    --routine-text:#142f39;
    --routine-muted:#677c83;
    width:min(94%,1180px);
    margin:28px auto 56px;
    color:var(--routine-text);
}

.admin-routine-page{
    width:min(94%,1240px);
}

.routine-medical-body{
    --routine-primary:#2f7f8f;
    --routine-primary-dark:#246a78;
    --routine-soft:#eef8f7;
    --routine-border:rgba(47,127,143,.16);
    --routine-border-strong:rgba(47,127,143,.34);
    --routine-shadow:0 18px 46px rgba(33,91,104,.10);
    --routine-text:#142f39;
    --routine-muted:#677c83;
    background:
        radial-gradient(circle at 14% 8%,rgba(232,247,244,.9),transparent 30%),
        linear-gradient(135deg,#f8fcfb 0%,#eef8f7 50%,#fbfdfc 100%);
}

.routine-medical-body .fay-nav-link.active::after{
    background:#2f7f8f;
}

.routine-wizard-card{
    max-width:980px;
    margin:0 auto;
    padding:24px;
    border:1px solid var(--routine-border);
    border-radius:20px;
    background:#fff;
    box-shadow:var(--routine-shadow);
}

.routine-progress{
    display:grid;
    gap:10px;
    margin-bottom:22px;
}

.routine-progress span{
    color:var(--routine-primary-dark);
    font-weight:950;
}

.routine-progress div{
    height:9px;
    border-radius:999px;
    overflow:hidden;
    background:#e7f3f2;
}

.routine-progress i{
    display:block;
    width:16.66%;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(135deg,var(--routine-primary),var(--routine-primary-dark));
    transition:width .2s ease;
}

.routine-step{
    display:none;
}

.routine-step.active{
    display:block;
}

.routine-step h1{
    margin:8px 0;
    color:var(--routine-text);
    font-size:28px;
    line-height:1.35;
}

.routine-step > p{
    margin:0 0 20px;
    color:var(--routine-muted);
    line-height:1.9;
}

.routine-badge{
    display:inline-flex;
    min-height:30px;
    align-items:center;
    padding:0 12px;
    border-radius:999px;
    color:var(--routine-primary-dark);
    background:var(--routine-soft);
    font-weight:950;
    font-size:12px;
}

.routine-options-grid,
.routine-small-grid,
.routine-visual-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
}

.routine-small-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    margin-top:14px;
}

.routine-option,
.routine-visual-option{
    position:relative;
    display:grid;
    gap:8px;
    min-height:112px;
    padding:16px;
    border:1px solid var(--routine-border);
    border-radius:16px;
    background:#fbfffe;
    cursor:pointer;
    transition:.18s ease;
}

.routine-option input,
.routine-visual-option input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.routine-option:hover,
.routine-option.selected,
.routine-visual-option:hover,
.routine-visual-option.selected{
    border-color:var(--routine-border-strong);
    background:#eef8f7;
    box-shadow:0 14px 30px rgba(33,91,104,.11);
}

.routine-option strong,
.routine-visual-option strong{
    color:var(--routine-text);
    font-size:15px;
    line-height:1.5;
}

.routine-option span,
.routine-visual-option span,
.routine-field small{
    color:var(--routine-muted);
    font-size:12px;
    line-height:1.7;
}

.routine-visual-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
}

.routine-case-image{
    height:150px;
    display:grid;
    place-items:center;
    overflow:hidden;
    border-radius:14px;
    background:var(--routine-soft);
}

.routine-case-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.routine-actions{
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-top:22px;
}

.routine-back-btn,
.routine-next-btn,
.routine-submit-btn{
    min-height:44px;
    border:0;
    border-radius:12px;
    padding:0 22px;
    font-weight:950;
    cursor:pointer;
}

.routine-next-btn,
.routine-submit-btn{
    color:#fff;
    background:linear-gradient(135deg,var(--routine-primary),var(--routine-primary-dark));
}

.routine-back-btn{
    color:var(--routine-primary-dark);
    background:var(--routine-soft);
}

.routine-submit-btn{
    display:none;
}

.my-routine-header,
.custom-routine-hero,
.admin-routine-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:18px;
    margin-bottom:22px;
}

.my-routine-header span,
.custom-routine-hero span,
.admin-routine-header span,
.routine-section-head span,
.admin-routine-form-title span{
    color:var(--routine-primary-dark);
    font-size:12px;
    font-weight:950;
}

.my-routine-header h1,
.custom-routine-hero h1,
.admin-routine-header h1,
.routine-section-head h2,
.admin-routine-form-title h2{
    margin:6px 0;
    color:var(--routine-text);
    font-size:30px;
    line-height:1.35;
}

.my-routine-header p,
.custom-routine-hero p,
.admin-routine-header p,
.routine-section-head strong,
.admin-routine-form-title p{
    margin:0;
    color:var(--routine-muted);
    font-size:14px;
    line-height:1.8;
}

.routine-status-card,
.routine-products-card,
.routine-profile-card,
.routine-card,
.routine-extra-notes,
.routine-manager-notes,
.routine-empty-state,
.custom-routine-settings,
.custom-products-section,
.admin-routine-card,
.admin-routine-form,
.admin-routine-table{
    padding:22px;
    border:1px solid var(--routine-border);
    border-radius:18px;
    background:#fff;
    box-shadow:var(--routine-shadow);
}

.routine-status-card,
.routine-products-card,
.routine-profile-card,
.routine-grid,
.custom-routine-form,
.admin-routine-form{
    margin-top:16px;
}

.routine-message-list{
    display:grid;
    gap:10px;
    margin-bottom:16px;
}

.routine-message{
    padding:12px 14px;
    border-radius:14px;
    color:#246a78;
    background:#eef8f7;
    border:1px solid var(--routine-border);
    font-weight:900;
}

.routine-message.error{
    color:#a74444;
    background:#fff4f3;
    border-color:rgba(167,68,68,.16);
}

.routine-message.warning{
    color:#946315;
    background:#fff8ea;
    border-color:rgba(148,99,21,.16);
}

.routine-status{
    display:inline-flex;
    align-items:center;
    min-height:40px;
    padding:0 16px;
    border-radius:999px;
    font-weight:950;
}

.routine-status.pending{
    color:#956518;
    background:#fff8ea;
}

.routine-status.reviewed{
    color:#5f7280;
    background:#f3f7f8;
}

.routine-status.completed{
    color:#246a78;
    background:#eef8f7;
}

.routine-status-text{
    margin:14px 0 0;
    max-width:780px;
    color:var(--routine-muted);
    font-size:15px;
    line-height:1.9;
}

.routine-rating{
    display:flex;
    gap:4px;
    margin-top:12px;
    color:#d1a345;
    font-size:20px;
}

.routine-rating .active-star{
    color:#f0a51d;
}

.routine-duration,
.routine-update-alert,
.routine-admin-note{
    margin-top:14px;
    color:var(--routine-muted);
    line-height:1.8;
}

.routine-update-alert,
.routine-admin-note{
    padding:14px;
    border-radius:14px;
    background:var(--routine-soft);
    border:1px solid var(--routine-border);
}

.routine-inline-form,
.routine-empty-actions,
.routine-buy-actions,
.custom-routine-actions,
.admin-routine-actions{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    margin-top:18px;
}

.routine-start-link,
.routine-soft-link,
.routine-soft-button,
.admin-routine-back,
.admin-routine-action,
.admin-send-btn,
.admin-save-btn,
.admin-reject-btn{
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:0;
    border-radius:12px;
    padding:0 18px;
    font-weight:950;
    cursor:pointer;
}

.routine-ajax-form button{
    min-width:190px;
    transition:background .18s ease, color .18s ease, transform .18s ease;
}

.routine-ajax-form button:disabled{
    cursor:default;
    opacity:1;
}

.routine-start-link,
.admin-send-btn{
    color:#fff;
    background:linear-gradient(135deg,var(--routine-primary),var(--routine-primary-dark));
    box-shadow:0 14px 28px rgba(47,127,143,.18);
}

.routine-action-done{
    color:#fff !important;
    background:#2f7f8f !important;
}

.routine-action-error{
    color:#fff !important;
    background:#a74444 !important;
}

.routine-soft-link,
.routine-soft-button,
.admin-routine-back,
.admin-routine-action,
.admin-save-btn{
    color:var(--routine-primary-dark);
    background:var(--routine-soft);
}

.admin-reject-btn{
    color:#9d3d3d;
    background:#fff0ef;
}

.routine-section-head,
.admin-routine-form-title{
    display:flex;
    justify-content:space-between;
    gap:18px;
    align-items:flex-end;
    margin-bottom:16px;
}

.routine-subtitle{
    margin:18px 0 12px;
    color:var(--routine-text);
    font-size:17px;
}

.routine-item-grid,
.custom-product-grid,
.admin-routine-items{
    display:grid;
    gap:14px;
}

.routine-item-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

.routine-product-item{
    position:relative;
    min-height:120px;
    display:grid;
    grid-template-columns:82px minmax(0,1fr) auto;
    gap:14px;
    align-items:center;
    padding:14px;
    border:1px solid var(--routine-border);
    border-radius:16px;
    background:#fbfffe;
}

.routine-product-item.optional{
    cursor:pointer;
}

.routine-product-item.optional input{
    position:absolute;
    top:16px;
    left:16px;
    width:18px;
    height:18px;
    accent-color:var(--routine-primary);
}

.routine-product-item.required{
    border-color:var(--routine-border-strong);
}

.routine-product-image,
.custom-product-image,
.admin-routine-item-image{
    display:grid;
    place-items:center;
    border-radius:14px;
    background:var(--routine-soft);
    overflow:hidden;
}

.routine-product-image{
    width:82px;
    height:82px;
}

.routine-product-image img,
.admin-routine-item-image img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.routine-product-item span,
.custom-product-card span{
    color:var(--routine-primary-dark);
    font-size:12px;
    font-weight:900;
}

.routine-product-item h4,
.custom-product-card h3,
.admin-routine-item-product h3{
    margin:4px 0;
    color:var(--routine-text);
    font-size:15px;
    line-height:1.6;
}

.routine-product-item p,
.custom-product-card p,
.routine-product-item em{
    display:block;
    margin:0;
    color:var(--routine-muted);
    font-size:12px;
    line-height:1.7;
    font-style:normal;
}

.routine-product-item strong{
    color:var(--routine-primary-dark);
    white-space:nowrap;
}

.routine-product-item b{
    position:absolute;
    right:14px;
    top:14px;
    padding:4px 9px;
    border-radius:999px;
    color:var(--routine-primary-dark);
    background:#e5f3f2;
    font-size:11px;
}

.routine-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
}

.routine-card h2,
.routine-extra-notes h3,
.routine-manager-notes h3,
.routine-profile-card h2,
.admin-routine-card h2,
.admin-routine-form h2{
    margin:0 0 12px;
    color:var(--routine-text);
    font-size:19px;
}

.routine-content,
.routine-extra-notes div,
.routine-manager-notes div,
.routine-products-box div{
    color:var(--routine-muted);
    line-height:1.9;
}

.routine-profile-grid,
.admin-routine-detail-grid,
.admin-form-grid,
.custom-routine-settings{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
}

.routine-profile-item{
    padding:14px;
    border-radius:14px;
    border:1px solid var(--routine-border);
    background:#fbfffe;
}

.routine-profile-item strong,
.routine-profile-item span{
    display:block;
}

.routine-profile-item strong{
    color:var(--routine-text);
    margin-bottom:4px;
}

.routine-profile-item span{
    color:var(--routine-muted);
}

.routine-products-box{
    margin-top:16px;
}

.routine-products-box h3{
    margin:0 0 8px;
    color:var(--routine-text);
}

.routine-empty-state{
    text-align:center;
}

.routine-empty-icon{
    width:58px;
    height:58px;
    display:grid;
    place-items:center;
    margin:0 auto 12px;
    border-radius:20px;
    color:var(--routine-primary-dark);
    background:var(--routine-soft);
    font-size:24px;
}

.routine-empty-state h2{
    margin:0 0 8px;
    color:var(--routine-text);
}

.routine-empty-state p{
    margin:0 auto;
    max-width:620px;
    color:var(--routine-muted);
    line-height:1.8;
}

.routine-empty-actions{
    justify-content:center;
}

.custom-routine-form{
    display:grid;
    gap:18px;
}

.routine-field,
.admin-form-field,
.admin-routine-item-grid label{
    display:grid;
    gap:8px;
    color:var(--routine-text);
    font-size:13px;
    font-weight:900;
}

.routine-field input,
.routine-field select,
.routine-field textarea,
.admin-form-field input,
.admin-form-field select,
.admin-form-field textarea,
.admin-routine-item-grid input,
.admin-routine-item-grid select,
.admin-routine-item-grid textarea{
    width:100%;
    min-height:42px;
    padding:10px 12px;
    border:1px solid var(--routine-border);
    border-radius:12px;
    color:var(--routine-text);
    background:#fff;
    outline:0;
}

.custom-product-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
}

.custom-product-card{
    position:relative;
    display:grid;
    grid-template-columns:110px minmax(0,1fr);
    gap:14px;
    min-height:150px;
    padding:14px;
    border:1px solid var(--routine-border);
    border-radius:16px;
    background:#fbfffe;
    cursor:pointer;
    transition:.18s ease;
}

.custom-product-card:hover,
.custom-product-card.selected{
    border-color:var(--routine-border-strong);
    box-shadow:0 14px 32px rgba(33,91,104,.12);
    transform:translateY(-1px);
}

.custom-product-card.selected{
    background:#eef8f7;
}

.custom-product-card input{
    position:absolute;
    top:14px;
    left:14px;
    width:18px;
    height:18px;
    accent-color:var(--routine-primary);
}

.custom-product-image{
    width:110px;
    height:120px;
}

.custom-product-image img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.custom-product-card strong{
    display:block;
    margin-top:8px;
    color:var(--routine-primary-dark);
}

.custom-routine-actions{
    justify-content:flex-end;
}

.admin-routine-table{
    padding:0;
    overflow:hidden;
}

.admin-routine-row{
    display:grid;
    grid-template-columns:1.2fr 1.2fr 1fr .9fr 1fr .8fr .8fr;
    gap:12px;
    align-items:center;
    padding:16px 18px;
    border-bottom:1px solid var(--routine-border);
}

.admin-routine-row:last-child{
    border-bottom:0;
}

.admin-routine-head{
    color:var(--routine-text);
    background:#f4fbfa;
    font-weight:950;
}

.status-pill{
    display:inline-flex;
    align-items:center;
    min-height:30px;
    padding:0 10px;
    border-radius:999px;
    font-size:12px;
}

.status-pill.pending{
    color:#956518;
    background:#fff8ea;
}

.status-pill.completed{
    color:#246a78;
    background:#eaf7f4;
}

.status-pill.reviewed{
    color:#5f7280;
    background:#eef3f5;
}

.admin-note-box{
    padding:12px;
    border:1px solid var(--routine-border);
    border-radius:12px;
    background:#fbfffe;
    color:var(--routine-muted);
    line-height:1.8;
}

.admin-analysis-alert{
    margin:10px 0;
    padding:11px 12px;
    border:1px solid rgba(185,116,70,.24);
    border-radius:12px;
    color:#8b5329;
    background:#fff8ef;
    line-height:1.7;
    font-weight:900;
}

.admin-analysis-review-card{
    margin:16px 0;
    display:grid;
    gap:16px;
}

.admin-analysis-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    padding-bottom:14px;
    border-bottom:1px solid var(--routine-border);
}

.admin-analysis-head span{
    display:inline-flex;
    min-height:26px;
    align-items:center;
    padding:0 10px;
    border-radius:999px;
    color:var(--routine-primary-dark);
    background:var(--routine-soft);
    font-size:12px;
    font-weight:950;
}

.admin-analysis-head h2{
    margin:10px 0 6px;
}

.admin-analysis-head p{
    margin:0;
    color:var(--routine-muted);
    line-height:1.8;
}

.admin-analysis-head > strong{
    min-width:92px;
    height:92px;
    display:grid;
    place-items:center;
    border-radius:22px;
    color:#fff;
    background:linear-gradient(135deg,var(--routine-primary),var(--routine-primary-dark));
    box-shadow:0 16px 34px rgba(47,127,143,.20);
    font-size:24px;
    font-weight:950;
}

.admin-analysis-metric-grid{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:10px;
}

.admin-analysis-metric-grid article{
    min-height:82px;
    padding:12px;
    display:grid;
    align-content:center;
    gap:7px;
    border:1px solid var(--routine-border);
    border-radius:14px;
    background:#fbfffe;
}

.admin-analysis-metric-grid.concern article{
    background:#fffdf8;
}

.admin-analysis-metric-grid span{
    color:var(--routine-muted);
    font-size:12px;
    font-weight:850;
}

.admin-analysis-metric-grid strong{
    color:var(--routine-text);
    font-size:21px;
    font-weight:950;
}

.admin-analysis-cautions,
.admin-analysis-priorities,
.admin-analysis-answers{
    padding:14px;
    border:1px solid var(--routine-border);
    border-radius:14px;
    background:#fbfffe;
}

.admin-analysis-cautions{
    border-color:rgba(185,116,70,.22);
    background:#fffaf1;
}

.admin-analysis-cautions h3,
.admin-analysis-priorities h3,
.admin-analysis-answers h3{
    margin:0 0 10px;
    color:var(--routine-text);
    font-size:16px;
}

.admin-analysis-cautions p{
    margin:8px 0 0;
    color:#8b5329;
    line-height:1.8;
    font-weight:850;
}

.admin-analysis-priorities ol{
    margin:0;
    padding-right:20px;
    color:var(--routine-muted);
    line-height:1.9;
    font-weight:850;
}

.admin-analysis-answer-group{
    margin-top:12px;
    display:grid;
    gap:9px;
}

.admin-analysis-answer-group h4{
    margin:0;
    color:var(--routine-primary-dark);
    font-size:14px;
    font-weight:950;
}

.admin-analysis-answer-group article{
    padding:11px 12px;
    display:grid;
    gap:6px;
    border:1px solid rgba(47,127,143,.11);
    border-radius:12px;
    background:#fff;
}

.admin-analysis-answer-group span{
    color:var(--routine-muted);
    line-height:1.7;
    font-size:12px;
    font-weight:850;
}

.admin-analysis-answer-group strong{
    color:var(--routine-text);
    line-height:1.7;
    font-size:13px;
}

.admin-routine-form{
    display:grid;
    gap:18px;
}

.admin-routine-item-card{
    display:grid;
    gap:14px;
    padding:16px;
    border:1px solid var(--routine-border);
    border-radius:16px;
    background:#fbfffe;
}

.admin-routine-item-product{
    display:flex;
    align-items:center;
    gap:12px;
}

.admin-routine-item-image{
    width:74px;
    height:74px;
}

.admin-routine-item-product span{
    color:var(--routine-muted);
    font-size:12px;
}

.admin-routine-item-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
}

.admin-routine-item-grid.wide{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

.admin-routine-active-toggle{
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--routine-muted);
    font-weight:900;
}

.admin-routine-active-toggle input{
    width:18px;
    height:18px;
    accent-color:var(--routine-primary);
}

.admin-add-routine-item{
    box-shadow:none;
}

.admin-form-side{
    display:grid;
    gap:14px;
}

.admin-followup-card{
    margin:16px 0;
}

.admin-followup-item{
    padding:14px;
    border:1px solid var(--routine-border);
    border-radius:14px;
    background:#fbfffe;
}

.admin-followup-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    color:var(--routine-text);
}

.routine-error{
    padding:12px 14px;
    border-radius:14px;
    color:#a74444;
    background:#fff4f3;
    border:1px solid rgba(167,68,68,.16);
    font-weight:900;
}

@media(max-width:1000px){
    .routine-item-grid,
    .routine-grid,
    .routine-profile-grid,
    .admin-routine-detail-grid,
    .admin-form-grid,
    .custom-routine-settings,
    .custom-product-grid,
    .routine-options-grid,
    .routine-small-grid,
    .routine-visual-grid,
    .admin-routine-item-grid,
    .admin-routine-item-grid.wide{
        grid-template-columns:1fr;
    }

    .admin-routine-row{
        grid-template-columns:1fr;
    }

    .admin-analysis-head{
        flex-direction:column;
    }

    .admin-analysis-metric-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:720px){
    .my-routine-header,
    .custom-routine-hero,
    .admin-routine-header,
    .routine-section-head,
    .admin-routine-form-title{
        align-items:stretch;
        flex-direction:column;
    }

    .routine-product-item,
    .custom-product-card{
        grid-template-columns:1fr;
    }

    .routine-product-image,
    .custom-product-image{
        width:100%;
        height:170px;
    }

    .admin-analysis-metric-grid{
        grid-template-columns:1fr;
    }
}

.routine-hub-page{
    width:min(94%,1220px);
}

.routine-hub-section{
    display:grid;
    gap:16px;
}

.routine-entry-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
    margin:18px 0;
}

.routine-entry-card{
    display:grid;
    gap:8px;
    padding:20px;
    border:1px solid var(--routine-border);
    border-radius:18px;
    background:linear-gradient(180deg,#fff,#fbfffe);
    box-shadow:var(--routine-shadow);
    transition:.18s ease;
}

.routine-entry-card:hover{
    transform:translateY(-2px);
    border-color:var(--routine-border-strong);
}

.routine-entry-card span{
    color:var(--routine-primary-dark);
    font-size:12px;
    font-weight:950;
}

.routine-entry-card strong{
    color:var(--routine-text);
    font-size:20px;
}

.routine-entry-card p{
    margin:0;
    color:var(--routine-muted);
    line-height:1.8;
}

.routine-analysis-note{
    padding:14px;
    border:1px solid rgba(148,99,21,.16);
    border-radius:14px;
    color:#7b571f;
    background:#fff8ea;
    line-height:1.8;
    font-weight:850;
}

.routine-hub-list{
    display:grid;
    gap:18px;
}

.routine-hub-card{
    display:grid;
    gap:16px;
    padding:18px;
    border:1px solid var(--routine-border);
    border-radius:18px;
    background:linear-gradient(180deg,#fff,#fbfffe);
}

.routine-hub-card-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
}

.routine-hub-card-head span{
    display:block;
    color:var(--routine-primary-dark);
    font-size:12px;
    font-weight:950;
}

.routine-hub-card-head h3{
    margin:6px 0;
    color:var(--routine-text);
    font-size:22px;
}

.routine-hub-card-head p{
    margin:0;
    color:var(--routine-muted);
    line-height:1.7;
}

.routine-state{
    min-height:34px;
    display:inline-flex;
    align-items:center;
    border-radius:999px;
    padding:0 12px;
    white-space:nowrap;
    font-size:12px;
}

.routine-state.pending{
    color:#946315;
    background:#fff8ea;
}

.routine-state.completed{
    color:#246a78;
    background:#e8f7f4;
}

.routine-state.reviewed{
    color:#5f7280;
    background:#eef3f5;
}

.routine-text-grid{
    margin-top:0;
}

.routine-small-check{
    min-height:40px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:0 12px;
    border:1px solid var(--routine-border);
    border-radius:12px;
    color:var(--routine-text);
    background:#fbfffe;
    font-weight:900;
}

.routine-small-check input{
    accent-color:var(--routine-primary);
}

.routine-remove-form{
    position:absolute;
    left:14px;
    bottom:14px;
}

.routine-remove-form button{
    min-height:32px;
    border:0;
    border-radius:10px;
    padding:0 12px;
    color:#9d3d3d;
    background:#fff0ef;
    font-weight:950;
    cursor:pointer;
}

.routine-hub-empty{
    max-width:780px;
    margin:24px auto;
}

@media(max-width:720px){
    .routine-entry-actions{
        grid-template-columns:1fr;
    }

    .routine-hub-card-head{
        flex-direction:column;
    }
}

.routine-icon{
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.routine-dashboard-page{
    width:min(96%,1460px);
}

.routine-dashboard,
.routine-dashboard *,
.routine-dashboard *::before,
.routine-dashboard *::after,
.routine-progress-check-page,
.routine-progress-check-page *,
.routine-progress-check-page *::before,
.routine-progress-check-page *::after,
.routine-fay-panel,
.routine-fay-panel *,
.routine-fay-panel *::before,
.routine-fay-panel *::after{
    box-sizing:border-box;
}

.routine-dashboard{
    display:grid;
    grid-template-columns:minmax(0,1fr) 330px;
    grid-template-areas:"main insights";
    gap:18px;
    align-items:start;
    direction:ltr;
}

.routine-dashboard > *{
    direction:rtl;
}

.routine-dash-menu,
.routine-dash-main,
.routine-dash-insights{
    min-width:0;
}

.routine-dash-menu{
    grid-area:menu;
    display:grid;
    gap:18px;
}

.routine-dash-main{
    grid-area:main;
    display:grid;
    gap:18px;
}

.routine-dash-insights{
    grid-area:insights;
    display:grid;
    gap:18px;
}

.routine-side-nav,
.routine-fay-card,
.routine-daily-panel,
.routine-progress-card,
.routine-insight-card,
.routine-tip-card{
    border:1px solid var(--routine-border);
    border-radius:20px;
    background:rgba(255,255,255,.92);
    box-shadow:var(--routine-shadow);
}

.routine-side-nav{
    display:grid;
    gap:8px;
    padding:16px;
}

.routine-side-nav a{
    min-height:48px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 14px;
    border-radius:14px;
    color:var(--routine-text);
    font-weight:900;
}

.routine-side-nav a:hover,
.routine-side-nav a.active{
    color:var(--routine-primary-dark);
    background:linear-gradient(135deg,#ecf8f6,#f7fcfb);
}

.routine-fay-card{
    display:grid;
    gap:12px;
    padding:20px;
    text-align:center;
    background:
        radial-gradient(circle at 50% 18%,rgba(47,127,143,.14),transparent 34%),
        linear-gradient(180deg,#fff,#f3faf9);
}

.routine-fay-orb{
    width:74px;
    height:74px;
    display:grid;
    place-items:center;
    justify-self:center;
    border-radius:28px;
    color:#2f7f8f;
    background:#e7f5f3;
    box-shadow:inset 0 0 0 10px rgba(255,255,255,.7);
}

.routine-fay-orb .routine-icon{
    width:34px;
    height:34px;
}

.routine-fay-card h2,
.routine-daily-panel h2,
.routine-progress-card h2,
.routine-insight-card h2,
.routine-tip-card h2{
    margin:0;
    color:var(--routine-text);
    font-size:19px;
}

.routine-fay-card p,
.routine-dashboard-hero p,
.routine-panel-head p,
.routine-empty-panel p,
.routine-progress-card p,
.routine-tip-card p,
.routine-muted-text{
    margin:0;
    color:var(--routine-muted);
    line-height:1.75;
    font-size:13px;
}

.routine-fay-open{
    min-height:42px;
    border:1px solid var(--routine-border);
    border-radius:14px;
    color:var(--routine-primary-dark);
    background:#fff;
    font-weight:950;
    cursor:pointer;
}

.routine-dashboard-hero,
.routine-daily-panel,
.routine-progress-card,
.routine-insight-card,
.routine-tip-card{
    padding:22px;
}

.routine-dashboard-hero{
    display:flex;
    justify-content:space-between;
    gap:18px;
    align-items:center;
    border:1px solid var(--routine-border);
    border-radius:22px;
    background:
        radial-gradient(circle at 18% 0%,rgba(47,127,143,.12),transparent 32%),
        #fff;
    box-shadow:var(--routine-shadow);
}

.routine-dashboard-hero span,
.routine-panel-head span,
.routine-progress-check-head span{
    color:var(--routine-primary-dark);
    font-size:12px;
    font-weight:950;
}

.routine-dashboard-hero h1{
    margin:6px 0;
    color:var(--routine-text);
    font-size:30px;
}

.routine-panel-head{
    display:flex;
    justify-content:space-between;
    gap:16px;
    align-items:flex-start;
    margin-bottom:16px;
}

.routine-head-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    flex-wrap:wrap;
}

.routine-panel-head a{
    color:var(--routine-primary-dark);
    font-weight:950;
}

.routine-step-line{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(38px,1fr));
    align-items:center;
    gap:0;
    margin:20px 8px 22px;
    position:relative;
}

.routine-step-line::before{
    content:"";
    position:absolute;
    right:0;
    left:0;
    top:50%;
    height:4px;
    border-radius:999px;
    background:#d9eeea;
}

.routine-step-line span{
    position:relative;
    z-index:1;
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    justify-self:center;
    border-radius:999px;
    color:#fff;
    background:linear-gradient(135deg,var(--routine-primary),var(--routine-primary-dark));
    font-weight:950;
}

.routine-product-strip{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(128px,1fr));
    gap:14px;
}

.routine-phase-section{
    display:grid;
    gap:12px;
    margin-top:16px;
}

.routine-phase-section h3{
    margin:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    color:var(--routine-text);
    font-size:15px;
}

.routine-phase-section h3 span{
    min-height:28px;
    display:inline-flex;
    align-items:center;
    padding:0 10px;
    border-radius:999px;
    color:#246a78;
    background:#eef8f7;
    font-size:12px;
}

.routine-mini-product{
    position:relative;
    display:grid;
    gap:8px;
    min-height:218px;
    padding:14px;
    border:1px solid var(--routine-border);
    border-radius:18px;
    background:linear-gradient(180deg,#fff,#fbfffe);
    text-align:center;
}

.routine-mini-product.is-used-today{
    border-color:rgba(63,143,108,.45);
    background:linear-gradient(180deg,#fff,#f4fbf7);
}

.routine-mini-product:hover{
    border-color:var(--routine-border-strong);
    box-shadow:0 16px 32px rgba(33,91,104,.10);
}

.routine-mini-time{
    justify-self:center;
    min-height:26px;
    display:inline-flex;
    align-items:center;
    padding:0 10px;
    border-radius:999px;
    color:#246a78;
    background:#eef8f7;
    font-size:11px;
    font-weight:950;
}

.routine-mini-image{
    height:78px;
    display:grid;
    place-items:center;
}

.routine-mini-image img{
    max-width:100%;
    max-height:78px;
    object-fit:contain;
    border-radius:12px;
}

.routine-mini-product h3{
    margin:0;
    color:var(--routine-text);
    font-size:14px;
    line-height:1.45;
}

.routine-mini-product p,
.routine-mini-product em{
    margin:0;
    color:var(--routine-muted);
    font-size:12px;
    line-height:1.6;
    font-style:normal;
}

.routine-phase-window{
    color:#58737d;
    font-size:11px;
    line-height:1.6;
}

.routine-product-details{
    text-align:right;
}

.routine-product-details summary{
    cursor:pointer;
    color:#246a78;
    font-size:12px;
    font-weight:950;
}

.routine-product-details p{
    margin-top:6px;
}

.routine-use-form button,
.routine-not-due{
    width:100%;
    min-height:36px;
    display:grid;
    place-items:center;
    border:1px solid var(--routine-border);
    border-radius:12px;
    color:#246a78;
    background:#fff;
    font-size:12px;
    font-weight:950;
}

.routine-use-form button{
    cursor:pointer;
}

.routine-use-form button:disabled{
    color:#fff;
    background:#3f8f6c;
    border-color:#3f8f6c;
    cursor:default;
}

.routine-not-due{
    color:#7c9199;
    background:#f6faf9;
}

.routine-mini-product b,
.routine-mini-product strong{
    color:var(--routine-primary-dark);
    font-size:12px;
}

.routine-personal-strip .routine-mini-product{
    min-height:206px;
}

.routine-empty-panel{
    display:grid;
    gap:10px;
    padding:18px;
    border:1px dashed var(--routine-border-strong);
    border-radius:18px;
    background:#fbfffe;
}

.routine-empty-panel strong{
    color:var(--routine-text);
    font-size:18px;
}

.routine-choice-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
    margin-top:8px;
}

.routine-choice-grid a{
    min-height:132px;
    display:grid;
    align-content:center;
    gap:8px;
    padding:18px;
    border:1px solid var(--routine-border);
    border-radius:18px;
    color:var(--routine-text);
    background:#fff;
    box-shadow:0 14px 32px rgba(33,91,104,.08);
    transition:transform .18s ease, border-color .18s ease, background .18s ease;
}

.routine-choice-grid a:hover{
    transform:translateY(-2px);
    border-color:var(--routine-border-strong);
    background:var(--routine-soft);
}

.routine-choice-grid .routine-icon{
    width:28px;
    height:28px;
    color:var(--routine-primary-dark);
}

.routine-choice-grid strong,
.routine-choice-grid span{
    display:block;
}

.routine-choice-grid strong{
    font-size:17px;
}

.routine-choice-grid span{
    color:var(--routine-muted);
    font-size:13px;
    line-height:1.7;
}

.routine-progress-card{
    display:grid;
    gap:16px;
}

.routine-score-layout{
    display:grid;
    grid-template-columns:132px 1fr;
    gap:16px;
    align-items:center;
}

.routine-score-ring{
    width:132px;
    height:132px;
    position:relative;
    display:grid;
    place-items:center;
    border-radius:999px;
    background:conic-gradient(var(--routine-primary) calc(var(--score) * 1%), #dcefeb 0);
}

.routine-score-ring::after{
    content:"";
    position:absolute;
    inset:12px;
    border-radius:inherit;
    background:#fff;
}

.routine-score-ring strong,
.routine-score-ring span{
    position:relative;
    z-index:1;
}

.routine-score-ring strong{
    color:#122f39;
    font-size:30px;
    line-height:1;
}

.routine-score-ring span{
    margin-top:38px;
    position:absolute;
    color:var(--routine-muted);
    font-size:11px;
    font-weight:900;
}

.ready-routines-page{
    width:min(96%,1400px);
    margin:22px auto 44px;
    display:grid;
    gap:20px;
}

.ready-routines-hero{
    min-height:190px;
    display:grid;
    align-content:center;
    gap:10px;
    padding:30px;
    border:1px solid var(--routine-border);
    border-radius:22px;
    background:
        radial-gradient(circle at 12% 8%,rgba(47,127,143,.12),transparent 32%),
        linear-gradient(135deg,#fff,#f3faf9);
    box-shadow:var(--routine-shadow);
}

.ready-routines-hero span{
    color:var(--routine-primary-dark);
    font-size:12px;
    font-weight:950;
}

.ready-routines-hero h1{
    margin:0;
    color:var(--routine-text);
    font-size:34px;
}

.ready-routines-hero p{
    max-width:720px;
    margin:0;
    color:var(--routine-muted);
    line-height:1.8;
}

.ready-routines-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
}

.ready-routine-card,
.ready-routines-empty{
    border:1px solid var(--routine-border);
    border-radius:20px;
    background:rgba(255,255,255,.94);
    box-shadow:var(--routine-shadow);
}

.ready-routine-card{
    display:grid;
    gap:16px;
    padding:18px;
}

.ready-routine-media{
    min-height:160px;
    display:grid;
    place-items:center;
    border-radius:16px;
    background:var(--routine-soft);
    overflow:hidden;
}

.ready-routine-media img{
    width:100%;
    height:180px;
    object-fit:cover;
}

.ready-routine-media .routine-icon{
    width:46px;
    height:46px;
    color:var(--routine-primary-dark);
}

.ready-routine-copy{
    display:grid;
    gap:6px;
}

.ready-routine-copy span{
    color:var(--routine-primary-dark);
    font-size:12px;
    font-weight:950;
}

.ready-routine-copy h2{
    margin:0;
    color:var(--routine-text);
    font-size:20px;
}

.ready-routine-copy p{
    margin:0;
    color:var(--routine-muted);
    line-height:1.75;
    font-size:13px;
}

.ready-routine-items{
    display:grid;
    gap:8px;
}

.ready-routine-items div{
    min-height:48px;
    display:grid;
    grid-template-columns:42px minmax(0,1fr);
    align-items:center;
    gap:10px;
    padding:8px;
    border:1px solid var(--routine-border);
    border-radius:14px;
    background:#fbfffe;
}

.ready-routine-items img{
    width:42px;
    height:42px;
    object-fit:contain;
    border-radius:10px;
    background:#fff;
}

.ready-routine-items span,
.ready-routine-items p{
    color:var(--routine-muted);
    font-size:12px;
}

.ready-routine-card button,
.ready-routines-empty a{
    width:100%;
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:12px;
    color:#fff;
    background:linear-gradient(135deg,var(--routine-primary),var(--routine-primary-dark));
    font-weight:950;
    cursor:pointer;
}

.ready-routines-empty{
    grid-column:1 / -1;
    display:grid;
    justify-items:center;
    gap:10px;
    padding:34px;
    text-align:center;
}

.ready-routines-empty strong{
    color:var(--routine-text);
    font-size:20px;
}

.ready-routines-empty p{
    margin:0;
    color:var(--routine-muted);
}

.ready-routines-empty a{
    width:auto;
    padding:0 18px;
}

.routine-progress-metrics{
    display:grid;
    gap:12px;
}

.routine-progress-metrics div{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.routine-progress-metrics span{
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--routine-text);
    font-weight:900;
    font-size:13px;
}

.routine-progress-metrics svg{
    color:#2f7f8f;
}

.routine-progress-metrics b{
    color:#2f7f8f;
}

.routine-insight-card{
    display:grid;
    gap:14px;
}

.routine-insight-card > strong{
    color:var(--routine-primary-dark);
    font-size:28px;
}

.routine-today-usage{
    margin:0;
    color:var(--routine-muted);
    font-size:13px;
}

.routine-today-bar{
    height:9px;
    overflow:hidden;
    border-radius:999px;
    background:#e3f1ef;
}

.routine-today-bar span{
    display:block;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg,#2f7f8f,#3f8f6c);
}

.routine-week-row{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:8px;
}

.routine-week-row span{
    display:grid;
    justify-items:center;
    gap:6px;
    color:var(--routine-muted);
    font-size:12px;
    font-weight:900;
}

.routine-week-row i{
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    border-radius:999px;
    border:1px solid var(--routine-border-strong);
    color:#8aa0a7;
    font-style:normal;
    background:#fff;
}

.routine-week-row span.active i{
    color:#fff;
    background:var(--routine-primary);
    border-color:var(--routine-primary);
}

.routine-tip-card{
    display:grid;
    gap:12px;
    background:
        radial-gradient(circle at 8% 16%,rgba(47,127,143,.12),transparent 35%),
        linear-gradient(135deg,#fff,#f4fbfa);
}

.routine-tip-card span{
    display:flex;
    gap:8px;
    align-items:center;
    color:var(--routine-text);
    font-weight:950;
}

.routine-low-stock-list{
    display:grid;
    gap:12px;
}

.routine-low-stock-list article{
    display:grid;
    grid-template-columns:1fr 64px;
    gap:12px;
    align-items:center;
    padding:10px;
    border:1px solid var(--routine-border);
    border-radius:14px;
    background:#fbfffe;
}

.routine-low-stock-list strong,
.routine-low-stock-list span{
    display:block;
}

.routine-low-stock-list strong{
    color:var(--routine-text);
    font-size:13px;
}

.routine-low-stock-list span{
    color:var(--routine-primary-dark);
    font-size:12px;
    font-weight:900;
}

.routine-low-stock-list img{
    width:64px;
    height:64px;
    border-radius:12px;
    object-fit:contain;
    background:#fff;
}

.routine-fay-panel[hidden]{
    display:none;
}

.routine-fay-panel{
    position:fixed;
    inset:0;
    z-index:1000;
    display:grid;
    place-items:end start;
    padding:24px;
    background:rgba(9,32,38,.18);
}

.routine-fay-window{
    width:min(420px,94vw);
    overflow:hidden;
    border:1px solid var(--routine-border);
    border-radius:22px;
    background:#fff;
    box-shadow:0 28px 80px rgba(9,32,38,.22);
}

.routine-fay-window header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:16px 18px;
    color:#fff;
    background:linear-gradient(135deg,var(--routine-primary),var(--routine-primary-dark));
}

.routine-fay-window header strong,
.routine-fay-window header span{
    display:block;
}

.routine-fay-window header button{
    width:34px;
    height:34px;
    border:0;
    border-radius:999px;
    color:#fff;
    background:rgba(255,255,255,.16);
    font-size:22px;
    cursor:pointer;
}

.routine-fay-messages{
    height:300px;
    display:flex;
    flex-direction:column;
    gap:10px;
    overflow:auto;
    padding:16px;
    background:#f7fbfa;
}

.fay-message{
    max-width:84%;
    margin:0;
    padding:12px 14px;
    border-radius:16px;
    line-height:1.7;
    font-size:13px;
}

.fay-message.assistant{
    align-self:flex-start;
    color:var(--routine-text);
    background:#fff;
    border:1px solid var(--routine-border);
}

.fay-message.user{
    align-self:flex-end;
    color:#fff;
    background:var(--routine-primary);
}

.routine-fay-form{
    display:grid;
    grid-template-columns:1fr 86px;
    gap:10px;
    padding:14px;
    border-top:1px solid var(--routine-border);
}

.routine-fay-form input{
    min-height:42px;
    border:1px solid var(--routine-border);
    border-radius:12px;
    padding:0 12px;
    color:var(--routine-text);
}

.routine-fay-form button{
    border:0;
    border-radius:12px;
    color:#fff;
    background:var(--routine-primary);
    font-weight:950;
    cursor:pointer;
}

.routine-progress-check-page{
    width:min(94%,1060px);
    margin:28px auto 56px;
    color:var(--routine-text);
}

.routine-progress-check-card{
    display:grid;
    gap:18px;
    padding:24px;
    border:1px solid var(--routine-border);
    border-radius:22px;
    background:#fff;
    box-shadow:var(--routine-shadow);
}

.routine-progress-check-head{
    display:grid;
    gap:8px;
    text-align:center;
}

.routine-progress-check-head h1{
    margin:0;
    color:var(--routine-text);
    font-size:30px;
}

.routine-progress-check-head p{
    max-width:680px;
    margin:0 auto;
    color:var(--routine-muted);
    line-height:1.8;
}

.routine-analysis-pill{
    min-height:38px;
    display:inline-flex;
    align-items:center;
    justify-self:center;
    gap:8px;
    padding:0 14px;
    border:1px solid var(--routine-border);
    border-radius:999px;
    color:var(--routine-primary-dark);
    background:#f3faf9;
    font-weight:950;
}

.routine-progress-question-list{
    display:grid;
    gap:16px;
}

.routine-progress-question{
    display:grid;
    gap:14px;
    padding:18px;
    border:1px solid var(--routine-border);
    border-radius:18px;
    background:#fbfffe;
}

.routine-progress-question h2{
    margin:0 0 6px;
    color:var(--routine-text);
    font-size:18px;
}

.routine-progress-question p{
    margin:0;
    color:var(--routine-muted);
    line-height:1.7;
}

.routine-progress-options,
.routine-day-selectors{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
}

.routine-day-selectors{
    grid-template-columns:repeat(8,minmax(0,1fr));
}

.routine-progress-options label,
.routine-day-selectors label{
    position:relative;
    min-height:54px;
    display:grid;
    place-items:center;
    text-align:center;
    border:1px solid var(--routine-border);
    border-radius:14px;
    background:#fff;
    cursor:pointer;
    transition:.18s ease;
}

.routine-progress-options input,
.routine-day-selectors input{
    position:absolute;
    opacity:0;
}

.routine-progress-options span,
.routine-day-selectors span{
    color:var(--routine-text);
    font-weight:900;
    line-height:1.5;
    padding:0 8px;
}

.routine-progress-options label:has(input:checked),
.routine-day-selectors label:has(input:checked){
    border-color:var(--routine-primary);
    background:#eaf7f5;
    box-shadow:0 12px 24px rgba(33,91,104,.10);
}

.routine-progress-question textarea{
    width:100%;
    border:1px solid var(--routine-border);
    border-radius:14px;
    padding:12px;
    color:var(--routine-text);
    resize:vertical;
}

.routine-progress-actions{
    display:flex;
    justify-content:space-between;
    gap:12px;
}

@media(max-width:1180px){
    .routine-dashboard{
        grid-template-columns:minmax(0,1fr) 300px;
        grid-template-areas:
            "main insights";
    }

    .ready-routines-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:900px){
    .routine-dashboard{
        grid-template-columns:1fr;
        grid-template-areas:
            "main"
            "insights";
    }

    .routine-dashboard-hero,
    .routine-panel-head{
        flex-direction:column;
        align-items:stretch;
    }

    .routine-score-layout{
        grid-template-columns:1fr;
        justify-items:center;
    }

    .routine-choice-grid{
        grid-template-columns:1fr;
    }

    .ready-routines-grid{
        grid-template-columns:1fr;
    }

    .routine-progress-options,
    .routine-day-selectors{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:560px){
    .routine-product-strip{
        grid-template-columns:1fr;
    }

    .routine-progress-options,
    .routine-day-selectors,
    .routine-fay-form{
        grid-template-columns:1fr;
    }
}

.profile-medical-body{
    --profile-primary:#2f7f8f;
    --profile-primary-dark:#246a78;
    --profile-secondary:#6fa9bd;
    --profile-accent:#3d91a5;
    --profile-accent-soft:#edf8f7;
    --profile-ink:#14323d;
    --profile-muted:#647983;
    --profile-surface:#ffffff;
    --profile-soft:#f6fbfb;
    --profile-soft-strong:#edf8f7;
    --profile-border:rgba(47,127,143,.16);
    --profile-border-strong:rgba(47,127,143,.34);
    --profile-shadow:0 18px 50px rgba(31,88,110,.10);
    --profile-blue:#4d92ad;
    --profile-rose:#c9797a;
    --profile-green:#4f9276;
    margin:0;
    min-height:100vh;
    direction:rtl;
    color:var(--profile-ink);
    background:linear-gradient(135deg,#fbfefd 0%,#f4fbfa 52%,#ffffff 100%);
    font-family:var(--font-body);
}

.profile-medical-body a{
    color:inherit;
    text-decoration:none;
}

.profile-page,
.profile-page *,
.profile-page *::before,
.profile-page *::after{
    box-sizing:border-box;
}

.profile-icon{
    width:22px;
    height:22px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.profile-topbar{
    min-height:74px;
    display:grid;
    grid-template-columns:auto minmax(260px,1fr) auto;
    align-items:center;
    gap:28px;
    padding:0 34px;
    border-bottom:1px solid var(--profile-border);
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(14px);
    direction:ltr;
    position:sticky;
    top:0;
    z-index:20;
}

.profile-logo,
.profile-actions{
    direction:ltr;
}

.profile-logo{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:#0f2331;
    font-size:28px;
    font-weight:950;
}

.profile-logo-mark{
    width:34px;
    height:34px;
    display:inline-block;
    border-radius:12px;
    position:relative;
    border:2px solid rgba(47,127,143,.55);
    transform:rotate(45deg);
}

.profile-logo-mark::before,
.profile-logo-mark::after{
    content:"";
    position:absolute;
    inset:6px;
    border-radius:999px 999px 999px 2px;
    border:2px solid rgba(47,127,143,.48);
}

.profile-logo-mark::after{
    transform:rotate(90deg);
}

.profile-nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:30px;
    direction:rtl;
}

.profile-nav a{
    position:relative;
    color:#132f3a;
    font-size:14px;
    font-weight:850;
    white-space:nowrap;
}

.profile-nav a:hover,
.profile-nav a:nth-child(1){
    color:var(--profile-primary-dark);
}

.profile-nav a:nth-child(1)::after{
    content:"";
    position:absolute;
    right:0;
    left:0;
    bottom:-26px;
    height:3px;
    border-radius:999px;
    background:var(--profile-primary);
}

.profile-actions{
    display:flex;
    align-items:center;
    gap:12px;
}

.profile-search{
    width:240px;
    min-height:42px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 14px;
    border:1px solid var(--profile-border);
    border-radius:18px;
    background:#fff;
    color:var(--profile-muted);
    direction:rtl;
}

.profile-search input{
    width:100%;
    border:0;
    outline:0;
    color:var(--profile-ink);
    background:transparent;
    font:inherit;
    font-size:13px;
}

.profile-icon-btn,
.profile-avatar-link{
    position:relative;
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border:1px solid var(--profile-border);
    border-radius:16px;
    background:#fff;
    color:var(--profile-ink);
}

.profile-icon-btn span{
    position:absolute;
    top:-7px;
    right:-7px;
    min-width:20px;
    height:20px;
    display:grid;
    place-items:center;
    border-radius:999px;
    color:#fff;
    background:var(--profile-primary);
    font-size:11px;
    font-weight:950;
}

.profile-avatar-link{
    width:auto;
    grid-auto-flow:column;
    gap:8px;
    padding:0 10px;
}

.profile-avatar-link span{
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:999px;
    color:#fff;
    background:linear-gradient(135deg,var(--profile-primary),var(--profile-secondary));
    font-size:13px;
    font-weight:950;
}

.profile-dashboard-grid{
    width:min(96%,1500px);
    margin:18px auto 40px;
    display:grid;
    grid-template-columns:minmax(0,1fr) 290px;
    grid-template-areas:"main side";
    gap:20px;
    align-items:start;
    direction:ltr;
}

.profile-dashboard-grid > *{
    direction:rtl;
    min-width:0;
}

.profile-main{
    grid-area:main;
    display:grid;
    gap:18px;
}

.profile-side{
    grid-area:side;
    display:grid;
    gap:16px;
}

.profile-card,
.profile-side-nav,
.profile-upgrade-card,
.profile-side-card{
    border:1px solid var(--profile-border);
    border-radius:18px;
    background:rgba(255,255,255,.92);
    box-shadow:var(--profile-shadow);
}

.profile-title-row{
    min-height:60px;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
}

.profile-title-row h1{
    margin:0;
    color:var(--profile-ink);
    font-size:30px;
    line-height:1.3;
}

.profile-title-row p,
.profile-card p,
.profile-card small{
    margin:0;
    color:var(--profile-muted);
    line-height:1.7;
    font-size:13px;
}

.profile-hero-card,
.profile-showcase-card{
    min-height:170px;
    display:grid;
    grid-template-columns:minmax(280px,1fr) minmax(260px,.78fr);
    gap:18px;
    align-items:center;
    padding:26px;
    position:relative;
    overflow:hidden;
}

.profile-hero-card::before,
.profile-showcase-card::before{
    content:"";
    position:absolute;
    inset:-80px auto auto -80px;
    width:260px;
    height:260px;
    border-radius:999px;
    background:radial-gradient(circle,rgba(47,127,143,.12),transparent 68%);
}

.profile-identity{
    display:flex;
    align-items:center;
    gap:18px;
    position:relative;
    z-index:1;
}

.profile-avatar-large{
    width:102px;
    height:102px;
    display:grid;
    place-items:center;
    border-radius:999px;
    color:#fff;
    background:
        linear-gradient(135deg,var(--profile-primary),var(--profile-secondary));
    box-shadow:0 0 0 8px rgba(47,127,143,.10);
    font-size:30px;
    font-weight:950;
}

.profile-identity h2{
    margin:0 0 6px;
    color:var(--profile-ink);
    font-size:24px;
}

.profile-info-strip{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:0;
    border:1px solid var(--profile-border);
    border-radius:16px;
    background:#fbfffe;
    position:relative;
    z-index:1;
}

.profile-info-strip div{
    min-height:78px;
    display:grid;
    place-items:center;
    gap:6px;
    padding:12px;
    text-align:center;
    border-left:1px solid var(--profile-border);
}

.profile-info-strip div:last-child{
    border-left:0;
}

.profile-info-strip span{
    color:var(--profile-muted);
    font-size:12px;
    font-weight:800;
}

.profile-info-strip strong{
    color:var(--profile-ink);
    font-size:14px;
}

.profile-outline-btn{
    min-height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 34px;
    border:1px solid var(--profile-border-strong);
    border-radius:12px;
    color:var(--profile-primary-dark);
    background:#fff;
    font-weight:950;
    position:relative;
    z-index:1;
}

.profile-showcase-copy{
    position:relative;
    z-index:1;
    display:grid;
    gap:10px;
}

.profile-showcase-copy > span{
    width:max-content;
    min-height:30px;
    display:inline-flex;
    align-items:center;
    padding:0 12px;
    border:1px solid var(--profile-border);
    border-radius:999px;
    color:var(--profile-primary-dark);
    background:var(--profile-soft-strong);
    font-size:12px;
    font-weight:950;
}

.profile-showcase-copy h2{
    max-width:720px;
    margin:0;
    color:var(--profile-ink);
    font-size:clamp(24px,3vw,38px);
    line-height:1.35;
}

.profile-showcase-copy p{
    max-width:620px;
    font-size:14px;
}

.profile-care-orbit{
    min-height:180px;
    position:relative;
    display:grid;
    place-items:center;
}

.profile-care-orbit i{
    width:118px;
    height:118px;
    border-radius:999px;
    border:1px solid var(--profile-border);
    background:
        radial-gradient(circle at 50% 48%,rgba(255,255,255,.96),transparent 54%),
        conic-gradient(from 80deg,var(--profile-primary),var(--profile-secondary),var(--profile-green),var(--profile-primary));
    box-shadow:0 16px 36px rgba(31,88,110,.12);
}

.profile-care-orbit span{
    position:absolute;
    width:54px;
    height:54px;
    display:grid;
    place-items:center;
    border:1px solid var(--profile-border);
    border-radius:18px;
    color:var(--profile-primary-dark);
    background:#fff;
    box-shadow:0 12px 24px rgba(31,88,110,.08);
}

.profile-care-orbit span:nth-child(1){ top:8px; right:50%; transform:translateX(50%); }
.profile-care-orbit span:nth-child(2){ top:60px; right:16px; }
.profile-care-orbit span:nth-child(3){ bottom:8px; right:50%; transform:translateX(50%); }
.profile-care-orbit span:nth-child(4){ top:60px; left:16px; }

.profile-overview-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
}

.profile-overview-grid .profile-card,
.profile-bottom-grid .profile-card{
    padding:18px;
}

.profile-card header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:14px;
}

.profile-card header .profile-icon{
    color:var(--profile-primary);
}

.profile-card header span,
.profile-card header h2{
    margin:0;
    color:var(--profile-ink);
    font-size:16px;
    font-weight:950;
}

.profile-card header a,
.profile-analysis-mini a,
.profile-progress-focus-card a,
.profile-list-card a,
.profile-products-card header a,
.profile-chart-card header a,
.profile-consults-card header a{
    color:var(--profile-primary-dark);
    font-size:13px;
    font-weight:950;
}

.profile-commit-card strong{
    display:block;
    margin:8px 0 2px;
    color:var(--profile-ink);
    font-size:30px;
}

.profile-week-bars{
    display:grid;
    grid-template-columns:repeat(7,minmax(0,1fr));
    gap:8px;
    align-items:end;
    margin-top:16px;
}

.profile-usage-bar{
    height:9px;
    overflow:hidden;
    border-radius:999px;
    background:#e3f1ef;
}

.profile-usage-bar span{
    display:block;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg,#2f7f8f,#3f8f6c);
}

.profile-week-bars span{
    display:grid;
    gap:6px;
    justify-items:center;
}

.profile-week-bars i{
    width:14px;
    height:46px;
    border-radius:999px;
    background:#e7f0f1;
    position:relative;
    overflow:hidden;
}

.profile-week-bars span.active i::after{
    content:"";
    position:absolute;
    right:0;
    left:0;
    bottom:0;
    height:72%;
    border-radius:999px;
    background:linear-gradient(180deg,var(--profile-secondary),var(--profile-primary));
}

.profile-week-bars small{
    font-size:10px;
}

.profile-analysis-mini{
    display:grid;
    justify-items:center;
    text-align:center;
}

.profile-progress-focus-card{
    display:grid;
}

.profile-progress-focus-body{
    display:grid;
    grid-template-columns:86px minmax(0,1fr);
    align-items:center;
    gap:14px;
}

.profile-progress-focus-body p{
    margin-bottom:10px;
}

.profile-mini-ring,
.profile-progress-arc{
    display:grid;
    place-items:center;
    border-radius:999px;
    background:
        radial-gradient(circle at center,#fff 58%,transparent 59%),
        conic-gradient(var(--profile-primary) calc(var(--score) * 1%), #dceeee 0);
}

.profile-mini-ring{
    width:86px;
    height:86px;
}

.profile-mini-ring strong,
.profile-progress-arc strong{
    color:#0f2331;
    font-size:24px;
    line-height:1;
}

.profile-mini-ring span,
.profile-progress-arc span{
    color:var(--profile-muted);
    font-size:11px;
    font-weight:850;
}

.profile-list-card{
    display:grid;
    gap:10px;
}

.profile-slim-row{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) 58px;
    align-items:center;
    gap:10px;
}

.profile-slim-row b{
    color:var(--profile-primary-dark);
    font-size:13px;
}

.profile-slim-row span{
    color:var(--profile-ink);
    font-size:13px;
    font-weight:850;
}

.profile-slim-row i{
    height:4px;
    border-radius:999px;
    background:linear-gradient(90deg,var(--profile-primary),#cdebe8);
}

.profile-challenge-row{
    display:grid;
    grid-template-columns:28px minmax(0,1fr) auto;
    align-items:center;
    gap:10px;
    min-height:34px;
}

.profile-challenge-row .profile-icon{
    width:20px;
    height:20px;
    color:var(--profile-rose);
}

.profile-challenge-row span{
    color:var(--profile-ink);
    font-size:13px;
    font-weight:900;
}

.profile-challenge-row small{
    color:var(--profile-muted);
    white-space:nowrap;
}

.profile-bottom-grid{
    display:grid;
    grid-template-columns:1.1fr 1.4fr;
    gap:16px;
}

.profile-routine-splits{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    border:1px solid var(--profile-border);
    border-radius:16px;
    overflow:hidden;
}

.profile-routine-splits > div{
    padding:16px;
    background:#fbfffe;
    text-align:center;
}

.profile-routine-splits > div + div{
    border-right:1px solid var(--profile-border);
}

.profile-routine-splits h3{
    margin:0;
    color:var(--profile-primary-dark);
    font-size:15px;
}

.profile-product-dots{
    min-height:76px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin-top:12px;
}

.profile-product-dots span{
    width:56px;
    height:56px;
    display:grid;
    place-items:center;
    border:1px solid var(--profile-border);
    border-radius:14px;
    background:#fff;
}

.profile-product-dots img,
.profile-recent-products img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
}

.profile-product-dots em{
    color:var(--profile-muted);
    font-size:12px;
    font-style:normal;
}

.profile-recent-products{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
}

.profile-recent-products a{
    min-height:166px;
    display:grid;
    grid-template-rows:78px auto auto;
    gap:8px;
    justify-items:center;
    padding:12px;
    border:1px solid var(--profile-border);
    border-radius:16px;
    background:#fbfffe;
    text-align:center;
}

.profile-recent-products span{
    width:78px;
    height:78px;
    display:grid;
    place-items:center;
}

.profile-recent-products strong{
    color:var(--profile-ink);
    font-size:13px;
    line-height:1.5;
}

.profile-recent-products small{
    color:var(--profile-primary-dark);
    font-weight:950;
}

.profile-improvements-detail-card{
    scroll-margin-top:96px;
}

.profile-metric-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}

.profile-metric-list div{
    min-height:78px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px;
    border:1px solid var(--profile-border);
    border-radius:14px;
    background:#fbfffe;
}

.profile-metric-list span{
    display:grid;
    grid-template-columns:24px minmax(0,1fr);
    gap:4px 8px;
    align-items:center;
}

.profile-metric-list .profile-icon{
    grid-row:1 / span 2;
    color:var(--profile-primary);
}

.profile-metric-list b{
    color:var(--profile-ink);
    font-size:13px;
}

.profile-metric-list strong{
    color:var(--profile-green);
    font-size:17px;
}

.profile-line-chart{
    width:100%;
    height:auto;
    display:block;
    margin-top:6px;
}

.profile-line-chart path{
    fill:none;
    stroke:#dbe9eb;
    stroke-width:1.5;
}

.profile-line-chart polyline{
    fill:none;
    stroke:var(--profile-primary);
    stroke-width:3;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.profile-line-chart circle{
    fill:var(--profile-accent);
    stroke:#fff;
    stroke-width:3;
}

.profile-chart-labels{
    display:flex;
    justify-content:space-between;
    gap:8px;
    color:var(--profile-muted);
    font-size:11px;
}

.profile-chart-summary{
    margin-top:10px;
    display:grid;
    justify-items:end;
    gap:2px;
}

.profile-chart-summary strong{
    color:var(--profile-green);
    font-size:22px;
}

.profile-consult-row{
    min-height:62px;
    display:grid;
    grid-template-columns:46px minmax(0,1fr) auto;
    align-items:center;
    gap:12px;
    padding:10px 0;
    border-top:1px solid var(--profile-border);
}

.profile-consult-row:first-of-type{
    border-top:0;
}

.profile-consult-avatar{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:999px;
    color:var(--profile-primary);
    background:var(--profile-soft-strong);
}

.profile-consult-row strong{
    display:block;
    color:var(--profile-ink);
    font-size:14px;
}

.profile-consult-row b{
    min-height:28px;
    display:inline-flex;
    align-items:center;
    padding:0 10px;
    border-radius:999px;
    color:var(--profile-primary-dark);
    background:var(--profile-soft-strong);
    font-size:12px;
}

.profile-progress-card{
    min-height:235px;
    display:grid;
    place-items:center;
    gap:10px;
    padding:24px;
    text-align:center;
}

.profile-progress-card h2{
    margin:0;
    color:var(--profile-ink);
    font-size:20px;
}

.profile-progress-arc{
    width:168px;
    height:168px;
}

.profile-progress-arc strong{
    font-size:38px;
}

.profile-progress-card h3{
    margin:4px 0 0;
    color:var(--profile-ink);
    font-size:16px;
}

.profile-account-card{
    display:grid;
    gap:16px;
    padding:18px;
}

.profile-side-identity{
    display:grid;
    justify-items:center;
    gap:12px;
    text-align:center;
}

.profile-side-identity .profile-avatar-large{
    width:76px;
    height:76px;
    font-size:22px;
}

.profile-side-identity h2{
    margin:0 0 4px;
    color:var(--profile-ink);
    max-width:100%;
    overflow-wrap:anywhere;
    font-size:17px;
    line-height:1.4;
}

.profile-side-identity p{
    max-width:100%;
    overflow-wrap:anywhere;
    word-break:break-word;
}

.profile-side-details{
    display:grid;
    gap:8px;
}

.profile-side-details div{
    display:grid;
    grid-template-columns:1fr auto;
    gap:10px;
    align-items:center;
    padding:10px 0;
    border-top:1px solid var(--profile-border);
}

.profile-side-details div:first-child{
    border-top:0;
}

.profile-side-details span{
    color:var(--profile-muted);
    font-size:12px;
    font-weight:850;
}

.profile-side-details strong{
    color:var(--profile-ink);
    font-size:13px;
    text-align:left;
}

.profile-account-card .profile-outline-btn{
    width:100%;
}

.profile-side-nav{
    display:grid;
    gap:4px;
    padding:12px;
}

.profile-side-nav a{
    min-height:48px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:0 14px;
    border-radius:14px;
    color:#233d47;
    font-size:14px;
    font-weight:900;
}

.profile-side-nav a .profile-icon{
    color:#3b4d58;
}

.profile-side-nav a.active,
.profile-side-nav a:hover{
    color:var(--profile-primary-dark);
    background:linear-gradient(135deg,#eef8f7,#ffffff);
}

.profile-side-nav a.active .profile-icon,
.profile-side-nav a:hover .profile-icon{
    color:var(--profile-primary);
}

.profile-upgrade-card{
    display:grid;
    gap:12px;
    padding:20px;
    background:
        radial-gradient(circle at 30% 0%,rgba(47,127,143,.14),transparent 38%),
        linear-gradient(180deg,#fff,#f7fbfb);
}

.profile-upgrade-card > span{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border-radius:16px;
    color:var(--profile-primary);
    background:var(--profile-accent-soft);
}

.profile-upgrade-card h2{
    margin:0;
    color:var(--profile-primary-dark);
    font-size:19px;
}

.profile-upgrade-card ul{
    display:grid;
    gap:8px;
    margin:0;
    padding:0 18px 0 0;
    color:var(--profile-muted);
    font-size:13px;
    line-height:1.6;
}

.profile-upgrade-card a{
    min-height:44px;
    display:grid;
    place-items:center;
    border-radius:12px;
    color:#fff;
    background:linear-gradient(135deg,var(--profile-primary),var(--profile-primary-dark));
    font-weight:950;
}

@media(max-width:1260px){
    .profile-dashboard-grid{
        grid-template-columns:minmax(0,1fr) 250px;
        grid-template-areas:"main side";
    }

    .profile-overview-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:980px){
    .profile-topbar{
        grid-template-columns:1fr auto;
    }

    .profile-nav{
        display:none;
    }

    .profile-dashboard-grid{
        grid-template-columns:1fr;
        grid-template-areas:
            "main"
            "side";
    }

    .profile-hero-card,
    .profile-showcase-card,
    .profile-bottom-grid{
        grid-template-columns:1fr;
    }

    .profile-outline-btn{
        grid-column:auto;
        justify-self:stretch;
    }

    .profile-info-strip,
    .profile-recent-products{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:620px){
    .profile-topbar{
        padding:12px;
        gap:12px;
    }

    .profile-logo{
        font-size:22px;
    }

    .profile-search{
        display:none;
    }

    .profile-dashboard-grid{
        width:min(94%,560px);
        margin-top:12px;
    }

    .profile-hero-card,
    .profile-showcase-card,
    .profile-overview-grid,
    .profile-info-strip,
    .profile-routine-splits,
    .profile-recent-products,
    .profile-metric-list{
        grid-template-columns:1fr;
    }

    .profile-info-strip div,
    .profile-routine-splits > div + div{
        border-left:0;
        border-right:0;
        border-top:1px solid var(--profile-border);
    }

    .profile-info-strip div:first-child{
        border-top:0;
    }

    .profile-identity{
        flex-direction:column;
        text-align:center;
    }
}

.community-body{
    --community-primary:#2f7f8f;
    --community-primary-dark:#246a78;
    --community-soft:#eef8f7;
    --community-soft-2:#fbfefe;
    --community-border:rgba(47,127,143,.14);
    --community-border-strong:rgba(47,127,143,.34);
    --community-ink:#111d35;
    --community-muted:#6a7288;
    --community-shadow:0 18px 48px rgba(31,88,110,.10);
    --community-teal:#2f7f8f;
    --community-green:#0f9f75;
    --community-rose:#d85f91;
    margin:0;
    min-height:100vh;
    direction:rtl;
    color:var(--community-ink);
    background:linear-gradient(135deg,#ffffff 0%,#fbfefe 48%,#ffffff 100%);
    font-family:var(--font-body);
}

.community-body a{
    color:inherit;
    text-decoration:none;
}

.community-page,
.community-page *,
.community-page *::before,
.community-page *::after,
.community-modal,
.community-modal *,
.community-modal *::before,
.community-modal *::after{
    box-sizing:border-box;
}

.community-icon{
    width:22px;
    height:22px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.community-navbar{
    min-height:72px;
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:26px;
    padding:0 30px;
    border-bottom:1px solid var(--community-border);
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(14px);
    position:sticky;
    top:0;
    z-index:30;
    direction:ltr;
}

.community-logo,
.community-actions{
    direction:ltr;
}

.community-logo{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:var(--community-ink);
    font-size:25px;
    font-weight:950;
}

.community-logo-mark{
    width:32px;
    height:32px;
    display:inline-block;
    border-radius:12px;
    border:2px solid var(--community-primary);
    transform:rotate(45deg);
    position:relative;
}

.community-logo-mark::before,
.community-logo-mark::after{
    content:"";
    position:absolute;
    inset:6px;
    border:2px solid rgba(47,127,143,.52);
    border-radius:999px 999px 999px 2px;
}

.community-logo-mark::after{
    transform:rotate(90deg);
}

.community-nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:30px;
    direction:rtl;
}

.community-nav a{
    position:relative;
    color:var(--community-ink);
    font-size:14px;
    font-weight:850;
    white-space:nowrap;
}

.community-nav a.active,
.community-nav a:hover{
    color:var(--community-primary-dark);
}

.community-nav a.active::after{
    content:"";
    position:absolute;
    right:0;
    left:0;
    bottom:-25px;
    height:3px;
    border-radius:999px;
    background:var(--community-primary);
}

.community-actions{
    display:flex;
    align-items:center;
    gap:12px;
}

.community-search{
    width:260px;
    min-height:42px;
    display:flex;
    align-items:center;
    gap:8px;
    padding:0 12px;
    border:1px solid var(--community-border);
    border-radius:18px;
    background:#fff;
    direction:rtl;
}

.community-main > .community-search{
    width:100%;
    min-height:46px;
    margin-bottom:14px;
    box-shadow:var(--community-shadow);
}

.community-search input{
    width:100%;
    border:0;
    outline:0;
    background:transparent;
    color:var(--community-ink);
    font:inherit;
    font-size:13px;
}

.community-search button,
.community-icon-btn,
.community-avatar{
    border:0;
    background:transparent;
}

.community-icon-btn,
.community-avatar{
    position:relative;
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border:1px solid var(--community-border);
    border-radius:16px;
    color:var(--community-ink);
    background:#fff;
}

.community-icon-btn span{
    position:absolute;
    top:-7px;
    right:-7px;
    min-width:20px;
    height:20px;
    display:grid;
    place-items:center;
    border-radius:999px;
    color:#fff;
    background:var(--community-primary);
    font-size:11px;
    font-weight:950;
}

.community-avatar b{
    width:32px;
    height:32px;
    display:grid;
    place-items:center;
    border-radius:999px;
    color:#fff;
    background:linear-gradient(135deg,var(--community-primary),#6fa9bd);
}

.community-layout{
    width:min(96%,1480px);
    margin:22px auto 40px;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:22px;
    align-items:start;
}

.community-main{
    display:grid;
    gap:22px;
}

.community-hero,
.community-post-card,
.community-results-strip,
.community-share-banner,
.community-intro-card,
.community-filter-card,
.community-guidelines,
.community-detail-card,
.community-detail-side > section,
.community-comments,
.community-related-posts,
.community-inbox-list,
.community-chat-window{
    border:1px solid var(--community-border);
    border-radius:18px;
    background:rgba(255,255,255,.94);
    box-shadow:var(--community-shadow);
}

.community-hero{
    min-height:150px;
    display:grid;
    grid-template-columns:1.5fr repeat(3,1fr);
    align-items:center;
    padding:26px;
    background:
        radial-gradient(circle at 8% 10%,rgba(47,127,143,.10),transparent 32%),
        linear-gradient(180deg,#fff,#fbfefe);
}

.community-member-stack{
    display:grid;
    justify-items:center;
    gap:12px;
    border-left:1px solid var(--community-border);
}

.community-faces{
    display:flex;
    align-items:center;
    justify-content:center;
}

.community-faces span,
.community-faces b,
.community-author > span,
.community-thread > span,
.community-comment-head > span{
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    margin-inline-start:-8px;
    border:3px solid #fff;
    border-radius:999px;
    color:#fff;
    background:linear-gradient(135deg,var(--community-primary),#6fa9bd);
    font-weight:950;
}

.community-faces b{
    width:64px;
    height:64px;
    font-size:19px;
}

.community-member-stack p,
.community-stat span,
.community-card-copy p,
.community-intro-card p,
.community-filter-card span,
.community-guidelines p,
.community-detail-content,
.community-detail-products p,
.community-report-card p,
.community-empty p{
    margin:0;
    color:var(--community-muted);
    font-size:13px;
    line-height:1.75;
}

.community-stat{
    min-height:100px;
    display:grid;
    place-items:center;
    gap:6px;
    text-align:center;
    border-left:1px solid var(--community-border);
}

.community-stat:last-child{
    border-left:0;
}

.community-stat .community-icon{
    width:32px;
    height:32px;
    color:var(--community-primary);
}

.community-stat strong{
    color:var(--community-ink);
    font-size:24px;
}

.community-toolbar{
    display:flex;
    justify-content:space-between;
    gap:18px;
    align-items:center;
}

.community-filter-toolbar{
    padding:14px;
    border:1px solid var(--community-border);
    border-radius:18px;
    background:#fff;
    box-shadow:var(--community-shadow);
}

.community-tabs{
    display:flex;
    flex:1;
    overflow:auto;
    border:1px solid var(--community-border);
    border-radius:12px;
    background:#fff;
}

.community-tabs a{
    min-height:40px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 22px;
    border-left:1px solid var(--community-border);
    color:var(--community-muted);
    font-size:13px;
    font-weight:900;
    white-space:nowrap;
}

.community-tabs a:last-child{
    border-left:0;
}

.community-tabs a.active{
    color:var(--community-primary-dark);
    background:var(--community-soft);
}

.community-sort,
.community-filter-card select,
.community-filter-card input,
.community-create-form input,
.community-create-form select,
.community-create-form textarea,
.community-report-card select,
.community-comment-form textarea,
.community-reply-form input,
.community-message-form input{
    min-height:42px;
    border:1px solid var(--community-border);
    border-radius:12px;
    padding:0 12px;
    outline:0;
    color:var(--community-ink);
    background:#fff;
    font:inherit;
}

.community-filter-toolbar .community-sort{
    min-width:150px;
}

.community-filter-toolbar button{
    min-height:42px;
    padding:0 18px;
    border:0;
    border-radius:12px;
    color:#fff;
    background:var(--community-primary);
    font-weight:950;
    cursor:pointer;
}

.home-fay-form button{
    width:auto;
    min-width:96px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}

.home-fay-login{
    width:100%;
}

.community-people-results{
    display:grid;
    gap:14px;
    padding:18px;
    border:1px solid var(--community-border);
    border-radius:18px;
    background:#fff;
    box-shadow:var(--community-shadow);
}

.community-people-results header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.community-people-results h2{
    margin:0;
    color:var(--community-ink);
    font-size:18px;
}

.community-people-results header span{
    color:var(--community-primary-dark);
    font-weight:950;
}

.community-people-results > div{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
}

.community-people-results a{
    min-height:92px;
    display:grid;
    justify-items:center;
    gap:6px;
    padding:14px;
    border:1px solid var(--community-border);
    border-radius:16px;
    color:var(--community-ink);
    background:var(--community-soft);
    text-align:center;
}

.community-people-results b{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:999px;
    color:#fff;
    background:linear-gradient(135deg,var(--community-primary),#6fa9bd);
}

.community-people-results small{
    color:var(--community-muted);
}

.community-post-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
}

.community-post-grid.compact{
    grid-template-columns:repeat(3,minmax(0,1fr));
}

.community-post-card{
    display:grid;
    gap:14px;
    padding:14px;
}

.community-post-card header,
.community-results-strip header,
.community-detail-head,
.community-comments header,
.community-related-posts > h2,
.community-inbox-list header,
.community-chat-window > header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
}

.community-author{
    display:flex;
    align-items:center;
    gap:10px;
}

.community-author > span{
    width:42px;
    height:42px;
    margin:0;
    border-width:2px;
}

.community-author strong{
    display:block;
    color:var(--community-ink);
    font-size:14px;
}

.community-author small{
    color:var(--community-muted);
    font-size:12px;
}

.community-post-card header b,
.community-detail-head b{
    min-height:28px;
    display:inline-flex;
    align-items:center;
    padding:0 12px;
    border-radius:999px;
    color:var(--community-primary-dark);
    background:var(--community-soft);
    font-size:12px;
}

.community-before-after{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
}

.community-before-after div,
.community-detail-images div,
.community-result-mini span{
    position:relative;
    min-height:165px;
    display:grid;
    place-items:center;
    overflow:hidden;
    border-radius:14px;
    background:linear-gradient(135deg,#f4eefc,#fff);
    color:var(--community-primary);
    font-weight:950;
}

.community-before-after img,
.community-detail-images img,
.community-result-mini img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.community-before-after em,
.community-detail-images b{
    position:absolute;
    right:10px;
    bottom:10px;
    min-height:26px;
    display:inline-flex;
    align-items:center;
    padding:0 10px;
    border-radius:8px;
    color:var(--community-ink);
    background:rgba(255,255,255,.88);
    font-size:12px;
    font-style:normal;
}

.community-card-copy h2{
    margin:0 0 8px;
    color:var(--community-ink);
    font-size:18px;
    line-height:1.45;
}

.community-post-card footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    color:#4c5670;
    font-size:13px;
}

.community-post-card footer a,
.community-post-card footer button,
.community-detail-actions a,
.community-detail-actions button{
    display:inline-flex;
    align-items:center;
    gap:6px;
    border:0;
    color:#4c5670;
    background:transparent;
    font:inherit;
    font-weight:850;
    cursor:pointer;
}

.community-post-card footer .community-icon,
.community-detail-actions .community-icon{
    width:19px;
    height:19px;
}

.community-react-btn.active,
.community-save-btn.active{
    color:var(--community-primary-dark) !important;
}

.community-results-strip,
.community-share-banner{
    padding:22px;
}

.community-results-strip h2,
.community-share-banner h2,
.community-intro-card h1,
.community-filter-card h2,
.community-guidelines h2,
.community-detail-card h1,
.community-detail-side h2,
.community-comments h2,
.community-related-posts h2,
.community-inbox-list h1,
.community-chat-empty h2{
    margin:0;
    color:var(--community-ink);
    line-height:1.35;
}

.community-results-strip header a,
.community-inbox-list header a{
    color:var(--community-primary-dark);
    font-size:13px;
    font-weight:950;
}

.community-results-strip > div{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
    margin-top:18px;
}

.community-result-mini{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
    text-align:center;
}

.community-result-mini span{
    min-height:76px;
}

.community-result-mini strong,
.community-result-mini small{
    grid-column:1/-1;
}

.community-result-mini strong{
    color:var(--community-green);
    font-weight:950;
}

.community-result-mini small{
    color:var(--community-muted);
}

.community-share-banner{
    min-height:124px;
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:center;
    background:
        radial-gradient(circle at 10% 50%,rgba(47,127,143,.14),transparent 28%),
        linear-gradient(135deg,#fff,#eef8f7);
}

.community-share-banner span,
.community-intro-card button .community-icon{
    color:var(--community-primary);
}

.community-share-banner button,
.community-share-banner a,
.community-intro-card button,
.community-intro-card a,
.community-filter-card button,
.community-create-form button,
.community-report-card button,
.community-comment-form button,
.community-reply-form button,
.community-message-form button{
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:0;
    border-radius:12px;
    padding:0 20px;
    color:#fff;
    background:linear-gradient(135deg,var(--community-primary),var(--community-primary-dark));
    font-weight:950;
    cursor:pointer;
}

.community-sidebar{
    display:grid;
    gap:18px;
    position:sticky;
    top:92px;
}

.community-intro-card,
.community-filter-card,
.community-guidelines{
    padding:20px;
}

.community-intro-card{
    display:grid;
    gap:14px;
    text-align:center;
}

.community-filter-card{
    display:grid;
    gap:16px;
}

.community-filter-card label,
.community-create-form label{
    display:grid;
    gap:8px;
}

.community-filter-card select,
.community-filter-card input,
.community-create-form select,
.community-create-form input,
.community-create-form textarea{
    width:100%;
}

.community-empty{
    grid-column:1/-1;
    display:grid;
    place-items:center;
    gap:8px;
    min-height:150px;
    padding:24px;
    border:1px dashed var(--community-border-strong);
    border-radius:18px;
    text-align:center;
    background:#fff;
}

.community-messages{
    display:grid;
    gap:10px;
}

.community-messages p{
    margin:0;
    padding:12px 14px;
    border-radius:14px;
    color:var(--community-primary-dark);
    background:var(--community-soft);
    border:1px solid var(--community-border);
    font-weight:900;
}

.community-modal{
    position:fixed;
    inset:0;
    z-index:80;
    display:grid;
    place-items:center;
    padding:24px;
    background:rgba(17,29,53,.38);
    backdrop-filter:blur(8px);
}

.community-modal[hidden]{
    display:none;
}

.community-modal-card{
    width:min(840px,96vw);
    max-height:90vh;
    overflow:auto;
    position:relative;
    display:grid;
    gap:16px;
    padding:26px;
    border-radius:22px;
    border:1px solid var(--community-border);
    background:#fff;
    box-shadow:0 30px 90px rgba(17,29,53,.28);
}

.community-modal-close{
    position:absolute;
    top:14px;
    left:14px;
    width:38px;
    height:38px;
    border:0;
    border-radius:999px;
    color:var(--community-ink);
    background:var(--community-soft);
    font-size:24px;
    cursor:pointer;
}

.community-modal-card h2{
    margin:0;
    color:var(--community-ink);
}

.community-modal-card p{
    margin:0;
    color:var(--community-muted);
}

.community-create-form{
    display:grid;
    gap:14px;
}

.community-form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}

.community-check{
    display:flex !important;
    grid-auto-flow:column;
    align-items:center;
    justify-content:start;
}

.community-check input{
    width:18px;
    height:18px;
    accent-color:var(--community-primary);
}

.community-detail-layout{
    width:min(94%,1280px);
    margin:24px auto 44px;
    display:grid;
    grid-template-columns:minmax(0,1fr) 310px;
    gap:20px;
    align-items:start;
}

.community-detail-card{
    display:grid;
    gap:18px;
    padding:24px;
}

.community-breadcrumb{
    display:flex;
    gap:8px;
    color:var(--community-muted);
    font-size:13px;
}

.community-breadcrumb a{
    color:var(--community-primary-dark);
    font-weight:900;
}

.community-detail-card h1{
    font-size:32px;
}

.community-detail-images{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}

.community-detail-images div{
    min-height:360px;
}

.community-detail-stats{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
}

.community-detail-stats div{
    display:grid;
    place-items:center;
    gap:6px;
    min-height:112px;
    border:1px solid var(--community-border);
    border-radius:16px;
    background:var(--community-soft-2);
    text-align:center;
}

.community-detail-stats .community-icon{
    color:var(--community-primary);
}

.community-detail-stats strong{
    color:var(--community-ink);
    font-size:22px;
}

.community-detail-stats span{
    color:var(--community-muted);
    font-size:12px;
}

.community-detail-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.community-detail-actions a,
.community-detail-actions button{
    min-height:42px;
    padding:0 16px;
    border:1px solid var(--community-border);
    border-radius:12px;
    background:#fff;
}

.community-detail-side{
    display:grid;
    gap:16px;
    position:sticky;
    top:92px;
}

.community-detail-products,
.community-report-card{
    display:grid;
    gap:14px;
    padding:18px;
}

.community-detail-products a{
    display:grid;
    grid-template-columns:64px minmax(0,1fr);
    gap:12px;
    align-items:center;
    padding:10px;
    border:1px solid var(--community-border);
    border-radius:14px;
    background:#fff;
}

.community-detail-products span{
    width:64px;
    height:64px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:var(--community-soft);
}

.community-detail-products img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
}

.community-detail-products strong{
    display:block;
    color:var(--community-ink);
    font-size:13px;
}

.community-detail-products small{
    color:var(--community-primary-dark);
    font-weight:900;
}

.community-report-card form{
    display:grid;
    gap:10px;
}

.community-comments,
.community-related-posts{
    grid-column:1/-1;
    padding:22px;
}

.community-comment-form{
    display:grid;
    gap:12px;
}

.community-comment-list{
    display:grid;
    gap:14px;
    margin-top:18px;
}

.community-comment-list article{
    display:grid;
    gap:10px;
    padding:16px;
    border:1px solid var(--community-border);
    border-radius:16px;
    background:#fff;
}

.community-comment-head{
    display:flex;
    align-items:center;
    gap:10px;
}

.community-comment-head > span{
    width:38px;
    height:38px;
    margin:0;
    border-width:2px;
}

.community-comment-head strong,
.community-reply strong{
    display:block;
    color:var(--community-ink);
    font-size:14px;
}

.community-comment-head small{
    color:var(--community-muted);
}

.community-comment-list p{
    margin:0;
    color:var(--community-muted);
    line-height:1.8;
}

.community-reply-form{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:10px;
}

.community-reply{
    margin-right:42px;
    padding:12px;
    border-radius:14px;
    background:var(--community-soft-2);
}

.community-inbox-layout{
    width:min(94%,1180px);
    min-height:calc(100vh - 130px);
    margin:24px auto 42px;
    display:grid;
    grid-template-columns:340px minmax(0,1fr);
    gap:18px;
}

.community-inbox-list,
.community-chat-window{
    overflow:hidden;
}

.community-inbox-list header{
    padding:18px;
    border-bottom:1px solid var(--community-border);
}

.community-inbox-list h1{
    font-size:22px;
}

.community-inbox-list p,
.community-muted,
.community-thread small{
    margin:0;
    color:var(--community-muted);
    font-size:13px;
    line-height:1.7;
}

.community-thread{
    display:grid;
    grid-template-columns:48px minmax(0,1fr);
    gap:12px;
    align-items:center;
    padding:14px 16px;
    border-bottom:1px solid var(--community-border);
}

.community-thread.active,
.community-thread:hover{
    background:var(--community-soft);
}

.community-thread > span{
    width:46px;
    height:46px;
    margin:0;
    border-width:2px;
}

.community-thread strong{
    display:block;
    color:var(--community-ink);
    font-size:14px;
}

.community-chat-window{
    min-height:660px;
    display:grid;
    grid-template-rows:auto minmax(0,1fr) auto;
}

.community-chat-window > header{
    padding:18px;
    border-bottom:1px solid var(--community-border);
}

.community-message-list{
    display:flex;
    flex-direction:column;
    gap:12px;
    padding:20px;
    overflow:auto;
    background:linear-gradient(180deg,#fff,#fbfefe);
}

.community-message{
    max-width:72%;
    align-self:flex-start;
    display:grid;
    gap:4px;
    padding:12px 14px;
    border-radius:16px 16px 16px 4px;
    color:var(--community-ink);
    background:#fff;
    border:1px solid var(--community-border);
}

.community-message.mine{
    align-self:flex-end;
    border-radius:16px 16px 4px 16px;
    color:#fff;
    background:linear-gradient(135deg,var(--community-primary),var(--community-primary-dark));
}

.community-message p{
    margin:0;
    line-height:1.7;
}

.community-message span{
    color:inherit;
    opacity:.72;
    font-size:11px;
}

.community-message-form{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:12px;
    padding:16px;
    border-top:1px solid var(--community-border);
    background:#fff;
}

.community-chat-empty{
    display:grid;
    place-items:center;
    align-content:center;
    gap:12px;
    min-height:520px;
    padding:28px;
    text-align:center;
}

.community-chat-empty .community-icon{
    width:58px;
    height:58px;
    color:var(--community-primary);
}

@media(max-width:1200px){
    .community-layout,
    .community-detail-layout{
        grid-template-columns:1fr;
    }

    .community-sidebar,
    .community-detail-side{
        position:static;
    }

    .community-post-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:900px){
    .community-navbar{
        grid-template-columns:auto auto;
    }

    .community-nav{
        display:none;
    }

    .community-hero,
    .community-detail-stats,
    .community-results-strip > div,
    .community-inbox-layout{
        grid-template-columns:1fr;
    }

    .community-member-stack,
    .community-stat{
        border-left:0;
        border-bottom:1px solid var(--community-border);
        padding-bottom:16px;
    }

    .community-stat:last-child{
        border-bottom:0;
    }

    .community-toolbar{
        flex-direction:column;
        align-items:stretch;
    }
}

@media(max-width:640px){
    .community-navbar{
        padding:12px;
    }

    .community-logo{
        font-size:21px;
    }

    .community-layout,
    .community-detail-layout,
    .community-inbox-layout{
        width:min(94%,560px);
        margin-top:14px;
    }

    .community-post-grid,
    .community-post-grid.compact,
    .community-before-after,
    .community-detail-images,
    .community-form-grid,
    .community-share-banner{
        grid-template-columns:1fr;
    }

    .community-share-banner{
        display:grid;
    }

    .community-detail-card h1{
        font-size:24px;
    }

    .community-detail-images div{
        min-height:240px;
    }

    .community-message{
        max-width:88%;
    }
}

.community-instagram-layout{
    grid-template-columns:minmax(0,1fr);
    direction:rtl;
}

.community-instagram-layout > *{
    direction:rtl;
}

.community-composer-card{
    min-height:76px;
    display:grid;
    grid-template-columns:48px minmax(0,1fr) 44px;
    gap:12px;
    align-items:center;
    padding:14px 16px;
    border:1px solid var(--community-border);
    border-radius:18px;
    background:#fff;
    box-shadow:var(--community-shadow);
}

.community-composer-avatar{
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border-radius:999px;
    color:#fff;
    background:linear-gradient(135deg,var(--community-primary),#6fa9bd);
    font-weight:950;
}

.community-composer-card button,
.community-login-prompt{
    min-height:46px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    border:1px solid var(--community-border);
    border-radius:999px;
    padding:0 18px;
    color:var(--community-muted);
    background:var(--community-soft-2);
    font:inherit;
    font-weight:850;
    cursor:pointer;
}

.community-composer-card > span{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:14px;
    color:var(--community-primary);
    background:var(--community-soft);
}

.community-feed{
    width:min(100%,680px);
    display:grid;
    gap:22px;
    justify-self:center;
}

.community-feed-post{
    overflow:hidden;
    border:1px solid var(--community-border);
    border-radius:18px;
    background:#fff;
    box-shadow:var(--community-shadow);
}

.community-feed-head{
    min-height:70px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:14px 16px;
    border-bottom:1px solid rgba(47,127,143,.08);
}

.community-post-menu{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:12px;
    color:var(--community-muted);
}

.community-post-menu:hover{
    color:var(--community-primary-dark);
    background:var(--community-soft);
}

.community-feed-media{
    display:grid;
    min-height:420px;
    background:#fbfefe;
}

.community-feed-media.two-images{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

.community-feed-media > img,
.community-feed-media span img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.community-feed-media span{
    position:relative;
    min-height:420px;
    overflow:hidden;
}

.community-feed-media span b{
    position:absolute;
    right:12px;
    bottom:12px;
    min-height:28px;
    display:inline-flex;
    align-items:center;
    padding:0 11px;
    border-radius:8px;
    color:var(--community-ink);
    background:rgba(255,255,255,.9);
    font-size:12px;
}

.community-feed-actions{
    min-height:52px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:8px 14px 0;
}

.community-feed-actions div{
    display:flex;
    align-items:center;
    gap:4px;
}

.community-feed-actions a,
.community-feed-actions button{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border:0;
    border-radius:12px;
    color:var(--community-ink);
    background:transparent;
    cursor:pointer;
}

.community-feed-actions a:hover,
.community-feed-actions button:hover,
.community-feed-actions button.active{
    color:var(--community-primary-dark);
    background:var(--community-soft);
}

.community-react-btn.active{
    color:#c94a63;
}

.community-react-btn.active svg{
    fill:currentColor;
}

.community-feed-meta{
    display:grid;
    gap:8px;
    padding:0 16px 16px;
}

.community-feed-meta strong{
    color:var(--community-ink);
    font-size:14px;
}

.community-feed-meta p{
    margin:0;
    color:var(--community-ink);
    font-size:14px;
    line-height:1.9;
}

.community-feed-meta p a{
    margin-left:6px;
    color:var(--community-ink);
    font-weight:950;
}

.community-feed-title,
.community-feed-comments{
    color:var(--community-muted);
    font-size:13px;
    font-weight:850;
}

.community-feed-comments{
    width:max-content;
    border:0;
    padding:0;
    background:transparent;
    cursor:pointer;
}

.community-feed-title{
    color:var(--community-primary-dark);
}

.community-post-details{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.community-post-details span{
    min-height:28px;
    display:inline-flex;
    align-items:center;
    padding:0 10px;
    border-radius:999px;
    color:var(--community-primary-dark);
    background:var(--community-soft);
    font-size:12px;
    font-weight:850;
}

.community-inline-comments{
    display:grid;
    gap:12px;
    padding:0 16px 16px;
}

.community-inline-comment-list{
    display:grid;
    gap:10px;
}

.community-inline-comment-list article{
    display:grid;
    grid-template-columns:34px minmax(0,1fr);
    gap:10px;
    align-items:start;
}

.community-inline-comment-list b{
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:999px;
    color:#fff;
    background:var(--community-primary);
    font-size:12px;
}

.community-inline-comment-list p{
    margin:0;
    padding:9px 12px;
    border-radius:14px;
    color:var(--community-ink);
    background:var(--community-soft-2);
    line-height:1.7;
}

.community-inline-comment-form{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:10px;
}

.community-inline-comment-form textarea{
    min-height:46px;
    resize:vertical;
    border:1px solid var(--community-border);
    border-radius:14px;
    padding:10px 12px;
    color:var(--community-ink);
    background:#fff;
    font:inherit;
}

.community-inline-comment-form button{
    min-height:46px;
    border:0;
    border-radius:14px;
    padding:0 18px;
    color:#fff;
    background:var(--community-primary);
    font:inherit;
    font-weight:950;
    cursor:pointer;
}

.community-profile-brief{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}

.community-profile-brief h1{
    margin:0 0 6px;
    color:var(--community-ink);
    font-size:28px;
}

.community-profile-brief p{
    margin:0;
    color:var(--community-muted);
    font-weight:850;
}

.community-profile-shortcut{
    min-height:42px;
    display:grid;
    place-items:center;
    border:1px solid var(--community-border);
    border-radius:12px;
    color:var(--community-primary-dark);
    background:#fff;
    font-weight:950;
}

.community-detail-images.single{
    grid-template-columns:1fr;
}

.community-profile-shell{
    width:min(94%,980px);
    display:grid;
    gap:20px;
    margin:24px auto 44px;
}

.community-profile-card{
    display:grid;
    grid-template-columns:120px minmax(0,1fr) auto;
    gap:22px;
    align-items:center;
    padding:24px;
    border:1px solid var(--community-border);
    border-radius:20px;
    background:
        radial-gradient(circle at 6% 0%,rgba(47,127,143,.12),transparent 32%),
        #fff;
    box-shadow:var(--community-shadow);
}

.community-profile-avatar{
    width:112px;
    height:112px;
    display:grid;
    place-items:center;
    border-radius:999px;
    color:#fff;
    background:linear-gradient(135deg,var(--community-primary),#6fa9bd);
    box-shadow:0 0 0 8px rgba(47,127,143,.10);
    font-size:34px;
    font-weight:950;
}

.community-profile-info h1{
    margin:0 0 8px;
    color:var(--community-ink);
    font-size:28px;
}

.community-profile-info p{
    margin:0;
    color:var(--community-muted);
    line-height:1.7;
}

.community-profile-stats{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
    margin-top:16px;
}

.community-profile-stats span{
    color:var(--community-muted);
    font-size:13px;
}

.community-profile-stats strong{
    color:var(--community-ink);
    font-size:18px;
}

.community-profile-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    flex-wrap:wrap;
}

.community-profile-actions form{
    margin:0;
}

.community-profile-actions a,
.community-profile-actions button{
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 20px;
    border:0;
    border-radius:12px;
    color:#fff;
    background:linear-gradient(135deg,var(--community-primary),var(--community-primary-dark));
    font:inherit;
    font-weight:950;
    cursor:pointer;
}

.community-profile-tabs{
    display:flex;
    justify-content:center;
    gap:28px;
    border-bottom:1px solid var(--community-border);
}

.community-profile-tabs a{
    position:relative;
    padding:0 0 14px;
    color:var(--community-muted);
    font-weight:900;
}

.community-profile-tabs a.active{
    color:var(--community-primary-dark);
}

.community-profile-tabs a.active::after{
    content:"";
    position:absolute;
    right:0;
    left:0;
    bottom:-1px;
    height:3px;
    border-radius:999px;
    background:var(--community-primary);
}

.community-profile-posts{
    width:min(100%,680px);
    display:grid;
    gap:22px;
    justify-self:center;
}

@media(max-width:1200px){
    .community-instagram-layout{
        grid-template-columns:1fr;
        direction:rtl;
    }
}

@media(max-width:980px){
    .community-people-results > div{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:760px){
    .community-composer-card,
    .community-profile-card{
        grid-template-columns:1fr;
        justify-items:stretch;
        text-align:center;
    }

    .community-composer-avatar,
    .community-profile-avatar{
        justify-self:center;
    }

    .community-feed-media,
    .community-feed-media span{
        min-height:320px;
    }

    .community-feed-media.two-images{
        grid-template-columns:1fr;
    }

    .community-profile-stats{
        justify-content:center;
    }

    .community-people-results > div{
        grid-template-columns:1fr;
    }
}

/* =========================
   DEDICATED ACCOUNT / STORE PAGES
========================= */

body.settings-body,
body.favorites-body,
body.orders-body{
    --page-primary:#2f7f8f;
    --page-primary-dark:#175f6d;
    --page-soft:#effafa;
    --page-ink:#123141;
    --page-muted:#667d89;
    --page-line:rgba(47,127,143,.16);
    --page-shadow:0 22px 58px rgba(28,77,88,.10);
    margin:0;
    min-height:100vh;
    color:var(--page-ink);
    font-family:var(--font-body);
    background:
        linear-gradient(180deg,#fff 0%,#f8fdfd 44%,#eef8f8 100%);
}

.settings-page,
.favorites-page,
.orders-page{
    min-height:100vh;
}

.settings-shell,
.favorites-shell,
.orders-shell{
    width:min(94%,1120px);
    margin:34px auto 54px;
    display:grid;
    gap:18px;
}

.settings-head,
.favorites-head,
.orders-head{
    padding:26px;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:18px;
    border:1px solid var(--page-line);
    border-radius:20px;
    background:#fff;
    box-shadow:var(--page-shadow);
}

.settings-head span,
.favorites-head span,
.orders-head span{
    display:inline-flex;
    min-height:26px;
    align-items:center;
    padding:4px 11px;
    border-radius:999px;
    color:var(--page-primary-dark);
    background:var(--page-soft);
    font-size:12px;
    font-weight:950;
}

.settings-head h1,
.favorites-head h1,
.orders-head h1{
    margin:10px 0 8px;
    color:var(--page-ink);
    font-size:30px;
    font-weight:950;
}

.settings-head p,
.favorites-head p,
.orders-head p{
    max-width:690px;
    margin:0;
    color:var(--page-muted);
    line-height:1.8;
    font-size:14px;
}

.favorites-head strong,
.orders-head a{
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 18px;
    border-radius:13px;
    color:#fff;
    background:linear-gradient(135deg,var(--page-primary),var(--page-primary-dark));
    font-weight:950;
    white-space:nowrap;
}

.favorites-head{
    padding:18px 20px;
    align-items:center;
}

.favorites-head h1{
    margin:7px 0 4px;
    font-size:24px;
}

.favorites-head p{
    font-size:13px;
}

.favorites-head strong{
    min-height:38px;
    padding:0 14px;
}

.settings-messages{
    display:grid;
    gap:8px;
}

.settings-messages p{
    margin:0;
    padding:12px 14px;
    border:1px solid var(--page-line);
    border-radius:13px;
    color:var(--page-primary-dark);
    background:#fff;
    font-weight:850;
}

.settings-card{
    padding:24px;
    border:1px solid var(--page-line);
    border-radius:20px;
    background:#fff;
    box-shadow:var(--page-shadow);
}

.settings-card + .settings-card{
    margin-top:16px;
}

.settings-card-title{
    margin:0 0 8px;
    color:var(--page-ink);
    font-size:18px;
}

.settings-card-note{
    margin:0 0 16px;
    color:var(--page-muted, #6b7780);
    font-size:13px;
    line-height:1.6;
}

.settings-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
}

.settings-grid label{
    display:grid;
    gap:8px;
    color:var(--page-ink);
    font-size:13px;
    font-weight:950;
}

.settings-grid input,
.settings-grid textarea{
    width:100%;
    min-height:48px;
    border:1px solid var(--page-line);
    border-radius:13px;
    padding:12px 13px;
    color:var(--page-ink);
    background:#fbfefe;
    font:inherit;
    outline:0;
}

.settings-grid textarea{
    min-height:120px;
    resize:vertical;
}

.settings-grid input:focus,
.settings-grid textarea:focus{
    border-color:var(--page-primary);
    box-shadow:0 0 0 4px rgba(47,127,143,.10);
}

.settings-wide{
    grid-column:1 / -1;
}

.settings-avatar-row{
    display:flex;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
}

.settings-avatar-preview{
    width:84px;
    height:84px;
    border-radius:50%;
    overflow:hidden;
    display:grid;
    place-items:center;
    background:rgba(47,127,143,.12);
    color:var(--page-primary-dark);
    font-weight:950;
    font-size:1.5rem;
    flex:0 0 auto;
}

.settings-avatar-preview img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.settings-avatar-fields{
    flex:1 1 220px;
}

.settings-actions .settings-secondary-btn{
    color:var(--page-primary-dark);
    background:#fff;
    border:1px solid rgba(47,127,143,.22);
}

.settings-actions{
    margin-top:20px;
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}

.settings-actions button,
.settings-actions a{
    min-height:46px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 20px;
    border:0;
    border-radius:13px;
    font:inherit;
    font-weight:950;
    cursor:pointer;
}

.settings-actions button{
    color:#fff;
    background:linear-gradient(135deg,var(--page-primary),var(--page-primary-dark));
}

.settings-actions button:disabled{
    opacity:.55;
    cursor:not-allowed;
}

.settings-actions a{
    color:var(--page-primary-dark);
    background:var(--page-soft);
}

.favorites-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
}

.favorite-product-card{
    min-width:0;
    overflow:hidden;
    display:grid;
    border:1px solid var(--page-line);
    border-radius:18px;
    background:#fff;
    box-shadow:var(--page-shadow);
}

.favorite-product-image{
    position:relative;
    min-height:220px;
    display:grid;
    place-items:center;
    overflow:hidden;
    background:linear-gradient(135deg,#f6fcfc,#eaf7f7);
}

.favorite-product-image img{
    width:100%;
    height:100%;
    max-height:260px;
    object-fit:contain;
    padding:20px;
}

.favorite-product-image > span:not(.catalog-badge){
    color:var(--page-primary);
    font-size:24px;
    font-weight:950;
}

.favorite-product-copy{
    padding:18px 18px 12px;
    display:grid;
    gap:8px;
}

.favorite-product-copy small{
    color:var(--page-primary-dark);
    font-weight:900;
}

.favorite-product-copy h2{
    margin:0;
    color:var(--page-ink);
    font-size:18px;
    line-height:1.5;
}

.favorite-product-copy p{
    min-height:48px;
    margin:0;
    color:var(--page-muted);
    line-height:1.7;
    font-size:13px;
}

.favorite-product-copy strong{
    color:var(--page-ink);
    font-size:19px;
}

.favorite-product-actions{
    padding:0 18px 18px;
    display:grid;
    grid-template-columns:1fr auto;
    gap:10px;
    align-items:center;
}

.favorite-product-actions form{
    margin:0;
}

.favorite-product-actions button{
    width:100%;
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:0;
    border-radius:13px;
    font:inherit;
    font-weight:950;
    cursor:pointer;
}

.favorite-product-actions form button{
    color:#fff;
    background:linear-gradient(135deg,var(--page-primary),var(--page-primary-dark));
}

.favorite-product-actions > button{
    color:#b45662;
    background:#fff2f3;
}

.favorites-empty,
.orders-empty{
    min-height:320px;
    padding:34px;
    display:grid;
    place-items:center;
    text-align:center;
    border:1px dashed rgba(47,127,143,.28);
    border-radius:20px;
    background:#fff;
    box-shadow:var(--page-shadow);
}

.favorites-empty svg,
.orders-empty svg{
    width:44px;
    height:44px;
    color:var(--page-primary);
}

.favorites-empty h2,
.orders-empty h2{
    margin:12px 0 6px;
    color:var(--page-ink);
}

.favorites-empty p,
.orders-empty p{
    margin:0 0 16px;
    color:var(--page-muted);
}

.favorites-empty a,
.orders-empty a{
    min-height:44px;
    display:inline-flex;
    align-items:center;
    padding:0 18px;
    border-radius:13px;
    color:#fff;
    background:var(--page-primary);
    font-weight:950;
}

.orders-list{
    display:grid;
    gap:16px;
}

.order-history-card{
    overflow:hidden;
    border:1px solid var(--page-line);
    border-radius:18px;
    background:#fff;
    box-shadow:var(--page-shadow);
}

.order-history-top,
.order-history-card footer{
    padding:18px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    background:#fbfefe;
}

.order-history-top span,
.order-history-card footer span{
    color:var(--page-muted);
    font-size:13px;
    font-weight:900;
}

.order-history-top h2{
    margin:6px 0 0;
    color:var(--page-ink);
    font-size:18px;
}

.order-history-top > strong{
    min-height:34px;
    display:inline-flex;
    align-items:center;
    padding:0 12px;
    border-radius:999px;
    color:var(--page-primary-dark);
    background:var(--page-soft);
    font-size:13px;
}

.order-history-items{
    padding:8px 20px;
    display:grid;
}

.order-history-items div{
    min-height:48px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto auto;
    gap:12px;
    align-items:center;
    border-bottom:1px solid rgba(47,127,143,.10);
}

.order-history-items div:last-child{
    border-bottom:0;
}

.order-history-items span{
    color:var(--page-ink);
    font-weight:900;
}

.order-history-items small{
    color:var(--page-muted);
}

.order-history-items b,
.order-history-card footer strong{
    color:var(--page-primary-dark);
}

.order-history-items pre{
    margin:8px 0;
    white-space:pre-wrap;
    color:var(--page-muted);
    font:inherit;
}

/* =========================
   COMMUNITY AUTHOR ACTIONS
========================= */

.community-feed-head{
    position:relative;
}

.community-author-trigger{
    border:0;
    background:transparent;
    cursor:pointer;
    text-align:right;
}

.community-author-trigger:hover strong{
    color:var(--community-primary-dark);
}

.community-author-menu{
    position:absolute;
    top:58px;
    right:12px;
    z-index:20;
    width:min(250px,calc(100vw - 32px));
    padding:8px;
    display:grid;
    gap:6px;
    border:1px solid var(--community-border);
    border-radius:16px;
    background:#fff;
    box-shadow:0 18px 46px rgba(18,49,65,.14);
}

.community-author-menu[hidden]{
    display:none;
}

.community-author-menu form{
    margin:0;
}

.community-author-menu a,
.community-author-menu button{
    width:100%;
    min-height:42px;
    padding:0 12px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:9px;
    border:0;
    border-radius:12px;
    color:var(--community-ink);
    background:#fff;
    font:inherit;
    font-weight:900;
    cursor:pointer;
    text-align:right;
}

.community-author-menu a:hover,
.community-author-menu button:hover{
    color:var(--community-primary-dark);
    background:var(--community-soft);
}

.community-author-direct{
    transition:.18s ease;
}

.community-author-direct:hover strong{
    color:var(--community-primary-dark);
}

.community-post-options{
    position:relative;
    flex:0 0 auto;
}

button.community-post-menu{
    border:0;
    background:transparent;
    cursor:pointer;
}

.community-post-menu-panel{
    position:absolute;
    top:44px;
    left:0;
    z-index:25;
    width:min(260px,calc(100vw - 32px));
    padding:8px;
    display:grid;
    gap:6px;
    border:1px solid var(--community-border);
    border-radius:16px;
    background:#fff;
    box-shadow:0 18px 46px rgba(18,49,65,.14);
}

.community-post-menu-panel[hidden]{
    display:none;
}

.community-post-menu-panel form{
    margin:0;
}

.community-post-menu-panel a,
.community-post-menu-panel button{
    width:100%;
    min-height:42px;
    padding:0 12px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:9px;
    border:0;
    border-radius:12px;
    color:var(--community-ink);
    background:#fff;
    font:inherit;
    font-weight:900;
    text-align:right;
    cursor:pointer;
}

.community-post-menu-panel a:hover,
.community-post-menu-panel button:hover,
.community-post-menu-panel button.active{
    color:var(--community-primary-dark);
    background:var(--community-soft);
}

.community-edit-modal{
    position:fixed;
    inset:0;
    z-index:80;
    padding:28px;
    display:grid;
    place-items:center;
    background:rgba(18,49,65,.42);
}

.community-edit-modal[hidden]{
    display:none;
}

.community-edit-card{
    width:min(94vw,720px);
    max-height:88vh;
    overflow:auto;
    position:relative;
    padding:24px;
    border:1px solid var(--community-border);
    border-radius:20px;
    background:#fff;
    box-shadow:0 28px 80px rgba(18,49,65,.24);
}

.community-edit-card h2{
    margin:0 0 16px;
    color:var(--community-ink);
    font-size:22px;
    font-weight:950;
}

.community-profile-strip{
    width:min(100%,680px);
    justify-self:center;
    padding:16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    border:1px solid var(--community-border);
    border-radius:18px;
    background:#fff;
    box-shadow:var(--community-shadow);
}

.community-profile-strip-main{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
}

.community-profile-avatar.mini{
    width:54px;
    height:54px;
    font-size:18px;
    box-shadow:0 0 0 5px rgba(47,127,143,.08);
}

.community-profile-strip h1{
    margin:0 0 5px;
    color:var(--community-ink);
    font-size:22px;
    font-weight:950;
}

.community-profile-strip p{
    margin:0;
    color:var(--community-muted);
    font-size:13px;
    font-weight:850;
}

.community-profile-strip-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    flex-wrap:wrap;
}

.community-profile-strip-actions form{
    margin:0;
}

.community-profile-strip-actions a,
.community-profile-strip-actions button{
    min-height:38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 13px;
    border:0;
    border-radius:11px;
    color:#fff;
    background:linear-gradient(135deg,var(--community-primary),var(--community-primary-dark));
    font:inherit;
    font-size:13px;
    font-weight:950;
    cursor:pointer;
}

.community-profile-strip-actions button:disabled{
    cursor:default;
    color:var(--community-primary-dark);
    background:var(--community-soft);
}

.community-main,
.community-composer-card,
.community-main > .community-search,
.community-filter-toolbar,
.community-results-strip{
    min-width:0;
    max-width:100%;
}

/* =========================
   ADMIN OPERATIONS POLISH
========================= */

.admin-overview-home{
    display:grid;
    gap:16px;
}

.admin-overview-welcome{
    min-height:126px;
    padding:24px 28px;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    border:1px solid var(--admin-line);
    border-radius:18px;
    background:rgba(255,255,255,.95);
    box-shadow:var(--admin-shadow-soft);
}

.admin-overview-welcome h1{
    margin:0;
    color:var(--admin-ink);
    font-size:28px;
    line-height:1.35;
    font-weight:950;
}

.admin-overview-welcome p{
    margin:9px 0 0;
    color:var(--admin-muted);
    font-size:13px;
    font-weight:850;
    line-height:1.8;
}

.admin-date-chip{
    min-height:42px;
    padding:0 14px;
    display:inline-flex;
    align-items:center;
    gap:9px;
    border:1px solid var(--admin-line);
    border-radius:12px;
    color:var(--admin-muted);
    background:#fff;
    font-size:12px;
    font-weight:900;
    white-space:nowrap;
}

.admin-date-chip svg{
    color:var(--admin-primary);
}

.admin-overview-metric-grid{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:10px;
}

.admin-overview-metric{
    min-height:116px;
    padding:16px;
    display:grid;
    grid-template-columns:48px minmax(0,1fr);
    align-items:start;
    gap:12px;
    border:1px solid var(--admin-line);
    border-radius:16px;
    background:#fff;
    box-shadow:var(--admin-shadow-soft);
}

.admin-overview-metric > span,
.admin-action-icon{
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border-radius:999px;
    color:var(--admin-primary);
    background:var(--admin-primary-soft);
    flex:0 0 auto;
}

.admin-overview-metric p,
.admin-action-card p{
    margin:0 0 8px;
    color:var(--admin-muted);
    font-size:12px;
    line-height:1.55;
    font-weight:900;
}

.admin-overview-metric strong,
.admin-action-card strong{
    display:block;
    color:var(--admin-ink);
    font-size:27px;
    line-height:1.1;
    font-weight:950;
}

.admin-overview-metric small,
.admin-action-card small{
    display:block;
    margin-top:7px;
    color:var(--admin-muted);
    font-size:11px;
    font-weight:850;
}

.admin-overview-action-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
}

.admin-action-card{
    min-height:148px;
    padding:18px;
    display:grid;
    justify-items:center;
    text-align:center;
    border:1px solid var(--admin-line);
    border-radius:16px;
    background:#fff;
    box-shadow:var(--admin-shadow-soft);
}

.admin-action-card .admin-action-icon{
    margin-bottom:12px;
}

.admin-card-link{
    min-height:32px;
    margin-top:12px;
    padding:0 12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:999px;
    color:var(--admin-primary-dark);
    background:transparent;
    font-size:12px;
    font-weight:950;
    cursor:pointer;
}

.admin-card-link:hover{
    background:var(--admin-primary-soft);
}

.admin-card-link.compact{
    min-height:30px;
    margin:0;
    padding:0 10px;
    color:var(--admin-primary-dark);
    background:var(--admin-primary-soft);
}

.admin-dashboard-tables{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}

.admin-home-table-card{
    min-width:0;
    padding:18px;
    border:1px solid var(--admin-line);
    border-radius:16px;
    background:#fff;
    box-shadow:var(--admin-shadow-soft);
}

.admin-home-table-head{
    margin-bottom:12px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.admin-home-table-head h2{
    margin:0;
    color:var(--admin-ink);
    font-size:18px;
    font-weight:950;
}

.admin-home-table-wrap{
    width:100%;
    overflow:auto;
}

.admin-home-table{
    width:100%;
    min-width:520px;
    border-collapse:collapse;
}

.admin-home-table th,
.admin-home-table td{
    padding:12px 10px;
    border-bottom:1px solid rgba(15,115,128,.10);
    color:var(--admin-ink);
    font-size:12px;
    text-align:right;
    vertical-align:middle;
    white-space:nowrap;
}

.admin-home-table th{
    color:var(--admin-muted);
    font-weight:950;
    background:#f7fcfc;
}

.admin-home-table tbody tr:last-child td{
    border-bottom:0;
}

.admin-home-status{
    min-height:26px;
    padding:4px 11px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    color:var(--admin-primary-dark);
    background:var(--admin-primary-soft);
    font-size:11px;
    font-weight:950;
}

.admin-home-status.is-new{
    color:var(--admin-primary-dark);
    background:var(--admin-primary-soft);
}

.admin-home-status.is-review{
    color:var(--admin-warning);
    background:var(--admin-warning-soft);
}

.admin-home-status.is-delivery{
    color:#3176a6;
    background:#eef7ff;
}

.admin-home-status.is-complete{
    color:#357f65;
    background:#edf9f3;
}

.admin-home-status.is-cancelled{
    color:var(--admin-danger);
    background:var(--admin-danger-soft);
}

.admin-home-status.is-muted{
    color:var(--admin-muted);
    background:#f1f5f5;
}

.admin-sections-page{
    display:grid;
    gap:16px;
}

.admin-sections-head{
    min-height:118px;
    padding:22px 26px;
    display:flex;
    flex-direction:row-reverse;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    border:1px solid var(--admin-line);
    border-radius:18px;
    background:rgba(255,255,255,.96);
    box-shadow:var(--admin-shadow-soft);
}

.admin-sections-head > *{
    direction:rtl;
}

.admin-sections-head > div{
    text-align:right;
}

.admin-sections-title-icon{
    width:46px;
    height:46px;
    margin:0 0 8px auto;
    display:grid;
    place-items:center;
    border-radius:999px;
    color:var(--admin-primary);
    background:var(--admin-primary-soft);
}

.admin-sections-head h1{
    margin:0;
    color:var(--admin-ink);
    font-size:28px;
    line-height:1.25;
    font-weight:950;
}

.admin-sections-head p{
    margin:8px 0 0;
    color:var(--admin-muted);
    font-size:13px;
    font-weight:850;
}

.admin-sections-add{
    min-height:44px;
    padding:0 17px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    border:0;
    border-radius:999px;
    color:#fff;
    background:linear-gradient(135deg,var(--admin-primary),var(--admin-primary-dark));
    box-shadow:0 14px 26px rgba(15,115,128,.22);
    font-size:12px;
    font-weight:950;
    cursor:pointer;
    white-space:nowrap;
}

.admin-sections-forms{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}

.admin-section-form-card{
    padding:14px;
    border:1px solid var(--admin-line);
    border-radius:16px;
    background:#fff;
    box-shadow:var(--admin-shadow-soft);
}

.admin-section-form-card summary{
    min-height:46px;
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--admin-ink);
    font-size:14px;
    font-weight:950;
    cursor:pointer;
    list-style:none;
}

.admin-section-form-card summary::-webkit-details-marker{
    display:none;
}

.admin-section-form-card summary span{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:13px;
    color:var(--admin-primary);
    background:var(--admin-primary-soft);
}

.admin-section-form-card form{
    margin-top:12px;
}

.admin-sections-table-card{
    border:1px solid var(--admin-line);
    border-radius:16px;
    background:#fff;
    box-shadow:var(--admin-shadow-soft);
    overflow:hidden;
}

.admin-sections-table-head{
    min-height:76px;
    padding:18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    border-bottom:1px solid rgba(15,115,128,.10);
}

.admin-sections-table-head h2{
    margin:0;
    color:var(--admin-ink);
    font-size:20px;
    font-weight:950;
}

.admin-sections-table-head p{
    margin:6px 0 0;
    color:var(--admin-muted);
    font-size:12px;
    font-weight:850;
}

.admin-section-sort,
.admin-section-soft-chip{
    min-height:38px;
    padding:0 12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:1px solid var(--admin-line);
    border-radius:12px;
    color:var(--admin-primary-dark);
    background:#fff;
    font-size:12px;
    font-weight:950;
    white-space:nowrap;
}

.admin-section-soft-chip{
    color:var(--admin-muted);
    background:#f7fcfc;
}

.admin-sections-table-wrap{
    width:100%;
    overflow:auto;
}

.admin-sections-table{
    width:100%;
    min-width:900px;
    border-collapse:collapse;
}

.admin-sub-sections-table{
    min-width:820px;
}

.admin-sections-table th,
.admin-sections-table td{
    padding:14px 16px;
    border-bottom:1px solid rgba(15,115,128,.10);
    color:var(--admin-ink);
    text-align:right;
    vertical-align:top;
    font-size:13px;
    white-space:nowrap;
}

.admin-sections-table th{
    color:#486373;
    background:#f7fcfc;
    font-size:12px;
    font-weight:950;
}

.admin-sections-table tbody tr:hover{
    background:rgba(15,115,128,.035);
}

.admin-sections-table tbody tr:last-child td{
    border-bottom:0;
}

.admin-section-name-cell{
    display:flex;
    align-items:center;
    gap:11px;
}

.admin-section-name-cell > span{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border-radius:999px;
    color:var(--admin-primary);
    background:var(--admin-primary-soft);
    flex:0 0 auto;
}

.admin-section-name-cell > span.sub{
    color:#3176a6;
    background:#eef7ff;
}

.admin-section-name-cell strong,
.admin-section-name-cell small{
    display:block;
}

.admin-section-name-cell strong{
    color:var(--admin-ink);
    font-size:13px;
    font-weight:950;
}

.admin-section-name-cell small{
    margin-top:4px;
    color:var(--admin-muted);
    font-size:11px;
    font-weight:850;
}

.admin-section-status{
    min-height:26px;
    padding:4px 12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    color:#357f65;
    background:#edf9f3;
    font-size:11px;
    font-weight:950;
}

.admin-section-actions-menu{
    position:relative;
    display:inline-block;
    min-width:44px;
}

.admin-section-actions-menu summary{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border:1px solid var(--admin-line);
    border-radius:12px;
    color:var(--admin-primary-dark);
    background:#fff;
    cursor:pointer;
    list-style:none;
}

.admin-section-actions-menu summary::-webkit-details-marker{
    display:none;
}

.admin-section-actions-menu[open] > summary{
    background:var(--admin-primary-soft);
}

.admin-section-actions-menu > div{
    width:290px;
    margin-top:9px;
    padding:12px;
    display:grid;
    gap:10px;
    border:1px solid var(--admin-line);
    border-radius:14px;
    background:#fff;
    box-shadow:0 18px 40px rgba(15,60,70,.12);
}

.admin-section-inline-form{
    display:grid;
    gap:10px;
}

.admin-section-inline-form label{
    display:grid;
    gap:6px;
    color:var(--admin-muted);
    font-size:11px;
    font-weight:900;
}

.admin-section-inline-form input,
.admin-section-inline-form select{
    width:100%;
    min-height:40px;
    padding:0 11px;
    border:1px solid var(--admin-line);
    border-radius:11px;
    color:var(--admin-ink);
    background:#fff;
    outline:0;
    font:inherit;
    font-size:12px;
    font-weight:850;
}

.admin-section-inline-form button,
.admin-section-delete{
    min-height:40px;
    padding:0 12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:0;
    border-radius:11px;
    font-size:12px;
    font-weight:950;
    text-decoration:none;
    cursor:pointer;
}

.admin-section-inline-form button{
    color:#fff;
    background:linear-gradient(135deg,var(--admin-primary),var(--admin-primary-dark));
}

.admin-section-delete{
    color:var(--admin-danger);
    background:var(--admin-danger-soft);
}

.admin-products-page{
    display:grid;
    gap:16px;
}

.admin-products-head{
    min-height:118px;
    padding:22px 26px;
    display:flex;
    flex-direction:row-reverse;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    border:1px solid var(--admin-line);
    border-radius:18px;
    background:rgba(255,255,255,.96);
    box-shadow:var(--admin-shadow-soft);
}

.admin-products-head > *{
    direction:rtl;
}

.admin-products-head > div:last-child{
    text-align:right;
}

.admin-products-title-icon{
    width:46px;
    height:46px;
    margin:0 0 8px auto;
    display:grid;
    place-items:center;
    border-radius:999px;
    color:var(--admin-primary);
    background:var(--admin-primary-soft);
}

.admin-products-head h1{
    margin:0;
    color:var(--admin-ink);
    font-size:28px;
    line-height:1.25;
    font-weight:950;
}

.admin-products-head p{
    margin:8px 0 0;
    color:var(--admin-muted);
    font-size:13px;
    font-weight:850;
}

.admin-products-head-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.admin-products-add,
.admin-products-secondary{
    min-height:44px;
    padding:0 17px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    border-radius:12px;
    font-size:12px;
    font-weight:950;
    cursor:pointer;
    white-space:nowrap;
}

.admin-products-add{
    border:0;
    color:#fff;
    background:linear-gradient(135deg,var(--admin-primary),var(--admin-primary-dark));
    box-shadow:0 14px 26px rgba(15,115,128,.22);
}

.admin-products-secondary{
    border:1px solid var(--admin-line);
    color:var(--admin-primary-dark);
    background:#fff;
}

.admin-products-secondary:disabled{
    cursor:not-allowed;
    color:var(--admin-muted);
    opacity:.78;
}

.admin-product-modal{
    position:fixed;
    inset:0;
    z-index:120;
    display:grid;
    place-items:center;
    padding:24px;
    background:rgba(15,35,45,.42);
    backdrop-filter:blur(8px);
}

.admin-product-modal[hidden]{
    display:none;
}

body.admin-product-modal-open{
    overflow:hidden;
}

.admin-product-modal-card{
    width:min(1080px,98vw);
    max-height:90vh;
    overflow:auto;
    position:relative;
    display:grid;
    gap:18px;
    padding:24px;
    border-radius:20px;
    border:1px solid var(--admin-line);
    background:#fff;
    box-shadow:0 28px 80px rgba(15,35,45,.22);
}

.admin-product-modal-close{
    position:absolute;
    top:14px;
    left:14px;
    width:38px;
    height:38px;
    border:0;
    border-radius:999px;
    color:var(--admin-ink);
    background:#f1f5f5;
    font-size:24px;
    line-height:1;
    cursor:pointer;
}

.admin-product-modal-head h2{
    margin:0 0 8px;
    color:var(--admin-ink);
    font-size:24px;
    font-weight:950;
}

.admin-product-modal-head p{
    margin:0;
    color:var(--admin-muted);
    font-size:13px;
    line-height:1.7;
}

.admin-product-modal-form{
    display:grid;
    gap:16px;
}

.admin-product-modal-shared{
    padding:14px;
    border:1px solid var(--admin-line);
    border-radius:14px;
    background:#f9fdfd;
}

.admin-product-modal-shared h3,
.admin-product-modal-list-head h3{
    margin:0 0 12px;
    color:var(--admin-ink);
    font-size:15px;
    font-weight:900;
}

.admin-product-modal-list-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.admin-bulk-products-list{
    display:grid;
    gap:12px;
}

.admin-bulk-product-row{
    padding:16px;
    border:1px solid var(--admin-line);
    border-radius:14px;
    background:#fff;
    display:grid;
    gap:14px;
}

.admin-bulk-variant-label{
    display:grid;
    place-items:center;
    min-width:28px;
    color:var(--admin-muted);
    font-weight:800;
    font-size:12px;
}

.admin-bulk-unit-block{
    padding:14px;
    border:1px solid var(--admin-line);
    border-radius:12px;
    background:#f9fdfd;
}

.admin-bulk-unit-grid{
    display:grid;
    gap:12px;
}

.admin-bulk-unit-grid[data-sale-mode="piece"]{
    grid-template-columns:repeat(3,minmax(0,1fr));
}

.admin-bulk-unit-grid[data-sale-mode="ml"]{
    grid-template-columns:repeat(4,minmax(0,1fr));
}

.admin-bulk-stock-field[hidden]{
    display:none !important;
}

.admin-bulk-unit-grid .field-group{
    margin:0;
}

@media (max-width: 900px){
    .admin-bulk-unit-grid[data-sale-mode="piece"],
    .admin-bulk-unit-grid[data-sale-mode="ml"]{
        grid-template-columns:1fr 1fr;
    }
}

.admin-bulk-variant-hint{
    display:block;
    margin-top:8px;
    color:var(--admin-muted);
    font-size:12px;
}

.admin-bulk-product-fields{
    grid-template-columns:repeat(3,minmax(0,1fr));
}

@media (max-width: 900px){
    .admin-bulk-product-fields{
        grid-template-columns:1fr;
    }
}

.admin-bulk-product-row-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:12px;
}

.admin-bulk-product-row-head strong{
    color:var(--admin-ink);
    font-size:14px;
}

.admin-bulk-row-remove{
    border:0;
    background:transparent;
    color:var(--admin-danger);
    font-weight:800;
    cursor:pointer;
}

.admin-bulk-product-fields{
    grid-template-columns:repeat(3,minmax(0,1fr));
}

.admin-product-modal-actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    padding-top:4px;
}

@media (max-width: 900px){
    .admin-bulk-product-fields{
        grid-template-columns:1fr;
    }

    .admin-product-modal-list-head{
        flex-direction:column;
        align-items:stretch;
    }
}

.admin-products-stats{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
}

.admin-products-stats article{
    min-height:112px;
    padding:18px;
    display:grid;
    grid-template-columns:50px minmax(0,1fr);
    gap:14px;
    align-items:center;
    border:1px solid var(--admin-line);
    border-radius:16px;
    background:#fff;
    box-shadow:var(--admin-shadow-soft);
}

.admin-products-stats article > span{
    width:50px;
    height:50px;
    display:grid;
    place-items:center;
    border-radius:999px;
    color:var(--admin-primary);
    background:var(--admin-primary-soft);
}

.admin-products-stats article > span.warning{
    color:var(--admin-warning);
    background:var(--admin-warning-soft);
}

.admin-products-stats article > span.muted{
    color:var(--admin-muted);
    background:#f1f5f5;
}

.admin-products-stats p{
    margin:0 0 8px;
    color:var(--admin-muted);
    font-size:12px;
    line-height:1.55;
    font-weight:900;
}

.admin-products-stats strong{
    display:block;
    color:var(--admin-ink);
    font-size:27px;
    line-height:1.1;
    font-weight:950;
}

.admin-products-stats small{
    display:block;
    margin-top:7px;
    color:var(--admin-muted);
    font-size:11px;
    font-weight:850;
}

.admin-products-filterbar{
    padding:14px;
    display:grid;
    grid-template-columns:minmax(210px,1.5fr) repeat(4,minmax(130px,1fr)) auto;
    gap:10px;
    border:1px solid var(--admin-line);
    border-radius:16px;
    background:#fff;
    box-shadow:var(--admin-shadow-soft);
}

.admin-products-search,
.admin-products-filterbar select,
.admin-products-filterbar button{
    min-height:44px;
    border:1px solid var(--admin-line);
    border-radius:12px;
    color:var(--admin-ink);
    background:#fff;
    font-size:12px;
    font-weight:900;
}

.admin-products-search{
    padding:0 12px;
    display:flex;
    align-items:center;
    gap:8px;
}

.admin-products-search svg{
    color:var(--admin-primary);
}

.admin-products-search input{
    width:100%;
    min-width:0;
    border:0;
    outline:0;
    color:var(--admin-ink);
    background:transparent;
}

.admin-products-filterbar select{
    padding:0 12px;
    outline:0;
}

.admin-products-filterbar button{
    padding:0 14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    cursor:pointer;
}

.admin-products-filterbar button svg{
    color:var(--admin-primary);
}

.admin-products-table-card{
    border:1px solid var(--admin-line);
    border-radius:16px;
    background:#fff;
    box-shadow:var(--admin-shadow-soft);
    overflow:hidden;
}

.admin-products-table-wrap{
    width:100%;
    overflow:auto;
}

.admin-products-table{
    width:100%;
    min-width:980px;
    border-collapse:collapse;
}

.admin-products-table th,
.admin-products-table td{
    padding:14px 16px;
    border-bottom:1px solid rgba(15,115,128,.10);
    color:var(--admin-ink);
    text-align:right;
    vertical-align:middle;
    font-size:13px;
    white-space:nowrap;
}

.admin-products-table th{
    color:#486373;
    background:#f7fcfc;
    font-size:12px;
    font-weight:950;
}

.admin-products-table tbody tr:hover{
    background:rgba(15,115,128,.035);
}

.admin-product-name-cell{
    display:flex;
    align-items:center;
    gap:11px;
}

.admin-product-name-cell > span{
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border-radius:13px;
    color:var(--admin-primary);
    background:var(--admin-primary-soft);
    overflow:hidden;
    flex:0 0 auto;
}

.admin-product-name-cell img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.admin-product-name-cell strong,
.admin-product-name-cell small,
.admin-products-table td small{
    display:block;
}

.admin-product-name-cell strong,
.admin-product-section{
    color:var(--admin-ink);
    font-size:13px;
    font-weight:950;
}

.admin-product-name-cell small,
.admin-products-table td small{
    margin-top:4px;
    color:var(--admin-muted);
    font-size:11px;
    font-weight:850;
}

.admin-product-stock{
    color:var(--admin-ink);
    font-weight:950;
}

.admin-product-stock.is-alert{
    color:var(--admin-danger);
}

.admin-product-status{
    min-height:28px;
    padding:5px 12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    font-size:11px;
    font-weight:950;
}

.admin-product-status.is-active{
    color:#357f65;
    background:#edf9f3;
}

.admin-product-status.is-low{
    color:var(--admin-warning);
    background:var(--admin-warning-soft);
}

.admin-product-status.is-out{
    color:var(--admin-muted);
    background:#f1f5f5;
}

.admin-product-actions{
    display:inline-flex;
    align-items:center;
    gap:8px;
}

.admin-product-icon-action,
.admin-product-actions-menu summary{
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border:1px solid var(--admin-line);
    border-radius:11px;
    background:#fff;
}

.admin-product-icon-action.edit{
    color:var(--admin-primary);
}

.admin-flash-messages{
    margin-bottom:16px;
}

.admin-flash-messages p{
    margin:0 0 8px;
    padding:12px 14px;
    border-radius:12px;
    font-weight:700;
}

.admin-flash-messages .success{
    background:#ecfdf5;
    color:#047857;
}

.admin-flash-messages .info{
    background:#ecfeff;
    color:#0f766e;
}

.admin-flash-messages .error{
    background:#fff1f2;
    color:#be123c;
}

.admin-inventory-table{
    table-layout:fixed;
    min-width:760px;
}

.admin-inventory-table th:nth-child(1),
.admin-inventory-table td:nth-child(1){
    width:34%;
}

.admin-inventory-table th:nth-child(2),
.admin-inventory-table td:nth-child(2){
    width:18%;
}

.admin-inventory-table th:nth-child(3),
.admin-inventory-table td:nth-child(3),
.admin-inventory-table th:nth-child(4),
.admin-inventory-table td:nth-child(4){
    width:96px;
}

.admin-inventory-table th:nth-child(5),
.admin-inventory-table td:nth-child(5){
    width:84px;
    padding-inline:10px;
}

.admin-inventory-table td{
    vertical-align:middle;
}

.admin-inventory-status{
    display:inline-flex;
    align-items:center;
    min-height:28px;
    padding:5px 12px;
    border-radius:999px;
    font-size:11px;
    font-weight:950;
    white-space:nowrap;
}

.admin-inventory-status.is-active{
    color:#357f65;
    background:#edf9f3;
}

.admin-inventory-status.is-low{
    color:var(--admin-warning);
    background:var(--admin-warning-soft);
}

.admin-inventory-status.is-out,
.admin-inventory-status.is-unknown{
    color:var(--admin-muted);
    background:#f1f5f5;
}

.admin-inventory-row-form{
    display:none;
}

.admin-inventory-field-cell{
    width:96px;
    padding-inline:10px;
}

.admin-inventory-qty-input{
    width:100%;
    max-width:none;
    min-height:42px;
    border:1px solid #cfd8dc;
    border-radius:12px;
    padding:10px 12px;
    background:#eef2f4;
    color:var(--admin-ink);
    font-size:14px;
    font-weight:800;
    text-align:center;
    appearance:textfield;
    -moz-appearance:textfield;
}

.admin-inventory-qty-input::-webkit-outer-spin-button,
.admin-inventory-qty-input::-webkit-inner-spin-button{
    margin:0;
    -webkit-appearance:none;
}

.admin-inventory-qty-input:focus{
    outline:0;
    border-color:rgba(15,115,128,.45);
    background:#fff;
    box-shadow:0 0 0 3px rgba(15,115,128,.12);
}

.admin-inventory-action-buttons{
    display:inline-flex;
    align-items:center;
    justify-content:flex-start;
    gap:6px;
}

.admin-product-icon-action.save{
    color:var(--admin-primary);
    cursor:pointer;
    transition:background .18s ease,border-color .18s ease,color .18s ease;
}

.admin-product-icon-action.save.is-dirty{
    color:#92400e;
    background:#fef3c7;
    border-color:#fcd34d;
}

.admin-product-icon-action.save.is-saved{
    color:#047857;
    background:#ecfdf5;
    border-color:#6ee7b7;
}

.admin-product-icon-action.save:disabled{
    opacity:.72;
    cursor:wait;
}

.admin-inventory-actions{
    width:84px;
    min-width:84px;
    max-width:84px;
    padding-inline:10px;
    white-space:nowrap;
}

.admin-inventory-empty{
    margin:0;
    color:var(--admin-muted);
    font-size:13px;
}

@media (max-width: 900px){
    .admin-inventory-qty-input{
        width:100%;
        min-width:72px;
    }
}

.admin-product-icon-action.delete{
    color:var(--admin-danger);
    border-color:rgba(221,93,93,.22);
    background:var(--admin-danger-soft);
}

.admin-product-actions-menu{
    position:relative;
    display:inline-block;
}

.admin-product-actions-menu summary{
    color:var(--admin-primary-dark);
    cursor:pointer;
    list-style:none;
}

.admin-product-actions-menu summary::-webkit-details-marker{
    display:none;
}

.admin-product-actions-menu[open] summary{
    background:var(--admin-primary-soft);
}

.admin-product-actions-menu > div{
    position:absolute;
    top:44px;
    left:0;
    z-index:25;
    width:280px;
    padding:12px;
    display:grid;
    gap:8px;
    border:1px solid var(--admin-line);
    border-radius:14px;
    background:#fff;
    box-shadow:0 20px 50px rgba(20,60,70,.16);
}

.admin-product-actions-menu p{
    margin:0;
    color:var(--admin-muted);
    line-height:1.7;
    white-space:normal;
}

.admin-product-actions-menu strong{
    color:var(--admin-ink);
}

.admin-products-footer{
    padding:13px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    color:var(--admin-muted);
    background:#fbfefe;
    font-size:12px;
    font-weight:900;
}

.admin-products-footer div{
    display:flex;
    align-items:center;
    gap:8px;
}

.admin-products-footer button,
.admin-products-footer strong{
    min-width:32px;
    height:32px;
    display:grid;
    place-items:center;
    border:1px solid var(--admin-line);
    border-radius:10px;
    color:var(--admin-primary-dark);
    background:#fff;
}

.admin-products-footer strong{
    color:#fff;
    background:var(--admin-primary);
}

.admin-ready-page{
    display:grid;
    gap:16px;
}

.admin-ready-head{
    min-height:118px;
    padding:22px 26px;
    display:flex;
    flex-direction:row-reverse;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    border:1px solid var(--admin-line);
    border-radius:18px;
    background:rgba(255,255,255,.96);
    box-shadow:var(--admin-shadow-soft);
}

.admin-ready-head > *{
    direction:rtl;
}

.admin-ready-head > div{
    text-align:right;
}

.admin-ready-title-icon{
    width:46px;
    height:46px;
    margin:0 0 8px auto;
    display:grid;
    place-items:center;
    border-radius:999px;
    color:var(--admin-primary);
    background:var(--admin-primary-soft);
}

.admin-ready-head h1{
    margin:0;
    color:var(--admin-ink);
    font-size:28px;
    line-height:1.25;
    font-weight:950;
}

.admin-ready-head p{
    margin:8px 0 0;
    color:var(--admin-muted);
    font-size:13px;
    font-weight:850;
}

.admin-ready-add{
    min-height:44px;
    padding:0 17px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    border:0;
    border-radius:12px;
    color:#fff;
    background:linear-gradient(135deg,var(--admin-primary),var(--admin-primary-dark));
    box-shadow:0 14px 26px rgba(15,115,128,.22);
    font-size:12px;
    font-weight:950;
    cursor:pointer;
    white-space:nowrap;
}

.admin-ready-create-drawer{
    padding:14px;
    border:1px solid var(--admin-line);
    border-radius:16px;
    background:#fff;
    box-shadow:var(--admin-shadow-soft);
}

.admin-ready-create-drawer summary{
    min-height:46px;
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--admin-ink);
    font-size:14px;
    font-weight:950;
    cursor:pointer;
    list-style:none;
}

.admin-ready-create-drawer summary::-webkit-details-marker{
    display:none;
}

.admin-ready-create-drawer summary span{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:13px;
    color:var(--admin-primary);
    background:var(--admin-primary-soft);
}

.admin-ready-form{
    margin-top:12px;
    box-shadow:none;
}

.admin-ready-stats{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
}

.admin-ready-stats article{
    min-height:112px;
    padding:18px;
    display:grid;
    grid-template-columns:50px minmax(0,1fr);
    gap:14px;
    align-items:center;
    border:1px solid var(--admin-line);
    border-radius:16px;
    background:#fff;
    box-shadow:var(--admin-shadow-soft);
}

.admin-ready-stats article > span{
    width:50px;
    height:50px;
    display:grid;
    place-items:center;
    border-radius:999px;
    color:var(--admin-primary);
    background:var(--admin-primary-soft);
}

.admin-ready-stats article > span.warning{
    color:var(--admin-warning);
    background:var(--admin-warning-soft);
}

.admin-ready-stats p{
    margin:0 0 8px;
    color:var(--admin-muted);
    font-size:12px;
    line-height:1.55;
    font-weight:900;
}

.admin-ready-stats strong{
    display:block;
    color:var(--admin-ink);
    font-size:27px;
    line-height:1.1;
    font-weight:950;
}

.admin-ready-stats small{
    display:block;
    margin-top:7px;
    color:var(--admin-muted);
    font-size:11px;
    font-weight:850;
}

.admin-ready-filterbar{
    padding:14px;
    display:grid;
    grid-template-columns:minmax(210px,1.5fr) repeat(4,minmax(130px,1fr)) auto;
    gap:10px;
    border:1px solid var(--admin-line);
    border-radius:16px;
    background:#fff;
    box-shadow:var(--admin-shadow-soft);
}

.admin-ready-search,
.admin-ready-filterbar select,
.admin-ready-filterbar button{
    min-height:44px;
    border:1px solid var(--admin-line);
    border-radius:12px;
    color:var(--admin-ink);
    background:#fff;
    font-size:12px;
    font-weight:900;
}

.admin-ready-search{
    padding:0 12px;
    display:flex;
    align-items:center;
    gap:8px;
}

.admin-ready-search svg{
    color:var(--admin-primary);
}

.admin-ready-search input{
    width:100%;
    min-width:0;
    border:0;
    outline:0;
    color:var(--admin-ink);
    background:transparent;
}

.admin-ready-filterbar select{
    padding:0 12px;
    outline:0;
}

.admin-ready-filterbar button{
    padding:0 14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    cursor:pointer;
}

.admin-ready-filterbar button svg{
    color:var(--admin-primary);
}

.admin-ready-table-card{
    border:1px solid var(--admin-line);
    border-radius:16px;
    background:#fff;
    box-shadow:var(--admin-shadow-soft);
    overflow:hidden;
}

.admin-ready-table-wrap{
    width:100%;
    overflow:auto;
}

.admin-ready-table{
    width:100%;
    min-width:1040px;
    border-collapse:collapse;
}

.admin-ready-table th,
.admin-ready-table td{
    padding:14px 16px;
    border-bottom:1px solid rgba(15,115,128,.10);
    color:var(--admin-ink);
    text-align:right;
    vertical-align:middle;
    font-size:13px;
    white-space:nowrap;
}

.admin-ready-table th{
    color:#486373;
    background:#f7fcfc;
    font-size:12px;
    font-weight:950;
}

.admin-ready-table tbody tr:hover{
    background:rgba(15,115,128,.035);
}

.admin-ready-name-cell{
    display:flex;
    align-items:center;
    gap:11px;
}

.admin-ready-name-cell > span{
    width:58px;
    height:48px;
    display:grid;
    place-items:center;
    border-radius:13px;
    color:var(--admin-primary);
    background:var(--admin-primary-soft);
    overflow:hidden;
    flex:0 0 auto;
}

.admin-ready-name-cell img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.admin-ready-name-cell strong,
.admin-ready-name-cell small{
    display:block;
}

.admin-ready-name-cell strong{
    color:var(--admin-ink);
    font-size:13px;
    font-weight:950;
}

.admin-ready-name-cell small{
    margin-top:4px;
    color:var(--admin-muted);
    font-size:11px;
    font-weight:850;
}

.admin-ready-status{
    min-height:28px;
    padding:5px 12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    font-size:11px;
    font-weight:950;
}

.admin-ready-status.is-active{
    color:#357f65;
    background:#edf9f3;
}

.admin-ready-status.is-out{
    color:var(--admin-warning);
    background:var(--admin-warning-soft);
}

.admin-ready-actions{
    display:inline-flex;
    align-items:center;
    gap:8px;
}

.admin-ready-actions > form{
    margin:0;
}

.admin-ready-actions-menu,
.admin-ready-edit-menu{
    position:relative;
    display:inline-block;
}

.admin-ready-actions-menu summary,
.admin-ready-edit-menu summary,
.admin-ready-delete{
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border:1px solid var(--admin-line);
    border-radius:11px;
    background:#fff;
    cursor:pointer;
    list-style:none;
}

.admin-ready-actions-menu summary{
    color:var(--admin-primary-dark);
}

.admin-ready-edit-menu summary{
    color:var(--admin-primary);
}

.admin-ready-delete{
    color:var(--admin-danger);
    border-color:rgba(221,93,93,.22);
    background:var(--admin-danger-soft);
}

.admin-ready-actions-menu summary::-webkit-details-marker,
.admin-ready-edit-menu summary::-webkit-details-marker{
    display:none;
}

.admin-ready-actions-menu[open] summary,
.admin-ready-edit-menu[open] summary{
    background:var(--admin-primary-soft);
}

.admin-ready-actions-menu > div,
.admin-ready-edit-menu > form{
    position:absolute;
    top:44px;
    left:0;
    z-index:25;
    width:300px;
    padding:12px;
    display:grid;
    gap:10px;
    border:1px solid var(--admin-line);
    border-radius:14px;
    background:#fff;
    box-shadow:0 20px 50px rgba(20,60,70,.16);
}

.admin-ready-edit-menu > form{
    width:330px;
    max-height:72vh;
    overflow:auto;
}

.admin-ready-actions-menu p{
    margin:0;
    color:var(--admin-muted);
    line-height:1.7;
    white-space:normal;
}

.admin-ready-actions-menu strong{
    color:var(--admin-ink);
}

.admin-ready-edit-menu label{
    display:grid;
    gap:6px;
    color:var(--admin-muted);
    font-size:11px;
    font-weight:900;
}

.admin-ready-edit-menu input,
.admin-ready-edit-menu select,
.admin-ready-edit-menu textarea{
    width:100%;
    min-height:40px;
    padding:8px 10px;
    border:1px solid var(--admin-line);
    border-radius:11px;
    color:var(--admin-ink);
    background:#fff;
    outline:0;
    font:inherit;
    font-size:12px;
}

.admin-ready-edit-menu textarea{
    resize:vertical;
}

.admin-ready-check{
    display:flex !important;
    grid-template-columns:auto 1fr;
    align-items:center;
}

.admin-ready-check input{
    width:auto;
    min-height:0;
}

.admin-ready-edit-menu button{
    min-height:40px;
    border:0;
    border-radius:11px;
    color:#fff;
    background:linear-gradient(135deg,var(--admin-primary),var(--admin-primary-dark));
    font:inherit;
    font-size:12px;
    font-weight:950;
    cursor:pointer;
}

.admin-ready-footer{
    padding:13px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    color:var(--admin-muted);
    background:#fbfefe;
    font-size:12px;
    font-weight:900;
}

.admin-ready-footer div{
    display:flex;
    align-items:center;
    gap:8px;
}

.admin-ready-footer button,
.admin-ready-footer strong{
    min-width:32px;
    height:32px;
    display:grid;
    place-items:center;
    border:1px solid var(--admin-line);
    border-radius:10px;
    color:var(--admin-primary-dark);
    background:#fff;
}

.admin-ready-footer strong{
    color:#fff;
    background:var(--admin-primary);
}

.admin-customers-page{
    display:grid;
    gap:16px;
}

.admin-customers-head{
    min-height:118px;
    padding:22px 26px;
    display:flex;
    flex-direction:row-reverse;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    border:1px solid var(--admin-line);
    border-radius:18px;
    background:rgba(255,255,255,.96);
    box-shadow:var(--admin-shadow-soft);
}

.admin-customers-head > *{
    direction:rtl;
}

.admin-customers-head > div{
    text-align:right;
}

.admin-customers-title-icon{
    width:46px;
    height:46px;
    margin:0 0 8px auto;
    display:grid;
    place-items:center;
    border-radius:999px;
    color:var(--admin-primary);
    background:var(--admin-primary-soft);
}

.admin-customers-head h1{
    margin:0;
    color:var(--admin-ink);
    font-size:28px;
    line-height:1.25;
    font-weight:950;
}

.admin-customers-head p{
    margin:8px 0 0;
    color:var(--admin-muted);
    font-size:13px;
    font-weight:850;
}

.admin-customers-add{
    min-height:44px;
    padding:0 17px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    border:0;
    border-radius:12px;
    color:#fff;
    background:linear-gradient(135deg,var(--admin-primary),var(--admin-primary-dark));
    box-shadow:0 14px 26px rgba(15,115,128,.22);
    font-size:12px;
    font-weight:950;
    cursor:pointer;
    white-space:nowrap;
}

.admin-customer-create-drawer{
    padding:14px;
    border:1px solid var(--admin-line);
    border-radius:16px;
    background:#fff;
    box-shadow:var(--admin-shadow-soft);
}

.admin-customer-create-drawer summary{
    min-height:46px;
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--admin-ink);
    font-size:14px;
    font-weight:950;
    cursor:pointer;
    list-style:none;
}

.admin-customer-create-drawer summary::-webkit-details-marker{
    display:none;
}

.admin-customer-create-drawer summary span{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:13px;
    color:var(--admin-primary);
    background:var(--admin-primary-soft);
}

.admin-customer-form{
    margin-top:12px;
    box-shadow:none;
}

.admin-customers-stats{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
}

.admin-customers-stats article{
    min-height:112px;
    padding:18px;
    display:grid;
    grid-template-columns:50px minmax(0,1fr);
    gap:14px;
    align-items:center;
    border:1px solid var(--admin-line);
    border-radius:16px;
    background:#fff;
    box-shadow:var(--admin-shadow-soft);
}

.admin-customers-stats article > span{
    width:50px;
    height:50px;
    display:grid;
    place-items:center;
    border-radius:999px;
    color:var(--admin-primary);
    background:var(--admin-primary-soft);
}

.admin-customers-stats article > span.complete{
    color:#357f65;
    background:#edf9f3;
}

.admin-customers-stats article > span.warning{
    color:var(--admin-warning);
    background:var(--admin-warning-soft);
}

.admin-customers-stats p{
    margin:0 0 8px;
    color:var(--admin-muted);
    font-size:12px;
    line-height:1.55;
    font-weight:900;
}

.admin-customers-stats strong{
    display:block;
    color:var(--admin-ink);
    font-size:27px;
    line-height:1.1;
    font-weight:950;
}

.admin-customers-stats small{
    display:block;
    margin-top:7px;
    color:var(--admin-muted);
    font-size:11px;
    font-weight:850;
}

.admin-customers-filterbar{
    padding:14px;
    display:grid;
    grid-template-columns:minmax(210px,1.5fr) repeat(4,minmax(130px,1fr)) auto;
    gap:10px;
    border:1px solid var(--admin-line);
    border-radius:16px;
    background:#fff;
    box-shadow:var(--admin-shadow-soft);
}

.admin-customers-search,
.admin-customers-filterbar select,
.admin-customers-filterbar button{
    min-height:44px;
    border:1px solid var(--admin-line);
    border-radius:12px;
    color:var(--admin-ink);
    background:#fff;
    font-size:12px;
    font-weight:900;
}

.admin-customers-search{
    padding:0 12px;
    display:flex;
    align-items:center;
    gap:8px;
}

.admin-customers-search svg,
.admin-customers-filterbar button svg{
    color:var(--admin-primary);
}

.admin-customers-search input{
    width:100%;
    min-width:0;
    border:0;
    outline:0;
    color:var(--admin-ink);
    background:transparent;
}

.admin-customers-filterbar select{
    padding:0 12px;
    outline:0;
}

.admin-customers-filterbar button{
    padding:0 14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    cursor:pointer;
}

.admin-customers-table-card{
    border:1px solid var(--admin-line);
    border-radius:16px;
    background:#fff;
    box-shadow:var(--admin-shadow-soft);
    overflow:hidden;
}

.admin-customers-table-wrap{
    width:100%;
    overflow:auto;
}

.admin-customers-table{
    width:100%;
    min-width:1180px;
    border-collapse:collapse;
}

.admin-customers-table th,
.admin-customers-table td{
    padding:14px 16px;
    border-bottom:1px solid rgba(15,115,128,.10);
    color:var(--admin-ink);
    text-align:right;
    vertical-align:middle;
    font-size:13px;
    white-space:nowrap;
}

.admin-customers-table th{
    color:#486373;
    background:#f7fcfc;
    font-size:12px;
    font-weight:950;
}

.admin-customers-table tbody tr:hover{
    background:rgba(15,115,128,.035);
}

.admin-customer-name-cell{
    display:flex;
    align-items:center;
    gap:11px;
}

.admin-customer-name-cell > span{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border-radius:999px;
    color:#fff;
    background:linear-gradient(135deg,var(--admin-primary),#6fa9bd);
    font-size:13px;
    font-weight:950;
    flex:0 0 auto;
}

.admin-customer-name-cell strong,
.admin-customer-name-cell small{
    display:block;
}

.admin-customer-name-cell strong{
    color:var(--admin-ink);
    font-size:13px;
    font-weight:950;
}

.admin-customer-name-cell small{
    margin-top:4px;
    color:var(--admin-muted);
    font-size:11px;
    font-weight:850;
}

.admin-customer-status{
    min-height:28px;
    padding:5px 12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    font-size:11px;
    font-weight:950;
}

.admin-customer-status.is-active{
    color:#357f65;
    background:#edf9f3;
}

.admin-customer-status.is-out{
    color:var(--admin-danger);
    background:var(--admin-danger-soft);
}

.admin-customer-actions{
    display:inline-flex;
    align-items:center;
    gap:8px;
}

.admin-customer-actions > form{
    margin:0;
}

.admin-customer-actions-menu,
.admin-customer-view-menu{
    position:relative;
    display:inline-block;
}

.admin-customer-actions-menu summary,
.admin-customer-view-menu summary,
.admin-customer-message-action{
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border:1px solid var(--admin-line);
    border-radius:11px;
    background:#fff;
    cursor:pointer;
    list-style:none;
}

.admin-customer-actions-menu summary{
    color:var(--admin-primary-dark);
}

.admin-customer-view-menu summary{
    color:var(--admin-primary);
}

.admin-customer-message-action{
    color:var(--admin-primary);
    border-color:rgba(15,115,128,.22);
    background:#f9fefe;
}

.admin-customer-actions-menu summary::-webkit-details-marker,
.admin-customer-view-menu summary::-webkit-details-marker{
    display:none;
}

.admin-customer-actions-menu[open] summary,
.admin-customer-view-menu[open] summary{
    background:var(--admin-primary-soft);
}

.admin-customer-actions-menu > div,
.admin-customer-view-menu > div{
    position:absolute;
    top:44px;
    left:0;
    z-index:25;
    width:290px;
    padding:12px;
    display:grid;
    gap:8px;
    border:1px solid var(--admin-line);
    border-radius:14px;
    background:#fff;
    box-shadow:0 20px 50px rgba(20,60,70,.16);
}

.admin-customer-actions-menu p,
.admin-customer-view-menu p{
    margin:0;
    color:var(--admin-muted);
    line-height:1.7;
    white-space:normal;
}

.admin-customer-actions-menu strong,
.admin-customer-view-menu strong{
    color:var(--admin-ink);
}

.admin-customers-footer{
    padding:13px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    color:var(--admin-muted);
    background:#fbfefe;
    font-size:12px;
    font-weight:900;
}

.admin-customers-footer div{
    display:flex;
    align-items:center;
    gap:8px;
}

.admin-customers-footer button,
.admin-customers-footer strong{
    min-width:32px;
    height:32px;
    display:grid;
    place-items:center;
    border:1px solid var(--admin-line);
    border-radius:10px;
    color:var(--admin-primary-dark);
    background:#fff;
}

.admin-customers-footer strong{
    color:#fff;
    background:var(--admin-primary);
}

.admin-orders-page{
    display:grid;
    gap:16px;
}

.admin-orders-head{
    min-height:118px;
    padding:22px 26px;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    border:1px solid var(--admin-line);
    border-radius:18px;
    background:rgba(255,255,255,.96);
    box-shadow:var(--admin-shadow-soft);
}

.admin-orders-head > div{
    text-align:right;
}

.admin-orders-icon{
    width:46px;
    height:46px;
    margin:0 0 8px auto;
    display:grid;
    place-items:center;
    border-radius:999px;
    color:var(--admin-primary);
    background:var(--admin-primary-soft);
}

.admin-orders-head h1{
    margin:0;
    color:var(--admin-ink);
    font-size:28px;
    line-height:1.25;
    font-weight:950;
}

.admin-orders-head p{
    margin:8px 0 0;
    color:var(--admin-muted);
    font-size:13px;
    font-weight:850;
}

.admin-orders-export{
    min-height:42px;
    padding:0 17px;
    display:inline-flex;
    align-items:center;
    gap:9px;
    border:0;
    border-radius:999px;
    color:#fff;
    background:linear-gradient(135deg,var(--admin-primary),var(--admin-primary-dark));
    box-shadow:0 14px 26px rgba(15,115,128,.22);
    font-size:12px;
    font-weight:950;
    cursor:pointer;
}

.admin-orders-export svg{
    transform:rotate(-90deg);
}

.admin-orders-filterbar{
    padding:14px;
    display:grid;
    grid-template-columns:auto minmax(150px,1fr) minmax(150px,1fr) minmax(170px,1fr) minmax(170px,1fr);
    gap:12px;
    border:1px solid var(--admin-line);
    border-radius:16px;
    background:#fff;
    box-shadow:var(--admin-shadow-soft);
}

.admin-orders-filterbar select,
.admin-orders-filterbar label,
.admin-filter-more{
    min-height:44px;
    border:1px solid var(--admin-line);
    border-radius:12px;
    color:var(--admin-ink);
    background:#fff;
    font-size:12px;
    font-weight:900;
}

.admin-orders-filterbar select{
    padding:0 12px;
    outline:0;
}

.admin-orders-filterbar label{
    padding:0 12px;
    display:flex;
    align-items:center;
    gap:8px;
}

.admin-orders-filterbar label span{
    color:var(--admin-muted);
    white-space:nowrap;
}

.admin-orders-filterbar input{
    width:100%;
    min-width:0;
    border:0;
    outline:0;
    color:var(--admin-ink);
    background:transparent;
}

.admin-filter-more{
    padding:0 14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    cursor:pointer;
}

.admin-filter-more svg{
    color:var(--admin-primary);
}

.admin-orders-tabs{
    padding:8px;
    display:flex;
    align-items:center;
    gap:8px;
    overflow:auto;
    border:1px solid var(--admin-line);
    border-radius:16px;
    background:#fff;
    box-shadow:var(--admin-shadow-soft);
}

.admin-orders-tabs button{
    min-height:42px;
    padding:0 14px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    border:0;
    border-radius:12px;
    color:var(--admin-ink);
    background:transparent;
    font-size:12px;
    font-weight:950;
    white-space:nowrap;
    cursor:pointer;
}

.admin-orders-tabs button span{
    min-width:26px;
    height:24px;
    padding:0 8px;
    display:grid;
    place-items:center;
    border-radius:999px;
    color:var(--admin-muted);
    background:#f1f5f5;
    font-size:11px;
}

.admin-orders-tabs button.active{
    color:#fff;
    background:linear-gradient(135deg,var(--admin-primary),var(--admin-primary-dark));
}

.admin-orders-tabs button.active span{
    color:var(--admin-primary-dark);
    background:#fff;
}

.admin-orders-table-card{
    border:1px solid var(--admin-line);
    border-radius:16px;
    background:#fff;
    box-shadow:var(--admin-shadow-soft);
    overflow:hidden;
}

.admin-orders-table-wrap{
    width:100%;
    overflow:auto;
}

.admin-orders-table{
    width:100%;
    min-width:940px;
    border-collapse:collapse;
}

.admin-orders-table th,
.admin-orders-table td{
    padding:14px 16px;
    border-bottom:1px solid rgba(15,115,128,.10);
    color:var(--admin-ink);
    text-align:right;
    vertical-align:middle;
    font-size:13px;
    white-space:nowrap;
}

.admin-orders-table th{
    color:#486373;
    background:#f7fcfc;
    font-size:12px;
    font-weight:950;
}

.admin-orders-table tbody tr:hover{
    background:rgba(15,115,128,.035);
}

.admin-order-customer{
    display:flex;
    align-items:center;
    gap:10px;
}

.admin-order-customer > span{
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:999px;
    color:var(--admin-primary-dark);
    background:var(--admin-primary-soft);
    font-size:13px;
    font-weight:950;
}

.admin-order-customer strong,
.admin-order-customer small{
    display:block;
}

.admin-order-customer small{
    margin-top:3px;
    color:var(--admin-muted);
    font-size:11px;
    font-weight:800;
}

.admin-payment-pill{
    min-height:28px;
    padding:5px 10px;
    display:inline-flex;
    align-items:center;
    border-radius:999px;
    color:var(--admin-muted);
    background:#f1f5f5;
    font-size:11px;
    font-weight:900;
}

.admin-order-actions-menu{
    position:relative;
    display:inline-block;
}

.admin-order-actions-menu summary{
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border:1px solid var(--admin-line);
    border-radius:999px;
    color:var(--admin-primary-dark);
    background:#fff;
    font-size:22px;
    line-height:1;
    cursor:pointer;
    list-style:none;
}

.admin-order-actions-menu summary::-webkit-details-marker{
    display:none;
}

.admin-order-actions-menu[open] summary{
    background:var(--admin-primary-soft);
}

.admin-order-actions-menu > div{
    position:absolute;
    top:44px;
    left:0;
    z-index:20;
    width:310px;
    padding:12px;
    display:grid;
    gap:12px;
    border:1px solid var(--admin-line);
    border-radius:14px;
    background:#fff;
    box-shadow:0 20px 50px rgba(20,60,70,.16);
}

.admin-order-lines.compact{
    min-width:0;
    max-height:120px;
    overflow:auto;
    padding:10px;
    border-radius:12px;
    background:#f8fcfc;
}

.admin-orders-footer{
    padding:13px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    color:var(--admin-muted);
    background:#fbfefe;
    font-size:12px;
    font-weight:900;
}

.admin-orders-footer strong{
    color:var(--admin-primary-dark);
}

.admin-ops-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
}

.admin-ops-grid article{
    min-height:132px;
    padding:18px;
    display:grid;
    gap:10px;
    align-content:start;
    border:1px solid var(--admin-line);
    border-radius:18px;
    background:#fff;
    box-shadow:var(--admin-shadow-soft);
}

.admin-sidebar-brand{
    min-height:104px;
    padding:18px 16px;
    display:grid;
    place-items:center;
    gap:10px;
    text-align:center;
    border:1px solid var(--admin-line);
    border-radius:18px;
    background:rgba(255,255,255,.92);
    box-shadow:var(--admin-shadow-soft);
}

.admin-sidebar-brand img{
    width:58px;
    height:58px;
    display:block;
    object-fit:cover;
    border-radius:50%;
    border:1px solid rgba(210,125,154,.24);
    box-shadow:0 12px 28px rgba(210,125,154,.16);
}

.admin-sidebar-brand strong{
    display:block;
    color:#e06487;
    font-size:28px;
    line-height:1;
    font-weight:950;
    letter-spacing:.5px;
}

.admin-sidebar-brand span{
    display:block;
    margin-top:8px;
    color:var(--admin-muted);
    font-size:12px;
    font-weight:900;
}

.admin-sidebar-logout{
    min-height:54px;
    padding:0 18px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    border:1px solid var(--admin-line);
    border-radius:14px;
    color:var(--admin-ink);
    background:rgba(255,255,255,.92);
    box-shadow:var(--admin-shadow-soft);
    font-size:13px;
    font-weight:900;
}

.admin-sidebar-logout svg{
    color:var(--admin-muted);
}

.admin-sidebar-logout:hover{
    color:var(--admin-primary-dark);
    border-color:var(--admin-line-strong);
}

.admin-standalone-brand{
    min-height:44px;
    padding:7px 12px;
    display:inline-flex;
    align-items:center;
    gap:9px;
    border:1px solid var(--admin-line);
    border-radius:999px;
    background:#fff;
    color:var(--admin-ink);
    box-shadow:var(--admin-shadow-soft);
    font-size:14px;
    font-weight:950;
    direction:ltr;
}

.admin-standalone-brand img{
    width:32px;
    height:32px;
    display:block;
    object-fit:cover;
    border-radius:50%;
    border:1px solid rgba(210,125,154,.24);
}

.admin-routine-requests-page{
    width:min(96%,1420px);
    margin:0 auto;
    padding:28px 0 40px;
    display:grid;
    gap:16px;
}

.admin-routine-requests-head{
    min-height:118px;
    padding:22px 26px;
    display:flex;
    flex-direction:row-reverse;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    border:1px solid var(--admin-line);
    border-radius:18px;
    background:rgba(255,255,255,.96);
    box-shadow:var(--admin-shadow-soft);
}

.admin-routine-requests-head > *{
    direction:rtl;
}

.admin-routine-requests-head > div{
    text-align:right;
}

.admin-routine-requests-title-icon{
    width:46px;
    height:46px;
    margin:0 0 8px auto;
    display:grid;
    place-items:center;
    border-radius:999px;
    color:var(--admin-primary);
    background:var(--admin-primary-soft);
}

.admin-routine-requests-head h1{
    margin:0;
    color:var(--admin-ink);
    font-size:28px;
    line-height:1.25;
    font-weight:950;
}

.admin-routine-requests-head p{
    margin:8px 0 0;
    color:var(--admin-muted);
    font-size:13px;
    font-weight:850;
}

.admin-routine-requests-back{
    min-height:44px;
    padding:0 17px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    border:0;
    border-radius:12px;
    color:#fff;
    background:linear-gradient(135deg,var(--admin-primary),var(--admin-primary-dark));
    box-shadow:0 14px 26px rgba(15,115,128,.22);
    font-size:12px;
    font-weight:950;
    white-space:nowrap;
}

.admin-routine-requests-stats{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
}

.admin-routine-requests-stats article{
    min-height:112px;
    padding:18px;
    display:grid;
    grid-template-columns:50px minmax(0,1fr);
    gap:14px;
    align-items:center;
    border:1px solid var(--admin-line);
    border-radius:16px;
    background:#fff;
    box-shadow:var(--admin-shadow-soft);
}

.admin-routine-requests-stats article > span{
    width:50px;
    height:50px;
    display:grid;
    place-items:center;
    border-radius:999px;
    color:var(--admin-primary);
    background:var(--admin-primary-soft);
}

.admin-routine-requests-stats article > span.warning{
    color:var(--admin-warning);
    background:var(--admin-warning-soft);
}

.admin-routine-requests-stats article > span.complete{
    color:#357f65;
    background:#edf9f3;
}

.admin-routine-requests-stats p{
    margin:0 0 8px;
    color:var(--admin-muted);
    font-size:12px;
    line-height:1.55;
    font-weight:900;
}

.admin-routine-requests-stats strong{
    display:block;
    color:var(--admin-ink);
    font-size:27px;
    line-height:1.1;
    font-weight:950;
}

.admin-routine-requests-stats small{
    display:block;
    margin-top:7px;
    color:var(--admin-muted);
    font-size:11px;
    font-weight:850;
}

.admin-routine-requests-filterbar{
    padding:14px;
    display:grid;
    grid-template-columns:minmax(230px,1.6fr) repeat(3,minmax(140px,1fr)) auto;
    gap:10px;
    border:1px solid var(--admin-line);
    border-radius:16px;
    background:#fff;
    box-shadow:var(--admin-shadow-soft);
}

.admin-routine-requests-search,
.admin-routine-requests-filterbar select,
.admin-routine-requests-filterbar button{
    min-height:44px;
    border:1px solid var(--admin-line);
    border-radius:12px;
    color:var(--admin-ink);
    background:#fff;
    font-size:12px;
    font-weight:900;
}

.admin-routine-requests-search{
    padding:0 12px;
    display:flex;
    align-items:center;
    gap:8px;
}

.admin-routine-requests-search svg,
.admin-routine-requests-filterbar button svg{
    color:var(--admin-primary);
}

.admin-routine-requests-search input{
    width:100%;
    min-width:0;
    border:0;
    outline:0;
    color:var(--admin-ink);
    background:transparent;
}

.admin-routine-requests-filterbar select{
    padding:0 12px;
    outline:0;
}

.admin-routine-requests-filterbar button{
    padding:0 14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    cursor:pointer;
}

.admin-routine-requests-table-card{
    border:1px solid var(--admin-line);
    border-radius:16px;
    background:#fff;
    box-shadow:var(--admin-shadow-soft);
    overflow:hidden;
}

.admin-routine-requests-table-wrap{
    width:100%;
    overflow:auto;
}

.admin-routine-requests-table{
    width:100%;
    min-width:980px;
    border-collapse:collapse;
}

.admin-routine-requests-table th,
.admin-routine-requests-table td{
    padding:14px 16px;
    border-bottom:1px solid rgba(15,115,128,.10);
    color:var(--admin-ink);
    text-align:right;
    vertical-align:middle;
    font-size:13px;
    white-space:nowrap;
}

.admin-routine-requests-table th{
    color:#486373;
    background:#f7fcfc;
    font-size:12px;
    font-weight:950;
}

.admin-routine-requests-table tbody tr:hover{
    background:rgba(15,115,128,.035);
}

.admin-routine-customer-cell{
    display:flex;
    align-items:center;
    gap:11px;
}

.admin-routine-customer-cell > span{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border-radius:999px;
    color:#fff;
    background:linear-gradient(135deg,var(--admin-primary),#6fa9bd);
    font-size:13px;
    font-weight:950;
    flex:0 0 auto;
}

.admin-routine-customer-cell strong,
.admin-routine-customer-cell small,
.admin-routine-requests-table td small{
    display:block;
}

.admin-routine-customer-cell strong,
.admin-routine-skin-label{
    color:var(--admin-ink);
    font-size:13px;
    font-weight:950;
}

.admin-routine-customer-cell small,
.admin-routine-requests-table td small{
    margin-top:4px;
    color:var(--admin-muted);
    font-size:11px;
    font-weight:850;
}

.admin-routine-request-status{
    min-height:28px;
    padding:5px 12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    font-size:11px;
    font-weight:950;
}

.admin-routine-request-status.is-new{
    color:#357f65;
    background:#edf9f3;
}

.admin-routine-request-status.is-review{
    color:var(--admin-warning);
    background:var(--admin-warning-soft);
}

.admin-routine-request-status.is-complete{
    color:var(--admin-primary-dark);
    background:var(--admin-primary-soft);
}

.admin-routine-request-status.is-muted{
    color:var(--admin-muted);
    background:#f1f5f5;
}

.admin-routine-request-actions{
    display:inline-flex;
    align-items:center;
    gap:8px;
}

.admin-routine-request-menu{
    position:relative;
    display:inline-block;
}

.admin-routine-request-menu summary,
.admin-routine-view-action{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border:1px solid var(--admin-line);
    border-radius:11px;
    color:var(--admin-primary-dark);
    background:#fff;
    cursor:pointer;
    list-style:none;
}

.admin-routine-view-action{
    color:var(--admin-primary);
    border-color:rgba(15,115,128,.22);
    background:#f9fefe;
}

.admin-routine-request-menu summary::-webkit-details-marker{
    display:none;
}

.admin-routine-request-menu[open] summary{
    background:var(--admin-primary-soft);
}

.admin-routine-request-menu > div{
    position:absolute;
    top:46px;
    left:0;
    z-index:25;
    width:290px;
    padding:12px;
    display:grid;
    gap:8px;
    border:1px solid var(--admin-line);
    border-radius:14px;
    background:#fff;
    box-shadow:0 20px 50px rgba(20,60,70,.16);
}

.admin-routine-request-menu p{
    margin:0;
    color:var(--admin-muted);
    line-height:1.7;
    white-space:normal;
}

.admin-routine-request-menu strong{
    color:var(--admin-ink);
}

.admin-routine-requests-footer{
    padding:13px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    color:var(--admin-muted);
    background:#fbfefe;
    font-size:12px;
    font-weight:900;
}

.admin-routine-requests-footer div{
    display:flex;
    align-items:center;
    gap:8px;
}

.admin-routine-requests-footer button,
.admin-routine-requests-footer strong{
    min-width:32px;
    height:32px;
    display:grid;
    place-items:center;
    border:1px solid var(--admin-line);
    border-radius:10px;
    color:var(--admin-primary-dark);
    background:#fff;
}

.admin-routine-requests-footer strong{
    color:#fff;
    background:var(--admin-primary);
}

.admin-ops-grid article > span{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:14px;
    color:var(--admin-primary);
    background:var(--admin-primary-soft);
}

.admin-ops-grid strong{
    color:var(--admin-ink);
    font-size:27px;
    font-weight:950;
}

.admin-ops-grid p{
    margin:0;
    color:var(--admin-muted);
    font-size:13px;
    font-weight:850;
}

.admin-status-list,
.admin-stock-alert-list{
    display:grid;
    gap:10px;
}

.admin-status-list div,
.admin-stock-alert-list div{
    min-height:48px;
    padding:11px 12px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    border:1px solid rgba(15,115,128,.10);
    border-radius:13px;
    background:#fff;
}

.admin-status-list span,
.admin-stock-alert-list span{
    color:var(--admin-muted);
    font-size:13px;
    font-weight:850;
}

.admin-status-list strong,
.admin-stock-alert-list strong{
    color:var(--admin-ink);
    font-weight:950;
}

.admin-address-cell{
    max-width:260px;
    color:var(--admin-muted);
}

.admin-count-pill,
.admin-status-pill{
    min-height:28px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:4px 10px;
    border-radius:999px;
    color:var(--admin-primary-dark);
    background:var(--admin-primary-soft);
    font-size:12px;
    font-weight:950;
}

.admin-order-lines{
    min-width:260px;
    display:grid;
    gap:6px;
}

.admin-order-lines span,
.admin-order-lines small{
    display:block;
    color:var(--admin-muted);
    line-height:1.6;
}

.admin-order-lines b{
    color:var(--admin-primary-dark);
}

.admin-order-status-form{
    min-width:250px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px;
    align-items:center;
}

.admin-order-status-form select{
    min-height:38px;
    border:1px solid var(--admin-line);
    border-radius:11px;
    padding:0 10px;
    color:var(--admin-ink);
    background:#fff;
    outline:0;
}

.admin-order-status-form button{
    min-height:38px;
    border:0;
    border-radius:11px;
    padding:0 14px;
    color:#fff;
    background:var(--admin-primary);
    font:inherit;
    font-weight:950;
    cursor:pointer;
}

.admin-chat-layout{
    display:grid;
    grid-template-columns:360px minmax(0,1fr);
    gap:16px;
    align-items:stretch;
}

.admin-chat-list,
.admin-chat-window{
    min-height:620px;
    padding:18px;
    border:1px solid var(--admin-line);
    border-radius:18px;
    background:#fff;
    box-shadow:var(--admin-shadow-soft);
}

.admin-start-chat-form{
    display:grid;
    gap:10px;
    margin-bottom:16px;
    padding:12px;
    border:1px solid rgba(15,115,128,.12);
    border-radius:14px;
    background:var(--admin-surface-soft);
}

.admin-start-chat-form select,
.admin-start-chat-form input,
.admin-chat-reply-form textarea{
    width:100%;
    min-height:42px;
    border:1px solid var(--admin-line);
    border-radius:12px;
    padding:10px 12px;
    color:var(--admin-ink);
    background:#fff;
    font:inherit;
    outline:0;
}

.admin-start-chat-form button,
.admin-chat-reply-form button{
    min-height:42px;
    border:0;
    border-radius:12px;
    color:#fff;
    background:linear-gradient(135deg,var(--admin-primary),var(--admin-primary-dark));
    font:inherit;
    font-weight:950;
    cursor:pointer;
}

.admin-chat-thread-list{
    display:grid;
    gap:9px;
}

.admin-chat-thread{
    min-height:66px;
    padding:10px;
    display:grid;
    grid-template-columns:44px minmax(0,1fr) auto;
    gap:10px;
    align-items:center;
    border:1px solid rgba(15,115,128,.10);
    border-radius:14px;
    background:#fff;
    transition:.18s ease;
}

.admin-chat-thread:hover,
.admin-chat-thread.active{
    border-color:var(--admin-line-strong);
    background:var(--admin-primary-soft);
}

.admin-chat-thread > span,
.admin-chat-window header > span{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border-radius:999px;
    color:#fff;
    background:linear-gradient(135deg,var(--admin-primary),#6fa9bd);
    font-weight:950;
}

.admin-chat-thread strong{
    display:block;
    color:var(--admin-ink);
    font-size:13px;
}

.admin-chat-thread small{
    display:block;
    margin-top:4px;
    color:var(--admin-muted);
    line-height:1.5;
}

.admin-chat-thread b{
    min-width:22px;
    height:22px;
    display:grid;
    place-items:center;
    border-radius:999px;
    color:#fff;
    background:var(--admin-danger);
    font-size:11px;
}

.admin-chat-window{
    display:grid;
    grid-template-rows:auto minmax(0,1fr) auto;
    gap:14px;
}

.admin-chat-window header{
    display:flex;
    align-items:center;
    gap:12px;
    padding-bottom:14px;
    border-bottom:1px solid rgba(15,115,128,.10);
}

.admin-chat-window h2{
    margin:0 0 5px;
    color:var(--admin-ink);
    font-size:20px;
    font-weight:950;
}

.admin-chat-window p{
    margin:0;
}

.admin-message-list{
    overflow:auto;
    display:grid;
    align-content:start;
    gap:10px;
    padding:4px;
}

.admin-message{
    max-width:min(78%,620px);
    justify-self:start;
    padding:11px 13px;
    border:1px solid var(--admin-line);
    border-radius:14px 14px 14px 4px;
    color:var(--admin-ink);
    background:var(--admin-surface-soft);
}

.admin-message.mine{
    justify-self:end;
    border-color:rgba(15,115,128,.22);
    border-radius:14px 14px 4px 14px;
    color:#fff;
    background:linear-gradient(135deg,var(--admin-primary),var(--admin-primary-dark));
}

.admin-message p{
    line-height:1.7;
}

.admin-message span{
    display:block;
    margin-top:6px;
    color:inherit;
    opacity:.72;
    font-size:11px;
}

.admin-chat-reply-form{
    display:grid;
    grid-template-columns:minmax(0,1fr) 110px;
    gap:10px;
    align-items:end;
}

.admin-chat-reply-form textarea{
    min-height:64px;
    resize:vertical;
}

.admin-chat-empty{
    min-height:100%;
    display:grid;
    place-items:center;
    align-content:center;
    gap:10px;
    text-align:center;
    color:var(--admin-muted);
}

.admin-chat-empty .admin-icon{
    width:46px;
    height:46px;
    color:var(--admin-primary);
}

.admin-chat-empty h2{
    margin:0;
    color:var(--admin-ink);
}

@media(max-width:1180px){
    .favorites-grid,
    .admin-ops-grid,
    .admin-products-stats,
    .admin-ready-stats,
    .admin-customers-stats,
    .admin-routine-requests-stats,
    .admin-chat-layout{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .admin-products-filterbar,
    .admin-ready-filterbar,
    .admin-customers-filterbar,
    .admin-routine-requests-filterbar{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:760px){
    .settings-head,
    .favorites-head,
    .orders-head,
    .admin-sections-head,
    .admin-products-head,
    .admin-ready-head,
    .admin-customers-head,
    .admin-routine-requests-head{
        align-items:flex-start;
        flex-direction:column;
    }

    .settings-grid,
    .favorites-grid,
    .admin-ops-grid,
    .admin-products-stats,
    .admin-products-filterbar,
    .admin-ready-stats,
    .admin-ready-filterbar,
    .admin-customers-stats,
    .admin-customers-filterbar,
    .admin-routine-requests-stats,
    .admin-routine-requests-filterbar,
    .admin-sections-forms{
        grid-template-columns:1fr;
    }

    .admin-sections-head,
    .admin-sections-table-head,
    .admin-products-head,
    .admin-ready-head,
    .admin-customers-head,
    .admin-routine-requests-head{
        display:grid;
        justify-items:start;
    }

    .admin-sections-add,
    .admin-products-head-actions,
    .admin-products-add,
    .admin-products-secondary,
    .admin-ready-add,
    .admin-customers-add,
    .admin-routine-requests-back{
        width:100%;
    }

    .admin-products-head-actions{
        display:grid;
    }

    .favorite-product-actions,
    .order-history-items div{
        grid-template-columns:1fr;
    }

    .order-history-top,
    .order-history-card footer{
        align-items:flex-start;
        flex-direction:column;
    }

    .community-profile-strip{
        align-items:flex-start;
        flex-direction:column;
    }

    .community-profile-strip-actions{
        justify-content:flex-start;
    }

    .community-filter-toolbar,
    .community-filter-toolbar .community-sort,
    .community-filter-toolbar button,
    .community-tabs{
        width:100%;
        min-width:0;
        max-width:100%;
    }

    .admin-chat-layout,
    .admin-chat-reply-form{
        grid-template-columns:1fr;
    }

    .admin-chat-list,
    .admin-chat-window{
        min-height:auto;
    }

.admin-message{
        max-width:100%;
    }
}

/* =========================
   RESPONSIVE POLISH
========================= */

body,
.fay-page,
.product-detail-page,
.catalog-page,
.ready-routines-page,
.profile-page,
.community-page,
.orders-page,
.admin-modern-body{
    max-width:100%;
}

img,
video,
canvas,
svg{
    max-width:100%;
}

.site-nav-links{
    direction:rtl;
}

.site-navbar,
.site-nav-start,
.site-nav-actions,
.catalog-shell,
.product-detail-shell,
.ready-routines-page,
.profile-dashboard-grid,
.community-main,
.orders-shell,
.admin-modern-shell,
.admin-modern-content{
    min-width:0;
}

.admin-sections-table-wrap,
.admin-products-table-wrap,
.admin-ready-table-wrap,
.admin-customers-table-wrap,
.admin-orders-table-wrap,
.admin-routine-requests-table-wrap,
.table-wrap{
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

@media(max-width:1180px){
    .product-detail-hero,
    .product-detail-lower{
        grid-template-columns:1fr;
    }

    .product-gallery-panel{
        min-height:430px;
    }

    .main-product-image img{
        max-height:360px;
    }

    .suggested-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:900px){
    .site-nav-links{
        justify-content:center;
        scroll-padding-inline:12px;
    }

    .site-nav-links .fay-nav-link:first-child{
        margin-inline-start:0;
    }

    .catalog-hero-decor .catalog-hero-visual,
    .ready-routines-hero,
    .profile-hero-card,
    .profile-showcase-card{
        min-height:auto;
    }

    .profile-dashboard-grid,
    .profile-hero-card,
    .profile-showcase-card,
    .community-detail-layout,
    .community-profile-shell,
    .orders-layout{
        grid-template-columns:1fr;
    }

    .profile-dashboard-grid{
        grid-template-areas:
            "main"
            "side";
    }

    .profile-topbar{
        grid-template-columns:1fr auto;
        gap:14px;
        padding:12px 18px;
    }

    .profile-nav{
        grid-column:1 / -1;
        justify-content:flex-start;
        overflow-x:auto;
        padding-bottom:6px;
        scrollbar-width:none;
    }

    .profile-nav::-webkit-scrollbar{
        display:none;
    }

    .profile-search{
        display:none;
    }

    .admin-modern-shell{
        width:min(94%,760px);
    }

    .admin-menu{
        display:flex;
        overflow-x:auto;
        scroll-padding-inline:10px;
        scrollbar-width:none;
    }

    .admin-menu::-webkit-scrollbar{
        display:none;
    }

    .admin-menu-btn,
    .admin-menu-link{
        min-width:max-content;
    }
}

@media(max-width:640px){
    .site-navbar,
    .fay-navbar.site-navbar{
        padding:10px;
        grid-template-columns:minmax(0,1fr) auto;
    }

    .site-nav-start{
        overflow:hidden;
    }

    .site-logo{
        min-width:0;
    }

    .site-logo-text strong{
        font-size:20px;
    }

    .site-logo-text small{
        font-size:11px;
    }

    .site-nav-actions{
        gap:6px;
    }

    .site-nav-links{
        overflow:visible;
        flex-wrap:wrap;
        justify-content:center;
        row-gap:0;
        column-gap:14px;
        padding-top:2px;
        padding-bottom:0;
    }

    .site-nav-links .fay-nav-link{
        padding:6px 0 9px;
        font-size:12px;
    }

    .site-navbar .fay-icon-btn,
    .site-avatar-link{
        width:36px;
        height:36px;
        border-radius:11px;
    }

    .site-notification-btn span,
    .site-cart-btn span{
        top:-4px;
        right:-4px;
    }

    .site-profile-menu{
        position:fixed;
        top:68px;
        right:10px;
        left:10px;
        width:auto;
        max-height:calc(100vh - 84px);
        border-radius:16px;
    }

    .skinai-notification-panel{
        position:fixed;
        top:68px;
        right:10px;
        left:10px;
        width:auto;
    }

    .home-hero-copy h1,
    .catalog-hero-copy h1,
    .ready-routines-hero h1,
    .routine-dashboard-hero h1,
    .profile-title-row h1,
    .community-profile-info h1,
    .orders-head h1,
    .admin-sections-head h1,
    .admin-products-head h1,
    .admin-ready-head h1,
    .admin-customers-head h1,
    .admin-orders-head h1,
    .admin-routine-requests-head h1{
        font-size:clamp(24px,8vw,32px);
        line-height:1.35;
        overflow-wrap:anywhere;
    }

    .home-hero-copy p,
    .catalog-hero-copy p,
    .ready-routines-hero p,
    .profile-title-row p,
    .orders-head p{
        font-size:13px;
        line-height:1.8;
    }

    .catalog-hero-product{
        width:96px;
        height:138px;
    }

    .catalog-hero-product-2{
        right:0;
    }

    .catalog-hero-product-3{
        left:0;
    }

    .product-detail-shell{
        width:min(94%,560px);
        margin-bottom:24px;
    }

    .product-breadcrumb{
        overflow-x:auto;
        white-space:nowrap;
        padding-bottom:4px;
    }

    .product-detail-hero{
        gap:20px;
    }

    .product-info-panel{
        padding-top:0;
    }

    .product-info-panel h1{
        margin-top:14px;
        font-size:24px;
    }

    .product-benefits,
    .variant-options,
    .suggested-grid{
        grid-template-columns:1fr;
    }

    .product-price-row,
    .suggested-head,
    .routine-progress-actions{
        align-items:stretch;
        flex-direction:column;
    }

    .product-gallery-panel{
        min-height:360px;
        grid-template-columns:1fr;
    }

    .gallery-thumbs{
        order:2;
        display:flex;
        overflow-x:auto;
        padding:0 16px 18px;
    }

    .gallery-thumbs button{
        flex:0 0 62px;
        height:72px;
    }

    .main-product-image,
    .product-gallery-panel.single-image .main-product-image{
        padding:28px 22px 54px;
    }

    .main-product-image img{
        max-height:280px;
    }

    .gallery-counter{
        bottom:10px;
    }

    .reviews-card,
    .description-card,
    .suggested-card,
    .ready-routine-card,
    .ready-routines-empty,
    .profile-card,
    .profile-side-nav,
    .profile-upgrade-card,
    .profile-side-card,
    .orders-head,
    .order-history-card,
    .admin-sidebar-card,
    .admin-mini-panel,
    .section-card,
    .table-card,
    .form-box{
        border-radius:14px;
    }

    .ready-routines-page,
    .routine-dashboard,
    .profile-dashboard-grid,
    .orders-shell,
    .admin-modern-shell{
        width:min(94%,560px);
    }

    .ready-routines-hero,
    .routine-dashboard-hero,
    .admin-sections-head,
    .admin-products-head,
    .admin-ready-head,
    .admin-customers-head,
    .admin-orders-head,
    .admin-routine-requests-head{
        padding:20px 16px;
    }

    .ready-routine-card{
        padding:16px;
    }

    .ready-routine-items{
        grid-template-columns:1fr;
    }

    .community-composer-card,
    .community-feed-card,
    .community-profile-card,
    .community-profile-strip{
        padding:16px;
    }

    .community-feed-head,
    .community-profile-actions,
    .community-profile-strip-actions,
    .order-history-card footer,
    .admin-orders-footer,
    .admin-products-footer,
    .admin-customers-footer,
    .admin-routine-requests-footer{
        align-items:stretch;
        flex-direction:column;
    }

    .admin-modern-sidebar{
        gap:10px;
    }

    .admin-sidebar-brand{
        padding:14px;
    }

    .admin-overview-metric,
    .stat-card{
        min-height:88px;
        padding:14px;
    }

    .admin-products-table,
    .admin-ready-table,
    .admin-customers-table,
    .admin-orders-table,
    .admin-routine-requests-table,
    .admin-sections-table,
    .admin-sub-sections-table,
    .table-wrap table{
        min-width:720px;
    }
}

@media(max-width:420px){
    .site-logo-mark{
        width:34px;
        height:34px;
    }

    .site-logo-text small{
        display:none;
    }

    .site-navbar .site-inbox-btn{
        display:none !important;
    }

    .site-nav-links{
        gap:14px;
    }

    .site-nav-links .fay-nav-link{
        font-size:12px;
    }

    .home-hero-copy h1{
        font-size:32px;
    }

    .catalog-product-card,
    .favorite-product-card,
    .order-history-card,
    .ready-routine-card,
    .community-feed-card{
        border-radius:12px;
    }

    .catalog-product-media{
        height:140px;
    }

    .catalog-card-actions,
    .product-buy-row,
    .catalog-confirm-row,
    .routine-score-layout{
        grid-template-columns:1fr;
    }

    .detail-wish-btn{
        order:2;
    }

    .detail-add-btn{
        order:1;
    }

    .admin-modern-shell,
    .catalog-shell,
    .product-detail-shell,
    .ready-routines-page,
    .profile-dashboard-grid,
    .orders-shell{
        width:calc(100% - 20px);
    }
}

/* ═══ My Routine v2 — صفحة روتيني ═══ */
.my-routine-v2-body{
    background:
        radial-gradient(circle at 12% 6%, rgba(232,247,244,.85), transparent 28%),
        linear-gradient(180deg, #f8fcfb 0%, #eef8f7 48%, #f5fafa 100%);
    min-height:100vh;
}

.my-routine-page.routine-dashboard-page{
    width:min(96%, 1180px);
}

.my-routine-hero{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    padding:26px 28px;
    margin-bottom:20px;
    border-radius:22px;
    border:1px solid var(--routine-border);
    background:
        radial-gradient(circle at 100% 0%, rgba(47,127,143,.08), transparent 42%),
        linear-gradient(135deg, #fff 0%, #f4fbfb 100%);
    box-shadow:var(--routine-shadow);
}

.my-routine-hero-copy{
    flex:1 1 280px;
    min-width:0;
}

.my-routine-hero-copy > span{
    display:inline-block;
    margin-bottom:8px;
    font-size:12px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--routine-primary);
}

.my-routine-hero h1{
    margin:0 0 10px;
    font-size:clamp(1.6rem, 3vw, 2.15rem);
    font-weight:950;
    line-height:1.2;
    color:var(--routine-text);
}

.my-routine-hero-copy > p{
    margin:0;
    max-width:560px;
    font-size:15px;
    line-height:1.7;
    color:var(--routine-muted);
}

.my-routine-hero-status{
    flex:0 0 auto;
    display:flex;
    align-items:flex-start;
}

.my-routine-status-pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:9px 16px;
    border-radius:999px;
    font-size:13px;
    font-weight:800;
}

.my-routine-status-pill .routine-icon{
    width:16px;
    height:16px;
}

.my-routine-status-pill.is-ready{
    color:#1f6b52;
    background:rgba(47,143,110,.12);
}

.my-routine-status-pill.is-waiting{
    color:#9a6b1f;
    background:rgba(196,150,60,.14);
}

.my-routine-status-pill.is-empty{
    color:#5f737a;
    background:rgba(103,124,131,.12);
}

.routine-dashboard.my-routine-layout{
    gap:20px;
}

.my-routine-primary-panel,
.my-routine-secondary-panel{
    padding:22px 24px 24px;
}

.my-routine-secondary-panel{
    margin-top:8px;
    border-top:1px solid var(--routine-border);
    padding-top:24px;
}

.my-routine-panel-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:18px;
    padding:7px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
    color:var(--routine-primary-dark);
    background:linear-gradient(135deg, #ecf8f6, #f7fcfb);
}

.my-routine-panel-badge.is-secondary{
    color:#5f737a;
    background:#f3f6f7;
}

.my-routine-panel-badge .routine-icon{
    width:15px;
    height:15px;
}

.my-routine-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:44px;
    padding:0 18px;
    border:none;
    border-radius:14px;
    font-size:14px;
    font-weight:800;
    text-decoration:none;
    cursor:pointer;
    transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.my-routine-btn:hover{
    transform:translateY(-1px);
}

.my-routine-btn-primary{
    color:#fff;
    background:linear-gradient(135deg, var(--routine-primary), var(--routine-primary-dark));
    box-shadow:0 10px 24px rgba(36,106,120,.22);
}

.my-routine-btn-ghost{
    color:var(--routine-text);
    background:#fff;
    border:1px solid var(--routine-border-strong);
}

/* انتظار الاستشارة */
.my-routine-waiting{
    display:grid;
    gap:16px;
    padding:8px 0 4px;
}

.my-routine-waiting-icon{
    width:56px;
    height:56px;
    display:grid;
    place-items:center;
    border-radius:18px;
    color:var(--routine-primary);
    background:linear-gradient(135deg, #ecf8f6, #f7fcfb);
}

.my-routine-waiting-icon .routine-icon{
    width:28px;
    height:28px;
}

.my-routine-waiting h2{
    margin:0;
    font-size:20px;
    font-weight:950;
}

.my-routine-waiting-lead{
    margin:0;
    max-width:640px;
    font-size:15px;
    line-height:1.75;
    color:var(--routine-muted);
}

.my-routine-timeline{
    list-style:none;
    margin:8px 0 0;
    padding:0;
    display:grid;
    gap:0;
}

.my-routine-timeline-step{
    display:grid;
    grid-template-columns:28px minmax(0, 1fr);
    gap:12px;
    align-items:start;
    position:relative;
    padding:0 0 18px;
}

.my-routine-timeline-step:last-child{
    padding-bottom:0;
}

.my-routine-timeline-step:not(:last-child)::before{
    content:"";
    position:absolute;
    top:28px;
    right:13px;
    bottom:0;
    width:2px;
    background:#dce9ea;
}

.my-routine-timeline-step.is-done:not(:last-child)::before{
    background:linear-gradient(180deg, #58a892 0%, #dce9ea 100%);
}

.my-routine-timeline-step.is-active:not(:last-child)::before{
    background:linear-gradient(180deg, #d4b06a 0%, #dce9ea 100%);
}

.my-routine-timeline-dot{
    width:28px;
    height:28px;
    border-radius:50%;
    border:2px solid #d5e4e6;
    background:#f5fbfb;
    z-index:1;
}

.my-routine-timeline-step.is-done .my-routine-timeline-dot{
    border-color:#58a892;
    background:#e8f6f1;
    box-shadow:inset 0 0 0 5px #58a892;
}

.my-routine-timeline-step.is-active .my-routine-timeline-dot{
    border-color:#d4b06a;
    background:#fff8ea;
    box-shadow:0 0 0 4px rgba(212,176,106,.18);
}

.my-routine-timeline-label{
    padding-top:4px;
    font-size:14px;
    font-weight:800;
    color:var(--routine-text);
}

.my-routine-timeline-step.is-pending .my-routine-timeline-label{
    color:#8aa0a7;
    font-weight:700;
}

.my-routine-waiting-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:4px;
}

/* روتين معتمد */
.my-routine-ready-head{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom:18px;
}

.my-routine-ready-head h2{
    margin:0 0 4px;
    font-size:20px;
    font-weight:950;
}

.my-routine-ready-head p{
    margin:0;
    color:var(--routine-muted);
    font-size:14px;
}

.my-routine-ready-date{
    display:inline-flex;
    align-items:center;
    padding:7px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
    color:var(--routine-primary-dark);
    background:#ecf8f6;
}

.my-routine-specialist-note{
    display:grid;
    grid-template-columns:auto minmax(0, 1fr);
    gap:12px;
    margin-bottom:20px;
    padding:14px 16px;
    border-radius:16px;
    border:1px solid rgba(47,127,143,.14);
    background:linear-gradient(135deg, #f7fcfb, #fff);
}

.my-routine-specialist-note .routine-icon{
    width:20px;
    height:20px;
    color:var(--routine-primary);
}

.my-routine-specialist-note strong{
    display:block;
    margin-bottom:4px;
    font-size:14px;
}

.my-routine-specialist-note p{
    margin:0;
    font-size:13px;
    line-height:1.65;
    color:var(--routine-muted);
}

.my-routine-time-block{
    margin-bottom:22px;
}

.my-routine-time-block:last-child{
    margin-bottom:0;
}

.my-routine-time-head{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:14px;
    padding-bottom:10px;
    border-bottom:1px solid var(--routine-border);
}

.my-routine-time-head .routine-icon{
    width:22px;
    height:22px;
    color:var(--routine-primary);
}

.my-routine-time-head h3{
    margin:0 0 2px;
    font-size:16px;
    font-weight:950;
}

.my-routine-time-head span{
    font-size:13px;
    color:var(--routine-muted);
}

.my-routine-steps-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
    gap:14px;
}

.my-routine-steps-grid.is-compact{
    grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
}

.my-routine-step-card{
    display:grid;
    gap:10px;
    padding:16px;
    border-radius:18px;
    border:1px solid var(--routine-border);
    background:#fff;
    transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.my-routine-step-card:hover{
    border-color:var(--routine-border-strong);
    box-shadow:0 12px 28px rgba(33,91,104,.08);
}

.my-routine-step-card.is-done-today{
    border-color:rgba(47,143,110,.28);
    background:linear-gradient(180deg, #f8fdfb 0%, #fff 100%);
}

.my-routine-step-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
}

.my-routine-step-num{
    display:inline-grid;
    place-items:center;
    min-width:28px;
    height:28px;
    padding:0 8px;
    border-radius:9px;
    font-size:12px;
    font-weight:900;
    color:var(--routine-primary-dark);
    background:#ecf8f6;
}

.my-routine-step-time{
    font-size:11px;
    font-weight:800;
    color:#8aa0a7;
}

.my-routine-step-image{
    width:100%;
    aspect-ratio:4/3;
    display:grid;
    place-items:center;
    overflow:hidden;
    border-radius:14px;
    background:linear-gradient(135deg, #f3f8f8, #eef5f5);
}

.my-routine-step-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.my-routine-step-image .routine-icon{
    width:34px;
    height:34px;
    color:#9eb4ba;
}

.my-routine-step-card h4{
    margin:0;
    font-size:15px;
    font-weight:900;
    line-height:1.4;
}

.my-routine-step-title,
.my-routine-step-instructions,
.my-routine-step-note{
    margin:0;
    font-size:13px;
    line-height:1.6;
    color:var(--routine-muted);
}

.my-routine-step-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-top:4px;
}

.my-routine-step-tag{
    display:inline-flex;
    align-items:center;
    padding:5px 10px;
    border-radius:999px;
    font-size:11px;
    font-weight:800;
}

.my-routine-step-tag.is-required{
    color:#1f6b52;
    background:rgba(47,143,110,.12);
}

.my-routine-step-tag.is-optional{
    color:#7a8790;
    background:#f1f5f6;
}

.my-routine-cart-form{
    display:grid;
    gap:14px;
    margin-top:22px;
    padding-top:18px;
    border-top:1px solid var(--routine-border);
}

.my-routine-optional-list{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px 14px;
    font-size:13px;
    color:var(--routine-muted);
}

/* حالة فارغة */
.my-routine-empty{
    display:grid;
    gap:12px;
    justify-items:center;
    text-align:center;
    padding:36px 20px;
    border-radius:18px;
    border:1px dashed var(--routine-border-strong);
    background:linear-gradient(180deg, #fbfeff 0%, #f7fbfb 100%);
}

.my-routine-empty-icon{
    width:64px;
    height:64px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:var(--routine-primary);
    background:#ecf8f6;
}

.my-routine-empty-icon .routine-icon{
    width:30px;
    height:30px;
}

.my-routine-empty h2{
    margin:0;
    font-size:18px;
    font-weight:950;
}

.my-routine-empty p{
    margin:0;
    max-width:420px;
    font-size:14px;
    line-height:1.7;
    color:var(--routine-muted);
}

/* روتين شخصي */
.my-routine-time-block.is-compact{
    margin-bottom:16px;
}

.my-routine-step-card.is-personal{
    gap:8px;
}

.my-routine-step-price{
    font-size:14px;
    color:var(--routine-primary-dark);
}

.my-routine-personal-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:16px;
}

.my-routine-personal-empty{
    display:grid;
    gap:14px;
}

.my-routine-personal-empty > p{
    margin:0;
    color:var(--routine-muted);
}

/* الشريط الجانبي */
.my-routine-aside-card{
    display:grid;
    gap:10px;
    padding:18px;
    border-radius:18px;
    border:1px solid var(--routine-border);
    background:#fff;
    box-shadow:var(--routine-shadow);
}

.my-routine-aside-card h3{
    margin:0;
    font-size:15px;
    font-weight:950;
}

.my-routine-aside-card p{
    margin:0;
    font-size:13px;
    line-height:1.65;
    color:var(--routine-muted);
}

.my-routine-fay-mini{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:50%;
    font-size:18px;
    font-weight:950;
    color:var(--routine-primary-dark);
    background:linear-gradient(135deg, #ecf8f6, #dff3f0);
}

.my-routine-aside-card.is-tip{
    background:linear-gradient(160deg, #fffdf8 0%, #fff 100%);
    border-color:rgba(212,176,106,.24);
}

.my-routine-aside-card.is-tip .routine-icon{
    width:20px;
    height:20px;
    color:#b8892f;
}

.my-routine-aside-card.is-alert{
    border-color:rgba(196,120,80,.28);
    background:linear-gradient(160deg, #fff9f5 0%, #fff 100%);
}

.my-routine-aside-card .my-routine-btn{
    width:100%;
    margin-top:4px;
}

.my-routine-how-list{
    margin:0;
    padding-right:18px;
    display:grid;
    gap:8px;
    font-size:13px;
    font-weight:800;
    color:var(--routine-text);
}

.my-routine-commitment-score{
    display:block;
    margin:6px 0;
    font-size:34px;
    line-height:1;
    color:var(--routine-primary-dark);
}

@media (max-width:900px){
    .my-routine-hero{
        padding:22px 20px;
    }

    .my-routine-hero-status{
        width:100%;
    }

    .my-routine-steps-grid,
    .my-routine-steps-grid.is-compact{
        grid-template-columns:1fr;
    }
}

@media (max-width:640px){
    .my-routine-primary-panel,
    .my-routine-secondary-panel{
        padding:18px 16px;
    }
}

/* ═══ Admin Consultation Files ═══ */
.admin-consultation-files-body{
    background:linear-gradient(180deg,#f4fbfb 0%,#e8f6f5 100%);
}

.admin-consultation-files-page,
.admin-consultation-review-page{
    width:min(96%,1280px);
    margin:0 auto;
    padding:24px 20px 48px;
    display:grid;
    gap:16px;
}

.admin-consultation-files-head,
.admin-consultation-review-head{
    min-height:118px;
    padding:22px 26px;
    display:flex;
    flex-direction:row;
    align-items:flex-start;
    justify-content:flex-start;
    gap:18px;
    border:1px solid var(--admin-line);
    border-radius:18px;
    background:rgba(255,255,255,.96);
    box-shadow:var(--admin-shadow-soft);
}

.admin-consultation-files-back,
.admin-consultation-review-back{
    order:-1;
    flex:0 0 auto;
}

.admin-consultation-files-title,
.admin-consultation-review-head-main{
    direction:rtl;
    text-align:right;
    flex:1 1 auto;
    min-width:0;
}

.admin-consultation-review-badges{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-inline-start:auto;
    align-items:flex-start;
}

.admin-consultation-files-title-icon{
    width:46px;
    height:46px;
    margin:0 0 10px auto;
    display:grid;
    place-items:center;
    border-radius:999px;
    color:var(--admin-primary);
    background:var(--admin-primary-soft);
}

.admin-consultation-files-eyebrow{
    display:inline-block;
    margin-bottom:6px;
    color:var(--admin-primary);
    font-size:11px;
    font-weight:900;
    letter-spacing:.04em;
}

.admin-consultation-files-title h1,
.admin-consultation-review-head-main h1{
    margin:0;
    font-size:clamp(1.45rem,2.8vw,1.85rem);
    line-height:1.25;
    font-weight:950;
    color:var(--admin-ink);
}

.admin-consultation-files-title p,
.admin-consultation-review-head-main p{
    margin:8px 0 0;
    max-width:58ch;
    color:var(--admin-muted);
    font-size:13px;
    line-height:1.65;
    font-weight:850;
}

.admin-consultation-files-back,
.admin-consultation-review-back{
    min-height:44px;
    padding:0 17px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    border:0;
    border-radius:12px;
    color:#fff;
    text-decoration:none;
    background:linear-gradient(135deg,var(--admin-primary),var(--admin-primary-dark));
    box-shadow:0 14px 26px rgba(15,115,128,.22);
    font-size:12px;
    font-weight:950;
    white-space:nowrap;
}

.admin-consultation-files-stats{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:12px;
}

.admin-consultation-files-stats article{
    min-height:112px;
    padding:18px;
    display:grid;
    grid-template-columns:50px minmax(0,1fr);
    gap:14px;
    align-items:center;
    border:1px solid var(--admin-line);
    border-radius:16px;
    background:#fff;
    box-shadow:var(--admin-shadow-soft);
}

.admin-consultation-stat-icon{
    width:50px;
    height:50px;
    display:grid;
    place-items:center;
    border-radius:999px;
    color:var(--admin-primary);
    background:var(--admin-primary-soft);
}

.admin-consultation-stat-icon.is-new{
    color:#2f7f9f;
    background:#eaf7fb;
}

.admin-consultation-stat-icon.is-review{
    color:#b07b1e;
    background:#fff6e8;
}

.admin-consultation-stat-icon.is-routine{
    color:#357f65;
    background:#edf9f3;
}

.admin-consultation-stat-icon.is-advice{
    color:#b46c42;
    background:#fff4eb;
}

.admin-consultation-files-stats article > div{
    min-width:0;
}

.admin-consultation-files-stats p{
    margin:0 0 6px;
    color:var(--admin-muted);
    font-size:12px;
    line-height:1.45;
    font-weight:900;
}

.admin-consultation-files-stats strong{
    display:block;
    color:var(--admin-ink);
    font-size:27px;
    line-height:1.1;
    font-weight:950;
}

.admin-consultation-files-stats small{
    display:block;
    margin-top:6px;
    color:var(--admin-muted);
    font-size:11px;
    font-weight:850;
}

.admin-consultation-files-stats .is-new{border-color:rgba(47,127,159,.22);background:linear-gradient(180deg,#fff 0%,#f7fcff 100%)}
.admin-consultation-files-stats .is-review{border-color:rgba(196,150,60,.22);background:linear-gradient(180deg,#fff 0%,#fffdf8 100%)}
.admin-consultation-files-stats .is-routine{border-color:rgba(79,146,118,.22);background:linear-gradient(180deg,#fff 0%,#f6fcf8 100%)}
.admin-consultation-files-stats .is-advice{border-color:rgba(180,120,80,.22);background:linear-gradient(180deg,#fff 0%,#fff9f5 100%)}

.admin-consultation-files-toolbar-card{
    padding:14px;
    border:1px solid var(--admin-line);
    border-radius:16px;
    background:#fff;
    box-shadow:var(--admin-shadow-soft);
}

.admin-consultation-files-toolbar{
    display:grid;
    grid-template-columns:minmax(230px,1.6fr) repeat(3,minmax(140px,1fr)) auto;
    gap:10px;
}

.admin-consultation-files-search{
    display:flex;
    align-items:center;
    gap:8px;
    padding:0 12px;
    min-height:44px;
    border-radius:12px;
    border:1px solid var(--admin-line);
    background:#fff;
}

.admin-consultation-files-search svg{
    color:var(--admin-primary);
    flex-shrink:0;
}

.admin-consultation-files-search input{
    width:100%;
    border:0;
    background:transparent;
    color:var(--admin-ink);
    font-size:12px;
    font-weight:900;
    outline:none;
}

.admin-consultation-files-toolbar select,
.admin-consultation-files-reset{
    min-height:44px;
    padding:0 14px;
    border-radius:12px;
    border:1px solid var(--admin-line);
    background:#fff;
    color:var(--admin-ink);
    font-size:12px;
    font-weight:900;
}

.admin-consultation-files-reset{
    cursor:pointer;
    color:var(--admin-primary-dark);
    background:var(--admin-primary-soft);
    border-color:rgba(15,115,128,.18);
}

.admin-consultation-files-list{
    display:grid;
    gap:12px;
}

.admin-consultation-file-card{
    display:grid;
    grid-template-columns:1fr auto auto;
    gap:16px;
    align-items:center;
    padding:18px 20px;
    border-radius:18px;
    border:1px solid rgba(47,127,143,.14);
    background:#fff;
    box-shadow:0 8px 24px rgba(33,91,104,.05);
}

.admin-consultation-file-card__client{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:12px;
}

.admin-consultation-file-card__client > span{
    width:42px;height:42px;display:grid;place-items:center;border-radius:50%;
    background:#ecf8f6;color:#246a78;font-weight:900;
}

.admin-consultation-file-card__meta{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
    gap:8px 16px;
}

.admin-consultation-file-card__meta p{margin:0;font-size:12px;color:#677c83}
.admin-consultation-file-card__meta strong{display:block;color:#142f39;font-size:13px}

.admin-consultation-file-card__status{
    display:flex;
    flex-direction:column;
    gap:8px;
    align-items:flex-end;
}

.admin-consultation-response-pill{
    display:inline-flex;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:800;
}
.admin-consultation-response-pill.is-pending{background:#f1f5f6;color:#5f737a}
.admin-consultation-response-pill.is-routine{background:#e8f6f1;color:#1f6b52}
.admin-consultation-response-pill.is-advice{background:#fff4ea;color:#9a6b1f}

.admin-consultation-read-btn{
    display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:12px;
    background:linear-gradient(135deg,#2f7f8f,#246a78);color:#fff;text-decoration:none;font-weight:800;
}

.admin-consultation-review-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 340px;
    gap:20px;
    align-items:start;
    direction:rtl;
}

.admin-consultation-review-form{
    display:grid;
    gap:24px;
}

.admin-consultation-routine-builder{
    padding:24px;
    border-radius:20px;
    border:1px solid rgba(47,127,143,.16);
    background:#fff;
    box-shadow:0 14px 36px rgba(33,91,104,.08);
}

.admin-consultation-routine-builder-head h2{
    margin:6px 0 8px;
    font-size:22px;
    color:#142f39;
}

.admin-consultation-routine-builder-head p{
    margin:0;
    color:#677c83;
}

.admin-consultation-routine-builder-text{
    margin-top:20px;
    padding-top:18px;
    border-top:1px solid rgba(47,127,143,.12);
}

.admin-consultation-routine-builder-text h3{
    margin:0 0 14px;
    font-size:17px;
}

.admin-consultation-routine-builder-actions{
    margin-top:20px;
}

.admin-consultation-routine-hint{
    padding:12px 14px;
    border-radius:12px;
    background:#f7fcfb;
    border:1px dashed rgba(47,127,143,.28);
    color:#246a78;
    font-size:13px;
    line-height:1.6;
}

.admin-consultation-routine-hint p{margin:0}

.admin-consultation-routine-builder[hidden]{
    display:none!important;
}

.admin-product-picker{
    margin-bottom:16px;
}

.admin-product-picker-label{
    display:grid;
    gap:8px;
}

.admin-product-picker-label > span{
    font-size:13px;
    font-weight:600;
    color:#3f5a63;
}

.admin-product-picker-search{
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 14px;
    min-height:48px;
    border-radius:14px;
    border:1px solid rgba(47,127,143,.2);
    background:#fff;
    box-shadow:0 4px 16px rgba(33,91,104,.04);
    transition:border-color .2s ease, box-shadow .2s ease;
}

.admin-product-picker-search:focus-within{
    border-color:rgba(47,127,159,.45);
    box-shadow:0 0 0 3px rgba(47,127,159,.12);
}

.admin-product-picker-search svg{
    width:18px;
    height:18px;
    color:#6b858d;
    flex-shrink:0;
}

.admin-product-picker-search input{
    flex:1;
    border:0;
    background:transparent;
    min-height:46px;
    font-size:14px;
    color:#142f39;
    outline:none;
}

.admin-product-picker-search input::placeholder{
    color:#8aa0a7;
}

.admin-product-picker-hint{
    margin:6px 2px 0;
    font-size:12px;
    color:#7a9198;
}

.admin-product-picker-results{
    margin-top:10px;
    display:grid;
    gap:8px;
    max-height:320px;
    overflow:auto;
    padding:4px;
}

.admin-product-picker-result{
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:12px;
    align-items:center;
    width:100%;
    padding:10px 12px;
    border-radius:14px;
    border:1px solid rgba(47,127,143,.12);
    background:#fbfffe;
    text-align:right;
    cursor:pointer;
    transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.admin-product-picker-result:hover,
.admin-product-picker-result.is-active{
    border-color:rgba(47,127,159,.28);
    box-shadow:0 8px 20px rgba(33,91,104,.08);
    transform:translateY(-1px);
}

.admin-product-picker-result-image{
    width:52px;
    height:52px;
    border-radius:12px;
    overflow:hidden;
    background:#eef6f7;
    display:grid;
    place-items:center;
    font-size:22px;
}

.admin-product-picker-result-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.admin-product-picker-result-body strong{
    display:block;
    color:#142f39;
    font-size:14px;
}

.admin-product-picker-result-body small{
    display:block;
    margin-top:2px;
    color:#6f878f;
    font-size:12px;
}

.admin-product-picker-result-price{
    font-size:13px;
    font-weight:700;
    color:#1f6b52;
    white-space:nowrap;
}

.admin-product-picker-empty{
    margin:0;
    padding:16px;
    text-align:center;
    font-size:13px;
    color:#7a9198;
    border-radius:14px;
    border:1px dashed rgba(47,127,143,.18);
    background:#f8fcfd;
}

.admin-product-picker-selected-card{
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:14px;
    align-items:center;
    padding:14px 16px;
    border-radius:16px;
    border:1px solid rgba(31,107,82,.22);
    background:linear-gradient(135deg,#f7fcf9,#f2faf7);
}

.admin-product-picker-selected-image{
    width:58px;
    height:58px;
    border-radius:14px;
    overflow:hidden;
    background:#fff;
    display:grid;
    place-items:center;
    font-size:24px;
    box-shadow:0 4px 12px rgba(31,107,82,.08);
}

.admin-product-picker-selected-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.admin-product-picker-selected-meta strong{
    display:block;
    color:#142f39;
    font-size:15px;
}

.admin-product-picker-selected-meta span{
    display:block;
    margin-top:4px;
    color:#5f787f;
    font-size:12px;
}

.admin-product-picker-change{
    min-height:40px;
    padding:0 14px;
    border-radius:999px;
    border:1px solid rgba(47,127,143,.22);
    background:#fff;
    color:#2f6f7f;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    white-space:nowrap;
}

.admin-product-picker-change:hover{
    background:#f4fbfc;
}

.admin-routine-search-panel{
    padding:18px;
    margin-bottom:18px;
    border-radius:18px;
    border:1px solid rgba(47,127,143,.14);
    background:linear-gradient(180deg,#fbfeff,#f6fcfd);
}

.admin-routine-quick-add{
    margin-top:14px;
    padding-top:14px;
    border-top:1px dashed rgba(47,127,143,.16);
    display:grid;
    gap:12px;
}

.admin-routine-item-grid.compact{
    grid-template-columns:repeat(4,minmax(0,1fr));
}

.admin-product-picker-add-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:44px;
    padding:0 18px;
    border:0;
    border-radius:999px;
    background:linear-gradient(135deg,#1f6b52,#2f8f6d);
    color:#fff;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 10px 24px rgba(31,107,82,.22);
}

.admin-product-picker-add-btn svg{
    width:18px;
    height:18px;
}

.admin-routine-added-section{
    margin-bottom:18px;
}

.admin-routine-added-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:12px;
}

.admin-routine-added-head h3{
    margin:0;
    font-size:16px;
    color:#142f39;
}

.admin-routine-added-count{
    font-size:12px;
    font-weight:700;
    color:#2f6f7f;
    background:#eef7f8;
    padding:6px 10px;
    border-radius:999px;
}

.admin-routine-added-list{
    display:grid;
    gap:10px;
}

.admin-routine-added-item{
    border:1px solid rgba(47,127,143,.12);
    border-radius:16px;
    background:#fff;
    overflow:hidden;
}

.admin-routine-added-item-main{
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:12px;
    align-items:center;
    padding:12px 14px;
}

.admin-routine-added-item-image{
    width:52px;
    height:52px;
    border-radius:12px;
    overflow:hidden;
    background:#eef6f7;
    display:grid;
    place-items:center;
    font-size:22px;
}

.admin-routine-added-item-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.admin-routine-added-item-info strong{
    display:block;
    color:#142f39;
    font-size:14px;
}

.admin-routine-added-item-info span{
    display:block;
    margin-top:2px;
    color:#6f878f;
    font-size:12px;
}

.admin-routine-added-item-quick{
    display:flex;
    gap:8px;
    align-items:end;
}

.admin-routine-added-item-quick label{
    display:grid;
    gap:4px;
    font-size:11px;
    color:#6f878f;
}

.admin-routine-added-item-quick select,
.admin-routine-added-item-quick input{
    min-width:72px;
    min-height:36px;
    padding:0 8px;
    border-radius:10px;
    border:1px solid rgba(47,127,143,.16);
    background:#fff;
}

.admin-routine-added-remove{
    min-height:36px;
    padding:0 12px;
    border-radius:999px;
    border:1px solid rgba(196,80,80,.24);
    background:#fff5f5;
    color:#b44;
    font-size:12px;
    font-weight:700;
    cursor:pointer;
}

.admin-routine-added-details{
    border-top:1px solid rgba(47,127,143,.08);
    padding:0 14px 14px;
}

.admin-routine-added-details summary{
    cursor:pointer;
    padding:10px 0;
    color:#2f6f7f;
    font-size:13px;
    font-weight:600;
}

.admin-routine-empty-state{
    display:grid;
    justify-items:center;
    gap:8px;
    padding:28px 18px;
    text-align:center;
    border-radius:16px;
    border:1px dashed rgba(47,127,143,.18);
    background:#f8fcfd;
    color:#6f878f;
}

.admin-routine-empty-state strong{
    color:#142f39;
    font-size:15px;
}

.admin-routine-empty-state p{
    margin:0;
    max-width:420px;
    font-size:13px;
    line-height:1.6;
}

@media (max-width:900px){
    .admin-routine-added-item-main{
        grid-template-columns:auto 1fr;
    }

    .admin-routine-added-remove{
        grid-column:1 / -1;
        justify-self:end;
    }

    .admin-routine-item-grid.compact{
        grid-template-columns:1fr;
    }
}

.admin-routine-added-item.is-removing{
    opacity:.45;
    pointer-events:none;
}

.admin-routine-toast{
    position:sticky;
    bottom:16px;
    margin-top:12px;
    padding:12px 16px;
    border-radius:12px;
    background:#142f39;
    color:#fff;
    font-size:13px;
    font-weight:600;
    box-shadow:0 10px 24px rgba(20,47,57,.18);
    z-index:2;
}

.admin-routine-toast[hidden]{
    display:none;
}

.admin-consultation-file-reader{
    display:grid;
    gap:16px;
}

.admin-consultation-client-strip{
    display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;
    padding:16px 18px;border-radius:16px;background:#fff;border:1px solid rgba(47,127,143,.14);
}

.admin-consultation-client-strip-meta{
    display:flex;flex-wrap:wrap;gap:10px 16px;font-size:12px;color:#677c83;
}

.admin-consultation-snapshot.is-unified{
    display:grid;
    gap:16px;
}

.admin-consultation-overview{
    display:grid;
    gap:18px;
}

.admin-consultation-overview-block{
    padding:16px;
    border-radius:14px;
    background:#f7fcfb;
    border:1px solid rgba(47,127,143,.1);
}

.admin-consultation-overview-block h3{
    margin:0 0 12px;
    font-size:14px;
    font-weight:700;
    color:#2f6f7f;
}

.admin-consultation-snapshot,
.admin-consultation-file-section{
    padding:20px;border-radius:18px;background:#fff;border:1px solid rgba(47,127,143,.14);
}

.admin-consultation-snapshot h2,
.admin-consultation-file-section h2{
    margin:0 0 14px;font-size:18px;color:#142f39;
}

.admin-consultation-summary-grid,
.admin-consultation-answer-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
    gap:10px;
}

.admin-consultation-summary-grid article,
.admin-consultation-answer-grid article{
    padding:12px;border-radius:12px;background:#f7fcfb;border:1px solid rgba(47,127,143,.1);
}

.admin-consultation-summary-grid span,
.admin-consultation-answer-grid span{
    display:block;font-size:11px;color:#677c83;margin-bottom:4px;
}

.admin-consultation-file-accordion{display:grid;gap:10px}

.admin-consultation-file-phase{
    border:1px solid rgba(47,127,143,.14);border-radius:14px;background:#fbfeff;overflow:hidden;
}

.admin-consultation-file-phase summary{
    display:flex;flex-direction:column;gap:4px;padding:14px 16px;cursor:pointer;font-weight:800;
}

.admin-consultation-file-phase summary span{font-size:12px;color:#677c83;font-weight:600}

.admin-consultation-phase-answers{
    display:grid;gap:8px;padding:0 16px 16px;
}

.admin-consultation-phase-answers article{
    padding:10px 12px;border-radius:10px;background:#fff;border:1px solid rgba(47,127,143,.1);
}

.admin-consultation-file-section.is-highlight{
    border-color:rgba(196,120,80,.24);
    background:linear-gradient(180deg,#fffdf8,#fff);
}

.admin-consultation-decision-panel{
    position:sticky;top:20px;
}

.admin-consultation-decision-form{
    display:grid;gap:16px;padding:20px;border-radius:18px;
    background:#fff;border:1px solid rgba(47,127,143,.16);
    box-shadow:0 12px 32px rgba(33,91,104,.08);
}

.admin-consultation-decision-type{
    border:0;margin:0;padding:0;display:grid;gap:10px;
}

.admin-consultation-decision-type legend{
    margin-bottom:8px;font-weight:900;color:#142f39;
}

.admin-consultation-decision-option{
    display:flex;gap:12px;padding:12px;border-radius:14px;border:1px solid rgba(47,127,143,.14);
    cursor:pointer;background:#f9fdfd;
}

.admin-consultation-decision-option input{margin-top:4px}

.admin-consultation-decision-option strong{display:block;color:#142f39}
.admin-consultation-decision-option small{color:#677c83}

.admin-consultation-decision-block[hidden]{display:none!important}

.admin-consultation-action-btn{
    width:100%;min-height:46px;border:none;border-radius:12px;font-weight:900;cursor:pointer;
}

.admin-consultation-action-btn.is-advice{
    background:linear-gradient(135deg,#c4a574,#9a6b1f);color:#fff;
}

.admin-consultation-action-btn.is-routine{
    background:linear-gradient(135deg,#2f7f8f,#246a78);color:#fff;
}

.admin-consultation-decision-actions{
    display:flex;flex-wrap:wrap;gap:10px;
}

.admin-consultation-secondary-btn{
    min-height:42px;padding:0 14px;border-radius:12px;border:1px solid rgba(47,127,143,.22);
    background:#fff;font-weight:800;cursor:pointer;
}

.my-routine-status-pill.is-advice{background:rgba(196,165,116,.16);color:#8b6914}
.my-routine-specialist-note.is-advice-only{border-color:rgba(196,165,116,.28);background:linear-gradient(135deg,#fffdf8,#fff)}
.my-routine-advice-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}

@media(max-width:980px){
    .admin-consultation-files-head,
    .admin-consultation-review-head{
        flex-direction:column;
        align-items:stretch;
    }

    .admin-consultation-files-back,
    .admin-consultation-review-back{
        order:-1;
        width:100%;
    }

    .admin-consultation-files-stats{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .admin-consultation-files-toolbar{
        grid-template-columns:1fr 1fr;
    }

    .admin-consultation-files-search{
        grid-column:1 / -1;
    }

    .admin-consultation-files-reset{
        grid-column:1 / -1;
    }

    .admin-consultation-review-layout{grid-template-columns:1fr}
    .admin-consultation-decision-panel{position:static}
    .admin-consultation-file-card{grid-template-columns:1fr}
    .admin-consultation-file-card__status{align-items:flex-start}
}

@media(max-width:560px){
    .admin-consultation-files-stats{
        grid-template-columns:1fr;
    }

    .admin-consultation-files-toolbar{
        grid-template-columns:1fr;
    }
}

/* =========================================================
   MOBILE SYSTEM 2026 — unified phone/tablet layout contract
   Breakpoints: 980 (phone/tablet nav), 720 (phone), 420 (xs)
   ========================================================= */

.fay-drawer-section{
    margin:14px 8px 6px;
    padding:0 6px;
    color:#6b7f88;
    font-size:11px;
    font-weight:900;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.fay-drawer-section:first-child{
    margin-top:4px;
}

html{
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
}

@media (max-width:980px){
    html,
    body{
        overflow-x:hidden;
        max-width:100vw;
    }

    img,
    video,
    canvas,
    svg{
        max-width:100%;
        height:auto;
    }

    /* --- Home: force full-width single column (fixes narrow left cards) --- */
    .skinai-home-main,
    .fay-page.skinai-page,
    .skinai-page{
        width:100% !important;
        max-width:100% !important;
        margin:0 !important;
        padding-inline:0;
        box-sizing:border-box;
    }

    .skinai-home-main{
        padding:12px 14px 28px !important;
    }

    body.skinai-home-body .fay-navbar.site-navbar,
    body.fay-home-body .site-navbar{
        margin-bottom:16px !important;
    }

    .home-hero-showcase,
    .home-content-split,
    .home-benefits-bar{
        width:100% !important;
        max-width:100% !important;
        margin-inline:0 !important;
        grid-template-columns:1fr !important;
        direction:rtl !important;
    }

    .home-hero-visual,
    .home-hero-copy,
    .home-fay-card,
    .home-products-panel,
    .home-community-panel{
        grid-column:1 / -1 !important;
        grid-row:auto !important;
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        box-sizing:border-box;
    }

    .home-product-row{
        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:12px !important;
        width:100% !important;
    }

    .home-product-card{
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;
    }

    .home-community-row{
        grid-template-columns:1fr !important;
    }

    /* --- Navbar: logo row + organized scrollable desktop links --- */
    .site-navbar,
    .fay-navbar.site-navbar{
        grid-template-columns:minmax(0,1fr) auto !important;
        grid-template-rows:auto auto !important;
        min-height:64px;
        padding:10px 14px 8px;
        padding-top:max(10px, env(safe-area-inset-top));
        column-gap:10px;
        row-gap:0;
        width:100% !important;
        max-width:100% !important;
    }

    .site-nav-start{
        grid-column:1 !important;
        grid-row:1 !important;
        min-width:0;
    }

    .site-nav-actions{
        grid-column:2 !important;
        grid-row:1 !important;
        gap:8px;
    }

    .site-nav-links{
        display:flex !important;
        grid-column:1 / -1 !important;
        grid-row:2 !important;
        justify-self:stretch !important;
        justify-content:flex-start !important;
        align-items:center;
        flex-wrap:nowrap !important;
        gap:8px !important;
        width:100%;
        max-width:100%;
        margin:8px 0 0;
        padding:4px 2px 6px !important;
        overflow-x:auto !important;
        overflow-y:hidden !important;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
        direction:rtl;
    }

    .site-nav-links::-webkit-scrollbar{
        display:none;
    }

    .site-nav-links .fay-nav-link{
        flex:0 0 auto;
        min-height:36px;
        padding:8px 14px !important;
        border:1px solid rgba(15,115,128,.12);
        border-radius:999px;
        color:#102436 !important;
        background:#f3faf9;
        font-size:12.5px !important;
        font-weight:850;
        white-space:nowrap;
        text-align:center;
        line-height:1.2;
    }

    .site-nav-links .fay-nav-link::after{
        display:none !important;
    }

    .site-nav-links .fay-nav-link:hover,
    .site-nav-links .fay-nav-link.active{
        color:#fff !important;
        background:#0f7380;
        border-color:#0f7380;
    }

    /* Hide hero marketing copy on phones only */
    .home-hero-copy{
        display:none !important;
    }

    .site-logo-text strong{
        font-size:22px;
    }

    .site-logo-text small{
        font-size:11px;
    }

    .site-logo-mark{
        width:40px;
        height:40px;
    }

    .site-navbar .fay-icon-btn,
    .fay-navbar .fay-icon-btn,
    .site-avatar-link{
        width:42px;
        height:42px;
        min-width:42px;
        min-height:42px;
    }

    /* --- Drawer --- */
    .fay-drawer{
        width:min(100vw - 40px, 360px);
        height:100dvh;
        max-height:100dvh;
        right:-110%;
        padding-bottom:max(16px, env(safe-area-inset-bottom));
        overscroll-behavior:contain;
        -webkit-overflow-scrolling:touch;
    }

    .fay-drawer.open{
        right:0;
    }

    .fay-drawer-links a,
    .fay-drawer-links button.fay-pwa-install{
        min-height:48px;
        font-size:14px;
    }

    /* --- Shared shells --- */
    .profile-dashboard-grid,
    .product-detail-shell,
    .settings-shell,
    .catalog-shell,
    .orders-shell,
    .favorites-shell,
    .routine-dashboard-shell,
    .community-shell,
    .cart-shell{
        width:min(94%, 100%) !important;
        margin-inline:auto;
        padding-inline:0;
        box-sizing:border-box;
    }

    .profile-dashboard-grid{
        grid-template-columns:1fr !important;
        grid-template-areas:
            "main"
            "side" !important;
        gap:14px;
        margin-top:12px;
        margin-bottom:28px;
    }

    .product-detail-hero{
        grid-template-columns:1fr !important;
        gap:18px;
        direction:rtl;
    }

    .product-detail-lower{
        grid-template-columns:1fr !important;
    }

    .settings-grid{
        grid-template-columns:1fr !important;
    }

    .settings-actions{
        flex-wrap:wrap;
    }

    .settings-actions button,
    .settings-actions a{
        width:100%;
        min-height:46px;
    }

    /* Forms & buttons — touch friendly */
    button,
    .primary-btn,
    .auth-btn,
    .review-form button,
    .review-login,
    input[type="submit"],
    input[type="button"]{
        min-height:44px;
    }

    input,
    select,
    textarea{
        font-size:16px !important; /* prevents iOS zoom */
        max-width:100%;
        box-sizing:border-box;
    }

    /* Tables: allow horizontal scroll without page overflow */
    .admin-customers-table,
    .admin-products-table,
    .admin-orders-table,
    .admin-sections-table,
    .admin-ready-table,
    .admin-home-table{
        display:block;
        width:100%;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }
}

@media (max-width:720px){
    .home-hero-showcase{
        grid-template-columns:1fr !important;
        gap:16px;
    }

    .home-fay-card{
        grid-template-columns:1fr !important;
        display:block !important;
    }

    .home-product-row{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:10px;
    }

    .home-community-row{
        grid-template-columns:1fr !important;
    }

    .home-hero-copy h1{
        font-size:clamp(26px, 8vw, 34px);
    }

    .product-info-panel h1{
        font-size:clamp(22px, 6.5vw, 28px);
        margin-top:12px;
    }

    .product-buy-row,
    .detail-actions,
    .product-actions{
        flex-wrap:wrap;
        gap:10px;
    }

    .product-buy-row > *,
    .detail-actions > *{
        flex:1 1 100%;
    }

    .reviews-card,
    .description-card,
    .suggested-card,
    .profile-card,
    .settings-card{
        padding:16px;
        border-radius:14px;
    }

    .profile-routine-splits{
        grid-template-columns:1fr !important;
    }

    .profile-recent-products{
        grid-template-columns:1fr !important;
    }

    .review-star-picker span{
        font-size:32px;
    }

    /* Hide decorative absolute home bottles that overflow phones */
    .home-hero-bottle,
    .home-hero-products{
        display:none;
    }

    .site-inbox-btn{
        display:none;
    }
}

@media (max-width:420px){
    .site-navbar,
    .fay-navbar.site-navbar{
        padding:8px 10px;
        padding-top:max(8px, env(safe-area-inset-top));
    }

    .site-logo-text small{
        display:none;
    }

    .site-navbar .fay-icon-btn,
    .fay-navbar .fay-icon-btn{
        width:40px;
        height:40px;
        min-width:40px;
        min-height:40px;
    }

    .home-product-row{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:8px !important;
    }

    .home-community-row{
        grid-template-columns:1fr !important;
    }

    .home-product-card{
        min-height:0;
        padding:8px;
    }

    .home-product-image{
        height:96px;
    }

    .fay-drawer{
        width:100vw;
        border-left:0;
        border-radius:0;
    }
}

/* Product detail — final layout overrides */
.product-detail-body .pd-hero{
    display:grid;
    grid-template-columns:minmax(0,.85fr) minmax(300px,1fr);
    gap:clamp(24px, 3.5vw, 48px);
    direction:rtl;
}

.product-detail-body .variant-options{
    display:flex;
    flex-wrap:wrap;
    grid-template-columns:unset;
}

.product-detail-body .pd-actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
}

.product-detail-body .detail-routine-form{
    margin:0;
}

@media(max-width:980px){
    .product-detail-body .pd-hero{
        grid-template-columns:1fr;
    }

    .product-detail-body .pd-gallery-main{
        aspect-ratio:1 / 1;
        max-width:300px;
        max-height:300px;
        min-height:0;
    }

    .product-detail-body .product-detail-shell{
        width:min(92%, 100%);
    }
}

@media(max-width:760px){
    .product-detail-body .product-detail-shell{
        width:calc(100% - 24px);
        max-width:100%;
    }

    .product-detail-body .pd-actions{
        display:flex;
        width:100%;
    }

    .product-detail-body .detail-add-btn{
        flex:1 1 auto;
    }

    .product-detail-body .detail-wish-btn,
    .product-detail-body .detail-add-btn{
        order:unset;
    }
}

/* Support chat widget — mobile first */
.site-support-chat-btn{
    position:relative;
}

.site-support-chat-badge{
    position:absolute;
    top:-4px;
    left:-4px;
    min-width:18px;
    height:18px;
    padding:0 5px;
    border-radius:999px;
    background:#c45b5b;
    color:#fff;
    font-size:10px;
    font-weight:900;
    display:inline-grid;
    place-items:center;
    line-height:1;
}

.support-chat[hidden]{display:none !important;}

.support-chat{
    position:fixed;
    inset:0;
    z-index:1200;
}

.support-chat-backdrop{
    position:absolute;
    inset:0;
    background:rgba(16,36,54,.42);
}

.support-chat-panel{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    display:flex;
    flex-direction:column;
    height:min(78vh, 640px);
    max-height:calc(100vh - 12px);
    border-radius:22px 22px 0 0;
    background:#fff;
    box-shadow:0 -18px 40px rgba(16,36,54,.18);
    overflow:hidden;
}

.support-chat-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:14px 16px;
    border-bottom:1px solid rgba(47,127,143,.12);
    background:linear-gradient(180deg,#f7fbfb,#fff);
}

.support-chat-kicker{
    margin:0;
    color:#2f7f8f;
    font-size:11px;
    font-weight:900;
}

.support-chat-head h2{
    margin:2px 0 0;
    font-size:16px;
    color:#102436;
}

.support-chat-close{
    width:40px;
    height:40px;
    border:0;
    border-radius:12px;
    background:#eef8f6;
    color:#246a78;
    display:grid;
    place-items:center;
    cursor:pointer;
    transform:rotate(45deg);
}

.support-chat-body{
    flex:1 1 auto;
    overflow:auto;
    padding:14px 14px 8px;
    display:flex;
    flex-direction:column;
    gap:10px;
    background:#f7fbfb;
    -webkit-overflow-scrolling:touch;
}

.support-chat-hint,
.support-chat-error{
    margin:0;
    padding:12px 14px;
    border-radius:14px;
    background:#fff;
    color:#5b6b76;
    font-size:13px;
    line-height:1.6;
}

.support-chat-error{color:#a94442;border:1px solid rgba(169,68,66,.18);}

.support-chat-bubble{
    align-self:flex-start;
    max-width:88%;
    padding:10px 12px;
    border-radius:16px 16px 16px 6px;
    background:#fff;
    border:1px solid rgba(47,127,143,.10);
    box-shadow:0 8px 18px rgba(31,88,110,.05);
}

.support-chat-bubble.is-mine{
    align-self:flex-end;
    border-radius:16px 16px 6px 16px;
    background:linear-gradient(135deg,#2f7f8f,#246a78);
    color:#fff;
    border-color:transparent;
}

.support-chat-bubble p{
    margin:0;
    font-size:14px;
    line-height:1.55;
    word-break:break-word;
}

.support-chat-bubble span{
    display:block;
    margin-top:6px;
    font-size:11px;
    opacity:.72;
}

.support-chat-gate{
    margin:auto 0;
    text-align:center;
    padding:18px 12px;
}

.support-chat-gate p{
    margin:0 0 14px;
    color:#5b6b76;
    line-height:1.6;
}

.support-chat-login-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:0 18px;
    border-radius:13px;
    background:linear-gradient(135deg,#2f7f8f,#246a78);
    color:#fff;
    font-weight:900;
    text-decoration:none;
}

.support-chat-form{
    display:flex;
    gap:8px;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    border-top:1px solid rgba(47,127,143,.12);
    background:#fff;
}

.support-chat-form input{
    flex:1 1 auto;
    min-width:0;
    min-height:46px;
    border:1px solid rgba(47,127,143,.18);
    border-radius:14px;
    padding:0 14px;
    font:inherit;
    background:#f7fbfb;
    outline:0;
}

.support-chat-form input:focus{
    border-color:#2f7f8f;
    box-shadow:0 0 0 3px rgba(47,127,143,.12);
}

.support-chat-form button{
    width:46px;
    height:46px;
    flex:0 0 auto;
    border:0;
    border-radius:14px;
    background:linear-gradient(135deg,#2f7f8f,#246a78);
    color:#fff;
    display:grid;
    place-items:center;
    cursor:pointer;
}

body.support-chat-open{
    overflow:hidden;
}

@media (min-width:761px){
    .support-chat-backdrop{
        background:rgba(16,36,54,.28);
    }

    .support-chat-panel{
        left:auto;
        right:18px;
        bottom:18px;
        width:min(380px, calc(100vw - 36px));
        height:min(560px, calc(100vh - 36px));
        border-radius:22px;
        box-shadow:0 24px 48px rgba(16,36,54,.22);
    }
}

@media (max-width:760px){
    .site-navbar .site-inbox-btn{
        display:none;
    }

    .support-chat-panel{
        height:min(86vh, 720px);
    }

    .support-chat-bubble{
        max-width:92%;
    }
}