@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap');
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  :root{
    --navy:#1F3864;--blue:#2E75B6;--bg:#0f1e35;--card:#162844;--border:#243a5e;
    --text:#e8edf5;--muted:#8aa0bd;--green:#4caf7d;--orange:#f59e0b;--red:#ef4444;
    --purple:#a78bfa;--teal:#2dd4bf;--row-alt:#111e33;
  }
  html{overflow-x:hidden;}
  body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;}
  input,select,button{font-family:'Inter',sans-serif;}

  /* ── Mobile block ── */
  #mobileBlock{display:none;position:fixed;inset:0;background:var(--bg);z-index:99999;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center;}
  #mobileBlock .icon{font-size:3rem;margin-bottom:1rem;}
  #mobileBlock h2{font-size:1.3rem;font-weight:700;margin-bottom:.75rem;}
  #mobileBlock p{font-size:.88rem;color:var(--muted);line-height:1.6;max-width:300px;}
  @media(max-width:768px){#mobileBlock{display:flex;}#appRoot{display:none!important;}}

  /* ── Maintenance block ── */
  #maintenanceBlock{display:none;position:fixed;inset:0;background:var(--bg);z-index:100000;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center;}
  #maintenanceBlock .icon{font-size:3rem;margin-bottom:1rem;}
  #maintenanceBlock h2{font-size:1.3rem;font-weight:700;margin-bottom:.75rem;}
  #maintenanceBlock p{font-size:.88rem;color:var(--muted);line-height:1.6;max-width:340px;}

  /* ── Views ── */
  #appRoot{display:block;}
  .view{display:none;}
  .view.active{display:flex;flex-direction:column;}
  #agentView{align-items:center;justify-content:center;min-height:100vh;padding:2rem;}
  #supervisorView{padding:2rem;min-height:100vh;}

  /* ── Role picker ── */
  #rolePicker, #campaignPicker{position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9998;padding:2rem;}
  .role-logo{font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem;}
  .role-title{font-size:2rem;font-weight:700;margin-bottom:.5rem;}
  .role-sub{font-size:.88rem;color:var(--muted);margin-bottom:2.5rem;}
  .role-cards{display:flex;gap:1.25rem;flex-wrap:wrap;justify-content:center;}
  .role-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:2rem 2.5rem;cursor:pointer;transition:border-color .2s,transform .15s;text-align:center;min-width:160px;}
  .role-card:hover{border-color:var(--blue);transform:translateY(-3px);}
  .role-card .icon{font-size:2rem;margin-bottom:.75rem;}
  .role-card .label{font-size:1rem;font-weight:600;}
  .role-card .sub{font-size:.75rem;color:var(--muted);margin-top:.3rem;}

  /* ── Lock screens ── */
  .lock{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:9999;}
  .lock-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:2.5rem;width:100%;max-width:380px;text-align:center;}
  .lock-card h2{font-size:1.2rem;font-weight:700;margin-bottom:.5rem;}
  .lock-card p{font-size:.82rem;color:var(--muted);margin-bottom:1.5rem;}
  .lock-card input{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:.75rem 1rem;color:var(--text);font-size:1rem;outline:none;margin-bottom:.75rem;text-align:center;}
  .lock-card input:focus{border-color:var(--blue);}
  .lock-btn{width:100%;background:var(--blue);color:#fff;border:none;border-radius:8px;padding:.8rem;font-size:.95rem;font-weight:600;cursor:pointer;}
  .lock-btn:hover{opacity:.88;}
  .lock-err{color:var(--red);font-size:.8rem;margin-top:.5rem;min-height:1.2em;}
  .back-btn{background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:7px;padding:.4rem .9rem;font-size:.78rem;cursor:pointer;margin-top:1rem;}
  .back-btn:hover{border-color:var(--blue);color:var(--blue);}

  /* ── Feedback modal ── */
  #feedbackModal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:10000;align-items:center;justify-content:center;padding:1.5rem;}
  #feedbackModal.show{display:flex;}
  .feedback-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:2rem;width:100%;max-width:440px;}
  .feedback-card h3{font-size:1.1rem;font-weight:700;margin-bottom:.3rem;}
  .feedback-card p{font-size:.82rem;color:var(--muted);margin-bottom:1.25rem;}
  .feedback-type-row{display:flex;gap:.6rem;margin-bottom:1.1rem;}
  .feedback-type-btn{flex:1;padding:.7rem;border:1.5px solid var(--border);border-radius:9px;background:transparent;color:var(--muted);font-size:.85rem;font-weight:600;cursor:pointer;transition:all .15s;text-align:center;}
  .feedback-type-btn.active{border-color:var(--blue);background:rgba(46,117,182,.12);color:var(--blue);}
  .feedback-card textarea{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:.75rem 1rem;color:var(--text);font-size:.9rem;outline:none;resize:vertical;min-height:110px;font-family:'Inter',sans-serif;}
  .feedback-card textarea:focus{border-color:var(--blue);}
  .feedback-actions{display:flex;gap:.6rem;margin-top:1.1rem;}
  .feedback-actions button{flex:1;}

  /* ── Shared inputs ── */
  input[type="email"],input[type="password"],input[type="text"],input[type="date"],input[type="number"],input[type="time"]{
    width:100%;background:var(--bg);border:1px solid var(--border);border-radius:8px;
    padding:.75rem 1rem;color:var(--text);font-size:1rem;outline:none;transition:border-color .2s;
  }
  input:focus{border-color:var(--blue);}
  .input-group{margin-bottom:1.1rem;}
  label{display:block;font-size:.8rem;font-weight:600;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-bottom:.5rem;}

  /* ── Agent styles ── */
  .brand{font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem;}
  h1.agent-title{font-size:1.6rem;font-weight:700;margin-bottom:2rem;}
  .layout{display:flex;gap:1.5rem;align-items:stretch;width:100%;max-width:1200px;flex-wrap:wrap;justify-content:center;}
  .card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:2rem;flex:1.3;min-width:320px;max-width:440px;}
  .card-log{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:1.5rem;flex:1;min-width:260px;max-width:380px;}
  .auth-box{display:none;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:2rem;width:100%;max-width:400px;}
  .auth-box.active{display:block;}
  .auth-title{font-size:1rem;font-weight:700;margin-bottom:.3rem;}
  .auth-sub{font-size:.8rem;color:var(--muted);margin-bottom:1.25rem;}
  .tab-row{display:flex;gap:.5rem;margin-bottom:1.5rem;}
  .atab{flex:1;padding:.6rem;border:1px solid var(--border);border-radius:7px;background:transparent;color:var(--muted);font-size:.82rem;font-weight:600;cursor:pointer;transition:all .15s;}
  .atab.active{background:var(--blue);color:#fff;border-color:var(--blue);}
  .status-box{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:1.25rem;margin-bottom:1.5rem;}
  .greeting{font-size:1.1rem;font-weight:600;margin-bottom:.75rem;}
  .status-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:.4rem;}
  .status-pill{display:inline-block;padding:.25rem .9rem;border-radius:999px;font-size:.8rem;font-weight:600;margin-bottom:1rem;}
  .pill-working{background:rgba(76,175,125,.15);color:var(--green);border:1px solid var(--green);}
  .pill-on_break{background:rgba(245,158,11,.15);color:var(--orange);border:1px solid var(--orange);}
  .pill-on_lunch{background:rgba(167,139,250,.15);color:var(--purple);border:1px solid var(--purple);}
  .pill-on_restroom{background:rgba(45,212,191,.15);color:var(--teal);border:1px solid var(--teal);}
  .pill-clocked_out{background:rgba(239,68,68,.15);color:var(--red);border:1px solid var(--red);}
  .pill-not_clocked_in{background:rgba(138,160,189,.1);color:var(--muted);border:1px solid var(--border);}
  .timers{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;}
  .timer-block .tl{font-size:.65rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:.3rem;}
  .timer-block .tv{font-family:'JetBrains Mono',monospace;font-size:1.15rem;font-weight:700;}
  .tv-work{color:var(--green);}.tv-break{color:var(--orange);}.tv-lunch{color:var(--purple);}.tv-restroom{color:var(--teal);}
  .action-btn{padding:.8rem 1rem;border:none;border-radius:8px;font-size:.9rem;font-weight:600;cursor:pointer;transition:opacity .15s,transform .1s;width:100%;}
  .action-btn:hover:not(:disabled){opacity:.88;transform:translateY(-1px);}
  .action-btn:disabled{opacity:.35;cursor:not-allowed;}
  .btn-primary{width:100%;background:var(--blue);color:#fff;border:none;border-radius:8px;padding:.8rem;font-size:.95rem;font-weight:600;cursor:pointer;margin-top:.5rem;}
  .btn-primary:hover{opacity:.88;}
  .btn-green{background:var(--green);color:#fff;}.btn-red{background:var(--red);color:#fff;}
  .btn-orange{background:var(--orange);color:#fff;}.btn-purple{background:var(--purple);color:#fff;}
  .btn-teal{background:var(--teal);color:#fff;}
  .divider{border:none;border-top:1px solid var(--border);margin:1.25rem 0;}
  .clock-live{font-family:'JetBrains Mono',monospace;font-size:.85rem;color:var(--muted);text-align:center;margin-top:1.5rem;}
  #agentMsg,#authMsg{font-size:.82rem;margin-top:.5rem;min-height:1.2em;}
  .spinner{display:none;width:18px;height:18px;border:2px solid var(--border);border-top-color:var(--blue);border-radius:50%;animation:spin .6s linear infinite;margin:.5rem auto 0;}
  .spinner.show{display:block;}
  @keyframes spin{to{transform:rotate(360deg);}}
  .log-title{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:600;margin-bottom:1rem;padding-bottom:.6rem;border-bottom:1px solid var(--border);}
  .log-empty{color:var(--muted);font-size:.82rem;text-align:center;padding:1rem 0;}
  .log-item{display:flex;align-items:flex-start;gap:.75rem;padding:.55rem 0;border-bottom:1px solid var(--border);}
  .log-item:last-child{border-bottom:none;}
  #logList{max-height:420px;overflow-y:auto;padding-right:.4rem;}
  #lunchScheduleList{max-height:420px;overflow-y:auto;padding-right:.4rem;}
  #logList::-webkit-scrollbar,#lunchScheduleList::-webkit-scrollbar{width:6px;}
  #logList::-webkit-scrollbar-track,#lunchScheduleList::-webkit-scrollbar-track{background:transparent;}
  #logList::-webkit-scrollbar-thumb,#lunchScheduleList::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}
  #logList::-webkit-scrollbar-thumb:hover,#lunchScheduleList::-webkit-scrollbar-thumb:hover{background:var(--blue);}
  .log-dot{width:8px;height:8px;border-radius:50%;margin-top:5px;flex-shrink:0;}
  .log-type{font-size:.78rem;font-weight:600;}.log-time{font-family:'JetBrains Mono',monospace;font-size:.72rem;color:var(--muted);margin-top:.15rem;}
  .ld-clock_in{background:var(--green);}.ld-clock_out{background:var(--red);}
  .ld-break_start,.ld-break_end{background:var(--orange);}
  .ld-lunch_start,.ld-lunch_end{background:var(--purple);}
  .ld-restroom_start,.ld-restroom_end{background:var(--teal);}
  .lt-clock_in{color:var(--green);}.lt-clock_out{color:var(--red);}
  .lt-break_start,.lt-break_end{color:var(--orange);}
  .lt-lunch_start,.lt-lunch_end{color:var(--purple);}
  .lt-restroom_start,.lt-restroom_end{color:var(--teal);}

  /* ── Supervisor styles ── */
  header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-bottom:1.5rem;}
  .sup-brand{font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);}
  h1.sup-title{font-size:1.5rem;font-weight:700;margin-bottom:0;}
  .sup-user{font-size:.78rem;color:var(--muted);margin-top:.2rem;}
  .sup-user span{color:var(--blue);font-weight:600;}
  .live-clock{font-family:'JetBrains Mono',monospace;font-size:1.4rem;font-weight:700;color:var(--blue);text-align:right;}
  .live-date{font-size:.75rem;color:var(--muted);text-align:right;margin-top:.2rem;}
  .version-badge{font-size:.65rem;font-weight:600;color:var(--muted);text-align:right;margin-bottom:.2rem;letter-spacing:.08em;text-transform:uppercase;}
  .version-badge span{background:rgba(46,117,182,.15);border:1px solid rgba(46,117,182,.3);border-radius:4px;padding:.1rem .45rem;color:var(--blue);}
  .version-badge-fixed{position:fixed;bottom:.4rem;right:.6rem;font-size:.62rem;font-weight:600;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;z-index:50;pointer-events:none;}
  .version-badge-fixed span{background:rgba(46,117,182,.15);border:1px solid rgba(46,117,182,.3);border-radius:4px;padding:.1rem .4rem;color:var(--blue);}

  /* ── Theme picker ─────────────────────────────────────────────────────── */
  .theme-fab{
    position:fixed;bottom:1.1rem;left:1.1rem;z-index:9997;
    background:var(--card);color:var(--text);border:1px solid var(--border);
    border-radius:999px;padding:.55rem 1rem;font-size:.8rem;font-weight:600;
    cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.25);transition:border-color .15s,transform .1s;
  }
  .theme-fab:hover{border-color:var(--blue);transform:translateY(-1px);}
  .theme-picker-panel{
    display:none;position:fixed;bottom:4rem;left:1.1rem;z-index:9997;
    width:300px;max-height:70vh;overflow-y:auto;
    background:var(--card);border:1px solid var(--border);border-radius:14px;
    box-shadow:0 10px 34px rgba(0,0,0,.4);padding:.9rem;
  }
  .theme-picker-panel.show{display:block;}
  /* Background picker FAB stacks directly above the Theme FAB rather than
     side-by-side, since the label widths differ ("Theme" vs "Background"). */
  .bg-fab{ bottom:4.2rem; }
  .bg-picker-panel{ bottom:7.2rem; }
  .theme-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.7rem;font-size:.78rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;}
  .theme-panel-close{background:none;border:none;color:var(--muted);font-size:.9rem;cursor:pointer;padding:.1rem .3rem;}
  .theme-panel-close:hover{color:var(--red);}
  .theme-group-label{font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;margin:.7rem 0 .35rem;}
  .theme-group-label:first-child{margin-top:0;}
  .theme-swatch{
    display:flex;align-items:center;gap:.55rem;padding:.5rem .65rem;border-radius:9px;
    border:1.5px solid var(--border);background:var(--bg);color:var(--text);
    font-size:.8rem;font-weight:600;cursor:pointer;margin-bottom:.35rem;
    transition:border-color .15s,transform .1s;
  }
  .theme-swatch:hover{transform:translateX(2px);}
  .theme-swatch.active{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue);}
  .theme-swatch .dot{width:13px;height:13px;border-radius:50%;flex-shrink:0;border:1px solid rgba(127,127,127,.35);}

  /* Supervisor top banner (non-blocking) */
  #newVersionBanner{display:none;position:fixed;top:0;left:0;right:0;z-index:9998;background:var(--blue);color:#fff;padding:1rem 1.5rem;font-size:.95rem;font-weight:600;text-align:center;align-items:center;justify-content:center;gap:1.25rem;box-shadow:0 4px 20px rgba(0,0,0,.4);border-bottom:3px solid #fff;}
  #newVersionBanner.show{display:flex;flex-wrap:wrap;}
  #newVersionBanner button{background:#fff;color:var(--blue);border:none;border-radius:6px;padding:.4rem .9rem;font-size:.8rem;font-weight:700;cursor:pointer;}
  #newVersionBanner button:hover{opacity:.9;}
  #newVersionBanner .nvb-dismiss{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5);font-weight:600;}
  /* Agent blocking overlay — covers entire screen, no dismiss */
  #agentUpdateOverlay{display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.75);align-items:center;justify-content:center;}
  #agentUpdateOverlay.show{display:flex;}
  #agentUpdateOverlay .overlay-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:2.5rem 2rem;max-width:380px;width:90%;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.25rem;box-shadow:0 8px 40px rgba(0,0,0,.5);}
  #agentUpdateOverlay .overlay-icon{font-size:2.5rem;}
  #agentUpdateOverlay h3{font-size:1.2rem;font-weight:700;color:var(--text);}
  #agentUpdateOverlay p{font-size:.9rem;color:var(--muted);line-height:1.5;}
  #agentUpdateOverlay button{background:var(--blue);color:#fff;border:none;border-radius:8px;padding:.75rem 2rem;font-size:.95rem;font-weight:700;cursor:pointer;width:100%;}
  #agentUpdateOverlay button:hover{opacity:.9;}

  /* ── Alert banner ── */
  #alertBanner{display:none;background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.35);border-radius:10px;padding:.9rem 1.25rem;margin-bottom:1.25rem;}
  #alertBanner.show{display:block;}
  .alert-banner-title{font-size:.78rem;font-weight:700;color:var(--red);margin-bottom:.4rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem;}
  .alert-items{display:flex;flex-wrap:wrap;gap:.5rem;}
  .alert-chip{background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.3);border-radius:6px;padding:.2rem .4rem .2rem .6rem;font-size:.75rem;color:var(--red);display:inline-flex;align-items:center;gap:.5rem;}
  .alert-chip.warn{background:rgba(245,158,11,.15);border-color:rgba(245,158,11,.3);color:var(--orange);}
  .alert-chip-close{background:transparent;border:none;color:inherit;opacity:.6;cursor:pointer;font-size:.7rem;padding:0;line-height:1;}
  .alert-chip-close:hover{opacity:1;}

  /* ── Tabs ── */
  .tabs{display:flex;gap:.5rem;margin-bottom:2rem;border-bottom:1px solid var(--border);padding-bottom:.1rem;flex-wrap:wrap;}
  .tab-btn{background:transparent;border:none;border-bottom:2px solid transparent;color:var(--muted);font-size:.85rem;font-weight:600;padding:.5rem .85rem .75rem;cursor:pointer;transition:color .15s;margin-bottom:-1px;}
  .tab-btn.active{color:var(--blue);border-bottom-color:var(--blue);}
  .tab-btn:hover{color:var(--text);}
  .tab-pane{display:none;}.tab-pane.active{display:block;}

  /* ── Controls ── */
  .controls{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap;}
  .controls label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);}
  .controls input[type="date"],.controls input[type="text"]{width:auto;padding:.5rem .9rem;font-size:.85rem;}
  input[type="date"]{
    color-scheme:light;
    background:#ffffff;
    color:#1a2940;
    border:1.5px solid #cbd5e1;
    border-radius:7px;
    padding:.5rem .9rem;
    font-size:.85rem;
    font-family:'Inter',sans-serif;
    cursor:pointer;
  }
  input[type="date"]:focus{border-color:var(--blue);outline:none;}
  input[type="date"]::-webkit-calendar-picker-indicator{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232E75B6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-size:16px;
    cursor:pointer;
    opacity:1;
    width:16px;
    height:16px;
  }
  .controls input[type="text"]{width:180px;}
  .controls input::placeholder{color:var(--muted);}
  .btn{padding:.5rem .9rem;border:none;border-radius:7px;font-size:.82rem;font-weight:600;cursor:pointer;transition:opacity .15s;}
  .btn:hover{opacity:.85;}
  .btn-blue{background:var(--blue);color:#fff;}.btn-green{background:var(--green);color:#fff;}
  .btn-red{background:var(--red);color:#fff;}.btn-orange{background:var(--orange);color:#fff;}
  .btn-muted{background:var(--border);color:var(--text);}.btn-purple{background:var(--purple);color:#fff;}
  .btn-teal-s{background:var(--teal);color:#fff;}
  .btn-sm{padding:.3rem .6rem;font-size:.75rem;}

  /* ── Stats ── */
  .stats-bar{display:grid;grid-template-columns:repeat(auto-fit,minmax(95px,1fr));gap:.6rem;margin-bottom:1.25rem;}
  .stat-card{background:var(--card);border:1px solid var(--border);border-radius:9px;padding:.65rem .8rem;}
  .stat-label{font-size:.65rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:.3rem;}
  .stat-val{font-size:1.2rem;font-weight:700;}
  .stat-card{cursor:pointer;transition:border-color .2s,transform .1s;}
  .stat-card:hover{border-color:var(--blue);transform:translateY(-2px);}
  .stat-card.active-filter{border-color:var(--blue);background:rgba(46,117,182,.12);}
  .stat-card.active-filter .stat-label{color:var(--blue);}
  .cv-green{color:var(--green)}.cv-orange{color:var(--orange)}.cv-red{color:var(--red)}.cv-purple{color:var(--purple)}.cv-teal{color:var(--teal)}.smono{font-family:'JetBrains Mono',monospace;font-size:1rem;}

  /* ── Table ── */
  .table-wrap{background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:1.5rem;overflow-x:auto;}
  /* Wide tables (Dashboard etc.) legitimately need to scroll horizontally on
     laptop-width screens, but the visible scrollbar flashed in white on
     hover and looked broken against the navy background — keep the scroll
     interaction (trackpad/drag) but hide the bar itself. */
  .table-wrap,[style*="overflow-x:auto"]{scrollbar-width:none;}
  .table-wrap::-webkit-scrollbar,[style*="overflow-x:auto"]::-webkit-scrollbar{display:none;}
  table{width:100%;border-collapse:collapse;font-size:.82rem;}
  thead th{background:var(--navy);padding:.8rem 1rem;text-align:left;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);cursor:pointer;user-select:none;white-space:nowrap;}
  thead th:hover{color:var(--text);}
  thead th.sort-asc::after{content:' ↑';color:var(--blue);}thead th.sort-desc::after{content:' ↓';color:var(--blue);}
  thead th.no-sort{cursor:default;}thead th.no-sort:hover{color:var(--muted);}
  tbody tr{border-bottom:1px solid var(--border);transition:background .1s;}tbody tr:last-child{border-bottom:none;}
  tbody tr:hover{background:rgba(46,117,182,.07)!important;}
  tbody tr:nth-child(even){background:var(--row-alt);}
  tbody tr.row-alert{background:rgba(239,68,68,.1)!important;}
  tbody tr.row-flagged{background:rgba(239,68,68,.15)!important;outline:1px solid rgba(239,68,68,.4);}
  .cell-over-max{color:var(--red)!important;font-weight:700!important;}
  td{padding:.8rem 1rem;vertical-align:middle;}
  .agent-name{font-weight:600;display:flex;align-items:center;gap:.55rem;}
  .row-num-badge{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:rgba(46,117,182,.15);border:1px solid rgba(46,117,182,.3);color:var(--blue);font-size:.68rem;font-weight:700;flex-shrink:0;}
  .status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:.5rem;flex-shrink:0;}
  .dot-working{background:var(--green);box-shadow:0 0 6px var(--green);}
  .dot-on_break{background:var(--orange);box-shadow:0 0 6px var(--orange);}
  .dot-on_lunch{background:var(--purple);box-shadow:0 0 6px var(--purple);}
  .dot-on_restroom{background:var(--teal);box-shadow:0 0 6px var(--teal);}
  .dot-clocked_out{background:var(--red);}.dot-not_clocked_in{background:var(--muted);}
  .status-text{font-size:.8rem;font-weight:500;display:flex;align-items:center;}
  .status-text.working{color:var(--green)}.status-text.on_break{color:var(--orange)}.status-text.on_lunch{color:var(--purple)}.status-text.on_restroom{color:var(--teal)}.status-text.clocked_out{color:var(--red)}.status-text.not_clocked_in{color:var(--muted);}
  .tmono{font-family:'JetBrains Mono',monospace;font-size:.82rem;font-weight:500;}
  .flag-badge{display:inline-block;background:rgba(239,68,68,.15);color:var(--red);border:1px solid var(--red);border-radius:5px;font-size:.65rem;font-weight:700;padding:.1rem .4rem;margin-left:.4rem;vertical-align:middle;}
  .lr-section{margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--border);}
  .lr-title{font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.75rem;}
  .lr-card{border-radius:10px;padding:.85rem 1rem;font-size:.82rem;line-height:1.5;}
  .lr-card.pending{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.35);color:var(--orange);}
  .lr-card.approved{background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.35);color:var(--green);}
  .lr-card.denied{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.35);color:var(--red);}
  .lr-meta{font-size:.75rem;color:var(--muted);margin-top:.25rem;}
  .empty-state{text-align:center;padding:3rem;color:var(--muted);font-size:.9rem;}
  .pulse{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse 1.5s infinite;margin-right:.4rem;}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
  .refresh-badge{font-size:.7rem;color:var(--muted);margin-left:auto;}

  /* ── Cards ── */
  .s-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:1.5rem;margin-bottom:1.5rem;}
  .s-card h2{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:600;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
  .controls-row{display:flex;gap:.75rem;align-items:center;margin-bottom:1rem;flex-wrap:wrap;}
  .mono{font-family:'JetBrains Mono',monospace;font-size:.8rem;color:var(--muted);}
  .etype{display:inline-block;padding:.15rem .55rem;border-radius:4px;font-size:.7rem;font-weight:600;text-transform:uppercase;}
  .etype-clock_in{background:rgba(76,175,125,.15);color:var(--green);}
  .etype-clock_out{background:rgba(239,68,68,.15);color:var(--red);}
  .etype-break_start,.etype-break_end{background:rgba(245,158,11,.15);color:var(--orange);}
  .etype-lunch_start,.etype-lunch_end{background:rgba(167,139,250,.15);color:var(--purple);}
  .etype-restroom_start,.etype-restroom_end{background:rgba(45,212,191,.15);color:var(--teal);}

  /* ── Toast ── */
  .toast{position:fixed;bottom:1.5rem;right:1.5rem;background:var(--card);border:1px solid var(--green);color:var(--green);padding:.7rem 1.2rem;border-radius:8px;font-size:.85rem;font-weight:500;opacity:0;transition:opacity .3s;pointer-events:none;z-index:9999;}
  .toast.show{opacity:1;}

  /* ── In-app alert notifications ── */
  #alertNotifContainer{position:fixed;top:1.25rem;right:1.25rem;z-index:99999;display:flex;flex-direction:column;gap:.6rem;max-width:320px;}
  .alert-notif{background:var(--card);border-radius:10px;padding:.9rem 1.1rem;box-shadow:0 4px 20px rgba(0,0,0,.4);display:flex;align-items:flex-start;gap:.75rem;animation:slideIn .3s ease;cursor:pointer;border-left:4px solid var(--red);}
  .alert-notif.warn{border-left-color:var(--orange);}
  .alert-notif-icon{font-size:1.1rem;flex-shrink:0;margin-top:.1rem;}
  .alert-notif-body{flex:1;}
  .alert-notif-title{font-size:.82rem;font-weight:700;color:var(--text);margin-bottom:.2rem;}
  .alert-notif-msg{font-size:.75rem;color:var(--muted);}
  .alert-notif-close{background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:.9rem;padding:0;margin-left:.5rem;flex-shrink:0;}
  .alert-notif-close:hover{color:var(--text);}
  @keyframes slideIn{from{transform:translateX(120%);opacity:0;}to{transform:translateX(0);opacity:1;}}
  @keyframes slideOut{from{transform:translateX(0);opacity:1;}to{transform:translateX(120%);opacity:0;}}

  /* ── Misc ── */
  .danger-zone{border-color:rgba(239,68,68,.3)!important;}.danger-zone h2{color:rgba(239,68,68,.7)!important;}
  .btn-outline-orange{background:transparent;color:var(--orange);border:1px solid var(--orange);border-radius:5px;padding:.3rem .65rem;font-size:.75rem;font-weight:600;cursor:pointer;transition:all .15s;}
  .btn-outline-orange:hover:not(:disabled){background:rgba(245,158,11,.1);}
  .btn-outline-orange:disabled{opacity:.3;cursor:not-allowed;}
  .btn-outline-red{background:transparent;color:var(--red);border:1px solid rgba(239,68,68,.5);border-radius:5px;padding:.3rem .65rem;font-size:.75rem;font-weight:600;cursor:pointer;transition:all .15s;}
  .btn-outline-green{background:transparent;color:var(--green);border:1px solid rgba(34,197,94,.5);border-radius:5px;padding:.3rem .65rem;font-size:.75rem;font-weight:600;cursor:pointer;transition:all .15s;}
  .btn-outline-green:hover{background:rgba(34,197,94,.08);}
  .btn-icon-refresh{background:transparent;color:var(--muted);border:1px solid rgba(148,163,184,.3);border-radius:5px;padding:.3rem .5rem;font-size:.85rem;cursor:pointer;transition:all .15s;line-height:1;}
  .btn-icon-refresh:hover{color:var(--blue);border-color:var(--blue);}
  .btn-outline-red:hover{background:rgba(239,68,68,.08);}
  .pw-row{display:flex;gap:.5rem;align-items:center;}.pw-row input{flex:1;padding:.35rem .6rem;font-size:.8rem;}
  .badge-email{font-size:.72rem;color:var(--muted);font-family:'JetBrains Mono',monospace;}
  .mini-lock{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:2rem;text-align:center;max-width:340px;margin:2rem auto;}
  .mini-lock h3{font-size:1rem;font-weight:700;margin-bottom:.4rem;}
  .mini-lock p{font-size:.8rem;color:var(--muted);margin-bottom:1rem;}
  .mini-lock input{text-align:center;margin-bottom:.75rem;}
  .mini-lock-err{color:var(--red);font-size:.8rem;margin-top:.5rem;min-height:1.2em;}
  .settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;}
  @media(max-width:700px){.settings-grid{grid-template-columns:1fr;}}
  .setting-row{display:flex;align-items:center;justify-content:space-between;padding:.75rem 0;border-bottom:1px solid var(--border);}
  .setting-row:last-child{border-bottom:none;}
  .setting-label{font-size:.85rem;font-weight:500;}
  .setting-sub{font-size:.75rem;color:var(--muted);margin-top:.15rem;}
  .setting-input{display:flex;align-items:center;gap:.5rem;}
  .setting-input input{width:80px;text-align:center;}
  .color-legend{display:flex;gap:1rem;margin-bottom:1rem;font-size:.75rem;flex-wrap:wrap;color:var(--muted);}
  .color-legend span{display:flex;align-items:center;gap:.4rem;}
  .color-legend .dot{width:10px;height:10px;border-radius:3px;flex-shrink:0;}
  .online-sup-chip{display:inline-flex;align-items:center;gap:.35rem;background:rgba(76,175,125,.1);border:1px solid rgba(76,175,125,.3);border-radius:999px;padding:.2rem .65rem;font-size:.72rem;color:var(--green);}
  .online-sup-chip .dot-online{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 1.5s infinite;}
  .online-sups-label{font-size:.7rem;color:var(--muted);}
  .sup-clockout-banner{background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.35);border-radius:8px;padding:.75rem 1rem;margin-bottom:1rem;font-size:.85rem;color:var(--orange);display:none;}
  .sup-clockout-banner.show{display:block;}
  .daily-summary-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,260px));gap:1rem;margin-bottom:1.5rem;}
  .ds-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:1rem 1.25rem;display:flex;flex-direction:column;align-items:stretch;}
  .ds-name{font-weight:600;font-size:.9rem;margin-bottom:.6rem;}
  .ds-row{display:flex;justify-content:space-between;font-size:.78rem;padding:.2rem 0;width:100%;}
  .ds-label{color:var(--muted);}
  .ds-row.ds-total{border-top:1px solid var(--border);margin-top:.4rem;padding-top:.4rem;}

