:root {
  --primary: #0874ff;
  --primary-700: #075fd4;
  --primary-100: #eaf3ff;
  --navy: #123a72;
  --text: #1e3655;
  --muted: #70849f;
  --line: #dde7f2;
  --surface: #ffffff;
  --surface-soft: #f7f9fc;
  --background: #f3f6fa;
  --success: #17845b;
  --success-bg: #eaf8f1;
  --warning: #b66b08;
  --warning-bg: #fff6e6;
  --danger: #c33d3d;
  --danger-bg: #fff0f0;
  --purple: #6c4dd7;
  --shadow-sm: 0 8px 24px rgba(31, 72, 118, .07);
  --shadow-md: 0 18px 50px rgba(25, 67, 115, .12);
  --radius-sm: 10px;
  --radius-md: 15px;
  --radius-lg: 22px;
  --sidebar-width: 272px;
  --header-height: 74px;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--background); }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 15% 8%, rgba(8, 116, 255, .09), transparent 26rem),
    radial-gradient(circle at 93% 92%, rgba(57, 122, 197, .08), transparent 30rem),
    var(--background);
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
[hidden] { display: none !important; }

/* Utilities */
.muted { color: var(--muted); }
.ltr { direction: ltr; text-align: left; }
.center { text-align: center; }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-6 { gap: 6px; }
.gap-8 { gap: 8px; }
.gap-10 { gap: 10px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mb-0 { margin-bottom: 0; }
.w-full { width: 100%; }
.text-sm { font-size: 12px; }
.text-xs { font-size: 11px; }
.text-strong { font-weight: 700; }
.code { font-family: Consolas, "Courier New", monospace; direction: ltr; unicode-bidi: plaintext; }

/* Login */
.login-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(430px, .92fr);
  background: #f5f8fc;
}
.login-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: clamp(44px, 7vw, 110px);
  color: white;
  background:
    radial-gradient(circle at 22% 28%, rgba(255,255,255,.18), transparent 17rem),
    linear-gradient(145deg, #0757cf 0%, #0874ff 52%, #12a4ff 100%);
}
.login-hero::before,
.login-hero::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
}
.login-hero::before { width: 540px; height: 540px; left: -250px; bottom: -260px; }
.login-hero::after { width: 360px; height: 360px; right: -180px; top: -160px; }
.login-hero-content { position: relative; z-index: 1; max-width: 650px; }
.brand-mark {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 20px 50px rgba(0,31,92,.22);
  backdrop-filter: blur(12px);
}
.brand-mark svg { width: 42px; height: 42px; }
.login-hero h1 { margin: 28px 0 12px; font-size: clamp(36px, 4.5vw, 63px); line-height: 1.05; }
.login-hero p { margin: 0; max-width: 600px; font-size: 18px; line-height: 1.9; color: rgba(255,255,255,.88); }
.login-feature-list { display: grid; gap: 12px; margin-top: 34px; }
.login-feature { display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.93); }
.login-feature-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: rgba(255,255,255,.14); }
.login-panel { display: flex; align-items: center; justify-content: center; padding: 42px; }
.login-card { width: min(100%, 470px); padding: 38px; background: rgba(255,255,255,.96); border: 1px solid #e1e9f2; border-radius: 26px; box-shadow: 0 30px 80px rgba(36,75,118,.15); }
.login-card h2 { margin: 0 0 8px; color: var(--navy); font-size: 27px; }
.login-card > p { margin: 0 0 28px; color: var(--muted); line-height: 1.8; }
.password-wrap { position: relative; }
.password-wrap .form-control { padding-left: 48px; }
.password-toggle { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; cursor: pointer; color: #7590ae; }
.password-toggle:hover { background: #eef5fd; color: var(--primary); }
.login-footer { margin-top: 22px; text-align: center; color: #91a0b2; font-size: 11px; }

/* Shell */
.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); direction: rtl; }
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 30;
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
  background: rgba(255,255,255,.94);
  border-left: 1px solid var(--line);
  box-shadow: -12px 0 40px rgba(33,73,119,.05);
  backdrop-filter: blur(16px);
}
.sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 10px 10px 19px; border-bottom: 1px solid #e9eff6; }
.sidebar-logo { width: 46px; height: 46px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 15px; color: white; background: linear-gradient(145deg, #1192ff, #075bd9); box-shadow: 0 10px 24px rgba(8,116,255,.25); }
.sidebar-logo svg { width: 31px; height: 31px; }
.sidebar-brand-text strong { display: block; color: var(--navy); font-size: 15px; }
.sidebar-brand-text span { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.nav-scroll { overflow-y: auto; padding: 15px 2px; scrollbar-width: thin; }
.nav-section-label { margin: 14px 12px 7px; color: #9aabba; font-size: 10px; font-weight: 700; letter-spacing: .02em; }
.nav-link { display: flex; align-items: center; gap: 12px; min-height: 47px; margin: 3px 0; padding: 0 13px; border-radius: 13px; color: #536f8e; font-size: 13px; font-weight: 600; transition: .18s ease; }
.nav-link svg { width: 19px; height: 19px; flex: 0 0 auto; }
.nav-link:hover { color: #1769c9; background: #f0f6fd; }
.nav-link.active { color: #086fe9; background: #eaf3ff; box-shadow: inset -3px 0 0 var(--primary); }
.sidebar-footer { margin-top: auto; padding-top: 12px; border-top: 1px solid #e9eff6; }
.sidebar-session { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: #f7f9fc; }
.avatar { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: white; font-weight: 800; background: linear-gradient(145deg, #1491ff, #0758d4); }
.session-text { min-width: 0; flex: 1; }
.session-text strong, .session-text span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.session-text strong { font-size: 12px; color: #254b75; }
.session-text span { margin-top: 2px; font-size: 10px; color: #8799ad; direction: ltr; text-align: right; }
.main-column { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 20; height: var(--header-height); display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 28px; background: rgba(247,250,253,.9); border-bottom: 1px solid rgba(215,226,238,.9); backdrop-filter: blur(14px); }
.topbar-title { min-width: 0; }
.topbar-title h1 { margin: 0; color: var(--navy); font-size: 20px; }
.topbar-title p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.topbar-actions { display: flex; align-items: center; gap: 9px; }
.menu-toggle { display: none; }
.page-outlet { width: 100%; max-width: 1780px; margin: 0 auto; padding: 26px 28px 46px; }
.sidebar-overlay { display: none; }

/* Buttons */
.btn { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; border: 1px solid transparent; border-radius: 11px; font-weight: 700; font-size: 12px; cursor: pointer; transition: transform .12s ease, background .18s ease, border-color .18s ease, opacity .18s ease; white-space: nowrap; }
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn svg { width: 17px; height: 17px; }
.btn-primary { color: white; background: linear-gradient(135deg, #0b80ff, #075fd9); box-shadow: 0 8px 20px rgba(8,116,255,.2); }
.btn-primary:hover:not(:disabled) { background: linear-gradient(135deg, #0875ef, #0756c4); }
.btn-secondary { color: #365d85; background: white; border-color: #d7e2ee; }
.btn-secondary:hover:not(:disabled) { background: #f5f8fc; border-color: #bfd2e7; }
.btn-soft { color: #1c69c5; background: #eaf3ff; border-color: #d4e7ff; }
.btn-success { color: #14714f; background: #e9f8f0; border-color: #c9ecda; }
.btn-warning { color: #a45e05; background: #fff5df; border-color: #f0d9aa; }
.btn-danger { color: #b63636; background: #fff0f0; border-color: #f0caca; }
.btn-icon { width: 40px; min-width: 40px; padding: 0; }
.btn-sm { min-height: 34px; padding: 0 11px; border-radius: 9px; font-size: 11px; }
.btn-link { min-height: auto; padding: 0; border: 0; background: transparent; color: var(--primary); box-shadow: none; }

/* Cards and page headers */
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.page-heading h2 { margin: 0; color: var(--navy); font-size: 25px; }
.page-heading p { margin: 7px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.7; }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.card { background: rgba(255,255,255,.96); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 19px 21px; border-bottom: 1px solid #e8eef5; }
.card-header h3 { margin: 0; color: #234b78; font-size: 15px; }
.card-header p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.card-body { padding: 21px; }
.card-flush { overflow: hidden; }

/* Dashboard */
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.stat-card { position: relative; overflow: hidden; min-height: 138px; padding: 20px; background: white; border: 1px solid var(--line); border-radius: 19px; box-shadow: var(--shadow-sm); }
.stat-card::after { content: ""; position: absolute; width: 120px; height: 120px; left: -48px; bottom: -60px; border-radius: 50%; background: var(--stat-tint, #eaf3ff); opacity: .72; }
.stat-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stat-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; color: var(--stat-color, var(--primary)); background: var(--stat-tint, #eaf3ff); }
.stat-icon svg { width: 22px; height: 22px; }
.stat-label { color: var(--muted); font-size: 11.5px; }
.stat-value { margin-top: 15px; color: #153f70; font-size: 29px; font-weight: 800; direction: ltr; text-align: right; }
.stat-note { margin-top: 5px; color: #8a9aac; font-size: 10.5px; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(310px, .75fr); gap: 18px; }
.chart-bars { display: flex; align-items: flex-end; gap: 14px; min-height: 210px; padding: 22px 12px 6px; }
.chart-item { flex: 1; min-width: 48px; text-align: center; }
.chart-bar-wrap { height: 145px; display: flex; align-items: flex-end; justify-content: center; }
.chart-bar { width: min(42px, 70%); min-height: 4px; border-radius: 10px 10px 4px 4px; background: linear-gradient(180deg, #1693ff, #0762dc); box-shadow: 0 9px 18px rgba(8,116,255,.18); }
.chart-label { margin-top: 10px; color: #71859e; font-size: 10px; }
.chart-value { margin-top: 3px; color: #284e78; font-size: 11px; font-weight: 700; }
.quick-list { display: grid; gap: 10px; }
.quick-row { display: flex; align-items: center; gap: 11px; padding: 11px; border: 1px solid #e5ecf4; border-radius: 13px; background: #fbfcfe; }
.quick-row-icon { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 12px; background: #eaf3ff; color: var(--primary); }
.quick-row-icon svg { width: 19px; height: 19px; }
.quick-row-main { min-width: 0; flex: 1; }
.quick-row-main strong, .quick-row-main span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.quick-row-main strong { color: #294f78; font-size: 12px; }
.quick-row-main span { margin-top: 3px; color: #8496aa; font-size: 10px; }

/* Toolbar and forms */
.toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-bottom: 16px; padding: 14px; background: rgba(255,255,255,.86); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 6px 20px rgba(32,71,114,.04); }
.toolbar-grow { flex: 1 1 300px; }
.form-group { min-width: 0; }
.form-label { display: block; margin: 0 0 7px; color: #496785; font-size: 11.5px; font-weight: 700; }
.form-control { width: 100%; min-height: 43px; padding: 10px 13px; color: #244868; background: #fbfcfe; border: 1px solid #d7e2ee; border-radius: 11px; outline: none; transition: .18s ease; }
.form-control::placeholder { color: #9aa9b9; }
.form-control:hover { border-color: #bfd0e2; }
.form-control:focus { background: white; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(8,116,255,.1); }
textarea.form-control { min-height: 100px; resize: vertical; line-height: 1.7; }
select.form-control { cursor: pointer; }
.form-hint { display: block; margin-top: 5px; color: #91a0b1; font-size: 10px; line-height: 1.5; }
.form-error { display: block; margin-top: 5px; color: var(--danger); font-size: 10px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.form-grid .span-2 { grid-column: 1 / -1; }
.checkbox-row { display: flex; align-items: center; gap: 9px; min-height: 43px; padding: 0 11px; border: 1px solid #dfe7f0; border-radius: 11px; background: #fafcfe; cursor: pointer; }
.checkbox-row input { accent-color: var(--primary); width: 16px; height: 16px; }
.multi-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: 170px; overflow: auto; padding: 10px; border: 1px solid #dce5ef; border-radius: 12px; background: #fafcfe; }
.multi-check { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 9px; color: #4c6986; font-size: 11px; cursor: pointer; }
.multi-check:hover { background: white; }
.multi-check input { accent-color: var(--primary); }

/* Tables */
.table-wrap { width: 100%; overflow: auto; }
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 820px; }
.data-table th { position: sticky; top: 0; z-index: 1; padding: 12px 14px; color: #72869d; background: #f7f9fc; border-bottom: 1px solid #dde7f1; font-size: 10.5px; font-weight: 700; text-align: right; white-space: nowrap; }
.data-table td { padding: 13px 14px; border-bottom: 1px solid #edf1f6; color: #385a7c; font-size: 11.5px; vertical-align: middle; }
.data-table tbody tr { transition: background .15s ease; }
.data-table tbody tr:hover { background: #fbfdff; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.cell-main { display: flex; align-items: center; gap: 11px; min-width: 210px; }
.table-icon { width: 39px; height: 39px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 12px; background: #eaf3ff; color: var(--primary); overflow: hidden; }
.table-icon img { width: 100%; height: 100%; object-fit: cover; }
.cell-title { color: #244c77; font-size: 12px; font-weight: 700; }
.cell-subtitle { margin-top: 3px; color: #899aab; font-size: 10px; }
.row-actions { display: flex; align-items: center; gap: 6px; }
.empty-state { padding: 54px 24px; text-align: center; }
.empty-icon { width: 74px; height: 74px; display: grid; place-items: center; margin: 0 auto 16px; color: #7899bd; background: #edf4fc; border-radius: 22px; }
.empty-icon svg { width: 34px; height: 34px; }
.empty-state h3 { margin: 0; color: #456584; font-size: 17px; }
.empty-state p { margin: 8px auto 0; max-width: 480px; color: #8799ae; font-size: 11.5px; line-height: 1.8; }
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; border-top: 1px solid #e8eef5; }
.pagination-info { color: var(--muted); font-size: 11px; }
.pagination-buttons { display: flex; align-items: center; gap: 6px; }
.page-chip { min-width: 35px; height: 35px; display: grid; place-items: center; padding: 0 8px; border: 1px solid #dce5ef; border-radius: 9px; background: white; color: #52708e; cursor: pointer; }
.page-chip.active { color: white; border-color: var(--primary); background: var(--primary); }
.page-chip:disabled { opacity: .45; cursor: not-allowed; }

/* Badges */
.badge { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 26px; padding: 4px 9px; border-radius: 999px; font-size: 9.5px; font-weight: 800; white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.badge-blue { color: #176dc8; background: #eaf3ff; }
.badge-green { color: #197754; background: #e9f8f0; }
.badge-yellow { color: #a9670c; background: #fff4de; }
.badge-red { color: #b63b3b; background: #fff0f0; }
.badge-gray { color: #6e7f91; background: #eef2f6; }
.badge-purple { color: #6848c7; background: #f0ebff; }

/* Details */
.details-hero { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 18px; align-items: center; padding: 22px; margin-bottom: 18px; background: white; border: 1px solid var(--line); border-radius: 21px; box-shadow: var(--shadow-sm); }
.app-hero-icon { width: 78px; height: 78px; display: grid; place-items: center; border-radius: 22px; color: var(--primary); background: #eaf3ff; overflow: hidden; }
.app-hero-icon img { width: 100%; height: 100%; object-fit: cover; }
.details-hero h2 { margin: 0; color: var(--navy); font-size: 23px; }
.details-hero p { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.details-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tabs.details-tabs { --tab-columns: 3; display: grid; grid-template-columns: repeat(var(--tab-columns), minmax(0, 1fr)); gap: 9px; padding: 8px; margin-bottom: 18px; overflow: visible; border: 1px solid #dce7f2; border-radius: 18px; background: linear-gradient(180deg, #f6f9fd 0%, #edf3f9 100%); box-shadow: 0 9px 25px rgba(35,73,113,.07); }
.details-tabs-two { --tab-columns: 2 !important; }
.details-tabs-three { --tab-columns: 3 !important; }
.tab-btn { position: relative; min-width: 0; min-height: 64px; display: grid; grid-template-columns: 40px minmax(0,1fr) auto; align-items: center; gap: 11px; padding: 10px 13px; overflow: hidden; border: 1px solid transparent; border-radius: 14px; background: transparent; color: #607892; cursor: pointer; text-align: right; transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.tab-btn::after { content: ""; position: absolute; right: 18px; left: 18px; bottom: 0; height: 3px; border-radius: 999px 999px 0 0; background: var(--primary); opacity: 0; transform: scaleX(.35); transition: opacity .16s ease, transform .16s ease; }
.tab-btn:hover { border-color: #cfe0f2; background: rgba(255,255,255,.76); transform: translateY(-1px); }
.tab-btn:focus-visible { outline: 3px solid rgba(8,116,255,.17); outline-offset: 2px; }
.tab-btn.active { color: #135fae; border-color: #bad7f7; background: white; box-shadow: 0 8px 22px rgba(31,88,148,.12); }
.tab-btn.active::after { opacity: 1; transform: scaleX(1); }
.tab-btn-icon { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid #d8e5f2; border-radius: 12px; color: #7088a2; background: #f4f8fc; transition: color .16s ease, border-color .16s ease, background .16s ease; }
.tab-btn-icon svg { width: 19px; height: 19px; }
.tab-btn.active .tab-btn-icon { color: #0874ff; border-color: #c7ddf8; background: #eaf3ff; }
.tab-btn-copy { min-width: 0; display: grid; gap: 3px; }
.tab-btn-copy strong { overflow: hidden; color: inherit; font-size: 12px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.tab-btn-copy small { overflow: hidden; color: #91a0b1; font-size: 9.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.tab-btn.active .tab-btn-copy small { color: #6f8eae; }
.tab-btn-count { min-width: 27px; height: 27px; display: inline-grid; place-items: center; padding: 0 7px; border: 1px solid #d9e5f0; border-radius: 999px; color: #71869b; background: #f6f9fc; font-size: 9.5px; font-weight: 800; }
.tab-btn.active .tab-btn-count { color: #126ccc; border-color: #c8def7; background: #edf5ff; }
.detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.info-box { padding: 15px; border: 1px solid #e2eaf3; border-radius: 14px; background: #fafcfe; }
.info-box label { display: block; color: #8b9aab; font-size: 9.5px; }
.info-box strong { display: block; margin-top: 7px; color: #315574; font-size: 12px; word-break: break-word; }
.version-card { padding: 16px; border: 1px solid #e0e8f1; border-radius: 15px; background: #fff; }
.version-card + .version-card { margin-top: 10px; }
.version-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.version-head h4 { margin: 0; color: #244c77; font-size: 14px; direction: ltr; text-align: right; }
.version-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; color: #74879a; font-size: 10.5px; }
.version-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.package-box { padding: 16px; border: 1px dashed #bfd3e8; border-radius: 14px; background: #f8fbff; }
dialog.modal.package-modal { width: min(900px, calc(100vw - 28px)); }
.package-manager { display: grid; gap: 15px; }
.package-overview-card { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 14px; padding: 16px 17px; border: 1px solid #dbe7f2; border-radius: 17px; background: linear-gradient(135deg, #fafdff 0%, #f2f7fc 100%); }
.package-overview-icon { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid #cfe1f5; border-radius: 14px; color: #1874d2; background: #eaf4ff; }
.package-overview-icon svg { width: 23px; height: 23px; }
.package-overview-copy { min-width: 0; }
.package-overview-title { overflow: hidden; color: #244a72; font-size: 13px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.package-overview-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 13px; margin-top: 7px; color: #8092a5; font-size: 10px; }
.package-overview-state { justify-self: end; }
.package-notice { display: flex; align-items: flex-start; gap: 11px; padding: 13px 14px; border: 1px solid; border-radius: 14px; }
.package-notice > svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; }
.package-notice > div { min-width: 0; display: grid; gap: 4px; }
.package-notice strong { font-size: 11.5px; }
.package-notice span { font-size: 10.5px; line-height: 1.7; }
.package-notice-warning { color: #936016; border-color: #efd59f; background: #fff8e9; }
.package-upload-card { padding: 16px; border: 1px solid #dbe6f1; border-radius: 17px; background: #fff; }
.package-upload-card.is-locked { background: #fafbfd; }
.package-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.package-section-head > div { min-width: 0; display: grid; gap: 4px; }
.package-section-head strong { color: #315777; font-size: 11.5px; }
.package-section-head span:not(.badge) { color: #8b9bad; font-size: 10px; line-height: 1.6; }
.signature-panel { padding: 12px; margin-top: 11px; border: 1px solid #dce8f4; border-radius: 12px; background: white; }
.package-current-info { margin-top: 0; }
.signature-row { display: grid; grid-template-columns: 130px minmax(0,1fr); gap: 12px; padding: 6px 0; font-size: 10.5px; }
.signature-row label { color: #8999aa; }
.signature-row span { min-width: 0; color: #42617f; word-break: break-all; }
.package-selected-file { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 11px; padding: 11px 12px; margin-top: 11px; border: 1px solid #cce1f8; border-radius: 13px; background: #f1f7ff; }
.package-selected-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: #0874ff; background: #e1efff; }
.package-selected-icon svg { width: 17px; height: 17px; }
.package-selected-file > div { min-width: 0; display: grid; gap: 4px; }
.package-selected-file strong { overflow: hidden; color: #28527b; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: right; }
.package-selected-file span[data-selected-file-meta] { color: #7d91a7; font-size: 9.5px; }
.package-progress-wrap { margin-top: 12px; }
.package-progress-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; color: #6c8298; font-size: 10px; }
.package-progress-head strong { color: #1670cf; direction: ltr; }
.package-actions-grid { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 1px; }
.package-actions-grid .btn { min-height: 41px; }
.package-action-primary { min-width: 135px; }
.package-feedback, .package-result-panel { margin-top: 1px; }
.package-feedback { display: flex; align-items: flex-start; gap: 11px; padding: 13px 14px; border: 1px solid; border-radius: 14px; }
.package-feedback[hidden] { display: none; }
.package-feedback-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; }
.package-feedback-icon svg { width: 17px; height: 17px; }
.package-feedback > div { min-width: 0; display: grid; gap: 4px; }
.package-feedback strong { font-size: 11px; }
.package-feedback span { font-size: 10.5px; line-height: 1.7; }
.package-feedback-success { color: #1b7553; border-color: #bfe7d3; background: #edf9f3; }
.package-feedback-success .package-feedback-icon { background: #d9f2e5; }
.package-feedback-error { color: #a13e3e; border-color: #efc5c5; background: #fff3f3; }
.package-feedback-error .package-feedback-icon { background: #fbe0e0; }
.package-feedback-warning { color: #936016; border-color: #efd59f; background: #fff8e9; }
.package-feedback-warning .package-feedback-icon { background: #f9eac9; }
.package-feedback-info { color: #28679f; border-color: #c9e0f6; background: #f0f7ff; }
.package-feedback-info .package-feedback-icon { background: #dcecff; }
.media-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.media-card { position: relative; overflow: hidden; min-height: 170px; border: 1px solid #dee7f0; border-radius: 15px; background: #f1f5f9; }
.media-card img { width: 100%; height: 170px; object-fit: cover; display: block; }
.media-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px; background: white; }
.media-card-footer span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #687e94; font-size: 10px; }
.upload-drop { display: grid; place-items: center; min-height: 150px; padding: 20px; border: 2px dashed #cbd9e7; border-radius: 16px; background: #f9fbfd; text-align: center; cursor: pointer; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease; }
.upload-drop:hover, .upload-drop:focus-visible, .upload-drop.is-dragging { border-color: #6da9ed; background: #f1f7ff; box-shadow: 0 0 0 4px rgba(8,116,255,.08); outline: none; }
.upload-drop.is-dragging { transform: translateY(-2px); }
.upload-drop.has-file { border-color: #66ad86; background: #f1faf5; }
.upload-drop.has-error { border-color: #df8585; background: #fff5f5; }
.upload-drop.is-disabled { opacity: .62; cursor: not-allowed; filter: grayscale(.18); }
.upload-drop-icon { width: 54px; height: 54px; display: grid !important; place-items: center; margin: 0 !important; border-radius: 16px; color: #4e8ed2; background: #e8f3ff; }
.upload-drop-icon svg { width: 27px !important; height: 27px !important; color: currentColor !important; }
.upload-drop svg { width: 34px; height: 34px; color: #6195cf; }
.upload-drop strong { display: block; margin-top: 10px; color: #466786; font-size: 12px; }
.upload-drop span { display: block; margin-top: 5px; color: #91a0b0; font-size: 10px; }
.progress { height: 8px; overflow: hidden; margin-top: 0; border-radius: 999px; background: #e4ebf3; }
.progress > span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #0d83ff, #07b8f2); transition: width .2s ease; }

/* Organization details */
.org-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-bottom: 16px; }
.org-mini-card { padding: 15px; border: 1px solid #e1e9f2; border-radius: 15px; background: white; }
.org-mini-card label { display: block; color: #8394a7; font-size: 10px; }
.org-mini-card strong { display: block; margin-top: 6px; color: #274e78; font-size: 17px; }
.license-key-box { display: flex; align-items: center; gap: 10px; padding: 13px; margin-top: 13px; border: 1px solid #cfe3fb; border-radius: 13px; background: #f0f7ff; }
.license-key-box code { flex: 1; overflow-wrap: anywhere; color: #154e8c; font-size: 12px; direction: ltr; text-align: left; }

/* Storefront preview */
.storefront-toolbar { display: grid; grid-template-columns: minmax(240px, 1fr) 220px 170px auto; gap: 10px; margin-bottom: 18px; }
.storefront-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.store-card { overflow: hidden; display: flex; flex-direction: column; min-height: 270px; background: white; border: 1px solid var(--line); border-radius: 19px; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease; }
.store-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.store-card-top { display: flex; gap: 13px; padding: 18px; }
.store-icon { width: 64px; height: 64px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 18px; color: var(--primary); background: #eaf3ff; overflow: hidden; }
.store-icon img { width: 100%; height: 100%; object-fit: cover; }
.store-card h3 { margin: 2px 0 5px; color: #20466f; font-size: 14px; }
.store-card p { margin: 0; color: #7e90a5; font-size: 10.5px; line-height: 1.65; }
.store-card-body { flex: 1; padding: 0 18px 16px; }
.store-card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.store-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 18px; border-top: 1px solid #e9eff6; background: #fbfcfe; }
.price { color: #1867be; font-weight: 800; font-size: 12px; direction: ltr; }

/* Dialogs */
dialog.modal { width: min(760px, calc(100vw - 28px)); max-height: calc(100vh - 32px); padding: 0; overflow: hidden; border: 1px solid #dbe5ef; border-radius: 21px; background: white; box-shadow: 0 35px 110px rgba(20,52,88,.28); color: var(--text); }
dialog.modal.modal-lg { width: min(1040px, calc(100vw - 28px)); }
dialog.modal::backdrop { background: rgba(13,35,60,.48); backdrop-filter: blur(4px); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 21px; border-bottom: 1px solid #e5ecf4; }
.modal-head h3 { margin: 0; color: var(--navy); font-size: 17px; }
.modal-close { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 11px; background: #f2f5f9; color: #6f8298; cursor: pointer; }
.modal-close:hover { background: #e9eff6; color: #385b7e; }
.modal-body { max-height: calc(100vh - 190px); overflow-y: auto; padding: 21px; }
.modal-foot { display: flex; align-items: center; justify-content: flex-end; gap: 9px; padding: 15px 21px; border-top: 1px solid #e5ecf4; background: #fafbfd; }
.confirm-message { display: flex; gap: 14px; align-items: flex-start; }
.confirm-icon { width: 48px; height: 48px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 15px; color: #bd3c3c; background: #fff0f0; }
.confirm-message p { margin: 0; color: #54708c; font-size: 12.5px; line-height: 1.9; }

/* Toasts */
.toast-root { position: fixed; left: 22px; bottom: 22px; z-index: 1000; display: grid; gap: 9px; width: min(390px, calc(100vw - 36px)); pointer-events: none; }
.modal-toast-root { position: absolute; left: 18px; bottom: 76px; z-index: 5; display: grid; gap: 9px; width: min(390px, calc(100% - 36px)); pointer-events: none; }
.toast { display: flex; align-items: flex-start; gap: 11px; padding: 13px 14px; color: #35546f; background: rgba(255,255,255,.97); border: 1px solid #dce6f0; border-radius: 14px; box-shadow: 0 15px 44px rgba(22,57,94,.18); animation: toast-in .22s ease both; pointer-events: auto; }
.toast-icon { width: 31px; height: 31px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; }
.toast-success .toast-icon { color: var(--success); background: var(--success-bg); }
.toast-error .toast-icon { color: var(--danger); background: var(--danger-bg); }
.toast-warning .toast-icon { color: var(--warning); background: var(--warning-bg); }
.toast-info .toast-icon { color: var(--primary); background: var(--primary-100); }
.toast-text { flex: 1; min-width: 0; }
.toast-text strong { display: block; color: #294e73; font-size: 11.5px; }
.toast-text span { display: block; margin-top: 4px; color: #708499; font-size: 10.5px; line-height: 1.6; }
.toast-close { border: 0; background: transparent; color: #95a4b4; cursor: pointer; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* Loading */
.loading-page { display: grid; place-items: center; min-height: 330px; }
.spinner { width: 38px; height: 38px; border: 3px solid #dce9f7; border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; }
.loading-page p { margin: 14px 0 0; color: var(--muted); font-size: 11px; }
@keyframes spin { to { transform: rotate(360deg); } }
.skeleton { position: relative; overflow: hidden; background: #e9eff5; border-radius: 9px; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent); animation: shimmer 1.3s infinite; }
@keyframes shimmer { to { transform: translateX(-100%); } }

/* Settings */
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.settings-item { display: flex; align-items: flex-start; gap: 13px; padding: 17px; border: 1px solid #e0e8f1; border-radius: 15px; background: white; }
.settings-item-icon { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 13px; color: var(--primary); background: #eaf3ff; }
.settings-item h4 { margin: 0; color: #294e77; font-size: 13px; }
.settings-item p { margin: 6px 0 0; color: #7d90a4; font-size: 10.5px; line-height: 1.7; }

/* Responsive */
@media (max-width: 1280px) {
  :root { --sidebar-width: 244px; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .storefront-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .media-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 980px) {
  .login-page { grid-template-columns: 1fr; }
  .login-hero { display: none; }
  .login-panel { min-height: 100vh; padding: 24px; }
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; right: 0; transform: translateX(105%); width: min(290px, 86vw); transition: transform .22s ease; }
  body.sidebar-open .sidebar { transform: translateX(0); }
  .sidebar-overlay { position: fixed; inset: 0; z-index: 25; display: block; visibility: hidden; opacity: 0; background: rgba(15,38,66,.38); transition: .2s ease; }
  body.sidebar-open .sidebar-overlay { visibility: visible; opacity: 1; }
  .menu-toggle { display: inline-flex; }
  .page-outlet { padding: 22px 18px 40px; }
  .topbar { padding: 0 18px; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .org-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .storefront-toolbar { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .login-card { padding: 27px 21px; }
  .topbar-title p { display: none; }
  .topbar { height: 66px; }
  .topbar-title h1 { font-size: 17px; }
  .page-outlet { padding: 18px 12px 36px; }
  .page-header { flex-direction: column; align-items: stretch; }
  .page-actions .btn { flex: 1; }
  .stats-grid, .form-grid, .settings-grid, .storefront-grid, .media-grid, .detail-grid, .org-summary { grid-template-columns: 1fr; }
  .form-grid .span-2 { grid-column: auto; }
  .multi-checks { grid-template-columns: 1fr; }
  .toolbar { align-items: stretch; }
  .toolbar .form-group { flex: 1 1 100%; }
  .details-hero { grid-template-columns: auto 1fr; }
  .details-hero > .page-actions { grid-column: 1 / -1; }
  .storefront-toolbar { grid-template-columns: 1fr; }
  .pagination { flex-direction: column; }
  .modal-body { padding: 16px; }
  .modal-foot { flex-wrap: wrap; }
  .modal-foot .btn { flex: 1; }
  .signature-row { grid-template-columns: 1fr; gap: 3px; }
  .toast-root { left: 12px; bottom: 12px; }
  .modal-toast-root { left: 10px; right: 10px; bottom: 72px; width: auto; }
}

@media (max-width: 760px) {
  .tabs.details-tabs { display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
  .tabs.details-tabs .tab-btn { min-width: 210px; flex: 1 0 210px; scroll-snap-align: start; }
  .package-overview-card { grid-template-columns: auto minmax(0,1fr); }
  .package-overview-state { grid-column: 1 / -1; justify-self: start; }
  .package-section-head { align-items: flex-start; }
  .package-actions-grid .btn { flex: 1 1 calc(50% - 8px); }
}

@media (max-width: 520px) {
  .tabs.details-tabs .tab-btn { min-width: 175px; flex-basis: 175px; grid-template-columns: 36px minmax(0,1fr); }
  .tab-btn-count { display: none; }
  .tab-btn-icon { width: 36px; height: 36px; }
  .package-overview-card { grid-template-columns: 1fr; text-align: center; }
  .package-overview-icon, .package-overview-state { justify-self: center; }
  .package-overview-meta { justify-content: center; }
  .package-section-head { display: grid; }
  .package-actions-grid { display: grid; grid-template-columns: 1fr; }
  .package-actions-grid .btn { width: 100%; }
  .package-selected-file { grid-template-columns: auto minmax(0,1fr); }
  .package-selected-file > button { grid-column: 1 / -1; width: 100%; }
}

@media print {
  .sidebar, .topbar, .page-actions, .toolbar, .btn { display: none !important; }
  .app-shell { display: block; }
  .page-outlet { max-width: none; padding: 0; }
  .card, .stat-card { box-shadow: none; break-inside: avoid; }
}

/* ============================================================
   Destructive operations / danger zone
   ============================================================ */
.danger-confirm-modal { max-width: 620px; }
.danger-confirm-message { border: 1px solid #f0cbc7; background: #fff6f5; border-radius: 15px; padding: 15px; }
.danger-confirm-message .confirm-icon { color: #c8473e; background: #ffe6e3; }
.danger-confirm-code { display: grid; gap: 8px; margin-top: 18px; padding: 14px 16px; border: 1px dashed #e3a8a2; border-radius: 13px; background: #fffafa; }
.danger-confirm-code span { color: #7f4d48; font-size: 12px; }
.danger-confirm-code code { direction: ltr; text-align: left; user-select: all; font-size: 14px; font-weight: 700; color: #a7352e; overflow-wrap: anywhere; }
.danger-confirm-field { margin-top: 16px; }
.danger-confirm-field .form-control { border-color: #e5b5b0; background: #fffdfd; }
.danger-confirm-field .form-control:focus { border-color: #d34f45; box-shadow: 0 0 0 3px rgba(211,79,69,.11); }
.btn-danger:disabled { opacity: .48; cursor: not-allowed; }
.package-actions-grid .btn-danger:not(:disabled) { box-shadow: 0 7px 17px rgba(197,56,48,.12); }
@media (max-width: 640px) {
  .danger-confirm-modal { width: calc(100% - 20px); }
  .danger-confirm-code { padding: 12px; }
}