/* ───────────────────────────────────────────────────────────────────────────
   New design ("My Hub").

   Section 2 is the My Hub mockup's own stylesheet, carried over rule for rule (only its demo
   control strip is left out): every class gets an `nd-` prefix, every custom property an `--nd-`
   prefix, and every selector is scoped under `.nd-app` (the <body> class), so nothing here can reach
   the classic design or a page that is not wearing the new shell. Section 1 is the mockup's colour
   tokens, light and dark. Section 3 places the mockup's shell (220px menu, 24px gap, 16px gutters,
   24px/48px vertical padding, 58px bar) around the page container the app already has. Section 4 is
   what the real app needs that a static mockup does not draw: menus, photos in place of initials,
   form states, the mobile drawer.

   Loaded only when Wo_DashDesignIsNew() — see functions_dash_design.php.
   ─────────────────────────────────────────────────────────────────────────── */

/* 1 · tokens */
body.nd-app {
    --nd-primary: var(--site-primary-color, #ed5600);
    --nd-secondary: color-mix(in srgb, var(--nd-primary) 72%, #ffffff);
    --nd-bg: #f4f6fb; --nd-surface: #ffffff; --nd-surface-2: #f7f9fc; --nd-line: rgba(15,23,42,.08);
    --nd-ink: #0f172a; --nd-muted: #64748b; --nd-faint: rgba(15,23,42,.035); --nd-chip: #f1f5f9; --nd-chip-ink: #475569;
    --nd-good: #16a34a; --nd-good-soft: #dcfce7; --nd-teal: #0f766e;
    --nd-shadow: 0 1px 2px rgba(15,23,42,.04), 0 6px 20px rgba(15,23,42,.06);
    --nd-shadow-lift: 0 2px 6px rgba(15,23,42,.06), 0 18px 40px rgba(15,23,42,.12);
    --nd-bar: #ffffff; --nd-tool: #0f172a; --nd-tool-ink: #e2e8f0;
    --nd-font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
    background: var(--nd-bg) !important; color: var(--nd-ink); font-family: var(--nd-font); font-size: 14px; line-height: 1.5;
}
body.nd-app.nd-dark {
    --nd-bg: #0f1115; --nd-surface: #16181d; --nd-surface-2: #1c1f26; --nd-line: rgba(255,255,255,.08);
    --nd-ink: #f3f5f8; --nd-muted: #9aa4b2; --nd-faint: rgba(255,255,255,.045); --nd-chip: #232731; --nd-chip-ink: #c3cad5;
    --nd-good: #4ade80; --nd-good-soft: #14321f; --nd-teal: #5eead4;
    --nd-shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35); --nd-shadow-lift: 0 2px 4px rgba(0,0,0,.45), 0 18px 40px rgba(0,0,0,.5);
    --nd-bar: #16181d; --nd-tool: #000000; color-scheme: dark;
}
.nd-app .nd-topbar, .nd-app .nd-topbar *, .nd-app .nd-side, .nd-app .nd-side *, .nd-app .nd-hdash, .nd-app .nd-hdash * { box-sizing: border-box; }
.nd-app .nd-topbar button, .nd-app .nd-hdash button, .nd-app .nd-side button { font-family: inherit; cursor: pointer; line-height: normal; }   /* the browser default the mockup relies on; Bootstrap would make it inherit */
.nd-app .nd-topbar a, .nd-app .nd-side a, .nd-app .nd-hdash a { text-decoration: none; }
.nd-app .nd-topbar :focus-visible, .nd-app .nd-side :focus-visible, .nd-app .nd-hdash :focus-visible { outline: 2px solid var(--nd-primary); outline-offset: 2px; }
.nd-app .nd-hdash h2, .nd-app .nd-hdash h3, .nd-app .nd-hdash p, .nd-app .nd-hdash ul { font-family: inherit; }
.nd-app .nd-hdash h2, .nd-app .nd-hdash h3 { line-height: 1.5; }

/* 2 · the mockup's own rules */
.nd-app .nd-topbar{background:var(--nd-bar);border-bottom:1px solid var(--nd-line);height:58px;display:flex;align-items:center;gap:16px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.nd-app .nd-logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:17px;letter-spacing:-.01em}
.nd-app .nd-logo i{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--nd-secondary),var(--nd-primary));display:grid;place-items:center;color:#fff;font-style:normal;font-size:15px}
.nd-app .nd-search{flex:1;max-width:380px;background:var(--nd-surface-2);border:1px solid var(--nd-line);border-radius:10px;padding:8px 12px;color:var(--nd-muted);font-size:13px}
.nd-app .nd-topicons{margin-left:auto;display:flex;gap:14px;align-items:center}
.nd-app .nd-ic-btn{position:relative;width:34px;height:34px;border-radius:50%;background:var(--nd-surface-2);display:grid;place-items:center;border:0;color:var(--nd-muted)}
.nd-app .nd-ic-btn .nd-dot{position:absolute;top:2px;right:2px;min-width:16px;height:16px;border-radius:8px;background:var(--nd-primary);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;padding:0 4px}
.nd-app .nd-me{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#334155,#64748b);color:#fff;display:grid;place-items:center;font-weight:600;font-size:13px}
.nd-app .nd-shell{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;padding-block:24px 48px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));max-width:1440px;margin:0 auto}
.nd-app .nd-side{display:flex;flex-direction:column;gap:2px;position:sticky;top:16px;align-self:start}
.nd-app .nd-side a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;color:var(--nd-chip-ink);text-decoration:none;font-size:13.5px;font-weight:500}
.nd-app .nd-side a.nd-on{background:color-mix(in srgb,var(--nd-primary) 12%,transparent);color:var(--nd-primary);font-weight:600}
.nd-app .nd-side a svg{width:18px;height:18px;flex:none}
.nd-app .nd-side .nd-sep{height:1px;background:var(--nd-line);margin:10px 4px}
.nd-app .nd-side .nd-lock{margin-left:auto;font-size:10px;font-weight:700;background:var(--nd-chip);color:var(--nd-muted);border-radius:6px;padding:1px 6px}
@media (max-width:900px){
.nd-app .nd-shell{grid-template-columns:1fr}
.nd-app .nd-side{display:none}
.nd-app .nd-search{display:none}
}
.nd-app .nd-hdash{display:flex;flex-direction:column;gap:28px;min-width:0}
.nd-app .nd-card{background:var(--nd-surface);border:1px solid var(--nd-line);border-radius:18px;box-shadow:var(--nd-shadow)}
.nd-app .nd-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:26px 28px;position:relative;overflow:hidden;background:linear-gradient(135deg,var(--nd-surface) 0%,var(--nd-surface-2) 100%)}
.nd-app .nd-hero::after{content:'';position:absolute;top:-60%;right:-10%;width:320px;height:320px;background:radial-gradient(circle,var(--nd-primary),transparent 68%);opacity:.1;pointer-events:none}
.nd-app .nd-hero-l{display:flex;align-items:center;gap:16px;position:relative;z-index:1;min-width:0}
.nd-app .nd-avatar{width:58px;height:58px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:700;font-size:20px;color:#fff;background:linear-gradient(135deg,#475569,#1e293b);box-shadow:0 0 0 3px var(--nd-surface),0 0 0 4px var(--nd-line)}
.nd-app .nd-hero h2{margin:0;font-size:23px;font-weight:700;letter-spacing:-.022em}
.nd-app .nd-hero p{margin:4px 0 0;font-size:13.5px;color:var(--nd-muted)}
.nd-app .nd-type-pill{display:inline-flex;align-items:center;gap:6px;background:color-mix(in srgb,var(--nd-primary) 12%,transparent);color:var(--nd-primary);font-size:11.5px;font-weight:600;border-radius:20px;padding:3px 10px;margin-left:6px;vertical-align:3px}
.nd-app .nd-hero-r{position:relative;z-index:1;display:flex;gap:10px;flex-wrap:wrap}
.nd-app .nd-btn{background:linear-gradient(135deg,var(--nd-secondary),var(--nd-primary));color:#fff;border:0;border-radius:10px;padding:10px 16px;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:7px;text-decoration:none}
.nd-app .nd-btn.nd-ghost{background:var(--nd-surface);color:var(--nd-chip-ink);border:1px solid var(--nd-line)}
.nd-app .nd-btn.nd-sm{padding:6px 11px;font-size:12px;border-radius:8px}
.nd-app .nd-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:760px){
.nd-app .nd-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.nd-app .nd-stat{padding:18px 20px;display:flex;flex-direction:column;gap:2px}
.nd-app .nd-stat .nd-n{font-size:26px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.nd-app .nd-stat .nd-l{font-size:12.5px;color:var(--nd-muted)}
.nd-app .nd-stat .nd-d{font-size:11.5px;color:var(--nd-good);font-weight:600}
.nd-app .nd-tabs{display:flex;gap:4px;border-bottom:1px solid var(--nd-line);overflow-x:auto}
.nd-app .nd-tabs button{background:transparent;border:0;border-bottom:2px solid transparent;padding:10px 14px;font-size:13.5px;font-weight:500;color:var(--nd-muted);white-space:nowrap;display:flex;align-items:center;gap:7px}
.nd-app .nd-tabs button[aria-selected="true"]{color:var(--nd-primary);border-bottom-color:var(--nd-primary);font-weight:600}
.nd-app .nd-tabs .nd-cnt{background:var(--nd-primary);color:#fff;border-radius:9px;font-size:10.5px;font-weight:700;padding:0 6px;line-height:17px}
.nd-app .nd-sec-title{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--nd-muted);margin:0 2px 14px}
.nd-app .nd-sec-title::after{content:'';flex:1;height:1px;background:var(--nd-line)}
.nd-app .nd-grid2{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:20px}
@media (max-width:1100px){
.nd-app .nd-grid2{grid-template-columns:1fr}
}
.nd-app .nd-pad{padding:22px 24px}
.nd-app .nd-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.nd-app .nd-h h3{margin:0;font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px}
.nd-app .nd-h h3 svg{width:18px;height:18px;color:var(--nd-primary)}
.nd-app .nd-sub{font-size:12.5px;color:var(--nd-muted);margin:0}
.nd-app .nd-deals{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr));gap:16px}
.nd-app .nd-deal{overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.nd-app .nd-deal:hover{transform:translateY(-3px);box-shadow:var(--nd-shadow-lift)}
.nd-app .nd-photo{height:132px;position:relative;display:grid;place-items:center}
.nd-app .nd-photo svg{width:54px;height:54px;color:rgba(255,255,255,.75)}
.nd-app .nd-photo .nd-badge{position:absolute;top:10px;left:10px;background:linear-gradient(135deg,var(--nd-secondary),var(--nd-primary));color:#fff;border-radius:8px;padding:3px 9px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.nd-app .nd-photo .nd-score{position:absolute;top:10px;right:10px;background:var(--nd-surface);color:var(--nd-good);border-radius:20px;padding:3px 9px;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.nd-app .nd-deal-b{padding:14px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.nd-app .nd-price{font-size:18px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.nd-app .nd-addr{font-size:13px;color:var(--nd-chip-ink)}
.nd-app .nd-pills{display:flex;flex-wrap:wrap;gap:6px}
.nd-app .nd-pill{background:var(--nd-chip);color:var(--nd-chip-ink);border-radius:8px;padding:3px 9px;font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums}
.nd-app .nd-why{font-size:11.5px;color:var(--nd-teal)}
.nd-app .nd-from{margin-top:auto;padding-top:10px;border-top:1px solid var(--nd-line);display:flex;align-items:center;gap:8px;font-size:12px;color:var(--nd-muted)}
.nd-app .nd-hubdot{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;color:#fff;font-size:10px;font-weight:700;flex:none}
.nd-app .nd-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.nd-app .nd-rows li{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--nd-line);align-items:center}
.nd-app .nd-rows li:last-child{border-bottom:0}
.nd-app .nd-rows .nd-who{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:600;font-size:14px;flex:none;position:relative}
.nd-app .nd-rows .nd-who .nd-hubdot{position:absolute;bottom:-3px;right:-5px;width:18px;height:18px;border:2px solid var(--nd-surface)}
.nd-app .nd-rows .nd-main{flex:1;min-width:0}
.nd-app .nd-rows .nd-main b{display:block;font-size:13.5px;font-weight:600}
.nd-app .nd-rows .nd-main span{display:block;font-size:12.5px;color:var(--nd-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nd-app .nd-rows .nd-t{font-size:11.5px;color:var(--nd-muted);flex:none}
.nd-app .nd-unread b::after{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--nd-primary);margin-left:6px;vertical-align:2px}
.nd-app .nd-date{width:46px;flex:none;text-align:center;border-radius:10px;background:var(--nd-surface-2);border:1px solid var(--nd-line);padding:4px 0}
.nd-app .nd-date small{display:block;font-size:10px;font-weight:700;color:var(--nd-primary);text-transform:uppercase;letter-spacing:.05em}
.nd-app .nd-date b{font-size:17px;font-weight:700;line-height:1.1}
.nd-app .nd-mine{font-size:10px;font-weight:700;background:color-mix(in srgb,var(--nd-primary) 12%,transparent);color:var(--nd-primary);border-radius:6px;padding:1px 6px;margin-left:6px}
.nd-app .nd-up{padding:22px 24px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;background:linear-gradient(135deg,var(--nd-secondary),var(--nd-primary));border:0;color:#fff}
.nd-app .nd-up h3{margin:0;font-size:18px;font-weight:700}
.nd-app .nd-up p{margin:4px 0 0;font-size:13px;opacity:.9;max-width:60ch}
.nd-app .nd-up ul{margin:10px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px}
.nd-app .nd-up ul li::before{content:'✓ ';font-weight:700}
.nd-app .nd-up .nd-btn{background:#fff;color:var(--nd-primary);margin-left:auto}
.nd-app .nd-up-l{flex:1;min-width:0}
.nd-app .nd-inbox{display:grid;grid-template-columns:300px minmax(0,1fr);min-height:440px;overflow:hidden}
@media (max-width:760px){
.nd-app .nd-inbox{grid-template-columns:1fr}
.nd-app .nd-thread-list{display:none}
}
.nd-app .nd-thread-list{border-right:1px solid var(--nd-line);padding:8px 14px}
.nd-app .nd-thread-list li{cursor:pointer;border-radius:10px;padding:10px 8px}
.nd-app .nd-thread-list li.nd-on{background:var(--nd-faint)}
.nd-app .nd-convo{display:flex;flex-direction:column}
.nd-app .nd-convo-h{padding:14px 20px;border-bottom:1px solid var(--nd-line);display:flex;align-items:center;gap:10px}
.nd-app .nd-convo-h small{display:block;color:var(--nd-muted);font-size:12px}
.nd-app .nd-msgs{flex:1;padding:18px 20px;display:flex;flex-direction:column;gap:10px;background:var(--nd-surface-2)}
.nd-app .nd-bubble{max-width:75%;padding:10px 14px;border-radius:16px;font-size:13.5px;background:var(--nd-surface);border:1px solid var(--nd-line)}
.nd-app .nd-bubble.nd-me{align-self:flex-end;background:var(--nd-primary);color:#fff;border:0}
.nd-app .nd-bubble .nd-prop{display:flex;gap:10px;align-items:center;margin-top:8px;padding:8px;border-radius:10px;background:var(--nd-surface-2);border:1px solid var(--nd-line)}
.nd-app .nd-bubble .nd-prop i{width:44px;height:36px;border-radius:6px;flex:none}
.nd-app .nd-compose{display:flex;gap:10px;padding:12px 16px;border-top:1px solid var(--nd-line)}
.nd-app .nd-compose input{flex:1;border:1px solid var(--nd-line);background:var(--nd-surface);color:var(--nd-ink);border-radius:10px;padding:10px 14px;font-family:inherit;font-size:13px;min-width:0}
.nd-app .nd-note-line{font-size:11.5px;color:var(--nd-muted);padding:0 20px 12px}
.nd-app .nd-bb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:14px 16px}
.nd-app .nd-f label{display:block;font-size:12px;font-weight:600;color:var(--nd-chip-ink);margin-bottom:4px}
.nd-app .nd-f input,
.nd-app .nd-f select{width:100%;border:1px solid var(--nd-line);background:var(--nd-surface);color:var(--nd-ink);border-radius:9px;padding:9px 11px;font-family:inherit;font-size:13px}
.nd-app .nd-chips{display:flex;flex-wrap:wrap;gap:6px}
.nd-app .nd-chip{background:var(--nd-chip);color:var(--nd-chip-ink);border-radius:20px;padding:4px 11px;font-size:11.5px;font-weight:600;border:0}
.nd-app .nd-chip.nd-on{background:var(--nd-primary);color:#fff}
.nd-app .nd-wide{grid-column:span 2}
@media (max-width:700px){
.nd-app .nd-wide{grid-column:span 1}
}
.nd-app .nd-sync{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px;padding:12px 14px;border-radius:12px;background:var(--nd-good-soft);color:var(--nd-good);font-size:12.5px;font-weight:500}
.nd-app .nd-hubs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:16px}
.nd-app .nd-hubc{padding:20px;display:flex;flex-direction:column;gap:12px}
.nd-app .nd-hubc-h{display:flex;align-items:center;gap:12px}
.nd-app .nd-hubc-h .nd-hubdot{width:44px;height:44px;border-radius:12px;font-size:17px}
.nd-app .nd-hubc-h b{display:block;font-size:15px}
.nd-app .nd-hubc-h small{color:var(--nd-muted);font-size:12px}
.nd-app .nd-kv{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
.nd-app .nd-kv div{background:var(--nd-surface-2);border-radius:10px;padding:8px 4px}
.nd-app .nd-kv b{display:block;font-size:16px;font-variant-numeric:tabular-nums}
.nd-app .nd-kv span{font-size:11px;color:var(--nd-muted)}
.nd-app .nd-overlay{position:fixed;inset:0;background:rgba(15,23,42,.55);display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));z-index:20;overflow:auto}
.nd-app .nd-modal{width:min(640px,100%);padding:30px;display:flex;flex-direction:column;gap:18px}
.nd-app .nd-modal .nd-step{font-size:11.5px;font-weight:700;color:var(--nd-primary);letter-spacing:.08em;text-transform:uppercase}
.nd-app .nd-modal h2{margin:0;font-size:22px;letter-spacing:-.02em}
.nd-app .nd-modal p{margin:0;color:var(--nd-muted);font-size:13.5px}
.nd-app .nd-types{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:12px}
.nd-app .nd-type{display:flex;flex-direction:column;gap:6px;text-align:left;padding:16px;border-radius:14px;border:1.5px solid var(--nd-line);background:var(--nd-surface);color:var(--nd-ink)}
.nd-app .nd-type:hover{border-color:var(--nd-primary)}
.nd-app .nd-type.nd-on{border-color:var(--nd-primary);background:color-mix(in srgb,var(--nd-primary) 7%,var(--nd-surface));box-shadow:0 0 0 3px color-mix(in srgb,var(--nd-primary) 18%,transparent)}
.nd-app .nd-type b{font-size:14px}
.nd-app .nd-type span{font-size:12px;color:var(--nd-muted)}
.nd-app .nd-type svg{width:24px;height:24px;color:var(--nd-primary)}
.nd-app .nd-progress{display:flex;gap:6px}
.nd-app .nd-progress i{flex:1;height:4px;border-radius:2px;background:var(--nd-line)}
.nd-app .nd-progress i.nd-on{background:var(--nd-primary)}
.nd-app .nd-modal-f{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.nd-app .nd-sample{font-size:11px;color:var(--nd-muted);text-align:center;padding-top:6px}
.nd-app .nd-side .nd-live{margin-left:auto;font-size:10px;font-weight:700;background:var(--nd-good-soft);color:var(--nd-good);border-radius:6px;padding:1px 6px}
.nd-app .nd-owner-zone{border:1.5px dashed color-mix(in srgb,var(--nd-primary) 45%,transparent);background:color-mix(in srgb,var(--nd-primary) 4%,var(--nd-bg));border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:20px}
.nd-app .nd-zone-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.nd-app .nd-zone-h h3{margin:0;font-size:17px;font-weight:700}
.nd-app .nd-zone-h .nd-lockchip{display:inline-flex;align-items:center;gap:5px;background:var(--nd-primary);color:#fff;border-radius:20px;padding:3px 10px;font-size:11px;font-weight:700}
.nd-app .nd-zone-h .nd-sub{flex-basis:100%}
.nd-app .nd-mylah{display:flex;gap:14px;align-items:flex-start}
.nd-app .nd-mylah-av{width:40px;height:40px;border-radius:12px;flex:none;background:linear-gradient(135deg,var(--nd-secondary),var(--nd-primary));color:#fff;display:grid;place-items:center;font-weight:700}
.nd-app .nd-mylah ul{margin:6px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:13px}
.nd-app .nd-mylah li::before{content:'✓ ';color:var(--nd-good);font-weight:700}
.nd-app .nd-tchip{font-size:10.5px;font-weight:600;background:var(--nd-chip);color:var(--nd-chip-ink);border-radius:6px;padding:1px 7px;margin-left:6px}
.nd-app .nd-newhub{font-size:10.5px;font-weight:600;color:var(--nd-teal)}
.nd-app .nd-member-note{padding:14px 18px;border-radius:14px;background:var(--nd-surface);border:1px solid var(--nd-line);font-size:13px;color:var(--nd-muted)}
.nd-app .nd-member-note b{color:var(--nd-ink)}
.nd-app .nd-fd-wrap{display:grid;grid-template-columns:minmax(0,640px) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:1100px){
.nd-app .nd-fd-wrap{grid-template-columns:1fr}
.nd-app .nd-fd-aside{display:none}
}
.nd-app .nd-fd-col{display:flex;flex-direction:column;gap:16px}
.nd-app .nd-fd-compose{padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.nd-app .nd-fd-row{display:flex;gap:12px;align-items:flex-start}
.nd-app .nd-fd-av{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;font-weight:600;font-size:14px;position:relative}
.nd-app .nd-fd-av .nd-hubdot{position:absolute;bottom:-3px;right:-5px;width:18px;height:18px;border:2px solid var(--nd-surface);font-size:9px}
.nd-app .nd-fd-compose textarea{flex:1;min-width:0;border:1px solid var(--nd-line);background:var(--nd-surface-2);color:var(--nd-ink);border-radius:12px;padding:10px 14px;font-family:inherit;font-size:14px;resize:none;min-height:46px}
.nd-app .nd-fd-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.nd-app .nd-fd-tool{background:transparent;border:0;color:var(--nd-muted);font-size:12.5px;font-weight:600;display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border-radius:8px}
.nd-app .nd-fd-tool:hover{background:var(--nd-faint);color:var(--nd-primary)}
.nd-app .nd-fd-tool svg{width:17px;height:17px}
.nd-app .nd-fd-to{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--nd-muted);margin-left:auto}
.nd-app .nd-fd-to select{border:1px solid var(--nd-line);background:var(--nd-surface);color:var(--nd-ink);border-radius:9px;padding:6px 8px;font-family:inherit;font-size:12.5px;font-weight:600}
.nd-app .nd-fd-filter{display:flex;gap:6px;flex-wrap:wrap}
.nd-app .nd-post{padding:16px 18px 6px;display:flex;flex-direction:column;gap:12px}
.nd-app .nd-post-h{display:flex;gap:12px;align-items:center}
.nd-app .nd-post-h .nd-who{flex:1;min-width:0}
.nd-app .nd-post-h .nd-who b{font-size:14px;font-weight:600}
.nd-app .nd-post-h .nd-who small{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;color:var(--nd-muted)}
.nd-app .nd-role{font-size:10px;font-weight:700;border-radius:6px;padding:1px 6px;background:color-mix(in srgb,var(--nd-primary) 12%,transparent);color:var(--nd-primary)}
.nd-app .nd-ann{font-size:10px;font-weight:700;border-radius:6px;padding:1px 6px;background:#fef3c7;color:#b45309}
.nd-app .nd-hubtag{display:inline-flex;align-items:center;gap:5px;font-weight:600;color:var(--nd-chip-ink)}
.nd-app .nd-hubtag .nd-hubdot{width:16px;height:16px;font-size:8.5px;border-radius:5px}
.nd-app .nd-post-t{font-size:14px;line-height:1.55;white-space:pre-line}
.nd-app .nd-post-deal{display:grid;grid-template-columns:150px minmax(0,1fr);border:1px solid var(--nd-line);border-radius:14px;overflow:hidden;background:var(--nd-surface-2)}
@media (max-width:520px){
.nd-app .nd-post-deal{grid-template-columns:1fr}
.nd-app .nd-post-deal .nd-ph{height:120px}
}
.nd-app .nd-post-deal .nd-ph{display:grid;place-items:center;color:rgba(255,255,255,.75);min-height:120px}
.nd-app .nd-post-deal .nd-ph svg{width:44px;height:44px}
.nd-app .nd-post-deal .nd-bd{padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.nd-app .nd-post-deal .nd-bd b{font-size:16px}
.nd-app .nd-post-deal .nd-acts{display:flex;gap:8px;margin-top:4px;flex-wrap:wrap}
.nd-app .nd-post-ev{display:flex;gap:12px;align-items:center;border:1px solid var(--nd-line);border-radius:14px;padding:12px 14px;background:var(--nd-surface-2)}
.nd-app .nd-post-ev .nd-grow{flex:1;min-width:0}
.nd-app .nd-post-ev .nd-grow b{display:block;font-size:14px}
.nd-app .nd-post-ev .nd-grow span{font-size:12px;color:var(--nd-muted)}
.nd-app .nd-post-chart{border:1px solid var(--nd-line);border-radius:14px;padding:14px;background:var(--nd-surface-2);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;text-align:center}
.nd-app .nd-post-chart b{display:block;font-size:20px;font-variant-numeric:tabular-nums}
.nd-app .nd-post-chart span{font-size:11.5px;color:var(--nd-muted)}
.nd-app .nd-post-chart .nd-dn{color:#dc2626}
.nd-app .nd-post-chart .nd-upc{color:var(--nd-good)}
.nd-app .nd-counts{display:flex;justify-content:space-between;font-size:12px;color:var(--nd-muted);padding:0 2px}
.nd-app .nd-post-a{display:flex;border-top:1px solid var(--nd-line);padding-top:4px}
.nd-app .nd-post-a button{flex:1;background:transparent;border:0;color:var(--nd-muted);font-size:13px;font-weight:600;padding:8px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.nd-app .nd-post-a button:hover{background:var(--nd-faint)}
.nd-app .nd-post-a button svg{width:17px;height:17px}
.nd-app .nd-post-a button.nd-liked{color:var(--nd-primary)}
.nd-app .nd-post-a button.nd-liked svg{fill:var(--nd-primary)}
.nd-app .nd-cmts{display:flex;flex-direction:column;gap:10px;padding:4px 0 12px}
.nd-app .nd-cmt{display:flex;gap:10px;align-items:flex-start}
.nd-app .nd-cmt .nd-fd-av{width:32px;height:32px;font-size:12px}
.nd-app .nd-cmt .nd-bubble2{background:var(--nd-surface-2);border:1px solid var(--nd-line);border-radius:14px;padding:8px 12px;font-size:13px;min-width:0}
.nd-app .nd-cmt .nd-bubble2 b{font-size:12.5px;display:block}
.nd-app .nd-cmt.nd-reply{margin-left:42px}
.nd-app .nd-cmt-in{display:flex;gap:8px;align-items:center}
.nd-app .nd-cmt-in input{flex:1;min-width:0;border:1px solid var(--nd-line);background:var(--nd-surface-2);color:var(--nd-ink);border-radius:20px;padding:8px 14px;font-family:inherit;font-size:13px}
.nd-app .nd-fd-note{font-size:11.5px;color:var(--nd-muted);display:flex;align-items:center;gap:6px}
.nd-app .nd-fd-aside{display:flex;flex-direction:column;gap:16px;position:sticky;top:16px}
.nd-app .nd-toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));background:var(--nd-ink);color:var(--nd-bg);padding:10px 16px;border-radius:12px;font-size:13px;font-weight:500;z-index:30;box-shadow:var(--nd-shadow-lift)}

/* 3 · the mockup's shell, around the app's own page container (#ajax_loading.tag_content) */
body.nd-app.nd-shell { --nd-gutter: max(16px, calc((100vw - 1440px) / 2 + 16px)); padding-top: 58px !important; }
body.nd-app.nd-shell .nd-topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1030; width: auto; }
body.nd-app.nd-shell .nd-side {
    position: fixed; top: 82px; left: var(--nd-gutter); width: 220px; z-index: 1020;
    max-height: calc(100vh - 98px); overflow-y: auto; align-self: auto; margin: 0; padding: 0;
    scrollbar-width: none;
}
body.nd-app.nd-shell .nd-side::-webkit-scrollbar { display: none; }
body.nd-app.nd-shell #ajax_loading.tag_content {
    margin: 0 var(--nd-gutter) 0 calc(var(--nd-gutter) + 244px) !important;
    padding: 24px 0 48px !important; width: auto !important; max-width: none !important;
    min-height: calc(100vh - 58px); background: transparent !important; float: none !important;
}
/* Mylah's docked panel (strastic-pages/mylah-rail.php, admins) sits on the right: keep the page and the top bar clear of it.
   Same breakpoint as the rail's own push; below it the rail overlays. */
@media (min-width: 1201px) {
    body.nd-app.nd-shell.mylah-dock-on #ajax_loading.tag_content { margin-right: calc(var(--nd-gutter) + 390px) !important; }
    body.nd-app.nd-shell.mylah-dock-on .nd-topbar { right: 390px !important; width: auto !important; }
}
/* The classic theme gives <header> a bottom margin; the mockup's content starts right under the bar. */
body.nd-app.nd-shell > header { margin: 0 !important; padding: 0 !important; height: 0; }
/* The welcome card scrolls with the page — pinned, it slid over the stats and tabs below it. */
body.nd-app.nd-shell .nd-hdash > .nd-hero { position: static; }
/* When something is scrolled into view or focused (a comment box, an anchor), keep it clear of the bar. */
html:has(body.nd-app.nd-shell) { scroll-padding-top: 90px; }
/* The classic chrome the new shell replaces. */
body.nd-app .tag_create_dropup, body.nd-app .tag_sidebar, body.nd-app .chat-container { display: none !important; }
body.nd-app .nd-scrim, body.nd-app .nd-topbar .nd-burger { display: none; }

/* Go Live studio (live/content.phtml). The classic layout is fixed full-width from top:80px, so it ran
   under this shell's left menu; it sits in the content column instead, below the bar, and its right
   column (live chat + Go live) is the page's own, not classic chrome. */
body.nd-app.nd-shell .tag_live_layout {
    top: 58px; left: calc(var(--nd-gutter) + 244px); right: var(--nd-gutter);
    padding: 24px 0 16px; background: transparent; z-index: 100;
}
@media (min-width: 1201px) {
    body.nd-app.nd-shell.mylah-dock-on .tag_live_layout { right: calc(var(--nd-gutter) + 390px); }
}
@media (min-width: 1151px) {
    body.nd-app.nd-shell .tag_live_layout .tag_live_sidebar { background: var(--nd-surface); box-shadow: var(--nd-shadow); border: 1px solid var(--nd-line); }
    body.nd-app.nd-shell .tag_live_layout .wow_liv_comments_feed:after { background: linear-gradient(var(--nd-surface), transparent); }
    body.nd-app.nd-shell .tag_live_layout .hf-live-side-head, body.nd-app.nd-shell .tag_live_layout .tag_live_sidebar_foot { border-color: var(--nd-line); }
    body.nd-app.nd-shell .tag_live_layout .hf-live-side-head h3, body.nd-app.nd-shell .tag_live_layout .tag_live_no_comment b { color: var(--nd-ink); }
    body.nd-app.nd-shell .tag_live_layout .hf-live-side-head p, body.nd-app.nd-shell .tag_live_layout .tag_live_no_comment, body.nd-app.nd-shell .tag_live_layout .hf-live-ready { color: var(--nd-muted); }
    body.nd-app.nd-shell .tag_live_layout .hf-live-side-badge { background: var(--nd-chip); color: var(--nd-chip-ink); }
    body.nd-app.nd-shell .tag_live_layout .wo-host-chat input { background: var(--nd-surface-2); color: var(--nd-ink); border-color: var(--nd-line); }
    body.nd-app.nd-shell .tag_live_layout .live_comments .tag_comm_body { background: var(--nd-surface-2); }
}
@media (max-width: 900px) {
    body.nd-app.nd-shell .tag_live_layout { left: 0; right: 0; padding: 0; }
}

@media (max-width: 900px) {
    body.nd-app.nd-shell { --nd-gutter: 16px; }
    body.nd-app.nd-shell #ajax_loading.tag_content { margin-left: var(--nd-gutter) !important; }
    body.nd-app .nd-topbar .nd-burger { display: grid; }
    body.nd-app.nd-shell .nd-side { display: flex; left: 0; top: 58px; bottom: 0; max-height: none; width: 264px; padding: 16px 12px; transform: translateX(-100%); transition: transform .2s; background: var(--nd-surface); box-shadow: var(--nd-shadow-lift); }
    body.nd-app.nd-shell.nd-side-open .nd-side { transform: none; }
    body.nd-app.nd-shell.nd-side-open .nd-scrim { display: block; position: fixed; inset: 58px 0 0 0; background: rgba(15,23,42,.45); z-index: 1010; }
}

/* 4 · what a static mockup does not draw */
.nd-app .nd-burger { width: 34px; height: 34px; border: 0; border-radius: 10px; background: transparent; color: var(--nd-muted); place-items: center; flex: none; }
.nd-app .nd-logo { color: var(--nd-ink); }
.nd-app .nd-logo span { white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.nd-app .nd-logo-img { display: block; height: 34px; width: auto; max-width: 200px; object-fit: contain; }
.nd-app .nd-logo-onnight, body.nd-app.nd-dark .nd-logo-onlight { display: none; }
body.nd-app.nd-dark .nd-logo-onnight { display: block; }
.nd-app .nd-search { display: flex; align-items: center; gap: 8px; }
.nd-app .nd-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--nd-ink); font: inherit; font-size: 13px; padding: 0; outline: 0; box-shadow: none; height: auto; }
.nd-app .nd-search input::placeholder { color: var(--nd-muted); }
.nd-app .nd-ic-btn { text-decoration: none; cursor: pointer; }
.nd-app .nd-me { border: 0; padding: 0; overflow: hidden; cursor: pointer; font-family: inherit; }
.nd-app .nd-me img, .nd-app .nd-avatar img, .nd-app .nd-who img, .nd-app .nd-fd-av img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.nd-app .nd-avatar, .nd-app .nd-who, .nd-app .nd-fd-av { overflow: visible; }
.nd-app .nd-avatar { overflow: hidden; }
.nd-app a.nd-who, .nd-app a.nd-hubc-lnk { color: #fff; }
.nd-app .nd-pop-wrap { position: relative; }
.nd-app .nd-pop { position: absolute; right: 0; top: calc(100% + 10px); width: 330px; max-height: 70vh; overflow: auto; background: var(--nd-surface); border: 1px solid var(--nd-line); border-radius: 14px; box-shadow: var(--nd-shadow-lift); z-index: 1100; }
.nd-app .nd-pop[hidden] { display: none; }
.nd-app .nd-pop-h { padding: 12px 16px; font-weight: 700; border-bottom: 1px solid var(--nd-line); }
.nd-app .nd-pop-b { padding: 4px 0; }
.nd-app .nd-pop-b a { color: var(--nd-ink); }
.nd-app .nd-pop-empty { padding: 18px 16px; color: var(--nd-muted); font-size: 13px; }
.nd-app .nd-menu { width: 230px; padding: 6px; }
.nd-app .nd-menu a { display: block; padding: 9px 12px; border-radius: 9px; color: var(--nd-ink); font-size: 13.5px; font-weight: 500; }
.nd-app .nd-menu a:hover { background: var(--nd-faint); color: var(--nd-primary); }
.nd-app .nd-menu-who { padding: 10px 12px 8px; border-bottom: 1px solid var(--nd-line); margin-bottom: 4px; }
.nd-app .nd-menu-who b { display: block; font-size: 14px; }
.nd-app .nd-menu-who span { font-size: 12px; color: var(--nd-muted); }
.nd-app .nd-menu a.nd-menu-out { color: #dc2626; }
.nd-app .nd-side button.nd-swbtn { border: 0; background: transparent; width: 100%; text-align: left; font: inherit; font-size: 13.5px; font-weight: 500; }
.nd-app .nd-side a, .nd-app .nd-side .nd-swbtn { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; color: var(--nd-chip-ink); font-size: 13.5px; font-weight: 500; }
.nd-app .nd-side .nd-swbtn:hover, .nd-app .nd-side a:hover:not(.nd-on) { color: var(--nd-ink); }
.nd-app .nd-hdash > section, .nd-app .nd-hdash > div { min-width: 0; }
.nd-app a.nd-btn, .nd-app a.nd-deal, .nd-app a.nd-hubc-lnk { text-decoration: none; }
.nd-app a.nd-deal { color: inherit; }
.nd-app .nd-photo { position: relative; overflow: hidden; }
.nd-app .nd-photo svg { position: relative; z-index: 0; }
.nd-app .nd-photo .nd-photo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.nd-app .nd-photo .nd-badge, .nd-app .nd-photo .nd-score { z-index: 2; }
.nd-app .nd-link { color: var(--nd-primary); font-weight: 600; text-decoration: none; }
.nd-app .nd-btn[disabled], .nd-app .nd-btn.nd-busy { opacity: .6; cursor: progress; }
.nd-app .nd-btn.nd-done { background: var(--nd-good-soft); color: var(--nd-good); border: 0; }
.nd-app #ndBody, .nd-app .nd-panel { display: contents; }
.nd-app .nd-panel[hidden], .nd-app .nd-toast[hidden], .nd-app .nd-pop[hidden], .nd-app .nd-topbar [hidden], .nd-app .nd-hdash [hidden] { display: none !important; }
.nd-app .nd-loading, .nd-app .nd-empty { padding: 28px 24px; color: var(--nd-muted); font-size: 13.5px; text-align: center; }
.nd-app .nd-post-img { width: 100%; max-height: 420px; object-fit: cover; border-radius: 14px; display: block; }
.nd-app .nd-post-t a { color: var(--nd-primary); }
.nd-app .nd-compose input, .nd-app .nd-cmt-in input, .nd-app .nd-f input, .nd-app .nd-f select, .nd-app .nd-fd-compose textarea, .nd-app .nd-fd-to select { box-shadow: none; height: auto; }
.nd-app .nd-bubble { word-break: break-word; }
.nd-app .nd-msgs { min-height: 240px; max-height: 420px; overflow-y: auto; }
.nd-app .nd-thread-list li.nd-on { background: var(--nd-faint); }
.nd-app .nd-chip-add { border: 1px dashed var(--nd-line); }
.nd-app .nd-chip-in { border: 1px solid var(--nd-line); background: var(--nd-surface); color: var(--nd-ink); border-radius: 20px; padding: 4px 11px; font: inherit; font-size: 11.5px; width: 110px; outline: 0; }
.nd-app .nd-err { background: #fee2e2; color: #b91c1c; }
@media (prefers-reduced-motion: reduce) { .nd-app * { transition: none !important; } }
.nd-app .nd-side .nd-swbtn svg { width: 18px; height: 18px; flex: none; }
/* A sent message. The mockup reuses the class name of the top-bar avatar for this, which turns the bubble into a 34px circle; a bubble needs its own. */
.nd-app .nd-bubble.nd-mine { align-self: flex-end; background: var(--nd-primary); color: #fff; border: 0; width: auto; height: auto; display: block; border-radius: 16px; place-items: initial; font-weight: 400; font-size: 13.5px; letter-spacing: normal; }

/* ── top bar dropdowns (notifications, messages) ───────────────────────────── */
.nd-app .nd-pop-wide { width: 380px; max-width: calc(100vw - 24px); display: flex; flex-direction: column; max-height: 74vh; overflow: hidden; }
.nd-app .nd-pop-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; font-weight: 700; font-size: 15px; border-bottom: 1px solid var(--nd-line); }
.nd-app .nd-pop-h a, .nd-app .nd-pop-h button { border: 0; background: transparent; color: var(--nd-primary); font: 600 12px var(--nd-font); cursor: pointer; padding: 0; text-decoration: none; }
.nd-app .nd-pop-h a:hover, .nd-app .nd-pop-h button:hover { text-decoration: underline; }
.nd-app .nd-pop-wide .nd-pop-b { flex: 1; overflow-y: auto; padding: 6px 0; }
.nd-app .nd-pop-f { display: block; text-align: center; padding: 12px; border-top: 1px solid var(--nd-line); color: var(--nd-primary); font-size: 13px; font-weight: 600; text-decoration: none; }
.nd-app .nd-pop-f:hover { background: var(--nd-faint); }
.nd-app .nd-nlist { padding: 0; margin: 0; list-style: none; }
.nd-app .nd-nlist li { padding: 0; border-bottom: 0; display: block; }
.nd-app .nd-nlist li + li { border-top: 1px solid var(--nd-line); }
.nd-app .nd-nrow { display: flex; align-items: center; gap: 12px; padding: 12px 18px; color: var(--nd-ink); text-decoration: none; }
.nd-app .nd-nrow:hover { background: var(--nd-faint); }
.nd-app .nd-nlist li.nd-unread .nd-nrow { background: color-mix(in srgb, var(--nd-primary) 6%, transparent); }
.nd-app .nd-nlist .nd-main b { display: inline; }
.nd-app .nd-nlist .nd-main { flex: 1; min-width: 0; }
.nd-app .nd-ntext { display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal !important; overflow: hidden; font-size: 13px; color: var(--nd-ink) !important; line-height: 1.4; }
.nd-app .nd-ntext b { font-weight: 600; }
.nd-app .nd-nt { font-size: 11.5px !important; color: var(--nd-muted) !important; margin-top: 2px; }
.nd-app .nd-nlist .nd-who { width: 38px; height: 38px; font-size: 13px; }
.nd-app .nd-dot[hidden] { display: none !important; }

/* ── messages: bubbles, days, attachments (tab and page) ──────────────────── */
.nd-app .nd-day { align-self: center; margin: 6px 0; }
.nd-app .nd-day span { background: var(--nd-chip); color: var(--nd-muted); border-radius: 20px; padding: 3px 12px; font-size: 11px; font-weight: 600; }
.nd-app .nd-bubble { position: relative; }
.nd-app .nd-bubble .nd-bt { display: block; margin-top: 3px; font-size: 10.5px; opacity: .6; text-align: right; font-weight: 400; }
.nd-app .nd-bubble.nd-mine .nd-bt { color: #fff; opacity: .8; }
.nd-app .nd-msg-img { display: block; max-width: 260px; width: 100%; border-radius: 12px; margin-top: 6px; }
.nd-app .nd-msg-file { display: inline-block; margin-top: 6px; color: inherit; text-decoration: underline; }
.nd-app .nd-compose { align-items: center; }
.nd-app .nd-attach { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--nd-line); display: grid; place-items: center; color: var(--nd-muted); cursor: pointer; flex: none; }
.nd-app .nd-attach:hover { color: var(--nd-primary); border-color: var(--nd-primary); }
.nd-app .nd-attach svg { width: 18px; height: 18px; }
.nd-app .nd-convo-h .nd-btn { margin-left: auto; }
.nd-app .nd-convo-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--nd-muted); text-align: center; padding: 40px; }
.nd-app .nd-convo-empty svg { width: 44px; height: 44px; color: var(--nd-primary); opacity: .7; }
.nd-app .nd-convo-empty b { color: var(--nd-ink); font-size: 15px; }

/* ── the /messages page ─────────────────────────────────────────────────────── */
.nd-app .nd-msgpage { display: flex; flex-direction: column; gap: 18px; }
.nd-app .nd-inbox-page { grid-template-columns: 340px minmax(0, 1fr); height: calc(100vh - 190px); min-height: 480px; }
.nd-app .nd-inbox-page .nd-thread-col { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--nd-line); }
.nd-app .nd-thread-tools { padding: 14px 14px 8px; display: flex; flex-direction: column; gap: 10px; }
.nd-app .nd-tsearch { display: flex; align-items: center; gap: 8px; background: var(--nd-surface-2); border: 1px solid var(--nd-line); border-radius: 10px; padding: 8px 12px; color: var(--nd-muted); }
.nd-app .nd-tsearch svg { width: 16px; height: 16px; flex: none; }
.nd-app .nd-tsearch input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--nd-ink); font: inherit; font-size: 13px; outline: 0; padding: 0; box-shadow: none; height: auto; }
.nd-app .nd-tfilter { display: flex; gap: 6px; }
.nd-app .nd-tfilter .nd-chip { display: inline-flex; align-items: center; gap: 6px; }
.nd-app .nd-tfilter .nd-cnt { background: var(--nd-primary); color: #fff; border-radius: 9px; font-size: 10.5px; font-weight: 700; padding: 0 6px; line-height: 17px; }
.nd-app .nd-inbox-page .nd-thread-list { flex: 1; overflow-y: auto; border-right: 0; min-height: 0; padding: 4px 8px 8px; }
.nd-app .nd-inbox-page .nd-thread-list[hidden], .nd-app .nd-people[hidden] { display: none; }
.nd-app .nd-people { list-style: none; margin: 0; padding: 4px 8px 8px; border-top: 1px solid var(--nd-line); max-height: 40%; overflow-y: auto; }
.nd-app .nd-people li { cursor: pointer; border-radius: 10px; padding: 10px 8px; }
.nd-app .nd-people li:hover { background: var(--nd-faint); }
.nd-app .nd-people-h { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--nd-muted); cursor: default !important; }
.nd-app .nd-people-h:hover { background: transparent !important; }
.nd-app .nd-empty { text-align: center; color: var(--nd-muted); font-size: 13px; padding: 24px 12px; display: block; cursor: default; }
.nd-app .nd-inbox-page .nd-convo { min-height: 0; height: 100%; }
.nd-app .nd-inbox-page .nd-msgs { flex: 1; max-height: none; min-height: 0; }
@media (max-width: 900px) {
    .nd-app .nd-inbox-page { grid-template-columns: 1fr; height: auto; }
    .nd-app .nd-inbox-page .nd-thread-col { max-height: 280px; border-right: 0; border-bottom: 1px solid var(--nd-line); }
    .nd-app .nd-inbox-page .nd-convo { min-height: 460px; }
    .nd-app .nd-pop-wide { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; }
}
.nd-app .nd-who { position: relative; }
.nd-app input[type=file][hidden] { display: none !important; }
.nd-app .nd-msg-file, .nd-app .nd-bubble a { word-break: break-all; }
.nd-app .nd-bubble.nd-mine a { color: #fff; text-decoration: underline; }
/* The bar must never be wider than the screen: the search shrinks first, and on a phone the hub's name gives way to its tile. */
.nd-app .nd-topbar { min-width: 0; }
.nd-app .nd-search { min-width: 0; flex: 1 1 0; }
.nd-app .nd-search input { width: 100%; min-width: 0; }
.nd-app .nd-topicons { flex: none; }
.nd-app .nd-logo { flex: none; }
@media (max-width: 900px) {
    .nd-app .nd-logo-t { display: none; }
    .nd-app .nd-topbar { gap: 10px; }
    .nd-app .nd-topicons { gap: 8px; }
}
/* The app parks a few widgets off-screen to the right (e.g. #whiBox). `clip`, unlike `hidden`, does not make the page a scroll container, so the pinned welcome card keeps working. */
html:has(body.nd-app), body.nd-app { overflow-x: clip; }

/* ── feed: spacing, post menu, editor, deal picker ─────────────────────────── */
.nd-app #ndFeedList { display: flex; flex-direction: column; gap: 16px; }
.nd-app .nd-post-h { position: relative; }
.nd-app .nd-post-h .nd-who { flex: 1; min-width: 0; }
.nd-app .nd-pmenu-wrap { position: relative; margin-left: auto; flex: none; }
.nd-app .nd-pmenu-btn { width: 34px; height: 34px; border-radius: 50%; border: 0; background: transparent; color: var(--nd-muted); display: grid; place-items: center; cursor: pointer; }
.nd-app .nd-pmenu-btn:hover, .nd-app .nd-pmenu-btn[aria-expanded="true"] { background: var(--nd-faint); color: var(--nd-ink); }
.nd-app .nd-pmenu-btn svg { width: 18px; height: 18px; }
.nd-app .nd-pmenu { position: absolute; right: 0; top: calc(100% + 4px); min-width: 210px; padding: 6px; background: var(--nd-surface); border: 1px solid var(--nd-line); border-radius: 12px; box-shadow: var(--nd-shadow-lift); z-index: 60; display: flex; flex-direction: column; }
.nd-app .nd-pmenu[hidden] { display: none; }
.nd-app .nd-pmenu button { border: 0; background: transparent; text-align: left; padding: 9px 12px; border-radius: 8px; font: 500 13px var(--nd-font); color: var(--nd-ink); cursor: pointer; width: 100%; }
.nd-app .nd-pmenu button:hover { background: var(--nd-faint); color: var(--nd-primary); }
.nd-app .nd-pmenu button.nd-danger { color: #dc2626; }
.nd-app .nd-pmenu button.nd-danger:hover { background: #fee2e2; color: #b91c1c; }
.nd-app .nd-pmenu hr { border: 0; border-top: 1px solid var(--nd-line); margin: 4px 0; }
.nd-app .nd-pinned { font-size: 10px; font-weight: 700; border-radius: 6px; padding: 1px 6px; background: var(--nd-chip); color: var(--nd-muted); margin-left: 4px; }
.nd-app .nd-cmts.nd-cm-off .nd-cmt-in, .nd-app .nd-cmts.nd-cm-off .nd-fd-note { display: none; }
.nd-app .nd-cmts.nd-cm-off::after { content: 'Comments are turned off for this post.'; font-size: 12px; color: var(--nd-muted); }
.nd-app .nd-edit-ta { width: 100%; border: 1px solid var(--nd-line); background: var(--nd-surface-2); color: var(--nd-ink); border-radius: 12px; padding: 10px 14px; font: inherit; font-size: 14px; resize: vertical; min-height: 84px; box-shadow: none; }
.nd-app .nd-edit-ta:focus { outline: 2px solid var(--nd-primary); outline-offset: 1px; }
.nd-app .nd-edit-bar { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.nd-app .nd-dealpick { margin-top: 4px; border: 1px solid var(--nd-line); border-radius: 12px; background: var(--nd-surface-2); overflow: hidden; }
.nd-app .nd-dealpick[hidden] { display: none; }
.nd-app .nd-dp-h { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--nd-line); font-size: 13px; }
.nd-app .nd-dealpick .nd-rows { max-height: 260px; overflow-y: auto; padding: 0 8px; }
.nd-app .nd-dealpick .nd-rows li { cursor: pointer; border-radius: 10px; padding: 10px 8px; }
.nd-app .nd-dealpick .nd-rows li:hover { background: var(--nd-faint); }
.nd-app .nd-dealpick .nd-rows li.nd-empty { cursor: default; }
.nd-app .nd-confirm { width: min(440px, 100%); }
.nd-app .nd-confirm h2 { font-size: 18px; }
.nd-app .nd-modal-f { justify-content: flex-end; }
.nd-app .nd-btn.nd-danger-btn { background: #dc2626; }

/* ── navbar breathing room: its content lines up with the sidebar's items (16px gutter + 12px item padding) ── */
body.nd-app.nd-shell .nd-topbar { padding-left: max(28px, env(safe-area-inset-left, 0px)); padding-right: max(28px, env(safe-area-inset-right, 0px)); }
@media (max-width: 900px) { body.nd-app.nd-shell .nd-topbar { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); } }

/* ── dialogs and toasts sit above everything, the fixed top bar and menus included ── */
.nd-app .nd-overlay { position: fixed; inset: 0; z-index: 2100; background: rgba(15,23,42,.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.nd-app .nd-toast { z-index: 2200; }
body.nd-modal-open { overflow: hidden !important; }

/* ── global search ── */
.nd-app .nd-search { position: relative; }
.nd-app .nd-spanel { left: 0; right: auto; top: calc(100% + 8px); width: max(100%, 460px); max-height: 70vh; display: flex; flex-direction: column; overflow: hidden; }
.nd-app .nd-spanel .nd-pop-b { flex: 1; overflow-y: auto; padding: 6px 0; }
.nd-app .nd-sgroup { padding: 8px 16px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--nd-muted); }
.nd-app .nd-srow { display: flex; align-items: center; gap: 12px; padding: 8px 16px; color: var(--nd-ink); text-decoration: none; }
.nd-app .nd-srow:hover, .nd-app .nd-srow.nd-sel, .nd-app .nd-sfoot.nd-sel { background: var(--nd-faint); }
.nd-app .nd-srow .nd-main { flex: 1; min-width: 0; }
.nd-app .nd-srow .nd-main b { display: block; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nd-app .nd-srow .nd-main span { display: block; font-size: 12px; color: var(--nd-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nd-app .nd-stag { font-size: 10px; font-weight: 700; background: var(--nd-chip); color: var(--nd-muted); border-radius: 6px; padding: 1px 7px; flex: none; }
.nd-app .nd-sfoot { display: block; text-align: center; padding: 12px; border-top: 1px solid var(--nd-line); color: var(--nd-primary); font-size: 13px; font-weight: 600; text-decoration: none; }
.nd-app .nd-sfoot[hidden] { display: none; }
@media (max-width: 900px) { .nd-app .nd-spanel { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; } }

/* ── the single-post page and comments ── */
.nd-app .nd-postpage { display: flex; flex-direction: column; gap: 16px; }
.nd-app .nd-back { display: inline-flex; align-items: center; gap: 6px; color: var(--nd-muted); font-weight: 600; font-size: 13px; text-decoration: none; }
.nd-app .nd-back:hover { color: var(--nd-primary); }
.nd-app .nd-pp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.nd-app .nd-pp-grid .nd-fd-col { min-width: 0; }
.nd-app .nd-pp-aside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 82px; }
@media (max-width: 1100px) { .nd-app .nd-pp-grid { grid-template-columns: 1fr; } .nd-app .nd-pp-aside { position: static; } }
.nd-app .nd-pp-author { display: flex; align-items: center; gap: 12px; }
.nd-app .nd-pp-author b { display: block; font-size: 15px; }
.nd-app .nd-pp-author span { font-size: 12px; color: var(--nd-muted); }
.nd-app .nd-pp-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.nd-app .nd-postpage .nd-post { padding: 22px 24px 8px; }
.nd-app .nd-postpage .nd-post-t { font-size: 15.5px; }
.nd-app .nd-ptime { color: inherit; text-decoration: none; }
.nd-app .nd-ptime:hover { color: var(--nd-primary); text-decoration: underline; }
.nd-app .nd-cmt { position: relative; }
.nd-app .nd-cmt .nd-bubble2 { flex: 1; }
.nd-app .nd-ctime { color: var(--nd-muted); font-size: 11px; font-weight: 400; margin-left: 8px; }
.nd-app .nd-cdel { border: 0; background: transparent; color: var(--nd-muted); font-size: 18px; line-height: 1; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; opacity: 0; transition: opacity .15s; flex: none; align-self: center; }
.nd-app .nd-cmt:hover .nd-cdel, .nd-app .nd-cdel:focus-visible { opacity: 1; }
.nd-app .nd-cdel:hover { background: #fee2e2; color: #dc2626; }
@media (hover: none) { .nd-app .nd-cdel { opacity: 1; } }

.nd-app .nd-pp-author .nd-who, .nd-app .nd-srow .nd-who { border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 600; flex: none; overflow: hidden; }
.nd-app .nd-pp-author .nd-who img, .nd-app .nd-srow .nd-who img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nd-app .nd-pp-author .nd-who { width: 52px; height: 52px; font-size: 17px; }

/* ── Light / System / Dark segmented switch (as in the console) ── */
.nd-app .nd-theme { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--nd-line); border-radius: 999px; background: var(--nd-faint); margin-right: 4px; }
.nd-app .nd-theme button { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--nd-muted); cursor: pointer; }
.nd-app .nd-theme button:hover { color: var(--nd-ink); }
.nd-app .nd-theme button.on { background: var(--nd-surface); color: var(--nd-primary); box-shadow: 0 1px 3px rgba(0,0,0,.18); }
@media (max-width: 600px) { .nd-app .nd-theme button { width: 26px; height: 26px; } }
body.nd-modal-open, body.nd-search-open { overflow: hidden !important; }

/* ── per-message actions ── */
.nd-app .nd-bubble .nd-mact { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(15,23,42,.08); color: inherit; cursor: pointer; opacity: 0; transition: opacity .12s; }
.nd-app .nd-bubble:hover .nd-mact, .nd-app .nd-bubble.nd-mopen .nd-mact, .nd-app .nd-bubble .nd-mact:focus-visible { opacity: .85; }
.nd-app .nd-bubble.nd-mine .nd-mact { background: rgba(255,255,255,.22); }
.nd-app .nd-bubble .nd-mact:hover { opacity: 1; }
@media (hover: none) { .nd-app .nd-bubble .nd-mact { opacity: .7; } }
body.nd-app .nd-mmenu { position: fixed; z-index: 1200; min-width: 190px; }
html:has(body.nd-search-open), html:has(body.nd-modal-open) { overflow: hidden !important; }
.nd-app .nd-spanel { overscroll-behavior: contain; }

/* ── post box editor ── */
.nd-app .nd-fd-row { align-items: flex-start; }
.nd-app .nd-ed { flex: 1; min-width: 0; border: 1px solid var(--nd-line); border-radius: 14px; background: var(--nd-surface-2); overflow: hidden; }
.nd-app .nd-ed:focus-within { border-color: var(--nd-primary); box-shadow: 0 0 0 3px rgba(237,86,0,.12); }
.nd-app .nd-ed-tb { display: flex; gap: 2px; padding: 4px 6px; border-bottom: 1px solid var(--nd-line); }
.nd-app .nd-ed-tb button { min-width: 30px; height: 28px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: var(--nd-muted); font: inherit; font-size: 13px; cursor: pointer; }
.nd-app .nd-ed-tb button:hover { background: var(--nd-faint); color: var(--nd-ink); }
.nd-app .nd-ed-tb button.on { background: var(--nd-chip); color: var(--nd-primary); }
.nd-app .nd-ed-box { min-height: 54px; max-height: 260px; overflow-y: auto; padding: 10px 12px; outline: none; font-size: 14px; line-height: 1.5; color: var(--nd-ink); word-break: break-word; }
.nd-app .nd-ed-box:empty::before { content: attr(data-ph); color: var(--nd-muted); pointer-events: none; }
.nd-app .nd-ed-box ul { margin: 4px 0 4px 20px; padding: 0; list-style: disc; }
.nd-app .nd-ed-box a { color: var(--nd-primary); }
.nd-app .nd-cmt-all { display: block; margin: 0 0 8px; font-size: 12.5px; font-weight: 600; color: var(--nd-muted); text-decoration: none; }
.nd-app .nd-cmt-all:hover { color: var(--nd-primary); }

/* ═══════════════════════════════════════════════════════════════════════════
   The new look for every other page (profile, settings, events, courses, marketplace, …).
   Their content is still the app's own; this skin gives it the new design's cards, type, buttons,
   inputs and dark mode, and only ever applies inside the new shell. Classic members never load it.
   ═══════════════════════════════════════════════════════════════════════════ */
body.nd-app.nd-shell #ajax_loading { color: var(--nd-ink); font-family: var(--nd-font); }
body.nd-app.nd-shell #ajax_loading :is(.wow_content, .panel, .card, .tag_sett_content) :is(h1, h2, h3, h4, h5, .bold) { color: var(--nd-ink); font-family: var(--nd-font); letter-spacing: -.01em; }
body.nd-app.nd-shell #ajax_loading :is(h1, h2, h3, h4, h5) { font-family: var(--nd-font); }
body.nd-app.nd-shell #ajax_loading .text-muted, body.nd-app.nd-shell #ajax_loading small { color: var(--nd-muted); }

/* cards */
body.nd-app.nd-shell #ajax_loading .wow_content, body.nd-app.nd-shell #ajax_loading .panel, body.nd-app.nd-shell #ajax_loading .card,
body.nd-app.nd-shell #ajax_loading .wo_page_hdng, body.nd-app.nd-shell #ajax_loading .tag_sett_content, body.nd-app.nd-shell #ajax_loading .post-wrapper-card {
    background: var(--nd-surface) !important; color: var(--nd-ink); border: 1px solid var(--nd-line) !important; border-radius: 16px !important; box-shadow: var(--nd-shadow) !important;
}
body.nd-app.nd-shell #ajax_loading .wow_content { padding-top: 4px; }

/* buttons */
body.nd-app.nd-shell #ajax_loading .btn-main, body.nd-app.nd-shell #ajax_loading .btn-primary, body.nd-app.nd-shell #ajax_loading .btn-main-lg {
    background: var(--nd-primary) !important; background-image: none !important; color: #fff !important; border: 0 !important; border-radius: 12px !important;
    font-weight: 600; box-shadow: none !important; text-shadow: none;
}
body.nd-app.nd-shell #ajax_loading .btn-main:hover, body.nd-app.nd-shell #ajax_loading .btn-primary:hover { filter: brightness(.94); }
body.nd-app.nd-shell #ajax_loading .btn-default, body.nd-app.nd-shell #ajax_loading .btn-secondary {
    background: var(--nd-surface) !important; color: var(--nd-ink) !important; border: 1px solid var(--nd-line) !important; border-radius: 12px !important; box-shadow: none !important;
}

/* forms */
body.nd-app.nd-shell #ajax_loading .form-control, body.nd-app.nd-shell #ajax_loading input[type=text], body.nd-app.nd-shell #ajax_loading input[type=email],
body.nd-app.nd-shell #ajax_loading input[type=password], body.nd-app.nd-shell #ajax_loading input[type=number], body.nd-app.nd-shell #ajax_loading input[type=search],
body.nd-app.nd-shell #ajax_loading textarea, body.nd-app.nd-shell #ajax_loading select {
    background: var(--nd-surface-2) !important; color: var(--nd-ink) !important; border: 1px solid var(--nd-line) !important; border-radius: 10px !important; box-shadow: none !important;
}
body.nd-app.nd-shell #ajax_loading .form-control:focus, body.nd-app.nd-shell #ajax_loading textarea:focus, body.nd-app.nd-shell #ajax_loading select:focus { border-color: var(--nd-primary) !important; box-shadow: 0 0 0 3px rgba(237,86,0,.12) !important; }
body.nd-app.nd-shell #ajax_loading .form-group label, body.nd-app.nd-shell #ajax_loading .control-label { color: var(--nd-muted); }
body.nd-app.nd-shell #ajax_loading .wow_form_fields { background: var(--nd-surface-2) !important; border-radius: 12px; }
body.nd-app.nd-shell #ajax_loading .wow_form_fields input, body.nd-app.nd-shell #ajax_loading .wow_form_fields select, body.nd-app.nd-shell #ajax_loading .wow_form_fields textarea { background: transparent !important; border: 0 !important; }

/* tables, lists, tabs, modals */
body.nd-app.nd-shell #ajax_loading table { color: var(--nd-ink); }
body.nd-app.nd-shell #ajax_loading .table > thead > tr > th, body.nd-app.nd-shell #ajax_loading .table > tbody > tr > td { border-color: var(--nd-line) !important; }
body.nd-app.nd-shell #ajax_loading .table-striped > tbody > tr:nth-of-type(odd) { background: var(--nd-faint); }
body.nd-app.nd-shell #ajax_loading .list-group-item { background: var(--nd-surface); color: var(--nd-ink); border-color: var(--nd-line); }
body.nd-app.nd-shell #ajax_loading .nav-tabs > li > a { color: var(--nd-muted); }
body.nd-app.nd-shell #ajax_loading .nav-tabs > li.active > a { color: var(--nd-primary); background: transparent; border-color: transparent transparent var(--nd-primary); }
body.nd-app.nd-shell #ajax_loading hr { border-color: var(--nd-line); }

/* the calendar */
body.nd-app.nd-shell #ajax_loading .fc { color: var(--nd-ink); }
body.nd-app.nd-shell #ajax_loading .fc th, body.nd-app.nd-shell #ajax_loading .fc td, body.nd-app.nd-shell #ajax_loading .fc-unthemed td, body.nd-app.nd-shell #ajax_loading .fc-unthemed th { border-color: var(--nd-line) !important; background: transparent; }
body.nd-app.nd-shell #ajax_loading .fc button, body.nd-app.nd-shell #ajax_loading .fc .fc-button { background: var(--nd-surface) !important; background-image: none !important; color: var(--nd-ink) !important; border: 1px solid var(--nd-line) !important; border-radius: 10px !important; box-shadow: none !important; text-shadow: none !important; }
body.nd-app.nd-shell #ajax_loading .fc .fc-today { background: rgba(237,86,0,.08) !important; }

/* settings: its own menu becomes a second column that sits beside the shell's sidebar */
body.nd-app.nd-shell #ajax_loading:has(.tag_sett_sidebar) { padding-left: 274px !important; }
body.nd-app.nd-shell .tag_sett_sidebar {
    left: calc(var(--nd-gutter) + 244px) !important; top: 82px !important; bottom: auto !important; width: 252px !important; max-height: calc(100vh - 98px) !important;
    background: var(--nd-surface) !important; border: 1px solid var(--nd-line); border-radius: 16px !important; box-shadow: var(--nd-shadow) !important; z-index: 1010 !important; padding: 8px 0 !important;
}
body.nd-app.nd-shell .tag_sett_sidebar > li > a { color: var(--nd-ink) !important; }
body.nd-app.nd-shell .tag_sett_sidebar > li.active > a { background: var(--nd-faint) !important; color: var(--nd-primary) !important; }
body.nd-app.nd-shell .tag_sett_sidebar > p.bold { color: var(--nd-muted) !important; }
body.nd-app.nd-shell #ajax_loading .wow_sett_content { padding: 3px 0 20px; }
@media (max-width: 900px) {
    body.nd-app.nd-shell #ajax_loading:has(.tag_sett_sidebar) { padding-left: 0 !important; }
    body.nd-app.nd-shell .tag_sett_sidebar { position: static !important; width: auto !important; max-height: none !important; margin-bottom: 14px !important; }
}

/* dark mode for pages whose own stylesheet assumes light */
body.nd-app.nd-dark.nd-shell #ajax_loading img:not([src*="avatar"]):not(.nd-keep) { filter: none; }
body.nd-app.nd-dark.nd-shell #ajax_loading .modal-content, body.nd-app.nd-dark.nd-shell #ajax_loading .dropdown-menu { background: var(--nd-surface); color: var(--nd-ink); border-color: var(--nd-line); }
body.nd-app.nd-dark.nd-shell #ajax_loading .wow_main_hdng, body.nd-app.nd-dark.nd-shell #ajax_loading p, body.nd-app.nd-dark.nd-shell #ajax_loading label, body.nd-app.nd-dark.nd-shell #ajax_loading span { color: inherit; }

/* ── message actions: the button sits OUTSIDE the bubble, so nothing in the layout moves on hover ── */
.nd-app .nd-bubble .nd-mact { top: 50%; right: auto; left: calc(100% + 6px); transform: translateY(-50%); background: var(--nd-faint); color: var(--nd-muted); opacity: 0; pointer-events: none; transition: opacity .15s ease; will-change: opacity; }
.nd-app .nd-bubble.nd-mine .nd-mact { left: auto; right: calc(100% + 6px); background: var(--nd-faint); }
.nd-app .nd-bubble:hover .nd-mact, .nd-app .nd-bubble.nd-mopen .nd-mact, .nd-app .nd-bubble .nd-mact:focus-visible { opacity: 1; pointer-events: auto; }
.nd-app .nd-bubble .nd-mact:hover { background: var(--nd-chip); color: var(--nd-ink); }
.nd-app .nd-bubble { transition: none; }
.nd-app .nd-msgs { overflow-x: clip; }
@media (hover: none) { .nd-app .nd-bubble .nd-mact { opacity: .75; pointer-events: auto; } }
@media (max-width: 640px) {
    .nd-app .nd-bubble { max-width: 82%; }
    .nd-app .nd-bubble .nd-mact { width: 28px; height: 28px; }
}
body.nd-app .nd-mmenu { max-width: calc(100vw - 16px); box-shadow: var(--nd-shadow-lift); }
body.nd-app .nd-mmenu.nd-sheet { left: 0 !important; right: 0 !important; top: auto !important; bottom: 0; width: 100%; max-width: none; min-width: 0; border-radius: 18px 18px 0 0; padding: 8px 8px calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 2150; animation: nd-sheet-up .18s ease-out; }
body.nd-app .nd-mmenu.nd-sheet button { padding: 14px 16px; font-size: 15px; }
.nd-sheet-bd { position: fixed; inset: 0; z-index: 2140; background: rgba(15,23,42,.45); }
@keyframes nd-sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── skeleton preloaders (instead of "Loading…") ── */
.nd-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nd-app .nd-sk { display: block; border-radius: 8px; background: linear-gradient(90deg, var(--nd-faint) 25%, var(--nd-chip) 37%, var(--nd-faint) 63%); background-size: 400% 100%; animation: nd-shimmer 1.3s ease infinite; }
.nd-app .nd-sk-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; list-style: none; }
.nd-app .nd-sk-av { width: 38px; height: 38px; border-radius: 50%; flex: none; }
.nd-app .nd-sk-lines { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.nd-app .nd-sk-l1 { height: 12px; width: 62%; }
.nd-app .nd-sk-l2 { height: 10px; width: 88%; }
.nd-app .nd-sk-h { height: 18px; width: 34%; }
.nd-app .nd-sk-block { height: 90px; border-radius: 12px; }
.nd-app .nd-sk-panel { display: flex; flex-direction: column; gap: 16px; }
.nd-app .nd-sk-card { display: flex; flex-direction: column; gap: 12px; padding: 20px; }
.nd-app .nd-sk-msgs { display: flex; flex-direction: column; gap: 12px; padding: 18px; }
.nd-app .nd-sk-b { height: 38px; border-radius: 16px; width: 55%; }
.nd-app .nd-sk-b1 { align-self: flex-start; } .nd-app .nd-sk-b2 { align-self: flex-end; width: 40%; } .nd-app .nd-sk-b3 { align-self: flex-end; width: 62%; }
@keyframes nd-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .nd-app .nd-sk { animation: none; } }

/* every page: while the theme's ajax navigation is fetching the next page, show a skeleton in place of the faded content */
body.nd-app.nd-shell #ajax_loading.opacity_start { opacity: 1 !important; pointer-events: none; position: relative; min-height: 70vh; }
body.nd-app.nd-shell #ajax_loading.opacity_start > * { visibility: hidden; }
body.nd-app.nd-shell #ajax_loading.opacity_start::before {
    content: ""; position: absolute; left: 0; right: 0; top: 24px; height: 520px; border-radius: 16px;
    background:
        linear-gradient(var(--nd-chip), var(--nd-chip)) 24px 28px / 34% 20px no-repeat,
        linear-gradient(var(--nd-faint), var(--nd-faint)) 24px 72px / calc(100% - 48px) 14px no-repeat,
        linear-gradient(var(--nd-faint), var(--nd-faint)) 24px 100px / 72% 14px no-repeat,
        linear-gradient(var(--nd-faint), var(--nd-faint)) 24px 150px / calc(100% - 48px) 150px no-repeat,
        linear-gradient(var(--nd-faint), var(--nd-faint)) 24px 330px / calc(50% - 32px) 150px no-repeat,
        linear-gradient(var(--nd-faint), var(--nd-faint)) calc(100% - 24px) 330px / calc(50% - 32px) 150px no-repeat,
        var(--nd-surface);
    border: 1px solid var(--nd-line); box-shadow: var(--nd-shadow); animation: nd-skpulse 1.2s ease-in-out infinite;
}
@keyframes nd-skpulse { 50% { opacity: .55; } }

/* ── replies ── */
.nd-app .nd-quote { display: block; width: 100%; text-align: left; border: 0; border-left: 3px solid var(--nd-primary); border-radius: 8px; background: rgba(15,23,42,.07); color: inherit; padding: 6px 10px; margin: 0 0 6px; cursor: pointer; font: inherit; }
.nd-app .nd-bubble.nd-mine .nd-quote { background: rgba(255,255,255,.2); border-left-color: rgba(255,255,255,.85); }
.nd-app .nd-quote b { display: block; font-size: 11.5px; font-weight: 700; opacity: .85; }
.nd-app .nd-quote span { display: block; font-size: 12.5px; opacity: .85; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.nd-app .nd-quote-gone { cursor: default; font-style: italic; opacity: .7; }
.nd-app .nd-replybar { display: flex; align-items: stretch; gap: 10px; padding: 8px 12px; margin: 0 16px; background: var(--nd-faint); border: 1px solid var(--nd-line); border-radius: 12px 12px 0 0; animation: nd-sheet-up .15s ease-out; }
.nd-app .nd-rb-line { width: 3px; border-radius: 3px; background: var(--nd-primary); flex: none; }
.nd-app .nd-rb-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nd-app .nd-rb-t b { font-size: 12px; color: var(--nd-primary); }
.nd-app .nd-rb-t span { font-size: 12.5px; color: var(--nd-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nd-app .nd-rb-x { border: 0; background: transparent; color: var(--nd-muted); font-size: 20px; line-height: 1; cursor: pointer; border-radius: 50%; width: 28px; align-self: center; height: 28px; }
.nd-app .nd-rb-x:hover { background: var(--nd-chip); color: var(--nd-ink); }
.nd-app .nd-bubble.nd-flash { animation: nd-flash 1.5s ease; }
@keyframes nd-flash { 0%, 60% { box-shadow: 0 0 0 3px rgba(237,86,0,.45); } 100% { box-shadow: 0 0 0 0 rgba(237,86,0,0); } }
.nd-app [data-rsvp].nd-done:hover { border-color: #dc2626; color: #dc2626; }
@media (max-width: 640px) {
    /* phones: the button lives inside the bubble's corner (space is reserved, so nothing moves), always visible */
    .nd-app .nd-bubble { padding-right: 34px; }
    .nd-app .nd-bubble .nd-mact, .nd-app .nd-bubble.nd-mine .nd-mact { left: auto; right: 6px; top: 8px; transform: none; opacity: .7; pointer-events: auto; background: transparent; }
}

/* the action dot stays reachable: an invisible bridge keeps the bubble "hovered" while the mouse travels to the button,
   and the button itself keeps the row active (it used to vanish the moment the pointer left the bubble) */
@media (min-width: 641px) {
    .nd-app .nd-bubble::after { content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: 48px; }
    .nd-app .nd-bubble.nd-mine::after { left: auto; right: 100%; }
    .nd-app .nd-bubble .nd-mact { pointer-events: auto; }
    .nd-app .nd-bubble .nd-mact:hover, .nd-app .nd-bubble .nd-mact:focus-visible { opacity: 1; }
}
@media (min-width: 641px) { .nd-app .nd-bubble .nd-mact { z-index: 2; } }

/* the three dots on each message are always visible (softer at rest, full on hover) */
.nd-app .nd-bubble .nd-mact { opacity: .55 !important; pointer-events: auto !important; }
.nd-app .nd-bubble:hover .nd-mact, .nd-app .nd-bubble.nd-mopen .nd-mact, .nd-app .nd-bubble .nd-mact:hover, .nd-app .nd-bubble .nd-mact:focus-visible { opacity: 1 !important; }
body.nd-app .nd-mmenu:not(.nd-sheet) { min-width: 0; width: max-content; max-width: 190px; padding: 4px; }
body.nd-app .nd-mmenu:not(.nd-sheet) button { padding: 8px 12px; font-size: 13px; white-space: nowrap; }


/* ── page banners: one look, the dashboard hero's — soft card with an orange glow instead of the navy→orange block ── */
body.nd-app.nd-shell { --site-secondary-color: color-mix(in srgb, var(--nd-primary) 72%, #000); }
body.nd-app.nd-shell #ajax_loading :is(.slm-hero, .vm-hero, .eva-header, .home-greeting-hero) {
    background: linear-gradient(135deg, var(--nd-surface) 0%, var(--nd-surface-2) 100%) !important; color: var(--nd-ink) !important;
    border: 1px solid var(--nd-line) !important; border-radius: 16px !important; box-shadow: var(--nd-shadow) !important; position: relative; overflow: hidden;
}
body.nd-app.nd-shell #ajax_loading :is(.slm-hero, .vm-hero, .eva-header, .home-greeting-hero)::after {
    content: ''; position: absolute; top: -60%; right: -10%; width: 320px; height: 320px; background: radial-gradient(circle, var(--nd-primary), transparent 68%); opacity: .12; pointer-events: none; border-radius: 50%;
}
body.nd-app.nd-shell #ajax_loading :is(.slm-hero, .vm-hero, .eva-header, .home-greeting-hero)::before { display: none; }
body.nd-app.nd-shell #ajax_loading :is(.slm-hero, .vm-hero, .eva-header, .home-greeting-hero) :is(h1, h2, h3, .title) { color: var(--nd-ink) !important; }
body.nd-app.nd-shell #ajax_loading :is(.slm-hero, .vm-hero, .eva-header, .home-greeting-hero) :is(p, .sub) { color: var(--nd-muted) !important; }
body.nd-app.nd-shell #ajax_loading .slm-hero-ic { background: var(--nd-chip) !important; } body.nd-app.nd-shell #ajax_loading .slm-hero-ic i { color: var(--nd-primary) !important; }
body.nd-app.nd-shell #ajax_loading .slm-wallet { background: var(--nd-faint) !important; border-color: var(--nd-line) !important; }
body.nd-app.nd-shell #ajax_loading .slm-wallet * { color: var(--nd-ink) !important; }
body.nd-app.nd-shell #ajax_loading .slm-wallet a, body.nd-app.nd-shell #ajax_loading .slm-wallet button { background: var(--nd-primary) !important; color: #fff !important; border: 0 !important; border-radius: 10px !important; }

/* hero actions: soft primary buttons instead of white-on-glass */
/* …except buttons that already draw themselves in the new design (the vendor marketplace's .vm-btn: a filled
   hub-colored button with white text, or a ghost one) — recoloring their text made the filled one unreadable. */
body.nd-app.nd-shell #ajax_loading :is(.home-greeting-hero, .eva-header, .vm-hero, .slm-hero) :is(a, button):not(.slm-wallet *):not(.vm-btn) { color: var(--nd-primary) !important; }
body.nd-app.nd-shell #ajax_loading .home-greeting-hero :is(a, button) { background: var(--nd-faint) !important; border: 1px solid var(--nd-line) !important; border-radius: 10px !important; }
body.nd-app.nd-shell #ajax_loading .home-greeting-hero :is(a, button):hover { background: var(--nd-chip) !important; }
/* the marketplace pages keep their own brand variables; point them at the hub's primary */
body.nd-app.nd-shell #ajax_loading .slm { --brand: var(--nd-primary); --brand2: color-mix(in srgb, var(--nd-primary) 72%, #000); }
body.nd-app.nd-shell #ajax_loading :is(.vm-btn, .vm-card a, .vm-view) { color: #fff !important; }

/* ── dark mode for the app's own pages (classes are set by dash-new-dark.js) ── */
body.nd-app.nd-dark .nd-dk-bg { background-color: var(--nd-surface) !important; }
body.nd-app.nd-dark .nd-dk-bg2 { background-color: var(--nd-surface-2) !important; }
body.nd-app.nd-dark .nd-dk-fg { color: var(--nd-ink) !important; }
body.nd-app.nd-dark .nd-dk-fg2 { color: var(--nd-muted) !important; }
body.nd-app.nd-dark .nd-dk-bd { border-color: var(--nd-line) !important; }
body.nd-app.nd-dark .cookie-consent, body.nd-app.nd-dark #cookie { color-scheme: light; }
body.nd-app.nd-dark #ajax_loading .filter-by-li > a, body.nd-app.nd-dark #ajax_loading .filter-by-li > span, body.nd-app.nd-dark #ajax_loading .filter-by-li > div { background-color: var(--nd-chip) !important; color: var(--nd-chip-ink) !important; box-shadow: none !important; }
body.nd-app.nd-dark #ajax_loading .filter-by-li.active > a { background-color: var(--nd-primary) !important; color: #fff !important; }

/* ═══════════════════════════ PROFILE ═══════════════════════════ */
body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) { padding: 0 !important; margin: 0 !important; }
body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) .container, body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) .container-fluid { width: auto !important; max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; }
body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) .tag_cover_sec_bg { display: none !important; }              /* the blurred full-bleed backdrop */
body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) .profile-container.tag_cover_bg { background: none !important; height: auto !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; position: relative; }
body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) .btn_goback { display: none !important; }

/* header = one card: cover on top, identity underneath */
body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) .profile-container .container { position: relative; }
body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) .hovercard { margin: 0 !important; height: auto !important; border: 0 !important; background: none !important; box-shadow: none !important; }
body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) .user-cover.cardheader, body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) .user-cover, body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) .tag_usr_prof_covr {
    height: 250px !important; min-height: 250px !important; padding: 0 !important; border-radius: 18px 18px 0 0 !important; overflow: hidden; background: var(--nd-chip) !important; box-shadow: none !important; margin: 0 !important; position: relative;
}
body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) .user-cover-reposition-container, body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) .user-cover-reposition-w { height: 100% !important; }
body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) #cover-image { width: 100% !important; height: 100% !important; object-fit: cover; }
body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) .user-cover::after { content: ''; position: absolute; inset: auto 0 0 0; height: 90px; background: linear-gradient(transparent, rgba(0,0,0,.28)); pointer-events: none; }
body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) .profile_cover { position: absolute; right: 14px; bottom: 14px; z-index: 5; display: flex; gap: 8px; }
body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) .profile_cover .btn { background: rgba(15,23,42,.62) !important; color: #fff !important; border: 0 !important; border-radius: 10px !important; backdrop-filter: blur(6px); }

body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) .tag_page_name_hdr {
    position: relative; background: var(--nd-surface) !important; border: 1px solid var(--nd-line) !important; border-top: 0 !important; border-radius: 0 0 18px 18px !important;
    box-shadow: var(--nd-shadow) !important; margin: 0 0 18px !important; padding: 0 28px 0 !important;
    display: grid !important; grid-template-columns: auto 1fr auto; grid-template-areas: "av info btns" "nav nav nav"; align-items: end; column-gap: 20px;
}
body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) .event-info-cont-small { display: contents !important; }
body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) .user-avatar { grid-area: av; position: relative !important; width: 128px !important; height: 128px !important; margin: -64px 0 14px !important; left: auto !important; top: auto !important; border: 5px solid var(--nd-surface) !important; border-radius: 50% !important; box-shadow: var(--nd-shadow); background: var(--nd-chip); }
body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) .user-avatar img[id^=updateImage] { width: 100% !important; height: 100% !important; border-radius: 50% !important; object-fit: cover; }
body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) .profile_avatar { position: absolute; right: -2px; bottom: 6px; }
body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) .event-info-cont-small > h3, body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) .event-info-cont-small > .badge, body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) .event-info-cont-small > .social-links { grid-column: 2; }
body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) h3 { margin: 0 !important; font-size: 24px !important; font-weight: 700 !important; letter-spacing: -.02em; color: var(--nd-ink) !important; padding: 18px 0 2px; }
body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) .badge { display: inline-block; font-size: 11px !important; font-weight: 600 !important; padding: 3px 10px !important; border-radius: 999px !important; margin-right: 6px; margin-bottom: 14px; color: #fff !important; }
body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) .wow_user_page_btns { grid-area: btns; position: static !important; top: auto !important; left: auto !important; margin: 0 !important; width: auto !important; height: auto !important; display: flex !important; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; padding: 0 0 16px; align-self: end; }
body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) .wow_user_page_btns .btn { border-radius: 12px !important; font-weight: 600; padding: 9px 16px !important; }
body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) .wow_user_page_btns .btn-default { background: var(--nd-surface) !important; border: 1px solid var(--nd-line) !important; color: var(--nd-ink) !important; }
body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) .user-bottom-nav { grid-area: nav; border-top: 1px solid var(--nd-line); margin: 0 -28px; padding: 0 20px; }
body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) .user-bottom-nav ul { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) .user-bottom-nav li a { display: block; padding: 14px 14px; font-weight: 600; font-size: 13.5px; color: var(--nd-muted) !important; border-bottom: 3px solid transparent; white-space: nowrap; text-decoration: none; }
body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) .user-bottom-nav li a:hover { color: var(--nd-ink) !important; }
body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) .user-bottom-nav li.active a, body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) .user-bottom-nav li a.active { color: var(--nd-primary) !important; border-bottom-color: var(--nd-primary); }

