/* ============================================================
   DEV PORTFOLIO — Terminal Theme
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,300;0,400;0,500;1,400&display=swap');

/* ── CSS Variables (dark by default) ── */
:root {
  --background:         #0a0a0a;
  --foreground:         #c0c0c0;
  --card:               #111111;
  --card-foreground:    #c0c0c0;
  --primary:            #00ff00;
  --primary-foreground: #0a0a0a;
  --secondary:          #1a1a1a;
  --muted:              #1a1a1a;
  --muted-foreground:   #808080;
  --border:             #333333;
  --link:               #6699ff;
  --link-hover:         #99ccff;
  --link-visited:       #9966cc;
  --destructive:        #ff0000;
  --font: 'IBM Plex Mono', 'Courier New', monospace;
}

/* ── Light theme ── */
:root.light {
  --background:         #f0f0e8;
  --foreground:         #1a1a1a;
  --card:               #ffffff;
  --card-foreground:    #1a1a1a;
  --primary:            #006600;
  --primary-foreground: #f0f0e8;
  --secondary:          #e0e0d8;
  --muted:              #e0e0d8;
  --muted-foreground:   #666666;
  --border:             #999999;
  --link:               #0000cc;
  --link-hover:         #0000ff;
  --link-visited:       #660099;
  --destructive:        #cc0000;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: background .2s, color .2s;
}

/* ── Typography ── */
a {
  color: var(--link);
  text-decoration: underline;
  transition: color .1s;
}
a:hover   { color: var(--link-hover); }
a:visited { color: var(--link-visited); }

nav a, .no-underline { text-decoration: none; }

::selection {
  background: var(--primary);
  color: var(--primary-foreground);
}

/* ── Scrollbar ── */
::-webkit-scrollbar       { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--background); }
::-webkit-scrollbar-thumb { background: var(--border); }
::-webkit-scrollbar-thumb:hover { background: #444; }
:root.light ::-webkit-scrollbar-track { background: #e0e0d8; }
:root.light ::-webkit-scrollbar-thumb { background: #999; }

/* ── HR ── */
hr {
  border: none;
  border-top: 1px dashed var(--border);
  margin: 1.5rem 0;
}

/* ── Code ── */
pre, code {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  background: var(--card);
  border: 1px solid var(--border);
}
code {
  padding: 1px 5px;
  font-size: 13px;
}
pre {
  padding: 16px;
  overflow-x: auto;
  font-size: 12px;
  line-height: 1.55;
  margin: 1.25em 0;
}
pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
}

/* ── ASCII art ── */
.ascii-art {
  font-family: 'Courier New', monospace;
  font-size: 10px;
  line-height: 1.1;
  white-space: pre;
  color: var(--primary);
  overflow-x: auto;
}

/* ── Cursor blink ── */
.cursor-blink::after {
  content: '_';
  animation: blink 1s step-end infinite;
}
@keyframes blink {
  0%,50% { opacity: 1; }
  51%,100% { opacity: 0; }
}

/* ============================================================
   LAYOUT
   ============================================================ */
.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.content {
  flex: 1;
  max-width: 768px;
  margin: 0 auto;
  padding: 32px 16px;
  width: 100%;
}

/* ============================================================
   HEADER
   ============================================================ */
header {
  border-bottom: 1px solid var(--border);
}
.header-inner {
  max-width: 896px;
  margin: 0 auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  color: var(--primary);
  text-decoration: none;
  font-size: 14px;
}
.brand:visited { color: var(--primary); }
.brand:hover   { color: var(--primary); text-decoration: none; }
.brand-dollar  { color: var(--muted-foreground); }

nav {
  display: flex;
  gap: 16px;
}
nav a {
  font-size: 14px;
  color: var(--muted-foreground);
  text-decoration: none;
  transition: color .1s;
}
nav a:hover   { color: var(--foreground); }
nav a.active  { color: var(--primary); }
nav a:visited { color: var(--muted-foreground); }
nav a.active:visited { color: var(--primary); }

/* ============================================================
   THEME CONTROLS (header right side)
   ============================================================ */
.controls {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}

.ctrl-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted-foreground);
  font-family: var(--font);
  font-size: 12px;
  cursor: pointer;
  transition: border-color .1s;
}
.ctrl-btn:hover { border-color: var(--primary); }

