/* CHIK Home: compact alternate. Original glass version remains at ../home/. */
:root {
  color-scheme: dark;
  --bg: #030405;
  --text: #eef1f5;
  --muted: #a4acb7;
  --yellow: #ffd43b;
  --credit: #8cff28;
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); font-size: 14px; line-height: 1.4; }
button, input { font: inherit; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--yellow); outline-offset: 4px; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
.skip-link { position: fixed; z-index: 20; top: -80px; left: 20px; padding: 10px 16px; border-radius: 12px; background: var(--yellow); color: #111; font-weight: 600; }
.skip-link:focus { top: 12px; }
.app-shell { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 28px; width: 100%; min-height: 100dvh; padding-right: 28px; }
.glass { position: relative; isolation: isolate; background: linear-gradient(120deg, #ffffff03, #ffffff00 65%), #111418ed; border: 1px solid #ffffff12; box-shadow: inset 0 1px 0 #ffffff04; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.sidebar { position: sticky; top: 0; display: flex; flex-direction: column; align-self: start; height: 100dvh; min-height: 0; padding: 27px 12px 18px; overflow-y: auto; border-left: 0; border-block: 0; border-radius: 0 24px 24px 0; background: linear-gradient(160deg, #12161a, #0e1115 65%); scrollbar-width: thin; }
.brand { align-self: start; flex-shrink: 0; margin: 0 0 26px 12px; color: #f6f7f9; font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -1.5px; }
.brand span, .card-brand span { color: var(--yellow); }
.brand span { text-shadow: 0 0 12px #ffd43b22; }
.main-nav, .utility-nav { display: flex; flex-direction: column; gap: 5px; flex-shrink: 0; }
.nav-link { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 10px 13px; border: 1px solid #ffffff25; border-radius: 13px; color: #edf0f5; background: #ffffff04; font-size: 14px; font-weight: 600; line-height: 1.3; white-space: nowrap; transition: background .22s ease, border-color .22s ease, color .22s ease, box-shadow .22s ease; }
.nav-link:hover { color: #fff; background: #ffffff0b; border-color: #ffffff45; }
.nav-link.active { color: #fff; font-weight: 650; background: linear-gradient(115deg, #ffffff18, #ffffff08); border-color: #ffffff8a; box-shadow: 0 0 16px #ffffff12, inset 0 0 12px #ffffff06; }
.nav-link.active .icon { filter: drop-shadow(0 0 5px #ffffff70); }
.nav-link:focus-visible { outline-color: #fff; }
.utility-nav { margin: auto 4px 0; padding-top: 16px; border-top: 1px solid #ffffff10; gap: 5px; }
.utility-nav .nav-link { padding-inline: 9px; font-size: 13px; }
.main-content { min-width: 0; padding-bottom: 20px; }
.page-header { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 84px; padding-block: 16px; }
h1 { font-size: 32px; line-height: 1.2; font-weight: 650; letter-spacing: -.9px; }
.header-tools { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; margin-left: auto; }
.quick-balance { display: inline-flex; align-items: center; justify-content: space-between; flex-shrink: 0; gap: 18px; min-height: 52px; min-width: 148px; padding: 10px 11px 10px 18px; border-radius: 26px; border-color: #ffffff2d; }
.quick-balance strong { color: #fff; font-size: 18px; line-height: 1.2; font-weight: 700; font-variant-numeric: tabular-nums; }
.quick-balance-plus { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--yellow); color: #1a1a0c; transition: transform .2s ease; }
.quick-balance-plus .icon { width: 17px; height: 17px; }
.quick-balance:hover { border-color: #ffd43b35; }
.quick-balance:hover .quick-balance-plus { transform: rotate(90deg); }
.profile { position: relative; z-index: 5; }
.profile-trigger { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 6px 14px 6px 7px; border-radius: 21px; cursor: pointer; list-style: none; font-size: 13px; }
.profile-trigger::-webkit-details-marker { display: none; }
.profile-email { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: #30353e; color: #e4e8ef; font-size: 16px; font-weight: 600; }
.profile-trigger .icon { width: 14px; height: 14px; margin-left: 4px; color: #aeb6c2; transition: transform .26s cubic-bezier(.2,.7,.2,1); }
.profile.is-menu-open .icon-chevron { transform: rotate(180deg); }
.profile-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 220px; padding: 6px; border-radius: 16px; background-color: #181c21f7; transform-origin: top right; box-shadow: 0 12px 28px #0004; }
.profile-menu a { display: block; padding: 12px; border-radius: 10px; font-size: 13px; }
.profile-menu a:hover { background: #ffffff07; }
.balance-panel { display: flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 244px; padding: 20px 28px; border-radius: 24px; background: linear-gradient(115deg, #ffffff03, transparent 60%), #11151af2; }
.balance-content { position: relative; z-index: 2; flex-shrink: 0; }
.balance-label { color: #aeb6c1; font-size: 13px; line-height: 1.4; font-weight: 400; }
.site-balance { display: flex; align-items: baseline; margin: 6px 0 20px; font-size: 48px; line-height: 1.1; font-weight: 650; letter-spacing: -1.7px; font-variant-numeric: tabular-nums; }
.currency { margin-right: 1px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 40px; padding: 10px 16px; border-radius: 12px; font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.3; white-space: nowrap; cursor: pointer; transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button-primary { background: #ffd43b; color: #161606; border: 1px solid #ffdb56; box-shadow: inset 0 1px 0 #ffffff1a; }
.button-primary:hover { background: #ffdf65; }
.button-secondary { color: #e1e5eb; border: 1px solid #ffffff1f; background: #ffffff03; }
.button-secondary:hover { background: #ffffff08; border-color: #ffffff30; }
.balance-action { min-width: 190px; justify-content: space-between; }
.balance-visuals { display: flex; align-items: flex-end; justify-content: flex-end; gap: 30px; min-width: 0; flex-shrink: 0; padding-right: 8px; }
.mascot { --h: 112px; position: relative; flex-shrink: 0; width: calc(var(--h) * 425 / 665); height: var(--h); margin: 0 10px 4px 0; overflow: hidden; transform: scaleX(-1); }
.mascot-art { display: block; width: 100%; height: 100%; background-image: url('/assets/chick.webp'); background-repeat: no-repeat; background-size: calc(var(--h) * 1971 / 665) calc(var(--h) * 798 / 665); background-position: calc(var(--h) * -1435 / 665) calc(var(--h) * -80 / 665); }
.payment-card { --card-padding: 18px 20px; --card-radius: 20px; position: relative; flex-shrink: 0; width: 380px; min-height: 200px; perspective: 1600px; }
.card-rotator { display: grid; width: 100%; min-height: inherit; transform-style: preserve-3d; transition: transform .72s cubic-bezier(.22,.68,.15,1); }
.payment-card.is-flipped .card-rotator { transform: rotateY(180deg); }
.card-face { position: relative; isolation: isolate; display: flex; flex-direction: column; grid-area: 1 / 1; min-width: 0; min-height: inherit; padding: var(--card-padding); overflow: clip; border-radius: var(--card-radius); border: 1px solid #ffffff1c; background: linear-gradient(135deg, #101318, #0a0d10 75%); box-shadow: inset 0 1px 0 #ffffff04; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.card-face-front::before, .card-face-front::after { position: absolute; content: ""; z-index: -1; width: 145px; height: 145px; right: -30px; bottom: -30px; border-radius: 50%; border: 1px solid #ffffff03; pointer-events: none; }
.card-face-front::after { right: 40px; bottom: -10px; }
.card-face-back { transform: rotateY(180deg); pointer-events: none; }
.payment-card.is-flipped .card-face-front { pointer-events: none; }
.payment-card.is-flipped .card-face-back { pointer-events: auto; }
.card-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.card-brand { font-size: 26px; line-height: 1.05; font-weight: 800; letter-spacing: -1.2px; }
.card-number-row { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.card-chip { position: relative; display: block; flex-shrink: 0; width: 34px; height: 28px; overflow: hidden; border-radius: 6px; background: linear-gradient(115deg, #c8bd83, #b4a972); }
.card-chip::before { position: absolute; content: ""; inset: 0; background: linear-gradient(90deg, transparent 31%, #86784c66 31%, #86784c66 33%, transparent 33%, transparent 67%, #86784c66 67%, #86784c66 69%, transparent 69%), linear-gradient(transparent 32%, #86784c66 32%, #86784c66 35%, transparent 35%, transparent 65%, #86784c66 65%, #86784c66 68%, transparent 68%); }
.card-chip i { position: absolute; inset: 7px 11px; border: 1px solid #86784c66; border-radius: 3px; background: #c7bc83; }
.card-number { display: flex; align-items: center; gap: 11px; min-width: 0; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 17px; font-weight: 500; letter-spacing: .6px; line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums; }
.card-number-group { color: #9aa3af; }
.card-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 18px; }
.card-funds h3 { margin-bottom: 3px; color: #a4adba; font-size: 11px; font-weight: 400; line-height: 1.3; }
.card-funds p { font-size: 24px; font-weight: 650; letter-spacing: -.6px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.card-actions { display: flex; align-items: center; gap: 7px; }
.button-small { min-height: 34px; padding: 8px 11px; border-radius: 11px; font-size: 12px; gap: 7px; }
.button-small .icon { width: 15px; height: 15px; }
.card-details-title { font-size: 16px; font-weight: 600; line-height: 1.25; letter-spacing: -.2px; }
.card-demo { padding: 3px 6px; color: #9ba5b1; font-size: 9px; border: 1px solid #ffffff12; border-radius: 6px; }
.card-requisites { display: grid; grid-template-columns: 1fr auto auto; column-gap: 18px; row-gap: 10px; margin-top: 12px; }
.card-requisites > div { min-width: 0; }
.card-requisite-number { grid-column: 1 / -1; }
.card-requisites dt { margin-bottom: 4px; color: #a1aab7; font-size: 10px; line-height: 1.2; }
.card-requisites dd { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 13px; line-height: 1.2; font-weight: 500; font-variant-numeric: tabular-nums; }
.card-requisite-number dd { font-size: 17px; letter-spacing: .3px; white-space: nowrap; }
.card-back-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 12px; }
.card-back-footer > span { max-width: 145px; color: #939eac; font-size: 9px; line-height: 1.4; }
.card-back-footer .button { min-height: 32px; padding-block: 7px; }
.icon-back { transform: rotate(180deg); }
.operations-section { width: 100%; margin-top: 20px; padding: 20px; border-radius: 22px; background: #101317f2; }
.section-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 2px 14px; }
.section-header h2 { font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -.3px; }
.operations-scroll { max-height: 376px; padding: 2px 8px 2px 2px; overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: #636a744d transparent; border-radius: 12px; }
.operations-scroll::-webkit-scrollbar { width: 5px; }
.operations-scroll::-webkit-scrollbar-thumb { border-radius: 999px; background: #636a7480; }
.operations-scroll:focus-visible { outline: 2px solid #ffd43b80; outline-offset: 3px; }
.operations-list { display: grid; gap: 4px; padding: 0; margin: 0; list-style: none; }
.operation { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 18px; min-height: 62px; padding: 10px 14px; border-radius: 12px; background: #ffffff03; transition: background .18s ease; }
.operation:hover { background: #ffffff07; }
.operation-source { display: flex; align-items: center; gap: 12px; min-width: 0; }
.operation-method { display: grid; gap: 3px; min-width: 0; }
.operation-method strong { font-size: 13px; line-height: 1.25; font-weight: 500; color: #d5dce5; }
.operation-method small { font-size: 11px; line-height: 1.25; font-weight: 400; color: #9ba5b2; font-variant-numeric: tabular-nums; }
.operation-mark { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 10px; }
.incoming { color: var(--credit); background: #8cff280b; }
.outgoing { color: #b7c0cc; background: #ffffff05; }
.operation-mark .icon { width: 18px; height: 18px; }
.operation-mark .icon-arrow { --icon: url('/assets/icons/arrow-right-bold.svg'); }
.icon-deposit { transform: rotate(135deg); }
.icon-transfer { transform: rotate(-45deg); }
.operation-name { color: #e0e5ec; font-size: 14px; font-weight: 600; line-height: 1.3; text-align: center; }
.operation-amount { display: grid; justify-items: end; gap: 3px; font-size: 16px; line-height: 1.25; font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
.operation-amount strong { font: inherit; }
.operation-amount small { color: #98a3b1; font-size: 10px; font-weight: 400; }
.positive { color: var(--credit); }
.page-footer { display: flex; justify-content: flex-end; padding-top: 10px; }
.demo-badge { padding: 4px 9px; border: 1px solid #ffffff0a; border-radius: 8px; color: #848f9d; font-size: 10px; }
.icon { --icon: url('/assets/icons/home.svg'); display: inline-block; flex-shrink: 0; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.icon-home { --icon: url('/assets/icons/home.svg'); }
.icon-card { --icon: url('/assets/icons/credit-card.svg'); }
.icon-circle-plus { --icon: url('/assets/icons/circle-plus.svg'); }
.icon-bag { --icon: url('/assets/icons/shopping-bag.svg'); }
.icon-receipt { --icon: url('/assets/icons/receipt.svg'); }
.icon-users { --icon: url('/assets/icons/users.svg'); }
.icon-file { --icon: url('/assets/icons/file-text.svg'); }
.icon-settings { --icon: url('/assets/icons/settings.svg'); }
.icon-chevron { --icon: url('/assets/icons/chevron-down.svg'); }
.icon-arrow { --icon: url('/assets/icons/arrow-right.svg'); width: 17px; height: 17px; }
.icon-plus { --icon: url('/assets/icons/plus.svg'); }
.icon-minus { --icon: url('/assets/icons/minus.svg'); }
@media (max-width: 1200px) {
  .app-shell { grid-template-columns: 200px minmax(0, 1fr); gap: 20px; padding-right: 20px; }
  .sidebar { padding-inline: 10px; }
  .nav-link { font-size: 13px; padding-inline: 11px; gap: 10px; }
  .balance-panel { padding-inline: 22px; gap: 24px; }
  .balance-visuals { gap: 18px; padding: 0; }
  .mascot { --h: 100px; margin-right: 0; }
  .payment-card { width: 360px; }
  .card-actions { gap: 6px; }
  .button-small { padding-inline: 9px; font-size: 11px; }
}
@media (max-width: 1100px) {
  .profile-email { display: none; }
  .profile-trigger { gap: 7px; padding-right: 10px; }
  .profile-trigger .icon { margin-left: 0; }
}
@media (max-width: 980px) {
  .balance-panel { display: grid; gap: 22px; padding: 22px; }
  .balance-content { display: grid; grid-template-columns: 1fr auto; column-gap: 20px; align-items: center; }
  .site-balance { grid-column: 1; margin: 5px 0 0; font-size: 44px; }
  .balance-action { grid-column: 2; grid-row: 1 / 3; min-width: 170px; }
  .balance-visuals { justify-content: space-between; width: 100%; gap: 24px; }
  .mascot { --h: 100px; margin: 0 0 8px 5px; }
  .payment-card { width: min(100%, 380px); }
}
@media (max-width: 760px) {
  .app-shell { display: block; padding: 0; }
  .sidebar { position: relative; height: auto; min-height: 0; padding: 20px 13px 10px; border-radius: 0 0 20px 20px; overflow: visible; }
  .brand { margin: 0 0 16px 7px; font-size: 28px; }
  .main-nav { flex-direction: row; gap: 5px; overflow-x: auto; padding-bottom: 3px; scrollbar-width: thin; }
  .nav-link { flex-shrink: 0; min-height: 40px; padding: 9px 12px; font-size: 13px; border-radius: 12px; gap: 8px; }
  .nav-link .icon { width: 18px; height: 18px; }
  .utility-nav { position: absolute; top: 15px; right: 13px; flex-direction: row; gap: 5px; padding: 0; margin: 0; border: 0; }
  .utility-nav .nav-link { width: 34px; height: 34px; min-height: 34px; padding: 8px; }
  .utility-nav .nav-link > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .main-content { padding: 0 16px 18px; }
  .page-header { min-height: 74px; padding-block: 15px; gap: 14px; }
  h1 { font-size: 26px; letter-spacing: -.7px; }
  .header-tools { gap: 8px; }
  .quick-balance { min-width: 128px; min-height: 48px; gap: 12px; padding: 8px 9px 8px 14px; }
  .quick-balance strong { font-size: 16px; }
  .profile-menu { min-width: 210px; }
  .balance-panel { border-radius: 22px; }
}
@media (max-width: 620px) {
  .balance-panel { position: relative; display: block; padding: 20px; }
  .balance-content { display: block; }
  .balance-label { font-size: 12px; }
  .site-balance { margin: 6px 0 18px; font-size: 42px; letter-spacing: -1.3px; }
  .balance-action { min-width: 180px; }
  .balance-visuals { display: block; margin-top: 22px; }
  .mascot { --h: 88px; position: absolute; top: 24px; right: 23px; margin: 0; }
  .payment-card { width: 100%; }
  .card-number-row { gap: 12px; margin-top: 16px; }
  .card-number { font-size: 15px; gap: 9px; letter-spacing: .5px; }
  .card-back-footer > span { max-width: 120px; }
  .operations-section { margin-top: 16px; padding: 16px 12px 12px; border-radius: 20px; }
  .section-header { margin: 0 3px 12px; }
  .section-header h2 { font-size: 17px; }
  .operations-scroll { max-height: 360px; }
  .operation { grid-template-columns: minmax(0, 1fr) auto; min-height: 84px; gap: 8px 14px; padding: 12px; }
  .operation-name { grid-row: 1; grid-column: 1 / -1; font-size: 13px; }
  .operation-source { gap: 10px; }
  .operation-method strong { font-size: 12px; }
  .operation-method small { font-size: 10px; }
  .operation-amount { grid-row: 2; grid-column: 2; font-size: 15px; }
  .operation-mark { width: 30px; height: 30px; }
  .operation-mark .icon { width: 17px; height: 17px; }
}
@media (max-width: 420px) {
  .payment-card { --card-padding: 18px; min-height: 212px; }
  .card-bottom { flex-wrap: wrap; align-items: stretch; gap: 12px; padding-top: 16px; }
  .card-funds { display: flex; align-items: center; justify-content: space-between; width: 100%; }
  .card-funds h3 { margin: 0; }
  .card-funds p { font-size: 22px; }
  .card-actions { width: 100%; }
  .card-actions .button { flex: 1; min-height: 36px; font-size: 12px; }
  .card-requisite-number dd { font-size: 16px; letter-spacing: 0; }
  .card-requisites { column-gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .glass { background: #12161b; backdrop-filter: none; -webkit-backdrop-filter: none; }
}