:root{
  --paper: #FAF6EC;
  --paper-dark: #F1EADA;
  --ink: #242119;
  --ink-soft: #5B564A;
  --line: #D9CFB8;
  --red: #B23A2E;
  --red-dark: #8E2C22;

  --bio: #7C5A38;
  --bio-bg: #EFE6D6;
  --plastic: #C98F00;
  --plastic-bg: #FBEFCB;
  --paper-bin: #2E6C8E;
  --paper-bin-bg: #E2EEF3;

  --bathroom: #2F6E6E;
  --bathroom-bg: #E3EFEE;
  --kitchen: #B85C2C;
  --kitchen-bg: #F5E6D9;

  --jubayer: #2F4B8C;
  --jubayer-bg: #E3E8F5;
  --mahin: #8E4585;
  --mahin-bg: #F1E3EE;
  --razim: #3F8F5C;
  --razim-bg: #E1F0E6;

  --act-clean: #2F6E6E;
  --act-clean-bg: #E3EFEE;
  --act-trash: #6B7A3A;
  --act-trash-bg: #ECEEDD;

  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Work Sans", -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", "Courier New", monospace;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  background:
    linear-gradient(var(--paper-dark) 1px, transparent 1px) 0 0/100% 32px,
    var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  min-height:100vh;
  padding:24px 16px 60px;
}

.sheet{
  max-width:640px;
  margin:0 auto;
}

/* Letterhead */
.letterhead{
  display:flex;
  align-items:center;
  gap:14px;
  border-bottom:3px solid var(--ink);
  padding-bottom:14px;
  margin-bottom:22px;
}
.stamp-badge{
  flex:0 0 auto;
  width:46px; height:46px;
  border:2px solid var(--ink);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display);
  font-size:22px;
  transform:rotate(-8deg);
}
.letterhead-text h1{
  font-family:var(--font-display);
  font-weight:700;
  font-size:30px;
  letter-spacing:0.5px;
  margin:0;
  text-transform:uppercase;
}
.subline{
  margin:2px 0 0;
  font-size:12.5px;
  color:var(--ink-soft);
  font-family:var(--font-mono);
}

/* Form window */
.form-window{
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 1px 0 var(--line), 0 6px 18px rgba(36,33,25,0.06);
  border-radius:4px;
  padding:22px 20px 26px;
  margin-bottom:34px;
}

.form-progress{
  display:flex;
  align-items:baseline;
  gap:12px;
  margin-bottom:20px;
  flex-wrap:wrap;
}
.progress-label{
  font-family:var(--font-mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--ink-soft);
}
.progress-steps{
  display:flex;
  gap:6px;
  font-family:var(--font-mono);
  font-size:11px;
  flex-wrap:wrap;
}
.progress-steps .step{
  padding:2px 8px;
  border:1px solid var(--line);
  border-radius:20px;
  color:var(--ink-soft);
}
.progress-steps .step.active{
  border-color:var(--ink);
  color:var(--ink);
  font-weight:600;
}
.progress-steps .step.done{
  border-color:var(--red);
  color:var(--red);
}

.step-panel{ display:none; }
.step-panel.active{ display:block; animation:fadeIn .25s ease; }

@keyframes fadeIn{
  from{ opacity:0; transform:translateY(4px); }
  to{ opacity:1; transform:translateY(0); }
}

.q{
  font-family:var(--font-display);
  font-size:22px;
  font-weight:600;
  margin:0 0 4px;
  text-transform:uppercase;
  letter-spacing:0.3px;
}
.hint{
  margin:0 0 18px;
  color:var(--ink-soft);
  font-size:14px;
}

/* Card grids */
.card-grid{
  display:grid;
  gap:10px;
  margin-bottom:6px;
}
.card-grid.three{ grid-template-columns:repeat(3,1fr); }
.card-grid.two{ grid-template-columns:repeat(2,1fr); }

@media (max-width:420px){
  .card-grid.three{ grid-template-columns:repeat(2,1fr); }
}

.pick-card{
  font-family:var(--font-body);
  background:var(--paper);
  border:1.5px solid var(--line);
  border-top:4px solid var(--line);
  border-radius:8px;
  padding:16px 8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  cursor:pointer;
  transition:border-color .15s, transform .12s, background .15s, box-shadow .15s;
  text-align:center;
}
.pick-card:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 10px rgba(36,33,25,0.08);
}
.pick-card:active{ transform:translateY(0) scale(0.97); }
.pick-card:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }

