/* Dark Cosmic Theme - responsive */
:root{
  --bg: #0b0f1a;
  --panel: #111725;
  --text: #e6e9ef;
  --muted: #9aa4b2;
  --accent: #7c9cff;
  --accent2: #7fffd4;
  --danger: #ff6b6b;
  --success:#38d9a9;
  --shadow: rgba(0,0,0,0.4);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text); background:var(--bg); font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6; overflow-x:hidden;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.unstyled{text-decoration:none; color:inherit}

.site-header{
  position:sticky; top:0; z-index:5; background:linear-gradient(180deg,#0b0f1acc,transparent);
  backdrop-filter: blur(6px); border-bottom:1px solid #0e1424; padding:12px 16px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{display:flex; gap:12px; align-items:center}
.brand h1{margin:0; font-size:clamp(18px,3vw,24px); letter-spacing:0.5px}
.subtitle{margin:0; color:var(--muted); font-size:12px}
.top-right{display:flex; gap:12px; align-items:center}
.counter{background:#141c2f; padding:6px 10px; border-radius:999px; border:1px solid #1d2944; box-shadow:0 0 20px #1d294440}
.admin-link{background:#141c2f; padding:6px 10px; border-radius:8px; border:1px solid #1d2944}

.container{max-width:1100px; margin:24px auto; padding:0 16px}
.panel{
  background:var(--panel); border:1px solid #1a2238; border-radius:16px; padding:18px;
  box-shadow: 0 10px 30px var(--shadow);
}
.narrow{max-width:520px; margin:10vh auto}

.pill-list{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:10px}
.pill{display:inline-block; padding:8px 12px; background:#141c2f; border:1px solid #1d2944; border-radius:999px}
.section-grid{display:grid; gap:14px; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); list-style:none; padding:0; margin:0}
.section-card{display:block; background:#141c2f; border:1px solid #1d2944; border-radius:14px; padding:14px; transition:transform .2s}
.section-card:hover{transform:translateY(-3px)}
.folder-icon{font-size:26px}
.section-name{font-weight:600; margin-top:6px}

.search form{display:flex; gap:8px}
input[type=search], input[type=text], input[type=password], select, textarea{
  width:100%; border:1px solid #1d2944; background:#0f1526; color:var(--text);
  padding:10px 12px; border-radius:10px; font:inherit;
}
textarea.monospace{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;}
button{border:none; background:linear-gradient(135deg, #2648ff, #7c9cff); color:white; padding:10px 14px; border-radius:10px; cursor:pointer}
button:hover{filter:brightness(1.1)}
button.danger{background:linear-gradient(135deg, #a11, #ff6b6b)}
button.small{padding:6px 10px; font-size:12px}
.inline{display:inline}
.grid-2{display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:900px){ .grid-2{ grid-template-columns:1fr 1fr } }

.simple-list{list-style:none; padding:0; margin:0}
.simple-list li{display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid #1a2238}
.simple-list li:last-child{border-bottom:none}

.files{list-style:none; padding:0; margin:0}
.files li{display:flex; gap:10px; align-items:center; padding:6px 0; border-bottom:1px solid #1a2238}
.files li:last-child{border-bottom:none}
.file-meta{color:var(--muted); font-size:12px}

.flash{padding:10px 12px; border-radius:8px; margin:10px 0}
.flash.warn{background:#33260f; border:1px solid #5a410f}
.flash.error{background:#3a0f15; border:1px solid #6e1d28}
.flash.success{background:#0f3327; border:1px solid #1f7a59}

.topic h1{margin-top:0}
.topic-meta{color:var(--muted); font-size:12px; margin-bottom:14px}
.topic-content{line-height:1.75}
.topic-content pre.code{background:#0f1526; padding:12px; border:1px solid #1d2944; border-radius:10px; overflow:auto}

.bio-content{white-space:pre-wrap}

.logo-orb{width:28px; height:28px; border-radius:50%; background: radial-gradient(circle at 30% 30%, var(--accent2), transparent 40%), radial-gradient(circle at 70% 70%, var(--accent), transparent 50%); box-shadow:0 0 40px #7c9cff40 inset, 0 0 20px #7fffd430}

.site-footer{opacity:0.7; text-align:center; padding:30px 0}

/* Starfield Canvas */
#space{position:fixed; inset:0; z-index:-1; background:radial-gradient(1200px 800px at 50% -20%, #0e1430, transparent 60%)}
@media (prefers-reduced-motion:no-preference){
  body.animate #space{animation: drift 18s linear infinite}
  @keyframes drift{0%{filter:hue-rotate(0deg)} 100%{filter:hue-rotate(45deg)}}
}

/* === Cosmic nav chips (About / Home / Admin) === */
.site-header .top-right .admin-link{
  /* colors you can tweak */
  --bg1:#1a2544;          /* deep space */
  --bg2:#2a3b7a;          /* nebula */
  --ring:#7c9cff;         /* blue glow */
  --mint:#7fffd4;         /* mint glow */

  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--bg1), var(--bg2));
  background-size: 200% 200%;              /* for subtle shimmer on hover */
  border: 1px solid rgba(124,156,255,.35);
  color: #e6e9ef;
  text-decoration: none;                   /* kill underline */
  box-shadow:
    0 0 0 1px rgba(124,156,255,.15) inset,
    0 4px 18px rgba(124,156,255,.08);
  transition:
    transform .2s ease,
    box-shadow .25s ease,
    background-position .6s ease,
    filter .4s ease;
}

/* remove underline on hover just for these header buttons */
.site-header .top-right a,
.site-header .top-right a:hover{
  text-decoration: none;
}

/* soft glow + lift on hover */
.site-header .top-right .admin-link:hover{
  transform: translateY(-2px);
  background-position: 100% 0%;
  box-shadow:
    0 0 0 1px rgba(127,255,212,.25) inset,
    0 8px 26px rgba(124,156,255,.25);
  filter: hue-rotate(8deg) saturate(1.08);
}

/* comet-like aurora overlay */
.site-header .top-right .admin-link::after{
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(127,255,212,.25), transparent 60%),
    radial-gradient(60% 60% at 70% 70%, rgba(124,156,255,.25), transparent 60%);
  opacity: 0;
  transition: opacity .25s ease;
}
.site-header .top-right .admin-link:hover::after{
  opacity: .9;
}

/* tap/click feel */
.site-header .top-right .admin-link:active{
  transform: translateY(0) scale(.98);
}

/* optional: focus ring for keyboard users (good a11y) */
.site-header .top-right .admin-link:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 2px rgba(8,12,26,1),
    0 0 0 4px rgba(124,156,255,.65);
}

/* Home › Sections tree */
.kks-sections-panel { padding:14px; border:1px solid #1a2238; border-radius:14px; background:#0f1526; }
.kks-sections-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:6px; }
.kks-sections-title { margin:0; }
.kks-tree { margin-top:6px; }

.kks-tree-ul { list-style:none; margin:0; padding-left:6px; }
.kks-tree-ul > li { margin:6px 0; }
.kks-tree-ul details { padding:6px 6px 6px 2px; border-left:2px solid #1a2238; border-radius:8px; }
.kks-tree-ul summary { cursor:pointer; list-style:none; }
.kks-tree-ul summary::-webkit-details-marker { display:none; }

.kks-tree-link {
  text-decoration:none;
  color:#e6e9ef;
  padding:4px 8px;
  border-radius:8px;
  transition: transform .15s ease, box-shadow .25s ease, background-position .6s ease;
  background: linear-gradient(135deg, rgba(26,37,68,.25), rgba(42,59,122,.15));
  box-shadow: 0 1px 0 rgba(124,156,255,.08) inset;
}
.kks-tree-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(124,156,255,.18);
}

.kks-chip {
  display:inline-block;
  min-width:22px;
  margin-left:6px;
  padding:2px 7px;
  font-size:12px;
  font-weight:700;
  border:1px solid #1d2944;
  border-radius:999px;
  background:#141c2f;
  color:#e6e9ef;
}
.kks-chip-hrs { border-color: rgba(127,255,212,.35); box-shadow: 0 0 12px rgba(127,255,212,.12) inset; }


/* Browse button inside the Sections panel — no underline + hover animation */
.kks-sections-actions .admin-link,
.kks-sections-actions .admin-link:hover{
  text-decoration: none; /* overrides global a:hover underline */
}

.kks-sections-actions .admin-link{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #1a2544, #2a3b7a);
  background-size: 200% 200%;
  border: 1px solid rgba(124,156,255,.35);
  color: #e6e9ef;
  box-shadow:
    0 0 0 1px rgba(124,156,255,.15) inset,
    0 4px 18px rgba(124,156,255,.08);
  transition:
    transform .2s ease,
    box-shadow .25s ease,
    background-position .6s ease,
    filter .4s ease;
}

.kks-sections-actions .admin-link:hover{
  transform: translateY(-2px);
  background-position: 100% 0%;
  box-shadow:
    0 0 0 1px rgba(127,255,212,.25) inset,
    0 8px 26px rgba(124,156,255,.25);
  filter: hue-rotate(8deg) saturate(1.08);
}

/* Also prevent underline on tree links when hovered */
.kks-tree-link:hover{ text-decoration: none; }


/* Study total chip */
.study-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  background:#0f1526; color:#e6e9ef;
  border:1px solid #1d2944;
  box-shadow: 0 8px 24px rgba(124,156,255,.12);
  font-weight:600; font-size:14px;
}
.study-chip.small{ padding:4px 8px; font-size:12px; }



/* Hide the public Login link everywhere */
.top-left a[title="Login"] { display: none !important; }


/* =============== Cosmic Link Styles =============== */

/* 1) MOST VISITED — animated pill with subtle shimmer */
.kks-pill {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  text-decoration: none;
  color: #e6e9ef;
  border: 1px solid rgba(124,156,255,.35);
  background: linear-gradient(135deg, #1a2544, #2a3b7a);
  background-size: 200% 200%;
  transition: transform .18s ease, box-shadow .28s ease, background-position .6s ease;
  box-shadow: inset 0 0 0 rgba(0,0,0,0), 0 0 0 rgba(0,0,0,0);
}
.kks-pill:hover,
.kks-pill:focus-visible {
  transform: translateY(-2px);
  background-position: 100% 50%;
  box-shadow: 0 10px 26px rgba(124,156,255,.28), 0 0 0 1px rgba(124,156,255,.2) inset;
  outline: none;
}
.kks-pill:active { transform: translateY(-1px) scale(.98); }

/* 2) RECENT — comet underline that sweeps in */
.kks-recent-link {
  position: relative;
  color: #cfd6ff;
  text-decoration: none;
  transition: color .2s ease;
}
.kks-recent-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  height: 2px; width: 100%;
  background: linear-gradient(90deg, rgba(124,156,255,0) 0%, rgba(124,156,255,.9) 45%, rgba(124,156,255,0) 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}
.kks-recent-link:hover,
.kks-recent-link:focus-visible {
  color: #e8ebff;
  outline: none;
}
.kks-recent-link:hover::after,
.kks-recent-link:focus-visible::after {
  transform: scaleX(1);
}

/* 3) GHOST — soft neon text glow for helper links (e.g., Admin → Pins) */
.kks-ghost-link {
  color: #b9c3ff;
  text-decoration: none;
  transition: text-shadow .25s ease, color .2s ease;
}
.kks-ghost-link:hover,
.kks-ghost-link:focus-visible {
  color: #ffffff;
  text-shadow: 0 0 12px rgba(124,156,255,.55), 0 0 28px rgba(124,156,255,.25);
  outline: none;
}

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce) {
  .kks-pill, .kks-recent-link::after { transition: none !important; }
}