/* ==========================================================
   CODEEXAI
   GLOBAL STYLE
========================================================== */

/* ==========================
   NOTE: Google Font (Inter) is already loaded via <link> in base.html
   Removed duplicate @import here to avoid loading the font twice
========================== */

/* ==========================
   ROOT VARIABLES
========================== */

:root{

    --primary:#008000;
    --primary-hover:#006400;

    --success:#16A34A;
    --warning:#F59E0B;
    --danger:#DC2626;

    --white:#FFFFFF;

    --background:#F8FAFC;

    --text:#111827;

    --text-light:#6B7280;

    --border:#E5E7EB;

    --radius:12px;

    --shadow-sm:0 2px 8px rgba(0,0,0,.05);

    --shadow:0 10px 30px rgba(0,0,0,.08);

    --shadow-lg:0 20px 45px rgba(0,0,0,.12);

}

/* ==========================
   RESET
========================== */

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

/* ==========================
   BODY
========================== */

body{

    font-family:'Inter',sans-serif;

    background:var(--background);

    color:var(--text);

    font-size:16px;

    line-height:1.7;

    overflow-x:hidden;

}

/* ==========================
   LINKS
========================== */

a{

    text-decoration:none;

    transition:.3s;

}

/* ==========================
   HEADINGS
========================== */

h1,
h2,
h3,
h4,
h5,
h6{

    color:var(--text);

    font-weight:700;

}

p{

    color:var(--text-light);

}

/* ==========================
   CONTAINER
========================== */

.container{

    max-width:1280px;

}

/* ==========================
   BUTTON
========================== */

.btn{

    border-radius:10px;

    padding:10px 22px;

    font-weight:600;

}

.btn-primary{

    background:var(--primary);

    border:none;

}

.btn-primary:hover{

    background:var(--primary-hover);

}

/* ==========================
   FORM
========================== */

.form-control{

    border-radius:10px;

    border:1px solid var(--border);

    min-height:48px;

}

.form-control:focus{

    box-shadow:none;

    border-color:var(--primary);

}

/* ==========================
   CARD
========================== */

.card{

    border:none;

    border-radius:16px;

    box-shadow:var(--shadow);

}

.card:hover{

    box-shadow:var(--shadow-lg);

}

/* ==========================
   TABLE
========================== */

.table{

    background:#fff;

    border-radius:12px;

    overflow:hidden;

}

/* ==========================
   TUTORIAL CONTENT
========================== */

.tutorial-content img{

    max-width:100%;

    border-radius:10px;

}

.tutorial-content table{

    width:100%;

    margin:30px 0;

    border-collapse:collapse;

}

.tutorial-content table,
.tutorial-content th,
.tutorial-content td{

    border:1px solid var(--border);

}

.tutorial-content th{

    background:#F3F4F6;

}

.tutorial-content th,
.tutorial-content td{

    padding:14px;

}

.tutorial-content pre{

    background:#0F172A;

    color:#E2E8F0;

    padding:20px;

    border-radius:12px;

    overflow:auto;

}

.tutorial-content code{

    font-family:Consolas,monospace;

}

/* ==========================
   UTILITY
========================== */

.section{

    padding:80px 0;

}

.section-title{

    font-size:42px;

    font-weight:800;

}

.section-subtitle{

    max-width:700px;

    color:var(--text-light);

}

.main-content{

    min-height:85vh;

}