/* Campaign column hiding — Hudson omits the Presence and Dialpad Call columns. */
.hide-presence-col .col-presence { display: none; }
.hide-dialpad-col  .col-call     { display: none; }
.hide-agent-feedback .agent-feedback-btn { display: none; }
.hide-version-col .col-version { display: none; }
.hide-team-col .col-team { display: none; }
.hide-restroom .col-restroom,
.hide-restroom #scRestroom,
.hide-restroom #restroomTimerBlock,
.hide-restroom .row-restroom { display: none; }
.hide-restroom .row-restroom { }  /* also marker for CSV export to filter on */


/* ═══════════════════════════════════════════════════════════════════════════
   HUDSON PRO ORTHO — agent portal skin only.
   Scoped to `body.campaign-hudson #agentView` so the supervisor dashboard and
   Lawfty stay completely untouched. Every rule here is presentational — no
   sizes, layouts, or interactions the JS depends on are changed.
   ═══════════════════════════════════════════════════════════════════════════ */
body.campaign-hudson #agentView {
  background: linear-gradient(180deg, #b4e6ee 0%, #86c8d8 60%, #6fb5c9 100%);
  min-height: 100vh;
  color: #0b2540;
  font-family: Georgia, 'Times New Roman', serif;
}
body.campaign-hudson #agentView .brand,
body.campaign-hudson #agentView .agent-title,
body.campaign-hudson #agentView .greeting,
body.campaign-hudson #agentView .auth-title,
body.campaign-hudson #agentView .auth-sub,
body.campaign-hudson #agentView .status-label,
body.campaign-hudson #agentView .status-pill,
body.campaign-hudson #agentView .log-title,
body.campaign-hudson #agentView .lr-title,
body.campaign-hudson #agentView label,
body.campaign-hudson #agentView .tl { color: #0b2540; }
body.campaign-hudson #agentView .brand { letter-spacing: .1em; }
body.campaign-hudson #agentView .agent-title,
body.campaign-hudson #agentView .greeting { font-weight: 800; }

