/* Tefsen Web quality pass — loaded after android-parity.css */
html.web-quality {
  --quality-bg: #021215;
  --quality-panel: #082428;
  --quality-panel-2: #0a2b2f;
  --quality-panel-3: #0d3438;
  --quality-text: #f1fbfb;
  --quality-muted: #98b1b1;
  --quality-line: rgba(151, 207, 205, .14);
  --quality-brand: #35ddd1;
  --quality-brand-dark: #062225;
  --quality-shadow: 0 18px 55px rgba(0, 0, 0, .24);
}

html.web-quality[data-web-theme="light"] {
  --quality-bg: #f4fbfa;
  --quality-panel: #ffffff;
  --quality-panel-2: #eef8f7;
  --quality-panel-3: #e7f4f2;
  --quality-text: #092427;
  --quality-muted: #597475;
  --quality-line: rgba(21, 79, 78, .13);
  --quality-brand: #12bcb2;
  --quality-brand-dark: #042f31;
  --quality-shadow: 0 18px 55px rgba(12, 67, 66, .09);
  color-scheme: light;
}

html.web-quality body {
  background: var(--quality-bg) !important;
  color: var(--quality-text) !important;
}

html.web-quality .topbar,
html.web-quality .sidebar,
html.web-quality .rightbar {
  background: color-mix(in srgb, var(--quality-bg) 94%, transparent) !important;
  border-color: var(--quality-line) !important;
}

html.web-quality .rightbar { display: none !important; }
html.web-quality .main-area { padding-right: 0 !important; }
html.web-quality .content-wrap { width: min(100%, 940px) !important; padding-top: 28px; }
html.web-quality .content-wrap.wide { width: min(100%, 1080px) !important; }

html.web-quality .panel,
html.web-quality .widget,
html.web-quality .auth-card,
html.web-quality .modal,
html.web-quality .dropdown {
  background: var(--quality-panel) !important;
  color: var(--quality-text) !important;
  border-color: var(--quality-line) !important;
  box-shadow: var(--quality-shadow);
}

html.web-quality .input,
html.web-quality .textarea,
html.web-quality .select,
html.web-quality .global-search input {
  background: var(--quality-panel-2) !important;
  color: var(--quality-text) !important;
  border-color: color-mix(in srgb, var(--quality-muted) 35%, transparent) !important;
}

html.web-quality .input::placeholder,
html.web-quality .textarea::placeholder,
html.web-quality .global-search input::placeholder { color: var(--quality-muted); opacity: .82; }

html.web-quality .btn-primary,
html.web-quality .ask-btn,
html.web-quality .quality-hero-ask,
html.web-quality .floating-ask {
  background: var(--quality-brand) !important;
  color: var(--quality-brand-dark) !important;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--quality-brand) 18%, transparent) !important;
}

html.web-quality .btn-secondary,
html.web-quality .btn-ghost {
  background: var(--quality-panel-2) !important;
  color: var(--quality-text) !important;
  border-color: var(--quality-line) !important;
}

/* Header */
html.web-quality .topbar {
  box-shadow: 0 8px 28px rgba(0,0,0,.08);
}
html.web-quality .topbar-brand span b { color: var(--quality-brand) !important; }
html.web-quality .topbar-brand span small { color: var(--quality-muted) !important; }
html.web-quality .topbar-actions { gap: 8px; }
html.web-quality .icon-button,
html.web-quality .top-avatar {
  background: var(--quality-panel-2) !important;
  border-color: var(--quality-line) !important;
  color: var(--quality-text) !important;
}
html.web-quality .quality-theme-button { display: grid !important; }
html.web-quality .global-search .search-kbd { display: none; }
html.web-quality .global-search input { height: 48px; }

/* Desktop navigation */
html.web-quality .sidebar { padding-top: 22px; }
html.web-quality .nav-list { gap: 7px; }
html.web-quality .nav-item {
  min-height: 50px;
  border-radius: 15px;
  color: var(--quality-muted) !important;
}
html.web-quality .nav-item.active {
  color: var(--quality-brand) !important;
  background: color-mix(in srgb, var(--quality-brand) 10%, transparent) !important;
  border-color: color-mix(in srgb, var(--quality-brand) 18%, transparent) !important;
}
html.web-quality .quality-secondary-nav { margin-top: 8px; }
html.web-quality .sidebar-profile { background: var(--quality-panel) !important; color: var(--quality-text) !important; border-color: var(--quality-line) !important; }

