:root{
    --teal:#0F7A8A; --teal-dark:#0A5560; --teal-deep:#073d46;
    --mint:#2BB99A; --mint-soft:#d6f1e9; --coral:#EF8B6B; --coral-soft:#fce3da; --amber:#E9A23B; --amber-soft:#fbecd6;
    --bg:#F1F6F7; --surface:#ffffff; --surface-2:#f7fbfb; --line:#e2ecee;
    --ink:#16363c; --ink-soft:#48696f; --muted:#7e979c;
    --shadow:0 1px 2px rgba(11,60,66,.04),0 8px 24px -12px rgba(11,60,66,.18);
    --radius:18px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{
    font-family:'Manrope',sans-serif;background:var(--bg);color:var(--ink);
    -webkit-font-smoothing:antialiased;min-height:100vh;
    display:flex;align-items:flex-start;justify-content:center;
    padding:56px 20px 80px;
  }
  h1,h2,.brandname{font-family:'Outfit',sans-serif;letter-spacing:-.01em}
  button{font-family:inherit;cursor:pointer;border:none;background:none}
  ::-webkit-scrollbar{width:9px;height:9px}
  ::-webkit-scrollbar-thumb{background:#cbdde0;border-radius:20px}
  ::-webkit-scrollbar-track{background:transparent}
  ::selection{background:var(--mint-soft)}

  .console{width:100%;max-width:720px}

  .eyebrow{
    display:flex;align-items:center;gap:8px;margin-bottom:14px;
    font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--teal);
  }
  .eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 3px var(--mint-soft)}
  .eyebrow.off .dot{background:var(--coral);box-shadow:0 0 0 3px var(--coral-soft)}
  .eyebrow.off{color:var(--coral)}

  h1{font-weight:800;font-size:clamp(26px,4vw,32px);margin-bottom:6px}
  h1 span{color:var(--mint)}
  .lede{color:var(--ink-soft);font-size:14.5px;margin-bottom:26px;max-width:56ch;line-height:1.65}

  .stats{display:flex;gap:10px;margin-bottom:22px;flex-wrap:wrap}
  .stat{
    background:var(--surface);border:1px solid var(--line);border-radius:14px;
    padding:14px 18px;flex:1;min-width:130px;box-shadow:var(--shadow);
  }
  .stat b{font-family:'Outfit';font-size:24px;display:block;line-height:1.1;font-weight:700}
  .stat small{color:var(--muted);font-size:11.5px;letter-spacing:.03em;font-weight:600}
  .stat.queued b{color:var(--amber)}
  .stat.done b{color:var(--mint)}
  .stat.total b{color:var(--teal)}

  .panel{
    background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
    overflow:hidden;box-shadow:var(--shadow);
  }

  .cmd-row{
    display:flex;align-items:center;gap:10px;padding:16px 18px;
    border-bottom:1px solid var(--line);background:var(--surface-2);
  }
  .cmd-row input{
    flex:1;background:var(--surface);border:1.5px solid var(--line);border-radius:11px;
    padding:11px 14px;outline:none;color:var(--ink);font-family:inherit;font-size:14px;transition:.15s;
  }
  .cmd-row input:focus{border-color:var(--teal);box-shadow:0 0 0 4px rgba(15,122,138,.1)}
  .cmd-row input::placeholder{color:var(--muted)}
  .cmd-row button{
    font-family:'Outfit';font-weight:700;font-size:13.5px;color:#fff;
    background:var(--teal);padding:11px 18px;border-radius:11px;
    transition:.15s;flex-shrink:0;
  }
  .cmd-row button:hover{background:var(--teal-dark);transform:translateY(-1px);box-shadow:0 12px 24px -12px rgba(10,85,96,.5)}
  .cmd-row button:active{transform:none}

  .filter-row{
    display:flex;align-items:center;gap:9px;padding:12px 18px;
    border-bottom:1px solid var(--line);
  }
  .filter-row svg{width:15px;height:15px;color:var(--muted);flex-shrink:0}
  .filter-row input{
    flex:1;background:none;border:none;outline:none;color:var(--ink);
    font-family:inherit;font-size:13.5px;
  }
  .filter-row input::placeholder{color:var(--muted)}
  .filter-row .count{font-size:11.5px;color:var(--muted);font-weight:600}

  .list{max-height:520px;overflow-y:auto}

  .row{
    display:flex;align-items:center;gap:13px;padding:13px 18px;
    border-bottom:1px solid var(--line);transition:.15s;
  }
  .row:last-child{border-bottom:none}
  .row:hover{background:var(--surface-2)}
  .row.done .title{color:var(--muted);text-decoration:line-through}

  .toggle{
    width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line);
    flex-shrink:0;cursor:pointer;display:flex;align-items:center;justify-content:center;
    transition:.15s;background:var(--surface-2);
  }
  .toggle:hover{border-color:var(--mint)}
  .row.done .toggle{background:var(--mint);border-color:var(--mint)}
  .toggle svg{width:11px;height:11px;color:#fff;opacity:0}
  .row.done .toggle svg{opacity:1}

  .row-main{flex:1;min-width:0}
  .title{font-size:14.5px;font-weight:600;word-break:break-word;color:var(--ink)}
  .meta{font-size:11.5px;color:var(--muted);margin-top:3px;display:flex;gap:10px;font-weight:600}

  .del{
    width:30px;height:30px;border-radius:9px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;color:var(--muted);
    opacity:0;transition:.15s;cursor:pointer;
  }
  .row:hover .del{opacity:1}
  .del:hover{background:var(--coral-soft);color:var(--coral)}
  .del svg{width:15px;height:15px}

  .empty{padding:52px 20px;text-align:center;color:var(--muted)}
  .empty b{display:block;font-family:'Outfit';color:var(--ink-soft);font-size:14px;margin-bottom:5px;font-weight:700}
  .empty span{font-size:12.5px}

  .foot{
    margin-top:18px;display:flex;justify-content:space-between;align-items:center;
    font-size:11.5px;color:var(--muted);flex-wrap:wrap;gap:8px;font-weight:600;
  }
  .foot code{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:2px 6px;color:var(--teal-dark)}

  #toasts{position:fixed;bottom:22px;right:22px;display:flex;flex-direction:column;gap:8px;z-index:99}
  .toast{
    background:var(--surface);border:1px solid var(--line);border-radius:12px;
    padding:11px 15px;font-size:13px;display:flex;align-items:center;gap:9px;color:var(--ink);
    box-shadow:0 20px 40px -20px rgba(11,60,66,.35);animation:in .2s ease;font-weight:600;
  }
  .toast.err{border-color:var(--coral)}
  .toast i{width:7px;height:7px;border-radius:50%;background:var(--mint);flex-shrink:0}
  .toast.err i{background:var(--coral)}
  @keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

  @media(max-width:560px){
    body{padding:34px 14px 60px}
    .stats{gap:8px}
    .stat{min-width:100px;padding:11px 13px}
  }
  @media (prefers-reduced-motion: reduce){
    *{animation:none!important;transition:none!important}
  }

  /* Salida del toast sin manipular atributos style inline (CSP-friendly) */
  .toast.fade-out{ opacity:0; }