/* =============================================
   Focus24 Blog - Modern Clean Design
   ============================================= */

/* Blog Pages Base */
.blog-page,
.blog-post-page {
  background: var(--color-gray-50);
  min-height: 100vh;
  color: var(--color-gray-975);
}


/* =============================================
   Blog Index Page
   ============================================= */

.blog-header {
  padding: 120px 24px 60px;
  background: linear-gradient(180deg, var(--color-gray-975) 0%, var(--color-gray-975) 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.blog-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at top, rgba(255, 55, 95, 0.1) 0%, transparent 60%);
  pointer-events: none;
}

.blog-header .features__header {
  position: relative;
  z-index: 1;
}

.blog-header .section-label {
  color: var(--color-accent);
  font-size: var(--font-size-body-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 16px;
  display: inline-block;
}

.blog-header .section-title {
  color: var(--color-white);
  font-size: var(--font-size-hero-sm);
  font-weight: 800;
  margin: 0 0 16px;
  letter-spacing: -1px;
}

.blog-header .section-subtitle {
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--font-size-title);
  max-width: 500px;
  margin: 0 auto;
}

.blog-content {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 48px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 24px;
}

@media (max-width: 960px) {
  .blog-content {
    grid-template-columns: 1fr;
  }
}

.blog-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

@media (max-width: 768px) {
  .blog-list {
    grid-template-columns: 1fr;
  }
}

/* Blog Card - Modern Design */
.blog-card {
  background: var(--color-white);
  border-radius: var(--radius-5xl);
  padding: 32px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  color: var(--color-gray-975);
}

.blog-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 0;
  background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
  border-radius: var(--radius-xs);
  transition: height 0.3s ease;
}

.blog-card:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
  border-color: transparent;
  transform: translateY(-4px);
}

.blog-card:hover::before {
  height: 100%;
}

.blog-card__content {
  padding: 0;
}

.blog-card__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: var(--font-size-body-sm);
  color: var(--color-gray-500);
  margin-bottom: 16px;
}

.blog-card__meta i {
  margin-right: 6px;
  color: var(--color-accent);
}

.blog-card__title {
  font-size: var(--font-size-h2);
  font-weight: 700;
  color: var(--color-gray-900);
  margin: 0 0 12px;
  line-height: 1.3;
}

.blog-card__title a {
  color: inherit;
  text-decoration: none;
}

.blog-card__title a:hover {
  color: var(--color-accent);
}

.blog-card__excerpt {
  font-size: var(--font-size-subhead);
  color: var(--color-gray-700);
  line-height: 1.7;
  margin: 0 0 20px;
}

.blog-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-body);
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
  transition: gap 0.2s ease;
}

.blog-card__link:hover {
  gap: 12px;
}

/* Sidebar */
.blog-sidebar {
  position: sticky;
  top: 100px;
}

.sidebar-widget {
  background: var(--color-gray-50);
  border-radius: var(--radius-4xl);
  padding: 28px;
  border: 1px solid var(--color-gray-100);
}

.sidebar-widget__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--font-size-body-lg);
  font-weight: 700;
  color: var(--color-gray-975);
  margin: 0 0 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sidebar-widget__title i {
  color: var(--color-accent);
}

.popular-posts {
  list-style: none;
  margin: 0;
  padding: 0;
}

.popular-post {
  padding: 14px 0;
  border-bottom: 1px solid var(--color-gray-200);
}

.popular-post:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.popular-post a {
  text-decoration: none;
}

.popular-post a:hover .popular-post__title {
  color: var(--color-accent);
}

.popular-post__title {
  font-size: var(--font-size-body);
  font-weight: 500;
  color: var(--color-gray-975);
  line-height: 1.5;
  transition: color 0.2s;
}

.popular-post__views {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-caption);
  color: var(--color-gray-500);
  margin-top: 6px;
}

/* Empty State */
.blog-empty {
  text-align: center;
  padding: 100px 24px;
}

.blog-empty i {
  font-size: var(--font-size-hero);
  color: var(--color-gray-350);
  margin-bottom: 24px;
}

.blog-empty h3 {
  font-size: var(--font-size-h2);
  font-weight: 700;
  color: var(--color-gray-975);
  margin: 0 0 12px;
}

.blog-empty p {
  font-size: var(--font-size-subhead);
  color: var(--color-gray-700);
}

/* Pagination */
.blog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 40px 0;
  margin-top: 20px;
}

.pagination-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--color-gray-975);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-body);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s;
}

.pagination-btn:hover {
  background: var(--color-gray-900);
}

/* =============================================
   Blog Post Page - New Design
   ============================================= */

/* Post Hero */
.post-hero {
  background: linear-gradient(180deg, var(--color-black) 0%, var(--color-gray-975) 100%);
  padding: 140px 24px 80px;
}

.post-hero__container {
  max-width: 800px;
  margin: 0 auto;
}

.post-hero__breadcrumbs {
  margin-bottom: 32px;
}

/* Force horizontal layout for breadcrumb list */
nav.post-hero__breadcrumbs ol.breadcrumb-list,
.post-hero__breadcrumbs .breadcrumb-list,
.blog-post-page .post-hero__breadcrumbs ol {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0 !important;
  list-style: none !important;
  list-style-type: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Force inline display for breadcrumb items */
nav.post-hero__breadcrumbs ol.breadcrumb-list > li,
.post-hero__breadcrumbs .breadcrumb-list li,
.blog-post-page .post-hero__breadcrumbs li {
  display: inline-flex !important;
  align-items: center !important;
  float: none !important;
}

/* Add separator after each item except the last */
nav.post-hero__breadcrumbs ol.breadcrumb-list > li:not(:last-child)::after,
.post-hero__breadcrumbs .breadcrumb-list li:not(:last-child)::after {
  content: '/';
  color: rgba(255, 255, 255, 0.3);
  font-size: var(--font-size-caption);
  margin: 0 10px;
}

.post-hero__breadcrumbs a {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  font-size: var(--font-size-body);
  transition: color 0.2s;
  min-height: auto !important;
  min-width: auto !important;
}

.post-hero__breadcrumbs a:hover {
  color: var(--color-accent);
}

/* Current page breadcrumb (last item, not a link) */
.post-hero__breadcrumbs .breadcrumb-list li:last-child span[itemprop="name"] {
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--font-size-body);
  font-weight: 500;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Link text inside anchors */
.post-hero__breadcrumbs a span[itemprop="name"] {
  color: inherit;
}

.post-hero__title {
  font-size: clamp(32px, 6vw, 52px) !important;
  font-weight: 800 !important;
  color: var(--color-white) !important;
  line-height: 1.15 !important;
  margin: 0 0 28px !important;
  padding: 0 !important;
  letter-spacing: -1px;
  display: block;
  visibility: visible;
  opacity: 1;
}

.post-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.post-hero__meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--font-size-body);
}

.post-hero__meta-item i {
  color: var(--color-accent);
  font-size: var(--font-size-body);
}

/* Post Article */
.post-article {
  max-width: 720px;
  margin: 0 auto;
  padding: 64px 24px;
  background: var(--color-gray-50);
}

/* Article Content - Typography */
.post-article__content {
  font-size: var(--font-size-title);
  line-height: 1.85;
  color: var(--color-gray-950);
  background: var(--color-gray-50);
}

.post-article__content p,
.post-article__content li {
  color: var(--color-gray-950);
}

.post-article__content > *:first-child {
  margin-top: 0;
}

.post-article__content p {
  margin: 0 0 28px;
}

.post-article__content h2 {
  font-size: var(--font-size-h1);
  font-weight: 800;
  color: var(--color-gray-975);
  margin: 56px 0 24px;
  letter-spacing: -0.5px;
}

.post-article__content h3 {
  font-size: var(--font-size-h3);
  font-weight: 700;
  color: var(--color-gray-975);
  margin: 44px 0 18px;
}

.post-article__content h4 {
  font-size: var(--font-size-title);
  font-weight: 700;
  color: var(--color-gray-975);
  margin: 36px 0 14px;
}

.post-article__content strong {
  font-weight: 700;
  color: var(--color-gray-975);
}

.post-article__content ul,
.post-article__content ol {
  margin: 0 0 28px;
  padding-left: 28px;
}

.post-article__content li {
  margin-bottom: 12px;
  padding-left: 8px;
}

.post-article__content li::marker {
  color: var(--color-accent);
}

.post-article__content blockquote {
  margin: 40px 0;
  padding: 28px 32px;
  background: linear-gradient(135deg, #fff5f7 0%, var(--color-white) 100%);
  border-left: 4px solid var(--color-accent);
  border-radius: 0 12px 12px 0;
  font-size: var(--font-size-title-sm);
  font-style: italic;
  color: var(--color-gray-700);
}

.post-article__content blockquote p:last-child {
  margin-bottom: 0;
}

.post-article__content a {
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 55, 95, 0.3);
  transition: border-color 0.2s;
}

.post-article__content a:hover {
  border-bottom-color: var(--color-accent);
}

.post-article__content code {
  background: var(--color-gray-100);
  padding: 3px 8px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-body-lg);
  font-family: 'SF Mono', 'Menlo', monospace;
  color: var(--color-brand-pink);
}

.post-article__content pre {
  background: var(--color-gray-975);
  color: var(--color-gray-100);
  padding: 28px;
  border-radius: var(--radius-2xl);
  overflow-x: auto;
  margin: 32px 0;
  font-size: var(--font-size-body);
  line-height: 1.6;
}

.post-article__content pre code {
  background: none;
  padding: 0;
  color: inherit;
}

.post-article__content hr {
  border: none;
  height: 1px;
  background: var(--color-gray-200);
  margin: 48px 0;
}

/* Article Footer / Share */
.post-article__footer {
  margin-top: 64px;
  padding-top: 40px;
  border-top: 1px solid var(--color-gray-200);
}

.post-share {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.post-share__label {
  font-size: var(--font-size-body-lg);
  font-weight: 600;
  color: var(--color-gray-975);
}

.post-share__buttons {
  display: flex;
  gap: 12px;
}

.post-share__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-2xl);
  font-size: var(--font-size-title);
  color: var(--color-white);
  text-decoration: none;
  transition: transform 0.2s, opacity 0.2s;
}

.post-share__btn:hover {
  transform: translateY(-3px);
  opacity: 0.9;
}

.post-share__btn--tg { background: var(--color-social-telegram); }
.post-share__btn--vk { background: var(--color-social-vk); }
.post-share__btn--tw { background: var(--color-social-twitter); }

/* Related Posts */
.post-related {
  background: var(--color-gray-50);
  padding: 80px 24px;
}

.post-related__container {
  max-width: 1000px;
  margin: 0 auto;
}

.post-related__title {
  font-size: var(--font-size-h1);
  font-weight: 800;
  color: var(--color-gray-975);
  margin: 0 0 40px;
  text-align: center;
}

.post-related__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.post-related__card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  padding: 28px;
  border-radius: var(--radius-4xl);
  text-decoration: none;
  border: 1px solid var(--color-gray-200);
  transition: all 0.3s ease;
}

.post-related__card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 8px 30px rgba(255, 55, 95, 0.1);
}

.post-related__card-date {
  font-size: var(--font-size-body-sm);
  color: var(--color-gray-500);
  margin-bottom: 12px;
}

.post-related__card-title {
  font-size: var(--font-size-title);
  font-weight: 700;
  color: var(--color-gray-975);
  line-height: 1.4;
  margin: 0 0 auto;
  padding-bottom: 16px;
}

.post-related__card-read {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-body);
  font-weight: 600;
  color: var(--color-accent);
  margin-top: 16px;
}

.post-related__card:hover .post-related__card-read {
  gap: 12px;
}

/* Back Button */
.post-back {
  padding: 60px 24px 100px;
  text-align: center;
}

.post-back__btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  background: var(--color-gray-975);
  color: var(--color-white);
  border-radius: var(--radius-2xl);
  font-size: var(--font-size-body-lg);
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
}

.post-back__btn:hover {
  background: var(--color-gray-900);
  gap: 16px;
}

/* Responsive */
@media (max-width: 600px) {
  .post-hero {
    padding: 120px 20px 60px;
  }

  .post-hero__title {
    font-size: var(--font-size-h1);
  }

  .post-hero__meta {
    gap: 16px;
  }

  .post-article {
    padding: 48px 20px;
  }

  .post-article__content {
    font-size: var(--font-size-title-sm);
  }

  .post-share {
    flex-direction: column;
    align-items: flex-start;
  }

  .post-related {
    padding: 60px 20px;
  }

  .blog-card {
    padding: 24px;
  }

  .blog-card__title {
    font-size: var(--font-size-title-lg);
  }
}
/*
 * Focus24 Cabinet - Modern Dashboard Styles
 * A sleek, glassmorphic design for the tiredness tracking dashboard
 */

/* ===========================
   CABINET LAYOUT
   =========================== */

.cabinet {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
  padding: 16px;
  max-width: 1400px;
  margin: 0 auto;
  min-height: calc(100vh - 120px);
}

@media (max-width: 1024px) {
  .cabinet {
    grid-template-columns: 1fr;
    padding: 12px;
    gap: 10px;
  }
}

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

.dashboard-card {
  background: var(--color-white);
  border-radius: var(--radius-3xl);
  padding: 16px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 4px 12px rgba(0, 0, 0, 0.04);
}

.dashboard-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.08),
    0 8px 24px rgba(0, 0, 0, 0.06);
}

.dashboard-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--card-accent, var(--color-primary)), var(--card-accent-end, var(--color-primary-light)));
  border-radius: var(--radius-5xl) var(--radius-5xl) 0 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.dashboard-card:hover::before {
  opacity: 1;
}

/* Card Sizes - Row 1: Camera + Performance + Data = 12 */
.dashboard-card--camera {
  grid-column: span 4;
  min-height: auto;
  background: var(--color-white);
}

.dashboard-card--performance {
  grid-column: span 4;
  --card-accent: var(--color-success);
  --card-accent-end: var(--color-success-lime);
}

.dashboard-card--data {
  grid-column: span 4;
  --card-accent: var(--color-brand-orange);
  --card-accent-end: var(--color-warning);
}

/* Full width cards */
.dashboard-card--state {
  grid-column: span 12;
  --card-accent: var(--color-info-purple);
  --card-accent-end: var(--color-primary);
}

.dashboard-card--stats {
  grid-column: span 12;
}

@media (max-width: 1200px) {
  .dashboard-card--camera { grid-column: span 4; }
  .dashboard-card--performance { grid-column: span 4; }
  .dashboard-card--data { grid-column: span 4; }
  .dashboard-card--state { grid-column: span 12; }
  .dashboard-card--stats { grid-column: span 12; }
}

@media (max-width: 1024px) {
  .dashboard-card--performance,
  .dashboard-card--data,
  .dashboard-card--camera,
  .dashboard-card--state,
  .dashboard-card--stats {
    grid-column: span 1;
  }
}

/* ===========================
   CARD HEADER
   =========================== */

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
  overflow: hidden;
}

.card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-gray-600);
  margin: 0;
  min-width: 0;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.card-title i {
  font-size: var(--font-size-body);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  background: var(--card-accent, var(--color-gray-100));
  color: var(--color-white);
  flex-shrink: 0;
}

.card-title--performance i { background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%); }
.card-title--data i { background: linear-gradient(135deg, var(--color-brand-orange) 0%, var(--color-brand-orange-light) 100%); }
.card-title--advice i { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); }

.card-action {
  background: transparent;
  border: none;
  padding: 8px;
  border-radius: var(--radius-lg);
  color: var(--color-gray-500);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.card-action:hover {
  background: var(--color-gray-100);
  color: var(--color-gray-800);
}

/* ===========================
   PERFORMANCE METER
   =========================== */

.performance-display {
  text-align: center;
  padding: 8px 0;
}

.performance-value {
  font-size: var(--font-size-display);
  font-weight: 700;
  background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin: 0 0 4px 0;
  transition: all 0.5s ease;
}

.performance-value.warning {
  background: linear-gradient(135deg, var(--color-warning) 0%, var(--color-brand-orange) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.performance-value.danger {
  background: linear-gradient(135deg, var(--color-error) 0%, var(--color-error-pink) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.performance-label {
  font-size: var(--font-size-body-sm);
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.performance-bar-container {
  margin-top: 24px;
  padding: 0 8px;
}

.performance-bar {
  height: 8px;
  background: var(--color-gray-200);
  border-radius: var(--radius-full);
  overflow: hidden;
  position: relative;
}

.performance-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--color-success) 0%, var(--color-success-lime) 100%);
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1), background 0.5s ease;
  position: relative;
}

.performance-bar-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.performance-bar-fill.warning {
  background: linear-gradient(90deg, var(--color-warning) 0%, var(--color-brand-orange) 100%);
}

.performance-bar-fill.danger {
  background: linear-gradient(90deg, var(--color-error-coral) 0%, var(--color-error) 100%);
}

/* ===========================
   ADVICE CARD
   =========================== */

.advice-content {
  background: linear-gradient(135deg, var(--color-gray-50) 0%, var(--color-white) 100%);
  border-radius: var(--radius-4xl);
  padding: 20px;
  border-left: 4px solid var(--color-primary);
  min-height: 100px;
}

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

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 280px;
  flex-shrink: 0;
  position: sticky;
  top: 80px;
  height: fit-content;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}

.sidebar-card {
  background: var(--color-white);
  border-radius: var(--radius-3xl);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.sidebar-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-gray-100);
}

.sidebar-card__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--font-size-body-sm);
  font-weight: 600;
  color: var(--color-gray-600);
  margin: 0;
}

.sidebar-card__title i {
  font-size: var(--font-size-subhead);
}

.sidebar-card--advice .sidebar-card__title i {
  color: var(--color-primary);
}

.sidebar-card--tasks .sidebar-card__title i {
  color: var(--color-apple-indigo);
}

