:root{
  --bg:#16161e;
  --surface:#1c1c28;
  --surface-2:#22222f;
  --border:#2c2c3d;
  --text:#e4e4ef;
  --muted:#6f7086;
  --purple:#b4a1ff;
  --amber:#ffb86c;
  --teal:#7ec8e3;
  --green:#8fbf8f;
  --pink:#ff9ac1;
  --font-mono:'JetBrains Mono', 'Fira Code', monospace;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-mono);
  height:100%;
  overflow:hidden;
}
::selection{background:var(--purple); color:var(--bg);}

/* ===== LAYOUT ===== */
.app{
  display:grid;
  grid-template-columns:52px 220px 1fr;
  grid-template-rows:38px 1fr auto;
  grid-template-areas:
    "titlebar titlebar titlebar"
    "activity sidebar main"
    "status status status";
  height:100vh;
}
@media (max-width:760px){
  .app{grid-template-columns:0px 0px 1fr;}
  .activitybar, .sidebar{display:none;}
}

/* ===== TITLEBAR ===== */
.titlebar{
  grid-area:titlebar;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  padding:0 12px;
  gap:8px;
  font-size:12px;
  color:var(--muted);
}
.dots{display:flex; gap:6px; margin-right:10px;}
.dot{width:11px; height:11px; border-radius:50%;}
.dot.r{background:#ff5f57;} .dot.y{background:#febc2e;} .dot.g{background:#28c840;}

/* ===== ACTIVITY BAR ===== */
.activitybar{
  grid-area:activity;
  background:var(--surface);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-top:12px;
  gap:6px;
}
.abtn{
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  border-radius:6px;
  color:var(--muted);
  cursor:pointer;
  font-size:16px;
  border-left:2px solid transparent;
}
.abtn.active{color:var(--text); background:var(--surface-2); border-left:2px solid var(--purple);}
.abtn:hover{color:var(--text);}

/* ===== SIDEBAR (file tree) ===== */
.sidebar{
  grid-area:sidebar;
  background:var(--surface);
  border-right:1px solid var(--border);
  padding:14px 0;
  overflow-y:auto;
}
.sb-title{
  font-size:11px; letter-spacing:1px; text-transform:uppercase;
  color:var(--muted); padding:0 16px 10px; font-weight:600;
}
.file{
  display:flex; align-items:center; gap:8px;
  padding:6px 16px;
  font-size:13px;
  color:var(--muted);
  cursor:pointer;
  border-left:2px solid transparent;
}
.file .ico{font-size:13px;}
.file:hover{background:var(--surface-2); color:var(--text);}
.file.active{background:var(--surface-2); color:var(--text); border-left:2px solid var(--purple);}
.file .name b{color:inherit; font-weight:500;}
.ext-js{color:var(--amber);}
.ext-json{color:var(--teal);}
.ext-md{color:var(--purple);}

/* ===== MAIN ===== */
.main{
  grid-area:main;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.tabs{
  display:flex;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  height:38px;
  flex-shrink:0;
  overflow-x:auto;
}
.tab{
  display:flex; align-items:center; gap:8px;
  padding:0 14px;
  font-size:12.5px;
  color:var(--muted);
  border-right:1px solid var(--border);
  cursor:pointer;
  white-space:nowrap;
}
.tab.active{color:var(--text); background:var(--bg); border-top:2px solid var(--purple);}

.editor{
  flex:1;
  overflow-y:auto;
  padding:28px 40px 60px;
  line-height:1.85;
  font-size:14.5px;
}
.editor::-webkit-scrollbar{width:10px;}
.editor::-webkit-scrollbar-thumb{background:var(--border); border-radius:6px;}

.ln{color:#3d3d52; display:inline-block; width:28px; user-select:none; text-align:right; margin-right:20px; font-size:13px;}
.cmt{color:var(--muted);}
.kw{color:var(--purple); font-weight:600;}
.str{color:var(--green);}
.fn{color:var(--teal);}
.prop{color:var(--pink);}
.num{color:var(--amber);}
.code-line{white-space:pre-wrap;}

h1.hero-name{
  font-size:38px;
  color:var(--text);
  margin:6px 0 4px 48px;
  font-weight:700;
}
.hero-role{
  margin-left:48px;
  color:var(--amber);
  font-size:15px;
  margin-bottom:22px;
}
.cursor-blink{
  display:inline-block; width:9px; height:18px;
  background:var(--purple);
  animation:blink 1s steps(1) infinite;
  vertical-align:middle;
  margin-left:2px;
}
@keyframes blink{50%{opacity:0;}}

.card{
  margin:18px 0 18px 48px;
  padding:16px 18px;
  background:var(--surface);
  border:1px solid var(--border);
  border-left:3px solid var(--teal);
  border-radius:6px;
  max-width:640px;
}
.card h3{font-size:15px; color:var(--text); margin-bottom:6px;}
.card p{color:var(--muted); font-size:13px; line-height:1.6;}
.tag{
  display:inline-block;
  font-size:11px;
  color:var(--purple);
  background:rgba(180,161,255,0.1);
  border:1px solid rgba(180,161,255,0.3);
  padding:2px 8px;
  border-radius:20px;
  margin:6px 6px 0 0;
}
.skill-row{
  display:flex; align-items:center; gap:14px;
  margin:10px 0 10px 48px;
  max-width:520px;
}
.skill-row .label{width:120px; font-size:13px; color:var(--text); flex-shrink:0;}
.bar{flex:1; height:6px; background:var(--surface-2); border-radius:4px; overflow:hidden;}
.bar-fill{height:100%; background:linear-gradient(90deg, var(--purple), var(--teal)); border-radius:4px;}
.pct{font-size:12px; color:var(--muted); width:34px;}

a.link{color:var(--teal); text-decoration:none; border-bottom:1px dotted var(--teal);}
a.link:hover{color:var(--text); border-color:var(--text);}

.tab-content{display:none;}
.tab-content.active{display:block;}
.about-layout {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 28px;
    margin-left: 48px;
    margin-top: 18px;
    padding-right: 40px;
}

.about-layout .card {
    flex: 1;
    margin: 0;
    max-width: none;
}
.photo-frame {
    width: 190px;
    min-width: 190px;
    height: 230px;
    flex-shrink: 0;

    border: 2px solid var(--amber);
    border-radius: 12px;
    padding: 6px;

    background: rgba(255,255,255,0.03);
    box-shadow: 0 0 20px rgba(0,0,0,0.25);

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}

.photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

/* ===== STATUS BAR ===== */
.statusbar{
  grid-area:status;
  background:var(--purple);
  color:#1a1a24;
  font-size:11.5px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 12px;
  height:24px;
  font-weight:600;
}
.statusbar .left, .statusbar .right{display:flex; gap:16px; align-items:center;}
.statusbar span{cursor:pointer;}

/* ===== TERMINAL DRAWER ===== */
.terminal{
  position:fixed;
  left:52px; right:0; bottom:24px;
  height:0;
  background:#0f0f16;
  border-top:1px solid var(--border);
  overflow:hidden;
  transition:height .25s ease;
  z-index:20;
  display:flex;
  flex-direction:column;
}
@media (max-width:760px){ .terminal{left:0;} }
.terminal.open{height:230px;}
.term-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:6px 14px;
  background:var(--surface);
  font-size:11px;
  color:var(--muted);
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.term-head span.x{cursor:pointer; color:var(--muted);}
.term-head span.x:hover{color:var(--text);}
.term-body{
  flex:1;
  padding:10px 14px;
  overflow-y:auto;
  font-size:13px;
  line-height:1.7;
}
.term-line{color:var(--text);}
.term-line.out{color:var(--muted);}
.term-line .prompt{color:var(--green); margin-right:6px;}
.term-input-row{display:flex; align-items:center; gap:6px;}
.term-input-row input{
  flex:1;
  background:transparent;
  border:none;
  outline:none;
  color:var(--text);
  font-family:var(--font-mono);
  font-size:13px;
}