.help-center-layout > aside #help-flow-tab { min-height:48px;padding:8px 10px;display:grid;grid-template-columns:24px 1fr;grid-template-rows:auto auto;column-gap:7px;align-items:center;text-align:left; }
.help-center-layout > aside #help-flow-tab .help-flow-tab-mark { grid-row:1 / 3;width:23px;height:23px;display:grid;place-items:center;border:1px solid rgba(92,227,185,.35);border-radius:7px;color:#65e1bc;background:rgba(64,210,169,.08);font-size:17px; }
.help-center-layout > aside #help-flow-tab b { color:inherit;font-size:10.5px;line-height:1.15; }
.help-center-layout > aside #help-flow-tab small { color:#57737b;font-size:8px;line-height:1.2; }
.help-center-layout > aside #help-flow-tab.active .help-flow-tab-mark { color:#051d19;background:#61dfb8;box-shadow:0 0 18px rgba(97,223,184,.3); }

.xouba-flow-library > header { position:relative;overflow:hidden; }
.xouba-flow-library > header::after { content:"";position:absolute;right:-32px;top:-42px;width:160px;height:160px;border:1px solid rgba(96,225,186,.14);border-radius:50%;box-shadow:0 0 0 20px rgba(96,225,186,.025),0 0 0 44px rgba(96,225,186,.018);pointer-events:none; }
.xouba-flow-summary { margin:11px 0 12px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid rgba(153,190,197,.12);border-radius:10px;background:rgba(7,23,31,.55);overflow:hidden; }
.xouba-flow-summary div { min-height:52px;padding:8px 11px;border-right:1px solid rgba(153,190,197,.1);display:flex;flex-direction:column;justify-content:center; }
.xouba-flow-summary div:last-child { border-right:0; }
.xouba-flow-summary b { color:#65dfbb;font-size:17px;font-weight:650;line-height:1; }
.xouba-flow-summary span { margin-top:5px;color:#6f8990;font-size:8.5px;text-transform:uppercase;letter-spacing:.055em; }

.xouba-flow-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px; }
.xouba-flow-card { min-width:0;border:1px solid rgba(150,191,198,.14);border-radius:11px;background:linear-gradient(145deg,rgba(13,34,43,.96),rgba(7,22,30,.96));overflow:hidden;box-shadow:0 12px 26px rgba(0,7,12,.16);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.xouba-flow-card:hover { transform:translateY(-2px);border-color:rgba(99,225,187,.32);box-shadow:0 16px 34px rgba(0,7,12,.24),0 0 0 1px rgba(99,225,187,.035) inset; }
.xouba-flow-card figure { position:relative;height:136px;margin:0;overflow:hidden;border-bottom:1px solid rgba(151,191,198,.12);background:#071820; }
.xouba-flow-card figure::after { content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 38%,rgba(5,18,24,.8));pointer-events:none; }
.xouba-flow-card figure img { width:100%;height:100%;display:block;object-fit:cover;object-position:center;filter:saturate(.8) contrast(1.04);transition:transform .3s ease,filter .3s ease; }
.xouba-flow-card:hover figure img { transform:scale(1.025);filter:saturate(1) contrast(1.06); }
.xouba-flow-card figure > span { position:absolute;z-index:1;right:10px;bottom:8px;color:rgba(222,248,241,.78);font-size:20px;font-weight:300;letter-spacing:-.04em; }
.xouba-flow-card-body { padding:12px; }
.xouba-flow-card-body > small { color:#5dd8b3;font-size:8px;font-weight:700;letter-spacing:.09em; }
.xouba-flow-card-body h5 { margin:4px 0 5px;color:#d6e5e3;font-size:13px;line-height:1.18; }
.xouba-flow-card-body p { min-height:46px;margin:0;color:#779097;font-size:9.5px;line-height:1.45; }
.xouba-flow-tags { min-height:22px;margin:9px 0;display:flex;flex-wrap:wrap;gap:5px; }
.xouba-flow-tags span { padding:3px 6px;border:1px solid rgba(107,205,178,.14);border-radius:999px;color:#72968d;background:rgba(69,181,150,.055);font-size:7.5px; }
.xouba-flow-card button { width:100%;min-height:38px;padding:6px 9px;display:grid;grid-template-columns:22px 1fr;grid-template-rows:auto auto;align-items:center;text-align:left;border:1px solid rgba(91,219,181,.25);border-radius:8px;color:#9ee9d2;background:rgba(54,192,152,.075);cursor:pointer; }
.xouba-flow-card button:hover { border-color:rgba(91,219,181,.52);background:rgba(54,192,152,.13); }
.xouba-flow-card button > span { grid-row:1 / 3;font-size:17px; }
.xouba-flow-card button b { font-size:8.5px;letter-spacing:.055em; }
.xouba-flow-card button small { color:#5e7b7d;font-size:7.5px; }

.xouba-flow-viewer { width:min(96vw,1680px);max-width:none;height:94vh;max-height:none;margin:auto;padding:0;border:1px solid rgba(117,229,197,.22);border-radius:15px;color:#dce9e7;background:#071820;box-shadow:0 34px 100px rgba(0,0,0,.58);overflow:hidden; }
.xouba-flow-viewer::backdrop { background:rgba(1,9,13,.82);backdrop-filter:blur(7px); }
.xouba-flow-viewer-shell { height:100%;display:grid;grid-template-rows:57px minmax(0,1fr); }
.xouba-flow-viewer-shell > header { padding:0 11px 0 15px;display:flex;align-items:center;justify-content:space-between;gap:15px;border-bottom:1px solid rgba(146,187,194,.14);background:linear-gradient(90deg,rgba(13,38,46,.98),rgba(7,24,32,.98)); }
.xouba-flow-viewer-brand { min-width:0;display:flex;align-items:center;gap:10px; }
.xouba-flow-viewer-brand > i,.xouba-flow-frame-loader > i { width:32px;height:32px;display:flex;align-items:center;justify-content:center;gap:2px;border:1px solid rgba(107,231,195,.26);border-radius:9px;background:linear-gradient(145deg,rgba(104,230,193,.18),rgba(37,156,126,.06));box-shadow:0 0 23px rgba(81,224,181,.12); }
.xouba-flow-viewer-brand > i span,.xouba-flow-frame-loader > i span { width:4px;height:15px;border-radius:4px;background:#6ae3be;transform:skew(-24deg); }
.xouba-flow-viewer-brand > i span:first-child,.xouba-flow-frame-loader > i span:first-child { height:9px; }
.xouba-flow-viewer-brand > i span:last-child,.xouba-flow-frame-loader > i span:last-child { height:11px; }
.xouba-flow-viewer-brand small { display:block;color:#56bf9f;font-size:7.5px;font-weight:700;letter-spacing:.1em; }
.xouba-flow-viewer-brand h3 { margin:3px 0 0;overflow:hidden;color:#d8e6e4;font-size:13px;line-height:1.15;text-overflow:ellipsis;white-space:nowrap; }
.xouba-flow-viewer-actions { display:flex;align-items:center;gap:7px; }
.xouba-flow-viewer-actions button { min-height:33px;border:1px solid rgba(143,190,194,.18);border-radius:8px;color:#91aaa9;background:rgba(13,37,45,.74);cursor:pointer; }
.xouba-flow-viewer-actions button:first-child { padding:0 10px;display:flex;align-items:center;gap:7px; }
.xouba-flow-viewer-actions button:first-child span { color:#61dfb8;font-size:15px; }
.xouba-flow-viewer-actions button:first-child b { font-size:8px;letter-spacing:.055em; }
.xouba-flow-viewer-actions button:last-child { width:34px;font-size:22px; }
.xouba-flow-viewer-actions button:hover { color:#d8ebe6;border-color:rgba(97,223,184,.42); }
.xouba-flow-frame-wrap { position:relative;min-height:0;background:#edf1f0; }
.xouba-flow-frame-wrap iframe { width:100%;height:100%;display:block;border:0;opacity:0;transition:opacity .22s ease; }
.xouba-flow-frame-wrap iframe[data-ready="true"] { opacity:1; }
.xouba-flow-frame-loader { position:absolute;z-index:2;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#d8e6e4;background:radial-gradient(circle at center,rgba(23,69,66,.95),#071820 55%); }
.xouba-flow-frame-loader[hidden] { display:none; }
.xouba-flow-frame-loader > i { margin-bottom:12px;animation:xouba-flow-pulse 1.1s ease-in-out infinite alternate; }
.xouba-flow-frame-loader strong { font-size:11px; }
.xouba-flow-frame-loader small { margin-top:5px;color:#5f7c80;font-size:8.5px; }
@keyframes xouba-flow-pulse { from { transform:scale(.92);filter:brightness(.82); } to { transform:scale(1.06);filter:brightness(1.18); } }

html[data-theme="light"] .help-center-layout > aside #help-flow-tab small { color:#648079; }
html[data-theme="light"] .xouba-flow-summary { border-color:rgba(39,83,76,.12);background:rgba(245,250,248,.9); }
html[data-theme="light"] .xouba-flow-summary span { color:#627a73; }
html[data-theme="light"] .xouba-flow-card { border-color:rgba(39,83,76,.14);background:linear-gradient(145deg,#fff,#f3f8f6);box-shadow:0 12px 26px rgba(31,66,60,.08); }
html[data-theme="light"] .xouba-flow-card figure { border-color:rgba(39,83,76,.1);background:#eaf2ef; }
html[data-theme="light"] .xouba-flow-card-body h5 { color:#17332d; }
html[data-theme="light"] .xouba-flow-card-body p { color:#607972; }
html[data-theme="light"] .xouba-flow-tags span { color:#46766a;border-color:rgba(44,139,113,.14);background:rgba(70,183,149,.07); }
html[data-theme="light"] .xouba-flow-card button { color:#196b58;background:rgba(61,194,154,.08); }
html[data-theme="light"] .xouba-flow-card button small { color:#628078; }

@media (max-width:900px) {
  .xouba-flow-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .xouba-flow-summary div:nth-child(2) { border-right:0; }
  .xouba-flow-summary div:nth-child(-n+2) { border-bottom:1px solid rgba(153,190,197,.1); }
  .xouba-flow-grid { grid-template-columns:1fr; }
  .xouba-flow-card-body p { min-height:0; }
  .xouba-flow-viewer { width:98vw;height:96vh;border-radius:10px; }
  .xouba-flow-viewer-actions button:first-child b { display:none; }
}

@media (prefers-reduced-motion:reduce) {
  .xouba-flow-card,.xouba-flow-card figure img,.xouba-flow-frame-wrap iframe,.xouba-flow-frame-loader > i { transition:none;animation:none; }
}