:root{--rose:#F0446A;--rose2:#D92F56;--soft:#FF9FB3;--blush:#FFF0F4;--bg:#F7F8FA;--white:#fff;--text:#252B34;--muted:#7E8792;--border:#E6E8EC;--green:#16A34A;--teal:#0F766E;--amber:#F59E0B;--shadow:0 16px 50px rgba(88,30,47,.09);--rose-deep:#D92F56;--rose-soft:#FFF0F4;--rose-border:#F6B4C4;--rose-glow:rgba(240,68,106,.22)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--text);background:linear-gradient(135deg,var(--bg),var(--blush));min-height:100vh}a{text-decoration:none;color:inherit}button,input,select,textarea{font:inherit}.site-header{height:78px;padding:0 6vw;display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.88);backdrop-filter:blur(15px);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20}.brand{display:flex;align-items:center;gap:10px}.brand-mark{width:42px;height:42px;display:grid;place-items:center;border-radius:50% 45% 50% 45%;background:linear-gradient(145deg,#fff0f3,var(--rose));color:#fff;font-size:20px}.brand b{font-size:24px;letter-spacing:.4px}.brand b span{color:var(--rose)}.brand small{display:block;font-size:10px;color:var(--muted)}.site-nav{display:flex;align-items:center;gap:26px;font-size:14px}.site-nav a.active{color:var(--rose)}.btn{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--rose),#f34c74);color:#fff;border:0;border-radius:10px;padding:13px 20px;font-weight:700;cursor:pointer;box-shadow:0 10px 24px rgba(232,93,117,.2)}.btn:hover{background:var(--rose2)}.btn.secondary{background:#fff;color:var(--text);border:1px solid var(--border);box-shadow:none}.btn.small{padding:10px 15px;font-size:13px}.hero{max-width:1220px;margin:0 auto;padding:85px 30px 55px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:60px}.eyebrow{display:inline-flex;background:#fff0f3;color:var(--rose2);padding:8px 12px;border-radius:999px;font-weight:800;font-size:12px}.hero h1{font-size:66px;line-height:.98;margin:18px 0}.hero h1 span{color:var(--rose)}.hero p{font-size:18px;line-height:1.7;color:var(--muted);max-width:600px}.hero-actions{display:flex;gap:12px;margin:28px 0}.hero-card{min-height:520px;border-radius:32px;background:linear-gradient(150deg,#fff,#ffe6ec);box-shadow:var(--shadow);position:relative;overflow:hidden;padding:30px}.face-abstract{position:absolute;right:-30px;bottom:-30px;width:420px;height:420px;border-radius:55% 45% 45% 55%;background:radial-gradient(circle at 40% 30%,#ffe7dc 0 18%,#c68469 19% 25%,#37251f 26% 32%,#f6c0b1 33% 53%,#d48b78 54% 56%,#3d2b28 57% 60%,transparent 61%),linear-gradient(145deg,#f7bec8,#e85d75);opacity:.92}.scan-pill{position:absolute;background:#fff;padding:12px 14px;border-radius:14px;box-shadow:var(--shadow);font-size:12px;font-weight:700}.p1{top:60px;left:25px}.p2{top:145px;right:20px}.p3{bottom:75px;left:25px}.stats-row{max-width:1160px;margin:0 auto 70px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:0 30px}.stat{background:#fff;border:1px solid var(--border);border-radius:18px;padding:22px;box-shadow:0 8px 28px rgba(0,0,0,.035)}.stat b{font-size:28px}.stat span{display:block;color:var(--muted);font-size:13px;margin-top:5px}.section{max-width:1180px;margin:0 auto;padding:70px 30px}.section-head{text-align:center;max-width:750px;margin:0 auto 42px}.section-head h2{font-size:42px;margin:10px}.section-head p{color:var(--muted);line-height:1.7}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.feature-card,.panel,.price-card,.form-card{background:#fff;border:1px solid var(--border);border-radius:20px;padding:24px;box-shadow:0 8px 35px rgba(0,0,0,.035)}.feature-card .icon{width:44px;height:44px;border-radius:12px;background:var(--blush);display:grid;place-items:center;color:var(--rose);font-weight:900}.feature-card p,.panel p,.price-card p{color:var(--muted);line-height:1.6}.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.step{background:#fff;border:1px solid var(--border);border-radius:18px;padding:20px}.step strong{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--rose);color:#fff;margin-bottom:13px}.product-architecture{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.architecture-card{padding:20px;border-radius:18px;background:linear-gradient(160deg,#fff,#fff1f4);border:1px solid #f4d7de}.architecture-card b{color:var(--rose2)}.footer{background:#fff;border-top:1px solid var(--border);padding:45px 6vw;display:grid;grid-template-columns:2fr 1fr 2fr;gap:35px;color:var(--muted)}.footer b{color:var(--text)}.footer a{display:block;margin:9px 0}.mobile-menu-btn{display:none}
.auth-wrap{min-height:calc(100vh - 78px);display:grid;place-items:center;padding:35px}.form-card{width:min(100%,480px)}.form-card h1{margin-top:0}.field{margin:16px 0}.field label{display:block;font-size:13px;font-weight:700;margin-bottom:7px}.field input,.field select,.field textarea{width:100%;border:1px solid var(--border);border-radius:11px;padding:13px 14px;background:#fff;outline:none}.field input:focus,.field textarea:focus{border-color:var(--rose);box-shadow:0 0 0 4px rgba(232,93,117,.1)}.note{padding:12px 14px;border-radius:12px;background:#fff5f7;color:#8b3444;font-size:13px;line-height:1.5}.toast{position:fixed;right:20px;top:90px;z-index:99;padding:14px 18px;border-radius:12px;background:#fff;box-shadow:var(--shadow);border-left:4px solid var(--rose)}.toast.success{border-color:var(--green)}.toast.error{border-color:#dc2626}
.app-shell{display:grid;grid-template-columns:225px 1fr;min-height:100vh;background:#f8f8fa}.sidebar{background:#fff;border-right:1px solid var(--border);padding:18px 14px;position:fixed;inset:0 auto 0 0;width:225px;z-index:30;overflow:auto}.sidebar-brand{margin-bottom:20px}.sidebar nav{display:grid;gap:5px}.sidebar nav a{padding:11px 12px;border-radius:10px;color:#344054;font-size:13px}.sidebar nav a.active,.sidebar nav a:hover{background:#fff0f3;color:var(--rose2);font-weight:700}.sidebar-card{margin-top:28px;background:linear-gradient(155deg,#fff,#fff0f3);border:1px solid #f2d8de;border-radius:15px;padding:15px}.sidebar-card p{font-size:12px;color:var(--muted);line-height:1.5}.app-main{grid-column:2;min-width:0}.app-top{height:72px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:10}.search{display:inline-block;background:#fafafa;border:1px solid var(--border);border-radius:10px;padding:10px 17px;color:#98a2b3;font-size:13px}.sidebar-toggle{display:none;border:0;background:transparent;font-size:20px}.user-chip{display:flex;align-items:center;gap:10px}.user-chip small{display:block;color:var(--rose);font-size:10px}.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#7a4a3e,#e8a18c);color:#fff}.app-content{padding:24px}.page-title{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px}.page-title h1{margin:0;font-size:27px}.page-title p{margin:5px 0;color:var(--muted)}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.metric{background:#fff;border:1px solid var(--border);border-radius:15px;padding:17px}.metric small{color:var(--muted)}.metric strong{display:block;font-size:26px;margin-top:6px}.metric .trend{color:var(--green);font-size:11px}.dashboard-grid{display:grid;grid-template-columns:1.2fr 1fr .7fr;gap:16px;margin-top:16px}.panel h3{margin-top:0}.donut{width:190px;height:190px;border-radius:50%;background:conic-gradient(var(--rose) 0 32%,#5b9b90 32% 56%,#f1b77d 56% 74%,#dd9da8 74% 86%,#c5cbd1 86% 94%,#8aa19b 94%);position:relative;margin:15px auto}.donut:after{content:"8,742\A Total Analyses";white-space:pre;position:absolute;inset:39px;background:#fff;border-radius:50%;display:grid;place-items:center;text-align:center;font-weight:800;font-size:18px;line-height:1.2}.chart{height:210px;display:flex;align-items:end;gap:10px;padding:20px 5px 5px}.bar{flex:1;background:linear-gradient(to top,var(--rose),#ffc3cf);border-radius:7px 7px 2px 2px}.list{display:grid;gap:10px}.list-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px;border:1px solid var(--border);border-radius:11px}.badge{display:inline-flex;border-radius:999px;padding:5px 9px;font-size:11px;background:#fff0f3;color:var(--rose2);font-weight:700}.badge.green{background:#ecfdf3;color:var(--green)}.badge.amber{background:#fff7e7;color:#b06d00}.analysis-layout{display:grid;grid-template-columns:1fr 1fr;gap:18px}.upload-zone{min-height:310px;border:2px dashed #efb5c1;border-radius:18px;background:#fff9fa;display:grid;place-items:center;text-align:center;padding:30px}.upload-zone input{max-width:100%}.score{width:128px;height:128px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--green) 0 85%,#e7ece9 85%);position:relative;margin:20px auto}.score:after{content:"85\A Good";white-space:pre;position:absolute;inset:11px;background:#fff;border-radius:50%;display:grid;place-items:center;text-align:center;font-weight:800}.routine-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.routine-step{display:flex;gap:13px;align-items:center;padding:13px;border-bottom:1px solid var(--border)}.routine-step .n{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--blush);color:var(--rose);font-weight:800}.products{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.product{background:#fff;border:1px solid var(--border);border-radius:16px;padding:16px}.product-art{height:120px;border-radius:12px;background:linear-gradient(145deg,#f9eeee,#fff);display:grid;place-items:center;font-size:44px}.progress-line{height:250px;position:relative;background:linear-gradient(#fff,#fff),repeating-linear-gradient(to bottom,transparent 0 49px,#eee 50px);border-radius:14px;overflow:hidden}.progress-line svg{width:100%;height:100%}.chat{height:520px;display:flex;flex-direction:column}.messages{flex:1;overflow:auto;display:flex;flex-direction:column;gap:12px}.bubble{max-width:78%;padding:12px 14px;border-radius:15px;background:#f4f4f5}.bubble.me{align-self:flex-end;background:var(--rose);color:#fff}.chat-input{display:flex;gap:8px;margin-top:14px}.chat-input input{flex:1;padding:12px;border:1px solid var(--border);border-radius:12px}
table{width:100%;border-collapse:collapse;background:#fff;border-radius:14px;overflow:hidden}th,td{text-align:left;padding:13px;border-bottom:1px solid var(--border);font-size:13px}th{color:var(--muted);background:#fbfbfc}
@media(max-width:1000px){.hero{grid-template-columns:1fr}.hero-card{min-height:420px}.grid-3{grid-template-columns:1fr 1fr}.steps,.product-architecture{grid-template-columns:1fr 1fr}.metric-grid{grid-template-columns:1fr 1fr}.dashboard-grid{grid-template-columns:1fr 1fr}.products{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.site-header{padding:0 18px}.mobile-menu-btn{display:block;border:0;background:transparent;font-size:22px}.site-nav{display:none;position:absolute;top:78px;left:0;right:0;background:#fff;padding:18px;flex-direction:column;align-items:stretch;border-bottom:1px solid var(--border)}.site-nav.open{display:flex}.hero{padding:55px 20px}.hero h1{font-size:44px}.hero-card{min-height:360px}.face-abstract{width:310px;height:310px}.stats-row,.grid-3,.steps,.product-architecture,.footer,.analysis-layout,.routine-grid,.products{grid-template-columns:1fr}.stats-row{grid-template-columns:1fr 1fr}.app-shell{display:block}.sidebar{transform:translateX(-100%);transition:.25s}.sidebar.open{transform:translateX(0)}.app-main{margin:0}.sidebar-toggle{display:inline-block}.search{display:none}.app-content{padding:16px}.metric-grid{grid-template-columns:1fr 1fr}.dashboard-grid{grid-template-columns:1fr}.page-title{flex-direction:column;gap:10px}table{display:block;overflow:auto}.hero-actions{flex-direction:column}.hero-actions .btn{width:100%}}/* =========================================
   UNISCARE PREMIUM DASHBOARD SHELL
========================================= */

.app-shell {
    min-height: 100vh;
    background:
        linear-gradient(
            135deg,
            #f7f7f9 0%,
            #fbfbfc 58%,
            #fdecef 100%
        );
}

.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;

    width: 248px;

    padding: 18px 14px;

    background: rgba(255, 255, 255, 0.98);

    border-right: 1px solid #e8e8eb;

    overflow-y: auto;

    z-index: 100;
}

.sidebar-brand {
    display: flex;
    align-items: center;

    gap: 10px;

    padding: 5px 4px 22px;
}

.sidebar-brand .brand-mark {
    width: 45px;
    height: 45px;
}

.sidebar-brand b {
    font-size: 24px;
}

.sidebar-brand small {
    font-size: 9px;
}


/* NAVIGATION */

.sidebar-nav {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.sidebar-nav a {
    display: flex;
    align-items: center;

    gap: 13px;

    min-height: 44px;

    padding: 0 14px;

    border-radius: 11px;

    color: #394150;

    font-size: 13px;
    font-weight: 500;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}

.sidebar-nav a:hover {
    background: #fff5f7;

    color: #e85d75;
}

.sidebar-nav a.active {
    color: #e64e69;

    background:
        linear-gradient(
            90deg,
            #fff0f3,
            #fde9ed
        );

    font-weight: 700;
}

.sidebar-nav a.active::before {
    content: "";

    width: 4px;

    height: 27px;

    border-radius: 0 6px 6px 0;

    background: #e85d75;

    position: absolute;

    left: 0;
}

.nav-icon {
    width: 21px;

    display: inline-flex;

    justify-content: center;

    font-size: 15px;
}


/* SIDEBAR AI CARD */

.sidebar-card {
    margin-top: 28px;

    padding: 17px;

    border-radius: 15px;

    border: 1px solid #f0d9de;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #fff7f9 100%
        );
}

.sidebar-card-head {
    display: flex;

    align-items: center;

    justify-content: space-between;
}

.sidebar-card-head span {
    color: #e85d75;
}

.sidebar-card p {
    color: #6b7280;

    font-size: 11.5px;

    line-height: 1.55;
}

.ai-card .btn {
    width: 100%;
}


/* PLAN CARD */

.plan-card {
    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #fafafa 100%
        );
}

.muted {
    color: #8a8f98 !important;
}

.storage-row {
    margin-top: 12px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    font-size: 11px;
}

.storage-bar {
    height: 6px;

    background: #f0f0f2;

    margin: 9px 0 14px;

    border-radius: 999px;

    overflow: hidden;
}

.storage-bar span {
    display: block;

    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #f8a5b5,
            #e85d75
        );
}

.sidebar-upgrade {
    width: 100%;
}

.sidebar-logout {
    display: block;

    margin: 18px 8px;

    padding: 10px;

    color: #6b7280;

    font-size: 12px;
}


/* MAIN AREA */

.app-main {
    margin-left: 248px;

    min-height: 100vh;
}


/* TOP HEADER */

.app-top {
    height: 74px;

    padding: 0 28px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background: rgba(255, 255, 255, 0.96);

    backdrop-filter: blur(16px);

    border-bottom: 1px solid #e6e6e9;

    position: sticky;

    top: 0;

    z-index: 50;
}

.top-left {
    display: flex;

    align-items: center;

    gap: 18px;
}

.search-wrap {
    width: 350px;

    height: 42px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 0 13px;

    background: #fbfbfc;

    border: 1px solid #e2e4e8;

    border-radius: 11px;
}

.search-icon {
    color: #87909f;
}

.search-wrap input {
    flex: 1;

    border: 0;

    outline: 0;

    background: transparent;

    font-size: 12px;

    color: #344054;
}

.search-wrap input::placeholder {
    color: #9ba3b2;
}

.search-wrap kbd {
    padding: 3px 6px;

    border: 1px solid #e0e2e7;

    border-radius: 6px;

    background: #f7f7f8;

    color: #98a2b3;

    font-size: 9px;
}


/* TOP ACTIONS */

.top-actions {
    display: flex;

    align-items: center;

    gap: 14px;
}

.top-icon-btn {
    position: relative;

    width: 35px;
    height: 35px;

    border: 0;

    background: transparent;

    border-radius: 9px;

    cursor: pointer;

    color: #344054;

    font-size: 17px;
}

.top-icon-btn:hover {
    background: #f9f9fa;
}

.top-badge {
    position: absolute;

    right: 0;
    top: 0;

    min-width: 16px;
    height: 16px;

    display: grid;

    place-items: center;

    padding: 0 4px;

    border-radius: 999px;

    background: #e85d75;

    color: white;

    font-size: 8px;
}


/* USER CHIP */

.user-chip {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-left: 6px;
}

.avatar {
    width: 42px;
    height: 42px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #c98a76,
            #8f493a
        );

    color: #fff;

    font-size: 13px;

    box-shadow:
        0 5px 16px rgba(110, 56, 45, .18);
}

.user-info {
    min-width: 105px;
}

.user-info b {
    display: block;

    color: #23262c;

    font-size: 12px;
}

.user-info small {
    display: block;

    margin-top: 2px;

    color: #e85d75;

    font-size: 9px;
}

.user-arrow {
    color: #6b7280;
}


/* CONTENT */

.app-content {
    padding: 27px 27px 40px;

    max-width: 1600px;

    margin: 0 auto;
}


/* PREMIUM CARD FEEL */

.panel,
.metric,
.product,
.form-card {
    background: rgba(255, 255, 255, .98);

    border: 1px solid #e8e8eb;

    border-radius: 16px;

    box-shadow:
        0 7px 24px rgba(46, 29, 34, .035);
}

.metric {
    min-height: 126px;

    position: relative;

    overflow: hidden;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.metric:hover {
    transform: translateY(-2px);

    box-shadow:
        0 12px 30px rgba(52, 30, 37, .07);
}

.metric strong {
    font-size: 26px;
}

.metric small {
    font-size: 11px;
}

.metric .trend {
    margin-top: 4px;

    font-size: 9px;
}


/* PAGE TITLE */

.page-title h1 {
    font-size: 26px;

    letter-spacing: -.4px;
}

.page-title p {
    font-size: 12px;

    color: #818894;
}


/* ADMIN DASHBOARD GRID */

.dashboard-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(0, 1.08fr)
        minmax(270px, .72fr);

    gap: 16px;

    margin-top: 16px;
}


/* RESPONSIVE */

@media (max-width: 1100px) {

    .dashboard-grid {
        grid-template-columns: 1fr 1fr;
    }

}

@media (max-width: 800px) {

    .sidebar {
        transform: translateX(-100%);

        transition: transform .25s ease;

        box-shadow:
            10px 0 40px rgba(0, 0, 0, .12);
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .app-main {
        margin-left: 0;
    }

    .sidebar-toggle {
        display: inline-flex;
    }

    .search-wrap {
        width: 240px;
    }

    .user-info,
    .user-arrow {
        display: none;
    }

}

@media (max-width: 620px) {

    .app-top {
        padding: 0 14px;
    }

    .search-wrap {
        display: none;
    }

    .app-content {
        padding: 16px;
    }

    .dashboard-grid,
    .metric-grid {
        grid-template-columns: 1fr;
    }

}/* =========================================================
   UNISCARE COMMAND CENTRE
========================================================= */

.command-page-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    margin-bottom: 20px;
}

.command-page-heading h1 {
    margin: 0;

    font-size: 25px;
    font-weight: 800;
    letter-spacing: -.45px;

    color: #20242c;
}

.command-page-heading p {
    margin: 6px 0 0;

    font-size: 12px;

    color: #7e8795;
}

.command-date {
    height: 40px;

    padding: 0 13px;

    display: flex;
    align-items: center;

    gap: 14px;

    border: 1px solid #e6e7eb;
    border-radius: 10px;

    background: white;

    color: #474d57;

    font-size: 11px;

    box-shadow: 0 4px 14px rgba(20, 20, 30, .025);
}

.command-calendar {
    padding-left: 12px;

    border-left: 1px solid #ececef;
}



/* =========================================================
   MAIN LAYOUT
========================================================= */

.command-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        290px;

    gap: 18px;

    align-items: start;
}

.command-main {
    min-width: 0;
}

.command-right {
    display: flex;
    flex-direction: column;

    gap: 16px;
}



/* =========================================================
   METRICS
========================================================= */

.command-metrics {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 13px;
}

.command-metric-card {
    min-height: 130px;

    padding: 20px;

    display: flex;
    align-items: flex-start;

    gap: 15px;

    background: #fff;

    border: 1px solid #e8e8ec;

    border-radius: 15px;

    box-shadow:
        0 8px 24px rgba(51, 36, 41, .035);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.command-metric-card:hover {
    transform: translateY(-2px);

    box-shadow:
        0 12px 30px rgba(54, 34, 41, .065);
}

.metric-icon {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    display: grid;
    place-items: center;

    border-radius: 11px;

    background:
        linear-gradient(
            145deg,
            #f56581,
            #e84467
        );

    color: #fff;

    font-size: 19px;

    box-shadow:
        0 8px 20px rgba(232, 93, 117, .18);
}

.command-metric-card > div:last-child {
    min-width: 0;
}

.metric-label {
    display: block;

    margin: 3px 0 5px;

    color: #5f6875;

    font-size: 11px;
}

.command-metric-card strong {
    display: block;

    color: #1e2530;

    font-size: 24px;
    font-weight: 800;
}

.metric-change {
    display: block;

    margin-top: 9px;

    font-size: 9px;

    color: #89909a;
}

.metric-change.positive {
    color: #12a150;
}



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

.command-card {
    background: #fff;

    border: 1px solid #e7e7eb;

    border-radius: 16px;

    box-shadow:
        0 7px 24px rgba(40, 26, 31, .032);

    overflow: hidden;
}

.command-card-head {
    min-height: 57px;

    padding: 0 17px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;
}

.command-card-head h3,
.right-card h3 {
    margin: 0;

    color: #252931;

    font-size: 14px;
    font-weight: 800;
}

.command-filter {
    min-height: 32px;

    padding: 0 10px;

    display: inline-flex;
    align-items: center;

    gap: 12px;

    border: 1px solid #e5e6e9;
    border-radius: 8px;

    background: #fff;

    color: #666e7a;

    font-size: 9px;
}

.command-view-all {
    color: #e85d75;

    font-size: 10px;
    font-weight: 600;
}



/* =========================================================
   ANALYTICS
========================================================= */

.command-analytics-grid {
    margin-top: 14px;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 14px;
}



/* ANALYSIS DONUT */

.analysis-overview-body {
    min-height: 260px;

    padding: 8px 20px 22px;

    display: flex;
    align-items: center;

    gap: 34px;
}

.command-donut {
    width: 182px;
    height: 182px;

    flex: 0 0 182px;

    position: relative;

    border-radius: 50%;

    background:
        conic-gradient(
            #E85D75 0 32%,
            #5B9B90 32% 56%,
            #F0B272 56% 74%,
            #DA9EAA 74% 86%,
            #C6CDD1 86% 94%,
            #8CA49E 94% 100%
        );
}

.command-donut::before {
    content: "";

    position: absolute;

    inset: 37px;

    border-radius: 50%;

    background: #fff;
}

.command-donut-center {
    position: absolute;

    inset: 0;

    z-index: 2;

    display: grid;
    place-content: center;

    text-align: center;
}

.command-donut-center strong {
    font-size: 19px;

    color: #28303a;
}

.command-donut-center span {
    margin-top: 3px;

    color: #777f8b;

    font-size: 9px;
}

.analysis-legend {
    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 13px;
}

.analysis-legend-row {
    display: grid;

    grid-template-columns: 9px 1fr auto;

    align-items: center;

    gap: 9px;

    color: #5f6875;

    font-size: 10px;
}

.analysis-legend-row strong {
    color: #555e6b;

    font-size: 9px;
}

.legend-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;
}



/* GROWTH */

.growth-chart {
    height: 270px;

    position: relative;

    padding: 10px 18px 28px;
}

.growth-chart svg {
    position: absolute;

    left: 18px;
    right: 18px;

    bottom: 39px;

    width: calc(100% - 36px);
    height: 205px;
}

.growth-grid {
    position: absolute;

    inset: 20px 18px 40px;

    display: flex;
    flex-direction: column;

    justify-content: space-between;

    pointer-events: none;
}

.growth-grid span {
    display: block;

    border-top: 1px solid #eff0f2;
}

.growth-axis {
    position: absolute;

    left: 18px;
    right: 18px;
    bottom: 15px;

    display: flex;
    justify-content: space-between;

    color: #8d949e;

    font-size: 8px;
}



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

.command-bottom-grid {
    margin-top: 14px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(350px, .85fr);

    gap: 14px;
}

.command-table-wrap {
    overflow-x: auto;
}

.command-table {
    width: 100%;

    border-collapse: collapse;
}

.command-table th {
    padding: 11px 15px;

    border-top: 1px solid #f0f0f2;
    border-bottom: 1px solid #eeeeef;

    background: #fdfdfd;

    color: #858d98;

    font-size: 9px;
    font-weight: 600;

    text-align: left;
}

.command-table td {
    padding: 12px 15px;

    border-bottom: 1px solid #f0f0f2;

    color: #4c5561;

    font-size: 10px;
}

.command-table tr:last-child td {
    border-bottom: 0;
}

.table-user {
    display: flex;
    align-items: center;

    gap: 9px;
}

.mini-avatar {
    width: 31px;
    height: 31px;

    flex: 0 0 31px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #e7b29f,
            #8d4e40
        );

    color: #fff;

    font-size: 10px;
    font-weight: 700;
}

.table-user strong {
    display: block;

    font-size: 10px;

    color: #303640;
}

.table-user small {
    display: block;

    margin-top: 2px;

    color: #9a9fa7;

    font-size: 8px;
}

.analysis-score {
    width: 28px;
    height: 28px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    font-size: 9px;
    font-weight: 700;
}

.score-good {
    border: 1px solid #24b66a;

    color: #16a34a;

    background: #f4fff8;
}

.score-medium {
    border: 1px solid #e8aa32;

    color: #ba7100;

    background: #fffaf0;
}

.score-low {
    border: 1px solid #ed6c7e;

    color: #d5425b;

    background: #fff6f7;
}

.table-action {
    display: inline-flex;

    padding: 6px 10px;

    border: 1px solid #f2a8b6;
    border-radius: 6px;

    color: #e75b74;

    font-size: 8px;
}



/* PRODUCTS */

.product-performance-list {
    padding: 0 14px 13px;
}

.performance-product {
    min-height: 54px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto
        22px;

    align-items: center;

    gap: 12px;

    padding: 8px 3px;

    border-top: 1px solid #f0f0f2;
}

.performance-product-main {
    display: flex;
    align-items: center;

    gap: 10px;

    min-width: 0;
}

.product-mini-icon {
    width: 30px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius: 8px;

    background: #f7f7f8;

    font-size: 15px;
}

.performance-product-main strong {
    display: block;

    overflow: hidden;

    color: #3b414b;

    font-size: 10px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.performance-product-main span {
    display: block;

    margin-top: 3px;

    color: #959ba4;

    font-size: 8px;
}

.performance-stock {
    min-width: 45px;

    text-align: right;
}

.performance-stock strong {
    display: block;

    color: #47505c;

    font-size: 10px;
}

.performance-stock span {
    color: #9ca2aa;

    font-size: 7px;
}

.performance-trend {
    color: #17a85a;

    font-size: 14px;
}



/* =========================================================
   RIGHT COLUMN
========================================================= */

.right-card {
    padding-bottom: 9px;
}

.notification-list {
    padding: 0 12px;
}

.notification-item {
    min-height: 61px;

    display: grid;

    grid-template-columns:
        34px
        minmax(0, 1fr)
        8px;

    align-items: center;

    gap: 10px;

    border-top: 1px solid #f1f1f2;
}

.notification-icon {
    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    border-radius: 8px;

    font-size: 13px;
}

.notification-icon.pink {
    background: #fff0f3;

    color: #e85d75;
}

.notification-icon.orange {
    background: #fff7e9;

    color: #ed9c1b;
}

.notification-icon.blue {
    background: #edf7ff;

    color: #278ad1;
}

.notification-icon.green-bg {
    background: #eefbf3;

    color: #17a65a;
}

.notification-copy strong {
    display: block;

    color: #404751;

    font-size: 9px;
}

.notification-copy span {
    display: block;

    margin-top: 3px;

    color: #8d949e;

    font-size: 8px;
}

.notification-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;
}

.notification-dot.green {
    background: #1db363;
}

.notification-dot.orange-dot {
    background: #f3a323;
}

.notification-dot.blue-dot {
    background: #3694db;
}



/* QUICK ACTIONS */

.quick-action-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 12px;

    padding: 14px;
}

