:root {
  --bg: #090b11;
  --surface: #11141d;
  --surface-2: #171a25;
  --surface-3: #202431;
  --border: rgba(255, 255, 255, 0.08);
  --text: #f5f3ff;
  --muted: #8f94a6;
  --purple: #8064ff;
  --purple-2: #a891ff;
  --blue: #4f9cff;
  --green: #45d69e;
  --orange: #ffad5b;
  --red: #ff6e7c;
  --shadow: 0 28px 70px rgba(0, 0, 0, 0.34);
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); font-family: Inter, "Segoe UI", "Microsoft YaHei", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button { color: inherit; }
.auth-pending .app-shell, .auth-required .app-shell { display: none; }
.auth-pending .login-screen, .auth-required .login-screen { display: grid; }
.auth-granted .login-screen { display: none; }
.login-screen { display: none; min-height: 100vh; place-items: center; align-content: center; gap: 24px; padding: 28px 18px; overflow: hidden; position: relative; background: radial-gradient(circle at 50% 18%, rgba(115,83,255,.20), transparent 28%), radial-gradient(circle at 10% 90%, rgba(50,148,255,.08), transparent 28%), #090b11; }
.login-screen::before, .login-screen::after { content: ""; position: fixed; width: 420px; height: 420px; border: 1px solid rgba(157,135,255,.08); border-radius: 50%; pointer-events: none; }
.login-screen::before { right: -190px; top: -210px; box-shadow: 0 0 0 54px rgba(128,100,255,.025), 0 0 0 108px rgba(128,100,255,.018); }
.login-screen::after { left: -270px; bottom: -300px; box-shadow: 0 0 0 54px rgba(79,156,255,.018); }
.login-card { position: relative; z-index: 1; width: min(430px, 100%); padding: 44px 42px 36px; text-align: center; border: 1px solid rgba(255,255,255,.09); border-radius: 24px; background: linear-gradient(145deg, rgba(24,27,39,.97), rgba(15,18,27,.98)); box-shadow: 0 32px 90px rgba(0,0,0,.48); }
.login-card h1 { margin: 9px 0 13px; font-size: 27px; }
.login-brand { position: relative; width: 70px; height: 70px; margin: 0 auto 25px; overflow: hidden; border-radius: 22px; background: linear-gradient(145deg, #9a82ff, #6142dc); box-shadow: 0 15px 38px rgba(112,77,237,.34); }
.login-brand__moon { position: absolute; width: 39px; height: 39px; left: 14px; top: 13px; border-radius: 50%; background: white; }
.login-brand__moon::after { content: ""; position: absolute; width: 38px; height: 38px; left: 13px; top: -7px; border-radius: 50%; background: #7557eb; }
.login-brand__plane { position: absolute; z-index: 2; right: 11px; bottom: 9px; color: white; font-size: 15px; transform: rotate(-20deg); }
.login-description { max-width: 330px; margin: 0 auto 27px; color: #9297a8; font-size: 13px; line-height: 1.75; }
.login-options { display: grid; gap: 12px; }
.google-login-wrap { width: 100%; min-height: 44px; display: grid; place-items: center; }
.google-login-wrap > div, .google-login-wrap iframe { max-width: 100% !important; }
.google-login-placeholder { width: 100%; min-height: 44px; display: grid; place-items: center; color: #777d8e; border: 1px solid var(--border); border-radius: 7px; background: rgba(255,255,255,.025); font-size: 11px; }
.login-divider { display: flex; align-items: center; gap: 11px; color: #5f6576; font-size: 9px; }
.login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.telegram-login-btn { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 10px; color: white; text-decoration: none; border-radius: 8px; background: linear-gradient(135deg, #3398de, #2481cc); box-shadow: 0 10px 26px rgba(36,129,204,.21); font-size: 12px; font-weight: 700; transition: .18s ease; }
.telegram-login-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(36,129,204,.3); }
.telegram-login-btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.telegram-login-btn__icon { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.14); transform: rotate(-20deg); }
.login-status { min-height: 18px; margin: 15px 0 0; color: #777d8e; font-size: 10px; }
.login-status.error { color: #ff8791; }
.login-security { margin-top: 23px; padding-top: 18px; color: #676d7e; border-top: 1px solid var(--border); font-size: 9px; }
.login-security span { color: #5ee0ad; margin-right: 5px; }
.login-footer { position: relative; z-index: 1; margin: 0; color: #515768; font-size: 9px; letter-spacing: .08em; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 246px minmax(0, 1fr); }

.sidebar { position: fixed; inset: 0 auto 0 0; width: 246px; padding: 30px 18px 22px; background: #0d1017; border-right: 1px solid var(--border); display: flex; flex-direction: column; z-index: 20; }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 10px 30px; }
.brand strong { display: block; font-size: 16px; letter-spacing: .02em; }
.brand small { display: block; color: #6f7485; margin-top: 3px; font-size: 11px; }
.brand-mark { position: relative; width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(145deg, #9b82ff, #6543e7); box-shadow: 0 8px 24px rgba(128, 100, 255, .3); overflow: hidden; }
.brand-mark::before { content: ""; position: absolute; width: 23px; height: 23px; left: 9px; top: 6px; border-radius: 50%; background: white; }
.brand-mark::after { content: ""; position: absolute; width: 22px; height: 22px; left: 15px; top: 2px; border-radius: 50%; background: #7454ed; }
.brand-mark span { position: absolute; z-index: 2; left: 9px; bottom: 7px; width: 4px; height: 4px; background: white; border-radius: 50%; box-shadow: 8px 3px 0 -1px rgba(255,255,255,.8); }

.nav { display: grid; gap: 7px; }
.nav-item { width: 100%; border: 0; background: transparent; color: #8e93a4; display: grid; grid-template-columns: 28px 1fr auto; align-items: center; text-align: left; gap: 8px; padding: 12px 13px; border-radius: 11px; cursor: pointer; transition: .18s ease; }
.nav-item:hover { color: #e6e3f4; background: rgba(255,255,255,.035); }
.nav-item.active { color: white; background: linear-gradient(90deg, rgba(128, 100, 255, .20), rgba(128, 100, 255, .08)); box-shadow: inset 3px 0 0 var(--purple); }
.nav-icon { display: grid; place-items: center; font-size: 18px; }
.nav-count { color: #c7bcff; background: rgba(128,100,255,.2); border: 1px solid rgba(128,100,255,.24); font-size: 11px; padding: 2px 7px; border-radius: 20px; }
.sidebar-note { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 13px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid var(--border); }
.sidebar-note strong, .sidebar-note small { display: block; }
.sidebar-note strong { font-size: 12px; }
.sidebar-note small { margin-top: 3px; color: #777d8e; font-size: 10px; }
.pulse { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 5px rgba(255,173,91,.1); }

.main { grid-column: 2; min-width: 0; }
.topbar { height: 94px; padding: 0 38px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); background: rgba(9,11,17,.82); backdrop-filter: blur(14px); position: sticky; top: 0; z-index: 12; }
.eyebrow { margin: 0 0 5px; color: #62687a; font-size: 9px; font-weight: 800; letter-spacing: .17em; }
.eyebrow.violet { color: var(--purple-2); }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 21px; letter-spacing: -.02em; }
h2 { font-size: 27px; margin-bottom: 9px; letter-spacing: -.025em; }
h3 { font-size: 16px; margin: 3px 0 0; }
.top-actions { display: flex; gap: 12px; align-items: center; }
.demo-badge { display: flex; align-items: center; gap: 7px; font-size: 11px; color: #a8acba; padding: 8px 12px; background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: 30px; }
.demo-badge span { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.owner-chip { display: flex; align-items: center; gap: 9px; border: 1px solid var(--border); background: var(--surface); padding: 6px 9px 6px 6px; border-radius: 12px; }
.owner-chip > span:nth-child(2) { text-align: left; }
.owner-chip b, .owner-chip small { display: block; }
.owner-chip b { font-size: 12px; }
.owner-chip small { font-size: 9px; color: #777d8e; }
.owner-chip i { color: #727788; font-style: normal; }
.logout-btn { min-height: 35px; padding: 0 12px; color: #8e93a4; border: 1px solid var(--border); border-radius: 10px; background: transparent; cursor: pointer; font-size: 10px; transition: .18s ease; }
.logout-btn:hover { color: #f0eef8; background: rgba(255,255,255,.04); }
.avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: white; font-size: 12px; background: linear-gradient(145deg, #866cff, #5640c5); }
.mobile-menu { display: none; border: 0; background: transparent; font-size: 22px; }

.content { max-width: 1470px; margin: 0 auto; padding: 29px 38px 56px; }
.page-section { display: none; animation: appear .25s ease; }
.page-section.active { display: block; }
@keyframes appear { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.hero-panel { min-height: 158px; border: 1px solid rgba(128,100,255,.19); border-radius: 17px; padding: 31px 34px; display: flex; align-items: center; justify-content: space-between; overflow: hidden; position: relative; background: radial-gradient(circle at 82% 20%, rgba(112,75,255,.23), transparent 28%), linear-gradient(135deg, #17152a, #11131d 62%); box-shadow: var(--shadow); }
.hero-panel::after { content: ""; position: absolute; width: 210px; height: 210px; border: 1px solid rgba(168,145,255,.12); border-radius: 50%; right: 80px; top: -126px; box-shadow: 0 0 0 34px rgba(128,100,255,.035), 0 0 0 68px rgba(128,100,255,.025); }
.hero-panel p:last-child { max-width: 570px; margin: 0; color: #989daf; font-size: 13px; line-height: 1.7; }
.primary-btn, .ghost-btn, .text-btn, .icon-btn { cursor: pointer; border-radius: 10px; border: 0; transition: .18s ease; }
.primary-btn { position: relative; z-index: 2; background: linear-gradient(135deg, #8c70ff, #6e4fec); color: white; padding: 11px 17px; font-weight: 700; font-size: 12px; box-shadow: 0 9px 24px rgba(108,76,237,.25); }
.primary-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(108,76,237,.37); }
.primary-btn span { font-size: 16px; margin-right: 4px; }
.ghost-btn { background: var(--surface-3); border: 1px solid var(--border); color: #d8d7df; padding: 10px 14px; font-size: 12px; }
.ghost-btn:hover { background: #292d3b; }
.ghost-btn.full { width: 100%; display: flex; justify-content: space-between; }
.text-btn { background: none; color: #9883ff; font-size: 11px; padding: 6px; }

.stats-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 15px; margin: 17px 0; }
.stat-card { min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 20px; display: flex; gap: 15px; align-items: center; }
.stat-icon { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 11px; font-size: 20px; }
.accent-purple .stat-icon { color: #b9aaff; background: rgba(128,100,255,.13); }
.accent-cyan .stat-icon { color: #64d9e8; background: rgba(72,201,218,.12); }
.accent-blue .stat-icon { color: #7db8ff; background: rgba(79,156,255,.12); }
.accent-green .stat-icon { color: #70e7b9; background: rgba(69,214,158,.12); }
.accent-orange .stat-icon { color: #ffc17f; background: rgba(255,173,91,.12); }
.stat-card span, .stat-card strong, .stat-card small { display: block; }
.stat-card span { color: #858a9b; font-size: 11px; }
.stat-card strong { margin: 5px 0 4px; font-size: 23px; letter-spacing: -.02em; }
.stat-card small { color: #686e80; font-size: 9px; }
.stat-card small i { color: var(--green); font-style: normal; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(275px, .72fr); gap: 17px; margin-bottom: 17px; }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: 15px; box-shadow: 0 12px 40px rgba(0,0,0,.14); }
.activity-panel, .quick-panel { min-height: 319px; padding: 22px; }
.panel-head { display: flex; justify-content: space-between; align-items: flex-start; }
.panel-kicker { color: #606678; font-size: 8px; letter-spacing: .15em; font-weight: 800; text-transform: uppercase; }
.legend { color: #777d8e; font-size: 10px; display: flex; align-items: center; gap: 7px; }
.legend span { width: 7px; height: 7px; background: var(--purple); border-radius: 2px; }
.chart { height: 225px; margin-top: 22px; display: grid; grid-template-columns: 30px 1fr; gap: 10px; }
.y-labels { display: flex; flex-direction: column; justify-content: space-between; color: #575d6e; font-size: 9px; padding: 1px 0 26px; }
.bars { min-width: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 15px; align-items: end; padding: 0 10px; background-image: linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 100% 33.333%; }
.bar-col { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 9px; }
.bar-col i { display: block; width: min(26px, 65%); height: var(--h); border-radius: 6px 6px 2px 2px; background: linear-gradient(to top, rgba(128,100,255,.32), #8064ff); opacity: .7; }
.bar-col.today i { opacity: 1; box-shadow: 0 -7px 24px rgba(128,100,255,.2); }
.bar-col span { color: #62687a; font-size: 9px; }
.donut-wrap { min-height: 220px; display: flex; justify-content: center; align-items: center; gap: 28px; }
.donut { width: 130px; height: 130px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--purple) 0 61.79%, #343048 61.79% 100%); position: relative; }
.donut::before { content: ""; position: absolute; width: 94px; height: 94px; border-radius: 50%; background: var(--surface); }
.donut div { position: relative; text-align: center; }
.donut strong, .donut span { display: block; }
.donut strong { font-size: 17px; }
.donut span { color: #777d8e; font-size: 8px; margin-top: 4px; }
.donut-legend { min-width: 105px; }
.donut-legend p { color: #777d8e; font-size: 9px; margin-bottom: 15px; }
.donut-legend b { display: block; margin: 4px 0 0 15px; font-size: 13px; color: #e4e2ec; }
.dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; }
.dot.used { background: var(--purple); }.dot.unused { background: #343048; }

.table-panel { padding: 22px 22px 8px; }
.table-wrap { width: 100%; overflow-x: auto; margin-top: 14px; }
table { width: 100%; border-collapse: collapse; min-width: 690px; }
th { color: #5f6576; font-size: 9px; letter-spacing: .08em; font-weight: 700; text-align: left; padding: 13px 12px; border-bottom: 1px solid var(--border); text-transform: uppercase; }
td { color: #c3c4cf; font-size: 11px; padding: 15px 12px; border-bottom: 1px solid rgba(255,255,255,.045); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: rgba(255,255,255,.018); }
.user-cell { display: flex; align-items: center; gap: 9px; }
.mini-avatar { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; font-size: 10px; color: white; background: linear-gradient(135deg, #6c83ff, #885bea); }
.cell-stack b, .cell-stack small { display: block; }
.cell-stack b { color: #e5e3eb; font-size: 11px; }.cell-stack small { margin-top: 3px; color: #646a7b; font-size: 9px; }
.status { display: inline-flex; align-items: center; gap: 5px; border-radius: 20px; padding: 4px 8px; font-size: 9px; font-weight: 700; }
.status::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status.success, .status.active { color: #5ee0ad; background: rgba(69,214,158,.09); }
.status.warning { color: #ffc174; background: rgba(255,173,91,.09); }
.status.failed, .status.disabled { color: #ff8791; background: rgba(255,110,124,.09); }
.more-btn { border: 0; background: none; color: #6e7485; cursor: pointer; font-size: 18px; }

.section-toolbar { min-height: 60px; display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 15px; }
.section-toolbar p { color: #898e9e; font-size: 12px; }
.renewal-rule { display: grid; grid-template-columns: auto minmax(180px, .7fr) minmax(260px, 1fr) minmax(260px, 1fr); align-items: center; gap: 18px; margin-bottom: 17px; padding: 18px 20px; border: 1px solid rgba(128,100,255,.2); border-radius: 15px; background: linear-gradient(110deg, rgba(128,100,255,.12), rgba(17,20,29,.96) 40%); }
.renewal-rule__icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: #b7a8ff; background: rgba(128,100,255,.15); font-size: 20px; }
.renewal-rule__copy span, .renewal-rule__copy strong, .renewal-formula small, .renewal-formula b { display: block; }
.renewal-rule__copy span { color: #7465bd; font-size: 9px; letter-spacing: .08em; }
.renewal-rule__copy strong { margin-top: 5px; font-size: 12px; }
.renewal-formula { min-height: 50px; padding: 10px 13px; border-radius: 10px; background: rgba(69,214,158,.06); border: 1px solid rgba(69,214,158,.12); }
.renewal-formula.expired { background: rgba(255,173,91,.055); border-color: rgba(255,173,91,.13); }
.renewal-formula small { color: #63d9aa; margin-bottom: 5px; font-size: 9px; }
.renewal-formula.expired small { color: #e3a969; }
.renewal-formula b { color: #c9cbd5; font-size: 10px; line-height: 1.5; }
.redemption-table { min-width: 1040px; }
.filter-row { padding: 18px 20px 4px; display: flex; gap: 10px; }
.search-box { width: min(380px, 100%); height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid var(--border); border-radius: 9px; background: #0e1118; }
.search-box span { color: #656b7d; font-size: 19px; }
.search-box input { width: 100%; color: #dddce5; background: transparent; outline: 0; border: 0; font-size: 11px; }
input::placeholder { color: #515768; }
select, .form-grid input { color: #c7c8d2; background: #0e1118; border: 1px solid var(--border); border-radius: 9px; outline: 0; }
.filter-row select { margin-left: auto; min-width: 120px; padding: 0 10px; font-size: 10px; }

.timeline { padding: 10px 23px; }
.audit-item { display: grid; grid-template-columns: 24px 1fr auto; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--border); align-items: start; }
.audit-item:last-child { border-bottom: 0; }
.audit-dot { width: 24px; height: 24px; display: grid; place-items: center; background: rgba(128,100,255,.12); color: #a994ff; border-radius: 7px; font-size: 11px; }
.audit-item b { display: block; font-size: 11px; }.audit-item p { color: #777d8e; margin: 5px 0 0; font-size: 10px; }
.audit-item time { color: #5d6374; font-size: 9px; }

dialog { width: min(610px, calc(100% - 30px)); padding: 0; color: var(--text); background: #12151e; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; box-shadow: 0 36px 100px rgba(0,0,0,.65); }
dialog::backdrop { background: rgba(4,5,8,.76); backdrop-filter: blur(4px); }
dialog form { padding: 25px; }
.wide-dialog { width: min(970px, calc(100% - 30px)); max-height: min(820px, calc(100vh - 30px)); }
.dialog-shell { padding: 25px; }
.dialog-head { display: flex; justify-content: space-between; align-items: flex-start; }
.dialog-head h2 { font-size: 22px; }
.icon-btn { width: 32px; height: 32px; color: #8d92a2; background: #1c202b; font-size: 20px; }
.prototype-alert { display: flex; gap: 11px; padding: 12px; margin: 8px 0 19px; border: 1px solid rgba(255,173,91,.18); border-radius: 10px; background: rgba(255,173,91,.06); }
.prototype-alert > span { width: 21px; height: 21px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: #ffc27d; border: 1px solid rgba(255,173,91,.4); font-size: 10px; }
.prototype-alert p { margin: 0; color: #9b8d7e; font-size: 10px; line-height: 1.6; }.prototype-alert b { color: #d9bd9c; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.form-grid label { display: grid; gap: 7px; }.form-grid label.wide { grid-column: 1 / -1; }
.form-grid label > span { color: #a1a5b3; font-size: 10px; font-weight: 600; }
.form-grid input, .form-grid select { width: 100%; height: 40px; padding: 0 11px; font-size: 11px; }
.rule-card { margin-top: 18px; padding: 14px 16px; border-radius: 10px; background: #0e1118; border: 1px solid var(--border); }
.rule-card b { font-size: 11px; }.rule-card ul { color: #767c8d; padding-left: 17px; margin: 8px 0 0; font-size: 9px; line-height: 1.8; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 21px; }
.batch-meta { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; margin-bottom: 16px; }
.batch-meta div { min-width: 0; padding: 11px 12px; border: 1px solid var(--border); border-radius: 10px; background: #0e1118; }
.batch-meta span, .batch-meta b { display: block; }
.batch-meta span { color: #646a7b; font-size: 9px; }
.batch-meta b { overflow: hidden; margin-top: 5px; color: #d5d4de; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.code-toolbar { display: flex; align-items: center; gap: 9px; }
.code-toolbar .search-box { flex: 1; }
.code-toolbar select { align-self: stretch; min-width: 110px; padding: 0 10px; font-size: 10px; }
.code-table-wrap { max-height: 390px; border: 1px solid var(--border); border-radius: 11px; }
.code-table { min-width: 760px; }
.code-value { color: #e4e0ff; font-family: "Cascadia Mono", Consolas, monospace; font-size: 10px; letter-spacing: .04em; }
.copy-code-btn { border: 0; border-radius: 7px; padding: 6px 9px; color: #ac9cff; background: rgba(128,100,255,.1); cursor: pointer; font-size: 9px; }
.code-foot { display: flex; justify-content: space-between; gap: 14px; padding-top: 10px; color: #656b7c; font-size: 9px; }
.user-data-notice { margin-bottom: 17px; }
.user-stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-bottom: 17px; }
.mini-stat { position: relative; overflow: hidden; padding: 18px 19px; border: 1px solid var(--border); border-radius: 13px; background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.012)); }
.mini-stat::after { position: absolute; right: -20px; bottom: -28px; width: 78px; height: 78px; border-radius: 50%; background: rgba(56,196,229,.08); content: ""; }
.mini-stat span, .mini-stat strong, .mini-stat small { display: block; }
.mini-stat span { color: #878d9f; font-size: 10px; }
.mini-stat strong { margin-top: 8px; color: #eff0f6; font-size: 25px; line-height: 1; }
.mini-stat small { margin-top: 8px; color: #646a7b; font-size: 9px; }
.mini-stat.accent-green::after { background: rgba(69,214,158,.09); }
.mini-stat.accent-blue::after { background: rgba(91,143,255,.10); }
.mini-stat.accent-purple::after { background: rgba(128,100,255,.11); }
.software-user-table { min-width: 1010px; }
.install-id { color: #c8bcff; font-family: "Cascadia Mono", Consolas, monospace; font-size: 10px; letter-spacing: .03em; }
.device-cell { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.device-icon { width: 25px; height: 25px; display: grid; place-items: center; color: #86dcf0; border: 1px solid rgba(56,196,229,.18); border-radius: 7px; background: rgba(56,196,229,.08); font-size: 10px; }
.version-chip { display: inline-flex; padding: 4px 8px; color: #b9c8ff; border: 1px solid rgba(91,143,255,.18); border-radius: 20px; background: rgba(91,143,255,.08); font-size: 9px; }
.empty-state { padding: 50px 20px; text-align: center; color: #6f7586; }
.empty-state[hidden] { display: none; }
.empty-state span, .empty-state b, .empty-state small { display: block; }
.empty-state span { margin-bottom: 10px; color: #8170d4; font-size: 30px; }
.empty-state b { color: #b6bac8; font-size: 13px; }
.empty-state small { margin-top: 7px; font-size: 10px; }
.toast { position: fixed; right: 25px; bottom: 25px; z-index: 50; display: flex; align-items: center; gap: 10px; min-width: 220px; padding: 13px 15px; border-radius: 12px; color: white; background: #202430; border: 1px solid rgba(69,214,158,.25); box-shadow: var(--shadow); opacity: 0; transform: translateY(15px); pointer-events: none; transition: .25s ease; }
.toast.show { opacity: 1; transform: none; }
.toast > span { width: 28px; height: 28px; display: grid; place-items: center; color: #64e4b4; background: rgba(69,214,158,.1); border-radius: 50%; }
.toast p { margin: 0; }.toast b, .toast small { display: block; }.toast b { font-size: 11px; }.toast small { color: #818798; margin-top: 3px; font-size: 9px; }

@media (max-width: 1280px) {
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1050px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .user-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .quick-panel { min-height: 285px; }
  .renewal-rule { grid-template-columns: auto 1fr 1fr; }
  .renewal-rule__copy { grid-column: 2 / -1; }
}
@media (max-width: 760px) {
  .login-card { padding: 36px 24px 30px; border-radius: 20px; }
  .login-card h1 { font-size: 24px; }
  .app-shell { display: block; }
  .sidebar { transform: translateX(-102%); transition: .22s ease; box-shadow: 25px 0 50px rgba(0,0,0,.45); }
  .sidebar.open { transform: none; }
  .main { width: 100%; }
  .mobile-menu { display: block; }
  .topbar { height: 76px; padding: 0 18px; justify-content: flex-start; gap: 14px; }
  .top-actions { margin-left: auto; gap: 7px; }.demo-badge { display: none; }.owner-chip > span:nth-child(2), .owner-chip i { display: none; }
  .owner-chip { padding: 5px; }.content { padding: 20px 15px 40px; }
  .hero-panel { padding: 25px 21px; align-items: flex-start; flex-direction: column; gap: 22px; }
  .hero-panel::after { display: none; }.stats-grid { grid-template-columns: 1fr 1fr; }
  .stat-card { padding: 15px; }.stat-card strong { font-size: 19px; }.stat-icon { display: none; }
  .filter-row { flex-direction: column; }.filter-row select { margin: 0; height: 38px; }
  .form-grid { grid-template-columns: 1fr; }.form-grid label.wide { grid-column: auto; }
  .renewal-rule { grid-template-columns: auto 1fr; gap: 12px; }
  .renewal-rule__copy { grid-column: auto; }
  .renewal-formula { grid-column: 1 / -1; }
  .batch-meta { grid-template-columns: repeat(2, 1fr); }
  .code-toolbar { align-items: stretch; flex-direction: column; }
  .code-toolbar .search-box, .code-toolbar select, .code-toolbar button { width: 100%; min-height: 38px; }
  .code-foot { flex-direction: column; gap: 4px; }
}
@media (max-width: 430px) {
  h2 { font-size: 22px; }.stats-grid { grid-template-columns: 1fr; }
  .user-stats-grid { grid-template-columns: 1fr; }
  .donut-wrap { gap: 18px; }.donut { width: 112px; height: 112px; }.donut::before { width: 80px; height: 80px; }
}