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

:root, [data-theme="light"] {
  --color-bg:#f7f6f2; --color-surface:#f9f8f5; --color-surface-2:#fbfbf9;
  --color-surface-offset:#f0ede8; --color-divider:#dcd9d5; --color-border:#d4d1ca;
  --color-text:#28251d; --color-text-muted:#7a7974; --color-text-faint:#bab9b4;
  --color-primary:#01696f; --color-primary-hover:#0c4e54;
  --color-error:#a12c7b; --color-error-bg:#f9eef5;
  --color-success:#437a22; --color-success-bg:#edf5e8;
  --color-late:#c0392b; --color-late-bg:#fdf0ee;
  --color-soon:#d67e00; --color-soon-bg:#fdf6e3;
  --color-ok:#437a22;
  --shadow-sm:0 1px 2px oklch(0.2 0.01 80/0.06);
  --shadow-md:0 4px 12px oklch(0.2 0.01 80/0.08);
  --shadow-lg:0 12px 32px oklch(0.2 0.01 80/0.12);
  --radius-sm:.375rem; --radius-md:.5rem; --radius-lg:.75rem; --radius-xl:1rem; --radius-full:9999px;
  --transition:180ms cubic-bezier(0.16,1,0.3,1);
  --text-xs:clamp(.75rem,.7rem + .25vw,.875rem);
  --text-sm:clamp(.875rem,.8rem + .35vw,1rem);
  --text-base:clamp(1rem,.95rem + .25vw,1.125rem);
  --text-lg:clamp(1.125rem,1rem + .75vw,1.5rem);
  --text-xl:clamp(1.5rem,1.2rem + 1.25vw,2.25rem);
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem;
  --space-12:3rem; --space-16:4rem;
  --font-body:'Inter',system-ui,sans-serif;
  --navbar-h:56px;
}
[data-theme="dark"] {
  --color-bg:#111110; --color-surface:#1a1917; --color-surface-2:#1f1e1c;
  --color-surface-offset:#252422; --color-divider:#2a2927; --color-border:#363533;
  --color-text:#e4e3e0; --color-text-muted:#797876; --color-text-faint:#4a4947;
  --color-primary:#4f98a3; --color-primary-hover:#227f8b;
  --color-error:#d163a7; --color-error-bg:#2a1a24;
  --color-success:#6daa45; --color-success-bg:#1a2714;
  --color-late:#e05c4a; --color-late-bg:#2a1512;
  --color-soon:#e8ab34; --color-soon-bg:#28220f;
  --color-ok:#6daa45;
  --shadow-sm:0 1px 3px oklch(0 0 0/.25);
  --shadow-md:0 4px 14px oklch(0 0 0/.35);
  --shadow-lg:0 12px 36px oklch(0 0 0/.45);
}
@media (prefers-color-scheme:dark){:root:not([data-theme]){
  --color-bg:#111110;--color-surface:#1a1917;--color-surface-2:#1f1e1c;
  --color-surface-offset:#252422;--color-divider:#2a2927;--color-border:#363533;
  --color-text:#e4e3e0;--color-text-muted:#797876;--color-text-faint:#4a4947;
  --color-primary:#4f98a3;--color-primary-hover:#227f8b;
  --color-error:#d163a7;--color-error-bg:#2a1a24;
  --color-success:#6daa45;--color-success-bg:#1a2714;
  --color-late:#e05c4a;--color-late-bg:#2a1512;
  --color-soon:#e8ab34;--color-soon-bg:#28220f;--color-ok:#6daa45;
  --shadow-sm:0 1px 3px oklch(0 0 0/.25);--shadow-md:0 4px 14px oklch(0 0 0/.35);
  --shadow-lg:0 12px 36px oklch(0 0 0/.45);
}}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text);background:var(--color-bg);min-height:100dvh;line-height:1.6}
img,svg{display:block;max-width:100%}
input,button,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4{line-height:1.2;text-wrap:balance}
button{cursor:pointer;background:none;border:none}
a{color:inherit;text-decoration:none}
a,button,[role="button"],input,textarea,select{transition:color var(--transition),background var(--transition),border-color var(--transition),box-shadow var(--transition),opacity var(--transition)}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:var(--radius-sm)}