.sidebar-card__toggle {
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: var(--radius-base);
  color: var(--color-gray-500);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.sidebar-card__toggle:hover {
  background: var(--color-gray-100);
}

.sidebar-card__toggle i {
  transition: transform 0.3s ease;
}

.sidebar-card.collapsed .sidebar-card__toggle i {
  transform: rotate(180deg);
}

.sidebar-card.collapsed .sidebar-card__content {
  display: none;
}

.sidebar-card__content {
  padding: 16px;
}

/* Advice Card Specific */
.sidebar-card--advice {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-left: 3px solid var(--color-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.sidebar-card--advice .sidebar-card__header {
  border-bottom: none;
  padding-bottom: 0;
}

.sidebar-card--advice .sidebar-card__content {
  padding-top: 12px;
}

.sidebar-card--advice .advice-text {
  font-size: var(--font-size-body);
  line-height: 1.6;
  margin: 0;
  color: var(--color-gray-700);
    white-space: pre-wrap;
}

.sidebar-card--advice .advice-text.empty {
  color: var(--color-gray-500);
  font-style: italic;
}

/* Multiple advice items */
.advice-item {
  display: block;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-gray-200);
  white-space: pre-wrap;
}

.advice-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.advice-item:first-child {
  padding-top: 0;
}

.advice-separator {
  color: var(--color-primary);
  font-weight: 600;
  margin: 0 2px;
}

.dark-mode .advice-separator {
  color: var(--color-primary-light);
}

.dark-mode .advice-item {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* Tasks Card Specific */
.sidebar-card--tasks .sidebar-card__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Dark mode */
.dark-mode .sidebar-card {
  background: var(--color-apple-bg-dark);
}

.dark-mode .sidebar-card__header {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .sidebar-card__title {
  color: var(--color-gray-300);
}

.dark-mode .sidebar-card__toggle:hover {
  background: rgba(255, 255, 255, 0.1);
}

.dark-mode .sidebar-card--advice {
  background: linear-gradient(135deg, rgba(10, 132, 255, 0.08) 0%, #1c1c1e 100%);
}

.dark-mode .sidebar-card--advice .advice-text {
  color: rgba(255, 255, 255, 0.8);
}

.dark-mode .sidebar-card--advice .advice-text.empty {
  color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 1024px) {
  .sidebar {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    position: relative;
    top: 0;
    max-height: none;
  }

  .sidebar-card {
    flex: 1;
    min-width: 280px;
  }

  /* Cabinet wrapper responsive - stack columns on smaller screens */
  .cabinet-wrapper {
    flex-direction: column !important;
  }

  .cabinet-wrapper .sidebar {
    width: 100% !important;
    order: 2;
  }

  .cabinet-wrapper .cabinet {
    width: 100% !important;
    order: 1;
  }
}

.advice-text {
  font-size: var(--font-size-body-lg);
  line-height: 1.6;
  color: var(--color-gray-750);
  margin: 0;
}

.advice-text.empty {
  color: var(--color-gray-500);
  font-style: italic;
}

/* ===========================
   DATA CHART CARD
   =========================== */

.chart-container {
  position: relative;
  height: 140px;
  margin-top: 8px;
}

.chart-container canvas {
  width: 100% !important;
  height: 100% !important;
}

/* ===========================
   EXPORT SECTION
   =========================== */

.export-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--color-gray-200);
}

.btn--export {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-2xl);
  font-size: var(--font-size-body-lg);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(100, 217, 100, 0.3);
}

.btn--export:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(100, 217, 100, 0.4);
}

.btn--export:active {
  transform: translateY(0);
}

.btn--export i {
  font-size: var(--font-size-title);
}

/* ===========================
   START SCREEN OVERLAY
   =========================== */

.start-screen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 15, 20, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.start-screen__content {
  text-align: center;
  max-width: 480px;
  padding: 48px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-7xl);
  backdrop-filter: blur(10px);
  animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.start-screen__icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border-radius: var(--radius-6xl);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 32px;
  font-size: var(--font-size-display);
  color: var(--color-white);
  box-shadow: 0 16px 48px rgba(0, 171, 255, 0.3);
}

.start-screen__title {
  font-size: var(--font-size-h1);
  font-weight: 700;
  color: var(--color-white);
  margin: 0 0 16px;
}

.start-screen__description {
  font-size: var(--font-size-subhead);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 32px;
}

.start-screen__permissions {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 32px;
}

.permission-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--font-size-caption);
}

.permission-item i {
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-2xl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-title);
}

/* ===========================
   MODERN BUTTON
   =========================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 32px;
  font-size: var(--font-size-subhead);
  font-weight: 600;
  border: none;
  border-radius: var(--radius-3xl);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
}

.btn--primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-white);
  box-shadow: 0 8px 24px rgba(0, 171, 255, 0.3);
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 171, 255, 0.4);
}

.btn--primary:active {
  transform: translateY(0);
}

.btn--large {
  padding: 20px 48px;
  font-size: var(--font-size-title);
  border-radius: var(--radius-4xl);
}

.btn--gradient {
  background: linear-gradient(135deg, var(--color-brand-pink) 0%, var(--color-brand-orange) 100%);
  box-shadow: 0 8px 24px rgba(233, 30, 99, 0.3);
}

.btn--gradient:hover {
  box-shadow: 0 12px 32px rgba(233, 30, 99, 0.4);
}

/* ===========================
   CAMERA PREVIEW
   =========================== */

.camera-preview {
  width: 100%;
  height: 100%;
  min-height: 300px;
  border-radius: var(--radius-4xl);
  overflow: hidden;
  background: var(--color-gray-900);
  position: relative;
}

.camera-preview canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.camera-overlay {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.camera-status {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
  padding: 8px 16px;
  border-radius: var(--radius-full);
  color: var(--color-white);
  font-size: var(--font-size-body-sm);
}

.camera-status__dot {
  width: 8px;
  height: 8px;
  background: var(--color-success);
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ===========================
   STATS MINI CARDS
   =========================== */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

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

.stat-item {
  background: var(--color-gray-50);
  border-radius: var(--radius-2xl);
  padding: 16px;
  text-align: center;
  transition: all 0.2s ease;
}

.stat-item:hover {
  background: var(--color-gray-100);
}

.stat-value {
  font-size: var(--font-size-h2);
  font-weight: 700;
  color: var(--color-gray-900);
  margin: 0 0 4px;
}

.stat-label {
  font-size: var(--font-size-footnote);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-gray-500);
}

/* ===========================
   HIDE OLD ELEMENTS
   =========================== */

#what-i-see {
  display: none;
}

/* ===========================
   ANIMATIONS
   =========================== */

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

.dashboard-card {
  animation: cardAppear 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.dashboard-card:nth-child(1) { animation-delay: 0.1s; }
.dashboard-card:nth-child(2) { animation-delay: 0.2s; }
.dashboard-card:nth-child(3) { animation-delay: 0.3s; }
.dashboard-card:nth-child(4) { animation-delay: 0.4s; }
.dashboard-card:nth-child(5) { animation-delay: 0.5s; }
.dashboard-card:nth-child(6) { animation-delay: 0.6s; }

/* ===========================
   STATE SCORING CARD
   =========================== */

.state-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

@media (max-width: 1024px) {
  .state-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

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

.state-indicator {
  background: var(--color-gray-50);
  border-radius: var(--radius-xl);
  padding: 10px 8px;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.state-indicator::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--state-color, var(--color-gray-300));
  transition: all 0.3s ease;
}

.state-indicator:hover {
  background: var(--color-white);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.state-indicator__icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-lg);
  background: var(--state-color, var(--color-gray-300));
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 6px;
  font-size: var(--font-size-body-sm);
  transition: all 0.3s ease;
}

.state-indicator__value {
  font-size: var(--font-size-title);
  font-weight: 700;
  color: var(--color-gray-900);
  margin: 0 0 2px;
  line-height: 1;
}

.state-indicator__label {
  font-size: var(--font-size-micro);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--color-gray-500);
  margin: 0 0 4px;
}

.state-indicator__status {
  font-size: var(--font-size-micro);
  font-weight: 500;
  color: var(--state-color, var(--color-gray-600));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.state-indicator__status i {
  font-size: var(--font-size-footnote);
}

/* State colors */
.state-indicator.excellent {
  --state-color: var(--color-success);
}

.state-indicator.good {
  --state-color: var(--color-success-dark);
}

.state-indicator.neutral {
  --state-color: var(--color-primary);
}

.state-indicator.warning {
  --state-color: var(--color-warning);
}

.state-indicator.danger {
  --state-color: var(--color-error-coral);
}

.state-indicator.critical {
  --state-color: var(--color-error);
}

/* ===========================
   HEART RATE (rPPG) DISPLAY
   =========================== */

#state-heart-rate .state-indicator__icon {
  background: linear-gradient(135deg, #ff3366 0%, #ff6b8a 100%);
}

#state-heart-rate .state-indicator__value {
  font-variant-numeric: tabular-nums;
  transition: text-shadow 0.3s ease;
}

#state-heart-rate .state-indicator__value.pulse {
  animation: hr-pulse-glow 0.3s ease;
}

@keyframes hr-pulse-glow {
  0%, 100% { text-shadow: none; }
  50% { text-shadow: 0 0 20px rgba(255, 51, 102, 0.6); }
}

.hr-confidence {
  font-size: 0.7rem;
  color: var(--color-text-tertiary);
  margin-top: 4px;
  text-align: center;
}

.hr-confidence.high {
  color: var(--color-success);
}

.hr-confidence.medium {
  color: var(--color-warning);
}

.hr-confidence.low {
  color: var(--color-error-coral);
}

/* ===========================
   OVERALL STATE DISPLAY
   =========================== */

.overall-state {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: linear-gradient(135deg, var(--color-gray-900) 0%, var(--color-gray-850) 100%);
  border-radius: var(--radius-2xl);
  margin-bottom: 12px;
}

.overall-state__circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: conic-gradient(
    var(--overall-color, var(--color-success)) calc(var(--overall-value, 100) * 1%),
    var(--color-gray-700) 0
  );
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}

.overall-state__circle::before {
  content: '';
  position: absolute;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--color-gray-900);
}

.overall-state__value {
  position: relative;
  z-index: 1;
  font-size: var(--font-size-title);
  font-weight: 700;
  color: var(--color-white);
}

.overall-state__info {
  flex: 1;
  min-width: 0;
}

.overall-state__title {
  font-size: var(--font-size-footnote);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-gray-500);
  margin: 0 0 4px;
}

.overall-state__label {
  font-size: var(--font-size-title);
  font-weight: 600;
  color: var(--color-white);
  margin: 0 0 6px;
}

.overall-state__recommendation {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: var(--font-size-caption);
  color: var(--color-gray-400);
  line-height: 1.4;
}

.overall-state__recommendation i {
  color: var(--color-primary);
  flex-shrink: 0;
  margin-top: 2px;
}

/* ===========================
   MINI STATE BAR (for stats card)
   =========================== */

.state-mini-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.state-mini-bar:last-child {
  margin-bottom: 0;
}

.state-mini-bar__label {
  font-size: var(--font-size-footnote);
  color: var(--color-gray-600);
  width: 70px;
  flex-shrink: 0;
}

.state-mini-bar__track {
  flex: 1;
  height: 6px;
  background: var(--color-gray-200);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.state-mini-bar__fill {
  height: 100%;
  border-radius: var(--radius-sm);
  transition: width 2s ease, background 1s ease;
}

.state-mini-bar__fill.alertness { background: var(--color-success); }
.state-mini-bar__fill.focus { background: var(--color-primary); }
.state-mini-bar__fill.fatigue { background: var(--color-error-coral); }
.state-mini-bar__fill.stress { background: var(--color-warning); }

.state-mini-bar__value {
  font-size: var(--font-size-footnote);
  font-weight: 600;
  color: var(--color-gray-700);
  width: 35px;
  text-align: right;
}

/* ===========================
   PATTERN DETECTION CARD
   =========================== */

.dashboard-card--patterns {
  grid-column: span 6;
  --card-accent: var(--color-apple-purple);
  --card-accent-end: var(--color-apple-blue);
}

@media (max-width: 1200px) {
  .dashboard-card--patterns {
    grid-column: span 12;
  }
}

@media (max-width: 1024px) {
  .dashboard-card--patterns {
    grid-column: span 1;
  }
}

.pattern-current-state {
  background: linear-gradient(135deg, var(--color-gray-900) 0%, var(--color-gray-850) 100%);
  border-radius: var(--radius-4xl);
  padding: 20px;
  margin-bottom: 20px;
}

.pattern-state-display {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.pattern-state-display i {
  font-size: var(--font-size-h2);
}

.pattern-state-display span {
  font-size: var(--font-size-title-lg);
  font-weight: 600;
  color: var(--color-gray-300);
}

.pattern-meta {
  display: flex;
  gap: 24px;
  font-size: var(--font-size-body-sm);
  color: var(--color-gray-500);
}

.pattern-meta strong {
  color: var(--color-gray-300);
}

.pattern-section-label {
  font-size: var(--font-size-caption);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-gray-500);
  margin: 0 0 12px;
}

.pattern-trends-section {
  margin-bottom: 24px;
}

.pattern-trends {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: var(--font-size-body);
  font-weight: 500;
}

.pattern-learning-section {
  margin-bottom: 24px;
}

.pattern-learning-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.pattern-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: none;
  border-radius: var(--radius-xl);
  font-size: var(--font-size-body-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--color-gray-100);
  color: var(--color-gray-700);
}

.pattern-btn:hover {
  transform: translateY(-2px);
}

.pattern-btn--focused {
  background: rgba(48, 209, 88, 0.15);
  color: var(--color-apple-green);
}

.pattern-btn--focused:hover {
  background: rgba(48, 209, 88, 0.25);
}

.pattern-btn--tired {
  background: rgba(255, 149, 0, 0.15);
  color: var(--color-apple-orange);
}

.pattern-btn--tired:hover {
  background: rgba(255, 149, 0, 0.25);
}

.pattern-btn--stressed {
  background: rgba(255, 55, 95, 0.15);
  color: var(--color-accent);
}

.pattern-btn--stressed:hover {
  background: rgba(255, 55, 95, 0.25);
}

.pattern-btn--relaxed {
  background: rgba(90, 200, 250, 0.15);
  color: var(--color-apple-cyan);
}

.pattern-btn--relaxed:hover {
  background: rgba(90, 200, 250, 0.25);
}

.pattern-feedback {
  margin-top: 12px;
  padding: 10px 16px;
  border-radius: var(--radius-lg);
  font-size: var(--font-size-body-sm);
}

.pattern-feedback.success {
  background: rgba(48, 209, 88, 0.15);
  color: var(--color-apple-green);
}

.pattern-feedback.error {
  background: rgba(255, 55, 95, 0.15);
  color: var(--color-accent);
}

.pattern-discovered-section {
  margin-bottom: 20px;
}

.pattern-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.pattern-section-header .pattern-section-label {
  margin: 0;
}

.pattern-btn-small {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: none;
  border-radius: var(--radius-lg);
  font-size: var(--font-size-caption);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--color-primary);
  color: var(--color-white);
}

.pattern-btn-small:hover {
  background: var(--color-primary-dark);
}

.discovered-states {
  min-height: 40px;
}

.discovered-states-grid {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.discovered-state {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--color-gray-50);
  border-radius: var(--radius-xl);
  transition: all 0.2s ease;
}

.discovered-state:hover {
  background: var(--color-gray-100);
}

.discovered-state i {
  font-size: var(--font-size-title);
}

.discovered-state .state-label {
  font-size: var(--font-size-body);
  font-weight: 500;
  color: var(--color-gray-800);
}

.discovered-state .state-confidence {
  font-size: var(--font-size-caption);
  color: var(--color-gray-500);
  margin-left: 4px;
}

.pattern-export-section {
  padding-top: 16px;
  border-top: 1px solid var(--color-gray-200);
}

.btn--small {
  padding: 10px 20px;
  font-size: var(--font-size-body-sm);
}

/* ===========================
   NECK STRAIN TRACKING CARD
   =========================== */

.dashboard-card--neck-strain {
  grid-column: span 6;
  --card-accent: var(--color-accent);
  --card-accent-end: var(--color-apple-orange);
}

@media (max-width: 1200px) {
  .dashboard-card--neck-strain {
    grid-column: span 12;
  }
}

@media (max-width: 1024px) {
  .dashboard-card--neck-strain {
    grid-column: span 1;
  }
}

.section-label-small {
  font-size: var(--font-size-footnote);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-gray-500);
  margin: 0 0 12px;
}

/* Risk Level Indicator */
.neck-risk-section {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--color-gray-50);
  border-radius: var(--radius-2xl);
  margin-bottom: 20px;
}