.quick-action-grid a {
    min-width: 0;

    text-align: center;

    color: #424953;
}

.quick-action-grid a > span {
    width: 50px;
    height: 50px;

    margin: auto;

    display: grid;
    place-items: center;

    border: 1px solid #f1d7dd;
    border-radius: 11px;

    background:
        linear-gradient(
            145deg,
            #fff,
            #fff1f4
        );

    color: #e85d75;

    font-size: 18px;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.quick-action-grid a:hover > span {
    transform: translateY(-2px);

    box-shadow:
        0 8px 18px rgba(232, 93, 117, .12);
}

.quick-action-grid small {
    display: block;

    margin-top: 6px;

    font-size: 8px;
}



/* SKIN TIP */

.skin-tip-card {
    min-height: 215px;

    padding: 20px;

    display: grid;

    grid-template-columns: 1fr 75px;

    gap: 12px;

    border: 1px solid #efdfe3;
    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            #fff 0%,
            #fff5f7 100%
        );

    overflow: hidden;
}

.skin-tip-card h3 {
    margin: 12px 0 8px;

    font-size: 17px;
}

.skin-tip-card p {
    color: #737b87;

    font-size: 10px;

    line-height: 1.6;
}

.skin-tip-art {
    align-self: end;

    width: 100px;
    height: 100px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #f7b6c3,
            #e85d75
        );

    color: #fff;

    font-size: 45px;

    opacity: .82;
}



/* =========================================================
   GLANCE
========================================================= */

.uniscare-glance {
    margin-top: 14px;

    min-height: 112px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        220px;

    position: relative;

    border: 1px solid #f0ced7;
    border-radius: 16px;

    background:
        linear-gradient(
            90deg,
            #fff0f3 0%,
            #fbc7d3 68%,
            #ed5573 100%
        );

    overflow: hidden;
}

.glance-title {
    position: absolute;

    left: 18px;
    top: 13px;

    font-size: 13px;
}

.glance-items {
    padding:
        46px
        20px
        15px;

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 10px;
}

.glance-item {
    display: flex;
    align-items: center;

    gap: 9px;

    padding-right: 10px;

    border-right: 1px solid rgba(215, 94, 116, .15);
}

.glance-icon {
    color: #e84f6e;

    font-size: 24px;
}

.glance-item strong {
    display: block;

    font-size: 16px;
}

.glance-item span:last-child {
    display: block;

    margin-top: 2px;

    color: #70646a;

    font-size: 8px;
}

.glance-status {
    padding: 20px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    color: white;
}

.glance-status span {
    font-size: 11px;
    font-weight: 700;
}

.glance-status small {
    display: block;

    margin-top: 4px;

    font-size: 8px;
    font-weight: 400;
}

.glance-status > strong {
    width: 45px;
    height: 45px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: rgba(255,255,255,.16);

    font-size: 20px;
}



/* EMPTY STATES */

.command-empty {
    min-height: 170px;

    display: grid;
    place-content: center;

    text-align: center;

    color: #8d949d;
}

.command-empty > span {
    color: #e85d75;

    font-size: 28px;
}

.command-empty strong {
    margin-top: 8px;

    color: #555d68;

    font-size: 11px;
}

.command-empty p {
    font-size: 9px;
}



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

@media (max-width: 1380px) {

    .command-layout {
        grid-template-columns:
            minmax(0, 1fr)
            255px;
    }

    .analysis-overview-body {
        gap: 18px;
    }

    .command-donut {
        width: 155px;
        height: 155px;

        flex-basis: 155px;
    }

}


@media (max-width: 1180px) {

    .command-layout {
        grid-template-columns: 1fr;
    }

    .command-right {
        display: grid;

        grid-template-columns: repeat(3, 1fr);
    }

    .command-metrics {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 900px) {

    .command-analytics-grid,
    .command-bottom-grid {
        grid-template-columns: 1fr;
    }

    .command-right {
        grid-template-columns: 1fr 1fr;
    }

    .uniscare-glance {
        grid-template-columns: 1fr;
    }

    .glance-status {
        min-height: 75px;

        background: rgba(232, 73, 104, .58);
    }

}


@media (max-width: 650px) {

    .command-page-heading {
        align-items: flex-start;

        flex-direction: column;
    }

    .command-metrics,
    .command-right {
        grid-template-columns: 1fr;
    }

    .analysis-overview-body {
        flex-direction: column;
    }

    .analysis-legend {
        width: 100%;
    }

    .glance-items {
        grid-template-columns: 1fr 1fr;

        padding-top: 50px;
    }

    .glance-item {
        min-height: 48px;
    }

}/* =========================================================
   USERS & CLIENTS
========================================================= */

.users-page-title {
    margin-bottom: 18px;
}

.users-header-actions {
    display: flex;
    align-items: center;
    gap: 9px;
}


/* SUMMARY CARDS */

.users-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 13px;

    margin-bottom: 15px;
}

.users-metric-card {
    min-height: 112px;

    padding: 18px;

    display: flex;
    align-items: center;

    gap: 14px;

    background: #fff;

    border: 1px solid #e8e8ec;
    border-radius: 15px;

    box-shadow:
        0 7px 24px rgba(42, 30, 35, .03);
}

.users-metric-icon {
    width: 45px;
    height: 45px;

    flex: 0 0 45px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    background: #fff0f3;

    color: #e85d75;

    font-size: 19px;
}

.users-metric-icon.green {
    background: #eefbf3;

    color: #16a34a;
}

.users-metric-icon.amber {
    background: #fff8e8;

    color: #e7a01a;
}

.users-metric-icon.teal {
    background: #eef9f7;

    color: #0f766e;
}

.users-metric-card small {
    display: block;

    color: #737b87;

    font-size: 10px;
}

.users-metric-card strong {
    display: block;

    margin: 3px 0;

    color: #202630;

    font-size: 23px;
}

.users-metric-card div > span {
    color: #98a0aa;

    font-size: 8px;
}


/* FILTER BAR */

.users-toolbar {
    margin-bottom: 15px;

    padding: 13px;

    background: #fff;

    border: 1px solid #e8e8ec;
    border-radius: 14px;

    box-shadow:
        0 6px 20px rgba(42, 29, 34, .025);
}

.users-filter-form {
    display: flex;
    align-items: center;

    gap: 9px;
}

.users-search {
    min-width: 300px;
    height: 38px;

    display: flex;
    align-items: center;

    gap: 9px;

    padding: 0 12px;

    border: 1px solid #e4e5e8;
    border-radius: 9px;

    background: #fbfbfc;
}

.users-search span {
    color: #939aa5;
}

.users-search input {
    width: 100%;

    border: 0;
    outline: 0;

    background: transparent;

    color: #454d58;

    font-size: 10px;
}

.users-filter-form select {
    min-width: 130px;
    height: 38px;

    padding: 0 10px;

    border: 1px solid #e4e5e8;
    border-radius: 9px;

    background: white;

    color: #5b6470;

    outline: 0;

    font-size: 9px;
}


/* MAIN USERS CARD */

.users-card {
    background: white;

    border: 1px solid #e8e8ec;
    border-radius: 16px;

    box-shadow:
        0 8px 28px rgba(39, 27, 31, .03);

    overflow: hidden;
}

.users-card-head {
    min-height: 65px;

    padding: 0 18px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom: 1px solid #eeeeef;
}

.users-card-head h3 {
    margin: 0;

    font-size: 14px;
}

.users-card-head p {
    margin: 4px 0 0;

    color: #969da6;

    font-size: 8px;
}


/* TABLE */

.users-table-wrap {
    width: 100%;

    overflow-x: auto;
}

.users-table {
    width: 100%;

    border-collapse: collapse;
}

.users-table th {
    padding: 12px 17px;

    background: #fbfbfc;

    border-bottom: 1px solid #ececef;

    color: #8d949f;

    font-size: 9px;
    font-weight: 600;

    text-align: left;
}

.users-table td {
    padding: 13px 17px;

    border-bottom: 1px solid #f0f0f2;

    color: #59616d;

    font-size: 10px;

    vertical-align: middle;
}

.users-table tbody tr:hover {
    background: #fffafb;
}

.users-table tbody tr:last-child td {
    border-bottom: 0;
}


/* USER COLUMN */

.user-directory-person {
    display: flex;
    align-items: center;

    gap: 10px;
}

.user-directory-avatar {
    width: 36px;
    height: 36px;

    flex: 0 0 36px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #efc2b3,
            #995849
        );

    color: white;

    font-size: 11px;
    font-weight: 700;

    box-shadow:
        0 5px 12px rgba(109, 64, 52, .13);
}

.user-directory-person strong {
    display: block;

    color: #353b45;

    font-size: 10px;
}

.user-directory-person small {
    display: block;

    margin-top: 3px;

    color: #969ca6;

    font-size: 8px;
}


/* ROLE */

.role-pill {
    display: inline-flex;

    padding: 6px 9px;

    border-radius: 999px;

    background: #fff0f3;

    color: #dc536c;

    font-size: 8px;
    font-weight: 600;
}


/* STATUS */

.user-status {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    padding: 5px 8px;

    border-radius: 999px;

    font-size: 8px;
    font-weight: 600;
}

.user-status i {
    width: 6px;
    height: 6px;

    border-radius: 50%;
}

.status-active {
    background: #edf9f1;

    color: #16984f;
}

.status-active i {
    background: #18a95a;
}

.status-pending {
    background: #fff7e8;

    color: #bb7b11;
}

.status-pending i {
    background: #e8a222;
}

.status-suspended {
    background: #fff0f2;

    color: #d34d62;
}

.status-suspended i {
    background: #e3576d;
}


/* ACCOUNT ID */

.user-id {
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    color: #7d8590;

    font-size: 8px;
}


/* ACTIONS */

.user-actions {
    display: flex;
    align-items: center;

    gap: 7px;
}

.user-action-view {
    min-height: 29px;

    padding: 0 10px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #efadba;
    border-radius: 7px;

    background: white;

    color: #df5870;

    font-size: 8px;
    font-weight: 600;
}

.user-action-view:hover {
    background: #fff4f6;
}

.user-action-menu {
    width: 29px;
    height: 29px;

    display: grid;
    place-items: center;

    border: 1px solid #e6e7e9;
    border-radius: 7px;

    background: white;

    color: #68717d;

    cursor: pointer;
}


/* EMPTY STATE */

.users-empty {
    min-height: 300px;

    display: grid;
    place-content: center;

    text-align: center;
}

.users-empty > span {
    color: #e85d75;

    font-size: 40px;
}

.users-empty h3 {
    margin: 10px 0 4px;

    font-size: 14px;
}

.users-empty p {
    margin: 0 0 15px;

    color: #9198a2;

    font-size: 9px;
}