/* Home */
html.web-quality .quality-home-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 2px 0 20px;
  padding: 0 2px;
}
html.web-quality .quality-eyebrow {
  display: block;
  margin-bottom: 5px;
  color: var(--quality-brand);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
}
html.web-quality .quality-home-hero h1 { margin: 0; font-size: 34px; letter-spacing: -.045em; }
html.web-quality .quality-home-hero p { margin: 5px 0 0; color: var(--quality-muted); }
html.web-quality .quality-hero-ask {
  min-height: 48px;
  padding: 0 18px;
  border: 0;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 850;
  cursor: pointer;
}

html.web-quality .feed-tabs {
  margin: 0 0 16px !important;
  padding: 0 !important;
  border-bottom: 1px solid var(--quality-line) !important;
}
html.web-quality .feed-tab { color: var(--quality-muted) !important; }
html.web-quality .feed-tab.active { color: var(--quality-brand) !important; }
html.web-quality .feed-tab.active::after { background: var(--quality-brand) !important; }

html.web-quality .quality-subjects {
  display: flex;
  gap: 10px;
  margin: 0 0 18px;
  overflow-x: auto;
  padding: 2px 1px 5px;
  scrollbar-width: none;
}
html.web-quality .quality-subjects::-webkit-scrollbar { display: none; }
html.web-quality .quality-subjects button {
  flex: 0 0 auto;
  min-height: 43px;
  padding: 0 16px;
  border-radius: 15px;
  border: 1px solid var(--quality-line);
  background: var(--quality-panel-2);
  color: var(--quality-muted);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 750;
  cursor: pointer;
}
html.web-quality .quality-subjects button.active {
  color: var(--quality-text);
  border-color: color-mix(in srgb, var(--quality-brand) 65%, transparent);
  background: color-mix(in srgb, var(--quality-brand) 11%, var(--quality-panel-2));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--quality-brand) 18%, transparent);
}

html.web-quality .quality-composer {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  gap: 12px;
  padding: 14px !important;
  border-radius: 20px !important;
  margin-bottom: 18px;
}
html.web-quality .quality-composer .fake-input {
  background: var(--quality-panel-2) !important;
  color: var(--quality-muted) !important;
  border-color: var(--quality-line) !important;
}

html.web-quality .feed-list { display: grid; gap: 14px; }
html.web-quality .post-card {
  background: var(--quality-panel) !important;
  border-color: var(--quality-line) !important;
  border-radius: 22px !important;
  overflow: hidden;
}
html.web-quality .post-card:hover { border-color: color-mix(in srgb, var(--quality-brand) 32%, transparent) !important; }
html.web-quality .post-card[hidden] { display: none !important; }
html.web-quality .post-body h3 { color: var(--quality-text); }
html.web-quality .post-body p,
html.web-quality .post-head small,
html.web-quality .action-btn { color: var(--quality-muted); }
html.web-quality .post-subject { color: var(--quality-brand) !important; }
html.web-quality .post-actions { border-color: var(--quality-line) !important; }

html.web-quality .quality-empty {
  min-height: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 20px;
}
html.web-quality .quality-empty-icon { color: color-mix(in srgb, var(--quality-muted) 80%, transparent); margin-bottom: 20px; }
html.web-quality .quality-empty h3 { margin: 0; font-size: 24px; }
html.web-quality .quality-empty p { max-width: 520px; margin: 10px 0 24px; color: var(--quality-muted); line-height: 1.6; }

html.web-quality .floating-ask { right: 26px !important; bottom: 24px !important; border-radius: 18px !important; }

