:root{
  --ink:#15161A; --ink-soft:#5B5D66; --ink-faint:#93959D;
  --line:#E3E1DA; --paper:#EFF1EF; --card:#FFFFFF;
  --lyd:#FF1267; --b2l:#0B3655; --b2l-gold:#CBA36F; --b2l-blue:#0B3655;
  --ahead:#1E8E5A; --ahead-soft:#E1F3EA;
  --pace:#2C6FBB; --pace-soft:#E5F0FA;
  --watch:#B8790A; --watch-soft:#FBF1DF;
  --behind:#C0392B; --behind-soft:#FBE8E5;
  --lv-orange:#E8622C; --lv-orange-soft:#FDECE3;
  --chrome:#1B1C20; --chrome-soft:#26272C; --chrome-line:#333338;
  --shadow-rest:0 1px 2px rgba(21,22,26,.04), 0 1px 1px rgba(21,22,26,.03);
  --shadow-pop:0 8px 24px rgba(21,22,26,.14), 0 2px 8px rgba(21,22,26,.08);

  /* Recovered from the tab mockups' own :root blocks, which were stripped
     when their CSS was scoped. Without these the tabs silently fall back —
     an undefined var means the declaration is simply dropped. */
  --lyd-pink:#FF1267; --lyd-tint:#FFE7EF;
  --b2l-navy:#0B3655; --b2l-tint:#E7ECF0;
  --canvas:#F6F7F9; --line-soft:#EEF0F3; --weekend-bg:#F4F4F2;
  --radius:10px;
  --shadow-hover:0 10px 28px -10px rgba(21,22,26,.18), 0 2px 6px rgba(21,22,26,.06);
  --status-ahead:#1E8E5A;  --status-ahead-bg:#E8F5EE;
  --status-onpace:#2B6CB0; --status-onpace-bg:#E9F1FA;
  --status-watch:#B7791F;  --status-watch-bg:#FBF2E3;
  --status-behind:#C53030; --status-behind-bg:#FBEAEA;
  --over:#7A4EC2; --over-soft:#EEE4F7;

}
*{box-sizing:border-box;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Roboto',sans-serif;
  -webkit-font-smoothing:antialiased;font-size:14px;}
.mono{font-family:'Roboto Mono',monospace;font-variant-numeric:tabular-nums;}
button{font-family:inherit;cursor:pointer;}
input,select{font-family:inherit;}
:focus-visible{outline:2px solid var(--lv-orange);outline-offset:2px;}

/* ============ BOOT / LOGIN ============ */
#boot{min-height:100vh;display:flex;align-items:center;justify-content:center;color:var(--ink-faint);
  font-size:12.5px;}
#login-screen{min-height:100vh;display:none;align-items:center;justify-content:center;
  background:var(--paper);position:relative;}
#login-screen.show{display:flex;}
.brand-seam{position:absolute;top:0;left:0;right:0;height:3px;display:flex;}
.brand-seam span{flex:1;}
.brand-seam .s-lyd{background:var(--lyd);}
.brand-seam .s-b2l{background:var(--b2l-blue);}
.today-date{position:absolute;top:24px;right:28px;font-size:11.5px;color:var(--ink-faint);font-weight:600;}
.login-card{width:340px;background:var(--card);border-radius:12px;padding:36px 32px 30px;
  border:1px solid var(--line);box-shadow:0 2px 5px rgba(21,22,26,.05), 0 12px 30px rgba(21,22,26,.06);}
.lv-mark{width:34px;height:34px;border-radius:8px;background:var(--lv-orange);display:flex;
  align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:15px;margin-bottom:18px;}
