:root {--panel-bg: linear-gradient(145deg,#1a2330,#141b24);--panel-border: #253244;--panel-radius:18px;--ok:#2ecc71;--warn:#f39c12;--danger:#ff4d4d;--accent:var(--grad2,#3a7bd5);}

.page-section {display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));align-items:start;}
.page-section .wide {grid-column:span 2;}
@media (max-width:1100px){.page-section .wide{grid-column:span 1;}}
@media (max-width:720px){ .page-section{grid-template-columns:1fr} }

.panel {background:var(--panel-bg);border:1px solid var(--panel-border);padding:1.1rem 1.2rem;border-radius:var(--panel-radius);position:relative;display:flex;flex-direction:column;gap:.75rem;box-shadow:0 4px 12px rgba(0,0,0,.35);}
.panel h2,h3{font-size:1rem;font-weight:600;letter-spacing:.5px;display:flex;align-items:center;gap:.5rem;margin:0;}
.panel .hint{font-size:.7rem;opacity:.6;margin:0;}
.panel .big-stat{font-size:2rem;font-weight:600;}
.panel .big-stat.warn{color:var(--warn);} .panel .big-stat.ok{color:var(--ok);} 
.panel.danger{border-color:#5a1e1e;background:linear-gradient(140deg,#231012,#1a1011);} 

.placeholder{height:140px;border:1px dashed #33465a;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:.75rem;letter-spacing:.5px;opacity:.6;background:repeating-linear-gradient(45deg,#1e2734,#1e2734 10px,#202f42 10px,#202f42 20px);}
.placeholder.tall{height:220px;}

.progress{background:#1f2c3a;border-radius:40px;position:relative;height:10px;overflow:hidden;}
.progress div{position:absolute;inset:0;background:linear-gradient(90deg,#4facfe,#38f9d7);width:0;border-radius:inherit;transition:width .6s;}

.badge{display:inline-block;padding:2px 8px;border-radius:12px;font-size:.6rem;letter-spacing:.5px;background:#2c3e50;color:#fff;}
.badge.ok{background:#1f6f46;} .badge.warn{background:#8a4d10;} .badge.danger{background:#7d1d1d;}

.methods{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem;font-size:.75rem;}
.methods li{display:flex;justify-content:space-between;align-items:center;background:#1f2a36;padding:.6rem .7rem;border-radius:10px;border:1px solid #273646;}

.split-chart{display:flex;flex-direction:column;gap:.5rem;font-size:.75rem;}
.split-chart .slice{padding:.6rem .75rem;border-radius:10px;font-weight:600;}
.split-chart .slice.trader{background:linear-gradient(90deg,#38f9d7,#4facfe);} 
.split-chart .slice.firm{background:linear-gradient(90deg,#47536b,#2c3647);}

.resource p{font-size:.7rem;opacity:.65;margin:.25rem 0 .5rem;}
.resources-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));}

.settings-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));}
.form-group label{display:flex;flex-direction:column;font-size:.65rem;gap:.25rem;letter-spacing:.5px;}
.form-group input,.form-group select{background:#1f2c3a;border:1px solid #2b3d52;color:#fff;padding:.55rem .6rem;border-radius:10px;font-size:.7rem;}
.form-group button{margin-top:.6rem;}
/* Stack form (generic) */
.stack.small label{display:flex;flex-direction:column;gap:.35rem;font-size:.65rem;letter-spacing:.5px;color:#8ea4b9}
.stack.small input,.stack.small select,.stack.small textarea{background:#101823;border:1px solid #233446;color:#dbe2ea;padding:.6rem .7rem;border-radius:10px;font-size:.75rem;font-weight:600}
.stack.small input:focus,.stack.small select:focus,.stack.small textarea:focus{outline:none;border-color:#285274;box-shadow:0 0 0 3px rgba(56,189,248,.12)}

.api-keys{display:flex;flex-direction:column;gap:.5rem;font-size:.7rem;}
.api-keys .key{display:flex;justify-content:space-between;align-items:center;background:#1f2a36;padding:.5rem .6rem;border-radius:8px;border:1px solid #263646;}

.danger p{font-size:.7rem;opacity:.7;margin:0;}
.danger .warn{background:#7d1d1d;}

.flags{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45rem;font-size:.65rem;letter-spacing:.5px;}
.flags li{padding:.45rem .6rem;border-radius:8px;background:#1e2935;border:1px solid #243242;display:flex;justify-content:space-between;align-items:center;}
.flags li.ok{border-color:#1f6f46;} .flags li.warn{border-color:#8a4d10;} .flags li.danger{border-color:#7d1d1d;}
.flags.small li{font-size:.6rem;padding:.35rem .5rem;}

.actions-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45rem;font-size:.65rem;}
.actions-list li{background:#1f2a36;padding:.55rem .6rem;border-radius:9px;border:1px solid #273646;display:flex;justify-content:space-between;align-items:center;gap:.6rem;}
.actions-list.small li{font-size:.6rem;padding:.4rem .5rem;}

.stack{display:flex;flex-direction:column;gap:.5rem;}
.stack.small{gap:.4rem;}

.table-mini{width:100%;border-collapse:collapse;font-size:.65rem;}
.table-mini td,.table-mini th{padding:.4rem .5rem;text-align:left;border-bottom:1px solid #233242;}

.funnel{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem;font-size:.7rem;counter-reset:funnel;}
.funnel li{position:relative;padding:.55rem .7rem .55rem 2.2rem;background:#1f2a36;border:1px solid #273646;border-radius:10px;}
.funnel li:before{counter-increment:funnel;content:counter(funnel);position:absolute;left:.7rem;top:50%;transform:translateY(-50%);width:1.2rem;height:1.2rem;border-radius:50%;background:linear-gradient(135deg,#4facfe,#38f9d7);display:flex;align-items:center;justify-content:center;font-size:.55rem;font-weight:600;}

.donut{--size:140px;position:relative;width:var(--size);height:var(--size);border-radius:50%;display:grid;place-items:center;}
.donut.small{--size:110px;}
.donut .segment{--c:#4facfe;--v:30;position:absolute;inset:0;border-radius:50%;mask:radial-gradient(circle at center,transparent 56%,#000 56%);background:conic-gradient(var(--c) calc(var(--v)*1%),transparent 0);filter:drop-shadow(0 0 6px rgba(0,0,0,.4));}
.donut .segment.fx{--c:#38f9d7;} .donut .segment.crypto{--c:#a770ef;} .donut .segment.multi{--c:#ffb347;}
.donut .center{position:absolute;width:60%;height:60%;border-radius:50%;background:#14202c;display:flex;align-items:center;justify-content:center;font-size:.6rem;text-align:center;}

.form-group button.warn{background:#7d1d1d;}

/* Utility */
.mini{font-size:.6rem;padding:.35rem .6rem;border-radius:8px;background:#253447;color:#fff;border:1px solid #31455c;cursor:pointer;}
.mini.primary,.primary.mini{background:linear-gradient(135deg,#4facfe,#38f9d7);border:0;color:#0b1117;font-weight:600;}
button.primary{background:linear-gradient(135deg,#4facfe,#38f9d7);color:#0b1117;font-weight:600;border:0;padding:.6rem 1rem;border-radius:10px;cursor:pointer;font-size:.7rem;}

/* Forms general inside pages already present; extend here if needed */

.resource button{align-self:flex-start;}

/* Settings danger override */
.panel.danger button.warn{background:#a02828;}

/* --- Resource pages enhancement (Bybit-like vibe) --- */
.hero{position:relative;border-radius:22px;padding:1.2rem 1.3rem;background:linear-gradient(135deg,#0f1723,#0a111a 55%,#0d1520);border:1px solid #223246;overflow:hidden}
.hero:after{content:"";position:absolute;right:-80px;top:-80px;width:240px;height:240px;background:radial-gradient(closest-side,rgba(72,139,255,.18),transparent);filter:blur(6px)}
.hero h1{margin:0;font-size:1.25rem;letter-spacing:.3px}
.hero p{margin:.35rem 0 0;opacity:.8;font-size:.8rem}
.hero .cta{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.8rem}
.hero .cta .primary{padding:.55rem .9rem;border-radius:12px}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.7rem;margin-top:.9rem}
.kpis .kpi{background:#0b1016;border:1px solid #14202b;padding:.6rem .7rem;border-radius:14px}
.kpis .kpi small{display:block;color:#8aa0b2;letter-spacing:.4px}
.kpis .kpi strong{font-size:1rem}

.chips{display:flex;gap:.4rem;flex-wrap:wrap}
.chip{background:#122131;border:1px solid #213247;color:#cfe3ff;padding:.35rem .6rem;border-radius:999px;font-size:.65rem;font-weight:600}
.chip.warn{background:#2a1f10;border-color:#4b371a;color:#ffd8a6}
.chip.ok{background:#17281e;border-color:#254e35;color:#b6f3cf}

.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.9rem}
.card{background:#0b1016;border:1px solid #162231;border-radius:16px;padding:.8rem}
.card-grid a.card{display:block;color:inherit;text-decoration:none;position:relative}
.card-grid a.card:hover{border-color:#2a3b52;box-shadow:0 8px 20px rgba(0,0,0,.35)}

.timeline{position:relative;display:flex;flex-direction:column;gap:.7rem}
.timeline .item{display:flex;gap:.6rem;align-items:flex-start}
.timeline .dot{width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,#4facfe,#38f9d7);margin-top:.25rem;box-shadow:0 0 0 4px rgba(79,172,254,.15)}
.timeline .item .content{flex:1;background:#0e141c;border:1px solid #1b2a3a;border-radius:12px;padding:.55rem .7rem}

.stepper{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.7rem}
.step{background:linear-gradient(145deg,#101a25,#0f1823);border:1px solid #1b2a3a;border-radius:14px;padding:.7rem}
.step span{display:block;color:#8aa0b2;font-size:.55rem;text-transform:uppercase;letter-spacing:.4px}
.step strong{font-size:.9rem}

.faq{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.faq li{background:#0b1118;border:1px solid #182434;border-radius:12px}
.faq summary{cursor:pointer;padding:.6rem .7rem;font-weight:600}
.faq p{padding:0 .8rem .7rem .8rem;opacity:.9}

.code{background:#0b1016;border:1px solid #1d2733;border-radius:12px;padding:.8rem;font-family:ui-monospace, SFMono-Regular, Menlo, monospace;font-size:.7rem;white-space:pre-wrap}

@media(max-width:800px){
	.hero{padding:1rem}
	.hero h1{font-size:1.05rem}
}