/* Study Hub */
html.web-quality .study-hub-screen { gap: 18px !important; }
html.web-quality .study-head h1 { color: var(--quality-text); }
html.web-quality .study-head p { color: var(--quality-muted) !important; }
html.web-quality .streak-pill { background: var(--quality-panel); border-color: var(--quality-line) !important; color: var(--quality-text) !important; }
html.web-quality .weekly-goal-card {
  background: linear-gradient(115deg, #087f86, #0ca8b4) !important;
  box-shadow: 0 18px 40px rgba(4, 116, 123, .18);
}
html.web-quality .study-stat-grid article,
html.web-quality .continue-empty {
  background: var(--quality-panel) !important;
  border-color: var(--quality-line) !important;
  color: var(--quality-text) !important;
}
html.web-quality .study-stat-grid small,
html.web-quality .subject-focus-block p,
html.web-quality .continue-empty p { color: var(--quality-muted) !important; }
html.web-quality .practice-button,
html.web-quality .quick-action-row > button:not(.outline) { background: var(--quality-brand) !important; color: var(--quality-brand-dark) !important; }
html.web-quality .quick-action-row .outline { background: var(--quality-panel) !important; color: var(--quality-brand) !important; border-color: var(--quality-line) !important; }
html.web-quality .quality-focus-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
html.web-quality .quality-focus-list button {
  min-height: 52px;
  padding: 0 15px;
  border-radius: 15px;
  border: 1px solid var(--quality-line);
  background: var(--quality-panel);
  color: var(--quality-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
html.web-quality .quality-focus-list b { color: var(--quality-brand); }

/* Profile */
html.web-quality .profile-dashboard-card {
  background: linear-gradient(145deg, color-mix(in srgb, var(--quality-brand) 12%, var(--quality-panel)), var(--quality-panel)) !important;
  border-color: var(--quality-line) !important;
}
html.web-quality .profile-dashboard-label,
html.web-quality .profile-info h1 { color: var(--quality-text) !important; }
html.web-quality .profile-info .handle,
html.web-quality .profile-info p,
html.web-quality .profile-stats small { color: var(--quality-muted) !important; }
html.web-quality .profile-stats b { color: var(--quality-text) !important; }
html.web-quality .profile-stats span { color: var(--quality-brand) !important; }
html.web-quality .achievement-chip { background: var(--quality-panel-2) !important; color: var(--quality-muted) !important; border: 1px solid var(--quality-line); }
html.web-quality .achievement-chip.active { background: color-mix(in srgb, var(--quality-brand) 15%, var(--quality-panel-2)) !important; color: var(--quality-text) !important; border-color: color-mix(in srgb, var(--quality-brand) 28%, transparent); }
html.web-quality .quality-joined { display: block; margin-top: 18px; color: var(--quality-muted); }
html.web-quality .quality-questions-title { margin: 28px 0 12px; }
html.web-quality .quality-questions-title h2 { margin: 0; font-size: 24px; }
html.web-quality .quality-profile-feed .empty-state { min-height: 120px; padding: 28px; background: var(--quality-panel) !important; border: 1px solid var(--quality-line); }

/* Leaderboard */
html.web-quality .quality-leader-row { background: transparent !important; color: var(--quality-text) !important; border-left: 0 !important; border-right: 0 !important; }
html.web-quality .quality-leader-user { display: flex; align-items: center; gap: 12px; min-width: 0; }
html.web-quality .quality-leader-avatar { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--quality-panel-3); color: var(--quality-brand); font-weight: 850; }
html.web-quality .quality-leader-avatar img { width: 100%; height: 100%; object-fit: cover; }
html.web-quality .quality-leader-user b,
html.web-quality .quality-leader-user small { display: block; }
html.web-quality .quality-leader-user small { color: var(--quality-muted); font-size: 11px; }

/* Ask question */
html.web-quality .quality-question-modal { width: min(96vw, 760px) !important; max-height: min(92vh, 900px); overflow: auto; }
html.web-quality .quality-question-modal .modal-head { position: sticky; top: 0; z-index: 2; background: var(--quality-panel); border-color: var(--quality-line); }
html.web-quality .quality-question-modal .modal-head h2 { font-size: 25px; }
html.web-quality .quality-hidden-field { display: none !important; }
html.web-quality .quality-file-drop {
  position: relative;
  min-height: 112px;
  border: 1px dashed color-mix(in srgb, var(--quality-brand) 40%, var(--quality-line)) !important;
  border-radius: 18px;
  background: var(--quality-panel-2) !important;
  color: var(--quality-brand) !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-align: center;
}
html.web-quality .quality-file-drop b { color: var(--quality-text); }
html.web-quality .quality-file-drop small { color: var(--quality-muted); max-width: 540px; }
html.web-quality .quality-file-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* Practice sheet */
html.web-quality .quality-practice-backdrop { z-index: 5000; }
html.web-quality .quality-practice-sheet {
  width: min(92vw, 520px);
  margin: auto;
  padding: 26px;
  border: 1px solid var(--quality-line);
  border-radius: 26px;
  background: var(--quality-panel);
  color: var(--quality-text);
  box-shadow: var(--quality-shadow);
}
html.web-quality .quality-practice-sheet h2 { margin: 4px 0 8px; font-size: 27px; }
html.web-quality .quality-practice-sheet p { margin: 0; color: var(--quality-muted); }
html.web-quality .quality-practice-subjects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 22px 0 16px; }
html.web-quality .quality-practice-subjects button {
  min-height: 54px;
  padding: 0 12px;
  border: 1px solid var(--quality-line);
  border-radius: 15px;
  background: var(--quality-panel-2);
  color: var(--quality-text);
  font-weight: 750;
  cursor: pointer;
}
html.web-quality .quality-practice-subjects button:hover { border-color: var(--quality-brand); }

/* Auth polish */
html.web-quality .auth-card { border-radius: 28px; }
html.web-quality .auth-card h2 { color: var(--quality-text); }
html.web-quality .auth-card > p,
html.web-quality .auth-switch { color: var(--quality-muted); }
html.web-quality .auth-switch button { color: var(--quality-brand); }
html.web-quality .auth-panel { background: var(--quality-bg) !important; border-color: var(--quality-line) !important; }

@media (max-width: 1100px) {
  html.web-quality .content-wrap { width: min(100%, 820px) !important; }
}

@media (max-width: 860px) {
  html.web-quality .sidebar,
  html.web-quality .rightbar { display: none !important; }
  html.web-quality .main-area { padding-left: 0 !important; padding-right: 0 !important; }
  html.web-quality .content-wrap,
  html.web-quality .content-wrap.wide { width: 100% !important; padding: 18px 18px 104px !important; }
  html.web-quality .topbar { grid-template-columns: minmax(0,1fr) auto !important; padding: 0 14px; }
  html.web-quality .topbar-brand { display: none !important; }
  html.web-quality .topbar-center { padding: 0 !important; }
  html.web-quality .global-search input { height: 45px; }
  html.web-quality .topbar-actions { padding-right: 0 !important; }
  html.web-quality .quality-theme-button { width: 42px; height: 42px; }
  html.web-quality .mobile-bottom {
    background: color-mix(in srgb, var(--quality-bg) 96%, transparent) !important;
    border-color: var(--quality-line) !important;
    backdrop-filter: blur(18px);
  }
  html.web-quality .mobile-bottom button { color: var(--quality-muted) !important; }
  html.web-quality .mobile-bottom button.active,
  html.web-quality .mobile-bottom .create-mobile { color: var(--quality-brand) !important; }
  html.web-quality .floating-ask { display: none !important; }
  html.web-quality .quality-home-hero { margin-top: 4px; }
  html.web-quality .quality-home-hero h1 { font-size: 30px; }
  html.web-quality .quality-hero-ask { display: none; }
  html.web-quality .feed-tabs { grid-template-columns: repeat(4, minmax(76px, 1fr)) !important; overflow-x: auto; }
  html.web-quality .feed-tab { font-size: 13px !important; min-height: 52px !important; }
  html.web-quality .quality-composer { grid-template-columns: auto minmax(0,1fr); }
  html.web-quality .quality-composer .ask-btn { display: none; }
  html.web-quality .study-stat-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  html.web-quality .profile-stats { grid-template-columns: repeat(3, minmax(0,1fr)) !important; row-gap: 18px !important; }
  html.web-quality .profile-dashboard-label { position: static !important; padding: 20px 24px 0; font-size: 23px !important; }
  html.web-quality .profile-dashboard-card { margin-top: 0 !important; }
}

@media (max-width: 620px) {
  html.web-quality .content-wrap,
  html.web-quality .content-wrap.wide { padding-left: 14px !important; padding-right: 14px !important; }
  html.web-quality .quality-home-hero { align-items: flex-start; }
  html.web-quality .quality-home-hero h1 { font-size: 28px; }
  html.web-quality .quality-home-hero p { font-size: 13px; }
  html.web-quality .quality-subjects button { min-height: 40px; padding: 0 14px; font-size: 12px; }
  html.web-quality .quality-composer { padding: 11px !important; }
  html.web-quality .post-card { border-radius: 18px !important; }
  html.web-quality .quality-empty { min-height: 360px; }
  html.web-quality .quality-empty h3 { font-size: 22px; }
  html.web-quality .study-head { align-items: flex-start !important; }
  html.web-quality .study-head h1 { font-size: 30px !important; }
  html.web-quality .weekly-goal-card { padding: 23px 20px !important; border-radius: 23px !important; }
  html.web-quality .study-stat-grid article { min-height: 140px !important; padding: 19px !important; }
  html.web-quality .quality-focus-list { grid-template-columns: 1fr; }
  html.web-quality .profile-main { padding-left: 18px !important; padding-right: 18px !important; }
  html.web-quality .profile-topline .avatar.lg { width: 112px !important; height: 112px !important; }
  html.web-quality .profile-stats { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  html.web-quality .quality-practice-subjects { grid-template-columns: 1fr; }
  html.web-quality .quality-question-modal { width: 100vw !important; height: 100dvh; max-height: none; border-radius: 0 !important; }
  html.web-quality .auth-page { display: block !important; background: var(--quality-bg); }
  html.web-quality .auth-art { display: none !important; }
  html.web-quality .auth-panel { min-height: 100dvh; padding: 28px 18px 44px !important; align-items: start !important; }
  html.web-quality .auth-card { width: 100% !important; margin-top: 42px; padding: 26px 22px !important; border-radius: 24px !important; }
  html.web-quality .auth-card h2 { font-size: 31px !important; }
}