/* NAVBAR */
.navbar{position:sticky;top:0;z-index:100;height:var(--navbar-h);background:var(--color-surface);border-bottom:1px solid var(--color-divider);box-shadow:var(--shadow-sm)}
.navbar-inner{max-width:1280px;margin:0 auto;padding:0 var(--space-6);height:100%;display:flex;align-items:center;gap:var(--space-6)}
.navbar-brand{display:flex;align-items:center;gap:var(--space-2);font-weight:600;font-size:var(--text-sm);color:var(--color-text)}
.navbar-brand:hover{color:var(--color-primary)}
.navbar-nav{display:flex;align-items:center;gap:var(--space-1)}
.nav-link{padding:var(--space-2) var(--space-3);font-size:var(--text-sm);color:var(--color-text-muted);border-radius:var(--radius-md)}
.nav-link:hover,.nav-link.active{color:var(--color-text);background:var(--color-surface-offset)}
.navbar-right{margin-left:auto;display:flex;align-items:center;gap:var(--space-3)}
.user-email{font-size:var(--text-xs);color:var(--color-text-muted);display:none}
@media(min-width:640px){.user-email{display:block}}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);font-size:var(--text-sm);font-weight:500;border-radius:var(--radius-md);border:1px solid transparent;white-space:nowrap}
.btn-primary{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.btn-primary:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover)}
.btn-ghost{color:var(--color-text-muted);border-color:var(--color-border)}
.btn-ghost:hover{background:var(--color-surface-offset);color:var(--color-text)}
.btn-danger{color:var(--color-late);border-color:var(--color-border)}
.btn-danger:hover{background:var(--color-late-bg);border-color:var(--color-late)}
.btn-sm{padding:var(--space-1) var(--space-3);font-size:var(--text-xs)}
.btn-full{width:100%;justify-content:center}
.btn-icon{padding:var(--space-2);border-radius:var(--radius-md);color:var(--color-text-muted)}
.btn-icon:hover{background:var(--color-surface-offset);color:var(--color-text)}

/* AUTH */
.auth-body{display:flex;align-items:center;justify-content:center;min-height:100dvh;background:var(--color-bg);padding:var(--space-4)}
.auth-card{width:100%;max-width:400px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-8);box-shadow:var(--shadow-lg);animation:fadeUp .3s ease}
.auth-logo{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-6)}
.auth-logo-text{font-weight:700;font-size:var(--text-lg);color:var(--color-text)}
.auth-title{font-size:var(--text-xl);font-weight:700;margin-bottom:var(--space-6)}
.auth-switch{margin-top:var(--space-4);font-size:var(--text-sm);color:var(--color-text-muted);text-align:center}
.auth-switch a{color:var(--color-primary);font-weight:500}
.auth-switch a:hover{text-decoration:underline}

/* FORMS */
.form-group{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-4)}
.form-group label{font-size:var(--text-sm);font-weight:500;color:var(--color-text-muted)}
.form-group input,.form-group textarea,.form-group select{padding:var(--space-3) var(--space-4);background:var(--color-surface-offset);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:var(--text-sm);color:var(--color-text)}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in oklab,var(--color-primary) 15%,transparent)}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--color-text-faint)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.form-actions{display:flex;gap:var(--space-3);justify-content:flex-end;padding-top:var(--space-4);border-top:1px solid var(--color-divider)}
.form-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-8);box-shadow:var(--shadow-md);max-width:640px}

/* APP LAYOUT */
.app-body{background:var(--color-bg)}
.main-content{max-width:1200px;margin:0 auto;padding:var(--space-8) var(--space-6)}
.page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-8);flex-wrap:wrap}
.page-title{font-size:var(--text-xl);font-weight:700}
.page-subtitle{color:var(--color-text-muted);font-size:var(--text-sm);margin-top:var(--space-1)}
.page-actions{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap}
.breadcrumb{font-size:var(--text-xs);color:var(--color-text-muted);display:block;margin-bottom:var(--space-2)}
.breadcrumb:hover{color:var(--color-primary)}

