:root {
    --bg-dark:#101820; --bg-dark-card:#16212B; --bg-dark-panel:#1B2833;
    --accent:#FEE715; --accent-strong:#FFF04A; --text-main:#F5F7F8;
    --text-soft:#B8C2C8; --border-soft:#2B3945; --shadow:rgba(0,0,0,.18);
}
* { box-sizing:border-box; }
body { margin:0; font:15px/1.6 Arial,Helvetica,sans-serif; color:var(--text-main); background:#F8F4EA url('/images/background.png') center/cover fixed no-repeat; overflow-x:hidden; }
a { color:inherit; text-decoration:none; } button,input,textarea { font:inherit; }
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.bg-flow { position:fixed; inset:0; overflow:hidden; pointer-events:none; }
.bg-flow-plus-layer { position:absolute; inset:-72px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cpath d='M30 36h12M36 30v12' stroke='%236b7280' stroke-opacity='.32' stroke-width='1.5'/%3E%3C/svg%3E") repeat; animation:plus-drift 18s linear infinite; }
.bg-chart { width:100%; height:100%; opacity:.22; }
.bg-chart path { fill:none; stroke:#59616A; stroke-width:3; stroke-linejoin:miter; stroke-dasharray:2600; animation:chart-draw 12s ease-in-out infinite; }
@keyframes plus-drift { to { transform:translateX(72px); } }
@keyframes chart-draw { from { stroke-dashoffset:2600; opacity:.2; } 65%,to { stroke-dashoffset:0; opacity:1; } }
.site-shell { position:relative; }
.topbar { background:rgba(16,24,32,.96); border-bottom:1px solid var(--border-soft); padding:14px 24px; }
.topbar-inner { max-width:1200px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.brand-logo { display:block; height:48px; max-width:260px; width:auto; }
.nav,.user-badge { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.nav a,.admin-tabs a { padding:8px 12px; border:1px solid var(--border-soft); background:var(--bg-dark-card); border-radius:10px; font-size:14px; }
.nav a:hover,.admin-tabs a:hover { border-color:var(--accent); }
.nav .sso-link { padding:0; background:none; border:0; }
.header-login-image { display:block; height:40px; max-width:100%; }
.user-badge-avatar { width:34px; height:34px; border-radius:50%; }
.nav form { margin:0; }
.container { max-width:1200px; margin:auto; padding:30px 24px; }
.page-title { color:#101820; font-size:26px; line-height:1.2; margin:0 0 10px; }
.page-subtitle { color:#34434F; margin:0 0 24px; }
.card .page-title { color:var(--text-main); }.card .page-subtitle { color:var(--text-soft); }
.card { background:var(--bg-dark-card); border:1px solid var(--border-soft); border-radius:16px; padding:22px; margin-bottom:22px; box-shadow:0 8px 18px var(--shadow); }
.card h2 { font-size:22px; margin-top:0; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:20px; }
.metric-label { font-size:12px; letter-spacing:.07em; text-transform:uppercase; color:var(--text-soft); margin-bottom:8px; }
.metric-value { font-size:24px; font-weight:bold; color:var(--accent); overflow-wrap:anywhere; }
.placeholder-list { display:grid; gap:12px; }
.placeholder-item { padding:14px; border-radius:12px; border:1px solid var(--border-soft); background:var(--bg-dark-panel); overflow-wrap:anywhere; }
.admin-tabs { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:26px; }
.admin-tabs a.active { background:var(--accent); color:var(--bg-dark); font-weight:bold; }
.button,button,.logout-button { display:inline-block; border:0; border-radius:9px; padding:10px 14px; background:var(--accent); color:var(--bg-dark); font-weight:bold; cursor:pointer; }
button:hover,.button:hover { background:var(--accent-strong); }
input:not([type=checkbox]),textarea { max-width:100%; padding:11px 13px; border-radius:8px; border:1px solid var(--border-soft); background:var(--bg-dark); color:var(--text-main); }
.field { display:grid; gap:8px; margin-bottom:18px; max-width:700px; }
.field input,.field textarea { width:100%; }
.notice { padding:16px; margin-bottom:20px; border:1px solid var(--border-soft); border-radius:12px; background:var(--bg-dark-card); color:var(--text-main); }
.notice.error { border-color:#EF4444; }.notice.success { border-color:#22C55E; }
.status-icon { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; font-weight:bold; }
.status-icon.ok { color:#22C55E; background:rgba(34,197,94,.15); box-shadow:0 0 8px rgba(34,197,94,.25); }
.status-icon.fail { color:#EF4444; background:rgba(239,68,68,.15); box-shadow:0 0 8px rgba(239,68,68,.25); }
.home-affiliate-banner-wrap { max-width:1200px; margin:auto; padding:18px 24px 0; }
.home-affiliate-banner { padding:16px 20px; border-radius:14px; background:var(--bg-dark-card); border:1px solid var(--border-soft); }
.home-affiliate-banner strong { color:var(--accent); }.home-affiliate-banner p { margin:5px 0 0; }
.faq-item { background:var(--bg-dark-panel)!important; border-color:var(--border-soft)!important; }
.faq-item summary { color:var(--text-main)!important; }
.faq-item>div { color:var(--text-soft)!important; }
.faq-item>div>div { background:var(--bg-dark-card)!important; border-color:var(--border-soft)!important; }
.pagination { display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin:18px 0 0; color:var(--text-soft); }
.pagination a { color:var(--accent); }
.mail-body { white-space:pre-wrap; }.muted { color:var(--text-soft); }.actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:12px; }
.accent { color:var(--accent); }.loyalty-stage-grid { display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:20px 0; }
.loyalty-stage { padding:14px 8px;border:1px solid var(--border-soft);border-radius:12px;text-align:center;background:var(--bg-dark-panel); }
.loyalty-stage strong { display:block;font-size:21px;color:var(--accent); }.loyalty-stage small { display:block; }.loyalty-stage.current { border-color:var(--accent); }
.tooltip { position:relative;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin-left:6px;background:var(--bg-dark-panel);color:var(--accent);border:1px solid var(--border-soft);border-radius:50%;font-size:14px;cursor:help;vertical-align:middle; }
.tooltip>span { display:none;position:absolute;top:30px;left:0;width:min(420px,75vw);padding:14px;background:var(--bg-dark);color:var(--text-main);font-size:14px;font-weight:normal;border:1px solid var(--border-soft);border-radius:12px;z-index:10; }
.tooltip:hover>span,.tooltip:focus>span { display:block; }.tooltip.warning { background:#DC2626;color:white; }.compound-control { display:flex;gap:12px;align-items:center; }
.compound-control input { width:22px;height:22px;accent-color:var(--accent); }
@media (max-width:980px) { .loyalty-stage-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px) { .loyalty-stage-grid { grid-template-columns:repeat(2,1fr); }.tooltip>span { left:auto;right:-20px; } }
@media (max-width:800px) { .hero-grid { grid-template-columns:1fr!important; }.topbar { padding:12px 16px; }.container { padding:24px 16px; }.brand-logo { height:42px; }.page-title { font-size:23px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; }.bg-chart path { stroke-dashoffset:0; } }