:root{
  --bg:#FAF8F4;
  --surface:#FFFFFF;
  --ink:#1D1D1B;
  --ink-soft:#4A4A46;
  --muted:#8A8A84;
  --line:#E9E2D6;
  --accent:#AA3A27;
  --accent-soft:#F4E1DB;
  --pend:#C9963F;
  --prod:#5E7A8C;
  --done:#5C8A66;
  --radius:14px;
  --shadow: 0 1px 2px rgba(29,29,27,0.04), 0 6px 20px rgba(29,29,27,0.05);
}
html[data-theme="dark"]{
  --bg:#1D1D1B;
  --surface:#262622;
  --ink:#F5F2EA;
  --ink-soft:#CFCAC0;
  --muted:#8F8B82;
  --line:#35342E;
  --accent:#C24B36;
  --accent-soft:#3A241E;
  --pend:#DDA95A;
  --prod:#82A0B4;
  --done:#79B489;
  --shadow: 0 1px 2px rgba(0,0,0,0.25), 0 6px 24px rgba(0,0,0,0.35);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{ background:var(--bg); }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  transition:background .2s ease, color .2s ease;
}
::selection{ background:#F4E1DB; color:#1D1D1B; }

/* Header */
header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:28px 48px 24px;
  border-bottom:1px solid var(--line);
}
.brand{ display:flex; flex-direction:column; gap:8px; }
.brand .logo{ width:120px; }
.brand .logo svg{ display:block; width:100%; height:auto; }
.brand .logo .st0{ fill:var(--ink); }
.brand .sub{
  font-size:11px;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:400;
}
.header-right{
  display:flex;
  align-items:center;
  gap:14px;
}
.header-meta{
  font-size:12px;
  color:var(--muted);
  text-align:right;
}
.theme-toggle{
  width:36px;
  height:36px;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--ink-soft);
  font-size:15px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all .15s ease;
}
.theme-toggle:hover{ border-color:var(--accent); color:var(--accent); }

/* Tabs */
.tabbar{
  display:flex;
  align-items:center;
  gap:6px;
  padding:20px 48px 0;
  flex-wrap:wrap;
  border-bottom:1px solid var(--line);
}
.tab{
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 18px;
  border-radius:10px 10px 0 0;
  font-size:14px;
  font-weight:400;
  color:var(--muted);
  cursor:pointer;
  border:1px solid transparent;
  border-bottom:none;
  transition:all .15s ease;
  text-decoration:none;
}
.tab:hover{ color:var(--ink); background:var(--surface); }
.tab.active{
  color:var(--ink);
  background:var(--surface);
  border-color:var(--line);
}
.tab.active::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:1px;
  background:var(--surface);
}
.tab .close-x{
  width:16px; height:16px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:11px;
  color:var(--muted);
  opacity:0;
  transition:opacity .12s ease, background .12s ease, color .12s ease;
}
.tab:hover .close-x{ opacity:1; }
.tab .close-x:hover{ background:#f3d9d9; color:#a33; }
.tab-add{
  padding:10px 16px;
  font-size:13px;
  font-weight:400;
  color:var(--accent);
  cursor:pointer;
  border-radius:10px;
  letter-spacing:0.3px;
}
.tab-add:hover{ background:var(--accent-soft); }
.tab-archived{
  margin-left:auto;
  padding:9px 16px;
  font-size:12.5px;
  font-weight:400;
  color:var(--muted);
  cursor:pointer;
  border-radius:10px 10px 0 0;
  letter-spacing:0.2px;
  border:1px solid transparent;
  border-bottom:none;
}
.tab-archived:hover{ color:var(--ink); background:var(--surface); }
.tab-archived.active{
  color:var(--ink);
  background:var(--surface);
  border-color:var(--line);
}

/* Arquivados */
.archived-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-width:640px;
}
.archived-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px 20px;
  box-shadow:var(--shadow);
}
.archived-name{
  font-size:14px;
  color:var(--ink);
}
.archived-actions{ display:flex; gap:8px; flex-shrink:0; }

/* Client toolbar */
.client-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:26px 48px 6px;
}
.client-toolbar h1{
  font-family:'Inter', sans-serif;
  font-weight:400;
  font-size:24px;
  letter-spacing:-0.3px;
  margin:0;
}
.client-toolbar .updated{
  font-size:12px;
  color:var(--muted);
  margin-top:4px;
}
.toolbar-actions{ display:flex; gap:10px; }
.btn{
  font-family:inherit;
  font-size:12.5px;
  font-weight:400;
  letter-spacing:0.2px;
  padding:9px 16px;
  border-radius:9px;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--ink-soft);
  cursor:pointer;
  transition:all .15s ease;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
}
.btn:hover{ border-color:var(--accent); color:var(--accent); }
.btn.primary{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}
.btn.primary:hover{ filter:brightness(0.92); }
.btn.danger{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}
.btn.danger:hover{ filter:brightness(0.92); }