/* KPI GRID */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr));gap:var(--space-4);margin-bottom:var(--space-8)}
.kpi-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5);display:flex;align-items:center;gap:var(--space-4);box-shadow:var(--shadow-sm);animation:fadeUp .3s ease}
.kpi-icon{width:42px;height:42px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.kpi-blue{background:color-mix(in oklab,#006494 15%,var(--color-surface-offset));color:#4f91c7}
.kpi-teal{background:color-mix(in oklab,var(--color-primary) 15%,var(--color-surface-offset));color:var(--color-primary)}
.kpi-red{background:color-mix(in oklab,var(--color-late) 15%,var(--color-surface-offset));color:var(--color-late)}
.kpi-green{background:color-mix(in oklab,var(--color-success) 15%,var(--color-surface-offset));color:var(--color-success)}
.kpi-value{font-size:var(--text-xl);font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.kpi-sub{font-size:var(--text-sm);color:var(--color-text-muted);font-weight:400}
.kpi-label{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:var(--space-1)}

/* SECTION */
.section{margin-bottom:var(--space-10)}
.section-title{font-size:var(--text-base);font-weight:600;display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-4);color:var(--color-text)}

/* PROJECT GRID */
.project-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:var(--space-4)}
.project-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:var(--space-3);transition:box-shadow var(--transition),transform var(--transition);animation:fadeUp .3s ease}
.project-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.project-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-2)}
.project-name{font-size:var(--text-base);font-weight:600}
.project-desc{font-size:var(--text-sm);color:var(--color-text-muted);flex:1}
.project-stats{display:flex;gap:var(--space-3);flex-wrap:wrap}
.project-stats.inline{margin-top:var(--space-2)}
.stat{font-size:var(--text-xs);font-weight:500}
.stat.todo{color:var(--color-text-muted)}
.stat.doing{color:var(--color-soon)}
.stat.done{color:var(--color-ok)}

/* PROGRESS */
.progress-bar-wrap{display:flex;align-items:center;gap:var(--space-3)}
.progress-bar-track{flex:1;height:5px;background:var(--color-divider);border-radius:var(--radius-full);overflow:hidden}
.progress-bar-track.large{height:8px}
.progress-bar-fill{height:100%;background:var(--color-primary);border-radius:var(--radius-full);transition:width .5s cubic-bezier(.16,1,.3,1)}
.progress-pct{font-size:var(--text-xs);color:var(--color-text-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.project-progress-bar{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5);margin-bottom:var(--space-6);box-shadow:var(--shadow-sm)}
.progress-header{display:flex;justify-content:space-between;font-size:var(--text-sm);margin-bottom:var(--space-3)}

/* TOOLBAR */
.toolbar{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-5);flex-wrap:wrap}
.search-form{flex:1;min-width:180px}
.search-input-wrap{display:flex;align-items:center;gap:var(--space-2);background:var(--color-surface-offset);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);color:var(--color-text-muted)}
.search-input-wrap input{border:none;background:transparent;padding:0;outline:none;font-size:var(--text-sm);flex:1;color:var(--color-text)}
.filter-tabs{display:flex;gap:var(--space-1);flex-wrap:wrap}
.filter-tab{padding:var(--space-1) var(--space-3);font-size:var(--text-xs);font-weight:500;border-radius:var(--radius-full);color:var(--color-text-muted);border:1px solid transparent}
.filter-tab:hover{background:var(--color-surface-offset);color:var(--color-text)}
.filter-tab.active{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}

