/* ARMUFA COMPACT UI (2026-11-04): visual sizing only, does not modify JS, EJS IDs, routes or forms.
   Mobile-first, 320px+, readable contrast; tap controls retain >=38px target. */
@layer pop {
html[data-design="armufa-modern"] body.mc-body,
html[data-design="armufa-modern"] body.armufa-body {
  font-size:12.5px!important;line-height:1.48!important;
}
html[data-design="armufa-modern"] body :is(.mc-page,.docs-wrap) {
  width:calc(100% - 22px)!important;max-width:610px!important;
}
html[data-design="armufa-modern"] body .mc-page {padding:12px 0 24px!important}
html[data-design="armufa-modern"] body .mc-header.sy-header {min-height:57px!important;padding:0 12px!important}
html[data-design="armufa-modern"] body .mc-header.sy-header .mc-header-inner {min-height:57px!important;max-width:610px!important;gap:8px!important}
html[data-design="armufa-modern"] body .mc-header.sy-header .sy-brand {gap:7px!important}
html[data-design="armufa-modern"] body .mc-header.sy-header .mc-logo-icon {width:32px!important;height:32px!important;flex-basis:32px!important;border-radius:9px!important}
html[data-design="armufa-modern"] body .mc-header.sy-header .mc-logo-icon i {font-size:15px!important}
html[data-design="armufa-modern"] body .mc-header.sy-header .mc-logo-text {font-size:16px!important;letter-spacing:-.04em!important}
html[data-design="armufa-modern"] body .sy-brand-titles small {font-size:9px!important}
html[data-design="armufa-modern"] body .sy-user-chip {gap:5px!important;padding:3px 0 3px 3px!important;font-size:11px!important;max-width:44%!important}
html[data-design="armufa-modern"] body .sy-user-avatar {width:29px!important;height:29px!important;flex-basis:29px!important;font-size:12px!important}
html[data-design="armufa-modern"] body .sy-user-name {max-width:85px!important}
html[data-design="armufa-modern"] body .sy-login-link {padding:7px 10px!important;font-size:11px!important}
html[data-design="armufa-modern"] body .sy-menu-bar {min-height:40px!important;box-shadow:0 3px 12px #1145a21a!important}
html[data-design="armufa-modern"] body .sy-menu-bar a {min-height:40px!important;gap:8px!important;font-size:13px!important}
html[data-design="armufa-modern"] body .sy-menu-arrow {font-size:10px!important}
/* Small left drawer, compact navigation, same route links. */
html[data-design="armufa-modern"] body #popMenu.sy-drawer[open] {width:min(74vw,295px)!important;max-width:calc(100vw - 40px)!important}
html[data-design="armufa-modern"] body .sy-drawer .account-drawer-inner {padding:0 10px 10px!important}
html[data-design="armufa-modern"] body .sy-drawer .account-drawer-profile.sy-drawer-profile {min-height:72px!important;padding:14px 12px 9px!important;margin:0 -10px 6px!important;gap:7px!important}
html[data-design="armufa-modern"] body .sy-drawer .sy-drawer-avatar {flex-basis:31px!important;width:31px!important;height:31px!important;font-size:12px!important}
html[data-design="armufa-modern"] body .sy-drawer .account-drawer-who h2 {font-size:15px!important}
html[data-design="armufa-modern"] body .sy-drawer .account-drawer-who p {font-size:10px!important}
html[data-design="armufa-modern"] body .sy-drawer .account-drawer-close {width:30px!important;height:30px!important;flex-basis:30px!important;font-size:13px!important}
html[data-design="armufa-modern"] body .sy-drawer .sy-drawer-links {gap:2px!important}
html[data-design="armufa-modern"] body .sy-drawer .sy-drawer-links>a {min-height:40px!important;padding:7px 10px!important;border-radius:10px!important;gap:9px!important;font-size:12px!important}
html[data-design="armufa-modern"] body .sy-drawer .sy-drawer-links>a>i:first-child {font-size:15px!important;flex-basis:19px!important;width:19px!important}
html[data-design="armufa-modern"] body .sy-drawer-divider {margin:6px 7px!important}
/* Shared cards, forms and buttons. */
html[data-design="armufa-modern"] body :is(.mc-card,.mc-stat-card,.adm-card,.cfg-card,.seo-card,.ac-card,.mc-service-card,.mc-order-card,.mc-deposit-card) {border-radius:14px!important;box-shadow:0 5px 17px #204a8510!important}
html[data-design="armufa-modern"] body :is(.mc-input,input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea) {min-height:39px!important;border-radius:9px!important;font-size:12px!important}
html[data-design="armufa-modern"] body :is(.mc-btn,.mc-btn-primary,.akey-btn.is-primary,.docs-button,.sy-primary-button) {border-radius:9px!important;font-size:12px!important}
html[data-design="armufa-modern"] body :is(.mc-section-title,.section-heading h2,.mc-topbar-title) {font-size:15px!important}
html[data-design="armufa-modern"] body .mc-topbar {max-width:610px!important;padding:11px 11px 3px!important}
html[data-design="armufa-modern"] body .mc-back-btn {border-radius:9px!important}
/* Home: maintain two columns but reduce excessive whitespace and large cards. */
html[data-design="armufa-modern"] body .dashboard-page.sy-dashboard {padding:11px 0 24px!important}
html[data-design="armufa-modern"] body .sy-dashboard-hero {margin:0 0 8px!important}
html[data-design="armufa-modern"] body .sy-balance-card.mc-balance-card {min-height:126px!important;padding:14px 16px 12px!important;margin:0 0 10px!important;border-radius:19px!important;box-shadow:0 8px 21px #205bba26!important}
html[data-design="armufa-modern"] body .sy-balance-card .mc-balance-label {font-size:12px!important;letter-spacing:.03em!important}
html[data-design="armufa-modern"] body .sy-saldo-spark {width:28px!important;height:28px!important;font-size:13px!important;border-radius:9px!important}
html[data-design="armufa-modern"] body .sy-balance-card .mc-balance-amount {margin:4px 0 6px!important;font-size:clamp(27px,7.2vw,36px)!important;line-height:1.1!important}
html[data-design="armufa-modern"] body .sy-balance-card .bal-meta {font-size:9px!important}
html[data-design="armufa-modern"] body .sy-balance-card .mc-topup-btn {min-height:29px!important;padding:5px 9px!important;font-size:10px!important;border-radius:8px!important}
html[data-design="armufa-modern"] body .sy-overview-grid {gap:8px!important;margin:0 0 14px!important}
html[data-design="armufa-modern"] body .sy-overview-card {min-height:77px!important;gap:7px!important;padding:9px!important;border-radius:15px!important;box-shadow:0 5px 15px #1f447916!important}
html[data-design="armufa-modern"] body .sy-stat-ico {flex:0 0 36px!important;width:36px!important;height:42px!important;border-radius:11px!important;font-size:16px!important}
html[data-design="armufa-modern"] body .sy-stat-info {gap:1px!important;padding-left:7px!important;border-left-width:1px!important}
html[data-design="armufa-modern"] body .sy-stat-info strong {font-size:clamp(13px,3.4vw,19px)!important;line-height:1.15!important}
html[data-design="armufa-modern"] body .sy-stat-info small {font-size:9px!important;line-height:1.25!important}
html[data-design="armufa-modern"] body .sy-recent {border-radius:17px!important;margin:0 0 15px!important;box-shadow:0 5px 17px #1c417e12!important}
html[data-design="armufa-modern"] body .sy-recent-heading {padding:11px 12px!important;gap:5px!important}
html[data-design="armufa-modern"] body .sy-recent-heading h2 {font-size:13px!important;gap:7px!important}
html[data-design="armufa-modern"] body .sy-recent-heading i {font-size:14px!important}
html[data-design="armufa-modern"] body .sy-recent-heading a {font-size:10px!important}
html[data-design="armufa-modern"] body .sy-recent-empty {min-height:155px!important;padding:17px 9px!important;gap:6px!important}
html[data-design="armufa-modern"] body .sy-recent-empty>span {width:43px!important;height:43px!important;font-size:29px!important}
html[data-design="armufa-modern"] body .sy-recent-empty p {font-size:12px!important}
html[data-design="armufa-modern"] body .sy-primary-button {min-height:36px!important;padding:7px 13px!important;font-size:11px!important;gap:5px!important}
html[data-design="armufa-modern"] body .sy-order-row {padding:10px!important;gap:7px!important}
html[data-design="armufa-modern"] body .sy-order-icon {width:32px!important;height:34px!important;flex-basis:32px!important;border-radius:9px!important}
html[data-design="armufa-modern"] body .quick-section .section-heading {margin:7px 0 9px!important}
html[data-design="armufa-modern"] body .quick-grid {gap:8px!important}
html[data-design="armufa-modern"] body .quick-link {border-radius:12px!important;min-height:62px!important;padding:10px!important}
html[data-design="armufa-modern"] body .quick-link .quick-icon {width:34px!important;height:34px!important;border-radius:9px!important}
html[data-design="armufa-modern"] body .dashboard-secondary {gap:10px!important}
html[data-design="armufa-modern"] body .api-doc-button {padding:11px!important;gap:9px!important;border-radius:12px!important}
html[data-design="armufa-modern"] body .user-promo-slider {margin-top:11px!important}
/* Admin compact navigation and panels. */
html[data-design="armufa-modern"][data-admin] body #adminMenu.ac-dialog[open] {width:min(78vw,330px)!important}
html[data-design="armufa-modern"][data-admin] body .ac-dialog-head {padding:12px 12px 9px!important}
html[data-design="armufa-modern"][data-admin] body .ac-dialog-head h2 {font-size:16px!important}
html[data-design="armufa-modern"][data-admin] body .ac-close {width:30px!important;height:30px!important}
html[data-design="armufa-modern"][data-admin] body .ac-menu-grid {gap:3px!important;padding:8px!important}
html[data-design="armufa-modern"][data-admin] body .ac-menu-card {min-height:49px!important;grid-template-columns:31px 1fr!important;gap:0 9px!important;padding:7px 9px!important;border-radius:10px!important}
html[data-design="armufa-modern"][data-admin] body .ac-menu-card .ac-menu-icon {width:29px!important;height:29px!important;border-radius:9px!important;font-size:13px!important}
html[data-design="armufa-modern"][data-admin] body .ac-menu-card strong {font-size:11px!important}
html[data-design="armufa-modern"][data-admin] body .ac-menu-card small {font-size:9px!important}
html[data-design="armufa-modern"][data-admin] body :is(.ac-hero,.adm-hero) {padding:14px!important;border-radius:15px!important}
/* API Key card remains clear and easy to operate. */
html[data-design="armufa-modern"] body .key-page {max-width:610px!important;padding-bottom:25px!important}
html[data-design="armufa-modern"] body .key-hero {gap:8px!important;padding:12px!important;border-radius:15px!important}
html[data-design="armufa-modern"] body .key-hero-icon {flex-basis:37px!important;width:37px!important;height:39px!important;font-size:16px!important;border-radius:10px!important}
html[data-design="armufa-modern"] body .key-hero-copy h2 {font-size:15px!important}
html[data-design="armufa-modern"] body .key-hero-copy p {font-size:10px!important}
html[data-design="armufa-modern"] body .akey {padding:13px!important;border-radius:14px!important}
html[data-design="armufa-modern"] body .akey-head {gap:8px!important;margin:0 0 9px!important}
html[data-design="armufa-modern"] body .akey-ico {flex-basis:35px!important;width:35px!important;height:35px!important;font-size:15px!important;border-radius:10px!important}
html[data-design="armufa-modern"] body .akey-title h2 {font-size:16px!important}
html[data-design="armufa-modern"] body .akey-state {font-size:9px!important}
html[data-design="armufa-modern"] body .akey-msg {font-size:11px!important}
html[data-design="armufa-modern"] body .akey-field input {padding:9px!important;font-size:11px!important}
html[data-design="armufa-modern"] body .akey-eye {flex-basis:38px!important;width:38px!important;border-radius:9px!important}
html[data-design="armufa-modern"] body .akey-actions {gap:7px!important;margin-top:11px!important}
html[data-design="armufa-modern"] body .akey-actions .akey-btn {min-height:38px!important;padding:8px 7px!important;font-size:11px!important;gap:5px!important}
/* Docs and Auth. */
html[data-design="armufa-modern"] body .docs-wrap {padding:11px 0 20px!important}
html[data-design="armufa-modern"] body .docs-jump-nav {padding:7px 8px!important;gap:5px!important}
html[data-design="armufa-modern"] body .docs-jump-nav a {padding:6px 9px!important;font-size:10px!important}
html[data-design="armufa-modern"] body .docs-cover {padding:15px!important;border-radius:15px!important;gap:8px!important}
html[data-design="armufa-modern"] body .docs-cover h1 {font-size:clamp(24px,6vw,30px)!important}
html[data-design="armufa-modern"] body .docs-cover p {font-size:11px!important}
html[data-design="armufa-modern"] body .docs-facts {gap:6px!important;margin:9px 0!important}
html[data-design="armufa-modern"] body .docs-facts>span {padding:8px 5px!important;font-size:9px!important;border-radius:9px!important}
html[data-design="armufa-modern"] body :is(.docs-panel,.docs-endpoint) {border-radius:12px!important}
html[data-design="armufa-modern"] body .docs-panel {padding:12px 10px!important;margin-bottom:9px!important}
html[data-design="armufa-modern"] body .docs-base-url {padding:9px!important;border-radius:10px!important}
html[data-design="armufa-modern"] body .docs-key {padding:10px!important;border-radius:10px!important}
html[data-design="armufa-modern"] body .docs-code {padding:10px!important;font-size:11px!important}
html[data-design="armufa-modern"] body .docs-code code {font-size:11px!important}
html[data-design="armufa-modern"] body .docs-endpoint>summary {padding:9px!important}
html[data-design="armufa-modern"] body .docs-endpoint .docs-endpoint-body {padding:9px!important}
html[data-design="armufa-modern"] body .auth-wrapper {margin:11px auto!important;border-radius:15px!important}
html[data-design="armufa-modern"] body .auth-card {padding:20px 15px!important}
@media(max-width:560px){
 html[data-design="armufa-modern"] body :is(.mc-page,.docs-wrap){width:calc(100% - 22px)!important}
 html[data-design="armufa-modern"] body .mc-header.sy-header .mc-logo-text {font-size:15px!important}
 html[data-design="armufa-modern"] body .sy-user-name {max-width:68px!important}
 html[data-design="armufa-modern"] body .sy-overview-card {min-height:76px!important;padding:8px!important;gap:6px!important;border-radius:14px!important}
 html[data-design="armufa-modern"] body .sy-stat-ico {flex:0 0 34px!important;width:34px!important;height:40px!important;font-size:15px!important}
 html[data-design="armufa-modern"] body .sy-stat-info {padding-left:6px!important}
 html[data-design="armufa-modern"] body .sy-stat-info strong {font-size:clamp(12px,3.4vw,17px)!important}
 html[data-design="armufa-modern"] body .sy-stat-info small {font-size:9px!important}
}
@media(max-width:360px){
 html[data-design="armufa-modern"] body .sy-user-name {max-width:50px!important}
 html[data-design="armufa-modern"] body .sy-balance-card.mc-balance-card {padding:12px!important}
 html[data-design="armufa-modern"] body .sy-overview-card {gap:4px!important;padding:6px!important}
 html[data-design="armufa-modern"] body .sy-stat-ico {flex-basis:29px!important;width:29px!important;height:35px!important;font-size:13px!important}
 html[data-design="armufa-modern"] body .sy-stat-info {padding-left:4px!important}
}
/* Public landing page: compact scale without compressing readability. */
html[data-design="armufa-modern"] body.comic-landing .nav-in {height:55px!important;gap:8px!important}
html[data-design="armufa-modern"] body.comic-landing .brand-logo {width:31px!important;height:31px!important;border-radius:9px!important}
html[data-design="armufa-modern"] body.comic-landing .brand-name {font-size:12px!important}
html[data-design="armufa-modern"] body.comic-landing .nav-actions .btn {padding:7px 10px!important;font-size:10px!important;border-radius:8px!important}
html[data-design="armufa-modern"] body.comic-landing .hero {min-height:auto!important;padding:89px 0 30px!important}
html[data-design="armufa-modern"] body.comic-landing .hero-grid {gap:23px!important}
html[data-design="armufa-modern"] body.comic-landing .eyebrow {padding:5px 9px!important;font-size:9px!important}
html[data-design="armufa-modern"] body.comic-landing .hero h1 {font-size:clamp(27px,7vw,35px)!important;line-height:1.14!important;margin:10px 0!important}
html[data-design="armufa-modern"] body.comic-landing .hero-copy>p {font-size:12px!important;line-height:1.55!important}
html[data-design="armufa-modern"] body.comic-landing .hero-actions {margin-top:14px!important;gap:6px!important}
html[data-design="armufa-modern"] body.comic-landing .hero-actions .btn {min-height:38px!important;padding:8px 11px!important;font-size:11px!important}
html[data-design="armufa-modern"] body.comic-landing .trust-row {margin-top:13px!important;gap:7px!important}
html[data-design="armufa-modern"] body.comic-landing .phone {max-width:275px!important;border-radius:22px!important;padding:13px!important}
html[data-design="armufa-modern"] body.comic-landing .phone-notch {margin:-13px auto 9px!important}
html[data-design="armufa-modern"] body.comic-landing .mini-logo {width:32px!important;height:32px!important}
html[data-design="armufa-modern"] body.comic-landing .balance-card {padding:12px!important;margin:11px 0 8px!important}
html[data-design="armufa-modern"] body.comic-landing .balance-card h3 {font-size:26px!important}
html[data-design="armufa-modern"] body.comic-landing .mini-card {padding:10px!important;border-radius:11px!important}
html[data-design="armufa-modern"] body.comic-landing :is(.features,.steps,.cta) {padding:14px 0 27px!important}
html[data-design="armufa-modern"] body.comic-landing .section-title {font-size:clamp(20px,5vw,26px)!important;margin:5px 0 9px!important}
html[data-design="armufa-modern"] body.comic-landing :is(.feature-grid,.step-grid) {gap:8px!important}
html[data-design="armufa-modern"] body.comic-landing :is(.feature,.step) {padding:12px!important;border-radius:12px!important}
html[data-design="armufa-modern"] body.comic-landing .feature-icon {width:34px!important;height:34px!important;font-size:15px!important;border-radius:9px!important}
html[data-design="armufa-modern"] body.comic-landing .cta-box {padding:22px 14px!important;border-radius:16px!important}
html[data-design="armufa-modern"] body.comic-landing .cta-box h2 {font-size:22px!important}
html[data-design="armufa-modern"] body.comic-landing .footer {padding:14px 0!important}
}