@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

    /* Variáveis de cor e estilo */

:root{
      --bg: #0b1723;        /* azul petróleo profundo */
      --panel: #0f2131;     /* azul mais claro para painéis */
      --muted: #94a3b8;     /* slate-400 */
      --text: #e6f0ff;      /* quase branco azulado */
      --brand: #22c55e;     /* verde suave */
      --brand-weak: #a7f3d0;/* verde claro */
      --accent: #38bdf8;    /* azul claro para foco */
      --danger: #ef4444;    /* vermelho para deletar */
      --ok: #10b981;        /* verde confirmação */
      --shadow: 0 10px 30px rgba(0,0,0,.35);
      --radius: 18px;
    }
    html,body{height:100%}
    body{
      margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu; color:var(--text); background: radial-gradient(1200px 600px at 10% -10%, #0f2131 0%, transparent 60%),
      radial-gradient(1000px 500px at 110% -10%, #0f2131 0%, transparent 60%), var(--bg);
      line-height:1.45;
    }
    a{color:var(--brand-weak)}
    .container{max-width:1200px;margin-inline:auto;padding:20px}
    .skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
    .skip:focus{left:16px;top:16px;width:auto;height:auto;background:#111827;color:#fff;padding:10px 14px;border-radius:10px;z-index:1000}

    /* Header */
    header{position:sticky;top:0;backdrop-filter:saturate(1.2) blur(8px);background:rgba(11,23,35,.6);border-bottom:1px solid rgba(255,255,255,.06);z-index:50}
    .nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px}
    .brand{display:flex;align-items:center;gap:10px;font-weight:700}
    .logo{width:28px;height:28px;border-radius:9px;background:conic-gradient(from 200deg, var(--brand), var(--accent));box-shadow:0 6px 16px rgba(34,197,94,.35)}
    .nav a{color:var(--text);text-decoration:none;opacity:.85}
    .nav a:hover{opacity:1}
    .menu{display:flex;gap:14px;align-items:center}
    .hamb{display:none}
    @media (max-width: 800px){
      .menu{display:none}
      .hamb{display:inline-flex}
      .menu.open{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:60px;background:rgba(6,12,19,.98);border-bottom:1px solid rgba(255,255,255,.06);padding:16px}
    }

    /* Hero */
    .hero{padding:40px 20px 10px}
    .hero-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
    .card{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);box-shadow:var(--shadow)}
    .card.pad{padding:22px}
    .title{font-size:clamp(28px, 4vw, 44px);letter-spacing:-.02em;margin:0 0 6px}
    .subtitle{color:var(--muted);margin:0 0 18px}
    .cta{display:flex;gap:10px;flex-wrap:wrap}
    .btn{appearance:none;border:none;border-radius:14px;padding:12px 16px;font-weight:600;cursor:pointer}
    .btn.primary{background:linear-gradient(135deg, var(--brand), #16a34a);color:#05140d}
    .btn.ghost{background:transparent;color:var(--text);border:1px solid rgba(255,255,255,.14)}

    @media (max-width: 900px){
      .hero-wrap{grid-template-columns:1fr}
    }

    /* Grid principal */
    .grid{display:grid;gap:20px;grid-template-columns:1.2fr .8fr}
    @media (max-width: 1100px){.grid{grid-template-columns:1fr}}

    /* Coluna esquerda: Dashboard */
    .section-title{display:flex;align-items:center;justify-content:space-between;margin:10px 0 6px}
    .small{font-size:12px;color:var(--muted)}

    .kanban{display:grid;gap:14px;grid-template-columns:repeat(3, 1fr)}
    .lane{min-height:220px;padding:10px;border-radius:14px;background:rgba(255,255,255,.02);border:1px dashed rgba(255,255,255,.12)}
    .lane h4{margin:0 0 8px;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-weak)}
    .task{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:10px;margin:10px 0;display:grid;gap:6px}
    .task[draggable="true"]{cursor:grab}
    .task:focus{outline:2px solid var(--accent)}
    .task.done{opacity:.7;text-decoration:line-through}
    .task-actions{display:flex;gap:8px}
    .chip{font-size:10px;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:4px 8px;background:rgba(56,189,248,.12);border:1px solid rgba(56,189,248,.25);color:#c5eaff}
    .chip.green{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.25);color:#d8ffe8}

    .adder{display:flex;gap:8px;margin-top:8px}
    .input{flex:1;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:10px;color:var(--text)}

    /* Pomodoro */
    .pomodoro{display:grid;grid-template-columns:1fr 1fr;gap:14px}
    @media (max-width: 700px){.pomodoro{grid-template-columns:1fr}}
    .timer{display:grid;place-items:center;aspect-ratio:1;background:radial-gradient(500px 300px at 50% -10%, rgba(56,189,248,.2), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);position:relative}
    .time{font-size:clamp(38px, 6vw, 64px);font-weight:700}
    .state{position:absolute;bottom:12px;font-size:12px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}

    /* Coluna direita: Chat e Stats */
    .chat{display:grid;grid-template-rows:auto 1fr auto;min-height:300px}
    .chat-log{display:flex;flex-direction:column;gap:10px;max-height:340px;overflow:auto;padding-right:2px}
    .msg{display:flex;gap:10px}
    .bubble{max-width:85%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:10px}
    .me .bubble{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.25)}

    /* Stats */
    .stats{display:grid;grid-template-columns:repeat(3, 1fr);gap:10px}
    .kpi{padding:14px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1)}
    .kpi .v{font-weight:700;font-size:22px}
    canvas{width:100%;height:180px}

    /* Acessibilidade */
    :focus-visible{outline:3px solid var(--accent);outline-offset:2px}
    @media (prefers-reduced-motion: reduce){
      *{transition:none !important;animation:none !important}
    }