.login-title{font-size:16px;font-weight:700;margin:0 0 2px;}
.login-sub{font-size:12.5px;color:var(--ink-soft);margin:0 0 24px;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:11.5px;font-weight:600;color:var(--ink-soft);margin-bottom:5px;}
.field input{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:7px;
  font-size:13.5px;color:var(--ink);background:#fff;}
.field input:focus{outline:none;border-color:var(--lv-orange);box-shadow:0 0 0 3px var(--lv-orange-soft);}
.btn-primary{width:100%;padding:10px;border:none;border-radius:7px;background:var(--ink);color:#fff;
  font-size:13.5px;font-weight:600;margin-top:6px;}
.btn-primary:hover{background:#000;}
.btn-primary.saved{background:var(--ahead);}
.btn-primary:disabled{cursor:default;opacity:.7;}
.login-foot{font-size:11.5px;color:var(--ink-faint);text-align:center;margin-top:16px;}
.form-error{font-size:12px;color:var(--behind);margin-top:10px;min-height:16px;text-align:center;}

/* ============ SHELL CHROME ============ */
#shell{display:none;min-height:100vh;flex-direction:column;}
#shell.show{display:flex;}
.chrome-bar{background:var(--chrome);color:#fff;display:flex;align-items:center;padding:0 20px;
  height:56px;gap:26px;position:relative;border-bottom:1px solid var(--chrome-line);}
.chrome-logo{display:flex;align-items:center;gap:10px;}
.chrome-logo .mark{width:22px;height:22px;border-radius:6px;background:var(--lv-orange);display:flex;
  align-items:center;justify-content:center;font-weight:900;font-size:11px;flex-shrink:0;}
.chrome-logo .word{font-size:13px;font-weight:700;letter-spacing:.2px;}
.brand-cue{display:flex;gap:3px;margin-left:2px;}
.brand-cue span{width:5px;height:5px;border-radius:50%;}
.brand-cue .c-lyd{background:var(--lyd);}
.brand-cue .c-b2l{background:var(--b2l-blue);}
.chrome-tabs{display:flex;gap:2px;height:100%;margin-left:6px;}
.chrome-tab{display:flex;align-items:center;padding:0 14px;height:100%;color:#B7B8BE;font-size:13px;
  font-weight:500;border-bottom:2px solid transparent;position:relative;top:1px;}
.chrome-tab.active{color:#fff;border-bottom-color:var(--lv-orange);font-weight:600;}
.chrome-tab:hover:not(.active){color:#fff;cursor:pointer;}
.chrome-tab.disabled{color:#5A5B61;cursor:default;}
.chrome-tab .soon{font-size:9.5px;background:#333;color:#9C9DA3;padding:1px 5px;border-radius:9px;margin-left:6px;}
.chrome-right{margin-left:auto;display:flex;align-items:center;gap:16px;}
.month-switch{display:flex;align-items:center;gap:2px;background:#fff;border-radius:8px;padding:4px;
  box-shadow:0 1px 2px rgba(0,0,0,.2);position:relative;}
.month-switch button{background:none;border:none;color:var(--ink-faint);width:24px;height:26px;
  display:flex;align-items:center;justify-content:center;border-radius:5px;font-size:14px;font-weight:700;}
.month-switch button:hover{background:var(--paper);color:var(--ink);}
.month-switch button:disabled{opacity:.3;cursor:default;}
.month-switch button:disabled:hover{background:none;color:var(--ink-faint);}
.month-switch .label{font-size:13px;font-weight:700;color:var(--ink);min-width:96px;text-align:center;
  padding:0 2px;border-radius:5px;cursor:pointer;}
.month-switch .label:hover{background:var(--paper);}
.month-dropdown{display:none;position:absolute;top:38px;left:0;right:0;background:#fff;border-radius:9px;
  box-shadow:var(--shadow-pop);max-height:240px;overflow-y:auto;padding:6px;z-index:40;}
.month-dropdown.open{display:block;}
.month-dropdown .md-item{padding:7px 10px;border-radius:6px;font-size:12.5px;font-weight:500;color:var(--ink);}
.month-dropdown .md-item:hover:not(.disabled){background:var(--paper);cursor:pointer;}
.month-dropdown .md-item.current{background:var(--lv-orange-soft);color:#A8461C;font-weight:700;}
.month-dropdown .md-item.disabled{color:var(--ink-faint);opacity:.4;cursor:default;}
.today-pill{display:none;align-items:center;background:var(--chrome-soft);color:#fff;border:none;
  border-radius:20px;padding:5px 12px;font-size:11.5px;font-weight:600;}
.today-pill.show{display:flex;}
.today-pill:hover{background:#333;}
.user-chip{display:flex;align-items:center;gap:8px;padding:4px 8px 4px 4px;border-radius:20px;position:relative;}
.user-chip:hover{background:var(--chrome-soft);cursor:pointer;}
.user-chip.chip-active{background:var(--chrome-soft);}
.avatar{width:26px;height:26px;border-radius:50%;background:#3A3B41;color:#fff;display:flex;
  align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;}
.user-chip .uname{font-size:12.5px;color:#fff;font-weight:500;}
.user-chip .urole{font-size:10.5px;color:#8C8D93;}
.user-menu{display:none;position:absolute;top:44px;right:0;background:#fff;border-radius:9px;
  box-shadow:var(--shadow-pop);min-width:180px;padding:6px;z-index:40;}
.user-menu.open{display:block;}
.user-menu .um-item{padding:8px 10px;border-radius:6px;font-size:12.5px;color:var(--ink);font-weight:500;
  display:flex;align-items:center;gap:8px;}
.user-menu .um-item:hover{background:var(--paper);cursor:pointer;}
.user-menu .um-item.danger{color:var(--behind);}
.user-menu hr{border:none;border-top:1px solid var(--line);margin:5px 2px;}

/* ============ CONTENT ============ */
.content{flex:1;padding:30px 32px 80px;max-width:1180px;width:100%;margin:0 auto;}
.view{display:none;}
.view.show{display:block;}
.view-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:20px;}
.view-title{font-size:17px;font-weight:700;margin:0;}
.view-sub{font-size:12.5px;color:var(--ink-soft);margin-top:2px;}
.placeholder-card{background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:52px 30px;text-align:center;color:var(--ink-soft);font-size:13px;box-shadow:var(--shadow-rest);}
.placeholder-card .ph-title{font-weight:600;color:var(--ink);font-size:13.5px;margin-bottom:6px;}

/* ============ USERS ============ */
.users-toolbar{display:flex;justify-content:flex-end;margin-bottom:14px;}
.btn-add{background:var(--ink);color:#fff;border:none;border-radius:7px;padding:8px 14px;font-size:12.5px;
  font-weight:600;display:inline-flex;align-items:center;gap:6px;}
.btn-add:hover{background:#000;}
.btn-add:disabled{opacity:.4;cursor:default;}
.users-table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);
  border-radius:10px;box-shadow:var(--shadow-rest);}
.users-table th{text-align:left;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  color:var(--ink-faint);padding:10px 16px;border-bottom:1px solid var(--line);background:#FAFAF8;}
.users-table thead th:first-child{border-top-left-radius:10px;}
.users-table thead th:last-child{border-top-right-radius:10px;}
.users-table tbody tr:last-child td:first-child{border-bottom-left-radius:10px;}
.users-table tbody tr:last-child td:last-child{border-bottom-right-radius:10px;}
.users-table td{padding:12px 16px;border-bottom:1px solid var(--line);font-size:13px;}
.users-table tr:last-child td{border-bottom:none;}
.u-name{display:flex;align-items:center;gap:10px;}
.u-name .avatar{background:#EDEEF0;color:var(--ink-soft);}
.u-name .n{font-weight:600;}
.u-name .e{font-size:11.5px;color:var(--ink-faint);}
.role-badge{font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;display:inline-block;}
.role-editor{background:var(--pace-soft);color:var(--pace);}
.role-view{background:#EDEEF0;color:var(--ink-soft);}
.role-badge.muted{background:#F2F2F0;color:var(--ink-faint);}
.status-pending{font-size:11.5px;color:var(--ink-faint);font-style:italic;}
.row-menu{color:var(--ink-faint);font-size:14px;position:relative;cursor:pointer;width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;border-radius:6px;}
.row-menu:hover{background:var(--paper);}
.row-dropdown{display:none;position:absolute;top:28px;right:0;background:#fff;border-radius:9px;
  box-shadow:var(--shadow-pop);min-width:150px;padding:6px;z-index:30;text-align:left;}
.row-dropdown.open{display:block;}
.row-dropdown.flip-up{top:auto;bottom:28px;}
.row-dropdown .rd-item{padding:8px 10px;border-radius:6px;font-size:12.5px;color:var(--ink);font-weight:500;}
.row-dropdown .rd-item:hover{background:var(--paper);cursor:pointer;}
.row-dropdown .rd-item.danger{color:var(--behind);}
.row-dropdown hr{border:none;border-top:1px solid var(--line);margin:5px 2px;}

/* ============ MODAL ============ */
.modal-veil{display:none;position:fixed;inset:0;background:rgba(21,22,26,.4);align-items:center;
  justify-content:center;z-index:50;}
.modal-veil.open{display:flex;}
.modal{width:360px;background:#fff;border-radius:10px;padding:26px;box-shadow:var(--shadow-pop);}
.modal h3{font-size:15px;margin:0 0 4px;}
.modal .msub{font-size:12px;color:var(--ink-soft);margin:0 0 18px;}
.modal-actions{display:flex;gap:8px;margin-top:18px;}
.btn-secondary{flex:1;background:#fff;border:1px solid var(--line);border-radius:7px;padding:9px;
  font-size:13px;font-weight:600;color:var(--ink);}
.btn-secondary:hover{background:#FAFAF8;}
.modal-actions .btn-primary{flex:1;margin:0;}
.role-options{display:flex;gap:6px;}
.role-opt{flex:1;border:1px solid var(--line);border-radius:7px;padding:8px 6px;text-align:center;
  font-size:11.5px;font-weight:600;color:var(--ink-soft);cursor:pointer;}
.role-opt.selected{border-color:var(--lv-orange);background:var(--lv-orange-soft);color:#A8461C;}

/* ============ TOAST ============ */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(14px);background:var(--ink);
  color:#fff;font-size:12.5px;font-weight:500;padding:10px 16px;border-radius:8px;box-shadow:var(--shadow-pop);
  opacity:0;pointer-events:none;transition:opacity .16s ease, transform .16s ease;z-index:60;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast.bad{background:var(--behind);}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important;}
}

/* ============ Alert bell (shell chrome) ============ */
/* Lives next to the tabs so pacing alerts are visible from any area, not
   only from Offers. Grey-on-dark made it read as decoration, so it's
   white when idle and amber when something is actually waiting. */
.chrome-bell{
  display:flex; align-items:center; gap:6px;
  background:none; border:none; padding:0 10px;
  height:100%; color:#B7B8BE; position:relative; top:1px;
  border-bottom:2px solid transparent;
}
.chrome-bell:hover{ color:#fff; }
.chrome-bell .bell-count{ display:none; }
.chrome-bell.has-alerts{ color:#F0A93B; }
.chrome-bell.has-alerts .bell-count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:17px; height:17px; padding:0 5px;
  background:#F0A93B; color:#1B1C20;
  border-radius:9px; font-size:10.5px; font-weight:700;
}
.chrome-bell.has-alerts:hover{ color:#FFC168; }

/* ============ Searchable advertiser picker ============ */
/* Shared by Offers' Add Offer and API Clients' Add Advertiser forms. */
.adv-picker-wrap{ position:relative; }
.adv-picker-input{ width:100%; }
.adv-picker-list{
  display:none; position:absolute; top:calc(100% + 4px); left:0; right:0;
  background:#fff; border-radius:9px; box-shadow:var(--shadow-pop);
  border:1px solid var(--line); max-height:220px; overflow-y:auto;
  padding:6px; z-index:60;
}
.adv-picker-list.open{ display:block; }
.adv-picker-opt{ padding:7px 10px; border-radius:6px; font-size:13px; color:var(--ink); cursor:pointer; font-weight:400; text-transform:none; letter-spacing:normal; }
.adv-picker-opt:hover, .adv-picker-opt.active{ background:var(--paper); }
.adv-picker-opt.adv-picker-new{ color:var(--lv-orange); font-weight:600; }
.adv-picker-opt.adv-picker-new:hover, .adv-picker-opt.adv-picker-new.active{ background:var(--lv-orange-soft); }
.adv-picker-empty{ padding:10px; font-size:12.5px; color:var(--ink-faint); text-align:center; font-weight:400; text-transform:none; }