/* ============================================================
   HR Cloud — Product Experience
   Design tokens
   ============================================================ */
   :root{
    --sidebar-w: 68px;
    --sidebar-bg: #12151d;
    --sidebar-bg-active: #1c2230;
    --sidebar-text: #8b93a6;
    --sidebar-text-active: #ffffff;
    --sidebar-border: #232838;
  
    /* HR Cloud brand palette (HRC brand guidelines.pdf) */
    --teal: #8d5f9f;
    --teal-dark: #6a4678;
    --teal-light: #f0e6f5;
    --purple: #8d5f9f;
    --purple-dark: #6a4678;
    --ink: #424f56;
  
    --bg-app: #eef1f5;
    --card-bg: #ffffff;
    --border-subtle: #e6e9ef;
  
    --text-primary: #1c2130;
    --text-secondary: #667085;
    --text-tertiary: #98a2b3;
  
    --success: #32b885;
    --danger: #e2503f;
    --warning: #ffb300;
    --info: #028ace;
    --gold: #d7ab3d;
    --silver: #9aa4b2;

    /* Calendar / Absence Tracking pages — shared across both since they're
       siblings, not nested, so page-scoped custom properties won't inherit. */
    --cal-blue: #1A7CC5;
    --cal-blue-dark: #114F84;
    --cal-head-bg: #E3EFF8;

    --shadow-sm: 0 1px 2px rgba(16,24,40,.06), 0 1px 1px rgba(16,24,40,.04);
    --shadow-md: 0 6px 20px rgba(16,24,40,.08);
    --shadow-lg: 0 16px 40px rgba(16,24,40,.14);
    --shell-shadow: 0 40px 90px -24px rgba(141,95,159,.4), 0 12px 34px rgba(141,95,159,.18);
  
    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 26px;
    --radius-shell: 30px;
  
    --font-ui: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Lato', -apple-system, sans-serif;
  
    --ease: cubic-bezier(.4,0,.2,1);
  }
  
  *{ box-sizing: border-box; }
  html,body{ height:100%; }
  body{
    margin:0;
    font-family: var(--font-ui);
    background: transparent;
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    overflow-x:hidden;
    display:flex;
    flex-direction:column;
    padding: 40px 26px 14px;
  }
  
  /* ============================================================
     FLOATING TOP PILL NAV
     ============================================================ */
  .top-pills{
    flex-shrink:0;
    display:flex; justify-content:center; gap:14px;
    margin-bottom:10px;
    opacity:0; transform:translateY(-10px);
    animation: revealUp .5s var(--ease) forwards;
    animation-delay: .05s;
  }
  .top-pill{
    position:relative; overflow:hidden;
    display:flex; align-items:center; gap:8px;
    padding:11px 20px; border-radius:999px;
    background: #ffffff;
    border:1px solid rgba(255,255,255,.6);
    backdrop-filter: blur(8px);
    color: #1c4a4c;
    font-weight:600; font-size:11.1px;
    box-shadow: 0 2px 10px rgba(0,60,65,.06);
    transition: background .25s var(--ease), color .25s var(--ease), transform .2s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
  }
  .top-pill svg{ width:15px; height:15px; flex-shrink:0; transition: transform .3s var(--ease); }
  .top-pill:hover{ background: rgba(255,255,255,.65); transform: translateY(-1px); }
  .top-pill.is-active{
    background: linear-gradient(135deg, #8DC63F, #5DA130);
    color:#fff; border-color:transparent;
    box-shadow: 0 10px 24px rgba(93,161,48,.35);
    transform: translateY(0) scale(1.02);
  }
  .top-pill.is-active:hover{ background: linear-gradient(135deg, #8DC63F, #5DA130); transform: scale(1.02); }

  /* Loading transition — matches personio.com's hero feature-tabs:
     a translucent white wash that wipes across the whole active pill
     (transform-origin left) as its dwell time elapses, rather than a
     separate progress bar. */
  .top-pill-progress{
    position:absolute; inset:0; z-index:0; border-radius:inherit;
    background: rgba(255,255,255,.22);
    transform-origin: 0% 50%; transform: scaleX(0);
    pointer-events:none;
  }
  .top-pill-progress.is-running{ transition: transform linear; transform: scaleX(1); }
  @media (max-width: 860px){
    .top-pills{ flex-wrap:wrap; }
  }

  a{ color:inherit; text-decoration:none; cursor:pointer; }
  button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
  ul{ margin:0; padding:0; list-style:none; }
  img{ display:block; max-width:100%; }
  ::selection{ background: rgba(141,95,159,.25); }
  
  .icon{ width:18px; height:18px; }
  .icon-sm{ width:16px; height:16px; }
  .icon-xs{ width:14px; height:14px; }
  .icon-xxs{ width:13px; height:13px; }
  .icon-lg{ width:30px; height:30px; }
  
  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  }
  
  /* ============================================================
     SHELL
     ============================================================ */
  .app-shell{
    position:relative;
    display:flex;
    flex-direction:column;
    flex: 0 0 auto;
    align-self: center;
    width: 100%;
    max-width: 1240px;
    aspect-ratio: 928 / 580; /* ≈1.6, matches Personio's framed mockup ratio */
    height:auto;
    min-width:0;
    border-radius: var(--radius-shell);
    overflow:hidden;
    background: linear-gradient(180deg, transparent 0px, #ffffff 62px);
    box-shadow: 0 8px 33px -10px rgba(0,0,0,0.28), 0 8px 20px -4px rgba(0,0,0,0.10);
  }
  .app-body{
    display:flex;
    flex:1;
    min-height:0;
  }
  
  /* ============================================================
     SIDEBAR
     ============================================================ */
  .sidebar{
    width: var(--sidebar-w);
    flex-shrink:0;
    background: var(--sidebar-bg);
    border-right:1px solid var(--sidebar-border);
    display:flex;
    flex-direction:column;
    padding: 18px 12px 16px;
    position:relative;
    transform: translateX(-100%);
    opacity:0;
    animation: sidebarIn .7s var(--ease) forwards;
  }
  @keyframes sidebarIn{
    to{ transform:translateX(0); opacity:1; }
  }
  
  .sidebar-brand{
    display:flex; align-items:center; justify-content:center; gap:10px;
    padding: 6px 8px 10px;
    color:#fff;
  }
  .brand-mark{
    display:flex; align-items:center; justify-content:center;
  }
  .brand-mark img{ height:28px; width:auto; display:block; }
  .brand-name{
    font-family: var(--font-display);
    font-weight:600; font-size:12px;
    display:flex; align-items:center; gap:4px;
  }
  .brand-caret{ color:var(--sidebar-text); font-size:9.9px; }
  
  .sidebar-nav{ display:flex; flex-direction:column; gap:1px; }
  .nav-item{
    display:flex; align-items:center; gap:11px;
    padding: 6px 10px;
    border-radius: 9px;
    color: var(--sidebar-text);
    font-size:11.1px;
    font-weight:500;
    transition: background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
    position:relative;
  }
  .nav-item:hover{ background: var(--sidebar-bg-active); color:#dfe3ec; transform: translateX(2px); }
  .nav-item.is-active{ background: var(--sidebar-bg-active); color: var(--sidebar-text-active); }
  .nav-item.is-active::before{
    content:"";
    position:absolute; left:-12px; top:50%; transform:translateY(-50%);
    width:3px; height:18px; border-radius:3px;
    background: var(--teal);
  }
  .nav-icon{ flex-shrink:0; width:18px; height:18px; display:flex; align-items:center; justify-content:center; }
  .nav-icon svg{ width:17px; height:17px; transition: transform .2s var(--ease); }
  .nav-item:hover .nav-icon svg{ transform: rotate(-4deg) scale(1.06); }

  /* Only Tasks/Onboard/Directory-People/Perform/Surveys are wired up —
     every other sidebar item is decorative here, so strip the
     clickable affordance and dim it rather than implying it works. */
  .nav-item:not([data-target]){
    opacity: .45;
    cursor: default;
    pointer-events: none;
  }
  .nav-icon.dot{
    width:19px; height:19px; border-radius:5.5px; background: var(--dot,#888);
    margin:0;
  }
  .nav-icon.dot svg{ width:11px; height:11px; }
  .nav-icon-img{ flex-shrink:0; width:21px; height:21px; display:flex; align-items:center; justify-content:center; }
  .nav-icon-img img{ width:100%; height:100%; object-fit:contain; }
  .nav-icon-img--lg{ width:31px; height:31px; margin-left:-5px; }
  /* nav-perform.png has built-in transparent padding, so it renders
     visibly smaller than the other flat-art nav icons at the same
     box size — scale it up to match Onboard's visual weight. */
  .app-perform .nav-icon-img img{ transform: scale(1.55); }
  .nav-label{ flex:1; white-space:nowrap; }
  .nav-badge{
    background: var(--danger);
    color:#fff; font-size:8.6px; font-weight:700;
    padding: 1px 6px; border-radius: 20px;
  }
  
  .sidebar-section-label{
    margin: 10px 10px 4px;
    font-size:8.6px; font-weight:700; letter-spacing:.08em;
    text-transform: uppercase;
    color:#565f74;
  }
  .sidebar-apps{ flex:1; overflow-y:auto; scrollbar-width:none; }
  .sidebar-apps::-webkit-scrollbar{ display:none; }
  
  .sidebar-collapse{
    align-self:flex-start;
    margin: 6px 6px 0;
    color: var(--sidebar-text);
    width:26px; height:26px;
    display:flex; align-items:center; justify-content:center;
    border-radius:8px;
    transition: background .18s var(--ease);
  }
  .sidebar-collapse:hover{ background: var(--sidebar-bg-active); color:#fff; }

  /* Minimized icon-only rail — labels/badges/section headers hidden,
     icons centered, per the "keep only logos and icons visible" ask. */
  .brand-name, .nav-label, .nav-badge, .sidebar-section-label, .sidebar-collapse{ display:none; }
  .nav-item{ justify-content:center; gap:0; }
  .nav-item.is-active::before{ display:none; }

  /* ============================================================
     MAIN COLUMN
     ============================================================ */
  .main-col{
    flex:1;
    min-width:0;
    display:flex; flex-direction:column;
    height:100%;
    overflow:hidden;
    position:relative;
  }
  
  /* ============================================================
     TOPBAR — single full-width bar above sidebar + content
     ============================================================ */
  .topbar{
    flex-shrink:0;
    display:flex; align-items:center; gap:16px;
    height:64px;
    padding: 0 20px;
    background: #3d464d;
    opacity:0;
    transform: translateY(-14px);
    animation: topbarIn .6s var(--ease) forwards;
    animation-delay: .18s;
  }
  @keyframes topbarIn{ to{ opacity:1; transform:translateY(0);} }
  
  .topbar-logo{
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
    transform: translateY(3px);
  }
  .topbar-logo img{ height:26px; width:auto; display:block; }

  .topbar-center{ flex:1; min-width:0; display:flex; align-items:center; justify-content:flex-end; gap:14px; transform: translateY(3px); }
  
  .topbar-banner{
    background: rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.14);
    border-radius: 20px;
    color:#c7d0d6;
    font-size:8.2px;
    display:flex; align-items:center; gap:8px;
    padding:8px 8px 8px 14px;
    white-space:nowrap;
    flex-shrink:1;
    min-width:0;
    overflow:hidden;
  }
  .topbar-banner span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .topbar-banner a{ color:#8fe0da; font-weight:600; flex-shrink:0; }
  .banner-icon svg{ width:14px; height:14px; color:#8fe0da; flex-shrink:0; }
  .banner-close{
    margin-left:2px; color:#9aa4ac; font-size:8px; flex-shrink:0;
    width:20px; height:20px; border-radius:6px;
    display:flex; align-items:center; justify-content:center;
  }
  .banner-close:hover{ background: rgba(255,255,255,.1); color:#fff; }
  
  .topbar-search{
    width:260px; flex-shrink:0;
    display:flex; align-items:center; gap:8px;
    background: rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.14);
    border-radius: 20px;
    padding: 8px 14px;
    transition: box-shadow .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
  }
  .topbar-search:focus-within{
    background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3);
    box-shadow: 0 0 0 3px rgba(255,255,255,.06);
  }
  .topbar-search .search-icon svg{ color:#aab3ba; width:15px; height:15px; }
  .topbar-search input{
    border:none; outline:none; background:transparent;
    font-size:8.6px; width:100%; min-width:0; color:#eef1f3;
    font-family: inherit;
  }
  .topbar-search input::placeholder{ color:#9aa4ac; }
  
  .topbar-icons{ display:flex; align-items:center; gap:2px; flex-shrink:0; margin-right:-16px; }
  .icon-btn{
    width:34px; height:34px; border-radius:9px;
    display:flex; align-items:center; justify-content:center;
    color:#b7c0c7;
    position:relative;
    transition: background .18s var(--ease), color .18s var(--ease), transform .15s var(--ease);
  }
  .icon-btn svg{ width:18px; height:18px; }
  .icon-btn:hover{ background: rgba(255,255,255,.1); color:#fff; transform: translateY(-1px); }
  .icon-btn.has-badge .pulse-dot{
    position:absolute; top:6px; right:7px;
    width:7px; height:7px; border-radius:50%;
    background: var(--danger);
    box-shadow: 0 0 0 0 rgba(226,80,63,.6);
    animation: pulse 2.2s infinite;
  }
  @keyframes pulse{
    0%{ box-shadow: 0 0 0 0 rgba(226,80,63,.55); }
    70%{ box-shadow: 0 0 0 6px rgba(226,80,63,0); }
    100%{ box-shadow: 0 0 0 0 rgba(226,80,63,0); }
  }
  .avatar-btn{
    display:flex; align-items:center; gap:5px;
    margin-left:6px;
    padding:2px 4px 2px 2px;
    border-radius: 20px;
    transition: background .18s var(--ease);
  }
  .avatar-btn:hover{ background: rgba(255,255,255,.1); }
  .avatar-btn img{ width:28px; height:28px; border-radius:50%; object-fit:cover; }
  .avatar-btn .caret{ font-size:6.6px; color:#aab3ba; }
  
  /* avatar dropdown */
  .avatar-wrap{ position:relative; }
  .avatar-dropdown{
    position:fixed; width:270px;
    background:#fff; border-radius:14px; border:1px solid var(--border-subtle);
    box-shadow: var(--shadow-lg); padding:16px 0 14px; z-index:200;
    opacity:0; visibility:hidden; transform: translateY(-8px);
    transition: opacity .16s var(--ease), transform .16s var(--ease), visibility 0s linear .16s;
  }
  .avatar-dropdown.is-open{
    opacity:1; visibility:visible; transform:translateY(0);
    transition: opacity .16s var(--ease), transform .16s var(--ease);
  }
  .avatar-dd-head{ padding:0 18px 14px; margin-bottom:8px; border-bottom:1px solid var(--border-subtle); }
  .avatar-dd-name{ font-weight:700; font-size:10px; color: var(--text-primary); }
  .avatar-dd-role{ font-size:8px; color: var(--text-tertiary); margin-top:2px; }
  .avatar-dd-menu{ display:flex; flex-direction:column; gap:1px; padding:2px 8px; border-bottom:1px solid var(--border-subtle); margin-bottom:4px; }
  .avatar-dd-menu--last{ margin-bottom:0; }
  .avatar-dd-item{
    display:flex; align-items:center; gap:10px;
    padding:9px 10px; border-radius:9px;
    font-size:9px; font-weight:500; color: var(--text-primary);
    position:relative; transition: background .15s var(--ease);
  }
  .avatar-dd-item:hover{ background: var(--bg-app); }
  .avatar-dd-item svg{ width:16px; height:16px; color: var(--text-tertiary); flex-shrink:0; }
  .avatar-dd-item .chev{ margin-left:auto; color: var(--text-tertiary); font-size:8.6px; }
  .avatar-dd-footer{ background: var(--bg-app); padding:12px 0 4px; margin-top:6px; border-radius:0 0 13px 13px; }
  .avatar-dd-app{ display:flex; align-items:center; gap:10px; padding:0 18px 10px; }
  .avatar-dd-app-badge{
    width:32px; height:32px; border-radius:9px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
  }
  .avatar-dd-app-badge img{ width:100%; height:100%; object-fit:contain; }
  .avatar-dd-app-name{ font-size:8.2px; font-weight:700; color: var(--text-primary); }
  .store-buttons{ display:flex; gap:8px; padding:0 18px 8px; }
  .store-btn{
    flex:1; display:flex; align-items:center; justify-content:center; gap:5px;
    background:#fff; border:1px solid var(--border-subtle); border-radius:8px; padding:7px 4px;
    font-size:7.4px; font-weight:600; color: var(--text-secondary);
    transition: box-shadow .15s var(--ease);
  }
  .store-btn:hover{ box-shadow: var(--shadow-sm); }
  .store-btn svg{ width:12px; height:12px; flex-shrink:0; }
  .download-link{ display:block; padding:2px 18px 2px; font-size:8px; font-weight:600; color: var(--to-blue, #2FA0D6); }
  .download-link:hover{ text-decoration: underline; }
  
  .switch-flyout{
    position:absolute; top:-16px; right: calc(100% + 10px);
    width:280px; max-height:420px; overflow-y:auto;
    background:#fff; border:1px solid var(--border-subtle); border-radius:14px;
    box-shadow: var(--shadow-lg); padding:8px;
    opacity:0; visibility:hidden; transform: translateX(6px);
    transition: opacity .15s var(--ease), transform .15s var(--ease), visibility 0s linear .15s;
  }
  .avatar-dd-switch:hover .switch-flyout{
    opacity:1; visibility:visible; transform:translateX(0);
    transition: opacity .15s var(--ease), transform .15s var(--ease);
  }
  .switch-row{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:9px; transition: background .15s; }
  .switch-row:hover, .switch-row.is-active{ background: var(--bg-app); }
  .switch-row img{ width:30px; height:30px; border-radius:50%; object-fit:cover; flex-shrink:0; }
  .switch-row .chip{ width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:7.4px; font-weight:700; flex-shrink:0; }
  .switch-row-name{ font-size:8.2px; font-weight:700; color: var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:190px; }
  .switch-row-role{ font-size:7.4px; color: var(--text-tertiary); }
  
  /* ============================================================
     CONTENT / PAGES
     ============================================================ */
  .content-wrap{
    flex:1;
    min-width:0;
    min-height:0;
    display:flex;
    flex-direction:column;
    position:relative;
    overflow:hidden;
  }
  .content{
    flex:1;
    overflow-y:auto;
    padding: 22px 28px 60px;
  }
  .content:has(> #page-perform.is-active),
  .content:has(> #page-surveys.is-active){ overflow: hidden; }
  .page{ display:none; }
  .page.is-active{ display:block; animation: pageIn .28s var(--ease) both; }
  @keyframes pageIn{
    from{ opacity:0; transform: translateY(10px) scale(.995); }
    to{ opacity:1; transform: translateY(0) scale(1); }
  }
  .page.page-leaving{
    animation: pageOut .2s var(--ease) both;
  }
  @keyframes pageOut{
    to{ opacity:0; transform: translateY(-8px) scale(.995); }
  }
  
  /* reveal-on-load stagger */
  .reveal{
    opacity:0;
    transform: translateY(22px);
    animation: revealUp .55s var(--ease) forwards;
    animation-delay: calc(.28s + (var(--d, 0) * 80ms));
  }
  @keyframes revealUp{ to{ opacity:1; transform:translateY(0); } }
  
  /* generic card */
  .card{
    background: var(--card-bg);
    border-radius: var(--radius-md);
    border:1px solid var(--border-subtle);
    box-shadow: var(--shadow-sm);
    padding: 20px 22px;
    margin-bottom: 20px;
    transition: box-shadow .25s var(--ease), transform .25s var(--ease);
  }
  .two-col{ display:grid; grid-template-columns: 1.15fr .85fr; gap:20px; margin-bottom:20px; }
  .two-col .card{ margin-bottom:0; }

  .card-head{
    display:flex; align-items:baseline; gap:10px; margin-bottom:14px;
  }
  .card-title{
    font-family: var(--font-ui);
    font-size:8.2px; font-weight:700;
    text-transform: uppercase; letter-spacing:.04em;
    display:flex; align-items:center; gap:8px;
    color: var(--text-secondary);
  }
  .title-icon{ color: var(--text-secondary); display:flex; }
  .card-sub{ font-size:8px; color: var(--text-tertiary); }
  .card-link{
    margin-left:auto; font-size:7.4px; font-weight:700; color: var(--teal-dark);
    text-transform: uppercase; letter-spacing:.03em;
    transition: color .15s var(--ease);
  }
  .card-link:hover{ color: var(--teal); text-decoration:underline; }
  .card-foot{ display:flex; align-items:center; gap:16px; margin-top:14px; }
  
  /* ============================================================
     WORKMATES: product subnav
     ============================================================ */
  .product-subnav{
    display:flex; align-items:center; gap:26px;
    padding-bottom: 14px;
    border-bottom:1px solid var(--border-subtle);
    margin-bottom: 20px;
    font-size:9px; font-weight:600; color: var(--text-secondary);
  }
  .product-subnav.no-underline{ border-bottom:none; padding-bottom:0; margin-bottom:0; }
  .sub-link{ display:flex; align-items:center; gap:6px; padding-bottom:6px; position:relative; transition: color .15s; }
  .sub-link:hover{ color: var(--text-primary); }
  .sub-link.is-active{ color: var(--teal-dark); }
  .sub-link.is-active::after{
    content:""; position:absolute; left:0; right:0; bottom:-15px; height:2.5px;
    background: var(--teal); border-radius:2px;
  }
  .sub-link svg{ color: var(--text-tertiary); }
  .sub-link.is-active svg{ color: var(--teal-dark); }
  
  /* hero */
  .hero-card{ border-radius: var(--radius-lg); overflow:hidden; margin-bottom:20px; box-shadow: var(--shadow-md); }
  .hero-banner{
    position:relative;
    height: 220px;
    background:
      radial-gradient(120% 140% at 15% 0%, rgba(255,196,120,.35), transparent 55%),
      linear-gradient(180deg, #14212a 0%, #0b1116 100%);
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
  }
  .hero-overlay{
    position:absolute; inset:0;
    background: radial-gradient(60% 90% at 50% 40%, rgba(0,0,0,0), rgba(0,0,0,.45));
  }
  .hero-plants{ position:absolute; inset:0; width:100%; height:100%; }
  .hero-bulbs{
    position:absolute; top:14px; left:0; right:0;
    display:flex; justify-content:space-evenly;
  }
  .hero-bulbs span{
    width:8px; height:8px; border-radius:50%;
    background: radial-gradient(circle, #ffe9b8, #d99a3d 70%);
    box-shadow: 0 0 12px 4px rgba(255,205,120,.55);
    animation: flicker 3.4s ease-in-out infinite;
  }
  .hero-bulbs span:nth-child(2n){ animation-delay: .6s; }
  .hero-bulbs span:nth-child(3n){ animation-delay: 1.2s; }
  @keyframes flicker{ 0%,100%{ opacity:.75; } 50%{ opacity:1; } }
  .hero-brand{ position:relative; display:flex; align-items:center; gap:14px; color:#fff; z-index:2; }
  .hero-brand-icon{
    width:46px; height:46px; border-radius:50%;
    background: rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.2);
    display:flex; align-items:center; justify-content:center;
    color:#f4c477;
  }
  .hero-brand-title{
    font-family: var(--font-display);
    font-size:17.4px; font-weight:700; letter-spacing:.06em;
  }
  .hero-actions{ position:absolute; bottom:16px; right:18px; z-index:3; display:flex; gap:8px; }
  .hero-edit-btn{
    background: rgba(255,255,255,.12);
    color:#fff; font-size:8.2px; font-weight:600;
    padding:7px 14px; border-radius:8px;
    border:1px solid rgba(255,255,255,.25);
    backdrop-filter: blur(6px);
    transition: background .18s var(--ease), transform .18s var(--ease);
  }
  .hero-edit-btn:hover{ background: rgba(255,255,255,.22); transform: translateY(-1px); }
  .hero-settings-btn{
    width:34px; height:34px; border-radius:8px;
    background: rgba(255,255,255,.12);
    color:#fff;
    border:1px solid rgba(255,255,255,.25);
    backdrop-filter: blur(6px);
    display:flex; align-items:center; justify-content:center;
    transition: background .18s var(--ease), transform .18s var(--ease);
  }
  .hero-settings-btn:hover{ background: rgba(255,255,255,.22); transform: translateY(-1px); }
  
  .hero-subnav{
    position:absolute; left:26px; bottom:16px; z-index:3;
    padding-bottom:0; border-bottom:none; margin-bottom:0;
    color: rgba(255,255,255,.78);
  }
  .hero-subnav .sub-link{ color:inherit; }
  .hero-subnav .sub-link svg{ color: rgba(255,255,255,.78); }
  .hero-subnav .sub-link:hover{ color:#fff; }
  .hero-subnav .sub-link:hover svg{ color:#fff; }
  .hero-subnav .sub-link.is-active{ color:#fff; }
  .hero-subnav .sub-link.is-active svg{ color:#fff; }
  .hero-subnav .sub-link.is-active::after{ background:#fff; }
  
  /* announcement */
  .announcement-body{ display:flex; gap:20px; }
  .announcement-photo{
    width: 62%; flex-shrink:0; border-radius: var(--radius-sm); overflow:hidden;
    aspect-ratio: 3/1;
  }
  .announcement-photo img{ width:100%; height:100%; object-fit:cover; }
  .announcement-copy{ flex:1; }
  .announcement-meta{ font-size:7.4px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color: var(--text-tertiary); margin-bottom:4px; }
  .announcement-copy h3{ margin:0 0 8px; font-family: var(--font-display); font-size:12.7px; }
  .announcement-copy p{ margin:0 0 14px; color: var(--text-secondary); font-size:9px; line-height:1.6; }
  .btn-read-more{
    background: var(--teal); color:#fff; font-size:7.6px; font-weight:700;
    text-transform: uppercase; letter-spacing:.03em;
    padding:9px 18px; border-radius:9px;
    transition: transform .15s var(--ease), box-shadow .2s var(--ease), background .18s;
    box-shadow: 0 2px 8px rgba(141,95,159,.25);
  }
  .btn-read-more:hover{ background: var(--teal-dark); transform: translateY(-2px) scale(1.02); box-shadow: 0 6px 16px rgba(141,95,159,.35); }
  
  /* stat tabs (assigned tasks) */
  .stat-tabs{ display:flex; gap:0; margin-bottom:14px; border:1px solid var(--border-subtle); border-radius:12px; overflow:hidden; }
  .stat-tab{
    flex:1; text-align:center; padding:12px 8px;
    border-right:1px solid var(--border-subtle);
    transition: background .18s;
    cursor:pointer;
  }
  .stat-tab:last-child{ border-right:none; }
  .stat-tab:hover{ background: var(--bg-app); }
  .stat-tab.is-active{ background: var(--teal-light); }
  .stat-num{ display:block; font-size:13.4px; font-weight:700; font-family: var(--font-display); color: var(--text-primary); }
  .stat-num.danger{ color: var(--danger); }
  .stat-num.warn{ color: var(--warning); }
  .stat-label{ font-size:7.4px; color: var(--text-tertiary); text-transform:uppercase; letter-spacing:.04em; }
  
  .task-list{ display:flex; flex-direction:column; }
  .task-row{
    display:flex; align-items:center; gap:12px;
    padding: 11px 4px;
    border-bottom:1px solid var(--border-subtle);
    transition: background .18s var(--ease), transform .18s var(--ease);
    border-radius:8px;
  }
  .task-row:hover{ background: var(--bg-app); transform: translateX(2px); }
  .task-row:last-child{ border-bottom:none; }
  .task-icon{
    width:32px; height:32px; border-radius:9px;
    background: #f2ecf5; color: var(--purple);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .task-icon img{ width:20px; height:20px; object-fit:contain; }
  .task-body{ flex:1; min-width:0; }
  .task-title{ font-size:9px; font-weight:600; color: var(--text-primary); }
  .task-sub{ font-size:8px; color: var(--text-tertiary); }
  .task-sub a{ color: var(--teal-dark); font-weight:600; }
  .badge{ font-size:7.4px; font-weight:700; padding:4px 9px; border-radius:20px; white-space:nowrap; }
  .btn-new-task{
    display:flex; align-items:center; gap:6px;
    background: var(--teal-light); color: var(--teal-dark);
    font-size:8.2px; font-weight:700; padding:9px 14px; border-radius:9px;
    transition: background .18s, transform .15s;
  }
  .btn-new-task:hover{ background:#d3f0ed; transform: translateY(-1px); }
  
  /* kudos */
  .kudos-list{ display:flex; flex-direction:column; gap:14px; }
  .kudos-row{
    position:relative; display:flex; gap:12px; padding: 16px 18px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg,#e2f5ef,#d7f0ea);
    overflow:hidden;
  }
  .kudos-decor{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
  .kudos-decor svg{ position:absolute; right:0; bottom:0; width:220px; height:auto; opacity:.9; }
  .kudos-avatar{ width:36px; height:36px; border-radius:50%; object-fit:cover; flex-shrink:0; position:relative; z-index:2; }
  .kudos-body{ flex:1; min-width:0; position:relative; z-index:2; }
  .kudos-name{ font-size:8.6px; font-weight:700; color: var(--text-primary); }
  .kudos-date{ font-weight:500; color: var(--text-secondary); font-size:7.6px; display:block; margin-top:1px; }
  .kudos-msg{ font-size:8.6px; color: var(--text-secondary); margin-top:8px; }
  .kudos-badge-wrap{ flex-shrink:0; width:180px; position:relative; z-index:2; padding-top:2px; }
  .kudos-badge-head{ display:flex; align-items:center; gap:8px; }
  .kudos-badge-circle{
    width:38px; height:38px; border-radius:50%; background:#fff; flex-shrink:0;
    box-shadow: 0 3px 8px rgba(15,90,80,.18);
    display:flex; align-items:center; justify-content:center; position:relative;
  }
  .kudos-badge-circle svg{ width:20px; height:20px; color: var(--teal-dark); }
  .kudos-badge-pill{
    background: var(--teal); color:#fff; font-size:7.4px; font-weight:700;
    padding:6px 14px; border-radius:14px; white-space:nowrap;
    box-shadow: 0 3px 8px rgba(15,90,80,.15);
  }
  .medal-mini{
    width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    color:#fff; font-weight:700; font-size:8px; position:relative;
  }
  .medal-mini.medal-gold{ background: linear-gradient(145deg,#f3d27a,var(--gold)); }
  .medal-mini.medal-silver{ background: linear-gradient(145deg,#c9d0da,var(--silver)); }
  .medal-mini::before, .medal-mini::after{ content:""; position:absolute; bottom:-5px; width:6px; height:9px; background:inherit; filter:brightness(.85); }
  .medal-mini::before{ left:3px; transform:skewX(-10deg); }
  .medal-mini::after{ right:3px; transform:skewX(10deg); }
  .kudos-elbow{
    width:19px; height:20px; margin-left:18px;
    border-left:2px dotted rgba(13,110,100,.4); border-bottom:2px dotted rgba(13,110,100,.4);
    border-bottom-left-radius:10px;
  }
  .kudos-recip-row{ display:flex; gap:16px; margin-left:14px; }
  .kudos-recip{ display:flex; flex-direction:column; align-items:center; gap:4px; }
  .kudos-recip img, .kudos-recip .recipient-chip{
    width:34px; height:34px; border-radius:50%; object-fit:cover;
    box-shadow: 0 3px 8px rgba(15,90,80,.15);
  }
  .recipient-chip{ background: var(--purple); color:#fff; font-size:7.4px; font-weight:700; display:flex; align-items:center; justify-content:center; }
  .kudos-recip .recip-name{ font-size:6.9px; color: var(--text-secondary); font-weight:600; }
  
  /* ============================================================
     PRODUCT HEADER (People / Onboard)
     ============================================================ */
  .product-header{
    border-radius: var(--radius-md);
    padding: 22px 26px 18px;
    margin-bottom: 18px;
    color:#fff;
    position:relative;
    overflow:hidden;
  }
  .product-header h1{
    margin:0 0 10px; font-family: var(--font-display); font-size:17.4px; font-weight:600;
    opacity:0; transform: translateY(10px);
    animation: revealUp .5s var(--ease) forwards; animation-delay:.15s;
  }
  .product-header--timeoff{ background: #7FBB4E; }
  .product-header-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
  .product-header-top h1{ margin-bottom:10px; }
  .header-tabs{ display:flex; gap:22px; font-size:9px; font-weight:600; }
  .header-tabs a{ opacity:.78; padding-bottom:8px; position:relative; }
  .header-tabs a:hover{ opacity:1; }
  .header-tabs a.is-active{ opacity:1; }
  .header-tabs a.is-active::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:2.5px; background:#fff; border-radius:2px;
  }
  .header-actions{ position:absolute; right:26px; top:22px; display:flex; gap:8px; }
  .btn-ghost-light{
    display:flex; align-items:center; gap:6px;
    background: rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3);
    color:#fff; font-size:8.2px; font-weight:600; padding:8px 14px; border-radius:9px;
    transition: background .18s, transform .15s;
  }
  .btn-ghost-light:hover{ background: rgba(255,255,255,.24); transform: translateY(-1px); }
  
  .search-expand{
    display:flex; align-items:center; gap:8px;
    background:#fff; border:1px solid var(--border-subtle); border-radius:10px;
    padding:9px 14px; width: 260px;
    transition: width .3s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
  }
  .search-expand:focus-within{ width: 360px; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0,196,201,.14); }
  .search-expand input{ border:none; outline:none; flex:1; font-size:8.6px; font-family:inherit; }
  .search-expand .search-icon svg{ color: var(--text-tertiary); width:15px; height:15px; }
  
  /* ============================================================
     ORG CHART
     ============================================================ */
  .orgchart-wrap{ overflow-x:auto; padding: 10px 0 30px; }
  .orgchart{ display:flex; flex-direction:column; align-items:center; min-width: 900px; }
  .org-tier--ceo{ display:flex; flex-direction:column; align-items:center; position:relative; }
  .org-connector{
    width:2px; height:34px;
    background: repeating-linear-gradient(180deg, var(--border-subtle) 0 6px, transparent 6px 12px);
  }
  .org-tier--reports{
    display:flex; gap:28px; position:relative; padding-top:34px;
  }
  .org-tier--reports::before{
    content:"";
    position:absolute; top:0; left: calc(50% - (100% - 220px)/2 ); right: calc(50% - (100% - 220px)/2 );
    height:0;
  }
  .org-tier--reports{
    --n: 4;
  }
  .org-tier--reports::after{
    content:"";
    position:absolute;
    top:0; height:16px;
    left: 110px; right:110px;
    border-top: 2px dashed var(--border-subtle);
  }
  .org-tier--reports .emp-card{ position:relative; }
  .org-tier--reports .emp-card::before{
    content:"";
    position:absolute; top:-16px; left:50%; width:2px; height:16px;
    background: repeating-linear-gradient(180deg, var(--border-subtle) 0 5px, transparent 5px 10px);
  }
  
  .emp-card{
    width: 210px;
    background:#fff;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 22px 16px 16px;
    text-align:center;
    position:relative;
    box-shadow: var(--shadow-sm);
    transition: transform .22s var(--ease), box-shadow .22s var(--ease);
  }
  .emp-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-lg); }
  .emp-accent{ position:absolute; top:0; left:0; right:0; height:4px; border-radius: var(--radius-md) var(--radius-md) 0 0; background: var(--teal); }
  .emp-card--ceo{ width:230px; }
  .emp-card--ceo .emp-accent{ background: linear-gradient(90deg, var(--teal), var(--purple)); }
  .emp-photo{
    width:64px; height:64px; margin: 4px auto 10px; position:relative;
    transform: scale(.9); animation: avatarPop .4s var(--ease) forwards;
    animation-delay: .1s;
  }
  @keyframes avatarPop{ to{ transform:scale(1); } }
  .emp-photo img{ width:100%; height:100%; border-radius:50%; object-fit:cover; border:2px solid #fff; box-shadow:0 0 0 1px var(--border-subtle); }
  .emp-star{ position:absolute; bottom:-2px; left:-2px; background:#fff; border-radius:50%; width:18px; height:18px; font-size:6.6px; color:#d7ab3d; display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow-sm); }
  .emp-online{ position:absolute; bottom:2px; right:2px; width:12px; height:12px; border-radius:50%; background: var(--success); border:2px solid #fff; }
  .emp-name{ font-weight:700; font-size:9.7px; margin-bottom:8px; }
  .emp-meta{ display:flex; flex-direction:column; gap:5px; align-items:flex-start; padding-left: 18px; }
  .emp-meta li{ display:flex; align-items:center; gap:6px; font-size:7.6px; color: var(--text-secondary); text-align:left; }
  .emp-meta svg{ color: var(--text-tertiary); flex-shrink:0; }
  .emp-add{
    margin-top:12px;
    width:26px; height:26px; border-radius:50%;
    border:1.5px dashed var(--border-subtle); color: var(--text-tertiary);
    font-size:9.4px; line-height:1;
    transition: all .18s var(--ease);
  }
  .emp-add:hover{ border-color: var(--teal); color: var(--teal); background: var(--teal-light); transform: scale(1.1); }
  
  /* ============================================================
     ONBOARD: KPI row
     ============================================================ */
  .kpi-row{ display:grid; grid-template-columns: repeat(4,1fr); gap:16px; margin-bottom:20px; }
  .kpi-card{
    background:#fff; border:1px solid var(--border-subtle); border-radius: var(--radius-md);
    padding: 18px 18px 16px; box-shadow: var(--shadow-sm);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease);
  }
  .kpi-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); }
  .kpi-num{ font-family: var(--font-display); font-size:17.4px; font-weight:700; }

  /* mini bar chart */
  .bar-chart{ display:flex; align-items:flex-end; gap:22px; height:180px; padding: 10px 6px 0; }
  .bar-chart-col{ display:flex; flex-direction:column; align-items:center; gap:8px; flex:1; height:100%; justify-content:flex-end; }
  .bar-chart-bar{
    width:100%; max-width:44px; border-radius: 8px 8px 4px 4px;
    background: linear-gradient(180deg, #2fc2b8, #0f8c84);
    height:0; transition: height 1s var(--ease);
  }
  .bar-chart-col span{ font-size:7.4px; color: var(--text-tertiary); font-weight:600; }
  
  /* ============================================================
     TIME OFF: overview view visibility toggle
     ============================================================ */
  .onboard-view{ display:none; }
  .onboard-view.is-active{ display:block; }
  .badge-completed{ background: #5DA130; color:#fff; text-transform:uppercase; }

  /* ============================================================
     TIME OFF: Requests data table
     ============================================================ */
  .to-table-scroll{
    overflow-x:auto; border-radius: var(--radius-md); border:1px solid var(--border-subtle);
    background:#fff; box-shadow: var(--shadow-sm);
  }
  .to-table{ width:100%; border-collapse:collapse; font-size:8.4px; white-space:nowrap; }
  .to-table thead th{
    text-align:left; padding:10px 14px; font-size:7.4px; font-weight:700;
    text-transform:uppercase; letter-spacing:.03em; color: var(--text-tertiary);
    border-bottom:1px solid var(--border-subtle); background:#fafbfc;
  }
  .to-table tbody td{ padding:10px 14px; border-bottom:1px solid var(--border-subtle); color: var(--text-primary); }
  .to-table tbody tr:last-child td{ border-bottom:none; }
  .to-table tbody tr:hover td{ background:#f9fafb; }
  .to-table tbody tr{
    opacity:0; transform: translateY(6px);
    animation: revealUp .4s var(--ease) forwards;
    animation-delay: calc(var(--ri, 0) * 45ms);
  }
  .to-name-cell{ display:flex; align-items:center; gap:8px; font-weight:600; color: var(--text-primary); }
  .to-avatar{ width:22px; height:22px; border-radius:50%; object-fit:cover; flex-shrink:0; }

  /* ============================================================
     TIME OFF: Requests tab — Odoo-style list toolbar
     ============================================================ */
  .req-panel{
    border:1px solid var(--border-subtle); border-radius: var(--radius-md);
    overflow:hidden; box-shadow: var(--shadow-sm); background:#fff;
  }
  .req-panel .to-table-scroll{ border:none; border-radius:0; box-shadow:none; }
  .req-toolbar{
    display:flex; align-items:center; gap:8px;
    background: var(--to-pale, #F2F7E4); border-bottom:1px solid var(--border-subtle);
    padding:8px 10px;
  }
  .req-add-btn{
    width:22px; height:22px; border-radius:6px; color: var(--text-secondary);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .req-add-btn svg{ width:12px; height:12px; }
  .req-add-btn:hover{ background:#fff; }
  .req-filter-btn, .req-actions-btn{
    display:flex; align-items:center; gap:6px; font-size:8px; font-weight:700;
    color: var(--text-primary); padding:6px 10px; border-radius:7px;
  }
  .req-filter-btn svg, .req-actions-btn svg{ width:12px; height:12px; color: var(--text-tertiary); flex-shrink:0; }
  .req-filter-btn:hover{ background:#fff; }
  .req-actions-btn{ color: var(--text-tertiary); cursor:default; }
  .req-caret{ width:9px !important; height:9px !important; }
  .req-view-icons{
    margin-left:auto; display:flex; align-items:center; border:1px solid var(--border-subtle);
    border-radius:8px; overflow:hidden; background:#fff;
  }
  .req-view-icons button{
    width:26px; height:24px; display:flex; align-items:center; justify-content:center;
    color: var(--text-tertiary); border-right:1px solid var(--border-subtle);
  }
  .req-view-icons button:last-child{ border-right:none; }
  .req-view-icons button svg{ width:12px; height:12px; }
  .req-view-icons button:hover{ color: var(--text-primary); background:#f5f6f7; }
  .req-view-icons button.is-active{ background:#e9e6f4; color:#5b4b9e; }

  .req-searchbar{
    display:flex; align-items:center; gap:0; background:#465359; padding:6px 8px;
  }
  .req-play-btn, .req-pause-btn{
    width:20px; height:20px; border-radius:6px; color:#c7cdd0;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .req-play-btn svg, .req-pause-btn svg{ width:11px; height:11px; }
  .req-pause-btn{ background: rgba(255,255,255,.14); color:#fff; margin-right:6px; }
  .req-search-cols{ display:flex; flex:1; overflow-x:auto; }
  .req-search-cols span{
    display:flex; align-items:center; gap:5px; flex:1; min-width:70px;
    font-size:7.4px; color:#aeb8bc; padding:5px 10px; border-left:1px solid rgba(255,255,255,.08);
    white-space:nowrap;
  }
  .req-search-cols span svg{ width:10px; height:10px; flex-shrink:0; }
  .req-search-cols span:first-child{ border-left:none; }

  .req-table thead th.is-sorted{ color: var(--to-blue, #2FA0D6); }
  .req-sort-arrow{ width:8px; height:8px; margin-left:3px; vertical-align:middle; }
  .req-check-col{ width:32px; padding-left:14px !important; padding-right:0 !important; }
  .req-check-col input[type="checkbox"]{ width:13px; height:13px; accent-color: var(--to-green, #7FBB4E); }

  /* ============================================================
     TIME OFF: green product redesign
     ============================================================ */
  #page-timeoff{
    --to-green: #7FBB4E;
    --to-green-deep: #5DA130;
    --to-pale: #F6FAEE;
    --to-chip: #C7E2A0;
    --to-blue: #2FA0D6;
    --to-amber: #E2933A;
  }
  #page-timeoff .card-title{ color: var(--text-primary); font-size:9px; }
  #page-timeoff .card-link{ color: var(--to-blue); }
  #page-timeoff .card-link:hover{ color:#1c84b8; }
  #page-timeoff .card{ border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }

  .kpi-carousel-outer{ position:relative; margin-bottom:20px; }
  .kpi-carousel{ overflow-x:hidden; overflow-y:visible; }
  .kpi-track{ display:flex; width:200%; transition: transform 1.3s var(--ease); }
  .kpi-track.is-page2{ transform: translateX(-50%); }
  .kpi-track .kpi-row{ flex:0 0 50%; width:50%; margin-bottom:0; }
  .kpi-card--timeoff{
    padding:0; text-align:center; overflow:hidden;
    border:1px solid var(--border-subtle); border-radius: var(--radius-md);
    box-shadow: 0 6px 10px -6px rgba(16,24,40,.22);
  }
  .kpi-card-top{
    position:relative; background: var(--to-pale);
    padding: 34px 14px 40px; display:flex; align-items:flex-start; justify-content:center;
  }
  .kpi-chip{
    position:absolute; top:10px; width:20px; height:20px; border-radius:8px;
    background: var(--to-chip); color: var(--to-green-deep);
    display:flex; align-items:center; justify-content:center;
  }
  .kpi-chip svg{ width:11px; height:11px; }
  .kpi-chip--add{ left:10px; }
  .kpi-chip--copy{ right:10px; }
  .kpi-icon-lg{ width:64px; height:64px; display:flex; align-items:center; justify-content:center; color: var(--to-green); }
  .kpi-icon-lg svg{ width:56px; height:56px; }
  .kpi-card-bottom{ padding:22px 12px 26px; }
  .kpi-title{ font-weight:700; font-size:22px; color: var(--text-primary); margin-bottom:10px; white-space:nowrap; }
  .kpi-avail-label{
    font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
    color: var(--to-green); margin-bottom:10px;
  }
  .kpi-time-row{ display:flex; align-items:flex-end; justify-content:center; gap:20px; }
  .kpi-time-block{ display:flex; flex-direction:column; align-items:center; }
  .kpi-time-block .kpi-num, .kpi-time-block .kpi-num-static{
    font-family: var(--font-display); font-size:26px; font-weight:800; color: var(--text-primary); line-height:1;
  }
  .kpi-time-unit{ font-size:9px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color: var(--text-tertiary); margin-top:5px; }
  .kpi-row-arrow{
    position:absolute; top:44px; width:24px; height:24px; border-radius:50%;
    background:#fff; box-shadow: var(--shadow-sm); color: var(--text-tertiary);
    display:flex; align-items:center; justify-content:center;
    transition: background .15s var(--ease), color .15s var(--ease);
  }
  .kpi-row-arrow:hover{ background: var(--to-pale); color: var(--to-green-deep); }
  .kpi-row-arrow svg{ width:12px; height:12px; }

  /* ============================================================
     TIME OFF OVERVIEW: "Me / My Team" employee summary card,
     sitting above the KPI carousel
     ============================================================ */
  .emp-summary-tabs{ display:flex; gap:2px; margin-bottom:0; }
  .emp-summary-tab{
    background:#fff; border:1px solid var(--border-subtle); border-bottom:none;
    border-radius:10px 10px 0 0; padding:10px 22px; font-size:8px; font-weight:700;
    text-transform:uppercase; letter-spacing:.03em; color: var(--text-tertiary);
    position:relative; top:1px;
  }
  .emp-summary-tab.is-active{
    color: var(--text-primary); box-shadow: inset 0 -2px 0 var(--to-green, #7FBB4E);
  }
  .emp-summary-card{
    display:flex; align-items:center; gap:28px; margin-top:0; border-top-left-radius:0;
  }
  .emp-summary-left{ flex:1.3; min-width:0; }
  .emp-summary-top{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
  .emp-summary-avatar{ width:56px; height:56px; border-radius:50%; object-fit:cover; flex-shrink:0; }
  .emp-summary-name{ font-family: var(--font-display); font-size:15px; font-weight:700; color: #5DA130; }
  .emp-summary-title{ font-size:8.4px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color: var(--text-tertiary); margin-top:3px; }
  .emp-summary-balance-row{ display:flex; align-items:baseline; gap:6px; margin-bottom:6px; font-size:8px; }
  .emp-summary-balance-label{ font-weight:700; text-transform:uppercase; letter-spacing:.03em; color: var(--text-primary); }
  .emp-summary-balance-range{ font-weight:700; color: #5DA130; }
  .emp-summary-balance-remaining{ color: var(--text-tertiary); }
  .emp-summary-balance-total{ margin-left:auto; color: var(--text-tertiary); font-size:7.2px; }
  .emp-summary-progress{
    height:16px; border-radius:20px; background: #E7EAEE; overflow:hidden; position:relative;
  }
  .emp-summary-progress-fill{
    height:100%; background: linear-gradient(90deg, #9ED456, #7CB342); border-radius:20px;
    display:flex; align-items:center; justify-content:center;
    font-size:9px; font-weight:800; color:#fff; white-space:nowrap; overflow:hidden;
  }
  .emp-summary-reset{ font-size:7.8px; color: var(--text-tertiary); margin-top:8px; }
  .emp-summary-reset strong{ color: var(--text-primary); font-weight:700; }

  .emp-summary-donut{ position:relative; width:110px; height:110px; flex-shrink:0; }
  .emp-summary-donut svg{ width:100%; height:100%; }
  .emp-summary-donut-text{
    position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  }
  .emp-summary-donut-pct{ font-family: var(--font-display); font-size:17px; font-weight:800; color: var(--text-primary); }
  .emp-summary-donut-label{ font-size:6.6px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color: var(--text-tertiary); margin-top:1px; }

  .emp-summary-stats{ display:flex; gap:26px; flex-shrink:0; }
  .emp-summary-stat{ text-align:center; }
  .emp-summary-stat-num{ font-family: var(--font-display); font-size:14px; font-weight:800; color: var(--text-primary); white-space:nowrap; }
  .emp-summary-stat-num span{ font-size:9px; font-weight:600; }
  .emp-summary-stat-label{
    font-size:6.6px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
    margin-top:5px; white-space:nowrap;
  }
  .emp-summary-stat-label--green{ color: #7CB342; }
  .emp-summary-stat-label--orange{ color: #F2842B; }
  .emp-summary-stat-label--teal{ color: #3FC1C9; }
  .kpi-row-arrow--next{ right:-13px; }
  .kpi-row-arrow--prev{ left:-13px; }
  .kpi-row-arrow[hidden]{ display:none; }

  .calendar-legend{ display:flex; gap:16px; font-size:7.6px; color: var(--text-secondary); margin-bottom:14px; align-items:center; }
  .calendar-legend .dot{ width:7px; height:7px; border-radius:50%; display:inline-block; margin-right:5px; vertical-align:middle; }
  .dot--approved{ background: var(--to-green); }
  .dot--pending{ background:#F0A93B; }
  .dot--holiday{ background:#1E8E6B; }
  .calendar-nav{ display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:10px; }
  .cal-arrow{ color: var(--to-green); font-size:13px; line-height:1; width:18px; height:18px; display:flex; align-items:center; justify-content:center; }
  .cal-month{ font-size:9px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color: var(--to-green); }
  .calendar-grid{ border-radius:12px; overflow:hidden; border:1px solid var(--border-subtle); box-shadow: var(--shadow-sm); }
  .calendar-grid-head{ display:grid; grid-template-columns:repeat(7,1fr); background: var(--to-green); }
  .calendar-grid-head span{ padding:8px 0; text-align:center; font-size:6.6px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:#fff; }
  .calendar-grid-body{ display:grid; grid-template-columns:repeat(7,1fr); }
  .cal-day{
    position:relative; padding:9px 0 10px; text-align:center; font-size:8px; font-weight:600;
    color: var(--text-primary); border-top:1px solid var(--border-subtle);
  }
  .cal-day.is-muted{ color: var(--text-tertiary); font-weight:500; }
  .cal-day.is-today{
    display:flex; flex-direction:column; align-items:center; gap:1px; padding-top:5px;
    color:#E1613F; font-weight:800;
  }
  .cal-day.is-today em{
    font-size:5px; font-style:normal; font-weight:700; letter-spacing:.04em;
    text-transform:uppercase; color: var(--text-tertiary);
  }

  .upcoming-legend{ display:flex; align-items:center; gap:6px; font-size:7.8px; color: var(--text-secondary); margin-bottom:14px; }
  .upcoming-legend-dot{ width:7px; height:7px; border-radius:50%; background: var(--to-green, #7FBB4E); flex-shrink:0; }
  .upcoming-list{ display:flex; flex-direction:column; gap:14px; }
  .upcoming-item{ border:1px solid var(--border-subtle); border-radius: var(--radius-md); overflow:hidden; }
  .upcoming-item-header{
    background: var(--to-green, #7FBB4E); color:#fff; text-align:center;
    font-weight:700; font-size:9.5px; padding:9px;
  }
  .upcoming-item-body{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 18px; }
  .upcoming-item-range{ display:flex; align-items:center; gap:16px; }
  .upcoming-item-duration{ text-align:center; flex-shrink:0; }
  .upcoming-duration-label{
    font-size:6.8px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
    color: var(--text-tertiary); margin-bottom:5px;
  }
  .upcoming-duration-value{ font-size:8px; font-weight:700; color: var(--text-primary); margin-bottom:5px; }
  .upcoming-duration-value span{ font-size:15px; font-weight:800; }
  .upcoming-duration-value i{ font-style:normal; }

  .accrual-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .accrual-item{ display:flex; border:1px solid var(--border-subtle); border-radius:12px; overflow:hidden; box-shadow: var(--shadow-sm); }
  .accrual-icon{ width:78px; flex-shrink:0; background: var(--to-pale); display:flex; align-items:center; justify-content:center; color: var(--to-green); }
  .accrual-icon svg{ width:32px; height:32px; }
  .accrual-body{ flex:1; padding:14px 14px 12px; position:relative; }
  .accrual-body .badge{ position:absolute; top:12px; right:12px; }
  .accrual-name{ font-weight:700; font-size:9.5px; margin-bottom:10px; }
  .accrual-cols{ display:flex; gap:20px; }
  .accrual-col{ display:flex; flex-direction:column; gap:3px; }
  .accrual-label{ font-size:6.6px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; }
  .accrual-label--date{ color: var(--to-blue); }
  .accrual-label--hours{ color: var(--to-green); }
  .accrual-label--policy{ color: var(--to-amber); }
  .accrual-value{ font-size:8px; color: var(--text-primary); font-weight:600; }

  /* ============================================================
     CALENDAR — full-bleed month view (reached from the Overview
     page's "View Calendar" demo click). No product header here on
     purpose: it's a distinct app, not a Time Off sub-tab.
     ============================================================ */
  #page-calendar{ margin: -22px -28px 0; }
  #page-absence{ margin: -22px -28px 0; }
  .cal-header{
    background: var(--cal-blue); color:#fff;
    display:flex; align-items:center; justify-content:space-between;
    padding: 12px 24px;
  }
  .cal-header-tabs{ display:flex; align-items:center; gap:28px; }
  .cal-tab{
    display:flex; align-items:center; gap:7px; font-size:9px; font-weight:600;
    color: rgba(255,255,255,.75); padding-bottom:11px; position:relative; top:5px;
  }
  .cal-tab svg{ width:14px; height:14px; }
  .cal-tab.is-active{ color:#fff; font-weight:700; }
  .cal-tab.is-active::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:#fff; }
  .cal-add-event{
    display:flex; align-items:center; gap:6px; background: rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.3); color:#fff; font-size:8.4px; font-weight:600;
    padding:8px 14px; border-radius:8px;
  }
  .cal-add-event svg{ width:11px; height:11px; }

  .cal-toolbar{
    display:flex; align-items:center; gap:18px; background:#fff;
    border-bottom:1px solid var(--border-subtle); padding:10px 24px;
  }
  .cal-standard-btn, .cal-filter-btn{
    display:flex; align-items:center; gap:6px; font-size:8.4px; font-weight:600; color: var(--text-secondary);
  }
  .cal-standard-btn svg, .cal-filter-btn svg{ width:12px; height:12px; color: var(--text-tertiary); }
  .cal-caret{ width:9px !important; height:9px !important; }
  .cal-month-nav{ margin-left:auto; display:flex; align-items:center; gap:16px; }
  .cal-nav-arrow{
    width:22px; height:22px; border-radius:6px; background: var(--cal-head-bg);
    color: var(--cal-blue); display:flex; align-items:center; justify-content:center;
  }
  .cal-nav-arrow svg{ width:11px; height:11px; }
  .cal-month-label{ font-size:10px; font-weight:700; color: var(--text-primary); min-width:110px; text-align:center; }
  .cal-view-controls{ display:flex; align-items:center; gap:10px; }
  .cal-view-link{ font-size:8.4px; font-weight:600; color: var(--cal-blue); padding:6px 4px; }
  .cal-view-btn{
    font-size:8.4px; font-weight:700; color:#fff; background: var(--cal-blue-dark);
    padding:6px 12px; border-radius:7px;
  }
  .cal-today-btn{
    font-size:8.4px; font-weight:600; color: var(--cal-blue); background:#fff;
    border:1px solid var(--cal-blue); padding:6px 12px; border-radius:7px;
  }
  .cal-icon-btn{ width:22px; height:22px; color: var(--cal-blue); display:flex; align-items:center; justify-content:center; }
  .cal-icon-btn svg{ width:13px; height:13px; }

  .cal-filter-badge{
    background: var(--cal-blue); color:#fff; width:14px; height:14px; border-radius:50%;
    font-size:6.4px; font-weight:700; display:flex; align-items:center; justify-content:center;
  }

  /* ============================================================
     CALENDAR — month view. The approval panel is no longer a
     permanent sidebar; it's an on-demand drawer (see .req-detail-*,
     reused) opened by clicking an event bar in the grid.
     ============================================================ */
  .cal-month-wrap{ position:relative; }
  .cal-month-headrow{
    display:grid; grid-template-columns:repeat(7, 1fr);
    background: var(--cal-head-bg); border:1px solid var(--border-subtle); border-bottom:none;
  }
  .cal-month-headcol{
    padding:8px 10px; text-align:center; font-size:7.4px; font-weight:700;
    text-transform:uppercase; letter-spacing:.02em; color: var(--text-secondary);
    border-left:1px solid var(--border-subtle);
  }
  .cal-month-headcol:first-child{ border-left:none; }
  .cal-month-grid{ border:1px solid var(--border-subtle); border-top:none; }
  .cal-month-week{
    position:relative; display:grid; grid-template-columns:repeat(7, 1fr);
    grid-auto-rows:min-content;
  }
  .cal-month-cellbg{
    grid-row:1 / -1; border-left:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle);
    min-height:64px;
  }
  .cal-month-cellbg:first-child{ border-left:none; }
  .cal-month-daynum{
    grid-row:1; padding:5px 8px 4px; font-size:9px; font-weight:700; color: var(--text-secondary);
  }
  .cal-month-daynum.is-otherMonth{ color: var(--text-tertiary); opacity:.55; }
  .cal-month-daynum.is-today{ color: var(--cal-blue); }
  .cal-month-event{
    margin:1px 4px; padding:2.5px 8px; border-radius:4px; font-size:6.8px; font-weight:700;
    color:#fff; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; cursor:pointer;
  }
  .cal-month-event span{ font-weight:500; }
  .cal-month-event--pto{ background:#7C9A3D; }
  .cal-month-event--birthday{ background:#E8944A; }
  .cal-month-event--anniversary{ background:#3FA7A6; }
  .cal-month-event--offer{ background:#8B6FCF; }
  .cal-month-event--holiday{ background:#2E8B8B; }
  .cal-month-event--striped{
    color:#31421A;
    background-color: rgba(124,154,61,.32);
    background-image: repeating-linear-gradient(45deg, rgba(124,154,61,.6) 0 6px, rgba(124,154,61,.3) 6px 12px);
  }
  .cal-month-more{
    font-size:6.6px; font-weight:600; color: var(--to-blue, #2FA0D6); padding:2px 8px; margin:1px 4px;
  }

  .cal-approvers-head{
    background:#3A4652; color:#fff; display:flex; align-items:center; justify-content:space-between;
    padding:11px 20px; font-size:7.6px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  }
  .cal-approval-details-link{ font-size:7px; font-weight:600; text-transform:none; letter-spacing:0; text-decoration:underline; color:#fff; opacity:.85; }
  .cal-approvers-list{ padding:12px 20px; border-bottom:1px solid var(--border-subtle); }
  .cal-approver-row{ display:flex; align-items:center; gap:9px; }
  .cal-approver-num{ font-size:8px; font-weight:700; color: var(--text-tertiary); }
  .cal-approver-avatar{ width:30px; height:30px; border-radius:50%; object-fit:cover; flex-shrink:0; }
  .cal-approver-info{ flex:1; min-width:0; }
  .cal-approver-name{ font-size:9px; font-weight:700; color: var(--text-primary); }
  .cal-approver-due{ font-size:7.2px; color: var(--text-tertiary); margin-top:1px; }
  .cal-approver-chev{ width:12px; height:12px; color: var(--text-tertiary); flex-shrink:0; }
  .cal-approval-actions{ display:flex; gap:10px; padding:16px 20px; margin-top:auto; }
  .cal-deny-btn, .cal-approve-btn{
    flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
    padding:10px 0; border-radius:8px; font-size:8.6px; font-weight:700; color:#fff;
    transition: filter .15s var(--ease), opacity .2s var(--ease);
  }
  .cal-deny-btn svg, .cal-approve-btn svg{ width:11px; height:11px; }
  .cal-deny-btn{ background: var(--danger); }
  .cal-approve-btn{ background: #8BC34A; }
  .cal-deny-btn:hover, .cal-approve-btn:hover{ filter:brightness(1.06); }
  .cal-deny-btn:disabled, .cal-approve-btn:disabled{ opacity:.5; pointer-events:none; }
  .badge-pending{ background:#F0A93B; color:#fff; text-transform:uppercase; }

  /* ============================================================
     ABSENCE TRACKING — people list + empty day-by-day timeline.
     A single CSS grid with the header row and first column pinned
     via position:sticky, scrolling inside .abs-scroll — a frozen-
     panes spreadsheet feel without any JS scroll-syncing.
     ============================================================ */
  .abs-grid-wrap{ padding: 16px 24px 30px; }
  .abs-scroll{
    max-height: 620px; overflow:auto;
    border:1px solid var(--border-subtle); border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm); background:#fff;
  }
  .abs-scroll::-webkit-scrollbar{ width:10px; height:10px; }
  .abs-scroll::-webkit-scrollbar-track{ background:#F3F4F6; }
  .abs-scroll::-webkit-scrollbar-thumb{ background:#C7CBD1; border-radius:6px; border:2px solid #F3F4F6; background-clip:padding-box; }
  .abs-scroll::-webkit-scrollbar-thumb:hover{ background:#AEB3BB; }
  .abs-grid{
    display:grid; grid-template-columns: 240px repeat(30, minmax(46px, 1fr));
    min-width: max-content;
  }
  .abs-cell{
    border-right:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle);
    display:flex; align-items:center; min-width:0; background:#fff;
  }
  .abs-search-cell{
    grid-column:1; position:sticky; top:0; left:0; z-index:3;
    background: var(--cal-head-bg); padding:10px 14px;
  }
  .abs-search-box{
    display:flex; align-items:center; gap:8px; width:100%;
    background:#fff; border:1px solid var(--border-subtle); border-radius:8px; padding:8px 12px;
  }
  .abs-search-box svg{ width:14px; height:14px; color: var(--text-tertiary); flex-shrink:0; }
  .abs-search-box input{
    border:none; outline:none; background:transparent; font-size:11px;
    font-family:inherit; color: var(--text-primary); width:100%;
  }
  .abs-search-box input::placeholder{ color: var(--text-tertiary); }
  .abs-date-head{
    position:sticky; top:0; z-index:2;
    background: var(--cal-head-bg); flex-direction:column; justify-content:center;
    padding:8px 0; gap:2px;
  }
  .abs-date-head.is-today{ background:#CFE4F5; }
  .abs-wd{ font-size:8.6px; font-weight:700; text-transform:uppercase; color: var(--text-secondary); }
  .abs-date-head.is-today .abs-wd{ color: var(--cal-blue); }
  .abs-dn{ font-size:9.4px; font-weight:700; color: var(--text-primary); }
  .abs-date-head.is-today .abs-dn{ color: var(--cal-blue); }
  .abs-person-cell{
    grid-column:1; position:sticky; left:0; z-index:1;
    padding:0 14px; gap:12px; font-size:12.5px; font-weight:600;
    color: var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .abs-person-cell.is-alt, .abs-day-cell.is-alt{ background:#FAFBFC; }
  .abs-avatar{ width:34px; height:34px; border-radius:50%; object-fit:cover; flex-shrink:0; }
  .abs-day-cell{ min-height:52px; }
  .abs-day-cell.is-today{ background:#EAF3FB; }
  .abs-day-cell.is-alt.is-today{ background:#E4EEF7; }
  .abs-grid > *:nth-child(31n){ border-right:none; }
  .abs-grid > *:nth-last-child(-n+31){ border-bottom:none; }

  /* ============================================================
     REQUESTS: name links + a denied badge + table footer text
     ============================================================ */
  .to-name-link{ cursor:pointer; }
  .to-name-link:hover{ color: var(--to-blue, #2FA0D6); }
  .to-name-link:hover .to-avatar{ box-shadow: 0 0 0 2px var(--to-blue, #2FA0D6); }
  .badge-denied{ background: var(--danger); color:#fff; text-transform:uppercase; }
  .req-table-footer{
    padding:10px 16px; text-align:right; font-size:7.6px; color: var(--text-tertiary);
    border-top:1px solid var(--border-subtle);
  }

  /* ============================================================
     REQUEST DETAIL — slide-over drawer opened from a Requests row
     ============================================================ */
  /* position:fixed with its bounds set by JS (positionReqDetailOverlay
     in script.js) to match .content-wrap's live rect — keeping it below
     the topbar and beside the sidebar. Two other approaches were tried
     and rejected: a *static* CSS offset can't work because .app-shell is
     dynamically centered/zoomed within the viewport; giving .app-shell
     itself a `transform` (to make IT the containing block, so a static
     offset would work) tested reliable for the other two drawers but
     reproducibly mispositioned this one specifically (Chromium
     computing the wrong containing-block origin for it, ~145px off, in
     every run) — an inconsistency between three structurally-identical
     overlays that isn't worth the risk. Only a live measurement of
     .content-wrap's actual on-screen rect, corrected for the current
     zoom factor, has tested reliably correct for all three, every time.
     position:absolute here (even though out of flow) corrupted
     #content's own flex sizing the instant a real click/hover landed
     nearby (a Chromium hit-testing quirk with abs-positioned siblings
     in an overflow:hidden flex column); position:fixed sidesteps it
     entirely. */
  .req-detail-overlay{
    position:fixed; background: rgba(20,26,34,.45);
    z-index:60; opacity:0; pointer-events:none;
    transition: opacity .25s var(--ease);
    /* Matches .app-shell's own bottom-right rounding — see .req-detail-panel. */
    border-bottom-right-radius: var(--radius-shell);
  }
  .req-detail-overlay.is-open{ opacity:1; pointer-events:auto; }
  .req-detail-panel{
    position:absolute; top:0; right:0; height:100%; width:420px; max-width:92vw;
    background:#fff; box-shadow: -8px 0 30px rgba(16,24,40,.18);
    display:flex; flex-direction:column;
    transform: translateX(100%);
    transition: transform .3s var(--ease);
    /* This panel's bottom-right corner sits exactly on .app-shell's own
       bottom-right corner (no footer/margin separates them) — matching
       its rounding here (rather than the square default) keeps the
       panel's white background from visibly poking past the dashboard's
       rounded frame into the plain page behind it. */
    border-bottom-right-radius: var(--radius-shell);
    overflow:hidden;
  }
  .req-detail-overlay.is-open .req-detail-panel{ transform: translateX(0); }
  .req-detail-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:20px 24px; border-bottom:1px solid var(--border-subtle);
  }
  .req-detail-head h2{ margin:0; font-family: var(--font-display); font-size:15px; font-weight:700; color: var(--text-primary); }
  .req-detail-head-actions{ display:flex; align-items:center; gap:16px; }
  .req-detail-menu{ display:flex; gap:3px; padding:6px; color: var(--text-tertiary); }
  .req-detail-menu span{ width:3px; height:3px; border-radius:50%; background:currentColor; }
  .req-detail-close{
    font-size:8.6px; font-weight:700; color: var(--text-primary);
    border:1px solid var(--border-subtle); border-radius:8px; padding:7px 14px;
  }
  .req-detail-close:hover{ background: var(--bg-app); }
  .req-detail-body{ padding:22px 24px; overflow-y:auto; }
  .req-detail-label{ font-size:8px; color: var(--text-tertiary); margin-bottom:12px; }
  .req-detail-person{ display:flex; align-items:center; gap:12px; margin-bottom:22px; }
  .req-detail-avatar{ width:38px; height:38px; border-radius:50%; object-fit:cover; flex-shrink:0; }
  .req-detail-person-info{ flex:1; min-width:0; }
  .req-detail-name{ font-size:11px; font-weight:700; color: var(--text-primary); }
  .req-detail-on{ font-size:8px; color: var(--text-tertiary); margin-top:2px; }
  .req-detail-card{ border-radius: var(--radius-md); border:1px solid #BEE0EE; overflow:hidden; text-align:center; }
  .req-detail-card-title{ background:#DFF0F4; font-size:12px; font-weight:700; color: var(--text-primary); padding:14px 20px; }
  .req-detail-card-body{ background:#FAFCFD; padding:20px; }
  .req-detail-range{ display:flex; align-items:center; justify-content:center; gap:20px; margin-bottom:18px; }
  .req-detail-range-side{ display:flex; flex-direction:column; align-items:center; gap:2px; }
  .req-detail-range-month{ font-size:7px; font-weight:700; letter-spacing:.03em; color: var(--text-tertiary); }
  .req-detail-range-day{ font-size:20px; font-weight:800; color: var(--text-primary); line-height:1.1; }
  .req-detail-range-dow{ font-size:6.6px; font-weight:700; letter-spacing:.03em; color: var(--text-tertiary); }
  .req-detail-range-to{ font-size:8px; color: var(--text-tertiary); }
  .req-detail-duration{ font-size:10px; font-weight:700; color: var(--text-primary); }
  .req-detail-duration span{ font-size:22px; font-weight:800; }
  .req-detail-duration-label{
    font-size:6.8px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
    color: var(--text-tertiary); margin-bottom:16px;
  }
  .req-detail-links{ display:flex; align-items:center; justify-content:space-between; }
  .req-detail-link{ font-size:7.8px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; color: var(--to-blue, #2FA0D6); }
  .req-detail-link:hover{ text-decoration:underline; }
  .req-detail-approvers{ margin: 24px -24px 0; }
  .to-status-pill{
    display:inline-block; padding:3px 10px; border-radius:20px; font-size:7.2px;
    font-weight:700; text-transform:uppercase; letter-spacing:.02em; color:#fff;
  }
  .to-status-pill--active{ background: var(--tm-teal, #3EA8B0); }
  .to-status-pill--inactive{ background: var(--text-tertiary); }

  /* ============================================================
     SYSTEM SETTINGS — reached via the sidebar "Settings" nav item
     ============================================================ */
  .ss-header{
    display:flex; align-items:center; gap:10px; padding-bottom:16px;
    margin-bottom:20px; border-bottom:1px solid var(--border-subtle); color: var(--text-tertiary);
  }
  .ss-header svg{ width:18px; height:18px; }
  .ss-header h1{ font-family: var(--font-display); font-size:15px; font-weight:600; color: var(--text-secondary); margin:0; }

  .ss-banners{ display:grid; grid-template-columns: repeat(5, 1fr); gap:14px; margin-bottom:26px; }
  .ss-banner{
    position:relative; overflow:hidden; border-radius: var(--radius-md);
    padding:16px 14px; min-height:64px; display:flex; align-items:flex-end;
    color:#fff; font-size:9px; font-weight:700;
  }
  .ss-banner-icon{ position:absolute; top:8px; right:8px; width:34px; height:34px; opacity:.35; }
  .ss-banner--blue{ background: #2193FC; }
  .ss-banner--red{ background: #F0696A; }
  .ss-banner--green{ background: #5EC124; }
  .ss-banner--teal{ background: #4DBCC2; }
  .ss-banner--gold{ background: #EAB12C; }

  .ss-section-label{
    font-size:8px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
    color: var(--text-tertiary); padding-bottom:12px; margin-bottom:16px; border-bottom:1px solid var(--border-subtle);
  }
  .ss-card-row{ display:grid; grid-template-columns: repeat(5, 1fr); gap:14px; margin-bottom:16px; align-items:start; }
  .ss-card{
    background:#fff; border:1px solid var(--border-subtle); border-radius: var(--radius-md);
    padding:14px 16px 16px;
  }
  .ss-card--muted{ opacity:.55; }
  .ss-card-head{
    display:flex; align-items:center; gap:7px; font-size:9px; font-weight:700;
    color: var(--text-primary); margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid var(--border-subtle);
  }
  .ss-card-head svg{ width:13px; height:13px; color: var(--text-tertiary); flex-shrink:0; }
  .ss-item{
    display:flex; align-items:center; gap:7px; font-size:8px; color: var(--text-secondary);
    padding:6px 0;
  }
  .ss-item svg{ width:12px; height:12px; color: var(--text-tertiary); flex-shrink:0; }
  .ss-item:hover{ color: var(--to-blue, #2FA0D6); }
  .ss-item--link{ cursor:pointer; font-weight:600; }

  /* ============================================================
     TIME MANAGEMENT — reached via System Settings' "Time Off" link
     ============================================================ */
  #page-timemanagement{ margin: -22px -28px 0; background:#fff; min-height:100%; }
  #page-timemanagement .product-header{ margin: 22px 28px 18px; }
  .tm-body{ display:flex; align-items:flex-start; }
  .tm-sidebar{ width:190px; flex-shrink:0; padding:20px 0; border-right:1px solid var(--border-subtle); }
  .tm-nav-toplevel{
    padding:9px 28px; font-size:8.6px; font-weight:600; color: var(--text-tertiary);
  }
  .tm-nav-parent{
    display:flex; align-items:center; justify-content:space-between; gap:6px;
    padding:9px 28px; font-size:8.6px; font-weight:600; color: var(--text-secondary);
  }
  .tm-nav-parent svg{ width:10px; height:10px; color: var(--text-tertiary); }
  .tm-nav-group--muted .tm-nav-parent, .tm-nav-group--muted .tm-nav-sub-item{ color: var(--text-tertiary); opacity:.6; }
  .tm-nav-sub{ display:flex; flex-direction:column; }
  .tm-nav-sub-item{
    padding:8px 28px 8px 40px; font-size:8.4px; font-weight:500; color: var(--text-secondary);
    cursor:pointer; border-left:2px solid transparent;
  }
  .tm-nav-sub-item:hover{ color: var(--tm-teal, #3EA8B0); }
  .tm-nav-sub-item.is-active{ color: var(--tm-teal, #3EA8B0); font-weight:700; border-left-color: var(--tm-teal, #3EA8B0); background: #F2FAFB; }

  .tm-content{ flex:1; min-width:0; padding:26px 32px 40px; }
  .tm-view{ display:none; }
  .tm-view.is-active{ display:block; }
  .tm-h2{ font-family: var(--font-display); font-size:12.5px; font-weight:700; color: var(--text-primary); margin:0 0 14px; }
  .tm-h2-row{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px; }
  .tm-h2-row .tm-h2{ margin-bottom:0; }
  .tm-edit-link{ display:flex; align-items:center; gap:5px; font-size:8px; font-weight:600; color: var(--text-secondary); text-decoration:underline; }
  .tm-edit-link svg{ width:10px; height:10px; }

  .tm-card{
    background:#fff; border:1px solid var(--border-subtle); border-radius: var(--radius-md);
    margin-bottom:24px; overflow:hidden;
  }
  .tm-card--pad{ padding:18px 20px; }
  .tm-setting{ padding:16px 20px; border-bottom:1px solid var(--border-subtle); }
  .tm-setting--last{ border-bottom:none; }
  .tm-checkline{ display:flex; align-items:flex-start; gap:10px; cursor:default; }
  .tm-checkline input{ width:13px; height:13px; margin-top:1px; accent-color: var(--tm-teal, #3EA8B0); flex-shrink:0; }
  .tm-setting-title{ font-size:9px; font-weight:700; color: var(--text-primary); }
  .tm-setting-desc{ font-size:8px; color: var(--text-tertiary); margin:6px 0 0 23px; line-height:1.5; }
  .tm-nested-box{ margin:14px 0 0 23px; background: var(--bg-app); border-radius:10px; padding:14px 16px; }
  .tm-nested-box.is-disabled{ opacity:.5; }
  .tm-nested-label{ font-size:7.6px; color: var(--text-tertiary); margin-bottom:6px; }
  .tm-nested-row{ display:flex; align-items:center; gap:10px; margin-bottom:14px; font-size:8px; color: var(--text-secondary); }
  .tm-nested-row:last-child{ margin-bottom:0; }
  .tm-select, .tm-input{
    display:flex; align-items:center; gap:6px; background:#fff; border:1px solid var(--border-subtle);
    border-radius:7px; padding:6px 10px; font-size:8px; color: var(--text-primary);
  }
  .tm-select svg{ width:9px; height:9px; color: var(--text-tertiary); }
  .tm-input{ width:44px; justify-content:center; }

  .tm-accrual-note{ font-size:8.4px; color: var(--text-secondary); margin-bottom:12px; }
  .tm-accrual-date{ display:flex; align-items:center; gap:8px; font-size:9.5px; font-weight:700; color: var(--text-primary); }
  .tm-accrual-date svg{ width:14px; height:14px; color: var(--text-tertiary); }

  .tm-row-link{ color: var(--text-primary); font-weight:600; text-decoration:underline; }
  .tm-row-link:hover{ color: var(--to-blue, #2FA0D6); }
  .tm-row-actions{ display:flex; align-items:center; gap:10px; color: var(--text-tertiary); }
  .tm-row-actions svg{ width:12px; height:12px; }
  .tm-row-actions svg:hover{ color: var(--text-primary); }
  #tmPolicyEditIcon{ cursor:pointer; }

  /* ============================================================
     RESPONSIVE
     The dashboard itself never changes: on tablet/mobile it keeps
     its exact desktop layout rendered at a fixed reference size,
     then scales down as one unit (like a shrunk live preview) —
     the same pattern as the Personio reference. Only the floating
     top pill nav restyles (stacks full-width on phones).
     ============================================================ */
  
  /* narrow desktop window only — real fluid reflow, no scaling yet */
  @media (min-width: 1025px) and (max-width: 1180px){
    .two-col{ grid-template-columns: 1fr; }
    .kpi-row{ grid-template-columns: repeat(2,1fr); }
  }
  
  /* ---- Tablet & mobile: shrink the whole fixed-layout dashboard
     to fit — finer-grained tiers so it never clips, just leaves a
     bit more margin at the top of each tier's range ---- */
  @media (max-width: 1024px){
    body{ align-items:center; padding: 20px 14px; }
    .top-pills{ width:100%; max-width:600px; }
    .app-shell{
      width: 1400px;
      max-width: none;
      height: 900px;
      aspect-ratio: auto;
      flex: none;
      zoom: 0.50;
    }
  }
  @media (max-width: 860px){
    .app-shell{ zoom: 0.40; }
  }
  @media (max-width: 700px){
    .app-shell{ zoom: 0.35; }
  }
  @media (max-width: 560px){
    .app-shell{ zoom: 0.30; }
  }
  @media (max-width: 460px){
    .app-shell{ zoom: 0.26; }
  }
  @media (max-width: 380px){
    .app-shell{ zoom: 0.22; }
  }
  
  /* ---- Phones: pill nav becomes a 2-col grid, odd item spans full width ---- */
  @media (max-width: 640px){
    body{ padding: 16px 10px; }
    .top-pills{
      display:grid; grid-template-columns: 1fr 1fr;
      gap:10px; max-width:360px; margin: 0 auto 18px;
    }
    .top-pill{ width:100%; justify-content:center; padding:12px 14px; font-size:10.7px; }
    .top-pill:last-child{ grid-column: 1 / -1; }
  }

  /* ============================================================
     SURVEYS / PERFORM — sidebar icon tint (placeholder icon reuse)
     ============================================================ */

  /* ============================================================
     SURVEYS / PERFORM — page headers
     ============================================================ */
  #page-surveys, #page-perform{ position: relative; }

  .product-header--surveys { background: #7BC6CD; }
  .product-header--perform { background: #8C7BB4; }
  .product-header--perform .header-tabs{ margin-top: 6px; }

  .surveys-table, .perform-table {
    width: 100%; border-collapse: collapse;
  }
  .surveys-table th, .perform-table th {
    font-size:8.1px; color: #6b7280; text-transform: uppercase;
    letter-spacing: 0.05em; padding: 10px 12px;
    border-bottom: 1px solid #e5e7eb; text-align: left;
  }
  .surveys-table td, .perform-table td {
    padding: 12px; border-bottom: 1px solid #f3f4f6; color: #374151;
    font-size:9px;
  }
  .surveys-table tr:hover td, .perform-table tr:hover td {
    background: #f9fafb;
  }
  .status-pill {
    display: inline-block; padding: 3px 10px; border-radius: 4px;
    font-size:8.4px; font-weight: 700; white-space: nowrap;
    text-transform: uppercase; letter-spacing: 0.02em; color: #fff;
  }
  .status-pill--completed { background:#92B938; }
  .status-pill--pending   { background:#E9C148; }
  .status-pill--draft     { background:#AAB5B8; }
  .status-pill--pastdue   { background:#fff; border:1px solid #E8A49C; color:#E0776B; }

  /* pagination row (Perform reviews table) */
  .pagination-row{ display:flex; align-items:center; gap:6px; padding:14px 12px; }
  .pagination-btn{
    min-width:26px; height:26px; padding:0 6px; border-radius:4px;
    font-size:8.2px; font-weight:600; color: var(--text-secondary);
    transition: background .15s var(--ease);
  }
  .pagination-btn:hover{ background: var(--bg-app); }
  .pagination-btn.is-active{ background: #3FA7A0; color:#fff; }
  .pagination-ellipsis{ color: var(--text-tertiary); font-size:8.2px; padding:0 2px; }

  /* "NEW SURVEY ▾" button — teal fill, uppercase, top-left of toolbar */
  .btn-new-survey{
    display: inline-flex; align-items: center; gap: 6px;
    background: #7BC6CD; color: #fff; font-size:8px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.03em;
    padding: 10px 16px; border-radius: 6px;
    transition: background .18s var(--ease);
  }
  .btn-new-survey:hover{ background: #66B8C0; }

  /* checkbox column */
  .surveys-table input[type="checkbox"], .perform-table input[type="checkbox"]{
    width: 15px; height: 15px; accent-color: #7BC6CD; cursor: pointer;
  }
  .surveys-table th.col-check, .perform-table th.col-check,
  .surveys-table td.col-check, .perform-table td.col-check{ width: 34px; }

  .survey-sync-icon{ color: #7BC6CD; display: inline-flex; vertical-align: middle; margin-right: 6px; }
  .survey-sync-icon svg{ width: 13px; height: 13px; animation: spin 3s linear infinite; }

  /* Reviewee cell: avatar + name */
  .reviewee-cell{ display: flex; align-items: center; gap: 8px; }
  .avatar-circle{
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
    object-fit: cover; display: block;
  }

  /* Perform: dark utility bar (view toggles + per-column search) */
  .perform-utility-bar{
    display: flex; align-items: center;
    background: #797F84; border-radius: 8px 8px 0 0; overflow: hidden;
  }
  .perform-view-icon{
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 34px; color: #d8dce0; flex-shrink: 0;
  }
  .perform-view-icon svg{ width: 16px; height: 16px; }
  .perform-view-icon.is-active{ background: #A14C4F; color: #fff; }
  .perform-view-arrow{ color: #9aa1a6; padding: 0 6px; flex-shrink: 0; font-size:8.6px; }
  .perform-search-row{ display: flex; flex: 1; min-width: 0; }
  .perform-search-box{
    display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0;
    padding: 0 12px; height: 34px; border-left: 1px solid #8a9096;
    color: #aeb4b9; font-size:8.2px;
  }
  .perform-search-box svg{ width: 13px; height: 13px; flex-shrink: 0; color: #aeb4b9; }
  .perform-search-box span{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* ============================================================
     AI Insights panel
     ============================================================ */
  .content-area{ position:relative; }
  /* Surveys' table is short enough that .content-area doesn't stretch
     to the full content height — that leaves a gap below the AI panel's
     input bar. Force it to fill, so the panel's inset trick reaches
     the true bottom edge (Perform's own longer table doesn't need this). */
  #page-surveys.is-active{ min-height: 100%; }
  #page-surveys .content-area{ min-height: 100%; }
  .ai-panel {
    position: absolute; top: -22px; right: -28px; bottom: -60px; left: -28px;
    width: auto; height: auto;
    background: #fff;
    box-shadow: -4px 0 20px rgba(0,0,0,0.08);
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.4s ease;
    z-index: 10;
  }
  .ai-panel.is-open { transform: translateX(0); }
  .ai-panel-header {
    display: flex; align-items: center;
    justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid #f3f4f6;
  }
  .ai-panel-title { font-size:12px; font-weight: 600; color: #1f2937; }
  .ai-panel-close {
    border: 1px solid #d1d5db; border-radius: 6px;
    padding: 4px 12px; font-size:8px; background: #fff;
    color: #374151; cursor: pointer;
  }
  .ai-panel-tabs {
    display: flex; gap: 8px; padding: 12px 20px; flex-wrap: wrap;
  }
  .ai-tab {
    border: 1px solid #d1d5db; border-radius: 20px;
    padding: 6px 14px; font-size:8px; color: #374151;
    background: #fff; cursor: pointer; white-space: nowrap;
    transition: border-color .2s ease, color .2s ease;
  }
  .ai-tab.is-active {
    background: #fff; border-color: #3FA7A0; color: #3FA7A0;
  }
  .ai-panel-body { flex: 1; padding: 20px; overflow-y: auto; }
  /* Perform only: content still auto-scrolls into view via JS, but the
     user can't grab-scroll it themselves. */
  #performAiPanel .ai-panel-body, #surveysAiPanel .ai-panel-body{ overflow-y: hidden; }
  .ai-welcome { text-align: center; padding-top: 24px; }
  .ai-sparkle {
    font-size:24px; color: #3FA7A0; margin-bottom: 12px;
    display: block; animation: spin 3s linear infinite;
  }
  @keyframes spin {
    0%,100%{ transform: rotate(0deg) scale(1); }
    50%{ transform: rotate(180deg) scale(1.1); }
  }
  .ai-welcome h3 {
    font-size:13.4px; font-weight: 700; color: #1f2937;
    margin: 0 0 8px;
  }
  .ai-welcome p { font-size:8.6px; color: #6b7280; max-width: 300px; margin: 0 auto 16px; }
  .ai-welcome-chips{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
  .ai-bubble {
    background: #e0f4f2; color: #1f2937;
    border-radius: 16px 16px 0 16px;
    padding: 8px 14px; font-size:8.6px;
    max-width: 260px; margin-left: auto; margin-bottom: 16px;
    opacity: 0; transform: translateX(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
  }
  .ai-bubble.visible { opacity: 1; transform: translateX(0); }
  .ai-processing {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 14px; border: 1px solid #e5e7eb;
    border-radius: 20px; width: fit-content;
    font-size:8.6px; color: #374151; background: #fff;
    margin-left: auto; margin-bottom: 16px;
    opacity: 0; transition: opacity 0.4s ease;
  }
  .ai-processing.visible{ opacity: 1; }
  .ai-proc-sparkle{ color: #3FA7A0; font-size:8.6px; }
  .ai-dots span {
    display: inline-block; width: 6px; height: 6px;
    background: #3FA7A0; border-radius: 50%; margin: 0 2px;
    animation: dotPulse 1.2s ease-in-out infinite;
  }
  .ai-dots span:nth-child(2){ animation-delay: 0.2s; }
  .ai-dots span:nth-child(3){ animation-delay: 0.4s; }
  @keyframes dotPulse {
    0%,80%,100%{ opacity:0.3; transform:scale(0.8); }
    40%{ opacity:1; transform:scale(1.2); }
  }
  .ai-panel-footer {
    padding: 12px 20px; border-top: 1px solid #f3f4f6;
  }
  .ai-input-wrap {
    position: relative;
  }
  .ai-input {
    width: 100%; border: 1px solid #e5e7eb; border-radius: 24px;
    padding: 10px 48px 10px 16px; font-size:8.6px;
    color: #374151; outline: none; box-sizing: border-box;
  }
  .ai-input::placeholder { color: #9ca3af; }
  .ai-send {
    position: absolute; right: 6px; top: 50%;
    transform: translateY(-50%);
    width: 32px; height: 32px; border-radius: 50%;
    background: #3FA7A0; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
  }
  .ai-note {
    font-size:7.4px; color: #9ca3af; text-align: center;
    margin-top: 6px;
  }
  /* ============================================================
     Surveys AI Insights — redesigned to match reference video
     (scoped to #surveysAiPanel only; Perform's panel is untouched)
     ============================================================ */
  #surveysAiPanel .ai-panel-title{ font-size:13.4px; }
  #surveysAiPanel .ai-panel-tabs .ai-tab{ font-size:9px; padding: 9px 18px; }

  .ai2-orb{
    width: 64px; height: 64px; border-radius: 50%;
    margin: 0 auto 12px; display:flex; align-items:center; justify-content:center;
    background: radial-gradient(circle, #9EE1E0 0%, rgba(158,225,224,0) 72%);
    color: #3FA7A0;
  }
  .ai2-orb-svg{ width: 26px; height: 26px; }

  .ai2-bubble{
    background: #D7ECF5; color: #1f2937;
    border-radius: 18px;
    padding: 11px 18px; font-size:9.7px;
    max-width: 300px; margin-left: auto; margin-bottom: 16px;
    opacity: 0; transform: translateX(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
  }
  .ai2-bubble.visible{ opacity: 1; transform: translateX(0); }

  .ai2-turn{
    display: flex; align-items: flex-start; gap: 10px;
    margin-bottom: 16px;
    opacity: 0; transition: opacity 0.4s ease;
  }
  .ai2-turn.visible{ opacity: 1; }
  .ai2-turn-sparkle{ color: #3FA7A0; flex-shrink: 0; margin-top: 8px; display:flex; }
  .ai2-turn-sparkle svg{ width: 20px; height: 20px; }

  .ai2-processing-pill{
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 20px;
    padding: 8px 16px; font-size:8.6px; font-weight: 600; color: #1f2937;
  }
  .ai2-dots span{
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    margin: 0 1px; animation: dotPulse 1.2s ease-in-out infinite;
  }
  .ai2-dots span:nth-child(1){ background: #3FA7A0; }
  .ai2-dots span:nth-child(2){ background: #7FCCC0; animation-delay: 0.2s; }
  .ai2-dots span:nth-child(3){ background: #BFE3DE; animation-delay: 0.4s; }

  .ai2-answer-card{
    background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
    padding: 20px 22px; box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    flex: 1; min-width: 0;
  }
  .ai2-answer-section{ padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid #f0f1f3; }
  .ai2-answer-section:last-child{ border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
  .ai2-answer-title{ font-size:10.3px; font-weight: 700; color: #1f2937; margin-bottom: 6px; }
  .ai2-answer-priority{ font-size:8.2px; color: #4b5563; margin-bottom: 6px; }
  .ai2-answer-priority strong{ color: #1f2937; }
  .ai2-answer-text{ font-size:9px; color: #374151; line-height: 1.65; margin: 0; }

  #surveysAiPanel .ai2-send{ background: #fff; border: 1px solid #d1d5db; }

  /* ============================================================
     Pre-open demo: a mouse-pointer icon glides to & "clicks" an
     element, standing in for a visitor's cursor during auto-demos.
     ============================================================ */
  .ai-demo-cursor{
    position: absolute; width: 20px; height: 20px; margin: -3px 0 0 -4px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3l14 8.5-6.2 1.4L16 19l-2.6 1.4-3.2-6.2L5 18V3z' fill='%231c2130' stroke='white' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
    filter: drop-shadow(0 2px 3px rgba(16,24,40,.35));
    z-index: 300; pointer-events: none;
    transition: left .6s var(--ease), top .6s var(--ease);
    transform-origin: 22% 14%;
  }
  .ai-demo-cursor.is-clicking{ transform: scale(.82); transition: transform .15s ease; }
  .ai-demo-cursor.is-clicking::after{
    content:""; position:absolute; top:1px; left:2px; width:14px; height:14px; border-radius:50%;
    border: 2px solid rgba(63,167,160,.6);
    animation: aiCursorRipple .5s ease-out;
  }
  @keyframes aiCursorRipple{
    from{ transform: scale(.4); opacity: 1; }
    to{ transform: scale(2); opacity: 0; }
  }
  tr.ai-demo-row-active td{ background: #f0faf9 !important; }
  tr.ai-demo-row-active td:first-child a,
  tr.ai-demo-row-active td:first-child{ color: #0d9488; }

  /* ============================================================
     Perform AI Insights — richer answer formats (Summary /
     Where to focus? / Compare Reviews), matching the reference
     recording. Scoped so Surveys' simpler card format is untouched.
     ============================================================ */
  .ai2-answer-card.is-plain{ background: none; border: none; box-shadow: none; padding: 0; }

  .ai2-score-row{ display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size:8.2px; color: #374151; }
  .ai2-score-dot{ width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
  .ai2-score-dot--self{ background: #4C7DF0; }
  .ai2-score-dot--mgr{ background: #3FA7A0; }
  .ai2-score-label{ font-weight: 600; }
  .ai2-score-val{ margin-left: auto; font-weight: 700; color: #1f2937; }
  .ai2-score-track{ height: 8px; border-radius: 20px; background: #eef0f3; overflow: hidden; margin-bottom: 12px; }
  .ai2-score-fill{ height: 100%; border-radius: 20px; }
  .ai2-score-fill--self{ background: #4C7DF0; }
  .ai2-score-fill--mgr{ background: #3FA7A0; }

  /* Performance & Potential Overview chart (Perform's Summary tab) */
  .ai2-chart-card{ background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px 24px 18px; margin-bottom: 20px; }
  .ai2-chart-title{ font-size:10.7px; font-weight: 700; color: #1f2937; text-align: center; margin-bottom: 2px; }
  .ai2-chart-subtitle{ font-size:8.2px; color: #6b7280; text-align: center; margin-bottom: 22px; }
  .ai2-chart-body{ display: flex; gap: 6px; }
  .ai2-chart-yaxis-label{
    writing-mode: vertical-rl; transform: rotate(180deg);
    font-size:7.4px; color: #9ca3af; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
  }
  .ai2-chart-plot{ flex: 1; min-width: 0; }
  .ai2-chart-row{ display: flex; align-items: center; gap: 10px; height: 20px; margin-bottom: 5px; }
  .ai2-chart-row-label{ width: 64px; flex-shrink: 0; font-size:8px; color: #374151; text-align: right; }
  .ai2-chart-track-group{
    position: relative; flex: 1; height: 13px; border-right: 1px solid #eef0f3;
    background-image: repeating-linear-gradient(to right, #eef0f3 0, #eef0f3 1px, transparent 1px, transparent 20%);
  }
  .ai2-chart-bar{
    position: absolute; top: 0; left: 0; height: 100%; width: 0%;
    border-radius: 0 3px 3px 0;
    transition: width 0.9s var(--ease);
  }
  .ai2-chart-bar--self{ background: #8FC1EF; }
  .ai2-chart-bar--mgr{ background: #3a3f47; }
  .ai2-chart-xaxis{ display: flex; justify-content: space-between; margin-top: 6px; padding-left: 74px; }
  .ai2-chart-xaxis span{ font-size:7.4px; color: #9ca3af; }
  .ai2-chart-xaxis-label{ text-align: center; font-size:8px; color: #6b7280; margin-top: 6px; }
  .ai2-chart-legend{ display: flex; justify-content: center; gap: 22px; margin-top: 14px; }
  .ai2-chart-legend-item{ display: flex; align-items: center; gap: 6px; font-size:8.2px; color: #374151; }
  .ai2-chart-dot{ width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
  .ai2-chart-dot--self{ background: #8FC1EF; }
  .ai2-chart-dot--mgr{ background: #3a3f47; }

  .ai2-compare-card, .ai2-focus-card{
    background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
    padding: 18px 20px; margin-bottom: 14px; box-shadow: 0 2px 10px rgba(0,0,0,0.04);
  }
  .ai2-compare-card:last-child, .ai2-focus-card:last-child{ margin-bottom: 0; }
  .ai2-card-head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 10px; }
  .ai2-align-pill{
    font-size:7.4px; font-weight: 700; padding: 4px 12px; border-radius: 20px;
    background: #fdece6; color: #d9622a; white-space: nowrap;
  }
  .ai2-priority-pill{ font-size:7.4px; font-weight: 700; padding: 4px 12px; border-radius: 20px; white-space: nowrap; }
  .ai2-priority-pill--high{ background: #fdece6; color: #d9622a; }
  .ai2-priority-pill--medium{ background: #fef3d6; color: #b8860b; }

  .ai2-bullet-list{ margin: 10px 0 0; padding-left: 18px; }
  .ai2-bullet-list li{ list-style: disc; font-size:8.6px; color: #374151; line-height: 1.6; margin-bottom: 6px; }

  .ai2-block-title{ font-size:9px; font-weight: 700; color: #1f2937; margin: 16px 0 8px; }
  .ai2-tag-row{
    font-size:8.6px; font-weight: 600; border-radius: 8px;
    padding: 9px 14px; margin-bottom: 8px;
  }
  .ai2-tag-row--good{ background: #eaf7e6; color: #3f8a3f; }
  .ai2-tag-row--bad{ background: #fdeceb; color: #c0392b; }

  .ai2-show-details{
    display: inline-block; margin-top: 10px; font-size:8.2px;
    font-weight: 700; color: #3FA7A0; cursor: pointer;
  }
  .ai2-show-details:hover{ text-decoration: underline; }

  /* Conversation thread — each tab click appends a new Q&A turn
     below the previous ones (matches the reference recordings:
     answers accumulate rather than replacing each other). */
  .ai2-thread{ display: flex; flex-direction: column; }
  .ai2-qa-turn{ margin-bottom: 22px; }
  .ai2-qa-turn:last-child{ margin-bottom: 0; }

  /* These buttons have no click handler wired — remove the clickable
     affordance (cursor + hover) so they don't look interactive. */
  .icon-btn, .btn-read-more,
  .btn-new-task, .btn-new-survey, .btn-ghost-light, .pagination-btn{
    cursor: default; pointer-events: none;
  }

  /* ============================================================
     EDIT TIME OFF TYPE / EDIT POLICY — reached via Time Off Types'
     "Vacation" row and Policies' edit icon on "Paid Leave Policy".
     Shares the green product-header used elsewhere; Cancel/Save sit
     in .header-actions like Time Management's Close button did.
     ============================================================ */
  .btn-solid-light{
    background:#fff; color:#5DA130; font-weight:700; font-size:8.2px;
    padding:8px 16px; border-radius:9px;
  }
  .btn-solid-light:hover{ background:#f2f8ec; }
  .edit-page-header{ position:relative; }
  .policy-title-edit{ width:12px; height:12px; margin-right:6px; vertical-align:-1px; opacity:.85; }

  .edit-card{
    background:#fff; border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
    overflow:hidden; margin-bottom:24px;
  }
  .edit-section-label{
    background: var(--bg-app); padding:9px 24px; font-size:8px; font-weight:800;
    letter-spacing:.05em; text-transform:uppercase; color: var(--text-secondary);
    display:flex; align-items:center; justify-content:space-between;
  }
  .edit-req{ color: var(--danger); margin-left:2px; }
  .edit-section-body{ padding:16px 24px 24px; }
  .edit-helper{ font-size:7.8px; color: var(--text-tertiary); line-height:1.6; margin-bottom:16px; max-width:920px; }

  .edit-row{ display:flex; gap:24px; margin-bottom:14px; }
  .edit-row:last-child{ margin-bottom:0; }
  .edit-field{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
  .edit-field--sm{ flex:0 0 160px; }
  .edit-field--xs{ flex:0 0 90px; }
  .edit-label{ font-size:7.6px; font-weight:700; color: var(--text-secondary); }
  .edit-input{
    border:1px solid var(--border-subtle); border-radius:8px; padding:8px 10px;
    font-size:8px; color: var(--text-primary); font-family:inherit; background:#fff; width:100%;
  }
  .edit-select{
    border:1px solid var(--border-subtle); border-radius:8px; padding:8px 10px;
    font-size:8px; color: var(--text-primary); background:#fff;
    display:flex; align-items:center; gap:6px;
  }
  .edit-select--sm{ display:inline-flex; padding:5px 8px; }
  .edit-select::after{
    content:""; margin-left:auto; width:6px; height:6px; flex-shrink:0;
    border-right:1.4px solid var(--text-tertiary); border-bottom:1.4px solid var(--text-tertiary);
    transform: rotate(45deg) translateY(-2px);
  }

  .edit-toggle-row{ display:flex; align-items:center; gap:8px; }
  .edit-toggle-label{ font-size:7.8px; font-weight:600; color: var(--text-secondary); }
  .edit-toggle{ position:relative; width:26px; height:15px; flex-shrink:0; }
  .edit-toggle-track{
    position:absolute; inset:0; background:#5b6169; border-radius:20px; transition: background .2s var(--ease);
  }
  .edit-toggle-track::after{
    content:""; position:absolute; top:2px; left:2px; width:11px; height:11px;
    border-radius:50%; background:#fff; box-shadow: var(--shadow-sm); transition: transform .2s var(--ease);
  }
  .edit-toggle-icon{
    position:absolute; top:50%; width:7px; height:7px; transform:translateY(-50%);
    color:#fff; pointer-events:none;
  }
  .edit-toggle-icon--check{ left:3.5px; opacity:0; transition: opacity .15s; }
  .edit-toggle-icon--x{ right:3.5px; opacity:1; transition: opacity .15s; }
  .edit-toggle.is-on .edit-toggle-track{ background:#3EA8B0; }
  .edit-toggle.is-on .edit-toggle-track::after{ transform: translateX(11px); }
  .edit-toggle.is-on .edit-toggle-icon--check{ opacity:1; }
  .edit-toggle.is-on .edit-toggle-icon--x{ opacity:0; }

  .edit-icon-grid{ display:flex; flex-wrap:wrap; gap:9px; }
  .edit-icon-item{
    width:46px; height:46px; border-radius:9px; background: var(--bg-app);
    display:flex; align-items:center; justify-content:center; color: var(--text-tertiary);
    border:1.5px solid transparent; flex-shrink:0;
  }
  .edit-icon-item svg{ width:23px; height:23px; }
  .edit-icon-item.is-selected{ background:#EAF7E4; border-color:#8DC63F; color:#5DA130; }

  .edit-visibility-card{
    width:340px; max-width:100%; margin:0 auto; border:1px solid var(--border-subtle);
    border-radius:12px; padding:18px; text-align:center;
  }
  .edit-visibility-title{ font-weight:700; font-size:9px; color: var(--text-primary); margin-bottom:4px; }
  .edit-visibility-sub{ font-size:7.6px; color: var(--text-tertiary); margin-bottom:14px; }
  .edit-pill-row{ display:flex; gap:10px; justify-content:center; }
  .edit-pill-btn{
    display:flex; align-items:center; gap:6px; border:1px solid var(--border-subtle);
    border-radius:8px; padding:8px 14px; font-size:7.8px; font-weight:600; color: var(--text-secondary);
  }
  .edit-pill-btn svg{ width:12px; height:12px; }
  .edit-pill-btn.is-active{ border-color:#3EA8B0; color:#3EA8B0; }

  .edit-info-banner{
    display:flex; align-items:center; gap:8px; border:1px solid #3EA8B0; background:#F2FAFB;
    border-radius:8px; padding:9px 14px; margin:14px auto 0; max-width:340px; font-size:7.6px; color: var(--text-secondary);
  }
  .edit-info-banner svg{ width:13px; height:13px; color:#3EA8B0; flex-shrink:0; }
  .edit-info-banner a{ color:#3EA8B0; text-decoration:underline; font-weight:600; }

  .edit-radio-row{ display:flex; align-items:flex-start; gap:9px; margin-bottom:14px; }
  .edit-radio-row:last-child{ margin-bottom:0; }
  .edit-radio-row--nested{ margin-top:10px; align-items:center; cursor:default; }
  .edit-radio{
    width:13px; height:13px; border-radius:50%; border:1.5px solid var(--border-subtle);
    flex-shrink:0; margin-top:1px; position:relative;
  }
  .edit-radio.is-square{ border-radius:3px; }
  .edit-radio.is-selected{ border-color:#3EA8B0; }
  .edit-radio.is-selected::after{
    content:""; position:absolute; inset:3px; border-radius:inherit; background:#3EA8B0;
  }
  .edit-radio-title{ font-size:8px; font-weight:700; color: var(--text-primary); }
  .edit-radio-desc{ font-size:7.4px; color: var(--text-tertiary); margin-top:2px; line-height:1.5; }

  /* ---- Edit Policy — two-column layout ---- */
  .policy-grid{ display:flex; align-items:flex-start; gap:20px; }
  .policy-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:18px; }
  .policy-side{ width:250px; flex-shrink:0; display:flex; flex-direction:column; gap:12px; }
  .policy-active-row{ justify-content:flex-end; }
  .policy-card{ background:#fff; border:1px solid var(--border-subtle); border-radius:12px; padding:18px; }
  .policy-h3{ font-size:9.6px; font-weight:700; color: var(--text-primary); margin:0 0 10px; }
  .policy-side .policy-h3{ margin-bottom:4px; }
  .policy-side .edit-radio-desc{ margin-bottom:10px; }
  .policy-structure-label{ margin:18px 0 8px; }
  .policy-structure-row{ display:flex; gap:14px; margin-bottom:16px; }
  .policy-structure-option{
    flex:1; display:flex; gap:9px; border:1.5px solid var(--border-subtle);
    border-radius:10px; padding:14px;
  }
  .policy-structure-option.is-selected{ border-color:#3EA8B0; background:#F2FAFB; }
  .policy-tier-card{ background: var(--bg-app); border-radius:10px; padding:16px; }
  .policy-tier-head{ display:flex; align-items:center; gap:8px; font-size:8.6px; font-weight:700; color: var(--text-primary); margin-bottom:14px; }
  .policy-tier-num{
    width:17px; height:17px; border-radius:50%; background:#fff; border:1px solid var(--border-subtle);
    display:flex; align-items:center; justify-content:center; font-size:7.4px; font-weight:700; color: var(--text-secondary);
  }
  .policy-inline-row{
    display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:7.8px;
    color: var(--text-secondary); margin-bottom:12px;
  }
  .policy-inline-row--split{ gap:40px; align-items:flex-start; }
  .policy-inline-row--split .edit-select{ margin-top:6px; }
  .policy-add-tier{ font-size:7.8px; font-weight:600; color:#3EA8B0; }
  .policy-rules-head{
    display:flex; align-items:center; gap:8px; font-size:9.6px; font-weight:700; color: var(--text-primary); margin-bottom:14px;
  }
  .policy-rules-count{
    background: var(--bg-app); color: var(--text-tertiary); font-size:7.4px; font-weight:700;
    padding:2px 7px; border-radius:20px;
  }
  .policy-rules-empty{
    border:1.5px dashed var(--border-subtle); border-radius:10px; padding:30px;
    text-align:center; color: var(--text-tertiary); font-size:8px;
  }
  .policy-create-rule-btn{
    background:#3EA8B0; color:#fff; border-radius:8px; padding:8px 18px;
    font-size:8px; font-weight:700; margin-top:12px;
  }
  .policy-desc-link{
    display:flex; align-items:center; gap:6px; font-size:8px; color: var(--text-tertiary);
  }
  .policy-desc-link svg{ width:11px; height:11px; }
  .policy-adv-row{ justify-content:space-between; margin-top:12px; }
  .policy-adv-row:first-of-type{ margin-top:0; }

  /* ============================================================
     ADD TIME OFF — side drawer opened from a KPI card's "+" chip.
     position:fixed with JS-computed bounds (see .req-detail-overlay)
     for the same reason the request-detail overlay uses them: it must
     stay below the topbar and beside the sidebar, at every window size.
     ============================================================ */
  .addtimeoff-overlay{
    position:fixed; background: rgba(20,26,34,.45);
    z-index:60; opacity:0; pointer-events:none;
    transition: opacity .25s var(--ease);
    /* Matches .app-shell's own bottom-right rounding — see .addtimeoff-panel. */
    border-bottom-right-radius: var(--radius-shell);
  }
  .addtimeoff-overlay.is-open{ opacity:1; pointer-events:auto; }
  .addtimeoff-panel{
    position:absolute; top:0; right:0; height:100%; width:470px; max-width:94vw;
    background:#fff; box-shadow: -8px 0 30px rgba(16,24,40,.18);
    display:flex; flex-direction:column;
    transform: translateX(100%);
    transition: transform .3s var(--ease);
    /* Same reason as .req-detail-panel: this corner coincides exactly
       with .app-shell's own bottom-right corner. */
    border-bottom-right-radius: var(--radius-shell);
    overflow:hidden;
  }
  .addtimeoff-overlay.is-open .addtimeoff-panel{ transform: translateX(0); }
  .addtimeoff-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:20px 24px; border-bottom:1px solid var(--border-subtle); flex-shrink:0;
  }
  .addtimeoff-head h2{ margin:0; font-family: var(--font-display); font-size:15px; font-weight:700; color: var(--text-primary); }
  .addtimeoff-head-actions{ display:flex; align-items:center; gap:10px; }
  .addtimeoff-cancel-btn{
    font-size:8.4px; font-weight:700; color: var(--text-primary);
    border:1px solid var(--border-subtle); border-radius:8px; padding:7px 16px;
  }
  .addtimeoff-cancel-btn:hover{ background: var(--bg-app); }
  .addtimeoff-save-btn{
    font-size:8.4px; font-weight:700; color:#fff; background:#3EA8B0;
    border-radius:8px; padding:7px 18px;
  }
  .addtimeoff-save-btn:hover{ background:#379299; }
  .addtimeoff-body{ padding:20px 24px 40px; overflow-y:auto; flex:1; min-height:0; }

  .addtimeoff-employee-row{ display:flex; align-items:center; gap:8px; }
  .addtimeoff-input-wrap{ position:relative; flex:1; min-width:0; }
  .addtimeoff-input-wrap .edit-input{ padding-right:26px; }
  .addtimeoff-clear-icon{
    position:absolute; right:8px; top:50%; transform:translateY(-50%);
    width:11px; height:11px; color: var(--text-tertiary);
  }
  .addtimeoff-view-btn{
    display:flex; align-items:center; gap:5px; white-space:nowrap;
    border:1px solid var(--border-subtle); border-radius:8px; padding:8px 12px;
    font-size:7.8px; font-weight:600; color: var(--text-secondary); flex-shrink:0;
  }
  .addtimeoff-view-btn svg{ width:11px; height:11px; }

  .addtimeoff-icon-input{ position:relative; }
  .addtimeoff-icon-input svg{
    position:absolute; left:9px; top:50%; transform:translateY(-50%);
    width:11px; height:11px; color: var(--text-tertiary); pointer-events:none;
  }
  .addtimeoff-icon-input .edit-input{ padding-left:27px; }
  .addtimeoff-icon-input .edit-input::placeholder{ color: var(--text-tertiary); }

  .addtimeoff-static-row{ display:flex; align-items:center; justify-content:space-between; padding:2px 0; font-size:7.8px; }
  .addtimeoff-static-row + .addtimeoff-static-row{ margin-top:6px; }
  .addtimeoff-static-label{ color: var(--text-secondary); }
  .addtimeoff-static-value{ color: var(--text-primary); font-weight:700; }
  .addtimeoff-dash{ font-size:8.6px; color: var(--text-tertiary); font-weight:700; }

  .addtimeoff-editor{ border:1px solid var(--border-subtle); border-radius:8px; overflow:hidden; }
  .addtimeoff-editor-toolbar{
    display:flex; align-items:center; flex-wrap:wrap; gap:9px;
    padding:7px 10px; border-bottom:1px solid var(--border-subtle);
    font-size:7.4px; color: var(--text-secondary); background:#fafbfc;
  }
  .addtimeoff-editor-toolbar + .addtimeoff-editor-toolbar{ border-top:1px solid var(--border-subtle); border-bottom:none; }
  .addtimeoff-editor-toolbar svg{ width:10px; height:10px; }
  .addtimeoff-editor-select{
    display:flex; align-items:center; gap:4px; border:1px solid var(--border-subtle);
    border-radius:5px; padding:3px 6px; font-size:7.2px; color: var(--text-secondary);
  }
  .addtimeoff-editor-select svg{ width:7px; height:7px; }
  .addtimeoff-editor-btn{ font-weight:800; color: var(--text-secondary); width:14px; text-align:center; }
  .addtimeoff-editor-btn--i{ font-style:italic; font-weight:700; }
  .addtimeoff-editor-btn--u{ text-decoration:underline; font-weight:700; }
  .addtimeoff-editor-sep{ width:1px; height:12px; background: var(--border-subtle); }
  .addtimeoff-editor-body{ min-height:110px; padding:10px 12px; }

  .addtimeoff-checkbox-row{ display:flex; align-items:center; }

  .addtimeoff-upload{
    border:1.5px dashed var(--border-subtle); border-radius:10px; padding:14px 16px;
    display:flex; align-items:center; justify-content:space-between; gap:10px;
  }
  .addtimeoff-upload-text{ font-size:7.8px; color: var(--text-secondary); }
  .addtimeoff-upload-text a{ color:#3EA8B0; font-weight:700; }
  .addtimeoff-upload-cam{
    width:28px; height:28px; border-radius:8px; border:1px solid var(--border-subtle);
    display:flex; align-items:center; justify-content:center; color: var(--text-tertiary); flex-shrink:0;
  }
  .addtimeoff-upload-cam svg{ width:13px; height:13px; }
  .addtimeoff-uploads-label{ display:flex; align-items:center; gap:5px; }
  .addtimeoff-uploads-label svg{ width:11px; height:11px; color: var(--text-tertiary); }

  /* ============================================================
     USER SETTINGS — reached via the avatar menu's "My Settings"
     ============================================================ */
  #page-usersettings{ margin: -22px -28px 0; background:#fff; min-height:100%; }
  .us-header{
    display:flex; align-items:center; gap:10px; padding:18px 28px;
    border-bottom:1px solid var(--border-subtle);
  }
  .us-header svg{ width:17px; height:17px; color: var(--text-tertiary); }
  .us-header h1{ font-family: var(--font-display); font-size:14px; font-weight:600; color: var(--text-secondary); margin:0; }

  .us-body{ display:flex; align-items:stretch; }
  .us-sidebar{ width:190px; flex-shrink:0; padding:20px 0; border-right:1px solid var(--border-subtle); }
  .us-sidebar-label{ padding:0 24px 10px; font-size:7.6px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color: var(--text-tertiary); }
  .us-nav-item{
    display:flex; align-items:center; gap:10px; padding:9px 24px;
    font-size:9px; font-weight:600; color: var(--text-secondary);
    border-left:2.5px solid transparent;
  }
  .us-nav-item svg{ width:14px; height:14px; color: var(--text-tertiary); flex-shrink:0; }
  .us-nav-item:hover{ background: var(--bg-app); }
  .us-nav-item.is-active{
    color: var(--text-primary); font-weight:700; background: var(--bg-app);
    border-left-color:#3EA8B0;
  }
  .us-nav-item.is-active svg{ color:#3EA8B0; }

  .us-content{ flex:1; min-width:0; padding:24px 28px 40px; background: var(--bg-app); }
  .us-content h2{ font-family: var(--font-display); font-size:16px; font-weight:700; color: var(--text-primary); margin:0 0 18px; }
  .us-section-label{ font-size:10px; font-weight:700; color: var(--text-primary); margin:20px 0 10px; }
  .us-section-label:first-of-type{ margin-top:0; }

  .us-int-block{
    background:#fff; border:1px solid var(--border-subtle); border-radius: var(--radius-md);
    margin-bottom:14px; overflow:hidden;
  }
  .us-consent-row{
    display:flex; align-items:flex-start; gap:10px; padding:12px 18px;
    border-bottom:1px solid var(--border-subtle); font-size:8px; color: var(--text-secondary); line-height:1.5;
    cursor:default;
  }
  .us-consent-row input{ margin-top:2px; width:13px; height:13px; accent-color:#3EA8B0; flex-shrink:0; }
  .us-consent-row--disabled{ color: var(--text-tertiary); }
  .us-int-block--muted .us-consent-row{ color: var(--text-tertiary); }
  .us-int-block--muted .us-consent-row input{ accent-color: var(--text-tertiary); }

  .us-int-row{ display:flex; align-items:center; gap:14px; padding:16px 18px; }
  .us-int-row--solo{ border-bottom:none; }
  .us-int-logo{ width:34px; height:34px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
  .us-int-logo img{ max-width:100%; max-height:100%; object-fit:contain; }
  .us-int-info{ flex:1; min-width:0; }
  .us-int-name{ font-size:10px; font-weight:700; color: var(--text-primary); }
  .us-int-status{ font-size:8px; color: var(--text-tertiary); margin-top:2px; }

  .us-int-btn{
    flex-shrink:0; padding:9px 18px; border-radius:8px; font-size:8.6px; font-weight:700;
    transition: filter .15s var(--ease), opacity .2s var(--ease);
  }
  .us-int-btn--connect{ background:#3EA8B0; color:#fff; }
  .us-int-btn--connect:hover{ filter:brightness(1.06); }
  .us-int-btn--outline{ background:#fff; border:1px solid var(--border-subtle); color: var(--text-primary); }
  .us-int-btn--outline:hover{ background: var(--bg-app); }
  .us-int-btn--disabled{ background: var(--border-subtle); color: var(--text-tertiary); cursor:default; }
  .us-int-btn:disabled{ opacity:.7; pointer-events:none; }

  .us-zoom-notify{ padding:0 18px 18px; }
  .us-zoom-notify-label{ font-size:8px; color: var(--text-secondary); margin-bottom:8px; }
  .us-zoom-check{ display:flex; align-items:center; gap:7px; font-size:8.6px; color: var(--text-primary); padding:3px 0; }
  .us-zoom-check input{ width:13px; height:13px; accent-color:#3EA8B0; }

  /* Google "Connect" -> "Connected/Configure" transition — the row's
     status text and button rise into place as they update. */
  .us-int-block.us-int-just-connected .us-int-status,
  .us-int-block.us-int-just-connected .us-int-btn{
    animation: usIntRiseIn .45s var(--ease);
  }
  @keyframes usIntRiseIn{
    from{ opacity:0; transform: translateY(14px); }
    to{ opacity:1; transform: translateY(0); }
  }