*{box-sizing:border-box}
:root{
  --bg:#f4f7fb;--surface:#fff;--surface-soft:#f8fafc;--border:#dbe3ee;
  --text:#172033;--muted:#667085;--primary:#3157d5;--primary-dark:#2547b5;
  --danger:#c93636;--danger-soft:#fff0f0;--success:#147a4b;--success-soft:#eaf8f1;
  --warning:#9a6700;--warning-soft:#fff8df;--sidebar:#17233f;
  --shadow:0 18px 50px rgba(31,50,81,.12);--radius-lg:20px;--radius-md:14px;--radius-sm:10px
}
body{margin:0;min-height:100vh;font-family:Inter,"Segoe UI",Arial,sans-serif;color:var(--text);background:var(--bg)}
button,input,select,textarea{font:inherit}.hidden{display:none!important}.eyebrow{margin:0 0 6px;font-size:.75rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--primary)}
.login-screen{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at top left,rgba(49,87,213,.18),transparent 35%),var(--bg)}
.login-card{width:min(430px,100%);padding:34px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.brand-mark{display:grid;place-items:center;width:62px;height:62px;border-radius:18px;color:#fff;background:linear-gradient(135deg,#233c97,#3157d5);font-weight:900;font-size:1.25rem}
.brand-mark.small{width:42px;height:42px;border-radius:12px;font-size:.95rem}.login-card h1{margin:10px 0 6px}.login-copy{margin:0 0 22px;color:var(--muted);line-height:1.6}
.login-card form{display:grid;gap:12px}.security-note{margin:16px 0 0;font-size:.8rem;color:var(--muted);line-height:1.5}
.app-shell{display:grid;grid-template-columns:270px minmax(0,1fr);min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;padding:22px 18px;display:flex;flex-direction:column;color:#fff;background:var(--sidebar)}
.sidebar-brand{display:flex;gap:12px;align-items:center;padding:4px 6px 24px}.sidebar-brand strong,.sidebar-brand span{display:block}.sidebar-brand span{margin-top:4px;color:rgba(255,255,255,.62);font-size:.78rem}
.sidebar-nav{display:grid;gap:7px}.nav-item{padding:12px 14px;border:0;border-radius:11px;text-align:left;color:rgba(255,255,255,.78);background:transparent;cursor:pointer;font-weight:700}
.nav-item:hover,.nav-item.active{color:#fff;background:rgba(255,255,255,.12)}.sidebar-footer{margin-top:auto;padding-top:18px;border-top:1px solid rgba(255,255,255,.12)}
.current-user{display:flex;gap:11px;align-items:center}.current-user>span{display:grid;place-items:center;width:39px;height:39px;border-radius:50%;background:rgba(255,255,255,.13);font-weight:800}
.current-user strong,.current-user small{display:block}.current-user small{color:rgba(255,255,255,.62)}.logout-button{width:100%;margin-top:12px;padding:10px;border:1px solid rgba(255,255,255,.16);border-radius:10px;color:#fff;background:transparent;cursor:pointer}
.main-area{min-width:0}.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 28px;border-bottom:1px solid var(--border);background:rgba(255,255,255,.92);backdrop-filter:blur(10px)}
.topbar h1{margin:0;font-size:1.65rem}.topbar .eyebrow{margin-bottom:4px}.menu-button{display:none;border:0;background:transparent;font-size:1.4rem;cursor:pointer}.content{padding:28px}
.view{display:none}.active-view{display:block}.metrics-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.metric-card,.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:0 8px 24px rgba(31,50,81,.06)}
.metric-card{padding:22px}.metric-card span,.metric-card small{display:block;color:var(--muted)}.metric-card strong{display:block;margin:8px 0;font-size:2rem}
.dashboard-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;margin-top:18px}.panel{padding:24px}.panel-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:20px}
.panel-heading h2,.panel-heading p{margin:0}.panel-heading p{margin-top:5px;color:var(--muted)}.progress-list{display:grid;gap:18px}.progress-row{display:grid;gap:8px}
.progress-meta{display:flex;justify-content:space-between;gap:12px}.progress-track{height:9px;border-radius:999px;background:#e9eef6;overflow:hidden}.progress-bar{height:100%;border-radius:999px;background:linear-gradient(90deg,#3157d5,#6a84e8)}
.recent-list{display:grid;gap:10px}.recent-item{padding:14px;border:1px solid var(--border);border-radius:11px;background:var(--surface-soft)}.recent-item strong,.recent-item span{display:block}.recent-item span{margin-top:4px;color:var(--muted);font-size:.86rem}.empty-state{color:var(--muted)}
.general-grid,.task-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.general-grid{padding:18px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-soft);margin-bottom:20px}
.field-group{display:flex;flex-direction:column;gap:7px}.field-span-2{grid-column:span 2}label{font-size:.9rem;font-weight:700}
input,select,textarea{width:100%;padding:12px 13px;border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);background:#fff;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(49,87,213,.12)}textarea{resize:vertical}.invalid{border-color:var(--danger)}
.error-message{min-height:16px;color:var(--danger);font-size:.76rem}.task-counter{padding:10px 14px;border-radius:999px;color:var(--primary);background:#edf2ff;white-space:nowrap}
.task-card{margin-bottom:18px;padding:22px;border:1px solid var(--border);border-radius:var(--radius-md);background:#fff;box-shadow:0 8px 22px rgba(31,50,81,.05)}
.task-card-header{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px;padding-bottom:15px;border-bottom:1px solid var(--border)}.task-label{margin:0 0 5px;color:var(--primary);font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.task-title{margin:0}
.button,.delete-task-button{border:0;border-radius:11px;cursor:pointer;font-weight:800;transition:.15s}.button:hover,.delete-task-button:hover{transform:translateY(-1px)}.button{min-height:45px;padding:11px 17px}.button-primary{color:#fff;background:var(--primary)}.button-primary:hover{background:var(--primary-dark)}.button-secondary{color:var(--primary);border:1px solid #b7c4ef;background:#f3f6ff}.button-ghost{color:var(--text);border:1px solid var(--border);background:#fff}.full-width{width:100%}
.delete-task-button{padding:9px 12px;color:var(--danger);background:var(--danger-soft)}.form-actions{display:flex;justify-content:flex-end;gap:11px;margin-top:22px}.status-message{display:none;margin-top:16px;padding:13px 15px;border-radius:10px}.status-message.success,.status-message.error,.status-message.info{display:block}.status-message.success{color:var(--success);background:var(--success-soft)}.status-message.error{color:var(--danger);background:var(--danger-soft)}.status-message.info{color:var(--warning);background:var(--warning-soft)}
.spinner{display:none;width:16px;height:16px;margin-left:8px;vertical-align:middle;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}.is-loading .spinner{display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}
.inline-form{display:grid;grid-template-columns:1fr auto;gap:12px;margin-bottom:18px}.data-list{display:grid;gap:10px}.data-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:13px 15px;border:1px solid var(--border);border-radius:11px;background:var(--surface-soft)}.data-row button{border:0;color:var(--danger);background:transparent;cursor:pointer;font-weight:700}
@media(max-width:1000px){.metrics-grid{grid-template-columns:repeat(2,1fr)}.dashboard-grid{grid-template-columns:1fr}}
@media(max-width:780px){.app-shell{grid-template-columns:1fr}.sidebar{position:fixed;z-index:30;left:-290px;width:270px;transition:left .2s}.sidebar.open{left:0}.menu-button{display:block}.topbar{padding:16px 18px}.content{padding:18px}.topbar-actions{display:none}.general-grid,.task-grid,.metrics-grid{grid-template-columns:1fr}.field-span-2{grid-column:span 1}.panel{padding:18px}.panel-heading,.form-actions{align-items:stretch;flex-direction:column}.inline-form{grid-template-columns:1fr}.form-actions .button{width:100%}}