:root {
  --bg: #06070b;
  --surface: #0b0e15;
  --surface-2: #10151f;
  --surface-3: #151b27;
  --line: rgba(148, 163, 184, 0.16);
  --line-strong: rgba(42, 231, 255, 0.32);
  --text: #f5f8ff;
  --muted: #8d98aa;
  --cyan: #2ae7ff;
  --cyan-soft: rgba(42, 231, 255, 0.12);
  --violet: #8a5cff;
  --violet-soft: rgba(138, 92, 255, 0.14);
  --green: #46f2a1;
  --green-soft: rgba(70, 242, 161, 0.12);
  --yellow: #ffc857;
  --yellow-soft: rgba(255, 200, 87, 0.13);
  --red: #ff5574;
  --red-soft: rgba(255, 85, 116, 0.13);
  --radius: 18px;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.34);
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }

/* Brand */
.brand { display: flex; align-items: center; gap: 12px; position: relative; z-index: 2; }
.brand__mark {
  width: 42px; height: 42px; display: grid; place-items: center; position: relative;
  border: 1px solid var(--cyan); transform: rotate(45deg); background: var(--cyan-soft);
  box-shadow: 0 0 24px rgba(42, 231, 255, .2), inset 0 0 16px rgba(42, 231, 255, .12);
}
.brand__mark::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(42, 231, 255, .32); }
.brand__mark span { transform: rotate(-45deg); font-weight: 900; color: var(--cyan); font-size: 21px; }
.brand strong { display: block; font-size: 17px; letter-spacing: .18em; }
.brand small { display: block; color: var(--cyan); font-size: 9px; letter-spacing: .3em; margin-top: 4px; }
.brand--compact small { display: none; }

