:root{
  --bg:#0d1117;
  --surface:#161b22;
  --surface-strong:#0d1117;
  --surface-hover:#21262d;
  --border:#30363d;
  --text:#f0f6fc;
  --muted:#8b949e;
  --line:#6e7681;
  --accent:#58a6ff;
  --accent-soft:#1f6feb30;
  --blue:#79c0ff;
  --green:#7ee787;
  --orange:#ffa657;
  --purple:#d2a8ff;
  --yellow:#e3b341;
  --danger:#ff5f56;
  --warning:#ffbd2e;
  --success:#27c93f;
  --status:#007acc;
}

body.theme-light{
  --bg:#f6f8fa;
  --surface:#ffffff;
  --surface-strong:#f6f8fa;
  --surface-hover:#eaeef2;
  --border:#d0d7de;
  --text:#24292f;
  --muted:#57606a;
  --line:#8c959f;
  --accent:#0969da;
  --accent-soft:#ddf4ff;
  --blue:#0550ae;
  --green:#116329;
  --orange:#953800;
  --purple:#8250df;
  --yellow:#9a6700;
  --status:#0969da;
}

body.theme-dracula{
  --bg:#282a36;
  --surface:#21222c;
  --surface-strong:#282a36;
  --surface-hover:#343746;
  --border:#44475a;
  --text:#f8f8f2;
  --muted:#bd93f9;
  --line:#6272a4;
  --accent:#8be9fd;
  --accent-soft:#8be9fd24;
  --blue:#8be9fd;
  --green:#50fa7b;
  --orange:#ffb86c;
  --purple:#bd93f9;
  --yellow:#f1fa8c;
  --status:#bd93f9;
}

body.theme-monokai{
  --bg:#272822;
  --surface:#1f201b;
  --surface-strong:#272822;
  --surface-hover:#3e3d32;
  --border:#49483e;
  --text:#f8f8f2;
  --muted:#a6a58f;
  --line:#75715e;
  --accent:#66d9ef;
  --accent-soft:#66d9ef22;
  --blue:#66d9ef;
  --green:#a6e22e;
  --orange:#fd971f;
  --purple:#ae81ff;
  --yellow:#e6db74;
  --status:#a6e22e;
}

body.theme-nord{
  --bg:#2e3440;
  --surface:#3b4252;
  --surface-strong:#2e3440;
  --surface-hover:#434c5e;
  --border:#4c566a;
  --text:#eceff4;
  --muted:#d8dee9;
  --line:#81a1c1;
  --accent:#88c0d0;
  --accent-soft:#88c0d024;
  --blue:#81a1c1;
  --green:#a3be8c;
  --orange:#d08770;
  --purple:#b48ead;
  --yellow:#ebcb8b;
  --status:#5e81ac;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  background:var(--bg);
  color:var(--text);
  overflow:hidden;
  font-family:Consolas, "Courier New", monospace;
}

button,
input,
a{
  font:inherit;
}

button{
  border:0;
}

.app{
  width:100%;
  height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--bg);
}

.topbar{
  height:45px;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  padding:0 14px;
  flex:0 0 auto;
}

.dots{
  display:flex;
  gap:8px;
}

.dot{
  width:12px;
  height:12px;
  border-radius:50%;
}

.red{background:var(--danger);}
.yellow{background:var(--warning);}
.green{background:var(--success);}

.title-command{
  margin-left:20px;
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--muted);
  background:transparent;
  cursor:pointer;
  padding:5px 8px;
  border-radius:6px;
}

.title-command:hover,
.title-command:focus-visible{
  color:var(--text);
  background:var(--surface-hover);
  outline:0;
}

kbd{
  color:var(--muted);
  background:var(--surface-strong);
  border:1px solid var(--border);
  border-radius:4px;
  padding:1px 5px;
  font-size:11px;
}

.topbar-actions{
  margin-left:auto;
  display:flex;
  gap:6px;
}