/* RESPONSIVE */

@media (max-width: 1100px) {

    .users-metrics {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .users-filter-form {
        flex-wrap: wrap;
    }

    .users-search {
        flex: 1;

        min-width: 240px;
    }

}

@media (max-width: 650px) {

    .users-header-actions {
        width: 100%;
    }

    .users-header-actions .btn {
        flex: 1;
    }

    .users-metrics {
        grid-template-columns: 1fr;
    }

    .users-filter-form {
        display: grid;

        grid-template-columns: 1fr;
    }

    .users-search,
    .users-filter-form select {
        width: 100%;
        min-width: 0;
    }

}/* =========================================================
   PREMIUM USER DASHBOARD
========================================================= */

.user-dashboard-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;

    margin-bottom: 19px;
}

.user-dashboard-heading h1 {
    margin: 0;

    color: #20252e;

    font-size: 25px;
    font-weight: 800;

    letter-spacing: -.45px;
}

.user-dashboard-heading p {
    margin: 5px 0 0;

    color: #838b96;

    font-size: 11px;
}

.user-dashboard-heading-actions {
    display: flex;

    gap: 8px;
}


/* TOP KPI */

.user-kpi-grid {
    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 12px;

    margin-bottom: 15px;
}

.user-kpi-card {
    min-height: 143px;

    position: relative;

    padding: 18px;

    background: #fff;

    border: 1px solid #e8e8ec;
    border-radius: 16px;

    box-shadow:
        0 7px 24px rgba(45, 31, 36, .032);

    overflow: hidden;
}

.user-kpi-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    color: #66707d;

    font-size: 10px;
}

.user-kpi-card > strong {
    display: block;

    margin-top: 11px;

    color: #1e2530;

    font-size: 25px;
}

.user-kpi-card > strong small {
    margin-left: 2px;

    color: #989fa9;

    font-size: 10px;
    font-weight: 500;
}

.user-kpi-status {
    display: inline-block;

    margin-top: 7px;

    padding: 4px 7px;

    border-radius: 7px;

    font-size: 8px;
    font-weight: 700;
}

.user-kpi-status.good {
    background: #edf9f1;

    color: #169d50;
}

.user-kpi-card p {
    margin: 7px 0 0;

    color: #9299a3;

    font-size: 8px;
}

.user-kpi-link {
    display: inline-block;

    margin-top: 11px;

    color: #e85d75;

    font-size: 9px;
    font-weight: 600;
}

.user-kpi-symbol {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    background: #fff0f3;

    color: #e85d75;

    font-size: 15px;
}

.mini-ring {
    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    border: 5px solid #e85d75;

    color: #e85d75;

    font-size: 7px;
    font-weight: 800;
}


/* MAIN GRID */

.user-dashboard-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(0, .9fr)
        minmax(0, .9fr);

    gap: 14px;

    margin-bottom: 14px;
}

.user-dashboard-card {
    background: #fff;

    border: 1px solid #e7e7eb;
    border-radius: 16px;

    box-shadow:
        0 7px 24px rgba(43, 29, 34, .03);

    overflow: hidden;
}

.user-card-head {
    min-height: 55px;

    padding: 0 17px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;
}

.user-card-head h3 {
    margin: 0;

    color: #272c35;

    font-size: 13px;
}

.user-card-head a {
    color: #e85d75;

    font-size: 8px;
    font-weight: 600;
}


/* SKIN SCORE */

.skin-score-content {
    min-height: 250px;

    padding: 10px 19px 18px;

    display: grid;

    grid-template-columns: 165px 1fr;

    align-items: center;

    gap: 26px;
}

.large-skin-score {
    width: 155px;
    height: 155px;

    position: relative;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        conic-gradient(
            #18a958 0 85%,
            #e9eeeb 85% 100%
        );
}

.large-skin-score::after {
    content: "";

    position: absolute;

    inset: 13px;

    border-radius: 50%;

    background: white;
}

.large-skin-score-inner {
    position: relative;

    z-index: 2;

    text-align: center;
}

.large-skin-score-inner strong {
    display: block;

    font-size: 39px;
}

.large-skin-score-inner span {
    color: #28313b;

    font-size: 10px;
    font-weight: 700;
}

.skin-score-summary p {
    margin-top: 0;

    color: #6e7784;

    font-size: 9px;

    line-height: 1.65;
}

.skin-progress-row {
    margin-top: 13px;
}

.skin-progress-row > div:first-child {
    display: flex;

    align-items: center;
    justify-content: space-between;

    font-size: 8px;
}

.green-text {
    color: #15a255;
}

.amber-text {
    color: #d88a14;
}

.skin-progress-bar {
    height: 5px;

    margin-top: 6px;

    background: #eef0f1;

    border-radius: 999px;

    overflow: hidden;
}

.skin-progress-bar span {
    display: block;

    height: 100%;

    background: #18a958;

    border-radius: inherit;
}

.skin-progress-bar.amber-bar span {
    background: #f1a32d;
}

.medical-demo-note {
    margin: 0 17px 17px;

    padding: 9px 11px;

    border-radius: 9px;

    background: #fff7f8;

    color: #8c6169;

    font-size: 8px;
}


/* CONCERNS */

.user-concern-list {
    padding: 0 14px 14px;
}

.user-concern-item {
    min-height: 48px;

    display: grid;

    grid-template-columns:
        28px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 8px;

    border-top: 1px solid #f0f0f2;

    color: #4d5661;

    font-size: 9px;
}

.concern-icon {
    color: #e85d75;

    font-size: 13px;
}

.concern-pill {
    padding: 5px 7px;

    border-radius: 999px;

    font-size: 7px;
}

.concern-pill.amber {
    background: #fff6e6;

    color: #bd7610;
}

.concern-pill.rose {
    background: #fff0f3;

    color: #d94e68;
}

.concern-pill.green {
    background: #eefaf2;

    color: #14994d;
}


/* AI SUMMARY */

.ai-summary-card {
    padding-bottom: 16px;

    background:
        linear-gradient(
            145deg,
            #fff 0%,
            #fff8f9 100%
        );
}

.ai-summary-card > p {
    padding: 0 17px;

    color: #69727f;

    font-size: 9px;
    line-height: 1.6;
}

.ai-summary-card ul {
    margin: 13px 17px 17px;

    padding-left: 17px;

    color: #535c67;

    font-size: 8px;

    line-height: 1.9;
}

.ai-summary-button {
    margin: 0 17px;

    width: calc(100% - 34px);
}


/* SECONDARY GRID */

.user-secondary-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 14px;

    margin-bottom: 14px;
}


/* ANALYSIS TABLE */

.user-analysis-table-wrap {
    overflow-x: auto;
}

.user-analysis-table {
    width: 100%;

    border-collapse: collapse;
}

.user-analysis-table th {
    padding: 10px 15px;

    background: #fbfbfc;

    border-top: 1px solid #f0f0f2;
    border-bottom: 1px solid #eeeeef;

    color: #8c939d;

    text-align: left;

    font-size: 8px;
}

.user-analysis-table td {
    padding: 11px 15px;

    border-bottom: 1px solid #f1f1f2;

    color: #525b66;

    font-size: 9px;
}

.user-analysis-score {
    width: 27px;
    height: 27px;

    display: grid;
    place-items: center;

    border: 1px solid #2ab56a;
    border-radius: 50%;

    color: #18a556;

    background: #f5fff8;

    font-size: 8px;
}

.user-table-action {
    display: inline-flex;

    padding: 5px 8px;

    border: 1px solid #f0a9b6;
    border-radius: 6px;

    color: #e65a72;

    font-size: 7px;
}


/* PRODUCT LIST */

.user-product-list {
    padding: 0 14px 14px;
}

.user-product-row {
    min-height: 58px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto
        auto;

    align-items: center;

    gap: 10px;

    border-top: 1px solid #f0f0f2;
}

.user-product-main {
    display: flex;

    align-items: center;

    gap: 10px;

    min-width: 0;
}

.user-product-icon {
    width: 31px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius: 8px;

    background: #f7f7f8;
}

.user-product-main strong {
    display: block;

    overflow: hidden;

    color: #3c434d;

    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 9px;
}

.user-product-main span {
    display: block;

    margin-top: 3px;

    color: #9299a2;

    font-size: 7px;
}

.product-match {
    max-width: 105px;

    color: #169a50;

    font-size: 7px;

    text-align: right;
}


/* LOWER GRID */

.user-lower-grid {
    display: grid;

    grid-template-columns:
        1fr
        1fr
        .8fr;

    gap: 14px;

    margin-bottom: 14px;
}


/* QUICK ACTIONS */

.user-quick-actions {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 10px;

    padding: 13px;
}

.user-quick-actions a {
    text-align: center;

    color: #444c57;
}

.user-quick-actions a > span {
    width: 48px;
    height: 48px;

    margin: auto;

    display: grid;
    place-items: center;

    border: 1px solid #f0d7dd;
    border-radius: 11px;

    background:
        linear-gradient(
            145deg,
            #fff,
            #fff1f4
        );

    color: #e85d75;

    font-size: 17px;
}

.user-quick-actions small {
    display: block;

    margin-top: 6px;

    font-size: 7px;
}


/* ROUTINE PREVIEW */

.routine-preview-card {
    padding-bottom: 10px;
}

.routine-preview-step {
    min-height: 54px;

    margin: 0 14px;

    display: grid;

    grid-template-columns:
        30px
        1fr
        25px;

    align-items: center;

    gap: 10px;

    border-top: 1px solid #f0f0f2;
}

.routine-preview-step > span {
    width: 27px;
    height: 27px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #fff0f3;

    color: #e85d75;

    font-size: 8px;
    font-weight: 700;
}

.routine-preview-step strong {
    display: block;

    color: #404852;

    font-size: 9px;
}

.routine-preview-step small {
    display: block;

    margin-top: 2px;

    color: #969ca5;

    font-size: 7px;
}

.routine-preview-step > b {
    color: #18a958;
}

.routine-preview-step > b.pending {
    color: #e8a42c;
}


/* USER TIP */

.skin-tip-user {
    padding: 18px;

    background:
        linear-gradient(
            145deg,
            #fff,
            #fff3f6
        );
}

.skin-tip-user h3 {
    margin: 12px 0 8px;

    font-size: 17px;
}

.skin-tip-user p {
    color: #737c87;

    font-size: 9px;

    line-height: 1.6;
}


/* EMPTY */

.user-empty-state {
    min-height: 180px;

    display: grid;
    place-content: center;

    padding: 20px;

    text-align: center;
}

.user-empty-state > span {
    color: #e85d75;

    font-size: 27px;
}

.user-empty-state strong {
    margin-top: 7px;

    font-size: 10px;
}

.user-empty-state p {
    max-width: 280px;

    color: #939aa3;

    font-size: 8px;

    line-height: 1.5;
}


/* JOURNEY */

.skin-journey-card {
    padding-bottom: 16px;
}

.skin-journey-line {
    padding: 24px 23px 15px;

    display: flex;
    align-items: flex-start;
}

.journey-stage {
    width: 110px;

    flex: 0 0 110px;

    text-align: center;

    color: #969da6;
}

.journey-stage > span {
    width: 33px;
    height: 33px;

    margin: auto;

    display: grid;
    place-items: center;

    border: 2px solid #dfe3e7;
    border-radius: 50%;

    background: white;

    color: #9aa2ac;

    font-size: 11px;
}

.journey-stage.completed > span {
    border-color: #19a95a;

    background: #19a95a;

    color: white;
}

.journey-stage.current > span {
    border-color: #e85d75;

    background: #fff0f3;

    color: #e85d75;

    box-shadow:
        0 0 0 5px rgba(232,93,117,.1);
}

.journey-stage strong {
    display: block;

    margin-top: 8px;

    color: #525b65;

    font-size: 8px;
}

.journey-stage small {
    display: block;

    margin-top: 3px;

    font-size: 7px;
}

.journey-connector {
    height: 2px;

    flex: 1;

    margin-top: 16px;

    background: #e3e5e7;
}

.journey-connector.active {
    background: #20aa5d;
}


/* RESPONSIVE */

@media (max-width: 1350px) {

    .user-kpi-grid {
        grid-template-columns:
            repeat(3, 1fr);
    }

    .user-dashboard-grid {
        grid-template-columns:
            1fr 1fr;
    }

    .ai-summary-card {
        grid-column: 1 / -1;
    }

}

@media (max-width: 1000px) {

    .user-secondary-grid,
    .user-lower-grid {
        grid-template-columns: 1fr;
    }

    .skin-journey-line {
        overflow-x: auto;
    }

}

@media (max-width: 760px) {

    .user-dashboard-heading {
        align-items: flex-start;

        flex-direction: column;
    }

    .user-dashboard-heading-actions {
        width: 100%;
    }

    .user-dashboard-heading-actions .btn {
        flex: 1;
    }

    .user-kpi-grid,
    .user-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .skin-score-content {
        grid-template-columns: 1fr;

        justify-items: center;
    }

    .skin-score-summary {
        width: 100%;
    }

}

@media (max-width: 480px) {

    .user-quick-actions {
        grid-template-columns:
            repeat(2, 1fr);
    }

}
/* =========================================================
   UNISCARE PREMIUM PUBLIC LANDING PAGE
========================================================= */

.uniscare-home-hero {
    max-width: 1440px;

    min-height: 670px;

    margin: 0 auto;

    padding: 72px 55px 55px;

    display: grid;

    grid-template-columns:
        minmax(0, .95fr)
        minmax(460px, 1.05fr);

    align-items: center;

    gap: 70px;
}


/* HERO COPY */

.home-kicker {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 7px 11px;

    border: 1px solid #f0d9de;

    border-radius: 999px;

    background: #fff5f7;

    color: #df5870;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .8px;
}

.home-hero-content h1 {
    max-width: 650px;

    margin: 22px 0 19px;

    color: #20252d;

    font-size: clamp(48px, 5vw, 75px);

    line-height: .99;

    font-weight: 800;

    letter-spacing: -3px;
}

.home-hero-content h1 span {
    display: block;

    color: #e85d75;
}

.home-hero-copy {
    max-width: 605px;

    margin: 0;

    color: #69727e;

    font-size: 15px;

    line-height: 1.8;
}

.home-hero-actions {
    margin-top: 27px;

    display: flex;

    align-items: center;

    gap: 10px;
}

.home-primary-cta {
    min-width: 178px;
}

.home-trust-row {
    margin-top: 25px;

    display: flex;

    flex-wrap: wrap;

    gap: 17px;
}

.home-trust-row > div {
    display: flex;

    align-items: center;

    gap: 6px;
}

.home-trust-row span {
    width: 19px;
    height: 19px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #effaf3;

    color: #15a152;

    font-size: 9px;
}

.home-trust-row small {
    color: #777f8a;

    font-size: 9px;
}


/* =========================================================
   HERO VISUAL
========================================================= */

.home-hero-visual {
    min-height: 560px;

    position: relative;

    display: grid;

    place-items: center;
}

.hero-visual-glow {
    position: absolute;

    width: 450px;
    height: 450px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(248,165,181,.35),
            rgba(253,236,239,.1) 65%,
            transparent 70%
        );

    filter: blur(3px);
}

.hero-scan-window {
    width: min(100%, 570px);

    position: relative;

    z-index: 3;

    border: 1px solid #eadfe2;

    border-radius: 26px;

    background:
        rgba(255,255,255,.94);

    box-shadow:
        0 30px 80px rgba(91, 45, 59, .12);

    overflow: hidden;
}

.hero-scan-head {
    height: 63px;

    padding: 0 18px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-bottom: 1px solid #f0e9eb;

    background: rgba(255,255,255,.92);
}

.hero-scan-head > div {
    display: flex;

    align-items: center;

    gap: 8px;
}

.scan-status-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #19ad5b;

    box-shadow:
        0 0 0 4px rgba(25,173,91,.1);
}

.hero-scan-head strong {
    color: #3c424c;

    font-size: 10px;
}

.scan-live {
    padding: 5px 8px;

    border-radius: 999px;

    background: #fff0f3;

    color: #e85d75;

    font-size: 7px;
    font-weight: 800;
}


/* FACE */

.hero-face-stage {
    height: 390px;

    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 38%,
            #fff 0%,
            #fff8f9 50%,
            #fde9ed 100%
        );
}

.hero-face-portrait {
    width: 235px;
    height: 340px;

    position: absolute;

    left: 50%;
    bottom: -28px;

    transform: translateX(-50%);
}

.portrait-head {
    width: 175px;
    height: 215px;

    position: absolute;

    left: 30px;
    top: 18px;

    border-radius:
        48% 48%
        44% 44% /
        42% 42%
        56% 56%;

    background:
        radial-gradient(
            circle at 34% 42%,
            #3b2a25 0 4px,
            transparent 5px
        ),
        radial-gradient(
            circle at 66% 42%,
            #3b2a25 0 4px,
            transparent 5px
        ),
        radial-gradient(
            ellipse at 50% 70%,
            #c36e79 0 13px,
            transparent 14px
        ),
        linear-gradient(
            145deg,
            #d49b7f,
            #bd765f
        );

    box-shadow:
        inset 0 18px 40px rgba(255,255,255,.13);
}

.portrait-head::before {
    content: "";

    position: absolute;

    left: 2px;
    right: 2px;
    top: -9px;

    height: 66px;

    border-radius:
        80px 80px
        25px 25px;

    background: #241d1c;
}

.portrait-neck {
    width: 68px;
    height: 92px;

    position: absolute;

    left: 84px;
    top: 206px;

    background:
        linear-gradient(
            145deg,
            #c98971,
            #b66d59
        );
}

.portrait-shoulders {
    width: 235px;
    height: 105px;

    position: absolute;

    left: 0;
    bottom: 0;

    border-radius:
        120px 120px
        0 0;

    background:
        linear-gradient(
            145deg,
            #d4937a,
            #b76e5c
        );
}


/* SCAN LINES */

.scan-line {
    position: absolute;

    left: 50%;

    transform: translateX(-50%);

    width: 265px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #e85d75,
            transparent
        );

    opacity: .5;
}

.scan-line-1 {
    top: 105px;
}

.scan-line-2 {
    top: 195px;
}

.scan-line-3 {
    top: 278px;
}

.scan-point {
    width: 9px;
    height: 9px;

    position: absolute;

    border: 2px solid #e85d75;

    border-radius: 50%;

    background: white;

    box-shadow:
        0 0 0 5px rgba(232,93,117,.09);
}

.point-1 {
    top: 115px;
    left: 48%;
}

.point-2 {
    top: 166px;
    left: 43%;
}

.point-3 {
    top: 205px;
    left: 56%;
}

.point-4 {
    top: 250px;
    left: 49%;
}


/* FLOATING INSIGHTS */

.floating-insight {
    position: absolute;

    min-width: 145px;

    padding: 10px 12px;

    display: flex;

    align-items: center;

    gap: 8px;

    border: 1px solid #eee3e5;

    border-radius: 12px;

    background: rgba(255,255,255,.95);

    box-shadow:
        0 10px 28px rgba(55,32,39,.08);

    backdrop-filter: blur(12px);
}

.floating-insight > span {
    width: 29px;
    height: 29px;

    display: grid;
    place-items: center;

    border-radius: 9px;

    background: #fff0f3;

    color: #e85d75;

    font-size: 12px;
}

.floating-insight strong {
    display: block;

    color: #434a54;

    font-size: 8px;
}

.floating-insight small {
    display: block;

    margin-top: 2px;

    color: #9299a3;

    font-size: 6px;
}

.insight-one {
    top: 42px;
    left: 22px;
}

.insight-two {
    top: 112px;
    right: 18px;
}

.insight-three {
    bottom: 27px;
    left: 20px;
}


/* SCAN FOOTER */

