/* simple reset */
* { box-sizing: border-box; }
html,body { height:100%; margin:0; padding:0; }
body { font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background:#0b0b0f; color:#e9e9f0; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

/* root theme tokens */
:root{
  --bg: #0b0b0f;
  --card: rgba(255,255,255,0.04);
  --muted: rgba(233,233,240,0.7);
  --accent: #6df0ff;
  --accent-2: #ff6df0;
  --glass: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  --radius: 14px;
}

/* retro theme overrides (default) */
.theme-retro { --bg: linear-gradient(180deg,#070511 0%, #0b0430 60%); --card: rgba(255,255,255,0.03); --accent: #00f0ff; --accent-2:#ff00d2; --muted: rgba(200,200,225,0.9); }
.theme-dark  { --bg: linear-gradient(180deg,#07070a, #0b0b0f); --accent:#7cd37c; --accent-2:#66b3ff; --muted: rgba(200,200,210,0.9); }

/* page container */
#page {
  min-height:100vh;
  background: var(--bg);
  transition: background .45s ease;
  position:relative;
  padding-bottom:40px;
}

/* site header */
.site-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 24px;
  gap:12px;
}
.brand .logo {
  font-family: 'Press Start 2P', monospace;
  margin:0;
  font-size:16px;
  letter-spacing:1px;
  color:var(--accent);
  text-shadow: 0 0 8px rgba(0,255,255,0.12);
}
.brand .tag { margin:3px 0 0 0; color:var(--muted); font-size:13px; }

/* controls */
.controls { display:flex; gap:12px; align-items:center; }
.controls button {
  background:var(--glass); border:1px solid rgba(255,255,255,0.06);
  color:var(--muted); padding:8px 12px; border-radius:9px; cursor:pointer;
  font-weight:600;
}
.controls button:active { transform:translateY(1px); }
.upload-hint { color:var(--muted); font-size:13px; text-decoration:none; }

/* container & cards */
.container { max-width:980px; margin:20px auto; padding:18px; display:grid; grid-template-columns: 1fr 340px; gap:18px; }
.card { background:var(--card); border-radius:var(--radius); padding:16px; box-shadow: 0 6px 18px rgba(0,0,0,0.45); border:1px solid rgba(255,255,255,0.02); }
.card h2 { margin:0 0 8px 0; color:var(--accent-2); font-size:14px; font-weight:700; letter-spacing:.6px; }
.intro p { color:var(--muted); line-height:1.5; margin:8px 0 0 0; }

/* projects list */
.projects ul { padding-left:18px; margin:8px 0 0 0; color:var(--muted); }
.projects a { color:var(--muted); text-decoration:none; }
.projects a:hover { text-decoration:underline; }

/* guestbook form */
.guestbook label { display:block; margin:8px 0; font-size:13px; color:var(--muted); }
.guestbook input, .guestbook textarea {
  width:100%; padding:8px 10px; margin-top:6px; background:transparent; border:1px solid rgba(255,255,255,0.06);
  color:var(--muted); border-radius:8px; min-height:38px;
}
.guestbook textarea { min-height:70px; resize:vertical; }
.form-row { display:flex; gap:8px; margin-top:8px; }
.guestbook button { padding:8px 12px; border-radius:9px; border:0; cursor:pointer; font-weight:700; }
.guestbook button[type="submit"]{ background:linear-gradient(90deg,var(--accent), var(--accent-2)); color:#05050a; }
button.danger { background:transparent; border:1px solid rgba(255,40,40,0.12); color:var(--muted); }

/* entries */
#entries { margin-top:12px; display:flex; flex-direction:column; gap:10px; max-height:280px; overflow:auto; padding-right:6px; }
.entry { padding:10px; border-radius:8px; background:rgba(0,0,0,0.16); border:1px solid rgba(255,255,255,0.02); }
.entry .meta { font-size:12px; color:rgba(200,200,230,0.8); margin-bottom:6px; }
.entry p { margin:0; color:var(--muted); }

/* footer */
.site-footer { text-align:center; margin-top:26px; color:var(--muted); font-size:13px; }

/* background grid overlay (visual only) */
.grid-overlay { position:fixed; inset:0; pointer-events:none; opacity:0.12; background-image:
  linear-gradient(transparent 23px, rgba(255,255,255,0.02) 24px),
  linear-gradient(90deg, transparent 23px, rgba(255,255,255,0.02) 24px);
  background-size: 24px 24px; mix-blend-mode:overlay; z-index:0; transform:translateZ(0); }

/* small screens */
@media (max-width:880px){
  .container { grid-template-columns: 1fr; padding:12px; gap:12px; }
  .brand .logo { font-size:14px; }
}

/* subtle animation */
.logo { animation: glow 2.6s infinite ease-in-out; display:inline-block; }
@keyframes glow {
  0% { text-shadow:0 0 2px rgba(0,0,0,0); transform:translateY(0); }
  50% { text-shadow:0 0 24px rgba(109,240,255,0.18), 0 0 48px rgba(255,109,240,0.06); transform:translateY(-2px); }
  100% { text-shadow:0 0 2px rgba(0,0,0,0); transform:translateY(0); }
}