.neck-risk-indicator {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.neck-risk-indicator.risk-minimal { background: var(--color-apple-green); }
.neck-risk-indicator.risk-low { background: #5ac8fa; }
.neck-risk-indicator.risk-moderate { background: #ff9500; }
.neck-risk-indicator.risk-high { background: var(--color-accent); }
.neck-risk-indicator.risk-critical { background: var(--color-accent); animation: pulse-critical 1s infinite; }

@keyframes pulse-critical {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.8; }
}

.neck-risk-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.neck-risk-label-text {
  font-size: var(--font-size-caption);
  color: var(--color-gray-500);
}

.neck-risk-info strong {
  font-size: var(--font-size-title);
  color: var(--color-gray-900);
}

/* 3CC Compartment Visualization */
.compartment-section {
  margin-bottom: 24px;
}

.compartment-bar-container {
  margin-bottom: 16px;
}

.compartment-bar {
  display: flex;
  height: 24px;
  background: var(--color-gray-200);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  margin-bottom: 8px;
}

.compartment-fill {
  height: 100%;
  transition: width 1.5s ease;
}

.compartment-fill.resting { background: var(--color-apple-green); }
.compartment-fill.active { background: var(--color-apple-blue); }
.compartment-fill.fatigued { background: var(--color-accent); }

.compartment-legend {
  display: flex;
  gap: 16px;
  justify-content: center;
  font-size: var(--font-size-footnote);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-gray-600);
}

.legend-item i { font-size: var(--font-size-icon); }
.legend-item.resting i { color: var(--color-apple-green); }
.legend-item.active i { color: var(--color-apple-blue); }
.legend-item.fatigued i { color: var(--color-accent); }

.fatigue-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

@media (max-width: 640px) {
  .fatigue-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

.fatigue-stat {
  background: var(--color-gray-50);
  border-radius: var(--radius-xl);
  padding: 12px;
  text-align: center;
}

.fatigue-stat-label {
  display: block;
  font-size: var(--font-size-footnote);
  color: var(--color-gray-500);
  margin-bottom: 4px;
}

.fatigue-stat strong {
  font-size: var(--font-size-subhead);
  color: var(--color-gray-900);
}

/* Current Posture */
.posture-section {
  margin-bottom: 24px;
}

.posture-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

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

.posture-item {
  background: var(--color-gray-50);
  border-radius: var(--radius-xl);
  padding: 12px;
  text-align: center;
}

.posture-label {
  display: block;
  font-size: var(--font-size-footnote);
  color: var(--color-gray-500);
  margin-bottom: 4px;
}

.posture-value {
  font-size: var(--font-size-title-lg);
  font-weight: 600;
  transition: color 1.5s ease;
}

.posture-value.good { color: var(--color-apple-green); }
.posture-value.low { color: var(--color-apple-cyan); }
.posture-value.moderate { color: var(--color-apple-orange); }
.posture-value.high { color: var(--color-accent); }
.posture-value.critical { color: var(--color-accent); font-weight: 700; }

/* Muscle Strain Visualization */
.muscle-strain-section {
  margin-bottom: 20px;
}

.muscle-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

@media (max-width: 768px) {
  .muscle-grid {
    grid-template-columns: 1fr;
  }
}

.muscle-side, .muscle-center {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.muscle-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.muscle-label {
  font-size: var(--font-size-footnote);
  color: var(--color-gray-600);
  width: 90px;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.muscle-label.most-strained {
  color: var(--color-accent);
  font-weight: 600;
}

.muscle-bar-track {
  flex: 1;
  height: 8px;
  background: var(--color-gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.muscle-bar-fill {
  height: 100%;
  background: var(--color-apple-green);
  border-radius: var(--radius-md);
  transition: width 2s ease, background 1s ease;
  width: 0%;
}

.asymmetry-indicator {
  text-align: center;
  margin-top: 12px;
  font-size: var(--font-size-body-sm);
  color: var(--color-gray-600);
}

.asymmetry-indicator strong {
  color: var(--color-gray-900);
}

/* Calibrate Section */
.neck-calibrate-section {
  padding-top: 16px;
  border-top: 1px solid var(--color-gray-200);
  text-align: center;
}

.btn--secondary {
  background: var(--color-gray-100);
  color: var(--color-gray-700);
  border: 1px solid var(--color-gray-200);
}

.btn--secondary:hover {
  background: var(--color-gray-200);
  color: var(--color-gray-900);
}

/* ===========================
   DARK MODE TOGGLE BUTTON
   =========================== */

.dark-mode-toggle {
  position: fixed;
  bottom: 24px;
  right: 24px;
  height: 48px;
  padding: 0 20px 0 16px;
  border-radius: var(--radius-full);
  border: 2px solid rgba(0, 0, 0, 0.1);
  background: linear-gradient(135deg, #ffffff 0%, #f5f5f7 100%);
  color: #1d1d1f;
  cursor: pointer;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--font-size-body);
  font-weight: 600;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.15),
    0 0 0 0 rgba(10, 132, 255, 0.4);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  animation: theme-toggle-pulse 3s ease-in-out infinite;
}

@keyframes theme-toggle-pulse {
  0%, 100% {
    box-shadow:
      0 4px 20px rgba(0, 0, 0, 0.15),
      0 0 0 0 rgba(10, 132, 255, 0.4);
  }
  50% {
    box-shadow:
      0 4px 20px rgba(0, 0, 0, 0.15),
      0 0 0 8px rgba(10, 132, 255, 0);
  }
}

.dark-mode-toggle:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.2),
    0 0 0 0 rgba(10, 132, 255, 0);
  animation: none;
  border-color: var(--color-primary);
}

.dark-mode-toggle__icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff9500 0%, #ffcc00 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-body);
  color: white;
  position: relative;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(255, 149, 0, 0.4);
}

.dark-mode-toggle .icon-sun,
.dark-mode-toggle .icon-moon {
  position: absolute;
  transition: all 0.4s ease;
}

.dark-mode-toggle .icon-sun {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.dark-mode-toggle .icon-moon {
  opacity: 0;
  transform: rotate(-90deg) scale(0.5);
}

.dark-mode-toggle__label {
  white-space: nowrap;
}

.dark-mode-toggle__label::after {
  content: 'Тёмная тема';
}

/* ===========================
   DARK MODE CABINET STYLES
   =========================== */

/* Body background for dark mode */
body.dark-mode {
  background: #0e0e10;
}

.dark-mode .header-spacer {
  background: #0e0e10;
}

.dark-mode .cabinet {
  background: #0e0e10;
}

.dark-mode .dashboard-card {
  background: var(--color-apple-bg-dark);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.3),
    0 4px 12px rgba(0, 0, 0, 0.2);
}

.dark-mode .dashboard-card:hover {
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.4),
    0 8px 24px rgba(0, 0, 0, 0.3);
}

.dark-mode .dashboard-card--camera {
  background: var(--color-apple-bg-dark);
}

/* Dark mode toggle button state */
.dark-mode .dark-mode-toggle {
  background: linear-gradient(135deg, #2c2c2e 0%, #1c1c1e 100%);
  border-color: rgba(255, 255, 255, 0.1);
  color: #f5f5f7;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.4),
    0 0 0 0 rgba(94, 92, 230, 0.4);
  animation: theme-toggle-pulse-dark 3s ease-in-out infinite;
}

@keyframes theme-toggle-pulse-dark {
  0%, 100% {
    box-shadow:
      0 4px 20px rgba(0, 0, 0, 0.4),
      0 0 0 0 rgba(94, 92, 230, 0.4);
  }
  50% {
    box-shadow:
      0 4px 20px rgba(0, 0, 0, 0.4),
      0 0 0 8px rgba(94, 92, 230, 0);
  }
}

.dark-mode .dark-mode-toggle:hover {
  border-color: var(--color-apple-indigo);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 0 0 0 rgba(94, 92, 230, 0);
  animation: none;
}

.dark-mode .dark-mode-toggle__icon {
  background: linear-gradient(135deg, #5e5ce6 0%, #bf5af2 100%);
  box-shadow: 0 2px 8px rgba(94, 92, 230, 0.5);
}

.dark-mode .dark-mode-toggle .icon-sun {
  opacity: 0;
  transform: rotate(90deg) scale(0.5);
}

.dark-mode .dark-mode-toggle .icon-moon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.dark-mode .dark-mode-toggle__label::after {
  content: 'Светлая тема';
}

/* Card backgrounds */
.dark-mode .stat-item,
.dark-mode .state-indicator,
.dark-mode .posture-item,
.dark-mode .fatigue-stat,
.dark-mode .neck-risk-section,
.dark-mode .discovered-state {
  background: #2c2c2e;
}

.dark-mode .stat-item:hover,
.dark-mode .state-indicator:hover,
.dark-mode .discovered-state:hover {
  background: #3a3a3c;
}

.dark-mode .state-indicator:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Text colors */
.dark-mode .card-title {
  color: #a1a1a6;
}

.dark-mode .performance-label,
.dark-mode .stat-label,
.dark-mode .state-indicator__label,
.dark-mode .posture-label,
.dark-mode .fatigue-stat-label,
.dark-mode .state-mini-bar__label,
.dark-mode .pattern-section-label,
.dark-mode .section-label-small,
.dark-mode .legend-item,
.dark-mode .muscle-label,
.dark-mode .asymmetry-indicator,
.dark-mode .neck-risk-label-text {
  color: #8e8e93;
}

.dark-mode .stat-value,
.dark-mode .state-indicator__value,
.dark-mode .fatigue-stat strong,
.dark-mode .neck-risk-info strong {
  color: #f5f5f7;
}

.dark-mode .state-indicator__status {
  color: #d1d1d6;
}

.dark-mode .state-mini-bar__value {
  color: #d1d1d6;
}

.dark-mode .asymmetry-indicator strong {
  color: #f5f5f7;
}

/* Advice card */
.dark-mode .advice-content {
  background: linear-gradient(135deg, #2c2c2e 0%, #1c1c1e 100%);
  border-left-color: var(--color-primary);
}

.dark-mode .advice-text {
  color: #d1d1d6;
}

.dark-mode .advice-text.empty {
  color: #8e8e93;
}

/* Progress bars and tracks */
.dark-mode .performance-bar,
.dark-mode .state-mini-bar__track,
.dark-mode .muscle-bar-track,
.dark-mode .compartment-bar {
  background: #3a3a3c;
}

/* Pattern card dark sections */
.dark-mode .pattern-current-state {
  background: linear-gradient(135deg, #000000 0%, #1c1c1e 100%);
}

.dark-mode .pattern-meta {
  color: #8e8e93;
}

.dark-mode .pattern-meta strong {
  color: #d1d1d6;
}

/* Pattern buttons */
.dark-mode .pattern-btn {
  background: #3a3a3c;
  color: #d1d1d6;
}

.dark-mode .pattern-btn--focused {
  background: rgba(48, 209, 88, 0.2);
  color: var(--color-apple-green);
}

.dark-mode .pattern-btn--tired {
  background: rgba(255, 149, 0, 0.2);
  color: var(--color-apple-orange);
}

.dark-mode .pattern-btn--stressed {
  background: rgba(255, 55, 95, 0.2);
  color: var(--color-accent);
}

.dark-mode .pattern-btn--relaxed {
  background: rgba(90, 200, 250, 0.2);
  color: var(--color-apple-cyan);
}

/* Buttons */
.dark-mode .btn--secondary {
  background: #3a3a3c;
  color: #d1d1d6;
  border-color: #48484a;
}

.dark-mode .btn--secondary:hover {
  background: #48484a;
  color: #f5f5f7;
}

.dark-mode .btn--ghost {
  background: transparent;
  color: #8e8e93;
  border-color: #3a3a3c;
}

.dark-mode .btn--ghost:hover {
  background: #2c2c2e;
  color: #d1d1d6;
}

/* Export section */
.dark-mode .export-section,
.dark-mode .pattern-export-section,
.dark-mode .neck-calibrate-section {
  border-top-color: #3a3a3c;
}

/* Card action buttons */
.dark-mode .card-action {
  color: #8e8e93;
}

.dark-mode .card-action:hover {
  background: #3a3a3c;
  color: #f5f5f7;
}

/* Overall state display (already dark) */
.dark-mode .overall-state {
  background: linear-gradient(135deg, #000000 0%, #1c1c1e 100%);
}

.dark-mode .overall-state__circle::before {
  background: #000000;
}

/* History card specific */
.dark-mode .dashboard-card--history {
  background: linear-gradient(135deg, rgba(90, 200, 250, 0.08) 0%, rgba(10, 132, 255, 0.08) 100%);
}

.dark-mode .history-stat {
  background: #2c2c2e;
}

.dark-mode .history-mini-chart {
  background: #2c2c2e;
}

.dark-mode .history-session-item {
  background: #2c2c2e;
  border-color: #3a3a3c;
}

.dark-mode .history-session-item:hover {
  border-color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(10, 132, 255, 0.25);
}

.dark-mode .history-session-item__date {
  color: #f5f5f7;
}

.dark-mode .history-session-item__duration {
  color: #8e8e93;
}

.dark-mode .history-empty {
  color: #636366;
}

/* Scroll bars for dark mode */
.dark-mode ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.dark-mode ::-webkit-scrollbar-track {
  background: var(--color-apple-bg-dark);
}

.dark-mode ::-webkit-scrollbar-thumb {
  background: #3a3a3c;
  border-radius: var(--radius-md);
}

.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: #48484a;
}

/* Start screen */
.dark-mode .start-screen__title {
  color: #ffffff;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .dark-mode-toggle {
    bottom: 16px;
    right: 16px;
    height: 44px;
    padding: 0 16px 0 12px;
    font-size: var(--font-size-body-sm);
    gap: 8px;
  }

  .dark-mode-toggle__icon {
    width: 24px;
    height: 24px;
    font-size: var(--font-size-caption);
  }
}

@media (max-width: 480px) {
  .dark-mode-toggle {
    padding: 0 12px;
  }

  .dark-mode-toggle__label {
    display: none;
  }

  .dark-mode-toggle__icon {
    width: 28px;
    height: 28px;
    font-size: var(--font-size-body);
  }

  /* Cabinet wrapper - ensure proper stacking on small mobile */
  .cabinet-wrapper {
    padding: 12px !important;
    gap: 12px !important;
  }

  .cabinet-wrapper .cabinet {
    padding: 8px !important;
  }

  .cabinet-wrapper .sidebar {
    gap: 10px !important;
  }
}

/* ===========================
   FACE FITNESS PANEL
   =========================== */

/* Face Fitness Exercise Panel */
.face-fitness-panel {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 320px;
  background: var(--color-white);
  border-radius: var(--radius-3xl);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.15),
    0 4px 16px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
              opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.face-fitness-panel.hidden {
  transform: translateY(20px);
  opacity: 0;
  pointer-events: none;
}

/* Dark mode support */
[data-theme="dark"] .face-fitness-panel {
  background: var(--color-gray-900);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 4px 16px rgba(0, 0, 0, 0.3);
}

/* Header */
.ff-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  color: white;
}

.ff-title {
  font-weight: 600;
  font-size: var(--font-size-body);
}

.ff-close-btn {
  background: none;
  border: none;
  color: white;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.2s ease;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ff-close-btn:hover {
  opacity: 1;
}

/* Content */
.ff-content {
  padding: 20px;
}

.ff-instruction {
  font-size: var(--font-size-lg);
  font-weight: 500;
  text-align: center;
  margin-bottom: 20px;
  min-height: 54px;
  color: var(--color-gray-900);
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-theme="dark"] .ff-instruction {
  color: var(--color-gray-100);
}

/* Progress Bar */
.ff-progress-container {
  height: 8px;
  background: var(--color-gray-100);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: 16px;
}

[data-theme="dark"] .ff-progress-container {
  background: var(--color-gray-800);
}

.ff-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--color-success), var(--color-success-lime));
  border-radius: var(--radius-full);
  transition: width 0.1s linear;
  width: 0%;
}

/* Validation Feedback */
.ff-validation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border-radius: var(--radius-lg);
  background: var(--color-gray-50);
  margin-bottom: 12px;
  transition: all 0.3s ease;
}

[data-theme="dark"] .ff-validation {
  background: var(--color-gray-800);
}

.ff-validation.valid {
  background: rgba(39, 174, 96, 0.1);
  color: var(--color-success);
}

[data-theme="dark"] .ff-validation.valid {
  background: rgba(39, 174, 96, 0.2);
}

.ff-validation.invalid {
  background: rgba(231, 76, 60, 0.1);
  color: var(--color-danger);
}

[data-theme="dark"] .ff-validation.invalid {
  background: rgba(231, 76, 60, 0.2);
}

.ff-validation-icon {
  font-size: var(--font-size-lg);
}

.ff-validation-text {
  font-size: var(--font-size-body-sm);
  font-weight: 500;
}

/* Step Counter */
.ff-step-counter {
  text-align: center;
  font-size: var(--font-size-caption);
  color: var(--color-gray-600);
}

[data-theme="dark"] .ff-step-counter {
  color: var(--color-gray-400);
}

/* Footer */
.ff-footer {
  padding: 12px 16px;
  background: var(--color-gray-50);
  border-top: 1px solid var(--color-gray-200);
}

[data-theme="dark"] .ff-footer {
  background: var(--color-gray-800);
  border-top: 1px solid var(--color-gray-700);
}

.ff-evidence {
  font-size: var(--font-size-xs);
  color: var(--color-gray-600);
}

[data-theme="dark"] .ff-evidence {
  color: var(--color-gray-400);
}

/* ===========================
   EXERCISE SUGGESTION TOAST
   =========================== */

.exercise-suggestion {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-white);
  border-radius: var(--radius-2xl);
  box-shadow: 
    0 4px 20px rgba(0, 0, 0, 0.15),
    0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 16px 20px;
  z-index: 999;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
              opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  max-width: 90%;
}

.exercise-suggestion.hidden {
  transform: translateX(-50%) translateY(20px);
  opacity: 0;
  pointer-events: none;
}

[data-theme="dark"] .exercise-suggestion {
  background: var(--color-gray-900);
  box-shadow: 
    0 4px 20px rgba(0, 0, 0, 0.4),
    0 2px 8px rgba(0, 0, 0, 0.3);
}

.suggestion-content {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

#suggestion-text {
  font-size: var(--font-size-body);
  color: var(--color-gray-900);
  flex: 1;
  min-width: 200px;
  text-align: center;
}

[data-theme="dark"] #suggestion-text {
  color: var(--color-gray-100);
}

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

.suggestion-actions .btn {
  padding: 8px 16px;
  font-size: var(--font-size-body-sm);
  border-radius: var(--radius-lg);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 500;
}

.suggestion-actions .btn-primary {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  color: white;
}

.suggestion-actions .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3);
}

.suggestion-actions .btn-secondary {
  background: var(--color-gray-100);
  color: var(--color-gray-700);
}

[data-theme="dark"] .suggestion-actions .btn-secondary {
  background: var(--color-gray-700);
  color: var(--color-gray-300);
}

.suggestion-actions .btn-secondary:hover {
  background: var(--color-gray-200);
}

[data-theme="dark"] .suggestion-actions .btn-secondary:hover {
  background: var(--color-gray-600);
}

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

@media (max-width: 768px) {
  .face-fitness-panel {
    width: calc(100% - 40px);
    max-width: 360px;
    right: 20px;
    left: 20px;
    margin: 0 auto;
  }

  .exercise-suggestion {
    bottom: 80px;
    width: calc(100% - 40px);
    max-width: 360px;
  }

  .suggestion-content {
    flex-direction: column;
    gap: 12px;
  }

  #suggestion-text {
    min-width: 100%;
  }

  .suggestion-actions {
    width: 100%;
  }

  .suggestion-actions .btn {
    flex: 1;
  }
}

@media (max-width: 480px) {
  .face-fitness-panel {
    width: calc(100% - 24px);
    right: 12px;
    left: 12px;
    bottom: 12px;
  }

  .ff-content {
    padding: 16px;
  }

  .ff-instruction {
    font-size: var(--font-size-body);
    min-height: 48px;
  }

  .exercise-suggestion {
    bottom: 60px;
    width: calc(100% - 24px);
  }
}
/*
 * Focus24 Design System
 * A unified design tokens for the tiredness tracking application
 *
 * Usage: var(--color-name), var(--font-size-name)
 * Example: background-color: var(--color-bg-primary);
 * Example: font-size: var(--font-size-body);
 */