/* Cards go from dark-navy to translucent white so the cyan reads through. */
body.campaign-hudson #agentView .card,
body.campaign-hudson #agentView .card-log,
body.campaign-hudson #agentView .auth-box {
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(11,37,64,.15);
  backdrop-filter: blur(4px);
}
body.campaign-hudson #agentView input[type="email"],
body.campaign-hudson #agentView input[type="password"],
body.campaign-hudson #agentView input[type="text"] {
  background: #fff; color: #0b2540;
  border: 1px solid rgba(11,37,64,.25);
}

/* Solid dark-navy rectangular action buttons, stacked full-width. */
body.campaign-hudson #agentView .action-btn,
body.campaign-hudson #agentView .btn-primary {
  background: #0b2540 !important;
  color: #ffffff !important;
  border-radius: 6px;
  padding: 1.05rem 1rem;
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow: 0 2px 4px rgba(11,37,64,.25);
  border: none;
}
body.campaign-hudson #agentView .action-btn:hover:not(:disabled),
body.campaign-hudson #agentView .btn-primary:hover:not(:disabled) {
  background: #14395f !important; transform: none;
}
/* Force the two-column Break/Lunch grid to stack (Hudson's mockup is vertical). */
body.campaign-hudson #agentView #actionButtons > div {
  display: flex !important; flex-direction: column; gap: .75rem;
}