.pick-card .initial{
  font-family:var(--font-display);
  font-size:20px;
  width:36px; height:36px;
  border-radius:50%;
  background:var(--ink);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.pick-card .name{ font-weight:600; font-size:14.5px; }
.pick-card .emoji{ font-size:28px; }
.pick-card .sub{ font-size:11.5px; color:var(--ink-soft); font-family:var(--font-mono); }

.pick-card.big{ padding:22px 10px; }

/* --- Colored boxes: every card carries its category color, even before selection --- */
.pick-card[data-tone]{ background:var(--tone-bg); border-top-color:var(--tone); }
.pick-card[data-tone]:hover{ border-color:var(--tone); }
.pick-card[data-tone] .initial{ background:var(--tone); }

.pick-card[data-tone="bio"]{ --tone:var(--bio); --tone-bg:var(--bio-bg); }
.pick-card[data-tone="plastic"]{ --tone:var(--plastic); --tone-bg:var(--plastic-bg); }
.pick-card[data-tone="paper"]{ --tone:var(--paper-bin); --tone-bg:var(--paper-bin-bg); }
.pick-card[data-tone="bathroom"]{ --tone:var(--bathroom); --tone-bg:var(--bathroom-bg); }
.pick-card[data-tone="kitchen"]{ --tone:var(--kitchen); --tone-bg:var(--kitchen-bg); }
.pick-card[data-tone="jubayer"]{ --tone:var(--jubayer); --tone-bg:var(--jubayer-bg); }
.pick-card[data-tone="mahin"]{ --tone:var(--mahin); --tone-bg:var(--mahin-bg); }
.pick-card[data-tone="razim"]{ --tone:var(--razim); --tone-bg:var(--razim-bg); }
.pick-card[data-tone="act-clean"]{ --tone:var(--act-clean); --tone-bg:var(--act-clean-bg); }
.pick-card[data-tone="act-trash"]{ --tone:var(--act-trash); --tone-bg:var(--act-trash-bg); }

/* Selected = solid fill, white text, deeper border */
.pick-card.selected{
  background:var(--tone, var(--red));
  border-color:var(--tone, var(--red));
  border-top-color:var(--tone, var(--red));
}
.pick-card.selected .name,
.pick-card.selected .sub{ color:#fff; }
.pick-card.selected .initial{
  background:#fff;
  color:var(--tone, var(--red));
}
/* Plain (no data-tone) cards fall back to red on selection — none currently, kept for safety */
.pick-card.selected:not([data-tone]){ background:#FDF1EF; }

.card-grid + .submit-btn{ margin-top:14px; }

.back-link{
  background:none;
  border:none;
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--ink-soft);
  cursor:pointer;
  padding:10px 0 0;
}
.back-link:hover{ color:var(--ink); text-decoration:underline; }

/* Date field */
.date-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:16px;
  max-width:220px;
}
.date-field label{
  font-family:var(--font-mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--ink-soft);
}
.date-field input{
  font-family:var(--font-mono);
  font-size:15px;
  padding:9px 10px;
  border:1.5px solid var(--line);
  border-radius:5px;
  background:var(--paper);
  color:var(--ink);
}
.date-field input:focus-visible{ outline:2px solid var(--red); outline-offset:1px; }

.summary-box{
  font-family:var(--font-mono);
  font-size:13px;
  background:var(--paper);
  border:1px dashed var(--line);
  border-radius:5px;
  padding:12px 14px;
  margin-bottom:18px;
  color:var(--ink-soft);
  line-height:1.6;
}
.summary-box b{ color:var(--ink); }

.submit-btn{
  font-family:var(--font-display);
  font-size:16px;
  letter-spacing:0.5px;
  text-transform:uppercase;
  background:var(--red);
  color:#fff;
  border:none;
  border-radius:5px;
  padding:13px 20px;
  width:100%;
  cursor:pointer;
  transition:background .15s, transform .1s;
}
.submit-btn:hover{ background:var(--red-dark); }
.submit-btn:active{ transform:scale(0.98); }
.submit-btn:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.submit-btn.ghost{
  background:transparent;
  color:var(--ink);
  border:1.5px solid var(--ink);
  margin-top:22px;
}
.submit-btn.ghost:hover{ background:var(--ink); color:var(--paper); }
.submit-btn:disabled{ opacity:0.45; cursor:not-allowed; }

/* Success / stamp */
[data-panel="done"]{
  text-align:center;
  padding:20px 0 6px;
}
.stamp-anim{ display:flex; justify-content:center; margin-bottom:12px; }
.stamp-mark{
  font-family:var(--font-display);
  font-size:26px;
  letter-spacing:2px;
  color:var(--red);
  border:4px solid var(--red);
  border-radius:10px;
  padding:10px 22px;
  transform:rotate(-9deg) scale(0.5);
  opacity:0;
  animation:stampDown .45s cubic-bezier(.2,.9,.3,1.3) forwards;
}
@keyframes stampDown{
  0%{ transform:rotate(-9deg) scale(2.2); opacity:0; }
  60%{ transform:rotate(-9deg) scale(0.92); opacity:1; }
  100%{ transform:rotate(-9deg) scale(1); opacity:1; }
}
.done-text{
  font-family:var(--font-mono);
  color:var(--ink-soft);
  font-size:14px;
  margin:14px 0 0;
}

/* Admin portal */
.admin-portal-box{
  margin:0 0 14px;
  display:flex;
  justify-content:flex-end;
}
.admin-login-group{
  display:flex;
  gap:8px;
  align-items:center;
}
.admin-login-group input{
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:4px;
  background:#fff;
  color:var(--ink);
  font-family:var(--font-body);
}
.admin-status-badge{
  font-size:12px;
  font-family:var(--font-mono);
  font-weight:600;
  color:#1f6b3a;
  background:#e4f4ea;
  border:1px solid #a3d9b5;
  border-radius:4px;
  padding:6px 10px;
}
.btn-retro,
.btn-retro-secondary{
  border:1px solid var(--line);
  border-radius:4px;
  padding:8px 12px;
  font-family:var(--font-mono);
  font-size:12px;
  cursor:pointer;
}
.btn-retro{
  background:var(--ink);
  color:#fff;
}
.btn-retro-secondary{
  background:#fff;
  color:var(--ink);
}

/* Log */
.log-section{ margin-bottom:30px; }
.log-header{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  border-bottom:2px solid var(--ink);
  padding-bottom:8px;
  margin-bottom:4px;
}
.log-header h2{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:19px;
  margin:0;
}
.log-sub{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--ink-soft);
  text-transform:none;
  font-weight:400;
}
.refresh-btn{
  background:none;
  border:1px solid var(--line);
  border-radius:50%;
  width:30px; height:30px;
  font-size:15px;
  cursor:pointer;
  color:var(--ink-soft);
}
.refresh-btn:hover{ color:var(--ink); border-color:var(--ink); }