/* Login */
.login-page { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(420px, .9fr); position: relative; overflow: hidden; }
.cyber-grid { position: fixed; inset: 0; pointer-events: none; opacity: .18; background-image: linear-gradient(rgba(42,231,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(42,231,255,.08) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom, black, transparent 86%); }
.glow { position: fixed; width: 560px; height: 560px; border-radius: 50%; filter: blur(120px); opacity: .16; pointer-events: none; }
.glow--one { background: var(--cyan); left: -270px; top: 15%; }
.glow--two { background: var(--violet); right: -300px; bottom: -250px; }
.login-visual { min-height: 100vh; padding: 54px 7vw 40px; display: flex; flex-direction: column; position: relative; border-right: 1px solid var(--line); }
.login-visual::after { content: ""; position: absolute; right: -1px; top: 14%; width: 1px; height: 160px; background: linear-gradient(transparent, var(--cyan), transparent); box-shadow: 0 0 20px var(--cyan); }
.hero-copy { margin: auto 0; max-width: 710px; position: relative; z-index: 2; }
.eyebrow, .page-eyebrow, .terminal-tag { color: var(--cyan); letter-spacing: .16em; font-size: 11px; font-weight: 800; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 25px; }
.eyebrow span { width: 36px; height: 1px; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.hero-copy h1 { font-size: clamp(48px, 6vw, 90px); line-height: .94; letter-spacing: -.055em; margin: 0; font-weight: 860; text-transform: uppercase; }
.hero-copy h1 em { color: transparent; -webkit-text-stroke: 1px var(--cyan); font-style: normal; text-shadow: 0 0 30px rgba(42,231,255,.16); }
.hero-copy > p { color: #9ba7bb; font-size: 17px; max-width: 600px; line-height: 1.7; margin: 28px 0 36px; }
.feature-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); padding-top: 24px; max-width: 600px; }
.feature-row > div { display: flex; gap: 11px; align-items: flex-start; }
.feature-row b { color: var(--cyan); font-size: 11px; }
.feature-row span { color: #b6bfce; font-weight: 700; font-size: 10px; letter-spacing: .13em; line-height: 1.5; }
.system-status { display: flex; align-items: center; gap: 9px; color: #9fb0c8; font-size: 10px; letter-spacing: .18em; font-weight: 800; position: relative; z-index: 2; }
.pulse { width: 7px; height: 7px; background: var(--green); border-radius: 50%; box-shadow: 0 0 0 5px rgba(70,242,161,.08), 0 0 14px var(--green); animation: pulse 2s infinite; }
@keyframes pulse { 50% { opacity: .55; box-shadow: 0 0 0 9px rgba(70,242,161,0), 0 0 20px var(--green); } }
.login-panel { display: grid; place-items: center; padding: 45px; position: relative; z-index: 2; background: rgba(6, 7, 11, .45); backdrop-filter: blur(12px); }
.login-card { width: min(100%, 480px); padding: 48px; background: linear-gradient(145deg, rgba(18, 23, 34, .94), rgba(9, 12, 18, .95)); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.login-card::after { content: ""; position: absolute; width: 160px; height: 160px; right: -100px; bottom: -100px; border: 1px solid rgba(42,231,255,.15); transform: rotate(45deg); }
.login-card__topline { position: absolute; top: 0; left: 20%; right: 20%; height: 2px; background: linear-gradient(90deg, transparent, var(--cyan), transparent); box-shadow: 0 0 15px var(--cyan); }
.login-card__header { margin-bottom: 32px; }
.login-card__header h2 { font-size: 36px; margin: 9px 0 7px; letter-spacing: -.04em; }
.login-card__header p { color: var(--muted); margin: 0; line-height: 1.6; }
.login-form { display: grid; gap: 20px; }
.login-help { text-align: center; margin: 0; color: var(--muted); font-size: 12px; }
.security-note { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line); text-align: center; color: #748197; font-size: 9px; letter-spacing: .19em; }

/* Forms */
.field { display: grid; gap: 8px; min-width: 0; }
.field label { color: #aeb8c9; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.field input, .field textarea, .select {
  width: 100%; border: 1px solid var(--line); outline: 0; background: #080b11; color: var(--text);
  border-radius: 10px; padding: 13px 14px; transition: .2s border, .2s box-shadow; min-height: 47px;
}
.field textarea { resize: vertical; line-height: 1.6; }
.field input:focus, .field textarea:focus, .select:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(42,231,255,.08), 0 0 18px rgba(42,231,255,.08); }
.input-wrap { position: relative; }
.input-wrap input { width: 100%; border: 1px solid var(--line); outline: 0; background: #080b11; color: var(--text); border-radius: 10px; padding: 14px 65px 14px 45px; min-height: 52px; transition: .2s; }
.input-wrap input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(42,231,255,.08); }
.input-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--cyan); z-index: 2; }
.input-action { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--cyan); font-size: 10px; font-weight: 800; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.stack-form { display: grid; gap: 16px; margin-top: 22px; }

/* Buttons */
.button { border: 1px solid var(--line); border-radius: 9px; min-height: 42px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; background: var(--surface-3); color: var(--text); font-size: 11px; font-weight: 850; letter-spacing: .07em; transition: transform .2s, border-color .2s, background .2s, box-shadow .2s; }
.button:hover:not(:disabled) { transform: translateY(-1px); border-color: rgba(42,231,255,.45); }
.button--primary { color: #001014; border-color: var(--cyan); background: linear-gradient(135deg, #66f2ff, var(--cyan)); box-shadow: 0 10px 28px rgba(42,231,255,.18); }
.button--primary:hover:not(:disabled) { box-shadow: 0 14px 35px rgba(42,231,255,.3); }
.button--ghost { background: transparent; }
.button--full { width: 100%; }
.button--large { min-height: 54px; }

/* Dashboard shell */
.dashboard-shell { min-height: 100vh; display: grid; grid-template-columns: 260px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 32px 22px 22px; border-right: 1px solid var(--line); background: linear-gradient(180deg, #0b0e15, #080a0f); display: flex; flex-direction: column; z-index: 5; }
.sidebar::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--cyan), transparent); }
.sidebar__label { color: #536074; font-size: 9px; letter-spacing: .2em; font-weight: 800; margin: 48px 12px 12px; }
.sidebar__nav { display: grid; gap: 6px; }
.sidebar__link { display: flex; align-items: center; gap: 13px; padding: 13px 14px; color: #9ba7ba; border: 1px solid transparent; border-radius: 10px; font-size: 13px; font-weight: 670; transition: .2s; }
.sidebar__link span { color: var(--cyan); width: 18px; text-align: center; }
.sidebar__link:hover { color: var(--text); background: var(--cyan-soft); border-color: rgba(42,231,255,.15); }
.sidebar__footer { margin-top: auto; display: grid; gap: 15px; }
.user-chip { display: flex; gap: 11px; align-items: center; padding-top: 18px; border-top: 1px solid var(--line); min-width: 0; }
.avatar { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; background: var(--violet-soft); border: 1px solid rgba(138,92,255,.3); color: #bda8ff; border-radius: 10px; font-weight: 900; }
.user-chip > div:last-child { min-width: 0; }
.user-chip strong { display: block; font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.user-chip small { display: block; color: var(--muted); margin-top: 3px; font-size: 10px; }
.dashboard-main { min-width: 0; padding: 42px clamp(24px, 3.2vw, 58px) 70px; background: radial-gradient(circle at 80% -10%, rgba(42,231,255,.05), transparent 30%), var(--bg); }
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; margin-bottom: 32px; }
.page-header h1 { margin: 7px 0 4px; font-size: clamp(32px, 4vw, 48px); letter-spacing: -.045em; }
.page-header p { margin: 0; color: var(--muted); }
.page-actions { display: flex; align-items: center; gap: 10px; }

/* Cards and panels */
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.metric-card { position: relative; overflow: hidden; min-height: 174px; padding: 23px; background: linear-gradient(145deg, rgba(17,22,32,.98), rgba(10,13,20,.98)); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 13px 40px rgba(0,0,0,.14); }
.metric-card::after { content: ""; position: absolute; right: -35px; top: -35px; width: 105px; height: 105px; border: 1px solid rgba(42,231,255,.1); transform: rotate(45deg); }
.metric-card__icon { display: grid; place-items: center; width: 38px; height: 38px; background: var(--cyan-soft); border: 1px solid rgba(42,231,255,.2); color: var(--cyan); border-radius: 9px; font-size: 12px; font-weight: 900; margin-bottom: 18px; }
.metric-card small { display: block; color: var(--muted); letter-spacing: .11em; font-size: 9px; font-weight: 800; }
.metric-card strong { display: block; font-size: 31px; letter-spacing: -.04em; margin: 7px 0 5px; }
.metric-card p { color: #657188; margin: 0; font-size: 11px; }
.metric-card--danger .metric-card__icon { color: var(--red); background: var(--red-soft); border-color: rgba(255,85,116,.2); }
.metric-card--warning .metric-card__icon { color: var(--yellow); background: var(--yellow-soft); border-color: rgba(255,200,87,.2); }
.metric-card--success .metric-card__icon { color: var(--green); background: var(--green-soft); border-color: rgba(70,242,161,.2); }
.dashboard-columns { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(290px, .65fr); gap: 17px; margin-top: 17px; }
.panel { background: linear-gradient(150deg, rgba(15,19,29,.98), rgba(9,12,18,.98)); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 15px 50px rgba(0,0,0,.14); overflow: hidden; }
.panel__header { min-height: 76px; padding: 20px 22px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.panel__header h2 { margin: 4px 0 0; font-size: 18px; letter-spacing: -.02em; }
.panel__header > a { color: var(--cyan); font-size: 10px; font-weight: 800; letter-spacing: .08em; }

/* Tables */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 720px; }
th { text-align: left; color: #69768b; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; font-weight: 850; padding: 14px 18px; background: rgba(255,255,255,.015); }
td { padding: 16px 18px; border-top: 1px solid rgba(148,163,184,.1); color: #c7cfdb; font-size: 12px; vertical-align: middle; }
td strong { display: block; color: var(--text); font-size: 12px; }
td small { display: block; color: #6f7c91; font-size: 10px; margin-top: 4px; }
tr:hover td { background: rgba(42,231,255,.018); }
.empty-cell { text-align: center; color: var(--muted); padding: 38px; }
.table-action, .table-link { border: 0; background: transparent; color: var(--cyan); font-size: 10px; font-weight: 850; letter-spacing: .06em; padding: 0; }
.table-link:hover { text-decoration: underline; }
.muted { color: #647086; font-size: 11px; }
.status-badge { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; min-height: 24px; padding: 0 9px; text-transform: uppercase; font-size: 8px; letter-spacing: .08em; font-weight: 900; border: 1px solid var(--line); white-space: nowrap; }
.status-badge--pending { color: var(--yellow); background: var(--yellow-soft); border-color: rgba(255,200,87,.25); }
.status-badge--overdue { color: var(--red); background: var(--red-soft); border-color: rgba(255,85,116,.25); }
.status-badge--under_review { color: #c1abff; background: var(--violet-soft); border-color: rgba(138,92,255,.28); }
.status-badge--paid, .status-badge--active { color: var(--green); background: var(--green-soft); border-color: rgba(70,242,161,.25); }
.status-badge--inactive { color: #aab3c1; background: rgba(148,163,184,.1); }
.action-group { display: flex; flex-wrap: wrap; gap: 6px; }
.mini-button { min-height: 27px; padding: 0 9px; border: 1px solid rgba(42,231,255,.25); color: var(--cyan); background: var(--cyan-soft); border-radius: 6px; font-size: 9px; font-weight: 800; }
.mini-button--success { color: var(--green); background: var(--green-soft); border-color: rgba(70,242,161,.25); }
.mini-button--danger { color: var(--red); background: var(--red-soft); border-color: rgba(255,85,116,.25); }

/* Notifications */
.notification-list { padding: 10px 17px 17px; display: grid; gap: 4px; }
.notification { display: flex; gap: 12px; padding: 14px 8px; border-bottom: 1px solid rgba(148,163,184,.08); }
.notification:last-child { border-bottom: 0; }
.notification__dot { width: 8px; height: 8px; flex: 0 0 8px; margin-top: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.notification--warning .notification__dot { background: var(--yellow); box-shadow: 0 0 10px var(--yellow); }
.notification--success .notification__dot { background: var(--green); box-shadow: 0 0 10px var(--green); }
.notification--receipt .notification__dot { background: var(--violet); box-shadow: 0 0 10px var(--violet); }
.notification strong { display: block; font-size: 11px; }
.notification p { color: #8f9caf; font-size: 11px; line-height: 1.5; margin: 5px 0; }
.notification small { color: #536176; font-size: 9px; }
.notification--read { opacity: .55; }
.empty-state { color: var(--muted); padding: 28px 12px; text-align: center; font-size: 12px; }

/* Managers */
.manager-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(330px, .7fr); gap: 17px; align-items: start; }
.manager-list { min-width: 0; }
.form-panel { padding: 24px; position: sticky; top: 22px; }
.form-panel h2, .settings-card h2 { margin: 6px 0 7px; font-size: 22px; }
.form-panel > p { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 0; }
.toolbar { min-height: 72px; padding: 14px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; }
.toolbar--wrap { flex-wrap: wrap; }
.search-box { flex: 1; min-width: 220px; position: relative; }
.search-box span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--cyan); }
.search-box input { width: 100%; min-height: 43px; border: 1px solid var(--line); background: #080b11; color: var(--text); border-radius: 9px; outline: 0; padding: 0 14px 0 40px; }
.search-box input:focus { border-color: var(--cyan); }
.record-count { color: #5c687b; font-size: 9px; letter-spacing: .12em; font-weight: 800; white-space: nowrap; }
.select { appearance: none; min-width: 160px; padding-right: 32px; }
.alert { border: 1px solid var(--line); border-radius: 9px; padding: 11px 13px; font-size: 11px; line-height: 1.45; }
.alert--danger { color: #ff9cad; background: var(--red-soft); border-color: rgba(255,85,116,.22); }
.alert--success { color: #8ff7c4; background: var(--green-soft); border-color: rgba(70,242,161,.22); }
.alert--spaced { margin: 14px 18px 0; }

/* Settings */
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.settings-card { padding: 25px; display: grid; gap: 18px; }
.settings-card h2 { margin-bottom: 2px; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px; background: rgba(255,255,255,.02); border: 1px solid var(--line); border-radius: 11px; }
.toggle-row strong { display: block; font-size: 12px; }
.toggle-row small { display: block; color: var(--muted); font-size: 10px; margin-top: 4px; line-height: 1.45; }
.toggle-row input { width: 42px; height: 22px; accent-color: var(--cyan); }
.template-help { color: var(--muted); font-size: 10px; line-height: 1.7; }
.template-help code { color: var(--cyan); }
.settings-footer { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 14px; }

/* Portal */
.portal-shell { min-height: 100vh; background: radial-gradient(circle at 50% -20%, rgba(42,231,255,.08), transparent 35%), var(--bg); }
.portal-header { height: 82px; padding: 0 clamp(22px, 5vw, 80px); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; background: rgba(8,10,15,.86); backdrop-filter: blur(18px); position: sticky; top: 0; z-index: 8; }
.portal-user { display: flex; align-items: center; gap: 20px; }
.portal-user > div:first-child { text-align: right; }
.portal-user span { display: block; color: var(--cyan); font-size: 8px; letter-spacing: .17em; font-weight: 800; }
.portal-user strong { display: block; font-size: 12px; margin-top: 3px; }
.portal-logout { width: 145px; }
.portal-main { width: min(1260px, calc(100% - 44px)); margin: 0 auto; padding: 50px 0 70px; }
.portal-welcome { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 28px; }
.portal-welcome h1 { font-size: clamp(34px, 5vw, 54px); margin: 6px 0 5px; letter-spacing: -.05em; }
.portal-welcome p { margin: 0; color: var(--muted); }
.portal-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.member-status-card { min-height: 260px; padding: 26px; border-radius: var(--radius); border: 1px solid var(--line-strong); background: linear-gradient(145deg, rgba(14,22,30,.98), rgba(8,12,18,.98)); position: relative; overflow: hidden; }
.member-status-card::after { content: ""; position: absolute; width: 220px; height: 220px; right: -100px; bottom: -100px; border: 1px solid rgba(42,231,255,.15); transform: rotate(45deg); }
.member-status-card--overdue { border-color: rgba(255,85,116,.35); }
.member-status-card__row { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-top: 42px; position: relative; z-index: 2; }
.member-status-card__row small { color: var(--muted); font-size: 9px; letter-spacing: .13em; }
.member-status-card__row h2 { margin: 5px 0 0; font-size: 31px; text-transform: capitalize; }
.member-status-card__details { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 36px; max-width: 420px; position: relative; z-index: 2; }
.member-status-card__details div { border-left: 2px solid var(--cyan); padding-left: 12px; }
.member-status-card__details span { display: block; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }
.member-status-card__details strong { display: block; margin-top: 5px; font-size: 15px; }
.pix-card { padding: 26px; min-height: 260px; }
.pix-card h2 { margin: 8px 0 7px; font-size: 25px; }
.pix-card > p { color: var(--muted); font-size: 12px; line-height: 1.6; }
.pix-key { display: flex; gap: 10px; align-items: stretch; margin-top: 27px; }
.pix-key code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; padding: 14px; border: 1px dashed rgba(42,231,255,.28); background: var(--cyan-soft); color: var(--cyan); border-radius: 9px; font-size: 12px; }
.pix-key button { border: 1px solid var(--cyan); background: var(--cyan); color: #001014; border-radius: 8px; padding: 0 15px; font-size: 9px; font-weight: 900; }
.pix-amount { display: block; color: #b8c3d4; font-size: 11px; margin-top: 15px; }
.portal-content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; margin-top: 17px; }
.receipt-form { padding: 22px; display: grid; gap: 16px; }
.file-drop { min-height: 145px; border: 1px dashed rgba(42,231,255,.28); border-radius: 12px; background: rgba(42,231,255,.025); display: grid; place-items: center; align-content: center; text-align: center; cursor: pointer; padding: 22px; }
.file-drop input { display: none; }
.file-drop__icon { color: var(--cyan); font-size: 26px; margin-bottom: 8px; }
.file-drop strong { font-size: 12px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.file-drop small { color: var(--muted); margin-top: 6px; font-size: 10px; }
.profile-data { margin: 0; padding: 12px 22px 22px; display: grid; grid-template-columns: 1fr 1fr; }
.profile-data div { padding: 15px 0; border-bottom: 1px solid rgba(148,163,184,.09); }
.profile-data div:nth-child(odd) { padding-right: 18px; }
.profile-data dt { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }
.profile-data dd { margin: 6px 0 0; font-size: 12px; overflow-wrap: anywhere; }
.portal-history, .portal-notifications { margin-top: 17px; }
.notification-list--grid { grid-template-columns: repeat(2, minmax(0,1fr)); padding: 16px 22px 22px; }

/* Responsive */
@media (max-width: 1180px) {
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .manager-layout { grid-template-columns: 1fr; }
  .form-panel { position: static; }
}

@media (max-width: 900px) {
  .login-page { grid-template-columns: 1fr; }
  .login-visual { min-height: auto; padding: 35px 28px 45px; border-right: 0; border-bottom: 1px solid var(--line); }
  .hero-copy { margin: 70px 0 50px; }
  .hero-copy h1 { font-size: clamp(43px, 12vw, 72px); }
  .login-panel { padding: 32px 20px 55px; }
  .dashboard-shell { grid-template-columns: 1fr; }
  .sidebar { position: relative; height: auto; padding: 18px 20px; flex-direction: row; align-items: center; gap: 18px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .sidebar__label, .sidebar__footer { display: none; }
  .sidebar__nav { display: flex; gap: 5px; margin-left: auto; }
  .sidebar__link { white-space: nowrap; padding: 10px 12px; }
  .dashboard-main { padding-top: 30px; }
  .dashboard-columns { grid-template-columns: 1fr; }
  .settings-grid, .portal-summary-grid, .portal-content-grid { grid-template-columns: 1fr; }
  .portal-header { height: auto; min-height: 82px; padding-top: 14px; padding-bottom: 14px; }
  .portal-main { padding-top: 36px; }
}

@media (max-width: 650px) {
  .feature-row { gap: 10px; }
  .feature-row > div { display: block; }
  .feature-row b { display: block; margin-bottom: 5px; }
  .login-card { padding: 33px 24px; }
  .page-header { align-items: flex-start; flex-direction: column; }
  .metric-grid { grid-template-columns: 1fr; }
  .metric-card { min-height: 150px; }
  .form-row, .profile-data, .notification-list--grid { grid-template-columns: 1fr; }
  .profile-data div:nth-child(odd) { padding-right: 0; }
  .settings-footer { flex-direction: column; align-items: stretch; }
  .portal-header .brand small { display: none; }
  .portal-user > div:first-child { display: none; }
  .portal-logout { width: 120px; }
  .portal-welcome { align-items: flex-start; flex-direction: column; }
  .member-status-card__row { margin-top: 26px; }
  .member-status-card__details { grid-template-columns: 1fr; }
  .pix-key { flex-direction: column; }
  .pix-key button { min-height: 40px; }
  .toolbar { align-items: stretch; flex-direction: column; }
  .record-count { padding: 2px 0; }
  .select { min-width: 100%; }
  .sidebar .brand { display: none; }
  .sidebar__nav { margin-left: 0; }
  .sidebar__link { font-size: 0; }
  .sidebar__link span { font-size: 16px; }
}

/* PHP/XAMPP additions */
.alert { margin-bottom: 16px; }
.alert--info { color: #9eefff; background: var(--cyan-soft); border-color: rgba(42,231,255,.22); }
.alert--warning { color: #ffe099; background: var(--yellow-soft); border-color: rgba(255,200,87,.22); }
.page-container { max-width: 1600px; margin: 0 auto; }
.inline-form { display: inline-flex; margin: 0; }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.input-static { padding: 13px 14px; min-height: 47px; background: rgba(255,255,255,.025); border: 1px solid var(--line); border-radius: 10px; color: #cbd5e1; }
.checkbox-row { display:flex; align-items:center; gap:10px; color:#aeb8c9; font-size:12px; }
.checkbox-row input { width:18px; height:18px; accent-color: var(--cyan); }
.install-shell { min-height:100vh; display:grid; place-items:center; padding:30px; position:relative; }
.install-card { width:min(100%, 900px); padding:34px; position:relative; }
.install-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.install-card h1 { margin:8px 0; font-size:36px; }
.install-card > p { color:var(--muted); line-height:1.6; }
.form-section { margin-top:22px; padding-top:20px; border-top:1px solid var(--line); }
.form-section h2 { font-size:17px; margin:0 0 15px; }
.login-error { margin-bottom:18px; }
.sidebar__link--active { color:var(--text); background:var(--cyan-soft); border-color:rgba(42,231,255,.18); }
.mobile-menu { display:none; }
.stat-line { display:flex; justify-content:space-between; gap:16px; padding:13px 0; border-bottom:1px solid rgba(148,163,184,.1); font-size:12px; }
.stat-line:last-child { border-bottom:0; }
.stat-line span { color:var(--muted); }
.portal-grid { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(320px,.7fr); gap:17px; }
.portal-content { padding:42px clamp(22px,5vw,80px) 70px; max-width:1500px; margin:auto; }
.portal-welcome h1 { margin:7px 0 7px; font-size:clamp(32px,5vw,52px); letter-spacing:-.045em; }
.portal-welcome p { color:var(--muted); margin:0 0 28px; }
.payment-card { padding:26px; }
.payment-card h2 { margin:7px 0 5px; }
.pix-box { margin:18px 0; padding:16px; border:1px dashed rgba(42,231,255,.4); background:var(--cyan-soft); border-radius:12px; word-break:break-all; }
.pix-box strong { color:var(--cyan); font-size:16px; }
.due-hero { padding:28px; position:relative; overflow:hidden; }
.due-hero__amount { font-size:42px; font-weight:900; letter-spacing:-.04em; margin:14px 0 7px; }
.due-hero__meta { color:var(--muted); font-size:12px; line-height:1.8; }
.profile-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; padding:22px; }
.profile-item { border:1px solid var(--line); border-radius:10px; padding:14px; background:rgba(255,255,255,.015); }
.profile-item small { color:var(--muted); display:block; margin-bottom:5px; }
.profile-item strong { font-size:12px; }
.file-note { color:var(--muted); font-size:10px; line-height:1.6; }
.code-box { font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background:#05070b; color:#9eefff; padding:12px; border:1px solid var(--line); border-radius:8px; overflow:auto; font-size:11px; }
.pagination { display:flex; gap:6px; padding:18px; justify-content:flex-end; }
.pagination a,.pagination span { min-width:34px; min-height:34px; display:grid; place-items:center; border:1px solid var(--line); border-radius:7px; font-size:11px; }
.pagination .current { background:var(--cyan-soft); color:var(--cyan); border-color:rgba(42,231,255,.3); }

@media (max-width: 1050px) {
  .dashboard-shell { grid-template-columns: 1fr; }
  .sidebar { position:relative; height:auto; padding:20px; }
  .sidebar__nav { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .sidebar__label { margin:20px 0 10px; }
  .sidebar__footer { margin-top:20px; }
  .manager-layout,.settings-grid,.portal-grid { grid-template-columns:1fr; }
  .form-panel { position:relative; top:0; }
}
@media (max-width: 760px) {
  .login-page { grid-template-columns:1fr; }
  .login-visual { min-height:auto; padding:32px 24px; }
  .hero-copy { margin:70px 0 20px; }
  .hero-copy h1 { font-size:43px; }
  .feature-row { grid-template-columns:1fr; gap:13px; }
  .login-panel { padding:24px; }
  .login-card { padding:30px 22px; }
  .metric-grid { grid-template-columns:1fr 1fr; }
  .dashboard-columns { grid-template-columns:1fr; }
  .sidebar__nav { grid-template-columns:1fr 1fr; }
  .dashboard-main { padding:28px 18px 55px; }
  .page-header { align-items:flex-start; flex-direction:column; }
  .install-grid,.form-row,.profile-grid { grid-template-columns:1fr; }
  .portal-header { height:auto; padding:16px 20px; gap:12px; }
  .portal-user > div:first-child { display:none; }
  .portal-content { padding:28px 18px 50px; }
}
@media (max-width: 480px) {
  .metric-grid { grid-template-columns:1fr; }
  .sidebar__nav { grid-template-columns:1fr; }
  .page-actions { width:100%; flex-wrap:wrap; }
  .page-actions .button { flex:1; }
}