/* DHProduct Investor Portal — own stylesheet, shares no file with dhp-pos-portal.css.
   Palette below is copied verbatim from the theme's own portal (assets/css/dhp-pos-portal.css)
   so this reads as the same product, not a bolted-on extra. */

:root{
  --bg:#0d1411; --surface:#121b16; --surface-2:#16211b; --border:#1e2c24;
  --text:#e9efe9; --text-muted:#9db0a4;
  --accent:#22c55e; --accent-dim:#16a34a; --accent-ink:#052b13;
  --warn:#f59e0b; --danger:#ef4444; --danger-ink:#2a0d04; --info:#38bdf8;
  /* Shell chrome — same deep green + wheat-gold the POS portal uses. */
  --brand:#2e7d32; --brand-2:#1b5e20;
  --sidebar-bg:#10201a; --sidebar-bg-2:#0b1712;
  --gold:#d9a92e;
  --primary-rgb:63,155,70;
  --font-body:'Inter','Segoe UI','Noto Sans Bengali','Hind Siliguri',system-ui,-apple-system,sans-serif;
  --font-display:'Outfit','Inter',sans-serif;
  --radius:12px;
}
:root[data-theme="light"]{
  --bg:#f2f6f1; --surface:#ffffff; --surface-2:#e9f0e8; --border:#dbe5de;
  --text:#17231b; --text-muted:#506357;
  --accent:#16a34a; --accent-dim:#15803d; --accent-ink:#eafff2;
  --warn:#b07d0a; --danger:#dc2626; --danger-ink:#fdece7; --info:#0284c7;
  --brand:#2e7d32; --brand-2:#1b5e20;
  --sidebar-bg:#10201a; --sidebar-bg-2:#0b1712;
  --gold:#b07d0a;
  --primary-rgb:46,125,50;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#f2f6f1; --surface:#ffffff; --surface-2:#e9f0e8; --border:#dbe5de;
    --text:#17231b; --text-muted:#506357;
    --accent:#16a34a; --accent-dim:#15803d; --accent-ink:#eafff2;
    --warn:#b07d0a; --danger:#dc2626; --danger-ink:#fdece7; --info:#0284c7;
    --gold:#b07d0a; --primary-rgb:46,125,50;
  }
}

*, *::before, *::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{ background:var(--bg); color:var(--text); font-family:var(--font-body); line-height:1.5; -webkit-font-smoothing:antialiased; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1,h2,h3{ font-family:var(--font-display); margin:0; }
button, input, select, textarea{ font-family:inherit; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
@media (prefers-reduced-motion: no-preference){
  .dhip-sidebar, .dhip-overlay{ transition:transform .2s ease, opacity .2s ease; }
}

.mono{ font-family:ui-monospace, Consolas, monospace; }
.num{ font-variant-numeric:tabular-nums; }
.dhip-muted{ color:var(--text-muted); }

/* ============ Icons ============ */
.dhip-i{ flex:none; vertical-align:-.18em; }

/* ============ Login — floating card, mirrors the POS portal's treatment ============ */
.dhip-login-body{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
  color:var(--text); font-family:var(--font-body);
  background:
    radial-gradient(1200px 600px at 15% -10%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
    radial-gradient(900px 500px at 110% 120%, color-mix(in srgb, var(--info) 16%, transparent), transparent 55%),
    var(--bg);
}
.dhip-login-wrap{
  width:100%; max-width:960px; display:grid; grid-template-columns:1fr 440px;
  border-radius:24px; overflow:hidden;
  border:1px solid var(--border);
  box-shadow:0 30px 70px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.2);
  background:linear-gradient(180deg, var(--surface), var(--bg));
}
:root[data-theme="light"] .dhip-login-wrap{ box-shadow:0 24px 60px rgba(20,50,30,.16), 0 2px 8px rgba(20,50,30,.06); }

.dhip-login-showcase{
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 13%, transparent), rgba(0,0,0,.28));
  border-right:1px solid var(--border);
  padding:42px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden;
}
:root[data-theme="light"] .dhip-login-showcase{ background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), color-mix(in srgb, var(--surface-2) 90%, transparent)); }
.dhip-showcase-header{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.dhip-showcase-logo__img{ width:48px; height:48px; object-fit:contain; border-radius:12px; background:#fff; padding:6px; }
.dhip-node-badge{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  background:color-mix(in srgb, var(--accent) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  color:var(--accent); padding:6px 14px; border-radius:20px; font-size:12px; font-weight:600;
}
.dhip-pulse-dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); animation:dhipPulse 2s infinite; }
@keyframes dhipPulse{
  0%{ transform:scale(.95); box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent); }
  70%{ transform:scale(1); box-shadow:0 0 0 6px transparent; }
  100%{ transform:scale(.95); box-shadow:0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce){ .dhip-pulse-dot{ animation:none; } }

.dhip-showcase-body{ margin:36px 0; }
.dhip-showcase-body h1{ font-size:32px; font-weight:800; margin:0 0 8px; letter-spacing:-.02em; }
.dhip-showcase-body h1 span{ color:var(--accent); }
.dhip-showcase-body > p{ color:var(--text-muted); margin:0 0 28px; font-size:14px; max-width:380px; }
.dhip-showcase-features{ display:flex; flex-direction:column; gap:14px; }
.dhip-feat-card{
  display:flex; align-items:center; gap:14px;
  background:color-mix(in srgb, var(--text) 4%, transparent); border:1px solid var(--border);
  padding:14px 16px; border-radius:14px; transition:transform .15s, background .15s;
}
.dhip-feat-card:hover{ transform:translateX(4px); background:color-mix(in srgb, var(--text) 8%, transparent); }
.dhip-feat-icon{
  width:40px; height:40px; border-radius:10px; flex:0 0 40px;
  background:linear-gradient(135deg, var(--accent), var(--accent-dim));
  color:var(--accent-ink); display:flex; align-items:center; justify-content:center;
}
.dhip-feat-text{ display:flex; flex-direction:column; }
.dhip-feat-text strong{ font-size:13px; color:var(--text); font-weight:700; }
.dhip-feat-text span{ font-size:12px; color:var(--text-muted); }
.dhip-showcase-foot{ font-size:12px; color:var(--text-muted); display:flex; align-items:center; gap:6px; }

.dhip-login-card{ padding:42px 38px; display:flex; flex-direction:column; justify-content:center; }
.dhip-login-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:20px; }
.dhip-login-logo__img{
  width:56px; height:56px; object-fit:contain; border-radius:14px; display:block;
  background:#fff; padding:6px; box-shadow:0 6px 18px rgba(0,0,0,.2); margin-bottom:12px;
}
.dhip-login-logo h2{ margin:0; font-size:24px; font-weight:800; }
.dhip-login-logo p{ margin:4px 0 0; color:var(--text-muted); font-size:13px; }
.dhip-login-error{
  background:color-mix(in srgb, var(--danger) 12%, var(--surface));
  border:1px solid color-mix(in srgb, var(--danger) 40%, transparent);
  color:var(--danger); border-radius:10px; padding:10px 12px; font-size:13px; margin-bottom:16px;
}
.dhip-login-form{ display:flex; flex-direction:column; gap:16px; }
.dhip-field{ display:flex; flex-direction:column; gap:6px; }
.dhip-field > span:first-child{ font-size:12px; color:var(--text-muted); font-weight:600; }
.dhip-input-icon{ position:relative; display:flex; align-items:center; }
.dhip-input-icon > .dhip-i{ position:absolute; left:13px; color:var(--text-muted); pointer-events:none; z-index:1; }
/* Specificity must beat the generic `.dhip-field input` rule further down,
   otherwise the padding collapses and the icon sits on top of the text. */