.color-swatch {
  width: 12px;
  height: 12px;
  border: 1px solid var(--muted-foreground);
  display: inline-block;
  flex-shrink: 0;
}

/* Theme toggle pill */
.toggle-track {
  display: inline-flex;
  width: 32px;
  height: 16px;
  border: 1px solid var(--muted-foreground);
  background: var(--secondary);
  position: relative;
  transition: background .2s;
}
.toggle-track.on { background: var(--primary); }
.toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  background: var(--foreground);
  transition: left .15s;
}
.toggle-track.on .toggle-thumb { left: 18px; }

/* Color picker dropdown */
.color-picker-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  padding: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  z-index: 50;
  min-width: 210px;
}
.color-picker-dropdown.open { display: block; }

.picker-comment {
  font-size: 11px;
  color: var(--muted-foreground);
  margin-bottom: 10px;
}

.slider-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.slider-label {
  width: 18px;
  font-size: 12px;
}
.slider-label.r { color: var(--destructive); }
.slider-label.g { color: var(--primary); }
.slider-label.b { color: var(--link); }
.slider-val {
  width: 28px;
  font-size: 11px;
  text-align: right;
  color: var(--foreground);
}

input[type="range"] {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  background: var(--secondary);
  border: 1px solid var(--border);
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; height: 12px;
  background: var(--foreground);
  border: 1px solid var(--border);
  cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 12px; height: 12px;
  background: var(--foreground);
  border: 1px solid var(--border);
  cursor: pointer;
}

