/*
 * r82 — visual design upgrade, round 2: colour, depth and motion on top of
 * r77's tokens (loaded after it, so it refines rather than fights it).
 *
 * Same rule as r77: never touches the 5 frozen Document Studio canvas files
 * (assets/studio.css, assets/document-studio-r52.css, assets/studio.js,
 * assets/document-studio-r52.js, app/r52_document_studio.php) or any
 * .r52-/.document-studio-canvas selector. Document Studio still inherits
 * this layer's shared chrome (admin bar, sidebar, buttons, stat tiles)
 * through the same layout(), same as r77.
 *
 * Contrast is deliberate: the gradient accents below sit in the same
 * mid-to-dark luminance range as the flat colours they replace, so white
 * text on a gradient button/badge/icon stays comfortably readable, and the
 * one place body-sized text ever sits on a gradient (the dashboard
 * greeting heading) uses a solid-colour fallback plus a gradient narrow
 * enough in luminance range to stay legible on both light and dark ground.
 */

:root{
  --r82-grad-1:#4f46e5;   /* indigo */
  --r82-grad-2:#7c3aed;   /* violet */
  --r82-grad-3:#0891b2;   /* cyan */
  --r82-grad-warm-1:#ea580c;
  --r82-grad-warm-2:#db2777;
  --r82-accent-grad:linear-gradient(135deg,var(--r82-grad-1),var(--r82-grad-2) 55%,var(--r82-grad-3));
  --r82-accent-grad-soft:linear-gradient(135deg,color-mix(in srgb,var(--r82-grad-1) 16%,transparent),color-mix(in srgb,var(--r82-grad-3) 16%,transparent));
  --r82-glow:0 10px 30px -10px color-mix(in srgb,var(--r82-grad-2) 55%,transparent);
  --r82-glow-lg:0 18px 46px -14px color-mix(in srgb,var(--r82-grad-2) 60%,transparent);
  --r82-ring:0 0 0 1px color-mix(in srgb,var(--r82-grad-2) 35%,transparent);
  --r82-chart-1:#4f46e5;--r82-chart-2:#0891b2;--r82-chart-3:#db2777;--r82-chart-4:#f59e0b;
  --r82-chart-5:#16a34a;--r82-chart-6:#7c3aed;--r82-chart-7:#0ea5e9;--r82-chart-8:#e11d48;
}
@media (prefers-color-scheme: dark){
  :root:not([data-r77-theme="light"]){
    --r82-grad-1:#818cf8;--r82-grad-2:#c084fc;--r82-grad-3:#22d3ee;
  }
}

/* ---- avatar / initial-circle colour, assigned in JS from a hash of the
   initials so it's stable, not random; always paired with white text so
   contrast never depends on which colour lands ---- */