.dhip-field .dhip-input-icon input{
  width:100%; background:var(--bg); border:1px solid var(--border); color:var(--text);
  border-radius:10px; padding:12px 40px; font-size:14px; transition:border-color .15s, box-shadow .15s;
}
.dhip-field .dhip-input-icon input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); outline:none; }
.dhip-eye{ position:absolute; right:8px; background:none; border:none; color:var(--text-muted); cursor:pointer; padding:6px; border-radius:6px; display:flex; }
.dhip-eye.on{ color:var(--accent); }
.dhip-form-row{ display:flex; align-items:center; justify-content:space-between; }
.dhip-remember{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-muted); cursor:pointer; }
.dhip-remember input{ accent-color:var(--accent); }
.dhip-login-btn{
  margin-top:4px; width:100%; border:none; cursor:pointer; color:var(--accent-ink); font-weight:700; font-size:15px;
  background:linear-gradient(135deg, var(--accent), var(--accent-dim));
  border-radius:10px; padding:14px; display:flex; align-items:center; justify-content:center; gap:8px;
  box-shadow:0 8px 18px color-mix(in srgb, var(--accent) 35%, transparent); transition:transform .12s, box-shadow .12s;
}
.dhip-login-btn:hover{ transform:translateY(-1px); box-shadow:0 12px 26px color-mix(in srgb, var(--accent) 45%, transparent); }
@media (prefers-reduced-motion: reduce){ .dhip-login-btn:hover, .dhip-feat-card:hover{ transform:none; } }
.dhip-login-foot{ text-align:center; margin-top:20px; font-size:13px; }
.dhip-login-foot a{ color:var(--text-muted); display:inline-flex; align-items:center; gap:6px; }
.dhip-login-foot a:hover{ color:var(--text); text-decoration:none; }

@media (max-width:860px){
  .dhip-login-wrap{ grid-template-columns:1fr; max-width:440px; }
  .dhip-login-showcase{ display:none; }
  .dhip-login-card{ padding:32px 24px; }
}

.dhip-theme-toggle{ background:var(--surface-2); border:1px solid var(--border); color:var(--accent); width:38px; height:38px; border-radius:9px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex:none; }

/* ============ App shell ============ */
.dhip-body{ background:var(--bg); color:var(--text); font-family:var(--font-body); }
.dhip-app{ display:flex; min-height:100vh; }