:root {
  /* ===========================
     TYPOGRAPHY - Font Sizes
     Based on Apple Human Interface Guidelines
     =========================== */

  /* Icon & Micro */
  --font-size-icon: 8px;          /* Icon symbols */
  --font-size-micro: 10px;        /* Tiny labels, badges */

  /* Captions & Small Text */
  --font-size-footnote: 11px;     /* Footnotes, status indicators */
  --font-size-caption: 12px;      /* Captions, tags, small labels */
  --font-size-body-sm: 13px;      /* Small body text */

  /* Body Text */
  --font-size-body: 14px;         /* Default body text */
  --font-size-body-lg: 15px;      /* Larger body text */

  /* Subheadlines & Titles */
  --font-size-subhead: 16px;      /* Subheadlines */
  --font-size-title-sm: 17px;     /* Small titles */
  --font-size-title: 18px;        /* Section titles */
  --font-size-title-lg: 20px;     /* Large titles */

  /* Headings */
  --font-size-h3: 22px;           /* Heading level 3 */
  --font-size-h2: 24px;           /* Heading level 2 */
  --font-size-h1: 28px;           /* Heading level 1 */

  /* Display Text */
  --font-size-display-sm: 32px;   /* Small display text */
  --font-size-display: 36px;      /* Display text */
  --font-size-display-lg: 42px;   /* Large display text */

  /* Hero Text */
  --font-size-hero-sm: 48px;      /* Small hero text */
  --font-size-hero: 56px;         /* Hero text */
  --font-size-hero-lg: 64px;      /* Large hero text */

  /* ===========================
     TYPOGRAPHY - Font Weights
     =========================== */

  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* ===========================
     BORDER RADIUS
     Consistent rounded corners scale
     =========================== */

  /* Small radii - for small elements */
  --radius-xs: 2px;               /* Very small, subtle rounding */
  --radius-sm: 3px;               /* Small elements, progress bars */
  --radius-md: 4px;               /* Scrollbars, tiny buttons */
  --radius-base: 6px;             /* Small inputs, tags */
  --radius-lg: 8px;               /* Default buttons, small cards */

  /* Medium radii - for cards and containers */
  --radius-xl: 10px;              /* Medium cards, indicators */
  --radius-2xl: 12px;             /* Standard cards, buttons */
  --radius-3xl: 14px;             /* Large cards */
  --radius-4xl: 16px;             /* Extra large cards, modals */

  /* Large radii - for hero elements */
  --radius-5xl: 20px;             /* Feature cards, large containers */
  --radius-6xl: 24px;             /* Hero elements */
  --radius-7xl: 32px;             /* Extra large hero containers */

  /* Special radii */
  --radius-pill: 50px;            /* Pill-shaped buttons, badges */
  --radius-full: 100px;           /* Fully rounded elements */
  --radius-circle: 50%;           /* Perfect circles */

  /* ===========================
     BASE COLORS
     =========================== */

  /* White & Black */
  --color-white: #ffffff;
  --color-black: #000000;

  /* ===========================
     NEUTRAL PALETTE
     Grays from lightest to darkest
     =========================== */

  --color-gray-50: #f9f9f9;   /* Lightest background */
  --color-gray-100: #f1f1f1;  /* Light background */
  --color-gray-200: #ededed;  /* Borders, dividers */
  --color-gray-300: #e5e5e5;  /* Light borders */
  --color-gray-350: #ddd;     /* Subtle borders */
  --color-gray-400: #ccc;     /* Disabled states */
  --color-gray-450: #c9d0d6;  /* Input borders */
  --color-gray-500: #ababab;  /* Medium gray */
  --color-gray-550: #aaa;     /* Muted text */
  --color-gray-600: #858585;  /* Secondary text */
  --color-gray-650: #7d7d7d;  /* Darker secondary */
  --color-gray-700: #5f5f5f;  /* Dark UI elements */
  --color-gray-750: #505050;  /* Dark text */
  --color-gray-800: #444444;  /* Heading text */
  --color-gray-850: #404040;  /* Primary text dark */
  --color-gray-900: #333333;  /* Near black */
  --color-gray-925: #323537;  /* Form text */
  --color-gray-950: #282828;  /* Very dark text */
  --color-gray-975: #111111;  /* Almost black */
  --color-gray-980: #0e0e0e;  /* Logo text */

  /* ===========================
     PRIMARY - Blue
     Main brand/action color
     =========================== */

  --color-primary: #00abff;
  --color-primary-light: #44c5d6;
  --color-primary-lighter: #73feff;
  --color-primary-cyan: #18ffff;
  --color-primary-dark: #0091ea;
  --color-primary-teal: #5bbad5;

  /* ===========================
     BRAND - Orange/Pink Gradient
     Accent colors for branding
     =========================== */

  --color-brand-orange: #eb6538;
  --color-brand-pink: #e91e63;
  --color-brand-orange-light: #f2994a;
  --color-brand-orange-bright: #ff8833;
  --color-brand-orange-warm: #ff9933;
  --color-brand-deep-orange: #ff5722;

  /* ===========================
     SUCCESS/PERFORMANCE - Greens
     Used for positive states
     =========================== */

  --color-success: #64d964;
  --color-success-dark: #4b946a;
  --color-success-strong: #009500;
  --color-success-material: #66bb6a;
  --color-success-lime: #bdf311;
  --color-success-bright: #aeff00;

  /* ===========================
     WARNING - Yellow/Amber
     Used for caution states
     =========================== */

  --color-warning: #f2c94c;
  --color-warning-bright: #ffeb3b;
  --color-warning-lime: #eeff41;

  /* ===========================
     ERROR/DANGER - Reds
     Used for errors and alerts
     =========================== */

  --color-error: #ff0000;
  --color-error-accent: #ff253a;
  --color-error-pink: #ee597b;
  --color-error-coral: #e9736e;
  --color-error-light: #fc8c84;
  --color-error-material: #f44336;

  /* ===========================
     INFO - Purple/Blue
     Supplementary colors
     =========================== */

  --color-info-purple: #651fff;
  --color-info-teal: #009688;
  --color-info-blue-gray: #607d8b;

  /* ===========================
     BRAND ACCENT - Pink/Red
     Main accent for landing/marketing
     =========================== */

  --color-accent: #ff375f;
  --color-accent-light: #ff6b8a;
  --color-accent-hover: #ff4d6d;

  /* ===========================
     APPLE SYSTEM COLORS
     Used for dashboard/cabinet UI
     =========================== */

  --color-apple-green: #30d158;
  --color-apple-green-alt: #34c759;
  --color-apple-blue: #0a84ff;
  --color-apple-purple: #bf5af2;
  --color-apple-orange: #ff9500;
  --color-apple-yellow: #ffd60a;
  --color-apple-yellow-alt: #ffcc00;
  --color-apple-cyan: #5ac8fa;
  --color-apple-red: #ff453a;
  --color-apple-indigo: #5e5ce6;

  /* Apple UI Backgrounds */
  --color-apple-bg-dark: #1c1c1e;
  --color-apple-bg-darker: #0e0e10;
  --color-apple-bg-elevated: #2c2c2e;
  --color-apple-bg-tertiary: #3a3a3c;
  --color-apple-bg-quaternary: #48484a;

  /* Apple UI Text */
  --color-apple-text-primary: #f5f5f7;
  --color-apple-text-secondary: #a1a1a6;
  --color-apple-text-tertiary: #8e8e93;
  --color-apple-text-quaternary: #636366;
  --color-apple-text-dark: #1d1d1f;
  --color-apple-text-dark-secondary: #6e6e73;

  /* Apple UI Borders */
  --color-apple-border: #3a3a3c;
  --color-apple-border-light: #48484a;
  --color-apple-border-lighter: #d1d1d6;

  /* ===========================
     SOCIAL BRAND COLORS
     =========================== */

  --color-social-telegram: #0088cc;
  --color-social-vk: #4680c2;
  --color-social-twitter: #1da1f2;

  /* ===========================
     SPECIAL UI COLORS
     =========================== */

  --color-navy: #202e64;
  --color-navy-dark: #243b55;

  /* ===========================
     SEMANTIC ALIASES
     Use these for consistent UI
     =========================== */

  /* Backgrounds */
  --color-bg-primary: var(--color-white);
  --color-bg-secondary: var(--color-gray-50);
  --color-bg-tertiary: var(--color-gray-200);
  --color-bg-dark: var(--color-gray-850);
  --color-bg-darker: var(--color-gray-900);

  /* Text */
  --color-text-primary: var(--color-gray-850);
  --color-text-secondary: var(--color-gray-600);
  --color-text-muted: var(--color-gray-550);
  --color-text-light: var(--color-gray-200);
  --color-text-inverse: var(--color-white);
  --color-text-dark: var(--color-gray-950);

  /* Borders */
  --color-border-light: var(--color-gray-200);
  --color-border-medium: var(--color-gray-400);
  --color-border-dark: var(--color-black);
  --color-border-input: var(--color-gray-450);

  /* Interactive */
  --color-button-primary: var(--color-primary);
  --color-button-primary-text: var(--color-white);
  --color-link: var(--color-gray-600);

  /* Performance Indicator */
  --color-performance-good: var(--color-success);
  --color-performance-warning: var(--color-warning);
  --color-performance-bad: var(--color-error);

  /* Advice/Hints */
  --color-advice-bg: var(--color-gray-200);
  --color-advice-text: var(--color-gray-650);
  --color-advice-title: var(--color-primary);

  /* ===========================
     CHART COLORS
     For data visualization
     =========================== */

  --color-chart-1: var(--color-primary);
  --color-chart-2: var(--color-info-purple);
  --color-chart-3: var(--color-error-material);
  --color-chart-4: var(--color-warning-lime);
  --color-chart-5: var(--color-warning-bright);
  --color-chart-6: var(--color-brand-deep-orange);
  --color-chart-7: #757575;
  --color-chart-8: var(--color-info-blue-gray);
  --color-chart-9: var(--color-success-material);
  --color-chart-10: var(--color-primary-cyan);
  --color-chart-11: var(--color-primary-dark);
  --color-chart-12: var(--color-info-teal);
}

/* ===========================
   DARK MODE SUPPORT
   =========================== */

/* Dark mode class-based implementation */
.dark-mode {
  /* Base colors */
  --color-bg-primary: #1a1a1c;
  --color-bg-secondary: #0e0e10;
  --color-bg-tertiary: #2c2c2e;
  --color-bg-dark: #000000;
  --color-bg-darker: #000000;

  /* Text colors */
  --color-text-primary: #f5f5f7;
  --color-text-secondary: #a1a1a6;
  --color-text-muted: #8e8e93;
  --color-text-light: #3a3a3c;
  --color-text-inverse: #1d1d1f;
  --color-text-dark: #ffffff;

  /* Gray scale (inverted for dark mode) */
  --color-gray-50: #1c1c1e;
  --color-gray-100: #2c2c2e;
  --color-gray-200: #3a3a3c;
  --color-gray-300: #48484a;
  --color-gray-350: #545456;
  --color-gray-400: #636366;
  --color-gray-450: #6c6c70;
  --color-gray-500: #8e8e93;
  --color-gray-550: #98989d;
  --color-gray-600: #aeaeb2;
  --color-gray-650: #c7c7cc;
  --color-gray-700: #d1d1d6;
  --color-gray-750: #e5e5ea;
  --color-gray-800: #f2f2f7;
  --color-gray-850: #f5f5f7;
  --color-gray-900: #ffffff;
  --color-gray-925: #ffffff;
  --color-gray-950: #ffffff;
  --color-gray-975: #f5f5f7;
  --color-gray-980: #ffffff;

  /* White & Black (swapped semantically) */
  --color-white: #1a1a1c;
  --color-black: #ffffff;

  /* Borders */
  --color-border-light: #3a3a3c;
  --color-border-medium: #48484a;
  --color-border-dark: #636366;
  --color-border-input: #48484a;

  /* Advice/Hints */
  --color-advice-bg: #2c2c2e;
  --color-advice-text: #a1a1a6;
}

/* Auto dark mode based on system preference */
@media (prefers-color-scheme: dark) {
  .dark-mode-auto {
    /* Same variables as .dark-mode */
    --color-bg-primary: #1a1a1c;
    --color-bg-secondary: #0e0e10;
    --color-bg-tertiary: #2c2c2e;
    --color-bg-dark: #000000;
    --color-bg-darker: #000000;
    --color-text-primary: #f5f5f7;
    --color-text-secondary: #a1a1a6;
    --color-text-muted: #8e8e93;
    --color-text-light: #3a3a3c;
    --color-text-inverse: #1d1d1f;
    --color-text-dark: #ffffff;
    --color-gray-50: #1c1c1e;
    --color-gray-100: #2c2c2e;
    --color-gray-200: #3a3a3c;
    --color-gray-300: #48484a;
    --color-gray-350: #545456;
    --color-gray-400: #636366;
    --color-gray-450: #6c6c70;
    --color-gray-500: #8e8e93;
    --color-gray-550: #98989d;
    --color-gray-600: #aeaeb2;
    --color-gray-650: #c7c7cc;
    --color-gray-700: #d1d1d6;
    --color-gray-750: #e5e5ea;
    --color-gray-800: #f2f2f7;
    --color-gray-850: #f5f5f7;
    --color-gray-900: #ffffff;
    --color-gray-925: #ffffff;
    --color-gray-950: #ffffff;
    --color-gray-975: #f5f5f7;
    --color-gray-980: #ffffff;
    --color-white: #1a1a1c;
    --color-black: #ffffff;
    --color-border-light: #3a3a3c;
    --color-border-medium: #48484a;
    --color-border-dark: #636366;
    --color-border-input: #48484a;
    --color-advice-bg: #2c2c2e;
    --color-advice-text: #a1a1a6;
  }
}
/*
 * Focus24 Dashboard Components
 * Styles for modals, overlays, indicators, and other dashboard UI components
 */

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

.page-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.page-loader.hidden {
  opacity: 0;
  visibility: hidden;
}

.page-loader__content {
  text-align: center;
}

.page-loader__spinner {
  width: 48px;
  height: 48px;
  border: 3px solid rgba(10, 132, 255, 0.2);
  border-top-color: #0a84ff;
  border-radius: 50%;
  animation: loader-spin 1s linear infinite;
  margin: 0 auto 16px;
}

@keyframes loader-spin {
  to { transform: rotate(360deg); }
}

.page-loader__text {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
  font-size: 24px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.5px;
}

/* ===========================
   CONSENT MODAL (152-FZ)
   =========================== */

.consent-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 15, 20, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  padding: 16px;
  overflow-y: auto;
}

.consent-modal__content {
  text-align: center;
  width: 100%;
  max-width: 520px;
  animation: modalFadeIn 0.4s ease;
}

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

.consent-modal__icon {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #30d158 0%, #34c759 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  font-size: 20px;
  color: white;
}

.consent-modal__title {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}

.consent-modal__description {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 12px;
  line-height: 1.4;
}

.consent-modal__info {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 12px;
  text-align: left;
}

.consent-modal__info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}

.consent-modal__info-item i {
  width: 14px;
  font-size: 12px;
  color: #30d158;
  flex-shrink: 0;
}

.consent-modal__checkboxes {
  text-align: left;
  margin-bottom: 12px;
}

.consent-modal__checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  margin-bottom: 4px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.consent-modal__checkbox:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
}

.consent-modal__checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  margin-top: 0;
  accent-color: #5e5ce6;
  cursor: pointer;
}

.consent-modal__checkbox-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.4;
  flex: 1;
}

.consent-modal__checkbox-text a,
.consent-modal a {
  color: #0a84ff !important;
  text-decoration: underline !important;
}

.consent-modal__checkbox-text a:hover,
.consent-modal a:hover {
  color: #409cff !important;
}

.consent-modal__age-minor {
  display: inline;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}

.consent-modal__error {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  background: rgba(255, 59, 48, 0.15);
  border: 1px solid rgba(255, 59, 48, 0.3);
  border-radius: 6px;
  margin-bottom: 10px;
  color: #ff6b6b;
  font-size: 12px;
}

.consent-modal__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 14px;
}

/* Light mode consent modal */
[data-theme="light"] .consent-modal {
  background: rgba(255, 255, 255, 0.98);
}

[data-theme="light"] .consent-modal__title {
  color: #1a1a1a;
}

[data-theme="light"] .consent-modal__description {
  color: #666;
}

[data-theme="light"] .consent-modal__info {
  background: #f5f5f7;
}

[data-theme="light"] .consent-modal__info-item {
  color: #333;
}

[data-theme="light"] .consent-modal__checkbox {
  background: #fafafa;
  border-color: #e0e0e0;
}

[data-theme="light"] .consent-modal__checkbox:hover {
  background: #f0f0f0;
  border-color: #ccc;
}

[data-theme="light"] .consent-modal__checkbox-text {
  color: #333;
}

[data-theme="light"] .consent-modal__age-minor {
  color: #888;
}

@media (max-width: 480px) {
  .consent-modal {
    padding: 12px;
  }

  .consent-modal__icon {
    width: 36px;
    height: 36px;
    font-size: 16px;
    margin-bottom: 8px;
  }

  .consent-modal__title {
    font-size: 17px;
  }

  .consent-modal__description {
    font-size: 13px;
    margin-bottom: 10px;
  }

  .consent-modal__info {
    padding: 6px 10px;
    margin-bottom: 10px;
  }

  .consent-modal__info-item {
    font-size: 11px;
    padding: 3px 0;
  }

  .consent-modal__checkbox {
    padding: 6px 8px;
  }

  .consent-modal__checkbox-text {
    font-size: 11px;
  }

  .consent-modal__btn {
    padding: 8px 12px;
    font-size: 13px;
  }
}

/* ===========================
   TASK MODAL
   =========================== */

.task-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 15, 20, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2001;
  animation: fadeIn 0.5s ease;
}

.task-modal__content {
  text-align: center;
  width: 100%;
  max-width: 440px;
  padding: 40px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 32px;
  backdrop-filter: blur(10px);
  animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.task-modal__icon {
  width: 72px;
  height: 72px;
  background: linear-gradient(135deg, #5e5ce6 0%, #bf5af2 100%);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  font-size: 32px;
  color: #fff;
  box-shadow: 0 12px 40px rgba(94, 92, 230, 0.3);
}

.task-modal__title {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 24px;
}

.task-modal__list {
  max-height: 240px;
  overflow-y: auto;
  margin-bottom: 20px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.2) transparent;
}

.task-modal__list::-webkit-scrollbar {
  width: 6px;
}

.task-modal__list::-webkit-scrollbar-track {
  background: transparent;
}

.task-modal__list::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.2);
  border-radius: 3px;
}

.task-modal__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 16px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 14px;
}

.task-modal__empty i {
  font-size: 32px;
  opacity: 0.5;
}

.task-modal__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.task-modal__item:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(94, 92, 230, 0.4);
  transform: translateX(4px);
}

.task-modal__item-icon {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #5e5ce6 0%, #bf5af2 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #fff;
  flex-shrink: 0;
}

.task-modal__item-info {
  flex: 1;
  min-width: 0;
}

.task-modal__item-name {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-modal__item-time {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.task-modal__item-delete {
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}

.task-modal__item-delete:hover {
  background: rgba(255, 59, 48, 0.2);
  color: #ff3b30;
}

.task-modal__new {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px;
  margin-bottom: 16px;
  align-items: stretch;
}

.task-modal__input {
  width: 100%;
  padding: 14px 18px;
  font-size: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  outline: none;
  transition: all 0.2s;
}

.task-modal__input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.task-modal__input:focus {
  border-color: rgba(94, 92, 230, 0.5);
  background: rgba(255, 255, 255, 0.08);
}

.task-modal__add-btn {
  width: 100%;
  height: 50px;
  background: linear-gradient(135deg, #5e5ce6 0%, #bf5af2 100%);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  margin-top: 4px;
}

.task-modal__add-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(94, 92, 230, 0.4);
}

.task-modal__skip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
}

.task-modal__skip:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.05);
}

/* Task options - urgency and deadline */
.task-modal__options {
  display: flex;
  gap: 12px;
  margin-top: 12px;
  width: 100%;
}

.task-modal__option {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.task-modal__option-label {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.task-modal__select,
.task-modal__datetime {
  padding: 10px 12px;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #fff;
  outline: none;
  transition: all 0.2s;
  font-family: inherit;
  min-width: unset;
  width: 100%;
}

.task-modal__select:focus,
.task-modal__datetime:focus {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
}

.task-modal__select option {
  background: #2a2a3e;
  color: #fff;
}

.task-modal__datetime::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.7;
  cursor: pointer;
}

/* Urgency badges */
.task-urgency {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 10px;
  margin-right: 6px;
  flex-shrink: 0;
}

.task-urgency--small {
  width: 16px;
  height: 16px;
  font-size: 8px;
  margin-right: 4px;
}

.task-urgency--low {
  background: rgba(142, 142, 147, 0.15);
  color: #8e8e93;
}

.task-urgency--medium {
  background: rgba(0, 122, 255, 0.15);
  color: #007aff;
}

.task-urgency--high {
  background: rgba(255, 159, 10, 0.15);
  color: #ff9f0a;
}

.task-urgency--critical {
  background: rgba(255, 69, 58, 0.15);
  color: #ff453a;
}

/* Deadline badges */
.task-deadline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  background: rgba(142, 142, 147, 0.12);
  color: #8e8e93;
  margin-left: 4px;
}

.task-deadline--small {
  padding: 2px 4px;
  font-size: 10px;
  margin-left: 2px;
}

.task-deadline i {
  font-size: 9px;
}

.task-deadline--urgent {
  background: rgba(255, 159, 10, 0.15);
  color: #ff9f0a;
}

.task-deadline--overdue {
  background: rgba(255, 69, 58, 0.15);
  color: #ff453a;
}

[data-theme="dark"] .task-urgency--low {
  background: rgba(142, 142, 147, 0.2);
  color: #aeaeb2;
}

[data-theme="dark"] .task-urgency--medium {
  background: rgba(10, 132, 255, 0.2);
  color: #0a84ff;
}

[data-theme="dark"] .task-urgency--high {
  background: rgba(255, 159, 10, 0.2);
  color: #ff9f0a;
}

[data-theme="dark"] .task-urgency--critical {
  background: rgba(255, 69, 58, 0.2);
  color: #ff453a;
}

[data-theme="dark"] .task-deadline {
  background: rgba(142, 142, 147, 0.15);
  color: #aeaeb2;
}

[data-theme="dark"] .task-deadline--urgent {
  background: rgba(255, 159, 10, 0.2);
  color: #ff9f0a;
}

[data-theme="dark"] .task-deadline--overdue {
  background: rgba(255, 69, 58, 0.2);
  color: #ff453a;
}

@media (max-width: 480px) {
  .task-modal__content {
    margin: 16px;
    padding: 32px 24px;
  }

  .task-modal__title {
    font-size: 20px;
  }

  .task-modal__list {
    max-height: 200px;
  }

  .task-modal__options {
    flex-direction: column;
    gap: 10px;
  }

  .task-modal__option {
    width: 100%;
  }

  .task-modal__select,
  .task-modal__datetime {
    width: 100%;
    font-size: 16px; /* Prevents zoom on iOS */
  }

  .task-modal__item-name {
    font-size: 13px;
  }

  .task-urgency {
    width: 18px;
    height: 18px;
    font-size: 9px;
  }

  .task-deadline {
    font-size: 10px;
    padding: 2px 6px;
  }
}

/* ===========================
   CABINET WRAPPER LAYOUT
   =========================== */

.cabinet-wrapper {
  display: flex;
  gap: 16px;
  padding: 16px;
  padding-top: 0;
  max-width: 1600px;
  margin: 0 auto;
  min-height: calc(100vh - 120px);
}

.cabinet-wrapper .cabinet {
  flex: 1;
  min-width: 0;
}

/* ===========================
   TASK SIDEBAR
   =========================== */

.task-sidebar__content {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  padding: 16px;
  gap: 16px;
}

/* Current Task Section */
.task-sidebar__current {
  background: linear-gradient(135deg, rgba(94, 92, 230, 0.08) 0%, rgba(191, 90, 242, 0.05) 100%);
  border: 1px solid rgba(94, 92, 230, 0.15);
  border-radius: 12px;
  padding: 14px;
}

