:root{
    --ink:#161616; --ink2:#4a4a4a; --sub:#9a9a9a; --line:#eee; --line2:#e2e2e2;
    --soft:#f6f6f4; --bg:#fff; --ok:#3a9d6e; --red:#c0392b;
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--bg);color:var(--ink);line-height:1.6;
    font-family:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;font-size:14px}
  .serif{font-family:"Hiragino Mincho ProN","Yu Mincho",YuMincho,Georgia,serif}
  ::selection{background:#161616;color:#fff}

  .app{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
  /* sidebar */
  .side{border-right:1px solid var(--line);padding:30px 22px;position:sticky;top:0;height:100vh}
  .side .brand{font-size:17px;letter-spacing:.28em;padding-left:.28em}
  .side .brand small{display:block;font-size:9px;letter-spacing:.4em;color:var(--sub);margin-top:8px}
  .nav{margin-top:42px;display:flex;flex-direction:column;gap:2px}
  .nav a{display:flex;align-items:center;gap:13px;padding:11px 12px;color:var(--ink2);cursor:pointer;
    border-radius:7px;transition:.15s;letter-spacing:.04em;font-size:13.5px}
  .nav a:hover{background:var(--soft)}
  .nav a.on{background:var(--ink);color:#fff}
  .nav a svg{width:18px;height:18px;stroke-width:1.4}
  .side .foot{position:absolute;bottom:28px;left:22px;font-size:10px;letter-spacing:.16em;color:#cfcfcf}

  /* main */
  .main{padding:30px 38px 70px;min-width:0}
  .topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:30px}
  .topbar h1{font-weight:300;font-size:25px;letter-spacing:.04em;margin:0}
  .ctrls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  select.sel{appearance:none;border:1px solid var(--line2);background:#fff;padding:9px 30px 9px 13px;
    font-size:13px;font-family:inherit;cursor:pointer;border-radius:6px;letter-spacing:.03em;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3l3 3 3-3' stroke='%23999' fill='none' stroke-width='1.2'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 11px center}
  .datenav{display:flex;align-items:center;border:1px solid var(--line2);border-radius:6px;overflow:hidden}
  .datenav button{border:none;background:#fff;width:34px;height:36px;font-size:17px;cursor:pointer;color:var(--ink);transition:.15s}
  .datenav button:hover{background:var(--soft)}
  .datenav .lbl{padding:0 14px;font-size:13px;letter-spacing:.06em;min-width:128px;text-align:center;font-variant-numeric:tabular-nums}
  .add{display:inline-flex;align-items:center;gap:7px;background:var(--ink);color:#fff;border:1px solid var(--ink);
    padding:9px 16px;font-size:12px;letter-spacing:.1em;cursor:pointer;border-radius:6px;transition:.15s}
  .add:hover{background:#000}.add svg{width:15px;height:15px;stroke-width:1.8}

  /* KPI */
  .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:10px;
    overflow:hidden;margin-bottom:30px}
  .kpi{padding:20px 22px;border-right:1px solid var(--line)}
  .kpi:last-child{border-right:none}
  .kpi .k{font-size:10px;letter-spacing:.18em;color:var(--sub)}
  .kpi .v{font-size:30px;font-weight:300;margin-top:8px;letter-spacing:.02em}
  .kpi .v small{font-size:13px;color:var(--sub);margin-left:3px}

  /* table */
  table{width:100%;border-collapse:collapse}
  thead th{text-align:left;font-size:10px;letter-spacing:.16em;color:var(--sub);font-weight:400;
    padding:0 14px 12px;border-bottom:1px solid var(--ink)}
  tbody td{padding:16px 14px;border-bottom:1px solid var(--line);letter-spacing:.02em;vertical-align:middle}
  tbody tr{cursor:pointer;transition:.12s}
  tbody tr:hover{background:var(--soft)}
  tr.cx td{color:#bdbdbd}
  tr.cx .cust{text-decoration:line-through}
  .time{font-variant-numeric:tabular-nums;font-size:15px;letter-spacing:.04em}
  .cust{font-size:14.5px}
  .muted{color:var(--sub);font-size:12.5px}
  .src{display:inline-block;font-size:9px;letter-spacing:.14em;color:var(--ink2);border:1px solid var(--line2);
    border-radius:4px;padding:1px 5px;margin-left:8px;vertical-align:middle}
  .badge{display:inline-flex;align-items:center;gap:7px;font-size:11px;letter-spacing:.1em;white-space:nowrap}
  .dot{width:7px;height:7px;border-radius:50%;display:inline-block}
  .d-confirmed{background:var(--ink)} .d-done{background:var(--ok)} .d-cancelled{background:#cfcfcf}
  .empty{text-align:center;color:var(--sub);padding:60px 0;font-size:13px;letter-spacing:.06em}

  /* timeline */
  .tl{border:1px solid var(--line);border-radius:10px;overflow:hidden}
  .tl-head{display:grid;border-bottom:1px solid var(--line);background:#fafafa}
  .tl-head .h{padding:13px 10px;font-size:12px;letter-spacing:.06em;text-align:center;border-left:1px solid var(--line)}
  .tl-head .h:first-child{border-left:none}
  .tl-head .h small{display:block;color:var(--sub);font-size:10px;letter-spacing:.1em;margin-top:2px}
  .tl-body{display:grid;position:relative}
  .tl-col{position:relative;border-left:1px solid var(--line)}
  .tl-col:first-child{border-left:none}
  .tl-slot{height:46px;border-top:1px solid var(--line)}
  .tl-gutter .tl-slot{border-top:1px solid var(--line);font-size:10px;color:var(--sub);padding:2px 8px 0;
    text-align:right;font-variant-numeric:tabular-nums;letter-spacing:.04em}
  .blk{position:absolute;left:4px;right:4px;border-radius:6px;padding:6px 9px;overflow:hidden;cursor:pointer;
    background:#fff;border:1px solid var(--line2);border-left:3px solid var(--ink);transition:.12s;font-size:12px}
  .blk:hover{box-shadow:0 4px 14px rgba(0,0,0,.08);z-index:3}
  .blk .bt{font-variant-numeric:tabular-nums;font-size:11px;color:var(--sub);letter-spacing:.03em}
  .blk .bn{font-size:13px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .blk .bm{font-size:11px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .blk.done{border-left-color:var(--ok)}
  .blk.cancelled{border-left-color:#cfcfcf;background:#fafafa}
  .blk.cancelled .bn{text-decoration:line-through;color:#bdbdbd}

  /* customers */
  .ph{padding:80px 0;text-align:center;color:var(--sub)}
  .ph .serif{font-size:22px;color:var(--ink2);margin-bottom:10px}

  /* modal */
  .ov{position:fixed;inset:0;background:rgba(20,20,20,.34);display:flex;align-items:center;justify-content:center;
    z-index:50;padding:20px;opacity:0;pointer-events:none;transition:.2s}
  .ov.show{opacity:1;pointer-events:auto}
  .modal{background:#fff;width:100%;max-width:430px;border-radius:12px;padding:28px 30px 30px;
    max-height:90vh;overflow:auto;transform:translateY(8px);transition:.2s}
  .ov.show .modal{transform:none}
  .modal .mhead{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:22px}
  .modal .kick{font-size:10px;letter-spacing:.24em;color:var(--sub)}
  .modal h3{font-weight:300;font-size:22px;margin:6px 0 0;letter-spacing:.03em}
  .mx{border:none;background:none;cursor:pointer;color:var(--sub);padding:4px}
  .mx svg{width:20px;height:20px;stroke-width:1.5}.mx:hover{color:var(--ink)}
  .mrow{display:flex;justify-content:space-between;padding:12px 2px;border-bottom:1px solid var(--line);font-size:14px}
  .mrow .k{color:var(--sub);font-size:11px;letter-spacing:.1em}
  .mfield{margin-bottom:18px}
  .mfield label{display:block;font-size:11px;letter-spacing:.12em;color:var(--sub);margin-bottom:7px}
  .mfield input,.mfield select{width:100%;border:none;border-bottom:1px solid var(--line2);padding:9px 2px;
    font-size:15px;font-family:inherit;background:none}
  .mfield input:focus,.mfield select:focus{outline:none;border-color:var(--ink)}
  .mfield select{appearance:none;cursor:pointer}
  .stbtns{display:flex;gap:8px;margin-top:24px}
  .stbtn{flex:1;border:1px solid var(--line2);background:#fff;padding:11px 0;font-size:12px;letter-spacing:.06em;
    cursor:pointer;border-radius:6px;transition:.15s;font-family:inherit}
  .stbtn:hover{border-color:var(--ink)}
  .stbtn.on{background:var(--ink);color:#fff;border-color:var(--ink)}
  .mprimary{width:100%;background:var(--ink);color:#fff;border:1px solid var(--ink);padding:14px 0;
    font-size:12px;letter-spacing:.18em;cursor:pointer;border-radius:6px;margin-top:26px;font-family:inherit}
  .mprimary:hover{background:#000}

  .demo-flag{position:fixed;left:16px;bottom:14px;font-size:10px;letter-spacing:.24em;color:#cfcfcf;z-index:2}
  @media(max-width:820px){
    .app{grid-template-columns:1fr}
    .side{position:static;height:auto;border-right:none;border-bottom:1px solid var(--line);
      display:flex;align-items:center;justify-content:space-between;padding:18px 22px}
    .side .brand small,.side .foot{display:none}.nav{flex-direction:row;margin-top:0;gap:2px}
    .nav a span{display:none}.main{padding:24px 20px 60px}
    .kpis{grid-template-columns:repeat(2,1fr)}.kpi:nth-child(2){border-right:none}
    .kpi:nth-child(1),.kpi:nth-child(2){border-bottom:1px solid var(--line)}
  }