/* --- 3D Рендеринг Карточки --- */
.perspective-1000 {
    perspective: 1000px;
    -webkit-perspective: 1000px;
}
.transform-style-3d {
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}
.backface-hidden {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.rotate-y-180 {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}

html, body {
    height: 100dvh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

#flashcard {
    will-change: transform;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

#card-front, #card-back {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

#card-front {
    transform: rotateY(0deg) translateZ(1px);
    -webkit-transform: rotateY(0deg) translateZ(1px);
}

#card-back {
    transform: rotateY(180deg) translateZ(1px);
    -webkit-transform: rotateY(180deg) translateZ(1px);
}

/* Изменение прозрачности для плавного скрытия статус-бара */
.opacity-0 {
    opacity: 0;
    pointer-events: none;
}

/* --- ПРАВИЛА РЕЖИМА ВЫСОКОЙ КОНЦЕНТРАЦИИ (Focus Mode) --- */

.focus-active main {
    max-width: min(94vw, 760px) !important;
}

.focus-active #card-zone {
    width: 100% !important;
    padding: 0.5rem 0 !important;
}

.focus-active #flashcard {
    max-width: 100% !important;
    width: 100% !important;
    max-height: calc(100dvh - 90px) !important;
    min-height: 520px !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    box-shadow: none !important;
    background-image: none !important;
}

@media (max-height: 640px) {
    .focus-active #flashcard {
        min-height: 380px !important;
    }
}

/* Улучшение типографики и комфорта чтения для активного фокуса */
.focus-active #card-text,
.focus-active #card-intro-term {
    font-size: clamp(1.25rem, 2.5vw, 1.85rem) !important;
    line-height: 1.4 !important;
}

.focus-active #card-main-text {
    font-size: clamp(1rem, 2vw, 1.3rem) !important;
    line-height: 1.65 !important;
}

.focus-active #card-front,
.focus-active #card-back {
    padding: clamp(1.25rem, 3vw, 2rem) !important;
}

/* Скрываем прогресс-бар, подвал и служебные элементы полностью с усадкой сетки */
.focus-active #progress-bar,
.focus-active #bottom-nav,
.focus-active #train-session-counters,
.focus-active .hide-on-focus {
    display: none !important;
}

/* Гасим таймер Помодоро, чтобы не создавал когнитивного давления */
.focus-active #session-timer-container {
    display: none !important;
}

/* Намертво приглушаем FAB кнопку фокуса под большим пальцем, стирая границы */
.focus-active #focus-toggle {
    opacity: 0.15 !important;
    border-color: transparent !important;
    background: transparent !important;
}
.focus-active #focus-toggle:hover {
    opacity: 0.6 !important;
}

/* Кнопки переключения микро-фильтров в Архиве */
#archive-filter-bar button {
    transition: all 0.2s ease;
}

/* Скроллбары для текстовой матрицы без enterprise-шума */
#breakdown-list::-webkit-scrollbar,
#data-container::-webkit-scrollbar {
    width: 3px;
}
#breakdown-list::-webkit-scrollbar-thumb,
#data-container::-webkit-scrollbar-thumb {
    background: #222;
}

#data-container,
#breakdown-list,
#screen-config {
    -webkit-overflow-scrolling: touch;
}

/* --- Интерактивные шаблоны для предметов --- */

/* Китайский: Размытие Pinyin на обратной стороне до наведения */
.template-chinese #card-secondary-text {
    filter: blur(5px);
    transition: filter 0.3s ease;
    cursor: pointer;
}
.template-chinese #card-secondary-text:hover,
.template-chinese #card-secondary-text:active {
    filter: blur(0);
}

/* Право: Строгий акцентный стиль для кодексов */
.template-law #card-main-text {
    border-left: 3px solid #2563eb;
    padding-left: 14px;
    text-align: left;
}

/* Карточка в режиме знакомства — убираем cursor-pointer, т.к. клик не переворачивает */
#card-front.introduction-mode {
    cursor: default;
}

/* Плавное появление блоков */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.introduction-block,
.animate-fade-in {
    opacity: 0;
    animation: fadeIn 0.25s ease-out forwards;
}

/* Cloze Deletion Styling */
.cloze-blank {
    background-color: rgba(245, 158, 11, 0.15);
    color: #d97706;
    border-bottom: 2px dashed #f59e0b;
    border-radius: 4px;
    padding: 2px 6px;
    font-weight: 600;
    display: inline-block;
    user-select: none;
}
.dark .cloze-blank {
    color: #fbbf24;
}
.cloze-revealed {
    background-color: rgba(16, 185, 129, 0.15);
    color: #059669;
    border-bottom: 2px solid #10b981;
    border-radius: 4px;
    padding: 2px 6px;
    font-weight: 700;
    display: inline-block;
}
.dark .cloze-revealed {
    color: #34d399;
}

/* ==========================================================================
   HYBRID CONCEPT VISUALIZER & OBSIDIAN GRAPH (M4)
   ========================================================================== */
#kg-graph-canvas-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    touch-action: none;
    overscroll-behavior: none;
    background: transparent;
}

