/* GENERAL RESET */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background-color: #0d1117; color: #c9d1d9;
    font-family: 'Inter', sans-serif;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

/* LAYOUT CONTAINER */
.doc-layout { display: flex; min-height: 100vh; }

/* === SIDEBAR NAVIGATION === */
.menu-btn {
    position: fixed; top: 20px; left: 20px; z-index: 1000;
    background: #161b22; color: #58a6ff; border: 1px solid #30363d;
    padding: 8px 12px; border-radius: 6px; cursor: pointer;
    font-size: 1.2rem; transition: 0.3s;
}
.menu-btn:hover { background: #1f6feb; color: white; border-color: #1f6feb; }

.sidebar {
    width: 250px; background: #050505; border-right: 1px solid #30363d;
    padding: 20px; padding-top: 80px; /* Space for button */
    position: fixed; height: 100%; top: 0; left: 0;
    transition: transform 0.3s ease; z-index: 900;
}

.brand a {
    color: #58a6ff; font-family: 'Fira Code'; font-weight: bold;
    text-decoration: none; display: block; margin-bottom: 30px; font-size: 1.1rem;
}

.sidebar ul { list-style: none; }
.sidebar li { margin-bottom: 10px; }

.sidebar a {
    display: block; color: #8b949e; text-decoration: none;
    padding: 5px 0; font-size: 0.9rem; transition: 0.2s;
}
.sidebar a:hover, .sidebar a.active { color: white; transform: translateX(5px); }
.sidebar a.highlight { color: #00ff41; font-weight: bold; margin-bottom: 15px; }


/* === MAIN CONTENT === */
.content {
    margin-left: 250px; padding: 40px 60px; width: 100%;
    transition: margin-left 0.3s ease; max-width: 1000px;
}

/* Toggle Logic Classes */
body.menu-closed .sidebar { transform: translateX(-250px); }
body.menu-closed .content { margin-left: 0; padding: 40px 100px; max-width: 100%; }

/* Typography */
header { margin-bottom: 40px; }
h1 { font-family: 'Fira Code'; color: white; margin: 15px 0; font-size: 2.5rem; }
.lead { color: #8b949e; font-size: 1.1rem; margin-bottom: 30px; }
.badge { background: #1f6feb; color: white; font-size: 0.7rem; padding: 3px 8px; border-radius: 10px; font-family: 'Fira Code'; margin-right: 10px; }
.badge.green { background: #238636; }

hr { border: 0; border-top: 1px solid #30363d; margin: 40px 0; }
h2 { color: white; margin-bottom: 20px; font-size: 1.5rem; border-bottom: 1px solid #30363d; padding-bottom: 10px; }
p { margin-bottom: 15px; line-height: 1.7; }


/* === LIVE TOOL UI (NEW) === */
.tool-section { margin-bottom: 50px; }
.tool-grid { display: flex; gap: 20px; flex-wrap: wrap; }

.panel {
    background: #161b22; border: 1px solid #30363d; padding: 25px;
    border-radius: 8px; flex: 1; min-width: 300px;
}

/* Input Panel */
.input-panel h3 { font-family: 'Fira Code'; font-size: 1rem; margin-bottom: 15px; color: #58a6ff; }
textarea {
    width: 100%; height: 120px; background: #0d1117; border: 1px solid #30363d;
    color: #00ff41; font-family: 'Fira Code'; padding: 10px; border-radius: 6px;
    font-size: 0.85rem; resize: none; margin-bottom: 20px;
}
textarea:focus { outline: none; border-color: #58a6ff; }

.controls { display: flex; gap: 20px; margin-bottom: 20px; }
.slider-group { flex: 1; }
.slider-group label { display: block; font-size: 0.75rem; color: #8b949e; margin-bottom: 8px; font-family: 'Fira Code'; }
input[type=range] { width: 100%; accent-color: #58a6ff; cursor: pointer; }

.btn-group { display: flex; gap: 10px; }
.btn-action {
    flex: 1; padding: 12px; border: none; border-radius: 6px; font-weight: bold;
    cursor: pointer; font-family: 'Fira Code'; transition: 0.2s; display: flex;
    justify-content: center; align-items: center; gap: 8px;
}
.start { background: #238636; color: white; }
.start:hover { background: #2ea043; transform: scale(1.02); }
.stop { background: #da3633; color: white; }
.stop:hover { background: #f85149; transform: scale(1.02); }

/* Output Panel */
.output-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; }

.screen-frame {
    width: 240px; height: 240px; background: white; padding: 10px;
    border: 5px solid #30363d; position: relative; border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}
#qrcode img { display: block; width: 100%; height: auto; }

.overlay {
    position: absolute; top:0; left:0; width:100%; height:100%;
    background: rgba(13, 17, 23, 0.95); color: #58a6ff;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Fira Code'; font-size: 0.9rem; text-align: center;
    font-weight: bold; z-index: 10;
}
.status-bar {
    width: 100%; margin-top: 20px; display: flex; justify-content: space-between;
    font-family: 'Fira Code'; font-size: 0.8rem; color: #8b949e; 
    border-top: 1px solid #30363d; padding-top: 15px;
}


/* === DOCUMENTATION STYLES === */
/* Workflow Box */
.workflow-box { 
    background: #161b22; padding: 20px; border-left: 3px solid #58a6ff; 
    font-family: 'Fira Code'; font-size: 0.9rem; color: #fff; text-align: center; 
}
.arrow { color: #58a6ff; margin: 5px 0; }

/* Code Blocks */
.code-block { background: #050505; padding: 15px; border-radius: 6px; font-family: 'Fira Code', monospace; font-size: 0.9rem; border: 1px solid #30363d; }
.cmd { color: #00ff41; }
.output { color: #8b949e; display: block; }

/* Source Code Window */
.code-window { background: #0d1117; border: 1px solid #30363d; border-radius: 6px; overflow: hidden; margin: 20px 0; }
.window-bar { background: #161b22; padding: 10px; border-bottom: 1px solid #30363d; }
.dot { height: 10px; width: 10px; border-radius: 50%; display: inline-block; margin-right: 5px; }
.red { background: #ff5f56; } .yellow { background: #ffbd2e; } .green { background: #27c93f; }
.filename { color: #8b949e; font-family: 'Fira Code'; font-size: 0.8rem; margin-left: 10px; }

pre { padding: 20px; overflow-x: auto; margin: 0; }
code { font-family: 'Fira Code', monospace; font-size: 0.9rem; color: #e0e0e0; }

.kwd { color: #ff7b72; } .func { color: #d2a8ff; } .str { color: #a5d6ff; } .num { color: #79c0ff; } .comment { color: #8b949e; font-style: italic; }

/* Download Section */
.center-box { text-align: center; margin-top: 50px; background: #161b22; padding: 40px; border-radius: 8px; }
.btn-primary { display: inline-block; background: #238636; color: white; padding: 12px 25px; text-decoration: none; border-radius: 6px; font-weight: bold; margin-top: 15px; transition: 0.3s; }
.btn-primary:hover { background: #2ea043; transform: scale(1.05); }

footer { margin-top: 50px; color: #484f58; font-size: 0.8rem; text-align: center; }

/* Mobile Logic */
@media (max-width: 768px) {
    .content { margin-left: 0; padding: 20px; padding-top: 70px; }
    .sidebar { transform: translateX(-250px); } 
    body.menu-closed .sidebar { transform: translateX(0); }
    .tool-grid { flex-direction: column; }
}