:root {
    --bg: #050712;
    --bg2: #070b18;
    --panel: #0d1426;
    --panel2: #121a31;
    --panel3: #171f3a;
    --line: rgba(174,191,255,.14);
    --line2: rgba(174,191,255,.24);
    --text: #dfe6f7;
    --muted: #9faacc;
    --soft: #c4cee9;
    --blue: #3176ff;
    --cyan: #22d3ee;
    --green: #17c991;
    --purple: #8b3ffc;
    --pink: #ec2f83;
    --red: #ef4444;
    --amber: #f59e0b;
    --sidebar: 320px;
    --radius: 26px;
    --shadow: 0 24px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
    --glow: 0 0 0 1px rgba(255,255,255,.06), 0 18px 48px rgba(60,85,210,.2);
}

* {
    box-sizing: border-box
}

html,body {
    height: 100%;
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    font-weight: 700;
    letter-spacing: -.01em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility
}

body {
    overflow: hidden;
    background: radial-gradient(circle at 75% -10%,rgba(100,57,210,.28),transparent 36%), radial-gradient(circle at 8% 12%,rgba(0,211,180,.14),transparent 34%), linear-gradient(135deg,#050712,#09061a 55%,#03130e)
}

button,input,select,textarea {
    font: inherit
}

button {
    cursor: pointer
}

a {
    color: inherit
}

.hidden {
    display: none!important
}

.mobile-only {
    display: none!important
}

.muted {
    color: var(--muted)
}

.pass-wrap {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    border: 1px solid var(--line2);
    background: #211138;
    border-radius: 18px;
    margin-top: 10px;
    overflow: hidden
}

.pass-wrap input {
    margin: 0;
    border: 0!important;
    background: transparent!important
}

.pass-wrap button {
    height: 44px;
    width: 54px;
    border: 0;
    border-left: 1px solid var(--line);
    background: rgba(255,255,255,.08);
    color: white
}

.app-view {
    height: 100dvh;
    min-height: 100vh;
    display: grid;
    grid-template-columns: var(--sidebar) minmax(0,1fr);
    overflow: hidden;
    background: linear-gradient(90deg,#050507 0,var(--bg) var(--sidebar),#08101c)
}

.user-avatar {
    width: 50px;
    height: 50px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg,#2f6bff,#8b3ffc);
    font-size: 20px
}

.ks-page {
    max-width: 1320px;
    margin: 0 auto
}

.page-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 28px 30px;
    border-radius: 30px;
    border: 1px solid var(--line);
    background: radial-gradient(circle at 95% 5%,rgba(139,63,252,.3),transparent 36%),linear-gradient(135deg,rgba(6,70,75,.75),rgba(14,20,42,.92));
    box-shadow: var(--shadow);
    margin-bottom: 18px
}

.hero-left {
    display: flex;
    gap: 18px;
    align-items: center;
    min-width: 0
}

.hero-icon {
    width: 64px;
    height: 64px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    font-size: 31px;
    background: linear-gradient(135deg,rgba(49,118,255,.38),rgba(139,63,252,.34));
    border: 1px solid var(--line2)
}

.page-kicker,.mini-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .28em;
    color: #a8c7ff;
    font-weight: 950
}

.page-hero h1 {
    font-size: 36px;
    letter-spacing: -1.4px;
    margin: 5px 0 7px
}

.page-hero p {
    margin: 0;
    color: #c8d1ec;
    line-height: 1.55
}

.hero-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end
}

.ks-stack {
    display: grid;
    gap: 16px
}

.ks-grid {
    display: grid;
    gap: 14px
}

.grid-2 {
    grid-template-columns: repeat(2,minmax(0,1fr))
}

.grid-3 {
    grid-template-columns: repeat(3,minmax(0,1fr))
}

.grid-4 {
    grid-template-columns: repeat(4,minmax(0,1fr))
}

.grid-5 {
    grid-template-columns: repeat(5,minmax(0,1fr))
}

.layout-2 {
    grid-template-columns: minmax(360px,.9fr) minmax(0,1.3fr);
    align-items: start
}

.ks-card {
    border: 1px solid var(--line);
    border-radius: 24px;
    background: linear-gradient(180deg,rgba(17,27,50,.9),rgba(8,12,25,.94));
    box-shadow: var(--glow);
    padding: 18px
}

.ks-card.soft {
    background: linear-gradient(135deg,rgba(13,83,95,.25),rgba(12,17,35,.92))
}

.section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px
}

.section-title h2 {
    margin: 0;
    font-size: 24px
}

.section-title p {
    margin: 3px 0 0;
    color: var(--muted)
}

.ks-btn {
    border: 1px solid var(--line);
    border-radius: 15px;
    padding: 12px 17px;
    color: #fff;
    background: #141c31;
    font-weight: 950;
    box-shadow: 0 10px 28px rgba(0,0,0,.18);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    line-height: 1.15
}

.ks-btn:hover {
    filter: brightness(1.08);
    border-color: rgba(255,255,255,.28)
}

.ks-btn.small {
    padding: 9px 12px;
    font-size: 12px;
    border-radius: 12px
}

.ks-wide {
    width: 100%
}

.ks-primary {
    background: linear-gradient(135deg,#3176ff,#8b3ffc)
}

.ks-blue {
    background: linear-gradient(135deg,#3b82f6,#2563eb)
}

.ks-purple {
    background: linear-gradient(135deg,#8b5cf6,#7c3aed)
}

.ks-success {
    background: linear-gradient(135deg,#17c991,#12a876)
}

.ks-danger {
    background: linear-gradient(135deg,#ec2f83,#ef4444)
}

.ks-ghost {
    background: rgba(255,255,255,.06)
}

.icon-btn {
    width: 46px;
    height: 46px;
    border: 1px solid var(--line);
    background: #121a31;
    color: #fff;
    border-radius: 14px
}

.ks-actions-end {
    justify-content: flex-end
}

.ks-mt-10 {
    margin-top: 10px
}

.ks-mt-12 {
    margin-top: 12px
}

.ks-mt-14 {
    margin-top: 14px
}

.ks-progress-0 {
    width: 0%
}

.ks-progress-1 {
    width: 1%
}

.ks-progress-2 {
    width: 2%
}

.ks-progress-3 {
    width: 3%
}

.ks-progress-4 {
    width: 4%
}

.ks-progress-5 {
    width: 5%
}

.ks-progress-6 {
    width: 6%
}

.ks-progress-7 {
    width: 7%
}

.ks-progress-8 {
    width: 8%
}

.ks-progress-9 {
    width: 9%
}

.ks-progress-10 {
    width: 10%
}

.ks-progress-11 {
    width: 11%
}

.ks-progress-12 {
    width: 12%
}

.ks-progress-13 {
    width: 13%
}

.ks-progress-14 {
    width: 14%
}

.ks-progress-15 {
    width: 15%
}

.ks-progress-16 {
    width: 16%
}

.ks-progress-17 {
    width: 17%
}

.ks-progress-18 {
    width: 18%
}

.ks-progress-19 {
    width: 19%
}

.ks-progress-20 {
    width: 20%
}

.ks-progress-21 {
    width: 21%
}

.ks-progress-22 {
    width: 22%
}

.ks-progress-23 {
    width: 23%
}

.ks-progress-24 {
    width: 24%
}

.ks-progress-25 {
    width: 25%
}

.ks-progress-26 {
    width: 26%
}

.ks-progress-27 {
    width: 27%
}

.ks-progress-28 {
    width: 28%
}

.ks-progress-29 {
    width: 29%
}

.ks-progress-30 {
    width: 30%
}

.ks-progress-31 {
    width: 31%
}

.ks-progress-32 {
    width: 32%
}

.ks-progress-33 {
    width: 33%
}

.ks-progress-34 {
    width: 34%
}

.ks-progress-35 {
    width: 35%
}

.ks-progress-36 {
    width: 36%
}

.ks-progress-37 {
    width: 37%
}

.ks-progress-38 {
    width: 38%
}

.ks-progress-39 {
    width: 39%
}

.ks-progress-40 {
    width: 40%
}

.ks-progress-41 {
    width: 41%
}

.ks-progress-42 {
    width: 42%
}

.ks-progress-43 {
    width: 43%
}

.ks-progress-44 {
    width: 44%
}

.ks-progress-45 {
    width: 45%
}

.ks-progress-46 {
    width: 46%
}

.ks-progress-47 {
    width: 47%
}

.ks-progress-48 {
    width: 48%
}

.ks-progress-49 {
    width: 49%
}

.ks-progress-50 {
    width: 50%
}

.ks-progress-51 {
    width: 51%
}

.ks-progress-52 {
    width: 52%
}

.ks-progress-53 {
    width: 53%
}

.ks-progress-54 {
    width: 54%
}

.ks-progress-55 {
    width: 55%
}

.ks-progress-56 {
    width: 56%
}

.ks-progress-57 {
    width: 57%
}

.ks-progress-58 {
    width: 58%
}

.ks-progress-59 {
    width: 59%
}

.ks-progress-60 {
    width: 60%
}

.ks-progress-61 {
    width: 61%
}

.ks-progress-62 {
    width: 62%
}

.ks-progress-63 {
    width: 63%
}

.ks-progress-64 {
    width: 64%
}

.ks-progress-65 {
    width: 65%
}

.ks-progress-66 {
    width: 66%
}

.ks-progress-67 {
    width: 67%
}

.ks-progress-68 {
    width: 68%
}

.ks-progress-69 {
    width: 69%
}

.ks-progress-70 {
    width: 70%
}

.ks-progress-71 {
    width: 71%
}

.ks-progress-72 {
    width: 72%
}

.ks-progress-73 {
    width: 73%
}

.ks-progress-74 {
    width: 74%
}

.ks-progress-75 {
    width: 75%
}

.ks-progress-76 {
    width: 76%
}

.ks-progress-77 {
    width: 77%
}

.ks-progress-78 {
    width: 78%
}

.ks-progress-79 {
    width: 79%
}

.ks-progress-80 {
    width: 80%
}

.ks-progress-81 {
    width: 81%
}

.ks-progress-82 {
    width: 82%
}

.ks-progress-83 {
    width: 83%
}

.ks-progress-84 {
    width: 84%
}

.ks-progress-85 {
    width: 85%
}

.ks-progress-86 {
    width: 86%
}

.ks-progress-87 {
    width: 87%
}

.ks-progress-88 {
    width: 88%
}

.ks-progress-89 {
    width: 89%
}

.ks-progress-90 {
    width: 90%
}

.ks-progress-91 {
    width: 91%
}

.ks-progress-92 {
    width: 92%
}

.ks-progress-93 {
    width: 93%
}

.ks-progress-94 {
    width: 94%
}

.ks-progress-95 {
    width: 95%
}

.ks-progress-96 {
    width: 96%
}

.ks-progress-97 {
    width: 97%
}

.ks-progress-98 {
    width: 98%
}

.ks-progress-99 {
    width: 99%
}

.ks-progress-100 {
    width: 100%
}

.ks-field {
    display: block;
    color: #dbe5ff;
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase
}

.ks-field input,.ks-field select,.ks-field textarea,input,select,textarea {
    width: 100%;
    margin-top: 9px;
    border: 1px solid var(--line);
    border-radius: 17px;
    background: #0a1225;
    color: #fff;
    padding: 15px;
    outline: none
}

.ks-field input:focus,.ks-field select:focus,.ks-field textarea:focus,input:focus,select:focus,textarea:focus {
    border-color: rgba(49,118,255,.7);
    box-shadow: 0 0 0 4px rgba(49,118,255,.12)
}

.ks-field textarea {
    min-height: 110px;
    resize: vertical
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 14px
}

.form-grid.two {
    grid-template-columns: repeat(2,minmax(0,1fr))
}

.form-grid.one {
    grid-template-columns: 1fr
}

.toolbar {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 16px
}

.search-box {
    display: grid;
    grid-template-columns: auto minmax(180px,1fr) auto auto;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 280px;
    border: 1px solid var(--line);
    background: rgba(14,21,42,.84);
    border-radius: 20px;
    padding: 8px
}

.search-box .search-ico {
    width: 38px;
    text-align: center;
    font-size: 22px
}

.search-box input {
    margin: 0;
    border: 0;
    background: transparent
}

.filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.tab-btn,.chip {
    border: 1px solid var(--line);
    background: #121a31;
    color: #fff;
    border-radius: 999px;
    padding: 10px 14px;
    font-weight: 950
}

.tab-btn.active,.chip.active {
    background: linear-gradient(135deg,#3176ff,#8b3ffc);
    box-shadow: 0 12px 28px rgba(124,58,237,.28)
}

.list {
    display: grid;
    gap: 10px
}

.row-card {
    border: 1px solid var(--line);
    border-radius: 20px;
    background: linear-gradient(180deg,rgba(18,28,52,.92),rgba(10,15,31,.94));
    padding: 14px;
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    min-width: 0
}

.row-card:hover {
    border-color: rgba(139,63,252,.46)
}

.row-card.active {
    border-color: #6d72ff;
    background: linear-gradient(135deg,rgba(49,118,255,.2),rgba(139,63,252,.16))
}

.row-main {
    display: flex;
    gap: 12px;
    align-items: center;
    min-width: 0
}

.row-info {
    min-width: 0
}

.row-title {
    font-weight: 950;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.row-sub {
    color: #b8c0dc;
    font-size: 13px;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.mini-avatar {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg,#3176ff,#8b3ffc);
    font-size: 18px;
    flex: 0 0 auto
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 11px;
    border-radius: 999px;
    background: rgba(49,118,255,.18);
    border: 1px solid rgba(49,118,255,.28);
    color: #dbe7ff;
    font-size: 12px
}

.badge.good {
    background: rgba(23,201,145,.16);
    border-color: rgba(23,201,145,.28);
    color: #9af4cf
}

.badge.warn {
    background: rgba(245,158,11,.16);
    border-color: rgba(245,158,11,.34);
    color: #fde68a
}

.badge.bad {
    background: rgba(239,68,68,.16);
    border-color: rgba(239,68,68,.34);
    color: #fecaca
}

.badge.purple {
    background: rgba(139,63,252,.2);
    border-color: rgba(139,63,252,.32)
}

.table-wrap {
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: #0a1020
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px
}

.data-table th,.data-table td {
    padding: 13px 14px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    text-align: left;
    vertical-align: middle
}

.data-table th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .17em;
    color: #aebfff;
    background: rgba(255,255,255,.04)
}

.data-table td {
    color: #eef3ff
}

.empty {
    padding: 26px;
    border: 1px dashed rgba(174,191,255,.22);
    border-radius: 20px;
    color: #b7c2df;
    text-align: center;
    background: rgba(255,255,255,.025)
}

.scrollbox {
    max-height: 560px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 4px
}

.split-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center
}

.quick-icon {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    background: rgba(255,255,255,.16);
    display: grid;
    place-items: center;
    margin-bottom: 12px
}

.order-card,.trash-card {
    position: relative;
    border: 1px solid var(--line);
    border-radius: 23px;
    background: linear-gradient(180deg,rgba(18,27,50,.95),rgba(9,14,29,.96));
    padding: 18px
}

.trash-card.danger {
    border-color: rgba(239,68,68,.55)
}

.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px
}

.card-title {
    font-size: 23px;
    margin: 0
}

.meta-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 10px;
    margin: 14px 0
}

.meta-item {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: rgba(255,255,255,.03)
}

.meta-item label {
    display: block;
    color: #aeb8d8;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .18em
}

.meta-item b {
    display: block;
    margin-top: 5px
}

.profile-head {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    gap: 18px;
    align-items: center
}

.profile-avatar {
    width: 78px;
    height: 78px;
    border-radius: 25px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg,#3176ff,#8b3ffc);
    font-size: 30px
}

.profile-head h2 {
    margin: 4px 0 4px;
    font-size: 30px
}

.mini-stats {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 10px;
    margin: 15px 0
}

.mini-stat {
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255,255,255,.04);
    padding: 14px
}

.mini-stat b {
    display: block;
    font-size: 25px;
    margin-top: 7px
}

.wizard-steps {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 12px;
    margin-bottom: 16px
}

.step-pill {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255,255,255,.04)
}

.step-pill b {
    display: block
}

.step-pill.active {
    background: linear-gradient(135deg,rgba(49,118,255,.23),rgba(139,63,252,.2));
    border-color: rgba(139,63,252,.38)
}

.hint-card {
    margin-top: 10px;
    padding: 14px;
    border: 1px solid rgba(34,211,238,.32);
    background: rgba(34,211,238,.08);
    border-radius: 18px
}

/* Identity guard: visible, calm warning without changing the form workflow. */
.form-warning {
  display: grid;
  gap: 5px;
  padding: 12px 14px;
  margin: 8px 0;
  border: 1px solid rgba(245, 158, 11, .42);
  border-radius: 14px;
  background: rgba(245, 158, 11, .10);
  color: var(--text, #eef4ff);
}
.form-warning b { color: #fbbf24; }
.form-warning span { color: var(--muted, #aebbd0); line-height: 1.55; }

.tabs-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px
}

.settings-section {
    display: grid;
    grid-template-columns: 260px minmax(0,1fr);
    gap: 18px;
    align-items: start;
    border-top: 1px solid var(--line);
    padding-top: 16px;
    margin-top: 16px
}

.settings-section:first-child {
    border-top: 0;
    padding-top: 0;
    margin-top: 0
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    background: rgba(0,0,0,.7);
    padding: 24px
}

.modal-card {
    position: relative;
    width: min(780px,94vw);
    max-height: 88dvh;
    overflow: auto;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 28px;
    background: #090f20;
    box-shadow: var(--shadow)
}

.modal-close {
    position: absolute;
    right: 14px;
    top: 14px;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 14px;
    background: #18213a;
    color: #fff;
    font-size: 24px
}

.ks-toast {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 130;
    max-width: 390px;
    transform: translateY(120px);
    opacity: 0;
    transition: .25s;
    padding: 14px 18px;
    border-radius: 18px;
    background: #0b1225;
    border: 1px solid var(--line);
    box-shadow: var(--shadow)
}

.ks-toast.show {
    transform: translateY(0);
    opacity: 1
}

@media(max-width: 1180px) {
    :root {
        --sidebar:300px
    }

    .grid-5 {
        grid-template-columns: repeat(3,1fr)
    }

    .grid-4 {
        grid-template-columns: repeat(2,1fr)
    }

    .layout-2 {
        grid-template-columns: 1fr
    }

    .form-grid {
        grid-template-columns: repeat(2,1fr)
    }

    .page-hero h1 {
        font-size: 32px
    }
}




.service-icon {
    position: relative;
    overflow: hidden
}

.service-icon img[hidden] {
    display: none!important
}

.service-icon-placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    padding: 3px;
    text-align: center;
    line-height: 1.05;
    font-size: 9px;
    font-weight: 950;
    color: #eaf1ff;
    background: linear-gradient(145deg,rgba(49,118,255,.68),rgba(139,63,252,.68));
    overflow: hidden;
    word-break: break-word
}

.mobile-filter-toggle,.mobile-accordion-toggle,.mobile-more-actions,.mobile-detail-toggle,.mobile-table-cards {
    display: none
}










.service-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    border-radius: 16px;
    background: linear-gradient(135deg,rgba(49,118,255,.18),rgba(139,63,252,.16));
    border: 1px solid rgba(174,191,255,.20);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 28px rgba(0,0,0,.22);
    overflow: hidden;
    vertical-align: middle;
}

.service-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit
}

.service-icon.sm {
    width: 36px;
    height: 36px;
    border-radius: 13px
}

.service-line {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0
}

.service-line .service-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.row-card .service-icon {
    width: 46px;
    height: 46px;
    border-radius: 15px
}

.order-card .service-icon,.trash-card .service-icon {
    width: 54px;
    height: 54px;
    border-radius: 18px
}

.pro-finance-grid {
    display: grid;
    grid-template-columns: 1.25fr repeat(5,1fr);
    gap: 12px;
    margin-top: 14px
}

.pro-panel {
    min-height: 118px;
    border: 1px solid rgba(174,191,255,.14);
    border-radius: 24px;
    background: linear-gradient(145deg,rgba(20,31,56,.88),rgba(10,14,30,.88));
    padding: 18px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06),0 18px 44px rgba(0,0,0,.18)
}

.pro-panel strong {
    display: block;
    margin-top: 10px;
    font-size: 25px;
    letter-spacing: -.03em;
    color: #fff;
    line-height: 1.05
}

.pro-panel small {
    display: block;
    margin-top: 8px;
    color: var(--muted);
    font-weight: 700
}

.hero-money {
    background: linear-gradient(145deg,rgba(10,144,120,.24),rgba(62,53,165,.32));
    border-color: rgba(34,211,238,.28)
}

.hero-money strong {
    font-size: 31px;
    color: #d7fff6
}

.pro-detail-grid {
    margin-top: 14px
}

.inner-card {
    background: linear-gradient(145deg,rgba(11,18,36,.8),rgba(13,19,38,.92));
    box-shadow: none
}

.section-title.compact {
    margin-bottom: 12px
}

.section-title.compact h3 {
    margin: 0;
    font-size: 18px
}

.pro-bar-row {
    display: grid;
    gap: 8px;
    margin: 12px 0
}

.pro-bar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #e9eeff;
    font-weight: 900
}

.pro-bar-row small {
    color: var(--muted);
    font-weight: 750
}

.pro-track {
    height: 11px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(174,191,255,.10);
    overflow: hidden
}

.pro-track i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg,#22d3ee,#3176ff,#8b3ffc);
    box-shadow: 0 0 22px rgba(49,118,255,.35)
}

.pro-track.profit i {
    background: linear-gradient(90deg,#10b981,#22d3ee)
}

.pro-service-list {
    display: grid;
    gap: 10px
}

.pro-service-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border-radius: 18px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(174,191,255,.12)
}

.pro-service-row b {
    display: block;
    color: #fff;
    text-align: right
}

.pro-service-row small {
    display: block;
    color: var(--muted);
    font-weight: 750;
    text-align: right
}

.partner-list-pro {
    display: grid;
    gap: 12px;
    margin-top: 14px
}

.partner-card-pro {
    display: grid;
    grid-template-columns: 54px minmax(180px,1.2fr) minmax(410px,2fr) minmax(230px,1fr);
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: 24px;
    background: linear-gradient(145deg,rgba(18,27,50,.92),rgba(9,14,30,.94));
    border: 1px solid rgba(174,191,255,.14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06),0 20px 45px rgba(0,0,0,.15)
}

.partner-card-pro.top-partner {
    border-color: rgba(139,63,252,.44);
    background: linear-gradient(145deg,rgba(38,43,103,.55),rgba(13,18,38,.94))
}

.partner-rank {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg,#3176ff,#8b3ffc);
    font-weight: 1000;
    color: white;
    box-shadow: 0 12px 32px rgba(80,95,255,.34)
}

.partner-main h3 {
    margin: 0;
    font-size: 20px;
    color: #fff
}

.partner-main p {
    margin: 6px 0 0;
    color: var(--muted);
    font-weight: 760
}

.partner-kpis {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 8px
}

.partner-kpis span {
    border: 1px solid rgba(174,191,255,.11);
    border-radius: 16px;
    background: rgba(255,255,255,.035);
    padding: 10px;
    min-width: 0
}

.partner-kpis small {
    display: block;
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 1000
}

.partner-kpis b {
    display: block;
    margin-top: 5px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.partner-bars {
    display: grid;
    gap: 10px
}

.partner-bars small {
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    font-weight: 900;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: .12em
}

@media (max-width: 1300px) {
    .pro-finance-grid {
        grid-template-columns:repeat(3,1fr)
    }

    .hero-money {
        grid-column: 1/-1
    }

    .partner-card-pro {
        grid-template-columns: 48px 1fr
    }

    .partner-kpis,.partner-bars {
        grid-column: 1/-1
    }

    .partner-kpis {
        grid-template-columns: repeat(5,1fr)
    }
}




.hero-actions:empty {
    display: none
}

.quick-icon {
    color: #fff;
    background: rgba(255,255,255,.20);
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18)
}

.dash-mobile-actions {
    display: none;
    gap: 8px;
    grid-template-columns: repeat(3,1fr)
}







.row-card[data-dashboard-target],.row-card[data-open-order] {
    cursor: pointer;
}

.skeleton-wrap {
    display: grid;
    gap: 12px
}

.skeleton-row {
    height: 70px;
    border-radius: 20px;
    border: 1px solid rgba(174,191,255,.10);
    background: linear-gradient(90deg,rgba(255,255,255,.035),rgba(255,255,255,.07),rgba(255,255,255,.035));
    background-size: 220% 100%;
    animation: ksSkeleton 1.25s ease-in-out infinite;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px
}

.skeleton-row span {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    background: rgba(255,255,255,.08)
}

.skeleton-row div {
    flex: 1;
    display: grid;
    gap: 8px
}

.skeleton-row i,.skeleton-row em,.skeleton-row b {
    display: block;
    border-radius: 99px;
    background: rgba(255,255,255,.08)
}

.skeleton-row i {
    width: 55%;
    height: 12px
}

.skeleton-row em {
    width: 75%;
    height: 10px
}

.skeleton-row b {
    width: 70px;
    height: 28px
}

@keyframes ksSkeleton {
    0% {
        background-position: 0 0
    }

    100% {
        background-position: -220% 0
    }
}

.compact-pro .section-title {
    margin-bottom: 12px
}

.compact-pro .pro-finance-grid {
    grid-template-columns: 1.2fr repeat(5,minmax(0,1fr));
    gap: 10px
}

.compact-pro .pro-panel {
    min-height: 104px;
    padding: 15px;
    border-radius: 22px
}

.compact-pro .pro-panel strong {
    font-size: clamp(20px,2vw,28px)
}

.compact-pro .pro-detail-grid {
    margin-top: 12px
}

.compact-pro .inner-card {
    padding: 16px;
    border-radius: 22px
}

.compact-pro .pro-service-list {
    gap: 8px
}

.compact-pro .pro-service-row {
    padding: 10px 12px;
    border-radius: 16px
}

.partner-list-pro.compact {
    gap: 10px
}

.partner-list-pro.compact .partner-card-pro {
    padding: 13px;
    border-radius: 20px;
    grid-template-columns: 44px minmax(160px,1.1fr) minmax(340px,1.8fr) minmax(190px,1fr)
}

.partner-list-pro.compact .partner-rank {
    width: 40px;
    height: 40px;
    border-radius: 14px
}

.partner-list-pro.compact .partner-main h3 {
    font-size: 17px
}

.partner-list-pro.compact .partner-main p {
    font-size: 13px
}

.partner-list-pro.compact .partner-kpis span {
    padding: 8px;
    border-radius: 14px
}

.partner-list-pro.compact .partner-kpis small {
    font-size: 9px
}

.partner-more {
    margin-top: 12px;
    justify-content: flex-end
}

:root {
    --text: #dfe6f7;
    --title: #eef3ff;
    --value: #f2f6ff;
    --muted: #9faacc;
    --soft: #c4cee9;
    --dim: #7f8aa8;
    --label: #a7b7e4;
}

body {
    color: var(--text);
}

input,select,textarea,.data-table td,.row-card,.order-card,.trash-card {
    color: var(--text)!important;
}

input::placeholder,textarea::placeholder {
    color: #7784a4!important;
    opacity: 1;
}

.ks-btn {
    color: #edf3ff!important;
    text-shadow: none!important;
}

.ks-primary,.ks-blue,.ks-purple,.ks-success,.ks-danger {
    color: #f4f7ff!important;
}

.quick-icon {
    color: #edf5ff!important;
}

.badge {
    color: #cbd9f7!important;
}

.badge.good {
    color: #8fe7c4!important;
}

.badge.warn {
    color: #f2d17b!important;
}

.badge.bad {
    color: #f5b8b8!important;
}




.partner-rank-wrap {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0
}

.partner-avatar {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg,rgba(49,118,255,.20),rgba(139,63,252,.30));
    border: 1px solid rgba(174,191,255,.24);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10),0 12px 28px rgba(0,0,0,.20);
    flex: 0 0 auto
}

.partner-avatar i {
    font-style: normal;
    font-size: 13px;
    font-weight: 1000;
    color: var(--value);
    letter-spacing: .02em
}

.partner-avatar em {
    position: absolute;
    right: -6px;
    bottom: -6px;
    width: 20px;
    height: 20px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: rgba(8,13,29,.95);
    border: 1px solid rgba(174,191,255,.22);
    font-size: 11px;
    font-style: normal
}

.partner-card-pro {
    grid-template-columns: 104px minmax(170px,1.1fr) minmax(300px,1.6fr) minmax(190px,1fr)
}

.partner-list-pro.compact .partner-card-pro {
    grid-template-columns: 96px minmax(160px,1fr) minmax(300px,1.55fr) minmax(180px,1fr)
}

.partner-kpis span {
    min-height: 58px
}

.partner-kpis b {
    font-variant-numeric: tabular-nums
}

.partner-bars small {
    letter-spacing: .09em
}

.backup-security-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 12px
}

.security-tile {
    min-height: 130px;
    border-radius: 22px;
    padding: 16px;
    background: linear-gradient(145deg,rgba(18,27,50,.92),rgba(9,14,30,.96));
    border: 1px solid rgba(174,191,255,.14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    text-align: left;
    color: var(--text);
    display: grid;
    align-content: start;
    gap: 8px;
    appearance: none
}

.security-tile:hover {
    transform: translateY(-2px);
    border-color: rgba(34,211,238,.30)
}

.security-ico {
    width: 42px;
    height: 42px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg,rgba(49,118,255,.36),rgba(139,63,252,.32));
    border: 1px solid rgba(174,191,255,.18);
    font-size: 19px
}

.security-tile strong {
    color: var(--value);
    font-size: 18px;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.security-tile small {
    color: var(--muted);
    font-weight: 760;
    line-height: 1.35
}

.security-actions .split-actions {
    margin-top: 4px;
    justify-content: flex-start
}

.security-actions .ks-btn {
    min-height: 38px
}

@media (max-width: 1300px) {
    .partner-card-pro,.partner-list-pro.compact .partner-card-pro {
        grid-template-columns:92px 1fr
    }

    .backup-security-grid {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}




.partner-rank-wrap {
    display: grid!important;
    grid-template-columns: 42px 44px auto;
    align-items: center;
    gap: 10px;
    min-width: 0
}

.partner-list-pro.compact .partner-rank-wrap {
    grid-template-columns: 40px 42px auto;
    gap: 9px
}

.partner-avatar.clean-avatar {
    width: 42px;
    height: 42px;
    border-radius: 15px;
    background: linear-gradient(145deg,rgba(49,118,255,.28),rgba(139,63,252,.24));
    border: 1px solid rgba(194,207,255,.20);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10),0 12px 24px rgba(0,0,0,.20)
}

.partner-avatar.clean-avatar i {
    font-size: 13px;
    color: #dce7ff;
    text-shadow: none;
    line-height: 1
}

.partner-avatar.clean-avatar em {
    display: none!important
}

.partner-medal {
    height: 24px;
    min-width: 38px;
    padding: 0 9px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    font-size: 10px;
    font-weight: 1000;
    letter-spacing: .08em;
    border: 1px solid rgba(174,191,255,.16);
    color: #d9e4ff;
    background: rgba(255,255,255,.055);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08)
}

.partner-medal.gold {
    color: #ffe7a3;
    background: rgba(245,158,11,.14);
    border-color: rgba(245,158,11,.32)
}

.partner-medal.silver {
    color: #e2e8ff;
    background: rgba(148,163,184,.12);
    border-color: rgba(148,163,184,.26)
}

.partner-medal.blue {
    color: #aeefff;
    background: rgba(34,211,238,.11);
    border-color: rgba(34,211,238,.24)
}

.partner-medal.dark {
    color: #aeb9d8;
    background: rgba(255,255,255,.045)
}

.partner-card-pro,.partner-list-pro.compact .partner-card-pro {
    grid-template-columns: 126px minmax(190px,1.05fr) minmax(360px,1.6fr) minmax(210px,.92fr)!important
}

.partner-kpis {
    grid-template-columns: repeat(5,minmax(58px,1fr));
    gap: 8px
}

.partner-kpis span {
    padding: 9px 8px;
    min-height: 56px;
    display: grid;
    align-content: center
}

.partner-kpis small {
    font-size: 9px;
    letter-spacing: .10em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip
}

.partner-kpis b {
    font-size: 15px;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    color: #e4ebff;
    letter-spacing: -.01em
}

.partner-main h3 {
    color: #edf3ff
}

.partner-main p {
    color: #aeb9d8
}

.partner-bars {
    min-width: 0
}

.partner-bars .pro-track {
    height: 9px
}

.modern-backup-grid {
    grid-template-columns: repeat(5,minmax(0,1fr))
}

.backup-type-tile {
    position: relative;
    overflow: hidden
}

.backup-type-tile:after {
    content: "";
    position: absolute;
    right: -30px;
    bottom: -35px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: radial-gradient(circle,rgba(34,211,238,.16),transparent 68%);
    pointer-events: none
}

.security-ico.sql-ico,.security-ico.excel-ico {
    font-size: 12px;
    font-weight: 1000;
    letter-spacing: .08em;
    color: #eaf2ff;
    text-shadow: none
}

.security-ico.sql-ico {
    background: linear-gradient(135deg,rgba(49,118,255,.34),rgba(139,63,252,.24))
}

.security-ico.excel-ico {
    background: linear-gradient(135deg,rgba(16,185,129,.34),rgba(34,211,238,.20))
}

.security-ico.shield-ico,.security-ico.log-ico,.security-ico.action-ico {
    font-size: 17px;
    text-shadow: none
}

.security-tile strong {
    font-size: 17px;
    max-width: 100%
}

.security-tile small {
    font-size: 12px
}

@media (max-width: 1300px) {
    .partner-card-pro,.partner-list-pro.compact .partner-card-pro {
        grid-template-columns:118px 1fr!important
    }

    .modern-backup-grid {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}




.ks-page[data-view="orders"] .page-hero,.ks-page[data-view="customers"] .page-hero {
    background: linear-gradient(135deg,rgba(49,118,255,.18),rgba(139,63,252,.14));
    border-color: rgba(174,191,255,.20)
}

.customer-lookup-card,.orders-premium-panel {
    position: relative;
    overflow: visible;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: linear-gradient(180deg,rgba(15,25,48,.94),rgba(7,11,24,.98))
}

.new-order-form .form-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px;
    align-items: end
}

.new-order-form .form-grid.three {
    grid-template-columns: repeat(3,minmax(0,1fr))
}

.new-order-form .ks-field {
    min-width: 0;
    overflow: visible
}

.ks-field input,.ks-field select,.ks-field textarea {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box
}

.ks-conditional[hidden],.customer-suggest[hidden] {
    display: none!important
}

.ks-conditional.is-visible {
    display: block!important
}

.order-mobile-field {
    position: relative;
    z-index: 5
}

.customer-suggest {
    position: absolute;
    inset: calc(100% + 8px) 0 auto;
    z-index: 40;
    display: grid;
    gap: 6px;
    max-height: 320px;
    overflow: auto;
    padding: 7px;
    border: 1px solid rgba(49,118,255,.35);
    border-radius: 18px;
    background: rgba(7,13,29,.98);
    box-shadow: 0 18px 42px rgba(0,0,0,.32)
}

.suggest-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(174,191,255,.12);
    border-radius: 14px;
    background: rgba(255,255,255,.045);
    color: #fff;
    text-align: start;
    cursor: pointer
}

.suggest-row:hover {
    border-color: rgba(34,211,238,.45);
    background: rgba(34,211,238,.08)
}

.suggest-row b,.suggest-row small {
    display: block
}

.suggest-row small {
    margin-top: 3px;
    color: #aeb8d8
}

.suggest-row em {
    font-style: normal;
    padding: 5px 8px;
    border: 1px solid rgba(49,118,255,.35);
    border-radius: 999px;
    background: rgba(49,118,255,.18);
    font-size: 11px
}

.customer-found-head,.profile-head,.orders-toolbar-head,.premium-order-top,.order-modal-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px
}

.customer-mini-stats {
    grid-template-columns: repeat(4,minmax(0,1fr));
    margin: 12px 0
}

.history-mini {
    display: grid;
    gap: 8px;
    margin-top: 10px
}

.history-line {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255,255,255,.035)
}

.new-customer {
    border-color: rgba(245,158,11,.42);
    background: rgba(245,158,11,.08)
}

.orders-toolbar-head {
    margin-bottom: 14px
}

.orders-toolbar-head h2 {
    margin: 4px 0;
    font-size: 24px
}

.orders-toolbar-actions,.order-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end
}

.orders-filter-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 12px;
    align-items: end;
    width: 100%
}

.orders-filter-grid .ks-field {
    min-width: 0
}

.orders-filter-grid input,.orders-filter-grid select {
    height: 46px
}

.orders-type-quick {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 12px 0
}

.orders-premium-list {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px
}

.premium-order-card {
    position: relative;
    overflow: hidden;
    border-color: rgba(174,191,255,.18);
    background: linear-gradient(180deg,rgba(18,29,54,.96),rgba(8,12,26,.98));
    box-shadow: 0 20px 50px rgba(0,0,0,.26)
}

.premium-order-card.is-latest:not(.is-expired) {
    border-color: rgba(250,204,21,.78);
    background: linear-gradient(180deg,rgba(92,68,8,.94),rgba(31,24,6,.98));
    box-shadow: 0 18px 44px rgba(250,204,21,.13)
}

.premium-order-card.is-expired {
    border-color: rgba(248,113,113,.82);
    background: linear-gradient(180deg,rgba(83,20,28,.96),rgba(35,8,14,.99));
    box-shadow: 0 18px 44px rgba(239,68,68,.16)
}

.premium-order-top .card-title {
    margin-top: 3px;
    font-size: 21px;
    line-height: 1.2
}

.order-service-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 14px 0 4px;
    padding: 11px 12px;
    border: 1px solid rgba(174,191,255,.13);
    border-radius: 16px;
    background: rgba(255,255,255,.035)
}

.order-service-strip span,.order-service-strip small {
    color: #aeb8d8
}

.order-meta-premium {
    grid-template-columns: repeat(3,minmax(0,1fr))
}

.order-meta-premium .meta-item {
    min-height: 72px
}

.order-meta-premium .meta-item small {
    display: block;
    margin-top: 4px;
    color: #9eabc9;
    font-size: 11px
}

.order-actions-row {
    position: relative;
    z-index: 2;
    margin-top: 10px
}

.order-actions-row .split-actions {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 8px
}

.orders-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(255,255,255,.035)
}

.orders-pager-actions {
    display: flex;
    gap: 8px
}

.order-modal-hero {
    padding: 16px;
    border: 1px solid rgba(174,191,255,.16);
    border-radius: 22px;
    background: linear-gradient(135deg,rgba(49,118,255,.16),rgba(139,63,252,.12))
}

.order-modal-hero h2 {
    margin: 4px 0;
    font-size: 28px
}

.order-modal-actions,.ks-actions-end {
    justify-content: flex-end
}

.customer-detail-modal,.order-edit-modal,.order-renew-modal {
    display: grid;
    gap: 14px
}

.customer-profile-actions,.form-submit-bar,.sticky-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap
}

.renew-reference-card {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255,255,255,.035)
}

@media(max-width: 1180px) {
    .new-order-form .form-grid,.new-order-form .form-grid.three {
        grid-template-columns:1fr
    }

    .customer-suggest {
        position: static
    }

    .orders-premium-list {
        grid-template-columns: 1fr
    }
}







.bulk-preview {
    border: 1px solid rgba(134,239,172,.18);
    background: rgba(34,197,94,.075);
    border-radius: 18px;
    padding: 12px 14px;
    color: #dfffea
}

.bulk-preview.empty {
    background: rgba(255,255,255,.035);
    color: #b7c2df;
    border-color: rgba(174,191,255,.12)
}

.bulk-preview-list {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px
}

.bulk-preview-list span {
    border: 1px solid rgba(174,191,255,.14);
    background: rgba(255,255,255,.055);
    border-radius: 999px;
    padding: 6px 9px;
    font-size: 12px;
    color: #d7ddf2
}

.empty.compact {
    padding: 12px;
    border-radius: 16px
}

.ks-page[data-view="ordersTrash"] .page-hero {
    background: linear-gradient(135deg,rgba(239,68,68,.15),rgba(49,118,255,.15) 48%,rgba(139,63,252,.13));
    border-color: rgba(248,113,113,.20)
}

.orders-trash-toolbar {
    margin-bottom: 0
}

.orders-trash-metrics {
    margin-top: 0
}

.trash-click-card {
    appearance: none;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform .16s ease,border-color .16s ease,box-shadow .16s ease
}

.trash-click-card:hover {
    transform: translateY(-2px);
    border-color: rgba(34,211,238,.48)
}

.trash-click-card.active {
    border-color: rgba(34,211,238,.78);
    box-shadow: 0 0 0 1px rgba(34,211,238,.22),0 18px 46px rgba(34,211,238,.12)
}

.orders-trash-services {
    padding: 16px;
    background: linear-gradient(180deg,rgba(15,25,45,.95),rgba(8,12,25,.98));
    border-color: rgba(239,68,68,.17)
}

.orders-trash-list {
    display: grid;
    gap: 14px
}

.orders-trash-card-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px
}

.trash-order-card {
    cursor: pointer;
    transition: transform .16s ease,border-color .16s ease,box-shadow .16s ease;
    padding-top: 52px
}

.trash-order-card:hover {
    transform: translateY(-2px);
    border-color: rgba(248,113,113,.60);
    box-shadow: 0 18px 48px rgba(239,68,68,.12)
}

.trash-order-card:focus-visible {
    outline: 2px solid rgba(34,211,238,.9);
    outline-offset: 3px
}

.trash-card-select {
    position: absolute;
    left: 16px;
    top: 14px;
    z-index: 3
}

.trash-card-select label {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border: 1px solid rgba(174,191,255,.18);
    border-radius: 999px;
    background: rgba(7,11,24,.86);
    color: #d7ddf2;
    font-size: 12px;
    cursor: pointer
}

.trash-card-select input {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: #22d3ee
}

.trash-filter-context {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px
}

.trash-filter-context h3 {
    margin: 3px 0 3px;
    font-size: 21px
}

.trash-filter-context small {
    color: #b7c2df
}

.trash-detail-modal .order-modal-hero {
    margin-bottom: 14px
}







.family-page,.family-members-page {
    display: grid;
    gap: 16px;
    min-width: 0
}

.family-toolbar-head,.family-member-section-head,.family-inline-form-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap
}

.family-toolbar-head h2,.family-member-section-head h2,.family-inline-form-head h2 {
    margin: 0
}

.family-service-groups {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 4px 0
}

.family-premium-list,.family-simple-list,.family-members-simple-list,.family-members-orders-style {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px
}

.family-group-card,.family-member-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--card);
    box-shadow: var(--shadow-sm);
    padding: 16px
}

.family-group-card::before,.family-member-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg,#22d3ee,#8b5cf6,#22c55e)
}

.family-group-card.full::before {
    background: linear-gradient(90deg,#f59e0b,#ef4444)
}

.family-group-card.attention::before,.family-member-card.expiring::before {
    background: linear-gradient(90deg,#facc15,#f97316)
}

.family-member-card.expired::before {
    background: #ef4444
}

.family-group-simple-head,.family-member-simple-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    min-width: 0
}

.family-group-simple-head>div,.family-member-simple-head>div {
    min-width: 0
}

.family-group-simple-head h3,.family-member-simple-head h3 {
    margin: 0 0 4px;
    overflow-wrap: anywhere
}

.family-group-simple-head p,.family-member-simple-head p {
    margin: 0;
    color: var(--muted);
    overflow-wrap: anywhere
}

.family-seat-box {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 8px;
    margin: 12px 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface-2)
}

.family-seat-box>div {
    min-width: 0
}

.family-seat-box span {
    display: block;
    color: var(--muted);
    font-size: 11px
}

.family-seat-box b {
    display: block;
    overflow-wrap: anywhere
}

.family-meta-grid,.family-member-meta,.family-group-view-grid,.family-member-view-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 9px;
    margin: 12px 0
}

.family-meta-grid .meta-item,.family-member-meta .meta-item,.family-group-view-grid .meta-item,.family-member-view-grid .meta-item {
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-2)
}

.family-meta-grid label,.family-member-meta label,.family-group-view-grid label,.family-member-view-grid label {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em
}

.family-meta-grid b,.family-member-meta b,.family-group-view-grid b,.family-member-view-grid b {
    display: block;
    overflow-wrap: anywhere;
    word-break: break-word
}

.family-card-actions,.family-member-actions,.family-group-view-actions,.family-member-view-actions {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 8px;
    margin-top: 12px
}

.family-group-view-actions,.family-member-view-actions {
    grid-template-columns: repeat(2,minmax(0,1fr))
}

.family-group-view-actions .family-copy-primary,.family-member-view-actions .family-copy-primary {
    grid-column: 1/-1
}

.family-group-view-actions .ks-danger,.family-member-view-actions .ks-danger {
    grid-column: 1/-1
}

.family-card-actions .ks-btn,.family-member-actions .ks-btn,.family-group-view-actions .ks-btn,.family-member-view-actions .ks-btn {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    height: auto;
    white-space: normal
}

.family-group-view-form,.family-member-view-form {
    width: min(100%,780px);
    margin: 0 auto
}

.family-group-view-title,.family-member-view-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px
}

.family-group-view-title h2,.family-member-view-title h2 {
    margin: 0 0 4px;
    overflow-wrap: anywhere
}

.family-group-view-title p,.family-member-view-title p {
    margin: 0;
    color: var(--muted)
}

.family-group-view-stats {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 9px;
    margin: 12px 0
}

.family-group-view-stats>div {
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-2)
}

.family-group-view-stats span {
    display: block;
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em
}

.family-group-view-stats b {
    display: block;
    overflow-wrap: anywhere
}

.family-form,.family-member-form {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px
}

.family-form .field-full,.family-member-form .field-full,.family-form .form-actions,.family-member-form .form-actions,.family-auto-cost-note,.family-duplicate-member-host {
    grid-column: 1/-1
}

.family-form .field-help,.family-member-form .field-help {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4
}

.family-member-form input[readonly] {
    cursor: default;
    opacity: .92
}

.family-save-status {
    grid-column: 1/-1;
    margin-top: 4px;
    padding: 10px 12px;
    border: 1px solid rgba(34,197,94,.35);
    border-radius: 12px;
    background: rgba(34,197,94,.1);
    color: var(--success)
}

.family-save-status.error {
    border-color: rgba(239,68,68,.4);
    background: rgba(239,68,68,.1);
    color: var(--danger)
}

.family-save-status.hidden {
    display: none
}

#familyMemberSubmit:disabled {
    cursor: wait;
    opacity: .7
}

.family-renew-existing-box,.family-add-another-box,.family-selected-customer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-2)
}

.family-duplicate-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap
}

.family-renew-existing-btn,.family-add-another-btn,.family-cancel-another-btn {
    min-height: 40px;
    padding: 9px 13px;
    border-radius: 12px;
    border: 1px solid var(--line);
    font-weight: 800;
    cursor: pointer
}

.family-renew-existing-btn {
    background: var(--danger);
    color: #fff
}

.family-add-another-btn {
    background: var(--primary);
    color: #fff
}

.family-cancel-another-btn {
    background: var(--surface-3);
    color: var(--text)
}

html[dir="rtl"] .family-group-card::before,html[dir="rtl"] .family-member-card::before {
    direction: rtl
}










.replacement-workflow-card,.replacement-history-card {
    overflow: hidden;
}

.replacement-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 18px;
}

.replacement-head h2 {
    margin: 4px 0 6px;
}

.replacement-flow-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.replacement-grid {
    display: grid;
    grid-template-columns: minmax(280px, .95fr) minmax(360px, 1.35fr);
    gap: 18px;
}

.replacement-col {
    border: 1px solid rgba(148, 163, 184, .18);
    background: rgba(15, 23, 42, .38);
    border-radius: 22px;
    padding: 14px;
    min-width: 0;
}

.replacement-col-main {
    background: linear-gradient(145deg, rgba(15, 23, 42, .46), rgba(30, 41, 59, .28));
}

.replacement-step {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
}

.replacement-step > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(34, 211, 238, .25), rgba(99, 102, 241, .3));
    color: #e0f2fe;
    border: 1px solid rgba(125, 211, 252, .26);
    font-weight: 900;
}

.replacement-step b {
    display: block;
}

.replacement-step small {
    color: var(--muted);
}

.compact-grid {
    gap: 10px;
}

.replacement-target-list {
    display: grid;
    gap: 10px;
    max-height: 540px;
    overflow: auto;
    padding-right: 4px;
}

.replacement-target-card {
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    text-align: left;
    border: 1px solid rgba(148, 163, 184, .18);
    background: rgba(2, 6, 23, .38);
    color: var(--text);
    border-radius: 18px;
    padding: 12px;
    cursor: pointer;
    transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

.replacement-target-card:hover,.replacement-target-card.active {
    transform: translateY(-1px);
    border-color: rgba(34, 211, 238, .52);
    background: rgba(14, 116, 144, .18);
}

.replacement-type-icon {
    width: 40px;
    height: 40px;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, .85);
    border: 1px solid rgba(148, 163, 184, .18);
}

.replacement-target-info {
    min-width: 0;
}

.replacement-target-info b,.replacement-target-info small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.replacement-target-info small {
    color: var(--muted);
    margin-top: 2px;
}

.replacement-card-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.replacement-selected-card {
    border: 1px solid rgba(34, 211, 238, .2);
    background: rgba(2, 6, 23, .32);
    border-radius: 20px;
    padding: 14px;
    margin-bottom: 14px;
}

.replacement-meta-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.replacement-manual-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(15, 23, 42, .5);
    border: 1px solid rgba(148, 163, 184, .18);
    font-weight: 700;
}

.replacement-manual-toggle input {
    width: 18px;
    height: 18px;
}

.replacement-warning-note {
    border: 1px solid rgba(251, 191, 36, .22);
    background: rgba(251, 191, 36, .08);
    border-radius: 16px;
    padding: 11px 13px;
    color: #fde68a;
    line-height: 1.45;
}

.replacement-history-list {
    display: grid;
    gap: 10px;
}

.replacement-history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 18px;
    background: rgba(15, 23, 42, .36);
}

.replacement-history-item h3 {
    margin: 2px 0;
    font-size: 1rem;
}

.replacement-history-meta {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 6px;
    min-width: 130px;
}

.replacement-history-meta small {
    color: var(--muted);
}







.replacement-history-title {
    align-items: flex-start;
}

.replacement-history-title p {
    margin: 4px 0 0;
}

.replacement-history-filters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 14px;
}

.replacement-history-item.audit {
    align-items: stretch;
    background: linear-gradient(145deg, rgba(15,23,42,.5), rgba(2,6,23,.42));
}

.replacement-audit-main {
    flex: 1;
    min-width: 0;
}

.replacement-audit-title h3 {
    margin: 2px 0;
}

.replacement-chain {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 10px;
    align-items: stretch;
    margin: 12px 0;
}

.replacement-chain span {
    border: 1px solid rgba(148,163,184,.16);
    background: rgba(15,23,42,.42);
    border-radius: 16px;
    padding: 10px 12px;
    min-width: 0;
}

.replacement-chain small,.replacement-chain em {
    display: block;
    color: var(--muted);
    font-style: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.replacement-chain b {
    display: block;
    margin: 3px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.replacement-chain strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #67e8f9;
    font-size: 1.25rem;
}

.replacement-audit-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.replacement-history-modal .modal-history-list {
    max-height: 70vh;
    overflow: auto;
    padding-right: 4px;
}







.replacement-click-metrics {
    margin-bottom: 18px
}

.replacement-click-card {
    appearance: none;
    color: inherit;
    text-align: left;
    cursor: pointer;
    border-color: rgba(34,211,238,.20);
    transition: transform .16s ease,border-color .16s ease,box-shadow .16s ease,filter .16s ease
}

.replacement-click-card:hover {
    transform: translateY(-2px);
    border-color: rgba(34,211,238,.65);
    box-shadow: 0 18px 48px rgba(34,211,238,.13)
}

.replacement-click-card.active {
    border-color: rgba(34,211,238,.85);
    box-shadow: 0 0 0 1px rgba(34,211,238,.28),0 16px 46px rgba(34,211,238,.13);
    filter: brightness(1.07)
}

.replacement-clear-field {
    min-width: 0
}

.replacement-clear-field>span {
    display: block;
    margin-bottom: 7px;
    color: #aebcff;
    font-weight: 900;
    font-size: 11px;
    letter-spacing: .28em;
    text-transform: uppercase
}

.replacement-clear-wrap {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 8px;
    align-items: center
}

.replacement-clear-wrap input {
    min-width: 0;
    width: 100%
}

.replacement-clear-search {
    appearance: none;
    border: 1px solid rgba(239,68,68,.32);
    background: rgba(239,68,68,.12);
    color: #fff;
    border-radius: 14px;
    width: 46px;
    height: 46px;
    display: inline-grid;
    place-items: center;
    font-weight: 1000;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: transform .14s ease,border-color .14s ease,background .14s ease
}

.replacement-clear-search:hover {
    transform: translateY(-1px);
    border-color: rgba(239,68,68,.72);
    background: rgba(239,68,68,.22)
}

.replacement-summary-audit-card {
    border-color: rgba(34,211,238,.24);
    background: linear-gradient(145deg,rgba(8,47,73,.36),rgba(15,23,42,.50))
}

.replacement-summary-audit-list {
    gap: 12px
}

@media(max-width: 1280px) {
    .replacement-click-metrics.grid-5 {
        grid-template-columns:repeat(3,minmax(0,1fr))
    }
}




.replacement-status-metrics {
    margin-top: -6px;
    margin-bottom: 18px
}

.replacement-history-filters-wide {
    grid-template-columns: repeat(5,minmax(0,1fr))
}

.replacement-followup-alert {
    margin: 12px 0;
    padding: 13px 14px;
    border: 1px solid rgba(245,158,11,.42);
    background: linear-gradient(135deg,rgba(245,158,11,.15),rgba(239,68,68,.10));
    border-radius: 18px;
    color: #fff;
    font-weight: 850
}

.replacement-history-item.solved {
    border-color: rgba(34,197,94,.28)
}

.replacement-history-item.danger {
    border-color: rgba(239,68,68,.36);
    box-shadow: 0 18px 54px rgba(239,68,68,.08)
}

.replacement-history-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px
}

.replacement-history-actions .ks-btn {
    min-height: 38px
}

.replacement-history-meta {
    gap: 8px
}

@media(max-width: 1280px) {
    .replacement-history-filters-wide {
        grid-template-columns:repeat(3,minmax(0,1fr))
    }
}




.finance-filter-card,.finance-panel,.spending-reimbursement-panel {
    border: 1px solid rgba(34,211,238,.18);
    background: linear-gradient(145deg,rgba(11,18,36,.92),rgba(16,24,48,.78));
}

.finance-period-row,.spending-period-row,.finance-report-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 14px 0 18px;
}

.finance-period-row .chip,.spending-period-row .chip,.finance-report-tabs .chip {
    min-height: 42px;
    padding: 0 16px;
}

.finance-period-row .chip.active,.spending-period-row .chip.active,.finance-report-tabs .chip.active {
    border-color: rgba(34,211,238,.72);
    background: linear-gradient(135deg,rgba(49,118,255,.46),rgba(139,63,252,.42));
    color: #fff;
    box-shadow: 0 12px 32px rgba(49,118,255,.16);
}

.report-filter-grid,.admin-spending-filter-grid {
    display: grid;
    gap: 12px;
    align-items: end
}

.report-filter-grid {
    grid-template-columns: repeat(6,minmax(140px,1fr))
}

.admin-spending-filter-grid {
    grid-template-columns: minmax(220px,1.6fr) repeat(6,minmax(140px,1fr))
}

.spending-search-field {
    grid-column: span 2
}

.finance-report-summary,.spending-reimbursement-summary {
    margin-bottom: 16px
}

.finance-report-layout {
    margin-top: 16px
}

.finance-panel .table-wrap,.spending-desktop-table .table-wrap {
    max-height: 520px;
    overflow: auto
}

.finance-panel .data-table th,.finance-panel .data-table td,.spending-desktop-table .data-table th,.spending-desktop-table .data-table td {
    white-space: normal;
    overflow-wrap: anywhere;
    vertical-align: top;
}

.finance-panel .data-table td,.spending-desktop-table .data-table td {
    line-height: 1.35
}

.finance-panel .section-title.compact {
    gap: 12px
}

.finance-panel .split-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.finance-audit-panel {
    margin: 16px 0
}

.formula-line {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,2fr) auto;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    margin-bottom: 14px;
    border: 1px solid rgba(34,211,238,.22);
    border-radius: 18px;
    background: rgba(8,13,28,.48);
}

.formula-line span {
    color: var(--muted);
    font-weight: 750
}

.formula-line strong {
    font-size: 1.1rem
}

.report-click-metrics .report-click-card {
    cursor: pointer;
    text-align: left;
    transition: transform .14s ease,border-color .14s ease,box-shadow .14s ease;
    background: linear-gradient(145deg,rgba(30,23,74,.78),rgba(36,22,88,.64));
}

.report-click-metrics .report-click-card:hover {
    transform: translateY(-2px);
    border-color: rgba(34,211,238,.55);
    box-shadow: 0 18px 52px rgba(34,211,238,.10)
}

.report-click-metrics .report-click-card.active {
    border-color: rgba(34,211,238,.82);
    box-shadow: 0 0 0 1px rgba(34,211,238,.22),0 18px 54px rgba(34,211,238,.14)
}

.report-click-card.finance-negative strong,.finance-inline-value.finance-negative,.formula-line strong.finance-negative {
    color: #ff9aa8!important
}

.report-click-card.finance-positive strong,.finance-inline-value.finance-positive,.formula-line strong.finance-positive {
    color: #86efac!important
}

.finance-inline-value {
    display: inline-block;
    margin-inline-end:8px;font-weight: 1000
}

.finance-section-panel.hidden {
    display: none!important
}

.finance-section-panel {
    animation: ksFadeIn .12s ease-out
}

.finance-audit-panel .badge.good {
    background: rgba(16,185,129,.16);
    border-color: rgba(16,185,129,.45);
    color: #bbf7d0
}

.finance-audit-panel .badge.warn {
    background: rgba(245,158,11,.15);
    border-color: rgba(245,158,11,.45);
    color: #fde68a
}

.finance-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid rgba(174,191,255,.14);
    border-radius: 16px;
    background: rgba(255,255,255,.035);
}

.finance-pager>span {
    color: var(--muted);
    font-weight: 800
}

.finance-pager-actions {
    display: flex;
    gap: 8px
}

.spending-reimbursement-panel {
    margin-bottom: 22px;
    padding: 18px;
    border-radius: 22px
}

.spending-history-title {
    margin-top: 4px
}

.spending-mobile-cards {
    display: none
}

.spending-admin-cards,.spending-mobile-list {
    display: grid;
    gap: 12px
}

.spending-admin-card,.spending-record-card {
    border: 1px solid rgba(174,191,255,.16);
    background: linear-gradient(145deg,rgba(17,24,39,.78),rgba(30,41,59,.62));
    border-radius: 18px;
    padding: 14px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.spending-admin-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px
}

.spending-admin-card h4 {
    margin: 4px 0 0;
    font-size: 1rem;
    overflow-wrap: anywhere
}

.spending-admin-card-stats {
    display: flex;
    gap: 10px
}

.spending-admin-card-stats span {
    min-width: 86px;
    padding: 9px 10px;
    border-radius: 12px;
    background: rgba(255,255,255,.05);
    text-align: center
}

.spending-admin-card-stats small,.spending-record-grid small,.spending-record-note small {
    display: block;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 800;
    margin-bottom: 4px
}

.spending-admin-card-stats strong {
    display: block;
    font-size: .9rem
}

.spending-record-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px
}

.spending-record-head>div {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0
}

.spending-record-id {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 850
}

.spending-record-amount {
    font-size: 1.15rem;
    color: #86efac;
    white-space: nowrap
}

.spending-record-purpose {
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.35;
    margin: 12px 0;
    overflow-wrap: anywhere
}

.spending-record-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px
}

.spending-record-grid>div,.spending-record-note {
    padding: 10px 11px;
    border-radius: 12px;
    background: rgba(255,255,255,.045);
    min-width: 0
}

.spending-record-grid span,.spending-record-note p {
    display: block;
    margin: 0;
    font-size: .86rem;
    font-weight: 750;
    overflow-wrap: anywhere
}

.spending-record-note {
    margin-top: 10px
}

.spending-record-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px
}

.spending-record-actions .ks-btn {
    flex: 1;
    min-height: 42px
}

.spending-select-all {
    display: flex;
    align-items: center;
    gap: 8px
}

.admin-spending-dialog {
    display: grid;
    gap: 18px
}

.admin-spending-dialog-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(34,211,238,.18);
    border-radius: 20px;
    background: rgba(34,211,238,.06)
}

.admin-spending-dialog-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: linear-gradient(135deg,#3176ff,#8b3ffc);
    font-size: 24px
}

.admin-spending-dialog-head h2 {
    margin: 3px 0 5px
}

.admin-spending-dialog-head p {
    margin: 0;
    color: var(--muted)
}

.admin-spending-dialog-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px
}

.admin-spending-purpose {
    grid-column: 1/-1
}

.admin-spending-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px
}

@media(max-width: 1180px) {
    .report-filter-grid {
        grid-template-columns:repeat(3,minmax(0,1fr))
    }

    .admin-spending-filter-grid {
        grid-template-columns: repeat(3,minmax(0,1fr))
    }

    .spending-search-field {
        grid-column: 1/-1
    }

    .report-click-metrics.grid-5 {
        grid-template-columns: repeat(3,minmax(0,1fr))
    }
}







.users-toolbar {
    padding: 14px 16px
}

.users-toolbar .ks-field {
    margin: 0
}

.users-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px
}

.user-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(155deg,rgba(16,28,52,.96),rgba(8,13,28,.98));
    border-color: rgba(128,154,255,.18)
}

.user-card:after {
    content: "";
    position: absolute;
    right: -70px;
    bottom: -100px;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    background: radial-gradient(circle,rgba(139,63,252,.16),transparent 68%);
    pointer-events: none
}

.user-card.inactive {
    opacity: .72;
    border-color: rgba(239,68,68,.24)
}

.user-card-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px
}

.user-identity {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0
}

.user-big-avatar {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    background: linear-gradient(135deg,#3176ff,#8b3ffc);
    border: 1px solid rgba(255,255,255,.16);
    color: #fff;
    font-weight: 1000;
    font-size: 18px;
    box-shadow: 0 14px 34px rgba(49,118,255,.2)
}

.user-identity h3 {
    margin: 3px 0 4px;
    font-size: 21px;
    line-height: 1.1;
    overflow-wrap: anywhere
}

.user-identity p {
    margin: 0;
    color: var(--muted);
    overflow-wrap: anywhere
}

.user-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end
}

.user-meta-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 9px;
    margin-top: 14px
}

.user-meta-grid .meta-item {
    min-height: 70px
}

.user-meta-grid .meta-item b {
    font-size: 13px;
    overflow-wrap: anywhere
}

.user-card-actions {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 13px
}

.user-card-actions .ks-btn {
    flex: 1 1 120px;
    min-width: 0
}

.user-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    padding: 16px;
    border: 1px solid rgba(128,154,255,.16);
    border-radius: 22px;
    background: linear-gradient(135deg,rgba(49,118,255,.12),rgba(139,63,252,.10))
}

.user-modal-head h2 {
    margin: 4px 0 7px;
    font-size: 28px
}

.user-modal-head p {
    margin: 0;
    color: #c7d1eb;
    line-height: 1.5
}

.user-form .ks-field small {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.35
}

.user-protection-note {
    padding: 12px 14px;
    border: 1px solid rgba(245,158,11,.25);
    border-radius: 16px;
    background: rgba(245,158,11,.08);
    color: #ffd78a
}

.user-activity-list {
    display: grid;
    gap: 10px;
    max-height: 62vh;
    overflow: auto;
    padding-right: 4px
}

.user-activity-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 14px;
    border: 1px solid rgba(174,191,255,.13);
    border-radius: 17px;
    background: rgba(255,255,255,.035)
}

.user-activity-row b {
    display: block;
    color: #fff
}

.user-activity-row span {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 13px
}

.user-activity-row>div:last-child {
    display: grid;
    gap: 6px;
    justify-items: end
}

.user-activity-row small {
    color: var(--muted);
    white-space: nowrap
}







.permission-panel {
    padding: 18px;
    border: 1px solid rgba(118,151,255,.2);
    border-radius: 24px;
    background: linear-gradient(155deg,rgba(9,18,39,.97),rgba(7,12,27,.98));
    box-shadow: inset 0 1px rgba(255,255,255,.03)
}

.permission-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 14px
}

.permission-head h3 {
    margin: 4px 0 6px;
    font-size: 23px
}

.permission-head p {
    margin: 0;
    color: var(--muted);
    line-height: 1.5
}

.permission-presets {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 14px 0 18px
}

.permission-presets button {
    min-height: 48px;
    padding: 0 18px;
    border: 1px solid rgba(82,133,255,.4);
    border-radius: 16px;
    background: linear-gradient(135deg,rgba(49,118,255,.2),rgba(139,63,252,.18));
    color: #fff;
    font: inherit;
    font-weight: 850;
    cursor: pointer
}

.permission-presets button:hover {
    border-color: rgba(80,220,255,.7);
    transform: translateY(-1px)
}

.permission-group {
    margin-top: 17px
}

.permission-group h4 {
    margin: 0 0 10px;
    color: #dbe6ff;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .14em
}

.permission-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 10px
}

.permission-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 58px;
    padding: 11px 13px;
    border: 1px solid rgba(174,191,255,.13);
    border-radius: 17px;
    background: rgba(255,255,255,.025);
    cursor: pointer
}

.permission-item:has(input:checked) {
    border-color: rgba(45,212,191,.42);
    background: linear-gradient(135deg,rgba(49,118,255,.18),rgba(18,116,190,.12))
}

.permission-item input {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    accent-color: #3b82f6
}

.permission-item span {
    font-weight: 800;
    line-height: 1.25
}

.permission-item small {
    display: block;
    margin-left: auto;
    color: #ffc86b;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .08em
}

.permission-protected {
    opacity: .72;
    cursor: not-allowed
}

.permission-protected input {
    cursor: not-allowed
}

.owner-locked .permission-item {
    opacity: .78
}







.users-list-view {
    display: grid;
    gap: 16px
}

.user-editor-view {
    display: grid;
    gap: 18px;
    scroll-margin-top: 96px
}

.user-editor-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 8px 2px 18px;
    border-bottom: 1px solid rgba(174,191,255,.16)
}

.user-editor-head h2 {
    margin: 5px 0 8px;
    font-size: clamp(28px,3vw,38px);
    letter-spacing: -.04em
}

.user-editor-head p {
    max-width: 760px;
    margin: 0;
    color: #c7d1eb;
    line-height: 1.55
}

.user-editor-head-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap
}

.user-editor-form {
    gap: 20px
}

.user-editor-basic {
    padding: 20px 0 4px
}

.user-editor-basic .section-title {
    margin-bottom: 14px
}

.user-editor-basic .user-protection-note {
    margin-top: 14px
}

.ks-page[data-view="users"] .user-editor-view .permission-panel {
    border-radius: 26px
}







.ks-page[data-view="users"] .user-editor-form > .user-editor-actions-card {
    position: relative!important;
    inset: auto!important;
    top: auto!important;
    right: auto!important;
    bottom: auto!important;
    left: auto!important;
    z-index: 1!important;
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 18px;
    border: 1px solid rgba(174,191,255,.16);
    border-radius: 22px;
    background: linear-gradient(155deg,rgba(9,18,39,.96),rgba(7,12,27,.98));
    box-shadow: none!important;
    transform: none!important;
    backdrop-filter: none!important;
    clear: both;
}

.ks-page[data-view="users"] .user-editor-form > .user-editor-actions-card .ks-btn {
    min-height: 54px;
    width: 100%
}

.ks-page[data-view="users"] .user-editor-form > .permission-panel {
    overflow: visible
}




.activity-filter-grid {
    grid-template-columns: minmax(220px,2fr) repeat(4,minmax(140px,1fr));
    align-items: end
}

.accountability-filter-card {
    margin-bottom: 16px
}

.audit-event-card {
    border-left: 4px solid rgba(59,130,246,.45)
}

.audit-event-card.audit-danger {
    border-left-color: rgba(239,68,68,.75)
}

.audit-changes {
    display: grid;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--line,#e5e7eb)
}

.audit-changes>div {
    display: grid;
    grid-template-columns: minmax(140px,.7fr) minmax(0,2fr);
    gap: 12px;
    align-items: start;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(148,163,184,.08)
}

.audit-changes b {
    text-transform: capitalize
}

.audit-changes span {
    overflow-wrap: anywhere;
    color: var(--muted,#64748b)
}

.audit-reason {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(245,158,11,.11);
    border: 1px solid rgba(245,158,11,.24)
}

.audit-device {
    margin-top: 12px;
    color: var(--muted,#64748b)
}

.audit-device summary {
    cursor: pointer;
    font-weight: 700
}

.audit-device p {
    overflow-wrap: anywhere;
    margin: 8px 0 0
}

.accountability-warning {
    margin: 0 0 16px;
    border-color: rgba(239,68,68,.3)
}

.audit-warning-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-top: 1px solid var(--line,#e5e7eb)
}

.audit-warning-row span {
    color: var(--muted,#64748b);
    text-align: right
}

@media(max-width: 1100px) {
    .activity-filter-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }

    .activity-filter-grid .ks-field:first-child {
        grid-column: 1/-1
    }
}




.ks-page[data-view="users"] .permission-panel {
    background: linear-gradient(160deg,rgba(12,22,47,.98),rgba(6,11,25,.99));
    border-color: rgba(77,142,255,.22);
    box-shadow: 0 18px 55px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.04)
}

.ks-page[data-view="users"] .permission-group {
    padding: 16px;
    border: 1px solid rgba(174,191,255,.10);
    border-radius: 22px;
    background: linear-gradient(135deg,rgba(255,255,255,.035),rgba(255,255,255,.018))
}

.ks-page[data-view="users"] .permission-grid {
    gap: 12px
}

.ks-page[data-view="users"] .permission-item {
    min-height: 68px;
    padding: 15px 16px;
    border-radius: 18px;
    background: linear-gradient(135deg,rgba(20,32,58,.92),rgba(14,22,42,.95));
    box-shadow: inset 0 1px rgba(255,255,255,.035);
    transition: transform .18s ease,border-color .18s ease,background .18s ease
}

.ks-page[data-view="users"] .permission-item:hover {
    transform: translateY(-1px);
    border-color: rgba(80,220,255,.35)
}

.ks-page[data-view="users"] .permission-item input {
    position: absolute;
    opacity: 0;
    pointer-events: none
}

.ks-page[data-view="users"] .permission-check {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid rgba(255,255,255,.20);
    background: linear-gradient(135deg,rgba(0,0,0,.55),rgba(22,33,57,.9));
    box-shadow: inset 0 1px rgba(255,255,255,.05)
}

.ks-page[data-view="users"] .permission-check:before {
    content: "";
    width: 10px;
    height: 6px;
    border-left: 3px solid transparent;
    border-bottom: 3px solid transparent;
    transform: rotate(-45deg);
    margin-top: -2px
}

.ks-page[data-view="users"] .permission-item:has(input:checked) {
    border-color: rgba(45,212,191,.55);
    background: linear-gradient(135deg,rgba(16,185,129,.17),rgba(59,130,246,.15))
}

.ks-page[data-view="users"] .permission-item:has(input:checked) .permission-check {
    background: linear-gradient(135deg,#22c55e,#38bdf8);
    border-color: rgba(255,255,255,.32);
    box-shadow: 0 12px 28px rgba(34,197,94,.18)
}

.ks-page[data-view="users"] .permission-item:has(input:checked) .permission-check:before {
    border-left-color: #fff;
    border-bottom-color: #fff
}

.ks-page[data-view="users"] .permission-item:has([data-permission-key="telegram"]) {
    border-color: rgba(56,189,248,.26)
}

.ks-page[data-view="users"] .permission-item:has([data-permission-key="telegram"]):has(input:checked) {
    border-color: rgba(56,189,248,.62);
    background: linear-gradient(135deg,rgba(14,165,233,.20),rgba(99,102,241,.15))
}

.ks-page[data-view="users"] .permission-protected {
    opacity: .58;
    filter: saturate(.55)
}

.ks-page[data-view="users"] .permission-protected small {
    color: #ffcf72
}




.telegram-tabs {
    display: flex;
    gap: 8px;
    overflow: auto;
    padding: 4px 0 8px;
    scrollbar-width: thin
}

.telegram-tab {
    white-space: nowrap
}

.telegram-tab.active {
    background: var(--accent,#6d5dfc);
    color: #fff;
    border-color: transparent
}

.telegram-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 14px
}

.telegram-status-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 12px
}

.telegram-status {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--line,rgba(255,255,255,.1));
    border-radius: 16px;
    background: rgba(255,255,255,.03)
}

.telegram-status-dot {
    width: 11px;
    height: 11px;
    border-radius: 999px;
    margin-top: 4px;
    background: #ef4444;
    box-shadow: 0 0 0 5px rgba(239,68,68,.12)
}

.telegram-status.ok .telegram-status-dot {
    background: #22c55e;
    box-shadow: 0 0 0 5px rgba(34,197,94,.12)
}

.telegram-status strong {
    display: block;
    font-size: .92rem
}

.telegram-status small {
    display: block;
    color: var(--muted,#93a0b5);
    margin-top: 3px;
    word-break: break-word
}

.telegram-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px
}

.telegram-panel-head h2 {
    margin: 0
}

.telegram-form-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px
}

.telegram-form-grid .wide {
    grid-column: 1/-1
}

.telegram-list {
    display: grid;
    gap: 10px
}

.telegram-user-card,.telegram-connection-card,.telegram-broadcast-card {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--line,rgba(255,255,255,.1));
    border-radius: 16px;
    background: rgba(255,255,255,.025)
}

.telegram-user-main {
    min-width: 0
}

.telegram-user-main h3 {
    margin: 0 0 4px;
    font-size: 1rem
}

.telegram-user-main p {
    margin: 2px 0;
    color: var(--muted,#93a0b5);
    font-size: .88rem;
    overflow-wrap: anywhere
}

.telegram-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px
}

.telegram-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(99,102,241,.13);
    font-size: .76rem
}

.telegram-chip.ok {
    background: rgba(34,197,94,.13);
    color: #4ade80
}

.telegram-chip.bad {
    background: rgba(239,68,68,.13);
    color: #f87171
}

.telegram-chip.warn {
    background: rgba(245,158,11,.13);
    color: #fbbf24
}

.telegram-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    justify-content: flex-end
}

.telegram-empty {
    padding: 24px;
    text-align: center;
    color: var(--muted,#93a0b5)
}

.telegram-note {
    padding: 12px 14px;
    border-left: 3px solid #6366f1;
    border-radius: 10px;
    background: rgba(99,102,241,.08);
    color: var(--muted,#aab4c5)
}

.telegram-danger-note {
    border-left-color: #ef4444;
    background: rgba(239,68,68,.08)
}

.telegram-table-wrap {
    overflow: auto
}

.telegram-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px
}

.telegram-table th,.telegram-table td {
    padding: 11px;
    border-bottom: 1px solid var(--line,rgba(255,255,255,.09));
    text-align: left;
    vertical-align: top
}

.telegram-table th {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted,#93a0b5)
}

.telegram-loading {
    opacity: .65;
    pointer-events: none
}

.telegram-kpi strong {
    font-size: 1.65rem
}

.telegram-kpi small {
    display: block;
    margin-top: 4px;
    color: var(--muted,#93a0b5)
}

.telegram-runtime-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 10px
}

.telegram-runtime-grid>div {
    padding: 12px;
    border-radius: 13px;
    background: rgba(255,255,255,.035)
}

.telegram-runtime-grid span {
    display: block;
    color: var(--muted,#93a0b5);
    font-size: .78rem;
    margin-bottom: 4px
}

.telegram-runtime-grid strong {
    display: block;
    overflow-wrap: anywhere
}

.telegram-setup-step {
    display: grid;
    grid-template-columns: 38px minmax(0,1fr);
    gap: 12px;
    align-items: start;
    padding: 14px 0;
    border-bottom: 1px solid var(--line,rgba(255,255,255,.08))
}

.telegram-setup-step>span {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(99,102,241,.18);
    font-weight: 800
}

.telegram-setup-step p {
    margin: 4px 0 0;
    color: var(--muted,#93a0b5)
}

.telegram-copy-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px
}

.telegram-copy-row code {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: 10px;
    border-radius: 10px;
    background: rgba(0,0,0,.2)
}

.telegram-search {
    display: flex;
    gap: 8px;
    min-width: min(100%,420px)
}

.telegram-search input {
    flex: 1
}

.telegram-health-list {
    display: grid;
    gap: 9px
}

.telegram-health-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border-radius: 13px;
    background: rgba(255,255,255,.035)
}

.telegram-health-row small {
    display: block;
    color: var(--muted,#93a0b5);
    margin-top: 3px;
    overflow-wrap: anywhere
}

.telegram-health-row .mark {
    font-size: 1.05rem
}







.telegram-upload-box {
    display: grid;
    gap: 10px
}

.telegram-upload-row {
    display: flex;
    gap: 8px;
    align-items: center
}

.telegram-upload-row input[type=url] {
    flex: 1;
    min-width: 0
}

.telegram-upload-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid var(--line,rgba(255,255,255,.1));
    border-radius: 14px;
    background: rgba(255,255,255,.025)
}

.telegram-upload-preview img {
    width: 96px;
    height: 72px;
    object-fit: cover;
    border-radius: 10px
}

.telegram-upload-preview small {
    color: var(--muted,#93a0b5)
}

.telegram-broadcast-flow {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px
}




.telegram-premium-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    background: linear-gradient(135deg,rgba(99,102,241,.16),rgba(16,185,129,.1));
    border-color: rgba(129,140,248,.35)
}

.telegram-premium-badge {
    display: inline-flex;
    padding: 5px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg,#8b5cf6,#22c55e);
    color: #fff;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .08em;
    margin-bottom: 8px
}

.telegram-content-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center
}

.telegram-content-toolbar select,.telegram-content-toolbar input {
    min-height: 42px
}

.telegram-content-toolbar input {
    width: 170px
}

.telegram-content-group code {
    font-size: .72rem;
    color: var(--muted,#93a0b5);
    margin-inline-start:6px}

.telegram-content-fields {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px
}

.telegram-content-fields textarea {
    min-height: 86px;
    line-height: 1.55;
    font-family: inherit;
    resize: vertical
}

.telegram-content-group:has(textarea[rows="8"]) .telegram-content-fields {
    grid-template-columns: 1fr
}

.telegram-setting-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 10px;
    margin-top: 14px
}

.telegram-setting-toggle {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px;
    border: 1px solid var(--line,rgba(255,255,255,.1));
    border-radius: 14px;
    background: rgba(255,255,255,.025);
    cursor: pointer
}

.telegram-setting-toggle input {
    width: 18px;
    height: 18px;
    margin-top: 2px
}

.telegram-setting-toggle b,.telegram-setting-toggle small {
    display: block
}

.telegram-setting-toggle small {
    color: var(--muted,#93a0b5);
    margin-top: 3px;
    line-height: 1.35
}

.telegram-sticky-actions {
    position: static;
    z-index: 8;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 12px;
    align-items: center;
    box-shadow: 0 18px 50px rgba(0,0,0,.32)
}

.telegram-sticky-actions #tgContentResult {
    grid-column: 1/-1;
    margin-top: 0
}







.telegram-template-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px
}

.telegram-template-card {
    min-width: 0
}

.telegram-template-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px
}

.telegram-template-head h3 {
    margin: 7px 0 2px;
    font-size: 1.08rem
}

.telegram-template-head p,.telegram-template-head small {
    color: var(--muted,#93a0b5);
    overflow-wrap: anywhere
}

.telegram-setting-toggle.compact {
    padding: 8px 10px;
    min-width: auto
}

.telegram-template-card .telegram-form-grid {
    grid-template-columns: repeat(2,minmax(0,1fr))
}

.telegram-template-card textarea {
    line-height: 1.55;
    resize: vertical
}

.telegram-template-grid .telegram-template-card {
    background: linear-gradient(145deg,rgba(255,255,255,.035),rgba(16,185,129,.025))
}

@media(max-width: 1080px) {
    .telegram-template-grid {
        grid-template-columns:1fr
    }

    .telegram-template-card .telegram-form-grid {
        grid-template-columns: 1fr 1fr
    }
}




.telegram-automation-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px
}

.telegram-automation-card {
    min-width: 0;
    background: linear-gradient(145deg,rgba(255,255,255,.035),rgba(99,102,241,.035))
}

.telegram-automation-card .telegram-template-head p {
    margin: 4px 0;
    color: var(--muted,#93a0b5)
}

.telegram-test-chat {
    min-width: min(100%,260px);
    margin: 0
}

.telegram-bilingual-template {
    min-width: 0
}

.telegram-bilingual-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px
}

.telegram-language-pane {
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--line,rgba(255,255,255,.1));
    border-radius: 16px;
    background: rgba(255,255,255,.025)
}

.telegram-language-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px
}

.telegram-language-head label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .82rem;
    color: var(--muted,#93a0b5)
}

.telegram-language-pane textarea {
    line-height: 1.6;
    resize: vertical
}

.telegram-language-pane[dir=rtl] input,.telegram-language-pane[dir=rtl] textarea {
    text-align: right;
    direction: rtl
}

.telegram-bilingual-template>.telegram-template-head small {
    display: block;
    max-width: 900px;
    line-height: 1.45
}

.telegram-automation-card select,.telegram-test-chat input {
    width: 100%
}

@media(max-width: 1080px) {
    .telegram-automation-grid {
        grid-template-columns:1fr
    }

    .telegram-bilingual-grid {
        grid-template-columns: 1fr
    }
}




.telegram-control-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    background: radial-gradient(circle at 90% 10%,rgba(56,189,248,.16),transparent 35%),linear-gradient(145deg,rgba(99,102,241,.16),rgba(15,23,42,.2));
    border-color: rgba(129,140,248,.35);
    overflow: hidden
}

.telegram-control-hero h2 {
    margin: 0 0 6px;
    font-size: clamp(1.35rem,2.3vw,2rem)
}

.telegram-control-hero p {
    margin: 0;
    color: var(--muted,#9ca9bc);
    max-width: 820px;
    line-height: 1.55
}

.telegram-control-live {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    padding: 9px 12px;
    border-radius: 999px;
    background: rgba(34,197,94,.1);
    color: #86efac;
    font-weight: 700;
    font-size: .8rem
}

.telegram-control-live span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 5px rgba(34,197,94,.12)
}

.telegram-six-nav {
    display: grid;
    grid-template-columns: repeat(6,minmax(0,1fr));
    overflow: visible
}

.telegram-six-nav .telegram-tab {
    min-height: 48px;
    white-space: normal;
    line-height: 1.25;
    padding: 10px
}

.telegram-overview-grid {
    grid-template-columns: repeat(3,minmax(0,1fr))
}

.telegram-kpi {
    position: relative;
    overflow: hidden;
    min-height: 124px
}

.telegram-kpi-icon {
    position: absolute;
    inset-inline-end: 14px;
    top: 12px;
    font-size: 1.35rem;
    opacity: .85
}

.telegram-kpi .mini-label {
    display: block;
    padding-inline-end:34px}

.telegram-kpi strong {
    display: block;
    margin-top: 10px;
    overflow-wrap: anywhere
}

.telegram-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px
}

.telegram-card-title h3 {
    margin: 0
}

.telegram-section-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: linear-gradient(145deg,rgba(99,102,241,.11),rgba(14,165,233,.05))
}

.telegram-section-intro h2 {
    margin: 0 0 6px
}

.telegram-section-intro p {
    margin: 0;
    color: var(--muted,#93a0b5)
}

.telegram-accordion {
    padding: 0;
    overflow: hidden
}

.telegram-accordion>summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    user-select: none
}

.telegram-accordion>summary::-webkit-details-marker {
    display: none
}

.telegram-accordion>summary h2 {
    margin: 0;
    font-size: 1.05rem
}

.telegram-accordion>summary p {
    margin: 4px 0 0;
    color: var(--muted,#93a0b5);
    font-size: .88rem
}

.telegram-accordion-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(99,102,241,.12);
    transition: transform .2s ease
}

.telegram-accordion[open] .telegram-accordion-icon {
    transform: rotate(180deg)
}

.telegram-accordion-body {
    padding: 0 20px 20px;
    border-top: 1px solid var(--line,rgba(255,255,255,.08));
    padding-top: 18px
}

.telegram-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.telegram-filter-chip {
    border: 1px solid var(--line,rgba(255,255,255,.1));
    background: rgba(255,255,255,.025);
    color: inherit;
    border-radius: 999px;
    min-height: 38px;
    padding: 7px 12px;
    cursor: pointer
}

.telegram-filter-chip.active {
    background: linear-gradient(135deg,#6366f1,#8b5cf6);
    border-color: transparent;
    color: #fff
}

.telegram-filter-chip b {
    margin-inline-start:4px}

.telegram-connection-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px
}

.telegram-connection-card-v2 {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
    gap: 14px;
    min-width: 0
}

.telegram-connection-card-v2 p {
    margin: 4px 0;
    color: var(--muted,#93a0b5);
    overflow-wrap: anywhere
}

.telegram-toolbar-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px
}

.telegram-toolbar-row .telegram-note {
    flex: 1
}

.telegram-rule-type {
    display: inline-flex;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #a5b4fc
}

.telegram-switch {
    position: relative;
    width: 48px;
    height: 27px;
    flex: 0 0 auto
}

.telegram-switch input {
    opacity: 0;
    position: absolute
}

.telegram-switch span {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #475569;
    cursor: pointer;
    transition: .2s
}

.telegram-switch span:before {
    content: "";
    position: absolute;
    width: 21px;
    height: 21px;
    left: 3px;
    top: 3px;
    border-radius: 50%;
    background: #fff;
    transition: .2s
}

.telegram-switch input:checked+span {
    background: #22c55e
}

.telegram-switch input:checked+span:before {
    transform: translateX(21px)
}

.telegram-template-grid-v2 {
    display: grid;
    gap: 14px
}

.telegram-message-preview {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-top: 14px;
    padding: 16px;
    border-radius: 18px;
    background: linear-gradient(145deg,rgba(14,165,233,.1),rgba(99,102,241,.08));
    border: 1px solid rgba(56,189,248,.2)
}

.telegram-message-preview img {
    width: 160px;
    max-height: 140px;
    object-fit: cover;
    border-radius: 13px
}

.telegram-message-preview p {
    line-height: 1.65
}

.telegram-preview-button {
    display: inline-flex;
    padding: 8px 13px;
    border-radius: 9px;
    background: #229ed9;
    color: #fff;
    font-weight: 700
}

.telegram-safe-note {
    border-left-color: #22c55e;
    background: rgba(34,197,94,.07)
}

.telegram-copy-stack {
    display: grid;
    gap: 8px
}

.telegram-copy-stack .telegram-copy-row {
    padding: 8px;
    border: 1px solid var(--line,rgba(255,255,255,.08));
    border-radius: 12px
}

.telegram-copy-stack .telegram-copy-row>span {
    min-width: 125px;
    font-size: .8rem;
    color: var(--muted,#93a0b5)
}

.telegram-language-manager {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px
}

.telegram-language-column {
    min-width: 0;
    border: 1px solid var(--line,rgba(255,255,255,.09));
    border-radius: 16px;
    padding: 13px;
    background: rgba(255,255,255,.02)
}

.telegram-language-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px
}

.telegram-language-title h3 {
    margin: 0
}

.telegram-language-title span {
    font-size: .75rem;
    color: var(--muted,#93a0b5)
}

.telegram-mini-accordion {
    border-top: 1px solid var(--line,rgba(255,255,255,.08));
    padding: 10px 0
}

.telegram-mini-accordion>summary {
    cursor: pointer;
    font-weight: 700
}

.telegram-mini-accordion>div {
    display: grid;
    gap: 10px;
    padding-top: 12px
}

.telegram-mini-accordion code {
    font-size: .68rem;
    color: var(--muted,#93a0b5)
}

.telegram-language-column[dir=rtl] input,.telegram-language-column[dir=rtl] textarea {
    text-align: right;
    direction: rtl
}

.telegram-security-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px
}

.telegram-security-grid>article {
    padding: 15px;
    border: 1px solid var(--line,rgba(255,255,255,.09));
    border-radius: 16px;
    background: rgba(255,255,255,.025)
}

.telegram-security-grid>article.wide {
    grid-column: 1/-1
}

.telegram-security-grid h3 {
    margin: 0 0 6px
}

.telegram-security-grid p {
    color: var(--muted,#93a0b5);
    line-height: 1.5
}

.telegram-debug-log {
    max-height: 340px;
    overflow: auto;
    padding: 14px;
    border-radius: 13px;
    background: rgba(0,0,0,.28);
    white-space: pre-wrap;
    word-break: break-word;
    color: #cbd5e1;
    font-size: .78rem;
    line-height: 1.55
}

.telegram-status.bad {
    border-color: rgba(239,68,68,.25)
}

.telegram-status.ok {
    border-color: rgba(34,197,94,.22)
}

@media(max-width: 1180px) {
    .telegram-six-nav {
        grid-template-columns:repeat(3,minmax(0,1fr))
    }

    .telegram-overview-grid {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .telegram-connection-grid {
        grid-template-columns: 1fr
    }
}




.telegram-field-builder {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
    gap: 12px;
    margin-top: 10px
}

.tg-field-box {
    padding: 14px!important
}

.tg-gift-data-form {
    display: grid;
    gap: 8px;
    min-width: 220px
}

.tg-gift-data-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid rgba(148,163,184,.22);
    border-radius: 12px;
    background: rgba(15,23,42,.38)
}

.tg-gift-data-row span {
    display: grid;
    gap: 2px;
    min-width: 0
}

.tg-gift-data-row em {
    font-style: normal;
    overflow-wrap: anywhere;
    color: var(--text-muted,#a9b4c7)
}

.telegram-gift-request-table td {
    vertical-align: top
}

.tg-request-identity{display:grid;gap:7px;min-width:170px}.tg-request-identity-line{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 9px;border:1px solid var(--border,rgba(148,163,184,.22));border-radius:11px;background:rgba(15,23,42,.28)}.tg-copy-icon{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;padding:0;border:1px solid rgba(96,165,250,.35);border-radius:10px;background:rgba(59,130,246,.12);color:inherit;cursor:pointer}.tg-copy-icon:hover{background:rgba(59,130,246,.24);transform:translateY(-1px)}.tg-request-create-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%;padding-bottom:4px}.tg-request-create-actions>span{grid-column:1/-1;color:var(--text-muted,#a9b4c7);font-size:12px;font-weight:800}.tg-request-create-actions .ks-btn{min-height:40px;white-space:nowrap}




.telegram-table .telegram-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center
}

.ks-btn.ks-warning {
    background: rgba(245,158,11,.16);
    border: 1px solid rgba(245,158,11,.35);
    color: #fbbf24
}

.telegram-table td:last-child {
    min-width: 220px
}

.ks-language-toggle {
    min-width: 92px;
    direction: ltr;
    unicode-bidi: isolate;
    font-weight: 950;
    background: linear-gradient(135deg,rgba(34,197,94,.28),rgba(49,118,255,.32));
    border-color: rgba(94,234,212,.36)
}

.login-language-toggle {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 82px;
    min-height: 38px;
    padding: 7px 11px;
    font-size: 12px
}

html[dir="rtl"] body {
    direction: rtl;
    text-align: right
}

html[dir="rtl"] .app-view {
    grid-template-columns: var(--sidebar) minmax(0,1fr);
    background: linear-gradient(270deg,#050507 0,var(--bg) var(--sidebar),#08101c)
}

html[dir="rtl"] .hero-actions {
    margin-left: 0;
    margin-right: auto
}

html[dir="rtl"] .search-box .search-ico {
    order: 0
}

html[dir="rtl"] .ks-field,html[dir="rtl"] .mini-label,html[dir="rtl"] .meta-item,html[dir="rtl"] .mobile-table-field {
    text-align: right
}

html[dir="rtl"] input,html[dir="rtl"] select,html[dir="rtl"] textarea {
    text-align: right
}

html[dir="rtl"] input[type="email"],html[dir="rtl"] input[type="tel"],html[dir="rtl"] input[type="number"],html[dir="rtl"] input[type="date"],html[dir="rtl"] input[type="datetime-local"],html[dir="rtl"] input[autocomplete="username"],html[dir="rtl"] input[autocomplete="current-password"],html[dir="rtl"] input[autocomplete="new-password"],html[dir="rtl"] .ltr,html[dir="rtl"] .email,html[dir="rtl"] .phone,html[dir="rtl"] code {
    direction: ltr;
    text-align: left;
    unicode-bidi: embed
}

html[dir="rtl"] .login-language-toggle {
    right: auto;
    left: 0
}

html[dir="rtl"] .mobile-accordion-head {
    padding-right: 0!important;
    padding-left: 42px!important
}

html[dir="rtl"] .mobile-accordion-toggle {
    right: auto!important;
    left: 0!important
}

html[dir="rtl"] .permission-panel .mobile-permission-group>h4 {
    padding-right: 12px!important;
    padding-left: 40px!important
}

html[dir="rtl"] .permission-panel .mobile-permission-group>h4:after {
    right: auto!important;
    left: 13px!important
}

html[dir="rtl"] .family-seat-box.simple>div:first-child b:after {
    content: " بەکارهاتوو"
}







:root {
    --bg: #070b18;
    --bg2: #0a1020;
    --panel: #0e1629;
    --panel2: #121c33;
    --panel3: #17223d;
    --line: rgba(151,171,224,.16);
    --line2: rgba(151,171,224,.29);
    --text: #f4f7ff;
    --muted: #8f9bb8;
    --soft: #d8e0f2;
    --blue: #4f7cff;
    --cyan: #22d3ee;
    --green: #20d6a3;
    --purple: #9b5cff;
    --pink: #f05aa6;
    --red: #ff5d78;
    --amber: #ffb547;
    --sidebar: 292px;
    --radius: 22px;
    --radius-sm: 15px;
    --shadow: 0 28px 80px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.045);
    --glow: 0 0 0 1px rgba(255,255,255,.035),0 18px 48px rgba(38,68,168,.16);
    --premium-gradient: linear-gradient(135deg,#4f7cff 0%,#765dff 48%,#9b5cff 100%);
    --premium-surface: linear-gradient(160deg,rgba(18,28,51,.96),rgba(9,15,30,.98));
}

html {
    background: var(--bg);
    color-scheme: dark
}

html,body {
    font-weight: 600;
    letter-spacing: -.012em
}

body {
    background: radial-gradient(circle at 84% -8%,rgba(112,75,255,.23),transparent 31%), radial-gradient(circle at 10% 16%,rgba(34,211,238,.10),transparent 30%), linear-gradient(145deg,#060a16 0%,#080d1c 48%,#070b18 100%);
}

::selection {
    background: rgba(79,124,255,.42);
    color: #fff
}

button,input,select,textarea {
    letter-spacing: inherit
}

button:active,.ks-btn:active {
    transform: translateY(1px) scale(.992)
}

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible {
    outline: 3px solid rgba(79,124,255,.42);
    outline-offset: 2px
}

.login-ambient {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: -1
}

.login-orb {
    position: absolute;
    border-radius: 999px;
    filter: blur(70px);
    opacity: .55
}

.login-orb-one {
    width: 430px;
    height: 430px;
    left: -150px;
    top: -160px;
    background: rgba(79,124,255,.32)
}

.login-orb-two {
    width: 390px;
    height: 390px;
    right: -110px;
    bottom: -150px;
    background: rgba(155,92,255,.30)
}

.login-grid-pattern {
    position: absolute;
    inset: 0;
    opacity: .16;
    background-image: linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(to bottom,transparent 0,#000 20%,#000 78%,transparent 100%)
}

.login-eyebrow {
    display: block;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: .22em;
    color: #91e9f8;
    text-transform: uppercase
}

.login-security-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    background: rgba(32,214,163,.15);
    color: var(--green);
    font-size: 18px;
    font-weight: 900
}

.login-language-toggle {
    position: absolute;
    right: 0;
    top: 0;
    min-width: 86px;
    padding: 10px 13px!important;
    font-size: 11px!important;
    border-radius: 13px!important;
    background: rgba(255,255,255,.055)!important;
    box-shadow: none!important
}

.login-mobile-brand {
    display: none;
    align-items: center;
    gap: 12px;
    margin-bottom: 30px
}

.login-title-block h1 {
    margin: 10px 0 7px;
    font-size: 34px;
    line-height: 1.1;
    letter-spacing: -.04em;
    color: #fff;
    background: none;
    -webkit-text-fill-color: initial
}

.login-title-block p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 500
}

.login-input-icon {
    width: 38px;
    height: 100%;
    display: grid;
    place-items: center;
    color: #64dff1;
    font-size: 12px;
    font-weight: 900
}

.login-submit {
    min-height: 56px!important;
    margin-top: 2px;
    border: 0!important;
    border-radius: 17px!important;
    justify-content: space-between!important;
    padding: 0 18px!important;
    box-shadow: 0 16px 34px rgba(79,124,255,.27)!important;
    font-size: 13px!important
}

.login-submit b {
    font-size: 20px;
    font-weight: 500
}

.app-view {
    position: relative;
    isolation: isolate;
    grid-template-columns: var(--sidebar) minmax(0,1fr);
    background: transparent
}

.app-ambient {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden
}

.app-ambient span {
    position: absolute;
    border-radius: 999px;
    filter: blur(95px);
    opacity: .2
}

.app-ambient span:first-child {
    width: 420px;
    height: 420px;
    right: -150px;
    top: -200px;
    background: var(--purple)
}

.app-ambient span:last-child {
    width: 360px;
    height: 360px;
    left: 18%;
    bottom: -250px;
    background: var(--cyan);
    opacity: .09
}

.side-live-dot {
    position: absolute;
    right: 12px;
    top: 12px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 4px rgba(32,214,163,.10),0 0 16px rgba(32,214,163,.65)
}

.nav-count {
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    display: inline-grid;
    place-items: center;
    background: var(--red);
    font-size: 9px;
    color: #fff
}

.user-avatar {
    width: 43px;
    height: 43px;
    border-radius: 13px;
    background: var(--premium-gradient);
    font-size: 15px;
    box-shadow: 0 10px 22px rgba(79,124,255,.23)
}

.side-version {
    display: block;
    margin-top: 8px;
    text-align: center;
    color: #4f5b76;
    font-size: 8px;
    font-weight: 600
}

.top-security-icon {
    width: 25px;
    height: 25px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: rgba(34,211,238,.09);
    color: var(--cyan);
    font-size: 13px
}

.icon-btn {
    width: 43px;
    height: 43px;
    border-radius: 13px;
    border-color: var(--line);
    background: rgba(255,255,255,.04);
    font-size: 17px
}

.ks-page {
    max-width: 1440px
}

.page-hero {
    position: relative;
    overflow: hidden;
    min-height: 112px;
    padding: 22px 24px;
    border-radius: 25px;
    margin-bottom: 16px;
    border-color: var(--line);
    background: radial-gradient(circle at 91% 10%,rgba(155,92,255,.24),transparent 30%),linear-gradient(140deg,rgba(20,35,66,.93),rgba(10,17,34,.96));
    box-shadow: 0 20px 54px rgba(0,0,0,.23),inset 0 1px 0 rgba(255,255,255,.04)
}

.page-hero:after {
    content: "";
    position: absolute;
    right: -50px;
    top: -100px;
    width: 250px;
    height: 250px;
    border: 1px solid rgba(255,255,255,.045);
    border-radius: 50%;
    box-shadow: 0 0 0 30px rgba(255,255,255,.012),0 0 0 65px rgba(255,255,255,.01);
    pointer-events: none
}

.hero-left {
    gap: 14px;
    position: relative;
    z-index: 1
}

.hero-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    font-size: 22px;
    background: var(--premium-gradient);
    border: 0;
    box-shadow: 0 12px 28px rgba(79,124,255,.26)
}

.page-kicker,.mini-label {
    font-size: 9px;
    letter-spacing: .16em;
    color: #8b9bc1;
    font-weight: 800
}

.page-hero h1 {
    margin: 3px 0 4px;
    font-size: 28px;
    letter-spacing: -.04em;
    color: #fff
}

.page-hero p {
    font-size: 11px;
    line-height: 1.45;
    color: #91a0bf
}

.hero-actions {
    position: relative;
    z-index: 2;
    gap: 7px
}

.hero-actions .ks-btn {
    min-height: 42px;
    padding: 0 13px;
    font-size: 10px;
    border-radius: 13px
}

.ks-stack {
    gap: 14px
}

.ks-grid {
    gap: 12px
}

.ks-card,.premium-surface {
    border-color: var(--line);
    background: var(--premium-surface);
    box-shadow: var(--glow);
    border-radius: 20px
}

.ks-card {
    padding: 16px
}

.ks-card:hover,.row-card:hover,.order-card:hover {
    border-color: rgba(117,143,215,.30)
}

.ks-card.soft {
    background: radial-gradient(circle at 95% 5%,rgba(79,124,255,.09),transparent 34%),var(--premium-surface)
}

.section-title {
    margin-bottom: 12px
}

.section-title h2 {
    font-size: 19px;
    letter-spacing: -.025em
}

.section-title h3 {
    margin: 0;
    font-size: 15px
}

.section-title p {
    font-size: 10px;
    line-height: 1.45
}

.section-title.compact {
    margin-bottom: 9px
}

.order-click-card.active,.report-click-card.active {
    border-color: rgba(79,124,255,.55);
    box-shadow: 0 0 0 3px rgba(79,124,255,.08)
}

.quick-icon {
    width: 37px;
    height: 37px;
    border-radius: 12px;
    margin-bottom: 9px;
    background: rgba(255,255,255,.14);
    font-size: 16px
}

.inner-card {
    background: rgba(255,255,255,.025)!important;
    box-shadow: none!important
}

.ks-btn {
    min-height: 42px;
    padding: 10px 14px;
    border-radius: 13px;
    border-color: var(--line);
    background: rgba(23,34,61,.92);
    font-size: 11px;
    font-weight: 750;
    box-shadow: 0 9px 22px rgba(0,0,0,.14)
}

.ks-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
    border-color: rgba(255,255,255,.18)
}

.ks-btn.small {
    min-height: 34px;
    padding: 7px 10px;
    border-radius: 10px;
    font-size: 9px
}

.ks-primary {
    background: var(--premium-gradient);
    border-color: transparent;
    box-shadow: 0 12px 25px rgba(79,124,255,.24)
}

.ks-blue {
    background: linear-gradient(135deg,#4778f2,#3159c9);
    border-color: transparent
}

.ks-purple {
    background: linear-gradient(135deg,#8d5bf1,#6842c4);
    border-color: transparent
}

.ks-success {
    background: linear-gradient(135deg,#1bbf93,#118f72);
    border-color: transparent
}

.ks-danger {
    background: linear-gradient(135deg,#ed5575,#c9365c);
    border-color: transparent
}

.ks-ghost {
    background: rgba(255,255,255,.035)
}

.ks-field {
    color: #b9c5df;
    font-size: 9px;
    letter-spacing: .08em;
    font-weight: 750
}

.ks-field input,.ks-field select,.ks-field textarea,input,select,textarea,.premium-control {
    min-height: 49px;
    margin-top: 7px;
    padding: 12px 13px;
    border-radius: 14px;
    border-color: var(--line);
    background: rgba(9,16,32,.94);
    color: #f5f8ff;
    font-size: 11px;
    font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.022)
}

select {
    color-scheme: dark
}

.ks-field input:focus,.ks-field select:focus,.ks-field textarea:focus,input:focus,select:focus,textarea:focus {
    border-color: rgba(79,124,255,.66);
    box-shadow: 0 0 0 4px rgba(79,124,255,.09)
}

.ks-field textarea {
    min-height: 102px
}

.form-grid {
    gap: 11px
}

.toolbar {
    gap: 10px;
    margin-bottom: 13px
}

.search-box {
    min-height: 55px;
    padding: 6px 7px;
    border-radius: 16px;
    border-color: var(--line);
    background: rgba(14,22,42,.86)
}

.search-box input {
    min-height: 40px;
    margin: 0;
    padding: 0 7px;
    background: transparent
}

.search-box .search-ico {
    font-size: 16px;
    color: var(--muted)
}

.tab-btn,.chip {
    min-height: 35px;
    padding: 8px 12px;
    border-radius: 12px;
    border-color: var(--line);
    background: rgba(255,255,255,.035);
    font-size: 9px;
    font-weight: 750
}

.tab-btn.active,.chip.active {
    background: rgba(79,124,255,.18);
    border-color: rgba(79,124,255,.43);
    box-shadow: none;
    color: #dce6ff
}

.filters,.tabs-row {
    gap: 6px
}

.list {
    gap: 8px
}

.row-card {
    padding: 11px 12px;
    border-radius: 16px;
    border-color: var(--line);
    background: rgba(14,22,42,.86)
}

.row-card:hover {
    transform: translateY(-1px)
}

.mini-avatar {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: var(--premium-gradient);
    font-size: 14px
}

.row-title {
    font-size: 12px
}

.row-sub {
    margin-top: 3px;
    font-size: 9px;
    color: #8391af
}

.badge {
    min-height: 25px;
    padding: 0 9px;
    border-radius: 10px;
    font-size: 9px;
    font-weight: 750
}

.badge.good {
    background: rgba(32,214,163,.10);
    border-color: rgba(32,214,163,.22);
    color: #72ebc5
}

.badge.warn {
    background: rgba(255,181,71,.10);
    border-color: rgba(255,181,71,.24);
    color: #ffd18a
}

.badge.bad {
    background: rgba(255,93,120,.10);
    border-color: rgba(255,93,120,.24);
    color: #ff9db0
}

.badge.purple {
    background: rgba(155,92,255,.11);
    border-color: rgba(155,92,255,.25);
    color: #c9a8ff
}

.empty {
    padding: 23px;
    border-radius: 17px;
    border-color: rgba(151,171,224,.16);
    background: rgba(255,255,255,.018);
    color: #7f8dab;
    font-size: 11px;
    line-height: 1.55
}

.split-actions,.premium-action-group {
    gap: 6px
}

.order-card,.trash-card,.premium-order-card {
    padding: 15px;
    border-radius: 20px;
    border-color: var(--line);
    background: linear-gradient(155deg,rgba(17,27,50,.96),rgba(8,14,28,.98));
    box-shadow: 0 14px 34px rgba(0,0,0,.17)
}

.premium-order-top,.card-head {
    gap: 10px;
    margin-bottom: 10px
}

.customer-order-avatar {
    width: 45px;
    height: 45px;
    border-radius: 14px;
    background: linear-gradient(135deg,#557ffc,#7b50e5);
    box-shadow: 0 9px 20px rgba(79,124,255,.19);
    font-size: 12px
}

.card-title,.order-card h3 {
    font-size: 15px;
    letter-spacing: -.025em
}

.order-card .service-line p {
    font-size: 9px;
    margin-top: 3px
}

.order-badges,.user-badges {
    gap: 5px
}

.order-service-strip {
    min-height: 42px;
    padding: 9px 11px;
    border-radius: 13px;
    border-color: rgba(151,171,224,.12);
    background: rgba(79,124,255,.065)
}

.order-service-strip b {
    font-size: 11px;
    color: #f0f4ff
}

.order-service-strip span {
    font-size: 10px;
    color: #9bacd1
}

.order-service-strip small {
    font-size: 9px;
    color: #71809f
}

.meta-grid,.order-meta-premium,.family-meta-grid,.family-member-meta,.user-meta-grid {
    gap: 8px;
    margin: 10px 0
}

.meta-item {
    padding: 9px 10px;
    border-radius: 12px;
    border-color: rgba(151,171,224,.10);
    background: rgba(255,255,255,.022)
}

.meta-item label {
    font-size: 8px;
    letter-spacing: .10em;
    color: #71809d
}

.meta-item b {
    margin-top: 4px;
    font-size: 10px;
    color: #dfe7f7;
    line-height: 1.3
}

.meta-item small {
    display: block;
    margin-top: 3px;
    font-size: 8px;
    color: #6f7d99
}

.order-actions-row {
    padding-top: 2px
}

.orders-premium-panel,.orders-filter-card,.orders-toolbar,.orders-pager {
    border-radius: 18px!important
}

.orders-pager {
    padding: 11px 13px!important;
    font-size: 10px
}

.family-group-card,.family-member-card,.trash-order-card,.user-card,.replacement-target-card,.replacement-history-card {
    border-color: var(--line)!important;
    border-radius: 19px!important;
    background: linear-gradient(155deg,rgba(17,27,50,.95),rgba(8,14,28,.98))!important;
    box-shadow: 0 13px 32px rgba(0,0,0,.16)!important;
}

.service-icon {
    border-radius: 13px!important;
    background: linear-gradient(135deg,rgba(79,124,255,.24),rgba(155,92,255,.20))!important;
    border-color: rgba(151,171,224,.13)!important
}

.family-service-scroll {
    gap: 8px!important
}

.family-toolbar,.family-summary-panel {
    border-radius: 19px!important
}

.pro-panel,.security-tile,.finance-kpi,.report-card,.spending-card {
    border-color: var(--line)!important;
    border-radius: 17px!important;
    background: rgba(255,255,255,.026)!important;
    box-shadow: none!important
}

.pro-panel.hero-money {
    background: linear-gradient(135deg,rgba(79,124,255,.28),rgba(155,92,255,.22))!important;
    border-color: rgba(121,143,255,.25)!important
}

.pro-panel strong,.finance-kpi strong {
    color: #fff;
    letter-spacing: -.035em
}

.pro-track {
    height: 7px!important;
    background: rgba(255,255,255,.05)!important
}

.pro-track i {
    background: linear-gradient(90deg,var(--blue),var(--cyan))!important
}

.partner-card-pro,.pro-service-row {
    border-color: var(--line)!important;
    border-radius: 16px!important;
    background: rgba(255,255,255,.022)!important
}

.partner-card-pro:hover,.pro-service-row:hover {
    border-color: rgba(79,124,255,.32)!important;
    background: rgba(79,124,255,.05)!important
}

.finance-filter-card,.report-export-card,.admin-spending-form,.deleted-spending-filter-card {
    border-radius: 20px!important
}

.tabs {
    gap: 6px!important;
    padding: 5px!important;
    border-radius: 15px!important;
    background: rgba(255,255,255,.025)!important
}

.whatsapp-logo {
    border-radius: 13px!important;
    background: linear-gradient(135deg,rgba(32,214,163,.21),rgba(79,124,255,.20))!important
}

.template-body-preview,.message-preview {
    border-color: var(--line)!important;
    border-radius: 14px!important;
    background: rgba(7,13,27,.78)!important;
    color: #b9c5df!important
}

.profile-head {
    gap: 14px
}

.profile-avatar {
    width: 65px;
    height: 65px;
    border-radius: 20px;
    background: var(--premium-gradient);
    font-size: 23px
}

.profile-head h2 {
    font-size: 24px
}

.mini-stats {
    gap: 8px
}

.mini-stat {
    padding: 11px;
    border-radius: 14px;
    border-color: var(--line);
    background: rgba(255,255,255,.025)
}

.mini-stat b {
    font-size: 20px
}

.settings-section {
    grid-template-columns: 220px minmax(0,1fr);
    gap: 16px;
    border-color: var(--line)
}

.permission-group,.permission-panel,.user-editor-actions-card {
    border-radius: 18px!important;
    border-color: var(--line)!important;
    background: rgba(255,255,255,.02)!important
}

.permission-item {
    border-color: rgba(151,171,224,.1)!important;
    background: rgba(255,255,255,.02)!important;
    border-radius: 13px!important
}

.table-wrap {
    border-radius: 17px;
    border-color: var(--line);
    background: rgba(8,14,28,.86);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.02)
}

.data-table th,.data-table td {
    padding: 11px 12px;
    border-color: rgba(151,171,224,.08)
}

.data-table th {
    font-size: 8px;
    letter-spacing: .12em;
    color: #8291b2;
    background: rgba(255,255,255,.025)
}

.data-table td {
    font-size: 10px;
    color: #cdd7eb
}

.data-table tbody tr:hover {
    background: rgba(79,124,255,.045)
}

.modal {
    padding: 20px;
    background: rgba(2,5,12,.78);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px)
}

.modal-card {
    width: min(820px,94vw);
    max-height: 90dvh;
    padding: 22px;
    border-radius: 26px;
    border-color: var(--line);
    background: linear-gradient(155deg,#10192e,#080f20 70%);
    box-shadow: 0 34px 100px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.04)
}

.modal-close {
    right: 13px;
    top: 13px;
    width: auto;
    min-width: 42px;
    height: 38px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255,255,255,.045);
    font-size: 10px;
    color: #aebad3
}

.modal-close b {
    font-size: 20px;
    color: #fff
}

.modal-close span {
    font-size: 9px
}

.ks-toast {
    right: 20px;
    bottom: 20px;
    padding: 12px 15px;
    border-radius: 15px;
    border-color: var(--line);
    background: rgba(13,21,40,.96);
    font-size: 11px;
    box-shadow: 0 20px 50px rgba(0,0,0,.35)
}

.skeleton-row {
    border-color: var(--line)!important;
    border-radius: 15px!important;
    background: rgba(255,255,255,.02)!important
}

.skeleton-row span,.skeleton-row i,.skeleton-row em,.skeleton-row b {
    background: linear-gradient(90deg,rgba(255,255,255,.035),rgba(255,255,255,.075),rgba(255,255,255,.035))!important;
    background-size: 220% 100%!important
}

@media(max-width: 1180px) {
    :root {
        --sidebar:272px
    }

    .page-hero h1 {
        font-size: 25px
    }

    .grid-5 {
        grid-template-columns: repeat(3,minmax(0,1fr))
    }
}







html[dir="rtl"] body {
    font-family: Inter,"Noto Sans Arabic",Tahoma,sans-serif
}

html[dir="rtl"] .side-live-dot {
    right: auto;
    left: 12px
}

html[dir="rtl"] .data-table th,html[dir="rtl"] .data-table td {
    text-align: right
}

.compact-pro .pro-finance-grid {
    grid-template-columns: repeat(3,minmax(0,1fr))!important
}

.compact-pro .pro-panel strong {
    font-size: clamp(18px,1.6vw,24px)!important;
    line-height: 1.08!important;
    overflow-wrap: normal!important;
    word-break: normal!important
}

.compact-pro .hero-money strong {
    font-size: clamp(21px,1.9vw,28px)!important
}






















html[data-theme="midnight"] {
    --bg: #070b18;
    --bg2: #0a1020;
    --panel: #0e1629;
    --panel2: #121c33;
    --panel3: #17223d;
    --blue: #4f7cff;
    --cyan: #22d3ee;
    --green: #20d6a3;
    --purple: #9b5cff;
    --pink: #f05aa6;
    --premium-gradient: linear-gradient(135deg,#4f7cff 0%,#765dff 48%,#9b5cff 100%);
    --theme-glow-a: rgba(112,75,255,.23);
    --theme-glow-b: rgba(34,211,238,.10);
    --theme-hero-a: rgba(20,35,66,.93);
    --theme-hero-b: rgba(10,17,34,.96);
}

html[data-theme="aurora"] {
    --bg: #10091c;
    --bg2: #160d28;
    --panel: #1a1230;
    --panel2: #21183a;
    --panel3: #2a1e49;
    --blue: #8a6cff;
    --cyan: #5ee7f7;
    --green: #42e7b5;
    --purple: #c05cff;
    --pink: #ff67b3;
    --line: rgba(218,185,255,.17);
    --line2: rgba(218,185,255,.3);
    --premium-gradient: linear-gradient(135deg,#7567ff 0%,#a951f2 48%,#ef58a8 100%);
    --theme-glow-a: rgba(215,67,255,.27);
    --theme-glow-b: rgba(92,231,247,.12);
    --theme-hero-a: rgba(54,26,87,.95);
    --theme-hero-b: rgba(22,12,40,.97);
}

html[data-theme="oceanPro"] {
    --bg: #04111f;
    --bg2: #071827;
    --panel: #0a2032;
    --panel2: #0d2940;
    --panel3: #12344f;
    --blue: #2688ff;
    --cyan: #1de0e8;
    --green: #2de1aa;
    --purple: #657dff;
    --pink: #5ed2ff;
    --line: rgba(126,211,255,.17);
    --line2: rgba(126,211,255,.31);
    --premium-gradient: linear-gradient(135deg,#188cff 0%,#1aaed7 48%,#24d6d2 100%);
    --theme-glow-a: rgba(24,140,255,.25);
    --theme-glow-b: rgba(29,224,232,.15);
    --theme-hero-a: rgba(9,49,77,.95);
    --theme-hero-b: rgba(4,24,40,.97);
}

html[data-theme="emerald"] {
    --bg: #04130f;
    --bg2: #071c17;
    --panel: #0b251e;
    --panel2: #103128;
    --panel3: #163d32;
    --blue: #27b7a2;
    --cyan: #32dfc5;
    --green: #33dda4;
    --purple: #6f8cff;
    --pink: #45dcae;
    --line: rgba(126,236,197,.16);
    --line2: rgba(126,236,197,.29);
    --premium-gradient: linear-gradient(135deg,#18a985 0%,#23c79a 48%,#36ddae 100%);
    --theme-glow-a: rgba(35,199,154,.24);
    --theme-glow-b: rgba(50,223,197,.13);
    --theme-hero-a: rgba(11,57,46,.95);
    --theme-hero-b: rgba(5,27,22,.97);
}

html[data-theme="goldVip"] {
    --bg: #130e06;
    --bg2: #1a1308;
    --panel: #21180b;
    --panel2: #2b2010;
    --panel3: #382a15;
    --blue: #d5a73e;
    --cyan: #f0c863;
    --green: #50d4a0;
    --purple: #9c6af5;
    --pink: #e8aa43;
    --amber: #f4c45d;
    --line: rgba(245,205,117,.17);
    --line2: rgba(245,205,117,.31);
    --premium-gradient: linear-gradient(135deg,#b98220 0%,#d9ad45 48%,#9d6de7 100%);
    --theme-glow-a: rgba(215,166,62,.22);
    --theme-glow-b: rgba(156,106,245,.12);
    --theme-hero-a: rgba(66,46,15,.95);
    --theme-hero-b: rgba(28,20,8,.98);
}

body {
    background: radial-gradient(circle at 84% -8%,var(--theme-glow-a,rgba(112,75,255,.23)),transparent 31%), radial-gradient(circle at 10% 16%,var(--theme-glow-b,rgba(34,211,238,.10)),transparent 30%), linear-gradient(145deg,var(--bg) 0%,var(--bg2) 48%,var(--bg) 100%) !important;
}

.page-hero {
    background: radial-gradient(circle at 91% 10%,var(--theme-glow-a),transparent 30%),linear-gradient(140deg,var(--theme-hero-a),var(--theme-hero-b)) !important;
}

.ks-choice-field,.ks-theme-field {
    display: grid;
    gap: 8px;
    min-width: 0
}

.ks-choice-label {
    display: block;
    color: #b9c5df;
    font-size: 9px;
    letter-spacing: .1em;
    font-weight: 800;
    text-transform: uppercase
}

.ks-choice-native {
    position: absolute!important;
    width: 1px!important;
    height: 1px!important;
    min-height: 0!important;
    margin: 0!important;
    padding: 0!important;
    opacity: 0!important;
    pointer-events: none!important;
    overflow: hidden!important
}

.ks-choice-grid {
    display: grid;
    grid-template-columns: repeat(var(--choice-columns,4),minmax(0,1fr));
    gap: 8px;
    min-width: 0
}

.ks-choice-chip {
    position: relative;
    min-width: 0;
    cursor: pointer
}

.ks-choice-chip>input {
    position: absolute;
    opacity: 0;
    pointer-events: none
}

.ks-choice-chip>span {
    position: relative;
    min-height: 48px;
    padding: 10px 28px 10px 11px;
    display: flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(9,16,32,.88);
    color: var(--muted);
    transition: .18s ease;
    overflow: hidden
}

.ks-choice-chip>span i {
    font-style: normal;
    color: var(--blue);
    font-size: 11px
}

.ks-choice-chip>span b {
    font-size: 11px;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.ks-choice-chip>span small {
    display: none
}

.ks-choice-chip>span em {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%) scale(.75);
    width: 18px;
    height: 18px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: var(--blue);
    color: white;
    font-size: 10px;
    font-style: normal;
    opacity: 0;
    transition: .18s ease
}

.ks-choice-chip>input:checked+span {
    border-color: color-mix(in srgb,var(--blue) 70%,white 6%);
    background: color-mix(in srgb,var(--blue) 18%,var(--panel));
    color: #fff;
    box-shadow: 0 0 0 3px color-mix(in srgb,var(--blue) 12%,transparent)
}

.ks-choice-chip>input:checked+span em {
    opacity: 1;
    transform: translateY(-50%) scale(1)
}

.ks-choice-chip>input:focus-visible+span {
    outline: 3px solid color-mix(in srgb,var(--blue) 35%,transparent);
    outline-offset: 2px
}

.ks-check-card {
    position: relative;
    cursor: pointer;
    display: block
}

.ks-check-card>input {
    position: absolute;
    opacity: 0;
    pointer-events: none
}

.ks-check-card>span {
    min-height: 54px;
    padding: 11px 14px;
    display: grid;
    grid-template-columns: 28px minmax(0,1fr);
    align-items: center;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: rgba(9,16,32,.88);
    color: var(--muted);
    transition: .18s ease
}

.ks-check-card>span i {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.05);
    border: 1px solid var(--line);
    color: transparent;
    font-style: normal
}

.ks-check-card>span b {
    font-size: 12px;
    color: inherit
}

.ks-check-card>span small {
    grid-column: 2;
    display: block;
    margin-top: -8px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 600
}

.ks-check-card>input:checked+span {
    border-color: rgba(32,214,163,.45);
    background: rgba(32,214,163,.09);
    color: #eafff8;
    box-shadow: 0 0 0 3px rgba(32,214,163,.07)
}

.ks-check-card>input:checked+span i {
    background: var(--green);
    border-color: var(--green);
    color: #fff
}

.ks-theme-field {
    grid-column: 1/-1
}

.ks-theme-grid {
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 10px
}

.ks-theme-card {
    position: relative;
    display: grid;
    gap: 7px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(9,16,32,.72);
    cursor: pointer;
    transition: .18s ease
}

.ks-theme-card>input {
    position: absolute;
    opacity: 0;
    pointer-events: none
}

.ks-theme-card b {
    font-size: 11px;
    color: var(--soft)
}

.ks-theme-card small {
    font-size: 8px;
    line-height: 1.35;
    color: var(--muted)
}

.ks-theme-card em {
    position: absolute;
    right: 9px;
    top: 9px;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: var(--blue);
    color: #fff;
    font-size: 10px;
    font-style: normal;
    opacity: 0
}

.ks-theme-card:has(input:checked) {
    border-color: color-mix(in srgb,var(--blue) 70%,white 6%);
    box-shadow: 0 0 0 3px color-mix(in srgb,var(--blue) 12%,transparent);
    background: color-mix(in srgb,var(--blue) 10%,var(--panel))
}

.ks-theme-card:has(input:checked) em {
    opacity: 1
}

.ks-theme-swatch {
    height: 38px;
    border-radius: 11px;
    display: flex;
    align-items: flex-end;
    gap: 4px;
    padding: 7px;
    overflow: hidden;
    background: linear-gradient(145deg,#0b1020,#141d35)
}

.ks-theme-swatch i {
    display: block;
    width: 13px;
    border-radius: 4px 4px 2px 2px
}

.ks-theme-swatch i:nth-child(1) {
    height: 14px;
    background: #4f7cff
}

.ks-theme-swatch i:nth-child(2) {
    height: 24px;
    background: #9b5cff
}

.ks-theme-swatch i:nth-child(3) {
    height: 18px;
    background: #22d3ee
}

.ks-theme-card[data-theme-preview="aurora"] .ks-theme-swatch {
    background: linear-gradient(145deg,#190d2d,#32174c)
}

.ks-theme-card[data-theme-preview="aurora"] .ks-theme-swatch i:nth-child(1) {
    background: #8a6cff
}

.ks-theme-card[data-theme-preview="aurora"] .ks-theme-swatch i:nth-child(2) {
    background: #ef58a8
}

.ks-theme-card[data-theme-preview="aurora"] .ks-theme-swatch i:nth-child(3) {
    background: #5ee7f7
}

.ks-theme-card[data-theme-preview="oceanPro"] .ks-theme-swatch {
    background: linear-gradient(145deg,#061525,#0c3350)
}

.ks-theme-card[data-theme-preview="oceanPro"] .ks-theme-swatch i:nth-child(1) {
    background: #188cff
}

.ks-theme-card[data-theme-preview="oceanPro"] .ks-theme-swatch i:nth-child(2) {
    background: #24d6d2
}

.ks-theme-card[data-theme-preview="oceanPro"] .ks-theme-swatch i:nth-child(3) {
    background: #5ed2ff
}

.ks-theme-card[data-theme-preview="emerald"] .ks-theme-swatch {
    background: linear-gradient(145deg,#061812,#114333)
}

.ks-theme-card[data-theme-preview="emerald"] .ks-theme-swatch i:nth-child(1) {
    background: #18a985
}

.ks-theme-card[data-theme-preview="emerald"] .ks-theme-swatch i:nth-child(2) {
    background: #36ddae
}

.ks-theme-card[data-theme-preview="emerald"] .ks-theme-swatch i:nth-child(3) {
    background: #6f8cff
}

.ks-theme-card[data-theme-preview="goldVip"] .ks-theme-swatch {
    background: linear-gradient(145deg,#171005,#473110)
}

.ks-theme-card[data-theme-preview="goldVip"] .ks-theme-swatch i:nth-child(1) {
    background: #b98220
}

.ks-theme-card[data-theme-preview="goldVip"] .ks-theme-swatch i:nth-child(2) {
    background: #f4c45d
}

.ks-theme-card[data-theme-preview="goldVip"] .ks-theme-swatch i:nth-child(3) {
    background: #9d6de7
}










:root {
    --m-navy: #071827;
    --m-navy-2: #0d2639;
    --m-surface: #ffffff;
    --m-bg: #f3f7fa;
    --m-teal: #00b7c7;
    --m-teal-dark: #008d9a;
    --m-teal-soft: #def8fa;
    --m-gold: #f3b63e;
    --m-success: #25b978;
    --m-warning: #f39b32;
    --m-danger: #eb5964;
    --m-blue: #377cf6;
    --m-ink: #102536;
    --m-muted: #6c8291;
    --m-line: #dce7ed;
    --m-shadow: 0 12px 34px rgba(15, 38, 55, .10);
    --m-shadow-soft: 0 5px 18px rgba(15, 38, 55, .07);
    --m-radius: 20px;
    --m-radius-sm: 14px;
}





































:root {
    --ks-fast-shadow: 0 18px 48px rgba(0,0,0,.20)
}

.ks-page,.ks-card,.ks-panel,.dashboard-card,[data-view] {
    content-visibility: auto;
    contain-intrinsic-size: 1px 720px
}

img {
    max-width: 100%;
    height: auto
}

img[loading="lazy"] {
    background: rgba(255,255,255,.04)
}

.ks-btn,button,.action-btn {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent
}

.ks-btn:focus-visible,button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
    outline: 3px solid rgba(82,154,255,.55);
    outline-offset: 3px
}

.ks-toast,.toast,.modal,.ks-card,.side-panel {
    will-change: transform,opacity
}




@media (prefers-reduced-motion:reduce) {
    *,*::before,*::after {
        animation-duration: .001ms!important;
        animation-iteration-count: 1!important;
        scroll-behavior: auto!important;
        transition-duration: .001ms!important
    }
}







:root {
    --ks-mobile-gap-1: 6px;
    --ks-mobile-gap-2: 10px;
    --ks-mobile-gap-3: 14px;
    --ks-mobile-gap-4: 18px;
    --ks-mobile-radius: 16px;
    --ks-mobile-control: 44px;
    --ks-mobile-pad: 14px;
}







@media (min-width: 768px) {
    .spending-mobile-cards,.mobile-table-cards {
        display:none!important
    }
}

:root {
    --shared-surface: #0b1828;
    --shared-surface-raised: #102238;
    --shared-line: rgba(148,184,211,.25);
    --shared-text: #f5f9ff;
    --shared-muted: #aec0d4;
    --shared-focus: #60a5fa;
    --shared-danger: #ef4444;
    --shared-success: #22c55e;
    --shared-radius: 18px;
    --shared-shadow: 0 24px 72px rgba(0,0,0,.52)
}

body.modal-open {
    overflow: hidden;
    overscroll-behavior: none
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(0,0,0,.72);
    overscroll-behavior: contain
}

.modal.hidden {
    display: none!important
}

.modal-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(860px,94vw);
    max-height: min(90dvh,920px);
    overflow: hidden;
    padding: 16px;
    border: 1px solid var(--shared-line);
    border-radius: 24px;
    background: #06101d;
    color: var(--shared-text);
    box-shadow: var(--shared-shadow)
}

#modalBody {
    min-height: 0;
    max-height: calc(90dvh - 58px);
    overflow: auto;
    padding: 0 2px 4px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: thin
}

.modal-close {
    position: absolute;
    inset-block-start: 18px;
    inset-inline-end: 18px;
    z-index: 30;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid rgba(248,113,113,.42);
    border-radius: 13px;
    background: rgba(127,29,29,.82);
    color: #fff;
    font-size: 0;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(0,0,0,.35)
}

.modal-close span {
    font-size: 24px;
    font-weight: 900;
    line-height: 1
}

.modal-close:hover {
    background: rgba(185,28,28,.92)
}

.modal-close:focus-visible,.ks-btn:focus-visible,.chip:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
    outline: 3px solid color-mix(in srgb,var(--shared-focus) 50%,transparent);
    outline-offset: 2px
}

.ks-view-modal {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0
}

.ks-view-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    min-height: 104px;
    padding: 18px 66px 18px 18px;
    border: 1px solid rgba(96,165,250,.22);
    border-radius: 20px;
    background: linear-gradient(135deg,#1d4ed8,#4338ca);
    color: #fff
}

html[dir="rtl"] .ks-view-hero {
    padding: 18px 18px 18px 66px
}

.ks-view-hero>div:first-child {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0
}

.ks-view-hero h2 {
    margin: 3px 0 5px;
    color: #fff;
    overflow-wrap: anywhere
}

.ks-view-hero p,.ks-view-hero .mini-label {
    margin: 0;
    color: rgba(255,255,255,.82)
}

.ks-view-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    background: rgba(255,255,255,.14);
    font-size: 24px
}

.ks-family-view .ks-view-hero {
    background: linear-gradient(135deg,#7c3aed,#4c1d95)
}

.ks-family-member-view .ks-view-hero {
    background: linear-gradient(135deg,#db2777,#831843)
}

.ks-view-sections {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px
}

.ks-view-section {
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--shared-line);
    border-radius: 16px;
    background: var(--shared-surface)
}

.ks-view-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 11px
}

.ks-view-section-title h3 {
    margin: 0;
    font-size: 15px
}

.ks-view-fields {
    display: grid;
    gap: 9px
}

.ks-view-field,.ks-secret-field {
    display: grid;
    grid-template-columns: minmax(105px,.72fr) minmax(0,1.28fr);
    align-items: start;
    gap: 10px;
    padding-bottom: 9px;
    border-bottom: 1px dashed var(--shared-line)
}

.ks-view-field:last-child,.ks-secret-field:last-child {
    padding-bottom: 0;
    border-bottom: 0
}

.ks-view-field>span,.ks-secret-field>label {
    font-size: 12px;
    color: var(--shared-muted)
}

.ks-view-field>b,.ks-secret-field b {
    text-align: end;
    overflow-wrap: anywhere;
    word-break: break-word
}

.ks-secret-field .secret-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    min-width: 0
}

.ks-secret-field .secret-toggle {
    min-width: 58px;
    min-height: 34px;
    border: 1px solid var(--shared-line);
    border-radius: 10px;
    background: var(--shared-surface-raised);
    color: var(--shared-text);
    font-weight: 800;
    cursor: pointer
}

.ks-view-actions {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: stretch;
    gap: 8px;
    margin-top: 2px;
    padding: 10px;
    border: 1px solid var(--shared-line);
    border-radius: 15px;
    background: rgba(6,16,29,.96);
    backdrop-filter: blur(12px)
}

.ks-view-actions>.ks-view-primary-copy {
    grid-column: 1
}

.ks-view-actions>.ks-view-more-wrap {
    grid-column: 2;
    position: relative;
    display: flex
}

.ks-view-actions .ks-btn {
    min-height: 42px;
    border-radius: 11px
}

.ks-view-more-button {
    min-width: 100px;
    background: var(--shared-surface-raised);
    color: #fff;
    border: 1px solid #36506b
}

.ks-view-more-menu,.ks-card-more-menu {
    position: absolute;
    inset-inline-end: 0;
    bottom: calc(100% + 8px);
    z-index: 90;
    width: min(250px,76vw);
    display: none;
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 9px;
    border: 1px solid #35506d;
    border-radius: 14px;
    background: #081522;
    box-shadow: 0 20px 58px rgba(0,0,0,.56)
}

.ks-view-more-wrap.is-open .ks-view-more-menu,.ks-card-more.is-open .ks-card-more-menu {
    display: grid
}

.ks-view-more-menu .ks-btn,.ks-card-more-menu .ks-btn {
    width: 100%;
    min-height: 40px;
    justify-content: flex-start;
    text-align: start;
    border-radius: 10px
}

.ks-view-close-action {
    display: none
}

.ks-card-actions-compact {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 8px;
    align-items: stretch;
    width: 100%;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(148,163,184,.22)
}

.ks-card-actions-compact>.ks-btn,.ks-card-actions-compact>.ks-card-more>.ks-btn {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 8px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.1
}

.ks-card-more {
    position: relative;
    min-width: 0
}

.ks-card-more-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: #15283a;
    color: #f8fafc;
    border: 1px solid #365069
}

.ks-card-more-toggle b {
    font-size: 14px;
    letter-spacing: 2px
}

.card-actions-open {
    z-index: 35
}

.ks-toast {
    position: fixed;
    z-index: 300;
    inset-inline: 18px;
    bottom: max(18px,env(safe-area-inset-bottom));
    width: min(440px,calc(100vw - 36px));
    margin-inline:auto;transform: translateY(24px);
    opacity: 0;
    pointer-events: none;
    padding: 13px 15px;
    border: 1px solid rgba(34,211,238,.42);
    border-radius: 14px;
    background: rgba(7,18,31,.96);
    color: #fff;
    box-shadow: 0 18px 50px rgba(0,0,0,.42);
    transition: opacity .18s ease,transform .18s ease;
    overflow-wrap: anywhere
}

.ks-toast.is-error {
    border-color: rgba(239,68,68,.62)
}

.ks-toast.is-success {
    border-color: rgba(34,197,94,.58)
}

.ks-field.is-invalid input,.ks-field.is-invalid select,.ks-field.is-invalid textarea,:is(input,select,textarea)[aria-invalid="true"] {
    border-color: rgba(239,68,68,.8)!important;
    box-shadow: 0 0 0 3px rgba(239,68,68,.12)!important
}

.ks-field-error {
    display: block;
    margin-top: 5px;
    color: #fca5a5;
    font-size: 12px;
    line-height: 1.35
}

.search-box,.filters,.pagination,.pager,.stock-pager {
    min-width: 0
}

.search-box input {
    min-width: 0
}

.pagination,.pager,.stock-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap
}

.pagination .ks-btn[disabled],.pager .ks-btn[disabled],.stock-pager .ks-btn[disabled] {
    opacity: .45;
    cursor: not-allowed
}

html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
    font-family: Inter,"Noto Sans Arabic",Tahoma,sans-serif
}

html[dir="rtl"] :is(input[type="email"],input[type="url"],input[type="tel"],input[type="number"],input[data-ltr],.account-value,.password-value,.email,.phone,.ltr,code) {
    direction: ltr;
    text-align: left;
    unicode-bidi: plaintext
}










:root {
    --shell-sidebar: 280px;
    --shell-topbar: 76px;
    --shell-radius: 22px;
    --shell-gap: 18px;
    --shell-bg: var(--bg,#07101d);
    --shell-surface: var(--card,#0d1726);
    --shell-surface-2: var(--card2,#111e31);
    --shell-line: var(--line,rgba(151,171,224,.16));
    --shell-text: var(--text,#eef5ff);
    --shell-muted: var(--muted,#9fb0ca);
    --shell-accent: var(--primary,#4f7cff);
}

html,body {
    min-height: 100%
}

body {
    margin: 0;
    background: var(--shell-bg);
    color: var(--shell-text)
}

.login-view {
    position: relative;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: clamp(18px,4vw,48px);
    overflow: hidden;
    background: radial-gradient(circle at 12% 18%,rgba(79,124,255,.18),transparent 34%),radial-gradient(circle at 88% 78%,rgba(147,78,255,.14),transparent 30%),linear-gradient(145deg,#050914,#091426 58%,#07101d)
}

.login-ambient {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden
}

.login-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(3px);
    opacity: .6
}

.login-orb-one {
    width: 360px;
    height: 360px;
    left: -110px;
    top: -120px;
    background: radial-gradient(circle,rgba(79,124,255,.38),transparent 67%)
}

.login-orb-two {
    width: 420px;
    height: 420px;
    right: -140px;
    bottom: -170px;
    background: radial-gradient(circle,rgba(147,78,255,.3),transparent 68%)
}

.login-grid-pattern {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
    background-size: 36px 36px;
    mask-image: linear-gradient(to bottom,rgba(0,0,0,.9),transparent)
}

.login-shell {
    position: relative;
    z-index: 1;
    width: min(1040px,100%);
    display: grid;
    grid-template-columns: minmax(0,1.15fr) minmax(360px,.85fr);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 30px;
    overflow: hidden;
    background: rgba(8,14,27,.78);
    box-shadow: 0 36px 100px rgba(0,0,0,.5);
    backdrop-filter: blur(24px)
}

.login-showcase {
    min-height: 590px;
    padding: 42px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: linear-gradient(150deg,rgba(79,124,255,.17),rgba(8,14,27,.15));
    border-inline-end:1px solid rgba(255,255,255,.09)}

.login-showcase-brand,.login-mobile-brand {
    display: flex;
    align-items: center;
    gap: 13px
}

.login-showcase-brand img,.login-mobile-brand img {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    object-fit: cover
}

.login-showcase-brand strong,.login-mobile-brand strong {
    display: block;
    font-size: 18px
}

.login-showcase-brand span,.login-mobile-brand span {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    letter-spacing: .16em;
    color: var(--shell-muted)
}

.login-showcase-copy {
    max-width: 520px
}

.login-eyebrow {
    display: block;
    color: #8faeff;
    font-weight: 800;
    font-size: 11px;
    letter-spacing: .15em
}

.login-showcase-copy h2 {
    margin: 14px 0 16px;
    font-size: clamp(38px,5vw,58px);
    line-height: 1.02;
    letter-spacing: -.045em
}

.login-showcase-copy p {
    margin: 0;
    color: var(--shell-muted);
    font-size: 16px;
    line-height: 1.75
}

.login-showcase-metrics {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 12px
}

.login-showcase-metrics div {
    padding: 14px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 16px;
    background: rgba(255,255,255,.035)
}

.login-showcase-metrics b {
    display: block;
    font-size: 19px
}

.login-showcase-metrics span {
    display: block;
    margin-top: 4px;
    color: var(--shell-muted);
    font-size: 11px
}

.login-showcase-security {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--shell-muted)
}

.login-security-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(39,195,131,.14);
    color: #55d99e;
    font-weight: 900
}

.login-showcase-security b {
    display: block;
    color: var(--shell-text)
}

.login-showcase-security small {
    display: block;
    margin-top: 3px
}

.login-card {
    min-height: 590px;
    padding: 38px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: rgba(8,14,27,.72)
}

.login-mobile-brand {
    display: none
}

.login-brand {
    position: relative
}

.login-language-toggle {
    position: absolute;
    inset-inline-end: 0;
    top: 0
}

.login-title-block {
    margin-bottom: 28px
}

.login-title-block h1 {
    margin: 10px 0 7px;
    font-size: 34px;
    letter-spacing: -.04em
}

.login-title-block p {
    margin: 0;
    color: var(--shell-muted)
}

.login-form {
    display: grid;
    gap: 17px
}

.login-field {
    display: grid;
    gap: 8px
}

.login-field-label {
    font-size: 12px;
    font-weight: 800;
    color: #d9e5f7
}

.login-input-shell {
    min-height: 54px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border: 1px solid var(--shell-line);
    border-radius: 16px;
    background: rgba(255,255,255,.035);
    transition: border-color .18s,box-shadow .18s,background .18s
}

.login-input-shell:focus-within {
    border-color: rgba(79,124,255,.75);
    box-shadow: 0 0 0 4px rgba(79,124,255,.12);
    background: rgba(255,255,255,.055)
}

.login-input-shell input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--shell-text);
    font: inherit
}

.login-input-shell input::placeholder {
    color: #71819a
}

.login-input-icon {
    color: #8faeff;
    font-weight: 900
}

.login-input-shell button {
    border: 0;
    background: transparent;
    color: var(--shell-muted);
    cursor: pointer
}

.login-session-note {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--shell-muted)
}

.login-session-note span {
    color: #55d99e
}

.login-submit {
    min-height: 54px;
    border-radius: 16px
}

.login-msg,.login-lock-countdown {
    min-height: 22px;
    text-align: center;
    color: var(--shell-muted);
    font-size: 12px
}

.login-footer {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--shell-line);
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--shell-muted);
    font-size: 11px
}

.app-view {
    min-height: 100dvh;
    display: grid;
    grid-template-columns: var(--shell-sidebar) minmax(0,1fr);
    background: var(--shell-bg)
}

.app-ambient {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0
}

.app-ambient span {
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    filter: blur(10px);
    opacity: .16
}

.app-ambient span:first-child {
    left: 18%;
    top: -240px;
    background: #4f7cff
}

.app-ambient span:last-child {
    right: -180px;
    bottom: -220px;
    background: #934eff
}

.ks-sidebar {
    position: sticky;
    top: 0;
    z-index: 60;
    height: 100dvh;
    min-width: 0;
    display: grid;
    grid-template-rows: minmax(0,1fr) auto;
    border-inline-end:1px solid var(--shell-line);background: linear-gradient(180deg,rgba(8,14,27,.98),rgba(5,10,20,.99));
    box-shadow: 18px 0 50px rgba(0,0,0,.16)
}

.side-scroll {
    min-height: 0;
    overflow: auto;
    padding: 20px 16px
}

.side-brand {
    min-height: 60px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 8px 18px;
    border-bottom: 1px solid var(--shell-line)
}

.side-brand-logo {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 14px
}

.side-brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.side-brand-copy {
    min-width: 0;
    flex: 1
}

.side-brand-copy strong {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.side-brand-copy span {
    display: block;
    margin-top: 3px;
    font-size: 9px;
    letter-spacing: .14em;
    color: var(--shell-muted)
}

.side-live-dot,.side-user-status {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #3ddc97;
    box-shadow: 0 0 0 4px rgba(61,220,151,.1)
}

.main-nav {
    padding-top: 14px
}

.nav-section {
    padding: 16px 12px 7px;
    color: #71839e;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .13em
}

.nav-btn {
    width: 100%;
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    margin: 3px 0;
    border: 1px solid transparent;
    border-radius: 14px;
    background: transparent;
    color: var(--shell-muted);
    font: inherit;
    text-align: start;
    cursor: pointer;
    transition: .16s ease
}

.nav-btn:hover {
    background: rgba(255,255,255,.045);
    color: var(--shell-text)
}

.nav-btn.active {
    border-color: rgba(79,124,255,.28);
    background: linear-gradient(135deg,rgba(79,124,255,.2),rgba(79,124,255,.08));
    color: #fff;
    box-shadow: 0 10px 26px rgba(17,40,92,.22)
}

.nav-ico {
    width: 25px;
    text-align: center;
    font-size: 18px
}

.nav-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 750
}

.side-footer {
    padding: 14px 16px 18px;
    border-top: 1px solid var(--shell-line);
    background: rgba(4,9,18,.56)
}

.side-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    margin-bottom: 9px;
    border: 1px solid var(--shell-line);
    border-radius: 16px;
    background: rgba(255,255,255,.03)
}

.user-avatar {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: linear-gradient(135deg,#4f7cff,#934eff);
    font-weight: 900
}

.side-user-copy {
    min-width: 0;
    flex: 1
}

.side-user-copy b,.side-user-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.side-user-copy small {
    margin-top: 3px;
    color: var(--shell-muted);
    font-size: 10px
}

.side-appearance,.side-logout {
    margin-top: 8px
}

.side-version {
    display: block;
    margin-top: 12px;
    text-align: center;
    color: #687991;
    font-size: 10px
}

.side-close {
    border: 0;
    background: transparent;
    color: var(--shell-text);
    font-size: 26px
}

.main-panel {
    position: relative;
    z-index: 1;
    min-width: 0;
    min-height: 100dvh;
    display: flex;
    flex-direction: column
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    min-height: var(--shell-topbar);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 24px;
    border-bottom: 1px solid var(--shell-line);
    background: rgba(7,13,25,.82);
    backdrop-filter: blur(22px)
}

.topbar-left,.topbar-right,.top-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0
}

.topbar-right {
    margin-inline-start:auto}

.top-title {
    min-width: 0
}

.top-title span {
    display: block;
    color: var(--shell-muted);
    font-size: 11px
}

.top-title strong {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 19px
}

.top-account-security {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 11px;
    border: 1px solid var(--shell-line);
    border-radius: 14px;
    background: rgba(255,255,255,.035);
    color: var(--shell-text);
    cursor: pointer
}

.top-security-icon {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: rgba(79,124,255,.14)
}

.page-host {
    flex: 1;
    min-width: 0;
    padding: 24px clamp(18px,2.6vw,34px) 72px;
    overflow-x: hidden
}

.page-host>.ks-page {
    width: min(1380px,100%);
    margin-inline:auto}

.menu-overlay {
    display: none
}

.mobile-nav,.mobile-quick-add,.mobile-dashboard-greeting {
    display: none
}

.ks-page[data-view="dashboard"] {
    width: min(1380px,100%);
    display: grid;
    gap: 18px
}

.ks-page[data-view="dashboard"] .page-hero {
    margin: 0
}

.dash-metrics {
    display: grid!important;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 14px
}

.metric-card {
    min-height: 132px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px;
    border-radius: 20px;
    text-align: start
}

.metric-card .metric-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(79,124,255,.12);
    font-size: 21px
}

.metric-card strong {
    font-size: clamp(22px,2vw,31px);
    line-height: 1
}

.metric-card small {
    color: var(--shell-muted);
    line-height: 1.45
}

.dashboard-click-card,.dashboard-click-panel,.dashboard-click-row {
    cursor: pointer;
    transition: transform .16s ease,border-color .16s ease,box-shadow .16s ease
}

.dashboard-click-card:hover,.dashboard-click-panel:hover,.dashboard-click-row:hover {
    transform: translateY(-2px);
    border-color: rgba(79,124,255,.34);
    box-shadow: 0 16px 40px rgba(0,0,0,.18)
}

.dash-quick-section,.dash-pro-card,.partner-pro-card,.recent-card,.health-card,.backup-security-card {
    margin: 0
}

.dash-quick-grid {
    display: grid!important;
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 12px
}

.quick-card {
    min-height: 122px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    border-radius: 18px;
    text-align: start
}

.quick-card .quick-icon {
    font-size: 25px
}

.quick-card small {
    color: var(--shell-muted)
}

.dashboard-bottom-grid {
    display: grid!important;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 18px
}

.dashboard-context {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--shell-line);
    border-radius: 16px;
    background: rgba(255,255,255,.025)
}

.dashboard-context p {
    margin: 4px 0 0;
    color: var(--shell-muted)
}

html[dir="rtl"] .ks-sidebar {
    border-inline-end:1px solid var(--shell-line)}

html[dir="rtl"] .nav-btn,html[dir="rtl"] .top-title,html[dir="rtl"] .metric-card,html[dir="rtl"] .quick-card {
    text-align: right
}

@media (max-width: 1180px) {
    :root {
        --shell-sidebar:250px
    }

    .dash-metrics {
        grid-template-columns: repeat(3,minmax(0,1fr))
    }

    .dash-quick-grid {
        grid-template-columns: repeat(3,minmax(0,1fr))
    }

    .top-actions .ks-btn {
        padding-inline:11px}

    .top-actions .ks-btn span[aria-hidden="true"] {
        display: none
    }
}







.stock-premium-panel,.stock-toolbar,.stock-summary-panel,.stock-group-hint,.stock-trash-bulk {
    border: 1px solid var(--line);
    background: var(--panel);
    border-radius: 20px;
    box-shadow: var(--shadow-sm)
}

.stock-toolbar {
    display: grid;
    gap: 14px;
    padding: 16px;
    margin-bottom: 14px
}

.stock-toolbar-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px
}

.stock-toolbar-head h2 {
    margin: 0
}

.stock-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end
}

.stock-filter-grid {
    display: grid;
    grid-template-columns: minmax(220px,2fr) repeat(3,minmax(140px,1fr));
    gap: 10px;
    align-items: end
}

.stock-filter-grid .ks-field {
    min-width: 0
}

.stock-service-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 2px 2px 8px;
    scrollbar-width: thin
}

.stock-service-card {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 190px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--panel-2);
    color: var(--text);
    text-align: start;
    cursor: pointer;
    transition: border-color .16s ease,transform .16s ease,background .16s ease
}

.stock-service-card:hover {
    transform: translateY(-1px);
    border-color: var(--accent)
}

.stock-service-card.active {
    border-color: var(--accent);
    background: var(--accent-soft)
}

.stock-service-card span:last-child {
    display: grid;
    gap: 3px;
    min-width: 0
}

.stock-service-card b,.stock-service-card small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.stock-service-card small {
    color: var(--muted)
}

.stock-premium-list,.stock-list,.stock-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
    gap: 14px
}

.stock-account-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--panel);
    box-shadow: var(--shadow-sm);
    overflow: hidden
}

.stock-account-card:hover {
    border-color: color-mix(in srgb,var(--accent) 45%,var(--line))
}

.stock-account-card.sold {
    opacity: .86
}

.stock-account-card.expired {
    border-color: color-mix(in srgb,#ef4444 62%,var(--line));
    background: color-mix(in srgb,#ef4444 8%,var(--panel))
}

.stock-account-card.expiring:not(.expired) {
    border-color: color-mix(in srgb,#f59e0b 58%,var(--line));
    background: color-mix(in srgb,#f59e0b 7%,var(--panel))
}

.stock-account-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px
}

.stock-account-top>div:first-child {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0
}

.stock-account-card h3 {
    margin: 0;
    font-size: 16px;
    line-height: 1.35;
    overflow-wrap: anywhere
}

.stock-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    max-width: 48%
}

.stock-meta-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px
}

.stock-meta-grid .meta-item {
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--panel-2)
}

.stock-meta-grid label {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .05em
}

.stock-meta-grid b,.stock-meta-grid strong {
    display: block;
    overflow-wrap: anywhere
}

.stock-note {
    padding: 10px 12px;
    border-inline-start:3px solid var(--accent);border-radius: 10px;
    background: var(--panel-2);
    color: var(--muted);
    overflow-wrap: anywhere
}

.stock-actions-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--line)
}

.stock-actions-row>.ks-btn {
    flex: 0 0 auto
}

.stock-actions-row .split-actions {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    gap: 8px
}

.stock-actions-row .mobile-more-actions {
    margin-inline-start:auto}

.stock-trash-card {
    padding-top: 18px
}

.stock-trash-select {
    position: absolute;
    inset-block-start: 10px;
    inset-inline-end: 10px;
    z-index: 2
}

.stock-trash-select label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel-2);
    font-size: 11px
}

.stock-trash-bulk {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    margin-bottom: 14px
}

.stock-trash-bulk h3,.stock-trash-bulk p {
    margin: 0
}

.stock-trash-bulk-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end
}

.stock-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px
}

.stock-pager .split-actions {
    display: flex;
    gap: 8px
}

.stock-edit-modal,.stock-single-modal {
    width: min(760px,100%)
}

.stock-edit-modal .form-grid,.stock-single-modal .form-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px
}

.stock-edit-modal .wide,.stock-single-modal .wide {
    grid-column: 1/-1
}

.stock-detail-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px
}

.ks-stock-view .ks-view-hero {
    background: linear-gradient(135deg,#0f766e,#115e59)
}

.ks-stock-view.is-trash .ks-view-hero {
    background: linear-gradient(135deg,#b91c1c,#7f1d1d)
}

.account-email,.account-username,.stock-email,.stock-credential,[data-stock-card] [class*="email"] {
    direction: ltr;
    unicode-bidi: plaintext;
    text-align: start;
    overflow-wrap: anywhere
}

html[dir="rtl"] .stock-toolbar-head,html[dir="rtl"] .stock-account-top,html[dir="rtl"] .stock-trash-bulk {
    direction: rtl
}

.stock-account-card:focus-visible,.stock-service-card:focus-visible {
    outline: 3px solid color-mix(in srgb,var(--accent) 42%,transparent);
    outline-offset: 2px
}










#settingsHost {
    display: grid;
    gap: 14px;
    padding: 18px
}

.settings-section {
    display: grid;
    grid-template-columns: minmax(190px,240px) minmax(0,1fr);
    gap: 18px;
    align-items: start;
    margin: 0;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255,255,255,.025)
}

.settings-section:first-child {
    margin: 0;
    padding: 18px;
    border-top: 1px solid var(--line)
}

.settings-section h2 {
    margin: 0 0 6px
}

.settings-section p {
    margin: 0;
    line-height: 1.5
}

.settings-section .split-actions {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px
}

.settings-section .split-actions .ks-btn {
    width: 100%;
    min-height: 46px
}

.permission-panel {
    overflow: hidden
}

.permission-grid {
    grid-template-columns: repeat(3,minmax(0,1fr))
}

.permission-item {
    min-width: 0
}

.permission-item span {
    overflow-wrap: anywhere
}

.backup-security-grid {
    grid-template-columns: repeat(4,minmax(0,1fr))
}

.security-tile {
    min-width: 0
}

.security-tile strong,.security-tile small {
    overflow-wrap: anywhere;
    white-space: normal
}

.telegram-control-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px
}

.telegram-six-nav {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 8px
}

.telegram-six-nav .telegram-tab {
    min-width: 0;
    white-space: normal
}

.telegram-overview-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 12px
}

.telegram-accordion,.telegram-connection-card-v2,.telegram-security-grid>article {
    min-width: 0
}

.telegram-copy-row {
    display: grid;
    grid-template-columns: minmax(120px,.7fr) minmax(0,1fr) auto;
    gap: 8px;
    align-items: center
}

.telegram-copy-row code,.telegram-copy-row input {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-all
}

@media(max-width: 1100px) {
    .permission-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }

    .backup-security-grid,.telegram-overview-grid {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .telegram-six-nav {
        grid-template-columns: repeat(3,minmax(0,1fr))
    }
}




/* ===== Kurd Store VIP v1.3.5.1 responsive UI refresh ===== */
:root {
    --ui-bg: #06101d;
    --ui-surface: rgba(12,22,38,.86);
    --ui-surface-strong: rgba(15,27,47,.96);
    --ui-soft: rgba(255,255,255,.055);
    --ui-line: rgba(168,190,225,.16);
    --ui-line-strong: rgba(168,190,225,.27);
    --ui-text: #eef6ff;
    --ui-muted: #9fb2cc;
    --ui-accent: #4f7cff;
    --ui-accent-2: #24d6d2;
    --ui-success: #27d19a;
    --ui-danger: #f05d6a;
    --ui-radius-xl: 26px;
    --ui-radius-lg: 20px;
    --ui-radius-md: 15px;
    --ui-shadow: 0 22px 70px rgba(0,0,0,.30);
    --ui-shadow-soft: 0 10px 30px rgba(0,0,0,.18);
    --shell-sidebar: 292px;
    --shell-topbar: 74px;
}

html[data-appearance="light"] {
    --ui-bg: #f3f7fb;
    --ui-surface: rgba(255,255,255,.88);
    --ui-surface-strong: #fff;
    --ui-soft: rgba(14,48,76,.045);
    --ui-line: rgba(20,55,88,.13);
    --ui-line-strong: rgba(20,55,88,.24);
    --ui-text: #102536;
    --ui-muted: #607789;
    --ui-shadow: 0 24px 70px rgba(17,45,70,.13);
    --ui-shadow-soft: 0 10px 28px rgba(17,45,70,.10);
    --shell-bg: var(--ui-bg);
    --shell-surface: var(--ui-surface-strong);
    --shell-surface-2: #f7fafc;
    --shell-line: var(--ui-line);
    --shell-text: var(--ui-text);
    --shell-muted: var(--ui-muted);
}

html[data-appearance="dark"] {
    --shell-bg: var(--ui-bg);
    --shell-surface: var(--ui-surface-strong);
    --shell-surface-2: #132436;
    --shell-line: var(--ui-line);
    --shell-text: var(--ui-text);
    --shell-muted: var(--ui-muted);
}

html {
    scroll-behavior: smooth
}

body {
    color: var(--ui-text);
    background: radial-gradient(circle at 14% -12%,color-mix(in srgb,var(--ui-accent) 28%,transparent),transparent 34%), radial-gradient(circle at 94% 10%,color-mix(in srgb,var(--ui-accent-2) 16%,transparent),transparent 30%), var(--ui-bg) !important;
}

.app-view {
    grid-template-columns: var(--shell-sidebar) minmax(0,1fr) !important;
    background: transparent !important;
}

.ks-sidebar {
    background: linear-gradient(180deg,color-mix(in srgb,var(--ui-surface-strong) 96%,transparent),color-mix(in srgb,#020812 90%,var(--ui-surface-strong))) !important;
    border-inline-end:1px solid var(--ui-line) !important; box-shadow: 18px 0 56px rgba(0,0,0,.18) !important;
}

.side-scroll {
    padding: 18px 14px !important
}

.side-brand {
    border: 1px solid var(--ui-line) !important;
    border-radius: 22px !important;
    padding: 12px !important;
    min-height: 68px !important;
    background: linear-gradient(135deg,color-mix(in srgb,var(--ui-accent) 12%,transparent),var(--ui-soft)) !important;
}

.side-brand-logo,.user-avatar {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15),0 12px 26px rgba(40,85,190,.20);
}

.main-nav {
    padding-top: 12px !important
}

.nav-section {
    padding: 18px 10px 6px !important;
    color: var(--ui-muted) !important;
    letter-spacing: .11em !important;
}

.nav-btn {
    min-height: 44px !important;
    margin: 4px 0 !important;
    border-radius: 15px !important;
    color: var(--ui-muted) !important;
}

.nav-btn:hover {
    background: var(--ui-soft) !important;
    color: var(--ui-text) !important
}

.nav-btn.active {
    color: #fff !important;
    background: linear-gradient(135deg,color-mix(in srgb,var(--ui-accent) 70%,#13243d),color-mix(in srgb,var(--ui-accent-2) 36%,#13243d)) !important;
    border-color: color-mix(in srgb,var(--ui-accent) 45%,white 10%) !important;
    box-shadow: 0 14px 34px color-mix(in srgb,var(--ui-accent) 24%,transparent) !important;
}

.side-footer {
    padding: 12px 14px 16px !important;
    border-top: 1px solid var(--ui-line) !important;
    background: linear-gradient(180deg,transparent,color-mix(in srgb,#020812 38%,transparent)) !important;
}

.side-user,.top-account-security,.dashboard-context,.ks-card,.row-card,.order-card,.trash-card,.premium-order-card,.family-group-card,.family-member-card,.stock-account-card,.stock-service-card,.settings-section,.modal-card {
    border-color: var(--ui-line) !important;
    background: linear-gradient(180deg,var(--ui-surface),color-mix(in srgb,var(--ui-surface-strong) 88%,transparent)) !important;
    box-shadow: var(--ui-shadow-soft) !important;
}

.main-panel {
    min-width: 0 !important
}

.topbar {
    min-height: var(--shell-topbar) !important;
    padding: 12px clamp(16px,2vw,28px) !important;
    background: color-mix(in srgb,var(--ui-bg) 80%,transparent) !important;
    border-bottom: 1px solid var(--ui-line) !important;
    backdrop-filter: blur(24px) saturate(1.2) !important;
}

.top-title strong {
    font-size: clamp(17px,1.55vw,22px) !important;
    color: var(--ui-text) !important
}

.top-title span,.row-sub,.muted,.section-title p,.quick-card small,.metric-card small {
    color: var(--ui-muted) !important
}

.page-host {
    padding: clamp(16px,2.3vw,32px) clamp(16px,2.6vw,38px) 84px !important;
}

.page-host>.ks-page,.ks-page {
    width: min(1480px,100%) !important
}

.page-hero {
    min-height: 116px !important;
    padding: 24px clamp(20px,2.2vw,32px) !important;
    margin-bottom: 18px !important;
    border-radius: var(--ui-radius-xl) !important;
    border: 1px solid var(--ui-line) !important;
    background: radial-gradient(circle at 88% 0,color-mix(in srgb,var(--ui-accent-2) 20%,transparent),transparent 30%), linear-gradient(135deg,color-mix(in srgb,var(--ui-accent) 15%,var(--ui-surface-strong)),var(--ui-surface)) !important;
    box-shadow: var(--ui-shadow) !important;
}

.hero-icon,.metric-card .metric-icon,.quick-icon,.security-ico {
    background: linear-gradient(135deg,color-mix(in srgb,var(--ui-accent) 28%,transparent),color-mix(in srgb,var(--ui-accent-2) 18%,transparent)) !important;
    border: 1px solid var(--ui-line-strong) !important;
    color: var(--ui-text) !important;
}

.page-hero h1 {
    font-size: clamp(28px,2.65vw,42px) !important;
    line-height: 1.04 !important;
    letter-spacing: -.045em !important;
}

.page-hero p {
    max-width: 760px;
    color: var(--ui-muted) !important
}

.hero-actions {
    gap: 9px !important
}

.ks-stack {
    gap: 18px !important
}

.ks-grid {
    gap: 14px !important
}

.grid-5 {
    grid-template-columns: repeat(5,minmax(0,1fr)) !important
}

.grid-4,.dash-metrics {
    grid-template-columns: repeat(4,minmax(0,1fr)) !important
}

.grid-3 {
    grid-template-columns: repeat(3,minmax(0,1fr)) !important
}

.grid-2,.dashboard-bottom-grid {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important
}

.layout-2 {
    grid-template-columns: minmax(340px,.92fr) minmax(0,1.35fr) !important
}

.ks-card {
    border-radius: var(--ui-radius-lg) !important;
    padding: 18px !important
}

.metric-card,.quick-card,.security-tile {
    min-width: 0 !important;
    transition: transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}

.metric-card:hover,.quick-card:hover,.security-tile:hover,.row-card:hover {
    transform: translateY(-2px);
    border-color: var(--ui-line-strong) !important;
    box-shadow: var(--ui-shadow) !important;
}

.section-title {
    align-items: flex-start !important;
    gap: 14px !important
}

.section-title h2,.section-title h3 {
    color: var(--ui-text) !important;
    letter-spacing: -.025em
}

.ks-btn,.icon-btn,.tab-btn,.chip {
    border-radius: 14px !important;
    min-height: 42px;
    border-color: var(--ui-line) !important;
    box-shadow: none !important;
}

.ks-btn:focus-visible,.icon-btn:focus-visible,.nav-btn:focus-visible,.row-card:focus-visible,.mobile-nav button:focus-visible {
    outline: 3px solid color-mix(in srgb,var(--ui-accent) 36%,transparent);
    outline-offset: 2px;
}

.ks-primary,.ks-blue,.ks-purple {
    background: linear-gradient(135deg,var(--ui-accent),#7b5cff) !important;
}

.ks-success {
    background: linear-gradient(135deg,var(--ui-success),#18a77e) !important
}

.ks-danger {
    background: linear-gradient(135deg,#f05d9f,var(--ui-danger)) !important
}

.ks-ghost {
    background: var(--ui-soft) !important
}

.ks-field {
    letter-spacing: .08em !important;
    color: var(--ui-muted) !important
}

.ks-field input,.ks-field select,.ks-field textarea,input:not([type="checkbox"]):not([type="radio"]),select,textarea,.search-box {
    min-height: 46px;
    border-radius: 15px !important;
    border-color: var(--ui-line) !important;
    background: color-mix(in srgb,var(--ui-surface-strong) 82%,transparent) !important;
    color: var(--ui-text) !important;
}

.search-box {
    padding: 8px 10px !important
}

.table-wrap {
    border-radius: 20px !important;
    border-color: var(--ui-line) !important;
    background: var(--ui-surface) !important;
}

.data-table {
    min-width: 820px
}

.data-table th {
    background: color-mix(in srgb,var(--ui-soft) 80%,transparent) !important;
    color: var(--ui-muted) !important;
}

.data-table td {
    color: var(--ui-text) !important
}

.badge {
    min-height: 28px;
    border-color: var(--ui-line) !important;
    background: var(--ui-soft) !important;
    color: var(--ui-text) !important;
}

.scrollbox {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb,var(--ui-accent) 50%,transparent) transparent;
}

.modal {
    padding: 18px !important;
    background: rgba(1,7,17,.68) !important;
    backdrop-filter: blur(10px)
}

.modal-card {
    width: min(880px,96vw) !important;
    max-height: min(88dvh,900px) !important;
    border-radius: 26px !important;
}

.modal-close {
    border-radius: 14px !important;
    background: var(--ui-soft) !important;
    color: var(--ui-text) !important
}

.ks-toast {
    border-color: var(--ui-line) !important;
    background: var(--ui-surface-strong) !important;
    color: var(--ui-text) !important
}

.login-shell {
    border-color: var(--ui-line) !important;
    background: color-mix(in srgb,var(--ui-surface-strong) 84%,transparent) !important;
    box-shadow: var(--ui-shadow) !important;
}

.login-card,.login-showcase {
    background: transparent !important
}

.login-input-shell {
    border-color: var(--ui-line) !important;
    background: var(--ui-soft) !important
}

@media (min-width: 901px) and (max-width:1240px) {
    :root {
        --shell-sidebar:248px;
        --shell-topbar: 68px
    }

    .top-actions .ks-btn {
        font-size: 0;
        padding-inline:12px !important}

    .top-actions .ks-btn span[aria-hidden="true"] {
        display: inline !important;
        font-size: 16px
    }

    .page-host {
        padding-inline:18px !important}

    .grid-5,.grid-4,.dash-metrics {
        grid-template-columns: repeat(3,minmax(0,1fr)) !important
    }

    .dash-quick-grid,.modern-backup-grid,.backup-security-grid {
        grid-template-columns: repeat(3,minmax(0,1fr)) !important
    }

    .layout-2,.dashboard-bottom-grid {
        grid-template-columns: 1fr !important
    }

    .partner-card-pro,.partner-list-pro.compact .partner-card-pro {
        grid-template-columns: 112px 1fr !important
    }

    .partner-kpis,.partner-bars {
        grid-column: 1/-1
    }
}










@media (prefers-reduced-motion:reduce) {
    *,*::before,*::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important
    }
}

/* ========================================================================== 
   Kurd Store v1.4 — Premium Operations UI rebuild
   Orders · Trash · Stock · Family · Reports · Spending · Login
   ========================================================================== */
:root {
    --v14-bg: #07101c;
    --v14-panel: #0d1828;
    --v14-panel-2: #111f32;
    --v14-panel-3: #15263b;
    --v14-border: rgba(170,195,230,.13);
    --v14-border-hover: rgba(170,205,245,.26);
    --v14-text: #f4f8ff;
    --v14-muted: #8fa4bf;
    --v14-primary: #6c7cff;
    --v14-primary-2: #8b5cf6;
    --v14-cyan: #38c9d6;
    --v14-green: #31d39b;
    --v14-amber: #f3b75c;
    --v14-red: #f36b7f;
    --v14-shadow-lg: 0 30px 80px rgba(0,0,0,.34);
    --v14-shadow-md: 0 16px 42px rgba(0,0,0,.22);
    --v14-radius-xl: 28px;
    --v14-radius-lg: 20px;
    --v14-radius-md: 14px;
}

html[data-appearance="light"] {
    --v14-bg: #f4f7fb;
    --v14-panel: #fff;
    --v14-panel-2: #f8fafe;
    --v14-panel-3: #eef3f9;
    --v14-border: rgba(29,57,91,.11);
    --v14-border-hover: rgba(49,83,124,.22);
    --v14-text: #16263a;
    --v14-muted: #657a93;
    --v14-shadow-lg: 0 28px 72px rgba(34,61,91,.12);
    --v14-shadow-md: 0 12px 34px rgba(34,61,91,.09);
}

.ui-icon {
    display: block;
    width: 1.25em;
    height: 1.25em;
    flex: 0 0 auto
}

.top-title-line {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0
}

.v14-build-badge {
    display: inline-flex;
    align-items: center;
    min-height: 21px;
    padding: 3px 7px;
    border: 1px solid rgba(124,139,255,.28);
    border-radius: 7px;
    background: rgba(108,124,255,.1);
    color: #9da9ff;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .09em;
    white-space: nowrap
}

.nav-ico .ui-icon {
    width: 20px;
    height: 20px
}

.m-ico .ui-icon {
    width: 21px;
    height: 21px
}

.hero-icon .ui-icon {
    width: 29px;
    height: 29px
}

.search-ico .ui-icon {
    width: 18px;
    height: 18px
}

/* Navigation */
.nav-btn {
    position: relative;
    display: grid !important;
    grid-template-columns: 38px minmax(0,1fr) 4px;
    align-items: center;
    padding: 5px 10px 5px 7px !important;
    overflow: hidden
}

html[dir="rtl"] .nav-btn {
    padding: 5px 7px 5px 10px !important
}

.nav-btn .nav-ico {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    color: var(--v14-muted);
    transition: color .18s ease,background .18s ease,transform .18s ease
}

.nav-btn .nav-label {
    font-size: 13px;
    font-weight: 650;
    letter-spacing: -.01em;
    text-align: start
}

.nav-btn .nav-active-mark {
    width: 3px;
    height: 18px;
    border-radius: 10px;
    background: transparent;
    justify-self: end;
    transition: background .18s ease,box-shadow .18s ease
}

.nav-btn:hover .nav-ico {
    color: var(--v14-text);
    background: rgba(255,255,255,.05);
    transform: scale(1.03)
}

.nav-btn.active {
    background: rgba(112,125,255,.1) !important;
    border-color: rgba(120,135,255,.18) !important;
    box-shadow: none !important
}

.nav-btn.active .nav-ico {
    color: #fff;
    background: linear-gradient(145deg,var(--v14-primary),var(--v14-primary-2));
    box-shadow: 0 8px 20px rgba(99,102,241,.28)
}

.nav-btn.active .nav-active-mark {
    background: var(--v14-primary);
    box-shadow: 0 0 14px rgba(108,124,255,.7)
}

/* Module identity and common page composition */
.module-page {
    --module-accent: var(--v14-primary);
    --module-accent-2: var(--v14-primary-2);
    isolation: isolate
}

.module-orders {
    --module-accent: #6c7cff;
    --module-accent-2: #8b5cf6
}

.module-ordersTrash {
    --module-accent: #f06d7f;
    --module-accent-2: #c94f75
}

.module-stock {
    --module-accent: #2ac6c9;
    --module-accent-2: #4c8ffb
}

.module-stockTrash {
    --module-accent: #ef9b55;
    --module-accent-2: #e35e67
}

.module-family {
    --module-accent: #a06cf4;
    --module-accent-2: #e46eb3
}

.module-reports {
    --module-accent: #4c8ffb;
    --module-accent-2: #35c6c7
}

.module-adminSpending {
    --module-accent: #32c891;
    --module-accent-2: #43a5e8
}

.module-deletedSpending {
    --module-accent: #ef6f80;
    --module-accent-2: #e69251
}

.module-page>.page-hero {
    position: relative;
    min-height: 132px !important;
    overflow: hidden;
    border: 1px solid var(--v14-border) !important;
    border-radius: var(--v14-radius-xl) !important;
    background: linear-gradient(105deg,color-mix(in srgb,var(--module-accent) 15%,var(--v14-panel)),color-mix(in srgb,var(--module-accent-2) 7%,var(--v14-panel)) 58%,var(--v14-panel)) !important;
    box-shadow: var(--v14-shadow-md) !important;
}

.module-page>.page-hero::before {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    inset-inline-end: -80px;
    top: -150px;
    border-radius: 50%;
    background: color-mix(in srgb,var(--module-accent) 18%,transparent);
    filter: blur(4px);
    pointer-events: none
}

.module-page>.page-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,transparent 60%,rgba(255,255,255,.025));
    pointer-events: none
}

.module-page .hero-left,.module-page .hero-actions {
    position: relative;
    z-index: 1
}

.module-page .hero-left {
    gap: 16px !important
}

.module-page .hero-icon {
    width: 58px !important;
    height: 58px !important;
    border-radius: 18px !important;
    color: #fff !important;
    background: linear-gradient(145deg,var(--module-accent),var(--module-accent-2)) !important;
    border: 1px solid rgba(255,255,255,.2) !important;
    box-shadow: 0 14px 32px color-mix(in srgb,var(--module-accent) 30%,transparent),inset 0 1px rgba(255,255,255,.23) !important
}

.module-page .page-kicker {
    margin-bottom: 6px;
    color: color-mix(in srgb,var(--module-accent) 70%,#fff) !important;
    font-size: 10px !important;
    font-weight: 800;
    letter-spacing: .14em !important;
    text-transform: uppercase
}

.module-page .page-hero h1 {
    font-size: clamp(28px,2.7vw,40px) !important;
    font-weight: 790 !important;
    letter-spacing: -.045em !important
}

.module-page .page-hero p {
    margin-top: 7px !important;
    font-size: 13px;
    max-width: 590px;
    color: var(--v14-muted) !important
}

.module-page .hero-actions {
    align-items: center;
    padding: 6px;
    border: 1px solid var(--v14-border);
    border-radius: 17px;
    background: rgba(4,10,20,.18);
    backdrop-filter: blur(10px)
}

html[data-appearance="light"] .module-page .hero-actions {
    background: rgba(255,255,255,.48)
}

.module-page .hero-actions:empty {
    display: none
}

.module-page .ks-card,.module-page .order-card,.module-page .stock-account-card,.module-page .family-group-card,.module-page .family-member-card,.module-page .trash-card {
    border: 1px solid var(--v14-border) !important;
    background: linear-gradient(180deg,var(--v14-panel),color-mix(in srgb,var(--v14-panel-2) 92%,transparent)) !important;
    box-shadow: var(--v14-shadow-md) !important;
}

.module-page .ks-card {
    border-radius: var(--v14-radius-lg) !important
}

.module-page .ks-card:hover,.module-page .order-card:hover,.module-page .stock-account-card:hover,.module-page .family-group-card:hover {
    border-color: var(--v14-border-hover) !important
}

/* Buttons and controls */
.module-page .ks-btn,.login-view .ks-btn {
    position: relative;
    min-height: 43px;
    border-radius: 12px !important;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .01em;
    transition: transform .16s ease,filter .16s ease,border-color .16s ease,background .16s ease !important
}

.module-page .ks-btn:hover:not(:disabled),.login-view .ks-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    filter: brightness(1.06)
}

.module-page .ks-primary,.module-page .ks-blue,.module-page .ks-purple {
    color: #fff !important;
    background: linear-gradient(135deg,var(--module-accent),var(--module-accent-2)) !important;
    border-color: color-mix(in srgb,var(--module-accent) 65%,#fff 10%) !important;
    box-shadow: 0 9px 22px color-mix(in srgb,var(--module-accent) 22%,transparent) !important
}

.module-page .ks-ghost {
    background: color-mix(in srgb,var(--v14-panel-3) 74%,transparent) !important;
    color: var(--v14-text) !important
}

.module-page .ks-danger {
    background: linear-gradient(135deg,#e65470,#f17a72) !important
}

.module-page .ks-success {
    background: linear-gradient(135deg,#1fbf88,#36b9b3) !important
}

.module-page .ks-field {
    gap: 7px !important;
    color: var(--v14-muted) !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: .095em !important;
    text-transform: uppercase
}

.module-page .ks-field input,.module-page .ks-field select,.module-page .ks-field textarea {
    min-height: 47px !important;
    padding-inline:13px !important;border: 1px solid var(--v14-border) !important;
    border-radius: 12px !important;
    background: var(--v14-panel-2) !important;
    color: var(--v14-text) !important;
    font-size: 13px !important;
    font-weight: 540 !important;
    letter-spacing: 0 !important;
    text-transform: none;
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
    transition: border-color .16s ease,box-shadow .16s ease,background .16s ease
}

.module-page .ks-field input:focus,.module-page .ks-field select:focus,.module-page .ks-field textarea:focus {
    border-color: color-mix(in srgb,var(--module-accent) 65%,transparent) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb,var(--module-accent) 12%,transparent) !important;
    background: var(--v14-panel) !important
}

.module-page .ks-field textarea {
    min-height: 92px !important;
    padding-block:12px !important;resize: vertical
}

.module-page .chip,.module-page .tab-btn {
    min-height: 36px !important;
    padding: 8px 13px !important;
    border: 1px solid var(--v14-border) !important;
    border-radius: 10px !important;
    background: var(--v14-panel-2) !important;
    color: var(--v14-muted) !important;
    font-size: 11px;
    font-weight: 700
}

.module-page .chip.active,.module-page .tab-btn.active {
    color: #fff !important;
    border-color: color-mix(in srgb,var(--module-accent) 50%,transparent) !important;
    background: linear-gradient(135deg,color-mix(in srgb,var(--module-accent) 75%,#18263a),color-mix(in srgb,var(--module-accent-2) 55%,#18263a)) !important;
    box-shadow: 0 7px 18px color-mix(in srgb,var(--module-accent) 18%,transparent)
}

.module-page .mini-label {
    color: color-mix(in srgb,var(--module-accent) 72%,var(--v14-muted)) !important;
    font-size: 9px !important;
    font-weight: 830 !important;
    letter-spacing: .11em !important
}

/* Filter / control panels */
.orders-premium-panel,.stock-premium-panel,.family-simple-top,.family-simple-services,.finance-filter-card,.premium-toolbar {
    position: relative;
    overflow: hidden;
    padding: 20px !important
}

.orders-premium-panel::before,.stock-premium-panel::before,.family-simple-top::before,.finance-filter-card::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 20px;
    bottom: 20px;
    width: 3px;
    border-radius: 10px;
    background: linear-gradient(var(--module-accent),var(--module-accent-2))
}

.orders-toolbar-head,.stock-toolbar-head,.family-toolbar-head,.family-section-title,.section-title {
    margin-bottom: 16px !important
}

.orders-toolbar-head h2,.stock-toolbar-head h2,.family-toolbar-head h2,.family-section-title h2,.finance-filter-card .section-title h2 {
    font-size: 19px !important;
    letter-spacing: -.025em !important
}

.orders-toolbar-head p,.stock-toolbar-head p,.family-toolbar-head p,.finance-filter-card .section-title p {
    font-size: 12px;
    line-height: 1.55;
    color: var(--v14-muted) !important
}

.orders-filter-grid {
    display: grid !important;
    grid-template-columns: minmax(240px,1.7fr) repeat(4,minmax(130px,1fr)) !important;
    gap: 11px !important
}

.orders-filter-grid .order-search-field {
    grid-column: span 2
}

.orders-filter-grid label:nth-last-child(-n+4) {
    grid-column: span 1
}

.stock-filter-grid {
    display: grid !important;
    grid-template-columns: minmax(260px,1.6fr) repeat(4,minmax(130px,1fr)) !important;
    gap: 11px !important
}

.family-light-filters {
    display: grid !important;
    grid-template-columns: repeat(4,minmax(130px,1fr)) auto !important;
    align-items: end;
    gap: 11px !important
}

.report-filter-grid {
    grid-template-columns: repeat(6,minmax(130px,1fr)) !important;
    gap: 11px !important
}

.admin-spending-filter-grid {
    display: grid !important;
    grid-template-columns: minmax(240px,1.7fr) repeat(6,minmax(125px,1fr)) !important;
    gap: 11px !important
}

.finance-period-row,.orders-type-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 6px;
    margin: 0 0 14px;
    border: 1px solid var(--v14-border);
    border-radius: 14px;
    background: color-mix(in srgb,var(--v14-panel-2) 74%,transparent)
}

/* Metric system */
.module-page .metric-card {
    position: relative;
    min-height: 142px;
    padding: 17px !important;
    overflow: hidden;
    border-radius: 18px !important;
    display: grid;
    grid-template-columns: 44px minmax(0,1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 12px;
    align-content: start
}

.module-page .metric-card::after {
    content: "";
    position: absolute;
    width: 90px;
    height: 90px;
    inset-inline-end: -30px;
    bottom: -44px;
    border-radius: 50%;
    background: color-mix(in srgb,var(--module-accent) 9%,transparent);
    pointer-events: none
}

.module-page .metric-card .metric-icon {
    grid-row: 1/span 2;
    width: 44px !important;
    height: 44px !important;
    border-radius: 13px !important;
    background: color-mix(in srgb,var(--module-accent) 12%,var(--v14-panel-3)) !important;
    border: 1px solid color-mix(in srgb,var(--module-accent) 22%,var(--v14-border)) !important;
    color: var(--module-accent) !important;
    font-size: 19px !important;
    box-shadow: none !important
}

.module-page .metric-card .mini-label {
    align-self: end
}

.module-page .metric-card strong {
    align-self: start;
    margin-top: 3px;
    font-size: clamp(19px,1.55vw,26px) !important;
    letter-spacing: -.035em;
    color: var(--v14-text) !important;
    overflow-wrap: anywhere
}

.module-page .metric-card small {
    grid-column: 1/-1;
    align-self: end;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--v14-border);
    font-size: 10px;
    color: var(--v14-muted) !important
}

.module-page button.metric-card {
    cursor: pointer;
    text-align: start
}

.module-page button.metric-card.active {
    border-color: color-mix(in srgb,var(--module-accent) 52%,transparent) !important;
    box-shadow: 0 16px 40px color-mix(in srgb,var(--module-accent) 13%,transparent) !important
}

/* Tables and data rows */
.module-page .table-wrap {
    overflow: auto;
    border: 1px solid var(--v14-border) !important;
    border-radius: 16px !important;
    background: var(--v14-panel-2) !important;
    box-shadow: none !important
}

.module-page .data-table {
    border-collapse: separate;
    border-spacing: 0;
    min-width: 850px;
    background: transparent !important
}

.module-page .data-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    height: 45px;
    padding: 11px 13px !important;
    background: color-mix(in srgb,var(--v14-panel-3) 94%,transparent) !important;
    border-bottom: 1px solid var(--v14-border) !important;
    color: var(--v14-muted) !important;
    font-size: 9px !important;
    font-weight: 830 !important;
    letter-spacing: .09em;
    text-transform: uppercase
}

.module-page .data-table td {
    height: 54px;
    padding: 11px 13px !important;
    border-bottom: 1px solid color-mix(in srgb,var(--v14-border) 70%,transparent) !important;
    color: var(--v14-text) !important;
    font-size: 12px;
    vertical-align: middle
}

.module-page .data-table tbody tr {
    transition: background .15s ease
}

.module-page .data-table tbody tr:hover {
    background: color-mix(in srgb,var(--module-accent) 5%,transparent)
}

.module-page .data-table tbody tr:last-child td {
    border-bottom: 0 !important
}

.module-page .badge {
    min-height: 27px;
    padding: 5px 9px;
    border-radius: 8px !important;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .035em
}

.module-page .empty {
    min-height: 140px;
    display: grid;
    place-items: center;
    border: 1px dashed var(--v14-border);
    border-radius: 16px;
    background: color-mix(in srgb,var(--v14-panel-2) 60%,transparent);
    color: var(--v14-muted)
}

/* Orders */
.orders-premium-list {
    display: grid;
    gap: 12px
}

.module-orders .premium-order-card,.module-orders .order-card {
    position: relative;
    border-radius: 20px !important;
    overflow: hidden
}

.module-orders .premium-order-card::before,.module-orders .order-card::before {
    content: "";
    position: absolute;
    inset-block: 14px;
    inset-inline-start: 0;
    width: 3px;
    border-radius: 5px;
    background: var(--module-accent)
}

.module-orders .order-meta-premium,.module-orders .meta-grid {
    gap: 8px !important
}

.module-orders .meta-item {
    padding: 11px 12px !important;
    border: 1px solid var(--v14-border) !important;
    border-radius: 12px !important;
    background: var(--v14-panel-2) !important
}

.module-orders .order-actions-row {
    padding-top: 12px;
    border-top: 1px solid var(--v14-border)
}

/* Trash modules */
.module-ordersTrash .trash-card,.module-stockTrash .stock-account-card {
    border-color: rgba(240,105,125,.2) !important
}

.module-ordersTrash .trash-card-select,.module-stockTrash .stock-trash-bulk-bar {
    border-color: var(--v14-border) !important;
    background: color-mix(in srgb,var(--v14-red) 7%,var(--v14-panel-2)) !important
}

.module-ordersTrash .trash-card-select label {
    display: flex;
    gap: 8px;
    align-items: center;
    color: var(--v14-muted);
    font-size: 11px;
    font-weight: 700
}

.module-ordersTrash input[type="checkbox"],.module-stockTrash input[type="checkbox"],.module-deletedSpending input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: var(--module-accent)
}

/* Stock */
.stock-service-scroll,.family-service-scroll {
    gap: 10px !important;
    padding-bottom: 6px
}

.stock-service-card,.family-service-card {
    min-width: 190px !important;
    padding: 13px !important;
    border: 1px solid var(--v14-border) !important;
    border-radius: 15px !important;
    background: var(--v14-panel-2) !important;
    color: var(--v14-text) !important;
    box-shadow: none !important;
    transition: transform .16s ease,border-color .16s ease,background .16s ease
}

.stock-service-card:hover,.stock-service-card.active,.family-service-card:hover,.family-service-card.active {
    transform: translateY(-2px);
    border-color: color-mix(in srgb,var(--module-accent) 46%,transparent) !important;
    background: color-mix(in srgb,var(--module-accent) 8%,var(--v14-panel-2)) !important
}

.stock-service-card small,.family-service-card small {
    color: var(--v14-muted) !important
}

.stock-premium-list,.family-premium-list {
    display: grid;
    gap: 12px
}

.stock-account-card {
    border-radius: 19px !important;
    padding: 17px !important
}

.stock-pager {
    position: sticky;
    bottom: 10px;
    z-index: 8;
    padding: 9px 12px !important;
    background: color-mix(in srgb,var(--v14-panel) 90%,transparent) !important;
    backdrop-filter: blur(16px)
}

/* Family */
.module-family #pageBody {
    gap: 14px !important
}

.family-inline-panel {
    padding: 9px !important
}

.family-inline-tabs {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px !important
}

.family-inline-tab {
    min-height: 74px !important;
    padding: 13px 16px !important;
    border: 1px solid var(--v14-border) !important;
    border-radius: 14px !important;
    background: var(--v14-panel-2) !important;
    text-align: start;
    color: var(--v14-text) !important
}

.family-inline-tab b {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    color: var(--v14-text)
}

.family-inline-tab span {
    font-size: 10px;
    color: var(--v14-muted)
}

.family-inline-tab:hover,.family-inline-tab.active {
    border-color: color-mix(in srgb,var(--module-accent) 45%,transparent) !important;
    background: color-mix(in srgb,var(--module-accent) 8%,var(--v14-panel-2)) !important
}

.family-group-card,.family-member-card {
    position: relative;
    border-radius: 19px !important;
    padding: 17px !important;
    overflow: hidden
}

.family-group-card::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 17px;
    bottom: 17px;
    width: 3px;
    border-radius: 5px;
    background: linear-gradient(var(--module-accent),var(--module-accent-2))
}

.family-meta-grid,.family-member-meta {
    gap: 8px !important
}

/* Reports and spending */
.module-reports .finance-panel,.module-adminSpending #spendingHost,.module-deletedSpending #spendingHost {
    overflow: hidden
}

.module-reports .formula-line {
    padding: 14px !important;
    border: 1px solid var(--v14-border) !important;
    border-radius: 13px !important;
    background: var(--v14-panel-2) !important
}

.module-reports .finance-tabs {
    padding: 6px;
    border: 1px solid var(--v14-border);
    border-radius: 14px;
    background: var(--v14-panel-2)
}

.module-adminSpending .spending-reimbursement-filter {
    margin-top: 0
}

.module-adminSpending #spendingHost,.module-deletedSpending #spendingHost {
    padding: 18px !important
}

.module-adminSpending .form-grid.two {
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    gap: 11px !important
}

.module-adminSpending .split-actions {
    justify-content: flex-end
}

.module-deletedSpending .premium-toolbar {
    margin-bottom: 14px;
    border: 1px solid var(--v14-border);
    border-radius: 18px;
    background: var(--v14-panel)
}

.module-deletedSpending .search-box {
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto auto;
    gap: 8px;
    padding: 7px;
    border: 1px solid var(--v14-border);
    border-radius: 14px;
    background: var(--v14-panel-2)
}

.module-deletedSpending .search-box input {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important
}

/* Login — completely refreshed layout */
.login-view {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: clamp(16px,3vw,42px) !important;
    overflow: auto;
    background: #050b14 !important;
    color: #f5f8ff
}

.login-ambient {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: radial-gradient(circle at 15% 20%,rgba(101,88,238,.19),transparent 34%),radial-gradient(circle at 88% 82%,rgba(41,187,197,.12),transparent 30%),linear-gradient(135deg,#060d18,#091321 55%,#06101d)
}

.login-grid-pattern {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(to bottom,rgba(0,0,0,.8),transparent 92%)
}

.login-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
    opacity: .65
}

.login-orb-one {
    width: 380px;
    height: 380px;
    left: -140px;
    top: -150px;
    background: rgba(109,91,242,.2)
}

.login-orb-two {
    width: 300px;
    height: 300px;
    right: -80px;
    bottom: -130px;
    background: rgba(40,199,198,.13)
}

.login-light-beam {
    position: absolute;
    width: 1px;
    height: 90%;
    left: 48%;
    top: 5%;
    background: linear-gradient(transparent,rgba(139,155,255,.22),transparent);
    transform: rotate(18deg);
    box-shadow: 0 0 90px 24px rgba(100,110,255,.04)
}

.login-shell {
    position: relative;
    z-index: 2;
    width: min(1120px,100%);
    min-height: min(720px,calc(100dvh - 64px));
    display: grid !important;
    grid-template-columns: minmax(0,1.18fr) minmax(390px,.82fr);
    overflow: hidden;
    border: 1px solid rgba(170,195,230,.14) !important;
    border-radius: 30px !important;
    background: rgba(10,20,34,.9) !important;
    box-shadow: 0 40px 110px rgba(0,0,0,.48) !important;
    backdrop-filter: blur(24px)
}

.login-showcase {
    position: relative;
    display: flex !important;
    flex-direction: column;
    padding: 38px 42px !important;
    overflow: hidden;
    border-inline-end:1px solid rgba(170,195,230,.11);background: linear-gradient(145deg,rgba(102,95,236,.13),transparent 45%),rgba(255,255,255,.012) !important
}

.login-showcase::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    right: -200px;
    bottom: -210px;
    border: 1px solid rgba(132,144,255,.12);
    border-radius: 50%;
    box-shadow: 0 0 0 55px rgba(132,144,255,.025),0 0 0 110px rgba(132,144,255,.018);
    pointer-events: none
}

.login-showcase-brand,.login-mobile-brand {
    display: flex;
    align-items: center;
    gap: 12px
}

.login-showcase-brand img,.login-mobile-brand img {
    width: 43px;
    height: 43px;
    border-radius: 13px;
    object-fit: cover;
    box-shadow: 0 10px 25px rgba(0,0,0,.28)
}

.login-showcase-brand strong,.login-mobile-brand strong {
    display: block;
    font-size: 15px;
    letter-spacing: -.02em
}

.login-showcase-brand span,.login-mobile-brand span {
    display: block;
    margin-top: 2px;
    color: #8295af;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .17em
}

.login-showcase-copy {
    margin: auto 0 28px;
    max-width: 570px
}

.login-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #9aa9ff !important;
    font-size: 9px !important;
    font-weight: 850 !important;
    letter-spacing: .15em !important
}

.login-eyebrow i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #6f7dff;
    box-shadow: 0 0 12px #6f7dff
}

.login-showcase-copy h2 {
    margin: 17px 0 18px;
    font-size: clamp(42px,5vw,64px);
    line-height: .98;
    letter-spacing: -.055em;
    font-weight: 760
}

.login-showcase-copy h2 em {
    font-style: normal;
    color: #94a2ff
}

.login-showcase-copy p {
    max-width: 520px;
    color: #91a4bf;
    font-size: 14px;
    line-height: 1.75
}

.login-feature-rail {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 9px;
    margin-bottom: 20px
}

.login-feature-rail>div {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    padding: 13px;
    border: 1px solid rgba(170,195,230,.11);
    border-radius: 14px;
    background: rgba(255,255,255,.025)
}

.login-feature-rail>div>span {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    border-radius: 9px;
    background: rgba(112,125,255,.12);
    color: #97a4ff;
    font-size: 9px;
    font-weight: 800
}

.login-feature-rail p {
    min-width: 0;
    margin: 0
}

.login-feature-rail b,.login-feature-rail small {
    display: block
}

.login-feature-rail b {
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.login-feature-rail small {
    margin-top: 4px;
    color: #70839d;
    font-size: 8px;
    line-height: 1.35
}

.login-showcase-security {
    display: flex;
    align-items: center;
    gap: 11px;
    padding-top: 17px;
    border-top: 1px solid rgba(170,195,230,.1)
}

.login-security-icon {
    display: grid;
    place-items: center;
    width: 35px;
    height: 35px;
    border-radius: 11px;
    background: rgba(41,199,161,.1);
    color: #3bd4a5
}

.login-security-icon svg {
    width: 18px;
    height: 18px
}

.login-showcase-security b {
    display: block;
    font-size: 10px
}

.login-showcase-security small {
    display: block;
    margin-top: 4px;
    color: #71859f;
    font-size: 8px
}

.login-card {
    position: relative;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    padding: clamp(34px,5vw,66px) !important;
    background: rgba(6,13,24,.42) !important
}

.login-brand {
    position: static !important;
    margin: 0 0 35px !important
}

.login-mobile-brand {
    display: none
}

.login-language-toggle {
    position: absolute !important;
    top: 28px;
    inset-inline-end: 30px;
    min-height: 35px !important;
    padding: 7px 12px !important;
    border: 1px solid rgba(170,195,230,.13) !important;
    background: rgba(255,255,255,.035) !important;
    color: #bbc7d8 !important
}

.login-title-block h1 {
    margin: 13px 0 8px;
    font-size: 37px;
    line-height: 1;
    letter-spacing: -.05em
}

.login-title-block p {
    margin: 0;
    color: #8295af;
    font-size: 12px
}

.login-form {
    display: grid;
    gap: 18px
}

.login-field {
    gap: 8px !important;
    color: #8ea0b8 !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: .11em !important;
    text-transform: uppercase
}

.login-input-shell {
    display: grid !important;
    grid-template-columns: 42px minmax(0,1fr) auto;
    align-items: center;
    min-height: 56px !important;
    padding: 5px 6px 5px 5px !important;
    border: 1px solid rgba(170,195,230,.14) !important;
    border-radius: 15px !important;
    background: rgba(255,255,255,.035) !important;
    transition: border-color .18s ease,box-shadow .18s ease,background .18s ease
}

.login-input-shell:focus-within {
    border-color: rgba(124,137,255,.68) !important;
    background: rgba(255,255,255,.052) !important;
    box-shadow: 0 0 0 4px rgba(108,124,255,.1)
}

.login-input-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: rgba(112,125,255,.09);
    color: #95a3ff
}

.login-input-icon svg {
    width: 18px;
    height: 18px
}

.login-input-shell input {
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 10px !important;
    border: 0 !important;
    background: transparent !important;
    color: #f4f7ff !important;
    font-size: 13px !important;
    box-shadow: none !important;
    outline: 0
}

.login-input-shell input::placeholder {
    color: #52657f
}

#togglePassword {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #7488a3;
    cursor: pointer
}

#togglePassword:hover {
    background: rgba(255,255,255,.05);
    color: #d8e0ed
}

#togglePassword svg {
    width: 19px;
    height: 19px
}

.login-session-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: -3px;
    color: #7287a1
}

.login-session-note>span {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    color: #37cfa0
}

.login-session-note svg {
    width: 15px;
    height: 15px
}

.login-session-note small {
    font-size: 9px
}

.login-submit {
    min-height: 54px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 3px;
    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg,#6676f4,#8159dc) !important;
    color: #fff !important;
    box-shadow: 0 16px 34px rgba(92,82,215,.28) !important
}

.login-submit b {
    display: grid;
    place-items: center
}

.login-submit b svg {
    width: 18px;
    height: 18px
}

.login-submit.is-loading {
    cursor: wait;
    filter: saturate(.75)
}

.login-button-spinner {
    width: 17px;
    height: 17px;
    border: 2px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: v14Spin .7s linear infinite
}

@keyframes v14Spin {
    to {
        transform: rotate(360deg)
    }
}

.login-lock-countdown,.login-msg {
    min-height: 34px;
    padding: 9px 11px;
    border: 1px solid rgba(170,195,230,.09);
    border-radius: 10px;
    background: rgba(255,255,255,.02);
    color: #7f93ae;
    font-size: 9px;
    text-align: center
}

.login-lock-countdown {
    border-color: rgba(243,107,127,.22);
    color: #f59aad;
    background: rgba(243,107,127,.06)
}

.login-footer {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid rgba(170,195,230,.09);
    color: #61758f;
    font-size: 8px
}

.login-footer span {
    display: flex;
    align-items: center;
    gap: 7px
}

.login-footer i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #32d39a;
    box-shadow: 0 0 9px #32d39a
}

@media (max-width: 1240px) {
    .orders-filter-grid {
        grid-template-columns:repeat(4,minmax(130px,1fr)) !important
    }

    .orders-filter-grid .order-search-field {
        grid-column: span 2
    }

    .stock-filter-grid {
        grid-template-columns: repeat(3,minmax(140px,1fr)) !important
    }

    .stock-search-field {
        grid-column: span 2
    }

    .report-filter-grid {
        grid-template-columns: repeat(3,minmax(150px,1fr)) !important
    }

    .admin-spending-filter-grid {
        grid-template-columns: repeat(4,minmax(130px,1fr)) !important
    }

    .spending-search-field {
        grid-column: span 2
    }

    .login-shell {
        grid-template-columns: minmax(0,1fr) minmax(370px,.78fr)
    }

    .login-showcase {
        padding: 32px !important
    }

    .login-showcase-copy h2 {
        font-size: 46px
    }

    .login-feature-rail {
        grid-template-columns: 1fr
    }

    .login-feature-rail>div:nth-child(3) {
        display: none
    }
}







/* v1.4.1 screenshot fixes — iPad density, trash controls and minimal login */
.module-page>.page-hero {
    min-height: 98px !important;
    padding: 17px 20px !important
}

.module-page .hero-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 15px !important
}

.module-page .hero-icon .ui-icon {
    width: 24px;
    height: 24px
}

.module-page .page-hero h1 {
    font-size: clamp(25px,2.25vw,34px) !important
}

.module-page .page-kicker {
    margin-bottom: 4px !important;
    font-size: 8px !important
}

.module-orders .orders-filter-grid {
    display: grid !important;
    grid-template-columns: repeat(5,minmax(0,1fr)) !important;
    gap: 10px !important;
}

.module-orders .order-filter-search {
    grid-column: span 2 !important
}

.module-orders .orders-type-quick {
    margin-top: 11px;
    margin-bottom: 0;
    padding: 5px
}

.module-orders .orders-summary-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit,minmax(178px,1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
}

.module-page .orders-summary-grid .metric-card, .module-page .orders-trash-metrics .metric-card, .module-page .stock-click-metrics .metric-card {
    min-height: 108px !important;
    padding: 13px !important;
    grid-template-columns: 38px minmax(0,1fr) !important;
    column-gap: 10px !important;
}

.module-page .orders-summary-grid .metric-icon, .module-page .orders-trash-metrics .metric-icon, .module-page .stock-click-metrics .metric-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 11px !important
}

.module-page .metric-icon .ui-icon {
    width: 19px;
    height: 19px
}

.module-page .orders-summary-grid .metric-card strong, .module-page .orders-trash-metrics .metric-card strong, .module-page .stock-click-metrics .metric-card strong {
    font-size: 19px !important
}

.module-page .orders-summary-grid .metric-card small, .module-page .orders-trash-metrics .metric-card small, .module-page .stock-click-metrics .metric-card small {
    margin-top: 7px;
    padding-top: 7px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.module-ordersTrash .orders-trash-toolbar {
    padding: 6px !important;
    border: 1px solid var(--v14-border);
    border-radius: 16px !important;
    background: var(--v14-panel) !important
}

.module-ordersTrash .orders-trash-toolbar .search-box {
    display: grid;
    grid-template-columns: 34px minmax(0,1fr) auto auto;
    align-items: center;
    gap: 7px;
    width: 100%;
    min-height: 52px;
    padding: 4px 5px;
    border: 0 !important;
    background: transparent !important
}

.module-ordersTrash .orders-trash-toolbar input {
    min-height: 42px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important
}

.module-ordersTrash .orders-trash-toolbar .search-ico {
    display: grid;
    place-items: center;
    color: var(--v14-muted)
}

.module-ordersTrash .orders-trash-metrics, .module-stockTrash .stock-trash-metrics {
    display: grid !important;
    grid-template-columns: repeat(auto-fit,minmax(180px,1fr)) !important;
    gap: 10px !important
}

.module-ordersTrash .orders-trash-services {
    padding: 14px !important
}

.module-ordersTrash .trash-filter-context {
    padding: 12px 14px !important
}

.module-ordersTrash .trash-filter-context h3 {
    font-size: 17px !important
}

.module-ordersTrash .orders-trash-card-grid {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 11px !important
}

.module-ordersTrash .trash-order-card {
    padding: 16px !important;
    padding-top: 54px !important;
    border-radius: 17px !important
}

.module-ordersTrash .trash-card-select {
    inset-inline-start: 14px !important;
    left: auto !important;
    top: 12px !important;
    margin: 0 !important;
    width: auto !important
}

.module-ordersTrash .trash-card-select label, .module-stockTrash .stock-trash-select label {
    min-height: 32px;
    padding: 5px 9px !important;
    border: 1px solid var(--v14-border) !important;
    border-radius: 10px !important;
    background: var(--v14-panel-2) !important
}

.module-ordersTrash input[type="checkbox"], .module-stockTrash input[type="checkbox"], .module-deletedSpending input[type="checkbox"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    position: relative;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid color-mix(in srgb,var(--module-accent) 42%,var(--v14-border)) !important;
    border-radius: 5px !important;
    background: var(--v14-panel) !important;
    box-shadow: none !important;
    cursor: pointer
}

.module-ordersTrash input[type="checkbox"]:checked, .module-stockTrash input[type="checkbox"]:checked, .module-deletedSpending input[type="checkbox"]:checked {
    border-color: var(--module-accent) !important;
    background-color: var(--module-accent) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='m3.2 8.2 2.8 2.8 6.8-7'/%3E%3C/svg%3E") !important;
    background-size: 14px 14px !important;
    background-position: center !important;
    background-repeat: no-repeat !important
}

.module-ordersTrash .trash-order-card .meta-grid {
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap: 7px !important
}

.module-ordersTrash .trash-order-card .meta-item {
    padding: 9px !important
}

.module-ordersTrash .trash-order-card>.split-actions {
    gap: 7px !important;
    padding-top: 10px;
    border-top: 1px solid var(--v14-border)
}

.module-stockTrash .stock-click-metrics {
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    gap: 10px !important
}

.module-stockTrash .stock-trash-bulk {
    padding: 13px 15px !important;
    margin-bottom: 12px;
    border-radius: 17px !important
}

.module-stockTrash .stock-trash-bulk h3 {
    font-size: 16px
}

.module-stockTrash .stock-trash-bulk p {
    max-width: 520px;
    font-size: 11px;
    line-height: 1.45;
    color: var(--v14-muted)
}

.module-stockTrash .stock-trash-bulk-actions {
    gap: 7px
}

.module-stockTrash .stock-trash-card {
    padding: 15px !important;
    padding-top: 56px !important;
    gap: 10px
}

.module-stockTrash .stock-trash-select {
    inset-block-start: 12px;
    inset-inline-end: 12px
}

.module-stockTrash .stock-meta-grid {
    gap: 7px
}

.module-stockTrash .stock-meta-grid .meta-item {
    padding: 8px 9px !important;
    border-radius: 10px !important;
    font-size: 11px
}

.module-stockTrash .stock-account-card h3 {
    font-size: 14px !important
}

.module-stockTrash .stock-actions-row {
    padding-top: 8px
}

/* Minimal modern login: no marketing copy, only the required sign-in controls. */
.login-view {
    padding: 22px !important
}

.login-shell.login-shell-minimal {
    width: min(440px,100%) !important;
    min-height: 0 !important;
    display: block !important;
    border: 1px solid rgba(170,195,230,.15) !important;
    border-radius: 24px !important;
    background: rgba(9,18,31,.9) !important;
    box-shadow: 0 30px 90px rgba(0,0,0,.5) !important;
    backdrop-filter: blur(24px)
}

.login-shell-minimal .login-card {
    min-height: 0 !important;
    padding: 34px !important;
    background: transparent !important
}

.login-shell-minimal .login-brand {
    margin: 0 0 28px !important
}

.login-shell-minimal .login-main-brand {
    display: flex !important;
    margin: 0 0 32px !important
}

.login-shell-minimal .login-main-brand img {
    width: 44px;
    height: 44px;
    border-radius: 13px
}

.login-shell-minimal .login-main-brand strong {
    font-size: 15px
}

.login-shell-minimal .login-language-toggle {
    top: 34px;
    inset-inline-end: 34px;
    min-height: 34px !important
}

.login-shell-minimal .login-title-block h1 {
    margin: 0;
    font-size: 31px;
    letter-spacing: -.045em
}

.login-shell-minimal .login-form {
    gap: 16px
}

.login-shell-minimal .login-input-shell {
    min-height: 54px !important;
    border-radius: 14px !important
}

.login-shell-minimal .login-submit {
    min-height: 52px !important;
    margin-top: 3px
}

.login-shell-minimal .login-msg:empty, .login-shell-minimal .login-lock-countdown[hidden] {
    display: none !important
}

.login-shell-minimal .login-msg {
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent
}

.login-shell-minimal .login-msg:not(:empty) {
    min-height: 34px;
    padding: 9px 11px;
    border: 1px solid rgba(170,195,230,.09);
    background: rgba(255,255,255,.02)
}

.login-shell-minimal .login-footer {
    justify-content: center;
    margin-top: 22px;
    padding-top: 15px
}

.login-shell-minimal .login-footer small {
    color: #52657d;
    font-size: 8px
}

@media (max-width: 1200px) {
    .module-orders .orders-filter-grid {
        grid-template-columns:repeat(3,minmax(0,1fr)) !important
    }

    .module-orders .order-filter-search {
        grid-column: 1/-1 !important
    }

    .module-stockTrash .stock-click-metrics {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important
    }
}







/* iPhone 15 Pro Max / modern large-phone polish (430 x 932 CSS px) */






/* ================================================================
   Orders Trash — isolated rebuild (OTX)
   Only .module-ordersTrash / .otx-* selectors belong to this module.
   ================================================================ */
.module-ordersTrash { --otx-accent:#8b5cf6; --otx-danger:#fb5f7b; --otx-success:#28c98b; --otx-blue:#6477ff; --otx-surface:color-mix(in srgb,var(--panel,#111c30) 94%,transparent); --otx-border:color-mix(in srgb,#95a9cb 18%,transparent); }
.module-ordersTrash .otx-page{display:grid;gap:16px;min-width:0}
.module-ordersTrash .otx-back-btn{display:inline-flex;align-items:center;gap:8px}
.module-ordersTrash .otx-command{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:10px;border:1px solid var(--otx-border);border-radius:18px;background:var(--otx-surface);box-shadow:0 14px 34px rgba(0,0,0,.12)}
.module-ordersTrash .otx-search-wrap{display:grid;grid-template-columns:42px minmax(0,1fr) 42px;align-items:center;min-height:50px;border:1px solid var(--otx-border);border-radius:14px;background:color-mix(in srgb,var(--otx-surface) 75%,#07111f);overflow:hidden}
.module-ordersTrash .otx-search-icon{display:grid;place-items:center;color:#91a3c1}
.module-ordersTrash .otx-search-wrap input{width:100%;height:48px;padding:0 4px;border:0!important;outline:0;background:transparent!important;color:var(--text,#f6f8ff);box-shadow:none!important;font-size:14px}
.module-ordersTrash .otx-search-wrap input::placeholder{color:#72839f}
.module-ordersTrash .otx-clear{display:grid;place-items:center;width:34px;height:34px;margin:auto;border:0;border-radius:10px;background:transparent;color:#8393ad;cursor:pointer}
.module-ordersTrash .otx-clear:hover{background:rgba(255,255,255,.07);color:#fff}
.module-ordersTrash .otx-search-btn{min-width:126px;border-radius:14px!important}
.module-ordersTrash .otx-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.module-ordersTrash .otx-stat{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr) 24px;align-items:center;gap:12px;min-height:100px;padding:15px;border:1px solid var(--otx-border);border-radius:18px;background:var(--otx-surface);color:inherit;text-align:left;cursor:pointer;overflow:hidden;transition:.2s ease}
.module-ordersTrash .otx-stat:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,color-mix(in srgb,var(--otx-accent) 11%,transparent),transparent 62%);opacity:0;transition:.2s}
.module-ordersTrash .otx-stat:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--otx-accent) 48%,var(--otx-border));box-shadow:0 14px 30px rgba(0,0,0,.16)}
.module-ordersTrash .otx-stat:hover:before,.module-ordersTrash .otx-stat.is-active:before{opacity:1}
.module-ordersTrash .otx-stat.is-active{border-color:color-mix(in srgb,var(--otx-accent) 62%,var(--otx-border));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--otx-accent) 18%,transparent)}
.module-ordersTrash .otx-stat>*{position:relative;z-index:1}
.module-ordersTrash .otx-stat-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:color-mix(in srgb,var(--otx-accent) 17%,transparent);color:#cbbcff;font-size:20px}
.module-ordersTrash .otx-stat-copy{display:grid;gap:2px;min-width:0;font-style:normal}
.module-ordersTrash .otx-stat-copy small{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#8fa0bd}
.module-ordersTrash .otx-stat-copy strong{font-size:25px;line-height:1.1;color:var(--text,#fff)}
.module-ordersTrash .otx-stat-copy em{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px;font-style:normal;color:#7f91ae}
.module-ordersTrash .otx-stat-arrow{color:#667893}
.module-ordersTrash .otx-service-panel,.module-ordersTrash .otx-context,.module-ordersTrash .otx-list-head{padding:18px;border:1px solid var(--otx-border);border-radius:20px;background:var(--otx-surface)}
.module-ordersTrash .otx-section-head,.module-ordersTrash .otx-context,.module-ordersTrash .otx-list-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.module-ordersTrash .otx-kicker{display:block;margin-bottom:5px;font-size:10px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:#f08aa0}
.module-ordersTrash .otx-section-head h2,.module-ordersTrash .otx-context h2,.module-ordersTrash .otx-list-head h2{margin:0;color:var(--text,#fff);font-size:20px}
.module-ordersTrash .otx-section-head p,.module-ordersTrash .otx-context p{margin:5px 0 0;color:#8495b1;font-size:13px}
.module-ordersTrash .otx-count-pill{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:6px 11px;border:1px solid var(--otx-border);border-radius:999px;background:rgba(255,255,255,.035);color:#aab7cc;font-size:11px;font-weight:800;white-space:nowrap}
.module-ordersTrash .otx-service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:10px;margin-top:16px}
.module-ordersTrash .otx-service{display:grid;grid-template-columns:46px minmax(0,1fr) 22px;align-items:center;gap:10px;min-height:72px;padding:11px;border:1px solid var(--otx-border);border-radius:16px;background:rgba(6,15,29,.28);color:inherit;text-align:left;cursor:pointer;transition:.18s ease}
.module-ordersTrash .otx-service:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--otx-accent) 55%,var(--otx-border));background:color-mix(in srgb,var(--otx-accent) 8%,rgba(6,15,29,.28))}
.module-ordersTrash .otx-service-logo{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:rgba(255,255,255,.05);overflow:hidden}
.module-ordersTrash .otx-service-logo .service-icon{width:34px;height:34px}
.module-ordersTrash .otx-service-copy{display:grid;gap:3px;min-width:0}
.module-ordersTrash .otx-service-copy b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text,#fff);font-size:14px}
.module-ordersTrash .otx-service-copy small{color:#8495af;font-size:11px}
.module-ordersTrash .otx-service-arrow{color:#6f819e}
.module-ordersTrash .otx-results{display:grid;gap:14px;min-width:0}
.module-ordersTrash .otx-order-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.module-ordersTrash .otx-order{position:relative;display:grid;gap:14px;padding:16px;border:1px solid var(--otx-border);border-radius:20px;background:linear-gradient(155deg,color-mix(in srgb,var(--otx-surface) 95%,#17223b),color-mix(in srgb,var(--otx-surface) 96%,#07111f));box-shadow:0 12px 28px rgba(0,0,0,.11);cursor:pointer;overflow:hidden;transition:.2s ease}
.module-ordersTrash .otx-order:before{content:"";position:absolute;width:170px;height:170px;right:-95px;top:-105px;border-radius:50%;background:rgba(251,95,123,.09);filter:blur(2px)}
.module-ordersTrash .otx-order:hover{transform:translateY(-2px);border-color:rgba(251,95,123,.38);box-shadow:0 18px 38px rgba(0,0,0,.17)}
.module-ordersTrash .otx-order.is-selected{border-color:color-mix(in srgb,var(--otx-accent) 65%,var(--otx-border));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--otx-accent) 18%,transparent)}
.module-ordersTrash .otx-order>*{position:relative;z-index:1}
.module-ordersTrash .otx-order-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.module-ordersTrash .otx-check{display:inline-flex;align-items:center;gap:8px;cursor:pointer;color:#9babC2;font-size:11px;font-weight:800}
.module-ordersTrash .otx-check input{position:absolute;opacity:0;pointer-events:none}
.module-ordersTrash .otx-check span{display:grid;place-items:center;width:19px;height:19px;border:1px solid #52627d;border-radius:6px;background:#0a1526}
.module-ordersTrash .otx-check input:checked+span{border-color:var(--otx-accent);background:var(--otx-accent)}
.module-ordersTrash .otx-check input:checked+span:after{content:"✓";color:#fff;font-size:13px;font-weight:900}
.module-ordersTrash .otx-check em{font-style:normal}
.module-ordersTrash .otx-deleted-badge{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border:1px solid rgba(251,95,123,.24);border-radius:999px;background:rgba(251,95,123,.09);color:#ff8fa4;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.module-ordersTrash .otx-deleted-badge i{width:6px;height:6px;border-radius:50%;background:#fb5f7b;box-shadow:0 0 0 4px rgba(251,95,123,.12)}
.module-ordersTrash .otx-order-identity{display:grid;grid-template-columns:54px minmax(0,1fr);align-items:center;gap:12px}
.module-ordersTrash .otx-order-logo{display:grid;place-items:center;width:54px;height:54px;border:1px solid var(--otx-border);border-radius:16px;background:rgba(255,255,255,.045);overflow:hidden}
.module-ordersTrash .otx-order-logo .service-icon{width:40px;height:40px}
.module-ordersTrash .otx-order-id{display:block;margin-bottom:3px;color:#7688a5;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.module-ordersTrash .otx-order-identity h3{margin:0;color:var(--text,#fff);font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.module-ordersTrash .otx-order-identity p{margin:4px 0 0;color:#a1afc3;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.module-ordersTrash .otx-order-contact{display:flex;align-items:center;gap:8px;min-height:36px;padding:8px 10px;border-radius:11px;background:rgba(255,255,255,.035);color:#91a1b9;font-size:12px;min-width:0}
.module-ordersTrash .otx-order-contact span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.module-ordersTrash .otx-order-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.module-ordersTrash .otx-order-meta div{display:grid;gap:4px;min-width:0;padding:10px;border:1px solid rgba(144,164,196,.1);border-radius:12px;background:rgba(5,14,27,.26)}
.module-ordersTrash .otx-order-meta small{color:#71829e;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.module-ordersTrash .otx-order-meta b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#cbd5e4;font-size:12px}
.module-ordersTrash .otx-order-actions{display:grid;grid-template-columns:.78fr .9fr 1.25fr;gap:8px;padding-top:12px;border-top:1px solid var(--otx-border)}
.module-ordersTrash .otx-action{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:8px;border:1px solid var(--otx-border);border-radius:11px;background:rgba(255,255,255,.035);color:#b7c2d3;font-size:11px;font-weight:800;cursor:pointer;transition:.18s ease}
.module-ordersTrash .otx-action:hover{transform:translateY(-1px);filter:brightness(1.14)}
.module-ordersTrash .otx-view{border-color:rgba(100,119,255,.25);background:rgba(100,119,255,.09);color:#aeb8ff}
.module-ordersTrash .otx-restore{border-color:rgba(40,201,139,.25);background:rgba(40,201,139,.09);color:#79e5bb}
.module-ordersTrash .otx-delete{border-color:rgba(251,95,123,.25);background:rgba(251,95,123,.09);color:#ff96aa}
.module-ordersTrash .otx-empty{display:grid;place-items:center;min-height:210px;padding:28px;border:1px dashed color-mix(in srgb,var(--otx-border) 150%,transparent);border-radius:20px;background:rgba(6,15,29,.24);text-align:center}
.module-ordersTrash .otx-empty-icon{display:grid;place-items:center;width:54px;height:54px;margin-bottom:10px;border-radius:16px;background:rgba(139,92,246,.1);font-size:24px}
.module-ordersTrash .otx-empty h3{margin:0;color:var(--text,#fff);font-size:17px}
.module-ordersTrash .otx-empty p{max-width:360px;margin:7px 0 0;color:#7f90ac;font-size:12px}
html[dir="rtl"] .module-ordersTrash .otx-stat,html[dir="rtl"] .module-ordersTrash .otx-service{text-align:right}
html[dir="rtl"] .module-ordersTrash .otx-stat-arrow,html[dir="rtl"] .module-ordersTrash .otx-service-arrow{transform:scaleX(-1)}








/* Sticky footer fix for Stock Accounts & Family Groups */
.module-stock-accounts,
.module-family-groups{
 display:flex!important;
 flex-direction:column!important;
 min-height:100dvh!important;
}
.module-stock-accounts .page-content,
.module-family-groups .page-content{
 flex:1 1 auto!important;
}
.module-stock-accounts .module-footer,
.module-family-groups .module-footer,
.module-stock-accounts footer,
.module-family-groups footer{
 margin-top:auto!important;
 position:sticky!important;
 bottom:0!important;
 z-index:20!important;
}

/* ================================================================
   UI/UX polish layer — responsive production pass
   Scope: presentation only. No business logic or API behavior changed.
   ================================================================ */
:root{
  --content-max:1440px;
  --touch:44px;
  --topbar-h:76px;
}

:focus-visible{
  outline:3px solid color-mix(in srgb,var(--blue) 72%,#fff);
  outline-offset:3px;
}

button,input,select,textarea{min-width:0}
img,svg{max-width:100%}

.main-panel{min-width:0;overflow:hidden}
.page-host{
  width:100%;
  min-width:0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
.page-host>.ks-page,.ks-page{width:min(100%,var(--content-max));padding-inline:clamp(18px,2.2vw,34px)}

.topbar{
  min-height:var(--topbar-h);
  padding:12px clamp(18px,2.2vw,34px);
  gap:16px;
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.topbar-left,.topbar-right,.top-actions{min-width:0}
.top-title{min-width:0}
.top-title-line{min-width:0;display:flex;align-items:center;gap:10px}
.top-title-line strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}

.ks-sidebar{box-shadow:16px 0 42px rgba(0,0,0,.2)}
.main-nav button,.side-footer .ks-btn{min-height:var(--touch)}

.page-hero{padding:clamp(20px,2.2vw,30px);gap:18px}
.page-hero h1{font-size:clamp(28px,3vw,38px);line-height:1.08}
.page-hero p{max-width:72ch}
.hero-actions{max-width:52%;align-items:center}
.hero-actions .ks-btn{min-height:var(--touch)}

.ks-card,.panel,.content-card{min-width:0}
.ks-card{padding:clamp(16px,1.5vw,22px)}
.section-title{align-items:flex-start}
.section-title>div{min-width:0}
.section-title h2{font-size:clamp(20px,2vw,26px);line-height:1.2}

.ks-btn,.icon-btn,.modal-close{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.ks-btn{min-height:var(--touch);white-space:normal;text-align:center}
.icon-btn{min-width:var(--touch);min-height:var(--touch)}
.ks-btn:disabled,button:disabled{cursor:not-allowed;opacity:.58}

.form-grid,.filters,.filter-grid,.orders-filter-grid,.stock-filter-grid,.report-filter-grid,.activity-filter-grid,.admin-spending-filter-grid,.deleted-spending-filter-grid,.telegram-form-grid{
  align-items:end;
}
.ks-field{min-width:0}
.ks-field input,.ks-field select,.ks-field textarea,.search-box input,.order-search-field input,.stock-search-field input,.telegram-search input{
  width:100%;
  min-height:46px;
}
.ks-field textarea{resize:vertical;line-height:1.5}
.form-actions,.card-actions,.row-actions,.action-row,.split-actions{flex-wrap:wrap}

.table-wrap,.telegram-table-wrap{
  max-width:100%;
  overflow:auto;
  border-radius:18px;
  -webkit-overflow-scrolling:touch;
}
.data-table,.telegram-table,.spending-desktop-table{width:100%;border-collapse:separate;border-spacing:0}
.data-table th,.telegram-table th,.spending-desktop-table th{position:sticky;top:0;z-index:2;white-space:nowrap}
.data-table td,.telegram-table td,.spending-desktop-table td{vertical-align:middle}
.data-table td,.data-table th,.telegram-table td,.telegram-table th{padding:13px 12px}

.order-card,.premium-order-card,.stock-account-card,.stock-card,.trash-order-card,.mobile-table-card{
  min-width:0;
  overflow:hidden;
}
.order-card *, .premium-order-card *, .stock-account-card *, .stock-card *, .trash-order-card *, .mobile-table-card *{min-width:0}
.row-title,.row-sub,.stock-email,.stock-credential,.mobile-table-value{overflow-wrap:anywhere}
.card-actions,.row-actions,.order-modal-actions,.stock-actions-row,.mobile-table-actions{gap:8px}
.card-actions .ks-btn,.row-actions .ks-btn,.order-modal-actions .ks-btn,.stock-actions-row .ks-btn,.mobile-table-actions .ks-btn{min-height:42px}

.modal{padding:clamp(12px,2vw,28px)}
.modal-card{
  width:min(960px,100%);
  max-height:min(92dvh,980px);
  border-radius:24px;
  overflow:auto;
  overscroll-behavior:contain;
}
.modal-close{position:sticky;top:10px;margin-left:auto;z-index:15}
.sticky-modal-actions,.form-submit-bar{bottom:0;padding-bottom:max(12px,env(safe-area-inset-bottom))}

@media (min-width:901px) and (max-width:1240px){
  :root{--sidebar:270px}
  .page-host>.ks-page,.ks-page{padding-inline:20px}
  .topbar{padding-inline:20px}
  .grid-5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-actions{max-width:58%}
}










@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}


/* ================================================================
   Replacements — mobile rebuild (presentation only)
   Replaces the legacy narrow-screen layout with a compact workflow.
   ================================================================ */
.replacement-history-disclosure{margin-top:14px}
.replacement-history-disclosure>summary{display:none}

@media (max-width:768px){
  .module-replacements .ks-page{padding-inline:12px!important;padding-bottom:calc(92px + env(safe-area-inset-bottom))!important}
  .module-replacements .page-hero{padding:16px!important;border-radius:22px!important;min-height:0!important}
  .module-replacements .page-hero h1{font-size:28px!important}
  .module-replacements .hero-actions{width:100%!important;max-width:none!important}
  .module-replacements .hero-actions .ks-btn{width:100%!important}

  .module-replacements #replacementSummary{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;margin-bottom:12px!important}
  .module-replacements #replacementSummary>.grid-5,.module-replacements #replacementSummary .replacement-click-metrics,.module-replacements #replacementSummary .replacement-status-metrics{display:contents!important}
  .module-replacements .replacement-click-card{min-height:104px!important;padding:13px!important;border-radius:18px!important}
  .module-replacements .replacement-click-card h3{font-size:24px!important;line-height:1!important}
  .module-replacements .replacement-click-card p{font-size:11px!important;line-height:1.35!important;margin-top:5px!important}

  .module-replacements .replacement-workflow-card,.module-replacements .replacement-history-card{padding:14px!important;border-radius:22px!important;overflow:visible!important}
  .module-replacements .replacement-head{display:grid!important;gap:10px!important;margin-bottom:14px!important}
  .module-replacements .replacement-head h2{font-size:24px!important;margin:2px 0 5px!important}
  .module-replacements .replacement-head p{font-size:13px!important;line-height:1.45!important;margin:0!important}
  .module-replacements .replacement-flow-badges{justify-content:flex-start!important;gap:6px!important}

  .module-replacements .replacement-grid{display:grid!important;grid-template-columns:1fr!important;gap:12px!important}
  .module-replacements .replacement-col{padding:12px!important;border-radius:20px!important;background:rgba(7,17,36,.55)!important}
  .module-replacements .replacement-step{position:sticky;top:72px;z-index:4;margin:0 -4px 10px;padding:8px 4px;background:linear-gradient(180deg,rgba(8,18,39,.98) 70%,rgba(8,18,39,0));backdrop-filter:blur(8px)}
  .module-replacements .replacement-step>span{width:34px!important;height:34px!important;border-radius:12px!important}
  .module-replacements .replacement-step b{font-size:15px!important}
  .module-replacements .replacement-step small{font-size:11px!important}

  .module-replacements .compact-grid,.module-replacements .form-grid.two{grid-template-columns:1fr!important;gap:10px!important}
  .module-replacements .replacement-clear-wrap{grid-template-columns:minmax(0,1fr) 44px!important}
  .module-replacements .replacement-clear-search{width:44px!important;height:46px!important}

  .module-replacements .replacement-target-list{max-height:46dvh!important;overflow:auto!important;padding:2px!important;gap:8px!important;scrollbar-width:thin!important;overscroll-behavior:contain!important}
  .module-replacements .replacement-target-card{grid-template-columns:46px minmax(0,1fr)!important;padding:11px!important;border-radius:16px!important;gap:10px!important}
  .module-replacements .replacement-type-icon{width:46px!important;height:46px!important;border-radius:14px!important;grid-row:1/3!important}
  .module-replacements .replacement-target-info b{font-size:15px!important;white-space:normal!important;overflow-wrap:anywhere!important}
  .module-replacements .replacement-target-info small{font-size:11px!important;white-space:normal!important;overflow-wrap:anywhere!important;line-height:1.35!important}
  .module-replacements .replacement-card-badges{grid-column:2!important;flex-direction:row!important;justify-content:flex-start!important;align-items:center!important;flex-wrap:wrap!important}

  .module-replacements .replacement-selected-card,.module-replacements .replacement-new-stock-card{padding:12px!important;border-radius:18px!important}
  .module-replacements .stock-account-top{display:grid!important;grid-template-columns:1fr!important;gap:9px!important}
  .module-replacements .service-line{align-items:flex-start!important}
  .module-replacements .service-line .card-title{font-size:16px!important;overflow-wrap:anywhere!important}
  .module-replacements .replacement-meta-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .module-replacements .replacement-meta-grid .meta-item{padding:10px!important;border-radius:13px!important;min-width:0!important}
  .module-replacements .replacement-meta-grid .meta-item label{font-size:9px!important}
  .module-replacements .replacement-meta-grid .meta-item b{font-size:12px!important;white-space:normal!important;overflow-wrap:anywhere!important}
  .module-replacements .split-actions,.module-replacements .family-inline-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
  .module-replacements .split-actions .ks-btn,.module-replacements .family-inline-actions .ks-btn{width:100%!important;margin:0!important}

  .module-replacements .replacement-stock-tools{display:grid!important;grid-template-columns:1fr!important;gap:9px!important}
  .module-replacements .replacement-stock-tools .ks-btn{width:100%!important}
  .module-replacements .replacement-manual-toggle{display:flex!important;width:100%!important;padding:12px!important;border-radius:15px!important;font-size:13px!important}
  .module-replacements .replacement-warning-note{font-size:12px!important;padding:11px!important;border-radius:14px!important}
  .module-replacements .replacement-form{gap:11px!important}

  .module-replacements .replacement-history-title{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
  .module-replacements .replacement-history-title h2{font-size:23px!important}
  .module-replacements .family-inline-search{width:100%!important}
  .module-replacements .replacement-history-disclosure{border:1px solid rgba(103,232,249,.18);border-radius:18px;background:rgba(4,12,27,.35);overflow:hidden}
  .module-replacements .replacement-history-disclosure>summary{display:flex!important;align-items:center;justify-content:space-between;gap:12px;padding:13px 14px;cursor:pointer;list-style:none;font-weight:900;color:#e7f5ff}
  .module-replacements .replacement-history-disclosure>summary::-webkit-details-marker{display:none}
  .module-replacements .replacement-history-disclosure>summary:after{content:'＋';display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:rgba(34,211,238,.12);color:#67e8f9;flex:0 0 auto}
  .module-replacements .replacement-history-disclosure[open]>summary:after{content:'−'}
  .module-replacements .replacement-history-disclosure>summary span{display:block;font-size:14px}
  .module-replacements .replacement-history-disclosure>summary small{display:none}
  .module-replacements .replacement-history-disclosure[open]>summary{border-bottom:1px solid rgba(148,163,184,.14)}
  .module-replacements .replacement-history-disclosure[open]{padding-bottom:12px}
  .module-replacements .replacement-history-disclosure[open]>.replacement-history-filters,.module-replacements .replacement-history-disclosure[open]>#replacementHistoryHost{margin-inline:12px}
  .module-replacements .replacement-history-filters-wide{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;margin-top:12px!important}
  .module-replacements .replacement-history-filters-wide .ks-field:last-child{grid-column:1/-1!important}
  .module-replacements #replacementHistoryHost{max-height:72dvh!important;overflow:auto!important;overscroll-behavior:contain!important;padding-right:2px!important}
  .module-replacements .replacement-history-item{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;padding:12px!important;border-radius:17px!important;overflow:hidden!important}
  .module-replacements .replacement-audit-title h3{font-size:16px!important;overflow-wrap:anywhere!important}
  .module-replacements .replacement-audit-title p{font-size:11px!important;overflow-wrap:anywhere!important}
  .module-replacements .replacement-chain{grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr)!important;gap:6px!important;margin:9px 0!important}
  .module-replacements .replacement-chain span{padding:8px!important;border-radius:12px!important}
  .module-replacements .replacement-chain small,.module-replacements .replacement-chain em,.module-replacements .replacement-chain b{white-space:normal!important;overflow-wrap:anywhere!important;font-size:10px!important}
  .module-replacements .replacement-audit-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  .module-replacements .replacement-history-meta{min-width:0!important;align-items:flex-start!important;flex-direction:row!important;flex-wrap:wrap!important}
  .module-replacements .replacement-history-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  .module-replacements .replacement-history-actions .ks-btn{width:100%!important;font-size:11px!important;padding-inline:8px!important}
}

@media (max-width:390px){
  .module-replacements #replacementSummary{grid-template-columns:1fr!important}
  .module-replacements .replacement-meta-grid,.module-replacements .replacement-history-filters-wide,.module-replacements .replacement-audit-grid{grid-template-columns:1fr!important}
  .module-replacements .replacement-history-filters-wide .ks-field:last-child{grid-column:auto!important}
  .module-replacements .split-actions,.module-replacements .family-inline-actions{grid-template-columns:1fr!important}
}

/* Replacements mobile — keep workflow step headers in normal document flow */
@media (max-width: 768px){
  .module-replacements .replacement-step{
    position:static!important;
    top:auto!important;
    z-index:auto!important;
    margin:0 0 10px!important;
    padding:8px 4px!important;
    background:transparent!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }
  .module-replacements .replacement-step::before,
  .module-replacements .replacement-step::after{display:none!important}
  .module-replacements .replacement-col{overflow:visible!important}
  .module-replacements .replacement-col-main{overflow:visible!important}
}


/* Replacement History mobile cards — bottom section */
@media (max-width:768px){
  .module-replacements .replacement-history-card{
    margin-top:14px!important;
    padding:14px!important;
    background:linear-gradient(180deg,rgba(20,46,105,.96),rgba(6,20,49,.98))!important;
    border:1px solid rgba(103,232,249,.28)!important;
    box-shadow:0 18px 44px rgba(0,0,0,.24)!important;
  }
  .module-replacements .replacement-history-title{
    padding:2px 2px 12px!important;
    border-bottom:1px solid rgba(148,163,184,.15)!important;
  }
  .module-replacements .replacement-history-title h2{font-size:22px!important;margin:3px 0 4px!important}
  .module-replacements .replacement-history-title p{font-size:12px!important;line-height:1.45!important;margin:0!important}
  .module-replacements .replacement-history-disclosure{
    margin-top:12px!important;
    border:0!important;
    background:transparent!important;
    overflow:visible!important;
  }
  .module-replacements .replacement-history-disclosure>summary{
    margin-bottom:10px!important;
    padding:12px 13px!important;
    border:1px solid rgba(103,232,249,.2)!important;
    border-radius:15px!important;
    background:rgba(10,28,67,.72)!important;
  }
  .module-replacements .replacement-history-disclosure[open]>summary{border-bottom:1px solid rgba(103,232,249,.2)!important}
  .module-replacements .replacement-history-disclosure[open]>.replacement-history-filters,
  .module-replacements .replacement-history-disclosure[open]>#replacementHistoryHost{margin-inline:0!important}
  .module-replacements .replacement-history-filters-wide{
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
    padding:10px!important;
    margin:0 0 10px!important;
    border:1px solid rgba(148,163,184,.15)!important;
    border-radius:17px!important;
    background:rgba(4,14,35,.52)!important;
  }
  .module-replacements .replacement-history-filters-wide .ks-field:last-child{grid-column:1/-1!important}
  .module-replacements #replacementHistoryHost{
    max-height:none!important;
    overflow:visible!important;
    padding:0!important;
  }
  .module-replacements .replacement-history-list{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
  }
  .module-replacements .replacement-history-item.audit{
    position:relative!important;
    display:flex!important;
    flex-direction:column!important;
    gap:11px!important;
    padding:14px!important;
    border-radius:20px!important;
    background:linear-gradient(145deg,rgba(23,55,126,.96),rgba(7,24,61,.98))!important;
    border:1px solid rgba(125,211,252,.26)!important;
    box-shadow:0 12px 28px rgba(0,0,0,.22)!important;
  }
  .module-replacements .replacement-history-item.audit.solved{border-color:rgba(52,211,153,.46)!important}
  .module-replacements .replacement-history-item.audit.danger{border-color:rgba(251,113,133,.5)!important}
  .module-replacements .replacement-history-meta{
    order:-1!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    gap:6px!important;
    flex-wrap:wrap!important;
    padding-bottom:9px!important;
    border-bottom:1px solid rgba(148,163,184,.14)!important;
  }
  .module-replacements .replacement-history-meta small{
    width:100%!important;
    margin-top:2px!important;
    font-size:10px!important;
    opacity:.76!important;
  }
  .module-replacements .replacement-audit-title h3{
    margin:3px 0!important;
    font-size:18px!important;
    line-height:1.25!important;
  }
  .module-replacements .replacement-audit-title p{font-size:12px!important;line-height:1.4!important}
  .module-replacements .replacement-chain{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr)!important;
    gap:7px!important;
    align-items:stretch!important;
    margin:10px 0!important;
  }
  .module-replacements .replacement-chain>span{
    min-width:0!important;
    padding:10px!important;
    border-radius:14px!important;
    background:rgba(2,12,34,.5)!important;
    border:1px solid rgba(148,163,184,.16)!important;
  }
  .module-replacements .replacement-chain>strong{display:grid!important;place-items:center!important;font-size:20px!important;color:#67e8f9!important}
  .module-replacements .replacement-chain b,
  .module-replacements .replacement-chain em{display:block!important;white-space:normal!important;overflow-wrap:anywhere!important}
  .module-replacements .replacement-chain b{font-size:11px!important;margin:4px 0!important}
  .module-replacements .replacement-chain em{font-size:9px!important;line-height:1.35!important}
  .module-replacements .replacement-audit-grid{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
  }
  .module-replacements .replacement-audit-grid .meta-item{
    min-width:0!important;
    padding:10px!important;
    border-radius:13px!important;
    background:rgba(2,12,34,.42)!important;
  }
  .module-replacements .replacement-audit-grid .meta-item label{font-size:9px!important;letter-spacing:.08em!important}
  .module-replacements .replacement-audit-grid .meta-item b{font-size:11px!important;line-height:1.35!important;white-space:normal!important;overflow-wrap:anywhere!important}
  .module-replacements .replacement-history-primary-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr 72px!important;
    gap:8px!important;
    align-items:stretch!important;
    margin-top:10px!important;
  }
  .module-replacements .replacement-history-primary-actions>.ks-btn{width:100%!important;min-height:44px!important;margin:0!important;font-size:11px!important}
  .module-replacements .replacement-history-more{position:relative!important;min-width:0!important}
  .module-replacements .replacement-history-more>summary{
    display:grid!important;
    place-items:center!important;
    min-height:44px!important;
    height:100%!important;
    padding:8px!important;
    border-radius:13px!important;
    border:1px solid rgba(148,163,184,.25)!important;
    background:rgba(30,64,175,.36)!important;
    color:#fff!important;
    font-size:11px!important;
    font-weight:900!important;
    cursor:pointer!important;
    list-style:none!important;
  }
  .module-replacements .replacement-history-more>summary::-webkit-details-marker{display:none!important}
  .module-replacements .replacement-history-more-menu{
    grid-column:1/-1!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
    margin-top:8px!important;
  }
  .module-replacements .replacement-history-more[open]{grid-column:1/-1!important;display:grid!important;grid-template-columns:1fr!important}
  .module-replacements .replacement-history-more[open]>summary{width:72px!important;justify-self:end!important}
  .module-replacements .replacement-history-more-menu .ks-btn{width:100%!important;min-height:42px!important;margin:0!important;font-size:10px!important}
}
@media (max-width:390px){
  .module-replacements .replacement-history-filters-wide,
  .module-replacements .replacement-audit-grid{grid-template-columns:1fr!important}
  .module-replacements .replacement-history-filters-wide .ks-field:last-child{grid-column:auto!important}
  .module-replacements .replacement-history-primary-actions{grid-template-columns:1fr 1fr!important}
  .module-replacements .replacement-history-more{grid-column:1/-1!important}
  .module-replacements .replacement-history-more>summary{width:100%!important}
}

/* ================================================================
   Stock Accounts mobile rebuild — header, cards, forms and pager
   ================================================================ */
@media (max-width: 767px){
  .module-stock .page-header,
  .module-stock .module-header{
    gap:10px!important;
    padding:10px 12px!important;
  }
  .module-stock .page-header .page-title,
  .module-stock .module-header .page-title{
    min-width:0;
  }
  .module-stock .page-header h1,
  .module-stock .module-header h1{
    font-size:20px!important;
    line-height:1.15!important;
  }
  .stock-header-primary-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
    width:100%!important;
  }
  .stock-header-action{
    min-height:58px!important;
    padding:10px 12px!important;
    border-radius:16px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:10px!important;
    text-align:left!important;
    box-shadow:0 10px 24px rgba(0,0,0,.16)!important;
  }
  .stock-header-action>span:first-child{
    display:grid!important;
    place-items:center!important;
    flex:0 0 34px!important;
    width:34px!important;
    height:34px!important;
    border-radius:11px!important;
    background:rgba(255,255,255,.14)!important;
    font-size:20px!important;
  }
  .stock-header-action>span:last-child{display:grid!important;gap:2px!important;min-width:0!important}
  .stock-header-action b{font-size:13px!important;line-height:1.15!important}
  .stock-header-action small{font-size:10px!important;opacity:.78!important;font-weight:600!important}

  .module-stock .stock-premium-panel{
    padding:12px!important;
    border-radius:20px!important;
  }
  .module-stock .stock-toolbar-head{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:11px!important;
  }
  .module-stock .stock-toolbar-head h2{font-size:20px!important;line-height:1.15!important}
  .module-stock .stock-toolbar-head p{font-size:12px!important;line-height:1.5!important;margin-top:5px!important}
  .module-stock .stock-toolbar-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    width:100%!important;
  }
  .module-stock .stock-toolbar-actions .ks-btn{width:100%!important;min-height:44px!important}

  .module-stock .stock-service-scroll{
    gap:9px!important;
    margin-inline:-2px!important;
    padding:3px 2px 9px!important;
    scroll-snap-type:x proximity!important;
  }
  .module-stock .stock-service-card{
    min-width:172px!important;
    padding:11px 12px!important;
    border-radius:15px!important;
    scroll-snap-align:start!important;
  }
  .module-stock .stock-filter-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
  }
  .module-stock .stock-search-field{grid-column:1/-1!important}
  .module-stock .stock-filter-grid .ks-field:last-child{grid-column:2!important}
  .module-stock .stock-filter-grid input,
  .module-stock .stock-filter-grid select{min-height:44px!important}

  .module-stock .stock-premium-list{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:11px!important;
    padding-bottom:8px!important;
  }
  .module-stock .stock-account-card{
    padding:13px!important;
    border-radius:19px!important;
    gap:11px!important;
    box-shadow:0 12px 28px rgba(0,0,0,.14)!important;
  }
  .module-stock .stock-account-top{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:9px!important;
    align-items:start!important;
  }
  .module-stock .stock-account-card h3{
    font-size:14px!important;
    line-height:1.3!important;
    overflow-wrap:anywhere!important;
  }
  .module-stock .stock-account-top .muted{font-size:11px!important;overflow-wrap:anywhere!important}
  .module-stock .stock-badges{max-width:100%!important;justify-content:flex-end!important;gap:5px!important}
  .module-stock .stock-meta-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
  }
  .module-stock .stock-meta-grid .meta-item{
    min-height:62px!important;
    padding:9px!important;
    border-radius:12px!important;
  }
  .module-stock .stock-meta-grid label{font-size:9px!important;letter-spacing:.07em!important}
  .module-stock .stock-meta-grid b{font-size:12px!important;line-height:1.35!important;overflow-wrap:anywhere!important}
  .module-stock .stock-note{font-size:12px!important;line-height:1.45!important}
  .module-stock .stock-actions-row{display:grid!important;grid-template-columns:1fr auto!important;gap:8px!important}
  .module-stock .stock-actions-row .split-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .module-stock .stock-actions-row .ks-btn{min-height:42px!important;padding-inline:10px!important}

  /* Pager belongs to the document footer and must never float over cards. */
  .module-stock #stockPager,
  .module-stock .stock-pager{
    position:static!important;
    inset:auto!important;
    transform:none!important;
    z-index:auto!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    margin:12px 0 calc(88px + env(safe-area-inset-bottom))!important;
    padding:12px!important;
    border-radius:18px!important;
    box-shadow:none!important;
  }
  .module-stock .stock-pager.hidden{display:none!important}
  .module-stock .stock-pager>div:first-child{font-size:13px!important;font-weight:800!important;text-align:center!important}
  .module-stock .stock-pager .split-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .module-stock .stock-pager .ks-btn{width:100%!important;min-height:44px!important}

  /* Modern Add Stock / Bulk Stock mobile forms */
  .stock-form-modern{
    width:100%!important;
    max-width:none!important;
    padding:0!important;
  }
  .stock-form-modern .stock-form-hero{
    margin:-2px -2px 12px!important;
    padding:15px!important;
    border-radius:18px!important;
    background:linear-gradient(135deg,rgba(14,165,233,.18),rgba(124,58,237,.18))!important;
    border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line))!important;
  }
  .stock-form-modern .stock-form-hero h2{font-size:20px!important;line-height:1.2!important}
  .stock-form-modern .stock-form-hero p{font-size:12px!important;line-height:1.45!important}
  .stock-form-modern .form-grid.two,
  .stock-form-modern .stock-bulk-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  .stock-form-modern .ks-field{gap:6px!important;font-size:12px!important;font-weight:800!important}
  .stock-form-modern input,
  .stock-form-modern select,
  .stock-form-modern textarea{
    width:100%!important;
    min-height:47px!important;
    border-radius:13px!important;
    font-size:16px!important;
  }
  .stock-form-modern textarea{min-height:100px!important;resize:vertical!important}
  .stock-form-modern .stock-bulk-accounts textarea{min-height:190px!important;font-family:ui-monospace,SFMono-Regular,Menlo,monospace!important}
  .stock-form-modern .bulk-preview{max-height:160px!important;overflow:auto!important;border-radius:14px!important}
  .stock-form-modern .order-modal-actions{
    position:sticky!important;
    bottom:0!important;
    z-index:4!important;
    display:grid!important;
    grid-template-columns:1fr 1.25fr!important;
    gap:9px!important;
    margin:12px -2px -2px!important;
    padding:10px 2px calc(10px + env(safe-area-inset-bottom))!important;
    background:linear-gradient(to top,var(--panel) 72%,transparent)!important;
  }
  .stock-form-modern .order-modal-actions .ks-btn{width:100%!important;min-height:48px!important;border-radius:14px!important}
}

@media (max-width: 380px){
  .stock-header-primary-actions{grid-template-columns:1fr!important}
  .module-stock .stock-filter-grid{grid-template-columns:1fr!important}
  .module-stock .stock-filter-grid .ks-field,
  .module-stock .stock-filter-grid .ks-field:last-child{grid-column:1!important}
}

/* Stock Trash mobile cards — rebuilt cleanly for compact, professional scanning. */
@media (max-width: 767px) {
  .module-stockTrash #stockHost {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .module-stockTrash .stock-trash-card-pro {
    position: relative;
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 14px !important;
    border: 1px solid rgba(132,166,255,.32) !important;
    border-radius: 20px !important;
    background: linear-gradient(155deg,rgba(28,51,105,.96),rgba(13,28,63,.98)) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.23), inset 0 1px 0 rgba(255,255,255,.05) !important;
    overflow: hidden;
  }
  .module-stockTrash .stock-trash-card-pro::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg,#ff4f8b,#8d5cff);
  }
  .module-stockTrash .stock-trash-card-head {
    display: grid;
    grid-template-columns: 32px minmax(0,1fr) auto;
    align-items: start;
    gap: 10px;
  }
  .module-stockTrash .stock-trash-check {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 10px;
    background: rgba(255,255,255,.055);
  }
  .module-stockTrash .stock-trash-check input {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
  }
  .module-stockTrash .stock-trash-identity {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    min-width: 0;
  }
  .module-stockTrash .stock-trash-identity .service-icon,
  .module-stockTrash .stock-trash-identity .service-card-icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 13px;
  }
  .module-stockTrash .stock-trash-identity > div:last-child { min-width: 0; }
  .module-stockTrash .stock-trash-identity h3 {
    margin: 2px 0 3px !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    overflow-wrap: anywhere;
  }
  .module-stockTrash .stock-trash-identity p {
    margin: 0;
    font-size: 11px;
    color: var(--muted);
    overflow-wrap: anywhere;
  }
  .module-stockTrash .stock-trash-status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
  }
  .module-stockTrash .stock-trash-status .badge { white-space: nowrap; }
  .module-stockTrash .stock-trash-quick-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
  }
  .module-stockTrash .stock-trash-quick-grid > div {
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(152,181,255,.17);
    border-radius: 13px;
    background: rgba(255,255,255,.045);
  }
  .module-stockTrash .stock-trash-quick-grid span,
  .module-stockTrash .stock-trash-reason-pro > span {
    display: block;
    margin-bottom: 4px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: #8fe8db;
  }
  .module-stockTrash .stock-trash-quick-grid b {
    display: block;
    font-size: 12px;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }
  .module-stockTrash .stock-trash-audit-line {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 0 2px;
    font-size: 10px;
    color: var(--muted);
  }
  .module-stockTrash .stock-trash-reason-pro {
    padding: 10px 11px;
    border: 1px solid rgba(255,92,132,.22);
    border-radius: 13px;
    background: rgba(255,71,116,.07);
  }
  .module-stockTrash .stock-trash-reason-pro p {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }
  .module-stockTrash .stock-trash-actions-pro {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto;
    gap: 8px !important;
    padding-top: 10px !important;
  }
  .module-stockTrash .stock-trash-actions-pro .ks-btn {
    min-height: 43px;
    border-radius: 12px !important;
  }

  /* Pro full-screen deleted-stock view. */
  .stock-trash-view-pro {
    padding-bottom: 96px;
  }
  .stock-trash-view-pro .ks-view-hero {
    border-radius: 18px;
    background: linear-gradient(145deg,rgba(63,85,173,.38),rgba(19,35,78,.9));
  }
  .stock-trash-view-pro .ks-view-section {
    border: 1px solid rgba(144,174,255,.18);
    border-radius: 16px;
    background: rgba(255,255,255,.035);
  }
  .stock-trash-view-pro .ks-view-fields {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }
  .stock-trash-view-pro .ks-view-field {
    min-width: 0;
    border-radius: 12px;
  }
  .stock-trash-view-pro .ks-view-field b {
    overflow-wrap: anywhere;
  }
  .stock-trash-view-pro .ks-view-actions {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
  }
  .stock-trash-view-pro .ks-view-actions .ks-btn:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 380px) {
  .module-stockTrash .stock-trash-card-head { grid-template-columns: 30px minmax(0,1fr); }
  .module-stockTrash .stock-trash-status { grid-column: 2; flex-direction: row; align-items: center; }
  .module-stockTrash .stock-trash-actions-pro { grid-template-columns: 1fr 1fr; }
  .module-stockTrash .stock-trash-actions-pro .mobile-more-actions { grid-column: 1 / -1; width: 100%; }
  .stock-trash-view-pro .ks-view-fields { grid-template-columns: 1fr !important; }
}

/* Stock Trash view v2 — mobile-first, no inherited grid or vertical text. */
@media (max-width: 767px) {
  .modal:has(.stock-trash-view-pro-v2),
  .modal-content:has(.stock-trash-view-pro-v2),
  .ks-modal:has(.stock-trash-view-pro-v2) {
    padding: 0 !important;
    overflow: hidden !important;
  }
  .stock-trash-view-pro-v2 {
    width: 100%;
    min-width: 0;
    height: min(100dvh, 920px);
    display: grid;
    grid-template-rows: auto minmax(0,1fr) auto;
    background: linear-gradient(180deg,#12275a 0%,#0b193b 100%);
    color: #fff;
    overflow: hidden;
  }
  .stock-trash-view-pro-v2 * { box-sizing: border-box; min-width: 0; }
  .trash-view-header {
    display: grid;
    grid-template-columns: 46px minmax(0,1fr);
    gap: 11px;
    align-items: center;
    padding: 16px 16px 13px;
    border-bottom: 1px solid rgba(157,181,255,.18);
    background: linear-gradient(145deg,rgba(86,111,210,.26),rgba(20,38,83,.96));
  }
  .trash-view-brand .service-icon,
  .trash-view-brand .service-card-icon {
    width: 46px !important;
    height: 46px !important;
    border-radius: 14px !important;
  }
  .trash-view-title h2 {
    margin: 2px 0 3px !important;
    font-size: 17px !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .trash-view-title p {
    margin: 0;
    font-size: 11px;
    color: rgba(222,230,255,.72);
    overflow-wrap: anywhere;
  }
  .trash-view-badges {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding-left: 57px;
  }
  .trash-view-content {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 12px 12px 24px;
  }
  .trash-view-section {
    margin-bottom: 11px;
    padding: 12px;
    border: 1px solid rgba(147,174,255,.18);
    border-radius: 17px;
    background: rgba(255,255,255,.045);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  }
  .trash-view-audit { border-color: rgba(255,93,136,.22); background: rgba(255,73,121,.055); }
  .trash-view-section-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
  }
  .trash-view-section-head > span {
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: rgba(117,151,255,.14);
  }
  .trash-view-section-head h3 {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
  }
  .trash-view-section-head p {
    margin: 2px 0 0;
    font-size: 10px;
    color: rgba(220,229,255,.62);
  }
  .trash-view-grid {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 8px !important;
  }
  .trash-view-item {
    display: block !important;
    min-height: 66px;
    padding: 10px !important;
    border: 1px solid rgba(156,181,255,.14);
    border-radius: 12px;
    background: rgba(6,16,42,.26);
    overflow: hidden;
  }
  .trash-view-item > span {
    display: block !important;
    margin: 0 0 5px !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    color: #8fe8db !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
  }
  .trash-view-item > b {
    display: block !important;
    width: 100% !important;
    font-size: 12px !important;
    line-height: 1.38 !important;
    font-weight: 750 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
  }
  .trash-view-wide { grid-column: 1 / -1 !important; }
  .trash-view-note {
    padding: 11px;
    border-radius: 12px;
    background: rgba(6,16,42,.26);
    font-size: 12px;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }
  .trash-view-actions {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 8px !important;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important;
    border-top: 1px solid rgba(154,180,255,.18);
    background: rgba(8,20,49,.98);
  }
  .trash-view-actions .ks-btn {
    width: 100% !important;
    min-height: 46px !important;
    border-radius: 13px !important;
    padding: 10px !important;
  }
  .trash-view-actions .ks-btn:last-child:nth-child(3) { grid-column: 1 / -1; }
}
@media (max-width: 360px) {
  .trash-view-grid { grid-template-columns: 1fr !important; }
  .trash-view-wide { grid-column: 1 !important; }
  .trash-view-badges { padding-left: 0; }
}

/* Stock Trash card final polish — keep all primary actions visible on mobile. */
@media (max-width: 767px) {
  .module-stockTrash .stock-trash-card-pro {
    gap: 10px !important;
    padding: 13px !important;
  }
  .module-stockTrash .stock-trash-card-head {
    grid-template-columns: 30px minmax(0,1fr) !important;
    gap: 9px !important;
  }
  .module-stockTrash .stock-trash-status {
    grid-column: 2 !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }
  .module-stockTrash .stock-trash-identity h3 {
    font-size: 15px !important;
    line-height: 1.28 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
  .module-stockTrash .stock-trash-identity p {
    font-size: 11px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
  }
  .module-stockTrash .stock-trash-account-line {
    min-width: 0 !important;
    padding: 10px 11px !important;
    border: 1px solid rgba(143,232,219,.18) !important;
    border-radius: 13px !important;
    background: rgba(143,232,219,.055) !important;
  }
  .module-stockTrash .stock-trash-account-line span {
    display: block !important;
    margin-bottom: 4px !important;
    color: #8fe8db !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: .11em !important;
    text-transform: uppercase !important;
  }
  .module-stockTrash .stock-trash-account-line b {
    display: block !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
  .module-stockTrash .stock-trash-quick-grid {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 8px !important;
  }
  .module-stockTrash .stock-trash-quick-grid > div {
    min-height: 67px !important;
  }
  .module-stockTrash .stock-trash-quick-grid b {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
  .module-stockTrash .stock-trash-actions-pro {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 8px !important;
    padding-top: 9px !important;
    border-top: 1px solid rgba(151,178,255,.14) !important;
  }
  .module-stockTrash .stock-trash-actions-pro .ks-btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 9px 8px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    white-space: normal !important;
  }
  .module-stockTrash .stock-trash-actions-pro .ks-danger {
    grid-column: 1 / -1 !important;
  }
}
@media (max-width: 360px) {
  .module-stockTrash .stock-trash-quick-grid { grid-template-columns: 1fr !important; }
  .module-stockTrash .stock-trash-actions-pro { grid-template-columns: 1fr !important; }
  .module-stockTrash .stock-trash-actions-pro .ks-danger { grid-column: 1 !important; }
}

/* Mobile Stock header actions + Available service groups final layout fix */
@media (max-width: 767px) {
  .module-stock .stock-header-primary-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .module-stock .stock-header-action {
    min-width: 0 !important;
    min-height: 52px !important;
    padding: 9px 10px !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    overflow: hidden !important;
  }

  .module-stock .stock-header-action > span:first-child {
    flex: 0 0 32px !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 18px !important;
  }

  .module-stock .stock-header-action > span:last-child {
    display: block !important;
    min-width: 0 !important;
    line-height: 1 !important;
  }

  .module-stock .stock-header-action b {
    display: block !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  .module-stock .stock-header-action small {
    display: none !important;
  }

  .module-stock .stock-service-scroll {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 4px 0 8px !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
  }

  .module-stock .stock-service-card {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 72px !important;
    padding: 11px !important;
    border-radius: 16px !important;
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 9px !important;
    text-align: left !important;
    overflow: hidden !important;
  }

  .module-stock .stock-service-card > span:first-child {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
  }

  .module-stock .stock-service-card > span:last-child {
    min-width: 0 !important;
  }

  .module-stock .stock-service-card b,
  .module-stock .stock-service-card small {
    display: block !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  .module-stock .stock-service-card b {
    font-size: 13px !important;
    line-height: 1.2 !important;
  }

  .module-stock .stock-service-card small {
    margin-top: 3px !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
  }
}

@media (max-width: 340px) {
  .module-stock .stock-header-primary-actions,
  .module-stock .stock-service-scroll {
    grid-template-columns: 1fr !important;
  }
}

/* Final mobile rebuild: Stock header primary actions */
@media (max-width: 767px) {
  .module-stock .stock-header-actions-pro {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 14px 0 0 !important;
  }

  .module-stock .stock-header-actions-pro .stock-header-action {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 92px !important;
    padding: 13px 8px 12px !important;
    margin: 0 !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    text-align: center !important;
    white-space: normal !important;
    box-shadow: 0 12px 28px rgba(0, 154, 255, .18), inset 0 1px 0 rgba(255,255,255,.2) !important;
  }

  .module-stock .stock-header-actions-pro .stock-header-action::after {
    content: "" !important;
    position: absolute !important;
    inset: 1px !important;
    border-radius: 19px !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    pointer-events: none !important;
  }

  .module-stock .stock-header-actions-pro .stock-header-action-icon {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.14) !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    font-size: 25px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
  }

  .module-stock .stock-header-actions-pro .stock-header-action-label {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    font-size: 14px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    letter-spacing: -.01em !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }
}

@media (max-width: 350px) {
  .module-stock .stock-header-actions-pro { gap: 9px !important; }
  .module-stock .stock-header-actions-pro .stock-header-action {
    min-height: 84px !important;
    padding-inline: 5px !important;
  }
  .module-stock .stock-header-actions-pro .stock-header-action-label {
    font-size: 12px !important;
  }
}


/* v1.1.4 — Family members fresh premium rebuild */
.module-family .family-members-v2-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px;align-items:start}
.module-family .member-pro-card{position:relative;overflow:hidden;isolation:isolate;border:1px solid rgba(255,255,255,.11)!important;border-radius:24px!important;padding:20px!important;background:linear-gradient(155deg,rgba(18,28,48,.98),rgba(8,14,27,.99))!important;box-shadow:0 18px 50px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.06)!important;min-width:0}
.module-family .member-pro-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 92% 4%,rgba(80,120,255,.16),transparent 34%);pointer-events:none;z-index:-1}.module-family .member-pro-accent{position:absolute;inset:0 auto 0 0;width:4px;background:linear-gradient(#6ea8ff,#8a63ff,#42d7c6)}
.module-family .member-pro-head{display:grid;grid-template-columns:58px minmax(0,1fr) auto;gap:14px;align-items:center;margin-bottom:17px}.module-family .member-pro-avatar{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:linear-gradient(145deg,#4058e8,#7b4fe2);border:1px solid rgba(255,255,255,.22);box-shadow:0 10px 24px rgba(72,80,230,.32);font-size:20px;font-weight:900;color:#fff}.module-family .member-pro-identity{min-width:0}.module-family .member-pro-identity h3{margin:0;color:#fff;font-size:20px;line-height:1.18;font-weight:850;overflow-wrap:anywhere}.module-family .member-pro-identity p{margin:6px 0 0;color:#9eabc2;font-size:13px;line-height:1.4;overflow-wrap:anywhere}.module-family .member-pro-status{align-self:start}
.module-family .member-pro-email,.module-family .member-pro-password,.module-family .member-pro-grid>div{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035);border-radius:16px}.module-family .member-pro-email{padding:14px 15px;margin-bottom:12px}.module-family .member-pro-email span,.module-family .member-pro-password>span,.module-family .member-pro-grid span{display:block;color:#7f8ba3;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;margin-bottom:7px}.module-family .member-pro-email b{display:block;color:#f3f6fb;font-size:15px;line-height:1.5;overflow-wrap:anywhere;word-break:break-word}
.module-family .member-pro-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:12px}.module-family .member-pro-grid>div{padding:13px 14px;min-width:0}.module-family .member-pro-grid b{display:block;color:#e9edf5;font-size:14px;line-height:1.45;overflow-wrap:anywhere}.module-family .member-pro-password{padding:13px 14px;margin-bottom:14px}.module-family .member-pro-password>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;align-items:center}.module-family .member-pro-password input{width:100%;min-width:0;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:rgba(3,8,18,.55);color:#fff;padding:0 12px;font:700 14px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace}.module-family .member-pro-password button{height:44px;padding:0 15px;border-radius:12px;border:1px solid rgba(110,168,255,.32);background:rgba(55,105,210,.18);color:#a9c7ff;font-weight:800}
.module-family .member-pro-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.module-family .member-pro-actions .ks-btn{width:100%!important;min-width:0!important;min-height:44px!important;padding:10px 7px!important;border-radius:13px!important;font-size:13px!important}.module-family .family-inline-form-card{border-radius:26px!important;border:1px solid rgba(255,255,255,.12)!important;background:linear-gradient(155deg,rgba(17,27,47,.99),rgba(7,13,25,.99))!important;box-shadow:0 24px 70px rgba(0,0,0,.4)!important;animation:familyFreshIn .2s ease-out both}.module-family .family-inline-form-head{padding-bottom:16px!important;border-bottom:1px solid rgba(255,255,255,.08)}.module-family .family-inline-form-head h2{font-size:24px!important}.module-family .family-inline-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important}.module-family .family-inline-actions .ks-btn{width:100%!important;min-height:50px!important;border-radius:15px!important}@keyframes familyFreshIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
@media(max-width:767px){.module-family .family-members-v2-list{grid-template-columns:1fr;gap:14px}.module-family .member-pro-card{padding:16px!important;border-radius:21px!important}.module-family .member-pro-head{grid-template-columns:52px minmax(0,1fr);gap:12px}.module-family .member-pro-avatar{width:52px;height:52px;border-radius:16px}.module-family .member-pro-status{grid-column:1/-1;justify-self:start}.module-family .member-pro-grid{grid-template-columns:1fr}.module-family .member-pro-actions{grid-template-columns:repeat(2,minmax(0,1fr))}.module-family .member-pro-actions .ks-btn{min-height:48px!important}.module-family .family-inline-form-card{padding:16px!important;border-radius:22px!important}.module-family .family-inline-actions{grid-template-columns:1fr!important}.module-family .family-member-form input,.module-family .family-member-form select,.module-family .family-member-form textarea,.module-family .family-form input,.module-family .family-form select,.module-family .family-form textarea{font-size:16px!important;min-height:50px!important}}

/* Family member detail view v3 — clean rebuild */
.family-member-detail-v3 {
  width: min(100%, 430px);
  margin: 0 auto;
  display: grid;
  gap: 12px;
  color: #f8fafc;
}
.family-member-detail-v3__hero {
  min-width: 0;
  padding: 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(96,165,250,.24);
  border-radius: 18px;
  background: linear-gradient(145deg,rgba(30,64,175,.94),rgba(49,46,129,.96));
  box-shadow: 0 16px 36px rgba(2,6,23,.3);
}
.family-member-detail-v3__identity {
  min-width: 0;
  display: grid;
  grid-template-columns: 56px minmax(0,1fr);
  gap: 12px;
  align-items: center;
}
.family-member-detail-v3__avatar {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .02em;
}
.family-member-detail-v3__title { min-width: 0; }
.family-member-detail-v3__title h2 {
  margin: 3px 0 4px;
  color: #fff;
  font-size: 18px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.family-member-detail-v3__title p {
  margin: 0;
  color: rgba(255,255,255,.78);
  font-size: 14px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.family-member-detail-v3__status { flex: 0 0 auto; }
.family-member-detail-v3__body {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px;
}
.family-member-detail-v3__card {
  min-width: 0;
  min-height: 82px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 16px;
  background: linear-gradient(155deg,rgba(15,23,42,.96),rgba(30,41,59,.9));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.family-member-detail-v3__card--full { grid-column: 1 / -1; min-height: auto; }
.family-member-detail-v3__label {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.family-member-detail-v3__value {
  min-width: 0;
  color: #f8fafc;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 800;
}
.family-member-detail-v3__value--wrap {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.family-member-detail-v3__password-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.family-member-detail-v3__show {
  min-width: 62px;
  height: 44px;
  padding: 0 13px;
  border: 1px solid rgba(96,165,250,.35);
  border-radius: 12px;
  background: rgba(37,99,235,.18);
  color: #dbeafe;
  font-weight: 850;
  cursor: pointer;
}
.family-member-detail-v3__actions {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 16px;
  background: rgba(15,23,42,.94);
}
.family-member-detail-v3__actions .ks-btn {
  width: 100%;
  min-width: 0;
  height: 46px;
  padding: 0 10px;
  border-radius: 13px;
  font-size: 14px;
  font-weight: 850;
}

/* =========================================================
   v1.1.6 — Admin Spending + Deleted Spending fresh full-screen UI
   ========================================================= */
.module-adminSpending,.module-deletedSpending{min-height:calc(100dvh - 28px)}
.module-adminSpending #pageBody,.module-deletedSpending #pageBody{gap:18px}
.module-adminSpending .page-hero,.module-deletedSpending .page-hero{border:1px solid rgba(125,151,255,.23);background:linear-gradient(135deg,rgba(16,31,63,.96),rgba(8,19,42,.96));box-shadow:0 18px 50px rgba(0,0,0,.24)}
.spending-page-layout,.deleted-spending-layout{display:grid;gap:18px;width:100%}
.spending-entry-panel,.spending-filter-panel,.spending-results-panel,.deleted-spending-intro,.deleted-spending-toolbar{position:relative;overflow:hidden;border:1px solid rgba(130,154,255,.2);border-radius:22px;background:linear-gradient(145deg,rgba(18,36,72,.92),rgba(8,20,43,.94));box-shadow:0 16px 44px rgba(0,0,0,.2)}
.spending-entry-panel,.spending-filter-panel,.deleted-spending-intro{padding:22px}
.spending-entry-panel:before,.spending-filter-panel:before,.deleted-spending-intro:before{content:"";position:absolute;inset:0 auto auto 0;width:100%;height:3px;background:linear-gradient(90deg,#6c63ff,#2fd3c6,transparent)}
.spending-section-heading{display:flex;align-items:flex-start;gap:13px;margin-bottom:20px}.spending-section-heading.compact{align-items:center}.spending-section-heading.compact>div:nth-child(2){flex:1;min-width:0}
.spending-section-heading h2{margin:2px 0 5px;font-size:clamp(20px,2vw,27px);line-height:1.15}.spending-section-heading p{margin:0;color:var(--muted);font-size:14px;line-height:1.55}
.spending-section-icon{display:grid;place-items:center;flex:0 0 46px;width:46px;height:46px;border:1px solid rgba(118,140,255,.35);border-radius:15px;background:linear-gradient(145deg,rgba(108,99,255,.26),rgba(47,211,198,.12));font-size:24px}.spending-section-icon.danger{background:linear-gradient(145deg,rgba(255,82,111,.24),rgba(255,139,88,.1));border-color:rgba(255,100,125,.34)}
.spending-entry-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.spending-purpose-field{grid-column:span 2}.spending-note-field{grid-column:1/-1}
.spending-entry-panel .ks-field,.spending-filter-panel .ks-field{gap:8px}.spending-entry-panel .ks-field>span,.spending-filter-panel .ks-field>span{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#aebcf4}
.spending-entry-panel input,.spending-entry-panel select,.spending-entry-panel textarea,.spending-filter-panel input,.spending-filter-panel select{min-height:50px;border-radius:14px!important;background:rgba(7,18,39,.72)!important;border:1px solid rgba(135,157,255,.22)!important}.spending-entry-panel textarea{min-height:92px;resize:vertical;padding-top:14px}
.spending-form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}.spending-form-actions .ks-btn{min-width:142px;min-height:48px}.spending-save-btn{box-shadow:0 10px 28px rgba(35,205,161,.22)}
.spending-period-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}.spending-period-row .chip{min-height:42px;padding:0 16px;border-radius:12px}.spending-period-row .chip.active{box-shadow:0 8px 24px rgba(93,91,255,.25)}
.spending-filters-fresh{display:grid!important;grid-template-columns:minmax(240px,1.7fr) repeat(6,minmax(125px,1fr))!important;gap:12px!important}.spending-filters-fresh .spending-search-field{grid-column:auto!important}
.module-adminSpending #spendingSummary,.module-deletedSpending #spendingSummary{margin:0}.module-adminSpending #spendingSummary .metric-card,.module-deletedSpending #spendingSummary .metric-card{min-height:132px;border-radius:19px;background:linear-gradient(145deg,rgba(20,40,78,.94),rgba(9,22,47,.96));border:1px solid rgba(127,151,255,.2)}
.spending-results-panel{padding:20px!important}.spending-results-panel .spending-history-title{margin-bottom:16px}.spending-results-panel .spending-history-title h2{font-size:22px}.spending-results-panel .spending-reimbursement-panel{margin-bottom:18px;padding:18px;border:1px solid rgba(127,151,255,.17);border-radius:18px;background:rgba(7,17,38,.45)}
.spending-record-card{border-radius:18px!important;border:1px solid rgba(127,151,255,.2)!important;background:linear-gradient(145deg,rgba(18,37,74,.95),rgba(8,19,42,.97))!important;box-shadow:0 12px 30px rgba(0,0,0,.18)!important}.spending-record-head{align-items:center}.spending-record-amount{font-size:17px}.spending-record-purpose{font-size:16px;font-weight:800;line-height:1.4}.spending-record-grid>div,.spending-record-note{border-radius:13px!important;background:rgba(7,17,37,.55)!important}.spending-record-actions{display:flex;gap:9px}.spending-record-actions .ks-btn{flex:1;min-height:44px}
.deleted-spending-intro{display:flex;align-items:center;justify-content:space-between;gap:18px}.deleted-spending-intro .spending-section-heading{margin:0}.deleted-spending-toolbar{padding:12px}.deleted-spending-toolbar .premium-toolbar{margin:0!important;border:0!important;background:transparent!important}.deleted-spending-toolbar .search-box{min-height:52px}.spending-return-mobile{display:none}.spending-return-btn{white-space:nowrap}
.module-deletedSpending .spending-select-all{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid rgba(127,151,255,.2);border-radius:12px;background:rgba(8,18,39,.58)}
.module-deletedSpending .spending-record-card{border-color:rgba(255,104,125,.2)!important}.module-deletedSpending .spending-record-id{color:#ff9dad}.module-deletedSpending .spending-record-actions .ks-danger{background:linear-gradient(135deg,#e94b67,#b9334d)}

@media (max-width:1180px){.spending-entry-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.spending-filters-fresh{grid-template-columns:repeat(3,minmax(0,1fr))!important}.spending-filters-fresh .spending-search-field{grid-column:span 2!important}}
@media (max-width:767px){
 .module-adminSpending,.module-deletedSpending{min-height:100dvh;margin:-4px -4px 0}.module-adminSpending .page-hero,.module-deletedSpending .page-hero{border-radius:18px;padding:16px!important}.module-adminSpending .hero-actions,.module-deletedSpending .hero-actions{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px}.module-deletedSpending .hero-actions{grid-template-columns:1fr 1fr}.module-deletedSpending .spending-return-btn{display:none}
 .spending-page-layout,.deleted-spending-layout{gap:12px}.spending-entry-panel,.spending-filter-panel,.spending-results-panel,.deleted-spending-intro,.deleted-spending-toolbar{border-radius:18px}.spending-entry-panel,.spending-filter-panel,.deleted-spending-intro{padding:16px}
 .spending-section-heading{gap:10px;margin-bottom:16px}.spending-section-heading.compact{align-items:flex-start;flex-wrap:wrap}.spending-section-heading.compact .ks-btn{width:100%}.spending-section-icon{flex-basis:42px;width:42px;height:42px;border-radius:13px;font-size:21px}.spending-section-heading h2{font-size:20px}.spending-section-heading p{font-size:13px}
 .spending-entry-grid,.spending-filters-fresh{grid-template-columns:1fr!important;gap:11px!important}.spending-purpose-field,.spending-note-field,.spending-filters-fresh .spending-search-field{grid-column:auto!important}.spending-entry-panel input,.spending-entry-panel textarea,.spending-filter-panel input,.spending-filter-panel select{min-height:52px;font-size:16px!important}.spending-entry-panel textarea{min-height:94px}
 .spending-form-actions{display:grid;grid-template-columns:1fr 1fr}.spending-form-actions .ks-btn{min-width:0;width:100%}.spending-period-row{display:grid;grid-template-columns:1fr 1fr}.spending-period-row .chip{width:100%;padding:0 8px}
 .module-adminSpending #spendingSummary .grid-4,.module-deletedSpending #spendingSummary .grid-4{grid-template-columns:1fr 1fr!important}.module-adminSpending #spendingSummary .metric-card,.module-deletedSpending #spendingSummary .metric-card{min-height:112px;padding:14px!important}.module-adminSpending #spendingSummary .metric-card strong,.module-deletedSpending #spendingSummary .metric-card strong{font-size:16px!important;overflow-wrap:anywhere}
 .spending-results-panel{padding:14px!important}.spending-results-panel .spending-reimbursement-panel{padding:13px}.spending-record-card{padding:14px!important}.spending-record-grid{grid-template-columns:1fr 1fr!important}.spending-record-actions{display:grid;grid-template-columns:1fr 1fr}.module-adminSpending .spending-record-actions{grid-template-columns:1fr}
 .deleted-spending-intro{display:block}.deleted-spending-intro .spending-section-heading{margin-bottom:14px}.spending-return-mobile{display:flex;width:100%;min-height:48px}.deleted-spending-toolbar{padding:8px}.deleted-spending-toolbar .search-box{grid-template-columns:auto minmax(0,1fr)!important}
}
@media (max-width:390px){.module-adminSpending #spendingSummary .grid-4,.module-deletedSpending #spendingSummary .grid-4{grid-template-columns:1fr!important}.spending-form-actions,.spending-period-row,.spending-record-grid,.spending-record-actions{grid-template-columns:1fr!important}.module-adminSpending .hero-actions,.module-deletedSpending .hero-actions{grid-template-columns:1fr}.spending-results-panel{padding:12px!important}}

/* =========================================================
   v1.1.7 — Fixed footer for Admin Spending modules
   Keeps the page footer anchored while content remains scrollable.
   ========================================================= */
.module-adminSpending,
.module-deletedSpending{
  display:flex!important;
  flex-direction:column!important;
  width:100%!important;
  min-height:calc(100dvh - var(--topbar-h,76px))!important;
}
.module-adminSpending > #pageBody,
.module-deletedSpending > #pageBody,
.module-adminSpending .page-content,
.module-deletedSpending .page-content,
.module-adminSpending .spending-page-layout,
.module-deletedSpending .deleted-spending-layout{
  flex:1 1 auto!important;
  min-height:0!important;
}
.module-adminSpending .module-footer,
.module-deletedSpending .module-footer,
.module-adminSpending > footer,
.module-deletedSpending > footer{
  position:sticky!important;
  inset:auto 0 0!important;
  z-index:60!important;
  width:100%!important;
  margin-top:auto!important;
  flex:0 0 auto!important;
  background:linear-gradient(180deg,rgba(8,18,39,.88),rgba(8,18,39,.98))!important;
  border-top:1px solid rgba(127,151,255,.20)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
}

@media (max-width:767px){
  .module-adminSpending,
  .module-deletedSpending{
    min-height:100dvh!important;
    padding-bottom:calc(var(--mobile-nav,68px) + var(--mobile-safe-bottom,0px) + 20px)!important;
  }
  body:has(.module-adminSpending) .mobile-nav,
  body:has(.module-deletedSpending) .mobile-nav{
    position:fixed!important;
    left:8px!important;
    right:8px!important;
    bottom:max(8px,var(--mobile-safe-bottom,0px))!important;
    z-index:2500!important;
    transform:none!important;
  }
  body:has(.module-adminSpending) .page-host,
  body:has(.module-deletedSpending) .page-host{
    padding-bottom:calc(var(--mobile-nav,68px) + var(--mobile-safe-bottom,0px) + 30px)!important;
  }
}

/* =========================================================
   v1.1.9 — Stable Settings save bar + Admin Spending footer
   ========================================================= */
body:has(.module-settings) .page-host{
  padding-bottom:110px!important;
}
.module-settings .settings-save-bar{
  position:fixed!important;
  left:calc(var(--sidebar,270px) + 28px)!important;
  right:24px!important;
  bottom:18px!important;
  z-index:2400!important;
  margin:0!important;
  width:auto!important;
  transform:none!important;
}

.module-adminSpending .finance-pager,
.module-deletedSpending .finance-pager{
  position:sticky!important;
  bottom:12px!important;
  z-index:120!important;
  margin-top:18px!important;
  padding:12px 14px!important;
  border:1px solid rgba(127,151,255,.24)!important;
  border-radius:16px!important;
  background:linear-gradient(180deg,rgba(13,27,56,.94),rgba(8,18,39,.98))!important;
  box-shadow:0 14px 36px rgba(0,0,0,.28)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
}
.module-adminSpending .spending-results-panel,
.module-deletedSpending .spending-results-panel{
  padding-bottom:24px!important;
  overflow:visible!important;
}

@media (max-width: 767px){
  body:has(.module-settings) .page-host{
    padding-bottom:calc(var(--mobile-nav,68px) + var(--mobile-safe-bottom,0px) + 118px)!important;
  }
  .module-settings .settings-save-bar{
    left:8px!important;
    right:8px!important;
    bottom:calc(var(--mobile-nav,68px) + var(--mobile-safe-bottom,0px) + 12px)!important;
    padding:10px!important;
    border-radius:16px!important;
  }
  .module-settings .settings-save-bar>div{
    display:none!important;
  }
  .module-settings .settings-save-bar .ks-btn{
    width:100%!important;
    min-height:50px!important;
  }
  .module-adminSpending .finance-pager,
  .module-deletedSpending .finance-pager{
    bottom:calc(var(--mobile-nav,68px) + var(--mobile-safe-bottom,0px) + 12px)!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    margin-inline:-2px!important;
  }
  .module-adminSpending .finance-pager>span,
  .module-deletedSpending .finance-pager>span{
    display:block!important;
    text-align:center!important;
    line-height:1.4!important;
  }
  .module-adminSpending .finance-pager-actions,
  .module-deletedSpending .finance-pager-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
    width:100%!important;
  }
  .module-adminSpending .finance-pager-actions .ks-btn,
  .module-deletedSpending .finance-pager-actions .ks-btn{
    width:100%!important;
    min-height:46px!important;
  }
  .module-adminSpending .spending-results-panel,
  .module-deletedSpending .spending-results-panel{
    padding-bottom:calc(var(--mobile-nav,68px) + 118px)!important;
  }
}

@media (min-width:768px) and (max-width:1100px){
  .module-settings .settings-save-bar{
    left:24px!important;
  }
}


/* v1.1.10 — Telegram Control Center + Reports / Export rebuild */
.module-telegram .telegram-control-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px;border-radius:22px;background:linear-gradient(135deg,rgba(27,42,92,.92),rgba(32,20,82,.9));border:1px solid rgba(132,155,255,.28)}
.telegram-main-nav,.reports-main-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:8px;border:1px solid var(--line);background:rgba(13,25,61,.72);border-radius:18px;position:sticky;top:10px;z-index:18;backdrop-filter:blur(18px)}
.telegram-main-tab,.reports-main-tab{min-height:48px;border:0;border-radius:13px;background:transparent;color:var(--muted);font-weight:800;cursor:pointer;transition:.2s ease}
.telegram-main-tab:hover,.reports-main-tab:hover{background:rgba(255,255,255,.06);color:var(--text)}
.telegram-main-tab.active,.reports-main-tab.active{background:linear-gradient(135deg,#6d5dfc,#20c8d8);color:#fff;box-shadow:0 10px 24px rgba(66,85,255,.24)}
.telegram-sub-nav{display:flex;gap:8px;overflow:auto;padding:4px 2px 2px;scrollbar-width:none}
.telegram-sub-nav::-webkit-scrollbar{display:none}
.telegram-sub-tab{flex:0 0 auto;min-height:42px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.035);color:var(--muted);font-weight:750}
.telegram-sub-tab.active{color:#fff;border-color:rgba(77,229,210,.5);background:rgba(34,211,196,.16)}
.module-telegram #telegramHost{margin-top:4px}
.module-telegram .telegram-grid{gap:14px}
.module-telegram .telegram-kpi{min-height:142px;border-radius:18px;padding:16px}
.module-reports .finance-tabs{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:8px;border-radius:18px;background:rgba(13,25,61,.72);border:1px solid var(--line);position:sticky;top:10px;z-index:17;backdrop-filter:blur(18px)}
.module-reports .reports-main-tab{width:100%}
.module-reports .finance-filter-card{border-radius:22px;padding:20px}
.module-reports .finance-report-summary{display:grid;gap:14px}
.module-reports .finance-section-panel{scroll-margin-top:90px}
@media(max-width:767px){
 .module-telegram .telegram-control-hero{padding:17px;align-items:flex-start;flex-direction:column;border-radius:18px}
 .module-telegram .telegram-control-hero h2{font-size:20px;line-height:1.2}
 .telegram-main-nav,.reports-main-nav,.module-reports .finance-tabs{grid-template-columns:repeat(2,minmax(0,1fr));position:sticky;top:6px;gap:7px;padding:7px;border-radius:16px}
 .telegram-main-tab,.reports-main-tab{min-height:44px;font-size:13px;padding:6px 8px}
 .telegram-sub-nav{margin-top:-2px;padding-bottom:6px}
 .telegram-sub-tab{min-height:40px;font-size:13px}
 .module-telegram .telegram-grid,.module-telegram .telegram-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .module-telegram .telegram-kpi{min-height:128px;padding:13px}
 .module-telegram .telegram-form-grid{grid-template-columns:1fr!important}
 .module-telegram .telegram-table-wrap{overflow:visible}
 .module-telegram .telegram-table{min-width:0}
 .module-reports .finance-filter-card{padding:15px;border-radius:18px}
 .module-reports .report-filter-grid{grid-template-columns:1fr 1fr!important}
 .module-reports .finance-section-panel{border-radius:18px}
}
@media(max-width:390px){
 .module-telegram .telegram-grid,.module-telegram .telegram-overview-grid{grid-template-columns:1fr!important}
 .module-reports .report-filter-grid{grid-template-columns:1fr!important}
}

/* v1.1.11 — keep Telegram primary navigation stable while page scrolls */
.module-telegram .telegram-main-nav{
  position:sticky!important;
  top:8px!important;
  z-index:120!important;
  align-self:start!important;
  transform:none!important;
  translate:none!important;
  margin-inline:0!important;
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  isolation:isolate;
  contain:paint;
  box-shadow:0 12px 30px rgba(2,8,28,.28);
}
.module-telegram .telegram-main-tab{
  transform:none!important;
  translate:none!important;
  animation:none!important;
}
@media(max-width:767px){
  .module-telegram .telegram-main-nav{
    top:6px!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
    padding:7px!important;
    border-radius:16px!important;
  }
  .module-telegram #telegramHost{
    padding-bottom:calc(var(--mobile-nav,68px) + 24px)!important;
  }
}

/* v1.1.12 — Telegram navigation dock: fixed, stable, and non-overlapping */
.module-telegram{
  --telegram-nav-h:66px;
}
.module-telegram .telegram-main-nav{
  contain:none!important;
  position:sticky!important;
  top:10px!important;
  z-index:180!important;
  margin:0!important;
  transform:none!important;
  translate:none!important;
  will-change:auto!important;
}
@media (max-width:767px){
  .module-telegram{
    --telegram-nav-h:112px;
  }
  .module-telegram .telegram-main-nav{
    position:fixed!important;
    top:calc(env(safe-area-inset-top, 0px) + 76px)!important;
    left:12px!important;
    right:12px!important;
    width:auto!important;
    max-width:none!important;
    margin:0!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
    padding:7px!important;
    border-radius:17px!important;
    z-index:500!important;
    background:rgba(10,23,58,.96)!important;
    -webkit-backdrop-filter:blur(22px)!important;
    backdrop-filter:blur(22px)!important;
    box-shadow:0 18px 44px rgba(1,7,25,.48)!important;
  }
  .module-telegram .telegram-main-tab{
    min-height:44px!important;
    font-size:13px!important;
    line-height:1.2!important;
    padding:7px 8px!important;
    white-space:normal!important;
  }
  .module-telegram .telegram-control-hero{
    margin-top:calc(var(--telegram-nav-h) + 12px)!important;
  }
  .module-telegram .telegram-sub-nav{
    position:relative!important;
    z-index:1!important;
  }
}
@media (max-width:390px){
  .module-telegram .telegram-main-nav{
    left:10px!important;
    right:10px!important;
    top:calc(env(safe-area-inset-top, 0px) + 72px)!important;
  }
  .module-telegram .telegram-main-tab{
    font-size:12.5px!important;
    padding-inline:6px!important;
  }
}

/* v1.1.13 — Telegram mobile repair (Overview, Customers/Gifts, Settings only) */
@media (max-width: 767px){
  .module-telegram{
    --telegram-nav-h: auto;
    overflow-x: clip!important;
  }
  /* Keep the navigation stable in document flow; never cover the hero/content. */
  .module-telegram .telegram-main-nav{
    position:sticky!important;
    top:calc(env(safe-area-inset-top, 0px) + 66px)!important;
    left:auto!important;
    right:auto!important;
    width:100%!important;
    max-width:100%!important;
    margin:10px 0 8px!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
    padding:7px!important;
    border-radius:16px!important;
    z-index:90!important;
    background:rgba(9,22,55,.97)!important;
    box-shadow:0 12px 30px rgba(1,7,25,.38)!important;
  }
  .module-telegram .telegram-control-hero{
    margin-top:0!important;
    min-height:0!important;
    padding:16px!important;
    gap:10px!important;
  }
  .module-telegram .telegram-control-hero h2{
    margin:4px 0 6px!important;
    font-size:20px!important;
    line-height:1.18!important;
    overflow-wrap:anywhere;
  }
  .module-telegram .telegram-control-hero p{
    margin:0!important;
    font-size:13px!important;
    line-height:1.5!important;
  }
  .module-telegram .telegram-control-live{
    min-height:42px!important;
    padding:10px 12px!important;
    font-size:12px!important;
  }
  .module-telegram .telegram-main-tab{
    min-height:43px!important;
    font-size:12.5px!important;
    line-height:1.2!important;
    padding:7px 6px!important;
    white-space:normal!important;
  }
  .module-telegram .telegram-sub-nav{
    position:sticky!important;
    top:calc(env(safe-area-inset-top, 0px) + 172px)!important;
    z-index:82!important;
    margin:0 0 10px!important;
    padding:7px!important;
    border:1px solid var(--line)!important;
    border-radius:14px!important;
    background:rgba(9,22,55,.95)!important;
    backdrop-filter:blur(18px)!important;
  }
  .module-telegram #telegramHost{
    margin-top:0!important;
    padding-bottom:calc(var(--mobile-nav,68px) + 34px)!important;
  }

  /* Overview: readable cards and no narrow multi-column text. */
  .module-telegram .telegram-overview-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }
  .module-telegram .telegram-kpi{
    min-width:0!important;
    min-height:118px!important;
    padding:13px!important;
    border-radius:16px!important;
    overflow:hidden!important;
  }
  .module-telegram .telegram-kpi strong{
    font-size:clamp(22px,7vw,30px)!important;
    line-height:1.05!important;
    overflow-wrap:anywhere!important;
    word-break:break-word!important;
  }
  .module-telegram .telegram-kpi small,
  .module-telegram .telegram-kpi .mini-label{
    display:block!important;
    max-width:100%!important;
    font-size:11.5px!important;
    line-height:1.35!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }

  /* Health/System/Cloudflare cards: one column on phones, no crushed URLs. */
  .module-telegram .telegram-accordion{
    border-radius:17px!important;
    overflow:hidden!important;
  }
  .module-telegram .telegram-accordion>summary{
    padding:15px!important;
    gap:10px!important;
  }
  .module-telegram .telegram-accordion>summary h2{
    font-size:17px!important;
    line-height:1.25!important;
  }
  .module-telegram .telegram-accordion>summary p{
    font-size:12px!important;
    line-height:1.45!important;
  }
  .module-telegram .telegram-accordion-body{
    padding:0 14px 15px!important;
  }
  .module-telegram .telegram-status-grid,
  .module-telegram .telegram-security-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
  }
  .module-telegram .telegram-status,
  .module-telegram .telegram-security-grid>article{
    min-width:0!important;
    min-height:0!important;
    padding:12px!important;
  }
  .module-telegram .telegram-status strong,
  .module-telegram .telegram-status small,
  .module-telegram .telegram-security-grid strong,
  .module-telegram .telegram-security-grid p,
  .module-telegram code{
    max-width:100%!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    word-break:break-word!important;
  }
  .module-telegram .telegram-copy-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:8px!important;
    align-items:center!important;
    padding:10px!important;
  }
  .module-telegram .telegram-copy-row code,
  .module-telegram .telegram-copy-row input{
    min-width:0!important;
    width:100%!important;
    font-size:12px!important;
  }

  /* Settings/appearance toggles: clean two-column grid, single column on very small phones. */
  .module-telegram .telegram-setting-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
  }
  .module-telegram .telegram-setting-toggle{
    min-width:0!important;
    min-height:72px!important;
    padding:11px!important;
    align-items:flex-start!important;
  }
  .module-telegram .telegram-setting-toggle b,
  .module-telegram .telegram-setting-toggle small{
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
  }
  .module-telegram .telegram-sticky-actions{
    position:static!important;
    width:100%!important;
    padding:10px 0 0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  .module-telegram .telegram-sticky-actions .ks-btn{
    width:100%!important;
    min-height:46px!important;
  }

  /* Gift manager: cards and actions are full-width, aligned and readable. */
  .module-telegram .telegram-gift-toolbar{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .module-telegram .telegram-gift-toolbar .telegram-gift-search{
    grid-column:1/-1!important;
    width:100%!important;
  }
  .module-telegram .telegram-table-wrap,
  .module-telegram .telegram-table,
  .module-telegram .telegram-table tbody{
    width:100%!important;
    min-width:0!important;
  }
  .module-telegram .telegram-table tr{
    grid-template-columns:1fr!important;
    gap:8px!important;
    padding:13px!important;
    border-radius:16px!important;
  }
  .module-telegram .telegram-table td{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    padding:3px 0!important;
    overflow-wrap:anywhere!important;
  }
  .module-telegram .telegram-table .telegram-actions,
  .module-telegram .telegram-table td.telegram-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%!important;
  }
  .module-telegram .telegram-table .telegram-actions .ks-btn,
  .module-telegram .telegram-table td.telegram-actions .ks-btn{
    width:100%!important;
    min-width:0!important;
    min-height:43px!important;
  }
}
@media (max-width:390px){
  .module-telegram .telegram-overview-grid,
  .module-telegram .telegram-setting-grid{
    grid-template-columns:1fr!important;
  }
  .module-telegram .telegram-gift-toolbar{
    grid-template-columns:1fr!important;
  }
  .module-telegram .telegram-gift-toolbar .telegram-gift-search{
    grid-column:auto!important;
  }
}

/* v1.1.14 — Telegram Messaging/Broadcast mobile rebuild */
@media (max-width: 767px){
  .module-telegram .telegram-sub-nav{
    position:relative!important;
    top:auto!important;
    z-index:4!important;
  }
  .module-telegram .telegram-accordion-body,
  .module-telegram .telegram-form-grid,
  .module-telegram .telegram-upload-row,
  .module-telegram .telegram-upload-preview,
  .module-telegram .telegram-broadcast-flow,
  .module-telegram .telegram-message-preview{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
  .module-telegram .telegram-form-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:12px!important;
  }
  .module-telegram .telegram-form-grid .ks-field,
  .module-telegram .telegram-form-grid .wide{
    grid-column:1!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
  }
  .module-telegram .telegram-form-grid input,
  .module-telegram .telegram-form-grid select,
  .module-telegram .telegram-form-grid textarea{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
    font-size:16px!important;
  }
  .module-telegram .telegram-form-grid textarea{
    min-height:132px!important;
    resize:vertical!important;
  }
  .module-telegram .telegram-upload-row{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    align-items:stretch!important;
  }
  .module-telegram .telegram-upload-row .ks-btn{
    width:100%!important;
    min-height:48px!important;
  }
  .module-telegram .telegram-upload-row small{
    display:block!important;
    min-width:0!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
  .module-telegram .telegram-upload-preview{
    display:grid!important;
    grid-template-columns:76px minmax(0,1fr)!important;
    gap:12px!important;
    align-items:center!important;
    padding:12px!important;
    overflow:hidden!important;
  }
  .module-telegram .telegram-upload-preview img{
    width:76px!important;
    height:76px!important;
    border-radius:12px!important;
  }
  .module-telegram .telegram-upload-preview>div{
    min-width:0!important;
  }
  .module-telegram .telegram-upload-preview b,
  .module-telegram .telegram-upload-preview small{
    display:block!important;
    max-width:100%!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    word-break:break-word!important;
  }
  .module-telegram .telegram-upload-preview .ks-btn{
    grid-column:1/-1!important;
    width:100%!important;
    min-height:44px!important;
  }
  .module-telegram .telegram-broadcast-flow{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
    margin-top:14px!important;
  }
  .module-telegram .telegram-broadcast-flow .ks-btn{
    width:100%!important;
    min-width:0!important;
    min-height:46px!important;
    padding:9px 8px!important;
    white-space:normal!important;
    line-height:1.2!important;
  }
  .module-telegram .telegram-message-preview{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    padding:12px!important;
    overflow:hidden!important;
  }
  .module-telegram .telegram-message-preview img{
    width:100%!important;
    max-height:220px!important;
    object-fit:cover!important;
    border-radius:13px!important;
  }
  .module-telegram .telegram-message-preview p,
  .module-telegram .telegram-message-preview small{
    max-width:100%!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    word-break:break-word!important;
  }
  .module-telegram #tgBroadcastImagePreview,
  .module-telegram #tgBroadcastPreview{
    margin-inline:0!important;
  }
}
@media (max-width: 390px){
  .module-telegram .telegram-broadcast-flow{
    grid-template-columns:1fr!important;
  }
}

/* v1.1.15 — final Telegram mobile navigation and Broadcast layout repair */
@media (max-width: 767px){
  /* Primary tabs stay visible without leaving document flow or covering content. */
  .module-telegram .telegram-main-nav{
    position:sticky!important;
    top:calc(env(safe-area-inset-top, 0px) + 64px)!important;
    left:auto!important;
    right:auto!important;
    width:100%!important;
    margin:8px 0 10px!important;
    z-index:60!important;
    contain:none!important;
    isolation:isolate!important;
  }

  /* Secondary tabs must remain in normal flow. Two sticky rows caused the overlap. */
  .module-telegram .telegram-sub-nav{
    position:relative!important;
    top:auto!important;
    z-index:2!important;
    margin:0 0 12px!important;
    padding:7px!important;
  }

  .module-telegram .telegram-control-hero,
  .module-telegram #telegramHost,
  .module-telegram .telegram-accordion,
  .module-telegram .telegram-accordion-body{
    position:relative!important;
    z-index:1!important;
    margin-top:0!important;
  }

  /* Broadcast editor: one clean column with every field visibly separated. */
  .module-telegram #telegramHost .telegram-form-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:14px!important;
  }
  .module-telegram #telegramHost .telegram-form-grid > .ks-field,
  .module-telegram #telegramHost .telegram-form-grid > .ks-field.wide{
    display:flex!important;
    flex-direction:column!important;
    gap:7px!important;
    grid-column:1/-1!important;
    width:100%!important;
    min-width:0!important;
    padding:0!important;
    margin:0!important;
  }
  .module-telegram #telegramHost .telegram-form-grid > .ks-field > input,
  .module-telegram #telegramHost .telegram-form-grid > .ks-field > select,
  .module-telegram #telegramHost .telegram-form-grid > .ks-field > textarea{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    min-height:50px!important;
    box-sizing:border-box!important;
    margin:0!important;
  }
  .module-telegram #telegramHost .telegram-form-grid > .ks-field > textarea{
    min-height:140px!important;
  }

  .module-telegram .telegram-upload-preview{
    grid-template-columns:72px minmax(0,1fr)!important;
    padding:12px!important;
    gap:11px!important;
  }
  .module-telegram .telegram-upload-preview .ks-btn{
    grid-column:1/-1!important;
  }

  .module-telegram .telegram-broadcast-flow{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
    width:100%!important;
  }
  .module-telegram .telegram-broadcast-flow .ks-btn{
    width:100%!important;
    min-width:0!important;
    min-height:46px!important;
  }

  .module-telegram .telegram-accordion,
  .module-telegram .telegram-accordion-body{
    overflow:visible!important;
  }
}
@media (max-width: 390px){
  .module-telegram .telegram-broadcast-flow{
    grid-template-columns:1fr!important;
  }
}
/* ===== v1.1.16 Telegram Control Center — full clean rebuild ===== */
.module-telegram .tgx,
.module-telegram .tgx *{box-sizing:border-box;min-width:0}
.module-telegram .tgx{--tg-bg:#071326;--tg-card:rgba(12,28,55,.88);--tg-card2:rgba(18,39,75,.72);--tg-line:rgba(148,183,255,.18);--tg-text:#f8fbff;--tg-muted:#9eb0ca;--tg-cyan:#20d9ff;--tg-violet:#7658ff;display:flex;flex-direction:column;gap:14px;width:100%;max-width:100%;overflow:visible;padding-bottom:110px;color:var(--tg-text)}
.module-telegram .tgx .ks-card{background:linear-gradient(145deg,var(--tg-card),rgba(7,18,38,.94));border:1px solid var(--tg-line);border-radius:20px;box-shadow:0 18px 45px rgba(0,0,0,.18)}
.module-telegram .tgx .telegram-control-hero{position:relative!important;inset:auto!important;z-index:1!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:16px!important;align-items:center!important;margin:0!important;padding:20px!important;overflow:hidden!important}
.module-telegram .tgx .telegram-control-hero:after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;right:-90px;top:-120px;background:radial-gradient(circle,rgba(32,217,255,.24),transparent 68%);pointer-events:none}
.module-telegram .tgx .telegram-control-hero h2{margin:5px 0 8px!important;font-size:clamp(22px,4vw,30px)!important;line-height:1.1!important;overflow-wrap:anywhere}
.module-telegram .tgx .telegram-control-hero p{margin:0!important;color:var(--tg-muted)!important;line-height:1.55!important;overflow-wrap:anywhere}
.module-telegram .tgx .telegram-premium-badge{display:inline-flex!important;width:max-content!important;padding:6px 10px!important;border-radius:999px!important;background:rgba(32,217,255,.12)!important;border:1px solid rgba(32,217,255,.28)!important;color:#79ecff!important;font-size:10px!important;font-weight:900!important;letter-spacing:.14em!important}
.module-telegram .tgx .telegram-control-live{position:relative!important;z-index:1!important;display:flex!important;align-items:center!important;gap:8px!important;width:auto!important;max-width:100%!important;padding:10px 13px!important;border-radius:14px!important;background:rgba(15,34,66,.78)!important;border:1px solid var(--tg-line)!important;color:#cdefff!important;white-space:normal!important;overflow-wrap:anywhere}
.module-telegram .tgx .telegram-main-nav,.module-telegram .tgx .telegram-sub-nav{position:static!important;inset:auto!important;transform:none!important;z-index:1!important;display:grid!important;width:100%!important;max-width:100%!important;margin:0!important;padding:7px!important;gap:7px!important;border:1px solid var(--tg-line)!important;border-radius:18px!important;background:rgba(8,20,43,.94)!important;backdrop-filter:none!important;box-shadow:none!important;overflow:visible!important}
.module-telegram .tgx .telegram-main-nav{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.module-telegram .tgx .telegram-sub-nav{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))!important}
.module-telegram .tgx .telegram-main-tab,.module-telegram .tgx .telegram-sub-tab{display:flex!important;align-items:center!important;justify-content:center!important;min-height:46px!important;width:100%!important;max-width:100%!important;padding:9px 8px!important;border:1px solid transparent!important;border-radius:13px!important;background:transparent!important;color:#b9c8dd!important;font-size:13px!important;font-weight:800!important;line-height:1.2!important;text-align:center!important;white-space:normal!important;overflow-wrap:anywhere!important}
.module-telegram .tgx .telegram-main-tab.active,.module-telegram .tgx .telegram-sub-tab.active{background:linear-gradient(135deg,var(--tg-violet),#1acff0)!important;color:#fff!important;box-shadow:0 8px 24px rgba(67,97,238,.25)!important}
.module-telegram .tgx #telegramHost{display:flex!important;flex-direction:column!important;gap:14px!important;width:100%!important;max-width:100%!important;overflow:visible!important;margin:0!important;padding:0!important}
.module-telegram .tgx .telegram-grid,.module-telegram .tgx .telegram-overview-grid,.module-telegram .tgx .telegram-status-grid,.module-telegram .tgx .telegram-runtime-grid,.module-telegram .tgx .telegram-security-grid,.module-telegram .tgx .telegram-connection-grid,.module-telegram .tgx .telegram-form-grid,.module-telegram .tgx .telegram-setting-grid,.module-telegram .tgx .telegram-template-grid,.module-telegram .tgx .telegram-automation-grid,.module-telegram .tgx .telegram-bilingual-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;width:100%!important}
.module-telegram .tgx .telegram-kpi,.module-telegram .tgx .telegram-status,.module-telegram .tgx .telegram-runtime-grid>div,.module-telegram .tgx .telegram-security-grid>article,.module-telegram .tgx .telegram-setting-toggle,.module-telegram .tgx .telegram-template-card,.module-telegram .tgx .telegram-automation-card{min-height:0!important;padding:14px!important;border:1px solid var(--tg-line)!important;border-radius:16px!important;background:var(--tg-card2)!important;overflow:hidden!important}
.module-telegram .tgx .telegram-kpi strong{font-size:24px!important;line-height:1.1!important}.module-telegram .tgx small,.module-telegram .tgx .mini-label{color:var(--tg-muted)!important;line-height:1.45!important;overflow-wrap:anywhere!important}
.module-telegram .tgx .telegram-accordion{position:relative!important;inset:auto!important;margin:0!important;overflow:hidden!important;border-radius:20px!important}
.module-telegram .tgx .telegram-accordion>summary{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;padding:17px!important;cursor:pointer!important;list-style:none!important}.module-telegram .tgx .telegram-accordion>summary::-webkit-details-marker{display:none}.module-telegram .tgx .telegram-accordion>summary h2{margin:0 0 4px!important;font-size:18px!important}.module-telegram .tgx .telegram-accordion>summary p{margin:0!important;color:var(--tg-muted)!important;overflow-wrap:anywhere}
.module-telegram .tgx .telegram-accordion-body{padding:16px!important;border-top:1px solid var(--tg-line)!important;overflow:visible!important}
.module-telegram .tgx .telegram-user-card,.module-telegram .tgx .telegram-connection-card,.module-telegram .tgx .telegram-connection-card-v2,.module-telegram .tgx .telegram-broadcast-card{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:12px!important;padding:15px!important;border:1px solid var(--tg-line)!important;border-radius:17px!important;background:rgba(10,25,51,.78)!important;overflow:hidden!important}
.module-telegram .tgx .telegram-user-main h3,.module-telegram .tgx .telegram-card-title h3{margin:0!important;font-size:16px!important;overflow-wrap:anywhere!important}.module-telegram .tgx .telegram-user-main p{margin:5px 0!important;color:var(--tg-muted)!important;overflow-wrap:anywhere!important;word-break:break-word!important}
.module-telegram .tgx .telegram-actions,.module-telegram .tgx .telegram-broadcast-flow,.module-telegram .tgx .telegram-gift-toolbar{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(110px,1fr))!important;gap:9px!important;width:100%!important;align-items:stretch!important}
.module-telegram .tgx .telegram-actions .ks-btn,.module-telegram .tgx .telegram-broadcast-flow .ks-btn,.module-telegram .tgx .telegram-gift-toolbar .ks-btn{width:100%!important;min-width:0!important;min-height:46px!important;height:auto!important;padding:10px!important;white-space:normal!important;overflow-wrap:anywhere!important}
.module-telegram .tgx .ks-field{display:flex!important;flex-direction:column!important;gap:7px!important;width:100%!important;max-width:100%!important;margin:0!important}.module-telegram .tgx .ks-field.wide{grid-column:1/-1!important}.module-telegram .tgx input,.module-telegram .tgx select,.module-telegram .tgx textarea{width:100%!important;max-width:100%!important;min-height:50px!important;margin:0!important;padding:11px 13px!important;border-radius:13px!important;border:1px solid var(--tg-line)!important;background:rgba(7,18,38,.86)!important;color:var(--tg-text)!important;outline:none!important;overflow-wrap:anywhere!important}.module-telegram .tgx textarea{min-height:130px!important;resize:vertical!important}.module-telegram .tgx input:focus,.module-telegram .tgx select:focus,.module-telegram .tgx textarea:focus{border-color:rgba(32,217,255,.7)!important;box-shadow:0 0 0 3px rgba(32,217,255,.1)!important}
.module-telegram .tgx code,.module-telegram .tgx pre,.module-telegram .tgx a,.module-telegram .tgx .telegram-copy-row code{max-width:100%!important;white-space:normal!important;overflow-wrap:anywhere!important;word-break:break-word!important}
.module-telegram .tgx .telegram-copy-row,.module-telegram .tgx .telegram-search,.module-telegram .tgx .telegram-upload-row{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:9px!important;width:100%!important;align-items:center!important}.module-telegram .tgx .telegram-copy-row .ks-btn,.module-telegram .tgx .telegram-search .ks-btn,.module-telegram .tgx .telegram-upload-row .ks-btn{min-height:46px!important}
.module-telegram .tgx .telegram-upload-preview{display:grid!important;grid-template-columns:84px minmax(0,1fr) auto!important;gap:12px!important;align-items:center!important;padding:12px!important;border:1px solid var(--tg-line)!important;border-radius:15px!important;background:rgba(7,18,38,.62)!important;overflow:hidden!important}.module-telegram .tgx .telegram-upload-preview img{width:84px!important;height:84px!important;object-fit:cover!important;border-radius:12px!important;max-width:100%!important}
.module-telegram .tgx .telegram-table-wrap{width:100%!important;max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}.module-telegram .tgx .telegram-table{width:100%!important;min-width:680px!important}
.module-telegram .tgx .telegram-setting-toggle{display:flex!important;align-items:flex-start!important;gap:10px!important}.module-telegram .tgx .telegram-setting-toggle input{width:22px!important;height:22px!important;min-height:22px!important;flex:0 0 auto!important;padding:0!important}
.module-telegram .tgx .telegram-sticky-actions{position:static!important;inset:auto!important;transform:none!important;width:100%!important;margin:14px 0 0!important;padding:12px!important;border-radius:16px!important;background:rgba(10,25,51,.88)!important;border:1px solid var(--tg-line)!important;box-shadow:none!important}
@media(max-width:767px){
 .module-telegram .tgx{gap:12px!important;padding-bottom:115px!important}
 .module-telegram .tgx .telegram-control-hero{grid-template-columns:1fr!important;padding:16px!important;border-radius:18px!important}
 .module-telegram .tgx .telegram-control-live{width:100%!important}
 .module-telegram .tgx .telegram-main-nav{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .module-telegram .tgx .telegram-sub-nav{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .module-telegram .tgx .telegram-grid,.module-telegram .tgx .telegram-overview-grid,.module-telegram .tgx .telegram-status-grid,.module-telegram .tgx .telegram-runtime-grid,.module-telegram .tgx .telegram-security-grid,.module-telegram .tgx .telegram-connection-grid,.module-telegram .tgx .telegram-form-grid,.module-telegram .tgx .telegram-setting-grid,.module-telegram .tgx .telegram-template-grid,.module-telegram .tgx .telegram-automation-grid,.module-telegram .tgx .telegram-bilingual-grid{grid-template-columns:1fr!important}
 .module-telegram .tgx .ks-field.wide{grid-column:auto!important}
 .module-telegram .tgx .telegram-copy-row,.module-telegram .tgx .telegram-search,.module-telegram .tgx .telegram-upload-row,.module-telegram .tgx .telegram-upload-preview{grid-template-columns:1fr!important}
 .module-telegram .tgx .telegram-upload-preview img{width:100%!important;height:auto!important;max-height:220px!important}
 .module-telegram .tgx .telegram-actions,.module-telegram .tgx .telegram-broadcast-flow,.module-telegram .tgx .telegram-gift-toolbar{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .module-telegram .tgx .telegram-table{min-width:0!important}.module-telegram .tgx .telegram-table,.module-telegram .tgx .telegram-table tbody,.module-telegram .tgx .telegram-table tr,.module-telegram .tgx .telegram-table td{display:block!important;width:100%!important}.module-telegram .tgx .telegram-table thead{display:none!important}.module-telegram .tgx .telegram-table tr{margin-bottom:12px!important;padding:12px!important;border:1px solid var(--tg-line)!important;border-radius:15px!important;background:rgba(10,25,51,.72)!important}.module-telegram .tgx .telegram-table td{padding:8px 0!important;border:0!important;overflow-wrap:anywhere!important}
}
@media(max-width:390px){.module-telegram .tgx .telegram-main-nav,.module-telegram .tgx .telegram-sub-nav,.module-telegram .tgx .telegram-actions,.module-telegram .tgx .telegram-broadcast-flow,.module-telegram .tgx .telegram-gift-toolbar{grid-template-columns:1fr!important}}

/* v1.1.17 sidebar structure: header and footer stay fixed, only links scroll */
.ks-sidebar { grid-template-rows: auto minmax(0,1fr) auto; }
.ks-sidebar > .side-brand { margin: 0 16px; }
.ks-sidebar > .side-scroll { padding: 0 16px 18px; }


/* Telegram CRM & Gifts UX stabilization — v1.1.18 */
.telegram-phone-line{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin:.55rem 0;color:var(--text-primary,#f5f7fb)}
.telegram-phone-line span{font-size:1.05rem;font-weight:800;letter-spacing:.02em;direction:ltr;unicode-bidi:plaintext}
.telegram-phone-line.is-missing{color:#ffbe55;background:rgba(255,190,85,.1);border:1px solid rgba(255,190,85,.25);padding:.65rem .8rem;border-radius:12px}
.telegram-gift-list-toolbar{display:flex;gap:12px;align-items:end;justify-content:space-between;flex-wrap:wrap}
.telegram-gift-list-toolbar .telegram-gift-search{flex:1;min-width:240px;margin:0}
.telegram-gift-actions{display:flex;gap:8px;align-items:center;flex-wrap:nowrap}
.telegram-action-menu{position:relative}
.telegram-action-menu summary{list-style:none;cursor:pointer;min-width:52px;text-align:center}
.telegram-action-menu summary::-webkit-details-marker{display:none}
.telegram-action-popover{position:absolute;right:0;top:calc(100% + 8px);z-index:30;min-width:150px;padding:8px;border:1px solid rgba(148,163,184,.24);border-radius:14px;background:#111d31;box-shadow:0 18px 45px rgba(0,0,0,.38);display:grid;gap:4px}
.telegram-action-popover button{border:0;background:transparent;color:#e8eef8;text-align:left;padding:10px 12px;border-radius:9px;cursor:pointer;font-weight:700}
.telegram-action-popover button:hover{background:rgba(255,255,255,.08)}
.telegram-action-popover button.danger{color:#ff737d}
.telegram-connection-card-v2 .telegram-actions{align-content:flex-start}
@media(max-width:767px){.telegram-gift-list-toolbar{align-items:stretch}.telegram-gift-list-toolbar .ks-btn{width:100%}.telegram-connection-card-v2 .telegram-actions{display:grid;grid-template-columns:1fr}.telegram-connection-card-v2 .telegram-actions .ks-btn{width:100%}.telegram-phone-line{align-items:flex-start}.telegram-action-popover{right:auto;left:0}}


/* Telegram Gifts clean workspace — v1.1.19 */
.telegram-field-builder-compact{display:grid;gap:10px;margin-top:14px}
.tg-field-builder-head{display:flex;justify-content:space-between;gap:12px;align-items:end;padding:0 2px}
.tg-field-builder-head small{color:var(--muted,#9fb0c7)}
.tg-field-row{display:grid;grid-template-columns:120px minmax(160px,1fr) minmax(160px,1fr) 150px;gap:10px;align-items:end;padding:12px;border:1px solid rgba(148,163,184,.18);border-radius:14px;background:rgba(15,23,42,.28)}
.tg-field-enable{display:flex;align-items:center;gap:9px;min-height:44px;font-weight:700}
.tg-field-enable input{width:20px;height:20px}
.telegram-compact-link-card{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px;border:1px solid rgba(56,189,248,.18);border-radius:16px;background:rgba(14,165,233,.06)}
.telegram-compact-link-card h3{margin:0 0 5px}.telegram-compact-link-card p{margin:0;color:var(--muted,#9fb0c7)}
.telegram-gift-actions{flex-wrap:nowrap}.telegram-action-menu{position:relative}.telegram-action-menu summary{list-style:none;cursor:pointer}.telegram-action-menu summary::-webkit-details-marker{display:none}.telegram-action-popover{position:absolute;right:0;top:calc(100% + 8px);z-index:30;min-width:150px;padding:8px;border:1px solid rgba(148,163,184,.24);border-radius:12px;background:#101d31;box-shadow:0 18px 50px rgba(0,0,0,.35)}.telegram-action-popover button{display:block;width:100%;padding:10px 12px;text-align:left;border:0;border-radius:8px;background:transparent;color:inherit;cursor:pointer}.telegram-action-popover button:hover{background:rgba(148,163,184,.12)}.telegram-action-popover .danger{color:#ff7c89}
@media(max-width:900px){.tg-field-row{grid-template-columns:1fr 1fr}.tg-field-enable,.tg-field-type{grid-column:auto}.telegram-compact-link-card{align-items:stretch;flex-direction:column}}
@media(max-width:620px){.tg-field-row{grid-template-columns:1fr}.tg-field-builder-head{align-items:flex-start;flex-direction:column}.telegram-gift-actions{justify-content:flex-start}}

/* Telegram Gifts professional editor — v1.1.20 */
.module-telegram .tg-gift-editor{display:grid;gap:16px}
.module-telegram .tg-gift-editor-top{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);gap:14px;align-items:stretch}
.module-telegram .tg-gift-editor-top>.ks-field,.module-telegram .tg-gift-master-toggle{margin:0;min-height:84px}
.module-telegram .tg-gift-form-section{padding:18px;border:1px solid rgba(148,163,184,.18);border-radius:18px;background:linear-gradient(180deg,rgba(15,31,54,.82),rgba(10,22,40,.72));box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.module-telegram .tg-gift-form-heading{display:flex;align-items:center;gap:12px;margin-bottom:15px}
.module-telegram .tg-gift-form-heading>span{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;border-radius:11px;background:linear-gradient(135deg,#6c63ff,#18bde6);color:#fff;font-weight:900;box-shadow:0 8px 22px rgba(24,189,230,.2)}
.module-telegram .tg-gift-form-heading b{display:block;font-size:1rem;color:var(--text,#f4f7fb)}
.module-telegram .tg-gift-form-heading small{display:block;margin-top:3px;color:var(--muted,#9fb0c7);line-height:1.4}
.module-telegram .tg-gift-identity-grid{display:grid;grid-template-columns:minmax(0,1fr) 180px minmax(0,1fr) minmax(0,1fr);gap:12px}
.module-telegram .tg-gift-description-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.module-telegram .tg-gift-description-grid textarea{min-height:112px;resize:vertical}
.module-telegram .tg-gift-editor .telegram-field-builder-compact{margin:0}
.module-telegram .tg-gift-editor .tg-field-builder-head{display:none}
.module-telegram .tg-gift-editor .tg-field-row{grid-template-columns:112px minmax(150px,1fr) minmax(150px,1fr) 140px;padding:12px;background:rgba(5,15,29,.38);border-color:rgba(148,163,184,.15)}
.module-telegram .tg-gift-editor .tg-field-enable{padding:0 4px}
.module-telegram .tg-gift-option-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.module-telegram .tg-gift-editor-actions{display:grid;grid-template-columns:minmax(170px,1.1fr) minmax(140px,.8fr) minmax(190px,1fr);gap:10px;position:sticky;bottom:12px;z-index:8;padding:12px;border:1px solid rgba(148,163,184,.18);border-radius:16px;background:rgba(10,23,41,.94);backdrop-filter:blur(14px);box-shadow:0 16px 40px rgba(0,0,0,.28)}
.module-telegram .tg-gift-editor-actions .ks-btn{width:100%;min-height:48px}
.module-telegram .telegram-accordion:has(#tgGiftKey)>summary{background:linear-gradient(90deg,rgba(108,99,255,.08),rgba(24,189,230,.06))}
@media(max-width:1050px){.module-telegram .tg-gift-identity-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.module-telegram .tg-gift-editor .tg-field-row{grid-template-columns:120px 1fr 1fr}.module-telegram .tg-gift-editor .tg-field-type{grid-column:2/4}}
@media(max-width:767px){.module-telegram .tg-gift-editor-top,.module-telegram .tg-gift-description-grid,.module-telegram .tg-gift-option-grid,.module-telegram .tg-gift-identity-grid{grid-template-columns:1fr}.module-telegram .tg-gift-form-section{padding:14px;border-radius:15px}.module-telegram .tg-gift-editor .tg-field-row{grid-template-columns:1fr}.module-telegram .tg-gift-editor .tg-field-type{grid-column:auto}.module-telegram .tg-gift-editor-actions{position:static;grid-template-columns:1fr}.module-telegram .tg-gift-editor-top>.ks-field,.module-telegram .tg-gift-master-toggle{min-height:0}}


/* v1.1.21 — professional requested-field cards and safe gift actions */
.module-telegram .tg-gift-editor .telegram-field-builder-compact{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.module-telegram .tg-gift-editor .tg-field-builder-head{
  grid-column:1/-1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 2px 4px;
}
.module-telegram .tg-gift-editor .tg-field-row{
  display:grid;
  grid-template-columns:88px minmax(0,1fr) minmax(0,1fr);
  gap:12px;
  align-items:end;
  min-width:0;
  padding:16px;
  border-radius:16px;
  overflow:hidden;
}
.module-telegram .tg-gift-editor .tg-field-enable{
  grid-row:1/3;
  align-self:stretch;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:0;
  padding:12px 8px;
  border-radius:13px;
  background:rgba(23,65,126,.34);
  text-align:center;
}
.module-telegram .tg-gift-editor .tg-field-enable input{width:28px;height:28px;flex:0 0 auto}
.module-telegram .tg-gift-editor .tg-field-row .ks-field{min-width:0;margin:0}
.module-telegram .tg-gift-editor .tg-field-row input,
.module-telegram .tg-gift-editor .tg-field-row select{width:100%;min-width:0}
.module-telegram .tg-gift-editor .tg-field-type{grid-column:2/4}
.module-telegram .telegram-action-popover{min-width:190px}
.module-telegram .telegram-action-popover button.danger{font-weight:800}
@media(max-width:1180px){
  .module-telegram .tg-gift-editor .telegram-field-builder-compact{grid-template-columns:1fr}
}
@media(max-width:700px){
  .module-telegram .tg-gift-editor .tg-field-row{grid-template-columns:72px minmax(0,1fr);padding:13px}
  .module-telegram .tg-gift-editor .tg-field-enable{grid-row:1/4}
  .module-telegram .tg-gift-editor .tg-field-type{grid-column:2}
}

/* v1.1.22 — definitive requested-fields layout fix */
.module-telegram .tg-gift-editor .telegram-field-builder-compact{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:14px !important;
  width:100% !important;
  min-width:0 !important;
}
.module-telegram .tg-gift-editor .tg-field-row{
  display:grid !important;
  grid-template-columns:96px minmax(0,1fr) minmax(0,1fr) 150px !important;
  gap:12px !important;
  width:100% !important;
  min-width:0 !important;
  overflow:visible !important;
  align-items:end !important;
}
.module-telegram .tg-gift-editor .tg-field-enable{
  grid-row:auto !important;
  align-self:stretch !important;
}
.module-telegram .tg-gift-editor .tg-field-type{
  grid-column:auto !important;
}
.module-telegram .tg-gift-editor .tg-field-row > *{
  min-width:0 !important;
  max-width:100% !important;
}
.module-telegram .tg-gift-editor .tg-field-row input,
.module-telegram .tg-gift-editor .tg-field-row select{
  box-sizing:border-box !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
}
@media (max-width:1100px){
  .module-telegram .tg-gift-editor .tg-field-row{
    grid-template-columns:84px minmax(0,1fr) minmax(0,1fr) !important;
  }
  .module-telegram .tg-gift-editor .tg-field-type{
    grid-column:2 / 4 !important;
  }
}
@media (max-width:760px){
  .module-telegram .tg-gift-editor .tg-field-row{
    grid-template-columns:1fr !important;
  }
  .module-telegram .tg-gift-editor .tg-field-enable,
  .module-telegram .tg-gift-editor .tg-field-type{
    grid-column:auto !important;
  }
}

/* Active Gifts rebuilt from scratch — v1.1.24 */
.module-telegram .tg-active-gifts-v2{display:grid;gap:16px}
.module-telegram .tg-active-gifts-toolbar{display:flex;align-items:end;justify-content:space-between;gap:14px;flex-wrap:wrap}
.module-telegram .tg-active-gifts-search{flex:1;min-width:260px;margin:0}
.module-telegram .tg-active-gifts-meta{display:flex;align-items:center;gap:12px}
.module-telegram .tg-active-gifts-meta>span{color:var(--muted,#9fb0c7);font-weight:800;white-space:nowrap}
.module-telegram .tg-active-gifts-list{display:grid;gap:12px}
.module-telegram .tg-active-gift-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;padding:16px 18px;border:1px solid rgba(148,163,184,.18);border-radius:16px;background:linear-gradient(180deg,rgba(18,35,58,.88),rgba(11,24,42,.82));box-shadow:0 8px 24px rgba(0,0,0,.12)}
.module-telegram .tg-active-gift-main{display:grid;grid-template-columns:minmax(210px,.9fr) minmax(220px,1.3fr) auto;gap:18px;align-items:center;min-width:0}
.module-telegram .tg-active-gift-title{display:flex;align-items:center;gap:12px;min-width:0}
.module-telegram .tg-active-gift-icon{display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;border-radius:12px;background:rgba(56,189,248,.1);font-size:1.25rem}
.module-telegram .tg-active-gift-title h3{margin:0 0 4px;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.module-telegram .tg-active-gift-title code{color:#8fdcff;background:rgba(56,189,248,.08);border:1px solid rgba(56,189,248,.16);border-radius:7px;padding:2px 7px;font-size:.78rem}
.module-telegram .tg-active-gift-fields{min-width:0}
.module-telegram .tg-active-gift-fields>span{display:block;margin-bottom:4px;color:var(--muted,#9fb0c7);font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.module-telegram .tg-active-gift-fields p{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.module-telegram .tg-active-gift-actions{display:flex;gap:8px;align-items:center}
.module-telegram .tg-active-gift-actions .ks-btn{min-width:96px}
@media(max-width:1100px){.module-telegram .tg-active-gift-card{grid-template-columns:1fr}.module-telegram .tg-active-gift-actions{justify-content:flex-end}.module-telegram .tg-active-gift-main{grid-template-columns:minmax(180px,1fr) minmax(180px,1fr) auto}}
@media(max-width:760px){.module-telegram .tg-active-gifts-toolbar{align-items:stretch}.module-telegram .tg-active-gifts-meta{justify-content:space-between}.module-telegram .tg-active-gift-main{grid-template-columns:1fr}.module-telegram .tg-active-gift-fields p{white-space:normal}.module-telegram .tg-active-gift-status{justify-self:start}.module-telegram .tg-active-gift-actions{display:grid;grid-template-columns:1fr 1fr}.module-telegram .tg-active-gift-actions .ks-btn{width:100%;min-width:0}.module-telegram .tg-active-gift-actions .ks-danger{grid-column:1/-1}}
@media(max-width:420px){.module-telegram .tg-active-gifts-meta{display:grid;grid-template-columns:1fr}.module-telegram .tg-active-gift-actions{grid-template-columns:1fr}.module-telegram .tg-active-gift-actions .ks-danger{grid-column:auto}}

/* Orders card status highlights: expired = red, newest order = yellow. */
.ks-page[data-view="orders"] .premium-order-card.order-card-expired,
.premium-order-card.order-card-expired {
  border-color: rgba(248, 113, 113, .78) !important;
  background: linear-gradient(180deg, rgba(110, 20, 32, .96), rgba(54, 10, 20, .98)) !important;
  box-shadow: 0 18px 48px rgba(239, 68, 68, .24), inset 0 1px 0 rgba(255,255,255,.10) !important;
}
.premium-order-card.order-card-expired .order-service-strip,
.premium-order-card.order-card-expired .meta-item {
  border-color: rgba(254, 202, 202, .24) !important;
  background: rgba(255,255,255,.055) !important;
}
.ks-page[data-view="orders"] .premium-order-card.order-card-latest,
.premium-order-card.order-card-latest {
  border-color: rgba(250, 204, 21, .82) !important;
  background: linear-gradient(180deg, rgba(105, 78, 10, .96), rgba(55, 38, 5, .98)) !important;
  box-shadow: 0 18px 48px rgba(250, 204, 21, .22), inset 0 1px 0 rgba(255,255,255,.10) !important;
}
.premium-order-card.order-card-latest .order-service-strip,
.premium-order-card.order-card-latest .meta-item {
  border-color: rgba(254, 240, 138, .25) !important;
  background: rgba(255,255,255,.055) !important;
}

}
/* Owner-only environment editor */
.env-settings-panel{gap:20px}
.env-settings-notice{display:flex;flex-direction:column;gap:4px;padding:14px 16px;margin-bottom:18px;border:1px solid rgba(34,197,94,.28);border-radius:14px;background:rgba(34,197,94,.08)}
.env-settings-notice span{font-size:12px;color:var(--muted)}
.env-settings-notice.is-danger{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.08)}
.env-settings-group{padding-top:4px;margin-top:14px;border-top:1px solid rgba(148,163,184,.2)}
.env-settings-group h4{margin:14px 0 12px;font-size:14px;letter-spacing:.02em}
.env-setting-field small{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;color:var(--muted)}
.env-setting-field em{display:flex;align-items:center;gap:7px;font-size:11px;font-style:normal;color:var(--muted)}
.env-setting-field em input{width:auto;margin:0}
.env-configured-dot{display:inline-block;width:8px;height:8px;margin-inline-start:5px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.14)}
.env-settings-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:22px;padding-top:16px;border-top:1px solid rgba(148,163,184,.2)}
.env-settings-actions span{font-size:12px;color:var(--muted)}
@media(max-width:700px){.env-settings-actions{align-items:stretch;flex-direction:column}.env-settings-actions .ks-btn{width:100%}}

/* Telegram overview control center */
.tg-overview-control{margin-top:18px;padding:18px;border:1px solid rgba(96,165,250,.22);border-radius:18px;background:linear-gradient(145deg,rgba(59,130,246,.08),rgba(16,185,129,.05))}
.tg-overview-control-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}
.tg-overview-control-head h3{margin:0 0 3px;font-size:17px}
.tg-overview-control-head p{margin:0;color:var(--muted);font-size:12px}
.tg-control-form{align-items:end}
.tg-control-form .ks-field{min-width:0}
.tg-control-actions{display:grid;grid-template-columns:1.35fr 1fr 1fr .8fr;gap:10px;margin-top:16px}
.tg-control-actions .ks-btn{width:100%;min-height:44px}
.tg-webhook-repair{margin-top:14px;border-top:1px solid rgba(148,163,184,.18);padding-top:12px}
.tg-webhook-repair>summary{cursor:pointer;color:var(--muted);font-size:12px;font-weight:700;list-style:none}
.tg-webhook-repair>summary::-webkit-details-marker{display:none}
@media(max-width:800px){.tg-control-actions{grid-template-columns:1fr}.tg-overview-control-head{align-items:flex-start;flex-direction:column}}

/* Telegram connection workspace v2 */
.tg-connect-hero{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:22px 24px;border-color:rgba(59,130,246,.25);background:linear-gradient(135deg,rgba(37,99,235,.13),rgba(15,118,110,.08))}
.tg-connect-hero.is-connected{border-color:rgba(16,185,129,.35);background:linear-gradient(135deg,rgba(16,185,129,.14),rgba(37,99,235,.07))}
.tg-connect-hero-icon{display:grid;place-items:center;width:50px;height:50px;border-radius:16px;background:rgba(59,130,246,.16);color:#60a5fa;font-size:24px;font-weight:900}
.tg-connect-hero.is-connected .tg-connect-hero-icon{background:rgba(16,185,129,.18);color:#34d399}
.tg-connect-hero span,.tg-connect-panel-head>div>span{display:block;margin-bottom:4px;color:#60a5fa;font-size:10px;font-weight:900;letter-spacing:.14em}
.tg-connect-hero h2,.tg-connect-panel-head h2{margin:0 0 4px;font-size:21px}.tg-connect-hero p,.tg-connect-panel-head p{margin:0;color:var(--muted);font-size:12px}
.tg-connect-badge{padding:8px 12px;border:1px solid rgba(245,158,11,.3);border-radius:999px;background:rgba(245,158,11,.1);color:#f59e0b;font-size:11px;font-weight:800;white-space:nowrap}
.tg-connect-hero.is-connected .tg-connect-badge{border-color:rgba(16,185,129,.3);background:rgba(16,185,129,.1);color:#10b981}
.tg-connect-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.tg-connect-summary .telegram-status{min-height:78px}
.tg-connect-panel{padding:24px}.tg-connect-panel-head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-bottom:18px;border-bottom:1px solid rgba(148,163,184,.17)}
.tg-connect-flow{display:flex;align-items:center}.tg-connect-flow b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(59,130,246,.15);color:#60a5fa;font-size:11px}.tg-connect-flow i{width:28px;height:1px;background:rgba(96,165,250,.3)}
.tg-connect-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}.tg-connect-groups fieldset{min-width:0;margin:0;padding:17px;border:1px solid rgba(148,163,184,.18);border-radius:17px;background:rgba(15,23,42,.025)}
.tg-connect-groups legend{display:flex;align-items:center;gap:8px;padding:0 7px;font-size:13px;font-weight:800}.tg-connect-groups legend b{display:grid;place-items:center;width:23px;height:23px;border-radius:8px;background:rgba(59,130,246,.15);color:#60a5fa;font-size:10px}
.tg-connect-groups fieldset>small{display:block;margin-top:8px;color:var(--muted);font-size:10px}.tg-connect-two{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.tg-connect-actions{display:grid;grid-template-columns:1.6fr .8fr .65fr;gap:10px;margin-top:18px;padding-top:18px;border-top:1px solid rgba(148,163,184,.17)}.tg-connect-actions .ks-btn{width:100%;min-height:46px}
.tg-provision-result{margin-top:16px;padding:16px;border:1px solid rgba(16,185,129,.28);border-radius:16px;background:rgba(16,185,129,.06)}.tg-provision-result.is-error{border-color:rgba(239,68,68,.3);background:rgba(239,68,68,.06)}
.tg-provision-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.tg-provision-title>span{color:var(--muted);font-size:11px}
.tg-provision-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.tg-provision-steps>div{display:flex;align-items:flex-start;gap:9px;padding:10px;border-radius:12px;background:rgba(148,163,184,.08)}.tg-provision-steps b{display:grid;place-items:center;flex:0 0 23px;height:23px;border-radius:50%;background:rgba(16,185,129,.17);color:#10b981;font-size:11px}.tg-provision-steps .failed b{background:rgba(239,68,68,.16);color:#ef4444}.tg-provision-steps span{min-width:0}.tg-provision-steps strong,.tg-provision-steps small{display:block}.tg-provision-steps strong{font-size:11px}.tg-provision-steps small{margin-top:2px;color:var(--muted);font-size:10px;overflow-wrap:anywhere}
.tg-provision-steps .warning b{background:rgba(245,158,11,.17);color:#f59e0b}
.tg-service-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media(max-width:980px){.tg-connect-summary,.tg-service-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.tg-connect-groups{grid-template-columns:1fr}}
@media(max-width:650px){.tg-connect-hero{grid-template-columns:auto 1fr;padding:17px}.tg-connect-badge{grid-column:1/-1;text-align:center}.tg-connect-summary,.tg-service-metrics,.tg-provision-steps{grid-template-columns:1fr}.tg-connect-panel{padding:16px}.tg-connect-panel-head{align-items:flex-start;flex-direction:column}.tg-connect-flow{width:100%}.tg-connect-flow i{flex:1}.tg-connect-two,.tg-connect-actions{grid-template-columns:1fr}.tg-provision-title{align-items:flex-start;flex-direction:column}}