.dhip-sidebar{
  width:264px; flex:none; position:sticky; top:0; height:100vh; overflow-y:auto; z-index:30;
  background:linear-gradient(180deg, var(--sidebar-bg), var(--sidebar-bg-2));
  border-right:1px solid var(--border);
}
.dhip-brand{
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  padding:.95rem 1.15rem; color:#fff;
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  position:sticky; top:0; z-index:2;
}
.dhip-brand__logo{ width:40px; height:40px; flex:none; object-fit:contain; border-radius:9px; background:#fff; padding:4px; box-shadow:0 3px 8px rgba(0,0,0,.25); }
.dhip-brand__name{ font-family:var(--font-display); font-weight:800; font-size:1.05rem; color:#fff; }
.dhip-brand__tag{
  font-size:.63rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--gold); background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.18);
  padding:.15rem .45rem; border-radius:99px;
}
.dhip-nav{ padding:.75rem .65rem 2.5rem; }
.dhip-nav-group{
  font-size:.65rem; letter-spacing:.09em; text-transform:uppercase; font-weight:700;
  color:rgba(255,255,255,.42); margin:1rem 0 .3rem; padding:0 .75rem;
}
.dhip-nav-group:first-of-type{ margin-top:0; }
.dhip-nav-item{
  display:flex; align-items:center; gap:.75rem; padding:.6rem .75rem; border-radius:9px;
  font-size:.855rem; color:rgba(255,255,255,.74); margin-bottom:.12rem; transition:background .12s, color .12s;
}
.dhip-nav-item .dhip-i{ color:var(--gold); }
.dhip-nav-item:hover{ background:rgba(255,255,255,.08); color:#fff; text-decoration:none; }
.dhip-nav-item.active{
  background:linear-gradient(135deg, rgba(var(--primary-rgb),.4), rgba(var(--primary-rgb),.14));
  color:#fff; font-weight:600; box-shadow:inset 3px 0 0 var(--gold);
}
.dhip-nav-item.active .dhip-i{ color:#fff; }

.dhip-overlay{ display:none; }
.dhip-main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.dhip-topbar{
  display:flex; align-items:center; gap:.6rem; padding:.75rem 1.25rem;
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  border-bottom:1px solid rgba(0,0,0,.2); box-shadow:0 2px 10px rgba(0,0,0,.25);
  position:sticky; top:0; z-index:20;
}
.dhip-hamburger{ display:none; background:rgba(255,255,255,.14); border:none; color:#fff; width:38px; height:38px; border-radius:9px; cursor:pointer; align-items:center; justify-content:center; }
.dhip-top-btn{
  display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .85rem; border-radius:9px;
  font-size:.82rem; font-weight:600; color:#fff; background:rgba(255,255,255,.12);
}
.dhip-top-btn:hover, .dhip-top-btn.active{ background:rgba(255,255,255,.22); color:#fff; text-decoration:none; }
.dhip-top-spacer{ flex:1; }
.dhip-top-date{
  display:inline-flex; align-items:center; gap:.4rem; color:rgba(255,255,255,.92); font-size:.8rem;
  background:rgba(0,0,0,.18); padding:.5rem .75rem; border-radius:9px; font-variant-numeric:tabular-nums;
}
.dhip-top-user{
  position:relative; display:inline-flex; align-items:center; gap:.45rem; font-size:.82rem; font-weight:600;
  cursor:pointer; padding:.5rem .8rem; color:#fff; background:rgba(0,0,0,.22); border-radius:9px;
}
.dhip-top-menu{
  position:absolute; right:0; top:calc(100% + 8px); min-width:165px;
  background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:.35rem;
  box-shadow:0 12px 30px rgba(0,0,0,.35); z-index:40;
  opacity:0; visibility:hidden; transform:translateY(-6px); transition:.15s;
}
.dhip-top-user:hover .dhip-top-menu, .dhip-top-user:focus-within .dhip-top-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.dhip-top-menu a{ display:flex; align-items:center; gap:.55rem; padding:.5rem .65rem; border-radius:7px; color:var(--text); font-weight:500; }
.dhip-top-menu a:hover{ background:var(--surface-2); color:var(--accent); text-decoration:none; }
/* On the green topbar the toggle is translucent white; on the login card it
   keeps the neutral surface styling defined with the login block. */
.dhip-topbar .dhip-theme-toggle{ background:rgba(255,255,255,.14); border:none; color:#fff; transition:background .15s; }
.dhip-topbar .dhip-theme-toggle:hover{ background:rgba(255,255,255,.26); }
.dhip-content{ padding:1.5rem 1.4rem 3.5rem; flex:1; }
.dhip-footer{ padding:1rem 1.4rem; color:var(--text-muted); font-size:.8rem; border-top:1px solid var(--border); text-align:center; }

@media (max-width:900px){
  .dhip-sidebar{ position:fixed; left:0; top:0; transform:translateX(-100%); box-shadow:0 0 40px rgba(0,0,0,.4); }
  .dhip-sidebar.open{ transform:translateX(0); }
  .dhip-overlay.open{ display:block; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:25; }
  .dhip-hamburger{ display:inline-flex; }
  .dhip-top-btn span, .dhip-top-date{ display:none; }
  .dhip-content{ padding:1rem .85rem 3rem; }
}

/* ============ Embedded in wp-admin ============
   The WordPress admin already supplies a sidebar, a header and a background,
   so inside the Investor menu's frame the portal drops its own and renders as
   plain content. */
.dhip-embed{ background:transparent; }
.dhip-embed .dhip-sidebar,
.dhip-embed .dhip-overlay,
.dhip-embed .dhip-topbar,
.dhip-embed .dhip-footer{ display:none !important; }
.dhip-embed .dhip-app{ display:block; min-height:0; }
.dhip-embed .dhip-main{ display:block; }
.dhip-embed .dhip-content{ padding:1rem 1.1rem 1.5rem; }

/* ============ Dashboard bits ============ */
.dhip-section-title{ font-size:1.15rem; margin-bottom:.9rem; }

.dhip-hero{
  display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between;
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--surface)), var(--surface));
  border:1px solid var(--border); border-radius:16px; padding:1.4rem 1.5rem; margin-bottom:1.3rem;
}
.dhip-hero-eyebrow{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); font-weight:700; }
.dhip-hero-title{ font-size:1.6rem; margin:.15rem 0 .1rem; }
.dhip-hero-sub{ margin:0; color:var(--text-muted); font-size:.88rem; }

.dhip-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:.8rem; margin-bottom:1.4rem; }
.dhip-stat{ position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:.95rem 1.05rem; }
.dhip-stat--accent{ border-color:color-mix(in srgb, var(--accent) 45%, transparent); background:linear-gradient(160deg, color-mix(in srgb, var(--accent) 10%, var(--surface)), var(--surface)); }
.dhip-stat--warn{ border-color:color-mix(in srgb, var(--warn) 45%, transparent); background:linear-gradient(160deg, color-mix(in srgb, var(--warn) 10%, var(--surface)), var(--surface)); }
.dhip-stat-ico{
  display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:9px;
  background:color-mix(in srgb, var(--accent) 15%, transparent); color:var(--accent); margin-bottom:.6rem;
}
.dhip-stat .n{ font-size:1.4rem; font-weight:700; font-variant-numeric:tabular-nums; font-family:var(--font-display); word-break:break-word; }
.dhip-stat .l{ font-size:.78rem; color:var(--text-muted); margin-top:.15rem; }
.dhip-stat .sub{ font-size:.72rem; color:var(--text-muted); margin-top:.45rem; font-variant-numeric:tabular-nums; opacity:.9; }
.dhip-stat .sub b{ color:var(--text); font-weight:600; }

