/* Canonical UI components. Pages may position components; their appearance belongs here. */
[hidden] { display:none !important; }
    /* Buttons: primary by default. .btn gives a link or label the same look. */
    button, .btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:var(--field-height); padding:0 15px; border:0; border-radius:var(--r-pill);
      background:var(--accent); color:var(--accent-ink); font-weight:600; font-size:var(--fs-sm); font-family:inherit; cursor:pointer; text-decoration:none; white-space:nowrap;
      transition:filter .12s,background .12s,border-color .12s,transform .06s; }
    button:hover, .btn:hover { filter:brightness(1.06); } button:disabled { opacity:.5; cursor:default; }
    button:active:not(:disabled) { transform:translateY(1px); }
    button.ghost, .btn.ghost { background:var(--panel2); color:var(--text); border:1px solid var(--border); }
    button.danger, .btn.danger { background:var(--red-dim); color:var(--red); }
    button.sm, .btn.sm { height:28px; padding:0 10px; font-size:var(--fs-xs); }
    /* Icon button: × / close / unlink / ⋮ — square, no fill, muted → text on hover */
    button.icon, .btn.icon { width:28px; height:28px; padding:0; background:none; border:0; border-radius:var(--r-sm); color:var(--muted); flex:none; }
    button.icon:hover, .btn.icon:hover { color:var(--text); background:var(--hover); filter:none; }
    .icon .msi { font-size:18px; }
    .icon.msi { display:inline-flex; align-items:center; justify-content:center; font-size:18px; }
    .btn.icon.home-notifications { position:relative; width:44px; height:44px; }
    .home-notifications .msi { font-size:var(--fs-2xl); }
    .home-notifications .navbadge { position:absolute; top:0; right:0; margin:0; pointer-events:none; }
    /* Text-shaped controls that are <button>s but not buttons: opt out of the fixed height */
    .subtab, .app-item, .cardmenu-item, .kbaddnew, .dr-p, .generated-script-card, .comp-watch, .cal-day, .kbtick,
    .relbtn, .lc-pill, .pa-family, .pa-metric, .comp-chip, .mssmall, .lc-leg { height:auto; display:inline-block; justify-content:flex-start; white-space:normal; }
    /* Consistent keyboard focus ring across all interactive controls */
    button:focus-visible, .btn:focus-visible, .pill:focus-visible, .seg-b:focus-visible, .navi:focus-visible,
    input:focus-visible, select:focus-visible, textarea:focus-visible,
    .relbtn:focus-visible, .cardmenu-btn:focus-visible {
      outline:2px solid var(--green); outline-offset:2px; }

    /* Inputs: single-line = pill 36px; textarea = --r-md, min 160px. */
    input, select, textarea { height:var(--field-height); padding:0 12px; border-radius:var(--r-pill); border:1px solid var(--border); background:var(--field); color:var(--text); font-size:var(--fs-base); font-family:inherit; box-sizing:border-box; }   /* inherit beats the UA default — date inputs otherwise render monospace-ish digits */
    textarea { height:auto; min-height:160px; padding:10px 12px; border-radius:var(--r-md); line-height:1.5; resize:vertical; }
    textarea[rows] { min-height:0; }   /* a rows= hint means the author wants it short */
    input::placeholder, textarea::placeholder { color:var(--dim); }
    input[type=checkbox], input[type=radio], input[type=file], input[type=range], input[type=color] { height:auto; padding:0; border:0; border-radius:0; background:none; }
    input[type=search] { -webkit-appearance:none; appearance:none; }
    select { -webkit-appearance:none; -moz-appearance:none; appearance:none; padding-right:34px; cursor:pointer;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a0a0a0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
      background-repeat:no-repeat; background-position:right 12px center; }
    input:focus:not(:focus-visible), select:focus:not(:focus-visible), textarea:focus:not(:focus-visible) { outline:none; border-color:var(--border2); }
    /* Search: icon inside on the left. Sits in a toolbar row, so it is control-height (32px). */
    .search { position:relative; display:inline-flex; align-items:center; width:360px; max-width:100%; }
    .search .msi { position:absolute; left:12px; font-size:18px; color:var(--muted); pointer-events:none; }
    .search input { width:100%; height:var(--control-height); padding-left:38px; font-size:var(--fs-sm); }
    .search input::-webkit-search-cancel-button { -webkit-appearance:none; }
    /* Optional clear button inside the search box (shown only while it has text). */
    .search .search-clear { position:absolute; right:6px; display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; padding:0; border:0; border-radius:var(--r-pill); background:transparent; color:var(--muted); cursor:pointer; }
    .search .search-clear:hover { background:var(--panel2, rgba(255,255,255,.06)); color:var(--text); }
    .search .search-clear .msi { position:static; font-size:16px; pointer-events:none; }
    .search .search-clear[hidden] { display:none; }
    .search:has(.search-clear:not([hidden])) input { padding-right:34px; }
    @media (max-width:780px) { .search { width:100%; } }
    /* Right-aligned action cluster (page heads, modal footers) */
    .row-r { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }

    /* Status pill: one class, coloured text on its dim background, never a border. */
    .st { display:inline-block; font-size:var(--fs-2xs); font-weight:600; line-height:1.5; padding:2px 8px; border-radius:var(--r-pill); white-space:nowrap; vertical-align:middle; }
    .st-live, .st-win { background:var(--green-dim); color:var(--green); }
    .st-maybe { background:var(--amber-dim); color:var(--amber); }
    .partial-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--amber); margin-left:4px; vertical-align:middle; }
    .st-paused { background:var(--panel2); color:var(--muted); }   /* paused is a resting state, not a warning */
    .st-lose { background:var(--red-dim); color:var(--red); }
    .st-idle { background:var(--panel2); color:var(--muted); }
    .st-off { background:var(--panel2); color:var(--dim); }
    .st-info { background:color-mix(in srgb,var(--blue) 16%,transparent); color:var(--blue); }
    .st + .st { margin-left:4px; }
    /* Eyebrow: section / column / modal-section labels */
    .eyebrow { font-size:var(--fs-2xs); font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
    .eyebrow .sub, .eyebrow .nchip, .eyebrow .lrn-cnt { text-transform:none; letter-spacing:0; font-weight:500; }
    label.f { display:flex; flex-direction:column; gap:5px; font-size:var(--fs-xs); color:var(--muted); }
    .row { display:flex; gap:10px; flex-wrap:wrap; align-items:end; }
    .toolbar { display:flex; gap:12px; flex-wrap:wrap; align-items:end; margin-bottom:16px; }
    .loadmore { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:24px; }
    .lm-count { color:var(--dim); font-size:var(--fs-xs); }
    .chart-range { align-self:center; height:var(--control-height); padding:0 30px 0 11px; font-size:var(--fs-sm); background-position:right 10px center; }
    .big-l { font-size:var(--fs-sm); color:var(--muted); font-weight:400; }
    .err { color:var(--red); min-height:18px; margin:6px 0 14px; }

    .pill { display:inline-flex; align-items:center; gap:7px; height:var(--control-height); padding:0 12px; border-radius:var(--r-pill); border:1px solid var(--border); background-color:var(--panel); color:var(--text); font-size:var(--fs-sm); font-weight:500; font-family:inherit; cursor:pointer; white-space:nowrap; transition:background .12s,border-color .12s; }
    .pill:hover { border-color:var(--border2); }
    select.pill { padding-right:30px; }
    .pill .msi { font-size:15px; }
    .seg { display:inline-flex; align-items:center; height:var(--control-height); background:var(--bg); border:1px solid var(--border); border-radius:var(--r-pill); padding:2px; }
    .seg-b { height:26px; background:none; border:0; padding:0 12px; font-size:var(--fs-sm); font-weight:600; color:var(--muted); cursor:pointer; border-radius:var(--r-pill); transition:background .12s,color .12s; }
    .seg-b.on { background:var(--panel2); color:var(--text); }
    .head, .ui-skeleton-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; }
    .head h1 { font-size:var(--fs-2xl); font-weight:650; letter-spacing:-.025em; line-height:1.25; margin:0; }
    .head > div, .ui-skeleton-head > div { min-width:0; }
    .head .desc { color:var(--muted); margin:3px 0 0; }
    .fchip, .creator-platform-filter { display:inline-flex; align-items:center; gap:7px; height:var(--control-height); padding:0 12px; border-radius:var(--r-pill);
      background:var(--panel2); color:var(--muted); border:1px solid var(--border); font-size:var(--fs-xs); font-weight:500; font-family:inherit; cursor:pointer; white-space:nowrap; }
    .fchip:hover { color:var(--text); filter:none; }
    .fchip.on { color:var(--text); border-color:var(--border2); }
    .fchip:not(.on) { opacity:1; background:transparent; color:var(--muted); }
    .fchip:not(.on) .lc-sw { opacity:.35; }
    .tablewrap { overflow-x:auto; border:1px solid var(--border); border-radius:var(--r-lg); }
    .ctable, .direction-table, .follower-history-table { width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
    .ctable th, .direction-table th, .follower-history-table th { text-align:left; font-weight:600; color:var(--muted); font-size:var(--fs-xs); padding:11px 14px; border-bottom:1px solid var(--border); background:var(--panel); white-space:nowrap; }
    .ctable td, .direction-table td, .follower-history-table td { padding:var(--table-cell-y) var(--table-cell-x); border-bottom:1px solid var(--border); white-space:nowrap; }
    .ctable td:first-child { max-width:360px; overflow:hidden; text-overflow:ellipsis; }
    .ctable th.num, .ctable td.num { text-align:right; font-variant-numeric:tabular-nums; }
    .ctable tbody tr[data-open-creator], .ctable tbody tr[data-lrn], .ctable tbody tr[data-test] { cursor:pointer; }
    .ctable tbody tr:hover { background:var(--hover); }
    .ctable tbody tr:last-child td { border-bottom:0; }

/* Page composition: one header and one left-aligned control row. */
.head, .ui-skeleton-head { flex-wrap:wrap; row-gap:var(--sp-4); }
.head .desc { font-size:var(--fs-sm); line-height:1.6; max-width:78ch; }
.head .eyebrow { margin-bottom:var(--sp-2); color:var(--muted); }
.head > .row-r, .ui-skeleton-head > .row-r { margin-left:auto; }
.row-r { gap:var(--control-gap); }
.ui-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:var(--control-gap); margin:0 0 var(--sp-4); min-width:0; }
.ui-toolbar > select, .ui-toolbar > button:not(.icon), .fchips.bar > select { height:var(--control-height); font-size:var(--fs-sm); }
.ui-toolbar .search { flex:0 1 360px; }
.ui-toolbar .seg { flex:none; }
.ui-toolbar .search input { min-width:0; }
.pill, .fchip, .seg { flex-shrink:0; }
.pill:hover, select:hover { border-color:var(--border2); }
.fchip.on, .fchip[aria-pressed="true"], .creator-platform-filter[aria-pressed="true"] { background:var(--active); border-color:var(--border2); color:var(--text); opacity:1; }
.seg-b[aria-pressed="true"] { background:var(--panel2); color:var(--text); }
.seg-b:hover { color:var(--text); }
.seg-b:focus-visible { outline-offset:0; }
.ui-tabs, .subtabs { display:flex; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:thin; gap:var(--sp-6); border-bottom:1px solid var(--border); margin:0 0 var(--sp-5); }
.ui-tab, .subtab { display:inline-flex; flex-shrink:0; align-items:center; gap:var(--sp-2); background:none; border:0; border-bottom:2px solid transparent; border-radius:0; height:40px; padding:0 0 var(--sp-3); margin-bottom:-1px; font-size:var(--fs-sm); font-weight:600; color:var(--muted); }
.ui-tab[aria-pressed="true"], .ui-tab.on, .subtab.on { border-bottom-color:var(--text); color:var(--text); }
.ui-tab:hover { color:var(--text); background:none; }
.ui-count { display:inline-flex; align-items:center; justify-content:center; min-width:20px; padding:1px 6px; border-radius:var(--r-pill); font-size:var(--fs-2xs); font-variant-numeric:tabular-nums; color:var(--muted); background:var(--panel2); }
/* Icon-only platform controls are an explicit variant, not a UGC override. */
.ui-platform-group { display:inline-flex; flex-wrap:wrap; gap:var(--sp-1); margin:0; }
.ui-platform-group .fchip { width:var(--control-height); height:var(--control-height); padding:0; justify-content:center; gap:0; border-radius:var(--r-pill); }
.ui-platform-group .platform-logo { width:16px; height:16px; }
.ui-platform-group .fchip:not(.on) { opacity:1; background:transparent; color:var(--muted); }
/* A sync operation keeps its dimensions and icon while running. */
.ui-sync { min-width:88px; }
.ui-sync[aria-busy="true"] .msi { animation:ui-spin 1s linear infinite; }
.gads-synced, .ctsync { font-size:var(--fs-xs); color:var(--muted); }
@keyframes ui-spin { to { transform:rotate(360deg); } }
/* Neutral is a valid state; colour is reserved for information, success and failure. */
.st:not([class*="st-"]) { background:var(--panel2); color:var(--muted); }
.st.cr-approved { color:var(--green); background:var(--green-dim); }
.st.cr-rejected { color:var(--red); background:var(--red-dim); }
.st.cr-rewrite { color:var(--amber); background:var(--amber-dim); }
/* Readable tables, predictable scrolling, and consistent numeric alignment. */
.tablewrap { min-width:0; max-width:100%; scrollbar-width:thin; scrollbar-color:var(--border2) transparent; }
.ctable, .direction-table, .follower-history-table { line-height:1.5; }
.ctable th, .direction-table th, .follower-history-table th { height:40px; font-size:var(--fs-xs); }
.ctable td, .direction-table td, .follower-history-table td { vertical-align:middle; }
.ctable th.num, .ctable td.num { font-feature-settings:"tnum"; }
.ctable td.empty { white-space:normal; text-align:center; padding:var(--sp-8); }
.ctable th button { font:inherit; color:inherit; }
.ctable tbody tr:hover { transition:background var(--motion-fast); }
/* Native dialogs and application dialogs share field and action metrics. */
.cb-dialog :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea) { width:100%; }
.cb-dialog textarea { min-height:120px; }
.cb-dialog-head button { display:inline-flex; justify-content:center; align-items:center; width:28px; height:28px; padding:0; background:none; color:var(--muted); border-radius:var(--r-sm); }
.cb-dialog-head button:hover { background:var(--hover); color:var(--text); }
.cr-actions { gap:var(--control-gap); }
button:focus-visible, a:focus-visible, summary:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
@media (max-width:780px) {
  .head, .ui-skeleton-head { align-items:flex-start; flex-direction:column; }
  .head > .row-r, .ui-skeleton-head > .row-r { margin-left:0; justify-content:flex-start; width:100%; }
  .head h1 { font-size:var(--fs-xl); }
  .ui-toolbar .search { flex:1 1 100%; width:100%; }
  .ui-toolbar > select { min-width:0; max-width:100%; }
  .ui-tabs, .subtabs { gap:var(--sp-4); }
}
@media (prefers-reduced-motion:reduce) {
  .ui-sync .msi, button, .ctable tbody tr { animation:none !important; transition:none !important; }
}
.head .row-r > .gads-synced { order:1; }
.head .row-r > .ui-sync { order:2; }
.head .row-r > .dr-wrap { order:3; }
.ui-menu { padding:var(--sp-2); border:1px solid var(--border2); border-radius:var(--r-md); background:var(--panel); box-shadow:var(--shadow); }
.ui-menu-item { display:flex; align-items:center; min-height:32px; height:auto; padding:var(--sp-2) var(--sp-3); border:1px solid transparent; border-radius:var(--r-sm); background:transparent; color:var(--muted); font-size:var(--fs-sm); font-weight:500; text-align:left; }
.ui-menu-item:hover, .ui-menu-item.on, .ui-menu-item.selected { background:var(--hover); color:var(--text); }
@media (max-width:780px) {
  .head .gads-synced { white-space:normal; }
}