.hero-scan-footer {
    min-height: 78px;

    padding: 13px 18px;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    background: #fff;

    border-top: 1px solid #f0e9eb;
}

.hero-scan-footer > div {
    padding: 4px 12px;

    border-right: 1px solid #f0eef0;
}

.hero-scan-footer > div:last-child {
    border-right: 0;
}

.hero-scan-footer span {
    display: block;

    color: #9198a2;

    font-size: 7px;
}

.hero-scan-footer strong {
    display: block;

    margin-top: 5px;

    color: #313842;

    font-size: 15px;
}

.hero-scan-footer strong small {
    font-size: 7px;

    color: #9aa1aa;
}


/* =========================================================
   PLATFORM STRIP
========================================================= */

.home-platform-strip {
    max-width: 1350px;

    margin: 10px auto 25px;

    padding: 0 30px;

    display: grid;

    grid-template-columns:
        repeat(5, 1fr);

    gap: 1px;
}

.home-platform-strip > div {
    min-height: 100px;

    padding: 18px;

    display: grid;

    grid-template-columns:
        33px 1fr;

    align-content: center;

    column-gap: 9px;

    background: rgba(255,255,255,.9);

    border-top: 1px solid #e9e5e7;
    border-bottom: 1px solid #e9e5e7;
}

.home-platform-strip > div:first-child {
    border-left: 1px solid #e9e5e7;

    border-radius:
        14px 0 0 14px;
}

.home-platform-strip > div:last-child {
    border-right: 1px solid #e9e5e7;

    border-radius:
        0 14px 14px 0;
}

.home-platform-strip > div > span {
    grid-row: 1 / 3;

    width: 33px;
    height: 33px;

    display: grid;
    place-items: center;

    border-radius: 9px;

    background: #fff0f3;

    color: #e85d75;
}

.home-platform-strip strong {
    color: #424954;

    font-size: 9px;
}

.home-platform-strip small {
    color: #9298a1;

    font-size: 7px;
}


/* =========================================================
   GENERAL SECTIONS
========================================================= */

.home-section {
    max-width: 1350px;

    margin: 0 auto;

    padding: 90px 40px;
}

.home-soft-section {
    max-width: none;

    padding-left: max(
        40px,
        calc((100vw - 1270px) / 2)
    );

    padding-right: max(
        40px,
        calc((100vw - 1270px) / 2)
    );

    background:
        linear-gradient(
            145deg,
            rgba(248,248,250,.8),
            rgba(253,236,239,.48)
        );

    border-top: 1px solid #f0e7e9;
    border-bottom: 1px solid #f0e7e9;
}

.home-section-heading {
    max-width: 730px;

    margin-bottom: 38px;
}

.home-section-heading h2 {
    margin: 15px 0 12px;

    color: #242932;

    font-size: 42px;

    line-height: 1.1;

    letter-spacing: -1.5px;
}

.home-section-heading p {
    color: #737c87;

    font-size: 12px;

    line-height: 1.8;
}


/* =========================================================
   FEATURES
========================================================= */

.home-feature-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 15px;
}

.home-feature-card {
    min-height: 235px;

    padding: 23px;

    border: 1px solid #e8e6e8;

    border-radius: 17px;

    background: rgba(255,255,255,.96);

    box-shadow:
        0 8px 26px rgba(45,30,36,.025);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.home-feature-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 15px 35px rgba(55,32,41,.07);
}

.home-feature-icon {
    width: 43px;
    height: 43px;

    display: grid;
    place-items: center;

    border-radius: 11px;

    background:
        linear-gradient(
            145deg,
            #fff7f9,
            #fde1e7
        );

    color: #e85d75;

    font-size: 16px;
}

.home-feature-card h3 {
    margin: 19px 0 9px;

    color: #363c46;

    font-size: 14px;
}

.home-feature-card p {
    color: #79818c;

    font-size: 9px;

    line-height: 1.7;
}

.home-feature-card a {
    display: inline-block;

    margin-top: 12px;

    color: #e85d75;

    font-size: 8px;
    font-weight: 700;
}

.feature-highlight {
    background:
        linear-gradient(
            145deg,
            #fff,
            #fff2f5
        );
}


/* =========================================================
   PROCESS
========================================================= */

.home-process-grid {
    display: grid;

    grid-template-columns:
        1fr auto
        1fr auto
        1fr auto
        1fr;

    align-items: center;

    gap: 14px;
}

.home-process-step {
    min-height: 220px;

    position: relative;

    padding: 22px;

    border: 1px solid #e9e6e8;

    border-radius: 16px;

    background: white;
}

.process-number {
    position: absolute;

    right: 15px;
    top: 14px;

    color: #edbdc6;

    font-size: 24px;
    font-weight: 800;
}

.process-icon {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border-radius: 11px;

    background: #fff0f3;

    color: #e85d75;
}

.home-process-step h3 {
    margin: 22px 0 8px;

    font-size: 14px;
}

.home-process-step p {
    color: #7c8490;

    font-size: 9px;

    line-height: 1.7;
}

.process-arrow {
    color: #e79aaa;

    font-size: 18px;
}


/* =========================================================
   PRODUCT SAFETY
========================================================= */

.product-safety-section {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(400px, .85fr);

    align-items: center;

    gap: 80px;
}

.product-safety-copy h2,
.station-home-copy h2 {
    max-width: 600px;

    margin: 16px 0 15px;

    font-size: 42px;

    line-height: 1.1;

    letter-spacing: -1.5px;
}

.product-safety-copy > p,
.station-home-copy > p {
    max-width: 610px;

    color: #747d88;

    font-size: 11px;

    line-height: 1.8;
}

.safety-check-list {
    margin: 24px 0;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 11px;
}

.safety-check-list span {
    color: #535c67;

    font-size: 9px;
}


/* PRODUCT CHECK */

.product-check-demo {
    padding: 19px;

    border: 1px solid #eadfe2;

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            #fff,
            #fff8f9
        );

    box-shadow:
        0 18px 50px rgba(70,41,50,.08);
}

.product-check-header {
    min-height: 65px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-bottom: 1px solid #eee9ea;
}

.product-check-header > div {
    display: flex;

    align-items: center;

    gap: 10px;
}

.product-demo-icon {
    width: 40px;
    height: 45px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    background: #f7f7f8;
}

.product-check-header strong {
    display: block;

    font-size: 10px;
}

.product-check-header small {
    display: block;

    margin-top: 3px;

    color: #9299a3;

    font-size: 7px;
}

.compatibility-score {
    width: 45px;
    height: 45px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    border: 5px solid #19aa5a;

    color: #17994f;

    font-size: 9px;
    font-weight: 800;
}

.product-check-row {
    min-height: 52px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-bottom: 1px solid #f1eef0;

    color: #606975;

    font-size: 9px;
}

.product-check-row strong {
    font-size: 8px;
}

.product-check-row .safe {
    color: #17a254;
}

.product-check-row .warning {
    color: #d88915;
}

.product-check-result {
    margin-top: 15px;

    padding: 13px;

    display: flex;

    gap: 10px;

    border-radius: 12px;

    background: #fff0f3;
}

.product-check-result > span {
    color: #e85d75;
}

.product-check-result strong {
    color: #444b56;

    font-size: 9px;
}

.product-check-result p {
    margin: 4px 0 0;

    color: #777f8a;

    font-size: 8px;

    line-height: 1.5;
}


/* =========================================================
   SKIN STATION
========================================================= */

.station-home-card {
    min-height: 470px;

    padding: 48px;

    display: grid;

    grid-template-columns:
        minmax(350px, .8fr)
        minmax(0, 1fr);

    align-items: center;

    gap: 75px;

    border: 1px solid #e9dfe2;

    border-radius: 26px;

    background:
        linear-gradient(
            135deg,
            #fff 0%,
            #fff7f9 55%,
            #fde7ec 100%
        );

    overflow: hidden;
}

.station-device-visual {
    min-height: 350px;

    display: grid;

    place-items: center;

    position: relative;
}

.station-device-visual::before {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(232,93,117,.17),
            transparent 68%
        );
}

.station-machine {
    width: 205px;
    height: 310px;

    position: relative;

    z-index: 2;
}

.machine-camera {
    width: 155px;
    height: 74px;

    position: absolute;

    left: 25px;
    top: 10px;

    border-radius:
        22px 22px
        12px 12px;

    background:
        linear-gradient(
            145deg,
            #f2f2f4,
            #d4d4d8
        );

    box-shadow:
        0 15px 30px rgba(58,52,54,.12);
}

.machine-camera::before {
    content: "";

    width: 30px;
    height: 30px;

    position: absolute;

    left: 28px;
    top: 21px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #1d2128 0 8px,
            #48505c 9px 13px,
            #121519 14px
        );
}

.machine-camera.second::before {
    left: 92px;
}

.machine-arm {
    width: 36px;
    height: 190px;

    position: absolute;

    left: 85px;
    top: 76px;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #d6d6d9,
            #f1f1f3
        );
}

.machine-base {
    width: 145px;
    height: 35px;

    position: absolute;

    left: 30px;
    bottom: 16px;

    border-radius:
        50% 50%
        12px 12px;

    background:
        linear-gradient(
            145deg,
            #dddde0,
            #f6f6f7
        );

    box-shadow:
        0 12px 25px rgba(48,44,45,.12);
}

.station-capabilities {
    margin: 23px 0;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 12px;
}

.station-capabilities span {
    color: #59626d;

    font-size: 9px;
}


/* =========================================================
   ECOSYSTEM
========================================================= */

.ecosystem-flow {
    display: flex;

    align-items: center;

    justify-content: center;
}

.ecosystem-node {
    width: 170px;
    min-height: 145px;

    padding: 19px 13px;

    display: grid;

    align-content: center;

    justify-items: center;

    text-align: center;

    border: 1px solid #e8e6e8;

    border-radius: 16px;

    background: white;
}

.ecosystem-node.active {
    border-color: #f0c7d0;

    background:
        linear-gradient(
            145deg,
            #fff,
            #fff1f4
        );
}

.ecosystem-node > span {
    width: 39px;
    height: 39px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    background: #fff0f3;

    color: #e85d75;
}

.ecosystem-node strong {
    margin-top: 12px;

    color: #424954;

    font-size: 9px;
}

.ecosystem-node small {
    margin-top: 4px;

    color: #9299a3;

    font-size: 7px;
}

.ecosystem-link {
    width: 40px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            #e3cbd0,
            #e85d75,
            #e3cbd0
        );
}


/* =========================================================
   SAFETY
========================================================= */

.home-safety-banner {
    min-height: 260px;

    padding: 45px;

    display: grid;

    grid-template-columns:
        80px
        minmax(0, 1fr);

    gap: 30px;

    align-items: center;

    border: 1px solid #dfebe7;

    border-radius: 23px;

    background:
        linear-gradient(
            145deg,
            #f8fdfb,
            #ffffff
        );
}

.home-safety-icon {
    width: 75px;
    height: 75px;

    display: grid;
    place-items: center;

    border-radius: 22px;

    background: #eef9f5;

    color: #0f766e;

    font-size: 27px;
}

.home-safety-banner h2 {
    max-width: 720px;

    margin: 15px 0 10px;

    font-size: 32px;
}

.home-safety-banner p {
    max-width: 840px;

    color: #727b85;

    font-size: 10px;

    line-height: 1.75;
}


/* =========================================================
   FINAL CTA
========================================================= */

.home-final-cta {
    max-width: 1260px;

    min-height: 365px;

    margin: 30px auto 90px;

    padding: 65px;

    display: grid;

    place-items: center;

    text-align: center;

    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            #fff1f4 0%,
            #fbcbd5 58%,
            #f58aa0 100%
        );

    overflow: hidden;
}

.home-final-cta > div {
    max-width: 720px;
}

.home-final-cta h2 {
    margin: 15px 0 12px;

    font-size: 45px;

    line-height: 1.08;

    letter-spacing: -1.7px;
}

.home-final-cta p {
    color: #685b61;

    font-size: 11px;
}

.home-final-cta .home-hero-actions {
    justify-content: center;
}


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

@media (max-width: 1100px) {

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

        padding-top: 55px;
    }

    .home-hero-content {
        text-align: center;
    }

    .home-hero-content h1,
    .home-hero-copy {
        margin-left: auto;
        margin-right: auto;
    }

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

    .home-platform-strip {
        grid-template-columns:
            repeat(3, 1fr);
    }

    .home-platform-strip > div {
        border: 1px solid #e9e5e7;

        border-radius: 12px !important;
    }

    .home-feature-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

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

    .process-arrow {
        display: none;
    }

    .product-safety-section,
    .station-home-card {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .ecosystem-flow {
        flex-wrap: wrap;

        gap: 10px;
    }

    .ecosystem-link {
        display: none;
    }

}


@media (max-width: 700px) {

    .uniscare-home-hero {
        min-height: auto;

        padding:
            45px
            18px
            35px;
    }

    .home-hero-content h1 {
        font-size: 47px;

        letter-spacing: -2px;
    }

    .home-hero-actions {
        flex-direction: column;
    }

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

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

    .hero-scan-window {
        width: 100%;
    }

    .floating-insight {
        transform: scale(.85);
    }

    .insight-one {
        left: 4px;
    }

    .insight-two {
        right: 2px;
    }

    .home-platform-strip {
        grid-template-columns: 1fr;

        padding: 0 18px;
    }

    .home-section {
        padding:
            65px
            18px;
    }

    .home-soft-section {
        padding-left: 18px;
        padding-right: 18px;
    }

    .home-section-heading h2,
    .product-safety-copy h2,
    .station-home-copy h2 {
        font-size: 34px;
    }

    .home-feature-grid,
    .home-process-grid,
    .safety-check-list,
    .station-capabilities {
        grid-template-columns: 1fr;
    }

    .home-feature-card {
        min-height: auto;
    }

    .product-check-demo {
        padding: 14px;
    }

    .station-home-card {
        padding: 28px 18px;
    }

    .home-safety-banner {
        grid-template-columns: 1fr;

        padding: 28px 20px;
    }

    .home-final-cta {
        margin:
            20px
            18px
            60px;

        padding:
            50px
            20px;
    }

    .home-final-cta h2 {
        font-size: 35px;
    }

}/* =========================================================
   UNISCARE CONSULTATIONS
========================================================= */

.consultation-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 13px;
    margin-bottom: 15px;
}

.consult-kpi-card {
    min-height: 112px;
    padding: 17px;
    display: flex;
    align-items: center;
    gap: 13px;
    background: #fff;
    border: 1px solid #e8e8ec;
    border-radius: 15px;
    box-shadow: 0 7px 24px rgba(42,30,35,.03);
}

.consult-kpi-icon {
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #fff0f3;
    color: #e85d75;
    font-size: 18px;
}

.consult-kpi-icon.green {
    background: #eefaf2;
    color: #16a34a;
}

.consult-kpi-icon.teal {
    background: #eef9f7;
    color: #0f766e;
}

.consult-kpi-icon.rose {
    background: #fff0f3;
    color: #e85d75;
}

.consult-kpi-card small {
    display: block;
    color: #77808c;
    font-size: 9px;
}

.consult-kpi-card strong {
    display: block;
    margin: 4px 0;
    color: #242a33;
    font-size: 20px;
}

.consult-kpi-card div > span {
    color: #989fa8;
    font-size: 7px;
}

.consultation-main-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr) 300px;
    gap: 15px;
    align-items: start;
}

.consultation-primary,
.consultation-side {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.consult-card {
    background: #fff;
    border: 1px solid #e8e8ec;
    border-radius: 16px;
    box-shadow: 0 7px 24px rgba(42,30,35,.03);
    overflow: hidden;
}

.consult-card-head {
    min-height: 64px;
    padding: 0 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid #efeff1;
}

.consult-card-head h3 {
    margin: 0;
    font-size: 13px;
}

.consult-card-head p {
    margin: 4px 0 0;
    color: #969ca5;
    font-size: 8px;
}

.consult-status {
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 7px;
    font-weight: 700;
}

.consult-status.requested {
    background: #fff7e8;
    color: #bb7811;
}

.consult-status.confirmed {
    background: #eefaf2;
    color: #169a50;
}

.consult-status.completed {
    background: #eef5ff;
    color: #326fa8;
}

.consult-status.cancelled {
    background: #fff0f2;
    color: #d44e63;
}

.upcoming-consultation {
    padding: 20px;
    display: grid;
    grid-template-columns: 52px minmax(0,1fr) auto;
    align-items: center;
    gap: 14px;
}

.consult-derm-avatar {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(145deg,#eab4a3,#975646);
    color: #fff;
    font-weight: 800;
}

.upcoming-consult-info strong {
    display: block;
    color: #39414b;
    font-size: 11px;
}

.upcoming-consult-info > span {
    display: block;
    margin-top: 3px;
    color: #8c939d;
    font-size: 8px;
}

.consult-date-time {
    margin-top: 9px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    color: #5f6874;
    font-size: 8px;
}

.upcoming-consult-actions {
    display: flex;
    gap: 7px;
}

.consult-note {
    margin: 0 20px 20px;
    padding: 12px;
    border-radius: 10px;
    background: #fff8f9;
    color: #69717c;
}

.consult-note strong {
    font-size: 8px;
}

.consult-note p {
    margin: 5px 0 0;
    font-size: 8px;
    line-height: 1.6;
}

.referral-grid {
    padding: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.referral-item {
    min-height: 112px;
    padding: 14px;
    display: flex;
    gap: 10px;
    border: 1px solid #eeecef;
    border-radius: 12px;
    background: #fff;
}

.referral-item > span {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #fff0f3;
    color: #e85d75;
}

.referral-item strong {
    display: block;
    color: #444c56;
    font-size: 9px;
}

.referral-item p {
    margin: 5px 0 0;
    color: #7f8791;
    font-size: 8px;
    line-height: 1.55;
}

.dermatologist-list {
    padding: 0 13px 13px;
}

.dermatologist-row {
    min-height: 59px;
    display: grid;
    grid-template-columns: 36px minmax(0,1fr) auto;
    align-items: center;
    gap: 9px;
    border-top: 1px solid #f0f0f2;
}

.dermatologist-avatar {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(145deg,#eab6a5,#945445);
    color: white;
    font-size: 9px;
}

.dermatologist-row strong {
    display: block;
    font-size: 9px;
}

.dermatologist-row div > span {
    display: block;
    margin-top: 2px;
    color: #969ca5;
    font-size: 7px;
}

.dermatologist-book-btn,
.consult-history-action {
    min-height: 28px;
    padding: 0 9px;
    border: 1px solid #efadba;
    border-radius: 7px;
    background: white;
    color: #e15b73;
    cursor: pointer;
    font-size: 7px;
}

.lab-connect-card,
.consult-ai-card {
    padding: 18px;
}

.lab-connect-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #fff0f3;
    color: #e85d75;
}

.lab-connect-card h3,
.consult-ai-card h3 {
    margin: 13px 0 7px;
    font-size: 12px;
}

.lab-connect-card p,
.consult-ai-card p {
    color: #7b838e;
    font-size: 8px;
    line-height: 1.65;
}

.lab-connect-steps {
    margin: 14px 0;
    display: grid;
    gap: 7px;
}

.lab-connect-steps span {
    color: #5d6671;
    font-size: 8px;
}

.consult-history-table-wrap {
    overflow-x: auto;
}

.consult-history-table {
    width: 100%;
    border-collapse: collapse;
}

.consult-history-table th,
.consult-history-table td {
    padding: 11px 14px;
    text-align: left;
    border-bottom: 1px solid #efeff1;
    font-size: 8px;
}

.consult-history-table th {
    color: #8e959f;
    background: #fbfbfc;
}

.consult-empty {
    min-height: 210px;
    display: grid;
    place-content: center;
    justify-items: center;
    padding: 20px;
    text-align: center;
}

.consult-empty.compact {
    min-height: 150px;
}

.consult-empty > span {
    color: #e85d75;
    font-size: 28px;
}

.consult-empty strong {
    margin-top: 8px;
    font-size: 10px;
}

.consult-empty p {
    max-width: 300px;
    color: #9299a2;
    font-size: 8px;
    line-height: 1.5;
}

.consult-booking-modal[hidden] {
    display: none !important;
}

.consult-booking-modal {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: grid;
    place-items: center;
    padding: 20px;
}

.consult-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(23,23,28,.46);
    backdrop-filter: blur(5px);
}

.consult-modal-card {
    width: min(100%,560px);
    max-height: calc(100vh - 40px);
    position: relative;
    z-index: 2;
    overflow-y: auto;
    border-radius: 19px;
    background: #fff;
    box-shadow: 0 30px 90px rgba(0,0,0,.18);
}

.consult-modal-head {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    gap: 15px;
    border-bottom: 1px solid #eeeeef;
}

.consult-modal-head h2 {
    margin: 9px 0 4px;
    font-size: 19px;
}

.consult-modal-head p {
    margin: 0;
    color: #8e959f;
    font-size: 8px;
}

.consult-modal-head > button {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: #f7f7f8;
    cursor: pointer;
}

.consult-booking-form {
    padding: 20px;
}

.consult-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px;
}

.consult-booking-note {
    margin: 12px 0 16px;
    padding: 11px;
    border-radius: 10px;
    background: #fff8f9;
    color: #865f67;
    font-size: 8px;
    line-height: 1.6;
}

@media (max-width: 1100px) {
    .consultation-kpis {
        grid-template-columns: repeat(2,1fr);
    }

    .consultation-main-grid {
        grid-template-columns: 1fr;
    }

    .consultation-side {
        display: grid;
        grid-template-columns: repeat(2,1fr);
    }
}

@media (max-width: 700px) {
    .consultation-kpis,
    .consultation-side,
    .referral-grid,
    .consult-form-grid {
        grid-template-columns: 1fr;
    }

    .upcoming-consultation {
        grid-template-columns: 1fr;
    }

    .upcoming-consult-actions {
        flex-direction: column;
    }

    .upcoming-consult-actions .btn {
        width: 100%;
    }
}/* =========================================================
   UNISCARE PROGRESS TRACKING
========================================================= */

.progress-page-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.progress-page-heading h1 {
    margin: 0;
    color: #222831;
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -.4px;
}

.progress-page-heading p {
    margin: 5px 0 0;
    color: #818995;
    font-size: 10px;
}


/* KPI */

.progress-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 13px;
    margin-bottom: 15px;
}

