:root{
    --bg: #f4f1ea;
    --bg-2: #ebe6dc;
    --paper: #fdfbf6;
    --ink: #14171c;
    --ink-2: #3a3f47;
    --muted: #6f7480;
    --line: #d9d3c4;
    --line-2: #c5bfae;
    --navy: #1d2a44;
    --navy-2: #2a3a5c;
    --amber: #c8861d;
    --amber-soft: #e8b974;
    --green: #4a6b3a;
    --rust: #a04323;
    --plum: #6b3a5c;
    --shadow: 0 1px 0 rgba(20,23,28,.04), 0 6px 18px -6px rgba(20,23,28,.08);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{
    background: var(--bg);
    color: var(--ink);
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow:hidden;
  }
  body::before{
    content:"";
    position:fixed; inset:0;
    background-image:
      radial-gradient(circle at 1px 1px, rgba(20,23,28,.04) 1px, transparent 0);
    background-size: 24px 24px;
    pointer-events:none; z-index:0;
  }

  /* ============ LOGIN ============ */
  .login-screen{
    position:fixed; inset:0; z-index:50;
    display:grid; grid-template-columns: 1fr 1fr;
    background: var(--bg);
  }
  .login-screen.hidden{display:none}
  .login-art{
    position:relative; overflow:hidden;
    background: var(--navy);
    color: var(--paper);
    padding: 48px;
    display:flex; flex-direction:column; justify-content:space-between;
  }
  .login-art::before{
    content:""; position:absolute; inset:0;
    background:
      radial-gradient(800px 400px at 80% 20%, rgba(232,185,116,.18), transparent 60%),
      radial-gradient(600px 600px at 10% 90%, rgba(232,185,116,.08), transparent 60%);
  }
  .login-art::after{
    content:""; position:absolute; inset:0;
    background-image:
      linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(circle at 50% 50%, black, transparent 70%);
  }
  .login-brand{
    position:relative; z-index:1;
    display:flex; align-items:center; gap:12px;
    font-family:'Fraunces', serif; font-size: 22px; font-weight: 600;
    letter-spacing:-0.02em;
  }
  .brand-mark{
    width:36px; height:36px; border-radius:8px;
    background: var(--amber);
    display:grid; place-items:center;
    font-family:'Fraunces',serif; font-weight:700; color: var(--navy);
    font-size:18px;
  }
  .login-art-content{position:relative; z-index:1}
  .login-art-content h1{
    font-family:'Fraunces',serif; font-weight:500;
    font-size: clamp(36px, 4vw, 56px);
    letter-spacing:-0.03em; line-height:1.05;
    margin-bottom: 20px;
  }
  .login-art-content h1 em{font-style: italic; color: var(--amber-soft); font-weight: 400;}
  .login-art-content p{
    color: rgba(253,251,246,.7); max-width: 460px; font-size: 15px;
  }
  .login-stats{
    position:relative; z-index:1;
    display:flex; gap: 40px;
    border-top: 1px solid rgba(255,255,255,.12);
    padding-top: 24px;
  }
  .login-stat-num{
    font-family:'Fraunces',serif; font-size: 32px;
    font-weight:500; letter-spacing:-0.02em;
    color: var(--amber-soft);
  }
  .login-stat-label{
    font-size: 11px; text-transform:uppercase; letter-spacing: .12em;
    color: rgba(253,251,246,.5);
  }
  .login-form-wrap{
    display:flex; align-items:center; justify-content:center;
    padding: 48px;
  }
  .login-form{
    width:100%; max-width: 380px;
  }
  .login-eyebrow{
    font-size:11px; text-transform:uppercase; letter-spacing:.14em;
    color: var(--muted); margin-bottom: 12px;
    display:flex; align-items:center; gap:8px;
  }
  .login-eyebrow::before{content:""; width:24px; height:1px; background:var(--ink)}
  .login-form h2{
    font-family:'Fraunces',serif; font-weight:500;
    font-size: 36px; letter-spacing:-0.02em; line-height:1.1;
    margin-bottom: 8px;
  }
  .login-form > p{color:var(--muted); margin-bottom: 32px;}
  .role-tabs{
    display:grid; grid-template-columns: repeat(3,1fr);
    gap: 0; border:1px solid var(--line-2);
    border-radius: 8px; overflow:hidden; background:var(--paper);
    margin-bottom: 24px;
  }
  .role-tab{
    padding: 12px 8px; font-size: 12px; font-weight:500;
    border:none; background:transparent; cursor:pointer;
    color: var(--ink-2); border-right:1px solid var(--line-2);
    transition: all .15s;
    text-transform: uppercase; letter-spacing:.06em;
  }
  .role-tab:last-child{border-right:none}
  .role-tab.active{background: var(--ink); color: var(--paper)}
  .role-tab:not(.active):hover{background: var(--bg-2)}
  .form-group{margin-bottom: 16px}
  .form-group label{
    display:block; font-size:12px; font-weight:500;
    margin-bottom: 6px; color: var(--ink-2);
  }
  .form-input{
    width:100%; padding: 11px 14px;
    border:1px solid var(--line-2); border-radius:8px;
    background: var(--paper); font-family:inherit; font-size:14px;
    color: var(--ink); transition: all .15s;
  }
  .form-input:focus{outline:none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(20,23,28,.06)}
  .btn-primary{
    width:100%; padding: 13px; border:none; cursor:pointer;
    background: var(--ink); color: var(--paper);
    border-radius: 8px; font-weight:600; font-size: 14px;
    font-family: inherit; letter-spacing:.01em;
    transition: all .15s;
  }
  .btn-primary:hover{background: var(--navy)}
  .login-hint{
    margin-top: 16px; padding: 12px;
    background: var(--bg-2); border-radius: 8px;
    font-size: 12px; color: var(--ink-2);
    border-left: 2px solid var(--amber);
  }

  /* ============ APP SHELL ============ */
  .app{
    display:none; height:100vh;
    grid-template-columns: 240px 1fr;
    position:relative; z-index:1;
  }
  .app.active{display:grid}
  .sidebar{
    background: var(--paper);
    border-right: 1px solid var(--line);
    display:flex; flex-direction:column;
    position:relative;
  }
  .sidebar-brand{
    padding: 22px 20px;
    display:flex; align-items:center; gap:10px;
    border-bottom: 1px solid var(--line);
    font-family:'Fraunces',serif; font-size: 19px; font-weight:600;
    letter-spacing:-0.02em;
  }
  .sidebar-brand .brand-mark{width:30px;height:30px;font-size:15px;border-radius:7px}
  .sidebar-role{
    padding: 14px 20px;
    border-bottom: 1px solid var(--line);
    font-size: 11px; text-transform:uppercase; letter-spacing:.12em;
    color: var(--muted);
    display:flex; align-items:center; gap:8px;
  }
  .sidebar-role .dot{
    width:8px; height:8px; border-radius:50%;
    background: var(--green); box-shadow: 0 0 0 3px rgba(74,107,58,.15);
  }
.sidebar-nav {
    padding: 12px 12px;
    overflow-y: scroll;
    height: 569px;
  }
  .nav-item{
    display:flex; align-items:center; gap:10px;
    padding: 10px 12px; margin-bottom: 2px;
    border-radius: 7px; cursor:pointer;
    color: var(--ink-2); font-size: 13.5px;
    transition: all .12s;
    font-weight: 500;
    text-decoration: none;
  }
  .nav-item:hover{background: var(--bg)}
  .nav-item.active{
    background: var(--ink); color: var(--paper);
  }
  .nav-item svg{width:16px; height:16px; flex-shrink:0; opacity:.85}
  .nav-item.active svg{opacity:1}

  /* Nav groups (collapsible parent menu) */
  .nav-group{margin-bottom: 2px}
  .nav-group-head{
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border-radius: 7px; cursor: pointer;
    color: var(--ink-2); font-size: 13.5px;
    transition: all .12s;
    font-weight: 600;
    user-select: none;
  }
  .nav-group-head:hover{background: var(--bg)}
  .nav-group-head svg{width: 16px; height: 16px; flex-shrink: 0; opacity: .85}
  .nav-group-head .nav-group-arrow{
    margin-left: auto; transition: transform .18s;
    width: 11px; height: 11px; opacity: .6;
  }
  .nav-group.open .nav-group-arrow{transform: rotate(180deg)}
  .nav-group-body{
    display: none;
    margin-left: 8px;
    padding-left: 14px;
    border-left: 1px dashed var(--line-2);
    margin-top: 2px;
  }
  .nav-group.open .nav-group-body{display: block}
  .nav-item.nav-child{
    font-size: 13px;
    padding: 8px 10px;
    margin-bottom: 1px;
  }
.sidebar-foot {
    padding: 14px 16px;
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 10px;
    position: absolute;
    bottom: 0;
}
  .avatar{
    width:34px; height:34px; border-radius:50%;
    background: var(--navy); color: var(--paper);
    display:grid; place-items:center; font-weight:600;
    font-size: 13px; flex-shrink:0;
  }
  .sidebar-foot .uname{font-weight:600; font-size:13px; line-height:1.2}
  .sidebar-foot .urole{font-size:11px; color:var(--muted); margin-top:2px}
  .logout-btn{
    margin-left:auto; background:transparent; border:1px solid var(--line-2);
    width:30px; height:30px; border-radius:7px;
    display:grid; place-items:center; cursor:pointer; color: var(--ink-2);
  }
  .logout-btn:hover{background: var(--bg-2)}

  /* ============ MAIN ============ */
  .main{
    overflow-y:auto; padding: 28px 36px 60px;
    position:relative;
  }
  .topbar{
    display:flex; justify-content:space-between; align-items:flex-start;
    margin-bottom: 28px;
  }
  .topbar h1{
    font-family:'Fraunces',serif; font-size: 34px; font-weight:500;
    letter-spacing:-0.02em; line-height:1.1;
  }
  .topbar h1 em{font-style:italic; font-weight:400; color: var(--ink-2)}
  .topbar .breadcrumb{
    font-size: 11px; text-transform:uppercase; letter-spacing: .14em;
    color: var(--muted); margin-bottom: 6px;
    display:flex; align-items:center; gap:8px;
  }
  .topbar .breadcrumb::before{content:""; width:18px; height:1px; background:var(--ink-2)}
  .topbar-actions{display:flex; gap:10px; align-items:center}
  .btn{
    display:inline-flex; align-items:center; gap:7px;
    padding: 9px 14px; border-radius: 7px; cursor:pointer;
    font-family:inherit; font-size: 13px; font-weight: 500;
    border:1px solid var(--line-2); background: var(--paper);
    color: var(--ink); transition: all .12s;
  }
  .btn:hover{border-color: var(--ink); background: var(--bg-2)}
  .btn svg{width:14px; height:14px}
  .btn.solid{background: var(--ink); color: var(--paper); border-color: var(--ink)}
  .btn.solid:hover{background: var(--navy); border-color: var(--navy)}
  .btn.amber{background: var(--amber); color:#fff; border-color:var(--amber)}
  .btn.amber:hover{background: #b07514; border-color:#b07514}

  /* ============ KPI CARDS ============ */
  .kpi-grid{
    display:grid; grid-template-columns: repeat(4, 1fr);
    gap: 16px; margin-bottom: 28px;
  }
  .kpi{
    background: var(--paper);
    border:1px solid var(--line);
    border-radius: 12px; padding: 20px;
    position:relative; overflow:hidden;
  }
  .kpi-label{
    font-size: 11px; text-transform:uppercase; letter-spacing:.12em;
    color: var(--muted); margin-bottom: 14px;
  }
  .kpi-value{
    font-family:'Fraunces',serif; font-size: 38px;
    font-weight:500; letter-spacing:-0.02em; line-height:1;
  }
  .kpi-value .small{font-size: 18px; color: var(--muted); margin-left: 2px}
  .kpi-amount{
    font-family:'Fraunces',serif; font-size: 16px;
    font-weight:500; color: var(--amber);
    margin-top: 4px; letter-spacing: -0.01em;
  }
  .kpi-trend{
    display:flex; align-items:center; gap:6px;
    margin-top: 10px; font-size: 12px;
    color: var(--green); font-weight: 500;
  }
  .kpi-trend.down{color: var(--rust)}
  .kpi-trend svg{width:12px;height:12px}
  .kpi-mini-spark{
    position:absolute; right: 16px; top: 16px; opacity:.6;
  }

  /* ============ SECTIONS ============ */
  .section-grid{display:grid; gap: 16px; margin-bottom: 16px}
  .section-grid.cols-2{grid-template-columns: 2fr 1fr}
  .section-grid.cols-3{grid-template-columns: 1fr 1fr 1fr}
  .panel{
    background: var(--paper);
    border:1px solid var(--line);
    border-radius: 12px;
    padding: 20px;
  }
  .panel-header{
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom: 18px;
  }
  .panel-title{
    font-family:'Fraunces',serif; font-size: 19px;
    font-weight:600; letter-spacing:-0.01em;
  }
  .panel-sub{font-size: 12px; color: var(--muted); margin-top:2px}
  .chart-wrap{position:relative; height: 240px}
  .chart-wrap.tall{height: 280px}

  /* ============ TABLES ============ */
  .toolbar{
    display:flex; gap: 10px; margin-bottom: 16px;
    align-items:center; flex-wrap: wrap;
  }
  .search-input{
    flex:1; min-width: 200px;
    padding: 9px 14px 9px 36px;
    border:1px solid var(--line-2); border-radius: 7px;
    background: var(--paper) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f7480' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>") no-repeat 12px center;
    background-size: 14px;
    font-family:inherit; font-size: 13px;
  }
  .search-input:focus{outline:none; border-color: var(--ink)}
  .filter-select{
    padding: 9px 28px 9px 12px; border:1px solid var(--line-2);
    border-radius: 7px; background: var(--paper); font-family:inherit;
    font-size: 13px; cursor:pointer;
    appearance:none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f7480' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
  }
  .date-range{
    display:inline-flex; align-items:center; gap:6px;
    padding: 4px 10px;
    border:1px solid var(--line-2); border-radius:7px;
    background: var(--paper);
  }
  .date-range .dr-lbl{
    font-size: 11px; text-transform:uppercase; letter-spacing:.08em;
    color: var(--muted); padding-right: 4px; font-weight: 500;
  }
  .date-range .dr-sep{color: var(--muted); font-size: 13px}
  .date-input{
    padding: 4px 6px; border:none; background:transparent;
    font-family:inherit; font-size: 12px; color: var(--ink);
    width: 130px; cursor:pointer;
  }
  .date-input:focus{outline:none}
  .date-input::-webkit-calendar-picker-indicator{
    cursor:pointer; opacity:.6; filter: invert(.3);
  }
  table{
    width:100%; border-collapse: collapse;
    font-size: 13px;
  }
  th{
    text-align:left; padding: 10px 12px;
    font-size: 11px; text-transform:uppercase; letter-spacing:.1em;
    font-weight: 600; color: var(--muted);
    border-bottom: 1px solid var(--line);
    background: var(--bg);
  }
  th:first-child{border-top-left-radius: 7px}
  th:last-child{border-top-right-radius: 7px}
  td{
    padding: 12px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
  }
  tbody tr{transition: background .1s}
  tbody tr:hover{background: var(--bg)}
  td.cell-name{font-weight: 600; color: var(--ink)}
  td.cell-mono{font-family:'JetBrains Mono', monospace; font-size: 12px; color: var(--ink-2)}
  .pill{
    display:inline-flex; align-items:center; gap:5px;
    padding: 3px 9px; border-radius: 999px;
    font-size: 11px; font-weight: 500;
    border:1px solid;
  }
  .pill::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
  .pill.active{color: var(--green); border-color: rgba(74,107,58,.3); background: rgba(74,107,58,.08)}
  .pill.expired{color: var(--rust); border-color: rgba(160,67,35,.3); background: rgba(160,67,35,.08)}
  .pill.pending{color: var(--amber); border-color: rgba(200,134,29,.3); background: rgba(200,134,29,.08)}
  .pill.absent{color: var(--rust); border-color: rgba(160,67,35,.3); background: rgba(160,67,35,.08)}
  .pill.present{color: var(--green); border-color: rgba(74,107,58,.3); background: rgba(74,107,58,.08)}
  .pill.leave{color: var(--plum); border-color: rgba(107,58,92,.3); background: rgba(107,58,92,.08)}
  .pill.draft{color: var(--ink-2); border-color: var(--line-2); background: var(--bg-2)}
  .pill.paid{color: var(--green); border-color: rgba(74,107,58,.3); background: rgba(74,107,58,.08)}
  .pill.partial{color: var(--plum); border-color: rgba(107,58,92,.3); background: rgba(107,58,92,.08)}
  .pill.cancelled{color: var(--rust); border-color: rgba(160,67,35,.3); background: rgba(160,67,35,.08); text-decoration: line-through; opacity: .8}

  .pill-link{
    display:inline-flex; align-items:center;
    padding: 3px 9px; border-radius: 999px;
    font-size: 11px; font-weight: 500;
    color: var(--amber); border:1px solid rgba(200,134,29,.3);
    background: rgba(200,134,29,.1);
    cursor: pointer; font-family: inherit;
    transition: all .15s;
  }
  .pill-link::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor; margin-right:5px}
  .pill-link:hover{
    background: var(--amber); color: #fff;
    border-color: var(--amber);
  }
  .pill-link:hover::before{background: #fff}

  .icon-btn{
    width:30px; height:30px; border-radius:6px;
    background: transparent; border:1px solid transparent;
    cursor:pointer; display:inline-grid; place-items:center;
    color: var(--ink-2); transition: all .12s;
  }
  .icon-btn:hover{background: var(--bg-2); border-color: var(--line-2)}
  .icon-btn svg{width:14px; height:14px}
  .icon-btn.danger:hover{color: var(--rust); border-color: rgba(160,67,35,.3)}

  .pagination{
    display:flex; justify-content:space-between; align-items:center;
    padding-top: 14px; font-size: 12px; color: var(--muted);
  }
  .page-buttons{display:flex; gap:4px}
  .page-btn{
    min-width: 28px; height:28px; padding: 0 8px;
    border:1px solid var(--line-2); background: var(--paper);
    border-radius: 6px; cursor:pointer; font-family:inherit;
    font-size: 12px; color: var(--ink-2);
  }
  .page-btn.active{background: var(--ink); color: var(--paper); border-color: var(--ink)}
  .page-btn:not(.active):hover{background: var(--bg-2)}
  .page-btn:disabled{opacity:.4; cursor:not-allowed}

  /* ============ MODAL ============ */
  .modal-overlay{
    position:fixed; inset:0; z-index:100;
    background: rgba(20,23,28,.45);
    backdrop-filter: blur(4px);
    display:none; align-items:center; justify-content:center;
    padding: 20px;
  }
  .modal-overlay.active{display:flex}
  .modal{
    background: var(--paper);
    border-radius: 14px; max-width: 560px; width:100%;
    max-height: 90vh; overflow:hidden;
    display:flex; flex-direction:column;
    border:1px solid var(--line);
    box-shadow: 0 25px 60px -10px rgba(20,23,28,.3);
    animation: modalIn .25s ease;
  }
  .modal.wide{max-width: 880px}
  @keyframes modalIn{from{opacity:0; transform: translateY(10px) scale(.98)} to{opacity:1; transform:none}}
  .modal-header{
    padding: 22px 24px 16px;
    border-bottom: 1px solid var(--line);
    display:flex; justify-content:space-between; align-items:flex-start;
  }
  .modal-header h3{
    font-family:'Fraunces',serif; font-size: 22px;
    font-weight:500; letter-spacing:-0.01em;
  }
  .modal-header p{font-size:12px; color:var(--muted); margin-top:3px}
  .modal-close{
    background:transparent; border:none; cursor:pointer;
    width:30px; height:30px; border-radius:6px;
    display:grid; place-items:center; color: var(--ink-2);
  }
  .modal-close:hover{background: var(--bg-2)}
  .btn.back-pill{
    padding: 6px 11px;
    font-size: 11px;
    height: 30px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--ink-2);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
  }
  .btn.back-pill svg{width: 13px; height: 13px; opacity: .8}
  .btn.back-pill:hover{background: var(--bg-2); color: var(--ink); border-color: var(--ink-2)}
  .btn.back-pill:hover svg{opacity: 1}
  .modal-body{padding: 22px 24px; overflow-y:auto; flex:1}
  .modal-foot{
    padding: 16px 24px; border-top: 1px solid var(--line);
    display:flex; justify-content:flex-end; gap: 10px;
    background: var(--bg);
  }
  .form-row{display:grid; grid-template-columns: 1fr 1fr; gap: 12px}
  .form-row.cols-3{grid-template-columns: 80px 1fr 1fr}
  .form-input.error{border-color: var(--rust)}
  .err-msg{font-size: 11px; color: var(--rust); margin-top: 4px; display:none}
  .err-msg.show{display:block}

  /* ============ ATTENDANCE GRID ============ */
  .attendance-grid{
    display:grid; grid-template-columns: 200px repeat(7, 1fr);
    gap: 4px; margin-top: 12px;
  }
  .att-cell{
    padding: 10px 8px; text-align:center; border-radius: 6px;
    background: var(--bg-2); font-size: 12px; font-weight:500;
    cursor:pointer; transition: transform .1s;
    position:relative;
  }
  .att-cell.head{background: transparent; color: var(--muted); font-size: 11px; text-transform:uppercase; letter-spacing:.08em}
  .att-cell.name-cell{background: transparent; text-align:left; font-weight:600; padding: 10px 4px; color: var(--ink)}
  .att-cell.name-cell .role{font-size:11px; font-weight:400; color: var(--muted); margin-top:2px}
  .att-cell.P{background: rgba(74,107,58,.18); color: var(--green)}
  .att-cell.A{background: rgba(160,67,35,.15); color: var(--rust)}
  .att-cell.L{background: rgba(107,58,92,.15); color: var(--plum)}
  .att-cell.W{background: var(--bg); color: var(--muted); cursor:default}
  .att-cell.with-hours{
    background: rgba(200,134,29,.14); color: var(--amber);
    font-family: 'Fraunces', serif; font-size: 14px; font-weight: 600;
    letter-spacing: -0.01em;
  }
  .att-cell:not(.head):not(.name-cell):not(.W):hover{transform: scale(1.05)}

  /* ============ MONTHLY ATTENDANCE GRID ============ */
  .m-att-wrap{
    margin-top: 12px;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
  }
  .m-att-grid{
    display: grid;
    gap: 1px;
    background: var(--line);
    min-width: 100%;
  }
  .m-att-name-head, .m-att-tot-head, .m-att-day-head{
    background: var(--bg-2);
    padding: 8px 6px;
    text-align: center;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
    font-weight: 600;
    position: sticky; top: 0;
    z-index: 2;
  }
  .m-att-name-head{
    text-align: left;
    padding-left: 14px;
    position: sticky; left: 0;
    z-index: 3;
  }
  .m-att-day-head{
    display: flex; flex-direction: column;
    align-items: center; gap: 2px;
    padding: 6px 2px;
    line-height: 1;
  }
  .m-att-day-head.wk{background: rgba(20,23,28,0.04)}
  .m-att-day-head .m-day-num{
    font-family: 'Fraunces', serif;
    font-size: 13px; font-weight: 500;
    color: var(--ink); letter-spacing: -0.02em;
  }
  .m-att-day-head .m-day-letter{
    font-size: 9px;
    color: var(--muted);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
  }
  .m-att-name{
    background: var(--paper);
    padding: 8px 12px;
    display: flex; flex-direction: column;
    justify-content: center;
    position: sticky; left: 0;
    z-index: 1;
    border-right: 1px solid var(--line);
  }
  .m-att-name-main{
    font-size: 12px; font-weight: 600;
    color: var(--ink);
    line-height: 1.2;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .m-att-name-sub{
    font-size: 10px;
    color: var(--muted);
    margin-top: 2px;
    line-height: 1.2;
  }
  .m-att-cell{
    background: var(--bg-2);
    aspect-ratio: 1;
    min-height: 32px;
    max-height: 38px;
    display: grid; place-items: center;
    font-size: 11px; font-weight: 600;
    color: var(--muted);
    cursor: default;
    transition: transform .1s;
    overflow: hidden;
  }
  .m-att-cell:not(.W):hover{transform: scale(1.15); z-index: 2; border-radius: 4px}
  .m-att-cell.P{background: rgba(74,107,58,.18); color: var(--green)}
  .m-att-cell.A{background: rgba(160,67,35,.15); color: var(--rust)}
  .m-att-cell.L{background: rgba(107,58,92,.15); color: var(--plum)}
  .m-att-cell.W{background: var(--bg); color: var(--muted)}
  .m-att-cell.with-hours{
    background: rgba(200,134,29,.16);
    color: var(--amber);
    font-family: 'Fraunces', serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: -0.01em;
  }
  .m-att-tot{
    background: var(--bg);
    padding: 6px 8px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    border-left: 1px solid var(--line);
    text-align: center;
  }
  .m-att-tot strong{
    font-family: 'Fraunces', serif;
    font-size: 14px; font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
    line-height: 1;
  }
  .m-att-tot .m-att-tot-sub{
    font-size: 9px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-top: 3px;
    font-weight: 500;
  }

  /* ============ PACKAGE CARDS ============ */
  .package-grid{
    display:grid; grid-template-columns: repeat(3, 1fr);
    gap: 16px; margin-top: 8px;
  }
  .pkg-card{
    background: var(--paper); border:1px solid var(--line);
    border-radius: 12px; padding: 24px;
    position:relative; overflow:hidden;
    transition: all .2s;
  }
  .pkg-card:hover{border-color: var(--ink-2); transform: translateY(-2px)}
  .pkg-card.featured{
    background: var(--ink); color: var(--paper);
    border-color: var(--ink);
  }
  .pkg-card.featured .pkg-feature, .pkg-card.featured .pkg-name{color: var(--paper)}
  .pkg-badge{
    position:absolute; top:14px; right:14px;
    font-size: 10px; text-transform:uppercase; letter-spacing:.1em;
    background: var(--amber); color:#fff; padding: 3px 8px;
    border-radius: 999px; font-weight:600;
  }
  .pkg-name{
    font-family:'Fraunces',serif; font-size: 22px;
    font-weight:600; letter-spacing:-0.01em; margin-bottom: 4px;
  }
  .pkg-tag{font-size: 12px; color: var(--muted); margin-bottom: 18px}
  .pkg-card.featured .pkg-tag{color: rgba(253,251,246,.6)}
  .pkg-price{
    font-family:'Fraunces',serif; font-size: 42px;
    font-weight:500; letter-spacing:-0.02em; line-height:1;
    margin-bottom: 18px;
  }
  .pkg-price .per{font-size: 14px; color: var(--muted); font-family:'Inter Tight',sans-serif; font-weight:400; margin-left: 4px}
  .pkg-card.featured .pkg-price .per{color: rgba(253,251,246,.6)}
  .pkg-features{list-style:none; margin-bottom: 22px}
  .pkg-feature{
    padding: 6px 0; font-size: 13px;
    display:flex; align-items:center; gap: 8px;
    color: var(--ink-2);
    border-bottom: 1px dashed var(--line);
  }
  .pkg-card.featured .pkg-feature{border-color: rgba(255,255,255,.1)}
  .pkg-feature:last-child{border:none}
  .pkg-feature svg{width: 14px; height:14px; color: var(--green); flex-shrink:0}
  .pkg-card.featured .pkg-feature svg{color: var(--amber-soft)}
  .pkg-card .btn{width:100%; justify-content:center}
  .pkg-card.featured .btn{background: var(--amber); color: #fff; border-color: var(--amber)}
  .pkg-feature .extra{color: var(--amber); font-size: 11px; font-weight:500; margin-left:auto}
  .pkg-card.featured .pkg-feature .extra{color: var(--amber-soft)}

  /* Billing toggle */
  .billing-toggle{
    display:inline-flex; padding: 3px;
    background: var(--bg-2); border-radius: 999px;
    border:1px solid var(--line);
  }
  .bt-opt{
    padding: 7px 14px; border:none; background:transparent;
    border-radius: 999px; cursor:pointer;
    font-family:inherit; font-size: 12px; font-weight:500;
    color: var(--ink-2); transition: all .15s;
    white-space: nowrap;
  }
  .bt-opt.active{background: var(--ink); color: var(--paper); box-shadow: 0 1px 3px rgba(0,0,0,.15)}

  /* Package modal limit rows */
  .lim-section-title{
    font-size:11px; text-transform:uppercase; letter-spacing:.12em;
    color: var(--ink-2); font-weight: 600; margin: 16px 0 4px;
  }
  .lim-help{font-size: 11px; color: var(--muted); margin-bottom: 12px}
  .limit-row{
    display:grid; grid-template-columns: 110px 1fr;
    gap: 12px; align-items:center;
    padding: 10px 0; border-top: 1px solid var(--line);
  }
  .limit-row:last-of-type{border-bottom: 1px solid var(--line)}
  .limit-label{font-size: 13px; font-weight: 600; color: var(--ink)}
  .limit-fields{
    display:grid; grid-template-columns: 110px 1fr 1fr;
    gap: 8px; align-items:center;
  }
  .ck-wrap{
    display:flex; align-items:center; gap:6px;
    font-size: 12px; cursor:pointer; color: var(--ink-2);
    user-select:none;
  }
  .ck-wrap input{cursor:pointer; accent-color: var(--ink)}
  .pkg-lim{font-size: 13px; padding: 8px 10px}
  .pkg-lim:disabled{opacity:.5; background: var(--bg-2); cursor:not-allowed}

  /* Site Owner modal — sectioned layout */
  .ow-section{
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 14px;
    background: var(--paper);
  }
  .ow-section:last-child{margin-bottom: 0}
  .ow-section-head{
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
  }
  .ow-section-icon{font-size: 16px; line-height: 1}
  .ow-section-title{
    font-family: 'Fraunces', serif;
    font-size: 15px; font-weight: 600;
    letter-spacing: -0.01em; color: var(--ink);
  }
  .ow-section-hint{
    margin-left: auto;
    font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.1em; color: var(--muted);
    font-weight: 500;
  }

  .ow-empty{
    padding: 14px 16px; background: var(--bg);
    border: 1px dashed var(--line-2); border-radius: 8px;
    font-size: 12px; color: var(--muted); text-align: center;
    margin-bottom: 8px;
  }

  .ow-channel-row{
    display: grid;
    grid-template-columns: 22px 28px 130px minmax(160px, 1.4fr) minmax(140px, 1fr) auto 36px;
    gap: 8px; align-items: center;
    padding: 8px;
    margin-bottom: 8px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 8px;
    transition: box-shadow .15s, transform .15s, opacity .15s;
  }
  .ow-channel-row.dragging{
    opacity: 0.4;
    box-shadow: 0 4px 14px rgba(20,23,28,.12);
  }
  .ow-channel-row.drag-over{
    box-shadow: 0 0 0 2px var(--amber);
  }
  .ow-drag-handle{
    cursor: grab;
    display: grid; place-items: center;
    width: 22px; height: 28px;
    color: var(--muted);
    border-radius: 4px;
    transition: all .12s;
    flex-shrink: 0;
  }
  .ow-drag-handle:hover{color: var(--ink); background: var(--paper)}
  .ow-drag-handle:active{cursor: grabbing}
  .ow-drag-handle svg{width: 14px; height: 14px}
  .ow-priority-badge{
    display: grid; place-items: center;
    width: 28px; height: 28px;
    background: var(--ink); color: var(--paper);
    border-radius: 50%;
    font-family: 'Fraunces', serif; font-size: 13px;
    font-weight: 600; line-height: 1;
    flex-shrink: 0;
  }
  .ow-priority-badge.p1{background: var(--green)}
  .ow-priority-badge.p2{background: var(--amber)}
  .ow-priority-badge.p3{background: var(--navy)}
  .ow-ch-type{font-size: 12px}
  .ow-channel-row .form-input{font-size: 12px; padding: 8px 10px}
  .ow-escalation-hint{
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 10px;
    padding: 8px 12px;
    background: rgba(200, 134, 29, .08);
    border-left: 3px solid var(--amber);
    border-radius: 4px;
    font-size: 12px; color: var(--ink-2);
  }
  .ow-escalation-hint svg{width: 14px; height: 14px; flex-shrink: 0; color: var(--amber)}
  .ow-escalation-hint strong{color: var(--ink)}

  /* ============ COMMUNICATION CHANNEL GROUPS ============ */
  .ow-channel-group{
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 10px;
    margin-bottom: 10px;
    transition: box-shadow .15s, transform .15s, opacity .15s, border-color .2s;
    overflow: hidden;
  }
  .ow-channel-group.preferred{
    border-color: var(--green);
    box-shadow: 0 0 0 1px var(--green) inset;
  }
  .ow-channel-group.dragging{opacity: 0.4; box-shadow: 0 4px 14px rgba(20,23,28,.12)}
  .ow-channel-group.drag-over{box-shadow: 0 0 0 2px var(--amber)}

  .ow-channel-group-head{
    display: flex; align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
  }
  .ow-channel-group.preferred .ow-channel-group-head{
    background: rgba(74,107,58,.04);
  }
  .ow-group-label-wrap{flex: 1; min-width: 0}
  .ow-group-label{
    font-family: 'Fraunces', serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
    line-height: 1.2;
  }
  .ow-group-meta{
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
  }

  .ow-channel-group-body{
    padding: 8px 12px;
    display: flex; flex-direction: column;
    gap: 6px;
  }
  .ow-group-channel{
    display: flex; align-items: center;
    gap: 10px;
    padding: 7px 10px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 12px;
  }
  .ow-group-channel .grp-ch-type{
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
    font-weight: 600;
    min-width: 70px;
  }
  .ow-group-channel .grp-ch-value{
    flex: 1; min-width: 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .grp-ch-icon{
    display: grid; place-items: center;
    width: 26px; height: 26px;
    border-radius: 6px;
    font-size: 13px;
    flex-shrink: 0;
  }
  .grp-ch-icon.mobile, .grp-ch-icon.whatsapp{background: rgba(74,107,58,.1)}
  .grp-ch-icon.email{background: rgba(20,40,80,.08)}
  .grp-ch-icon.landline{background: rgba(107,58,92,.1)}

  .grp-ch-remove{
    border: none; background: transparent;
    width: 22px; height: 22px;
    border-radius: 4px;
    color: var(--muted);
    cursor: pointer;
    display: grid; place-items: center;
    transition: all .12s;
    font-family: inherit;
  }
  .grp-ch-remove svg{width: 12px; height: 12px}
  .grp-ch-remove:hover{
    background: rgba(160,67,35,.1);
    color: var(--rust);
  }

  /* Add-group sub-modal channel rows */
  .grp-channel-row{
    display: flex; align-items: flex-end;
    gap: 12px;
    margin-bottom: 12px;
  }
  .grp-channel-row .grp-channel-icon{
    width: 36px; height: 36px;
    border-radius: 8px;
    display: grid; place-items: center;
    font-size: 16px;
    flex-shrink: 0;
    margin-bottom: 4px;
  }

  /* Emergency contact rows in worker modal */
  .emrg-row{
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 8px;
  }
  .emrg-row-head{
    display: grid;
    grid-template-columns: 28px 130px 1fr 200px 36px;
    gap: 8px; align-items: center;
    margin-bottom: 8px;
  }
  .emrg-row-body{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
  }
  .emrg-num{
    display: grid; place-items: center;
    width: 26px; height: 26px;
    background: var(--rust); color: #fff;
    border-radius: 50%;
    font-family: 'Fraunces', serif; font-size: 12px;
    font-weight: 600; flex-shrink: 0;
  }
  .emrg-row .form-input{font-size: 12px; padding: 8px 10px}
  @media (max-width: 768px){
    .emrg-row-head{grid-template-columns: 28px 1fr 36px}
    .emrg-row-head select, .emrg-row-head input[id*="-rel-"]{grid-column: 1 / -1}
    .emrg-row-body{grid-template-columns: 1fr}
  }

  /* Docs table inside worker modal / manage docs modal */
  .docs-table{
    width: 100%; border-collapse: collapse;
    font-size: 13px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
  }
  .docs-table th{
    text-align: left; padding: 8px 10px;
    font-size: 10px; text-transform: uppercase; letter-spacing: .1em;
    color: var(--muted); font-weight: 600;
    background: var(--bg-2);
    border-bottom: 1px solid var(--line);
  }
  .docs-table td{
    padding: 10px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
  }
  .docs-table tr:last-child td{border-bottom: none}
  .docs-table .form-input{padding: 7px 9px; font-size: 12px}

  /* Clickable worker count cell on sites list */
  /* Clickable hours/days metric in attendance modal */
  .metric-link{
    display: inline-flex; flex-direction: column; align-items: flex-end;
    padding: 6px 10px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    transition: all .15s;
    line-height: 1.1;
  }
  .metric-link:hover{
    background: var(--bg);
    border-color: var(--line-2);
  }
  .metric-link .metric-num{
    font-family: 'Fraunces', serif;
    font-size: 15px; font-weight: 500;
    color: var(--ink);
    border-bottom: 1px dashed var(--line-2);
    padding-bottom: 1px;
  }
  .metric-link:hover .metric-num{
    border-bottom-color: var(--ink);
    border-bottom-style: solid;
  }
  .metric-link .metric-lbl{
    font-size: 10px; color: var(--muted);
    text-transform: uppercase; letter-spacing: .06em;
    margin-top: 2px;
  }

  /* Calendar-style monthly attendance grid (per-worker drill-down) */
  .month-att-grid{
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-top: 12px;
  }
  .month-att-day-head{
    font-size: 10px; text-transform: uppercase;
    letter-spacing: .1em; color: var(--muted);
    text-align: center; padding: 6px 0;
    font-weight: 600;
  }
  .month-att-cell{
    aspect-ratio: 1;
    min-height: 52px;
    border-radius: 6px;
    background: var(--bg-2);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 4px;
    position: relative;
  }
  .month-att-cell .day-num{
    position: absolute; top: 4px; left: 6px;
    font-size: 9px; color: var(--muted);
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
  }
  .month-att-cell.empty{background: transparent}
  .month-att-cell.P{
    background: rgba(74,107,58,.18);
    color: var(--green); font-weight: 600;
    font-size: 13px;
  }
  .month-att-cell.P.with-hours{
    background: rgba(200,134,29,.16);
    color: var(--amber);
    font-family: 'Fraunces', serif;
    font-size: 14px;
  }
  .month-att-cell.A{
    background: rgba(160,67,35,.15);
    color: var(--rust); font-weight: 600;
    font-size: 13px;
  }
  .month-att-cell.L{
    background: rgba(107,58,92,.15);
    color: var(--plum); font-weight: 600;
    font-size: 13px;
  }
  .month-att-cell.W{
    background: var(--bg);
    color: var(--muted);
    font-size: 10px;
  }

  /* ============ LABOR — MY PROFILE ============ */
  .profile-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }
  .profile-row{
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--line);
    align-items: baseline;
  }
  .profile-row:last-child{border-bottom: none}
  .profile-label{
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
    font-weight: 600;
  }
  .profile-val{
    font-size: 13px;
    color: var(--ink);
    line-height: 1.4;
  }

  /* Emergency contact cards on profile */
  .emergency-list{display: grid; gap: 8px}
  .emergency-card{
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 10px;
  }
  .emergency-card-num{
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--rust); color: #fff;
    display: grid; place-items: center;
    font-family: 'Fraunces', serif;
    font-size: 13px; font-weight: 600;
    flex-shrink: 0;
  }
  .emergency-card-body{flex: 1; min-width: 0}
  .emergency-card-head{
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 4px; flex-wrap: wrap;
  }
  .emergency-card-contacts{
    display: flex; flex-wrap: wrap; gap: 14px;
    color: var(--ink-2);
  }

  /* Approval review modal — diff display */
  .approval-diff-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-bottom: 10px;
  }
  .approval-diff-cell{
    padding: 10px 12px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 8px;
  }
  .approval-diff-label{
    font-size: 10px; text-transform: uppercase;
    letter-spacing: .1em; color: var(--muted);
    font-weight: 600; margin-bottom: 4px;
  }
  .approval-diff-value{
    font-size: 13px; color: var(--ink); font-weight: 500;
  }
  .approval-diff-table{
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
  }
  .approval-diff-row{
    display: grid;
    grid-template-columns: 130px 1fr 24px 1fr;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    align-items: center;
  }
  .approval-diff-row:last-child{border-bottom: none}
  .approval-diff-key{
    font-size: 11px; text-transform: uppercase;
    letter-spacing: .08em; color: var(--muted);
    font-weight: 600;
  }
  .approval-diff-old{
    font-size: 12px; color: var(--ink-2);
    text-decoration: line-through;
    text-decoration-color: rgba(160,67,35,.4);
  }
  .approval-diff-arrow{
    color: var(--muted); font-size: 13px;
    text-align: center; font-weight: 600;
  }
  .approval-diff-new{
    font-size: 12px; color: var(--green); font-weight: 600;
  }
  @media (max-width: 768px){
    .approval-diff-row{grid-template-columns: 1fr; gap: 4px}
    .approval-diff-arrow{text-align: left}
  }

  /* ============ INVOICE STATUS PILL (sites list) ============ */
  .inv-pill{
    display: inline-flex; align-items: center;
    gap: 8px;
    padding: 6px 8px 6px 10px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: all .15s;
    min-width: 130px;
    max-width: 180px;
  }
  .inv-pill:hover{
    background: var(--bg);
    border-color: var(--ink-2);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(20,23,28,.05);
  }
  .inv-pill .inv-dot{
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .inv-pill .inv-pill-text{flex: 1; min-width: 0; line-height: 1.2}
  .inv-pill .inv-pill-status{
    font-size: 12px; font-weight: 600;
    letter-spacing: -0.01em;
  }
  .inv-pill .inv-pill-sub{
    font-size: 10px; color: var(--muted);
    margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0;
  }
  .inv-pill .inv-pill-chev{
    color: var(--muted);
    flex-shrink: 0;
    opacity: .5;
    transition: opacity .15s, transform .15s;
  }
  .inv-pill:hover .inv-pill-chev{opacity: 1; transform: translateX(2px)}

  /* Tone variants */
  .inv-pill.green .inv-pill-status{color: var(--green)}
  .inv-pill.green .inv-dot{background: var(--green); box-shadow: 0 0 0 2px rgba(74,107,58,.2)}
  .inv-pill.green:hover{background: rgba(74,107,58,.04); border-color: var(--green)}

  .inv-pill.amber .inv-pill-status{color: var(--amber)}
  .inv-pill.amber .inv-dot{background: var(--amber); box-shadow: 0 0 0 2px rgba(200,134,29,.2)}
  .inv-pill.amber:hover{background: rgba(200,134,29,.04); border-color: var(--amber)}

  .inv-pill.plum .inv-pill-status{color: var(--plum)}
  .inv-pill.plum .inv-dot{background: var(--plum); box-shadow: 0 0 0 2px rgba(107,58,92,.2)}
  .inv-pill.plum:hover{background: rgba(107,58,92,.04); border-color: var(--plum)}

  .inv-pill.rust .inv-pill-status{color: var(--rust)}
  .inv-pill.rust .inv-dot{background: var(--rust); box-shadow: 0 0 0 2px rgba(160,67,35,.2)}
  .inv-pill.rust:hover{background: rgba(160,67,35,.04); border-color: var(--rust)}

  /* ============ Invoice history modal status badges ============ */
  .inv-status-badge{
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px; font-weight: 600;
    letter-spacing: -0.01em;
    border: 1px solid;
    white-space: nowrap;
  }
  .inv-status-badge.green{background: rgba(74,107,58,.1); color: var(--green); border-color: rgba(74,107,58,.3)}
  .inv-status-badge.amber{background: rgba(200,134,29,.1); color: var(--amber); border-color: rgba(200,134,29,.3)}
  .inv-status-badge.plum{background: rgba(107,58,92,.1); color: var(--plum); border-color: rgba(107,58,92,.3)}
  .inv-status-badge.rust{background: rgba(160,67,35,.1); color: var(--rust); border-color: rgba(160,67,35,.3)}
  .inv-status-badge.gray{background: var(--bg-2); color: var(--muted); border-color: var(--line-2)}
  .inv-status-badge .dot{width: 6px; height: 6px; border-radius: 50%; background: currentColor}

  .worker-count-btn{
    display: inline-flex; align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid rgba(20,23,28,.18);
    background: var(--paper);
    font-family: 'Fraunces', serif;
    font-size: 14px; font-weight: 500;
    color: var(--ink);
    cursor: pointer;
    transition: all .15s;
  }
  .worker-count-btn:hover{
    background: var(--ink); color: var(--paper);
    border-color: var(--ink);
  }
  .worker-count-btn svg{opacity: .55}
  .worker-count-btn:hover svg{opacity: 1}

  /* Supply rate cards (per category) */
  .sr-card{
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 10px;
  }
  .sr-card-head{
    display: grid;
    grid-template-columns: 1fr auto 36px;
    gap: 10px; align-items: center;
    margin-bottom: 12px;
  }
  .sr-card .sr-name{font-size: 13px; font-weight: 500}
  .sr-card .sr-term .seg-opt{padding: 6px 12px; font-size: 12px}
  .sr-card-body{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .sr-card-body .form-group{margin-bottom: 0}
  @media (max-width: 768px){
    .sr-card-head{grid-template-columns: 1fr 36px; gap: 8px}
    .sr-card-head .sr-term{grid-column: 1 / 2}
    .sr-card-body{grid-template-columns: 1fr}
  }

  /* ============ SHIFT CARDS (per-site shifts modal) ============ */
  .shift-card{
    display: flex; align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 10px;
    margin-bottom: 10px;
  }
  .shift-card-num{
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--amber); color: #fff;
    display: grid; place-items: center;
    font-family: 'Fraunces', serif;
    font-size: 14px; font-weight: 600;
    flex-shrink: 0;
  }
  .shift-card-fields{
    flex: 1; min-width: 0;
    display: grid;
    grid-template-columns: minmax(160px, 1.6fr) 130px 130px minmax(170px, 1fr);
    gap: 12px;
    align-items: end;
  }
  .shift-card-fields .form-input{font-size: 12px; padding: 8px 10px}
  .shift-card-fields .form-group label{font-size: 10px}
  .shift-name-input{font-weight: 500}
  .shift-meta{
    padding: 8px 12px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 8px;
    text-align: right;
    line-height: 1.2;
    align-self: stretch;
    display: flex; flex-direction: column;
    justify-content: center;
  }
  .shift-meta-row{
    display: flex; align-items: center; justify-content: flex-end;
    gap: 6px; flex-wrap: wrap;
  }
  .shift-meta-time{
    font-family: 'Fraunces', serif;
    font-size: 13px; font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.01em;
  }
  .shift-meta-dur{
    font-size: 11px;
    color: var(--amber);
    font-weight: 600;
    margin-top: 2px;
  }
  @media (max-width: 768px){
    .shift-card-fields{grid-template-columns: 1fr 1fr; gap: 8px}
    .shift-meta{grid-column: 1 / -1}
  }

  /* Skill-wise count cards on Site Workers modal */
  .skill-count-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
  }
  .skill-count-card{
    padding: 10px 12px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 8px;
  }
  .skill-count-num{
    font-family: 'Fraunces', serif;
    font-size: 24px; font-weight: 500;
    line-height: 1; letter-spacing: -0.01em;
    color: var(--amber);
  }
  .skill-count-name{
    font-size: 12px; font-weight: 600;
    color: var(--ink); margin-top: 4px;
  }
  .skill-count-pct{
    font-size: 10px; color: var(--muted);
    text-transform: uppercase; letter-spacing: .08em;
    margin-top: 3px;
  }

  /* Master row enabled/disabled toggle */
  .master-status-toggle{
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 8px 4px 4px;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    background: var(--paper);
    cursor: pointer;
    font-family: inherit; font-size: 11px;
    color: var(--muted); font-weight: 500;
    white-space: nowrap;
    transition: all 0.15s;
  }
  .master-status-toggle:hover{border-color: var(--ink-2)}
  .master-status-toggle .knob{
    width: 26px; height: 14px;
    background: var(--line-2);
    border-radius: 999px; position: relative;
    transition: background 0.18s;
    flex-shrink: 0;
  }
  .master-status-toggle .knob::before{
    content:'';
    position: absolute; top: 2px; left: 2px;
    width: 10px; height: 10px;
    background: #fff; border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    transition: transform 0.18s;
  }
  .master-status-toggle.on{
    color: var(--green);
    border-color: rgba(74,107,58,0.4);
    background: rgba(74,107,58,0.06);
  }
  .master-status-toggle.on .knob{background: var(--green)}
  .master-status-toggle.on .knob::before{transform: translateX(12px)}
  /* Disabled rows in master tables */
  .master-row-off{opacity: .5}
  .master-row-off .cell-name{text-decoration: line-through; text-decoration-color: var(--muted)}

  /* Segmented toggle (Hourly / Monthly) */
  .seg-toggle{
    display: inline-flex;
    background: var(--bg-2);
    border: 1px solid var(--line-2);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
  }
  .seg-toggle .seg-opt{
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px;
    border: none; background: transparent;
    font-family: inherit; font-size: 13px; font-weight: 500;
    color: var(--ink-2);
    border-radius: 6px;
    cursor: pointer;
    transition: all .15s;
  }
  .seg-toggle .seg-opt svg{width: 14px; height: 14px}
  .seg-toggle .seg-opt:hover{color: var(--ink)}
  .seg-toggle .seg-opt.active{
    background: var(--paper);
    color: var(--ink);
    box-shadow: 0 1px 3px rgba(20,23,28,.08);
    font-weight: 600;
  }

  /* Weekly day picker chips */
  .day-picker{
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 4px 0;
  }
  .day-chip{
    padding: 7px 14px;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    background: var(--paper);
    font-family: inherit; font-size: 12px;
    color: var(--ink-2); font-weight: 500;
    cursor: pointer;
    transition: all .12s;
    text-transform: uppercase;
    letter-spacing: .05em;
    min-width: 56px; text-align: center;
  }
  .day-chip:hover{border-color: var(--ink-2); color: var(--ink)}
  .day-chip.active{
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
    font-weight: 600;
  }

  /* Site cards grid (visual site picker) */
  .site-card-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
  }
  .site-card{
    position: relative;
    padding: 14px;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
    cursor: pointer;
    transition: all .15s;
    overflow: hidden;
  }
  .site-card:hover{
    border-color: var(--ink);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(20,23,28,.08);
  }
  .site-card.active{
    border-color: var(--green);
    background: rgba(74,107,58,.04);
  }
  .site-card.active::before{
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px; background: var(--green);
  }
  .site-card.paused{opacity: .65}
  .site-card.paused::after{
    content: 'PAUSED';
    position: absolute; top: 12px; right: 12px;
    font-size: 9px; letter-spacing: .12em;
    color: var(--muted);
    font-weight: 700;
  }
  .site-card-current{
    position: absolute; top: 0; right: 0;
    background: var(--green); color: #fff;
    font-size: 10px; font-weight: 600;
    padding: 3px 10px 3px 8px;
    border-radius: 0 8px 0 6px;
    text-transform: uppercase; letter-spacing: .06em;
    display: inline-flex; align-items: center; gap: 4px;
  }
  .site-card-current svg{width: 10px; height: 10px}
  .site-card-head{
    display: flex; align-items: flex-start; gap: 10px;
    margin-bottom: 8px;
  }
  .site-card-icon{
    width: 36px; height: 36px;
    border-radius: 8px;
    display: grid; place-items: center;
    flex-shrink: 0;
  }
  .site-card-icon svg{width: 17px; height: 17px}
  .site-card-title{
    font-family: 'Fraunces', serif; font-size: 15px;
    font-weight: 600; letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .site-card-owner{
    font-size: 11px; color: var(--muted);
    margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .site-card-addr{
    font-size: 11px; color: var(--ink-2);
    line-height: 1.45;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 32px;
  }
  .site-card-sup{
    font-size: 11px; color: var(--ink-2);
    margin-bottom: 10px;
    padding: 5px 8px;
    background: var(--bg);
    border-radius: 4px;
  }
  .site-card-stats{
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
  }
  .site-card-stat-num{
    font-family: 'Fraunces', serif; font-size: 22px;
    font-weight: 500; line-height: 1; letter-spacing: -0.01em;
    color: var(--ink);
  }
  .site-card-stat-lbl{
    font-size: 10px; color: var(--muted);
    text-transform: uppercase; letter-spacing: .08em;
    font-weight: 500;
    margin-top: 3px;
  }

  /* Preferred-for-notifications toggle (iOS-style switch) */
  .ow-pref-toggle{
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 10px 5px 5px;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    background: var(--paper);
    cursor: pointer;
    font-family: inherit; font-size: 11px;
    color: var(--muted); font-weight: 500;
    white-space: nowrap;
    transition: all 0.15s;
  }
  .ow-pref-toggle:hover{border-color: var(--ink-2)}
  .ow-pref-toggle .ow-pref-knob{
    width: 28px; height: 16px;
    background: var(--line-2);
    border-radius: 999px;
    position: relative;
    transition: background 0.18s;
    flex-shrink: 0;
  }
  .ow-pref-toggle .ow-pref-knob::before{
    content: '';
    position: absolute; top: 2px; left: 2px;
    width: 12px; height: 12px;
    background: #fff; border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    transition: transform 0.18s;
  }
  .ow-pref-toggle.on{
    color: var(--green);
    border-color: rgba(74,107,58,0.4);
    background: rgba(74,107,58,0.06);
  }
  .ow-pref-toggle.on .ow-pref-knob{background: var(--green)}
  .ow-pref-toggle.on .ow-pref-knob::before{transform: translateX(12px)}

  @media (max-width: 768px){
    .ow-channel-row{
      grid-template-columns: 22px 28px 1fr 36px;
      gap: 6px;
    }
    .ow-channel-row .ow-ch-type,
    .ow-channel-row .form-input,
    .ow-channel-row .ow-pref-toggle{grid-column: 3 / span 1; width: 100%; justify-content: flex-start}
    .ow-channel-row .icon-btn{grid-column: 4; grid-row: 1; align-self: start}
  }

  /* Pricing pair (limit + overage) */
  .price-pair{
    display:grid; grid-template-columns: 1fr 130px;
    gap: 8px; margin-bottom: 4px;
  }
  .price-pair .form-input{font-size: 13px; padding: 9px 12px}
  .price-help{font-size: 11px; color: var(--muted); margin-bottom: 12px}

  /* Country-code phone field */
  .phone-wrap{
    display:grid; grid-template-columns: 130px 1fr;
    gap: 8px; position:relative;
  }
  .cc-trigger{
    display:flex; align-items:center; gap:6px;
    padding: 11px 12px;
    border:1px solid var(--line-2); border-radius:8px;
    background: var(--paper); cursor:pointer;
    font-family:inherit; font-size: 13px;
    user-select: none; white-space:nowrap;
    transition: border-color .12s;
  }
  .cc-trigger:hover{border-color: var(--ink-2)}
  .cc-trigger.open{border-color: var(--ink); box-shadow: 0 0 0 3px rgba(20,23,28,.06)}
  .cc-trigger .iso-badge{
    display:inline-flex; align-items:center; justify-content:center;
    min-width: 26px; height: 18px; padding: 0 5px;
    background: var(--navy); color: #fff;
    border-radius: 3px; font-size: 10px; font-weight: 700;
    letter-spacing: .04em; font-family:'JetBrains Mono', monospace;
  }
  .cc-trigger .flag-img{ width:22px; height:15px; object-fit:cover; border-radius:2px; flex-shrink:0; }
  .cc-trigger .ccode{font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--ink-2); font-weight: 500}
  .cc-trigger .arrow{margin-left:auto; opacity:.5; font-size:10px}
  .cc-dropdown{
    position:absolute; top:100%; left:0;
    width: 320px; max-height: 300px;
    background: var(--paper); border:1px solid var(--line-2);
    border-radius: 10px; margin-top: 4px;
    box-shadow: 0 12px 32px -8px rgba(0,0,0,.18);
    z-index: 200; display:none;
    overflow:hidden; flex-direction:column;
  }
  .cc-dropdown.open{display:flex}
  .cc-search{
    padding: 10px 12px; border-bottom: 1px solid var(--line);
    display:flex; align-items:center; gap: 8px;
  }
  .cc-search svg{width:14px; height:14px; color: var(--muted); flex-shrink:0}
  .cc-search input{
    flex:1; border:none; outline:none; background:transparent;
    font-family:inherit; font-size:13px; color: var(--ink);
  }
  .cc-list{overflow-y:auto; flex:1; max-height: 240px}
  .cc-opt{
    padding: 8px 14px;
    display:flex; align-items:center; gap: 10px;
    cursor:pointer; font-size: 13px;
    border-bottom: 1px solid var(--line);
    transition: background .1s;
  }
  .cc-opt:hover{background: var(--bg)}
  .cc-opt.active{background: var(--bg-2)}
  .cc-opt .iso-badge{
    display:inline-flex; align-items:center; justify-content:center;
    min-width: 28px; height: 19px; padding: 0 5px;
    background: var(--navy); color: #fff;
    border-radius: 3px; font-size: 10px; font-weight: 700;
    letter-spacing: .04em; font-family:'JetBrains Mono', monospace;
    flex-shrink: 0;
  }
  .cc-opt .flag-img{ width:24px; height:16px; object-fit:cover; border-radius:2px; flex-shrink:0; }
  .cc-opt .cname{flex:1; color: var(--ink); font-weight:500}
  .cc-opt .ccode{
    font-family:'JetBrains Mono', monospace; font-size: 12px;
    color: var(--muted);
  }

  /* Templates page split layout */
  .split-layout{
    display:grid; grid-template-columns: 1fr 1fr; gap: 16px;
    align-items:flex-start;
  }
  @media (max-width: 1100px){.split-layout{grid-template-columns: 1fr}}

  .template-form .form-input{font-family: inherit}
  .template-form textarea{min-height: 120px; font-family: inherit; resize: vertical; line-height: 1.5}
  .placeholder-bar{
    padding: 12px 14px; background: var(--bg-2);
    border-radius: 8px; margin-top: 8px;
  }
  .placeholder-bar .lbl{
    font-size: 11px; text-transform:uppercase; letter-spacing:.1em;
    color: var(--muted); margin-bottom: 8px; display:block;
  }
  .ph-pill{
    display:inline-flex; padding: 4px 10px;
    background: var(--paper); border: 1px solid var(--line-2);
    border-radius: 999px; cursor:pointer;
    font-family:'JetBrains Mono', monospace; font-size: 11px;
    color: var(--navy); margin: 3px 4px 3px 0;
    transition: all .12s;
  }
  .ph-pill:hover{background: var(--navy); color: var(--paper); border-color: var(--navy)}
  .info-banner code{
    background: var(--paper); padding: 1px 6px; border-radius: 3px;
    font-family:'JetBrains Mono', monospace; font-size: 11px;
    color: var(--navy); font-weight: 500;
  }

  /* API editor large form */
  .api-editor{
    background: var(--paper); border:1px solid var(--line);
    border-radius: 12px; padding: 22px;
  }
  .api-editor h3{
    font-family:'Fraunces',serif; font-size: 19px; font-weight:600;
    letter-spacing:-0.01em; margin-bottom: 4px;
  }
  .api-editor .sub{font-size: 12px; color: var(--muted); margin-bottom: 20px}
  .api-list-panel{
    background: var(--paper); border:1px solid var(--line);
    border-radius: 12px; padding: 18px;
  }
  .header-row{
    display:grid; grid-template-columns: 1fr 1fr 36px;
    gap: 8px; align-items:center; margin-bottom: 8px;
  }
  textarea.code-area{
    background: #0f1419; color: #e2e8f0;
    border:1px solid #2a3442; padding: 14px;
    border-radius: 8px; font-family:'JetBrains Mono', monospace;
    font-size: 12px; line-height: 1.6;
    width:100%; min-height: 110px; resize: vertical;
  }
  textarea.code-area:focus{outline:none; border-color: var(--amber)}
  .field-pair-toolbar{
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom: 6px;
  }
  .field-pair-toolbar label{font-size: 12px; font-weight:500; color: var(--ink-2)}
  .mini-btn{
    display:inline-flex; align-items:center; gap:4px;
    padding: 4px 10px; background: var(--paper);
    border:1px solid var(--line-2); border-radius: 6px;
    cursor:pointer; font-family:inherit; font-size: 11px;
    color: var(--ink-2); transition: all .12s;
    line-height: 1; vertical-align: middle;
  }
  .mini-btn:hover{border-color: var(--ink); color: var(--ink)}
  .mini-btn svg{width:11px; height:11px; flex-shrink:0}

  /* Compact icon-only action buttons for tables */
  .row-action{
    display:inline-grid; place-items:center;
    width: 26px; height: 26px;
    border-radius: 5px; border: 1px solid var(--line-2);
    background: var(--paper); cursor: pointer;
    color: var(--ink-2); transition: all .12s;
    margin-left: 3px;
  }
  .row-action:first-child{margin-left: 0}
  .row-action svg{width: 13px; height: 13px}
  .row-action:hover{border-color: var(--ink); color: var(--ink)}
  .row-action.success{color: var(--green); border-color: rgba(74,107,58,.3); background: rgba(74,107,58,.05)}
  .row-action.success:hover{background: var(--green); color: #fff; border-color: var(--green)}
  .row-action.failed{color: var(--rust); border-color: rgba(160,67,35,.3); background: rgba(160,67,35,.05)}
  .row-action.failed:hover{background: var(--rust); color: #fff; border-color: var(--rust)}
  .row-action.revert{color: var(--ink-2)}
  .row-action.revert:hover{background: var(--bg-2); border-color: var(--ink-2)}

  /* Trigger events table */
  .pill-builtin{
    color: var(--green); border:1px solid rgba(74,107,58,.3);
    background: rgba(74,107,58,.08); border-radius: 4px;
    padding: 2px 8px; font-size: 11px; font-weight:500;
    text-transform: uppercase; letter-spacing: .04em;
  }
  .pill-locked{
    color: var(--ink-2); border:1px solid var(--line-2);
    background: var(--bg-2); border-radius: 4px;
    padding: 2px 8px; font-size: 11px; font-weight:500;
    text-transform: uppercase; letter-spacing: .04em;
    display: inline-flex; align-items: center; gap: 4px;
  }
  .pill-usage{
    color: var(--green); border:1px solid rgba(74,107,58,.3);
    background: rgba(74,107,58,.08); border-radius: 999px;
    padding: 2px 10px; font-size: 11px; font-weight:500;
  }

  /* preview of meta tag */
  .tag-preview{
    margin-top: 10px; padding: 10px 12px;
    background: var(--bg-2); border-radius: 6px;
    font-family:'JetBrains Mono', monospace; font-size: 11px;
    color: var(--ink-2); word-break: break-all;
  }
  .tag-preview .lbl{color: var(--muted); margin-right: 6px}

  /* ============ API MANAGEMENT ============ */
  .api-layout{
    display:grid; grid-template-columns: 240px 1fr; gap: 16px;
    align-items:start;
  }
  .api-replacements{
    background: var(--navy); color: var(--paper);
    border-radius: 12px; padding: 18px;
    position: sticky; top: 0;
  }
  .api-replacements h4{
    font-size:11px; text-transform:uppercase; letter-spacing:.14em;
    margin-bottom:4px; color: var(--amber-soft);
    font-weight:600;
  }
  .api-replacements p{
    font-size: 10px; text-transform:uppercase; letter-spacing:.1em;
    color: rgba(253,251,246,.5); margin-bottom: 14px;
  }
  .repl-item{
    display:flex; align-items:center; justify-content:space-between;
    padding: 9px 11px; margin-bottom: 5px;
    background: rgba(255,255,255,.06); border-radius: 6px;
    font-family:'JetBrains Mono', monospace; font-size: 12px;
    color: var(--paper); cursor:pointer; transition: background .12s;
  }
  .repl-item:hover{background: rgba(255,255,255,.12)}
  .repl-item svg{width: 12px; height:12px; opacity:.6}

  .api-card{
    background: var(--paper); border:1px solid var(--line);
    border-radius: 10px; padding: 16px 18px; margin-bottom: 10px;
    transition: border-color .12s;
  }
  .api-card:hover{border-color: var(--line-2)}
  .api-card-head{
    display:flex; align-items:center; gap: 10px;
    margin-bottom: 6px; flex-wrap:wrap;
  }
  .api-card-name{font-weight:600; font-size: 14px; margin-right: 4px}
  .api-card-url{
    font-family:'JetBrains Mono', monospace; font-size: 11px;
    color: var(--ink-2); margin-bottom: 6px; word-break: break-all;
  }
  .api-card-meta{font-size: 11px; color: var(--muted)}
  .api-card-actions{margin-left:auto; display:flex; gap: 6px}
  .badge{
    display:inline-flex; align-items:center;
    padding: 2px 8px; font-size: 10px; font-weight:600;
    border-radius: 4px; text-transform:uppercase; letter-spacing:.06em;
    border:1px solid;
  }
  .badge.default{color: var(--green); border-color: rgba(74,107,58,.4); background: rgba(74,107,58,.08)}
  .badge.active{color: var(--green); border-color: rgba(74,107,58,.4); background: rgba(74,107,58,.08)}
  .badge.inactive{color: var(--muted); border-color: var(--line-2); background: var(--bg-2)}
  .badge.method{color: var(--navy); border-color: rgba(29,42,68,.3); background: rgba(29,42,68,.08); font-family:'JetBrains Mono', monospace}
  .badge.type{color: var(--ink-2); border-color: var(--line-2); background: var(--bg)}

  /* tabs */
  .tabs{
    display:flex; gap:0; border-bottom: 1px solid var(--line);
    margin-bottom: 18px;
  }
  .tab{
    padding: 12px 18px; border:none; background:transparent;
    cursor:pointer; font-family:inherit; font-size: 13px; font-weight: 500;
    color: var(--muted); position:relative;
    transition: color .12s;
  }
  .tab:hover{color: var(--ink-2)}
  .tab.active{color: var(--ink); font-weight:600}
  .tab.active::after{
    content:""; position:absolute; bottom:-1px; left:14px; right:14px;
    height: 2px; background: var(--ink);
  }
  .tab-pane{display:none}
  .tab-pane.active{display:block}

  /* ============ COMPANY SETTINGS ============ */
  .settings-grid{display: flex; flex-direction: column; gap: 16px}
  .settings-section{
    background: var(--paper); border:1px solid var(--line);
    border-radius: 12px; padding: 22px;
  }
  .settings-section h3{
    font-family:'Fraunces',serif; font-size: 18px;
    font-weight:600; letter-spacing:-0.01em;
    margin-bottom: 4px; display:flex; align-items:center; gap: 10px;
  }
  .settings-section .sub{font-size: 12px; color: var(--muted); margin-bottom: 18px}
  .info-banner{
    padding: 11px 14px; background: rgba(29,42,68,.06);
    border-left: 3px solid var(--navy);
    border-radius: 6px; font-size: 12px; color: var(--ink-2);
    margin-bottom: 14px;
  }
  .save-row{
    margin-top: 14px; display:flex; gap: 10px; justify-content:flex-end;
  }
  .contact-row{
    display:grid; grid-template-columns: 140px 1fr 1fr 36px;
    gap: 8px; align-items:center; margin-bottom: 8px;
  }
  .add-row-btn{
    margin-top: 6px; padding: 9px 14px;
    border: 1px dashed var(--line-2); background: transparent;
    border-radius: 7px; cursor:pointer;
    font-family:inherit; font-size: 12px; font-weight:500;
    color: var(--ink-2); width:100%;
    transition: all .12s;
  }
  .add-row-btn:hover{border-color: var(--ink); color: var(--ink); background: var(--bg-2)}
  .kv-row{
    display:grid; grid-template-columns: 140px 1fr 70px 36px;
    gap: 8px; align-items:center; margin-bottom: 8px;
    padding: 8px 12px; background: var(--bg); border-radius: 6px;
  }
  .kv-row .key{
    font-family:'JetBrains Mono', monospace; font-size: 12px;
    color: var(--navy); font-weight:600;
  }
  .kv-row .val{
    font-size: 13px; color: var(--ink-2); word-break: break-all;
    overflow:hidden; text-overflow: ellipsis;
  }
  .social-row{
    display:grid; grid-template-columns: 32px 120px 1fr 36px 36px;
    gap: 10px; align-items:center;
    padding: 10px 14px; background: var(--bg); border-radius: 6px;
    margin-bottom: 8px;
  }
  .social-icon{
    width: 32px; height:32px; border-radius: 7px;
    display:grid; place-items:center; color: white; font-weight:600;
    font-size: 13px;
  }
  .si-LinkedIn{background:#0077b5}
  .si-Instagram{background: linear-gradient(135deg,#feda77,#f58529,#dd2a7b,#8134af)}
  .si-Facebook{background:#1877f2}
  .si-X{background:#000} .si-Twitter{background:#1da1f2}
  .si-default{background: var(--navy)}

  /* ============ INVOICE ============ */
  .invoice-preview{
    background: var(--paper); padding: 32px;
    border:1px solid var(--line); border-radius: 12px;
    font-family:'Inter Tight', sans-serif;
  }
  .inv-head{
    display:flex; justify-content:space-between; align-items:flex-start;
    padding-bottom: 24px; border-bottom: 2px solid var(--ink);
  }
  .inv-title{
    font-family:'Fraunces',serif; font-size: 32px;
    font-weight:500; letter-spacing:-0.02em;
  }
  .inv-meta{font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.7}
  .inv-meta strong{color: var(--ink); font-weight: 600}
  .inv-grid{display:grid; grid-template-columns: 1fr 1fr; gap: 32px; padding: 24px 0}
  .inv-section h5{
    font-size: 11px; text-transform:uppercase; letter-spacing:.12em;
    color: var(--muted); margin-bottom: 8px;
  }
  .inv-section p{font-size: 13px; line-height: 1.6}
  .inv-section .name{font-weight: 600; font-size: 15px}
  .inv-table{margin: 16px 0}
  .inv-totals{
    margin-left: auto; max-width: 280px; margin-top: 16px;
    padding-top: 16px; border-top: 1px solid var(--line);
  }
  .inv-totals-row{
    display:flex; justify-content:space-between; padding: 6px 0;
    font-size: 13px;
  }
  .inv-totals-row.grand{
    font-family:'Fraunces',serif; font-size: 22px; font-weight:600;
    border-top: 2px solid var(--ink); margin-top: 8px; padding-top: 12px;
  }

  /* ============ DAY PROGRESS (LABOR DASH) ============ */
  .progress-ring{
    width: 180px; height: 180px; position: relative;
    display:grid; place-items:center;
  }
  .progress-ring svg{transform: rotate(-90deg)}
  .progress-ring-text{
    position:absolute; text-align:center;
  }
  .progress-ring-text .num{
    font-family:'Fraunces',serif; font-size: 44px;
    font-weight:500; letter-spacing:-0.02em; line-height:1;
  }
  .progress-ring-text .lbl{
    font-size: 11px; text-transform:uppercase; letter-spacing:.12em;
    color: var(--muted); margin-top: 4px;
  }
  .check-in-card{
    text-align:center; padding: 30px 24px;
  }
  .check-in-time{
    font-family:'JetBrains Mono', monospace;
    font-size: 38px; font-weight:500; color: var(--ink);
    letter-spacing:-0.02em; margin-bottom: 4px;
  }
  .check-in-date{
    font-size: 12px; text-transform:uppercase; letter-spacing:.12em;
    color: var(--muted); margin-bottom: 22px;
  }
  .punch-btn{
    width: 100%; padding: 16px;
    background: var(--green); color: #fff; border:none;
    border-radius: 10px; cursor:pointer;
    font-family:'Fraunces',serif; font-size: 17px; font-weight:500;
    letter-spacing:.01em; transition: all .15s;
    box-shadow: 0 4px 12px -2px rgba(74,107,58,.3);
  }
  .punch-btn:hover{transform: translateY(-1px); box-shadow: 0 6px 16px -2px rgba(74,107,58,.4)}
  .punch-btn.out{background: var(--rust); box-shadow: 0 4px 12px -2px rgba(160,67,35,.3)}
  .punch-btn.out:hover{box-shadow: 0 6px 16px -2px rgba(160,67,35,.4)}

  /* views */
  .view{display:none; animation: fadeIn .3s ease}
  .view.active{display:block}
  @keyframes fadeIn{from{opacity:0; transform: translateY(4px)} to{opacity:1; transform:none}}

  .empty-tip{
    padding: 14px 16px; background: var(--bg-2);
    border-radius: 8px; font-size: 12px; color: var(--ink-2);
    border-left: 2px solid var(--amber); margin-bottom: 16px;
  }

  /* scrollbar */
  ::-webkit-scrollbar{width: 10px; height: 10px}
  ::-webkit-scrollbar-track{background: transparent}
  ::-webkit-scrollbar-thumb{background: var(--line-2); border-radius:6px; border: 2px solid var(--bg)}
  ::-webkit-scrollbar-thumb:hover{background: var(--muted)}

  /* responsive */
  @media (max-width: 1100px){
    .kpi-grid{grid-template-columns: repeat(2, 1fr)}
    .section-grid.cols-2, .section-grid.cols-3{grid-template-columns: 1fr}
    .package-grid{grid-template-columns: 1fr}
  }
  @media (max-width: 768px){
    .login-screen{grid-template-columns: 1fr}
    .login-art{display:none}
    .app{grid-template-columns: 1fr}
    .sidebar{position:fixed; left:-240px; top:0; bottom:0; width:240px; z-index:60; transition:left .25s}
    .sidebar.open{left:0}
    .main{padding: 20px}
    .topbar{flex-direction:column; gap: 14px}
    .attendance-grid{grid-template-columns: 140px repeat(7, 1fr)}
  }