/* Dropdown menu (ações do cliente) */
.dropdown{ position:relative; }
.dropdown .chevron{
  display:inline-block;
  font-size:10px;
  margin-left:4px;
  transition:transform .18s ease;
}
#clientMenuBtn[aria-expanded="true"] .chevron{
  transform:rotate(180deg);
}
.dropdown-menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:var(--shadow);
  padding:6px;
  min-width:220px;
  z-index:40;
  display:flex;
  flex-direction:column;
  gap:2px;
  transform-origin:top right;
  transform:scaleY(0.9) translateY(-6px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
.dropdown-menu.open{
  transform:scaleY(1) translateY(0);
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .16s ease, transform .16s ease, visibility 0s linear 0s;
}
.dropdown-item{
  display:block;
  width:100%;
  text-align:left;
  background:none;
  border:none;
  padding:9px 12px;
  font-family:inherit;
  font-size:13px;
  font-weight:400;
  color:var(--ink-soft);
  border-radius:8px;
  cursor:pointer;
  transition:background .12s ease, color .12s ease;
}
.dropdown-item:hover{ background:var(--accent-soft); color:var(--accent); }
.dropdown-sep{ height:1px; background:var(--line); margin:5px 4px; }
.dropdown-item.dropdown-danger{ color:var(--accent); }
.dropdown-item.dropdown-danger:hover{ background:var(--accent-soft); }

.count-badge{
  background:var(--accent-soft);
  color:var(--accent);
  font-size:11px;
  padding:1px 7px;
  border-radius:20px;
  margin-left:4px;
}
#archivedLink{ margin-right:8px; }
#archivedLink.active{ border-color:var(--accent); color:var(--accent); }

/* Board */
main{
  padding:24px 48px 64px;
}
.board{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
}
@media (max-width: 980px){
  .board{ grid-template-columns:1fr; }
}
.column{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  display:flex;
  flex-direction:column;
  min-height:220px;
  box-shadow:var(--shadow);
}
.col-head{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:14px;
}
.dot{ width:8px; height:8px; border-radius:50%; }
.col-head .title{
  font-size:13px;
  font-weight:400;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--ink);
}
.col-head .count{
  margin-left:auto;
  font-size:12px;
  color:var(--muted);
  background:var(--bg);
  border:1px solid var(--line);
  padding:2px 8px;
  border-radius:20px;
}
.items{
  display:flex;
  flex-direction:column;
  gap:9px;
  flex:1;
  margin-bottom:14px;
  border-radius:10px;
  transition:background .12s ease;
}
.items.drag-over{
  background:var(--accent-soft);
  outline:1.5px dashed var(--accent);
  outline-offset:-4px;
}
.item.dragging{
  opacity:0.4;
}
.due-note{
  margin-top:6px;
  font-size:11.5px;
  color:var(--accent);
}
.empty-hint{
  font-size:12.5px;
  color:var(--muted);
  font-style:italic;
  padding:8px 2px;
}
.item{
  position:relative;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:10px;
  padding:11px 30px 11px 14px;
  font-size:13.5px;
  line-height:1.4;
  color:var(--ink);
  word-break:break-word;
  transition:border-color .15s ease, transform .1s ease;
  user-select:none;
  -webkit-user-select:none;
  -webkit-user-drag:element;
  cursor:grab;
}
.item:active{ cursor:grabbing; }
.item.editable{ cursor:pointer; }
.item:hover{ border-color:var(--accent); }
.item-row{
  display:flex;
  align-items:stretch;
  gap:8px;
}
.item-row .item{ flex:1; min-width:0; }
.due-btn{
  flex-shrink:0;
  width:72px;
  font-family:inherit;
  font-size:11px;
  padding:0 6px;
  border-radius:10px;
  border:1px dashed var(--line);
  background:var(--bg);
  color:var(--muted);
  cursor:pointer;
  text-align:center;
  line-height:1.25;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.due-btn:hover{ border-color:var(--accent); color:var(--accent); }
.due-btn.set{
  border-style:solid;
  border-color:var(--accent-soft);
  background:var(--accent-soft);
  color:var(--accent);
}
.due-heading{
  display:flex;
  margin-bottom:8px;
}
.due-heading-spacer{ flex:1; }
.due-heading-label{
  flex-shrink:0;
  width:72px;
  font-size:9.5px;
  text-transform:uppercase;
  letter-spacing:0.3px;
  color:var(--muted);
  text-align:center;
  line-height:1.3;
}
.item .x{
  position:absolute;
  top:8px; right:8px;
  width:18px; height:18px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:11px;
  color:var(--muted);
  cursor:pointer;
  transition:background .12s ease, color .12s ease;
}
.item .x:hover{ background:#f3d9d9; color:#a33; }

.add-row{
  display:flex;
  gap:8px;
  border-top:1px dashed var(--line);
  padding-top:12px;
}
.add-row input{
  flex:1;
  font-family:inherit;
  font-size:13px;
  padding:9px 12px;
  border-radius:9px;
  border:1px solid var(--line);
  background:var(--bg);
  color:var(--ink);
  outline:none;
}
.add-row input:focus{ border-color:var(--accent); }
.add-row button{
  width:36px;
  border-radius:9px;
  border:1px solid var(--accent);
  background:var(--accent);
  color:#fff;
  font-size:16px;
  cursor:pointer;
}
.add-row button:hover{ filter:brightness(0.92); }

/* Empty state */
.no-clients{
  padding:80px 20px;
  text-align:center;
  color:var(--muted);
}

/* Modal */
.overlay{
  position:fixed; inset:0;
  background:rgba(29,29,27,0.55);
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px);
  display:flex; align-items:center; justify-content:center;
  z-index:50;
}
.modal{
  background:var(--surface);
  border-radius:16px;
  padding:26px 26px 22px;
  width:340px;
  box-shadow:0 20px 60px rgba(0,0,0,0.2);
}
.modal h3{
  margin:0 0 14px;
  font-family:'Inter', sans-serif;
  font-weight:400;
  font-size:18px;
  letter-spacing:-0.2px;
}
.modal p{ margin:0 0 14px; font-size:13.5px; color:var(--ink-soft); line-height:1.5; }
.modal input:not([type="checkbox"]){
  width:100%;
  font-family:inherit;
  font-size:14px;
  padding:10px 12px;
  border-radius:9px;
  border:1px solid var(--line);
  outline:none;
  margin-bottom:16px;
}
.modal input:not([type="checkbox"]):focus{ border-color:var(--accent); }
.modal-checkbox{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  color:var(--ink-soft);
  margin-bottom:16px;
  cursor:pointer;
}
.modal-checkbox input[type="checkbox"]{
  width:16px;
  height:16px;
  flex-shrink:0;
  accent-color:var(--accent);
  cursor:pointer;
}
.modal-actions{ display:flex; justify-content:flex-end; gap:8px; }

footer{
  text-align:center;
  padding:22px;
  font-size:11px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--muted);
}