/* TASK LIST */
.task-list{display:flex;flex-direction:column;gap:var(--space-2)}
.task-item{display:flex;align-items:center;gap:var(--space-3);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4);box-shadow:var(--shadow-sm);animation:fadeIn .2s ease;transition:background var(--transition)}
.task-item:hover{background:var(--color-surface-2)}
.task-item.task-status-done{opacity:.7}
.task-urgent{border-left:2px solid var(--color-late)}
.task-check{flex-shrink:0}
.check-btn{width:24px;height:24px;border-radius:var(--radius-full);border:2px solid var(--color-border);display:flex;align-items:center;justify-content:center;color:var(--color-text-muted)}
.check-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}
.check-btn.done{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.check-btn.doing{border-color:var(--color-soon);color:var(--color-soon)}
.task-body{flex:1;min-width:0}
.task-title-row{display:flex;flex-direction:column;gap:2px}
.task-title{font-size:var(--text-sm);font-weight:500}
.task-title.done-text{text-decoration:line-through;color:var(--color-text-muted)}
.task-desc{font-size:var(--text-xs);color:var(--color-text-muted)}
.task-info{display:flex;flex-direction:column;gap:2px;flex:1}
.task-project{font-size:var(--text-xs);color:var(--color-primary)}
.task-meta{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}
.task-actions{display:flex;gap:var(--space-1)}

/* DEADLINE */
.deadline{display:inline-flex;align-items:center;gap:4px;font-size:var(--text-xs);font-weight:500;font-variant-numeric:tabular-nums;padding:2px var(--space-2);border-radius:var(--radius-full)}
.deadline-late{background:var(--color-late-bg);color:var(--color-late)}
.deadline-soon{background:var(--color-soon-bg);color:var(--color-soon)}
.deadline-ok{background:var(--color-success-bg);color:var(--color-ok)}
.deadline-done{background:var(--color-surface-offset);color:var(--color-text-muted)}

/* BADGES */
.badge{display:inline-flex;align-items:center;padding:2px var(--space-2);font-size:var(--text-xs);font-weight:500;border-radius:var(--radius-full);border:1px solid transparent}
.badge-todo{background:var(--color-surface-offset);color:var(--color-text-muted)}
.badge-doing{background:var(--color-soon-bg);color:var(--color-soon);border-color:color-mix(in oklab,var(--color-soon) 30%,transparent)}
.badge-done{background:var(--color-success-bg);color:var(--color-ok)}
.badge-late{background:var(--color-late-bg);color:var(--color-late)}
.btn-icon-sm{width:28px;height:28px;border-radius:var(--radius-md);display:inline-flex;align-items:center;justify-content:center;color:var(--color-text-muted);border:1px solid transparent}
.btn-icon-sm:hover{background:var(--color-surface-offset);color:var(--color-text)}
.btn-icon-sm.danger:hover{background:var(--color-late-bg);color:var(--color-late)}

/* ALERTS */
.alert{padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);font-size:var(--text-sm);margin-bottom:var(--space-4);border:1px solid transparent;animation:fadeIn .2s ease}
.alert-error{background:var(--color-error-bg);color:var(--color-error);border-color:color-mix(in oklab,var(--color-error) 30%,transparent)}
.alert-success{background:var(--color-success-bg);color:var(--color-success);border-color:color-mix(in oklab,var(--color-success) 30%,transparent)}

/* EMPTY STATE */
.empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--space-16) var(--space-8);color:var(--color-text-muted);background:var(--color-surface);border:1px dashed var(--color-border);border-radius:var(--radius-xl);animation:fadeIn .3s ease}
.empty-state svg{margin-bottom:var(--space-4);opacity:.4}
.empty-state h3{color:var(--color-text);font-size:var(--text-lg);margin-bottom:var(--space-2)}
.empty-state p{max-width:36ch;margin-bottom:var(--space-6);font-size:var(--text-sm)}

/* ANIMATIONS */
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* RESPONSIVE */
@media(max-width:600px){
  .main-content{padding:var(--space-4)}
  .form-row{grid-template-columns:1fr}
  .toolbar{flex-direction:column;align-items:stretch}
  .page-header{flex-direction:column}
  .form-card{padding:var(--space-5)}
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
}