/* body: about column + feed */
body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) .row { margin-left: 0 !important; margin-right: 0 !important; display: flex; gap: 20px; align-items: flex-start; justify-content: flex-start; flex-wrap: nowrap; }
body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) .row > [class*="col-"] { float: none !important; padding: 0 !important; width: auto !important; max-width: none !important; }
body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) .row > .sidebar.rightcol { flex: 0 0 340px !important; order: 1; position: sticky !important; top: 82px !important; }
body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) .row > .middlecol { flex: 1 1 0 !important; min-width: 0; order: 2; }
body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) .row > .col-md-12, body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) .row > .col-lg-12 { flex: 1 1 100%; }
body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) .sidebar .wow_content, body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) .middlecol .wow_content { margin-bottom: 16px !important; }
body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) .tag_profile_search { background: var(--nd-surface-2) !important; border: 1px solid var(--nd-line) !important; border-radius: 12px !important; height: 40px; padding: 0 14px !important; color: var(--nd-ink) !important; }
@media (max-width: 1100px) {
    body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) .row { flex-wrap: wrap; }
    body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) .row > .sidebar.rightcol { flex: 1 1 100%; position: static; order: 2; }
    body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) .row > .middlecol { flex: 1 1 100%; order: 1; }
}
@media (max-width: 700px) {
    body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) .user-cover.cardheader, body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) .user-cover, body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) .tag_usr_prof_covr { height: 170px !important; min-height: 170px !important; }
    body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) .tag_page_name_hdr { grid-template-columns: 1fr; grid-template-areas: "av" "info" "btns" "nav"; padding: 0 16px !important; justify-items: start; }
    body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) .event-info-cont-small > h3, body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) .event-info-cont-small > .badge, body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) .event-info-cont-small > .social-links { grid-column: 1; }
    body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) .user-avatar { width: 104px !important; height: 104px !important; margin-top: -52px !important; }
    body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) .wow_user_page_btns { justify-content: flex-start; }
    body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) .user-bottom-nav { margin: 0 -16px; padding: 0 8px; }
}

