.app-header,.btn{align-items:center}body,h1{margin:0}.btn,.toolbar{border:1px solid var(--hairline);background:var(--panel)}.btn,.icon-btn{cursor:pointer}.item,.toolbar,dialog{box-shadow:var(--shadow)}:root{--bg:#0b0c0f;--panel:#12141a;--text:#e8eaf0;--muted:#a9b0c0;--hairline:#273043;--primary:#7b61ff;--primary-contrast:#ffffff;--danger:#ff6b6b;--warn:#ffbf47;--ok:#3aa76d;--focus:#70b5ff;--shadow:0 10px 25px rgba(0, 0, 0, .35);--btn:#273043;--control-h:2.4rem}:root.light{--bg:#f7f8fb;--panel:#ffffff;--text:#10131a;--muted:#5a6476;--hairline:#e5e8f0;--primary:#5a63ff;--primary-contrast:#ffffff;--danger:#c62828;--warn:#b26a00;--ok:#1b8a50;--focus:#005fcc;--shadow:0 8px 18px rgba(0, 0, 0, .08);--btn:#5a6476}*{box-sizing:border-box}body,html{height:100%}html{color-scheme:dark light;scrollbar-gutter:stable both-edges}@supports not (scrollbar-gutter:stable){html{overflow-y:scroll}}body{font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";background:var(--bg);color:var(--text)}.app-footer,.app-header{max-width:1100px;margin:0 auto;padding:1rem clamp(1rem,2vw,1.5rem);text-align:center}.app-header{display:flex;justify-content:space-between}h1{font-size:clamp(1.25rem, 2vw, 1.6rem)}.header-actions{display:flex;gap:.5rem}.filters,.io,.toolbar{display:flex;gap:.75rem 1rem}.app-main{max-width:1100px;margin:0 auto;padding:0 clamp(1rem,2vw,1.5rem) 2rem}.toolbar{flex-wrap:wrap;align-items:end;justify-content:space-between;margin:.5rem 0 1rem;padding:.75rem;border-radius:12px}.filters,.io{flex-wrap:wrap;align-items:center}.label{display:block;font-size:.8rem;color:var(--muted);margin-bottom:.25rem}.btn,.icon-btn,select{color:var(--text)}input[type=datetime-local],input[type=number],input[type=search],input[type=text],textarea{width:100%;height:var(--control-h);padding:0 .7rem;border-radius:10px;border:1px solid var(--hairline);background:0 0;color:var(--text);outline:0}textarea{min-height:calc(var(--control-h) * 2.2);padding:.6rem .7rem;height:auto}.btn,.file-inline .btn,select{height:var(--control-h)}input::placeholder,textarea::placeholder{color:var(--muted)}select{width:100%;padding:0 2.2rem 0 .7rem;border-radius:10px;border:1px solid var(--hairline);background-color:var(--panel);outline:0;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23a9b0c0'><path d='M4 6l4 4 4-4z'/></svg>");background-repeat:no-repeat;background-position:right .6rem center;background-size:16px 16px}li{list-style-type:none}@property --angle{syntax:'<angle>';inherits:false;initial-value:0deg}#demoNotice{border-radius:12px;position:relative}#demoNotice::before{content:"";position:absolute;inset:0;padding:2px;border-radius:inherit;--angle:0deg;background:conic-gradient(from var(--angle),#1976d2,#007acc,#7b61ff,#d473d4,#9c27b0,#e26d5c,#ff9800,#ffa600,#ffae42,#92b25a,#2e7d32,#3aa76d,#1976d2);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0) border-box;-webkit-mask-composite:xor;mask-composite:exclude;animation:6s linear infinite pf-ring-rotate}@keyframes pf-ring-rotate{to{--angle:360deg}}#demoNotice .demo-badge{position:absolute;top:8px;right:10px;padding:.25rem .5rem;font-size:12px;font-weight:700;letter-spacing:.04em;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;border:1px solid rgba(255,255,255,.2);text-transform:uppercase;pointer-events:none;user-select:none;line-height:1;box-shadow:0 1px 6px rgba(0,0,0,.25)}.light #demoNotice .demo-badge{background:rgba(255,255,255,.75);color:#111;border-color:rgba(0,0,0,.15)}@media (prefers-reduced-motion:reduce){#demoNotice .demo-badge{transition:none}}#demoNotice[hidden]{display:block;visibility:hidden;margin:0;padding:0;border:0;height:0;min-height:0;overflow:hidden}#demoNotice[hidden]::after,#demoNotice[hidden]::before{content:none}.btn{display:inline-flex;justify-content:center;gap:.4rem;padding:0 .9rem;appearance:none;border-radius:10px}.icon-btn,dialog{border:1px solid var(--hairline)}.btn.primary{background:var(--btn);color:var(--primary-contrast);border-color:transparent}.btn.ghost,.icon-btn{background:0 0}.btn[disabled]{opacity:.6;cursor:not-allowed}.btn.danger{background:var(--danger);color:#fff}.icon-btn{border-radius:10px;padding:.4rem .6rem}.badge,.meta,.tag{color:var(--muted)}.file-inline{position:relative;display:inline-block;vertical-align:middle}.item,.items{display:grid}.file-inline input[type=file]{position:absolute;opacity:0;width:0;height:0}.file-inline .btn{display:inline-flex;align-items:center;justify-content:center}.items{list-style:none;padding:0;margin:1rem 0 0;gap:.75rem}.item{grid-template-columns:1fr auto;gap:.5rem 1rem;align-items:start;padding:.9rem;background:var(--panel);border:2px solid var(--hairline);border-radius:12px;content-visibility:auto;contain-intrinsic-size:120px}.item-actions,.item-header,.item-right{display:flex;gap:.5rem}.item-header{align-items:center}.badges,.tags{flex-wrap:wrap}.item-title{font-weight:600}.meta{font-size:.9rem}.tags{display:flex}.badge,.tag{font-size:.75rem;padding:.2rem .45rem;border-radius:999px;border:1px solid var(--hairline)}.priority-1,.priority-2,.priority-3,dialog{color:var(--text)}.inline-tag{font-size:.8rem;padding:.15rem .4rem}.priority-3{background:color-mix(in oklab,var(--danger) 20%,transparent);border-color:color-mix(in oklab,var(--danger) 45%,var(--hairline))}.priority-2{background:color-mix(in oklab,var(--warn) 20%,transparent);border-color:color-mix(in oklab,var(--warn) 45%,var(--hairline))}.priority-1{background:color-mix(in oklab,var(--ok) 20%,transparent);border-color:color-mix(in oklab,var(--ok) 45%,var(--hairline))}.confirm-dialog,dialog{background:var(--panel)}.item-right{flex-direction:column;align-items:flex-end}.item-actions{margin-top:.25rem}.badges,.tags{gap:.4rem;display:flex}.badges{justify-content:flex-end;min-height:1.6rem;justify-content:flex-end}.tags{min-height:1.4rem;flex-wrap:wrap}.meta{min-height:1.2rem}.item.band-green{border-color:var(--ok)}.item.band-orange{border-color:var(--warn)}.item.band-red{border-color:var(--danger)}.empty{margin:2rem 0;text-align:center;color:var(--muted);padding:2rem;border:1px dashed var(--hairline);border-radius:12px}dialog{border-radius:14px;width:min(720px,96vw);padding:0}dialog::backdrop{background:rgba(0,0,0,.4)}.dialog-header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--hairline);padding:.9rem 1rem}.grid{display:grid;gap:.75rem 1rem;padding:1rem;grid-template-columns:repeat(2,minmax(0,1fr))}.grid .full{grid-column:1/-1}.dialog-actions{display:flex;gap:.5rem;padding:.75rem 1rem;border-top:1px solid var(--hairline)}.dialog-actions .spacer{flex:1}.confirm-dialog{padding:1.5rem;border:1px solid var(--hairline);border-radius:.5rem;max-width:320px}.confirm-actions{margin-top:1rem;display:flex;justify-content:flex-end;gap:.5rem}.item.completed{background:var(--hairline);border-color:var(--hairline);color:var(--muted)}.item.completed .item-title{text-decoration:line-through}.item.completed .btn{pointer-events:none;opacity:.5}.item.completed .btn[data-action=undo]{pointer-events:auto;opacity:1}.sr-only{position:absolute!important;inline-size:1px;block-size:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap}:focus-visible{outline:3px solid var(--focus);outline-offset:2px}@media (max-width:640px){.grid{grid-template-columns:1fr}}

































.toast-container {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  display: flex;
  flex-direction: column-reverse; /* newest toast sits at the bottom */
  align-items: flex-end;
  gap: 0.75rem;
  z-index: 9999;
}

.toast {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--panel);
  color: var(--text);
  padding: 0.75rem 1rem;
  border-radius: 12px;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .3s, transform .3s;
  position: relative; /* for gradient border */
}

/* Animated gradient border */
.toast::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--angle),
    #1976d2,
    #007acc,
    #7b61ff,
    #d473d4,
    #9c27b0,
    #e26d5c,
    #ff9800,
    #ffa600,
    #ffae42,
    #92b25a,
    #2e7d32,
    #3aa76d,
    #1976d2
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  animation: 6s linear infinite pf-ring-rotate;
}

@keyframes pf-ring-rotate {
  to { --angle: 360deg; }
}

.toast.visible {
  opacity: 1;
  transform: translateY(0);
}

.toast-dismiss {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 1.2rem;
  cursor: pointer;
  line-height: 1;
}
.toast-dismiss:hover {
  color: var(--danger);
}