/* =======================================================
   Law Master
   style.css
   ======================================================= */

/* ===========================
   リセット
=========================== */

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{

    font-size:16px;

    scroll-behavior:smooth;

}

body{

    font-family:
        "Yu Gothic UI",
        "Hiragino Sans",
        sans-serif;

    background:#f4f8fd;

    color:#243447;

    min-height:100vh;

    line-height:1.6;

}

/* ===========================
   共通
=========================== */

button{

    font:inherit;

    cursor:pointer;

    border:none;

    transition:.25s;

}

button:hover{

    transform:translateY(-2px);

}

button:active{

    transform:scale(.97);

}

input,
textarea,
select{

    font:inherit;

}

a{

    text-decoration:none;

    color:inherit;

}

ul{

    list-style:none;

}

/* ===========================
   レイアウト
=========================== */

#app{

    display:flex;

    min-height:100vh;

}

/* ===========================
   サイドバー
=========================== */

#sidebar{

    width:280px;

    background:#ffffff;

    border-right:1px solid #d9e7f5;

    display:flex;

    flex-direction:column;

    padding:28px;

    position:sticky;

    top:0;

    height:100vh;

}

.logo{

    margin-bottom:40px;

}

.logo h1{

    color:#2f80ed;

    font-size:2rem;

    margin-bottom:8px;

}

.logo p{

    color:#6b7b8c;

    font-size:.9rem;

}

/* ===========================
   メニュー
=========================== */

#sidebar nav{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.menu-btn{

    background:#ffffff;

    color:#2f4054;

    padding:15px 18px;

    border-radius:14px;

    text-align:left;

    font-weight:600;

}

.menu-btn:hover{

    background:#edf5ff;

}

.menu-btn.active{

    background:#2f80ed;

    color:#ffffff;

}

/* ===========================
   メイン
=========================== */

#main{

    flex:1;

    padding:40px;

    overflow:auto;

}

/* ===========================
   画面切替
=========================== */

.screen{

    display:none;

    animation:fade .35s ease;

}

.screen.active{

    display:block;

}

@keyframes fade{

    from{

        opacity:0;

        transform:translateY(12px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ===========================
   ページタイトル
=========================== */

.page-header{

    margin-bottom:32px;

}

.page-header h2{

    font-size:2rem;

    margin-bottom:8px;

    color:#243447;

}

.page-header p{

    color:#718096;

}

/* ===========================
   ダッシュボード
=========================== */

.dashboard{

    display:grid;

    grid-template-columns:

        repeat(auto-fit,minmax(220px,1fr));

    gap:24px;

    margin-bottom:36px;

}

.dashboard-card{

    background:#ffffff;

    border-radius:22px;

    padding:26px;

    box-shadow:

        0 12px 28px rgba(0,0,0,.06);

    transition:.25s;

}

.dashboard-card:hover{

    transform:translateY(-6px);

}

.dashboard-card span{

    color:#718096;

    display:block;

    margin-bottom:12px;

}

.dashboard-card strong{

    display:block;

    font-size:2rem;

    color:#2f80ed;

}
/* ===========================
   今日の目標
=========================== */

.goal-card{

    background:#ffffff;

    border-radius:22px;

    padding:28px;

    margin-bottom:36px;

    box-shadow:

        0 12px 28px rgba(0,0,0,.06);

}

.goal-card h3{

    margin-bottom:20px;

    color:#243447;

}

.progress{

    width:100%;

    height:16px;

    background:#e8eef7;

    border-radius:999px;

    overflow:hidden;

}

#goal-progress{

    width:0%;

    height:100%;

    background:linear-gradient(
        90deg,
        #2f80ed,
        #56ccf2
    );

    transition:.4s;

}

#goal-text{

    margin-top:12px;

    color:#718096;

    font-weight:600;

}

/* ===========================
   ホームボタン
=========================== */

.home-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:20px;

    margin-bottom:50px;

}

.primary-btn{

    background:#2f80ed;

    color:#ffffff;

    padding:16px 30px;

    border-radius:16px;

    font-weight:700;

    box-shadow:

        0 10px 24px rgba(47,128,237,.25);

}

.primary-btn:hover{

    background:#2373dc;

}

.secondary-btn{

    background:#ffffff;

    color:#2f80ed;

    border:2px solid #2f80ed;

    padding:16px 30px;

    border-radius:16px;

    font-weight:700;

}

.secondary-btn:hover{

    background:#edf5ff;

}

.danger-btn{

    background:#e74c3c;

    color:#ffffff;

    padding:16px 30px;

    border-radius:16px;

    font-weight:700;

}