.task-sidebar__current-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #5e5ce6;
  margin-bottom: 10px;
}

.task-sidebar__current-task {
  display: flex;
  align-items: center;
  gap: 12px;
}

.task-sidebar__current-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #5e5ce6 0%, #bf5af2 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  flex-shrink: 0;
}

.task-sidebar__current-info {
  flex: 1;
  min-width: 0;
}

.task-sidebar__current-name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-sidebar__current-time {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: #5e5ce6;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

.task-sidebar__stop-btn {
  width: 36px;
  height: 36px;
  background: rgba(255, 69, 58, 0.1);
  border: 1px solid rgba(255, 69, 58, 0.2);
  border-radius: 10px;
  color: #ff453a;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}

.task-sidebar__stop-btn:hover {
  background: rgba(255, 69, 58, 0.2);
  transform: scale(1.05);
}

.task-sidebar__no-task {
  text-align: center;
  padding: 8px;
  color: var(--color-text-tertiary, #999);
  font-size: 13px;
}

.task-sidebar__divider {
  height: 1px;
  background: var(--color-border, #e5e5e5);
  margin: 0 -16px;
}

/* Add Task */
.task-sidebar__add {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.task-sidebar__input {
  width: 100%;
  min-width: unset;
  padding: 12px 14px;
  background: var(--color-bg-tertiary, #f5f5f7);
  border: 1px solid var(--color-border, #e5e5e5);
  border-radius: 10px;
  font-size: 14px;
  color: var(--color-text-primary, #1a1a1a);
  transition: all 0.2s;
  box-sizing: border-box;
}

.task-sidebar__input:focus {
  outline: none;
  border-color: #5e5ce6;
  box-shadow: 0 0 0 3px rgba(94, 92, 230, 0.1);
}

.task-sidebar__input::placeholder {
  color: var(--color-text-tertiary, #999);
}

.task-sidebar__add-btn {
  width: 100%;
  padding: 12px 16px;
  background: linear-gradient(135deg, #5e5ce6 0%, #bf5af2 100%);
  border: none;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s;
}

.task-sidebar__add-btn i {
  font-size: 14px;
}

.task-sidebar__add-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(94, 92, 230, 0.3);
}

.task-sidebar__add-btn:active {
  transform: translateY(0);
}

/* Task List */
.task-sidebar__list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 -16px;
  padding: 0 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.1) transparent;
}

.task-sidebar__list::-webkit-scrollbar {
  width: 4px;
}

.task-sidebar__list::-webkit-scrollbar-track {
  background: transparent;
}

.task-sidebar__list::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.1);
  border-radius: 2px;
}

.task-sidebar__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid #e8e8ed;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
}

.task-sidebar__item:hover {
  background: #f5f5f7;
  border-color: rgba(94, 92, 230, 0.3);
}

.task-sidebar__item.active {
  background: rgba(94, 92, 230, 0.08);
  border-color: rgba(94, 92, 230, 0.4);
}

.task-sidebar__item-info {
  flex: 1;
  min-width: 0;
}

.task-sidebar__item-name {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-sidebar__item-time {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--color-text-secondary, #666);
  margin-top: 2px;
}

.task-sidebar__item-time i {
  font-size: 10px;
}

.task-sidebar__item-actions {
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.2s;
}

.task-sidebar__item:hover .task-sidebar__item-actions {
  opacity: 1;
}

.task-sidebar__item-btn {
  width: 26px;
  height: 26px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--color-text-secondary, #666);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  font-size: 12px;
}

.task-sidebar__item-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-text-primary, #1a1a1a);
}

.task-sidebar__item-btn--delete:hover {
  background: rgba(255, 69, 58, 0.1);
  color: #ff453a;
}

.task-sidebar__item-btn--play:hover {
  background: rgba(52, 199, 89, 0.1);
  color: #34c759;
}

/* Empty State */
.task-sidebar__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 16px;
  color: var(--color-text-tertiary, #999);
  font-size: 13px;
  text-align: center;
}

.task-sidebar__empty i {
  font-size: 28px;
  opacity: 0.5;
}

/* ===========================
   CAMERA & FACE DETECTION
   =========================== */

/* Camera canvas styling */
.jeefacetransferCanvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

/* Override old styles */
.cabinet .bordered {
  border: none;
}

/* Face Detection Indicator Styles */
.face-detection-status {
  padding: 8px 0;
}

.face-detection-indicator {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--color-gray-100, #f5f5f7);
  border-radius: 10px;
  transition: all 0.3s ease;
}

.face-detection-indicator.detected {
  background: linear-gradient(135deg, rgba(48, 209, 88, 0.1) 0%, rgba(48, 209, 88, 0.05) 100%);
  border: 1px solid rgba(48, 209, 88, 0.3);
}

.face-detection-indicator.not-detected {
  background: linear-gradient(135deg, rgba(255, 55, 95, 0.1) 0%, rgba(255, 55, 95, 0.05) 100%);
  border: 1px solid rgba(255, 55, 95, 0.3);
}

.face-detection-indicator.resting {
  background: linear-gradient(135deg, rgba(255, 159, 10, 0.1) 0%, rgba(255, 159, 10, 0.05) 100%);
  border: 1px solid rgba(255, 159, 10, 0.3);
  animation: pulse-rest 2s infinite;
}

.face-detection-indicator.warning {
  background: linear-gradient(135deg, rgba(255, 204, 0, 0.1) 0%, rgba(255, 204, 0, 0.05) 100%);
  border: 1px solid rgba(255, 204, 0, 0.3);
  animation: pulse-warning-slow 1.5s infinite;
}

@keyframes pulse-rest {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}

@keyframes pulse-warning-slow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

.face-indicator-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: var(--color-gray-200, #e5e5ea);
  color: var(--color-gray-500, #86868b);
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.face-detection-indicator.detected .face-indicator-icon {
  background: linear-gradient(135deg, #30d158 0%, #34c759 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(48, 209, 88, 0.4);
}

.face-detection-indicator.not-detected .face-indicator-icon {
  background: linear-gradient(135deg, #ff375f 0%, #ff6b6b 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(255, 55, 95, 0.4);
  animation: pulse-warning 2s infinite;
}

.face-detection-indicator.resting .face-indicator-icon {
  background: linear-gradient(135deg, #ff9f0a 0%, #ffb340 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(255, 159, 10, 0.4);
}

.face-detection-indicator.warning .face-indicator-icon {
  background: linear-gradient(135deg, #ffcc00 0%, #ffd740 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(255, 204, 0, 0.4);
}

@keyframes pulse-warning {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.face-indicator-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.face-indicator-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-gray-900, #1d1d1f);
}

.face-detection-indicator.detected .face-indicator-label {
  color: #30d158;
}

.face-detection-indicator.not-detected .face-indicator-label {
  color: #ff375f;
}

.face-detection-indicator.resting .face-indicator-label {
  color: #ff9f0a;
}

.face-detection-indicator.warning .face-indicator-label {
  color: #ffcc00;
}

.face-indicator-hint {
  font-size: 11px;
  color: var(--color-gray-500, #86868b);
}

/* ===========================
   LIGHTING INDICATOR
   =========================== */

.lighting-indicator {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--color-gray-100, #f5f5f7);
  border-radius: 10px;
  transition: all 0.3s ease;
  margin-top: 8px;
}

.lighting-indicator.too-dark {
  background: linear-gradient(135deg, rgba(255, 55, 95, 0.1) 0%, rgba(255, 55, 95, 0.05) 100%);
  border: 1px solid rgba(255, 55, 95, 0.3);
}

.lighting-indicator.low {
  background: linear-gradient(135deg, rgba(255, 159, 10, 0.1) 0%, rgba(255, 159, 10, 0.05) 100%);
  border: 1px solid rgba(255, 159, 10, 0.3);
}

.lighting-indicator.adequate {
  background: linear-gradient(135deg, rgba(48, 209, 88, 0.1) 0%, rgba(48, 209, 88, 0.05) 100%);
  border: 1px solid rgba(48, 209, 88, 0.3);
}

.lighting-indicator-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: var(--color-gray-200, #e5e5ea);
  color: var(--color-gray-500, #86868b);
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.lighting-indicator.too-dark .lighting-indicator-icon {
  background: linear-gradient(135deg, #ff375f 0%, #ff6b6b 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(255, 55, 95, 0.4);
  animation: pulse-warning 2s infinite;
}

.lighting-indicator.low .lighting-indicator-icon {
  background: linear-gradient(135deg, #ff9f0a 0%, #ffb340 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(255, 159, 10, 0.4);
}

.lighting-indicator.adequate .lighting-indicator-icon {
  background: linear-gradient(135deg, #30d158 0%, #34c759 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(48, 209, 88, 0.4);
}

.lighting-indicator-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.lighting-indicator-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-gray-900, #1d1d1f);
}

.lighting-indicator.too-dark .lighting-indicator-label {
  color: #ff375f;
}

.lighting-indicator.low .lighting-indicator-label {
  color: #ff9f0a;
}

.lighting-indicator.adequate .lighting-indicator-label {
  color: #30d158;
}

.lighting-indicator-hint {
  font-size: 11px;
  color: var(--color-gray-500, #86868b);
}

/* ===========================
   AUDIO LEVEL INDICATOR
   =========================== */

.audio-level-indicator {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--color-gray-100, #f5f5f7);
  border-radius: 10px;
  transition: all 0.3s ease;
  margin-top: 8px;
}

.audio-level-indicator.silent {
  background: linear-gradient(135deg, rgba(142, 142, 147, 0.1) 0%, rgba(142, 142, 147, 0.05) 100%);
  border: 1px solid rgba(142, 142, 147, 0.3);
}

.audio-level-indicator.low {
  background: linear-gradient(135deg, rgba(48, 209, 88, 0.1) 0%, rgba(48, 209, 88, 0.05) 100%);
  border: 1px solid rgba(48, 209, 88, 0.3);
}

.audio-level-indicator.medium {
  background: linear-gradient(135deg, rgba(255, 159, 10, 0.1) 0%, rgba(255, 159, 10, 0.05) 100%);
  border: 1px solid rgba(255, 159, 10, 0.3);
}

.audio-level-indicator.high {
  background: linear-gradient(135deg, rgba(255, 55, 95, 0.1) 0%, rgba(255, 55, 95, 0.05) 100%);
  border: 1px solid rgba(255, 55, 95, 0.3);
}

.audio-level-indicator-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: var(--color-gray-200, #e5e5ea);
  color: var(--color-gray-500, #86868b);
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.audio-level-indicator.silent .audio-level-indicator-icon {
  background: linear-gradient(135deg, #8e8e93 0%, #aeaeb2 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(142, 142, 147, 0.4);
}

.audio-level-indicator.low .audio-level-indicator-icon {
  background: linear-gradient(135deg, #30d158 0%, #34c759 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(48, 209, 88, 0.4);
}

.audio-level-indicator.medium .audio-level-indicator-icon {
  background: linear-gradient(135deg, #ff9f0a 0%, #ffb340 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(255, 159, 10, 0.4);
}

.audio-level-indicator.high .audio-level-indicator-icon {
  background: linear-gradient(135deg, #ff375f 0%, #ff6b6b 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(255, 55, 95, 0.4);
  animation: pulse-warning 2s infinite;
}

.audio-level-indicator-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.audio-level-indicator-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-gray-900, #1d1d1f);
}

.audio-level-indicator.silent .audio-level-indicator-label {
  color: #8e8e93;
}

.audio-level-indicator.low .audio-level-indicator-label {
  color: #30d158;
}

.audio-level-indicator.medium .audio-level-indicator-label {
  color: #ff9f0a;
}

.audio-level-indicator.high .audio-level-indicator-label {
  color: #ff375f;
}

.audio-level-indicator-hint {
  font-size: 11px;
  color: var(--color-gray-500, #86868b);
}

/* Audio Level Meter */
.audio-level-meter {
  width: 60px;
  height: 8px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}

.audio-level-meter-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #30d158 0%, #ff9f0a 60%, #ff375f 100%);
  border-radius: 4px;
  transition: width 0.1s ease;
}

/* Camera Preview Container */
.camera-preview {
  padding: 12px;
  margin-top: 12px;
  border-top: 1px solid var(--color-gray-200, #e5e5ea);
}

.camera-preview canvas {
  border-radius: 12px;
  width: 100%;
  max-height: 200px;
  object-fit: cover;
}

/* Card actions container */
.card-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

/* Camera toggle button active state */
.card-action.active {
  background: var(--color-primary, #ff375f);
  color: white;
}

/* ===========================
   PIP PROMO BANNER
   =========================== */

.pip-promo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin-top: 12px;
  background: linear-gradient(135deg, rgba(10, 132, 255, 0.1) 0%, rgba(94, 92, 230, 0.1) 100%);
  border: 1px solid rgba(10, 132, 255, 0.2);
  border-radius: 12px;
  position: relative;
  animation: pip-promo-pulse 3s ease-in-out infinite;
}

@keyframes pip-promo-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(10, 132, 255, 0.2); }
  50% { box-shadow: 0 0 0 6px rgba(10, 132, 255, 0); }
}

.pip-promo.is-hidden {
  display: none;
}

.pip-promo__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #0a84ff 0%, #5e5ce6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: white;
  flex-shrink: 0;
}

.pip-promo__content {
  flex: 1;
  min-width: 0;
}

.pip-promo__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-gray-900, #1d1d1f);
  margin: 0 0 2px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pip-promo__badge {
  display: inline-block;
  padding: 2px 8px;
  background: linear-gradient(135deg, #ff375f 0%, #ff6b8a 100%);
  color: white;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 10px;
}

.pip-promo__text {
  font-size: 12px;
  color: var(--color-gray-500, #86868b);
  margin: 0;
  line-height: 1.4;
}

.pip-promo__btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: linear-gradient(135deg, #0a84ff 0%, #5e5ce6 100%);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.pip-promo__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(10, 132, 255, 0.4);
}

.pip-promo__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  background: rgba(0, 0, 0, 0.05);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--color-gray-500, #86868b);
  cursor: pointer;
  opacity: 0.6;
  transition: all 0.2s ease;
}

.pip-promo__close:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.1);
}

@media (max-width: 600px) {
  .pip-promo {
    flex-wrap: wrap;
    padding-right: 36px;
  }

  .pip-promo__btn {
    width: 100%;
    justify-content: center;
    margin-top: 8px;
  }
}

/* ===========================
   INFO MODAL
   =========================== */

.info-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.info-modal-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

.info-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  width: 90%;
  max-width: 480px;
  max-height: 85vh;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.info-modal.is-active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.info-modal__header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%);
}

.info-modal__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: white;
  background: linear-gradient(135deg, #0a84ff 0%, #5e5ce6 100%);
  flex-shrink: 0;
}

.info-modal__title {
  flex: 1;
  font-size: 18px;
  font-weight: 700;
  color: #1d1d1f;
  margin: 0;
}

.info-modal__close {
  width: 36px;
  height: 36px;
  background: rgba(0, 0, 0, 0.05);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #86868b;
  cursor: pointer;
  transition: all 0.2s ease;
}

.info-modal__close:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #1d1d1f;
}

.info-modal__content {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

.info-modal__content p {
  font-size: 15px;
  line-height: 1.6;
  color: #1d1d1f;
  margin: 0 0 16px;
}

.info-modal__content p:last-child {
  margin-bottom: 0;
}

.info-modal__content h4 {
  font-size: 14px;
  font-weight: 600;
  color: #1d1d1f;
  margin: 20px 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.info-modal__content h4:first-child {
  margin-top: 0;
}

.info-modal__content h4 i {
  color: #0a84ff;
}

.info-modal__content ul {
  margin: 0 0 16px;
  padding-left: 20px;
}

.info-modal__content li {
  font-size: 14px;
  line-height: 1.5;
  color: #6e6e73;
  margin-bottom: 8px;
}

.info-modal__content .info-tip {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(255, 149, 0, 0.1) 0%, rgba(255, 149, 0, 0.05) 100%);
  border: 1px solid rgba(255, 149, 0, 0.2);
  border-radius: 12px;
  margin-top: 16px;
}

.info-modal__content .info-tip i {
  color: #ff9500;
  font-size: 18px;
  margin-top: 2px;
}

.info-modal__content .info-tip p {
  font-size: 13px;
  color: #1d1d1f;
  margin: 0;
}

.card-action--info {
  color: var(--color-gray-400, #aeaeb2);
}

.card-action--info:hover {
  color: var(--color-primary, #ff375f);
  background: rgba(255, 55, 95, 0.1);
}

@media (max-width: 500px) {
  .info-modal {
    width: 95%;
    max-height: 90vh;
    border-radius: 16px;
  }

  .info-modal__header {
    padding: 16px 20px;
  }

  .info-modal__content {
    padding: 20px;
  }
}

/* ===========================
   DARK MODE - DASHBOARD COMPONENTS
   =========================== */

/* Task sidebar dark mode */
.dark-mode .task-sidebar__current {
  background: linear-gradient(135deg, rgba(94, 92, 230, 0.15) 0%, rgba(191, 90, 242, 0.1) 100%);
  border-color: rgba(94, 92, 230, 0.3);
}

.dark-mode .task-sidebar__current-name,
.dark-mode .task-sidebar__item-name {
  color: #fff;
}

.dark-mode .task-sidebar__divider {
  background: rgba(255, 255, 255, 0.1);
}

.dark-mode .task-sidebar__input {
  min-width: unset;
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.dark-mode .task-sidebar__input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.dark-mode .task-sidebar__item {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

.dark-mode .task-sidebar__item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.dark-mode .task-sidebar__item-time {
  color: rgba(255, 255, 255, 0.5);
}

.dark-mode .task-sidebar__item-btn {
  color: rgba(255, 255, 255, 0.6);
}

.dark-mode .task-sidebar__item-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.dark-mode .task-sidebar__list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
}

/* Info Modal dark mode */
.dark-mode .info-modal {
  background: #1c1c1e;
}

.dark-mode .info-modal__header {
  background: linear-gradient(135deg, #2c2c2e 0%, #1c1c1e 100%);
  border-bottom-color: #3a3a3c;
}

.dark-mode .info-modal__title {
  color: #f5f5f7;
}

.dark-mode .info-modal__close {
  background: #3a3a3c;
  color: #a1a1a6;
}

.dark-mode .info-modal__close:hover {
  background: #48484a;
  color: #f5f5f7;
}

.dark-mode .info-modal__content p {
  color: #d1d1d6;
}

.dark-mode .info-modal__content h4 {
  color: #f5f5f7;
}

.dark-mode .info-modal__content li {
  color: #a1a1a6;
}

.dark-mode .info-modal__content .info-tip {
  background: linear-gradient(135deg, rgba(255, 149, 0, 0.15) 0%, rgba(255, 149, 0, 0.08) 100%);
  border-color: rgba(255, 149, 0, 0.3);
}

.dark-mode .info-modal__content .info-tip p {
  color: #d1d1d6;
}

/* Face detection status dark mode */
.dark-mode .face-detection-indicator {
  background: #2c2c2e;
}

.dark-mode .face-detection-indicator.detected {
  background: linear-gradient(135deg, rgba(48, 209, 88, 0.15) 0%, rgba(48, 209, 88, 0.08) 100%);
  border-color: rgba(48, 209, 88, 0.4);
}

.dark-mode .face-detection-indicator.not-detected {
  background: linear-gradient(135deg, rgba(255, 55, 95, 0.15) 0%, rgba(255, 55, 95, 0.08) 100%);
  border-color: rgba(255, 55, 95, 0.4);
}

.dark-mode .face-detection-indicator.resting {
  background: linear-gradient(135deg, rgba(255, 159, 10, 0.15) 0%, rgba(255, 159, 10, 0.08) 100%);
  border-color: rgba(255, 159, 10, 0.4);
}

.dark-mode .face-detection-indicator.warning {
  background: linear-gradient(135deg, rgba(255, 204, 0, 0.15) 0%, rgba(255, 204, 0, 0.08) 100%);
  border-color: rgba(255, 204, 0, 0.4);
}

.dark-mode .face-indicator-icon {
  background: #3a3a3c;
  color: #8e8e93;
}

.dark-mode .face-indicator-label {
  color: #f5f5f7;
}

.dark-mode .face-indicator-hint {
  color: #8e8e93;
}

/* Lighting indicator dark mode */
.dark-mode .lighting-indicator {
  background: #2c2c2e;
}

.dark-mode .lighting-indicator.too-dark {
  background: linear-gradient(135deg, rgba(255, 55, 95, 0.15) 0%, rgba(255, 55, 95, 0.08) 100%);
  border-color: rgba(255, 55, 95, 0.4);
}

.dark-mode .lighting-indicator.low {
  background: linear-gradient(135deg, rgba(255, 159, 10, 0.15) 0%, rgba(255, 159, 10, 0.08) 100%);
  border-color: rgba(255, 159, 10, 0.4);
}

.dark-mode .lighting-indicator.adequate {
  background: linear-gradient(135deg, rgba(48, 209, 88, 0.15) 0%, rgba(48, 209, 88, 0.08) 100%);
  border-color: rgba(48, 209, 88, 0.4);
}

.dark-mode .lighting-indicator-icon {
  background: #3a3a3c;
  color: #8e8e93;
}

.dark-mode .lighting-indicator-label {
  color: #f5f5f7;
}

.dark-mode .lighting-indicator-hint {
  color: #8e8e93;
}

/* Audio level indicator dark mode */
.dark-mode .audio-level-indicator {
  background: #2c2c2e;
}

.dark-mode .audio-level-indicator.silent {
  background: linear-gradient(135deg, rgba(142, 142, 147, 0.15) 0%, rgba(142, 142, 147, 0.08) 100%);
  border-color: rgba(142, 142, 147, 0.4);
}

.dark-mode .audio-level-indicator.low {
  background: linear-gradient(135deg, rgba(48, 209, 88, 0.15) 0%, rgba(48, 209, 88, 0.08) 100%);
  border-color: rgba(48, 209, 88, 0.4);
}

.dark-mode .audio-level-indicator.medium {
  background: linear-gradient(135deg, rgba(255, 159, 10, 0.15) 0%, rgba(255, 159, 10, 0.08) 100%);
  border-color: rgba(255, 159, 10, 0.4);
}

.dark-mode .audio-level-indicator.high {
  background: linear-gradient(135deg, rgba(255, 55, 95, 0.15) 0%, rgba(255, 55, 95, 0.08) 100%);
  border-color: rgba(255, 55, 95, 0.4);
}

.dark-mode .audio-level-indicator-icon {
  background: #3a3a3c;
  color: #8e8e93;
}

.dark-mode .audio-level-indicator-label {
  color: #f5f5f7;
}

.dark-mode .audio-level-indicator-hint {
  color: #8e8e93;
}

.dark-mode .audio-level-meter {
  background: rgba(255, 255, 255, 0.1);
}

/* Camera preview dark mode */
.dark-mode .camera-preview {
  border-top-color: #3a3a3c;
}

/* PiP Promo dark mode */
.dark-mode .pip-promo {
  background: linear-gradient(135deg, rgba(10, 132, 255, 0.15) 0%, rgba(94, 92, 230, 0.15) 100%);
  border-color: rgba(10, 132, 255, 0.3);
}

.dark-mode .pip-promo__title {
  color: #f5f5f7;
}

.dark-mode .pip-promo__text {
  color: #8e8e93;
}

.dark-mode .pip-promo__close {
  background: rgba(255, 255, 255, 0.1);
  color: #8e8e93;
}

.dark-mode .pip-promo__close:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* History stat value colors remain visible */
.dark-mode .history-stat__value {
  color: #f5f5f7;
}

.dark-mode .history-stat__label {
  color: #8e8e93;
}

.dark-mode .history-recent__title {
  color: #8e8e93;
}


.invisible-button {
  border: none;
  background: transparent;
  font-size: 2vw;
}

.box {
  width: 24%;
  height: 10px;
  top: 0;
  pointer-events: none;
  border-radius: var(--radius-base);
}

.block-title {
  margin: 0;
  margin-top: 10px;
  margin-bottom: 10px;
  font-family: Roboto;
  font-style: normal;
  font-weight: 500;
  font-size: var(--font-size-title);
  line-height: 108.6%;  
}

.block-title-lg {
  font-size: var(--font-size-h1);
}

.auto-margin-side {
  margin-left: auto;
  margin-right: auto;
}

.column {
  flex-direction: column;
}

.row {
  flex-direction: row;
  justify-content: space-between;
}


.bordered {
  border: 1px solid var(--color-border-light);
}

.width-12 {
  overflow: hidden;
  background-color: var(--color-bg-primary);
  box-sizing: border-box;
  border-radius: var(--radius-lg);
  padding: 8px;
  width: calc( min( calc( 1330px * 12 /  12 ), calc( 100vw * 12 / 12 ) ) );
  width: calc( 99vw * 12 / 12 - 5px );
}

.width-6 {
  overflow: hidden;
  background-color: var(--color-bg-primary);
  box-sizing: border-box;
  border-radius: var(--radius-lg);
  padding: 8px;
  width: calc( min( calc( 1330px * 6 / 12 ), calc( 100vw * 6 / 12 ) ) );
  width: calc( 99vw * 6 / 12 - 5px );
}

.width-3 {
  overflow: hidden;
  background-color: var(--color-bg-primary);
  box-sizing: border-box;
  border-radius: var(--radius-lg);
  padding: 8px;
  width: calc( min( calc( 1330px * 3 / 12 ), calc( 100vw * 3 / 12 ) ) );
  width: calc( 99vw * 3 / 12 - 5px );
}

.width-4 {
  overflow: hidden;
  background-color: var(--color-bg-primary);
  box-sizing: border-box;
  border-radius: var(--radius-lg);
  padding: 8px;
  width: calc( min( calc( 1330px * 3 / 12 ), calc( 100vw * 3 / 12 ) ) );
  width: calc( 99vw * 4 / 12 - 5px );
}

.width-5 {
  overflow: hidden;
  background-color: var(--color-bg-primary);
  box-sizing: border-box;
  border-radius: var(--radius-lg);
  padding: 8px;
  width: calc( min( calc( 1330px * 5 / 12 ), calc( 100vw * 3 / 12 ) ) );
  width: calc( 99vw * 4.9 / 12  - 5px );
}



@media (max-width: 800px) {
  .width-12 {
    width: 100vw;
  }
  
  .width-7 {
    width: 100vw;
  }
  
  .width-6 {
    width: 100vw;
  }
  
  .width-5 {
    width: 100vw;
  }
  
  .width-4 {
    width: 100vw;
  }
  
  .width-3 {
    width: 100vw;
  }
  
  .invisible-button {
    border: none;
    background: transparent;
    font-size: 4vw;
  }
}


.dark {
  background-color: var(--color-gray-700);
  color: var(--color-white);
}

.max-20vh {
  height: 20vh;
  max-height: 20vh;
  min-height: 150px;
}

.max-40vh {
  height: 40vh;
  max-height: 40vh;
  min-height: 300px; 
}




#level-of-performance-scale {
  transition: 500ms;
}
.jeefacetransferCanvas {
   der: 1px solid var(--color-black);
    z-index: 20;
    /*position: absolute; 
    bottom: 0px; left: 0px;*/
    max-height: 25vh;
}.block-title
.webojiCanvas {
    border: 1px solid var(--color-black);
    z-index: 10;
    position: absolute; 
    max-height: 100%; max-width: 100%; left: 50%; top: 50%;
    width: 100vmin;
    transform: translate(-50%, -50%);
}
/* line 6, app/assets/stylesheets/flow.scss */
input {
  width: calc(80% - 22px);
  max-width: 320px;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-sm);
  font-size: 0.95em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  outline: none;
  padding: 8px 10px 7px;
}

/* line 18, app/assets/stylesheets/flow.scss */
input[type=submit] {
  width: calc(80% - 22px);
  max-width: 320px;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-sm);
  font-size: 0.95em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  outline: none;
  padding: 8px 10px 7px;
  margin-top: 20px;
}

/* line 30, app/assets/stylesheets/flow.scss */
label {
  line-height: 1.5;
  font-size: 72%;
  color: var(--color-gray-925);
  width: calc(100%);
  max-width: 320px;
  margin-right: auto;
  margin-left: 0;
}

/* line 42, app/assets/stylesheets/flow.scss */
header {
  width: 100vw;
  height: 40px;
  background: var(--color-bg-dark);
}
/* =============================================
   Modern Header Styles
   ============================================= */

/* Main Header */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  margin: 0;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.site-header--scrolled {
  padding: 8px 24px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
}

/* Header spacer to prevent content from going under fixed header */
.header-spacer {
  height: 52px;
  margin: 0;
  padding: 0;
}

/* Logo */
.header-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  gap: 8px;
  transition: transform 0.2s ease;
}

.header-logo:hover {
  transform: scale(1.02);
}

.header-logo__text {
  font-size: var(--font-size-h1);
  font-weight: 300;
  color: var(--color-gray-800);
  letter-spacing: -0.5px;
  margin: 0;
}

.header-logo__accent {
  font-weight: 800;
  background: linear-gradient(135deg, var(--color-brand-pink), var(--color-brand-orange));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Burger Menu Button */
.header-burger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  border-radius: var(--radius-2xl);
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--color-gray-600);
  font-size: var(--font-size-title-lg);
  padding: 0;
}

.header-burger:hover {
  background: var(--color-gray-100);
  color: var(--color-gray-800);
}

.header-burger:active {
  transform: scale(0.95);
}

/* Language Switcher */
.header-lang {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-right: 12px;
}

.header-lang__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: var(--radius-base);
  font-size: var(--font-size-caption);
  font-weight: 500;
  color: var(--color-gray-500);
  text-decoration: none;
  transition: all 0.2s ease;
  background: transparent;
}

.header-lang__btn:hover {
  color: var(--color-gray-800);
  background: var(--color-gray-100);
}

.header-lang__btn.active {
  color: var(--color-white);
  background: var(--color-primary);
}

/* Navigation */
.header-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Auth Button (Sign In) */
.header-auth {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border: none;
  border-radius: var(--radius-2xl);
  background: linear-gradient(135deg, var(--color-primary), var(--color-info-purple));
  color: var(--color-white);
  font-size: var(--font-size-body);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 171, 255, 0.3);
}

.header-auth:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 171, 255, 0.4);
}

.header-auth:active {
  transform: translateY(0);
}

.header-auth i {
  font-size: var(--font-size-subhead);
}

/* User Menu */
.header-user {
  position: relative;
}

.header-user__trigger {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  border: none;
  background: var(--color-gray-50);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.2s ease;
}

.header-user__trigger:hover {
  background: var(--color-gray-100);
}

.header-user__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-info-purple));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-size: var(--font-size-subhead);
}

.header-user__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.header-user__name {
  font-size: var(--font-size-body);
  font-weight: 500;
  color: var(--color-gray-800);
}

.header-user__status {
  font-size: var(--font-size-footnote);
  color: var(--color-success);
  display: flex;
  align-items: center;
  gap: 4px;
}

.header-user__status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-success);
}

.header-user__chevron {
  color: var(--color-gray-400);
  font-size: var(--font-size-caption);
  transition: transform 0.2s ease;
}

.header-user:hover .header-user__chevron {
  transform: rotate(180deg);
}

/* User Dropdown Menu */
.header-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: var(--color-white);
  border-radius: var(--radius-4xl);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
  border: 1px solid var(--color-gray-100);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease;
  overflow: hidden;
  z-index: 100;
}

.header-user:hover .header-dropdown,
.header-dropdown:hover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.header-dropdown__header {
  padding: 16px;
  background: linear-gradient(135deg, var(--color-gray-50), var(--color-gray-100));
  border-bottom: 1px solid var(--color-gray-100);
}

.header-dropdown__greeting {
  font-size: var(--font-size-body-sm);
  color: var(--color-gray-500);
  margin: 0 0 4px;
}

.header-dropdown__email {
  font-size: var(--font-size-body);
  font-weight: 500;
  color: var(--color-gray-800);
  margin: 0;
}

.header-dropdown__menu {
  padding: 8px;
}

.header-dropdown__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-xl);
  text-decoration: none;
  color: var(--color-gray-700);
  font-size: var(--font-size-body);
  transition: all 0.15s ease;
}

.header-dropdown__item:hover {
  background: var(--color-gray-50);
  color: var(--color-gray-900);
}

.header-dropdown__item i {
  width: 18px;
  text-align: center;
  color: var(--color-gray-400);
  font-size: var(--font-size-subhead);
}

.header-dropdown__item:hover i {
  color: var(--color-primary);
}

.header-dropdown__divider {
  height: 1px;
  background: var(--color-gray-100);
  margin: 4px 8px;
}

.header-dropdown__item--danger {
  color: var(--color-error);
}

.header-dropdown__item--danger i {
  color: var(--color-error);
}

.header-dropdown__item--danger:hover {
  background: rgba(255, 0, 0, 0.05);
}

/* Button form reset for sign out */
.header-dropdown__menu form {
  margin: 0;
}

.header-dropdown__menu button.header-dropdown__item {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

/* Session Status Indicator */
.header-session {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(100, 217, 100, 0.1);
  border-radius: var(--radius-pill);
  margin-right: 12px;
}

.header-session__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-success);
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.2);
  }
}

