:root{
  --bg:#F3F4EF;
  --surface:#FFFFFF;
  --surface-2:#E8EAE2;
  --ink:#1D2420;
  --ink-muted:#5B655C;
  --border:#D7DBD0;
  --accent:#255B55;
  --accent-ink:#FFFFFF;
  --accent-soft:#DCEAE7;
  --open:#3B6EA5;
  --open-soft:#E1EBF4;
  --clarify:#B9701F;
  --clarify-soft:#F5E7D4;
  --done:#3F7D4C;
  --done-soft:#E1EFE1;
  --danger:#AA3B36;
  --danger-soft:#F5E0DE;
  --shadow: 0 1px 2px rgba(29,36,32,0.06), 0 6px 16px -8px rgba(29,36,32,0.18);
  --radius: 10px;
  --focus: #255B55;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#141810;
    --surface:#1D231C;
    --surface-2:#252C22;
    --ink:#ECEFE7;
    --ink-muted:#9CA79A;
    --border:#333B30;
    --accent:#68B3A6;
    --accent-ink:#0E1512;
    --accent-soft:#203330;
    --open:#7EA9DD;
    --open-soft:#20293A;
    --clarify:#E3A25A;
    --clarify-soft:#382C1C;
    --done:#79C287;
    --done-soft:#1F3020;
    --danger:#E28781;
    --danger-soft:#3A211F;
    --shadow: 0 1px 2px rgba(0,0,0,0.35), 0 8px 20px -10px rgba(0,0,0,0.55);
    --focus:#8FD0C4;
  }
}

*{box-sizing:border-box;}
html,body{ margin:0; padding:0; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Libre Franklin", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ text-wrap:balance; font-family:"Libre Franklin", ui-sans-serif, sans-serif; margin:0; }
.mono{ font-family:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; font-variant-numeric:tabular-nums; }
button{ font-family:inherit; }
button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--focus); outline-offset:2px;
}
img{ max-width:100%; }
::selection{ background:var(--accent-soft); }

/* ---------- Gate ---------- */
#gate{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.gate-card{
  width:100%; max-width:360px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:32px 28px 28px;
  text-align:center;
}
.gate-mark{
  width:44px; height:44px; margin:0 auto 16px;
  border-radius:9px;
  background:var(--accent-soft);
  display:flex; align-items:center; justify-content:center;
}
.gate-mark svg{ width:22px; height:22px; stroke:var(--accent); }
.gate-card h1{ font-size:1.25rem; font-weight:700; }
.gate-card p{ margin:6px 0 20px; color:var(--ink-muted); font-size:0.9rem; }
.gate-form{ display:flex; flex-direction:column; gap:10px; }
.gate-input-row{ position:relative; }
#gate-password{
  width:100%;
  padding:11px 14px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--bg);
  color:var(--ink);
  font-size:1rem;
  letter-spacing:0.02em;
}
.gate-submit{
  padding:11px 14px;
  border-radius:8px;
  border:none;
  background:var(--accent);
  color:var(--accent-ink);
  font-weight:600;
  font-size:0.95rem;
  cursor:pointer;
  transition:opacity .15s ease;
}
.gate-submit:hover{ opacity:0.9; }
.gate-error{
  color:var(--danger);
  font-size:0.82rem;
  min-height:1.2em;
  margin-top:2px;
}

/* ---------- App shell ---------- */
#app{ display:flex; flex-direction:column; min-height:100vh; }
header.top{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:14px;
  padding:14px 20px;
  background:var(--bg);
  border-bottom:1px solid var(--border);
  flex-wrap:wrap;
}
header.top .brand{ display:flex; align-items:center; gap:10px; margin-right:auto; }
header.top .brand-mark{
  width:32px; height:32px; border-radius:8px;
  background:var(--accent-soft);
  display:flex; align-items:center; justify-content:center;
}
header.top .brand-mark svg{ width:17px; height:17px; stroke:var(--accent); }
header.top h1{ font-size:1.05rem; font-weight:700; }
header.top .brand-sub{ font-size:0.76rem; color:var(--ink-muted); }

.btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 13px;
  border-radius:7px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--ink);
  font-size:0.85rem;
  font-weight:500;
  cursor:pointer;
  text-decoration:none;
  transition:background .12s ease, border-color .12s ease;
  white-space:nowrap;
}
.btn:hover{ background:var(--surface-2); }
.btn svg{ width:15px; height:15px; stroke:currentColor; flex:none; }
.btn-primary{
  background:var(--accent); color:var(--accent-ink); border-color:var(--accent);
  font-weight:600;
}
.btn-primary:hover{ opacity:0.92; background:var(--accent); }
.btn-ghost{ background:transparent; border-color:transparent; color:var(--ink-muted); }
.btn-ghost:hover{ background:var(--surface-2); color:var(--ink); }
.btn-sm{ padding:6px 10px; font-size:0.78rem; border-radius:6px; }

main{ flex:1; padding:20px; max-width:1180px; margin:0 auto; width:100%; }

