@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,400,0,0');

:root {
    --ink:#17252a;
    --muted:#657277;
    --coral:#ff563f;
    --coral-dark:#db3b2c;
    --peach:#fff0eb;
    --line:#dfe5e4;
    --white:#fff;
    --cream:#f8faf8;
}
* {
    box-sizing:border-box
}
.material-symbols-outlined {
    font-size:30px;
    line-height:1;
    vertical-align:middle
}
html {
    scroll-behavior:smooth
}
body {
    margin:0;
    background:var(--cream);
    color:var(--ink);
    font-family:'DM Sans',sans-serif
}
a {
    color:inherit;
    text-decoration:none
}
.site-header {
    height:76px;
    padding:0 6vw;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:var(--white);
    border-bottom:1px solid var(--line)
}
.brand {
    display:flex;
    align-items:center;
    gap:11px;
    font-family:'Space Grotesk';
    font-weight:700;
    font-size:20px;
    letter-spacing:0
}
.brand-logo {
    display:block;
    width:auto;
    max-width:190px;
    height:38px;
    object-fit:contain
}
.brand-mark {
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    border-radius:11px;
    background:var(--coral);
    color:#fff;
    font-size:18px
}
.site-header nav {
    display:flex;
    gap:30px;
    align-items:center;
    font-size:14px;
    color:var(--muted)
}
.nav-button,.button {
    padding:12px 18px;
    border-radius:5px;
    font-weight:700;
    font-size:13px
}
.nav-button {
    color:var(--coral);
    border:1px solid var(--coral)
}
.hero {
    max-width:1240px;
    margin:0 auto;
    padding:96px 6vw 90px;
    display:grid;
    grid-template-columns:1.35fr .65fr;
    gap:10%;
    align-items:center
}
.eyebrow {
    font-size:11px;
    letter-spacing:1.7px;
    font-weight:700;
    color:var(--coral);
    margin:0 0 18px
}
.hero h1 {
    max-width:720px;
    margin:0;
    font:600 clamp(42px,5.5vw,78px)/1.02 'Space Grotesk';
    letter-spacing:0
}
.lead {
    max-width:580px;
    color:var(--muted);
    font-size:18px;
    line-height:1.7;
    margin:28px 0
}
.hero-actions {
    display:flex;
    gap:12px
}
.button.primary {
    background:var(--coral);
    color:#fff
}
.button.secondary {
    border:1px solid var(--ink)
}
.hero-panel {
    background:var(--ink);
    color:#fff;
    padding:38px;
    min-height:270px;
    display:flex;
    flex-direction:column;
    justify-content:center
}
.panel-label,.hero-panel small {
    font-size:11px;
    letter-spacing:1.4px;
    color:#aebabc
}
.hero-panel strong {
    font:600 80px/1 'Space Grotesk';
    color:#ff907f;
    margin:18px 0 2px
}
.panel-line {
    display:flex;
    gap:7px;
    margin:25px 0
}
.panel-line i {
    height:7px;
    flex:1;
    background:var(--coral)
}
.panel-line i:nth-child(2) {
    background:#ff8d76
}
.panel-line i:nth-child(3) {
    background:#ffc0b5
}
.panel-line i:nth-child(4) {
    background:#9daaad
}
.panel-line i:nth-child(5) {
    background:#53656a
}
.section {
    background:#fff;
    padding:100px 6vw
}
.section-heading {
    max-width:580px
}
.section h2,.split-section h2,.contact-section h2 {
    font:600 43px/1.1 'Space Grotesk';
    margin:0 0 18px;
    letter-spacing:0
}
.section-heading>p:last-child,.contact-section p:last-child {
    color:var(--muted);
    line-height:1.6
}
.service-grid {
    max-width:1240px;
    margin:52px auto 0;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line)
}
.service-card {
    background:#fff;
    min-height:220px;
    padding:27px
}
.service-icon {
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    background:var(--peach);
    color:var(--coral);
    font-size:12px;
    font-weight:700
}
.service-icon .material-symbols-outlined {
    font-size:25px
}
.service-card h3 {
    font:600 20px 'Space Grotesk';
    margin:25px 0 10px
}
.service-card p {
    font-size:13px;
    color:var(--muted);
    line-height:1.5;
    min-height:40px
}
.service-card a,.quick-panel a {
    color:var(--coral);
    font-size:13px;
    font-weight:700
}
.split-section {
    max-width:1240px;
    margin:0 auto;
    padding:110px 6vw;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14%
}
.faq-section { padding: 100px 6vw; background: var(--peach); }
.faq-section .section-heading { margin: 0 auto 38px; }
.faq-list { max-width: 900px; margin: 0 auto; border-top: 1px solid #f2b6ab; }
.faq-item { border-bottom: 1px solid #f2b6ab; }
.faq-item summary { display: flex; justify-content: space-between; gap: 20px; padding: 20px 0; cursor: pointer; list-style: none; font: 600 18px 'Space Grotesk'; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary span { color: var(--coral); font-size: 25px; font-weight: 400; }
.faq-item[open] summary span { transform: rotate(45deg); }
.faq-item p { max-width: 760px; margin: -4px 0 22px; color: var(--muted); line-height: 1.7; }
.stories-section { padding: 100px 6vw; background: var(--white); }
.stories-section .section-heading { margin-bottom: 38px; }
.stories-grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.story-card { min-height: 260px; padding: 30px; display: flex; flex-direction: column; background: var(--ink); color: var(--white); }
.quote-mark { color: #ff907f; font: 600 55px/0.7 'Space Grotesk'; }
.story-card > p { flex: 1; margin: 24px 0; color: #d9e2e1; line-height: 1.7; }
.story-card footer { display: block; padding: 18px 0 0; border-top: 1px solid #405054; color: #aebabc; }
.story-card footer strong, .story-card footer span { display: block; }
.story-card footer strong { margin-bottom: 4px; color: var(--white); font: 600 15px 'Space Grotesk'; }
.story-card footer span { font-size: 12px; }
.testimonial-editor { display: grid; grid-template-columns: 1fr 1fr 1.6fr 1.2fr .7fr auto; gap: 12px; align-items: end; padding: 18px 0; border-top: 1px solid var(--line); }
.testimonial-editor label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.testimonial-editor input, .testimonial-editor textarea, .testimonial-editor select { width: 100%; padding: 10px; border: 1px solid var(--line); background: var(--cream); font: 13px 'DM Sans', sans-serif; }
.testimonial-editor textarea { resize: vertical; }
.testimonial-editor button { border: 0; cursor: pointer; white-space: nowrap; }
.careers-section { padding: 100px 6vw; background: var(--peach); }
.career-list { max-width: 1000px; margin: 38px auto 0; }
.career-card { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; border-top: 1px solid #f2b6ab; }
.career-card h3 { margin: 0 0 8px; font: 600 20px 'Space Grotesk'; }
.career-card p, .career-card span { color: var(--muted); font-size: 13px; line-height: 1.6; }
.career-card p { margin: 0 0 6px; }
.career-card span { display: block; max-width: 650px; }
.career-editor { display: grid; grid-template-columns: 1fr 1fr 1fr .8fr 1fr 1.5fr .7fr auto; gap: 10px; align-items: end; padding: 18px 0; border-top: 1px solid var(--line); }
.career-editor label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.career-editor input, .career-editor textarea, .career-editor select { width: 100%; padding: 10px; border: 1px solid var(--line); background: var(--cream); font: 13px 'DM Sans', sans-serif; }
.career-editor textarea { resize: vertical; }
.career-editor button { border: 0; cursor: pointer; white-space: nowrap; }
.feature-list p {
    display:flex;
    gap:20px;
    border-top:1px solid var(--line);
    padding:20px 0;
    margin:0;
    color:var(--muted);
    line-height:1.5
}
.logout-link {
    color: var(--coral);
    font-size: 12px;
    font-weight: 700;
}
.login-body {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background: #edf1ef;
}
.login-shell {
    width: min(100%, 960px);
    min-height: 590px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    background: var(--white);
    box-shadow: 0 22px 60px rgba(23, 37, 42, .15);
}
.login-visual {
    padding: 44px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--coral);
    color: var(--white);
}
.login-brand { display: flex; align-items: center; gap: 11px; font: 700 20px 'Space Grotesk'; }
.login-brand .brand-logo { max-width: 220px; height: 44px; }
.login-brand .brand-mark { background: var(--white); color: var(--coral); }
.login-visual-copy { max-width: 350px; }
.login-visual-copy .eyebrow { color: #ffd8d1; }
.login-visual-copy h1 { margin: 0 0 18px; font: 600 52px/1.03 'Space Grotesk'; }
.login-visual-copy p:last-child { color: #ffe4df; line-height: 1.7; }
.login-metrics { display: flex; gap: 42px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .35); color: #ffe4df; font-size: 12px; }
.login-metrics strong { display: block; color: var(--white); font: 600 24px 'Space Grotesk'; }
.login-card { padding: 86px 64px; background: var(--white); }
.login-card h2 { margin: 0 0 12px; font: 600 42px 'Space Grotesk'; }
.login-card .form-message { margin-bottom: 18px; }
.login-card .button { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.login-card .button span { font-size: 18px; }
.login-card .brand { margin-bottom: 65px; }
.login-card h1 { margin: 0 0 12px; font: 600 42px 'Space Grotesk'; }
.login-copy { margin: 0 0 28px; color: var(--muted); line-height: 1.6; }
.login-card form { display: grid; gap: 16px; }
.login-card label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.login-card input { padding: 12px; border: 1px solid var(--line); font: 14px 'DM Sans', sans-serif; }
.login-card button { border: 0; cursor: pointer; }
.password-field { position: relative; display: block; width: 100%; }
.password-field input { width: 100%; min-width: 0; padding-right: 44px !important; }
.password-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    display: grid;
    width: 32px;
    height: 32px;
    padding: 6px;
    place-items: center;
    transform: translateY(-50%);
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}
.password-toggle:hover { color: var(--ink); background: rgba(23, 37, 42, .06); }
.password-toggle:focus-visible { outline: 2px solid var(--coral); outline-offset: 1px; }
.password-toggle svg { display: block; width: 20px; height: 20px; }
.back-link { display: block; margin-top: 25px; color: var(--coral); font-size: 13px; font-weight: 700; }
.feature-list b {
    color:var(--coral);
    font-family:'Space Grotesk'
}
.feature-list strong {
    display:block;
    color:var(--ink);
    margin-bottom:5px
}
.contact-section {
    padding:75px 10%;
    background:var(--coral);
    color:#fff;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px
}
.contact-section .eyebrow {
    color:#ffd8d1
}
.contact-section h2 {
    max-width:600px
}
.contact-section p:last-child {
    color:#ffe4df
}
.button.light {
    background:#fff;
    color:var(--coral);
    white-space:nowrap
}
footer {
    padding:28px 6vw;
    display:flex;
    justify-content:space-between;
    font-size:12px;
    color:var(--muted)
}
.notice {
    padding:14px 6vw;
    font-size:13px
}
.notice.error {
    background:#fff0ee;
    color:#a42d20
}
.notice.success { background:#edf6ed; color:#367242; }
.status-form { display:flex; align-items:center; gap:5px; }
.status-form select { padding:6px; border:1px solid var(--line); background:var(--white); font:11px 'DM Sans', sans-serif; }
.status-form button { width:30px; height:30px; padding:0; display:grid; place-items:center; border:0; background:var(--coral); color:var(--white); cursor:pointer; }
.status-form button .material-symbols-outlined { font-size:16px; }
.contact-form {
    min-width: min(100%, 520px);
    padding: 26px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    background: #fff;
    color: var(--ink);
}
.contact-form label {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}
.contact-form input,
.contact-form textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 11px;
    color: var(--ink);
    background: var(--cream);
    font: 14px 'DM Sans', sans-serif;
}
.contact-form textarea { resize: vertical; }
.contact-form .full-width { grid-column: 1 / -1; }
.contact-form .button { border: 0; cursor: pointer; justify-self: start; }
.form-message { grid-column: 1 / -1; padding: 10px; font-size: 12px; }
.form-message.error { background: #fff0ee; color: #a42d20; }
.form-message.success { background: #edf6ed; color: #367242; }
.admin-body {
    background:#f4f6f5
}
.admin-header {
    min-height:72px;
    height:auto;
    padding:10px 24px;
    background:#fff;
    border-bottom:1px solid var(--line);
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:center;
    flex-wrap:wrap;
    position:sticky;
    top:0;
    z-index:100;
    box-shadow:0 2px 8px rgba(23,37,42,.08)
}
.admin-header .brand { flex:0 0 auto; }
.admin-header .transaction-search {
    flex:1 1 210px;
    max-width:300px;
    margin-left:auto;
}
.admin-header .wallet-strip { flex:0 1 auto; }
.admin-header .wallet-strip span { padding:8px 9px; }
.admin-header .logout-link {
    display:flex;
    align-items:center;
    gap:4px;
    white-space:nowrap;
}
.admin-header .logout-link .material-symbols-outlined { font-size:18px; }
.transaction-mode-badge {
    padding:7px 10px;
    border:1px solid #e4b84b;
    border-radius:5px;
    background:#fff8df;
    color:#765400;
    font-size:10px;
    font-weight:700;
    letter-spacing:.45px;
    white-space:nowrap;
}
.admin-header-error {
    flex-basis:100%;
    color:#a42d20;
    font-size:11px;
    text-align:right;
}
.admin-user {
    font-size:11px;
    letter-spacing:1.5px;
    color:var(--muted)
}
.admin-layout {
    display:grid;
    grid-template-columns:230px 1fr;
    min-height:calc(100vh - 72px)
}
.admin-sidebar {
    background:var(--ink);
    padding:42px 25px;
    color:#aebabc;
    overflow-y:auto;
    position:sticky;
    top:72px;
    height:calc(100vh - 72px);
    align-self:start;
    scrollbar-width:thin;
    scrollbar-color:#53656a var(--ink)
}
.admin-sidebar .eyebrow {
    color:#ff907f;
    font-size:10px
}
.admin-sidebar .sidebar-group { margin-top: 24px; }
.admin-sidebar a {
    display:block;
    padding:13px 12px;
    margin:4px 0;
    font-size:14px;
    border-left:2px solid transparent
}
.admin-sidebar a {
    display:flex;
    align-items:center;
    gap:10px
}
.admin-sidebar a .material-symbols-outlined {
    font-size:19px
}
.admin-sidebar a.active,.admin-sidebar a:hover {
    background:#26363a;
    color:#fff;
    border-left-color:var(--coral)
}
.admin-main {
    padding:55px 5vw
}
.admin-title {
    display:flex;
    justify-content:space-between;
    align-items:end;
    margin-bottom:38px
}
.admin-title h1 {
    font:600 38px 'Space Grotesk';
    margin:0
}
.stat-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px
}
.stat-grid article,.table-panel,.quick-panel {
    background:#fff;
    border:1px solid var(--line);
    padding:25px
}
.stat-grid span {
    display:block;
    font-size:10px;
    letter-spacing:1.3px;
    color:var(--muted);
    font-weight:700
}
.stat-grid strong {
    display:block;
    font:600 40px 'Space Grotesk';
    margin:15px 0 6px
}
.stat-grid small,.muted {
    font-size:12px;
    color:var(--muted)
}
.admin-content {
    display:grid;
    grid-template-columns:1.7fr .7fr;
    gap:14px;
    margin-top:25px
}
.panel-heading {
    display:flex;
    justify-content:space-between;
    align-items:start
}
.panel-heading h2,.quick-panel h2 {
    font:600 22px 'Space Grotesk';
    margin:0 0 24px
}
table {
    border-collapse:collapse;
    width:100%;
    font-size:13px
}
th {
    text-align:left;
    color:var(--muted);
    font-size:10px;
    letter-spacing:1px;
    padding:14px 8px;
    border-bottom:1px solid var(--line)
}
td {
    padding:15px 8px;
    border-bottom:1px solid #edf0ef
}
.status {
    padding:5px 8px;
    background:#edf6ed;
    color:#367242;
    font-size:11px;
    text-transform:capitalize
}
.status.in_progress {
    background:#fff5df;
    color:#9a6b11
}
.empty-state {
    border-top:1px solid var(--line);
    padding:35px 0;
    color:var(--muted);
    font-size:13px
}
.responsive-table { overflow-x: auto; }
.responsive-table table { min-width: 820px; }
.create-agent-panel { margin-bottom: 24px; }
.agent-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.agent-form label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.agent-form input { width: 100%; padding: 11px; border: 1px solid var(--line); background: var(--cream); font: 14px 'DM Sans', sans-serif; }
.agent-form button { align-self: end; border: 0; cursor: pointer; }
.table-subtext { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; }
.status.verified, .status.active, .status.success { background: #edf6ed; color: #367242; }
.status.under_review, .status.submitted, .status.pending { background: #fff5df; color: #9a6b11; }
.status.rejected, .status.suspended, .status.blocked { background: #fff0ee; color: #a42d20; }
.product-settings { margin-bottom: 24px; }
.child-services { margin-bottom: 24px; padding: 24px; background: var(--white); border: 1px solid var(--line); }
.child-service-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.child-service-card { min-height: 145px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; border: 1px solid #ff806f; border-radius: 14px; background: var(--white); box-shadow: 0 2px 3px rgba(23,37,42,.08); }
.child-service-card:hover { background: var(--peach); border-color: var(--coral); }
.child-service-icon { color: var(--coral); }
.child-service-icon .material-symbols-outlined { font-size: 62px; }
.child-service-card strong { font: 600 14px 'Space Grotesk'; }
.service-back { margin-bottom: 25px; }
.service-title { text-align: center; margin: 20px 0 30px; }
.service-title h1 { margin: 0; font: 600 28px 'Space Grotesk'; }
.action-grid { max-width: 760px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.action-card { min-height: 145px; padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border: 1px solid #ff806f; border-radius: 14px; background: var(--white); box-shadow: 0 2px 3px rgba(23,37,42,.08); text-align: center; }
.action-card:hover { background: var(--peach); border-color: var(--coral); }
.action-icon { color: var(--coral); }
.action-icon .material-symbols-outlined { font-size: 52px; }
.action-card strong { font: 600 14px 'Space Grotesk'; }
.action-card small { color: var(--muted); font-size: 11px; }
.otp-panel { max-width: 700px; margin: 10px auto; padding: 28px; border: 1px solid var(--line); background: var(--white); }
.otp-heading { display: flex; align-items: center; gap: 18px; margin-bottom: 26px; }
.otp-heading h1 { margin: 0 0 8px; font: 600 28px 'Space Grotesk'; }
.otp-heading p:last-child { margin: 0; color: var(--muted); line-height: 1.5; }
.otp-heading .action-icon .material-symbols-outlined { font-size: 52px; }
.otp-form { display: grid; gap: 16px; }
.otp-form label { display: grid; gap: 7px; color: var(--ink); font-size: 13px; font-weight: 700; }
.otp-form input { padding: 13px; border: 1px solid var(--line); font: 16px 'DM Sans', sans-serif; }
.otp-form button { justify-self: center; border: 0; cursor: pointer; }
.aeps2-panel { max-width: 780px; margin: 0 auto; padding: 24px; border: 1px solid var(--line); background: var(--white); }
.aeps2-heading h1 { margin: 0 0 24px; font: 600 20px 'Space Grotesk'; }
.aeps2-form { display: grid; gap: 14px; }
.aeps2-form > label { display: grid; gap: 7px; color: var(--ink); font-size: 13px; font-weight: 700; }
.aeps2-form input[type='text'], .aeps2-form input[type='number'], .aeps2-form select { padding: 12px; border: 1px solid var(--line); background: var(--cream); font: 14px 'DM Sans', sans-serif; }
.aeps2-form fieldset { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 18px; border: 1px solid var(--line); }
.aeps2-form legend { grid-column: 1 / -1; color: var(--coral); font-weight: 700; }
.device-option, .csp-option, .consent-option { display: flex !important; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.csp-option { grid-column: 1 / -1; margin-top: 10px; }
.consent-option { line-height: 1.5; }
.aeps2-form button { justify-self: center; border: 0; cursor: pointer; }
.product-form { display: grid; grid-template-columns: 1fr 1.5fr; gap: 14px; align-items: end; }
.product-form label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.product-form input[type='text'], .product-form textarea { width: 100%; padding: 11px; border: 1px solid var(--line); background: var(--cream); font: 14px 'DM Sans', sans-serif; }
.product-form textarea { resize: vertical; }
.product-form .check-label { display: flex; align-items: center; gap: 8px; }
.product-form .check-label input { accent-color: var(--coral); }
.product-form button { border: 0; cursor: pointer; }
.content-panel { margin-bottom: 24px; }
.upload-form { display:flex; align-items:end; gap:14px; }
.upload-form label { display:grid; gap:6px; color:var(--muted); font-size:12px; font-weight:700; }
.upload-form input[type='file'] { padding:9px; border:1px solid var(--line); background:var(--cream); font:13px 'DM Sans', sans-serif; }
.upload-form button { border:0; cursor:pointer; }
.setting-row { display: grid; grid-template-columns: 1fr 34px; gap: 10px; align-items: end; padding: 14px 0; border-top: 1px solid var(--line); }
.setting-row label, .page-editor label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.setting-row input, .page-editor input, .page-editor textarea, .page-editor select { width: 100%; padding: 10px; border: 1px solid var(--line); background: var(--cream); font: 14px 'DM Sans', sans-serif; }
.icon-button { width: 34px; height: 34px; display: grid; place-items: center; border: 0; background: var(--coral); color: var(--white); cursor: pointer; }
.icon-button .material-symbols-outlined { font-size: 17px; }
.page-editor { display: grid; gap: 14px; padding: 22px 0; border-top: 1px solid var(--line); }
.page-editor-heading, .page-editor-actions { display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.page-editor-actions label { width: 180px; }
.page-editor-actions button { border: 0; cursor: pointer; }
.faq-editor { display: grid; grid-template-columns: 1.3fr 1.5fr .7fr .55fr auto; gap: 12px; align-items: end; padding: 18px 0; border-top: 1px solid var(--line); }
.faq-editor label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.faq-editor input, .faq-editor textarea, .faq-editor select { width: 100%; padding: 10px; border: 1px solid var(--line); background: var(--cream); font: 13px 'DM Sans', sans-serif; }
.faq-editor textarea { resize: vertical; }
.faq-editor button { border: 0; cursor: pointer; white-space: nowrap; }
.faq-existing { margin-top: 0; }
.quick-panel a {
    display:flex;
    justify-content:space-between;
    padding:15px 0;
    border-top:1px solid var(--line)
}
.portal-header {
    gap: 14px;
    padding: 0 24px;
    position:sticky;
    top:0
}
.portal-header .brand { flex-shrink: 0; }
.transaction-search {
    display: flex;
    flex: 1;
    max-width: 390px;
    margin-left: auto;
}
.transaction-search input {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 4px 0 0 4px;
    padding: 11px 13px;
    font: 13px 'DM Sans', sans-serif;
}
.transaction-search button {
    border: 0;
    border-radius: 0 4px 4px 0;
    padding: 0 14px;
    background: var(--coral);
    color: var(--white);
    font-weight: 700;
}
.wallet-strip {
    display: flex;
    border: 1px solid #ffb1a6;
    color: var(--coral);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
}
.wallet-strip span { padding: 10px 12px; border-right: 1px solid #ffb1a6; white-space: nowrap; }
.wallet-strip span:last-child { border-right: 0; }
.wallet-strip b { margin-left: 4px; }
.product-workspace { margin-top: 34px; }
.workspace-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 20px; }
.workspace-heading h2 { margin: 0; font: 600 28px 'Space Grotesk'; }
.portal-product-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.portal-product { min-height: 154px; padding: 24px 12px 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border: 1px solid #ff806f; border-radius: 15px; background: var(--white); box-shadow: 0 2px 3px rgba(23, 37, 42, .08); text-align: center; }
.portal-product:hover { border-color: var(--coral); background: var(--peach); transform: translateY(-2px); }
.portal-icon { width: 48px; height: 48px; display: grid; place-items: center; color: var(--coral); font-weight: 700; font-size: 13px; }
.portal-product strong { font: 600 14px 'Space Grotesk'; }
.portal-product small { color: var(--muted); font-size: 11px; }
.search-results { margin-bottom: 24px; }
.management-panel { margin-bottom: 24px; }
.management-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: end; }
.management-form label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.management-form input, .management-form select { width: 100%; min-width: 0; padding: 11px; border: 1px solid var(--line); background: var(--cream); color: var(--ink); font: 14px 'DM Sans', sans-serif; }
.management-form button { justify-self: start; border: 0; cursor: pointer; }
.management-wide { grid-column: span 2; }
.inline-management-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.inline-management-form select { min-width: 125px; padding: 8px; border: 1px solid var(--line); background: var(--cream); font: 12px 'DM Sans', sans-serif; }
.inline-management-form .button, .table-panel form .button.secondary { border: 0; cursor: pointer; }
.report-filters { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr) auto auto; gap: 10px; align-items: end; margin-bottom: 22px; }
.report-filters label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 700; }
.report-filters input, .report-filters select { min-width: 0; padding: 10px; border: 1px solid var(--line); background: var(--cream); font: 13px 'DM Sans', sans-serif; }
.report-filters button { border: 0; cursor: pointer; white-space: nowrap; }
.token-panel { margin-bottom: 24px; border-color: #ffb1a6; }
.token-panel code, .api-example { display: block; overflow-wrap: anywhere; padding: 16px; background: #17252a; color: #fff; font: 13px/1.6 Consolas, monospace; }
.operation-launch { margin: 24px 0; }
.operation-panel { max-width: 840px; margin: 0 auto; }
.operation-panel h1 { margin: 0 0 20px; font: 600 32px 'Space Grotesk'; }
.provider-warning { margin: 14px 0; }
.wallet-main { max-width: 1200px; margin: 0 auto; }
.wallet-stat { grid-template-columns: repeat(2, 1fr); margin-bottom: 24px; }
.status.failed, .status.reversed, .status.revoked { background: #fff0ee; color: #a42d20; }
.status.refunded, .status.expired { background: #edf0f4; color: #53656a; }
.integration-intro { margin: -18px 0 24px; color: var(--muted); font-size: 14px; }
.integration-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.integration-card { min-height: 190px; padding: 24px 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border: 1px solid #ff806f; border-radius: 16px; background: var(--white); box-shadow: 0 2px 3px rgba(23,37,42,.08); text-align: center; }
.integration-card:hover { border-color: var(--coral); background: var(--peach); transform: translateY(-2px); }
.integration-card strong { font: 600 16px 'Space Grotesk'; }
.integration-card small, .integration-card-status { color: var(--muted); font-size: 11px; }
.integration-card-status { margin-top: 4px; }
.provider-warning { margin: -16px 0 24px; padding: 14px 18px; background: #fff5df; color: #805b0b; font-size: 13px; line-height: 1.6; }
.provider-connection-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.provider-connection-form > label:not(.provider-enabled) { display: grid; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 700; }
.provider-connection-form input:not([type='checkbox']), .provider-connection-form select { width: 100%; min-width: 0; padding: 11px; border: 1px solid var(--line); background: var(--cream); color: var(--ink); font: 14px 'DM Sans', sans-serif; }
.provider-connection-form .provider-enabled { display: flex; align-items: center; gap: 9px; color: var(--ink); font-size: 13px; font-weight: 600; }
.provider-connection-form .provider-enabled input { accent-color: var(--coral); }
.provider-form-note { grid-column: 1 / -1; margin: 0; padding: 12px; background: var(--cream); color: var(--muted); font-size: 12px; line-height: 1.6; }
.provider-form-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; }
.provider-form-actions .button { border: 0; cursor: pointer; }
.bank-funds-notice { margin: -16px 0 24px; padding: 16px 18px; border-left: 3px solid var(--coral); background: var(--white); color: var(--muted); font-size: 13px; line-height: 1.6; }
.bank-funds-notice strong { color: var(--ink); }
.bank-summary { margin-bottom: 24px; }
.bank-account-status { margin-top: 8px; }
.bank-account-status .button, .bank-entry-action .button { border: 0; cursor: pointer; }
.bank-entry-action { display: grid; grid-template-columns: minmax(160px, 1fr) auto auto; gap: 6px; min-width: 340px; }
.bank-entry-action input { min-width: 0; padding: 8px; border: 1px solid var(--line); background: var(--cream); font: 12px 'DM Sans', sans-serif; }
.payout-provider-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 24px; }
.payout-provider-card { padding: 20px; border: 1px solid var(--line); background: var(--white); }
.payout-provider-card.active { border-color: var(--coral); }
.payout-provider-card h2 { margin: 0 0 8px; font: 600 20px 'Space Grotesk'; }
.payout-provider-card p { min-height: 38px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.payout-provider-card .button { display: inline-block; border: 1px solid var(--line); }
.payout-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.payout-form input[type='password'], .payout-form input[type='email'], .payout-form input[type='tel'], .payout-form input[type='text'], .payout-form input[type='number'], .payout-form select { width: 100%; min-width: 0; padding: 11px; border: 1px solid var(--line); background: var(--cream); color: var(--ink); font: 14px 'DM Sans', sans-serif; }
.payout-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.payout-actions .button { padding: 8px 10px; font-size: 11px; }
.payout-actions form { margin: 0; }
.management-form button:disabled, .payout-actions button:disabled { opacity: .5; cursor: not-allowed; }
@media(max-width:900px) {
    .payout-provider-grid { grid-template-columns: 1fr; }
    .payout-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media(max-width:600px) {
    .payout-form { grid-template-columns: 1fr; }
}
@media(max-width:1100px) {
    .integration-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media(max-width:800px) {
    .integration-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .provider-connection-form { grid-template-columns: 1fr; }
    .provider-form-note, .provider-form-actions { grid-column: auto; }
}
@media(max-width:460px) {
    .integration-grid { grid-template-columns: 1fr; }
}
@media(max-width:800px) {
    .site-header {
    padding:0 20px
}
.site-header nav a:not(.nav-button) {
    display:none
}
.hero {
    padding:65px 20px;
    display:block
}
.hero-panel {
    margin-top:45px
}
.section {
    padding:70px 20px
}
.service-grid {
    grid-template-columns:repeat(2,1fr)
}
.split-section {
    padding:70px 20px;
    display:block
}
.feature-list {
    margin-top:45px
}
.contact-section {
    padding:55px 20px;
    display:block
}
.contact-form {
    min-width: 0;
    margin-top: 25px;
    grid-template-columns: 1fr;
}
.contact-form .full-width,
.form-message {
    grid-column: auto;
}
.contact-section .button {
    display:inline-block;
    margin-top:18px
}
footer {
    padding:25px 20px;
    display:block
}
footer span {
    display:block;
    margin:7px 0
}
.admin-layout {
    grid-template-columns:1fr
}
.admin-sidebar {
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:4px;
    padding:10px 12px;
    position:static;
    height:auto;
    overflow-x:auto;
    white-space:nowrap;
    scrollbar-width:thin
}
.admin-sidebar .eyebrow {
    display:none
}
.admin-sidebar a {
    flex:0 0 auto;
    padding:10px;
    margin:0
}
.admin-main {
    padding:35px 20px
}
.admin-header {
    position:sticky;
    top:0
}
.admin-header { padding:12px 16px; gap:10px; }
.admin-header .brand { margin-right:auto; }
.admin-header .transaction-search { order:5; flex:1 1 100%; max-width:none; margin-left:0; }
.admin-header .wallet-strip { order:6; flex:1 1 100%; overflow-x:auto; }
.admin-header .wallet-strip span { padding:8px; }
.admin-header .admin-user { order:2; }
.admin-header .logout-link { order:3; }
.admin-header-error { order:7; text-align:left; }
    .login-shell { display: block; min-height: auto; }
    .login-visual { min-height: 300px; padding: 30px 24px; }
    .login-visual-copy { margin-top: 58px; }
    .login-visual-copy h1 { font-size: 40px; }
    .login-card { padding: 38px 24px; }
.portal-header { height: auto; min-height: 72px; flex-wrap: wrap; padding: 14px 20px; }
.portal-header .transaction-search { order: 3; flex-basis: 100%; max-width: none; margin-left: 0; }
.wallet-strip { order: 2; overflow: auto; }
.wallet-strip span { padding: 8px; }
.admin-title {
    display:block
}
.admin-title .button {
    display:inline-block;
    margin-top:18px
}
.stat-grid {
    grid-template-columns:repeat(2,1fr)
}
.portal-product-grid { grid-template-columns: repeat(2, 1fr); }
.workspace-heading { align-items: start; }
.agent-form { grid-template-columns: 1fr; }
.product-form { grid-template-columns: 1fr; }
.faq-editor { grid-template-columns: 1fr; }
.testimonial-editor { grid-template-columns: 1fr; }
.career-editor { grid-template-columns: 1fr; }
.management-form { grid-template-columns: 1fr; }
.management-wide { grid-column: auto; }
.report-filters { grid-template-columns: 1fr 1fr; }
.report-filters button { justify-self: stretch; }
.wallet-stat { grid-template-columns: 1fr; }
.reconcile-form { display: grid; grid-template-columns: 1fr 1.2fr 1.2fr auto; gap: 6px; min-width: 600px; }
.reconcile-form input, .reconcile-form select { min-width: 0; padding: 8px; border: 1px solid var(--line); background: var(--cream); font: 11px 'DM Sans', sans-serif; }
.child-service-grid { grid-template-columns: repeat(2, 1fr); }
.action-grid { grid-template-columns: 1fr; max-width: 320px; }
.otp-panel { margin: 0; }
.aeps2-panel { margin: 0 auto; }
.career-card { display: block; }
.career-card .button { display: inline-block; margin-top: 15px; }
.admin-content {
    display:block
}
.quick-panel {
    margin-top:14px
}
.table-panel {
    overflow:auto
}
table {
    min-width:600px
}

}

.sidebar-toggle {
    display:none;
    flex:0 0 40px;
    width:40px;
    height:40px;
    padding:0;
    border:1px solid var(--line);
    border-radius:4px;
    background:var(--white);
    color:var(--ink);
    cursor:pointer;
}
.sidebar-toggle:hover { border-color:var(--coral); color:var(--coral); }
.sidebar-toggle:focus-visible { outline:3px solid rgba(255,86,63,.35); outline-offset:2px; }
.sidebar-toggle .material-symbols-outlined { font-size:22px; }
.product-summary-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; margin:24px 0; }
.product-summary-grid article { padding:18px; background:var(--white); border:1px solid var(--line); }
.product-summary-grid span { display:block; color:var(--muted); font-size:10px; font-weight:700; letter-spacing:1px; }
.product-summary-grid strong { display:block; margin-top:10px; font:600 25px 'Space Grotesk'; }
.product-guidance { margin:0 0 24px; padding:20px 24px; background:var(--white); border-left:3px solid var(--coral); }
.product-guidance h2 { margin:0 0 8px; font:600 20px 'Space Grotesk'; }
.product-guidance p { margin:0; color:var(--muted); font-size:13px; line-height:1.6; }
.service-control-form { display:flex; align-items:center; gap:8px; }
.service-control-form .button { border:0; cursor:pointer; white-space:nowrap; }
.feature-status { display:flex; align-items:center; gap:8px; }
.feature-status .status { white-space:nowrap; }
.status.inactive { background:#fff0ee; color:#a42d20; }
@media(max-width:1024px) {
    .sidebar-toggle { display:grid; place-items:center; order:0; }
    .admin-header .brand { order:1; margin-right:auto; }
    .admin-header .admin-user { order:2; }
    .admin-header .logout-link { order:3; }
    .admin-header .transaction-search { order:4; flex:1 1 250px; max-width:none; margin-left:0; }
    .admin-header .wallet-strip { order:5; max-width:100%; overflow-x:auto; }
    .admin-layout { display:block; min-height:calc(100vh - 72px); }
    .admin-sidebar {
        display:block;
        position:fixed;
        left:0;
        top:var(--admin-header-height,72px);
        z-index:112;
        width:min(300px,85vw);
        height:calc(100dvh - var(--admin-header-height,72px));
        padding:24px 20px;
        overflow-y:auto;
        transform:translateX(-105%);
        visibility:hidden;
        transition:transform .2s ease, visibility .2s ease;
        box-shadow:4px 0 20px rgba(23,37,42,.2);
    }
    .admin-sidebar .eyebrow { display:block; }
    .admin-sidebar a { display:flex; padding:13px 12px; margin:4px 0; }
    body.admin-sidebar-open { overflow:hidden; }
    body.admin-sidebar-open::before { content:""; position:fixed; inset:var(--admin-header-height,72px) 0 0; z-index:111; background:rgba(23,37,42,.45); }
    body.admin-sidebar-open .admin-sidebar { transform:translateX(0); visibility:visible; }
    .product-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:600px) {
    .admin-header { padding:10px 12px; gap:8px; }
    .admin-header .transaction-search { order:4; flex:1 1 100%; }
    .admin-header .wallet-strip { order:5; flex:1 1 100%; }
    .admin-user { max-width:100px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .admin-main { padding:28px 16px; }
    .product-summary-grid { gap:8px; }
    .product-summary-grid article { padding:14px; }
}