/* =========================================================
   GS INFINITY TRAVEL / Quadros
   Mesmo design system da landing page (../index.html)
   ========================================================= */
:root{
  --navy:#120D44;        /* Marinho: cor base da marca      */
  --navy-2:#1B1560;      /* Marinho elevado                  */
  --royal:#051D7D;       /* Azul royal                       */
  --mint:#71E6CC;        /* Menta: destaque principal       */
  --mint-dark:#3FBFA3;
  --teal:#40A3B6;        /* Petróleo                         */
  --gold:#FFC100;        /* Dourado: rota de voo            */
  --apricot:#FDCE82;     /* Damasco: cards e botões         */
  --apricot-soft:#FDF0DA;
  --cream:#FAF9F6;       /* Base clara                       */
  --white:#FFFFFF;
  --serenity:#BFDCF2;    /* Serenity: links do menu          */
  --nav-pill:#08051D;    /* cápsula do menu                  */
  --bordo:#6C2631;       /* Bordô: erros, atrasos            */

  --bubble:"Titan One",system-ui,sans-serif;
  --display:"Fredoka",system-ui,sans-serif;
  --font:"Poppins",system-ui,-apple-system,sans-serif;

  --max:1280px;
  --r-card:22px;
  --r-lg:30px;
  --line:rgba(18,13,68,.12);
  --muted:rgba(18,13,68,.62);
  --list-w:288px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border:0 solid transparent}
html,body{height:100%}
body{
  font-family:var(--font);color:var(--navy);background:var(--cream);
  line-height:1.5;-webkit-font-smoothing:antialiased;font-size:14px;
  display:flex;flex-direction:column;overflow:hidden;height:100dvh
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
ul{list-style:none}
svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
[hidden]{display:none!important}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:22px}
.display{font-family:var(--bubble);font-weight:400;line-height:.98}
.eyebrow{font-weight:500;text-transform:uppercase;font-size:11px;letter-spacing:.3em;line-height:1.6}

/* gotinhas de brilho (assinatura das peças GS) */
.sparkle{display:inline-block;width:.42em;height:.62em;vertical-align:top;position:relative;margin-left:.12em}
.sparkle i{position:absolute;background:var(--apricot);border-radius:60% 60% 60% 0;transform:rotate(-30deg)}
.sparkle i:nth-child(1){width:38%;height:34%;left:22%;top:0}
.sparkle i:nth-child(2){width:32%;height:28%;left:58%;top:24%}
.sparkle i:nth-child(3){width:30%;height:26%;left:12%;top:44%}

/* rota de voo tracejada */
.flightpath{display:block;overflow:hidden;background:var(--cream)}
.flightpath svg{display:block;width:100%;height:auto;min-height:56px;stroke:none}
.fp-dash{fill:none;stroke:var(--gold);stroke-width:5;stroke-linecap:round;stroke-dasharray:14 16}
.fp-plane{fill:var(--navy)}

/* =========================================================
   BOTÕES
   ========================================================= */