.danger-btn:hover{

    background:#cf3f31;

}

/* ===========================
   科目一覧
=========================== */

.subject-grid{

    display:grid;

    grid-template-columns:

        repeat(auto-fit,minmax(240px,1fr));

    gap:28px;

}

.subject-card{

    background:#ffffff;

    border-radius:24px;

    padding:34px;

    text-align:center;

    box-shadow:

        0 12px 28px rgba(0,0,0,.06);

    transition:.25s;

}

.subject-card:hover{

    transform:

        translateY(-8px);

    box-shadow:

        0 20px 40px rgba(47,128,237,.18);

}

.subject-card .icon{

    display:block;

    font-size:3rem;

    margin-bottom:18px;

}

.subject-card h3{

    margin-bottom:12px;

    color:#243447;

}

.subject-card p{

    color:#718096;

    font-size:.95rem;

}

/* ===========================
   学習モード
=========================== */

.mode-grid{

    display:grid;

    grid-template-columns:

        repeat(auto-fit,minmax(220px,1fr));

    gap:24px;

}

.mode-card{

    background:#ffffff;

    border-radius:22px;

    padding:28px;

    text-align:center;

    box-shadow:

        0 12px 28px rgba(0,0,0,.06);

    transition:.25s;

}

.mode-card:hover{

    transform:translateY(-8px);

    box-shadow:

        0 20px 40px rgba(47,128,237,.18);

}

.mode-icon{

    display:block;

    font-size:2.8rem;

    margin-bottom:18px;

}

.mode-card h3{

    margin-bottom:10px;

    color:#243447;

}

.mode-card p{

    color:#718096;

    font-size:.9rem;

}
/* ===========================
   問題画面
=========================== */

.quiz-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:20px;

    margin-bottom:24px;

}

.breadcrumb{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:10px;

    font-weight:600;

    color:#6b7b8c;

}

.quiz-status{

    display:flex;

    gap:16px;

    align-items:center;

}

#question-number{

    background:#2f80ed;

    color:#ffffff;

    padding:8px 16px;

    border-radius:999px;

    font-weight:700;

}

#difficulty{

    background:#fff7df;

    color:#d68910;

    padding:8px 16px;

    border-radius:999px;

    font-weight:700;

}

/* ===========================
   問題プログレスバー
=========================== */

.quiz-progress{

    width:100%;

    height:14px;

    background:#e7edf5;

    border-radius:999px;

    overflow:hidden;

    margin-bottom:30px;

}

#quiz-progress-bar{

    width:0%;

    height:100%;

    background:linear-gradient(
        90deg,
        #2f80ed,
        #56ccf2
    );

    transition:.35s;

}

/* ===========================
   問題カード
=========================== */

.question-card{

    background:#ffffff;

    border-radius:24px;

    padding:40px;

    box-shadow:

        0 15px 35px rgba(0,0,0,.06);

    margin-bottom:32px;

}

.question-type{

    display:inline-block;

    background:#edf5ff;

    color:#2f80ed;

    font-weight:700;

    padding:8px 16px;

    border-radius:999px;

    margin-bottom:24px;

}

#question-title{

    font-size:1.6rem;

    line-height:1.7;

    margin-bottom:36px;

}

/* ===========================
   選択肢
=========================== */

#choice-list{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.choice{

    display:flex;

    align-items:center;

    gap:18px;

    background:#ffffff;

    border:2px solid #dbe7f3;

    border-radius:18px;

    padding:20px;

    cursor:pointer;

    transition:.25s;

}

.choice:hover{

    border-color:#2f80ed;

    background:#edf6ff;

}

.choice.selected{

    background:#dcebff;

    border-color:#2f80ed;

}

.choice.correct{

    background:#eafaf1;

    border-color:#27ae60;

}

.choice.wrong{

    background:#fdecec;

    border-color:#e74c3c;

}

.choice-letter{

    width:42px;

    height:42px;

    border-radius:50%;

    background:#2f80ed;

    color:#ffffff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:700;

    flex-shrink:0;

}

.choice-text{

    flex:1;

    font-size:1rem;

    line-height:1.7;

}

/* ===========================
   解答ボタン
=========================== */

.quiz-actions{

    display:flex;

    justify-content:flex-end;

    gap:18px;

    flex-wrap:wrap;

}

.quiz-actions button{

    min-width:180px;

}

/* ===========================
   解答後アニメーション
=========================== */

.correct-answer{

    animation:correctFlash .45s;

}

.wrong-answer{

    animation:wrongFlash .45s;

}

