*{box-sizing:border-box}body{font-family:Inter,system-ui,Arial,sans-serif;margin:0;background:#0b0f14;color:#e6edf3}
:root{--bg:#0b0f14;--panel:#0d1117;--border:#1f232a;--text:#e6edf3;--muted:#c9d1d9;--primary:#1f6feb;--accent:#238636;--accent2:#388bfd;--danger:#d1242f}
:root[data-theme="light"] body{background:#f6f8fa;color:#24292f}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 22px;background:#0f131a;border-bottom:1px solid #1f232a;position:sticky;top:0}
.topbar a{color:#c9d1d9;margin-right:14px;text-decoration:none}
:root[data-theme="light"] .topbar{background:#fff;border-color:#d0d7de}
.logo{font-weight:800;letter-spacing:.2px}
.logo-img{height:28px;vertical-align:middle;margin-right:8px;border-radius:6px}
.container{max-width:1080px;margin:28px auto;padding:0 20px}
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;margin:24px 0;padding:24px;border:1px solid #1f232a;border-radius:16px;background:linear-gradient(180deg,#0d1117,#0b0f14)}
.hero{background-repeat:no-repeat}
.hero h1{font-size:2rem;margin:0}
.hero p{opacity:.85}
.hero .cta{display:flex;gap:12px;margin-top:16px}
.card{border:1px solid #1f232a;border-radius:16px;padding:16px;background:#0d1117}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.gateway-card{border:1px solid #1f232a;border-radius:16px;padding:16px;background:#0d1117;margin-bottom:12px}
.gateway-header{display:flex;align-items:center;gap:10px;font-weight:700}
.gateway-logo svg{display:block}
.secret-row{display:flex;gap:8px;align-items:center}
.secret-row .reveal{min-width:44px}
.switch{display:inline-flex;align-items:center;gap:8px}
.switch .slider{display:inline-block;width:40px;height:22px;border-radius:22px;background:#30363d;position:relative}
.switch input{appearance:none;width:0;height:0}
.switch input:checked + .slider{background:#238636}
.switch .slider::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#0d1117;transition:left .2s ease}
.switch input:checked + .slider::after{left:21px}
form{display:grid;gap:10px;max-width:560px}
input,textarea,select,button{padding:12px;border-radius:10px;border:1px solid #30363d;background:#0d1117;color:#e6edf3}
button{background:#238636;border-color:#2ea043;cursor:pointer;font-weight:600}
button.secondary{background:#1f6feb;border-color:#388bfd}
button[disabled]{background:#30363d;border-color:#30363d;cursor:not-allowed}
table{width:100%;border-collapse:collapse;margin-top:12px}
th,td{border:1px solid #1f232a;padding:10px}
.flash{background:#1f6feb;color:#fff;padding:10px;border-radius:10px;margin-bottom:14px}
:root[data-theme="light"] .flash{background:#0969da}
.cover{max-width:100%;border-radius:12px}
.gallery{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.thumb{height:90px;border-radius:10px}
input:invalid{border-color:#d1242f}
:focus-visible{outline:2px solid #1f6feb;outline-offset:2px}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px);z-index:9999}
.overlay.hidden{display:none}
.spinner{width:44px;height:44px;border:4px solid #30363d;border-top-color:#1f6feb;border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.toast-container{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);display:grid;gap:10px;z-index:9999}
.toast{background:#161b22;color:#e6edf3;border:1px solid #30363d;border-radius:10px;padding:10px 14px;opacity:0;transform:translateY(10px);transition:opacity .2s ease,transform .2s ease}
.toast.visible{opacity:1;transform:translateY(0)}
.toast.success{border-color:#2ea043}
.toast.error{border-color:#d1242f}
button:hover{filter:brightness(1.05)}
button:active{transform:scale(.98)}
@media (max-width:768px){.hero{grid-template-columns:1fr}.container{padding:0 14px}.thumb{height:72px}}
@media (min-width:1024px){.hero h1{font-size:2.4rem}.container{max-width:1200px}}
@media (max-width:320px){.topbar{padding:10px}.logo{font-size:1rem}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

h1,h2,h3{color:var(--text)}
h2{font-size:1.4rem;margin:0 0 16px 0;padding-bottom:8px;border-bottom:1px solid var(--border)}

a{color:var(--primary);text-decoration:none}
a:visited{color:var(--primary)}
a:hover{filter:brightness(1.2)}

.topbar nav a{padding:8px 10px;border-radius:8px}
.topbar nav a:hover{background:#11161d}

.container ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.container ul li a{display:block;border:1px solid var(--border);border-radius:12px;background:var(--panel);color:var(--text);padding:12px 14px;box-shadow:0 1px 0 #0a0e13;transition:transform .15s ease,border-color .15s ease}
.container ul li a:hover{border-color:#388bfd;transform:translateY(-2px)}

table{background:var(--panel);border:1px solid var(--border);border-radius:12px;overflow:hidden}
thead th{background:#11161d}
tbody tr:nth-child(odd){background:#0e1319}
tbody tr:hover{background:#141a22}

label{color:var(--muted);font-weight:600}
input,textarea,select{box-shadow:inset 0 1px 2px #0a0e13}
input::placeholder,textarea::placeholder{color:#8b949e}

.btn{display:inline-block;padding:10px 14px;border-radius:10px;background:var(--accent);border:1px solid #2ea043;color:#fff}
.btn.secondary{background:var(--primary);border-color:#388bfd}

.card-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.card-item{border:1px solid var(--border);border-radius:16px;background:var(--panel);padding:16px;position:relative;overflow:hidden;box-shadow:0 6px 24px rgba(0,0,0,.25);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.card-item:hover{transform:translateY(-4px);border-color:var(--primary);box-shadow:0 12px 32px rgba(31,111,235,.25)}
.card-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:#fff;margin-bottom:10px}
.card-title{font-weight:700;margin:0 0 6px 0;color:var(--text)}
.card-desc{color:#8b949e;margin:0}
.card-item.products .card-icon{background:#2ea043}
.card-item.categories .card-icon{background:#c69026}
.card-item.payments .card-icon{background:#635bff}
.card-item.branding .card-icon{background:#ff7b72}
.card-item.users .card-icon{background:#1f6feb}
.card-item.tickets .card-icon{background:#d1242f}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:0 6px 24px rgba(0,0,0,.25)}