/* Timer numbers pop against light background. */
body.campaign-hudson #agentView .tv { color: #0b2540; }
body.campaign-hudson #agentView .tv-work { color: #0b6b3a; }
body.campaign-hudson #agentView .tv-break { color: #a55200; }
body.campaign-hudson #agentView .tv-lunch { color: #5b2fa8; }


/* Hudson: lighten the inner status box + hide both Theme FABs entirely. */
body.campaign-hudson #agentView .status-box {
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(11,37,64,.15);
}
body.campaign-hudson #themeFab,
body.campaign-hudson #themeFabSup,
body.campaign-hudson #bgFab,
body.campaign-hudson #bgFabSup { display: none !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   LAWFTY — agent portal design pass (v250, testing branch).
   Scoped to `body.campaign-lawfty #agentView` so the supervisor dashboard and
   Hudson stay completely untouched — same isolation pattern as the Hudson
   skin above. Purely presentational: no sizes/IDs the JS depends on change.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Base glow + gradient stay constant across every background choice below —
   only the texture layer (first background-image in the list) changes. The
   Background picker (mirrors the Theme picker) toggles a bgpick-* class on
   #agentView; each repeats the same glow layers with a different texture.
   Everything here is built from var(--bg)/var(--card)/var(--blue)/var(--text)
   via color-mix() rather than hardcoded hex, so switching the Theme picker's
   color scheme reflows the background too instead of staying fixed navy. */
