.admin-layout{display:flex;min-height:100vh;background:var(--bg)}.admin-sidebar{width:260px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:55;transition:transform .3s ease}.admin-sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:20px 20px 16px;border-bottom:1px solid var(--border)}.admin-brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;color:var(--ink)}.admin-brand-icon{width:36px;height:36px;border-radius:10px;background:var(--grad-main);display:flex;align-items:center;justify-content:center;font-size:18px}.admin-close-btn{display:none;width:32px;height:32px;border-radius:8px;font-size:16px;color:var(--ink-2);align-items:center;justify-content:center}.admin-close-btn:hover{background:var(--surface-2);color:var(--ink)}.admin-nav{flex:1;padding:12px;display:flex;flex-direction:column;gap:2px;overflow-y:auto}.admin-nav-item{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--radius-sm);font-size:14px;font-weight:600;color:var(--ink-2);text-decoration:none;transition:background-color .15s ease,color .15s ease}.admin-nav-item:hover{background:var(--surface-2);color:var(--ink)}.admin-nav-item.active{background:var(--link-active-bg);color:var(--link-active-color)}.admin-nav-icon{width:20px;text-align:center;font-size:16px}.admin-sidebar-footer{padding:12px;border-top:1px solid var(--border)}.admin-main{flex:1;margin-left:260px;display:flex;flex-direction:column;min-width:0}.admin-topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:16px;padding:0 24px;height:60px;background:var(--toolbar-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}.admin-menu-btn{display:none;width:36px;height:36px;border-radius:8px;font-size:18px;color:var(--ink-2);align-items:center;justify-content:center}.admin-menu-btn:hover{background:var(--surface-2);color:var(--ink)}.admin-topbar-title{font-weight:700;font-size:16px;color:var(--ink)}.admin-topbar-actions{margin-left:auto;display:flex;align-items:center;gap:14px}.admin-theme-toggle{display:flex;gap:4px;background:var(--surface-2);border-radius:var(--radius-full);padding:3px;border:1px solid var(--border)}.theme-btn{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;transition:all .15s ease}.theme-btn.active{background:var(--surface);box-shadow:var(--shadow-sm)}.admin-role-badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:var(--radius-full);font-size:11px;font-weight:700;color:#fff;letter-spacing:.04em;text-transform:uppercase}.admin-user-menu{display:flex;align-items:center;gap:10px}.admin-user-name{font-size:13.5px;font-weight:600;color:var(--ink-2)}.admin-content{flex:1;padding:24px;overflow-x:hidden}.admin-stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-bottom:24px}.admin-stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:20px;box-shadow:var(--shadow-sm)}.admin-stat-card .label{font-size:12.5px;font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}.admin-stat-card .value{font-size:26px;font-weight:800;color:var(--ink);letter-spacing:-.02em}.admin-stat-card .sub{font-size:12px;color:var(--ink-3);margin-top:4px}.admin-stat-card.revenue .value{color:var(--success)}.admin-stat-card.profit .value{color:var(--periwinkle)}.admin-stat-card.pending .value{color:var(--warning)}.admin-stat-card.failed .value{color:var(--error)}.admin-status-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-bottom:24px}.admin-status-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px;display:flex;align-items:center;gap:10px}.admin-status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.admin-status-dot.healthy{background:var(--success)}.admin-status-dot.warning{background:var(--warning)}.admin-status-dot.error{background:var(--error)}.admin-status-dot.unknown{background:var(--ink-3)}.admin-status-item .label{font-size:13px;font-weight:600;color:var(--ink)}.admin-status-item .value{margin-left:auto;font-size:12px;font-weight:600;color:var(--ink-2)}.admin-table-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;margin-bottom:24px}.admin-table-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);flex-wrap:wrap;gap:12px}.admin-table-title{font-size:16px;font-weight:700;color:var(--ink)}.admin-table-search{display:flex;gap:8px}.admin-table-search .input{max-width:280px;padding:9px 14px;font-size:13.5px}.admin-table{width:100%;border-collapse:collapse;font-size:13.5px}.admin-table th{text-align:left;padding:12px 16px;font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);border-bottom:1px solid var(--border);white-space:nowrap}.admin-table td{padding:12px 16px;border-bottom:1px solid var(--border);color:var(--ink);vertical-align:middle}.admin-table tr:last-child td{border-bottom:none}.admin-table tr:hover td{background:var(--surface-2)}.admin-table-empty{padding:48px 16px;text-align:center;color:var(--ink-3);font-size:14px}.admin-table-pagination{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-top:1px solid var(--border);font-size:13px;color:var(--ink-3)}.admin-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}.admin-badge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:var(--radius-full);font-size:11px;font-weight:700;letter-spacing:.03em}.admin-badge.success{background:var(--success-bg);color:var(--success)}.admin-badge.warning{background:var(--warning-bg);color:var(--warning)}.admin-badge.error{background:var(--error-bg);color:var(--error)}.admin-badge.info{background:var(--badge-info-bg);color:var(--badge-info-color)}.admin-badge.neutral{background:var(--surface-2);color:var(--ink-2)}.admin-form{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:24px;box-shadow:var(--shadow-sm);max-width:560px}.admin-form h3{font-size:18px;font-weight:800;margin-bottom:20px}.admin-form-grid{display:grid;gap:16px}.admin-form-actions{display:flex;gap:10px;margin-top:20px}.admin-filter-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}.admin-filter-row .select{min-height:38px;font-size:13px}.admin-chart-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:20px;box-shadow:var(--shadow-sm);margin-bottom:24px}.admin-chart-card h3{font-size:15px;font-weight:700;margin-bottom:16px}.admin-chart-bars{display:flex;align-items:flex-end;gap:4px;height:140px}.admin-chart-bar{flex:1;min-width:4px;max-width:24px;border-radius:3px 3px 0 0;background:var(--periwinkle);transition:height .3s ease;position:relative}.admin-chart-bar:hover{opacity:.8}.admin-chart-bar-tooltip{display:none;position:absolute;bottom:100%;left:50%;transform:translate(-50%);background:var(--navy);color:#fff;padding:4px 8px;border-radius:6px;font-size:11px;font-weight:600;white-space:nowrap}.admin-chart-bar:hover .admin-chart-bar-tooltip{display:block}.admin-section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px}.admin-section-header h2{font-size:22px;font-weight:800}.admin-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px}.admin-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:24px}@media(max-width:1024px){.admin-grid-2,.admin-grid-3{grid-template-columns:1fr}}@media(max-width:768px){.admin-sidebar{transform:translate(-100%)}.admin-sidebar.open{transform:none;box-shadow:var(--shadow-lg)}.admin-close-btn{display:flex}.admin-main{margin-left:0}.admin-menu-btn{display:flex}.admin-topbar{padding:0 16px}.admin-content{padding:16px}.admin-stats-grid{grid-template-columns:1fr 1fr}.admin-stat-card .value{font-size:22px}.admin-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#151c3480;z-index:54}.admin-table-header{flex-direction:column;align-items:stretch}.admin-table-search .input{max-width:100%}.admin-user-name{display:none}.admin-topbar-title{font-size:14px}}@media(max-width:480px){.admin-stats-grid{grid-template-columns:1fr}.admin-stat-card .value{font-size:20px}}:root{--white: #ffffff;--lavender: #c1c3ef;--periwinkle: #8e99d5;--navy: #2a3e66;--bg: #f4f6fc;--surface: #ffffff;--surface-2: #f8f9fd;--ink: #1b2542;--ink-2: #56618a;--ink-3: #8b94b8;--border: #e5e8f5;--border-strong: #cfd4ec;--success: #2fbf71;--success-bg: #e5f8ee;--warning: #ee9f2e;--warning-bg: #fdf3e1;--error: #e2545b;--error-bg: #fdecec;--nav-bg: rgba(255, 255, 255, .72);--toolbar-bg: rgba(255, 255, 255, .88);--badge-info-bg: #eceef9;--badge-info-color: var(--periwinkle);--mark-bg: rgba(193, 195, 239, .55);--plan-active-bg: linear-gradient(180deg, #f7f8fe, var(--surface));--link-active-bg: #eceef9;--link-active-color: var(--navy);--skel-from: #e9ecf8;--skel-to: #f5f7fd;--grad-main: linear-gradient(135deg, #2a3e66 0%, #5b6cb4 55%, #8e99d5 100%);--grad-accent: linear-gradient(135deg, #8e99d5 0%, #c1c3ef 100%);--grad-soft: linear-gradient(135deg, #eef0fb 0%, #ffffff 100%);--radius-sm: 10px;--radius-md: 16px;--radius-lg: 24px;--radius-xl: 32px;--radius-full: 999px;--shadow-sm: 0 2px 10px rgba(42, 62, 102, .08);--shadow-md: 0 10px 28px rgba(42, 62, 102, .13);--shadow-lg: 0 24px 56px rgba(42, 62, 102, .2);--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--nav-h: 68px;--container: 1200px;color-scheme:light}[data-theme=dark]{--bg: #121830;--surface: #1a2240;--surface-2: #212b50;--ink: #e9ecf9;--ink-2: #aab2d8;--ink-3: #6f79a6;--border: #2a3460;--border-strong: #3b4779;--success-bg: #1c3a2c;--warning-bg: #3a2f1a;--error-bg: #3c1f24;--nav-bg: rgba(18, 24, 48, .8);--toolbar-bg: rgba(18, 24, 48, .85);--badge-info-bg: #27325f;--badge-info-color: #b7bfec;--mark-bg: rgba(193, 195, 239, .32);--plan-active-bg: linear-gradient(180deg, #232c52, var(--surface));--link-active-bg: #27325f;--link-active-color: #c6cdf5;--skel-from: #222c52;--skel-to: #2a3560;--grad-soft: linear-gradient(135deg, #212b50, #1a2240);--shadow-sm: 0 2px 10px rgba(0, 0, 0, .35);--shadow-md: 0 10px 28px rgba(0, 0, 0, .45);--shadow-lg: 0 24px 56px rgba(0, 0, 0, .55);color-scheme:dark}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{font-family:var(--font-sans);background:var(--bg);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh;transition:background-color .25s ease,color .25s ease}img,svg{display:block;max-width:100%}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}input,select{font:inherit;color:inherit}ul,ol{list-style:none}h1,h2,h3,h4{line-height:1.2;letter-spacing:-.02em}::selection{background:var(--periwinkle);color:#fff}:focus-visible{outline:3px solid rgba(142,153,213,.55);outline-offset:2px;border-radius:6px}#root{display:flex;flex-direction:column;min-height:100vh}#root>main{flex:1}.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:12px 24px;border-radius:var(--radius-full);font-weight:600;font-size:15px;line-height:1;min-height:46px;border:1.5px solid transparent;white-space:nowrap;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,border-color .18s ease,color .18s ease}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.55;cursor:not-allowed;transform:none!important;box-shadow:none!important}.btn-primary{background:var(--grad-main);color:#fff;box-shadow:var(--shadow-sm)}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-md)}.btn-ghost{background:transparent;border-color:var(--border-strong);color:var(--ink)}.btn-ghost:hover:not(:disabled){border-color:var(--periwinkle);background:var(--surface)}.btn-soft{background:var(--grad-accent);color:#2c3b66;box-shadow:var(--shadow-sm)}.btn-soft:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-md)}.btn-white{background:#fff;color:var(--navy);box-shadow:var(--shadow-sm)}.btn-white:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-md)}.btn-outline-white{background:transparent;border-color:#ffffff73;color:#fff}.btn-outline-white:hover:not(:disabled){background:#ffffff1a;border-color:#fff}.btn-sm{padding:9px 16px;font-size:13.5px;min-height:40px}.btn-lg{padding:16px 32px;font-size:16px;min-height:52px}.btn-block{width:100%}.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:var(--radius-full);color:var(--ink-2);transition:background-color .18s ease,color .18s ease}.icon-btn:hover{background:var(--surface-2);color:var(--ink)}.icon{width:20px;height:20px;flex-shrink:0}.icon-sm{width:16px;height:16px}.icon-lg{width:26px;height:26px}.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:var(--radius-full);font-size:12px;font-weight:700;letter-spacing:.02em;line-height:1.5}.badge-success{background:var(--success-bg);color:var(--success)}.badge-warning{background:var(--warning-bg);color:var(--warning)}.badge-error{background:var(--error-bg);color:var(--error)}.badge-info{background:var(--badge-info-bg);color:var(--badge-info-color)}.badge-solid{background:var(--navy);color:#fff}.chip{display:inline-flex;align-items:center;gap:6px;padding:8px 15px;border-radius:var(--radius-full);font-size:13.5px;font-weight:600;color:var(--ink-2);border:1.5px solid var(--border);background:var(--surface);cursor:pointer;transition:all .18s ease;min-height:40px}.chip:hover{border-color:var(--periwinkle);color:var(--ink)}.chip.active{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:var(--shadow-sm)}.field{display:flex;flex-direction:column;gap:7px}.field label{font-size:13.5px;font-weight:600;color:var(--ink)}.input{width:100%;padding:12px 15px;border-radius:var(--radius-sm);border:1.5px solid var(--border);background:var(--surface);font-size:15px;color:var(--ink);transition:border-color .18s ease,box-shadow .18s ease}.input::placeholder{color:var(--ink-3)}.input:hover{border-color:var(--border-strong)}.input:focus{outline:none;border-color:var(--periwinkle);box-shadow:0 0 0 4px #8e99d52e}.input.error{border-color:var(--error);box-shadow:0 0 0 4px #e2545b1f}.field-msg{font-size:12.5px;color:var(--ink-3);min-height:0}.field-msg.error{color:var(--error)}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}.nav{position:sticky;top:0;z-index:50;background:var(--nav-bg);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:box-shadow .25s ease,border-color .25s ease}.nav.scrolled{border-bottom-color:var(--border);box-shadow:var(--shadow-sm)}.nav-inner{height:var(--nav-h);display:flex;align-items:center;gap:28px}.brand{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:19px;letter-spacing:-.02em;color:var(--ink)}.brand-mark{width:36px;height:36px;border-radius:11px;flex-shrink:0;background:var(--grad-main);color:#fff;display:inline-flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm)}.brand-mark .icon{width:19px;height:19px}.nav-links{display:flex;align-items:center;gap:6px;margin-left:auto}.nav-link{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:var(--radius-full);font-size:14.5px;font-weight:600;color:var(--ink-2);transition:color .18s ease,background-color .18s ease}.nav-link:hover{color:var(--ink);background:var(--surface-2)}.nav-link.active{color:var(--link-active-color);background:var(--link-active-bg)}.nav-actions{display:flex;align-items:center;gap:10px}.user-chip{display:inline-flex;align-items:center;gap:9px;padding:5px 15px 5px 6px;border-radius:var(--radius-full);border:1.5px solid var(--border);background:var(--surface);font-size:14px;font-weight:600;color:var(--ink);transition:border-color .18s ease,box-shadow .18s ease}.user-chip:hover{border-color:var(--periwinkle);box-shadow:var(--shadow-sm)}.avatar{width:30px;height:30px;border-radius:50%;flex-shrink:0;background:var(--grad-accent);color:#2c3b66;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;overflow:hidden}.avatar img{width:100%;height:100%;object-fit:cover}.nav-burger{display:none}.drawer-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:60;background:#151c3480;opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s ease;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.drawer-overlay.open{opacity:1;visibility:visible}.drawer{position:fixed;top:0;right:0;bottom:0;z-index:61;width:min(320px,86vw);background:var(--surface);box-shadow:var(--shadow-lg);padding:18px;display:flex;flex-direction:column;gap:18px;transform:translate(105%);visibility:hidden;transition:transform .3s ease,visibility .3s ease}.drawer.open{transform:none;visibility:visible}.drawer-head{display:flex;align-items:center;justify-content:space-between}.drawer-links{display:flex;flex-direction:column;gap:4px}.drawer-link{display:flex;align-items:center;gap:11px;padding:13px 14px;border-radius:var(--radius-sm);font-size:15.5px;font-weight:600;color:var(--ink-2);transition:background-color .18s ease,color .18s ease}.drawer-link:hover{background:var(--surface-2);color:var(--ink)}.drawer-link.active{background:var(--link-active-bg);color:var(--link-active-color)}.drawer-auth{margin-top:auto;display:flex;flex-direction:column;gap:10px}.section{padding:96px 0}.section-head{max-width:620px;margin:0 auto 52px;text-align:center}.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--periwinkle);margin-bottom:14px}.section-head h2{font-size:clamp(27px,3.6vw,40px);font-weight:800;margin-bottom:14px}.section-head p{color:var(--ink-2);font-size:16px}.reveal{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease}.reveal.in{opacity:1;transform:none}.skel{background:linear-gradient(90deg,var(--skel-from) 25%,var(--skel-to) 50%,var(--skel-from) 75%);background-size:200% 100%;border-radius:var(--radius-sm);animation:shimmer 1.3s infinite linear}@keyframes shimmer{to{background-position:-200% 0}}.toast-wrap{position:fixed;bottom:22px;left:50%;transform:translate(-50%);z-index:90;display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:none;width:max-content;max-width:92vw}.toast{display:flex;align-items:center;gap:10px;background:var(--navy);color:#fff;padding:12px 20px;border-radius:var(--radius-full);font-size:14px;font-weight:600;box-shadow:var(--shadow-lg);animation:toastIn .3s ease}.toast .icon{color:var(--lavender)}.toast.success .icon{color:#7ce6ab}.toast.error .icon{color:#ff9ba0}.toast.warning .icon{color:#ffd28a}.toast.out{animation:toastOut .3s ease forwards}@keyframes toastIn{0%{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}@keyframes toastOut{to{opacity:0;transform:translateY(10px) scale(.96)}}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:18px;background:#151c348c;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease}.modal-overlay.open{opacity:1;visibility:visible}.modal{width:100%;max-width:430px;background:var(--surface);border-radius:var(--radius-lg);padding:30px 28px;position:relative;box-shadow:var(--shadow-lg);transform:translateY(16px) scale(.97);transition:transform .28s ease;max-height:calc(100vh - 40px);overflow-y:auto}.modal-overlay.open .modal{transform:none}.modal-close{position:absolute;top:16px;right:16px}.modal-icon{width:52px;height:52px;border-radius:16px;background:var(--grad-accent);color:#2c3b66;display:flex;align-items:center;justify-content:center;margin-bottom:18px}.modal h3{font-size:22px;font-weight:800;margin-bottom:8px}.modal .modal-sub{color:var(--ink-2);font-size:14.5px;margin-bottom:24px}.modal .modal-actions{display:flex;flex-direction:column;gap:10px;margin-top:20px}.btn-google{display:flex;align-items:center;justify-content:center;gap:11px;width:100%;padding:13px;border-radius:var(--radius-full);border:1.5px solid var(--border);background:var(--surface);font-weight:600;font-size:15px;color:var(--ink);transition:border-color .18s ease,background-color .18s ease,transform .18s ease}.btn-google:hover{border-color:var(--periwinkle);background:var(--surface-2)}.btn-google:active{transform:scale(.98)}.btn-google svg{width:19px;height:19px}.loading-row{display:flex;align-items:center;justify-content:center;gap:11px;color:var(--ink-2);font-size:14.5px;font-weight:600;padding:8px 0}.spinner{width:20px;height:20px;border-radius:50%;flex-shrink:0;border:3px solid rgba(142,153,213,.3);border-top-color:var(--periwinkle);animation:spin .7s linear infinite}.spinner.light{border-color:#ffffff4d;border-top-color:#fff}.spinner.lg{width:26px;height:26px;border-width:3.5px}@keyframes spin{to{transform:rotate(360deg)}}.hero{position:relative;overflow:hidden;padding:86px 0 72px}.hero-bg{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0}.hero-blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5}.hero-blob.b1{width:480px;height:480px;background:var(--lavender);top:-160px;right:-80px}.hero-blob.b2{width:420px;height:420px;background:var(--periwinkle);bottom:-180px;left:-120px;opacity:.3}.hero-grid{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgba(142,153,213,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(142,153,213,.14) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000 30%,transparent 75%)}.hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}.hero-tag{display:inline-flex;align-items:center;gap:8px;background:#8e99d524;border:1px solid rgba(142,153,213,.35);color:var(--navy);font-size:13px;font-weight:700;padding:7px 15px;border-radius:var(--radius-full);margin-bottom:22px}[data-theme=dark] .hero-tag{color:#c6cdf5}.hero-tag .icon{color:var(--periwinkle)}.hero-title{font-size:clamp(34px,4.6vw,58px);font-weight:800;line-height:1.08;letter-spacing:-.03em;margin-bottom:22px}.hero-title .grad{background:linear-gradient(92deg,#2a3e66,#8e99d5);-webkit-background-clip:text;background-clip:text;color:transparent}[data-theme=dark] .hero-title .grad{background:linear-gradient(92deg,#c1c3ef,#8e99d5);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-sub{color:var(--ink-2);font-size:17px;max-width:480px;margin-bottom:34px}.hero-cta{display:flex;gap:14px;flex-wrap:wrap}.hero-stats{display:flex;gap:34px;margin-top:44px;flex-wrap:wrap;border-top:1px solid var(--border);padding-top:26px}.hero-stat b{display:block;font-size:22px;font-weight:800;letter-spacing:-.02em}.hero-stat span{font-size:13px;color:var(--ink-3);font-weight:500}.hero-visual{position:relative;height:460px;z-index:1}.hv-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(193,195,239,.85) 0%,rgba(142,153,213,.35) 45%,transparent 72%);filter:blur(6px)}.hv-ring{position:absolute;border-radius:50%;border:1.5px solid rgba(142,153,213,.4)}.hv-ring.r1{width:420px;height:420px;top:50%;left:50%;transform:translate(-50%,-50%)}.hv-ring.r2{width:300px;height:300px;top:50%;left:50%;transform:translate(-50%,-50%);border-style:dashed}.hv-card{position:absolute;width:232px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:10px;animation:floatY 6s ease-in-out infinite}.hv-card .cover{height:86px;margin-bottom:10px}.hv-info{display:flex;flex-direction:column;padding:2px 4px 4px}.hv-info span{font-size:12.5px;font-weight:700;color:var(--ink)}.hv-info strong{font-size:13px;font-weight:700;color:var(--periwinkle)}.hv-card.c1{top:14px;left:6%;animation-delay:0s;transform:rotate(-6deg)}.hv-card.c2{top:120px;right:2%;animation-delay:1.4s;transform:rotate(5deg)}.hv-card.c3{bottom:6px;left:16%;animation-delay:2.6s;transform:rotate(-3deg)}.hv-chip{position:absolute;display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-full);padding:9px 15px;font-size:12.5px;font-weight:700;color:var(--ink);box-shadow:var(--shadow-md);animation:floatY 5s ease-in-out infinite}.hv-chip .icon{color:var(--periwinkle)}.hv-chip.hc1{bottom:88px;right:4%;animation-delay:.8s}.hv-chip.hc2{top:4px;left:36%;animation-delay:2s}.hv-particles span{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--periwinkle);opacity:.55;animation:floatY 7s ease-in-out infinite}.hv-particles span:nth-child(1){top:8%;left:18%;animation-delay:0s}.hv-particles span:nth-child(2){top:22%;left:72%;animation-delay:1.1s;width:4px;height:4px}.hv-particles span:nth-child(3){top:64%;left:6%;animation-delay:2.2s;width:5px;height:5px}.hv-particles span:nth-child(4){top:84%;left:52%;animation-delay:.5s}.hv-particles span:nth-child(5){top:44%;left:92%;animation-delay:1.7s;width:4px;height:4px}.hv-particles span:nth-child(6){top:30%;left:40%;animation-delay:2.9s;width:5px;height:5px}.hv-particles span:nth-child(7){top:76%;left:86%;animation-delay:3.4s}.hv-particles span:nth-child(8){top:12%;left:88%;animation-delay:4s;width:4px;height:4px}@keyframes floatY{0%,to{transform:translateY(0)}50%{transform:translateY(-16px)}}.hv-card.c1,.hv-card.c2,.hv-card.c3,.hv-chip{will-change:transform}.cover{position:relative;aspect-ratio:21/9;border-radius:var(--radius-md);overflow:hidden;display:flex;align-items:center;justify-content:center}.cover:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 78% 22%,rgba(255,255,255,.28),transparent 46%)}.cover:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;opacity:.5;mix-blend-mode:overlay}.cover-initials{position:relative;font-size:clamp(20px,3vw,32px);font-weight:800;letter-spacing:.06em;color:#ffffffeb;text-shadow:0 2px 14px rgba(21,28,52,.4)}.t-dots:after{background-image:radial-gradient(rgba(255,255,255,.5) 1.5px,transparent 1.5px);background-size:15px 15px}.t-grid:after{background-image:linear-gradient(rgba(255,255,255,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.35) 1px,transparent 1px);background-size:22px 22px}.t-rings:after{background-image:radial-gradient(circle,transparent 0 9px,rgba(255,255,255,.4) 9.5px 10px,transparent 10.5px);background-size:34px 34px}.t-diag:after{background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.28) 0 2px,transparent 2px 12px)}.t-waves:after{background-image:radial-gradient(ellipse at center,transparent 0 55%,rgba(255,255,255,.3) 56% 58%,transparent 59%);background-size:100% 60%}.cover-ml{background:linear-gradient(120deg,#1d2c52,#4a5bb0)}.cover-ff{background:linear-gradient(120deg,#2a3e66,#8e99d5)}.cover-pubg{background:linear-gradient(120deg,#223052,#5d6dbd)}.cover-genshin{background:linear-gradient(120deg,#3d55a0,#8e99d5)}.cover-valorant{background:linear-gradient(120deg,#141d3a,#2a3e66)}.cover-hsr{background:linear-gradient(120deg,#8e99d5,#c1c3ef)}.cover-roblox{background:linear-gradient(120deg,#4a5bb0,#c1c3ef)}.cover-lol{background:linear-gradient(120deg,#2a3e66,#6b7cc9)}.cover-codm{background:linear-gradient(120deg,#33406b,#8e99d5)}.cover-psn{background:linear-gradient(120deg,#1d2c52,#4a5bb0)}.cover-steam{background:linear-gradient(120deg,#0f1830,#2a3e66)}.cover-gplay{background:linear-gradient(120deg,#5567b8,#8e99d5)}.cover-shells{background:linear-gradient(120deg,#2f4185,#8e99d5)}.cover-badge{position:absolute;top:10px;right:10px;z-index:2}.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(262px,1fr));gap:24px}.game-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;display:flex;flex-direction:column}.game-card:hover,.game-card:focus-visible{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--border-strong)}.game-card .cover{border-radius:0;aspect-ratio:21/9}.game-card .cover .cover-initials{transition:transform .3s ease}.game-card:hover .cover .cover-initials{transform:scale(1.12)}.game-body{padding:16px 18px 18px;display:flex;align-items:center;gap:14px}.game-meta{flex:1;min-width:0}.game-name{font-size:15.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.game-cat{font-size:12.5px;color:var(--ink-3);font-weight:600}.game-go{width:40px;height:40px;border-radius:var(--radius-full);flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:var(--surface-2);color:var(--ink-2);border:1.5px solid var(--border);transition:all .2s ease}.game-card:hover .game-go{background:var(--grad-accent);color:#2c3b66;border-color:transparent;transform:rotate(-45deg)}.skel-card{border-radius:var(--radius-lg);overflow:hidden;background:var(--surface);border:1px solid var(--border)}.skel-card .skel.thumb{aspect-ratio:21/9;border-radius:0}.skel-card .skel.line{height:14px;margin:14px 18px 0}.skel-card .skel.line.short{width:45%;margin-bottom:18px}.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.step{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px 24px;box-shadow:var(--shadow-sm);transition:transform .22s ease,box-shadow .22s ease}.step:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}.step-num{font-size:13px;font-weight:800;letter-spacing:.12em;color:var(--periwinkle);margin-bottom:16px;display:inline-flex;align-items:center;gap:8px}.step-num:after{content:"";width:26px;height:2px;background:var(--grad-accent);border-radius:2px}.step-icon{width:48px;height:48px;border-radius:14px;margin-bottom:18px;background:var(--grad-soft);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--navy)}[data-theme=dark] .step-icon{color:#c6cdf5}.step h3{font-size:17px;font-weight:700;margin-bottom:8px}.step p{font-size:13.5px;color:var(--ink-2)}.step-arrow{position:absolute;top:50%;right:-19px;transform:translateY(-50%);color:var(--border-strong);z-index:2;pointer-events:none}.step-arrow .icon{width:22px;height:22px}.benefit-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:22px}.benefit{grid-column:span 3;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:30px 28px;box-shadow:var(--shadow-sm);display:flex;gap:18px;align-items:flex-start;transition:transform .22s ease,box-shadow .22s ease}.benefit:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}.benefit.span-2{grid-column:span 2}.benefit-icon{width:50px;height:50px;border-radius:15px;flex-shrink:0;background:var(--grad-accent);color:#2c3b66;display:flex;align-items:center;justify-content:center}.benefit h3{font-size:16.5px;font-weight:700;margin-bottom:6px}.benefit p{font-size:13.5px;color:var(--ink-2)}.cta-panel{position:relative;overflow:hidden;border-radius:var(--radius-xl);background:var(--grad-main);color:#fff;padding:76px 40px;text-align:center;box-shadow:var(--shadow-lg)}.cta-panel:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:radial-gradient(rgba(255,255,255,.16) 1.5px,transparent 1.5px);background-size:26px 26px}.cta-panel:after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(193,195,239,.4),transparent 65%);top:-180px;left:50%;transform:translate(-50%)}.cta-panel>*{position:relative;z-index:1}.cta-panel h2{font-size:clamp(26px,3.6vw,40px);font-weight:800;margin-bottom:14px}.cta-panel p{color:#ffffffd1;font-size:16px;max-width:520px;margin:0 auto 32px}.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}.footer{background:var(--navy);color:#ffffffbf;margin-top:96px}.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px;padding:60px 0 44px}.footer .brand{color:#fff;margin-bottom:16px}.footer-brand p{font-size:14px;max-width:260px}.footer h4{color:#fff;font-size:14px;font-weight:700;margin-bottom:16px;letter-spacing:.03em}.footer-col{display:flex;flex-direction:column;gap:11px}.footer-col a{font-size:14px;transition:color .18s ease}.footer-col a:hover{color:var(--lavender)}.footer-note{display:inline-flex;align-items:flex-start;gap:9px;font-size:12.5px;line-height:1.55;color:#ffffff8c;background:#ffffff0f;border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-sm);padding:12px 14px}.footer-note .icon{color:var(--lavender);margin-top:2px}.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding:20px 0;font-size:13px;color:#ffffff80;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}.cat-banner{position:relative;margin:28px 0 0;border-radius:var(--radius-xl);overflow:hidden;background:var(--grad-main);color:#fff;box-shadow:var(--shadow-md);aspect-ratio:21/9;min-height:280px;max-height:380px;display:flex;align-items:center}.cat-banner:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:radial-gradient(rgba(255,255,255,.14) 1.5px,transparent 1.5px);background-size:26px 26px}.cat-banner:after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(193,195,239,.35),transparent 65%);top:-240px;right:-80px}.cat-banner-inner{position:relative;z-index:1;width:100%;padding:44px 52px;display:flex;flex-direction:column;gap:18px;max-width:760px}.cat-banner h1{font-size:clamp(28px,3.8vw,44px);font-weight:800;letter-spacing:-.03em}.cat-banner p{color:#ffffffd9;font-size:16px}.search-box{position:relative;max-width:520px}.search-box .icon{position:absolute;left:17px;top:50%;transform:translateY(-50%);color:var(--ink-3);width:19px;height:19px}.search-input{width:100%;padding:15px 50px 15px 46px;border-radius:var(--radius-full);border:1.5px solid transparent;background:#fff;color:var(--ink);font-size:15.5px;box-shadow:var(--shadow-md);transition:box-shadow .18s ease,border-color .18s ease}[data-theme=dark] .search-input{background:var(--surface)}.search-input::placeholder{color:var(--ink-3)}.search-input:focus{outline:none;border-color:var(--periwinkle);box-shadow:0 0 0 4px #c1c3ef73}.search-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;display:none;align-items:center;justify-content:center;color:var(--ink-2);transition:background-color .18s ease}.search-clear:hover{background:var(--surface-2)}.search-clear.show{display:inline-flex}.cat-toolbar{position:sticky;top:var(--nav-h);z-index:40;background:var(--toolbar-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);margin-top:24px;padding:14px 18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}.cat-filters{display:flex;gap:8px;flex-wrap:wrap}.cat-sort{margin-left:auto;display:flex;align-items:center;gap:9px}.cat-sort label{font-size:13px;font-weight:600;color:var(--ink-2);display:inline-flex;align-items:center;gap:6px}.select{-moz-appearance:none;appearance:none;-webkit-appearance:none;padding:9px 36px 9px 14px;border-radius:var(--radius-full);border:1.5px solid var(--border);background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2356618a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 13px center;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;min-height:40px;transition:border-color .18s ease}.select:hover,.select:focus{border-color:var(--periwinkle)}.select:focus{outline:none;box-shadow:0 0 0 4px #8e99d526}.result-count{font-size:13.5px;color:var(--ink-3);font-weight:600;width:100%}.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(262px,1fr));gap:24px;margin-top:28px}.cat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;display:flex;flex-direction:column}.cat-card:hover,.cat-card:focus-visible{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--border-strong)}.cat-card .cover{border-radius:0;aspect-ratio:21/9}.cat-card .cover .cover-initials{transition:transform .3s ease;font-size:clamp(20px,3vw,30px)}.cat-card:hover .cover .cover-initials{transform:scale(1.12)}.cat-body{padding:16px 18px 18px;display:flex;align-items:center;gap:14px}.cat-meta{flex:1;min-width:0}.cat-name{font-size:15.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cat-name mark{background:var(--mark-bg);color:var(--navy);border-radius:4px;padding:0 2px}[data-theme=dark] .cat-name mark{color:#e9ecf9}.cat-sub{font-size:12.5px;color:var(--ink-3);font-weight:600}.cat-go{width:40px;height:40px;border-radius:var(--radius-full);flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:var(--surface-2);color:var(--ink-2);border:1.5px solid var(--border);transition:all .2s ease}.cat-card:hover .cat-go{background:var(--grad-accent);color:#2c3b66;border-color:transparent;transform:rotate(-45deg)}@keyframes cardIn{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}.animate-card{animation:cardIn .45s ease both}.empty-state{text-align:center;padding:70px 24px;grid-column:1/-1;background:var(--surface);border:1.5px dashed var(--border-strong);border-radius:var(--radius-lg)}.empty-icon{width:64px;height:64px;border-radius:20px;margin:0 auto 18px;background:var(--surface-2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--ink-3)}.empty-state h3{font-size:19px;font-weight:800;margin-bottom:8px}.empty-state p{color:var(--ink-2);font-size:14.5px;margin-bottom:22px;max-width:380px;margin-inline:auto}.page-head{padding:34px 0 6px}.breadcrumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-3);font-weight:600;margin-bottom:20px;flex-wrap:wrap}.breadcrumb a{transition:color .18s ease}.breadcrumb a:hover{color:var(--periwinkle)}.breadcrumb .sep{color:var(--border-strong)}.breadcrumb .current{color:var(--ink-2)}.plan-layout{display:grid;grid-template-columns:1fr 380px;gap:28px;align-items:start;padding:24px 0 96px}.plan-main{display:flex;flex-direction:column;gap:28px;min-width:0}.game-hero{display:flex;align-items:center;gap:22px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px 24px;box-shadow:var(--shadow-sm);flex-wrap:wrap}.game-hero-cover{width:172px;flex-shrink:0}.game-hero-cover .cover{aspect-ratio:21/9;border-radius:var(--radius-sm)}.game-hero-info{flex:1;min-width:200px}.game-hero-info h1{font-size:clamp(22px,3vw,30px);font-weight:800;margin-bottom:6px}.game-hero-info .cat{font-size:13.5px;color:var(--ink-2);font-weight:600;display:inline-flex;align-items:center;gap:7px}.game-hero-info .cat .icon{color:var(--periwinkle)}.game-hero-change{align-self:center}.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:26px 28px;box-shadow:var(--shadow-sm)}.panel-head{display:flex;align-items:center;gap:11px;margin-bottom:22px}.panel-head .p-icon{width:38px;height:38px;border-radius:12px;flex-shrink:0;background:var(--grad-soft);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--navy)}[data-theme=dark] .panel-head .p-icon{color:#c6cdf5}.panel-head h2{font-size:18px;font-weight:800}.panel-head .step-tag{margin-left:auto;font-size:12px;font-weight:800;color:var(--periwinkle);letter-spacing:.1em}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.form-grid .full{grid-column:1/-1}.input-wrap{position:relative}.input-with-icon{padding-left:44px}.input-wrap .f-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--ink-3);display:inline-flex}.help-note{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:var(--ink-3);background:var(--surface-2);border:1px dashed var(--border-strong);border-radius:var(--radius-sm);padding:10px 13px;margin-top:16px}.help-note .icon{color:var(--periwinkle);margin-top:1px;width:15px;height:15px}.server-note{margin-top:10px}.plans-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px}.plan-card{position:relative;display:flex;flex-direction:column;gap:4px;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-md);padding:16px 16px 14px;cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease,background-color .18s ease;text-align:left}.plan-card:hover{border-color:var(--periwinkle);transform:translateY(-3px);box-shadow:var(--shadow-sm)}.plan-card.active{border-color:var(--periwinkle);background:var(--plan-active-bg);box-shadow:0 0 0 4px #8e99d526}.plan-card:focus-visible{outline:3px solid rgba(142,153,213,.55);outline-offset:2px}.plan-check{position:absolute;top:12px;right:12px;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--border-strong);display:flex;align-items:center;justify-content:center;color:#fff;transition:all .18s ease}.plan-card.active .plan-check{background:var(--grad-accent);border-color:transparent}.plan-check .icon{width:13px;height:13px;opacity:0;transition:opacity .15s ease}.plan-card.active .plan-check .icon{opacity:1}.plan-name{font-size:14.5px;font-weight:700;padding-right:26px}.plan-price{font-size:13px;font-weight:800;color:var(--periwinkle)}.plan-tag{align-self:flex-start;margin-top:6px}.summary-card{position:sticky;top:calc(var(--nav-h) + 20px)}.summary-list{display:flex;flex-direction:column}.summary-row{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:11px 0;font-size:14.5px;border-bottom:1px solid var(--border)}.summary-row .k{color:var(--ink-2);font-weight:500;display:flex;align-items:center;gap:8px}.summary-row .k .icon{color:var(--ink-3)}.summary-row .v{font-weight:700;text-align:right}.summary-row .v.sub{color:var(--ink-3);font-size:13px;font-weight:600}.summary-total{display:flex;justify-content:space-between;align-items:center;padding:16px 0 4px}.summary-total .k{font-size:16px;font-weight:800}.summary-total .v{font-size:22px;font-weight:800;color:var(--navy);letter-spacing:-.02em}[data-theme=dark] .summary-total .v{color:#c6cdf5}.pay-note{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-3);justify-content:center;margin-top:14px}.pay-note .icon{color:var(--periwinkle);width:15px;height:15px}.no-game{max-width:520px;margin:80px auto 120px;text-align:center;background:var(--surface);border:1.5px dashed var(--border-strong);border-radius:var(--radius-xl);padding:64px 36px}.no-game-icon{width:72px;height:72px;border-radius:22px;margin:0 auto 20px;background:var(--surface-2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--ink-3)}.no-game h1{font-size:24px;font-weight:800;margin-bottom:10px}.no-game p{color:var(--ink-2);margin-bottom:28px}.page-wrap{padding:36px 0 96px}.invoice-card{max-width:560px;margin:0 auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);overflow:hidden}.invoice-head{background:var(--grad-main);color:#fff;padding:26px 30px 24px;display:flex;align-items:center;gap:14px}.invoice-head .ih-icon{width:44px;height:44px;border-radius:13px;flex-shrink:0;background:#ffffff29;display:flex;align-items:center;justify-content:center}.invoice-head h1{font-size:20px;font-weight:800}.invoice-head p{font-size:12.5px;color:#fffc}.invoice-status{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;padding:6px 13px;border-radius:var(--radius-full);background:var(--warning-bg);color:var(--warning);white-space:nowrap}.invoice-status .dot{width:8px;height:8px;border-radius:50%;background:var(--warning);animation:pulse 1.6s infinite}.invoice-status.paid{background:var(--success-bg);color:var(--success)}.invoice-status.paid .dot{background:var(--success);animation:none}.invoice-status.expired{background:var(--error-bg);color:var(--error)}.invoice-status.expired .dot{background:var(--error);animation:none}@keyframes pulse{0%,to{opacity:1}50%{opacity:.35}}.countdown-wrap{padding:24px 30px 0;text-align:center}.countdown-label{font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);display:inline-flex;align-items:center;gap:7px;margin-bottom:10px}.countdown-label .icon{color:var(--warning)}.countdown{display:inline-flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums;font-weight:800;font-size:38px;letter-spacing:.02em;color:var(--navy);line-height:1}[data-theme=dark] .countdown{color:#c6cdf5}.countdown .cd-sep{color:var(--border-strong)}.countdown.expired{color:var(--error)}.countdown-box{min-width:64px;padding:10px 8px;border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--border)}.countdown-box small{display:block;font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--ink-3);margin-top:4px}.expired-banner{display:none;margin:20px 30px 0;align-items:center;justify-content:center;gap:9px;background:var(--error-bg);color:var(--error);border-radius:var(--radius-sm);padding:13px 16px;font-size:14px;font-weight:700}.expired-banner.show{display:flex}.expired-banner .icon{width:18px;height:18px}.qr-section{padding:24px 30px;display:flex;flex-direction:column;align-items:center;gap:12px}.qr-box{position:relative;padding:14px;border-radius:var(--radius-lg);border:1.5px solid var(--border);background:#fff;box-shadow:var(--shadow-sm)}.qr-box svg{width:190px;height:190px}.qr-demo-tag{position:absolute;bottom:-9px;left:50%;transform:translate(-50%);background:var(--navy);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.12em;padding:4px 12px;border-radius:var(--radius-full);white-space:nowrap}.qr-nominal{font-size:22px;font-weight:800;color:var(--navy);letter-spacing:-.02em}[data-theme=dark] .qr-nominal{color:#c6cdf5}.qr-hint{font-size:12.5px;color:var(--ink-3);display:inline-flex;align-items:center;gap:7px}.qr-hint .icon{color:var(--periwinkle)}.invoice-body{padding:8px 30px 26px}.detail-table{width:100%;border-collapse:collapse}.detail-table tr{border-bottom:1px solid var(--border)}.detail-table tr:last-child{border-bottom:none}.detail-table td{padding:11px 4px;font-size:14.5px;vertical-align:top}.detail-table td.k{color:var(--ink-2);font-weight:500;white-space:nowrap;width:42%}.detail-table td.v{font-weight:700;text-align:right;word-break:break-word}.detail-table td.v.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;font-weight:600}.detail-total-row td{font-size:17px;font-weight:800;color:var(--navy);padding-top:16px;border-top:1.5px solid var(--border-strong)}[data-theme=dark] .detail-total-row td{color:#c6cdf5}.detail-total-row td.v{font-size:22px;letter-spacing:-.02em}.invoice-actions{padding:0 30px 30px;display:flex;flex-direction:column;gap:12px}.invoice-actions .row{display:flex;gap:10px}.invoice-actions .row .btn{flex:1}.secure-note{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;color:var(--ink-3);padding-top:2px}.secure-note .icon{color:var(--periwinkle);width:15px;height:15px}.success-state{display:none;flex-direction:column;align-items:center;padding:44px 30px 40px;text-align:center}.success-state.show{display:flex}.success-check{width:84px;height:84px;border-radius:50%;margin-bottom:20px;background:var(--success-bg);display:flex;align-items:center;justify-content:center}.success-check svg{width:44px;height:44px}.check-circle{stroke:var(--success);stroke-width:2.2;fill:none;stroke-dasharray:166;stroke-dashoffset:166;animation:draw .7s ease forwards}.check-mark{stroke:var(--success);stroke-width:3.4;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:48;stroke-dashoffset:48;animation:draw .4s ease .6s forwards}@keyframes draw{to{stroke-dashoffset:0}}.success-state h2{font-size:22px;font-weight:800;margin-bottom:8px}.success-state p{color:var(--ink-2);font-size:14.5px;max-width:340px}.success-state .btn{margin-top:26px}.pending-state{display:none;flex-direction:column;align-items:center;padding:40px 30px;text-align:center}.pending-state.show{display:flex}.pending-state .spinner{width:46px;height:46px;border-width:4px;margin-bottom:20px}.pending-state h2{font-size:20px;font-weight:800;margin-bottom:8px}.pending-state p{color:var(--ink-2);font-size:14.5px;max-width:340px;margin-bottom:18px}.failed-state{display:none;flex-direction:column;align-items:center;padding:44px 30px 40px;text-align:center}.failed-state.show{display:flex}.failed-check{width:84px;height:84px;border-radius:50%;margin-bottom:20px;background:var(--error-bg);display:flex;align-items:center;justify-content:center;color:var(--error)}.failed-state h2{font-size:22px;font-weight:800;margin-bottom:8px}.failed-state p{color:var(--ink-2);font-size:14.5px;max-width:340px;margin-bottom:6px}.failed-state .btn{margin-top:26px}.no-invoice{max-width:520px;margin:80px auto 120px;text-align:center;background:var(--surface);border:1.5px dashed var(--border-strong);border-radius:var(--radius-xl);padding:64px 36px}.no-invoice-icon{width:72px;height:72px;border-radius:22px;margin:0 auto 20px;background:var(--surface-2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--ink-3)}.no-invoice h1{font-size:24px;font-weight:800;margin-bottom:10px}.no-invoice p{color:var(--ink-2);margin-bottom:28px}.skel-inv{max-width:560px;margin:36px auto 0;border-radius:var(--radius-xl);overflow:hidden;background:var(--surface);border:1px solid var(--border);padding-bottom:26px}.skel-inv .head{height:110px;background:linear-gradient(90deg,#d9ddf2 25%,#e7eaf8,#d9ddf2 75%);background-size:200% 100%;animation:shimmer 1.3s infinite linear}.skel-inv .skel{height:16px;margin:20px 30px 0}.skel-inv .skel.short{width:40%}.skel-inv .qr{width:190px;height:190px;margin:26px auto 0}.dash{padding:32px 0 96px;display:flex;flex-direction:column;gap:28px}.profile-card{display:flex;align-items:center;gap:24px;flex-wrap:wrap;background:var(--grad-main);color:#fff;border-radius:var(--radius-xl);padding:32px 36px;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}.profile-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:radial-gradient(rgba(255,255,255,.13) 1.5px,transparent 1.5px);background-size:24px 24px}.profile-card:after{content:"";position:absolute;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(193,195,239,.35),transparent 65%);right:-100px;top:-140px}.profile-card>*{position:relative;z-index:1}.profile-avatar{width:86px;height:86px;border-radius:26px;flex-shrink:0;background:#ffffff24;border:1.5px solid rgba(255,255,255,.28);display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:800;letter-spacing:.02em;overflow:hidden}.profile-avatar img{width:100%;height:100%;object-fit:cover}.profile-info{flex:1;min-width:220px}.profile-info h1{font-size:26px;font-weight:800;display:flex;align-items:center;gap:12px;flex-wrap:wrap}.profile-info .email{color:#fffc;font-size:13.5px;margin-top:3px}.profile-id{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#ffffffbf;background:#ffffff1a;border-radius:var(--radius-full);padding:3px 11px;margin-top:10px;font-weight:600}.profile-stats{display:flex;gap:26px;flex-wrap:wrap}.profile-stat{text-align:center}.profile-stat b{display:block;font-size:22px;font-weight:800;line-height:1.2}.profile-stat span{font-size:11.5px;color:#ffffffb8;font-weight:600;letter-spacing:.04em;text-transform:uppercase}.profile-actions{display:flex;flex-direction:column;gap:10px;align-items:stretch}.profile-actions .btn{min-width:150px}.rank-badge{width:74px;height:74px;flex-shrink:0}.rank-badge svg{width:100%;height:100%}.progress-track{height:9px;border-radius:var(--radius-full);background:#fff3;overflow:hidden}.progress-fill{height:100%;border-radius:var(--radius-full);background:var(--grad-accent);width:0;transition:width 1s ease}.progress-row{display:flex;justify-content:space-between;font-size:11.5px;color:#fffc;font-weight:600;margin-bottom:6px}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px 24px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:8px;transition:transform .22s ease,box-shadow .22s ease}.stat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}.stat-card .s-icon{width:42px;height:42px;border-radius:13px;background:var(--grad-soft);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--navy)}[data-theme=dark] .stat-card .s-icon{color:#c6cdf5}.stat-card .s-label{font-size:12.5px;font-weight:600;color:var(--ink-3);letter-spacing:.02em}.stat-card .s-value{font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1.15}.stat-card .s-sub{font-size:12px;color:var(--ink-3);font-weight:600}.dash-cols{display:grid;grid-template-columns:1.05fr .95fr;gap:20px;align-items:start}.xp-card .xp-numbers{display:flex;align-items:baseline;gap:8px;margin-bottom:14px}.xp-card .xp-now{font-size:30px;font-weight:800;letter-spacing:-.02em}.xp-card .xp-max{font-size:14px;color:var(--ink-3);font-weight:600}.xp-tiers{display:flex;justify-content:space-between;margin-top:12px;font-size:11.5px;color:var(--ink-3);font-weight:600;gap:6px;flex-wrap:wrap}.xp-tiers b{color:var(--periwinkle)}.chart{display:flex;align-items:flex-end;gap:12px;height:150px;padding-top:8px;overflow:hidden}.chart-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end}.chart-bar{width:100%;max-width:44px;border-radius:8px 8px 4px 4px;background:linear-gradient(180deg,#8e99d5,#2a3e66);opacity:.9;transition:opacity .18s ease;min-height:6px}.chart-col:hover .chart-bar{opacity:1}.chart-val{font-size:10.5px;font-weight:700;color:var(--ink-3);white-space:nowrap;transform:rotate(-38deg);transform-origin:bottom right}.chart-day{font-size:10.5px;font-weight:700;color:var(--ink-3);text-transform:uppercase}.lvl-row{display:flex;align-items:center;gap:16px}.lvl-main{flex:1}.lvl-title{font-size:20px;font-weight:800;display:flex;align-items:center;gap:10px;flex-wrap:wrap}.lvl-title .badge{vertical-align:middle}.lvl-desc{font-size:12.5px;color:var(--ink-3);margin-top:4px}.lvl-bar{margin-top:14px}.lvl-bar .progress-track{background:var(--border)}.lvl-bar .progress-fill{background:var(--grad-main)}.lvl-next{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink-3);font-weight:600;margin-bottom:5px}.rank-ladder{display:flex;flex-direction:column;gap:8px}.rank-item{display:flex;align-items:center;gap:11px;padding:9px 13px;border-radius:var(--radius-sm);font-size:13.5px;font-weight:600;color:var(--ink-2);border:1px solid transparent;transition:all .18s ease}.rank-item .r-dot{width:16px;height:16px;border-radius:5px;flex-shrink:0}.rank-item.current{background:var(--surface-2);border-color:var(--border-strong);color:var(--ink);font-weight:800}.rank-item.current:after{content:"Kamu";margin-left:auto;font-size:10.5px;font-weight:800;color:var(--periwinkle);letter-spacing:.06em;text-transform:uppercase}.rank-item .r-icon{margin-left:auto;color:var(--ink-3)}.tx-card{padding:0}.tx-card .panel-head{padding:22px 26px 0;margin-bottom:0}.tx-table-wrap{overflow-x:auto}.tx-table{width:100%;border-collapse:collapse;min-width:640px}.tx-table th{text-align:left;padding:14px 26px 10px;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}.tx-table td{padding:14px 26px;font-size:14px;border-top:1px solid var(--border);vertical-align:middle}.tx-row{cursor:pointer;transition:background-color .15s ease}.tx-row:hover{background:var(--surface-2)}.tx-game{font-weight:700}.tx-prod{display:block;font-size:12px;color:var(--ink-3);font-weight:500}.tx-invoice{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;color:var(--ink-2);font-weight:600;white-space:nowrap}.tx-amount{font-weight:800;white-space:nowrap}.tx-xp{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:var(--badge-info-color);background:var(--badge-info-bg);border-radius:var(--radius-full);padding:2px 9px}.tx-empty{text-align:center;padding:60px 20px;color:var(--ink-3)}.tx-empty .icon{width:40px;height:40px;margin:0 auto 14px;color:var(--border-strong)}.tx-empty h3{font-size:17px;font-weight:800;color:var(--ink);margin-bottom:6px}.tx-empty p{font-size:13.5px;margin-bottom:20px}.tx-cards{display:none;flex-direction:column;gap:12px;padding:16px}.tx-card-item{border:1px solid var(--border);border-radius:var(--radius-md);padding:15px 16px;cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;background:var(--surface)}.tx-card-item:hover{border-color:var(--periwinkle);box-shadow:var(--shadow-sm);transform:translateY(-2px)}.tx-ci-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}.tx-ci-game{font-weight:700;font-size:14.5px}.tx-ci-inv{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;color:var(--ink-3);margin-top:2px}.tx-ci-mid{display:flex;justify-content:space-between;align-items:center;gap:10px}.tx-ci-date{font-size:12px;color:var(--ink-3)}.tx-ci-amount{font-weight:800;font-size:15px}.gate{max-width:520px;margin:70px auto 110px;text-align:center;background:var(--surface);border:1.5px dashed var(--border-strong);border-radius:var(--radius-xl);padding:64px 36px}.gate-icon{width:72px;height:72px;border-radius:22px;margin:0 auto 20px;background:var(--surface-2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--ink-3)}.gate h1{font-size:24px;font-weight:800;margin-bottom:10px}.gate p{color:var(--ink-2);margin-bottom:28px}.detail-list{display:flex;flex-direction:column;margin-top:4px}.detail-row{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--border);font-size:14.5px}.detail-row .k{color:var(--ink-2);font-weight:500;flex-shrink:0}.detail-row .v{font-weight:700;text-align:right;word-break:break-word}.detail-row .v.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px}.theme-switcher{position:relative}.theme-switcher .icon-btn{border:1.5px solid var(--border);background:var(--surface)}.theme-switcher .icon-btn:hover{border-color:var(--periwinkle)}.theme-menu{position:absolute;right:0;top:calc(100% + 8px);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:6px;min-width:170px;z-index:70;display:flex;flex-direction:column;gap:2px;animation:cardIn .2s ease both}.theme-option{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-sm);font-size:14px;font-weight:600;color:var(--ink-2);transition:background-color .15s ease,color .15s ease;text-align:left}.theme-option:hover{background:var(--surface-2);color:var(--ink)}.theme-option.active{background:var(--link-active-bg);color:var(--link-active-color)}.theme-option .icon{width:17px;height:17px}.demo-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:var(--radius-full);font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:#ee9f2e29;border:1px solid rgba(238,159,46,.4);color:var(--warning)}.demo-banner{display:flex;align-items:center;justify-content:center;gap:9px;background:var(--warning-bg);color:var(--warning);font-size:13px;font-weight:600;padding:10px 16px;border-radius:var(--radius-sm);border:1px dashed rgba(238,159,46,.5)}.error-block{text-align:center;padding:60px 24px;grid-column:1/-1;background:var(--surface);border:1.5px dashed var(--border-strong);border-radius:var(--radius-lg)}.error-block .icon{width:46px;height:46px;margin:0 auto 16px;color:var(--error)}.error-block h3{font-size:18px;font-weight:800;margin-bottom:8px}.error-block p{color:var(--ink-2);font-size:14px;margin-bottom:20px}@media(max-width:1024px){.hero-inner{grid-template-columns:1fr;gap:60px}.hero-visual{max-width:520px;margin:0 auto;width:100%}.steps-grid{grid-template-columns:repeat(2,1fr)}.step-arrow{display:none}.benefit{grid-column:span 3}.footer-grid{grid-template-columns:1fr 1fr}.stats-grid{grid-template-columns:repeat(2,1fr)}.dash-cols,.plan-layout{grid-template-columns:1fr}.summary-card{position:static}}@media(max-width:768px){.section{padding:68px 0}.nav-links{display:none}.nav-burger{display:inline-flex}.hero{padding:60px 0 56px}.hero-cta .btn{flex:1;justify-content:center}.benefit,.benefit.span-2{grid-column:span 6}.hero-visual{height:400px}.hv-card{width:200px}.cat-banner{aspect-ratio:auto;min-height:0;padding:0}.cat-banner-inner{padding:34px 26px;gap:14px}.cat-toolbar{top:calc(var(--nav-h) - 4px);padding:12px 14px}.cat-sort{margin-left:0;width:100%}.cat-sort .select{flex:1}.cat-sort label{flex-shrink:0}.game-hero{padding:18px}.game-hero-change,.game-hero-change .btn{width:100%}.form-grid{grid-template-columns:1fr}.panel{padding:22px 20px}.profile-card{padding:26px 22px}.profile-stats{width:100%}.profile-actions{width:100%;flex-direction:row}.profile-actions .btn{flex:1;min-width:0}.tx-table-wrap{display:none}.tx-cards{display:flex}}@media(max-width:430px){.container{padding:0 16px}.hero-visual{height:340px;transform:scale(.92);transform-origin:top center;margin-top:-8px}.hv-card{width:170px}.hv-card .cover{height:66px}.hero-stats{gap:22px}.steps-grid{grid-template-columns:1fr}.cta-panel{padding:56px 22px}.footer-grid{grid-template-columns:1fr;gap:28px}.nav-actions .btn-sm{padding:9px 13px}.cat-banner-inner{padding:28px 20px}.cat-banner h1{font-size:26px}.cat-filters{gap:6px}.cat-filters .chip{padding:7px 12px;font-size:12.5px}.game-hero-cover{width:100%}.game-hero-cover .cover{aspect-ratio:21/9}.plans-grid{grid-template-columns:1fr 1fr}.plan-card{padding:14px 12px}.summary-total .v{font-size:19px}.stats-grid{grid-template-columns:1fr 1fr;gap:14px}.stat-card{padding:18px 16px}.stat-card .s-value{font-size:20px}.profile-avatar{width:68px;height:68px;font-size:26px;border-radius:20px}.profile-info h1{font-size:21px}.profile-actions{flex-direction:column}.panel{padding:20px 16px}.chart{gap:8px;height:130px}.invoice-head{padding:20px 20px 18px}.invoice-head h1{font-size:17px}.invoice-status{font-size:11px;padding:5px 10px}.countdown-wrap{padding:20px 18px 0}.countdown{font-size:30px}.countdown-box{min-width:54px}.qr-section{padding:20px 18px}.qr-box svg{width:160px;height:160px}.invoice-body{padding:6px 20px 22px}.invoice-actions{padding:0 20px 24px}.invoice-actions .row{flex-direction:column}}@media(max-width:375px){.hero-visual{height:320px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}@media print{body{background:#fff}.nav,.footer,.toast-wrap,.no-print{display:none!important}.page-wrap{padding:0}.invoice-card{box-shadow:none;border:none;max-width:100%}.invoice-actions,.secure-note{display:none!important}}