@keyframes correctFlash{

    0%{

        transform:scale(.96);

    }

    50%{

        transform:scale(1.03);

    }

    100%{

        transform:scale(1);

    }

}

@keyframes wrongFlash{

    0%{

        transform:translateX(-6px);

    }

    25%{

        transform:translateX(6px);

    }

    50%{

        transform:translateX(-6px);

    }

    75%{

        transform:translateX(6px);

    }

    100%{

        transform:translateX(0);

    }

}
/* ===========================
   記述問題
=========================== */

.writing-card{

    background:#ffffff;

    border-radius:24px;

    padding:40px;

    box-shadow:
        0 15px 35px rgba(0,0,0,.06);

}

#writing-question{

    font-size:1.4rem;

    margin-bottom:28px;

    line-height:1.8;

}

#writing-answer{

    width:100%;

    min-height:320px;

    resize:vertical;

    border:2px solid #dbe7f3;

    border-radius:18px;

    padding:22px;

    font-size:1rem;

    line-height:1.8;

    transition:.25s;

    background:#fcfdff;

}

#writing-answer:focus{

    outline:none;

    border-color:#2f80ed;

    box-shadow:
        0 0 0 4px rgba(47,128,237,.12);

}

.writing-actions{

    margin-top:28px;

    display:flex;

    justify-content:flex-end;

}

/* ===========================
   解説画面
=========================== */

.explanation-card{

    background:#ffffff;

    border-radius:24px;

    padding:40px;

    box-shadow:
        0 15px 35px rgba(0,0,0,.06);

}

.result-message{

    font-size:2rem;

    font-weight:700;

    text-align:center;

    margin-bottom:32px;

    color:#27ae60;

}

.explanation-section{

    margin-bottom:30px;

    padding-bottom:24px;

    border-bottom:1px solid #edf2f7;

}

.explanation-section:last-of-type{

    border-bottom:none;

}

.explanation-section h3{

    color:#2f80ed;

    margin-bottom:14px;

    font-size:1.15rem;

}

.explanation-section p{

    line-height:1.9;

}

.explanation-section ul{

    margin-left:24px;

    list-style:disc;

}

.related-section{

    margin-top:40px;

}

#related-links{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:16px;

}

.related-tag{

    background:#edf5ff;

    color:#2f80ed;

    padding:10px 18px;

    border-radius:999px;

    font-weight:600;

}

.explanation-buttons{

    display:flex;

    justify-content:space-between;

    gap:20px;

    flex-wrap:wrap;

    margin-top:42px;

}

/* ===========================
   結果画面
=========================== */

.result-card{

    background:#ffffff;

    border-radius:24px;

    padding:40px;

    box-shadow:
        0 15px 35px rgba(0,0,0,.06);

}

.score-circle{

    width:180px;

    height:180px;

    border-radius:50%;

    margin:0 auto 40px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:
        linear-gradient(
            135deg,
            #2f80ed,
            #56ccf2
        );

    color:#ffffff;

    font-size:2.4rem;

    font-weight:700;

    box-shadow:
        0 18px 40px rgba(47,128,237,.25);

}

.result-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(220px,1fr));

    gap:24px;

    margin-bottom:40px;

}

.result-item{

    background:#f8fbff;

    border-radius:18px;

    padding:26px;

    text-align:center;

}

.result-item h3{

    color:#718096;

    margin-bottom:12px;

}

.result-item strong{

    display:block;

    font-size:2rem;

    color:#2f80ed;

}

.result-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}
/* ===========================
   復習画面
=========================== */

#review-list{

    display:grid;

    gap:24px;

}

.review-card{

    background:#ffffff;

    border-radius:22px;

    padding:28px;

    box-shadow:
        0 12px 28px rgba(0,0,0,.06);

    border-left:8px solid #f39c12;

    transition:.25s;

}

.review-card:hover{

    transform:translateY(-4px);

}

.review-title{

    font-size:1.2rem;

    font-weight:700;

    margin-bottom:12px;

}

.review-info{

    color:#718096;

    line-height:1.8;

}

.review-actions{

    display:flex;

    gap:16px;

    margin-top:20px;

    flex-wrap:wrap;

}

/* ===========================
   検索画面
=========================== */

.search-box{

    display:flex;

    gap:18px;

    margin-bottom:30px;

    flex-wrap:wrap;

}

#search-input{

    flex:1;

    min-width:280px;

    padding:18px 22px;

    border-radius:16px;

    border:2px solid #dbe7f3;

    background:#ffffff;

    transition:.25s;

}

#search-input:focus{

    outline:none;

    border-color:#2f80ed;

    box-shadow:
        0 0 0 4px rgba(47,128,237,.12);

}