.header-session__text {
  font-size: var(--font-size-body-sm);
  font-weight: 500;
  color: var(--color-success);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .site-header {
    padding: 10px 16px;
  }

  .header-spacer {
    height: 64px;
  }

  .header-logo__text {
    font-size: var(--font-size-h2);
  }

  .header-user__info {
    display: none;
  }

  .header-user__trigger {
    padding: 8px;
    border-radius: 50%;
  }

  .header-session__text {
    display: none;
  }

  .header-session {
    padding: 8px;
    margin-right: 8px;
  }

  .header-auth {
    padding: 10px 14px;
  }

  .header-auth span {
    display: none;
  }
}

/* Animation for header appearance */
@keyframes header-slide-down {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.site-header {
  animation: header-slide-down 0.4s ease;
}

/* Dark Mode Header for Landing Page */
body.is-landing .header-spacer {
  display: none;
  height: 0;
  margin: 0;
  padding: 0;
}

body.is-landing .site-header,
.site-header--dark {
  background: rgba(0, 0, 0, 0.5);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

body.is-landing .site-header.site-header--scrolled {
  background: rgba(0, 0, 0, 0.85);
}

body.is-landing .header-burger {
  color: rgba(255, 255, 255, 0.7);
}

body.is-landing .header-burger:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
}

body.is-landing .header-logo__text {
  color: var(--color-white);
}

body.is-landing .header-auth {
  background: var(--color-accent);
}

body.is-landing .header-auth:hover {
  background: var(--color-accent-hover);
}

/* User header components in dark mode (landing page) */
body.is-landing .header-user__trigger {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

body.is-landing .header-user__trigger:hover {
  background: rgba(255, 255, 255, 0.15);
}

body.is-landing .header-user__name {
  color: var(--color-white);
}

body.is-landing .header-user__status {
  color: var(--color-apple-green);
}

body.is-landing .header-user__chevron {
  color: rgba(255, 255, 255, 0.5);
}

body.is-landing .header-session {
  background: rgba(48, 209, 88, 0.15);
}

body.is-landing .header-session__text {
  color: var(--color-apple-green);
}

/* ===========================
   DARK MODE HEADER (Cabinet)
   =========================== */

.dark-mode .site-header {
  background: rgba(28, 28, 30, 0.9);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.dark-mode .site-header--scrolled {
  background: rgba(28, 28, 30, 0.98);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

.dark-mode .header-logo__text {
  color: var(--color-apple-text-primary);
}

.dark-mode .header-burger {
  color: rgba(255, 255, 255, 0.7);
}

.dark-mode .header-burger:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
}

.dark-mode .header-user__trigger {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.dark-mode .header-user__trigger:hover {
  background: rgba(255, 255, 255, 0.12);
}

.dark-mode .header-user__name {
  color: var(--color-apple-text-primary);
}

.dark-mode .header-user__chevron {
  color: rgba(255, 255, 255, 0.4);
}

.dark-mode .header-dropdown {
  background: var(--color-apple-bg-elevated);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.dark-mode .header-dropdown__header {
  background: linear-gradient(135deg, var(--color-apple-bg-tertiary), var(--color-apple-bg-elevated));
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.dark-mode .header-dropdown__greeting {
  color: var(--color-apple-text-tertiary);
}

.dark-mode .header-dropdown__email {
  color: var(--color-apple-text-primary);
}

.dark-mode .header-dropdown__item {
  color: var(--color-apple-border-lighter);
}

.dark-mode .header-dropdown__item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-apple-text-primary);
}

.dark-mode .header-dropdown__item i {
  color: var(--color-apple-text-tertiary);
}

.dark-mode .header-dropdown__item:hover i {
  color: var(--color-apple-blue);
}

.dark-mode .header-dropdown__divider {
  background: rgba(255, 255, 255, 0.08);
}

.dark-mode .header-dropdown__item--danger {
  color: var(--color-apple-red);
}

.dark-mode .header-dropdown__item--danger i {
  color: var(--color-apple-red);
}

.dark-mode .header-dropdown__item--danger:hover {
  background: rgba(255, 69, 58, 0.15);
}

.dark-mode .header-session {
  background: rgba(48, 209, 88, 0.15);
}

.dark-mode .header-session__text {
  color: var(--color-apple-green);
}

/* Extra small screens */
@media (max-width: 480px) {
  .site-header {
    padding: 8px 12px;
  }

  .header-spacer {
    height: 56px;
  }

  .header-logo__text {
    font-size: var(--font-size-h3);
  }

  .header-burger {
    width: 40px;
    height: 40px;
    font-size: var(--font-size-title);
  }

  .header-auth {
    padding: 8px 12px;
    font-size: var(--font-size-body-sm);
  }

  .header-auth i {
    font-size: var(--font-size-body);
  }

  .header-user__trigger {
    padding: 6px;
  }

  .header-user__avatar {
    width: 32px;
    height: 32px;
    font-size: var(--font-size-body);
  }

  .header-session {
    padding: 6px;
    margin-right: 6px;
  }

  .header-session__dot {
    width: 6px;
    height: 6px;
  }

  .header-dropdown {
    min-width: 180px;
    right: -8px;
  }
}
/* =============================================
   Focus24 Landing Page - Clean Modern Design
   ============================================= */

/* Landing Page Body */
body.is-landing {
  margin: 0;
  padding: 0;
  background: var(--color-black);
  overflow-x: hidden;
}

/* Landing Page Container */
.landing-page {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
}

/* Hero Section */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 24px;
  margin: 0;
  position: relative;
  overflow: hidden;
  background: var(--color-black);
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: 800px;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-body);
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 32px;
}

.hero__badge i {
  color: var(--color-apple-green);
  font-size: var(--font-size-icon);
}

.hero__title {
  font-size: clamp(44px, 9vw, 80px);
  font-weight: 600;
  color: var(--color-white);
  line-height: 1.1;
  margin: 0 0 24px;
  letter-spacing: -2px;
}

.hero__title-gradient {
  color: var(--color-accent);
}

.hero__subtitle {
  font-size: clamp(17px, 2.5vw, 21px);
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
  margin: 0 0 48px;
  font-weight: 400;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.hero__cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.hero__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  font-size: var(--font-size-body);
  color: rgba(255, 255, 255, 0.5);
}

.hero__note i {
  color: var(--color-apple-green);
}

/* Trust Bar */
.hero__trust {
  display: flex;
  gap: 32px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-body);
  color: rgba(255, 255, 255, 0.6);
}

.trust-item i {
  color: var(--color-accent);
  font-size: var(--font-size-subhead);
}

.btn-hero {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  border-radius: var(--radius-2xl);
  font-size: var(--font-size-subhead);
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
  border: none;
}

.btn-hero--primary {
  background: var(--color-accent);
  color: var(--color-white);
}

.btn-hero--primary:hover {
  background: var(--color-accent-hover);
  transform: translateY(-2px);
}

.btn-hero--secondary {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.btn-hero--secondary:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* Health Rings - Simplified */
.hero__rings {
  position: absolute;
  bottom: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  height: 200px;
  opacity: 0.4;
  pointer-events: none;
}

.health-ring {
  position: absolute;
  border-radius: 50%;
  border-width: 6px;
  border-style: solid;
}

.health-ring--1 {
  width: 160px;
  height: 160px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-color: var(--color-accent);
}

.health-ring--2 {
  width: 120px;
  height: 120px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-color: var(--color-apple-green);
}

.health-ring--3 {
  width: 80px;
  height: 80px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-color: var(--color-apple-blue);
}

/* Privacy by Design Section */
.privacy-section {
  padding: 64px 24px;
  background: linear-gradient(180deg, var(--color-black) 0%, #0a0a0a 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.privacy-section__content {
  max-width: 900px;
  margin: 0 auto;
}

.privacy-section__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 40px;
}

.privacy-section__header i {
  font-size: var(--font-size-h2);
  color: var(--color-apple-green);
}

.privacy-section__header h2 {
  font-size: var(--font-size-h2);
  font-weight: 600;
  color: var(--color-white);
  margin: 0;
}

.privacy-section__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.privacy-item {
  text-align: center;
  padding: 24px 16px;
}

.privacy-item__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: rgba(48, 209, 88, 0.1);
  border: 1px solid rgba(48, 209, 88, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.privacy-item__icon i {
  font-size: var(--font-size-h3);
  color: var(--color-apple-green);
}

.privacy-item h3 {
  font-size: var(--font-size-subhead);
  font-weight: 600;
  color: var(--color-white);
  margin: 0 0 8px;
}

.privacy-item p {
  font-size: var(--font-size-body);
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.5;
  margin: 0;
}

/* Privacy Visual - Skeleton */
.privacy-section__visual {
  margin-top: 48px;
  text-align: center;
}

.privacy-visual__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-body-sm);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 20px;
}

.privacy-visual__label i {
  color: var(--color-apple-green);
}

.privacy-visual__metrics {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-4xl);
  padding: 24px;
  max-width: 360px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

.metric-bar {
  margin-bottom: 16px;
}

.metric-bar:last-of-type {
  margin-bottom: 0;
}

.metric-bar__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.metric-bar__name {
  font-size: var(--font-size-body-sm);
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  gap: 8px;
}

.metric-bar__name i {
  font-size: var(--font-size-caption);
  color: rgba(255, 255, 255, 0.4);
  width: 16px;
}

.metric-bar__value {
  font-size: var(--font-size-body-sm);
  font-weight: 600;
  color: var(--color-white);
}

.metric-bar__track {
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.metric-bar__fill {
  height: 100%;
  border-radius: var(--radius-sm);
  transition: width 0.5s ease;
}

.metric-bar__fill--green {
  background: linear-gradient(90deg, var(--color-apple-green) 0%, var(--color-apple-green-alt) 100%);
}

.metric-bar__fill--yellow {
  background: linear-gradient(90deg, var(--color-apple-yellow) 0%, var(--color-apple-yellow-alt) 100%);
}

.metric-bar__fill--red {
  background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-apple-red) 100%);
}

