:root {
  --bg: #16181c; --bg2: #1e2127; --bg3: #262a31;
  --fg: #e8e8e6; --dim: #9aa0a8; --acc: #d98e5f; --accd: #b06f44;
  --ok: #6fbf73; --edit: #e0b14c; --line: #32373f;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body, #app { height: 100%; }
body { background: var(--bg); color: var(--fg);
  font: 13px/1.45 -apple-system, "Segoe UI", sans-serif; overflow: hidden; }
#app { display: flex; }

/* sidebar */
#sidebar { width: 270px; min-width: 270px; background: var(--bg2);
  border-right: 1px solid var(--line); display: flex; flex-direction: column; }
#side-head { padding: 12px 12px 8px; border-bottom: 1px solid var(--line); }
#side-head h1 { font-size: 15px; color: var(--acc); margin-bottom: 8px; }
#lang-row { display: flex; gap: 6px; margin-bottom: 8px; }
.lang { padding: 3px 10px; font-size: 12px; }
.lang.active { background: var(--acc); color: #1b1b19; border-color: var(--acc);
  font-weight: 600; }
#tree { overflow-y: auto; flex: 1; padding: 6px 0; }
.folder > .fname { padding: 6px 12px; cursor: pointer; color: var(--dim);
  font-weight: 600; user-select: none; }
.folder > .fname:hover { color: var(--fg); }
.folder.open > .fname { color: var(--fg); }
.photos { display: none; }
.folder.open .photos { display: block; }
.photo { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 20px;
  cursor: pointer; border-left: 3px solid transparent; }
.photo:hover { background: var(--bg3); }
.photo.active { background: var(--bg3); border-left-color: var(--acc); }
.photo img { width: 54px; height: 36px; object-fit: cover; border-radius: 3px;
  background: #000; }
.photo .pname { flex: 1; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: 12px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: #4a4f57;
  flex: none; }
.dot.edited { background: var(--edit); }
.dot.done { background: var(--ok); }

/* toolbar */
#main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#toolbar { display: flex; gap: 14px; align-items: center; padding: 8px 12px;
  background: var(--bg2); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tool-group { display: flex; gap: 6px; align-items: center; }
.tool-group.right { margin-left: auto; }
button { background: var(--bg3); color: var(--fg); border: 1px solid var(--line);
  border-radius: 6px; padding: 6px 10px; cursor: pointer; font-size: 12.5px; }
button:hover { border-color: var(--acc); }
button.tool.active { background: var(--acc); color: #1b1b19; border-color: var(--acc);
  font-weight: 600; }
button:disabled { opacity: .4; cursor: default; }
#btn-done.is-done { background: var(--ok); color: #10240f; border-color: var(--ok); }
label { color: var(--dim); display: flex; gap: 6px; align-items: center; }
input[type=range] { width: 110px; accent-color: var(--acc); }

/* viewport */
#viewport { flex: 1; position: relative; overflow: hidden; background: #101114; }
#canvas { position: absolute; inset: 0; width: 100%; height: 100%;
  cursor: crosshair; touch-action: none; }
#hint { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; color: var(--dim); font-size: 15px; pointer-events: none; }
#busy[hidden] { display: none; }
#busy { position: absolute; top: 14px; right: 14px; background: rgba(20,22,26,.92);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 14px;
  display: flex; gap: 10px; align-items: center; color: var(--acc); }
.spin { width: 14px; height: 14px; border: 2px solid var(--acc);
  border-top-color: transparent; border-radius: 50%;
  animation: sp .7s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }

/* status bar */
#statusbar { display: flex; gap: 18px; padding: 5px 12px; background: var(--bg2);
  border-top: 1px solid var(--line); color: var(--dim); font-size: 12px; }
#statusbar .grow { flex: 1; }
#st-flag.done { color: var(--ok); }
#st-flag.edited { color: var(--edit); }
.keys { opacity: .65; }

/* access gate */
#gate { position: fixed; inset: 0; background: var(--bg); z-index: 60;
  display: flex; align-items: center; justify-content: center; }
#gate[hidden] { display: none; }
#gate-card { background: var(--bg2); border: 1px solid var(--line);
  border-radius: 12px; padding: 28px 32px; width: 320px; text-align: center; }
#gate-card h2 { color: var(--acc); margin-bottom: 10px; }
#gate-card p { color: var(--dim); margin-bottom: 14px; }
#gate-input { width: 100%; padding: 9px 12px; margin-bottom: 10px;
  background: var(--bg3); border: 1px solid var(--line); border-radius: 6px;
  color: var(--fg); font-size: 15px; text-align: center; }
#gate-btn { width: 100%; background: var(--acc); color: #1b1b19;
  font-weight: 600; padding: 9px; }
#gate-err { color: #e07a6a; margin-top: 10px; }

/* help overlay */
#help { position: fixed; inset: 0; background: rgba(8,9,11,.72); z-index: 40;
  display: flex; align-items: center; justify-content: center; }
#help[hidden] { display: none; }
#help-card { background: var(--bg2); border: 1px solid var(--line); border-radius: 12px;
  max-width: 640px; max-height: 86vh; overflow-y: auto; padding: 22px 26px;
  box-shadow: 0 18px 50px rgba(0,0,0,.5); }
#help-card h2 { color: var(--acc); font-size: 17px; margin-bottom: 12px;
  display: flex; justify-content: space-between; align-items: center; }
#help-card ol { margin: 8px 0 8px 20px; }
#help-card li { margin: 6px 0; }
#help-card table { margin: 6px 0 6px 6px; border-collapse: collapse; }
#help-card td { padding: 5px 10px 5px 0; vertical-align: top; }
#help-card td:first-child { white-space: nowrap; }
kbd { background: var(--bg3); border: 1px solid var(--line); border-radius: 4px;
  padding: 1px 6px; font-size: 11.5px; }
.help-note { margin-top: 12px; color: var(--dim); border-top: 1px solid var(--line);
  padding-top: 10px; }

#toast { position: fixed; bottom: 42px; left: 50%; transform: translateX(-50%);
  background: var(--bg3); border: 1px solid var(--acc); color: var(--fg);
  padding: 9px 18px; border-radius: 8px; z-index: 50; max-width: 70vw; }