/* Категориальные бейджи: Светлая тема (мягкий фон, темный текст, строгая рамка) */
.badge-authority { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.badge-instance { background: #e0f2fe; color: #075985; border: 1px solid #bae6fd; }
.badge-condition { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.badge-exception { background: #ffe4e6; color: #9f1239; border: 1px solid #fecdd3; }
.badge-legal_status { background: #f3e8ff; color: #6b21a8; border: 1px solid #e9d5ff; }

/* Категориальные бейджи: Темная тема */
.dark .badge-authority { background: rgba(245, 158, 11, 0.15); color: #fcd34d; border: 1px solid rgba(245, 158, 11, 0.3); }
.dark .badge-instance { background: rgba(6, 182, 212, 0.15); color: #7dd3fc; border: 1px solid rgba(6, 182, 212, 0.3); }
.dark .badge-condition { background: rgba(16, 185, 129, 0.15); color: #6ee7b7; border: 1px solid rgba(16, 185, 129, 0.3); }
.dark .badge-exception { background: rgba(244, 63, 94, 0.15); color: #fda4af; border: 1px solid rgba(244, 63, 94, 0.3); }
.dark .badge-legal_status { background: rgba(168, 85, 247, 0.15); color: #d8b4fe; border: 1px solid rgba(168, 85, 247, 0.3); }

.tree-node-card {
    transition: all 0.15s ease-out;
}
.tree-node-card:active {
    transform: scale(0.99);
}

.tree-branch-container {
    position: relative;
    padding-left: 0.875rem;
    border-left: 2px solid #e5e5e5;
    margin-left: 0.5rem;
}
.dark .tree-branch-container {
    border-left-color: #262626;
}

/* ==========================================================================
   INTERACTIVE PRACTICE MODULE (M3 & R5)
   ========================================================================== */
.practice-option-btn {
    transition: all 0.15s ease-out;
}
.practice-option-btn:active {
    transform: scale(0.99);
}
.practice-option-correct {
    background-color: #ecfdf5 !important;
    border-color: #10b981 !important;
    color: #065f46 !important;
}
.dark .practice-option-correct {
    background-color: rgba(16, 185, 129, 0.15) !important;
    border-color: #10b981 !important;
    color: #34d399 !important;
}
.practice-option-wrong {
    background-color: #fff1f2 !important;
    border-color: #f43f5e !important;
    color: #9f1239 !important;
}
.dark .practice-option-wrong {
    background-color: rgba(244, 63, 94, 0.15) !important;
    border-color: #f43f5e !important;
    color: #fb7185 !important;
}

/* ==========================================================================
   DYNAMIC FLUID TYPOGRAPHY & RIGID SHELL FLASHCARD ARCHITECTURE
   ========================================================================== */

/* Modern Sleek Scrollbars for Card Bodies */
.card-scroll-clean {
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(140, 140, 140, 0.25) transparent;
}

.card-scroll-clean::-webkit-scrollbar {
    width: 4px;
}

.card-scroll-clean::-webkit-scrollbar-track {
    background: transparent;
}

.card-scroll-clean::-webkit-scrollbar-thumb {
    background: rgba(140, 140, 140, 0.3);
    border-radius: 9999px;
}

.card-scroll-clean::-webkit-scrollbar-thumb:hover {
    background: rgba(140, 140, 140, 0.6);
}

.dark .card-scroll-clean {
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.dark .card-scroll-clean::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
}

/* Gradient Fade Scroll Masks (Indicates more content above/below without visual clutter) */
.card-scroll-masked {
    --mask-top: 0px;
    --mask-bottom: 24px;
    mask-image: linear-gradient(
        to bottom,
        transparent 0px,
        black var(--mask-top),
        black calc(100% - var(--mask-bottom)),
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0px,
        black var(--mask-top),
        black calc(100% - var(--mask-bottom)),
        transparent 100%
    );
    transition: mask-image 0.15s ease, -webkit-mask-image 0.15s ease;
}

#staging-card .card-scroll-clean {
    mask-image: none !important;
    -webkit-mask-image: none !important;
}

/* Character Count Bucketing Rules for Questions & Vignettes */
.dynamic-card-text {
    word-break: break-word;
    overflow-wrap: break-word;
    transition: font-size 0.15s ease-out, line-height 0.15s ease-out;
}

/* Short Prompts (< 60 chars): Big, bold, authoritative, centered */
[data-text-length="short"] .dynamic-card-text,
.dynamic-card-text[data-text-length="short"] {
    font-size: 1.35rem;
    line-height: 1.3;
    font-weight: 700;
    text-align: center;
}

/* Medium Prompts (60 - 160 chars): Standard definition / rule, balanced */
[data-text-length="medium"] .dynamic-card-text,
.dynamic-card-text[data-text-length="medium"] {
    font-size: 1.05rem;
    line-height: 1.45;
    font-weight: 600;
    text-align: center;
}

/* Long Prompts (160 - 300 chars): High-density legal conditions, left-aligned */
[data-text-length="long"] .dynamic-card-text,
.dynamic-card-text[data-text-length="long"] {
    font-size: 0.925rem;
    line-height: 1.55;
    font-weight: 500;
    text-align: left;
}

/* Vignettes / Situational Cases (> 300 chars): Case narrative typography */
[data-text-length="vignette"] .dynamic-card-text,
.dynamic-card-text[data-text-length="vignette"] {
    font-size: 0.84rem;
    line-height: 1.6;
    font-weight: 500;
    text-align: left;
    letter-spacing: -0.01em;
}

/* Icon optical alignment helper */
.material-symbols-outlined {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    line-height: 1;
}