.err:empty { display:none; }

input, select, textarea { min-width:0; }

.modal .field input, .modal .field select, .modal .field textarea { font-size:var(--fs-base); width:100%; }

/* Shared surfaces, typography and dialogs. */
    .loading { display:grid; place-items:center; min-height:min(40vh,320px); padding:var(--sp-8); color:var(--muted); }
    .empty { color:var(--dim); padding:48px 0; text-align:center; }
    .section-head .desc { color:var(--muted); margin:3px 0 0; font-size:var(--fs-sm); }
    .section-head h2 { font-size:var(--fs-lg); margin:0; }
    .section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:12px; }
    .chart-card .h .sub { color:var(--muted); font-size:var(--fs-xs); font-weight:400; }
    .chart-card .t { color:var(--text); font-size:var(--fs-base); font-weight:600; }
    .chart-card .big { font-size:var(--fs-3xl); font-weight:700; }
    .chart-card .h { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
    .chart-card { margin-bottom:16px; }
    .chart-card { background:var(--panel); border:1px solid var(--border); border-radius:var(--r-xl); padding:var(--card-pad); margin-bottom:var(--card-gap); }
    /* Modal */
    .modal-bg { position:fixed; inset:0; background:rgba(0,0,0,.62); display:flex; align-items:center; justify-content:center; padding:20px; z-index:50;
      animation:modalBgIn .22s ease-out both; }
    .modal { background:var(--panel); border:1px solid var(--border); border-radius:var(--r-xl); padding:20px 22px; width:480px; max-width:100%; max-height:86vh; overflow:auto;
      animation:modalPop .3s cubic-bezier(.2,.8,.28,1) both; transform-origin:center; }
    /* iOS-style dialog: backdrop fades, dialog zooms into place on present; both fade on dismiss (.closing added by JS before removal) */
    @keyframes modalBgIn { from { opacity:0; } to { opacity:1; } }
    @keyframes modalPop { from { opacity:0; transform:scale(1.05); filter:blur(16px); } to { opacity:1; transform:scale(1); filter:blur(0); } }
    .modal-bg.closing { animation:modalBgOut .19s ease-in both; }
    .modal-bg.closing .modal { animation:modalPopOut .19s ease-in both; }
    @keyframes modalBgOut { from { opacity:1; } to { opacity:0; } }
    @keyframes modalPopOut { from { opacity:1; transform:scale(1); filter:blur(0); } to { opacity:0; transform:scale(1.05); filter:blur(16px); } }
    @media (prefers-reduced-motion: reduce) {
      .modal-bg, .modal, .modal-bg.closing, .modal-bg.closing .modal { animation-duration:.01ms; }
    }
    /* Subtle modal scrollbar: thin transparent-track thumb instead of the default gutter */
    .modal { scrollbar-width:thin; scrollbar-color:var(--border2) transparent; }
    .modal::-webkit-scrollbar { width:8px; }
    .modal::-webkit-scrollbar-track { background:transparent; }
    .modal::-webkit-scrollbar-thumb { background:var(--border2); border-radius:99px; border:2px solid transparent; background-clip:padding-box; }
    .modal::-webkit-scrollbar-thumb:hover { background:var(--dim); background-clip:padding-box; }
    .modal h3 { margin:0 0 18px; font-size:18px; }
    .modal > .icon { float:right; margin:-4px -6px 0 0; }
    .modal .field { display:flex; flex-direction:column; gap:5px; margin-bottom:13px; font-size:var(--fs-xs); color:var(--muted); position:relative; }

    .modal .lrn-combo { margin:12px 0 6px; }
    .modal .ms-head { font-size:var(--fs-xs); color:var(--muted); margin:14px 0 8px; }
    .modal .ms-row { display:flex; align-items:center; gap:12px; margin-bottom:8px; }
    .modal .ms-row .th { color:var(--text); font-size:var(--fs-sm); flex:1; }
    .modal .ms-row input { width:130px; }
    .modal .actions { display:flex; gap:var(--sp-2); justify-content:flex-end; flex-wrap:wrap; margin-top:var(--sp-5); }
    .modal .actions > .danger:first-child { margin-right:auto; }   /* a leading destructive action sits on the far left */
    /* Tall dialogs (UGC Reachout): keep the action row pinned while the body scrolls.
       Negative offsets bleed it over the modal's 24px padding so nothing shows beneath. */
    .modal .actions.sticky { position:sticky; bottom:-20px; margin:20px -22px -20px; padding:14px 22px;
      background:var(--panel); border-top:1px solid var(--border); border-radius:0 0 var(--r-xl) var(--r-xl); }

    .tag { display:inline-block; font-size:var(--fs-2xs); font-weight:600; line-height:1.5; padding:2px 8px; border-radius:var(--r-pill); text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; vertical-align:middle; }
    .tag.ugc { background:#1a2e3b; color:#5bc0eb; } .tag.inorganic { background:#2e1a3b; color:#c084fc; }
    .tag.organic { background:var(--green-dim); color:var(--text); }
    .tag.channel { background:#3b1d1d; color:#f87171; }
    .tag.ad { background:#16233f; color:#8ab4f8; white-space:nowrap; }   /* channel video running (or ran) as a Google Ad */
    .tag.influencer { background:#2e1a3b; color:#c084fc; } .tag.none { background:#2a2a2a; color:var(--muted); }
    .tag.creator-status.active { background:var(--green-dim); color:var(--text); }
    .tag.creator-status.inactive { background:var(--red-dim); color:var(--red); }
    .tag.rel-relevant { background:var(--green-dim); color:var(--text); }
    .tag.rel-not_relevant { background:var(--red-dim); color:var(--red); }
    .tag.pending { background:#3a2a0a; color:#fbbf24; }
    .tag.plat { font-size:10px; padding:1px 6px; letter-spacing:.06em; }
    .tag.plat-instagram { background:#3b1a33; color:#f472b6; }
    .tag.plat-youtube { background:#3b1d1d; color:#f87171; }
    .tag.plat-facebook { background:#16233f; color:#8ab4f8; }
    .tag.selected { background:var(--green-dim); color:var(--text); }
    .tag.candidate { background:var(--panel2); color:var(--muted); }
    .tag.killed { background:var(--red-dim); color:var(--red); }
    .tag.draft { background:var(--panel2); color:var(--muted); }
    .tag.approved { background:var(--green-dim); color:var(--text); }
    body.light .tag.ugc { background:#e0f2fe; color:#0369a1; }
    body.light .tag.inorganic, body.light .tag.influencer { background:#f3e8ff; color:#7e22ce; }
    body.light .tag.organic { background:#dcfce7; color:var(--text); }
    body.light .tag.channel { background:#fee2e2; color:#b91c1c; }
    body.light .tag.ad { background:#e8f0fe; color:#1a73e8; }
    body.light .tag.none { background:#eef0f3; color:#5f6b7a; }

/* Loading follows the destination's geometry; the shell and navigation stay usable. */
.ui-loading.loading { display:block; place-items:normal; min-height:0; padding:0; }
.ui-skeleton, body[data-ui-scope="active"] .ui-media-loading { background:linear-gradient(100deg,var(--panel2) 25%,var(--active) 45%,var(--panel2) 65%); background-size:240% 100%; animation:ui-shimmer 1.8s ease-in-out infinite; border-radius:var(--r-sm); }
.ui-loading { pointer-events:none; }
.ui-skeleton { display:block; flex:none; max-width:100%; }
@keyframes ui-shimmer { from { background-position:110% 0; } to { background-position:-110% 0; } }
/* Placeholders borrow the page's own layout classes; these are only the blocks inside them. */
.ui-skeleton-pill, .ui-skeleton-round { border-radius:var(--r-pill); }
.ui-skeleton-avatar { border-radius:var(--r-pill); }
.ui-skeleton-fill { position:absolute; inset:0; width:auto !important; height:auto !important; max-width:none; border-radius:inherit; }
.ui-skeleton-text { display:flex; align-items:center; min-width:0; max-width:100%; }
.ui-skeleton-text > .ui-skeleton { width:100%; }
.ui-skeleton-para { display:block; min-width:0; font:9px/1 ui-monospace,Menlo,monospace; color:transparent; overflow-wrap:anywhere; user-select:none; }
.ui-skeleton-para > .ui-skeleton::before { content:attr(data-fill); }
.ui-skeleton-para > .ui-skeleton { display:inline; border-radius:4px; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.ui-skeleton-stack { display:grid; grid-template-columns:minmax(0,1fr); justify-items:start; align-content:start; min-width:0; }
.ui-skeleton-grow { flex:1; }
.ui-skeleton-who { display:flex; align-items:center; gap:var(--sp-2); min-width:0; }
.ui-skeleton-line { display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2); min-width:0; }
.ui-skeleton-search { width:360px; height:var(--control-height); flex:0 1 360px; }
.ui-skeleton-end { margin-left:auto; justify-self:end; }
.ui-skeleton-center { margin:0 auto; }
.ui-skeleton-break { flex-basis:100%; min-width:0; }
.ui-skeleton-card { min-width:0; padding:var(--sp-4); border:1px solid var(--border); border-radius:var(--r-xl); background:var(--panel); box-sizing:border-box; }
.ui-skeleton-task { min-width:0; padding:14px 16px 10px; border-radius:var(--r-lg); background:var(--pr-card,var(--panel)); }
.ui-skeleton-tile { min-width:0; min-height:76px; padding:6px; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--inset); box-sizing:border-box; }
.ui-skeleton-media { position:relative; aspect-ratio:9/16; border-radius:10px; overflow:hidden; }
.ui-skeleton-flow { display:flex; flex-direction:column; }
.ui-skeleton-grid3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-4); }
@media(max-width:1200px) { .ui-skeleton-grid3 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:650px) { .ui-skeleton-grid3 { grid-template-columns:1fr; } }
.ui-skeleton-table { overflow:hidden; min-width:0; max-width:100%; }
.ui-skeleton-framed { border:1px solid var(--border); border-radius:var(--table-radius); }
.ui-skeleton-row { display:grid; align-items:center; gap:var(--sp-5); min-height:41px; padding:0 var(--table-cell-x); border-bottom:1px solid var(--border); box-sizing:border-box; }
.ui-skeleton-row:last-child { border-bottom:0; }
.ui-skeleton-timeline { display:grid; gap:var(--sp-4); padding:0 var(--sp-3) var(--sp-4); background:var(--panel); }

/* One range picker for Ads, Purchase, Testing and UGC; date meanings stay with callers. */
.ui-date-picker { position:fixed; z-index:100; width:760px; max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px); overflow:auto; border:1px solid var(--border2); border-radius:var(--r-lg); background:var(--panel); box-shadow:var(--shadow); color:var(--text); }
.ui-date-body { display:grid; grid-template-columns:152px minmax(0,1fr); }
.ui-date-presets { display:flex; flex-direction:column; padding:var(--sp-3); gap:2px; border-right:1px solid var(--border); }
.ui-date-presets .ui-menu-item { width:100%; justify-content:flex-start; }
.ui-date-calendars { min-width:0; padding:var(--sp-4); }
.ui-date-nav { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); margin-bottom:var(--sp-3); font-size:var(--fs-sm); font-weight:600; }
.ui-date-months { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-5); }
.ui-date-month { min-width:0; }
.ui-date-month h3 { margin:0 0 var(--sp-3); text-align:center; font-size:var(--fs-sm); font-weight:600; }
.ui-date-weekdays, .ui-date-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); text-align:center; }
.ui-date-weekdays { font-size:var(--fs-xs); color:var(--muted); margin-bottom:var(--sp-2); }
.ui-date-weekdays span { padding:var(--sp-2) 0; }
.ui-date-day, .ui-date-spacer { height:36px; min-width:0; }
.ui-date-day { position:relative; padding:0; border-radius:0; background:transparent; color:var(--text); font-size:var(--fs-sm); font-weight:500; }
.ui-date-day:hover:not(:disabled) { background:var(--hover); filter:none; border-radius:var(--r-sm); }
.ui-date-day.today { text-decoration:underline; text-underline-offset:5px; }
.ui-date-day.in-range { background:var(--green-dim); }
.ui-date-day.selected { background:var(--green); color:var(--bg); border-radius:var(--r-sm); font-weight:700; }
body.light .ui-date-day.selected { color:white; }
.ui-date-day:disabled { opacity:.28; cursor:default; }
.ui-date-day:focus-visible { z-index:1; outline-offset:-2px; }
.ui-date-footer { border-top:1px solid var(--border); padding:var(--sp-4); display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap; }
.ui-date-summary { font-size:var(--fs-xs); color:var(--muted); line-height:1.5; }
.ui-date-summary small { display:block; font-size:var(--fs-2xs); margin-top:var(--sp-1); max-width:36ch; }
.ui-date-actions { display:flex; gap:var(--sp-2); margin-left:auto; }
.ui-date-actions [aria-pressed=true] { border-color:var(--green); }
@media(max-width:780px) {
  .ui-skeleton-search { width:100%; flex:1 1 100%; }
  .ui-skeleton-title { height:25px !important; }
}
@media(max-width:600px) {
  .ui-date-body { grid-template-columns:1fr; }
  .ui-date-presets { flex-direction:row; flex-wrap:wrap; border-right:0; border-bottom:1px solid var(--border); gap:2px; }
  .ui-date-presets .ui-menu-item { width:auto; min-height:28px; padding:4px 8px; font-size:var(--fs-xs); }
  .ui-date-months { grid-template-columns:1fr; }
  .ui-date-month:nth-child(2) { display:none; }
  .ui-date-calendars { padding:var(--sp-3); }
  .ui-date-footer { padding:var(--sp-3); gap:var(--sp-2); }
  .ui-date-summary { width:100%; }
}
@media(max-width:700px) { .cb-toolbar > .ui-skeleton-pill:not(.ui-skeleton-search) { flex:1 1 135px; min-width:0; } }
@media(prefers-reduced-motion:reduce) { .ui-skeleton, body[data-ui-scope="active"] .ui-media-loading { animation:none; background:var(--panel2); } }

.ui-date-trigger { max-width:100%; }
.ui-date-trigger > span:not(.msi) { overflow:hidden; text-overflow:ellipsis; }

/* Shared thumbnail search, originally Purchase linking. */
    .lrn-combo { position:relative; flex:1; min-width:0; }
    .lrn-combo input { width:100%; box-sizing:border-box; }
    .lrn-combo-list { position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:30; max-height:312px; overflow-y:auto;
      background:var(--panel); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:0 10px 30px rgba(0,0,0,.35); }
    .lrn-combo-opt { display:flex; align-items:center; gap:9px; padding:5px 11px; font-size:13px; color:var(--text); cursor:pointer; white-space:nowrap; overflow:hidden; }
    .lrn-combo-thumb { width:26px; height:36px; object-fit:cover; border-radius:3px; background:var(--panel2); flex:none; display:inline-block; }
    .lrn-combo-lbl { overflow:hidden; text-overflow:ellipsis; }
    .lrn-combo-opt:hover, .lrn-combo-opt.on { background:var(--hover); }
    .lrn-combo-none { padding:9px 11px; font-size:12px; color:var(--muted); }

    .ui-combo-title { display:block; overflow:hidden; text-overflow:ellipsis; }
    .ui-combo-detail { display:flex; align-items:center; gap:8px; margin-top:4px; color:var(--muted); font-size:12px; white-space:normal; }
    .ui-combo-contained .lrn-combo-list { position:static; margin-top:12px; max-height:min(400px,46dvh); border:0; border-radius:0; box-shadow:none; background:transparent; scrollbar-width:thin; scrollbar-color:var(--border2) transparent; }
    .ui-combo-field { position:relative; }
    .ui-combo-field > .msi { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none; }
    .ui-combo-field input { padding-left:36px; }
    .modal.ui-content-picker { width:720px; }
    .ui-content-picker .actions { border-top:1px solid var(--border); padding-top:16px; }
    .ui-combo-help { margin:12px 0 0; font-size:12px; }
    .lrn-combo-opt.ui-combo-rich { gap:12px; padding:12px 8px; border-radius:var(--r-sm); align-items:flex-start; white-space:normal; }
    .ui-combo-rich + .ui-combo-rich { border-top:1px solid var(--border); }
    .ui-combo-rich .lrn-combo-thumb { display:flex; align-items:center; justify-content:center; width:48px; height:64px; border-radius:var(--r-sm); color:var(--muted); }
    .ui-combo-rich .lrn-combo-lbl { flex:1; min-width:0; }
    .ui-combo-rich .ui-combo-title { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; font-size:14px; font-weight:500; line-height:1.45; }
    .ui-combo-byline { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:8px; color:var(--muted); font-size:12px; line-height:20px; }
    .ui-combo-person { display:flex; align-items:center; gap:6px; min-width:0; }
    .ui-combo-avatar { position:relative; display:grid; place-items:center; flex:none; width:20px; height:20px; border-radius:50%; overflow:hidden; background:var(--panel2); font-size:10px; }
    .ui-combo-avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
    .ui-combo-creator { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .ui-combo-meta { flex:none; white-space:nowrap; font-size:11px; }
    @media(max-width:480px) {
      .ui-combo-byline { flex-wrap:wrap; gap:2px 8px; }
      .ui-combo-person { max-width:100%; }
      .ui-combo-meta { margin-left:26px; }
    }
    .lrn-combo-list[hidden] { display:none; }