/* Intro splash */
#introOverlay{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bg);
  pointer-events:none;
  animation: introOverlayOut 2.4s cubic-bezier(.45,0,.2,1) forwards;
}
@keyframes introOverlayOut{
  0%, 79%{ opacity:1; }
  100%{ opacity:0; }
}
.intro-icon-wrap{
  width:52px;
  opacity:0;
  transform:translate(6px, 6px);
  animation: introIconIn 1.2s cubic-bezier(0.16,1,0.3,1) forwards;
}
.intro-icon-wrap svg{ display:block; width:100%; height:auto; }
.intro-icon-wrap .st0{ fill:var(--ink); }
@keyframes introIconIn{
  from{ opacity:0; transform:translate(6px, 6px); }
  to{ opacity:1; transform:translate(0,0); }
}
@media (prefers-reduced-motion: reduce){
  #introOverlay{ display:none; }
}

/* Login pages */
.login-shell{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.login-card{
  width:100%;
  max-width:360px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  padding:36px 32px;
  box-shadow:var(--shadow);
  text-align:center;
}
.login-card .brand{ align-items:center; margin-bottom:22px; }
.login-card .logo{ width:110px; }
.login-card h1{
  font-size:18px;
  font-weight:400;
  margin:0 0 22px;
  color:var(--ink-soft);
}
.login-card form{ display:flex; flex-direction:column; gap:12px; text-align:left; }
.login-card label{ font-size:12px; color:var(--muted); margin-bottom:2px; display:block; }
.login-card input{
  width:100%;
  font-family:inherit;
  font-size:14px;
  padding:11px 13px;
  border-radius:9px;
  border:1px solid var(--line);
  background:var(--bg);
  color:var(--ink);
  outline:none;
}
.login-card input:focus{ border-color:var(--accent); }
.login-card .btn.primary{
  justify-content:center;
  padding:11px 16px;
  font-size:13.5px;
  margin-top:6px;
}
.login-error{
  background:var(--accent-soft);
  color:var(--accent);
  border-radius:9px;
  padding:10px 12px;
  font-size:12.5px;
  margin-bottom:14px;
  text-align:left;
}
.login-foot{
  margin-top:18px;
  font-size:11px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--muted);
}