.admin-screen .avatar,body:not(.admin-screen) .avatar{color:#fff;font-weight:700;background:var(--r82-accent-grad);box-shadow:var(--r82-ring);position:relative;overflow:hidden}
.avatar.r82-av-0{background:linear-gradient(135deg,#4f46e5,#7c3aed)}
.avatar.r82-av-1{background:linear-gradient(135deg,#0891b2,#0ea5e9)}
.avatar.r82-av-2{background:linear-gradient(135deg,#db2777,#f472b6)}
.avatar.r82-av-3{background:linear-gradient(135deg,#ea580c,#f59e0b)}
.avatar.r82-av-4{background:linear-gradient(135deg,#16a34a,#22c55e)}
.avatar.r82-av-5{background:linear-gradient(135deg,#7c3aed,#c084fc)}
.avatar.r82-av-6{background:linear-gradient(135deg,#0d9488,#2dd4bf)}
.avatar.r82-av-7{background:linear-gradient(135deg,#e11d48,#fb7185)}

/* ---- dashboard greeting: the one place text sits on a gradient, kept in
   a narrow, readable luminance band with a solid fallback colour first ---- */
.admin-screen .dash-head h1{color:var(--r77-ink,#151b2c);background:var(--r82-accent-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
@supports not (background-clip:text){.admin-screen .dash-head h1{-webkit-text-fill-color:initial;background:none;color:var(--r77-ink,#151b2c)}}

/* ---- cards: soft dimensional lift + a slim gradient top accent, entrance
   motion on first paint ---- */
.admin-screen .card,body:not(.admin-screen) .card{position:relative}
.admin-screen .card.panel::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;border-radius:var(--r77-radius-lg,16px) var(--r77-radius-lg,16px) 0 0;background:var(--r82-accent-grad);opacity:.85}
.admin-screen .card.panel{overflow:hidden}
.admin-screen .card.panel:hover,body:not(.admin-screen) .card:hover{box-shadow:var(--r82-glow)}
.admin-screen .card,body:not(.admin-screen) .card{animation:r82-rise .45s cubic-bezier(.2,.7,.3,1) both}
.admin-screen .dash-main>*:nth-child(1){animation-delay:.02s}
.admin-screen .dash-main>*:nth-child(2){animation-delay:.06s}
.admin-screen .dash-main>*:nth-child(3){animation-delay:.1s}
.admin-screen .dash-main>*:nth-child(4){animation-delay:.14s}
@keyframes r82-rise{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}

/* ---- stat tiles: colourful gradient icon chip, lift + glow on hover ---- */
.admin-screen .card.stat{display:flex;flex-direction:column;gap:4px}
.admin-screen .card.stat .stat-icon{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;color:#fff;font-weight:800;font-size:15px;background:var(--r82-accent-grad);box-shadow:var(--r82-glow);transform:rotate(-3deg);transition:transform .2s ease}
.admin-screen .card.stat:hover .stat-icon{transform:rotate(0deg) scale(1.06)}
.admin-screen .stat-grid.live-cards>.card.stat:nth-child(8n+1) .stat-icon{background:linear-gradient(135deg,var(--r82-chart-1),var(--r82-chart-6))}
.admin-screen .stat-grid.live-cards>.card.stat:nth-child(8n+2) .stat-icon{background:linear-gradient(135deg,var(--r82-chart-2),var(--r82-chart-7))}
.admin-screen .stat-grid.live-cards>.card.stat:nth-child(8n+3) .stat-icon{background:linear-gradient(135deg,var(--r82-chart-3),#22d3ee)}
.admin-screen .stat-grid.live-cards>.card.stat:nth-child(8n+4) .stat-icon{background:linear-gradient(135deg,var(--r82-chart-4),#fbbf24)}
.admin-screen .stat-grid.live-cards>.card.stat:nth-child(8n+5) .stat-icon{background:linear-gradient(135deg,var(--r82-chart-5),#4ade80)}
.admin-screen .stat-grid.live-cards>.card.stat:nth-child(8n+6) .stat-icon{background:linear-gradient(135deg,var(--r82-chart-6),#c084fc)}
.admin-screen .stat-grid.live-cards>.card.stat:nth-child(8n+7) .stat-icon{background:linear-gradient(135deg,var(--r82-chart-8),#fb7185)}
.admin-screen .stat-grid.live-cards>.card.stat:hover{transform:translateY(-3px);box-shadow:var(--r82-glow)}

/* ---- primary buttons: gradient fill, glow, always white text (checked
   for contrast against every stop in --r82-accent-grad) ---- */
.admin-screen .btn:not(.btn-secondary):not(.btn-danger),body:not(.admin-screen) .btn:not(.btn-secondary):not(.btn-danger){background:var(--r82-accent-grad);color:#fff;border:none}
.admin-screen .btn:not(.btn-secondary):not(.btn-danger):hover{box-shadow:var(--r82-glow)}

/* ---- sidebar active item: soft gradient glow instead of a flat tint ---- */
.admin-screen .sidebar-groups details>a.active{background:var(--r82-accent-grad-soft)}

/* ---- insights / chart panel ---- */
.admin-screen .r82-insights{margin-top:16px}
.admin-screen .r82-chart-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:10px}
.admin-screen .r82-chart-tile{background:var(--r77-surface-2,#f6f8fc);border:1px solid var(--r77-line,#e4e8f0);border-radius:var(--r77-radius-md,12px);padding:14px}
.admin-screen .r82-chart-title{display:block;font-size:12.5px;letter-spacing:.02em;color:var(--r77-muted,#5b6579);margin-bottom:8px}
.admin-screen .r82-canvas{display:block;width:100%;height:160px}
.admin-screen .r82-legend{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 14px}
.admin-screen .r82-legend li{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--r77-ink,#151b2c)}
.admin-screen .r82-legend b{font-variant-numeric:tabular-nums;color:var(--r77-muted,#5b6579);font-weight:600}
.admin-screen .r82-swatch{width:9px;height:9px;border-radius:3px;flex:none}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  .admin-screen .card,body:not(.admin-screen) .card{animation:none}
}

/* ---- Round 3: real typography, and a proper dark sidebar ----
 * Two concrete, traced bugs, not a taste change:
 *
 * 1. 'Inter' was named in assets/app.css's font stack from the very start
 *    of this engagement but never actually loaded from anywhere -- no
 *    @font-face, no Google Fonts link -- so every browser silently fell
 *    back to its own default UI font the whole time. Now loaded for real
 *    from Google Fonts (app/views.php's <head>), and restated explicitly,
 *    unambiguously, for every element below -- this file is always the
 *    last stylesheet layout() loads, so this wins outright.
 *
 *    Separately, assets/fonts.css loads DejaVuSans across html/body/every
 *    form control -- correct and needed for the standalone PDF/print
 *    document templates (app/v6_core.php, app/v61_core.php,
 *    app/r81_smart_documents.php), which build their own <head> and never
 *    load this stylesheet, so they keep using DejaVuSans exactly as
 *    before. But fonts.css loads on the *main* site too (app/views.php's
 *    shared layout(), the one every dashboard and public page renders
 *    through), where it was never meant to apply -- inconsistent,
 *    unpolished text across ordinary buttons and form fields was the
 *    result. The explicit font-family below removes that ambiguity on
 *    every page that reaches this stylesheet.
 *
 * 2. The sidebar's actual live background comes from r77's --r77-surface
 *    token, which is white in light mode. But the sidebar's original text
 *    colours (assets/app.css's .sidebar{color:#d7dfeb}, a pale blue-grey)
 *    were never updated for that -- they were written for the dark navy
 *    background the sidebar had before r77 introduced its shared card/
 *    surface token system. The result: the site name, role label and
 *    active-society line in the sidebar's own profile block were pale
 *    text on a near-white background -- close to unreadable, exactly as
 *    reported. Rather than patch that pairing, the sidebar now gets its
 *    own permanent dark surface -- independent of the site's own light/
 *    dark theme, the same convention most dashboard products use (Notion,
 *    Linear, Vercel) -- with every text state inside it re-checked for
 *    contrast against that dark background specifically. This also
 *    answers the open "the sidebar shouldn't be white" call plainly,
 *    rather than leaving it unresolved.
 */
html,body,input,select,textarea,button{font-family:'Inter',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}

:root{
  --r82-sidebar-bg-1:#141833;
  --r82-sidebar-bg-2:#0d1020;
  --r82-sidebar-line:#262c52;
  --r82-sidebar-ink:#f2f3fb;
  --r82-sidebar-muted:#9aa1c9;
  --r82-sidebar-active-ink:#7dd3fc;
}
.admin-screen .sidebar{background:linear-gradient(180deg,var(--r82-sidebar-bg-1),var(--r82-sidebar-bg-2));border-color:var(--r82-sidebar-line)}
.admin-screen .sidebar .profile b{display:block;color:var(--r82-sidebar-ink);font-size:15px}
.admin-screen .sidebar .profile .small{color:var(--r82-sidebar-muted)}
.admin-screen .sidebar .profile .context-society{color:var(--r82-sidebar-active-ink);font-size:12.5px;font-weight:700;margin-top:2px}
.admin-screen .sidebar-groups details{border-bottom:1px solid var(--r82-sidebar-line)}
.admin-screen .sidebar-groups summary{color:var(--r82-sidebar-muted)}
.admin-screen .sidebar-groups summary:hover{background:rgba(255,255,255,.06);color:var(--r82-sidebar-ink)}
.admin-screen .sidebar-groups details>a{color:var(--r82-sidebar-muted)}
.admin-screen .sidebar-groups details>a:hover{background:rgba(255,255,255,.07);color:var(--r82-sidebar-ink)}
.admin-screen .sidebar-groups details>a.active{color:var(--r82-sidebar-active-ink);background:linear-gradient(90deg,color-mix(in srgb,var(--r82-grad-3) 30%,transparent),transparent)}
.admin-screen .sidebar-groups details>a.active::before{background:var(--r82-sidebar-active-ink)}

/* ===================================================================
 * Round 4 (Sept 2026) -- sidebar navigation: sticky sidebar, originally
 * a floating flyout, now a plain inline accordion. History, honestly,
 * because four rounds of this are recorded here:
 *
 * The very first version of this fix made each group's submenu open as
 * a FLYOUT -- an absolutely-positioned panel floating out to the right
 * of the sidebar -- specifically so that opening one group's links never
 * changed the sidebar's own height in the page flow. Every round after
 * that (2, 3, 4) was spent trying to make that floating panel behave:
 * fixing its z-index so it painted above the top bar and chat bubble,
 * trying an adaptive up/down flip so it didn't run off the bottom of the
 * screen, trying an unconditional "always up" placement. Every one of
 * those was a real fix for a real symptom -- and the reports never
 * stopped, because the actual complaint was never really about which
 * direction it opened: it was that a floating panel, by its very nature,
 * sits ON TOP of whatever page content happens to be underneath it. No
 * amount of z-index or direction tuning removes that -- it's what a
 * flyout IS. Explicitly asked for instead: submenus that are genuinely
 * collapsible in place, not floating over anything, and friendlier on
 * mobile/tablet than a floating popup ever is there.
 *
 * So: no more flyout. A group's links now render as a normal, inline,
 * expanding block directly under its own heading -- exactly the
 * accordion pattern assets/r77.js/r77.css already had fully built
 * (smooth open/close animation, indentation, a rotating chevron) but
 * had never actually been switched on for this sidebar markup, because
 * its own code specifically skipped activating whenever it saw the
 * .sidebar-flyout wrapper markup (assets/r77.js, enhanceSidebarAccordion)
 * -- i.e. the exact markup this sidebar always had. That guard is gone;
 * see assets/r77.js for the JS side of this same change. Opening a
 * group now genuinely can push the groups below it down the page a
 * little -- that's what "collapsible" means -- so the sidebar itself
 * (below) now scrolls internally if the fully-expanded list runs taller
 * than the screen, rather than the old fixed max-height silently
 * clipping or overflowing.
 *
 * Round 10.2 fix: "align-self:start" alone was supposed to be exactly
 * what stops the sidebar's own box from stretching to match the taller
 * main-content column -- that's the whole reason it's here -- but for a
 * role with very few groups (one, for a plain General User) it was
 * still rendering as a tall, mostly-empty dark rectangle running the
 * full height of the page. Reproduced in isolation before touching
 * anything (bisected file-by-file, then property-by-property): with
 * "position:sticky" on the same element, this engine does not actually
 * resolve the item's auto block size down to its content the way
 * align-self:start alone implies -- confirmed by forcing an explicit
 * "height:auto" alongside it and watching the box immediately shrink to
 * its real content height in a controlled test page, both for a single
 * open group and, separately, for a full 14-group list (which still
 * correctly caps at max-height and scrolls internally, unaffected).
 * "height:auto" is redundant with the CSS spec's own initial value --
 * this browser needs it stated explicitly here anyway. */
.admin-screen .sidebar{position:sticky;top:14px;align-self:start;height:auto;max-height:calc(100vh - 28px);overflow-y:auto;overflow-x:visible}
.admin-screen .sidebar-groups .sidebar-flyout{display:contents}

/* ===================================================================
 * Round 9 (Sept 2026) -- mobile/tablet: a real slide-in drawer.
 *
 * Below the existing 900px breakpoint (the same one assets/app.css's old
 * horizontal icon-bar treatment used), the sidebar becomes a proper
 * slide-in drawer instead of that horizontal bar: off-screen by default,
 * opened by a hamburger button in the admin bar (app/views.php,
 * .admin-menu-toggle), sliding in over a dimmed backdrop rather than
 * squeezing into the page's own width. Groups inside the drawer still
 * expand inline via the accordion panel below -- a floating panel makes
 * no sense inside an already-narrow drawer, and this inline version was
 * confirmed working well here. Toggling, the backdrop and closing on
 * navigate/Escape/outside-click are handled in assets/r77.js's
 * enhanceMobileSidebar(). Because the drawer is position:fixed, it is
 * taken out of the .dashboard grid entirely, so app.css's existing
 * .dashboard{grid-template-columns:1fr} single-column stack for main
 * content keeps working under it unchanged.
 *
 * (At 901px and up, opening a group no longer uses this inline panel at
 * all -- see Round 10 below for why, and for what replaced it there.)
 * =================================================================== */

/* -- inline accordion surface, used by the mobile/tablet drawer -- */
.admin-screen .sidebar-groups[data-r77-accordion] details{transition:background-color .18s ease}
.admin-screen .sidebar-groups[data-r77-accordion] details[open]{background:rgba(255,255,255,.045);border-radius:var(--r77-radius-sm,8px)}
.admin-screen .sidebar-groups[data-r77-accordion] details[open]>summary{color:var(--r82-sidebar-ink)}
.admin-screen .sidebar-groups[data-r77-accordion] details[open]>summary::after{color:var(--r82-sidebar-active-ink)}
.admin-screen .sidebar-groups[data-r77-accordion] details>div.r77-panel>div{padding:2px 2px 8px 6px}
.admin-screen .sidebar-groups[data-r77-accordion] details[open]>div.r77-panel>div{animation:r82SidebarPanelIn .22s cubic-bezier(.2,.7,.3,1) both}
@keyframes r82SidebarPanelIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion: reduce){
  .admin-screen .sidebar-groups[data-r77-accordion] details[open]>div.r77-panel>div{animation:none}
}

/* -- the one sidebar toggle, in the admin bar, at every width: opens/
   closes the drawer below 901px, collapses/expands the icon rail (Round
   10, below) at 901px and up -- same control, same place, everywhere,
   per the direct request that it live "like what is in tablets and
   mobile view" rather than a second button buried inside the sidebar
   itself. -- */
.admin-menu-toggle{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex:none;border:0;border-radius:9px;background:rgba(255,255,255,.08);color:#f1f5f9;font-size:17px;line-height:1;cursor:pointer}
.admin-menu-toggle:hover{background:rgba(255,255,255,.16)}

/* -- 2. mobile/tablet slide-in drawer -- */
@media(max-width:900px){
  .admin-screen .sidebar{
    position:fixed;top:0;left:0;bottom:0;z-index:1000;
    width:min(300px,84vw);max-height:none;
    display:flex;flex-direction:column;flex-wrap:nowrap;
    overflow-y:auto;overflow-x:hidden;
    padding:16px 12px calc(16px + env(safe-area-inset-bottom));
    border-radius:0 18px 18px 0;border:0;
    box-shadow:26px 0 60px -18px rgba(6,9,20,.55);
    transform:translateX(-105%);
    transition:transform .26s cubic-bezier(.2,.7,.3,1);
  }
  .admin-screen .sidebar.r82-open{transform:translateX(0)}
  .admin-screen .sidebar .profile{display:block}
  .admin-screen .sidebar a{white-space:normal}
  .r82-sidebar-backdrop{position:fixed;inset:0;z-index:999;background:rgba(6,9,20,.55);opacity:0;pointer-events:none;transition:opacity .2s ease}
  .r82-sidebar-backdrop.open{opacity:1;pointer-events:auto}
  body.r82-sidebar-lock{overflow:hidden}
}
@media (prefers-reduced-motion: reduce){
  .admin-screen .sidebar{transition:none}
  .r82-sidebar-backdrop{transition:none}
}

/* ===================================================================
 * Round 10 (Sept 2026) -- the real, final root cause of "the submenu
 * goes under the dashboard", and the right-hand panel + icon rail that
 * were asked for directly instead of guessed at again.
 *
 * THE ACTUAL BUG, finally traced: every earlier flyout attempt (rounds
 * 1-4) positioned the panel with position:absolute, anchored inside the
 * sidebar's own group. But .admin-screen .sidebar (assets/r77.css) has
 * always had overflow:hidden -- needed so the sidebar's own rounded
 * corners contain its children -- and CSS clips ANY descendant, however
 * it's positioned and however high its z-index, the instant it grows
 * past that box's edge. A flyout growing out to the right of the
 * sidebar does exactly that. No z-index, no up/down flip direction, no
 * amount of tuning in rounds 1-4 could ever have fixed this, because
 * the problem was never the panel's z-index -- it was that it was being
 * clipped before z-index ever mattered.
 *
 * The fix: the floating panel (assets/r77.js, enhanceSidebarGroups) is
 * never a DOM descendant of the sidebar while it's open. Opening a
 * group MOVES its existing link list (not a copy) into one shared host
 * appended straight to <body>, positioned with position:fixed computed
 * from the clicked heading's own on-screen position, and given a
 * z-index of 100050 -- above every other z-index anywhere in this app
 * (checked: the highest anywhere else is 100000, a Document Studio
 * context menu). Nothing can clip it and nothing can render above it.
 * It opens growing down by default and flips to grow up when there
 * isn't room below (measured fresh every time, the same adaptive logic
 * an earlier round built and then lost when the flyout was removed
 * entirely) closes the instant another group opens, the page is
 * clicked outside it, or Escape is pressed, and is moved back to its
 * normal place in the sidebar the instant it closes.
 *
 * Alongside that: a collapse toggle for the desktop/tablet sidebar
 * (assets/r77.js, enhanceSidebarCollapse) that shrinks it to a slim
 * icon-only rail -- one small line icon per group, since the server
 * only ever rendered plain text headings, so the icons are added here
 * rather than reworking the frozen-adjacent nav markup. Remembered per
 * browser. Collapsed or expanded, opening a group always uses the same
 * floating panel above.
 * =================================================================== */

/* -- the floating panel host: covers the viewport but only the panel
   itself is ever actually clickable, so it never blocks the page -- */
.r82-flyout-host{position:fixed;inset:0;z-index:100050;pointer-events:none}
.r82-flyout-host .r77-panel.r82-floating{
  pointer-events:auto;display:block;
  background:linear-gradient(180deg,var(--r82-sidebar-bg-1),var(--r82-sidebar-bg-2));
  border:1px solid var(--r82-sidebar-line);
  border-radius:var(--r77-radius-md,12px);
  box-shadow:0 26px 60px -18px rgba(6,9,20,.55),0 2px 0 rgba(255,255,255,.04) inset;
  padding:6px;max-height:calc(100vh - 24px);overflow-y:auto;
  opacity:0;transform:translateY(-6px) scale(.98);
  transition:opacity .16s ease,transform .16s ease;
}
.r82-flyout-host .r77-panel.r82-floating.open{opacity:1;transform:translateY(0) scale(1)}
.r82-flyout-host .r77-panel.r82-floating>div{overflow:visible}
.r82-flyout-host .r77-panel.r82-floating .sidebar-flyout{display:block}
.r82-flyout-host .r77-panel.r82-floating a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;color:var(--r82-sidebar-muted);font-size:13.5px;white-space:nowrap}
.r82-flyout-host .r77-panel.r82-floating a:hover{background:rgba(255,255,255,.08);color:var(--r82-sidebar-ink)}
.r82-flyout-host .r77-panel.r82-floating a.active{background:linear-gradient(90deg,color-mix(in srgb,var(--r82-grad-3) 30%,transparent),transparent);color:var(--r82-sidebar-active-ink);font-weight:600}
/* Round 10.2: each submenu link gets its own small marker, the same
   "dot" language this codebase already uses for badges/status pills
   (assets/r77.css's .badge::before), so a short list -- one group, a
   handful of links, e.g. a plain General User's "My Account" -- reads
   as a deliberately laid-out menu instead of bare, unweighted text next
   to a heading that has a real icon. */
.r82-flyout-host .r77-panel.r82-floating a::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.5}
.r82-flyout-host .r77-panel.r82-floating a:hover::before,
.r82-flyout-host .r77-panel.r82-floating a.active::before{opacity:1}
@media (prefers-reduced-motion: reduce){
  .r82-flyout-host .r77-panel.r82-floating{transition:none}
}

/* -- Round 10.2 fix: the "shaking" / "white line for a millisecond" click
 * glitch, reported on every single sidebar click.
 *
 * Root cause, confirmed with a controlled test page rather than guessed:
 * a native <details> reveals its content (the UA stylesheet stops hiding
 * "details:not([open]) > *") the instant the "open" attribute is set --
 * which happens on click, before this file's own JS ever runs, because
 * the "toggle" event <details> fires is queued as a separate task, not
 * delivered synchronously with the click. So for one rendered frame, the
 * still-in-place .r77-panel (with r77.css's own grid-template-rows
 * height transition and the accordion's background/border styling) can
 * become visible and start animating open INSIDE the sidebar, at its
 * normal location -- then, a moment later, this file's floatPanel()
 * whisks it out to the fixed-position host above. That one flashed
 * frame -- a panel opening in place, immediately replaced by the same
 * panel appearing elsewhere -- is exactly the reported shake/flash: a
 * genuine race between the browser's own native reveal and this file's
 * JS relocation, not a caching issue and not the transition's timing
 * value.
 *
 * At 901px and up, the in-place panel should never be seen at all --
 * every open group's content only ever belongs in .r82-flyout-host. So
 * it's hidden here unconditionally, regardless of [open] state, closing
 * the race outright rather than trying to win it: there is no frame left
 * where it CAN flash, because it's never visible in place at this width
 * to begin with. (This selector only ever matches the panel while it's
 * still a child of <details> -- floatPanel() moves it out to
 * .r82-flyout-host, a different location this rule doesn't reach, so the
 * actual floating copy is untouched.) */
@media(min-width:901px){
  .admin-screen .sidebar-groups:not(.r77-single-group) details>.r77-panel{display:none!important}
}

/* -- Round 10.3: a sidebar with only one group (assets/r77.js,
 * enhanceSidebarGroups -- marks the container ".r77-single-group") never
 * uses the floating popup above at all: its one heading stays permanently
 * open and its links render directly underneath it, inline, in the
 * sidebar itself -- reported plainly that hiding a short menu behind a
 * click for a role like a plain General User looked bad. Reuses the
 * inline accordion surface Round 9 already built for the mobile drawer
 * (r77.css's grid-template-rows height animation, this file's
 * [data-r77-accordion] open-state background) rather than inventing a
 * second inline style -- the desktop exemption from the rule just above
 * is what lets that existing mechanism actually show at this width. The
 * heading itself no longer looks clickable here since there's nothing
 * left for a click on it to do (assets/r77.js also stops the browser's
 * own click-to-close before it happens). Collapsing the icon rail still
 * switches this one group back to a click-to-open popup, same as any
 * other group would be, since there's no room to show link text in a
 * 64px rail -- expanding the rail again puts it straight back to inline. */
/* Desktop/tablet only -- at mobile width the one group stays exactly the
   same toggleable inline accordion item every other mobile group is
   (assets/r77.js's singleGroupInline() is false below 901px on purpose),
   since the mobile drawer was confirmed working well and isn't part of
   this change. */
@media(min-width:901px){
  /* Deliberately no ".admin-screen" link in this chain -- it's a class on
     this exact same <body> as ".r82-sidebar-collapsed", not a separate
     descendant, so a rule written as one would never match (the precise
     mistake the Round 10.1 note above already explains once, and .dashboard/
     .sidebar/.sidebar-groups only ever render inside an admin-screen page
     to begin with, so no real scoping is lost by leaving it out). */
  body:not(.r82-sidebar-collapsed) .sidebar-groups.r77-single-group summary{cursor:default}
  body:not(.r82-sidebar-collapsed) .sidebar-groups.r77-single-group summary::after{display:none}
  body:not(.r82-sidebar-collapsed) .sidebar-groups.r77-single-group summary:hover{background:none;color:var(--r82-sidebar-muted)}
  body:not(.r82-sidebar-collapsed) .sidebar-groups.r77-single-group details[open]>summary .r82-nav-icon{color:var(--r82-sidebar-muted)}
  body.r82-sidebar-collapsed .sidebar-groups.r77-single-group details>.r77-panel{display:none!important}
}

/* -- group heading icon + label -- */
.admin-screen .sidebar-groups summary{gap:8px}
.r82-nav-heading{display:flex;align-items:center;gap:9px;min-width:0}
.r82-nav-icon{flex:none;display:inline-flex;color:var(--r82-sidebar-muted)}
.admin-screen .sidebar-groups details[open]>summary .r82-nav-icon,
.admin-screen .sidebar-groups summary:hover .r82-nav-icon{color:var(--r82-sidebar-active-ink)}
.r82-nav-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* -- desktop/tablet collapse: icon-only rail --
 *
 * Round 10.1 fix: the very first build of this rail genuinely never
 * applied at all, on any screen -- every one of these rules was written
 * as "body.r82-sidebar-collapsed .admin-screen .dashboard{...}", which
 * in real CSS asks for a *separate descendant element* carrying the
 * class .admin-screen underneath body.r82-sidebar-collapsed. There is
 * no such element -- .admin-screen is a class on that exact same <body>,
 * not on some child of it -- so the selector could never match, on any
 * browser, ever. That's exactly why collapsing only ever hid the text
 * labels (a different, correctly-written selector) while the sidebar's
 * own column stayed full width with the icons stranded on the left of
 * it, with the profile text and every group's chevron still showing
 * too -- all four of those were driven by copies of the same broken
 * selector. Confirmed by reproducing the exact selector in an isolated
 * page and reading its computed style before writing this fix, not by
 * assumption. Fixed simply, by dropping the impossible ".admin-screen"
 * link from the chain below -- .dashboard/.sidebar/.sidebar-groups only
 * ever render inside an admin-screen page in the first place, so no
 * scoping is lost.
 * =================================================================== */
@media(min-width:901px){
  body.r82-sidebar-collapsed .dashboard{grid-template-columns:64px minmax(0,1fr)}
  body.r82-sidebar-collapsed .sidebar{padding:14px 6px}
  body.r82-sidebar-collapsed .sidebar .profile{padding:4px 0 10px;text-align:center}
  body.r82-sidebar-collapsed .sidebar .profile b,
  body.r82-sidebar-collapsed .sidebar .profile .small,
  body.r82-sidebar-collapsed .sidebar .profile .context-society{display:none}
  body.r82-sidebar-collapsed .sidebar-groups summary{justify-content:center;padding:11px 4px}
  body.r82-sidebar-collapsed .sidebar-groups summary::after{display:none}
  body.r82-sidebar-collapsed .r82-nav-heading{gap:0}
  body.r82-sidebar-collapsed .r82-nav-label{display:none;width:0}
}

/* ===================================================================
 * Round 5 (Sept 2026) -- public society directory: map view ("drone
 * view"). Adds a 4th view-switcher option (assets/app.js) alongside the
 * existing Grid/Compact/List on the public /societies page. Only
 * status="verified" societies with a saved location ever appear here --
 * same rule as the written map brief delivered earlier this engagement,
 * and the same gate Society Verification exists to enforce. Satellite
 * imagery (Esri World Imagery, free, no key) is the default tile layer
 * for the "drone/ground view" look the owner asked for, with a plain
 * street-map layer one click away; clicking a pin opens a slide-in
 * panel on the right rather than navigating away, exactly as described.
 * =================================================================== */
.directory-cards[hidden],.directory-map-view[hidden],[data-pagination][hidden]{display:none!important}
.directory-map-view{display:flex;flex-direction:column;gap:10px}
.directory-map-filters{display:flex;flex-wrap:wrap;gap:10px}
.directory-map-filters input,.directory-map-filters select{min-width:160px}
.directory-map-count{color:var(--muted,#64748b);font-size:13px}
.directory-map-shell{position:relative;flex:1;min-height:440px;border-radius:16px;overflow:hidden;border:1px solid var(--line,#e5eaf1);box-shadow:0 18px 50px -22px #0f172a40}
.directory-map-shell #societies-map{position:absolute;inset:0;background:#0b1220;font-family:inherit}
.directory-map-panel{position:absolute;top:14px;right:14px;bottom:14px;width:min(300px,calc(100% - 28px));background:#fff;border-radius:14px;box-shadow:0 26px 70px -18px #0f172a55;overflow:hidden auto;transform:translateX(calc(100% + 24px));transition:transform .22s ease;z-index:1000;display:flex;flex-direction:column}
.directory-map-panel.open{transform:none}
.directory-map-panel img{width:100%;height:140px;object-fit:cover;display:block}
.directory-map-panel .dmp-body{padding:14px 16px 16px}
.directory-map-panel h3{margin:0 0 6px;font-size:16px}
.directory-map-panel .dmp-place{color:var(--muted,#64748b);font-size:13px;margin:0 0 10px}
.directory-map-panel .dmp-stats{display:flex;gap:14px;margin:0 0 12px;font-size:12.5px;color:#475569}
.directory-map-panel .dmp-close{position:absolute;top:8px;right:8px;width:30px;height:30px;border:0;border-radius:9px;background:#0f172ab3;color:#fff;font-size:16px;line-height:1;cursor:pointer;z-index:2}
.directory-map-pin{background:linear-gradient(135deg,#2563eb,#0891b2);width:30px;height:30px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);border:2px solid #fff;box-shadow:0 4px 14px #0f172a55;display:grid;place-items:center}
.directory-map-pin span{transform:rotate(45deg);color:#fff;font-weight:800;font-size:12px}
@media(max-width:760px){.directory-map-panel{left:14px;right:14px;width:auto;bottom:auto;max-height:60vh}.directory-map-shell{min-height:360px}}

/* ===================================================================
 * Round 6 (Sept 2026) -- "more UI, more real": a photo-forward pass on
 * the public directory and landing pages -- Find Society (incl. its
 * map), Buy or Rent, the Service Marketplace, Blog, and the public
 * Forms library -- pushed closer to a real-estate/venue-listing feel:
 * bigger, taller photos; the status/rating badge floated over the photo
 * itself instead of only printed below it; deeper, layered shadows and
 * a real hover lift instead of a flat card edge; a richer page header on
 * every one of these pages; and, on the Service Marketplace specifically,
 * a real provider photo next to each listing (query change: one added
 * LEFT JOIN on the already-existing user_profiles table, in
 * app/karishma_views.php) so a service reads as a real person's work,
 * not an anonymous row.
 *
 * Purely visual, plus that one small, additive query change -- no card's
 * link, filter, price, badge text, search behaviour or underlying data
 * changed. Two new, additive class names were added alongside existing
 * ones to reach the public Forms page and the Marketplace provider row
 * without touching any shared class Document Studio's own template
 * picker also uses (public-form-card / public-form-paper in
 * app/v701_views.php; k-avatar / k-provider-text in
 * app/karishma_views.php) -- none of the 5 frozen Document Studio canvas
 * files are touched by this round.
 * =================================================================== */

/* -- Photo-forward cards: Find Society, Buy/Rent, Blog -- */
.card-3d{position:relative;border-radius:18px;box-shadow:0 1px 0 #ffffffb0 inset,0 18px 40px -22px rgba(15,23,42,.32)}
.card-3d:hover{box-shadow:0 1px 0 #ffffffb0 inset,0 30px 60px -24px rgba(15,23,42,.38)}
.card-media{position:relative;aspect-ratio:4/3}
[data-view-container=list] .card-media{aspect-ratio:auto}
.card-media:before{content:"";position:absolute;inset:0 0 auto 0;height:46%;background:linear-gradient(180deg,rgba(9,14,26,.5),transparent);pointer-events:none;z-index:1}
[data-view-container=list] .card-media:before{display:none}
.society-card .card-meta,.property-card .card-meta{position:absolute;top:12px;left:14px;right:14px;z-index:2;margin:0}
[data-view-container=list] .society-card .card-meta,[data-view-container=list] .property-card .card-meta{position:static;margin:0 0 13px}
.society-card .card-meta .rating,.property-card .card-meta .rating{background:#fff;padding:4px 10px 4px 8px;border-radius:99px;box-shadow:0 8px 18px rgba(9,14,26,.3)}
.society-card .card-meta .badge,.property-card .card-meta .badge{box-shadow:0 8px 18px rgba(9,14,26,.28)}
.society-card h3,.property-card h3{font-size:19px;letter-spacing:-.01em}
.professional-card .card-media{aspect-ratio:1/1;border-radius:0}

/* -- A richer directory/landing header, same treatment across every one
 * of these pages: a dot-grid texture under a soft brand-colour glow
 * (the same device .k-hero already uses on the Service Marketplace,
 * carried over here for one consistent "real product" first impression
 * instead of a plain white banner). -- */
.page-head.directory-head,.k-hero .container{position:relative}
.page-head.directory-head{overflow:hidden;padding:64px 0 40px;background:radial-gradient(circle at 88% 8%,rgba(37,99,235,.16),transparent 34%),radial-gradient(circle at 8% 105%,rgba(15,118,110,.14),transparent 34%),linear-gradient(180deg,#fff,#f6f9fd)}
.page-head.directory-head:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(15,23,42,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(15,23,42,.035) 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(to bottom,#000,transparent 85%);pointer-events:none}
.page-head.directory-head .container{position:relative}
.page-head.directory-head h1{font-size:clamp(32px,4.6vw,48px)}

/* -- Service Marketplace: a real provider photo per card -- */
.k-provider{flex-direction:row;align-items:center;gap:12px}
.k-avatar{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:none;border:2px solid #fff;box-shadow:0 4px 14px rgba(15,42,67,.22)}
.k-provider-text{display:flex;flex-direction:column;min-width:0}
.k-service-card{border-radius:18px;box-shadow:0 1px 0 #ffffffb0 inset,0 16px 36px -20px rgba(15,42,67,.22);transition:transform .18s ease,box-shadow .18s ease}
.k-service-card:hover{transform:translateY(-4px);box-shadow:0 1px 0 #ffffffb0 inset,0 26px 52px -20px rgba(15,42,67,.28)}

/* -- Public Forms library: give the little document preview a real,
 * tactile paper look -- a folded top-right corner and a soft layered
 * shadow -- instead of a flat coloured rectangle. Scoped to the two
 * additive classes above, so Document Studio's own "Use template"
 * picker (same underlying .v6-template-card/.v6-paper-mini class names,
 * defined in the frozen assets/document-studio-r52.css) is completely
 * unaffected. -- */
.public-form-card{border-radius:16px;transition:transform .18s ease,box-shadow .18s ease}
.public-form-card:hover{transform:translateY(-4px)}
.public-form-paper{position:relative;overflow:hidden;box-shadow:0 1px 0 #fff inset,0 16px 30px -16px rgba(15,23,42,.35),0 3px 8px rgba(15,23,42,.12)}
.public-form-paper:after{content:"";position:absolute;top:0;right:0;width:0;height:0;border-style:solid;border-width:0 22px 22px 0;border-color:transparent rgba(15,23,42,.12) transparent transparent}

@media(max-width:760px){.card-media{aspect-ratio:16/9}.page-head.directory-head{padding:44px 0 28px}}

/* ===================================================================
 * Round 7 (Sept 2026) -- the homepage itself, called out by name as
 * "very old fashioned" against the directory pages Round 6 just
 * modernized. It had genuinely been skipped -- Round 6 only reached
 * Find Society, Buy/Rent, the Service Marketplace, Blog and the public
 * Forms library, not app/views.php's render_home(). The homepage has no
 * per-record photo to show (it isn't a listing of anything -- it's the
 * front door), so instead of forcing in a fake photo, it gets the same
 * depth, colour and motion language the rest of the site now has: a
 * soft dot-grid + brand-glow hero (same device as the directory
 * headers) with a low-opacity abstract skyline silhouette along the
 * bottom -- purely decorative, no claim to be any real building or
 * place -- a "live" pulse dot and colour-coded icon chips on the
 * platform-overview numbers so it reads as a real running dashboard
 * rather than a static stat block, and the six feature cards below get
 * real depth, a gradient icon badge and a hover lift instead of a flat
 * bordered box with a plain glyph. No markup, copy, link or data
 * changed -- render_home() itself is untouched; every selector here
 * targets classes it already renders.
 * =================================================================== */
.hero{position:relative;overflow:hidden;background:radial-gradient(circle at 88% 4%,rgba(37,99,235,.16),transparent 36%),radial-gradient(circle at 4% 100%,rgba(15,118,110,.14),transparent 34%),linear-gradient(180deg,#fff,#f6faf9)}
.hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(15,23,42,.032) 1px,transparent 1px),linear-gradient(90deg,rgba(15,23,42,.032) 1px,transparent 1px);background-size:32px 32px;mask-image:radial-gradient(circle at 26% 22%,#000,transparent 68%);pointer-events:none}
.hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:96px;background-repeat:repeat-x;background-size:480px 96px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 96' preserveAspectRatio='none'%3E%3Crect x='0' y='6' width='30' height='90' fill='%230f766e' opacity='0.1'/%3E%3Crect x='36' y='62' width='21' height='34' fill='%230891b2' opacity='0.08'/%3E%3Crect x='63' y='63' width='38' height='33' fill='%230891b2' opacity='0.09'/%3E%3Crect x='107' y='39' width='22' height='57' fill='%232563eb' opacity='0.07'/%3E%3Crect x='135' y='31' width='22' height='65' fill='%232563eb' opacity='0.07'/%3E%3Crect x='163' y='59' width='38' height='37' fill='%230f766e' opacity='0.11'/%3E%3Crect x='207' y='6' width='38' height='90' fill='%230f766e' opacity='0.11'/%3E%3Crect x='251' y='63' width='32' height='33' fill='%230f766e' opacity='0.07'/%3E%3Crect x='289' y='48' width='24' height='48' fill='%232563eb' opacity='0.08'/%3E%3Crect x='319' y='30' width='23' height='66' fill='%232563eb' opacity='0.11'/%3E%3Crect x='348' y='60' width='25' height='36' fill='%230891b2' opacity='0.11'/%3E%3Crect x='379' y='43' width='26' height='53' fill='%230f766e' opacity='0.11'/%3E%3Crect x='411' y='30' width='22' height='66' fill='%230f766e' opacity='0.11'/%3E%3Crect x='439' y='23' width='35' height='73' fill='%230891b2' opacity='0.1'/%3E%3C/svg%3E");pointer-events:none}
.hero .container{position:relative}
.hero-card{position:relative;border-radius:20px;transform:none;box-shadow:0 1px 0 #fff inset,0 30px 60px -26px rgba(15,23,42,.32)}
.hero-card h3{display:flex;align-items:center;gap:9px;font-size:15px}
.hero-card h3:before{content:"";width:8px;height:8px;flex:none;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px #22c55e26;animation:r82HeroPulse 2s ease-in-out infinite}
@keyframes r82HeroPulse{0%,100%{opacity:1}50%{opacity:.35}}
.metric{position:relative;padding:16px 14px 14px 44px}
.metric:before{content:"";position:absolute;left:12px;top:14px;width:22px;height:22px;border-radius:7px;background:linear-gradient(135deg,var(--brand,#0f766e),#22d3ee)}
.metric:nth-child(2):before{background:linear-gradient(135deg,var(--brand2,#2563eb),#0891b2)}
.metric:nth-child(3):before{background:linear-gradient(135deg,#7c3aed,var(--brand2,#2563eb))}
.metric:nth-child(4):before{background:linear-gradient(135deg,#d97706,#f59e0b)}
.feature{position:relative;border-radius:18px;box-shadow:0 1px 0 #fff inset,0 16px 34px -22px rgba(15,23,42,.24);transition:transform .18s ease,box-shadow .18s ease}
.feature:hover{transform:translateY(-4px);box-shadow:0 1px 0 #fff inset,0 26px 52px -22px rgba(15,23,42,.3)}
.feature-icon{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:13px;background:linear-gradient(135deg,var(--brand,#0f766e),#22d3ee);color:#fff;font-size:20px;font-weight:800;box-shadow:0 10px 24px rgba(15,42,67,.26)}
.grid-3 .feature:nth-child(3n+2) .feature-icon{background:linear-gradient(135deg,var(--brand2,#2563eb),#0891b2)}
.grid-3 .feature:nth-child(3n+3) .feature-icon{background:linear-gradient(135deg,#7c3aed,var(--brand2,#2563eb))}
@media(max-width:760px){.hero:after{height:64px;background-size:320px 64px}}

/* ===================================================================
 * Round 8 (Sept 2026) -- "3D scrolling frontend" pass across the three
 * surfaces picked from the options offered: dashboard data tables (the
 * dashboard's stat tiles, cards and buttons already got this treatment in
 * an earlier round -- tables were the one dashboard surface still flat);
 * the individual society and property profile pages people land on after
 * clicking a directory card; and the sign-in / registration screens.
 *
 * One real, pre-existing bug found and fixed along the way: the society
 * profile page's own hero photo (.profile-hero / .profile-overlay,
 * app/views.php's render_society()) had layout CSS for it sitting only in
 * assets/v42.css -- a file nothing in the application actually links from
 * any page (checked: no <link> to it anywhere). That rule was never
 * reaching the browser, so the hero photo has been rendering with no
 * sizing or overlay at all -- a plain, oversized inline image with no
 * gradient, no caption placement. (This is also the file an earlier round
 * of this same engagement incorrectly blamed, alongside the real cause,
 * for the sidebar submenu bug -- see the guide's sidebar correction notes.
 * It stays unlinked and untouched here too; only the two rules the hero
 * actually needs are restated below, modernized to this round's depth
 * language rather than copied as they were.)
 * =================================================================== */

/* ---- dashboard data tables: the one dashboard surface that hadn't had
   this pass yet -- depth on the wrapper, a readable hover row, numbers
   that line up ---- */
.admin-screen .table-wrap{box-shadow:0 1px 0 #fff inset,0 14px 30px -20px rgba(15,23,42,.28);background:#fff}
.admin-screen .table-wrap table td{font-variant-numeric:tabular-nums}
.admin-screen .table-wrap table tbody tr{transition:background-color .12s ease}
.admin-screen .table-wrap table tbody tr:hover{background:var(--r77-surface-2,#f6f8fc)}
.admin-screen .table-wrap table th{box-shadow:0 1px 0 var(--r77-line,#e4e8f0)}

/* ---- society profile page: the hero photo, revived with real sizing and
   a proper gradient scrim (see note above), then the same depth language
   as the directory cards that link here ---- */
.profile-hero{position:relative;height:min(460px,54vh);overflow:hidden;background:#0f172a;border-radius:0 0 22px 22px}
.profile-hero>img{width:100%;height:100%;object-fit:cover;opacity:.7}
.profile-overlay{position:absolute;inset:0;display:flex;align-items:flex-end;padding:0 0 44px;background:linear-gradient(180deg,transparent 30%,rgba(6,12,26,.55) 68%,rgba(6,12,26,.88));color:#fff}
.profile-overlay .lead{color:#dbe4f0}
.profile-overlay .card-meta .badge,.profile-overlay .rating{background:rgba(255,255,255,.14);color:#fff;backdrop-filter:blur(6px)}
@media(max-width:760px){.profile-hero{height:340px;border-radius:0 0 16px 16px}}

/* ---- society & property page content cards: same lifted-panel language
   the dashboard already carries, extended to the public-facing versions
   of the same card ---- */
.content-wrap .card.panel{position:relative;overflow:hidden;box-shadow:0 1px 0 #fff inset,0 16px 34px -24px rgba(15,23,42,.28);transition:box-shadow .18s ease}
.content-wrap .card.panel::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--r82-accent-grad);opacity:.8}
.content-wrap .card.panel:hover{box-shadow:0 1px 0 #fff inset,0 24px 46px -22px rgba(15,23,42,.34)}
.content-wrap .price{font-size:30px;display:inline-flex;align-items:baseline;gap:6px}
.content-wrap .three-col p{background:var(--r77-surface-2,#f6f8fc);border-radius:12px;padding:10px 12px;margin:0}
.content-wrap .three-col{gap:10px}
.content-wrap .notice-item.notice-paper-preview{border-radius:14px;box-shadow:0 1px 0 #fff inset,0 10px 24px -18px rgba(15,23,42,.3);transition:transform .16s ease,box-shadow .16s ease}
.content-wrap .notice-item.notice-paper-preview:hover{transform:translateY(-2px);box-shadow:0 1px 0 #fff inset,0 18px 34px -18px rgba(15,23,42,.32)}

/* ---- sign-in / registration: the same soft dot-grid-and-glow ground the
   hero and directory headers use, a lifted card instead of a flat one ---- */
.auth-shell{position:relative;overflow:hidden;background:radial-gradient(circle at 85% 8%,rgba(37,99,235,.13),transparent 34%),radial-gradient(circle at 6% 100%,rgba(15,118,110,.12),transparent 34%),linear-gradient(180deg,#fff,#f6f9fd)}
.auth-shell:before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,#0f172a14 1px,transparent 1px);background-size:26px 26px;-webkit-mask-image:radial-gradient(ellipse 60% 55% at 50% 40%,#000,transparent 72%);mask-image:radial-gradient(ellipse 60% 55% at 50% 40%,#000,transparent 72%);pointer-events:none}
.auth-card{position:relative;border-radius:22px;box-shadow:0 1px 0 #fff inset,0 30px 60px -28px rgba(15,23,42,.34)}
.auth-intro{position:relative}
.auth-intro:before{content:"";position:absolute;left:-28px;top:6px;bottom:6px;width:3px;border-radius:3px;background:var(--r82-accent-grad)}
@media(max-width:760px){.auth-intro:before{display:none}}

/* ===================================================================
 * Round 10.3 -- the dashboard's own gradient page-header band, called
 * out by name: "the society verification... blueish border... looking
 * not good." Checked every dashboard stylesheet before writing a single
 * line here, the same way as every other fix this round: ".r85-hero" --
 * the class Society Verification, AI Assistant Settings, AI Drafting
 * Help and Demo Data all use for this same banner -- has never actually
 * had a CSS rule anywhere. Each of those four pages only ever sets its
 * own inline gradient `background`; every other property (padding,
 * rounded corners, text colour) was left to whatever the bare <section>,
 * <h2> and <p> tags default to, which is no padding at all and this
 * file's own dark ink colour for text -- so on every one of those four
 * pages, the heading and paragraph render as dark, low-contrast text
 * sitting flush against the very edges of a saturated gradient, with no
 * inset. That's the "blueish border" and the "very complicated" look:
 * not a colour choice gone wrong, a missing rule.
 *
 * Fixed once, here, for the shared class rather than patching each
 * page's markup separately -- real padding and rounded corners to match
 * every other surface in this app, and white text (the same convention
 * already used everywhere else text sits on one of these gradients --
 * avatars, stat-icon chips, the hero section) instead of dark ink, which
 * was never legible against a mid-saturation gradient to begin with. */
.r85-hero{padding:26px 28px;border-radius:var(--r77-radius-lg,16px);color:#fff;box-shadow:0 20px 46px -22px rgba(15,23,42,.4)}
.r85-hero h2{color:#fff;margin:0 0 8px;font-size:24px;letter-spacing:-.01em}
.r85-hero p{color:rgba(255,255,255,.92);margin:0;max-width:760px;font-size:14.5px;line-height:1.6}
@media(max-width:760px){.r85-hero{padding:20px}}