/* Profit-progress bar (investor's own portal). */
.dhip-progress{ height:12px; border-radius:99px; background:var(--surface-2); border:1px solid var(--border); overflow:hidden; }
.dhip-progress-fill{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg, var(--accent-dim), var(--accent)); transition:width .4s ease; }
@media (prefers-reduced-motion: reduce){ .dhip-progress-fill{ transition:none; } }

.dhip-quick{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:1.4rem; }
.dhip-quick-btn{ display:inline-flex; align-items:center; gap:.6rem; background:var(--surface); border:1px solid var(--border); padding:.7rem 1.1rem; border-radius:10px; font-weight:600; font-size:.88rem; color:var(--text); }
.dhip-quick-btn:hover{ border-color:var(--accent); color:var(--accent); text-decoration:none; }
.dhip-quick-ico{ display:inline-flex; color:var(--accent); }

.dhip-notice{
  display:flex; gap:.8rem; align-items:flex-start;
  background:color-mix(in srgb, var(--info) 10%, var(--surface));
  border:1px solid color-mix(in srgb, var(--info) 32%, transparent);
  border-radius:12px; padding:.9rem 1.1rem; margin-bottom:1.3rem; color:var(--text);
}
.dhip-notice .dhip-i{ color:var(--info); margin-top:.15rem; }
.dhip-notice strong{ display:block; font-size:.9rem; }
.dhip-notice span{ font-size:.86rem; color:var(--text-muted); }
.dhip-more-link{ display:inline-flex; align-items:center; gap:.35rem; margin-top:.8rem; font-size:.85rem; font-weight:600; }

