:root{
    --primary:#146C6C;
    --primary-dark:#0B4A52;
    --primary-light:#E4F0EF;
    --accent:#C98A3E;
    --success:#2E9E6B;
    --success-bg:#E7F5EE;
    --warning:#E0A93A;
    --warning-bg:#FBF2E1;
    --danger:#D65A5A;
    --danger-bg:#FBEAEA;
    --bg:#F4F7F8;
    --card:#FFFFFF;
    --text:#1F2D2F;
    --muted:#6B7B7D;
    --border:#E2E8E8;
    --radius:12px;
    --shadow: 0 1px 2px rgba(15,40,40,.04), 0 4px 16px rgba(15,40,40,.06);
  }
  *{box-sizing:border-box;}
  body{
    margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    background:var(--bg); color:var(--text); font-size:14px;
  }
  .proto-banner{
    background:#2B2F33; color:#fff; text-align:center; padding:8px 16px; font-size:12.5px;
    letter-spacing:.2px;
  }
  .proto-banner b{color:#FFD79A;}

  /* ---------- LOGIN ---------- */
  #view-login{
    min-height:calc(100vh - 34px); display:flex; align-items:center; justify-content:center;
    background: radial-gradient(circle at 20% 20%, #E4F0EF 0%, var(--bg) 55%);
    padding:24px;
  }
  .login-card{
    background:var(--card); border-radius:20px; box-shadow:var(--shadow);
    width:100%; max-width:380px; padding:38px 34px 30px; text-align:center;
    border:1px solid var(--border);
  }
  .brand-mark{
    width:56px;height:56px;border-radius:14px;background:#fff;border:1px solid var(--border);
    display:flex;align-items:center;justify-content:center;margin:0 auto 16px;color:#fff;font-weight:700;font-size:22px;
    padding:6px;
  }
  .brand-mark img{width:100%;height:100%;object-fit:contain;}
  .sidebar .brand-mark{background:#fff; border:none;}
  .login-card h1{font-size:18px;margin:0 0 4px;}
  .login-card p.sub{color:var(--muted); font-size:13px; margin:0 0 24px;}
  .field{text-align:left; margin-bottom:14px;}
  .field label{display:block; font-size:12.5px; font-weight:600; color:var(--muted); margin-bottom:5px;}
  .field input, .field select, .field textarea{
    width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:9px;
    font-size:14px; background:#fbfcfc; color:var(--text); font-family:inherit;
  }
  .field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--primary); background:#fff;}
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    border:none; border-radius:9px; padding:10px 16px; font-size:13.5px; font-weight:600;
    cursor:pointer; font-family:inherit; transition:filter .12s ease;
  }
  .btn:hover{filter:brightness(0.95);}
  .btn-primary{background:var(--primary); color:#fff; width:100%;}
  .btn-outline{background:#fff; border:1px solid var(--border); color:var(--text);}
  .btn-ghost{background:transparent; color:var(--primary);}
  .btn-danger{background:var(--danger); color:#fff;}
  .btn-sm{padding:6px 11px; font-size:12.5px;}
  .login-links{margin-top:14px; font-size:12.5px;}
  .login-links a{color:var(--primary); text-decoration:none;}
  .demo-switch{margin-top:26px; padding-top:20px; border-top:1px dashed var(--border);}
  .demo-switch p{font-size:11.5px; color:var(--muted); margin:0 0 10px; text-transform:uppercase; letter-spacing:.4px;}
  .demo-switch .row{display:flex; gap:8px;}
  .demo-switch .row .btn{flex:1;}

  /* ---------- APP SHELL ---------- */
  #view-app{display:none;}
  .shell{display:flex; min-height:calc(100vh - 34px);}
  .sidebar{
    width:230px; background:var(--primary-dark); color:#fff; flex-shrink:0;
    display:flex; flex-direction:column; padding:20px 14px;
  }
  .sidebar .brand{display:flex; align-items:center; gap:10px; padding:0 8px 22px; border-bottom:1px solid rgba(255,255,255,.12); margin-bottom:16px;}
  .sidebar .brand .brand-mark{width:34px;height:34px;font-size:14px;margin:0;border-radius:9px;}
  .sidebar .brand span{font-weight:700; font-size:14px; line-height:1.25;}
  .nav-item{
    display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; color:#CFE3E1;
    font-size:13.5px; font-weight:500; cursor:pointer; margin-bottom:2px;
  }
  .nav-item svg{width:17px;height:17px; opacity:.85;}
  .nav-item:hover{background:rgba(255,255,255,.06); color:#fff;}
  .nav-item.active{background:rgba(255,255,255,.14); color:#fff;}
  .sidebar-footer{margin-top:auto; padding-top:14px; border-top:1px solid rgba(255,255,255,.12);}
  .sidebar-user{display:flex; align-items:center; gap:9px; padding:8px; font-size:12.5px;}
  .avatar{width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex-shrink:0;}
  .sidebar-user .name{font-weight:600; color:#fff;}
  .sidebar-user .role{color:#9FC2BF; font-size:11px;}

  .main{flex:1; padding:26px 34px 60px; max-width:1180px;}
  .page{display:none;}
  .page.active{display:block;}
  .page-header{display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:22px; gap:16px;}
  .page-header h2{margin:0 0 4px; font-size:21px;}
  .page-header p{margin:0; color:var(--muted); font-size:13px;}

  .stat-row{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:24px;}
  .stat-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow);}
  .stat-card .label{font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; margin-bottom:6px;}
  .stat-card .value{font-size:24px; font-weight:700; color:var(--primary-dark);}
  .stat-card .value.warn{color:var(--danger);}

  .section-title{display:flex; align-items:center; justify-content:space-between; margin:26px 0 12px;}
  .section-title h3{font-size:15px; margin:0; display:flex; align-items:center; gap:8px;}
  .section-title .count-pill{background:var(--primary-light); color:var(--primary-dark); font-size:11.5px; font-weight:700; padding:1px 8px; border-radius:20px;}

  .project-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px 18px; margin-bottom:12px;}
  .project-card-top{display:flex; justify-content:space-between; align-items:flex-start; gap:12px;}
  .project-card-top h4{margin:0 0 4px; font-size:14.5px;}
  .project-meta{color:var(--muted); font-size:12.5px; line-height:1.7;}
  .project-meta b{color:var(--text); font-weight:600;}
  .progress-wrap{display:flex; align-items:center; gap:8px; margin-top:10px;}
  .progress-bar{flex:1; height:7px; background:var(--border); border-radius:20px; overflow:hidden;}
  .progress-bar .fill{height:100%; background:linear-gradient(90deg,var(--primary),#1E8C86); border-radius:20px;}
  .progress-pct{font-size:12px; font-weight:700; color:var(--primary-dark); width:34px; text-align:right;}
  .badge{display:inline-block; font-size:11px; font-weight:700; padding:2px 9px; border-radius:20px;}
  .badge.done{background:var(--success-bg); color:var(--success);}
  .badge.soon{background:var(--warning-bg); color:#966216;}
  .badge.overdue{background:var(--danger-bg); color:var(--danger);}
  .badge.pending{background:#EEF1F1; color:var(--muted);}

  .add-tile{
    border:1.5px dashed #B9CFCD; border-radius:var(--radius); padding:16px 18px; text-align:center;
    color:var(--primary); font-weight:600; font-size:13px; cursor:pointer; background:#FBFDFD;
  }
  .add-tile:hover{background:var(--primary-light);}

  table.data{width:100%; border-collapse:collapse; font-size:13px;}
  table.data th{text-align:left; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.3px; padding:9px 10px; border-bottom:1px solid var(--border);}
  table.data td{padding:10px 10px; border-bottom:1px solid #EEF2F2; vertical-align:middle;}
  table.data tr:last-child td{border-bottom:none;}
  table.data select, table.data input[type=date]{width:100%; padding:7px 8px; font-size:12.5px; border:1px solid var(--border); border-radius:7px; background:#fbfcfc; font-family:inherit;}

  .card-panel{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px 22px; margin-bottom:18px;}
  .grid-2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
  .grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}

  .admin-table-wrap{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden;}
  .admin-table-wrap table.data{font-size:13px;}
  .admin-table-wrap th, .admin-table-wrap td{padding:12px 14px;}
  .fellow-name-cell{display:flex; align-items:center; gap:10px;}
  .row-progress{display:flex; align-items:center; gap:7px; width:130px;}
  .row-progress .progress-bar{height:6px;}
  .icon-btn{background:none; border:1px solid var(--border); border-radius:7px; padding:5px 9px; cursor:pointer; color:var(--muted); font-size:12px; margin-right:4px;}
  .icon-btn:hover{color:var(--primary); border-color:var(--primary);}

  /* modal */
  .modal-backdrop{display:none; position:fixed; inset:0; background:rgba(15,30,30,.45); z-index:50; align-items:center; justify-content:center; padding:24px;}
  .modal-backdrop.open{display:flex;}
  .modal{background:#fff; border-radius:16px; width:100%; max-width:640px; max-height:88vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,.25);}
  .modal.wide{max-width:820px;}
  .modal-head{display:flex; justify-content:space-between; align-items:center; padding:18px 22px; border-bottom:1px solid var(--border); position:sticky; top:0; background:#fff; z-index:2;}
  .modal-head h3{margin:0; font-size:16px;}
  .modal-close{background:none; border:none; font-size:20px; color:var(--muted); cursor:pointer; line-height:1;}
  .modal-body{padding:20px 22px;}
  .modal-foot{padding:16px 22px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:10px; position:sticky; bottom:0; background:#fff;}

  .welcome-preview{background:#F7FAF9; border:1px solid var(--border); border-radius:9px; padding:14px 16px; font-size:12.5px; line-height:1.7; white-space:pre-wrap; color:var(--text); font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}
  .copy-row{display:flex; justify-content:flex-end; margin-top:8px;}

  .pdf-preview{background:#fff; border:1px solid var(--border); box-shadow:var(--shadow); border-radius:6px; padding:26px 30px; font-size:11.5px; color:#333; max-width:560px; margin:0 auto;}
  .pdf-preview h2{font-size:15px; margin:0 0 2px; color:var(--primary-dark);}
  .pdf-preview .pdf-sub{color:var(--muted); font-size:10.5px; margin-bottom:16px;}
  .pdf-preview table{width:100%; border-collapse:collapse; margin-bottom:14px; font-size:10px;}
  .pdf-preview th{background:var(--primary-light); text-align:left; padding:4px 6px; color:var(--primary-dark);}
  .pdf-preview td{padding:4px 6px; border-bottom:1px solid #eee;}
  .pdf-preview .proj-title{font-weight:700; margin:12px 0 4px; font-size:12px;}

  .topbar-mock{display:flex; justify-content:flex-end; padding:10px 34px 0;}
  .role-tag{font-size:11px; background:var(--primary-light); color:var(--primary-dark); padding:4px 10px; border-radius:20px; font-weight:700;}

  ::placeholder{color:#A8B6B7;}

/* ── Production-only additions (not in the mockup) ────────────────────────── */

.toast{
  position:fixed; bottom:22px; right:22px; background:var(--primary-dark); color:#fff;
  padding:12px 18px; border-radius:9px; font-size:13px; box-shadow:0 8px 24px rgba(0,0,0,.2);
  opacity:0; transform:translateY(10px); transition:opacity .2s ease, transform .2s ease; z-index:200; max-width:360px;
}
.toast.show{opacity:1; transform:translateY(0);}
.toast.error{background:var(--danger);}
.toast.success{background:var(--success);}

.error-banner{
  background:var(--danger-bg); color:var(--danger); border:1px solid #f0c6c6; border-radius:9px;
  padding:10px 14px; font-size:13px; margin-bottom:14px;
}

.field-error{color:var(--danger); font-size:12px; margin-top:4px;}

.pw-wrap{position:relative;}
.pw-wrap input{padding-right:40px !important;}
.pw-toggle{
  position:absolute; right:4px; top:50%; transform:translateY(-50%);
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  background:none; border:none; padding:0; cursor:pointer; color:var(--muted); border-radius:6px;
}
.pw-toggle:hover{color:var(--primary); background:rgba(20,108,108,.08);}
.pw-toggle svg{width:18px; height:18px;}

.loading-overlay{
  position:fixed; inset:0; background:rgba(255,255,255,.6); z-index:300;
  display:none; align-items:center; justify-content:center; font-size:13px; color:var(--primary-dark); font-weight:600;
}
.loading-overlay.show{display:flex;}
.spinner{
  width:16px; height:16px; border:2.5px solid var(--primary-light); border-top-color:var(--primary);
  border-radius:50%; display:inline-block; margin-right:8px; animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.empty-state{ color:var(--muted); font-size:13px; padding:14px 0; }

.btn-danger-outline{
  background:#fff; border:1px solid var(--danger); color:var(--danger);
}
.btn[disabled]{ opacity:.55; cursor:not-allowed; }

.login-error{
  background:var(--danger-bg); color:var(--danger); border-radius:8px; padding:9px 12px;
  font-size:12.5px; margin-bottom:14px; text-align:left;
}