.progress-kpi-card {
    min-height: 118px;
    padding: 17px;
    display: flex;
    align-items: center;
    gap: 13px;
    background: #fff;
    border: 1px solid #e8e8ec;
    border-radius: 15px;
    box-shadow: 0 7px 24px rgba(42,30,35,.03);
}

.progress-kpi-icon {
    width: 45px;
    height: 45px;
    flex: 0 0 45px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #fff0f3;
    color: #e85d75;
    font-size: 18px;
}

.progress-kpi-icon.rose {
    background: #fff0f3;
    color: #e85d75;
}

.progress-kpi-icon.green {
    background: #eefaf2;
    color: #16a34a;
}

.progress-kpi-icon.teal {
    background: #eef9f7;
    color: #0f766e;
}

.progress-kpi-card small {
    display: block;
    color: #7c8590;
    font-size: 8px;
}

.progress-kpi-card strong {
    display: block;
    margin: 4px 0;
    color: #262d36;
    font-size: 20px;
}

.progress-kpi-card strong small {
    display: inline;
    color: #9aa1aa;
    font-size: 8px;
    font-weight: 500;
}

.progress-date-value {
    font-size: 13px !important;
}

.progress-trend {
    display: block;
    font-size: 7px;
}

.progress-trend.positive {
    color: #16a34a;
}

.progress-trend.negative {
    color: #d94d64;
}

.progress-trend.neutral {
    color: #969da6;
}


/* MAIN GRID */

.progress-main-grid {
    display: grid;
    grid-template-columns: minmax(0,1.4fr) minmax(280px,.6fr);
    gap: 15px;
    margin-bottom: 15px;
}

.progress-card {
    background: #fff;
    border: 1px solid #e8e8ec;
    border-radius: 16px;
    box-shadow: 0 7px 24px rgba(42,30,35,.03);
    overflow: hidden;
}

.progress-card-head {
    min-height: 62px;
    padding: 0 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 13px;
    border-bottom: 1px solid #efeff1;
}

.progress-card-head h3 {
    margin: 0;
    font-size: 13px;
}

.progress-card-head p {
    margin: 4px 0 0;
    color: #959ca5;
    font-size: 8px;
}


/* CHART */

.progress-chart-area {
    min-height: 330px;
    position: relative;
    padding: 18px 18px 36px;
    background:
        repeating-linear-gradient(
            to bottom,
            #fff 0,
            #fff 58px,
            #f0f1f2 59px
        );
}

.progress-chart-area svg {
    width: 100%;
    height: 250px;
}

.progress-chart-labels {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 0 7px;
    color: #8e959f;
    font-size: 7px;
}


/* LATEST */

.latest-progress-card {
    min-height: 100%;
}

.latest-progress-score {
    padding: 18px 15px 8px;
    display: grid;
    place-items: center;
}

.latest-score-ring {
    width: 135px;
    height: 135px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background:
        conic-gradient(
            #18a958 0 85%,
            #e9eeeb 85% 100%
        );
    position: relative;
}

.latest-score-ring::before {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    background: #fff;
}

.latest-score-ring > div {
    position: relative;
    z-index: 2;
    text-align: center;
}

.latest-score-ring strong {
    font-size: 31px;
}

.latest-score-ring span {
    color: #9299a3;
    font-size: 8px;
}

.latest-progress-list {
    padding: 8px 15px 14px;
}

.latest-progress-list > div {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #f0f0f2;
    color: #59616d;
    font-size: 8px;
}

.latest-progress-list strong {
    color: #e85d75;
    font-size: 8px;
}

.progress-small-note {
    margin: 0 15px 15px;
    padding: 10px;
    border-radius: 9px;
    background: #fff8f9;
    color: #89636a;
    font-size: 7px;
    line-height: 1.55;
}


/* CONCERN TRENDS */

.progress-concerns-card {
    margin-bottom: 15px;
}

.concern-progress-grid {
    padding: 17px;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 13px;
}

.concern-progress-item {
    padding: 14px;
    border: 1px solid #eeecef;
    border-radius: 12px;
    background: #fff;
}

.concern-progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #626b76;
    font-size: 8px;
}

.concern-progress-head strong {
    color: #e85d75;
}

.concern-track {
    height: 6px;
    margin: 10px 0 7px;
    overflow: hidden;
    border-radius: 999px;
    background: #eeeeef;
}

.concern-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg,#f8a5b5,#e85d75);
}

.concern-progress-item small {
    color: #959ca5;
    font-size: 7px;
}


/* TIMELINE */

.progress-timeline {
    padding: 18px;
}

.progress-timeline-item {
    display: grid;
    grid-template-columns: 42px minmax(0,1fr);
    position: relative;
}

.progress-timeline-item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 17px;
    top: 35px;
    bottom: -5px;
    width: 2px;
    background: #ecd9de;
}

.progress-timeline-marker {
    position: relative;
    z-index: 2;
}

.progress-timeline-marker span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff0f3;
    border: 2px solid #e85d75;
    color: #e85d75;
    font-size: 10px;
}

.progress-timeline-content {
    margin-bottom: 18px;
    padding: 14px;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 10px;
    border: 1px solid #eeecef;
    border-radius: 12px;
}

.progress-timeline-content > div:first-child strong {
    display: block;
    color: #424a54;
    font-size: 9px;
}

.progress-timeline-content > div:first-child span {
    display: block;
    margin-top: 3px;
    color: #979da5;
    font-size: 7px;
}

.timeline-score {
    color: #e85d75;
    font-size: 18px;
    font-weight: 800;
}

.timeline-score small {
    color: #9aa0a8;
    font-size: 7px;
}

.timeline-concerns {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.timeline-concerns span {
    padding: 5px 7px;
    border-radius: 999px;
    background: #faf7f8;
    color: #6f7781;
    font-size: 7px;
}

.progress-view-link {
    grid-column: 1 / -1;
    color: #e85d75;
    font-size: 7px;
    font-weight: 700;
}


/* EMPTY */

.progress-empty {
    min-height: 290px;
    display: grid;
    place-content: center;
    justify-items: center;
    padding: 20px;
    text-align: center;
}

.progress-empty.compact {
    min-height: 160px;
}

.progress-empty > span {
    color: #e85d75;
    font-size: 30px;
}

.progress-empty strong {
    margin-top: 8px;
    font-size: 10px;
}

.progress-empty p {
    max-width: 300px;
    color: #9299a3;
    font-size: 8px;
    line-height: 1.5;
}


/* NEXT STEP */

.progress-next-step {
    min-height: 170px;
    margin-top: 15px;
    padding: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    border: 1px solid #efd7dd;
    border-radius: 17px;
    background:
        linear-gradient(
            135deg,
            #fff,
            #fff0f3
        );
}

.progress-next-step h2 {
    margin: 10px 0 8px;
    color: #303640;
    font-size: 22px;
}

.progress-next-step p {
    max-width: 720px;
    margin: 0;
    color: #727b86;
    font-size: 9px;
    line-height: 1.65;
}

.progress-next-actions {
    min-width: 180px;
    display: grid;
    gap: 8px;
}


/* RESPONSIVE */

@media (max-width: 1100px) {

    .progress-kpi-grid,
    .concern-progress-grid {
        grid-template-columns: repeat(2,1fr);
    }

    .progress-main-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 700px) {

    .progress-page-heading,
    .progress-next-step {
        align-items: flex-start;
        flex-direction: column;
    }

    .progress-page-heading .btn,
    .progress-next-actions,
    .progress-next-actions .btn {
        width: 100%;
    }

    .progress-kpi-grid,
    .concern-progress-grid {
        grid-template-columns: 1fr;
    }

    .progress-chart-area {
        overflow-x: auto;
    }

    .progress-chart-area svg {
        min-width: 620px;
    }

    .progress-chart-labels {
        min-width: 620px;
    }

}/* =========================================================
   UNISCARE PERSONALIZED ROUTINE
========================================================= */

.routine-page-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.routine-page-heading h1 {
    margin: 0;
    color: #222831;
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -.4px;
}

.routine-page-heading p {
    margin: 5px 0 0;
    color: #818995;
    font-size: 10px;
}

.routine-heading-actions {
    display: flex;
    gap: 8px;
}


/* KPI */

.routine-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 13px;
    margin-bottom: 15px;
}

.routine-kpi-card {
    min-height: 108px;
    padding: 17px;
    display: flex;
    align-items: center;
    gap: 13px;
    background: #fff;
    border: 1px solid #e8e8ec;
    border-radius: 15px;
    box-shadow: 0 7px 24px rgba(42,30,35,.03);
}

.routine-kpi-icon {
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #fff7e9;
    color: #e5a01c;
    font-size: 17px;
}

.routine-kpi-icon.night {
    background: #f3f1fb;
    color: #7866a8;
}

.routine-kpi-icon.green {
    background: #eefaf2;
    color: #16a34a;
}

.routine-kpi-icon.rose {
    background: #fff0f3;
    color: #e85d75;
}

.routine-kpi-card small {
    display: block;
    color: #7d8590;
    font-size: 8px;
}

.routine-kpi-card strong {
    display: block;
    margin: 4px 0;
    color: #29303a;
    font-size: 19px;
}

.routine-kpi-card div > span {
    color: #969da6;
    font-size: 7px;
}

.routine-focus-text {
    font-size: 14px !important;
}


/* PROFILE */

.routine-profile-banner {
    min-height: 135px;
    margin-bottom: 15px;
    padding: 22px;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
    gap: 25px;
    border: 1px solid #efd9df;
    border-radius: 17px;
    background: linear-gradient(135deg,#fff,#fff1f4);
}

.routine-profile-banner h2 {
    max-width: 600px;
    margin: 10px 0 0;
    color: #303640;
    font-size: 19px;
}

.routine-profile-values {
    display: grid;
    grid-template-columns: repeat(4,105px);
    gap: 8px;
}

.routine-profile-values > div {
    padding: 11px;
    border: 1px solid rgba(232,93,117,.13);
    border-radius: 10px;
    background: rgba(255,255,255,.65);
}

.routine-profile-values small {
    display: block;
    color: #8f969f;
    font-size: 7px;
}

.routine-profile-values strong {
    display: block;
    margin-top: 4px;
    font-size: 9px;
}


/* ROUTINE CARDS */

.routine-main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 15px;
}

.routine-card {
    background: #fff;
    border: 1px solid #e8e8ec;
    border-radius: 16px;
    box-shadow: 0 7px 24px rgba(42,30,35,.03);
    overflow: hidden;
}

.routine-card-head {
    min-height: 69px;
    padding: 0 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #efeff1;
}

.routine-card-head > div:first-child {
    display: flex;
    align-items: center;
    gap: 10px;
}

.routine-card-head h3 {
    margin: 0;
    color: #353c46;
    font-size: 12px;
}

.routine-card-head p {
    margin: 3px 0 0;
    color: #949ba4;
    font-size: 7px;
}

.routine-card-icon {
    width: 37px;
    height: 37px;
    flex: 0 0 37px;
    display: grid;
    place-items: center;
    border-radius: 10px;
}

.routine-card-icon.morning {
    background: #fff7e7;
    color: #e49c16;
}

.routine-card-icon.evening {
    background: #f2effb;
    color: #7760a7;
}

.routine-card-icon.weekly {
    background: #fff0f3;
    color: #e85d75;
}

.routine-card-icon.warning {
    background: #fff8e7;
    color: #e29a18;
}

.routine-card-icon.green {
    background: #eefaf2;
    color: #16a34a;
}

.routine-time {
    padding: 5px 8px;
    border-radius: 999px;
    background: #f6f6f7;
    color: #757d88;
    font-size: 7px;
}


/* STEPS */

.routine-step-list {
    padding: 0 15px 10px;
}

.enhanced-routine-step {
    min-height: 100px;
    display: grid;
    grid-template-columns: 31px 31px minmax(0,1fr) auto;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #f0f0f2;
}

.enhanced-routine-step:last-child {
    border-bottom: 0;
}

.routine-check {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 1px solid #dfe2e5;
    border-radius: 50%;
    background: #fff;
    color: transparent;
    cursor: pointer;
}

.routine-check.completed {
    border-color: #19aa5a;
    background: #19aa5a;
    color: #fff;
}

.routine-step-number {
    color: #d8a0ab;
    font-size: 8px;
    font-weight: 800;
}

.routine-step-copy strong {
    display: block;
    color: #3c444e;
    font-size: 9px;
}

.routine-step-copy p {
    margin: 5px 0 7px;
    color: #838b95;
    font-size: 7px;
    line-height: 1.55;
}

.routine-tag {
    display: inline-flex;
    padding: 4px 7px;
    border-radius: 999px;
    background: #f7f7f8;
    color: #747d87;
    font-size: 6px;
}

.routine-tag.important {
    background: #fff0f3;
    color: #dc526a;
}

.routine-tag.caution {
    background: #fff7e7;
    color: #b97911;
}

.enhanced-routine-step > a {
    color: #e85d75;
    font-size: 7px;
    font-weight: 600;
}


/* SECONDARY */

.routine-secondary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 15px;
}

.weekly-routine-grid {
    padding: 15px;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
}

.weekly-routine-item {
    min-height: 130px;
    padding: 14px;
    border: 1px solid #eeecef;
    border-radius: 12px;
}

.weekly-routine-item > span {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #fff0f3;
    color: #e85d75;
}

.weekly-routine-item strong {
    display: block;
    margin-top: 11px;
    color: #454d57;
    font-size: 8px;
}

.weekly-routine-item p {
    color: #818994;
    font-size: 7px;
    line-height: 1.55;
}


/* COMPATIBILITY */

.compatibility-list {
    padding: 4px 15px 5px;
}

.compatibility-list > div {
    min-height: 69px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #f0f0f2;
}

.compatibility-status {
    width: 29px;
    height: 29px;
    flex: 0 0 29px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 8px;
    font-weight: 800;
}

.compatibility-status.caution {
    background: #fff6e6;
    color: #c07a0e;
}

.compatibility-status.good {
    background: #eefaf2;
    color: #16a34a;
}

.compatibility-list strong {
    display: block;
    font-size: 8px;
}

.compatibility-list p {
    margin: 3px 0 0;
    color: #858d97;
    font-size: 7px;
}

.compatibility-button {
    margin: 12px 15px 15px;
    width: calc(100% - 30px);
}


/* PROGRESS */

.routine-progress-card {
    margin-bottom: 15px;
}

.routine-progress-label {
    padding: 5px 8px;
    border-radius: 999px;
    background: #eefaf2;
    color: #169b50;
    font-size: 7px;
    font-weight: 700;
}

.routine-progress-body {
    padding: 17px;
}

.routine-progress-track {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #eeeeef;
}

.routine-progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg,#f8a5b5,#e85d75);
    transition: width .3s ease;
}

.routine-progress-message {
    margin-top: 11px;
}

.routine-progress-message strong {
    display: block;
    color: #444c56;
    font-size: 9px;
}

.routine-progress-message small {
    display: block;
    margin-top: 3px;
    color: #959ca5;
    font-size: 7px;
}


/* SAFETY */

.routine-safety-note {
    min-height: 115px;
    padding: 18px;
    display: grid;
    grid-template-columns: 45px minmax(0,1fr) auto;
    align-items: center;
    gap: 14px;
    border: 1px solid #dcebe5;
    border-radius: 15px;
    background: linear-gradient(145deg,#f8fdfb,#fff);
}

.routine-safety-note > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #edf8f4;
    color: #0f766e;
    font-size: 18px;
}

.routine-safety-note strong {
    display: block;
    color: #3f4a48;
    font-size: 9px;
}

.routine-safety-note p {
    max-width: 750px;
    margin: 5px 0 0;
    color: #73807c;
    font-size: 7px;
    line-height: 1.6;
}


/* RESPONSIVE */

@media (max-width: 1150px) {

    .routine-kpi-grid {
        grid-template-columns: repeat(2,1fr);
    }

    .routine-profile-banner {
        grid-template-columns: 1fr;
    }

    .routine-profile-values {
        grid-template-columns: repeat(4,1fr);
    }

}

@media (max-width: 850px) {

    .routine-main-grid,
    .routine-secondary-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 650px) {

    .routine-page-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .routine-heading-actions {
        width: 100%;
    }

    .routine-heading-actions .btn {
        flex: 1;
    }

    .routine-kpi-grid,
    .routine-profile-values,
    .weekly-routine-grid {
        grid-template-columns: 1fr;
    }

    .enhanced-routine-step {
        grid-template-columns: 30px 28px 1fr;
    }

    .enhanced-routine-step > a {
        grid-column: 3;
        padding-bottom: 10px;
    }

    .routine-safety-note {
        grid-template-columns: 1fr;
    }

    .routine-safety-note .btn {
        width: 100%;
    }

}/* =========================================================
   ADMIN AI ANALYSES
========================================================= */

.analysis-admin-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.analysis-admin-heading h1 {
    margin: 0;
    color: #222831;
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -.4px;
}

.analysis-admin-heading p {
    margin: 5px 0 0;
    color: #818995;
    font-size: 10px;
}

.analysis-admin-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}


/* KPI */

.analysis-admin-kpis {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 13px;
    margin-bottom: 15px;
}

