:root{
    --brand:#2161AC; --brand-hover:#1B528F; --brand-soft:#E8F0FA;
    --bg:#F5F6F8; --surface:#FFFFFF; --border:#E1E4E8;
    --text:#1F2328; --text-2:#57606A; --text-3:#8B949E;
    --success:#1A7F37; --success-soft:#E6F4EA; --warning:#9A6700; --danger:#CF222E;
    --danger-soft:#FDF2F3; --warning-soft:#FFF8E6;
    font-size:14px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{font-family:"Segoe UI Variable","Segoe UI",Inter,system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
  button{font-family:inherit;cursor:pointer}
  a{color:var(--brand);text-decoration:none}
  .hidden{display:none!important}
  svg.ic{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
  svg.ic.sm{width:16px;height:16px}
  svg.ic.xs{width:14px;height:14px}
  svg.ic.fill-star{fill:#B8860B;stroke:#B8860B}

  /* Login */
  #loginView,#otpView{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(180deg,#EEF2F8 0%,#F5F6F8 100%);padding:24px}
  .login-logo{display:flex;align-items:center;justify-content:center;margin-bottom:28px}
  .app-logo-full{height:auto;display:block}
  .login-logo .app-logo-full{width:260px;max-width:80vw}
  .topbar-logo{width:auto;height:28px}
  .login-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 30px rgba(20,30,60,.07);width:100%;max-width:400px;padding:36px}
  .login-card h1{font-size:21px;font-weight:600;margin-bottom:4px}
  .login-card .sub{color:var(--text-2);margin-bottom:24px;font-size:13.5px}
  .field{margin-bottom:16px}
  .field label{display:block;font-size:12.5px;font-weight:600;color:var(--text-2);margin-bottom:6px}
  .field input,.field select,.field textarea{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:6px;font-size:14px;font-family:inherit;background:#fff;color:var(--text)}
  .field textarea{resize:vertical;min-height:64px}
  .field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--brand);outline-offset:-1px;border-color:var(--brand)}
  .field .fhint{font-size:11.5px;color:var(--text-3);margin-top:5px;line-height:1.4}
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:6px;padding:10px 18px;font-size:14px;font-weight:600}
  .btn-primary{background:var(--brand);color:#fff;width:100%}
  .btn-primary:hover:not(:disabled){background:var(--brand-hover)}
  /* A disabled button has to LOOK disabled. doForgotPassword() correctly sets
     btn.disabled and relabels it "Sent", but with no disabled styling it kept
     full brand colour and still lit up on hover, so the finished state read as
     a live button someone should press again. :not(:disabled) on the hover
     rules above is half of the fix - without it, hover still repainted the
     background over anything set here. */
  .btn:disabled,button:disabled{opacity:.55;cursor:default;box-shadow:none}
  .btn-sec:hover:not(:disabled){background:#F3F4F6}
  .btn-danger:hover:not(:disabled){background:#FDF2F3}
  .btn-sec{background:var(--surface);border:1px solid var(--border);color:var(--text);padding:7px 14px;font-weight:500;display:inline-flex;align-items:center;gap:7px}
  .btn-danger{background:#fff;border:1px solid #F0C4C8;color:var(--danger)}
  /* Phase 11 - the licence panel in Settings, and the same three states the
     operator portal uses so the two read alike. */
  .lic-state{font-size:13.5px;font-weight:600;border-radius:6px;padding:9px 12px;margin-bottom:14px;line-height:1.4}
  .lic-ok{background:var(--success-soft);color:var(--success)}
  .lic-soon{background:var(--warning-soft);color:var(--warning)}
  .lic-expired{background:var(--danger-soft);color:var(--danger)}
  .lic-rows{display:flex;flex-direction:column;gap:9px}
  .lic-rows > div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-size:13.5px}
  .lic-rows span{color:var(--text-2)}
  .lic-rows b{font-weight:600;text-align:right}
  .login-foot{margin-top:22px;text-align:center;font-size:12.5px;color:var(--text-3)}
  .login-error{background:#FDF2F3;border:1px solid #F0C4C8;color:var(--danger);font-size:12.5px;border-radius:6px;padding:8px 12px;margin-bottom:14px;line-height:1.4}
  .forgot{font-size:12.5px}
  .otp-boxes{display:flex;gap:10px;justify-content:center;margin:26px 0}
  .otp-boxes input{width:46px;height:54px;text-align:center;font-size:22px;font-weight:600;border:1px solid var(--border);border-radius:8px}
  .otp-boxes input:focus{outline:2px solid var(--brand);border-color:var(--brand)}
  .trust{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-2);margin-bottom:18px;justify-content:center}

  /* Shell */
  #appShell{display:none;height:100vh;flex-direction:column}
  .topbar{height:60px;background:var(--surface);border-bottom:1px solid var(--border);display:grid;grid-template-columns:1fr minmax(280px,560px) 1fr;align-items:center;padding:0 20px;gap:16px;flex-shrink:0;z-index:30}
  .topbar .brand{display:flex;align-items:center;gap:11px;justify-self:start}
  .topbar .brand b{font-size:17px;font-weight:700}
  .topbar .brand b span{color:var(--brand)}
  .search-wrap{width:100%;justify-self:center;position:relative}
  .search-wrap input{width:100%;padding:8px 12px 8px 34px;border:1px solid var(--border);border-radius:6px;background:var(--bg);font-size:13.5px;font-family:inherit}
  .search-wrap input:focus{outline:2px solid var(--brand);background:#fff}
  .search-wrap .sicon{position:absolute;left:10px;top:9px;color:var(--text-3)}
  .search-results{position:absolute;top:40px;left:0;right:0;background:#fff;border:1px solid var(--border);border-radius:8px;box-shadow:0 10px 30px rgba(20,30,60,.12);padding:6px;display:none;max-height:340px;overflow:auto;z-index:50}
  .search-results.open{display:block}
  .sr-head{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-3);padding:8px 10px 4px}
  .sr-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;cursor:pointer;font-size:13.5px}
  .sr-item:hover{background:var(--brand-soft)}
  .sr-item .type-ic{width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .topbar-right{justify-self:end;display:flex;align-items:center;gap:6px}
  .icon-btn{width:36px;height:36px;border-radius:8px;border:none;background:transparent;color:var(--text-2);display:flex;align-items:center;justify-content:center;position:relative}
  .icon-btn:hover{background:#F0F2F5;color:var(--text)}
  .badge-dot{position:absolute;top:4px;right:4px;background:var(--danger);color:#fff;border-radius:99px;font-size:9.5px;font-weight:700;min-width:16px;height:16px;display:flex;align-items:center;justify-content:center;padding:0 4px;border:2px solid #fff}
  .avatar{width:30px;height:30px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}
  .avatar.a0{background:#9CA3AF}
  .avatar.sm{width:26px;height:26px;font-size:10.5px}
  .shell-body{flex:1;display:flex;overflow:hidden}
  .leftnav{width:76px;background:var(--surface);border-right:1px solid var(--border);padding:8px 6px;display:flex;flex-direction:column;gap:2px;flex-shrink:0;overflow-y:auto}
  .nav-item{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 2px 8px;border-radius:8px;border:none;background:transparent;color:var(--text-2);font-size:10.5px;font-weight:500;width:100%;line-height:1.15;text-align:center}
  .nav-item:hover{background:#F0F2F5;color:var(--text)}
  .nav-item.active{background:var(--brand-soft);color:var(--brand);font-weight:600}
  .nav-sep{height:1px;background:var(--border);margin:8px 10px;flex-shrink:0}
  .main{flex:1;overflow-y:auto;padding:24px 28px}
  .main.no-pad{padding:0;overflow:hidden;display:flex;flex-direction:column}
  .page-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
  .page-head h2{font-size:20px;font-weight:600}
  .home-greet{font-size:30px!important;font-weight:500!important}
  .page-head .count{color:var(--text-3);font-size:13px;font-weight:400}
  .page-head .actions{margin-left:auto;display:flex;gap:8px;align-items:center}
  .btn-brand-sm{background:var(--brand);color:#fff;border:none;border-radius:6px;padding:8px 14px;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:7px}
  .btn-brand-sm:hover{background:var(--brand-hover)}
  .view-toggle{display:flex;border:1px solid var(--border);border-radius:7px;overflow:hidden}
  .view-toggle button{border:none;background:#fff;color:var(--text-3);width:34px;height:32px;display:flex;align-items:center;justify-content:center}
  .view-toggle button.on{background:var(--brand-soft);color:var(--brand)}
  .view-toggle button:not(:last-child){border-right:1px solid var(--border)}
  .section-title{font-size:15px;font-weight:600;margin:22px 0 12px;display:flex;align-items:center;gap:8px}
  .section-title:first-of-type{margin-top:0}
  .section-title .sc{color:var(--text-3);font-weight:400;font-size:13px}
  .see-all{margin-left:auto;font-size:12.5px;font-weight:500}
  /* Stacked actions on a section heading, for the group page's "New
     dashboard" / "Add existing" pair. Side by side they crowded the heading
     and read as one long strip of buttons; stacked, the primary action sits
     on top and the secondary one directly under it. align-items:stretch so
     both match the width of the wider label instead of stepping raggedly. */
  .section-actions{margin-left:auto;display:flex;flex-direction:column;gap:6px;align-items:stretch}
  .section-actions .btn{font-size:12.5px;font-weight:500;justify-content:center;white-space:nowrap}
  .tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
  .tile{background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden;cursor:pointer;transition:box-shadow .15s,border-color .15s;position:relative}
  .tile:hover{box-shadow:0 6px 18px rgba(20,30,60,.09);border-color:#C9D2E0}
  .tile .thumb{height:110px;display:flex;align-items:center;justify-content:center;color:#fff;position:relative}
  .tile .thumb svg.ic{width:34px;height:34px;stroke-width:1.3;opacity:.95}
  .thumb.dash{background:linear-gradient(135deg,#E3A600,#F2C811 55%,#F8DE6A);color:#3A3000}
  .thumb.rep{background:linear-gradient(135deg,#1B5E39,#217346 55%,#3D9E6B);color:#fff}
  .thumb .live-chip{position:absolute;top:8px;left:8px;background:rgba(255,255,255,.92);color:var(--success);font-size:10px;font-weight:700;padding:3px 8px;border-radius:99px;letter-spacing:.4px}
  .tile .t-body{padding:12px 14px}
  .tile .t-name{font-weight:600;font-size:13.5px;margin-bottom:5px;padding-right:4px}
  .tile .t-meta{font-size:12px;color:var(--text-3);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .chip{font-size:11px;background:#F0F2F5;border:1px solid var(--border);border-radius:99px;padding:1.5px 8px;color:var(--text-2)}
  .star{position:absolute;top:8px;right:8px;background:rgba(255,255,255,.92);border:none;border-radius:6px;width:26px;height:26px;color:#B8860B;display:flex;align-items:center;justify-content:center}
  .star.off{color:#9CA3AF}
  .tile-menu-btn{position:absolute;top:8px;right:40px;background:rgba(255,255,255,.92);border:none;border-radius:6px;width:26px;height:26px;color:var(--text-2);display:none;align-items:center;justify-content:center}
  .tile:hover .tile-menu-btn{display:flex}
  .group-card .tile-menu-btn{display:flex}
  .type-tag{font-size:10.5px;font-weight:700;letter-spacing:.4px;border-radius:4px;padding:1.5px 6px;white-space:nowrap}
  .type-tag.d{background:#FCF3CE;color:#8A6D00}
  .type-tag.r{background:#E2F0E8;color:#217346}
  .group-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px;cursor:pointer;transition:box-shadow .15s;position:relative}
  .group-card:hover{box-shadow:0 6px 18px rgba(20,30,60,.09)}
  .group-card .g-ic{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:12px}
  .group-card h4{font-size:14px;font-weight:600;margin-bottom:4px}
  .group-card p{font-size:12.5px;color:var(--text-2);margin-bottom:10px;line-height:1.45;min-height:36px}
  .group-card .g-meta{font-size:12px;color:var(--text-3)}
  .group-card .tile-menu-btn{right:8px}
  /* Viewer */
  .viewer-head{background:var(--surface);border-bottom:1px solid var(--border);padding:10px 18px;display:flex;align-items:center;gap:10px;flex-shrink:0}
  .crumb{font-size:12.5px;color:var(--text-3)}
  .crumb a{color:var(--text-3)}
  .crumb a:hover{color:var(--brand)}
  .viewer-head h3{font-size:15.5px;font-weight:600;display:flex;align-items:center;gap:8px}
  .vh-actions{margin-left:auto;display:flex;align-items:center;gap:4px}
  .viewer-body{flex:1;display:flex;overflow:hidden}
  .iframe-wrap{flex:1;background:#EDEFF2;display:flex;align-items:center;justify-content:center;position:relative}
  .iframe-wrap iframe{width:100%;height:100%;border:none;background:#fff}
  .freshness{position:absolute;bottom:10px;left:12px;background:rgba(255,255,255,.94);border:1px solid var(--border);font-size:11px;color:var(--text-2);border-radius:6px;padding:4px 10px}
  .placeholder-embed{text-align:center;color:var(--text-2);padding:40px;max-width:460px}
  .placeholder-embed .ph-ic{color:var(--text-3);margin-bottom:14px}
  .placeholder-embed .ph-ic svg.ic{width:44px;height:44px;stroke-width:1.2}
  .placeholder-embed h4{font-size:15px;margin-bottom:6px;color:var(--text)}
  .placeholder-embed p{font-size:13px;line-height:1.5}
  .comments-panel{width:360px;border-left:1px solid var(--border);background:var(--surface);display:flex;flex-direction:column;flex-shrink:0}
  .cp-head{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
  .cp-head b{font-size:14px}
  .cp-filter{margin-left:auto;border:1px solid var(--border);border-radius:6px;padding:5px 8px;font-size:12.5px;font-family:inherit;background:#fff;color:var(--text-2)}
  .cp-list{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:16px}
  .cthread{border:1px solid var(--border);border-radius:10px;padding:12px}
  .cthread.resolved{background:#FAFBFC;border-color:#D7E7DB}
  .resolved-banner{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--success);background:var(--success-soft);border-radius:6px;padding:4px 9px;margin-bottom:10px;font-weight:600}
  .comment{display:flex;gap:10px}
  .comment .c-body{flex:1;min-width:0}
  .c-top{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
  .c-top b{font-size:13px}
  .c-top .desig{font-size:11px;color:var(--text-3)}
  .c-top .time{font-size:11px;color:var(--text-3)}
  .c-text{font-size:13px;line-height:1.5;margin-top:3px}
  .mention{background:var(--brand-soft);color:var(--brand);border-radius:4px;padding:0 4px;font-weight:600;font-size:12.5px}
  .c-actions{display:flex;gap:14px;margin-top:6px}
  .c-actions button{border:none;background:none;color:var(--text-3);font-weight:600;font-size:11.5px;padding:0}
  .c-actions button:hover{color:var(--brand)}
  .replies{margin:10px 0 0 20px;padding-left:14px;border-left:2px solid var(--border);display:flex;flex-direction:column;gap:10px}
  .view-replies{border:none;background:none;color:var(--text-2);font-weight:600;font-size:12px;text-align:left;margin:8px 0 0 42px;padding:0}
  .view-replies:hover{color:var(--brand)}
  .composer{border-top:1px solid var(--border);padding:12px 14px;display:flex;gap:10px;align-items:flex-start}
  .composer textarea{flex:1;border:1px solid var(--border);border-radius:8px;padding:9px 11px;font-family:inherit;font-size:13px;resize:none;height:38px;transition:height .15s}
  .composer textarea:focus{outline:2px solid var(--brand);height:72px}
  .composer .send{background:var(--brand);color:#fff;border:none;border-radius:8px;width:38px;height:38px;display:flex;align-items:center;justify-content:center}
  .mention-pop{position:absolute;bottom:calc(100% + 6px);left:12px;right:12px;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:0 -8px 26px rgba(20,30,60,.14);padding:5px;z-index:20;max-height:230px;overflow:auto}
  .mp-item{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:7px;cursor:pointer}
  .mp-item:hover{background:var(--brand-soft)}
  .reply-bar{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-2);background:#FAFBFC;border-top:1px solid var(--border);padding:7px 16px}
  .reply-bar .rb-x{margin-left:auto;border:none;background:none;color:var(--text-3);display:flex;padding:2px}
  /* Tables */
  .table-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:visible}
  table{width:100%;border-collapse:collapse;font-size:13px}
  th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-3);font-weight:700;padding:11px 16px;border-bottom:1px solid var(--border);background:#FAFBFC}
  td{padding:12px 16px;border-bottom:1px solid var(--border);vertical-align:middle}
  tr:last-child td{border-bottom:none}
  tbody tr:hover td{background:#FAFBFC}
  tr.rowlink{cursor:pointer}
  .row-name{display:flex;align-items:center;gap:10px;font-weight:600}
  .row-name .type-ic{width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
  .star-cell{border:none;background:none;color:#B8860B;display:flex;align-items:center}
  .star-cell.off{color:#C6CBD1}
  .row-actions{display:flex;gap:4px;justify-content:flex-end}
  .row-actions .icon-btn{width:30px;height:30px}
  .person{display:flex;align-items:center;gap:10px}
  .person .p-n{font-weight:600}
  .person .p-e{font-size:11.5px;color:var(--text-3)}
  .role-badge{font-size:11px;font-weight:700;border-radius:99px;padding:2.5px 10px;white-space:nowrap}
  .role-badge.sa{background:#FCE7F3;color:#BE185D}
  .role-badge.ad{background:var(--brand-soft);color:var(--brand)}
  .role-badge.me{background:#F0F2F5;color:var(--text-2)}
  .status-b{font-size:11.5px;display:inline-flex;align-items:center;gap:5px;color:var(--text-2);white-space:nowrap}
  .status-b::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--success)}
  .status-b.pending::before{background:#D97706}
  .status-b.off::before{background:#9CA3AF}
  .tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:16px}
  .tab{border:none;background:none;padding:9px 16px;font-size:13.5px;font-weight:500;color:var(--text-2);border-bottom:2px solid transparent}
  .tab.active{color:var(--brand);border-bottom-color:var(--brand);font-weight:600}
  /* Settings */
  /* `align-items:start` used to let every card shrink to its own content, so
     the two cards in a row ended at different heights and the grid looked
     ragged - most obviously Profile vs Password, and Licence vs Email
     notifications once the Licence card landed. Dropping it restores the grid
     default (stretch), which makes both cards in a row exactly as tall as the
     taller one. */
  .settings-grid{display:grid;grid-template-columns:280px 1fr;gap:20px}
  /* A flex column so the extra height a stretched card gains can be given to
     something deliberately, rather than just appearing under the last
     element. */
  .settings-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:20px;display:flex;flex-direction:column}
  /* The card's action sits on the bottom edge, so the buttons of both cards
     in a row line up with each other instead of floating at whatever height
     their own fields happened to end. align-self keeps it content-width -
     without it the flex column would stretch it across the whole card. */
  .settings-card > .btn-brand-sm:last-child{margin-top:auto;align-self:flex-start}
  /* The one card with no action. Its rows take the slack instead, spreading
     to the card's full height rather than leaving a hole beneath them. */
  .settings-card > .lic-rows:last-child{flex:1;justify-content:space-between}
  .settings-card h4{font-size:14.5px;font-weight:600;margin-bottom:4px;display:flex;align-items:center;gap:8px}
  .settings-card .sc-sub{font-size:12.5px;color:var(--text-2);margin-bottom:16px}
  .color-row{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
  .color-row input[type=color]{width:44px;height:34px;border:1px solid var(--border);border-radius:6px;padding:2px;background:#fff}
  .swatches{display:flex;gap:8px}
  .swatch{width:28px;height:28px;border-radius:6px;border:2px solid transparent;cursor:pointer}
  .swatch.sel{border-color:var(--text)}
  .preview-bar{border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-top:6px}
  .preview-bar .pb-top{background:var(--surface);border-bottom:1px solid var(--border);padding:9px 12px;display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600}
  .preview-bar .pb-body{padding:14px 12px;display:flex;gap:8px}
  /* Popovers & modals */
  .notif-pop{position:fixed;top:56px;right:14px;width:380px;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 16px 44px rgba(20,30,60,.16);z-index:80;display:none;overflow:hidden}
  .notif-pop.open{display:block}
  .np-head{padding:13px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center}
  .np-head b{font-size:14px}
  .np-head button{margin-left:auto;border:none;background:none;color:var(--brand);font-size:12px;font-weight:600}
  .np-item{display:flex;gap:11px;padding:12px 16px;border-bottom:1px solid var(--border);cursor:pointer}
  .np-item:hover{background:#FAFBFC}
  .np-item:last-child{border-bottom:none}
  .np-item.unread{background:var(--brand-soft)}
  .np-item .np-t{font-size:12.5px;line-height:1.45}
  .np-item .np-time{font-size:11px;color:var(--text-3);margin-top:3px}
  .modal-veil{position:fixed;inset:0;background:rgba(15,20,30,.42);z-index:90;display:none;align-items:center;justify-content:center}
  .modal-veil.open{display:flex}
  .modal{background:#fff;border-radius:12px;width:520px;max-width:94vw;box-shadow:0 24px 60px rgba(10,20,40,.3);overflow:hidden;display:flex;flex-direction:column;max-height:88vh}
  .modal.wide{width:600px}
  .modal-head{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;flex-shrink:0}
  .modal-head b{font-size:15px}
  .modal-head .x{margin-left:auto;border:none;background:none;color:var(--text-3);display:flex}
  .modal-body{padding:18px 20px;overflow-y:auto}
  .modal-foot{padding:14px 20px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px;align-items:center;flex-shrink:0}
  .impact{font-size:12.5px;color:var(--text-2);margin-right:auto}
  .share-user{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px}
  .share-user:hover{background:#FAFBFC}
  .share-user label{margin-left:auto}
  .scope-box{border:1px solid var(--border);border-radius:8px;padding:12px 14px;margin-top:8px;font-size:13px}
  .scope-box .sr{display:flex;align-items:center;gap:8px;padding:5px 0}
  .access-group{border:1px solid var(--border);border-radius:8px;padding:12px 14px;margin-bottom:10px}
  .access-group .ag-head{display:flex;align-items:center;gap:10px;font-weight:600;font-size:13.5px;cursor:pointer;user-select:none}
  .ag-chev{border:none;background:none;color:var(--text-3);display:flex;align-items:center;padding:2px;transition:transform .15s}
  .ag-chev.open{transform:rotate(90deg)}
  .ag-all{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;color:var(--text-2);cursor:pointer;white-space:nowrap}
  .access-items{margin-top:10px;padding-top:6px;border-top:1px dashed var(--border);display:flex;flex-direction:column}
  .access-items label{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--text-2);padding:6px 4px;border-radius:6px}
  .access-items label:hover{background:#FAFBFC}
  .access-items label.dim{opacity:.55}
  .access-items .ai-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
  .access-items .ai-type{font-size:10px;font-weight:700;letter-spacing:.3px;color:var(--text-3);flex-shrink:0}
  /* Group pickers: the asset editor's "which groups is this in" checkbox
     list (D-03 - more than one is allowed), and the group page's "add an
     existing dashboard/report" dialog. Scrolls rather than growing the
     modal past the viewport once a tenant has more than a handful. */
  .grp-pick-list{display:flex;flex-direction:column;max-height:240px;overflow-y:auto;border:1px solid var(--border);border-radius:8px;padding:4px}
  .grp-pick{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--text);padding:7px 8px;border-radius:6px;cursor:pointer}
  .grp-pick:hover{background:#FAFBFC}
  .grp-pick span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .checkrow{display:flex;align-items:center;gap:8px;font-size:13px;padding:4px 0}
  .warn-note{background:#FFF8E6;border:1px solid #F0E0B0;color:#7A5E00;font-size:12px;border-radius:6px;padding:8px 12px;margin-top:10px;line-height:1.45}
  .ctx-menu{position:fixed;background:#fff;border:1px solid var(--border);border-radius:8px;box-shadow:0 12px 34px rgba(20,30,60,.16);z-index:110;min-width:180px;padding:5px;display:none}
  .ctx-menu.open{display:block}
  .ctx-menu button{display:flex;align-items:center;gap:9px;width:100%;border:none;background:none;padding:8px 11px;font-size:13px;border-radius:6px;color:var(--text);text-align:left}
  .ctx-menu button:hover{background:#F3F4F6}
  .ctx-menu button.danger{color:var(--danger)}
  .ctx-menu .cm-sep{height:1px;background:var(--border);margin:4px 6px}
  /* max-width added with FR-CON-04: the embed-host refusal names the four
     permitted hosts, which is far longer than any toast before it and would
     otherwise render wider than a phone screen. A max-width cannot affect a
     toast whose content is already narrower, so every existing message is
     unchanged. */
  .toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--text);color:#fff;font-size:13px;padding:10px 18px;border-radius:8px;z-index:150;display:none;box-shadow:0 8px 24px rgba(0,0,0,.25);max-width:min(520px,calc(100vw - 32px));text-align:center;line-height:1.45}
  .toast.show{display:block;animation:tin .2s ease}
  @keyframes tin{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
  @media(max-width:1100px){.comments-panel{display:none}.settings-grid{grid-template-columns:1fr}}

  /* ================= Audit log (Phase 6) ================= */
  /* The only page with a subtitle under its heading, so .page-head gets
     top-aligned here rather than globally - every other page is a single
     line and would shift if this changed for all of them. */
  .page-head:has(.sub){align-items:flex-start}
  .page-head:has(.sub) .actions{align-self:flex-start}
  .page-head .sub{color:var(--text-2);font-size:13px;margin-top:4px;font-weight:400}
  .scope-note{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-2);background:#fff;border:1px solid var(--border);border-radius:8px;padding:9px 13px;margin:16px 0}
  .scope-note svg{color:var(--brand);flex-shrink:0}
  .filter-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
  .seg{display:flex;border:1px solid var(--border);border-radius:7px;overflow:hidden;background:#fff}
  .seg button{border:none;background:#fff;color:var(--text-2);padding:7px 13px;font-size:12.5px;font-weight:500;border-right:1px solid var(--border)}
  .seg button:last-child{border-right:none}
  .seg button.on{background:var(--brand-soft);color:var(--brand);font-weight:600}
  .fbox{display:flex;align-items:center;gap:7px;border:1px solid var(--border);border-radius:7px;padding:7px 11px;background:#fff;font-size:12.5px;color:var(--text-2)}
  .fbox input[type=date]{border:none;background:none;font-family:inherit;font-size:12.5px;color:var(--text);outline:none;padding:0;width:auto}
  .fsearch{display:flex;align-items:center;gap:7px;border:1px solid var(--border);border-radius:7px;padding:7px 11px;background:#fff;flex:1;min-width:200px;max-width:320px}
  .fsearch input{border:none;outline:none;font-family:inherit;font-size:12.5px;width:100%;padding:0;background:none}
  .clear-filters{font-size:12.5px;color:var(--brand);font-weight:600;background:none;border:none}
  .audit-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden}
  .audit-card table{width:100%;border-collapse:collapse;font-size:13px}
  .audit-card th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-3);font-weight:700;padding:10px 14px;border-bottom:1px solid var(--border);background:#FAFBFC;white-space:nowrap}
  .audit-card td{padding:11px 14px;border-bottom:1px solid var(--border);vertical-align:middle;white-space:nowrap}
  .audit-card tbody tr{cursor:pointer}
  .audit-card tbody tr:hover td{background:#FAFBFC}
  .audit-card tbody tr.expanded td{background:#F7F9FC}
  .audit-card .when{color:var(--text-2);font-size:12.5px}
  .audit-card .when b{color:var(--text);font-weight:600;font-size:13px}
  .stream-badge{font-size:10.5px;font-weight:700;letter-spacing:.3px;border-radius:5px;padding:3px 8px;display:inline-flex;align-items:center;gap:5px}
  .stream-badge.AUTH{background:var(--brand-soft);color:var(--brand)}
  .stream-badge.ASSET_ACCESS{background:#FCF3CE;color:#8A6D00}
  .stream-badge.ADMIN{background:#F0E8FB;color:#6B32B8}
  .event-label{font-weight:500;white-space:normal}
  .outcome{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600}
  .outcome::before{content:"";width:7px;height:7px;border-radius:50%}
  .outcome.SUCCESS{color:var(--success)}
  .outcome.SUCCESS::before{background:var(--success)}
  .outcome.FAILURE{color:var(--danger)}
  .outcome.FAILURE::before{background:var(--danger)}
  .audit-actor{display:flex;align-items:center;gap:8px}
  .audit-actor .av{width:22px;height:22px;border-radius:50%;background:var(--brand);color:#fff;font-size:9.5px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .audit-actor .av.unknown{background:#9CA3AF}
  .actor-name{font-weight:500}
  .actor-name .email-only{color:var(--text-3);font-weight:400;font-style:italic}
  .audit-target .t-type{color:var(--text-3);font-size:11.5px}
  .ipcountry{display:flex;align-items:center;gap:6px;color:var(--text-2);font-size:12.5px}
  .ipcountry .flag{font-size:13px}
  .audit-card tr.expanded .chev{transform:rotate(90deg)}
  .audit-card .chev{color:var(--text-3);transition:transform .15s}
  .detail-row td{white-space:normal;padding:0;background:#F7F9FC}
  .detail-row .inner{padding:14px 18px 18px 44px;border-top:1px dashed var(--border);display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;font-size:12.5px}
  .detail-row .dfield b{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--text-3);margin-bottom:3px;font-weight:700}
  .detail-row .dfield div{color:var(--text)}
  .detail-row pre{background:#fff;border:1px solid var(--border);border-radius:6px;padding:9px 11px;font-size:11.5px;font-family:ui-monospace,Consolas,monospace;overflow-x:auto;color:var(--text-2);white-space:pre-wrap}
  .event-id{font-family:ui-monospace,Consolas,monospace;font-size:11px;color:var(--text-3)}
  .table-foot{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-top:1px solid var(--border);font-size:12.5px;color:var(--text-2)}
  .pager{display:flex;gap:6px}
  .pager button{border:1px solid var(--border);background:#fff;border-radius:6px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;color:var(--text-2)}
  .pager button:hover:not(:disabled){background:#F3F4F6}
  .pager button:disabled{opacity:.4;cursor:default}
  .pager button.on{background:var(--brand-soft);color:var(--brand);border-color:var(--brand-soft);font-weight:600}
  .audit-empty{text-align:center;padding:60px 20px;color:var(--text-2)}
  .audit-empty svg{color:var(--text-3);margin-bottom:12px}
  .audit-empty h4{font-size:15px;color:var(--text);margin-bottom:5px}
  @media(max-width:900px){.audit-card{overflow-x:auto}}