/* ============ Profile header (staff + investor) ============ */
.dhip-profile-head{
  display:flex; flex-wrap:wrap; gap:1.2rem; align-items:center;
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--surface)), var(--surface));
  border:1px solid var(--border); border-radius:16px; padding:1.4rem 1.5rem; margin-bottom:1.3rem;
}
.dhip-profile-avatar{
  width:84px; height:84px; flex:none; border-radius:20px; overflow:hidden;
  background:linear-gradient(135deg, var(--accent), var(--accent-dim)); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:2rem; font-weight:800; text-transform:uppercase;
  box-shadow:0 8px 20px color-mix(in srgb, var(--accent) 30%, transparent);
}
.dhip-profile-avatar img{ width:100%; height:100%; object-fit:cover; }
.dhip-profile-id h1{ font-size:1.5rem; margin-bottom:.5rem; }
.dhip-profile-meta{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.dhip-chip{
  display:inline-flex; align-items:center; gap:.35rem; font-size:.76rem; font-weight:600;
  padding:.22rem .6rem; border-radius:99px; border:1px solid var(--border); color:var(--text-muted); background:var(--surface-2);
}

/* Sidebar "who am I" card in the investor's own portal */
.dhip-me-card{
  display:flex; align-items:center; gap:.7rem; padding:.7rem .8rem; margin-bottom:1rem;
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
}
.dhip-me-avatar{
  width:38px; height:38px; flex:none; border-radius:10px; overflow:hidden;
  background:linear-gradient(135deg, var(--accent), var(--accent-dim)); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center; font-weight:800; text-transform:uppercase;
}
.dhip-me-avatar img{ width:100%; height:100%; object-fit:cover; }
.dhip-me-text{ display:flex; flex-direction:column; min-width:0; }
.dhip-me-text strong{ font-size:.85rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dhip-me-text span{ font-size:.72rem; color:var(--text-muted); }

/* Permission list on My Profile */
.dhip-cap-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:.5rem; }
.dhip-cap{
  display:flex; align-items:center; gap:.5rem; font-size:.84rem; color:var(--text-muted);
  background:var(--surface-2); border:1px solid var(--border); border-radius:9px; padding:.5rem .7rem;
}
.dhip-cap--on{ color:var(--text); border-color:color-mix(in srgb, var(--accent) 40%, transparent); }
.dhip-cap--on .dhip-i{ color:var(--accent); }

/* Toggle switch (portal-login opt-in) */
.dhip-switch{ display:inline-flex; align-items:center; gap:.6rem; cursor:pointer; font-size:.88rem; margin-bottom:1rem; }
.dhip-switch input{ width:18px; height:18px; accent-color:var(--accent); }

/* Password field + its Generate button. min-width:0 on the input keeps the
   pair from pushing the form wider than its grid column on a phone — same
   overflow class of bug fixed earlier for plain inputs. */
.dhip-pw-row{ display:flex; gap:.5rem; align-items:stretch; }
.dhip-pw-row .dhip-btn{ flex:none; white-space:nowrap; }
.dhip-pw-input{ position:relative; display:flex; flex:1 1 auto; min-width:0; }
.dhip-pw-input input{ flex:1 1 auto; min-width:0; padding-right:40px; }
.dhip-pw-input .dhip-eye{ position:absolute; top:50%; right:6px; transform:translateY(-50%); }
.dhip-eye .dhip-eye-off{ display:none; }
.dhip-eye.on .dhip-eye-off{ display:flex; }
.dhip-eye.on .dhip-eye-on{ display:none; }
@media (max-width:420px){ .dhip-pw-row{ flex-wrap:wrap; } .dhip-pw-input{ flex-basis:100%; } }

/* Required / optional markers so no field's status has to be guessed. */
.dhip-req{ color:#e5484d; font-weight:700; }
.dhip-opt{ font-size:.7rem; font-weight:500; color:var(--text-muted); opacity:.75; text-transform:lowercase; letter-spacing:.02em; }
.dhip-legend{ display:flex; flex-wrap:wrap; align-items:center; gap:.35rem; margin:0 0 1rem; font-size:.8rem; color:var(--text-muted); }
.dhip-pw-generated-note{ font-size:.76rem; color:var(--accent); margin-top:.3rem; }
.dhip-form-note{ font-size:.84rem; margin:-.3rem 0 .8rem; max-width:70ch; }
.dhip-readonly{ opacity:.7; cursor:not-allowed; }
.dhip-optional{
  font-family:var(--font-body); font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--text-muted); background:var(--surface-2); border:1px solid var(--border);
  padding:.1rem .45rem; border-radius:99px; margin-left:.4rem; vertical-align:middle;
}
.dhip-onboard-note{
  display:flex; gap:.8rem; align-items:flex-start; margin:1.6rem 0 .4rem;
  background:color-mix(in srgb, var(--accent) 10%, var(--surface-2));
  border:1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  border-radius:12px; padding:.85rem 1.05rem;
}
.dhip-onboard-note .dhip-i{ color:var(--accent); margin-top:.1rem; }
.dhip-onboard-note strong{ display:block; font-size:.9rem; }
.dhip-onboard-note span{ font-size:.85rem; color:var(--text-muted); }
.dhip-profile-actions{ display:flex; flex-wrap:wrap; gap:.5rem; margin-left:auto; }

/* ============ Cards / forms ============ */
.dhip-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.3rem 1.4rem; margin-bottom:1.2rem; }
.dhip-list-head{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.dhip-form-h{ font-size:1rem; margin:1.1rem 0 .8rem; }
.dhip-form-h:first-child{ margin-top:0; }
.dhip-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.dhip-grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
/* Without min-width:0 a grid child is sized by its content, so a card holding a
   wide table pushes the whole page sideways instead of letting the table's own
   scroll container do its job. */
.dhip-grid-2 > *, .dhip-grid-3 > *, .dhip-stats > *{ min-width:0; }
@media (max-width:640px){ .dhip-grid-2, .dhip-grid-3{ grid-template-columns:1fr; } }
/* min-width:0 is load-bearing: a grid/flex item defaults to min-width:auto,
   which lets a <select> sized to its longest option push past the viewport. */
.dhip-f, .dhip-field{ display:flex; flex-direction:column; gap:.35rem; font-size:.86rem; color:var(--text-muted); margin-bottom:.9rem; min-width:0; }
.dhip-f--wide{ grid-column:1/-1; }
.dhip-f input, .dhip-field input, .dhip-f select, .dhip-f textarea{
  background:var(--surface-2); border:1px solid var(--border); border-radius:8px; padding:.6rem .7rem; color:var(--text); font-size:.92rem;
  max-width:100%; min-width:0; width:100%;
}
.dhip-f input:focus, .dhip-field input:focus, .dhip-f select:focus, .dhip-f textarea:focus{ border-color:var(--accent); }
.dhip-f textarea{ min-height:80px; resize:vertical; }
.dhip-photo-f{ margin-top:.4rem; }
.dhip-photo-pick{ width:84px; height:84px; border-radius:12px; background:var(--surface-2); border:1px dashed var(--border); display:flex; align-items:center; justify-content:center; overflow:hidden; cursor:pointer; }
.dhip-photo-preview{ width:100%; height:100%; object-fit:cover; }
.dhip-photo-placeholder{ font-size:1.6rem; color:var(--text-muted); }
.dhip-photo-input{ display:none; }
.dhip-form-actions{ display:flex; gap:.7rem; margin-top:1.2rem; }
.dhip-form-msg{ margin-top:.8rem; font-size:.88rem; }
.dhip-form-msg.dhip-ok{ color:var(--accent); }
.dhip-form-msg.dhip-err{ color:var(--danger); }

.dhip-btn{ display:inline-flex; align-items:center; gap:.4rem; background:var(--surface-2); border:1px solid var(--border); color:var(--text); padding:.6rem 1rem; border-radius:9px; font-size:.88rem; font-weight:600; cursor:pointer; }
.dhip-btn:hover{ border-color:var(--accent); color:var(--accent); text-decoration:none; }
.dhip-btn--primary{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.dhip-btn--primary:hover{ background:var(--accent-dim); color:var(--accent-ink); }
.dhip-btn--sm{ padding:.4rem .75rem; font-size:.8rem; }
.dhip-btn--danger{ background:var(--danger); border-color:var(--danger); color:#fff; }
.dhip-btn--danger:hover{ background:color-mix(in srgb, var(--danger) 82%, #000); border-color:var(--danger); color:#fff; }

/* ============ Data table: toolbar, footer, sorting, selection ============ */
.dhip-dt{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; margin-bottom:1.2rem; }

.dhip-dt-toolbar{
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem;
  padding:.85rem 1rem; border-bottom:1px solid var(--border); background:var(--surface-2);
}
.dhip-dt-len{ display:inline-flex; align-items:center; gap:.4rem; font-size:.82rem; color:var(--text-muted); }
.dhip-dt-len select{
  background:var(--bg); border:1px solid var(--border); color:var(--text);
  border-radius:7px; padding:.35rem .5rem; font-size:.82rem;
}
.dhip-dt-btns{ display:flex; flex-wrap:wrap; gap:.4rem; }
.dhip-dt-btn{
  display:inline-flex; align-items:center; gap:.4rem; cursor:pointer;
  background:var(--surface); border:1px solid var(--border); color:var(--text);
  border-radius:8px; padding:.42rem .7rem; font-size:.79rem; font-weight:600;
}
.dhip-dt-btn:hover{ border-color:var(--accent); color:var(--accent); }
.dhip-dt-btn .dhip-i{ color:var(--accent); }
.dhip-dt-btn:hover .dhip-i{ color:var(--accent); }
.dhip-dt-spacer{ flex:1 1 auto; }
.dhip-dt-search{ display:inline-flex; align-items:center; gap:.45rem; font-size:.82rem; color:var(--text-muted); }
.dhip-dt-search input{
  background:var(--bg); border:1px solid var(--border); color:var(--text);
  border-radius:8px; padding:.42rem .6rem; font-size:.84rem; min-width:190px;
}
.dhip-dt-search input:focus{ border-color:var(--accent); outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }

.dhip-dt-colvis{ position:relative; }
.dhip-dt-colvis-menu{
  position:absolute; top:calc(100% + 6px); left:0; z-index:25; min-width:210px; max-height:320px; overflow-y:auto;
  background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:.4rem;
  box-shadow:0 14px 34px rgba(0,0,0,.35); display:none;
}
.dhip-dt-colvis.open .dhip-dt-colvis-menu{ display:block; }
.dhip-dt-colvis-menu label{
  display:flex; align-items:center; gap:.55rem; padding:.4rem .55rem; border-radius:7px;
  font-size:.83rem; color:var(--text); cursor:pointer;
}
.dhip-dt-colvis-menu label:hover{ background:var(--surface-2); }
.dhip-dt-colvis-menu input{ accent-color:var(--accent); }

/* Date-range filter — sits with the export buttons, drives the same filtered
   row set the exports already read from. */
.dhip-dt-daterange{ position:relative; }
.dhip-dt-daterange.is-active > .dhip-dt-btn{ border-color:var(--accent); color:var(--accent); }
.dhip-dt-daterange.is-active > .dhip-dt-btn .dhip-i{ color:var(--accent); }
.dhip-dt-daterange-menu{
  position:absolute; top:calc(100% + 6px); left:0; z-index:26; min-width:230px;
  background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:.4rem;
  box-shadow:0 14px 34px rgba(0,0,0,.35); display:none;
}
.dhip-dt-daterange.open .dhip-dt-daterange-menu{ display:block; }
.dhip-dt-dr-head{
  padding:.35rem .55rem .5rem; font-size:.74rem; font-weight:700; letter-spacing:.03em;
  text-transform:uppercase; color:var(--text-muted); border-bottom:1px solid var(--border); margin-bottom:.3rem;
}
.dhip-dt-dr-opt{
  display:block; width:100%; text-align:left; cursor:pointer;
  background:none; border:none; color:var(--text); font:inherit; font-size:.83rem;
  padding:.45rem .55rem; border-radius:7px;
}
.dhip-dt-dr-opt:hover{ background:var(--surface-2); color:var(--accent); }
.dhip-dt-dr-opt.current{ background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--accent); font-weight:700; }
.dhip-dt-dr-custom{ border-top:1px solid var(--border); margin-top:.35rem; padding:.55rem; display:grid; gap:.5rem; }
.dhip-dt-dr-custom label{ display:grid; gap:.25rem; font-size:.76rem; color:var(--text-muted); }
.dhip-dt-dr-custom input{
  background:var(--bg); border:1px solid var(--border); color:var(--text);
  border-radius:7px; padding:.38rem .5rem; font-size:.82rem; width:100%;
}
.dhip-dt-dr-custom input:focus{ border-color:var(--accent); outline:none; }
.dhip-dt-dr-actions{ display:flex; gap:.4rem; justify-content:flex-end; }
.dhip-dt-dr-err:not(:empty){ color:var(--danger); font-size:.76rem; }

/* The "Today ✕" chip in the footer — one click clears the filter. */
.dhip-dt-chip{
  display:inline-flex; align-items:center; gap:.35rem; cursor:pointer; vertical-align:middle;
  margin-left:.5rem; padding:.2rem .55rem; border-radius:999px; font:inherit; font-size:.76rem; font-weight:700;
  background:color-mix(in srgb, var(--accent) 15%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 45%, transparent); color:var(--accent);
}
.dhip-dt-chip:hover{ background:color-mix(in srgb, var(--accent) 26%, transparent); }
.dhip-dt-chip .dhip-i{ color:var(--accent); }

@media (max-width:600px){
  .dhip-dt-daterange{ width:100%; }
  .dhip-dt-daterange > .dhip-dt-btn{ width:100%; justify-content:center; }
  .dhip-dt-daterange-menu{ left:0; right:0; min-width:0; }
}

.dhip-dt-foot{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.7rem;
  padding:.8rem 1rem; border-top:1px solid var(--border); background:var(--surface-2);
  font-size:.82rem; color:var(--text-muted);
}
.dhip-dt-pager{ display:flex; gap:.35rem; align-items:center; flex-wrap:wrap; }
.dhip-dt-page{
  min-width:34px; text-align:center; cursor:pointer;
  background:var(--surface); border:1px solid var(--border); color:var(--text-muted);
  border-radius:7px; padding:.35rem .6rem; font-size:.82rem; font-weight:600;
}
.dhip-dt-page:hover:not(:disabled):not(.current){ border-color:var(--accent); color:var(--accent); }
.dhip-dt-page.current{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.dhip-dt-page:disabled{ opacity:.45; cursor:not-allowed; }

.dhip-dt .dhip-table-wrap{ border:none; border-radius:0; }
.dhip-th-sort{ cursor:pointer; user-select:none; white-space:nowrap; }
.dhip-th-sort::after{ content:"⇅"; opacity:.35; margin-left:.35rem; font-size:.85em; }
.dhip-th-sort.asc::after{ content:"↑"; opacity:1; color:var(--accent); }
.dhip-th-sort.desc::after{ content:"↓"; opacity:1; color:var(--accent); }

.dhip-check-col{ width:38px; text-align:center; }
.dhip-check-col input{ accent-color:var(--accent); width:16px; height:16px; cursor:pointer; }
.dhip-serial-col{ width:52px; color:var(--text-muted); font-variant-numeric:tabular-nums; }
.dhip-dt-empty{ padding:2.2rem 1rem; text-align:center; color:var(--text-muted); }

.dhip-bulkbar{
  display:none; align-items:center; gap:.7rem; flex-wrap:wrap;
  padding:.6rem 1rem; border-bottom:1px solid var(--border);
  background:color-mix(in srgb, var(--accent) 12%, var(--surface));
  font-size:.84rem;
}
.dhip-bulkbar.show{ display:flex; }
.dhip-bulkbar strong{ color:var(--accent); }

/* Row action dropdown — same shape as the POS console's per-row Action button */
.dhip-act{ position:relative; display:inline-block; }
.dhip-act-btn{
  display:inline-flex; align-items:center; gap:.4rem; cursor:pointer;
  background:var(--accent); border:1px solid var(--accent); color:var(--accent-ink);
  border-radius:8px; padding:.35rem .65rem; font-size:.78rem; font-weight:700; white-space:nowrap;
}
.dhip-act-btn:hover{ background:var(--accent-dim); border-color:var(--accent-dim); }
.dhip-act-btn::after{ content:"▾"; font-size:.9em; }
.dhip-act-menu{
  position:absolute; left:0; top:calc(100% + 5px); z-index:30; min-width:172px;
  background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:.35rem;
  box-shadow:0 14px 34px rgba(0,0,0,.38); display:none;
}
.dhip-act.open .dhip-act-menu{ display:block; }
.dhip-act.up .dhip-act-menu{ top:auto; bottom:calc(100% + 5px); }
.dhip-act-menu a{
  display:flex; align-items:center; gap:.55rem; padding:.48rem .6rem; border-radius:7px;
  font-size:.83rem; color:var(--text); font-weight:500; white-space:nowrap;
}
.dhip-act-menu a:hover{ background:var(--surface-2); color:var(--accent); text-decoration:none; }
.dhip-act-menu a.danger{ color:var(--danger); }
.dhip-act-menu a.danger:hover{ background:color-mix(in srgb, var(--danger) 12%, transparent); color:var(--danger); }
.dhip-act-menu .dhip-i{ opacity:.85; }

@media print{
  .dhip-sidebar, .dhip-topbar, .dhip-footer, .dhip-dt-toolbar, .dhip-dt-foot,
  .dhip-act, .dhip-check-col, .dhip-bulkbar, .dhip-quick, .dhip-list-head .dhip-btn{ display:none !important; }
  .dhip-app, .dhip-main{ display:block; }
  body, .dhip-card, .dhip-dt{ background:#fff !important; color:#000 !important; border:none !important; }
  .dhip-table th, .dhip-table td{ border-color:#ccc !important; color:#000 !important; }
}

/* ============ Tables ============ */
.dhip-table-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius); }
.dhip-table{ width:100%; border-collapse:collapse; font-size:.88rem; }
.dhip-table th, .dhip-table td{ text-align:left; padding:.6rem .8rem; border-bottom:1px solid var(--border); white-space:nowrap; }
.dhip-table thead th{ background:var(--surface-2); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); }
.dhip-table tfoot th{ background:var(--surface-2); }
.dhip-table tbody tr:hover{ background:var(--surface-2); }
.dhip-table tbody tr:last-child td{ border-bottom:none; }
.dhip-cell-scroll{ max-height:96px; overflow-y:auto; }
.dhip-cell-scroll a{ display:block; }
.dhip-row-actions a{ font-size:.85rem; }
.dhip-danger-link{ color:var(--danger); }

/* Tables stay tables at every screen size — a phone shows exactly the same
   columns as the desktop and scrolls sideways inside .dhip-table-wrap, the way
   the POS console does. (An earlier build restacked rows into per-record cards
   on narrow screens; that changed what was on screen between devices, so it was
   dropped.) The scrollbar is styled at every width, not just on phones — a
   19-column table overflows a desktop viewport too. */
.dhip-table-wrap{ -webkit-overflow-scrolling:touch; }

/* The scroll control strip sits directly under the table: ‹ button, draggable
   track, › button — one row, so the arrows belong to the bar instead of
   floating over the data. The browser's own scrollbar is hidden wherever this
   strip exists, so a phone never shows two bars for one table. */
.dhip-scrollx{ position:relative; }
.dhip-scrollx .dhip-table-wrap{ scrollbar-width:none; -ms-overflow-style:none; }
.dhip-scrollx .dhip-table-wrap::-webkit-scrollbar{ height:0; display:none; }
.dhip-scrollx.has-scroll .dhip-table-wrap{ border-bottom-left-radius:0; border-bottom-right-radius:0; }

.dhip-scrollx-bar{
  display:none; align-items:center; gap:.55rem;
  padding:.5rem .7rem;
  background:var(--surface-2);
  border:1px solid var(--border); border-top:none;
  border-radius:0 0 var(--radius) var(--radius);
}
.dhip-scrollx.has-scroll .dhip-scrollx-bar{ display:flex; }
/* Inside a data table the strip spans the card, so it keeps square edges. */
.dhip-dt .dhip-scrollx-bar{ border-left:none; border-right:none; border-radius:0; }

.dhip-scrollx-btn{
  flex:none; width:30px; height:30px; border-radius:8px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--surface); color:var(--accent);
  border:1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  transition:background .15s, color .15s;
}
.dhip-scrollx-btn:hover:not(:disabled){ background:var(--accent); color:var(--accent-ink); }
.dhip-scrollx-btn:disabled{ opacity:.3; cursor:default; }

.dhip-scrollx-track{
  position:relative; flex:1 1 auto; min-width:0;
  height:12px; border-radius:99px; cursor:pointer;
  background:color-mix(in srgb, var(--text) 8%, var(--surface));
  border:1px solid var(--border);
}
.dhip-scrollx-thumb{
  position:absolute; top:1px; bottom:1px; left:0;
  border-radius:99px; cursor:grab;
  background:color-mix(in srgb, var(--accent) 75%, transparent);
  touch-action:none; /* let a finger drag the thumb instead of panning the page */
}
.dhip-scrollx-thumb:hover{ background:var(--accent); }
.dhip-scrollx.dragging .dhip-scrollx-thumb{ background:var(--accent); cursor:grabbing; }

@media (max-width:760px){
  /* Bigger tap targets on a phone; the track flexes into whatever is left. */
  .dhip-scrollx-bar{ gap:.5rem; padding:.55rem .6rem; }
  .dhip-scrollx-btn{ width:34px; height:34px; }
  .dhip-scrollx-track{ height:14px; }
}
@media print{ .dhip-scrollx-bar{ display:none !important; } }

/* ============ Misc ============ */
.dhip-pill{ display:inline-block; padding:.15rem .55rem; border-radius:99px; font-size:.76rem; font-weight:600; }
.dhip-pill--active, .dhip-pill--paid{ background:color-mix(in srgb, var(--accent) 18%, transparent); color:var(--accent); }
.dhip-pill--inactive, .dhip-pill--withdrawn{ background:color-mix(in srgb, var(--text-muted) 20%, transparent); color:var(--text-muted); }
.dhip-pill--pending, .dhip-pill--duesoon{ background:color-mix(in srgb, var(--warn) 20%, transparent); color:var(--warn); }
.dhip-pill--matured{ background:color-mix(in srgb, var(--info) 20%, transparent); color:var(--info); }
.dhip-pill--overdue{ background:color-mix(in srgb, var(--danger) 20%, transparent); color:var(--danger); }

.dhip-empty{ text-align:center; padding:3rem 1rem; color:var(--text-muted); background:var(--surface); border:1px dashed var(--border); border-radius:var(--radius); }
.dhip-empty h2{ color:var(--text); font-size:1.1rem; margin-bottom:.4rem; }

.dhip-kv{ width:100%; border-collapse:collapse; margin-top:.8rem; }
.dhip-kv th{ text-align:left; color:var(--text-muted); font-weight:600; font-size:.82rem; padding:.4rem 0; width:40%; vertical-align:top; }
.dhip-kv td{ padding:.4rem 0; font-size:.9rem; }
.dhip-view-photo{ width:100px; height:100px; object-fit:cover; border-radius:12px; border:1px solid var(--border); }

.dhip-doc-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem; }
.dhip-doc-list li{ display:flex; justify-content:space-between; gap:1rem; border:1px solid var(--border); border-radius:8px; padding:.5rem .8rem; font-size:.88rem; }

/* One-click Login / Status toggles. They look exactly like the pills the list
   always showed, so nothing about sorting or the exports changes. */
button.dhip-pill.dhip-toggle{ border:none; font:inherit; font-size:.76rem; font-weight:600; cursor:pointer; transition:filter .15s, opacity .15s; }
button.dhip-pill.dhip-toggle:hover{ filter:brightness(1.18); }
button.dhip-pill.dhip-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
button.dhip-pill.dhip-toggle.is-busy{ opacity:.45; pointer-events:none; }

/* An inactive investor's whole row reads as muted red. This targets the cells
   rather than the row so it paints over the stripe and hover backgrounds
   without needing !important — which would block every later override. */
.dhip-table tbody tr.dhip-row-inactive > td{ background:color-mix(in srgb, var(--danger) 12%, transparent); }
.dhip-table tbody tr.dhip-row-inactive:hover > td{ background:color-mix(in srgb, var(--danger) 18%, transparent); }
.dhip-table tbody tr.dhip-row-inactive > td:first-child{ box-shadow:inset 3px 0 0 var(--danger); }

/* Small centred dialog — used when switching a login on for an investor who
   has no password yet. */
.dhip-modal{ position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center; padding:1rem; background:rgba(0,0,0,.55); }
.dhip-modal.open{ display:flex; }
.dhip-modal-card{ width:min(430px,100%); max-height:90vh; overflow-y:auto; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:1.25rem; box-shadow:0 24px 64px rgba(0,0,0,.5); }
.dhip-modal-card .dhip-form-h{ margin-top:0; }
.dhip-modal-actions{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.5rem; margin-top:1.1rem; }
@media (max-width:420px){ .dhip-modal-actions .dhip-btn{ flex:1 1 100%; justify-content:center; } }

.dhip-cap-chips{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.9rem; }
.dhip-cap-chips .dhip-chip{ font-size:.75rem; }

.dhip-perm-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:.75rem; margin-top:1.2rem; }
.dhip-perm-head-t{ min-width:min(100%,260px); flex:1 1 260px; }
.dhip-perm-head-t .dhip-form-h{ margin-bottom:.25rem; }
.dhip-perm-head-t .dhip-form-note{ margin:0; }
.dhip-perm-tools{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.dhip-perm-count{ font-size:.8rem; font-weight:700; color:var(--accent); background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:.3rem .7rem; white-space:nowrap; }

.dhip-perm-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; margin-top:.75rem; }
.dhip-perm-group{ background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:.8rem .9rem; }
.dhip-perm-group-h{ display:flex; align-items:center; gap:.5rem; font-weight:700; font-size:.82rem; padding-bottom:.5rem; margin-bottom:.5rem; border-bottom:1px solid var(--border); cursor:pointer; }
.dhip-perm-group-h input{ accent-color:var(--accent); width:16px; height:16px; flex:none; }
.dhip-perm-group-name{ display:flex; align-items:center; gap:.4rem; min-width:0; overflow-wrap:anywhere; }
.dhip-perm-group-n{ margin-left:auto; flex:none; font-size:.72rem; font-weight:700; color:var(--text-muted); background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:.1rem .45rem; }
.dhip-perm-items{ display:flex; flex-direction:column; }
.dhip-check{ display:flex; align-items:flex-start; gap:.5rem; font-size:.85rem; color:var(--text-muted); padding:.3rem 0; cursor:pointer; overflow-wrap:anywhere; }
.dhip-check input{ accent-color:var(--accent); width:16px; height:16px; flex:none; margin-top:.1rem; }
@media (max-width:600px){
  .dhip-perm-tools{ width:100%; }
  .dhip-perm-count{ margin-right:auto; }
}