.color-preview-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: var(--secondary);
  margin: 10px 0;
}
.color-preview-box {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.color-hex { font-size: 11px; color: var(--foreground); }

.presets-label {
  font-size: 11px;
  color: var(--muted-foreground);
  margin-bottom: 6px;
}
.presets-row {
  display: flex;
  gap: 4px;
}
.preset-btn {
  flex: 1;
  padding: 4px 2px;
  font-size: 11px;
  border: 1px solid var(--border);
  background: transparent;
  font-family: var(--font);
  cursor: pointer;
  transition: border-color .1s;
}
.preset-btn:hover { border-color: var(--primary); }

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  border-top: 1px solid var(--border);
  margin-top: auto;
}
.footer-inner {
  max-width: 768px;
  margin: 0 auto;
  padding: 24px 16px;
}
.footer-top {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 14px;
  color: var(--muted-foreground);
}
@media (min-width: 540px) {
  .footer-top {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
.footer-links {
  display: flex;
  gap: 16px;
  align-items: center;
}
.footer-links a {
  color: var(--muted-foreground);
  text-decoration: none;
  transition: color .1s;
}
.footer-links a:hover  { color: var(--foreground); }
.footer-links a:visited { color: var(--muted-foreground); }
.footer-sep { color: var(--border); }
.footer-note {
  margin-top: 16px;
  font-size: 11px;
  color: var(--muted-foreground);
  opacity: .6;
}

/* ============================================================
   HOME PAGE
   ============================================================ */
.home-ascii { margin-bottom: 32px; overflow-x: auto; }

section { margin-bottom: 32px; }

.section-title {
  font-size: 14px;
  color: var(--primary);
  margin-bottom: 16px;
}

.prompt-line {
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 16px;
}
.prompt-line .arrow { color: var(--primary); }
.hl { color: var(--primary); }

.skills-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  font-size: 14px;
}
@media (max-width: 480px) { .skills-grid { grid-template-columns: 1fr; } }

.skill-group h4 {
  color: var(--foreground);
  margin-bottom: 8px;
  font-weight: 400;
}
.skill-group ul { list-style: none; }
.skill-group li {
  color: var(--muted-foreground);
  margin-bottom: 4px;
}
.skill-group li .bullet { color: var(--primary); }

.contact-block { font-size: 14px; }
.contact-block p { margin-bottom: 8px; }
.contact-block .label { color: var(--muted-foreground); }
.contact-block a { color: var(--primary); }
.contact-block a:hover { opacity: 0.8; }

.notice-box {
  margin-top: 24px;
  padding: 16px;
  border: 1px solid var(--border);
  background: var(--card);
  font-size: 14px;
}
.notice-box .comment-start { color: var(--primary); }

/* ============================================================
   PROJECTS PAGE
   ============================================================ */
.status-legend {
  font-size: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}

.projects-list { display: flex; flex-direction: column; gap: 4px; }

.project-row {
  border: 1px solid var(--border);
  padding: 16px;
  transition: border-color .15s;
}
.project-row:hover { border-color: rgba(0,255,0,0.4); }
:root.light .project-row:hover { border-color: rgba(0,102,0,0.4); }

.project-row-top {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}
@media (min-width: 540px) {
  .project-row-top {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
}

.project-name-wrap { display: flex; align-items: center; gap: 8px; }
.project-status-dot { font-size: 14px; }
.project-name {
  font-size: 14px;
  color: var(--foreground);
  text-decoration: none;
  transition: color .1s;
}
.project-name:hover   { color: var(--primary); }
.project-name:visited { color: var(--foreground); }

.project-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  color: var(--muted-foreground);
}
.lang-badge {
  border: 1px solid var(--border);
  padding: 1px 8px;
  font-size: 12px;
}
.stars { color: #ffcc00; }

.project-desc {
  font-size: 14px;
  color: var(--muted-foreground);
  padding-left: 20px;
  line-height: 1.6;
}

.project-type-badge {
  display: inline-block;
  font-size: 10px;
  border: 1px solid var(--border);
  padding: 1px 6px;
  color: var(--muted-foreground);
  margin-left: 8px;
}

.project-media {
  margin-top: 12px;
  padding-left: 20px;
}
.project-media img,
.project-media video {
  max-width: 100%;
  border: 1px solid var(--border);
  display: block;
}

.project-links-row {
  display: flex;
  gap: 12px;
  padding-left: 20px;
  margin-top: 10px;
}
.project-link-btn {
  font-size: 12px;
  color: var(--muted-foreground);
  text-decoration: none;
  border: 1px solid var(--border);
  padding: 2px 10px;
  transition: border-color .1s, color .1s;
}
.project-link-btn:hover { color: var(--primary); border-color: var(--primary); }

.projects-total {
  margin-top: 32px;
  font-size: 14px;
  color: var(--muted-foreground);
}

/* ============================================================
   BLOG LIST
   ============================================================ */
.blog-list { display: flex; flex-direction: column; }

.blog-entry {
  padding: 24px 0;
  border-bottom: 1px dashed var(--border);
}

.blog-entry-top {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}
@media (min-width: 540px) {
  .blog-entry-top {
    flex-direction: row;
    align-items: baseline;
    gap: 16px;
  }
}

.blog-date {
  font-size: 12px;
  color: var(--muted-foreground);
  white-space: nowrap;
  flex-shrink: 0;
}

.blog-title {
  font-size: 14px;
  color: var(--foreground);
  text-decoration: none;
  transition: color .1s;
}
.blog-title:hover   { color: var(--primary); }
.blog-title:visited { color: var(--foreground); }

.blog-excerpt {
  font-size: 14px;
  color: var(--muted-foreground);
  margin-bottom: 8px;
  line-height: 1.6;
}
@media (min-width: 540px) { .blog-excerpt { padding-left: 120px; } }

.blog-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
@media (min-width: 540px) { .blog-tags { padding-left: 120px; } }

.blog-tag {
  font-size: 12px;
  color: var(--primary);
  border: 1px solid rgba(0,255,0,0.3);
  padding: 1px 8px;
  text-decoration: none;
  opacity: .8;
}
:root.light .blog-tag {
  color: var(--primary);
  border-color: rgba(0,102,0,0.3);
}

.blog-count {
  margin-top: 32px;
  font-size: 14px;
  color: var(--muted-foreground);
}

.search-container {
  display: flex;
  gap: 8px;
  margin: 24px 0;
}
.search-container input {
  flex: 1;
  min-width: 0;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--foreground);
  font-family: inherit;
  font-size: 14px;
  padding: 8px 10px;
  outline: none;
  transition: border-color .1s;
}
.search-container input::placeholder { color: var(--muted-foreground); opacity: .7; }
.search-container input:focus { border-color: var(--primary); }

.search-container button {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--primary);
  font-family: inherit;
  font-size: 12px;
  padding: 8px 14px;
  cursor: pointer;
  transition: border-color .1s, background .1s;
}
.search-container button:hover { border-color: var(--primary); background: var(--card); }

