:root{
  --bg:#2b1026; /* pastel plum background */
  --panel:#2a1226; /* panel background */
  --muted:#d6c7d9; /* softer muted text */
  --primary:#ffb3e6; /* soft pink */
  --secondary:#ffd8f4; /* pale peach/pink */
  --accent:#d6b3ff; /* soft lavender */
}

[data-theme="light"]{
  --bg:#f8f4f8; /* light pastel background */
  --panel:#ffffff; /* white panel background */
  --muted:#6b5b7d; /* darker muted text for light mode */
  --primary:#8b4789; /* deeper pink for light mode */
  --secondary:#a5699f; /* medium purple for light mode */
  --accent:#7c5295; /* deeper lavender for light mode */
}
*{box-sizing:border-box}
.crt-screen{position:relative;overflow:hidden;min-height:100vh}
.scanlines, .vignette{pointer-events:none;position:absolute;inset:0}
html,body{height:100%;min-height:100%;margin:0}
/* ensure the background fills the whole page — avoid cutoff line */
body{font-family:'Space Mono', monospace;background-color:var(--bg);background-image:radial-gradient(1200px 600px at 10% 10%, rgba(210,140,200,0.16), transparent 10%), linear-gradient(180deg,#16041a 0%,var(--bg) 100%);background-repeat:no-repeat;background-attachment:fixed;background-size:cover;color:var(--muted);transition:background-color 0.3s ease, color 0.3s ease;}
.container{max-width:900px;margin:0 auto;padding:48px 20px}
.header{text-align:center;margin-bottom:40px;position:relative;z-index:2}
.init-line{font-family:VT323, monospace;color:var(--muted);font-size:14px;margin-bottom:18px}
.init-line .caret{color:var(--primary);margin-right:6px}
.init-line .ok{color:var(--secondary);margin-left:6px}
.profile{display:flex;flex-direction:column;align-items:center;gap:18px}
.profile-frame{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(0,0,0,0.08));padding:10px;border-radius:10px;box-shadow:0 10px 30px rgba(2,6,23,0.7), inset 0 1px 0 rgba(255,255,255,0.02)}
.profile-screen{background:linear-gradient(180deg,rgba(255,255,255,0.015),rgba(0,0,0,0.16));padding:12px;border-radius:6px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,0.02)}
.avatar{width:160px;height:160px;border-radius:6px;display:block;filter:contrast(1.05)}
.title .name{font-family:VT323, monospace;font-size:44px;margin:6px 0;color:var(--primary);text-shadow:0 0 12px rgba(255,179,230,0.16),0 0 28px rgba(214,179,255,0.04)}
.title .tag{font-size:13px;color:var(--muted);animation:blink 1.6s steps(2,end) infinite}
@keyframes blink{50%{opacity:0.3}}

.repos-title{display:flex;align-items:center;gap:12px;justify-content:center;margin:28px 0;position:relative}
.repos-title .line{height:2px;background:linear-gradient(90deg,transparent,rgba(159,176,198,0.2));flex:1;max-width:140px}
.repos-title h2{font-size:20px;color:var(--secondary);letter-spacing:2px;text-shadow:0 0 6px rgba(255,208,160,0.06)}

