:root {
--bg-main: #0F172A; --bg-surface: #1E293B; --bg-hover: #334155;
--text-main: #E2E8F0; --text-body: #CBD5E1; --text-muted: #94A3B8;
--surface-1: #1E293B; --surface-2: #243447; --surface-3: #2E4158;
--accent-gold: #D4A017; --accent-gold-hover: #B88912; --accent-gold-light: rgba(212, 160, 23, 0.12);
--accent-primary: #3B82F6; --accent-primary-hover: #2563EB; --accent-primary-light: rgba(59, 130, 246, 0.16);
--accent-focus: #60A5FA;
--text-on-primary: #F8FAFC;
--text-on-gold: #111827; --border-color: #334155; --shadow-card: 0 4px 6px -1px rgba(0,0,0,0.3);
--color-info: #2563EB; --color-success: #16A34A; --color-warning: #F59E0B; --color-danger: #DC2626;
--state-info-bg: rgba(59,130,246,0.12); --state-info-border: rgba(59,130,246,0.35); --state-info-text: #93C5FD;
--state-success-bg: rgba(16,185,129,0.12); --state-success-border: rgba(16,185,129,0.35); --state-success-text: #6EE7B7;
--state-warning-bg: rgba(245,158,11,0.14); --state-warning-border: rgba(245,158,11,0.35); --state-warning-text: #FCD34D;
--state-danger-bg: rgba(239,68,68,0.12); --state-danger-border: rgba(239,68,68,0.35); --state-danger-text: #FCA5A5;
--bg-header: rgba(15, 23, 42, 0.85); --hero-glow: rgba(30,41,59,0.45);
--glass-bg: linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
--glass-border: rgba(255,255,255,0.22);
--glass-shadow: 0 24px 48px rgba(2, 6, 23, 0.38);
--glass-blur: 18px;
--glass-sheen: linear-gradient(120deg, rgba(255,255,255,0.22), rgba(255,255,255,0.03) 46%, rgba(255,255,255,0));
--radius-xl: 20px; --radius-lg: 16px; --radius-md: 10px;
}
body.light, [data-theme="light"] {
--bg-main: #EEF3FA;
--bg-surface: #F8FBFF;
--bg-hover: #E6EEF8;
--surface-1: #FFFFFF;
--surface-2: #F8FBFF;
--surface-3: #EEF4FF;
--bg-card: #F8FBFF;
--bg-header: rgba(244, 249, 255, 0.88);
--text-main: #1E293B;
--text-body: #334155;
--text-muted: #64748B;
--accent-gold: #B88912;
--accent-gold-hover: #9A710D;
--accent-gold-light: rgba(212, 160, 23, 0.12);
--accent-primary: #2563EB;
--accent-primary-hover: #1D4ED8;
--accent-primary-light: rgba(37, 99, 235, 0.12);
--accent-focus: #1D4ED8;
--text-on-primary: #FFFFFF;
--text-on-gold: #FFFFFF;
--border-color: #E2E8F0;
--shadow-card: 0 2px 12px rgba(15,23,42,0.08);
--hero-glow: rgba(212,160,23,0.1);
--color-info: #2563EB;
--color-success: #16A34A;
--color-warning: #CA8A04;
--color-danger: #DC2626;
--state-info-bg: rgba(37,99,235,0.1);
--state-info-border: rgba(37,99,235,0.28);
--state-info-text: #1D4ED8;
--state-success-bg: rgba(22,163,74,0.1);
--state-success-border: rgba(22,163,74,0.28);
--state-success-text: #047857;
--state-warning-bg: rgba(202,138,4,0.12);
--state-warning-border: rgba(202,138,4,0.3);
--state-warning-text: #A16207;
--state-danger-bg: rgba(220,38,38,0.1);
--state-danger-border: rgba(220,38,38,0.28);
--state-danger-text: #B91C1C;
--glass-bg: linear-gradient(150deg, rgba(255,255,255,0.76), rgba(241,248,255,0.55));
--glass-border: rgba(148,163,184,0.3);
--glass-shadow: 0 18px 36px rgba(15, 23, 42, 0.14);
--glass-blur: 14px;
--glass-sheen: linear-gradient(120deg, rgba(255,255,255,0.82), rgba(255,255,255,0.3) 52%, rgba(255,255,255,0));
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Unified icon system for consistent visual quality */
[data-lucide], .lucide {
width: 1em;
height: 1em;
display: inline-block;
flex-shrink: 0;
vertical-align: -0.14em;
}
.lucide {
stroke-width: 1.85;
stroke-linecap: round;
stroke-linejoin: round;
vector-effect: non-scaling-stroke;
shape-rendering: geometricPrecision;
}
.btn .lucide, .card-open-btn .lucide, .result-actions .lucide, .nav-link .lucide { width: 16px; height: 16px; }
.hero-feat .lucide, .card-meta-pill .lucide, .card-ref-badge .lucide { width: 14px; height: 14px; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
outline: 2px solid var(--accent-focus);
outline-offset: 2px;
border-radius: 8px;
}
html, body { max-width: 100vw; overflow-x: hidden; font-family: 'IBM Plex Sans Arabic', sans-serif; font-feature-settings: 'ss01', 'ss02'; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; background-color: var(--bg-main); color: var(--text-main); min-height: 100vh; display: flex; flex-direction: column; transition: 0.3s; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-touch-callout: none; }
body {
background-image:
radial-gradient(48% 36% at 8% 4%, color-mix(in srgb, #22d3ee 16%, transparent), transparent 72%),
radial-gradient(38% 34% at 92% 2%, color-mix(in srgb, var(--accent-gold) 20%, transparent), transparent 74%),
radial-gradient(58% 48% at 52% 100%, color-mix(in srgb, #10b981 10%, transparent), transparent 82%);
background-attachment: fixed;
position: relative;
}
body.light,
[data-theme="light"] body,
[data-theme="light"] {
background-image:
radial-gradient(52% 42% at 6% 0%, rgba(56, 189, 248, 0.16), transparent 70%),
radial-gradient(42% 34% at 92% 4%, rgba(251, 191, 36, 0.16), transparent 72%),
radial-gradient(56% 50% at 50% 100%, rgba(16, 185, 129, 0.1), transparent 80%),
linear-gradient(180deg, #F5F9FF 0%, #EEF3FA 45%, #E9F0F9 100%);
background-attachment: fixed;
}
body::before {
content: '';
position: fixed;
inset: -8%;
pointer-events: none;
z-index: 0;
background:
radial-gradient(46% 34% at 18% 18%, rgba(255,255,255,0.11), transparent 74%),
radial-gradient(42% 32% at 82% 20%, rgba(255,255,255,0.09), transparent 76%),
radial-gradient(50% 42% at 50% 88%, color-mix(in srgb, #60a5fa 12%, transparent), transparent 78%);
}
.view-section,
header,
footer {
position: relative;
z-index: 1;
}
input, textarea { user-select: text !important; -webkit-user-select: text !important; -moz-user-select: text !important; -ms-user-select: text !important; }
.view-section { display: none; flex-direction: column; flex: 1; opacity: 0; animation: fadeIn 0.4s ease forwards;}
.view-section.active { display: flex; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; width: 100%; }
header { background: color-mix(in srgb, var(--bg-header) 86%, transparent); backdrop-filter: blur(calc(var(--glass-blur) + 2px)) saturate(120%); -webkit-backdrop-filter: blur(calc(var(--glass-blur) + 2px)) saturate(120%); border-bottom: 1px solid color-mix(in srgb, var(--glass-border) 80%, var(--border-color)); box-shadow: 0 12px 28px rgba(2, 6, 23, 0.18); position: sticky; top: 0; z-index: 100; width: 100%; transition: 0.3s;}
.header-inner { display: flex; justify-content: space-between; align-items: center; height: 75px; }
.brand { display: flex; align-items: center; gap: 0.8rem; cursor: pointer; text-decoration: none; color: var(--text-main);}
.brand-icon { width: 32px; height: 32px; object-fit: contain; display: inline-block; }
.splash-badge-icon { width: 14px; height: 14px; object-fit: contain; display: inline-block; }
.about-brand-icon { width: 28px; height: 28px; object-fit: contain; display: inline-block; }
.footer-brand-icon { width: 26px; height: 26px; object-fit: contain; display: inline-block; }
.brand-text h1 { font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 1.6rem; font-weight: 700; line-height: 1; margin:0;}
.brand-text p { font-size: 0.75rem; color: var(--text-muted); font-weight: 600; margin:0;}
.nav-links { display: flex; gap: 1.5rem; align-items: center; }
.nav-link { color: var(--text-muted); text-decoration: none; font-weight: 600; font-size: 0.95rem; transition: 0.2s; cursor:pointer;}
.nav-link:hover { color: var(--accent-gold); }
.header-actions { display: flex; align-items: center; gap: 1rem; }
.mobile-menu-btn { display: none; background: rgba(255,255,255,0.1); border: 1px solid var(--border-color); border-radius: 8px; width: 44px; height: 44px; align-items: center; justify-content: center; cursor: pointer; color: var(--text-main); transition: background 0.18s, border-color 0.18s, color 0.18s; }
.mobile-menu-btn:hover { background: rgba(234,179,8,0.15); border-color: var(--accent-gold); color: var(--accent-gold); }
.mobile-menu-btn[aria-expanded="true"] { background: rgba(234,179,8,0.18); border-color: var(--accent-gold); color: var(--accent-gold); }
/* Backdrop overlay for mobile nav */
.mobile-nav-backdrop { display: none; position: fixed; inset: 0; z-index: 1390; background: rgba(0,0,0,0.42); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
@keyframes fadeInBd { from { opacity:0; } to { opacity:1; } }
.mobile-nav-backdrop.open { display: block; animation: fadeInBd 0.18s ease forwards; }
.search-box { display: flex; align-items: center; background: var(--glass-bg); border: 1px solid color-mix(in srgb, var(--glass-border) 84%, var(--border-color)); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border-radius: 10px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.14); padding: 0.4rem 0.8rem; max-width: 250px;}
.search-box input { background: transparent; border: none; outline: none; color: var(--text-main); font-family: inherit; width: 100%; padding-right: 0.5rem; font-size: 0.9rem;}
.hero { padding: 3.3rem 0 3.8rem; text-align: center; border-bottom: none; background: radial-gradient(circle at 50% 0%, var(--hero-glow) 0%, transparent 78%); width: 100%; position: relative; }
.hero h2 { font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: clamp(1.9rem, 4.4vw, 3.1rem); font-weight: 700; line-height: 1.28; margin-bottom: 0.7rem; }
.hero h2 span { color: var(--accent-gold); }
.hero p { font-size: 0.98rem; color: var(--text-body); max-width: 620px; margin: 0 auto 1.9rem; line-height: 1.78; font-weight: 500;}
.browse-section { padding: 2.4rem 0; }
.test-card,
.instructions-card,
.q-card-container,
.report-section,
.admin-tabs,
.suggestion-card,
.saved-test-item,
.items-box,
.opts-box,
.tips-box,
.subscales-box,
.mood-entry-card,
.mood-analytics-wrap,
.mood-history-wrap,
.mood-plus-card,
.mood-kpi-card,
.cutoff-entry,
.security-log-item,
.trusted-device-card,
.endpoint-metric-item,
.admin-health-card,
.share-bar,
.norms-section,
.faq-item,
.how-step,
.about-value {
background: var(--glass-bg) !important;
border-color: color-mix(in srgb, var(--glass-border) 84%, var(--border-color)) !important;
backdrop-filter: blur(var(--glass-blur)) saturate(132%);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(132%);
box-shadow: var(--glass-shadow);
position: relative;
overflow: hidden;
}
/* instructions-card must allow dropdown to overflow */
.instructions-card { overflow: visible !important; }
/* Download dropdown glass styling */
#dl-menu {
background: var(--bg-surface) !important;
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
border: 1px solid color-mix(in srgb, var(--glass-border) 85%, var(--border-color)) !important;
box-shadow: 0 12px 32px rgba(2,6,23,0.32), 0 2px 8px rgba(0,0,0,0.18) !important;
border-radius: 14px !important;
padding: 0.4rem !important;
min-width: 210px !important;
z-index: 9999 !important;
}
.test-card::before,
.q-card-container::before,
.report-section::before,
.mood-plus-card::before,
.mood-entry-card::before,
.mood-analytics-wrap::before,
.mood-history-wrap::before,
.admin-tabs::before,
.norms-section::before {
content: '';
position: absolute;
inset: 0;
background: var(--glass-sheen);
opacity: 0.55;
pointer-events: none;
}
.test-card:hover,
.mood-plus-card:hover,
.report-section:hover,
.how-step:hover,
.about-value:hover,
.faq-item:hover {
box-shadow: 0 18px 38px rgba(2, 6, 23, 0.32);
transform: translateY(-2px);
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
:root { --glass-blur: 8px; }
html:focus-within { scroll-behavior: auto !important; }
*, *::before, *::after {
animation: none !important;
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition: none !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
body::before { transition: none !important; }
:is(.test-card,.mood-plus-card,.report-section,.how-step,.about-value,.faq-item):hover {
transform: none;
transition: none;
}
}
@media (hover: none), (pointer: coarse) {
:root { --glass-blur: 11px; }
}
.hero::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 56px;
background: linear-gradient(to bottom, transparent, var(--bg-main));
pointer-events: none;
}
[data-theme="light"] .hero::after {
background: linear-gradient(to bottom, transparent, #F0F4FF) !important;
}
.section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem;}
.filters-wrapper { display: flex; gap: 0.55rem; overflow-x: auto; padding-bottom: 0.7rem; margin-bottom: 0.7rem; scrollbar-width: none; max-width: 100vw; }
.filters-wrapper::-webkit-scrollbar { display: none; }
.filter-btn { display: flex; align-items: center; gap: 0.4rem; background: var(--bg-surface); border: 1px solid var(--border-color); color: var(--text-muted); padding: 0.46rem 0.95rem; border-radius: 50px; font-family: inherit; font-size: 0.84rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: 0.2s; min-height: 44px; }
.filter-btn:hover { border-color: var(--accent-gold); color: var(--text-main); }
.filter-btn.active { background: var(--accent-gold-light); border-color: var(--accent-gold); color: var(--accent-gold); }
.tests-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1.3rem; max-width: 100%; }
.test-card { background: var(--surface-1); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 1.4rem; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; box-shadow: 0 1px 3px rgba(0,0,0,0.08); min-height: 430px; }
.test-card:hover { transform: translateY(-6px); border-color: var(--accent-gold); box-shadow: 0 12px 28px rgba(234,179,8,0.15); background: linear-gradient(135deg, rgba(234,179,8,0.03), rgba(99,102,241,0.03));}
.card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; gap: 0.5rem; }
.card-tag { font-size: 0.7rem; padding: 0.28rem 0.75rem; border-radius: 50px; font-weight: 800; color: white; text-transform: uppercase; letter-spacing: 0.5px;}
.card-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.2rem; flex-shrink: 0;}
.card-title { font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 1.2rem; font-weight: 800; margin-bottom: 0.4rem; line-height: 1.42; color: var(--text-main); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(1.42em * 2);}
.card-subtitle { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.65rem; min-height: 30px; }
.card-abbr { font-size: 0.76rem; color: var(--accent-gold); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 44%; }
.card-badges { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.35rem; flex-wrap: wrap; min-width: 0; }
.card-desc { font-size: 0.9rem; color: var(--text-body); line-height: 1.6; margin-bottom: 0.25rem; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(1.6em * 4); transition: all 0.25s ease;}
.card-desc.expanded { -webkit-line-clamp: unset; display: block; overflow: visible; }
.card-more-toggle { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.75rem; color: var(--accent-gold); font-weight: 700; cursor: pointer; border: 1px solid rgba(234,179,8,0.3); background: rgba(234,179,8,0.08); padding: 0.25rem 0.7rem; border-radius: 999px; margin-bottom: 0.65rem; transition: all 0.2s; margin-left: auto; }
.card-more-toggle:hover { background: rgba(234,179,8,0.18); border-color: rgba(234,179,8,0.5); }
.card-more-toggle::before { content: '◀'; font-size: 0.55rem; transition: transform 0.2s; }
.card-more-toggle.expanded::before { transform: rotate(90deg); }
.card-meta-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem; margin-bottom: 0.95rem; }
.card-meta-pill { display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; font-size: 0.74rem; font-weight: 750; color: var(--text-muted); background: var(--bg-main); border: 1px solid var(--border-color); border-radius: 999px; padding: 0.3rem 0.48rem; white-space: nowrap; }
.card-meta-pill i { width: 12px; height: 12px; color: var(--accent-gold); }
/* --- Skeleton Loading --- */
@keyframes skeletonShimmer { 0%{background-position:-600px 0} 100%{background-position:600px 0} }
.skeleton-card { background:var(--bg-surface); border:1px solid var(--border-color); border-radius:var(--radius-lg); padding:1.4rem; display:flex; flex-direction:column; gap:0.75rem; pointer-events:none; overflow:hidden; }
.skeleton-line { border-radius:6px; background:linear-gradient(90deg,var(--bg-surface) 25%,var(--bg-hover,rgba(255,255,255,0.06)) 50%,var(--bg-surface) 75%); background-size:600px 100%; animation:skeletonShimmer 1.6s ease infinite; }
.card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: auto; font-size: 0.8rem; color: var(--text-muted); font-weight: 600; padding-top: 1rem; border-top: 1px solid var(--border-color); gap: 0.5rem; }
.card-footer span { display: inline-flex; align-items: center; gap: 0.3rem; }
.card-open-btn { display: inline-flex; align-items: center; gap: 0.35rem; background: linear-gradient(135deg, var(--accent-primary), var(--accent-primary-hover)); color: var(--text-on-primary); border: none; padding: 0.5rem 0.9rem; border-radius: 8px; font-size: 0.8rem; font-weight: 700; cursor: pointer; margin-right: auto; transition: 0.2s; }
.card-open-btn:hover { filter: brightness(1.05); transform: scale(1.02); }
.card-custom-badge { font-size: 0.67rem; background: rgba(139,92,246,0.15); color: #a78bfa; border: 1px solid rgba(139,92,246,0.3); padding: 0.2rem 0.55rem; border-radius: 50px; font-weight: 800; letter-spacing: 0; white-space: nowrap; }
.instructions-card { background: var(--bg-surface); border: 2px solid var(--accent-gold); border-radius: var(--radius-lg); padding: 3rem; max-width: 600px; margin: 4rem auto; box-shadow: var(--shadow-card); text-align: right; }
.inst-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; color: var(--accent-gold); border-bottom: 1px solid var(--bg-hover); padding-bottom: 1rem;}
.inst-text { line-height: 1.8; color: var(--text-body); font-size: 1.1rem; margin-bottom: 2rem; white-space: pre-wrap;}
.inst-actions { text-align:center; margin-top:2rem; display:flex; flex-wrap:wrap; gap:0.8rem; justify-content:center; }
@media (min-width: 1024px) {
#view-instructions .container { max-width: 920px; }
.instructions-card { max-width: 720px; padding: 2.1rem 2rem; margin: 1.8rem auto; }
#view-instructions #inst-title { font-size: 1.58rem !important; }
.inst-header { margin-bottom: 1rem; padding-bottom: 0.75rem; }
.inst-text { font-size: 1rem; line-height: 1.7; margin-bottom: 1.2rem; }
.inst-actions { margin-top: 1.2rem; gap: 0.6rem; }
.inst-actions .btn { padding: 0.68rem 1.25rem; font-size: 0.93rem; }
/* Compact Desktop: ???? ??????? */
#view-test .test-engine { max-width: 700px; padding-top: 1.1rem; padding-left: 1rem; padding-right: 1rem; }
#view-test .test-header { margin-bottom: 0.65rem; padding-bottom: 0.55rem; }
#view-test .progress-labels { margin-bottom: 0.35rem; font-size: 0.82rem; }
#view-test .progress-bar-bg { margin-bottom: 0.9rem; height: 5px; }
#view-test .q-card-container { padding: 1.25rem 1rem; margin-bottom: 0.85rem; border-radius: 12px; }
#view-test .q-badge { margin-bottom: 0.55rem; font-size: 0.75rem; padding: 0.2rem 0.78rem; }
#view-test .q-text { font-size: 1.38rem; line-height: 1.5; margin-bottom: 0.95rem; }
#view-test .options-stack { max-width: 560px; gap: 0.42rem; }
#view-test .opt-btn { padding: 0.56rem 0.75rem; font-size: 0.88rem; border-radius: 9px; }
#view-test .test-actions { gap: 0.55rem; }
#view-test .test-actions .btn { padding: 0.56rem 0.9rem; font-size: 0.86rem; }
}
.test-engine { max-width: 650px; margin: 0 auto; width: 100%; padding: 3rem 1.5rem; }
.test-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border-color); }
#test-title-top { font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 1.4rem; font-weight: 700; margin: 0; color: var(--text-main); line-height: 1.3; }
.zen-btn { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--bg-surface); border: 1px solid var(--border-color); padding: 0.4rem 1rem; border-radius: 50px; cursor: pointer; color: var(--text-muted); font-size: 0.85rem; font-weight: 600; transition: 0.2s; }
.zen-btn:hover { border-color: var(--accent-gold); color: var(--accent-gold); }
.progress-labels { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.45rem; font-size: 0.9rem; font-weight: 700; color: var(--text-muted); }
.progress-subline { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; margin: 0 0 0.9rem; color: var(--text-muted); font-size: 0.8rem; font-weight: 650; }
.autosave-indicator { display: inline-flex; align-items: center; gap: 0.28rem; padding: 0.18rem 0.58rem; border-radius: 999px; border: 1px solid var(--border-color); background: var(--bg-surface); }
.autosave-indicator.saved { color: var(--color-success); border-color: color-mix(in srgb, var(--color-success) 35%, transparent); background: color-mix(in srgb, var(--color-success) 10%, transparent); }
.progress-bar-bg { width: 100%; height: 6px; background: var(--border-color); border-radius: 50px; overflow: hidden; margin-bottom: 2rem;}
.progress-bar-fill { height: 100%; background: var(--accent-gold); width: 0%; transition: 0.4s ease; }
.q-card-container { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 3rem 2rem; text-align: center; margin-bottom: 2rem; box-shadow: var(--shadow-card); transition: opacity 0.18s ease, transform 0.18s ease; will-change: opacity, transform; }
.q-card-container.q-transition-out { opacity: 0.45; transform: translateY(5px); pointer-events: none; }
.q-card-container.q-transition-in { opacity: 0; transform: translateY(-5px); }
.q-badge { display: inline-block; background: var(--accent-gold-light); color: var(--accent-gold); padding: 0.3rem 1.2rem; border-radius: 50px; font-size: 0.85rem; font-weight: 700; margin-bottom: 1.5rem; border: 1px solid rgba(234,179,8,0.2);}
.q-text { font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 1.6rem; font-weight: 700; line-height: 1.6; margin-bottom: 2.5rem; color: var(--text-main); }
.options-stack { display: flex; flex-direction: column; gap: 0.8rem; max-width: 500px; margin: 0 auto; width: 100%;}
.opt-btn { padding: 1rem 1.5rem; background: var(--bg-main); border: 1px solid var(--border-color); border-radius: 12px; font-family: inherit; font-size: 1rem; font-weight: 600; color: var(--text-main); cursor: pointer; transition: 0.2s; text-align: right; display: flex; align-items: center; justify-content: flex-start; }
.opt-btn:hover { border-color: var(--accent-gold); background: var(--accent-gold-light); color: var(--accent-gold); }
.opt-btn.selected { background: var(--accent-gold); color: var(--text-on-gold); border-color: var(--accent-gold); font-weight: 700;}
.test-actions { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;}
.btn { padding: 0.8rem 2rem; border-radius: var(--radius-md); font-family: inherit; font-size: 1rem; font-weight: 700; cursor: pointer; border: none; transition: 0.2s; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; text-decoration: none;}
.btn-primary { background: linear-gradient(135deg, var(--accent-primary), var(--accent-primary-hover)); color: var(--text-on-primary); }
.btn-primary:hover { filter: brightness(1.04); }
.btn-primary:active { transform: translateY(1px); }
.btn-outline { background: color-mix(in srgb, var(--glass-bg) 82%, transparent); border: 1px solid color-mix(in srgb, var(--glass-border) 78%, var(--border-color)); color: var(--text-main); backdrop-filter: blur(calc(var(--glass-blur) - 2px)); -webkit-backdrop-filter: blur(calc(var(--glass-blur) - 2px)); }
.btn-outline:hover { border-color: color-mix(in srgb, var(--accent-gold) 40%, var(--glass-border)); background: color-mix(in srgb, var(--accent-gold-light) 36%, var(--glass-bg)); }
.btn-inline-flex { display: inline-flex !important; align-items: center; gap: 0.45rem; }
.btn-tone-success { border-color: #10b981 !important; color: #10b981 !important; }
.btn-tone-indigo { border-color: #6366f1 !important; color: #6366f1 !important; }
.btn-tone-sky { border-color: #0ea5e9 !important; color: #0ea5e9 !important; }
.btn-tone-teal { border-color: #14b8a6 !important; color: #14b8a6 !important; }
.btn-tone-orange { border-color: #f97316 !important; color: #f97316 !important; }
.btn-tone-lavender { border-color: #c7d2fe !important; color: #c7d2fe !important; }
.btn-tone-violet { border-color: #8b5cf6 !important; color: #8b5cf6 !important; }
.btn-tone-pink { border-color: #ec4899 !important; color: #ec4899 !important; }
.btn-outline.btn-tone-success:hover,
.btn-outline.btn-tone-indigo:hover,
.btn-outline.btn-tone-sky:hover,
.btn-outline.btn-tone-teal:hover,
.btn-outline.btn-tone-orange:hover,
.btn-outline.btn-tone-lavender:hover,
.btn-outline.btn-tone-violet:hover,
.btn-outline.btn-tone-pink:hover {
background: color-mix(in srgb, currentColor 12%, transparent);
border-color: currentColor !important;
}
.zen-btn.btn-tone-success:hover,
.zen-btn.btn-tone-indigo:hover,
.zen-btn.btn-tone-sky:hover,
.zen-btn.btn-tone-teal:hover,
.zen-btn.btn-tone-orange:hover,
.zen-btn.btn-tone-lavender:hover,
.zen-btn.btn-tone-violet:hover,
.zen-btn.btn-tone-pink:hover {
border-color: currentColor;
color: currentColor;
background: color-mix(in srgb, currentColor 12%, var(--bg-surface));
}
.btn-danger { background: var(--state-danger-bg); border: 1px solid var(--state-danger-border); color: var(--state-danger-text); }
.btn-danger:hover { background: var(--color-danger); border-color: var(--color-danger); color: #ffffff; }
.report-container { max-width: 800px; margin: 0 auto; padding: 2rem 1.5rem; width: 100%; }
.report-header { text-align: center; margin-bottom: 2rem; border-bottom: 1px dashed var(--border-color); padding-bottom: 2rem;}
.report-section { background: var(--surface-1); border-radius: var(--radius-lg); padding: 1.5rem; margin-bottom: 1.1rem; border: 1px solid var(--border-color); overflow-x: auto; box-shadow: var(--shadow-card);}
.chart-wrapper { width: 100%; max-width: 350px; height: 230px; margin: 0 auto; position: relative; }
.chart-center-overlay { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); text-align: center; width: 100%; pointer-events: none;}
.answers-table { width: 100%; border-collapse: collapse; text-align: right; font-size: 0.95rem;}
.answers-table th { background: var(--bg-main); padding: 1.2rem 1rem; color: var(--text-muted); position: sticky; top: 0;}
.answers-table td { padding: 1rem; border-bottom: 1px solid var(--border-color); font-weight: 500;}
.crisis-box { background: var(--state-danger-bg); border: 1px solid var(--state-danger-border); border-radius: var(--radius-lg); padding: 1.5rem; display: flex; gap: 1rem; margin-bottom: 1.5rem; color: var(--state-danger-text); font-weight: 600;}
.clinical-only, .personal-only { display: none !important; }
/* --- ???? ?????? --- */
.admin-panel { max-width: 900px; margin: 0 auto; padding: 2rem 1.5rem; width: 100%; }
.admin-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border-color); }
.admin-header > div:nth-child(2) { min-width: 0; }
.admin-header-actions { margin-right: auto; display: inline-flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }
.admin-header-actions .btn { white-space: nowrap; }
.admin-tabs { display: flex; gap: 0.5rem; margin-bottom: 2rem; background: var(--bg-surface); padding: 0.4rem; border-radius: 12px; border: 1px solid var(--border-color);}
.admin-tab { flex: 1; padding: 0.7rem 1rem; background: transparent; border: none; border-radius: 8px; font-family: inherit; font-size: 0.95rem; font-weight: 700; cursor: pointer; color: var(--text-muted); transition: 0.2s; text-align: center; white-space: nowrap; }
.admin-tab.active { background: var(--accent-gold); color: var(--text-on-gold); }
.suggestions-toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; flex-wrap:wrap; gap:0.8rem; }
.admin-collapsible { background:var(--bg-surface); border:1px solid var(--border-color); border-radius:12px; overflow:hidden; }
.admin-collapsible-toggle { width:100%; border:none; background:transparent; color:var(--text-main); font-family:inherit; font-size:0.86rem; font-weight:800; display:flex; align-items:center; justify-content:space-between; gap:0.8rem; padding:0.85rem 1rem; cursor:pointer; text-align:right; }
.admin-collapsible-toggle:hover { background:var(--bg-hover, rgba(0,0,0,0.03)); }
.admin-collapsible-toggle i { transition:transform .2s ease; color:var(--text-muted); }
.admin-collapsible.is-open .admin-collapsible-toggle i { transform:rotate(180deg); }
.admin-collapsible-body { padding:0.9rem 1rem; border-top:1px solid var(--border-color); }
.admin-collapsible.is-collapsed .admin-collapsible-body { display:none; }
.suggestions-toolbar-actions { display:flex; gap:0.6rem; align-items:center; flex-wrap:wrap; }
.suggestions-toolbar-actions .form-input,
.suggestions-toolbar-actions .form-select { max-width: 220px; }
.suggestions-date-filter { display:flex; align-items:center; gap:0.45rem; background:var(--bg-main); border:1px solid var(--border-color); border-radius:8px; padding:0.25rem 0.45rem; }
.suggestions-date-filter label { font-size:0.75rem; color:var(--text-muted); font-weight:800; }
.suggestions-date-filter .form-input { border:none; background:transparent; min-height:34px; color:var(--text-main); max-width:160px; }
#suggestions-list { display:grid; gap:0.75rem; }
.suggestion-card { background:var(--bg-surface); border:1px solid var(--border-color); border-radius:12px; margin-bottom:0.75rem; overflow:hidden; }
.suggestion-card.is-open { border-color:color-mix(in srgb, var(--accent-gold) 40%, var(--border-color)); box-shadow:0 0 0 1px color-mix(in srgb, var(--accent-gold) 22%, transparent); }
.suggestion-card-toggle { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; width:100%; background:none; border:none; font-family:inherit; cursor:pointer; text-align:right; padding:0.85rem 1.1rem; }
.suggestion-card-toggle:hover { background:var(--bg-hover, rgba(0,0,0,.03)); }
.suggestion-card-toggle-info { flex:1; min-width:0; }
.suggestion-card-toggle-right { display:flex; flex-direction:column; align-items:flex-end; gap:0.4rem; flex-shrink:0; }
.suggestion-card-preview { font-size:0.78rem; color:var(--text-muted); margin-top:0.25rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:38ch; }
.suggestion-expand-icon { color:var(--text-muted); transition:transform .2s; display:inline-flex; }
.suggestion-card-toggle[aria-expanded="true"] .suggestion-expand-icon { transform:rotate(180deg); }
.suggestion-card-body { padding:0 1.1rem 1rem; border-top:1px solid var(--border-color); }
.suggestion-card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; flex-wrap:wrap; margin-bottom:0.65rem; }
.suggestion-card-title { font-size:1rem; font-weight:800; color:var(--text-main); }
.suggestion-card-field { font-size:0.8rem; color:var(--text-muted); font-weight:600; margin-top:0.2rem; }
.suggestion-card-date { font-size:0.76rem; color:var(--text-muted); font-weight:700; white-space:nowrap; background:var(--bg-main); border:1px solid var(--border-color); border-radius:999px; padding:0.24rem 0.6rem; }
.suggestion-card-hint { font-size:0.7rem; color:var(--text-muted); font-weight:700; opacity:.8; }
.suggestion-card-meta { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:0.7rem; margin:0.75rem 0 0.7rem; }
.suggestion-card-box { background:var(--bg-main); border:1px solid var(--border-color); border-radius:10px; padding:0.65rem 0.75rem; }
.suggestion-card-label { font-size:0.72rem; color:var(--text-muted); font-weight:700; margin-bottom:0.25rem; }
.suggestion-card-value { color:var(--text-main); font-weight:700; word-break:break-word; overflow-wrap:anywhere; }
.suggestion-card-value.id { font-size:0.82rem; direction:ltr; text-align:left; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; }
.suggestion-card-reason { background:var(--bg-main); border:1px solid var(--border-color); border-radius:10px; padding:0.8rem 0.9rem; line-height:1.9; color:var(--text-body); font-size:0.9rem; white-space:pre-wrap; margin-bottom:0.7rem; }
.suggestion-status-chip { display:inline-flex; align-items:center; justify-content:center; border-radius:999px; padding:0.2rem 0.6rem; font-size:0.74rem; font-weight:800; width:fit-content; }
.suggestion-status-chip.status-new { background: var(--state-info-bg); color: var(--state-info-text); border: 1px solid var(--state-info-border); }
.suggestion-status-chip.status-in-review { background: var(--state-warning-bg); color: var(--state-warning-text); border: 1px solid var(--state-warning-border); }
.suggestion-status-chip.status-implemented,
.suggestion-status-chip.status-resolved { background: var(--state-success-bg); color: var(--state-success-text); border: 1px solid var(--state-success-border); }
.suggestion-status-chip.status-rejected { background: var(--state-danger-bg); color: var(--state-danger-text); border: 1px solid var(--state-danger-border); }
.suggestion-admin-controls { display:grid; grid-template-columns: 1fr; gap:0.45rem; margin-bottom:0.75rem; }
.suggestion-admin-label { font-size:0.74rem; color:var(--text-muted); font-weight:700; }
.suggestion-admin-select { min-height:40px; font-size:0.84rem; }
.suggestion-admin-note { min-height:76px; font-size:0.86rem; line-height:1.6; }
.suggestion-card-actions { display:flex; justify-content:flex-end; gap:0.5rem; }
.suggestion-delete-btn { display:inline-flex; align-items:center; gap:0.4rem; background: var(--state-danger-bg); border:1px solid var(--state-danger-border); color: var(--state-danger-text); border-radius:8px; padding:0.45rem 0.85rem; font-family:inherit; font-size:0.82rem; font-weight:700; cursor:pointer; }
.admin-health-loading, .admin-health-error { font-size:0.82rem; color:var(--text-muted); font-weight:700; background:var(--bg-main); border:1px solid var(--border-color); border-radius:10px; padding:0.7rem 0.85rem; }
/* Scales toolbar */
.scales-toolbar { display:flex; align-items:center; gap:0.6rem; flex-wrap:wrap; margin-bottom:1rem; padding:0.75rem 1rem; background:var(--bg-surface); border:1px solid var(--border-color); border-radius:10px; }
.scales-search-wrap { display:flex; align-items:center; gap:0.5rem; flex:1; min-width:180px; background:var(--bg-main); border:1px solid var(--border-color); border-radius:8px; padding:0.4rem 0.7rem; }
.scales-search-input { border:none; background:none; outline:none; font-family:inherit; font-size:0.88rem; color:var(--text-main); width:100%; }
.scales-cat-select { border:1px solid var(--border-color); border-radius:8px; background:var(--bg-main); color:var(--text-main); font-family:inherit; font-size:0.84rem; padding:0.4rem 0.65rem; min-height:36px; }
.scales-count-badge { font-size:0.78rem; font-weight:800; color:var(--text-muted); background:var(--bg-main); border:1px solid var(--border-color); border-radius:999px; padding:0.2rem 0.65rem; white-space:nowrap; }
/* Scale view mode styles */
.scale-manage-view-compact .scale-manage-card .scale-manage-body { max-height: 0; overflow: hidden; opacity: 0; transition: all .25s ease; display: block !important; }
.scale-manage-view-compact .scale-manage-card.is-open .scale-manage-body { max-height: 500px; opacity: 1; }
.scale-manage-view-expanded .scale-manage-card { border: none; box-shadow: none; }
.scale-manage-view-expanded .scale-manage-card .scale-manage-toggle { display: flex; cursor: default; }
.scale-manage-view-expanded .scale-manage-card .scale-manage-hint,
.scale-manage-view-expanded .scale-manage-card .scale-manage-expand-icon { display: none; }
.scale-manage-view-expanded .scale-manage-card .scale-manage-body { max-height: none; opacity: 1; display: block !important; }
.manage-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 1rem; align-items: start; }
.manage-side-nav {
position: sticky;
top: 96px;
background: linear-gradient(165deg, color-mix(in srgb, var(--bg-surface) 92%, transparent), color-mix(in srgb, var(--bg-main) 94%, transparent));
border: 1px solid color-mix(in srgb, var(--glass-border) 78%, var(--border-color));
border-radius: 14px;
padding: 0.65rem;
display: grid;
gap: 0.38rem;
max-height: calc(100vh - 130px);
overflow: auto;
}
.manage-side-btn {
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: 0.5rem;
width: 100%;
text-align: right;
padding: 0.58rem 0.72rem;
border-radius: 10px;
border: 1px solid transparent;
background: transparent;
color: var(--text-muted);
font-family: inherit;
font-size: 0.81rem;
font-weight: 800;
cursor: pointer;
transition: 0.2s;
}
.manage-side-count {
margin-inline-start: auto;
min-width: 1.35rem;
height: 1.35rem;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 0.38rem;
font-size: 0.69rem;
font-weight: 900;
line-height: 1;
color: #f8fafc;
background: color-mix(in srgb, #0ea5e9 55%, #0f172a);
border: 1px solid color-mix(in srgb, #38bdf8 52%, transparent);
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}
.manage-side-count.is-hidden { display: none; }
.manage-side-btn:hover { color: var(--text-main); border-color: color-mix(in srgb, var(--accent-gold) 36%, var(--border-color)); background: rgba(212,160,23,0.08); }
.manage-side-btn.active {
color: #6ee7b7;
background: linear-gradient(135deg, rgba(16,185,129,0.18), rgba(16,185,129,0.08));
border-color: rgba(16,185,129,0.42);
box-shadow: inset 0 0 0 1px rgba(16,185,129,0.18);
}
.manage-side-btn.active .manage-side-count {
background: color-mix(in srgb, #10b981 58%, #0f172a);
border-color: rgba(16,185,129,0.5);
}
.manage-main-panels { min-width: 0; }
/* Admin panel accordion */
.admin-panel-accordion { margin-bottom: 0.85rem; border: 1px solid color-mix(in srgb, var(--glass-border) 78%, var(--border-color)); border-radius: 12px; background: linear-gradient(160deg, color-mix(in srgb, var(--bg-surface) 92%, transparent), color-mix(in srgb, var(--bg-main) 90%, transparent)); overflow: hidden; }
.admin-panel-accordion.is-collapsed .admin-panel-body { max-height: 0; overflow: hidden; opacity: 0; }
.admin-panel-accordion:not(.is-collapsed) .admin-panel-body { max-height: 5000px; opacity: 1; transition: all .25s ease; }
.admin-panel-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 1rem; background: transparent; border: none; cursor: pointer; font-size: 0.92rem; font-weight: 800; color: var(--text-main); text-align: right; transition: background .15s ease; }
.admin-panel-toggle:hover { background: rgba(212, 160, 23, 0.08); }
.admin-panel-toggle i { transition: transform .25s ease; flex-shrink: 0; }
.admin-panel-accordion:not(.is-collapsed) .admin-panel-toggle i { transform: rotate(180deg); }
.admin-panel-body { padding: 0.9rem 1rem; }
.admin-health-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:0.55rem; }
.admin-health-card { background:var(--bg-main); border:1px solid var(--border-color); border-radius:10px; padding:0.65rem 0.7rem; }
.admin-health-label { font-size:0.71rem; color:var(--text-muted); font-weight:700; margin-bottom:0.25rem; }
.admin-health-value { font-size:1.05rem; color:var(--text-main); font-weight:900; }
.admin-health-section-title { margin-top:0.7rem; margin-bottom:0.4rem; font-size:0.76rem; font-weight:800; color:var(--text-muted); }
.admin-health-alerts { display:grid; gap:0.45rem; margin-bottom:0.7rem; }
.admin-health-alert-item { background:rgba(245,158,11,0.12); border:1px solid rgba(245,158,11,0.35); color:#b45309; border-radius:9px; padding:0.5rem 0.65rem; font-size:0.75rem; font-weight:750; }
.endpoint-metrics-list { display:grid; gap:0.45rem; }
.endpoint-metric-item { background:var(--bg-main); border:1px solid var(--border-color); border-radius:10px; padding:0.55rem 0.7rem; }
.endpoint-metric-route { font-size:0.75rem; font-weight:800; color:var(--text-main); margin-bottom:0.18rem; direction:ltr; text-align:left; }
.endpoint-metric-meta { font-size:0.72rem; color:var(--text-muted); font-weight:650; }
.trusted-devices-list { display:grid; gap:0.55rem; }
.trusted-device-card { display:flex; justify-content:space-between; align-items:center; gap:0.7rem; background:var(--bg-main); border:1px solid var(--border-color); border-radius:10px; padding:0.7rem 0.75rem; }
.trusted-device-main { min-width:0; }
.trusted-device-title { font-size:0.84rem; color:var(--text-main); font-weight:800; margin-bottom:0.2rem; }
.trusted-device-meta { font-size:0.74rem; color:var(--text-muted); font-weight:650; overflow-wrap:anywhere; }
.security-panels-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.7rem; }
.security-panel-title { font-size:0.78rem; color:var(--text-muted); font-weight:800; margin-bottom:0.45rem; }
.security-log-list { display:grid; gap:0.5rem; }
.security-log-item { background:var(--bg-main); border:1px solid var(--border-color); border-radius:10px; padding:0.6rem 0.7rem; }
.security-log-title { font-size:0.78rem; color:var(--text-main); font-weight:800; margin-bottom:0.2rem; overflow-wrap:anywhere; }
.security-log-meta { font-size:0.72rem; color:var(--text-muted); font-weight:650; overflow-wrap:anywhere; }
.security-log-report { margin-top:0.35rem; font-size:0.71rem; color:var(--text-muted); line-height:1.55; white-space:pre-wrap; word-break:break-word; }
.admin-section { display: none; }
.admin-section.active { display: block; }
.form-group { margin-bottom: 1.5rem; }
.form-label { display: block; font-size: 0.9rem; font-weight: 700; color: var(--text-muted); margin-bottom: 0.5rem; }
.form-label .req { color: var(--accent-gold); }
.form-input, .form-select, .form-textarea { width: 100%; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 10px; padding: 0.8rem 1rem; color: var(--text-main); font-family: inherit; font-size: 1rem; outline: none; transition: 0.2s; }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--accent-gold); box-shadow: 0 0 0 3px var(--accent-gold-light); }
select.form-input, select.form-select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding-right: 1rem;
padding-left: 2.4rem;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: left 0.85rem center;
background-size: 16px;
cursor: pointer;
}
select.form-input:focus, select.form-select:focus { box-shadow: 0 0 0 3px var(--accent-gold-light); }
select.form-input option, select.form-select option { background: var(--bg-surface); color: var(--text-main); }
.custom-select-ui { position: relative; width: 100%; }
.custom-select-ui.is-norms { width: auto; min-width: 170px; }
.custom-select-trigger {
width: 100%;
background: var(--bg-surface);
border: 1px solid var(--border-color);
border-radius: 10px;
padding: 0.8rem 2.4rem 0.8rem 1rem;
color: var(--text-main);
font-family: inherit;
font-size: 1rem;
font-weight: 600;
text-align: right;
cursor: pointer;
position: relative;
transition: 0.2s;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.custom-select-ui.is-norms .custom-select-trigger {
background: var(--bg-main);
border-width: 1.5px;
border-radius: 8px;
padding: 0.5rem 2rem 0.5rem 0.8rem;
font-size: 0.88rem;
font-weight: 600;
}
.custom-select-trigger::after {
content: '';
position: absolute;
left: 0.85rem;
top: 50%;
width: 0.55rem;
height: 0.55rem;
border-left: 2px solid var(--accent-gold);
border-bottom: 2px solid var(--accent-gold);
transform: translateY(-65%) rotate(-45deg);
transition: transform 0.18s ease;
pointer-events: none;
}
.custom-select-ui.open .custom-select-trigger::after { transform: translateY(-35%) rotate(135deg); }
.custom-select-trigger:hover { border-color: var(--accent-gold); }
.custom-select-trigger:focus-visible {
border-color: var(--accent-gold);
box-shadow: 0 0 0 3px var(--accent-gold-light);
outline: none;
}
.custom-select-trigger:disabled { opacity: 0.6; cursor: not-allowed; }
.custom-select-menu {
display: none;
position: absolute;
right: 0;
left: 0;
top: calc(100% + 6px);
z-index: 1800;
background: var(--bg-surface);
border: 1px solid var(--border-color);
border-radius: 12px;
box-shadow: 0 18px 36px rgba(2, 6, 23, 0.35);
max-height: 260px;
overflow-y: auto;
padding: 0.35rem;
}
.custom-select-ui.open .custom-select-menu { display: block; }
.custom-select-option {
width: 100%;
border: none;
background: transparent;
color: var(--text-main);
font-family: inherit;
font-size: 0.93rem;
font-weight: 600;
text-align: right;
border-radius: 8px;
padding: 0.55rem 0.7rem;
cursor: pointer;
transition: 0.15s;
}
.custom-select-option:hover { background: var(--bg-hover); }
.custom-select-option.active {
background: var(--accent-gold-light);
color: var(--accent-gold);
font-weight: 700;
}
.custom-select-option:disabled { opacity: 0.45; cursor: not-allowed; }
.form-textarea { min-height: 100px; resize: vertical; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-row { display: flex; gap: 0.8rem; align-items: flex-start; }
.items-box { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 12px; padding: 1.2rem; margin-top: 0.5rem; }
.item-entry { display: flex; gap: 0.6rem; align-items: center; margin-bottom: 0.6rem; }
.item-entry input { flex: 1; }
.item-num { font-size: 0.85rem; font-weight: 700; color: var(--accent-gold); min-width: 28px; text-align: center; }
.item-del-btn { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); color: #ef4444; width: 34px; height: 34px; border-radius: 8px; cursor: pointer; display: grid; place-items: center; flex-shrink: 0; transition: 0.2s;}
.item-del-btn:hover { background: #ef4444; color: white; }
.add-item-btn { width: 100%; margin-top: 0.8rem; padding: 0.6rem; background: var(--accent-gold-light); border: 1px dashed var(--accent-gold); color: var(--accent-gold); border-radius: 8px; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 0.9rem; transition: 0.2s; }
.add-item-btn:hover { background: var(--accent-gold); color: var(--text-on-gold); }
/* chart-type custom radio buttons */
.chart-type-opt { width:100%; padding:0.75rem 1.1rem; background:var(--bg-main); border:1.5px solid var(--border-color); border-radius:10px; font-family:inherit; font-size:0.97rem; font-weight:600; color:var(--text-body); cursor:pointer; text-align:right; transition:0.18s; display:flex; align-items:center; justify-content:space-between; }
.chart-type-opt::after { content:''; width:18px; height:18px; border-radius:50%; border:2px solid var(--border-color); flex-shrink:0; transition:0.18s; background:transparent; }
.chart-type-opt:hover { border-color:var(--accent-gold); color:var(--text-main); }
.chart-type-opt.active { border-color:var(--accent-gold); background:var(--accent-gold-light); color:var(--accent-gold); }
.chart-type-opt.active::after { background:var(--accent-gold); border-color:var(--accent-gold); box-shadow:0 0 0 3px var(--accent-gold-light); }
.opts-box { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 12px; padding: 1.2rem; margin-top: 0.5rem; }
.opt-entry { display: flex; gap: 0.6rem; align-items: center; margin-bottom: 0.6rem; }
.opt-entry input[type="text"] { flex: 2; }
.opt-entry input[type="number"] { flex: 1; max-width: 100px; }
.opt-entry label { font-size: 0.8rem; color: var(--text-muted); font-weight: 600; white-space: nowrap; }
.cutoff-entry { background: var(--bg-main); border: 1px solid var(--border-color); border-radius: 10px; padding: 1rem; margin-bottom: 0.8rem; }
.cutoff-row { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.cutoff-row input[type="number"] { width: 80px; }
.cutoff-row input[type="text"] { flex: 1; min-width: 120px; }
.cutoff-row input[type="color"] { width: 44px; height: 44px; border: 1px solid var(--border-color); border-radius: 8px; background: transparent; cursor: pointer; padding: 2px; }
.cutoff-row label { font-size: 0.8rem; color: var(--text-muted); font-weight: 600; white-space: nowrap; }
.cutoff-row .crisis-toggle { display: flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; color: var(--text-muted); font-weight: 600; cursor: pointer; }
.tips-box { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 12px; padding: 1.2rem; margin-top: 0.5rem; }
.tip-entry { display: flex; gap: 0.6rem; align-items: center; margin-bottom: 0.6rem; }
.tip-entry input { flex: 1; }
.subscales-box { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 12px; padding: 1.2rem; margin-top: 0.5rem; }
.subscale-entry { background: var(--bg-main); border: 1px solid var(--border-color); border-radius: 10px; padding: 0.8rem; margin-bottom: 0.7rem; }
.subscale-row { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.subscale-row .form-input { min-width: 120px; }
.subscale-cutoffs-box { margin-top: 0.7rem; padding-top: 0.65rem; border-top: 1px dashed var(--border-color); }
.subscale-cutoffs-head { display:flex; align-items:center; justify-content:space-between; gap:0.6rem; flex-wrap:wrap; margin-bottom:0.8rem; }
.subscale-format-btn { border:1px solid var(--border-color); background:var(--bg-surface); color:var(--text-main); border-radius:8px; padding:0.32rem 0.6rem; font-family:inherit; font-size:0.74rem; font-weight:700; cursor:pointer; }
.subscale-format-btn:hover { border-color: var(--accent-gold); color: var(--accent-gold); }
.subscale-add-btn { border:1px solid var(--accent-gold); background:transparent; color:var(--accent-gold); border-radius:8px; padding:0.35rem 0.7rem; font-family:inherit; font-size:0.8rem; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:0.3rem; }
.subscale-add-btn:hover { background:var(--accent-gold); color:var(--text-on-gold); }
.subscale-cutoffs-text { min-height: 92px; font-size: 0.85rem; line-height: 1.55; }
.subscale-cutoffs-help { margin-top:0.35rem; font-size:0.74rem; color:var(--text-muted); line-height:1.5; }
.subscale-note { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.35rem; font-weight: 600; }
.subscale-cutoffs-table { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.7rem; }
.sub-cutoff-card { background: var(--bg-surface); padding: 0.6rem; border-radius: 8px; border: 1px solid var(--border-color); }
.sub-cutoff-card:hover { border-color: var(--accent-gold); }
.sub-cutoff-main-row { display: flex; gap: 0.5rem; align-items: center; }
.sub-cutoff-main-row input[type="color"] {
width: 44px;
min-width: 44px;
max-width: 44px;
flex: 0 0 44px;
height: 40px;
padding: 2px;
border: 1px solid var(--border-color);
border-radius: 8px;
background: transparent;
cursor: pointer;
}
.sub-cutoff-main-row .crisis-toggle {
display: inline-flex;
align-items: center;
gap: 0.3rem;
white-space: nowrap;
font-size: 0.8rem;
color: var(--text-muted);
font-weight: 600;
cursor: pointer;
}
.sub-cutoff-interp-row { margin-top: 0.45rem; }
.sub-cutoff-interp-label { font-size: 0.75rem; font-weight: 700; color: var(--text-muted); margin-bottom: 0.35rem; }
.sub-cutoff-interp-input { width: 100%; min-width: 100%; }
.cutoff-row { display: flex; gap: 0.5rem; align-items: center; background: var(--bg-surface); padding: 0.6rem; border-radius: 8px; border: 1px solid var(--border-color); }
.cutoff-row:hover { border-color: var(--accent-gold); }
.cutoff-input { flex: 1; min-width: 60px; padding: 0.4rem 0.5rem; background: var(--bg-main); border: 1px solid var(--border-color); border-radius: 6px; font-family: inherit; font-size: 0.8rem; color: var(--text-main); }
.cutoff-input:focus { outline: none; border-color: var(--accent-gold); box-shadow: 0 0 0 2px rgba(212, 160, 23, 0.1); }
.cutoff-min { width: 70px; }
.cutoff-max { width: 70px; }
.cutoff-label { flex: 1.5; }
.cutoff-dash { color: var(--text-muted); font-weight: 700; }
.cutoff-del-btn { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); color: #ef4444; border-radius: 6px; padding: 0.35rem 0.5rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-family: inherit; transition: all 0.2s; }
.cutoff-del-btn:hover { background: #ef4444; color: white; border-color: #ef4444; }
.subscale-summary-wrap { margin-top: 1rem; border-top: 1px dashed var(--border-color); padding-top: 0.9rem; }
.subscale-summary-grid { display: grid; grid-template-columns: 1fr; gap: 0.5rem; }
.subscale-chip { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; background: var(--bg-main); border: 1px solid var(--border-color); border-radius: 10px; padding: 0.55rem 0.75rem; }
.subscale-chip-label { font-size: 0.86rem; font-weight: 700; color: var(--text-main); }
.subscale-chip-score { font-size: 0.8rem; font-weight: 800; color: var(--accent-gold); }
.cat-preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.6rem; margin-top: 0.5rem; }
.cat-preset-btn { padding: 0.5rem 0.8rem; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 8px; font-family: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; color: var(--text-muted); transition: 0.2s; text-align: right; }
.cat-preset-btn:hover { border-color: var(--accent-gold); color: var(--accent-gold); }
.saved-tests-list { display: flex; flex-direction: column; gap: 0.8rem; }
.saved-test-item { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 12px; padding: 1.2rem 1.5rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.scale-manage-card { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; }
.scale-manage-card.is-open { border-color: color-mix(in srgb, var(--accent-gold) 40%, var(--border-color)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-gold) 20%, transparent); }
.scale-manage-toggle { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.9rem; width: 100%; background: transparent; border: none; text-align: right; font-family: inherit; padding: 0.85rem 1rem; cursor: pointer; color: var(--text-main); pointer-events: auto; }
.scale-manage-toggle:hover { background: var(--bg-hover, rgba(0,0,0,0.03)); }
.scale-manage-toggle-info { flex: 1; min-width: 0; pointer-events: none; }
.scale-manage-title { font-size: 0.93rem; font-weight: 800; color: var(--text-main); line-height: 1.5; }
.scale-manage-meta { font-size: 0.77rem; color: var(--text-muted); font-weight: 700; margin-top: 0.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scale-manage-toggle-right { display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; flex-shrink: 0; pointer-events: none; }
.scale-manage-version-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; font-weight: 800; color: #6366f1; background: rgba(99,102,241,0.12); border: 1px solid rgba(99,102,241,0.28); border-radius: 999px; padding: 0.18rem 0.5rem; }
.scale-manage-hint { font-size: 0.68rem; color: var(--text-muted); font-weight: 700; }
.scale-manage-expand-icon { color: var(--text-muted); transition: transform .2s ease; display: inline-flex; }
.scale-manage-toggle[aria-expanded="true"] .scale-manage-expand-icon { transform: rotate(180deg); }
.scale-manage-body { padding: 0 1rem 0.95rem; border-top: 1px solid var(--border-color); }
.scale-manage-actions { margin-top: 0.7rem; display: flex; gap: 0.5rem; justify-content: flex-end; }
#view-library {
--lib-accent: #0ea5e9;
--lib-accent-2: #14b8a6;
--lib-accent-soft: rgba(14,165,233,0.12);
--lib-accent-strong: rgba(14,165,233,0.24);
--lib-card-border: rgba(148,163,184,0.28);
--lib-chip-text: #0369a1;
--lib-tag-bg: rgba(14,165,233,0.16);
--lib-tag-text: #0c4a6e;
--lib-published-bg: rgba(34,197,94,0.18);
--lib-published-text: #15803d;
--lib-draft-bg: rgba(245,158,11,0.16);
--lib-draft-text: #b45309;
--lib-stat-bg: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(241,245,249,0.86));
--lib-stat-border: rgba(148,163,184,0.36);
--lib-cat-main-bg: rgba(16,185,129,0.14);
--lib-cat-main-text: #047857;
--lib-cat-main-border: rgba(16,185,129,0.35);
--lib-cat-sub-bg: rgba(14,165,233,0.14);
--lib-cat-sub-text: #0369a1;
--lib-cat-sub-border: rgba(14,165,233,0.35);
}
body:not(.light) #view-library, [data-theme="dark"] #view-library {
--lib-accent: #38bdf8;
--lib-accent-2: #2dd4bf;
--lib-accent-soft: rgba(56,189,248,0.12);
--lib-accent-strong: rgba(56,189,248,0.24);
--lib-card-border: rgba(100,116,139,0.38);
--lib-chip-text: #7dd3fc;
--lib-tag-bg: rgba(14,165,233,0.16);
--lib-tag-text: #bae6fd;
--lib-published-bg: rgba(34,197,94,0.2);
--lib-published-text: #86efac;
--lib-draft-bg: rgba(245,158,11,0.2);
--lib-draft-text: #fcd34d;
--lib-stat-bg: linear-gradient(180deg, rgba(30,41,59,0.55), rgba(15,23,42,0.45));
--lib-stat-border: rgba(100,116,139,0.32);
--lib-cat-main-bg: rgba(16,185,129,0.18);
--lib-cat-main-text: #6ee7b7;
--lib-cat-main-border: rgba(16,185,129,0.4);
--lib-cat-sub-bg: rgba(14,165,233,0.18);
--lib-cat-sub-text: #7dd3fc;
--lib-cat-sub-border: rgba(14,165,233,0.4);
}
#view-library .container { position: relative; }
#view-library .container::before {
content: '';
position: absolute;
inset: -30px 0 auto 0;
height: 320px;
background:
radial-gradient(70% 80% at 85% 10%, rgba(16,185,129,0.11), transparent 65%),
radial-gradient(55% 70% at 12% 8%, rgba(14,165,233,0.11), transparent 70%);
pointer-events: none;
z-index: 0;
filter: blur(0.5px);
}
#view-library .container > * { position: relative; z-index: 1; }
.library-grid { position: relative; }
.library-grid::before {
content: '';
position: absolute;
inset: -8px;
border-radius: 20px;
background: linear-gradient(180deg, rgba(148,163,184,0.07), rgba(15,23,42,0));
pointer-events: none;
}
.art-card {
background:
radial-gradient(140% 120% at 100% 0%, rgba(14,165,233,0.11), transparent 52%),
radial-gradient(120% 120% at 0% 100%, rgba(16,185,129,0.1), transparent 56%),
linear-gradient(170deg, rgba(30,41,59,0.72), rgba(15,23,42,0.5));
border: 1px solid var(--lib-card-border);
border-radius: 16px;
padding: 1rem 1.05rem;
box-shadow: 0 10px 24px rgba(2, 6, 23, 0.22);
transition: transform 0.22s, border-color 0.22s, box-shadow 0.22s;
min-height: 0;
display:flex;
flex-direction:column;
position: relative;
overflow: hidden;
}
.art-card::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0));
opacity: 0.75;
pointer-events: none;
}
.art-card:hover { transform: translateY(-3px); border-color: var(--lib-accent-2); box-shadow: 0 16px 32px rgba(2, 6, 23, 0.3); }
.art-card h4 { font-size: 1rem; margin:0; line-height:1.45; letter-spacing: 0.1px; }
.art-card p { color: var(--text-body); margin:0; }
.art-card-head {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.8rem;
align-items: start;
margin-bottom: 0.5rem;
}
.art-card-copy { min-width: 0; }
.art-card-title {
font-size: 1rem;
font-weight: 800;
margin: 0 0 0.35rem;
line-height: 1.5;
color: var(--text-main);
}
.art-card-meta {
display: flex;
flex-wrap: wrap;
gap: 0.35rem 0.55rem;
align-items: center;
font-size: 0.74rem;
color: var(--text-muted);
margin-bottom: 0.25rem;
}
.art-card-stat {
display: inline-flex;
align-items: center;
gap: 0.28rem;
white-space: nowrap;
}
.art-card-chips,
.art-card-tags,
.art-card-actions {
display: flex;
flex-wrap: wrap;
gap: 0.36rem;
align-items: center;
}
.art-card-tags { margin-bottom: 0.65rem; }
.art-card-snippet {
font-size: 0.88rem;
color: var(--text-body);
line-height: 1.72;
margin-bottom: 0.95rem !important;
flex: 1;
}
.art-card-actions {
padding-top: 0.75rem;
border-top: 1px solid color-mix(in srgb, var(--border-color) 88%, transparent);
}
.art-card-actions .btn {
padding: 0.36rem 0.72rem;
font-size: 0.74rem;
min-height: 34px;
}
.art-card-read-btn {
background: linear-gradient(135deg, var(--lib-accent), var(--lib-accent-2));
color: white !important;
border: none !important;
box-shadow: 0 8px 18px rgba(14,165,233,0.18);
}
.lib-analytics > div {
backdrop-filter: blur(6px);
box-shadow: 0 6px 18px rgba(2,6,23,0.12);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lib-analytics > div:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(2,6,23,0.18); }
.lib-stat-card {
background: var(--lib-stat-bg) !important;
border: 1px solid var(--lib-stat-border) !important;
border-radius: 10px;
padding: 0.45rem 0.65rem;
font-size: 0.76rem;
font-weight: 700;
color: var(--text-main);
}
.lib-stat-card.pub {
background: linear-gradient(180deg, var(--lib-published-bg), rgba(34,197,94,0.08)) !important;
color: var(--lib-published-text) !important;
border-color: color-mix(in oklab, var(--lib-published-text) 35%, transparent) !important;
}
.lib-stat-card.draft {
background: linear-gradient(180deg, var(--lib-draft-bg), rgba(245,158,11,0.08)) !important;
color: var(--lib-draft-text) !important;
border-color: color-mix(in oklab, var(--lib-draft-text) 35%, transparent) !important;
}
.lib-chip {
display: inline-flex;
align-items: center;
gap: 0.28rem;
font-weight: 700;
font-family: inherit;
line-height: 1.2;
padding: 2px 8px;
border-radius: 999px;
font-size: 0.72rem;
border: 1px solid transparent;
}
button.lib-chip { cursor: pointer; }
.lib-chip.type {
background: var(--lib-accent-soft);
color: var(--lib-chip-text);
border-color: var(--lib-accent-strong);
}
.lib-chip.status-published {
background: var(--lib-published-bg);
color: var(--lib-published-text);
border-color: color-mix(in oklab, var(--lib-published-text) 35%, transparent);
}
.lib-chip.status-draft {
background: var(--lib-draft-bg);
color: var(--lib-draft-text);
border-color: color-mix(in oklab, var(--lib-draft-text) 35%, transparent);
}
.lib-chip.cat-main {
background: var(--lib-cat-main-bg, rgba(16,185,129,0.2));
color: var(--lib-cat-main-text, #10b981);
border-color: var(--lib-cat-main-border, rgba(16,185,129,0.45));
}
.lib-chip.cat-sub {
background: var(--lib-cat-sub-bg, rgba(14,165,233,0.2));
color: var(--lib-cat-sub-text, #0ea5e9);
border-color: var(--lib-cat-sub-border, rgba(14,165,233,0.45));
}
.lib-tag-pill {
font-size: 0.68rem;
background: var(--lib-tag-bg);
color: var(--lib-tag-text);
padding: 0.1rem 0.45rem;
border-radius: 999px;
border: 1px solid color-mix(in oklab, var(--lib-tag-text) 25%, transparent);
}
#view-library #lib-search,
#view-library #lib-tag-filter,
#view-library #lib-category-filter,
#view-library #lib-type-filter,
#view-library #lib-status-filter,
#view-library #lib-sort-filter,
#view-library #lib-archive-filter {
border-color: color-mix(in oklab, var(--lib-accent) 28%, var(--border-color)) !important;
background: color-mix(in oklab, var(--lib-accent-soft) 28%, var(--bg-surface)) !important;
}
#view-library #lib-search:focus,
#view-library #lib-tag-filter:focus,
#view-library #lib-category-filter:focus,
#view-library #lib-type-filter:focus,
#view-library #lib-status-filter:focus,
#view-library #lib-sort-filter:focus,
#view-library #lib-archive-filter:focus {
border-color: var(--lib-accent) !important;
box-shadow: 0 0 0 3px color-mix(in oklab, var(--lib-accent) 20%, transparent) !important;
}
.lib-page-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.3rem;
padding-bottom: 0.95rem;
border-bottom: 1px solid color-mix(in srgb, var(--border-color) 88%, transparent);
}
.lib-page-icon {
background: linear-gradient(135deg, rgba(16,185,129,0.22), rgba(16,185,129,0.1));
border: 1px solid rgba(16,185,129,0.38);
width: 50px;
height: 50px;
border-radius: 14px;
display: grid;
place-items: center;
flex-shrink: 0;
box-shadow: 0 10px 22px rgba(16,185,129,0.12);
}
.lib-page-icon [data-lucide] { width: 24px; height: 24px; color: #10b981; }
.lib-page-title {
font-family: 'IBM Plex Sans Arabic', sans-serif;
font-size: 1.75rem;
font-weight: 800;
margin: 0;
}
.lib-toolbar {
position: relative;
background: var(--glass-bg) !important;
backdrop-filter: blur(var(--glass-blur)) saturate(130%);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(130%);
border: 1px solid color-mix(in srgb, var(--glass-border) 78%, var(--border-color));
box-shadow: 0 16px 34px rgba(2,6,23,0.18);
border-radius: 18px;
padding: 0.95rem 1rem;
margin-bottom: 0.8rem;
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.lib-toolbar-search,
.lib-toolbar-filters,
.lib-quick-cats {
display: flex;
gap: 0.55rem;
align-items: center;
flex-wrap: wrap;
}
.lib-search-main {
flex: 1 1 280px;
margin: 0 !important;
}
.lib-search-tag {
flex: 0 1 210px;
min-width: 150px;
margin: 0 !important;
}
.lib-count-pill {
font-size: 0.78rem;
color: var(--text-muted);
font-weight: 700;
white-space: nowrap;
background: var(--bg-main);
border: 1px solid var(--border-color);
border-radius: 999px;
padding: 0.24rem 0.72rem;
}
.lib-filter-select {
flex: 1 1 132px;
max-width: 190px;
min-width: 0;
margin: 0 !important;
padding: 0.56rem 0.76rem !important;
font-size: 0.84rem !important;
cursor: pointer;
}
.lib-fav-label {
display: inline-flex;
align-items: center;
gap: 0.38rem;
font-size: 0.78rem;
color: var(--text-muted);
font-weight: 700;
cursor: pointer;
white-space: nowrap;
padding: 0.44rem 0.72rem;
border-radius: 10px;
border: 1px solid var(--border-color);
background: var(--bg-main);
transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.lib-fav-label:has(input:checked) {
border-color: #10b981;
color: #10b981;
background: rgba(16,185,129,0.1);
}
.lib-fav-label input { accent-color: #10b981; }
.lib-quick-cats {
padding-top: 0.1rem;
border-top: 1px solid color-mix(in srgb, var(--border-color) 86%, transparent);
}
.lib-quick-cat {
border: 1px solid color-mix(in srgb, var(--border-color) 88%, transparent);
background: color-mix(in srgb, var(--bg-surface) 82%, transparent);
color: var(--text-body);
border-radius: 999px;
padding: 0.34rem 0.78rem;
font-family: inherit;
font-size: 0.78rem;
font-weight: 700;
cursor: pointer;
transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.lib-quick-cat:hover {
color: var(--lib-accent-2);
border-color: color-mix(in srgb, var(--lib-accent) 45%, var(--border-color));
transform: translateY(-1px);
}
.lib-quick-cat.active {
background: linear-gradient(135deg, rgba(14,165,233,0.16), rgba(16,185,129,0.14));
border-color: color-mix(in srgb, var(--lib-accent) 65%, var(--border-color));
color: var(--text-main);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
#library-grid {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)) !important;
gap: 1rem !important;
}
#view-library.view-section .container {
max-width: 1140px;
}
.lib-analytics {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 0.6rem !important;
margin-top: 0.85rem !important;
margin-bottom: 1rem !important;
}
.lib-empty-state {
grid-column: 1 / -1;
text-align: center;
padding: 1.8rem 1rem;
border: 1px dashed var(--border-color);
border-radius: 16px;
color: var(--text-muted);
background: color-mix(in srgb, var(--bg-surface) 82%, transparent);
}
@media (max-width: 680px) {
.lib-toolbar { padding: 0.85rem; gap: 0.55rem; border-radius: 12px; }
.lib-search-tag { flex: 1 1 140px; }
.lib-filter-select { flex: 1 1 calc(50% - 0.5rem); max-width: none; font-size: 0.82rem !important; }
.lib-page-title { font-size: 1.5rem; }
}
@media (max-width: 420px) {
.lib-filter-select { flex: 1 1 100%; max-width: 100%; }
.lib-search-main, .lib-search-tag { flex: 1 1 100%; }
}
#view-library .lib-admin-select,
#article-rich-editor-modal .art-modal-select {
border: 1px solid color-mix(in oklab, var(--lib-accent) 34%, rgba(255,255,255,0.18)) !important;
background: color-mix(in oklab, var(--lib-accent-soft) 34%, rgba(15,23,42,0.18)) !important;
color: var(--text-main) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, opacity 0.18s ease;
}
#view-library .lib-admin-select:focus,
#article-rich-editor-modal .art-modal-select:focus {
outline: none;
border-color: var(--lib-accent) !important;
box-shadow: 0 0 0 3px color-mix(in oklab, var(--lib-accent) 22%, transparent), inset 0 1px 0 rgba(255,255,255,0.06);
}
#view-library .lib-admin-select option,
#article-rich-editor-modal .art-modal-select option {
background: #0f172a;
color: #f8fafc;
}
#view-library #art-main-category[data-mode="auto"],
#article-rich-editor-modal #art-modal-main-category[data-mode="auto"] {
background: linear-gradient(135deg, rgba(79,70,229,0.42), rgba(14,165,233,0.34)) !important;
border-color: rgba(129,140,248,0.7) !important;
color: #eef2ff !important;
box-shadow: 0 0 0 1px rgba(129,140,248,0.18), inset 0 1px 0 rgba(255,255,255,0.12);
}
body:not(.light) #view-library #art-main-category[data-mode="auto"],
[data-theme="dark"] #view-library #art-main-category[data-mode="auto"],
body:not(.light) #article-rich-editor-modal #art-modal-main-category[data-mode="auto"],
[data-theme="dark"] #article-rich-editor-modal #art-modal-main-category[data-mode="auto"] {
background: linear-gradient(135deg, rgba(79,70,229,0.62), rgba(14,165,233,0.42)) !important;
border-color: rgba(125,211,252,0.68) !important;
color: #f8fbff !important;
box-shadow: 0 0 0 1px rgba(96,165,250,0.2), 0 8px 18px rgba(14,165,233,0.12), inset 0 1px 0 rgba(255,255,255,0.12);
}
#view-library #art-sub-category:disabled,
#article-rich-editor-modal #art-modal-sub-category:disabled {
opacity: 0.58;
cursor: not-allowed;
filter: saturate(0.72);
}
.art-modal-meta { position: relative; }
.art-modal-category-note {
font-size: 0.75rem;
font-weight: 700;
color: var(--text-muted);
padding: 0.5rem 0.75rem;
border-radius: 999px;
background: color-mix(in oklab, var(--bg-surface) 72%, transparent);
border: 1px solid color-mix(in oklab, var(--border-color) 88%, transparent);
line-height: 1.45;
max-width: min(100%, 360px);
}
.art-modal-select {
min-width: 180px;
padding: 0.62rem 0.8rem;
border-radius: 10px;
font-family: inherit;
cursor: pointer;
appearance: none;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: left 0.7rem center;
background-size: 18px;
padding-left: 2rem;
}
@media (max-width: 760px) {
.art-modal-select { min-width: 100%; }
.art-modal-category-note { max-width: 100%; width: 100%; }
}
.article-modal {
backdrop-filter: blur(6px);
background:
radial-gradient(70% 90% at 20% 0%, rgba(14,165,233,0.18), transparent 65%),
rgba(15,23,42,0.72) !important;
}
.article-detail-shell {
background:
linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,250,252,0.93)) !important;
border-color: rgba(148,163,184,0.32) !important;
box-shadow: 0 24px 60px rgba(2,6,23,0.22);
}
body:not(.light) .article-detail-shell, [data-theme="dark"] .article-detail-shell {
background:
radial-gradient(80% 90% at 85% 0%, rgba(14,165,233,0.08), transparent 65%),
linear-gradient(180deg, rgba(15,23,42,0.96), rgba(15,23,42,0.92)) !important;
border-color: rgba(51,65,85,0.9) !important;
}
.article-detail-layout { gap: 1rem !important; }
.article-detail-sidebar {
background: linear-gradient(180deg, rgba(99,102,241,0.08), rgba(59,130,246,0.05)) !important;
border-color: rgba(99,102,241,0.22) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}
.article-detail-body {
background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(248,250,252,0.92)) !important;
border-color: rgba(148,163,184,0.35) !important;
box-shadow: 0 10px 24px rgba(15,23,42,0.08);
}
body:not(.light) .article-detail-body, [data-theme="dark"] .article-detail-body {
background: linear-gradient(180deg, rgba(30,41,59,0.62), rgba(15,23,42,0.52)) !important;
border-color: rgba(100,116,139,0.28) !important;
box-shadow: 0 10px 24px rgba(2,6,23,0.26);
}
#article-detail-toc a {
border-radius: 8px;
padding: 0.28rem 0.42rem;
transition: background-color 0.16s ease, color 0.16s ease;
}
#article-detail-toc a:hover {
background: rgba(99,102,241,0.12);
color: #4f46e5 !important;
}
#article-detail-content h1, #article-detail-content h2, #article-detail-content h3 {
color: var(--text-main);
line-height: 1.45;
margin: 0.35rem 0 0.55rem;
font-family: 'IBM Plex Sans Arabic', sans-serif;
}
#article-detail-content h1 { font-size: 1.45rem; }
#article-detail-content h2 { font-size: 1.28rem; color: #0f766e; }
#article-detail-content h3 { font-size: 1.12rem; color: #0369a1; }
#article-detail-content p, #article-detail-content li {
color: var(--text-body);
font-size: 1rem;
line-height: 1.95;
}
#article-detail-content ul, #article-detail-content ol {
padding-right: 1.2rem;
margin: 0.4rem 0 0.65rem;
}
#article-detail-content blockquote {
border-right: 3px solid #14b8a6;
margin: 0.7rem 0;
padding: 0.5rem 0.8rem;
background: rgba(20,184,166,0.08);
border-radius: 10px;
}
#article-detail-content mark {
background: linear-gradient(180deg, rgba(250,204,21,0.42), rgba(234,179,8,0.46));
color: #111827;
padding: 0 0.18rem;
border-radius: 4px;
}
@media (max-width: 900px) {
.article-detail-layout { grid-template-columns: 1fr !important; }
.article-detail-sidebar { order: 2; }
.article-detail-body { order: 1; }
.article-detail-shell { padding: 0.85rem !important; }
}
[data-theme="light"] .art-card {
background:
radial-gradient(120% 100% at 100% 0%, rgba(14,165,233,0.13), transparent 55%),
radial-gradient(120% 100% at 0% 100%, rgba(16,185,129,0.1), transparent 58%),
linear-gradient(180deg, #ffffff, #f8fafc);
border-color: rgba(148,163,184,0.32);
box-shadow: 0 10px 24px rgba(15,23,42,0.09);
}
[data-theme="light"] .art-card:hover { border-color: rgba(20,184,166,0.65); box-shadow: 0 16px 30px rgba(15,23,42,0.15); }
.saved-test-info h4 { font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 1.2rem; font-weight: 700; margin: 0 0 0.3rem 0; }
.saved-test-info p { font-size: 0.85rem; color: var(--text-muted); font-weight: 600; margin: 0; }
.saved-test-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
.icon-btn { width: 36px; height: 36px; border-radius: 8px; cursor: pointer; display: grid; place-items: center; border: 1px solid var(--border-color); background: transparent; color: var(--text-muted); transition: 0.2s; }
.icon-btn:hover { border-color: var(--accent-gold); color: var(--accent-gold); }
.icon-btn.del:hover { border-color: #ef4444; color: #ef4444; }
.alert { padding: 1rem 1.5rem; border-radius: 10px; margin-bottom: 1rem; font-weight: 600; font-size: 0.95rem; display: none; }
.alert-success { background: var(--state-success-bg); border: 1px solid var(--state-success-border); color: var(--state-success-text); }
.alert-error { background: var(--state-danger-bg); border: 1px solid var(--state-danger-border); color: var(--state-danger-text); }
.alert.show { display: flex; align-items: center; gap: 0.8rem; }
.exit-confirm-modal { display:none; position:fixed; inset:0; background:rgba(2,6,23,0.72); backdrop-filter: blur(4px); z-index:10050; align-items:center; justify-content:center; padding:1rem; }
.exit-confirm-card { width:100%; max-width:460px; background:var(--bg-surface); border:1px solid var(--border-color); border-radius:16px; box-shadow:0 18px 50px rgba(0,0,0,0.42); padding:1.2rem; text-align:right; }
.exit-confirm-title { font-family:'IBM Plex Sans Arabic',sans-serif; font-size:1.2rem; font-weight:800; color:var(--text-main); margin-bottom:0.45rem; }
.exit-confirm-text { color:var(--text-body); line-height:1.75; font-size:0.95rem; margin-bottom:1rem; }
.exit-confirm-actions { display:flex; gap:0.6rem; justify-content:flex-end; flex-wrap:wrap; }
.exit-confirm-actions .btn { min-width:130px; }
.action-confirm-card { max-width:520px; }
.action-confirm-head { display:flex; align-items:flex-start; gap:0.8rem; margin-bottom:0.35rem; }
.action-confirm-copy { flex:1; min-width:0; }
.action-confirm-icon {
width:38px;
height:38px;
border-radius:10px;
display:grid;
place-items:center;
flex-shrink:0;
color: var(--state-warning-text);
background: var(--state-warning-bg);
border:1px solid var(--state-warning-border);
}
.action-confirm-icon.danger {
color: var(--state-danger-text);
background: var(--state-danger-bg);
border-color: var(--state-danger-border);
}
/* ??? ??????? ????? ???????? */
body.focus-mode header.print-hide,
body.focus-mode footer,
body.focus-mode .stats-bar,
body.focus-mode #mobile-nav-panel {
display: none !important;
}
body.focus-mode #view-test .test-engine { padding-top: 1rem; }
/* ???? ??????? ???? ????? */
#splash-screen {
position: fixed;
inset: 0;
display: none;
align-items: center;
justify-content: center;
z-index: 12000;
background:
radial-gradient(circle at 20% 20%, rgba(234,179,8,0.18), transparent 45%),
radial-gradient(circle at 80% 80%, rgba(99,102,241,0.16), transparent 48%),
linear-gradient(165deg, #0b1225 0%, #0f172a 55%, #111827 100%);
}
#splash-screen.show { display: flex; animation: splashFadeIn 0.35s ease; }
#splash-screen.hide { animation: splashFadeOut 0.35s ease forwards; }
.splash-card {
width: min(92vw, 560px);
border-radius: 22px;
border: 1px solid rgba(148,163,184,0.25);
background: rgba(15,23,42,0.82);
box-shadow: 0 20px 60px rgba(0,0,0,0.45);
backdrop-filter: blur(10px);
padding: 1.6rem 1.5rem;
text-align: center;
}
.splash-badge {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.76rem;
font-weight: 800;
border-radius: 999px;
padding: 0.3rem 0.8rem;
margin-bottom: 0.8rem;
color: #facc15;
background: rgba(234,179,8,0.14);
border: 1px solid rgba(234,179,8,0.32);
}
.splash-title {
font-family: 'IBM Plex Sans Arabic', sans-serif;
font-size: clamp(1.4rem, 3.8vw, 2rem);
font-weight: 800;
color: #f8fafc;
margin: 0;
line-height: 1.55;
}
.splash-title span { color: var(--accent-gold); }
.splash-sub {
margin-top: 0.55rem;
color: #cbd5e1;
font-size: 0.92rem;
line-height: 1.8;
font-weight: 600;
}
.splash-loader {
margin-top: 1rem;
height: 8px;
border-radius: 999px;
background: rgba(148,163,184,0.25);
overflow: hidden;
border: 1px solid rgba(148,163,184,0.22);
}
.splash-loader span {
display: block;
height: 100%;
width: 0;
background: linear-gradient(90deg, #f59e0b, #eab308, #10b981);
animation: splashLoad 1.6s ease forwards;
}
.splash-skip {
margin-top: 0.9rem;
border: 1px solid var(--border-color);
background: transparent;
color: var(--text-muted);
border-radius: 10px;
font-family: inherit;
font-weight: 700;
font-size: 0.8rem;
padding: 0.45rem 0.9rem;
cursor: pointer;
}
@keyframes splashLoad { from { width: 0; } to { width: 100%; } }
@keyframes splashFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes splashFadeOut { from { opacity: 1; } to { opacity: 0; } }
/* -- ???? ??????? ???????? -- */
#resume-banner { display:none; position:fixed; bottom:1.5rem; right:1.5rem; left:1.5rem; max-width:480px; margin:0 auto; background:var(--bg-surface); border:2px solid var(--accent-gold); border-radius:16px; padding:1rem 1.2rem; z-index:9999; box-shadow:0 8px 32px rgba(0,0,0,0.35); animation:slideUpFade 0.4s ease; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
#resume-banner .rb-text { font-size:0.88rem; font-weight:700; color:var(--text-main); line-height:1.7; }
#resume-banner .rb-test-name { color:var(--accent-gold); }
#resume-banner .rb-actions { display:flex; gap:0.5rem; flex-shrink:0; }
#resume-banner .rb-btn-resume { background:var(--accent-gold); color:#1a1600; border:none; border-radius:10px; padding:0.5rem 1.1rem; font-family:inherit; font-weight:800; font-size:0.85rem; cursor:pointer; }
#resume-banner .rb-btn-dismiss { background:transparent; border:1px solid var(--border-color); color:var(--text-muted); border-radius:10px; padding:0.5rem 0.85rem; font-family:inherit; font-size:0.82rem; cursor:pointer; }
@keyframes slideUpFade { from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:translateY(0);} }
.section-divider { border: none; border-top: 1px solid var(--border-color); margin: 2rem 0; }
.newsletter-section {
background: transparent !important;
padding: 1rem 0 0.65rem !important;
margin-top: 0.75rem !important;
}
.newsletter-section .container {
max-width: 860px !important;
padding: 1.2rem 1.35rem;
border-radius: 22px;
background: var(--glass-bg);
border: 1px solid color-mix(in srgb, var(--glass-border) 82%, var(--border-color));
backdrop-filter: blur(var(--glass-blur)) saturate(132%);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(132%);
box-shadow: 0 18px 38px rgba(2,6,23,0.16);
text-align: center;
}
.newsletter-section h3 { font-size: 1.45rem !important; margin: 0 0 0.45rem !important; color: var(--text-main) !important; }
.newsletter-section p { color: var(--text-body) !important; font-size: 0.9rem !important; line-height: 1.7 !important; margin-bottom: 1rem !important; }
.newsletter-section #nl-form {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.6rem !important;
align-items: center;
max-width: 620px;
margin: 0 auto;
}
.newsletter-section #nl-email {
min-width: 0 !important;
max-width: none !important;
width: 100% !important;
padding: 0.72rem 1rem !important;
border-radius: 12px !important;
border: 1px solid color-mix(in srgb, var(--glass-border) 82%, var(--border-color)) !important;
background: color-mix(in srgb, var(--bg-surface) 84%, transparent) !important;
color: var(--text-main) !important;
}
.newsletter-section #nl-btn {
padding: 0.72rem 1.2rem !important;
border-radius: 12px !important;
min-height: 46px;
box-shadow: 0 10px 22px rgba(217,119,6,0.2);
}
footer { background: transparent; border-top: none; padding: 0.55rem 0 0.75rem; margin-top: auto; }
.footer-inner { max-width: 1200px; margin: 0 auto; padding: 1.15rem 1.3rem; display: grid; grid-template-columns: 1.35fr 0.9fr 0.9fr; gap: 1rem 1.5rem; align-items: start; border-radius: 22px; background: var(--glass-bg); border: 1px solid color-mix(in srgb, var(--glass-border) 80%, var(--border-color)); backdrop-filter: blur(var(--glass-blur)) saturate(130%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(130%); box-shadow: 0 16px 34px rgba(2,6,23,0.14); }
.footer-col-heading { display: flex; align-items: center; justify-content: space-between; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-main); margin: 0 0 0.9rem; padding-bottom: 0.65rem; border-bottom: 2px solid var(--border-color); cursor: default; }
.footer-chevron { display: none; flex-shrink: 0; width: 14px; height: 14px; transition: transform 0.3s ease; }
.footer-col-links { display: flex; flex-direction: column; gap: 0.55rem; }
.footer-col-links a { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--text-muted); font-size: 0.82rem; font-weight: 600; cursor: pointer; text-decoration: none; padding: 0.1rem 0; transition: color 0.15s, gap 0.15s; }
.footer-col-links a:hover { color: var(--accent-gold); gap: 0.7rem; }
.footer-col-icon { flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; }
.footer-col-icon i { width: 11px; height: 11px; }
.footer-col-icon.tone-cyan { background: rgba(6,182,212,0.1); }
.footer-col-icon.tone-violet { background: rgba(139,92,246,0.1); }
.footer-col-icon.tone-success { background: rgba(16,185,129,0.1); }
.footer-col-icon.tone-gold { background: rgba(234,179,8,0.1); }
.footer-col-icon.tone-warning { background: rgba(245,158,11,0.1); }
.footer-col-icon.tone-danger { background: rgba(239,68,68,0.1); }
.footer-col-icon.tone-facebook { background: rgba(24,119,242,0.12); }
.footer-col-icon.tone-sky { background: rgba(14,165,233,0.12); }
.footer-col-icon.tone-cyan i { color: #06b6d4; }
.footer-col-icon.tone-violet i { color: #8b5cf6; }
.footer-col-icon.tone-success i { color: #10b981; }
.footer-col-icon.tone-gold i { color: #eab308; }
.footer-col-icon.tone-warning i { color: #f59e0b; }
.footer-col-icon.tone-danger i { color: #ef4444; }
.footer-col-icon.tone-facebook i { color: #1877f2; }
.footer-col-icon.tone-sky i { color: #0ea5e9; }
.footer-brand-link { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; color: var(--text-main); cursor: pointer; margin-bottom: 0.65rem; }
.footer-brand-desc { font-size: 0.82rem; color: var(--text-muted); line-height: 1.72; margin: 0 0 0.85rem; max-width: 280px; }
.footer-brand-badges { display: flex; gap: 0.38rem; flex-wrap: wrap; }
.footer-badge { display:inline-flex; align-items:center; gap:0.3rem; border-radius:20px; padding:0.22rem 0.7rem; font-size:0.68rem; font-weight:700; }
.footer-badge.tone-success { background:rgba(16,185,129,0.1); border:1px solid rgba(16,185,129,0.2); color:#10b981; }
.footer-badge.tone-academic { background:rgba(99,102,241,0.1); border:1px solid rgba(99,102,241,0.2); color:#818cf8; }
.footer-badge.tone-gold { background:rgba(234,179,8,0.1); border:1px solid rgba(234,179,8,0.2); color:#eab308; }
.footer-badge i { width:10px; }
.footer-copyright { border-top: none; display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1.2rem 0; font-size: 0.76rem; color: var(--text-muted); font-weight: 600; flex-wrap: wrap; gap: 0.45rem; max-width: 1200px; margin: 0.1rem auto 0; }
.copyright { text-align: center; color: var(--text-muted); font-size: 0.9rem; font-weight: 600; }
/* ═════════════════════════════════════════════════════════════════════ */
/* MOOD TRACKER STYLES */
/* ═════════════════════════════════════════════════════════════════════ */
.mood-pro { display: grid; gap: 1.15rem; }
.mood-pro-header {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.1rem 1.2rem;
border-radius: 14px;
border: 1px solid color-mix(in srgb, #ec4899 35%, var(--border-color));
background: linear-gradient(135deg, rgba(236,72,153,0.15), rgba(59,130,246,0.08));
}
.mood-pro-icon {
width: 54px;
height: 54px;
display: grid;
place-items: center;
border-radius: 14px;
font-size: 1.7rem;
background: rgba(255,255,255,0.2);
border: 1px solid rgba(255,255,255,0.24);
flex-shrink: 0;
}
.mood-pro-header h2 { margin: 0 0 0.3rem; font-size: 1.55rem; font-weight: 800; }
.mood-pro-header p { margin: 0; color: var(--text-body); font-size: 0.9rem; line-height: 1.75; }
.mood-kpi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 0.65rem;
}
.mood-kpi-card {
background: var(--bg-surface);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 0.75rem 0.9rem;
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.mood-kpi-card span { font-size: 0.74rem; color: var(--text-muted); font-weight: 700; }
.mood-kpi-card strong { font-size: 1.08rem; color: var(--text-main); font-weight: 800; }
.mood-entry-card,
.mood-analytics-wrap,
.mood-history-wrap {
background: var(--bg-surface);
border: 1px solid var(--border-color);
border-radius: 14px;
padding: 1rem;
animation: fadeIn 0.3s ease;
}
.mood-entry-head {
display: flex;
justify-content: space-between;
gap: 0.8rem;
align-items: end;
flex-wrap: wrap;
margin-bottom: 0.8rem;
}
.mood-entry-head h3,
.mood-analytics-head h3,
.mood-history-head h3 { margin: 0; font-size: 1.08rem; font-weight: 800; color: var(--accent-gold); }
.mood-date-wrap { display: flex; flex-direction: column; gap: 0.25rem; min-width: 170px; }
.mood-date-wrap label { font-size: 0.76rem; color: var(--text-muted); font-weight: 700; }
.mood-scale-buttons { display: flex; gap: 0.45rem; flex-wrap: wrap; }
.mood-button {
border: 1.5px solid var(--border-color);
background: var(--bg-main);
color: var(--text-body);
border-radius: 10px;
padding: 0.58rem 0.72rem;
cursor: pointer;
font-size: 0.84rem;
font-weight: 700;
transition: 0.2s;
}
.mood-button:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent-gold) 35%, var(--border-color)); }
.mood-button.active { border-color: #ec4899; color: #ec4899; background: rgba(236,72,153,0.1); box-shadow: 0 0 0 2px rgba(236,72,153,0.14); }
.mood-picked-note { margin-top: 0.45rem; font-size: 0.83rem; color: var(--text-muted); font-weight: 700; }
.mood-sliders-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.6rem; margin-bottom: 0.9rem; }
.mood-slider-field {
display: grid;
gap: 0.3rem;
font-size: 0.82rem;
font-weight: 700;
color: var(--text-body);
background: var(--bg-main);
border: 1px solid var(--border-color);
border-radius: 10px;
padding: 0.62rem 0.7rem;
}
.mood-slider-field input[type='range'] { accent-color: #ec4899; width: 100%; }
.mood-slider-field span { color: #ec4899; font-weight: 800; font-size: 0.78rem; }
.mood-chip-block { margin-bottom: 0.75rem; }
.mood-chip-row { display: flex; gap: 0.42rem; flex-wrap: wrap; margin-top: 0.45rem; }
.mood-chip {
border: 1px solid var(--border-color);
border-radius: 999px;
padding: 0.38rem 0.72rem;
font-size: 0.78rem;
background: var(--bg-main);
color: var(--text-body);
cursor: pointer;
font-weight: 700;
transition: 0.18s;
}
.mood-chip:hover { border-color: color-mix(in srgb, var(--accent-gold) 35%, var(--border-color)); }
.mood-chip.active { border-color: #14b8a6; color: #14b8a6; background: rgba(20,184,166,0.12); }
.mood-context-grid {
display: grid;
grid-template-columns: minmax(180px, 220px) 1fr;
gap: 0.6rem;
margin-bottom: 0.8rem;
}
.mood-goal-wrap { display: grid; grid-template-columns: 1fr auto; gap: 0.6rem; align-items: center; margin-bottom: 0.8rem; }
.mood-checkbox { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; color: var(--text-body); font-weight: 700; }
.mood-checkbox input { accent-color: #10b981; }
.mood-action-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 0.5rem;
align-items: stretch;
}
.mood-action-row .btn,
.mood-goal-builder .btn,
.mood-reminder-controls .btn,
.mood-share-actions .btn {
min-height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.42rem;
white-space: nowrap;
}
#view-mood .btn [data-lucide],
#view-mood .btn .lucide {
width: 17px !important;
height: 17px !important;
vertical-align: middle;
}
.mood-danger { border-color: var(--state-danger-border) !important; color: var(--state-danger-text) !important; }
.mood-inline-msg {
margin-top: 0.68rem;
padding: 0.55rem 0.7rem;
border-radius: 10px;
font-size: 0.82rem;
font-weight: 700;
border: 1px solid rgba(16,185,129,0.35);
color: #10b981;
background: rgba(16,185,129,0.1);
}
.mood-inline-msg.error {
border-color: var(--state-danger-border);
color: var(--state-danger-text);
background: var(--state-danger-bg);
}
.mood-analytics-head,
.mood-history-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.7rem;
flex-wrap: wrap;
margin-bottom: 0.75rem;
}
.mood-chart-wrap { position: relative; height: 250px; margin-bottom: 0.85rem; }
#mood-chart { width: 100% !important; height: 100% !important; }
.mood-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.55rem; margin-bottom: 0.85rem; }
.mood-stat-tile {
background: var(--bg-main);
border: 1px solid var(--border-color);
border-radius: 10px;
padding: 0.62rem 0.7rem;
display: flex;
flex-direction: column;
gap: 0.22rem;
}
.mood-stat-tile span { font-size: 0.74rem; color: var(--text-muted); font-weight: 700; }
.mood-stat-tile strong { font-size: 1.03rem; color: var(--text-main); font-weight: 800; }
.mood-distribution h4,
.mood-insights h4 { margin: 0 0 0.55rem; font-size: 0.95rem; color: var(--accent-gold); }
.mood-distribution { margin-bottom: 0.75rem; }
.mood-heatmap {
margin-bottom: 0.8rem;
padding: 0.75rem;
border: 1px solid var(--border-color);
border-radius: 12px;
background: var(--bg-main);
}
.mood-subhead-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.55rem;
}
.mood-subhead-row h4 { margin: 0; font-size: 0.95rem; color: var(--accent-gold); }
.mood-subhead-row span { font-size: 0.74rem; color: var(--text-muted); font-weight: 700; }
.mood-heatmap-grid {
display: grid;
grid-template-columns: repeat(15, minmax(0, 1fr));
gap: 0.28rem;
}
.mood-heatmap-cell {
aspect-ratio: 1;
border-radius: 6px;
border: 1px solid rgba(148,163,184,0.12);
min-height: 16px;
position: relative;
}
.mood-heatmap-cell.empty { opacity: 0.35; background: rgba(148,163,184,0.08); }
.mood-heatmap-cell[data-tone='1'] { background: rgba(239,68,68,0.82); }
.mood-heatmap-cell[data-tone='2'] { background: rgba(249,115,22,0.82); }
.mood-heatmap-cell[data-tone='3'] { background: rgba(234,179,8,0.82); }
.mood-heatmap-cell[data-tone='4'] { background: rgba(34,197,94,0.82); }
.mood-heatmap-cell[data-tone='5'] { background: rgba(16,185,129,0.88); }
.mood-dist-row {
display: grid;
grid-template-columns: 74px 1fr 50px;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.4rem;
}
.mood-dist-row label { font-size: 0.76rem; color: var(--text-body); font-weight: 700; }
.mood-dist-track {
height: 9px;
background: var(--bg-main);
border: 1px solid var(--border-color);
border-radius: 999px;
overflow: hidden;
}
.mood-dist-fill { height: 100%; background: linear-gradient(90deg, #ec4899, #14b8a6); }
.mood-dist-val { font-size: 0.74rem; color: var(--text-muted); font-weight: 700; text-align: left; }
.mood-insights ul { margin: 0; padding-right: 1rem; display: grid; gap: 0.35rem; }
.mood-insights li { font-size: 0.83rem; color: var(--text-body); line-height: 1.7; }
.mood-proplus-wrap {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 0.7rem;
align-items: start;
}
.mood-advanced-wrap {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 0.7rem;
align-items: start;
}
.mood-plus-card {
border: 1px solid var(--border-color);
border-radius: 12px;
background: var(--bg-surface);
padding: 0.9rem;
display: flex;
flex-direction: column;
gap: 0.55rem;
}
.mood-plus-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.55rem;
}
.mood-plus-head h3 {
margin: 0;
font-size: 0.95rem;
color: var(--accent-gold);
font-weight: 800;
}
.mood-plus-head span {
font-size: 0.75rem;
font-weight: 800;
color: var(--text-muted);
border: 1px solid var(--border-color);
border-radius: 999px;
padding: 0.2rem 0.55rem;
white-space: nowrap;
}
.mood-plus-list {
margin: 0;
padding-right: 1rem;
display: grid;
gap: 0.35rem;
}
.mood-plus-list li {
font-size: 0.82rem;
color: var(--text-body);
line-height: 1.75;
}
.mood-plus-list li.done { color: #10b981; }
.mood-plus-list li.warn { color: #f97316; }
.mood-plus-list li.risk { color: #ef4444; }
.mood-goal-builder {
display: grid;
grid-template-columns: minmax(220px, 1.5fr) minmax(160px, 1fr) minmax(82px, 0.45fr) auto;
gap: 0.45rem;
margin-bottom: 0.65rem;
align-items: stretch;
}
.mood-goal-builder .form-input,
.mood-reminder-controls .form-input {
margin: 0;
min-height: 42px;
}
.mood-goal-builder select.form-input,
.mood-reminder-controls select.form-input {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding-left: 2.35rem;
padding-right: 0.9rem;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: left 0.75rem center;
background-size: 16px;
}
.mood-goal-builder select.form-input:focus,
.mood-reminder-controls select.form-input:focus {
box-shadow: 0 0 0 2px var(--accent-gold-light);
}
.mood-goal-builder select.form-input option,
.mood-reminder-controls select.form-input option {
background: var(--bg-surface);
color: var(--text-main);
}
.mood-goal-metric {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.6rem;
}
.mood-goal-metric strong { color: var(--text-main); }
.mood-reminder-controls {
display: grid;
grid-template-columns: minmax(180px, 1fr) minmax(126px, 150px) auto auto;
gap: 0.55rem;
align-items: center;
margin-bottom: 0.55rem;
}
.mood-reminder-controls .mood-checkbox {
min-height: 42px;
border: 1px solid var(--border-color);
border-radius: 10px;
padding: 0.42rem 0.62rem;
background: var(--bg-main);
justify-content: center;
}
.mood-helper-text {
font-size: 0.76rem;
color: var(--text-muted);
line-height: 1.7;
}
.mood-share-actions {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
margin-top: 0.75rem;
}
.mood-clinical-card {
background: linear-gradient(180deg, color-mix(in srgb, var(--bg-surface) 94%, #ec4899 6%), var(--bg-surface));
}
.mood-clinical-summary {
font-size: 0.84rem;
color: var(--text-body);
line-height: 1.9;
display: grid;
gap: 0.5rem;
}
.mood-clinical-summary p { margin: 0; }
.mood-clinical-summary strong { color: var(--text-main); }
#mood-history-count { font-size: 0.78rem; font-weight: 700; color: var(--text-muted); }
#mood-history-list { display: grid; gap: 0.5rem; }
.mood-history-item {
border: 1px solid var(--border-color);
background: var(--bg-main);
border-radius: 11px;
padding: 0.72rem;
display: grid;
gap: 0.45rem;
}
.mood-history-top { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.mood-history-date { font-size: 0.78rem; color: var(--text-muted); font-weight: 700; }
.mood-history-emotion {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.28rem 0.62rem;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 800;
}
.mood-history-emotion.mood-1 { color: #ef4444; background: rgba(239,68,68,0.14); }
.mood-history-emotion.mood-2 { color: #f97316; background: rgba(249,115,22,0.14); }
.mood-history-emotion.mood-3 { color: #eab308; background: rgba(234,179,8,0.14); }
.mood-history-emotion.mood-4 { color: #22c55e; background: rgba(34,197,94,0.14); }
.mood-history-emotion.mood-5 { color: #10b981; background: rgba(16,185,129,0.14); }
.mood-history-meta {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
}
.mood-mini-pill {
border: 1px solid var(--border-color);
border-radius: 999px;
padding: 0.22rem 0.5rem;
font-size: 0.7rem;
color: var(--text-muted);
font-weight: 700;
}
.mood-history-notes { color: var(--text-body); font-size: 0.79rem; line-height: 1.7; }
.mood-history-tags { font-size: 0.73rem; color: var(--text-muted); }
.mood-delete-btn {
background: transparent;
border: 1px solid var(--border-color);
color: var(--text-muted);
border-radius: 8px;
padding: 0.25rem 0.5rem;
font-size: 0.73rem;
cursor: pointer;
font-weight: 700;
}
.mood-delete-btn:hover { color: #ef4444; border-color: rgba(239,68,68,0.45); }
.mood-timeline-list {
display: grid;
gap: 0.55rem;
}
.mood-timeline-item {
display: grid;
grid-template-columns: 88px 18px 1fr;
gap: 0.6rem;
align-items: start;
}
.mood-timeline-date {
font-size: 0.74rem;
color: var(--text-muted);
font-weight: 700;
padding-top: 0.1rem;
}
.mood-timeline-line {
position: relative;
min-height: 100%;
}
.mood-timeline-line::before {
content: '';
position: absolute;
right: 8px;
top: 0;
bottom: -0.7rem;
width: 2px;
background: var(--border-color);
}
.mood-timeline-item:last-child .mood-timeline-line::before { display: none; }
.mood-timeline-dot {
width: 16px;
height: 16px;
border-radius: 50%;
position: relative;
z-index: 1;
border: 2px solid var(--bg-surface);
}
.mood-timeline-dot.mood-1 { background: #ef4444; }
.mood-timeline-dot.mood-2 { background: #f97316; }
.mood-timeline-dot.mood-3 { background: #eab308; }
.mood-timeline-dot.mood-4 { background: #22c55e; }
.mood-timeline-dot.mood-5 { background: #10b981; }
.mood-timeline-card {
border: 1px solid var(--border-color);
background: var(--bg-main);
border-radius: 10px;
padding: 0.65rem 0.75rem;
display: grid;
gap: 0.35rem;
}
.mood-timeline-title {
display: flex;
justify-content: space-between;
gap: 0.5rem;
flex-wrap: wrap;
font-size: 0.8rem;
font-weight: 800;
color: var(--text-main);
}
.mood-timeline-sub {
font-size: 0.75rem;
color: var(--text-muted);
line-height: 1.7;
}
@media (max-width: 768px) {
.mood-pro-header { align-items: flex-start; }
.mood-pro-header h2 { font-size: 1.3rem; }
.mood-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mood-context-grid { grid-template-columns: 1fr; }
.mood-goal-builder { grid-template-columns: 1fr; }
.mood-goal-wrap { grid-template-columns: 1fr; }
.mood-action-row { grid-template-columns: 1fr 1fr; }
.mood-action-row .btn { min-width: 0; }
.mood-reminder-controls {
grid-template-columns: 1fr 1fr;
}
.mood-reminder-controls .mood-checkbox {
grid-column: 1 / -1;
}
.mood-chart-wrap { height: 220px; }
.mood-dist-row { grid-template-columns: 64px 1fr 44px; }
.mood-heatmap-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.mood-timeline-item { grid-template-columns: 70px 16px 1fr; }
.mood-proplus-wrap,
.mood-advanced-wrap {
grid-template-columns: 1fr;
}
.admin-tabs {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding: 0.35rem;
scroll-snap-type: x mandatory;
scroll-padding-inline: 0.35rem;
}
.admin-tabs::-webkit-scrollbar { display: none; }
.admin-tab {
flex: 0 0 auto;
min-width: 132px;
padding: 0.62rem 0.85rem;
font-size: 0.83rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
scroll-snap-align: start;
}
.admin-tab.active {
box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-gold) 35%, transparent);
}
#tab-manage {
overflow-x: hidden;
}
#tab-manage .manage-layout {
grid-template-columns: 1fr;
gap: 0.75rem;
}
#tab-manage .manage-side-nav {
position: static;
top: auto;
display: flex;
gap: 0.45rem;
overflow-x: auto;
max-height: none;
padding: 0.45rem;
white-space: nowrap;
scrollbar-width: thin;
}
#tab-manage .manage-side-btn {
width: auto;
flex: 0 0 auto;
min-height: 38px;
padding: 0.45rem 0.62rem;
border-radius: 999px;
font-size: 0.75rem;
}
#tab-manage .manage-side-count {
margin-inline-start: 0.35rem;
min-width: 1.2rem;
height: 1.2rem;
font-size: 0.64rem;
padding: 0 0.32rem;
}
#tab-manage .saved-test-item {
flex-direction: column;
align-items: stretch;
padding: 0.95rem;
}
#tab-manage .saved-test-info,
#tab-manage .saved-test-info > * {
min-width: 0;
max-width: 100%;
}
#tab-manage .saved-test-actions {
width: 100%;
justify-content: flex-end;
}
#tab-manage .scale-manage-toggle {
padding: 0.78rem 0.85rem;
}
#tab-manage .scale-manage-meta {
white-space: normal;
overflow-wrap: anywhere;
}
#tab-manage .scale-manage-body {
padding: 0 0.85rem 0.85rem;
}
#tab-manage details,
#tab-manage [id^="scale-version-diff-"] {
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
#tab-manage table {
display: block;
width: 100%;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
#tab-manage table th,
#tab-manage table td {
white-space: nowrap;
}
#usage-funnel-panel,
#admin-health-snapshot-panel,
#admin-alerts-center-panel,
#admin-digest-panel,
#admin-observability-panel,
#admin-insights-panel,
#admin-ab-testing-panel {
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.admin-header {
align-items: flex-start;
flex-wrap: wrap;
gap: 0.75rem;
margin-bottom: 1.2rem;
padding-bottom: 1rem;
}
.admin-header > div:nth-child(2) {
flex: 1 1 calc(100% - 60px);
}
.admin-header > div:nth-child(2) h2 {
font-size: 1.35rem !important;
line-height: 1.35;
}
.admin-header > div:nth-child(2) p {
font-size: 0.8rem !important;
line-height: 1.55;
}
.admin-header-actions {
width: 100%;
margin-right: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.45rem;
position: sticky;
top: 0.4rem;
z-index: 35;
background: color-mix(in srgb, var(--bg-main) 82%, transparent);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 1px solid var(--border-color);
border-radius: 10px;
padding: 0.4rem;
}
.admin-header-actions .btn {
width: 100%;
justify-content: center;
min-height: 42px;
padding: 0.5rem 0.65rem;
font-size: 0.82rem;
}
.suggestions-toolbar {
align-items: stretch;
}
.suggestions-toolbar-actions {
width: 100%;
justify-content: flex-start;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
}
#suggestions-filter-status {
grid-column: 1 / -1;
}
#suggestions-filter-field,
#suggestions-filter-from,
#suggestions-filter-to {
max-width: none;
}
.suggestions-date-filter {
width: 100%;
min-height: 40px;
}
.suggestions-date-filter .form-input {
width: 100%;
max-width: none;
min-width: 0;
}
.suggestions-toolbar-actions .zen-btn {
justify-content: center;
width: 100%;
}
#suggestions-status {
grid-column: 1 / -1;
}
.suggestion-card-actions {
justify-content: stretch;
flex-wrap: wrap;
gap: 0.45rem;
}
.trusted-device-card {
flex-direction: column;
align-items: stretch;
}
.security-panels-grid {
grid-template-columns:1fr;
}
.trusted-device-card .suggestion-delete-btn {
width: 100%;
justify-content: center;
}
.suggestion-card-actions .zen-btn,
.suggestion-card-actions .suggestion-delete-btn {
width: 100%;
justify-content: center;
}
.suggestion-card-head {
flex-direction: column;
align-items: stretch;
gap: 0.55rem;
}
.suggestion-card-date {
align-self: flex-start;
}
.suggestion-card-reason {
font-size: 0.86rem;
line-height: 1.75;
}
.nav-links, .header-search { display: none !important; }
.mobile-menu-btn { display: inline-flex !important; }
.header-inner { flex-wrap: wrap; align-items: center; height: auto; padding: 0.55rem 0; }
.brand { align-items: center; gap: 0.6rem; }
.header-actions { gap: 0.5rem; }
.brand-text h1 { font-size: 1.3rem; }
.brand-text p { display: none; }
.mobile-nav-panel { display: none; position: fixed; top: 64px; right: 0.65rem; left: 0.65rem; z-index: 1400; background: var(--bg-surface); border: 1px solid var(--border-color); border-top: 2px solid var(--accent-gold); border-radius: 16px; box-shadow: 0 22px 55px rgba(0,0,0,0.42); padding: 0.5rem 0.5rem 0.65rem; max-height: min(68vh, 560px); overflow-y: auto; }
@keyframes menuSlideDown { from { opacity:0; transform:translateY(-8px) scale(0.985); } to { opacity:1; transform:translateY(0) scale(1); } }
.mobile-nav-panel.open { animation: menuSlideDown 0.22s ease forwards; }
.mobile-nav-panel .mnav-section-label { font-size: 0.56rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); padding: 0.38rem 0.55rem 0.15rem; margin-top: 0.2rem; }
.mobile-nav-panel .mnav-section-label:first-child { margin-top: 0; }
.mobile-nav-panel .mnav-divider { height: 1px; background: var(--border-color); margin: 0.4rem 0; }
.mobile-nav-panel .nav-link { display: flex; align-items: center; gap: 0.58rem; padding: 0.46rem 0.52rem; border-radius: 10px; background: transparent; color: var(--text-main); margin-bottom: 0.04rem; font-size: 0.82rem; font-weight: 650; transition: background 0.15s, color 0.15s; cursor: pointer; text-decoration: none; }
.mobile-nav-panel .nav-link:hover, .mobile-nav-panel .nav-link:active { background: var(--accent-gold-light); color: var(--accent-gold); }
.mobile-nav-panel .mnav-icon { flex-shrink: 0; width: 25px; height: 25px; border-radius: 7px; display: grid; place-items: center; }
.mobile-nav-panel .mnav-icon i { width: 13px; height: 13px; }
.mobile-nav-panel .mnav-icon.tone-indigo { background: rgba(99,102,241,0.13); color: #6366f1; }
.mobile-nav-panel .mnav-icon.tone-gold { background: rgba(234,179,8,0.13); color: #eab308; }
.mobile-nav-panel .mnav-icon.tone-teal { background: rgba(20,184,166,0.13); color: #14b8a6; }
.mobile-nav-panel .mnav-icon.tone-violet { background: rgba(139,92,246,0.13); color: #8b5cf6; }
.mobile-nav-panel .mnav-icon.tone-sky { background: rgba(14,165,233,0.13); color: #0ea5e9; }
.mobile-nav-panel .mnav-icon.tone-orange { background: rgba(249,115,22,0.13); color: #f97316; }
.mobile-nav-panel .mnav-icon.tone-pink { background: rgba(236,72,153,0.13); color: #ec4899; }
.mobile-nav-panel .mnav-icon.tone-success { background: rgba(16,185,129,0.13); color: #10b981; }
.mobile-nav-panel .mnav-icon.tone-warning { background: rgba(245,158,11,0.13); color: #f59e0b; }
.mobile-nav-panel .mnav-icon.mood { font-size: 1.1rem; display: flex; align-items: center; justify-content: center; }
.mobile-nav-panel .mnav-group { margin-bottom: 0.1rem; }
.mobile-nav-panel .mnav-group-head { width: 100%; border: none; background: transparent; color: var(--text-main); font-family: inherit; font-size: 0.78rem; font-weight: 750; display: flex; align-items: center; justify-content: space-between; padding: 0.52rem 0.5rem; border-radius: 10px; cursor: pointer; }
.mobile-nav-panel .mnav-group-head:hover { background: var(--bg-hover); }
.mobile-nav-panel .mnav-group-head i { width: 14px; height: 14px; transition: transform 0.2s ease; }
.mobile-nav-panel .mnav-group-links { display: none; padding: 0.12rem 0.12rem 0.2rem; }
.mobile-nav-panel .mnav-group.open .mnav-group-links { display: block; }
.mobile-nav-panel .mnav-group.open .mnav-group-head i { transform: rotate(180deg); }
.instructions-card { padding: 1.8rem 1.3rem; margin: 1.5rem auto; }
#view-instructions #inst-title { font-size: 1.35rem !important; }
.inst-header { margin-bottom: 1rem; padding-bottom: 0.7rem; gap: 0.7rem; }
.inst-header i { width: 20px; }
.inst-text { font-size: 0.98rem; line-height: 1.7; margin-bottom: 1.3rem; }
.inst-actions { margin-top: 1.3rem; gap: 0.55rem; flex-direction: column; }
.inst-actions .btn { width: 100%; padding: 0.68rem 0.95rem; font-size: 0.9rem; min-height: 44px; }
.inst-actions .btn i { width: 15px; }
.test-engine { padding: 1rem 0.75rem; }
.q-card-container { padding: 1rem 0.75rem; margin-bottom: 1rem; border-radius: 12px; }
.q-badge { font-size: 0.74rem; padding: 0.2rem 0.7rem; margin-bottom: 0.55rem; }
.q-text { font-size: 1.08rem; line-height: 1.55; margin-bottom: 0.9rem; }
.options-stack { max-width: 100%; }
.opt-btn { padding: 0.62rem 0.78rem; font-size: 0.86rem; border-radius: 9px; min-height: 48px; }
.test-actions { flex-direction: row; gap: 0.5rem; }
#view-test .test-actions { position: sticky; bottom: 0; background: var(--bg-main); border-top: 1px solid var(--border-color); padding: 0.6rem 0.75rem; margin: 0 -0.75rem -1rem; z-index: 30; }
#view-test .test-actions .btn { min-height: 48px; }
.btn { flex: 1; padding: 0.7rem; font-size: 0.95rem; min-height: 44px; }
.mobile-nav-panel .mnav-group-head { min-height: 48px; }
.mobile-nav-panel .nav-link { min-height: 44px; }
#hero-cats-bar .filter-btn { min-height: 40px; }
.report-section { padding: 1.2rem; }
.form-grid { grid-template-columns: 1fr; }
.cutoff-row { flex-direction: column; align-items: flex-start; }
.sub-cutoff-main-row { flex-wrap: wrap; }
.hero { padding: 2.45rem 0 2.8rem; }
.hero h2 { font-size: clamp(1.55rem, 7.2vw, 2.2rem); line-height: 1.32; }
.hero p { font-size: 0.9rem; margin-bottom: 1.15rem; }
.hero-features { gap: 0.45rem 0.7rem; margin-top: 0.5rem; padding: 0.35rem 0.52rem; border-radius: 14px; }
.hero-feat { font-size: 0.72rem; }
.hero-search-wrap { margin: 0.85rem auto 0.75rem; }
.hero-search-bar { font-size: 0.9rem; padding: 0.68rem 2.6rem 0.68rem 1rem; }
.hero-search-icon { width: 16px; left: 0.9rem; }
#hero-cats-bar .filter-btn { padding: 0.38rem 0.7rem; font-size: 0.75rem; }
.browse-section { padding: 1.2rem 0; }
/* ?????? ???????? ??? ??????? ??????? */
.tests-grid { gap: 0.9rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.test-card { padding: 1rem; }
.card-top { margin-bottom: 0.75rem; }
.card-tag { font-size: 0.62rem; padding: 0.2rem 0.6rem; }
.card-icon { width: 36px; height: 36px; font-size: 1rem; }
.card-title { font-size: 1rem; margin-bottom: 0.2rem; }
.card-subtitle { font-size: 0.75rem; margin-bottom: 0.7rem; display: none !important; }
.card-desc { font-size: 0.82rem; line-height: 1.5; margin-bottom: 0.8rem; }
.card-footer { font-size: 0.73rem; padding-top: 0.75rem; }
.card-open-btn { padding: 0.42rem 0.8rem; font-size: 0.75rem; }
/* ????? Newsletter ? Footer ??? ??????? ??????? ???????? ??????? */
.newsletter-section { padding: 2.5rem 0; }
.newsletter-section h3 { font-size: 1.5rem; margin-bottom: 0.6rem; }
.newsletter-section #nl-form { gap: 0.6rem; }
.newsletter-section input { max-width: 100%; min-width: auto; }
footer { padding: 1.5rem 0 0; }
.footer-inner { grid-template-columns: 1fr 1fr; gap: 1.2rem 2rem; padding-bottom: 1.8rem; }
.footer-brand-col { grid-column: 1 / -1; padding-bottom: 1.2rem; border-bottom: 1px solid var(--border-color); }
}
@media (max-width: 520px) {
.suggestion-card {
padding: 0;
border-radius: 10px;
}
.suggestion-card-meta {
grid-template-columns: 1fr;
gap: 0.55rem;
}
.suggestion-card-date {
white-space: normal;
}
.suggestion-card-actions {
justify-content: stretch;
}
.suggestion-card-actions button {
width: 100%;
justify-content: center;
}
.suggestions-toolbar-actions {
grid-template-columns: 1fr;
}
.admin-header-actions {
grid-template-columns: 1fr;
}
.suggestions-date-filter {
display:grid;
grid-template-columns:auto 1fr;
align-items:center;
}
.container { padding: 0 0.85rem; }
.hero { padding-top: 2.15rem; }
.hero h2 { font-size: clamp(1.45rem, 8.2vw, 1.95rem); }
.hero p { font-size: 0.86rem; max-width: 100%; margin-bottom: 0.9rem; }
.hero-badge { font-size: 0.7rem; padding: 0.26rem 0.64rem; margin-bottom: 0.7rem; }
.hero-search-wrap { margin-bottom: 0.65rem; }
.hero-search-bar { font-size: 0.86rem; }
#hero-cats-bar { gap: 0.34rem; margin-bottom: 0.48rem; }
#hero-cats-bar .filter-btn { font-size: 0.72rem; padding: 0.34rem 0.58rem; }
.hero-features { gap: 0.38rem 0.6rem; margin-top: 0.42rem; padding: 0.3rem 0.4rem; }
.hero-feat { font-size: 0.67rem; }
#test-title-top { font-size: 1.08rem; }
.zen-btn { padding: 0.36rem 0.72rem; font-size: 0.8rem; }
.q-text { font-size: 1.02rem; line-height: 1.6; }
.opt-btn { min-height: 44px; font-size: 0.84rem; }
#view-test .test-engine { padding: 0.7rem 0.3rem 5.2rem; }
#view-test .q-card-container { padding: 0.85rem 0.6rem; }
#view-test .test-actions {
position: sticky;
bottom: 0.45rem;
background: linear-gradient(180deg, rgba(15,23,42,0.88), rgba(30,41,59,0.9));
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 0.45rem;
z-index: 30;
}
#view-test .test-actions .btn {
min-height: 44px;
padding: 0.65rem 0.55rem;
font-size: 0.84rem;
}
#resume-banner {
left: 0.7rem;
right: 0.7rem;
bottom: 0.7rem;
padding: 0.8rem;
}
.splash-card { padding: 1.2rem 0.95rem; }
/* === ?????? ???????? - ????? ??????? ?????? === */
.tests-grid { gap: 0.6rem !important; grid-template-columns: 1fr !important; }
body.density-comfortable .tests-grid { grid-template-columns: 1fr !important; gap: 0.6rem !important; }
.test-card {
flex-direction: column !important;
padding: 0 !important;
gap: 0 !important;
min-height: auto !important;
overflow: hidden;
border-radius: 14px;
box-shadow: 0 2px 10px rgba(0,0,0,0.09);
}
/* ???? ?????: ????? + ???????? */
.card-top {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 0.55rem 0.9rem !important;
margin-bottom: 0 !important;
border-bottom: 1px solid var(--border-color);
background: rgba(99,102,241,0.05);
gap: 0.5rem;
}
.card-tag {
display: inline-flex !important;
align-items: center;
font-size: 0.6rem !important;
padding: 0.2rem 0.58rem !important;
border-radius: 5px;
text-transform: none;
letter-spacing: 0;
max-width: 68%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.card-icon {
display: grid !important;
place-items: center !important;
width: 26px !important;
height: 26px !important;
border-radius: 7px !important;
font-size: 0.75rem !important;
flex-shrink: 0;
}
.card-icon i { width: 13px !important; height: 13px !important; }
/* ??????? */
.card-title {
font-size: 0.96rem !important;
font-weight: 800 !important;
margin: 0 !important;
padding: 0.7rem 0.9rem 0.3rem !important;
line-height: 1.4 !important;
}
.card-subtitle { display: none !important; }
.card-desc { -webkit-line-clamp: 2 !important; min-height: calc(1.5em * 1) !important; font-size: 0.8rem !important; margin-bottom: 0.5rem !important; }
.card-more-toggle { font-size: 0.72rem !important; }
.card-meta-row {
display: flex !important;
flex-wrap: wrap !important;
grid-template-columns: unset !important;
gap: 0.3rem;
margin: 0.2rem 0.9rem 0.7rem !important;
}
.card-meta-pill { flex: 0 0 auto; justify-content: flex-start; padding: 0.3rem 0.55rem; font-size: 0.72rem; }
/* ?????: ????? + ?? ????? */
.card-footer {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 0.45rem 0.9rem !important;
border-top: 1px solid var(--border-color) !important;
margin: 0 !important;
font-size: 0.7rem !important;
background: transparent;
}
.card-footer > span:first-child { display: inline-flex !important; }
.card-footer > span { display: inline-flex !important; align-items: center; gap: 0.25rem; color: var(--text-muted); }
.card-open-btn {
display: inline-flex !important;
align-items: center;
gap: 0.3rem;
background: linear-gradient(135deg, var(--accent-primary), var(--accent-primary-hover)) !important;
color: var(--text-on-primary) !important;
border: none !important;
border-radius: 8px;
padding: 0.32rem 0.75rem !important;
font-size: 0.74rem !important;
font-weight: 700;
font-family: inherit;
cursor: pointer;
box-shadow: 0 2px 8px rgba(234,179,8,0.35);
margin-right: 0 !important;
margin-left: 0 !important;
transition: filter 0.15s;
}
.card-open-btn i { width: 12px !important; }
}
@media (max-width: 520px) {
.instructions-card { padding: 1.4rem 1rem; margin: 1.2rem auto; max-width: 100%; border: 1.5px solid var(--accent-gold); border-radius: 10px; }
#view-instructions #inst-title { font-size: 1.2rem !important; margin: 0; font-weight: 800; }
.inst-header { margin-bottom: 0.75rem; padding-bottom: 0.6rem; gap: 0.6rem; }
.inst-header i { width: 18px; flex-shrink: 0; }
.inst-text { font-size: 0.93rem; line-height: 1.65; margin-bottom: 1.1rem; color: var(--text-body); }
.inst-actions { margin-top: 1.1rem; gap: 0.5rem; flex-direction: column; }
.inst-actions .btn { width: 100%; padding: 0.62rem 0.85rem; font-size: 0.87rem; min-height: 42px; border-radius: 10px; }
.inst-actions .btn i { width: 14px; }
.inst-actions .btn span { display: inline; }
#view-instructions .container { padding: 0 0.6rem; }
.dl-dropdown-wrap { width: 100%; }
#dl-menu { right: 0 !important; left: 0 !important; width: 100% !important; min-width: unset !important; }
.dl-menu-item { font-size: 0.85rem; padding: 0.65rem 0.9rem; }
/* ????? Footer ??? ?????? ????? - ?????? ?????? ?????? */
.newsletter-section { padding: 2rem 0 !important; }
.newsletter-section h3 { font-size: 1.4rem !important; margin-bottom: 0.6rem !important; }
.newsletter-section p { font-size: 0.88rem !important; margin-bottom: 1.4rem !important; }
.newsletter-section #nl-form { gap: 0.5rem !important; flex-direction: column; }
.newsletter-section input { max-width: 100% !important; width: 100% !important; padding: 0.7rem 1rem !important; font-size: 0.88rem !important; }
.newsletter-section button { width: 100% !important; padding: 0.7rem 1rem !important; font-size: 0.87rem !important; }
.newsletter-section #nl-msg { margin-top: 0.8rem; font-size: 0.8rem; }
footer { padding: 1rem 0 0 !important; }
.footer-inner { display: block !important; padding: 0 0.8rem 0.2rem !important; }
.footer-brand-col { border-bottom: 1px solid var(--border-color); padding-bottom: 0.9rem; margin-bottom: 0.2rem; grid-column: auto !important; }
.footer-brand-col { text-align: center; }
.footer-brand-link { width: 100%; justify-content: center !important; }
.footer-brand-desc { margin: 0 auto 1rem !important; text-align: center; }
.footer-brand-badges { justify-content: center !important; }
.footer-links-col { border-bottom: 1px solid var(--border-color); }
.footer-col-heading { cursor: pointer !important; font-size: 0.65rem; user-select: none; margin-bottom: 0; border-bottom: none !important; padding: 0.75rem 0; }
.footer-col-heading:hover { color: var(--accent-gold); }
.footer-chevron { display: block; }
.footer-col-heading.open .footer-chevron { transform: rotate(180deg); }
.footer-col-links { display: none !important; padding: 0.2rem 0 0.65rem; }
.footer-col-links.open { display: flex !important; }
.footer-col-links.open { align-items: center; text-align: center; }
.footer-col-links.open a { justify-content: center; }
.footer-copyright { padding: 0.75rem 0.5rem; }
}
.stats-bar{background:var(--bg-main);border-bottom:1px solid var(--border-color);padding:0.35rem 0;font-size:0.78rem;color:var(--text-muted);font-weight:700}
.stats-bar .container{display:flex;gap:1.5rem;align-items:center;justify-content:flex-end}
.stat-item{display:inline-flex;align-items:center;gap:0.35rem;white-space:nowrap}
.stat-item i{width:13px;height:13px;color:var(--accent-gold)}
.nav-dropdown{position:relative}
.nav-dropdown-menu{display:none;position:absolute;top:calc(100% + 10px);right:0;background:linear-gradient(160deg,color-mix(in srgb,var(--bg-surface) 94%, rgba(255,255,255,0.1)),color-mix(in srgb,var(--bg-main) 90%, rgba(255,255,255,0.06)));backdrop-filter:blur(calc(var(--glass-blur) + 1px)) saturate(142%);-webkit-backdrop-filter:blur(calc(var(--glass-blur) + 1px)) saturate(142%);border:1px solid color-mix(in srgb,var(--glass-border) 82%,var(--border-color));border-radius:16px;padding:0.55rem;min-width:260px;max-height:min(70vh,520px);overflow-y:auto;box-shadow:0 20px 48px rgba(2,6,23,0.46),0 4px 12px rgba(0,0,0,0.24),inset 0 1px 0 rgba(255,255,255,0.08);z-index:1200;scrollbar-width:none;transform-origin:top right}
.nav-dropdown-menu.open{display:block;animation:navDropIn .18s ease-out}
.nav-dropdown-menu::-webkit-scrollbar{display:none}
.nav-dd-item{display:flex;align-items:center;gap:0.62rem;padding:0.62rem 0.72rem;border-radius:10px;color:var(--text-body);font-size:0.87rem;font-weight:700;cursor:pointer;transition:0.15s;border:1px solid transparent}
.nav-dd-item:hover{background:var(--bg-hover);color:var(--accent-gold);border-color:color-mix(in srgb,var(--accent-gold) 28%, transparent)}
.nav-dd-item i{width:15px;flex-shrink:0}
.icon-tone-indigo{color:#6366f1 !important}
.icon-tone-sky{color:#0ea5e9 !important}
.icon-tone-teal{color:#14b8a6 !important}
.icon-tone-orange{color:#f97316 !important}
.icon-tone-success{color:#10b981 !important}
.icon-tone-warning{color:#f59e0b !important}
.icon-tone-violet{color:#8b5cf6 !important}
.icon-tone-cyan{color:#06b6d4 !important}
.icon-tone-gold{color:#eab308 !important}
.icon-tone-danger{color:#ef4444 !important}
.nav-dd-count{margin-right:auto;color:var(--text-muted);font-size:0.77rem;background:var(--bg-main);border:1px solid var(--border-color);padding:0.1rem 0.45rem;border-radius:999px;font-weight:800}
.nav-dd-count.all{color:var(--accent-gold);background:var(--accent-gold-light);border-color:transparent}
.nav-dd-divider{border:none;border-top:1px solid var(--border-color);margin:0.45rem 0}
.nav-dd-section-title{padding:0.36rem 0.5rem 0.28rem;color:var(--text-muted);font-size:0.73rem;font-weight:800;letter-spacing:0.02em}
.nav-dropdown-trigger{display:flex;align-items:center;gap:0.3rem;cursor:pointer}
.nav-chevron{width:13px;transition:transform 0.2s;margin-right:2px}
@keyframes navDropIn{from{opacity:0;transform:translateY(-6px) scale(0.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.hero-badge{
display:inline-flex;
align-items:center;
justify-content:center;
gap:0.55rem;
background:var(--accent-gold-light);
color:var(--accent-gold);
padding:0.45rem 1.2rem;
border-radius:60px;
font-size:0.92rem;
font-weight:800;
margin:0 auto 1.1rem;
border:1.5px solid rgba(234,179,8,0.32);
box-shadow:0 2px 12px rgba(212,160,23,0.13);
letter-spacing:0.01em;
transition:box-shadow 0.25s, background 0.25s;
}
.hero-primary-cta{
display:inline-flex;
align-items:center;
justify-content:center;
gap:0.55rem;
background:linear-gradient(135deg,var(--accent-gold),var(--accent-gold-hover));
color:var(--text-on-gold);
border:none;
border-radius:2.5rem;
padding:1rem 2.2rem;
font-family:inherit;
font-size:1.08rem;
font-weight:900;
cursor:pointer;
box-shadow:0 8px 32px rgba(234,179,8,0.22);
margin-bottom:0.7rem;
width:90%;
max-width:340px;
transition:box-shadow 0.25s, filter 0.22s, background 0.22s;
}
.hero-primary-cta:hover, .hero-primary-cta:active{
filter:brightness(1.07);
box-shadow:0 12px 36px rgba(234,179,8,0.32);
transform:translateY(-2px) scale(1.025);
}
.hero-value-line{font-size:0.84rem;color:var(--text-muted);font-weight:700;margin-bottom:0.85rem}
.hero-stats-row{display:flex;align-items:center;justify-content:center;gap:0.6rem;flex-wrap:wrap;margin:1.1rem 0 0.6rem;}
.hero-stat-pill{display:inline-flex;align-items:center;gap:0.45rem;border-radius:999px;padding:0.4rem 0.9rem;font-weight:800;font-size:0.84rem;white-space:nowrap;transition:transform 0.2s,box-shadow 0.2s;}
.hero-stat-pill:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,0.15);}
.hero-stat-gold{background:linear-gradient(135deg,rgba(234,179,8,0.15),rgba(99,102,241,0.1));border:1px solid rgba(234,179,8,0.3);color:var(--accent-gold,#eab308);}
.hero-stat-gold i{color:var(--accent-gold,#eab308);}
.hero-stat-green{background:rgba(16,185,129,0.1);border:1px solid rgba(16,185,129,0.3);color:#10b981;}
.hero-stat-green i{color:#10b981;}
.hero-features{display:flex;justify-content:center;gap:0.55rem 0.95rem;flex-wrap:wrap;margin:0.45rem auto 0.3rem;max-width:860px;padding:0.4rem 0.75rem;border:1px solid var(--border-color);border-radius:999px;background:rgba(15,23,42,0.22)}
.hero-feat{display:flex;align-items:center;gap:0.36rem;font-size:0.76rem;font-weight:650;color:var(--text-muted);opacity:0.88;white-space:nowrap}
.hero-feat i{width:16px;color:var(--accent-gold)}
.hero-search-wrap { max-width: 620px; margin: 1.2rem auto 0.95rem; }
.hero-search-bar { padding: 0.8rem 3rem 0.8rem 1.2rem; font-size: 0.96rem; }
.hero-search-icon { left: 1.05rem; width: 18px; }
.hero-cats-bar { gap: 0.45rem; max-width: 900px; margin: 0 auto 0.65rem; }
#hero-cats-bar .filter-btn {
padding: 0.42rem 0.82rem;
font-size: 0.81rem;
line-height: 1.2;
border-radius: 999px;
}
#hero-cats-bar .filter-btn span { font-weight: 700; opacity: 0.88; }
.result-hero{background:linear-gradient(135deg,var(--bg-surface),var(--bg-main));border:1px solid var(--border-color);border-radius:var(--radius-xl);padding:1.85rem 1.4rem;margin-bottom:1rem;text-align:center}
#res-score-num{font-size:4.35rem !important;line-height:1 !important;}
.result-level-badge{display:inline-flex;align-items:center;padding:0.5rem 1.5rem;border-radius:50px;font-size:1rem;font-weight:800;margin:0.8rem 0;border:2px solid}
.result-subscale-hero{max-width:620px;margin:0.45rem auto 0.9rem;padding:0.75rem 0.85rem;border:1px solid rgba(20,184,166,0.28);background:rgba(20,184,166,0.07);border-radius:14px;text-align:right}
.result-subscale-hero-title{display:flex;align-items:center;justify-content:space-between;gap:0.5rem;font-size:0.85rem;font-weight:800;color:#14b8a6;margin-bottom:0.6rem}
.result-subscale-hero-list{display:grid;gap:0.5rem}
.result-subscale-hero-item{display:grid;grid-template-columns:minmax(110px,1fr) 70px;gap:0.65rem;align-items:center}
.result-subscale-hero-label{font-size:0.82rem;color:var(--text-main);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.result-subscale-hero-score{font-size:0.8rem;color:var(--text-muted);font-weight:800;text-align:left;direction:ltr}
.result-subscale-hero-track{position:relative;height:8px;border-radius:999px;background:rgba(148,163,184,0.2);overflow:hidden;margin-top:0.24rem}
.result-subscale-hero-fill{position:absolute;top:0;bottom:0;right:0;border-radius:999px}
.result-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0.55rem;margin-top:1.15rem}
.result-actions .btn{width:100%;min-height:44px;justify-content:center;padding:0.62rem 0.88rem;font-size:0.86rem}
.result-view-switch{display:flex;align-items:center;justify-content:center;gap:0.45rem;margin:0.55rem 0 1rem;flex-wrap:wrap}
.result-view-btn{display:inline-flex;align-items:center;gap:0.35rem;background:var(--bg-surface);border:1px solid var(--border-color);color:var(--text-muted);border-radius:999px;padding:0.48rem 1.05rem;font-family:inherit;font-size:0.82rem;font-weight:700;cursor:pointer;transition:0.2s}
.result-view-btn.active{background:var(--accent-gold-light);border-color:var(--accent-gold);color:var(--accent-gold)}
#view-result.result-mode-concise .result-detail-block{display:none !important}
#view-result.paywall-active .result-detail-block{display:none !important}
/* -- Trust indicators in instructions -- */
.inst-trust-block{display:flex;flex-wrap:wrap;gap:0.42rem 0.7rem;margin:0 0 1rem;padding:0.65rem 0.85rem;background:var(--bg-main);border-radius:10px;border:1px solid var(--border-color);}
.inst-trust-pill{display:inline-flex;align-items:center;gap:0.28rem;font-size:0.76rem;font-weight:700;color:var(--text-muted);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.inst-trust-pill i{width:12px;height:12px;color:var(--accent-gold);flex-shrink:0;}
.inst-privacy-note{display:flex;align-items:center;gap:0.42rem;font-size:0.78rem;font-weight:700;color:#10b981;background:rgba(16,185,129,0.08);border:1px solid rgba(16,185,129,0.22);border-radius:8px;padding:0.48rem 0.75rem;margin-bottom:1.1rem;}
.inst-privacy-note i{width:13px;flex-shrink:0;}
/* -- Unified button variants -- */
.btn-slate{background:#475569;color:white;border:none;}
.btn-slate:hover{background:#334155;}
.btn-indigo{background:linear-gradient(135deg,#6366f1,#4f46e5);color:white;border:none;}
.btn-indigo:hover{filter:brightness(1.06);}
/* -- Reference badge in card footer -- */
.card-ref-badge{display:inline-flex;align-items:center;gap:0.22rem;font-size:0.68rem;font-weight:700;color:var(--text-muted);opacity:0.86;max-width:min(62%,280px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3;}
.card-ref-badge i{width:11px;flex-shrink:0;}
body.density-compact .tests-grid { gap: 0.95rem; }
body.density-compact .test-card { min-height: 380px; padding: 1.05rem; }
body.density-compact .card-title { font-size: 1.05rem; -webkit-line-clamp: 2; min-height: calc(1.42em * 2); }
body.density-compact .card-abbr { font-size: 0.7rem; }
body.density-compact .card-custom-badge { font-size: 0.62rem; padding: 0.16rem 0.48rem; }
body.density-compact .card-desc { font-size: 0.84rem; -webkit-line-clamp: 4; min-height: calc(1.55em * 3); margin-bottom: 0.75rem; }
body.density-compact .card-meta-row { gap: 0.35rem; margin-bottom: 0.75rem; }
body.density-compact .card-meta-pill { font-size: 0.68rem; padding: 0.26rem 0.4rem; }
body.density-compact .card-open-btn { padding: 0.42rem 0.74rem; font-size: 0.75rem; }
#ai-tips-section, #next-steps-section, #norm-comparison-section { padding: 1.2rem !important; }
#ai-tips-section #res-tips { font-size: 0.94rem !important; line-height: 1.7 !important; }
body.density-comfortable .hero { padding: 4.5rem 0 5rem; }
body.density-comfortable .hero h2 { font-size: clamp(2.2rem, 5vw, 3.8rem); margin-bottom: 1rem; }
body.density-comfortable .hero p { font-size: 1.1rem; margin: 0 auto 3rem; }
body.density-comfortable .browse-section { padding: 4rem 0; }
body.density-comfortable .filter-btn { padding: 0.6rem 1.2rem; font-size: 0.9rem; }
body.density-comfortable .tests-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; }
body.density-comfortable .test-card { padding: 1.8rem; }
body.density-comfortable .card-title { font-size: 1.4rem; }
body.density-comfortable .card-desc { font-size: 0.95rem; margin-bottom: 1.5rem; }
body.density-comfortable .hero-search-wrap { max-width: 660px; margin: 2rem auto 1.5rem; }
body.density-comfortable .hero-search-bar { padding: 1rem 3.5rem 1rem 1.5rem; font-size: 1.05rem; }
body.density-comfortable .hero-search-icon { left: 1.3rem; width: 20px; }
body.density-comfortable .hero-cats-bar { gap: 0.5rem; max-width: 800px; }
body.density-comfortable #hero-cats-bar .filter-btn { padding: 0.6rem 1.2rem; font-size: 0.9rem; }
body.density-comfortable .report-section { padding: 2rem; margin-bottom: 1.5rem; }
body.density-comfortable .result-hero { padding: 2.5rem 2rem; margin-bottom: 1.5rem; }
body.density-comfortable .result-actions { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap: 0.8rem; margin-top: 2rem; }
body.density-comfortable .result-actions .btn { width:100%; min-height:46px; padding: 0.8rem 1.1rem; font-size: 0.98rem; }
@media (min-width: 900px) {
.tests-grid,
body.density-comfortable .tests-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.next-steps-card{background:linear-gradient(135deg,rgba(99,102,241,0.08),rgba(139,92,246,0.05));border:1px solid rgba(99,102,241,0.2);border-radius:var(--radius-lg);padding:1.8rem;margin-bottom:1.5rem}
.next-steps-card h3{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:1.4rem;color:#818cf8;margin-bottom:1.2rem;display:flex;align-items:center;gap:0.6rem}
.next-step-item{display:flex;align-items:flex-start;gap:0.8rem;margin-bottom:0.8rem}
.next-step-num{background:rgba(99,102,241,0.2);color:#818cf8;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:0.78rem;font-weight:800;flex-shrink:0;margin-top:2px}
.medical-disclaimer{background:rgba(234,179,8,0.06);border-top:1px solid rgba(234,179,8,0.2);padding:0.7rem 0;text-align:center;font-size:0.8rem;color:var(--text-muted);font-weight:600}
.inner-page{max-width:860px;margin:0 auto;padding:3rem 1.5rem}
.inner-page-header{text-align:center;margin-bottom:3rem;padding-bottom:2rem;border-bottom:1px solid var(--border-color)}
.inner-page-header h1{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:2.8rem;font-weight:700;margin:0 0 0.5rem}
.inner-header-cta-wrap{display:flex;justify-content:center;margin-top:1rem}
.inner-primary-cta{display:inline-flex;align-items:center;justify-content:center;gap:0.45rem;background:linear-gradient(135deg,var(--accent-gold),var(--accent-gold-hover));color:var(--text-on-gold);border:none;border-radius:999px;padding:0.64rem 1.2rem;font-family:inherit;font-size:0.88rem;font-weight:800;cursor:pointer;box-shadow:0 10px 20px rgba(234,179,8,0.25)}
.inner-primary-cta:hover{filter:brightness(1.03);transform:translateY(-1px)}
.inner-section{margin-bottom:2.5rem}
.inner-section h2{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:1.6rem;font-weight:700;color:var(--accent-gold);margin-bottom:1rem;display:flex;align-items:center;gap:0.6rem}
.inner-section h2 i{width:22px}
.inner-section p,.inner-section li{color:var(--text-body);line-height:1.9;font-size:1rem;font-weight:500}
.inner-section ul{padding-right:1.5rem}
.inner-section ul li{margin-bottom:0.5rem}
.how-steps{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1.5rem;margin-top:1.5rem}
.how-step{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:1.8rem 1.5rem;text-align:center}
.how-step-num{width:40px;height:40px;background:var(--accent-gold);color:var(--text-on-gold);border-radius:50%;display:grid;place-items:center;font-size:1.1rem;font-weight:800;margin:0 auto 1rem}
.how-step h3{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:1.2rem;font-weight:700;margin-bottom:0.5rem}
.how-step p{font-size:0.9rem;color:var(--text-muted);font-weight:600;margin:0}
.about-values{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1.2rem;margin-top:1.5rem}
.about-value{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:1.5rem;text-align:center}
.about-value h4{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:1.1rem;font-weight:700;margin:0.6rem 0 0.3rem}
.about-value p{font-size:0.82rem;color:var(--text-muted);font-weight:600;margin:0}
.faq-item{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-lg);margin-bottom:0.8rem;overflow:hidden}
.faq-q{display:flex;justify-content:space-between;align-items:center;padding:1.2rem 1.5rem;cursor:pointer;font-weight:700;font-size:1rem;transition:0.2s}
.faq-q:hover{color:var(--accent-gold)}
.faq-q i{width:18px;flex-shrink:0;transition:transform 0.3s;color:var(--accent-gold)}
.faq-a{padding:0 1.5rem;max-height:0;overflow:hidden;transition:max-height 0.3s,padding 0.3s;font-size:0.95rem;color:var(--text-body);line-height:1.8}
.faq-item.open .faq-a{max-height:300px;padding:0 1.5rem 1.2rem}
.faq-item.open .faq-q i{transform:rotate(180deg)}
.faq-item.open .faq-q{color:var(--accent-gold)}
/* --- ????? ?????? ?????? --- */
[data-theme="light"] body { background-color: #F0F4FF !important; color: #1E293B !important; }
[data-theme="light"] header { background: rgba(255,255,255,0.95) !important; border-bottom-color: #E2E8F0 !important; box-shadow: 0 1px 20px rgba(99,102,241,0.08) !important; }
[data-theme="light"] .stats-bar { background: linear-gradient(135deg,#6366F1,#4F46E5) !important; }
[data-theme="light"] .brand h1 { color: #1E1B4B !important; }
[data-theme="light"] .brand p { color: #6366F1 !important; }
[data-theme="light"] .brand-icon,
[data-theme="light"] .splash-badge-icon,
[data-theme="light"] .about-brand-icon,
[data-theme="light"] .footer-brand-icon { opacity: 0.95; }
[data-theme="light"] .nav-link { color: #475569 !important; }
[data-theme="light"] .nav-link:hover { color: #6366F1 !important; background: #EEF2FF !important; }
[data-theme="light"] .nav-dropdown-menu,
body.light .nav-dropdown-menu { background: linear-gradient(160deg, rgba(255,255,255,0.98), rgba(241,248,255,0.94)) !important; border-color: rgba(148,163,184,0.38) !important; box-shadow: 0 16px 40px rgba(15,23,42,0.16), 0 2px 8px rgba(0,0,0,0.07), inset 0 1px 0 rgba(255,255,255,0.7) !important; backdrop-filter: blur(15px) saturate(145%) !important; -webkit-backdrop-filter: blur(15px) saturate(145%) !important; }
[data-theme="light"] #dl-menu,
body.light #dl-menu { background: rgba(255,255,255,0.96) !important; border-color: rgba(148,163,184,0.32) !important; box-shadow: 0 16px 40px rgba(15,23,42,0.14) !important; }
[data-theme="light"] .nav-dd-item { color: #334155 !important; }
[data-theme="light"] .nav-dd-item:hover { background: #EEF2FF !important; color: #6366F1 !important; }
[data-theme="light"] .hero { background: linear-gradient(135deg,#EEF2FF 0%,#F0F4FF 50%,#E0E7FF 100%) !important; }
[data-theme="light"] .hero h2 { color: #1E1B4B !important; }
[data-theme="light"] .hero h2 span { color: #4F46E5 !important; }
[data-theme="light"] .hero p { color: #475569 !important; }
[data-theme="light"] .hero-badge { background: rgba(99,102,241,0.1) !important; color: #4F46E5 !important; border-color: rgba(99,102,241,0.3) !important; }
[data-theme="light"] .hero-feat { color: #64748B !important; }
[data-theme="light"] .hero-feat i { color: #6366F1 !important; }
[data-theme="light"] .hero-search-bar { background: #FFFFFF !important; border-color: #C7D2FE !important; color: #1E293B !important; box-shadow: 0 4px 30px rgba(99,102,241,0.12) !important; }
[data-theme="light"] .hero-search-bar::placeholder { color: #94A3B8 !important; }
[data-theme="light"] .hero-search-bar:focus { border-color: #6366F1 !important; }
[data-theme="light"] .hero-search-icon { color: #6366F1 !important; }
[data-theme="light"] .filter-btn { background: #FFFFFF !important; border-color: #E2E8F0 !important; color: #64748B !important; }
[data-theme="light"] .filter-btn:hover { border-color: #6366F1 !important; color: #6366F1 !important; background: #EEF2FF !important; }
[data-theme="light"] .filter-btn.active { background: #6366F1 !important; color: #FFFFFF !important; border-color: #6366F1 !important; }
[data-theme="light"] .test-card { background: #FFFFFF !important; border-color: #E2E8F0 !important; box-shadow: 0 2px 12px rgba(99,102,241,0.07) !important; }
[data-theme="light"] .test-card:hover { border-color: #A5B4FC !important; box-shadow: 0 12px 40px rgba(99,102,241,0.18) !important; }
[data-theme="light"] .test-card h3 { color: #1E293B !important; }
[data-theme="light"] .test-card p { color: #475569 !important; }
[data-theme="light"] .card-meta span { color: #94A3B8 !important; }
[data-theme="light"] .view-section { background: #F0F4FF !important; }
[data-theme="light"] .report-section { background: #FFFFFF !important; border-color: #E2E8F0 !important; }
[data-theme="light"] .result-hero { background: linear-gradient(135deg,#FFFFFF,#F0F4FF) !important; border-color: #E2E8F0 !important; }
[data-theme="light"] .btn-primary { background: linear-gradient(135deg, var(--accent-primary), var(--accent-primary-hover)) !important; border-color: var(--accent-primary) !important; color: var(--text-on-primary) !important; }
[data-theme="light"] .btn-outline { border-color: #D6DDE7 !important; color: #334155 !important; }
[data-theme="light"] footer { background: #EEF2FF !important; border-top-color: #C7D2FE !important; }
[data-theme="light"] .medical-disclaimer { background: rgba(99,102,241,0.04) !important; border-color: rgba(99,102,241,0.15) !important; color: #475569 !important; }
[data-theme="light"] .inner-page-header { border-color: #E2E8F0 !important; }
[data-theme="light"] .inner-page-header h1 { color: #1E1B4B !important; }
[data-theme="light"] .inner-section h2 { color: #4F46E5 !important; }
[data-theme="light"] .inner-section p, [data-theme="light"] .inner-section li { color: #374151 !important; }
[data-theme="light"] .faq-item { background: #FFFFFF !important; border-color: #E2E8F0 !important; }
[data-theme="light"] .faq-q { color: #1E293B !important; }
[data-theme="light"] .faq-q i { color: #6366F1 !important; }
[data-theme="light"] .faq-item.open .faq-q { color: #6366F1 !important; }
[data-theme="light"] .faq-a { color: #374151 !important; }
[data-theme="light"] .how-step { background: #FFFFFF !important; border-color: #E2E8F0 !important; }
[data-theme="light"] .how-step h3 { color: #1E1B4B !important; }
[data-theme="light"] .how-step-num { background: #6366F1 !important; }
[data-theme="light"] .about-value { background: #FFFFFF !important; border-color: #E2E8F0 !important; }
[data-theme="light"] .about-value h4 { color: #1E1B4B !important; }
[data-theme="light"] .next-steps-card { background: linear-gradient(135deg,rgba(99,102,241,0.08),rgba(99,102,241,0.04)) !important; border-color: rgba(99,102,241,0.2) !important; }
[data-theme="light"] .next-steps-card h3 { color: #6366F1 !important; }
[data-theme="light"] .admin-lock-box { background: #FFFFFF !important; border-color: #E2E8F0 !important; }
[data-theme="light"] .admin-lock-box h2 { color: #1E1B4B !important; }
[data-theme="light"] .admin-lock-box p { color: #64748B !important; }
[data-theme="light"] #admin-pw-input, [data-theme="light"] #admin-otp-input { background: #F8FAFF !important; border-color: #E2E8F0 !important; color: #1E293B !important; }
[data-theme="light"] #srch-drop { background: #FFFFFF !important; border-color: #E2E8F0 !important; }
[data-theme="light"] .srch-item:hover { background: #EEF2FF !important; }
[data-theme="light"] .section-title { color: #1E1B4B !important; }
[data-theme="light"] .theme-toggle, [data-theme="light"] .density-toggle { border-color: #C7D2FE !important; color: #6366F1 !important; }
@keyframes spin{to{transform:rotate(360deg)}}
.theme-toggle, .density-toggle {
width: 36px; height: 36px;
border-radius: 50%;
border: 1px solid var(--border-color);
background: var(--bg-surface);
color: var(--text-muted);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: 0.2s;
flex-shrink: 0;
}
.theme-toggle:hover, .density-toggle:hover { border-color: var(--accent-gold); color: var(--accent-gold); }
/* Hero Search Bar */
.hero-search-wrap {
max-width: 620px;
margin: 1.2rem auto 0.95rem;
position: relative;
}
.hero-search-bar {
width: 100%;
box-sizing: border-box;
padding: 0.8rem 3rem 0.8rem 1.2rem;
border-radius: 50px;
border: 2px solid var(--hero-search-border);
background: var(--hero-search-bg);
color: var(--hero-search-text);
font-size: 0.96rem;
font-family: inherit;
font-weight: 500;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
box-shadow: 0 4px 30px rgba(0,0,0,0.2);
backdrop-filter: blur(8px);
}
.hero-search-bar::placeholder { color: var(--text-muted); }
.hero-search-bar:focus {
border-color: var(--accent-gold);
box-shadow: 0 4px 30px rgba(234,179,8,0.2);
}
.hero-search-icon {
position: absolute;
left: 1.05rem;
top: 50%;
transform: translateY(-50%);
color: var(--accent-gold);
width: 18px;
pointer-events: none;
}
.hero-cats-bar {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
justify-content: center;
max-width: 900px;
margin: 0 auto;
}
/* ????? ????? */
.search-wrapper { position: relative; }
.srch-item { display:flex;align-items:center;gap:0.75rem;padding:0.7rem 1rem;cursor:pointer;transition:background 0.15s;border-bottom:1px solid rgba(255,255,255,0.04); }
.srch-item:hover { background:var(--accent-gold-light); }
@keyframes dropIn { from{opacity:0;transform:translateY(-6px);} to{opacity:1;transform:translateY(0);} }
/* ????? ????? */
.search-wrapper { position: relative; }
.search-dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
left: 0;
background: var(--bg-surface);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
box-shadow: 0 20px 60px rgba(0,0,0,0.4);
z-index: 9999;
overflow: hidden;
max-height: 420px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--border-color) transparent;
animation: dropIn 0.15s ease;
}
@keyframes dropIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
.search-section-title {
font-size: 0.7rem;
font-weight: 800;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 1.2px;
padding: 0.7rem 1rem 0.3rem;
border-bottom: 1px solid var(--border-color);
background: var(--bg-main);
}
.search-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.7rem 1rem;
cursor: pointer;
transition: background 0.15s;
border-bottom: 1px solid rgba(255,255,255,0.04);
}
.search-item:hover, .search-item.active {
background: var(--accent-gold-light);
}
.search-item-icon {
width: 36px;
height: 36px;
border-radius: 9px;
display: grid;
place-items: center;
flex-shrink: 0;
font-size: 0.7rem;
font-weight: 800;
}
.search-item-info { flex: 1; min-width: 0; }
.search-item-title {
font-size: 0.9rem;
font-weight: 700;
color: var(--text-main);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.search-item-title mark {
background: rgba(234,179,8,0.25);
color: var(--accent-gold);
border-radius: 3px;
padding: 0 2px;
font-weight: 800;
}
.search-item-meta {
font-size: 0.76rem;
color: var(--text-muted);
font-weight: 600;
margin-top: 1px;
}
.search-item-tag {
font-size: 0.7rem;
font-weight: 700;
padding: 0.15rem 0.5rem;
border-radius: 50px;
white-space: nowrap;
}
.search-empty {
padding: 1.5rem 1rem;
text-align: center;
color: var(--text-muted);
font-size: 0.88rem;
font-weight: 600;
}
.search-footer {
padding: 0.6rem 1rem;
background: var(--bg-main);
border-top: 1px solid var(--border-color);
font-size: 0.75rem;
color: var(--text-muted);
font-weight: 600;
display: flex;
align-items: center;
gap: 0.5rem;
}
.search-kbd {
background: var(--bg-surface);
border: 1px solid var(--border-color);
border-radius: 4px;
padding: 1px 5px;
font-size: 0.7rem;
font-weight: 700;
}
#search-input:focus { outline: none; }
.search-box.focused { border-color: var(--accent-gold) !important; box-shadow: 0 0 0 3px rgba(234,179,8,0.12); }
.admin-lock-overlay{position:fixed;inset:0;background:rgba(10,15,28,0.95);backdrop-filter:blur(8px);z-index:9998;display:flex;align-items:center;justify-content:center;}
.admin-lock-box{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-xl);padding:2.5rem 2rem;max-width:380px;width:90%;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,0.6);}
.admin-lock-icon{width:64px;height:64px;background:var(--accent-gold-light);border:2px solid var(--accent-gold);border-radius:16px;display:grid;place-items:center;margin:0 auto 1.2rem;}
.admin-lock-box h2{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:1.8rem;margin:0 0 0.3rem;}
.admin-lock-box p{color:var(--text-muted);font-size:0.9rem;font-weight:600;margin:0 0 1.8rem;}
.admin-lock-error{display:none;background:var(--state-danger-bg);border:1px solid var(--state-danger-border);color:var(--state-danger-text);border-radius:8px;padding:0.6rem 1rem;font-size:0.85rem;font-weight:700;margin-bottom:1rem;}
.admin-lock-input{width:100%;box-sizing:border-box;padding:0.85rem 1rem;border-radius:10px;border:1px solid var(--border-color);background:var(--bg-main);color:var(--text-main);font-family:'IBM Plex Sans Arabic',sans-serif;font-size:1rem;outline:none;margin-bottom:1rem;text-align:center;}
.admin-otp-remember-wrap{display:flex;align-items:center;gap:0.45rem;justify-content:center;color:var(--text-muted);font-size:0.82rem;font-weight:700;margin:-0.45rem 0 0.9rem;cursor:pointer;user-select:none;}
.admin-otp-remember-wrap input{accent-color:var(--accent-gold);cursor:pointer;}
/* --- ????? ??????? ?????? --- */
.personal-report-header {
text-align: center;
padding: 2.2rem 1.8rem;
border: 1px solid rgba(234,179,8,0.18);
border-bottom: 3px solid var(--accent-gold);
margin-bottom: 1.4rem;
border-radius: 18px;
background:
radial-gradient(circle at top, rgba(234,179,8,0.12), transparent 48%),
linear-gradient(180deg, rgba(30,41,59,0.92), rgba(15,23,42,0.88));
box-shadow: 0 22px 50px rgba(2,6,23,0.24);
}
.personal-report-header .logo-line {
display: flex; align-items: center; justify-content: center;
gap: 0.6rem; margin-bottom: 0.5rem;
}
.personal-report-header .logo-line::after {
content: 'PERSONAL REPORT';
font-size: 0.65rem;
font-weight: 800;
letter-spacing: 0.8px;
color: #e2e8f0;
border: 1px solid rgba(226,232,240,0.35);
border-radius: 999px;
padding: 2px 8px;
margin-right: 6px;
}
.score-showcase {
background: linear-gradient(135deg, var(--bg-surface), var(--bg-main));
border: 2px solid var(--border-color);
border-radius: 20px;
padding: 2rem;
text-align: center;
margin: 1.5rem 0;
position: relative;
overflow: hidden;
}
.score-showcase::before {
content: '';
position: absolute; inset: 0;
background: radial-gradient(circle at 50% 0%, var(--accent-gold-light), transparent 70%);
}
.score-ring {
width: 140px; height: 140px;
border-radius: 50%;
border: 8px solid var(--border-color);
display: grid; place-items: center;
margin: 0 auto 1rem;
position: relative;
}
.score-number { font-size: 2.5rem; font-weight: 800; }
.score-label {
display: inline-block;
padding: 0.4rem 1.5rem;
border-radius: 50px;
font-size: 1.1rem;
font-weight: 800;
border: 2px solid;
margin-bottom: 0.5rem;
}
.report-card {
background: linear-gradient(180deg, rgba(30,41,59,0.96), rgba(15,23,42,0.98));
border: 1px solid rgba(148,163,184,0.14);
border-radius: 18px;
padding: 1.35rem 1.4rem;
margin-bottom: 1rem;
box-shadow: 0 20px 40px rgba(2,6,23,0.18);
}
.report-card-title {
font-size: 1.02rem;
font-weight: 800;
color: var(--accent-gold);
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1rem;
padding-bottom: 0.6rem;
border-bottom: 1px solid var(--border-color);
letter-spacing: 0.2px;
}
.tip-item {
display: flex; align-items: flex-start; gap: 0.6rem;
padding: 0.6rem 0;
border-bottom: 1px solid var(--border-color);
font-size: 0.95rem; line-height: 1.7;
}
.tip-item:last-child { border-bottom: none; }
.tip-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--accent-gold);
flex-shrink: 0; margin-top: 7px;
}
.disclaimer-box {
background: rgba(234,179,8,0.06);
border: 1px solid rgba(234,179,8,0.2);
border-radius: 12px;
padding: 1rem 1.2rem;
font-size: 0.85rem;
color: var(--text-muted);
font-weight: 600;
margin-top: 1rem;
display: flex; align-items: flex-start; gap: 0.6rem;
}
.personal-kpi-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.8rem;
margin-bottom: 1rem;
}
.personal-kpi {
background: linear-gradient(135deg, rgba(15,23,42,0.92), rgba(30,41,59,0.82));
border: 1px solid rgba(212,160,23,0.16);
border-radius: 14px;
padding: 0.95rem 0.85rem;
text-align: center;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
.personal-kpi-label {
color: var(--text-muted);
font-size: 0.78rem;
font-weight: 700;
margin-bottom: 0.35rem;
}
.personal-kpi-value {
color: #F8FAFC;
font-size: 1.22rem;
font-weight: 900;
}
.personal-summary-text {
color: var(--text-body);
font-size: 0.96rem;
line-height: 2;
margin-bottom: 0.8rem;
font-weight: 600;
}
#pr-functioning-band span {
box-shadow: 0 10px 24px rgba(2,6,23,0.14);
}
.clinical-mini-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.7rem;
margin: 0.8rem 0 0.4rem;
}
.clinical-mini-card {
border: 1px solid rgba(15,23,42,0.08);
border-radius: 12px;
padding: 0.8rem 0.9rem;
background: linear-gradient(180deg, #FFFFFF, #F8FAFC);
box-shadow: 0 8px 18px rgba(15,23,42,0.06);
}
.clinical-mini-label {
color: #64748B;
font-size: 0.76rem;
font-weight: 700;
margin-bottom: 0.2rem;
}
.clinical-mini-value {
color: #0F172A;
font-size: 1rem;
font-weight: 800;
line-height: 1.4;
}
.clinical-action-item {
display: flex;
align-items: flex-start;
gap: 0.45rem;
border-bottom: 1px dashed #CBD5E1;
padding: 0.38rem 0;
font-size: 0.88rem;
color: #334155;
line-height: 1.7;
}
.clinical-action-item:last-child { border-bottom: none; }
@media (max-width: 860px) {
.personal-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.clinical-mini-grid { grid-template-columns: 1fr; }
}
/* --- ????? ?????? ??????? --- */
.clinical-report-wrap {
font-family: 'IBM Plex Sans Arabic', sans-serif;
direction: rtl;
color: #1a1a1a;
background: linear-gradient(180deg, #ffffff, #f8fafc);
border-radius: 18px;
padding: 1.1rem;
border: 1px solid rgba(15,23,42,0.08);
box-shadow: 0 24px 60px rgba(15,23,42,0.08);
}
.clinical-header-bar {
background: linear-gradient(135deg, #0F172A, #1E293B 58%, #334155);
color: white;
padding: 1.7rem 1.8rem;
border-radius: 14px;
margin-bottom: 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 20px 40px rgba(15,23,42,0.18);
position: relative;
}
.clinical-header-bar::after {
content: 'CLINICAL USE ONLY';
position: absolute;
left: 16px;
top: 12px;
font-size: 0.62rem;
font-weight: 900;
letter-spacing: 1px;
color: #f8fafc;
border: 1px solid rgba(248,250,252,0.42);
border-radius: 999px;
padding: 2px 9px;
background: rgba(15,23,42,0.35);
}
.clinical-section {
border: 1px solid rgba(51,65,85,0.18);
border-radius: 14px;
margin-bottom: 1rem;
overflow: hidden;
background: #fff;
box-shadow: 0 10px 26px rgba(15,23,42,0.05);
}
.clinical-section-head {
background: linear-gradient(90deg, #0F172A, #1E293B);
color: #EAB308;
padding: 0.7rem 1.2rem;
font-weight: 800;
font-size: 0.9rem;
letter-spacing: 0.5px;
display: flex; align-items: center; gap: 0.5rem;
}
.clinical-section-body { padding: 1.2rem 1.25rem; }
.clinical-field {
display: flex;
margin-bottom: 0.6rem;
font-size: 0.92rem;
line-height: 1.8;
}
.clinical-field-label {
font-weight: 700;
color: #475569;
min-width: 140px;
flex-shrink: 0;
}
.clinical-field-value {
color: #1E293B;
border-bottom: 1px dashed #CBD5E1;
flex: 1;
padding-bottom: 2px;
}
.score-summary-bar {
background: linear-gradient(180deg, #F8FAFC, #FFFFFF);
border: 1px solid #E2E8F0;
border-radius: 14px;
padding: 1rem 1.5rem;
display: flex;
align-items: center;
gap: 2rem;
margin: 0.8rem 0;
}
.score-big { font-size: 3rem; font-weight: 900; line-height: 1; }
.signature-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
margin-top: 0.5rem;
}
.signature-field {
border-bottom: 1.5px solid #334155;
padding-bottom: 1.5rem;
font-size: 0.9rem;
font-weight: 600;
color: #475569;
}
@media (max-width: 860px) {
.clinical-header-bar {
flex-direction: column;
align-items: flex-start;
gap: 0.8rem;
}
.score-summary-bar {
flex-direction: column;
align-items: flex-start;
gap: 0.9rem;
}
.signature-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
}
@media print {
@page { margin: 1cm; }
body { background: white !important; color: black !important; font-family: 'IBM Plex Sans Arabic', sans-serif !important; }
header, footer, .test-actions, .print-hide, .browse-section, .hero, .btn, .zen-btn { display: none !important; }
body > *:not(#view-result) { display: none !important; }
#view-result { display: block !important; opacity: 1 !important; }
.report-container { max-width: 100% !important; padding: 0 !important; margin: 0 !important; }
.clinical-report-wrap { box-shadow: none !important; border: none !important; padding: 0 !important; background: white !important; }
.report-card { box-shadow: none !important; background: white !important; border-color: #E2E8F0 !important; }
.personal-report-header { box-shadow: none !important; background: white !important; color: black !important; }
body.print-clinical .clinical-only { display: block !important; }
body.print-personal .personal-only { display: block !important; }
body.print-clinical .personal-tips-section { display: none !important; }
.report-header { display: none !important; }
.report-section { border: none !important; border-bottom: 2px solid #ddd !important; box-shadow: none !important; background: transparent !important; padding: 1rem 0 !important; margin-bottom: 1.5rem !important; border-radius: 0 !important; page-break-inside: avoid; }
.report-section h3 { color: black !important; border-bottom: 2px solid black !important; padding-bottom: 5px !important; margin-bottom: 15px !important; font-size: 1.4rem !important; text-align: right !important; }
.chart-wrapper { max-width: 250px !important; height: 180px !important; margin: 0 auto !important; }
#res-interp, #res-tips { color: black !important; font-size: 1.1rem !important; }
.answers-wrapper { max-height: none !important; overflow: visible !important; border: 1px solid black !important; }
.answers-table th { background: #f4f4f4 !important; color: black !important; border-bottom: 2px solid black !important; }
.answers-table td { color: black !important; border-bottom: 1px solid #ccc !important; }
.crisis-box { background: white !important; border: 2px solid black !important; color: black !important; }
}
/* --- ???? ????? ?????? --- */
[data-theme="light"] footer { background: #EEF2FF !important; border-top: 1px solid #C7D2FE !important; }
[data-theme="light"] footer span, [data-theme="light"] footer p,
[data-theme="light"] footer div { color: #374151 !important; }
[data-theme="light"] footer a { color: #4B5563 !important; }
[data-theme="light"] footer a:hover { color: #6366F1 !important; }
[data-theme="light"] footer h4 { color: #1E1B4B !important; }
[data-theme="light"] footer .brand-text h1,
[data-theme="light"] footer [style*="font-family:'IBM"] { color: #1E1B4B !important; }
[data-theme="light"] footer [style*="color:var(--text-muted)"] { color: #6B7280 !important; }
[data-theme="light"] footer [style*="color:var(--text-main)"] { color: #1E293B !important; }
[data-theme="light"] footer [style*="color:var(--accent-gold)"] { color: #4F46E5 !important; }
[data-theme="light"] footer [style*="border-right:1px solid var(--border-color)"] { border-right-color: #DDD6FE !important; }
[data-theme="light"] footer [style*="border-top:1px solid var(--border-color)"] { border-top-color: #DDD6FE !important; }
[data-theme="light"] footer table { color: #374151 !important; }
[data-theme="light"] footer td { color: #374151 !important; }
/* ??????? ?? ?????? */
[data-theme="light"] footer [style*="color:#10b981"] { color: #059669 !important; }
[data-theme="light"] footer [style*="color:#818cf8"] { color: #6366F1 !important; }
[data-theme="light"] footer [style*="color:#eab308"] { color: #D97706 !important; }
[data-theme="light"] footer [style*="background:rgba(16,185,129"] { background: rgba(5,150,105,0.12) !important; }
[data-theme="light"] footer [style*="background:rgba(99,102,241"] { background: rgba(99,102,241,0.12) !important; }
[data-theme="light"] footer [style*="background:rgba(234,179,8"] { background: rgba(217,119,6,0.12) !important; }
/* ???? ??????? ????? */
[data-theme="light"] .medical-disclaimer { background: rgba(99,102,241,0.06) !important; border-top: 1px solid rgba(99,102,241,0.2) !important; color: #374151 !important; }
[data-theme="light"] .medical-disclaimer i { color: #6366F1 !important; }
/* ???? ?????? */
[data-theme="light"] footer [style*="border-top:1px solid var(--border-color)"] { border-top-color: #C7D2FE !important; }
/* --- ????? ???? ????? ?????? --- */
[data-theme="light"] .view-section,
[data-theme="light"] #view-instructions,
[data-theme="light"] #view-test,
[data-theme="light"] #view-result,
[data-theme="light"] #view-about,
[data-theme="light"] #view-how,
[data-theme="light"] #view-faq,
[data-theme="light"] #view-privacy,
[data-theme="light"] #view-usage-policy,
[data-theme="light"] #view-admin { background: #F0F4FF !important; color: #1E293B !important; }
[data-theme="light"] .instructions-card {
background: #FFFFFF !important;
border-color: #6366F1 !important;
box-shadow: 0 8px 40px rgba(99,102,241,0.15) !important;
}
[data-theme="light"] .inst-header { color: #4F46E5 !important; border-color: #E2E8F0 !important; }
[data-theme="light"] .inst-header i { color: #6366F1 !important; }
[data-theme="light"] #inst-title { color: #1E1B4B !important; }
[data-theme="light"] #inst-directions { color: #374151 !important; }
[data-theme="light"] .q-card-container {
background: #FFFFFF !important;
border-color: #E2E8F0 !important;
box-shadow: 0 4px 20px rgba(99,102,241,0.1) !important;
}
[data-theme="light"] .q-text { color: #1E293B !important; }
[data-theme="light"] #q-num { color: #6B7280 !important; }
[data-theme="light"] #prog-txt { color: #6B7280 !important; }
[data-theme="light"] #test-title-top { color: #1E1B4B !important; }
[data-theme="light"] .opt-btn {
background: #F8FAFF !important;
border-color: #E2E8F0 !important;
color: #374151 !important;
}
[data-theme="light"] .opt-btn:hover {
border-color: #6366F1 !important;
background: #EEF2FF !important;
color: #6366F1 !important;
}
[data-theme="light"] .opt-btn.selected {
background: #6366F1 !important;
border-color: #6366F1 !important;
color: #FFFFFF !important;
}
[data-theme="light"] #prog-fill { background: #6366F1 !important; }
[data-theme="light"] .prog-bar { background: #E2E8F0 !important; }
[data-theme="light"] #btn-prev { border-color: #E2E8F0 !important; color: #64748B !important; }
[data-theme="light"] #btn-next { background: #6366F1 !important; border-color: #6366F1 !important; }
[data-theme="light"] .q-option {
background: #F8FAFF !important;
border-color: #E2E8F0 !important;
color: #374151 !important;
}
[data-theme="light"] .q-option:hover { border-color: #6366F1 !important; background: #EEF2FF !important; }
[data-theme="light"] .q-option.selected { background: #6366F1 !important; border-color: #6366F1 !important; color: #FFFFFF !important; }
[data-theme="light"] .report-section {
background: #FFFFFF !important;
border-color: #E2E8F0 !important;
box-shadow: 0 2px 12px rgba(99,102,241,0.07) !important;
}
[data-theme="light"] .report-section h3 { color: #1E1B4B !important; }
[data-theme="light"] .result-hero { background: linear-gradient(135deg,#FFFFFF,#EEF2FF) !important; border-color: #E2E8F0 !important; }
[data-theme="light"] #res-score-num { color: #4F46E5 !important; }
[data-theme="light"] .next-steps-card { background: linear-gradient(135deg,rgba(99,102,241,0.08),rgba(99,102,241,0.03)) !important; border-color: rgba(99,102,241,0.2) !important; }
[data-theme="light"] .next-steps-card h3 { color: #6366F1 !important; }
[data-theme="light"] .next-step-num { background: rgba(99,102,241,0.15) !important; color: #6366F1 !important; }
[data-theme="light"] .admin-panel { background: #FFFFFF !important; border-color: #E2E8F0 !important; }
[data-theme="light"] .admin-tabs { background: #F0F4FF !important; border-color: #E2E8F0 !important; }
[data-theme="light"] .admin-tab { color: #64748B !important; }
[data-theme="light"] .admin-tab.active { background: #6366F1 !important; color: #FFFFFF !important; border-color: #6366F1 !important; }
[data-theme="light"] .admin-section { background: transparent !important; }
[data-theme="light"] .form-input,
[data-theme="light"] .form-select,
[data-theme="light"] .form-textarea,
[data-theme="light"] textarea { background: #F8FAFF !important; border-color: #E2E8F0 !important; color: #1E293B !important; }
[data-theme="light"] .form-input:focus,
[data-theme="light"] .form-select:focus,
[data-theme="light"] textarea:focus { border-color: #6366F1 !important; }
[data-theme="light"] .form-label { color: #374151 !important; font-weight: 600; }
[data-theme="light"] .items-box,
[data-theme="light"] .opts-box,
[data-theme="light"] .tips-box,
[data-theme="light"] .subscales-box { background: #F8FAFF !important; border-color: #E2E8F0 !important; }
[data-theme="light"] .zen-btn { background: #FFFFFF !important; border-color: #E2E8F0 !important; color: #64748B !important; }
[data-theme="light"] .zen-btn:hover { border-color: #6366F1 !important; color: #6366F1 !important; }
[data-theme="light"] .cat-preset-btn { background: #FFFFFF !important; border-color: #E2E8F0 !important; color: #64748B !important; }
[data-theme="light"] .cat-preset-btn:hover { border-color: #6366F1 !important; color: #6366F1 !important; background: #EEF2FF !important; }
[data-theme="light"] .saved-test-item { background: #FFFFFF !important; border-color: #E2E8F0 !important; }
[data-theme="light"] .saved-test-item:hover { background: #EEF2FF !important; }
[data-theme="light"] .scale-manage-card { background: #FFFFFF !important; border-color: #E2E8F0 !important; }
[data-theme="light"] .scale-manage-toggle:hover { background: #F8FAFF !important; }
[data-theme="light"] .inner-page { color: #1E293B !important; }
[data-theme="light"] .inner-page p { color: #374151 !important; }
[data-theme="light"] .inner-page li { color: #374151 !important; }
[data-theme="light"] .how-step p { color: #64748B !important; }
[data-theme="light"] .about-value p { color: #64748B !important; }
/* ????? ??????? ???????? ?????? ??????? */
[data-theme="light"] { background-color: #F0F4FF; }
/* --- ?????? ??????? --- */
.share-bar {
display: flex; flex-wrap: wrap; gap: 0.7rem;
align-items: center; justify-content: center;
background: var(--bg-surface);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
padding: 1.2rem 1.5rem;
margin-bottom: 1.5rem;
}
.share-btn {
display: inline-flex; align-items: center; gap: 0.5rem;
padding: 0.65rem 1.2rem;
border-radius: 50px;
font-family: inherit; font-size: 0.88rem; font-weight: 700;
cursor: pointer; border: none; transition: 0.2s;
}
.share-btn-primary {
background: linear-gradient(135deg, #6366f1, #8b5cf6);
color: white;
}
.share-btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }
.share-btn-outline {
background: transparent;
border: 1.5px solid var(--border-color) !important;
color: var(--text-muted);
}
.share-btn-outline:hover { border-color: var(--accent-gold) !important; color: var(--accent-gold); }
.share-link-box {
display: none;
margin-top: 0.8rem;
background: var(--bg-main);
border: 1px solid var(--border-color);
border-radius: 10px;
padding: 0.7rem 1rem;
font-size: 0.8rem;
color: var(--text-muted);
word-break: break-all;
direction: ltr;
text-align: left;
}
.share-toast {
position: fixed;
bottom: 2rem; left: 50%; transform: translateX(-50%);
background: #10b981; color: white;
padding: 0.7rem 1.5rem;
border-radius: 50px;
font-size: 0.9rem; font-weight: 700;
box-shadow: 0 8px 30px rgba(16,185,129,0.4);
z-index: 9999;
animation: toastIn 0.3s ease;
display: none;
}
.share-toast.error { background:var(--color-danger); box-shadow: 0 8px 30px color-mix(in srgb, var(--color-danger) 35%, transparent); }
.share-toast.info { background:var(--color-info); box-shadow: 0 8px 30px color-mix(in srgb, var(--color-info) 35%, transparent); }
.share-toast.warning { background:var(--color-warning); color:#0F172A; box-shadow: 0 8px 30px color-mix(in srgb, var(--color-warning) 35%, transparent); }
@keyframes toastIn { from{opacity:0;transform:translateX(-50%) translateY(10px);} to{opacity:1;transform:translateX(-50%) translateY(0);} }
[data-theme="light"] .share-bar { background: #FFFFFF !important; border-color: #E2E8F0 !important; }
[data-theme="light"] .share-link-box { background: #F8FAFF !important; border-color: #E2E8F0 !important; }
/* --- ???????? ??????? --- */
.norms-section {
background: var(--bg-surface);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
padding: 1.5rem;
margin-bottom: 1.5rem;
}
.norms-title {
font-size: 1rem; font-weight: 800;
color: var(--accent-gold);
display: flex; align-items: center; gap: 0.5rem;
margin-bottom: 1.2rem;
padding-bottom: 0.7rem;
border-bottom: 1px solid var(--border-color);
}
.norms-input-row {
display: flex; gap: 0.8rem; align-items: center;
flex-wrap: wrap; margin-bottom: 1rem;
}
.norms-select {
background: var(--bg-main); border: 1.5px solid var(--border-color);
border-radius: 8px; padding: 0.5rem 0.8rem;
font-family: inherit; font-size: 0.88rem; font-weight: 600;
color: var(--text-main); cursor: pointer; outline: none;
}
.norms-select:focus { border-color: var(--accent-gold); }
.norms-bar-wrap { margin: 1rem 0; }
.norms-bar-label {
display: flex; justify-content: space-between;
font-size: 0.78rem; font-weight: 700;
color: var(--text-muted); margin-bottom: 4px;
}
.norms-bar-bg {
height: 12px; border-radius: 50px;
background: var(--bg-main); overflow: hidden;
position: relative;
}
.norms-bar-fill {
height: 100%; border-radius: 50px;
transition: width 0.8s cubic-bezier(0.4,0,0.2,1);
}
.norms-bar-marker {
position: absolute; top: -4px;
width: 4px; height: 20px;
background: var(--accent-gold);
border-radius: 2px;
transition: left 0.8s cubic-bezier(0.4,0,0.2,1);
}
.norms-percentile {
text-align: center; padding: 0.8rem;
background: var(--accent-gold-light);
border-radius: 10px; margin-top: 0.8rem;
}
.norms-percentile-num {
font-size: 2.2rem; font-weight: 900;
color: var(--accent-gold); line-height: 1;
}
.norms-interpretation {
font-size: 0.82rem; color: var(--text-muted);
font-weight: 600; margin-top: 0.3rem;
}
.norms-chart-row {
display: grid; grid-template-columns: 1fr 1fr 1fr;
gap: 0.6rem; margin-top: 1rem;
}
.norms-age-card {
background: var(--bg-main); border: 1px solid var(--border-color);
border-radius: 10px; padding: 0.7rem; text-align: center;
transition: 0.2s;
}
.norms-age-card.active {
border-color: var(--accent-gold);
background: var(--accent-gold-light);
}
.norms-age-label { font-size: 0.72rem; color: var(--text-muted); font-weight: 700; }
.norms-age-pct { font-size: 1.1rem; font-weight: 900; color: var(--accent-gold); }
[data-theme="light"] .norms-section { background: #FFFFFF !important; border-color: #E2E8F0 !important; }
[data-theme="light"] .norms-select { background: #F8FAFF !important; border-color: #E2E8F0 !important; color: #1E293B !important; }
[data-theme="light"] .norms-age-card { background: #F8FAFF !important; border-color: #E2E8F0 !important; }
[data-theme="light"] .norms-bar-bg { background: #E2E8F0 !important; }
.dl-menu-item{display:flex;align-items:center;gap:0.6rem;width:100%;background:none;border:none;padding:0.65rem 0.9rem;border-radius:10px;font-family:inherit;font-size:0.88rem;font-weight:600;color:var(--text-main);cursor:pointer;text-align:right;transition:background 0.15s;}
.dl-menu-item:hover{background:var(--bg-hover);}
.dl-menu-item i { flex-shrink: 0; }
/* -- ???? ???????? -- */
.art-fmt-btn {
display: inline-flex; align-items: center; justify-content: center;
min-width: 29px; height: 29px; padding: 0 6px;
background: var(--bg-surface); border: 1px solid var(--border-color);
border-radius: 5px; cursor: pointer;
font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 0.83rem;
color: var(--text-main); transition: background 0.14s, border-color 0.14s, color 0.14s;
}
.art-fmt-btn:hover { background: rgba(234,179,8,0.12); border-color: var(--accent-gold); color: var(--accent-gold); }
.art-fmt-btn:active { transform: scale(0.93); }
.art-tbar-sep { display: inline-block; width: 1px; height: 20px; background: var(--border-color); margin: 0 2px; align-self: center; }
.art-modal-body {
flex: 1; overflow-y: auto; padding: 1.3rem 2rem;
outline: none; caret-color: var(--accent-gold);
font-family: 'IBM Plex Sans Arabic', sans-serif;
font-size: 0.96rem; line-height: 1.95;
color: var(--text-main); min-height: 380px;
}
.art-modal-body:focus { outline: none; }
.art-modal-body h2 { font-size: 1.28rem; color: #0f766e; margin: 1.3rem 0 0.55rem; font-family: 'IBM Plex Sans Arabic', sans-serif; }
.art-modal-body h3 { font-size: 1.1rem; color: #0369a1; margin: 1rem 0 0.45rem; font-family: 'IBM Plex Sans Arabic', sans-serif; }
.art-modal-body p { margin: 0.4rem 0; }
.art-modal-body ul, .art-modal-body ol { padding-right: 1.5rem; margin: 0.5rem 0; }
.art-modal-body li { margin: 0.25rem 0; }
.art-modal-body blockquote { border-right: 4px solid var(--accent-gold); padding: 0.5rem 1rem; margin: 0.8rem 0; background: rgba(234,179,8,0.05); border-radius: 4px; font-style: italic; color: var(--text-muted); }
.art-modal-body a { color: #0ea5e9; text-decoration: underline; }
.art-modal-body img { max-width: 100%; border-radius: 8px; margin: 0.5rem 0; }
/* ===== Home Redesign (First Page Only) ===== */
#view-home {
--home-section-gap: clamp(34px, 5.2vw, 78px);
--home-surface-border: color-mix(in oklab, var(--border-color) 88%, transparent);
--home-card-bg: linear-gradient(165deg, color-mix(in oklab, var(--bg-surface) 86%, transparent), color-mix(in oklab, var(--bg-main) 72%, transparent));
--home-premium-glow: color-mix(in oklab, var(--accent-gold) 24%, transparent);
}
#view-home .hero {
padding: clamp(30px, 4.6vw, 66px) 0 clamp(26px, 4vw, 54px) !important;
background:
radial-gradient(70% 58% at 88% 4%, color-mix(in oklab, var(--accent-gold) 20%, transparent), transparent 70%),
radial-gradient(64% 50% at 8% 2%, color-mix(in oklab, #22d3ee 16%, transparent), transparent 74%),
linear-gradient(180deg, color-mix(in oklab, var(--bg-main) 96%, transparent), color-mix(in oklab, var(--bg-main) 100%, transparent));
isolation: isolate;
}
#view-home .hero::after {
height: clamp(20px, 3vw, 34px);
background: linear-gradient(to bottom, transparent, var(--bg-main));
}
#view-home .hero-stage {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
align-items: stretch;
gap: clamp(16px, 3vw, 36px);
}
#view-home .hero-copy {
text-align: center;
padding: clamp(14px, 2.3vw, 26px);
border-radius: 18px;
border: 1px solid var(--home-surface-border);
background: var(--home-card-bg);
box-shadow: 0 12px 34px rgba(2, 6, 23, 0.22);
position: relative;
overflow: clip;
}
#view-home .hero-copy::before,
#view-home .hero-side::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(122deg, color-mix(in oklab, var(--home-premium-glow) 40%, transparent), transparent 38%, color-mix(in oklab, #22d3ee 20%, transparent));
opacity: 0.34;
z-index: 0;
}
#view-home .hero-copy > *,
#view-home .hero-side > * {
position: relative;
z-index: 1;
}
#view-home .hero h2 {
margin-bottom: 0.85rem;
font-size: clamp(2rem, 4.4vw, 3.5rem);
letter-spacing: -0.02em;
line-height: 1.2;
text-align: center;
text-wrap: balance;
}
#view-home .hero p {
margin: 0 0 1.25rem;
max-width: 100%;
font-size: clamp(0.95rem, 1.5vw, 1.08rem);
line-height: 1.9;
text-align: center;
}
#view-home .hero-primary-cta {
margin: 0 auto 0.65rem;
padding: 0.86rem 1.55rem;
box-shadow: 0 13px 30px color-mix(in oklab, var(--accent-gold) 34%, transparent);
}
#view-home .hero-value-line {
margin-bottom: 0.9rem;
text-align: center;
font-weight: 760;
}
#view-home .hero-features {
justify-content: center;
margin: 0.55rem 0 0;
border-radius: 14px;
padding: 0.5rem 0.7rem;
}
#view-home .hero-side {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.78rem;
padding: clamp(12px, 1.8vw, 22px);
border-radius: 18px;
border: 1px solid var(--home-surface-border);
background: var(--home-card-bg);
box-shadow: 0 12px 34px rgba(2, 6, 23, 0.22);
overflow: clip;
min-height: 100%;
position: relative;
}
#view-home .hero-search-wrap {
margin: 0 auto;
max-width: 100%;
width: 100%;
display: flex;
justify-content: center;
}
#view-home .hero-search-bar {
min-height: 49px;
border-radius: 12px;
border-width: 1.5px;
}
#view-home .hero-search-bar:focus {
box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent-gold) 18%, transparent);
}
#view-home #hero-cats-bar {
margin: 0 auto;
max-width: 100%;
justify-content: center;
overflow-x: auto;
padding-bottom: 0.15rem;
scrollbar-width: none;
}
#view-home #hero-cats-bar::-webkit-scrollbar {
display: none;
}
#view-home #hero-cats-bar .filter-btn {
min-height: 38px;
padding: 0.36rem 0.68rem;
border-radius: 11px;
border-color: color-mix(in oklab, var(--accent-gold) 24%, var(--border-color));
background: color-mix(in oklab, var(--bg-surface) 82%, transparent);
flex-shrink: 0;
}
#view-home .hero-glance {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.95rem;
align-items: stretch;
justify-content: center;
margin: 0 auto 1.2rem auto;
max-width: 100%;
width: 100%;
}
#view-home .hero-glance-item {
background: linear-gradient(135deg, color-mix(in oklab, var(--bg-surface) 38%, transparent), color-mix(in oklab, var(--bg-main) 88%, transparent));
border: 1.5px solid color-mix(in oklab, var(--accent-gold) 38%, var(--border-color));
border-radius: 22px;
padding: 0.92rem 0.95rem;
min-height: 82px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 0.85rem;
text-align: center;
box-shadow: 0 6px 22px rgba(212, 160, 23, 0.14);
transition: box-shadow 0.28s, border-color 0.22s, transform 0.22s;
}
#view-home .hero-glance-item:hover {
border-color: var(--accent-gold);
box-shadow: 0 12px 32px rgba(212, 160, 23, 0.22);
transform: translateY(-3px) scale(1.03);
}
#view-home .hero-glance-icon {
width: 40px;
height: 40px;
border-radius: 14px;
border: 2.5px solid color-mix(in oklab, var(--accent-gold) 55%, var(--border-color));
background: color-mix(in oklab, var(--accent-gold) 28%, transparent);
color: var(--accent-gold);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(212,160,23,0.10);
}
#view-home .hero-glance-icon i {
width: 18px;
height: 18px;
stroke-width: 2.2;
}
#view-home .hero-glance-text {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 0.15rem;
min-width: 0;
text-align: center;
}
#view-home .hero-glance-label {
font-size: 0.92rem;
font-weight: 900;
color: var(--text-main);
margin-bottom: 0;
line-height: 1.32;
text-align: center;
letter-spacing: 0.01em;
}
#view-home .hero-glance-value {
font-size: 1.08rem;
font-weight: 900;
color: var(--accent-gold);
letter-spacing: 0.01em;
line-height: 1.2;
}
#view-home .browse-section {
padding: clamp(22px, 3.6vw, 48px) 0 var(--home-section-gap) !important;
}
#view-home .section-head {
margin-bottom: 0.7rem;
}
#view-home .browse-lead {
margin: 0 0 1rem;
color: var(--text-muted);
font-size: 0.92rem;
line-height: 1.85;
max-width: 74ch;
}
#view-home .filters-wrapper {
margin-bottom: 1rem;
padding-bottom: 0.4rem;
}
#view-home .tests-grid {
gap: clamp(12px, 2vw, 20px);
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
align-items: stretch;
}
#view-home .test-card {
min-height: 100%;
border-radius: 14px;
}
[data-theme="light"] #view-home {
--home-card-bg: linear-gradient(165deg, #ffffff, #f6f8ff);
--home-premium-glow: rgba(99, 102, 241, 0.2);
}
[data-theme="light"] #view-home .hero {
background:
radial-gradient(70% 60% at 88% 4%, rgba(99,102,241,0.18), transparent 70%),
radial-gradient(60% 52% at 8% 2%, rgba(14,165,233,0.16), transparent 74%),
linear-gradient(180deg, #eef2ff, #f8fafc);
}
@media (max-width: 980px) {
#view-home .hero-stage {
grid-template-columns: 1fr;
}
#view-home .hero-copy,
#view-home .hero-side {
min-height: auto;
text-align: center;
}
#view-home .hero-copy .hero-stats-row {
justify-content: center;
}
#view-home .hero-features {
justify-content: center;
}
#view-home .hero-stats-row {
justify-content: center;
}
#view-home .hero h2,
#view-home .hero p,
#view-home .hero-value-line {
text-align: center;
}
}
@media (max-width: 640px) {
#view-home .hero {
padding-top: 1.5rem !important;
}
#view-home .hero-copy,
#view-home .hero-side {
padding: 0.9rem;
border-radius: 14px;
}
#view-home .hero h2 {
font-size: clamp(1.55rem, 8vw, 2.1rem);
text-align: center;
}
#view-home .hero p {
font-size: 0.88rem;
margin-bottom: 0.85rem;
text-align: center;
}
#view-home .hero-glance {
grid-template-columns: repeat(3, 1fr);
gap: 0.48rem;
}
#view-home .hero-glance-item {
min-height: 66px;
text-align: center;
padding: 0.45rem 0.52rem;
}
#view-home .hero-glance-value,
#view-home .hero-glance-label {
text-align: center;
}
#view-home .hero-glance-icon {
width: 30px;
height: 30px;
border-radius: 8px;
}
#view-home .hero-glance-icon i {
width: 13px;
height: 13px;
}
#view-home .tests-grid {
grid-template-columns: 1fr !important;
}
#view-home .browse-lead {
font-size: 0.84rem;
}
#view-home .hero-primary-cta {
width: 100%;
justify-content: center;
}
}
@media (max-width: 412px) {
#view-home .hero {
padding: 1.25rem 0 1.35rem !important;
}
#view-home .hero-stage {
gap: 0.62rem;
}
#view-home .hero-copy,
#view-home .hero-side {
padding: 0.78rem;
}
#view-home .hero h2 {
font-size: clamp(1.42rem, 7.4vw, 1.9rem);
margin-bottom: 0.58rem;
}
#view-home .hero p {
font-size: 0.84rem;
line-height: 1.72;
margin-bottom: 0.64rem;
}
#view-home .hero-badge {
margin-bottom: 0.56rem;
font-size: 0.66rem;
padding: 0.22rem 0.6rem;
}
#view-home .hero-value-line {
font-size: 0.76rem;
margin-bottom: 0.6rem;
}
#view-home .hero-stats-row {
justify-content: center;
gap: 0.45rem;
}
#view-home .hero-stat-pill {
font-size: 0.76rem;
padding: 0.35rem 0.7rem;
}
#view-home .hero-search-bar {
min-height: 44px;
padding: 0.62rem 2.5rem 0.62rem 0.85rem;
font-size: 0.85rem;
}
#view-home .hero-search-icon {
left: 0.8rem;
width: 15px;
}
#view-home .hero-features {
gap: 0.34rem 0.52rem;
padding: 0.34rem 0.42rem;
}
#view-home .hero-feat {
font-size: 0.66rem;
}
#view-home #hero-cats-bar .filter-btn {
min-height: 34px;
padding: 0.28rem 0.5rem;
font-size: 0.71rem;
}
#view-home .browse-section {
padding-top: 0.95rem !important;
}
#view-home .section-head {
margin-bottom: 0.45rem;
}
#view-home .browse-lead {
font-size: 0.79rem;
line-height: 1.7;
margin-bottom: 0.64rem;
}
#view-home .filters-wrapper {
margin-bottom: 0.66rem;
}
}
@media (max-width: 414px) {
#view-home .hero-copy,
#view-home .hero-side {
padding: 0.76rem;
}
#view-home .hero-glance {
gap: 0.65rem;
grid-template-columns: repeat(3, 1fr);
margin-bottom: 1.1rem;
}
#view-home .hero-glance-item {
min-height: 70px;
padding: 0.7rem 0.7rem;
gap: 0.65rem;
text-align: center;
border-radius: 18px;
box-shadow: 0 4px 18px rgba(212,160,23,0.13);
}
#view-home .hero-glance-icon {
width: 32px;
height: 32px;
border-radius: 10px;
}
#view-home .hero-glance-icon i {
width: 14px;
height: 14px;
}
#view-home .hero-glance-label {
font-size: 0.82rem;
}
#view-home .hero-glance-value {
font-size: 0.98rem;
}
}
@media (max-width: 375px) {
#view-home .hero-copy,
#view-home .hero-side {
padding: 0.7rem;
}
#view-home .hero-glance {
gap: 0.55rem;
grid-template-columns: repeat(3, 1fr);
margin-bottom: 0.9rem;
}
#view-home .hero-glance-item {
min-height: 60px;
padding: 0.55rem 0.55rem;
text-align: center;
border-radius: 14px;
box-shadow: 0 3px 12px rgba(212,160,23,0.11);
}
#view-home .hero-glance-icon {
width: 28px;
height: 28px;
border-radius: 8px;
}
#view-home .hero-glance-icon i {
width: 12px;
height: 12px;
}
#view-home .hero-glance-value {
font-size: 0.88rem;
}
#view-home .hero-glance-label {
font-size: 0.74rem;
}
}
@media (max-width: 390px) {
#view-home .hero-copy,
#view-home .hero-side {
padding: 0.72rem;
}
#view-home .hero h2 {
font-size: clamp(1.36rem, 7.2vw, 1.72rem);
}
#view-home .hero p {
font-size: 0.81rem;
}
#view-home .hero-glance-item {
min-height: 48px;
padding: 0.36rem 0.46rem;
}
#view-home .hero-glance-value {
font-size: 0.79rem;
}
}
@media (max-width: 360px) {
#view-home .container {
padding-inline: 0.68rem;
}
#view-home .hero-stage {
gap: 0.5rem;
}
#view-home .hero h2 {
font-size: 1.3rem;
}
#view-home .hero p {
font-size: 0.79rem;
line-height: 1.66;
}
#view-home .hero-primary-cta {
min-height: 42px;
padding: 0.6rem 0.9rem;
font-size: 0.85rem;
}
#view-home #hero-cats-bar .filter-btn {
font-size: 0.68rem;
padding: 0.25rem 0.46rem;
}
#view-home .hero-features {
gap: 0.28rem 0.42rem;
}
#view-home .hero-feat {
font-size: 0.63rem;
}
#view-home .hero-glance-item {
min-height: 46px;
}
#view-home .hero-glance-value {
font-size: 0.76rem;
}
#view-home .browse-lead {
font-size: 0.76rem;
}
}