/* GlobalServic Panel (Frontend) — panel.css
Notes:
- Pure CSS only (no non-ASCII / Urdu text inside).
- Designed to work even if some HTML differs between tabs.
*/
:root {
--gs-bg: #edf3f9;
--gs-surface: #ffffff;
--gs-surface-2: #f4f8fc;
--gs-surface-3: #edf4fb;
--gs-border: #d8e2ee;
--gs-soft-border: rgba(0,24,134,.10);
--gs-hover-surface: #eff5fb;
--gs-text: #0f172a;
--gs-muted: #5f6b7a;
/* Brand (GlobalServic) */
--gs-primary: #fd5f21; /* deep orange */
--gs-primary-2: #001886; /* deep blue */
--gs-blue-dark: #000066; /* extra deep blue */
--gs-orange-light: #fd9f3e; /* light orange */
--gs-red: #ce1126;
--gs-gold: #fdb813;
--gs-primary-soft: rgba(253,95,33,.12);
--gs-panel-backdrop: linear-gradient(180deg, var(--gs-bg) 0%, #f7fbff 100%);
--gs-card-glow: 0 18px 40px rgba(0,24,134,.08);
--gs-radius: 14px;
--gs-radius-sm: 10px;
--gs-shadow: 0 10px 26px rgba(2, 8, 23, .08);
--gs-shadow-soft: 0 8px 18px rgba(2, 8, 23, .06);
--gs-gap: 16px;
}
/* Base reset inside panel only */
.gs-panel-shell,
.gs-panel-shell * {
box-sizing: border-box;
}
.gs-panel-shell {
width: 100%;
max-width: 1200px;
margin: 0 auto !important;
padding: 0 !important;
background: transparent !important;
}
/* If theme injects spacing before the panel */
.gs-panel-shell,
.gs-panel-shell .gs-layout {
margin-top: 0 !important;
}
/* Main layout */
.gs-layout {
display: grid;
grid-template-columns: var(--gs-sidebar-w) minmax(0, 1fr);
gap: var(--gs-gap);
align-items: start;
padding: 0 !important;
}
/* Sidebar */
.gs-sidebar {
background: var(--gs-surface);
border: 1px solid var(--gs-border);
border-radius: var(--gs-radius);
box-shadow: var(--gs-shadow-soft);
overflow: hidden;
position: sticky;
top: var(--gs-top-offset);
height: calc(100vh - var(--gs-top-offset));
display: flex;
flex-direction: column;
}
/* Sidebar header (logo area) */
.gs-brand {
padding: 14px 14px 12px;
border-bottom: 1px solid var(--gs-border);
background: var(--gs-surface);
position: sticky;
top: 0;
z-index: 2;
}
/* If you later add ![]()
it will be used */
.gs-brand-logo {
display: block;
max-width: 160px;
width: 100%;
height: auto;
margin: 0 auto;
object-fit: contain;
}
/* Title/subtitle fallback (if no logo image is present) */
.gs-brand-title {
font-weight: 800;
color: var(--gs-primary-2);
font-size: 18px;
line-height: 1.1;
}
.gs-brand-sub {
margin-top: 6px;
font-size: 12px;
color: var(--gs-muted);
}
/* Sidebar nav */
.gs-nav {
padding: 10px;
overflow: auto;
}
.gs-nav a {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 12px;
border-radius: 12px;
color: var(--gs-primary-2);
text-decoration: none;
font-weight: 700;
font-size: 14px;
border: 1px solid transparent;
transition: .15s ease;
}
.gs-nav a:hover {
background: #f3f6fb;
border-color: #eef2f7;
}
.gs-nav a.active {
background: var(--gs-primary-soft);
border-color: rgba(255, 122, 26, .35);
color: var(--gs-primary-2);
}
/* Content area */
.gs-main {
min-width: 0;
}
/* Topbar / Page header (sticky) */
.gs-topbar {
background: var(--gs-surface);
border: 1px solid var(--gs-border);
border-radius: var(--gs-radius);
box-shadow: var(--gs-shadow-soft);
padding: 10px 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
position: sticky;
top: var(--gs-top-offset);
z-index: 10;
}
/* Left page title */
.gs-topbar .gs-page-title,
.gs-topbar h1,
.gs-topbar h2 {
margin: 0;
font-size: 16px;
font-weight: 900;
color: var(--gs-primary-2);
}
/* Right stats row */
.gs-topbar .gs-topbar-right {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: nowrap;
justify-content: flex-end;
color: var(--gs-primary-2);
font-weight: 700;
}
.gs-topbar .gs-topbar-right span {
white-space: nowrap;
}
/* Tabs container/card */
.gs-card {
background: var(--gs-surface);
border: 1px solid var(--gs-border);
border-radius: var(--gs-radius);
box-shadow: var(--gs-shadow-soft);
padding: 16px;
margin-top: var(--gs-gap);
}
.gs-card h2 {
margin: 0 0 14px;
color: var(--gs-primary-2);
font-weight: 900;
font-size: 20px;
}
/* Make the big duplicate page title (inside content) smaller/clean */
.gs-main h1 {
margin: 0 0 12px;
color: var(--gs-primary-2);
font-weight: 900;
font-size: 22px;
line-height: 1.15;
}
/* Utilities */
.gs-muted {
color: var(--gs-muted);
}
.gs-row {
display: flex;
gap: 12px;
align-items: center;
flex-wrap: nowrap;
}
.gs-spacer {
height: 12px;
}
.gs-divider {
height: 1px;
background: var(--gs-border);
margin: 14px 0;
}
/* Stats grid */
.gs-grid {
display: grid;
gap: 12px;
}
.gs-grid-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.gs-stat {
border: 1px solid var(--gs-border);
border-radius: 16px;
padding: 14px;
background: var(--gs-surface);
}
.gs-stat-label {
font-size: 12px;
color: var(--gs-muted);
font-weight: 800;
}
.gs-stat-val {
margin-top: 6px;
font-size: 22px;
color: var(--gs-primary-2);
font-weight: 900;
}
/* Tables */
.gs-table-wrap {
width: 100%;
overflow: auto;
border-radius: 14px;
border: 1px solid var(--gs-border);
}
.gs-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
min-width: 760px;
background: var(--gs-surface);
}
.gs-table th,
.gs-table td {
padding: 12px 12px;
border-bottom: 1px solid var(--gs-border);
font-size: 13px;
color: #0f172a;
vertical-align: middle;
}
.gs-table th {
background: #f6f8fc;
font-weight: 900;
color: var(--gs-primary-2);
position: sticky;
top: 0;
z-index: 1;
}
.gs-table tr:last-child td {
border-bottom: 0;
}
/* Badges */
.gs-badge {
display: inline-flex;
align-items: center;
padding: 6px 10px;
border-radius: 999px;
background: #eef2ff;
color: #1e3a8a;
font-weight: 900;
font-size: 12px;
border: 1px solid rgba(30, 58, 138, .18);
}
/* Buttons */
.gs-btn,
.gs-btn:visited {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 14px;
border-radius: 12px;
border: 1px solid rgba(255, 122, 26, .45);
background: var(--gs-primary);
color: #fff;
font-weight: 900;
text-decoration: none;
cursor: pointer;
transition: .15s ease;
}
.gs-btn:hover {
filter: brightness(.98);
transform: translateY(-1px);
}
.gs-btn:active {
transform: translateY(0);
}
.gs-btn.secondary {
background: #fff;
color: var(--gs-primary-2);
border-color: var(--gs-border);
}
.gs-btn.secondary:hover {
background: #f6f8fc;
}
/* Forms */
.gs-field {
display: grid;
gap: 6px;
margin: 12px 0;
}
.gs-label {
font-size: 13px;
font-weight: 900;
color: var(--gs-primary-2);
}
.gs-input,
.gs-select,
.gs-textarea,
.gs-main input[type="text"],
.gs-main input[type="number"],
.gs-main input[type="email"],
.gs-main input[type="url"],
.gs-main select,
.gs-main textarea {
width: 100%;
background: #fff;
border: 1px solid var(--gs-border);
border-radius: 14px;
padding: 12px 14px;
font-size: 14px;
color: var(--gs-text);
outline: none;
transition: .15s ease;
}
.gs-main select,
.gs-select {
height: 46px;
line-height: 46px;
padding-top: 0;
padding-bottom: 0;
}
.gs-main textarea,
.gs-textarea {
min-height: 120px;
resize: vertical;
}
.gs-input:focus,
.gs-select:focus,
.gs-textarea:focus,
.gs-main input:focus,
.gs-main select:focus,
.gs-main textarea:focus {
border-color: rgba(255, 122, 26, .65);
box-shadow: 0 0 0 4px rgba(255, 122, 26, .14);
}
/* Fix vertical alignment inside select (category/service cut-off issue) */
.gs-main select option {
padding: 8px 10px;
}
/* Alerts */
.gs-alert {
border: 1px solid var(--gs-border);
background: #f8fafc;
border-radius: 14px;
padding: 12px 14px;
font-weight: 800;
color: var(--gs-primary-2);
}
.gs-alert.success {
border-color: rgba(34, 197, 94, .35);
background: rgba(34, 197, 94, .10);
}
.gs-alert.danger {
border-color: rgba(239, 68, 68, .35);
background: rgba(239, 68, 68, .08);
}
.gs-alert.info {
border-color: rgba(59, 130, 246, .35);
background: rgba(59, 130, 246, .08);
}
/* ------------------------------
Network selector (New Order)
Supports different markup versions.
-------------------------------- */
/* Common wrapper if present */
.gs-network-scroller,
.gs-networks,
.gs-network-list {
display: flex;
align-items: center;
gap: 10px;
overflow-x: auto;
overflow-y: hidden;
padding: 6px 2px 10px;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.gs-network-scroller::-webkit-scrollbar,
.gs-networks::-webkit-scrollbar,
.gs-network-list::-webkit-scrollbar {
height: 8px;
}
.gs-network-scroller::-webkit-scrollbar-thumb,
.gs-networks::-webkit-scrollbar-thumb,
.gs-network-list::-webkit-scrollbar-thumb {
background: #d9e2ef;
border-radius: 999px;
}
/* Buttons / pills */
.gs-network-btn,
.gs-network-pill,
.gs-networks button,
.gs-network-list button {
display: inline-flex;
align-items: center;
gap: 10px;
height: 44px;
padding: 0 14px;
border-radius: 999px;
background: #fff !important;
border: 1px solid var(--gs-border) !important;
color: var(--gs-primary-2) !important;
font-weight: 900;
font-size: 14px;
cursor: pointer;
white-space: nowrap;
user-select: none;
transition: .15s ease;
}
.gs-network-btn:hover,
.gs-network-pill:hover,
.gs-networks button:hover,
.gs-network-list button:hover {
border-color: rgba(255, 122, 26, .45) !important;
box-shadow: 0 8px 16px rgba(2, 8, 23, .06);
}
.gs-network-btn.is-active,
.gs-network-pill.is-active,
.gs-networks button.active,
.gs-network-list button.active {
background: var(--gs-primary-soft) !important;
border-color: rgba(255, 122, 26, .55) !important;
}
/* Small circular icon container */
.gs-network-btn .gs-icon,
.gs-network-pill .gs-icon,
.gs-networks button .gs-icon,
.gs-network-list button .gs-icon {
width: 24px;
height: 24px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #eef2f7;
color: var(--gs-primary-2);
font-weight: 900;
font-size: 12px;
flex: 0 0 24px;
overflow: hidden;
}
/* If you use ![]()
icons */
.gs-network-btn .gs-icon img,
.gs-network-pill .gs-icon img,
.gs-networks button .gs-icon img,
.gs-network-list button .gs-icon img {
width: 18px;
height: 18px;
object-fit: contain;
display: block;
}
/* Hide doubled-letter look from old styles if any */
.gs-network-btn::before,
.gs-network-pill::before {
content: none !important;
}
/* Prev/Next arrows (if you render them) */
.gs-network-nav {
display: flex;
align-items: center;
gap: 10px;
}
.gs-network-nav .gs-nav-btn {
width: 44px;
height: 44px;
border-radius: 14px;
border: 1px solid var(--gs-border);
background: #fff;
color: var(--gs-primary-2);
font-weight: 900;
cursor: pointer;
transition: .15s ease;
}
.gs-network-nav .gs-nav-btn:hover {
border-color: rgba(255, 122, 26, .45);
background: #fff;
box-shadow: 0 8px 16px rgba(2, 8, 23, .06);
}
/* New Order form layout (keep one-column flow) */
.gs-order-form,
.gs-new-order-form {
display: grid;
gap: 14px;
}
.gs-order-form .gs-field,
.gs-new-order-form .gs-field {
margin: 0;
}
.gs-order-form .gs-two-cols,
.gs-new-order-form .gs-two-cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
/* Ensure long service names don't overflow weirdly */
.gs-order-form select,
.gs-new-order-form select {
text-overflow: ellipsis;
}
/* ------------------------------
Responsive
-------------------------------- */
@media (max-width: 1024px) {
:root {
--gs-sidebar-w: 240px;
}
.gs-grid-5 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 860px) {
.gs-layout {
grid-template-columns: 1fr;
}
.gs-sidebar {
position: relative;
top: auto;
height: auto;
}
.gs-topbar {
position: sticky;
top: var(--gs-top-offset);
}
.gs-order-form .gs-two-cols,
.gs-new-order-form .gs-two-cols {
grid-template-columns: 1fr;
}
.gs-table {
min-width: 680px;
}
}
@media (max-width: 520px) {
.gs-topbar {
align-items: flex-start;
flex-direction: column;
}
.gs-topbar .gs-topbar-right {
justify-content: flex-start;
}
}
/* ------------------------------
Hard overrides for theme sidebars/widgets bleeding into panel area
-------------------------------- */
.gs-panel-shell .widget,
.gs-panel-shell aside,
.gs-panel-shell .sidebar,
.gs-panel-shell .secondary {
display: none !important;
}
/* Ensure panel content doesn't inherit theme padding/margins unexpectedly */
.gs-panel-shell .gs-main,
.gs-panel-shell .gs-card {
max-width: 100%;
}
/* =========================================================
PATCH (User Panel Shell polish) — Step 1.1
- Keeps the original panel.css intact
- Only overrides layout pieces for the new shell:
.gs-layout / .gs-sidebar / .gs-topbar / buttons
========================================================= */
/* Make sure the shell uses a clean grid like the reference */
.gs-panel-root .gs-layout {
display: grid;
grid-template-columns: 280px 1fr;
gap: 18px;
align-items: start;
max-width: 1280px;
margin: 0 auto;
padding: 18px;
}
@media (max-width: 980px) {
.gs-panel-root .gs-layout {
grid-template-columns: 1fr;
gap: 12px;
padding: 12px;
}
}
/* Sidebar: sticky + scrollable menu area, logo area stays fixed */
.gs-panel-root .gs-sidebar {
border: 1px solid var(--gs-border);
border-radius: 16px;
background: var(--gs-surface);
overflow: hidden;
position: sticky;
top: 12px;
height: calc(100vh - 24px);
display: flex;
flex-direction: column;
box-shadow: 0 10px 30px rgba(0, 0, 0, .04);
}
.gs-panel-root .gs-brand.gs-brand-sticky {
padding: 14px 14px 10px 14px;
border-bottom: 1px solid rgba(0, 0, 0, .06);
background: linear-gradient(180deg, #fff, #fbfbfd);
}
.gs-panel-root .gs-brand-inner {
display: flex;
gap: 10px;
align-items: center;
}
.gs-panel-root .gs-brand-logo {
width: 44px;
height: 44px;
border-radius: 14px;
overflow: hidden;
flex: 0 0 auto;
background: rgba(0, 0, 0, .04);
display: grid;
place-items: center;
}
.gs-panel-root .gs-brand-logo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.gs-panel-root .gs-brand-name {
font-weight: 900;
font-size: 14px;
color: var(--gs-text);
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.gs-panel-root .gs-brand-sub {
margin-top: 2px;
font-size: 12px;
color: var(--gs-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.gs-panel-root .gs-sidebar-scroll {
overflow: auto;
padding: 12px;
flex: 1 1 auto;
}
/* Menu items */
.gs-panel-root .gs-menu {
display: grid;
gap: 8px;
}
.gs-panel-root .gs-menu-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 12px;
border: 1px solid transparent;
color: var(--gs-text);
background: #fff;
font-weight: 800;
}
.gs-panel-root .gs-menu-item:hover {
background: #f8fafc;
border-color: rgba(0, 0, 0, .08);
}
.gs-panel-root .gs-menu-item.active {
background: #fff7ed;
border-color: #fed7aa;
}
.gs-panel-root .gs-menu-ico {
width: 22px;
text-align: center;
opacity: .9;
}
.gs-panel-root .gs-menu-txt {
font-size: 13px;
}
/* Sidebar footer */
.gs-panel-root .gs-sidebar-footer {
border-top: 1px solid rgba(0, 0, 0, .06);
padding: 12px;
background: #fff;
}
/* Mobile off-canvas sidebar */
@media (max-width: 980px) {
.gs-panel-root .gs-sidebar {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 86vw;
max-width: 320px;
border-radius: 0 18px 18px 0;
transform: translateX(-110%);
transition: transform .18s ease;
z-index: 9999;
}
.gs-panel-root .gs-sidebar.open {
transform: translateX(0);
}
body.gs-sidebar-open::before {
content: "";
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .35);
z-index: 9998;
}
}
/* Topbar: everything in one neat line on desktop */
.gs-panel-root .gs-topbar-sticky {
position: sticky;
top: 12px;
z-index: 100;
background: #fff;
border: 1px solid var(--gs-border);
border-radius: 16px;
padding: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, .04);
}
.gs-panel-root .gs-topbar {
display: grid;
grid-template-columns: 170px 1fr auto;
gap: 12px;
align-items: center;
}
.gs-panel-root .gs-topbar-left {
display: flex;
align-items: center;
gap: 10px;
}
.gs-panel-root .gs-topbar-title {
font-weight: 950;
color: var(--gs-text);
font-size: 16px;
}
.gs-panel-root .gs-top-kpis{
display:flex;
align-items:stretch;
gap:8px;
flex-wrap:nowrap;
overflow:hidden;
}
.gs-panel-root .gs-top-kpi{
border: 1px solid rgba(0,0,0,.06);
background: #fbfbfd;
border-radius: 12px;
padding: 6px 8px;
min-width: 0;
width: 120px;
}
.gs-panel-root .gs-kpi-val {
font-weight: 950;
color: var(--gs-text);
font-size: 14px;
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.gs-panel-root .gs-topbar-right {
display: flex;
gap: 10px;
justify-content: flex-end;
align-items: center;
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
}
.gs-panel-root .gs-top-search input {
width: 200px;
max-width: 50vw;
border: 1px solid rgba(0, 0, 0, .14);
border-radius: 12px;
padding: 8px 10px;
outline: none;
}
.gs-panel-root .gs-top-search input:focus {
border-color: #fdba74;
box-shadow: 0 0 0 3px rgba(251, 146, 60, .18);
}
/* Mobile: KPIs become 2 columns and topbar stacks nicely */
@media (max-width: 980px) {
.gs-panel-root .gs-topbar {
grid-template-columns: 1fr;
}
.gs-panel-root .gs-top-kpis {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.gs-panel-root .gs-topbar-right {
justify-content: flex-start;
}
}
/* Buttons */
.gs-panel-root .gs-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: 12px;
padding: 8px 10px;
border: 1px solid rgba(0, 0, 0, .14);
background: #fff;
cursor: pointer;
font-weight: 900;
}
.gs-panel-root .gs-btn:hover {
background: #f8fafc;
}
.gs-panel-root .gs-icon-btn {
width: 42px;
height: 42px;
padding: 0;
border-radius: 14px;
border: 1px solid #ffe4c7;
background: #fff7ed;
}
.gs-panel-root .gs-icon-btn:hover {
background: #ffedd5;
}
/* Page spacing */
.gs-panel-root .gs-page {
margin-top: 14px;
}
/* =============================
GS Panel — Layout tightening overrides (v2)
Goal: less empty space, thinner top header, slimmer sidebar,
full logo visibility (not button-like), closer to JAP reference.
============================= */
/* Reduce outer whitespace around the whole panel */
.gs-panel-root .gs-layout {
max-width: 1220px;
padding: 10px !important;
gap: 12px !important;
}
@media (max-width: 980px) {
.gs-panel-root .gs-layout {
padding: 8px !important;
gap: 10px !important;
}
}
/* Slimmer sidebar */
.gs-panel-root .gs-layout {
grid-template-columns: 240px 1fr;
}
@media (max-width: 1180px) {
.gs-panel-root .gs-layout {
grid-template-columns: 220px 1fr;
}
}
@media (max-width: 980px) {
.gs-panel-root .gs-layout {
grid-template-columns: 1fr;
}
}
/* Sidebar: less inner padding, keep sticky, show logo fully */
.gs-panel-root .gs-sidebar {
border-radius: 14px;
top: 8px;
height: calc(100vh - 16px);
}
.gs-panel-root .gs-brand-sticky {
padding: 10px 10px 8px 10px;
}
.gs-panel-root .gs-brand-inner {
gap: 10px;
}
/* Make logo area wider and clearly "logo", not button-like */
.gs-panel-root .gs-brand-logo {
width: 60px;
height: 44px;
border-radius: 12px;
background: transparent;
}
.gs-panel-root .gs-brand-logo img {
width: 100%;
height: 100%;
object-fit: contain;
background: transparent;
}
.gs-panel-root .gs-brand-name {
font-size: 13px;
}
.gs-panel-root .gs-brand-sub {
font-size: 11px;
}
/* Menu: tighter and slightly smaller text */
.gs-panel-root .gs-sidebar-scroll {
padding: 10px;
}
.gs-panel-root .gs-menu {
gap: 6px;
}
.gs-panel-root .gs-menu-item {
padding: 9px 10px;
border-radius: 11px;
}
.gs-panel-root .gs-menu-txt {
font-size: 12.5px;
}
.gs-panel-root .gs-menu-ico {
width: 20px;
}
/* Topbar: thinner height + smaller typography */
.gs-panel-root .gs-topbar-sticky {
top: 8px;
padding: 10px;
border-radius: 14px;
}
.gs-panel-root .gs-topbar {
grid-template-columns: 140px 1fr 280px;
gap: 10px;
}
@media (max-width: 1180px) {
.gs-panel-root .gs-topbar {
grid-template-columns: 120px 1fr 240px;
}
}
@media (max-width: 980px) {
.gs-panel-root .gs-topbar {
grid-template-columns: 1fr;
}
}
/* KPI cards compact, so they look like a thin header strip */
.gs-panel-root .gs-top-kpis {
gap: 8px;
}
.gs-panel-root .gs-top-kpi {
padding: 7px 9px;
border-radius: 12px;
}
.gs-panel-root .gs-top-kpi .gs-muted {
font-size: 11px;
}
.gs-panel-root .gs-kpi-val {
font-size: 13px;
}
/* Search smaller to reduce header width */
.gs-panel-root .gs-top-search input {
width: 190px;
padding: 9px 10px;
border-radius: 12px;
font-size: 13px;
}
.gs-panel-root .gs-icon-btn {
width: 38px;
height: 38px;
border-radius: 12px;
}
/* Reduce title footprint */
.gs-panel-root .gs-topbar-title {
font-size: 14px;
}
/* Page spacing tighter */
.gs-panel-root .gs-page {
margin-top: 10px;
}
/* Ensure theme containers don't add extra spacing around panel */
.gs-panel-root {
margin: 0 !important;
}
.gs-panel-root .gs-panel {
margin: 0 !important;
}
/* =============================
GS Panel — Ultra-tight layout overrides (v3)
User request: remove ALL extra spacing, shrink sidebar + header width ~50%.
============================= */
/* Make panel go edge-to-edge inside page content area */
.gs-panel-root .gs-layout {
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
gap: 0 !important;
grid-template-columns: 170px 1fr !important;
/* slimmer sidebar */
}
@media (max-width: 1180px) {
.gs-panel-root .gs-layout {
grid-template-columns: 160px 1fr !important;
}
}
@media (max-width: 980px) {
.gs-panel-root .gs-layout {
grid-template-columns: 1fr !important;
padding: 0 !important;
gap: 0 !important;
}
}
/* Sidebar: flush to edges, no extra rounding gap */
.gs-panel-root .gs-sidebar {
border-radius: 0 !important;
top: 0 !important;
height: 100vh !important;
border-left: 0 !important;
}
/* Reduce sidebar internal padding more */
.gs-panel-root .gs-brand-sticky {
padding: 8px 8px 6px 8px !important;
}
.gs-panel-root .gs-sidebar-scroll {
padding: 8px !important;
}
.gs-panel-root .gs-sidebar-footer {
padding: 8px !important;
}
/* Logo full and bigger inside slim sidebar */
.gs-panel-root .gs-brand-logo {
width: 56px !important;
height: 40px !important;
border-radius: 10px !important;
}
.gs-panel-root .gs-brand-name {
font-size: 12px !important;
}
.gs-panel-root .gs-brand-sub {
font-size: 10.5px !important;
}
/* Main: remove left padding from grid gap (already 0) */
.gs-panel-root .gs-main {
padding: 0 !important;
}
/* Topbar: stick to top and be thin */
.gs-panel-root .gs-topbar-sticky {
top: 0 !important;
border-radius: 0 !important;
border-top: 0 !important;
border-right: 0 !important;
border-left: 0 !important;
padding: 8px !important;
box-shadow: none !important;
}
/* Make the KPI strip thinner + tighter */
.gs-panel-root .gs-topbar {
grid-template-columns: 110px 1fr 240px !important;
gap: 8px !important;
}
.gs-panel-root .gs-top-kpis {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 6px !important;
}
.gs-panel-root .gs-top-kpi {
padding: 6px 8px !important;
border-radius: 10px !important;
}
.gs-panel-root .gs-top-kpi .gs-muted {
font-size: 10.5px !important;
}
.gs-panel-root .gs-kpi-val {
font-size: 12.5px !important;
}
.gs-panel-root .gs-top-search input {
width: 165px !important;
padding: 8px 9px !important;
font-size: 12.5px !important;
}
.gs-panel-root .gs-icon-btn {
width: 34px !important;
height: 34px !important;
border-radius: 10px !important;
}
/* Remove the extra gap between topbar and page content */
.gs-panel-root .gs-page {
margin-top: 0 !important;
}
/* IMPORTANT: some themes add padding to main content wrappers. Try to neutralize common ones */
.gs-panel-root {
padding: 0 !important;
}
.gs-panel-root .site,
.gs-panel-root .site-content,
.gs-panel-root .content-area,
.gs-panel-root .entry-content,
.gs-panel-root .container,
.gs-panel-root .wrap {
padding: 0 !important;
margin: 0 !important;
}
/* =============================
Astra theme wrapper fix (critical)
Cause: Astra sets .ast-container max-width:1240px and padding/margins.
Fix: make container full-width ONLY when panel.css is loaded (panel page).
============================= */
/* Full width container */
#content.site-content>.ast-container {
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Remove common content paddings that create white gaps */
#content.site-content {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
#content.site-content .ast-container .content-area {
margin: 0 !important;
}
#content.site-content .ast-container .site-main {
margin: 0 !important;
}
#content.site-content .ast-container .entry-content {
margin: 0 !important;
padding: 0 !important;
}
/* If Astra adds section padding */
.ast-separate-container .ast-article-post,
.ast-separate-container .ast-article-single,
.ast-separate-container .ast-woocommerce-container {
padding: 0 !important;
}
/* Optional: hide page title spacing if theme outputs it above content */
.ast-page-builder-template .entry-header,
.page .entry-header {
margin: 0 !important;
padding: 0 !important;
}
/* =========================================================
MOBILE TOPBAR COMPACT (v3)
Goal:
- On mobile, the sticky header must NOT take half the screen.
- KPIs should be compact (horizontal scroll) instead of tall 2x2 blocks.
- Search + icon buttons should stay on one line and fit nicely.
NOTE: This is ADD-ONLY and safe for desktop.
========================================================= */
@media (max-width: 600px) {
/* Make the sticky topbar thinner */
.gs-panel-root .gs-topbar-sticky {
top: 0;
padding: 8px;
border-radius: 14px;
}
.gs-panel-root .gs-topbar {
gap: 8px;
}
.gs-panel-root .gs-topbar-left {
gap: 8px;
}
.gs-panel-root .gs-topbar-title {
font-size: 14px;
line-height: 1.1;
}
/* KPIs become a single horizontal row (scroll), so height stays small */
.gs-panel-root .gs-top-kpis {
display: flex;
flex-wrap: nowrap;
gap: 8px;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
padding-bottom: 2px;
}
.gs-panel-root .gs-top-kpi {
min-width: 150px;
padding: 8px 10px;
border-radius: 12px;
}
/* Search + icons: keep compact and prevent wrap */
.gs-panel-root .gs-topbar-right {
flex-wrap: nowrap;
gap: 8px;
align-items: center;
}
.gs-panel-root .gs-top-search {
flex: 1 1 auto;
min-width: 0;
}
.gs-panel-root .gs-top-search input {
width: 100%;
max-width: none;
padding: 9px 10px;
border-radius: 12px;
}
.gs-panel-root .gs-icon-btn {
width: 40px;
height: 40px;
border-radius: 12px;
}
/* Reduce page spacing right after the sticky bar */
.gs-panel-root .gs-page {
margin-top: 10px;
}
}
@media (max-width: 420px) {
.gs-panel-root .gs-topbar-title {
font-size: 13px;
}
.gs-panel-root .gs-top-kpi {
min-width: 140px;
}
.gs-panel-root .gs-icon-btn {
width: 38px;
height: 38px;
}
}
/* =========================================================
MOBILE TOPBAR HEIGHT FIX (override)
- Prevent KPI labels from breaking vertically
- Make KPIs a single horizontal row (scroll) on mobile/tablet widths
- Reduce sticky header vertical space
========================================================= */
@media (max-width: 980px) {
/* Make sticky container thinner on mobile */
.gs-panel-root .gs-topbar-sticky {
top: 0 !important;
padding: 8px !important;
border-radius: 14px !important;
}
/* Ensure the topbar stacks but doesn't create huge empty height */
.gs-panel-root .gs-topbar {
grid-template-columns: 1fr !important;
gap: 8px !important;
align-items: start !important;
}
/* KPIs: force single-row horizontal scroll (instead of 2-column grid) */
.gs-panel-root .gs-top-kpis {
display: flex !important;
flex-wrap: nowrap !important;
gap: 8px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch;
padding-bottom: 2px !important;
}
.gs-panel-root .gs-top-kpi {
min-width: 170px !important;
padding: 8px 10px !important;
border-radius: 12px !important;
}
/* Prevent vertical letter stacking */
.gs-panel-root .gs-top-kpi .gs-muted,
.gs-panel-root .gs-top-kpi .gs-kpi-title {
white-space: nowrap !important;
word-break: normal !important;
overflow: hidden;
text-overflow: ellipsis;
}
.gs-panel-root .gs-kpi-val {
white-space: nowrap !important;
}
/* Top-right: keep search + icon buttons in one line */
.gs-panel-root .gs-topbar-right {
display: flex !important;
flex-wrap: nowrap !important;
gap: 8px !important;
justify-content: flex-start !important;
align-items: center !important;
}
.gs-panel-root .gs-top-search {
flex: 1 1 auto !important;
min-width: 0 !important;
}
.gs-panel-root .gs-top-search input {
width: 100% !important;
max-width: none !important;
padding: 9px 10px !important;
border-radius: 12px !important;
}
.gs-panel-root .gs-icon-btn {
width: 40px !important;
height: 40px !important;
border-radius: 12px !important;
}
/* Reduce gap after header */
.gs-panel-root .gs-page {
margin-top: 10px !important;
}
}
@media (max-width: 420px) {
.gs-panel-root .gs-top-kpi {
min-width: 150px !important;
}
.gs-panel-root .gs-icon-btn {
width: 38px !important;
height: 38px !important;
}
}
/* =========================================================
PATCH (Buttons contrast + brand consistency) — v4
Goal:
- Fix "white text on white background" on dashboard/buttons.
- Keep brand look (orange primary, navy text).
- Avoid breaking network selector pills (those are not submit buttons).
- ADD-ONLY: overrides at the end, no removal of existing rules.
========================================================= */
/* Strong, consistent button styling inside panel */
.gs-panel-root .gs-btn,
.gs-panel-root .gs-btn:visited {
background: var(--gs-primary) !important;
border-color: rgba(255, 122, 26, .45) !important;
color: #fff !important;
text-decoration: none !important;
}
.gs-panel-root .gs-btn:hover {
filter: brightness(.98);
transform: translateY(-1px);
}
.gs-panel-root .gs-btn:active {
transform: translateY(0);
}
/* Secondary buttons stay light but readable */
.gs-panel-root .gs-btn.secondary,
.gs-panel-root .gs-btn.secondary:visited {
background: #fff !important;
border-color: var(--gs-border) !important;
color: var(--gs-primary-2) !important;
}
.gs-panel-root .gs-btn.secondary:hover {
background: #f6f8fc !important;
}
/* Icon-only buttons: keep the soft style, but ensure readable color */
.gs-panel-root .gs-icon-btn {
background: #fff7ed !important;
border-color: #ffe4c7 !important;
color: var(--gs-primary-2) !important;
}
.gs-panel-root .gs-icon-btn:hover {
background: #ffedd5 !important;
}
/* Forms: primary submit buttons */
.gs-panel-root input[type="submit"],
.gs-panel-root button[type="submit"],
.gs-panel-root .submit input,
.gs-panel-root .submit button {
background: var(--gs-primary) !important;
border: 1px solid rgba(255, 122, 26, .45) !important;
color: #fff !important;
font-weight: 900 !important;
border-radius: 12px !important;
padding: 10px 14px !important;
cursor: pointer !important;
transition: .15s ease;
}
.gs-panel-root input[type="submit"]:hover,
.gs-panel-root button[type="submit"]:hover {
filter: brightness(.98);
transform: translateY(-1px);
}
.gs-panel-root input[type="submit"]:active,
.gs-panel-root button[type="submit"]:active {
transform: translateY(0);
}
/* Generic links that behave like buttons (common patterns) */
.gs-panel-root a.button,
.gs-panel-root a.btn,
.gs-panel-root a.gs-button {
background: var(--gs-primary) !important;
border: 1px solid rgba(255, 122, 26, .45) !important;
color: #fff !important;
border-radius: 12px !important;
padding: 10px 14px !important;
font-weight: 900 !important;
display: inline-flex;
align-items: center;
gap: 8px;
text-decoration: none !important;
}
/* Focus accessibility */
.gs-panel-root .gs-btn:focus,
.gs-panel-root input[type="submit"]:focus,
.gs-panel-root button[type="submit"]:focus,
.gs-panel-root a.button:focus {
outline: none !important;
box-shadow: 0 0 0 4px rgba(255, 122, 26, .18) !important;
}
/* Ensure text inside cards is readable even if theme sets strange colors */
.gs-panel-root .gs-card,
.gs-panel-root .gs-page,
.gs-panel-root .gs-main {
color: var(--gs-text);
}
/* Premium Tabs */
.gs-tabs{display:flex; gap:10px; flex-wrap:wrap;}
.gs-tabs--pill{background:rgba(11,61,145,0.06); padding:10px; border-radius:999px; border:1px solid var(--gs-border);}
.gs-tab-btn{border:0; background:transparent; padding:10px 14px; border-radius:999px; cursor:pointer; font-weight:800; color:var(--gs-text); transition:var(--gs-trans);}
.gs-tab-btn:hover{transform:translateY(-1px);}
.gs-tab-btn.is-active{background:linear-gradient(135deg,var(--gs-primary),rgba(11,61,145,0.85)); color:#fff; box-shadow:var(--gs-shadow-soft);}
.gs-tab-panels .gs-tab-panel{display:none;}
.gs-tab-panels .gs-tab-panel.is-active{display:block;}
/* Method buttons in Add Funds */
.gs-method-btn{border:1px solid var(--gs-border); background:#fff; color:var(--gs-text);}
.gs-method-btn:hover{border-color:rgba(255,98,0,0.55); box-shadow:var(--gs-shadow-soft);}
/* Inputs focus */
.gs-card input[type="text"], .gs-card input[type="number"], .gs-card textarea, .gs-card select{
border:1px solid var(--gs-border);
border-radius:14px;
padding:10px 12px;
outline:none;
transition:var(--gs-trans);
}
.gs-card input:focus, .gs-card textarea:focus, .gs-card select:focus{box-shadow:var(--gs-focus); border-color:rgba(255,98,0,0.6);}
/* Method buttons active */
.gs-method-btn.active{
background: linear-gradient(135deg, var(--gs-primary), rgba(11,67,120,0.85));
color:#fff;
border-color: rgba(11,67,120,0.45);
box-shadow: 0 10px 24px rgba(0,0,0,0.14);
}
.gs-method-btn.active:hover{border-color:rgba(255,98,0,0.55);}
/* Sub tabs (frontend) */
.gs-tabs--sub{background:rgba(17,17,17,0.04); border:1px solid var(--gs-border); border-radius:14px; padding:8px; display:flex; gap:8px; flex-wrap:wrap;}
.gs-tabs--sub .gs-tab-btn{padding:10px 14px; border-radius:12px; font-weight:700;}
/* ------------------------------------------------------------
* Premium UI kit add-ons (Orders/Services)
* ------------------------------------------------------------ */
.gs-tab-count{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:26px;
height:22px;
padding:0 8px;
border-radius:999px;
background:rgba(255,255,255,.18);
border:1px solid rgba(255,255,255,.22);
font-weight:900;
font-size:12px;
margin-left:8px;
}
.gs-tab-btn:not(.is-active) .gs-tab-count{
background:rgba(11,61,145,.10);
border-color:rgba(11,61,145,.12);
color:var(--gs-primary);
}
.gs-tab-btn.is-active .gs-tab-count{
background:rgba(255,255,255,.18);
border-color:rgba(255,255,255,.22);
color:#fff;
}
.gs-btn.is-disabled{
pointer-events:none;
opacity:.55;
transform:none !important;
}
.gs-empty{
padding:18px;
border:1px dashed var(--gs-border);
border-radius:16px;
background:linear-gradient(180deg, rgba(11,61,145,.04), rgba(255,122,26,.03));
}
.gs-empty-title{
font-weight:950;
font-size:15px;
margin-bottom:4px;
}
/* Status badges */
.gs-badge--success{ background:rgba(16,185,129,.12); color:#065f46; border-color:rgba(16,185,129,.22); }
.gs-badge--warning{ background:rgba(245,158,11,.14); color:#92400e; border-color:rgba(245,158,11,.24); }
.gs-badge--info{ background:rgba(59,130,246,.12); color:#1e3a8a; border-color:rgba(59,130,246,.22); }
.gs-badge--danger{ background:rgba(239,68,68,.12); color:#7f1d1d; border-color:rgba(239,68,68,.22); }
.gs-badge--partial{ background:rgba(168,85,247,.12); color:#5b21b6; border-color:rgba(168,85,247,.22); }
.gs-badge--refund{ background:rgba(20,184,166,.12); color:#115e59; border-color:rgba(20,184,166,.22); }
/* Lists + Accordion (Premium) */
.gs-list{display:flex;flex-direction:column;gap:10px;}
.gs-list-item{padding:12px;border:1px solid var(--gs-border);border-radius:16px;background:var(--gs-surface);box-shadow:var(--gs-shadow-sm);}
.gs-accordion .gs-acc{border:1px solid var(--gs-border);border-radius:16px;padding:10px 12px;background:var(--gs-surface);box-shadow:var(--gs-shadow-sm);}
.gs-accordion .gs-acc summary{cursor:pointer;font-weight:900; list-style:none;}
.gs-accordion .gs-acc summary::-webkit-details-marker{display:none;}
.gs-btn.is-loading{opacity:.8; pointer-events:none; position:relative;}
.gs-btn.is-loading:after{content:''; width:14px; height:14px; border-radius:50%; border:2px solid rgba(255,255,255,.65); border-top-color:rgba(255,255,255,0); display:inline-block; margin-left:8px; vertical-align:-2px; animation:gsSpin .9s linear infinite;}
@keyframes gsSpin{to{transform:rotate(360deg)}}
/* =============================
Premium UI kit add-ons (Drawer / Toast / Skeleton)
============================= */
.gs-pre {
margin: 10px 0 0 0;
padding: 12px;
background: rgba(15, 23, 42, 0.06);
border: 1px solid rgba(15, 23, 42, 0.12);
border-radius: 12px;
white-space: pre-wrap;
word-break: break-word;
max-height: 240px;
overflow: auto;
}
.gs-btn.tiny { padding: 6px 10px; font-size: 12px; border-radius: 10px; }
.gs-drawer { position: fixed; inset: 0; z-index: 99999; display: none; }
.gs-drawer.is-open { display: block; }
.gs-drawer__overlay { position: absolute; inset: 0; background: rgba(2,6,23,.55); backdrop-filter: blur(3px); }
.gs-drawer__panel {
position: absolute; top: 0; right: 0; height: 100%; width: min(520px, 92vw);
background: #fff; border-left: 1px solid rgba(15,23,42,.12);
box-shadow: -20px 0 60px rgba(2,6,23,.25);
display: flex; flex-direction: column;
}
.gs-drawer__head { padding: 16px 18px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid rgba(15,23,42,.12); }
.gs-drawer__title { font-size: 20px; font-weight: 900; margin-top: 2px; }
.gs-drawer__body { padding: 16px 18px; overflow: auto; }
.gs-drawer__foot { padding: 14px 18px; border-top:1px solid rgba(15,23,42,.12); display:flex; justify-content:flex-end; gap:10px; }
.gs-icon-btn {
width: 40px; height: 40px; border-radius: 14px;
border: 1px solid rgba(11,45,92,.14);
background: linear-gradient(180deg, #ffffff 0%, #fff6ee 100%);
cursor: pointer;
font-weight: 900;
box-shadow: 0 10px 22px rgba(2,6,23,.10);
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
}
.gs-icon-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(2,6,23,.12); }
.gs-icon-btn:active { transform: translateY(0px); box-shadow: 0 6px 14px rgba(2,6,23,.14); }
.gs-icon-btn.has-label{ width:auto; height:auto; padding:8px 10px; }
.gs-icon-btn .gs-ic-label{ font-size:12px; font-weight:900; color: var(--gs-primary-2); letter-spacing:.2px; }
.gs-icon-btn.gs-icon-btn--xl{ width:56px; height:46px; }
.gs-icon-btn.gs-icon-btn--xl .gs-emoji{ font-size:20px; }
/* Strongly remove underline inside the panel (some themes override) */
.gs-panel-shell a, .gs-panel-shell a *, .gs-panel-shell .gs-nav a, .gs-panel-shell .gs-nav a *{ text-decoration:none !important; }
.gs-kv-grid { display:grid; grid-template-columns: 1fr; gap:10px; }
@media (min-width: 520px){ .gs-kv-grid { grid-template-columns: 1fr 1fr; } }
.gs-kv {
padding: 12px; border-radius: 14px;
border: 1px solid rgba(15,23,42,.10);
background: linear-gradient(180deg, rgba(255,255,255,1), rgba(248,250,252,1));
display:grid; grid-template-columns: 1fr auto; gap:10px; align-items:center;
}
.gs-kv .k { font-size: 12px; font-weight: 900; color: rgba(15,23,42,.7); text-transform: uppercase; letter-spacing: .04em; }
.gs-kv .v { font-weight: 900; }
.gs-skel { border-radius: 10px; background: linear-gradient(90deg, rgba(148,163,184,.25), rgba(148,163,184,.12), rgba(148,163,184,.25)); background-size: 200% 100%; animation: gsSkel 1.2s ease-in-out infinite; }
@keyframes gsSkel { 0%{ background-position: 0% 0; } 100%{ background-position: -200% 0; } }
.gs-toast-wrap { position: fixed; right: 16px; bottom: 16px; z-index: 100000; display:flex; flex-direction:column; gap:10px; }
.gs-toast {
transform: translateY(10px); opacity: 0;
transition: all .22s ease;
padding: 12px 14px;
border-radius: 14px;
border: 1px solid rgba(15,23,42,.12);
background: #fff;
box-shadow: 0 20px 50px rgba(2,6,23,.18);
font-weight: 800;
min-width: 200px;
}
.gs-toast.is-show { transform: translateY(0); opacity: 1; }
.gs-toast--success { border-color: rgba(34,197,94,.25); }
.gs-toast--error { border-color: rgba(239,68,68,.25); }
/* Timeline (order drawer) */
.gs-timeline{ position:relative; }
.gs-timeline:before{ content:""; position:absolute; left:18px; top:54px; bottom:18px; width:2px; background:linear-gradient(180deg, rgba(2,132,199,.35), rgba(249,115,22,.18)); border-radius:999px; }
.gs-tl-item{ display:flex; gap:12px; align-items:flex-start; position:relative; padding:10px 0; }
.gs-tl-item .dot{ width:12px; height:12px; border-radius:999px; margin-left:12px; margin-top:3px; box-shadow:0 10px 25px rgba(2,6,23,.18); border:2px solid rgba(255,255,255,.75); background:rgba(148,163,184,.9); }
.gs-tl-item .txt .t{ font-weight:900; }
.gs-tl-item .txt .m{ margin-top:2px; }
.gs-primary{ background:linear-gradient(135deg, var(--gs-primary), var(--gs-primary-2)); }
.gs-success{ background:linear-gradient(135deg, #10b981, #34d399); }
.gs-warning{ background:linear-gradient(135deg, #f59e0b, #fbbf24); }
.gs-danger{ background:linear-gradient(135deg, #ef4444, #fb7185); }
.gs-info{ background:linear-gradient(135deg, #3b82f6, #60a5fa); }
.gs-partial{ background:linear-gradient(135deg, #a855f7, #c084fc); }
.gs-refund{ background:linear-gradient(135deg, #14b8a6, #2dd4bf); }
/* Topbar dropdown */
.gs-top-dd{position:relative;display:inline-flex;}
.gs-top-dd-menu{position:absolute;top:44px;right:0;min-width:180px;background:#0b1220;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:8px;box-shadow:0 18px 40px rgba(0,0,0,.35);display:none;z-index:50;}
.gs-top-dd-menu.is-open{display:block;}
.gs-dd-item{display:block;padding:10px 10px;border-radius:10px;color:#fff;text-decoration:none;font-weight:800;font-size:13px;}
.gs-dd-item:hover{background:rgba(255,255,255,.08);}
.gs-grid-4{grid-template-columns:repeat(4,minmax(0,1fr));}
@media (max-width:1100px){.gs-grid-4{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:640px){.gs-grid-4{grid-template-columns:repeat(1,minmax(0,1fr));}}
.gs-scrollbox{overflow:auto;border:1px solid rgba(255,255,255,.08);border-radius:16px;}
.gs-services-scroll{max-height:64vh;}
.gs-net-icon svg{width:18px;height:18px;display:block;}
.gs-panel-root .gs-topbar-right::-webkit-scrollbar{display:none;}
/* Services page: single-line toolbar + internal scrolling list */
.gs-services-toolbar{
display:flex;
align-items:center;
gap:10px;
flex-wrap:nowrap;
overflow-x:auto;
scrollbar-width:none;
}
.gs-services-toolbar::-webkit-scrollbar{display:none;}
.gs-services-scroll{
max-height: calc(100vh - 280px);
overflow:auto;
}
/* --- Topbar icon row fix (keep icons in single horizontal line) --- */
.gs-topbar-right{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:nowrap}
.gs-topbar-actions{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.gs-topbar-actions .gs-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;border:1px solid rgba(0,0,0,.08);background:#fff;cursor:pointer}
.gs-topbar-actions .gs-icon-btn:focus{outline:2px solid rgba(17,24,39,.25);outline-offset:2px}
@media (max-width: 980px){
.gs-topbar-right{gap:6px}
.gs-topbar-actions .gs-icon-btn{width:36px;height:36px;border-radius:10px}
}
/* ------------------------------------------------------------
GlobalServic tweaks (v2 fixed)
- Network chip selection (zoom + highlight)
- Topbar: keep KPIs + quick icons in one line
------------------------------------------------------------ */
.gs-net-chip{transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;}
.gs-net-chip.is-active{transform:scale(1.05);border-color:rgba(255,98,0,.55);box-shadow:0 0 0 3px rgba(255,98,0,.16), 0 14px 28px rgba(2,6,23,.14);}
.gs-net-chip:active{transform:scale(0.98);}
.gs-net-icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:10px;background:linear-gradient(180deg,#fff,#f3f4f6);border:1px solid rgba(11,45,92,.10);}
.gs-net-icon svg{width:16px;height:16px;display:block;}
.gs-net-initial{font-weight:900;font-size:12px;color:#0f172a;}
/* Topbar layout overrides */
.gs-panel-root .gs-topbar{grid-template-columns: 140px 1fr auto;}
.gs-panel-root .gs-top-kpis{display:flex;gap:10px;justify-content:flex-start;flex-wrap:nowrap;overflow:hidden;}
.gs-panel-root .gs-top-kpi{width:140px;padding:7px 9px;border-radius:12px;}
.gs-panel-root .gs-topbar-sticky{padding:10px;top:10px;}
.gs-panel-root .gs-topbar-right{overflow:visible;}
.gs-panel-root .gs-top-icons{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;}
@media (max-width: 1180px){
.gs-panel-root .gs-top-kpi{width:128px;}
}
/* --- GS v4 overrides: compact sticky header + inline icons --- */
.gs-panel-root .gs-topbar{
display:grid;
grid-template-columns: 140px 1fr auto;
align-items:center;
}
.gs-panel-root .gs-top-kpis{display:flex;gap:8px;flex-wrap:nowrap;overflow:hidden;}
.gs-panel-root .gs-top-kpi{
width:110px;
padding:6px 8px;
}
.gs-panel-root .gs-top-kpi .gs-muted{font-size:11px;}
.gs-panel-root .gs-top-kpi .gs-kpi-val{font-size:13px;}
.gs-panel-root .gs-topbar-right{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;}
.gs-panel-root .gs-top-icons{display:flex;flex-direction:row;align-items:center;gap:8px;flex-wrap:nowrap;}
.gs-panel-root .gs-top-search input{height:34px;}
.gs-net-chip.is-active{
background:linear-gradient(180deg, rgba(255,255,255,1), rgba(255,246,238,1));
border-color:rgba(255,98,0,.55);
box-shadow:0 0 0 3px rgba(255,98,0,.16), 0 14px 28px rgba(2,6,23,.14);
}
/* Favorites list */
.gs-fav-list{display:flex;flex-direction:column;gap:10px;}
.gs-fav-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border:1px solid rgba(15,23,42,.08);border-radius:14px;background:#fff;}
.gs-fav-title{font-weight:800;color:#0f172a;}
.gs-fav-meta{font-size:12px;color:rgba(15,23,42,.65);margin-top:2px;}
.gs-fav-actions{display:flex;gap:8px;flex-wrap:wrap;}
/* ------------------------------------------------------------
GlobalServic Loader (3D spinner overlay)
------------------------------------------------------------ */
.gs-loader{position:fixed;inset:0;background:rgba(255,255,255,.74);backdrop-filter:blur(2px);display:none;align-items:center;justify-content:center;z-index:999999;}
.gs-loader.is-active{display:flex;}
.gs-loader-card{background:linear-gradient(180deg,#ffffff 0%, #f7f9fc 100%);border:1px solid rgba(11,45,92,.14);box-shadow:0 18px 44px rgba(2,6,23,.18);border-radius:18px;padding:18px 20px;display:flex;align-items:center;gap:14px;}
.gs-loader-spinner{width:44px;height:44px;border-radius:50%;background:conic-gradient(from 0deg, var(--gs-primary), var(--gs-primary-2), var(--gs-primary));-webkit-mask:radial-gradient(closest-side, transparent 58%, #000 60%);mask:radial-gradient(closest-side, transparent 58%, #000 60%);animation:gsSpin .7s linear infinite;}
.gs-loader-text{font-weight:900;color:var(--gs-primary-2);letter-spacing:.2px;}
@keyframes gsSpin{to{transform:rotate(360deg);}}
/* Brand enforcement + cleanup */
.gs-nav a, .gs-nav a:hover, .gs-nav a:focus { text-decoration: none !important; }
.gs-nav .gs-nav-icon { width: 22px; height: 22px; }
.gs-nav .gs-nav-icon svg, .gs-nav .gs-nav-icon img { width: 22px; height: 22px; }
/* Topbar icon buttons: 3D + compact labels */
.gs-topbar-actions .gs-icon-btn{
background: linear-gradient(180deg, #ffffff 0%, #f2f5fb 100%);
box-shadow: 0 6px 14px rgba(2,6,23,.10);
border: 1px solid rgba(12,56,102,.18);
}
.gs-topbar-actions .gs-icon-btn:hover{
transform: translateY(-1px);
box-shadow: 0 10px 18px rgba(2,6,23,.14);
border-color: rgba(255,98,0,.45);
}
.gs-topbar-actions .gs-icon-btn:active{ transform: translateY(0px) scale(.98); }
.gs-icon-btn.has-label{
width: 56px;
height: 56px;
flex-direction: column;
gap: 3px;
padding: 6px 6px 7px;
}
.gs-icon-btn .gs-ic{
display:inline-flex;
align-items:center;
justify-content:center;
width: 26px;
height: 26px;
}
.gs-icon-btn .gs-ic svg,
.gs-icon-btn .gs-ic img{
width: 26px;
height: 26px;
display:block;
filter: drop-shadow(0 2px 2px rgba(0,0,0,.18));
}
.gs-icon-btn.has-label .gs-ic-label{
display:block;
font-size: 10px;
line-height: 1;
font-weight: 700;
color: var(--gs-blue-dark);
letter-spacing: .02em;
max-width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
@media (max-width: 980px){
.gs-icon-btn.has-label{ width: 50px; height: 50px; }
.gs-icon-btn .gs-ic, .gs-icon-btn .gs-ic svg{ width: 22px; height: 22px; }
}
/* Network chip selection + use deep orange */
.gs-net-chip.is-active{
border-color: rgba(255,98,0,.60) !important;
box-shadow: 0 0 0 3px rgba(255,98,0,.16), 0 14px 28px rgba(2,6,23,.14) !important;
}
/* === Brand palette + 3D icon buttons === */
.gs-panel-root{
--gs-brand-blue:#0c3866;
--gs-brand-blue2:#000066;
--gs-brand-orange:#ff6200;
--gs-brand-orange2:#ff6a00;
--gs-brand-black:#000;
--gs-brand-white:#fff;
}
.gs-panel-root .gs-top-icons .gs-icon-btn{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:2px;
width:54px;
height:52px;
background: linear-gradient(180deg,#fff 0%, #fff7ed 55%, #ffe8d3 100%);
border:1px solid rgba(255,98,0,.35);
box-shadow: 0 6px 14px rgba(12,56,102,.10), inset 0 1px 0 rgba(255,255,255,.9);
}
.gs-panel-root .gs-top-icons .gs-icon-btn svg,
.gs-panel-root .gs-top-icons .gs-icon-btn img{
width:22px;
height:22px;
filter: drop-shadow(0 2px 2px rgba(0,0,0,.18));
}
.gs-panel-root .gs-top-icons .gs-icon-btn .gs-ic-label{
font-size:10px;
line-height:1;
font-weight:800;
color:var(--gs-brand-blue);
max-width:52px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.gs-panel-root .gs-top-icons .gs-icon-btn.is-primary{
background: linear-gradient(180deg, #fff 0%, rgba(255,98,0,.10) 55%, rgba(255,98,0,.18) 100%);
border-color: rgba(255,98,0,.55);
}
.gs-panel-root .gs-top-icons .gs-icon-btn.is-logout{
background: linear-gradient(180deg,#fff 0%, rgba(12,56,102,.08) 60%, rgba(12,56,102,.14) 100%);
border-color: rgba(12,56,102,.35);
}
@media (max-width: 980px){
.gs-panel-root .gs-top-icons .gs-icon-btn{width:44px;height:44px;}
.gs-panel-root .gs-top-icons .gs-icon-btn .gs-ic-label{display:none;}
}
/* Remove underlines in left menu */
.gs-panel-root .gs-side a{ text-decoration:none !important; }
.gs-panel-root .gs-side a:hover{ text-decoration:none !important; }
/* Stronger selected network state */
.gs-panel-root .gs-network-btn.is-active{
transform: translateY(-1px) scale(1.03);
border-color: rgba(255,98,0,.8) !important;
box-shadow: 0 10px 18px rgba(255,98,0,.15), inset 0 1px 0 rgba(255,255,255,.9);
background: linear-gradient(180deg,#fff 0%, rgba(255,98,0,.10) 60%, rgba(255,98,0,.22) 100%);
}
.gs-panel-root .gs-top-icons .gs-refresh svg{width:26px;height:26px;}
.gs-loader-spinner{
box-shadow: 0 10px 18px rgba(0,0,0,.18), inset 0 2px 4px rgba(255,255,255,.55);
}
/* Ribbon-like network buttons */
.gs-panel-root .gs-network-btn{
position:relative;
background: linear-gradient(180deg,#ffffff 0%, #f7fbff 50%, #f1f5ff 100%);
border:1px solid rgba(12,56,102,.18);
box-shadow: 0 6px 14px rgba(12,56,102,.08);
}
.gs-panel-root .gs-network-btn:before{
content:"";
position:absolute;
inset:-1px;
border-radius:14px;
padding:1px;
background: linear-gradient(90deg, rgba(255,98,0,.55), rgba(12,56,102,.45));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events:none;
opacity:.35;
}
.gs-panel-root .gs-network-btn .gs-net-ic{
background: radial-gradient(circle at 30% 30%, #fff, rgba(255,255,255,.6) 35%, rgba(0,0,0,.06));
border:1px solid rgba(0,0,0,.06);
}
/* Apply ribbon styling to actual chip class */
.gs-panel-root .gs-net-chip{
position:relative;
background: linear-gradient(180deg,#ffffff 0%, #f7fbff 50%, #f1f5ff 100%);
border:1px solid rgba(12,56,102,.18);
box-shadow: 0 6px 14px rgba(12,56,102,.08);
}
.gs-panel-root .gs-net-chip:before{
content:"";
position:absolute;
inset:-1px;
border-radius:14px;
padding:1px;
background: linear-gradient(90deg, rgba(255,98,0,.55), rgba(12,56,102,.45));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events:none;
opacity:.35;
}
.gs-panel-root .gs-net-chip.is-active{
transform: translateY(-1px) scale(1.03);
border-color: rgba(255,98,0,.8) !important;
box-shadow: 0 10px 18px rgba(255,98,0,.15), inset 0 1px 0 rgba(255,255,255,.9);
background: linear-gradient(180deg,#fff 0%, rgba(255,98,0,.10) 60%, rgba(255,98,0,.22) 100%);
}
.gs-panel-root .gs-net-ic{
background: radial-gradient(circle at 30% 30%, #fff, rgba(255,255,255,.6) 35%, rgba(0,0,0,.06));
border:1px solid rgba(0,0,0,.06);
}
/* 3D icon buttons in sticky header */
.gs-header-actions{
display:flex;
align-items:center;
gap:10px;
flex-wrap:nowrap;
}
.gs-icon-btn{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
width:58px;
height:44px;
padding:6px 6px;
border-radius:12px;
border:1px solid rgba(0,0,0,.08);
background: linear-gradient(180deg, #ffffff 0%, #f4f6fb 100%);
box-shadow: 0 6px 14px rgba(0,0,0,.10);
cursor:pointer;
transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.gs-icon-btn:hover{
transform: translateY(-1px);
box-shadow: 0 10px 18px rgba(0,0,0,.14);
border-color: rgba(255,106,0,.45);
}
.gs-icon-btn svg{
width:22px;height:22px;
filter: drop-shadow(0 1px 0 rgba(0,0,0,.12));
}
.gs-icon-btn .gs-icon-label{
font-size:10px;
line-height:1;
margin-top:3px;
color: var(--gs-secondary);
font-weight:700;
white-space:nowrap;
}
/* Network chips - premium ribbon-ish */
.gs-net-chip{
border-radius:14px;
border:1px solid rgba(0,0,0,.08);
background: linear-gradient(180deg, #fff 0%, #f6f7fb 100%);
box-shadow: 0 6px 14px rgba(0,0,0,.08);
transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.gs-net-chip:hover{
transform: translateY(-1px);
box-shadow: 0 10px 18px rgba(0,0,0,.12);
border-color: rgba(255,106,0,.45);
}
.gs-net-chip.is-active{
border-color: var(--gs-primary);
box-shadow: 0 12px 22px rgba(255,106,0,.18), 0 2px 0 rgba(0,0,0,.04) inset;
transform: translateY(-1px) scale(1.02);
}
.gs-net-chip.is-active::after{
content:"";
position:absolute;
inset:-2px;
border-radius:16px;
pointer-events:none;
background: linear-gradient(90deg, rgba(255,106,0,.25), rgba(12,56,102,.18));
z-index:-1;
filter: blur(8px);
}
/* Sidebar: remove link underline */
.gs-sidebar a{
text-decoration:none !important;
}
.gs-panel-hero{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}.gs-soft-section{background:#fff;border:1px solid #e5e7eb;border-radius:18px;box-shadow:0 10px 26px rgba(15,23,42,.05)}.gs-section-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}.gs-metric-card,.gs-soft-card{background:#fff7f0;border:1px solid rgba(255,122,26,.18);border-radius:16px;padding:14px}.gs-soft-card{background:#fff}.gs-metric-label{font-size:12px;font-weight:800;color:#64748b;text-transform:uppercase}.gs-metric-value{margin-top:6px;font-size:24px;font-weight:900;color:#0f172a}.gs-badge-pill{display:inline-flex;align-items:center;padding:7px 12px;border-radius:999px;background:#fff3e8;color:#c2410c;font-size:12px;font-weight:800;border:1px solid rgba(255,122,26,.22)}.gs-badge-pill.is-active{background:linear-gradient(135deg,#ff7a18,#ff3d54);color:#fff;border-color:transparent}.gs-info-box{padding:12px 14px;border-radius:14px;background:#f8fafc;border:1px solid #e2e8f0;color:#334155}
/* Premium user dashboard system */
.gs-page-hero{background:linear-gradient(135deg,#0c3866 0%,#0f4c81 42%,#ff7a18 120%);color:#fff;border-radius:20px;padding:22px 22px 18px;box-shadow:0 18px 40px rgba(12,56,102,.18);margin:0 0 16px;position:relative;overflow:hidden}
.gs-page-hero:before{content:"";position:absolute;right:-40px;top:-50px;width:180px;height:180px;background:radial-gradient(circle,rgba(255,255,255,.20),rgba(255,255,255,0));border-radius:50%}
.gs-page-hero h1,.gs-page-hero h2,.gs-page-hero h3{margin:0;color:#fff}
.gs-page-hero p{margin:8px 0 0;color:rgba(255,255,255,.86)}
.gs-hero-grid{display:grid;grid-template-columns:1.4fr .9fr;gap:14px;align-items:start}
.gs-hero-actions,.gs-hero-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.gs-hero-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);font-weight:800;font-size:12px;color:#fff}
.gs-hero-actions .gs-btn,.gs-quick-links .gs-btn{box-shadow:none}
.gs-surface-soft{background:linear-gradient(180deg,#fff 0%,#fbfcfe 100%);border:1px solid var(--gs-border);border-radius:18px;box-shadow:0 12px 26px rgba(2,8,23,.05)}
.gs-metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.gs-metric-card{padding:16px;border-radius:18px;background:#fff;border:1px solid var(--gs-border);box-shadow:0 10px 24px rgba(2,8,23,.05)}
.gs-metric-card .k{font-size:12px;font-weight:800;text-transform:uppercase;color:var(--gs-muted);letter-spacing:.03em}
.gs-metric-card .v{font-size:28px;line-height:1.1;font-weight:900;color:var(--gs-primary-2);margin-top:8px}
.gs-metric-card .s{font-size:13px;color:var(--gs-muted);margin-top:6px}
.gs-quick-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:16px 0}
.gs-quick-link{display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:16px;background:#fff;border:1px solid var(--gs-border);color:var(--gs-text);text-decoration:none;font-weight:800;box-shadow:0 8px 20px rgba(2,8,23,.04);transition:.18s ease}
.gs-quick-link:hover{transform:translateY(-2px);border-color:rgba(255,122,26,.35);box-shadow:0 14px 28px rgba(2,8,23,.08)}
.gs-quick-link .ico{width:38px;height:38px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,122,26,.10);color:var(--gs-primary);font-size:18px}
.gs-panel-intro{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;margin:14px 0 0;border-radius:16px;background:#fff;border:1px solid var(--gs-border);box-shadow:0 8px 18px rgba(2,8,23,.04)}
.gs-panel-intro .title{font-weight:900;color:var(--gs-primary-2)}
.gs-flow-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px}
.gs-flow-step{padding:14px;border-radius:16px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18)}
.gs-flow-step .n{display:inline-flex;width:28px;height:28px;border-radius:999px;align-items:center;justify-content:center;background:#fff;color:var(--gs-primary-2);font-weight:900;margin-bottom:10px}
.gs-flow-step .t{font-weight:800}
.gs-flow-step .d{font-size:13px;color:rgba(255,255,255,.84);margin-top:4px}
.gs-net-chip.active,.gs-net-chip.is-active{background:linear-gradient(180deg,#fff3e8 0%,#ffe8d3 100%) !important;border:2px solid #ff7a18 !important;box-shadow:0 14px 28px rgba(255,122,26,.18) !important;color:#0c3866 !important;transform:translateY(-1px) scale(1.02)}
.gs-net-chip:hover{transform:translateY(-2px)}
.gs-net-icon{background:linear-gradient(180deg,#fff,#fff6ee);border-color:rgba(255,122,26,.18)}
.gs-table-wrap,.gs-scrollbox{border:1px solid var(--gs-border);border-radius:16px;overflow:auto;background:#fff}
.gs-table thead th{background:#f8fafc;color:#334155;font-size:12px;text-transform:uppercase;letter-spacing:.03em}
.gs-table tbody tr:hover{background:#fff8f1}
.gs-badge,.gs-tab-count{border-radius:999px}
.gs-faq-card details{border:1px solid var(--gs-border);border-radius:14px;padding:14px 16px;background:#fff}
.gs-faq-card details+details{margin-top:10px}
.gs-faq-card summary{cursor:pointer;font-weight:800;color:var(--gs-primary-2)}
.gs-topbar{padding:12px 14px;border-radius:18px}
.gs-top-kpi{padding:8px 12px;border-radius:14px;background:linear-gradient(180deg,#fff,#f9fbff);border:1px solid var(--gs-border);min-width:120px}
.gs-top-kpis{display:flex;gap:10px;flex-wrap:wrap}
.gs-sidebar{border-radius:20px}
.gs-menu-item{border-radius:14px}
.gs-menu-item.active{background:linear-gradient(180deg,#fff4ea,#ffeddc);border-color:rgba(255,122,26,.30)}
.gs-menu-ico{width:32px;height:32px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:#f7f9fc}
@media (max-width: 980px){.gs-hero-grid,.gs-metric-grid,.gs-quick-links,.gs-flow-grid{grid-template-columns:1fr 1fr}.gs-top-kpis{display:grid;grid-template-columns:1fr 1fr;width:100%}.gs-topbar{align-items:flex-start;flex-direction:column}.gs-topbar-center,.gs-topbar-right{width:100%}}
@media (max-width: 640px){.gs-metric-grid,.gs-quick-links,.gs-flow-grid,.gs-hero-grid{grid-template-columns:1fr}.gs-page-hero{padding:18px 16px}.gs-panel-intro{flex-direction:column;align-items:flex-start}}
/* =========================================================
Premium Theme System / PWA polish / professional overrides
========================================================= */
.gs-panel-root{
--gs-card-bg: var(--gs-surface);
--gs-card-alt: var(--gs-surface-2);
min-height: 100vh;
padding: 8px 0 24px;
background:
radial-gradient(circle at top left, rgba(255,122,26,.12), transparent 30%),
radial-gradient(circle at top right, rgba(12,56,102,.12), transparent 28%),
linear-gradient(180deg, #f8fbff 0%, var(--gs-bg) 35%, #eef4fb 100%);
color: var(--gs-text);
}
.gs-panel-root .gs-layout{
gap: 18px;
}
.gs-panel-root .gs-sidebar,
.gs-panel-root .gs-topbar,
.gs-panel-root .gs-card,
.gs-panel-root .gs-no-box,
.gs-panel-root .gs-soft-card,
.gs-panel-root .gs-metric-card,
.gs-panel-root .gs-faq-card{
background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(248,251,255,.96) 100%);
border: 1px solid rgba(219,228,240,.95);
box-shadow: 0 18px 44px rgba(15,23,42,.07);
backdrop-filter: blur(10px);
}
.gs-panel-root .gs-sidebar{
border-radius: 22px;
}
.gs-panel-root .gs-brand{
background:
radial-gradient(circle at left top, rgba(255,122,26,.14), transparent 40%),
linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,255,.95));
border-bottom-color: rgba(219,228,240,.9);
}
.gs-panel-root .gs-brand-inner{
display:flex;
align-items:center;
gap:12px;
}
.gs-panel-root .gs-brand-logo{
width: 54px;
height: 54px;
border-radius: 18px;
overflow: hidden;
flex: 0 0 54px;
background: linear-gradient(135deg, rgba(255,122,26,.16), rgba(12,56,102,.16));
display:flex;
align-items:center;
justify-content:center;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
}
.gs-panel-root .gs-brand-logo img{
width:100%;
height:100%;
object-fit:cover;
}
.gs-panel-root .gs-brand-name{
font-size: 17px;
line-height: 1.1;
font-weight: 900;
color: var(--gs-text);
}
.gs-panel-root .gs-brand-sub{
margin-top: 4px;
color: var(--gs-muted);
}
.gs-panel-root .gs-menu-item{
position: relative;
min-height: 48px;
border-radius: 15px;
padding: 12px 14px;
color: var(--gs-text);
font-weight: 800;
}
.gs-panel-root .gs-menu-item:hover{
background: linear-gradient(90deg, rgba(255,122,26,.07), rgba(12,56,102,.04));
border-color: rgba(255,122,26,.16);
transform: translateX(2px);
}
.gs-panel-root .gs-menu-item.active{
background: linear-gradient(90deg, rgba(255,122,26,.16), rgba(255,255,255,.98));
color: var(--gs-primary-2);
border-color: rgba(255,122,26,.26);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 10px 22px rgba(255,122,26,.08);
}
.gs-panel-root .gs-menu-ico{
width: 34px;
height: 34px;
border-radius: 12px;
display:inline-flex;
align-items:center;
justify-content:center;
background: linear-gradient(135deg, rgba(255,122,26,.14), rgba(12,56,102,.08));
box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
}
.gs-panel-root .gs-topbar{
padding: 12px 14px;
border-radius: 22px;
background:
radial-gradient(circle at top right, rgba(255,122,26,.12), transparent 24%),
linear-gradient(180deg, rgba(255,255,255,.98), rgba(249,252,255,.97));
}
.gs-panel-root .gs-top-kpis{
gap:10px;
}
.gs-panel-root .gs-top-kpi{
width: 132px;
border-radius: 14px;
padding: 9px 10px;
border: 1px solid rgba(219,228,240,.95);
background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,248,252,.98));
box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.gs-panel-root .gs-top-search input{
height: 44px;
border-radius: 14px;
border: 1px solid rgba(219,228,240,.95);
background: rgba(255,255,255,.9);
color: var(--gs-text);
}
.gs-panel-root .gs-btn,
.gs-panel-root button,
.gs-panel-root input[type="submit"],
.gs-panel-root input[type="button"]{
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.gs-panel-root .gs-btn:hover,
.gs-panel-root button:hover,
.gs-panel-root input[type="submit"]:hover,
.gs-panel-root input[type="button"]:hover{
transform: translateY(-1px);
}
.gs-panel-root .gs-btn-primary,
.gs-panel-root .gs-btn.primary,
.gs-panel-root .gs-btn.gs-btn-primary{
background: linear-gradient(135deg, var(--gs-primary), #ff9a4d) !important;
color: #fff !important;
border-color: rgba(255,122,26,.48) !important;
box-shadow: 0 16px 30px rgba(255,122,26,.24);
}
.gs-panel-root .gs-btn-ghost,
.gs-panel-root .gs-btn-soft{
background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,249,253,.98));
border: 1px solid rgba(219,228,240,.95);
color: var(--gs-text);
}
.gs-panel-root .gs-panel-intro,
.gs-panel-root .gs-page-hero,
.gs-panel-root .gs-soft-section{
position: relative;
overflow: hidden;
border-radius: 22px;
border: 1px solid rgba(219,228,240,.95);
background:
radial-gradient(circle at top right, rgba(255,122,26,.14), transparent 25%),
radial-gradient(circle at bottom left, rgba(12,56,102,.10), transparent 28%),
linear-gradient(135deg, rgba(255,255,255,.98), rgba(246,250,255,.98));
box-shadow: 0 24px 60px rgba(15,23,42,.08);
}
.gs-panel-root .gs-panel-intro{
margin: 16px 0;
padding: 18px 20px;
}
.gs-panel-root .gs-panel-intro .title,
.gs-panel-root .gs-page-hero h2,
.gs-panel-root .gs-section-hero__title h2,
.gs-panel-root .gs-section-hero__title h3{
font-size: 24px;
line-height: 1.15;
font-weight: 950;
color: var(--gs-text);
}
.gs-panel-root .gs-hero-chip,
.gs-panel-root .gs-chip,
.gs-panel-root .gs-badge-pill{
border-radius: 999px;
padding: 8px 12px;
border: 1px solid rgba(219,228,240,.95);
background: rgba(255,255,255,.82);
color: var(--gs-primary-2);
font-weight: 800;
}
.gs-panel-root .gs-page{
padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 88px);
}
.gs-panel-root .gs-field label,
.gs-panel-root label{
color: var(--gs-primary-2);
font-weight: 800;
}
.gs-panel-root input:not([type="checkbox"]):not([type="radio"]),
.gs-panel-root select,
.gs-panel-root textarea{
min-height: 46px;
border-radius: 14px !important;
border: 1px solid rgba(219,228,240,.98) !important;
background: rgba(255,255,255,.98) !important;
color: var(--gs-text) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}
.gs-panel-root textarea{
min-height: 110px;
}
.gs-panel-root input:focus,
.gs-panel-root select:focus,
.gs-panel-root textarea:focus{
outline: none !important;
border-color: rgba(255,122,26,.48) !important;
box-shadow: 0 0 0 4px rgba(255,122,26,.10) !important;
}
.gs-panel-root table{
border-collapse: separate;
border-spacing: 0;
}
.gs-panel-root table th{
background: linear-gradient(180deg, #f9fbff, #f2f7fd);
color: var(--gs-primary-2);
font-weight: 900;
letter-spacing: .02em;
}
.gs-panel-root table th,
.gs-panel-root table td{
border-color: rgba(219,228,240,.9) !important;
vertical-align: middle;
}
.gs-panel-root .gs-mobile-dock{
display:none;
}
.gs-panel-root .gs-gateway-grid{
display:grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 14px;
}
.gs-panel-root .gs-gateway-card{
position:relative;
padding:18px;
border-radius: 20px;
border: 1px solid rgba(219,228,240,.95);
background:
radial-gradient(circle at top right, rgba(255,122,26,.12), transparent 26%),
linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,250,255,.98));
box-shadow: 0 18px 38px rgba(15,23,42,.06);
}
.gs-panel-root .gs-gateway-card__head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:12px;
}
.gs-panel-root .gs-gateway-card__icon{
width:52px;
height:52px;
border-radius: 16px;
display:inline-flex;
align-items:center;
justify-content:center;
font-size: 24px;
background: linear-gradient(135deg, rgba(255,122,26,.16), rgba(12,56,102,.12));
box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.gs-panel-root .gs-gateway-card__title{
font-size: 18px;
font-weight: 900;
color: var(--gs-text);
}
.gs-panel-root .gs-gateway-card__desc{
margin-top: 6px;
color: var(--gs-muted);
font-size: 13px;
line-height: 1.55;
}
.gs-panel-root .gs-gateway-card__meta{
display:flex;
gap:8px;
flex-wrap:wrap;
margin-top: 14px;
}
.gs-panel-root .gs-gateway-card__meta span{
display:inline-flex;
align-items:center;
gap:6px;
padding:7px 10px;
border-radius:999px;
border: 1px solid rgba(219,228,240,.95);
background:#fff;
font-size:12px;
font-weight:800;
color: var(--gs-primary-2);
}
.gs-panel-root .gs-info-box,
.gs-panel-root .gs-alert,
.gs-panel-root .gs-note-box{
border-radius: 16px;
border: 1px solid rgba(219,228,240,.95);
background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,249,253,.98));
padding: 14px 16px;
}
.gs-panel-root .gs-stat-list{
display:grid;
grid-template-columns:repeat(4, minmax(0,1fr));
gap:12px;
}
.gs-panel-root .gs-stat-list .gs-metric-card{
padding:16px;
border-radius:18px;
}
.gs-panel-root .gs-metric-label{
color: var(--gs-muted);
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .04em;
}
.gs-panel-root .gs-metric-value{
margin-top: 8px;
font-size: 24px;
line-height: 1.1;
font-weight: 950;
color: var(--gs-text);
}
.gs-panel-root .gs-flow-step,
.gs-panel-root .gs-service-pill{
border-radius: 18px;
background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,255,.98));
border: 1px solid rgba(219,228,240,.95);
box-shadow: 0 14px 28px rgba(15,23,42,.04);
}
.gs-panel-root .gs-flow-step .n{
background: linear-gradient(135deg, var(--gs-primary), #ff9a4d);
color:#fff;
box-shadow: 0 12px 22px rgba(255,122,26,.24);
}
@media (max-width: 1100px){
.gs-panel-root .gs-gateway-grid,
.gs-panel-root .gs-stat-list{
grid-template-columns: repeat(2, minmax(0,1fr));
}
}
@media (max-width: 980px){
.gs-panel-root{
padding: 0 0 calc(env(safe-area-inset-bottom, 0px) + 18px);
}
.gs-panel-root .gs-layout{
grid-template-columns: 1fr;
}
.gs-panel-root .gs-sidebar{
position: fixed;
top: 12px;
left: 12px;
bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
width: min(86vw, 320px);
height: auto;
z-index: 1000;
transform: translateX(-110%);
transition: transform .22s ease;
}
.gs-panel-root .gs-sidebar.open{
transform: translateX(0);
}
.gs-panel-root .gs-topbar{
top: 10px;
}
.gs-panel-root .gs-topbar-center{
display:none;
}
.gs-panel-root .gs-top-search input{
width: 100%;
max-width: none;
}
.gs-panel-root .gs-panel-intro{
padding: 16px;
margin-top: 14px;
}
.gs-panel-root .gs-mobile-dock{
position: fixed;
left: 12px;
right: 12px;
bottom: max(12px, env(safe-area-inset-bottom, 0px));
display:grid;
grid-template-columns: repeat(5, minmax(0,1fr));
gap:8px;
padding: 8px;
border-radius: 22px;
border: 1px solid rgba(219,228,240,.95);
background: rgba(255,255,255,.96);
backdrop-filter: blur(16px);
box-shadow: 0 22px 44px rgba(15,23,42,.14);
z-index: 1001;
}
.gs-panel-root .gs-mobile-dock__item{
min-height: 58px;
border-radius: 16px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:4px;
text-decoration:none;
color: var(--gs-muted);
font-size: 11px;
font-weight: 900;
border: 1px solid transparent;
background: transparent;
}
.gs-panel-root .gs-mobile-dock__item span{
font-size: 18px;
line-height: 1;
}
.gs-panel-root .gs-mobile-dock__item.is-active{
color: var(--gs-primary-2);
background: linear-gradient(180deg, rgba(255,122,26,.12), rgba(255,255,255,.96));
border-color: rgba(255,122,26,.24);
}
}
@media (max-width: 640px){
.gs-panel-root .gs-gateway-grid,
.gs-panel-root .gs-stat-list{
grid-template-columns: 1fr;
}
.gs-panel-root .gs-panel-intro .title,
.gs-panel-root .gs-page-hero h2{
font-size: 20px;
}
.gs-panel-root .gs-topbar{
padding: 10px 12px;
}
.gs-panel-root .gs-topbar-right{
gap: 8px;
}
.gs-panel-root .gs-top-search{
display:none;
}
.gs-panel-root .gs-card,
.gs-panel-root .gs-no-box,
.gs-panel-root .gs-gateway-card{
border-radius: 18px;
}
}
/* Unified premium user dashboard theme */
.gs-panel-shell{
color: var(--gs-text);
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.gs-panel-intro,
.gs-faq-card{
display:none !important;
}
.gs-page{
display:flex;
flex-direction:column;
gap:16px;
}
.gs-page > .gs-card,
.gs-page > .gs-grid,
.gs-page > .gs-quick-links{
margin-top:0 !important;
}
.gs-card{
border-radius:18px;
border:1px solid rgba(12,56,102,.10);
box-shadow: 0 12px 30px rgba(15,23,42,.05);
}
.gs-card h1,.gs-card h2,.gs-card h3,.gs-card h4{
color:#0c3866;
letter-spacing:-0.02em;
}
.gs-card p,.gs-card li,.gs-card td,.gs-card th,.gs-muted{
line-height:1.55;
}
.gs-btn,
button.gs-btn,
a.gs-btn{
border-radius:14px;
min-height:42px;
font-weight:800;
box-shadow:0 8px 18px rgba(255,106,0,.14);
}
.gs-btn.gs-btn-ghost,
.gs-btn.secondary{
box-shadow:none;
}
.gs-input,
select.gs-input,
input.gs-input,
textarea.gs-input{
min-height:44px;
border-radius:14px;
}
.gs-topbar-title{
letter-spacing:-0.02em;
font-weight:800;
}
.gs-top-kpi,
.gs-top-search input,
.gs-icon-btn{
border-radius:14px !important;
}
.gs-quick-link{
border-radius:18px;
min-height:58px;
}
.gs-table thead th{
color:#0c3866;
font-weight:800;
}
.gs-table tbody tr:hover{
background:rgba(255,106,0,.03);
}
.gs-faq-footer{
margin-top:8px !important;
padding:18px;
}
.gs-faq-footer__head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:12px;
flex-wrap:wrap;
margin-bottom:12px;
}
.gs-faq-footer__head h3{
margin:0 0 6px 0;
font-size:18px;
}
.gs-faq-compact{
display:flex;
flex-direction:column;
gap:10px;
}
.gs-faq-item{
border:1px solid var(--gs-border);
border-radius:14px;
background:linear-gradient(180deg,#fff,#fbfcfe);
overflow:hidden;
}
.gs-faq-item summary{
list-style:none;
cursor:pointer;
padding:14px 16px;
font-weight:800;
color:#0f172a;
position:relative;
padding-right:44px;
}
.gs-faq-item summary::-webkit-details-marker{display:none}
.gs-faq-item summary::after{
content:"+";
position:absolute;
right:16px;
top:50%;
transform:translateY(-50%);
width:22px;
height:22px;
border-radius:999px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(255,106,0,.08);
color:var(--gs-primary);
font-weight:900;
}
.gs-faq-item[open] summary::after{
content:"–";
}
.gs-faq-answer{
padding:0 16px 16px 16px;
color:var(--gs-muted);
}
@media (max-width: 768px){
.gs-faq-footer{
padding:14px;
}
}
/* v3 corrections: preserve original flows, remove duplicate top quick links */
.gs-quick-links{
display:none !important;
}
.gs-faq-footer{
border-radius:18px;
border:1px solid rgba(12,56,102,.10);
background:linear-gradient(180deg,#ffffff,#fbfcfe);
box-shadow:0 12px 30px rgba(15,23,42,.05);
}
.gs-faq-footer .gs-btn,
.gs-faq-footer a.gs-btn{
min-height:40px;
}
.gs-page-hero{
margin-top:0;
}
.gs-page-hero h2{
color:#0c3866;
letter-spacing:-0.02em;
margin-bottom:8px;
}
.gs-page-hero p{
color:var(--gs-muted);
}
.gs-flow-grid{
gap:14px;
}
.gs-flow-step{
min-height:120px;
}
.gs-dashboard-hero .gs-hero-card,
.gs-dashboard-panels .gs-card,
.gs-dashboard-panels .gs-quick-list,
.gs-dashboard-panels .gs-quick-link{
border-radius:18px;
}
/* Keep original New Order network layout intact, only polish visuals */
.gs-net-item,
.gs-net-chip,
.gs-network-item,
.gs-network-chip,
button[data-network],
.gs-net-scroller button{
transition:all .18s ease;
}
.gs-net-scroller .is-active,
.gs-net-scroller .active,
.gs-net-scroller [aria-pressed="true"]{
box-shadow:0 10px 24px rgba(255,122,26,.16);
}
/* =========================================================
User Dashboard Professional Polish v4
- Typography system
- Consistent cards, borders, shadows
- Unified buttons, fields, headings, tables
- Safer visual-only layer (no logic changes)
========================================================= */
:root{
--gs-font-sans: Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--gs-bg-app: linear-gradient(180deg, #fffdfa 0%, #f7f9fc 100%);
--gs-surface-elevated: #ffffff;
--gs-surface-soft-2: #fff8f2;
--gs-border-strong: #d9e2ee;
--gs-text-soft: #42526b;
--gs-heading: #163b67;
--gs-shadow-card: 0 16px 34px rgba(15, 23, 42, .06);
--gs-shadow-card-hover: 0 18px 40px rgba(15, 23, 42, .10);
--gs-shadow-btn: 0 10px 22px rgba(255, 106, 0, .18);
--gs-btn-grad: linear-gradient(135deg, #ff7b14 0%, #ff6a00 55%, #ff8b1f 100%);
--gs-btn-grad-2: linear-gradient(135deg, #123f73 0%, #0c3866 100%);
--gs-ring: 0 0 0 4px rgba(255, 106, 0, .12);
}
.gs-panel-shell{
font-family: var(--gs-font-sans);
color: var(--gs-text);
}
.gs-content,
.gs-main,
.gs-tab-content{
background: var(--gs-bg-app);
}
.gs-panel-shell h1,
.gs-panel-shell h2,
.gs-panel-shell h3,
.gs-panel-shell h4,
.gs-panel-shell h5,
.gs-panel-shell h6{
font-family: var(--gs-font-sans);
color: var(--gs-heading);
letter-spacing: -.02em;
line-height: 1.15;
margin: 0;
}
.gs-panel-shell h1{ font-size: clamp(28px, 3vw, 36px); font-weight: 900; }
.gs-panel-shell h2{ font-size: clamp(24px, 2.5vw, 31px); font-weight: 850; }
.gs-panel-shell h3{ font-size: 20px; font-weight: 850; }
.gs-panel-shell h4{ font-size: 15px; font-weight: 900; }
.gs-panel-shell p,
.gs-panel-shell li,
.gs-panel-shell td,
.gs-panel-shell th,
.gs-panel-shell label,
.gs-panel-shell input,
.gs-panel-shell select,
.gs-panel-shell textarea,
.gs-panel-shell button{
font-family: var(--gs-font-sans);
}
.gs-muted,
.gs-panel-shell .gs-muted{
color: var(--gs-text-soft) !important;
line-height: 1.6;
}
.gs-layout{ gap: 18px; }
.gs-sidebar{
background:
radial-gradient(circle at top right, rgba(255,106,0,.08), transparent 30%),
linear-gradient(180deg, #fffdfb 0%, #ffffff 100%);
border: 1px solid var(--gs-border);
box-shadow: 0 18px 42px rgba(15,23,42,.06);
}
.gs-brand{
background: linear-gradient(180deg, rgba(255,248,242,.9), rgba(255,255,255,1));
}
.gs-brand-mark{
box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 20px rgba(15,23,42,.08);
}
.gs-nav a,
.gs-nav .gs-tab-btn{
border-radius: 16px;
min-height: 52px;
font-weight: 800;
color: var(--gs-text);
transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}
.gs-nav a:hover,
.gs-nav .gs-tab-btn:hover{
transform: translateY(-1px);
box-shadow: 0 12px 24px rgba(15,23,42,.05);
}
.gs-nav a.is-active,
.gs-nav .gs-tab-btn.is-active{
background: linear-gradient(180deg, #fffaf5 0%, #fff4ea 100%);
border-color: rgba(255,106,0,.24);
box-shadow: inset 0 0 0 1px rgba(255,106,0,.12), 0 14px 28px rgba(255,106,0,.10);
color: var(--gs-heading);
}
.gs-topbar,
.gs-topbar-card,
.gs-top-stat,
.gs-card,
.gs-stat,
.gs-page-hero,
.gs-no-box,
.gs-faq,
.gs-table-wrap,
.gs-drawer__panel{
background: var(--gs-surface-elevated);
border: 1px solid var(--gs-border);
box-shadow: var(--gs-shadow-card);
}
.gs-card:hover,
.gs-stat:hover,
.gs-page-hero:hover,
.gs-no-box:hover{
box-shadow: var(--gs-shadow-card-hover);
}
.gs-page-hero,
.gs-card,
.gs-stat,
.gs-no-box,
.gs-table-wrap,
.gs-faq{
border-radius: 22px;
}
.gs-card{
padding: 18px;
}
.gs-card-head{
margin-bottom: 14px;
}
.gs-topbar{
border-radius: 20px;
padding: 12px;
background:
linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.94));
backdrop-filter: saturate(1.2) blur(8px);
}
.gs-topbar-search input,
.gs-input,
.gs-panel-shell input[type="search"],
.gs-panel-shell input[type="text"],
.gs-panel-shell input[type="url"],
.gs-panel-shell input[type="number"],
.gs-panel-shell input[type="email"],
.gs-panel-shell input[type="password"],
.gs-panel-shell select,
.gs-panel-shell textarea{
min-height: 46px;
border-radius: 14px;
border: 1px solid var(--gs-border-strong);
background: #fff;
color: var(--gs-text);
padding: 0 14px;
box-shadow: inset 0 1px 2px rgba(15,23,42,.03);
transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.gs-panel-shell textarea{
min-height: 120px;
padding: 12px 14px;
}
.gs-topbar-search input:focus,
.gs-input:focus,
.gs-panel-shell input:focus,
.gs-panel-shell select:focus,
.gs-panel-shell textarea:focus{
outline: none;
border-color: rgba(255,106,0,.55);
box-shadow: var(--gs-ring);
}
.gs-btn,
.gs-panel-shell button,
.gs-panel-shell .button{
border-radius: 14px;
min-height: 44px;
padding: 0 16px;
font-weight: 900;
letter-spacing: -.01em;
border: 1px solid rgba(255,106,0,.16);
background: var(--gs-btn-grad);
color: #fff !important;
box-shadow: var(--gs-shadow-btn);
transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.gs-btn:hover,
.gs-panel-shell button:hover{
transform: translateY(-1px);
filter: saturate(1.03);
box-shadow: 0 14px 26px rgba(255,106,0,.22);
}
.gs-btn:active,
.gs-panel-shell button:active{
transform: translateY(0);
}
.gs-btn.secondary,
.gs-btn-ghost,
.gs-panel-shell .button-secondary{
background: #fff !important;
color: var(--gs-heading) !important;
border-color: var(--gs-border-strong) !important;
box-shadow: 0 10px 20px rgba(15,23,42,.05) !important;
}
.gs-btn.secondary:hover,
.gs-btn-ghost:hover{
border-color: rgba(255,106,0,.25) !important;
}
.gs-btn.primary,
.gs-btn.gs-btn-primary{
background: var(--gs-btn-grad) !important;
color: #fff !important;
}
.gs-icon-btn{
border-radius: 14px;
background: #fffaf4;
border: 1px solid rgba(255,106,0,.12);
box-shadow: 0 10px 18px rgba(15,23,42,.06);
}
.gs-stat{
padding: 18px;
border-radius: 18px;
background:
radial-gradient(circle at top right, rgba(255,106,0,.05), transparent 26%),
linear-gradient(180deg, #ffffff 0%, #fffdfb 100%);
}
.gs-stat-label{
color: #607089;
text-transform: uppercase;
letter-spacing: .03em;
font-size: 12px;
font-weight: 900;
margin-bottom: 10px;
}
.gs-stat-val{
color: var(--gs-heading);
font-size: clamp(28px, 2.4vw, 38px);
font-weight: 900;
line-height: 1;
}
.gs-page-hero{
padding: 18px;
background:
radial-gradient(circle at top right, rgba(255,106,0,.06), transparent 28%),
linear-gradient(180deg, #fffdfa 0%, #ffffff 100%);
}
.gs-hero-chip{
border-radius: 999px;
border: 1px solid rgba(255,106,0,.16);
background: #fff7f0;
color: var(--gs-heading);
font-weight: 800;
}
.gs-flow-step{
border-radius: 18px;
border: 1px solid var(--gs-border);
background: linear-gradient(180deg, #ffffff 0%, #fffdfb 100%);
padding: 14px;
}
.gs-flow-step .n{
box-shadow: 0 8px 18px rgba(255,106,0,.18);
}
.gs-table{
border-collapse: separate;
border-spacing: 0;
}
.gs-table thead th{
background: #f8fbff;
color: #51657e;
font-size: 12px;
text-transform: uppercase;
letter-spacing: .03em;
font-weight: 900;
border-bottom: 1px solid var(--gs-border);
position: sticky;
top: 0;
z-index: 1;
}
.gs-table tbody tr{
transition: background-color .16s ease, transform .16s ease;
}
.gs-table tbody tr:hover{
background: #fffaf5;
}
.gs-table tbody td{
vertical-align: middle;
border-bottom: 1px solid #edf2f8;
}
.gs-empty{
border-radius: 20px;
border: 1px dashed var(--gs-border-strong);
background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
padding: 26px;
}
.gs-empty-title{
color: var(--gs-heading);
font-size: 18px;
font-weight: 900;
}
.gs-tabs--pill .gs-tab-btn,
.gs-no-tab{
min-height: 42px;
border-radius: 999px;
border: 1px solid var(--gs-border);
background: #fff;
color: var(--gs-heading);
box-shadow: 0 8px 18px rgba(15,23,42,.04);
}
.gs-tabs--pill .gs-tab-btn.is-active,
.gs-no-tab.is-active{
background: linear-gradient(180deg, #fff8f1 0%, #fff1e2 100%);
border-color: rgba(255,106,0,.22);
color: var(--gs-heading);
}
.gs-faq{
padding: 14px 16px;
background:
linear-gradient(180deg, #ffffff 0%, #fffdfb 100%);
}
.gs-faq summary{
font-weight: 800;
color: var(--gs-heading);
}
.gs-faq details{
border-radius: 14px;
border: 1px solid #edf2f8;
background: #fff;
margin-top: 10px;
padding: 12px 14px;
}
.gs-faq details[open]{
border-color: rgba(255,106,0,.18);
background: #fffaf5;
}
.gs-faq .gs-btn{
min-height: 40px;
}
.gs-no-box h3,
.gs-card h3,
.gs-card-head h3{
color: var(--gs-heading);
font-size: 22px;
font-weight: 900;
margin-bottom: 2px;
}
.gs-no-kv .kv,
.gs-kv .kv{
border-radius: 14px;
background: #fbfdff;
border: 1px solid #edf2f8;
}
.gs-no-kv .k,
.gs-kv .k{
color: #6b7c94;
font-weight: 800;
}
.gs-no-kv .v,
.gs-kv .v{
color: var(--gs-heading);
font-weight: 900;
}
.gs-pager{
margin-top: 16px;
}
.gs-order-status,
.gs-badge,
[class*="gs-status-badge"]{
border-radius: 999px;
font-weight: 800;
}
.gs-mobile-dock{
background: rgba(255,255,255,.94);
border-top: 1px solid rgba(217,226,238,.9);
backdrop-filter: blur(10px);
}
@media (max-width: 991px){
.gs-layout{ gap: 14px; }
.gs-card, .gs-page-hero, .gs-no-box, .gs-table-wrap{ border-radius: 18px; }
.gs-panel-shell h2{ font-size: 26px; }
.gs-btn, .gs-panel-shell button{ min-height: 42px; padding: 0 14px; }
}
@media (max-width: 767px){
.gs-topbar{ padding: 10px; border-radius: 16px; }
.gs-card, .gs-page-hero, .gs-no-box, .gs-stat, .gs-faq{ padding: 14px; }
.gs-stat-val{ font-size: 28px; }
.gs-panel-shell h3{ font-size: 18px; }
}
/* ==============================
v6 Professional refinement pass
- stronger design system
- safer visual-only overrides
============================== */
:root {
--gs-bg: #f4f7fb;
--gs-surface: #ffffff;
--gs-surface-2: #f7faff;
--gs-surface-3: #eef4fb;
--gs-border: #dbe6f2;
--gs-text: #0f172a;
--gs-title: #0f2b46;
--gs-muted: #5f7188;
--gs-primary: #1d4ed8;
--gs-primary-2: #0f2b46;
--gs-accent: #06b6d4;
--gs-violet: #7c3aed;
--gs-success: #0f9f6e;
--gs-warning: #f59e0b;
--gs-danger: #dc2626;
--gs-primary-soft: rgba(29, 78, 216, .12);
--gs-accent-soft: rgba(6, 182, 212, .10);
--gs-violet-soft: rgba(124, 58, 237, .10);
--gs-success-soft: rgba(15, 159, 110, .10);
--gs-radius: 18px;
--gs-radius-sm: 12px;
--gs-shadow: 0 18px 42px rgba(15, 23, 42, .08);
--gs-shadow-soft: 0 12px 28px rgba(15, 23, 42, .06);
}
.gs-panel-shell {
padding-bottom: 28px !important;
}
.gs-main {
position: relative;
}
.gs-main::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 220px;
pointer-events: none;
background:
radial-gradient(circle at top right, rgba(6, 182, 212, .10), transparent 35%),
radial-gradient(circle at top left, rgba(29, 78, 216, .09), transparent 32%);
z-index: 0;
}
.gs-main > * {
position: relative;
z-index: 1;
}
.gs-sidebar {
background:
linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,250,255,0.98));
border-color: rgba(151, 174, 197, .35);
}
.gs-brand {
background:
linear-gradient(135deg, rgba(29, 78, 216, .08), rgba(6, 182, 212, .04) 55%, rgba(255,255,255,1));
}
.gs-brand-title,
.gs-topbar .gs-page-title,
.gs-topbar h1,
.gs-topbar h2,
.gs-card h2,
.gs-main h1,
.gs-main h2,
.gs-main h3,
.gs-main h4 {
color: var(--gs-title);
letter-spacing: -.02em;
}
.gs-brand-sub,
.gs-muted,
.gs-main p,
.gs-main li,
.gs-main small {
color: var(--gs-muted);
}
.gs-nav a {
border-radius: 14px;
color: #143252;
}
.gs-nav a:hover {
background: linear-gradient(180deg, #f8fbff, #eef5ff);
border-color: rgba(151, 174, 197, .32);
transform: translateY(-1px);
}
.gs-nav a.active {
background:
linear-gradient(135deg, rgba(29, 78, 216, .12), rgba(6, 182, 212, .08));
border-color: rgba(29, 78, 216, .22);
color: var(--gs-title);
box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.gs-topbar,
.gs-card,
.gs-table-wrap,
.gs-page-hero {
border-color: rgba(151, 174, 197, .30) !important;
box-shadow: var(--gs-shadow-soft) !important;
}
.gs-topbar {
background:
linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,251,255,.96));
backdrop-filter: blur(10px);
}
.gs-card {
background:
linear-gradient(180deg, rgba(255,255,255,1), rgba(249,251,255,1));
}
.gs-page-hero {
overflow: hidden;
border-radius: calc(var(--gs-radius) + 2px);
padding: 22px !important;
background:
radial-gradient(circle at top right, rgba(6, 182, 212, .12), transparent 28%),
radial-gradient(circle at bottom left, rgba(124, 58, 237, .10), transparent 30%),
linear-gradient(135deg, rgba(255,255,255,1), rgba(244,248,255,1));
}
.gs-page-hero h2 {
font-size: 28px !important;
margin-bottom: 8px !important;
}
.gs-hero-chip,
.gs-badge,
.gs-tab-btn,
.gs-tabs .gs-tab-btn {
box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.gs-btn,
.gs-btn:visited,
button.gs-btn,
input[type="submit"].gs-btn {
border: 1px solid rgba(29, 78, 216, .25);
background: linear-gradient(135deg, #1d4ed8, #06b6d4);
color: #fff;
box-shadow: 0 14px 24px rgba(29, 78, 216, .20);
}
.gs-btn:hover,
button.gs-btn:hover,
input[type="submit"].gs-btn:hover {
box-shadow: 0 18px 28px rgba(29, 78, 216, .24);
}
.gs-btn.secondary,
.gs-btn.gs-btn-ghost,
.gs-btn.ghost {
background: linear-gradient(180deg, #ffffff, #f3f7fd);
color: var(--gs-title);
border-color: rgba(151, 174, 197, .42);
box-shadow: none;
}
.gs-btn.secondary:hover,
.gs-btn.gs-btn-ghost:hover,
.gs-btn.ghost:hover {
background: linear-gradient(180deg, #ffffff, #edf4ff);
}
.gs-input,
.gs-select,
.gs-textarea,
.gs-main input[type="text"],
.gs-main input[type="number"],
.gs-main input[type="email"],
.gs-main input[type="url"],
.gs-main input[type="password"],
.gs-main select,
.gs-main textarea {
background: linear-gradient(180deg, #ffffff, #fbfdff);
border-color: rgba(151, 174, 197, .42);
border-radius: 15px;
}
.gs-input:focus,
.gs-select:focus,
.gs-textarea:focus,
.gs-main input:focus,
.gs-main select:focus,
.gs-main textarea:focus {
border-color: rgba(29, 78, 216, .45);
box-shadow: 0 0 0 4px rgba(29, 78, 216, .12);
}
.gs-label {
color: var(--gs-title);
font-size: 12px;
text-transform: uppercase;
letter-spacing: .04em;
}
.gs-stat {
position: relative;
overflow: hidden;
border-radius: 18px;
background:
linear-gradient(180deg, rgba(255,255,255,1), rgba(248,251,255,1));
border-color: rgba(151, 174, 197, .32);
box-shadow: 0 14px 30px rgba(15, 23, 42, .06);
}
.gs-stat::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, #1d4ed8, #06b6d4);
opacity: .95;
}
.gs-stat:nth-child(2)::before { background: linear-gradient(90deg, #7c3aed, #a78bfa); }
.gs-stat:nth-child(3)::before { background: linear-gradient(90deg, #0f9f6e, #34d399); }
.gs-stat:nth-child(4)::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.gs-stat:nth-child(5)::before { background: linear-gradient(90deg, #dc2626, #fb7185); }
.gs-stat-label {
text-transform: uppercase;
letter-spacing: .05em;
}
.gs-stat-val {
color: var(--gs-title);
font-size: 24px;
}
.gs-hero-chip {
border: 1px solid rgba(151, 174, 197, .34);
background: linear-gradient(180deg, #ffffff, #f5f9ff);
color: var(--gs-title);
}
.gs-table-wrap {
background: linear-gradient(180deg, #ffffff, #f9fbff);
}
.gs-table {
background: transparent;
}
.gs-table th {
background: linear-gradient(180deg, #f7faff, #eff5fc);
color: var(--gs-title);
border-bottom-color: rgba(151, 174, 197, .36);
}
.gs-table td {
color: var(--gs-text);
}
.gs-table tbody tr {
transition: background .15s ease;
}
.gs-table tbody tr:hover {
background: rgba(29, 78, 216, .035);
}
.gs-alert {
border-color: rgba(151, 174, 197, .34);
background: linear-gradient(180deg, #f8fbff, #f3f8fe);
color: var(--gs-title);
}
.gs-badge {
background: linear-gradient(180deg, #eff6ff, #e6f7ff);
color: #17416d;
border-color: rgba(29, 78, 216, .18);
}
.gs-tabs--pill,
.gs-tabs {
gap: 8px;
}
.gs-tab-btn,
.gs-tabs .gs-tab-btn {
border-radius: 999px !important;
border: 1px solid rgba(151, 174, 197, .34) !important;
background: linear-gradient(180deg, #ffffff, #f5f8fd) !important;
color: var(--gs-title) !important;
font-weight: 800 !important;
}
.gs-tab-btn.is-active,
.gs-tabs .gs-tab-btn.is-active {
background: linear-gradient(135deg, rgba(29, 78, 216, .13), rgba(6, 182, 212, .12)) !important;
border-color: rgba(29, 78, 216, .22) !important;
color: var(--gs-title) !important;
}
.gs-network-btn,
.gs-network-pill,
.gs-networks button,
.gs-network-list button {
border-radius: 14px !important;
height: 48px;
background: linear-gradient(180deg, #ffffff, #f7fbff) !important;
border-color: rgba(151, 174, 197, .34) !important;
color: var(--gs-title) !important;
box-shadow: 0 8px 16px rgba(15, 23, 42, .04);
}
.gs-network-btn:hover,
.gs-network-pill:hover,
.gs-networks button:hover,
.gs-network-list button:hover {
border-color: rgba(29, 78, 216, .26) !important;
background: linear-gradient(180deg, #ffffff, #eef6ff) !important;
}
.gs-network-btn.is-active,
.gs-network-pill.is-active,
.gs-networks button.is-active,
.gs-network-list button.is-active,
.gs-networks button.active,
.gs-network-list button.active {
background: linear-gradient(135deg, rgba(29, 78, 216, .14), rgba(6, 182, 212, .10)) !important;
border-color: rgba(29, 78, 216, .28) !important;
color: var(--gs-title) !important;
box-shadow: 0 12px 22px rgba(29, 78, 216, .10);
}
.gs-page-hero .gs-hero-actions {
display: none;
}
.gs-page-hero .gs-flow-grid {
display: none;
}
.gs-faq-card,
.gs-faq-box,
.gs-faq-footer,
.gs-panel-faq,
.gs-accordion {
border-radius: 18px !important;
}
details.gs-faq-item,
.gs-accordion details {
border: 1px solid rgba(151, 174, 197, .34);
border-radius: 14px;
background: linear-gradient(180deg, #ffffff, #f7fbff);
padding: 0 14px;
margin-bottom: 10px;
}
details.gs-faq-item summary,
.gs-accordion details summary {
list-style: none;
cursor: pointer;
padding: 14px 0;
font-weight: 800;
color: var(--gs-title);
}
details.gs-faq-item > div,
.gs-accordion details > div {
padding: 0 0 14px;
color: var(--gs-muted);
}
.gs-card .gs-card,
.gs-card .gs-table-wrap,
.gs-card .gs-stat {
background-clip: padding-box;
}
@media (max-width: 767px) {
.gs-page-hero {
padding: 18px !important;
}
.gs-page-hero h2 {
font-size: 22px !important;
}
.gs-btn,
.gs-btn:visited {
min-height: 42px;
}
.gs-stat {
border-radius: 16px;
}
}
/* =========================================
v7 User Dashboard Professional Completion
- full-pass global user style refinement
========================================= */
:root {
--gs-bg-main: #f3f7fc;
--gs-bg-grad-a: rgba(37, 99, 235, .10);
--gs-bg-grad-b: rgba(124, 58, 237, .08);
--gs-bg-grad-c: rgba(6, 182, 212, .08);
--gs-surface-main: #ffffff;
--gs-surface-soft: #f8fbff;
--gs-surface-tint: #eef4fb;
--gs-surface-tint-2: #f4f7ff;
--gs-border-main: rgba(148, 163, 184, .26);
--gs-border-strong: rgba(59, 130, 246, .22);
--gs-title-main: #0f2742;
--gs-text-main: #1e293b;
--gs-text-muted: #62748a;
--gs-primary-main: #2563eb;
--gs-primary-end: #06b6d4;
--gs-violet-main: #7c3aed;
--gs-success-main: #059669;
--gs-warn-main: #f59e0b;
--gs-danger-main: #dc2626;
--gs-glow-blue: 0 18px 34px rgba(37, 99, 235, .18);
--gs-glow-soft: 0 16px 34px rgba(15, 23, 42, .08);
}
body .gs-panel-shell,
.gs-panel-shell {
background:
radial-gradient(circle at top left, var(--gs-bg-grad-a), transparent 32%),
radial-gradient(circle at top right, var(--gs-bg-grad-b), transparent 28%),
radial-gradient(circle at bottom center, var(--gs-bg-grad-c), transparent 30%),
var(--gs-bg-main);
}
.gs-main { padding: 18px; }
.gs-main > .gs-page,
.gs-main > .gs-card,
.gs-main > .gs-table-wrap,
.gs-main > .gs-page-hero { margin-bottom: 18px; }
.gs-page,
.gs-page-section,
.gs-card,
.gs-table-wrap,
.gs-page-hero,
.gs-alert,
.gs-faq-card,
.gs-faq-box,
.gs-faq-footer,
.gs-panel-faq,
.gs-accordion { border-radius: 20px !important; }
.gs-card,
.gs-table-wrap,
.gs-page-hero,
.gs-alert,
.gs-faq-card,
.gs-faq-box,
.gs-faq-footer,
.gs-panel-faq {
background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,250,255,.98)) !important;
border: 1px solid var(--gs-border-main) !important;
box-shadow: var(--gs-glow-soft) !important;
overflow: hidden;
}
.gs-card::after,
.gs-table-wrap::after,
.gs-page-hero::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(180deg, rgba(255,255,255,.18), transparent 22%);
opacity: .9;
}
.gs-page-hero,
.gs-card,
.gs-table-wrap { position: relative; }
.gs-page-hero {
background:
radial-gradient(circle at top right, rgba(6, 182, 212, .14), transparent 28%),
radial-gradient(circle at bottom left, rgba(124, 58, 237, .12), transparent 32%),
linear-gradient(180deg, #ffffff, #f7fbff) !important;
padding: 22px !important;
}
.gs-page-hero h1,
.gs-page-hero h2,
.gs-page-hero h3,
.gs-card h1,
.gs-card h2,
.gs-card h3,
.gs-main h1,
.gs-main h2,
.gs-main h3,
.gs-main h4 {
color: var(--gs-title-main) !important;
letter-spacing: -.02em;
line-height: 1.2;
}
.gs-main h1 { font-size: 30px; font-weight: 800; }
.gs-main h2 { font-size: 24px; font-weight: 800; }
.gs-main h3 { font-size: 18px; font-weight: 800; }
.gs-main h4 { font-size: 15px; font-weight: 700; }
.gs-main p,
.gs-main li,
.gs-main td,
.gs-main small,
.gs-main .gs-muted,
.gs-card p { color: var(--gs-text-muted); }
.gs-main strong,
.gs-main b,
.gs-stat-val,
.gs-kpi-value,
.gs-value { color: var(--gs-title-main); }
.gs-label,
label {
color: var(--gs-title-main);
font-size: 12px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
}
.gs-btn,
.gs-btn:visited,
button.gs-btn,
input[type="submit"].gs-btn,
.gs-main button:not(.gs-network-btn):not(.gs-tab-btn) {
border-radius: 14px !important;
min-height: 42px;
padding: 0 16px !important;
border: 1px solid rgba(37, 99, 235, .22) !important;
background: linear-gradient(135deg, var(--gs-primary-main), var(--gs-primary-end)) !important;
color: #fff !important;
font-weight: 800 !important;
letter-spacing: -.01em;
box-shadow: var(--gs-glow-blue) !important;
transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.gs-btn:hover,
button.gs-btn:hover,
input[type="submit"].gs-btn:hover,
.gs-main button:not(.gs-network-btn):not(.gs-tab-btn):hover {
transform: translateY(-1px);
filter: saturate(1.05);
box-shadow: 0 22px 36px rgba(37, 99, 235, .22) !important;
}
.gs-btn.secondary,
.gs-btn.ghost,
.gs-btn.gs-btn-ghost,
.gs-btn-outline,
.gs-btn-soft {
background: linear-gradient(180deg, #ffffff, #f2f7ff) !important;
color: var(--gs-title-main) !important;
border: 1px solid rgba(148, 163, 184, .34) !important;
box-shadow: 0 8px 18px rgba(15, 23, 42, .06) !important;
}
.gs-input,
.gs-select,
.gs-textarea,
.gs-main input[type="text"],
.gs-main input[type="number"],
.gs-main input[type="email"],
.gs-main input[type="url"],
.gs-main input[type="password"],
.gs-main select,
.gs-main textarea {
min-height: 44px;
border-radius: 15px !important;
background: linear-gradient(180deg, #ffffff, #fbfdff) !important;
border: 1px solid rgba(148, 163, 184, .36) !important;
color: var(--gs-text-main) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.gs-input:focus,
.gs-select:focus,
.gs-textarea:focus,
.gs-main input:focus,
.gs-main select:focus,
.gs-main textarea:focus {
outline: 0;
border-color: rgba(37, 99, 235, .42) !important;
box-shadow: 0 0 0 4px rgba(37, 99, 235, .10) !important;
}
.gs-topbar {
position: sticky;
top: 12px;
z-index: 8;
border-radius: 20px !important;
background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(247,250,255,.95)) !important;
backdrop-filter: blur(10px);
}
.gs-sidebar {
border-radius: 24px !important;
background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,250,255,.98)) !important;
box-shadow: 0 18px 40px rgba(15, 23, 42, .08) !important;
}
.gs-brand {
border-bottom: 1px solid rgba(148, 163, 184, .20);
background:
radial-gradient(circle at left top, rgba(37, 99, 235, .10), transparent 34%),
linear-gradient(180deg, rgba(255,255,255,1), rgba(248,251,255,1));
}
.gs-brand-title { color: var(--gs-title-main) !important; }
.gs-brand-sub { color: var(--gs-text-muted) !important; }
.gs-nav a {
position: relative;
min-height: 44px;
border-radius: 14px !important;
border: 1px solid transparent;
color: #163454 !important;
font-weight: 700;
background: transparent;
}
.gs-nav a:hover {
background: linear-gradient(180deg, #ffffff, #eef6ff) !important;
border-color: rgba(37, 99, 235, .16);
}
.gs-nav a.active {
background: linear-gradient(135deg, rgba(37, 99, 235, .13), rgba(6, 182, 212, .09)) !important;
border-color: rgba(37, 99, 235, .22) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}
.gs-nav a.active::before {
content: "";
position: absolute;
left: 10px;
top: 10px;
bottom: 10px;
width: 4px;
border-radius: 999px;
background: linear-gradient(180deg, var(--gs-primary-main), var(--gs-primary-end));
}
.gs-stat-grid,
.gs-kpi-grid,
.gs-dashboard-grid { gap: 16px !important; }
.gs-stat,
.gs-kpi,
.gs-widget {
position: relative;
border-radius: 20px !important;
padding: 18px !important;
background: linear-gradient(180deg, rgba(255,255,255,1), rgba(247,250,255,1)) !important;
border: 1px solid rgba(148, 163, 184, .28) !important;
box-shadow: 0 14px 28px rgba(15, 23, 42, .06) !important;
}
.gs-stat::before,
.gs-kpi::before,
.gs-widget::before {
content: "";
position: absolute;
inset: 0 auto auto 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--gs-primary-main), var(--gs-primary-end));
}
.gs-stat:nth-child(2)::before,
.gs-kpi:nth-child(2)::before,
.gs-widget:nth-child(2)::before { background: linear-gradient(90deg, #7c3aed, #a78bfa); }
.gs-stat:nth-child(3)::before,
.gs-kpi:nth-child(3)::before,
.gs-widget:nth-child(3)::before { background: linear-gradient(90deg, #059669, #34d399); }
.gs-stat:nth-child(4)::before,
.gs-kpi:nth-child(4)::before,
.gs-widget:nth-child(4)::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.gs-stat:nth-child(5)::before,
.gs-kpi:nth-child(5)::before,
.gs-widget:nth-child(5)::before { background: linear-gradient(90deg, #dc2626, #fb7185); }
.gs-stat-label,
.gs-kpi-label {
font-size: 12px;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--gs-text-muted) !important;
}
.gs-stat-val,
.gs-kpi-value {
font-size: 26px !important;
font-weight: 800 !important;
color: var(--gs-title-main) !important;
}
.gs-table-wrap { padding: 0 !important; }
.gs-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
}
.gs-table th {
background: linear-gradient(180deg, #f8fbff, #eef4fb) !important;
color: var(--gs-title-main) !important;
font-weight: 800 !important;
border-bottom: 1px solid rgba(148, 163, 184, .24) !important;
}
.gs-table td {
color: var(--gs-text-main) !important;
border-bottom: 1px solid rgba(148, 163, 184, .14) !important;
}
.gs-table tbody tr:hover td { background: rgba(37, 99, 235, .032); }
.gs-badge,
.gs-chip,
.gs-pill,
.gs-hero-chip {
border-radius: 999px !important;
padding: 7px 11px !important;
font-weight: 700 !important;
border: 1px solid rgba(37, 99, 235, .14) !important;
color: #17416d !important;
background: linear-gradient(180deg, #f4f8ff, #ebf6ff) !important;
}
.gs-alert {
color: var(--gs-title-main) !important;
background: linear-gradient(180deg, rgba(255,255,255,1), rgba(243,248,255,1)) !important;
}
.gs-tabs,
.gs-tabs--pill { gap: 8px !important; }
.gs-tab-btn,
.gs-tabs .gs-tab-btn {
border-radius: 999px !important;
min-height: 40px;
padding: 0 14px !important;
font-weight: 800 !important;
background: linear-gradient(180deg, #ffffff, #f4f8fd) !important;
color: var(--gs-title-main) !important;
border: 1px solid rgba(148, 163, 184, .26) !important;
}
.gs-tab-btn.is-active,
.gs-tabs .gs-tab-btn.is-active {
background: linear-gradient(135deg, rgba(37, 99, 235, .14), rgba(6, 182, 212, .12)) !important;
border-color: rgba(37, 99, 235, .22) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}
.gs-network-btn,
.gs-network-pill,
.gs-networks button,
.gs-network-list button {
min-height: 48px !important;
padding: 0 14px !important;
border-radius: 14px !important;
background: linear-gradient(180deg, #ffffff, #f7fbff) !important;
border: 1px solid rgba(148, 163, 184, .26) !important;
color: var(--gs-title-main) !important;
font-weight: 700 !important;
box-shadow: 0 10px 18px rgba(15, 23, 42, .04) !important;
}
.gs-network-btn:hover,
.gs-network-pill:hover,
.gs-networks button:hover,
.gs-network-list button:hover {
background: linear-gradient(180deg, #ffffff, #eef6ff) !important;
border-color: rgba(37, 99, 235, .20) !important;
}
.gs-network-btn.is-active,
.gs-network-pill.is-active,
.gs-networks button.is-active,
.gs-network-list button.is-active,
.gs-networks button.active,
.gs-network-list button.active {
background: linear-gradient(135deg, rgba(37, 99, 235, .16), rgba(6, 182, 212, .10)) !important;
border-color: rgba(37, 99, 235, .26) !important;
box-shadow: 0 14px 22px rgba(37, 99, 235, .12) !important;
}
details.gs-faq-item,
.gs-accordion details {
border: 1px solid rgba(148, 163, 184, .24) !important;
border-radius: 16px !important;
background: linear-gradient(180deg, #ffffff, #f7fbff) !important;
box-shadow: 0 10px 22px rgba(15, 23, 42, .04);
}
details.gs-faq-item summary,
.gs-accordion details summary {
color: var(--gs-title-main) !important;
font-weight: 800 !important;
}
details.gs-faq-item > div,
.gs-accordion details > div { color: var(--gs-text-muted) !important; }
.gs-empty,
.gs-empty-state,
.gs-no-data,
.gs-placeholder {
border-radius: 18px !important;
background: linear-gradient(180deg, #ffffff, #f7fbff) !important;
border: 1px dashed rgba(148, 163, 184, .34) !important;
color: var(--gs-text-muted) !important;
}
@media (max-width: 991px) {
.gs-main { padding: 14px; }
.gs-sidebar { border-radius: 18px !important; }
.gs-topbar { top: 8px; }
}
@media (max-width: 767px) {
.gs-main h1 { font-size: 24px; }
.gs-main h2 { font-size: 20px; }
.gs-main h3 { font-size: 17px; }
.gs-page-hero,
.gs-card,
.gs-table-wrap { border-radius: 18px !important; }
.gs-stat,
.gs-kpi,
.gs-widget { padding: 16px !important; }
}
/* =========================================================
v9 REAL BUILD
Brand palette integration + dashboard/services refinements
Main palette:
#001886 #FD5F21 #F6FAFD #151515 #8EFBFA #2F065E #FAD60C #9C3333
========================================================= */
:root{
--gs-brand-blue:#001886;
--gs-brand-orange:#FD5F21;
--gs-brand-orange-2:#EA5F21;
--gs-brand-surface:#F6FAFD;
--gs-brand-text:#151515;
--gs-brand-aqua:#8EFBFA;
--gs-brand-purple:#2F065E;
--gs-brand-yellow:#FAD60C;
--gs-brand-red:#9C3333;
--gs-title:#001886;
--gs-text:#151515;
--gs-muted:#5f6b7a;
--gs-surface:#ffffff;
--gs-surface-2:#F6FAFD;
--gs-border:rgba(0,24,134,.11);
--gs-border-strong:rgba(0,24,134,.18);
--gs-shadow-soft:0 12px 30px rgba(0,24,134,.06);
--gs-shadow:0 18px 40px rgba(21,21,21,.08);
}
body .gs-panel-shell,
.gs-panel-shell{
background:
radial-gradient(circle at top left, rgba(0,24,134,.08), transparent 34%),
radial-gradient(circle at top right, rgba(253,95,33,.08), transparent 28%),
radial-gradient(circle at bottom center, rgba(142,251,250,.12), transparent 32%),
#F6FAFD !important;
}
.gs-sidebar,
.gs-topbar,
.gs-card,
.gs-table-wrap,
.gs-page-hero,
.gs-alert,
.gs-faq-box,
.gs-faq-card,
.gs-faq-footer{
border-color:var(--gs-border) !important;
box-shadow:var(--gs-shadow-soft) !important;
}
.gs-sidebar{
background:
linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,250,253,.98)) !important;
border-radius:22px !important;
}
.gs-brand{
background:
radial-gradient(circle at left top, rgba(0,24,134,.10), transparent 34%),
radial-gradient(circle at right center, rgba(253,95,33,.09), transparent 28%),
linear-gradient(180deg, #ffffff, #F6FAFD) !important;
}
.gs-brand-name,
.gs-brand-title,
.gs-topbar-title,
.gs-main h1,
.gs-main h2,
.gs-main h3,
.gs-main h4,
.gs-card h1,
.gs-card h2,
.gs-card h3{
color:var(--gs-brand-blue) !important;
}
.gs-main p,
.gs-main li,
.gs-main td,
.gs-main small,
.gs-main .gs-muted,
.gs-brand-sub,
.gs-card p{
color:var(--gs-muted) !important;
}
.gs-main strong,
.gs-main b,
.gs-stat-val,
.gs-kpi-val,
.gs-kpi-value,
.gs-value{
color:var(--gs-brand-text) !important;
}
.gs-nav a{
color:var(--gs-brand-blue) !important;
border-radius:14px !important;
}
.gs-nav a:hover{
background:linear-gradient(180deg, #ffffff, rgba(142,251,250,.10)) !important;
border-color:rgba(0,24,134,.12) !important;
}
.gs-nav a.active{
background:linear-gradient(135deg, rgba(0,24,134,.12), rgba(253,95,33,.10)) !important;
border-color:rgba(0,24,134,.18) !important;
}
.gs-nav a.active::before{
background:linear-gradient(180deg, #001886, #FD5F21) !important;
}
.gs-topbar{
background:
linear-gradient(180deg, rgba(255,255,255,.97), rgba(246,250,253,.97)) !important;
backdrop-filter:blur(10px);
}
.gs-btn,
.gs-btn:visited,
button.gs-btn,
input[type="submit"].gs-btn{
background:linear-gradient(135deg, #001886, #FD5F21) !important;
color:#fff !important;
border:1px solid rgba(0,24,134,.16) !important;
box-shadow:0 16px 30px rgba(0,24,134,.16), 0 6px 16px rgba(253,95,33,.12) !important;
}
.gs-btn:hover,
button.gs-btn:hover,
input[type="submit"].gs-btn:hover{
box-shadow:0 20px 34px rgba(0,24,134,.18), 0 10px 20px rgba(253,95,33,.14) !important;
transform:translateY(-1px);
}
.gs-btn.secondary,
.gs-btn.gs-btn-ghost,
.gs-btn.ghost,
.gs-btn-outline,
.gs-btn-soft{
background:linear-gradient(180deg, #ffffff, #F6FAFD) !important;
color:#001886 !important;
border:1px solid rgba(0,24,134,.16) !important;
box-shadow:0 8px 18px rgba(0,24,134,.05) !important;
}
.gs-label,
label{
color:#001886 !important;
}
.gs-input,
.gs-select,
.gs-textarea,
.gs-main input[type="text"],
.gs-main input[type="number"],
.gs-main input[type="email"],
.gs-main input[type="url"],
.gs-main input[type="password"],
.gs-main select,
.gs-main textarea{
background:linear-gradient(180deg, #ffffff, #F6FAFD) !important;
border-color:rgba(0,24,134,.12) !important;
color:#151515 !important;
}
.gs-input:focus,
.gs-select:focus,
.gs-textarea:focus,
.gs-main input:focus,
.gs-main select:focus,
.gs-main textarea:focus{
border-color:rgba(0,24,134,.30) !important;
box-shadow:0 0 0 4px rgba(142,251,250,.25) !important;
}
.gs-page-hero{
background:
radial-gradient(circle at top right, rgba(253,95,33,.11), transparent 30%),
radial-gradient(circle at bottom left, rgba(142,251,250,.18), transparent 36%),
linear-gradient(180deg, #ffffff, #F6FAFD) !important;
}
.gs-page-hero h2{
margin-bottom:8px !important;
}
.gs-hero-actions{ gap:10px; }
.gs-stat{
background:linear-gradient(180deg, rgba(255,255,255,1), rgba(246,250,253,1)) !important;
border:1px solid rgba(0,24,134,.10) !important;
border-radius:18px !important;
box-shadow:0 12px 24px rgba(21,21,21,.05) !important;
}
.gs-stat::before{
background:linear-gradient(90deg, #001886, #FD5F21) !important;
}
.gs-grid .gs-stat:nth-child(2)::before{background:linear-gradient(90deg, #2F065E, #AF2957) !important;}
.gs-grid .gs-stat:nth-child(3)::before{background:linear-gradient(90deg, #001886, #8EFBFA) !important;}
.gs-grid .gs-stat:nth-child(4)::before{background:linear-gradient(90deg, #FD5F21, #FAD60C) !important;}
.gs-grid .gs-stat:nth-child(5)::before{background:linear-gradient(90deg, #9C3333, #E62323) !important;}
.gs-stat-label{
color:#6b7280 !important;
font-weight:800 !important;
text-transform:uppercase;
letter-spacing:.05em;
}
.gs-stat-val{
font-size:26px !important;
font-weight:900 !important;
}
.gs-table th{
background:linear-gradient(180deg, #F8FBFF, #EDF4FB) !important;
color:#001886 !important;
}
.gs-table tbody tr:hover td{
background:rgba(142,251,250,.10) !important;
}
.gs-badge,
.gs-chip,
.gs-pill,
.gs-hero-chip{
background:linear-gradient(180deg, rgba(142,251,250,.20), rgba(246,250,253,1)) !important;
color:#001886 !important;
border-color:rgba(0,24,134,.12) !important;
}
.gs-tab-btn,
.gs-tabs .gs-tab-btn{
background:linear-gradient(180deg, #ffffff, #F6FAFD) !important;
color:#001886 !important;
border-color:rgba(0,24,134,.12) !important;
}
.gs-tab-btn.is-active,
.gs-tabs .gs-tab-btn.is-active{
background:linear-gradient(135deg, rgba(0,24,134,.13), rgba(253,95,33,.10)) !important;
color:#001886 !important;
border-color:rgba(0,24,134,.18) !important;
}
.gs-network-btn,
.gs-network-pill,
.gs-networks button,
.gs-network-list button{
background:linear-gradient(180deg, #ffffff, #F6FAFD) !important;
color:#001886 !important;
border-color:rgba(0,24,134,.12) !important;
}
.gs-network-btn:hover,
.gs-network-pill:hover,
.gs-networks button:hover,
.gs-network-list button:hover{
background:linear-gradient(180deg, #ffffff, rgba(142,251,250,.12)) !important;
border-color:rgba(0,24,134,.16) !important;
}
.gs-network-btn.is-active,
.gs-network-pill.is-active,
.gs-networks button.is-active,
.gs-network-list button.is-active,
.gs-networks button.active,
.gs-network-list button.active{
background:linear-gradient(135deg, rgba(0,24,134,.14), rgba(253,95,33,.10)) !important;
border-color:rgba(0,24,134,.18) !important;
}
.gs-dashboard-card{
position:relative;
overflow:hidden;
}
.gs-dashboard-card::after{
content:"";
position:absolute;
inset:auto -20px -20px auto;
width:120px;
height:120px;
border-radius:50%;
background:radial-gradient(circle, rgba(142,251,250,.18), transparent 68%);
pointer-events:none;
}
.gs-dashboard-card--promo::after{ background:radial-gradient(circle, rgba(250,214,12,.18), transparent 68%); }
.gs-dashboard-card--support::after{ background:radial-gradient(circle, rgba(47,6,94,.16), transparent 68%); }
.gs-dashboard-card--wallet::after{ background:radial-gradient(circle, rgba(253,95,33,.16), transparent 68%); }
.gs-card-head--row{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:14px;
flex-wrap:wrap;
}
.gs-section-kpis{
display:grid;
grid-template-columns:repeat(4, minmax(0,1fr));
gap:14px;
margin:14px 0 0;
}
.gs-section-kpi{
padding:16px;
border-radius:18px;
border:1px solid rgba(0,24,134,.10);
background:linear-gradient(180deg, #ffffff, #F6FAFD);
box-shadow:0 10px 24px rgba(0,24,134,.05);
}
.gs-section-kpi__label{
font-size:12px;
font-weight:800;
letter-spacing:.05em;
text-transform:uppercase;
color:#6b7280;
}
.gs-section-kpi__value{
margin-top:8px;
font-size:24px;
line-height:1.1;
font-weight:900;
color:#151515;
}
.gs-services-toolbar{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
flex-wrap:wrap;
}
.gs-services-toolbar form{
display:flex;
gap:10px;
align-items:center;
flex-wrap:wrap;
}
.gs-table-note{
margin-top:10px;
font-size:12px;
color:#6b7280;
}
@media (max-width: 900px){
.gs-section-kpis{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
.gs-section-kpis{ grid-template-columns:1fr; }
}
/* =========================================================
v10 REAL BUILD
Major tabs completion pass:
new order, orders, wallet, add funds
========================================================= */
.gs-pane-title{
margin:0 0 6px 0 !important;
color:#001886 !important;
font-size:18px !important;
font-weight:900 !important;
letter-spacing:-.01em;
}
.gs-pane-sub{
margin:0 0 14px 0;
color:#5f6b7a;
font-size:13px;
line-height:1.55;
}
.gs-inline-kpis{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:10px;
}
.gs-inline-kpi{
display:inline-flex;
align-items:center;
gap:8px;
min-height:36px;
padding:0 12px;
border-radius:999px;
border:1px solid rgba(0,24,134,.12);
background:linear-gradient(180deg, #ffffff, #F6FAFD);
color:#001886;
font-weight:800;
box-shadow:0 6px 14px rgba(0,24,134,.05);
}
.gs-inline-kpi b{color:#151515;}
.gs-neworder-pro{
overflow:hidden;
}
.gs-neworder-pro .gs-neworder-top{
align-items:flex-start;
margin-bottom:12px;
}
.gs-neworder-pro .gs-neworder-title{
font-size:24px;
line-height:1.15;
color:#001886 !important;
}
.gs-neworder-summary{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:10px;
}
.gs-neworder-summary .chip{
display:inline-flex;
align-items:center;
gap:8px;
min-height:36px;
padding:0 12px;
border-radius:999px;
background:linear-gradient(180deg, #ffffff, #F6FAFD);
border:1px solid rgba(0,24,134,.12);
color:#001886;
font-weight:800;
}
.gs-neworder-note{
margin:12px 0 14px;
padding:12px 14px;
border-radius:14px;
background:linear-gradient(180deg, rgba(142,251,250,.18), rgba(255,255,255,1));
border:1px solid rgba(0,24,134,.10);
color:#304256;
box-shadow:0 8px 18px rgba(0,24,134,.04);
}
.gs-neworder-pro .gs-no-box{
border-radius:18px;
border:1px solid rgba(0,24,134,.10);
background:linear-gradient(180deg, rgba(255,255,255,1), rgba(246,250,253,1));
box-shadow:0 10px 24px rgba(0,24,134,.05);
}
.gs-neworder-pro .gs-no-box h3{
margin:0 0 6px 0;
color:#001886;
font-size:18px;
font-weight:900;
}
.gs-neworder-pro .gs-no-kv .kv{
background:linear-gradient(180deg, #ffffff, #F6FAFD);
border:1px solid rgba(0,24,134,.08);
border-radius:14px;
padding:10px 12px;
}
.gs-neworder-pro .gs-no-kv .k{
color:#5f6b7a;
font-size:11px;
font-weight:800;
text-transform:uppercase;
letter-spacing:.05em;
}
.gs-neworder-pro .gs-no-kv .v{
color:#151515;
font-weight:900;
margin-top:4px;
}
.gs-neworder-pro .gs-hint{
padding:8px 10px;
border-radius:10px;
background:rgba(142,251,250,.12);
border:1px solid rgba(0,24,134,.08);
}
.gs-neworder-pro .gs-no-tab-search{
background:linear-gradient(180deg, #ffffff, #F6FAFD);
border:1px solid rgba(0,24,134,.12);
border-radius:14px;
}
.gs-orders-kpis,
.gs-wallet-kpis,
.gs-funds-kpis{
display:grid;
grid-template-columns:repeat(4, minmax(0,1fr));
gap:14px;
margin:0 0 16px;
}
.gs-kpi-card{
position:relative;
overflow:hidden;
padding:16px;
border-radius:18px;
background:linear-gradient(180deg, #ffffff, #F6FAFD);
border:1px solid rgba(0,24,134,.10);
box-shadow:0 10px 24px rgba(0,24,134,.05);
}
.gs-kpi-card::before{
content:"";
position:absolute;
left:0; top:0; width:100%; height:4px;
background:linear-gradient(90deg, #001886, #FD5F21);
}
.gs-kpi-card:nth-child(2)::before{background:linear-gradient(90deg, #2F065E, #AF2957);}
.gs-kpi-card:nth-child(3)::before{background:linear-gradient(90deg, #001886, #8EFBFA);}
.gs-kpi-card:nth-child(4)::before{background:linear-gradient(90deg, #FD5F21, #FAD60C);}
.gs-kpi-card__label{
color:#6b7280;
font-size:12px;
font-weight:800;
text-transform:uppercase;
letter-spacing:.05em;
}
.gs-kpi-card__value{
margin-top:8px;
color:#151515;
font-size:24px;
line-height:1.1;
font-weight:900;
}
.gs-orders-card .gs-inline-form,
.gs-wallet-card .gs-inline-form,
.gs-funds-card .gs-inline-form{
flex-wrap:wrap;
}
.gs-orders-card .gs-table-wrap,
.gs-wallet-card .gs-table-wrap,
.gs-funds-card .gs-table-wrap{
border-radius:18px;
}
.gs-orders-card .gs-empty,
.gs-wallet-card .gs-empty{
padding:26px 20px;
}
.gs-orders-note,
.gs-wallet-note,
.gs-funds-note{
margin-top:12px;
padding:12px 14px;
border-radius:14px;
border:1px solid rgba(0,24,134,.10);
background:linear-gradient(180deg, rgba(255,255,255,1), rgba(246,250,253,1));
color:#526274;
}
.gs-status-stack{
display:flex;
flex-wrap:wrap;
gap:8px;
}
.gs-wallet-card .gs-quick-actions{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:12px;
}
.gs-wallet-card .gs-quick-tip-box{
border-radius:18px;
border:1px solid rgba(0,24,134,.10);
background:
radial-gradient(circle at top right, rgba(142,251,250,.18), transparent 34%),
linear-gradient(180deg, #ffffff, #F6FAFD);
padding:18px;
}
.gs-wallet-history{
border-radius:18px;
overflow:hidden;
border:1px solid rgba(0,24,134,.10);
}
.gs-funds-card .gs-soft-section,
.gs-funds-card .gs-card{
border-radius:18px;
}
.gs-funds-card .gs-gateway-grid{
margin-top:16px;
}
.gs-funds-card .gs-gateway-card{
border-radius:18px;
border:1px solid rgba(0,24,134,.10);
background:
radial-gradient(circle at top right, rgba(253,95,33,.08), transparent 26%),
linear-gradient(180deg, #ffffff, #F6FAFD);
box-shadow:0 10px 24px rgba(0,24,134,.05);
}
.gs-funds-card .gs-gateway-card__icon{
background:linear-gradient(135deg, #001886, #FD5F21);
color:#fff;
box-shadow:0 10px 22px rgba(0,24,134,.16);
}
.gs-funds-card .gs-gateway-card__title{
color:#001886;
font-weight:900;
}
.gs-funds-card .gs-gateway-card__meta span{
border-radius:999px;
background:linear-gradient(180deg, #ffffff, #F6FAFD);
border:1px solid rgba(0,24,134,.08);
padding:6px 10px;
}
.gs-funds-card .gs-info-box{
border-radius:14px;
border:1px solid rgba(0,24,134,.10);
background:linear-gradient(180deg, rgba(142,251,250,.16), rgba(255,255,255,1));
}
.gs-funds-card .gs-faq-card details{
margin-bottom:10px;
}
@media (max-width: 980px){
.gs-orders-kpis,
.gs-wallet-kpis,
.gs-funds-kpis{
grid-template-columns:repeat(2, minmax(0,1fr));
}
}
@media (max-width: 640px){
.gs-orders-kpis,
.gs-wallet-kpis,
.gs-funds-kpis{
grid-template-columns:1fr;
}
}
/* =========================================================
v11 REAL BUILD
Remaining user menus + common tables/filters/status polish
========================================================= */
.gs-menu-card,
.gs-data-card,
.gs-info-card,
.gs-utility-card,
.gs-account-card,
.gs-api-card,
.gs-news-card,
.gs-updates-card,
.gs-giveaway-card,
.gs-mobile-card,
.gs-ticket-card,
.gs-refill-card,
.gs-favorite-card,
.gs-massorder-card,
.gs-notification-card{
position:relative;
overflow:hidden;
border-radius:18px !important;
border:1px solid rgba(0,24,134,.10) !important;
background:
radial-gradient(circle at top right, rgba(142,251,250,.12), transparent 28%),
linear-gradient(180deg, #ffffff, #F6FAFD) !important;
box-shadow:0 12px 28px rgba(0,24,134,.05) !important;
}
.gs-menu-card::after,
.gs-data-card::after,
.gs-info-card::after,
.gs-utility-card::after,
.gs-account-card::after,
.gs-api-card::after,
.gs-news-card::after,
.gs-updates-card::after,
.gs-giveaway-card::after,
.gs-mobile-card::after,
.gs-ticket-card::after,
.gs-refill-card::after,
.gs-favorite-card::after,
.gs-massorder-card::after,
.gs-notification-card::after{
content:"";
position:absolute;
right:-32px;
bottom:-32px;
width:120px;
height:120px;
border-radius:50%;
pointer-events:none;
background:radial-gradient(circle, rgba(253,95,33,.10), transparent 68%);
}
.gs-pane-top{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:14px;
flex-wrap:wrap;
}
.gs-pane-badge{
display:inline-flex;
align-items:center;
min-height:34px;
padding:0 12px;
border-radius:999px;
border:1px solid rgba(0,24,134,.12);
background:linear-gradient(180deg, #ffffff, #F6FAFD);
color:#001886;
font-weight:800;
box-shadow:0 6px 14px rgba(0,24,134,.05);
}
.gs-data-grid{
display:grid;
grid-template-columns:repeat(3, minmax(0,1fr));
gap:14px;
}
.gs-data-grid--4{
grid-template-columns:repeat(4, minmax(0,1fr));
}
.gs-data-tile{
padding:16px;
border-radius:18px;
border:1px solid rgba(0,24,134,.10);
background:
radial-gradient(circle at top right, rgba(142,251,250,.16), transparent 30%),
linear-gradient(180deg, #ffffff, #F6FAFD);
box-shadow:0 10px 24px rgba(0,24,134,.05);
}
.gs-data-tile__label{
color:#6b7280;
font-size:12px;
text-transform:uppercase;
letter-spacing:.05em;
font-weight:800;
}
.gs-data-tile__value{
margin-top:8px;
color:#151515;
font-size:24px;
line-height:1.1;
font-weight:900;
}
.gs-table-toolbar{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
flex-wrap:wrap;
margin-bottom:14px;
}
.gs-table-toolbar__meta{
display:flex;
flex-wrap:wrap;
gap:10px;
}
.gs-meta-chip{
display:inline-flex;
align-items:center;
gap:8px;
min-height:34px;
padding:0 12px;
border-radius:999px;
border:1px solid rgba(0,24,134,.10);
background:linear-gradient(180deg, #ffffff, #F6FAFD);
color:#001886;
font-weight:800;
}
.gs-meta-chip b{
color:#151515;
}
.gs-table-wrap,
.gs-scrollbox.gs-wallet-history{
border-radius:18px !important;
overflow:hidden;
border:1px solid rgba(0,24,134,.10) !important;
background:linear-gradient(180deg, #ffffff, #F6FAFD) !important;
}
.gs-table th{
font-size:12px;
text-transform:uppercase;
letter-spacing:.05em;
font-weight:800 !important;
}
.gs-table td{
vertical-align:middle;
}
.gs-status-badge,
.gs-table .status,
.gs-table .badge-status{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:30px;
padding:0 10px;
border-radius:999px;
border:1px solid rgba(0,24,134,.10);
background:linear-gradient(180deg, #ffffff, #F6FAFD);
color:#001886;
font-size:12px;
font-weight:800;
}
.gs-status-badge--success{ border-color:rgba(34,197,94,.18); color:#166534; background:linear-gradient(180deg, rgba(34,197,94,.08), #fff); }
.gs-status-badge--warning{ border-color:rgba(250,204,21,.26); color:#854d0e; background:linear-gradient(180deg, rgba(250,204,21,.10), #fff); }
.gs-status-badge--danger{ border-color:rgba(156,51,51,.22); color:#9C3333; background:linear-gradient(180deg, rgba(156,51,51,.08), #fff); }
.gs-status-badge--info{ border-color:rgba(0,24,134,.14); color:#001886; background:linear-gradient(180deg, rgba(142,251,250,.16), #fff); }
.gs-empty,
.gs-empty-state,
.gs-no-data,
.gs-placeholder{
padding:24px 18px !important;
border-radius:18px !important;
border:1px dashed rgba(0,24,134,.18) !important;
background:
radial-gradient(circle at top right, rgba(142,251,250,.14), transparent 26%),
linear-gradient(180deg, #ffffff, #F6FAFD) !important;
color:#5f6b7a !important;
}
.gs-filter-row,
.gs-inline-form,
.gs-search-row{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
}
.gs-account-card .gs-card-header,
.gs-api-card .gs-card-header{
margin-bottom:12px;
padding-bottom:12px;
border-bottom:1px solid rgba(0,24,134,.08);
}
.gs-account-card .gs-card-body,
.gs-api-card .gs-card-body{
padding:0;
}
.gs-account-card .muted,
.gs-api-card .muted{
color:#5f6b7a;
}
.gs-api-endpoint-box,
.gs-account-tip-box,
.gs-mobile-tip-box,
.gs-refill-tip-box,
.gs-ticket-tip-box{
margin-top:14px;
padding:14px 16px;
border-radius:16px;
border:1px solid rgba(0,24,134,.10);
background:
radial-gradient(circle at top right, rgba(142,251,250,.16), transparent 30%),
linear-gradient(180deg, #ffffff, #F6FAFD);
color:#46576a;
box-shadow:0 10px 22px rgba(0,24,134,.04);
}
.gs-accordion details,
details.gs-acc,
details.gs-faq-item{
border-radius:16px !important;
overflow:hidden;
}
.gs-accordion details summary,
details.gs-acc summary,
details.gs-faq-item summary{
padding:14px 16px !important;
font-weight:800 !important;
}
.gs-accordion details > div,
details.gs-acc > div,
details.gs-faq-item > div{
padding:0 16px 14px !important;
}
.gs-support-layout{
display:grid;
grid-template-columns:1.15fr .85fr;
gap:16px;
}
.gs-activity-grid{
display:grid;
grid-template-columns:repeat(3, minmax(0,1fr));
gap:14px;
}
.gs-content-list{
display:grid;
gap:14px;
}
.gs-content-post{
padding:16px;
border-radius:18px;
border:1px solid rgba(0,24,134,.10);
background:
radial-gradient(circle at top right, rgba(142,251,250,.14), transparent 28%),
linear-gradient(180deg, #ffffff, #F6FAFD);
box-shadow:0 10px 22px rgba(0,24,134,.04);
}
.gs-content-post__meta{
margin-top:8px;
color:#6b7280;
font-size:12px;
font-weight:700;
}
.gs-action-row{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:12px;
}
@media (max-width: 980px){
.gs-data-grid,
.gs-data-grid--4,
.gs-activity-grid,
.gs-support-layout{
grid-template-columns:repeat(2, minmax(0,1fr));
}
}
@media (max-width: 700px){
.gs-data-grid,
.gs-data-grid--4,
.gs-activity-grid,
.gs-support-layout{
grid-template-columns:1fr;
}
}
/* =========================================================
v12 REAL BUILD
Luxury multitone surface pass for all user dashboard boxes
========================================================= */
:root{
--gs-v12-navy:#001886;
--gs-v12-orange:#FD5F21;
--gs-v12-surface:#F6FAFD;
--gs-v12-ink:#151515;
--gs-v12-aqua:#8EFBFA;
--gs-v12-purple:#2F065E;
--gs-v12-yellow:#FAD60C;
--gs-v12-red:#9C3333;
}
body .gs-panel-shell,
.gs-panel-shell{
background:
radial-gradient(circle at top left, rgba(0,24,134,.06), transparent 26%),
radial-gradient(circle at top right, rgba(253,95,33,.07), transparent 22%),
radial-gradient(circle at bottom center, rgba(142,251,250,.12), transparent 26%),
linear-gradient(180deg, #f5f8fd 0%, #edf4fb 100%) !important;
}
.gs-sidebar{
background:
linear-gradient(180deg, rgba(255,255,255,.98), rgba(242,247,252,.97)) !important;
border:1px solid rgba(0,24,134,.10) !important;
box-shadow:0 20px 44px rgba(0,24,134,.06) !important;
}
.gs-topbar{
background:
linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,249,253,.95)) !important;
border:1px solid rgba(0,24,134,.09) !important;
box-shadow:0 14px 28px rgba(0,24,134,.05) !important;
}
.gs-nav a{
min-height:46px !important;
font-weight:800 !important;
color:var(--gs-v12-navy) !important;
border:1px solid transparent !important;
background:transparent !important;
}
.gs-nav a:hover{
background:
radial-gradient(circle at right center, rgba(142,251,250,.14), transparent 34%),
linear-gradient(180deg, rgba(255,255,255,.98), rgba(242,248,253,.98)) !important;
border-color:rgba(0,24,134,.10) !important;
box-shadow:0 8px 18px rgba(0,24,134,.04) !important;
}
.gs-nav a.active{
background:
radial-gradient(circle at right center, rgba(253,95,33,.12), transparent 28%),
linear-gradient(135deg, rgba(0,24,134,.13), rgba(255,255,255,.98)) !important;
border-color:rgba(0,24,134,.16) !important;
box-shadow:0 12px 24px rgba(0,24,134,.06) !important;
}
.gs-nav a.active::before{
background:linear-gradient(180deg, var(--gs-v12-navy), var(--gs-v12-orange)) !important;
width:5px !important;
}
.gs-btn,
.gs-btn:visited,
button.gs-btn,
input[type="submit"].gs-btn{
background:
linear-gradient(135deg, #001886 0%, #2449bf 48%, #FD5F21 100%) !important;
border:1px solid rgba(0,24,134,.12) !important;
color:#fff !important;
font-weight:900 !important;
border-radius:14px !important;
box-shadow:
0 14px 28px rgba(0,24,134,.18),
0 8px 18px rgba(253,95,33,.12) !important;
}
.gs-btn:hover,
button.gs-btn:hover,
input[type="submit"].gs-btn:hover{
transform:translateY(-1px);
box-shadow:
0 18px 32px rgba(0,24,134,.20),
0 10px 20px rgba(253,95,33,.16) !important;
}
.gs-btn.secondary,
.gs-btn.gs-btn-ghost,
.gs-btn.ghost,
.gs-btn-outline,
.gs-btn-soft{
background:
linear-gradient(180deg, rgba(255,255,255,.98), rgba(243,248,253,.98)) !important;
border:1px solid rgba(0,24,134,.10) !important;
color:var(--gs-v12-navy) !important;
box-shadow:0 8px 18px rgba(0,24,134,.05) !important;
}
.gs-card,
.gs-dashboard-card,
.gs-data-card,
.gs-menu-card,
.gs-info-card,
.gs-utility-card,
.gs-account-card,
.gs-api-card,
.gs-news-card,
.gs-updates-card,
.gs-giveaway-card,
.gs-mobile-card,
.gs-ticket-card,
.gs-refill-card,
.gs-favorite-card,
.gs-massorder-card,
.gs-notification-card,
.gs-wallet-card,
.gs-orders-card,
.gs-funds-card,
.gs-neworder-pro,
.gs-soft-section,
.gs-page-hero,
.gs-table-wrap,
.gs-faq-card,
.gs-faq-box,
.gs-faq-footer,
.gs-alert{
background:
radial-gradient(circle at top right, rgba(142,251,250,.16), transparent 24%),
radial-gradient(circle at bottom left, rgba(253,95,33,.08), transparent 18%),
linear-gradient(180deg, rgba(255,255,255,.99), rgba(243,248,253,.98)) !important;
border:1px solid rgba(0,24,134,.10) !important;
border-radius:20px !important;
box-shadow:0 14px 30px rgba(0,24,134,.06) !important;
}
.gs-card,
.gs-dashboard-card,
.gs-data-card,
.gs-menu-card,
.gs-info-card,
.gs-utility-card,
.gs-account-card,
.gs-api-card,
.gs-news-card,
.gs-updates-card,
.gs-giveaway-card,
.gs-mobile-card,
.gs-ticket-card,
.gs-refill-card,
.gs-favorite-card,
.gs-massorder-card,
.gs-notification-card,
.gs-wallet-card,
.gs-orders-card,
.gs-funds-card,
.gs-neworder-pro{
position:relative;
overflow:hidden;
}
.gs-card::before,
.gs-dashboard-card::before,
.gs-data-card::before,
.gs-menu-card::before,
.gs-info-card::before,
.gs-utility-card::before,
.gs-account-card::before,
.gs-api-card::before,
.gs-news-card::before,
.gs-updates-card::before,
.gs-giveaway-card::before,
.gs-mobile-card::before,
.gs-ticket-card::before,
.gs-refill-card::before,
.gs-favorite-card::before,
.gs-massorder-card::before,
.gs-notification-card::before,
.gs-wallet-card::before,
.gs-orders-card::before,
.gs-funds-card::before,
.gs-neworder-pro::before{
content:"";
position:absolute;
inset:0 auto auto 0;
width:100%;
height:4px;
background:linear-gradient(90deg, var(--gs-v12-navy), var(--gs-v12-orange));
opacity:.95;
}
.gs-page-hero{
background:
radial-gradient(circle at top right, rgba(253,95,33,.12), transparent 28%),
radial-gradient(circle at bottom left, rgba(142,251,250,.18), transparent 32%),
linear-gradient(180deg, rgba(255,255,255,.98), rgba(243,248,253,.98)) !important;
}
.gs-dashboard-card--promo{
background:
radial-gradient(circle at top right, rgba(250,214,12,.20), transparent 24%),
radial-gradient(circle at bottom left, rgba(253,95,33,.08), transparent 16%),
linear-gradient(180deg, rgba(255,255,255,.99), rgba(252,247,232,.97)) !important;
}
.gs-dashboard-card--wallet{
background:
radial-gradient(circle at top right, rgba(253,95,33,.18), transparent 24%),
radial-gradient(circle at bottom left, rgba(0,24,134,.09), transparent 18%),
linear-gradient(180deg, rgba(255,255,255,.99), rgba(252,244,239,.97)) !important;
}
.gs-dashboard-card--support{
background:
radial-gradient(circle at top right, rgba(47,6,94,.16), transparent 24%),
radial-gradient(circle at bottom left, rgba(142,251,250,.12), transparent 18%),
linear-gradient(180deg, rgba(255,255,255,.99), rgba(247,243,252,.97)) !important;
}
.gs-stat,
.gs-kpi-card,
.gs-section-kpi,
.gs-data-tile{
position:relative;
overflow:hidden;
border-radius:18px !important;
border:1px solid rgba(0,24,134,.10) !important;
box-shadow:0 10px 22px rgba(0,24,134,.05) !important;
background:
radial-gradient(circle at top right, rgba(142,251,250,.14), transparent 26%),
linear-gradient(135deg, rgba(0,24,134,.06), rgba(255,255,255,.98)) !important;
}
.gs-stat::before,
.gs-kpi-card::before,
.gs-section-kpi::before,
.gs-data-tile::before{
content:"";
position:absolute;
inset:0 auto auto 0;
width:100%;
height:4px;
background:linear-gradient(90deg, var(--gs-v12-navy), var(--gs-v12-orange));
}
.gs-stat:nth-child(2),
.gs-kpi-card:nth-child(2),
.gs-section-kpi:nth-child(2),
.gs-data-tile:nth-child(2){
background:
radial-gradient(circle at top right, rgba(47,6,94,.13), transparent 24%),
linear-gradient(135deg, rgba(47,6,94,.07), rgba(255,255,255,.98)) !important;
}
.gs-stat:nth-child(2)::before,
.gs-kpi-card:nth-child(2)::before,
.gs-section-kpi:nth-child(2)::before,
.gs-data-tile:nth-child(2)::before{
background:linear-gradient(90deg, #2F065E, #AF2957);
}
.gs-stat:nth-child(3),
.gs-kpi-card:nth-child(3),
.gs-section-kpi:nth-child(3),
.gs-data-tile:nth-child(3){
background:
radial-gradient(circle at top right, rgba(142,251,250,.18), transparent 24%),
linear-gradient(135deg, rgba(0,24,134,.05), rgba(255,255,255,.98)) !important;
}
.gs-stat:nth-child(3)::before,
.gs-kpi-card:nth-child(3)::before,
.gs-section-kpi:nth-child(3)::before,
.gs-data-tile:nth-child(3)::before{
background:linear-gradient(90deg, #001886, #8EFBFA);
}
.gs-stat:nth-child(4),
.gs-kpi-card:nth-child(4),
.gs-section-kpi:nth-child(4),
.gs-data-tile:nth-child(4){
background:
radial-gradient(circle at top right, rgba(250,214,12,.20), transparent 24%),
linear-gradient(135deg, rgba(253,95,33,.08), rgba(255,255,255,.98)) !important;
}
.gs-stat:nth-child(4)::before,
.gs-kpi-card:nth-child(4)::before,
.gs-section-kpi:nth-child(4)::before,
.gs-data-tile:nth-child(4)::before{
background:linear-gradient(90deg, #FD5F21, #FAD60C);
}
.gs-stat:nth-child(5),
.gs-kpi-card:nth-child(5),
.gs-section-kpi:nth-child(5),
.gs-data-tile:nth-child(5){
background:
radial-gradient(circle at top right, rgba(156,51,51,.14), transparent 24%),
linear-gradient(135deg, rgba(156,51,51,.08), rgba(255,255,255,.98)) !important;
}
.gs-stat:nth-child(5)::before,
.gs-kpi-card:nth-child(5)::before,
.gs-section-kpi:nth-child(5)::before,
.gs-data-tile:nth-child(5)::before{
background:linear-gradient(90deg, #9C3333, #E62323);
}
.gs-stat-label,
.gs-kpi-card__label,
.gs-section-kpi__label,
.gs-data-tile__label{
color:#5f6b7a !important;
font-size:12px !important;
font-weight:800 !important;
text-transform:uppercase !important;
letter-spacing:.05em !important;
}
.gs-stat-val,
.gs-kpi-card__value,
.gs-section-kpi__value,
.gs-data-tile__value{
color:#151515 !important;
font-weight:900 !important;
}
.gs-pane-title{ color:#001886 !important; font-size:20px !important; font-weight:900 !important; }
.gs-pane-sub{ color:#5f6b7a !important; font-size:13px !important; line-height:1.6 !important; }
.gs-inline-kpi,
.gs-pane-badge,
.gs-meta-chip,
.gs-hero-chip,
.gs-badge,
.gs-chip,
.gs-pill,
.gs-status-badge,
.gs-table .status,
.gs-table .badge-status{
border-radius:999px !important;
border:1px solid rgba(0,24,134,.10) !important;
font-weight:800 !important;
}
.gs-inline-kpi,
.gs-pane-badge,
.gs-meta-chip,
.gs-hero-chip,
.gs-badge,
.gs-chip,
.gs-pill{
background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(243,248,253,.98)) !important;
color:#001886 !important;
box-shadow:0 6px 14px rgba(0,24,134,.04) !important;
}
.gs-status-badge--success{ background:linear-gradient(180deg, rgba(34,197,94,.10), rgba(255,255,255,.98)) !important; }
.gs-status-badge--warning{ background:linear-gradient(180deg, rgba(250,204,21,.14), rgba(255,255,255,.98)) !important; }
.gs-status-badge--danger{ background:linear-gradient(180deg, rgba(156,51,51,.10), rgba(255,255,255,.98)) !important; }
.gs-status-badge--info{ background:linear-gradient(180deg, rgba(142,251,250,.18), rgba(255,255,255,.98)) !important; }
.gs-input,
.gs-select,
.gs-textarea,
.gs-main input[type="text"],
.gs-main input[type="number"],
.gs-main input[type="email"],
.gs-main input[type="url"],
.gs-main input[type="password"],
.gs-main select,
.gs-main textarea{
min-height:44px !important;
border-radius:14px !important;
border:1px solid rgba(0,24,134,.12) !important;
background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(243,248,253,.98)) !important;
color:#151515 !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.gs-input:focus,
.gs-select:focus,
.gs-textarea:focus,
.gs-main input:focus,
.gs-main select:focus,
.gs-main textarea:focus{
border-color:rgba(0,24,134,.22) !important;
box-shadow:0 0 0 4px rgba(142,251,250,.24) !important;
}
.gs-table-wrap{
background:linear-gradient(180deg, rgba(255,255,255,.99), rgba(243,248,253,.98)) !important;
}
.gs-table th{
background:linear-gradient(180deg, rgba(244,248,253,1), rgba(233,241,250,1)) !important;
color:#001886 !important;
font-size:12px !important;
font-weight:900 !important;
text-transform:uppercase;
letter-spacing:.05em;
border-bottom:1px solid rgba(0,24,134,.10) !important;
}
.gs-table td{
color:#304256 !important;
border-bottom:1px solid rgba(0,24,134,.07) !important;
}
.gs-table tbody tr:nth-child(even) td{
background:rgba(243,248,253,.66);
}
.gs-table tbody tr:hover td{
background:linear-gradient(180deg, rgba(142,251,250,.10), rgba(255,255,255,.96)) !important;
}
.gs-empty,
.gs-empty-state,
.gs-no-data,
.gs-placeholder{
border-radius:18px !important;
border:1px dashed rgba(0,24,134,.16) !important;
background:
radial-gradient(circle at top right, rgba(142,251,250,.16), transparent 24%),
radial-gradient(circle at bottom left, rgba(253,95,33,.08), transparent 18%),
linear-gradient(180deg, rgba(255,255,255,.98), rgba(243,248,253,.98)) !important;
color:#5f6b7a !important;
}
.gs-ticket-tip-box,
.gs-refill-tip-box,
.gs-mobile-tip-box,
.gs-account-tip-box,
.gs-api-endpoint-box,
.gs-wallet-note,
.gs-orders-note,
.gs-funds-note,
.gs-table-note,
.gs-neworder-note{
border:1px solid rgba(0,24,134,.10) !important;
border-radius:16px !important;
background:
radial-gradient(circle at top right, rgba(142,251,250,.16), transparent 24%),
linear-gradient(180deg, rgba(255,255,255,.98), rgba(243,248,253,.98)) !important;
color:#4a5d72 !important;
box-shadow:0 8px 18px rgba(0,24,134,.04) !important;
}
.gs-accordion details,
details.gs-faq-item,
details.gs-acc{
border:1px solid rgba(0,24,134,.10) !important;
background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(243,248,253,.98)) !important;
box-shadow:0 8px 18px rgba(0,24,134,.04) !important;
}
.gs-accordion details summary,
details.gs-faq-item summary,
details.gs-acc summary{
color:#001886 !important;
font-weight:900 !important;
}
/* =========================================================
v13 REAL BUILD
Stronger visible luxury surfaces for all dashboard boxes/cards
========================================================= */
body .gs-panel-shell .gs-main .gs-card,
body .gs-panel-shell .gs-main .gs-dashboard-card,
body .gs-panel-shell .gs-main .gs-data-card,
body .gs-panel-shell .gs-main .gs-menu-card,
body .gs-panel-shell .gs-main .gs-info-card,
body .gs-panel-shell .gs-main .gs-utility-card,
body .gs-panel-shell .gs-main .gs-account-card,
body .gs-panel-shell .gs-main .gs-api-card,
body .gs-panel-shell .gs-main .gs-news-card,
body .gs-panel-shell .gs-main .gs-updates-card,
body .gs-panel-shell .gs-main .gs-giveaway-card,
body .gs-panel-shell .gs-main .gs-mobile-card,
body .gs-panel-shell .gs-main .gs-ticket-card,
body .gs-panel-shell .gs-main .gs-refill-card,
body .gs-panel-shell .gs-main .gs-favorite-card,
body .gs-panel-shell .gs-main .gs-massorder-card,
body .gs-panel-shell .gs-main .gs-notification-card,
body .gs-panel-shell .gs-main .gs-wallet-card,
body .gs-panel-shell .gs-main .gs-orders-card,
body .gs-panel-shell .gs-main .gs-funds-card,
body .gs-panel-shell .gs-main .gs-neworder-pro,
body .gs-panel-shell .gs-main .gs-soft-section,
body .gs-panel-shell .gs-main .gs-page-hero,
body .gs-panel-shell .gs-main .gs-table-wrap,
body .gs-panel-shell .gs-main .gs-faq-card,
body .gs-panel-shell .gs-main .gs-faq-box,
body .gs-panel-shell .gs-main .gs-faq-footer{
background:
radial-gradient(circle at top right, rgba(142,251,250,.22), transparent 22%),
radial-gradient(circle at bottom left, rgba(253,95,33,.12), transparent 18%),
linear-gradient(135deg, rgba(244,248,253,.98) 0%, rgba(255,255,255,.98) 45%, rgba(241,247,252,.99) 100%) !important;
border:1px solid rgba(0,24,134,.12) !important;
box-shadow:0 16px 34px rgba(0,24,134,.07) !important;
}
body .gs-panel-shell .gs-main .gs-dashboard-card--promo{
background:
radial-gradient(circle at top right, rgba(250,214,12,.28), transparent 22%),
radial-gradient(circle at bottom left, rgba(253,95,33,.12), transparent 18%),
linear-gradient(135deg, rgba(255,252,240,.98) 0%, rgba(255,255,255,.99) 48%, rgba(252,246,226,.98) 100%) !important;
}
body .gs-panel-shell .gs-main .gs-dashboard-card--wallet{
background:
radial-gradient(circle at top right, rgba(253,95,33,.24), transparent 22%),
radial-gradient(circle at bottom left, rgba(0,24,134,.10), transparent 18%),
linear-gradient(135deg, rgba(255,247,242,.98) 0%, rgba(255,255,255,.99) 48%, rgba(252,243,238,.98) 100%) !important;
}
body .gs-panel-shell .gs-main .gs-dashboard-card--support{
background:
radial-gradient(circle at top right, rgba(47,6,94,.20), transparent 24%),
radial-gradient(circle at bottom left, rgba(142,251,250,.12), transparent 18%),
linear-gradient(135deg, rgba(248,244,253,.98) 0%, rgba(255,255,255,.99) 48%, rgba(243,238,251,.98) 100%) !important;
}
body .gs-panel-shell .gs-main .gs-stat,
body .gs-panel-shell .gs-main .gs-kpi-card,
body .gs-panel-shell .gs-main .gs-section-kpi,
body .gs-panel-shell .gs-main .gs-data-tile{
border:1px solid rgba(0,24,134,.12) !important;
box-shadow:0 12px 26px rgba(0,24,134,.06) !important;
}
body .gs-panel-shell .gs-main .gs-stat,
body .gs-panel-shell .gs-main .gs-kpi-card,
body .gs-panel-shell .gs-main .gs-section-kpi,
body .gs-panel-shell .gs-main .gs-data-tile{
background:
radial-gradient(circle at top right, rgba(142,251,250,.18), transparent 22%),
linear-gradient(135deg, rgba(235,242,252,.98) 0%, rgba(255,255,255,.99) 54%, rgba(243,248,253,.99) 100%) !important;
}
body .gs-panel-shell .gs-main .gs-stat:nth-child(2),
body .gs-panel-shell .gs-main .gs-kpi-card:nth-child(2),
body .gs-panel-shell .gs-main .gs-section-kpi:nth-child(2),
body .gs-panel-shell .gs-main .gs-data-tile:nth-child(2){
background:
radial-gradient(circle at top right, rgba(47,6,94,.16), transparent 22%),
linear-gradient(135deg, rgba(244,239,252,.98) 0%, rgba(255,255,255,.99) 54%, rgba(248,242,252,.99) 100%) !important;
}
body .gs-panel-shell .gs-main .gs-stat:nth-child(3),
body .gs-panel-shell .gs-main .gs-kpi-card:nth-child(3),
body .gs-panel-shell .gs-main .gs-section-kpi:nth-child(3),
body .gs-panel-shell .gs-main .gs-data-tile:nth-child(3){
background:
radial-gradient(circle at top right, rgba(142,251,250,.24), transparent 22%),
linear-gradient(135deg, rgba(236,247,251,.98) 0%, rgba(255,255,255,.99) 54%, rgba(241,250,252,.99) 100%) !important;
}
body .gs-panel-shell .gs-main .gs-stat:nth-child(4),
body .gs-panel-shell .gs-main .gs-kpi-card:nth-child(4),
body .gs-panel-shell .gs-main .gs-section-kpi:nth-child(4),
body .gs-panel-shell .gs-main .gs-data-tile:nth-child(4){
background:
radial-gradient(circle at top right, rgba(250,214,12,.24), transparent 22%),
linear-gradient(135deg, rgba(255,248,235,.98) 0%, rgba(255,255,255,.99) 54%, rgba(252,248,236,.99) 100%) !important;
}
body .gs-panel-shell .gs-main .gs-stat:nth-child(5),
body .gs-panel-shell .gs-main .gs-kpi-card:nth-child(5),
body .gs-panel-shell .gs-main .gs-section-kpi:nth-child(5),
body .gs-panel-shell .gs-main .gs-data-tile:nth-child(5){
background:
radial-gradient(circle at top right, rgba(156,51,51,.18), transparent 22%),
linear-gradient(135deg, rgba(252,240,240,.98) 0%, rgba(255,255,255,.99) 54%, rgba(252,245,245,.99) 100%) !important;
}
body .gs-panel-shell .gs-main .gs-btn.secondary,
body .gs-panel-shell .gs-main .gs-btn.gs-btn-ghost,
body .gs-panel-shell .gs-main .gs-btn.ghost,
body .gs-panel-shell .gs-main .gs-btn-outline,
body .gs-panel-shell .gs-main .gs-btn-soft{
background:
radial-gradient(circle at top right, rgba(142,251,250,.16), transparent 28%),
linear-gradient(135deg, rgba(255,255,255,.99) 0%, rgba(242,247,252,.99) 100%) !important;
border:1px solid rgba(0,24,134,.12) !important;
color:#001886 !important;
}
body .gs-panel-shell .gs-main .gs-badge,
body .gs-panel-shell .gs-main .gs-chip,
body .gs-panel-shell .gs-main .gs-pill,
body .gs-panel-shell .gs-main .gs-inline-kpi,
body .gs-panel-shell .gs-main .gs-pane-badge,
body .gs-panel-shell .gs-main .gs-meta-chip,
body .gs-panel-shell .gs-main .gs-hero-chip{
background:
radial-gradient(circle at top right, rgba(142,251,250,.16), transparent 30%),
linear-gradient(180deg, rgba(255,255,255,.99), rgba(242,247,252,.98)) !important;
}
body .gs-panel-shell .gs-main .gs-table-wrap .gs-table th{
background:
linear-gradient(180deg, rgba(239,245,252,1), rgba(230,239,249,1)) !important;
}
body .gs-panel-shell .gs-main .gs-table-wrap .gs-table tbody tr:hover td{
background:
linear-gradient(180deg, rgba(142,251,250,.12), rgba(255,255,255,.98)) !important;
}
body .gs-panel-shell .gs-main .gs-empty,
body .gs-panel-shell .gs-main .gs-empty-state,
body .gs-panel-shell .gs-main .gs-no-data,
body .gs-panel-shell .gs-main .gs-placeholder{
background:
radial-gradient(circle at top right, rgba(142,251,250,.18), transparent 24%),
radial-gradient(circle at bottom left, rgba(253,95,33,.10), transparent 18%),
linear-gradient(135deg, rgba(246,250,253,.98) 0%, rgba(255,255,255,.99) 100%) !important;
}
body .gs-panel-shell .gs-main .gs-page-hero .gs-hero-chip,
body .gs-panel-shell .gs-main .gs-page-hero .gs-inline-kpi{
box-shadow:0 8px 16px rgba(0,24,134,.05) !important;
}
/* =========================================================
v14 REAL BUILD
Strong visible card surfaces + anti-white overrides
========================================================= */
body .gs-panel-shell .gs-main .gs-card,
body .gs-panel-shell .gs-main .gs-dashboard-card,
body .gs-panel-shell .gs-main .gs-surface-soft,
body .gs-panel-shell .gs-main .gs-data-card,
body .gs-panel-shell .gs-main .gs-services-card,
body .gs-panel-shell .gs-main .gs-services-main-card,
body .gs-panel-shell .gs-main .gs-services-table-card,
body .gs-panel-shell .gs-main .gs-funds-card,
body .gs-panel-shell .gs-main .gs-funds-help-card,
body .gs-panel-shell .gs-main .gs-funds-faq-card,
body .gs-panel-shell .gs-main .gs-recent-orders-card,
body .gs-panel-shell .gs-main .gs-page-hero{
background:
radial-gradient(circle at top right, rgba(142,251,250,.26), transparent 22%),
radial-gradient(circle at bottom left, rgba(253,95,33,.14), transparent 18%),
linear-gradient(135deg, #eef5fb 0%, #ffffff 48%, #f2f8fc 100%) !important;
border:1px solid rgba(0,24,134,.12) !important;
box-shadow:0 16px 34px rgba(0,24,134,.07) !important;
}
body .gs-panel-shell .gs-main .gs-dashboard-card--promo{
background:
radial-gradient(circle at top right, rgba(250,214,12,.34), transparent 22%),
radial-gradient(circle at bottom left, rgba(253,95,33,.16), transparent 18%),
linear-gradient(135deg, #fbf3d8 0%, #ffffff 46%, #fff6de 100%) !important;
}
body .gs-panel-shell .gs-main .gs-dashboard-card--support{
background:
radial-gradient(circle at top right, rgba(47,6,94,.24), transparent 24%),
radial-gradient(circle at bottom left, rgba(142,251,250,.12), transparent 18%),
linear-gradient(135deg, #efe8f8 0%, #ffffff 46%, #f4eefb 100%) !important;
}
body .gs-panel-shell .gs-main .gs-dashboard-card--wallet{
background:
radial-gradient(circle at top right, rgba(253,95,33,.26), transparent 22%),
radial-gradient(circle at bottom left, rgba(0,24,134,.10), transparent 18%),
linear-gradient(135deg, #faece4 0%, #ffffff 46%, #fff1e9 100%) !important;
}
body .gs-panel-shell .gs-main .gs-dashboard-card--aqua{
background:
radial-gradient(circle at top right, rgba(142,251,250,.28), transparent 22%),
radial-gradient(circle at bottom left, rgba(0,24,134,.10), transparent 18%),
linear-gradient(135deg, #eaf9f9 0%, #ffffff 46%, #eefbfb 100%) !important;
}
body .gs-panel-shell .gs-main .gs-dashboard-card--orange{
background:
radial-gradient(circle at top right, rgba(253,95,33,.20), transparent 24%),
radial-gradient(circle at bottom left, rgba(250,214,12,.16), transparent 18%),
linear-gradient(135deg, #fbefe6 0%, #ffffff 46%, #fff3ec 100%) !important;
}
body .gs-panel-shell .gs-main .gs-stat,
body .gs-panel-shell .gs-main .gs-kpi-card,
body .gs-panel-shell .gs-main .gs-section-kpi,
body .gs-panel-shell .gs-main .gs-data-tile{
border:1px solid rgba(0,24,134,.12) !important;
box-shadow:0 12px 26px rgba(0,24,134,.06) !important;
background:
radial-gradient(circle at top right, rgba(142,251,250,.22), transparent 22%),
linear-gradient(135deg, #eaf3fb 0%, #ffffff 52%, #f3f8fc 100%) !important;
}
body .gs-panel-shell .gs-main .gs-stat:nth-child(2),
body .gs-panel-shell .gs-main .gs-kpi-card:nth-child(2),
body .gs-panel-shell .gs-main .gs-section-kpi:nth-child(2),
body .gs-panel-shell .gs-main .gs-data-tile:nth-child(2){
background:
radial-gradient(circle at top right, rgba(47,6,94,.20), transparent 22%),
linear-gradient(135deg, #f0e9f8 0%, #ffffff 52%, #f6effc 100%) !important;
}
body .gs-panel-shell .gs-main .gs-stat:nth-child(3),
body .gs-panel-shell .gs-main .gs-kpi-card:nth-child(3),
body .gs-panel-shell .gs-main .gs-section-kpi:nth-child(3),
body .gs-panel-shell .gs-main .gs-data-tile:nth-child(3){
background:
radial-gradient(circle at top right, rgba(142,251,250,.30), transparent 22%),
linear-gradient(135deg, #e5fbfb 0%, #ffffff 52%, #eefdfd 100%) !important;
}
body .gs-panel-shell .gs-main .gs-stat:nth-child(4),
body .gs-panel-shell .gs-main .gs-kpi-card:nth-child(4),
body .gs-panel-shell .gs-main .gs-section-kpi:nth-child(4),
body .gs-panel-shell .gs-main .gs-data-tile:nth-child(4){
background:
radial-gradient(circle at top right, rgba(250,214,12,.28), transparent 22%),
linear-gradient(135deg, #fff6dd 0%, #ffffff 52%, #fff9e8 100%) !important;
}
body .gs-panel-shell .gs-main .gs-stat:nth-child(5),
body .gs-panel-shell .gs-main .gs-kpi-card:nth-child(5),
body .gs-panel-shell .gs-main .gs-section-kpi:nth-child(5),
body .gs-panel-shell .gs-main .gs-data-tile:nth-child(5){
background:
radial-gradient(circle at top right, rgba(156,51,51,.20), transparent 22%),
linear-gradient(135deg, #f8ecec 0%, #ffffff 52%, #fcf2f2 100%) !important;
}
body .gs-panel-shell .gs-main .gs-table-wrap .gs-table th{
background:linear-gradient(180deg, #e9f1fa, #dde8f5) !important;
}
body .gs-panel-shell .gs-main .gs-table-wrap .gs-table tbody tr:nth-child(even) td{
background:rgba(239,245,251,.72) !important;
}
body .gs-panel-shell .gs-main .gs-table-wrap .gs-table tbody tr:hover td{
background:linear-gradient(180deg, rgba(142,251,250,.14), rgba(255,255,255,.98)) !important;
}
/* =========================================================
v15 REAL BUILD
Stronger dark/tinted visible surfaces and buttons
========================================================= */
:root{
--gs-v15-blue:#001886;
--gs-v15-blue-2:#1f4ecf;
--gs-v15-orange:#FD5F21;
--gs-v15-cyan:#0ea5c6;
--gs-v15-purple:#5b1fa5;
--gs-v15-yellow:#d9b100;
--gs-v15-ink:#151515;
--gs-v15-text-on-dark:#ffffff;
}
body .gs-panel-shell .gs-main .gs-btn,
body .gs-panel-shell .gs-main .gs-btn:visited,
body .gs-panel-shell .gs-main button.gs-btn,
body .gs-panel-shell .gs-main input[type="submit"].gs-btn{
background:
linear-gradient(135deg, #001886 0%, #1f4ecf 42%, #0ea5c6 72%, #FD5F21 100%) !important;
color:#fff !important;
border:1px solid rgba(0,24,134,.18) !important;
box-shadow:
0 16px 30px rgba(0,24,134,.22),
0 10px 20px rgba(253,95,33,.16) !important;
}
body .gs-panel-shell .gs-main .gs-btn.secondary,
body .gs-panel-shell .gs-main .gs-btn.gs-btn-ghost,
body .gs-panel-shell .gs-main .gs-btn.ghost,
body .gs-panel-shell .gs-main .gs-btn-outline,
body .gs-panel-shell .gs-main .gs-btn-soft{
background:
linear-gradient(135deg, rgba(0,24,134,.92) 0%, rgba(31,78,207,.88) 44%, rgba(14,165,198,.86) 100%) !important;
color:#ffffff !important;
border:1px solid rgba(0,24,134,.24) !important;
box-shadow:0 12px 24px rgba(0,24,134,.18) !important;
}
body .gs-panel-shell .gs-main .gs-card,
body .gs-panel-shell .gs-main .gs-dashboard-card,
body .gs-panel-shell .gs-main .gs-surface-soft,
body .gs-panel-shell .gs-main .gs-data-card,
body .gs-panel-shell .gs-main .gs-services-card,
body .gs-panel-shell .gs-main .gs-services-main-card,
body .gs-panel-shell .gs-main .gs-services-table-card,
body .gs-panel-shell .gs-main .gs-funds-card,
body .gs-panel-shell .gs-main .gs-funds-help-card,
body .gs-panel-shell .gs-main .gs-funds-faq-card,
body .gs-panel-shell .gs-main .gs-recent-orders-card,
body .gs-panel-shell .gs-main .gs-page-hero{
background:
radial-gradient(circle at top right, rgba(142,251,250,.24), transparent 18%),
radial-gradient(circle at bottom left, rgba(253,95,33,.16), transparent 15%),
linear-gradient(135deg, #dfeaf6 0%, #edf4fb 28%, #f6fbff 52%, #e8f2f9 100%) !important;
border:1px solid rgba(0,24,134,.14) !important;
box-shadow:0 16px 34px rgba(0,24,134,.08) !important;
}
body .gs-panel-shell .gs-main .gs-page-hero{
background:
radial-gradient(circle at top right, rgba(253,95,33,.18), transparent 18%),
radial-gradient(circle at bottom left, rgba(142,251,250,.22), transparent 18%),
linear-gradient(135deg, #dcecf4 0%, #edf6fb 30%, #f6fbff 58%, #e6f0f7 100%) !important;
}
body .gs-panel-shell .gs-main .gs-dashboard-card--promo{
background:
radial-gradient(circle at top right, rgba(250,214,12,.42), transparent 18%),
radial-gradient(circle at bottom left, rgba(253,95,33,.18), transparent 15%),
linear-gradient(135deg, #f4e4a9 0%, #f9efd0 34%, #fff7e4 60%, #f3e5b8 100%) !important;
}
body .gs-panel-shell .gs-main .gs-dashboard-card--support{
background:
radial-gradient(circle at top right, rgba(47,6,94,.28), transparent 18%),
radial-gradient(circle at bottom left, rgba(142,251,250,.14), transparent 14%),
linear-gradient(135deg, #e2d5f1 0%, #efe5fa 34%, #f8f3ff 60%, #e6daf4 100%) !important;
}
body .gs-panel-shell .gs-main .gs-dashboard-card--wallet,
body .gs-panel-shell .gs-main .gs-dashboard-card--orange{
background:
radial-gradient(circle at top right, rgba(253,95,33,.28), transparent 18%),
radial-gradient(circle at bottom left, rgba(250,214,12,.16), transparent 15%),
linear-gradient(135deg, #f7dccf 0%, #fbe9df 34%, #fff4ec 60%, #f4ddd1 100%) !important;
}
body .gs-panel-shell .gs-main .gs-dashboard-card--aqua{
background:
radial-gradient(circle at top right, rgba(142,251,250,.30), transparent 18%),
radial-gradient(circle at bottom left, rgba(0,24,134,.12), transparent 15%),
linear-gradient(135deg, #dff8f7 0%, #ebfbfb 34%, #f6ffff 60%, #dff3f5 100%) !important;
}
body .gs-panel-shell .gs-main .gs-stat,
body .gs-panel-shell .gs-main .gs-kpi-card,
body .gs-panel-shell .gs-main .gs-section-kpi,
body .gs-panel-shell .gs-main .gs-data-tile{
background:
radial-gradient(circle at top right, rgba(142,251,250,.18), transparent 16%),
linear-gradient(135deg, #dbe8f6 0%, #ebf3fb 42%, #f5fbff 100%) !important;
border:1px solid rgba(0,24,134,.14) !important;
box-shadow:0 12px 24px rgba(0,24,134,.08) !important;
}
body .gs-panel-shell .gs-main .gs-stat:nth-child(2),
body .gs-panel-shell .gs-main .gs-kpi-card:nth-child(2),
body .gs-panel-shell .gs-main .gs-section-kpi:nth-child(2),
body .gs-panel-shell .gs-main .gs-data-tile:nth-child(2){
background:
radial-gradient(circle at top right, rgba(47,6,94,.24), transparent 16%),
linear-gradient(135deg, #e4daf2 0%, #efe8f8 42%, #f8f4fd 100%) !important;
}
body .gs-panel-shell .gs-main .gs-stat:nth-child(3),
body .gs-panel-shell .gs-main .gs-kpi-card:nth-child(3),
body .gs-panel-shell .gs-main .gs-section-kpi:nth-child(3),
body .gs-panel-shell .gs-main .gs-data-tile:nth-child(3){
background:
radial-gradient(circle at top right, rgba(142,251,250,.34), transparent 16%),
linear-gradient(135deg, #daf8f8 0%, #e9fcfc 42%, #f6ffff 100%) !important;
}
body .gs-panel-shell .gs-main .gs-stat:nth-child(4),
body .gs-panel-shell .gs-main .gs-kpi-card:nth-child(4),
body .gs-panel-shell .gs-main .gs-section-kpi:nth-child(4),
body .gs-panel-shell .gs-main .gs-data-tile:nth-child(4){
background:
radial-gradient(circle at top right, rgba(250,214,12,.34), transparent 16%),
linear-gradient(135deg, #f8ebbe 0%, #fcf2cf 42%, #fff9e7 100%) !important;
}
body .gs-panel-shell .gs-main .gs-stat:nth-child(5),
body .gs-panel-shell .gs-main .gs-kpi-card:nth-child(5),
body .gs-panel-shell .gs-main .gs-section-kpi:nth-child(5),
body .gs-panel-shell .gs-main .gs-data-tile:nth-child(5){
background:
radial-gradient(circle at top right, rgba(156,51,51,.22), transparent 16%),
linear-gradient(135deg, #f4dcdc 0%, #faecec 42%, #fff6f6 100%) !important;
}
body .gs-panel-shell .gs-main .gs-stat-label,
body .gs-panel-shell .gs-main .gs-kpi-card__label,
body .gs-panel-shell .gs-main .gs-section-kpi__label,
body .gs-panel-shell .gs-main .gs-data-tile__label{
color:#44566c !important;
}
body .gs-panel-shell .gs-main .gs-stat-val,
body .gs-panel-shell .gs-main .gs-kpi-card__value,
body .gs-panel-shell .gs-main .gs-section-kpi__value,
body .gs-panel-shell .gs-main .gs-data-tile__value{
color:#0f172a !important;
}
body .gs-panel-shell .gs-main .gs-table-wrap .gs-table th{
background:linear-gradient(180deg, #dce8f5, #d2e1f1) !important;
}
body .gs-panel-shell .gs-main .gs-table-wrap .gs-table tbody tr:nth-child(even) td{
background:rgba(230,239,248,.82) !important;
}
body .gs-panel-shell .gs-main .gs-table-wrap .gs-table tbody tr:hover td{
background:linear-gradient(180deg, rgba(142,251,250,.18), rgba(245,251,255,.98)) !important;
}
/* === 2026 premium theme normalization layer === */
body .gs-panel-shell,
body .gs-panel-root{
background:var(--gs-panel-backdrop);
color:var(--gs-text);
}
body .gs-panel-shell .gs-layout,
body .gs-panel-root .gs-layout{
align-items:start;
}
body .gs-panel-shell .gs-sidebar,
body .gs-panel-shell .gs-topbar,
body .gs-panel-shell .gs-card,
body .gs-panel-shell .gs-dashboard-card,
body .gs-panel-shell .gs-data-card,
body .gs-panel-shell .gs-services-card,
body .gs-panel-shell .gs-services-main-card,
body .gs-panel-shell .gs-services-table-card,
body .gs-panel-shell .gs-funds-card,
body .gs-panel-shell .gs-funds-help-card,
body .gs-panel-shell .gs-funds-faq-card,
body .gs-panel-shell .gs-recent-orders-card,
body .gs-panel-shell .gs-page-hero,
body .gs-panel-shell .gs-notification-card,
body .gs-panel-shell .gs-ticket-card,
body .gs-panel-shell .gs-account-card,
body .gs-panel-shell .gs-info-box,
body .gs-panel-shell .gs-no-box,
body .gs-panel-shell .gs-search-results,
body .gs-panel-shell .gs-mobile-dock__item{
background:linear-gradient(180deg, var(--gs-card-bg, var(--gs-surface)) 0%, var(--gs-card-alt, var(--gs-surface-2)) 100%) !important;
border:1px solid var(--gs-border) !important;
box-shadow:var(--gs-card-glow) !important;
}
body .gs-panel-shell .gs-brand,
body .gs-panel-shell .gs-sidebar-footer{
background:linear-gradient(180deg, var(--gs-surface) 0%, var(--gs-surface-2) 100%) !important;
border-color:var(--gs-border) !important;
}
body .gs-panel-shell .gs-nav a,
body .gs-panel-shell .gs-menu-item{
color:var(--gs-primary-2) !important;
border:1px solid transparent !important;
}
body .gs-panel-shell .gs-nav a:hover,
body .gs-panel-shell .gs-menu-item:hover{
background:var(--gs-hover-surface) !important;
border-color:var(--gs-soft-border) !important;
}
body .gs-panel-shell .gs-nav a.active,
body .gs-panel-shell .gs-menu-item.active,
body .gs-panel-shell .gs-menu-item.is-active{
background:linear-gradient(135deg, rgba(253,95,33,.12), rgba(0,24,134,.08)) !important;
border-color:rgba(253,95,33,.28) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 10px 20px rgba(0,24,134,.08) !important;
}
body .gs-panel-shell .gs-stat,
body .gs-panel-shell .gs-kpi-card,
body .gs-panel-shell .gs-section-kpi,
body .gs-panel-shell .gs-data-tile,
body .gs-panel-shell .gs-metric-card,
body .gs-panel-shell .gs-inline-kpi{
background:linear-gradient(180deg, var(--gs-surface) 0%, var(--gs-surface-3) 100%) !important;
border:1px solid var(--gs-border) !important;
box-shadow:0 12px 28px rgba(0,24,134,.07) !important;
}
body .gs-panel-shell .gs-table-wrap,
body .gs-panel-shell .gs-scrollbox,
body .gs-panel-shell .gs-accordion,
body .gs-panel-shell .gs-acc,
body .gs-panel-shell .gs-form,
body .gs-panel-shell .gs-input-group{
background:var(--gs-surface) !important;
border-color:var(--gs-border) !important;
}
body .gs-panel-shell .gs-table,
body .gs-panel-shell .gs-table td,
body .gs-panel-shell .gs-table th{
border-color:var(--gs-border) !important;
}
body .gs-panel-shell .gs-table-wrap .gs-table th{
background:linear-gradient(180deg, var(--gs-surface-3), var(--gs-surface-2)) !important;
color:var(--gs-primary-2) !important;
}
body .gs-panel-shell .gs-table-wrap .gs-table tbody tr:nth-child(even) td{
background:rgba(237,244,251,.7) !important;
}
body .gs-panel-shell .gs-table-wrap .gs-table tbody tr:hover td{
background:rgba(253,95,33,.06) !important;
}
body .gs-panel-shell .gs-input,
body .gs-panel-shell select,
body .gs-panel-shell textarea,
body .gs-panel-shell input[type="text"],
body .gs-panel-shell input[type="number"],
body .gs-panel-shell input[type="email"],
body .gs-panel-shell input[type="search"],
body .gs-panel-shell input[type="password"]{
background:var(--gs-surface) !important;
color:var(--gs-text) !important;
border:1px solid var(--gs-border) !important;
box-shadow:none !important;
}
body .gs-panel-shell .gs-input:focus,
body .gs-panel-shell select:focus,
body .gs-panel-shell textarea:focus,
body .gs-panel-shell input:focus{
outline:none !important;
border-color:rgba(253,95,33,.45) !important;
box-shadow:0 0 0 4px rgba(253,95,33,.10) !important;
}
body .gs-panel-shell .gs-btn,
body .gs-panel-shell button.gs-btn,
body .gs-panel-shell input[type="submit"].gs-btn{
border-radius:14px !important;
}
body .gs-panel-shell .gs-btn-primary,
body .gs-panel-shell .gs-install-btn,
body .gs-panel-shell .gs-btn:not(.gs-btn-ghost):not(.gs-btn-soft){
background:linear-gradient(135deg, var(--gs-primary) 0%, #ff874d 100%) !important;
color:#fff !important;
border:1px solid rgba(253,95,33,.36) !important;
box-shadow:0 12px 24px rgba(253,95,33,.18) !important;
}
body .gs-panel-shell .gs-btn-ghost,
body .gs-panel-shell .gs-btn-soft,
body .gs-panel-shell .gs-icon-btn{
background:var(--gs-surface) !important;
color:var(--gs-primary-2) !important;
border:1px solid var(--gs-border) !important;
}
body .gs-panel-shell .gs-badge,
body .gs-panel-shell .gs-badge-pill,
body .gs-panel-shell .gs-hero-chip{
background:rgba(253,95,33,.10) !important;
color:var(--gs-primary-2) !important;
border:1px solid rgba(253,95,33,.20) !important;
}
body .gs-panel-shell .gs-empty,
body .gs-panel-shell .gs-alert{
border-radius:16px !important;
}
body .gs-panel-shell .gs-topbar,
body .gs-panel-shell .gs-page-hero,
body .gs-panel-shell .gs-card,
body .gs-panel-shell .gs-dashboard-card{
backdrop-filter:saturate(1.1) blur(8px);
}
@media (max-width: 1024px){
body .gs-panel-shell .gs-layout{grid-template-columns:1fr !important;}
body .gs-panel-shell .gs-sidebar{position:relative !important;top:auto !important;height:auto !important;}
}
@media (max-width: 767px){
body .gs-panel-shell .gs-topbar{padding:12px !important;flex-wrap:wrap !important;align-items:flex-start !important;}
body .gs-panel-shell .gs-topbar .gs-topbar-right{width:100%;justify-content:space-between;flex-wrap:wrap;}
body .gs-panel-shell .gs-card,
body .gs-panel-shell .gs-dashboard-card,
body .gs-panel-shell .gs-page-hero{padding:14px !important;border-radius:16px !important;}
body .gs-panel-shell .gs-table-wrap{overflow:auto;}
body .gs-panel-shell .gs-btn,
body .gs-panel-shell button,
body .gs-panel-shell input[type="submit"]{min-height:42px;}
}
/* === Professional UI Upgrade Pack === */
.gs-panel-root{
background:var(--gs-panel-backdrop,var(--gs-bg));
color:var(--gs-text);
}
.gs-panel{
max-width:1600px;
margin:0 auto;
}
.gs-layout{
gap:22px;
padding:20px;
}
.gs-sidebar{
background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(245,249,255,.90));
border:1px solid var(--gs-soft-border,var(--gs-border));
border-radius:24px;
box-shadow:0 30px 80px rgba(2,6,23,.10), inset 0 1px 0 rgba(255,255,255,.75);
backdrop-filter:blur(12px);
}
.gs-brand,
.gs-sidebar-footer{
background:transparent;
}
.gs-brand-inner{
padding:2px 0;
}
.gs-brand-logo,
.gs-brand-fallback{
border-radius:18px;
box-shadow:0 16px 36px rgba(0,24,134,.14);
background:linear-gradient(135deg, var(--gs-primary), var(--gs-primary-2));
}
.gs-brand-text .gs-brand-name{
font-weight:900;
letter-spacing:.01em;
}
.gs-brand-sub{
color:var(--gs-muted);
}
.gs-menu-item{
border:1px solid transparent;
border-radius:18px;
margin:6px 0;
background:transparent;
transition:all .18s ease;
}
.gs-menu-item:hover{
background:linear-gradient(135deg, rgba(253,95,33,.08), rgba(0,24,134,.08));
border-color:rgba(0,24,134,.12);
transform:translateX(2px);
}
.gs-menu-item.active{
background:linear-gradient(135deg, var(--gs-primary), var(--gs-primary-2));
color:#fff;
box-shadow:0 18px 40px rgba(0,24,134,.18);
border-color:transparent;
}
.gs-menu-item.active .gs-menu-ico,
.gs-menu-item.active .gs-menu-txt{color:#fff;}
.gs-menu-ico{
width:40px;
height:40px;
border-radius:14px;
background:rgba(255,255,255,.72);
box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.gs-menu-item.active .gs-menu-ico{
background:rgba(255,255,255,.18);
}
.gs-main{
gap:18px;
}
.gs-topbar{
background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(247,250,255,.88));
border:1px solid var(--gs-soft-border,var(--gs-border));
border-radius:24px;
box-shadow:0 20px 50px rgba(2,6,23,.08);
backdrop-filter:blur(10px);
}
.gs-topbar-title{
font-size:22px;
font-weight:900;
letter-spacing:-.02em;
}
.gs-top-kpi,
.gs-top-search,
.gs-stat,
.gs-hero-chip,
.gs-inline-kpi,
.gs-pill,
.gs-chip,
.gs-orders-note,
.gs-mini,
.gs-badge,
.gs-tab-count{
border-radius:14px;
}
.gs-top-kpi{
background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(244,248,253,.85));
border:1px solid var(--gs-soft-border,var(--gs-border));
box-shadow:0 10px 26px rgba(2,6,23,.05);
}
.gs-kpi-val{font-weight:900;}
.gs-top-search input,
.gs-input,
.gs-select,
.gs-textarea,
select,
textarea,
input[type="text"],
input[type="search"],
input[type="number"],
input[type="url"],
input[type="email"],
input[type="password"]{
background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,249,253,.92));
border:1px solid rgba(148,163,184,.35);
border-radius:16px;
box-shadow:inset 0 2px 4px rgba(15,23,42,.03), 0 1px 0 rgba(255,255,255,.85);
}
.gs-top-search input:focus,
.gs-input:focus,
.gs-select:focus,
.gs-textarea:focus,
select:focus,
textarea:focus,
input:focus{
outline:none;
border-color:rgba(0,24,134,.32);
box-shadow:0 0 0 4px rgba(0,24,134,.10), inset 0 2px 4px rgba(15,23,42,.03);
}
.gs-card,
.gs-kpi-card,
.gs-stat-card,
.gs-box,
.gs-widget,
.gs-table-wrap,
.gs-drawer__panel,
.gs-empty,
.gs-page-hero,
.gs-quick-card,
.gs-summary-card,
.gs-chart-card,
.gs-form-card,
.gs-orders-card,
.gs-wallet-card,
.gs-service-card,
.gs-ticket-card,
.gs-notice-card,
.gs-grid > .gs-card,
[class*="gs-col"] > .gs-card{
background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,249,255,.94));
border:1px solid rgba(148,163,184,.28);
border-radius:24px;
box-shadow:0 24px 55px rgba(2,6,23,.08), inset 0 1px 0 rgba(255,255,255,.75);
}
.gs-page-hero{
position:relative;
overflow:hidden;
padding:26px 28px;
background:linear-gradient(135deg, rgba(0,24,134,.98), rgba(9,56,158,.95) 48%, rgba(253,95,33,.94));
color:#fff;
border:none;
}
.gs-page-hero h2,
.gs-page-hero p,
.gs-page-hero .gs-muted,
.gs-page-hero .gs-hero-chip{color:#fff;}
.gs-page-hero::after{
content:"";
position:absolute;
inset:auto -80px -80px auto;
width:240px;
height:240px;
border-radius:50%;
background:radial-gradient(circle, rgba(255,255,255,.22), transparent 65%);
}
.gs-hero-chip{
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.18);
box-shadow:none;
}
.gs-kpi-card,
.gs-stat-card{
padding:18px 18px;
min-height:120px;
}
.gs-kpi-card__label,
.gs-stat-label{
color:var(--gs-muted);
font-weight:800;
text-transform:uppercase;
letter-spacing:.06em;
font-size:11px;
}
.gs-kpi-card__value,
.gs-stat-value{
font-size:30px;
line-height:1.05;
font-weight:900;
letter-spacing:-.03em;
color:var(--gs-text);
}
.gs-card-head,
.gs-section-head{
padding-bottom:14px;
margin-bottom:16px;
border-bottom:1px solid rgba(148,163,184,.16);
}
.gs-card h2,
.gs-card h3,
.gs-section-title{font-weight:900;color:var(--gs-text);}
.gs-btn,
button.gs-btn,
a.gs-btn,
.gs-card .button,
.gs-card button.button,
.button.button-primary,
.button-primary{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
min-height:44px;
padding:0 16px;
border-radius:15px;
border:1px solid transparent;
font-weight:800;
text-decoration:none;
transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.gs-btn,
button.gs-btn,
a.gs-btn,
.button.button-primary,
.button-primary{
background:linear-gradient(135deg, var(--gs-primary), var(--gs-primary-2));
color:#fff;
box-shadow:0 16px 34px rgba(0,24,134,.20);
}
.gs-btn:hover,
button.gs-btn:hover,
a.gs-btn:hover,
.button.button-primary:hover,
.button-primary:hover{
color:#fff;
transform:translateY(-1px);
box-shadow:0 20px 38px rgba(0,24,134,.24);
}
.gs-btn.secondary,
.gs-btn.gs-btn-soft,
.gs-card .button,
.button{
background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,248,253,.92));
color:var(--gs-text);
border-color:rgba(148,163,184,.28);
box-shadow:0 10px 24px rgba(2,6,23,.06);
}
.gs-btn.secondary:hover,
.gs-btn.gs-btn-soft:hover,
.gs-card .button:hover,
.button:hover{color:var(--gs-text);}
.gs-tabs--pill,
.gs-tabs,
.gs-filter-tabs{
gap:10px;
}
.gs-tab-btn{
border:1px solid rgba(148,163,184,.20);
border-radius:15px;
background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,248,253,.88));
color:var(--gs-text);
box-shadow:0 8px 22px rgba(2,6,23,.05);
}
.gs-tab-btn.is-active,
.gs-tab-btn:hover{
border-color:transparent;
}
.gs-tab-btn.is-active{
background:linear-gradient(135deg, var(--gs-primary), var(--gs-primary-2));
color:#fff;
box-shadow:0 16px 32px rgba(0,24,134,.18);
}
.gs-table-wrap{
overflow:auto;
padding:10px;
}
.gs-table,
.gs-table table{border-collapse:separate;border-spacing:0 10px;}
.gs-table thead th{
color:var(--gs-muted);
font-size:12px;
text-transform:uppercase;
letter-spacing:.06em;
font-weight:900;
border:none;
}
.gs-table tbody td{
background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,249,253,.92));
border-top:1px solid rgba(148,163,184,.18);
border-bottom:1px solid rgba(148,163,184,.18);
padding:14px 14px;
vertical-align:middle;
}
.gs-table tbody td:first-child{
border-left:1px solid rgba(148,163,184,.18);
border-radius:16px 0 0 16px;
}
.gs-table tbody td:last-child{
border-right:1px solid rgba(148,163,184,.18);
border-radius:0 16px 16px 0;
}
.gs-badge,
[class*="gs-badge--"]{
display:inline-flex;
align-items:center;
gap:6px;
padding:7px 10px;
border-radius:999px;
font-size:12px;
font-weight:800;
}
.gs-badge--success{background:rgba(22,163,74,.10); color:#166534; border:1px solid rgba(22,163,74,.18);}
.gs-badge--warning{background:rgba(245,158,11,.12); color:#92400e; border:1px solid rgba(245,158,11,.18);}
.gs-badge--info{background:rgba(2,132,199,.10); color:#0c4a6e; border:1px solid rgba(2,132,199,.18);}
.gs-badge--danger{background:rgba(220,38,38,.10); color:#991b1b; border:1px solid rgba(220,38,38,.18);}
.gs-badge--partial{background:rgba(124,58,237,.10); color:#5b21b6; border:1px solid rgba(124,58,237,.18);}
.gs-badge--refund{background:rgba(20,184,166,.10); color:#115e59; border:1px solid rgba(20,184,166,.18);}
.gs-empty{
padding:36px 24px;
text-align:center;
background:linear-gradient(180deg, rgba(244,248,253,.9), rgba(255,255,255,.95));
}
.gs-drawer__panel,
.gs-modal-card{
border-radius:26px;
box-shadow:0 30px 90px rgba(2,6,23,.24);
}
.gs-drawer__head,
.gs-modal-head{
background:linear-gradient(180deg, rgba(248,250,255,.96), rgba(242,246,251,.92));
border-bottom:1px solid rgba(148,163,184,.18);
}
.gs-install-btn,
#gsInstallBtn{width:100%;}
.gs-note,
.gs-muted{color:var(--gs-muted);}
@media (max-width: 1080px){
.gs-layout{padding:16px;gap:16px;}
.gs-topbar{border-radius:20px;}
.gs-page-hero{padding:22px;}
}
@media (max-width: 782px){
.gs-layout{padding:12px;}
.gs-topbar-title{font-size:18px;}
.gs-card,
.gs-kpi-card,
.gs-page-hero,
.gs-sidebar,
.gs-topbar{border-radius:20px;}
.gs-table{min-width:760px;}
.gs-menu-item:hover{transform:none;}
}
/* =========================================================
v8 final polish pass - contrast, duplication cleanup, soft premium UI
========================================================= */
body .gs-panel-shell,
body .gs-panel-shell .gs-main,
body .gs-panel-shell .gs-main *{
color: var(--gs-text, #16324f);
}
body .gs-panel-shell .gs-main .gs-muted,
body .gs-panel-shell .gs-main .gs-pane-sub,
body .gs-panel-shell .gs-main .gs-wallet-note,
body .gs-panel-shell .gs-main .gs-table-note,
body .gs-panel-shell .gs-main .gs-empty .gs-muted,
body .gs-panel-shell .gs-main p{
color:#5f6f86 !important;
}
body .gs-panel-shell .gs-main .gs-card,
body .gs-panel-shell .gs-main .gs-stat,
body .gs-panel-shell .gs-main .gs-kpi-card,
body .gs-panel-shell .gs-main .gs-dashboard-card,
body .gs-panel-shell .gs-main .gs-wallet-card,
body .gs-panel-shell .gs-main .gs-orders-card,
body .gs-panel-shell .gs-main .gs-funds-card,
body .gs-panel-shell .gs-main .gs-quick-tip-box,
body .gs-panel-shell .gs-main .gs-info-box,
body .gs-panel-shell .gs-main .gs-empty,
body .gs-panel-shell .gs-main .gs-soft-section,
body .gs-panel-shell .gs-main .gs-services-card,
body .gs-panel-shell .gs-main .gs-ticket-card,
body .gs-panel-shell .gs-main .gs-table-wrap,
body .gs-panel-shell .gs-main .gs-scrollbox{
background: linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(247,250,255,.96) 100%) !important;
border:1px solid rgba(137,156,183,.28) !important;
box-shadow: 0 16px 40px rgba(16,24,40,.08) !important;
}
body .gs-panel-shell .gs-main .gs-page-hero{
background:
radial-gradient(circle at top right, rgba(253,95,33,.10), transparent 30%),
radial-gradient(circle at left bottom, rgba(142,251,250,.12), transparent 28%),
linear-gradient(135deg, rgba(255,248,245,.96) 0%, rgba(240,250,252,.96) 100%) !important;
border:1px solid rgba(133,151,180,.24) !important;
box-shadow: 0 20px 44px rgba(15,23,42,.08) !important;
}
body .gs-panel-shell .gs-main .gs-page-hero h2,
body .gs-panel-shell .gs-main .gs-page-hero h3,
body .gs-panel-shell .gs-main .gs-card h2,
body .gs-panel-shell .gs-main .gs-card h3,
body .gs-panel-shell .gs-main .gs-stat-label,
body .gs-panel-shell .gs-main .gs-kpi-card__label,
body .gs-panel-shell .gs-main .gs-metric-label{
color:#28486b !important;
}
body .gs-panel-shell .gs-main .gs-stat-val,
body .gs-panel-shell .gs-main .gs-kpi-card__value,
body .gs-panel-shell .gs-main .gs-metric-value{
color:#102844 !important;
}
body .gs-panel-shell .gs-main .gs-btn,
body .gs-panel-shell .gs-main button:not(.gs-network-btn):not(.gs-tab-btn),
body .gs-panel-shell .gs-main input[type="submit"],
body .gs-panel-shell .gs-main input[type="button"]{
color:#fff !important;
border:1px solid rgba(50,73,125,.12) !important;
background: linear-gradient(135deg, #355CDE 0%, #7E57C2 52%, #FD8D53 100%) !important;
box-shadow: 0 14px 28px rgba(53,92,222,.18) !important;
}
body .gs-panel-shell .gs-main .gs-btn:hover,
body .gs-panel-shell .gs-main button:not(.gs-network-btn):not(.gs-tab-btn):hover{
transform:translateY(-1px);
box-shadow: 0 18px 36px rgba(53,92,222,.24) !important;
}
body .gs-panel-shell .gs-main .gs-btn.secondary,
body .gs-panel-shell .gs-main .gs-btn.gs-btn-ghost,
body .gs-panel-shell .gs-main a.gs-btn.secondary,
body .gs-panel-shell .gs-main a.gs-btn.gs-btn-ghost{
color:#274261 !important;
background: linear-gradient(135deg, rgba(255,255,255,.95) 0%, rgba(244,247,255,.98) 100%) !important;
border:1px solid rgba(126,148,182,.28) !important;
box-shadow: 0 10px 24px rgba(15,23,42,.06) !important;
}
body .gs-panel-shell .gs-main .gs-btn.secondary:hover,
body .gs-panel-shell .gs-main .gs-btn.gs-btn-ghost:hover{
color:#142f50 !important;
border-color: rgba(77,104,168,.32) !important;
background: linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(237,244,255,1) 100%) !important;
}
body .gs-panel-shell .gs-main .gs-dashboard-card .gs-btn,
body .gs-panel-shell .gs-main .gs-dashboard-card a.gs-btn{
color:#fff !important;
}
body .gs-panel-shell .gs-main .gs-top-kpi,
body .gs-panel-shell .gs-main .gs-inline-kpi,
body .gs-panel-shell .gs-main .gs-hero-chip,
body .gs-panel-shell .gs-main .gs-chip,
body .gs-panel-shell .gs-main .gs-badge-pill{
color:#274261 !important;
background: linear-gradient(135deg, rgba(255,255,255,.92) 0%, rgba(243,247,255,.94) 100%) !important;
border:1px solid rgba(130,152,183,.28) !important;
box-shadow: 0 8px 18px rgba(15,23,42,.05) !important;
}
body .gs-panel-shell .gs-main .gs-tab-btn,
body .gs-panel-shell .gs-main .gs-tabs .gs-tab-btn{
color:#31506f !important;
background: linear-gradient(135deg, rgba(255,255,255,.9) 0%, rgba(243,247,255,.95) 100%) !important;
border:1px solid rgba(130,152,183,.26) !important;
}
body .gs-panel-shell .gs-main .gs-tab-btn.is-active,
body .gs-panel-shell .gs-main .gs-tabs .gs-tab-btn.is-active{
color:#fff !important;
background: linear-gradient(135deg, #355CDE 0%, #7E57C2 60%, #FD8D53 100%) !important;
border-color: transparent !important;
}
body .gs-panel-shell .gs-main .gs-tab-btn .gs-tab-count{color:inherit !important;}
body .gs-panel-shell .gs-sidebar{
background: linear-gradient(180deg, #f7f9ff 0%, #eef4fb 100%) !important;
border:1px solid rgba(130,152,183,.24) !important;
box-shadow: 0 18px 40px rgba(15,23,42,.08) !important;
}
body .gs-panel-shell .gs-menu-item{
color:#294461 !important;
background: linear-gradient(135deg, rgba(255,255,255,.72) 0%, rgba(248,250,255,.88) 100%) !important;
border:1px solid transparent !important;
}
body .gs-panel-shell .gs-menu-item:hover{
background: linear-gradient(135deg, rgba(255,255,255,.98) 0%, rgba(239,244,255,1) 100%) !important;
border-color: rgba(130,152,183,.26) !important;
}
body .gs-panel-shell .gs-menu-item.active{
color:#173a5e !important;
background: linear-gradient(135deg, rgba(255,244,236,1) 0%, rgba(236,249,250,1) 100%) !important;
border-color: rgba(253,95,33,.20) !important;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), 0 10px 24px rgba(15,23,42,.08) !important;
}
body .gs-panel-shell .gs-menu-item .gs-menu-txt,
body .gs-panel-shell .gs-menu-item.active .gs-menu-txt,
body .gs-panel-shell .gs-menu-item:hover .gs-menu-txt{
color:inherit !important;
}
body .gs-panel-shell .gs-menu-ico{
background: linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(240,245,255,1) 100%) !important;
color:#355CDE !important;
border:1px solid rgba(130,152,183,.22) !important;
}
body .gs-panel-shell .gs-main .gs-table thead th,
body .gs-panel-shell .gs-main table thead th{
color:#68809b !important;
}
body .gs-panel-shell .gs-main .gs-table tbody td,
body .gs-panel-shell .gs-main table tbody td{
color:#1c3554 !important;
background: rgba(255,255,255,.7) !important;
}
body .gs-panel-shell .gs-main .gs-wallet-kpis,
body .gs-panel-shell .gs-main .gs-orders-kpis,
body .gs-panel-shell .gs-main .gs-funds-kpis,
body .gs-panel-shell .gs-main.gs-tab-wallet .gs-page-hero .gs-hero-chips,
body .gs-panel-shell .gs-main.gs-tab-orders .gs-page-hero .gs-hero-chips,
body .gs-panel-shell .gs-main.gs-tab-add_funds .gs-page-hero .gs-hero-chips,
body .gs-panel-shell .gs-main.gs-tab-dashboard .gs-page-hero .gs-hero-chip-wrap{
display:none !important;
}
body .gs-panel-shell .gs-main.gs-tab-dashboard .gs-page-hero,
body .gs-panel-shell .gs-main.gs-tab-wallet .gs-page-hero,
body .gs-panel-shell .gs-main.gs-tab-orders .gs-page-hero,
body .gs-panel-shell .gs-main.gs-tab-add_funds .gs-page-hero{
padding-bottom:22px !important;
}
body .gs-panel-shell .gs-main .gs-network-btn,
body .gs-panel-shell .gs-main .gs-network-pill,
body .gs-panel-shell .gs-main .gs-networks button,
body .gs-panel-shell .gs-main .gs-network-list button{
color:#23405f !important;
border:1px solid rgba(99,132,178,.22) !important;
background:
radial-gradient(circle at top left, rgba(142,251,250,.26), transparent 38%),
radial-gradient(circle at bottom right, rgba(253,95,33,.18), transparent 34%),
linear-gradient(135deg, rgba(255,255,255,.96) 0%, rgba(238,246,255,.98) 100%) !important;
box-shadow: 0 12px 24px rgba(16,24,40,.08) !important;
}
body .gs-panel-shell .gs-main .gs-network-btn:hover,
body .gs-panel-shell .gs-main .gs-network-pill:hover,
body .gs-panel-shell .gs-main .gs-networks button:hover,
body .gs-panel-shell .gs-main .gs-network-list button:hover{
color:#163758 !important;
border-color: rgba(99,132,178,.34) !important;
transform: translateY(-1px) !important;
}
body .gs-panel-shell .gs-main .gs-network-btn.is-active,
body .gs-panel-shell .gs-main .gs-network-pill.is-active,
body .gs-panel-shell .gs-main .gs-networks button.is-active,
body .gs-panel-shell .gs-main .gs-network-list button.is-active,
body .gs-panel-shell .gs-main .gs-networks button.active,
body .gs-panel-shell .gs-main .gs-network-list button.active{
color:#173658 !important;
background:
radial-gradient(circle at top left, rgba(255,255,255,.95), transparent 26%),
linear-gradient(135deg, rgba(228,241,255,.98) 0%, rgba(239,253,251,.98) 46%, rgba(255,243,236,.98) 100%) !important;
border-color: rgba(253,95,33,.26) !important;
box-shadow: 0 16px 30px rgba(53,92,222,.12) !important;
}
body .gs-panel-shell .gs-main .gs-network-btn .gs-icon,
body .gs-panel-shell .gs-main .gs-network-pill .gs-icon,
body .gs-panel-shell .gs-main .gs-networks button .gs-icon,
body .gs-panel-shell .gs-main .gs-network-list button .gs-icon{
background:#fff !important;
color:#28486b !important;
border:1px solid rgba(130,152,183,.24) !important;
}
body .gs-panel-shell .gs-main .gs-inline-form .gs-input,
body .gs-panel-shell .gs-main .gs-input,
body .gs-panel-shell .gs-main input[type="text"],
body .gs-panel-shell .gs-main input[type="search"],
body .gs-panel-shell .gs-main input[type="number"],
body .gs-panel-shell .gs-main select,
body .gs-panel-shell .gs-main textarea{
color:#173658 !important;
background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(246,249,255,.98) 100%) !important;
border:1px solid rgba(130,152,183,.26) !important;
}
@media (max-width: 991px){
body .gs-panel-shell .gs-main .gs-top-kpis{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
body .gs-panel-shell .gs-main .gs-card-head--row,
body .gs-panel-shell .gs-main .gs-toolbar,
body .gs-panel-shell .gs-main .gs-panel-hero{flex-direction:column !important; align-items:stretch !important;}
}
/* v9 cleanup - remove duplicate feel, softer actions, readable active states */
body .gs-panel-shell .gs-brand-inner{align-items:center;justify-content:center;}
body .gs-panel-shell .gs-brand-text{display:block;text-align:left;}
body .gs-panel-shell .gs-brand-sub{display:none !important;}
body .gs-panel-shell .gs-brand-name{font-size:16px !important;font-weight:900;line-height:1.2;}
body .gs-panel-shell .gs-brand-logo,
body .gs-panel-shell .gs-brand-fallback{width:52px;height:52px;border-radius:16px;}
body .gs-panel-shell .gs-topbar-right{align-items:center;gap:8px;}
body .gs-panel-shell .gs-topbar .gs-top-kpi{
background:linear-gradient(135deg, rgba(255,250,246,.98) 0%, rgba(240,247,255,.98) 100%) !important;
min-width:126px;
}
body .gs-panel-shell .gs-topbar .gs-top-kpi .gs-muted{color:#6b7b90 !important;}
body .gs-panel-shell .gs-topbar .gs-kpi-val{color:#173a5e !important;font-size:15px;}
body .gs-panel-shell .gs-top-search input{background:linear-gradient(135deg,#fffdfa,#f3f8ff) !important;}
body .gs-panel-shell .gs-top-icons .gs-icon-btn,
body .gs-panel-shell .gs-top-icons .gs-btn.gs-icon-btn{
min-width:46px;height:46px;padding:0 12px !important;
background:linear-gradient(135deg,#fff7f2 0%,#eef5ff 55%,#effcf8 100%) !important;
color:#173a5e !important;
border:1px solid rgba(130,152,183,.28) !important;
box-shadow:0 10px 22px rgba(15,23,42,.06) !important;
}
body .gs-panel-shell .gs-top-icons .gs-icon-btn .gs-ic,
body .gs-panel-shell .gs-top-icons .gs-icon-btn svg{color:#355cde !important;fill:currentColor;}
body .gs-panel-shell .gs-top-icons .gs-icon-btn .gs-ic-label{
color:#173a5e !important;
font-size:11px !important;
position:static !important;
line-height:1 !important;
}
body .gs-panel-shell .gs-top-icons .gs-icon-btn.has-label{width:auto !important;gap:6px;}
body .gs-panel-shell #gsBtnLogout{
background:linear-gradient(135deg,#fff1f1 0%,#ffe1e1 50%,#ffd6d6 100%) !important;
color:#9f1239 !important;
border-color:rgba(239,68,68,.18) !important;
}
body .gs-panel-shell #gsBtnLogout svg,
body .gs-panel-shell #gsBtnLogout .gs-ic-label{color:#9f1239 !important;fill:currentColor;}
body .gs-panel-shell .gs-menu-item,
body .gs-panel-shell .gs-menu-item:hover,
body .gs-panel-shell .gs-menu-item.active{transform:none !important;}
body .gs-panel-shell .gs-menu-item.active,
body .gs-panel-shell .gs-menu-item.is-active{
background:linear-gradient(135deg, rgba(255,242,233,1) 0%, rgba(238,247,255,1) 58%, rgba(235,255,248,1) 100%) !important;
color:#173a5e !important;
}
body .gs-panel-shell .gs-menu-item.active .gs-menu-ico,
body .gs-panel-shell .gs-menu-item.active .gs-menu-txt,
body .gs-panel-shell .gs-menu-item.is-active .gs-menu-ico,
body .gs-panel-shell .gs-menu-item.is-active .gs-menu-txt{color:#173a5e !important;}
body .gs-panel-shell .gs-menu-item.active .gs-menu-ico,
body .gs-panel-shell .gs-menu-item.is-active .gs-menu-ico{
background:linear-gradient(135deg,#fff 0%,#f7fbff 100%) !important;
}
body .gs-panel-shell .gs-main .gs-btn,
body .gs-panel-shell .gs-main button:not(.gs-network-btn):not(.gs-tab-btn),
body .gs-panel-shell .gs-main input[type="submit"],
body .gs-panel-shell .gs-main input[type="button"]{
color:#173a5e !important;
border:1px solid rgba(130,152,183,.24) !important;
background:linear-gradient(135deg,#fff5ec 0%, #eef4ff 50%, #eefcf8 100%) !important;
box-shadow:0 12px 26px rgba(15,23,42,.07) !important;
}
body .gs-panel-shell .gs-main .gs-btn:hover,
body .gs-panel-shell .gs-main button:not(.gs-network-btn):not(.gs-tab-btn):hover{box-shadow:0 16px 32px rgba(15,23,42,.10) !important;}
body .gs-panel-shell .gs-main .gs-btn.primary,
body .gs-panel-shell .gs-main .gs-btn.gs-btn-primary,
body .gs-panel-shell .gs-main .gs-btn--accent{
color:#fff !important;
background:linear-gradient(135deg,#355cde 0%, #7e57c2 54%, #fd8d53 100%) !important;
}
body .gs-panel-shell .gs-main .gs-dashboard-card .gs-btn,
body .gs-panel-shell .gs-main .gs-card .gs-btn.primary{color:#fff !important;}
body .gs-panel-shell .gs-main .gs-btn.secondary,
body .gs-panel-shell .gs-main .gs-btn.gs-btn-ghost,
body .gs-panel-shell .gs-main a.gs-btn.secondary,
body .gs-panel-shell .gs-main a.gs-btn.gs-btn-ghost{
color:#173a5e !important;
background:linear-gradient(135deg,#fffdfa 0%,#f3f8ff 55%,#f6fffc 100%) !important;
}
/* Keep only one summary band per page */
body .gs-panel-shell .gs-tab-dashboard .gs-page-hero,
body .gs-panel-shell .gs-tab-add_funds .gs-funds-kpis,
body .gs-panel-shell .gs-tab-orders .gs-grid.gs-grid-4:first-of-type,
body .gs-panel-shell .gs-tab-new_order .chip,
body .gs-panel-shell .gs-tab-new_order .gs-info-box:first-of-type{display:none !important;}
/* New order network cards softer */
body .gs-panel-shell .gs-net-chip,
body .gs-panel-shell .gs-network-btn{
background:linear-gradient(135deg,#fff4eb 0%,#eef4ff 58%,#edfffa 100%) !important;
color:#173a5e !important;
border:1px solid rgba(130,152,183,.26) !important;
box-shadow:0 10px 22px rgba(15,23,42,.06) !important;
}
body .gs-panel-shell .gs-net-chip.active,
body .gs-panel-shell .gs-net-chip.is-active,
body .gs-panel-shell .gs-network-btn.is-active{
background:linear-gradient(135deg,#ffe7d7 0%,#eef4ff 55%,#e7fff7 100%) !important;
color:#102844 !important;
border-color:rgba(253,95,33,.28) !important;
}
body .gs-panel-shell .gs-net-icon{background:#fff !important;color:#173a5e !important;}
@media (max-width: 980px){
body .gs-panel-shell .gs-topbar .gs-top-kpis{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
body .gs-panel-shell .gs-top-icons .gs-icon-btn.has-label .gs-ic-label{display:none !important;}
body .gs-panel-shell .gs-top-icons .gs-icon-btn.has-label{width:46px !important;}
}
/* =========================================================
FINAL OVERRIDES — v5
Centralize panel surfaces and remove plain white visual blocks
========================================================= */
.gs-panel-root{
--gs-btn-grad: linear-gradient(135deg, #4458dc 0%, #6f53d8 38%, #fe8c57 100%);
--gs-btn-soft: linear-gradient(135deg, #eef4ff 0%, #f7f3ff 52%, #fff1e8 100%);
--gs-chip-bg: linear-gradient(135deg, #eff5ff 0%, #f9f4ff 56%, #fff3ea 100%);
--gs-card-tint: linear-gradient(135deg, rgba(238,245,255,.96) 0%, rgba(247,243,255,.96) 48%, rgba(255,241,232,.96) 100%);
}
.gs-panel-root .gs-page,
.gs-panel-root .gs-card,
.gs-panel-root .gs-stat-card,
.gs-panel-root .gs-panel-card,
.gs-panel-root .gs-box,
.gs-panel-root .gs-widget,
.gs-panel-root .gs-section,
.gs-panel-root .gs-surface,
.gs-panel-root .gs-top-kpi,
.gs-panel-root .gs-top-search input,
.gs-panel-root .gs-order-card,
.gs-panel-root .gs-no-box,
.gs-panel-root .gs-faq-item,
.gs-panel-root .gs-empty,
.gs-panel-root .gs-gateway-card,
.gs-panel-root .gs-table-wrap,
.gs-panel-root details,
.gs-panel-root .gs-method-btn,
.gs-panel-root input[type="text"],
.gs-panel-root input[type="number"],
.gs-panel-root input[type="search"],
.gs-panel-root input[type="email"],
.gs-panel-root input[type="password"],
.gs-panel-root textarea,
.gs-panel-root select{
background: var(--gs-card-tint) !important;
color: var(--gs-text) !important;
}
.gs-panel-root .gs-muted,
.gs-panel-root .description,
.gs-panel-root small,
.gs-panel-root .gs-card p,
.gs-panel-root .gs-page p,
.gs-panel-root .gs-order-card p{
color: #5b6479 !important;
}
.gs-panel-root .gs-btn,
.gs-panel-root .gs-btn.primary,
.gs-panel-root .gs-btn.gs-btn-primary,
.gs-panel-root a.gs-btn,
.gs-panel-root button.gs-btn,
.gs-panel-root input[type="submit"],
.gs-panel-root button[type="submit"]{
background: var(--gs-btn-grad) !important;
border-color: rgba(68,88,220,.32) !important;
color: #fff !important;
box-shadow: 0 14px 28px rgba(68,88,220,.18) !important;
}
.gs-panel-root .gs-btn.secondary,
.gs-panel-root .gs-btn.gs-btn-ghost,
.gs-panel-root a.gs-btn.secondary,
.gs-panel-root a.gs-btn.gs-btn-ghost,
.gs-panel-root .button.secondary{
background: var(--gs-btn-soft) !important;
border-color: rgba(106,122,167,.20) !important;
color: #12346b !important;
box-shadow: 0 10px 20px rgba(15,23,42,.05) !important;
}
.gs-panel-root .gs-menu-item.active,
.gs-panel-root .gs-menu-item.active:hover{
background: var(--gs-btn-soft) !important;
color: #12346b !important;
border-color: rgba(68,88,220,.20) !important;
box-shadow: 0 12px 28px rgba(68,88,220,.10) !important;
transform: none !important;
}
.gs-panel-root .gs-menu-item.active .gs-menu-txt,
.gs-panel-root .gs-menu-item.active .gs-menu-ico{color:#12346b !important;}
.gs-panel-root .gs-brand-name,
.gs-panel-root .gs-brand-text small,
.gs-panel-root .gs-brand-text .gs-brand-sub,
.gs-panel-root .gs-brand-text .gs-user,
.gs-panel-root .gs-brand-text .gs-domain{display:none !important;}
.gs-panel-root .gs-brand-logo,
.gs-panel-root .gs-brand-fallback{
width:52px !important;
height:52px !important;
border-radius:18px !important;
background: var(--gs-btn-soft) !important;
border:1px solid rgba(68,88,220,.16) !important;
color:#12346b !important;
font-weight:800 !important;
}
.gs-panel-root .gs-icon-btn,
.gs-panel-root .gs-top-dd > .gs-icon-btn,
.gs-panel-root #gsBtnLogout{
background: var(--gs-btn-soft) !important;
border-color: rgba(106,122,167,.18) !important;
color: #12346b !important;
}
.gs-panel-root #gsBtnLogout{
background: linear-gradient(135deg,#fff1f0 0%,#ffe7e5 100%) !important;
color:#b42318 !important;
border-color: rgba(180,35,24,.18) !important;
}
.gs-panel-root .gs-ic-label{
font-size: 11px !important;
line-height: 1.05 !important;
white-space: nowrap !important;
}
.gs-panel-root .has-label{min-width:58px !important;}
.gs-panel-root .gs-no-net,
.gs-panel-root .gs-network-btn,
.gs-panel-root .gs-no-tab,
.gs-panel-root .gs-method-btn{
background: var(--gs-btn-soft) !important;
color: #12346b !important;
border-color: rgba(68,88,220,.18) !important;
}
.gs-panel-root .gs-no-net.is-active,
.gs-panel-root .gs-network-btn.is-active,
.gs-panel-root .gs-no-tab.is-active,
.gs-panel-root #gsTabNew.is-active,
.gs-panel-root #gsTabFav.is-active,
.gs-panel-root .gs-method-btn.active{
background: var(--gs-btn-grad) !important;
color: #fff !important;
}
.gs-panel-root .gs-badge,
.gs-panel-root .gs-badge-pill,
.gs-panel-root .gs-chip,
.gs-panel-root .gs-pill{
background: var(--gs-chip-bg) !important;
color:#163772 !important;
border-color: rgba(106,122,167,.18) !important;
}
.gs-panel-root .gs-page .gs-card > h2,
.gs-panel-root .gs-page .gs-card > h3,
.gs-panel-root .gs-page h1,
.gs-panel-root .gs-page h2,
.gs-panel-root .gs-page h3,
.gs-panel-root .gs-page h4,
.gs-panel-root .gs-topbar-title,
.gs-panel-root .gs-kpi-val,
.gs-panel-root .gs-stat-value,
.gs-panel-root .gs-metric-value{color:#12346b !important;}
.gs-panel-root .gs-topbar,
.gs-panel-root .gs-sidebar,
.gs-panel-root .gs-page{
backdrop-filter: blur(10px);
}
.gs-panel-root .gs-faq-footer{display:none !important;}