:root { --bgtex: var(--text); } /* texture dot/line color, overridden per-theme automatically via var(--text) */
body.campaign-lawfty #agentView,
body.campaign-lawfty #agentView.bgpick-default,
body.campaign-lawfty #supervisorView.bgpick-default {
  background:
    radial-gradient(color-mix(in srgb, var(--text) 10%, transparent) 1px, transparent 1px),
    radial-gradient(1100px 550px at 15% -10%, color-mix(in srgb, var(--blue) 30%, transparent), transparent 60%),
    radial-gradient(900px 500px at 100% 10%, color-mix(in srgb, var(--blue) 16%, transparent), transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 60%, var(--card) 40%) 45%, var(--bg) 100%);
  background-size: 22px 22px, auto, auto, auto;
}

/* Manga screentone — two dot layers offset by half a cell, like halftone print. */
body.campaign-lawfty #agentView.bgpick-manga,
body.campaign-lawfty #supervisorView.bgpick-manga {
  background:
    radial-gradient(color-mix(in srgb, var(--text) 18%, transparent) 1.6px, transparent 1.6px),
    radial-gradient(color-mix(in srgb, var(--text) 12%, transparent) 1.6px, transparent 1.6px),
    radial-gradient(1100px 550px at 15% -10%, color-mix(in srgb, var(--blue) 30%, transparent), transparent 60%),
    radial-gradient(900px 500px at 100% 10%, color-mix(in srgb, var(--blue) 16%, transparent), transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 60%, var(--card) 40%) 45%, var(--bg) 100%);
  background-position: 0 0, 8px 8px, 0 0, 0 0, 0 0;
  background-size: 16px 16px, 16px 16px, auto, auto, auto;
}

/* Graph-paper grid lines. */
body.campaign-lawfty #agentView.bgpick-grid,
body.campaign-lawfty #supervisorView.bgpick-grid {
  background:
    linear-gradient(color-mix(in srgb, var(--text) 10%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--text) 10%, transparent) 1px, transparent 1px),
    radial-gradient(1100px 550px at 15% -10%, color-mix(in srgb, var(--blue) 30%, transparent), transparent 60%),
    radial-gradient(900px 500px at 100% 10%, color-mix(in srgb, var(--blue) 16%, transparent), transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 60%, var(--card) 40%) 45%, var(--bg) 100%);
  background-size: 32px 32px, 32px 32px, auto, auto, auto;
}

/* Diagonal stripes, slowly scrolling. */
body.campaign-lawfty #agentView.bgpick-stripes,
body.campaign-lawfty #supervisorView.bgpick-stripes {
  background:
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--text) 9%, transparent) 0 2px, transparent 2px 18px),
    radial-gradient(1100px 550px at 15% -10%, color-mix(in srgb, var(--blue) 30%, transparent), transparent 60%),
    radial-gradient(900px 500px at 100% 10%, color-mix(in srgb, var(--blue) 16%, transparent), transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 60%, var(--card) 40%) 45%, var(--bg) 100%);
  animation: lawftyStripesDrift 14s linear infinite;
}
@keyframes lawftyStripesDrift {
  from { background-position: 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 200px 0, 0 0, 0 0, 0 0; }
}

/* Scattered starfield — five layers with deliberately mismatched (non-common-
   multiple) tile sizes and off-grid offsets, so the tiling seam never lines
   up the same way twice across the visible viewport — reads as random even
   though it's still a repeating pattern under the hood. Slow drift + a subtle
   twinkle (via the two size-4 layers going in/out of phase) for motion. */
body.campaign-lawfty #agentView.bgpick-stars,
body.campaign-lawfty #supervisorView.bgpick-stars {
  background:
    radial-gradient(color-mix(in srgb, var(--text) 75%, transparent) .9px, transparent 1px),
    radial-gradient(color-mix(in srgb, var(--text) 55%, transparent) 1.3px, transparent 1.4px),
    radial-gradient(color-mix(in srgb, var(--text) 40%, transparent) .7px, transparent .8px),
    radial-gradient(color-mix(in srgb, var(--text) 60%, transparent) 1px, transparent 1.1px),
    radial-gradient(1100px 550px at 15% -10%, color-mix(in srgb, var(--blue) 30%, transparent), transparent 60%),
    radial-gradient(900px 500px at 100% 10%, color-mix(in srgb, var(--blue) 16%, transparent), transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 60%, var(--card) 40%) 45%, var(--bg) 100%);
  background-position: 0 0, 47px 113px, 181px 29px, 233px 167px, 0 0, 0 0, 0 0;
  background-size: 173px 173px, 211px 137px, 149px 229px, 191px 163px, auto, auto, auto;
  animation: lawftyStarsDrift 90s linear infinite;
}
@keyframes lawftyStarsDrift {
  from { background-position: 0 0, 47px 113px, 181px 29px, 233px 167px, 0 0, 0 0, 0 0; }
  to   { background-position: 173px 86px, -164px 250px, 30px -172px, 42px 4px, 0 0, 0 0, 0 0; }
}