.privacy-visual__caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: var(--font-size-body);
  color: rgba(255, 255, 255, 0.6);
  margin: 24px 0 0;
  padding: 12px 16px;
  background: rgba(48, 209, 88, 0.1);
  border: 1px solid rgba(48, 209, 88, 0.2);
  border-radius: var(--radius-xl);
  text-align: center;
}

.privacy-visual__caption i {
  color: var(--color-apple-green);
  font-size: var(--font-size-subhead);
}

.privacy-visual__caption strong {
  color: var(--color-apple-green);
  font-weight: 600;
}

@media (max-width: 768px) {
  .privacy-section__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .privacy-item {
    padding: 20px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-2xl);
  }

  .privacy-visual__metrics {
    max-width: 100%;
    padding: 20px 16px;
  }

  .metric-bar__name {
    font-size: var(--font-size-caption);
  }

  .metric-bar__value {
    font-size: var(--font-size-caption);
  }
}

/* Features Section */
.features {
  padding: 100px 24px;
  margin: 0;
  background: var(--color-white);
}

.features__header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 64px;
}

.section-label {
  display: inline-block;
  font-size: var(--font-size-body-sm);
  font-weight: 600;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 12px;
}

.section-title {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 600;
  color: var(--color-apple-text-dark);
  line-height: 1.15;
  margin: 0 0 16px;
  letter-spacing: -0.5px;
}

.section-subtitle {
  font-size: var(--font-size-title-sm);
  color: var(--color-apple-text-dark-secondary);
  line-height: 1.5;
  margin: 0;
}

/* Feature Cards Grid */
.features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}

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

@media (max-width: 640px) {
  .features__grid {
    grid-template-columns: 1fr;
  }
}

.feature-card {
  background: var(--color-apple-text-primary);
  border-radius: var(--radius-5xl);
  padding: 28px;
  transition: transform 0.2s ease;
}

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

.feature-card--large {
  grid-column: span 2;
  display: flex;
  align-items: center;
  gap: 32px;
}

@media (max-width: 640px) {
  .feature-card--large {
    grid-column: span 1;
    flex-direction: column;
  }
}

.feature-card__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-3xl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-h2);
  color: var(--color-white);
  margin-bottom: 16px;
  flex-shrink: 0;
}

.feature-card__icon--red { background: var(--color-accent); }
.feature-card__icon--green { background: var(--color-apple-green); }
.feature-card__icon--blue { background: var(--color-apple-blue); }
.feature-card__icon--purple { background: var(--color-apple-purple); }
.feature-card__icon--orange { background: var(--color-apple-orange); }
.feature-card__icon--teal { background: var(--color-apple-cyan); }
.feature-card__icon--gradient { background: linear-gradient(135deg, var(--color-apple-blue) 0%, var(--color-apple-purple) 100%); }

/* Highlighted Feature Card */
.feature-card--highlight {
  position: relative;
  background: linear-gradient(135deg, rgba(10, 132, 255, 0.08) 0%, rgba(191, 90, 242, 0.08) 100%);
  border: 2px solid rgba(10, 132, 255, 0.3);
  animation: feature-highlight-pulse 3s ease-in-out infinite;
}

@keyframes feature-highlight-pulse {
  0%, 100% { box-shadow: 0 4px 30px rgba(10, 132, 255, 0.15); }
  50% { box-shadow: 0 4px 40px rgba(10, 132, 255, 0.25); }
}

.feature-card__badge {
  position: absolute;
  top: -10px;
  right: 16px;
  padding: 4px 12px;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
  color: white;
  font-size: var(--font-size-footnote);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: var(--radius-2xl);
  box-shadow: 0 4px 12px rgba(255, 55, 95, 0.4);
}

.feature-card__title {
  font-size: var(--font-size-title-lg);
  font-weight: 600;
  color: var(--color-apple-text-dark);
  margin: 0 0 8px;
}

.feature-card__description {
  font-size: var(--font-size-body-lg);
  color: var(--color-apple-text-dark-secondary);
  line-height: 1.5;
  margin: 0;
}

.feature-card__visual {
  flex: 1;
  display: flex;
  justify-content: center;
}

/* Metrics Preview */
.metrics-preview {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.metric-ring {
  width: 88px;
  height: 88px;
  position: relative;
}

.metric-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.metric-ring circle {
  fill: none;
  stroke-width: 6;
  stroke-linecap: round;
}

.metric-ring__bg {
  stroke: var(--color-gray-300);
}

.metric-ring__fill {
  stroke-dasharray: 251;
}

.metric-ring__fill--red { stroke: var(--color-accent); stroke-dashoffset: 25; }
.metric-ring__fill--green { stroke: var(--color-apple-green); stroke-dashoffset: 75; }
.metric-ring__fill--blue { stroke: var(--color-apple-blue); stroke-dashoffset: 50; }

.metric-ring__label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--font-size-body);
  font-weight: 600;
  color: var(--color-apple-text-dark);
}

/* How It Works Section */
.how-it-works {
  padding: 100px 24px;
  margin: 0;
  background: var(--color-apple-text-primary);
}

.steps {
  display: flex;
  gap: 32px;
  max-width: 1000px;
  margin: 0 auto;
  justify-content: center;
  list-style: none;
  padding: 0;
}

@media (max-width: 900px) {
  .steps {
    flex-direction: column;
    align-items: center;
  }
}

.step {
  flex: 1;
  max-width: 300px;
  text-align: center;
  position: relative;
}

.step__icon {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-5xl);
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  box-shadow: 0 8px 24px rgba(255, 55, 95, 0.3);
}

.step__icon i {
  font-size: var(--font-size-h1);
  color: var(--color-white);
}

.step__number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-apple-text-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-body);
  font-weight: 600;
  color: var(--color-white);
  margin: 0 auto 16px;
}

.step__title {
  font-size: var(--font-size-title);
  font-weight: 600;
  color: var(--color-apple-text-dark);
  margin: 0 0 8px;
}

.step__description {
  font-size: var(--font-size-body-lg);
  color: var(--color-apple-text-dark-secondary);
  line-height: 1.5;
  margin: 0;
}

.step::after {
  content: '';
  position: absolute;
  top: 32px;
  right: -16px;
  width: 32px;
  height: 1px;
  background: var(--color-apple-border-lighter);
}

.step:last-child::after {
  display: none;
}

@media (max-width: 900px) {
  .step::after {
    display: none;
  }
}

/* Social Proof Section */
.social-proof {
  padding: 64px 24px;
  margin: 0;
  background: var(--color-apple-text-dark);
  text-align: center;
}

.social-proof__title {
  font-size: var(--font-size-body-lg);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 32px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.partners {
  display: flex;
  gap: 48px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  max-width: 700px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
}

.partners li {
  display: flex;
  align-items: center;
}

.partners img {
  height: 28px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.partners img:hover {
  opacity: 0.8;
}

/* FAQ Section */
.faq-section {
  padding: 100px 24px;
  background: var(--color-black);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.faq-section .section-title {
  color: var(--color-white);
}

.faq-section .section-subtitle {
  color: rgba(255, 255, 255, 0.6);
}

.faq-grid {
  max-width: 800px;
  width: 100%;
  margin-top: 48px;
}

.faq-item {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-4xl);
  margin-bottom: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
}

.faq-item:hover {
  border-color: rgba(255, 55, 95, 0.3);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
}

.faq-item.open {
  border-color: rgba(255, 55, 95, 0.5);
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  color: var(--color-white);
  font-size: var(--font-size-subhead);
  font-weight: 500;
}

.faq-question i {
  color: rgba(255, 255, 255, 0.4);
  font-size: var(--font-size-body);
  transition: transform 0.3s ease;
}

.faq-item.open .faq-question i {
  transform: rotate(180deg);
  color: var(--color-accent);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-item.open .faq-answer {
  max-height: 300px;
  padding: 0 24px 20px;
}

.faq-answer p {
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--font-size-body-lg);
  line-height: 1.7;
  margin: 0;
}

@media (max-width: 640px) {
  .faq-section {
    padding: 80px 20px;
  }

  .faq-question {
    padding: 16px 20px;
    font-size: var(--font-size-body-lg);
  }

  .faq-item.open .faq-answer {
    padding: 0 20px 16px;
  }

  .faq-answer p {
    font-size: var(--font-size-body);
  }
}

/* CTA Section */
.cta-section {
  padding: 100px 24px;
  margin: 0;
  background: var(--color-black);
  text-align: center;
}

.cta-section__content {
  max-width: 520px;
  margin: 0 auto;
}

.cta-section__title {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 600;
  color: var(--color-white);
  margin: 0 0 16px;
  letter-spacing: -0.5px;
}

.cta-section__subtitle {
  font-size: var(--font-size-title-sm);
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 32px;
  line-height: 1.5;
}

/* Platforms */
.platforms {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 40px;
}

.platform-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-2xl);
  color: var(--color-white);
  text-decoration: none;
  transition: all 0.2s ease;
}

.platform-badge:hover {
  background: rgba(255, 255, 255, 0.12);
}

.platform-badge--active {
  background: rgba(255, 255, 255, 0.1);
}

.platform-badge--inactive {
  opacity: 0.6;
}

.platform-badge i {
  font-size: var(--font-size-title-lg);
}

.platform-badge span {
  font-size: var(--font-size-body);
  font-weight: 500;
}

/* Modern Footer */
.footer-modern {
  padding: 64px 24px 32px;
  margin: 0;
  background: var(--color-black);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-modern__content {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
}

@media (max-width: 900px) {
  .footer-modern__content {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .footer-modern__content {
    grid-template-columns: 1fr;
  }
}

.footer-modern__brand {
  max-width: 260px;
}

.footer-modern__logo {
  font-size: var(--font-size-h1);
  font-weight: 300;
  color: var(--color-white);
  margin: 0 0 12px;
}

.footer-modern__logo span {
  font-weight: 700;
  color: var(--color-accent);
}

.footer-modern__tagline {
  font-size: var(--font-size-body);
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.5;
  margin: 0;
}

.footer-modern__column h3,
.footer-modern__column h4 {
  font-size: var(--font-size-body-sm);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 16px;
}

.footer-modern__column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-modern__column li {
  margin-bottom: 10px;
}

.footer-modern__column a {
  font-size: var(--font-size-body);
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-modern__column a:hover {
  color: rgba(255, 255, 255, 0.8);
}

.footer-modern__bottom {
  max-width: 1100px;
  margin: 40px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-modern__copyright {
  font-size: var(--font-size-body-sm);
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.footer-modern__social {
  display: flex;
  gap: 12px;
}

.footer-modern__social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: all 0.2s ease;
}

.footer-modern__social a:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--color-white);
}

/* Animation Classes */
.fade-in-up {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.6s ease forwards;
}

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

.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }

/* =============================================
   Enhanced Mobile Responsive Styles
   ============================================= */

/* Small screens (phones) */
@media (max-width: 480px) {
  /* Hero Section Mobile */
  .hero {
    padding: 100px 16px 60px;
    min-height: auto;
  }

  .hero__badge {
    font-size: var(--font-size-caption);
    padding: 6px 12px;
    margin-bottom: 24px;
  }

  .hero__title {
    font-size: var(--font-size-display);
    letter-spacing: -1px;
    margin-bottom: 16px;
  }

  .hero__subtitle {
    font-size: var(--font-size-body-lg);
    margin-bottom: 32px;
    padding: 0 8px;
  }

  .hero__cta {
    flex-direction: column;
    gap: 10px;
    width: 100%;
    padding: 0 8px;
  }

  .btn-hero {
    width: 100%;
    justify-content: center;
    padding: 14px 24px;
    font-size: var(--font-size-body-lg);
  }

  .hero__rings {
    width: 280px;
    bottom: -60px;
  }

  /* Trust Bar Mobile */
  .hero__trust {
    gap: 16px 24px;
    margin-top: 32px;
    padding-top: 24px;
  }

  .trust-item {
    font-size: var(--font-size-caption);
    flex: 0 0 calc(50% - 12px);
  }

  .trust-item i {
    font-size: var(--font-size-body);
  }

  /* Privacy Section Mobile */
  .privacy-section {
    padding: 48px 16px;
  }

  .privacy-section__header {
    flex-direction: column;
    text-align: center;
    gap: 8px;
    margin-bottom: 32px;
  }

  .privacy-section__header h2 {
    font-size: var(--font-size-h3);
  }

  .privacy-section__header i {
    font-size: var(--font-size-h3);
  }

  .privacy-visual__caption {
    font-size: var(--font-size-body-sm);
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    line-height: 1.4;
  }

  /* Features Section Mobile */
  .features {
    padding: 60px 16px;
  }

  .features__header {
    margin-bottom: 40px;
  }

  .section-label {
    font-size: var(--font-size-footnote);
    letter-spacing: 1px;
  }

  .section-title {
    font-size: var(--font-size-h2);
  }

  .section-subtitle {
    font-size: var(--font-size-body-lg);
  }

  .features__grid {
    gap: 12px;
  }

  .feature-card {
    padding: 20px;
    border-radius: var(--radius-4xl);
  }

  .feature-card--large {
    gap: 20px;
    padding: 24px 20px;
  }

  .feature-card--large > div:first-child {
    width: 100%;
  }

  .feature-card__visual {
    width: 100%;
    justify-content: center;
  }

  .feature-card__icon {
    width: 44px;
    height: 44px;
    font-size: var(--font-size-title-lg);
    border-radius: var(--radius-2xl);
    margin-bottom: 12px;
  }

  .feature-card__title {
    font-size: var(--font-size-title-sm);
  }

  .feature-card__description {
    font-size: var(--font-size-body);
  }

  .metrics-preview {
    gap: 12px;
  }

  .metric-ring {
    width: 70px;
    height: 70px;
  }

  .metric-ring__label {
    font-size: var(--font-size-caption);
  }

  /* How It Works Mobile */
  .how-it-works {
    padding: 60px 16px;
  }

  .steps {
    gap: 24px;
  }

  .step {
    max-width: 100%;
    padding: 0 16px;
  }

  .step__number {
    width: 52px;
    height: 52px;
    font-size: var(--font-size-title-lg);
    margin-bottom: 16px;
  }

  .step__title {
    font-size: var(--font-size-subhead);
  }

  .step__description {
    font-size: var(--font-size-body);
  }

  /* Social Proof Mobile */
  .social-proof {
    padding: 48px 16px;
  }

  .social-proof__title {
    font-size: var(--font-size-body-sm);
    margin-bottom: 24px;
  }

  .partners {
    gap: 24px;
  }

  .partners img {
    height: 22px;
  }

  /* CTA Section Mobile */
  .cta-section {
    padding: 60px 16px;
  }

  .cta-section__title {
    font-size: var(--font-size-h2);
  }

  .cta-section__subtitle {
    font-size: var(--font-size-body-lg);
    margin-bottom: 24px;
  }

  .platforms {
    gap: 8px;
    margin-top: 32px;
  }

  .platform-badge {
    padding: 10px 14px;
    gap: 8px;
  }

  .platform-badge i {
    font-size: var(--font-size-title);
  }

  .platform-badge span {
    font-size: var(--font-size-body-sm);
  }

  /* Footer Mobile */
  .footer-modern {
    padding: 48px 16px 24px;
  }

  .footer-modern__content {
    gap: 32px;
  }

  .footer-modern__brand {
    max-width: 100%;
    text-align: center;
  }

  .footer-modern__logo {
    font-size: var(--font-size-h2);
  }

  .footer-modern__tagline {
    font-size: var(--font-size-body-sm);
  }

  .footer-modern__column {
    text-align: center;
  }

  .footer-modern__column h4 {
    font-size: var(--font-size-caption);
    margin-bottom: 12px;
  }

  .footer-modern__column a {
    font-size: var(--font-size-body-sm);
  }

  .footer-modern__bottom {
    flex-direction: column;
    text-align: center;
    margin-top: 32px;
    padding-top: 16px;
  }

  .footer-modern__copyright {
    font-size: var(--font-size-caption);
  }

  .footer-modern__social a {
    width: 40px;
    height: 40px;
  }
}

/* Medium-small screens (larger phones, small tablets) */
@media (max-width: 640px) and (min-width: 481px) {
  .hero {
    padding: 100px 20px 70px;
  }

  .hero__title {
    font-size: var(--font-size-display-lg);
  }

  .hero__cta {
    flex-direction: column;
    gap: 12px;
    max-width: 360px;
    margin: 0 auto;
  }

  .btn-hero {
    width: 100%;
    justify-content: center;
  }

  .hero__trust {
    gap: 20px 28px;
  }

  .trust-item {
    font-size: var(--font-size-body-sm);
  }

  .privacy-section {
    padding: 56px 20px;
  }

  .privacy-visual__metrics {
    max-width: 100%;
    padding: 24px 20px;
  }

  .features {
    padding: 80px 20px;
  }

  .how-it-works {
    padding: 80px 20px;
  }

  .cta-section {
    padding: 80px 20px;
  }
}

/* Blog Page styles are in blog.css */

/* Blog Section (landing page) */
.blog-section {
  padding: 100px 24px;
  background: var(--color-black);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.blog-section .section-title {
  color: var(--color-white);
}

.blog-section .section-subtitle {
  color: rgba(255, 255, 255, 0.6);
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 24px;
  max-width: 1100px;
  width: 100%;
  margin-top: 48px;
}

.blog-card {
  background: var(--color-white);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-5xl);
  padding: 28px;
  text-decoration: none;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.blog-card:hover {
  background: var(--color-white);
  border-color: rgba(255, 55, 95, 0.3);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

.blog-card__content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.blog-card__date {
  font-size: var(--font-size-body-sm);
  color: var(--color-gray-500);
  margin-bottom: 12px;
}

.blog-card__title {
  font-size: var(--font-size-title);
  font-weight: 600;
  color: var(--color-gray-975);
  line-height: 1.4;
  margin: 0 0 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card__excerpt {
  font-size: var(--font-size-body);
  color: var(--color-gray-700);
  line-height: 1.6;
  margin: 0 0 16px;
  flex-grow: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card__link {
  font-size: var(--font-size-body);
  font-weight: 500;
  color: var(--color-accent);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
}

.blog-card__link i {
  font-size: var(--font-size-caption);
  transition: transform 0.2s;
}

.blog-card:hover .blog-card__link i {
  transform: translateX(4px);
}

.blog-section__cta {
  margin-top: 40px;
}

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

@media (max-width: 640px) {
  .blog-section {
    padding: 80px 20px;
  }

  .blog-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .blog-card {
    padding: 24px;
  }
}

/* Pricing Section */
.pricing {
  padding: 100px 24px;
  background: var(--color-black);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pricing .section-title {
  color: var(--color-white);
}

.pricing .section-subtitle {
  color: rgba(255, 255, 255, 0.6);
}

.pricing__card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-6xl);
  padding: 48px 40px;
  max-width: 400px;
  width: 100%;
  text-align: center;
  position: relative;
  margin-top: 48px;
}

.pricing__badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
  color: var(--color-white);
  padding: 8px 20px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-body);
  font-weight: 600;
  white-space: nowrap;
}

.pricing__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin: 24px 0 8px;
}

.pricing__amount {
  font-size: var(--font-size-hero-lg);
  font-weight: 700;
  color: var(--color-white);
  line-height: 1;
}

.pricing__currency {
  font-size: var(--font-size-display-sm);
  font-weight: 600;
  color: var(--color-white);
}

.pricing__period {
  font-size: var(--font-size-title);
  color: rgba(255, 255, 255, 0.5);
  margin-left: 4px;
}

.pricing__description {
  font-size: var(--font-size-subhead);
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 32px;
}

.pricing__features {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  text-align: left;
}

.pricing__features li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  font-size: var(--font-size-body-lg);
  color: rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.pricing__features li:last-child {
  border-bottom: none;
}

.pricing__features i {
  color: var(--color-apple-green);
  font-size: var(--font-size-body);
  width: 20px;
}

.pricing__cta {
  width: 100%;
  justify-content: center;
  margin-bottom: 16px;
}

.pricing__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: var(--font-size-body-sm);
  color: rgba(255, 255, 255, 0.4);
  margin: 0;
}

