html[data-site-theme="teb-jame"] { --color-primary:#8250ed; --color-heading:#151853; --color-body:#56628c; --color-secondary:#fb43a4; --color-bg-body:#f6f4ff; }
.beauty-home { color:#171b55; background:radial-gradient(at 0 40%,#dadbff80,transparent 50%),radial-gradient(at 100% 75%,#c4f7ed80,transparent 45%),#f8f6ff; padding-bottom:92px; min-height:100vh; }
.beauty-home *, .beauty-modal * { box-sizing:border-box; }
.beauty-home h1,.beauty-home h2,.beauty-home h3 { color:inherit; margin:0; font-weight:800; }
.beauty-home a { color:inherit; text-decoration:none; }
.beauty-home button, .beauty-modal button { font:inherit; cursor:pointer; }
.beauty-home a:focus-visible,.beauty-home button:focus-visible,.beauty-home input:focus-visible { outline:3px solid #8051ec; outline-offset:3px; }
.beauty-home .widget-columns { max-width:1400px; width:100%; padding:18px 24px; }
.beauty-home .widget-columns__grid { direction:ltr; grid-template-columns:minmax(0,1fr) 350px; gap:18px; }
.beauty-home .widget-columns__main,.beauty-home .widget-columns__side { direction:rtl; }
.beauty-home .widget-columns__side { display:block; }
.beauty-hero { min-height:490px; background-size:cover; background-position:center 38%; position:relative; padding:0 4% 32px; direction:ltr; }
.beauty-header { display:flex; align-items:center; justify-content:space-between; height:90px; position:relative; z-index:2; }
.beauty-brand { display:flex; align-items:center; gap:12px; font-size:34px; font-weight:900; direction:rtl; line-height:1.25; }
.beauty-brand small { display:block; font-size:13px; font-weight:500; }
.beauty-brand-mark { flex-shrink:0; order:2; }
.beauty-header-actions { display:flex; gap:22px; align-items:center; }
.beauty-header-actions a,.beauty-header-actions button { border:0; background:#f9f4ffb0; border-radius:50%; display:grid; place-items:center; width:44px; height:44px; font-size:25px; color:#191956; }
.beauty-menu { position:absolute; right:0; top:76px; background:white; padding:20px; border-radius:18px; box-shadow:0 12px 32px #26205420; direction:rtl; display:grid; gap:14px; min-width:180px; }
.beauty-hero-copy { text-align:center; direction:rtl; width:43%; padding:18px 8px; background:linear-gradient(90deg,#f7f2ffad,#f7f2ff75); border-radius:30px; }
.beauty-hero-copy>p:first-child { font-size:27px; font-weight:800; margin:0; }
.beauty-hero h1 { font-size:76px; line-height:1.2; }
.beauty-hero-description { font-size:18px; line-height:1.75; margin:12px 0 22px; }
.beauty-benefits { display:flex; justify-content:space-around; gap:12px; margin-bottom:20px; }
.beauty-benefits a { display:grid; justify-items:center; gap:8px; font-size:12px; }
.beauty-benefits i { font-size:25px; color:#974ae9; border-radius:50%; background:#efdfffcc; padding:10px; }
.beauty-benefits a:nth-child(2n) i { color:#04bba5; background:#d7f8f3cc; }
.beauty-hero-note { position:absolute; right:6%; bottom:44px; direction:rtl; backdrop-filter:blur(14px); border:1px solid #fff; border-radius:24px; background:#e5c9ff90; padding:18px 26px; font-weight:700; }
.beauty-panel { background:#ffffffdb; border:1px solid #fff; box-shadow:0 5px 22px #8b65c90a; border-radius:24px; padding:20px; margin-bottom:18px; overflow:hidden; }
.beauty-panel-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.beauty-panel h2 { font-size:25px; line-height:1.4; }
.beauty-panel-heading h2 i { color:#a24cee; vertical-align:middle; }
.beauty-panel--academy h2 i { color:#09bca3; }
.beauty-panel-description { font-size:14px; color:#496493; margin:0 0 16px; }
.beauty-all { font-size:12px; padding:5px 12px; background:#f1edff; border-radius:20px; white-space:nowrap; }
.beauty-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.beauty-card { min-width:0; background:linear-gradient(180deg,#fbf8fe,#fff); border-radius:19px; border:1px solid #f0eaff; overflow:hidden; text-align:center; box-shadow:0 5px 10px #42207a05; }
.beauty-card h3 { font-size:16px; line-height:1.6; padding:0 10px; margin:10px 0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.beauty-card p { font-size:12px; padding:0 10px; line-height:1.8; }
.beauty-card-image { height:155px; overflow:hidden; border-radius:18px; background:#f1eaff; display:grid; place-items:center; }
.beauty-card-image img { width:100%; height:100%; object-fit:cover; }
.beauty-card-image--icon { color:#8746e7; font-size:46px; background:radial-gradient(circle,#e9d9ff,transparent 70%),#faf6ff; }
.beauty-tag { display:inline-block; font-size:11px; border-radius:20px; padding:3px 12px; color:#8543be; background:#f4def8; margin-top:8px; }
.beauty-story-list { display:flex; overflow-x:auto; gap:16px; padding:8px 2px; }
.beauty-story-list .beauty-card { flex:0 0 105px; border:0; background:none; box-shadow:none; }
.beauty-story-list .beauty-card-image { border-radius:50%; width:100px; height:100px; border:2px solid #f34cab; padding:4px; background:#faeaff; }
.beauty-story-list img { border-radius:50%; }
.beauty-story-list video { width:100%; height:100%; object-fit:cover; border-radius:50%; pointer-events:none; }
.beauty-story-list .beauty-card-image:has(video) { position:relative; }
.beauty-story-list .beauty-card-image:has(video)::after { content:'▶'; position:absolute; inset:0; display:grid; place-items:center; font-size:28px; color:#9b4cdb; text-shadow:0 1px 5px #fff; pointer-events:none; }
.beauty-story-viewer { max-width:450px; text-align:center; background:#24203b; color:white; }
.beauty-story-viewer video,.beauty-story-viewer>img { width:100%; max-height:60vh; border-radius:16px; object-fit:contain; }
.beauty-story-controls { display:flex; justify-content:space-between; align-items:center; margin-top:15px; }
.beauty-panel--community .beauty-cards { grid-template-columns:repeat(3,minmax(0,1fr)); }
.beauty-panel--community .beauty-card-image { height:65px; background:#f2ecff; }
.beauty-panel--community .beauty-card-image img { object-fit:contain; }
.beauty-panel--community .beauty-card h3 { font-size:14px; font-weight:600; }
.beauty-story-list h3 { font-size:13px; padding:8px 0 0; }
.beauty-categories { display:flex; gap:10px; overflow-x:auto; margin:14px 0 18px; }
.beauty-categories a { flex:1 0 auto; padding:8px 15px; background:#f3efff; border-radius:22px; font-size:13px; display:flex; align-items:center; gap:8px; }
.beauty-categories i { color:#8550f3; font-size:22px; }
.beauty-button { display:inline-flex; align-items:center; justify-content:center; gap:10px; border:1px solid #a573fc; border-radius:24px; padding:10px 22px; background:linear-gradient(120deg,#b078f1,#8050ed); color:#fff!important; line-height:1.5; font-size:14px; text-decoration:none; }
.beauty-button-pink { background:linear-gradient(120deg,#ff79c4,#ff3995); border-color:#ff64b7; box-shadow:0 5px 15px #ff439626; }
.beauty-hero .beauty-button { font-size:20px; min-width:280px; font-weight:700; }
.beauty-button:disabled { opacity:.6; cursor:default; }
.beauty-text-button { border:0; background:none; color:#7844cd; text-decoration:underline; padding:10px; }
.beauty-product-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.beauty-product-grid .beauty-card { padding-bottom:12px; background:linear-gradient(180deg,#fff0f7,#fff); }
.beauty-product-grid .beauty-card-image { height:160px; background:#f9e9f4; }
.beauty-price { font-size:15px!important; font-weight:700; }
.beauty-product-grid .beauty-button { padding:9px 12px; font-size:12px; }
.beauty-panel--promo { min-height:175px; color:#fff; background:linear-gradient(120deg,#47316e,#8e63b6); background-size:cover; background-position:center; }
.beauty-panel--promo .beauty-panel-description { color:#fff; max-width:230px; font-size:14px; }
.beauty-tone--gold.beauty-panel--promo { background:linear-gradient(130deg,#263154,#61547e); border:1px solid #e7d396; }
.beauty-tone--gold.beauty-panel--promo h2 { color:#ffe18a; }
.beauty-tone--gold .beauty-button { background:linear-gradient(120deg,#ffe4a0,#f1c760); border-color:#ffe69d; color:#292049!important; }
.beauty-home .widget-columns__side h2 { font-size:21px; }
.beauty-tool-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.beauty-tool-grid .beauty-card { border:0; background:#eaf4ff; }
.beauty-tool-grid .beauty-card:nth-child(3n+2) { background:#e4fbf6; }
.beauty-tool-grid .beauty-card:nth-child(3n) { background:#ffedf6; }
.beauty-tool-grid .beauty-card-image { height:65px; font-size:32px; background:transparent; }
.beauty-tool-grid h3 { font-size:12px; padding:0 5px 12px; }
.beauty-panel--challenge { background:linear-gradient(120deg,#fff3ed,#fff); }
.beauty-challenge { display:flex; gap:16px; align-items:center; }
.beauty-challenge>i { font-size:48px; color:#ff7736; }
.beauty-days { display:flex; gap:8px; padding:12px 0; }
.beauty-days span { width:27px; height:27px; display:grid; place-items:center; background:#e5e1ef; border-radius:50%; color:#615986; font-size:12px; }
.beauty-days .done { background:#22cca9; color:white; }
.beauty-muted { color:#627090; font-size:12px; display:block; margin-top:12px; line-height:1.8; }
.beauty-empty { text-align:center; padding:18px 12px; background:#faf8fe; border-radius:16px; color:#66718d; font-size:14px; }
.beauty-empty>i { font-size:40px; color:#a978f0; }
.beauty-ring { width:116px; height:116px; flex-shrink:0; border-radius:50%; display:grid; place-items:center; background:conic-gradient(#28cdb1 var(--progress,0%),#e6ddfb 0); position:relative; }
.beauty-ring:before { content:''; position:absolute; inset:10px; border-radius:50%; background:#fff; }
.beauty-ring span { position:relative; z-index:1; font-size:26px; font-weight:800; text-align:center; }
.beauty-ring small { display:block; font-size:11px; font-weight:400; }
.beauty-status { display:flex; gap:16px; align-items:center; font-size:14px; }
.beauty-status p { font-size:12px; }
.beauty-quiz-layout { display:grid; grid-template-columns:155px minmax(0,1fr) 150px; gap:22px; direction:ltr; align-items:center; }
.beauty-quiz-layout>* { direction:rtl; }
.beauty-quiz-layout>img { width:155px; height:260px; border-radius:20px; object-fit:cover; object-position:67% center; }
.beauty-quiz-question h3 { font-size:17px; line-height:1.8; margin-bottom:12px; }
.beauty-quiz-question>p { font-size:12px; }
.beauty-quiz fieldset { border:0; padding:0; margin:0; }
.beauty-quiz label { display:flex; gap:10px; align-items:center; border:1px solid #d9c7ef; border-radius:20px; padding:8px 14px; margin-bottom:7px; cursor:pointer; font-size:13px; }
.beauty-quiz label.selected { background:#efe4ff; border-color:#a56af5; }
.beauty-quiz label input { width:16px; height:16px; margin:0; accent-color:#8951ed; }
.beauty-quiz-actions { display:flex; gap:10px; margin-top:14px; }
.beauty-quiz-progress { display:grid; justify-items:center; text-align:center; font-size:12px; }
.beauty-quiz-progress p { margin:12px 0; }
.beauty-quiz-result h3 { margin:15px 0; font-size:24px; }
.beauty-quiz-result p { font-size:14px; }
.beauty-panel--chat { background:linear-gradient(135deg,#dff9fc,#dfeaff); }
.beauty-chat-greeting { background:#ffffffd9; border-radius:18px; padding:15px; display:flex; gap:14px; align-items:center; margin:16px 0; }
.beauty-chat-greeting span { font-size:40px; color:#a863eb; }
.beauty-chat-greeting p { font-size:14px; line-height:1.8; margin:0; }
.beauty-chat-shortcuts { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.beauty-chat-shortcuts a { border:1px solid #8fd8fb; border-radius:22px; padding:7px; font-size:12px; text-align:center; background:#ffffffb0; }
.beauty-chat-input { display:flex; gap:8px; border-radius:24px; background:#fff; margin-top:16px; padding:5px; }
.beauty-chat-input input { border:0; background:transparent; width:100%; height:36px; font-size:12px; padding:8px; }
.beauty-chat-input button { border:0; background:#9a63ef; color:white; border-radius:50%; width:36px; flex-shrink:0; }
.beauty-chat-answer { white-space:pre-wrap; font-size:13px; background:white; padding:15px; border-radius:15px; margin-top:15px; }
.beauty-app-links { display:flex; gap:10px; flex-wrap:wrap; }
.beauty-bottom-nav { position:fixed; bottom:0; left:0; right:0; background:#fffdf3ed; backdrop-filter:blur(16px); padding:10px max(18px,calc((100vw - 1360px)/2)) calc(10px + env(safe-area-inset-bottom)); display:flex; justify-content:space-around; gap:8px; z-index:30; box-shadow:0 -5px 25px #41206b0b; }
.beauty-bottom-nav a { display:grid; justify-items:center; gap:4px; font-size:12px; padding:5px 14px; border-radius:18px; flex:1; }
.beauty-bottom-nav a:first-child { background:#f1e6ff; color:#7040eb; }
.beauty-bottom-nav i { font-size:23px; }
.beauty-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.beauty-modal-backdrop { position:fixed; inset:0; background:#19133180; z-index:1000; display:grid; place-items:center; padding:20px; }
.beauty-modal { background:#fff; padding:30px; border-radius:24px; width:min(560px,100%); max-height:85vh; overflow-y:auto; position:relative; color:#191b55; }
.beauty-modal h2 { font-size:24px; margin:0 0 18px; }
.beauty-modal p { font-size:14px; }
.beauty-modal-close { position:absolute; top:10px; left:16px; border:0; background:none; font-size:30px!important; }
.beauty-modal label { display:block; font-size:14px; margin-bottom:5px; }
.beauty-modal input { width:100%; border:1px solid #d9ccec; border-radius:12px; padding:10px; height:auto; margin-bottom:16px; background:#fcfaff; }
.beauty-photo-preview { max-height:260px; width:100%; object-fit:contain; border-radius:16px; }
.beauty-event-list { list-style:none; padding:0; }
.beauty-event-list li { padding:14px 0; border-bottom:1px solid #eee; }
.beauty-event-list span { display:block; font-size:12px; }
html[data-site-theme="teb-jame"] .rn-progress-parent { bottom:100px; }
@media(max-width:480px) { .beauty-brand-mark { display:block!important; width:32px; height:38px; }.beauty-panel--community .beauty-cards { grid-template-columns:1fr; }.beauty-panel--community .beauty-card { text-align:right; }.beauty-panel--community .beauty-card-image { display:none; }.beauty-panel--community .beauty-tag { margin-inline:10px; } }
@media(min-width:1500px) { .beauty-hero { padding-inline:calc((100vw - 1320px)/2); } }
@media(max-width:1100px) { .beauty-home .widget-columns__grid { grid-template-columns:minmax(0,1fr) 300px; gap:12px; }.beauty-panel{padding:16px}.beauty-hero h1{font-size:62px}.beauty-hero-copy>p:first-child{font-size:22px}.beauty-quiz-layout{grid-template-columns:110px minmax(0,1fr);gap:14px}.beauty-quiz-layout>img{width:110px}.beauty-quiz-progress{display:none}.beauty-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:800px) { .beauty-home .widget-columns__grid{grid-template-columns:minmax(0,1fr)}.beauty-home .widget-columns{padding:12px}.beauty-hero{min-height:470px;padding:0 16px 24px;background-position:62% center}.beauty-brand{font-size:26px}.beauty-brand-mark{font-size:48px}.beauty-header-actions{gap:8px}.beauty-header-actions a,.beauty-header-actions button{width:36px;height:36px;font-size:21px}.beauty-hero-copy{width:58%;margin-top:15px}.beauty-hero h1{font-size:48px}.beauty-hero-copy>p:first-child{font-size:20px}.beauty-hero-description{font-size:14px}.beauty-benefits{gap:5px}.beauty-benefits a{font-size:10px}.beauty-benefits i{font-size:21px;padding:8px}.beauty-hero .beauty-button{font-size:16px;min-width:0;width:100%}.beauty-hero-note{display:none}.beauty-panel h2{font-size:22px}.beauty-bottom-nav a{padding:5px 2px;font-size:10px}.beauty-bottom-nav{gap:2px;padding-inline:6px}.beauty-bottom-nav i{font-size:21px} }
@media(max-width:480px) { .beauty-hero{background-position:68% top;padding-top:0}.beauty-hero-copy{width:100%;margin-top:220px;background:#f8f0ffe8;padding:20px 14px}.beauty-hero h1{font-size:54px}.beauty-header{height:72px}.beauty-brand small{font-size:10px}.beauty-header-actions{gap:4px}.beauty-brand{font-size:23px}.beauty-brand-mark{display:none}.beauty-cards{grid-template-columns:1fr 1fr}.beauty-cards .beauty-card:last-child:nth-child(odd){grid-column:1/-1}.beauty-card-image{height:145px}.beauty-card h3{font-size:14px}.beauty-tool-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.beauty-tool-grid .beauty-card:last-child:nth-child(odd){grid-column:auto}.beauty-tool-grid .beauty-card-image{height:65px}.beauty-tool-grid h3{font-size:12px}.beauty-quiz-layout{grid-template-columns:minmax(0,1fr)}.beauty-quiz-layout>img{display:none}.beauty-panel-heading{align-items:flex-start}.beauty-panel h2{font-size:20px} }
@media(prefers-reduced-motion:reduce) { .beauty-home * { scroll-behavior:auto!important; transition:none!important; } }