:root {
  --bg-page: #d7dde5;
  --bg-top: #f8fafc;
  --bg-card: #f8fafc;
  --bg-search: #e8edf3;
  --bg-sidebar-1: #0f1d36;
  --bg-sidebar-2: #07142d;
  --border: #bcc6d3;
  --text: #10233f;
  --muted: #5a7294;
  --surface-hover: #ffffff;
  --icon-box-bg: #e8edf4;
  --pill-bg: #e9eef5;
  --pill-text: #50698a;
  --icon-muted: #627b9d;
  --user-divider: #ccd5e1;
  --user-chip-bg: #398bea;
  --blue: #1f6fe5;
  --blue-2: #2f8bff;
  --success: #067647;
  --error: #b42318;
}

:root[data-theme='dark'] {
  --bg-page: #111a29;
  --bg-top: #1a2639;
  --bg-card: #1d2a40;
  --bg-search: #24344d;
  --border: #334963;
  --text: #e4edf8;
  --muted: #a5b8d2;
  --surface-hover: #24344e;
  --icon-muted: #c4d3e9;
  --user-divider: #3a506e;
  --user-chip-bg: #2f8bff;
  --icon-box-bg: #2a3b55;
  --pill-bg: #324763;
  --pill-text: #d8e4f5;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, 'Segoe UI', system-ui, sans-serif; color: var(--text); background: var(--bg-page); }
button, input { font-family: inherit; }
.is-hidden { display: none !important; }

.layout { min-height: 100vh; display: grid; grid-template-columns: 274px 1fr; }

.sidebar {
  background: linear-gradient(180deg, var(--bg-sidebar-1), var(--bg-sidebar-2));
  color: #dbe7f8;
  padding: 16px 10px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.brand-header { min-height: 66px; display: flex; align-items: center; padding: 4px 14px; }
.brand-logo { width: 260px; max-width: 100%; height: auto; filter: brightness(1.06); }

.area-nav, .aux-nav { display: grid; gap: 8px; }
.area-btn, .aux-btn {
  border: 1px solid transparent; background: transparent; color: #8fa6c4;
  border-radius: 11px; min-height: 48px; padding: 0 14px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 16px; font-weight: 600; text-align: left; cursor: pointer;
}
.area-btn:hover, .area-btn.active { background: #2474e8; color: #fff; }
.aux-btn { cursor: default; }
.aux-btn-danger { color: #ff3b30; }
.sidebar-divider { border-top: 1px solid rgba(148, 163, 184, 0.26); margin: 6px -10px 0; }


.content-shell { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  min-height: 74px; border-bottom: 1px solid var(--border); background: var(--bg-top);
  display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 10px 28px;
}
.breadcrumb { margin: 0 0 3px; color: #637b9b; font-size: 14px; }
.topbar-title h1,
.content__header h2,
.section-topbar h3,
.module-title,
.empty-state { color: var(--text); }
.breadcrumb span { margin: 0 6px; }
.topbar-title h1 { margin: 0; font-size: 22px; line-height: 1.06; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.search-wrap {
  width: 430px; max-width: 32vw; height: 44px;
  border: 1px solid var(--border); border-radius: 9px; background: var(--bg-search); color: var(--muted);
  display: flex; align-items: center; gap: 10px; padding: 0 12px; font-size: 14px;
}
.search-wrap__icon { width: 18px; height: 18px; flex-shrink: 0; }
.search-wrap input { border: none; outline: none; background: transparent; flex: 1; color: var(--text); font-size: 15px; }
.icon-btn {
  width: 38px; height: 38px; border: none; border-radius: 50%; background: transparent; color: var(--icon-muted); font-size: 18px;
  display: grid; place-items: center; cursor: pointer;
}
.icon-btn__svg { width: 20px; height: 20px; }
.user-chip {
  margin-left: 8px; padding-left: 14px; border-left: 1px solid var(--user-divider);
  display: flex; align-items: center; gap: 12px;
}
.user-chip strong { display: block; font-size: 14px; line-height: 1.05; }
.user-chip small { display: block; color: var(--muted); font-size: 11px; }
.user-chip > span {
  width: 46px; height: 46px; border-radius: 999px; background: var(--user-chip-bg); color: #fff;
  display: grid; place-items: center; font-size: 16px; font-weight: 700;
}

.content { flex: 1; overflow: auto; background: var(--bg-page); padding: 20px 28px; }
.content__header { margin-bottom: 14px; }
.content__header-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.content__header h2 { margin: 0; font-size: 32px; line-height: 1.05; }
.content__header p { margin: 6px 0 0; color: var(--muted); font-size: 16px; }
.refresh-btn, .ghost-btn {
  border: 1px solid var(--border); background: #f6f9fc; color: #1d3557;
  border-radius: 10px; padding: 10px 18px; font-size: 14px; font-weight: 600; cursor: pointer;
}

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.dashboard-grid--clean { grid-template-columns: 1fr; }
.welcome p { margin: 0 0 8px; color: var(--muted); font-size: 16px; }

.block-title {
  margin: 0 0 12px; font-size: 20px;
  display: flex; align-items: center; gap: 8px;
}

.block-title-icon { width: 20px; height: 20px; }

.area-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.module-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.module-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px; min-height: 250px; display: flex; flex-direction: column;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background-color 0.22s ease;
}

.area-card {
  position: relative;
}

.module-card:hover,
.module-card:focus-within {
  transform: translateY(-6px);
  border-color: rgba(31, 111, 229, 0.55);
  box-shadow: 0 14px 28px rgba(16, 38, 68, 0.16);
  background: var(--surface-hover);
  z-index: 2;
}

.module-card:hover .icon-box,
.module-card:focus-within .icon-box {
  background: linear-gradient(135deg, var(--blue), var(--blue-2));
  color: #fff;
}

.module-card:hover .icon-box__svg,
.module-card:focus-within .icon-box__svg {
  filter: brightness(0) saturate(100%) invert(100%);
}

.module-card:hover .module-title,
.module-card:focus-within .module-title,
.module-card:hover .link-area,
.module-card:focus-within .link-area {
  color: var(--blue);
}
.module-card__top { display: flex; justify-content: space-between; align-items: center; }
.icon-box { width: 50px; height: 50px; border-radius: 10px; background: var(--icon-box-bg); display: grid; place-items: center; font-size: 20px; }
.icon-box__svg { width: 24px; height: 24px; }
.pill { font-size: 11px; color: var(--pill-text); background: var(--pill-bg); border-radius: 8px; padding: 4px 8px; font-weight: 700; }
.module-title { margin: 14px 0 8px; font-size: 16px; line-height: 1.05; }
.module-description { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.35; }
.open-btn, .link-area {
  margin-top: auto; align-self: flex-start; border: none; border-radius: 9px;
  background: var(--blue); color: #fff; font-weight: 700; font-size: 14px; padding: 12px 18px;
  text-decoration: none; cursor: pointer;
}
.link-area { background: transparent; color: var(--blue); padding: 0; }
.section-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.section-topbar h3 { margin: 0; font-size: 34px; }


.status { min-height: 24px; margin-top: 10px; font-size: 14px; font-weight: 600; }
.status.error { color: var(--error); }
.status.success { color: var(--success); }
.page-footer {
  border-top: 1px solid var(--border); text-align: center; color: var(--muted);
  background: var(--bg-page); padding: 16px; font-size: 12px;
}
.empty-state { font-size: 16px; color: var(--muted); }

.hub-loading, .license-gate { position: fixed; inset: 0; z-index: 30; }
.hub-loading { background: rgba(15, 23, 42, 0.34); display: grid; place-items: center; }
.hub-loading__card, .gate-loading-card {
  width: min(430px, calc(100% - 24px)); background: #fff; border: 1px solid var(--border);
  border-radius: 14px; padding: 20px; text-align: center; box-shadow: 0 14px 30px rgba(2, 16, 36, 0.24);
}
.hub-loading__spinner, .gate-loading-spinner {
  width: 34px; height: 34px; border: 4px solid #d0d5dd; border-top-color: var(--blue);
  border-radius: 50%; margin: 0 auto 12px; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.license-gate {
  background: radial-gradient(circle at 15% 10%, rgba(31, 111, 229, 0.16), transparent 45%), #e3e8f0;
  display: grid; place-items: center; align-content: center; gap: 12px; padding: 18px;
}
.gate-content,
.gate-loading-screen {
  width: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
}
.gate-header {
  text-align: center;
  margin-top: 14px;
}
.gate-logo {
  width: min(250px, 70vw);
  height: auto;
  display: block;
  margin: 0 auto 2px;
}

.gate-header p { margin: 6px 0 0; color: #5f7393; font-size: 17px; }
.gate-card {
  position: relative; width: min(460px, 100%); background: #fff; border: 1px solid var(--border);
  border-radius: 14px; padding: 24px; box-shadow: 0 12px 34px rgba(15, 23, 42, 0.16);
}
.gate-field { display: grid; gap: 8px; color: #2e4563; font-size: 15px; font-weight: 700; }
.license-id-input { width: 100%; border: 1px solid #c3cedd; border-radius: 10px; background: #f8fafc; padding: 12px 14px; font-size: 15px; text-transform: uppercase; }
.gate-divider { margin: 20px 0; display: flex; align-items: center; gap: 10px; color: #9aabbe; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; }
.gate-divider::before, .gate-divider::after { content: ''; flex: 1; height: 1px; background: #e4e7ec; }
.dropzone-btn { width: 100%; min-height: 100px; border: 2px dashed #cfd8e5; border-radius: 12px; background: #f8fafc; color: #4f6788; font-weight: 700; cursor: pointer; }
.primary-btn {
  width: 100%; margin-top: 16px; border: none; border-radius: 10px;
  background: linear-gradient(135deg, var(--blue), var(--blue-2)); color: #fff;
  font-size: 20px; font-weight: 700; padding: 12px 14px; cursor: pointer;
}
.primary-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.chosen-license, .gate-status { margin: 8px 0 0; font-size: 12px; font-weight: 600; }
.chosen-license { color: #4f6788; }
.gate-status { color: #5f7393; }
.gate-status.error { color: var(--error); }
.gate-status.success { color: var(--success); }
.chosen-license:empty, .gate-status:empty { display: none; }
.gate-loading-screen { min-height: min(100vh, 760px); }
.gate-loading-panel {
  width: min(460px, 100%);
  min-height: 258px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  padding: 28px 24px;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12);
}
.gate-loading-title { margin: 8px 0 0; font-size: 20px; font-weight: 700; text-align: center; color: #253041; }
.gate-loading-description { margin: 0; font-size: 16px; text-align: center; color: #5f7393; }
.gate-footer { text-align: center; color: #607898; margin: 0; font-size: 12px; }

@media (max-width: 1200px) {
  .dashboard-grid { grid-template-columns: 1fr; }
  .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { min-height: auto; }
  .topbar { flex-direction: column; align-items: stretch; }
  .topbar-right { justify-content: space-between; }
  .search-wrap { max-width: 100%; width: 100%; }
  .area-grid, .module-grid { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
  .gate-loading-title { font-size: 18px; }
  .gate-loading-description { font-size: 15px; }
}


.notification-btn { position: relative; }
.notification-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.notification-panel {
  margin: 16px 28px 0;
  border: 1px solid var(--border);
  background: var(--bg-card);
  border-radius: 12px;
  padding: 14px 16px;
}
.notification-panel__header h3 {
  margin: 0 0 8px;
  font-size: 16px;
  color: var(--text);
}
.notification-panel__content p { margin: 0; }
.notification-empty { color: var(--muted); }
.notification-item__title { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.notification-item__meta,
.notification-item__notes { font-size: 13px; color: var(--muted); }
.notification-item__actions { margin-top: 10px; display: flex; gap: 8px; }
.notification-link {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.notification-link { background: var(--blue); border-color: var(--blue); color: #fff; }
.notification-install {
  border: 1px solid var(--blue);
  background: transparent;
  color: var(--blue);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.notification-install:disabled { opacity: 0.6; cursor: not-allowed; }

.spa-module-root {
  min-height: 64vh;
}

.spa-module-view {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-card);
  overflow: hidden;
}

.spa-module-view__header {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-top);
}

.spa-module-view__title {
  font-size: 14px;
}

.spa-module-frame-wrap {
  height: min(76vh, 920px);
  background: #fff;
}

.spa-module-frame {
  width: 100%;
  height: 100%;
  border: 0;
}