@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Manrope:wght@500;600;700;800&display=swap');
:root{
 color-scheme:light;
 --blue:#245BFF;--blue-dark:#1239D9;--blue-deep:#0A267E;--blue-soft:#EAF0FF;
 --ink:#14213D;--muted:#71809A;--line:#E7ECF5;--green:#159A68;
 --shadow:0 12px 30px rgba(29,67,146,.10);
}
*{box-sizing:border-box}
html{min-height:100%;background:#EEF3FC}
body{margin:0;min-height:100vh;font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--ink);background:linear-gradient(180deg,#EAF1FF 0,#F5F7FC 240px,#F4F6FB 100%);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}
.app-frame{width:min(100%,540px);min-height:100vh;margin:0 auto;position:relative;padding-bottom:calc(91px + env(safe-area-inset-bottom));overflow:hidden;background:#F5F7FC;box-shadow:0 0 60px rgba(36,65,122,.07)}
.app-header{height:calc(70px + env(safe-area-inset-top));padding:calc(11px + env(safe-area-inset-top)) 21px 10px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(112deg,#1538D7 0%,#245BFF 57%,#4384FF 100%);color:#fff;position:relative;isolation:isolate}
.app-header:after{content:"";position:absolute;width:180px;height:180px;border:1px solid #FFFFFF20;border-radius:50%;right:-64px;top:-116px;box-shadow:0 0 0 23px #FFFFFF08,0 0 0 48px #FFFFFF05;z-index:-1}
.app-brand{display:flex;align-items:center;gap:10px;font-family:Manrope,'DM Sans',sans-serif;font-size:19px;font-weight:800;letter-spacing:-.055em;color:#fff}
.key-mark{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:#FFFFFF20;border:1px solid #FFFFFF35;color:#fff;font-size:16px;transform:none;box-shadow:inset 0 1px 0 #FFFFFF2A}
.header-actions{display:flex;align-items:center;gap:11px}
.icon-button{width:37px;height:37px;border-radius:13px;border:1px solid #FFFFFF40;background:#FFFFFF18;color:white;font-size:23px;line-height:1;box-shadow:inset 0 1px 0 #FFFFFF24;transition:transform .15s,background .15s}
.icon-button:active{transform:rotate(35deg);background:#FFFFFF2E}
.user-avatar{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:linear-gradient(145deg,#F8FBFF,#DDE9FF);border:2px solid #FFFFFF90;color:#2549A7;font-weight:800;font-size:12px;box-shadow:0 4px 12px #0A237C30}
.app-content{padding:23px 19px 28px}
.welcome-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 2px 18px}
.eyebrow{font-size:10px;letter-spacing:.16em;font-weight:800;color:#7D8AA4;margin:0 0 5px}
.welcome-row h1{font-family:Manrope,'DM Sans',sans-serif;font-size:23px;letter-spacing:-.055em;line-height:1.16;margin:0;font-weight:800;color:#172747}
.verified-chip{display:inline-flex;align-items:center;gap:5px;border-radius:30px;background:#E5F9EF;color:#138454;border:1px solid #BCEBD2;padding:6px 10px;font-size:10px;font-weight:800;white-space:nowrap;box-shadow:0 2px 7px #16895710}
.wallet-card{position:relative;isolation:isolate;overflow:hidden;min-height:176px;padding:19px 19px 16px;border:1px solid #FFFFFF80;border-radius:23px;background:linear-gradient(118deg,#1438D9 0%,#245BFF 53%,#4C8AFF 100%);box-shadow:0 16px 30px rgba(35,83,221,.27),inset 0 1px 0 #FFFFFF3B;color:#fff}
.wallet-card:before{content:"";position:absolute;z-index:-1;width:225px;height:225px;right:-68px;top:-112px;border-radius:50%;background:linear-gradient(140deg,#FFFFFF22,#FFFFFF03);border:1px solid #FFFFFF27;box-shadow:0 0 0 20px #FFFFFF08,0 0 0 42px #FFFFFF06}
.wallet-card:after{content:"414";position:absolute;z-index:-1;right:16px;bottom:-27px;font:800 104px/1 Manrope,sans-serif;letter-spacing:-.12em;color:#FFFFFF0D;pointer-events:none}
.wallet-card-top{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#FFFFFFE8;font-weight:700;letter-spacing:.01em}
.wallet-live{font-size:9px;letter-spacing:.12em;color:#E9FFF5;display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:30px;background:#FFFFFF18;border:1px solid #FFFFFF26}
.wallet-live i{width:7px;height:7px;background:#69F2B5;border-radius:50%;box-shadow:0 0 0 3px #69F2B52C}
.wallet-balance{display:block;font-family:Manrope,'DM Sans',sans-serif;font-size:34px;letter-spacing:-.055em;line-height:1.14;font-weight:800;color:#fff;margin:13px 0 15px;text-shadow:0 2px 8px #1238A522}
.wallet-actions{display:flex;gap:9px;position:relative;z-index:1}
.primary-action,.secondary-action{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:39px;padding:0 15px;border-radius:12px;font-size:11px;font-weight:800;letter-spacing:.005em;transition:transform .15s,filter .15s}
.primary-action{background:#fff;color:#1746D9;box-shadow:0 4px 10px #082C9C35}
.secondary-action{border:1px solid #FFFFFF72;background:#FFFFFF16;color:#fff}
.primary-action:active,.secondary-action:active{transform:translateY(1px);filter:brightness(.96)}
.active-orders-card{display:flex;align-items:center;gap:12px;min-height:69px;margin:13px 0 13px;padding:11px 15px;border:1px solid #DDE7FF;border-radius:17px;background:linear-gradient(105deg,#FFFFFF 0%,#EFF4FF 100%);box-shadow:0 7px 17px rgba(34,76,163,.07)}
.active-orders-card>span:first-child{display:grid;gap:4px;flex:1}
.active-orders-card small{font-size:9px;letter-spacing:.13em;color:#7182A2;font-weight:800}
.active-orders-card strong{font-family:Manrope,sans-serif;font-size:15px;font-weight:800;color:#1A315B}
.mini-chart{width:96px;height:39px}.mini-chart svg{width:100%;height:100%}.mini-chart path:first-child{stroke:#3472FF}.mini-chart path:last-child{stroke:#B8C9F5}
.arrow-mark{font-size:26px;color:#5B7FCB;line-height:1}
.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:0 0 25px}
.quick-card{min-height:116px;padding:14px 10px 12px;border:1px solid #E7ECF6;border-radius:19px;background:linear-gradient(150deg,#FFFFFF 0%,#FBFCFF 100%);box-shadow:0 7px 17px rgba(30,62,116,.065),inset 0 1px 0 #fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;cursor:pointer;transition:transform .16s,box-shadow .16s,border-color .16s}
.quick-card:active{transform:scale(.975);box-shadow:0 3px 9px rgba(30,62,116,.08);border-color:#B8CAFF}
.quick-icon{width:48px;height:48px;display:grid;place-items:center;margin-bottom:8px;border-radius:15px;font-size:25px;box-shadow:inset 0 1px 0 #FFFFFFA8}
.unlock-icon{background:linear-gradient(145deg,#E0EAFF,#C7D9FF)}
.imei-icon{background:linear-gradient(145deg,#DDF9EC,#BDF1D9)}
.status-icon{background:linear-gradient(145deg,#D9EDFF,#C2DDFF)}
.wallet-icon{background:linear-gradient(145deg,#FFF0C8,#FFE1A0)}
.quick-card strong{font-family:Manrope,sans-serif;font-size:12px;line-height:1.25;font-weight:800;color:#203453}
.quick-card small{font-size:9px;line-height:1.35;color:#8090A8;margin-top:4px}
.quick-icon svg{display:block;width:100%;height:100%}.quick-icon{padding:5px}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:3px 1px 13px}
.section-heading h2{font-family:Manrope,sans-serif;font-size:20px;letter-spacing:-.045em;margin:0;color:#172B4A;font-weight:800}
.section-heading .eyebrow{margin-bottom:3px}
.text-action{border:0;background:#EAF0FF;color:#285AE0;font-size:10px;font-weight:800;padding:8px 12px;border-radius:30px}
.activity-list,.order-list{display:grid;gap:9px}
.activity-row,.order-card{display:flex;align-items:center;gap:12px;padding:13px 13px;border:1px solid #E8EDF5;border-radius:16px;background:#fff;box-shadow:0 5px 13px rgba(35,57,91,.045);min-width:0}
.activity-symbol{width:38px;height:38px;flex:0 0 38px;border-radius:13px;display:grid;place-items:center;background:#EAF0FF;color:#2A5CDE;font-weight:800;font-size:16px}
.activity-copy,.order-copy{min-width:0;flex:1}
.activity-copy strong,.order-copy strong{display:block;font-family:Manrope,sans-serif;font-size:11px;line-height:1.35;color:#223654;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.activity-copy small,.order-copy small{display:block;font-size:9px;color:#8492A8;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.activity-amount{font-size:10px;font-weight:800;white-space:nowrap;color:#1B9A6A}
.order-status{font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.045em;padding:6px 8px;border-radius:30px;background:#EAF0FF;color:#4161A6;white-space:nowrap}
.order-status.completed{background:#E2F8ED;color:#168254}
.order-status.rejected,.order-status.failed,.order-status.cancelled{background:#FFE8E8;color:#B13C48}
.order-status.pending,.order-status.in_progress,.order-status.processing{background:#FFF2D8;color:#956A16}
.order-heading{margin-top:24px}
.order-card{align-items:flex-start;padding:14px}
.order-copy small{white-space:normal;line-height:1.45}
.order-card .order-status{margin-left:auto}
.app-view{display:none;animation:rise .22s ease}
.app-view.active{display:block}
.app-view[hidden]{display:none!important}
@keyframes rise{from{opacity:.2;transform:translateY(7px)}to{opacity:1;transform:none}}
.muted-copy{font-size:12px;color:#77869D;line-height:1.6;margin:0 1px 16px}
.count-pill{display:grid;place-items:center;min-width:30px;height:30px;padding:0 9px;border-radius:30px;background:#E7EEFF;color:#285BE4;font-weight:800;font-size:11px}
.summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:15px 0 21px}
.summary-card{padding:17px;border:1px solid #E0E8F7;border-radius:17px;background:linear-gradient(145deg,#FFFFFF,#F1F5FF);box-shadow:0 6px 15px rgba(35,70,140,.06)}
.summary-card small{display:block;font-size:10px;color:#75849C;font-weight:700}
.summary-card strong{display:block;font-family:Manrope,sans-serif;font-size:25px;color:#1B48BD;margin-top:5px;font-weight:800}
.list-title{font-family:Manrope,sans-serif;font-size:14px;margin:20px 1px 11px;color:#213654;font-weight:800}
.profile-card{display:flex;flex-direction:column;align-items:center;padding:27px 17px;border:1px solid #E3EAF7;border-radius:22px;background:linear-gradient(145deg,#FFFFFF,#F1F5FF);box-shadow:var(--shadow);text-align:center}
.profile-big-avatar{display:grid;place-items:center;width:72px;height:72px;border-radius:23px;background:linear-gradient(145deg,#1948E7,#4386FF);color:#fff;font-size:21px;font-weight:800;box-shadow:0 9px 20px #285BDB38}
.profile-card h3{font-family:Manrope,sans-serif;font-size:19px;margin:13px 0 6px;font-weight:800}
.profile-card p{font-size:12px;color:#76869E;margin:7px 0}
.profile-card small{font-size:10px;color:#8290A2}
.profile-card b{color:#354B63}
.profile-links{margin-top:14px;border:1px solid #E4EAF4;border-radius:17px;overflow:hidden;background:#fff;box-shadow:0 5px 14px rgba(37,73,111,.045)}
.profile-links a{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid #EDF0F6;font-size:12px;font-weight:700;color:#263B59}
.profile-links a:last-child{border:0}.profile-links span{color:#3469EB;font-size:20px}
.signout-button{width:100%;margin-top:15px;padding:15px;border:1px solid #F1C8CC;border-radius:14px;background:#FFF6F6;color:#AF3947;font-size:12px;font-weight:800}
.empty-state,.loading-line{padding:20px 14px;text-align:center;border:1px dashed #C9D5E8;border-radius:15px;color:#8090A7;font-size:11px;background:#FFFFFFA6}
.app-message{padding:13px 15px;margin-top:16px;border-radius:14px;background:#FFF3D9;color:#795C19;font-size:11px;line-height:1.5}
.app-message.error{background:#FFE9EA;color:#A03542}
.bottom-nav{position:fixed;z-index:5;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,540px);height:calc(76px + env(safe-area-inset-bottom));padding:9px 10px calc(9px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(5,1fr);background:rgba(255,255,255,.94);border-top:1px solid #E5EAF4;box-shadow:0 -9px 24px rgba(35,55,95,.07);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
.nav-item{border:0;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#8793A7;min-width:0}
.nav-item span{font-size:22px;line-height:1.05;width:37px;height:29px;display:grid;place-items:center;border-radius:11px}
.nav-item small{font-size:9px;font-weight:700;letter-spacing:.01em}
.nav-item.active{color:#245BFF}
.nav-item.active span{background:#EAF0FF;color:#245BFF;transform:translateY(-1px)}
.install-shell{width:min(100%,540px);min-height:100svh;margin:auto;padding:calc(30px + env(safe-area-inset-top)) 23px calc(30px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.install-logo{width:82px;height:82px;border-radius:25px;display:grid;place-items:center;background:linear-gradient(145deg,#1638D7,#3D7BFF);color:white;font-family:Manrope,sans-serif;font-weight:800;font-size:22px;box-shadow:0 13px 27px #2259ED42}
.install-shell h1{font-family:Manrope,sans-serif;font-size:28px;margin:21px 0 8px;letter-spacing:-.05em;color:#172B4A}
.install-shell p{font-size:13px;line-height:1.7;color:#687B98;max-width:340px}
.install-instructions{margin:15px 0 22px;padding:16px 17px;border:1px solid #DEE7FA;border-radius:17px;background:#FFFFFFC9;box-shadow:0 7px 20px #294D8610;font-size:12px;line-height:1.65;color:#526985;max-width:370px}
.install-button{width:100%;max-width:350px;min-height:54px;padding:0 17px;border:0;border-radius:15px;background:linear-gradient(105deg,#153BD9,#367AFF);color:#fff;font-size:13px;font-weight:800;box-shadow:0 9px 21px #2259ED38}
.install-button:disabled{opacity:.6}.install-back{margin-top:19px;color:#285FE5;font-size:12px;font-weight:800}
@media(min-width:700px){
 body{padding:22px 0}.app-frame{margin:0 auto;min-height:calc(100vh - 44px);border-radius:30px;box-shadow:0 20px 65px rgba(22,47,104,.17)}
 .app-header{border-radius:30px 30px 0 0}.bottom-nav{bottom:22px;border-radius:0 0 30px 30px;width:min(100%,540px)}
}
@media(max-width:390px){
 .app-content{padding-left:15px;padding-right:15px}.welcome-row h1{font-size:21px}.wallet-balance{font-size:31px}
 .quick-grid{gap:9px}.quick-card{min-height:108px}.quick-card strong{font-size:11px}.quick-card small{font-size:8px}
 .mini-chart{width:78px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Native in-app screens and forms */
.app-screen{display:none;animation:rise .2s ease}
.app-screen.active{display:block}
.app-screen[hidden]{display:none!important}
.header-page-title{position:absolute;left:50%;transform:translateX(-50%);font-family:Manrope,sans-serif;font-size:14px;font-weight:800;color:#fff;pointer-events:none}
.app-brand{border:0;background:transparent;padding:0;cursor:pointer}
.back-link{border:0;background:transparent;color:#285FE5;font-weight:800;font-size:12px;padding:4px 0 14px}
.native-form{display:grid;gap:10px;padding:17px;border:1px solid #E3EAF7;border-radius:19px;background:#fff;box-shadow:0 7px 18px rgba(35,65,120,.055);margin-top:13px}
.native-form label{display:block;font-size:11px;font-weight:800;color:#304460;margin-top:3px}
.native-form input:not([type=checkbox]),.native-form select,.native-form textarea{width:100%;min-height:47px;padding:12px 13px;border:1px solid #DCE4F1;border-radius:12px;background:#F9FBFF;color:#1B2D49;font:500 13px 'DM Sans',sans-serif;outline:none;box-shadow:inset 0 1px 2px rgba(24,53,100,.025);transition:border-color .15s,box-shadow .15s}
.native-form textarea{min-height:90px;resize:vertical}
.native-form input:focus,.native-form select:focus,.native-form textarea:focus{border-color:#4D7BFF;box-shadow:0 0 0 3px #245BFF17;background:#fff}
.native-form>small{font-size:10px;line-height:1.5;color:#8290A6;margin-top:-5px}
.form-primary,.form-secondary,.secondary-wide{display:flex;align-items:center;justify-content:center;width:100%;min-height:49px;padding:0 15px;border:0;border-radius:13px;background:linear-gradient(105deg,#153BD9,#367AFF);color:#fff;font-size:12px;font-weight:800;box-shadow:0 8px 18px #2259ED30;cursor:pointer;transition:transform .15s,filter .15s}
.form-primary:active,.form-secondary:active,.secondary-wide:active{transform:translateY(1px);filter:brightness(.97)}
.form-primary:disabled,.form-secondary:disabled{opacity:.55;cursor:not-allowed}
.form-secondary,.secondary-wide{margin-top:13px;background:#EAF0FF;color:#285BE4;box-shadow:none;border:1px solid #D9E4FF}
.secondary-wide{margin-top:19px}
.form-message{padding:11px 12px;border-radius:12px;background:#FFF3D9;color:#8A6519;font-size:10px;line-height:1.55}
.form-message.success{background:#E4F8ED;color:#16764C}
.form-message.error{background:#FFE9EA;color:#A53A45}
.check-line{display:flex!important;align-items:flex-start;gap:9px;padding:10px 11px;border:1px solid #E5EBF4;border-radius:12px;background:#FAFBFE;font-size:10px!important;line-height:1.5;color:#536680!important;font-weight:600!important;margin-top:2px!important}
.check-line input{width:17px;height:17px;flex:0 0 17px;accent-color:#245BFF;margin:0;transform:translateY(1px)}
.quote-row{display:flex;justify-content:space-between;align-items:center;padding:13px 14px;border-radius:13px;background:#EDF3FF;border:1px solid #DDE8FF;color:#506687;font-size:11px;font-weight:700}
.quote-row strong{font-family:Manrope,sans-serif;font-size:17px;color:#204FDB;font-weight:800}
.native-panel{margin-top:15px;padding:18px;border:1px solid #DCE8FF;border-radius:18px;background:linear-gradient(145deg,#fff,#F2F6FF);box-shadow:0 8px 20px rgba(39,78,151,.07)}
.native-panel h3{font-family:Manrope,sans-serif;font-size:17px;margin:8px 0 7px;color:#1C3559}
.native-panel p{font-size:11px;line-height:1.65;color:#6C7F9A}
.panel-success-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:#E0F8EA;color:#148554;font-size:19px;font-weight:900}
.topup-reference{padding:14px;margin:11px 0;border-radius:12px;background:#EAF0FF;color:#204FDB;text-align:center;font-family:Manrope,sans-serif;font-weight:800;font-size:16px;letter-spacing:.04em;overflow-wrap:anywhere}
.compact-form{padding:14px;margin-top:12px;box-shadow:none;background:#F8FAFF}
.external-payment{margin-top:10px}
.wallet-summary{padding:22px;border-radius:21px;background:linear-gradient(115deg,#1438D9,#245BFF 58%,#4C8AFF);box-shadow:0 14px 27px rgba(35,83,221,.22);color:#fff}
.wallet-summary small{font-size:11px;font-weight:700;color:#FFFFFFD8}
.wallet-summary strong{display:block;font:800 31px/1.2 Manrope,sans-serif;letter-spacing:-.05em;margin:8px 0}
.wallet-summary p{font-size:10px;color:#FFFFFFC8;line-height:1.55;margin:0}
.list-title{margin-top:21px}
.resume-topup{border:1px solid #D6E2FF;background:#EDF3FF;color:#285BE4;border-radius:10px;padding:8px 10px;font-size:9px;font-weight:800;white-space:nowrap}
.imei-result-panel .result-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:15px 0}
.result-grid div{min-width:0;padding:11px;border:1px solid #E3EAF6;border-radius:12px;background:#fff}
.result-grid dt{font-size:9px;color:#8190A6;font-weight:700;margin-bottom:4px}
.result-grid dd{font-size:11px;color:#253A5B;font-weight:800;margin:0;overflow-wrap:anywhere}
.ticket-list{display:grid;gap:8px;margin-top:10px}
.ticket-item{display:grid;gap:5px;text-align:left;padding:13px;border:1px solid #E3EAF6;border-radius:13px;background:#fff;box-shadow:0 4px 10px rgba(35,57,91,.035);cursor:pointer}
.ticket-item.active{border-color:#8DAAFF;background:#F1F5FF}
.ticket-item strong{font-size:11px;color:#233957}
.ticket-item span{font-size:9px;color:#7D8DA5;line-height:1.4}
.thread-panel{padding:0;overflow:hidden}
.thread-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 15px;border-bottom:1px solid #E5EBF4}
.thread-head strong{font-size:11px;color:#213754}
.thread-head span{font-size:9px;color:#6D83A8}
.messages{display:grid;gap:9px;max-height:340px;overflow-y:auto;padding:13px;background:#F8FAFE}
.support-message{max-width:90%;padding:11px 12px;border-radius:13px;background:#fff;border:1px solid #E5EAF2;justify-self:start}
.support-message.customer{justify-self:end;background:#EAF0FF;border-color:#D8E3FF}
.support-message .meta{font-size:8px;color:#8290A6;margin-bottom:6px;font-weight:700}
.support-message .body{font-size:11px;line-height:1.55;color:#314762;overflow-wrap:anywhere;white-space:pre-wrap}
.thread-panel .compact-form{margin:0;border:0;border-top:1px solid #E5EBF4;border-radius:0}
.profile-links button{width:100%;display:flex;align-items:center;justify-content:space-between;padding:16px;border:0;border-bottom:1px solid #EDF0F6;background:#fff;text-align:left;font-size:12px;font-weight:700;color:#263B59}
.profile-links button:last-child{border:0}
.profile-links button span{color:#3469EB;font-size:20px}
@media(max-width:390px){.native-form{padding:14px}.native-form input:not([type=checkbox]),.native-form select{min-height:45px}.header-page-title{font-size:12px}}

/* Services tab — dedicated cards, icon blocks and responsive action rows */
#page-services>.section-heading{margin-bottom:8px}
#page-services>.muted-copy{margin-bottom:19px;max-width:390px}
#page-services .service-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0}
#page-services .service-option{
 min-width:0;min-height:151px;padding:16px 13px 14px;
 display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:12px;
 position:relative;overflow:hidden;text-align:left;
 border:1px solid #DCE6FA;border-radius:19px;
 background:linear-gradient(150deg,#FFFFFF 0%,#F5F8FF 100%);
 box-shadow:0 8px 19px rgba(34,72,151,.075),inset 0 1px 0 #fff;
 cursor:pointer;color:#1D3355;
 transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
#page-services .service-option:before{
 content:"";position:absolute;width:96px;height:96px;right:-40px;top:-43px;
 border-radius:50%;background:linear-gradient(145deg,#E5EDFF,#F8FAFF);opacity:.9;pointer-events:none
}
#page-services .service-option:active{transform:scale(.975);border-color:#8BAAFF;box-shadow:0 4px 10px rgba(34,72,151,.09)}
#page-services .service-option-icon{
 position:relative;z-index:1;width:46px;height:46px;flex:0 0 46px;
 display:grid;place-items:center;border-radius:15px;
 background:linear-gradient(145deg,#E7EEFF,#D9E5FF);
 color:#245BFF;font-size:24px;
 box-shadow:inset 0 1px 0 #fff,0 3px 8px rgba(36,91,255,.09)
}
#page-services .service-option:nth-child(2) .service-option-icon{background:linear-gradient(145deg,#DDF9EB,#C6F2DD);color:#138454}
#page-services .service-option:nth-child(3) .service-option-icon{background:linear-gradient(145deg,#DDEEFF,#C9E4FF);color:#2166B4}
#page-services .service-option:nth-child(4) .service-option-icon{background:linear-gradient(145deg,#FFF0D0,#FFE4AA);color:#9A6A12}
#page-services .service-option:nth-child(5) .service-option-icon{background:linear-gradient(145deg,#EFE6FF,#E1D5FF);color:#6945C6}
#page-services .service-option>span:nth-child(2){position:relative;z-index:1;display:grid;gap:5px;width:100%;min-width:0}
#page-services .service-option strong{font-family:Manrope,'DM Sans',sans-serif;font-size:12px;line-height:1.28;font-weight:800;color:#1C3152}
#page-services .service-option small{font-size:9px;line-height:1.45;color:#7C8DA8;font-weight:600}
#page-services .service-option>b{position:absolute;right:13px;top:17px;z-index:1;font-size:20px;line-height:1;color:#7897D6;font-weight:500}
#page-services .service-option:nth-child(5){grid-column:1/-1;min-height:88px;flex-direction:row;align-items:center;justify-content:flex-start;padding:14px 15px}
#page-services .service-option:nth-child(5)>span:nth-child(2){padding-right:25px}
#page-services .service-option:nth-child(5)>b{top:50%;transform:translateY(-50%)}
@media(max-width:350px){
 #page-services .service-options{gap:9px}
 #page-services .service-option{min-height:137px;padding:12px 10px}
 #page-services .service-option strong{font-size:11px}
 #page-services .service-option small{font-size:8px}
}
@media(min-width:460px){#page-services .service-options{gap:14px}#page-services .service-option{min-height:160px;padding:18px}}

/* App motion: short, restrained transitions between native screens */
.app-screen.active{animation:appScreenReveal .46s cubic-bezier(.2,.78,.22,1) both;transform-origin:50% 8%}
@keyframes appScreenReveal{0%{opacity:0;transform:translate3d(0,13px,0) scale(.992);filter:blur(2px)}100%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0)}}
.app-screen.active>*{animation:appContentReveal .48s cubic-bezier(.2,.78,.22,1) both}
.app-screen.active>*:nth-child(1){animation-delay:.025s}
.app-screen.active>*:nth-child(2){animation-delay:.075s}
.app-screen.active>*:nth-child(3){animation-delay:.12s}
.app-screen.active>*:nth-child(4){animation-delay:.165s}
.app-screen.active>*:nth-child(5){animation-delay:.21s}
@keyframes appContentReveal{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
.wallet-card{transform:translateZ(0);animation:walletArrive .62s cubic-bezier(.18,.78,.2,1) both}
@keyframes walletArrive{0%{opacity:0;transform:translateY(12px) scale(.985)}65%{opacity:1;transform:translateY(-2px) scale(1.003)}100%{opacity:1;transform:translateY(0) scale(1)}}
.wallet-live i{animation:liveSignal 2s ease-in-out infinite}
@keyframes liveSignal{0%,100%{box-shadow:0 0 0 2px #69F2B51C;opacity:1}50%{box-shadow:0 0 0 6px #69F2B52D;opacity:.8}}
.quick-card,.service-option,.activity-row,.order-card,.profile-links button,.ticket-item{transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s ease,border-color .2s ease,background .2s ease}
@media(hover:hover){.quick-card:hover,.service-option:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(34,72,151,.12);border-color:#B7C9FF}.activity-row:hover,.order-card:hover,.ticket-item:hover{transform:translateY(-2px);box-shadow:0 9px 18px rgba(35,57,91,.08)}}
.quick-card:active,.service-option:active,.activity-row:active,.order-card:active{transform:scale(.975)}
.form-primary,.form-secondary,.primary-action,.secondary-action,.nav-item,.icon-button,.text-action,.back-link{transition:transform .18s ease,filter .18s ease,background .18s ease,box-shadow .18s ease}
.form-primary:active,.form-secondary:active,.primary-action:active,.secondary-action:active,.text-action:active{transform:scale(.975)}
.nav-item.active span{animation:navIconArrive .38s cubic-bezier(.16,1.35,.35,1) both}
@keyframes navIconArrive{0%{transform:translateY(4px) scale(.78)}70%{transform:translateY(-2px) scale(1.1)}100%{transform:translateY(-1px) scale(1)}}
.active-orders-card .mini-chart path:first-child{stroke-dasharray:150;stroke-dashoffset:150;animation:chartDraw 1.1s .25s ease-out forwards}
@keyframes chartDraw{to{stroke-dashoffset:0}}
.loading-line{position:relative;overflow:hidden}
.loading-line:after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,#FFFFFFB8,transparent);animation:loadingSweep 1.5s ease-in-out infinite}
@keyframes loadingSweep{to{transform:translateX(100%)}}
.app-message{animation:messageArrive .24s ease both}
@keyframes messageArrive{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.support-message{animation:messageArrive .25s ease both}
.ticket-item.active{box-shadow:0 5px 13px rgba(36,91,255,.08)}
button:focus-visible,.quick-card:focus-visible,.service-option:focus-visible{outline:3px solid #7FA0FF;outline-offset:3px}
@media(prefers-reduced-motion:reduce){
 .app-screen.active,.app-screen.active>*,.wallet-card,.wallet-live i,.quick-card,.service-option,.activity-row,.order-card,.profile-links button,.ticket-item,.nav-item.active span,.active-orders-card .mini-chart path:first-child,.loading-line:after,.app-message,.support-message{animation:none!important;transition:none!important;transform:none!important;filter:none!important}
}