@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root{
 --primary: #38bdf8;
 --bg:#0b1220;
 --bg2:#020617;
 --card:#0f172a;
 --border:#1e293b;
 --accent:#38bdf8;
 --text:#e5e7eb;
 --muted:#94a3b8;
 --home:#8b5cf6;
}

*{box-sizing:border-box}

body{
 margin:0;
 font-family:'Inter',sans-serif;
 background:var(--bg);
 color:var(--text);
 display:flex;
 min-height:100vh;
}

.developer-note {
    position: fixed;
    bottom: 20px;
    right: 20px;
    opacity: 0.7;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    background: rgba(26, 22, 48, 0.8);
    padding: 8px 15px;
    border-radius: 20px;
    border: 1px solid var(--primary);
    backdrop-filter: blur(5px);
}

.developer-note:hover {
    opacity: 1;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(106, 0, 255, 0.3);
}

.sidebar{
 width:280px;
 background:linear-gradient(180deg,var(--bg2),#020617);
 padding:20px;
 overflow-y:auto;
 border-right:1px solid var(--border);
}

.sidebar h2{
 font-size:14px;
 text-transform:uppercase;
 letter-spacing:1px;
 color:var(--muted);
 margin:20px 0 10px;
}

.sidebar a{
 display:block;
 padding:8px 10px;
 border-radius:8px;
 color:var(--text);
 text-decoration:none;
 font-size:14px;
 transition:.15s;
}

.sidebar a:hover{
 background:var(--card);
 color:var(--accent);
}

.sidebar input{
 width:100%;
 padding:10px 12px;
 border-radius:10px;
 border:1px solid var(--border);
 background:var(--card);
 color:var(--text);
 margin-bottom:15px;
}

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

.sidebar-header {
  padding: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar-brand:hover .sidebar-title {
  color: #9fb0ff;
}

.sidebar-logo {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.sidebar-title {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1;
  color: #d6dcff;
  position: relative;
  top: -10px;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  cursor: pointer;
  border-radius: 6px;
  font-weight: 600;
  transition: background 0.2s;
}

.section-header:hover {
  background: rgba(255,255,255,0.05);
}

.section-arrow {
  transition: transform 0.25s;
}

.section-header.open .section-arrow {
  transform: rotate(0deg);
}

.section-content {
  margin-top: 6px;
  padding-left: 14px;
}

.nav-link {
  display: flex;
  padding: 6px 10px;
  border-radius: 5px;
  margin-bottom: 4px;
}

.nav-link.active {
  background: rgba(100,150,255,0.15);
}

.nav-item {
  transition: transform 0.2s;
}

.nav-link:hover .nav-item {
  transform: translateX(4px);
}

main{
 flex:1;
 padding:40px;
 max-width:1100px;
}

article{
 background:var(--card);
 border:1px solid var(--border);
 border-radius:16px;
 padding:40px;
 box-shadow:0 10px 40px rgba(0,0,0,.3);
}

article h1{
 font-size:32px;
 margin-top:0;
}

article h2{
 margin-top:40px;
 border-bottom:1px solid var(--border);
 padding-bottom:8px;
}

article p,li{
 line-height:1.8;
 color:#d1d5db;
}

code{
 background:#020617;
 padding:3px 6px;
 border-radius:6px;
 font-size:90%;
}

pre{
 background:#020617;
 padding:15px;
 border-radius:12px;
 overflow:auto;
}

.editor textarea{
 font-family:monospace;
}

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

::-webkit-scrollbar-thumb{
 background:#1e293b;
 border-radius:4px;
}

.home-link {
  background: rgba(139,92,246,.12);
  border-left: 3px solid var(--home);
  color: #ddd6fe;
  font-weight: 600;
}

.home-link:hover {
  background: rgba(139,92,246,.2);
}

.home-link.active {
  background: rgba(139,92,246,.25);
  color: #ede9fe;
}

.sidebar a.active,
.sub-item.active {
  background: var(--card);
  color: var(--accent);
  font-weight: 600;
  border-left: 3px solid var(--accent);
}

.folder {
  margin-top: 6px;
}

.folder-header {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 14px;
}

.folder-header:hover {
  background: var(--card);
}

.arrow {
  font-size: 12px;
  color: var(--muted);
}

.folder-content {
  margin-left: 18px;
}

.sub-item {
  display: block;
  padding: 4px 10px;
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
  border-radius: 6px;
}

.sub-item:hover {
  background: var(--card);
  color: var(--accent);
}

.sidebar a.active,
.sub-item.active {
  background: var(--card);
  color: var(--accent);
  font-weight: 600;
  border-left: 3px solid var(--accent);
}

.hint {
  padding: 16px 18px;
  border-radius: 12px;
  margin: 20px 0;
  font-size: 14px;
  line-height: 1.7;
  border-left: 4px solid;
  background: rgba(255,255,255,.03);
}

.hint-success {
  border-color: #22c55e;
  background: rgba(34,197,94,.12);
  color: #dcfce7;
}

.hint-info {
  border-color: #38bdf8;
  background: rgba(56,189,248,.12);
  color: #e0f2fe;
}

.hint-warning {
  border-color: #facc15;
  background: rgba(250,204,21,.12);
  color: #fef9c3;
}

.hint-danger {
  border-color: #ef4444;
  background: rgba(239,68,68,.12);
  color: #fee2e2;
}
.code-block {
  position: relative;
  background: #020617;
  border: 1px solid var(--border);
  border-radius: 14px;
  margin: 20px 0;
  padding-top: 40px;
}

.code-block.full {
  width: 100%;
}

.code-block pre {
  margin: 0;
  padding: 20px;
  overflow-x: auto;
}

.copy-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: .15s;
}

.copy-btn:hover {
  background: rgba(255,255,255,.1);
  color: var(--accent);
}

article table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #020617;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  margin: 20px 0;
  font-size: 14px;
}

article thead th {
  padding: 14px;
  font-weight: 600;
  color: var(--muted);
  background: #020617;
  border-bottom: 1px solid var(--border);
}

article tbody td {
  padding: 14px;
  border-bottom: 1px solid var(--border);
}

article tbody tr:last-child td {
  border-bottom: none;
}

article tbody tr:hover {
  background: rgba(99, 102, 241, 0.06);
}

article tbody td:first-child {
  font-weight: 700;
  color: #a5b4fc;
}

article tbody tr:last-child {
  background: rgba(99, 102, 241, 0.12);
}

article table strong {
  color: #e5e7eb;
}

article a {
  color: #7fa8ff; 
  text-decoration: underline;
  transition: color 0.2s ease;
}

article a:hover {
  color: #b3c7ff;
}

article a:visited {
  color: #9a8cff;
}

details {
  background: rgba(140, 120, 255, 0.05);
  border: 1px solid rgba(140, 120, 255, 0.25);
  border-radius: 12px;
  margin: 18px 0;
  overflow: hidden;
  transition: border-color 0.3s ease, background 0.3s ease;
}

details[open] {
  background: rgba(140, 120, 255, 0.08);
  border-color: rgba(160, 140, 255, 0.45);
}

summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 18px;
  font-weight: 600;
  color: #dcdcff;
  display: flex;
  align-items: center;
  gap: 10px;
  user-select: none;
}

summary::-webkit-details-marker {
  display: none;
}

summary::after {
  content: "▶";
  margin-left: auto;
  font-size: 0.9rem;
  transition: transform 0.25s ease;
  color: #b6b9ff;
}

details[open] summary::after {
  transform: rotate(90deg);
}

summary:hover {
  background: rgba(140, 120, 255, 0.12);
}

details > *:not(summary) {
  padding: 16px 18px 20px;
  animation: expandFade 0.25s ease;
}

@keyframes expandFade {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}