body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) .row::before, body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) .row::after { display: none !important; }
@media (max-width: 700px) {
    body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) .wow_user_page_btns { width: 100% !important; flex-wrap: wrap !important; }
    body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) .wow_user_page_btns .btn { flex: 1 1 auto; justify-content: center; text-align: center; }
    body.nd-app.nd-shell #ajax_loading :is(.wo_user_profile, .wo_page_profile, .wo_group_profile) .user-bottom-nav { width: calc(100% + 32px); max-width: calc(100% + 32px); overflow: hidden; }
}

/* a banner found by dash-new-dark.js: the dashboard hero's look (soft card, orange glow) in place of the colour block */
body.nd-app.nd-shell #ajax_loading .nd-heroskin { background: linear-gradient(135deg, var(--nd-surface) 0%, var(--nd-surface-2) 100%) !important; background-image: linear-gradient(135deg, var(--nd-surface) 0%, var(--nd-surface-2) 100%) !important; color: var(--nd-ink) !important; border: 1px solid var(--nd-line) !important; border-radius: 16px !important; box-shadow: var(--nd-shadow) !important; position: relative; overflow: hidden; }
body.nd-app.nd-shell #ajax_loading .nd-heroskin::before { display: none !important; }
body.nd-app.nd-shell #ajax_loading .nd-heroskin::after { content: ''; position: absolute; top: -60%; right: -10%; width: 320px; height: 320px; background: radial-gradient(circle, var(--nd-primary), transparent 68%); opacity: .12; pointer-events: none; border-radius: 50%; }
body.nd-app.nd-shell #ajax_loading .nd-heroskin :is(h1, h2, h3, h4, .title) { color: var(--nd-ink) !important; }
body.nd-app.nd-shell #ajax_loading .nd-heroskin :is(p, small, .sub, .desc) { color: var(--nd-muted) !important; }