/* Confetti — small accent-colored flecks instead of a monochrome dot grid. */
body.campaign-lawfty #agentView.bgpick-confetti,
body.campaign-lawfty #supervisorView.bgpick-confetti {
  background:
    radial-gradient(color-mix(in srgb, var(--blue) 70%, transparent) 1.4px, transparent 1.5px),
    radial-gradient(color-mix(in srgb, var(--green) 65%, transparent) 1.2px, transparent 1.3px),
    radial-gradient(color-mix(in srgb, var(--purple) 65%, transparent) 1.3px, transparent 1.4px),
    radial-gradient(color-mix(in srgb, var(--text) 45%, transparent) 1px, transparent 1.1px),
    radial-gradient(1100px 550px at 15% -10%, color-mix(in srgb, var(--blue) 30%, transparent), transparent 60%),
    radial-gradient(900px 500px at 100% 10%, color-mix(in srgb, var(--blue) 16%, transparent), transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 60%, var(--card) 40%) 45%, var(--bg) 100%);
  background-position: 0 0, 61px 97px, 149px 23px, 211px 179px, 0 0, 0 0, 0 0;
  background-size: 197px 197px, 233px 149px, 167px 241px, 179px 151px, auto, auto, auto;
}

/* Waves — soft horizontal bands drifting sideways. Each band fades in/out
   within its own cycle (rather than a hard-edged stripe) to actually read as
   soft, plus a much lower opacity than the other textures since large bands
   read as "bold" far more easily than small dots/lines do. */
body.campaign-lawfty #agentView.bgpick-waves,
body.campaign-lawfty #supervisorView.bgpick-waves {
  background:
    repeating-linear-gradient(100deg,
      transparent 0, color-mix(in srgb, var(--blue) 4%, transparent) 45px,
      transparent 90px, transparent 90px),
    radial-gradient(1100px 550px at 15% -10%, color-mix(in srgb, var(--blue) 30%, transparent), transparent 60%),
    radial-gradient(900px 500px at 100% 10%, color-mix(in srgb, var(--blue) 16%, transparent), transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 60%, var(--card) 40%) 45%, var(--bg) 100%);
  animation: lawftyWavesDrift 22s ease-in-out infinite alternate;
}
@keyframes lawftyWavesDrift {
  from { background-position: 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 260px 0, 0 0, 0 0, 0 0; }
}

/* Aurora — large soft accent blobs slowly drifting past each other. */
body.campaign-lawfty #agentView.bgpick-aurora,
body.campaign-lawfty #supervisorView.bgpick-aurora {
  background:
    radial-gradient(700px 420px at 10% 20%, color-mix(in srgb, var(--blue) 26%, transparent), transparent 60%),
    radial-gradient(650px 400px at 90% 30%, color-mix(in srgb, var(--purple) 22%, transparent), transparent 60%),
    radial-gradient(650px 450px at 50% 90%, color-mix(in srgb, var(--green) 18%, transparent), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 60%, var(--card) 40%) 45%, var(--bg) 100%);
  background-size: 140% 140%, 140% 140%, 140% 140%, auto;
  animation: lawftyAuroraDrift 26s ease-in-out infinite alternate;
}
@keyframes lawftyAuroraDrift {
  from { background-position: 0% 0%, 100% 0%, 50% 100%, 0 0; }
  to   { background-position: 15% 10%, 85% 15%, 60% 85%, 0 0; }
}

/* No texture — just the glow + gradient. */
body.campaign-lawfty #agentView.bgpick-plain,
body.campaign-lawfty #supervisorView.bgpick-plain {
  background:
    radial-gradient(1100px 550px at 15% -10%, color-mix(in srgb, var(--blue) 30%, transparent), transparent 60%),
    radial-gradient(900px 500px at 100% 10%, color-mix(in srgb, var(--blue) 16%, transparent), transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 60%, var(--card) 40%) 45%, var(--bg) 100%);
}

@media (prefers-reduced-motion: reduce) {
  body.campaign-lawfty #agentView.bgpick-stripes,
  body.campaign-lawfty #agentView.bgpick-stars,
  body.campaign-lawfty #agentView.bgpick-waves,
  body.campaign-lawfty #agentView.bgpick-aurora,
  body.campaign-lawfty #supervisorView.bgpick-stripes,
  body.campaign-lawfty #supervisorView.bgpick-stars,
  body.campaign-lawfty #supervisorView.bgpick-waves,
  body.campaign-lawfty #supervisorView.bgpick-aurora { animation: none; }
}

/* Placeholder balloon mark — swap for the real Lawfty logo file once we have
   it (replace this data-URI with a proper asset, e.g. <img> or a real SVG
   file, at that point rather than fighting to redraw it in CSS). */
body.campaign-lawfty #agentView .brand {
  font-weight: 700; letter-spacing: .18em; color: var(--blue);
}
body.campaign-lawfty #agentView .brand::before {
  content: '';
  display: block;
  width: 34px; height: 34px;
  margin: 0 auto .6rem;
  background-repeat: no-repeat; background-position: center; background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none'%3E%3Cpath d='M32 4C20 4 12 14 12 26c0 10 6 18 14 21l-2 6h16l-2-6c8-3 14-11 14-21C52 14 44 4 32 4z' stroke='%232E75B6' stroke-width='2.5'/%3E%3Cpath d='M22 20c2 8 2 16 0 22M32 16v30M42 20c-2 8-2 16 0 22' stroke='%232E75B6' stroke-width='1.75'/%3E%3Cpath d='M26 53l-4 8h20l-4-8' stroke='%232E75B6' stroke-width='2.5' stroke-linejoin='round'/%3E%3Crect x='25.5' y='58.5' width='13' height='4' rx='1' stroke='%232E75B6' stroke-width='2'/%3E%3C/svg%3E");
}
body.campaign-lawfty #agentView h1.agent-title {
  font-size: 1.85rem; letter-spacing: -.01em; margin-bottom: 2.25rem;
  text-shadow: 0 1px 24px rgba(46,117,182,.25);
}

/* Elevated cards: soft shadow + faint top highlight instead of a flat fill. */
body.campaign-lawfty #agentView .card,
body.campaign-lawfty #agentView .card-log,
body.campaign-lawfty #agentView .auth-box {
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 40%), var(--card);
  border-radius: 20px;
  border-color: rgba(148,175,214,.14);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 24px 60px -24px rgba(0,0,0,.55), 0 8px 24px -12px rgba(0,0,0,.4);
}

/* Soft entrance: cards settle in rather than popping in instantly. Auth box
   and the working layout are never both visible at once, so a single shared
   animation covers the login->working transition without extra JS. */
@keyframes lawftyCardIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
body.campaign-lawfty #agentView .auth-box.active,
body.campaign-lawfty #agentView .layout .card,
body.campaign-lawfty #agentView .layout .card-log {
  animation: lawftyCardIn .45s cubic-bezier(.2,.7,.3,1) both;
}
body.campaign-lawfty #agentView .layout .card-log { animation-delay: .08s; }
@media (prefers-reduced-motion: reduce) {
  body.campaign-lawfty #agentView .auth-box.active,
  body.campaign-lawfty #agentView .layout .card,
  body.campaign-lawfty #agentView .layout .card-log { animation: none; }
}

/* Segmented Sign In / Register control instead of two plain outlined buttons. */
body.campaign-lawfty #agentView .tab-row {
  background: rgba(0,0,0,.2); border: 1px solid var(--border); border-radius: 11px;
  padding: .25rem; gap: .25rem;
}
body.campaign-lawfty #agentView .atab {
  border: none; border-radius: 8px; padding: .55rem;
}
body.campaign-lawfty #agentView .atab.active {
  background: var(--blue); box-shadow: 0 4px 14px -4px rgba(46,117,182,.6);
}

body.campaign-lawfty #agentView input[type="email"],
body.campaign-lawfty #agentView input[type="password"] {
  background: rgba(0,0,0,.22); border-radius: 10px;
}
body.campaign-lawfty #agentView input:focus {
  box-shadow: 0 0 0 3px rgba(46,117,182,.18);
}

body.campaign-lawfty #agentView .btn-primary {
  border-radius: 10px; padding: .9rem;
  background: linear-gradient(180deg, #3a86c8, var(--blue));
  box-shadow: 0 10px 24px -10px rgba(46,117,182,.65);
  transition: opacity .15s, transform .1s, box-shadow .15s;
}
body.campaign-lawfty #agentView .btn-primary:hover {
  transform: translateY(-1px); box-shadow: 0 14px 30px -10px rgba(46,117,182,.75);
}

