/* SmartGaulle — visual system v4. Loaded after page-specific styles. */
:root{--sg4-ink:#182640;--sg4-muted:#72819a;--sg4-line:#e6ebf3;--sg4-bg:#f5f7fb;--sg4-card:#fff;--sg4-navy:#111b30;--sg4-accent:#f05238;--sg4-blue:#526ee5;--sg4-green:#16856b;--sg4-shadow:0 10px 28px rgba(20,35,63,.055);--sg4-shadow-hover:0 17px 38px rgba(20,35,63,.1)}
body:not(.sg-dashboard){font-family:'DM Sans',Inter,system-ui,-apple-system,'Segoe UI',sans-serif!important;background:#f5f7fb!important;color:#182640!important;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body:not(.sg-dashboard) h1,body:not(.sg-dashboard) h2,body:not(.sg-dashboard) h3,body:not(.sg-dashboard) h4{font-family:Manrope,'DM Sans',sans-serif;letter-spacing:-.035em}
body:not(.sg-dashboard) a{transition:color .17s ease,background-color .17s ease,border-color .17s ease,box-shadow .17s ease}
body:not(.sg-dashboard) ::selection{background:#ffe0d8;color:#8a2a1e}
/* Newer client portal pages */
.pp-body{background:radial-gradient(circle at 90% 0%,#eef2ff 0,transparent 29%),#f5f7fb!important;color:var(--sg4-ink)!important}
.pp-shell{grid-template-columns:258px minmax(0,1fr)!important;gap:0!important}
.pp-sidebar{position:sticky!important;top:0!important;height:100vh!important;min-height:100vh!important;background:linear-gradient(180deg,#111b30 0%,#15213a 100%)!important;border-right:0!important;box-shadow:12px 0 34px rgba(15,28,50,.035);padding:23px 15px 16px!important;gap:24px!important}
.pp-brand{border-bottom:1px solid rgba(255,255,255,.09)!important;padding:2px 10px 21px!important}
.pp-brand img{width:42px!important;height:42px!important;border-radius:13px!important;box-shadow:0 5px 18px #0002}
.pp-nav-label{color:#7686a4!important;font-size:9px!important;letter-spacing:1.7px!important}
.pp-nav{gap:5px!important}
.pp-nav a{font-size:11px!important;border-radius:11px!important;padding:11px 12px!important;color:#aebbd0!important}
.pp-nav a:hover{background:#ffffff0e!important;color:#fff!important;transform:translateX(2px)}
.pp-nav a.active{color:#fff!important;background:linear-gradient(100deg,#f052382b,#ffffff0c)!important;box-shadow:inset 3px 0 0 #f05238!important}
.pp-help{border:1px solid #ffffff18!important;background:linear-gradient(140deg,#ffffff0d,#ffffff05)!important;border-radius:15px!important}
.pp-help a{background:#ffffff10!important;border:1px solid #ffffff0c!important}
.pp-main{background:transparent!important;min-width:0!important}
.pp-topbar{height:74px!important;background:#ffffffd9!important;backdrop-filter:blur(18px);border-bottom:1px solid #e5eaf2!important;padding:0 clamp(18px,3vw,40px)!important}
.pp-icon-link{border-color:#e3e9f2!important;border-radius:11px!important;box-shadow:0 2px 5px #1c2d4c05}
.pp-avatar{border-radius:11px!important}
.pp-content{padding:29px clamp(18px,3vw,40px) 38px!important;max-width:1660px!important}
.pp-page-head{margin-bottom:20px!important}
.pp-page-head h1{font-size:clamp(26px,2.7vw,33px)!important;color:#182640!important;letter-spacing:-1.1px!important}
.pp-page-head p{font-size:11px!important;line-height:1.8!important;max-width:760px}
.pp-eyebrow{font-size:9px!important;letter-spacing:1.7px!important}
.pp-btn{border-radius:11px!important;padding:11px 14px!important;font-size:10px!important;background:#f05238!important;box-shadow:0 6px 16px #f052382a!important}
.pp-btn:hover{background:#d9432b!important;transform:translateY(-1px)}
.pp-btn.secondary{background:#fff!important;color:#33415b!important;border:1px solid #e3e9f2!important;box-shadow:none!important}
.pp-btn.secondary:hover{border-color:#c9d3e2!important;background:#fafbfe!important}
.pp-stats{gap:12px!important;margin-bottom:16px!important}
.pp-stat{border:1px solid #e7ecf4!important;border-radius:17px!important;box-shadow:0 8px 25px rgba(19,33,61,.045)!important;padding:17px 18px!important;transition:transform .18s,box-shadow .18s}
.pp-stat:hover{transform:translateY(-2px);box-shadow:0 15px 34px rgba(19,33,61,.085)!important}
.pp-stat-top{font-size:9px!important}
.pp-stat-icon{width:34px!important;height:34px!important;border-radius:11px!important}
.pp-stat-value{font-size:27px!important;color:#182640!important;margin:10px 0 3px!important}
.pp-stat-note{font-size:9px!important}
.pp-panel{border:1px solid #e6ebf3!important;border-radius:18px!important;box-shadow:0 8px 25px rgba(19,33,61,.045)!important;overflow:hidden}
.pp-panel-head{padding:17px 19px!important;border-bottom:1px solid #eef2f7!important}
.pp-panel-head h2,.pp-panel-head h3{font-size:13px!important;letter-spacing:-.25px!important}
.pp-panel-head p{font-size:9px!important;line-height:1.65!important}
.pp-panel-body{padding:18px 19px!important}
.pp-service-grid{gap:13px!important}
.pp-service-card{border-radius:16px!important;border-color:#e8edf4!important;padding:17px!important;box-shadow:0 6px 20px rgba(19,33,61,.035)!important}
.pp-service-card:hover{border-color:#f0b4a8!important;box-shadow:0 15px 32px rgba(19,33,61,.075)!important;transform:translateY(-2px)}
.pp-service-kind-icon{width:41px!important;height:41px!important;border-radius:12px!important}
.pp-service-kind h3{font-size:12px!important}
.pp-service-kind p{font-size:9px!important}
.pp-service-meta{background:#f7f9fd!important;border:1px solid #edf1f7!important;border-radius:12px!important;padding:13px!important;gap:12px!important}
.pp-service-meta small{font-size:8px!important;letter-spacing:.02em}
.pp-service-meta strong{font-size:10px!important}
.pp-status{font-size:8px!important;padding:6px 8px!important}
.pp-input,.pp-select,.pp-textarea{font-family:inherit!important;border-color:#dfe6f0!important;border-radius:10px!important;font-size:11px!important;padding:11px 12px!important}
.pp-input:focus,.pp-select:focus,.pp-textarea:focus{border-color:#c2cef7!important;box-shadow:0 0 0 3px #526ee516!important}
.pp-label{font-size:10px!important;color:#41516b!important}
.pp-filter{font-size:9px!important;padding:8px 11px!important}
.pp-filter.active{background:#fff0ec!important;color:#c53d28!important;border-color:#f9d1c7!important}
.pp-request-row{padding:13px 0!important}
.pp-request-row strong{font-size:11px!important}
.pp-request-row small{font-size:9px!important}
.pp-empty{font-size:10px!important;padding:32px 20px!important}
.pp-callout{border-radius:13px!important;font-size:10px!important}
.pp-footer{font-size:9px!important;padding-top:22px!important}
/* Original Tailwind-style pages: keep the existing PHP forms, refresh their visual shell. */
body:not(.sg-dashboard) aside.w-\[110px\]{width:236px!important;align-items:stretch!important;background:linear-gradient(180deg,#111b30,#15213a)!important;border:0!important;padding:21px 13px!important;box-shadow:12px 0 34px rgba(15,28,50,.035)}
body:not(.sg-dashboard) aside.w-\[110px\] .mb-6{padding:0 7px 18px;border-bottom:1px solid #ffffff16;margin-bottom:9px!important;display:flex;align-items:center;justify-content:flex-start}
body:not(.sg-dashboard) aside.w-\[110px\] img{width:41px!important;height:41px!important;background:#fff;border-radius:12px;padding:4px}
body:not(.sg-dashboard) aside.w-\[110px\] nav{padding:0 3px!important;gap:4px!important}
body:not(.sg-dashboard) aside.w-\[110px\] nav a{min-height:43px!important;display:flex!important;flex-direction:row!important;justify-content:flex-start!important;gap:11px!important;padding:10px 11px!important;border-radius:11px!important;color:#aebbd0!important;background:transparent!important;font-size:11px!important;text-align:left!important;position:relative}
body:not(.sg-dashboard) aside.w-\[110px\] nav a span{font-size:11px!important;font-weight:650!important;display:inline!important;color:inherit!important}
body:not(.sg-dashboard) aside.w-\[110px\] nav a svg{width:17px!important;height:17px!important;margin:0!important;flex-shrink:0}
body:not(.sg-dashboard) aside.w-\[110px\] nav a:hover{background:#ffffff0e!important;color:#fff!important}
body:not(.sg-dashboard) aside.w-\[110px\] nav a.text-whmcs-red,body:not(.sg-dashboard) aside.w-\[110px\] nav a.text-brand-red{background:linear-gradient(100deg,#f052382b,#ffffff0c)!important;color:#fff!important;box-shadow:inset 3px 0 0 #f05238!important}
body:not(.sg-dashboard) aside.w-\[110px\] nav a .absolute{display:none!important}
body:not(.sg-dashboard) aside.w-\[110px\] .border-t{border-color:#ffffff1a!important}
body:not(.sg-dashboard) aside.w-\[110px\] nav a.text-slate-500{color:#aebbd0!important}
body:not(.sg-dashboard) .side{background:linear-gradient(180deg,#111b30,#15213a)!important;border-right:0!important;color:#d9e2f1!important;box-shadow:12px 0 34px rgba(15,28,50,.035)}
body:not(.sg-dashboard) .side .brand,body:not(.sg-dashboard) .side .brand span{color:#fff!important}
body:not(.sg-dashboard) .side .nav a{color:#aebbd0!important;border-radius:11px!important}
body:not(.sg-dashboard) .side .nav a.active,body:not(.sg-dashboard) .side .nav a:hover{color:#fff!important;background:#ffffff0d!important}
body:not(.sg-dashboard) .side .nav a.active{box-shadow:inset 3px 0 0 #f05238!important}
body:not(.sg-dashboard) .layout main,body:not(.sg-dashboard) .layout>main{background:#f5f7fb!important;min-width:0}
body:not(.sg-dashboard) .layout .top,body:not(.sg-dashboard) .layout main>header{background:#ffffffdc!important;backdrop-filter:blur(16px);border-color:#e6ebf3!important}
body:not(.sg-dashboard) .layout .wrap,body:not(.sg-dashboard) .layout .content{max-width:1560px!important}
body:not(.sg-dashboard) .layout .wrap h1{color:#182640!important;font-family:Manrope,sans-serif!important;letter-spacing:-1px!important}
/* Shared surface treatments for old pages which are already included in the portal. */
body:not(.sg-dashboard) .glass-card{border:1px solid #e5eaf2!important;border-radius:23px!important;box-shadow:0 22px 60px rgba(19,33,61,.085),0 2px 8px #15284808!important;background:rgba(255,255,255,.95)!important;backdrop-filter:blur(16px)}
body:not(.sg-dashboard) .profile-card{border-radius:20px!important;box-shadow:0 17px 40px rgba(17,31,54,.13)!important}
body:not(.sg-dashboard) .whmcs-card,body:not(.sg-dashboard) .card,body:not(.sg-dashboard) .profile-card,body:not(.sg-dashboard) .panel,body:not(.sg-dashboard) .invoice-card,body:not(.sg-dashboard) .service-card,body:not(.sg-dashboard) .domain-card,body:not(.sg-dashboard) .info-card,body:not(.sg-dashboard) .stat-card,body:not(.sg-dashboard) .stat-card-custom,body:not(.sg-dashboard) .card-custom{border-radius:16px!important;border-color:#e6ebf3!important;box-shadow:0 8px 25px rgba(19,33,61,.045)!important}
body:not(.sg-dashboard) input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]),body:not(.sg-dashboard) select,body:not(.sg-dashboard) textarea{border-radius:10px!important;border-color:#dfe6f0!important}
body:not(.sg-dashboard) button:focus-visible,body:not(.sg-dashboard) .btn:focus-visible,body:not(.sg-dashboard) a:focus-visible{outline:3px solid #526ee545!important;outline-offset:2px}
body:not(.sg-dashboard) table thead th{background:#f6f8fc!important;color:#7a879d!important;font-size:9px!important;letter-spacing:.08em!important;padding:13px 14px!important}
body:not(.sg-dashboard) table tbody td{font-size:11px;border-color:#edf1f6!important}
body:not(.sg-dashboard) .footer-fullwidth{border-top:1px solid #e6ebf3!important;background:#fff!important}
@media(max-width:1200px){.pp-shell{grid-template-columns:226px minmax(0,1fr)!important}.pp-content{padding:25px 22px 33px!important}}
@media(max-width:1000px){body:not(.sg-dashboard) aside.w-\[110px\]{width:76px!important;padding:14px 7px!important}body:not(.sg-dashboard) aside.w-\[110px\] .mb-6{justify-content:center;padding:0 0 13px}body:not(.sg-dashboard) aside.w-\[110px\] nav a{justify-content:center!important;padding:12px 7px!important;flex-direction:column!important;gap:5px!important}body:not(.sg-dashboard) aside.w-\[110px\] nav a span{display:none!important}body:not(.sg-dashboard) aside.w-\[110px\] nav a svg{width:20px!important;height:20px!important}body:not(.sg-dashboard) aside.w-\[110px\] nav a .absolute{display:none!important}}
@media(max-width:760px){.pp-shell{display:block!important}.pp-sidebar{position:relative!important;height:auto!important;min-height:0!important;padding:14px 13px 11px!important;gap:12px!important}.pp-brand{padding:0 3px 12px!important}.pp-nav-label,.pp-help{display:none!important}.pp-nav{display:flex!important;gap:5px!important;overflow-x:auto!important;padding-bottom:2px;scrollbar-width:none}.pp-nav::-webkit-scrollbar{display:none}.pp-nav a{padding:10px 11px!important;flex-shrink:0!important;border:1px solid #ffffff0a!important;font-size:10px!important}.pp-nav a.active{box-shadow:inset 0 -3px 0 #f05238!important}.pp-topbar{height:62px!important;padding:0 14px!important}.pp-content{padding:22px 13px 28px!important}.pp-page-head{align-items:flex-start!important;flex-direction:column!important;gap:13px!important}.pp-page-head .pp-btn{width:100%}.pp-stats{gap:9px!important}.pp-stat{padding:13px!important}.pp-stat-value{font-size:24px!important}.pp-panel-head{padding:14px!important}.pp-panel-body{padding:13px!important}.pp-service-grid{grid-template-columns:1fr!important}.pp-form-grid{grid-template-columns:1fr!important}.pp-form-grid .span-2{grid-column:auto!important}.pp-request-row{grid-template-columns:1fr!important;align-items:start!important;gap:8px!important}.pp-service-actions .pp-btn{flex:1}.pp-search-row>*{width:100%}body:not(.sg-dashboard) aside.w-\[110px\]{width:100%!important;height:auto!important;min-height:0!important;position:relative!important;flex-direction:row!important;align-items:center!important;padding:8px 12px!important;overflow-x:auto!important;gap:8px!important;border-radius:0!important}body:not(.sg-dashboard) aside.w-\[110px\] .mb-6{margin:0!important;padding:0 9px 0 0!important;border:0!important;flex-shrink:0}body:not(.sg-dashboard) aside.w-\[110px\] img{width:33px!important;height:33px!important}body:not(.sg-dashboard) aside.w-\[110px\] nav{flex-direction:row!important;display:flex!important;width:auto!important;flex:1;gap:4px!important;overflow-x:auto!important;padding:0!important}body:not(.sg-dashboard) aside.w-\[110px\] nav a{width:auto!important;min-width:41px!important;min-height:37px!important;flex-direction:row!important;padding:8px!important}body:not(.sg-dashboard) aside.w-\[110px\] nav a span{display:none!important}body:not(.sg-dashboard) aside.w-\[110px\] nav a svg{width:17px!important;height:17px!important}body:not(.sg-dashboard) aside.w-\[110px\] .mt-auto{display:none!important}body.flex.h-screen.overflow-hidden{height:auto!important;min-height:100vh!important;overflow:auto!important}body.flex.h-screen.overflow-hidden>.flex-1.flex.flex-col.h-full.overflow-hidden{height:auto!important;min-height:calc(100vh - 54px)!important;overflow:visible!important}body:not(.sg-dashboard) .layout{display:block!important}body:not(.sg-dashboard) .layout .side{width:100%!important;height:auto!important;min-height:0!important;position:relative!important;padding:12px!important}body:not(.sg-dashboard) .layout .side .nav{display:flex!important;overflow-x:auto!important;gap:4px!important}body:not(.sg-dashboard) .layout .side .nav a{white-space:nowrap!important;padding:9px!important;font-size:10px!important}body:not(.sg-dashboard) .layout main .wrap{padding:20px 14px!important}}
@media(prefers-reduced-motion:reduce){body:not(.sg-dashboard) *,body:not(.sg-dashboard) *:before,body:not(.sg-dashboard) *:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}