/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', 'Helvetica', sans-serif;
    background: linear-gradient(135deg, rgb(20, 30, 48) 0%, rgb(36, 59, 85) 100%);
    color: rgb(240, 240, 245);
    line-height: 1.6;
    min-height: 100vh;
}

/* Container */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

/* Header */
header {
    background: linear-gradient(135deg, rgb(31, 58, 147) 0%, rgb(42, 82, 152) 100%);
    padding: 40px;
    text-align: center;
    border-radius: 15px;
    border: 3px solid rgb(100, 149, 237);
    margin-bottom: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

header h1 {
    font-size: 3em;
    font-weight: bold;
    color: rgb(255, 255, 255);
    margin-bottom: 15px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

header h2 {
    font-size: 1.8em;
    font-weight: bold;
    color: rgb(173, 216, 230);
    margin-bottom: 20px;
}

.print-btn {
    background: rgb(46, 125, 50);
    color: rgb(255, 255, 255);
    border: 2px solid rgb(76, 175, 80);
    padding: 12px 30px;
    font-size: 1.1em;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.print-btn:hover {
    background: rgb(76, 175, 80);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
}

/* Navigation */
.topic-nav {
    background: linear-gradient(135deg, rgb(25, 42, 86) 0%, rgb(38, 70, 83) 100%);
    padding: 30px;
    border-radius: 12px;
    border: 3px solid rgb(70, 130, 180);
    margin-bottom: 30px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.topic-nav h3 {
    font-size: 2em;
    font-weight: bold;
    color: rgb(255, 215, 0);
    margin-bottom: 20px;
    text-align: center;
}

.nav-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.nav-buttons button {
    background: linear-gradient(135deg, rgb(30, 144, 255) 0%, rgb(65, 105, 225) 100%);
    color: rgb(255, 255, 255);
    border: 2px solid rgb(100, 149, 237);
    padding: 15px 20px;
    font-size: 1em;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.nav-buttons button:hover {
    background: linear-gradient(135deg, rgb(65, 105, 225) 0%, rgb(30, 144, 255) 100%);
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5);
}

/* Topic Sections */
.topic-section {
    background: linear-gradient(135deg, rgb(40, 44, 52) 0%, rgb(50, 55, 64) 100%);
    padding: 40px;
    border-radius: 12px;
    border: 3px solid rgb(95, 158, 160);
    margin-bottom: 30px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
}

.topic-section h2 {
    font-size: 2.5em;
    font-weight: bold;
    color: rgb(255, 215, 0);
    margin-bottom: 25px;
    border-bottom: 4px solid rgb(255, 215, 0);
    padding-bottom: 15px;
}

.content-box h3 {
    font-size: 1.8em;
    font-weight: bold;
    color: rgb(135, 206, 250);
    margin-top: 25px;
    margin-bottom: 15px;
}

.content-box p {
    font-size: 1.1em;
    font-weight: bold;
    color: rgb(240, 240, 245);
    margin-bottom: 15px;
}

.content-box ul {
    margin-left: 30px;
    margin-bottom: 20px;
}

.content-box ul li {
    font-size: 1.1em;
    font-weight: bold;
    color: rgb(240, 240, 245);
    margin-bottom: 10px;
}

/* Problem Boxes */
.problem-box {
    background: linear-gradient(135deg, rgb(25, 25, 35) 0%, rgb(35, 35, 50) 100%);
    padding: 25px;
    border-radius: 10px;
    border: 3px solid rgb(255, 140, 0);
    margin: 20px 0;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.problem-box p {
    font-weight: bold;
    color: rgb(240, 240, 245);
}

.problem-box strong {
    color: rgb(255, 215, 0);
}

/* Formula and Calculation Boxes */
.formula-box, .calculation-box {
    background: linear-gradient(135deg, rgb(47, 79, 79) 0%, rgb(60, 90, 90) 100%);
    padding: 20px;
    border-radius: 8px;
    border: 2px solid rgb(32, 178, 170);
    margin: 20px 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.formula-box p, .calculation-box p {
    font-size: 1.2em;
    font-weight: bold;
    color: rgb(255, 255, 255);
    margin-bottom: 10px;
}

.entry-box {
    background: linear-gradient(135deg, rgb(30, 30, 45) 0%, rgb(45, 45, 60) 100%);
    padding: 15px;
    border-left: 5px solid rgb(50, 205, 50);
    margin: 15px 0;
}

.entry-box p {
    font-weight: bold;
    color: rgb(240, 240, 245);
    margin: 5px 0;
}

/* Tables */
.accounting-table, .calculation-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    background: rgb(25, 25, 40);
    border: 3px solid rgb(70, 130, 180);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.accounting-table thead, .calculation-table thead {
    background: linear-gradient(135deg, rgb(31, 58, 147) 0%, rgb(42, 82, 152) 100%);
}

.accounting-table th, .calculation-table th {
    padding: 15px;
    text-align: center;
    font-weight: bold;
    font-size: 1.1em;
    color: rgb(255, 255, 255);
    border: 2px solid rgb(70, 130, 180);
}

.accounting-table td, .calculation-table td {
    padding: 12px;
    border: 2px solid rgb(70, 130, 180);
    font-weight: bold;
    color: rgb(240, 240, 245);
}

.accounting-table tbody tr:nth-child(even), .calculation-table tbody tr:nth-child(even) {
    background: rgb(35, 35, 50);
}

.accounting-table tbody tr:nth-child(odd), .calculation-table tbody tr:nth-child(odd) {
    background: rgb(30, 30, 45);
}

.total-row {
    background: linear-gradient(135deg, rgb(25, 42, 86) 0%, rgb(38, 70, 83) 100%) !important;
    font-weight: bold;
}

.total-row td {
    font-size: 1.15em;
    color: rgb(255, 215, 0) !important;
}

/* Flowchart Styles */
.flowchart-container {
    background: linear-gradient(135deg, rgb(245, 245, 250) 0%, rgb(230, 230, 240) 100%);
    padding: 30px;
    border-radius: 12px;
    border: 3px solid rgb(100, 149, 237);
    overflow-x: auto;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
}

.flowchart-start, .flowchart-end {
    fill: rgb(46, 125, 50);
    stroke: rgb(27, 94, 32);
    stroke-width: 3;
}

.flowchart-process {
    fill: rgb(30, 144, 255);
    stroke: rgb(0, 105, 217);
    stroke-width: 3;
}

.flowchart-decision {
    fill: rgb(255, 152, 0);
    stroke: rgb(230, 81, 0);
    stroke-width: 3;
}

.flowchart-arrow {
    stroke: rgb(0, 0, 0);
    stroke-width: 3;
    fill: none;
}

.flowchart-arrowhead {
    fill: rgb(0, 0, 0);
}

.flowchart-text {
    font-size: 16px;
    font-weight: bold;
    fill: rgb(255, 255, 255);
}

.flowchart-label {
    font-size: 14px;
    font-weight: bold;
    fill: rgb(0, 0, 0);
}

/* Mind Map Styles */
.mindmap-container {
    background: linear-gradient(135deg, rgb(250, 250, 255) 0%, rgb(240, 240, 250) 100%);
    padding: 30px;
    border-radius: 12px;
    border: 3px solid rgb(147, 112, 219);
    overflow-x: auto;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
}

.mindmap-center {
    fill: rgb(255, 69, 0);
    stroke: rgb(178, 34, 34);
    stroke-width: 4;
}

.mindmap-branch1 {
    fill: rgb(30, 144, 255);
    stroke: rgb(0, 105, 217);
    stroke-width: 3;
}

.mindmap-branch2 {
    fill: rgb(50, 205, 50);
    stroke: rgb(34, 139, 34);
    stroke-width: 3;
}

.mindmap-branch3 {
    fill: rgb(255, 140, 0);
    stroke: rgb(204, 85, 0);
    stroke-width: 3;
}

.mindmap-branch4 {
    fill: rgb(138, 43, 226);
    stroke: rgb(102, 0, 204);
    stroke-width: 3;
}

.mindmap-branch5 {
    fill: rgb(220, 20, 60);
    stroke: rgb(178, 34, 34);
    stroke-width: 3;
}

.mindmap-branch6 {
    fill: rgb(70, 130, 180);
    stroke: rgb(25, 25, 112);
    stroke-width: 3;
}

.mindmap-branch7 {
    fill: rgb(255, 215, 0);
    stroke: rgb(184, 134, 11);
    stroke-width: 3;
}

.mindmap-branch8 {
    fill: rgb(32, 178, 170);
    stroke: rgb(0, 128, 128);
    stroke-width: 3;
}

.mindmap-line {
    stroke: rgb(0, 0, 0);
    stroke-width: 3;
    fill: none;
}

.mindmap-subline {
    stroke: rgb(100, 100, 100);
    stroke-width: 2;
    fill: none;
}

.mindmap-text-center {
    font-size: 20px;
    font-weight: bold;
    fill: rgb(255, 255, 255);
}

.mindmap-text {
    font-size: 16px;
    font-weight: bold;
    fill: rgb(255, 255, 255);
}

.mindmap-text-small {
    font-size: 13px;
    font-weight: bold;
    fill: rgb(0, 0, 0);
}

.mindmap-leaf {
    fill: rgb(240, 248, 255);
    stroke: rgb(70, 130, 180);
    stroke-width: 2;
}

/* Roadmap Styles */
.roadmap-container {
    background: linear-gradient(135deg, rgb(255, 250, 240) 0%, rgb(255, 245, 230) 100%);
    padding: 30px;
    border-radius: 12px;
    border: 3px solid rgb(218, 165, 32);
    overflow-x: auto;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
}

.roadmap-timeline {
    stroke: rgb(184, 134, 11);
    stroke-width: 6;
}

.roadmap-milestone {
    fill: rgb(255, 140, 0);
    stroke: rgb(255, 215, 0);
    stroke-width: 4;
}

.roadmap-box-right {
    fill: rgb(255, 255, 255);
    stroke: rgb(70, 130, 180);
    stroke-width: 3;
    rx: 10;
}

.roadmap-number {
    font-size: 20px;
    font-weight: bold;
    fill: rgb(255, 0, 0);
}

.roadmap-title {
    font-size: 18px;
    font-weight: bold;
    fill: rgb(0, 0, 139);
}

.roadmap-desc {
    font-size: 14px;
    font-weight: bold;
    fill: rgb(47, 79, 79);
}

/* Footer */
footer {
    background: linear-gradient(135deg, rgb(31, 58, 147) 0%, rgb(42, 82, 152) 100%);
    padding: 30px;
    border-radius: 12px;
    border: 3px solid rgb(100, 149, 237);
    margin-top: 40px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
}

.disclaimer {
    text-align: center;
}

.disclaimer p {
    font-size: 1.1em;
    font-weight: bold;
    color: rgb(255, 255, 255);
    margin-bottom: 15px;
}

/* Print Styles */
@media print {
    body {
        background: white;
        color: black;
    }
    
    .print-btn {
        display: none;
    }
    
    .topic-nav {
        display: none;
    }
    
    .topic-section {
        page-break-inside: avoid;
        border: 2px solid black;
        background: white;
    }
    
    .topic-section h2 {
        color: black;
        border-bottom: 3px solid black;
    }
    
    .content-box h3 {
        color: black;
    }
    
    .problem-box {
        border: 2px solid black;
        background: white;
    }
    
    .accounting-table, .calculation-table {
        border: 2px solid black;
    }
    
    .accounting-table th, .calculation-table th,
    .accounting-table td, .calculation-table td {
        border: 1px solid black;
        color: black;
    }
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Responsive Design */
@media (max-width: 768px) {
    header h1 {
        font-size: 2em;
    }
    
    header h2 {
        font-size: 1.3em;
    }
    
    .nav-buttons {
        grid-template-columns: 1fr;
    }
    
    .topic-section {
        padding: 20px;
    }
    
    .topic-section h2 {
        font-size: 1.8em;
    }
    
    .flowchart-container, .mindmap-container, .roadmap-container {
        padding: 15px;
    }
}