@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');

:root { --ink:#10182b; --muted:#758097; --line:#e7eaf1; --surface:#fff; --subtle:#f5f7fb; --subtler:#fafbfe; --blue:#2168ed; --blue-2:#654ef5; --blue-soft:#eaf1ff; --purple:#7658fb; --green:#16a878; --green-soft:#e3f8f0; --orange:#ef8f2f; --red:#e84e5b; --red-soft:#ffeff1; --shadow:0 18px 42px rgba(21,48,91,.10); --shadow-sm:0 5px 15px rgba(21,48,91,.08); --radius:22px; --page:1180px; }
[data-theme="dark"] { --ink:#f5f7ff; --muted:#9aa7c0; --line:#263149; --surface:#172034; --subtle:#111a2b; --subtler:#0d1524; --blue-soft:#162d59; --green-soft:#163d38; --red-soft:#472331; --shadow:0 18px 42px rgba(0,0,0,.25); --shadow-sm:0 5px 15px rgba(0,0,0,.25); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--subtler); font-family:"DM Sans",Arial,sans-serif; font-size:16px; -webkit-font-smoothing:antialiased; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.58; }
a { color:inherit; text-decoration:none; }
.hidden { display:none !important; }
.svg-icon { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle; flex:none; }
.brand { display:inline-flex; align-items:center; gap:10px; color:var(--ink); font-family:Manrope,sans-serif; font-size:21px; font-weight:800; letter-spacing:-1px; }
.brand-mark { position:relative; width:30px; height:30px; border-radius:11px; background:linear-gradient(135deg,var(--blue),var(--blue-2)); box-shadow:0 6px 18px #346dec55; overflow:hidden; }
.brand-mark:after { content:""; position:absolute; width:16px; height:16px; border:3px solid white; border-left-color:transparent; border-bottom-color:transparent; border-radius:50%; left:5px; top:5px; transform:rotate(13deg); }
.brand-mark:before { content:""; position:absolute; height:8px; width:3px; background:#fff; left:14px; top:8px; border-radius:3px; transform:rotate(39deg); z-index:1; }
.eyebrow { margin:0 0 14px; color:var(--blue); font-size:12px; letter-spacing:.18em; font-weight:700; text-transform:uppercase; }
.gradient-text { background:linear-gradient(100deg,var(--blue),var(--purple)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.btn { border:0; min-height:46px; padding:0 19px; display:inline-flex; align-items:center; justify-content:center; gap:9px; border-radius:14px; background:var(--blue); color:#fff; font-weight:700; transition:transform .2s, box-shadow .2s, background .2s; }
.btn:hover { transform:translateY(-2px); box-shadow:0 11px 20px #2366df33; }
.btn-primary { background:linear-gradient(110deg,var(--blue),#3879f0); }
.btn-dark { background:var(--ink); color:var(--surface); }
.btn-secondary { background:var(--surface); color:var(--ink); border:1px solid var(--line); }
.btn-ghost { background:transparent; color:var(--muted); border:1px solid var(--line); }
.btn-danger { background:var(--red); }
.btn-sm { min-height:36px; padding:0 13px; border-radius:11px; font-size:13px; }
.icon-button { border:1px solid var(--line); color:var(--ink); background:var(--surface); width:42px; height:42px; padding:0; display:inline-grid; place-items:center; border-radius:13px; transition:background .2s,transform .2s; }
.icon-button:hover { background:var(--blue-soft); color:var(--blue); transform:translateY(-1px); }
.surface { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); }

/* Landing */
.landing { overflow:hidden; background:var(--subtler); }
.landing-nav { position:sticky; top:0; z-index:30; height:78px; display:flex; align-items:center; justify-content:space-between; padding:0 max(28px,calc((100% - var(--page))/2)); border-bottom:1px solid transparent; background:color-mix(in srgb, var(--subtler) 86%, transparent); backdrop-filter:blur(16px); }
.landing-nav.scrolled { border-color:var(--line); }
.nav-links { display:flex; align-items:center; gap:27px; color:var(--muted); font-size:14px; font-weight:600; }
.nav-actions { display:flex; gap:10px; align-items:center; }
.mobile-menu { display:none; }
.hero { position:relative; max-width:var(--page); padding:106px 28px 65px; margin:auto; text-align:center; }
.hero:before,.hero:after { content:""; position:absolute; border-radius:50%; filter:blur(4px); pointer-events:none; }
.hero:before { background:#dce8ff; width:470px; height:470px; left:-160px; top:60px; opacity:.68; }
.hero:after { background:#ece5ff; width:410px; height:410px; right:-100px; top:0; opacity:.66; }
.hero-copy { position:relative; max-width:850px; margin:auto; z-index:1; }
.hero h1 { max-width:820px; margin:0 auto 20px; font-family:Manrope,sans-serif; font-size:clamp(42px,6vw,72px); line-height:1.06; letter-spacing:-.065em; }
.hero h1 span { white-space:nowrap; }
.hero-copy > p:not(.eyebrow) { max-width:650px; margin:0 auto; color:var(--muted); font-size:18px; line-height:1.65; }
.hero-actions { display:flex; justify-content:center; gap:12px; margin:30px 0 38px; }
.trust-line { display:flex; gap:21px; justify-content:center; color:var(--muted); font-size:13px; }
.trust-line span { display:flex; align-items:center; gap:7px; }
.trust-line .svg-icon { width:16px; color:var(--green); }
.product-window { position:relative; z-index:1; max-width:920px; margin:54px auto 0; padding:12px; border-radius:28px; background:linear-gradient(140deg,#fff,#e7eeff); box-shadow:0 30px 75px rgba(24,66,132,.18); text-align:left; }
[data-theme="dark"] .product-window { background:linear-gradient(140deg,#293958,#121c32); }
.window-chrome { height:37px; display:flex; align-items:center; gap:7px; padding:0 7px; }
.window-dot { width:9px; height:9px; border-radius:50%; background:#cad2e0; }
.window-dot:first-child { background:#fb6975; }.window-dot:nth-child(2){background:#fbc154}.window-dot:nth-child(3){background:#53c987}
.window-body { border-radius:19px; border:1px solid var(--line); background:var(--surface); overflow:hidden; }
.dashboard-preview { display:grid; grid-template-columns:190px 1fr; min-height:385px; }
.preview-side { background:var(--subtle); border-right:1px solid var(--line); padding:22px 16px; }
.preview-brand { font-size:15px; }.preview-side ul { display:grid; list-style:none; padding:25px 0 0; margin:0; gap:5px; color:var(--muted); font-size:12px; }.preview-side li { display:flex; gap:9px; align-items:center; padding:9px; border-radius:8px; }.preview-side li:first-child { background:var(--blue); color:white; }
.preview-main { padding:23px; background:linear-gradient(140deg,var(--surface),var(--subtle)); }.preview-top { display:flex; justify-content:space-between; font-size:12px; }.preview-balance { margin:25px 0; padding:22px; border:1px solid #cbdcff; border-radius:17px; background:linear-gradient(120deg,#edf4ff,#fbfbff); }.preview-balance small { color:var(--muted); }.preview-balance strong { display:block; margin-top:7px; font-size:30px; }.preview-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:15px; }.preview-card { padding:17px; border:1px solid var(--line); border-radius:13px; background:var(--surface); }.line { height:7px; margin:10px 0; border-radius:8px; background:var(--line); }.line.blue { width:78%; background:linear-gradient(90deg,var(--blue),#a6c8ff); }.line.short { width:45%; }.preview-card small { color:var(--muted); }
.stats-strip { max-width:var(--page); margin:0 auto; padding:0 28px 110px; display:grid; grid-template-columns:repeat(4,1fr); gap:13px; }.stat { padding:24px 20px; background:var(--surface); border:1px solid var(--line); border-radius:17px; text-align:center; }.stat strong { display:block; font-family:Manrope,sans-serif; font-size:28px; letter-spacing:-1.5px; }.stat span { display:block; margin-top:5px; color:var(--muted); font-size:13px; }
.section { max-width:var(--page); padding:100px 28px; margin:auto; }.section-heading { max-width:650px; margin:0 auto 42px; text-align:center; }.section-heading h2 { margin:0; font-family:Manrope,sans-serif; font-size:clamp(31px,4vw,47px); letter-spacing:-.055em; line-height:1.12; }.section-heading p:not(.eyebrow) { color:var(--muted); line-height:1.6; }
.how-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }.how-card { min-height:266px; padding:27px; border:1px solid var(--line); border-radius:24px; background:var(--surface); transition:transform .25s,box-shadow .25s; }.how-card:hover { transform:translateY(-5px); box-shadow:var(--shadow); }.step { width:38px; height:38px; display:grid; place-items:center; border-radius:13px; background:var(--blue-soft); color:var(--blue); font-weight:700; }.how-card h3 { margin:44px 0 8px; font-size:21px; }.how-card p { color:var(--muted); line-height:1.55; margin:0; }.mini-field { display:flex; align-items:center; gap:8px; height:41px; margin-top:20px; border:1px solid var(--line); padding:0 12px; border-radius:10px; color:var(--muted); font-size:12px; }.mini-field .svg-icon { color:var(--blue); width:14px; }
.benefit-grid { display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:16px; }.benefit-card { padding:29px; min-height:245px; background:var(--surface); border:1px solid var(--line); border-radius:23px; }.benefit-card:first-child { background:linear-gradient(140deg,#236cec,#6d5df2); color:#fff; border:0; }.benefit-card h3 { margin:23px 0 9px; font-family:Manrope,sans-serif; font-size:22px; }.benefit-card p { color:var(--muted); line-height:1.6; }.benefit-card:first-child p { color:#dae7ff; }.benefit-icon { display:grid; place-items:center; width:43px; height:43px; border-radius:13px; color:var(--blue); background:var(--blue-soft); }.benefit-card:first-child .benefit-icon { color:#fff; background:#ffffff24; }
.platforms { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }.platform-pill { padding:13px 18px; display:flex; gap:9px; align-items:center; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-sm); font-weight:600; }.platform-dot { width:11px; height:11px; background:var(--platform,#236cec); border-radius:4px; }
.faq-list { max-width:780px; margin:auto; display:grid; gap:11px; }.faq { overflow:hidden; border:1px solid var(--line); background:var(--surface); border-radius:17px; }.faq summary { padding:20px 22px; display:flex; align-items:center; justify-content:space-between; list-style:none; font-weight:700; cursor:pointer; }.faq summary::-webkit-details-marker { display:none; }.faq summary .svg-icon { color:var(--muted); transition:transform .2s; }.faq[open] summary .svg-icon { transform:rotate(180deg); }.faq p { margin:0; padding:0 22px 20px; color:var(--muted); line-height:1.6; }
.cta-panel { position:relative; overflow:hidden; max-width:var(--page); margin:0 auto 95px; padding:72px 28px; border-radius:30px; color:white; text-align:center; background:linear-gradient(115deg,#112251,#1d69ed 55%,#7454f6); }.cta-panel:after { content:""; position:absolute; right:-60px; bottom:-190px; width:430px; height:430px; border:60px solid #ffffff16; border-radius:50%; }.cta-panel h2 { position:relative; z-index:1; margin:0 0 12px; font-family:Manrope,sans-serif; font-size:42px; letter-spacing:-.055em; }.cta-panel p { position:relative; z-index:1; margin:0 0 26px; color:#dceaff; }
.landing-footer { border-top:1px solid var(--line); padding:58px max(28px,calc((100% - var(--page))/2)); background:var(--subtle); }.footer-grid { display:grid; grid-template-columns:1.8fr repeat(3,1fr); gap:30px; }.footer-grid p { max-width:285px; color:var(--muted); line-height:1.6; font-size:14px; }.footer-grid strong { display:block; margin:4px 0 14px; font-size:12px; letter-spacing:.12em; color:var(--muted); text-transform:uppercase; }.footer-grid a { display:block; margin:10px 0; color:var(--muted); font-size:14px; }.copyright { max-width:var(--page); padding-top:35px; margin-top:38px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; }

/* App shell */
.app-shell { min-height:100vh; background:var(--subtler); }.app-sidebar { position:fixed; z-index:20; top:0; bottom:0; left:0; width:250px; padding:25px 15px; display:flex; flex-direction:column; background:var(--surface); border-right:1px solid var(--line); }.side-nav { display:grid; gap:3px; margin-top:39px; }.side-nav a { min-height:45px; padding:0 13px; display:flex; align-items:center; gap:12px; color:var(--muted); border-radius:12px; font-size:14px; font-weight:600; }.side-nav a:hover { background:var(--subtle); color:var(--ink); }.side-nav a.active { color:#fff; background:linear-gradient(100deg,var(--blue),#3878ed); box-shadow:0 8px 17px #2467df31; }.side-nav .svg-icon { width:18px; }.side-section { margin:25px 13px 7px; color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }.side-bottom { margin-top:auto; }.mini-user { padding:12px; display:flex; align-items:center; gap:10px; border-radius:15px; background:var(--subtle); }.avatar { flex:none; width:34px; height:34px; display:grid; place-items:center; border-radius:12px; background:linear-gradient(135deg,#172549,#416fd9); color:white; font-size:12px; font-weight:700; }.mini-user strong,.mini-user small { display:block; max-width:132px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.mini-user strong { font-size:12px; }.mini-user small { margin-top:2px; color:var(--muted); font-size:11px; }.app-main { margin-left:250px; min-height:100vh; }.app-header { position:sticky; z-index:10; top:0; height:74px; padding:0 34px; display:flex; align-items:center; justify-content:space-between; gap:17px; background:color-mix(in srgb,var(--subtler) 88%,transparent); border-bottom:1px solid var(--line); backdrop-filter:blur(16px); }.header-title { display:flex; align-items:center; gap:12px; }.header-title h1 { margin:0; font-family:Manrope,sans-serif; font-size:20px; letter-spacing:-.6px; }.header-tools { display:flex; align-items:center; gap:10px; }.balance-pill { padding:6px 7px 6px 12px; display:flex; align-items:center; gap:8px; border-radius:12px; color:var(--blue); background:var(--blue-soft); font-weight:700; font-size:13px; }.balance-plus { width:27px; height:27px; border:0; display:grid; place-items:center; border-radius:9px; color:#fff; background:var(--blue); }.currency { position:relative; }.currency > button { border:0; color:var(--ink); background:transparent; display:flex; align-items:center; gap:4px; font-weight:700; }.currency-menu { display:none; position:absolute; top:35px; right:0; min-width:170px; padding:6px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); border-radius:14px; }.currency.open .currency-menu { display:block; }.currency-menu button { width:100%; display:block; padding:9px; border:0; text-align:left; background:transparent; color:var(--muted); border-radius:9px; font-size:13px; }.currency-menu button:hover { background:var(--subtle); color:var(--blue); }.notice-dot { position:relative; }.notice-dot:after { content:""; position:absolute; top:6px; right:7px; width:6px; height:6px; border:2px solid var(--subtler); border-radius:50%; background:var(--red); }.profile-toggle { display:flex; align-items:center; gap:8px; border:0; background:transparent; color:var(--ink); }.profile-toggle .avatar { width:35px; height:35px; }.profile-menu { display:none; position:absolute; right:31px; top:63px; z-index:12; min-width:215px; padding:8px; border:1px solid var(--line); border-radius:16px; background:var(--surface); box-shadow:var(--shadow); }.profile-menu.open { display:block; }.profile-menu button,.profile-menu a { width:100%; padding:11px; display:flex; align-items:center; gap:8px; border:0; color:var(--muted); background:transparent; text-align:left; border-radius:10px; }.profile-menu button:hover,.profile-menu a:hover { color:var(--ink); background:var(--subtle); }.profile-menu .sign-out { color:var(--red); border-top:1px solid var(--line); margin-top:4px; }.content { max-width:1390px; margin:auto; padding:35px; }.page-title { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:24px; }.page-title h2 { margin:0; font-family:Manrope,sans-serif; font-size:30px; letter-spacing:-1.4px; }.page-title p { margin:6px 0 0; color:var(--muted); }.welcome { display:flex; align-items:center; gap:14px; margin-bottom:25px; }.welcome-icon { display:grid; place-items:center; width:44px; height:44px; color:var(--blue); background:var(--blue-soft); border:1px solid #c8d9ff; border-radius:15px; }.welcome h2 { margin:0; font-family:Manrope,sans-serif; letter-spacing:-.8px; font-size:25px; }.dashboard-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:20px; }.dashboard-grid > * { min-width:0; }.balance-card { position:relative; overflow:hidden; padding:30px; min-height:245px; background:linear-gradient(125deg,#e6f0ff,#fff 62%,#eeecff); border:1px solid #c9dafa; border-radius:var(--radius); }.balance-card:after { content:""; position:absolute; width:240px; height:240px; right:-70px; top:-105px; border-radius:50%; background:#fff7; }.balance-card > * { position:relative; z-index:1; }.balance-label { display:flex; align-items:center; gap:10px; color:var(--muted); font-weight:700; font-size:12px; letter-spacing:.12em; text-transform:uppercase; }.balance-amount { margin:17px 0 25px; font-family:Manrope,sans-serif; font-size:48px; line-height:1; letter-spacing:-3px; }.balance-summary { display:flex; max-width:410px; border:1px solid #d6def0; border-radius:15px; overflow:hidden; background:#ffffffa8; }.balance-summary div { flex:1; padding:14px; text-align:center; }.balance-summary div+div { border-left:1px solid #d6def0; }.balance-summary span { display:block; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.07em; }.balance-summary strong { display:block; margin-top:5px; font-size:17px; }.balance-summary div:first-child strong { color:var(--green); }.quick-actions { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }.quick-card { min-height:114px; padding:18px; display:block; border:1px solid var(--line); border-radius:18px; background:var(--surface); transition:transform .2s, box-shadow .2s; }.quick-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-sm); }.quick-card .svg-icon { padding:9px; width:39px; height:39px; color:var(--blue); border-radius:12px; background:var(--blue-soft); }.quick-card strong { display:block; margin-top:13px; font-size:14px; }.quick-card span { color:var(--muted); font-size:12px; }.wide-card { grid-column:1 / -1; }.wide-card .svg-icon { color:var(--purple); background:#efebff; }.section-card { margin-top:20px; padding:25px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }.section-card h3 { margin:0; font-family:Manrope,sans-serif; font-size:18px; letter-spacing:-.5px; }.section-card > p { color:var(--muted); }.activity { display:grid; gap:3px; margin-top:17px; }.activity-row { padding:12px 0; display:grid; align-items:center; grid-template-columns:34px 1fr auto; gap:11px; border-bottom:1px solid var(--line); }.activity-row:last-child { border:0; }.activity-icon { display:grid; width:31px; height:31px; place-items:center; border-radius:10px; background:var(--blue-soft); color:var(--blue); }.activity-row strong { display:block; font-size:13px; }.activity-row small { color:var(--muted); font-size:11px; }.activity-row b { font-size:13px; }.status { display:inline-flex; align-items:center; gap:6px; padding:5px 8px; border-radius:50px; background:var(--blue-soft); color:var(--blue); font-size:11px; font-weight:700; }.status:before { content:""; width:5px; height:5px; border-radius:50%; background:currentColor; }.status.success { color:var(--green); background:var(--green-soft); }.status.pending { color:var(--orange); background:#fff3e4; }.status.error { color:var(--red); background:var(--red-soft); }

/* Forms, tables and customer modules */
.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:15px; }.form-group { min-width:0; }.form-group.full { grid-column:1/-1; }.form-group label { display:block; margin:0 0 8px; font-size:13px; font-weight:700; }.form-control { width:100%; min-height:46px; padding:0 13px; border:1px solid var(--line); outline:0; border-radius:12px; color:var(--ink); background:var(--subtler); transition:border .2s, box-shadow .2s; }.form-control:focus { border-color:#78a6ff; box-shadow:0 0 0 3px #2c70eb16; }.form-control::placeholder { color:#aab3c2; }.textarea { min-height:100px; padding-top:12px; resize:vertical; }.input-with-icon { position:relative; }.input-with-icon .svg-icon { position:absolute; left:13px; top:14px; color:var(--muted); }.input-with-icon .form-control { padding-left:42px; }.field-note { display:block; margin-top:7px; color:var(--muted); font-size:11px; }.filters { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }.search { min-width:240px; flex:1; }.select { max-width:190px; appearance:auto; }.tabs { display:flex; gap:5px; padding:4px; overflow:auto; border-radius:14px; background:var(--subtle); }.tabs button { white-space:nowrap; min-height:34px; padding:0 14px; border:0; border-radius:10px; color:var(--muted); background:transparent; font-size:13px; font-weight:700; }.tabs button.active { color:var(--blue); background:var(--surface); box-shadow:var(--shadow-sm); }.service-layout { display:grid; grid-template-columns:1fr 360px; gap:20px; }.service-list { overflow:hidden; }.service-row { padding:18px 22px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:15px; border-bottom:1px solid var(--line); transition:background .2s; }.service-row:hover { background:var(--subtle); }.service-row:last-child { border-bottom:0; }.service-id { color:var(--muted); font-size:11px; font-weight:700; }.service-row h4 { max-width:600px; margin:6px 0; font-size:15px; line-height:1.35; }.service-meta { display:flex; gap:8px; color:var(--muted); font-size:12px; }.service-meta span+span:before { content:"·"; margin-right:8px; }.service-rate { text-align:right; }.service-rate strong { color:var(--blue); font-family:Manrope,sans-serif; font-size:17px; }.service-rate span { display:block; color:var(--muted); font-size:10px; }.service-detail { position:sticky; top:94px; height:fit-content; padding:24px; }.service-detail .detail-icon { display:grid; place-items:center; width:45px; height:45px; color:var(--blue); border-radius:14px; background:var(--blue-soft); }.service-detail h3 { margin:16px 0 6px; }.service-detail p { color:var(--muted); font-size:13px; line-height:1.55; }.detail-specs { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:20px 0; }.detail-specs div { padding:11px; background:var(--subtle); border-radius:11px; }.detail-specs span { display:block; color:var(--muted); font-size:10px; text-transform:uppercase; }.detail-specs strong { display:block; margin-top:4px; font-size:12px; }.new-order { display:grid; grid-template-columns:1fr 350px; gap:20px; }.order-summary { position:sticky; top:94px; height:fit-content; padding:24px; }.summary-placeholder { display:grid; min-height:255px; place-items:center; color:var(--muted); text-align:center; }.summary-placeholder .svg-icon { width:44px; height:44px; margin-bottom:12px; color:#b3bfd4; }.price-display { margin:16px 0; padding:16px; display:flex; justify-content:space-between; align-items:center; border-radius:13px; background:var(--blue-soft); }.price-display span { color:var(--muted); font-size:12px; }.price-display strong { color:var(--blue); font-size:22px; }.info-callout { padding:13px; display:flex; align-items:flex-start; gap:9px; color:var(--muted); border-radius:12px; background:var(--subtle); font-size:12px; line-height:1.45; }.info-callout .svg-icon { flex:none; margin-top:1px; color:var(--blue); width:16px; }.data-table { width:100%; border-collapse:collapse; }.data-table th { padding:0 12px 13px; color:var(--muted); border-bottom:1px solid var(--line); text-align:left; font-size:10px; letter-spacing:.08em; text-transform:uppercase; }.data-table td { padding:15px 12px; border-bottom:1px solid var(--line); font-size:13px; }.data-table tr:last-child td { border-bottom:0; }.data-table strong { display:block; font-size:13px; }.data-table small { color:var(--muted); }.progress { width:95px; height:6px; margin-top:5px; overflow:hidden; border-radius:10px; background:var(--line); }.progress span { display:block; height:100%; border-radius:inherit; background:var(--blue); }.mobile-data { display:none; }.wallet-layout { display:grid; grid-template-columns:1fr 1fr; gap:20px; }.payment-methods { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:20px; }.payment-method { min-height:135px; padding:16px; border:1px solid var(--line); border-radius:17px; color:var(--ink); background:var(--surface); text-align:left; transition:border .2s,transform .2s; }.payment-method:hover { transform:translateY(-2px); }.payment-method.selected { border-color:var(--blue); box-shadow:0 0 0 2px #226aed17; background:var(--blue-soft); }.pay-icon { display:grid; place-items:center; width:38px; height:38px; margin-bottom:18px; color:var(--blue); background:var(--blue-soft); border-radius:12px; }.payment-method:nth-child(2) .pay-icon { color:#7e55ee; background:#f0eaff; }.payment-method:nth-child(3) .pay-icon { color:var(--green); background:var(--green-soft); }.payment-method strong { display:block; font-size:12px; }.payment-method small { display:block; margin-top:4px; color:var(--muted); font-size:10px; line-height:1.3; }.quick-amounts { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }.quick-amounts button { padding:8px 12px; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:var(--surface); font-weight:700; }.transactions { margin-top:20px; }.transactions .data-table { margin-top:16px; }.manual-payment { padding:17px; border:1px solid #b9cfef; border-radius:15px; background:linear-gradient(135deg,#eff6ff,#fff); }.manual-payment h4 { margin:0 0 8px; }.payment-details { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:13px 0; }.payment-details div { padding:9px; border-radius:9px; background:#fff; }.payment-details span { display:block; color:var(--muted); font-size:10px; }.payment-details strong { display:block; margin-top:3px; font-size:12px; }.receipt { padding:13px; border:1px dashed #9db9e9; border-radius:12px; color:var(--muted); background:#fff8; font-size:12px; }.receipt input { width:100%; margin-top:5px; }.ticket-layout { display:grid; grid-template-columns:1fr 380px; gap:20px; }.ticket-list { overflow:hidden; }.ticket-row { padding:17px 20px; display:grid; grid-template-columns:36px 1fr auto; gap:12px; align-items:center; border-bottom:1px solid var(--line); }.ticket-row .ticket-symbol { width:34px; height:34px; display:grid; place-items:center; color:var(--purple); border-radius:11px; background:#f0edff; }.ticket-row strong { display:block; font-size:13px; }.ticket-row small { color:var(--muted); font-size:11px; }.ticket-form { padding:23px; height:fit-content; }.affiliate-hero { padding:29px; position:relative; overflow:hidden; background:linear-gradient(130deg,#e9f2ff,#f7f4ff); border:1px solid #c7dafa; }.affiliate-hero:after { content:""; position:absolute; width:180px; height:180px; right:-45px; top:-70px; border:25px solid #526ef320; border-radius:50%; }.affiliate-hero > * { position:relative; z-index:1; }.affiliate-hero h3 { margin:0 0 6px; font-size:25px; }.affiliate-hero p { max-width:600px; margin:0 0 19px; color:var(--muted); line-height:1.55; }.referral-box { max-width:550px; padding:9px; display:flex; gap:10px; border:1px solid #bdcff3; border-radius:14px; background:#ffffffb8; }.referral-box code { flex:1; padding:6px 8px; overflow:hidden; color:var(--ink); white-space:nowrap; text-overflow:ellipsis; font-size:12px; }.metric-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:20px 0; }.metric-card { padding:18px; border:1px solid var(--line); border-radius:16px; background:var(--surface); }.metric-card .svg-icon { width:31px; height:31px; padding:8px; color:var(--blue); border-radius:10px; background:var(--blue-soft); }.metric-card strong { display:block; margin-top:12px; font-family:Manrope,sans-serif; font-size:23px; }.metric-card span { color:var(--muted); font-size:12px; }.leaderboard { padding:20px; }.leader-row { display:grid; grid-template-columns:30px 1fr auto; align-items:center; gap:10px; padding:13px 0; border-bottom:1px solid var(--line); }.leader-row:last-child { border-bottom:0; }.rank { width:25px; height:25px; display:grid; place-items:center; border-radius:8px; color:var(--blue); background:var(--blue-soft); font-size:11px; font-weight:700; }.leader-row strong { font-size:13px; }.leader-row span { color:var(--muted); font-size:11px; }.api-layout { display:grid; grid-template-columns:.85fr 1.15fr; gap:20px; }.api-key { margin:18px 0; padding:14px; display:flex; gap:10px; align-items:center; border:1px solid var(--line); border-radius:12px; background:var(--subtle); }.api-key code { flex:1; overflow:hidden; color:var(--muted); white-space:nowrap; text-overflow:ellipsis; font-size:12px; }.codeblock { margin:0; padding:19px; overflow:auto; border-radius:15px; color:#dbe5ff; background:#101b32; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; line-height:1.65; }.codeblock .key { color:#86c3ff; }.codeblock .string { color:#a8e7b7; }.news-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }.news-card { overflow:hidden; border:1px solid var(--line); border-radius:18px; background:var(--surface); transition:transform .2s,box-shadow .2s; }.news-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); }.news-visual { height:135px; display:flex; align-items:flex-end; padding:16px; color:#fff; background:linear-gradient(140deg,#165ce3,#7d5ef3); }.news-card:nth-child(2) .news-visual { background:linear-gradient(140deg,#19a881,#42bdd4); }.news-card:nth-child(3) .news-visual { background:linear-gradient(140deg,#e88333,#e04e74); }.news-visual .svg-icon { width:34px; height:34px; }.news-card > div:last-child { padding:17px; }.news-card small { color:var(--muted); font-size:11px; }.news-card h3 { margin:8px 0 8px; font-size:16px; line-height:1.35; }.news-card p { margin:0; color:var(--muted); font-size:13px; line-height:1.5; }.profile-layout { display:grid; grid-template-columns:.75fr 1.25fr; gap:20px; }.profile-card { text-align:center; padding:29px; }.profile-card .avatar { width:67px; height:67px; margin:auto; border-radius:23px; font-size:21px; }.profile-card h3 { margin:13px 0 4px; }.profile-card p { margin:0; color:var(--muted); font-size:13px; }.profile-mini { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:25px; }.profile-mini div { padding:12px; border-radius:12px; background:var(--subtle); }.profile-mini strong { display:block; font-size:15px; }.profile-mini span { color:var(--muted); font-size:10px; }.settings-tabs { margin-bottom:20px; }

/* Admin */
.admin-banner { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:24px; padding:13px 17px; color:#5e40d8; background:#f1eeff; border:1px solid #dcd4ff; border-radius:14px; font-size:13px; }.admin-banner strong { color:#4c2dc3; }.admin-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }.admin-metric { padding:18px; border:1px solid var(--line); border-radius:17px; background:var(--surface); }.admin-metric .metric-top { display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-size:12px; }.admin-metric .svg-icon { padding:8px; width:34px; height:34px; color:var(--blue); background:var(--blue-soft); border-radius:10px; }.admin-metric strong { display:block; margin-top:15px; font-family:Manrope,sans-serif; font-size:24px; letter-spacing:-1px; }.admin-metric small { display:block; margin-top:3px; color:var(--green); font-size:11px; }.admin-dash-grid { display:grid; grid-template-columns:1.35fr .65fr; gap:20px; margin-top:20px; }.chart-card { padding:23px; }.chart-card header { display:flex; justify-content:space-between; align-items:center; }.chart-card h3 { margin:0; }.chart-card select { padding:6px 9px; border:1px solid var(--line); border-radius:8px; color:var(--muted); background:var(--subtle); font-size:11px; }.chart { position:relative; height:215px; margin-top:19px; border-bottom:1px solid var(--line); background:repeating-linear-gradient(to bottom,transparent 0,transparent 52px,var(--line) 53px); }.chart svg { width:100%; height:100%; overflow:visible; }.chart-labels { display:flex; justify-content:space-between; padding-top:8px; color:var(--muted); font-size:10px; }.admin-panel { padding:22px; }.admin-panel h3 { margin:0 0 4px; }.admin-panel > p { margin:0 0 18px; color:var(--muted); font-size:12px; }.notification-list { display:grid; gap:2px; }.notification-row { display:grid; grid-template-columns:31px 1fr auto; gap:10px; align-items:center; padding:11px 0; border-bottom:1px solid var(--line); }.notification-row:last-child { border:0; }.notification-row .svg-icon { width:30px; height:30px; padding:8px; color:var(--orange); background:#fff1de; border-radius:9px; }.notification-row strong { display:block; font-size:12px; }.notification-row small { color:var(--muted); font-size:10px; }.admin-tabs { margin-bottom:20px; }.admin-workspace { padding:23px; }.admin-workspace header { display:flex; align-items:center; justify-content:space-between; gap:13px; margin-bottom:19px; }.admin-workspace h3 { margin:0; }.admin-table-actions { display:flex; gap:5px; }.service-admin-row .toggle { position:relative; display:block; width:38px; height:21px; padding:0; border:0; border-radius:50px; background:#d9deea; }.service-admin-row .toggle:before { content:""; position:absolute; top:3px; left:3px; width:15px; height:15px; border-radius:50%; background:#fff; transition:transform .2s; }.service-admin-row .toggle.active { background:var(--green); }.service-admin-row .toggle.active:before { transform:translateX(17px); }.settings-section { padding:20px 0; border-bottom:1px solid var(--line); }.settings-section:first-child { padding-top:0; }.settings-section:last-child { border:0; padding-bottom:0; }.settings-section h4 { margin:0 0 5px; }.settings-section > p { margin:0 0 14px; color:var(--muted); font-size:12px; }.settings-section .form-grid { max-width:770px; }.user-result { padding:16px; display:flex; justify-content:space-between; align-items:center; border:1px solid var(--line); border-radius:13px; background:var(--subtle); }.user-result .user-data { display:flex; align-items:center; gap:9px; }.user-result .avatar { width:35px; height:35px; }.user-result strong,.user-result small { display:block; }.user-result small { color:var(--muted); font-size:11px; }.broadcast-preview { margin-top:13px; padding:15px; border-left:3px solid var(--purple); border-radius:10px; background:#f5f2ff; }.broadcast-preview strong { display:block; color:#4d3db3; }.broadcast-preview p { margin:5px 0 0; color:#6f67a0; font-size:12px; }

/* Modal / toast / mobile nav */
.modal-layer { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:20px; background:#10192c88; backdrop-filter:blur(5px); animation:fade .2s ease-out; }.modal { width:min(100%,510px); max-height:calc(100vh - 40px); overflow:auto; position:relative; padding:30px; border-radius:25px; color:var(--ink); background:var(--surface); box-shadow:0 24px 60px #0a132b66; animation:rise .25s ease-out; }.modal-close { position:absolute; top:17px; right:17px; }.modal .brand { justify-content:center; width:100%; margin-bottom:18px; }.modal-heading { margin:0; text-align:center; font-family:Manrope,sans-serif; font-size:28px; letter-spacing:-1.2px; }.modal-sub { margin:6px 0 22px; color:var(--muted); text-align:center; line-height:1.5; }.auth-switch { display:flex; padding:4px; margin-bottom:20px; border-radius:12px; background:var(--subtle); }.auth-switch button { flex:1; padding:9px; border:0; border-radius:9px; color:var(--muted); background:transparent; font-size:13px; font-weight:700; }.auth-switch button.active { color:var(--blue); background:var(--surface); box-shadow:var(--shadow-sm); }.or-divider { display:flex; align-items:center; gap:10px; margin:19px 0; color:var(--muted); font-size:10px; letter-spacing:.13em; }.or-divider:before,.or-divider:after { content:""; height:1px; flex:1; background:var(--line); }.modal .form-grid { margin-top:16px; }.modal .btn.full { width:100%; margin-top:17px; }.modal-footer { margin:20px 0 0; color:var(--muted); text-align:center; font-size:13px; }.text-link { border:0; padding:0; color:var(--blue); background:transparent; font-weight:700; }.broadcast-modal { max-width:560px; padding:0; overflow:hidden; }.broadcast-top { height:140px; position:relative; background:linear-gradient(130deg,#2169ed,#7956f5); }.broadcast-art { position:absolute; right:35px; bottom:-27px; width:108px; height:108px; display:grid; place-items:center; border:14px solid #ffffff22; border-radius:50%; color:#fff; }.broadcast-art .svg-icon { width:45px; height:45px; }.broadcast-content { padding:29px; }.broadcast-content .eyebrow { margin-bottom:7px; }.broadcast-content h2 { margin:0 0 9px; font-family:Manrope,sans-serif; font-size:26px; }.broadcast-content p:not(.eyebrow) { margin:0; color:var(--muted); line-height:1.6; }.broadcast-content .btn { margin-top:22px; }.modal-success { padding:15px; display:flex; gap:9px; color:#157553; border:1px solid #c6ebdc; border-radius:12px; background:var(--green-soft); font-size:13px; }.modal-success .svg-icon { flex:none; }.app-mobile-nav { display:none; } #toast-region { position:fixed; right:22px; bottom:22px; z-index:200; display:grid; gap:9px; max-width:340px; }.toast { display:flex; align-items:flex-start; gap:10px; padding:14px; color:var(--ink); border:1px solid var(--line); border-radius:14px; background:var(--surface); box-shadow:var(--shadow); animation:slidein .3s ease-out; }.toast.success .svg-icon { color:var(--green); }.toast.error .svg-icon { color:var(--red); }.toast strong { display:block; font-size:13px; }.toast span { display:block; margin-top:2px; color:var(--muted); font-size:12px; }.empty { padding:48px 20px; color:var(--muted); text-align:center; }.empty .svg-icon { width:40px; height:40px; margin-bottom:8px; color:#b9c2d4; }

@keyframes fade { from { opacity:0; } to { opacity:1; } } @keyframes rise { from { opacity:0; transform:translateY(13px) scale(.98); } to { opacity:1; transform:none; } } @keyframes slidein { from { opacity:0; transform:translateX(18px); } to { opacity:1; transform:none; } } @keyframes float { 50% { transform:translateY(-7px); } }
.reveal { animation:rise .45s ease both; }.product-window { animation:float 5s ease-in-out infinite; }

@media (max-width:1050px) { .nav-links { display:none; }.dashboard-grid,.new-order,.service-layout,.ticket-layout,.api-layout,.profile-layout { grid-template-columns:1fr; }.service-detail,.order-summary { position:static; }.wallet-layout { grid-template-columns:1fr; }.admin-grid { grid-template-columns:repeat(2,1fr); }.admin-dash-grid { grid-template-columns:1fr; }.metric-grid { grid-template-columns:repeat(2,1fr); }.footer-grid { grid-template-columns:1.4fr repeat(2,1fr); }.footer-grid > :last-child { grid-column:2; }.dashboard-preview { grid-template-columns:145px 1fr; } }
@media (max-width:760px) { body { font-size:15px; }.landing-nav { height:68px; padding:0 18px; }.landing-nav .brand { font-size:18px; }.landing-nav .brand-mark { width:27px; height:27px; }.landing-nav .btn { min-height:39px; padding:0 12px; font-size:12px; }.landing-nav .nav-actions .icon-button { display:none; }.mobile-menu { display:grid; }.hero { padding:73px 20px 38px; }.hero h1 { font-size:42px; }.hero h1 span { white-space:normal; }.hero-copy > p:not(.eyebrow) { font-size:16px; }.hero-actions { flex-direction:column; margin:23px auto 27px; max-width:270px; }.hero-actions .btn { width:100%; }.trust-line { gap:10px; flex-wrap:wrap; font-size:11px; }.product-window { margin-top:35px; }.dashboard-preview { min-height:300px; grid-template-columns:1fr; }.preview-side { display:none; }.preview-main { padding:17px; }.preview-balance { margin:16px 0; }.stats-strip { padding:0 20px 68px; grid-template-columns:repeat(2,1fr); }.stat { padding:17px 8px; }.stat strong { font-size:22px; }.section { padding:65px 20px; }.section-heading { margin-bottom:28px; }.section-heading h2 { font-size:31px; }.how-grid,.benefit-grid,.news-grid { grid-template-columns:1fr; }.how-card { min-height:0; }.how-card h3 { margin-top:26px; }.benefit-card { min-height:0; }.platforms { justify-content:flex-start; }.platform-pill { padding:10px 12px; font-size:13px; }.cta-panel { margin:0 20px 65px; padding:51px 20px; }.cta-panel h2 { font-size:32px; }.landing-footer { padding:45px 20px; }.footer-grid { grid-template-columns:1fr 1fr; }.footer-grid > :first-child { grid-column:1/-1; }.footer-grid > :last-child { grid-column:auto; }
  .app-sidebar { display:none; }.app-main { margin-left:0; padding-bottom:81px; }.app-header { height:63px; padding:0 15px; }.app-header .header-title h1 { font-size:18px; }.app-header .header-title .icon-button { width:36px; height:36px; }.header-tools { gap:5px; }.header-tools > .currency { display:none; }.balance-pill { padding:5px 5px 5px 9px; font-size:12px; }.balance-plus { width:24px; height:24px; }.header-tools > .icon-button { display:none; }.profile-toggle { padding:0; }.profile-toggle .avatar { width:33px; height:33px; }.profile-menu { right:13px; top:54px; }.content { padding:23px 15px; }.page-title { margin-bottom:18px; }.page-title h2 { font-size:26px; }.page-title p { font-size:13px; }.page-title .btn { min-height:38px; padding:0 11px; font-size:12px; }.welcome { gap:10px; margin-bottom:18px; }.welcome h2 { font-size:20px; }.welcome-icon { width:39px; height:39px; }.dashboard-grid { gap:14px; }.balance-card { min-height:215px; padding:23px; }.balance-amount { margin:13px 0 20px; font-size:39px; }.balance-summary div { padding:11px 6px; }.quick-actions { gap:9px; }.quick-card { min-height:105px; padding:14px; }.section-card { margin-top:14px; padding:18px; }.activity-row { grid-template-columns:30px 1fr auto; }.filters { gap:8px; }.search { flex-basis:100%; min-width:100%; }.select { flex:1; max-width:calc(50% - 4px); }.tabs { width:100%; }.service-row { padding:16px; grid-template-columns:1fr; gap:8px; }.service-rate { display:flex; align-items:baseline; gap:7px; text-align:left; }.service-rate span { display:inline; }.service-meta { flex-wrap:wrap; }.service-detail,.order-summary { padding:19px; }.form-grid { grid-template-columns:1fr; }.form-group.full { grid-column:auto; }.data-table { display:none; }.mobile-data { display:grid; gap:0; }.order-mobile-row { padding:14px 0; border-bottom:1px solid var(--line); }.order-mobile-row:last-child { border:0; }.order-mobile-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }.order-mobile-row strong { display:block; font-size:13px; }.order-mobile-row small { color:var(--muted); font-size:11px; }.order-mobile-meta { display:flex; justify-content:space-between; align-items:center; margin-top:8px; }.progress { width:70px; }.payment-methods { grid-template-columns:1fr; }.payment-method { min-height:86px; display:grid; grid-template-columns:42px 1fr; column-gap:11px; align-items:center; }.payment-method .pay-icon { margin:0; grid-row:1/3; }.payment-method strong,.payment-method small { margin:0; }.manual-payment { padding:13px; }.payment-details { grid-template-columns:1fr; }.ticket-row { padding:14px; grid-template-columns:32px 1fr; }.ticket-row .status { grid-column:2; width:max-content; }.ticket-form { padding:18px; }.affiliate-hero { padding:22px; }.affiliate-hero h3 { font-size:21px; }.referral-box { display:grid; }.referral-box .btn { width:100%; }.metric-grid { grid-template-columns:repeat(2,1fr); gap:9px; }.metric-card { padding:14px; }.metric-card strong { margin-top:9px; font-size:19px; }.leaderboard { padding:18px; }.profile-card { padding:23px; }.settings-tabs { overflow:auto; }.admin-banner { align-items:flex-start; flex-direction:column; }.admin-grid { grid-template-columns:repeat(2,1fr); gap:9px; }.admin-metric { padding:14px; }.admin-metric strong { margin-top:11px; font-size:19px; }.admin-metric .svg-icon { width:30px; height:30px; }.chart-card,.admin-panel,.admin-workspace { padding:18px; }.admin-workspace header { align-items:flex-start; flex-direction:column; }.admin-table-actions { width:100%; }.admin-table-actions .btn { flex:1; }.user-result { gap:12px; align-items:flex-start; flex-direction:column; }.app-mobile-nav { position:fixed; z-index:30; left:12px; right:12px; bottom:12px; height:61px; padding:0 8px; display:flex; justify-content:space-around; align-items:center; border:1px solid #5190f8; border-radius:19px; color:#fff; background:linear-gradient(120deg,#1262e9,#377df1); box-shadow:0 13px 31px #0c51bd55; }.app-mobile-nav a { position:relative; min-width:54px; display:grid; justify-items:center; gap:3px; color:#d7e7ff; font-size:10px; font-weight:700; }.app-mobile-nav a.active { color:#fff; }.app-mobile-nav .svg-icon { width:19px; }.app-mobile-nav a.order-fab { transform:translateY(-19px); }.app-mobile-nav a.order-fab .nav-fab { width:52px; height:52px; display:grid; place-items:center; margin-bottom:-4px; border:4px solid var(--subtler); border-radius:50%; color:#fff; background:var(--blue); box-shadow:0 5px 11px #144fba77; }.app-mobile-nav a.order-fab .svg-icon { width:25px; height:25px; }.modal { padding:25px 20px; border-radius:21px; }.modal-heading { font-size:24px; }.broadcast-modal { padding:0; }.broadcast-content { padding:24px 20px; }.broadcast-top { height:112px; }.broadcast-art { right:22px; width:85px; height:85px; bottom:-22px; }.broadcast-art .svg-icon { width:34px; }.modal-layer { padding:12px; } #toast-region { left:12px; right:12px; bottom:87px; max-width:none; }.toast { padding:12px; } }