html.tg1 { --t-acc: #2EA6FF; --t-acc-tx: #fff; --t-bg: #0E1621; --t-card: #17212B; --t-tx: #F5F5F5; --t-hint: #8696A6; --t-sep: rgba(255,255,255,.07); --t-press: rgba(255,255,255,.05); --t-bar: rgba(23,33,43,.92); }
html.tg1[data-theme="light"] { --t-acc: #3390EC; --t-bg: #EFEFF4; --t-card: #fff; --t-tx: #000; --t-hint: #707579; --t-sep: rgba(60,60,67,.16); --t-press: rgba(0,0,0,.05); --t-bar: rgba(255,255,255,.88); }
html.tg2 { --t-acc: #9D7BFF; --t-acc-tx: #120A26; --t-bg: #100E14; --t-card: #1C1A22; --t-tx: #F2F0F7; --t-hint: #9A95A8; --t-sep: rgba(255,255,255,.07); --t-press: rgba(157,123,255,.08); --t-bar: rgba(28,26,34,.92); }
html.tg2[data-theme="light"] { --t-acc: #7C4DFF; --t-acc-tx: #fff; --t-bg: #F2F1F7; --t-card: #fff; --t-tx: #14121A; --t-hint: #6E6A7C; --t-sep: rgba(40,30,80,.1); --t-press: rgba(124,77,255,.06); --t-bar: rgba(255,255,255,.9); }
html.tg3 { --t-acc: #9C8CFF; --t-acc-tx: #fff; --t-bg: #000; --t-card: #1C1C1E; --t-tx: #fff; --t-hint: #8D8D93; --t-sep: #2C2C2E; --t-press: rgba(255,255,255,.06); --t-bar: rgba(22,22,24,.88); --t-grad: linear-gradient(135deg, #7B61FF, #4B7BFF 60%, #2AABEE); }
html.tg3[data-theme="light"] { --t-acc: #7B61FF; --t-bg: #F2F2F7; --t-card: #fff; --t-tx: #000; --t-hint: #6D6D72; --t-sep: rgba(60,60,67,.16); --t-press: rgba(0,0,0,.05); --t-bar: rgba(249,249,249,.88); }
html.tg { --t-red: #FF3B30; --t-green: #34C759; --t-orange: #FF9500; --t-f: 'Tajawal', 'Almarai', system-ui, sans-serif; }
html.tg[data-theme="light"] { --t-red: #E5372B; }
html.tg .t-b { --ic: #007AFF; } html.tg .t-v { --ic: #AF52DE; } html.tg .t-p { --ic: #5856D6; } html.tg .t-g { --ic: #34C759; }
html.tg .t-c { --ic: #30B0C7; } html.tg .t-o { --ic: #FF9500; } html.tg .t-r { --ic: #FF3B30; } html.tg .t-y { --ic: #FF9F0A; }
html.tg [data-kind="lecture"], html.tg [data-kind="section"] { --ic: #5856D6; }
html.tg [data-kind="summary"] { --ic: #34C759; }
html.tg [data-kind="exam"] { --ic: #FF9500; }
html.tg [data-kind="other"] { --ic: #8E8E93; }
html.tg, html.tg body { background: var(--t-bg) !important; color: var(--t-tx); }
html.tg body::before, html.tg body::after { display: none !important; }
html.tg .k2, html.tg .sc2 { --font: var(--t-f); --k-tx: var(--t-tx); --k-mut: var(--t-hint); --k-box: var(--t-card); --k-line: var(--t-sep); padding-top: 4px; font-family: var(--t-f); }
html.tg main.wrap { padding-bottom: 96px; }
html.tg .k-deco, html.tg .k-hero-bg, html.tg .k-ill, html.tg .k-sw, html.tg .sc-deco, html.tg .sc-hero-bg, html.tg .sc-ill, html.tg .sc-sw, html.tg .kh-no { display: none !important; }
html.tg footer.foot { color: var(--t-hint); }
html.tg body header.top { background: var(--t-bar) !important; -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
border-bottom: .5px solid var(--t-sep) !important; box-shadow: none !important; }
html.tg header.top .wrap { height: 56px; }
html.tg header.top .logo { color: var(--t-tx) !important; font-family: var(--t-f) !important; font-weight: 800 !important; font-size: 22px !important; text-shadow: none !important; }
html.tg header.top .logo .cursor { display: none !important; }
html.tg header.top .logo .pro { background: var(--t-acc) !important; color: var(--t-acc-tx) !important; box-shadow: none !important; border: 0 !important;
font: 700 12px/1 var(--t-f) !important; padding: 5px 7px 4px !important; border-radius: 7px !important; transform: none !important; }
html.tg3 header.top .logo .pro { background: var(--t-grad) !important; color: #fff !important; }
html.tg header.top .icon-btn, html.tg header.top .btn { background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--t-acc) !important; border-radius: 50% !important; }
html.tg header.top .icon-btn:active { background: var(--t-press) !important; }
html.tg header.top .btn-primary { background: var(--t-acc) !important; color: var(--t-acc-tx) !important; border-radius: 10px !important; }
html.tg .n2-nav, html.tg .bottomnav { left: 0 !important; right: 0 !important; bottom: 0 !important; max-width: none !important; width: auto !important; margin: 0 !important; transform: none !important;
height: calc(62px + env(safe-area-inset-bottom)) !important; padding: 0 4px env(safe-area-inset-bottom) !important; gap: 0 !important; border-radius: 0 !important;
background: var(--t-bar) !important; border: 0 !important; border-top: .5px solid var(--t-sep) !important; box-shadow: none !important;
-webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); }
html.tg .n2-nav a, html.tg .bottomnav a { margin: 0 !important; background: none !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important;
color: var(--t-hint) !important; font: 500 11.5px/1 var(--t-f) !important; gap: 4px !important; transform: none !important; }
html.tg .n2-nav a svg { width: 25px !important; height: 25px !important; }
html.tg .n2-nav a.on, html.tg .bottomnav a.on { color: var(--t-acc) !important; font-weight: 700 !important; }
html.tg .n2-nav .dot { top: 8px !important; background: var(--t-red) !important; }
html.tg .k-hero, html.tg .sc-hero { flex-direction: column; justify-content: center; text-align: center; gap: 10px; min-height: 0; padding: 10px 8px 6px !important; margin: 0 0 6px;
background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0; overflow: visible; }
html.tg .k-art, html.tg .sc-art { flex: none !important; width: 76px !important; height: 72px !important; }
html.tg .k-hero-tx, html.tg .sc-hero-tx { flex: none; width: 100%; }
html.tg .k-h1, html.tg .sc-h1 { font: 800 24px/1.25 var(--t-f) !important; color: var(--t-tx) !important; }
html.tg .k-sub, html.tg .sc-sub { margin-top: 4px !important; font: 400 15px/1.4 var(--t-f) !important; color: var(--t-hint) !important; }
html.tg .k-desc, html.tg .sc-desc { font: 400 13px/1.4 var(--t-f) !important; color: var(--t-hint) !important; }
html.tg .kh > .k-hero { flex-direction: row; text-align: start; justify-content: flex-start; gap: 14px; padding: 14px 4px 4px !important; }
html.tg .kh > .k-hero .k-art { width: 58px !important; height: 56px !important; }
html.tg3 .kh > .k-hero { padding: 16px !important; margin: 6px 0 4px; border-radius: 20px; background: var(--t-grad) !important; }
html.tg3 .kh > .k-hero .k-h1, html.tg3 .kh > .k-hero .k-sub, html.tg3 .kh > .k-hero .k-desc { color: #fff !important; }
html.tg3 .kh > .k-hero .k-sub { opacity: .85; }
html.tg .k-crumbs { gap: 2px; margin: 0 0 4px; align-items: center; -webkit-mask-image: linear-gradient(to left, transparent, #000 18px); mask-image: linear-gradient(to left, transparent, #000 18px); padding-left: 18px; }
html.tg body.ui2 main .k-crumbs a:not(#x) { height: 40px; padding: 0 4px; background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0;
color: var(--t-hint) !important; font: 400 13px/1 var(--t-f) !important; }
html.tg body.ui2 main .k-crumbs a:not(#x):not(.k-back)::before { content: "›"; margin-inline-end: 6px; opacity: .6; }
html.tg body.ui2 main .k-crumbs a.k-back:not(#x)::before { content: none; }
html.tg body.ui2 main .k-crumbs a.k-back + a:not(#x)::before { content: none; }
html.tg body.ui2 main .k-crumbs a.on:not(#x) { color: var(--t-tx) !important; font-weight: 700 !important; }
html.tg body.ui2 main .k-crumbs a.k-back:not(#x) { color: var(--t-acc) !important; font: 500 15px/1 var(--t-f) !important; padding-inline-end: 10px; }
html.tg .k-tabs, html.tg .ks-tabs, html.tg .kn-tabs, html.tg .sc-kind { height: 40px !important; padding: 3px !important; gap: 2px !important; border-radius: 12px !important;
background: color-mix(in srgb, var(--t-tx) 7%, transparent) !important; border: 0 !important; box-shadow: none !important; }
html.tg .k-tabs > *, html.tg .ks-tabs > *, html.tg .kn-tabs > *, html.tg .sc-kind > * { height: 100% !important; border: 0 !important; border-radius: 9px !important; background: none !important; box-shadow: none !important;
color: var(--t-tx) !important; font: 500 14px/1 var(--t-f) !important; gap: 6px !important; }
html.tg .k-tabs > .on, html.tg .ks-tabs > .on, html.tg .kn-tabs > .on, html.tg .sc-kind > .on,
html.tg .k-tabs > [aria-selected="true"], html.tg .ks-tabs > [aria-selected="true"], html.tg .sc-kind > [aria-selected="true"] {
background: var(--t-card) !important; color: var(--t-tx) !important; font-weight: 700 !important; box-shadow: 0 1px 3px rgba(0,0,0,.14) !important; }
html.tg[data-theme="dark"] .k-tabs > .on, html.tg[data-theme="dark"] .ks-tabs > .on, html.tg[data-theme="dark"] .kn-tabs > .on, html.tg[data-theme="dark"] .sc-kind > .on,
html.tg[data-theme="dark"] .k-tabs > [aria-selected="true"], html.tg[data-theme="dark"] .ks-tabs > [aria-selected="true"], html.tg[data-theme="dark"] .sc-kind > [aria-selected="true"] {
background: color-mix(in srgb, var(--t-tx) 16%, var(--t-card)) !important; }
html.tg .k-tabs svg, html.tg .ks-tabs svg, html.tg .sc-kind svg { width: 17px !important; height: 17px !important; }
html.tg .k-label { margin: 22px 16px 7px !important; font: 500 13px/1.2 var(--t-f) !important; color: var(--t-hint) !important; letter-spacing: .2px; }
html.tg .k-list { gap: 0 !important; background: var(--t-card); border-radius: 14px; overflow: hidden; }
html.tg[data-theme="light"] .k-list { box-shadow: 0 1px 2px rgba(0,0,0,.03); }
html.tg body.ui2 main .k-row:not(#x), html.tg .k-row { min-height: 56px; gap: 12px; padding: 8px 12px 8px 10px !important; border: 0 !important; border-radius: 0 !important;
background: var(--t-card) !important; box-shadow: none !important; color: var(--t-tx) !important; animation: none !important; overflow: visible; }
html.tg .k-list > .k-row + .k-row::before, html.tg .k-list > * + .k-row::before { content: ""; position: absolute; top: 0; left: 0; right: 56px; border-top: .5px solid var(--t-sep); }
html.tg body.ui2 main a.k-row:active, html.tg .k-row:active { background: color-mix(in srgb, var(--t-tx) 6%, var(--t-card)) !important; transform: none !important; }
html.tg :not(.k-list) > .k-row:not(.kh-tile) { border-radius: 14px !important; }
html.tg .k-body { gap: 3px !important; padding: 2px 0 !important; }
html.tg .k-t { font: 500 16px/1.35 var(--t-f) !important; color: var(--t-tx) !important; }
html.tg .k-pills { gap: 6px !important; }
html.tg .k-pills span { height: auto !important; padding: 0 !important; background: none !important; border: 0 !important; color: var(--t-hint) !important; font: 400 13px/1.3 var(--t-f) !important; }
html.tg .k-pills span + span::before { content: "·"; margin-inline-end: 6px; }
html.tg .k-pills svg { display: none; }
html.tg .k-pills .k-nw, html.tg .k-pills .kn-new, html.tg .k-pills [class*="red"], html.tg .k-pills [class*="soon"] {
padding: 3px 7px !important; border-radius: 6px !important; color: var(--t-red) !important; background: color-mix(in srgb, var(--t-red) 13%, transparent) !important; font-weight: 700 !important; }
html.tg .kh-d, html.tg .kn-desc { color: var(--t-hint) !important; font: 400 13px/1.3 var(--t-f) !important; }
html.tg .k-box { flex: 0 0 32px !important; width: 32px; height: 32px !important; min-height: 0 !important; padding: 0 !important; gap: 0 !important; border-radius: 9px !important; align-self: center !important;
background: var(--ic, #8E8E93) !important; border: 0 !important; box-shadow: none !important; color: #fff !important; }
html.tg .k-box small { display: none !important; }
html.tg .k-box b { font: 800 15px/1 var(--t-f) !important; color: inherit !important; }
html.tg .k-box .i3d, html.tg .k-box img { width: 20px !important; height: 20px !important; filter: brightness(0) invert(1) !important; }
html.tg .k-box.k-ext b { font-size: 9.5px !important; }
html.tg2 .k-box { flex-basis: 36px !important; width: 36px; height: 36px !important; border-radius: 11px !important; background: color-mix(in srgb, var(--ic, #8E8E93) 14%, var(--t-card)) !important; color: var(--ic, var(--t-tx)) !important; }
html.tg2 .k-box .i3d, html.tg2 .k-box img { width: 26px !important; height: 26px !important; filter: none !important; }
html.tg3 .k-box { background: linear-gradient(145deg, color-mix(in srgb, var(--ic, #8E8E93) 65%, #fff), var(--ic, #8E8E93)) !important; }
html.tg .k-go { font-size: 0 !important; gap: 0 !important; padding: 0 !important; height: auto !important; background: none !important; border: 0 !important; box-shadow: none !important; }
html.tg .k-go span { width: auto !important; height: auto !important; margin: 0 !important; background: none !important; border: 0 !important; color: var(--t-hint) !important; opacity: .6; }
html.tg .k-go svg { width: 18px; height: 18px; }
html.tg .ks-f .ks-a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
html.tg .ks-f { cursor: pointer; }
html.tg .kh-cta { margin: 10px 0 0 !important; }
html.tg .kh-stats { display: none !important; }
html.tg .kh-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 8px !important; }
html.tg .kh-grid .kh-wide { grid-column: auto !important; }
html.tg body.ui2 main .kh-grid a.kh-tile:not(#x), html.tg .kh-grid .kh-tile { flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 0; padding: 12px 2px 10px !important;
border-radius: 14px !important; text-align: center; }
html.tg .kh-grid .kh-tile:first-child { grid-column: 1 / -1 !important; flex-direction: row; justify-content: flex-start; text-align: start; padding: 10px 12px !important; }
html.tg .kh-grid .kh-tile .k-box { flex-basis: 44px !important; width: 44px; height: 44px !important; border-radius: 13px !important; }
html.tg .kh-grid .kh-tile .k-box img { width: 26px !important; height: 26px !important; }
html.tg2 .kh-grid .kh-tile .k-box img { width: 32px !important; height: 32px !important; }
html.tg .kh-grid .kh-tile .k-t { font: 700 13px/1.2 var(--t-f) !important; }
html.tg .kh-grid .kh-tile:first-child .k-t { font: 500 16px/1.3 var(--t-f) !important; }
html.tg .kh-grid .kh-tile:not(:first-child) .kh-d { display: none !important; }
html.tg .kh-head { display: flex; align-items: center; justify-content: space-between; }
html.tg .kh-head a { color: var(--t-acc) !important; background: none !important; border: 0 !important; font: 500 14px/1 var(--t-f) !important; margin: 22px 8px 7px; padding: 0 !important; height: auto !important; }
html.tg .kh-head .k-label { margin-inline: 16px 0 !important; }
html.tg .kh-bio { background: var(--t-card); border-radius: 14px; padding: 4px 14px; margin-top: 10px; }
html.tg .kh-bio > div { border: 0 !important; background: none !important; padding: 10px 0 !important; }
html.tg .kh-bio > div + div { border-top: .5px solid var(--t-sep) !important; }
html.tg .kh-bio dt { color: var(--t-hint) !important; font: 500 13px/1.3 var(--t-f) !important; }
html.tg .kh-bio dd { color: var(--t-tx) !important; font: 400 15px/1.5 var(--t-f) !important; }
html.tg .kh-me .k-box { flex-basis: 56px !important; width: 56px; height: 56px !important; border-radius: 50% !important; overflow: hidden; background: none !important; }
html.tg .kh-me .k-box img { width: 56px !important; height: 56px !important; filter: none !important; object-fit: cover; }
html.tg .kh-path { background: var(--t-card) !important; border-radius: 14px !important; border: 0 !important; box-shadow: none !important; }
html.tg .kh-path li { background: none !important; border: 0 !important; box-shadow: none !important; color: var(--t-tx) !important; }
html.tg .kh-path li i { background: var(--ic) !important; color: #fff !important; box-shadow: none !important; border: 0 !important; }
html.tg .kh-path li small { color: var(--t-hint) !important; }
html.tg .kh-end { background: none !important; border: 0 !important; box-shadow: none !important; text-align: center; }
html.tg .kh-end h2 { color: var(--t-tx) !important; font: 800 20px/1.3 var(--t-f) !important; }
html.tg .kh-end p { color: var(--t-hint) !important; }
html.tg .kh-main, html.tg .kn-cta:not(.kn-red):not(.kn-ghost), html.tg .qx-next, html.tg .kf-btn, html.tg .ks-pb, html.tg .sc-sh-go, html.tg .kn-gbtn {
min-height: 50px; border-radius: 12px !important; border: 0 !important; background: var(--t-acc) !important; color: var(--t-acc-tx) !important; box-shadow: none !important; text-shadow: none !important;
font: 700 16px/1 var(--t-f) !important; transition: transform .15s, filter .15s; }
html.tg3 .kh-main, html.tg3 .kn-cta:not(.kn-red):not(.kn-ghost), html.tg3 .qx-next, html.tg3 .kf-btn, html.tg3 .ks-pb, html.tg3 .sc-sh-go { background: linear-gradient(90deg, #7B61FF, #2AABEE) !important; color: #fff !important; }
html.tg .kh-main:active, html.tg .kn-cta:active, html.tg .qx-next:active, html.tg .kf-btn:active { transform: scale(.98); filter: brightness(.95); }
html.tg .kh-ghost, html.tg .kn-ghost, html.tg .kf-ght, html.tg .qx-alt, html.tg .kn-btn, html.tg .kf-more {
border: 0 !important; box-shadow: none !important; background: color-mix(in srgb, var(--t-acc) 13%, transparent) !important; color: var(--t-acc) !important; font-family: var(--t-f) !important; }
html.tg .kn-red, html.tg .kn-btn-red { border: 0 !important; box-shadow: none !important; background: var(--t-card) !important; color: var(--t-red) !important; }
html.tg .kn-btn-red { background: color-mix(in srgb, var(--t-red) 12%, transparent) !important; }
html.tg .kn-panel, html.tg .kn-pane, html.tg .ks-pcard, html.tg .kn-note, html.tg .k-empty, html.tg .kn-login { background: var(--t-card) !important; border: 0 !important; border-radius: 14px !important; box-shadow: none !important; color: var(--t-tx) !important; }
html.tg .kn-panel h2, html.tg .kn-panel h3 { color: var(--t-hint) !important; font: 500 13px/1.2 var(--t-f) !important; }
html.tg .kn-hint, html.tg .kn-mail, html.tg .kn-ptxt span { color: var(--t-hint) !important; }
html.tg .kn-set { background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding-block: 10px !important; }
html.tg .kn-set + .kn-set { border-top: .5px solid var(--t-sep) !important; }
html.tg .kn-set strong { color: var(--t-tx) !important; font: 500 16px/1.3 var(--t-f) !important; }
html.tg .kn-set small { color: var(--t-hint) !important; font: 400 13px/1.4 var(--t-f) !important; }
html.tg .kn-si { width: 32px !important; height: 32px !important; border-radius: 9px !important; background: var(--ic) !important; color: #fff !important; border: 0 !important; box-shadow: none !important; }
html.tg2 .kn-si { background: color-mix(in srgb, var(--ic) 14%, var(--t-card)) !important; color: var(--ic) !important; }
html.tg .switch { background: color-mix(in srgb, var(--t-tx) 16%, transparent) !important; border: 0 !important; box-shadow: none !important; }
html.tg .switch[aria-checked="true"] { background: var(--t-green) !important; }
html.tg .switch i { background: #fff !important; box-shadow: 0 2px 6px rgba(0,0,0,.2) !important; }
html.tg .kn-tile { background: var(--t-card) !important; border: 0 !important; box-shadow: none !important; border-radius: 14px !important; color: var(--t-tx) !important; }
html.tg .kn-tile b { color: var(--ic) !important; }
html.tg .kn-tile span { color: var(--t-hint) !important; }
html.tg .kn-in, html.tg input[type="search"], html.tg .kf-sb input, html.tg select.kn-in { background: color-mix(in srgb, var(--t-tx) 7%, transparent) !important; border: 0 !important; box-shadow: none !important;
border-radius: 10px !important; color: var(--t-tx) !important; font-family: var(--t-f) !important; }
html.tg .kn-field { color: var(--t-hint) !important; }
html.tg .kn-chips > *, html.tg .kf-chips > *, html.tg .sc-years > *, html.tg .sc-days > * { background: var(--t-card) !important; border: 0 !important; box-shadow: none !important; color: var(--t-tx) !important; font-family: var(--t-f) !important; }
html.tg .kn-chips > .on, html.tg .kf-chips > .on, html.tg .sc-years > .on, html.tg .sc-days > .on, html.tg .sc-days > [aria-selected="true"], html.tg .kn-chips > [aria-pressed="true"] {
background: var(--t-acc) !important; color: var(--t-acc-tx) !important; }
html.tg3 .kn-chips > .on, html.tg3 .sc-years > .on, html.tg3 .sc-days > .on, html.tg3 .sc-days > [aria-selected="true"] { background: var(--t-grad) !important; color: #fff !important; }
html.tg .sc-days > * small, html.tg .sc-days > * span { color: inherit !important; opacity: .75; }
html.tg .kf-sb { background: none !important; border: 0 !important; box-shadow: none !important; }
html.tg .kf-hint { background: var(--t-card) !important; border: 0 !important; box-shadow: none !important; border-radius: 14px !important; color: var(--t-hint) !important; }
html.tg .sc2 { --sc-tx: var(--t-tx); --sc-mut: var(--t-hint); --sc-box: var(--t-card); --sc-line: var(--t-sep); }
html.tg .sc-card { background: var(--t-card) !important; border: 0 !important; box-shadow: none !important; border-radius: 14px !important; animation: none !important; }
html.tg .sc-time { background: color-mix(in srgb, var(--ic) 14%, var(--t-card)) !important; color: var(--ic) !important; border: 0 !important; box-shadow: none !important; }
html.tg .sc-time * { color: inherit !important; }
html.tg .sc-pills span { background: none !important; border: 0 !important; color: var(--t-hint) !important; padding: 0 !important; }
html.tg .sc-more { font-size: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; position: absolute !important; inset: 0; justify-content: flex-end; padding-left: 10px !important; color: var(--t-hint) !important; }
html.tg .sc-more span { background: none !important; border: 0 !important; color: var(--t-hint) !important; opacity: .6; }
html.tg .sc-body h3, html.tg .sc-body b, html.tg .sc-body .sc-t { color: var(--t-tx) !important; }
html.tg .sc-exams, html.tg .sc-ex { background: var(--t-card) !important; border: 0 !important; box-shadow: none !important; }
html.tg .sc-ex-d { background: color-mix(in srgb, var(--t-orange) 15%, var(--t-card)) !important; color: var(--t-orange) !important; border: 0 !important; box-shadow: none !important; }
html.tg .sc-sheet .sc-sh-in { background: var(--t-card) !important; color: var(--t-tx) !important; border: 0 !important; }
html.tg .sc-now { background: var(--t-red) !important; color: #fff !important; box-shadow: none !important; }
html.tg .qx-card { background: var(--t-card) !important; border: 0 !important; box-shadow: none !important; border-radius: 16px !important; }
html.tg .qx-q { color: var(--t-tx) !important; font: 700 17px/1.5 var(--t-f) !important; }
html.tg .qx-o button { background: color-mix(in srgb, var(--t-tx) 6%, var(--t-card)) !important; border: 0 !important; box-shadow: none !important; border-radius: 12px !important; color: var(--t-tx) !important; font-family: var(--t-f) !important; }
html.tg .qx-o button b { background: color-mix(in srgb, var(--t-acc) 15%, transparent) !important; color: var(--t-acc) !important; border: 0 !important; box-shadow: none !important; }
html.tg .qx-o button.ok { background: color-mix(in srgb, var(--t-green) 16%, var(--t-card)) !important; }
html.tg .qx-o button.ok b { background: var(--t-green) !important; color: #fff !important; }
html.tg .qx-o button.bad { background: color-mix(in srgb, var(--t-red) 14%, var(--t-card)) !important; }
html.tg .qx-o button.bad b { background: var(--t-red) !important; color: #fff !important; }
html.tg .qx-seg i { background: color-mix(in srgb, var(--t-tx) 14%, transparent) !important; box-shadow: none !important; }
html.tg .qx-seg i.cur { background: var(--t-acc) !important; }
html.tg .qx-seg i.d-ok { background: var(--t-green) !important; }
html.tg .qx-seg i.d-bad { background: var(--t-red) !important; }
html.tg .qx-tm, html.tg .qx-x { background: var(--t-card) !important; border: 0 !important; box-shadow: none !important; color: var(--t-tx) !important; }
html.tg .qx-meta { color: var(--t-hint) !important; }
html.tg .qx-e { background: color-mix(in srgb, var(--t-tx) 5%, transparent) !important; border: 0 !important; color: var(--t-tx) !important; }
html.tg .ks-prev, html.tg .ks-thumbs { background: var(--t-card) !important; border: 0 !important; box-shadow: none !important; border-radius: 14px !important; }
html.tg .ks-acc, html.tg .ks-pbar, html.tg .ks-pbar2 { background: var(--t-card) !important; border: 0 !important; box-shadow: none !important; border-radius: 14px !important; }
html.tg .ks-pbar a, html.tg .ks-pbar button, html.tg .ks-pbar2 a, html.tg .ks-pbar2 button { background: none !important; border: 0 !important; box-shadow: none !important; color: var(--t-acc) !important; font-family: var(--t-f) !important; }
html.tg .kn-due-tx, html.tg .ks-due { color: var(--t-tx) !important; }
html.tg .ks-dot, html.tg .kn-c { background: var(--t-red) !important; }
@media (prefers-reduced-motion: reduce) { html.tg * { transition: none !important; } }
html.tg body .n2-nav a.on, html.tg body .bottomnav a.on { background: none !important; box-shadow: none !important; }
html.tg .ks-label i { display: none !important; }
html.tg .ks-label { display: flex; align-items: center; gap: 8px; }
html.tg .ks-label .ks-gn { background: none !important; padding: 0 !important; color: var(--t-hint) !important; font: 400 13px/1 var(--t-f) !important; }
html.tg .k-t .n3d, html.tg .k-h1 .n3d { display: inline !important; min-width: 0 !important; height: auto !important; padding: 0 !important; margin: 0 !important; background: none !important; border: 0 !important;
box-shadow: none !important; color: inherit !important; font: inherit !important; animation: none !important; text-shadow: none !important; }
html.tg body.ui2 main .kh-grid a.kh-tile.kh-wide:not(#x) { grid-column: 1 / -1 !important; flex-direction: row; justify-content: flex-start; text-align: start; padding: 10px 12px !important; }
html.tg body.ui2 main .kh-grid a.kh-tile:not(.kh-wide):not(#x) .k-go { display: none !important; }
html.tg .kh-grid .kh-tile.kh-wide .k-t { font: 500 16px/1.3 var(--t-f) !important; }
html.tg .kh-grid .kh-tile.kh-wide .kh-d { display: block !important; }
html.tg .kh-grid .kh-tile:first-child:not(.kh-wide) { grid-column: auto !important; flex-direction: column; }
html.tg .kh-cta { display: flex; gap: 8px; }
html.tg .kh-cta .kh-btn { flex: 1; min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
html.tg .kh-cta .kh-ghost { flex: 0 0 auto; padding: 0 16px; border-radius: 12px !important; font: 700 15px/1 var(--t-f) !important; }
html.tg .qx-q { background: none !important; border: 0 !important; box-shadow: none !important; }
html.tg .kn-duebox { background: var(--t-card) !important; border: 0 !important; box-shadow: none !important; border-radius: 14px !important; }
html.tg .kn-duebox .kn-bx { --ic: var(--t-orange); }
html.tg .kn-duebox.s-soon .kn-bx, html.tg .kn-duebox.s-today .kn-bx { --ic: var(--t-red); }
html.tg .kn-due-tx span { color: var(--t-hint) !important; }
html.tg .kn-duebox.s-soon .kn-due-tx span, html.tg .kn-duebox.s-today .kn-due-tx span { color: var(--t-red) !important; font-weight: 700; }
html.tg .kn-body, html.tg .kn-text { background: var(--t-card) !important; border: 0 !important; box-shadow: none !important; border-radius: 14px !important; color: var(--t-tx) !important; }
html.tg .k2 .kf-sb .searchbox { height: 44px !important; border: 0 !important; box-shadow: none !important; border-radius: 12px !important; background: color-mix(in srgb, var(--t-tx) 8%, transparent) !important; }
html.tg .k2 .kf-sb .searchbox > svg { color: var(--t-hint) !important; width: 19px; height: 19px; }
html.tg .k2 .kf-sb .searchbox button, html.tg .k2 .kf-sb button[type="submit"] { background: none !important; border: 0 !important; box-shadow: none !important; color: var(--t-acc) !important; font: 700 15px/1 var(--t-f) !important; }
html.tg .kf-gh .kf-n { background: var(--t-acc) !important; color: var(--t-acc-tx) !important; border: 0 !important; box-shadow: none !important; width: 28px; min-width: 28px !important; height: 28px !important; border-radius: 8px !important; font: 700 14px/1 var(--t-f) !important; }
html.tg .kf-gh .kf-ght b { font: 700 17px/1.3 var(--t-f) !important; }
html.tg body.ui2 main .kf-gh a.kf-more:not(#x) { height: 32px; border: 0 !important; box-shadow: none !important; background: none !important; color: var(--t-acc) !important; padding: 0 4px; font: 500 14px/1 var(--t-f) !important; }
html.tg .kf-rh { background: none !important; border: 0 !important; box-shadow: none !important; }
html.tg .kn-menu .k-box, html.tg .kn-stats .kn-tile b svg { color: inherit; }
html.tg .kn-tile b { font: 800 20px/1 var(--t-f) !important; }
html.tg .kn-pav, html.tg .kn-av { box-shadow: none !important; border: 0 !important; }
html.tg1 .k-box:has(img), html.tg3 .k-box:has(img) { background: color-mix(in srgb, var(--ic, #8E8E93) 16%, var(--t-card)) !important; }
html.tg1 .k-box img, html.tg3 .k-box img, html.tg1 .k-box .i3d, html.tg3 .k-box .i3d { filter: none !important; width: 24px !important; height: 24px !important; }
html.tg3 .k-box:has(img) { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ic, #8E8E93) 35%, transparent) !important; }
html.tg[data-theme] body header.top.top { background: var(--t-bar) !important; background-image: none !important; }
html.tg4 { --t-acc: #4be27a; --t-acc-tx: #071a0d; --t-bg: #05101c; --t-card: #0a1526; --t-tx: #f4f6fb; --t-hint: #a3adc2; --t-sep: rgba(88,120,175,.26); --t-press: rgba(255,255,255,.05); --t-bar: rgba(7,20,34,.92); --t-nav: #ff8c1f; }
html.tg4[data-theme="light"] { --t-acc: #17a34a; --t-acc-tx: #fff; --t-bg: #f2f5fa; --t-card: #fff; --t-tx: #15122b; --t-hint: #5f5b78; --t-sep: rgba(30,60,110,.14); --t-press: rgba(0,0,0,.05); --t-bar: rgba(255,255,255,.9); --t-nav: #f25a06; }
html.tg4 [class*="t-"], html.tg4 [data-kind] { --ic: var(--c2); }
html.tg4 .k-box { background: linear-gradient(180deg, var(--c1), var(--c2) 55%, var(--c3)) !important; color: #fff !important; }
html.tg4 .k-box:has(img) { background: linear-gradient(180deg, var(--c1), var(--c2) 55%, var(--c3)) !important; box-shadow: none !important; }
html.tg4 .t-g .k-box, html.tg4 .t-c .k-box { color: #04220f !important; }
html.tg4 .k-box img, html.tg4 .k-box .i3d { filter: none !important; width: 24px !important; height: 24px !important; }
html.tg4 .kh-grid .kh-tile .k-box img { width: 28px !important; height: 28px !important; }
html.tg4 .k-tabs > .on, html.tg4 .ks-tabs > .on, html.tg4 .kn-tabs > .on, html.tg4 .sc-kind > .on,
html.tg4 .k-tabs > [aria-selected="true"], html.tg4 .ks-tabs > [aria-selected="true"], html.tg4 .sc-kind > [aria-selected="true"],
html.tg4[data-theme="dark"] .k-tabs > .on, html.tg4[data-theme="dark"] .ks-tabs > .on, html.tg4[data-theme="dark"] .kn-tabs > .on, html.tg4[data-theme="dark"] .sc-kind > .on,
html.tg4[data-theme="dark"] .k-tabs > [aria-selected="true"], html.tg4[data-theme="dark"] .ks-tabs > [aria-selected="true"], html.tg4[data-theme="dark"] .sc-kind > [aria-selected="true"] {
background: linear-gradient(90deg, #8ef47c, #57e86e 55%, #3edc6a) !important; color: #071a0d !important; }
html.tg4 .kh-main, html.tg4 .kn-cta:not(.kn-red):not(.kn-ghost), html.tg4 .qx-next, html.tg4 .kf-btn, html.tg4 .ks-pb, html.tg4 .sc-sh-go, html.tg4 .kn-gbtn {
background: linear-gradient(90deg, #8ef47c, #57e86e 55%, #3edc6a) !important; color: #071a0d !important; }
html.tg4 .n2-nav a.on, html.tg4 .bottomnav a.on { color: var(--t-nav) !important; }
html.tg4 header.top .logo .pro { background: linear-gradient(180deg, #ff8c1f, #f25a06) !important; color: #fff !important; }
html.tg4 header.top .icon-btn { color: var(--t-tx) !important; }
html.tg4 .kn-chips > .on, html.tg4 .kf-chips > .on, html.tg4 .sc-days > .on, html.tg4 .sc-days > [aria-selected="true"] { background: linear-gradient(180deg, #3d1794, #26105f) !important; color: #fff !important; }
html.tg4 .sc-years > .on { background: linear-gradient(180deg, #3d1794, #26105f) !important; color: #fff !important; }
html.tg4 .kn-si { background: linear-gradient(180deg, var(--c1), var(--c2) 55%, var(--c3)) !important; color: #fff !important; }
html.tg4 .kf-gh .kf-n { background: linear-gradient(180deg, #a663ff, #7a2cf0 55%, #4e14b8) !important; color: #fff !important; }
html.tg4 .k-pills .k-nw { color: #fff !important; background: linear-gradient(180deg, #ff3b63, #e3103d) !important; }
html.tg .tgp { font-family: var(--t-f); color: var(--t-tx); padding-top: 4px; }
html.tg .tgp a { color: inherit; text-decoration: none; }
html.tg .tgp .hero { display: flex; align-items: center; gap: 14px; padding: 14px 4px 6px; }
html.tg .tgp .av { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; font: 800 24px/1 var(--t-f); color: #fff; background: linear-gradient(160deg, #6AB8FF, #2F7FE0); }
html.tg2 .tgp .av { background: linear-gradient(160deg, #B49CFF, #6A3DF0); }
html.tg3 .tgp .av { background: linear-gradient(135deg, #9C8CFF, #2AABEE); }
html.tg4 .tgp .av { background: linear-gradient(180deg, #a663ff, #7a2cf0 55%, #4e14b8); }
html.tg .tgp .av img { width: 100%; height: 100%; object-fit: cover; }
html.tg .tgp .av.big { width: 88px; height: 88px; font-size: 38px; }
html.tg .tgp .hero h1 { margin: 0; font: 800 24px/1.2 var(--t-f); color: var(--t-tx); }
html.tg .tgp .hero p, html.tg .tgp .phead p { margin: 2px 0 0; color: var(--t-hint); font: 400 15px/1.4 var(--t-f); }
html.tg3 .tgp .hero { margin: 6px 0 4px; padding: 18px 16px; border-radius: 20px; background: var(--t-grad); }
html.tg3 .tgp .hero h1 { color: #fff; } html.tg3 .tgp .hero p { color: rgba(255,255,255,.85); }
html.tg3 .tgp .hero .av { background: rgba(255,255,255,.22); box-shadow: inset 0 0 0 2px rgba(255,255,255,.5); }
html.tg .tgp .quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0 4px; }
html.tg .tgp .qa { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 2px 10px; border-radius: 14px; background: var(--t-card); font: 700 13px/1 var(--t-f); color: var(--t-tx); transition: transform .15s; }
html.tg .tgp .qa:active { transform: scale(.96); }
html.tg .tgp .grp { margin-top: 22px; }
html.tg .tgp .gh { margin: 0; padding: 0 16px 7px; font: 500 13px/1.2 var(--t-f); color: var(--t-hint); letter-spacing: .2px; }
html.tg .tgp .gl { background: var(--t-card); border-radius: 14px; overflow: hidden; }
html.tg[data-theme="light"] .tgp .gl, html.tg[data-theme="light"] .tgp .qa { box-shadow: 0 1px 2px rgba(0,0,0,.04); }
html.tg .tgp .gf { margin: 0; padding: 7px 16px 0; font: 400 13px/1.45 var(--t-f); color: var(--t-hint); }
html.tg .tgp .row { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; margin: 0; padding: 8px 14px 8px 10px; border: 0; border-radius: 0; background: none; color: var(--t-tx); font: inherit; text-align: start; cursor: pointer; }
html.tg .tgp .gl > .row + .row::before, html.tg .tgp .gl > * + form .row::before, html.tg .tgp .gl > form + .row::before { content: ""; position: absolute; top: 0; left: 0; right: 58px; border-top: .5px solid var(--t-sep); }
html.tg .tgp .gl > form { margin: 0; }
html.tg .tgp .row:active { background: var(--t-press); }
html.tg .tgp .rt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
html.tg .tgp .rt b { font: 500 16px/1.3 var(--t-f); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--t-tx); }
html.tg .tgp .rt small { font: 400 13px/1.3 var(--t-f); color: var(--t-hint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.tg .tgp .acc { flex: none; color: var(--t-hint); font: 400 15px/1 var(--t-f); }
html.tg .tgp .chev { flex: none; display: grid; color: var(--t-hint); opacity: .55; }
html.tg .tgp .danger { justify-content: flex-start; }
html.tg .tgp .danger .rt b { color: var(--t-red); }
html.tg .tgp .ib { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: #fff; background: var(--ic); }
html.tg .tgp .ib .d3 { display: none; }
html.tg .tgp .ib .g, html.tg .tgp .ib .d3 { place-items: center; }
html.tg .tgp .ib .g { display: grid; }
html.tg .tgp .ib img, html.tg .tgp .ib .i3d { width: 24px; height: 24px; object-fit: contain; filter: none !important; }
html.tg2 .tgp .ib, html.tg4 .tgp .ib { width: 36px; height: 36px; border-radius: 11px; background: color-mix(in srgb, var(--ic) 14%, var(--t-card)); }
html.tg2 .tgp .ib .g, html.tg4 .tgp .ib .g { display: none; }
html.tg2 .tgp .ib .d3, html.tg4 .tgp .ib .d3 { display: grid; color: var(--ic); }
html.tg3 .tgp .ib { background: linear-gradient(145deg, color-mix(in srgb, var(--ic) 70%, #fff), var(--ic)); }
html.tg .tgp .qa .ib { width: 44px; height: 44px; border-radius: 13px; }
html.tg .tgp .qa .ib svg { width: 22px; height: 22px; }
html.tg2 .tgp .qa .ib img, html.tg4 .tgp .qa .ib img { width: 32px; height: 32px; }
html.tg .tgp .nb { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; font: 800 15px/1 var(--t-f); color: #fff; background: var(--ic); }
html.tg2 .tgp .nb, html.tg4 .tgp .nb { color: var(--ic); background: color-mix(in srgb, var(--ic) 14%, var(--t-card)); }
html.tg .tgp .tm { display: inline-block; padding: 5px 9px; border-radius: 9px; background: color-mix(in srgb, var(--t-acc) 13%, transparent); color: var(--t-acc); font: 700 13px/1 var(--t-f); }
html.tg .tgp .tag { font-style: normal; font: 700 12.5px/1 var(--t-f); padding: 3px 7px; border-radius: 6px; display: inline-block; }
html.tg .tgp .tag.red { color: var(--t-red); background: color-mix(in srgb, var(--t-red) 13%, transparent); }
html.tg .tgp .tag.warn { color: #C77700; background: rgba(255,149,0,.14); }
html.tg[data-theme="dark"] .tgp .tag.warn { color: #FFB340; }
html.tg .tgp .mainbtn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 50px; margin: 26px 0 8px; border: 0; border-radius: 12px; background: var(--t-acc); color: var(--t-acc-tx) !important; font: 700 16px/1 var(--t-f); cursor: pointer; transition: transform .15s, filter .15s; }
html.tg .tgp .grp .mainbtn { margin-top: 12px; }
html.tg .tgp .mainbtn:active { transform: scale(.98); filter: brightness(.95); }
html.tg3 .tgp .mainbtn { background: linear-gradient(90deg, #7B61FF, #2AABEE); color: #fff !important; }
html.tg4 .tgp .mainbtn { background: linear-gradient(90deg, #8ef47c, #57e86e 55%, #3edc6a); color: #071a0d !important; }
html.tg .tgp .phead { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 10px 0 4px; }
html.tg .tgp .phead h1 { margin: 12px 0 0; font: 800 24px/1.25 var(--t-f); color: var(--t-tx); }
html.tg .tgp .tg-av { position: relative; cursor: pointer; }
html.tg .tgp .tg-cam { position: absolute; bottom: 2px; left: 2px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--t-acc); color: var(--t-acc-tx); box-shadow: 0 0 0 3px var(--t-bg); }
html.tg .tgp .pill { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; margin-top: 12px; border-radius: 18px; background: color-mix(in srgb, var(--t-acc) 13%, transparent); color: var(--t-acc) !important; font: 700 14px/1 var(--t-f); }
html.tg .tgp .tg-note { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--t-acc) 12%, var(--t-card)); color: var(--t-tx); font: 500 14px/1.5 var(--t-f); }
html.tg .tgp .tg-note.err { background: color-mix(in srgb, var(--t-red) 12%, var(--t-card)); color: var(--t-red); }
html.tg .tgp .tg-field { cursor: text; }
html.tg .tgp .tg-field input, html.tg .tgp .tg-field select { width: 100%; height: 30px; padding: 0; border: 0 !important; outline: 0 !important; box-shadow: none !important; background: none !important; color: var(--t-tx) !important; font: 500 16px/1.3 var(--t-f) !important; }
html.tg .tgp .tg-field select option { color: #000; }
html.tg .tgp .tg-link .rt b { color: var(--t-acc); }
html.tg .tgp .tg-empty { cursor: default; }
html.tg .tgp .tg-empty small { white-space: normal; }
html.tg .tgp .switch { flex: none; position: relative; width: 51px; height: 31px; padding: 0; border: 0; border-radius: 16px; cursor: pointer; }
html.tg .tgp .switch i { position: absolute; top: 2px; right: 2px; width: 27px; height: 27px; border-radius: 50%; transition: right .2s; }
html.tg .tgp .switch[aria-checked="true"] i, html.tg .tgp .switch.tg-theme[aria-pressed="true"] i { right: 22px; }
html.tg .tgp .switch.tg-theme[aria-pressed="true"] { background: var(--t-green) !important; }
html.tg .tgp .k-list { margin: 0; }
html.tg header.top .top-actions a[href="/account"], html.tg header.top .top-actions .bell { display: none !important; }
html.tg body.ui2 main .k-crumbs a.on:not(#x) { display: none !important; }
html.tg body.ui2 main .k-crumbs a.k-back:not(#x) { font-size: 0 !important; }
html.tg body.ui2 main .k-crumbs a.k-back:not(#x)::after { content: "‹ رجوع"; font: 500 15px/1 var(--t-f); }
html.tg .k-crumbs { -webkit-mask-image: none; mask-image: none; padding-left: 0; }
html.tg .tgp .gl > .tg-inst { position: relative; }
html.tg .tgp .gl > .tg-inst::before { content: ""; position: absolute; top: 0; left: 0; right: 58px; border-top: .5px solid var(--t-sep); z-index: 1; }
html.tg .tgp .gl > .tg-inst[hidden] { display: none; }
html.gx { --t-bg: #0A1226; --t-card: #0E1730; --t-tx: #fff; --t-hint: #9AA3C7; --gx-bd: rgba(120,135,230,.2); --gx-acc: #9B6BFF; --gx-row: linear-gradient(180deg, rgba(28,38,78,.75), rgba(16,24,52,.75)); }
html.gx[data-theme="light"] { --t-bg: #F2F1FA; --t-card: #fff; --t-tx: #14142B; --t-hint: #686E8E; --gx-bd: rgba(110,91,255,.2); --gx-acc: #7C4DFF; --gx-row: #fff; }
html.gx[data-theme="dark"] body { background: radial-gradient(90% 40% at 50% 0%, rgba(80,60,200,.22), transparent 70%), #0A1226 !important; }
html.gx header.top { position: relative; background: transparent !important; border-bottom: 0 !important; }
html.gx header.top::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: linear-gradient(90deg, transparent, rgba(155,107,255,.9) 50%, transparent); box-shadow: 0 0 10px rgba(155,107,255,.7); pointer-events: none; }
html.gx header.top .logo .pro { background: linear-gradient(135deg, #3B82FF, #2F5BFF) !important; box-shadow: 0 0 10px rgba(59,130,255,.6); }
html.gx header.top .theme-btn { width: 40px !important; height: 40px !important; border-radius: 50% !important; background: radial-gradient(circle at 50% 35%, #1B2250, #0E1433) !important; box-shadow: 0 0 0 1px rgba(140,150,255,.22), 0 0 14px -4px rgba(155,107,255,.8) !important; color: #C8A8FF !important; }
html.gx header.top .theme-btn svg { filter: drop-shadow(0 0 4px rgba(200,168,255,.9)); }
html.gx[data-theme="light"] header.top .theme-btn { background: #fff !important; color: var(--gx-acc) !important; }
html.gx .gxp .hero { position: relative; overflow: hidden; margin: 10px 0 0; padding: 12px 14px; border-radius: 18px; background: linear-gradient(270deg, #7C9CFF 0%, #3A63FC 18%, #2B50F8 45%, #4A55FA 72%, #7B52FF 90%, #A64DFF 100%); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55), inset 0 1px 12px rgba(255,255,255,.25), 0 0 26px -4px rgba(120,90,255,.85); }
html.gx .gxp .hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.12) 55%, transparent 70%); pointer-events: none; }
html.gx .gxp .hero .av { width: 58px; height: 58px; background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.45), rgba(255,255,255,.15)) !important; box-shadow: inset 0 0 0 2px rgba(255,255,255,.55), 0 0 16px rgba(255,255,255,.35) !important; }
html.gx .gxp .hero .av svg { width: 28px; height: 28px; }
html.gx .gxp .hero h1 { display: flex; align-items: center; gap: 8px; font-size: 24px; color: #fff; }
html.gx .gxp .hero h1 .crown { flex: none; width: 27px; height: 27px; filter: drop-shadow(0 0 6px rgba(255,190,40,.75)); }
html.gx .gxp .hero p { margin-top: 4px; color: rgba(255,255,255,.92); font-size: 13.5px; }
html.gx .gxp .quick { gap: 8px; margin-top: 12px; }
html.gx .gxp .qa { position: relative; padding: 8px 2px 10px; gap: 4px; border-radius: 16px; font: 700 13px/1 var(--t-f); color: #fff; background: radial-gradient(90% 60% at 50% 100%, color-mix(in srgb, var(--q) 32%, transparent), transparent 75%), radial-gradient(80% 50% at 50% 0%, color-mix(in srgb, var(--q) 14%, transparent), transparent 70%), #0B1226 !important; box-shadow: inset 0 0 0 2px var(--q), inset 0 0 22px -6px var(--q), 0 0 18px -2px color-mix(in srgb, var(--q) 85%, transparent) !important; }
html.gx .gxp .qa::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: 0; height: 2px; border-radius: 2px; background: #fff; box-shadow: 0 0 8px 2px var(--q); opacity: .9; }
html.gx .gxp .qa:nth-child(1) { --q: #2F80FF } html.gx .gxp .qa:nth-child(2) { --q: #FFA412 } html.gx .gxp .qa:nth-child(3) { --q: #FF3557 } html.gx .gxp .qa:nth-child(4) { --q: #22D36A }
html.gx .gxp .qa .ib.qb { width: 60px; height: 60px; background: none !important; box-shadow: none !important; border-radius: 0; }
html.gx .gxp .qa .ib.qb img { width: 66px !important; height: 66px !important; margin: -3px 0; filter: none !important; }
html.gx[data-theme="light"] .gxp .qa { color: var(--t-tx); background: radial-gradient(100% 70% at 50% 100%, color-mix(in srgb, var(--q) 14%, transparent), transparent 70%), #fff !important; }
html.gx .gxp .grp { margin-top: 12px; }
html.gx .gxp .gxh { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; padding: 4px 4px 4px 6px; border-radius: 14px; background: linear-gradient(180deg, rgba(22,30,64,.55), rgba(14,20,44,.35)); }
html.gx .gxp .gxh .hi { flex: none; display: grid; place-items: center; width: 36px; height: 36px; }
html.gx .gxp .gxh .hi img { width: 36px; height: 36px; border-radius: 10px; }
html.gx .gxp .gxh .hi-mega img { width: 30px; height: 30px; border-radius: 0; }
html.gx .gxp .gxh .gh { flex: 1; margin: 0; padding: 0; font: 700 15px/1.2 var(--t-f); color: var(--t-tx); letter-spacing: 0; }
html.gx .gxp .gxh .all { display: inline-flex; align-items: center; gap: 10px; height: 30px; padding: 0 10px 0 14px; border-radius: 15px; background: linear-gradient(180deg, #1D1A4E, #15123A); box-shadow: inset 0 0 0 1px rgba(155,107,255,.35), 0 0 12px -4px rgba(155,107,255,.7); font: 700 12px/1 var(--t-f); color: #D9B8FF; }
html.gx .gxp .gxh .all svg { width: 14px; height: 14px; }
html.gx[data-theme="light"] .gxp .gxh { background: rgba(124,77,255,.06); }
html.gx[data-theme="light"] .gxp .gxh .all { background: #fff; color: var(--gx-acc); }
html.gx .gxp .gl { background: none !important; box-shadow: none !important; overflow: visible; display: flex; flex-direction: column; gap: 5px; border-radius: 0; }
html.gx .gxp .gl > .row + .row::before { display: none; }
html.gx .gxp .row { gap: 12px; min-height: 52px; padding: 5px 10px 5px 12px; border-radius: 12px; background: var(--gx-row); box-shadow: inset 0 0 0 1px var(--gx-bd), 0 4px 14px -8px rgba(0,0,0,.6); }
html.gx[data-theme="light"] .gxp .row { box-shadow: inset 0 0 0 1px var(--gx-bd), 0 2px 8px -4px rgba(60,40,140,.15); }
html.gx .gxp .rt { gap: 2px; } html.gx .gxp .rt b { font: 700 14.5px/1.3 var(--t-f); } html.gx .gxp .rt small { font-size: 12.5px; }
html.gx .gxp .chev { opacity: .75; color: #C9CDEB; } html.gx .gxp .chev svg { width: 16px; height: 16px; }
html.gx[data-theme="light"] .gxp .chev { color: var(--t-hint); }
html.gx .gxp .ib.gt { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; color: #fff; background: linear-gradient(160deg, var(--ga, #A877FF), var(--gb, #6A35F0)) !important; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3), inset 0 2px 3px rgba(255,255,255,.35), inset 0 -3px 5px rgba(0,0,0,.18), 0 0 14px -3px var(--gb, #6A35F0) !important; }
html.gx .gxp .ib.gt img { width: 28px; height: 28px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0,0,0,.3)) !important; }
html.gx .gxp .ib.gt.pic { background: none !important; box-shadow: 0 0 12px -4px rgba(140,140,255,.5) !important; }
html.gx .gxp .ib.gt.pic img { width: 42px; height: 42px; border-radius: 11px; filter: none !important; }
html.gx .gxp .ib.nbx { font: 800 17px/1 var(--t-f); }
html.gx .gxp .tm { padding: 7px 12px; border-radius: 10px; background: linear-gradient(180deg, #221E5A, #17144A); box-shadow: inset 0 0 0 1px rgba(155,107,255,.45), 0 0 12px -4px rgba(155,107,255,.8); color: #CDB0FF; font: 800 13px/1 var(--t-f); }
html.gx[data-theme="light"] .gxp .tm { background: #EEEAFF; color: #5B3FE0; box-shadow: inset 0 0 0 1px rgba(124,77,255,.3); }
html.gx .gxp .tag.red { padding: 3px 7px; border-radius: 7px; background: #6E1027; color: #FF6B82; font-size: 11.5px; }
html.gx[data-theme="light"] .gxp .tag.red { background: #FFE3E8; color: #D91A3C; }
html.gx .gxp .gx-news { padding: 4px 5px 5px; border-radius: 18px; background: linear-gradient(180deg, rgba(30,36,110,.35), rgba(14,20,50,.4)); box-shadow: inset 0 0 0 1.5px rgba(110,110,255,.75), 0 0 22px -4px rgba(100,100,255,.75); }
html.gx .gxp .gx-news .gxh { background: none; margin-bottom: 4px; }
html.gx[data-theme="light"] .gxp .gx-news { background: rgba(124,77,255,.05); }
html.gx .gxp .mainbtn { height: 50px; border-radius: 14px; background: linear-gradient(270deg, #3A63FC, #7B52FF) !important; box-shadow: 0 8px 24px -6px rgba(110,90,255,.8); }
html.gx .n2-nav { left: 10px !important; right: 10px !important; bottom: calc(10px + env(safe-area-inset-bottom)) !important; border-radius: 20px !important; background: rgba(12,18,40,.92) !important; box-shadow: inset 0 0 0 1px rgba(130,140,240,.2), 0 10px 30px rgba(0,0,0,.5) !important; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
html.gx .n2-nav a { color: #C9CDE6 !important; }
html.gx .n2-nav a.on { color: #fff !important; font-weight: 800 !important; background: radial-gradient(60% 70% at 50% 40%, rgba(155,107,255,.35), transparent 70%) !important; }
html.gx .n2-nav a.on svg { color: #B57BFF; filter: drop-shadow(0 0 6px rgba(181,123,255,.95)); }
html.gx[data-theme="light"] .n2-nav { background: rgba(255,255,255,.94) !important; box-shadow: inset 0 0 0 1px rgba(124,77,255,.15), 0 8px 24px rgba(60,40,140,.15) !important; }
html.gx[data-theme="light"] .n2-nav a { color: #6B6F8C !important; } html.gx[data-theme="light"] .n2-nav a.on { color: var(--gx-acc) !important; }
html.gx .gxp .gl { gap: 8px; }
html.gx .gxp .row { box-shadow: inset 0 0 0 1px rgba(140,155,255,.3), inset 0 1px 0 rgba(255,255,255,.06), 0 6px 16px -8px rgba(0,0,0,.7); }
html.gx .gxp .grp { position: relative; margin-top: 30px; }
html.gx .gxp .grp::before { content: ""; position: absolute; top: -16px; left: 8%; right: 8%; height: 1.5px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(155,107,255,.85) 50%, transparent); box-shadow: 0 0 10px rgba(155,107,255,.6); pointer-events: none; }
html.gx .gxp .quick + .grp { margin-top: 30px; }
html.gx[data-theme="light"] body { background: radial-gradient(90% 35% at 50% 0%, rgba(124,77,255,.16), transparent 70%), radial-gradient(70% 30% at 100% 60%, rgba(59,130,255,.10), transparent 70%), radial-gradient(70% 30% at 0% 85%, rgba(170,77,255,.10), transparent 70%), #F2F1FA !important; background-attachment: fixed !important; }
html.gx[data-theme="light"] .gxp .row { box-shadow: inset 0 0 0 1px rgba(110,91,255,.28), 0 4px 12px -6px rgba(60,40,140,.22); }
html.gx[data-theme="light"] .gxp .grp::before { background: linear-gradient(90deg, transparent, rgba(124,77,255,.55) 50%, transparent); box-shadow: none; }
html.gx[data-theme="dark"]:not(#x), html.gx[data-theme="dark"] body.ui2:not(#x), html.gx[data-theme="dark"] body:not(#x) { background: radial-gradient(80% 30% at 85% 0%, rgba(120,80,255,.38), transparent 70%), radial-gradient(70% 30% at 0% 45%, rgba(47,90,255,.22), transparent 70%), radial-gradient(70% 30% at 100% 85%, rgba(170,77,255,.22), transparent 70%), linear-gradient(180deg, #1A1452 0%, #111A48 45%, #0C1538 100%) !important; background-attachment: fixed !important; }
html.gx[data-theme="light"]:not(#x), html.gx[data-theme="light"] body.ui2:not(#x), html.gx[data-theme="light"] body:not(#x) { background: radial-gradient(80% 30% at 85% 0%, rgba(124,77,255,.30), transparent 70%), radial-gradient(70% 30% at 0% 45%, rgba(59,130,255,.20), transparent 70%), radial-gradient(70% 30% at 100% 85%, rgba(190,90,255,.20), transparent 70%), linear-gradient(180deg, #E4DBFF 0%, #ECEBFF 45%, #F1E9FF 100%) !important; background-attachment: fixed !important; }
html.gx .gxp .gl > .row + .row::before { display: block; content: ""; position: absolute; top: -5px; left: 12%; right: 12%; height: 1px; border: 0; background: linear-gradient(90deg, transparent, rgba(170,140,255,.75) 50%, transparent); pointer-events: none; }
html.gx[data-theme="light"] .gxp .gl > .row + .row::before { background: linear-gradient(90deg, transparent, rgba(124,77,255,.55) 50%, transparent); }
html.gx[data-theme="light"] .gxp .row { background: rgba(255,255,255,.92); }
html.gx[data-theme="light"] .gxp .gxh { background: rgba(255,255,255,.55); box-shadow: inset 0 0 0 1px rgba(124,77,255,.15); }
html.gx[data-theme="light"] .gxp .gx-news { background: rgba(255,255,255,.4); }
html.gx[data-theme="light"] header.top { background: rgba(255,255,255,.35) !important; }
html.gx[data-theme="light"] .gxp .qa { background: radial-gradient(100% 70% at 50% 100%, color-mix(in srgb, var(--q) 16%, transparent), transparent 70%), rgba(255,255,255,.92) !important; }
html.gx .gxp .gl { gap: 13px; }
html.gx .gxp .gl > .row + .row::before { top: -8px; left: 6%; right: 6%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #A98BFF 30%, #C7B3FF 50%, #A98BFF 70%, transparent); box-shadow: 0 0 8px rgba(155,107,255,.8); }
html.gx[data-theme="light"] .gxp .gl > .row + .row::before { background: linear-gradient(90deg, transparent, #8A63FF 30%, #6E44FF 50%, #8A63FF 70%, transparent); box-shadow: 0 0 6px rgba(124,77,255,.45); }
html.tg .k2 .kf-sb .searchbox input:not(#x) { background: transparent !important; }
html.tg3 .k2 .kf-sb .searchbox button.kf-go:not(#x), html.tg3 .k2 .kf-sb button.kf-go[type="submit"]:not(#x) { height: 36px; margin-inline-end: 4px; padding: 0 14px; border-radius: 10px; background: var(--t-grad) !important; color: #fff !important; }
html.tg3 .kn-chips > :not(.on):not([aria-pressed="true"]), html.tg3 .kf-chips > :not(.on) { background: color-mix(in srgb, var(--t-acc) 13%, transparent) !important; }
html.tg3 .ks-pbar { gap: 8px; padding: 8px; }
html.tg3 .ks-pbar a:not(#x), html.tg3 .ks-pbar button:not(#x), html.tg3 .ks-pbar2 a:not(#x), html.tg3 .ks-pbar2 button:not(#x) { border-radius: 12px !important; border: 0 !important; background: color-mix(in srgb, var(--t-acc) 14%, transparent) !important; }
html.tg3 .ks-pbar > :first-child:not(#x) { background: var(--t-grad) !important; color: #fff !important; }
html.tg3 .ks-pbar > :first-child:not(#x) svg { color: #fff !important; }