.pricing__note i {
  color: var(--color-apple-green);
}

/* Pricing Comparison */
.pricing-comparison {
  margin-top: 64px;
  max-width: 800px;
  width: 100%;
  text-align: center;
}

.pricing-comparison__title {
  font-size: var(--font-size-title-lg);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 32px;
}

.pricing-comparison__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.pricing-comparison__item {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-4xl);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.pricing-comparison__item i {
  font-size: var(--font-size-h2);
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 4px;
}

.pricing-comparison__item--focus {
  background: rgba(255, 55, 95, 0.15);
  border-color: rgba(255, 55, 95, 0.4);
  transform: scale(1.05);
}

.pricing-comparison__item--focus i {
  color: var(--color-accent);
}

.pricing-comparison__item--other {
  opacity: 0.7;
}

.pricing-comparison__name {
  font-size: var(--font-size-body);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

.pricing-comparison__price {
  font-size: var(--font-size-h3);
  font-weight: 700;
  color: var(--color-white);
}

.pricing-comparison__item--focus .pricing-comparison__price {
  color: var(--color-accent);
}

.pricing-comparison__period {
  font-size: var(--font-size-caption);
  color: rgba(255, 255, 255, 0.4);
}

.pricing-comparison__note {
  margin: 32px 0 0;
  font-size: var(--font-size-body-lg);
  color: rgba(255, 255, 255, 0.5);
}

.pricing-comparison__grid.fade-in {
  animation: comparisonFadeIn 0.5s ease;
}

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

@media (max-width: 768px) {
  .pricing-comparison__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .pricing-comparison__item {
    padding: 16px 12px;
  }

  .pricing-comparison__item i {
    font-size: var(--font-size-title-lg);
  }

  .pricing-comparison__name {
    font-size: var(--font-size-body-sm);
  }

  .pricing-comparison__price {
    font-size: var(--font-size-title-lg);
  }

  .pricing-comparison__item--focus {
    order: -1;
    grid-column: span 2;
    transform: scale(1.02);
  }
}

@media (max-width: 640px) {
  .pricing {
    padding: 80px 20px;
  }

  .pricing__card {
    padding: 40px 24px;
  }

  .pricing__amount {
    font-size: var(--font-size-hero);
  }

  .pricing-comparison {
    margin-top: 48px;
  }

  .pricing-comparison__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .pricing-comparison__item {
    padding: 16px 12px;
  }

  .pricing-comparison__item--focus {
    transform: scale(1);
  }
}

/* Tablet Portrait */
@media (max-width: 768px) and (min-width: 641px) {
  .hero__cta {
    gap: 12px;
  }

  .btn-hero {
    padding: 14px 28px;
  }
}
/**
 * Focus24 Responsive Styles
 * Mobile-first responsive design
 */

/* ================================
   Base Mobile Adjustments
   ================================ */

/* Prevent horizontal scroll */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Touch-friendly tap targets */
button,
a,
input[type="submit"],
.btn {
  min-height: 44px;
  min-width: 44px;
}

/* ================================
   Small Screens (< 576px)
   ================================ */
@media screen and (max-width: 575.98px) {
  /* Typography scaling */
  html {
    font-size: var(--font-size-body);
  }

  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }

  /* Container padding */
  .container,
  .dashboard-container,
  .cabinet-container {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Header adjustments */
  .header {
    padding: 8px 12px;
  }

  .header-logo {
    font-size: 1.25rem;
  }

  .header-user__name {
    display: none;
  }

  .header-user__info {
    display: none;
  }

  .header-user__avatar {
    width: 36px;
    height: 36px;
  }

  /* Dashboard grid - single column */
  .dashboard-grid,
  .cabinet-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  /* Cards */
  .dashboard-card,
  .cabinet-card {
    padding: 16px;
    border-radius: var(--radius-2xl);
  }

  .dashboard-card__title,
  .cabinet-card__title {
    font-size: 1rem;
  }

  /* Camera/Video section */
  .camera-container,
  .video-container,
  #jeefacetransferContainer {
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
  }

  /* Stats grid */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .stat-card {
    padding: 12px;
  }

  .stat-value {
    font-size: 1.5rem;
  }

  .stat-label {
    font-size: 0.75rem;
  }

  /* Charts */
  .chart-container {
    height: 200px !important;
  }

  /* Progress indicators */
  .circular-progress {
    width: 80px;
    height: 80px;
  }

  /* Forms */
  .form-group {
    margin-bottom: 16px;
  }

  input[type="text"],
  input[type="email"],
  input[type="password"],
  select,
  textarea {
    font-size: var(--font-size-subhead); /* Prevents iOS zoom */
    padding: 12px;
    width: 100%;
  }

  /* Buttons */
  .btn,
  button {
    width: 100%;
    padding: 14px 20px;
    font-size: 1rem;
  }

  .btn-group {
    flex-direction: column;
    gap: 8px;
  }

  /* Modal adjustments */
  .modal-content {
    width: 95%;
    max-width: none;
    margin: 10px;
    max-height: 90vh;
  }

  .modal-header,
  .modal-body,
  .modal-footer {
    padding: 16px;
  }

  /* Tables - horizontal scroll */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table {
    min-width: 500px;
  }

  /* Session history */
  .session-card {
    padding: 12px;
  }

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

  /* Start screen */
  .start-screen {
    padding: 20px;
  }

  .start-screen__title {
    font-size: 1.5rem;
  }

  .start-screen__subtitle {
    font-size: 1rem;
  }

  /* Footer */
  .footer {
    padding: 20px 12px;
  }

  .footer-links {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  /* Hide non-essential elements */
  .desktop-only {
    display: none !important;
  }

  /* Dropdown menus */
  .header-dropdown {
    right: 0;
    left: auto;
    min-width: 250px;
  }
}

/* ================================
   Medium Screens (576px - 767px)
   ================================ */
@media screen and (min-width: 576px) and (max-width: 767.98px) {
  .container,
  .dashboard-container {
    padding-left: 16px;
    padding-right: 16px;
  }

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

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

  .chart-container {
    height: 250px !important;
  }
}

/* ================================
   Tablet Screens (768px - 991px)
   ================================ */
@media screen and (min-width: 768px) and (max-width: 991.98px) {
  .dashboard-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Side-by-side layout for camera and controls */
  .camera-controls-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}

/* ================================
   Large Screens (992px+)
   ================================ */
@media screen and (min-width: 992px) {
  .mobile-only {
    display: none !important;
  }
}

/* ================================
   Touch Device Optimizations
   ================================ */
@media (hover: none) and (pointer: coarse) {
  /* Larger touch targets */
  .btn,
  button,
  a.clickable {
    min-height: 48px;
    padding: 12px 16px;
  }

  /* Remove hover effects that don't work on touch */
  .btn:hover,
  button:hover {
    transform: none;
  }

  /* Sticky header for mobile */
  .header {
    position: sticky;
    top: 0;
    z-index: 1000;
  }
}

/* ================================
   Landscape Phone
   ================================ */
@media screen and (max-height: 500px) and (orientation: landscape) {
  .header {
    padding: 4px 12px;
  }

  .camera-container,
  #jeefacetransferContainer {
    max-height: 60vh;
  }

  .start-screen {
    padding: 10px;
  }
}

/* ================================
   High DPI Screens
   ================================ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Crisp borders */
  .dashboard-card,
  .cabinet-card,
  .btn {
    border-width: 0.5px;
  }
}

/* ================================
   Reduced Motion
   ================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ================================
   Dark Mode Support
   ================================ */
@media (prefers-color-scheme: dark) {
  /* These should match the existing dark theme variables */
  :root {
    --color-bg-primary: #1a1a2e;
    --color-bg-secondary: #16213e;
    --color-text-primary: #ffffff;
    --color-text-secondary: #a0a0a0;
  }
}

/* ================================
   Print Styles
   ================================ */
@media print {
  .header,
  .footer,
  .header-dropdown,
  .btn,
  button,
  .no-print {
    display: none !important;
  }

  body {
    background: white !important;
    color: black !important;
  }

  .dashboard-card {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* ================================
   Safe Area (Notch) Support
   ================================ */
@supports (padding-top: env(safe-area-inset-top)) {
  .header {
    padding-top: max(8px, env(safe-area-inset-top));
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }

  .footer {
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }

  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* ================================
   PWA Standalone Mode
   ================================ */
@media all and (display-mode: standalone) {
  /* Hide browser chrome elements when in PWA mode */
  .browser-only {
    display: none;
  }

  /* Adjust header for standalone */
  .header {
    padding-top: env(safe-area-inset-top, 8px);
  }
}
/* line 1, app/assets/stylesheets/stuff.scss */
button {
  background: var(--color-primary);
  color: var(--color-white);
  font-size: var(--font-size-h1);
  border-radius: var(--radius-base);
  border: none;
  padding: 20px;
  padding-top: 5px;
  padding-bottom: 5px;
}

/* line 12, app/assets/stylesheets/stuff.scss */
.main-logo {
  width: 10.5vmax;
  height: 10.5vmax;
  object-fit: cover;
  margin-right: 4px;
}

/* line 19, app/assets/stylesheets/stuff.scss */
.main-logo-title {
  font-size: 6.3vmax;
  margin: 0;
  font-weight: 100;
  color: var(--color-gray-980);
}

/* line 26, app/assets/stylesheets/stuff.scss */
.main-logo-title-white {
  font-size: var(--font-size-h1);
  margin: 0;
  font-weight: 100;
  color: var(--color-gray-550);
}

@media (max-width: 800px) {
  /* line 34, app/assets/stylesheets/stuff.scss */
  .main-logo-title {
    font-size: 8.3vmax;
  }
}

/* line 39, app/assets/stylesheets/stuff.scss */
.first-part {
  display: flex;
  flex-direction: row;
  align-content: center;
  align-items: center;
  align-self: center;
  width: 100vw;
  justify-content: center;
  margin: 0;
  margin-top: 3.4vmax;
}

@media (max-width: 800px) {
  /* line 52, app/assets/stylesheets/stuff.scss */
  .first-part {
    margin-top: 0vmax;
  }
}

/* line 57, app/assets/stylesheets/stuff.scss */
.cool-branded {
  font-weight: 900;
  -webkit-background-clip: text;
  background: linear-gradient(0deg, var(--color-brand-pink), var(--color-brand-orange));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--color-brand-orange);
}

/* line 66, app/assets/stylesheets/stuff.scss */
.about-app {
  font-family: Roboto;
  font-style: normal;
  font-weight: 500;
  font-size: calc( 17px + 0.9vw);
  line-height: 111.4%;
  /* or 60px */
  text-align: center;
  color: var(--color-gray-850);
  width: 61.0vw;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  position: relative;
  top: -2vmax;
}

@media (max-width: 800px) {
  /* line 86, app/assets/stylesheets/stuff.scss */
  .about-app {
    margin-top: 30px;
    font-size: calc( 18px + 3.1vw);
    width: 82.0vw;
  }
}

/* line 94, app/assets/stylesheets/stuff.scss */
.what-you-get {
  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: calc( 14px + 0.5vw);
  line-height: 120.4%;
  /* or 28px */
  text-align: center;
  color: var(--color-gray-850);
  width: 40.0vw;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10vmin;
  margin-bottom: 10vmin;
}

@media (max-width: 800px) {
  /* line 112, app/assets/stylesheets/stuff.scss */
  .what-you-get {
    width: 80.2vw;
    font-size: calc( 16px + 0.5vw);
  }
}

/* line 118, app/assets/stylesheets/stuff.scss */
.cool-stuff {
  margin-top: 10.5vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: center;
  overflow: hidden;
}

/* line 128, app/assets/stylesheets/stuff.scss */
.cool-row {
  width: 100vw;
  height: 300px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 6vh;
}

/* line 137, app/assets/stylesheets/stuff.scss */
.free-3 {
  width: 25%;
  display: flex;
  /*border: 1px solid #000000;*/
  height: 80vh;
}

/* line 144, app/assets/stylesheets/stuff.scss */
.free-1 {
  width: 8.33%;
  display: flex;
  /*border: 1px solid #000000;*/
  height: 80vh;
}

/* line 150, app/assets/stylesheets/stuff.scss */
.free-2 {
  width: 16.33%;
  display: flex;
  /*border: 1px solid #000000;*/
  height: 80vh;
}

@media (max-width: 800px) {
  /* line 158, app/assets/stylesheets/stuff.scss */
  .cool-row {
    width: 100vw;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-top: 6vh;
  }
  /* line 167, app/assets/stylesheets/stuff.scss */
  .free-3 {
    width: 100%;
    display: flex;
    /*border: 1px solid #000000;*/
    min-height: 80vh;
  }
  /* line 174, app/assets/stylesheets/stuff.scss */
  .free-1 {
    width: 8.33%;
    display: flex;
    /*border: 1px solid #000000;*/
    height: auto;
  }
  /* line 180, app/assets/stylesheets/stuff.scss */
  .free-2 {
    width: 16.33%;
    display: flex;
    /*border: 1px solid #000000;*/
    height: auto;
  }
}

/* line 188, app/assets/stylesheets/stuff.scss */
.cool-container {
  display: flex;
  flex-direction: column;
  /*background: #ededed;*/
  height: auto;
  align-self: center;
  overflow: hidden;
}

/* line 197, app/assets/stylesheets/stuff.scss */
.cool-container-title {
  font-family: Roboto;
  font-style: normal;
  font-weight: 500;
  /*font-size: var(--font-size-h1);*/
  line-height: 113.4%;
  font-size: calc( 16px + 1vw);
  /* or 34px */
  color: var(--color-gray-950);
}

/* line 209, app/assets/stylesheets/stuff.scss */
.cool-container-content {
  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: calc( 14px + 0.2vw);
  line-height: 125.4%;
  margin-top: 0;
  /* or 20px */
  color: var(--color-gray-950);
}

/* line 221, app/assets/stylesheets/stuff.scss */
.active-install {
  -webkit-background-clip: text;
  background: linear-gradient(0deg, var(--color-brand-pink), var(--color-brand-orange));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/*.left-part {
	width: 80vw;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid var(--color-border-light);
}*/
/* line 235, app/assets/stylesheets/stuff.scss */
.more-more {
  margin-top: 0vh;
  top: -1vmax;
  margin-bottom: 0;
  position: relative;
  padding-left: 12vw;
  box-sizing: border-box;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  object-fit: cover;
}

@media (max-width: 800px) {
  /* line 250, app/assets/stylesheets/stuff.scss */
  .more-more {
    height: 170px;
    width: 120%;
    padding-left: 0vw;
  }
}

/* line 258, app/assets/stylesheets/stuff.scss */
.active-install {
  margin-top: 14vh;
  margin: 60px;
  font-size: var(--font-size-hero-lg);
}

/* line 263, app/assets/stylesheets/stuff.scss */
#try-now {
  position: relative;
  top: 3vh;
  min-height: 100vh;
  background: var(--color-bg-primary);
  width: 100vw;
  display: flex;
  flex-direction: column;
}

@media (max-width: 800px) {
  /* line 268, app/assets/stylesheets/stuff.scss */
  .active-install {
    margin-top: 1vh;
    margin: 12px;
    font-size: 14vmax;
    margin-left: auto;
    margin-right: auto;
  }
  /* line 272, app/assets/stylesheets/stuff.scss */
  #try-now {
    display: none;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */


*, *::before, *::after {
	box-sizing: border-box;
}

* {
	margin: 0;
	padding: 0;
	font-family: 'Roboto', sans-serif;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	padding: 0;
}


#field {
	min-width: 320px;
}

input {
	min-width: 320px;	
}

/*# sourceMappingURL=application.css-996b8d441745a7254aaf0b2897de044ec08d57eb932952f9d07100869957c945.map */