.cards{display:flex;flex-direction:column;gap:12px}
.card{display:block;padding:16px;background:linear-gradient(180deg,rgba(255,255,255,0.012),rgba(0,0,0,0.06));border-radius:10px;color:inherit;text-decoration:none;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,0.03);backdrop-filter: blur(4px)}
.card:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(2,6,23,0.6),0 8px 18px rgba(0,0,0,0.45)}
.card-left{display:flex;gap:14px;align-items:flex-start}
.icon{width:40px;height:40px;border-radius:8px;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(0,0,0,0.06));display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--primary);box-shadow:inset 0 -6px 10px rgba(0,0,0,0.35)}
.card-body{flex:1;min-width:0}
.card-head{display:flex;align-items:center;gap:10px}
.card-head h3{margin:0;font-size:18px;color:var(--muted)}
.lang{font-size:12px;color:var(--muted);padding:4px 8px;border-radius:999px;background:linear-gradient(90deg,rgba(255,255,255,0.01),rgba(0,0,0,0.06))}
.lang.ts{background:linear-gradient(90deg,#c7b9ff22,#8bd3ff22)}
.lang.js{background:linear-gradient(90deg,#c7b9ff22,#8bd3ff22)}
.desc{margin:8px 0 6px;color:var(--muted);font-size:13px}
.stats{font-size:12px;color:var(--muted);display:flex;gap:12px}
/* loading / error states for repo stats */
.stats .loading{color:var(--secondary);font-style:italic;opacity:0.95}
.stats.loading{opacity:0.95}
.stats.error{color:#ff9b9b;opacity:0.95}
.stats.error span{opacity:0.95}
.card-right{position:absolute;right:12px;top:12px;color:var(--muted);opacity:0.95}
.cmd{margin-top:10px;position:relative;font-family:VT323, monospace;background:linear-gradient(90deg,rgba(255,255,255,0.012),rgba(0,0,0,0.06));padding:8px;border-radius:6px;font-size:13px;color:var(--muted);border:1px solid rgba(255,255,255,0.02);text-align: center}

/* copy feedback */
.cmd{cursor:pointer}
.copy-bubble{position:absolute;left:50%;bottom:calc(100% + 8px);background:var(--primary);color:#081018;padding:6px 8px;border-radius:6px;font-size:12px;opacity:0;transform:translateX(-50%) translateY(8px);transition:all .18s ease;z-index:60;box-shadow:0 6px 18px rgba(0,0,0,0.5)}
.copy-bubble.show{opacity:1;transform:translateX(-50%) translateY(0)}

.footer{margin-top:20px;text-align:center;padding-top:14px}
.sep{height:1px;width:80%;margin:8px auto;background:linear-gradient(90deg,transparent,#33415544,transparent)}
.sys{font-family:Space Mono, monospace;font-size:13px;color:var(--muted)}
.note{font-size:12px;color:rgba(148,163,184,0.7)}

.corner{position:fixed;bottom:14px;font-family:Space Mono,monospace;font-size:12px;color:rgba(148,163,184,0.6);z-index:70}
.corner.left{left:14px}
.corner.right{right:14px}

/* Scanlines & vignette overlays */
/* lighter pastel scanlines, placed behind content via z-index and subtle tint */
.scanlines{background-image:repeating-linear-gradient(180deg, rgba(0,0,0,0.72) 0px, rgba(0,0,0,0.72) 1px, transparent 1px, transparent 4px), repeating-linear-gradient(180deg, rgba(10,20,30,0.06) 0px, rgba(10,20,30,0.06) 1px, transparent 1px, transparent 6px);opacity:0.98;mix-blend-mode:multiply;animation:scan 10s linear infinite;background-size:100% 5px, 100% 8px;z-index:5;pointer-events:none}
@keyframes scan{0%{background-position-y:0}100%{background-position-y:48px}}
.vignette{background:radial-gradient(60% 60% at 50% 20%, rgba(2,6,15,0.0), rgba(2,6,15,0.72)), linear-gradient(180deg, transparent, rgba(0,0,0,0.46));opacity:0.95;pointer-events:none;z-index:3}

/* ensure content sits above scanlines */
.container{position:relative;z-index:10}

/* Subtle tiled terminal-text overlay (dulled white) placed above background but below scanlines */
.terminal-noise{position:absolute;inset:0;pointer-events:none;z-index:4;background-repeat:repeat;opacity:0.28;mix-blend-mode:screen;background-size:600px 120px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='120'><style>text{font-family:Space Mono,monospace;font-size:12px;fill:rgba(255,255,255,0.16)}</style><text x='8' y='16'>▸ 0f3a:b1nary checksum ok</text><text x='8' y='34'>▸ loading modules: network ui render</text><text x='8' y='52'>▸ fetch: github.com/kotarai/repo</text><text x='8' y='70'>▸ RAM: 128K | CPU: 0.98GHz</text><text x='8' y='88'>▸ /usr/local/bin: update complete</text></svg>");}

/* subtitle below profile */
.subtitle{font-family:Space Mono, monospace;color:var(--muted);font-size:14px;margin-top:12px;letter-spacing:1px}

/* ensure profile sits below scanlines while cards/links sit above */
.profile-screen{position:relative}
.avatar{position:relative;z-index:2}
.scanlines-profile{position:absolute;inset:0;z-index:6;pointer-events:none;background-image:repeating-linear-gradient(180deg, rgba(0,0,0,0.72) 0px, rgba(0,0,0,0.72) 1px, transparent 1px, transparent 4px), repeating-linear-gradient(180deg, rgba(10,20,30,0.06) 0px, rgba(10,20,30,0.06) 1px, transparent 1px, transparent 6px);background-size:100% 5px, 100% 8px;mix-blend-mode:multiply;opacity:0.98}
.card{position:relative;z-index:12}
.card-link{display:block;color:inherit;text-decoration:none}
.card-link:focus{outline:2px solid rgba(255,255,255,0.06);outline-offset:2px}

/* subtle CRT chroma fringe on headings */
.card-head h3{position:relative}
.card-head h3::after{content:'';position:absolute;inset:0;left:1px;right:-1px;background:linear-gradient(90deg, rgba(201,167,255,0.06), rgba(139,211,255,0.06));mix-blend-mode:screen;filter:blur(6px);opacity:0.65}

/* small screens */

/* small screens */
@media (max-width:600px){
  .container{padding:28px 16px}
  .title .name{font-size:36px}
  .avatar{width:140px;height:140px}
  .scanlines{opacity:0.18}
}
/* Theme toggle button */
.theme-toggle {
  position: absolute;
  top: 20px;
  right: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,0.1), rgba(0,0,0,0.1));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--muted);
  font-size: 1.2em;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 20;
  backdrop-filter: blur(4px);
}

.theme-toggle:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.15), rgba(0,0,0,0.15));
  transform: scale(1.05);
}

.theme-toggle:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Mobile styles */
@media (max-width: 600px) {
  .theme-toggle {
    top: 10px;
    right: 10px;
    padding: 6px 10px;
    font-size: 1em;
  }
}
/* Light theme overrides */
[data-theme="light"] body {
  background-image: radial-gradient(1200px 600px at 10% 10%, rgba(139,71,137,0.08), transparent 10%), 
                   linear-gradient(180deg, #f5f0f8 0%, var(--bg) 100%);
  color: var(--muted);
}

[data-theme="light"] .scanlines {
  opacity: 0.15;
  background-image: 
    repeating-linear-gradient(180deg, rgba(0,0,0,0.1) 0px, rgba(0,0,0,0.1) 1px, transparent 1px, transparent 4px),
    repeating-linear-gradient(180deg, rgba(0,0,0,0.04) 0px, rgba(0,0,0,0.04) 1px, transparent 1px, transparent 8px);
  mix-blend-mode: multiply;
}

[data-theme="light"] .scanlines-profile {
  opacity: 0.15;
  background-image: 
    repeating-linear-gradient(180deg, rgba(0,0,0,0.1) 0px, rgba(0,0,0,0.1) 1px, transparent 1px, transparent 4px);
  mix-blend-mode: multiply;
}

[data-theme="light"] .vignette {
  opacity: 0.1;
  background: radial-gradient(60% 60% at 50% 20%, rgba(255,255,255,0.2), rgba(255,255,255,0.5));
}

[data-theme="light"] .terminal-noise {
  opacity: 0.1;
  mix-blend-mode: multiply;
}

[data-theme="light"] .card {
  background: linear-gradient(180deg, rgba(255,255,255,0.8), rgba(255,255,255,0.6));
  border: 1px solid rgba(0,0,0,0.05);
  color: var(--muted);
}

[data-theme="light"] .cmd {
  background: linear-gradient(90deg, rgba(0,0,0,0.02), rgba(0,0,0,0.04));
  border: 1px solid rgba(0,0,0,0.05);
  color: var(--muted);
}

[data-theme="light"] .profile-frame {
  background: linear-gradient(180deg, rgba(255,255,255,0.8), rgba(255,255,255,0.6));
  box-shadow: 0 10px 30px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.8);
}

[data-theme="light"] .profile-screen {
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.7));
  border: 1px solid rgba(0,0,0,0.05);
}

[data-theme="light"] .theme-toggle {
  background: linear-gradient(180deg, rgba(255,255,255,0.8), rgba(255,255,255,0.6));
  border: 1px solid rgba(0,0,0,0.1);
  color: var(--muted);
}

[data-theme="light"] .theme-toggle:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.7));
}

[data-theme="light"] .init-line {
  color: var(--muted);
}