.analysis-admin-kpi {
    min-height: 110px;
    padding: 17px;
    display: flex;
    align-items: center;
    gap: 13px;
    background: #fff;
    border: 1px solid #e8e8ec;
    border-radius: 15px;
    box-shadow: 0 7px 24px rgba(42,30,35,.03);
}

.analysis-admin-kpi-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #fff0f3;
    color: #e85d75;
    font-size: 17px;
}

.analysis-admin-kpi-icon.green {
    background: #eefaf2;
    color: #16a34a;
}

.analysis-admin-kpi-icon.amber {
    background: #fff7e7;
    color: #d98d18;
}

.analysis-admin-kpi-icon.rose {
    background: #fff0f3;
    color: #e85d75;
}

.analysis-admin-kpi small {
    display: block;
    color: #7d8590;
    font-size: 8px;
}

.analysis-admin-kpi strong {
    display: block;
    margin: 4px 0;
    color: #29303a;
    font-size: 20px;
}

.analysis-admin-kpi strong small {
    display: inline;
    font-size: 7px;
    color: #949ba4;
}

.analysis-admin-kpi div > span {
    color: #969da6;
    font-size: 7px;
}


/* OVERVIEW */

.analysis-admin-overview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 15px;
}

.analysis-admin-card {
    background: #fff;
    border: 1px solid #e8e8ec;
    border-radius: 16px;
    box-shadow: 0 7px 24px rgba(42,30,35,.03);
    overflow: hidden;
}

.analysis-admin-card-head {
    min-height: 62px;
    padding: 0 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #efeff1;
}

.analysis-admin-card-head h3 {
    margin: 0;
    font-size: 13px;
}

.analysis-admin-card-head p {
    margin: 4px 0 0;
    color: #959ca5;
    font-size: 8px;
}


/* DISTRIBUTION */

.analysis-distribution {
    padding: 18px;
    display: grid;
    gap: 16px;
}

.analysis-distribution-row > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #5e6772;
    font-size: 8px;
}

.analysis-distribution-row strong {
    color: #e85d75;
}

.analysis-distribution-track {
    height: 7px;
    margin-top: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: #eeeeef;
}

.analysis-distribution-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg,#f8a5b5,#e85d75);
}


/* SAFETY */

.analysis-safety-list {
    padding: 4px 16px 12px;
}

.analysis-safety-list > div {
    min-height: 65px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #f0f0f2;
}

.analysis-safety-state {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 8px;
    font-weight: 800;
}

.analysis-safety-state.green {
    background: #eefaf2;
    color: #16a34a;
}

.analysis-safety-state.amber {
    background: #fff7e7;
    color: #d98d18;
}

.analysis-safety-state.rose {
    background: #fff0f3;
    color: #e85d75;
}

.analysis-safety-list strong {
    display: block;
    color: #424a54;
    font-size: 8px;
}

.analysis-safety-list p {
    margin: 3px 0 0;
    color: #858d97;
    font-size: 7px;
    line-height: 1.5;
}


/* FILTER */

.analysis-admin-toolbar {
    margin-bottom: 15px;
    padding: 13px;
    background: #fff;
    border: 1px solid #e8e8ec;
    border-radius: 14px;
}

.analysis-admin-filter-form {
    display: flex;
    align-items: center;
    gap: 9px;
}

.analysis-admin-search {
    min-width: 300px;
    height: 38px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 11px;
    border: 1px solid #e3e4e7;
    border-radius: 9px;
    background: #fbfbfc;
}

.analysis-admin-search input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 9px;
}

.analysis-admin-filter-form select {
    min-width: 155px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid #e3e4e7;
    border-radius: 9px;
    background: #fff;
    color: #606975;
    font-size: 8px;
}


/* TABLE */

.analysis-admin-table-wrap {
    overflow-x: auto;
}

.analysis-admin-table {
    width: 100%;
    border-collapse: collapse;
}

.analysis-admin-table th {
    padding: 11px 13px;
    background: #fbfbfc;
    border-bottom: 1px solid #ececef;
    color: #8d949f;
    font-size: 8px;
    font-weight: 600;
    text-align: left;
}

.analysis-admin-table td {
    padding: 12px 13px;
    border-bottom: 1px solid #f0f0f2;
    color: #59616c;
    font-size: 8px;
    vertical-align: middle;
}

.analysis-admin-table tbody tr:hover {
    background: #fffafb;
}

.analysis-admin-user {
    display: flex;
    align-items: center;
    gap: 9px;
}

.analysis-user-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(145deg,#e9b29f,#945343);
    color: white;
    font-size: 9px;
    font-weight: 700;
}

.analysis-admin-user strong {
    display: block;
    color: #373e48;
    font-size: 9px;
}

.analysis-admin-user small {
    display: block;
    margin-top: 2px;
    color: #969da6;
    font-size: 7px;
}

.analysis-admin-score {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 8px;
    font-weight: 700;
}

.analysis-level-pill,
.analysis-type-pill {
    display: inline-flex;
    padding: 5px 7px;
    border-radius: 999px;
    font-size: 7px;
}

.level-good {
    background: #eefaf2;
    color: #14994d;
}

.level-mild {
    background: #f5f5f7;
    color: #69717b;
}

.level-moderate {
    background: #fff7e7;
    color: #bd7810;
}

.level-high {
    background: #fff0f2;
    color: #d44960;
}

.level-neutral {
    background: #f5f5f7;
    color: #747c86;
}

.analysis-type-pill {
    background: #fff0f3;
    color: #d9536a;
}

.analysis-time {
    display: block;
    margin-top: 2px;
    color: #989fa8;
    font-size: 7px;
}

.analysis-table-actions {
    display: flex;
    gap: 6px;
}

.analysis-view-btn,
.analysis-more-btn {
    min-height: 29px;
    border-radius: 7px;
    cursor: pointer;
}

.analysis-view-btn {
    padding: 0 10px;
    border: 1px solid #efadba;
    background: #fff;
    color: #df5870;
    font-size: 7px;
}

.analysis-more-btn {
    width: 29px;
    border: 1px solid #e5e6e8;
    background: #fff;
    color: #6d7580;
}

.analysis-admin-empty {
    min-height: 260px;
    display: grid;
    place-content: center;
    justify-items: center;
    text-align: center;
}

.analysis-admin-empty > span {
    color: #e85d75;
    font-size: 34px;
}

.analysis-admin-empty strong {
    margin-top: 8px;
    font-size: 10px;
}

.analysis-admin-empty p {
    color: #939aa3;
    font-size: 8px;
}


/* MODAL */

.analysis-detail-modal[hidden] {
    display: none !important;
}

.analysis-detail-modal {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: grid;
    place-items: center;
    padding: 20px;
}

.analysis-detail-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20,20,25,.48);
    backdrop-filter: blur(5px);
}

.analysis-detail-card {
    width: min(100%,560px);
    position: relative;
    z-index: 2;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 30px 90px rgba(0,0,0,.2);
    overflow: hidden;
}

.analysis-detail-head {
    padding: 20px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid #ededee;
}

.analysis-detail-head h2 {
    margin: 9px 0 4px;
    font-size: 19px;
}

.analysis-detail-head p {
    margin: 0;
    color: #9298a1;
    font-size: 8px;
}

.analysis-detail-head > button {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: #f7f7f8;
    cursor: pointer;
}

.analysis-detail-body {
    padding: 20px;
}

.analysis-detail-score {
    display: grid;
    place-items: center;
    margin-bottom: 20px;
}

.analysis-detail-ring {
    width: 110px;
    height: 110px;
    display: grid;
    place-items: center;
    border: 9px solid #e85d75;
    border-radius: 50%;
    text-align: center;
}

.analysis-detail-ring strong {
    font-size: 26px;
}

.analysis-detail-ring span {
    font-size: 7px;
    color: #969da6;
}

.analysis-detail-score > small {
    margin-top: 8px;
    color: #9299a3;
    font-size: 7px;
}

.analysis-detail-values {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 9px;
}

.analysis-detail-values > div {
    padding: 12px;
    border: 1px solid #eeeeef;
    border-radius: 10px;
}

.analysis-detail-values span {
    display: block;
    color: #9299a3;
    font-size: 7px;
}

.analysis-detail-values strong {
    display: block;
    margin-top: 4px;
    color: #404852;
    font-size: 9px;
}

.analysis-detail-note {
    margin-top: 15px;
    padding: 12px;
    border-radius: 10px;
    background: #fff8f9;
}

.analysis-detail-note strong {
    font-size: 8px;
}

.analysis-detail-note p {
    margin: 4px 0 0;
    color: #80636a;
    font-size: 7px;
    line-height: 1.55;
}

.analysis-detail-actions {
    margin-top: 15px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}


/* RESPONSIVE */

@media (max-width: 1100px) {

    .analysis-admin-kpis,
    .analysis-admin-overview-grid {
        grid-template-columns: repeat(2,1fr);
    }

    .analysis-admin-filter-form {
        flex-wrap: wrap;
    }

}

@media (max-width: 650px) {

    .analysis-admin-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .analysis-admin-actions {
        width: 100%;
    }

    .analysis-admin-kpis,
    .analysis-admin-overview-grid,
    .analysis-detail-values {
        grid-template-columns: 1fr;
    }

    .analysis-admin-filter-form {
        display: grid;
        grid-template-columns: 1fr;
    }

    .analysis-admin-search,
    .analysis-admin-filter-form select {
        width: 100%;
        min-width: 0;
    }

}/* =========================================================
   ADMIN PRODUCTS & INVENTORY
========================================================= */

.inventory-page-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.inventory-page-heading h1 {
    margin: 0;
    color: #222831;
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -.4px;
}

.inventory-page-heading p {
    margin: 5px 0 0;
    color: #818995;
    font-size: 10px;
}

.inventory-heading-actions {
    display: flex;
    gap: 8px;
}


/* KPI */

.inventory-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 13px;
    margin-bottom: 15px;
}

.inventory-kpi-card {
    min-height: 110px;
    padding: 17px;
    display: flex;
    align-items: center;
    gap: 13px;
    background: #fff;
    border: 1px solid #e8e8ec;
    border-radius: 15px;
    box-shadow: 0 7px 24px rgba(42,30,35,.03);
}

.inventory-kpi-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #fff0f3;
    color: #e85d75;
    font-size: 17px;
}

.inventory-kpi-icon.green {
    background: #eefaf2;
    color: #16a34a;
}

.inventory-kpi-icon.amber {
    background: #fff7e7;
    color: #db9117;
}

.inventory-kpi-icon.teal {
    background: #eef9f7;
    color: #0f766e;
}

.inventory-kpi-card small {
    display: block;
    color: #7c8590;
    font-size: 8px;
}

.inventory-kpi-card strong {
    display: block;
    margin: 4px 0;
    color: #29303a;
    font-size: 20px;
}

.inventory-kpi-card div > span {
    color: #979da6;
    font-size: 7px;
}


/* OVERVIEW */

.inventory-overview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 15px;
}

.inventory-card {
    background: #fff;
    border: 1px solid #e8e8ec;
    border-radius: 16px;
    box-shadow: 0 7px 24px rgba(42,30,35,.03);
    overflow: hidden;
}

.inventory-card-head {
    min-height: 62px;
    padding: 0 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #efeff1;
}

.inventory-card-head h3 {
    margin: 0;
    font-size: 13px;
}

.inventory-card-head p {
    margin: 4px 0 0;
    color: #959ca5;
    font-size: 8px;
}

.inventory-health-grid {
    padding: 17px;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
}

.inventory-health-grid > div {
    padding: 13px;
    border: 1px solid #eeeeef;
    border-radius: 11px;
}

.inventory-health-grid span {
    display: block;
    color: #8e959f;
    font-size: 7px;
}

.inventory-health-grid strong {
    display: block;
    margin-top: 5px;
    font-size: 17px;
}

.rose-text {
    color: #e05069;
}

.inventory-health-progress {
    padding: 0 17px 18px;
}

.inventory-health-progress > div:first-child {
    display: flex;
    justify-content: space-between;
    color: #68717c;
    font-size: 8px;
}

.inventory-health-track {
    height: 7px;
    margin-top: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: #eeeeef;
}

.inventory-health-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg,#f8a5b5,#e85d75);
}


/* INTELLIGENCE */

.inventory-intelligence-list {
    padding: 5px 16px 12px;
}

.inventory-intelligence-list > div {
    min-height: 62px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #f0f0f2;
}

.inventory-check {
    width: 29px;
    height: 29px;
    flex: 0 0 29px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 8px;
    font-weight: 800;
}

.inventory-check.green {
    background: #eefaf2;
    color: #16a34a;
}

.inventory-check.amber {
    background: #fff7e7;
    color: #d98c16;
}

.inventory-check.rose {
    background: #fff0f3;
    color: #e85d75;
}

.inventory-intelligence-list strong {
    display: block;
    color: #434b55;
    font-size: 8px;
}

.inventory-intelligence-list p {
    margin: 3px 0 0;
    color: #858d97;
    font-size: 7px;
    line-height: 1.5;
}


/* TOOLBAR */

.inventory-toolbar {
    margin-bottom: 15px;
    padding: 13px;
    background: #fff;
    border: 1px solid #e8e8ec;
    border-radius: 14px;
}

.inventory-filter-form {
    display: flex;
    align-items: center;
    gap: 9px;
}

.inventory-search {
    min-width: 330px;
    height: 38px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 11px;
    border: 1px solid #e3e4e7;
    border-radius: 9px;
    background: #fbfbfc;
}

.inventory-search input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 9px;
}

.inventory-filter-form select {
    min-width: 145px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid #e3e4e7;
    border-radius: 9px;
    background: #fff;
    color: #606975;
    font-size: 8px;
}


/* TABLE */

.inventory-table-wrap {
    overflow-x: auto;
}

.inventory-table {
    width: 100%;
    border-collapse: collapse;
}

.inventory-table th {
    padding: 11px 12px;
    background: #fbfbfc;
    border-bottom: 1px solid #ececef;
    color: #8d949f;
    font-size: 8px;
    font-weight: 600;
    text-align: left;
}

.inventory-table td {
    padding: 12px;
    border-bottom: 1px solid #f0f0f2;
    color: #59616c;
    font-size: 8px;
    vertical-align: middle;
}

.inventory-table tbody tr:hover {
    background: #fffafb;
}

.inventory-product-cell {
    min-width: 170px;
    display: flex;
    align-items: center;
    gap: 9px;
}

.inventory-product-image {
    width: 38px;
    height: 43px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: linear-gradient(145deg,#f8f8f9,#fff0f3);
    font-size: 18px;
}

.inventory-product-cell strong {
    display: block;
    color: #383f49;
    font-size: 9px;
}

.inventory-product-cell small {
    display: block;
    margin-top: 3px;
    color: #969da6;
    font-size: 7px;
}

.inventory-category-pill {
    display: inline-flex;
    padding: 5px 7px;
    border-radius: 999px;
    background: #f6f6f8;
    color: #66707b;
    font-size: 7px;
}

.inventory-ingredients-preview {
    display: block;
    max-width: 190px;
    color: #7f8792;
    line-height: 1.4;
    font-size: 7px;
}

.inventory-compatibility {
    display: inline-flex;
    max-width: 130px;
    padding: 5px 7px;
    border-radius: 999px;
    background: #fff0f3;
    color: #d95169;
    font-size: 7px;
}

.inventory-stock-cell strong {
    display: block;
    font-size: 9px;
}

.inventory-stock-cell span {
    display: inline-block;
    margin-top: 3px;
    font-size: 6px;
}

.inventory-stock-good {
    color: #16a34a;
}

.inventory-stock-low {
    color: #d98b15;
}

.inventory-stock-out {
    color: #dc4c63;
}

.inventory-barcode {
    padding: 4px 6px;
    border-radius: 6px;
    background: #f6f6f8;
    color: #505965;
    font-size: 7px;
}

.inventory-missing {
    color: #a0a6ad;
    font-size: 7px;
}

.inventory-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 7px;
    border-radius: 999px;
    font-size: 7px;
}

.inventory-status i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
}

.inventory-status.active {
    background: #eefaf2;
    color: #15994d;
}

.inventory-status.active i {
    background: #16a34a;
}

.inventory-status.inactive {
    background: #f4f4f6;
    color: #767e88;
}

.inventory-status.inactive i {
    background: #8e959e;
}

.inventory-actions {
    display: flex;
    gap: 6px;
}

.inventory-view-btn,
.inventory-more-btn {
    min-height: 29px;
    border-radius: 7px;
    cursor: pointer;
}

.inventory-view-btn {
    padding: 0 10px;
    border: 1px solid #efadba;
    background: #fff;
    color: #df5870;
    font-size: 7px;
}

.inventory-more-btn {
    width: 29px;
    border: 1px solid #e5e6e8;
    background: #fff;
    color: #69717c;
}


/* EMPTY */

.inventory-empty {
    min-height: 280px;
    display: grid;
    place-content: center;
    justify-items: center;
    text-align: center;
}

.inventory-empty > span {
    color: #e85d75;
    font-size: 35px;
}

.inventory-empty strong {
    margin-top: 8px;
    font-size: 10px;
}

.inventory-empty p {
    color: #9299a3;
    font-size: 8px;
}


/* MODAL */

.inventory-modal[hidden] {
    display: none !important;
}

.inventory-modal {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: grid;
    place-items: center;
    padding: 20px;
}

.inventory-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20,20,25,.5);
    backdrop-filter: blur(5px);
}

.inventory-modal-card {
    width: min(100%,620px);
    max-height: calc(100vh - 40px);
    position: relative;
    z-index: 2;
    overflow-y: auto;
    border-radius: 19px;
    background: #fff;
    box-shadow: 0 30px 90px rgba(0,0,0,.2);
}

.inventory-modal-head {
    padding: 20px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid #ededee;
}

.inventory-modal-head h2 {
    margin: 9px 0 4px;
    font-size: 19px;
}

.inventory-modal-head p {
    margin: 0;
    color: #9298a1;
    font-size: 8px;
}

.inventory-modal-head > button {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: #f7f7f8;
    cursor: pointer;
}

.inventory-product-form,
.inventory-view-body {
    padding: 20px;
}

.inventory-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px;
}

.inventory-form-note,
.inventory-view-note {
    margin: 12px 0 16px;
    padding: 11px;
    border-radius: 10px;
    background: #fff8f9;
    color: #865f67;
    font-size: 8px;
    line-height: 1.6;
}


/* VIEW PRODUCT */

.inventory-view-art {
    height: 130px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: linear-gradient(145deg,#fafafa,#fff0f3);
    font-size: 48px;
}

.inventory-view-summary {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 8px;
}

.inventory-view-summary > div {
    padding: 11px;
    border: 1px solid #eeeeef;
    border-radius: 9px;
}

.inventory-view-summary small {
    display: block;
    color: #939aa3;
    font-size: 7px;
}

.inventory-view-summary strong {
    display: block;
    margin-top: 4px;
    font-size: 9px;
}

.inventory-view-section {
    margin-top: 15px;
}

.inventory-view-section h4 {
    margin: 0 0 7px;
    font-size: 9px;
}

.inventory-view-section p,
.inventory-view-section code {
    color: #666f7a;
    font-size: 8px;
    line-height: 1.65;
}


/* RESPONSIVE */

@media (max-width: 1100px) {

    .inventory-kpi-grid,
    .inventory-overview-grid {
        grid-template-columns: repeat(2,1fr);
    }

    .inventory-filter-form {
        flex-wrap: wrap;
    }

}

@media (max-width: 700px) {

    .inventory-page-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .inventory-heading-actions {
        width: 100%;
    }

    .inventory-heading-actions .btn {
        flex: 1;
    }

    .inventory-kpi-grid,
    .inventory-overview-grid,
    .inventory-health-grid,
    .inventory-form-grid,
    .inventory-view-summary {
        grid-template-columns: 1fr;
    }

    .inventory-filter-form {
        display: grid;
        grid-template-columns: 1fr;
    }

    .inventory-search,
    .inventory-filter-form select {
        width: 100%;
        min-width: 0;
    }

}/* =========================================================
   REPORTS & ANALYTICS
========================================================= */

.reports-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.reports-heading h1 {
    margin: 5px 0 4px;
    font-size: 25px;
    color: #252b34;
}

.reports-heading p {
    margin: 0;
    color: #89919b;
    font-size: 9px;
}

.reports-kicker {
    color: #e85d75;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1.3px;
}

.reports-heading-actions {
    display: flex;
    align-items: center;
    gap: 9px;
}

.reports-live {
    padding: 8px 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #dcefe3;
    border-radius: 999px;
    background: #f1fbf4;
    color: #16884a;
    font-size: 7px;
}

.reports-live i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22a75a;
}


