/* ════════════════════════════════════════════════════════════════════════════════ FROGGY PIXEL — SETTINGS PAGE PREMIUM v2 Design System: Aligned with CC & Landing All classnames: new-settings-* ════════════════════════════════════════════════════════════════════════════════ */ :root { --ns-primary-700: #6d28d9; --ns-primary-600: #7c3aed; --ns-primary-500: #8b5cf6; --ns-primary-400: #a78bfa; --ns-primary-300: #c4b5fd; --ns-primary-200: #ddd6fe; --ns-primary-100: #ede9fe; --ns-primary-50: #f5f3ff; --ns-secondary-600: #3b82f6; --ns-secondary-500: #60a5fa; --ns-accent-600: #10b981; --ns-accent-500: #34d399; --ns-neutral-800: #1e293b; --ns-neutral-700: #334155; --ns-neutral-600: #475569; --ns-neutral-500: #64748b; --ns-neutral-400: #94a3b8; --ns-neutral-300: #cbd5e1; --ns-neutral-200: #e2e8f0; --ns-neutral-100: #f1f5f9; --ns-neutral-50: #f8fafc; --ns-white: #ffffff; --ns-success: #10b981; --ns-warning: #f59e0b; --ns-error: #ef4444; --ns-font-display: 'Space Grotesk', system-ui, sans-serif; --ns-font-body: 'Inter', system-ui, sans-serif; --ns-radius-sm: 8px; --ns-radius-md: 12px; --ns-radius-lg: 16px; --ns-radius-xl: 20px; --ns-radius-2xl: 24px; --ns-radius-full: 9999px; --ns-shadow-xs: 0 1px 2px rgba(0,0,0,0.04); --ns-shadow-sm: 0 2px 6px rgba(0,0,0,0.06); --ns-shadow-md: 0 4px 14px rgba(0,0,0,0.08); --ns-shadow-lg: 0 8px 28px rgba(0,0,0,0.1); --ns-shadow-glow: 0 0 36px rgba(124,58,237,0.1); --ns-ease: 300ms ease-out; --ns-ease-spring: 500ms cubic-bezier(0.34,1.56,0.64,1); } /* ═══ ANIMATIONS ═══ */ @keyframes ns-fadeInUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} } @keyframes ns-fadeIn { from{opacity:0} to{opacity:1} } @keyframes ns-slideDown { from{opacity:0;transform:translateY(-12px)} to{opacity:1;transform:translateY(0)} } @keyframes ns-scaleIn { from{opacity:0;transform:scale(.96)} to{opacity:1;transform:scale(1)} } @keyframes ns-blob-drift { 0%,100%{transform:translate(0,0) scale(1) rotate(0)} 33%{transform:translate(10px,-18px) scale(1.03) rotate(60deg)} 66%{transform:translate(-8px,8px) scale(.97) rotate(120deg)} } @keyframes ns-pulse-ring { 0%,100%{box-shadow:0 0 0 0 rgba(124,58,237,.12)} 50%{box-shadow:0 0 0 10px rgba(124,58,237,0)} } @keyframes ns-gradient-flow { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} } @keyframes ns-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} } @keyframes ns-badge-pop { from{opacity:0;transform:translateY(-6px) scale(.9)} to{opacity:1;transform:translateY(0) scale(1)} } @keyframes ns-card-in { from{opacity:0;transform:translateY(16px) scale(.98)} to{opacity:1;transform:translateY(0) scale(1)} } /* ═══ PAGE SHELL — position:absolute blobs, NOT fixed ═══ */ .new-settings-shell { position: relative; width: 100%; min-height: calc(100vh - 60px); overflow: hidden; padding: 1.75rem 2rem 3rem; } .new-settings-blob-1 { position:absolute; width:420px; height:420px; background:radial-gradient(circle at 40% 40%,rgba(124,58,237,.09) 0%,transparent 60%); border-radius:40% 60% 65% 35%/45% 55% 45% 55%; top:-120px; left:-80px; animation:ns-blob-drift 28s ease-in-out infinite; filter:blur(50px); pointer-events:none; z-index:0; } .new-settings-blob-2 { position:absolute; width:360px; height:360px; background:radial-gradient(circle at 60% 60%,rgba(59,130,246,.07) 0%,transparent 60%); border-radius:55% 45% 40% 60%/50% 40% 60% 50%; bottom:-80px; right:-60px; animation:ns-blob-drift 32s ease-in-out infinite reverse; filter:blur(50px); pointer-events:none; z-index:0; } .new-settings-blob-3 { position:absolute; width:280px; height:280px; background:radial-gradient(circle at 50% 50%,rgba(16,185,129,.05) 0%,transparent 60%); border-radius:35% 65% 55% 45%/55% 35% 65% 45%; top:50%; right:15%; animation:ns-blob-drift 22s ease-in-out infinite; filter:blur(45px); pointer-events:none; z-index:0; } .new-settings-grid-bg { position:absolute; inset:0; background-image:linear-gradient(rgba(124,58,237,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(124,58,237,.018) 1px,transparent 1px); background-size:56px 56px; pointer-events:none; z-index:0; } /* ═══ PAGE HEADER ═══ */ .new-settings-page-header { position:relative; z-index:1; margin-bottom:1.75rem; animation:ns-slideDown .6s ease-out; } .new-settings-page-badge { display:inline-flex; align-items:center; gap:.45rem; background:linear-gradient(135deg,rgba(124,58,237,.08),rgba(59,130,246,.06)); border:1.5px solid rgba(124,58,237,.2); border-radius:var(--ns-radius-full); padding:.4rem 1rem; font-size:.63rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--ns-primary-600); font-family:var(--ns-font-display); margin-bottom:.75rem; backdrop-filter:blur(8px); animation:ns-badge-pop .5s ease-out .1s both; } .new-settings-page-title { font-family:var(--ns-font-display); font-size:clamp(1.35rem,3vw,1.8rem); font-weight:900; letter-spacing:-.03em; line-height:1.2; margin:0; background:linear-gradient(135deg,#1e1b4b,#312e81 50%,#1e3a8a); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .new-settings-page-subtitle { font-size:.88rem; color:var(--ns-neutral-500); margin:.3rem 0 0; font-weight:400; } /* ═══ MAIN LAYOUT ═══ */ .new-settings-layout { position:relative; z-index:1; display:grid; grid-template-columns:260px 1fr; gap:1.75rem; animation:ns-fadeInUp .65s ease-out .1s both; } /* ═══ SIDEBAR ═══ */ .new-settings-sidebar { position:sticky; top:80px; height:fit-content; background:linear-gradient(135deg,rgba(255,255,255,.85),rgba(255,255,255,.72)); backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px); border:1.5px solid rgba(124,58,237,.1); border-radius:var(--ns-radius-2xl); padding:1.5rem 1.15rem; box-shadow:var(--ns-shadow-lg),var(--ns-shadow-glow); animation:ns-card-in .55s ease-out .15s both; overflow:hidden; } .new-settings-sidebar::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--ns-primary-600),var(--ns-secondary-600),var(--ns-accent-600)); border-radius:var(--ns-radius-2xl) var(--ns-radius-2xl) 0 0; } /* Sidebar user mini-card */ .new-settings-sidebar-user { display:flex; align-items:center; gap:.7rem; padding:.8rem; background:linear-gradient(135deg,rgba(124,58,237,.05),rgba(59,130,246,.03)); border:1px solid rgba(124,58,237,.08); border-radius:var(--ns-radius-lg); margin-bottom:1.35rem; transition:all var(--ns-ease); } .new-settings-sidebar-user:hover { border-color:rgba(124,58,237,.18); box-shadow:0 4px 14px rgba(124,58,237,.06); } .new-settings-sidebar-user-avatar { border:2px solid rgba(124,58,237,.25)!important; box-shadow:0 4px 12px rgba(124,58,237,.12)!important; } .new-settings-sidebar-user-name { font-family:var(--ns-font-display); font-size:.82rem; font-weight:700; color:var(--ns-neutral-800); margin:0; line-height:1.3; } .new-settings-sidebar-user-plan { display:inline-flex; align-items:center; gap:.25rem; font-size:.6rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:.12rem .5rem; border-radius:var(--ns-radius-full); margin-top:.15rem; } .new-settings-plan-badge-free { background:rgba(107,114,128,.1); color:#6b7280; } .new-settings-plan-badge-premium { background:linear-gradient(135deg,rgba(124,58,237,.12),rgba(59,130,246,.08)); color:var(--ns-primary-600); } /* Group titles */ .new-settings-sidebar-group { font-family:var(--ns-font-display); font-size:.6rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--ns-neutral-400); margin:0 0 .55rem .6rem; padding:0; } .new-settings-sidebar-group:not(:first-of-type) { margin-top:1.2rem; } /* Nav btns */ .new-settings-nav-btn { display:flex!important; align-items:center!important; gap:.65rem!important; width:100%!important; padding:.6rem .85rem!important; margin-bottom:.2rem!important; border-radius:var(--ns-radius-md)!important; border:1.5px solid transparent!important; background:transparent!important; color:var(--ns-neutral-500)!important; font-family:var(--ns-font-body)!important; font-size:.84rem!important; font-weight:600!important; cursor:pointer!important; transition:all var(--ns-ease)!important; text-align:left!important; justify-content:flex-start!important; position:relative!important; } .new-settings-nav-btn:hover { background:linear-gradient(135deg,rgba(124,58,237,.05),rgba(59,130,246,.03))!important; color:var(--ns-primary-600)!important; border-color:rgba(124,58,237,.1)!important; transform:translateX(3px)!important; } .new-settings-nav-btn.active { background:linear-gradient(135deg,rgba(124,58,237,.09),rgba(59,130,246,.05))!important; color:var(--ns-primary-600)!important; border-color:rgba(124,58,237,.22)!important; font-weight:700!important; box-shadow:0 4px 12px rgba(124,58,237,.08)!important; } .new-settings-nav-btn.active::after { content:''; position:absolute; left:-1px; top:20%; height:60%; width:3px; background:linear-gradient(180deg,var(--ns-primary-600),var(--ns-secondary-600)); border-radius:0 3px 3px 0; } /* ═══ CONTENT AREA ═══ */ .new-settings-content-area { background:linear-gradient(135deg,rgba(255,255,255,.85),rgba(255,255,255,.72)); backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px); border:1.5px solid rgba(124,58,237,.1); border-radius:var(--ns-radius-2xl); padding:2rem 2.15rem; box-shadow:var(--ns-shadow-lg),var(--ns-shadow-glow); animation:ns-card-in .55s ease-out .22s both; min-height:480px; position:relative; overflow:hidden; } .new-settings-content-area::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--ns-primary-600),var(--ns-secondary-600),var(--ns-accent-600)); border-radius:var(--ns-radius-2xl) var(--ns-radius-2xl) 0 0; } .new-settings-content-inner { animation:ns-fadeIn .35s ease-out; } /* ═══ SECTION HEADERS ═══ */ .new-settings-section-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; margin-bottom:1.75rem; padding-bottom:1.1rem; border-bottom:1.5px solid rgba(124,58,237,.07); animation:ns-slideDown .45s ease-out; } .new-settings-section-header-left { display:flex; align-items:center; gap:.75rem; } .new-settings-section-icon { width:42px; height:42px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,rgba(124,58,237,.1),rgba(59,130,246,.07)); border-radius:var(--ns-radius-md); flex-shrink:0; transition:all var(--ns-ease); animation:ns-float 3.5s ease-in-out infinite; } .new-settings-section-header:hover .new-settings-section-icon { transform:scale(1.08) rotate(-5deg); background:linear-gradient(135deg,rgba(124,58,237,.16),rgba(59,130,246,.1)); } .new-settings-section-title { font-family:var(--ns-font-display); font-size:1.12rem; font-weight:800; letter-spacing:-.01em; color:var(--ns-neutral-800); margin:0; } .new-settings-section-badge { display:inline-flex; align-items:center; gap:.3rem; font-size:.6rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:.25rem .7rem; border-radius:var(--ns-radius-full); animation:ns-badge-pop .4s ease-out; } .new-settings-badge-free { background:rgba(107,114,128,.1); color:#6b7280; border:1px solid rgba(107,114,128,.15); } .new-settings-badge-premium { background:linear-gradient(135deg,rgba(124,58,237,.1),rgba(59,130,246,.08)); color:var(--ns-primary-600); border:1px solid rgba(124,58,237,.2); } /* ═══ PROFILE ═══ */ .new-settings-profile-hero { display:flex; align-items:center; gap:1.5rem; padding:1.3rem 1.4rem; background:linear-gradient(135deg,rgba(124,58,237,.035),rgba(59,130,246,.025)); border:1.5px solid rgba(124,58,237,.08); border-radius:var(--ns-radius-xl); margin-bottom:1.75rem; animation:ns-card-in .5s ease-out .08s both; transition:all var(--ns-ease); } .new-settings-profile-hero:hover { border-color:rgba(124,58,237,.18); box-shadow:0 8px 24px rgba(124,58,237,.06); transform:translateY(-2px); } .new-settings-avatar { border:3px solid rgba(124,58,237,.2)!important; box-shadow:0 6px 20px rgba(124,58,237,.12)!important; transition:all var(--ns-ease)!important; } .new-settings-profile-hero:hover .new-settings-avatar { border-color:rgba(124,58,237,.4)!important; box-shadow:0 10px 28px rgba(124,58,237,.18)!important; } .new-settings-profile-name { font-family:var(--ns-font-display); font-size:1.08rem; font-weight:700; color:var(--ns-neutral-800); margin:0 0 .3rem; } .new-settings-profile-meta { display:flex; align-items:center; gap:.45rem; font-size:.84rem; color:var(--ns-neutral-500); margin-bottom:.18rem; } /* ═══ INFO CARDS ═══ */ .new-settings-info-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.85rem; margin-bottom:1.5rem; animation:ns-card-in .5s ease-out .12s both; } .new-settings-info-card { background:var(--ns-white); border:1.5px solid rgba(124,58,237,.07); border-radius:var(--ns-radius-lg); padding:1rem 1.1rem; transition:all var(--ns-ease); box-shadow:var(--ns-shadow-xs); } .new-settings-info-card:hover { border-color:rgba(124,58,237,.2); box-shadow:var(--ns-shadow-md); transform:translateY(-3px); } .new-settings-info-card-header { display:flex; align-items:center; gap:.45rem; margin-bottom:.5rem; } .new-settings-info-card-icon { color:var(--ns-primary-500); } .new-settings-info-card-label { font-family:var(--ns-font-display); font-size:.73rem; font-weight:700; color:var(--ns-neutral-500); margin:0; } .new-settings-info-card-value { font-size:.88rem; font-weight:600; color:var(--ns-neutral-800); margin:0; } /* ═══ LINKED EMAIL ═══ */ .new-settings-linked-section { margin-bottom:1.5rem; animation:ns-card-in .5s ease-out .16s both; } .new-settings-linked-header { display:flex; align-items:center; gap:.45rem; margin-bottom:.8rem; } .new-settings-linked-header-text { font-family:var(--ns-font-display); font-size:.84rem; font-weight:700; color:var(--ns-neutral-700); margin:0; } .new-settings-linked-card { display:flex; align-items:center; gap:.85rem; padding:.85rem 1.05rem; background:var(--ns-white); border:1.5px solid rgba(124,58,237,.07); border-radius:var(--ns-radius-lg); box-shadow:var(--ns-shadow-xs); transition:all var(--ns-ease); } .new-settings-linked-card:hover { border-color:rgba(124,58,237,.18); box-shadow:var(--ns-shadow-sm); transform:translateY(-2px); } .new-settings-linked-icon { width:36px; height:36px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,rgba(124,58,237,.06),rgba(59,130,246,.04)); border-radius:var(--ns-radius-sm); flex-shrink:0; } .new-settings-linked-email { font-weight:600; color:var(--ns-neutral-800); margin:0 0 .1rem; font-size:.86rem; } .new-settings-linked-label { font-size:.73rem; color:var(--ns-neutral-400); } .new-settings-divider { height:1px; background:linear-gradient(90deg,transparent,rgba(124,58,237,.1),transparent); margin:1.3rem 0; } /* ═══ SUBSCRIPTION ═══ */ .new-settings-sub-card { border-radius:var(--ns-radius-xl); border:1.5px solid rgba(124,58,237,.1); overflow:hidden; box-shadow:var(--ns-shadow-lg); animation:ns-card-in .55s ease-out .1s both; transition:all var(--ns-ease); background:var(--ns-white); } .new-settings-sub-card:hover { box-shadow:0 14px 40px rgba(124,58,237,.1); transform:translateY(-2px); } .new-settings-sub-banner { padding:1.3rem 1.7rem; display:flex; justify-content:space-between; align-items:center; } .new-settings-sub-banner-free { background:linear-gradient(135deg,#94a3b8,#64748b); } .new-settings-sub-banner-premium { background:linear-gradient(135deg,#7c3aed,#3b82f6); } .new-settings-sub-banner-title { font-family:var(--ns-font-display); font-size:1.08rem; font-weight:800; color:#fff; margin:0; letter-spacing:-.01em; } .new-settings-sub-banner-label { display:inline-flex; align-items:center; gap:.25rem; font-size:.62rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:.2rem .6rem; border-radius:var(--ns-radius-full); background:rgba(255,255,255,.2); color:#fff; backdrop-filter:blur(4px); } .new-settings-sub-body { padding:1.7rem; } .new-settings-sub-stats { display:grid; grid-template-columns:repeat(2,1fr); gap:.85rem; margin-bottom:1.5rem; } .new-settings-sub-stat { background:var(--ns-neutral-50); border:1px solid rgba(124,58,237,.06); border-radius:var(--ns-radius-md); padding:.9rem 1rem; transition:all var(--ns-ease); } .new-settings-sub-stat:hover { border-color:rgba(124,58,237,.14); box-shadow:var(--ns-shadow-sm); transform:translateY(-2px); } .new-settings-sub-stat-header { display:flex; align-items:center; gap:.45rem; margin-bottom:.4rem; } .new-settings-sub-stat-label { font-size:.78rem; font-weight:700; color:var(--ns-neutral-600); margin:0; } .new-settings-sub-stat-value { font-family:var(--ns-font-display); font-size:.98rem; font-weight:700; color:var(--ns-neutral-800); margin:0; } .new-settings-sub-stat-value-muted { color:var(--ns-neutral-400); } .new-settings-sub-details { margin-bottom:1.5rem; } .new-settings-sub-details-title { font-family:var(--ns-font-display); font-size:.84rem; font-weight:700; color:var(--ns-neutral-700); margin:0 0 .7rem; } .new-settings-sub-details-wrap { background:var(--ns-neutral-50); border-radius:var(--ns-radius-md); padding:.3rem; } .new-settings-sub-detail-row { display:flex; justify-content:space-between; align-items:center; padding:.6rem .75rem; border-radius:var(--ns-radius-sm); transition:background var(--ns-ease); } .new-settings-sub-detail-row:hover { background:rgba(124,58,237,.025); } .new-settings-sub-detail-left { display:flex; align-items:center; gap:.5rem; } .new-settings-sub-detail-label { font-size:.84rem; color:var(--ns-neutral-500); } .new-settings-sub-detail-value { font-size:.84rem; font-weight:700; } .new-settings-sub-benefits { padding:1.1rem 1.3rem; border-radius:var(--ns-radius-lg); margin-bottom:1.5rem; } .new-settings-sub-benefits-free { background:linear-gradient(135deg,#f3f4f6,#e5e7eb); border-left:3px solid #94a3b8; } .new-settings-sub-benefits-premium { background:linear-gradient(135deg,#f0f9ff,#e0f2fe); border-left:3px solid var(--ns-primary-500); } .new-settings-sub-benefits-title { font-family:var(--ns-font-display); font-size:.84rem; font-weight:700; color:var(--ns-neutral-700); margin:0 0 .7rem; } .new-settings-sub-benefit-item { display:flex; align-items:center; gap:.55rem; margin-bottom:.45rem; } .new-settings-sub-benefit-item:last-child { margin-bottom:0; } .new-settings-sub-benefit-text { font-size:.84rem; color:var(--ns-neutral-700); } .new-settings-sub-actions { display:flex; justify-content:flex-start; gap:.85rem; } /* ═══ PAYMENT CARDS ═══ */ .new-settings-pm-card { background:var(--ns-white); border:1.5px solid rgba(124,58,237,.07); border-radius:var(--ns-radius-xl); padding:1.3rem; box-shadow:var(--ns-shadow-sm); transition:all var(--ns-ease-spring); height:100%; position:relative; overflow:hidden; } .new-settings-pm-card::after { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--ns-primary-600),var(--ns-secondary-600)); opacity:0; transition:opacity var(--ns-ease); } .new-settings-pm-card:hover { border-color:rgba(124,58,237,.2); box-shadow:0 12px 32px rgba(124,58,237,.08); transform:translateY(-4px); } .new-settings-pm-card:hover::after { opacity:1; } .new-settings-pm-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:.85rem; } .new-settings-pm-brand { display:flex; align-items:center; gap:.6rem; } .new-settings-pm-brand-name { font-family:var(--ns-font-display); font-weight:700; font-size:.86rem; color:var(--ns-neutral-800); margin:0; } .new-settings-pm-brand-type { font-size:.73rem; color:var(--ns-neutral-400); display:block; } .new-settings-pm-digits { display:flex; align-items:center; gap:.1rem; margin-bottom:.85rem; } .new-settings-pm-dots { font-size:1.02rem; color:var(--ns-neutral-300); letter-spacing:.12rem; } .new-settings-pm-last4 { font-family:var(--ns-font-display); font-size:1.02rem; font-weight:700; color:var(--ns-neutral-800); letter-spacing:.12rem; } .new-settings-pm-footer { display:flex; justify-content:space-between; align-items:flex-end; } .new-settings-pm-detail-label { font-size:.68rem; color:var(--ns-neutral-400); display:block; margin-bottom:.1rem; } .new-settings-pm-detail-value { font-size:.84rem; font-weight:600; color:var(--ns-neutral-700); } .new-settings-pm-created { display:flex; align-items:center; gap:.3rem; margin-top:.6rem; font-size:.68rem; color:var(--ns-neutral-400); } /* ═══ EMPTY STATES ═══ */ .new-settings-empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:3rem 2rem; text-align:center; animation:ns-fadeInUp .5s ease-out; } .new-settings-empty-icon-wrap { width:100px; height:100px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,rgba(124,58,237,.07),rgba(59,130,246,.05)); border-radius:50%; margin-bottom:1.2rem; animation:ns-pulse-ring 3s ease-in-out infinite; } .new-settings-empty-title { font-family:var(--ns-font-display); font-size:.98rem; font-weight:700; color:var(--ns-neutral-700); margin:0 0 .5rem; } .new-settings-empty-desc { font-size:.86rem; color:var(--ns-neutral-500); max-width:380px; line-height:1.6; margin:0 0 1.2rem; } .new-settings-empty-info { display:flex; align-items:flex-start; gap:.55rem; background:linear-gradient(135deg,rgba(124,58,237,.05),rgba(59,130,246,.03)); border:1px solid rgba(124,58,237,.1); border-radius:var(--ns-radius-lg); padding:.85rem; max-width:380px; margin-bottom:1.2rem; text-align:left; } .new-settings-empty-info-text { font-size:.78rem; color:var(--ns-neutral-500); line-height:1.5; } /* ═══ LOADER ═══ */ .new-settings-loader { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:4rem 2rem; animation:ns-fadeIn .45s ease-out; } .new-settings-loader-icon-wrap { width:52px; height:52px; border-radius:var(--ns-radius-lg); background:linear-gradient(135deg,var(--ns-primary-600),var(--ns-secondary-600)); display:flex; align-items:center; justify-content:center; margin-bottom:1.3rem; box-shadow:0 8px 28px rgba(124,58,237,.28); animation:ns-pulse-ring 2s ease-in-out infinite; } .new-settings-loader-title { font-family:var(--ns-font-display); font-size:.92rem; font-weight:700; color:var(--ns-neutral-700); margin:0 0 .25rem; } .new-settings-loader-desc { font-size:.84rem; color:var(--ns-neutral-500); margin:0; } .new-settings-loader-bar-wrap { width:160px; margin-top:1.1rem; } .new-settings-loader-bar { width:100%; height:3px; background:linear-gradient(90deg,var(--ns-primary-600),var(--ns-secondary-600),var(--ns-accent-600),var(--ns-primary-600)); background-size:200% 100%; border-radius:3px; animation:ns-gradient-flow 1.8s ease infinite; } /* ═══ BUTTONS ═══ */ .new-settings-btn-primary { display:inline-flex!important; align-items:center!important; gap:.45rem!important; padding:.62rem 1.3rem!important; font-family:var(--ns-font-body)!important; font-size:.84rem!important; font-weight:700!important; background:linear-gradient(135deg,var(--ns-primary-600),var(--ns-secondary-600))!important; color:white!important; border:none!important; border-radius:var(--ns-radius-lg)!important; cursor:pointer!important; box-shadow:0 6px 20px rgba(124,58,237,.28)!important; transition:all var(--ns-ease-spring)!important; position:relative!important; overflow:hidden!important; } .new-settings-btn-primary::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent); transition:left .5s ease; } .new-settings-btn-primary:hover { transform:translateY(-2px)!important; box-shadow:0 10px 30px rgba(124,58,237,.35)!important; } .new-settings-btn-primary:hover::before { left:100%; } .new-settings-btn-outline { background:rgba(124,58,237,.05)!important; color:var(--ns-primary-600)!important; border:1.5px solid rgba(124,58,237,.18)!important; border-radius:var(--ns-radius-lg)!important; font-weight:600!important; transition:all var(--ns-ease)!important; } .new-settings-btn-outline:hover { background:rgba(124,58,237,.1)!important; border-color:var(--ns-primary-500)!important; transform:translateY(-2px)!important; box-shadow:0 6px 18px rgba(124,58,237,.12)!important; } .new-settings-btn-upgrade { font-weight:700!important; box-shadow:0 6px 22px rgba(139,92,246,.35)!important; } /* ═══ MODALS ═══ */ .new-settings-modal .modal-content { border:1.5px solid rgba(124,58,237,.12)!important; border-radius:var(--ns-radius-2xl)!important; box-shadow:0 32px 80px rgba(124,58,237,.16)!important; overflow:hidden!important; animation:ns-scaleIn .3s ease-out!important; background:var(--ns-white)!important; } .new-settings-modal .modal-header { background:linear-gradient(135deg,rgba(124,58,237,.04),rgba(59,130,246,.03))!important; border-bottom:1px solid rgba(124,58,237,.07)!important; padding:1.1rem 1.3rem!important; } .new-settings-modal .modal-footer { border-top:1px solid rgba(124,58,237,.06)!important; padding:.85rem 1.3rem!important; background:rgba(248,250,252,.5)!important; gap:.65rem!important; } .new-settings-modal-icon-wrap { display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:var(--ns-radius-sm); margin-right:.65rem; } .new-settings-modal-icon-red { background:linear-gradient(135deg,#fee2e2,#fecaca); } .new-settings-modal-icon-blue { background:linear-gradient(135deg,#e0e7ff,#c7d2fe); } .new-settings-modal-title { font-family:var(--ns-font-display); font-size:.98rem; font-weight:700; color:var(--ns-neutral-800); } /* ═══ RESPONSIVE ═══ */ @media(max-width:1024px) { .new-settings-layout{grid-template-columns:230px 1fr; gap:1.2rem;} } @media(max-width:768px) { .new-settings-shell{padding:1rem;} .new-settings-layout{grid-template-columns:1fr; gap:1rem;} .new-settings-sidebar{position:static; padding:1.1rem .95rem;} .new-settings-sidebar-user{display:none;} .new-settings-content-area{padding:1.3rem;} .new-settings-info-grid,.new-settings-sub-stats{grid-template-columns:1fr;} .new-settings-profile-hero{flex-direction:column; text-align:center; gap:.85rem;} .new-settings-sub-actions{flex-direction:column;} .new-settings-pm-footer{flex-direction:column; align-items:flex-start; gap:.6rem;} } @media(max-width:576px) { .new-settings-content-area{padding:1.1rem; border-radius:var(--ns-radius-xl);} .new-settings-sidebar{border-radius:var(--ns-radius-xl); padding:.85rem;} .new-settings-section-title{font-size:1rem;} .new-settings-page-title{font-size:1.2rem;} } @media(prefers-reduced-motion:reduce) { *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important;} } ::selection { background:rgba(124,58,237,.2); color:var(--ns-neutral-800); } /* ════════════════════════════════════════════════════════════════════════════════ SETTINGS v2 — ADICIONES CSS Homologación con /brand: nav groups con headers + empty state premium ─── AGREGAR AL FINAL del CSS existente de settings ─── ════════════════════════════════════════════════════════════════════════════════ */ /* ──────────────────────────────────────────── 📋 NAV GROUPS — Estructura de secciones del sidebar (Réplica de marca-nav-group / marca-nav-section-header) ──────────────────────────────────────────── */ .new-settings-nav-group { margin-bottom: 0.75rem; } .new-settings-nav-group:last-child { margin-bottom: 0; } .new-settings-nav-section-header { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.5rem 0.6rem; margin-bottom: 0.35rem; border-bottom: 1px solid rgba(124, 58, 237, 0.06); } .new-settings-nav-section-icon { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(124, 58, 237, 0.1) 0%, rgba(59, 130, 246, 0.07) 100%); border-radius: var(--ns-radius-sm); flex-shrink: 0; } .new-settings-sidebar-group-label { font-family: var(--ns-font-display); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ns-neutral-500); } /* ──────────────────────────────────────────── 🎯 EMPTY STATE — Ícono hero con gradiente (Réplica del estilo de marca-empty-state de /brand) ──────────────────────────────────────────── */ .new-settings-empty-hero-icon { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, #7c3aed, #3b82f6); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(124, 58, 237, 0.2); margin: 0 auto 1.25rem; animation: ns-float 3.5s ease-in-out infinite; } /* ──────────────────────────────────────────── 📱 RESPONSIVE — Nav groups en mobile ──────────────────────────────────────────── */ @media (max-width: 768px) { .new-settings-nav-group { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin-bottom: 0.5rem; } .new-settings-nav-section-header { width: 100%; margin-bottom: 0.15rem; padding-bottom: 0.35rem; } } /* ════════════════════════════════════════════════════════════════════════════════ SETTINGS v4.1 — UI/UX POLISH CHUNK ─── AGREGAR AL FINAL del CSS existente de settings ─── Cambios: 1. Botón "Reactivar Renovación" pulsante externo 2. (Modal reactivar — sin CSS adicional, cambio en .py) 3. (Modal cancelar — sin CSS adicional, cambio en .py) 4. Modal de procesamiento / loader 5. Dropdown "Gestionar Suscripción" premium 6. (Modal loader tarjetas — reusa el de punto 4) 7. Tarjeta predeterminada mejorada + badge ════════════════════════════════════════════════════════════════════════════════ */ /* ──────────────────────────────────────────── 1️⃣ BOTÓN EXTERNO "REACTIVAR RENOVACIÓN" — Pulsante ──────────────────────────────────────────── */ @keyframes ns-reactivate-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45), 0 4px 14px rgba(16, 185, 129, 0.25); } 50% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0), 0 6px 20px rgba(16, 185, 129, 0.3); } } @keyframes ns-reactivate-glow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.1); } } .new-settings-reactivate-external-wrap { margin-bottom: 0.85rem; } .new-settings-reactivate-pulse-btn { font-weight: 700 !important; font-family: var(--ns-font-display) !important; font-size: 0.88rem !important; border-radius: var(--ns-radius-lg) !important; animation: ns-reactivate-pulse 2.2s ease-in-out infinite, ns-reactivate-glow 2.2s ease-in-out infinite !important; transition: all var(--ns-ease) !important; } .new-settings-reactivate-pulse-btn:hover { animation: none !important; transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(16, 185, 129, 0.35) !important; } /* Grupo de acciones (botón reactivar + dropdown) */ .new-settings-sub-actions-group { display: flex; flex-direction: column; gap: 0; width: 100%; } /* ──────────────────────────────────────────── 4️⃣ MODAL DE PROCESAMIENTO / LOADER ──────────────────────────────────────────── */ @keyframes ns-spinner-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes ns-spinner-dash { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 100, 200; stroke-dashoffset: -15; } 100% { stroke-dasharray: 100, 200; stroke-dashoffset: -125; } } .new-settings-processing-modal .modal-content { background: linear-gradient( 135deg, rgba(255, 255, 255, 0.97), rgba(248, 250, 252, 0.95) ) !important; border: 1.5px solid rgba(124, 58, 237, 0.12) !important; } .new-settings-processing-modal .modal-header, .new-settings-processing-modal .modal-footer { display: none !important; } .new-settings-processing-content { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .new-settings-processing-spinner { width: 56px; height: 56px; border-radius: 50%; position: relative; animation: ns-spinner-rotate 2s linear infinite; } .new-settings-processing-spinner::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 3.5px solid rgba(124, 58, 237, 0.1); } .new-settings-processing-spinner::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 3.5px solid transparent; border-top-color: var(--ns-primary-600); border-right-color: var(--ns-secondary-600); animation: ns-spinner-dash 1.5s ease-in-out infinite; } /* ──────────────────────────────────────────── 5️⃣ DROPDOWN "GESTIONAR SUSCRIPCIÓN" — UI PREMIUM ──────────────────────────────────────────── */ .new-settings-manage-dropdown .btn { background: linear-gradient(135deg, var(--ns-primary-600), var(--ns-secondary-600)) !important; border: none !important; border-radius: var(--ns-radius-lg) !important; font-family: var(--ns-font-display) !important; font-weight: 700 !important; font-size: 0.84rem !important; padding: 0.6rem 1.3rem !important; color: white !important; box-shadow: 0 4px 16px rgba(124, 58, 237, 0.25) !important; transition: all var(--ns-ease) !important; display: inline-flex !important; align-items: center !important; gap: 0.35rem !important; } .new-settings-manage-dropdown .btn:hover, .new-settings-manage-dropdown .btn:focus { transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(124, 58, 237, 0.32) !important; filter: brightness(1.05) !important; } .new-settings-manage-dropdown .btn:active { transform: translateY(0) !important; } .new-settings-manage-dropdown .btn::after { margin-left: 0.35rem !important; border-top-color: rgba(255, 255, 255, 0.8) !important; } .new-settings-manage-dropdown .dropdown-menu { border: 1.5px solid rgba(124, 58, 237, 0.1) !important; border-radius: var(--ns-radius-lg) !important; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(124, 58, 237, 0.04) !important; padding: 0.5rem !important; margin-top: 0.45rem !important; background: var(--ns-white) !important; backdrop-filter: blur(12px) !important; animation: ns-scaleIn 0.2s ease-out !important; min-width: 240px !important; } .new-settings-dropdown-item { display: flex !important; align-items: center !important; font-family: var(--ns-font-body) !important; font-size: 0.84rem !important; font-weight: 600 !important; color: var(--ns-neutral-700) !important; padding: 0.6rem 0.85rem !important; border-radius: var(--ns-radius-sm) !important; transition: all var(--ns-ease) !important; cursor: pointer !important; } .new-settings-dropdown-item:hover { background: linear-gradient( 135deg, rgba(124, 58, 237, 0.06), rgba(59, 130, 246, 0.04) ) !important; color: var(--ns-primary-600) !important; transform: translateX(2px) !important; } .new-settings-dropdown-item-red:hover { background: rgba(239, 68, 68, 0.06) !important; color: #ef4444 !important; } .new-settings-dropdown-item-green:hover { background: rgba(16, 185, 129, 0.06) !important; color: #10b981 !important; } /* Divider dentro del dropdown */ .new-settings-manage-dropdown .dropdown-divider { border-color: rgba(124, 58, 237, 0.06) !important; margin: 0.3rem 0.5rem !important; } /* ──────────────────────────────────────────── 7️⃣ TARJETA PREDETERMINADA — Diseño mejorado ──────────────────────────────────────────── */ /* Card predeterminada — borde gradient, glow, fondo sutil */ .new-settings-pm-card-default { border-color: rgba(124, 58, 237, 0.22) !important; background: linear-gradient( 135deg, rgba(124, 58, 237, 0.025), rgba(59, 130, 246, 0.02), var(--ns-white) ) !important; box-shadow: 0 4px 16px rgba(124, 58, 237, 0.1), 0 0 0 1px rgba(124, 58, 237, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important; } .new-settings-pm-card-default:hover { border-color: rgba(124, 58, 237, 0.35) !important; box-shadow: 0 12px 36px rgba(124, 58, 237, 0.14), 0 0 0 1px rgba(124, 58, 237, 0.1) !important; } /* Indicador superior gradient (barra de 3px arriba de la card) */ .new-settings-pm-default-indicator { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient( 90deg, var(--ns-primary-600), var(--ns-secondary-600), var(--ns-accent-600) ); border-radius: var(--ns-radius-xl) var(--ns-radius-xl) 0 0; opacity: 1; } /* Badge "Predeterminada" — pastilla premium */ .new-settings-pm-default-badge { display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--ns-font-display); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ns-primary-600); background: linear-gradient( 135deg, rgba(124, 58, 237, 0.1), rgba(59, 130, 246, 0.07) ); border: 1px solid rgba(124, 58, 237, 0.18); border-radius: var(--ns-radius-full); padding: 0.2rem 0.6rem; white-space: nowrap; animation: ns-badge-pop 0.4s ease-out; } /* ──────────────────────────────────────────── 🎨 MODAL ICON COLORS — Faltantes ──────────────────────────────────────────── */ .new-settings-modal-icon-green { background: linear-gradient(135deg, #d1fae5, #a7f3d0); } .new-settings-modal-icon-violet { background: linear-gradient(135deg, #ede9fe, #ddd6fe); } /* ──────────────────────────────────────────── 📦 CANCEL PENDING BANNER — (ya existía en .py, faltaba CSS) ──────────────────────────────────────────── */ .new-settings-cancel-pending-banner { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem 1.2rem; background: linear-gradient(135deg, #fffbeb, #fef3c7); border: 1px solid rgba(245, 158, 11, 0.2); border-left: 3px solid #f59e0b; border-radius: var(--ns-radius-lg); margin-bottom: 1.25rem; animation: ns-card-in 0.45s ease-out; } /* ──────────────────────────────────────────── 📱 RESPONSIVE — v4.1 additions ──────────────────────────────────────────── */ @media (max-width: 768px) { .new-settings-sub-actions-group { width: 100%; } .new-settings-manage-dropdown .btn { width: 100% !important; justify-content: center !important; } .new-settings-manage-dropdown .dropdown-menu { width: 100% !important; } .new-settings-reactivate-pulse-btn { width: 100% !important; } } /* ════════════════════════════════════════════════════════════════════════════════ SETTINGS v4.1 — UI/UX POLISH CHUNK ─── AGREGAR AL FINAL del CSS existente de settings ─── Cambios: 1. Botón "Reactivar Renovación" pulsante externo 2. (Modal reactivar — sin CSS adicional, cambio en .py) 3. (Modal cancelar — sin CSS adicional, cambio en .py) 4. Modal de procesamiento / loader 5. Dropdown "Gestionar Suscripción" premium 6. (Modal loader tarjetas — reusa el de punto 4) 7. Tarjeta predeterminada mejorada + badge ════════════════════════════════════════════════════════════════════════════════ */ /* ──────────────────────────────────────────── 1️⃣ BOTÓN EXTERNO "REACTIVAR RENOVACIÓN" — Pulsante ──────────────────────────────────────────── */ @keyframes ns-reactivate-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45), 0 4px 14px rgba(16, 185, 129, 0.25); } 50% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0), 0 6px 20px rgba(16, 185, 129, 0.3); } } @keyframes ns-reactivate-glow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.1); } } .new-settings-reactivate-external-wrap { margin-bottom: 0.85rem; } .new-settings-reactivate-pulse-btn { font-weight: 700 !important; font-family: var(--ns-font-display) !important; font-size: 0.88rem !important; border-radius: var(--ns-radius-lg) !important; animation: ns-reactivate-pulse 2.2s ease-in-out infinite, ns-reactivate-glow 2.2s ease-in-out infinite !important; transition: all var(--ns-ease) !important; } .new-settings-reactivate-pulse-btn:hover { animation: none !important; transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(16, 185, 129, 0.35) !important; } /* Grupo de acciones (botón reactivar + dropdown) */ .new-settings-sub-actions-group { display: flex; flex-direction: column; gap: 0; width: 100%; } /* ──────────────────────────────────────────── 4️⃣ MODAL DE PROCESAMIENTO / LOADER ──────────────────────────────────────────── */ @keyframes ns-spinner-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes ns-spinner-dash { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 100, 200; stroke-dashoffset: -15; } 100% { stroke-dasharray: 100, 200; stroke-dashoffset: -125; } } .new-settings-processing-modal .modal-content { background: linear-gradient( 135deg, rgba(255, 255, 255, 0.97), rgba(248, 250, 252, 0.95) ) !important; border: 1.5px solid rgba(124, 58, 237, 0.12) !important; } .new-settings-processing-modal .modal-header, .new-settings-processing-modal .modal-footer { display: none !important; } .new-settings-processing-content { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .new-settings-processing-spinner { width: 56px; height: 56px; border-radius: 50%; position: relative; animation: ns-spinner-rotate 2s linear infinite; } .new-settings-processing-spinner::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 3.5px solid rgba(124, 58, 237, 0.1); } .new-settings-processing-spinner::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 3.5px solid transparent; border-top-color: var(--ns-primary-600); border-right-color: var(--ns-secondary-600); animation: ns-spinner-dash 1.5s ease-in-out infinite; } /* ──────────────────────────────────────────── 5️⃣ DROPDOWN "GESTIONAR SUSCRIPCIÓN" — UI PREMIUM ──────────────────────────────────────────── */ .new-settings-manage-dropdown .btn { background: linear-gradient(135deg, var(--ns-primary-600), var(--ns-secondary-600)) !important; border: none !important; border-radius: var(--ns-radius-lg) !important; font-family: var(--ns-font-display) !important; font-weight: 700 !important; font-size: 0.84rem !important; padding: 0.6rem 1.3rem !important; color: white !important; box-shadow: 0 4px 16px rgba(124, 58, 237, 0.25) !important; transition: all var(--ns-ease) !important; display: inline-flex !important; align-items: center !important; gap: 0.35rem !important; } .new-settings-manage-dropdown .btn:hover, .new-settings-manage-dropdown .btn:focus { transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(124, 58, 237, 0.32) !important; filter: brightness(1.05) !important; } .new-settings-manage-dropdown .btn:active { transform: translateY(0) !important; } .new-settings-manage-dropdown .btn::after { margin-left: 0.35rem !important; border-top-color: rgba(255, 255, 255, 0.8) !important; } .new-settings-manage-dropdown .dropdown-menu { border: 1.5px solid rgba(124, 58, 237, 0.1) !important; border-radius: var(--ns-radius-lg) !important; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(124, 58, 237, 0.04) !important; padding: 0.5rem !important; margin-top: 0.45rem !important; background: var(--ns-white) !important; backdrop-filter: blur(12px) !important; animation: ns-scaleIn 0.2s ease-out !important; min-width: 240px !important; } .new-settings-dropdown-item { display: flex !important; align-items: center !important; font-family: var(--ns-font-body) !important; font-size: 0.84rem !important; font-weight: 600 !important; color: var(--ns-neutral-700) !important; padding: 0.6rem 0.85rem !important; border-radius: var(--ns-radius-sm) !important; transition: all var(--ns-ease) !important; cursor: pointer !important; } .new-settings-dropdown-item:hover { background: linear-gradient( 135deg, rgba(124, 58, 237, 0.06), rgba(59, 130, 246, 0.04) ) !important; color: var(--ns-primary-600) !important; transform: translateX(2px) !important; } .new-settings-dropdown-item-red:hover { background: rgba(239, 68, 68, 0.06) !important; color: #ef4444 !important; } .new-settings-dropdown-item-green:hover { background: rgba(16, 185, 129, 0.06) !important; color: #10b981 !important; } /* Divider dentro del dropdown */ .new-settings-manage-dropdown .dropdown-divider { border-color: rgba(124, 58, 237, 0.06) !important; margin: 0.3rem 0.5rem !important; } /* ──────────────────────────────────────────── 7️⃣ TARJETA PREDETERMINADA — Diseño mejorado ──────────────────────────────────────────── */ /* Card predeterminada — borde gradient, glow, fondo sutil */ .new-settings-pm-card-default { border-color: rgba(124, 58, 237, 0.22) !important; background: linear-gradient( 135deg, rgba(124, 58, 237, 0.025), rgba(59, 130, 246, 0.02), var(--ns-white) ) !important; box-shadow: 0 4px 16px rgba(124, 58, 237, 0.1), 0 0 0 1px rgba(124, 58, 237, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important; padding-top: 1.5rem !important; } .new-settings-pm-card-default:hover { border-color: rgba(124, 58, 237, 0.35) !important; box-shadow: 0 12px 36px rgba(124, 58, 237, 0.14), 0 0 0 1px rgba(124, 58, 237, 0.1) !important; } /* Forzar que el header de la card no se comprima */ .new-settings-pm-header { flex-wrap: nowrap; min-height: 2.5rem; } /* Indicador superior gradient (barra de 3px arriba de la card) */ .new-settings-pm-default-indicator { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient( 90deg, var(--ns-primary-600), var(--ns-secondary-600), var(--ns-accent-600) ); border-radius: var(--ns-radius-xl) var(--ns-radius-xl) 0 0; opacity: 1; } /* Badge "Predeterminada" — pastilla premium, fila propia debajo del header */ .new-settings-pm-default-badge { display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--ns-font-display); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ns-primary-600); background: linear-gradient( 135deg, rgba(124, 58, 237, 0.1), rgba(59, 130, 246, 0.07) ); border: 1px solid rgba(124, 58, 237, 0.18); border-radius: var(--ns-radius-full); padding: 0.22rem 0.65rem; white-space: nowrap; animation: ns-badge-pop 0.4s ease-out; margin-bottom: 0.5rem; width: fit-content; } /* Botón "Hacer predeterminada" — asegurar que no se corte */ .new-settings-pm-set-default-btn { font-size: 0.78rem !important; font-weight: 600 !important; white-space: nowrap !important; overflow: visible !important; border-radius: var(--ns-radius-sm) !important; transition: all var(--ns-ease) !important; } .new-settings-pm-set-default-btn:hover { background: rgba(124, 58, 237, 0.08) !important; transform: translateY(-1px) !important; } /* ──────────────────────────────────────────── 🎨 MODAL ICON COLORS — Faltantes ──────────────────────────────────────────── */ .new-settings-modal-icon-green { background: linear-gradient(135deg, #d1fae5, #a7f3d0); } .new-settings-modal-icon-violet { background: linear-gradient(135deg, #ede9fe, #ddd6fe); } /* ──────────────────────────────────────────── 📦 CANCEL PENDING BANNER — (ya existía en .py, faltaba CSS) ──────────────────────────────────────────── */ .new-settings-cancel-pending-banner { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem 1.2rem; background: linear-gradient(135deg, #fffbeb, #fef3c7); border: 1px solid rgba(245, 158, 11, 0.2); border-left: 3px solid #f59e0b; border-radius: var(--ns-radius-lg); margin-bottom: 1.25rem; animation: ns-card-in 0.45s ease-out; } /* ──────────────────────────────────────────── 📱 RESPONSIVE — v4.1 additions ──────────────────────────────────────────── */ @media (max-width: 768px) { .new-settings-sub-actions-group { width: 100%; } .new-settings-manage-dropdown .btn { width: 100% !important; justify-content: center !important; } .new-settings-manage-dropdown .dropdown-menu { width: 100% !important; } .new-settings-reactivate-pulse-btn { width: 100% !important; } } /* ════════════════════════════════════════════════════════════════════════════════ SETTINGS v4.1 — UI/UX POLISH CHUNK ─── AGREGAR AL FINAL del CSS existente de settings ─── Cambios: 1. Botón "Reactivar Renovación" pulsante externo 2. (Modal reactivar — sin CSS adicional, cambio en .py) 3. (Modal cancelar — sin CSS adicional, cambio en .py) 4. Modal de procesamiento / loader 5. Dropdown "Gestionar Suscripción" premium 6. (Modal loader tarjetas — reusa el de punto 4) 7. Tarjeta predeterminada mejorada + badge ════════════════════════════════════════════════════════════════════════════════ */ /* ──────────────────────────────────────────── 1️⃣ BOTÓN EXTERNO "REACTIVAR RENOVACIÓN" — Pulsante ──────────────────────────────────────────── */ @keyframes ns-reactivate-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45), 0 4px 14px rgba(16, 185, 129, 0.25); } 50% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0), 0 6px 20px rgba(16, 185, 129, 0.3); } } @keyframes ns-reactivate-glow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.1); } } .new-settings-reactivate-external-wrap { margin-bottom: 0.85rem; } .new-settings-reactivate-pulse-btn { font-weight: 700 !important; font-family: var(--ns-font-display) !important; font-size: 0.88rem !important; border-radius: var(--ns-radius-lg) !important; animation: ns-reactivate-pulse 2.2s ease-in-out infinite, ns-reactivate-glow 2.2s ease-in-out infinite !important; transition: all var(--ns-ease) !important; } .new-settings-reactivate-pulse-btn:hover { animation: none !important; transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(16, 185, 129, 0.35) !important; } /* Grupo de acciones (botón reactivar + dropdown) */ .new-settings-sub-actions-group { display: flex; flex-direction: column; gap: 0; width: 100%; } /* ──────────────────────────────────────────── 4️⃣ MODAL DE PROCESAMIENTO / LOADER ──────────────────────────────────────────── */ @keyframes ns-spinner-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes ns-spinner-dash { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 100, 200; stroke-dashoffset: -15; } 100% { stroke-dasharray: 100, 200; stroke-dashoffset: -125; } } .new-settings-processing-modal .modal-content { background: linear-gradient( 135deg, rgba(255, 255, 255, 0.97), rgba(248, 250, 252, 0.95) ) !important; border: 1.5px solid rgba(124, 58, 237, 0.12) !important; } .new-settings-processing-modal .modal-header, .new-settings-processing-modal .modal-footer { display: none !important; } .new-settings-processing-content { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .new-settings-processing-spinner { width: 56px; height: 56px; border-radius: 50%; position: relative; animation: ns-spinner-rotate 2s linear infinite; } .new-settings-processing-spinner::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 3.5px solid rgba(124, 58, 237, 0.1); } .new-settings-processing-spinner::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 3.5px solid transparent; border-top-color: var(--ns-primary-600); border-right-color: var(--ns-secondary-600); animation: ns-spinner-dash 1.5s ease-in-out infinite; } /* ──────────────────────────────────────────── 5️⃣ DROPDOWN "GESTIONAR SUSCRIPCIÓN" — UI PREMIUM ──────────────────────────────────────────── */ .new-settings-manage-dropdown .btn { background: linear-gradient(135deg, var(--ns-primary-600), var(--ns-secondary-600)) !important; border: none !important; border-radius: var(--ns-radius-lg) !important; font-family: var(--ns-font-display) !important; font-weight: 700 !important; font-size: 0.84rem !important; padding: 0.6rem 1.3rem !important; color: white !important; box-shadow: 0 4px 16px rgba(124, 58, 237, 0.25) !important; transition: all var(--ns-ease) !important; display: inline-flex !important; align-items: center !important; gap: 0.35rem !important; } .new-settings-manage-dropdown .btn:hover, .new-settings-manage-dropdown .btn:focus { transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(124, 58, 237, 0.32) !important; filter: brightness(1.05) !important; } .new-settings-manage-dropdown .btn:active { transform: translateY(0) !important; } .new-settings-manage-dropdown .btn::after { margin-left: 0.35rem !important; border-top-color: rgba(255, 255, 255, 0.8) !important; } .new-settings-manage-dropdown .dropdown-menu { border: 1.5px solid rgba(124, 58, 237, 0.1) !important; border-radius: var(--ns-radius-lg) !important; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(124, 58, 237, 0.04) !important; padding: 0.5rem !important; margin-top: 0.45rem !important; background: var(--ns-white) !important; backdrop-filter: blur(12px) !important; animation: ns-scaleIn 0.2s ease-out !important; min-width: 240px !important; } .new-settings-dropdown-item { display: flex !important; align-items: center !important; font-family: var(--ns-font-body) !important; font-size: 0.84rem !important; font-weight: 600 !important; color: var(--ns-neutral-700) !important; padding: 0.6rem 0.85rem !important; border-radius: var(--ns-radius-sm) !important; transition: all var(--ns-ease) !important; cursor: pointer !important; } .new-settings-dropdown-item:hover { background: linear-gradient( 135deg, rgba(124, 58, 237, 0.06), rgba(59, 130, 246, 0.04) ) !important; color: var(--ns-primary-600) !important; transform: translateX(2px) !important; } .new-settings-dropdown-item-red:hover { background: rgba(239, 68, 68, 0.06) !important; color: #ef4444 !important; } .new-settings-dropdown-item-green:hover { background: rgba(16, 185, 129, 0.06) !important; color: #10b981 !important; } /* Divider dentro del dropdown */ .new-settings-manage-dropdown .dropdown-divider { border-color: rgba(124, 58, 237, 0.06) !important; margin: 0.3rem 0.5rem !important; } /* ──────────────────────────────────────────── 7️⃣ TARJETA PREDETERMINADA — Diseño mejorado ──────────────────────────────────────────── */ /* Card predeterminada — borde gradient, glow, fondo sutil */ .new-settings-pm-card-default { border-color: rgba(124, 58, 237, 0.22) !important; background: linear-gradient( 135deg, rgba(124, 58, 237, 0.025), rgba(59, 130, 246, 0.02), var(--ns-white) ) !important; box-shadow: 0 4px 16px rgba(124, 58, 237, 0.1), 0 0 0 1px rgba(124, 58, 237, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important; padding-top: 1.5rem !important; } .new-settings-pm-card-default:hover { border-color: rgba(124, 58, 237, 0.35) !important; box-shadow: 0 12px 36px rgba(124, 58, 237, 0.14), 0 0 0 1px rgba(124, 58, 237, 0.1) !important; } /* Forzar que el header de la card no se comprima */ .new-settings-pm-header { flex-wrap: nowrap; min-height: 2.5rem; } /* Indicador superior gradient (barra de 3px arriba de la card) */ .new-settings-pm-default-indicator { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient( 90deg, var(--ns-primary-600), var(--ns-secondary-600), var(--ns-accent-600) ); border-radius: var(--ns-radius-xl) var(--ns-radius-xl) 0 0; opacity: 1; } /* Badge "Predeterminada" — pastilla premium, fila propia debajo del header */ .new-settings-pm-default-badge { display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--ns-font-display); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ns-primary-600); background: linear-gradient( 135deg, rgba(124, 58, 237, 0.1), rgba(59, 130, 246, 0.07) ); border: 1px solid rgba(124, 58, 237, 0.18); border-radius: var(--ns-radius-full); padding: 0.22rem 0.65rem; white-space: nowrap; animation: ns-badge-pop 0.4s ease-out; margin-bottom: 0.5rem; width: fit-content; } /* Botón "Hacer predeterminada" — asegurar que no se corte */ .new-settings-pm-set-default-btn { font-size: 0.78rem !important; font-weight: 600 !important; white-space: nowrap !important; overflow: visible !important; border-radius: var(--ns-radius-sm) !important; transition: all var(--ns-ease) !important; } .new-settings-pm-set-default-btn:hover { background: rgba(124, 58, 237, 0.08) !important; transform: translateY(-1px) !important; } /* Divider + botón eliminar en footer de card predeterminada */ .new-settings-pm-footer-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(239, 68, 68, 0.12), transparent); margin-bottom: 0.5rem; } .new-settings-pm-delete-footer-btn { font-size: 0.72rem !important; font-weight: 500 !important; color: var(--ns-neutral-400) !important; opacity: 0.7; transition: all var(--ns-ease) !important; } .new-settings-pm-delete-footer-btn:hover { opacity: 1; color: #ef4444 !important; background: rgba(239, 68, 68, 0.05) !important; } /* ──────────────────────────────────────────── 🎨 MODAL ICON COLORS — Faltantes ──────────────────────────────────────────── */ .new-settings-modal-icon-green { background: linear-gradient(135deg, #d1fae5, #a7f3d0); } .new-settings-modal-icon-violet { background: linear-gradient(135deg, #ede9fe, #ddd6fe); } /* ──────────────────────────────────────────── 📦 CANCEL PENDING BANNER — (ya existía en .py, faltaba CSS) ──────────────────────────────────────────── */ .new-settings-cancel-pending-banner { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem 1.2rem; background: linear-gradient(135deg, #fffbeb, #fef3c7); border: 1px solid rgba(245, 158, 11, 0.2); border-left: 3px solid #f59e0b; border-radius: var(--ns-radius-lg); margin-bottom: 1.25rem; animation: ns-card-in 0.45s ease-out; } /* ──────────────────────────────────────────── 📱 RESPONSIVE — v4.1 additions ──────────────────────────────────────────── */ @media (max-width: 768px) { .new-settings-sub-actions-group { width: 100%; } .new-settings-manage-dropdown .btn { width: 100% !important; justify-content: center !important; } .new-settings-manage-dropdown .dropdown-menu { width: 100% !important; } .new-settings-reactivate-pulse-btn { width: 100% !important; } } /* ════════════════════════════════════════════════════════════════════════════════ SETTINGS v4.1 — UI/UX POLISH CHUNK ─── AGREGAR AL FINAL del CSS existente de settings ─── Cambios: 1. Botón "Reactivar Renovación" pulsante externo 2. (Modal reactivar — sin CSS adicional, cambio en .py) 3. (Modal cancelar — sin CSS adicional, cambio en .py) 4. Modal de procesamiento / loader 5. Dropdown "Gestionar Suscripción" premium 6. (Modal loader tarjetas — reusa el de punto 4) 7. Tarjeta predeterminada mejorada + badge ════════════════════════════════════════════════════════════════════════════════ */ /* ──────────────────────────────────────────── 1️⃣ BOTÓN EXTERNO "REACTIVAR RENOVACIÓN" — Pulsante ──────────────────────────────────────────── */ @keyframes ns-reactivate-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45), 0 4px 14px rgba(16, 185, 129, 0.25); } 50% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0), 0 6px 20px rgba(16, 185, 129, 0.3); } } @keyframes ns-reactivate-glow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.1); } } .new-settings-reactivate-external-wrap { margin-bottom: 0.85rem; } .new-settings-reactivate-pulse-btn { font-weight: 700 !important; font-family: var(--ns-font-display) !important; font-size: 0.88rem !important; border-radius: var(--ns-radius-lg) !important; animation: ns-reactivate-pulse 2.2s ease-in-out infinite, ns-reactivate-glow 2.2s ease-in-out infinite !important; transition: all var(--ns-ease) !important; } .new-settings-reactivate-pulse-btn:hover { animation: none !important; transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(16, 185, 129, 0.35) !important; } /* Grupo de acciones (botón reactivar + dropdown) */ .new-settings-sub-actions-group { display: flex; flex-direction: column; gap: 0; width: 100%; } /* ──────────────────────────────────────────── 4️⃣ MODAL DE PROCESAMIENTO / LOADER ──────────────────────────────────────────── */ @keyframes ns-spinner-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes ns-spinner-dash { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 100, 200; stroke-dashoffset: -15; } 100% { stroke-dasharray: 100, 200; stroke-dashoffset: -125; } } .new-settings-processing-modal .modal-content { background: linear-gradient( 135deg, rgba(255, 255, 255, 0.97), rgba(248, 250, 252, 0.95) ) !important; border: 1.5px solid rgba(124, 58, 237, 0.12) !important; } .new-settings-processing-modal .modal-header, .new-settings-processing-modal .modal-footer { display: none !important; } .new-settings-processing-content { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .new-settings-processing-spinner { width: 56px; height: 56px; border-radius: 50%; position: relative; animation: ns-spinner-rotate 2s linear infinite; } .new-settings-processing-spinner::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 3.5px solid rgba(124, 58, 237, 0.1); } .new-settings-processing-spinner::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 3.5px solid transparent; border-top-color: var(--ns-primary-600); border-right-color: var(--ns-secondary-600); animation: ns-spinner-dash 1.5s ease-in-out infinite; } /* ──────────────────────────────────────────── 5️⃣ DROPDOWN "GESTIONAR SUSCRIPCIÓN" — UI PREMIUM ──────────────────────────────────────────── */ .new-settings-manage-dropdown .btn { background: linear-gradient(135deg, var(--ns-primary-600), var(--ns-secondary-600)) !important; border: none !important; border-radius: var(--ns-radius-lg) !important; font-family: var(--ns-font-display) !important; font-weight: 700 !important; font-size: 0.84rem !important; padding: 0.6rem 1.3rem !important; color: white !important; box-shadow: 0 4px 16px rgba(124, 58, 237, 0.25) !important; transition: all var(--ns-ease) !important; display: inline-flex !important; align-items: center !important; gap: 0.35rem !important; } .new-settings-manage-dropdown .btn:hover, .new-settings-manage-dropdown .btn:focus { transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(124, 58, 237, 0.32) !important; filter: brightness(1.05) !important; } .new-settings-manage-dropdown .btn:active { transform: translateY(0) !important; } .new-settings-manage-dropdown .btn::after { margin-left: 0.35rem !important; border-top-color: rgba(255, 255, 255, 0.8) !important; } .new-settings-manage-dropdown .dropdown-menu { border: 1.5px solid rgba(124, 58, 237, 0.1) !important; border-radius: var(--ns-radius-lg) !important; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(124, 58, 237, 0.04) !important; padding: 0.5rem !important; margin-top: 0.45rem !important; background: var(--ns-white) !important; backdrop-filter: blur(12px) !important; animation: ns-scaleIn 0.2s ease-out !important; min-width: 240px !important; } .new-settings-dropdown-item { display: flex !important; align-items: center !important; font-family: var(--ns-font-body) !important; font-size: 0.84rem !important; font-weight: 600 !important; color: var(--ns-neutral-700) !important; padding: 0.6rem 0.85rem !important; border-radius: var(--ns-radius-sm) !important; transition: all var(--ns-ease) !important; cursor: pointer !important; } .new-settings-dropdown-item:hover { background: linear-gradient( 135deg, rgba(124, 58, 237, 0.06), rgba(59, 130, 246, 0.04) ) !important; color: var(--ns-primary-600) !important; transform: translateX(2px) !important; } .new-settings-dropdown-item-red:hover { background: rgba(239, 68, 68, 0.06) !important; color: #ef4444 !important; } .new-settings-dropdown-item-green:hover { background: rgba(16, 185, 129, 0.06) !important; color: #10b981 !important; } /* Divider dentro del dropdown */ .new-settings-manage-dropdown .dropdown-divider { border-color: rgba(124, 58, 237, 0.06) !important; margin: 0.3rem 0.5rem !important; } /* ──────────────────────────────────────────── 7️⃣ TARJETA PREDETERMINADA — Diseño mejorado ──────────────────────────────────────────── */ /* Card predeterminada — borde gradient, glow, fondo sutil */ .new-settings-pm-card-default { border-color: rgba(124, 58, 237, 0.22) !important; background: linear-gradient( 135deg, rgba(124, 58, 237, 0.025), rgba(59, 130, 246, 0.02), var(--ns-white) ) !important; box-shadow: 0 4px 16px rgba(124, 58, 237, 0.1), 0 0 0 1px rgba(124, 58, 237, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important; padding-top: 1.5rem !important; } .new-settings-pm-card-default:hover { border-color: rgba(124, 58, 237, 0.35) !important; box-shadow: 0 12px 36px rgba(124, 58, 237, 0.14), 0 0 0 1px rgba(124, 58, 237, 0.1) !important; } /* Forzar que el header de la card no se comprima */ .new-settings-pm-header { flex-wrap: nowrap; min-height: 2.5rem; } /* Acciones del header (estrella + basura) bien alineadas */ .new-settings-pm-header-actions { display: flex; gap: 0.15rem; align-items: center; flex-shrink: 0; margin-left: auto; padding-left: 0.5rem; } /* Indicador superior gradient (barra de 3px arriba de la card) */ .new-settings-pm-default-indicator { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient( 90deg, var(--ns-primary-600), var(--ns-secondary-600), var(--ns-accent-600) ); border-radius: var(--ns-radius-xl) var(--ns-radius-xl) 0 0; opacity: 1; } /* Badge "Predeterminada" — pastilla premium, fila propia debajo del header */ .new-settings-pm-default-badge { display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--ns-font-display); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ns-primary-600); background: linear-gradient( 135deg, rgba(124, 58, 237, 0.1), rgba(59, 130, 246, 0.07) ); border: 1px solid rgba(124, 58, 237, 0.18); border-radius: var(--ns-radius-full); padding: 0.22rem 0.65rem; white-space: nowrap; animation: ns-badge-pop 0.4s ease-out; margin-bottom: 0.5rem; width: fit-content; } /* Botón "Hacer predeterminada" — asegurar que no se corte */ .new-settings-pm-set-default-btn { font-size: 0.78rem !important; font-weight: 600 !important; white-space: nowrap !important; overflow: visible !important; border-radius: var(--ns-radius-sm) !important; transition: all var(--ns-ease) !important; } .new-settings-pm-set-default-btn:hover { background: rgba(124, 58, 237, 0.08) !important; transform: translateY(-1px) !important; } /* Divider + botón eliminar en footer de card predeterminada */ .new-settings-pm-footer-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(239, 68, 68, 0.12), transparent); margin-bottom: 0.5rem; } .new-settings-pm-delete-footer-btn { font-size: 0.72rem !important; font-weight: 500 !important; color: var(--ns-neutral-400) !important; opacity: 0.7; transition: all var(--ns-ease) !important; } .new-settings-pm-delete-footer-btn:hover { opacity: 1; color: #ef4444 !important; background: rgba(239, 68, 68, 0.05) !important; } /* ──────────────────────────────────────────── 🎨 MODAL ICON COLORS — Faltantes ──────────────────────────────────────────── */ .new-settings-modal-icon-green { background: linear-gradient(135deg, #d1fae5, #a7f3d0); } .new-settings-modal-icon-violet { background: linear-gradient(135deg, #ede9fe, #ddd6fe); } /* ──────────────────────────────────────────── 📦 CANCEL PENDING BANNER — (ya existía en .py, faltaba CSS) ──────────────────────────────────────────── */ .new-settings-cancel-pending-banner { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem 1.2rem; background: linear-gradient(135deg, #fffbeb, #fef3c7); border: 1px solid rgba(245, 158, 11, 0.2); border-left: 3px solid #f59e0b; border-radius: var(--ns-radius-lg); margin-bottom: 1.25rem; animation: ns-card-in 0.45s ease-out; } /* ──────────────────────────────────────────── 📱 RESPONSIVE — v4.1 additions ──────────────────────────────────────────── */ @media (max-width: 768px) { .new-settings-sub-actions-group { width: 100%; } .new-settings-manage-dropdown .btn { width: 100% !important; justify-content: center !important; } .new-settings-manage-dropdown .dropdown-menu { width: 100% !important; } .new-settings-reactivate-pulse-btn { width: 100% !important; } }