#search-result{

    display:grid;

    gap:20px;

}

.search-item{

    background:#ffffff;

    padding:24px;

    border-radius:20px;

    box-shadow:
        0 10px 24px rgba(0,0,0,.05);

    transition:.25s;

}

.search-item:hover{

    transform:translateY(-3px);

}

.search-keyword{

    color:#2f80ed;

    font-weight:700;

    margin-bottom:10px;

}

.search-description{

    color:#5f6f82;

    line-height:1.8;

}

/* ===========================
   学習記録
=========================== */

.statistics-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(220px,1fr));

    gap:24px;

    margin-bottom:36px;

}

.stat-card{

    background:#ffffff;

    border-radius:22px;

    padding:28px;

    text-align:center;

    box-shadow:
        0 12px 28px rgba(0,0,0,.06);

}

.stat-card h3{

    color:#718096;

    margin-bottom:14px;

    font-size:1rem;

}

.stat-card strong{

    font-size:2rem;

    color:#2f80ed;

}

.chart-area{

    background:#ffffff;

    border-radius:24px;

    padding:36px;

    box-shadow:
        0 12px 28px rgba(0,0,0,.06);

}

.chart-area h3{

    margin-bottom:28px;

}

#subject-chart{

    width:100%;

    min-height:360px;

    border-radius:18px;

    background:
        repeating-linear-gradient(
            to top,
            #f5f8fc,
            #f5f8fc 39px,
            #e7edf5 40px
        );

    display:flex;

    justify-content:center;

    align-items:center;

    color:#9aa8b7;

    font-size:1.1rem;

}

/* ===========================
   設定
=========================== */

.setting-group{

    background:#ffffff;

    border-radius:22px;

    padding:30px;

    margin-bottom:28px;

    box-shadow:
        0 12px 28px rgba(0,0,0,.06);

}

.setting-group h3{

    margin-bottom:20px;

    color:#243447;

}

.setting-group label{

    display:block;

    margin-bottom:14px;

    color:#5f6f82;

}

.setting-group input[type="number"]{

    width:180px;

    padding:14px;

    border:2px solid #dbe7f3;

    border-radius:14px;

    margin-top:10px;

}

.setting-group input[type="checkbox"]{

    margin-right:10px;

    transform:scale(1.2);

}

.setting-group button{

    margin-right:14px;

    margin-top:18px;

}
/* =========================================================
   Question Card
========================================================= */

.question-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
    margin-bottom: 20px;
}

.question-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.meta-badge {
    font-size: 12px;
    font-weight: 700;
    padding: 6px 10px;
    border-radius: 999px;
    background: #eef2ff;
    color: #3730a3;
}

.question-title {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.7;
    color: #111827;
    margin-bottom: 18px;
}

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

.choice-btn {
    width: 100%;
    text-align: left;
    border: 2px solid #e5e7eb;
    background: #ffffff;
    color: #111827;
    border-radius: 14px;
    padding: 14px 16px;
    font-size: 15px;
    line-height: 1.6;
    cursor: pointer;
    transition: 0.2s ease;
}

.choice-btn:hover {
    border-color: #6366f1;
    background: #f5f7ff;
}

.choice-btn.selected {
    border-color: #4f46e5;
    background: #eef2ff;
    font-weight: 700;
}

.choice-btn.correct {
    border-color: #16a34a;
    background: #ecfdf5;
    color: #166534;
    font-weight: 800;
}

.choice-btn.wrong {
    border-color: #dc2626;
    background: #fef2f2;
    color: #991b1b;
    font-weight: 800;
}

