:root { color-scheme:dark light; }

.financial-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; }
.currency-card { border:1px solid var(--line); border-radius:14px; padding:16px; background:linear-gradient(145deg,var(--panel2),var(--panel)); }
.currency-card header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.currency-card header strong { font-size:1.15rem; color:#8ed6ff; }
.currency-stats { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.currency-stats span { display:block; color:var(--muted); font-size:.82rem; }
.currency-stats b { display:block; margin-top:3px; font-size:1rem; }
.license-toolbar { display:grid; grid-template-columns:minmax(200px,1fr) 180px 220px auto; }
.pagination { display:flex; justify-content:center; align-items:center; gap:10px; margin-top:16px; }
.version-history,.admin-management { margin-top:20px; }
.inline-form { display:grid; grid-template-columns:1fr 1.4fr 180px auto; gap:10px; margin:18px 0; }
.danger { background:#421c27; border:1px solid #803146; color:#ffd5dd; border-radius:11px; padding:11px 16px; font-weight:800; }
.notice.unread { border-left:3px solid #44baff; background:#101c2d; }
.notice.warning { border-left-color:#f6b84a; }
.notice.critical { border-left-color:#ff647f; }
.secret-output { display:block; padding:14px; border:1px solid #44baff; border-radius:10px; background:#09111e; color:#c9eeff; font:600 1rem ui-monospace,monospace; overflow-wrap:anywhere; user-select:all; }
.dialog-wide { width:min(920px,86vw); max-height:80vh; overflow:auto; padding:6px; }
#license-chart svg { width:100%; height:240px; background:#0b1321; border:1px solid var(--line); border-radius:12px; }
.chart-legend { display:flex; gap:18px; color:var(--muted); font-size:.85rem; margin-bottom:8px; }
.chart-legend span::before { content:""; width:12px; height:3px; display:inline-block; margin-right:6px; vertical-align:middle; background:#4cc9f0; }
.chart-legend span:last-child::before { background:#89f7a1; }
.session-row { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); }
.session-row:last-child { border-bottom:0; }
progress { width:100%; height:8px; accent-color:#44baff; }
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible { outline:3px solid rgba(68,186,255,.45); outline-offset:2px; }

nav a { display:flex; justify-content:space-between; align-items:center; border:0; background:transparent; color:var(--muted); padding:12px 14px; border-radius:11px; text-align:left; font-weight:700; text-decoration:none; }
nav a:hover,nav a.active { background:#172339; color:var(--text); }
nav a.active { box-shadow:inset 3px 0 var(--accent); }
.sidebar { overflow-y:auto; }
.topbar-actions { display:flex; align-items:center; gap:12px; }
.theme-switcher { display:inline-flex; gap:3px; padding:3px; border:1px solid var(--line); border-radius:12px; background:var(--panel); box-shadow:0 8px 24px rgba(0,0,0,.12); }
.theme-switcher button { border:0; border-radius:8px; padding:7px 10px; background:transparent; color:var(--muted); font-size:.76rem; font-weight:800; }
.theme-switcher button[aria-pressed="true"] { background:var(--panel2); color:var(--text); box-shadow:0 2px 8px rgba(0,0,0,.16); }
.login-theme { position:absolute; top:20px; right:20px; }
.privacy-card { width:min(760px,100%); }
.view > .panel + .panel { margin-top:18px; }

.tutorial { display:grid; gap:18px; }
.tutorial[hidden] { display:none; }
.tutorial-hero { display:flex; align-items:center; justify-content:space-between; gap:28px; background:linear-gradient(135deg,rgba(66,165,255,.12),rgba(101,224,179,.08)),var(--panel); }
.tutorial-hero h2 { font-size:clamp(1.45rem,2.4vw,2.25rem); letter-spacing:-.035em; margin:.1em 0 .35em; }
.tutorial-hero p { max-width:760px; }
.tutorial-hero-actions { display:flex; flex-wrap:wrap; gap:10px; flex-shrink:0; }
a.primary,a.secondary { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
.tutorial-toc { display:grid; grid-template-columns:repeat(5,minmax(120px,1fr)); gap:8px; position:sticky; top:14px; z-index:2; padding:12px; backdrop-filter:blur(18px); }
.tutorial-toc a { display:block; padding:9px 10px; border-radius:9px; color:var(--muted); text-decoration:none; font-size:.76rem; font-weight:750; }
.tutorial-toc a:hover { color:var(--text); background:var(--panel2); }
.tutorial-section { display:grid; grid-template-columns:62px minmax(0,1fr); gap:18px; scroll-margin-top:92px; padding:26px; }
.tutorial-section > div:last-child { min-width:0; }
.tutorial-section h2 { font-size:1.35rem; margin:0 0 12px; letter-spacing:-.025em; }
.tutorial-section p,.tutorial-section li { line-height:1.65; }
.tutorial-section ol,.tutorial-section ul { padding-left:1.3rem; }
.tutorial-section li + li { margin-top:8px; }
.tutorial-section a { color:var(--accent2); }
.tutorial-section code,.copy-row code { border:1px solid var(--line); border-radius:7px; background:var(--code-bg,#09111e); color:var(--code-text,#c9eeff); padding:2px 6px; font-family:"Cascadia Code",Consolas,monospace; font-size:.88em; }
.step-number { width:52px; height:52px; display:grid; place-items:center; border-radius:16px; background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#06131c; font-size:.92rem; font-weight:950; }
.flow-grid,.data-grid,.decision-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:18px 0; }
.data-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.flow-grid > div,.data-grid > div,.decision { display:grid; gap:5px; padding:15px; border:1px solid var(--line); border-radius:13px; background:var(--panel2); }
.flow-grid span,.data-grid span,.decision span { color:var(--muted); font-size:.82rem; line-height:1.45; }
.decision { border-top:3px solid var(--accent); }
.decision.pending { border-top-color:var(--warning); }
.decision.suspended { border-top-color:#ff9f6e; }
.decision.revoked { border-top-color:var(--danger); }
.callout { display:flex; gap:13px; margin-top:18px; padding:14px 16px; border:1px solid var(--line); border-left:4px solid var(--accent2); border-radius:11px; background:rgba(66,165,255,.08); line-height:1.5; }
.callout strong { flex:0 0 180px; }
.callout span { color:var(--muted); }
.callout.warning { border-left-color:var(--warning); background:rgba(255,200,87,.08); }
.callout.neutral { border-left-color:var(--muted); background:rgba(143,160,185,.07); }
.copy-row { display:flex; align-items:center; gap:8px; margin:14px 0; }
.copy-row code { flex:1; padding:12px 14px; overflow-wrap:anywhere; }
.copy-row.compact { margin:0; min-width:280px; }
.support-card,.tutorial-end { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:20px; padding:18px; border:1px solid var(--line); border-radius:14px; background:var(--panel2); }
.support-card > div:first-child,.tutorial-end { line-height:1.45; }
.support-card span,.tutorial-end span { color:var(--muted); display:block; }
.tutorial-end { flex-wrap:wrap; background:linear-gradient(135deg,rgba(101,224,179,.12),rgba(66,165,255,.09)); }
.tutorial-end span { flex:1 1 360px; }
.troubleshooting td:first-child { font-weight:750; min-width:190px; }
.integration-code { display:grid; gap:14px; margin-top:20px; padding:20px; border:1px solid var(--line); border-radius:14px; background:var(--panel2); }
.integration-code h3 { margin:0 0 6px; }
.integration-code pre { overflow:auto; margin:0; padding:18px; border:1px solid var(--line); border-radius:11px; background:var(--code-bg,#09111e); color:var(--code-text,#c9eeff); }
.integration-code pre code { padding:0; border:0; background:transparent; color:inherit; line-height:1.55; }

.alert-demo-controls { display:flex; flex-wrap:wrap; gap:7px; margin:18px 0; }
.alert-demo-controls button { padding:8px 11px; font-size:.76rem; }
.alert-demo-controls button.active { border-color:var(--accent2); color:var(--text); box-shadow:0 0 0 2px rgba(66,165,255,.16); }
.mt5-window { position:relative; overflow:hidden; border:1px solid #566273; border-radius:10px; background:#1f2329; color:#e9edf2; box-shadow:0 22px 55px rgba(0,0,0,.25); }
.mt5-titlebar { display:flex; justify-content:space-between; gap:12px; padding:8px 12px; background:#31363d; color:#f6f7f9; font:12px "Segoe UI",sans-serif; }
.mt5-workspace { display:grid; grid-template-rows:minmax(250px,1fr) 128px; min-height:430px; }
.mt5-chart { position:relative; padding:20px; background-color:#0b0e12; background-image:linear-gradient(#242a3222 1px,transparent 1px),linear-gradient(90deg,#242a3222 1px,transparent 1px); background-size:42px 34px; }
.mt5-chart::after { content:""; position:absolute; left:8%; right:5%; top:58%; height:2px; background:linear-gradient(90deg,transparent,#4e9cff 12%,#50d29c 35%,#ff7b74 62%,#4e9cff 85%,transparent); transform:skewY(-5deg); opacity:.6; }
.mt5-pair { color:#8994a4; font:700 12px "Segoe UI",sans-serif; }
.mt5-status { position:relative; z-index:1; width:min(540px,88%); margin-top:34px; white-space:pre-line; padding:14px 16px; border-left:4px solid #ff756f; background:rgba(8,11,15,.86); color:#ff908b; font:600 13px/1.55 "Cascadia Code",Consolas,monospace; box-shadow:0 12px 35px rgba(0,0,0,.35); }
.mt5-status.allowed { border-left-color:#4be39d; color:#62efad; }
.mt5-toolbox { border-top:1px solid #49515c; background:#24282e; }
.mt5-tabs { display:flex; gap:20px; padding:7px 12px; border-bottom:1px solid #3f4650; font:12px "Segoe UI",sans-serif; }
.mt5-tabs strong { color:#72b7ff; }
.mt5-toolbox pre { margin:0; padding:13px; white-space:pre-wrap; color:#d9dde2; font:12px/1.5 "Cascadia Code",Consolas,monospace; }
.mt5-popup { position:absolute; z-index:3; left:50%; top:44%; transform:translate(-50%,-50%); width:min(420px,82%); padding:18px; border:1px solid #79828d; border-radius:7px; background:#f6f6f6; color:#1c2025; box-shadow:0 20px 60px rgba(0,0,0,.6); font:13px "Segoe UI",sans-serif; }
.mt5-popup strong { display:block; padding-bottom:10px; border-bottom:1px solid #ddd; }
.mt5-popup p { white-space:pre-line; line-height:1.5; }
.mt5-ok { display:block; margin-left:auto; min-width:80px; padding:6px 12px; border:1px solid #6f7883; border-radius:4px; background:#fff; color:#111; }
.message-legend { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; margin-top:14px; }
.message-legend p { margin:0; padding:12px; border:1px solid var(--line); border-radius:10px; color:var(--muted); font-size:.82rem; }
.dot { display:inline-block; width:9px; height:9px; margin-right:6px; border-radius:50%; background:var(--danger); }
.dot.green { background:var(--accent); }
.dot.red { background:var(--danger); }

[data-theme="light"] { color-scheme:light; --bg:#f4f7fb; --panel:#ffffff; --panel2:#eef3f9; --line:#d7e0eb; --text:#142033; --muted:#607088; --accent:#078b68; --accent2:#1675d1; --danger:#c63b50; --warning:#a46600; --code-bg:#eaf0f7; --code-text:#173b5d; }
[data-theme="light"] body { background:radial-gradient(circle at 80% -10%,#dbeeff 0,transparent 32%),var(--bg); }
[data-theme="light"] .login-card { background:rgba(255,255,255,.94); box-shadow:0 30px 100px rgba(37,61,92,.17); }
[data-theme="light"] label { color:#33435a; }
[data-theme="light"] input,[data-theme="light"] select,[data-theme="light"] textarea { background:#fff; color:var(--text); }
[data-theme="light"] .primary { color:#fff; background:linear-gradient(135deg,#078b68,#08765b); }
[data-theme="light"] .secondary { color:#25415e; background:#edf3f9; border-color:#c9d6e5; }
[data-theme="light"] .ghost { color:#55677f; }
[data-theme="light"] .sidebar { background:#fff; box-shadow:8px 0 32px rgba(31,55,82,.05); }
[data-theme="light"] nav a:hover,[data-theme="light"] nav a.active { background:#eaf1f8; }
[data-theme="light"] .status-pill { color:#087457; border-color:#80cdb5; background:#e2f6ef; }
[data-theme="light"] .metric { background:linear-gradient(145deg,#fff,#f1f5fa); box-shadow:0 9px 24px rgba(31,55,82,.05); }
[data-theme="light"] .panel { background:rgba(255,255,255,.95); box-shadow:0 10px 28px rgba(31,55,82,.045); }
[data-theme="light"] td { border-bottom-color:#e3e9f1; }
[data-theme="light"] .tag { background:#e5ebf3; color:#53657c; }
[data-theme="light"] .tag.active { background:#daf3e9; color:#087457; }
[data-theme="light"] .tag.pending { background:#fff0c9; color:#865700; }
[data-theme="light"] .tag.revoked,[data-theme="light"] .tag.expired { background:#fae1e6; color:#a3293e; }
[data-theme="light"] .notice { background:#f8fafc; }
[data-theme="light"] .notice.unread { background:#edf6ff; }
[data-theme="light"] .danger { background:#fae5e9; color:#a62940; border-color:#e3abb5; }
[data-theme="light"] .currency-card { box-shadow:none; }
[data-theme="light"] .currency-card header strong { color:#176fb4; }
[data-theme="light"] .secret-output { background:#edf7ff; color:#1a547d; }
[data-theme="light"] .check-list { color:#33435a; }
[data-theme="light"] #license-chart svg { background:#f8fafc; }
[data-theme="light"] dialog { background:#fff; box-shadow:0 30px 100px rgba(21,36,54,.35); }
[data-theme="light"] dialog::backdrop { background:rgba(18,30,45,.48); }
[data-theme="light"] .flash { background:#daf3e9; color:#145e49; border-color:#9ad7c2; }
[data-theme="light"] .flash.error { background:#fae3e7; color:#9d283d; border-color:#e4a8b3; }
[data-theme="light"] .theme-switcher { box-shadow:0 8px 24px rgba(31,55,82,.07); }
[data-theme="light"] .theme-switcher button[aria-pressed="true"] { background:#fff; box-shadow:0 2px 8px rgba(31,55,82,.12); }

@media (max-width:1180px) {
  .tutorial-toc { grid-template-columns:repeat(3,minmax(130px,1fr)); }
  .flow-grid,.decision-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .data-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:900px) {
  .license-toolbar,.inline-form { grid-template-columns:1fr; }
  .dialog-wide { width:82vw; }
  .tutorial-hero { align-items:flex-start; flex-direction:column; }
  .tutorial-toc { position:static; grid-template-columns:repeat(2,minmax(130px,1fr)); }
  .message-legend { grid-template-columns:1fr; }
}
@media (max-width:760px) {
  .sidebar nav { grid-template-columns:repeat(2,1fr); }
  nav a { font-size:.72rem; padding:9px; }
  .topbar { gap:14px; }
  .topbar-actions { align-items:flex-end; flex-direction:column-reverse; }
  .tutorial-section { grid-template-columns:1fr; padding:19px 16px; }
  .step-number { width:44px; height:44px; border-radius:13px; }
  .callout { display:grid; }
  .callout strong { flex-basis:auto; }
  .support-card { align-items:stretch; flex-direction:column; }
  .copy-row.compact { min-width:0; }
}
@media (max-width:500px) {
  .topbar { flex-direction:column; }
  .topbar-actions { width:100%; align-items:flex-start; flex-direction:row; justify-content:space-between; }
  .tutorial-toc,.flow-grid,.data-grid,.decision-grid { grid-template-columns:1fr; }
  .tutorial-hero-actions,.tutorial-hero-actions > * { width:100%; }
  .copy-row { align-items:stretch; flex-direction:column; }
  .mt5-workspace { grid-template-rows:minmax(280px,1fr) 150px; }
}