:root{
    --bg:#EDF1F2;
    --panel:#FFFFFF;
    --ink:#16303A;
    --steel:#5C6E75;
    --steel-soft:#8B9AA1;
    --accent:#0E8FA3;         /* cool stream teal */
    --accent-deep:#0B7284;
    --accent-soft:#DDF0F3;
    --line:#C6CFD2;
    --line-soft:#DEE4E6;

    --st-enquiry:#8B6FB8;      --st-enquiry-soft:#EEE8F7;
    --st-quoted:#D9A441;       --st-quoted-soft:#FAF0DA;
    --st-pending:#C77E3C;      --st-pending-soft:#F8E9DB;
    --st-confirmed:#3E7DB2;    --st-confirmed-soft:#E2EDF5;
    --st-progress:#2E7D8C;     --st-progress-soft:#DFEFF2;
    --st-completed:#3F8361;    --st-completed-soft:#E1EFE7;
    --st-cancelled:#C1443C;    --st-cancelled-soft:#F7E1DF;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--bg);
    background-image:
      linear-gradient(var(--line-soft) 1px, transparent 1px),
      linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
    background-size:28px 28px;
    font-family:'Inter',sans-serif;
    color:var(--ink);
    min-height:100vh;
  }
  .mono{font-family:'IBM Plex Mono',monospace;}
  .app{max-width:1360px;margin:0 auto;padding:22px 22px 60px;}

  /* ---------- Header ---------- */
  .nameplate{
    background:var(--ink); color:#EDF1F2; border-radius:10px; padding:16px 22px;
    display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
    position:relative; overflow:hidden;
  }
  .nameplate::after{
    content:""; position:absolute; inset:0;
    background-image:repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 26px);
    pointer-events:none;
  }
  .np-left{display:flex; align-items:center; gap:13px; z-index:1;}
  .np-badge{
    width:42px;height:42px;border-radius:8px;background:var(--accent);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
  }
  .np-title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:19px;letter-spacing:0.02em;line-height:1.1;}
  .np-sub{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:#A9BCC3;letter-spacing:0.08em;text-transform:uppercase;margin-top:3px;}
  .np-right{display:flex;gap:9px;z-index:1;align-items:center;}

  .btn{
    font-family:'Inter',sans-serif;font-weight:600;font-size:13.5px;border:none;border-radius:7px;
    padding:9px 15px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
    transition:transform .08s ease, filter .12s ease;
  }
  .btn:active{transform:translateY(1px);}
  .btn-accent{background:var(--accent);color:#fff;}
  .btn-accent:hover{filter:brightness(1.08);}
  .btn-ghost{background:rgba(255,255,255,0.08);color:#EDF1F2;border:1px solid rgba(255,255,255,0.18);}
  .btn-ghost:hover{background:rgba(255,255,255,0.15);}
  .btn-outline{background:#fff;color:var(--ink);border:1px solid var(--line);}
  .btn-outline:hover{background:var(--line-soft);}
  .btn-sm{padding:6px 10px;font-size:12.5px;border-radius:6px;}
  .btn-danger-text{background:transparent;color:var(--st-cancelled);font-weight:600;}

  /* ---------- Tabs ---------- */
  .tabs{display:flex;gap:6px;margin-top:16px;}
  .tab{
    font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14px;
    padding:9px 18px;border-radius:8px 8px 0 0;cursor:pointer;color:var(--steel);
    border:1px solid transparent;border-bottom:none;background:transparent;
  }
  .tab.active{background:var(--panel);border-color:var(--line);color:var(--ink);position:relative;top:1px;}
  .tab .cnt{font-family:'IBM Plex Mono',monospace;font-size:11px;background:var(--accent-soft);color:var(--accent-deep);border-radius:10px;padding:1px 7px;margin-left:6px;}

  /* ---------- Layout ---------- */
  .layout{display:grid;grid-template-columns:248px 1fr;gap:18px;margin-top:0;}
  @media (max-width:920px){.layout{grid-template-columns:1fr;}}
  .panel{background:var(--panel);border:1px solid var(--line);border-radius:0 10px 10px 10px;}
  .sidepanel{background:var(--panel);border:1px solid var(--line);border-radius:10px;margin-top:0;}

  .main-wrap{display:grid;grid-template-columns:248px 1fr;gap:18px;align-items:start;}
  @media (max-width:920px){.main-wrap{grid-template-columns:1fr;}}

  /* ---------- Sidebar ---------- */
  .side-section{padding:15px 16px;}
  .side-section + .side-section{border-top:1px solid var(--line-soft);}
  .side-label{
    font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;
    color:var(--steel);margin-bottom:9px;display:flex;align-items:center;justify-content:space-between;
  }
  .tech-row{display:flex;align-items:center;gap:9px;padding:6px 2px;border-radius:6px;cursor:pointer;font-size:13.5px;}
  .tech-row:hover{background:var(--bg);}
  .tech-swatch{width:11px;height:11px;border-radius:3px;flex-shrink:0;}
  .tech-name{flex:1;font-weight:500;}
  .tech-count{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--steel);}
  .tech-row.dim{opacity:0.35;}
  .add-tech-row{margin-top:8px;display:flex;gap:6px;}
  .add-tech-row input{flex:1;border:1px solid var(--line);border-radius:6px;padding:6px 8px;font-size:12.5px;font-family:'Inter',sans-serif;min-width:0;}

  .stat-row{display:flex;justify-content:space-between;align-items:baseline;padding:3.5px 2px;font-size:13px;}
  .stat-num{font-family:'IBM Plex Mono',monospace;font-weight:500;}
  .stat-money{color:var(--accent-deep);font-weight:600;}

  .filter-chiprow{display:flex;flex-wrap:wrap;gap:5px;}
  .fchip{
    font-size:11.5px;font-weight:600;padding:4px 9px;border-radius:14px;border:1px solid var(--line);
    cursor:pointer;color:var(--steel);background:#fff;
  }
  .fchip.on{background:var(--ink);border-color:var(--ink);color:#fff;}

  /* ---------- Calendar ---------- */
  .cal-panel{padding:16px 16px 10px;}
  .cal-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;flex-wrap:wrap;gap:10px;}
  .cal-month{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:19px;}
  .cal-nav{display:flex;align-items:center;gap:6px;}
  .nav-btn{
    width:30px;height:30px;border-radius:6px;border:1px solid var(--line);background:#fff;cursor:pointer;
    display:flex;align-items:center;justify-content:center;color:var(--steel);font-size:15px;
  }
  .nav-btn:hover{background:var(--bg);}

  .cal-grid{border:1px solid var(--line);border-radius:8px;overflow:hidden;}
  .cal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);background:var(--ink);}
  .cal-weekdays div{
    color:#C0CDD2;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:0.08em;
    text-transform:uppercase;padding:8px 0;text-align:center;
  }
  .cal-days{display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:minmax(98px,auto);}
  .cal-cell{
    border-right:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
    padding:6px;position:relative;cursor:pointer;
  }
  .cal-cell:nth-child(7n){border-right:none;}
  .cal-cell:hover{background-color:rgba(14,143,163,0.045);}
  .cal-cell.other-month{background-color:#F4F6F7;}
  .cal-cell.other-month .cal-date{color:var(--steel-soft);}
  .cal-date{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:500;color:var(--steel);display:inline-flex;align-items:center;justify-content:center;}
  .cal-cell.is-today .cal-date{background:var(--accent);color:#fff;width:20px;height:20px;border-radius:5px;}
  .cal-cell.is-today{box-shadow:inset 0 0 0 1.5px var(--accent);}
  .job-chip{
    margin-top:4px;font-size:11px;padding:3px 5px;border-radius:5px;font-weight:500;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:4px;color:#fff;
  }
  .job-chip.visit-chip{
    background:#fff !important;color:var(--ink);
    border:1.5px dashed currentColor;
  }
  .job-chip .t{font-family:'IBM Plex Mono',monospace;font-size:9.5px;opacity:0.85;flex-shrink:0;}
  .type-mini{font-size:8.5px;font-weight:700;letter-spacing:0.04em;border-radius:3px;padding:1px 3px;background:rgba(255,255,255,0.25);flex-shrink:0;}
  .visit-chip .type-mini{background:rgba(22,48,58,0.1);}
  .more-chip{font-size:10.5px;color:var(--steel);margin-top:3px;padding-left:5px;font-weight:500;}
  .add-day-btn{
    position:absolute;top:5px;right:6px;width:18px;height:18px;border-radius:5px;background:transparent;
    border:1px solid transparent;color:var(--steel-soft);display:flex;align-items:center;justify-content:center;
    font-size:14px;line-height:1;opacity:0;transition:opacity .1s;cursor:pointer;
  }
  .cal-cell:hover .add-day-btn{opacity:1;}
  .add-day-btn:hover{background:var(--accent);border-color:var(--accent);color:#fff;}

  /* ---------- Pipeline (CRM) ---------- */
  .pipe-panel{padding:16px;}
  .pipe-board{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px;align-items:start;}
  .pipe-col{background:var(--bg);border:1px solid var(--line-soft);border-radius:9px;padding:10px;min-height:120px;}
  .pipe-col-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;padding:0 2px;}
  .pipe-col-title{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13px;display:flex;align-items:center;gap:7px;}
  .pipe-dot{width:9px;height:9px;border-radius:50%;}
  .pipe-col-count{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--steel);}
  .pipe-col-total{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--steel);margin-bottom:8px;padding:0 2px;}
  .pipe-card{
    background:#fff;border:1px solid var(--line);border-left-width:4px;border-radius:8px;
    padding:10px 11px;margin-bottom:8px;cursor:pointer;
  }
  .pipe-card:hover{box-shadow:0 3px 10px rgba(22,48,58,0.1);}
  .pipe-card-title{font-weight:600;font-size:13.5px;margin-bottom:2px;}
  .pipe-card-meta{font-size:11.5px;color:var(--steel);}
  .pipe-card-row{display:flex;justify-content:space-between;align-items:center;margin-top:6px;}
  .pipe-card-money{font-family:'IBM Plex Mono',monospace;font-size:12.5px;font-weight:600;color:var(--accent-deep);}
  .pipe-card-date{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--steel-soft);}
  .pipe-move{display:flex;gap:4px;margin-top:8px;}
  .pipe-move button{
    flex:1;font-size:10.5px;font-weight:600;padding:4px 2px;border-radius:5px;border:1px solid var(--line);
    background:#fff;cursor:pointer;color:var(--steel);
  }
  .pipe-move button:hover{background:var(--accent-soft);color:var(--accent-deep);border-color:var(--accent);}
  .pipe-empty{font-size:12px;color:var(--steel-soft);text-align:center;padding:14px 4px;}

  /* ---------- Drawer / Modal ---------- */
  .overlay{
    position:fixed;inset:0;background:rgba(22,48,58,0.42);display:none;
    align-items:center;justify-content:center;z-index:50;padding:20px;
  }
  .overlay.show{display:flex;}
  .modal{
    background:#fff;border-radius:12px;width:100%;max-width:480px;max-height:90vh;overflow-y:auto;
    padding:22px;box-shadow:0 20px 60px rgba(22,48,58,0.3);
  }
  .modal-title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:17px;margin:0 0 3px;}
  .modal-sub{font-size:11.5px;color:var(--steel);font-family:'IBM Plex Mono',monospace;margin-bottom:15px;}
  .field{margin-bottom:12px;}
  .field label{display:block;font-size:11px;font-weight:600;color:var(--steel);margin-bottom:5px;text-transform:uppercase;letter-spacing:0.04em;}
  .field input,.field select,.field textarea{
    width:100%;border:1px solid var(--line);border-radius:7px;padding:8.5px 10px;font-size:14px;
    font-family:'Inter',sans-serif;color:var(--ink);background:#fff;
  }
  .field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent);}
  .field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  .type-toggle{display:flex;gap:6px;}
  .type-opt{
    flex:1;border:1.5px solid var(--line);border-radius:7px;padding:9px 4px;text-align:center;
    font-size:13px;font-weight:600;cursor:pointer;color:var(--steel);
  }
  .type-opt.active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-deep);}
  .status-picker{display:flex;gap:5px;flex-wrap:wrap;}
  .status-opt{
    border:1.5px solid var(--line);border-radius:7px;padding:6px 9px;text-align:center;
    font-size:11.5px;font-weight:600;cursor:pointer;color:var(--steel);flex:1 0 28%;
  }
  .status-opt.active{color:#fff;}
  .modal-actions{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:13px;border-top:1px solid var(--line-soft);}
  .modal-actions-right{display:flex;gap:8px;margin-left:auto;}

  /* Day drawer */
  .day-drawer{
    position:fixed;top:0;right:0;height:100vh;width:362px;max-width:92vw;background:#fff;
    box-shadow:-8px 0 30px rgba(22,48,58,0.16);transform:translateX(100%);transition:transform .2s ease;
    z-index:40;display:flex;flex-direction:column;
  }
  .day-drawer.show{transform:translateX(0);}
  .drawer-head{padding:17px 20px;border-bottom:1px solid var(--line-soft);display:flex;justify-content:space-between;align-items:flex-start;}
  .drawer-date{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:17.5px;}
  .drawer-date-sub{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--steel);margin-top:2px;}
  .drawer-close{background:none;border:none;font-size:20px;color:var(--steel);cursor:pointer;line-height:1;}
  .drawer-body{flex:1;overflow-y:auto;padding:14px 20px;}
  .drawer-job{border:1px solid var(--line);border-radius:9px;padding:11px 12px;margin-bottom:10px;cursor:pointer;border-left-width:4px;}
  .drawer-job:hover{background:var(--bg);}
  .drawer-job-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:3px;gap:6px;}
  .drawer-job-time{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--steel);}
  .drawer-job-title{font-weight:600;font-size:14px;}
  .drawer-job-meta{font-size:12px;color:var(--steel);margin-top:3px;}
  .drawer-empty{color:var(--steel-soft);font-size:13px;text-align:center;padding:30px 10px;}
  .drawer-foot{padding:13px 20px;border-top:1px solid var(--line-soft);}

  .status-pill{font-size:9.5px;font-weight:700;padding:2px 8px;border-radius:20px;text-transform:uppercase;letter-spacing:0.04em;white-space:nowrap;}
  .type-pill{font-size:9.5px;font-weight:700;padding:2px 7px;border-radius:4px;letter-spacing:0.04em;white-space:nowrap;}
  .type-pill.job{background:var(--ink);color:#fff;}
  .type-pill.visit{background:#fff;color:var(--ink);border:1.5px dashed var(--steel);}