/* ---------- Composer ---------- */
.composer{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
  margin-bottom:22px;
}
.composer textarea{
  width:100%;
  min-height:52px;
  resize:vertical;
  border:none;
  background:transparent;
  color:var(--ink);
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:0.92rem;
  line-height:1.5;
  padding:2px 2px 8px;
}
.composer textarea:focus{ outline:none; }
.composer-footer{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding-top:10px; border-top:1px dashed var(--border);
}
.photo-input-btn{ position:relative; overflow:hidden; }
.photo-input-btn input{
  position:absolute; inset:0; opacity:0; cursor:pointer;
}
.composer-photo-previews{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.photo-chip{
  position:relative;
  width:40px; height:40px;
  border-radius:7px;
  overflow:hidden;
  border:1px solid var(--border);
  background:var(--surface-2);
}
.photo-chip img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.photo-chip-status{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:0.7rem; color:var(--ink-muted);
  background:var(--surface-2);
}
.photo-chip-remove{
  position:absolute; top:-1px; right:-1px;
  width:16px; height:16px;
  border-radius:50%;
  border:none;
  background:var(--danger);
  color:#fff;
  font-size:0.72rem;
  line-height:1;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  padding:0;
}
.composer-submit{ margin-left:auto; }

/* ---------- Board ---------- */
.board{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px;
  align-items:start;
}
@media (max-width:860px){
  .board{ grid-template-columns:1fr; }
}
.column{
  background:var(--surface-2);
  border-radius:12px;
  padding:12px;
  display:flex; flex-direction:column; gap:10px;
  min-height:120px;
}
.column-head{
  display:flex; align-items:center; gap:8px;
  padding:2px 4px 4px;
}
.column-stripe{ width:9px; height:9px; border-radius:50%; flex:none; }
.column-head h2{ font-size:0.86rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; }
.column-count{
  margin-left:auto;
  font-family:"IBM Plex Mono", monospace;
  font-size:0.72rem;
  color:var(--ink-muted);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:20px;
  padding:1px 8px;
}
.column-list{ display:flex; flex-direction:column; gap:10px; }
.column-empty{
  color:var(--ink-muted);
  font-size:0.82rem;
  padding:14px 6px;
  text-align:center;
  border:1px dashed var(--border);
  border-radius:8px;
}

/* ---------- Card ---------- */
.card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--border);
  border-left:3px solid var(--stripe, var(--border));
  border-radius:9px;
  box-shadow:var(--shadow);
  padding:12px 12px 10px;
}
.card-time{
  font-size:0.72rem;
  color:var(--ink-muted);
  margin-bottom:6px;
  display:block;
}
.card-text{
  white-space:pre-wrap;
  font-size:0.92rem;
  line-height:1.48;
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  margin-bottom:8px;
  word-break:break-word;
}
.card-photos{
  display:grid;
  gap:6px;
  margin-bottom:8px;
}
.card-photos-1{ grid-template-columns:1fr; }
.card-photos-2{ grid-template-columns:1fr 1fr; }
.card-photos-3{ grid-template-columns:1fr 1fr 1fr; }
.card-photo{
  display:block;
  width:100%;
  height:120px;
  object-fit:cover;
  border-radius:6px;
  border:1px solid var(--border);
  cursor:zoom-in;
}
.card-photos-1 .card-photo{ height:150px; }
.card-comment{
  background:var(--done-soft);
  border-radius:6px;
  padding:8px 10px;
  font-size:0.82rem;
  color:var(--ink);
  margin-bottom:8px;
}
.card-comment b{ display:block; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--done); margin-bottom:3px; }
.card-comment-clarify{ background:var(--clarify-soft); }
.card-comment-clarify b{ color:var(--clarify); }
.card-actions{ display:flex; flex-wrap:wrap; gap:6px; }

/* inline done-comment box */
.done-box{
  margin-top:8px; padding-top:8px; border-top:1px dashed var(--border);
  display:flex; flex-direction:column; gap:6px;
}
.done-box textarea{
  width:100%; min-height:44px; resize:vertical;
  border:1px solid var(--border); border-radius:6px;
  background:var(--bg); color:var(--ink);
  font-family:"IBM Plex Mono", monospace; font-size:0.82rem;
  padding:6px 8px;
}
.done-box-actions{ display:flex; gap:6px; justify-content:flex-end; }

.confirm-row{
  margin-top:8px; padding-top:8px; border-top:1px dashed var(--border);
  display:flex; align-items:center; gap:8px; font-size:0.8rem; color:var(--ink-muted);
}
.confirm-row .btn{ margin-left:auto; }

/* ---------- Lightbox ---------- */
#lightbox{
  display:none;
  position:fixed; inset:0; z-index:50;
  background:rgba(10,12,10,0.82);
  align-items:center; justify-content:center;
  padding:28px;
}
#lightbox img{
  max-width:100%; max-height:100%;
  border-radius:8px;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
}
#lightbox button{
  position:absolute; top:18px; right:22px;
  width:36px; height:36px; border-radius:50%;
  border:none; background:rgba(255,255,255,0.12);
  color:#fff; cursor:pointer; font-size:1.1rem; line-height:1;
}

.banner{
  font-size:0.78rem;
  padding:8px 20px;
  background:var(--clarify-soft);
  color:var(--clarify);
  text-align:center;
  border-bottom:1px solid var(--border);
}

@media (prefers-reduced-motion: reduce){
  .btn, .gate-submit{ transition:none; }
}