:root{
  --bg:#0d1117; --surface:#161b22; --border:#30363d;
  --text:#e6edf3; --muted:#8b949e;
  --blue:#58a6ff; --gold:#d29922; --green:#3fb950; --red:#f85149;
  --mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, "Segoe UI", "Noto Sans KR", system-ui, sans-serif;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--mono); font-size:14px; line-height:1.6;
}
a{color:var(--blue); text-decoration:none}
a:hover{text-decoration:underline}
.muted{color:var(--muted)}

/* ---- topbar ---- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 20px; border-bottom:1px solid var(--border);
  background:var(--surface); position:sticky; top:0; z-index:10;
}
.brand{font-weight:700; color:var(--text); font-size:16px}
.brand .colon{color:var(--gold)}
.topbar nav{display:flex; align-items:center; gap:16px}
.topbar nav a{color:var(--muted)}
.topbar nav a:hover{color:var(--text); text-decoration:none}
.topbar nav a.commit{color:var(--green)}
.who{color:var(--muted); font-size:12px; padding-left:6px; border-left:1px solid var(--border)}
.ghost{color:var(--muted)}

.wrap{max-width:820px; margin:0 auto; padding:28px 20px 80px}

.flash{
  background:rgba(210,153,34,.1); border:1px solid var(--gold);
  border-radius:6px; padding:10px 14px; margin-bottom:20px; color:var(--gold);
}

/* ---- git log ---- */
.loghead{color:var(--muted); margin-bottom:22px; font-size:13px}
.empty{color:var(--muted); padding:30px 0}

.graph{position:relative}
.entry{display:flex; gap:16px}
.rail{position:relative; width:14px; flex:none}
.rail::before{
  content:""; position:absolute; left:6px; top:0; bottom:-4px;
  width:1px; background:var(--border);
}
.entry:last-child .rail::before{bottom:auto; height:9px}
.node{
  position:absolute; left:1px; top:5px; width:11px; height:11px;
  border-radius:50%; background:var(--bg); border:2px solid var(--gold);
}
.entry .body{padding-bottom:22px; min-width:0}
.hash{color:var(--gold); font-weight:600; margin-right:10px}
.subject{color:var(--text); font-weight:600}
.subject:hover{color:var(--blue)}
.meta{color:var(--muted); font-size:12px; margin-top:4px}
.meta .author{color:var(--green)}
.meta .dot{margin:0 6px}
.amend{margin-left:8px; color:var(--gold)}

/* ---- detail ---- */
.detail-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px}
.hash.big{color:var(--gold); font-weight:600}
.actions{display:flex; gap:10px; align-items:center}
.detail-meta{
  color:var(--muted); font-size:12px; border-left:2px solid var(--border);
  padding-left:12px; margin-bottom:24px;
}
.detail-title{font-family:var(--sans); font-size:26px; line-height:1.3; margin:0 0 20px}
.prose{font-family:var(--sans); font-size:15.5px; line-height:1.75}
.prose h1,.prose h2,.prose h3{margin:1.6em 0 .6em; line-height:1.3}
.prose pre{
  background:var(--surface); border:1px solid var(--border); border-radius:6px;
  padding:14px; overflow:auto; font-family:var(--mono); font-size:13px;
}
.prose code{
  font-family:var(--mono); background:var(--surface);
  padding:.15em .4em; border-radius:4px; font-size:.9em;
}
.prose pre code{background:none; padding:0}
.prose table{border-collapse:collapse; margin:1em 0}
.prose th,.prose td{border:1px solid var(--border); padding:6px 12px}
.prose blockquote{
  border-left:3px solid var(--border); margin:1em 0; padding:.2em 1em; color:var(--muted);
}
.prose img{max-width:100%}
.back{display:inline-block; margin-top:32px; color:var(--muted)}

/* ---- editor ---- */
.editor-head,.editor-actions{margin:0}
.editor-head{color:var(--muted); margin-bottom:16px}
label{display:block; color:var(--muted); font-size:12px; margin:16px 0 6px}
input[type=text],input[type=password],textarea{
  width:100%; background:var(--bg); color:var(--text);
  border:1px solid var(--border); border-radius:6px; padding:10px 12px;
  font-family:var(--mono); font-size:14px;
}
textarea{resize:vertical; line-height:1.7}
input:focus,textarea:focus{outline:none; border-color:var(--blue)}
.editor-actions{display:flex; gap:12px; align-items:center; margin-top:20px}

button{
  background:var(--green); color:#04120a; border:none; border-radius:6px;
  padding:9px 18px; font-family:var(--mono); font-weight:600; font-size:13px; cursor:pointer;
}
button:hover{filter:brightness(1.1)}
button.danger{background:transparent; color:var(--red); padding:4px 8px; font-size:13px}
button.danger:hover{background:rgba(248,81,73,.12)}
form.upload,.actions form,.row-actions form,.detail-head form{display:inline}

/* ---- files ---- */
.upload{display:flex; gap:12px; align-items:center; margin:0 0 24px;
  background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:14px}
.upload input[type=file]{color:var(--muted); font-size:13px}
.uprog{color:var(--gold); font-size:13px; margin-left:4px}
.filetable{width:100%; border-collapse:collapse}
.filetable th{text-align:left; color:var(--muted); font-weight:500; font-size:12px;
  border-bottom:1px solid var(--border); padding:8px 10px}
.filetable td{border-bottom:1px solid var(--border); padding:9px 10px}
.filetable td.num{color:var(--muted); font-size:13px; white-space:nowrap}
.row-actions{text-align:right; white-space:nowrap}
.row-actions .ghost{margin-right:8px}

/* ---- login ---- */
.login-body{display:flex; align-items:center; justify-content:center; min-height:100vh}
.login-card{width:340px; max-width:90vw; background:var(--surface);
  border:1px solid var(--border); border-radius:10px; padding:26px}
.prompt{color:var(--green); font-size:13px; margin-bottom:20px}
.prompt .cmd{color:var(--text)}
.login-card button{width:100%; margin-top:22px; background:var(--blue); color:#04121f}

@media (max-width:560px){
  .topbar{flex-direction:column; gap:10px; align-items:flex-start}
  .who{border-left:none; padding-left:0}
}