@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  color-scheme: light;
  --white: #ffffff;
  --blue: #5686fe;
  --blue-dark: #3f71eb;
  --ink: #151517;
  --muted: #777b86;
  --line: #eceef2;
  --soft: #ffffff;
  --green: #21a675;
  --red: #e54e5e;
  --amber: #e8a33a;
  --shadow: 0 12px 32px rgba(29, 47, 86, .08);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--white); }
body { min-height: 100vh; margin: 0; background: var(--white); color: var(--ink); }
button, input, select, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }

#app { min-height: 100vh; padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
.boot { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 12px; color: var(--ink); font-weight: 800; font-size: 22px; }
.brand-mark { display:grid; place-items:center; width:54px;height:54px;border-radius:18px;color:white;background:var(--blue);box-shadow:0 10px 24px #5686fe40; }
.spinner { width:22px;height:22px;border:2px solid #e6ecfc;border-top-color:var(--blue);border-radius:50%;animation:spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.shell { max-width: 760px; min-height: 100vh; margin: 0 auto; padding: 0 18px 30px; animation: appear .28s ease-out; }
@keyframes appear { from { opacity:0; transform:translateY(5px) } to { opacity:1; transform:none } }
.topbar { position: sticky; top: 0; z-index: 5; display:flex; align-items:center; justify-content:space-between; min-height:68px; margin:0 -18px; padding:10px 18px; background:rgba(255,255,255,.92); backdrop-filter:blur(14px); border-bottom:1px solid rgba(236,238,242,.75); }
.brand { display:flex; align-items:center; gap:10px; font-size:17px; font-weight:800; letter-spacing:-.45px; }
.brand-icon { display:grid; place-items:center; width:34px;height:34px;border-radius:12px;background:var(--blue);color:#fff;font-size:15px; }
.top-user { display:flex; align-items:center; gap:8px; max-width:52%; color:var(--muted); font-size:12px; font-weight:600; }
.avatar { width:32px;height:32px; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; color:var(--blue);background:#edf2ff;font-weight:800; }
.top-user span:last-child { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }

.content { padding: 22px 0 24px; }
.eyebrow { color:var(--blue); font-size:11px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
h1 { margin:5px 0 6px; font-size:27px; line-height:1.15; letter-spacing:-1px; }
.lead { margin:0; color:var(--muted); font-size:13px; line-height:1.55; }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:26px 0 12px; }
.key-heading-actions { display:flex;align-items:center;gap:12px; }
.section-head h2 { margin:0; font-size:17px; letter-spacing:-.4px; }
.section-head p { margin:4px 0 0;color:var(--muted);font-size:12px; }
.link-button { border:0;background:none;color:var(--blue);font-weight:700;font-size:12px;padding:8px 0;cursor:pointer; }

.hero-card { position:relative; overflow:hidden; margin-top:18px; padding:21px; border-radius:24px; background:linear-gradient(130deg,#5686fe 0%,#6b96ff 65%,#8cb0ff 100%); color:white; box-shadow:0 14px 28px #5686fe33; }
.hero-card:after { content:""; position:absolute; width:190px;height:190px;right:-70px;top:-92px;border:1px solid #ffffff3a;border-radius:50%;box-shadow:0 0 0 22px #ffffff12,0 0 0 45px #ffffff0d; }
.hero-label { position:relative;z-index:1;font-size:12px;color:#eaf0ff;font-weight:600; }
.hero-number { position:relative;z-index:1;margin:10px 0 18px;font-size:37px;font-weight:800;letter-spacing:-1.5px; }
.hero-meta { position:relative;z-index:1;display:flex;gap:8px;flex-wrap:wrap; }
.hero-pill { padding:7px 10px;border-radius:10px;background:#ffffff24;font-size:11px;font-weight:600; }
.primary-button,.secondary-button,.danger-button,.icon-button { display:inline-flex;align-items:center;justify-content:center;gap:8px; min-height:44px; padding:0 16px; border:0;border-radius:14px; cursor:pointer;font-weight:700;font-size:13px; transition:transform .16s,background .16s,box-shadow .16s; }
.primary-button { color:white;background:var(--blue);box-shadow:0 7px 16px #5686fe30; }
.primary-button:hover { background:var(--blue-dark);box-shadow:0 9px 19px #5686fe40; }
.primary-button:active,.secondary-button:active,.danger-button:active { transform:scale(.98); }
.secondary-button { color:var(--ink);background:var(--soft);border:1px solid var(--line); }
.danger-button { color:var(--red);background:#fff1f2;border:1px solid #ffe0e3; }
.icon-button { width:40px;min-width:40px;height:40px;min-height:40px;padding:0;color:var(--muted);background:var(--soft); }
.full { width:100%; }
.button-row { display:flex;gap:9px;flex-wrap:wrap; }
.button-row > * { flex:1; }

.stats-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px; }
.stat-card { min-height:82px;padding:14px;border:1px solid var(--line);border-radius:18px;background:white; }
.stat-icon { display:grid;place-items:center;width:28px;height:28px;margin-bottom:10px;border-radius:10px;background:#edf2ff;color:var(--blue);font-size:12px; }
.stat-value { font-size:20px;font-weight:800;letter-spacing:-.7px; }
.stat-label { margin-top:3px;color:var(--muted);font-size:11px; }

.key-list,.stack { display:grid; gap:11px; }
.key-card,.surface-card { padding:16px;border:1px solid var(--line);border-radius:19px;background:white;box-shadow:0 3px 12px rgba(21,21,23,.025); transition:box-shadow .2s,transform .2s; }
.key-card:hover,.surface-card:hover { box-shadow:var(--shadow);transform:translateY(-1px); }
.key-top { display:flex;align-items:flex-start;justify-content:space-between;gap:12px; }
.key-title { font-size:15px;font-weight:800;overflow-wrap:anywhere; }
.key-title-link { display:block;max-width:100%;padding:0;border:0;background:transparent;color:var(--ink);font-size:15px;font-weight:800;text-align:left;overflow-wrap:anywhere;cursor:pointer; }
.key-sub { margin-top:4px;color:var(--muted);font-size:11px; }
.status { display:inline-flex;align-items:center;gap:5px;padding:6px 9px;border-radius:20px;background:#eaf8f2;color:var(--green);font-size:10px;font-weight:800;white-space:nowrap; }
.status.expired { background:#fff3e2;color:#bd7915; }
.status.revoked { background:#fff0f1;color:var(--red); }
.status.blocked { background:#fff0f1;color:#bd2638; }
.key-info { display:grid;grid-template-columns:repeat(2,1fr);gap:11px 8px;margin:16px 0; }
.info-label { color:var(--muted);font-size:10px; }
.info-value { margin-top:4px;font-size:12px;font-weight:700;overflow-wrap:anywhere; }
.info-value.device-overlimit,.device-warning { color:var(--red);font-weight:800; }
.device-warning { margin-top:3px;font-size:10px; }
.device-online { color:var(--muted);font-size:11px;font-weight:600; }
.traffic-track { height:5px;margin-top:8px;border-radius:9px;background:#edf0f7;overflow:hidden; }
.traffic-track span { display:block;height:100%;border-radius:inherit;background:var(--blue); }
.key-actions { display:flex;gap:8px;margin-top:14px;padding-top:13px;border-top:1px solid var(--line); }
.key-actions button { flex:1;min-height:38px;padding:0 9px;font-size:11px; }
.empty { padding:30px 20px;text-align:center;border:1px dashed #dce1ec;border-radius:20px;color:var(--muted); }
.empty i { color:var(--blue);font-size:24px; }
.empty strong { display:block;margin-top:10px;color:var(--ink);font-size:14px; }
.empty p { margin:6px 0 15px;font-size:12px;line-height:1.5; }
.notice { margin:14px 0;padding:12px 13px;border-radius:13px;background:#f4f7ff;color:#55627d;font-size:11px;line-height:1.5; }
.notice i { margin-right:5px;color:var(--blue); }

.tariff-grid { display:grid;gap:11px; }
.tariff-card { padding:17px;border:1px solid var(--line);border-radius:20px;background:#fff; }
.tariff-card.featured { border-color:#c7d7ff;box-shadow:0 7px 22px #5686fe12; }
.tariff-head { display:flex;justify-content:space-between;align-items:flex-start;gap:12px; }
.tariff-name { font-weight:800;font-size:15px; }
.tariff-duration { margin-top:5px;color:var(--muted);font-size:11px; }
.tariff-price { color:var(--ink);font-size:22px;font-weight:800;white-space:nowrap;letter-spacing:-.6px; }
.tariff-price small { color:var(--muted);font-size:11px;font-weight:600; }
.tariff-card .primary-button { width:100%;margin-top:14px; }

.bottom-nav { position:fixed;z-index:10;left:50%;bottom:0;transform:translateX(-50%);display:flex;justify-content:space-around;gap:3px;width:min(100%,760px);padding:8px 10px calc(8px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:rgba(255,255,255,.96);backdrop-filter:blur(16px); }
.nav-item { flex:1;display:grid;justify-items:center;gap:4px;padding:5px 2px;border:0;background:none;color:#9296a0;font-size:9px;font-weight:700;cursor:pointer; }
.nav-item i { font-size:17px; }
.nav-item.active { color:var(--blue); }

.admin-tabs { display:flex;gap:6px;margin:17px 0 18px;padding:4px;border-radius:14px;background:var(--soft);overflow-x:auto;scrollbar-width:none; }
.admin-tabs::-webkit-scrollbar { display:none; }
.admin-tab { flex:0 0 auto;padding:9px 12px;border:0;border-radius:10px;background:transparent;color:var(--muted);font-size:11px;font-weight:700;cursor:pointer; }
.admin-tab.active { color:var(--ink);background:white;box-shadow:0 2px 7px #15214612; }
.client-row,.order-row,.history-row { display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px solid var(--line); }
.client-row:last-child,.order-row:last-child,.history-row:last-child { border-bottom:0; }
.client-main { min-width:0; }
.client-name { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:800; }
.client-meta { margin-top:4px;color:var(--muted);font-size:10px; }
.row-actions { display:flex;gap:6px;flex:0 0 auto; }
.small-button { min-height:32px;padding:0 9px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font-size:10px;font-weight:700;cursor:pointer; }
.small-button.blue { color:var(--blue);border-color:#d9e4ff;background:#f7f9ff; }
.small-button.red { color:var(--red);border-color:#ffe0e3;background:#fff8f8; }
.client-card-list,.profile-key-list { display:grid;gap:10px; }
.client-card { padding:14px;border:1px solid var(--line);border-radius:15px;background:#fff; }
.client-badges { display:flex;gap:5px;flex-wrap:wrap;margin-top:6px; }
.client-badges:empty { display:none; }
.status-pill-blocked { background:#fff0f1;color:#bd2638; }
.client-card-actions { display:flex;gap:8px;margin-top:12px;padding-top:11px;border-top:1px solid var(--line); }
.client-card-actions button { flex:1;min-height:38px; }
.order-price { text-align:right;font-size:12px;font-weight:800;white-space:nowrap; }
.order-status { margin-top:4px;color:var(--amber);font-size:10px;font-weight:700; }
.order-status.approved { color:var(--green); }
.order-status.rejected { color:var(--red); }
.sales-card { overflow:hidden; }
.sales-period-buttons { display:flex;gap:6px;flex-wrap:wrap;margin:12px 0; }
.sales-card .section-head,.sales-card .sales-period-buttons { justify-content:flex-start;text-align:left; }
.sales-custom-fields { display:flex;align-items:end;gap:8px;flex-wrap:wrap; }
.sales-date-field { display:grid;gap:5px;min-width:130px;color:var(--muted);font-size:10px;font-weight:700; }
.sales-date-field input { width:100%;min-height:38px;padding:6px 8px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font-size:14px; }
.sales-summary { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0;padding:12px;border-radius:13px;background:var(--soft); }
.sales-summary > div:first-child { grid-column:1/-1; }
.sales-line-total { flex:0 0 auto;color:var(--muted);font-size:11px;font-weight:700;text-align:right; }
.client-profile-summary { margin-bottom:12px; }
.client-profile-facts,.profile-key-facts { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 8px;margin:15px 0; }
.client-profile-section { margin:22px 0 10px; }
.profile-key-card { padding:13px;border:1px solid var(--line);border-radius:15px;background:#fff; }
.key-search-form { display:grid;gap:10px; }
.key-search-results { margin-top:12px; }
.key-search-result { width:100%;min-height:0;border:0;background:#fff;color:var(--ink);text-align:left;font:inherit;cursor:pointer; }
.key-search-result:hover { background:var(--soft); }
.hwid-deletion-history { margin-top:10px;padding-top:9px;border-top:1px solid var(--line); }
.hwid-deletion-history .client-meta { overflow-wrap:anywhere; }
.hwid-device-section { margin-top:12px;padding-top:10px;border-top:1px solid var(--line); }
.hwid-device-row { display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--line); }
.hwid-device-row:last-child { border-bottom:0; }
.hwid-device-row .client-main { flex:1; }
.hwid-device-row .small-button { flex:0 0 auto;min-height:36px; }
.profile-key-heading { display:flex;align-items:flex-start;justify-content:space-between;gap:9px; }
.profile-key-heading .client-name { white-space:normal;overflow-wrap:anywhere; }
.profile-key-facts { margin:13px 0; }
.profile-key-actions { display:flex;gap:6px;flex-wrap:wrap;padding-top:10px;border-top:1px solid var(--line); }
.more-history-button { display:block;width:100%;margin-top:10px; }
.order-price-estimate { display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px;padding:14px 16px;border:1px solid #dfe8ff;border-radius:16px;background:linear-gradient(135deg,#f7f9ff,#edf3ff);color:var(--muted);font-size:12px;font-weight:700; }
.order-price-estimate[hidden] { display:none !important; }
.order-price-estimate-label { display:inline-flex;align-items:center;gap:8px; }
.order-price-estimate-label i { color:var(--blue); }
.order-price-estimate strong { color:var(--ink);font-size:22px;font-weight:800;white-space:nowrap;letter-spacing:-.4px; }
.special-price-section { grid-column:1 / -1;margin:2px 0 12px;padding:12px;border:1px solid var(--line);border-radius:13px;background:#fbfcff; }
.special-price-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 8px;margin-top:8px; }
.special-price-grid .field { margin-bottom:8px; }
.purchase-list { padding-top:4px;padding-bottom:4px; }
.purchase-row { display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 0;border-bottom:1px solid var(--line); }
.purchase-row:last-child { border-bottom:0; }
.purchase-main { min-width:0; }
.purchase-amount { flex:0 0 auto;text-align:right;font-size:12px;font-weight:800; }
.purchase-amount .order-status { display:block; }
.form-grid { display:grid;grid-template-columns:1fr 1fr;gap:11px; }
.field { display:grid;gap:6px;margin:0 0 13px; }
.field.full-field { grid-column:1 / -1; }
.field label { color:#5f6370;font-size:11px;font-weight:700; }
.input,.select,.textarea { width:100%;min-height:46px;padding:11px 12px;border:1px solid #e4e7ee;border-radius:12px;outline:0;background:#fff;color:var(--ink);font-size:16px;transition:border .15s,box-shadow .15s; }
.textarea { min-height:100px;resize:vertical;line-height:1.5; }
.input:focus,.select:focus,.textarea:focus { border-color:#9eb8ff;box-shadow:0 0 0 3px #5686fe18; }
.helper { color:var(--muted);font-size:10px;line-height:1.45; }
.input-action { display:flex;align-items:stretch;gap:7px; }
.input-action .input { min-width:0; }
.generate-button { flex:0 0 auto;min-height:46px;padding:0 11px;border:1px solid #dce5ff;border-radius:12px;background:#f5f8ff;color:var(--blue);font-size:11px;font-weight:800;cursor:pointer; }
.renew-list { display:grid;gap:11px;margin:0 5px; }
.key-filter { display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:-2px 0 12px; }
.key-date-field { display:flex;align-items:center;gap:7px;min-height:37px;padding:0 9px;border:1px solid var(--line);border-radius:11px;color:var(--muted);font-size:10px;font-weight:700; }
.key-date-field i { color:var(--blue); }
.key-date-field input { width:132px;min-width:0;padding:6px 2px;border:0;outline:0;background:transparent;color:var(--ink);font-size:16px; }
.qr-wrap { display:grid;justify-items:center;gap:12px;padding:8px 0 4px;text-align:center; }
.qr-wrap img { width:min(76vw,300px);height:auto;padding:10px;border:1px solid var(--line);border-radius:18px;background:#fff; }
.qr-wrap p { max-width:330px;margin:0;color:var(--muted);font-size:12px;line-height:1.5; }
.qr-share-caption { color:var(--ink);font-size:17px;font-weight:800;text-align:center; }
.qr-share-actions { display:grid;gap:8px;width:100%;margin-top:4px; }
.admin-section { margin-top:16px; }
.admin-section h3 { margin:0 0 10px;font-size:14px; }
.table-wrap { overflow:hidden; }
.pill { display:inline-flex;padding:5px 8px;border-radius:20px;background:var(--soft);color:#676d7a;font-size:10px;font-weight:700; }
.mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }

.modal-backdrop { position:fixed;z-index:30;inset:0;display:flex;align-items:flex-end;justify-content:center;padding:18px;background:#10152155;animation:fade .18s ease-out; }
@keyframes fade { from{opacity:0}to{opacity:1} }
.modal { width:min(100%,560px);max-height:88vh;overflow:auto;padding:20px 18px calc(20px + env(safe-area-inset-bottom));border-radius:24px 24px 18px 18px;background:#fff;box-shadow:0 20px 60px #0002;animation:slide .2s ease-out; }
@keyframes slide { from{transform:translateY(20px);opacity:.7}to{transform:none;opacity:1} }
.modal-head { display:flex;justify-content:space-between;align-items:center;margin-bottom:16px; }
.modal-head h2 { margin:0;font-size:18px;letter-spacing:-.4px; }
.modal-close { width:34px;height:34px;border:0;border-radius:50%;background:var(--soft);color:var(--muted);font-size:15px;cursor:pointer; }
.toast { position:fixed;z-index:50;left:50%;bottom:calc(91px + env(safe-area-inset-bottom));transform:translate(-50%,10px);max-width:calc(100% - 32px);padding:11px 15px;border-radius:13px;background:#17191f;color:#fff;font-size:12px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.22s; }
.toast.show { opacity:1;transform:translate(-50%,0); }
.screen-error { max-width:420px;margin:15vh auto;padding:24px;text-align:center; }
.screen-error i { display:grid;place-items:center;width:52px;height:52px;margin:0 auto 16px;border-radius:18px;background:#fff0f1;color:var(--red);font-size:22px; }
.screen-error h2 { margin:0 0 8px;font-size:19px; }
.screen-error p { margin:0;color:var(--muted);font-size:13px;line-height:1.55; }
.loading-row { display:flex;align-items:center;justify-content:center;gap:10px;padding:30px;color:var(--muted);font-size:12px; }

@media (min-width:600px) {
  .shell { padding-left:24px;padding-right:24px; }
  .topbar { margin-left:-24px;margin-right:-24px;padding-left:24px;padding-right:24px; }
  .hero-card { padding:25px; }
  .stats-grid { grid-template-columns:repeat(4,1fr); }
  .tariff-grid { grid-template-columns:repeat(2,1fr); }
  .modal-backdrop { align-items:center; }
  .modal { border-radius:24px;padding:23px; }
}

@media (max-width:390px) {
  .shell { padding-left:14px;padding-right:14px; }
  .topbar { margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px; }
  h1 { font-size:24px; }
  .hero-card { padding:18px; }
  .hero-number { font-size:33px; }
  .key-card,.surface-card { padding:14px; }
  .key-info { gap:10px 6px; }
  .key-actions { flex-wrap:wrap; }
  .key-actions button { flex:1 1 calc(50% - 5px);font-size:10px; }
  .bottom-nav { padding-left:6px;padding-right:6px; }
  .nav-item { font-size:8px; }
  .nav-item i { font-size:16px; }
  .modal { padding-left:15px;padding-right:15px; }
  .form-grid { grid-template-columns:1fr;gap:0; }
  .field.full-field { grid-column:auto; }
}