:root{
  --canvas:#F4F2FA;
  --white:#fff;
  --ink:#17132E;
  --ink-2:#5B5578;
  --line:#E3DFF2;
  --violet:#5B3DF5;
  --aqua:#06B6A9;
  --coral:#FF5A46;
  --amber:#FFB627;
  --night:#100D22;
  --ease:cubic-bezier(.22,.72,.2,1);
  --r:18px;

  --c-default:#FFFFFF;
  --c-violet:#EDE9FF;
  --c-aqua:#DFF6F4;
  --c-coral:#FFE7E3;
  --c-amber:#FFF2D6;
  --c-slate:#E8E9F2;
}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;background:var(--canvas);color:var(--ink);
  font-family:"Manrope",system-ui,sans-serif;font-size:1rem;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
button{font:inherit;cursor:pointer}

/* ---------- top bar ---------- */
.bar{position:sticky;top:0;z-index:20;background:rgba(244,242,250,.9);backdrop-filter:blur(12px)}
.bar-inner{
  width:min(100% - 2rem,1180px);margin-inline:auto;
  display:flex;align-items:center;gap:.9rem;padding:.9rem 0;
}
.back{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--ink);font-weight:700}
.chip{width:20px;height:20px;border-radius:7px;background:linear-gradient(140deg,var(--violet),var(--coral) 70%,var(--amber));box-shadow:inset 0 0 0 3px rgba(255,255,255,.85)}
.crumb{font-family:"JetBrains Mono",monospace;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);padding-left:.6rem;border-left:1px solid var(--line)}

.search{position:relative;margin-left:auto;flex:1 1 200px;max-width:340px}
.search svg{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--ink-2)}
.search input{
  width:100%;font:inherit;font-size:.92rem;
  padding:.6rem .9rem .6rem 2.3rem;
  border:1px solid var(--line);border-radius:999px;background:var(--white);color:var(--ink);
}
.search input:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(91,61,245,.15)}

.solid{background:var(--ink);color:#fff;border:0;border-radius:999px;padding:.6rem 1.2rem;font-weight:700;font-size:.9rem;transition:background .2s}
.solid:hover{background:var(--violet)}
.ghost{background:var(--white);color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:.55rem 1.1rem;font-weight:600;font-size:.88rem;transition:border-color .2s}
.ghost:hover{border-color:var(--ink)}

.banner{
  width:min(100% - 2rem,1180px);margin:.2rem auto 1.4rem;
  font-size:.86rem;color:var(--ink-2);
  background:rgba(91,61,245,.07);border-left:3px solid var(--violet);
  border-radius:0 12px 12px 0;padding:.7rem 1rem;
}
.banner a{color:var(--violet);font-weight:700}

.page{width:min(100% - 2rem,1180px);margin-inline:auto;padding-bottom:4rem}

/* ---------- composer ---------- */
.composer{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:1rem 1.1rem;margin-bottom:1.6rem;
  box-shadow:0 14px 34px -26px rgba(23,19,46,.5);
  max-width:640px;
}
.composer-title,.composer-body,.tag-input{
  width:100%;font:inherit;border:0;background:transparent;color:var(--ink);resize:none;
}
.composer-title{font-weight:700;font-size:1.05rem;margin-bottom:.3rem}
.composer-title:focus,.composer-body:focus,.tag-input:focus{outline:none}
.composer-body{min-height:2.4rem;line-height:1.55}
.composer-foot{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:.8rem;padding-top:.8rem;border-top:1px solid var(--line)}
.tag-input{
  flex:1 1 160px;min-width:130px;font-size:.85rem;color:var(--ink-2);
  border:1px solid var(--line);border-radius:999px;padding:.4rem .8rem;
}

.swatches{display:flex;gap:.35rem}
.sw{width:22px;height:22px;border-radius:50%;border:1px solid var(--line);padding:0;transition:transform .15s var(--ease),box-shadow .15s}
.sw:hover{transform:scale(1.12)}
.sw.is-on{box-shadow:0 0 0 2px var(--ink)}

/* ---------- filters ---------- */
.filters{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin-bottom:1.2rem}
.chip-btn{
  background:var(--white);border:1px solid var(--line);border-radius:999px;
  padding:.4rem .95rem;font-size:.85rem;font-weight:600;color:var(--ink-2);
  transition:background .2s,color .2s,border-color .2s;
}
.chip-btn:hover{border-color:var(--ink)}
.chip-btn.is-on{background:var(--ink);color:#fff;border-color:var(--ink)}
.tag-filters{display:flex;flex-wrap:wrap;gap:.35rem;margin-left:.4rem;padding-left:.6rem;border-left:1px solid var(--line)}

.status{font-family:"JetBrains Mono",monospace;font-size:.72rem;color:var(--ink-2);margin:0 0 1rem;min-height:1.1em}
.empty{color:var(--ink-2);font-size:.95rem}

/* ---------- board ---------- */
.board{columns:4 260px;column-gap:1rem}
.note{
  break-inside:avoid;margin:0 0 1rem;
  background:var(--bg,var(--white));
  border:1px solid var(--line);border-radius:var(--r);
  padding:1rem 1.1rem;
  transition:box-shadow .25s var(--ease),transform .2s var(--ease);
  cursor:pointer;
}
.note:hover{box-shadow:0 18px 36px -26px rgba(23,19,46,.6);transform:translateY(-2px)}
.note.is-pinned{border-color:rgba(91,61,245,.45)}
.note h3{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.02rem;letter-spacing:-.015em;margin:0 0 .4rem}
.note p{margin:0;font-size:.93rem;white-space:pre-wrap;overflow-wrap:anywhere}
.note-tags{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.8rem}
.note-tags span{font-family:"JetBrains Mono",monospace;font-size:.6rem;background:rgba(23,19,46,.06);border-radius:999px;padding:.2rem .5rem;color:var(--ink-2)}
.note-acts{display:flex;gap:.15rem;margin-top:.7rem;opacity:0;transition:opacity .2s}
.note:hover .note-acts,.note:focus-within .note-acts{opacity:1}
.note-acts button{
  background:transparent;border:0;border-radius:8px;padding:.35rem;color:var(--ink-2);
  display:inline-flex;transition:background .18s,color .18s;
}
.note-acts button:hover{background:rgba(23,19,46,.08);color:var(--ink)}
.note-acts svg{width:16px;height:16px}
.note-acts .on{color:var(--violet)}
.note-time{font-family:"JetBrains Mono",monospace;font-size:.58rem;color:var(--ink-2);margin-left:auto;align-self:center}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:40;background:rgba(16,13,34,.5);display:grid;place-items:center;padding:1rem}
.modal[hidden]{display:none}
.modal-card{
  width:min(100%,560px);background:var(--white);border-radius:22px;padding:1.2rem 1.3rem;
  box-shadow:0 40px 80px -30px rgba(16,13,34,.7);
}

.foot{border-top:1px solid var(--line);padding:1.5rem 0;text-align:center}
.foot p{margin:0;font-size:.85rem;color:var(--ink-2)}
.foot a{color:var(--violet);font-weight:700}

@media (max-width:700px){
  .crumb{display:none}
  .board{columns:2 160px}
  .bar-inner{flex-wrap:wrap}
  .search{order:3;flex-basis:100%;max-width:none;margin-left:0}
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important}
}