/* KPI */

.reports-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 13px;
    margin-bottom: 13px;
}

.reports-kpi {
    padding: 17px;
    min-height: 112px;
    display: flex;
    align-items: center;
    gap: 13px;
    border: 1px solid #e8e8ec;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 7px 24px rgba(40,30,35,.03);
}

.reports-kpi-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    font-size: 16px;
}

.reports-kpi-icon.rose {
    background: #fff0f3;
    color: #e85d75;
}

.reports-kpi-icon.purple {
    background: #f4f0ff;
    color: #7959c8;
}

.reports-kpi-icon.green {
    background: #eefaf2;
    color: #179750;
}

.reports-kpi-icon.amber {
    background: #fff7e8;
    color: #d58b18;
}

.reports-kpi small {
    display: block;
    color: #7d8590;
    font-size: 8px;
}

.reports-kpi strong {
    display: block;
    margin: 4px 0;
    color: #29313b;
    font-size: 21px;
}

.reports-kpi div > span {
    color: #999fa7;
    font-size: 7px;
}


/* MINI */

.reports-mini-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 13px;
    margin-bottom: 15px;
}

.reports-mini-card {
    padding: 13px 15px;
    border: 1px solid #e9e9ec;
    border-radius: 12px;
    background: #fafafb;
}

.reports-mini-card small {
    display: block;
    color: #9299a2;
    font-size: 7px;
}

.reports-mini-card strong {
    display: block;
    margin: 5px 0 2px;
    color: #444c56;
    font-size: 15px;
}

.reports-mini-card span {
    color: #a0a5ac;
    font-size: 6px;
}


/* MAIN */

.reports-main-grid {
    display: grid;
    grid-template-columns: 1.7fr .8fr;
    gap: 15px;
    margin-bottom: 15px;
}

.reports-panel {
    overflow: hidden;
    border: 1px solid #e8e8ec;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 7px 24px rgba(40,30,35,.03);
}

.reports-panel-head {
    min-height: 63px;
    padding: 0 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #eeeeef;
}

.reports-panel-head h3 {
    margin: 0;
    color: #3e4650;
    font-size: 12px;
}

.reports-panel-head p {
    margin: 4px 0 0;
    color: #979da6;
    font-size: 7px;
}


/* DISTRIBUTION */

.reports-analysis-grid {
    padding: 16px;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 13px;
}

.reports-analysis-block {
    padding: 13px;
    border: 1px solid #eeeeef;
    border-radius: 11px;
}

.reports-analysis-block h4 {
    margin: 0 0 12px;
    color: #555e69;
    font-size: 9px;
}

.reports-distribution {
    margin-bottom: 10px;
}

.reports-distribution > div:first-child {
    display: flex;
    justify-content: space-between;
    font-size: 7px;
    color: #7b838e;
}

.reports-track {
    height: 5px;
    margin-top: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: #eeeeef;
}

.reports-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        #f4a4b3,
        #e85d75
    );
}

.reports-empty-text {
    color: #a0a5ad;
    font-size: 7px;
}


/* PRODUCT HEALTH */

.reports-product-health {
    padding: 21px;
}

.reports-health-ring {
    width: 125px;
    height: 125px;
    margin: 0 auto 18px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background:
        conic-gradient(
            #e85d75 0 78%,
            #f1f1f3 78% 100%
        );
    position: relative;
}

.reports-health-ring::after {
    content: "";
    position: absolute;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: #fff;
}

.reports-health-ring > div {
    position: relative;
    z-index: 2;
    text-align: center;
}

.reports-health-ring strong {
    display: block;
    color: #303741;
    font-size: 20px;
}

.reports-health-ring span {
    color: #9299a2;
    font-size: 7px;
}

.reports-health-list > div {
    padding: 8px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f0f0f2;
    font-size: 7px;
}

.reports-health-list span {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #737c87;
}

.reports-health-list i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.green-dot {
    background: #20a45a;
}

.grey-dot {
    background: #a1a6ad;
}

.amber-dot {
    background: #df961c;
}

.rose-dot {
    background: #e85d75;
}

.reports-panel-link {
    display: block;
    padding: 12px 17px;
    border-top: 1px solid #eeeeef;
    color: #df5870;
    text-decoration: none;
    font-size: 7px;
}


/* RECENT */

.reports-recent-panel {
    margin-bottom: 15px;
}

.reports-small-link {
    color: #df5870;
    font-size: 7px;
    text-decoration: none;
}

.reports-table-wrap {
    overflow-x: auto;
}

.reports-table {
    width: 100%;
    border-collapse: collapse;
}

.reports-table th {
    padding: 10px 13px;
    background: #fbfbfc;
    border-bottom: 1px solid #ececef;
    color: #9198a1;
    font-size: 7px;
    text-align: left;
}

.reports-table td {
    padding: 11px 13px;
    border-bottom: 1px solid #f0f0f2;
    color: #68717c;
    font-size: 8px;
}

.reports-user {
    display: flex;
    align-items: center;
    gap: 8px;
}

.reports-user > span {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff0f3;
    color: #df5870;
    font-size: 8px;
    font-weight: 800;
}

.reports-user strong {
    color: #454d57;
    font-size: 8px;
}

.reports-score {
    color: #e85d75;
}

.reports-empty {
    min-height: 220px;
    display: grid;
    place-content: center;
    justify-items: center;
    text-align: center;
}

.reports-empty > span {
    color: #e85d75;
    font-size: 30px;
}

.reports-empty strong {
    margin-top: 7px;
    font-size: 9px;
}

.reports-empty p {
    max-width: 300px;
    color: #999fa7;
    font-size: 7px;
}


/* RESPONSIBLE */

.reports-responsible {
    padding: 20px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    border: 1px solid #f1d8de;
    border-radius: 15px;
    background:
        linear-gradient(
            135deg,
            #fffafb,
            #fff5f7
        );
}

.reports-responsible-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #fff;
    color: #e85d75;
    font-size: 17px;
}

.reports-responsible h3 {
    margin: 5px 0;
    color: #444b55;
    font-size: 11px;
}

.reports-responsible p {
    max-width: 850px;
    margin: 0;
    color: #7d858f;
    font-size: 7px;
    line-height: 1.65;
}


/* RESPONSIVE */

@media (max-width: 1050px) {

    .reports-kpi-grid,
    .reports-mini-grid {
        grid-template-columns: repeat(2,1fr);
    }

    .reports-main-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 700px) {

    .reports-heading {
        flex-direction: column;
    }

    .reports-kpi-grid,
    .reports-mini-grid,
    .reports-analysis-grid {
        grid-template-columns: 1fr;
    }

    .reports-heading-actions {
        width: 100%;
        flex-wrap: wrap;
    }

}/* =========================================================
   UNISCARE AI SKIN ANALYSIS
========================================================= */

.analysis-page-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.analysis-page-kicker {
    display: block;
    margin-bottom: 6px;
    color: #e85d75;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.analysis-page-heading h1 {
    margin: 0;
    color: #232a33;
    font-size: 25px;
    font-weight: 800;
}

.analysis-page-heading p {
    max-width: 700px;
    margin: 5px 0 0;
    color: #818995;
    font-size: 9px;
    line-height: 1.6;
}


/* LAYOUT */

.analysis-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        285px;
    gap: 15px;
    align-items: start;
}

.analysis-capture-card,
.analysis-side-card {
    border: 1px solid #e8e8ec;
    border-radius: 16px;
    background: #fff;
    box-shadow:
        0 7px 24px
        rgba(42,30,35,.03);
    overflow: hidden;
}

.analysis-card-head {
    min-height: 69px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    border-bottom: 1px solid #efeff1;
}

.analysis-card-head > div:first-child {
    display: flex;
    align-items: center;
    gap: 10px;
}

.analysis-head-icon {
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #fff0f3;
    color: #e85d75;
    font-size: 16px;
}

.analysis-card-head h3 {
    margin: 0;
    color: #3d454f;
    font-size: 12px;
}

.analysis-card-head p {
    margin: 3px 0 0;
    color: #939aa3;
    font-size: 7px;
}

.analysis-status-pill {
    padding: 5px 8px;
    border-radius: 999px;
    background: #eefaf2;
    color: #16994e;
    font-size: 7px;
    font-weight: 700;
}


/* TABS */

.capture-mode-tabs {
    padding: 14px 16px;
    display: flex;
    gap: 7px;
    border-bottom: 1px solid #eeeeef;
    background: #fff;
}

.capture-tab {
    min-height: 37px;
    padding: 0 13px;
    border: 1px solid #e3e4e7;
    border-radius: 9px;
    background: #fff;
    color: #67707b;
    cursor: pointer;
    font-size: 8px;
}

.capture-tab.active {
    border-color: #efb1bd;
    background: #fff0f3;
    color: #e85d75;
    font-weight: 700;
}


/* CAMERA */

.capture-panel {
    padding: 17px;
}

.camera-preview-shell {
    min-height: 470px;
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    background:
        radial-gradient(
            circle at center,
            #30343c,
            #17191e
        );
}

.camera-preview-shell video {
    width: 100%;
    height: 470px;
    display: block;
    object-fit: cover;
}

.camera-start-state {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: grid;
    place-content: center;
    justify-items: center;
    padding: 30px;
    text-align: center;
    background:
        linear-gradient(
            145deg,
            #252930,
            #15171b
        );
    color: white;
}

.camera-large-icon {
    width: 65px;
    height: 65px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 18px;
    background: rgba(255,255,255,.08);
    font-size: 27px;
}

.camera-start-state h3 {
    margin: 15px 0 7px;
    font-size: 18px;
}

.camera-start-state p {
    max-width: 380px;
    margin: 0 0 17px;
    color: #c7cbd1;
    font-size: 9px;
    line-height: 1.6;
}


/* FACE GUIDE */

.face-guide {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    place-items: center;
    pointer-events: none;
}

.face-guide-frame {
    width: 230px;
    height: 300px;
    border: 2px solid rgba(255,255,255,.8);
    border-radius: 48% 48% 44% 44%;
    box-shadow:
        0 0 0 9999px
        rgba(0,0,0,.12);
}

.face-guide > span {
    position: absolute;
    bottom: 18px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: 7px;
    backdrop-filter: blur(8px);
}


/* CAMERA CONTROLS */

.camera-controls {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.camera-secondary-btn {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid #e2e3e6;
    border-radius: 50%;
    background: #fff;
    color: #68717c;
    cursor: pointer;
    font-size: 16px;
}

.camera-capture-btn {
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    border: 4px solid #fff;
    border-radius: 50%;
    background: #e85d75;
    box-shadow:
        0 0 0 3px #e85d75,
        0 8px 20px rgba(232,93,117,.25);
    cursor: pointer;
}

.camera-capture-btn span {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.8);
}


/* CAPTURED */

.captured-preview {
    padding-top: 5px;
    text-align: center;
}

.captured-preview img {
    width: 100%;
    max-height: 480px;
    object-fit: contain;
    border-radius: 14px;
    background: #f5f5f6;
}

.captured-preview-actions {
    margin-top: 12px;
    display: flex;
    justify-content: center;
    gap: 8px;
}


/* UPLOAD */

.premium-upload-zone {
    min-height: 360px;
    display: grid;
    place-content: center;
    justify-items: center;
    padding: 30px;
    border: 2px dashed #efc1cb;
    border-radius: 15px;
    background:
        linear-gradient(
            145deg,
            #fff,
            #fff8f9
        );
    text-align: center;
    cursor: pointer;
}

.upload-icon {
    width: 55px;
    height: 55px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #fff0f3;
    color: #e85d75;
    font-size: 24px;
}

.premium-upload-zone strong {
    margin-top: 13px;
    color: #414852;
    font-size: 12px;
}

.premium-upload-zone p {
    color: #8a929c;
    font-size: 8px;
}

.premium-upload-zone input {
    margin-top: 12px;
    max-width: 260px;
    font-size: 8px;
}

.upload-image-preview {
    margin-top: 13px;
}

.upload-image-preview img {
    width: 100%;
    max-height: 400px;
    object-fit: contain;
    border-radius: 12px;
    background: #f5f5f6;
}

.analysis-submit-button {
    width: 100%;
    margin-top: 13px;
}


/* MOBILE FALLBACK */

.native-mobile-capture {
    margin: 0 17px 17px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 13px;
    border: 1px solid #eeeeef;
    border-radius: 11px;
    background: #fafafb;
}

.native-mobile-capture strong {
    display: block;
    color: #4c545f;
    font-size: 8px;
}

.native-mobile-capture span {
    display: block;
    margin-top: 3px;
    color: #939aa3;
    font-size: 7px;
}


/* NOTE */

.medical-demo-note {
    margin: 0 17px 17px;
    padding: 11px 12px;
    display: flex;
    gap: 9px;
    border-radius: 10px;
    background: #fff7f8;
    color: #835f67;
}

.medical-demo-note strong {
    flex: 0 0 auto;
    font-size: 8px;
}

.medical-demo-note span {
    font-size: 7px;
    line-height: 1.5;
}


/* SIDE */