/* Status box: a distinct sunken panel with its own subtle depth. */
body.campaign-lawfty #agentView .status-box {
  background: rgba(0,0,0,.2);
  border-radius: 16px;
  border-color: rgba(148,175,214,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02), inset 0 2px 10px rgba(0,0,0,.25);
}
body.campaign-lawfty #agentView .greeting { font-size: 1.2rem; }

/* Status pill: glowing dot + slightly bolder chip instead of a flat outline. */
body.campaign-lawfty #agentView .status-pill {
  padding: .4rem 1.1rem 0.4rem .85rem; border-radius: 999px; font-weight: 700;
  display: inline-flex; align-items: center; gap: .5rem;
}
body.campaign-lawfty #agentView .status-pill::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor;
  box-shadow: 0 0 0 3px currentColor, 0 0 10px currentColor; opacity: .85;
}
/* Live pulse while actually on the clock — clocked-out/not-clocked-in stay still. */
@keyframes lawftyPillPulse { 0%,100% { opacity: .85; transform: scale(1); } 50% { opacity: .35; transform: scale(.72); } }
body.campaign-lawfty #agentView .status-pill.pill-working::before,
body.campaign-lawfty #agentView .status-pill.pill-on_break::before,
body.campaign-lawfty #agentView .status-pill.pill-on_lunch::before,
body.campaign-lawfty #agentView .status-pill.pill-on_restroom::before {
  animation: lawftyPillPulse 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  body.campaign-lawfty #agentView .status-pill::before { animation: none; }
}
/* Brief glow right after an action lands — confirms the click actually registered. */
@keyframes lawftyPillFlash {
  0%   { box-shadow: 0 0 0 0 currentColor; }
  30%  { box-shadow: 0 0 0 7px transparent, 0 0 22px 2px currentColor; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
body.campaign-lawfty #agentView .status-pill.pill-flash {
  animation: lawftyPillFlash .6s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  body.campaign-lawfty #agentView .status-pill.pill-flash { animation: none; }
}

/* Timer grid: each timer becomes its own mini card, tinted by its color. */
body.campaign-lawfty #agentView .timers { gap: .6rem; }
body.campaign-lawfty #agentView .timer-block {
  background: rgba(255,255,255,.02); border: 1px solid rgba(148,175,214,.1);
  border-radius: 12px; padding: .7rem .85rem;
}
body.campaign-lawfty #agentView .timer-block .tv { font-size: 1.25rem; }

body.campaign-lawfty #agentView .divider { border-top-color: rgba(148,175,214,.12); margin: 1.1rem 0; }

/* Action buttons: gradient fill + lift on hover instead of a flat block color. */
body.campaign-lawfty #agentView .action-btn {
  border-radius: 11px; padding: .9rem 1rem; letter-spacing: .01em;
  box-shadow: 0 8px 18px -8px rgba(0,0,0,.5);
  transition: opacity .15s, transform .1s, box-shadow .15s;
}
body.campaign-lawfty #agentView .action-btn:hover:not(:disabled) {
  transform: translateY(-1.5px); box-shadow: 0 12px 22px -8px rgba(0,0,0,.55);
}
body.campaign-lawfty #agentView .action-btn:active:not(:disabled),
body.campaign-lawfty #agentView .btn-primary:active {
  transform: scale(.97) translateY(0); transition-duration: .05s;
}
body.campaign-lawfty #agentView .btn-green  { background: linear-gradient(180deg, #5cc491, var(--green)); }
body.campaign-lawfty #agentView .btn-red    { background: linear-gradient(180deg, #f16363, var(--red)); }
body.campaign-lawfty #agentView .btn-orange { background: linear-gradient(180deg, #f7ac2e, var(--orange)); }
body.campaign-lawfty #agentView .btn-purple { background: linear-gradient(180deg, #b79bfb, var(--purple)); }
body.campaign-lawfty #agentView .btn-teal   { background: linear-gradient(180deg, #4fe0d0, var(--teal)); }

/* Activity log: a connected timeline instead of plain stacked rows. */
body.campaign-lawfty #agentView .log-title { border-bottom-color: rgba(148,175,214,.12); }
body.campaign-lawfty #agentView .log-item {
  position: relative; border-bottom: none; padding: .6rem 0 .6rem 1.35rem;
}
body.campaign-lawfty #agentView .log-item::before {
  content: ''; position: absolute; left: 3px; top: 0; bottom: 0; width: 1px;
  background: rgba(148,175,214,.15);
}
body.campaign-lawfty #agentView .log-item:first-child::before { top: 50%; }
body.campaign-lawfty #agentView .log-item:last-child::before { bottom: 50%; }
body.campaign-lawfty #agentView .log-dot {
  position: absolute; left: 0; top: 9px; margin: 0;
  box-shadow: 0 0 0 3px var(--card);
}
body.campaign-lawfty #agentView .log-item {
  border-radius: 8px; transition: background .12s;
}
body.campaign-lawfty #agentView .log-item:hover {
  background: rgba(255,255,255,.03);
}
body.campaign-lawfty #agentView .log-ago {
  color: rgba(148,175,214,.65); font-size: .68rem;
}

/* Toast, feedback modal, theme picker: these live outside #agentView (shared
   with the supervisor dashboard), so this is scoped to body.campaign-lawfty
   only rather than #agentView specifically — still never touches Hudson. */
body.campaign-lawfty .toast {
  border-radius: 12px; padding: .8rem 1.3rem;
  box-shadow: 0 16px 40px -12px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.05) inset;
  backdrop-filter: blur(6px);
}
body.campaign-lawfty .feedback-card {
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 40%), var(--card);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.6);
}
body.campaign-lawfty .feedback-type-btn.active {
  box-shadow: 0 4px 14px -4px rgba(46,117,182,.5);
}
body.campaign-lawfty .theme-picker-panel {
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 40%), var(--card);
  box-shadow: 0 20px 50px -18px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.04) inset;
}
body.campaign-lawfty .theme-swatch.active {
  box-shadow: 0 0 0 1px var(--blue), 0 4px 12px -4px rgba(46,117,182,.5);
}
/* Background picker: the color-preview swatch itself becomes the selection
   indicator (a blue ring appears around it) instead of a separate dot next
   to it — two circles per row read as cluttered/redundant. */
body.campaign-lawfty #agentView .bg-dot,
body.campaign-lawfty #supervisorView .bg-dot {
  transition: box-shadow .15s;
}
body.campaign-lawfty #agentView .theme-swatch.active .bg-dot,
body.campaign-lawfty #supervisorView .theme-swatch.active .bg-dot {
  box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--blue);
}

/* "Live" dot next to the footer clock. */
body.campaign-lawfty #agentView .clock-live-wrap {
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  margin-top: 1.5rem;
}
body.campaign-lawfty #agentView .clock-live-wrap .clock-live { margin-top: 0; }
body.campaign-lawfty #agentView .synced-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 6px var(--green); flex-shrink: 0;
  animation: lawftyPillPulse 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  body.campaign-lawfty #agentView .synced-dot { animation: none; }
}

/* Skeleton shimmer sweep over the status box during the first status fetch
   right after login — cleared by applyAgentState() the moment real data
   lands (see app.js), so it only ever appears on that first brief load. */
body.campaign-lawfty #agentView .status-box { position: relative; overflow: hidden; }
body.campaign-lawfty #agentView #agentMain.loading-skeleton .status-box::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.07) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: lawftyShimmer 1.3s linear infinite;
}
@keyframes lawftyShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  body.campaign-lawfty #agentView #agentMain.loading-skeleton .status-box::after { animation: none; display: none; }
}

body.campaign-lawfty #agentView .clock-live { letter-spacing: .04em; }

/* Hidden DVD-screensaver easter egg — see maybeScheduleDvdEasterEgg() in
   app.js. Positioned fixed to the viewport (not #agentView) since it needs
   to bounce off the actual screen edges, but the id-scoped rule itself is
   only ever created while on a Lawfty agent view, so no extra scoping needed. */
