:root {
      --ink:#1e2f3b; --muted:#6e7c84; --line:#dce5e7; --paper:#ffffff; --bg:#f5f8f8;
      --teal:#167a78; --teal-soft:#e4f2f0; --navy:#243f52; --amber:#bc7411; --amber-soft:#fff4df;
      --red:#b45b4f; --red-soft:#faece9; --green:#2f7a58; --green-soft:#e8f4ec;
      --shadow:0 8px 20px rgba(31,55,66,.07);
      --purple:#7e22ce; --purple-soft:#f3e8ff;
    }
    *{box-sizing:border-box}
    body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:15px;line-height:1.45}
    .shell{max-width:1480px;margin:0 auto;padding:36px 42px 48px}
    header.app-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:22px;flex-wrap:wrap}
    .eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.14em;font-weight:800;color:var(--teal);margin-bottom:10px}
    h1{font-size:34px;line-height:1.12;letter-spacing:-.035em;margin:0 0 9px;font-weight:760;color:var(--navy)}
    .subtitle{margin:0;color:var(--muted);font-size:15px}
    .head-right{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
    .date{color:var(--muted);font-size:14px;white-space:nowrap}
    .toolbar{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
    button,.btn{
      appearance:none;border:1px solid var(--line);background:var(--paper);color:var(--ink);
      border-radius:9px;padding:8px 12px;font-size:13px;font-weight:650;cursor:pointer;
      font-family:inherit;transition:background .15s,border-color .15s,color .15s;
    }
    button:hover{background:#f0f5f5;border-color:#c9d5d7}
    button.primary{background:var(--teal);color:#fff;border-color:var(--teal)}
    button.primary:hover{background:#126663}
    button.danger{background:var(--red-soft);color:var(--red);border-color:#efd2cd}
    button.danger:hover{background:#f5ddd8}
    button.ghost{background:transparent}
    button:disabled{opacity:.5;cursor:not-allowed}
    .sync-note{font-size:12px;color:var(--muted);min-height:16px}
    .sync-note.ok{color:var(--green)}.sync-note.warn{color:var(--amber)}.sync-note.err{color:var(--red)}

    .filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:20px}
    .filters-label{font-size:12px;font-weight:750;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-right:4px}
    .chip{
      border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:7px 14px;
      font-size:13px;font-weight:650;color:#53656d;cursor:pointer;
    }
    .chip:hover{border-color:#b8c8cb;background:#f7fafa}
    .chip.active{background:var(--teal-soft);border-color:#b7d9d5;color:var(--teal)}

    .summary{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:22px}
    .metric{min-width:142px;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px 16px;box-shadow:0 2px 8px rgba(29,54,65,.03)}
    .metric strong{display:block;font-size:23px;letter-spacing:-.02em;color:var(--navy);line-height:1.05}
    .metric span{display:block;font-size:12px;color:var(--muted);margin-top:5px}

    .board{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;align-items:start}
    .column{background:#eef3f3;border:1px solid #e1e9e9;border-radius:13px;min-height:385px;padding:12px}
    .column-head{display:flex;align-items:center;justify-content:space-between;padding:4px 4px 13px}
    .column h2{font-size:14px;line-height:1.2;margin:0;font-weight:750;color:var(--navy)}
    .count{font-size:12px;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:99px;padding:3px 8px}
    .cards{display:flex;flex-direction:column;gap:10px;min-height:40px}
    .card{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:15px;box-shadow:var(--shadow);cursor:pointer;transition:transform .12s,box-shadow .12s}
    .card:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(31,55,66,.1)}
    .card.example{border-left:3px solid var(--purple)}
    .card.overdue{border-color:#e8c0ba;background:linear-gradient(180deg,#fff 70%,#fdf6f4)}
    .card.due-soon{border-color:#e8d4a8;background:linear-gradient(180deg,#fff 70%,#fffaf0)}
    .card-top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
    .client{font-weight:760;font-size:15px;color:var(--navy);letter-spacing:-.01em}
    .job{font-size:13px;color:#53656d;margin:4px 0 8px}
    .next-action{font-size:12px;color:var(--muted);margin:0 0 12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
    .next-action strong{color:#4a5d65;font-weight:650}
    .meta{display:flex;align-items:center;justify-content:space-between;gap:7px;font-size:12px;color:var(--muted);border-top:1px solid #edf1f1;padding-top:11px;flex-wrap:wrap}
    .due{font-weight:650;color:#52656d}
    .due.warn{color:var(--amber)}.due.overdue{color:var(--red)}
    .person{height:25px;width:25px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#d9eceb;color:var(--teal);font-size:11px;font-weight:800;flex-shrink:0}
    .tag{display:inline-flex;align-items:center;border-radius:999px;font-size:11px;font-weight:750;padding:5px 8px;white-space:nowrap}
    .tag.invoice{background:var(--amber-soft);color:#95600e}
    .tag.invoiced{background:#edf1f2;color:#596b73}
    .tag.paid{background:var(--green-soft);color:var(--green)}
    .tag.example{background:var(--purple-soft);color:var(--purple);padding:3px 7px;font-size:10px}
    .empty-col{font-size:12px;color:var(--muted);padding:8px 4px;font-style:italic}

    .billing{margin-top:25px;background:var(--paper);border:1px solid var(--line);border-radius:13px;padding:17px 20px;display:flex;align-items:center;gap:26px;box-shadow:0 3px 12px rgba(29,54,65,.04);flex-wrap:wrap}
    .billing-title{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--navy);margin-right:4px}
    .billing-items{display:flex;gap:30px;flex-wrap:wrap}
    .billing-item{display:flex;align-items:center;gap:9px;color:#566970;font-size:13px}
    .dot{height:9px;width:9px;border-radius:50%;background:var(--amber);display:inline-block}
    .dot.grey{background:#8c9ba1}.dot.green{background:var(--green)}
    .billing-item strong{color:var(--navy);font-size:16px}

    .modal-backdrop{position:fixed;inset:0;background:rgba(30,47,59,.42);display:none;align-items:center;justify-content:center;z-index:100;padding:1rem}
    .modal-backdrop.open{display:flex}
    .modal{background:var(--paper);border-radius:14px;width:min(560px,100%);max-height:90vh;overflow:auto;box-shadow:0 24px 48px rgba(31,55,66,.22)}
    .modal header{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
    .modal header h2{margin:0;font-size:18px;color:var(--navy);font-weight:750}
    .modal .body{padding:18px 20px}
    .modal .footer{padding:14px 20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:8px;background:#f7fafa;flex-wrap:wrap}
    .footer-right{display:flex;gap:8px;flex-wrap:wrap}
    .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
    .form-grid .full{grid-column:1/-1}
    label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:700;color:#4a5d65}
    input,select,textarea{
      border:1px solid var(--line);border-radius:9px;padding:9px 11px;font-size:14px;
      font-family:inherit;color:var(--ink);background:#fff;
    }
    input:focus,select:focus,textarea:focus{outline:2px solid #b7d9d5;outline-offset:0;border-color:var(--teal)}
    textarea{min-height:72px;resize:vertical}
    .hidden{display:none !important}

    @media(max-width:1050px){.shell{padding:28px 22px}.board{grid-template-columns:repeat(3,minmax(0,1fr))}}
    @media(max-width:700px){
      header.app-head{display:block}.head-right{align-items:flex-start;margin-top:14px}
      .board{grid-template-columns:1fr}.column{min-height:0}
      .billing{display:block}.billing-items{margin-top:14px;gap:15px}
      .form-grid{grid-template-columns:1fr}
    }


    /* Auth / login */
    .login-screen{
      min-height:100vh;display:flex;align-items:center;justify-content:center;
      padding:28px;background:var(--bg);
    }
    .login-card{
      width:min(420px,100%);background:var(--paper);border:1px solid var(--line);
      border-radius:16px;padding:32px 28px;box-shadow:var(--shadow);
    }
    .login-card h1{font-size:28px;margin:0 0 8px}
    .login-form{display:flex;flex-direction:column;gap:14px;margin-top:20px}
    .login-form button{width:100%;padding:11px 14px}
    .login-msg{font-size:13px;color:var(--muted);min-height:1.2em;margin:14px 0 0}
    .login-msg.ok{color:var(--green)}.login-msg.err{color:var(--red)}.login-msg.warn{color:var(--amber)}
    .user-chip{font-size:12px;color:var(--muted);text-align:right}
    .user-chip strong{color:var(--navy);font-weight:700}
    .modal-wide{width:min(640px,100%)}
    .invite-row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:8px}
    .invite-row .grow{flex:1;min-width:180px}
    .invite-hint{font-size:12px;color:var(--muted);margin:0 0 12px}
    .users-list{display:flex;flex-direction:column;gap:8px;margin-top:8px}
    .user-row{
      display:flex;align-items:center;justify-content:space-between;gap:12px;
      padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#fafcfc;flex-wrap:wrap;
    }
    .user-row .meta{display:flex;flex-direction:column;gap:2px;min-width:0}
    .user-row .email{font-weight:700;color:var(--navy);font-size:14px;word-break:break-all}
    .user-row .sub{font-size:12px;color:var(--muted)}
    .user-row .actions{display:flex;gap:8px;align-items:center}
    .badge{
      display:inline-flex;align-items:center;border-radius:999px;font-size:11px;font-weight:750;
      padding:4px 8px;
    }
    .badge.admin{background:var(--teal-soft);color:var(--teal)}
    .badge.member{background:#edf1f2;color:#596b73}
    .badge.pending{background:var(--amber-soft);color:#95600e}

    .auth-links{display:flex;flex-direction:column;gap:8px;margin-top:14px;align-items:flex-start}
    .auth-toggle{margin:0;font-size:13px;color:var(--muted)}
    button.linkish,.linkish{
      appearance:none;border:none;background:none;padding:0;margin:0;
      color:var(--teal);font-size:13px;font-weight:650;cursor:pointer;
      font-family:inherit;text-decoration:underline;text-underline-offset:2px;
    }
    button.linkish:hover{color:#126663;background:none;border:none}