@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root{--bg:#f5f6fa;--surface:#fff;--surface-2:#f9fafc;--text:#171a2b;--muted:#73798d;--line:#e7e9f1;--purple:#6d28d9;--purple2:#8b5cf6;--blue:#2563eb;--pink:#db2777;--green:#059669;--orange:#ea580c;--red:#dc2626;--shadow:0 12px 35px rgba(31,38,70,.08);--radius:18px;--sidebar:250px}
[data-theme="dark"]{--bg:#0e1020;--surface:#15182b;--surface-2:#1a1e34;--text:#f4f5fb;--muted:#9aa1b7;--line:#292e48;--shadow:0 12px 35px rgba(0,0,0,.22)}*{box-sizing:border-box}html{font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--text)}body{margin:0;background:var(--bg);color:var(--text);font-size:14px}a{color:inherit;text-decoration:none}.icon{width:20px;height:20px;display:inline-block;vertical-align:middle;flex:0 0 auto}.app-shell{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar);background:linear-gradient(180deg,#17112f,#211446 70%,#271651);color:#fff;padding:22px 16px;display:flex;flex-direction:column;z-index:50}.brand,.auth-brand{display:flex;align-items:center;gap:11px}.brand-mark{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#8b5cf6,#ec4899);color:white;font-size:22px;font-weight:800;box-shadow:0 8px 24px rgba(139,92,246,.35)}.brand b,.auth-brand b{display:block;font-size:16px}.brand small,.auth-brand small{display:block;color:#aaa3c4;font-size:11px;margin-top:2px}.sidebar-section{font-size:10px;font-weight:800;letter-spacing:.13em;color:#7f77a4;margin:30px 10px 10px}.side-nav{display:flex;flex-direction:column;gap:5px}.side-nav a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;color:#bdb8d4;font-weight:600;transition:.2s}.side-nav a:hover{background:rgba(255,255,255,.07);color:white}.side-nav a.active{background:linear-gradient(90deg,rgba(139,92,246,.30),rgba(236,72,153,.13));color:#fff;box-shadow:inset 3px 0 #a78bfa}.sidebar-spacer{flex:1}.privacy-mini{display:flex;gap:10px;padding:12px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);border-radius:13px;color:#d8d3e7}.privacy-mini .icon{color:#72e6b9}.privacy-mini b,.privacy-mini small{display:block}.privacy-mini b{font-size:12px}.privacy-mini small{font-size:10px;color:#9c96b6;margin-top:3px}.logout-link{display:flex;gap:10px;align-items:center;padding:11px 12px;color:#aaa3c4;margin-top:10px}.main-wrap{margin-left:var(--sidebar);min-height:100vh}.topbar{height:78px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}.top-left{display:flex;align-items:center;gap:10px}.topbar h1{font-size:18px;margin:0;font-weight:750}.topbar p{font-size:11px;color:var(--muted);margin:4px 0 0}.top-actions{display:flex;align-items:center;gap:10px}.profile-chip{display:flex;align-items:center;gap:10px;border-left:1px solid var(--line);padding-left:14px}.avatar{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,#7c3aed,#ec4899);color:#fff;display:grid;place-items:center;font-weight:800}.profile-text b,.profile-text small{display:block}.profile-text b{font-size:12px}.profile-text small{font-size:10px;color:var(--muted);margin-top:2px}.icon-btn{border:0;background:transparent;color:var(--muted);width:38px;height:38px;border-radius:11px;display:inline-grid;place-items:center;cursor:pointer}.icon-btn:hover{background:var(--surface-2);color:var(--text)}.icon-btn.bordered{border:1px solid var(--line);background:var(--surface)}.icon-btn.success{background:#ecfdf5;color:var(--green)}.icon-btn.danger{color:var(--red)}.mobile-only{display:none}.content{padding:24px 28px 90px;max-width:1600px;margin:auto}.app-footer{display:flex;justify-content:space-between;color:var(--muted);font-size:10px;padding:18px 28px;border-top:1px solid var(--line)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:39px;padding:9px 15px;border-radius:11px;border:1px solid transparent;font:inherit;font-weight:700;cursor:pointer;transition:.18s}.btn .icon{width:18px;height:18px}.btn.primary{background:linear-gradient(135deg,#6d28d9,#8b5cf6);color:white;box-shadow:0 7px 18px rgba(109,40,217,.2)}.btn.secondary{background:var(--surface);border-color:var(--line);color:var(--text)}.btn.ghost-dark{background:transparent;border-color:var(--line);color:var(--muted)}.btn.white{background:white;color:#5b21b6}.btn.glass{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.2);color:white}.btn.success{background:#059669;color:#fff}.btn.danger-outline{border-color:#fecaca;color:#dc2626;background:transparent}.btn.sm{min-height:33px;padding:7px 11px;font-size:12px}.btn-lg{min-height:46px;padding:12px 18px}.btn-wide{width:100%}.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:19px 20px;border-bottom:1px solid var(--line)}.panel-head h3{margin:0;font-size:15px}.panel-head p{margin:4px 0 0;color:var(--muted);font-size:11px}.dashboard-hero{min-height:255px;background:radial-gradient(circle at 80% 20%,rgba(255,255,255,.18),transparent 24%),linear-gradient(125deg,#5b21b6,#7c3aed 45%,#c026d3 110%);border-radius:24px;padding:34px 38px;color:white;display:flex;align-items:center;justify-content:space-between;overflow:hidden;position:relative;box-shadow:0 18px 45px rgba(91,33,182,.22)}.dashboard-hero:after{content:"";position:absolute;width:270px;height:270px;border:1px solid rgba(255,255,255,.12);border-radius:50%;right:-70px;bottom:-145px}.hero-copy{position:relative;z-index:2;max-width:700px}.eyebrow{font-size:10px;font-weight:800;letter-spacing:.14em;color:#ddd6fe}.dashboard-hero h2{font-size:29px;line-height:1.25;margin:10px 0 9px}.dashboard-hero h2 span{color:#fde68a}.dashboard-hero p{max-width:610px;line-height:1.65;color:#e9e2ff;font-size:13px}.hero-actions{display:flex;gap:10px;margin-top:20px}.hero-ring{width:175px;height:175px;border-radius:50%;background:conic-gradient(#fcd34d 0 var(--p,0%),rgba(255,255,255,.15) 0);display:grid;place-items:center;position:relative;margin-right:30px;z-index:2}.hero-ring:before{content:"";position:absolute;inset:9px;border-radius:50%;background:#6d28d9}.hero-ring div{z-index:2;text-align:center}.hero-ring b,.hero-ring span,.hero-ring small{display:block}.hero-ring b{font-size:30px}.hero-ring span{font-weight:700;font-size:11px;margin-top:2px}.hero-ring small{font-size:9px;color:#ddd6fe;margin-top:5px}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:16px 0}.metric-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:17px;display:flex;align-items:center;gap:13px;box-shadow:0 7px 20px rgba(31,38,70,.04);position:relative;overflow:hidden}.metric-card:after{content:"";position:absolute;width:4px;left:0;top:0;bottom:0;background:#8b5cf6}.metric-card.accent-blue:after{background:#3b82f6}.metric-card.accent-orange:after{background:#f97316}.metric-card.accent-green:after{background:#10b981}.metric-icon{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:#f3e8ff;color:#7c3aed}.metric-icon.blue,.accent-blue .metric-icon{background:#eff6ff;color:#2563eb}.metric-icon.orange,.accent-orange .metric-icon{background:#fff7ed;color:#ea580c}.metric-icon.green,.accent-green .metric-icon{background:#ecfdf5;color:#059669}.metric-card span,.metric-card small,.metric-card strong{display:block}.metric-card span{font-size:10px;color:var(--muted);font-weight:600}.metric-card strong{font-size:19px;margin:4px 0 2px}.metric-card small{font-size:9px;color:var(--muted)}.dashboard-columns{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(300px,.8fr);gap:16px}.event-list{padding:0}.event-row{display:grid;grid-template-columns:52px 1fr auto;gap:13px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);transition:.18s}.event-row:last-child{border-bottom:0}.event-row:hover{background:var(--surface-2)}.event-datebox{width:48px;height:52px;border-radius:12px;background:#f3e8ff;color:#6d28d9;display:grid;place-items:center;align-content:center}.event-datebox b{font-size:18px}.event-datebox span{font-size:8px;font-weight:800}.event-title{display:flex;gap:8px;align-items:center}.event-title h4{margin:0;font-size:13px}.event-main p{margin:4px 0 7px;color:var(--muted);font-size:10px}.event-meta{display:flex;gap:10px;color:var(--muted);font-size:9px}.event-money{min-width:120px;text-align:right}.event-money b,.event-money small{display:block}.event-money b{font-size:12px}.event-money small{font-size:9px;color:var(--muted);margin:3px 0}.event-money .icon{width:15px}.progress-line{height:5px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:8px}.progress-line i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#7c3aed,#ec4899)}.progress-line.light{background:rgba(255,255,255,.18)}.progress-line.light i{background:#fde68a}.activity-list{padding:6px 20px}.activity-item{display:flex;gap:10px;padding:11px 0;border-bottom:1px solid var(--line)}.activity-dot{width:8px;height:8px;border-radius:50%;background:#8b5cf6;margin-top:4px;box-shadow:0 0 0 4px #f3e8ff}.activity-item b,.activity-item small{display:block}.activity-item b{font-size:10px;line-height:1.35}.activity-item small{font-size:8px;color:var(--muted);margin-top:4px}.privacy-card{margin:14px 18px 18px;background:linear-gradient(135deg,#ecfdf5,#f0fdf4);color:#065f46;border:1px solid #bbf7d0;border-radius:14px;padding:13px;display:flex;gap:10px}.privacy-card .icon{color:#059669}.privacy-card b{font-size:11px}.privacy-card p{font-size:9px;line-height:1.45;margin:3px 0 0}.privacy-card.compact{margin:18px 0 0}.badge{display:inline-flex;padding:4px 8px;border-radius:999px;font-size:8px;font-weight:800;background:#ede9fe;color:#6d28d9}.badge.aktif{background:#dcfce7;color:#15803d}.badge.selesai{background:#dbeafe;color:#1d4ed8}.badge.arsip{background:#e5e7eb;color:#4b5563}.badge.light{background:rgba(255,255,255,.16);color:#fff}.page-actions{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:4px 0 16px}.page-heading{margin:0;font-size:22px}.muted{color:var(--muted)}.page-actions p{margin:5px 0 0;font-size:11px}.filterbar{display:flex;gap:9px;margin-bottom:15px}.filterbar .searchbox{flex:1}.filterbar select,.page-actions select{min-width:150px}.searchbox,.mini-search{position:relative;display:flex;align-items:center}.searchbox .icon,.mini-search .icon{position:absolute;left:12px;color:var(--muted);width:17px}.searchbox input,.mini-search input{padding-left:38px}.event-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.event-card-pro{background:var(--surface);border:1px solid var(--line);border-radius:19px;overflow:hidden;box-shadow:var(--shadow)}.event-cover{height:150px;padding:16px;color:#fff;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(135deg,#6d28d9,#c026d3)}.cover-2{background:linear-gradient(135deg,#0369a1,#2563eb)}.cover-3{background:linear-gradient(135deg,#047857,#10b981)}.cover-4{background:linear-gradient(135deg,#c2410c,#f97316)}.event-cover-top{display:flex;justify-content:space-between}.event-cover small{font-size:9px;color:rgba(255,255,255,.8)}.event-cover h3{font-size:17px;margin:5px 0}.event-cover p{font-size:10px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.event-card-body{padding:15px}.gender-counts{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.gender-counts>div{border:1px solid var(--line);background:var(--surface-2);border-radius:11px;padding:9px;text-align:center}.gender-counts b,.gender-counts small{display:block}.gender-counts b{font-size:13px;margin:4px 0 2px}.gender-counts small{font-size:8px;color:var(--muted)}.gender-icon{font-weight:800}.gender-icon.male{color:#2563eb}.gender-icon.female{color:#db2777}.gender-icon.neutral{color:#7c3aed}.money-line{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:13px 0}.money-line>div{padding:9px 0}.money-line span,.money-line b{display:block}.money-line span{font-size:8px;color:var(--muted)}.money-line b{font-size:11px;margin-top:3px}.progress-wrap>div:first-child{display:flex;justify-content:space-between;font-size:9px;color:var(--muted)}.card-actions{display:flex;gap:8px;margin-top:14px}.card-actions .btn-wide{flex:1}.form-page{max-width:950px;margin:auto}.form-page.narrow{max-width:800px}.form-intro{text-align:center;margin:8px 0 22px}.form-intro.compact{text-align:left;display:grid;grid-template-columns:54px 1fr;column-gap:12px;align-items:center}.form-intro.compact h2,.form-intro.compact p{grid-column:2}.form-icon{width:58px;height:58px;border-radius:17px;background:#f3e8ff;color:#6d28d9;display:grid;place-items:center;margin:0 auto 12px;font-size:26px}.form-icon .icon{width:27px;height:27px}.form-intro.compact .form-icon{grid-row:1/3;margin:0}.form-icon.blue{background:#eff6ff;color:#2563eb}.form-icon.pink{background:#fdf2f8;color:#db2777}.form-intro h2{margin:0;font-size:22px}.form-intro p{color:var(--muted);font-size:11px;margin:6px 0 0}.form-panel{padding:20px}.form-section{display:grid;grid-template-columns:180px 1fr;gap:25px}.form-section h3{margin:4px 0;font-size:14px}.form-section p{font-size:10px;color:var(--muted)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.form-grid label,.form-stack label,.payment-form label{font-size:10px;font-weight:700;color:var(--text);display:block}.form-grid label>span{color:#dc2626}.span-2{grid-column:span 2}.form-actions{display:flex;justify-content:flex-end;gap:9px;border-top:1px solid var(--line);margin-top:20px;padding-top:17px}input,select,textarea{width:100%;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:10px;padding:11px 12px;font:inherit;font-size:12px;outline:none;transition:.18s}input:focus,select:focus,textarea:focus{border-color:#8b5cf6;box-shadow:0 0 0 3px rgba(139,92,246,.10)}label input,label select,label textarea{margin-top:6px}.money-input{display:flex;align-items:center;border:1px solid var(--line);border-radius:10px;margin-top:6px;overflow:hidden;background:var(--surface)}.money-input:focus-within{border-color:#8b5cf6;box-shadow:0 0 0 3px rgba(139,92,246,.1)}.money-input span{padding:0 11px;color:var(--muted);font-weight:800}.money-input input{border:0!important;margin:0;box-shadow:none!important}.gender-selector{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}.gender-selector input{display:none}.gender-option{border:1px solid var(--line);border-radius:13px;padding:12px;display:flex;gap:9px;align-items:center;cursor:pointer;background:var(--surface-2)}.gender-option b{font-size:24px}.gender-option i{font-style:normal;font-weight:700}.gender-option.male b{color:#2563eb}.gender-option.female b{color:#db2777}.gender-selector input:checked+.gender-option.male{border-color:#60a5fa;background:#eff6ff;color:#1e3a8a}.gender-selector input:checked+.gender-option.female{border-color:#f9a8d4;background:#fdf2f8;color:#831843}.quick-money{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.quick-money>span{font-size:9px!important;color:var(--muted)!important}.quick-money button{border:1px solid var(--line);background:var(--surface-2);color:var(--text);border-radius:999px;padding:6px 9px;font-size:9px;cursor:pointer}.breadcrumb{display:flex;gap:7px;align-items:center;color:var(--muted);font-size:10px;margin-bottom:16px}.breadcrumb a{color:#6d28d9;font-weight:700}.event-detail-hero{background:linear-gradient(125deg,#4c1d95,#7c3aed 55%,#be185d);color:white;border-radius:22px;padding:24px;margin-bottom:14px}.event-detail-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.event-labels{display:flex;gap:6px}.event-detail-top h2{font-size:24px;margin:9px 0 6px}.event-detail-top p{font-size:10px;color:#ddd6fe;display:flex;align-items:center;gap:5px}.event-detail-top p .icon{width:14px}.hero-menu{display:flex;gap:8px}.event-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:20px}.event-kpis>div{padding:12px 14px;border-radius:13px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.12)}.event-kpis span,.event-kpis b{display:block}.event-kpis span{font-size:8px;color:#ddd6fe}.event-kpis b{font-size:14px;margin-top:4px}.quick-gender{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:14px}.quick-card{padding:14px;border-radius:15px;background:var(--surface);border:1px solid var(--line);display:flex;align-items:center;gap:12px;box-shadow:0 6px 18px rgba(31,38,70,.04)}.quick-card>span{font-size:24px;font-weight:800;width:42px;height:42px;border-radius:12px;display:grid;place-items:center}.quick-card.male>span{background:#eff6ff;color:#2563eb}.quick-card.female>span{background:#fdf2f8;color:#db2777}.quick-card.neutral>.icon:first-child{width:42px;height:42px;padding:11px;border-radius:12px;background:#f3e8ff;color:#7c3aed}.quick-card div{flex:1}.quick-card b,.quick-card small{display:block}.quick-card b{font-size:11px}.quick-card small{color:var(--muted);font-size:8px;margin-top:3px}.records-toolbar{padding:13px 14px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;align-items:center}.segmented{display:flex;background:var(--surface-2);padding:4px;border-radius:10px;gap:2px}.segmented a{padding:7px 10px;border-radius:8px;font-size:9px;font-weight:700;color:var(--muted)}.segmented a b{margin-left:3px}.segmented a.active{background:var(--surface);box-shadow:0 2px 7px rgba(0,0,0,.06);color:#6d28d9}.segmented a.active.male{color:#2563eb}.segmented a.active.female{color:#db2777}.toolbar-actions{display:flex;gap:7px;align-items:center}.mini-search input{width:190px;padding-top:9px;padding-bottom:9px}.table-wrap{overflow:auto}.data-table{width:100%;border-collapse:collapse;min-width:850px}.data-table th{font-size:8px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-weight:800;text-align:left;background:var(--surface-2);padding:10px 13px;border-bottom:1px solid var(--line)}.data-table td{padding:11px 13px;border-bottom:1px solid var(--line);font-size:10px;vertical-align:middle}.data-table tr:last-child td{border-bottom:0}.data-table td small{display:block;color:var(--muted);font-size:8px;margin-top:3px}.data-table .num{text-align:right}.name-link{display:flex;gap:9px;align-items:center}.name-link b{font-size:10px}.table-avatar{width:33px;height:33px;border-radius:10px;display:grid;place-items:center;font-weight:800;background:#eff6ff;color:#2563eb}.table-avatar.female{background:#fdf2f8;color:#db2777}.table-avatar.neutral{background:#f3e8ff;color:#7c3aed}.gender-pill,.status-pill{display:inline-flex;padding:5px 8px;border-radius:999px;font-size:8px;font-weight:800;white-space:nowrap}.gender-pill.male{background:#eff6ff;color:#2563eb}.gender-pill.female{background:#fdf2f8;color:#db2777}.status-pill.success{background:#ecfdf5;color:#047857}.status-pill.warning{background:#fffbeb;color:#b45309}.status-pill.danger{background:#fef2f2;color:#b91c1c}.address-main{display:block}.row-actions{display:flex;justify-content:flex-end;gap:3px}.row-actions .icon-btn{width:31px;height:31px}.sub-link{font-weight:700;color:#6d28d9}.danger-zone{margin-top:16px;border:1px dashed #fecaca;border-radius:15px;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;gap:15px;background:color-mix(in srgb,#fef2f2 70%,var(--surface))}.danger-zone b{font-size:11px}.danger-zone p{font-size:9px;color:var(--muted);margin:3px 0 0}.record-detail-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:16px}.person-card{padding:20px}.person-head{display:flex;align-items:center;gap:13px}.person-head>div{flex:1}.person-head h2{font-size:20px;margin:7px 0 3px}.person-head p{font-size:10px;color:var(--muted);margin:0}.person-avatar{width:58px;height:58px;border-radius:17px;display:grid;place-items:center;font-size:22px;font-weight:800;background:#eff6ff;color:#2563eb}.person-avatar.female{background:#fdf2f8;color:#db2777}.detail-list{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}.detail-list>div{border:1px solid var(--line);background:var(--surface-2);border-radius:11px;padding:10px}.detail-list span,.detail-list b{display:block}.detail-list span{font-size:8px;color:var(--muted)}.detail-list b{font-size:10px;margin-top:4px}.record-total{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);margin-top:16px;padding-top:15px}.record-total span,.record-total b{display:block}.record-total>div span{font-size:9px;color:var(--muted)}.record-total>div b{font-size:19px;margin-top:3px}.payment-progress{margin-top:16px}.payment-progress>div:first-child{display:flex;justify-content:space-between;font-size:9px}.payment-progress small{display:block;color:var(--muted);font-size:8px;margin-top:5px}.payment-form{padding:17px;display:grid;grid-template-columns:1fr 1fr;gap:11px}.payment-form .btn{grid-column:span 2}.paid-complete{margin:18px;background:#ecfdf5;color:#065f46;border:1px solid #bbf7d0;border-radius:13px;padding:15px;display:flex;gap:10px}.paid-complete b{font-size:11px}.paid-complete p{font-size:9px;margin:3px 0 0}.payment-history{padding:5px 20px}.payment-item{display:flex;align-items:center;gap:11px;padding:12px 0;border-bottom:1px solid var(--line)}.payment-item:last-child{border-bottom:0}.payment-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#ecfdf5;color:#059669}.payment-icon .icon{width:17px}.payment-item>div{flex:1}.payment-item b,.payment-item small{display:block}.payment-item b{font-size:11px}.payment-item small{font-size:8px;color:var(--muted);margin-top:3px}.report.metric-grid{margin-top:0}.backup-card{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:16px;padding:18px;border-radius:17px;background:linear-gradient(135deg,#ede9fe,#fae8ff);color:#4c1d95}.backup-card>div{display:flex;gap:12px;align-items:center}.backup-card h3{margin:0;font-size:13px}.backup-card p{margin:4px 0 0;font-size:9px}.settings-grid{display:grid;grid-template-columns:300px 1fr;gap:16px}.profile-summary{padding:24px;text-align:center;height:max-content}.big-avatar{width:80px;height:80px;border-radius:24px;background:linear-gradient(135deg,#6d28d9,#ec4899);color:#fff;display:grid;place-items:center;font-size:30px;font-weight:800;margin:auto}.profile-summary h2{font-size:18px;margin:12px 0 3px}.profile-summary>p{font-size:10px;color:var(--muted);margin:0}.role-badge{display:inline-block;margin-top:10px;border-radius:99px;background:#ede9fe;color:#6d28d9;padding:5px 9px;font-size:8px;font-weight:800}.account-meta{border-top:1px solid var(--line);margin-top:18px;padding-top:12px}.account-meta>div{display:flex;justify-content:space-between;padding:6px 0;font-size:9px}.account-meta span{color:var(--muted)}.settings-main{display:flex;flex-direction:column;gap:16px}.settings-main .panel{padding-bottom:18px}.settings-main .form-grid{padding:18px}.theme-options{padding:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.theme-options button{border:1px solid var(--line);background:var(--surface-2);color:var(--text);border-radius:12px;padding:13px;cursor:pointer}.theme-options span,.theme-options b{display:block}.theme-options span{font-size:20px}.theme-options b{font-size:9px;margin-top:5px}.admin-grid{display:grid;grid-template-columns:300px 1fr;gap:16px}.admin-grid>.panel:first-child{padding:18px;height:max-content}.form-stack{display:flex;flex-direction:column;gap:12px}.user-list{padding:5px 18px}.user-row{display:flex;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}.user-main{flex:1}.user-main b,.user-main span,.user-main small{display:block}.user-main b{font-size:10px}.user-main span{font-size:9px;color:var(--muted);margin:2px 0}.user-main small{font-size:8px;color:var(--muted)}.user-actions{display:flex;gap:6px}.user-actions details{position:relative}.user-actions summary{list-style:none}.popover-form{position:absolute;right:0;top:38px;z-index:5;width:220px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);padding:10px;border-radius:12px;display:flex;gap:6px}.import-panel{padding:8px 20px}.import-step{display:grid;grid-template-columns:38px 1fr;gap:12px;padding:17px 0;border-bottom:1px solid var(--line)}.import-step:last-child{border:0}.import-step>span{width:34px;height:34px;border-radius:11px;background:#ede9fe;color:#6d28d9;display:grid;place-items:center;font-weight:800}.import-step h3{font-size:12px;margin:2px 0 4px}.import-step p{font-size:9px;color:var(--muted);margin:0 0 10px}.upload-form{display:flex;gap:8px}.upload-form input{flex:1}.alert{padding:11px 13px;border-radius:11px;border:1px solid;margin-bottom:14px;font-size:10px}.alert.success{background:#ecfdf5;border-color:#bbf7d0;color:#065f46}.alert.danger{background:#fef2f2;border-color:#fecaca;color:#991b1b}.empty-state{text-align:center;padding:36px}.empty-state.full{grid-column:1/-1}.empty-visual{width:54px;height:54px;border-radius:18px;background:#f3e8ff;color:#7c3aed;display:grid;place-items:center;margin:0 auto 10px;font-size:24px}.empty-state h4{margin:0}.empty-state p,.empty-compact{color:var(--muted);font-size:10px}.empty-compact{padding:22px;text-align:center}.text-link{color:#6d28d9;font-size:9px;font-weight:800}.action-group{display:flex;gap:8px;align-items:center}.bottom-nav,.sidebar-overlay{display:none}
/* auth */.auth-page{min-height:100vh;background:#f6f7fb}.auth-shell{min-height:100vh;display:grid;grid-template-columns:1.2fr .8fr}.auth-visual{position:relative;overflow:hidden;background:linear-gradient(135deg,#24104f,#5b21b6 55%,#9d174d);color:white;display:flex;align-items:center;padding:8vw}.auth-glow{position:absolute;border-radius:50%;filter:blur(10px);opacity:.28}.auth-glow.one{width:420px;height:420px;background:#a78bfa;top:-150px;right:-80px}.auth-glow.two{width:350px;height:350px;background:#fb7185;bottom:-180px;left:-70px}.auth-copy{position:relative;z-index:2;max-width:620px}.auth-badge{font-size:10px;letter-spacing:.16em;font-weight:800;color:#c4b5fd}.auth-copy h1{font-size:42px;line-height:1.15;margin:15px 0}.auth-copy h1 em{font-style:normal;color:#fde68a}.auth-copy>p{font-size:13px;line-height:1.7;color:#ddd6fe;max-width:540px}.auth-features{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.auth-features span{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.12);padding:9px 12px;border-radius:10px;font-size:10px}.auth-features .icon{width:16px}.auth-panel{display:grid;place-items:center;padding:30px;background:var(--bg)}.auth-card{width:min(430px,100%);background:var(--surface);padding:32px;border-radius:23px;border:1px solid var(--line);box-shadow:0 25px 60px rgba(22,26,57,.12)}.auth-card .auth-brand{margin-bottom:28px}.auth-card h2{font-size:22px;margin:0}.auth-card>p{font-size:10px;line-height:1.5}.password-wrap{position:relative;margin-top:6px}.password-wrap input{margin:0;padding-right:70px}.password-toggle{position:absolute;right:6px;top:6px;bottom:6px;border:0;background:var(--surface-2);color:var(--muted);border-radius:7px;font-size:8px;font-weight:700}.auth-divider{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:8px;margin:18px 0}.auth-divider:before,.auth-divider:after{content:"";height:1px;background:var(--line);flex:1}.auth-register{text-align:center}.auth-register a{color:#6d28d9;font-weight:800}.auth-security{display:flex;align-items:center;gap:7px;background:#ecfdf5;color:#047857;border-radius:10px;padding:10px;margin-top:18px;font-size:8px}.auth-security .icon{width:15px}.auth-page.simple{display:grid;place-items:center;padding:25px}.register-wrap{width:min(520px,100%)}.register-card{width:100%}.register-card hr{border:0;border-top:1px solid var(--line);margin:5px 0}
@media(max-width:1180px){.event-card-grid{grid-template-columns:repeat(2,1fr)}.metric-grid{grid-template-columns:repeat(2,1fr)}.event-kpis{grid-template-columns:repeat(3,1fr)}.event-progress{grid-column:span 2}.dashboard-columns{grid-template-columns:1fr}.settings-grid{grid-template-columns:260px 1fr}}
@media(max-width:860px){:root{--sidebar:240px}.sidebar{transform:translateX(-105%);transition:.22s}.sidebar.open{transform:translateX(0)}.sidebar-overlay.show{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:45}.main-wrap{margin-left:0}.mobile-only{display:grid}.content{padding:18px 14px 92px}.topbar{height:66px;padding:0 14px}.profile-text{display:none}.dashboard-hero{padding:25px}.hero-ring{display:none}.dashboard-hero h2{font-size:25px}.event-card-grid{grid-template-columns:1fr 1fr}.form-section{grid-template-columns:1fr}.quick-gender{grid-template-columns:1fr 1fr}.quick-gender .neutral{grid-column:span 2}.event-detail-top{flex-direction:column}.event-kpis{grid-template-columns:repeat(2,1fr)}.event-progress{grid-column:span 2}.record-detail-grid,.settings-grid,.admin-grid{grid-template-columns:1fr}.profile-summary{max-width:none}.bottom-nav{display:flex;position:fixed;left:0;right:0;bottom:0;height:67px;background:color-mix(in srgb,var(--surface) 92%,transparent);border-top:1px solid var(--line);z-index:42;justify-content:space-around;align-items:center;padding-bottom:max(2px,env(safe-area-inset-bottom));backdrop-filter:blur(12px)}.bottom-nav>a{min-width:54px;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--muted);font-size:8px}.bottom-nav .icon{width:20px}.bottom-nav>a.active{color:#7c3aed}.bottom-nav .bottom-add{width:48px;height:48px;min-width:48px;border-radius:16px;background:linear-gradient(135deg,#6d28d9,#ec4899);color:#fff;display:grid;place-items:center;transform:translateY(-9px);box-shadow:0 10px 25px rgba(109,40,217,.32)}.bottom-nav .bottom-add .icon{width:24px;height:24px}.app-footer{display:none}.auth-shell{grid-template-columns:1fr}.auth-visual{display:none}.auth-panel{min-height:100vh}.records-toolbar{flex-direction:column;align-items:stretch}.segmented{overflow:auto}.toolbar-actions{justify-content:space-between}.mini-search{flex:1}.mini-search input{width:100%}}
@media(max-width:600px){.metric-grid{grid-template-columns:1fr 1fr;gap:9px}.metric-card{padding:13px;gap:9px}.metric-icon{width:38px;height:38px}.metric-card strong{font-size:14px}.metric-card span{font-size:8px}.dashboard-hero{min-height:auto;border-radius:18px;padding:22px}.dashboard-hero h2{font-size:21px}.dashboard-hero p{font-size:10px}.hero-actions{flex-wrap:wrap}.event-row{grid-template-columns:45px 1fr}.event-money{grid-column:2;text-align:left;display:flex;align-items:center;gap:8px}.event-money small,.event-money .icon{display:none}.event-card-grid{grid-template-columns:1fr}.page-actions{align-items:flex-start}.page-actions>.btn{font-size:0;width:42px;height:42px;padding:0}.page-actions>.btn .icon{width:20px}.filterbar{display:grid;grid-template-columns:1fr 1fr}.filterbar .searchbox{grid-column:span 2}.form-grid{grid-template-columns:1fr}.span-2{grid-column:span 1}.form-actions{grid-column:1!important}.gender-selector{grid-template-columns:1fr 1fr}.quick-gender{grid-template-columns:1fr}.quick-gender .neutral{grid-column:auto}.event-detail-hero{padding:18px;border-radius:18px}.event-detail-top h2{font-size:20px}.hero-menu{width:100%}.hero-menu .btn{flex:1}.event-kpis>div{padding:10px}.event-kpis b{font-size:11px}.form-intro.compact h2{font-size:18px}.record-detail-grid{grid-template-columns:1fr}.detail-list{grid-template-columns:1fr}.payment-form{grid-template-columns:1fr}.payment-form .btn{grid-column:1}.settings-main .form-grid{grid-template-columns:1fr}.theme-options{grid-template-columns:repeat(3,1fr)}.admin-grid{grid-template-columns:1fr}.user-row{align-items:flex-start}.user-actions{flex-direction:column}.filterbar.multi{grid-template-columns:1fr 1fr}.filterbar.multi .searchbox{grid-column:span 2}.auth-panel{padding:16px}.auth-card{padding:24px 20px;border-radius:18px}.upload-form{flex-direction:column}}

/* v4.0 team assignment */
.role-top{font-size:9px;font-weight:800;padding:6px 9px;border-radius:999px;background:linear-gradient(135deg,#ede9fe,#fae8ff);color:#6d28d9;border:1px solid #ddd6fe}.sidebar-section.compact{margin-top:20px}.role-badge.inline{display:inline-flex;margin:0;padding:3px 7px}.role-badge.role-superadmin,.role-badge.role-admin{background:#ede9fe;color:#6d28d9}.role-badge.role-petugas{background:#e0f2fe;color:#0369a1}.role-badge.role-viewer{background:#f3f4f6;color:#4b5563}.team-hero{background:radial-gradient(circle at 75% 10%,rgba(255,255,255,.2),transparent 25%),linear-gradient(125deg,#4c1d95,#6d28d9 43%,#be185d 105%)}.assignment-strip{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}.assignment-pill,.scope-pill{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:5px 8px;font-size:8px;font-weight:800;white-space:nowrap}.assignment-pill.role-manager{background:#ede9fe;color:#6d28d9}.assignment-pill.role-petugas{background:#e0f2fe;color:#0369a1}.assignment-pill.role-viewer{background:#f3f4f6;color:#4b5563}.scope-pill.scope-all{background:#ecfdf5;color:#047857}.scope-pill.scope-laki_laki{background:#eff6ff;color:#1d4ed8}.scope-pill.scope-perempuan{background:#fdf2f8;color:#be185d}.badge.access{background:rgba(255,255,255,.14);color:white;border-color:rgba(255,255,255,.2)}.team-summary{margin:14px 0;display:flex;align-items:center;justify-content:space-between;padding:14px 16px}.team-summary>div{display:flex;align-items:center;gap:11px}.team-summary-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#ede9fe;color:#6d28d9}.team-summary b,.team-summary small{display:block}.team-summary b{font-size:11px}.team-summary small{font-size:9px;color:var(--muted);margin-top:3px}.assignment-layout{display:grid;grid-template-columns:360px minmax(0,1fr);gap:16px}.assignment-event-panel{height:max-content;max-height:calc(100vh - 150px);overflow:hidden;position:sticky;top:96px}.assignment-event-list{max-height:calc(100vh - 230px);overflow:auto}.assignment-event-item{display:grid;grid-template-columns:52px minmax(0,1fr) 18px;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);transition:.18s}.assignment-event-item:hover,.assignment-event-item.active{background:var(--surface-2)}.assignment-event-item.active{box-shadow:inset 3px 0 #7c3aed}.assignment-event-copy b,.assignment-event-copy small,.assignment-event-copy em{display:block}.assignment-event-copy b{font-size:10px;line-height:1.35}.assignment-event-copy small{font-size:8px;color:var(--muted);margin:3px 0}.assignment-event-copy em{font-size:8px;font-style:normal;color:#7c3aed;font-weight:700}.assignment-main{min-height:440px}.assignment-head h3{margin-top:8px}.assign-form-wrap{padding:18px 20px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--surface-2),var(--surface))}.assign-form-wrap h4{margin:0 0 12px;font-size:12px}.assignment-form{display:grid;grid-template-columns:1.4fr 1fr 1fr auto;gap:10px;align-items:end}.assignment-form label{font-size:9px;font-weight:700;color:var(--muted)}.assignment-form select{margin-top:6px}.team-list-wrap{padding:18px 20px}.section-mini-head{display:flex;justify-content:space-between;margin-bottom:9px}.section-mini-head h4{margin:0;font-size:12px}.section-mini-head p{margin:3px 0 0;font-size:8px;color:var(--muted)}.team-list{border:1px solid var(--line);border-radius:14px;overflow:hidden}.team-row{display:grid;grid-template-columns:40px minmax(130px,1fr) auto auto 38px;gap:10px;align-items:center;padding:11px 12px;border-bottom:1px solid var(--line)}.team-row:last-child{border-bottom:0}.team-avatar{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(135deg,#6d28d9,#ec4899);color:white;font-weight:800}.team-main b,.team-main small{display:block}.team-main b{font-size:10px}.team-main small{font-size:8px;color:var(--muted);margin-top:2px}.upgrade-note{background:var(--surface-2);border:1px solid var(--line);padding:12px 14px;border-radius:12px;font-size:10px;line-height:1.6;margin:14px 0}.upgrade-note ul{margin:7px 0 0;padding-left:18px}.popover-form.vertical{flex-direction:column}.gender-counts .gender-icon .icon{width:15px;height:15px}.page-actions .action-group{flex-wrap:wrap}
@media(max-width:1050px){.assignment-layout{grid-template-columns:300px minmax(0,1fr)}.assignment-form{grid-template-columns:1fr 1fr}.assignment-form .btn{grid-column:span 2}.team-row{grid-template-columns:40px minmax(120px,1fr) auto 38px}.team-row .scope-pill{grid-column:2/4}}
@media(max-width:860px){.role-top{display:none}.assignment-layout{grid-template-columns:1fr}.assignment-event-panel{position:static;max-height:none}.assignment-event-list{max-height:320px}.assignment-form{grid-template-columns:1fr 1fr}.team-summary{margin-top:10px}}
@media(max-width:600px){.assignment-form{grid-template-columns:1fr}.assignment-form .btn{grid-column:auto}.team-row{grid-template-columns:38px 1fr 36px}.team-row .assignment-pill,.team-row .scope-pill{grid-column:2;justify-self:start}.team-row form{grid-column:3;grid-row:1}.assignment-event-item{grid-template-columns:48px 1fr 16px}.team-summary{align-items:flex-start}.team-summary .btn{font-size:0;width:38px;padding:0}.team-summary .btn:after{content:'⚙';font-size:16px}.page-actions .action-group{width:100%}.page-actions .action-group .btn{flex:1}}

/* v4.1 public homepage */
.public-page{margin:0;background:var(--bg,#f5f6fa);color:var(--text,#111827);min-height:100vh}.public-page *{box-sizing:border-box}.public-container{width:min(1180px,calc(100% - 36px));margin:auto}.public-header{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.82);backdrop-filter:blur(18px);border-bottom:1px solid rgba(148,163,184,.18)}[data-theme="dark"] .public-header{background:rgba(8,12,24,.84)}.public-nav{height:76px;display:flex;align-items:center;gap:28px}.public-brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--text);min-width:max-content}.public-brand .brand-mark{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#6d28d9,#ec4899 52%,#10b981);color:#fff;font-weight:900;box-shadow:0 12px 30px rgba(109,40,217,.22)}.public-brand b,.public-brand small{display:block}.public-brand b{font-size:14px}.public-brand small{font-size:8px;color:var(--muted);margin-top:2px}.public-menu{display:flex;gap:24px;margin-left:auto}.public-menu a,.footer-links a{font-size:10px;font-weight:750;color:var(--muted);text-decoration:none}.public-menu a:hover,.footer-links a:hover{color:#7c3aed}.public-actions{display:flex;align-items:center;gap:9px}.public-theme{width:40px;height:40px}.public-login-btn{background:linear-gradient(135deg,#6d28d9,#7c3aed,#ec4899);color:#fff;border:0;box-shadow:0 10px 26px rgba(109,40,217,.22)}.public-hero{position:relative;overflow:hidden;padding:88px 0 76px;background:radial-gradient(circle at 10% 10%,rgba(124,58,237,.12),transparent 30%),radial-gradient(circle at 95% 20%,rgba(236,72,153,.11),transparent 28%)}.public-orb{position:absolute;border-radius:999px;filter:blur(2px);opacity:.55;pointer-events:none}.orb-a{width:340px;height:340px;right:-150px;top:40px;background:linear-gradient(135deg,rgba(236,72,153,.17),rgba(59,130,246,.08))}.orb-b{width:260px;height:260px;left:-130px;bottom:-100px;background:linear-gradient(135deg,rgba(124,58,237,.15),rgba(16,185,129,.08))}.public-hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(400px,.95fr);align-items:center;gap:64px}.public-kicker{display:inline-flex;padding:8px 11px;border-radius:999px;background:linear-gradient(135deg,#ede9fe,#fce7f3);color:#6d28d9;font-size:8px;font-weight:900;letter-spacing:.08em;border:1px solid #ddd6fe}.public-kicker.dark{margin-bottom:14px}.public-hero-copy h1{font-size:clamp(38px,5.7vw,68px);line-height:1.02;letter-spacing:-.055em;margin:18px 0 20px;max-width:760px}.public-hero-copy h1 span{background:linear-gradient(90deg,#6d28d9,#9333ea,#ec4899,#f97316);-webkit-background-clip:text;color:transparent}.public-hero-copy>p{font-size:15px;line-height:1.8;color:var(--muted);max-width:680px}.public-cta{display:flex;gap:12px;flex-wrap:wrap;margin:30px 0 22px}.public-cta .btn{padding:14px 18px;font-size:10px}.public-primary{background:linear-gradient(135deg,#5b21b6,#7c3aed,#db2777);color:#fff;border:0;box-shadow:0 16px 34px rgba(109,40,217,.22)}.public-secondary{background:var(--surface);border:1px solid var(--line);color:var(--text)}.public-trust{display:flex;gap:16px;flex-wrap:wrap}.public-trust span{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:9px;font-weight:750}.public-trust .icon{width:15px;height:15px;color:#7c3aed}.public-preview-card{background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:16px;box-shadow:0 28px 80px rgba(26,14,54,.14);transform:rotate(1deg)}.preview-top{display:flex;align-items:center;padding:2px 3px 14px;color:var(--muted);font-size:8px}.preview-top>span{display:flex;gap:5px}.preview-top i{width:8px;height:8px;border-radius:50%;background:#fb7185}.preview-top i:nth-child(2){background:#fbbf24}.preview-top i:nth-child(3){background:#34d399}.preview-top b{margin:auto;font-size:9px}.preview-top em{font-style:normal;background:#dcfce7;color:#15803d;padding:5px 7px;border-radius:999px;font-weight:850}.preview-gradient{min-height:190px;border-radius:21px;padding:28px;display:flex;justify-content:space-between;align-items:center;color:#fff;background:radial-gradient(circle at 80% 10%,rgba(255,255,255,.24),transparent 32%),linear-gradient(125deg,#312e81,#6d28d9 48%,#be185d 100%)}.preview-gradient small,.preview-gradient strong,.preview-gradient p{display:block}.preview-gradient small{font-size:8px;font-weight:850;letter-spacing:.08em;opacity:.78}.preview-gradient strong{font-size:26px;margin:9px 0}.preview-gradient p{font-size:9px;line-height:1.7;max-width:260px;opacity:.84}.preview-shield{width:82px;height:82px;border-radius:24px;background:rgba(255,255,255,.13);display:grid;place-items:center;border:1px solid rgba(255,255,255,.18)}.preview-shield .icon{width:42px;height:42px}.preview-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:10px}.preview-metrics>div{padding:14px;border:1px solid var(--line);background:var(--surface-2);border-radius:14px}.preview-metrics span{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:9px;background:#ede9fe;color:#6d28d9;font-weight:900}.preview-metrics div:nth-child(2) span{background:#fce7f3;color:#be185d}.preview-metrics div:nth-child(3) span{background:#dcfce7;color:#047857}.preview-metrics b,.preview-metrics small{display:block}.preview-metrics b{font-size:9px;margin-top:9px}.preview-metrics small{font-size:7.5px;color:var(--muted);margin-top:3px}.visitor-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface)}.visitor-grid{display:grid;grid-template-columns:repeat(3,1fr) 1.4fr;min-height:96px}.visitor-grid>div{display:flex;align-items:center;gap:12px;padding:18px 24px;border-right:1px solid var(--line)}.visitor-grid>div:last-child{border-right:0}.visitor-grid>div>span{width:40px;height:40px;border-radius:12px;background:#ede9fe;color:#6d28d9;display:grid;place-items:center}.visitor-grid .icon{width:19px;height:19px}.visitor-grid p{margin:0}.visitor-grid b,.visitor-grid small{display:block}.visitor-grid b{font-size:18px}.visitor-grid small{font-size:8px;color:var(--muted);margin-top:2px}.visitor-note{background:linear-gradient(135deg,rgba(124,58,237,.05),rgba(236,72,153,.04));display:block!important}.visitor-note b{font-size:10px!important}.visitor-note small{line-height:1.5;margin-top:5px!important}.public-section{padding:88px 0}.section-heading{max-width:730px;margin-bottom:38px}.section-heading>span{font-size:8px;font-weight:900;color:#7c3aed;letter-spacing:.1em}.section-heading h2{font-size:clamp(28px,4vw,46px);line-height:1.12;letter-spacing:-.04em;margin:11px 0 12px}.section-heading p{font-size:12px;color:var(--muted);line-height:1.75;margin:0}.benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.benefit-card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:25px;transition:.2s;box-shadow:0 12px 35px rgba(15,23,42,.035)}.benefit-card:hover{transform:translateY(-4px);box-shadow:0 20px 50px rgba(109,40,217,.09);border-color:rgba(124,58,237,.28)}.benefit-icon{width:47px;height:47px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(135deg,#ede9fe,#fae8ff);color:#6d28d9}.benefit-icon .icon{width:22px;height:22px}.benefit-card:nth-child(2) .benefit-icon{background:#dcfce7;color:#047857}.benefit-card:nth-child(3) .benefit-icon{background:#e0f2fe;color:#0369a1}.benefit-card:nth-child(4) .benefit-icon{background:#ffedd5;color:#c2410c}.benefit-card:nth-child(5) .benefit-icon{background:#fef3c7;color:#a16207}.benefit-card:nth-child(6) .benefit-icon{background:#fce7f3;color:#be185d}.benefit-card h3{font-size:14px;margin:18px 0 8px}.benefit-card p{font-size:9.5px;line-height:1.75;color:var(--muted);margin:0}.how-section{background:var(--surface-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.how-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(340px,.9fr);gap:40px}.how-steps{display:flex;flex-direction:column}.how-step{display:grid;grid-template-columns:52px 1fr;gap:17px;padding:17px 0;border-bottom:1px solid var(--line)}.how-step>span{width:45px;height:45px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(135deg,#6d28d9,#db2777);color:#fff;font-size:14px;font-weight:900;box-shadow:0 8px 22px rgba(109,40,217,.2)}.how-step h3{font-size:13px;margin:2px 0 6px}.how-step p{font-size:9.5px;line-height:1.65;color:var(--muted);margin:0}.how-panel{background:linear-gradient(145deg,#111827,#1e1b4b 58%,#4c1d95);color:#fff;border-radius:25px;padding:27px;box-shadow:0 28px 70px rgba(17,24,39,.18)}.how-panel-badge{display:inline-flex;padding:6px 8px;border-radius:999px;background:rgba(255,255,255,.1);font-size:7.5px;font-weight:900;letter-spacing:.09em}.how-panel h3{font-size:24px;margin:13px 0 20px}.role-demo{display:flex;flex-direction:column;gap:9px}.role-demo>div{display:flex;align-items:center;gap:10px;padding:12px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08)}.role-avatar{width:35px;height:35px;border-radius:11px;display:grid;place-items:center;font-size:10px;font-weight:900;color:#fff}.role-avatar.purple{background:#7c3aed}.role-avatar.blue{background:#0284c7}.role-avatar.pink{background:#db2777}.role-avatar.gray{background:#64748b}.role-demo p{margin:0}.role-demo b,.role-demo small{display:block}.role-demo b{font-size:9.5px}.role-demo small{font-size:7.5px;opacity:.68;margin-top:3px}.how-security{display:flex;gap:10px;margin-top:18px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1)}.how-security .icon{width:22px;height:22px;color:#a78bfa;flex:0 0 auto}.how-security p{margin:0}.how-security b,.how-security small{display:block}.how-security b{font-size:9px}.how-security small{font-size:7.5px;line-height:1.55;opacity:.68;margin-top:3px}.creator-section{background:radial-gradient(circle at 10% 70%,rgba(124,58,237,.08),transparent 27%)}.creator-grid{display:grid;grid-template-columns:1fr 430px;gap:70px;align-items:center}.creator-copy h2{font-size:42px;letter-spacing:-.04em;margin:0 0 14px}.creator-copy p{font-size:12px;line-height:1.8;color:var(--muted);max-width:630px}.creator-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}.creator-tags span{padding:8px 10px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);font-size:8px;font-weight:800;color:var(--muted)}.creator-card{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:26px;box-shadow:0 22px 60px rgba(15,23,42,.08);display:grid;grid-template-columns:56px 1fr;gap:13px}.creator-card-icon{width:56px;height:56px;border-radius:17px;display:grid;place-items:center;background:linear-gradient(135deg,#6d28d9,#ec4899,#10b981);color:#fff;font-size:22px;font-weight:900}.creator-card>div small{font-size:8px;color:var(--muted)}.creator-card h3{font-size:15px;margin:4px 0}.creator-card dl{grid-column:1/-1;margin:7px 0 0}.creator-card dl>div{padding:12px 0;border-bottom:1px solid var(--line)}.creator-card dt{font-size:7.5px;font-weight:850;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}.creator-card dd{font-size:10px;font-weight:700;margin:4px 0 0;line-height:1.55}.public-whatsapp{grid-column:1/-1;background:#16a34a;color:#fff;border:0;margin-top:5px}.public-final{padding:0 0 80px}.public-final-box{border-radius:28px;padding:36px 40px;display:flex;align-items:center;justify-content:space-between;gap:30px;color:#fff;background:radial-gradient(circle at 80% 10%,rgba(255,255,255,.18),transparent 28%),linear-gradient(125deg,#312e81,#6d28d9 48%,#be185d)}.public-final-box span{font-size:8px;font-weight:900;letter-spacing:.1em;opacity:.75}.public-final-box h2{max-width:700px;font-size:28px;line-height:1.2;margin:8px 0 0}.public-final-btn{background:#fff;color:#5b21b6;border:0;white-space:nowrap}.public-footer{border-top:1px solid var(--line);background:var(--surface);padding:34px 0}.public-footer>.public-container{display:flex;justify-content:space-between;gap:30px;align-items:flex-end}.footer-brand .brand-mark{width:36px;height:36px;border-radius:11px}.public-footer p{font-size:8px;color:var(--muted);margin:12px 0 0}.footer-links{display:flex;gap:18px}.public-back-link{display:block;text-align:center;margin:14px 0 0;font-size:9px;font-weight:750;color:#7c3aed;text-decoration:none}.compact-metrics{grid-template-columns:repeat(3,1fr)}.settings-public-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(340px,.9fr);gap:16px}.visitor-admin-list{padding:0 20px 14px}.visitor-admin-list>div{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}.visitor-admin-list b,.visitor-admin-list small{display:block}.visitor-admin-list b{font-size:9px}.visitor-admin-list small{font-size:8px;color:var(--muted);margin-top:3px}.visitor-admin-list strong{font-size:12px;text-align:right}.visitor-admin-list strong small{font-weight:500}.settings-privacy{margin:0 20px 20px}
[data-theme="dark"] .public-kicker{background:rgba(124,58,237,.17);border-color:rgba(167,139,250,.24);color:#c4b5fd}[data-theme="dark"] .preview-metrics span{background:rgba(124,58,237,.2);color:#c4b5fd}[data-theme="dark"] .benefit-icon{background:rgba(124,58,237,.18);color:#c4b5fd}
@media(max-width:980px){.public-menu{display:none}.public-hero-grid{grid-template-columns:1fr;gap:44px}.public-preview-card{max-width:680px;margin:auto;width:100%;transform:none}.visitor-grid{grid-template-columns:repeat(3,1fr)}.visitor-note{grid-column:1/-1;border-top:1px solid var(--line)}.benefit-grid{grid-template-columns:repeat(2,1fr)}.how-layout,.creator-grid,.settings-public-grid{grid-template-columns:1fr}.creator-card{max-width:560px}.creator-grid{gap:38px}}
@media(max-width:650px){.public-container{width:min(100% - 24px,1180px)}.public-nav{height:66px}.public-brand b{font-size:11px}.public-brand small{font-size:7px}.public-actions .public-theme{display:none}.public-login-btn{padding:10px 12px;font-size:8px}.public-login-btn .icon{display:none}.public-hero{padding:58px 0 48px}.public-hero-copy h1{font-size:40px}.public-hero-copy>p{font-size:11px}.public-cta{flex-direction:column}.public-cta .btn{justify-content:center}.public-trust{gap:9px}.public-trust span{font-size:7.5px}.public-preview-card{padding:10px;border-radius:20px}.preview-gradient{min-height:160px;padding:20px}.preview-gradient strong{font-size:20px}.preview-shield{width:58px;height:58px;border-radius:17px}.preview-shield .icon{width:30px;height:30px}.preview-metrics{grid-template-columns:1fr}.preview-metrics>div{display:grid;grid-template-columns:30px 1fr;column-gap:9px;align-items:center}.preview-metrics span{grid-row:1/3}.preview-metrics b{margin:0}.visitor-grid{grid-template-columns:1fr}.visitor-grid>div{border-right:0;border-bottom:1px solid var(--line);padding:13px 16px}.visitor-note{grid-column:auto;border-top:0}.public-section{padding:62px 0}.benefit-grid{grid-template-columns:1fr}.benefit-card{padding:21px}.how-step{grid-template-columns:44px 1fr}.how-step>span{width:40px;height:40px}.how-panel{padding:20px}.creator-copy h2{font-size:32px}.creator-card{grid-template-columns:48px 1fr;padding:20px}.creator-card-icon{width:48px;height:48px}.public-final{padding-bottom:54px}.public-final-box{padding:27px 22px;display:block}.public-final-box h2{font-size:22px}.public-final-btn{margin-top:20px;width:100%;justify-content:center}.public-footer>.public-container{display:block}.footer-links{margin-top:20px;flex-wrap:wrap}.compact-metrics{grid-template-columns:1fr}.settings-public-grid{grid-template-columns:1fr}}
/* v4.2 Branding & Media */
.brand-mark.brand-image{overflow:hidden;background:rgba(255,255,255,.96);padding:4px;border:1px solid rgba(255,255,255,.16)}
.brand-mark.brand-image img{width:100%;height:100%;object-fit:contain;border-radius:9px;display:block}
.public-brand .brand-mark.brand-image{box-shadow:0 8px 24px rgba(15,23,42,.12)}
.public-hero-photo{position:relative;min-height:420px;border-radius:30px;overflow:hidden;border:1px solid rgba(255,255,255,.24);box-shadow:0 35px 90px rgba(49,46,129,.20);background:#111827}
.public-hero-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.public-hero-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,23,42,.03) 20%,rgba(15,23,42,.82) 100%)}
.hero-photo-overlay{position:absolute;z-index:2;left:26px;right:26px;bottom:25px;color:#fff;display:flex;flex-direction:column;gap:7px}
.hero-photo-overlay>span{font-size:8px;font-weight:900;letter-spacing:.14em;opacity:.76}
.hero-photo-overlay>strong{font-size:24px;line-height:1.18;max-width:440px}
.hero-photo-overlay>small{display:flex;align-items:center;gap:7px;font-size:9px;opacity:.82}.hero-photo-overlay .icon{width:15px;height:15px}
.creator-logo{overflow:hidden;padding:5px;background:#fff}.creator-logo img{width:100%;height:100%;object-fit:contain;display:block;border-radius:12px}
.settings-main-form{display:block}.settings-text-grid{margin-top:16px}.settings-pad{padding:0 20px 22px}.settings-savebar{position:sticky;bottom:16px;z-index:25;margin-top:16px;padding:14px 16px;border:1px solid var(--line);border-radius:17px;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(16px);box-shadow:0 16px 45px rgba(15,23,42,.14);display:flex;align-items:center;justify-content:space-between;gap:20px}.settings-savebar b,.settings-savebar small{display:block}.settings-savebar b{font-size:11px}.settings-savebar small{font-size:8px;color:var(--muted);margin-top:3px}
.branding-upload-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:0 20px 22px}.branding-upload-card{border:1px solid var(--line);border-radius:18px;background:var(--surface-2);overflow:hidden}.branding-upload-card.wide-image{grid-column:1/-1;display:grid;grid-template-columns:minmax(240px,.85fr) 1.15fr}.branding-preview{height:175px;background:linear-gradient(135deg,rgba(124,58,237,.08),rgba(236,72,153,.05));display:grid;place-items:center;overflow:hidden;border-bottom:1px solid var(--line)}.branding-upload-card.wide-image .branding-preview{height:100%;min-height:220px;border-bottom:0;border-right:1px solid var(--line)}.branding-preview img{width:100%;height:100%;object-fit:contain;background:repeating-conic-gradient(rgba(148,163,184,.09) 0 25%,transparent 0 50%) 0/20px 20px}.branding-upload-card.wide-image .branding-preview img{object-fit:cover;background:transparent}.branding-placeholder{text-align:center;color:var(--muted);display:grid;place-items:center;gap:8px}.branding-placeholder .icon{width:30px;height:30px}.branding-placeholder span{font-size:9px;font-weight:750}.branding-upload-info{padding:16px}.branding-upload-info h4{font-size:12px;margin:0 0 7px}.branding-upload-info p{font-size:8.5px;line-height:1.6;color:var(--muted);margin:0 0 13px}.file-picker{display:inline-flex!important;align-items:center;gap:7px;padding:9px 12px;border-radius:11px;background:linear-gradient(135deg,#6d28d9,#db2777);color:#fff;font-size:9px;font-weight:800;cursor:pointer}.file-picker .icon{width:16px;height:16px}.file-picker input{display:none}.remove-media{display:flex!important;align-items:center;gap:7px;margin-top:11px;font-size:8.5px;color:var(--muted);cursor:pointer}.remove-media input{width:auto!important;margin:0}.upload-note{font-size:8px;color:var(--muted)}
@media(max-width:800px){.branding-upload-grid{grid-template-columns:1fr}.branding-upload-card.wide-image{grid-column:auto;display:block}.branding-upload-card.wide-image .branding-preview{height:190px;min-height:0;border-right:0;border-bottom:1px solid var(--line)}.settings-savebar{bottom:76px}.public-hero-photo{min-height:330px}}
@media(max-width:520px){.branding-upload-grid{padding:0 14px 18px}.settings-pad{padding:0 14px 18px}.settings-savebar{align-items:stretch;flex-direction:column}.settings-savebar .btn{width:100%}.public-hero-photo{min-height:285px;border-radius:22px}.hero-photo-overlay{left:18px;right:18px;bottom:18px}.hero-photo-overlay>strong{font-size:20px}}