body.nd-app.nd-shell #ajax_loading .nd-heroskin *:not(svg):not(path):not(button):not(input):not(select):not(.btn):not([class*="btn"]):not(.nd-keep) { color: var(--nd-ink); }
body.nd-app.nd-shell #ajax_loading .nd-heroskin :is(p, small, .sub, .desc, [class*="sub"], [class*="desc"]) { color: var(--nd-muted) !important; }
body.nd-app.nd-shell #ajax_loading .nd-heroskin .nd-glass { background: var(--nd-faint) !important; border-color: var(--nd-line) !important; backdrop-filter: none !important; }
body.nd-app.nd-shell #ajax_loading .nd-heroskin .nd-glass :is(i, svg) { color: var(--nd-primary) !important; fill: var(--nd-primary); }

/* ── Feed: the classic feed's features in the portal's design ── */
.nd-app .nd-announce{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-left:3px solid var(--nd-primary)}
.nd-app .nd-announce-ic{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--nd-primary) 12%,transparent);font-size:16px}
.nd-app .nd-announce .nd-main{flex:1;min-width:0;font-size:14px;line-height:1.5}
.nd-app .nd-announce small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--nd-primary);margin-bottom:2px}
.nd-app .nd-announce-x{flex:none;width:30px;height:30px;border-radius:8px;border:0;background:var(--nd-chip);color:var(--nd-chip-ink);font-size:18px;line-height:1}
.nd-app .nd-upev{display:flex;gap:14px;align-items:center;padding:12px 16px;text-decoration:none;color:var(--nd-ink)}
.nd-app .nd-upev:hover{box-shadow:var(--nd-shadow-lift)}
.nd-app .nd-upev-d{width:50px;flex:none;border-radius:12px;overflow:hidden;text-align:center;background:color-mix(in srgb,var(--nd-primary) 10%,transparent)}
.nd-app .nd-upev-d small{display:block;background:var(--nd-primary);color:#fff;font-size:10px;font-weight:700;letter-spacing:.06em;padding:2px 0}
.nd-app .nd-upev-d b{display:block;font-size:19px;color:var(--nd-primary);padding:4px 0}
.nd-app .nd-upev .nd-main{flex:1;min-width:0;display:flex;flex-direction:column}
.nd-app .nd-upev .nd-main small{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--nd-primary)}
.nd-app .nd-upev .nd-main b{font-size:15px}
.nd-app .nd-upev .nd-main span{font-size:12px;color:var(--nd-muted)}
.nd-app .nd-rows .nd-main b a{color:inherit;text-decoration:none}
.nd-app .nd-rows .nd-main b a:hover{color:var(--nd-primary)}
.nd-app .nd-fd-filter{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
.nd-app .nd-fd-filter::-webkit-scrollbar{display:none}
.nd-app .nd-fd-filter .nd-chip{flex:none;padding:6px 13px;font-size:12px;cursor:pointer}
.nd-app .nd-feed-more{align-self:center}
.nd-app .nd-fd-live{color:#dc2626;text-decoration:none}
.nd-app .nd-fd-live i{width:8px;height:8px;border-radius:50%;background:#dc2626;display:inline-block}
.nd-app .nd-fdx{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--nd-line);border-radius:12px;background:var(--nd-surface-2)}
.nd-app .nd-fdx-poll{flex-direction:column;align-items:stretch}
.nd-app .nd-fdx input,.nd-app .nd-fdx select{flex:1;min-width:140px;border:1px solid var(--nd-line);background:var(--nd-surface);color:var(--nd-ink);border-radius:9px;padding:8px 10px;font-family:inherit;font-size:13px}
.nd-app #ndFdPollAns{display:flex;flex-direction:column;gap:6px}
/* attachments */
.nd-app .nd-post-img,.nd-app .nd-post-vid{width:100%;max-height:560px;object-fit:cover;border-radius:12px;background:#000;display:block}
.nd-app .nd-post-img{background:var(--nd-surface-2);object-fit:contain}
.nd-app .nd-post-sticker{max-width:160px;max-height:160px}
.nd-app .nd-album{display:grid;gap:4px;border-radius:12px;overflow:hidden}
.nd-app .nd-album-2{grid-template-columns:1fr 1fr}
.nd-app .nd-album-3{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr}
.nd-app .nd-album-3 .nd-album-i:first-child{grid-row:span 2}
.nd-app .nd-album-4{grid-template-columns:1fr 1fr}
.nd-app .nd-album-i{position:relative;display:block;aspect-ratio:1/1;background:var(--nd-surface-2)}
.nd-app .nd-album-1 .nd-album-i{aspect-ratio:auto}
.nd-app .nd-album-i img{width:100%;height:100%;object-fit:cover;display:block}
.nd-app .nd-album-more{position:absolute;inset:0;display:grid;place-items:center;background:rgba(15,23,42,.55);color:#fff;font-size:24px;font-weight:700}
.nd-app .nd-post-audio{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border:1px solid var(--nd-line);border-radius:12px;background:var(--nd-surface-2);font-size:13px}
.nd-app .nd-post-audio audio{width:100%}
.nd-app .nd-post-file,.nd-app .nd-post-link{display:flex;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--nd-line);border-radius:12px;background:var(--nd-surface-2);text-decoration:none;color:var(--nd-ink)}
.nd-app .nd-post-file:hover,.nd-app .nd-post-link:hover{border-color:color-mix(in srgb,var(--nd-primary) 35%,transparent)}
.nd-app .nd-file-ic{width:44px;height:44px;flex:none;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--nd-primary) 12%,transparent);color:var(--nd-primary);font-size:10.5px;font-weight:700}
.nd-app .nd-post-file .nd-main,.nd-app .nd-post-link .nd-main{display:flex;flex-direction:column;min-width:0;gap:2px}
.nd-app .nd-post-file .nd-main b,.nd-app .nd-post-link .nd-main b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nd-app .nd-post-file .nd-main span,.nd-app .nd-post-link .nd-main span{font-size:12px;color:var(--nd-muted)}
.nd-app .nd-post-link{align-items:stretch;padding:0;overflow:hidden}
.nd-app .nd-post-link img{width:120px;flex:none;object-fit:cover}
.nd-app .nd-post-link .nd-main{padding:12px 14px}
.nd-app .nd-post-link small{font-size:11px;color:var(--nd-muted)}
.nd-app .nd-post-embed{position:relative;padding-top:56.25%;border-radius:12px;overflow:hidden;background:#000}
.nd-app .nd-post-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.nd-app .nd-post-map{border:1px solid var(--nd-line);border-radius:12px;overflow:hidden}
.nd-app .nd-post-map iframe{width:100%;height:220px;border:0;display:block}
.nd-app .nd-post-map a{display:block;padding:8px 12px;font-size:12.5px;font-weight:600;color:var(--nd-ink);text-decoration:none;background:var(--nd-surface-2)}
.nd-app .nd-post-live{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:8px 14px;border-radius:10px;background:#fef2f2;color:#b91c1c;font-size:13px;font-weight:700;text-decoration:none}
.nd-app .nd-post-live i{width:8px;height:8px;border-radius:50%;background:#dc2626;animation:ndPulse 1.4s infinite}
@keyframes ndPulse{50%{opacity:.3}}
.nd-app .nd-post-color{min-height:180px;display:grid;place-items:center;text-align:center;font-size:22px;font-weight:700;padding:24px;border-radius:12px}
.nd-app .nd-post-color a{color:inherit;text-decoration:underline}
.nd-app .nd-activity{font-size:12.5px;font-weight:500;color:var(--nd-muted)}
.nd-app .nd-shared{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border:1px solid var(--nd-line);border-radius:12px;text-decoration:none;color:var(--nd-ink)}
.nd-app .nd-shared-h{display:flex;align-items:center;gap:8px;font-size:13px}
.nd-app .nd-shared-h small{color:var(--nd-muted)}
/* polls */
.nd-app .nd-poll{display:flex;flex-direction:column;gap:6px}
.nd-app .nd-poll-o{position:relative;display:flex;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--nd-line);border-radius:10px;background:var(--nd-surface);color:var(--nd-ink);font-size:13.5px;font-weight:600;text-align:left;overflow:hidden;cursor:pointer}
.nd-app .nd-poll-o[disabled]{cursor:default}
.nd-app .nd-poll-o:not([disabled]):hover{border-color:var(--nd-primary)}
.nd-app .nd-poll-bar{position:absolute;inset:0 auto 0 0;background:color-mix(in srgb,var(--nd-primary) 14%,transparent);transition:width .4s}
.nd-app .nd-poll-o.nd-mine{border-color:var(--nd-primary)}
.nd-app .nd-poll-t,.nd-app .nd-poll-p{position:relative}
.nd-app .nd-poll-n{font-size:12px;color:var(--nd-muted)}
/* reactions */
.nd-app .nd-rx-wrap{flex:1;position:relative;display:flex}
.nd-app .nd-rx-wrap > [data-react]{flex:1}
.nd-app .nd-rx-pick{position:absolute;bottom:calc(100% + 6px);left:0;display:flex;gap:2px;padding:6px;border-radius:30px;background:var(--nd-surface);box-shadow:var(--nd-shadow-lift);border:1px solid var(--nd-line);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .15s,transform .15s,visibility .15s;z-index:5}
.nd-app .nd-rx-wrap:hover .nd-rx-pick,.nd-app .nd-rx-wrap.nd-open .nd-rx-pick,.nd-app .nd-rx-wrap:focus-within .nd-rx-pick{opacity:1;visibility:visible;transform:none;transition-delay:.25s}
.nd-app .nd-post-a .nd-rx-pick button{flex:none;width:38px;height:38px;padding:0;font-size:22px;border-radius:50%;justify-content:center;transition:transform .12s}
.nd-app .nd-post-a .nd-rx-pick button:hover{transform:scale(1.25);background:transparent}
/* sidebar */
.nd-app .nd-pro{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 8px}
.nd-app .nd-pro-u{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:var(--nd-ink);font-size:12px;font-weight:600;text-align:center;min-width:0}
.nd-app .nd-pro-u span:last-child{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nd-app .nd-pro-up{display:block;margin-top:12px;padding:10px 12px;border-radius:10px;border:1px dashed color-mix(in srgb,var(--nd-primary) 45%,transparent);color:var(--nd-primary);font-size:12.5px;font-weight:600;text-align:center;text-decoration:none}

/* ── Events tab: month calendar (view-only) ── */
.nd-app .nd-ev-wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
@media (max-width:1100px){.nd-app .nd-ev-wrap{grid-template-columns:1fr}}
.nd-app .nd-cal{transition:opacity .15s}
.nd-app .nd-cal-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.nd-app .nd-cal-h h3{font-size:18px;font-weight:700;margin:0}
.nd-app .nd-cal-nav{display:flex;align-items:center;gap:6px}
.nd-app .nd-cal-arrow{width:34px;height:34px;border-radius:10px;border:1px solid var(--nd-line);background:var(--nd-surface);color:var(--nd-ink);font-size:20px;line-height:1;display:grid;place-items:center}
.nd-app .nd-cal-arrow:hover{border-color:var(--nd-primary);color:var(--nd-primary)}
.nd-app .nd-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border:1px solid var(--nd-line);border-radius:14px;overflow:hidden;background:var(--nd-line);gap:1px}
.nd-app .nd-cal-wd{background:var(--nd-surface-2);padding:8px 6px;font-size:11px;font-weight:700;color:var(--nd-muted);text-transform:uppercase;letter-spacing:.05em;text-align:center}
.nd-app .nd-cal-day{background:var(--nd-surface);min-height:104px;padding:6px;display:flex;flex-direction:column;gap:3px;cursor:pointer;min-width:0}
.nd-app .nd-cal-day:hover{background:var(--nd-surface-2)}
.nd-app .nd-cal-out{background:var(--nd-surface-2)}
.nd-app .nd-cal-out .nd-cal-n{opacity:.45}
.nd-app .nd-cal-n{font-size:12.5px;font-weight:600;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;flex:none}
.nd-app .nd-cal-today .nd-cal-n{background:var(--nd-primary);color:#fff}
.nd-app .nd-cal-sel{box-shadow:inset 0 0 0 2px var(--nd-primary)}
.nd-app .nd-cal-ev{display:block;width:100%;text-align:left;border:0;border-radius:6px;padding:3px 6px;font-size:11.5px;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:color-mix(in srgb,var(--nd-primary) 13%,transparent);color:var(--nd-ink);cursor:pointer}
.nd-app .nd-cal-ev i{font-style:normal;color:var(--nd-primary);font-weight:700}
.nd-app .nd-cal-ev:hover{background:color-mix(in srgb,var(--nd-primary) 22%,transparent)}
.nd-app .nd-cal-live{box-shadow:inset 3px 0 0 #dc2626}
.nd-app .nd-cal-past .nd-cal-ev{opacity:.6}
.nd-app .nd-cal-more{border:0;background:transparent;color:var(--nd-muted);font-size:11px;font-weight:600;text-align:left;padding:0 6px;cursor:pointer}
.nd-app .nd-cal-dots{display:none;gap:3px;justify-content:center;margin-top:auto}
.nd-app .nd-cal-dots i{width:5px;height:5px;border-radius:50%;background:var(--nd-primary)}
.nd-app .nd-cal-list{margin-top:16px}
.nd-app .nd-cal-list-h{font-size:13px;font-weight:700;color:var(--nd-muted);margin-bottom:4px}
.nd-app .nd-cal-li{cursor:pointer}
.nd-app .nd-cal-time{width:64px;flex:none;font-size:13px;font-weight:700;color:var(--nd-primary);display:flex;flex-direction:column}
.nd-app .nd-cal-time small{font-size:10.5px;font-weight:600;color:var(--nd-muted)}
@media (max-width:760px){
.nd-app .nd-cal-day{min-height:52px;align-items:center;padding:4px 2px}
.nd-app .nd-cal-ev,.nd-app .nd-cal-more{display:none}
.nd-app .nd-cal-dots{display:flex}
.nd-app .nd-cal-wd{font-size:10px;padding:6px 2px}
}
/* event popup */
.nd-app .nd-ev-modal{padding:0;overflow:hidden;max-width:520px;width:calc(100% - 32px)}
.nd-app .nd-ev-cover{width:100%;max-height:220px;object-fit:cover;display:block}
.nd-app .nd-ev-body{padding:20px 22px}
.nd-app .nd-ev-body h2{font-size:19px;margin:6px 0 4px}
.nd-app .nd-ev-tags{display:flex;gap:6px;flex-wrap:wrap}
.nd-app .nd-ev-tag{font-size:10.5px;font-weight:700;border-radius:6px;padding:2px 8px;background:var(--nd-chip);color:var(--nd-chip-ink)}
.nd-app .nd-ev-tag-live{background:#fef2f2;color:#b91c1c}
.nd-app .nd-ev-when{font-size:13.5px;font-weight:600;color:var(--nd-primary);margin:0 0 10px}
.nd-app .nd-ev-about{font-size:13.5px;line-height:1.55;color:var(--nd-muted);white-space:pre-line;max-height:200px;overflow:auto;margin:0 0 14px}
.nd-app .nd-ev-modal .nd-modal-f{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.nd-app .nd-evpage{display:flex;flex-direction:column;gap:18px}
.nd-app .nd-evpage-h{align-items:flex-start}
.nd-app .nd-evpage-h h2{display:flex;align-items:center;gap:10px;margin:0 0 4px;font-size:22px}
.nd-app .nd-evpage-h h2 svg{width:22px;height:22px;color:var(--nd-primary)}
.nd-app .nd-ev-modal{position:relative;gap:0}
.nd-app .nd-ev-band{height:84px;background:linear-gradient(135deg,var(--nd-secondary),var(--nd-primary))}
.nd-app .nd-ev-x{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;border:0;background:rgba(15,23,42,.55);color:#fff;font-size:20px;line-height:1;display:grid;place-items:center}
.nd-app .nd-ev-where{font-size:13px;color:var(--nd-muted);margin:-4px 0 10px}
.nd-app .nd-ev-where a{color:var(--nd-ink);font-weight:600}
.nd-app .nd-ev-acts{display:flex;gap:8px;flex-wrap:wrap}
.nd-app .nd-ev-lock{display:flex;flex-direction:column;gap:6px;width:100%;padding:14px 16px;border-radius:12px;background:#fffbeb;border:1px solid #fcd34d;color:#92400e;font-size:13px}
.nd-app .nd-ev-lock .nd-btn{align-self:flex-start}

/* ── Courses: list + player (view-only; created in the admin Courses App) ── */
.nd-app .nd-copage{display:flex;flex-direction:column;gap:18px}
.nd-app .nd-co-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px}
.nd-app .nd-co-card{display:flex;flex-direction:column;overflow:hidden;padding:0;transition:transform .15s ease,box-shadow .15s ease}
.nd-app .nd-co-card:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(15,23,42,.10)}
.nd-app .nd-co-cover{position:relative;display:grid;place-items:center;aspect-ratio:16/9;color:rgba(255,255,255,.85);overflow:hidden;border-bottom:1px solid var(--nd-line,rgba(15,23,42,.08))}
/* Covers are often designed graphics with text on them, so show the whole image
   (contain) and let a blurred copy of it fill the 16:9 frame behind. */
.nd-app .nd-co-cover img{position:absolute;inset:0;width:100%;height:100%}
.nd-app .nd-co-cover .nd-co-fill{object-fit:cover;filter:blur(18px) saturate(1.1);transform:scale(1.2);opacity:.55}
.nd-app .nd-co-cover .nd-co-img{object-fit:contain}
.nd-app .nd-co-cover svg{width:44px;height:44px}
.nd-app .nd-co-cover[aria-disabled="true"]{pointer-events:none}
.nd-app .nd-co-badge{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.02em;border-radius:20px;padding:3px 10px;background:var(--nd-chip);color:var(--nd-primary)}
.nd-app .nd-co-lock{background:rgba(15,23,42,.8);color:#fff}
.nd-app .nd-co-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.nd-app .nd-co-body h3{font-size:16px;margin:0;line-height:1.35}
.nd-app .nd-co-body h3 a{color:inherit;text-decoration:none}
.nd-app .nd-co-body h3 a:hover{color:var(--nd-primary)}
.nd-app .nd-co-body p{font-size:13px;color:var(--nd-muted);margin:0;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.nd-app .nd-co-meta{display:flex;gap:6px;font-size:12px;color:var(--nd-muted);font-weight:600}
.nd-app .nd-co-meta span+span::before{content:"·";margin-right:6px}
.nd-app .nd-co-foot{margin-top:auto;padding-top:6px;display:flex;flex-direction:column;gap:8px}
.nd-app .nd-co-foot .nd-btn{align-self:stretch;justify-content:center;text-align:center}
.nd-app .nd-co-prog{height:7px;border-radius:20px;background:var(--nd-chip);overflow:hidden}
.nd-app .nd-co-prog span{display:block;height:100%;background:var(--nd-primary);border-radius:20px}
.nd-app .nd-co-pct{font-size:11.5px;color:var(--nd-muted);font-weight:600}
.nd-app .nd-co-locked{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.nd-app .nd-co-locked h2{margin:0;font-size:20px}
/* player */
.nd-app .nd-lv{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
@media (max-width:1000px){.nd-app .nd-lv{grid-template-columns:1fr}.nd-app .nd-lv-side{order:-1}}
.nd-app .nd-lv-main{padding:0;overflow:hidden}
.nd-app .nd-lv-main .nd-post-embed,.nd-app .nd-lv-video{border-radius:0}
.nd-app .nd-lv-video{width:100%;display:block;background:#000;max-height:520px}
.nd-app .nd-lv-cover{width:100%;max-height:300px;object-fit:cover;display:block}
.nd-app .nd-lv-body{padding:20px 24px 24px;display:flex;flex-direction:column;gap:14px}
.nd-app .nd-lv-body h1{font-size:22px;margin:0;letter-spacing:-.01em}
.nd-app .nd-lv-crumb{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--nd-primary)}
.nd-app .nd-lv-text{font-size:14.5px;line-height:1.7;color:var(--nd-ink);overflow-wrap:anywhere}
.nd-app .nd-lv-text img,.nd-app .nd-lv-text iframe,.nd-app .nd-lv-text video{max-width:100%;height:auto;border-radius:10px}
.nd-app .nd-lv-text a{color:var(--nd-primary)}
.nd-app .nd-lv-pn{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding-top:14px;border-top:1px solid var(--nd-line)}
.nd-app .nd-lv-pn .nd-btn{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nd-app .nd-lv-side{padding:0;overflow:hidden;position:sticky;top:76px}
@media (max-width:1000px){.nd-app .nd-lv-side{position:static}}
.nd-app .nd-lv-hero{position:relative;padding:18px;color:#fff;min-height:110px;display:flex;align-items:flex-end;overflow:hidden}
.nd-app .nd-lv-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.35}
.nd-app .nd-lv-hero > div{position:relative;display:flex;flex-direction:column;gap:8px;width:100%}
.nd-app .nd-lv-hero b{font-size:16px}
.nd-app .nd-lv-hero small{font-size:12px;opacity:.9}
.nd-app .nd-lv-hero .nd-co-prog{background:rgba(255,255,255,.3)}
.nd-app .nd-lv-hero .nd-co-prog span{background:#fff}
.nd-app .nd-lv-nav{max-height:calc(100vh - 260px);overflow:auto;padding:6px 0}
@media (max-width:1000px){.nd-app .nd-lv-nav{max-height:none}}
.nd-app .nd-lv-m summary{list-style:none;cursor:pointer;padding:12px 16px;display:flex;flex-direction:column;gap:2px;border-bottom:1px solid var(--nd-line)}
.nd-app .nd-lv-m summary::-webkit-details-marker{display:none}
.nd-app .nd-lv-m summary b{font-size:13.5px}
.nd-app .nd-lv-m summary small{font-size:11.5px;color:var(--nd-muted)}
.nd-app .nd-lv-l{display:flex;gap:10px;align-items:center;padding:10px 16px 10px 20px;font-size:13px;color:var(--nd-ink);text-decoration:none;border-left:3px solid transparent}
.nd-app .nd-lv-l:hover{background:var(--nd-faint)}
.nd-app .nd-lv-l.nd-on{background:color-mix(in srgb,var(--nd-primary) 9%,transparent);border-left-color:var(--nd-primary);font-weight:600}
.nd-app .nd-lv-st{width:18px;height:18px;flex:none;border-radius:50%;border:2px solid var(--nd-line);display:grid;place-items:center;font-style:normal;font-size:10px}
.nd-app .nd-lv-done{background:var(--nd-good);border-color:var(--nd-good);color:#fff}
.nd-app .nd-lv-lock{border:0;font-size:12px}
.nd-app .nd-lv-empty{padding:10px 16px}
/* the shared LMS panel, in the portal's colors */
.nd-app .lms-panel{background:var(--nd-surface-2) !important;border-color:var(--nd-line) !important;box-shadow:none !important;color:var(--nd-ink);font-family:inherit !important;--lms-primary:var(--nd-primary) !important;margin:0 !important}
.nd-app .lms-panel [style*="color:#64748b"]{color:var(--nd-muted) !important}
.nd-app .lms-panel [style*="background:#eef0f4"]{background:var(--nd-chip) !important}
.nd-app .lms-panel #lmsResume{background:var(--nd-chip) !important;color:var(--nd-ink) !important}
.nd-app .lms-panel input,.nd-app .lms-panel textarea,.nd-app .lms-panel select{background:var(--nd-surface) !important;color:var(--nd-ink) !important;border-color:var(--nd-line) !important}
.nd-app .nd-fd-email{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--nd-muted);cursor:pointer;align-self:flex-start}
.nd-app .nd-fd-email input{accent-color:var(--nd-primary);width:16px;height:16px}
.nd-app .nd-pro-u .nd-who{border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:600;flex:none;position:relative;overflow:hidden;box-shadow:0 0 0 2px var(--nd-surface),0 0 0 4px color-mix(in srgb,var(--nd-primary) 35%,transparent)}
.nd-app .nd-pro-u .nd-who img{width:100%;height:100%;object-fit:cover}

/* ── A left-menu page shown inside the dashboard (body.nd-embed, in the dashboard's frame) ── */
body.nd-app.nd-shell.nd-embed { padding-top: 0 !important; background: var(--nd-bg); }
body.nd-app.nd-shell.nd-embed > header, body.nd-app.nd-shell.nd-embed .nd-topbar, body.nd-app.nd-shell.nd-embed .nd-side, body.nd-app.nd-shell.nd-embed .nd-scrim { display: none !important; }
/* The window around the frame already shows these once — never a second cookie bar or install prompt inside it. */
body.nd-app.nd-shell.nd-embed .cc-window, body.nd-app.nd-shell.nd-embed .cc-revoke, body.nd-app.nd-shell.nd-embed #install-modal,
body.nd-app.nd-shell.nd-embed #install-btn-mobile, body.nd-app.nd-shell.nd-embed #mylahRailShow, body.nd-app.nd-shell.nd-embed #mylahRail { display: none !important; }
/* The frame takes the page's height, so nothing in it may size itself from the frame (it would grow forever). */
body.nd-app.nd-shell.nd-embed, body.nd-app.nd-shell.nd-embed #ajax_loading.tag_content { min-height: 0 !important; }
body.nd-app.nd-shell.nd-embed { overflow: hidden; }
/* The frame is the page's full height, so dialogs open in the part of it the member is looking at
   (--nd-vt / --nd-vh are set by the dashboard as it scrolls). */
body.nd-app.nd-shell.nd-embed :is(.modal, .swal-overlay, .swal2-container, .sweet-overlay) { top: var(--nd-vt, 0px) !important; bottom: auto !important; height: var(--nd-vh, 100vh) !important; }
body.nd-app.nd-shell.nd-embed .sweet-alert { top: calc(var(--nd-vt, 0px) + var(--nd-vh, 100vh) / 2) !important; }
body.nd-app.nd-shell.nd-embed #ajax_loading.tag_content { margin: 0 !important; padding: 0 4px 24px !important; max-width: none !important; width: auto !important; }
/* the frame in the dashboard */
.nd-app .nd-embed-wrap { display: flex; flex-direction: column; gap: 10px; }
.nd-app .nd-embed-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.nd-app .nd-embed-bar h3 { margin: 0; font-size: 17px; display: flex; align-items: center; gap: 8px; }
.nd-app .nd-embed-bar h3 svg { width: 18px; height: 18px; color: var(--nd-primary); }
/* No box around the page: the frame is as tall as the page in it (fitFrame in nd/dashboard.phtml), so it reads and
   scrolls as part of the dashboard. The fixed height is only the fallback until the page has loaded. */
.nd-app .nd-embed-frame { width: 100%; height: calc(100vh - 140px); min-height: 560px; border: 0; border-radius: 0; background: transparent; display: block; overflow: hidden; }

/* ── Overview: the member cards the hub owner picked (admin-cp/hub-dashboard, by ICP), in the portal's colours ── */
.nd-app .hdash.hdash-nd {
    --hd-surface: var(--nd-surface); --hd-surface-2: var(--nd-surface-2); --hd-line: var(--nd-line);
    --hd-ink: var(--nd-ink); --hd-muted: var(--nd-muted); --hd-faint: var(--nd-faint);
    --hd-shadow: var(--nd-shadow); --hd-shadow-lift: var(--nd-shadow-lift);
    --hd-r: 16px; --hd-r-sm: 10px; --hd-gap: 18px; --hd-cardgap: 16px;
    font-family: var(--nd-font); color: var(--nd-ink); padding: 0; margin: 0; max-width: none; background: transparent;
}
.nd-app .hdash.hdash-nd .hw-grid { margin-bottom: 0; }
.nd-app .hdash.hdash-nd .hw { border-color: var(--nd-line); }
.nd-app .hdash.hdash-nd a { color: inherit; }
.nd-app .hdash.hdash-nd + .nd-up { margin-top: 18px; }
body.nd-app.nd-shell.nd-embed .tag_live_layout { top: 0; left: 0; right: 0; padding: 0 4px 8px; }

/* SweetAlert (swal 2.x) confirm popups — delete prompts etc. render on <body>, so they get the hub skin here */
body.nd-app .swal-overlay { background-color: rgba(8, 10, 14, .55); }
body.nd-app .swal-modal { background: var(--nd-surface); border: 1px solid var(--nd-line); border-radius: 18px; box-shadow: var(--nd-shadow-lift); font-family: var(--nd-font); padding-top: 8px; }
body.nd-app .swal-title { color: var(--nd-ink); font-family: var(--nd-font); font-size: 19px; font-weight: 700; line-height: 1.35; padding: 14px 24px 0; }
body.nd-app .swal-title:not(:last-child) { margin-bottom: 8px; }
body.nd-app .swal-text { color: var(--nd-muted); font-family: var(--nd-font); font-size: 14px; text-align: center; display: block; margin: 0 auto; padding: 0 24px; }
body.nd-app .swal-footer { text-align: center; margin-top: 18px; padding: 14px 18px 18px; border-top: 1px solid var(--nd-line); background: transparent; }
body.nd-app .swal-button-container { margin: 4px; }
body.nd-app .swal-button { font-family: var(--nd-font); background: linear-gradient(135deg, var(--nd-secondary), var(--nd-primary)) !important; color: #fff !important; border: 0; border-radius: 10px; font-size: 13.5px; font-weight: 600; padding: 10px 22px; box-shadow: none !important; text-shadow: none; }
body.nd-app .swal-button:not([disabled]):hover { filter: brightness(1.05); }
body.nd-app .swal-button:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--nd-primary) 28%, transparent) !important; }
body.nd-app .swal-button--cancel { background: var(--nd-surface) !important; color: var(--nd-chip-ink) !important; border: 1px solid var(--nd-line); }
body.nd-app .swal-button--cancel:not([disabled]):hover { background: var(--nd-surface-2) !important; filter: none; }
body.nd-app .swal-icon { margin-top: 18px; }
body.nd-app .swal-icon--warning { border-color: color-mix(in srgb, var(--nd-primary) 45%, transparent); animation: none; }
body.nd-app .swal-icon--warning__body, body.nd-app .swal-icon--warning__dot { background-color: var(--nd-primary); animation: none; }
body.nd-app .swal-icon--success { border-color: color-mix(in srgb, var(--nd-primary) 45%, transparent); }
body.nd-app .swal-icon--success__line { background-color: var(--nd-primary); }
body.nd-app .swal-icon--success__ring { border-color: color-mix(in srgb, var(--nd-primary) 25%, transparent); }
body.nd-app .swal-icon--success::before, body.nd-app .swal-icon--success::after, body.nd-app .swal-icon--success__hide-corners { background: var(--nd-surface); }
body.nd-app .swal-content__input, body.nd-app .swal-content__textarea { background: var(--nd-surface); color: var(--nd-ink); border: 1px solid var(--nd-line); border-radius: 10px; }