.answer-area {
    margin-top: 20px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.answer-btn,
.next-btn,
.back-btn {
    border: none;
    border-radius: 12px;
    padding: 12px 18px;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    transition: 0.2s ease;
}

.answer-btn {
    background: #4f46e5;
    color: #ffffff;
}

.next-btn {
    background: #111827;
    color: #ffffff;
}

.back-btn {
    background: #e5e7eb;
    color: #111827;
}

.answer-btn:hover,
.next-btn:hover,
.back-btn:hover {
    transform: translateY(-1px);
    opacity: 0.9;
}
/* =========================================================
   Explanation Panel
========================================================= */

.explanation-card {
    margin-top: 24px;
    background: #ffffff;
    border-left: 6px solid #4f46e5;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

.explanation-title {
    font-size: 18px;
    font-weight: 800;
    color: #312e81;
    margin-bottom: 16px;
}

.explanation-section {
    margin-bottom: 18px;
}

.explanation-section:last-child {
    margin-bottom: 0;
}

.explanation-label {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    color: #4338ca;
    margin-bottom: 6px;
}

.explanation-text {
    font-size: 15px;
    line-height: 1.8;
    color: #374151;
}

.explanation-list {
    margin: 8px 0 0 20px;
    color: #374151;
}

.explanation-list li {
    margin-bottom: 6px;
    line-height: 1.7;
}

.article-box {
    display: inline-block;
    margin-top: 8px;
    padding: 6px 12px;
    background: #eef2ff;
    color: #3730a3;
    border-radius: 999px;
    font-weight: 700;
    font-size: 13px;
}

.keyword-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.keyword-tag {
    background: #f3f4f6;
    color: #374151;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
}

.related-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.related-tag {
    background: #dcfce7;
    color: #166534;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
}
/* =========================================================
   Result & Progress
========================================================= */

.result-card {
    margin-top: 24px;
    background: #ffffff;
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.result-title {
    font-size: 24px;
    font-weight: 800;
    text-align: center;
    color: #111827;
    margin-bottom: 24px;
}

.score-circle {
    width: 140px;
    height: 140px;
    margin: 0 auto 24px;
    border-radius: 50%;
    border: 8px solid #4f46e5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 800;
    color: #4f46e5;
    background: #f8faff;
}

.score-detail {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.score-item {
    flex: 1;
    min-width: 180px;
    background: #f9fafb;
    border-radius: 14px;
    padding: 16px;
    text-align: center;
}

.score-label {
    display: block;
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 6px;
}

.score-value {
    font-size: 24px;
    font-weight: 800;
    color: #111827;
}

.progress-wrapper {
    margin: 28px 0;
}

.progress-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #374151;
}

.progress-bar {
    width: 100%;
    height: 14px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #4f46e5, #6366f1);
    transition: width 0.3s ease;
}

.retry-btn {
    display: block;
    margin: 24px auto 0;
    padding: 14px 28px;
    border: none;
    border-radius: 12px;
    background: #4f46e5;
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: 0.2s ease;
}

.retry-btn:hover {
    background: #4338ca;
    transform: translateY(-2px);
}
/* =========================================================
   Utility
========================================================= */

.hidden {
    display: none !important;
}

.center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.mt-8 {
    margin-top: 8px;
}

.mt-16 {
    margin-top: 16px;
}

.mt-24 {
    margin-top: 24px;
}

.mb-8 {
    margin-bottom: 8px;
}

.mb-16 {
    margin-bottom: 16px;
}

.mb-24 {
    margin-bottom: 24px;
}

/* =========================================================
   Footer
========================================================= */

.footer {
    margin-top: 48px;
    padding: 24px;
    text-align: center;
    color: #6b7280;
    font-size: 14px;
}

/* =========================================================
   Scrollbar
========================================================= */

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f3f4f6;
}

::-webkit-scrollbar-thumb {
    background: #c7d2fe;
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: #818cf8;
}

/* =========================================================
   Responsive
========================================================= */

@media (max-width: 768px) {

    body {
        padding: 12px;
    }

    .container {
        padding: 16px;
    }

    .question-card,
    .result-card,
    .explanation-card {
        padding: 16px;
    }

    .question-title {
        font-size: 16px;
    }

    .choice-btn {
        font-size: 14px;
        padding: 12px;
    }

    .answer-area {
        flex-direction: column;
    }

    .answer-btn,
    .next-btn,
    .back-btn,
    .retry-btn {
        width: 100%;
    }

    .score-detail {
        flex-direction: column;
    }

    .score-circle {
        width: 120px;
        height: 120px;
        font-size: 28px;
    }

    .keyword-group,
    .related-group,
    .question-meta {
        gap: 6px;
    }
}

/* =========================================================
   Mobile Menu Fix
========================================================= */

@media (max-width: 768px) {

    .menu-screen,
    .home-screen,
    .category-screen {
        padding: 12px;
    }

    .menu-grid,
    .category-grid,
    .subject-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .menu-card,
    .category-card,
    .subject-card {
        padding: 14px;
        border-radius: 14px;
        min-height: auto;
    }

    .menu-card h3,
    .category-card h3,
    .subject-card h3 {
        font-size: 16px;
        margin-bottom: 6px;
    }

    .menu-card p,
    .category-card p,
    .subject-card p {
        font-size: 13px;
        line-height: 1.5;
    }

    .app-title,
    .screen-title {
        font-size: 22px;
        margin-bottom: 12px;
    }

    .app-subtitle,
    .screen-subtitle {
        font-size: 14px;
        margin-bottom: 16px;
    }
}

/* =========================================================
   End of style.css
========================================================= */