:root{
    --bg:#f2f2f2;
    --card:#ffffff;
    --muted:#666;
    --accent:#111;
    --primary:#111;
    --gap:12px;
    --radius:8px;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  }
  
  *{box-sizing:border-box}
  body{
    margin:0;
    background:linear-gradient(180deg,#eee,#f7f7f7);
    color:#222;
    min-height:100vh;
  }
  
  /* topbar */
  .topbar{
    background:#e9e9e9;
    padding:10px 16px;
    border-bottom:1px solid #ddd;
  }
  .topbar-inner{
    max-width:1100px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .brand{margin:0;font-size:18px}
  .muted{color:var(--muted);font-size:14px;margin-right:12px}
  
  /* layout */
  .container{
    max-width:1100px;
    margin:18px auto;
    padding:0 16px 40px;
  }
  
  .toolbar{
    margin-bottom:12px;
    display:flex;
    justify-content:flex-end;
  }
  
  .table-wrap{
    background:var(--card);
    border-radius:8px;
    box-shadow:0 2px 6px rgba(0,0,0,.04);
    padding:8px;
    overflow:auto;
  }
  
  .task-table{
    width:100%;
    border-collapse:collapse;
    min-width:900px;
  }
  .task-table th, .task-table td{
    padding:8px 10px;
    border-bottom:1px solid #eee;
    text-align:left;
    vertical-align:top;
    font-size:13px;
  }
  .task-table th{background:#fafafa;color:#333;font-weight:600}
  .task-table td .mono{font-family:monospace}
  
  .btn{
    display:inline-block;
    padding:8px 12px;
    border-radius:6px;
    border:0;
    cursor:pointer;
    font-size:13px;
  }
  .btn.primary{background:var(--primary);color:#fff}
  .btn.ghost{background:transparent;border:1px solid #ccc}
  .btn.sm{padding:6px 8px;font-size:12px}
  .btn[disabled]{opacity:.5;cursor:default}
  
  /* modal */
  .modal{
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,0.35);
    padding:20px;
    z-index:60;
  }
  .modal-panel{
    width:720px;
    max-width:96%;
    background:var(--card);
    border-radius:8px;
    padding:18px;
    box-shadow:0 8px 30px rgba(0,0,0,.25);
  }
  
  /* forms */
  .form label{display:block;margin-bottom:10px;font-size:13px}
  .form input[type="text"],
  .form input[type="password"],
  .form select,
  .form textarea,
  .form input[type="date"]{
    width:100%;
    padding:8px 10px;
    margin-top:6px;
    border-radius:6px;
    border:1px solid #ddd;
    font-size:14px;
    background:#fff;
  }
  .form textarea{resize:vertical}
  
  .form-row{
    display:flex;
    gap:10px;
    justify-content:flex-end;
    margin-top:12px;
  }
  
  /* grid 2 columns */
  .grid-2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
  }
  
  /* small login card */
  .page-center{
    display:flex;
    align-items:center;
    justify-content:center;
    height:100vh;
  }
  .card{
    background:var(--card);
    padding:18px;
    border-radius:10px;
    box-shadow:0 8px 30px rgba(0,0,0,.08);
    width:100%;
    max-width:420px;
  }
  .login-card h2{text-align:center;margin-top:0}
  .form label input{margin-top:6px}
  
  /* helper */
  .small{font-size:13px;color:#444}
  .mono{font-family:monospace}