/* Pink/Purple Gradient Theme */
:root {
  --bg-gradient: radial-gradient(circle at 20% 25%, #2b0f33 0%, #1a0d24 40%, #0d0713 90%);
  --panel-gradient: linear-gradient(145deg, rgba(255,105,180,0.18), rgba(147,112,219,0.10));
  --card-gradient: linear-gradient(160deg, rgba(255,182,193,0.10), rgba(186,85,211,0.08));
  --accent: #ff6ad5;
  --accent-alt: #b785ff;
  --text-main: #f2e9f7;
  --text-dim: #c5b3d4;
  --border-color: rgba(255,255,255,0.12);
  --border-strong: rgba(255,255,255,0.28);
  --shadow-soft: 0 4px 16px -4px rgba(0,0,0,0.55);
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 18px;
  --focus-ring: 0 0 0 2px #41185f, 0 0 0 3px #ff6ad5;
  --mono: "JetBrains Mono", "SFMono-Regular", Menlo, monospace;
  --transition: .18s cubic-bezier(.4,.2,.2,1);
}

html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  background: var(--bg-gradient);
  color: var(--text-main);
  -webkit-font-smoothing: antialiased;
}

/* Layout */
.site-shell { display:flex; gap:2rem; align-items:stretch; }
main { flex:1; min-width:0; padding:1.5rem 2rem 3rem; }

/* Panels */
.sidebar {
  width:250px; flex-shrink:0; padding:1.25rem 1.1rem 2.25rem; position:relative; backdrop-filter: blur(18px) saturate(140%);
  background: var(--panel-gradient);
  border-right:1px solid var(--border-color);
  box-shadow: var(--shadow-soft);
  border-top-right-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}
.sidebar:before { content:""; position:absolute; inset:0; pointer-events:none; border:1px solid rgba(255,255,255,0.07); border-left:none; border-radius:inherit; }

.sidebar h3 { margin:0 0 1rem; font-size:1.05rem; letter-spacing:.05em; text-transform:uppercase; font-weight:600; opacity:.85; }
.sidebar ul { list-style:none; padding:0; margin:0; }
.sidebar li { margin:.15rem 0; }
.sidebar a { display:block; padding:.45rem .65rem; border-radius: var(--radius-sm); color: var(--text-dim); font-weight:500; text-decoration:none; position:relative; transition: var(--transition); }
.sidebar a:hover, .sidebar a:focus { background:rgba(255,255,255,0.08); color:#fff; }
.sidebar a:focus { outline:none; box-shadow: var(--focus-ring); }
.sidebar a.active { background:linear-gradient(90deg, rgba(255,106,213,0.25), rgba(147,112,219,0.25)); color:#fff; border:1px solid rgba(255,255,255,0.15); }
.sidebar ul ul { margin:.25rem 0 .65rem .6rem; padding-left:.6rem; border-left:1px dashed rgba(255,255,255,0.15); }

/* Main content */
main > h1 { margin-top:0; font-size:clamp(1.9rem, 2.2vw + 1rem, 2.65rem); background:linear-gradient(90deg,#ff6ad5,#b785ff 60%,#ffd2fb); -webkit-background-clip:text; color:transparent; letter-spacing:.5px; }
main hr { border:none; height:1px; background:linear-gradient(90deg, rgba(255,106,213,0.6), rgba(147,112,219,0.2), rgba(255,106,213,0.6)); margin:3rem 0 2rem; opacity:.9; }
main p code, li code { background:#2d1840; padding:.2rem .4rem; border-radius:4px; font-family: var(--mono); font-size:.8rem; }

/* Cards (reuse fish grid look) */
.fish-card { background: var(--card-gradient); }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: #6b217e #1a0d24; }
*::-webkit-scrollbar { width:10px; }
*::-webkit-scrollbar-track { background:#14091b; }
*::-webkit-scrollbar-thumb { background:linear-gradient(#6b217e,#b130b7); border-radius:20px; border:2px solid #14091b; }
*::-webkit-scrollbar-thumb:hover { background:linear-gradient(#9c35a9,#ff6ad5); }

/* Responsive */
@media (max-width: 980px){
  .site-shell { flex-direction:column; }
  .sidebar { width:auto; border-right:none; border-radius:0 0 var(--radius-lg) var(--radius-lg); display:flex; flex-wrap:wrap; gap:.35rem .5rem; }
  .sidebar h3 { width:100%; }
  .sidebar ul ul { border-left:none; margin-left:0; padding-left:0; }
  main { padding:1.25rem 1.25rem 2.5rem; }
}

/* Utility */
.gradient-text { background:linear-gradient(90deg,#ff6ad5,#b785ff); -webkit-background-clip:text; color:transparent; }

/* Focus visible */
:focus-visible { outline:none; box-shadow: var(--focus-ring); }

/* Links in content */
main a { color: var(--accent-alt); text-decoration:none; position:relative; }
main a:after { content:""; position:absolute; left:0; bottom:-1px; height:2px; width:100%; background:linear-gradient(90deg,#ff6ad5,#b785ff); transform:scaleX(0); transform-origin:left; transition:.3s; }
main a:hover:after { transform:scaleX(1); }
main a:hover { color:#fff; }

/* Tables (if any remain) */
table { width:100%; border-collapse:collapse; margin:1rem 0 2rem; font-size:.9rem; }
th, td { padding:.55rem .65rem; border:1px solid var(--border-color); }
th { background:linear-gradient(90deg, rgba(255,106,213,0.28), rgba(147,112,219,0.22)); text-align:left; }
tr:nth-child(even) { background:rgba(255,255,255,0.04); }

/* Code blocks */
pre, pre code { font-family: var(--mono); line-height:1.4; }
pre { padding:1rem 1.2rem; border-radius: var(--radius); background:#211027; border:1px solid #3d2150; box-shadow: inset 0 0 0 1px #2b1636, 0 4px 14px -6px #000; position:relative; }
pre:before { content:"CODE"; position:absolute; top:.4rem; right:.8rem; font-size:.55rem; letter-spacing:.15em; opacity:.5; }

/* Footer small text */
main small { opacity:.65; }