#dvdEasterEgg {
  position: fixed; top: 0; left: 0;
  font-family: Impact, 'Arial Black', Haettenschweiler, sans-serif;
  font-style: italic; font-weight: 900;
  font-size: 1.7rem; letter-spacing: .04em;
  padding: .55rem 1.15rem;
  border: 3px solid currentColor;
  border-radius: 10px;
  background: rgba(8,14,24,.55);
  backdrop-filter: blur(2px);
  pointer-events: none;
  z-index: 99999;
  text-shadow: 0 0 12px currentColor;
  box-shadow: 0 0 20px currentColor;
  transition: opacity .3s, color .15s, border-color .15s;
  user-select: none;
  will-change: transform;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAWFTY — supervisor dashboard design pass.
   Scoped to body.campaign-lawfty #supervisorView (plus #supLock, the login
   screen shown just before it) so Hudson and the agent portal are untouched.
   Deliberately reuses shared classes (.s-card, table, .btn, .stat-card, etc.)
   rather than redesigning each tab individually — every tab is built from
   these same building blocks, so this cascades everywhere automatically.
   ═══════════════════════════════════════════════════════════════════════════ */
body.campaign-lawfty #supervisorView {
  background:
    radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    radial-gradient(1300px 650px at 90% -15%, rgba(46,117,182,.13), transparent 55%),
    radial-gradient(1000px 550px at -10% 40%, rgba(76,175,125,.06), transparent 55%),
    linear-gradient(180deg, #0c1a2e 0%, #0f1e35 45%, #0b1626 100%);
  background-size: 24px 24px, auto, auto, auto;
  background-attachment: fixed;
}
body.campaign-lawfty #supLock {
  background:
    radial-gradient(1300px 650px at 90% -15%, rgba(46,117,182,.13), transparent 55%),
    linear-gradient(180deg, #0c1a2e 0%, #0f1e35 45%, #0b1626 100%);
}
body.campaign-lawfty #supLock .lock-card {
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 40%), var(--card);
  border-radius: 20px; border-color: rgba(148,175,214,.14);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 24px 60px -24px rgba(0,0,0,.55), 0 8px 24px -12px rgba(0,0,0,.4);
}
body.campaign-lawfty #supLock .lock-btn {
  border-radius: 10px;
  background: linear-gradient(180deg, #3a86c8, var(--blue));
  box-shadow: 0 10px 24px -10px rgba(46,117,182,.65);
  transition: opacity .15s, transform .1s, box-shadow .15s;
}
body.campaign-lawfty #supLock .lock-btn:hover { transform: translateY(-1px); }

/* Header */
body.campaign-lawfty #supervisorView header {
  padding-bottom: 1.25rem; margin-bottom: 1.75rem;
  border-bottom: 1px solid rgba(148,175,214,.12);
}
body.campaign-lawfty #supervisorView .sup-brand { font-weight: 700; color: var(--blue); }
body.campaign-lawfty #supervisorView h1.sup-title { font-size: 1.7rem; letter-spacing: -.01em; }
body.campaign-lawfty #supervisorView .live-clock {
  font-size: 1.6rem; text-shadow: 0 0 20px rgba(46,117,182,.35);
}

/* Alert banner */
body.campaign-lawfty #supervisorView #alertBanner {
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(239,68,68,.1), rgba(239,68,68,.05));
  box-shadow: 0 12px 30px -16px rgba(239,68,68,.4);
}

/* Tab bar — active tab gets a soft glow underline instead of a flat line. */
body.campaign-lawfty #supervisorView .tabs { border-bottom-color: rgba(148,175,214,.14); gap: .15rem; }
body.campaign-lawfty #supervisorView .tab-btn {
  border-radius: 8px 8px 0 0; transition: color .15s, background .15s;
}
body.campaign-lawfty #supervisorView .tab-btn:hover { background: rgba(255,255,255,.03); }
body.campaign-lawfty #supervisorView .tab-btn.active {
  background: rgba(46,117,182,.1);
  box-shadow: 0 2px 0 0 var(--blue), 0 0 16px -4px rgba(46,117,182,.5);
}

/* Tab pane entrance — content settles in on every tab switch, not just login. */
@keyframes lawftySupPaneIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
body.campaign-lawfty #supervisorView .tab-pane.active { animation: lawftySupPaneIn .35s cubic-bezier(.2,.7,.3,1) both; }
@media (prefers-reduced-motion: reduce) {
  body.campaign-lawfty #supervisorView .tab-pane.active { animation: none; }
}

/* Cards — the workhorse container used by nearly every tab. */
body.campaign-lawfty #supervisorView .s-card {
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 35%), var(--card);
  border-color: rgba(148,175,214,.12);
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 20px 50px -26px rgba(0,0,0,.55);
  transition: border-color .15s;
}
body.campaign-lawfty #supervisorView .s-card h2 { border-bottom-color: rgba(148,175,214,.12); }

/* Stat cards (Dashboard summary row) */
body.campaign-lawfty #supervisorView .stat-card {
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 40%), var(--card);
  border-color: rgba(148,175,214,.12);
  transition: transform .12s, box-shadow .12s, border-color .15s;
}
body.campaign-lawfty #supervisorView .stat-card:hover {
  box-shadow: 0 10px 24px -12px rgba(0,0,0,.5);
}
body.campaign-lawfty #supervisorView .stat-card.active-filter {
  box-shadow: 0 0 0 1px var(--blue), 0 10px 24px -12px rgba(46,117,182,.4);
}

/* Tables — softer header, subtle row hover lift, glowing status dots. */
body.campaign-lawfty #supervisorView .table-wrap {
  border-radius: 14px; border-color: rgba(148,175,214,.12);
  box-shadow: 0 20px 50px -28px rgba(0,0,0,.55);
}
body.campaign-lawfty #supervisorView thead th {
  background: linear-gradient(180deg, rgba(46,117,182,.14), rgba(46,117,182,.05));
}
body.campaign-lawfty #supervisorView tbody tr { transition: background .12s, transform .1s; }
body.campaign-lawfty #supervisorView tbody tr:hover { transform: translateX(1px); }
body.campaign-lawfty #supervisorView .status-dot {
  box-shadow: 0 0 0 3px currentColor, 0 0 8px currentColor; opacity: .9;
  animation: lawftyDotPulse 2s ease-in-out infinite;
}
body.campaign-lawfty #supervisorView .dot-working  { color: var(--green); }
body.campaign-lawfty #supervisorView .dot-on_break { color: var(--orange); }
body.campaign-lawfty #supervisorView .dot-on_lunch { color: var(--purple); }
body.campaign-lawfty #supervisorView .dot-on_restroom { color: var(--teal); }
@keyframes lawftyDotPulse {
  0%,100% { box-shadow: 0 0 0 3px currentColor, 0 0 8px currentColor; opacity: .9; }
  50% { box-shadow: 0 0 0 3px currentColor, 0 0 14px currentColor; opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
  body.campaign-lawfty #supervisorView .status-dot { animation: none; }
}

/* Controls row (date/text filters) */
body.campaign-lawfty #supervisorView input[type="date"] { border-radius: 8px; }
body.campaign-lawfty #supervisorView .controls input[type="text"] { border-radius: 8px; }

/* Buttons — same gradient/lift language as the agent portal's action buttons. */
body.campaign-lawfty #supervisorView .btn {
  border-radius: 8px; transition: opacity .15s, transform .1s, box-shadow .15s;
  box-shadow: 0 4px 12px -6px rgba(0,0,0,.5);
}
body.campaign-lawfty #supervisorView .btn:hover { transform: translateY(-1px); }
body.campaign-lawfty #supervisorView .btn:active { transform: scale(.96); transition-duration: .05s; }
body.campaign-lawfty #supervisorView .btn-blue   { background: linear-gradient(180deg, #3a86c8, var(--blue)); }
body.campaign-lawfty #supervisorView .btn-green  { background: linear-gradient(180deg, #5cc491, var(--green)); }
body.campaign-lawfty #supervisorView .btn-red    { background: linear-gradient(180deg, #f16363, var(--red)); }
body.campaign-lawfty #supervisorView .btn-orange { background: linear-gradient(180deg, #f7ac2e, var(--orange)); }
body.campaign-lawfty #supervisorView .btn-purple { background: linear-gradient(180deg, #b79bfb, var(--purple)); }

/* Daily Summary card grid */
body.campaign-lawfty #supervisorView .ds-card {
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 40%), var(--card);
  border-color: rgba(148,175,214,.12);
  transition: transform .12s, box-shadow .12s;
}
body.campaign-lawfty #supervisorView .ds-card:hover {
  transform: translateY(-2px); box-shadow: 0 14px 30px -16px rgba(0,0,0,.5);
}

/* Version badge + toast already inherit body.campaign-lawfty .toast / .theme-*
   rules defined above — no supervisor-specific override needed for those. */