/* SmartGaulle Client UI — unified design system, all client pages */
@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{--sg-accent:#f05238;--sg-accent-dark:#d94128;--sg-navy:#14213d;--sg-ink:#172033;--sg-muted:#66748a;--sg-muted-2:#94a0b1;--sg-line:#e5eaf2;--sg-bg:#f5f7fb;--sg-card:#fff;--sg-green:#15845e;--sg-amber:#a86b08;--sg-red:#b92e2e;--sg-blue:#326ad5;--sg-radius:16px;--sg-radius-sm:11px;--sg-shadow:0 9px 28px rgba(19,33,61,.055);--sg-shadow-hover:0 16px 36px rgba(19,33,61,.095);--sg-focus:0 0 0 3px rgba(240,82,56,.15)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{background:var(--sg-bg)!important;color:var(--sg-ink)!important;font-family:'DM Sans',Inter,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}body::selection,body *::selection{background:#ffe1d9;color:#812719}body h1,body h2,body h3,body h4{font-family:Manrope,'DM Sans',sans-serif;letter-spacing:-.035em}body h1{font-weight:800}body h2{font-weight:750}body a{transition:color .16s ease,background-color .16s ease,border-color .16s ease,box-shadow .16s ease}body img{max-width:100%}
/* Main containers */
main,main.main-content,.main-content,.page-content,.dashboard-container,.container-main,.content-wrapper{min-width:0}body>main,body>div.container,body>div.page-container{max-width:1480px}main.main-content{max-width:1580px;margin:26px auto!important;padding:0 clamp(16px,3vw,42px)!important}body .max-w-7xl{max-width:1480px}body .max-w-6xl{max-width:1260px}
/* Cards and content regions */
.whmcs-card,.card,.profile-card,.panel,.invoice-card,.service-card,.domain-card,.info-card,.stat-card,.stat-card-custom,.card-custom,.bg-white.rounded-xl,.bg-white.rounded-2xl,.bg-white.rounded-lg{border:1px solid var(--sg-line)!important;border-radius:var(--sg-radius)!important;box-shadow:var(--sg-shadow)!important;overflow:hidden}body .whmcs-card{background:var(--sg-card)!important}body .profile-card{background:linear-gradient(135deg,#172747 0%,#284570 100%)!important;color:#fff!important;box-shadow:0 16px 34px rgba(20,38,74,.15)!important;border:0!important}body .profile-card h1,body .profile-card h2,body .profile-card h3,body .profile-card p,body .profile-card span{color:inherit}body .stat-card:hover,body .card:hover,body .card-custom:hover{box-shadow:var(--sg-shadow-hover)!important}body .bg-whmcs-red,body .bg-brand-red,body .bg-\[\#ff2a00\],body .bg-\[\#f45135\]{background-color:var(--sg-accent)!important}body .text-whmcs-red,body .text-brand-red,body .text-\[\#ff2a00\]{color:var(--sg-accent)!important}body .border-whmcs-red{border-color:var(--sg-accent)!important}
/* Top bars / side navigation from older screens */
body>header,body .topbar,body .top-bar,body .navbar,body .nav-bar,body .header-wrapper,body .app-header{background:rgba(255,255,255,.94)!important;border-color:var(--sg-line)!important;box-shadow:0 4px 22px rgba(19,33,61,.045)}body .header-wrapper{top:12px!important;padding:0 clamp(12px,2vw,32px)!important}body .header-premium{background:rgba(255,255,255,.96)!important;backdrop-filter:blur(18px);border:1px solid var(--sg-line)!important;border-radius:18px!important;box-shadow:var(--sg-shadow)!important;height:auto!important;min-height:64px;padding:9px 17px!important}body .brand-logo,body .brand{color:var(--sg-navy)!important}body .nav-link-pill{border-radius:10px!important;font-size:13px!important;font-weight:650!important;padding:10px 12px!important}body .nav-link-pill:hover,body .nav-item-pill:hover .nav-link-pill{background:#f4f6fa!important;color:var(--sg-accent)!important;box-shadow:none!important}body .dropdown-clean{border:1px solid var(--sg-line)!important;border-radius:14px!important;box-shadow:0 18px 38px rgba(19,33,61,.12)!important}body .dropdown-item-clean:hover{background:#f5f7fb!important;color:var(--sg-accent)!important}
body aside{scrollbar-width:thin}body>aside,body aside.w-\[110px\],body .sidebar,body .side{border-color:var(--sg-line)!important}body aside.w-\[110px\]{width:220px!important;align-items:stretch!important;padding:18px 12px!important;background:#fff!important;box-shadow:8px 0 28px rgba(20,33,61,.025)}body aside.w-\[110px\] img{width:42px!important;height:42px!important;margin:0 auto 8px}body aside.w-\[110px\] a{max-width:100%;border-radius:11px;transition:background .15s ease,color .15s ease}body aside.w-\[110px\] a:hover{background:#fff1ed!important;color:var(--sg-accent)!important}body aside.w-\[110px\] .active,body aside.w-\[110px\] a[aria-current="page"]{background:#fff1ed!important;color:var(--sg-accent)!important}body .side{background:#fff!important;border-right:1px solid var(--sg-line)!important}body .side .nav a,body .sidebar a{border-radius:10px}body .side .nav a:hover,body .sidebar a:hover{background:#f5f7fb;color:var(--sg-accent)}
/* Form system */
body label{color:#46536a;font-size:13px;font-weight:650}body input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]),body select,body textarea,.input-custom{font:inherit;color:var(--sg-ink);border:1px solid #dce3ed;border-radius:var(--sg-radius-sm);background:#fff;min-height:42px;transition:border-color .15s ease,box-shadow .15s ease}body input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]),body select{padding:10px 12px}body textarea{padding:12px;min-height:112px;resize:vertical}body input:focus,body select:focus,body textarea:focus,.input-custom:focus{outline:0!important;border-color:#f2a094!important;box-shadow:var(--sg-focus)!important}body input::placeholder,body textarea::placeholder{color:#9aa5b5}body input[type=checkbox],body input[type=radio]{accent-color:var(--sg-accent)}body fieldset{border:1px solid var(--sg-line);border-radius:14px;padding:18px}
/* Buttons — preserve action-specific colors when already semantically set */
body button,body .btn,body input[type=submit],body a.btn,body button[type=submit]{font-family:inherit;transition:transform .15s ease,box-shadow .15s ease,background .15s ease;border-radius:10px}body button:hover,body .btn:hover,body input[type=submit]:hover{transform:translateY(-1px)}body button:focus-visible,body .btn:focus-visible,body a:focus-visible{outline:3px solid rgba(240,82,56,.3);outline-offset:2px}body .btn-primary,body .btn-danger,body button[type=submit].primary{box-shadow:0 5px 12px rgba(240,82,56,.12)}body a.text-whmcs-red:hover,body a.text-brand-red:hover{color:var(--sg-accent-dark)!important}
/* Tables / lists */
body table{width:100%;border-collapse:separate;border-spacing:0;font-variant-numeric:tabular-nums}body table thead th{background:#f8f9fc;color:#778399;font-size:10px;font-weight:750;letter-spacing:.07em;text-transform:uppercase;border-bottom:1px solid var(--sg-line)}body table th,body table td{padding:13px 14px}body table tbody td{border-bottom:1px solid #edf0f5}body table tbody tr:last-child td{border-bottom:0}body table tbody tr:hover{background:#fafbfe}body .overflow-x-auto{border-radius:12px;max-width:100%}
/* Status badges and notices */
body .badge,body .status,body .status-badge,body .status-pill,body .status-pill-global,body .trend-badge{border-radius:999px;font-size:11px;font-weight:750;letter-spacing:0;display:inline-flex;align-items:center;gap:6px}body .status-pill-global{border:1px solid var(--sg-line);background:#fff;padding:8px 12px}body .alert,body .notice,body .message,body .flash-message,.alert-success,.alert-danger,.alert-warning,.alert-info{border-radius:12px;padding:13px 15px;border:1px solid transparent;line-height:1.55}body .alert-success,.alert-success{background:#ecfdf4;border-color:#c7f0d9;color:#176b4a}body .alert-danger,.alert-danger{background:#fff0ee;border-color:#ffd4cd;color:#a22e24}body .alert-warning,.alert-warning{background:#fff8e8;border-color:#f4e4b5;color:#87590b}body .alert-info,.alert-info{background:#eef4ff;border-color:#d7e4ff;color:#294f9a}
/* Focused enhancements for legacy custom pages */
body .step-content,body .info-row,body .method-card,body .invoice-summary,body .payment-method-card{border-color:var(--sg-line)!important;border-radius:13px!important}body .method-card.active,body .method-card:hover{border-color:#f05238!important;background:#fff8f6!important}body .input-custom{padding:11px 13px!important;width:100%}body .info-label{color:var(--sg-muted)!important;font-weight:650}body .info-value{color:var(--sg-ink)!important;font-weight:700}body .text-gray-500,body .text-slate-500{color:#68758a!important}body .text-gray-400,body .text-slate-400{color:#8d99ab!important}body .text-slate-800,body .text-gray-900{color:var(--sg-ink)!important}body .bg-slate-50{background-color:#f7f9fc!important}body .border-slate-200,body .border-gray-200{border-color:var(--sg-line)!important}body .rounded-xl,body .rounded-2xl{border-radius:15px!important}
/* Tables that sit directly inside cards should scroll on narrow screens */
body .table-responsive{overflow-x:auto}body .table-responsive table{min-width:640px}
/* Footer */
body footer,body .footer,body .footer-fullwidth{border-color:var(--sg-line)!important;color:#7b8799!important}body .footer-fullwidth{background:#fff!important;padding:20px clamp(16px,3vw,40px)!important}body .footer-chip{background:#f5f7fb!important}
/* Motion preferences */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
@media(max-width:1000px){body aside.w-\[110px\]{width:72px!important;padding:14px 7px!important}body aside.w-\[110px\] img{width:36px!important;height:36px!important}body aside.w-\[110px\] span,body aside.w-\[110px\] .sidebar-label{display:none!important}body .header-wrapper{top:0!important;padding:0 10px!important}body .header-premium{border-radius:0 0 15px 15px!important;flex-wrap:wrap;gap:8px}body .nav-pills{flex:1;overflow-x:auto;padding-left:0}body .nav-link-pill{padding:9px 10px!important;white-space:nowrap}}
@media(max-width:760px){body{font-size:14px}main.main-content,.main-content{padding:0 13px!important;margin:16px auto!important}body h1{font-size:clamp(22px,6vw,30px)!important;line-height:1.2}body h2{font-size:clamp(18px,4.5vw,23px)!important}body .p-8{padding:1.1rem!important}body .p-6{padding:1rem!important}body .px-8{padding-left:1rem!important;padding-right:1rem!important}body .px-6{padding-left:1rem!important;padding-right:1rem!important}body .mb-8{margin-bottom:1.25rem!important}body .stats-grid,body .db-content-row{grid-template-columns:1fr!important}body .overflow-x-auto table{min-width:620px}body .header-premium{gap:7px}body .brand-logo{border-right:0!important;padding-right:4px!important}body .user-chip span{display:none}body .footer-fullwidth{flex-wrap:wrap;gap:12px}body .grid{min-width:0}body .grid>*{min-width:0}}
@media(max-width:460px){body .header-premium{padding:8px 10px!important}body .custom-logo{height:28px!important}body button,body .btn,body input[type=submit]{max-width:100%}body .flex.gap-4{gap:.6rem!important}}