/* ════════════════════════════════════════════════════════
   BASE
════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
.hidden { display: none !important; }

/* ════════════════════════════════════════════════════════
   AUTH PAGE
════════════════════════════════════════════════════════ */
body.auth-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4c1d95 100%);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}

.auth-container { width: 100%; max-width: 420px; }

.auth-brand { text-align: center; margin-bottom: 28px; color: #fff; }
.auth-logo { height: 44px; width: auto; margin-bottom: 12px; }
.auth-brand p  { color: #c7d2fe; font-size: 14px; }

.auth-card {
  background: #fff; border-radius: 20px; padding: 32px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.5);
}

.invite-banner {
  display: flex; gap: 12px; align-items: flex-start;
  background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 10px;
  padding: 12px 14px; margin-bottom: 20px; font-size: 14px; color: #3730a3;
}
.invite-banner span { font-size: 20px; flex-shrink: 0; }

.tabs { display:flex; gap:4px; background:#f3f4f6; border-radius:10px; padding:4px; margin-bottom:28px; }
.tab { flex:1; padding:9px; border:none; background:transparent; border-radius:7px; cursor:pointer; font-size:14px; font-weight:600; color:#6b7280; transition:all .18s; }
.tab.active { background:#fff; color:#4f46e5; box-shadow:0 1px 4px rgba(0,0,0,.12); }
.tab-content { display:none; }
.tab-content.active { display:block; }

.tab-content h2, #invite-flow h2 { font-size:20px; font-weight:700; color:#111827; margin-bottom:6px; }
.tab-content > p, #invite-flow > p { font-size:14px; color:#6b7280; margin-bottom:20px; line-height:1.5; }

.field { margin-bottom:16px; }
.field label { display:block; font-size:13px; font-weight:600; color:#374151; margin-bottom:6px; }
.field input {
  width:100%; padding:10px 14px; border:1.5px solid #e5e7eb; border-radius:10px;
  font-size:15px; color:#111827; background:#fafafa; outline:none;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.field input:focus { border-color:#6366f1; background:#fff; box-shadow:0 0 0 4px rgba(99,102,241,.12); }
.field input[readonly] { background:#f3f4f6; color:#6b7280; cursor:default; }

.btn-primary {
  display:block; width:100%; padding:12px; background:#4f46e5; color:#fff;
  border:none; border-radius:10px; font-size:15px; font-weight:700; cursor:pointer;
  margin-top:6px; transition:background .15s, transform .1s; letter-spacing:.2px;
}
.btn-primary:hover:not(:disabled) { background:#4338ca; }
.btn-primary:active:not(:disabled) { transform:scale(.98); }
.btn-primary:disabled { background:#a5b4fc; cursor:not-allowed; }

.btn-ghost { display:block; width:100%; padding:10px; background:none; border:none; font-size:14px; color:#6b7280; cursor:pointer; margin-top:8px; transition:color .15s; }
.btn-ghost:hover { color:#374151; }

.message { margin-top:16px; padding:10px 14px; border-radius:8px; font-size:13px; line-height:1.5; text-align:center; }
.message.success { background:#dcfce7; color:#166534; border:1px solid #bbf7d0; }
.message.error   { background:#fee2e2; color:#991b1b; border:1px solid #fecaca; }

#code-hint { margin-bottom:20px; line-height:1.5; font-size:14px; color:#6b7280; }
#code-hint strong { color:#4f46e5; }

/* ════════════════════════════════════════════════════════
   LOBBY PAGE
════════════════════════════════════════════════════════ */
body.lobby-page {
  min-height: 100vh;
  background: linear-gradient(160deg, #0f0f1a 0%, #1e1b4b 60%, #1a1040 100%);
  color: #f1f5f9;
}

.lobby-header {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 28px;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
  position: sticky; top: 0; z-index: 10;
}
.lobby-brand { display:flex; align-items:center; gap:12px; flex:1; }
.lobby-logo { height:32px; width:auto; }
.lobby-brand #company-name { font-size:18px; font-weight:700; color:#f1f5f9; }

.plan-tag {
  display:inline-block; padding:2px 10px; border-radius:20px; font-size:11px; font-weight:700;
  background:rgba(99,102,241,.3); color:#a5b4fc; border:1px solid rgba(99,102,241,.4);
  text-transform:uppercase; letter-spacing:.5px;
}

.lobby-header-actions { display:flex; gap:8px; }
.btn-outline-light {
  padding:8px 16px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.06);
  color:#e2e8f0; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; transition:all .15s;
}
.btn-outline-light:hover { background:rgba(255,255,255,.12); }
.btn-ghost-light { padding:8px 14px; background:none; border:none; color:#94a3b8; font-size:13px; cursor:pointer; transition:color .15s; }
.btn-ghost-light:hover { color:#e2e8f0; }

.lobby-body { max-width:900px; margin:0 auto; padding:40px 28px; }
.lobby-welcome { margin-bottom:36px; }
.lobby-welcome h1 { font-size:30px; font-weight:800; color:#f8fafc; margin-bottom:6px; }
.lobby-welcome p  { color:#94a3b8; font-size:15px; }

.offices-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; margin-bottom:24px; }

.office-card {
  background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1);
  border-radius:16px; padding:24px; display:flex; flex-direction:column; gap:12px;
  transition:all .2s; cursor:default;
}
.office-card:hover { background:rgba(255,255,255,.08); border-color:rgba(99,102,241,.5); transform:translateY(-2px); box-shadow:0 12px 32px rgba(0,0,0,.4); }

.office-icon { font-size:32px; }
.office-info { flex:1; }
.office-name { font-size:17px; font-weight:700; color:#f1f5f9; margin-bottom:4px; }
.office-meta { font-size:13px; color:#64748b; }

.btn-enter-office {
  padding:10px 16px; background:#4f46e5; color:#fff; border:none; border-radius:10px;
  font-size:14px; font-weight:700; cursor:pointer; transition:background .15s; margin-top:4px;
}
.btn-enter-office:hover { background:#4338ca; }

.btn-add-office {
  padding:12px 24px; background:rgba(99,102,241,.15); border:1px dashed rgba(99,102,241,.5);
  color:#a5b4fc; border-radius:12px; font-size:14px; font-weight:600; cursor:pointer;
  transition:all .15s; width:100%;
}
.btn-add-office:hover:not(:disabled) { background:rgba(99,102,241,.25); border-color:rgba(99,102,241,.8); }
.btn-add-office:disabled { opacity:.4; cursor:not-allowed; }

/* Modal genérico */
.modal {
  position:fixed; inset:0; background:rgba(0,0,0,.65); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; z-index:200; padding:20px;
}
.modal-box {
  background:#1e1e2e; border:1px solid rgba(255,255,255,.12); border-radius:16px;
  padding:28px; width:100%; max-width:440px;
  box-shadow:0 32px 80px rgba(0,0,0,.6);
}
.modal-box h3 { font-size:18px; font-weight:700; color:#f1f5f9; margin-bottom:8px; }
.modal-box .field label { color:#94a3b8; }
.modal-box .field input {
  background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.12); color:#f1f5f9;
}
.modal-box .field input:focus { border-color:#6366f1; background:rgba(99,102,241,.1); }
.modal-actions { display:flex; gap:10px; margin-top:20px; justify-content:flex-end; }
.modal-actions .btn-ghost { width:auto; padding:10px 16px; font-size:14px; color:#94a3b8; }
.modal-actions .btn-primary { width:auto; padding:10px 20px; font-size:14px; }

/* ════════════════════════════════════════════════════════
   MEMBERS PAGE
════════════════════════════════════════════════════════ */
body.members-page { background:#f8fafc; min-height:100vh; }

.members-header {
  display:flex; align-items:center; gap:16px; padding:16px 28px;
  background:#fff; border-bottom:1px solid #e2e8f0; position:sticky; top:0; z-index:10;
  box-shadow:0 1px 4px rgba(0,0,0,.06);
}
.members-header h1 { flex:1; font-size:20px; font-weight:700; color:#0f172a; }

.btn-back { padding:8px 14px; background:none; border:1px solid #e2e8f0; border-radius:8px; font-size:13px; color:#64748b; cursor:pointer; transition:all .15s; }
.btn-back:hover { background:#f1f5f9; color:#334155; }
.btn-primary-sm { padding:8px 16px; background:#4f46e5; color:#fff; border:none; border-radius:8px; font-size:13px; font-weight:700; cursor:pointer; transition:background .15s; }
.btn-primary-sm:hover { background:#4338ca; }

.members-body { max-width:800px; margin:0 auto; padding:32px 24px; }

/* Plano */
.plan-card {
  display:flex; gap:24px; align-items:center; background:#fff; border-radius:16px;
  padding:24px; border:1px solid #e2e8f0; box-shadow:0 1px 4px rgba(0,0,0,.06);
  margin-bottom:32px;
}
.plan-card-left { flex:1; }
.plan-label  { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:#94a3b8; margin-bottom:6px; }
.plan-name   { font-size:22px; font-weight:800; color:#0f172a; margin-bottom:4px; }
.plan-desc   { font-size:13px; color:#64748b; }
.plan-card-right { display:flex; flex-direction:column; gap:8px; min-width:200px; }
.plan-usage-label { font-size:13px; font-weight:600; color:#374151; }
.plan-bar { height:8px; background:#e2e8f0; border-radius:4px; overflow:hidden; }
.plan-bar-fill { height:100%; border-radius:4px; background:linear-gradient(90deg,#4f46e5,#818cf8); transition:width .5s ease; }
.plan-bar-fill.warn { background:linear-gradient(90deg,#f59e0b,#fbbf24); }
.plan-bar-fill.full { background:linear-gradient(90deg,#ef4444,#f87171); }
.btn-upgrade { padding:8px 14px; background:linear-gradient(135deg,#4f46e5,#7c3aed); color:#fff; border:none; border-radius:8px; font-size:13px; font-weight:700; cursor:pointer; transition:opacity .15s; }
.btn-upgrade:hover { opacity:.9; }

/* Seções */
.section { margin-bottom:32px; }
.section h2 { font-size:16px; font-weight:700; color:#0f172a; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.count-badge { background:#e0e7ff; color:#4338ca; border-radius:20px; padding:2px 10px; font-size:12px; }

.members-list { display:flex; flex-direction:column; gap:2px; }
.loading-row, .empty-row { padding:16px; color:#94a3b8; font-size:14px; text-align:center; }

.member-row {
  display:flex; align-items:center; gap:14px; padding:14px 16px;
  background:#fff; border-radius:10px; border:1px solid #f1f5f9;
  transition:border-color .15s;
}
.member-row:hover { border-color:#e0e7ff; }

.member-avatar {
  width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,#6366f1,#8b5cf6);
  color:#fff; font-size:16px; font-weight:700; display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.invite-avatar { background:linear-gradient(135deg,#94a3b8,#64748b); font-size:18px; }
.member-info { flex:1; min-width:0; }
.member-name { font-size:14px; font-weight:600; color:#0f172a; }
.member-email { font-size:13px; color:#94a3b8; }
.you-badge { display:inline-block; background:#e0e7ff; color:#4338ca; font-size:10px; font-weight:700; padding:1px 6px; border-radius:4px; margin-left:6px; }

.member-meta { display:flex; flex-direction:column; gap:4px; align-items:flex-end; }
.role-badge { display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:20px; }
.role-badge.admin   { background:#fef3c7; color:#92400e; }
.role-badge.member  { background:#f0fdf4; color:#166534; }
.role-badge.pending { background:#f1f5f9; color:#64748b; }
.join-date { font-size:11px; color:#94a3b8; }

.btn-remove { width:28px; height:28px; background:none; border:1px solid #fecaca; border-radius:6px; color:#f87171; font-size:12px; cursor:pointer; flex-shrink:0; transition:all .15s; }
.btn-remove:hover { background:#fee2e2; }

/* Modal de convite */
.modal-sub { font-size:13px; color:#94a3b8; margin-bottom:16px; }

/* Upgrade modal */
.upgrade-modal { max-width:720px; }
.upgrade-modal h3 { margin-bottom:20px; text-align:center; }
.plans-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px; }
.plan-option {
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:12px; padding:18px 14px; text-align:center; position:relative;
  transition:all .2s;
}
.plan-option.featured { border-color:#6366f1; background:rgba(99,102,241,.15); }
.plan-option.current  { opacity:.5; }
.plan-option-badge { position:absolute; top:-10px; left:50%; transform:translateX(-50%); background:#6366f1; color:#fff; font-size:10px; font-weight:700; padding:3px 10px; border-radius:20px; white-space:nowrap; }
.plan-option-name  { font-size:15px; font-weight:700; color:#f1f5f9; margin-bottom:6px; }
.plan-option-price { font-size:22px; font-weight:800; color:#f8fafc; margin-bottom:12px; }
.plan-option-price span { font-size:13px; font-weight:400; color:#94a3b8; }
.plan-option-current { font-size:11px; color:#6366f1; font-weight:700; margin-top:8px; }
.plan-option ul { list-style:none; font-size:12px; color:#94a3b8; margin-bottom:14px; }
.plan-option ul li { margin-bottom:4px; }
.plan-option ul li::before { content:'✓ '; color:#22c55e; }

/* ════════════════════════════════════════════════════════
   OFFICE PAGE
════════════════════════════════════════════════════════ */
body.office-page { overflow:hidden; background:#0f0f1a; user-select:none; }
#canvas { display:block; position:fixed; top:0; left:0; cursor:default; }

/* HUD */
#hud {
  position:fixed; top:0; left:0; right:0; height:54px;
  background:rgba(10,10,20,0.92); backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.07);
  display:flex; align-items:center; padding:0 16px; gap:12px; z-index:200;
}
#hud-left { display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
.hud-office-icon { font-size:22px; flex-shrink:0; }

/* Avatar button in HUD */
.hud-avatar-btn {
  width:36px; height:36px; border-radius:50%; padding:0; border:2px solid rgba(99,102,241,.6);
  background:rgba(99,102,241,.2); cursor:pointer; flex-shrink:0; overflow:hidden;
  transition:border-color .15s, transform .15s;
}
.hud-avatar-btn:hover { border-color:#818cf8; transform:scale(1.08); }
.hud-avatar-btn img { width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }

#hud-user { display:flex; flex-direction:column; min-width:0; }
#hud-name    { font-size:13px; font-weight:700; color:#f9fafb; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#hud-company { font-size:11px; color:#64748b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

#hud-room-badge {
  background:rgba(99,102,241,.25); border:1px solid rgba(99,102,241,.4);
  color:#a5b4fc; font-size:12px; font-weight:600; padding:4px 12px;
  border-radius:20px; white-space:nowrap;
}

#hud-controls { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.ctrl-btn {
  width:38px; height:38px; border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.07); border-radius:10px; font-size:18px;
  cursor:pointer; transition:all .15s; display:flex; align-items:center; justify-content:center;
}
.ctrl-btn:hover           { background:rgba(255,255,255,.15); }
.ctrl-btn.active          { background:rgba(99,102,241,.25); border-color:rgba(99,102,241,.5); }
.ctrl-btn:disabled        { opacity:.38; cursor:default; pointer-events:none; }
.ctrl-separator  { width:1px; height:24px; background:rgba(255,255,255,.1); margin:0 2px; }

/* Video grid */
#video-grid {
  position:fixed; top:62px; right:14px; display:flex; flex-direction:column; gap:8px;
  z-index:150; max-height:calc(100vh - 180px); overflow-y:auto; overflow-x:hidden; padding-right:2px;
}
#video-grid::-webkit-scrollbar { width:3px; }
#video-grid::-webkit-scrollbar-thumb { background:rgba(255,255,255,.15); border-radius:2px; }

.video-tile {
  width:148px; height:111px; background:#111827; border-radius:12px; overflow:hidden;
  position:relative; border:2px solid transparent; box-shadow:0 8px 24px rgba(0,0,0,.5);
  flex-shrink:0; animation:tilePop .2s ease;
}
@keyframes tilePop { from{opacity:0;transform:scale(.85) translateX(10px)} to{opacity:1;transform:scale(1) translateX(0)} }
.video-tile video { width:100%; height:100%; object-fit:cover; }
.video-label {
  position:absolute; bottom:6px; left:6px; background:rgba(0,0,0,.75);
  color:#f9fafb; font-size:10px; font-weight:600; padding:3px 8px; border-radius:6px;
  max-width:90%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Self preview */
#self-preview {
  position:fixed; bottom:54px; right:14px; width:148px; height:111px; background:#111827;
  border-radius:12px; overflow:hidden; border:2px solid #6366f1; z-index:150;
  box-shadow:0 8px 24px rgba(0,0,0,.5);
}
#self-video { width:100%; height:100%; object-fit:cover; transform:scaleX(-1); }
#self-no-cam {
  display:none; align-items:center; justify-content:center; width:100%; height:100%;
  font-size:32px; background:#111827; position:absolute; top:0; left:0;
}
#self-label {
  position:absolute; bottom:6px; left:6px; background:rgba(99,102,241,.85);
  color:#fff; font-size:10px; font-weight:700; padding:3px 8px; border-radius:6px;
}

/* Peers badge */
#peers-badge {
  position:fixed; bottom:18px; right:14px;
  background:rgba(99,102,241,.85); color:#fff; font-size:11px; font-weight:700;
  padding:4px 12px; border-radius:20px; z-index:150; box-shadow:0 2px 8px rgba(0,0,0,.3);
}

/* Instruções */
#instructions {
  position:fixed; bottom:18px; left:50%; transform:translateX(-50%);
  background:rgba(0,0,0,.65); color:#9ca3af; font-size:11px;
  padding:6px 16px; border-radius:20px; z-index:150;
  backdrop-filter:blur(4px); white-space:nowrap; pointer-events:none;
}

/* Loading */
#loading-screen {
  position:fixed; inset:0;
  background:linear-gradient(135deg,#1e1b4b 0%,#312e81 55%,#4c1d95 100%);
  display:flex; align-items:center; justify-content:center; z-index:1000;
}
.loading-inner { text-align:center; color:#fff; }
.loading-icon { font-size:72px; animation:pulse 2s ease-in-out infinite; margin-bottom:20px; }
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }
.loading-inner p { font-size:16px; color:#c7d2fe; margin-bottom:24px; font-weight:500; }
.loading-bar { width:200px; height:3px; background:rgba(255,255,255,.15); border-radius:2px; margin:0 auto; overflow:hidden; }
.loading-bar-fill { height:100%; background:#818cf8; animation:loadFill 2s ease-in-out infinite; }
@keyframes loadFill { 0%{width:0;margin-left:0} 50%{width:70%;margin-left:0} 100%{width:0;margin-left:100%} }

/* Toast */
#toast {
  position:fixed; bottom:56px; left:50%; transform:translateX(-50%) translateY(8px);
  background:rgba(17,24,39,.92); color:#f9fafb; font-size:13px; font-weight:500;
  padding:8px 18px; border-radius:24px; z-index:300; pointer-events:none;
  opacity:0; transition:opacity .25s, transform .25s;
  backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.1); white-space:nowrap;
}
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ── Profile Sidebar ───────────────────────────────────────────────────── */
#profile-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:400;
  backdrop-filter:blur(2px); transition:opacity .2s;
}
#profile-overlay.hidden { display:none; }

#profile-sidebar {
  position:fixed; top:0; right:0; bottom:0; width:320px;
  background:#0f172a; border-left:1px solid rgba(255,255,255,.08);
  z-index:401; display:flex; flex-direction:column;
  transform:translateX(0); transition:transform .25s cubic-bezier(.4,0,.2,1);
  box-shadow:-8px 0 32px rgba(0,0,0,.5);
}
#profile-sidebar.hidden { transform:translateX(100%); display:flex !important; }

.profile-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px 14px; border-bottom:1px solid rgba(255,255,255,.07);
}
.profile-title { font-size:16px; font-weight:700; color:#f1f5f9; }
.profile-close-btn {
  width:30px; height:30px; border-radius:8px; border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.06); color:#94a3b8; cursor:pointer; font-size:13px;
  display:flex; align-items:center; justify-content:center; transition:background .15s;
}
.profile-close-btn:hover { background:rgba(255,255,255,.12); color:#f1f5f9; }

.profile-avatar-section {
  display:flex; flex-direction:column; align-items:center; padding:28px 20px 20px; gap:10px;
}
.profile-avatar-big {
  width:96px; height:96px; border-radius:50%; border:3px solid rgba(99,102,241,.6);
  background:rgba(99,102,241,.15); object-fit:cover;
}
.profile-avatar-hint { font-size:11px; color:#475569; text-align:center; }

.profile-form { padding:0 20px 24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.profile-label { font-size:11px; font-weight:600; color:#64748b; text-transform:uppercase; letter-spacing:.05em; }
.profile-input {
  width:100%; padding:9px 12px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  border-radius:9px; color:#f1f5f9; font-size:14px; outline:none; box-sizing:border-box;
  transition:border-color .15s;
}
.profile-input:focus { border-color:rgba(99,102,241,.6); background:rgba(99,102,241,.08); }
.profile-input-disabled { opacity:.45; cursor:not-allowed; }
.profile-save-btn {
  margin-top:6px; padding:10px; background:#4f46e5; border:none; border-radius:10px;
  color:#fff; font-size:14px; font-weight:600; cursor:pointer; transition:background .15s;
}
.profile-save-btn:hover { background:#4338ca; }
.profile-save-btn:disabled { background:#312e81; opacity:.6; cursor:not-allowed; }
.profile-msg { font-size:13px; text-align:center; margin:0; }
.profile-msg.ok  { color:#22c55e; }
.profile-msg.err { color:#f87171; }

/* ══════════════════════════════════════════════════════════════════════════
   TRIAL BANNER
══════════════════════════════════════════════════════════════════════════ */
.trial-banner {
  width:100%; padding:11px 20px; font-size:13px; font-weight:500;
  text-align:center; box-sizing:border-box;
}
.trial-banner a { color:inherit; font-weight:700; text-decoration:underline; }
.trial-banner.trial    { background:#312e81; color:#c7d2fe; }
.trial-banner.expired  { background:#7f1d1d; color:#fecaca; }
.trial-banner.active   { background:#14532d; color:#bbf7d0; }
.trial-banner.hidden   { display:none; }

/* ══════════════════════════════════════════════════════════════════════════
   PLANS PAGE
══════════════════════════════════════════════════════════════════════════ */
.plans-page { background:#0f172a; color:#f1f5f9; min-height:100vh; font-family:system-ui,sans-serif; }

.plans-header {
  display:flex; align-items:center; gap:16px;
  padding:16px 32px; border-bottom:1px solid rgba(255,255,255,.07);
}
.plans-logo { height:28px; }

.plans-hero { text-align:center; padding:56px 20px 32px; }
.plans-hero h1 { font-size:clamp(26px,4vw,42px); font-weight:800; margin:0 0 10px; }
.plans-hero p  { color:#94a3b8; font-size:16px; margin:0; }

.plans-grid-outer { display:flex; justify-content:center; padding:0 20px 48px; }
.plans-grid-cards {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  gap:24px; max-width:900px; width:100%;
}

.plan-card-pricing {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
  border-radius:20px; padding:32px 28px; display:flex; flex-direction:column; gap:16px;
  position:relative; transition:border-color .2s, transform .2s;
}
.plan-card-pricing:hover { border-color:rgba(99,102,241,.4); transform:translateY(-3px); }
.plan-card-pricing.featured {
  background:rgba(99,102,241,.12); border-color:rgba(99,102,241,.5);
  box-shadow:0 0 40px rgba(99,102,241,.15);
}
.plan-card-pricing.current-plan { border-color:#22c55e; }

.plan-badge {
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:#6366f1; color:#fff; font-size:11px; font-weight:700;
  padding:3px 14px; border-radius:20px; letter-spacing:.06em; text-transform:uppercase;
}
.plan-card-label { font-size:18px; font-weight:700; color:#e2e8f0; }
.plan-card-price  { font-size:36px; font-weight:800; color:#f1f5f9; line-height:1; }
.plan-card-price span { font-size:15px; font-weight:400; color:#64748b; }

.plan-features { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; flex:1; }
.plan-features li { font-size:14px; color:#94a3b8; }
.plan-features li::before { content:''; }

.btn-plan {
  width:100%; padding:12px; border:1px solid rgba(255,255,255,.15); border-radius:12px;
  background:rgba(255,255,255,.06); color:#e2e8f0; font-size:14px; font-weight:600;
  cursor:pointer; transition:all .18s; margin-top:auto;
}
.btn-plan:hover    { background:rgba(99,102,241,.3); border-color:rgba(99,102,241,.6); color:#fff; }
.btn-plan.featured { background:#6366f1; border-color:#6366f1; color:#fff; }
.btn-plan.featured:hover { background:#4f46e5; }
.btn-plan:disabled { opacity:.45; cursor:default; pointer-events:none; }

.stripe-feedback {
  max-width:600px; margin:16px auto; padding:14px 20px; border-radius:12px;
  font-size:14px; font-weight:500; text-align:center;
}
.stripe-feedback.success { background:rgba(34,197,94,.15); border:1px solid rgba(34,197,94,.3); color:#bbf7d0; }
.stripe-feedback.warn    { background:rgba(234,179,8,.15);  border:1px solid rgba(234,179,8,.3);  color:#fef08a; }
.stripe-feedback.hidden  { display:none; }

.plans-footer-note { text-align:center; color:#475569; font-size:12px; padding-bottom:48px; }

/* ══════════════════════════════════════════════════════════════════════════
   BILLING PAGE
══════════════════════════════════════════════════════════════════════════ */
.billing-summary {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:24px 28px; margin-bottom:24px;
  display:flex; gap:32px; flex-wrap:wrap; align-items:flex-start;
}
.billing-sum-item { display:flex; flex-direction:column; gap:4px; }
.billing-sum-label { font-size:11px; font-weight:600; color:#64748b; text-transform:uppercase; letter-spacing:.05em; }
.billing-sum-value { font-size:16px; font-weight:700; color:#e2e8f0; }
.billing-sum-value.status-active    { color:#22c55e; }
.billing-sum-value.status-trial     { color:#818cf8; }
.billing-sum-value.status-expired,
.billing-sum-value.status-cancelled { color:#f87171; }

.billing-table { width:100%; border-collapse:collapse; font-size:14px; }
.billing-table th {
  text-align:left; padding:10px 14px; font-size:11px; font-weight:600;
  color:#64748b; text-transform:uppercase; letter-spacing:.05em;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.billing-table td {
  padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.05); color:#cbd5e1;
}
.billing-table tr:last-child td { border-bottom:none; }
.billing-empty { text-align:center; color:#475569; padding:32px !important; }

.billing-status { font-size:12px; font-weight:600; padding:3px 10px; border-radius:20px; }
.status-paid    { background:rgba(34,197,94,.15); color:#22c55e; }
.status-pending { background:rgba(234,179,8,.15);  color:#ca8a04; }
.status-failed  { background:rgba(239,68,68,.15);  color:#f87171; }