/* ===== PTOP LIGHT COLOR SYSTEM ===== */

:root{
--ptop-blue:#0A2F5A;
--ptop-red:#B11226;
--bg:#f8fafc;
--sidebar:#ffffff;
--text:#1f2937;
--muted:#6b7280;
--border:#e5e7eb;
--soft-blue:#eef4ff;
}

/* ===== GLOBAL ===== */

body{
margin:0;
font-family:Inter,Arial,sans-serif;
background:var(--bg);
color:var(--text);
line-height:1.6;
}

/* ===== TOPBAR ===== */

.topbar{
background:white;
padding:16px 40px;
display:flex;
align-items:center;
justify-content:space-between;
border-bottom:1px solid var(--border);
}

.logo img{
height:70px;
}

/* ===== VERSION SWITCHER ===== */

.version-control{
display:flex;
align-items:center;
gap:10px;
}

.version-label{
font-size:13px;
color:var(--muted);
}

.version-select{
padding:7px 12px;
border-radius:8px;
border:1px solid var(--border);
background:white;
font-size:14px;
cursor:pointer;
transition:0.2s;
}

.version-select:hover{
border-color:var(--ptop-blue);
}

.version-select:focus{
outline:none;
border-color:var(--ptop-blue);
box-shadow:0 0 0 3px rgba(10,47,90,0.08);
}

/* ===== LAYOUT ===== */

.layout{
display:flex;
}

/* ===== SIDEBAR ===== */

.sidebar{
width:260px;
background:var(--sidebar);
padding:30px;
border-right:1px solid var(--border);
height:100vh;
position:sticky;
top:0;
}

.sidebar h3{
color:var(--ptop-blue);
margin-bottom:15px;
font-size:16px;
}

.sidebar ul{
list-style:none;
padding:0;
margin:0;
}

.sidebar li{
margin-bottom:10px;
}

.sidebar a{
text-decoration:none;
color:#374151;
font-weight:500;
font-size:14px;
padding:6px 8px;
border-radius:6px;
display:block;
}

.sidebar a:hover{
background:var(--soft-blue);
color:var(--ptop-blue);
}

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

.content{
flex:1;
padding:50px;
max-width:1100px;
}

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

h1{
color:var(--ptop-blue);
font-size:34px;
margin-bottom:10px;
}

h2{
color:var(--ptop-blue);
margin-top:50px;
padding-bottom:6px;
border-bottom:2px solid var(--border);
}

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

table{
border-collapse:collapse;
width:100%;
margin:20px 0;
background:white;
border-radius:8px;
overflow:hidden;
border:1px solid var(--border);
}

th,td{
padding:12px;
border-bottom:1px solid var(--border);
}

th{
background:#f3f6fb;
color:var(--ptop-blue);
font-weight:600;
}

/* ===== CODE BLOCK ===== */

pre{
background:#0f172a;
color:#f9fafb;
padding:18px;
border-radius:8px;
overflow:auto;
font-size:14px;
}

/* ===== WARNING ===== */

.warning{
background:#fff5f5;
border:1px solid #fecaca;
color:#b91c1c;
padding:15px;
border-radius:8px;
margin-bottom:20px;
}

.hidden{
display:none;
}