/* ============================================================
   BLOG POST PAGE
   ============================================================ */
.back-link {
  font-size: 14px;
  color: var(--muted-foreground);
  text-decoration: none;
  display: inline-block;
  margin-bottom: 24px;
  transition: color .1s;
}
.back-link:hover   { color: var(--foreground); }
.back-link:visited { color: var(--muted-foreground); }
.back-link .arrow  { color: var(--primary); }

.post-header { margin-bottom: 32px; }
.post-header time {
  font-size: 12px;
  color: var(--muted-foreground);
  display: block;
  margin-bottom: 8px;
}
.post-header h1 {
  font-size: 18px;
  font-weight: 400;
  color: var(--foreground);
  margin-bottom: 16px;
  line-height: 1.4;
}
.post-tags { display: flex; flex-wrap: wrap; gap: 8px; }

/* Post body */
.post-body { font-size: 14px; line-height: 1.7; }
.post-body h2 {
  font-size: 14px;
  font-weight: 400;
  color: var(--primary);
  margin: 32px 0 16px;
}
.post-body h3 {
  font-size: 14px;
  font-weight: 400;
  color: var(--foreground);
  margin: 24px 0 12px;
}
.post-body p { color: var(--muted-foreground); margin-bottom: 1em; }
.post-body strong { color: var(--foreground); font-weight: 500; }
.post-body em { font-style: italic; color: var(--muted-foreground); opacity: .8; }
.post-body ul, .post-body ol { padding-left: 16px; margin-bottom: 1em; }
.post-body li { color: var(--muted-foreground); margin-bottom: 4px; }
.post-body li .bullet { color: var(--primary); }
.post-body a { color: var(--primary); }
.post-body a:hover { opacity: 0.8; }
.post-body blockquote {
  border-left: 2px solid var(--border);
  padding: 4px 12px;
  color: var(--muted-foreground);
  margin: 1em 0;
}
.post-body img {
  max-width: 100%;
  border: 1px solid var(--border);
  display: block;
  margin: 1em 0;
}

.eof-line {
  margin-top: 32px;
  font-size: 14px;
  color: var(--muted-foreground);
}

/* ============================================================
   LOADING / EMPTY
   ============================================================ */
.state-msg {
  font-size: 14px;
  color: var(--muted-foreground);
  padding: 32px 0;
}

/* ============================================================
   PROJECT DETAIL PAGE
   ============================================================ */
.project-detail-header { margin-bottom: 32px; }
.project-detail-header .project-status-line {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.project-detail-header h1 {
  font-size: 20px;
  font-weight: 400;
  color: var(--foreground);
  margin-bottom: 12px;
  line-height: 1.3;
}
.project-detail-header .project-desc-full {
  font-size: 14px;
  color: var(--muted-foreground);
  line-height: 1.7;
  margin-bottom: 20px;
}
.detail-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  font-size: 13px;
  margin-bottom: 24px;
  padding: 16px;
  background: var(--card);
  border: 1px solid var(--border);
}
@media (max-width: 480px) { .detail-meta-grid { grid-template-columns: 1fr; } }
.detail-meta-item .meta-label { color: var(--muted-foreground); }
.detail-meta-item .meta-val   { color: var(--foreground); }

.detail-links { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.detail-link-btn {
  font-size: 13px;
  color: var(--muted-foreground);
  text-decoration: none;
  border: 1px solid var(--border);
  padding: 5px 14px;
  font-family: var(--font);
  transition: border-color .1s, color .1s;
  background: transparent;
  cursor: pointer;
}
.detail-link-btn:hover  { color: var(--primary); border-color: var(--primary); }
.detail-link-btn:visited { color: var(--muted-foreground); }

/* Media gallery */
.project-gallery {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 24px 0;
}
.project-gallery img,
.project-gallery video {
  max-width: 100%;
  border: 1px solid var(--border);
  display: block;
}
.gallery-caption {
  font-size: 11px;
  color: var(--muted-foreground);
  margin-top: 4px;
}

/* Tags on detail page */
.detail-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }

/* ── read-time badge in blog list ── */
.read-time {
  font-size: 11px;
  color: var(--muted-foreground);
  margin-left: 4px;
}