.analysis-side {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.analysis-side-card {
    padding: 17px;
}

.analysis-side-icon {
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #fff0f3;
    color: #e85d75;
    font-size: 16px;
}

.analysis-side-card h3 {
    margin: 12px 0 8px;
    color: #424a54;
    font-size: 11px;
}

.analysis-side-card p {
    color: #7d8590;
    font-size: 8px;
    line-height: 1.6;
}

.analysis-tip-list {
    display: grid;
    gap: 8px;
}

.analysis-tip-list span {
    color: #66707a;
    font-size: 8px;
}

.analysis-review-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.analysis-review-list > div {
    min-height: 70px;
    padding: 9px;
    display: grid;
    align-content: center;
    justify-items: center;
    border: 1px solid #eeeeef;
    border-radius: 9px;
    text-align: center;
}

.analysis-review-list span {
    color: #e85d75;
    font-size: 15px;
}

.analysis-review-list small {
    margin-top: 4px;
    color: #747d88;
    font-size: 7px;
}

.analysis-privacy-card {
    background:
        linear-gradient(
            145deg,
            #fff,
            #fff7f9
        );
}


/* RESPONSIVE */

@media (max-width: 1000px) {

    .analysis-layout {
        grid-template-columns: 1fr;
    }

    .analysis-side {
        display: grid;
        grid-template-columns: repeat(2,1fr);
    }

}

@media (max-width: 650px) {

    .analysis-page-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .analysis-page-heading .btn {
        width: 100%;
    }

    .analysis-side {
        grid-template-columns: 1fr;
    }

    .camera-preview-shell,
    .camera-preview-shell video {
        min-height: 390px;
        height: 390px;
    }

    .face-guide-frame {
        width: 190px;
        height: 255px;
    }

    .native-mobile-capture {
        align-items: flex-start;
        flex-direction: column;
    }

    .native-mobile-capture .btn {
        width: 100%;
    }

}/* =========================================================
   UNISCARE APP SHELL
========================================================= */

.app-shell {
    min-height: 100vh;
    display: flex;
    background: #f8f8fa;
}


/* SIDEBAR */

.sidebar {
    width: 235px;
    min-width: 235px;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #e8e8ec;
    background: #fff;
    overflow-y: auto;
}

.sidebar-top {
    min-height: 76px;
    padding: 0 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #efeff1;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.brand-mark {
    width: 37px;
    height: 37px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(145deg,#f8afbd,#e85d75);
    color: #fff;
    font-size: 16px;
}

.brand-copy b {
    display: block;
    color: #242a33;
    font-size: 15px;
    letter-spacing: .5px;
}

.brand-copy b span {
    color: #e85d75;
}

.brand-copy small {
    display: block;
    margin-top: 2px;
    color: #8f969f;
    font-size: 7px;
}

.sidebar-close {
    display: none;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    background: #f6f6f8;
    cursor: pointer;
}


/* NAV */

.sidebar-nav {
    padding: 14px 11px;
    display: flex;
    flex-direction: column;
}

.sidebar-section-label {
    padding: 8px 10px;
    color: #a0a6ad;
    font-size: 6px;
    font-weight: 800;
    letter-spacing: 1.1px;
}

.sidebar-secondary-label {
    margin-top: 13px;
}

.sidebar-nav a {
    min-height: 42px;
    margin-bottom: 3px;
    padding: 0 11px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 10px;
    color: #59626d;
    text-decoration: none;
    transition: .18s ease;
}

.sidebar-nav a > span {
    width: 22px;
    color: #7c8590;
    text-align: center;
    font-size: 13px;
}

.sidebar-nav a b {
    font-size: 8px;
    font-weight: 600;
}

.sidebar-nav a:hover {
    background: #fff7f9;
    color: #e85d75;
}

.sidebar-nav a.active {
    background: #fff0f3;
    color: #e85d75;
    box-shadow: inset 3px 0 0 #e85d75;
}

.sidebar-nav a.active > span {
    color: #e85d75;
}


/* SIDEBAR AI */

.sidebar-bottom {
    margin-top: auto;
    padding: 12px;
}

.sidebar-ai-card {
    padding: 14px;
    border: 1px solid #f0ccd4;
    border-radius: 13px;
    background: linear-gradient(145deg,#fff,#fff5f7);
}

.sidebar-ai-icon {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #fff0f3;
    color: #e85d75;
}

.sidebar-ai-card strong {
    display: block;
    margin-top: 9px;
    font-size: 9px;
}

.sidebar-ai-card p {
    color: #818995;
    font-size: 7px;
    line-height: 1.5;
}

.sidebar-ai-card .btn {
    width: 100%;
}


/* MAIN */

.app-main {
    width: calc(100% - 235px);
    min-height: 100vh;
    margin-left: 235px;
}


/* TOP BAR */

.app-top {
    height: 76px;
    position: sticky;
    top: 0;
    z-index: 80;
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e8e8ec;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(12px);
}

.app-top-left,
.app-top-right {
    display: flex;
    align-items: center;
    gap: 11px;
}

.sidebar-toggle {
    display: none;
    width: 36px;
    height: 36px;
    border: 1px solid #e5e6e8;
    border-radius: 9px;
    background: #fff;
    cursor: pointer;
}

.app-search {
    width: 280px;
    height: 38px;
    padding: 0 11px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #e4e5e7;
    border-radius: 10px;
    background: #fbfbfc;
}

.app-search span {
    color: #9299a3;
}

.app-search input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 8px;
}

.top-action-btn {
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    border: 1px solid #e7e7ea;
    border-radius: 9px;
    background: #fff;
    color: #727b86;
    text-decoration: none;
}

.top-action-btn:hover {
    color: #e85d75;
    border-color: #efb9c4;
}

.user-chip {
    display: flex;
    align-items: center;
    gap: 8px;
}

.avatar {
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(145deg,#cf8b76,#8f4f40);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
}

.user-chip-copy b {
    display: block;
    font-size: 8px;
}

.user-chip-copy small {
    display: block;
    margin-top: 2px;
    color: #e85d75;
    font-size: 6px;
}


/* CONTENT */

.app-content {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 24px;
}


/* OVERLAY */

.sidebar-overlay {
    display: none;
}


/* MOBILE ACTION BAR */

.mobile-action-bar {
    display: none;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .sidebar {
        width: 215px;
        min-width: 215px;
    }

    .app-main {
        width: calc(100% - 215px);
        margin-left: 215px;
    }

}


/* =========================================================
   MOBILE / SMALL TABLET
========================================================= */

@media (max-width: 820px) {

    .sidebar {
        width: 260px;
        min-width: 260px;
        transform: translateX(-100%);
        transition: transform .22s ease;
        box-shadow: 15px 0 45px rgba(0,0,0,.14);
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .sidebar-close {
        display: grid;
        place-items: center;
    }

    .sidebar-overlay {
        position: fixed;
        inset: 0;
        z-index: 90;
        background: rgba(20,20,25,.42);
        backdrop-filter: blur(3px);
    }

    .sidebar-overlay.show {
        display: block;
    }

    .app-main {
        width: 100%;
        margin-left: 0;
    }

    .sidebar-toggle {
        display: grid;
        place-items: center;
    }

    .app-search {
        width: 220px;
    }

    .app-content {
        padding: 18px;
        padding-bottom: 90px;
    }

    .mobile-action-bar {
        height: 66px;
        position: fixed;
        left: 10px;
        right: 10px;
        bottom: 10px;
        z-index: 85;
        display: grid;
        grid-template-columns: repeat(5,1fr);
        border: 1px solid #e7e7eb;
        border-radius: 17px;
        background: rgba(255,255,255,.96);
        box-shadow: 0 12px 35px rgba(30,25,27,.14);
        backdrop-filter: blur(12px);
        overflow: hidden;
    }

    .mobile-action-bar a {
        display: grid;
        place-content: center;
        justify-items: center;
        gap: 3px;
        color: #717984;
        text-decoration: none;
    }

    .mobile-action-bar a span {
        font-size: 15px;
    }

    .mobile-action-bar a small {
        font-size: 6px;
    }

    .mobile-action-bar a.active {
        color: #e85d75;
        background: #fff7f9;
    }

}


/* =========================================================
   PHONE
========================================================= */

@media (max-width: 560px) {

    .app-top {
        height: 66px;
        padding: 0 13px;
    }

    .app-search {
        width: auto;
        max-width: 170px;
    }

    .app-search input {
        display: none;
    }

    .app-search {
        width: 38px;
        justify-content: center;
    }

    .user-chip-copy {
        display: none;
    }

    .top-action-btn:nth-of-type(2) {
        display: none;
    }

    .app-content {
        padding: 14px;
        padding-bottom: 88px;
    }

}/* =========================================================
   UNISCARE USER PRODUCTS / PRODUCT INTELLIGENCE
========================================================= */

.product-page-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.product-page-heading h1,
.page-title h1 {
    margin: 0;
    color: #252b34;
    font-size: 25px;
    font-weight: 800;
}

.product-page-heading p,
.page-title p {
    margin: 5px 0 0;
    color: #818995;
    font-size: 9px;
}


/* TOP METRICS */

.product-guidance-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 13px;
    margin-bottom: 15px;
}

.product-guidance-kpi {
    min-height: 106px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 13px;
    border: 1px solid #e8e8ec;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 7px 24px rgba(42,30,35,.03);
}

.product-guidance-kpi > span {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #fff0f3;
    color: #e85d75;
    font-size: 17px;
}

.product-guidance-kpi small {
    display: block;
    color: #828a94;
    font-size: 7px;
}

.product-guidance-kpi strong {
    display: block;
    margin: 4px 0;
    color: #333b45;
    font-size: 13px;
}

.product-guidance-kpi p {
    margin: 0;
    color: #979da6;
    font-size: 7px;
}


/* HERO / PRODUCT CHECK */

.product-intelligence-banner {
    min-height: 155px;
    margin-bottom: 15px;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border: 1px solid #efd8de;
    border-radius: 17px;
    background:
        linear-gradient(
            135deg,
            #fff,
            #fff2f5
        );
}

.product-intelligence-banner h2 {
    margin: 9px 0 7px;
    color: #303640;
    font-size: 21px;
}

.product-intelligence-banner p {
    max-width: 700px;
    margin: 0;
    color: #737c87;
    font-size: 8px;
    line-height: 1.6;
}


/* MAIN PAGE */

.product-guidance-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        280px;
    gap: 15px;
    align-items: start;
}

.product-guidance-main,
.product-guidance-side {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.product-guidance-card {
    overflow: hidden;
    border: 1px solid #e8e8ec;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 7px 24px rgba(42,30,35,.03);
}

.product-guidance-card-head {
    min-height: 63px;
    padding: 0 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #efeff1;
}

.product-guidance-card-head h3 {
    margin: 0;
    color: #414852;
    font-size: 12px;
}

.product-guidance-card-head p {
    margin: 4px 0 0;
    color: #949ba4;
    font-size: 7px;
}


/* PRE-USE CHECK */

.preuse-check-grid {
    padding: 15px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.preuse-check-item {
    min-height: 108px;
    padding: 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid #eeeeef;
    border-radius: 12px;
    background: #fff;
}

.preuse-check-item > span {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #fff0f3;
    color: #e85d75;
}

.preuse-check-item strong {
    display: block;
    color: #434b55;
    font-size: 9px;
}

.preuse-check-item p {
    margin: 5px 0 0;
    color: #828a94;
    font-size: 7px;
    line-height: 1.55;
}


/* PRODUCT CARDS */

.enhanced-product-grid,
.products {
    padding: 15px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 12px;
}

.enhanced-product-card,
.product {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #eceaed;
    border-radius: 14px;
    background: #fff;
    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.enhanced-product-card:hover,
.product:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(44,30,35,.07);
}

.enhanced-product-art,
.product-art {
    min-height: 125px;
    display: grid;
    place-items: center;
    background:
        linear-gradient(
            145deg,
            #fafafa,
            #fff0f3
        );
    font-size: 39px;
}

.enhanced-product-copy,
.product {
    position: relative;
}

.enhanced-product-copy {
    padding: 14px;
}

.product > h3,
.product > p,
.product > span,
.product > button {
    margin-left: 14px;
    margin-right: 14px;
}

.product > h3 {
    margin-top: 13px;
}

.product > button {
    margin-bottom: 14px;
}

.product-category {
    color: #e85d75;
    font-size: 6px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.enhanced-product-copy h3,
.product h3 {
    margin-bottom: 4px;
    color: #363e48;
    font-size: 10px;
}

.enhanced-product-copy p,
.product p {
    color: #8d949e;
    font-size: 7px;
}

.product-brand {
    margin: 0 0 8px;
}

.product-compatibility-pill,
.product .badge {
    display: inline-flex;
    padding: 5px 7px;
    border-radius: 999px;
    background: #fff1f4;
    color: #d95069;
    font-size: 6px;
}

.enhanced-product-actions {
    margin-top: 11px;
}


/* RIGHT ACTION CARDS */

.quick-product-card {
    padding: 17px;
}

.quick-product-icon {
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #fff0f3;
    color: #e85d75;
    font-size: 15px;
}

.quick-product-card h3 {
    margin: 12px 0 7px;
    color: #404852;
    font-size: 11px;
}

.quick-product-card p {
    margin: 0 0 12px;
    color: #7c8590;
    font-size: 7px;
    line-height: 1.6;
}

.quick-product-card .btn {
    width: 100%;
}


/* BUTTON POLISH */

.btn {
    text-decoration: none;
}

.btn.secondary {
    background: #fff;
}

.product-guidance-side .btn.secondary {
    border-color: #efb3bf;
    color: #dd566e;
}


/* =========================================================
   PRODUCT SCANNER MODAL
========================================================= */

.uniscare-scanner-modal[hidden] {
    display: none !important;
}

.uniscare-scanner-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 20px;
}

.scanner-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20,20,25,.52);
    backdrop-filter: blur(6px);
}

.scanner-window {
    width: min(760px, 100%);
    max-height: calc(100vh - 40px);
    position: relative;
    z-index: 2;
    overflow-y: auto;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 30px 90px rgba(0,0,0,.2);
}

.scanner-window-head {
    padding: 19px;
    display: flex;
    justify-content: space-between;
    gap: 15px;
    border-bottom: 1px solid #ededee;
}

.scanner-window-head h2 {
    margin: 8px 0 3px;
    font-size: 19px;
}

.scanner-window-head p {
    margin: 0;
    color: #9198a1;
    font-size: 7px;
}

.scanner-close {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: #f6f6f8;
    cursor: pointer;
}

.scanner-tabs {
    padding: 11px 15px;
    display: flex;
    gap: 7px;
    border-bottom: 1px solid #eeeeef;
}

.scanner-tab {
    min-height: 35px;
    padding: 0 12px;
    border: 1px solid #e4e5e7;
    border-radius: 9px;
    background: #fff;
    color: #69717c;
    cursor: pointer;
    font-size: 7px;
}

.scanner-tab.active {
    border-color: #efb2be;
    background: #fff0f3;
    color: #e85d75;
    font-weight: 700;
}

.scanner-mode {
    padding: 17px;
}


/* BARCODE CAMERA */

.barcode-camera {
    height: 330px;
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    background: #181a1f;
}

.barcode-camera video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.barcode-frame {
    position: absolute;
    left: 12%;
    right: 12%;
    top: 28%;
    bottom: 28%;
    border: 2px solid rgba(255,255,255,.85);
    border-radius: 13px;
    pointer-events: none;
}

.scanner-start {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    place-content: center;
    justify-items: center;
    padding: 20px;
    background:
        linear-gradient(
            145deg,
            #252930,
            #15171b
        );
    color: #fff;
    text-align: center;
}

.scanner-start > span {
    font-size: 32px;
}

.scanner-start h3 {
    margin: 10px 0 5px;
}

.scanner-start p {
    max-width: 360px;
    color: #bfc3c9;
    font-size: 8px;
}

.scanner-result {
    margin-top: 12px;
    padding: 13px;
    border: 1px solid #dcecdf;
    border-radius: 11px;
    background: #f6fff9;
}

.scanner-result small {
    color: #849087;
    font-size: 7px;
}

.scanner-result strong {
    display: block;
    margin: 5px 0 10px;
}

.barcode-result-actions {
    display: flex;
    gap: 7px;
}

.scanner-native-fallback {
    margin-top: 13px;
    padding: 13px;
    border-radius: 11px;
    background: #f8f8fa;
}

.scanner-native-fallback p {
    color: #818995;
    font-size: 7px;
}

.scanner-native-fallback input {
    width: 100%;
    height: 39px;
    margin-bottom: 8px;
    padding: 0 10px;
    border: 1px solid #e1e2e5;
    border-radius: 8px;
}


/* OCR */

.ocr-upload,
.manual-ingredient-panel {
    min-height: 250px;
    padding: 25px;
    display: grid;
    place-content: center;
    justify-items: center;
    border: 2px dashed #efc1cb;
    border-radius: 14px;
    background: #fff9fa;
    text-align: center;
}

.ocr-upload > span {
    color: #e85d75;
    font-size: 30px;
}

.ocr-upload h3,
.manual-ingredient-panel h3 {
    margin: 10px 0 5px;
}

.ocr-upload p,
.manual-ingredient-panel p {
    max-width: 440px;
    color: #7f8791;
    font-size: 7px;
    line-height: 1.6;
}

.ocr-preview {
    margin-top: 14px;
}

.ocr-preview img {
    width: 100%;
    max-height: 280px;
    object-fit: contain;
    border-radius: 11px;
    background: #f4f4f6;
}

.ocr-preview textarea,
.manual-ingredient-panel textarea {
    width: 100%;
    margin: 12px 0;
    padding: 11px;
    border: 1px solid #dfe1e4;
    border-radius: 9px;
    font-size: 8px;
    resize: vertical;
}

.ocr-progress {
    margin: 11px 0;
}

.ocr-progress > div:first-child {
    display: flex;
    justify-content: space-between;
    color: #757e88;
    font-size: 7px;
}

.ocr-progress-track {
    height: 6px;
    margin-top: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: #eeeeef;
}

.ocr-progress-track span {
    display: block;
    height: 100%;
    background:
        linear-gradient(
            90deg,
            #f6a2b1,
            #e85d75
        );
}


/* RESULT */

.product-intelligence-result {
    margin: 0 17px 17px;
    padding: 16px;
    border: 1px solid #efdce1;
    border-radius: 14px;
    background:
        linear-gradient(
            145deg,
            #fff,
            #fff8f9
        );
}

.product-result-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.product-result-head h3 {
    margin: 8px 0 0;
}

.product-result-status {
    padding: 6px 8px;
    border-radius: 999px;
    background: #fff0f3;
    color: #d95269;
    font-size: 6px;
}

.product-result-summary {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 8px;
}

.product-result-summary > div {
    padding: 11px;
    border: 1px solid #eeeeef;
    border-radius: 9px;
    background: #fff;
}

.product-result-summary small {
    display: block;
    color: #939aa3;
    font-size: 6px;
}

.product-result-summary strong {
    display: block;
    margin-top: 4px;
    font-size: 9px;
}

.product-result-section {
    margin-top: 14px;
}

.product-result-section h4 {
    margin: 0 0 7px;
    font-size: 8px;
}

.ingredient-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ingredient-chip-list span {
    padding: 5px 7px;
    border-radius: 999px;
    background: #fff0f3;
    color: #d95169;
    font-size: 6px;
}

.product-guidance-notes {
    display: grid;
    gap: 6px;
}

.product-guidance-notes p {
    margin: 0;
    padding: 9px;
    border-radius: 8px;
    background: #f0faf4;
    color: #466b51;
    font-size: 7px;
}

.product-guidance-notes.caution p {
    background: #fff8e9;
    color: #89651f;
}

.product-result-disclaimer {
    margin-top: 14px;
    padding: 9px;
    border-radius: 8px;
    background: #f7f7f9;
    color: #8c939c;
    font-size: 6px;
}


/* RESPONSIVE */

@media (max-width: 1150px) {

    .product-guidance-kpis {
        grid-template-columns: repeat(2,1fr);
    }

    .product-guidance-grid {
        grid-template-columns: 1fr;
    }

    .product-guidance-side {
        display: grid;
        grid-template-columns: repeat(3,1fr);
    }

    .enhanced-product-grid,
    .products {
        grid-template-columns: repeat(2,1fr);
    }
}

@media (max-width: 700px) {

    .product-guidance-kpis,
    .product-guidance-side,
    .preuse-check-grid,
    .enhanced-product-grid,
    .products,
    .product-result-summary {
        grid-template-columns: 1fr;
    }

    .product-intelligence-banner {
        align-items: flex-start;
        flex-direction: column;
    }

    .product-intelligence-banner .btn {
        width: 100%;
    }

    .scanner-window {
        max-height: 95vh;
    }

    .scanner-tabs {
        overflow-x: auto;
    }

    .scanner-tab {
        flex: 0 0 auto;
    }
}

/* =========================================================
   UNISCARE BRAND INTENSITY OVERRIDE
   Brighter premium rose + stronger interactive states
   ========================================================= */

:root{--uniscare-rose:#F0446A;--uniscare-rose-deep:#D92F56;--uniscare-rose-soft:#FFF0F4;--uniscare-rose-border:#F6B4C4;--uniscare-rose-glow:rgba(240,68,106,.22);--uniscare-card:#FFFFFF;--uniscare-ink:#252B34;--uniscare-muted:#7E8792}
.btn,.ai-send-btn,.sidebar-ai-card .btn,.sidebar-card .btn,.analysis-submit-button{background:linear-gradient(135deg,var(--uniscare-rose),var(--uniscare-rose-deep));color:#fff;box-shadow:0 9px 22px var(--uniscare-rose-glow)}
.btn:hover,.ai-send-btn:hover,.sidebar-ai-card .btn:hover,.sidebar-card .btn:hover{background:linear-gradient(135deg,#F55779,var(--uniscare-rose-deep));box-shadow:0 11px 26px rgba(240,68,106,.28)}
.btn.secondary,.product-guidance-side .btn.secondary,.quick-product-card .btn.secondary{background:#fff;color:var(--uniscare-rose);border-color:var(--uniscare-rose-border);box-shadow:none}
.btn.secondary:hover,.product-guidance-side .btn.secondary:hover,.quick-product-card .btn.secondary:hover{background:var(--uniscare-rose-soft);border-color:var(--uniscare-rose);color:var(--uniscare-rose-deep)}
.brand b span,.sidebar-brand b span,.site-nav a.active{color:var(--uniscare-rose)}
.brand-mark,.sidebar-brand .brand-mark{background:linear-gradient(145deg,#FF9EB2,var(--uniscare-rose));box-shadow:0 8px 22px rgba(240,68,106,.20)}
.sidebar-nav a:hover,.sidebar nav a:hover{background:#FFF6F8;color:var(--uniscare-rose)}
.sidebar-nav a.active,.sidebar nav a.active{background:linear-gradient(90deg,#FFF0F4,#FFE4EA);color:var(--uniscare-rose-deep);font-weight:700}
.sidebar-nav a.active::before{background:var(--uniscare-rose)}
.sidebar-nav a.active>span,.nav-icon,.user-chip small,.user-info small{color:var(--uniscare-rose)}
.product-guidance-kpi>span,.quick-product-icon,.analysis-side-icon,.analysis-head-icon,.inventory-kpi-icon,.users-metric-icon,.notification-icon.pink,.sidebar-ai-icon,.routine-kpi-icon.rose,.routine-card-icon.weekly{background:var(--uniscare-rose-soft);color:var(--uniscare-rose)}
.product-compatibility-pill,.inventory-compatibility,.product-result-status,.inventory-category-pill,.analysis-type-pill,.badge{background:var(--uniscare-rose-soft);color:var(--uniscare-rose-deep)}
.enhanced-product-art,.product-art{background:linear-gradient(145deg,#FFF9FA,#FFE5EB)}
.enhanced-product-card,.product-guidance-card,.quick-product-card,.inventory-card,.analysis-admin-card,.progress-card,.routine-card{box-shadow:0 10px 30px rgba(45,29,35,.048)}
.enhanced-product-card:hover{border-color:#F3CAD3;box-shadow:0 15px 34px rgba(80,35,49,.09)}
.capture-tab.active,.scanner-tab.active{border-color:var(--uniscare-rose-border);background:var(--uniscare-rose-soft);color:var(--uniscare-rose-deep)}
.ingredient-chip-list>span,.ingredient-chip-list span{background:var(--uniscare-rose-soft);color:var(--uniscare-rose-deep)}
.routine-progress-track span,.ocr-progress-track span,.inventory-health-track span,.analysis-distribution-track span,.reports-track span,.concern-track span{background:linear-gradient(90deg,#FF9FB3,var(--uniscare-rose))}
.product-intelligence-banner,.routine-profile-banner{border-color:#F3D1D9;background:linear-gradient(135deg,#FFFFFF 0%,#FFF4F6 58%,#FFE9EE 100%)}
.eyebrow,.product-category,.command-view-all,.reports-small-link,.reports-panel-link,.ai-side-link,.progress-view-link,.enhanced-routine-step>a{color:var(--uniscare-rose-deep)}
.table-action,.analysis-view-btn,.inventory-view-btn,.dermatologist-book-btn,.consult-history-action{border-color:var(--uniscare-rose-border);color:var(--uniscare-rose-deep)}
.table-action:hover,.analysis-view-btn:hover,.inventory-view-btn:hover,.dermatologist-book-btn:hover,.consult-history-action:hover{background:var(--uniscare-rose-soft);border-color:var(--uniscare-rose)}
body{color:var(--uniscare-ink)}
.app-shell{background:linear-gradient(135deg,#F7F8FA 0%,#FBFBFC 65%,#FFF3F6 100%)}