.icon-button,
.sidebar-button,
.mobile-nav-button{
  background:transparent;
  color:var(--muted);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}

.icon-button{
  width:34px;
  height:34px;
  border-radius:6px;
  font-size:18px;
}

.icon-button:hover,
.icon-button:focus-visible{
  background:var(--surface-hover);
  color:var(--accent);
  outline:0;
}

.main{
  flex:1;
  min-height:0;
  display:flex;
}

.sidebar{
  width:60px;
  background:var(--bg);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-top:16px;
  gap:14px;
  flex:0 0 auto;
}

.sidebar-button{
  width:44px;
  height:44px;
  border-radius:6px;
  font-size:22px;
}

.sidebar-button:hover,
.sidebar-button:focus-visible,
.sidebar-button.active{
  color:var(--accent);
  background:var(--accent-soft);
  outline:0;
}

.explorer{
  width:292px;
  background:var(--surface);
  border-right:1px solid var(--border);
  padding:18px 14px;
  overflow-y:auto;
  flex:0 0 auto;
  transition:width .2s ease, padding .2s ease, border .2s ease;
}

body.explorer-collapsed .explorer{
  width:0;
  padding-left:0;
  padding-right:0;
  border-right:0;
  overflow:hidden;
}

.side-panel{
  display:none;
}

.side-panel.active{
  display:block;
}

.explorer h2{
  color:var(--muted);
  font-size:13px;
  margin:0 6px 18px;
  letter-spacing:1px;
}

.file-list,
.git-list,
.search-results,
.run-panel{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.file,
.search-result,
.git-item,
.run-button{
  width:100%;
  min-height:40px;
  padding:10px 12px;
  border-radius:6px;
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  color:var(--text);
  background:transparent;
  text-align:left;
  transition:background .2s ease, color .2s ease;
}

.file:hover,
.file:focus-visible,
.search-result:hover,
.search-result:focus-visible,
.run-button:hover,
.run-button:focus-visible{
  background:var(--surface-hover);
  outline:0;
}

.file.active{
  background:var(--accent-soft);
  color:var(--accent);
}

.file i,
.search-result i,
.run-button i{
  font-size:18px;
  flex:0 0 auto;
}

.search-box{
  height:38px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 10px;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--surface-strong);
  color:var(--muted);
  margin-bottom:12px;
}

.search-box input,
.terminal-form input,
.command-dialog input{
  width:100%;
  min-width:0;
  border:0;
  outline:0;
  color:var(--text);
  background:transparent;
}

.search-result{
  display:block;
}

.search-result strong,
.git-item strong{
  display:block;
  font-size:13px;
}

.search-result span,
.git-item span{
  display:block;
  color:var(--muted);
  font-size:12px;
  margin-top:3px;
}

.git-item{
  cursor:default;
}

.git-badge{
  width:22px;
  height:22px;
  border-radius:5px;
  display:grid;
  place-items:center;
  color:var(--surface-strong);
  background:var(--green);
  font-weight:700;
  flex:0 0 auto;
}

.content{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
}

.tabs{
  height:40px;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:thin;
  flex:0 0 auto;
}

.tab{
  height:100%;
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 8px 0 14px;
  border-right:1px solid var(--border);
  background:var(--surface);
  color:var(--muted);
  font-size:14px;
  white-space:nowrap;
  cursor:pointer;
  flex:0 0 auto;
  min-width:128px;
  max-width:230px;
  transition:background .2s ease, color .2s ease;
}

.tab:hover,
.tab:focus-visible{
  background:var(--surface-hover);
  color:var(--text);
  outline:0;
}

.tab.active{
  background:var(--surface-strong);
  color:var(--text);
  box-shadow:inset 0 2px 0 var(--accent);
}

.tab i{
  color:inherit;
  font-size:16px;
  flex:0 0 auto;
}

