/* SmileSocial 3.2 — readable type, compact mobile forms, consistent surfaces. */
:root{--blue:#335cf5;--blue-2:#254ce0;--ink:#192541;--muted:#606e87;--line:#e1e7f0;--soft:#f2f5fa;--radius:18px;--shadow:0 12px 32px #142c5b0b}
body{font-size:16px;line-height:1.85;font-weight:400;letter-spacing:0}
h1,h2,h3,h4,strong{font-weight:600;letter-spacing:0}h1{font-size:26px}h2{font-size:20px}h3{font-size:16px}small{font-size:12px}
button,input,select,textarea{font-size:16px}input,select,textarea{min-height:48px;border-radius:12px;background:#fff;line-height:1.8;padding:11px 14px;color:var(--ink)}
input::placeholder,textarea::placeholder{color:#7a879c;opacity:1}label{font-size:14px;line-height:1.85;font-weight:600}
input:focus,select:focus,textarea:focus{outline:3px solid #335cf527;outline-offset:1px;border-color:var(--blue)}
input[type=checkbox],input[type=radio]{min-height:0;width:18px;height:18px;accent-color:var(--blue)}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #6591ff;outline-offset:3px}
.help,.muted,.field-hint{font-size:14px;line-height:1.9}.badge,.status-chip,.section-kicker,.eyebrow{font-size:12px;letter-spacing:0;line-height:1.8}
.button{min-height:46px;border-radius:12px;font-size:14px;font-weight:600;padding:11px 17px;box-shadow:none;background:var(--blue);border-color:var(--blue);line-height:1.85}
.button:hover{background:#2344cc;box-shadow:0 5px 14px #335cf527}.button.secondary{background:#fff;color:#364563;border-color:#d7dfeb}.button.secondary:hover{background:#f0f4fb}.button.danger{background:#fff0f1;border-color:#facbd2;color:#b3263f}.button.ghost{background:transparent;border-color:transparent;color:#455b7b}.button.small{font-size:13px;padding:9px 13px;min-height:42px}.button.wide{width:100%}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:0 3px 5px #13265302}.card p{line-height:1.9}
.app-shell{grid-template-columns:272px minmax(0,1fr)}.sidebar{width:272px;background:#101d36;padding:25px 16px 18px}.sidebar:before{display:none}
.brand-mark,.avatar{background:linear-gradient(145deg,#4775ff,#2d55e8);box-shadow:none}.brand strong{font-size:18px}.brand small{font:12px SmileMyanmar,Arial,sans-serif;letter-spacing:0;color:#acbad3;margin-top:4px}
.sidebar-status{margin:24px 4px 20px;background:#ffffff06;border-color:#ffffff10;border-radius:12px;padding:10px 14px}.sidebar-status strong{font:14px SmileMyanmar,Arial,sans-serif;color:#d3dcf0}.sidebar-status small{font-size:12px;color:#a5b3ce}
.nav-caption{font:12px SmileMyanmar,Arial,sans-serif;letter-spacing:0;color:#a5b3ce}.nav-link{font-size:14px;color:#b5c2db;gap:10px;padding:10px 12px;border-radius:11px}.nav-icon{color:#90a5c8}.nav-link.selected{background:#2e57e8;border-color:#5279ff;box-shadow:none}.nav-link.selected .nav-icon{color:#fff;background:transparent}.nav-link em{font-size:12px}
.sidebar-promo{margin-top:24px;border-color:#ffffff12;background:#ffffff04}.sidebar-promo strong{font:14px SmileMyanmar,Arial,sans-serif}.sidebar-promo p{font-size:12px;color:#b0bed6}.sidebar-user{margin-top:auto}.identity strong{font-size:14px}.identity small{font-size:12px;color:#a2b4d2}
.topbar{height:88px;background:#ffffffee;border-color:var(--line);padding:0 30px}.page-heading span{font-size:12px;color:#687992;letter-spacing:0;text-transform:none}.page-heading h1{font-size:21px}.profile-chip strong{font-size:14px}.profile-chip small{font:12px SmileMyanmar,Arial,sans-serif;color:#65738c}.profile-chip{border:0;background:#f4f6fb}.top-icon{width:44px;height:44px}.top-icon i{display:none}
.page-content{padding:28px 30px 20px;max-width:1536px}.page-footer{font-size:12px;color:#65738c}.announcement p,.notice p{font-size:14px}.notice,.announcement{border-radius:12px;box-shadow:none}
.admin-hero,.user-hero{border-radius:20px;background:#122646;color:#fff}.admin-hero h2,.user-hero h2{font-size:26px}.admin-hero p,.user-hero p{font-size:14px}.admin-hero .hero-label,.user-hero .eyebrow{color:#a9c1ee;font-size:12px;letter-spacing:0}.hero-actions{margin-top:20px}
.provider-panel{border-radius:16px;background:#ffffff0d;border-color:#ffffff24}.provider-head{font-size:12px;flex-wrap:wrap;gap:8px}.provider-meta{font-size:12px;color:#bfd0ef}.provider-balance{font-size:34px}
.stats-grid{gap:16px}.metric-label{font-size:14px;color:#4f617f}.metric-value{font-size:30px}.metric-value small{font-size:14px}.metric-delta,.metric-foot{font-size:12px}.metric-icon{background:#ecf1ff}.metric-card{padding:22px}.metric-foot{flex-wrap:wrap;gap:5px}.metric-top{margin-bottom:14px}
.dashboard-grid,.split-grid{gap:20px}.chart-legend,.bar-label,.bar-value{font-size:12px}.chart-legend{gap:10px;flex-wrap:wrap}.health-row strong{font-size:14px}.health-row small{font-size:12px;color:#65738c}.health-state{font-size:12px;font-style:normal}.health-row{gap:10px;min-width:0}.health-row>div{min-width:0}.health-row em{overflow-wrap:anywhere}
.quick-action strong{font-size:14px}.quick-action small{font-size:12px}.quick-action{border-radius:14px}.quick-grid{gap:12px}.mini-user strong,.mini-user>span{font-size:14px}.mini-user small{font-size:12px}.mini-user{gap:10px}
.setup-banner{background:#eaf0ff;border-color:#cbd9ff;border-radius:16px}.setup-banner p{font-size:14px}.setup-banner strong{font-size:18px}.section-title{gap:12px}.section-title h2{font-size:20px}.section-kicker{color:#4b66a5}
.table-wrap{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}th{font-size:13px;color:#5a6b86;background:#f6f8fc;white-space:nowrap}td{font-size:14px;line-height:1.9}td small{font-size:12px;color:#65738c}td,th{padding:14px 13px}.table-wrap table{min-width:600px}td strong{font-size:14px}
.form-grid{gap:18px}.stack{gap:18px}.stack label{font-size:14px}.search-form{flex-wrap:wrap;gap:10px}.search-form input{min-width:150px}.filter-row,.filter-bar{flex-wrap:wrap;gap:12px}.pagination{flex-wrap:wrap;gap:12px;font-size:14px}.service-summary{flex-wrap:wrap;gap:10px}.service-summary strong{font-size:16px}.service-summary small{font-size:12px}
.wallet{background:linear-gradient(125deg,#132d65,#295bcb);border-radius:20px;box-shadow:0 12px 24px #132d651c}.wallet small,.wallet-top,.wallet-bottom{font-size:14px}.wallet-amount strong{font-size:38px}.wallet-amount span{font-size:16px}.wallet-bottom button{min-height:42px;font-size:14px}
.order-card{border-radius:16px}.order-card h3{font-size:17px}.order-number,.order-meta,.order-footer{font-size:12px}.number-box strong{font-size:21px;overflow-wrap:anywhere}.number-box small{font-size:12px}.otp-code{font-size:28px}.copy-button{font-size:14px;min-height:44px}.howto p{font-size:14px}.howto strong{font-size:16px}.small-label{font-size:12px}.service-note{font-size:14px}.price-row{font-size:16px}.price-row strong{font-size:24px}.stat small{font-size:14px}
.system-card small{font-size:14px}.system-card strong{font-size:22px}.system-hero{background:#112648;border-radius:18px;padding:26px}.system-hero h2{font-size:24px}.system-hero p{font-size:14px;color:#c5d4ed}.system-pulse{font-size:12px}
.diagnostic-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:20px 0}.diagnostic-grid div{padding:16px;border-radius:12px;background:#f5f8fd}.diagnostic-grid dt{font-size:13px;color:var(--muted)}.diagnostic-grid dd{margin:5px 0 0;font-size:15px;overflow-wrap:anywhere}.report-filter{display:grid;grid-template-columns:1fr 1fr 1fr auto;align-items:end;gap:14px}.report-filter input{width:100%}.report-filter label{min-width:0}.report-totals{grid-template-columns:repeat(3,minmax(0,1fr));margin:20px 0}.report-totals strong{display:block;font-size:27px}.report-totals small{font-size:14px}
.public-error-layout{min-height:100dvh;padding:60px 20px;display:grid;place-items:center;background:#f2f5fb}.error-card{width:min(100%,650px);margin:0;padding:36px}.error-card h1{font-size:24px}.error-card p{font-size:16px}.error-card .actions{flex-wrap:wrap;justify-content:center}.confirm-dialog{border-radius:20px;padding:24px;max-width:calc(100% - 32px)}.confirm-dialog p{font-size:16px}.toast p{font-size:14px}
/* Account entry, including server validation, uses the same card on mobile. */
.entry-layout{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:40px 24px;background:radial-gradient(ellipse at 12% 0%,#244b87 0,transparent 44%),radial-gradient(ellipse at 100% 100%,#153b67 0,transparent 45%),#101d34}
.entry-shell{display:grid;grid-template-columns:1fr 1fr;width:min(100%,1060px);border:1px solid #ffffff20;border-radius:28px;overflow:hidden;box-shadow:0 28px 90px #030b204d}
.entry-intro{padding:40px;color:#fff;background:linear-gradient(150deg,#19366580,#11213cbf);position:relative;display:flex;flex-direction:column;isolation:isolate}.entry-intro:after{content:"";position:absolute;width:280px;height:280px;border:1px solid #668eff22;border-radius:50%;right:-90px;bottom:40px;z-index:-1;box-shadow:0 0 0 40px #668eff06,0 0 0 80px #668eff04;pointer-events:none}
.entry-brand{display:flex;align-items:center;gap:13px;color:white;min-width:0}.entry-logo{display:grid;place-items:center;flex:0 0 auto;width:48px;height:48px;border-radius:15px;background:#4774ff;box-shadow:0 8px 20px #00000015}.entry-logo img{filter:brightness(0) invert(1)}.entry-brand strong{display:block;font:600 21px/1.5 SmileMyanmar,Arial,sans-serif;overflow-wrap:anywhere}.entry-brand small{display:block;margin-top:4px;font-size:12px;color:#bdd0ed}
.entry-story{margin:auto 0;padding:44px 0}.entry-overline{display:block;color:#a7c7ff;font-size:14px;margin-bottom:18px}.entry-story h1{font-size:32px;line-height:1.95}.entry-story h1 span{font-size:23px;color:#a3ddde}.entry-story>p{font-size:15px;color:#bfd0e9;max-width:350px;margin:17px 0 25px}.entry-benefits{display:grid;gap:18px}.entry-benefits>div{display:flex;gap:12px;align-items:center}.entry-benefits>div>span{width:35px;height:35px;flex-shrink:0;display:grid;place-items:center;background:#ffffff0d;border:1px solid #ffffff12;color:#a8c3ff;border-radius:11px}.entry-benefits p{font-size:13px;color:#d5e1f3}.entry-caption{font-size:12px;color:#9db5d6}
.entry-panel{background:#fff;padding:36px 40px;min-width:0}.entry-tabs{display:flex;gap:5px;padding:5px;background:#f0f3f9;border:1px solid #e7ecf4;border-radius:13px;margin-bottom:27px}.entry-tabs a{flex:1;text-align:center;font-size:14px;padding:10px 8px;color:#536581;border-radius:9px;line-height:1.85;font-weight:600}.entry-tabs .is-current{background:#fff;color:#234fdb;box-shadow:0 2px 7px #29476b15}
.entry-heading{margin-bottom:24px}.entry-greeting{display:flex;align-items:center;gap:8px;color:#4664a2;font-size:13px;margin-bottom:9px}.entry-greeting svg{width:18px;height:18px}.entry-heading h2{font-size:25px;line-height:1.9;color:#192a49}.entry-heading p{font-size:14px;color:#67778e;margin-top:5px}
.entry-form{display:flex;flex-direction:column;gap:0}.entry-form>label{font-size:14px;font-weight:600;margin:16px 0 8px;color:#32435f}.entry-form>label:first-of-type{margin-top:0}.entry-input{display:flex;align-items:center;background:#fbfcfe;border:1px solid #d4deec;border-radius:12px;transition:border-color .15s,box-shadow .15s}.entry-input:focus-within{background:#fff;border-color:#496ef3;box-shadow:0 0 0 3px #496ef314}.entry-input>span{color:#7d90b0;display:grid;place-items:center;padding-left:15px}.entry-input svg{width:20px;height:20px}.entry-input input{background:transparent;box-shadow:none;border:0;outline:0;border-radius:12px;padding:13px 12px;min-height:52px;font-size:16px;font-weight:400;width:100%;min-width:0;color:#243956}.entry-input input:focus{outline:0;box-shadow:none}.entry-input input[aria-invalid=true]{background:#fff5f5}.entry-input button{border:0;background:transparent;color:#7286a6;padding:13px;display:grid;place-items:center;min-height:48px}.entry-input button:hover{color:#244de2}.entry-form>small{font-size:12px;line-height:1.85;color:#65758e;margin-top:7px}.entry-submit{margin-top:25px;display:flex;align-items:center;justify-content:space-between;padding:14px 18px;min-height:54px;color:#fff;background:linear-gradient(110deg,#3364f5,#3551db);border:1px solid #3159e4;box-shadow:0 8px 18px #3364f51c;font-size:15px}.entry-submit svg{width:20px;height:20px}.entry-after{font-size:13px;color:#5c6f8a;text-align:center;margin:22px 0 0;line-height:2}.entry-after svg{display:inline-block;vertical-align:middle;width:16px;color:#168565;margin-right:4px}.entry-after a{font-weight:600}.entry-support{border-top:1px solid #e7edf5;padding-top:16px;margin-top:20px}.entry-support summary{font-size:13px;color:#4f6586;cursor:pointer}.entry-support p{font-size:14px;color:#596b83;padding-top:12px;white-space:pre-line}.entry-bottom{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:#74849b;margin-top:24px;overflow-wrap:anywhere}
.entry-feedback{padding:13px 15px;border:1px solid #bcded1;border-radius:12px;margin:0 0 20px;font-size:14px;line-height:1.9;background:#f0fbf6;color:#185f49;overflow-wrap:anywhere}.entry-feedback.is-error{background:#fff5f3;border-color:#f4c6bd;color:#a23e31}.entry-feedback strong,.entry-feedback small{display:block}.entry-feedback strong{margin-bottom:4px}.entry-feedback small{margin-top:10px;font-size:12px}.entry-feedback a{display:block;margin-top:10px;text-decoration:underline}.entry-form .entry-feedback{margin:16px 0 0}
@media(min-width:901px){.sidebar-promo{margin-bottom:20px}.menu-button{display:none}}
@media(max-width:1150px){.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-grid,.split-grid{grid-template-columns:1fr}.page-content{padding:24px}.report-filter{grid-template-columns:repeat(2,minmax(0,1fr))}.entry-panel,.entry-intro{padding:32px}.entry-story h1{font-size:28px}}
@media(max-width:900px){.app-shell{display:block}.workspace{width:100%}.sidebar{width:280px;transform:translateX(-100%)}.menu-open .sidebar{transform:translateX(0)}.menu-button,.mobile-close{display:grid}.menu-button{min-width:44px;min-height:44px}.topbar{padding:0 20px;height:78px;gap:12px}.page-heading{flex:1;min-width:0}.page-heading h1{font-size:18px}.page-heading span{font-size:12px}.profile-chip>span:nth-child(2),.profile-chip>svg{display:none}.topbar-actions{gap:6px}.entry-shell{max-width:540px;grid-template-columns:1fr;border-radius:24px}.entry-layout{padding:28px 22px;align-items:start}.entry-intro{padding:24px 28px;background:transparent}.entry-story,.entry-caption,.entry-intro:after{display:none}.entry-brand strong{font-size:22px}.entry-brand small{font-size:13px}.entry-panel{padding:28px 30px}.entry-tabs{margin-bottom:25px}}
@media(max-width:600px){.page-content{padding:20px 16px}.card{padding:20px 17px}.topbar{padding:0 14px}.top-icon{display:none}.topbar-actions{flex:0 0 auto}.hero-admin,.user-hero{padding:24px 20px}.hero-admin h2,.user-hero h2{font-size:22px}.hero-admin p,.user-hero p{font-size:14px}.stats-grid{gap:12px}.metric-card{padding:18px 14px}.metric-value{font-size:26px}.metric-label{font-size:13px}.metric-foot,.metric-delta{font-size:12px}.metric-top{gap:6px;flex-wrap:wrap}.metric-icon{width:35px;height:35px}.section-title h2{font-size:18px}.form-grid{grid-template-columns:1fr}.filter-row,.filter-bar{align-items:stretch}.search-form{width:100%}.search-form input{flex:1}.chart-legend{display:flex;flex-direction:column;align-items:start;font-size:12px}.health-row{flex-wrap:wrap}.health-state{margin-left:auto}.wallet-amount strong{font-size:34px}.order-card{padding:18px}.order-card .actions{flex-wrap:wrap}.order-card .actions form{flex:1}.order-card .actions .button{width:100%}.system-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.system-card strong{font-size:19px}.system-card small{font-size:13px}.system-hero{padding:22px;display:block}.system-hero h2{font-size:21px}.system-pulse{margin-top:14px;display:inline-flex}.diagnostic-grid{grid-template-columns:1fr;gap:10px}.report-filter{grid-template-columns:1fr 1fr}.report-filter .button{width:100%}.report-totals{grid-template-columns:1fr;gap:10px}.report-totals .card{display:flex;justify-content:space-between;align-items:center;gap:12px}.report-totals strong{font-size:24px}.page-footer{flex-wrap:wrap}.entry-layout{padding:18px 14px 28px}.entry-intro{padding:20px 22px}.entry-brand strong{font-size:20px}.entry-brand small{font-size:12px}.entry-panel{padding:24px 22px}.entry-heading h2{font-size:23px}.entry-heading p{font-size:14px}.entry-tabs a{font-size:13px;padding:10px 6px}.entry-input input{font-size:16px}.entry-after{font-size:13px}.entry-bottom{font-size:12px}.entry-heading{margin-bottom:22px}.entry-shell{border-radius:22px}.public-error-layout{padding:24px 16px}.error-card{padding:26px 20px}.error-card h1{font-size:23px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}