:root{
      --primary:#4F46E5;
      --primary-dark:#4338CA;
      --primary-light:#818CF8;
      --secondary:#0EA5E9;
      --gray-50:#F9FAFB;
      --gray-100:#F3F4F6;
      --gray-200:#E5E7EB;
      --gray-300:#D1D5DB;
      --gray-400:#9CA3AF;
      --gray-500:#6B7280;
      --gray-600:#4B5563;
      --gray-700:#374151;
      --gray-800:#1F2937;
      --gray-900:#111827;
      --white:#fff;
      --success:#10B981;
      --warning:#F59E0B;
      --danger:#EF4444;
      --shadow-sm:0 1px 2px 0 rgb(0 0 0 / .05);
      --shadow:0 1px 3px 0 rgb(0 0 0 / .1),0 1px 2px -1px rgb(0 0 0 / .1);
      --shadow-md:0 4px 6px -1px rgb(0 0 0 / .1),0 2px 4px -2px rgb(0 0 0 / .1);
      --shadow-lg:0 10px 15px -3px rgb(0 0 0 / .1),0 4px 6px -4px rgb(0 0 0 / .1);
      --radius-sm:6px;
      --radius:8px;
      --radius-md:12px;
      --radius-lg:16px;
      --radius-xl:24px;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
      background:linear-gradient(135deg,var(--gray-50),var(--gray-100));
      color:var(--gray-800);
      line-height:1.6;
      min-height:100vh;
      -webkit-font-smoothing:antialiased;
    }
    input,textarea,select,button{font-family:inherit}
    a:focus-visible, button:focus-visible, [role="button"]:focus-visible, [role="menuitem"]:focus-visible, [role="option"]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
      outline:2px solid var(--primary);
      outline-offset:2px;
      box-shadow:0 0 0 3px rgba(79,70,229,.16);
    }
    button:focus:not(:focus-visible), a:focus:not(:focus-visible){outline:none;box-shadow:none}
    .container{max-width:1240px;margin:0 auto;padding:0 24px}

    .topbar{position:sticky;top:0;z-index:40;padding:12px 0;background:linear-gradient(135deg,var(--gray-50),var(--gray-100))}
    .topbar-inner{
      display:flex;align-items:center;gap:10px;padding:14px 18px;flex-wrap:wrap;
      background:rgba(255,255,255,.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
      border:1px solid var(--gray-200);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
    }
    .logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--gray-900);font-weight:800;font-size:1.2rem;margin-right:auto;letter-spacing:-.01em}
    .logo-icon{width:38px;height:38px;border-radius:var(--radius-md);background:linear-gradient(135deg,var(--primary),var(--secondary));display:flex;align-items:center;justify-content:center;color:#fff}
    .logo-icon svg{width:22px;height:22px}
    .btn{
      height:46px;padding:0 14px;border-radius:var(--radius);border:1px solid var(--gray-300);
      background:var(--white);color:var(--gray-700);font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
      text-decoration:none;font-size:.875rem;transition:all .2s ease;
    }
    .btn:hover{border-color:var(--gray-400);background:var(--gray-50);color:var(--gray-900)}
    .btn.primary{border-color:rgba(79,70,229,.35);background:rgba(79,70,229,.08);color:var(--primary-dark)}
    .btn.danger{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.07);color:#991B1B}
    .user-email{font-size:.82rem;color:var(--gray-500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}

    .page{padding:16px 0 36px}
    .headline{margin-bottom:2px}
    .headline h1{margin:0 0 6px;font-size:2rem;letter-spacing:-.02em;line-height:1.15}
    .headline p{margin:0;color:var(--gray-500);font-size:1rem}

    .grid{margin-top:20px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
    .card{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow)}
    .metric-label{font-size:.78rem;color:var(--gray-500);font-weight:800;text-transform:uppercase;letter-spacing:.06em}
    .metric-value{margin-top:8px;font-size:2.2rem;font-weight:800;letter-spacing:-.02em;line-height:1.12;padding-bottom:2px}
    .metric-note{margin-top:8px;font-size:.92rem;color:var(--gray-500)}
    .streak,.due,.goal{background:linear-gradient(152deg,#fff 0%,#eef2ff 100%)}
    .streak .metric-value,.due .metric-value,.goal .metric-value{background:linear-gradient(135deg,#4F46E5,#2563EB);-webkit-background-clip:text;background-clip:text;color:transparent}
    .progress-track{margin-top:12px;height:10px;border-radius:999px;background:var(--gray-100);overflow:hidden;border:1px solid var(--gray-200)}
    .progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--primary),var(--secondary));transition:width .2s ease}

    .section{margin-top:16px;background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow)}
    .section h2{margin:0 0 8px;font-size:1.45rem;letter-spacing:-.015em;line-height:1.2}
    .section p{margin:0 0 14px;color:var(--gray-500);font-size:.97rem}

    .goal-row{display:flex;gap:10px;align-items:end;flex-wrap:wrap}
    .field{display:flex;flex-direction:column;gap:6px}
    .field label{font-size:.76rem;font-weight:700;color:var(--gray-700);text-transform:uppercase;letter-spacing:.06em}
    .input{height:46px;border:1px solid var(--gray-300);border-radius:var(--radius-md);padding:0 12px;font-size:1rem;min-width:170px;background:var(--white);color:var(--gray-900)}
    .input:focus{outline:none;border-color:rgba(79,70,229,.6);box-shadow:0 0 0 3px rgba(79,70,229,.12)}

    .folders-wrap{overflow:auto}
    .folders{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden;border:1px solid var(--gray-200);border-radius:var(--radius-md);min-width:860px;background:var(--white)}
    .folders th,.folders td{padding:11px 12px;text-align:left;font-size:.9rem;border-bottom:1px solid var(--gray-100);vertical-align:middle}
    .folders th{font-size:.75rem;text-transform:uppercase;letter-spacing:.045em;color:var(--gray-500);background:var(--gray-50);font-weight:800}
    .folders .input{height:38px;min-width:160px;font-size:.9rem;border-radius:var(--radius)}
    .date-input-wrap{position:relative;display:inline-block;width:180px}
    .date-input-wrap .input{width:100%;padding-right:36px}
    .date-input-icon{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--gray-500);pointer-events:none}
    .folders .btn{height:38px;padding:0 12px;font-size:.8125rem;border-radius:var(--radius-sm)}
    .folders tr:last-child td{border-bottom:none}
    .folder-meta{font-size:.78rem;color:var(--gray-500);margin-top:2px}
    .recommendation{font-size:.84rem;color:var(--gray-700)}
    .recommendation strong{color:var(--gray-900)}
    .folders-cards{display:none;gap:12px}
    .folder-card{border:1px solid var(--gray-200);border-radius:var(--radius-md);padding:14px;background:var(--white);box-shadow:var(--shadow-sm)}
    .folder-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
    .folder-card-title{font-size:.98rem;font-weight:700;color:var(--gray-900);line-height:1.3}
    .folder-card-meta{margin-top:2px;font-size:.78rem;color:var(--gray-500)}
    .folder-card-section{margin-top:10px}
    .folder-card-label{display:block;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gray-500);margin-bottom:6px}
    .folder-card .date-input-wrap{width:100%}
    .folder-card .input{width:100%}
    .folder-card-actions{margin-top:12px;display:flex;justify-content:flex-end}

    .chip{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;font-size:.74rem;font-weight:700;border:1px solid var(--gray-200);background:var(--gray-50);color:var(--gray-700)}
    .chip.success{border-color:rgba(16,185,129,.36);background:rgba(16,185,129,.12);color:#065F46}
    .chip.warn{border-color:rgba(245,158,11,.34);background:rgba(245,158,11,.09);color:#92400E}
    .chip.urgent{border-color:rgba(245,158,11,.58);background:rgba(245,158,11,.16);color:#9A3412}
    .chip.today{border-color:rgba(129,140,248,.45);background:rgba(129,140,248,.16);color:#4338CA}
    .chip.danger{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.1);color:#991B1B}

    .auth-required,.empty{margin-top:12px;padding:16px;border:1px dashed var(--gray-300);border-radius:var(--radius-md);background:var(--gray-50);color:var(--gray-500)}
    .toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);padding:10px 14px;border-radius:var(--radius-md);background:var(--gray-900);color:var(--white);font-size:.86rem;opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:200;box-shadow:var(--shadow-lg)}
    .toast.visible{opacity:1}
    .toast.success{background:var(--success)}
    .toast.error{background:var(--danger)}

    .flatpickr-calendar{
      border:1px solid rgba(79,70,229,.2)!important;
      border-radius:16px!important;
      box-shadow:0 22px 40px rgba(15,23,42,.2)!important;
      font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif!important;
      overflow:hidden!important;
    }
    .flatpickr-months{background:linear-gradient(135deg,rgba(79,70,229,.1),rgba(14,165,233,.09));padding:6px 6px 2px}
    .flatpickr-current-month{font-size:1rem!important;font-weight:700!important;padding-top:6px!important}
    .flatpickr-weekdays{background:var(--gray-50)}
    .flatpickr-weekday{font-weight:700!important;color:var(--gray-500)!important}
    .flatpickr-day{border-radius:10px!important;font-weight:500!important}
    .flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange,.flatpickr-day.selected:hover,.flatpickr-day.startRange:hover,.flatpickr-day.endRange:hover{
      background:linear-gradient(135deg,var(--primary),var(--secondary))!important;
      border-color:transparent!important;
    }
    .flatpickr-day.today{border-color:var(--primary-light)!important;background:rgba(79,70,229,.06)!important}
    .flatpickr-day:hover{background:rgba(79,70,229,.11)!important}
    .flatpickr-input,.flatpickr-input[readonly]{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif!important;letter-spacing:0}

    @media (max-width:940px){
      .grid{grid-template-columns:1fr}
      .topbar-inner{flex-wrap:wrap}
      .user-email{max-width:none;width:100%}
      .container{padding:0 12px}
    }
    @media (max-width:600px){
      .folders-wrap{display:none}
      .folders-cards{display:grid}
      .section{padding:16px}
    }