.tab-name{
  overflow:hidden;
  text-overflow:ellipsis;
}

.tab-close{
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  margin-left:auto;
  border-radius:4px;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
}

.tab-close:hover,
.tab-close:focus-visible{
  color:var(--text);
  background:var(--surface-hover);
  outline:0;
}

.tab.pinned .tab-close{
  visibility:hidden;
}

.breadcrumbs{
  min-height:31px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 18px;
  border-bottom:1px solid var(--border);
  background:var(--surface-strong);
  color:var(--muted);
  font-size:13px;
  flex:0 0 auto;
}

.breadcrumbs span:last-child{
  color:var(--text);
}

.editor{
  flex:1;
  min-height:0;
  overflow-y:auto;
  padding:30px 32px;
  scroll-behavior:smooth;
}

.section{
  display:block;
}

.editor-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:22px;
  color:var(--muted);
}

.mode-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:32px;
  padding:0 10px;
  border:1px solid var(--border);
  border-radius:999px;
  color:var(--muted);
  background:var(--surface);
  font-size:13px;
}

.line{
  display:grid;
  grid-template-columns:48px minmax(0, 1fr);
  gap:12px;
  min-height:25px;
  margin-bottom:6px;
}

.number{
  color:var(--line);
  user-select:none;
  text-align:right;
}

.code{
  color:var(--text);
  line-height:1.7;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

.blue{color:var(--blue);}
.green-text{color:var(--green);}
.orange{color:var(--orange);}
.purple{color:var(--purple);}
.gray{color:var(--muted);}
.yellow-text{color:var(--yellow);}

.hero{
  max-width:940px;
  margin-top:18px;
}

.eyebrow{
  color:var(--green);
  font-size:15px;
  margin-bottom:14px;
}

.typing-line{
  display:inline;
}

.hero h1{
  max-width:850px;
  font-family:"Segoe UI", Arial, sans-serif;
  font-size:clamp(2.4rem, 7vw, 4.7rem);
  line-height:1.05;
  margin-bottom:20px;
  color:var(--text);
}

.hero h1 span{
  color:var(--accent);
}

.hero p{
  max-width:780px;
  color:var(--muted);
  line-height:1.8;
  font-family:"Segoe UI", Arial, sans-serif;
  font-size:1.05rem;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:28px;
}

.action-link,
.card-actions a,
.contact-card a,
.project-open{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:38px;
  padding:0 12px;
  border:1px solid var(--border);
  border-radius:6px;
  color:var(--text);
  background:var(--surface);
  text-decoration:none;
  cursor:pointer;
  transition:border .2s ease, color .2s ease, transform .2s ease;
}

.action-link:hover,
.action-link:focus-visible,
.card-actions a:hover,
.card-actions a:focus-visible,
.contact-card a:hover,
.contact-card a:focus-visible,
.project-open:hover,
.project-open:focus-visible{
  border-color:var(--accent);
  color:var(--accent);
  transform:translateY(-1px);
  outline:0;
  text-decoration:none;
}

.inline-terminal{
  max-width:760px;
  margin-top:30px;
  padding:18px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  color:var(--muted);
}

.terminal-line{
  margin-bottom:8px;
}

.cursor{
  display:inline-block;
  width:9px;
  height:18px;
  margin-left:3px;
  background:var(--accent);
  vertical-align:middle;
  animation:blink 1s steps(2, start) infinite;
}

.project-grid,
.contact-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  gap:14px;
  max-width:980px;
  margin-top:24px;
}

.project-card,
.contact-card,
.preview-panel{
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  padding:18px;
}

.project-card h3,
.contact-card h3,
.preview-panel h3{
  font-family:"Segoe UI", Arial, sans-serif;
  font-size:1.05rem;
  margin-bottom:10px;
}

.project-card p,
.contact-card p,
.preview-panel p{
  color:var(--muted);
  line-height:1.65;
  margin-bottom:14px;
}

.tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:16px;
}

.tag{
  padding:4px 8px;
  border-radius:999px;
  color:var(--green);
  background:color-mix(in srgb, var(--green) 14%, transparent);
  font-size:12px;
}

.card-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.terminal-panel{
  height:190px;
  border-top:1px solid var(--border);
  background:var(--surface-strong);
  display:flex;
  flex-direction:column;
  flex:0 0 auto;
}

body.terminal-collapsed .terminal-panel{
  height:34px;
}

body.terminal-collapsed .terminal-output,
body.terminal-collapsed .terminal-form{
  display:none;
}

.terminal-header{
  height:34px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 12px;
  color:var(--muted);
  border-bottom:1px solid var(--border);
  font-size:12px;
}

.terminal-close{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:5px;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
}

.terminal-close:hover,
.terminal-close:focus-visible{
  color:var(--text);
  background:var(--surface-hover);
  outline:0;
}

.terminal-output{
  flex:1;
  overflow-y:auto;
  padding:10px 14px;
  color:var(--muted);
  font-size:13px;
}

.terminal-form{
  height:34px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 14px;
  border-top:1px solid var(--border);
  color:var(--green);
}

.status-bar{
  height:24px;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:4px;
  padding:0 8px;
  background:var(--status);
  color:#fff;
  font-size:12px;
}

.status-item{
  min-height:24px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:0 8px;
  border-radius:0;
  color:inherit;
  background:transparent;
  text-decoration:none;
}

button.status-item{
  cursor:pointer;
}

button.status-item:hover,
button.status-item:focus-visible{
  background:rgba(255,255,255,.14);
  outline:0;
}

.command-palette{
  position:fixed;
  inset:0;
  display:none;
  justify-content:center;
  align-items:flex-start;
  padding-top:9vh;
  background:rgba(0,0,0,.35);
  z-index:50;
}

.command-palette.open{
  display:flex;
}

.command-dialog{
  width:min(640px, calc(100vw - 28px));
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  box-shadow:0 22px 70px rgba(0,0,0,.35);
  overflow:hidden;
}

.command-dialog input{
  height:52px;
  padding:0 16px;
  border-bottom:1px solid var(--border);
}

.command-results{
  max-height:360px;
  overflow-y:auto;
  padding:8px;
}

.command-item{
  width:100%;
  min-height:42px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:6px;
  color:var(--text);
  background:transparent;
  cursor:pointer;
  text-align:left;
}

.command-item:hover,
.command-item:focus-visible,
.command-item.active{
  background:var(--accent-soft);
  color:var(--accent);
  outline:0;
}

.mobile-nav{
  display:none;
  height:58px;
  background:var(--surface);
  border-top:1px solid var(--border);
  flex:0 0 auto;
}

.mobile-nav-button{
  flex:1;
  gap:3px;
  font-size:18px;
}

.mobile-nav-button span{
  font-size:10px;
}

.mobile-nav-button.active{
  color:var(--accent);
}

@keyframes blink{
  50%{
    opacity:0;
  }
}

@media(max-width:900px){
  .title-command kbd{
    display:none;
  }

  .sidebar{
    display:none;
  }

  .explorer{
    position:fixed;
    left:0;
    top:45px;
    bottom:82px;
    z-index:20;
    box-shadow:16px 0 36px rgba(0,0,0,.28);
  }

  body.explorer-collapsed .explorer{
    transform:translateX(-100%);
    width:292px;
    padding:18px 14px;
    border-right:1px solid var(--border);
  }

  .editor{
    padding:22px 16px;
  }

  .hero{
    margin-top:8px;
  }

  .line{
    grid-template-columns:34px minmax(0, 1fr);
    gap:10px;
  }

  .terminal-panel{
    height:160px;
  }

  .status-bar{
    display:none;
  }

  .mobile-nav{
    display:flex;
  }
}