/* Adapted directly from the user-provided three-screen reference. Scoped to community pages. */
.community-reference{--bg-surface:#FFFFFF;--bg-subtle:#F8FAFC;--bg-muted:#F1F5F9;--text-faint:#94A3B8;--primary:#2563EB;--primary-soft:#EFF6FF;--primary-border:#BFDBFE;--emerald:#059669;--emerald-soft:#ECFDF5;--emerald-border:#A7F3D0;--amber:#D97706;--amber-soft:#FFFBEB;--amber-border:#FDE68A;--purple:#7C3AED;--purple-soft:#F5F3FF;--purple-border:#DDD6FE;--radius-full:9999px;--radius-xl:24px;--font-mono:var(--font-numbers);--font-sans:var(--font-body);--shadow-card:0 12px 32px -8px rgba(15,23,42,.05),0 2px 6px -1px rgba(15,23,42,.03),inset 0 1px 0 #FFFFFF;--shadow-float:0 20px 40px -12px rgba(15,23,42,.12),0 4px 12px -2px rgba(15,23,42,.05);--ease-out:cubic-bezier(.16,1,.3,1);
    .ask-kien-grid {
      display: grid;
      grid-template-columns: 290px minmax(0, 1fr);
      gap: 20px;
      align-items: stretch;
      min-height: 660px;
    }

    /* Left Column: Conversation History & Learning Context */
    .kien-sidebar {
      background: var(--bg-surface-glass);
      backdrop-filter: blur(12px);
      border: 1px solid var(--border-hairline);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow-card);
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .new-chat-btn {
      width: 100%;
      padding: 11px 16px;
      border-radius: var(--radius-md);
      font-size: 13.5px;
      font-weight: 700;
    }

    .kien-sidebar-section-label {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--text-faint);
      padding: 0 4px;
    }

    .thread-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      flex: 1;
    }

    .thread-item {
      text-align: left;
      padding: 12px 13px;
      border-radius: var(--radius-md);
      border: 1px solid transparent;
      background: transparent;
      transition: all 0.18s var(--ease-out);
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .thread-item:hover {
      background: var(--bg-subtle);
      border-color: #E2E8F0;
    }

    .thread-item.active {
      background: linear-gradient(180deg, #EFF6FF 0%, #F8FAFC 100%);
      border-color: #BFDBFE;
      box-shadow: 0 4px 12px -2px rgba(37, 99, 235, 0.08);
    }

    .thread-meta-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
    }

    .subject-tag {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 2px 8px;
      border-radius: var(--radius-full);
      font-size: 11px;
      font-weight: 700;
    }

    .subject-tag.chem { background: #F3E8FF; color: #7C3AED; border: 1px solid #DDD6FE; }
    .subject-tag.math { background: #DBEAFE; color: #2563EB; border: 1px solid #BFDBFE; }
    .subject-tag.phys { background: #FFEDD5; color: #EA580C; border: 1px solid #FED7AA; }

    .thread-time {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--text-faint);
    }

    .thread-title {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-primary);
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .thread-step-status {
      font-size: 11.5px;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      gap: 5px;
    }

    /* Socratic Guide Mini-Card inside Left Sidebar (eliminates dead whitespace!) */
    .kien-method-card {
      padding: 13px;
      border-radius: var(--radius-md);
      background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
      border: 1px solid #E2E8F0;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .kien-method-head {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      font-weight: 700;
      color: var(--text-secondary);
    }

    .kien-method-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 5px;
      font-size: 11.5px;
      color: var(--text-muted);
    }

    .kien-method-list li {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .kien-privacy-foot {
      font-size: 11.5px;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      gap: 6px;
      padding-top: 8px;
      border-top: 1px solid #F1F5F9;
    }

    /* Right Column: Main AI Chat Workspace */
    .kien-chat-panel {
      background: var(--bg-surface);
      border: 1px solid var(--border-hairline);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow-card);
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .kien-chat-header {
      padding: 16px 22px;
      border-bottom: 1px solid #F1F5F9;
      background: linear-gradient(180deg, #FFFFFF 0%, #FAFCFF 100%);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }

    .kien-agent-identity {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .kien-avatar-box {
      width: 42px;
      height: 42px;
      border-radius: 13px;
      background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
      border: 1px solid #FED7AA;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      box-shadow: 0 4px 10px rgba(243, 112, 33, 0.12);
    }

    .kien-online-dot {
      position: absolute;
      bottom: -2px;
      right: -2px;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #10B981;
      border: 2px solid #FFFFFF;
    }

    .kien-agent-title {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .kien-agent-title h2 {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 800;
      color: var(--text-primary);
    }

    .kien-mode-badge {
      padding: 2px 8px;
      border-radius: var(--radius-full);
      font-size: 11px;
      font-weight: 700;
      background: #ECFDF5;
      color: #059669;
      border: 1px solid #A7F3D0;
    }

    .kien-agent-sub {
      font-size: 12.5px;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 2px;
    }

    /* Socratic Step Progress Bar inside Chat Header */
    .socratic-progress-pill {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 5px 12px;
      border-radius: var(--radius-full);
      background: #F8FAFC;
      border: 1px solid #E2E8F0;
      font-size: 12px;
      font-weight: 600;
      color: var(--text-secondary);
    }

    .step-dots {
      display: flex;
      gap: 4px;
    }

    .step-dot {
      width: 18px;
      height: 6px;
      border-radius: 99px;
      background: #E2E8F0;
    }

    .step-dot.active {
      background: var(--primary);
    }

    .step-dot.done {
      background: #10B981;
    }

    /* Chat Messages Stream */
    .kien-messages {
      flex: 1;
      padding: 24px;
      display: flex;
      flex-direction: column;
      gap: 20px;
      overflow-y: auto;
      max-height: 430px;
      background:
        radial-gradient(circle at 90% 10%, rgba(37, 99, 235, 0.03), transparent 35%),
        #FFFFFF;
    }

    .msg-row {
      display: flex;
      gap: 12px;
      max-width: 82%;
    }

    .msg-row.user {
      margin-left: auto;
      flex-direction: row-reverse;
    }

    .msg-sender-label {
      font-size: 11.5px;
      font-weight: 600;
      color: var(--text-muted);
      margin-bottom: 5px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .msg-row.user .msg-sender-label {
      justify-content: flex-end;
    }

    .msg-bubble {
      padding: 14px 18px;
      border-radius: 18px;
      font-size: 14px;
      line-height: 1.55;
    }

    .msg-row.user .msg-bubble {
      background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
      color: #FFFFFF;
      border-bottom-right-radius: 4px;
      box-shadow: 0 6px 16px -4px rgba(37, 99, 235, 0.3);
    }

    .msg-row.ai .msg-bubble {
      background: #F8FAFC;
      border: 1px solid #E2E8F0;
      color: var(--text-primary);
      border-top-left-radius: 4px;
      box-shadow: var(--shadow-xs);
    }

    /* Interactive 3-Step Card inside Kiến's message */
    .socratic-steps-box {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin: 12px 0;
    }

    .socratic-step-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 12px;
      border-radius: 11px;
      background: #FFFFFF;
      border: 1px solid #E2E8F0;
      font-size: 13px;
      font-weight: 500;
      transition: all 0.2s ease;
    }

    .socratic-step-item.current {
      border-color: #93C5FD;
      background: #EFF6FF;
      color: #1E3A8A;
      font-weight: 600;
    }

    .socratic-step-num {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      font-family: var(--font-mono);
      font-size: 11.5px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #F1F5F9;
      color: var(--text-muted);
      flex-shrink: 0;
    }

    .socratic-step-item.current .socratic-step-num {
      background: var(--primary);
      color: #FFFFFF;
    }

    .kien-question-prompt {
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px dashed #CBD5E1;
      font-weight: 600;
      color: #1E40AF;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    /* Quick Prompt Suggestion Chips */
    .quick-prompts-bar {
      padding: 10px 22px;
      background: #FAFCFF;
      border-top: 1px solid #F1F5F9;
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .quick-prompt-label {
      font-size: 11.5px;
      font-weight: 700;
      color: var(--text-muted);
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .prompt-chip {
      padding: 5px 11px;
      border-radius: var(--radius-full);
      background: #FFFFFF;
      border: 1px solid #CBD5E1;
      font-size: 12px;
      font-weight: 600;
      color: var(--text-secondary);
      transition: all 0.15s ease;
    }

    .prompt-chip:hover {
      border-color: var(--primary);
      color: var(--primary);
      background: var(--primary-soft);
      transform: translateY(-1px);
    }

    /* Composer Area */
    .kien-composer {
      padding: 16px 22px 18px;
      background: #FFFFFF;
      border-top: 1px solid #E2E8F0;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .composer-box {
      border: 1.5px solid #CBD5E1;
      border-radius: 16px;
      background: #F8FAFC;
      padding: 12px 14px;
      transition: all 0.2s var(--ease-out);
    }

    .composer-box:focus-within {
      background: #FFFFFF;
      border-color: var(--primary);
      box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
    }

    .composer-textarea {
      width: 100%;
      border: none;
      background: transparent;
      resize: none;
      min-height: 54px;
      font-size: 14px;
      color: var(--text-primary);
      outline: none;
    }

    .composer-textarea::placeholder {
      color: var(--text-faint);
    }

    .composer-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 10px;
      margin-top: 6px;
      border-top: 1px solid #E2E8F0;
      flex-wrap: wrap;
      gap: 10px;
    }

    .attach-dropzone-btn {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 6px 12px;
      border-radius: 10px;
      background: #FFFFFF;
      border: 1px dashed #94A3B8;
      font-size: 12px;
      font-weight: 600;
      color: var(--text-secondary);
      transition: all 0.15s ease;
    }

    .attach-dropzone-btn:hover {
      border-color: var(--primary);
      color: var(--primary);
      background: #EFF6FF;
    }

    .composer-footer-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
    }

    .consent-checkbox-label {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      font-size: 12px;
      color: var(--text-secondary);
      cursor: pointer;
      user-select: none;
    }

    .consent-checkbox-label input {
      width: 16px;
      height: 16px;
      margin-top: 1px;
      accent-color: var(--primary);
      cursor: pointer;
    }

    .ai-disclaimer {
      font-size: 11.5px;
      color: var(--text-faint);
      margin-top: 2px;
    }

    /* ==========================================================================
       6. SCREEN 2: GÓC HỎI ĐÁP (DANH SÁCH CÂU HỎI & BẢNG CỐNG HIẾN)
       ========================================================================== */
    .qa-layout-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 340px;
      gap: 22px;
      align-items: start;
    }

    /* Filter Bar */
    .qa-filter-bar {
      background: var(--bg-surface);
      border: 1px solid var(--border-hairline);
      border-radius: var(--radius-lg);
      padding: 12px 14px;
      box-shadow: var(--shadow-card);
      display: grid;
      grid-template-columns: minmax(0, 1fr) 160px 150px auto;
      gap: 10px;
      margin-bottom: 16px;
    }

    .search-input-wrap {
      position: relative;
      display: flex;
      align-items: center;
    }

    .search-input-wrap .icon {
      position: absolute;
      left: 12px;
      color: var(--text-faint);
      width: 16px;
      height: 16px;
    }

    .qa-input, .qa-select {
      width: 100%;
      padding: 9px 12px;
      border-radius: 11px;
      border: 1px solid #CBD5E1;
      background: #F8FAFC;
      font-size: 13px;
      color: var(--text-primary);
      transition: all 0.15s ease;
    }

    .search-input-wrap .qa-input {
      padding-left: 36px;
    }

    .qa-input:focus, .qa-select:focus {
      outline: none;
      background: #FFFFFF;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    }

    /* Question Cards */
    .qa-list {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .qa-card {
      background: var(--bg-surface);
      border: 1px solid var(--border-hairline);
      border-radius: var(--radius-xl);
      padding: 20px 22px;
      box-shadow: var(--shadow-card);
      transition: all 0.2s var(--ease-out);
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    .qa-card::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 4px;
      background: var(--purple);
      opacity: 0.85;
    }

    .qa-card.math-border::before {
      background: var(--primary);
    }

    .qa-card:hover {
      transform: translateY(-2px);
      border-color: #CBD5E1;
      box-shadow: var(--shadow-float);
    }

    .qa-card-badges {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 10px;
    }

    .status-pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 10px;
      border-radius: var(--radius-full);
      font-size: 11.5px;
      font-weight: 700;
    }

    .status-pill.discussing {
      background: #F1F5F9;
      color: #475569;
      border: 1px solid #E2E8F0;
    }

    .status-pill.teacher-verified {
      background: #ECFDF5;
      color: #047857;
      border: 1px solid #A7F3D0;
    }

    .qa-card-title {
      font-family: var(--font-display);
      font-size: 18px;
      font-weight: 800;
      color: var(--text-primary);
      margin-bottom: 4px;
      letter-spacing: -0.02em;
    }

    .qa-card-topic {
      font-size: 13px;
      color: var(--text-muted);
      margin-bottom: 16px;
    }

    .qa-card-preview {
      font-size: 13.5px;
      color: var(--text-secondary);
      background: #F8FAFC;
      border: 1px solid #F1F5F9;
      padding: 10px 14px;
      border-radius: 12px;
      margin-bottom: 16px;
    }

    .qa-card-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding-top: 12px;
      border-top: 1px solid #F1F5F9;
    }

    .author-meta {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .author-meta strong {
      display: block;
      font-size: 13px;
      font-weight: 700;
      color: var(--text-primary);
    }

    .author-meta span {
      font-size: 11.5px;
      color: var(--text-muted);
    }

    .qa-stats-right {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 12.5px;
      color: var(--text-muted);
      font-weight: 600;
    }

    .answer-count-chip {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 4px 10px;
      border-radius: var(--radius-full);
      background: #EFF6FF;
      color: var(--primary);
      font-weight: 700;
      font-size: 12px;
    }

    /* Right Column: CÙNG GIÚP NHAU HỌC (Peer Recognition Bento Card) */
    .community-bento-card {
      background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
      border: 1px solid var(--border-hairline);
      border-radius: var(--radius-xl);
      padding: 22px;
      box-shadow: var(--shadow-card);
      display: flex;
      flex-direction: column;
      gap: 16px;
      position: sticky;
      top: 84px;
    }

    .eyebrow-blue {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--primary);
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .community-bento-card h2 {
      font-family: var(--font-display);
      font-size: 20px;
      font-weight: 800;
      line-height: 1.3;
      letter-spacing: -0.025em;
      color: var(--text-primary);
    }

    /* Reward Highlight Box (+5 XP & +5 Đồng Kiến) */
    .reward-pills-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .reward-mini-card {
      padding: 11px 12px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      gap: 9px;
    }

    .reward-mini-card.xp {
      background: #ECFDF5;
      border: 1px solid #A7F3D0;
      color: #065F46;
    }

    .reward-mini-card.coin {
      background: #FFFBEB;
      border: 1px solid #FDE68A;
      color: #92400E;
    }

    .reward-mini-card strong {
      display: block;
      font-family: var(--font-mono);
      font-size: 14px;
      font-weight: 800;
    }

    .reward-mini-card span {
      font-size: 11px;
      opacity: 0.85;
    }

    /* Daily Contribution Quota Meter */
    .daily-quota-box {
      padding: 12px 14px;
      border-radius: 14px;
      background: #FFFFFF;
      border: 1px solid #E2E8F0;
    }

    .daily-quota-head {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      font-weight: 600;
      margin-bottom: 7px;
    }

    .quota-bar {
      height: 7px;
      border-radius: 99px;
      background: #E2E8F0;
      overflow: hidden;
    }

    .quota-fill {
      height: 100%;
      width: 33.3%;
      background: linear-gradient(90deg, #10B981, #059669);
      border-radius: 99px;
    }

    /* Mini Leaderboard Preview */
    .mini-leaderboard {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding-top: 6px;
    }

    .leader-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 10px;
      border-radius: 10px;
      background: #FFFFFF;
      border: 1px solid #F1F5F9;
      font-size: 12.5px;
    }

    .leader-user {
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 600;
    }

    .leader-badge {
      font-family: var(--font-mono);
      font-size: 11.5px;
      font-weight: 700;
      color: #B45309;
      background: #FEF3C7;
      padding: 2px 8px;
      border-radius: 99px;
    }

    .community-rules {
      font-size: 11.5px;
      color: var(--text-muted);
      line-height: 1.5;
      padding-top: 12px;
      border-top: 1px solid #E2E8F0;
    }

    /* ==========================================================================
       7. SCREEN 3: CHI TIẾT CÂU HỎI & TRẢ LỜI (THREAD DETAIL VIEW)
       ========================================================================== */
    .back-pill-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 14px;
      border-radius: var(--radius-full);
      background: #FFFFFF;
      border: 1px solid #CBD5E1;
      font-size: 12.5px;
      font-weight: 700;
      color: var(--text-secondary);
      margin-bottom: 18px;
      box-shadow: var(--shadow-xs);
      transition: all 0.15s ease;
    }

    .back-pill-btn:hover {
      color: var(--primary);
      border-color: var(--primary);
      transform: translateX(-2px);
    }

    .detail-main-card {
      background: var(--bg-surface);
      border: 1px solid var(--border-hairline);
      border-radius: var(--radius-xl);
      padding: 26px 28px;
      box-shadow: var(--shadow-card);
      display: flex;
      flex-direction: column;
      gap: 22px;
    }

    .question-detail-title {
      font-family: var(--font-display);
      font-size: 24px;
      font-weight: 800;
      letter-spacing: -0.025em;
      color: var(--text-primary);
      margin-top: 8px;
    }

    .question-body-text {
      font-size: 15px;
      line-height: 1.65;
      color: var(--text-secondary);
      background: #F8FAFC;
      padding: 16px 18px;
      border-radius: 14px;
      border: 1px solid #E2E8F0;
    }

    .question-mod-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .pill-action-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      border-radius: 10px;
      background: #FFFFFF;
      border: 1px solid #CBD5E1;
      font-size: 12px;
      font-weight: 600;
      color: var(--text-secondary);
      transition: all 0.15s ease;
    }

    .pill-action-btn:hover {
      background: #F1F5F9;
      color: var(--text-primary);
    }

    .pill-action-btn.resolve {
      background: #EFF6FF;
      border-color: #BFDBFE;
      color: var(--primary);
    }

    /* Verified Answer Card (Green Mint Highlight from Screenshot 3) */
    .answers-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 12px;
      border-top: 1px solid #E2E8F0;
    }

    .answers-header h3 {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 800;
    }

    .answer-card {
      padding: 20px 22px;
      border-radius: 18px;
      background: linear-gradient(180deg, #ECFDF5 0%, #F0FDF4 100%);
      border: 1.5px solid #A7F3D0;
      box-shadow: 0 8px 24px -6px rgba(16, 185, 129, 0.12);
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .answer-top-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }

    .verified-teacher-ribbon {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 11px;
      border-radius: var(--radius-full);
      background: #FFFFFF;
      border: 1px solid #6EE7B7;
      color: #047857;
      font-size: 12px;
      font-weight: 700;
      box-shadow: var(--shadow-xs);
    }

    .answer-body-copy {
      font-size: 14.5px;
      line-height: 1.6;
      color: #064E3B;
    }

    /* Visual Dipole Formula Helper inside Answer */
    .dipole-visual-box {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      padding: 10px 16px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.85);
      border: 1px solid #A7F3D0;
      font-family: var(--font-mono);
      font-size: 13px;
      color: #065F46;
      align-self: flex-start;
    }

    .answer-actions-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 8px;
    }

    /* Footer */

}
/* Adaptations for real data, variable-length answers, role permissions and existing app shell. */
.community-reference{max-width:1320px;--text-faint:#94A3B8;--fpt-orange:#F37021}
.community-reference .page-heading{align-items:center}.community-reference .page-heading h1{font-size:28px}.community-reference .page-heading p{font-size:13px}.community-reference .page-heading .btn{font-size:12px}
.community-reference .ant-chat-layout{grid-template-columns:280px minmax(0,1fr);gap:22px;height:clamp(690px,calc(100dvh - 200px),900px);align-items:stretch}
.community-reference .ant-chat-sidebar{height:100%;min-height:0;padding:16px;gap:12px}.community-reference .ant-chat-sidebar>.btn{font-size:12px;min-height:42px}.community-reference .ant-chat-history{min-height:0;max-height:none;gap:8px;flex:1;overflow-y:auto}.community-reference .ant-chat-item{padding:12px;display:grid;gap:9px;min-height:82px;flex-shrink:0;border-radius:13px}.community-reference .thread-meta-top{gap:5px;flex-wrap:wrap;justify-content:space-between}.community-reference .ant-chat-item .subject-tag{font-family:var(--font-body);font-size:10px}.community-reference .thread-time{font-size:9px;white-space:nowrap}.community-reference .thread-title{font-size:12px;line-height:1.65}.community-reference .kien-sidebar-section-label{font-size:10px;margin:2px 2px;color:#8D9BB0}.community-reference .kien-method-card{margin-top:auto;flex-shrink:0}.community-reference .kien-method-list{margin:0;padding:0;gap:7px}.community-reference .kien-method-list li{align-items:flex-start;font-size:11px;line-height:1.7}.community-reference .kien-method-list li>span{flex:0 0 13px;color:#2563EB}.community-reference .kien-privacy-foot{font-size:10px;line-height:1.7;margin:0}.community-reference .kien-privacy-foot .icon{flex:0 0 15px;width:15px;height:15px}.chat-history-empty{display:grid;gap:12px;padding:22px 12px;color:var(--text-muted);font-size:12px;line-height:1.8}.chat-history-empty>.icon{width:24px;height:24px;color:#A6B9D5}
.community-reference .ant-chat-main{min-height:0;height:100%;border-radius:24px}.community-reference .ant-chat-header{padding:16px 20px;flex-shrink:0;gap:12px}.community-reference .kien-agent-identity{min-width:0;gap:11px}.community-reference .kien-agent-title{flex-wrap:wrap;gap:7px}.community-reference .kien-agent-title h2{font-size:15px;line-height:1.6}.community-reference .kien-agent-sub{font-size:11px;margin-top:3px}.community-reference .kien-agent-sub .subject-tag{font-size:10px}.community-reference .kien-mode-badge{font-size:9px;white-space:nowrap}.community-reference .kien-avatar-box{flex:0 0 38px;width:38px;height:38px;border-radius:12px;overflow:visible}.community-reference .kien-avatar-box .companion-robot{display:block;width:31px;height:31px;animation:none;transform:none}.community-reference .kien-online-dot{width:10px;height:10px}.community-reference .ant-chat-header>.btn{font-size:10px;padding:7px 10px;min-height:32px;white-space:nowrap}.community-reference .ant-chat-main>.community-notice{font-size:11px;margin:10px 15px 0;padding:10px 12px}
.community-reference .ant-messages{height:auto;min-height:180px;max-height:none;flex:1;gap:22px;padding:24px;overflow-y:auto}.community-reference .ant-message{width:100%;max-width:100%;display:flex;align-items:flex-start;gap:10px;flex-shrink:0}.community-reference .ant-message.user{width:auto;max-width:82%;margin-left:auto;align-self:flex-end}.community-reference .ant-message.assistant{max-width:96%;align-self:flex-start}.community-reference .ant-message-content{min-width:0;flex:1}.community-reference .ant-message-label{font-size:10px;gap:8px;margin-bottom:7px;line-height:1.6}.community-reference .ant-message-label time{color:#8C9AAF;font-size:9px;font-weight:400}.community-reference .ant-message-body{font-size:13px;line-height:1.8;overflow-wrap:anywhere;white-space:pre-wrap;padding:14px 17px}.community-reference .ant-message.user .ant-message-body{background:linear-gradient(135deg,#2563EB,#1D4ED8);border:1px solid #2563EB;color:white;border-radius:18px 18px 4px 18px;box-shadow:0 6px 16px -4px rgba(37,99,235,.25)}.community-reference .ant-message.assistant .ant-message-body{background:#F8FAFC;border:1px solid #E2E8F0;border-radius:4px 18px 18px 18px;box-shadow:0 1px 2px rgba(15,23,42,.03)}.community-reference .socratic-steps-box{white-space:normal;margin:12px 0 3px;gap:8px}.community-reference .socratic-step-item{align-items:flex-start;padding:11px 12px;font-size:12px;line-height:1.8;white-space:pre-wrap}.community-reference .socratic-step-num{margin-top:2px;color:#2563EB;background:#EFF6FF}.community-reference .kien-question-prompt{font-size:12px;line-height:1.8;display:block;white-space:pre-wrap}.community-reference .ant-chat-empty{gap:10px;padding:20px 10px}.community-reference .ant-chat-mascot{width:85px;height:90px}.community-reference .empty-chat-eyebrow{font-size:9px;letter-spacing:.1em;font-weight:750;color:#7A92B0}.community-reference .ant-chat-empty h2{font-size:22px}.community-reference .ant-chat-empty p{font-size:12px;max-width:380px}
.community-reference .quick-prompts-bar{padding:11px 20px;gap:7px;flex-shrink:0}.community-reference .quick-prompt-label{font-size:10px;white-space:nowrap}.community-reference .quick-prompt-label .icon{width:13px;height:13px;color:#F37021}.community-reference .prompt-chip{font-size:10px;line-height:1.5;padding:6px 10px;white-space:normal;text-align:left}.community-reference .ant-composer{padding:16px 20px;gap:10px;flex-shrink:0;background:white;border-top:0}.community-reference .composer-box{min-width:0;border:1px solid #CBD5E1;border-radius:15px;overflow:hidden;background:#F8FAFC}.community-reference .composer-box:focus-within{background:white;border-color:#93C5FD;box-shadow:0 0 0 3px #EFF6FF}.community-reference .composer-textarea{display:block;min-height:76px;max-height:180px;width:100%;border:0;border-radius:0;background:transparent;box-shadow:none;padding:14px;font-size:12px;line-height:1.8;resize:vertical}.community-reference .composer-textarea:focus{border:0;outline:0;box-shadow:none;background:transparent}.community-reference .composer-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 12px 10px;flex-wrap:wrap}.community-reference .community-attachments{padding:0;gap:8px;flex:1;min-width:0}.community-reference .community-paperclip{font-size:10px;padding:5px 8px;min-height:28px;gap:6px;border:1px dashed #AABDD9;border-radius:8px;background:white;white-space:nowrap}.community-reference .community-paperclip .icon{width:14px;height:14px}.community-reference .community-attachments>.small{font-size:9px;line-height:1.6}.community-reference .ant-subject-label{font-size:11px}.community-reference .ant-subject-label select{min-height:30px;width:190px;padding:6px 10px;font-size:11px}.community-reference .ant-composer-footer{gap:12px}.community-reference .ant-composer-footer small{font-size:9px;line-height:1.6}.community-reference .ant-composer-footer>.btn{min-height:38px;font-size:12px;padding:9px 15px}
.community-reference label.community-consent{font-size:10px!important;line-height:1.7;gap:9px!important;align-items:center!important}.community-reference .community-consent input[type="checkbox"]{appearance:none!important;-webkit-appearance:none!important;flex:0 0 29px!important;min-width:29px!important;max-width:29px!important;width:29px!important;height:17px!important;min-height:17px!important;border-radius:20px!important;background:#CBD5E1;border:1px solid #B8C4D5;margin:0!important;position:relative!important;align-self:flex-start;margin-top:2px!important;cursor:pointer}.community-reference .community-consent input[type="checkbox"]::before{content:'';position:absolute;width:11px;height:11px;top:2px;left:2px;border-radius:50%;background:white;box-shadow:0 1px 2px #64748B40;transition:transform .15s}.community-reference .community-consent input[type="checkbox"]:checked{background:#2563EB;border-color:#2563EB}.community-reference .community-consent input[type="checkbox"]:checked::before{transform:translateX(12px)}.community-reference .community-consent input:focus-visible{outline:2px solid #2563EB;outline-offset:3px}
.community-reference .community-forum-layout,.community-reference .forum-thread-layout{grid-template-columns:minmax(0,1fr) 320px;gap:22px;max-width:none;margin:0;align-items:start}.community-reference .community-filter{grid-template-columns:minmax(0,1fr) 140px 140px auto;gap:9px;padding:12px 14px}.community-reference .search-input-wrap{min-width:0}.community-reference .community-filter input,.community-reference .community-filter select{font-size:11px;padding:9px 11px;min-height:38px}.community-reference .search-input-wrap .qa-input{padding-left:33px}.community-reference .community-filter .btn{font-size:11px;min-height:38px;padding:8px 14px}.community-reference .forum-post-card{padding:20px 22px;cursor:default}.community-reference .forum-post-title{font-size:18px;line-height:1.65;margin:0 0 5px;display:block}.community-reference .qa-card-topic{font-size:11px;margin-bottom:14px;line-height:1.7}.community-reference .qa-card-preview{font-size:12px;line-height:1.85;white-space:pre-wrap;margin-bottom:14px;overflow-wrap:anywhere}.community-reference .forum-post-bottom{margin-top:0;padding-top:12px;align-items:center}.community-reference .qa-stats-right{gap:9px;flex-wrap:wrap;justify-content:flex-end}.community-reference .qa-stats-right>small{font-size:9px;white-space:nowrap}.community-reference .answer-count-chip{font-size:10px;padding:4px 8px;white-space:nowrap}.community-reference .answer-count-chip .icon{width:12px;height:12px}.community-reference .subject-tag{font-size:10px}.community-reference .status-pill{font-size:10px;padding:3px 8px;line-height:1.6}.community-reference .status-pill .icon{width:12px;height:12px}.community-reference .subject-tag.lit{background:#FFF1F5;border:1px solid #FFD2DF;color:#B33360}.community-reference .subject-tag.english{background:#FCE7F3;border:1px solid #FBCFE8;color:#BE185D}.community-reference .subject-tag.bio{background:#E5F8ED;border:1px solid #BBE7D0;color:#15805B}.community-reference .subject-tag.info{background:#EEF0FF;border:1px solid #D6DAFF;color:#4338CA}.community-reference .qa-card.phys-border::before{background:#D97706}.community-reference .qa-card.bio-border::before{background:#15966F}.community-reference .qa-card.info-border::before{background:#4F46E5}.community-reference .qa-card.lit-border::before{background:#BE416D}.community-reference .qa-card.english-border::before{background:#C52E79}
.community-reference .community-guide{display:flex;padding:22px;gap:16px;position:sticky;top:24px}.community-reference .community-guide .eyebrow-blue{font-size:10px}.community-reference .community-guide .eyebrow-blue .icon{width:14px;height:14px}.community-reference .community-guide h2{font-size:20px;line-height:1.5;margin:0}.community-reference .community-guide>p{margin:0;font-size:12px;line-height:1.9}.community-reference .community-guide .btn{font-size:11px;min-height:36px}.community-reference .reward-mini-card{padding:11px 10px;gap:8px;min-width:0;align-items:center}.community-reference .reward-mini-card strong{font-size:12px;line-height:1.65}.community-reference .reward-mini-card span{font-size:10px;line-height:1.65}.community-reference .reward-mini-card>.icon{width:19px;height:19px;color:#13936C}.community-reference .ant-coin-icon{display:grid;place-items:center;width:24px;height:24px;flex:0 0 24px;border-radius:50%;border:2px solid #EFBF60;background:linear-gradient(135deg,#FFF0BB,#F7CA65);box-shadow:inset 0 0 0 2px #FFE7A5;color:#AA6A0A;font-family:var(--font-numbers);font-weight:700;font-size:11px!important}.community-reference .daily-quota-head{font-size:10px;gap:12px;line-height:1.7}.community-reference .daily-quota-head strong{font-family:var(--font-numbers);color:#059669;white-space:nowrap}.community-reference .daily-quota-box>small{font-size:9px;color:var(--text-muted);line-height:1.7}.community-reference .daily-quota-box>strong{font-size:11px}.community-reference .daily-quota-box>p{font-size:11px;line-height:1.8;margin:8px 0 0}.community-reference .quota-progress{display:block;width:100%;height:7px;border:0;border-radius:99px;background:#E2E8F0;overflow:hidden;margin:7px 0;appearance:none}.community-reference .quota-progress::-webkit-progress-bar{background:#E2E8F0;border-radius:99px}.community-reference .quota-progress::-webkit-progress-value{background:linear-gradient(90deg,#2EBF95,#0C976E);border-radius:99px}.community-reference .quota-progress::-moz-progress-bar{background:#0C976E}.community-reference .mini-leaderboard-heading{font-size:9px;font-weight:750;letter-spacing:.07em;color:#8A99AD;margin-bottom:3px}.community-reference .leader-row{gap:8px;padding:9px 10px}.community-reference .leader-row .community-author{gap:7px;min-width:0}.community-reference .leader-row .avatar{width:25px;height:25px;flex-basis:25px;font-size:9px}.community-reference .leader-row strong{font-size:10px;line-height:1.7}.community-reference .leader-row small{font-size:9px}.community-reference .leader-badge{font-size:9px;white-space:nowrap}.community-reference .mini-leader-empty{font-size:11px;line-height:1.8;color:var(--text-muted);padding:10px;background:#F8FAFC;border-radius:10px;border:1px dashed #DDE5F0}.community-reference .community-guide .community-rules{font-size:10px;line-height:1.85;padding-top:14px}
.community-reference .back-pill-btn{font-size:11px}.community-reference .forum-thread{padding:26px 28px;gap:20px;display:flex;flex-direction:column}.community-reference .question-detail-title{font-size:24px;line-height:1.5;margin:12px 0 16px}.community-reference .forum-thread .forum-body{margin-top:18px;font-size:13px;line-height:1.9}.community-reference .forum-thread .question-body-text{margin:20px 0 0;white-space:pre-wrap}.community-reference .forum-thread-actions{margin-top:16px}.community-reference .forum-thread-actions .btn{font-size:10px;padding:6px 10px}.community-reference .forum-moderator-tools{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:12px 14px;margin-top:16px;border:1px solid #DBE7FC;background:#F5F9FF;border-radius:12px}.community-reference .forum-moderator-tools>span{font-size:10px;font-weight:700;color:#4671AB;display:flex;gap:5px;align-items:center;margin-right:auto}.community-reference .forum-moderator-tools .icon{width:13px;height:13px}.community-reference .forum-moderator-tools .btn{font-size:10px;min-height:30px;padding:6px 10px}.community-reference .answers-header{gap:12px;align-items:center}.community-reference .answers-header h2{font-size:16px;line-height:1.7}.community-reference .answers-header small{font-size:9px;color:var(--text-muted);text-align:right}.community-reference .forum-replies{margin:0;gap:14px}.community-reference .forum-reply{padding:20px 22px}.community-reference .forum-reply.unverified{background:#FFFFFF;border:1px solid #DDE6F1}.community-reference .answer-top-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.community-reference .forum-reply .forum-body{font-size:13px;color:#224C40}.community-reference .forum-reply.unverified .forum-body{color:var(--text-primary)}.community-reference .verified-teacher-ribbon{font-size:9px;padding:5px 8px;line-height:1.7;white-space:normal}.community-reference .answer-verifier{font-size:10px;color:#368169;text-align:right;margin-top:16px;line-height:1.8}.community-reference .teacher-tool-label{font-size:9px;color:#54719A;margin-right:auto}.community-reference .answer-actions-row{border-top:1px solid #CEE9DE;padding-top:12px}.community-reference .forum-reply-form{margin-top:0;padding-top:20px;gap:12px}.community-reference .reply-composer-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.community-reference .reply-composer-heading label{font-size:13px;font-weight:750}.community-reference .reply-composer-heading small{font-size:9px;color:#059669;line-height:1.8}.community-reference .forum-reply-form .composer-toolbar>.btn{font-size:11px;min-height:35px;flex-shrink:0}.community-reference .thread-context{padding:22px;gap:16px;top:24px}.community-reference .thread-context .eyebrow-blue{font-size:10px}.community-reference .thread-context h2{font-size:19px;line-height:1.7}.community-reference .thread-topic{font-size:13px;color:var(--text-secondary);line-height:1.85;overflow-wrap:anywhere}.community-reference .thread-context-facts{display:grid;gap:12px;padding:15px;border:1px solid #E2E8F0;border-radius:12px;background:#F8FAFC;font-size:11px}.community-reference .thread-context-facts>div{display:flex;justify-content:space-between;gap:10px}.community-reference .thread-context-facts dt{color:var(--text-muted)}.community-reference .thread-context-facts dd{text-align:right;max-width:65%;overflow-wrap:anywhere;font-weight:600;margin:0}.community-reference .thread-help-note{padding:14px;background:#EFFAF5;border:1px solid #C4E9D9;border-radius:13px;color:#27644D;font-size:11px;line-height:1.8}.community-reference .thread-help-note>strong{font-size:12px}.community-reference .thread-help-note p{margin:7px 0 0}.community-reference .thread-context .community-rules{font-size:10px;line-height:1.85}.community-reference .thread-context>.btn{font-size:11px}.community-reference .community-author .avatar{overflow:hidden}.community-reference .community-author img{width:100%;height:100%;object-fit:cover}.community-reference .community-author strong{font-size:11px;line-height:1.7}.community-reference .community-author small{font-size:9px;line-height:1.7}.community-reference .community-author .avatar{width:32px;height:32px;flex-basis:32px;font-size:10px}
.community-math{white-space:normal;display:inline-block;max-width:100%;vertical-align:middle;overflow-x:auto;overflow-y:hidden;padding:1px 0}.community-math.display{display:block;text-align:center;margin:12px 0}.community-math math{font-size:1.13em;color:inherit}.community-code{white-space:pre;overflow-x:auto;background:#101B30;color:#E3EBF8;border-radius:12px;padding:14px;font:12px/1.8 var(--font-numbers);max-width:100%;margin:10px 0}
@media(min-width:1700px){.community-reference .ant-chat-layout{grid-template-columns:300px minmax(0,1fr)}}
@media(max-width:1200px) and (min-width:761px){.community-reference .ant-chat-layout{grid-template-columns:225px minmax(0,1fr);gap:16px}.community-reference .kien-mode-badge{display:none}.community-reference .community-forum-layout,.community-reference .forum-thread-layout{grid-template-columns:minmax(0,1fr) 270px;gap:16px}.community-reference .community-filter{grid-template-columns:minmax(0,1fr) 110px 110px auto}.community-reference .qa-stats-right>small{display:none}.community-reference .community-guide,.community-reference .thread-context{padding:18px}}
@media(max-width:1000px){.community-reference .community-forum-layout,.community-reference .forum-thread-layout{grid-template-columns:1fr}.community-reference .community-guide,.community-reference .thread-context{position:static}.community-reference .community-guide{display:grid;grid-template-columns:1fr 1fr;gap:16px}.community-reference .community-guide .eyebrow-blue,.community-reference .community-guide h2,.community-reference .community-guide>p{grid-column:1/-1}.community-reference .community-guide .community-rules{grid-column:1/-1}.community-reference .community-guide>.btn{align-self:end}}
@media(max-width:760px){.community-reference .page-heading h1{font-size:25px}.community-reference .page-heading{flex-wrap:wrap;gap:12px}.community-reference .page-heading .heading-actions{width:100%}.community-reference .page-heading .heading-actions>.btn{font-size:11px}.community-reference .ant-chat-layout{grid-template-columns:1fr;height:auto;gap:14px}.community-reference .ant-chat-sidebar{height:auto;padding:13px;gap:10px}.community-reference .kien-method-card,.community-reference .kien-privacy-foot,.community-reference .kien-sidebar-section-label{display:none}.community-reference .ant-chat-history{display:flex;flex-direction:row;overflow-x:auto;max-height:110px;gap:8px}.community-reference .ant-chat-history .ant-chat-item{min-width:190px;max-width:210px;min-height:80px}.community-reference .chat-history-empty{padding:2px 4px;display:block;font-size:11px}.community-reference .chat-history-empty>.icon{display:none}.community-reference .ant-chat-main{height:auto;min-height:620px}.community-reference .ant-messages{height:340px;min-height:270px;max-height:420px;flex:auto;padding:18px 14px;gap:18px}.community-reference .ant-chat-header{padding:14px;gap:8px}.community-reference .kien-agent-title h2{font-size:13px}.community-reference .kien-mode-badge{display:none}.community-reference .ant-chat-header>.btn{font-size:9px;padding:6px 8px}.community-reference .kien-agent-identity{gap:8px}.community-reference .ant-message.assistant{max-width:100%;gap:7px}.community-reference .ant-message>.kien-avatar-box{width:28px;height:28px;flex-basis:28px;border-radius:9px}.community-reference .ant-message>.kien-avatar-box .companion-robot{width:23px;height:23px}.community-reference .ant-message.user{max-width:90%}.community-reference .ant-message-body{padding:12px;font-size:12px;line-height:1.85}.community-reference .ant-message-label time{display:none}.community-reference .socratic-step-item{font-size:11px;padding:9px;gap:8px}.community-reference .socratic-step-num{width:19px;height:19px;font-size:10px}.community-reference .quick-prompts-bar{padding:10px 13px;gap:7px}.community-reference .quick-prompt-label{width:100%}.community-reference .prompt-chip{font-size:10px}.community-reference .ant-composer{padding:13px;gap:10px}.community-reference .composer-textarea{font-size:12px;min-height:85px}.community-reference .composer-toolbar{padding:0 10px 10px}.community-reference .community-attachments>.small{font-size:9px}.community-reference .ant-composer-footer{align-items:center}.community-reference .ant-composer-footer small{font-size:9px}.community-reference .ant-composer-footer>.btn{font-size:11px;padding:9px 12px}.community-reference label.community-consent{font-size:9px!important}.community-reference .community-filter{grid-template-columns:1fr 1fr;padding:12px;gap:8px}.community-reference .search-input-wrap{grid-column:1/-1}.community-reference .community-filter input{grid-column:auto}.community-reference .community-filter>.btn{grid-column:1/-1}.community-reference .forum-post-card{padding:18px}.community-reference .forum-post-title{font-size:16px}.community-reference .qa-card-preview{font-size:12px;padding:11px}.community-reference .forum-post-bottom{gap:12px;align-items:flex-start;flex-direction:column}.community-reference .qa-stats-right{justify-content:flex-start}.community-reference .qa-stats-right>small{display:block}.community-reference .community-guide{display:flex;padding:20px}.community-reference .community-guide h2{font-size:20px}.community-reference .forum-thread{padding:22px 17px;gap:18px}.community-reference .question-detail-title{font-size:21px;margin:12px 0 15px}.community-reference .question-body-text{padding:14px}.community-reference .answers-header{align-items:flex-start}.community-reference .answers-header small{max-width:140px;line-height:1.7}.community-reference .forum-reply{padding:17px 14px}.community-reference .answer-top-row{gap:12px}.community-reference .verified-teacher-ribbon{font-size:9px}.community-reference .forum-thread-actions .btn{font-size:10px;white-space:normal}.community-reference .forum-moderator-tools>span{width:100%}.community-reference .reply-composer-heading small{font-size:9px}.community-reference .forum-reply-form .composer-toolbar{gap:12px}.community-reference .forum-reply-form .composer-toolbar>.btn{margin-left:auto}.community-reference .thread-context{padding:20px}}
@media(prefers-reduced-motion:reduce){.community-reference *,.community-reference *::before,.community-reference *::after{animation:none!important;transition:none!important}}
.community-reference{--radius-md:14px;--radius-sm:10px}.community-reference .new-chat-btn{border-radius:14px}.community-reference .ant-message-body{font-size:14px}.community-reference .socratic-step-item{font-size:13px}.community-reference .qa-card-preview{font-size:13px}.community-reference .community-author strong{font-size:12px}.community-reference .community-author small{font-size:10px}.community-reference .community-guide .community-rules{font-size:11px}.community-reference .forum-thread .forum-body{font-size:14px}.community-reference .leader-row .community-author strong{font-size:11px}.community-reference .leader-row .community-author small{font-size:9px}@media(max-width:760px){.community-reference .ant-message-body,.community-reference .forum-thread .forum-body{font-size:13px}.community-reference .socratic-step-item,.community-reference .qa-card-preview{font-size:12px}}

/* ==========================================================================
   1. CHATGPT-STYLE UNIFIED COMPOSER (HỎI KIẾN)
   ========================================================================== */
.community-reference .chatgpt-composer-form {
  padding: 12px 20px 18px !important;
  background: transparent !important;
  border-top: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.community-reference .chatgpt-composer-box {
  background: #F8FAFC !important;
  border: 1.5px solid #DDE5F0 !important;
  border-radius: 24px !important;
  padding: 10px 12px 10px 14px !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 8px 24px -6px rgba(15, 23, 42, 0.06), inset 0 1px 0 #FFFFFF !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.community-reference .chatgpt-composer-box:focus-within,
.community-reference .chatgpt-composer-box.dragging {
  background: #FFFFFF !important;
  border-color: #3B82F6 !important;
  box-shadow: 0 12px 28px -8px rgba(37, 99, 235, 0.14), 0 0 0 3px rgba(59, 130, 246, 0.12) !important;
}

.community-reference .chatgpt-attachments-tray:empty {
  display: none;
}

.community-reference .chatgpt-thumb-list {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 2px 6px;
  flex-wrap: wrap;
}

.community-reference .chatgpt-thumb-item {
  position: relative;
  width: 68px;
  height: 68px;
  border-radius: 14px;
  overflow: visible;
  flex-shrink: 0;
}

.community-reference .chatgpt-thumb-open {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 1px solid #CBD5E1;
  border-radius: 14px;
  overflow: hidden;
  background: #FFFFFF;
  cursor: pointer;
  display: block;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
}

.community-reference .chatgpt-thumb-open img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.community-reference .chatgpt-thumb-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #FFFFFF;
  background: #0F172A;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.25);
  transition: transform 0.15s ease, background 0.15s ease;
}

.community-reference .chatgpt-thumb-remove:hover {
  background: #EF4444;
  transform: scale(1.08);
}

.community-reference .chatgpt-textarea {
  min-height: 36px !important;
  max-height: 180px !important;
  padding: 4px 4px 6px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  resize: none !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: #0F172A !important;
}

.community-reference .chatgpt-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 0 0 !important;
}

.community-reference .chatgpt-toolbar-left,
.community-reference .chatgpt-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.community-reference .chatgpt-plus-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #CBD5E1;
  background: #FFFFFF;
  color: #334155;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin: 0 !important;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.community-reference .chatgpt-plus-btn:hover {
  background: #EFF6FF;
  border-color: #93C5FD;
  color: #2563EB;
  transform: translateY(-1px);
}

.community-reference .chatgpt-plus-btn:active {
  transform: scale(0.95);
}

.community-reference .chatgpt-plus-btn input[type="file"] {
  display: none !important;
}

.community-reference .chatgpt-plus-btn .icon {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
}

.community-reference .chatgpt-model-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(241, 245, 249, 0.85);
  border: 1px solid #E2E8F0;
  font-size: 12px;
  font-weight: 600;
  color: #334155;
  user-select: none;
}

.community-reference .chatgpt-model-pill .icon {
  width: 14px;
  height: 14px;
  stroke: #2563EB;
  stroke-width: 2;
  fill: none;
}

.community-reference .chatgpt-model-pill small {
  color: #64748B;
  font-weight: 500;
  font-size: 11px;
}

.community-reference .chatgpt-send-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
  transition: transform 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease;
}

.community-reference .chatgpt-send-btn:hover:not(:disabled) {
  transform: translateY(-1.5px) scale(1.03);
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.45);
}

.community-reference .chatgpt-send-btn:active:not(:disabled) {
  transform: scale(0.94);
}

.community-reference .chatgpt-send-btn:disabled {
  opacity: 0.55;
  cursor: wait;
}

.community-reference .chatgpt-send-btn.is-sending {
  animation: pulseSendBtn 1s ease-in-out infinite;
}

@keyframes pulseSendBtn {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(0.92); opacity: 0.55; }
}

.community-reference .chatgpt-send-btn .icon {
  width: 18px;
  height: 18px;
  stroke: #FFFFFF;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* ==========================================================================
   2. METALLIC SHIMMER NAME STYLES & ANT RANK TITLE BADGES
      (Chuẩn "D D · Hóa Thần" & "Bán Thần" -> Hệ thống Danh hiệu Kiến & Giáo Viên)
   ========================================================================== */
@keyframes shineText {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

.author-name-line,
.sidebar-name-row,
.profile-identity-row,
.shop-name-showcase,
.rewards-rank-row {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.profile-identity-row {
  justify-content: center;
  margin-bottom: 4px;
}

.shop-name-showcase {
  padding: 14px 18px;
  border-radius: 14px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}

.shop-name-showcase .user-display-name {
  font-size: 18px !important;
}

/* 2.1. Progressive 10-Level Name Styles: Cấp 1–3 Tĩnh -> Cấp 4–10 Đa Tầng Ánh Kim & Quang Phổ */

/* =====================================================================
   TẦNG 1: CƠ BẢN / MÀU TĨNH (CẤP 1 – CẤP 3 & MÀU TĨNH CỬA HÀNG)
   Gọn gàng, đơn sắc tĩnh 100% để tạo động lực phấn đấu lên các cấp cao
   ===================================================================== */
.level.name-rookie-slate,
.name-rookie-slate,
.profile-name.name-rookie-slate,
.level.name_2 {
  font-weight: 750 !important;
  color: #0284C7 !important;
  -webkit-text-fill-color: #0284C7 !important;
  background: none !important;
  animation: none !important;
}

.sidebar .level.name-rookie-slate,
.sidebar .profile-name.name-rookie-slate,
.sidebar .level.name_2 {
  color: #38BDF8 !important;
  -webkit-text-fill-color: #38BDF8 !important;
}

.level.name-rookie-jade,
.name-rookie-jade,
.profile-name.name-rookie-jade,
.level.name_3 {
  font-weight: 750 !important;
  color: #059669 !important;
  -webkit-text-fill-color: #059669 !important;
  background: none !important;
  animation: none !important;
}

.sidebar .level.name-rookie-jade,
.sidebar .profile-name.name-rookie-jade,
.sidebar .level.name_3 {
  color: #34D399 !important;
  -webkit-text-fill-color: #34D399 !important;
}

.level.name-sunset,
.name-sunset,
.profile-name.name-sunset {
  font-weight: 750 !important;
  color: #EA580C !important;
  -webkit-text-fill-color: #EA580C !important;
  background: none !important;
  animation: none !important;
}

.sidebar .level.name-sunset,
.sidebar .profile-name.name-sunset {
  color: #FB923C !important;
  -webkit-text-fill-color: #FB923C !important;
}

/* =====================================================================
   TẦNG 2 & 3: CẤP 4 -> CẤP 10 (ÁNH KIM ĐA DIỆN, SAO BĂNG & QUANG PHỔ QUÁN QUÂN)
   Càng lên cấp cuối, số lượng dải màu ngọc, độ tương phản vệt sáng trắng (#FFFFFF),
   tốc độ lướt sáng và hào quang drop-shadow càng mạnh và sắc nét!
   ===================================================================== */
/* GIÁO VIÊN (.name_teacher): Chuẩn Neutral / Xanh Verify lịch sự, trang nhã, không lòe loẹt */
.level.name_teacher,
.profile-name.name_teacher {
  font-weight: 750 !important;
  color: #1E3A8A !important;
  -webkit-text-fill-color: #1E3A8A !important;
  background: none !important;
  animation: none !important;
  filter: none !important;
}

.sidebar .level.name_teacher,
.sidebar .profile-name.name_teacher {
  color: #F8FAFC !important;
  -webkit-text-fill-color: #F8FAFC !important;
  background: none !important;
  animation: none !important;
  filter: none !important;
}

.level.name_4,
.level.name_5,
.level.name_6,
.level.name_7,
.level.name_8,
.level.name_9,
.level.name_10,
.level.name-ocean,
.name-ocean,
.profile-name.name-ocean,
.level.name-emerald,
.name-emerald,
.profile-name.name-emerald,
.level.name-goldfire,
.name-goldfire,
.profile-name.name-goldfire,
.level.name-crimson,
.name-crimson,
.profile-name.name-crimson,
.level.name-galaxy,
.name-galaxy,
.profile-name.name-galaxy,
.level.name-royal,
.name-royal,
.profile-name.name-royal {
  font-weight: 800 !important;
  display: inline-block;
  letter-spacing: 0.01em;
  color: transparent !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* CẤP 4 (.name_4 & .name-goldfire): ÁNH KIM MẶT TRỜI (1 vệt sáng vàng đồng ấm, tốc độ 3.4s) */
.level.name_4,
.level.name-goldfire,
.name-goldfire,
.profile-name.name-goldfire {
  background-image: linear-gradient(
    125deg,
    #78350F 0%,
    #B45309 22%,
    #F59E0B 40%,
    #FFFFFF 50%,
    #FBBF24 60%,
    #B45309 80%,
    #78350F 100%
  ) !important;
  background-size: 200% auto !important;
  animation: shineText 3.4s linear infinite !important;
}

.sidebar .level.name_4,
.sidebar .level.name-goldfire,
.sidebar .profile-name.name-goldfire {
  background-image: linear-gradient(
    125deg,
    #F59E0B 0%,
    #FDE047 28%,
    #FFFFFF 50%,
    #FBBF24 72%,
    #F59E0B 100%
  ) !important;
  background-size: 200% auto !important;
}

/* CẤP 5 (.name_5 & .name-ocean): ÁNH KIM BĂNG LAM (Vân kim loại xanh băng sắc nét, tốc độ 3.0s) */
.level.name_5,
.level.name-ocean,
.name-ocean,
.profile-name.name-ocean {
  background-image: linear-gradient(
    125deg,
    #031B33 0%,
    #00529B 22%,
    #00A8FF 40%,
    #FFFFFF 50%,
    #0088FF 60%,
    #003366 80%,
    #00A8FF 100%
  ) !important;
  background-size: 200% auto !important;
  animation: shineText 3s linear infinite !important;
}

.sidebar .level.name_5,
.sidebar .level.name-ocean,
.sidebar .profile-name.name-ocean {
  background-image: linear-gradient(
    125deg,
    #38BDF8 0%,
    #7DD3FC 25%,
    #FFFFFF 50%,
    #38BDF8 75%,
    #0284C7 100%
  ) !important;
  background-size: 200% auto !important;
}

/* CẤP 6 (.name_6 & .name-emerald): ÁNH KIM NGỌC LỤC BẢO ĐA DIỆN (Pha 2 sắc Ngọc Lục Bảo + Lam Ngọc, tốc độ 2.6s) */
.level.name-emerald,
.name-emerald,
.profile-name.name-emerald,
.level.name_6 {
  background-image: linear-gradient(
    125deg,
    #022C22 0%,
    #047857 18%,
    #10B981 36%,
    #FFFFFF 48%,
    #06B6D4 60%,
    #0284C7 78%,
    #047857 92%,
    #022C22 100%
  ) !important;
  background-size: 200% auto !important;
  animation: shineText 2.6s linear infinite !important;
}

.sidebar .level.name-emerald,
.sidebar .profile-name.name-emerald,
.sidebar .level.name_6 {
  background-image: linear-gradient(
    125deg,
    #34D399 0%,
    #6EE7B7 26%,
    #FFFFFF 48%,
    #22D3EE 72%,
    #34D399 100%
  ) !important;
  background-size: 200% auto !important;
}

/* CẤP 7 (.name_7 & .name-crimson): ÁNH KIM HỒNG NGỌC SAO BĂNG (Kết hợp Đỏ Ruby + Vàng Kim + Tia sáng Kim Cương, tốc độ 2.3s) */
.level.name-crimson,
.name-crimson,
.profile-name.name-crimson,
.level.name_7 {
  background-image: linear-gradient(
    125deg,
    #4C0519 0%,
    #BE123C 18%,
    #F43F5E 34%,
    #FDE047 45%,
    #FFFFFF 50%,
    #F97316 58%,
    #E11D48 74%,
    #881337 88%,
    #4C0519 100%
  ) !important;
  background-size: 200% auto !important;
  animation: shineText 2.3s linear infinite !important;
}

.sidebar .level.name-crimson,
.sidebar .profile-name.name-crimson,
.sidebar .level.name_7 {
  background-image: linear-gradient(
    125deg,
    #FB7185 0%,
    #FDE047 28%,
    #FFFFFF 50%,
    #F43F5E 74%,
    #FB7185 100%
  ) !important;
  background-size: 200% auto !important;
}

/* CẤP 8 (.name_8 & .name-galaxy): CỰC QUANG NGÂN HÀ ĐA SẮC (Lam Vũ Trụ + Tím Neon + Hồng Tinh Vân + Băng Kim, tốc độ 2.0s) */
.level.name_8,
.level.name-galaxy,
.name-galaxy,
.profile-name.name-galaxy {
  background-image: linear-gradient(
    125deg,
    #1E1B4B 0%,
    #1D4ED8 16%,
    #06B6D4 30%,
    #FFFFFF 42%,
    #EC4899 54%,
    #9333EA 68%,
    #38BDF8 80%,
    #2563EB 90%,
    #1E1B4B 100%
  ) !important;
  background-size: 200% auto !important;
  animation: shineText 2s linear infinite !important;
}

.sidebar .level.name_8,
.sidebar .level.name-galaxy,
.sidebar .profile-name.name-galaxy {
  background-image: linear-gradient(
    125deg,
    #38BDF8 0%,
    #C084FC 24%,
    #FFFFFF 46%,
    #F472B6 70%,
    #60A5FA 100%
  ) !important;
  background-size: 200% auto !important;
}

/* CẤP 9 (.name_9): QUANG PHỔ ĐẠI SƯ ĐA TẦNG (Tím Hoàng Gia + Đỏ Hồng Ngọc + Cam Lửa + Vàng Kim + Lam Điện, tốc độ 1.75s) */
.level.name_9 {
  background-image: linear-gradient(
    125deg,
    #3B0764 0%,
    #7E22CE 14%,
    #E11D48 28%,
    #F59E0B 40%,
    #FFFFFF 48%,
    #EC4899 58%,
    #6366F1 72%,
    #0284C7 86%,
    #3B0764 100%
  ) !important;
  background-size: 200% auto !important;
  animation: shineText 1.75s linear infinite !important;
}

.sidebar .level.name_9 {
  background-image: linear-gradient(
    125deg,
    #F472B6 0%,
    #FDE047 24%,
    #FFFFFF 48%,
    #C084FC 74%,
    #38BDF8 100%
  ) !important;
  background-size: 200% auto !important;
}

/* CẤP 10 (.name_10 & .name-royal): QUANG PHỔ QUÁN QUÂN TOÀN DIỆN
   Đỉnh cao Cấp 10: Vàng Đồng + Hồng Ngọc + Vàng 24K + Tia Kim Cương + Lam Băng + Tím Hoàng Gia (1.5s) */
.level.name_10,
.level.name-royal,
.name-royal,
.profile-name.name-royal {
  background-image: linear-gradient(
    125deg,
    #451A03 0%,
    #B45309 12%,
    #E11D48 25%,
    #D97706 38%,
    #FACC15 45%,
    #FFFFFF 50%,
    #0284C7 57%,
    #9333EA 69%,
    #E11D48 82%,
    #B45309 92%,
    #451A03 100%
  ) !important;
  background-size: 200% auto !important;
  animation: shineText 1.5s linear infinite !important;
}

.sidebar .level.name_10,
.sidebar .level.name-royal,
.sidebar .profile-name.name-royal {
  background-image: linear-gradient(
    125deg,
    #FDE047 0%,
    #FFFFFF 22%,
    #FB7185 45%,
    #FFFFFF 68%,
    #38BDF8 85%,
    #FDE047 100%
  ) !important;
  background-size: 200% auto !important;
}

/* 2.2. Title Badges (.title-user-comment.title-member - 10 Ranks Escalation) */
.title-user-comment.title-member {
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  padding: 2px 9px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  letter-spacing: 0.01em;
  user-select: none;
}

.sidebar .title-user-comment.title-member {
  font-size: 9.5px;
  padding: 1.5px 6px;
}

/* Cấp 1: Kiến Tân Binh (Xanh lá mầm tươi sáng, nổi bật trên cả nền sáng & sidebar tối) */
.title-user-comment.level_1 {
  color: #059669;
  border: 1.5px solid #10B981;
  background: rgba(16, 185, 129, 0.08);
}

.sidebar .title-user-comment.level_1 {
  color: #34D399;
  border-color: #10B981;
  background: rgba(16, 185, 129, 0.15);
}

/* Cấp 2: Kiến Chăm Chỉ (Đơn sắc tĩnh lam) */
.title-user-comment.level_2 {
  border: 1.5px solid #0284C7;
  background: rgba(2, 132, 199, 0.08);
  color: #0284C7;
}

.sidebar .title-user-comment.level_2 {
  color: #38BDF8;
  border-color: #0EA5E9;
  background: rgba(14, 165, 233, 0.15);
}

/* Cấp 3: Kiến Cần Cù (Đơn sắc tĩnh tím lam) */
.title-user-comment.level_3 {
  border: 1.5px solid #8B5CF6;
  background: rgba(124, 58, 237, 0.07);
  color: #7C3AED;
}

.sidebar .title-user-comment.level_3 {
  color: #C084FC;
  border-color: #A855F7;
  background: rgba(168, 85, 247, 0.16);
}

/* Cấp 4: Kiến Bền Bỉ (Viền cam đồng + nền vàng nhạt ấm) */
.title-user-comment.level_4 {
  color: #B45309;
  border: 1.5px solid #F59E0B;
  background: rgba(245, 158, 11, 0.09);
}

.sidebar .title-user-comment.level_4 {
  color: #FBBF24;
  border-color: #F59E0B;
  background: rgba(245, 158, 11, 0.16);
}

/* Cấp 5: Kiến Tinh Anh (Viền hồng ruby nổi bật) */
.title-user-comment.level_5 {
  color: #D81B60;
  border: 1.5px solid #EC4899;
  background: rgba(236, 72, 153, 0.08);
  box-shadow: 0 2px 6px rgba(216, 27, 96, 0.12);
}

.sidebar .title-user-comment.level_5 {
  color: #F472B6;
  border-color: #EC4899;
  background: rgba(236, 72, 153, 0.16);
}

/* Cấp 6: Kiến Thông Thái (Bắt đầu có chữ Gradient Ngọc Lục Bảo -> Lam Điện + Hào quang viền) */
.title-user-comment.level_6 {
  border: 1.5px solid #10B981;
  background-image: linear-gradient(125deg, #047857 0%, #0284C7 45%, #7C3AED 85%, #047857 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: shineText 3.4s linear infinite;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.18);
}

.sidebar .title-user-comment.level_6 {
  border-color: #34D399;
  background-image: linear-gradient(125deg, #6EE7B7 0%, #38BDF8 50%, #C084FC 100%);
}

/* Cấp 7: Kiến Tiên Phong (Huy hiệu gắn sao ✦ + Chữ Gradient Hồng Ngọc -> Cam Vàng chuyển động) */
.title-user-comment.level_7 {
  border: 1.5px solid #F43F5E;
  background-image: linear-gradient(125deg, #BE123C 0%, #F97316 35%, #9333EA 70%, #BE123C 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: shineText 3s linear infinite;
  box-shadow: 0 2px 10px rgba(244, 63, 94, 0.22);
}
.title-user-comment.level_7::before {
  content: "✦";
  font-size: 10px;
  -webkit-text-fill-color: #E11D48;
}

.sidebar .title-user-comment.level_7 {
  border-color: #FB7185;
  background-image: linear-gradient(125deg, #FDA4AF 0%, #FDE047 45%, #D8B4FE 100%);
}
.sidebar .title-user-comment.level_7::before {
  -webkit-text-fill-color: #FB7185;
}

/* Cấp 8: Kiến Học Giả (Huy hiệu gắn sao ★ + Viền Tím Tinh Vân + Chữ Gradient Đa Sắc lướt sáng) */
.title-user-comment.level_8 {
  border: 1.5px solid #A855F7;
  background-image: linear-gradient(125deg, #1D4ED8 0%, #EC4899 35%, #7E22CE 70%, #1D4ED8 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 750;
  animation: shineText 2.5s linear infinite;
  box-shadow: 0 3px 12px rgba(168, 85, 247, 0.25);
}
.title-user-comment.level_8::before {
  content: "★";
  font-size: 10px;
  -webkit-text-fill-color: #9333EA;
}

.sidebar .title-user-comment.level_8 {
  border-color: #C084FC;
  background-image: linear-gradient(125deg, #93C5FD 0%, #F472B6 50%, #E9D5FF 100%);
}
.sidebar .title-user-comment.level_8::before {
  -webkit-text-fill-color: #C084FC;
}

/* Cấp 9: Kiến Đại Sư (Huy hiệu gắn tia chớp ⚡ + Viền Hồng Quang Phổ phát sáng + Chữ Đại Sư Đa Tầng) */
.title-user-comment.level_9 {
  border: 1.5px solid #EC4899;
  background-image: linear-gradient(125deg, #BE123C 0%, #D97706 32%, #7E22CE 66%, #BE123C 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 800;
  animation: shineText 2s linear infinite;
  box-shadow:
    0 0 0 1px rgba(236, 72, 153, 0.18),
    0 3px 14px rgba(225, 29, 72, 0.28);
}
.title-user-comment.level_9::before {
  content: "⚡";
  font-size: 10px;
  -webkit-text-fill-color: #E11D48;
}

.sidebar .title-user-comment.level_9 {
  border-color: #F472B6;
  background-image: linear-gradient(125deg, #FDA4AF 0%, #FDE047 45%, #F0ABFC 100%);
}
.sidebar .title-user-comment.level_9::before {
  -webkit-text-fill-color: #F472B6;
}

/* Cấp 10: Kiến Huyền Thoại (Huy hiệu Vương Miện 👑 + Viền Vàng Quán Quân + Hào Quang Đỉnh Cao) */
.title-user-comment.level_10 {
  border: 1.5px solid #F59E0B;
  background-image: linear-gradient(125deg, #92400E 0%, #E11D48 30%, #7E22CE 62%, #B45309 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 800;
  animation: shineText 1.6s linear infinite;
  box-shadow:
    0 0 0 1.5px rgba(245, 158, 11, 0.28),
    0 4px 16px rgba(245, 158, 11, 0.36);
}
.title-user-comment.level_10::before {
  content: "👑";
  font-size: 10.5px;
  -webkit-text-fill-color: initial;
}

.sidebar .title-user-comment.level_10 {
  border-color: #FBBF24;
  background-image: linear-gradient(125deg, #FDE047 0%, #FFFFFF 35%, #FB7185 70%, #FDE047 100%);
}

/* Giáo Viên / GV Chủ Nhiệm Badge (Chuẩn Xanh Verify Lịch Sự) */
.title-user-comment.level_teacher {
  color: #1D4ED8;
  border: 1.5px solid #3B82F6;
  background: #EFF6FF;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.12);
}
.title-user-comment.level_teacher::before {
  content: "✓";
  font-weight: 900;
  color: #2563EB;
}

.sidebar .title-user-comment.level_teacher {
  color: #93C5FD;
  border-color: #60A5FA;
  background: rgba(37, 99, 235, 0.22);
}
.sidebar .title-user-comment.level_teacher::before {
  color: #60A5FA;
}

/* 2.3. 9-Step Progressive Avatar Frames (Từ Khung Cơ Bản Tĩnh -> Chuyên Cần -> Nổi Bật -> Quán Quân) */
@keyframes frameRingSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes frameFireAura {
  0% {
    box-shadow:
      0 0 0 2px #FFFBEB,
      0 0 12px rgba(249, 115, 22, 0.55),
      0 0 24px rgba(225, 29, 72, 0.35);
  }
  100% {
    box-shadow:
      0 0 0 2px #FEF08A,
      0 0 20px rgba(250, 204, 21, 0.8),
      0 0 34px rgba(244, 63, 94, 0.65);
  }
}

@keyframes frameNebulaAura {
  0% {
    box-shadow:
      0 0 0 2px #E0E7FF,
      0 0 14px rgba(139, 92, 246, 0.6),
      0 0 28px rgba(236, 72, 153, 0.4);
  }
  100% {
    box-shadow:
      0 0 0 2px #FCE7F3,
      0 0 22px rgba(217, 70, 239, 0.85),
      0 0 38px rgba(56, 189, 248, 0.65);
  }
}

@keyframes frameEmperorPulse {
  0% {
    box-shadow:
      0 0 0 2px #FFFFFF,
      0 0 16px rgba(245, 158, 11, 0.7),
      0 0 32px rgba(250, 204, 21, 0.5),
      0 0 46px rgba(236, 72, 153, 0.35);
  }
  100% {
    box-shadow:
      0 0 0 2.5px #FEF08A,
      0 0 24px rgba(251, 191, 36, 0.95),
      0 0 42px rgba(245, 158, 11, 0.75),
      0 0 58px rgba(217, 70, 239, 0.55);
  }
}

.avatar[class*="frame-"] {
  outline: none !important;
  position: relative;
  overflow: visible !important;
}

.avatar[class*="frame-"]::before {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

.avatar[class*="frame-"]::after {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1.5px solid rgba(15, 23, 42, 0.12);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
  display: grid;
  place-items: center;
  font-size: 10px;
  line-height: 1;
  z-index: 2;
  pointer-events: none;
}

.avatar-large[class*="frame-"]::after {
  right: -3px;
  bottom: -3px;
  width: 26px;
  height: 26px;
  font-size: 14px;
}

/* =================================================================
   TẦNG 1: KHUNG TÂN BINH ("CÙI" / SƠ CẤP - 15 ĐK, 25 ĐK, 35 ĐK)
   Viền đơn giản, tĩnh 100%, không xoay, không phát sáng
   ================================================================= */

/* Bậc 1 (15 ĐK): Khung Cam Tân Binh - Chỉ là vòng nét đứt mảnh sơ cấp, không huy hiệu góc */
.avatar.frame-sunrise {
  outline: 2px dashed #EA580C !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}
.avatar.frame-sunrise::after { display: none !important; }

/* Bậc 2 (25 ĐK): Khung Lam Học Viện - Viền đơn tĩnh mảnh, không huy hiệu góc */
.avatar.frame-ocean {
  box-shadow:
    0 0 0 2px #FFFFFF,
    0 0 0 4px #0284C7 !important;
}
.avatar.frame-ocean::after { display: none !important; }

/* Bậc 3 (35 ĐK): Khung Lục Mầm Xanh - Viền tĩnh xanh lá + bắt đầu có mầm lá nhỏ ở góc */
.avatar.frame-garden {
  box-shadow:
    0 0 0 2px #FFFFFF,
    0 0 0 4px #10B981 !important;
}
.avatar.frame-garden::after { content: "🌿"; border-color: #10B981; }

/* =================================================================
   TẦNG 2: KHUNG TINH ANH (45 ĐK & 55 ĐK)
   Bắt đầu có vòng Gradient xoay quanh viền & ánh sáng nhẹ
   ================================================================= */

/* Bậc 4 (45 ĐK): Anh Đào Tuyết Vũ - Vòng Conic Gradient Hồng Phấn -> Tím Sương Mai xoay êm */
.avatar.frame-sakura {
  box-shadow: 0 0 14px rgba(236, 72, 153, 0.38) !important;
}
.avatar.frame-sakura::before {
  content: "";
  inset: -5px;
  background: conic-gradient(from 0deg, #F472B6, #FBCFE8, #C084FC, #EC4899, #F472B6);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4.5px), #000 calc(100% - 3.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4.5px), #000 calc(100% - 3.5px));
  animation: frameRingSpin 6s linear infinite;
}
.avatar.frame-sakura::after { content: "🌸"; border-color: #EC4899; background: #FDF2F8; }

/* Bậc 5 (55 ĐK): Lôi Điện Tử Quang - Vòng tia chớp Xanh Điện -> Tím Chàm xoay nhanh sắc bén */
.avatar.frame-thunder {
  box-shadow: 0 0 18px rgba(99, 102, 241, 0.52) !important;
}
.avatar.frame-thunder::before {
  content: "";
  inset: -5.5px;
  background: conic-gradient(from 0deg, #1E1B4B, #4F46E5, #00E5FF, #FFFFFF, #6366F1, #38BDF8, #1E1B4B);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  animation: frameRingSpin 2.8s linear infinite;
}
.avatar.frame-thunder::after { content: "⚡"; border-color: #4F46E5; background: #EEF2FF; }

/* =================================================================
   TẦNG 3: KHUNG NGUYÊN ANH & ĐẠI THỪA (75 ĐK & 90 ĐK)
   Vòng năng lượng đa tầng + Đốm Tinh Vân / Linh Hỏa + Hào quang thở
   ================================================================= */

/* Bậc 6 (75 ĐK): Hoàng Kim Linh Hỏa (Nguyên Anh) - Lửa kim tuyến vàng trắng & cam đỏ bập bùng */
.avatar.frame-phoenix {
  animation: frameFireAura 2s ease-in-out infinite alternate !important;
}
.avatar.frame-phoenix::before {
  content: "";
  inset: -6.5px;
  background:
    radial-gradient(circle at 25% 20%, #FFFFFF 0%, transparent 28%),
    radial-gradient(circle at 75% 80%, #FEF08A 0%, transparent 32%),
    conic-gradient(from 0deg, #B45309, #F59E0B, #FDE047, #FFFFFF, #F97316, #E11D48, #F59E0B, #B45309);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
  animation: frameRingSpin 3.2s linear infinite;
}
.avatar.frame-phoenix::after {
  content: "🔥";
  border-color: #F59E0B;
  background: linear-gradient(135deg, #FFFBEB, #FEF3C7);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.55);
}

/* Bậc 7 (90 ĐK): Tinh Vân Đại Thừa - Vòng xoáy ngân hà xanh đêm pha đốm tinh vân hồng tím */
.avatar.frame-galaxy {
  animation: frameNebulaAura 2.6s ease-in-out infinite alternate !important;
}
.avatar.frame-galaxy::before {
  content: "";
  inset: -7px;
  background:
    radial-gradient(circle at 20% 50%, #F43F5E 0%, #D946EF 28%, transparent 55%),
    radial-gradient(circle at 80% 30%, #38BDF8 0%, transparent 45%),
    conic-gradient(from 0deg, #1E1B4B, #1D4ED8, #D946EF, #F43F5E, #A855F7, #38BDF8, #4C1D95, #1E1B4B);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6.5px), #000 calc(100% - 5.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 6.5px), #000 calc(100% - 5.5px));
  animation: frameRingSpin 3.6s linear infinite;
}
.avatar.frame-galaxy::after {
  content: "🪐";
  border-color: #D946EF;
  background: linear-gradient(135deg, #FDF4FF, #EDE9FE);
  box-shadow: 0 0 12px rgba(217, 70, 239, 0.6);
}

/* =================================================================
   TẦNG 4: KHUNG THẦN THOẠI & CHÍ TÔN (105 ĐK & 125 ĐK)
   Đỉnh cao hiệu ứng: Hào quang đa cực + Vương miện đội đỉnh đầu
   ================================================================= */

/* Bậc 8 (105 ĐK): Cyber Neon FPT - Vòng Holographic 3 sắc FPT + Hào quang Neon đa tầng */
.avatar.frame-cyber {
  box-shadow:
    0 0 0 2px #FFFFFF,
    0 0 18px rgba(0, 168, 255, 0.65),
    0 0 32px rgba(243, 112, 33, 0.45),
    0 0 44px rgba(13, 177, 75, 0.35) !important;
}
.avatar.frame-cyber::before {
  content: "";
  inset: -7.5px;
  background: conic-gradient(
    from 0deg,
    #0066B2 0deg,
    #00E5FF 60deg,
    #FFFFFF 90deg,
    #F37021 150deg,
    #FDE047 200deg,
    #0DB14B 260deg,
    #A855F7 315deg,
    #0066B2 360deg
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
  animation: frameRingSpin 2s linear infinite;
}
.avatar.frame-cyber::after {
  content: "💎";
  border-color: #00A8FF;
  background: linear-gradient(135deg, #EFF6FF, #ECFEFF);
  box-shadow: 0 0 12px rgba(0, 168, 255, 0.65);
}

/* Bậc 9 (125 ĐK): Thiên Đạo Chí Tôn - Vòng Long Mạch Hoàng Kim 24K + Vương Miện ĐỘI ĐỈNH ĐẦU */
.avatar.frame-emperor {
  animation: frameEmperorPulse 2s ease-in-out infinite alternate !important;
}
.avatar.frame-emperor::before {
  content: "";
  inset: -8px;
  background:
    radial-gradient(circle at 50% 0%, #FFFFFF 0%, transparent 35%),
    conic-gradient(
      from 0deg,
      #78350F 0deg,
      #F59E0B 45deg,
      #FEF08A 90deg,
      #FFFFFF 115deg,
      #EC4899 160deg,
      #FBBF24 215deg,
      #FFFFFF 260deg,
      #D97706 315deg,
      #78350F 360deg
    );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7.5px), #000 calc(100% - 6.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 7.5px), #000 calc(100% - 6.5px));
  animation: frameRingSpin 2.6s linear infinite;
}
.avatar.frame-emperor::after {
  content: "👑";
  top: -12px;
  bottom: auto;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: 22px;
  height: 22px;
  font-size: 12px;
  border: 1.5px solid #F59E0B;
  background: linear-gradient(135deg, #FFFFFF 0%, #FEF08A 55%, #F59E0B 100%);
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.75), 0 0 16px rgba(254, 240, 138, 0.9);
}
.avatar-large.frame-emperor::after {
  top: -17px;
  width: 30px;
  height: 30px;
  font-size: 17px;
}

/* 2.4. Rich Storefront UI: Live Studio, Filter Tabs, Rarity Cards & 10-Rank Grid */
.shop-banner {
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: 24px;
  align-items: center;
  padding: 26px 28px !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 90% 15%, rgba(251, 191, 36, 0.16), transparent 45%),
    linear-gradient(125deg, #EFF6FF 0%, #F8FAFC 52%, #FFFBEB 100%) !important;
  border: 1px solid #DBEAFE !important;
}

.shop-Highlight-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.shop-live-studio {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #E2E8F0;
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow: 0 12px 28px -10px rgba(15, 23, 42, 0.08);
}

.shop-studio-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.shop-studio-head .eyebrow {
  color: #2563EB;
  font-size: 10px;
}

.shop-reset-btn {
  border: 1px solid #CBD5E1;
  background: #F8FAFC;
  color: #475569;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  cursor: pointer;
}

.shop-reset-btn:hover {
  border-color: #94A3B8;
  color: #0F172A;
}

.shop-studio-card {
  display: flex;
  align-items: center;
  gap: 18px;
}

.shop-studio-info {
  min-width: 0;
  flex: 1;
}

.shop-studio-name-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}

.shop-studio-name-row .user-display-name {
  font-size: 18px !important;
}

.shop-studio-info > small {
  display: block;
  color: #64748B;
  font-size: 11.5px;
}

.shop-studio-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #E2E8F0;
  font-size: 11px;
  color: #475569;
}

.shop-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 18px;
  padding: 6px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  box-shadow: var(--shadow-xs);
}

.shop-filter-tab {
  border: 0;
  background: transparent;
  color: #475569;
  font-size: 12.5px;
  font-weight: 650;
  padding: 8px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.16s ease;
}

.shop-filter-tab:hover {
  color: #0F172A;
  background: #F1F5F9;
}

.shop-filter-tab.active {
  background: #2563EB;
  color: #FFFFFF;
  box-shadow: 0 4px 12px -2px rgba(37, 99, 235, 0.35);
}

.shop-card {
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.shop-card:hover {
  transform: translateY(-3px);
}

.shop-card.is-previewing {
  border-color: #2563EB !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15), 0 14px 28px -10px rgba(37, 99, 235, 0.2) !important;
}

.shop-card.rarity-epic {
  border-color: rgba(168, 85, 247, 0.32);
}

.shop-card.rarity-legendary {
  border-color: rgba(245, 158, 11, 0.42);
  background: linear-gradient(180deg, #FFFDF7 0%, #FFFFFF 45%);
}

.shop-card .item-preview {
  position: relative;
  min-height: 136px;
  display: grid;
  place-items: center;
  padding: 24px 16px 18px;
}

.shop-rarity-badge {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2.5px 8px;
  border-radius: 999px;
}

.shop-rarity-badge.rarity-common {
  background: #EFF6FF;
  color: #1D4ED8;
  border: 1px solid #BFDBFE;
}

.shop-rarity-badge.rarity-rare {
  background: #FDF2F8;
  color: #BE185D;
  border: 1px solid #FBCFE8;
}

.shop-rarity-badge.rarity-epic {
  background: #F3E8FF;
  color: #7E22CE;
  border: 1px solid #D8B4FE;
}

.shop-rarity-badge.rarity-legendary {
  background: linear-gradient(135deg, #FEF3C7, #FDE68A);
  color: #92400E;
  border: 1px solid #F59E0B;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25);
}

.shop-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.shop-owned-tag {
  font-size: 10.5px;
  font-weight: 700;
  color: #059669;
  background: #ECFDF5;
  padding: 2px 7px;
  border-radius: 999px;
}

.shop-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.shop-try-btn.active {
  border-color: #2563EB;
  color: #2563EB;
  background: #EFF6FF;
}

.btn.is-equipped {
  background: #ECFDF5;
  border-color: #A7F3D0;
  color: #047857;
  cursor: default;
}

/* 10-Rank Academy Showcase */
.ant-ranks-showcase {
  padding-bottom: 6px;
}

.ant-ranks-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  padding: 0 20px 20px;
}

.ant-rank-card {
  padding: 14px;
  border-radius: 15px;
  border: 1px solid #E2E8F0;
  background: #FAFCFF;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.ant-rank-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -8px rgba(15, 23, 42, 0.08);
}

.ant-rank-card.is-current {
  border-color: #2563EB;
  background: linear-gradient(180deg, #EFF6FF 0%, #FFFFFF 100%);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.14);
}

.ant-rank-card.is-unlocked {
  background: #FFFFFF;
}

/* Progressive Rank Card Prestige (Cấp 6 -> Cấp 10) */
.ant-rank-card.rank-tier-6 {
  border-color: rgba(16, 185, 129, 0.35);
  background: linear-gradient(180deg, #F0FDF4 0%, #FFFFFF 65%);
}
.ant-rank-card.rank-tier-6 .ant-rank-preview {
  border-color: rgba(16, 185, 129, 0.25);
  box-shadow: 0 4px 12px -4px rgba(16, 185, 129, 0.12);
}

.ant-rank-card.rank-tier-7 {
  border-color: rgba(244, 63, 94, 0.38);
  background: linear-gradient(180deg, #FFF1F2 0%, #FFFFFF 65%);
}
.ant-rank-card.rank-tier-7 .ant-rank-preview {
  border-color: rgba(244, 63, 94, 0.26);
  box-shadow: 0 4px 14px -4px rgba(244, 63, 94, 0.14);
}

.ant-rank-card.rank-tier-8 {
  border-color: rgba(168, 85, 247, 0.42);
  background: linear-gradient(180deg, #FAF5FF 0%, #FFFFFF 65%);
  box-shadow: 0 6px 18px -8px rgba(147, 51, 234, 0.16);
}
.ant-rank-card.rank-tier-8 .ant-rank-preview {
  border-color: rgba(168, 85, 247, 0.3);
  background: linear-gradient(135deg, #FFFFFF 0%, #FDF4FF 100%);
  box-shadow: 0 4px 14px -4px rgba(168, 85, 247, 0.16);
}

.ant-rank-card.rank-tier-9 {
  border-color: rgba(236, 72, 153, 0.48);
  background: linear-gradient(180deg, #FDF2F8 0%, #FFFFFF 55%, #FAF5FF 100%);
  box-shadow: 0 8px 22px -8px rgba(225, 29, 72, 0.2);
}
.ant-rank-card.rank-tier-9 .ant-rank-preview {
  border-color: rgba(236, 72, 153, 0.35);
  background: linear-gradient(135deg, #FFFFFF 0%, #FFF1F2 60%, #FAF5FF 100%);
  box-shadow: 0 6px 16px -4px rgba(225, 29, 72, 0.18);
}

.ant-rank-card.rank-tier-10 {
  border-color: rgba(245, 158, 11, 0.65);
  background: linear-gradient(180deg, #FFFBEB 0%, #FFFFFF 50%, #FEF3C7 100%);
  box-shadow:
    0 0 0 1px rgba(245, 158, 11, 0.2),
    0 10px 26px -8px rgba(245, 158, 11, 0.32);
}
.ant-rank-card.rank-tier-10 .ant-rank-top span:first-child {
  color: #B45309;
  font-weight: 800;
}
.ant-rank-card.rank-tier-10 .ant-rank-xp {
  color: #D97706;
  font-weight: 800;
}
.ant-rank-card.rank-tier-10 .ant-rank-preview {
  border-color: rgba(245, 158, 11, 0.45);
  background: linear-gradient(135deg, #FFFFFF 0%, #FFFBEB 55%, #FCE7F3 100%);
  box-shadow: 0 6px 18px -4px rgba(245, 158, 11, 0.25);
}

.ant-rank-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  color: #64748B;
}

.ant-rank-xp {
  font-family: var(--font-mono, monospace);
  color: #2563EB;
}

.ant-rank-preview {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 10px 11px;
  border-radius: 11px;
  background: #FFFFFF;
  border: 1px solid #EEF2F6;
}

.ant-rank-preview .user-display-name {
  font-size: 13.5px;
  font-weight: 750;
}

.ant-rank-status {
  margin-top: auto;
  font-size: 11px;
  font-weight: 600;
  color: #64748B;
}

.ant-rank-card.is-current .ant-rank-status {
  color: #1D4ED8;
}

.ant-rank-card.is-unlocked .ant-rank-status {
  color: #059669;
}

@media (max-width: 1150px) {
  .shop-banner {
    grid-template-columns: 1fr;
  }
  .ant-ranks-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .ant-ranks-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================================
   5. FULL-SCREEN DEDICATED EXAM STUDIO & POST-EXAM AI REVIEW BENTO
   - Phòng thi toàn màn hình 100vw × 100vh độc lập
   - Tự động lưu nháp localStorage + máy chủ (lỡ đóng tab mở lại vào ngay)
   - Bố cục Kết quả phiếu & Hướng ôn tập 2 cột Bento hiện đại
   ========================================================================= */

/* 5.1. Active Exam Recovery Banner (Hiển thị trên trang chính khi có bài đang làm dở) */
.active-exam-recovery-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  margin-bottom: 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, #EFF6FF 0%, #F0FDF4 100%);
  border: 1.5px solid #93C5FD;
  box-shadow:
    0 10px 25px -8px rgba(37, 99, 235, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.exam-recovery-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.exam-recovery-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.exam-recovery-copy strong {
  font-size: 14.5px;
  font-weight: 800;
  color: #0F172A;
}

.exam-recovery-copy small {
  font-size: 12.5px;
  color: #475569;
}

/* 5.2. Full-Screen Dedicated Exam Workspace Modal */
#modal[open][data-study-attempt],
#modal[open]:has(.paper-student-layout, .work-review-page, .exercise-workspace, #attempt-form) {
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  background: #F4F6FA !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: none !important;
}

#modal[open][data-study-attempt]::backdrop,
#modal[open]:has(.paper-student-layout, .work-review-page, .exercise-workspace, #attempt-form)::backdrop {
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(8px);
}

#modal[open][data-study-attempt] > .modal-head,
#modal[open]:has(.paper-student-layout, .work-review-page, .exercise-workspace, #attempt-form) > .modal-head {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 14px 28px;
  background: #FFFFFF;
  border-bottom: 1px solid #E2E8F0;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
  flex-shrink: 0;
}

#modal[open][data-study-attempt] > .modal-head h2,
#modal[open]:has(.paper-student-layout, .work-review-page, .exercise-workspace, #attempt-form) > .modal-head h2 {
  font-size: 18px;
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.015em;
}

/* Khi đang làm bài chưa nộp: ẩn nút X góc phải để học sinh tập trung làm bài & nộp xong mới thoát, hoặc chỉ hiện nhẹ */
#modal[data-exam-submitted="false"] > .modal-head [data-action="close"] {
  opacity: 0.55;
  border: 1px dashed #CBD5E1;
}
#modal[data-exam-submitted="false"] > .modal-head [data-action="close"]:hover {
  opacity: 1;
}

#modal[open][data-study-attempt] > .modal-content,
#modal[open]:has(.paper-student-layout, .work-review-page, .exercise-workspace, #attempt-form) > .modal-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px 28px 36px;
  max-width: 1560px;
  width: 100%;
  margin: 0 auto;
}

/* 5.3. Top Exam Studio Toolbar & Live Chips */
.exam-studio-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 16px;
  margin-bottom: 16px;
  border-radius: 14px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
}

.exam-studio-status,
.exam-live-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.exam-rule-note {
  font-size: 12.5px;
  font-weight: 600;
  color: #64748B;
}

.exam-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.exam-status-chip.is-live {
  background: #EFF6FF;
  color: #1D4ED8;
  border: 1px solid #BFDBFE;
}

.exam-status-chip.is-done,
.exam-status-chip.is-submitted {
  background: #ECFDF5;
  color: #047857;
  border: 1px solid #A7F3D0;
}

.exam-status-chip .live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

.exam-status-chip.is-done .live-dot {
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

.exam-studio-tools,
.exam-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.exam-fs-btn,
.exam-fs-toggle {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  border-radius: 9px !important;
  background: #F8FAFC !important;
  border: 1px solid #CBD5E1 !important;
  color: #1E293B !important;
}

.exam-fs-btn:hover,
.exam-fs-toggle:hover {
  background: #EFF6FF !important;
  border-color: #60A5FA !important;
  color: #1D4ED8 !important;
}

/* 5.4. Top Practice Clock Pill inside Exam Toolbar */
.practice-clock.exam-clock-pill-bar {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  margin: 0 4px 0 auto;
  border-radius: 999px;
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  color: #F8FAFC;
  border: 1px solid #334155;
  box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.18);
}

.practice-clock.exam-clock-pill-bar.is-urgent {
  background: linear-gradient(135deg, #7F1D1D 0%, #991B1B 100%);
  border-color: #EF4444;
}

.exam-clock-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.exam-clock-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #38BDF8;
  box-shadow: 0 0 8px #38BDF8;
}

.practice-clock.exam-clock-pill-bar.is-urgent .exam-clock-dot {
  background: #FCA5A5;
  box-shadow: 0 0 8px #FCA5A5;
}

.exam-clock-caption {
  font-size: 11.5px;
  font-weight: 600;
  color: #CBD5E1;
}

.exam-clock-digits {
  font-family: var(--font-numbers, var(--font-display, system-ui));
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #38BDF8;
}

.practice-clock.exam-clock-pill-bar.is-urgent .exam-clock-digits {
  color: #FECACA;
}

.exam-clock-save {
  font-size: 11px;
  font-weight: 650;
  color: #34D399;
  padding-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.15);
}

/* 5.5. Split-Pane Paper & Answer Sheet Layout (Ảnh 1 nâng cấp) */
.paper-student-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.38fr) minmax(380px, 0.92fr);
  gap: 20px;
  align-items: start;
}

/* Hero Score & Analytics Card (Ảnh 1 - Kết quả phiếu) */
.exam-score-hero-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px;
  margin-bottom: 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, #F8FAFC 0%, #EFF6FF 100%);
  border: 1.5px solid #BFDBFE;
}

.exam-score-main {
  display: flex;
  align-items: center;
  gap: 16px;
}

.exam-score-main .result-score {
  min-width: 82px;
  height: 76px;
  padding: 0 12px;
  border-radius: 16px;
  background: #FFFFFF;
  border: 1.5px solid #BFDBFE;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  font-family: var(--font-numbers, var(--font-display, system-ui));
  font-variant-numeric: tabular-nums;
  font-size: 28px !important;
  font-weight: 900 !important;
  line-height: 74px !important;
  color: #1D4ED8;
  margin: 0 !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08);
  flex-shrink: 0;
}

.exam-score-main .result-score small {
  font-size: 13px;
  font-weight: 700;
  color: #64748B;
  margin-left: 2px;
}

.exam-score-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.exam-score-meta strong {
  font-size: 15.5px;
  font-weight: 800;
  color: #0F172A;
}

.exam-score-meta p {
  margin: 0;
  font-size: 12.5px;
  color: #475569;
}

.exam-score-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.score-stat-pill {
  font-size: 11.5px;
  font-weight: 750;
  padding: 4px 11px;
  border-radius: 999px;
}

.score-stat-pill.is-right {
  background: #DCFCE7;
  color: #15803D;
}

.score-stat-pill.is-wrong {
  background: #FEE2E2;
  color: #B91C1C;
}

.score-stat-pill.is-empty {
  background: #F1F5F9;
  color: #475569;
}

/* Modern Interactive 1-10 Question Palette */
.exam-progress-card {
  padding: 14px 16px;
  margin-bottom: 14px;
  border-radius: 16px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03);
}

.exam-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.palette-label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748B;
  margin: 0;
}

.paper-answer-progress {
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  color: #1D4ED8 !important;
  background: #EFF6FF;
  border: 1px solid #DBEAFE;
  padding: 3px 10px;
  border-radius: 999px;
}

.exam-question-palette {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 7px;
  padding: 0;
  margin: 0;
}

.exam-palette-btn {
  appearance: none;
  -webkit-appearance: none;
  height: 38px;
  border-radius: 11px;
  border: 1.5px solid #E2E8F0;
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
  color: #334155;
  font-family: var(--font-numbers, var(--font-display, system-ui));
  font-variant-numeric: tabular-nums;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), inset 0 1px 0 #FFFFFF;
  transition: all 0.16s cubic-bezier(0.22, 1, 0.36, 1);
}

.exam-palette-btn:hover {
  border-color: #60A5FA;
  background: #EFF6FF;
  color: #1D4ED8;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px -4px rgba(37, 99, 235, 0.22);
}

.exam-palette-btn.is-answered {
  background: linear-gradient(180deg, #3B82F6 0%, #2563EB 100%);
  border-color: #1D4ED8;
  color: #FFFFFF;
  box-shadow: 0 4px 10px -2px rgba(37, 99, 235, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.exam-palette-btn.is-right {
  background: linear-gradient(180deg, #10B981 0%, #059669 100%);
  border-color: #047857;
  color: #FFFFFF;
  box-shadow: 0 4px 10px -2px rgba(16, 185, 129, 0.35);
}

.exam-palette-btn.is-wrong {
  background: linear-gradient(180deg, #F43F5E 0%, #E11D48 100%);
  border-color: #BE123C;
  color: #FFFFFF;
  box-shadow: 0 4px 10px -2px rgba(244, 63, 94, 0.35);
}

.exam-palette-btn.is-empty {
  background: #F1F5F9;
  border-color: #CBD5E1;
  color: #64748B;
}

/* Paper Student Question Row Cards */
.paper-student-row {
  padding: 14px 16px 16px !important;
  border-radius: 16px !important;
  background: #FFFFFF !important;
  border: 1.5px solid #E2E8F0 !important;
  margin: 0 0 12px !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.025);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.paper-student-row.row-answered {
  border-color: #BFDBFE !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFF 100%) !important;
}

.paper-student-row.row-right {
  background: #F0FDF4 !important;
  border-color: #86EFAC !important;
}

.paper-student-row.row-wrong {
  background: #FEF2F2 !important;
  border-color: #FCA5A5 !important;
}

.paper-student-row > legend {
  float: left;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 !important;
  margin: 0 0 12px !important;
  font-size: 13.5px;
  font-weight: 800;
  color: #0F172A;
}

.q-number-title {
  font-family: var(--font-display, system-ui);
  font-size: 13.5px;
  font-weight: 800;
  color: #0F172A;
}

.q-status-pill {
  font-size: 11px;
  font-weight: 750;
  padding: 3px 10px;
  border-radius: 999px;
  background: #F1F5F9;
  color: #64748B;
  border: 1px solid #E2E8F0;
}

.q-status-pill.is-picked {
  background: #EFF6FF;
  color: #1D4ED8;
  border-color: #BFDBFE;
}

.q-status-pill.is-right {
  background: #DCFCE7;
  color: #15803D;
  border-color: #86EFAC;
}

.q-status-pill.is-wrong {
  background: #FEE2E2;
  color: #B91C1C;
  border-color: #FCA5A5;
}

.q-status-pill.is-empty {
  background: #F1F5F9;
  color: #475569;
  border-color: #CBD5E1;
}

.paper-letter-options {
  clear: both;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px !important;
}

.paper-letter span {
  width: 100% !important;
  height: 42px !important;
  border-radius: 11px !important;
  border: 1.5px solid #E2E8F0 !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
  color: #334155 !important;
  font-family: var(--font-display, system-ui);
  font-size: 14px !important;
  font-weight: 800 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), inset 0 1px 0 #FFFFFF;
  transition: all 0.15s ease !important;
}

.paper-letter:hover span {
  border-color: #93C5FD !important;
  color: #1D4ED8 !important;
  background: #EFF6FF !important;
  transform: translateY(-1px);
}

.paper-letter input:checked + span {
  background: linear-gradient(180deg, #3B82F6 0%, #2563EB 100%) !important;
  border-color: #1D4ED8 !important;
  color: #FFFFFF !important;
  box-shadow: 0 5px 12px -3px rgba(37, 99, 235, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.paper-explanation-box {
  clear: both;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
  border-left: 3px solid #3B82F6;
}

.paper-explanation-box .paper-key-line {
  margin: 0;
  font-size: 12px;
  color: #1E293B;
}

.paper-explanation-box .paper-explain-text {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: #334155;
}

.paper-post-submit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #E2E8F0;
}

/* 5.6. Post-Submission Study Guidance 2-Column Bento (Ảnh 2 nâng cấp) */
.work-review-bento {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(360px, 0.88fr);
  gap: 22px;
  align-items: start;
}

.work-review-main-col,
.work-review-side-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.work-review-side-col {
  position: sticky;
  top: 0;
}

.review-overview-card {
  background: #FFFFFF;
  border-radius: 18px;
  padding: 22px 24px;
  border: 1px solid #E2E8F0;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}

.review-overview-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.review-overview-top h3 {
  font-size: 20px;
  font-weight: 800;
  color: #0F172A;
  margin: 4px 0 0;
}

.review-score-pill {
  min-width: 78px;
  height: 56px;
  padding: 0 14px;
  border-radius: 14px;
  background: #EFF6FF;
  border: 1.5px solid #93C5FD;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  flex-shrink: 0;
}

.review-score-pill strong {
  font-size: 24px;
  font-weight: 900;
  color: #1D4ED8;
}

.review-score-pill small {
  font-size: 12px;
  font-weight: 700;
  color: #3B82F6;
}

.review-summary-lead {
  font-size: 14.5px;
  line-height: 1.6;
  color: #334155;
  margin: 12px 0 16px;
}

.review-next-step {
  padding: 14px 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
  border: 1px solid #FDBA74;
}

.review-next-step strong {
  display: block;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #C2410C;
  margin-bottom: 4px;
}

.review-next-step p {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #7C2D12;
}

.review-section-block {
  background: #FFFFFF;
  border-radius: 18px;
  padding: 20px 22px;
  border: 1px solid #E2E8F0;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03);
}

.review-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.review-section-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: #0F172A;
}

.review-findings-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.review-finding {
  border-radius: 14px;
  border: 1px solid #E2E8F0;
  background: #F8FAFC;
  overflow: hidden;
}

.review-finding[open] {
  background: #FFFFFF;
  border-color: #93C5FD;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.07);
}

.review-finding > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  cursor: pointer;
  list-style: none;
}

.review-finding-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.finding-index {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #DBEAFE;
  color: #1D4ED8;
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.finding-result-badge {
  font-size: 11.5px;
  font-weight: 750;
  padding: 4px 10px;
  border-radius: 999px;
  background: #FEF3C7;
  color: #B45309;
}

.review-finding-body {
  padding: 0 16px 16px;
  border-top: 1px solid #F1F5F9;
}

.finding-action-tip {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #EFF6FF;
  border-left: 3px solid #2563EB;
}

.finding-action-tip strong {
  display: block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: #1D4ED8;
  margin-bottom: 2px;
}

.finding-action-tip p {
  margin: 0;
  font-size: 13px;
  color: #1E3A8A;
}

.review-plan-card .check-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.review-reflection {
  background: #FFFFFF;
  border-radius: 18px;
  border: 1.5px solid #BFDBFE;
  padding: 18px 20px;
  box-shadow: 0 8px 24px -8px rgba(37, 99, 235, 0.12);
}

.review-reflection > summary {
  font-size: 15px;
  font-weight: 800;
  color: #1D4ED8;
  cursor: pointer;
  margin-bottom: 8px;
}

.review-footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 1080px) {
  .paper-student-layout,
  .work-review-bento {
    grid-template-columns: 1fr;
  }
  .paper-document-pane,
  .work-review-side-col {
    position: static;
    max-height: none;
  }
  .palette-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}



/* Keep study controls in view; let the actual work areas scroll. */
#modal:has(.paper-student-layout){height:100dvh!important;max-height:100dvh!important}
#modal:has(.paper-student-layout)>.modal-head{position:relative;flex:0 0 auto}
#modal:has(.paper-student-layout)>.modal-content{display:grid;grid-template-rows:auto minmax(0,1fr) auto;flex:1 1 0%;min-height:0;overflow:hidden;padding:16px 24px;max-width:none;box-sizing:border-box}
#modal:has(.paper-student-layout) .paper-attempt-heading{min-width:0;margin:0 0 14px}
#modal:has(.paper-student-layout) .paper-student-layout{min-height:0;overflow:hidden;align-items:stretch}
#modal:has(.paper-student-layout) .paper-source-column{min-height:0;display:flex;flex-direction:column;overflow:hidden}
#modal:has(.paper-student-layout) .exercise-preview{display:flex;flex-direction:column;flex:1;min-height:0;height:auto;margin:0;overflow:hidden}
#modal:has(.paper-student-layout) .exercise-preview>.preview-label{flex-shrink:0}
#modal:has(.paper-student-layout) .exercise-preview iframe{display:block;flex:1 1 0%;width:100%;height:0;min-height:0;border:0}
#modal:has(.paper-student-layout) .paper-word-preview{height:100%;min-height:0;max-height:none;overflow:auto}
#modal:has(.paper-student-layout) .paper-student-answers{min-height:0;height:auto;max-height:none;overflow-y:auto;overscroll-behavior:contain;padding-bottom:18px}
#modal:has(.paper-student-layout) .paper-result-footer{margin:12px 0 0;padding:12px 0 0;min-width:0;gap:10px;flex-wrap:wrap;background:#F4F6FA}
/* A matching split workspace for post-submission reasoning. */
#modal:has(.work-review-page.has-exercise-context){height:100dvh!important;max-height:100dvh!important}
#modal:has(.work-review-page.has-exercise-context)>.modal-content{display:flex;flex-direction:column;flex:1 1 0%;min-height:0;overflow:hidden;padding:16px 24px;max-width:none;box-sizing:border-box}
.work-review-page.has-exercise-context{display:flex;flex-direction:column;flex:1;min-height:0;width:100%;max-width:none;margin:0}
.has-exercise-context>.work-review-navigation{flex:0 0 auto;margin:0 0 14px}
.review-context-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(360px,1fr);gap:20px;flex:1 1 0%;min-height:0;overflow:hidden}
.review-exercise-pane{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;border:1px solid #dce5f2;border-radius:16px;background:white}
.review-exercise-heading{padding:14px 16px;border-bottom:1px solid #e3eaf4;flex:0 0 auto}
.review-exercise-heading h3{font-size:14px;margin:0 0 5px}
.review-exercise-heading p{font-size:11px;line-height:1.6;color:#71839a;margin:0}
.review-original-document{display:flex;flex-direction:column;flex:1;min-height:0}
.review-original-document>.preview-label{padding:10px 14px;font-size:11px;overflow-wrap:anywhere;background:#f7faff}
.review-original-document>iframe{flex:1 1 0%;width:100%;height:0;min-height:0;border:0}
.review-original-text{min-height:0;flex:1;overflow:auto;padding:16px}
.review-original-text pre{white-space:pre-wrap;font:13px/1.8 var(--font-body);overflow-wrap:anywhere}
.review-download{align-self:start;margin:8px 12px;font-size:11px;min-height:30px}
.review-selected-question{flex:0 0 auto;padding:14px 16px;border-top:1px solid #e3eaf4;max-height:35%;overflow:auto}
.review-selected-question h3{font-size:14px;margin:0 0 8px}
.review-selected-question>.small{font-size:11px;line-height:1.6;margin:0 0 8px}
.review-question-prompt{font-size:14px;line-height:1.85;white-space:pre-wrap;margin:0 0 12px}
.review-context-options{display:grid;gap:8px}
.review-context-options>div{padding:10px 12px;border:1px solid #e0e7f2;border-radius:10px;font-size:13px;line-height:1.7}
.review-context-options>.correct{background:#edfaf4;border-color:#99dbc0}
.review-context-options>.picked{box-shadow:inset 3px 0 #3976ea}
.review-context-answer{font-size:12px;line-height:1.8;margin:10px 0 0;color:#3c6598}
.review-context-solution{font-size:12px;line-height:1.8;margin-top:8px}
.review-context-solution summary{font-weight:650;cursor:pointer}
.review-guidance-pane{min-width:0;min-height:0;overflow-y:auto;padding:0 4px 18px;overscroll-behavior:contain}
.has-exercise-context .work-review-bento{display:flex;flex-direction:column;gap:18px}
.has-exercise-context .work-review-side-col{position:static;max-height:none;width:100%}
.has-exercise-context .work-review-main-col{width:100%;min-width:0}
.has-exercise-context .review-empty>p{margin-bottom:14px}
.has-exercise-context .review-reasoning{margin:14px 0;padding:16px}
.has-exercise-context .review-reasoning .small{font-size:12px}
.has-exercise-context .review-reasoning textarea{min-height:100px}
.has-exercise-context[data-document-exercise="false"] .review-selected-question{flex:1;min-height:0;max-height:none;border-top:0}
@media(max-width:1000px){
 #modal:has(.paper-student-layout)>.modal-content,#modal:has(.work-review-page.has-exercise-context)>.modal-content{padding:12px}
 #modal:has(.paper-student-layout) .paper-student-layout{display:block;overflow:auto}
 #modal:has(.paper-student-layout) .paper-source-column{height:42dvh;min-height:240px;margin-bottom:16px}
 #modal:has(.paper-student-layout) .paper-student-answers{overflow:visible}
 #modal:has(.paper-student-layout) .paper-result-footer>.btn{min-width:0;font-size:12px;padding:9px 12px}
 .review-context-layout{display:flex;flex-direction:column;overflow:auto;gap:16px}
 .review-exercise-pane{height:55dvh;min-height:330px;flex:none}
 .review-guidance-pane{overflow:visible;flex:none;padding:0 0 16px}
 .has-exercise-context[data-document-exercise="false"] .review-exercise-pane{height:auto;max-height:55dvh}
}

/* A closed native dialog must stay out of layout, including retained exam content. */
#modal:not([open]){display:none!important}

/* Guidance and follow-up are separate, immediately reachable tasks. */
.review-guidance-pane:has(.work-review-tabs){display:flex;flex-direction:column;overflow:hidden;padding:0;min-height:0}
.has-exercise-context #work-review-panel.work-review-tabs{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
.review-mode-tabs{display:flex;flex:0 0 auto;gap:6px;padding:5px;margin:0 0 12px;background:#eaf0f8;border:1px solid #dce5f1;border-radius:12px}
.review-mode-tabs>button{flex:1;min-height:38px;padding:8px 12px;border:0;border-radius:9px;background:none;font:650 13px/1.5 var(--font-body);color:#637894;cursor:pointer}
.review-mode-tabs>button[aria-selected="true"]{background:white;color:#205dd3;box-shadow:0 2px 6px #19345412}
.review-mode-tabs>button:focus-visible{outline:3px solid #8bbaff;outline-offset:1px}
.work-review-tabs>.review-mode-panel{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
.work-review-tabs>.review-mode-panel[hidden]{display:none!important}
.review-guide-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:0 4px 12px 0}
.review-guide-actions{flex:0 0 auto;display:flex;justify-content:flex-end;padding:12px 0 0;border-top:1px solid #dce5f1;background:#f4f6fa}
.review-guide-actions>.btn{font-size:12px;min-height:38px;padding:9px 15px}
.review-ask-panel>#work-hint-form{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden;margin:0}
.review-form-fields{flex:1;min-height:0;overflow:auto;padding:0 4px 8px 0;overscroll-behavior:contain}
.review-form-footer{flex:0 0 auto;padding:10px 0 0;border-top:1px solid #dce5f1;background:#f4f6fa}
.work-review-tabs .review-form-footer .form-actions{border:0;margin:0;padding:0;gap:8px;flex-wrap:wrap}
.review-form-footer>.form-error:empty,.review-form-footer>[data-work-hint-status]:empty{display:none}
.review-form-footer>[data-work-hint-status]{font-size:11px;line-height:1.6;margin:0 0 8px}
.work-review-tabs .review-form-footer .btn{min-height:38px;font-size:12px;padding:9px 14px}
.work-review-tabs .review-reasoning{margin:0 0 12px;padding:16px;border-radius:14px}
.work-review-tabs .review-reasoning-head{display:none}
.work-review-tabs .review-reasoning>.small{font-size:12px;line-height:1.6;margin:0 0 12px}
.work-review-tabs .review-reasoning .form-field{margin-bottom:10px}
.work-review-tabs .review-reasoning .form-field>span{font-size:12px}
.work-review-tabs .review-reasoning select{min-height:38px;padding:8px 11px;font-size:13px}
.work-review-tabs .review-reasoning textarea{min-height:100px;max-height:220px;resize:vertical;font-size:13px}
.work-review-tabs .review-choice-context{margin:8px 0 12px;font-size:12px}
.work-review-tabs .completion-choice{align-items:flex-start;gap:8px;font-size:11px;line-height:1.7;margin:0}
.work-review-tabs .completion-choice input{flex:0 0 16px;margin-top:2px;min-height:16px;height:16px;width:16px}
.work-review-tabs .review-form-fields>.small{font-size:11px;margin:5px 0 0;line-height:1.6}
.work-review-tabs .review-overview-card{padding:18px;border-radius:14px}
.work-review-tabs .review-summary-lead{font-size:14px;line-height:1.8;margin:14px 0;white-space:pre-line}
.work-review-tabs .review-next-step{padding:16px;margin:14px 0 0;border-radius:12px}
.work-review-tabs .review-next-head{gap:8px;font-size:13px}
.work-review-tabs .review-next-head strong{font-size:13px}
.work-review-tabs .review-next-step p.report-text{font-size:13px;line-height:1.8;font-weight:500;white-space:pre-line}
.work-review-tabs .review-section-head h3{font-size:14px}
@media(min-width:1001px) and (max-height:760px){
 .review-mode-tabs{margin-bottom:8px}.work-review-tabs .review-reasoning{padding:12px;margin-bottom:8px}.work-review-tabs .review-reasoning textarea{min-height:78px;height:78px}.work-review-tabs .review-reasoning>.small{margin-bottom:8px;font-size:11px}.work-review-tabs .review-reasoning .form-field{margin-bottom:6px}.work-review-tabs .review-choice-context{margin:6px 0 8px}
}
@media(max-width:1000px){
 .review-guidance-pane:has(.work-review-tabs){flex:none;min-height:540px;height:70dvh;overflow:hidden}
 .review-mode-tabs>button{font-size:12px}
}
@media(min-width:1001px) and (max-height:760px){
 .has-exercise-context[data-document-exercise="true"] .review-selected-question{padding:10px 16px;max-height:28%}
 .has-exercise-context[data-document-exercise="true"] .review-selected-question>.small{display:none}
 .has-exercise-context[data-document-exercise="true"] .review-selected-question h3{display:inline;margin:0 12px 0 0}
 .has-exercise-context[data-document-exercise="true"] .review-context-answer{display:inline;margin:0}
 .review-exercise-heading{padding:10px 16px}
 .review-exercise-heading p{display:none}
}
/* Ask Ant occupies the viewport; only messages and history scroll. */
body:has(.main .ask-kien-grid){overflow:hidden}
.main:has(.ask-kien-grid){height:100dvh;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.main:has(.ask-kien-grid)>.topbar{flex:0 0 auto}
.main:has(.ask-kien-grid)>.content{display:flex;flex-direction:column;flex:1;min-height:0;width:100%;max-width:none;box-sizing:border-box;padding:18px 24px;overflow:hidden}
.content:has(.ask-kien-grid)>.footer{display:none}
.community-reference:has(.ask-kien-grid){display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
.community-reference:has(.ask-kien-grid)>.page-heading{flex:0 0 auto;margin:0 0 16px}
.community-reference .ant-chat-layout.ask-kien-grid{height:auto;min-height:0;flex:1;overflow:hidden}
.community-reference .ask-kien-grid>.ant-chat-sidebar,.community-reference .ask-kien-grid>.ant-chat-main{height:100%;min-height:0;box-sizing:border-box;overflow:hidden}
.community-reference .ask-kien-grid .ant-messages{flex:1 1 0%;height:auto;min-height:0;max-height:none;overflow-y:auto;overscroll-behavior:contain}
.community-reference .ask-kien-grid .ant-chat-history{overscroll-behavior:contain}
.community-reference .ask-kien-grid .ant-chat-empty{min-height:0;padding:12px;gap:8px}
.community-reference .ask-kien-grid .ant-composer{flex:0 0 auto;padding:12px 16px}
.community-reference .ask-kien-grid .composer-textarea{min-height:52px;max-height:min(140px,20dvh);resize:none}
.community-reference .ask-kien-grid .chatgpt-attachments-tray{max-height:90px;overflow-y:auto}
@media(min-width:761px) and (max-height:760px){
 .main:has(.ask-kien-grid)>.content{padding:12px 20px}
 .community-reference:has(.ask-kien-grid)>.page-heading{margin-bottom:10px}
 .community-reference:has(.ask-kien-grid)>.page-heading h1{font-size:24px}
 .community-reference:has(.ask-kien-grid)>.page-heading p{font-size:12px;margin-top:4px}
 .community-reference .ask-kien-grid .ant-chat-header{padding:10px 16px}
 .community-reference .ask-kien-grid .ant-chat-mascot{width:55px;height:58px}
 .community-reference .ask-kien-grid .ant-chat-empty h2{font-size:19px;margin:0}
 .community-reference .ask-kien-grid .ant-chat-empty p{margin:0;font-size:11px}
 .community-reference .ask-kien-grid .empty-chat-eyebrow{display:none}
 .community-reference .ask-kien-grid .quick-prompts-bar{padding:7px 16px}
 .community-reference .ask-kien-grid .kien-method-card{display:none}
}
@media(max-width:760px){
 .main:has(.ask-kien-grid)>.content{padding:10px 12px}
 .community-reference:has(.ask-kien-grid)>.page-heading{margin-bottom:10px;gap:6px}
 .community-reference:has(.ask-kien-grid)>.page-heading h1{font-size:21px}
 .community-reference:has(.ask-kien-grid)>.page-heading p{display:none}
 .community-reference:has(.ask-kien-grid)>.page-heading .heading-actions{width:auto}
 .community-reference .ant-chat-layout.ask-kien-grid{grid-template-rows:auto minmax(0,1fr);gap:10px}
 .community-reference .ask-kien-grid>.ant-chat-sidebar{height:auto;max-height:116px;padding:8px;gap:6px}
 .community-reference .ask-kien-grid .new-chat-btn{min-height:32px}
 .community-reference .ask-kien-grid .ant-chat-history{max-height:54px;flex:0 1 auto}
 .community-reference .ask-kien-grid .ant-chat-item{min-height:48px;padding:6px 10px}
 .community-reference .ask-kien-grid .thread-meta-top{display:none}
 .community-reference .ask-kien-grid .ant-chat-header{padding:10px}
 .community-reference .ask-kien-grid .kien-agent-sub{display:none}
 .community-reference .ask-kien-grid .ant-messages{padding:12px}
 .community-reference .ask-kien-grid .ant-chat-mascot{width:52px;height:54px}
 .community-reference .ask-kien-grid .ant-chat-empty h2{font-size:18px;margin:0}
 .community-reference .ask-kien-grid .ant-chat-empty p{font-size:11px;margin:0}
 .community-reference .ask-kien-grid .empty-chat-eyebrow{display:none}
 .community-reference .ask-kien-grid .quick-prompts-bar{padding:6px 10px;gap:5px}
 .community-reference .ask-kien-grid .quick-prompt-label{width:auto}
 .community-reference .ask-kien-grid .ant-composer{padding:8px 10px}
 .community-reference .ask-kien-grid .composer-textarea{min-height:48px;padding:10px;font-size:12px}
}
.community-reference:has(.ask-kien-grid){width:100%;max-width:none;margin:0}
.community-reference .ask-kien-grid .chatgpt-textarea{min-height:52px!important;max-height:min(140px,20dvh)!important}
/* ==========================================================================
   SIDEBAR DOCK TOGGLE, SPRING MOTION & ELEVATED DARK GLASS AESTHETICS
   ========================================================================== */
.sidebar {
  background-image:
    radial-gradient(130% 240px at 12% 0%, rgba(59, 130, 246, 0.16) 0%, transparent 72%),
    linear-gradient(180deg, #0F172A 0%, #111C35 54%, #0B1324 100%);
  box-shadow: 12px 0 36px -14px rgba(2, 6, 23, 0.42), inset -1px 0 0 rgba(255, 255, 255, 0.08);
  will-change: transform, opacity;
}

.sidebar .brand-header {
  position: relative;
  padding: 6px 46px 14px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

/* Integrated Glass Dock Collapse Button (replaces the raw 'X' icon) */
.sidebar > .sidebar-close {
  display: grid;
  place-items: center;
  position: absolute;
  top: 22px;
  right: 14px;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #94A3B8;
  box-shadow: 0 4px 12px rgba(2, 6, 23, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.24s ease;
  z-index: 2;
}

.sidebar > .sidebar-close .icon {
  width: 17px;
  height: 17px;
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.sidebar > .sidebar-close:hover {
  background: rgba(59, 130, 246, 0.2);
  border-color: rgba(96, 165, 250, 0.48);
  color: #FFFFFF;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transform: translateX(-2px);
}

.sidebar > .sidebar-close:hover .icon {
  transform: translateX(-1px) scale(1.05);
}

.sidebar > .sidebar-close:active {
  transform: translateX(-1px) scale(0.95);
}

/* Topbar Open-Panel Dock Button */
.topbar > .mobile-toggle {
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
  border: 1px solid #CBD5E1;
  color: #1E40AF;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06), inset 0 1px 0 #FFFFFF;
  transition:
    width 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.24s ease,
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    margin 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}

.topbar > .mobile-toggle .icon {
  width: 18px;
  height: 18px;
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.topbar > .mobile-toggle:hover {
  background: #EFF6FF;
  border-color: #93C5FD;
  color: #1D4ED8;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.14);
  transform: translateX(2px);
}

.topbar > .mobile-toggle:hover .icon {
  transform: translateX(1px) scale(1.05);
}

/* Nav Item Micro-Interactions & Luminous Active Indicator */
.sidebar .nav-item {
  position: relative;
  border: 1px solid transparent;
  transition:
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.22s ease;
}

.sidebar .nav-item .icon {
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s ease;
}

.sidebar .nav-item:hover:not(.active) {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.07);
  color: #F8FAFC;
  transform: translateX(4px);
}

.sidebar .nav-item:hover:not(.active) .icon {
  transform: scale(1.08);
  color: #93C5FD;
}

.sidebar .nav-item.active {
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.28) 0%, rgba(37, 99, 235, 0.1) 100%);
  border-color: rgba(96, 165, 250, 0.28);
  color: #FFFFFF;
  box-shadow: 0 8px 20px -6px rgba(29, 78, 216, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.sidebar .nav-item.active::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 22%;
  bottom: 22%;
  width: 3.5px;
  border-radius: 999px;
  background: linear-gradient(180deg, #93C5FD 0%, #3B82F6 100%);
  box-shadow: 0 0 10px rgba(96, 165, 250, 0.85);
}

/* Desktop Spring Open / Collapse Choreography */
@media (min-width: 761px) {
  .topbar > .breadcrumb {
    margin-right: auto;
  }

  .sidebar {
    transition:
      transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.28s ease,
      box-shadow 0.38s ease,
      visibility 0.38s;
  }

  .sidebar > .brand-header,
  .sidebar > .workspace,
  .sidebar > .nav-label,
  .sidebar > nav,
  .sidebar > .sidebar-bottom {
    transition:
      transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.24s ease;
  }

  .main {
    transition: margin-left 0.38s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* When sidebar is OPEN on desktop: hide duplicate topbar toggle button */
  body:not(.sidebar-collapsed) .topbar > .mobile-toggle {
    flex: 0 0 0px;
    width: 0;
    min-width: 0;
    height: 36px;
    padding: 0;
    margin-right: -10px;
    border-width: 0;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    transform: translateX(-10px) scale(0.85);
  }

  /* When sidebar is COLLAPSED on desktop: reveal topbar toggle & slide sidebar away */
  body.sidebar-collapsed .topbar > .mobile-toggle {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0) scale(1);
  }

  body.sidebar-collapsed .sidebar {
    transform: translateX(calc(-100% - 16px));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    box-shadow: none;
  }

  body.sidebar-collapsed .sidebar > .brand-header,
  body.sidebar-collapsed .sidebar > .workspace,
  body.sidebar-collapsed .sidebar > .nav-label,
  body.sidebar-collapsed .sidebar > nav,
  body.sidebar-collapsed .sidebar > .sidebar-bottom {
    transform: translateX(-14px);
    opacity: 0;
  }

  body.sidebar-collapsed .main {
    margin-left: 0;
  }
}

/* Mobile Smooth Drawer & Blurred Backdrop */
@media (max-width: 760px) {
  .topbar > .mobile-toggle {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
  }

  .sidebar {
    transform: translateX(-104%);
    transition:
      transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.34s ease;
  }

  .sidebar.open {
    transform: translateX(0);
    box-shadow: 20px 0 48px rgba(2, 6, 23, 0.55);
  }

  .nav-backdrop {
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    transition:
      opacity 0.28s ease,
      backdrop-filter 0.28s ease,
      visibility 0.28s;
  }

  .nav-backdrop.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
}

html.reduce-motion .sidebar,
html.reduce-motion .sidebar > *,
html.reduce-motion .main,
html.reduce-motion .topbar > .mobile-toggle,
html.reduce-motion .nav-backdrop {
  transition: none !important;
}
.paper-split-card{padding:16px;border:1px solid #bdd5fa;border-radius:14px;background:#f1f7ff;margin-bottom:16px;display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
.paper-split-card>h3,.paper-split-card>p{grid-column:1/-1;margin:0}
.paper-split-card h3{font-size:15px}.paper-split-card .form-field{margin:0}.paper-split-card>.btn{font-size:12px;min-height:38px}
@media(max-width:600px){.paper-split-card{grid-template-columns:1fr}}
.paper-split-card{display:block}
.paper-split-card>summary{font-size:14px;font-weight:700;color:#214b85;cursor:pointer}
.paper-split-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;margin-top:12px}
.paper-split-fields>p{grid-column:1/-1;margin:0}
.paper-split-fields .form-field{margin:0}
.paper-split-fields>.btn{min-height:38px;font-size:12px}
@media(max-width:600px){.paper-split-fields{grid-template-columns:1fr}}
/* Native questions: compact reading column and a persistent question map. */
#modal:has(.native-quiz-form)>.modal-content{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden;max-width:none;padding:16px 24px}
#modal:has(.native-quiz-form) .exam-studio-toolbar{flex:0 0 auto;margin-bottom:10px}
#modal:has(.native-quiz-form)>.modal-content>p{font-size:12px;margin:0 0 12px}
.native-quiz-form{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:18px;flex:1;min-height:0;overflow:hidden;width:100%;max-width:1200px;margin:0 auto}
.native-question-list{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 6px 16px 0}
.native-question-list .practice-q{padding:12px 16px 16px;margin:0 0 14px;border-radius:14px;background:white}
.native-question-list .practice-q legend{font-size:14px;line-height:1.7;padding:0 5px;max-width:100%;font-weight:650}
.native-options{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.native-options>.choice{display:flex;align-items:flex-start;gap:9px;padding:11px 12px;margin:0;min-height:42px;border-radius:9px;font-size:13px;line-height:1.65}
.native-options>.choice input{flex:0 0 16px;width:16px;height:16px;min-height:16px;margin:3px 0 0}
.native-options>.choice span{min-width:0;overflow-wrap:anywhere}
.native-options>.choice:has(input:checked){background:#eff5ff;border-color:#6299ef;box-shadow:inset 3px 0 #2563eb}
.native-question-nav{display:flex;flex-direction:column;gap:12px;padding:16px;background:white;border:1px solid #dfe7f2;border-radius:14px;overflow:auto;min-height:0;align-self:start;max-height:100%}
.native-question-nav h3{font-size:14px;margin:0}.native-question-nav p{font-size:12px;line-height:1.7;margin:0}
.native-question-palette{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.native-question-palette .exam-palette-btn{min-width:0;width:100%;height:32px;min-height:32px;font-size:12px;border-radius:8px;padding:0}
.native-submit{border-top:1px solid #e5ebf4;padding-top:12px}
.native-question-nav .btn{width:100%;font-size:12px;padding:9px;min-height:38px;white-space:normal}
@media(max-width:760px){
 #modal:has(.native-quiz-form)>.modal-content{padding:10px 12px}
 .native-quiz-form{display:flex;flex-direction:column;gap:10px}
 .native-question-list{flex:1;padding-right:0}
 .native-options{grid-template-columns:1fr}
 .native-question-nav{display:grid;grid-template-columns:1fr auto;width:100%;padding:10px;gap:6px 10px;box-sizing:border-box;flex:0 0 auto;overflow:visible}
 .native-question-nav h3,.native-question-nav>p:not([data-native-progress]),.native-question-nav>[data-action="support-open"]{display:none}
 .native-question-nav [data-native-progress]{grid-column:1;grid-row:1}
 .native-question-palette{grid-column:1;grid-row:2;grid-template-columns:repeat(10,minmax(0,1fr));gap:3px}
 .native-question-palette .exam-palette-btn{height:26px;min-height:26px;font-size:10px;border-radius:5px}
 .native-submit{grid-column:2;grid-row:1/3;border:0;padding:0;align-self:center}
 .native-submit .btn{font-size:11px;max-width:100px}
}
/* Study guidance visual refresh, scoped to this workspace. */
#modal:has(.work-review-page.has-exercise-context)>.modal-head{min-height:54px;padding:14px 24px}
#modal:has(.work-review-page.has-exercise-context)>.modal-head h2{font-size:17px;letter-spacing:-.025em}
#modal:has(.work-review-page.has-exercise-context)>.modal-content{padding:14px 22px 18px;background:#f4f7fb}
.has-exercise-context>.work-review-navigation{padding:8px 12px;border-radius:12px;box-shadow:0 1px 3px #152c4d05;margin-bottom:14px;gap:12px}
.has-exercise-context .work-review-navigation .paper-result-current{display:none}
.has-exercise-context .work-review-navigation .exam-status-chip{padding:5px 9px;font-size:10px;letter-spacing:.02em}
.has-exercise-context .work-review-navigation .btn{min-height:34px;padding:7px 11px;font-size:12px}
.has-exercise-context .review-context-layout{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:20px}
.has-exercise-context .review-exercise-pane{border-radius:16px;box-shadow:0 3px 14px #15305304}
.has-exercise-context .review-exercise-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;min-height:52px;box-sizing:border-box}
.has-exercise-context .review-exercise-heading h3{font-size:14px;margin:0}
.has-exercise-context .review-download{align-self:auto;margin:0;padding:6px 10px;min-height:30px;font-size:11px;background:#eff6ff;color:#2563eb;border-color:#c9dcfc;box-shadow:none}
.has-exercise-context .review-original-document>.preview-label{padding:8px 14px;font-size:11px;font-weight:500;color:#64748b;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.has-exercise-context[data-document-exercise="true"][data-review-mode="guide"] .review-selected-question{display:none}
.has-exercise-context .review-selected-question{padding:12px 14px;background:#f8fafc;border-top:1px solid #e2e8f0;max-height:29%}
.has-exercise-context[data-document-exercise="true"] .review-selected-question>.small{display:none}
.has-exercise-context .review-selected-question h3{font-size:13px;margin:0 0 8px}
.has-exercise-context .review-context-answer{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px;background:white;border:1px solid #e2e8f0;border-radius:8px;padding:5px 9px;font-size:12px;margin:0}
.has-exercise-context .review-context-answer strong{color:#255ecb}
.has-exercise-context .review-context-answer strong:last-child{color:#12805b;background:#eaf8f1;border-radius:4px;padding:0 5px}
.has-exercise-context .review-context-solution{margin-top:8px;font-size:12px}
.has-exercise-context .review-context-solution summary{color:#2563eb;font-weight:600}
.has-exercise-context .review-mode-tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:4px;margin:0 0 14px;background:#e7edf5;border:1px solid #dce5ef;border-radius:12px}
.has-exercise-context .review-mode-tabs:has(button:only-child){grid-template-columns:1fr}
.has-exercise-context .review-mode-tabs>button{padding:9px 12px;min-height:40px;font-size:13px;line-height:1.5;color:#62738b}
.has-exercise-context .review-mode-tabs>button[aria-selected="true"]{color:#245bce;background:white;box-shadow:0 2px 7px #1f365316}
.has-exercise-context .work-review-main-col{display:flex;flex-direction:column;gap:14px}
.has-exercise-context .review-guide-scroll{padding:0 4px 4px 0}
.has-exercise-context .review-overview-card{display:flex;flex-direction:column;gap:16px;padding:20px;border:1px solid #e0e7f0;border-radius:16px;box-shadow:0 4px 16px #17365405;background:white}
.has-exercise-context .review-overview-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.has-exercise-context .review-source{font-size:11px;padding:5px 10px;border-radius:999px;line-height:1.5}
.has-exercise-context .review-overview-top .score-stat-pill{font-size:11px;padding:5px 10px;border:1px solid #f6d3d8;background:#fff1f2;color:#bc3343;line-height:1.5;white-space:nowrap}
.has-exercise-context .review-overview-top .score-stat-pill.is-right{color:#158063;border-color:#c1e7d7;background:#eefaf4}
.has-exercise-context .review-overview-top .score-stat-pill.is-empty{color:#977123;border-color:#ecdcb7;background:#fffbeb}
.has-exercise-context .review-summary-lead{font-size:14px;line-height:1.8;color:#455369;background:#f7f9fc;border:0;border-left:3px solid #bdcbdc;border-radius:0 9px 9px 0;padding:12px 14px;margin:0;white-space:pre-line;font-weight:400}
.has-exercise-context .review-next-step{padding:16px;margin:0;border:1px solid #c9defb;border-radius:12px;background:linear-gradient(160deg,#edf5ff,#f8fbff);box-shadow:inset 0 1px 0 white;display:flex;flex-direction:column;gap:10px}
.has-exercise-context .review-next-head{display:flex;align-items:center;gap:8px;color:#244f9c;font-size:13px;letter-spacing:0;text-transform:none;margin:0}
.has-exercise-context .review-next-head strong{font-size:14px;font-weight:700}
.has-exercise-context .review-next-icon{display:grid;place-items:center;width:23px;height:23px;border-radius:7px;background:#dcecff;color:#2461c7;font:700 16px/1 var(--font-body)}
.has-exercise-context .review-next-step p.report-text{font-size:13px;line-height:1.9;font-weight:450;color:#304e78;margin:0;white-space:pre-line}
.has-exercise-context .work-review-main-col>.secondary-details,.has-exercise-context .review-about{padding:12px 16px;margin:0;background:white;border:1px solid #e1e8f1;border-radius:12px;box-shadow:none}
.has-exercise-context .work-review-main-col>.secondary-details summary,.has-exercise-context .review-about summary{font-size:12px;font-weight:600;color:#596a80;cursor:pointer}
.has-exercise-context .work-review-main-col>.secondary-details p,.has-exercise-context .review-about p{font-size:12px;line-height:1.8;color:#68798f;margin:10px 0 0}
.has-exercise-context .review-findings-section{margin:0}
.has-exercise-context .review-section-head{margin:0 0 10px;gap:10px}
.has-exercise-context .review-section-head h3{font-size:14px}
.has-exercise-context .review-finding{border-radius:12px;box-shadow:none}
.has-exercise-context .review-ask-panel>#work-hint-form{padding:18px;border:1px solid #e0e7f0;border-radius:16px;background:white;box-shadow:0 4px 16px #17365405}
.has-exercise-context .review-ask-panel .review-form-fields{padding-right:4px}
.has-exercise-context .review-ask-panel .review-reasoning{padding:0;margin:0 0 14px;border:0;border-radius:0;background:none;box-shadow:none}
.has-exercise-context .review-ask-panel .review-reasoning>.small{font-size:12px;line-height:1.7;color:#75859b;margin:0 0 14px}
.has-exercise-context .review-ask-panel .review-choice-context{padding:7px 10px;background:#eff6ff;border:1px solid #d5e5fb;border-radius:8px;color:#32609c;font-size:12px;margin:10px 0 14px}
.has-exercise-context .review-form-footer{background:white;padding-top:12px;border-color:#e3eaf3}
.has-exercise-context .review-ask-panel .review-reasoning textarea{background:#f8fafc;border-color:#d7e1ee;border-radius:10px;padding:12px;min-height:108px;font-size:13px;line-height:1.7}
.has-exercise-context .review-ask-panel .review-reasoning select{background:#f8fafc;border-color:#d7e1ee;border-radius:10px;min-height:40px}
@media(min-width:1001px) and (max-height:760px){
 .has-exercise-context .review-overview-card{padding:16px;gap:12px}.has-exercise-context .review-summary-lead{padding:10px 12px;font-size:13px}.has-exercise-context .review-next-step{padding:12px}.has-exercise-context .review-ask-panel>#work-hint-form{padding:12px}.has-exercise-context .review-ask-panel .review-reasoning textarea{min-height:78px;height:78px}.has-exercise-context .review-ask-panel .review-reasoning>.small{margin-bottom:8px}.has-exercise-context .review-ask-panel .review-choice-context{margin:8px 0 10px}
}
@media(max-width:1000px){
 #modal:has(.work-review-page.has-exercise-context)>.modal-head{padding:12px 16px}
 #modal:has(.work-review-page.has-exercise-context)>.modal-content{padding:10px 12px}
 .has-exercise-context .review-context-layout{display:flex;gap:14px}
 .has-exercise-context .review-overview-card{padding:16px;gap:14px}
 .has-exercise-context .review-ask-panel>#work-hint-form{padding:14px}
 .has-exercise-context .review-mode-tabs>button{font-size:12px;padding:8px}
 .has-exercise-context .work-review-navigation .paper-result-nav{gap:6px}
 .has-exercise-context .work-review-navigation .exam-status-chip{display:none}
}
.has-exercise-context .review-next-head,.has-exercise-context .review-next-head strong{color:#244f9c!important;text-transform:none!important;letter-spacing:0!important}
.has-exercise-context .work-review-main-col>.secondary-details>summary,.has-exercise-context .review-about>summary{padding:0!important;margin:0;min-height:0;line-height:1.7}
/* Keep finding headings and their text on the same reading edge. */
.has-exercise-context .review-findings{display:flex;flex-direction:column;gap:12px}
.has-exercise-context .review-finding{padding:0;margin:0;border:1px solid #dfe7f2;background:white;border-radius:12px;overflow:hidden}
.has-exercise-context .review-finding[open]{border-color:#c5d9f5;box-shadow:none}
.has-exercise-context .review-finding>summary{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:14px 16px;font-size:13px;line-height:1.7;list-style:none}
.has-exercise-context .review-finding>summary::-webkit-details-marker{display:none}
.has-exercise-context .review-finding>summary::after{content:'⌄';flex:0 0 16px;display:block;text-align:center;color:#7a8da8;font-size:16px;line-height:1.4}
.has-exercise-context .review-finding[open]>summary::after{transform:rotate(180deg)}
.has-exercise-context .finding-q-pill{flex:1;min-width:0;overflow-wrap:anywhere;font-size:13px;font-weight:650;line-height:1.7}
.has-exercise-context .finding-card-body{padding:0 16px 16px}
.has-exercise-context .finding-card-body>.finding-explain{margin:0;font-size:13px;line-height:1.85;color:#65748a}
.has-exercise-context .finding-step-box{margin-top:12px;padding:9px 12px;border-left:2px solid #b6d3fb;background:#f5f9ff;border-radius:0 7px 7px 0;font-size:13px;line-height:1.8;color:#3e587c;overflow-wrap:anywhere}
.has-exercise-context .finding-step-box strong{font-size:12px;color:#305a9b;font-weight:650}
@media(max-width:600px){.has-exercise-context .review-finding>summary{padding:12px 14px}.has-exercise-context .finding-card-body{padding:0 14px 14px}}
/* Honor reduced motion even for cosmetic rules with !important animations. */
@media (prefers-reduced-motion: reduce) {
  #app *, #app *::before, #app *::after { animation: none !important; transition: none !important; }
}
.reduce-motion #app *, .reduce-motion #app *::before, .reduce-motion #app *::after {
  animation: none !important; transition: none !important;
}
/* Teacher document review: keep the original and publishing controls in view. */
@media(min-width:1001px){
 #modal[open]:has(.paper-editor-layout){width:calc(100vw - 40px);max-width:1560px;height:calc(100dvh - 40px);max-height:calc(100dvh - 40px);padding:0;display:flex;flex-direction:column;overflow:hidden}
 #modal:has(.paper-editor-layout)>.modal-head{flex:none;padding:16px 22px}
 #modal:has(.paper-editor-layout)>.modal-head h2{font-size:20px}
 #modal:has(.paper-editor-layout)>.modal-content{flex:1;min-height:0;display:flex;flex-direction:column;padding:16px 20px;overflow:hidden}
 #modal:has(.paper-editor-layout) .paper-steps{flex:none;margin:0 0 8px;padding:10px 14px}
 #modal:has(.paper-editor-layout) .paper-steps+p{flex:none;margin:0 0 12px}
 #modal .paper-editor-layout{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(390px,.95fr);grid-template-rows:minmax(0,1fr);align-items:stretch;gap:20px;overflow:hidden}
 #modal .paper-editor-layout .paper-source-column{position:static;min-height:0;display:flex;flex-direction:column;overflow:hidden}
 #modal .paper-editor-layout .paper-source-tabs{flex:none;margin-bottom:10px}
 #modal .paper-editor-layout [data-paper-source]{flex:1;min-height:0;overflow:auto}
 #modal .paper-editor-layout .exercise-preview{height:100%;min-height:0;display:flex;flex-direction:column;margin:0}
 #modal .paper-editor-layout .exercise-preview iframe{flex:1;width:100%;height:100%;min-height:0}
 #modal .paper-answer-column{min-height:0;display:flex;flex-direction:column;overflow:hidden}
 #modal .paper-answer-column>.notice,#modal .paper-import-warnings{flex:none;max-height:100px;overflow:auto;margin-bottom:8px}
 #paper-review-form{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
 #paper-review-form .paper-review-fields{flex:1;min-height:0;overflow:auto;padding:0 6px 14px 0;scrollbar-gutter:stable}
 #paper-review-form .paper-review-footer{flex:none;border-top:1px solid #e0e8f3;background:#fff;padding:10px 0 0}
 #paper-review-form .paper-review-confirm{margin:6px 0;font-size:11px!important;line-height:1.6}
 #paper-review-form .form-actions{margin:8px 0 0;padding:0;border:0;gap:8px}
 #paper-review-form .form-actions>.btn{font-size:12px;padding:10px 13px;min-height:40px}
 #modal:has(#paper-upload-form){max-width:900px}
 #paper-upload-form{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px}
 #paper-upload-form>.form-field{margin:0}
 #paper-upload-form>.form-field:has([name=sourceMode]),#paper-upload-form>.form-field:has([name=exercise]),#paper-upload-form>[data-paper-separate],#paper-upload-form>[data-paper-word-copy],#paper-upload-form>.form-error,#paper-upload-form>.form-actions{grid-column:1/-1}
 #paper-upload-form .form-field input,#paper-upload-form .form-field select{min-height:44px;font-size:14px;padding:10px 12px}
}
.paper-review-status{margin:0;font-size:12px;color:#9b6417;line-height:1.6}
.paper-review-status.is-ready{color:#197358}
.paper-source-tabs [aria-pressed=true]{background:#edf4ff;color:#245dc1;border-color:#a6c4f4}
.symbol-input{margin:6px 0;display:block;font-size:12px;line-height:1.5}
.symbol-toggle{border:1px solid #dbe5f1;border-radius:7px;background:#f7faff;color:#365f98;font:inherit;padding:4px 9px;cursor:pointer}
.symbol-panel{margin-top:7px;border:1px solid #dce6f3;border-radius:10px;padding:9px;background:#f8fbff;max-height:220px;overflow:auto}
.symbol-group{display:flex;flex-wrap:wrap;gap:5px;margin:5px 0}
.symbol-group>span{width:100%;color:#6a7c93;font-size:11px}
.symbol-group>button{min-width:30px;min-height:30px;padding:4px 7px;border:1px solid #d6e2f1;border-radius:6px;background:#fff;color:#213f69;font:inherit;cursor:pointer}
.symbol-group>button:hover,.symbol-group>button:focus-visible{background:#eaf2ff;border-color:#6496e4}
/* A submitted-work conversation keeps its question beside the messages. */
.study-chat-exercise{min-height:0;display:flex;flex-direction:column;overflow:hidden;background:#fff;border:1px solid #dce6f3;border-radius:20px}
.study-chat-source-head{padding:14px 16px;border-bottom:1px solid #e3ebf5;flex:none}
.study-chat-source-head h2{font-size:15px;line-height:1.6;margin:10px 0 3px}
.study-chat-source-head>span{font-size:12px;color:#5c7290}
.study-chat-source-body{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column}
.study-chat-source-body>iframe{flex:1;min-height:240px;width:100%;border:0}
.study-chat-source-body>pre{white-space:pre-wrap;overflow-wrap:anywhere;padding:14px;font-size:13px}
.study-chat-question{padding:16px;font-size:14px;line-height:1.8;overflow-wrap:anywhere}
.study-chat-question h3{font-size:14px;margin:0 0 8px}
.study-chat-question ol{padding-left:24px}
.study-chat-choice{padding:8px 10px;border-radius:8px;background:#edf5ff;color:#365f96;font-size:12px}
.study-chat-question details{font-size:12px;color:#61738b}
.study-chat-context-chip{flex:none;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 14px;background:#f2f7ff;border-bottom:1px solid #e0eaf8;font-size:12px;color:#315c99}
.study-chat-context-chip .btn{font-size:11px;padding:5px 8px;min-height:28px}
.study-chat-consent{display:flex;align-items:flex-start;gap:8px;font-size:11px;line-height:1.6;color:#62768e;padding:8px 18px 0}
.study-chat-consent input{width:16px;height:16px;min-width:16px;margin-top:1px}
.study-chat-mobile-source{display:none!important}
.study-chat-launch{margin:12px 16px;font-size:12px!important;min-height:38px!important}
@media(min-width:1001px){
 .community-reference .ask-kien-grid.has-study-context{grid-template-columns:minmax(320px,.9fr) minmax(420px,1.1fr);gap:18px}
 .ask-kien-grid.has-study-context>.ant-chat-sidebar{display:none}
}
@media(max-width:1000px){
 .ask-kien-grid.has-study-context>.study-chat-exercise,.ask-kien-grid.has-study-context>.ant-chat-sidebar{display:none}
 .community-reference .ask-kien-grid.has-study-context{grid-template-columns:minmax(0,1fr)}
 .study-chat-mobile-source{display:inline-flex!important}
 .study-chat-consent{padding:6px 12px 0;font-size:10px}
}
.community-reference #community-chat-form .study-chat-consent{display:flex;align-items:flex-start;gap:8px;margin:0;padding:8px 16px;font-size:11px;font-weight:400;line-height:1.6}
.community-reference #community-chat-form .study-chat-consent input{flex:none;width:16px;min-width:16px;height:16px;margin:1px 0 0;padding:0}
.community-reference #community-chat-form .study-chat-consent>span{flex:1;min-width:0}
.has-study-context .ant-chat-empty{height:100%;min-height:0!important;max-height:100%;padding:12px!important;gap:5px;justify-content:center}
.has-study-context .ant-chat-empty .ant-chat-mascot,.has-study-context .ant-chat-empty .empty-state-eyebrow{display:none}
.has-study-context .ant-chat-empty h2{font-size:16px!important;margin:0!important}
.has-study-context .ant-chat-empty p{font-size:12px!important;margin:0!important}
.review-exercise-heading .review-chat-picker{display:flex;align-items:center;gap:9px;flex-basis:100%;font-size:12px;color:#627793;margin-top:8px}
.review-exercise-heading .review-chat-picker select{width:auto;min-width:110px;padding:6px 10px;font-size:12px}
@media(max-height:740px){.has-study-context .ant-chat-empty p,.has-study-context .ant-chat-empty .ant-chat-mascot,.has-study-context .ant-chat-empty>span{display:none}}
.community-reference .ant-composer .symbol-input{position:relative}
.community-reference .ant-composer .symbol-panel{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);z-index:10;width:min(480px,calc(100vw - 64px));max-height:200px;box-sizing:border-box;box-shadow:0 10px 30px #1b3c6b24;text-align:left}
.community-reference #community-chat-form .chatgpt-composer-box{overflow:visible}
.has-study-context .ant-chat-empty{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:8px!important}
.has-study-context .ant-chat-empty>span{display:none}
.symbol-picker.symbol-panel{padding:14px;border:1px solid #d6e3f5;border-radius:16px;background:#fff;box-shadow:0 16px 48px #17345c30;overflow:auto;font:13px/1.6 system-ui,sans-serif;color:#243e5e;z-index:1000}
.symbol-picker::backdrop{background:transparent;pointer-events:none}
.symbol-picker .symbol-picker-head{display:flex;gap:8px;margin:0 0 12px;position:sticky;top:-14px;padding:4px 0 9px;background:#fff;z-index:2}
.symbol-picker.symbol-panel .symbol-search{flex:1;min-width:0;width:auto}
.symbol-picker.symbol-panel .symbol-category{width:150px;flex:none}
.symbol-picker.symbol-panel input,.symbol-picker.symbol-panel select{min-height:36px!important;height:36px;padding:6px 9px!important;font:inherit!important;border:1px solid #dce5f1;border-radius:8px;background:#f8faff;color:#263c59}
.symbol-picker .symbol-results{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;max-height:310px;overflow:auto}
.symbol-picker .symbol-item{display:flex;min-height:62px!important;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;padding:7px 5px!important;border:1px solid #e0e8f4;border-radius:9px;background:#f8fbff;box-shadow:none;color:#294b7a;cursor:pointer;font:inherit;text-align:center;line-height:1.4}
.symbol-picker .symbol-item>span{font-size:19px;white-space:nowrap}
.symbol-picker .symbol-item>small{font-size:10px;line-height:1.4;overflow-wrap:anywhere;color:#6b809b}
.symbol-picker .symbol-item.is-template{border-color:#c4dafb;background:#edf5ff}
.symbol-picker .symbol-item:hover,.symbol-picker .symbol-item:focus-visible{border-color:#6198e7;background:#e4efff;outline:2px solid #b8d3fb;outline-offset:1px}
.symbol-picker .symbol-template-editor>strong{display:block;margin:9px 0;font-size:14px}
.symbol-picker .symbol-template-back{font:inherit;border:0;background:none;color:#2b64b5;padding:0;cursor:pointer}
.symbol-picker .symbol-template-fields{display:grid;grid-template-columns:1fr 1fr;gap:9px 12px}
.symbol-picker .symbol-template-fields label{display:flex!important;flex-direction:column;gap:4px;font-size:11px;color:#657a95;margin:0!important;font-weight:500!important}
.symbol-picker .symbol-template-fields input{width:100%}
.symbol-picker .symbol-formula-preview{display:flex;justify-content:center;align-items:center;min-height:72px;max-height:160px;overflow:auto;margin:12px 0;padding:14px;border:1px solid #dce7f5;border-radius:10px;background:#f5f9ff;font-size:20px}
.symbol-picker .symbol-formula-apply{width:100%;min-height:38px!important;font-size:13px!important;padding:8px 12px!important}
.symbol-picker .symbol-picker-status{margin:8px 0 0;color:#82704f;font-size:11px;line-height:1.5}
.symbol-picker .symbol-picker-status{min-height:17px}
.symbol-picker .symbol-formula-preview.is-empty{font-size:12px;color:#74869f}
@media(max-width:480px){.symbol-picker .symbol-results{grid-template-columns:repeat(3,minmax(0,1fr));max-height:260px}.symbol-picker.symbol-panel .symbol-category{width:115px}.symbol-picker .symbol-template-fields{grid-template-columns:1fr}.symbol-picker .symbol-picker-head{gap:5px}}

/* Shop styles are opt-in; rank badges do not change a student's name. */
.level.name-violet{color:#7541b7!important;-webkit-text-fill-color:#7541b7!important;background:none!important;animation:none!important}
.level.name-rose{color:#bd4263!important;-webkit-text-fill-color:#bd4263!important;background:none!important;animation:none!important}
.level.name-graphite{color:#475569!important;-webkit-text-fill-color:#475569!important;background:none!important;animation:none!important}
.sidebar .level.name-violet{color:#d2b5ff!important;-webkit-text-fill-color:#d2b5ff!important}
.sidebar .level.name-rose{color:#f7abc0!important;-webkit-text-fill-color:#f7abc0!important}
.sidebar .level.name-graphite{color:#cbd5e1!important;-webkit-text-fill-color:#cbd5e1!important}
.avatar.frame-notebook{outline:2px dashed #4385b9!important;outline-offset:3px;box-shadow:0 0 0 2px #dceeff!important}
.avatar.frame-notebook::before,.avatar.frame-notebook::after{display:none!important}
.avatar.frame-orbit{box-shadow:0 0 0 2px white,0 0 0 4px #6489d9,0 0 0 7px #e7ddff,0 0 0 9px #9b73d7!important}
.avatar.frame-orbit::before,.avatar.frame-orbit::after{display:none!important}
.avatar.frame-circuit{outline:3px solid #155e75!important;outline-offset:2px;box-shadow:0 0 0 6px #bcf4e8!important}
.avatar.frame-circuit::after{content:'⌘';color:#0f766e;border-color:#5eead4;background:#ecfdf5}
.avatar.frame-circuit::before{display:none!important}
.ant-rank-preview{justify-content:center;min-height:78px!important}
.profile-reward-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:18px}
.achievements-panel .panel-header{align-items:flex-start;gap:16px}
.achievements-panel .panel-header p{margin-top:8px;max-width:650px;line-height:1.65}
.achievement-filters{display:flex;gap:8px;flex-wrap:wrap;padding:0 24px 20px}
.achievement-filters [aria-pressed=true]{background:#edf4ff;color:#215bc5;border-color:#b6cff7}
.achievements-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:0 24px 24px}
.achievement-card{display:flex;flex-direction:column;min-width:0;padding:20px;border:1px solid #e1e7f0;border-radius:18px;background:#fafbfd}
.achievement-card[hidden]{display:none!important}
.achievement-card.is-earned{border-color:#b6dfd0;background:linear-gradient(135deg,#f0fbf5,#fff)}
.achievement-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:14px}
.achievement-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#edf2f9;font-size:23px;filter:grayscale(.6)}
.achievement-card.is-earned .achievement-icon{background:#dcf5e9;filter:none}
.achievement-state{font-size:11px;color:#718199}
.achievement-card.is-earned .achievement-state{color:#218061}
.achievement-card h3{font-size:15px;margin:0 0 8px!important}
.achievement-card p{font-size:12px;color:#6c7f98;line-height:1.7;margin:0 0 18px;flex:1}
.achievement-progress-label{display:flex;justify-content:space-between;font-size:11px;color:#70829c;gap:8px}
.achievement-card progress{width:100%;height:6px;margin:8px 0;accent-color:#3876d8;border:0;border-radius:8px;overflow:hidden}
.achievement-card.is-earned progress{accent-color:#269774}
.achievement-card progress::-webkit-progress-bar{background:#e6edf5;border-radius:8px}
.achievement-card progress::-webkit-progress-value{background:#3876d8;border-radius:8px}
.achievement-card.is-earned progress::-webkit-progress-value{background:#269774}
.achievement-card progress::-moz-progress-bar{background:#3876d8;border-radius:8px}
.achievement-card small{font-size:10px;color:#7c8ea2;margin-top:6px}
.achievement-note,.achievement-empty{padding:0 24px 22px;margin:0!important;line-height:1.7}
.reward-ledger{margin-top:18px}

/* Compact chat: history rows, content-sized bubbles and a steady composer. */
.community-reference .ask-kien-grid:not(.has-study-context){grid-template-columns:220px minmax(0,1fr);gap:16px}
.community-reference:has(.ask-kien-grid)>.page-heading{margin-bottom:12px}
.community-reference:has(.ask-kien-grid)>.page-heading h1{font-size:25px}
.community-reference:has(.ask-kien-grid)>.page-heading p{font-size:12px;margin-top:5px}
.community-reference .ask-kien-grid .kien-sidebar{padding:12px;gap:12px;border-radius:18px;box-shadow:none;background:#f7f9fc}
.community-reference .ask-kien-grid .new-chat-btn{min-height:36px;padding:8px 10px;font-size:12px;border-radius:10px;box-shadow:0 3px 8px #245ac51a}
.community-reference .ask-kien-grid .kien-sidebar-section-label{font-size:10px;letter-spacing:.04em;margin:4px 4px 0}
.community-reference .ask-kien-grid .ant-chat-history{display:flex;flex-direction:column;gap:3px;min-height:0;overflow-y:auto}
.community-reference .ask-kien-grid .ant-chat-item{display:block;width:100%;min-width:0;max-width:none;min-height:40px;padding:10px 11px;border:1px solid transparent;border-radius:9px;background:transparent;box-shadow:none;text-align:left}
.community-reference .ask-kien-grid .ant-chat-item:hover{background:#edf2f9}
.community-reference .ask-kien-grid .ant-chat-item.active{background:#e8f0fd;border-color:#d4e2f9;color:#2454a2}
.community-reference .ask-kien-grid .thread-title{display:block;font-size:12px;font-weight:550;line-height:1.55;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.community-reference .ask-kien-grid .thread-meta-top{display:none}
.community-reference .ask-kien-grid .kien-method-card{display:none}
.community-reference .ask-kien-grid .kien-privacy-foot{font-size:10px;line-height:1.6;padding:8px 2px 0;margin:0;margin-top:auto}
.community-reference .ask-kien-grid .kien-chat-panel{border-radius:18px;box-shadow:0 3px 14px #243c5908}
.community-reference .ask-kien-grid .kien-chat-header{padding:12px 18px}
.community-reference .ask-kien-grid .kien-agent-title h2{font-size:14px}
.community-reference .ask-kien-grid .kien-agent-sub{font-size:11px}
.community-reference .ask-kien-grid .ant-messages{padding:22px 24px;justify-content:flex-start;gap:20px;scroll-behavior:auto;overflow-anchor:none}
.community-reference .ask-kien-grid .ant-message{flex:0 0 auto;min-height:0;margin:0}
.community-reference .ask-kien-grid .ant-message.assistant{align-self:flex-start;width:fit-content;max-width:min(92%,780px);gap:10px}
.community-reference .ask-kien-grid .ant-message.user{align-self:flex-end;width:fit-content;max-width:min(80%,640px)}
.community-reference .ask-kien-grid .ant-message-content{flex:0 1 auto;width:auto;min-width:0;max-width:100%;display:flex;flex-direction:column;align-items:flex-start}
.community-reference .ask-kien-grid .ant-message.user .ant-message-content{align-items:flex-end}
.community-reference .ask-kien-grid .ant-message-body{width:fit-content;min-width:0;max-width:100%;box-sizing:border-box;padding:10px 14px;border-radius:14px;font-size:13px;line-height:1.75;box-shadow:none}
.community-reference .ask-kien-grid .ant-message-label{font-size:10px;margin:0 0 5px;gap:9px}
.community-reference .ask-kien-grid .ant-message-label time{font-size:9px;color:#93a2b6}
.community-reference .ask-kien-grid .ant-message>.kien-avatar-box{height:30px;width:30px;flex-basis:30px;border-radius:10px;margin-top:18px}
.community-reference .ask-kien-grid .ant-message>.kien-avatar-box .companion-robot{height:26px;width:26px}
.community-reference .ask-kien-grid .socratic-step-item{padding:8px 10px;font-size:12px}
.community-reference .ask-kien-grid .quick-prompts-bar{padding:8px 16px;gap:6px;background:#fff;border-top:1px solid #edf1f6}
.community-reference .ask-kien-grid .prompt-chip{font-size:10px;padding:6px 10px;min-height:28px}
.community-reference .ask-kien-grid .ant-composer{padding:8px 16px 14px;background:#fff}
.community-reference .ask-kien-grid .chatgpt-composer-box{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'attachments attachments' 'text text' 'symbols tools';gap:6px 10px;padding:10px 12px;border-radius:18px;box-shadow:none}
.community-reference .ask-kien-grid .chatgpt-attachments-tray{grid-area:attachments}
.community-reference .ask-kien-grid .chatgpt-attachments-tray:empty{display:none}
.community-reference .ask-kien-grid .chatgpt-textarea{grid-area:text;width:100%;min-height:44px!important;height:44px;max-height:120px!important;padding:6px 3px!important;font-size:13px;line-height:1.6;border:0;resize:none}
.community-reference .ask-kien-grid .chatgpt-composer-box>.symbol-input{grid-area:symbols;position:static;justify-content:flex-start;align-self:end;margin:0;padding:0;min-width:0}
.community-reference .ask-kien-grid .symbol-toggle{font-size:10px;padding:5px 7px;min-height:28px;white-space:nowrap}
.community-reference .ask-kien-grid .chatgpt-toolbar{grid-area:tools;display:flex;justify-content:flex-end;align-items:center;width:auto;gap:8px;min-height:34px;margin:0;padding:0;border:0}
.community-reference .ask-kien-grid .chatgpt-toolbar-left,.community-reference .ask-kien-grid .chatgpt-toolbar-right{gap:7px}
.community-reference .ask-kien-grid .chatgpt-plus-btn{width:30px;height:30px;min-height:30px}
.community-reference .ask-kien-grid .chatgpt-model-pill{font-size:10px;padding:5px 8px;min-height:28px}
.community-reference .ask-kien-grid .chatgpt-model-pill small{display:none}
.community-reference .ask-kien-grid .chatgpt-send-btn{width:34px;height:34px;min-height:34px;animation:none!important}
.community-reference .ask-kien-grid .chatgpt-send-btn:disabled{cursor:default}
.community-reference .ant-typing-bubble{display:inline-flex!important;align-items:center;gap:10px;color:#6f829b;font-size:12px!important}
.ant-typing-dots{display:inline-flex;gap:4px;align-items:center;height:16px}
.ant-typing-dots i{width:5px;height:5px;border-radius:50%;background:#4c80ce;animation:antTyping 1.2s ease-in-out infinite}
.ant-typing-dots i:nth-child(2){animation-delay:.15s}.ant-typing-dots i:nth-child(3){animation-delay:.3s}
@keyframes antTyping{0%,70%,100%{opacity:.35;transform:translateY(0)}35%{opacity:1;transform:translateY(-3px)}}
.community-reference .ant-delivery-error{border-color:#ecd3ce!important;background:#fff8f5!important;color:#86544b}
.community-reference .ask-kien-grid.has-study-context>.kien-sidebar{display:none}
.ant-delivery-error p{margin:0 0 10px}.ant-delivery-actions{display:flex;gap:7px;flex-wrap:wrap}
@media(prefers-reduced-motion:reduce){.ant-typing-dots i{animation:none}}
html.reduce-motion .ant-typing-dots i,body.reduce-motion .ant-typing-dots i{animation:none}
@media(max-width:760px){
 .community-reference .ask-kien-grid:not(.has-study-context){grid-template-columns:minmax(0,1fr);gap:10px}
 .community-reference .ask-kien-grid>.kien-sidebar{display:grid;grid-template-columns:150px minmax(0,1fr);max-height:70px;padding:8px;gap:8px}
 .community-reference .ask-kien-grid .kien-sidebar-section-label,.community-reference .ask-kien-grid .kien-privacy-foot{display:none}
 .community-reference .ask-kien-grid .ant-chat-history{flex-direction:row;overflow:auto;max-height:44px}
 .community-reference .ask-kien-grid .ant-chat-item{min-width:140px;max-width:180px;min-height:36px;padding:7px 9px}
 .community-reference .ask-kien-grid .new-chat-btn{min-height:36px;font-size:11px}
 .community-reference .ask-kien-grid .ant-messages{padding:14px 12px;gap:16px}
 .community-reference .ask-kien-grid .ant-message.assistant{max-width:96%;gap:7px}
 .community-reference .ask-kien-grid .ant-message-body{font-size:12px;padding:9px 12px}
 .community-reference .ask-kien-grid .chatgpt-model-pill{display:none}
 .community-reference .ask-kien-grid .ant-composer{padding:6px 10px 10px}
}
@media(max-width:1100px){.achievements-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.achievements-grid{grid-template-columns:1fr;padding:0 16px 16px}.achievement-filters{padding:0 16px 16px}.achievement-note,.achievement-empty{padding:0 16px 16px}}

/* ==========================================================================
   Hỏi Kiến — readable answers & compact layout (2026-10-26)
   ========================================================================== */
.community-reference .ask-kien-grid .ant-message-body .rich-text,.community-reference .ask-kien-grid .socratic-step-item .rich-text,.community-reference .ask-kien-grid .kien-question-prompt .rich-text{white-space:normal}
.rich-text>*{margin:0}
.rich-text>*+*{margin-top:.65em}
.rich-text ul,.rich-text ol{padding-left:1.35em;display:grid;gap:.3em}
.rich-text li{padding-left:.15em}
.rich-text ul>li::marker{color:#2563EB}
.rich-text ol>li::marker{color:#2563EB;font-weight:700}
.rich-text .rich-heading{font-weight:750;color:#0f2c55}
.rich-text .rich-block{overflow-x:auto;overflow-y:hidden;padding:.15em 0}
.rich-text .community-math.display{display:block;margin:0;text-align:center}
.rich-text .math-glue{white-space:nowrap}
.rich-text .community-code{margin:0;white-space:pre}
.community-reference .ask-kien-grid .ant-message.user .rich-text .rich-heading{color:inherit}
.community-reference .ask-kien-grid .socratic-step-item{white-space:normal}
.community-reference .ask-kien-grid .kien-question-prompt{white-space:normal}
.community-reference .ask-kien-grid .ant-message.assistant .ant-message-body{max-width:min(720px,100%)}
/* Short screens: keep more room for the conversation itself */
@media(max-height:760px) and (min-width:761px){
 .community-reference .ask-kien-grid .kien-agent-sub{display:none}
 .community-reference .ask-kien-grid .ant-chat-header{padding:8px 16px}
 .community-reference .ask-kien-grid .quick-prompts-bar{padding:6px 16px}
 .community-reference .ask-kien-grid .ant-composer{padding:6px 16px 10px}
 .community-reference .ask-kien-grid .chatgpt-composer-box{padding:8px 12px;gap:4px 10px}
 .community-reference .ask-kien-grid .chatgpt-textarea{min-height:36px!important;height:36px}
}
@media(max-width:760px){
 .community-reference .ask-kien-grid>.kien-sidebar{grid-template-columns:auto minmax(0,1fr)}
 .community-reference .ask-kien-grid .new-chat-btn{white-space:nowrap;padding-inline:12px}
}

/* Topbar breadcrumb: keep on one line; hide the root crumb on phones */
.breadcrumb{min-width:0;white-space:nowrap}
.breadcrumb .breadcrumb-root{display:inline-flex;align-items:center;gap:10px;margin:0;color:var(--text-muted);font-weight:500}
.breadcrumb .breadcrumb-root>span{color:var(--border-strong)}
.breadcrumb strong{min-width:0;overflow:hidden;text-overflow:ellipsis}
@media(max-width:1100px){.breadcrumb .breadcrumb-root{display:none}.breadcrumb strong{font-size:13px}}
.top-tools .sync-button,.top-tools .today{white-space:nowrap}
@media(max-width:1100px){.top-tools .today{display:none}}
@media(max-width:900px){.top-tools #sync-status{display:none}}
@media(max-width:1100px){.community-reference .ask-kien-grid .chatgpt-model-pill{display:none}}
/* Sidebar brand: logo scales into the space left of the collapse button instead of sliding under it */
.sidebar .brand-header .brand-logo{width:100%;max-width:156px;height:auto;aspect-ratio:156/46;object-fit:contain;margin:0 auto}
.sidebar .brand-header .brand{white-space:nowrap}
@media(max-width:1100px) and (min-width:761px){.sidebar .brand-header .brand{font-size:14px}.sidebar>.sidebar-close{top:16px;right:12px;width:30px;height:30px}.sidebar .brand-header{padding-right:40px}}