.log-feed{ padding-top:8px; overflow-x:auto; }
.table-container{
  max-width:100%;
  margin:8px auto 0;
  background:#fdfbf7;
  border:1px solid #dcd4c3;
  border-radius:6px;
  box-shadow:0 2px 5px rgba(0,0,0,0.04);
}
.table-container .log-table{ margin:0; }
.log-empty{
  font-family:var(--font-mono);
  color:var(--ink-soft);
  font-size:13.5px;
  padding:16px 0;
}

.log-table{
  width:100%;
  border-collapse:collapse;
  font-size:13.5px;
}
.log-table thead th{
  text-align:left;
  font-family:var(--font-mono);
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:0.6px;
  color:var(--ink-soft);
  font-weight:600;
  padding:0 10px 8px;
  border-bottom:2px solid var(--ink);
}
.log-table tbody td{
  padding:10px;
  border-bottom:1px dashed var(--line);
  vertical-align:top;
}
.log-table tbody tr:hover{ background:var(--paper-dark); }
.log-table td[data-label="Date"]{
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--ink-soft);
  white-space:nowrap;
}
.log-table td[data-label="Task Done"]{ color:var(--ink-soft); line-height:1.45; }
.log-table .admin-cell-action{ white-space:nowrap; }

.btn-sm{
  padding:4px 8px;
  font-size:12px;
  cursor:pointer;
  border-radius:4px;
  border:1px solid #bbb;
  margin-right:4px;
  font-family:var(--font-body);
}
.btn-edit{ background:#fff; }
.btn-delete{ background:#fee2e2; border-color:#fca5a5; color:#991b1b; }
.btn-save{ background:#dcfce7; border-color:#86efac; color:#166534; }
.btn-cancel{ background:#f3f4f6; }
.edit-input{
  width:100%;
  padding:6px 8px;
  border:1px solid #3b82f6;
  border-radius:3px;
  font-family:var(--font-body);
}

.badge{
  display:inline-block;
  padding:3px 10px;
  border-radius:20px;
  font-size:12px;
  font-weight:600;
  color:#fff;
  white-space:nowrap;
}
.badge.tone-jubayer{ background:var(--jubayer); }
.badge.tone-mahin{ background:var(--mahin); }
.badge.tone-razim{ background:var(--razim); }

/* Mobile: collapse the table into labeled stacked cards */
@media (max-width:560px){
  .log-table thead{ display:none; }
  .log-table, .log-table tbody, .log-table tr, .log-table td{ display:block; width:100%; }
  .log-table tr{
    border:1px solid var(--line);
    border-left:4px solid var(--line);
    border-radius:6px;
    padding:8px 12px;
    margin-bottom:10px;
  }
  .log-table tr.who-jubayer{ border-left-color:var(--jubayer); }
  .log-table tr.who-mahin{ border-left-color:var(--mahin); }
  .log-table tr.who-razim{ border-left-color:var(--razim); }
  .log-table td{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:10px;
    padding:5px 0;
    border-bottom:none;
  }
  .log-table td::before{
    content:attr(data-label);
    flex:0 0 auto;
    font-family:var(--font-mono);
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:0.5px;
    color:var(--ink-soft);
    padding-top:2px;
  }
  .log-table td[data-label="Task Done"]{ flex-direction:column; }
  .log-table td[data-label="Task Done"]::before{ margin-bottom:2px; }
}

.foot{
  text-align:center;
  font-family:var(--font-mono);
  font-size:11.5px;
  color:var(--ink-soft);
  border-top:1px solid var(--line);
  padding-top:14px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}