:root {
      --copy-icon-url: var(--copy-icon-url-light);
      --bg: #eef2f8;
      --bg-accent:
        radial-gradient(700px 320px at 8% -12%, rgba(61, 120, 193, 0.18), transparent 60%),
        radial-gradient(820px 360px at 94% -24%, rgba(87, 142, 211, 0.14), transparent 62%);
      --surface: #ffffff;
      --surface-soft: #f4f7fd;
      --surface-soft-2: #eaf0fa;
      --text: #172033;
      --muted: #5f6f8d;
      --line: #d4deee;
      --topbar-bg-1: #17365f;
      --topbar-bg-2: #1e4f86;
      --topbar-text: #f5f9ff;
      --topbar-link: #dbe8fb;
      --topbar-hover: #ffffff;
      --topbar-line: rgba(255, 255, 255, 0.16);
      --page-top-padding: 14px;
      --page-title-tabs-gap: 10px;
      --page-tabs-height: 36px;
      --page-tabs-padding-bottom: 5px;
      --page-header-bottom-gap: 6px;
      --page-actions-top: 18px;
      --control-bg: #ffffff;
      --control-line: #b8c8df;
      --control-text: #172033;
      --button-bg: #2d67a9;
      --button-bg-hover: #265a94;
      --button-line: #27578f;
      --button-text: #ffffff;
      --app-action-line: rgba(64, 128, 210, 0.68);
      --app-action-line-hover: rgba(88, 158, 240, 0.78);
      --app-action-bg: linear-gradient(180deg, rgba(21, 62, 116, 0.96), rgba(12, 42, 84, 0.96));
      --app-action-bg-hover: linear-gradient(180deg, rgba(28, 76, 138, 0.98), rgba(16, 52, 100, 0.98));
      --app-action-bg-active: linear-gradient(180deg, rgba(16, 52, 100, 0.98), rgba(8, 32, 68, 0.98));
      --app-action-text: #dbeaff;
      --app-action-text-hover: #f2f7ff;
      --app-action-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 8px 18px rgba(10, 79, 168, 0.1);
      --app-action-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 12px 24px rgba(10, 79, 168, 0.14);
      --focus: rgba(65, 132, 208, 0.25);
      --ok-bg: #e8f6ee;
      --ok-line: #bfe5ce;
      --err-bg: #fff0f0;
      --err-line: #f0bcbc;
      --warn-bg: #fff8e5;
      --warn-line: #e6d398;
      --warn-text: #7a5709;
      --row-hover: #e3ebf9;
      --row-open: #d8e5f8;
      --radius: 14px;
      --shadow: 0 12px 34px rgba(13, 32, 67, 0.08);
      --workspace-bg: #050b14;
      --workspace-bg-accent: linear-gradient(180deg, #050b14 0%, #07111f 100%);
    }

    html[data-theme="dark"] {
      --copy-icon-url: var(--copy-icon-url-dark);
      --bg: #0d1727;
      --bg-accent:
        radial-gradient(700px 320px at 6% -12%, rgba(56, 114, 188, 0.26), transparent 62%),
        radial-gradient(820px 360px at 94% -24%, rgba(37, 82, 137, 0.2), transparent 64%);
      --surface: #111d2e;
      --surface-soft: #17263b;
      --surface-soft-2: #1d3049;
      --text: #e8f0ff;
      --muted: #9fb1ce;
      --line: #2b3f59;
      --topbar-bg-1: #0f233f;
      --topbar-bg-2: #1a3a64;
      --topbar-text: #eaf2ff;
      --topbar-link: #c7d7f0;
      --topbar-hover: #ffffff;
      --topbar-line: rgba(255, 255, 255, 0.14);
      --control-bg: #13243a;
      --control-line: #33516f;
      --control-text: #e8f0ff;
      --button-bg: #3b7bc0;
      --button-bg-hover: #4a8bd2;
      --button-line: #2f6cab;
      --button-text: #f4f8ff;
      --focus: rgba(84, 151, 226, 0.34);
      --ok-bg: #123327;
      --ok-line: #1e5c41;
      --err-bg: #412127;
      --err-line: #7d3a44;
      --warn-bg: #3d3117;
      --warn-line: #7f6a3d;
      --warn-text: #f1d88f;
      --row-hover: #20314a;
      --row-open: #27405f;
      --shadow: 0 14px 34px rgba(0, 0, 0, 0.36);
    }

    html[data-skin="fintech"][data-theme="light"] {
      --bg: #eef2f7;
      --bg-accent:
        radial-gradient(760px 340px at 7% -14%, rgba(70, 124, 193, 0.16), transparent 60%),
        radial-gradient(840px 380px at 96% -22%, rgba(255, 202, 136, 0.11), transparent 62%);
      --surface: #ffffff;
      --surface-soft: #f6f9fd;
      --surface-soft-2: #ebf1fb;
      --text: #172338;
      --muted: #617391;
      --line: #d3e0f0;
      --topbar-bg-1: #122a4b;
      --topbar-bg-2: #1b4a79;
      --topbar-text: #f4f8ff;
      --topbar-link: #d7e6fa;
      --topbar-hover: #ffffff;
      --topbar-line: rgba(255, 255, 255, 0.16);
      --control-bg: #ffffff;
      --control-line: #b6c8e0;
      --control-text: #172338;
      --button-bg: #2f70b8;
      --button-bg-hover: #2a63a3;
      --button-line: #275a95;
      --button-text: #ffffff;
      --focus: rgba(66, 132, 206, 0.26);
      --ok-bg: #e9f7ef;
      --ok-line: #bde5cd;
      --err-bg: #ffecec;
      --err-line: #efbcbc;
      --warn-bg: #fff4de;
      --warn-line: #ebc986;
      --warn-text: #7f5a0f;
      --row-hover: #e3ecfa;
      --row-open: #d6e4f9;
      --shadow: 0 12px 32px rgba(11, 29, 58, 0.1);
    }

    html[data-skin="fintech"][data-theme="dark"] {
      --bg: #071425;
      --bg-accent:
        radial-gradient(760px 360px at 8% -16%, rgba(49, 110, 186, 0.25), transparent 60%),
        radial-gradient(860px 390px at 96% -22%, rgba(29, 75, 140, 0.22), transparent 62%);
      --surface: #0f2035;
      --surface-soft: #152a43;
      --surface-soft-2: #1b3553;
      --text: #ecf3ff;
      --muted: #9fb4d1;
      --line: #284564;
      --topbar-bg-1: #0a1d35;
      --topbar-bg-2: #123a67;
      --topbar-text: #edf4ff;
      --topbar-link: #d0e0f7;
      --topbar-hover: #ffffff;
      --topbar-line: rgba(255, 255, 255, 0.16);
      --control-bg: #13263e;
      --control-line: #325373;
      --control-text: #edf3ff;
      --button-bg: #2f73c3;
      --button-bg-hover: #4187d8;
      --button-line: #2a67ac;
      --button-text: #f4f8ff;
      --focus: rgba(90, 156, 229, 0.34);
      --ok-bg: #123627;
      --ok-line: #1d5e42;
      --err-bg: #4a2027;
      --err-line: #8c3d49;
      --warn-bg: #483719;
      --warn-line: #8b7240;
      --warn-text: #f3dd9f;
      --row-hover: #223854;
      --row-open: #2a4568;
      --shadow: 0 16px 36px rgba(0, 0, 0, 0.44);
    }

    html[data-skin="neo"][data-theme="light"] {
      --bg: #edf2f9;
      --bg-accent:
        radial-gradient(760px 340px at 8% -14%, rgba(30, 173, 227, 0.16), transparent 60%),
        radial-gradient(860px 360px at 96% -20%, rgba(119, 109, 235, 0.16), transparent 62%);
      --surface: #ffffff;
      --surface-soft: #f2f6fd;
      --surface-soft-2: #e9f0fb;
      --text: #1a2234;
      --muted: #617293;
      --line: #d3dff1;
      --topbar-bg-1: #14345d;
      --topbar-bg-2: #3a4890;
      --topbar-text: #f2f7ff;
      --topbar-link: #d7e4ff;
      --topbar-hover: #ffffff;
      --topbar-line: rgba(255, 255, 255, 0.18);
      --control-bg: #ffffff;
      --control-line: #b5c8e4;
      --control-text: #1a2234;
      --button-bg: #2e79d9;
      --button-bg-hover: #4a90ea;
      --button-line: #2664bb;
      --button-text: #ffffff;
      --focus: rgba(58, 146, 235, 0.3);
      --ok-bg: #e8f7ef;
      --ok-line: #bde5ce;
      --err-bg: #ffeaec;
      --err-line: #f2b9c2;
      --warn-bg: #fff1de;
      --warn-line: #ebc48b;
      --warn-text: #7f5815;
      --row-hover: #e3ecfc;
      --row-open: #d5e3fa;
      --shadow: 0 12px 32px rgba(23, 34, 56, 0.1);
    }

    html[data-skin="neo"][data-theme="dark"] {
      --bg: #080d17;
      --bg-accent:
        radial-gradient(760px 360px at 8% -15%, rgba(0, 179, 255, 0.2), transparent 60%),
        radial-gradient(880px 390px at 96% -20%, rgba(118, 90, 255, 0.2), transparent 62%);
      --surface: #101a2b;
      --surface-soft: #16253b;
      --surface-soft-2: #1e2f4a;
      --text: #ecf3ff;
      --muted: #9bb1d6;
      --line: #2b4365;
      --topbar-bg-1: #091222;
      --topbar-bg-2: #1a2a54;
      --topbar-text: #edf4ff;
      --topbar-link: #d3e1ff;
      --topbar-hover: #ffffff;
      --topbar-line: rgba(255, 255, 255, 0.16);
      --control-bg: #13243a;
      --control-line: #335173;
      --control-text: #edf3ff;
      --button-bg: #1f81e0;
      --button-bg-hover: #3a9af4;
      --button-line: #176abb;
      --button-text: #f4f9ff;
      --focus: rgba(24, 177, 255, 0.35);
      --ok-bg: #123827;
      --ok-line: #1f6244;
      --err-bg: #4d1f2b;
      --err-line: #963f56;
      --warn-bg: #4a341b;
      --warn-line: #8e6d41;
      --warn-text: #f3dca6;
      --row-hover: #233759;
      --row-open: #2c4470;
      --shadow: 0 16px 36px rgba(0, 0, 0, 0.48);
    }

    html[data-skin="premium"][data-theme="light"] {
      --bg: #f0ece3;
      --bg-accent:
        radial-gradient(820px 340px at 10% -15%, rgba(40, 36, 28, 0.18), transparent 60%),
        radial-gradient(840px 360px at 96% -20%, rgba(201, 156, 62, 0.22), transparent 62%);
      --surface: #ffffff;
      --surface-soft: #f7f3ea;
      --surface-soft-2: #efe8d8;
      --text: #1f1b15;
      --muted: #695d48;
      --line: #d3c19f;
      --topbar-bg-1: #1f1b16;
      --topbar-bg-2: #6f5527;
      --topbar-text: #fbf2e1;
      --topbar-link: #eddcbc;
      --topbar-hover: #fff9ea;
      --topbar-line: rgba(252, 219, 159, 0.34);
      --control-bg: #fffdf8;
      --control-line: #c8ad77;
      --control-text: #1f1b15;
      --button-bg: #c69742;
      --button-bg-hover: #b07f2a;
      --button-line: #8f621d;
      --button-text: #fff8eb;
      --focus: rgba(198, 151, 66, 0.29);
      --ok-bg: #edf8ef;
      --ok-line: #bfe0c5;
      --err-bg: #fff0ec;
      --err-line: #efbeb1;
      --warn-bg: #fff4dc;
      --warn-line: #e4bf72;
      --warn-text: #6d5118;
      --row-hover: #e9deca;
      --row-open: #e2d2b5;
      --shadow: 0 12px 34px rgba(41, 31, 17, 0.18);
    }

    html[data-skin="premium"][data-theme="dark"] {
      --bg: #050505;
      --bg-accent:
        radial-gradient(840px 360px at 8% -18%, rgba(217, 171, 70, 0.14), transparent 62%),
        radial-gradient(900px 380px at 96% -20%, rgba(173, 132, 49, 0.14), transparent 62%);
      --surface: #0f0f0f;
      --surface-soft: #141414;
      --surface-soft-2: #1b1b1b;
      --text: #f9f0df;
      --muted: #c1af8d;
      --line: #4a3c24;
      --topbar-bg-1: #0b0b0b;
      --topbar-bg-2: #342915;
      --topbar-text: #fff4df;
      --topbar-link: #ecd8b3;
      --topbar-hover: #fff8ec;
      --topbar-line: rgba(212, 169, 82, 0.34);
      --control-bg: #151412;
      --control-line: #5a4624;
      --control-text: #f9f0df;
      --button-bg: #d5a74c;
      --button-bg-hover: #e2bb71;
      --button-line: #ac7c2c;
      --button-text: #1c1304;
      --focus: rgba(220, 175, 81, 0.38);
      --ok-bg: #13261a;
      --ok-line: #2f5e42;
      --err-bg: #411f1f;
      --err-line: #7e3f3f;
      --warn-bg: #493517;
      --warn-line: #9d7639;
      --warn-text: #f4dca7;
      --row-hover: #272116;
      --row-open: #332a1b;
      --shadow: 0 20px 44px rgba(0, 0, 0, 0.62);
    }

    :is(html[data-skin="compact"], html[data-skin="fit"])[data-theme="light"] {
      --bg: #edf7f3;
      --bg-accent:
        radial-gradient(720px 320px at 7% -12%, rgba(47, 159, 118, 0.18), transparent 60%),
        radial-gradient(860px 360px at 95% -22%, rgba(84, 191, 153, 0.14), transparent 62%);
      --surface: #ffffff;
      --surface-soft: #f3faf7;
      --surface-soft-2: #e7f3ed;
      --text: #153429;
      --muted: #5d7f73;
      --line: #c8e3d8;
      --topbar-bg-1: #0f533f;
      --topbar-bg-2: #1a7b5e;
      --topbar-text: #f2fff9;
      --topbar-link: #d4efe5;
      --topbar-hover: #ffffff;
      --topbar-line: rgba(255, 255, 255, 0.18);
      --control-bg: #ffffff;
      --control-line: #a9d1c2;
      --control-text: #153429;
      --button-bg: #1e8f6b;
      --button-bg-hover: #177a5a;
      --button-line: #146b4f;
      --button-text: #ffffff;
      --focus: rgba(38, 162, 121, 0.28);
      --ok-bg: #e7f9ef;
      --ok-line: #bae6ca;
      --err-bg: #fff1f1;
      --err-line: #f1c0c0;
      --warn-bg: #fff8e7;
      --warn-line: #e4d39a;
      --warn-text: #755b11;
      --row-hover: #dff2e9;
      --row-open: #d2ebdf;
      --shadow: 0 12px 32px rgba(9, 58, 43, 0.12);
    }

    :is(html[data-skin="compact"], html[data-skin="fit"])[data-theme="dark"] {
      --bg: #081d16;
      --bg-accent:
        radial-gradient(760px 340px at 6% -14%, rgba(36, 164, 120, 0.24), transparent 60%),
        radial-gradient(900px 390px at 96% -22%, rgba(25, 112, 84, 0.2), transparent 62%);
      --surface: #0f261e;
      --surface-soft: #153329;
      --surface-soft-2: #1b4335;
      --text: #e8fff4;
      --muted: #a3cab9;
      --line: #2a5f4d;
      --topbar-bg-1: #082419;
      --topbar-bg-2: #0f6047;
      --topbar-text: #ecfff6;
      --topbar-link: #cbefdf;
      --topbar-hover: #ffffff;
      --topbar-line: rgba(255, 255, 255, 0.16);
      --control-bg: #143126;
      --control-line: #366856;
      --control-text: #e9fff6;
      --button-bg: #24a579;
      --button-bg-hover: #30b789;
      --button-line: #1e8e68;
      --button-text: #f3fff9;
      --focus: rgba(63, 194, 149, 0.34);
      --ok-bg: #113a29;
      --ok-line: #24664b;
      --err-bg: #4a2328;
      --err-line: #8d444f;
      --warn-bg: #46381a;
      --warn-line: #8b7342;
      --warn-text: #f0dba1;
      --row-hover: #224538;
      --row-open: #2b5848;
      --shadow: 0 16px 36px rgba(0, 0, 0, 0.42);
    }

    html[data-skin="fit"][data-theme="light"] {
      --bg: #f2f8e6;
      --bg-accent:
        radial-gradient(760px 360px at 7% -14%, rgba(168, 214, 70, 0.22), transparent 62%),
        radial-gradient(860px 380px at 95% -24%, rgba(124, 188, 44, 0.16), transparent 64%);
      --surface: #ffffff;
      --surface-soft: #f6fbec;
      --surface-soft-2: #edf7dc;
      --text: #1f2c13;
      --muted: #637354;
      --line: #cfe4aa;
      --topbar-bg-1: #0d1310;
      --topbar-bg-2: #1d2b20;
      --topbar-text: #f3fee2;
      --topbar-link: #d4efb1;
      --topbar-hover: #ffffff;
      --topbar-line: rgba(201, 255, 121, 0.18);
      --control-bg: #ffffff;
      --control-line: #b8d58b;
      --control-text: #1f2c13;
      --button-bg: #95cb34;
      --button-bg-hover: #7eb626;
      --button-line: #669a17;
      --button-text: #152008;
      --focus: rgba(126, 182, 38, 0.28);
      --ok-bg: #ebf8df;
      --ok-line: #b9de8a;
      --err-bg: #fff0ec;
      --err-line: #efc2b8;
      --warn-bg: #fff6dc;
      --warn-line: #e8cd84;
      --warn-text: #6f5418;
      --row-hover: #eaf5d5;
      --row-open: #e0efc5;
      --shadow: 0 12px 30px rgba(61, 86, 22, 0.15);
    }

    html[data-skin="fit"][data-theme="dark"] {
      --bg: #0b1208;
      --bg-accent:
        radial-gradient(760px 360px at 8% -16%, rgba(124, 188, 44, 0.2), transparent 60%),
        radial-gradient(900px 390px at 96% -22%, rgba(66, 111, 25, 0.2), transparent 62%);
      --surface: #121b0f;
      --surface-soft: #192616;
      --surface-soft-2: #22331d;
      --text: #ecf7dd;
      --muted: #b2c9a0;
      --line: #3f5a36;
      --topbar-bg-1: #070b06;
      --topbar-bg-2: #1c3014;
      --topbar-text: #effbdc;
      --topbar-link: #cde8a6;
      --topbar-hover: #ffffff;
      --topbar-line: rgba(189, 240, 121, 0.2);
      --control-bg: #172213;
      --control-line: #44663a;
      --control-text: #ecf7dd;
      --button-bg: #89c132;
      --button-bg-hover: #9ad541;
      --button-line: #669a17;
      --button-text: #132008;
      --focus: rgba(154, 213, 65, 0.34);
      --ok-bg: #16301b;
      --ok-line: #2f6a3f;
      --err-bg: #47251f;
      --err-line: #8a4940;
      --warn-bg: #45371b;
      --warn-line: #8d7440;
      --warn-text: #f2dfad;
      --row-hover: #22321d;
      --row-open: #2a4024;
      --shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
    }

    html[data-skin="ocean"][data-theme="light"] {
      --bg: #e9f6fb;
      --bg-accent:
        radial-gradient(780px 360px at 8% -16%, rgba(42, 162, 214, 0.2), transparent 62%),
        radial-gradient(900px 390px at 96% -24%, rgba(16, 118, 170, 0.16), transparent 64%);
      --surface: #ffffff;
      --surface-soft: #f1fbff;
      --surface-soft-2: #e4f4fb;
      --text: #123143;
      --muted: #537284;
      --line: #bcdceb;
      --topbar-bg-1: #063c59;
      --topbar-bg-2: #0a6e9f;
      --topbar-text: #ecf9ff;
      --topbar-link: #caebff;
      --topbar-hover: #ffffff;
      --topbar-line: rgba(255, 255, 255, 0.2);
      --control-bg: #ffffff;
      --control-line: #9cc8de;
      --control-text: #123143;
      --button-bg: #0a86c2;
      --button-bg-hover: #0c72a6;
      --button-line: #085e89;
      --button-text: #f3fbff;
      --focus: rgba(10, 134, 194, 0.3);
      --ok-bg: #e5f7f1;
      --ok-line: #b7e3d4;
      --err-bg: #ffefef;
      --err-line: #efc2c2;
      --warn-bg: #fff5df;
      --warn-line: #e7cc8f;
      --warn-text: #725716;
      --row-hover: #d9eef9;
      --row-open: #cfe8f6;
      --shadow: 0 12px 32px rgba(9, 60, 90, 0.14);
    }

    html[data-skin="ocean"][data-theme="dark"] {
      --bg: #06111a;
      --bg-accent:
        radial-gradient(780px 360px at 9% -16%, rgba(0, 156, 224, 0.2), transparent 60%),
        radial-gradient(920px 400px at 96% -24%, rgba(0, 98, 148, 0.22), transparent 64%);
      --surface: #0d1f2d;
      --surface-soft: #132839;
      --surface-soft-2: #1a3448;
      --text: #eaf8ff;
      --muted: #9dbdce;
      --line: #2f536a;
      --topbar-bg-1: #031827;
      --topbar-bg-2: #07496e;
      --topbar-text: #edf9ff;
      --topbar-link: #c8eaff;
      --topbar-hover: #ffffff;
      --topbar-line: rgba(255, 255, 255, 0.18);
      --control-bg: #102636;
      --control-line: #3a6178;
      --control-text: #ecf8ff;
      --button-bg: #1094d3;
      --button-bg-hover: #23a8e7;
      --button-line: #0a77ab;
      --button-text: #f3fbff;
      --focus: rgba(35, 168, 231, 0.34);
      --ok-bg: #133226;
      --ok-line: #2a654a;
      --err-bg: #472327;
      --err-line: #8b434b;
      --warn-bg: #453719;
      --warn-line: #8d7340;
      --warn-text: #f2ddab;
      --row-hover: #1f3a4f;
      --row-open: #27465e;
      --shadow: 0 16px 36px rgba(0, 0, 0, 0.48);
    }


    html[data-skin="lagoon"][data-theme="light"] {
      --bg: #e8fbfb;
      --bg-accent:
        radial-gradient(780px 360px at 8% -16%, rgba(22, 190, 180, 0.2), transparent 62%),
        radial-gradient(920px 390px at 96% -24%, rgba(0, 138, 173, 0.14), transparent 64%);
      --surface: #ffffff;
      --surface-soft: #f1fdfd;
      --surface-soft-2: #e5f6f7;
      --text: #12353b;
      --muted: #557981;
      --line: #b9e0e4;
      --topbar-bg-1: #064b57;
      --topbar-bg-2: #0a8093;
      --topbar-text: #effcff;
      --topbar-link: #ccf0f7;
      --topbar-hover: #ffffff;
      --topbar-line: rgba(255, 255, 255, 0.2);
      --control-bg: #ffffff;
      --control-line: #9dcbd2;
      --control-text: #12353b;
      --button-bg: #0d97a9;
      --button-bg-hover: #0b8191;
      --button-line: #086a78;
      --button-text: #f4fdff;
      --focus: rgba(13, 151, 169, 0.3);
      --ok-bg: #e7f9f0;
      --ok-line: #b8e4cf;
      --err-bg: #fff0ef;
      --err-line: #f0c1bc;
      --warn-bg: #fff5df;
      --warn-line: #e7cd91;
      --warn-text: #6f5715;
      --row-hover: #dbf2f5;
      --row-open: #d1ecef;
      --shadow: 0 12px 32px rgba(7, 66, 77, 0.15);
    }

    html[data-skin="lagoon"][data-theme="dark"] {
      --bg: #051417;
      --bg-accent:
        radial-gradient(780px 360px at 8% -16%, rgba(0, 190, 184, 0.18), transparent 60%),
        radial-gradient(920px 400px at 96% -24%, rgba(0, 112, 153, 0.2), transparent 64%);
      --surface: #0d2328;
      --surface-soft: #143038;
      --surface-soft-2: #1a3b45;
      --text: #e9fbff;
      --muted: #9cc2c9;
      --line: #31555f;
      --topbar-bg-1: #041d24;
      --topbar-bg-2: #085367;
      --topbar-text: #effdff;
      --topbar-link: #c6edf6;
      --topbar-hover: #ffffff;
      --topbar-line: rgba(255, 255, 255, 0.18);
      --control-bg: #102b31;
      --control-line: #3b6973;
      --control-text: #ecfbff;
      --button-bg: #129db4;
      --button-bg-hover: #22b3ca;
      --button-line: #0f7c8f;
      --button-text: #f4fdff;
      --focus: rgba(34, 179, 202, 0.34);
      --ok-bg: #12352a;
      --ok-line: #2c684d;
      --err-bg: #472427;
      --err-line: #8a4347;
      --warn-bg: #47381b;
      --warn-line: #8d7540;
      --warn-text: #f0dda9;
      --row-hover: #1d3f46;
      --row-open: #25505a;
      --shadow: 0 16px 36px rgba(0, 0, 0, 0.46);
    }

    html[data-skin="reef"][data-theme="light"] {
  --bg: #fff8f3;
  --bg-accent:
    radial-gradient(800px 360px at 8% -16%, rgba(245, 161, 132, 0.2), transparent 62%),
    radial-gradient(920px 390px at 96% -24%, rgba(255, 208, 157, 0.16), transparent 64%);
  --surface: #ffffff;
  --surface-soft: #fffaf7;
  --surface-soft-2: #fff0e8;
  --text: #433032;
  --muted: #8b6a69;
  --line: #ead0c7;
  --topbar-bg-1: #7f4b4c;
  --topbar-bg-2: #d8897e;
  --topbar-text: #fffaf8;
  --topbar-link: #ffe8e0;
  --topbar-hover: #ffffff;
  --topbar-line: rgba(255, 255, 255, 0.2);
  --control-bg: #ffffff;
  --control-line: #ddc0b7;
  --control-text: #433032;
  --button-bg: #e78c7c;
  --button-bg-hover: #d97a6d;
  --button-line: #b05e58;
  --button-text: #fffaf8;
  --focus: rgba(231, 140, 124, 0.28);
  --ok-bg: #eef8f1;
  --ok-line: #c2dfc9;
  --err-bg: #fff1f0;
  --err-line: #efc4bc;
  --warn-bg: #fff4e8;
  --warn-line: #e7c69d;
  --warn-text: #7c5830;
  --row-hover: #f9ece6;
  --row-open: #f5e1d8;
  --shadow: 0 12px 32px rgba(127, 75, 76, 0.12);
}

    html[data-skin="reef"][data-theme="dark"] {
  --bg: #151011;
  --bg-accent:
    radial-gradient(800px 360px at 8% -16%, rgba(236, 145, 120, 0.18), transparent 60%),
    radial-gradient(920px 400px at 96% -24%, rgba(255, 201, 143, 0.14), transparent 64%);
  --surface: #211818;
  --surface-soft: #2a1f1f;
  --surface-soft-2: #342727;
  --text: #fff5f1;
  --muted: #d1b4ac;
  --line: #755a56;
  --topbar-bg-1: #221313;
  --topbar-bg-2: #8b514f;
  --topbar-text: #fff8f4;
  --topbar-link: #ffe5dc;
  --topbar-hover: #ffffff;
  --topbar-line: rgba(255, 255, 255, 0.16);
  --control-bg: #2a1d1d;
  --control-line: #87645f;
  --control-text: #fff5f1;
  --button-bg: #e38c79;
  --button-bg-hover: #f3a18f;
  --button-line: #bf6a5f;
  --button-text: #341716;
  --focus: rgba(243, 161, 143, 0.3);
  --ok-bg: #1b3025;
  --ok-line: #355643;
  --err-bg: #4d2421;
  --err-line: #96504a;
  --warn-bg: #4c341d;
  --warn-line: #9d7240;
  --warn-text: #f3ddba;
  --row-hover: #352726;
  --row-open: #433130;
  --shadow: 0 16px 36px rgba(0, 0, 0, 0.46);
}

    html[data-theme="light"] {
      --workspace-bg: #eef3fa;
      --workspace-bg-accent:
        radial-gradient(820px 360px at 10% -18%, rgba(68, 126, 201, 0.14), transparent 62%),
        radial-gradient(900px 380px at 94% -22%, rgba(93, 149, 219, 0.12), transparent 64%),
        linear-gradient(180deg, #f4f8fd 0%, #e9f1fb 100%);
    }

    html[data-theme="dark"] {
      --workspace-bg: #050b14;
      --workspace-bg-accent: linear-gradient(180deg, #050b14 0%, #07111f 100%);
    }
    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; }
    body {
      font-family: "Avenir Next", "Inter", "Segoe UI", "Sora", sans-serif;
      font-size: 15px;
      line-height: 1.42;
      color: var(--text);
      background-color: var(--workspace-bg);
      background-image: var(--workspace-bg-accent);
      background-attachment: fixed;
      min-height: 100vh;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    .topbar {
      background: linear-gradient(120deg, var(--topbar-bg-1) 0%, var(--topbar-bg-2) 100%);
      color: var(--topbar-text);
      min-height: 60px;
      padding: 0 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      border-bottom: 1px solid var(--topbar-line);
      box-shadow: 0 4px 14px rgba(13, 32, 67, 0.16);
      position: sticky;
      top: 0;
      z-index: 20;
    }
    .topbar-left {
      display: inline-flex;
      align-items: center;
      flex: 0 0 auto;
    }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 28px;
      font-weight: 700;
      letter-spacing: 0.15px;
      line-height: 1;
      color: var(--topbar-text);
      white-space: nowrap;
    }
    .brand-logo {
      width: 38px;
      height: 38px;
      object-fit: contain;
      flex: 0 0 auto;
      filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
    }
    .topbar-center {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 22px;
      flex: 1 1 auto;
      min-width: 0;
    }
    .topbar-search-form {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex: 0 0 auto;
      margin-left: auto;
      min-width: 0;
    }
    .topbar-search-box {
      display: flex;
      align-items: center;
      width: 42px;
      height: 38px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.22);
      background: rgba(255, 255, 255, 0.14);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
      overflow: hidden;
      transition: width .22s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
    }
    .topbar-search-form.is-open .topbar-search-box,
    .topbar-search-form:focus-within .topbar-search-box {
      width: clamp(220px, 24vw, 340px);
      border-color: rgba(255, 255, 255, 0.32);
      background: rgba(255, 255, 255, 0.16);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 0 3px rgba(255, 255, 255, 0.06);
    }
    .topbar-search-box input {
      flex: 1 1 auto;
      width: auto;
      min-width: 0;
      max-width: 0;
      height: 100%;
      border: none;
      outline: none;
      background: transparent;
      font-family: inherit;
      font-weight: 600;
      color: var(--topbar-text);
      padding: 0;
      font-size: 14px;
      line-height: 1;
      letter-spacing: 0.01em;
      box-shadow: none;
      opacity: 0;
      pointer-events: none;
      transition: max-width .22s ease, padding .22s ease, opacity .16s ease;
    }
    .topbar-search-form.is-open .topbar-search-box input,
    .topbar-search-form:focus-within .topbar-search-box input {
      max-width: 320px;
      padding: 0 14px 0 16px;
      opacity: 1;
      pointer-events: auto;
    }
    .topbar-search-box input::placeholder {
      color: color-mix(in srgb, var(--topbar-link) 72%, transparent);
    }
    .topbar-search-box input:focus {
      border: none;
      box-shadow: none;
    }
    .topbar-search-btn {
      width: 38px;
      height: 38px;
      min-width: 38px;
      border: none;
      border-left: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 0;
      background: transparent;
      color: var(--topbar-link);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: none;
      padding: 0;
      flex: 0 0 38px;
      flex-basis: 38px;
    }
    .topbar-search-btn:hover {
      color: var(--topbar-hover);
      background: rgba(255, 255, 255, 0.08);
    }
    .topbar-search-btn svg {
      width: 16px;
      height: 16px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .topbar-link {
      color: var(--topbar-link);
      text-decoration: none;
      font-weight: 600;
      font-size: 14px;
      line-height: 1;
      padding: 7px 2px;
      border-bottom: 2px solid transparent;
      transition: color .2s ease, border-color .2s ease, opacity .2s ease;
      white-space: nowrap;
      opacity: 0.92;
      position: relative;
    }
    .topbar-link.has-alert::after {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: #ff4f5f;
      box-shadow: 0 0 0 2px rgba(255, 79, 95, 0.2), 0 0 10px rgba(255, 79, 95, 0.55);
      display: inline-block;
      margin-left: 8px;
      vertical-align: middle;
      flex: 0 0 auto;
    }
    .topbar-link:hover {
      color: var(--topbar-hover);
      opacity: 1;
    }
    .topbar-link.active {
      color: var(--topbar-hover);
      border-bottom-color: rgba(255, 255, 255, 0.82);
      opacity: 1;
      font-weight: 700;
    }
    .topbar-link-icon,
    .topbar-menu-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      flex: 0 0 22px;
      color: currentColor;
    }
    .topbar-link-icon svg,
    .topbar-menu-icon svg {
      width: 100%;
      height: 100%;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.85;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .topbar-link-icon--slack {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 122.8 122.8'%3E%3Cpath fill='%2336C5F0' d='M25.8 77.6c0 7.1-5.8 12.9-12.9 12.9S0 84.7 0 77.6s5.8-12.9 12.9-12.9h12.9v12.9zm6.5 0c0-7.1 5.8-12.9 12.9-12.9s12.9 5.8 12.9 12.9v32.3c0 7.1-5.8 12.9-12.9 12.9s-12.9-5.8-12.9-12.9V77.6z'/%3E%3Cpath fill='%232EB67D' d='M45.2 25.8c-7.1 0-12.9-5.8-12.9-12.9S38.1 0 45.2 0s12.9 5.8 12.9 12.9v12.9H45.2zm0 6.5c7.1 0 12.9 5.8 12.9 12.9s-5.8 12.9-12.9 12.9H12.9C5.8 58.1 0 52.3 0 45.2s5.8-12.9 12.9-12.9h32.3z'/%3E%3Cpath fill='%23ECB22E' d='M97 45.2c0-7.1 5.8-12.9 12.9-12.9s12.9 5.8 12.9 12.9-5.8 12.9-12.9 12.9H97V45.2zm-6.5 0c0 7.1-5.8 12.9-12.9 12.9s-12.9-5.8-12.9-12.9V12.9C64.7 5.8 70.5 0 77.6 0s12.9 5.8 12.9 12.9v32.3z'/%3E%3Cpath fill='%23E01E5A' d='M77.6 97c7.1 0 12.9 5.8 12.9 12.9s-5.8 12.9-12.9 12.9-12.9-5.8-12.9-12.9V97h12.9zm0-6.5c-7.1 0-12.9-5.8-12.9-12.9s5.8-12.9 12.9-12.9h32.3c7.1 0 12.9 5.8 12.9 12.9s-5.8 12.9-12.9 12.9H77.6z'/%3E%3C/svg%3E");
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
    }
    .topbar-link-label {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .topbar-right {
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      flex: 0 0 auto;
    }
    .topbar-right:empty {
      display: none !important;
    }
    .app-global-actions {
      position: absolute;
      top: var(--page-actions-top);
      right: 24px;
      z-index: 170;
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      gap: 14px;
      pointer-events: auto;
    }
    .app-global-action-btn {
      width: 34px;
      min-width: 34px;
      height: 34px;
      min-height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      border: 0;
      border-radius: 999px;
      background: transparent;
      color: color-mix(in srgb, var(--text) 74%, var(--muted) 26%);
      box-shadow: none;
      filter: none;
      transition: color .16s ease, background-color .16s ease, transform .16s ease;
    }
    .app-global-action-btn:hover,
    .app-global-action-btn:focus-visible,
    .app-profile-menu.is-open .app-profile-toggle {
      outline: none;
      color: var(--text);
      background: color-mix(in srgb, var(--button-bg) 10%, transparent);
      transform: translateY(-1px);
      filter: none;
    }
    .app-global-action-btn svg {
      width: 22px;
      height: 22px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .app-header-search {
      position: relative;
      top: auto;
      right: auto;
      z-index: 2;
      width: 100%;
      min-width: 0;
      justify-self: end;
    }
    .app-header-search-box {
      position: relative;
      display: block;
      width: 100%;
      min-width: 0;
    }
    .app-header-search-box::after {
      content: "/";
      position: absolute;
      top: 50%;
      right: 9px;
      width: 24px;
      height: 24px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid color-mix(in srgb, var(--topbar-line) 70%, transparent);
      border-radius: 7px;
      background: color-mix(in srgb, var(--topbar-bg-1) 76%, transparent);
      color: color-mix(in srgb, var(--topbar-text) 58%, transparent);
      font-size: 11px;
      font-weight: 700;
      line-height: 1;
      pointer-events: none;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
      transform: translateY(-50%);
    }
    .app-header-search-box .app-header-search-input {
      width: 100%;
      min-width: 0;
      height: 36px;
      min-height: 36px;
      padding: 0 42px 0 38px;
      border: 1px solid color-mix(in srgb, var(--topbar-line) 70%, transparent);
      border-radius: 8px;
      outline: 0;
      background: color-mix(in srgb, var(--topbar-bg-1) 72%, var(--surface-soft) 28%);
      color: var(--topbar-text);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
      font-family: inherit;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0;
      line-height: 1;
      appearance: none;
      -webkit-appearance: none;
    }
    .app-header-search-box .app-header-search-input::placeholder {
      color: color-mix(in srgb, var(--topbar-text) 50%, transparent);
      opacity: 1;
    }
    .app-header-search-box .app-header-search-input:focus {
      border-color: color-mix(in srgb, var(--button-bg) 70%, var(--topbar-line) 30%);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 0 0 2px color-mix(in srgb, var(--button-bg) 16%, transparent);
    }
    .app-header-search-box .app-header-search-icon {
      position: absolute;
      top: 50%;
      left: 11px;
      right: auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      min-width: 18px;
      height: 18px;
      min-height: 18px;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: color-mix(in srgb, var(--topbar-text) 62%, var(--muted) 38%);
      box-shadow: none;
      transform: translateY(-50%);
    }
    .app-header-search-box .app-header-search-icon:hover,
    .app-header-search-box .app-header-search-icon:focus-visible {
      outline: none;
      color: var(--topbar-text);
      background: transparent;
    }
    .app-header-search-box .app-header-search-icon svg {
      width: 18px;
      height: 18px;
      display: block;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    @media (max-width: 1320px) {
      .app-header-search {
        position: relative;
        top: auto;
        right: auto;
        width: min(100%, 520px);
      }
    }
    body .app-header-search {
      position: absolute;
      top: 3px;
      right: 145px;
      width: min(520px, calc(100vw - 520px));
      z-index: 2;
      justify-self: end;
    }
    @media (max-width: 1320px) {
      body .app-header-search {
        position: relative;
        top: auto;
        right: auto;
        width: min(100%, 520px);
      }
    }
    .app-profile-menu {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .app-profile-popover {
      position: absolute;
      top: calc(100% + 12px);
      right: 0;
      width: 278px;
      padding: 12px;
      border: 1px solid color-mix(in srgb, var(--line) 78%, var(--button-line) 22%);
      border-radius: 14px;
      background:
        radial-gradient(circle at 16% 0%, color-mix(in srgb, var(--button-bg) 18%, transparent) 0%, transparent 42%),
        linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, var(--surface-soft) 8%), var(--surface-soft));
      color: var(--text);
      box-shadow: 0 18px 42px rgba(6, 18, 34, .34), inset 0 1px 0 color-mix(in srgb, #fff 7%, transparent);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }
    .app-profile-popover[hidden] {
      display: none;
    }
    .app-profile-head {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr);
      gap: 10px;
      align-items: center;
      padding-bottom: 10px;
      border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
    }
    .app-profile-avatar {
      width: 42px;
      height: 42px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
      border: 1px solid color-mix(in srgb, var(--button-line) 54%, var(--line) 46%);
      background: color-mix(in srgb, var(--button-bg) 16%, var(--surface-soft) 84%);
      color: var(--text);
      font-size: 20px;
      font-weight: 750;
      line-height: 1;
    }
    .app-profile-copy {
      min-width: 0;
      display: grid;
      gap: 3px;
    }
    .app-profile-name {
      min-width: 0;
      color: var(--text);
      font-size: 15px;
      font-weight: 750;
      line-height: 1.15;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .app-profile-role,
    .app-profile-label {
      color: color-mix(in srgb, var(--text) 56%, var(--muted) 44%);
      font-size: 11px;
      font-weight: 700;
      line-height: 1;
    }
    .app-profile-section {
      display: grid;
      gap: 8px;
      padding-top: 12px;
    }
    .app-theme-carousel,
    .app-theme-mode {
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr) 34px;
      align-items: center;
      gap: 8px;
    }
    .app-theme-current {
      height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      border: 1px solid color-mix(in srgb, var(--line) 76%, var(--button-line) 24%);
      background: color-mix(in srgb, var(--surface-soft) 72%, var(--control-bg) 28%);
      color: var(--text);
      font-size: 13px;
      font-weight: 750;
    }
    .app-theme-arrow,
    .app-theme-mode-btn {
      height: 34px;
      min-height: 34px;
      padding: 0;
      border-radius: 10px;
      border: 1px solid color-mix(in srgb, var(--line) 76%, var(--button-line) 24%);
      background: color-mix(in srgb, var(--surface-soft) 74%, var(--control-bg) 26%);
      color: color-mix(in srgb, var(--text) 82%, var(--muted) 18%);
      box-shadow: none;
      font-size: 16px;
      font-weight: 750;
      line-height: 1;
    }
    .app-theme-arrow:hover,
    .app-theme-arrow:focus-visible,
    .app-theme-mode-btn:hover,
    .app-theme-mode-btn:focus-visible {
      outline: none;
      filter: none;
      border-color: color-mix(in srgb, var(--button-line) 58%, var(--line) 42%);
      background: color-mix(in srgb, var(--button-bg) 14%, var(--surface-soft) 86%);
    }
    .app-theme-mode {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .app-theme-mode-btn {
      font-size: 12px;
    }
    .app-theme-mode-btn.is-active {
      border-color: color-mix(in srgb, var(--button-line) 72%, var(--line) 28%);
      background: linear-gradient(180deg, var(--button-bg), var(--button-bg-hover));
      color: var(--button-text);
    }
    .app-profile-links {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-top: 12px;
      padding-top: 10px;
      border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
    }
    .app-profile-links a {
      color: color-mix(in srgb, var(--text) 76%, var(--muted) 24%);
      font-size: 12px;
      font-weight: 700;
      text-decoration: none;
    }
    .app-profile-links a:hover,
    .app-profile-links a:focus-visible {
      color: var(--text);
      outline: none;
      text-decoration: none;
    }
    .user-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      height: 34px;
      padding: 0 11px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.22);
      background: rgba(255, 255, 255, 0.12);
      color: var(--topbar-text);
      font-weight: 600;
      font-size: 13px;
      white-space: nowrap;
    }
    .topbar-user-card {
      height: auto;
      min-height: 58px;
      padding: 10px 12px;
      gap: 12px;
      border-radius: 14px;
      justify-content: flex-start;
    }
    .topbar-user-avatar {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      border-radius: 999px;
      background:
        radial-gradient(circle at 32% 20%, rgba(255, 255, 255, 0.2), transparent 44%),
        linear-gradient(145deg, rgba(72, 134, 220, 0.45), rgba(17, 47, 88, 0.92));
      border: 1px solid color-mix(in srgb, var(--topbar-line) 80%, rgba(255, 255, 255, 0.16));
      color: var(--topbar-text);
      font-size: 22px;
      font-weight: 500;
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    }
    .topbar-user-status {
      position: absolute;
      right: 0;
      bottom: 1px;
      width: 12px;
      height: 12px;
      border-radius: 999px;
      background: #1f82ff;
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--topbar-bg-1) 86%, transparent);
    }
    .topbar-user-copy {
      display: grid;
      gap: 3px;
      min-width: 0;
      line-height: 1.1;
    }
    .topbar-user-name {
      color: var(--topbar-text);
      font-size: 14px;
      font-weight: 700;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .topbar-user-role {
      color: color-mix(in srgb, #5fa8ff 78%, var(--topbar-link) 22%);
      font-size: 12px;
      font-weight: 600;
    }
    .topbar-action {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      height: 34px;
      padding: 0 10px;
      border-radius: 8px;
      border: 1px solid transparent;
      color: var(--topbar-link);
      text-decoration: none;
      font-weight: 600;
      font-size: 13px;
      line-height: 1;
      transition: color .2s ease, background-color .2s ease, border-color .2s ease;
      white-space: nowrap;
    }
    .topbar-action:hover {
      color: var(--topbar-hover);
      background: rgba(255, 255, 255, 0.14);
      border-color: rgba(255, 255, 255, 0.16);
    }
    .topbar-action.active {
      color: var(--topbar-hover);
      background: rgba(255, 255, 255, 0.14);
      border-color: rgba(255, 255, 255, 0.18);
    }
    .topbar-action--logout {
      color: #ff6f7d;
    }
    .topbar-action--logout:hover {
      color: #ff8a94;
      border-color: rgba(255, 111, 125, 0.25);
      background: rgba(255, 111, 125, 0.1);
    }
    .topbar-action-arrow {
      margin-left: auto;
      font-size: 26px;
      line-height: 1;
      font-weight: 300;
      opacity: 0.95;
    }
    .topbar-skin-switch {
      position: relative;
      display: inline-flex;
      align-items: center;
      min-width: 0;
      white-space: nowrap;
    }
    .topbar-theme-picker-toggle {
      width: 100%;
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-width: 132px;
      height: 34px;
      padding: 0 12px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      background: rgba(255, 255, 255, 0.12);
      color: var(--topbar-text);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
      transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
    }
    .topbar-theme-picker-toggle:hover {
      border-color: rgba(255, 255, 255, 0.28);
      background: rgba(255, 255, 255, 0.18);
      transform: translateY(-1px);
    }
    .topbar-theme-picker.is-open .topbar-theme-picker-toggle {
      border-color: rgba(255, 255, 255, 0.32);
      background: rgba(255, 255, 255, 0.2);
    }
    .topbar-theme-picker-copy {
      display: inline-flex;
      align-items: flex-start;
      flex-direction: column;
      min-width: 0;
      gap: 1px;
      text-align: left;
    }
    .topbar-theme-picker-label {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      opacity: 0.72;
    }
    .topbar-theme-picker-current {
      min-width: 58px;
      text-align: left;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .2px;
      color: var(--topbar-hover);
    }
    .topbar-theme-picker-caret {
      width: 9px;
      height: 9px;
      border-right: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      transform: rotate(45deg) translateY(-1px);
      opacity: 0.8;
      flex: 0 0 auto;
      transition: transform .18s ease;
    }
    .topbar-theme-picker.is-open .topbar-theme-picker-caret {
      transform: rotate(225deg) translateY(-1px);
    }
    .topbar-theme-modal {
      position: absolute;
      top: calc(100% + 10px);
      right: 0;
      z-index: 60;
      width: min(328px, calc(100vw - 24px));
    }
    .topbar-theme-modal[hidden] {
      display: none;
    }
    .topbar-theme-modal-card {
      padding: 12px;
      border-radius: 18px;
      border: 1px solid color-mix(in srgb, var(--topbar-line) 74%, rgba(255, 255, 255, 0.18));
      background:
        radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--topbar-bg-2) 50%, transparent) 0%, transparent 48%),
        linear-gradient(180deg,
          color-mix(in srgb, var(--topbar-bg-1) 88%, #020b16 12%),
          color-mix(in srgb, var(--topbar-bg-2) 58%, #061426 42%)
        );
      color: var(--topbar-text);
      box-shadow:
        0 16px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(14px);
    }
    .topbar-theme-modal-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 10px;
    }
    .topbar-theme-modal-title {
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 0;
      color: var(--topbar-hover);
    }
    .topbar-theme-modal-note {
      margin-top: 3px;
      font-size: 11px;
      line-height: 1.35;
      color: color-mix(in srgb, var(--topbar-text) 72%, transparent);
    }
    .topbar-theme-modal-close {
      width: 28px;
      min-width: 28px;
      height: 28px;
      padding: 0;
      border-radius: 999px;
      border: 1px solid color-mix(in srgb, var(--topbar-line) 70%, rgba(255, 255, 255, 0.16));
      background: color-mix(in srgb, var(--topbar-bg-2) 44%, rgba(255, 255, 255, 0.08));
      color: var(--topbar-hover);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
      font-size: 18px;
      line-height: 1;
    }
    .topbar-theme-modal-close:hover {
      border-color: color-mix(in srgb, var(--topbar-link) 52%, rgba(255, 255, 255, 0.18));
      background: color-mix(in srgb, var(--topbar-link) 18%, rgba(255, 255, 255, 0.08));
    }
    .topbar-theme-modal-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }
    .theme-chip {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: 40px;
      padding: 8px 10px;
      border-radius: 12px;
      border: 1px solid color-mix(in srgb, var(--topbar-line) 68%, rgba(255, 255, 255, 0.12));
      background: color-mix(in srgb, var(--topbar-bg-2) 36%, rgba(255, 255, 255, 0.05));
      color: var(--topbar-text);
      box-shadow: none;
      text-align: left;
      transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
    }
    .theme-chip:hover {
      transform: translateY(-1px);
      border-color: color-mix(in srgb, var(--topbar-link) 48%, rgba(255, 255, 255, 0.18));
      background: color-mix(in srgb, var(--topbar-link) 16%, rgba(255, 255, 255, 0.07));
    }
    .theme-chip.active {
      border-color: rgba(46, 128, 255, 0.74);
      background:
        radial-gradient(circle at 12% 16%, rgba(80, 178, 255, 0.26) 0%, transparent 44%),
        linear-gradient(180deg, rgba(24, 73, 123, 0.84), rgba(14, 51, 94, 0.88));
      box-shadow:
        inset 3px 0 0 #24c7ff,
        inset 0 0 0 1px rgba(41, 136, 235, 0.44),
        0 0 14px rgba(31, 129, 235, 0.16);
    }
    .theme-chip-dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      flex: 0 0 auto;
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--topbar-text) 10%, transparent);
      background: linear-gradient(135deg, #4c83d3, #274c7f);
    }
    .theme-chip[data-skin="neo"] .theme-chip-dot {
      background: linear-gradient(135deg, #33a9ff, #5f57f0);
    }
    .theme-chip[data-skin="premium"] .theme-chip-dot {
      background: linear-gradient(135deg, #f0c26b, #7f5b1a);
    }
    .theme-chip[data-skin="fit"] .theme-chip-dot {
      background: linear-gradient(135deg, #a7d84d, #5e8f17);
    }
    .theme-chip[data-skin="ocean"] .theme-chip-dot {
      background: linear-gradient(135deg, #68c9d7, #0e5672);
    }
    .theme-chip[data-skin="lagoon"] .theme-chip-dot {
      background: linear-gradient(135deg, #63c8c1, #0f5b58);
    }
    .theme-chip[data-skin="reef"] .theme-chip-dot {
      background: linear-gradient(135deg, #f0a087, #8b514f);
    }
    .theme-chip-text {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.01em;
    }
    .topbar-theme-switch {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      height: 34px;
      padding: 0 10px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      background: rgba(255, 255, 255, 0.12);
      color: var(--topbar-text);
      user-select: none;
      white-space: nowrap;
    }
    .topbar-theme-switch input {
      position: absolute;
      opacity: 0;
      width: 1px;
      height: 1px;
      pointer-events: none;
    }
    .topbar-theme-switch .track {
      position: relative;
      width: 34px;
      height: 20px;
      border-radius: 999px;
      background: #7892b7;
      transition: background-color .2s ease;
      flex: 0 0 auto;
    }
    .topbar-theme-switch .thumb {
      position: absolute;
      left: 2px;
      top: 2px;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #ffffff;
      transition: transform .2s ease;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    }
    .topbar-theme-switch input:checked + .track {
      background: linear-gradient(180deg, var(--button-bg), var(--button-bg-hover));
    }
    .topbar-theme-switch input:checked + .track .thumb {
      transform: translateX(14px);
    }
    .topbar-theme-switch .theme-text {
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .15px;
    }
    .sidebar-edge-trigger {
      display: none;
    }
    .sidebar-page-scrim {
      display: none;
    }

    /* Sidebar navigation layout for 4 showcase skins */
    html[data-skin="fintech"] .topbar,
    html[data-skin="neo"] .topbar,
    html[data-skin="premium"] .topbar,
    :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar {
      position: fixed;
      left: 0;
      top: 0;
      bottom: 0;
      width: 252px;
      min-height: 100vh;
      padding: 16px 12px;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      gap: 10px;
      border-right: 1px solid var(--topbar-line);
      border-bottom: none;
      z-index: 180;
    }
    html[data-skin="fintech"] .topbar-left,
    html[data-skin="neo"] .topbar-left,
    html[data-skin="premium"] .topbar-left,
    :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-left {
      width: 100%;
      margin-bottom: 4px;
    }
    html[data-skin="fintech"] .brand,
    html[data-skin="neo"] .brand,
    html[data-skin="premium"] .brand,
    :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .brand {
      font-size: 30px;
      line-height: 1;
      padding: 8px 6px;
    }
    html[data-skin="fintech"] .topbar-center,
    html[data-skin="neo"] .topbar-center,
    html[data-skin="premium"] .topbar-center,
    :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-center {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      gap: 8px;
      flex: 0 1 auto;
      min-height: 0;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 4px 2px;
    }
    html[data-skin="fintech"] .topbar-link,
    html[data-skin="neo"] .topbar-link,
    html[data-skin="premium"] .topbar-link,
    :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-link {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      min-height: 48px;
      padding: 11px 14px;
      border: 1px solid transparent;
      border-radius: 14px;
      border-bottom: 1px solid transparent;
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 0;
    }
    html[data-skin="fintech"] .topbar-link.active,
    html[data-skin="neo"] .topbar-link.active,
    html[data-skin="premium"] .topbar-link.active,
    :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-link.active {
      color: #ffffff;
      border-color: rgba(46, 128, 255, 0.86);
      background:
        radial-gradient(circle at 12% 18%, rgba(79, 178, 255, 0.3) 0%, transparent 42%),
        linear-gradient(180deg, rgba(24, 73, 123, 0.92) 0%, rgba(14, 51, 94, 0.94) 100%);
      box-shadow:
        inset 4px 0 0 #24c7ff,
        inset 0 0 0 1px rgba(41, 136, 235, 0.62),
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 0 18px rgba(31, 129, 235, 0.22);
      text-shadow: 0 1px 1px rgba(0, 14, 31, 0.24);
    }
    html[data-skin="fintech"] .topbar-right,
    html[data-skin="neo"] .topbar-right,
    html[data-skin="premium"] .topbar-right,
    :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-right {
      width: 100%;
      margin-top: auto;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-end;
      gap: 10px;
      padding: 12px 2px 0;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    html[data-skin="fintech"] .topbar-skin-switch,
    html[data-skin="neo"] .topbar-skin-switch,
    html[data-skin="premium"] .topbar-skin-switch,
    :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-skin-switch,
    html[data-skin="fintech"] .topbar-theme-picker,
    html[data-skin="neo"] .topbar-theme-picker,
    html[data-skin="premium"] .topbar-theme-picker,
    :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-theme-picker {
      overflow: visible;
    }
    html[data-skin="fintech"] .topbar-theme-picker.is-open,
    html[data-skin="neo"] .topbar-theme-picker.is-open,
    html[data-skin="premium"] .topbar-theme-picker.is-open,
    :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-theme-picker.is-open {
      z-index: 120;
    }
    html[data-skin="fintech"] .topbar-theme-modal,
    html[data-skin="neo"] .topbar-theme-modal,
    html[data-skin="premium"] .topbar-theme-modal,
    :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-theme-modal {
      top: auto;
      bottom: calc(100% + 10px);
      left: 0;
      right: auto;
      width: min(306px, calc(100vw - 20px));
      z-index: 260;
    }
    html[data-skin="fintech"] .topbar-search-form,
    html[data-skin="neo"] .topbar-search-form,
    html[data-skin="premium"] .topbar-search-form,
    :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-search-form {
      width: 100%;
      margin: 12px 0 2px;
      justify-content: flex-start;
      align-self: stretch;
    }
    html[data-skin="fintech"] .topbar-search-box,
    html[data-skin="neo"] .topbar-search-box,
    html[data-skin="premium"] .topbar-search-box,
    :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-search-box {
      margin: 0 auto;
    }
    html[data-skin="fintech"] .topbar-search-form:not(.is-open):not(:focus-within) .topbar-search-box,
    html[data-skin="neo"] .topbar-search-form:not(.is-open):not(:focus-within) .topbar-search-box,
    html[data-skin="premium"] .topbar-search-form:not(.is-open):not(:focus-within) .topbar-search-box,
    :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-search-form:not(.is-open):not(:focus-within) .topbar-search-box {
      width: 52px;
      height: 52px;
      border-radius: 999px;
      border-color: color-mix(in srgb, var(--topbar-line) 78%, rgba(255, 255, 255, 0.12));
      background: rgba(255, 255, 255, 0.14);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 6px 16px rgba(0, 0, 0, 0.12);
    }
    html[data-skin="fintech"] .topbar-search-form.is-open .topbar-search-box,
    html[data-skin="neo"] .topbar-search-form.is-open .topbar-search-box,
    html[data-skin="premium"] .topbar-search-form.is-open .topbar-search-box,
    :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-search-form.is-open .topbar-search-box,
    html[data-skin="fintech"] .topbar-search-form:focus-within .topbar-search-box,
    html[data-skin="neo"] .topbar-search-form:focus-within .topbar-search-box,
    html[data-skin="premium"] .topbar-search-form:focus-within .topbar-search-box,
    :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-search-form:focus-within .topbar-search-box {
      width: 100%;
      height: 46px;
      border-radius: 17px;
      border-color: color-mix(in srgb, var(--topbar-line) 82%, rgba(255, 255, 255, 0.18));
      background: rgba(255, 255, 255, 0.13);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 10px 26px rgba(0, 0, 0, 0.14);
    }
    html[data-skin="fintech"] .topbar-search-form.is-open .topbar-search-box input,
    html[data-skin="neo"] .topbar-search-form.is-open .topbar-search-box input,
    html[data-skin="premium"] .topbar-search-form.is-open .topbar-search-box input,
    :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-search-form.is-open .topbar-search-box input,
    html[data-skin="fintech"] .topbar-search-form:focus-within .topbar-search-box input,
    html[data-skin="neo"] .topbar-search-form:focus-within .topbar-search-box input,
    html[data-skin="premium"] .topbar-search-form:focus-within .topbar-search-box input,
    :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-search-form:focus-within .topbar-search-box input {
      max-width: none;
      font-size: 13px;
      letter-spacing: 0.01em;
      padding-left: 16px;
      padding-right: 12px;
    }
    html[data-skin="fintech"] .topbar-search-form.is-open .topbar-search-btn,
    html[data-skin="neo"] .topbar-search-form.is-open .topbar-search-btn,
    html[data-skin="premium"] .topbar-search-form.is-open .topbar-search-btn,
    :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-search-form.is-open .topbar-search-btn,
    html[data-skin="fintech"] .topbar-search-form:focus-within .topbar-search-btn,
    html[data-skin="neo"] .topbar-search-form:focus-within .topbar-search-btn,
    html[data-skin="premium"] .topbar-search-form:focus-within .topbar-search-btn,
    :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-search-form:focus-within .topbar-search-btn {
      width: 44px;
      min-width: 44px;
      height: 46px;
      flex-basis: 44px;
    }
    html[data-skin="fintech"] .topbar-search-form.is-open .topbar-search-btn,
    html[data-skin="neo"] .topbar-search-form.is-open .topbar-search-btn,
    html[data-skin="premium"] .topbar-search-form.is-open .topbar-search-btn,
    :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-search-form.is-open .topbar-search-btn,
    html[data-skin="fintech"] .topbar-search-form:focus-within .topbar-search-btn,
    html[data-skin="neo"] .topbar-search-form:focus-within .topbar-search-btn,
    html[data-skin="premium"] .topbar-search-form:focus-within .topbar-search-btn,
    :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-search-form:focus-within .topbar-search-btn {
      border-left: 1px solid color-mix(in srgb, var(--topbar-line) 82%, rgba(255, 255, 255, 0.16));
      border-top-right-radius: 17px;
      border-bottom-right-radius: 17px;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      background: rgba(255, 255, 255, 0.06);
    }
    html[data-skin="fintech"] .topbar-search-form:not(.is-open):not(:focus-within) .topbar-search-btn,
    html[data-skin="neo"] .topbar-search-form:not(.is-open):not(:focus-within) .topbar-search-btn,
    html[data-skin="premium"] .topbar-search-form:not(.is-open):not(:focus-within) .topbar-search-btn,
    :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-search-form:not(.is-open):not(:focus-within) .topbar-search-btn {
      width: 52px;
      min-width: 52px;
      height: 52px;
      flex-basis: 52px;
      border-left: none;
    }
    html[data-skin="fintech"] .user-pill,
    html[data-skin="neo"] .user-pill,
    html[data-skin="premium"] .user-pill,
    :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .user-pill,
    html[data-skin="fintech"] .topbar-action,
    html[data-skin="neo"] .topbar-action,
    html[data-skin="premium"] .topbar-action,
    :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-action,
    html[data-skin="fintech"] .topbar-theme-switch,
    html[data-skin="neo"] .topbar-theme-switch,
    html[data-skin="premium"] .topbar-theme-switch,
    :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-theme-switch,
    html[data-skin="fintech"] .topbar-skin-switch,
    html[data-skin="neo"] .topbar-skin-switch,
    html[data-skin="premium"] .topbar-skin-switch,
    :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-skin-switch {
      width: 100%;
      justify-content: center;
      min-width: 0;
    }
    :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-user-card {
      justify-content: flex-start;
      background: transparent;
      border-color: transparent;
      border-radius: 0;
      padding: 12px 10px 14px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-theme-picker-toggle,
    :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-theme-switch,
    :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-action {
      width: 100%;
      min-width: 0;
      min-height: 42px;
      height: 42px;
      justify-content: flex-start;
      gap: 11px;
      padding: 0 12px;
      border-radius: 14px;
      border-color: transparent;
      background: transparent;
      box-shadow: none;
      font-size: 14px;
      font-weight: 600;
    }
    :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-theme-picker-toggle:hover,
    :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-theme-switch:hover,
    :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-action:hover,
    :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-action.active {
      background: rgba(255, 255, 255, 0.1);
      border-color: rgba(255, 255, 255, 0.13);
    }
    :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-theme-picker-copy {
      display: flex;
      align-items: center;
      flex: 1 1 auto;
      flex-direction: row;
      gap: 10px;
      min-width: 0;
    }
    :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-theme-picker-label,
    :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-theme-picker-current {
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 0;
    }
    :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-theme-picker-label {
      text-transform: none;
      opacity: 0.92;
    }
    :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-theme-picker-current {
      min-width: 0;
      margin-left: auto;
      text-align: right;
      color: var(--topbar-text);
    }
    :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-theme-picker-caret,
    :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-theme-switch .track {
      margin-left: auto;
    }
    :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-menu-icon {
      color: color-mix(in srgb, var(--topbar-link) 86%, #ffffff 14%);
    }
    :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-action--logout .topbar-menu-icon,
    :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-action--logout .topbar-action-arrow {
      color: #ff6674;
    }
    html[data-skin="fintech"] .container,
    html[data-skin="neo"] .container,
    html[data-skin="premium"] .container,
    :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .container {
      margin-left: 252px;
      padding: var(--page-top-padding) 10px 24px;
      max-width: none;
      width: calc(100% - 252px);
    }

    .container {
      padding: 16px 10px 22px;
      max-width: none;
      width: 100%;
      margin: 0;
      min-height: 100vh;
      background: var(--workspace-bg);
    }
    .psp-main-content {
      position: relative;
      min-height: calc(100vh - 48px);
      background: var(--workspace-bg);
      outline: none;
    }
    .psp-main-content-inner {
      transition: opacity .14s ease, filter .18s ease;
      will-change: opacity, filter;
    }
    .psp-main-content.is-loading .psp-main-content-inner {
      opacity: .48;
      filter: blur(14px) saturate(.52) brightness(.74);
      transform: none;
      pointer-events: none;
      user-select: none;
    }
    .psp-main-content.is-maintenance-active .psp-main-content-inner {
      opacity: .36;
      filter: blur(7px) saturate(.72);
      transform: none;
      pointer-events: none;
      user-select: none;
    }
    .psp-maintenance-overlay {
      position: absolute;
      inset: 0;
      z-index: 70;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: min(520px, calc(100vh - 96px));
      padding: 32px;
      background: radial-gradient(circle at center, rgba(11, 29, 51, .34), rgba(7, 20, 37, .08) 48%, transparent 76%);
      pointer-events: auto;
    }
    .psp-maintenance-card {
      width: min(520px, 100%);
      display: grid;
      justify-items: center;
      gap: 14px;
      padding: 34px 36px 36px;
      border: 1px solid color-mix(in srgb, #ffb84d 56%, var(--line) 44%);
      border-radius: 16px;
      background:
        linear-gradient(180deg, color-mix(in srgb, var(--surface) 90%, #ffb84d 10%), var(--surface));
      box-shadow: 0 28px 84px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
      text-align: center;
    }
    .psp-maintenance-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 30px;
      padding: 0 12px;
      border-radius: 999px;
      border: 1px solid color-mix(in srgb, #ffb84d 56%, var(--line) 44%);
      background: color-mix(in srgb, #ffb84d 14%, var(--surface) 86%);
      color: #f5c66d;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0;
    }
    .psp-maintenance-card h2 {
      margin: 0;
      color: var(--text);
      font-size: 34px;
      line-height: 1.1;
      letter-spacing: 0;
    }
    .psp-maintenance-card p {
      margin: 0;
      color: color-mix(in srgb, var(--text) 78%, var(--muted) 22%);
      font-size: 16px;
      font-weight: 700;
      line-height: 1.35;
    }
    .psp-maintenance-path {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 28px;
      padding: 0 12px;
      border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
      border-radius: 999px;
      color: #7fb6ff;
      background: rgba(4, 17, 31, .24);
      font-size: 12px;
      font-weight: 800;
      line-height: 1;
    }
    .psp-main-loader {
      position: fixed;
      top: var(--psp-main-loader-viewport-top, 0px);
      right: 0;
      bottom: 0;
      left: var(--psp-main-loader-left, 0px);
      width: auto;
      min-width: 0;
      z-index: 170;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: max(320px, calc(100vh - var(--psp-main-loader-viewport-top, 0px)));
      background:
        radial-gradient(circle at center, rgba(18, 42, 74, .24), rgba(2, 6, 12, .12) 44%, rgba(2, 6, 12, .04) 72%),
        rgba(2, 6, 12, .12);
      backdrop-filter: blur(24px) saturate(.7);
      -webkit-backdrop-filter: blur(24px) saturate(.7);
      pointer-events: auto;
    }
    .psp-main-loader[hidden] {
      display: none;
    }
    .psp-main-loader-spinner {
      width: 46px;
      height: 46px;
      border-radius: 999px;
      border: 3px solid rgba(45, 145, 255, .24);
      border-top-color: #2d91ff;
      box-shadow: 0 0 0 1px rgba(73, 167, 255, .12), 0 18px 52px rgba(45, 145, 255, .26);
      animation: pspMainLoaderSpin .8s linear infinite;
    }
    @keyframes pspMainLoaderSpin {
      to { transform: rotate(360deg); }
    }
    .title {
      margin: 0 0 14px;
      font-weight: 700;
      letter-spacing: .1px;
    }
    body :is(
      h1.title,
      .requests-page-title-text,
      .newreq-page-title,
      .payouts-page-title,
      .statistics-page-title,
      .botmon-page-title,
      .conversion-page-title,
      .settings-page-title
    ) {
      font-size: 28px;
      font-weight: 700;
      line-height: 1;
      letter-spacing: 0;
    }
    .psp-main-content-inner > h1.title {
      display: inline-flex;
      align-items: center;
      min-height: 42px;
      margin-bottom: var(--page-header-bottom-gap);
    }
    .card {
      background: linear-gradient(180deg, var(--surface), var(--surface-soft));
      border-radius: var(--radius);
      padding: 16px;
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
    }
    .row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
    b, strong { font-weight: 600; }

    input, select, button {
      height: 38px;
      padding: 8px 12px;
      border: 1px solid var(--control-line);
      border-radius: 10px;
      background: var(--control-bg);
      color: var(--control-text);
      font-size: 14px;
    }
    input::placeholder { color: var(--muted); }
    input:focus, select:focus {
      outline: none;
      border-color: #60a5fa;
      box-shadow: 0 0 0 3px var(--focus);
    }
    button {
      cursor: pointer;
      border-color: var(--button-line);
      background: linear-gradient(180deg, var(--button-bg), var(--button-bg-hover));
      color: var(--button-text);
      font-weight: 600;
      transition: transform .08s ease, filter .2s ease;
    }
    button:hover { filter: brightness(1.03); }
    button:active { transform: translateY(1px); }

    .table-wrap {
      margin-top: 12px;
      overflow-x: auto;
      border-radius: var(--radius);
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
      background: var(--surface);
    }
    table {
      width: 100%;
      border-collapse: collapse;
      background: var(--surface);
    }
    .table-wrap table { min-width: 1040px; }
    th, td {
      padding: 11px 9px;
      border-bottom: 1px solid var(--line);
      vertical-align: middle;
    }
    th {
      background: var(--surface-soft-2);
      text-align: left;
      font-weight: 600;
      font-size: 14px;
      letter-spacing: .2px;
      position: sticky;
      top: 0;
      z-index: 1;
    }
    tbody tr:nth-child(even) { background: var(--surface-soft); }
    tbody tr:hover { background: var(--surface-soft-2); }

    .small { font-size: 12px; color: var(--muted); }
    .app-toast-stack {
      position: sticky;
      top: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      width: min(880px, calc(100% - 24px));
      margin: 0 auto;
      height: 0;
      overflow: visible;
      z-index: 140;
      pointer-events: none;
    }
    .app-toast {
      width: 100%;
      padding: 14px 18px;
      border-radius: 18px;
      border: 1px solid var(--line);
      background: var(--surface);
      color: var(--text);
      font-size: 15px;
      font-weight: 600;
      line-height: 1.35;
      box-shadow: 0 10px 22px rgba(10, 30, 54, 0.16);
      opacity: 0;
      transform: translateY(-8px);
      transition: opacity .18s ease, transform .18s ease;
    }
    .app-toast.show {
      opacity: 1;
      transform: translateY(0);
    }
    .app-toast.is-ok {
      background: var(--ok-bg);
      border-color: var(--ok-line);
    }
    .app-toast.is-warn {
      background: var(--warn-bg);
      border-color: var(--warn-line);
      color: var(--warn-text);
    }
    .app-toast.is-error {
      background: var(--err-bg);
      border-color: var(--err-line);
    }
    .app-toast-stack {
      position: fixed;
      top: 18px;
      left: auto;
      right: 22px;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 8px;
      width: min(360px, calc(100vw - 28px));
      margin: 0;
      height: auto;
      overflow: visible;
      z-index: 260;
      pointer-events: none;
      transform: none;
    }
    .app-toast {
      --toast-accent: var(--button-bg);
      position: relative;
      box-sizing: border-box;
      width: 100%;
      min-height: 58px;
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr) 24px;
      align-items: center;
      gap: 10px;
      padding: 10px 12px 14px;
      border-radius: 12px;
      border: 1px solid color-mix(in srgb, var(--toast-accent) 38%, var(--line) 62%);
      background:
        linear-gradient(180deg, color-mix(in srgb, var(--toast-accent) 7%, transparent), transparent),
        color-mix(in srgb, var(--surface) 94%, var(--surface-soft) 6%);
      color: var(--text);
      font-size: 13px;
      font-weight: 600;
      line-height: 1.25;
      box-shadow: 0 12px 28px rgba(7, 20, 36, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      opacity: 0;
      transform: translateY(-6px) scale(0.99);
      transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease;
      overflow: hidden;
      pointer-events: auto;
    }
    .app-toast::before {
      content: "i";
      grid-column: 1;
      align-self: center;
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border-radius: 9px;
      border: 1px solid color-mix(in srgb, var(--toast-accent) 22%, rgba(255, 255, 255, 0.12) 78%);
      background: color-mix(in srgb, var(--toast-accent) 10%, rgba(255, 255, 255, 0.08) 90%);
      color: var(--toast-accent);
      font-size: 18px;
      font-weight: 700;
      line-height: 1;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }
    .app-toast::after {
      content: "";
      position: absolute;
      left: 0;
      top: 10px;
      bottom: 10px;
      width: 3px;
      border-radius: 999px;
      background: var(--toast-accent);
      opacity: 0.95;
      box-shadow: 0 0 18px rgba(255, 255, 255, 0.12);
      pointer-events: none;
    }
    .app-toast.show {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
    .app-toast.is-ok {
      --toast-accent: #46c778;
      border-color: var(--ok-line);
    }
    .app-toast.is-ok::before {
      content: "\2713";
      background: rgba(70, 199, 120, 0.14);
    }
    .app-toast.is-warn {
      --toast-accent: #f0b44a;
      border-color: var(--warn-line);
      color: var(--text);
    }
    .app-toast.is-warn::before {
      content: "!";
      background: rgba(240, 180, 74, 0.16);
    }
    .app-toast.is-error {
      --toast-accent: #ff6b76;
      border-color: var(--err-line);
    }
    .app-toast.is-error::before {
      content: "\00D7";
      background: rgba(255, 107, 118, 0.16);
    }
    .app-toast-body {
      grid-column: 2;
      min-width: 0;
      min-height: 34px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: 2px;
    }
    .app-toast-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0;
      text-transform: none;
      color: color-mix(in srgb, var(--toast-accent) 82%, var(--text) 18%);
      opacity: 1;
      line-height: 1.1;
    }
    .app-toast-message {
      min-width: 0;
      font-size: 13px;
      font-weight: 600;
      line-height: 1.2;
      letter-spacing: 0;
      color: var(--text);
      white-space: pre-line;
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    .app-toast-message:empty {
      display: none;
    }
    .app-toast-close {
      grid-column: 3;
      align-self: start;
      justify-self: end;
      width: 24px;
      height: 24px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 0;
      border-radius: 999px;
      background: transparent;
      color: color-mix(in srgb, var(--text) 84%, transparent);
      font: inherit;
      font-size: 18px;
      font-weight: 300;
      line-height: 1;
      cursor: pointer;
      pointer-events: auto;
    }
    .app-toast-close:hover {
      color: var(--text);
      background: color-mix(in srgb, var(--toast-accent) 12%, transparent);
    }
    .app-toast-progress {
      position: absolute;
      left: 56px;
      right: 36px;
      bottom: 7px;
      height: 2px;
      overflow: hidden;
      border-radius: 999px;
      background: color-mix(in srgb, var(--toast-accent) 18%, var(--line) 82%);
    }
    .app-toast-progress span {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: inherit;
      background: var(--toast-accent);
      transform-origin: left center;
    }
    .app-toast.show .app-toast-progress span {
      animation: app-toast-progress var(--toast-life, 4200ms) linear forwards;
    }
    @keyframes app-toast-progress {
      from { transform: scaleX(1); }
      to { transform: scaleX(0); }
    }

.mono {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    }
    .nowrap { white-space: nowrap; }
    .copy-txid-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      min-width: 34px;
      padding: 0;
      border-radius: 12px;
      border: 1px solid #cfd8e8;
      background: #ffffff;
      color: #34435f;
      cursor: pointer;
      transition: border-color .2s ease, background-color .2s ease, transform .08s ease;
    }
    .copy-txid-btn:hover {
      border-color: #9eb6d7;
      background: #f5f9ff;
    }
    .copy-txid-btn:active {
      transform: translateY(1px);
    }
    .copy-txid-btn .copy-icon {
      width: 21px;
      height: 21px;
      display: block;
      background-image: var(--copy-icon-url);
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      pointer-events: none;
    }
    .copy-txid-btn.copied {
      border-color: #8ec8a1;
      background: #e8f7ee;
    }
    .copy-txid-btn.error {
      border-color: #e0a1a1;
      background: #ffecec;
    }
    .th-with-sort {
      position: relative;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
    }
    .sort-header-cell {
      position: relative;
      padding-left: 8px !important;
      padding-right: 8px !important;
    }
    .sort-chip {
      position: relative;
      z-index: 1;
      width: 24px;
      height: 24px;
      min-width: 24px;
      padding: 0;
      border: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
      border-radius: 999px;
      background: color-mix(in srgb, var(--surface-soft) 92%, var(--surface) 8%);
      box-shadow: none;
      cursor: pointer;
      appearance: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      vertical-align: middle;
      isolation: isolate;
      touch-action: manipulation;
    }
    .sort-chip::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 0;
      height: 0;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-top: 6px solid color-mix(in srgb, var(--text) 68%, transparent);
      transform: translate(-50%, -35%);
      transition: transform .15s ease, border-top-color .15s ease, opacity .15s ease;
      opacity: .84;
      pointer-events: none;
    }
    .sort-chip[data-order="asc"]::before {
      transform: translate(-50%, -65%) rotate(180deg);
    }
    .sort-chip.active,
    .sort-chip:hover,
    .sort-chip:focus-visible {
      border-color: color-mix(in srgb, var(--accent) 48%, var(--line) 52%);
      background: color-mix(in srgb, var(--accent) 10%, var(--surface) 90%);
    }
    .sort-chip.active::before,
    .sort-chip:hover::before,
    .sort-chip:focus-visible::before {
      border-top-color: var(--text);
      opacity: 1;
    }
    .sort-chip:focus-visible {
      outline: 2px solid color-mix(in srgb, var(--accent) 38%, transparent);
      outline-offset: 2px;
    }

    html[data-theme="dark"] .details-cell { background: var(--surface-soft) !important; }
    html[data-theme="dark"] .details-wrap { border-top-color: var(--line) !important; }
    html[data-theme="dark"] .details-item {
      background: var(--surface-soft) !important;
      border-color: var(--line) !important;
    }
    html[data-theme="dark"] .details-item .label { color: var(--muted) !important; }
    html[data-theme="dark"] .details-item .value { color: var(--text) !important; }
    html[data-theme="dark"] .request-main:hover td { background: var(--row-hover) !important; }
    html[data-theme="dark"] .request-main.open td { background: var(--row-open) !important; }
    html[data-theme="dark"] .sort-chip {
      border-color: var(--line) !important;
      background: var(--surface-soft) !important;
      box-shadow: none !important;
    }
    html[data-theme="dark"] .sort-chip::before { border-top-color: #b0c2da !important; }
    html[data-theme="dark"] .sort-chip.active::before { border-top-color: #edf3ff !important; }
    html[data-theme="dark"] .copy-txid-btn {
      border-color: #4c6e96 !important;
      background: #1a304b !important;
      color: var(--text) !important;
    }
    html[data-theme="dark"] .copy-txid-btn:hover {
      border-color: #6f97c7 !important;
      background: #23415f !important;
    }
    html[data-theme="dark"] .copy-txid-btn .copy-icon {
      filter: drop-shadow(0 0 1px rgba(143, 210, 255, 0.7));
    }
    html[data-theme="dark"] .copy-txid-btn.copied {
      border-color: #4e8264 !important;
      background: #1a3a2a !important;
    }
    html[data-theme="dark"] .copy-txid-btn.error {
      border-color: #7b4e57 !important;
      background: #45262d !important;
    }
    html[data-theme="dark"] .status-summary-item {
      background: var(--surface-soft) !important;
      border-color: var(--line) !important;
    }
    html[data-theme="dark"] .status-summary-item .label { color: var(--muted) !important; }
    html[data-theme="dark"] .status-summary-item .value { color: var(--text) !important; }

    @media (max-width: 720px) {
      .app-toast-stack {
        top: 10px;
        left: 8px;
        right: 8px;
        width: auto;
      }
      .app-toast {
        min-height: 56px;
        grid-template-columns: 32px minmax(0, 1fr) 24px;
        padding: 10px 10px 14px;
        border-radius: 12px;
      }
      .app-toast::before {
        width: 32px;
        height: 32px;
        border-radius: 9px;
        font-size: 17px;
      }
      .app-toast-body {
        min-height: 32px;
      }
      .app-toast-label {
        font-size: 11px;
      }
      .app-toast-message {
        font-size: 13px;
      }
      .app-toast-close {
        width: 28px;
        height: 28px;
        font-size: 22px;
      }
      .app-toast-progress {
        left: 52px;
        right: 34px;
        bottom: 7px;
      }
    }

    html[data-skin="premium"][data-theme="dark"] .card {
      box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.52),
        inset 0 0 0 1px rgba(216, 171, 79, 0.08);
    }
    html[data-skin="premium"][data-theme="dark"] .table-wrap {
      box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.56),
        inset 0 0 0 1px rgba(216, 171, 79, 0.07);
    }
    html[data-skin="premium"][data-theme="dark"] button {
      box-shadow:
        0 8px 16px rgba(155, 113, 31, 0.28),
        inset 0 1px 0 rgba(255, 236, 194, 0.22);
    }
    html[data-skin="premium"][data-theme="dark"] .topbar-link:hover,
    html[data-skin="premium"][data-theme="dark"] .topbar-action:hover,
    html[data-skin="premium"][data-theme="dark"] .topbar-action.active {
      background: rgba(216, 171, 79, 0.18);
    }
    html[data-skin="premium"][data-theme="dark"] .user-pill {
      border-color: rgba(216, 171, 79, 0.34);
      background: rgba(216, 171, 79, 0.12);
    }
    html[data-skin="premium"][data-theme="dark"] .topbar-skin-switch {
      border: none;
      background: transparent;
    }
    html[data-skin="premium"][data-theme="dark"] .topbar-skin-switch .topbar-skin-arrow {
      border: none;
      background: transparent;
    }
    html[data-skin="premium"][data-theme="dark"] .topbar-theme-switch {
      border-color: rgba(216, 171, 79, 0.34);
      background: rgba(216, 171, 79, 0.12);
    }

    @media (max-width: 1200px) {
      html[data-skin="fintech"] .topbar,
      html[data-skin="neo"] .topbar,
      html[data-skin="premium"] .topbar,
      :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar {
        position: sticky;
        width: 100%;
        min-height: auto;
        padding: 10px 12px;
        flex-wrap: wrap;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        border-right: none;
        border-bottom: 1px solid var(--topbar-line);
      }
      html[data-skin="fintech"] .topbar-center,
      html[data-skin="neo"] .topbar-center,
      html[data-skin="premium"] .topbar-center,
      :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-center {
        order: 3;
        width: 100%;
        flex-direction: row;
        justify-content: flex-start;
        gap: 16px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 4px 0 2px;
      }
      html[data-skin="fintech"] .topbar-link,
      html[data-skin="neo"] .topbar-link,
      html[data-skin="premium"] .topbar-link,
      :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-link {
        width: auto;
        min-height: 0;
        padding: 7px 2px;
        border-radius: 0;
        border: none;
        border-bottom: 2px solid transparent;
      }
      html[data-skin="fintech"] .topbar-link.active,
      html[data-skin="neo"] .topbar-link.active,
      html[data-skin="premium"] .topbar-link.active,
      :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-link.active {
        background: transparent;
        border: none;
        border-bottom: 2px solid rgba(255, 255, 255, 0.82);
        box-shadow: none;
      }
      html[data-skin="fintech"] .topbar-right,
      html[data-skin="neo"] .topbar-right,
      html[data-skin="premium"] .topbar-right,
      :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-right {
        width: auto;
        margin-top: 0;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        padding: 0;
      }
      html[data-skin="fintech"] .user-pill,
      html[data-skin="neo"] .user-pill,
      html[data-skin="premium"] .user-pill,
      :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .user-pill,
      html[data-skin="fintech"] .topbar-action,
      html[data-skin="neo"] .topbar-action,
      html[data-skin="premium"] .topbar-action,
      :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-action,
      html[data-skin="fintech"] .topbar-theme-switch,
      html[data-skin="neo"] .topbar-theme-switch,
      html[data-skin="premium"] .topbar-theme-switch,
      :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-theme-switch,
      html[data-skin="fintech"] .topbar-skin-switch,
      html[data-skin="neo"] .topbar-skin-switch,
      html[data-skin="premium"] .topbar-skin-switch,
      :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-skin-switch {
        width: auto;
      }
      html[data-skin="fintech"] .container,
      html[data-skin="neo"] .container,
      html[data-skin="premium"] .container,
      :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .container {
        margin-left: 0;
        width: 100%;
      }
    }

    @media (min-width: 1201px) {
      html[data-skin="fintech"] .topbar,
      html[data-skin="neo"] .topbar,
      html[data-skin="premium"] .topbar,
      :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar {
        width: 72px;
        transition: width .24s ease;
        will-change: width;
        contain: layout style;
      }
      html[data-skin="fintech"] .sidebar-edge-trigger,
      html[data-skin="neo"] .sidebar-edge-trigger,
      html[data-skin="premium"] .sidebar-edge-trigger,
      :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .sidebar-edge-trigger {
        display: block;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 2px;
        z-index: 190;
      }
      html[data-skin="fintech"] .sidebar-edge-trigger:hover + .topbar,
      html[data-skin="neo"] .sidebar-edge-trigger:hover + .topbar,
      html[data-skin="premium"] .sidebar-edge-trigger:hover + .topbar,
      :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .sidebar-edge-trigger:hover + .topbar {
        width: 252px;
      }
      html[data-skin="fintech"] .topbar + .container,
      html[data-skin="neo"] .topbar + .container,
      html[data-skin="premium"] .topbar + .container,
      :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar + .container {
        margin-left: 72px;
        width: calc(100% - 72px);
        transition: none;
      }
      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar + .container::before {
        content: none;
        display: none;
      }
      html[data-skin="fintech"] .sidebar-page-scrim,
      html[data-skin="neo"] .sidebar-page-scrim,
      html[data-skin="premium"] .sidebar-page-scrim,
      :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .sidebar-page-scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 150;
        pointer-events: none;
        opacity: 0;
        background:
          linear-gradient(90deg, rgba(5, 17, 34, 0.2), rgba(5, 17, 34, 0.12) 34%, rgba(5, 17, 34, 0.05) 100%);
        backdrop-filter: blur(3px) saturate(0.82);
        -webkit-backdrop-filter: blur(3px) saturate(0.82);
        transform: translateZ(0);
        transition: opacity .16s ease;
        will-change: opacity;
      }
      html.is-sidebar-open .sidebar-page-scrim,
      html.is-sidebar-navigating .sidebar-page-scrim,
      html.is-sidebar-retained .sidebar-page-scrim {
        opacity: 1;
      }
      @keyframes sidebarContentEnter {
        from {
          opacity: 0.94;
          transform: translateY(2px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      html.is-sidebar-retained .container {
        animation: sidebarContentEnter .18s ease-out both;
      }
      html.is-sidebar-navigating .container {
        opacity: 0.96;
        transition: opacity .12s ease;
      }
      html[data-skin="fintech"] .topbar:hover,
      html[data-skin="neo"] .topbar:hover,
      html[data-skin="premium"] .topbar:hover,
      :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar:hover,
      html[data-skin="fintech"] .topbar:focus-within,
      html[data-skin="neo"] .topbar:focus-within,
      html[data-skin="premium"] .topbar:focus-within,
      :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar:focus-within {
        width: 252px;
      }
      html[data-skin="fintech"] .sidebar-edge-trigger:hover + .topbar + .container,
      html[data-skin="neo"] .sidebar-edge-trigger:hover + .topbar + .container,
      html[data-skin="premium"] .sidebar-edge-trigger:hover + .topbar + .container,
      :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .sidebar-edge-trigger:hover + .topbar + .container {
        margin-left: 72px;
        width: calc(100% - 72px);
      }
      html[data-skin="fintech"] .topbar:hover + .container,
      html[data-skin="neo"] .topbar:hover + .container,
      html[data-skin="premium"] .topbar:hover + .container,
      :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar:hover + .container,
      html[data-skin="fintech"] .topbar:focus-within + .container,
      html[data-skin="neo"] .topbar:focus-within + .container,
      html[data-skin="premium"] .topbar:focus-within + .container,
      :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar:focus-within + .container {
        margin-left: 72px;
        width: calc(100% - 72px);
      }
      html[data-skin="fintech"] .sidebar-edge-trigger:hover + .topbar + .container::before,
      html[data-skin="neo"] .sidebar-edge-trigger:hover + .topbar + .container::before,
      html[data-skin="premium"] .sidebar-edge-trigger:hover + .topbar + .container::before,
      :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .sidebar-edge-trigger:hover + .topbar + .container::before,
      html[data-skin="fintech"] .topbar:hover + .container::before,
      html[data-skin="neo"] .topbar:hover + .container::before,
      html[data-skin="premium"] .topbar:hover + .container::before,
      :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar:hover + .container::before,
      html[data-skin="fintech"] .topbar:focus-within + .container::before,
      html[data-skin="neo"] .topbar:focus-within + .container::before,
      html[data-skin="premium"] .topbar:focus-within + .container::before,
      :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar:focus-within + .container::before {
        opacity: 1;
      }

      html[data-skin="fintech"] .brand span,
      html[data-skin="neo"] .brand span,
      html[data-skin="premium"] .brand span,
      :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .brand span {
        opacity: 0;
        width: 0;
        overflow: hidden;
        white-space: nowrap;
        transition: opacity .2s ease, width .2s ease;
      }
      html[data-skin="fintech"] .topbar:hover .brand span,
      html[data-skin="neo"] .topbar:hover .brand span,
      html[data-skin="premium"] .topbar:hover .brand span,
      :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar:hover .brand span,
      html[data-skin="fintech"] .topbar:focus-within .brand span,
      html[data-skin="neo"] .topbar:focus-within .brand span,
      html[data-skin="premium"] .topbar:focus-within .brand span,
      :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar:focus-within .brand span {
        opacity: 1;
        width: auto;
      }
      html[data-skin="fintech"] .sidebar-edge-trigger:hover + .topbar .brand span,
      html[data-skin="neo"] .sidebar-edge-trigger:hover + .topbar .brand span,
      html[data-skin="premium"] .sidebar-edge-trigger:hover + .topbar .brand span,
      :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .sidebar-edge-trigger:hover + .topbar .brand span {
        opacity: 1;
        width: auto;
      }

      html[data-skin="fintech"] .topbar-link,
      html[data-skin="neo"] .topbar-link,
      html[data-skin="premium"] .topbar-link,
      :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-link {
        justify-content: center;
        font-size: 0;
        line-height: 1;
        gap: 0;
      }
      html[data-skin="fintech"] .topbar-link::before,
      html[data-skin="neo"] .topbar-link::before,
      html[data-skin="premium"] .topbar-link::before,
      :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-link::before {
        content: none;
        display: none;
      }
      html[data-skin="fintech"] .topbar-link.has-alert::before,
      html[data-skin="neo"] .topbar-link.has-alert::before,
      html[data-skin="premium"] .topbar-link.has-alert::before,
      :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-link.has-alert::before {
        color: #ff4f5f;
        text-shadow: 0 0 12px rgba(255, 79, 95, 0.55);
      }
      html[data-skin="fintech"] .topbar:hover .topbar-link,
      html[data-skin="neo"] .topbar:hover .topbar-link,
      html[data-skin="premium"] .topbar:hover .topbar-link,
      :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar:hover .topbar-link,
      html[data-skin="fintech"] .topbar:focus-within .topbar-link,
      html[data-skin="neo"] .topbar:focus-within .topbar-link,
      html[data-skin="premium"] .topbar:focus-within .topbar-link,
      :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar:focus-within .topbar-link {
        justify-content: flex-start;
        font-size: 14px;
        gap: 12px;
      }
      html[data-skin="fintech"] .sidebar-edge-trigger:hover + .topbar .topbar-link,
      html[data-skin="neo"] .sidebar-edge-trigger:hover + .topbar .topbar-link,
      html[data-skin="premium"] .sidebar-edge-trigger:hover + .topbar .topbar-link,
      :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .sidebar-edge-trigger:hover + .topbar .topbar-link {
        justify-content: flex-start;
        font-size: 14px;
        gap: 12px;
      }
      html[data-skin="fintech"] .topbar:hover .topbar-link::before,
      html[data-skin="neo"] .topbar:hover .topbar-link::before,
      html[data-skin="premium"] .topbar:hover .topbar-link::before,
      :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar:hover .topbar-link::before,
      html[data-skin="fintech"] .topbar:focus-within .topbar-link::before,
      html[data-skin="neo"] .topbar:focus-within .topbar-link::before,
      html[data-skin="premium"] .topbar:focus-within .topbar-link::before,
      :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar:focus-within .topbar-link::before {
        content: "";
      }
      html[data-skin="fintech"] .sidebar-edge-trigger:hover + .topbar .topbar-link::before,
      html[data-skin="neo"] .sidebar-edge-trigger:hover + .topbar .topbar-link::before,
      html[data-skin="premium"] .sidebar-edge-trigger:hover + .topbar .topbar-link::before,
      :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .sidebar-edge-trigger:hover + .topbar .topbar-link::before {
        content: none;
      }
      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-link-label {
        max-width: 0;
        opacity: 0;
        transform: translateX(-5px);
        transition: opacity .18s ease, max-width .22s ease, transform .2s ease;
      }
      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar:hover .topbar-link-label,
      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar:focus-within .topbar-link-label,
      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .sidebar-edge-trigger:hover + .topbar .topbar-link-label,
      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar.is-sidebar-open .topbar-link-label {
        max-width: 184px;
        opacity: 1;
        transform: translateX(0);
      }

      html[data-skin="fintech"] .topbar-right,
      html[data-skin="neo"] .topbar-right,
      html[data-skin="premium"] .topbar-right,
      :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-right {
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        pointer-events: none;
        transform: translateY(8px);
        transition: opacity .2s ease, transform .2s ease, max-height .24s ease;
      }
      html[data-skin="fintech"] .topbar:hover .topbar-right,
      html[data-skin="neo"] .topbar:hover .topbar-right,
      html[data-skin="premium"] .topbar:hover .topbar-right,
      :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar:hover .topbar-right,
      html[data-skin="fintech"] .topbar:focus-within .topbar-right,
      html[data-skin="neo"] .topbar:focus-within .topbar-right,
      html[data-skin="premium"] .topbar:focus-within .topbar-right,
      :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar:focus-within .topbar-right {
        opacity: 1;
        max-height: 420px;
        overflow: visible;
        pointer-events: auto;
        transform: translateY(0);
      }
      html[data-skin="fintech"] .sidebar-edge-trigger:hover + .topbar .topbar-right,
      html[data-skin="neo"] .sidebar-edge-trigger:hover + .topbar .topbar-right,
      html[data-skin="premium"] .sidebar-edge-trigger:hover + .topbar .topbar-right,
      :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .sidebar-edge-trigger:hover + .topbar .topbar-right {
        opacity: 1;
        max-height: 420px;
        overflow: visible;
        pointer-events: auto;
        transform: translateY(0);
      }
      html[data-skin="fintech"] .topbar:hover .topbar-search-form .topbar-search-box,
      html[data-skin="neo"] .topbar:hover .topbar-search-form .topbar-search-box,
      html[data-skin="premium"] .topbar:hover .topbar-search-form .topbar-search-box,
      :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar:hover .topbar-search-form .topbar-search-box,
      html[data-skin="fintech"] .topbar:focus-within .topbar-search-form .topbar-search-box,
      html[data-skin="neo"] .topbar:focus-within .topbar-search-form .topbar-search-box,
      html[data-skin="premium"] .topbar:focus-within .topbar-search-form .topbar-search-box,
      :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar:focus-within .topbar-search-form .topbar-search-box {
        width: 100%;
        height: 46px;
        border-radius: 17px;
        border-color: color-mix(in srgb, var(--topbar-line) 82%, rgba(255, 255, 255, 0.18));
        background: rgba(255, 255, 255, 0.13);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.08),
          0 10px 26px rgba(0, 0, 0, 0.14);
      }
      html[data-skin="fintech"] .sidebar-edge-trigger:hover + .topbar .topbar-search-form .topbar-search-box,
      html[data-skin="neo"] .sidebar-edge-trigger:hover + .topbar .topbar-search-form .topbar-search-box,
      html[data-skin="premium"] .sidebar-edge-trigger:hover + .topbar .topbar-search-form .topbar-search-box,
      :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .sidebar-edge-trigger:hover + .topbar .topbar-search-form .topbar-search-box {
        width: 100%;
        height: 46px;
        border-radius: 17px;
        border-color: color-mix(in srgb, var(--topbar-line) 82%, rgba(255, 255, 255, 0.18));
        background: rgba(255, 255, 255, 0.13);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.08),
          0 10px 26px rgba(0, 0, 0, 0.14);
      }
      html[data-skin="fintech"] .topbar:hover .topbar-search-form .topbar-search-box input,
      html[data-skin="neo"] .topbar:hover .topbar-search-form .topbar-search-box input,
      html[data-skin="premium"] .topbar:hover .topbar-search-form .topbar-search-box input,
      :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar:hover .topbar-search-form .topbar-search-box input,
      html[data-skin="fintech"] .topbar:focus-within .topbar-search-form .topbar-search-box input,
      html[data-skin="neo"] .topbar:focus-within .topbar-search-form .topbar-search-box input,
      html[data-skin="premium"] .topbar:focus-within .topbar-search-form .topbar-search-box input,
      :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar:focus-within .topbar-search-form .topbar-search-box input {
        max-width: none;
        padding: 0 12px 0 16px;
        opacity: 1;
        pointer-events: auto;
        font-size: 13px;
        letter-spacing: 0.01em;
      }
      html[data-skin="fintech"] .sidebar-edge-trigger:hover + .topbar .topbar-search-form .topbar-search-box input,
      html[data-skin="neo"] .sidebar-edge-trigger:hover + .topbar .topbar-search-form .topbar-search-box input,
      html[data-skin="premium"] .sidebar-edge-trigger:hover + .topbar .topbar-search-form .topbar-search-box input,
      :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .sidebar-edge-trigger:hover + .topbar .topbar-search-form .topbar-search-box input {
        max-width: none;
        padding: 0 12px 0 16px;
        opacity: 1;
        pointer-events: auto;
        font-size: 13px;
        letter-spacing: 0.01em;
      }
      html[data-skin="fintech"] .topbar:hover .topbar-search-form .topbar-search-btn,
      html[data-skin="neo"] .topbar:hover .topbar-search-form .topbar-search-btn,
      html[data-skin="premium"] .topbar:hover .topbar-search-form .topbar-search-btn,
      :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar:hover .topbar-search-form .topbar-search-btn,
      html[data-skin="fintech"] .topbar:focus-within .topbar-search-form .topbar-search-btn,
      html[data-skin="neo"] .topbar:focus-within .topbar-search-form .topbar-search-btn,
      html[data-skin="premium"] .topbar:focus-within .topbar-search-form .topbar-search-btn,
      :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar:focus-within .topbar-search-form .topbar-search-btn {
        width: 44px;
        min-width: 44px;
        height: 46px;
        border-left: 1px solid color-mix(in srgb, var(--topbar-line) 82%, rgba(255, 255, 255, 0.16));
        border-top-right-radius: 17px;
        border-bottom-right-radius: 17px;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        background: rgba(255, 255, 255, 0.06);
      }
      html[data-skin="fintech"] .sidebar-edge-trigger:hover + .topbar .topbar-search-form .topbar-search-btn,
      html[data-skin="neo"] .sidebar-edge-trigger:hover + .topbar .topbar-search-form .topbar-search-btn,
      html[data-skin="premium"] .sidebar-edge-trigger:hover + .topbar .topbar-search-form .topbar-search-btn,
      :is(html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .sidebar-edge-trigger:hover + .topbar .topbar-search-form .topbar-search-btn {
        width: 44px;
        min-width: 44px;
        height: 46px;
        border-left: 1px solid color-mix(in srgb, var(--topbar-line) 82%, rgba(255, 255, 255, 0.16));
        border-top-right-radius: 17px;
        border-bottom-right-radius: 17px;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        background: rgba(255, 255, 255, 0.06);
      }
      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar.is-sidebar-open,
      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]).is-sidebar-open .topbar {
        width: 252px;
      }
      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar.is-sidebar-open + .container,
      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]).is-sidebar-open .topbar + .container {
        margin-left: 72px;
        width: calc(100% - 72px);
      }
      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar.is-sidebar-open + .container::before {
        opacity: 1;
      }
      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar.is-sidebar-open .brand span,
      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]).is-sidebar-open .topbar .brand span {
        opacity: 1;
        width: auto;
      }
      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar.is-sidebar-open .topbar-link,
      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]).is-sidebar-open .topbar .topbar-link {
        justify-content: flex-start;
        font-size: 14px;
        gap: 12px;
      }
      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar.is-sidebar-open .topbar-link::before,
      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]).is-sidebar-open .topbar .topbar-link::before {
        content: none;
      }
      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar.is-sidebar-open .topbar-right,
      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]).is-sidebar-open .topbar .topbar-right {
        opacity: 1;
        max-height: 420px;
        overflow: visible;
        pointer-events: auto;
        transform: translateY(0);
      }
      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar.is-sidebar-open .topbar-search-form .topbar-search-box,
      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]).is-sidebar-open .topbar .topbar-search-form .topbar-search-box {
        width: 100%;
        height: 46px;
        border-radius: 17px;
        border-color: color-mix(in srgb, var(--topbar-line) 82%, rgba(255, 255, 255, 0.18));
        background: rgba(255, 255, 255, 0.13);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.08),
          0 10px 26px rgba(0, 0, 0, 0.14);
      }
      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar.is-sidebar-open .topbar-search-form .topbar-search-box input,
      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]).is-sidebar-open .topbar .topbar-search-form .topbar-search-box input {
        max-width: none;
        padding: 0 12px 0 16px;
        opacity: 1;
        pointer-events: auto;
        font-size: 13px;
        letter-spacing: 0.01em;
      }
      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar.is-sidebar-open .topbar-search-form .topbar-search-btn,
      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]).is-sidebar-open .topbar .topbar-search-form .topbar-search-btn {
        width: 44px;
        min-width: 44px;
        height: 46px;
        border-left: 1px solid color-mix(in srgb, var(--topbar-line) 82%, rgba(255, 255, 255, 0.16));
        border-top-right-radius: 17px;
        border-bottom-right-radius: 17px;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        background: rgba(255, 255, 255, 0.06);
      }
    }

    :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar {
      background:
        radial-gradient(220px 180px at 18% -8%, rgba(38, 198, 255, 0.12), transparent 62%),
        linear-gradient(180deg,
          color-mix(in srgb, var(--topbar-bg-1) 94%, #030913 6%),
          color-mix(in srgb, var(--topbar-bg-2) 58%, #071326 42%)
        );
    }

    :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-center {
      gap: 7px;
      padding: 4px 0;
    }

    :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-link {
      min-height: 46px;
      padding: 10px 12px;
      border-radius: 13px;
      transition: color .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
    }

    :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-link:hover {
      border-color: color-mix(in srgb, var(--topbar-line) 78%, rgba(255, 255, 255, 0.1));
      background: rgba(255, 255, 255, 0.065);
      transform: translateY(-1px);
    }

    :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-link.active {
      color: #fff;
      border-color: rgba(55, 151, 255, 0.82);
      background:
        radial-gradient(circle at 16% 18%, rgba(70, 214, 255, 0.26) 0%, transparent 42%),
        linear-gradient(180deg, rgba(22, 77, 131, 0.94), rgba(12, 47, 90, 0.96));
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 0 0 1px rgba(59, 147, 245, 0.42),
        0 8px 18px rgba(2, 15, 34, 0.22),
        0 0 18px rgba(33, 157, 255, 0.2);
      text-shadow: 0 1px 1px rgba(0, 14, 31, 0.24);
      transform: none;
    }

    :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-link.active .topbar-link-icon {
      color: #fff;
      filter: drop-shadow(0 0 8px rgba(45, 184, 255, 0.42));
    }

    :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-search-form {
      margin: 10px 0 3px;
    }

    :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-search-form:is(.is-open, :focus-within) .topbar-search-box,
    :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar:hover .topbar-search-form .topbar-search-box,
    :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .sidebar-edge-trigger:hover + .topbar .topbar-search-form .topbar-search-box,
    :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar.is-sidebar-open .topbar-search-form .topbar-search-box,
    :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]).is-sidebar-open .topbar .topbar-search-form .topbar-search-box {
      height: 44px;
      border-radius: 15px;
      border-color: color-mix(in srgb, var(--topbar-line) 80%, rgba(87, 156, 240, 0.2));
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.075)),
        color-mix(in srgb, var(--topbar-bg-1) 78%, #102641 22%);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 8px 18px rgba(0, 0, 0, 0.14);
    }

    :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-search-form:is(.is-open, :focus-within) .topbar-search-box input,
    :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar:hover .topbar-search-form .topbar-search-box input,
    :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .sidebar-edge-trigger:hover + .topbar .topbar-search-form .topbar-search-box input,
    :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar.is-sidebar-open .topbar-search-form .topbar-search-box input,
    :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]).is-sidebar-open .topbar .topbar-search-form .topbar-search-box input {
      padding: 0 10px 0 15px;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0;
    }

    :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-search-form:is(.is-open, :focus-within) .topbar-search-btn,
    :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar:hover .topbar-search-form .topbar-search-btn,
    :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .sidebar-edge-trigger:hover + .topbar .topbar-search-form .topbar-search-btn,
    :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar.is-sidebar-open .topbar-search-form .topbar-search-btn,
    :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]).is-sidebar-open .topbar .topbar-search-form .topbar-search-btn {
      width: 42px;
      min-width: 42px;
      height: 44px;
      flex-basis: 42px;
      border-top-right-radius: 15px;
      border-bottom-right-radius: 15px;
      color: color-mix(in srgb, var(--topbar-text) 82%, #8db9f7 18%);
    }

    :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-search-btn svg {
      width: 18px;
      height: 18px;
      stroke-width: 1.95;
    }

    @media (min-width: 1201px) {
      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar:not(:hover):not(:focus-within):not(.is-sidebar-open) .topbar-center {
        align-items: center;
        gap: 9px;
        padding: 2px 0;
      }

      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar:not(:hover):not(:focus-within):not(.is-sidebar-open) .brand {
        justify-content: center;
        padding: 7px 0;
      }

      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar:not(:hover):not(:focus-within):not(.is-sidebar-open) .topbar-link {
        width: 48px;
        height: 48px;
        min-height: 48px;
        margin: 0 auto;
        padding: 0;
        border-radius: 14px;
      }

      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar:not(:hover):not(:focus-within):not(.is-sidebar-open) .topbar-link.active {
        border-color: rgba(48, 149, 255, 0.78);
        background:
          radial-gradient(circle at 34% 20%, rgba(70, 217, 255, 0.28), transparent 46%),
          linear-gradient(180deg, rgba(23, 80, 137, 0.94), rgba(11, 46, 90, 0.96));
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.14),
          inset 0 0 0 1px rgba(62, 153, 247, 0.48),
          0 7px 16px rgba(0, 13, 31, 0.22),
          0 0 18px rgba(34, 172, 255, 0.28);
      }

      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar:not(:hover):not(:focus-within):not(.is-sidebar-open) .topbar-search-form {
        width: 48px;
        margin: 11px auto 0;
        align-self: center;
      }

      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar:not(:hover):not(:focus-within):not(.is-sidebar-open) .topbar-search-box {
        width: 46px;
        height: 46px;
        border-radius: 14px;
        border-color: color-mix(in srgb, var(--topbar-line) 74%, rgba(90, 151, 220, 0.2));
        background:
          radial-gradient(circle at 32% 18%, rgba(255, 255, 255, 0.12), transparent 42%),
          linear-gradient(180deg, rgba(66, 84, 115, 0.62), rgba(39, 55, 82, 0.64));
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.08),
          0 7px 16px rgba(0, 0, 0, 0.16);
      }

      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar:not(:hover):not(:focus-within):not(.is-sidebar-open) .topbar-search-btn {
        width: 46px;
        min-width: 46px;
        height: 46px;
        flex-basis: 46px;
        border-left: 0;
        color: color-mix(in srgb, var(--topbar-text) 74%, #9fb7d8 26%);
      }
    }

    .psp-action-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-width: max-content;
      height: 38px;
      padding: 0 18px;
      border-radius: 13px;
      border: 2px solid transparent;
      background: #fff;
      color: #162033;
      text-decoration: none;
      font-family: inherit;
      font-size: 15px;
      font-weight: 600;
      letter-spacing: 0;
      line-height: 1;
      white-space: nowrap;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
      transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease, transform .16s ease;
    }
    .psp-action-btn:hover {
      text-decoration: none;
      transform: translateY(-1px);
      box-shadow: 0 4px 10px rgba(15, 23, 42, .13);
      filter: none;
    }
    .psp-action-btn:active {
      transform: translateY(0);
      box-shadow: 0 1px 3px rgba(15, 23, 42, .14);
    }
    .psp-action-btn:disabled,
    .psp-action-btn[aria-disabled="true"] {
      opacity: .56;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }
    .psp-action-btn.loading {
      opacity: .78;
      pointer-events: none;
    }
    .psp-action-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      flex: 0 0 24px;
    }
    .psp-action-icon svg {
      display: block;
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    .psp-action-btn svg path {
      fill: none;
      stroke: currentColor;
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .psp-action-btn svg {
      fill: none;
      stroke: currentColor;
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .psp-action-label {
      position: relative;
      top: 0;
    }
    .psp-action-btn-push {
      gap: 8px;
      height: 34px;
      padding: 0 14px 0 10px;
      border-color: #d9e2ef;
      border-radius: 15px;
      background: #fff;
      color: #087a3e;
      font-size: 15px;
      font-weight: 600;
      letter-spacing: 0;
      text-shadow: none;
      box-shadow: 0 1px 4px rgba(15, 23, 42, .1);
    }
    .psp-action-btn-push:hover {
      background: #fbfffd;
      border-color: #b9d9c7;
      color: #067238;
    }
    .psp-action-btn-push .psp-action-icon {
      width: 24px;
      height: 24px;
      flex-basis: 24px;
      border-radius: 12px;
      background: #ecf8f1;
      box-shadow: none;
    }
    .psp-action-btn-push svg path {
      stroke-width: 2.45;
    }
    .psp-action-btn-message {
      height: 34px;
      padding: 0 12px;
      border-color: #d9e2ef;
      border-radius: 13px;
      background: #fff;
      color: #2f6fba;
      font-size: 15px;
      font-weight: 600;
      box-shadow: 0 1px 4px rgba(15, 23, 42, .1);
    }
    .psp-action-btn-message:hover {
      background: #fbfdff;
      border-color: #c8d4e3;
      color: #285f9f;
    }
    .psp-action-btn-slack {
      height: 38px;
      padding: 0 17px;
      border-color: #d9e2ef;
      border-radius: 13px;
      background: #fff;
      color: #111827;
      font-size: 16px;
      font-weight: 600;
      box-shadow: 0 1px 4px rgba(15, 23, 42, .1);
    }
    .psp-action-btn-slack:hover {
      background: #fff;
      border-color: #c8d4e3;
      color: #0f172a;
    }
    .psp-action-btn-slack .psp-action-icon {
      width: 24px;
      height: 24px;
      flex-basis: 24px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 122.8 122.8'%3E%3Cpath fill='%2336C5F0' d='M25.8 77.6c0 7.1-5.8 12.9-12.9 12.9S0 84.7 0 77.6s5.8-12.9 12.9-12.9h12.9v12.9zm6.5 0c0-7.1 5.8-12.9 12.9-12.9s12.9 5.8 12.9 12.9v32.3c0 7.1-5.8 12.9-12.9 12.9s-12.9-5.8-12.9-12.9V77.6z'/%3E%3Cpath fill='%232EB67D' d='M45.2 25.8c-7.1 0-12.9-5.8-12.9-12.9S38.1 0 45.2 0s12.9 5.8 12.9 12.9v12.9H45.2zm0 6.5c7.1 0 12.9 5.8 12.9 12.9s-5.8 12.9-12.9 12.9H12.9C5.8 58.1 0 52.3 0 45.2s5.8-12.9 12.9-12.9h32.3z'/%3E%3Cpath fill='%23ECB22E' d='M97 45.2c0-7.1 5.8-12.9 12.9-12.9s12.9 5.8 12.9 12.9-5.8 12.9-12.9 12.9H97V45.2zm-6.5 0c0 7.1-5.8 12.9-12.9 12.9s-12.9-5.8-12.9-12.9V12.9C64.7 5.8 70.5 0 77.6 0s12.9 5.8 12.9 12.9v32.3z'/%3E%3Cpath fill='%23E01E5A' d='M77.6 97c7.1 0 12.9 5.8 12.9 12.9s-5.8 12.9-12.9 12.9-12.9-5.8-12.9-12.9V97h12.9zm0-6.5c-7.1 0-12.9-5.8-12.9-12.9s5.8-12.9 12.9-12.9h32.3c7.1 0 12.9 5.8 12.9 12.9s-5.8 12.9-12.9 12.9H77.6z'/%3E%3C/svg%3E");
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
    }
    .psp-action-btn-slack .psp-action-icon svg {
      display: none;
    }
    .psp-action-btn-slack svg path {
      stroke: none;
    }
    .psp-action-btn-slack .slack-blue { fill: #36c5f0; }
    .psp-action-btn-slack .slack-green { fill: #2eb67d; }
    .psp-action-btn-slack .slack-yellow { fill: #ecb22e; }
    .psp-action-btn-slack .slack-red { fill: #e01e5a; }
    .psp-action-btn-delete {
      height: 46px;
      min-height: 46px;
      padding: 0 24px;
      border-color: #bb4c6a;
      border-width: 2px;
      border-radius: 18px;
      background: color-mix(in srgb, #5a2033 84%, var(--surface) 16%);
      color: #ff7187;
      font-size: 16px;
      font-weight: 650;
      box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent),
        0 0 0 1px color-mix(in srgb, #ef5d7a 18%, transparent),
        0 8px 18px color-mix(in srgb, #2b0712 20%, transparent);
    }
    .psp-action-btn-delete:hover,
    .psp-action-btn-delete:focus-visible {
      background: color-mix(in srgb, #64243a 88%, var(--surface) 12%);
      border-color: #d15a77;
      color: #ff8294;
      box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent),
        0 0 0 1px color-mix(in srgb, #ef5d7a 26%, transparent),
        0 10px 22px color-mix(in srgb, #2b0712 26%, transparent);
    }
    .psp-action-btn-delete:disabled {
      cursor: not-allowed;
      opacity: .68;
      filter: none;
    }
    .psp-action-btn-delete svg path {
      stroke-width: 2.45;
    }

    @media (max-width: 980px) {
      .topbar {
        min-height: auto;
        padding: 10px 12px;
        flex-wrap: wrap;
        align-items: center;
      }
      .brand { font-size: 27px; gap: 8px; }
      .brand-logo { width: 32px; height: 32px; }
      .topbar-right { margin-left: auto; }
      .topbar-center {
        order: 3;
        width: 100%;
        justify-content: flex-start;
        gap: 10px;
        overflow-x: auto;
        padding: 4px 12px 2px 0;
      }
      .topbar-search-form {
        order: 2;
        flex: 0 0 auto;
        width: auto;
        min-width: 0;
        margin-left: auto;
      }
      .topbar-search-form.is-open {
        flex: 1 1 100%;
        width: 100%;
        margin-left: 0;
      }
      .topbar-search-form.is-open .topbar-search-box,
      .topbar-search-form:focus-within .topbar-search-box {
        width: min(100%, 320px);
      }
      .topbar-center .topbar-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        flex: 0 0 auto;
        font-size: 12px;
      }
      .topbar-action {
        padding: 0 8px;
      }
      .topbar-theme-switch {
        padding: 0 8px;
      }
      .topbar-skin-switch {
        padding: 0 8px;
      }
      .container { padding: 14px 8px 18px; }
      .card { padding: 14px; border-radius: 12px; }
      input, select, button:not(.theme-chip):not(.topbar-skin-arrow):not(.topbar-search-btn):not(.app-header-search-icon):not(.topbar-theme-modal-close):not(.psp-action-btn) { width: 100%; }
    }

    @media (max-width: 520px) {
      .topbar-center {
        gap: 8px;
      }

      .topbar-center .topbar-link:not(.active) .topbar-link-label {
        display: none;
      }
    }

    @media (min-width: 1201px) {
      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar {
        overflow: visible;
      }

      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .brand {
        width: 100%;
        min-height: 54px;
        padding: 4px 0;
        gap: 12px;
        align-items: center;
        justify-content: center;
      }

      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .brand-logo {
        width: 44px;
        height: 44px;
      }

      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .brand span {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        max-width: 0;
        width: auto;
        line-height: 1;
        transform: translateY(1px);
      }

      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar:hover .brand,
      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar:focus-within .brand,
      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .sidebar-edge-trigger:hover + .topbar .brand {
        justify-content: flex-start;
      }

      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar:hover .brand span,
      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar:focus-within .brand span,
      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .sidebar-edge-trigger:hover + .topbar .brand span {
        max-width: 170px;
      }

      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-center {
        align-items: center;
        overflow: visible;
        padding: 4px 0;
      }

      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-link {
        width: 48px;
        min-height: 48px;
        height: 48px;
        padding: 0;
        border-radius: 16px;
        flex: 0 0 48px;
        overflow: visible;
      }

      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-link.active {
        box-shadow:
          inset 0 0 0 1px rgba(41, 136, 235, 0.7),
          inset 0 1px 0 rgba(255, 255, 255, 0.16),
          0 0 0 1px rgba(36, 199, 255, 0.18),
          0 10px 22px rgba(18, 103, 197, 0.24);
      }

      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-link-icon {
        width: 24px;
        height: 24px;
        flex-basis: 24px;
      }

      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar:hover .topbar-link,
      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar:focus-within .topbar-link,
      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .sidebar-edge-trigger:hover + .topbar .topbar-link {
        width: 100%;
        flex-basis: auto;
        padding: 0 14px;
        justify-content: flex-start;
      }
    }

    @media (min-width: 1201px) {
      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar {
        width: 72px;
        padding: 16px 12px;
        gap: 12px;
        overflow: visible;
      }

      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar:hover,
      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar:focus-within,
      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar.is-sidebar-open,
      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]).is-sidebar-open .topbar,
      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .sidebar-edge-trigger:hover + .topbar {
        width: 252px;
      }

      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-left {
        width: 100%;
        height: 58px;
        margin: 0;
        flex: 0 0 58px;
      }

      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .brand {
        width: 100%;
        height: 58px;
        min-height: 58px;
        padding: 0;
        gap: 12px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        font-size: 30px;
        line-height: 1;
      }

      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .brand-logo {
        width: 48px;
        height: 48px;
        flex: 0 0 48px;
      }

      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .brand span {
        display: inline-flex;
        align-items: center;
        height: 48px;
        min-height: 48px;
        width: auto;
        max-width: 0;
        opacity: 0;
        overflow: hidden;
        white-space: nowrap;
        line-height: 1;
        transform: none;
        transition: opacity .18s ease, max-width .2s ease;
      }

      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar:hover .brand span,
      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar:focus-within .brand span,
      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar.is-sidebar-open .brand span,
      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]).is-sidebar-open .topbar .brand span,
      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .sidebar-edge-trigger:hover + .topbar .brand span {
        max-width: 172px;
        opacity: 1;
      }

      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-center {
        width: 100%;
        padding: 0;
        gap: 10px;
        align-items: center;
        overflow: visible;
        flex: 0 0 auto;
      }

      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-link {
        width: 48px;
        height: 48px;
        min-height: 48px;
        flex: 0 0 48px;
        margin: 0;
        padding: 0;
        gap: 0;
        justify-content: center;
        border-radius: 16px;
        font-size: 0;
        line-height: 1;
        transform: none;
        transition: color .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
      }

      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar:hover .topbar-link,
      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar:focus-within .topbar-link,
      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar.is-sidebar-open .topbar-link,
      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]).is-sidebar-open .topbar .topbar-link,
      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .sidebar-edge-trigger:hover + .topbar .topbar-link {
        width: 100%;
        height: 48px;
        min-height: 48px;
        flex: 0 0 48px;
        padding: 0 12px;
        gap: 12px;
        justify-content: flex-start;
        font-size: 14px;
      }

      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-link:hover {
        transform: none;
      }

      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-link-icon {
        width: 24px;
        height: 24px;
        flex: 0 0 24px;
      }

      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar-link-label {
        max-width: 0;
        opacity: 0;
        transform: none;
        transition: opacity .18s ease, max-width .2s ease;
      }

      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar:hover .topbar-link-label,
      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar:focus-within .topbar-link-label,
      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar.is-sidebar-open .topbar-link-label,
      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]).is-sidebar-open .topbar .topbar-link-label,
      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .sidebar-edge-trigger:hover + .topbar .topbar-link-label {
        max-width: 170px;
        opacity: 1;
      }

      :is(html[data-skin="fintech"], html[data-skin="neo"], html[data-skin="premium"], html[data-skin="fit"], html[data-skin="ocean"], html[data-skin="lagoon"], html[data-skin="reef"]) .topbar:not(:hover):not(:focus-within):not(.is-sidebar-open) .brand {
        padding: 0;
        justify-content: flex-start;
      }
    }