.toggle{
  display:inline-flex;align-items:center;gap:14px;
  border:2px solid var(--navy);border-radius:999px;padding:7px 26px 7px 7px;
  background:var(--cream);color:var(--navy);
  font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:.06em;text-transform:uppercase;
  transition:transform .18s ease,box-shadow .18s ease
}
.toggle::before{content:"";width:34px;height:34px;border-radius:50%;background:var(--apricot);flex:none;transition:transform .25s ease}
.toggle:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(18,13,68,.3)}
.toggle:hover::before{transform:translateX(3px)}
.toggle--onDark{border-color:var(--cream)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:9px 18px;border-radius:999px;background:var(--mint);color:var(--ink);
  font-family:var(--display);font-weight:600;font-size:15px;line-height:1.1;
  transition:background .15s,transform .15s
}
.btn:hover{background:var(--mint-dark)}
.btn:active{transform:translateY(1px)}
.btn--soft{background:rgba(18,13,68,.07)}
.btn--soft:hover{background:rgba(18,13,68,.13)}
.btn--apricot{background:var(--apricot)}
.btn--apricot:hover{background:#f6bd63}
.btn--danger{background:var(--bordo);color:#FAF9F6}
.btn--danger:hover{background:#561d27}
.btn--ghost{background:none}
.btn--ghost:hover{background:rgba(18,13,68,.08)}
.btn svg{width:16px;height:16px}
.w100{width:100%}

.icon-btn{
  display:inline-grid;place-items:center;width:32px;height:32px;border-radius:10px;
  color:inherit;transition:background .15s
}
.icon-btn:hover{background:rgba(18,13,68,.1)}

.in{
  width:100%;padding:9px 12px;border-radius:12px;background:var(--white);
  border:1.5px solid var(--line);outline:none;transition:border-color .15s
}
.in:focus{border-color:var(--mint-dark)}
textarea.in{resize:vertical;min-height:72px;line-height:1.5}
select.in{appearance:auto}

/* =========================================================
   HEADER
   ========================================================= */
.hdr{
  position:relative;z-index:50;flex:none;background:var(--navy);color:var(--cream);
  display:flex;align-items:center;gap:14px;padding:8px 18px;min-height:64px
}
.hdr__logo img{height:46px;width:auto}
.nav{display:flex;align-items:center;gap:2px;background:var(--nav-pill);border-radius:999px;padding:5px}
.nav a,.nav__cta{
  padding:8px 15px;border-radius:999px;color:var(--serenity);
  font-weight:700;font-size:15px;line-height:1;white-space:nowrap;transition:background .2s,color .2s
}
.nav a:hover,.nav a:focus-visible{background:var(--mint);color:var(--ink)}
.nav__cta{background:var(--mint);color:var(--ink)}
.nav__cta:hover{background:var(--apricot)}
.search{
  margin-left:auto;display:flex;align-items:center;gap:8px;width:min(320px,34vw);
  background:rgba(250,249,246,.1);border:1.5px solid rgba(250,249,246,.16);
  border-radius:999px;padding:7px 14px;color:var(--serenity);transition:background .2s,border-color .2s
}
.search:focus-within{background:var(--cream);color:var(--navy);border-color:var(--mint)}
.search input{flex:1;min-width:0;background:none;border:0;outline:none;color:inherit}
.search input::placeholder{color:inherit;opacity:.8}
.me{display:flex;align-items:center;gap:9px;padding:4px 12px 4px 4px;border-radius:999px;transition:background .2s}
.me:hover{background:rgba(250,249,246,.1)}
.me span{font-weight:600;font-size:14px}
.hdr__line{position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--mint),var(--gold))}
@media (max-width:720px){
  .hdr{gap:8px;padding:8px 12px}
  .hdr__logo img{height:38px}
  .nav a{display:none}
  .me span{display:none}
  .me{padding:4px}
  .search{width:auto;flex:1;min-width:0}
}

/* avatar */
.av{
  display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;flex:none;
  font-family:var(--display);font-weight:600;font-size:13px;line-height:1;
  box-shadow:0 0 0 2px var(--white)
}
.av--sm{width:26px;height:26px;font-size:11.5px}
.avs{display:flex}
.avs .av+.av{margin-left:-6px}

/* cores de etiqueta / capa / avatar */
.c-mint{background:var(--mint);color:var(--ink)}
.c-gold{background:var(--gold);color:var(--ink)}
.c-apricot{background:var(--apricot);color:var(--ink)}
.c-teal{background:var(--teal);color:#FFFFFF}
.c-royal{background:var(--royal);color:#FFFFFF}
.c-bordo{background:var(--bordo);color:#FAF9F6}
.c-serenity{background:var(--serenity);color:var(--ink)}
.c-navy{background:#120D44;color:#FAF9F6}

/* =========================================================
   MAIN / FUNDOS DE QUADRO
   ========================================================= */
#app{flex:1;min-height:0;display:flex;flex-direction:column}

.bg-navy{background:radial-gradient(900px 600px at 88% -10%,rgba(113,230,204,.22),transparent 60%),radial-gradient(700px 500px at -5% 110%,rgba(255,193,0,.13),transparent 60%),var(--navy)}
.bg-royal{background:radial-gradient(800px 560px at 90% -10%,rgba(113,230,204,.2),transparent 60%),linear-gradient(135deg,var(--royal),var(--navy))}
.bg-teal{background:radial-gradient(800px 560px at 90% -10%,rgba(253,206,130,.28),transparent 60%),linear-gradient(135deg,var(--teal),#1d5f73)}
.bg-mint{background:radial-gradient(800px 560px at 10% 110%,rgba(255,193,0,.25),transparent 60%),linear-gradient(135deg,var(--mint),var(--serenity))}
.bg-apricot{background:radial-gradient(800px 560px at 90% -10%,rgba(113,230,204,.35),transparent 60%),linear-gradient(135deg,var(--apricot),var(--apricot-soft))}
.bg-cataratas{background:linear-gradient(rgba(18,13,68,.5),rgba(18,13,68,.78)),url(assets/hero.jpg) center/cover}
.bg-foz{background:linear-gradient(rgba(18,13,68,.45),rgba(18,13,68,.8)),url(assets/banner.jpg) center/cover}

/* =========================================================
   HOME
   ========================================================= */
.home{flex:1;overflow-y:auto}
.home__hero{position:relative;background:var(--navy);color:var(--cream);padding:42px 0 34px;overflow:hidden}
.home__hero::before{
  content:"";position:absolute;width:760px;height:760px;right:-260px;top:-320px;border-radius:50%;
  background:radial-gradient(circle,rgba(113,230,204,.16),transparent 65%);pointer-events:none
}
.home__hero .wrap{position:relative;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:26px}
.home__hero .eyebrow{color:var(--mint)}
.home__hero h1{font-size:clamp(38px,6vw,68px);margin-top:10px}
.home__lead{margin-top:12px;max-width:520px;font-weight:300;color:rgba(250,249,246,.86);font-size:15.5px}
.stats{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.stat{background:rgba(250,249,246,.08);border:1px solid rgba(250,249,246,.14);border-radius:18px;padding:10px 16px;min-width:120px}
.stat b{display:block;font-family:var(--bubble);font-weight:400;font-size:28px;line-height:1.1;color:var(--apricot)}
.stat small{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--serenity)}
.stat--late b{color:#ff9aa8}

.home__body{padding:8px 0 60px}
.sec-title{
  display:flex;align-items:center;gap:10px;margin:30px 0 14px;
  font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:-.01em
}
.sec-title svg{width:22px;height:22px;color:var(--teal)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.tile{
  position:relative;display:flex;flex-direction:column;justify-content:space-between;
  min-height:118px;padding:16px 18px;border-radius:var(--r-card);color:var(--cream);
  box-shadow:0 10px 24px rgba(18,13,68,.16);transition:transform .18s ease,box-shadow .18s ease;overflow:hidden
}
.tile:hover{transform:translateY(-3px);box-shadow:0 16px 30px rgba(18,13,68,.26)}
.tile.is-light{color:var(--navy)}
.tile__name{font-family:var(--display);font-weight:600;font-size:19px;line-height:1.15;padding-right:30px}
.tile__meta{font-size:12px;opacity:.85}
.tile__star{position:absolute;right:10px;top:10px;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;opacity:.55;transition:opacity .15s,background .15s}
.tile:hover .tile__star,.tile__star.on{opacity:1}
.tile__star:hover{background:rgba(250,249,246,.18)}
.tile__star.on svg{fill:var(--gold);stroke:var(--gold)}
.tile__del{position:absolute;right:10px;bottom:10px;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;opacity:0;transition:opacity .15s,background .15s}
.tile:hover .tile__del,.tile__del:focus-visible{opacity:.85}
.tile__del:hover{opacity:1;background:var(--bordo);color:var(--cream)}
@media (hover:none){.tile__del{opacity:.7}}
.tile--new{
  background:var(--white);color:var(--navy);border:2px dashed rgba(18,13,68,.2);box-shadow:none;
  align-items:center;justify-content:center;gap:6px;font-family:var(--display);font-weight:600;font-size:16px
}
.tile--new:hover{border-color:var(--mint-dark);background:#f2fdf9}
.tile--new svg{width:26px;height:26px;color:var(--mint-dark)}

.mine{display:grid;gap:10px}
.mine__row{
  display:flex;align-items:center;gap:14px;background:var(--white);border-radius:16px;
  padding:12px 16px;box-shadow:0 1px 0 var(--line);border:1.5px solid transparent;cursor:pointer;text-align:left;width:100%
}
.mine__row:hover{border-color:var(--mint)}
.mine__dot{width:10px;height:10px;border-radius:50%;flex:none}
.mine__t{flex:1;min-width:0}
.mine__t b{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mine__t small{color:var(--muted);font-size:12px}
.empty{
  background:var(--white);border-radius:18px;padding:22px;color:var(--muted);text-align:center;
  border:1.5px dashed var(--line)
}

/* =========================================================
   QUADRO
   ========================================================= */
.board{flex:1;min-height:0;display:flex;flex-direction:column;color:var(--cream)}
.board.is-light{color:var(--navy)}
.bbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:14px 18px 10px}
.bbar__title{
  font-family:var(--bubble);font-weight:400;font-size:clamp(22px,3vw,30px);line-height:1.1;
  padding:4px 10px;border-radius:12px;cursor:text;transition:background .15s
}
.bbar__title:hover{background:rgba(250,249,246,.12)}
.board.is-light .bbar__title:hover{background:rgba(18,13,68,.08)}
.bbar__title-in{
  font-family:var(--bubble);font-size:clamp(22px,3vw,30px);line-height:1.1;padding:4px 10px;border-radius:12px;
  background:var(--cream);color:var(--navy);outline:2px solid var(--mint);width:min(420px,70vw)
}
.bbar__spacer{flex:1}
.bbtn{
  display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;
  background:rgba(250,249,246,.12);font-weight:600;font-size:13.5px;transition:background .15s
}
.bbtn:hover{background:rgba(250,249,246,.22)}
.board.is-light .bbtn{background:rgba(18,13,68,.08)}
.board.is-light .bbtn:hover{background:rgba(18,13,68,.15)}
.bbtn.on{background:var(--mint);color:var(--ink)}
.bbtn--star.on{background:rgba(250,249,246,.12)}
.bbtn--star.on svg{fill:var(--gold);stroke:var(--gold)}
.bbtn .count{background:var(--navy);color:var(--mint);border-radius:999px;padding:0 7px;font-size:11.5px}
.board .avs .av{box-shadow:0 0 0 2px var(--navy)}

.canvas{
  cursor:grab;
  flex:1;min-height:0;display:flex;align-items:flex-start;gap:14px;
  overflow-x:auto;overflow-y:hidden;padding:6px 18px 18px;
  scrollbar-color:rgba(250,249,246,.4) transparent
}
.board.is-light .canvas{scrollbar-color:rgba(18,13,68,.3) transparent}

.list{
  flex:none;width:var(--list-w);max-height:100%;display:flex;flex-direction:column;
  background:var(--cream);color:var(--navy);border-radius:20px;
  box-shadow:0 10px 24px rgba(8,5,29,.18)
}
.list__head{display:flex;align-items:center;gap:6px;padding:12px 8px 6px 14px;cursor:grab}
.list__title{
  flex:1;min-width:0;font-family:var(--display);font-weight:600;font-size:16.5px;line-height:1.2;
  padding:3px 6px;margin-left:-6px;border-radius:8px;overflow-wrap:anywhere;cursor:pointer
}
.list__title-in{flex:1;min-width:0;font-family:var(--display);font-weight:600;font-size:16.5px;padding:3px 6px;border-radius:8px;outline:2px solid var(--mint);background:var(--white)}
.list__count{font-size:12px;font-weight:600;color:var(--muted);background:rgba(18,13,68,.07);border-radius:999px;padding:1px 8px}
.list__cards{flex:0 1 auto;min-height:6px;overflow-y:auto;padding:4px 8px;display:flex;flex-direction:column;gap:8px}
.list__foot{padding:4px 8px 10px}
.addcard{
  display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border-radius:12px;
  color:var(--muted);font-weight:500;transition:background .15s,color .15s
}
.addcard:hover{background:rgba(18,13,68,.07);color:var(--navy)}
.composer{display:grid;gap:8px}
.composer textarea{min-height:64px;resize:none;box-shadow:0 1px 0 var(--line)}
.composer__row{display:flex;align-items:center;gap:6px}

.addlist{
  flex:none;width:var(--list-w);border-radius:20px;padding:12px 14px;
  background:rgba(250,249,246,.16);color:inherit;font-weight:600;display:flex;align-items:center;gap:8px;
  transition:background .15s;text-align:left
}
.addlist:hover{background:rgba(250,249,246,.26)}
.board.is-light .addlist{background:rgba(18,13,68,.08)}
.board.is-light .addlist:hover{background:rgba(18,13,68,.14)}
.addlist-form{flex:none;width:var(--list-w);background:var(--cream);color:var(--navy);border-radius:20px;padding:10px;display:grid;gap:8px}

/* cartão */
.card{
  position:relative;background:var(--white);border-radius:14px;padding:9px 12px 10px;
  box-shadow:0 1px 0 rgba(18,13,68,.14);cursor:pointer;
  border:1.5px solid transparent;transition:border-color .12s;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation
}
.card:hover,.card:focus-visible{border-color:var(--mint);outline:none}
.card__cover{height:30px;margin:-9px -12px 9px;border-radius:12px 12px 0 0}
.card__labels{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}
.lbl{
  display:inline-flex;align-items:center;min-height:20px;max-width:100%;padding:1px 9px;border-radius:999px;
  font-size:11.5px;font-weight:600;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.card__title{font-size:14px;line-height:1.4;overflow-wrap:anywhere}
.card.is-done .card__title{color:var(--muted)}
.card__foot{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:8px}
.card__foot:empty{display:none}
.badge{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--muted);border-radius:8px;line-height:1.5}
.badge svg{width:14px;height:14px}
.badge.due{padding:1px 7px;margin-left:-2px}
.badge.due.soon{background:var(--gold);color:var(--ink)}
.badge.due.late{background:var(--bordo);color:#FAF9F6}
.badge.due.done,.badge.ok{background:var(--mint);color:var(--ink);padding:1px 7px}
.card__foot .avs{margin-left:auto}

/* drag */
.ph{flex:none;border-radius:14px;background:rgba(18,13,68,.1);border:2px dashed rgba(18,13,68,.22)}
.list-ph{flex:none;width:var(--list-w);align-self:stretch;max-height:100%;border-radius:20px;background:rgba(250,249,246,.14);border:2px dashed rgba(250,249,246,.45)}
.board.is-light .list-ph{background:rgba(18,13,68,.06);border-color:rgba(18,13,68,.25)}
.ghost{
  position:fixed;z-index:200;pointer-events:none;margin:0;
  transform:rotate(3deg);box-shadow:0 18px 36px rgba(8,5,29,.35);opacity:.96
}
body.dragging,body.dragging *{cursor:grabbing!important;user-select:none}

/* =========================================================
   MODAL DO CARTÃO
   ========================================================= */
.cm-dlg{
  margin:auto;padding:0;width:min(780px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 40px);
  border-radius:var(--r-lg);background:var(--cream);color:var(--navy);
  box-shadow:0 30px 70px rgba(8,5,29,.5);overflow:auto;overscroll-behavior:contain
}
.cm-dlg[open]{animation:fade .18s ease}
.cm-dlg::backdrop{background:rgba(8,5,29,.62);backdrop-filter:blur(3px)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.cm{position:relative;padding:22px 26px 26px}
.cm__cover{height:96px;margin:-22px -26px 18px;border-radius:var(--r-lg) var(--r-lg) 0 0}
.cm__archived{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:-6px 0 16px;padding:10px 14px;border-radius:14px;
  background:var(--apricot-soft);font-weight:500
}
.cm__archived span{flex:1}
.cm__close{position:absolute;right:14px;top:14px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(18,13,68,.08);z-index:2}
.cm__close:hover{background:rgba(18,13,68,.16)}
.cm__head{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;padding-right:44px}
.cm__head>svg{margin-top:9px;width:22px;height:22px;color:var(--teal)}
.cm__title{
  font-family:var(--display);font-weight:600;font-size:23px;line-height:1.25;width:100%;
  background:none;border-radius:10px;padding:4px 8px;margin-left:-8px;resize:none;overflow:hidden;outline:none
}
.cm__title:focus{background:var(--white);box-shadow:0 0 0 2px var(--mint)}
.cm__where{grid-column:2;color:var(--muted);font-size:13px}
.linkish{text-decoration:underline;text-underline-offset:2px;font-weight:600;color:var(--navy)}
.cm__grid{display:grid;grid-template-columns:1fr 176px;gap:26px;margin-top:20px}
.cm__meta{display:flex;flex-wrap:wrap;gap:16px 22px;margin-bottom:6px}
.cm__meta h5,.cm__side h5{font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.chips{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.chips .lbl{min-height:30px;padding:4px 12px;font-size:13px;border-radius:10px}
.chip-add{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:rgba(18,13,68,.08)}
.chip-add:hover{background:rgba(18,13,68,.15)}
.dueline{display:inline-flex;align-items:center;gap:8px;background:rgba(18,13,68,.07);border-radius:10px;padding:5px 10px 5px 8px}
.dueline input{width:16px;height:16px;accent-color:var(--mint-dark)}
.dueline button{font-weight:500}
.tag{font-size:11px;font-weight:600;border-radius:6px;padding:1px 7px}
.tag.late{background:var(--bordo);color:#FAF9F6}
.tag.soon{background:var(--gold)}
.tag.done{background:var(--mint)}

.cm__sec{margin-top:24px}
.cm__sec-h{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.cm__sec-h svg{width:20px;height:20px;color:var(--teal)}
.cm__sec-h h4{flex:1;font-family:var(--display);font-weight:600;font-size:17px}
.desc{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6;cursor:text;padding:2px 0}
.desc a{color:var(--royal);text-decoration:underline}
.desc-empty{
  display:block;width:100%;text-align:left;background:rgba(18,13,68,.06);border-radius:14px;
  padding:14px 16px;min-height:64px;color:var(--muted)
}
.desc-empty:hover{background:rgba(18,13,68,.1)}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}

.prog{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:12px;color:var(--muted);font-weight:600}
.prog__bar{flex:1;height:8px;border-radius:999px;background:rgba(18,13,68,.1);overflow:hidden}
.prog__bar i{display:block;height:100%;background:linear-gradient(90deg,var(--mint),var(--gold));border-radius:inherit;transition:width .25s}
.prog.full .prog__bar i{background:var(--mint)}
.ck{display:flex;align-items:flex-start;gap:10px;padding:6px 8px;margin-inline:-8px;border-radius:10px}
.ck:hover{background:rgba(18,13,68,.05)}
.ck input{margin-top:3px;width:17px;height:17px;accent-color:var(--mint-dark);flex:none}
.ck span{flex:1;overflow-wrap:anywhere}
.ck.done span{text-decoration:line-through;color:var(--muted)}
.ck .icon-btn{width:26px;height:26px;opacity:0}
.ck:hover .icon-btn{opacity:1}

.feed{display:grid;gap:14px;margin-top:14px}
.cmt{display:grid;grid-template-columns:auto 1fr;gap:10px}
.cmt__b{min-width:0}
.cmt__h{font-size:13px}
.cmt__h b{font-weight:600}
.cmt__h small{color:var(--muted);margin-left:6px}
.cmt__t{margin-top:4px;background:var(--white);border-radius:12px;padding:8px 12px;white-space:pre-wrap;overflow-wrap:anywhere;box-shadow:0 1px 0 var(--line)}
.cmt__x{font-size:12px;color:var(--muted);text-decoration:underline;margin-top:3px}
.act{display:flex;gap:10px;align-items:center;font-size:12.5px;color:var(--muted)}
.act .av{opacity:.85}

.cm__side{display:grid;align-content:start;gap:6px}
.cm__side h5{margin-top:10px}
.cm__side h5:first-child{margin-top:0}
.sbtn{
  display:flex;align-items:center;gap:9px;width:100%;padding:8px 12px;border-radius:12px;
  background:rgba(18,13,68,.07);font-weight:500;font-size:13.5px;text-align:left;transition:background .15s
}
.sbtn:hover{background:rgba(18,13,68,.14)}
.sbtn svg{width:16px;height:16px}
.sbtn--danger:hover{background:var(--bordo);color:#FAF9F6}

@media (max-width:680px){
  .cm{padding:18px 16px 22px}
  .cm__cover{margin:-18px -16px 16px}
  .cm__grid{grid-template-columns:1fr}
  .cm__side{grid-template-columns:1fr 1fr}
  .cm__side h5{grid-column:1/-1}
  :root{--list-w:min(82vw,300px)}
  .canvas{scroll-snap-type:x proximity;padding-inline:12px}
  .list,.addlist{scroll-snap-align:center}
}

/* =========================================================
   POPOVER / TOAST
   ========================================================= */
.pop{
  position:fixed;z-index:300;width:304px;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);overflow:auto;
  background:var(--cream);color:var(--navy);border-radius:20px;
  box-shadow:0 18px 44px rgba(8,5,29,.32),0 0 0 1px rgba(18,13,68,.08);padding:0 0 14px
}
.pop__head{
  position:sticky;top:0;background:var(--cream);z-index:1;
  display:flex;align-items:center;justify-content:center;padding:12px 44px 8px;
  font-family:var(--display);font-weight:600;font-size:15px;text-align:center
}
.pop__x{position:absolute;right:8px;top:7px;width:32px;height:32px;border-radius:10px;display:grid;place-items:center}
.pop__x:hover{background:rgba(18,13,68,.08)}
.pop__body{padding:4px 14px 0;display:grid;gap:10px}
.pop__body label.fld{display:grid;gap:4px;font-size:12px;font-weight:600;color:var(--muted)}
.pop__body hr{border-top:1px solid var(--line);margin:2px 0}
.pop h6{font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.opt{
  display:flex;align-items:center;gap:10px;width:100%;padding:7px 8px;border-radius:12px;text-align:left;cursor:pointer
}
.opt:hover{background:rgba(18,13,68,.07)}
.opt input[type=checkbox],.opt input[type=radio]{width:16px;height:16px;accent-color:var(--mint-dark);flex:none}
.opt .lbl{flex:1;min-height:30px;font-size:13px;border-radius:10px}
.opt.cur{background:rgba(113,230,204,.25)}
.lbl-row{display:flex;align-items:center;gap:4px}
.lbl-row .opt{flex:1;min-width:0}
.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.sw{height:36px;border-radius:12px;position:relative;font-size:11px;font-weight:600}
.sw.on{box-shadow:0 0 0 3px var(--cream),0 0 0 5px var(--navy)}
.bgs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.bgs .sw{height:44px}
.mlist{display:grid;gap:4px}
.mrow{display:flex;align-items:center;gap:8px}
.mrow .in{padding:6px 10px}
.mrow select{width:auto;padding:6px 4px}
.arch{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--white);border-radius:12px;box-shadow:0 1px 0 var(--line)}
.arch span{flex:1;min-width:0;overflow-wrap:anywhere;font-size:13px}
.arch .btn{padding:6px 10px;font-size:13px}
.hint{font-size:12px;color:var(--muted)}

.toast{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:400;
  display:flex;align-items:center;gap:14px;background:var(--navy);color:var(--cream);
  border-radius:999px;padding:11px 12px 11px 20px;box-shadow:0 14px 30px rgba(8,5,29,.35);
  font-weight:500;max-width:calc(100vw - 24px)
}
.toast button{color:var(--mint);font-weight:700;padding:4px 10px;border-radius:999px}
.toast button:hover{background:rgba(113,230,204,.15)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

.list,.addlist,.addlist-form{cursor:auto}
.addlist{cursor:pointer}
body.panning,body.panning *{cursor:grabbing!important;user-select:none}

/* =========================================================
   LOGIN
   ========================================================= */
.login{
  position:fixed;inset:0;z-index:500;overflow:auto;display:grid;place-items:center;padding:22px;
  background:radial-gradient(900px 600px at 88% -10%,rgba(113,230,204,.22),transparent 60%),radial-gradient(700px 500px at -5% 110%,rgba(255,193,0,.13),transparent 60%),var(--navy);
  color:var(--cream)
}
.login[hidden]{display:none}
.login__box{width:min(400px,100%);display:grid;gap:14px}
.login__logo{height:84px;width:auto;justify-self:center;margin-bottom:6px}
.login h1{font-size:clamp(30px,8vw,40px);text-align:center}
.login__lead{text-align:center;font-weight:300;color:rgba(250,249,246,.86)}
.login__list{display:grid;gap:8px}
.login__list .opt{background:var(--cream);color:var(--navy);border-radius:999px;padding:8px 16px 8px 8px;font-family:var(--display);font-weight:600;font-size:17px}
.login__list .opt:hover{background:var(--apricot)}
.login__who{display:flex;align-items:center;gap:10px;justify-content:center}
.login__who .av{box-shadow:0 0 0 2px var(--navy)}
.login__who .linkish{color:var(--serenity);font-weight:500;font-size:13px}
.login .fld{display:grid;gap:4px;font-size:12px;font-weight:600;color:var(--serenity)}
.login .in{color:var(--navy)}
.login__keep{display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(250,249,246,.86)}
.login__keep input{accent-color:var(--mint-dark);width:16px;height:16px}
.login__err{min-height:20px;text-align:center;font-weight:600;font-size:13px;color:#ff9aa8}
.login__g{display:grid;gap:10px;justify-items:center;margin-top:6px}
.login__g>span{display:flex;align-items:center;gap:12px;width:100%;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--serenity)}
.login__g>span::before,.login__g>span::after{content:"";flex:1;height:1px;background:rgba(250,249,246,.2)}
.pop .login__err{color:var(--bordo);min-height:0}
.pop .login__err:empty{display:none}
body.locked #app,body.locked .hdr{visibility:hidden}

/* =========================================================
   MODELOS
   ========================================================= */
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.pill{padding:7px 15px;border-radius:999px;background:var(--white);border:1.5px solid var(--line);font-weight:600;font-size:13px;transition:background .15s,border-color .15s}
.pill:hover{border-color:var(--mint-dark)}
.pill.on{background:var(--navy);color:var(--cream);border-color:var(--navy)}
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px}
.tpl{display:flex;flex-direction:column;background:var(--white);border-radius:var(--r-card);overflow:hidden;box-shadow:0 10px 24px rgba(18,13,68,.12);transition:transform .18s ease,box-shadow .18s ease}
.tpl:hover{transform:translateY(-3px);box-shadow:0 16px 30px rgba(18,13,68,.2)}
.tpl__prev{display:flex;gap:6px;height:132px;padding:12px 12px 0;overflow:hidden}
.tpl__col{flex:1;min-width:0;display:grid;align-content:start;gap:4px;background:rgba(250,249,246,.92);border-radius:8px 8px 0 0;padding:6px}
.tpl__col b{font-size:9.5px;font-weight:600;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tpl__col i{display:block;height:11px;border-radius:4px;background:rgba(18,13,68,.14)}
.tpl__body{display:flex;flex-direction:column;gap:6px;padding:14px 16px 16px;flex:1}
.tpl__cat{color:var(--teal);font-size:10.5px!important;letter-spacing:.2em!important}
.tpl__body h3{font-size:19px;line-height:1.15}
.tpl__blurb{font-size:13px;color:var(--muted);line-height:1.5}
.tpl__meta{font-size:12px;color:var(--muted);margin-top:auto;padding-top:4px}
.tpl__body .row{margin-top:6px}

/* =========================================================
   LOGIN (nuvem)
   ========================================================= */
.login__form{display:grid;gap:12px}
.gbtn{
  display:flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:11px 18px;border-radius:999px;
  background:var(--white);color:#1f1f1f;font-family:var(--display);font-weight:600;font-size:16px;
  border:1.5px solid transparent;transition:transform .15s,box-shadow .15s
}
.gbtn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,.3)}
.gbtn svg{width:22px;height:22px}
.login__or{display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--serenity)}
.login__or::before,.login__or::after{content:"";flex:1;height:1px;background:rgba(250,249,246,.2)}
.login__links{text-align:center;font-size:13.5px;color:rgba(250,249,246,.8)}
.login__links .linkish{color:var(--serenity);font-weight:600}
.login__ok{color:var(--mint)!important}
.btn--ghost-light{background:none;border:1.5px solid rgba(250,249,246,.35);color:var(--cream)}
.btn--ghost-light:hover{border-color:var(--mint);color:var(--mint)}

/* =========================================================
   MENU DA CONTA
   ========================================================= */
.me{position:relative}
.me__dot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 2px var(--navy)}
.acct-me{display:flex;align-items:center;gap:12px;padding:6px 8px 8px}
.acct-me .av{width:40px;height:40px;font-size:15px}
.acct-me div{min-width:0}
.acct-me b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-me small{display:block;color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.opt svg{color:var(--muted)}
.opt__r{margin-left:auto;font-size:12.5px;color:var(--muted)}
.pill-n{margin-left:auto;background:var(--gold);color:#120D44;border-radius:999px;padding:0 8px;font-size:11.5px;font-weight:700;line-height:1.6}
.themes{display:grid;padding-left:26px}
.keys{display:grid;gap:8px}
.keys__row{display:flex;align-items:center;gap:12px;font-size:13px}
.keys__row kbd{
  flex:none;min-width:34px;text-align:center;padding:2px 9px;border-radius:8px;background:var(--white);
  border:1.5px solid var(--line);border-bottom-width:3px;font-family:var(--font);font-weight:600;font-size:12px;white-space:nowrap
}
.keys__row span{flex:1;color:var(--muted)}

/* =========================================================
   PÁGINAS DA CONTA / AJUDA
   ========================================================= */
.home__hero--sm{padding:28px 0 26px}
.acct-id{display:flex;align-items:center;gap:16px}
.acct-id .av{width:64px;height:64px;font-size:24px;box-shadow:0 0 0 3px var(--navy-2)}
.acct-id h1{font-size:clamp(26px,5vw,40px)}
.acct-id p{display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--serenity);font-size:14px;margin-top:6px}
.role{display:inline-block;border-radius:999px;padding:1px 10px;font-size:11.5px;font-weight:700;background:var(--mint);color:#120D44}
.role--member{background:var(--serenity)}
.acct{display:grid;grid-template-columns:230px minmax(0,1fr);gap:30px;padding-top:26px}
.acct__nav{display:grid;align-content:start;gap:4px;position:sticky;top:16px}
.acct__tab{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;font-weight:600;font-size:14px;transition:background .15s}
.acct__tab:hover{background:rgba(18,13,68,.07)}
.acct__tab.on{background:var(--navy);color:var(--cream)}
.acct__tab.on svg{color:var(--mint)}
.acct__main{min-width:0;max-width:720px}
.acct__main .sec-title{margin-top:0}
.acct__h3{font-family:var(--display);font-weight:600;font-size:17px;margin:26px 0 8px}
.acct__form{display:grid;gap:16px;max-width:520px}
.feedback-row{padding:20px 0;border-bottom:1px solid var(--line);display:grid;gap:10px;min-width:0}
.feedback-row h3{font-family:var(--display);font-size:19px;overflow-wrap:anywhere}
.feedback-row__meta{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:12px;color:var(--muted)}
.feedback-status{font-weight:600;color:var(--navy)}
.feedback-row__message{white-space:pre-wrap;overflow-wrap:anywhere}
.feedback-row .fld{display:grid;gap:4px;font-size:12px;color:var(--muted);max-width:200px}
.feedback-error{color:var(--bordo);font-size:13px}
.feedback-error:empty{display:none}
.acct__form .fld{display:grid;gap:4px;font-size:12px;font-weight:600;color:var(--muted)}
.acct__sw{max-width:360px}
.acct__prev{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px}
.acct__prev .av{width:40px;height:40px;font-size:15px}
.vis{background:var(--white);border:1.5px solid var(--line);border-radius:16px;padding:14px 16px}
.vis ul{margin-top:6px;display:grid;gap:4px;font-size:13px;color:var(--muted);list-style:disc;padding-left:18px}
.acct__dl{display:grid;grid-template-columns:130px 1fr;gap:10px 16px;background:var(--white);border:1.5px solid var(--line);border-radius:16px;padding:16px}
.acct__dl dt{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.12em}
.team{display:grid;gap:10px;margin:14px 0}
.team__row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;background:var(--white);border:1.5px solid var(--line);border-radius:16px;padding:10px 14px}
.team__row.is-pending{border-color:var(--gold);background:var(--apricot-soft)}
.team__row.is-blocked{opacity:.7}
.team__who{flex:1;min-width:160px}
.team__who b{display:block;font-weight:600}
.team__who small{color:var(--muted);font-size:12px}
.team__name{flex:1;min-width:140px}
.team__role{width:auto;padding:6px 8px}
.team__row .btn{padding:7px 14px;font-size:14px}
.chip{border-radius:999px;padding:1px 10px;font-size:11.5px;font-weight:700}
.chip--pending{background:var(--gold);color:#120D44}
.chip--active{background:var(--mint);color:#120D44}
.chip--blocked{background:var(--bordo);color:#FAF9F6}
.help{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;padding-top:26px}
.help article{background:var(--white);border-radius:var(--r-card);padding:20px 22px;box-shadow:0 8px 20px rgba(18,13,68,.08)}
.help h3{font-size:19px;margin-bottom:8px}
.help p{color:var(--muted);font-size:14px;line-height:1.6}
.help code{background:rgba(18,13,68,.08);border-radius:6px;padding:1px 6px;font-size:12.5px}
@media (max-width:820px){
  .acct{grid-template-columns:1fr;gap:16px}
  .acct__nav{position:static;display:flex;overflow-x:auto;gap:6px;padding-bottom:4px}
  .acct__tab{flex:none;padding:8px 14px}
  .acct__tab span:not(.pill-n){white-space:nowrap}
  .acct__dl{grid-template-columns:1fr}
}

/* =========================================================
   TEMA ESCURO
   Troca os tokens por escopo: a página fica escura, as áreas de marca
   (cabeçalho, capas, quadro) mantêm a paleta oficial e as superfícies
   (listas, cartões, janelas) ficam em marinho elevado.
   ========================================================= */
:root{--ink:#120D44}
html[data-theme=dark]{color-scheme:dark}
html[data-theme=dark] body{
  --cream:#0E0E10;--white:#18181C;--navy:#FAF9F6;--line:rgba(250,249,246,.14);--muted:rgba(250,249,246,.64);
  background:var(--cream);color:var(--navy)
}
html[data-theme=dark] :is(.hdr,.home__hero,.login,.toast,.board,.tile,.tpl__prev){
  --navy:#0A0A0C;--cream:#FAF9F6;--white:#FFFFFF;--line:rgba(10,10,12,.12);--muted:rgba(10,10,12,.62)
}
html[data-theme=dark] :is(.list,.addlist-form,.cm-dlg,.pop,.tile--new){
  --cream:#1C1C21;--white:#27272D;--navy:#FAF9F6;--line:rgba(250,249,246,.16);--muted:rgba(250,249,246,.66)
}
html[data-theme=dark] .tile--new{border-color:rgba(250,249,246,.22)}
html[data-theme=dark] .tile--new:hover{background:#18181C}
html[data-theme=dark] .desc a{color:var(--serenity)}
html[data-theme=dark] .ph{background:rgba(250,249,246,.1);border-color:rgba(250,249,246,.25)}
html[data-theme=dark] :is(.icon-btn:hover,.addcard:hover,.opt:hover,.ck:hover,.acct__tab:hover,.sbtn,.btn--soft,.chip-add,.cm__close,.desc-empty,.list__count,.pop__x:hover,.tpl__col i){background:rgba(250,249,246,.1)}
html[data-theme=dark] :is(.sbtn:hover,.btn--soft:hover,.chip-add:hover,.cm__close:hover,.desc-empty:hover){background:rgba(250,249,246,.18)}
html[data-theme=dark] .prog__bar{background:rgba(250,249,246,.16)}
html[data-theme=dark] .dueline,html[data-theme=dark] .cm__sec-h svg{background-color:transparent}
html[data-theme=dark] .dueline{background:rgba(250,249,246,.1)}
html[data-theme=dark] .team__row.is-pending{background:rgba(255,193,0,.12)}
html[data-theme=dark] .acct__tab.on{background:var(--mint);color:#120D44}
html[data-theme=dark] .acct__tab.on svg{color:#120D44}
html[data-theme=dark] .pill.on{background:var(--mint);color:#120D44;border-color:var(--mint)}
html[data-theme=dark] .keys__row kbd{background:rgba(250,249,246,.08)}
html[data-theme=dark] .me__dot{box-shadow:0 0 0 2px #0A0A0C}

.btn--soft,.btn--ghost{color:var(--navy)}

/* botão Sair no cabeçalho (modo nuvem) */
.out{display:flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;color:var(--serenity);font-weight:600;font-size:14px;transition:background .2s,color .2s}
.out:hover{background:rgba(250,249,246,.12);color:var(--cream)}
.out[hidden]{display:none}
@media (max-width:720px){.out span{display:none}.out{padding:8px}}

/* tema escuro neutro: grafite, sem azul (as cores de destaque da marca continuam) */
html[data-theme=dark]{--nav-pill:#050506;--navy-2:#18181C}
html[data-theme=dark] .bg-navy,html[data-theme=dark] .login{
  background:radial-gradient(900px 600px at 88% -10%,rgba(113,230,204,.07),transparent 60%),radial-gradient(700px 500px at -5% 110%,rgba(255,193,0,.05),transparent 60%),#0A0A0C
}
html[data-theme=dark] .home__hero::before{background:radial-gradient(circle,rgba(113,230,204,.07),transparent 65%)}
html[data-theme=dark] .stat{background:rgba(250,249,246,.05);border-color:rgba(250,249,246,.1)}
html[data-theme=dark] .acct-id .av{box-shadow:0 0 0 3px #26262C}
html[data-theme=dark] .hdr__line{opacity:.9}