.vl-body {
  min-height: 100vh;
  background: #f4f6f9;
  color: var(--text);
  overflow-x: hidden;
}

html.dark .vl-body { background: #0d0d14; }
.vl-body button, .vl-body input, .vl-body textarea, .vl-body select { font: inherit; }
.vl-body button, .vl-body a { -webkit-tap-highlight-color: transparent; }
.vl-root { min-height: 100vh; }
.vl-login-page {
  min-height: 100vh;
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(22px, 4vw, 54px);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 12% 18%, rgba(99, 102, 241, .13), transparent 28%),
    radial-gradient(circle at 88% 82%, rgba(14, 165, 233, .12), transparent 31%),
    #f5f7fb;
}
.vl-login-page::before, .vl-login-page::after { content: ""; position: absolute; z-index: -1; border: 1px solid rgba(59, 130, 246, .12); border-radius: 50%; }
.vl-login-page::before { width: 420px; height: 420px; top: -240px; right: -120px; }
.vl-login-page::after { width: 320px; height: 320px; bottom: -200px; left: -70px; }
.vl-login-theme { position: fixed; top: 22px; left: 22px; z-index: 3; box-shadow: 0 8px 24px rgba(15, 23, 42, .08); }
.vl-login-shell { width: min(980px, 100%); min-height: 620px; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); overflow: hidden; background: var(--surface); border: 1px solid rgba(148, 163, 184, .28); border-radius: 26px; box-shadow: 0 28px 75px rgba(15, 23, 42, .14); }
.vl-login-intro { min-width: 0; display: flex; flex-direction: column; padding: clamp(30px, 4vw, 48px); color: #fff; background: linear-gradient(145deg, #172554 0%, #1d4ed8 52%, #4f46e5 100%); }
.vl-login-brand { width: fit-content; display: flex; direction: rtl; align-items: center; gap: 11px; color: #fff; text-decoration: none; }
.vl-login-brand > span { width: 44px; height: 44px; display: grid; place-items: center; color: #1d4ed8; background: #fff; border-radius: 14px; font-size: 17px; font-weight: 800; box-shadow: 0 10px 28px rgba(15, 23, 42, .18); }
.vl-login-brand > div { display: grid; }
.vl-login-brand strong { font-size: 15px; }
.vl-login-brand small { color: #bfdbfe; font-size: 10px; }
.vl-login-message { margin: clamp(42px, 8vh, 76px) 0 28px; }
.vl-login-message > span { display: inline-flex; padding: 6px 10px; color: #dbeafe; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); border-radius: 999px; font-size: 10px; }
.vl-login-message h1 { max-width: 390px; margin: 15px 0 10px; font-size: clamp(25px, 3vw, 34px); line-height: 1.55; }
.vl-login-message p { max-width: 410px; margin: 0; color: #dbeafe; font-size: 12px; line-height: 2; }
.vl-login-accounts { display: grid; gap: 7px; margin-top: auto; }
.vl-login-accounts > p { margin: 0 0 3px; color: #bfdbfe; font-size: 10px; }
.vl-login-account { min-width: 0; width: 100%; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 9px 10px; text-align: right; color: #fff; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.14); border-radius: 11px; cursor: pointer; transition: .16s ease; }
.vl-login-account:hover, .vl-login-account:focus-visible { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.35); outline: none; transform: translateX(-2px); }
.vl-login-avatar { width: 34px; height: 34px; display: grid; place-items: center; color: #1e40af; background: #dbeafe; border-radius: 10px; font-weight: 800; }
.vl-login-account > span:nth-child(2) { min-width: 0; display: grid; }
.vl-login-account bdi { overflow: hidden; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.vl-login-account small { color: #bfdbfe; font-size: 9px; }
.vl-login-account-arrow { color: #bfdbfe; font-size: 20px; line-height: 1; }
.vl-login-form-panel { min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: clamp(32px, 5vw, 64px); }
.vl-login-form-heading { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 30px; }
.vl-login-lock { width: 46px; height: 46px; flex: 0 0 46px; display: grid; place-items: center; color: var(--primary); background: var(--primary-soft); border-radius: 14px; font-size: 22px; }
.vl-login-form-heading > div { min-width: 0; }
.vl-login-form-heading small { color: var(--primary); font-size: 10px; font-weight: 700; }
.vl-login-form-heading h2 { margin: 4px 0 7px; font-size: clamp(20px, 2.3vw, 27px); line-height: 1.5; }
.vl-login-form-heading p { margin: 0; color: var(--muted); font-size: 11px; }
.vl-login-form { display: grid; gap: 18px; }
.vl-login-form > label { display: grid; gap: 7px; color: var(--text); font-size: 11px; font-weight: 600; }
.vl-login-form input { min-height: 48px !important; padding-inline: 13px !important; font-size: 12px; }
.vl-login-form input[dir="ltr"] { text-align: left; }
.vl-password-field { position: relative; display: block; direction: ltr; }
.vl-password-field input { padding-right: 13px !important; padding-left: 65px !important; }
.vl-password-field button { position: absolute; top: 50%; left: 8px; min-width: 49px; padding: 6px 8px; color: var(--primary); background: transparent; border: 0; border-radius: 7px; cursor: pointer; transform: translateY(-50%); font-size: 9px; font-weight: 700; }
.vl-password-field button:hover { background: var(--primary-soft); }
.vl-login-error { display: flex; align-items: center; gap: 9px; padding: 10px 11px; color: #b42318; background: #fff5f4; border: 1px solid #fee4e2; border-radius: 10px; }
.vl-login-error > span { width: 22px; height: 22px; flex: 0 0 22px; display: grid; place-items: center; color: #fff; background: #d92d20; border-radius: 50%; font-weight: 800; }
.vl-login-error p { margin: 0; font-size: 10px; line-height: 1.7; }
.vl-login-submit { min-height: 48px; margin-top: 2px; font-size: 12px; }
.vl-login-session-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 20px 0 0; color: var(--subtle); font-size: 9px; }
.vl-logout-button { min-height: 34px; padding: 6px 10px; color: var(--muted); background: transparent; border: 1px solid var(--border); border-radius: 9px; cursor: pointer; font-size: 10px; }
.vl-logout-button:hover { color: #b42318; background: #fff5f4; border-color: #fecdca; }
html.dark .vl-login-page { background: radial-gradient(circle at 12% 18%, rgba(79, 70, 229, .18), transparent 28%), radial-gradient(circle at 88% 82%, rgba(14, 165, 233, .12), transparent 31%), #0d0d14; }
html.dark .vl-login-shell { border-color: #2b3140; box-shadow: 0 28px 75px rgba(0, 0, 0, .38); }
html.dark .vl-login-error { color: #fca5a5; background: #301313; border-color: #632323; }
html.dark .vl-logout-button:hover { color: #fca5a5; background: #301313; border-color: #632323; }
.vl-app-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) 260px; direction: ltr; }
.vl-sidebar { grid-column: 2; grid-row: 1; }
.vl-shell-main { grid-column: 1; grid-row: 1; }
.vl-sidebar, .vl-shell-main, .vl-content { direction: rtl; }

.vl-dev-banner {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 7px 20px;
  color: #713f12;
  background: #fef3c7;
  border-bottom: 1px solid #f6d577;
  position: relative;
  z-index: 20;
}
.vl-dev-banner strong { font-weight: 700; }
.vl-dev-banner span { color: #854d0e; }
.vl-dev-banner label { margin-right: auto; display: flex; align-items: center; gap: 7px; font-size: 12px; }
.vl-dev-banner select { border: 1px solid #e2bd55; border-radius: 8px; padding: 4px 8px; background: #fffbeb; color: #713f12; }
html.dark .vl-dev-banner { color: #fde68a; background: #2b2313; border-color: #5d4513; }
html.dark .vl-dev-banner span { color: #fcd875; }
html.dark .vl-dev-banner select { color: #fde68a; background: #332814; border-color: #725719; }

.vl-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 22px 16px;
  background: var(--surface);
  border-left: 1px solid var(--border);
  z-index: 15;
}
.vl-dev-banner + .vl-app-shell .vl-sidebar { top: 42px; height: calc(100vh - 42px); }
.vl-brand { display: flex; direction: ltr; align-items: center; gap: 11px; padding: 0 8px 22px; color: var(--text); text-decoration: none; }
.vl-brand > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; color: #fff; background: linear-gradient(135deg, var(--primary), #7658e8); font-weight: 800; letter-spacing: -.5px; box-shadow: 0 10px 24px rgba(59, 130, 246, .25); }
.vl-brand div { display: grid; text-align: left; }
.vl-brand strong { font-size: 15px; }
.vl-brand small { color: var(--muted); font-size: 11px; }
.vl-main-nav { display: grid; gap: 4px; }
.vl-main-nav p { margin: 18px 12px 6px; color: var(--subtle); font-size: 11px; font-weight: 600; }
.vl-main-nav a { min-height: 43px; display: flex; align-items: center; gap: 11px; padding: 8px 11px; border-radius: 11px; color: var(--muted); text-decoration: none; font-weight: 500; transition: .16s ease; }
.vl-main-nav a:hover { color: var(--text); background: var(--surface-soft); }
.vl-main-nav a.is-active { color: var(--primary); background: var(--primary-soft); }
.vl-main-nav a.is-locked { opacity: .62; }
.vl-main-nav a small { margin-right: auto; font-size: 9px; color: var(--subtle); }
.vl-nav-icon { width: 24px; display: inline-grid; place-items: center; font-size: 18px; font-style: normal; }
.vl-sidebar-foot { margin-top: auto; display: grid; gap: 7px; padding: 14px 8px 0; border-top: 1px solid var(--border); }
.vl-sidebar-foot a { color: var(--muted); text-decoration: none; font-size: 12px; }
.vl-sidebar-foot a:hover { color: var(--primary); }

.vl-shell-main { min-width: 0; }
.vl-topbar { height: 72px; position: sticky; top: 0; z-index: 12; display: flex; align-items: center; gap: 18px; padding: 0 28px; background: color-mix(in srgb, var(--surface) 92%, transparent); border-bottom: 1px solid var(--border); backdrop-filter: blur(16px); }
.vl-dev-banner + .vl-app-shell .vl-topbar { top: 42px; }
.vl-breadcrumb { display: flex; align-items: center; gap: 8px; color: var(--subtle); font-size: 12px; }
.vl-breadcrumb a { color: var(--muted); text-decoration: none; }
.vl-breadcrumb strong { color: var(--text); }
.vl-user-tools { margin-right: auto; display: flex; align-items: center; gap: 10px; }
.vl-role-switch { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; }
.vl-role-switch select { min-width: 86px; padding: 7px 9px; color: var(--text); background: var(--surface-soft); border: 1px solid var(--border); border-radius: 9px; }
.vl-icon-button { width: 38px; height: 38px; display: grid; place-items: center; padding: 0; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.vl-icon-button:hover { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
.vl-user { display: flex; align-items: center; direction: ltr; gap: 9px; padding-right: 9px; border-right: 1px solid var(--border); }
.vl-user > span { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-weight: 700; }
.vl-user div { display: grid; text-align: left; }
.vl-user strong { font-size: 12px; }
.vl-user small { max-width: 190px; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 9px; }
.vl-mobile-menu { display: none; }

.vl-content { width: 100%; max-width: 1600px; margin: 0 auto; padding: 30px clamp(20px, 3vw, 46px) 70px; }
.vl-screen-header { min-height: 86px; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.vl-screen-header h1 { margin: 4px 0 7px; font-size: clamp(23px, 2.2vw, 32px); line-height: 1.35; letter-spacing: -.5px; }
.vl-screen-header p { max-width: 760px; margin: 0; color: var(--muted); line-height: 1.9; }
.vl-eyebrow { color: var(--primary); font-size: 11px; font-weight: 700; letter-spacing: .15px; }
.vl-renovation-code-value { display: inline-block; direction: ltr; unicode-bidi: isolate-override; text-align: left; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vl-header-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 9px; padding-top: 8px; flex-shrink: 0; }

.vl-button { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 15px; border: 1px solid transparent; border-radius: 10px; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; transition: .15s ease; }
.vl-button:hover { transform: translateY(-1px); }
.vl-button:disabled { opacity: .46; cursor: not-allowed; transform: none; }
.vl-button.is-primary { color: #fff; background: var(--primary); border-color: var(--primary); box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 25%, transparent); }
.vl-button.is-secondary { color: var(--text); background: var(--surface-soft); border-color: var(--border); }
.vl-button.is-ghost { color: var(--text); background: var(--surface); border-color: var(--border); }
.vl-button.is-danger { color: #b42318; background: #fff1f0; border-color: #fecaca; }
.vl-button.is-permit { color: #1e3a8a; background: #eff6ff; border-color: #bfdbfe; }
.vl-button.is-permit:hover { color: #1d4ed8; border-color: #60a5fa; }
.vl-button.is-full { width: 100%; }
.vl-text-link { color: var(--primary); text-decoration: none; font-weight: 600; }
.vl-text-button { padding: 4px; color: var(--primary); background: none; border: 0; cursor: pointer; font-weight: 600; }
.vl-badge { display: inline-flex; align-items: center; width: max-content; min-height: 24px; padding: 3px 9px; border-radius: 999px; font-size: 10px; white-space: nowrap; }
.vl-badge.is-neutral { color: var(--muted); background: var(--surface-soft); border: 1px solid var(--border); }
.vl-badge.is-info { color: #1d4ed8; background: #dbeafe; }
.vl-badge.is-success { color: #047857; background: #d1fae5; }
.vl-badge.is-warning { color: #92400e; background: #fef3c7; }
.vl-badge.is-danger { color: #b42318; background: #fee4e2; }
html.dark .vl-badge.is-info { color: #93c5fd; background: #172554; }
html.dark .vl-badge.is-success { color: #6ee7b7; background: #052e24; }
html.dark .vl-badge.is-warning { color: #fcd34d; background: #3b2b0d; }
html.dark .vl-badge.is-danger { color: #fca5a5; background: #3d1414; }

.vl-panel { min-width: 0; padding: 21px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 1px 2px rgba(16, 24, 40, .03); }
.vl-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 17px; }
.vl-panel-heading > div { display: grid; gap: 3px; }
.vl-panel-heading span { color: var(--muted); font-size: 10px; }
.vl-panel-heading h2 { margin: 0; font-size: 16px; }
.vl-panel-heading p { margin: 3px 0 0; color: var(--muted); }
.vl-panel code { font-family: Consolas, monospace; font-size: 11px; overflow-wrap: anywhere; }

.vl-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-bottom: 18px; }
.vl-metrics.is-six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.vl-metrics article { position: relative; min-height: 112px; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 18px 20px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 15px; }
.vl-metrics article::before { content: ""; position: absolute; top: 18px; bottom: 18px; right: 0; width: 3px; background: var(--primary); border-radius: 2px 0 0 2px; }
.vl-metrics article.is-success::before { background: var(--success); }
.vl-metrics article.is-warning::before { background: var(--warning); }
.vl-metrics article.is-danger::before { background: #ef4444; }
.vl-metrics span { color: var(--muted); font-size: 11px; }
.vl-metrics strong { font-size: 26px; }
.vl-metrics small { color: var(--subtle); }

.vl-toolbar { min-width: 0; display: grid; grid-template-columns: minmax(260px, 430px) minmax(150px, 190px) minmax(90px, 1fr); align-items: end; gap: 12px; margin-bottom: 18px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
.vl-toolbar label { min-width: 0; display: grid; align-items: stretch; gap: 6px; color: var(--muted); font-size: 11px; }
.vl-toolbar-caption { min-height: 16px; display: flex; align-items: center; padding-inline: 2px; line-height: 1.4; }
.vl-toolbar select, .vl-toolbar input { width: 100%; height: 48px; min-height: 48px; color: var(--text); background-color: var(--surface-soft); border: 1px solid var(--border); border-radius: 10px; outline: 0; }
.vl-search { max-width: none; }
.vl-search-control { min-width: 0; position: relative; display: block; }
.vl-search-control > span { position: absolute; top: 50%; right: 13px; z-index: 1; color: var(--subtle); font-size: 18px; line-height: 1; pointer-events: none; transform: translateY(-50%); }
.vl-search input { padding: 8px 40px 8px 12px; }
.vl-search input:focus, .vl-toolbar select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.vl-result-count { min-height: 48px; display: flex; align-items: center; align-self: end; justify-self: end; padding-inline: 4px; color: var(--muted); white-space: nowrap; }

.vl-case-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }
.vl-case-card { min-width: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 17px; transition: .18s ease; }
.vl-case-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); box-shadow: 0 15px 35px rgba(15, 23, 42, .07); }
.vl-case-card.is-stale { border-color: color-mix(in srgb, var(--warning) 45%, var(--border)); }
.vl-case-thumb { height: 154px; position: relative; overflow: hidden; background: #edf1f5; }
.vl-case-thumb > span { position: absolute; top: 10px; right: 10px; z-index: 4; padding: 4px 9px; border-radius: 999px; color: #334155; background: rgba(255,255,255,.85); backdrop-filter: blur(6px); font-size: 10px; }
.vl-card-body { padding: 18px; }
.vl-card-kicker { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 10px; }
.vl-card-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.vl-card-body h2 { margin: 9px 0 6px; font-size: 16px; }
.vl-card-body h2 a { color: var(--text); text-decoration: none; }
.vl-card-body > p { min-height: 24px; margin: 0 0 15px; color: var(--muted); font-size: 11px; }
.vl-progress-label { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 10px; color: var(--muted); }
.vl-progress { height: 6px; overflow: hidden; background: var(--surface-soft); border-radius: 999px; }
.vl-progress i { height: 100%; display: block; background: linear-gradient(90deg, var(--primary), #7658e8); border-radius: inherit; }
.vl-card-body dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 15px 0 0; padding-top: 13px; border-top: 1px solid var(--border); }
.vl-card-body dl div { display: grid; gap: 2px; }
.vl-card-body dt { color: var(--subtle); font-size: 9px; }
.vl-card-body dd { margin: 0; color: var(--muted); font-size: 10px; }
.vl-case-card > footer { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 12px 18px; background: var(--surface-soft); border-top: 1px solid var(--border); }
.vl-case-card > footer .vl-button { min-height: 34px; padding: 5px 10px; font-size: 10px; }
.vl-case-card > footer .vl-text-link { font-size: 10px; }

.vl-case-tabs { display: flex; align-items: center; gap: 4px; margin: -7px 0 22px; padding: 5px; overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.vl-case-tabs a { min-width: max-content; padding: 8px 13px; color: var(--muted); border-radius: 8px; text-decoration: none; font-size: 11px; }
.vl-case-tabs a.is-active { color: var(--primary); background: var(--primary-soft); font-weight: 600; }

.vl-state-card { display: flex; align-items: center; gap: 12px; margin-bottom: 17px; padding: 13px 16px; border: 1px solid; border-radius: 13px; }
.vl-state-card .vl-state-icon { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 50%; font-size: 18px; }
.vl-state-card > div { flex: 1; }
.vl-state-card strong { font-size: 12px; }
.vl-state-card p { margin: 3px 0 0; color: inherit; opacity: .85; font-size: 10px; line-height: 1.7; }
.vl-state-card .vl-button { min-height: 34px; font-size: 10px; }
.vl-state-card.is-stale { color: #854d0e; background: #fffbeb; border-color: #fde68a; }
.vl-state-card.is-stale .vl-state-icon { background: #fef3c7; }
.vl-state-card.is-conflict { color: #b42318; background: #fff1f0; border-color: #fecaca; }
.vl-state-card.is-conflict .vl-state-icon { background: #fee4e2; }
.vl-state-card.is-readonly { color: #475569; background: #f8fafc; border-color: #cbd5e1; }
.vl-state-card.is-readonly .vl-state-icon { background: #e2e8f0; }
html.dark .vl-state-card.is-stale { color: #fcd34d; background: #2d220e; border-color: #6f5110; }
html.dark .vl-state-card.is-conflict { color: #fca5a5; background: #301313; border-color: #722424; }
html.dark .vl-state-card.is-readonly { color: #cbd5e1; background: #171b24; border-color: #344054; }

.vl-overview-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, .72fr); gap: 16px; margin-bottom: 16px; }
.vl-plan-summary { padding: 0; overflow: hidden; }
.vl-case-facts dl { display: grid; margin: 0 0 18px; }
.vl-case-facts dl div { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.vl-case-facts dt { color: var(--muted); font-size: 10px; }
.vl-case-facts dd { margin: 0; font-weight: 600; }
.vl-case-facts .vl-button { width: 100%; }
.vl-case-revision-tools { margin-bottom: 16px; }
.vl-case-revision-tools .vl-panel-heading { align-items: flex-start; }
.vl-case-revision-tools .vl-panel-heading > p { max-width: 470px; margin: 0; color: var(--muted); font-size: 9px; line-height: 1.8; }
.vl-case-revision-grid { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.vl-revision-tool-card { min-width: 0; display: grid; align-content: start; gap: 12px; padding: 14px; background: var(--surface-soft); border: 1px solid var(--border); border-radius: 12px; }
.vl-revision-tool-card > div:first-child { min-width: 0; display: flex; align-items: flex-start; gap: 10px; }
.vl-revision-tool-card h3 { margin: 0; font-size: 12px; }
.vl-revision-tool-card p { margin: 3px 0 0; color: var(--muted); font-size: 9px; line-height: 1.8; }
.vl-revision-tool-icon { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; color: var(--primary); background: var(--primary-soft); border-radius: 10px; font-size: 17px; }
.vl-dropzone.is-compact { min-height: 108px; padding: 13px; }
.vl-dropzone.is-compact strong { color: var(--text); font-size: 10px; }
.vl-revision-tool-card > .vl-button { width: max-content; max-width: 100%; justify-self: end; white-space: normal; }
.vl-revision-confirm { display: flex !important; align-items: flex-start; gap: 8px !important; padding: 10px; color: var(--text) !important; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.vl-revision-confirm input { flex: 0 0 auto; margin-top: 3px; accent-color: var(--primary); }
.vl-revision-confirm span { min-width: 0; line-height: 1.8; }
.vl-two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.vl-timeline { list-style: none; margin: 0; padding: 0; }
.vl-timeline li { position: relative; min-height: 75px; display: flex; align-items: flex-start; gap: 11px; padding: 0 0 18px; }
.vl-timeline li > i { position: relative; width: 12px; height: 12px; flex: 0 0 12px; margin-top: 5px; background: var(--line); border: 3px solid var(--surface); border-radius: 50%; box-shadow: 0 0 0 1px var(--border); }
.vl-timeline li:not(:last-child) > i::after { content: ""; position: absolute; top: 11px; right: 4px; width: 1px; height: 63px; background: var(--border); }
.vl-timeline li.is-current > i { background: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.vl-timeline li > div { flex: 1; display: grid; gap: 3px; }
.vl-timeline p { margin: 0; color: var(--muted); font-size: 10px; }
.vl-timeline code { color: var(--subtle); }
.vl-timeline small, .vl-timeline bdi { max-width: 100%; overflow-wrap: anywhere; color: var(--subtle); font-size: 9px; }
.vl-timeline .vl-text-button { width: max-content; max-width: 100%; margin-top: 3px; text-align: right; white-space: normal; }
.vl-activity { list-style: none; display: grid; gap: 16px; margin: 0; padding: 0; }
.vl-activity li { display: flex; gap: 11px; }
.vl-activity li > span { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 10px; color: var(--primary); background: var(--primary-soft); font-weight: 700; }
.vl-activity li > div { min-width: 0; }
.vl-activity p { margin: 3px 0; color: var(--muted); line-height: 1.7; }
.vl-activity small { color: var(--subtle); font-size: 9px; }

.vl-form-layout { max-width: 1100px; display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, .72fr); gap: 17px; margin: 0 auto; }
.vl-upload-form { display: grid; gap: 17px; }
.vl-section-title { display: flex; align-items: center; gap: 11px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.vl-section-title > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: var(--primary); background: var(--primary-soft); font-weight: 700; }
.vl-section-title h2 { margin: 0; font-size: 15px; }
.vl-section-title p { margin: 2px 0 0; color: var(--muted); font-size: 10px; }
.vl-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.vl-body label:not(.vl-dropzone):not(.vl-segmented label):not(.vl-result-options label):not(.vl-check-grid label):not(.vl-toolbar label) { display: grid; gap: 7px; color: var(--muted); font-size: 10px; }
.vl-body input:not([type="radio"]):not([type="checkbox"]):not([type="file"]), .vl-body textarea, .vl-body select { width: 100%; min-height: 42px; padding: 9px 11px; color: var(--text); background: var(--surface-soft); border: 1px solid var(--border); border-radius: 10px; outline: 0; resize: vertical; }
.vl-body input:focus, .vl-body textarea:focus, .vl-body select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.vl-dropzone { min-height: 150px; display: grid; place-items: center; align-content: center; gap: 7px; padding: 20px; text-align: center; color: var(--muted); background: color-mix(in srgb, var(--primary-soft) 35%, var(--surface)); border: 1.5px dashed color-mix(in srgb, var(--primary) 50%, var(--border)); border-radius: 14px; cursor: pointer; }
.vl-dropzone:hover, .vl-dropzone:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.vl-dropzone input { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.vl-dropzone-icon { width: 34px; height: 34px; display: grid; place-items: center; color: var(--primary); background: var(--primary-soft); border-radius: 10px; font-size: 18px; }
.vl-dropzone strong { color: var(--text); }
.vl-dropzone small { font-size: 9px; }
.vl-dropzone em { min-height: 24px; max-width: 100%; padding: 5px 10px; overflow: hidden; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; font-size: 9px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.vl-dropzone:has(input:disabled) { cursor: not-allowed; opacity: .66; }
.vl-form-actions { display: flex; align-items: center; gap: 10px; padding-top: 13px; border-top: 1px solid var(--border); }
.vl-form-actions > span { color: var(--muted); font-size: 9px; line-height: 1.7; }
.vl-upload-progress { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 24px; background: rgba(15, 23, 42, .42); backdrop-filter: blur(3px); }
.vl-upload-progress[hidden] { display: none; }
.vl-upload-progress-card { width: min(420px, 100%); display: grid; justify-items: center; gap: 10px; padding: 28px 24px; text-align: center; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 24px 70px rgba(15, 23, 42, .22); }
.vl-upload-progress-card strong { margin-top: 4px; font-size: 15px; }
.vl-upload-progress-card p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.9; overflow-wrap: anywhere; }
.vl-upload-progress-card small { color: var(--subtle); font-size: 9px; }
.vl-upload-form.is-submitting { cursor: wait; }
.vl-help-panel { align-self: start; position: sticky; top: 95px; }
.vl-help-panel h2 { margin: 0 0 13px; font-size: 16px; }
.vl-help-panel ul { display: grid; gap: 10px; margin: 0; padding: 0 18px 18px 0; color: var(--muted); line-height: 1.75; font-size: 11px; }
.vl-info-box { padding: 13px; color: #1e3a5f; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 11px; }
.vl-info-box strong { font-size: 11px; }
.vl-info-box p { margin: 4px 0 0; color: inherit; line-height: 1.7; font-size: 10px; }
html.dark .vl-info-box { color: #bfdbfe; background: #14213a; border-color: #27446f; }

.vl-renovation-code { display: grid; gap: 14px; padding: 16px !important; background: color-mix(in srgb, var(--primary-soft) 28%, var(--surface)); border-color: color-mix(in srgb, var(--primary) 22%, var(--border)) !important; }
.vl-renovation-code > legend { color: var(--text); font-size: 12px; font-weight: 700; }
.vl-renovation-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.vl-renovation-heading > div { display: grid; gap: 3px; }
.vl-renovation-heading strong { color: var(--text); font-size: 12px; }
.vl-renovation-heading p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.8; }
.vl-renovation-heading > span { flex: 0 0 auto; padding: 6px 9px; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; font-size: 9px; }
.vl-renovation-grid { display: grid; grid-template-columns: repeat(7, minmax(72px, 1fr)); gap: 8px; direction: ltr; }
.vl-renovation-grid label { min-width: 0; direction: rtl; }
.vl-renovation-grid label > span { min-height: 18px; display: flex; align-items: center; gap: 4px; color: var(--text); font-weight: 600; }
.vl-renovation-grid label > span small { margin-right: auto; color: var(--subtle); font-size: 7px; font-weight: 400; }
.vl-renovation-grid input { direction: ltr; text-align: center; font-variant-numeric: tabular-nums; }
.vl-renovation-grid label.has-error input, .vl-renovation-grid input[aria-invalid=true] { border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239,68,68,.1); }
.vl-field-error { min-height: 14px; color: #b42318; font-size: 8px; line-height: 1.6; }
.vl-renovation-feedback { min-height: 34px; display: flex; align-items: center; gap: 8px; padding: 8px 10px; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 9px; font-size: 9px; line-height: 1.7; }
.vl-renovation-feedback bdi { color: var(--primary); font-weight: 700; }
.vl-renovation-feedback.is-valid { color: #047857; background: #ecfdf5; border-color: #a7f3d0; }
.vl-renovation-feedback.is-error { align-items: flex-start; flex-direction: column; gap: 2px; color: #b42318; background: #fff1f0; border-color: #fecaca; }
.vl-renovation-lookup { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.vl-renovation-lookup p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.7; }
.vl-renovation-lookup strong { color: var(--text); font-size: 10px; }
.vl-renovation-lookup.is-ready { padding: 10px 12px; color: #047857; background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 10px; }
.vl-renovation-lookup.is-ready > span { width: 28px; height: 28px; display: grid; flex: 0 0 28px; place-items: center; color: #fff; background: #059669; border-radius: 50%; }
.vl-renovation-lookup.is-error { padding: 10px 12px; color: #b42318; background: #fff7f6; border: 1px solid #fecaca; border-radius: 10px; }
.vl-mini-spinner { width: 16px; height: 16px; display: inline-block; margin-left: 6px; vertical-align: middle; border: 2px solid var(--primary-soft); border-top-color: var(--primary); border-radius: 50%; animation: vl-spin .8s linear infinite; }
html.dark .vl-renovation-feedback.is-valid, html.dark .vl-renovation-lookup.is-ready { color: #6ee7b7; background: #052e24; border-color: #166534; }
html.dark .vl-renovation-feedback.is-error, html.dark .vl-renovation-lookup.is-error { color: #fca5a5; background: #3d1414; border-color: #7f1d1d; }

.vl-workspace-grid { display: grid; grid-template-columns: minmax(235px, .72fr) minmax(460px, 1.65fr) minmax(260px, .82fr); gap: 13px; align-items: start; }
.vl-workspace-grid > .vl-panel, .vl-annotation-layout > .vl-panel { padding: 15px; }
.vl-work-list, .vl-target-list, .vl-rule-list, .vl-annotation-form { max-height: calc(100vh - 190px); overflow: auto; }
.vl-stack { display: grid; gap: 9px; }
.vl-proposal, .vl-target-row { padding: 12px; background: var(--surface-soft); border: 1px solid transparent; border-radius: 11px; }
.vl-proposal { cursor: pointer; }
.vl-proposal.is-selected { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 40%, transparent); }
.vl-proposal > div:first-child, .vl-target-row > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.vl-proposal strong, .vl-target-row strong { font-size: 11px; }
.vl-proposal p, .vl-target-row p { margin: 4px 0; color: var(--muted); font-size: 9px; }
.vl-proposal small { display: block; color: var(--success); font-size: 9px; line-height: 1.6; }
.vl-inline-actions { display: flex !important; justify-content: flex-start !important; gap: 4px !important; margin-top: 8px; }
.vl-inline-actions button, .vl-cad-status button { padding: 4px 7px; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 7px; font-size: 9px; cursor: pointer; }
.vl-inline-actions button:hover, .vl-cad-status button:hover { color: var(--primary); border-color: var(--primary); }
.vl-target-row details { margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--border); }
.vl-target-row summary { color: var(--primary); font-size: 9px; cursor: pointer; }
.vl-target-row dl { display: grid; gap: 7px; }
.vl-target-row dl div { display: grid; gap: 2px; }
.vl-target-row dt { color: var(--subtle); font-size: 8px; }
.vl-target-row dd { min-width: 0; margin: 0; overflow-wrap: anywhere; color: var(--muted); font-size: 8px; }
.vl-target-row.is-proposed { border-color: #f6c453; background: color-mix(in srgb, #fffbeb 72%, var(--surface)); }
.vl-target-row.is-proposed label { margin-top: 9px; }
.vl-target-create { min-width: 0; display: grid; gap: 11px; margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--border); }
.vl-target-create .vl-section-title { min-width: 0; align-items: flex-start; }
.vl-target-create .vl-section-title > div { min-width: 0; }
.vl-target-create .vl-section-title h3 { margin: 0; color: var(--text); font-size: 12px; }
.vl-target-create .vl-section-title p { overflow-wrap: anywhere; }
.vl-target-create select[multiple] { min-height: 112px; }
.vl-target-create small { overflow-wrap: anywhere; line-height: 1.7; }
.vl-scope-dot { width: 10px; height: 10px; flex: 0 0 10px; display: inline-block; border-radius: 3px; background: #64748b; }
.vl-scope-dot.is-entity { background: #10b981; border-radius: 50%; }
.vl-scope-dot.is-relation { background: #8b5cf6; transform: rotate(45deg); }
.vl-scope-dot.is-group { background: #f59e0b; }
.vl-scope-dot.is-region { background: #0ea5e9; border-radius: 50% 2px; }
.vl-scope-dot.is-floor { background: #ec4899; }
.vl-scope-dot.is-plan { background: #475569; border-radius: 1px; }
.vl-cad-status { display: flex; align-items: center; gap: 6px; padding: 10px 4px 0; border-top: 1px solid var(--border); }
.vl-cad-status span { margin-left: auto; color: var(--muted); font-size: 9px; }

.vl-cad { --vl-cad-paper: #fff; --vl-cad-ink: #404040; --vl-cad-ink-strong: #111; --vl-cad-ink-soft: #969696; --vl-cad-grid: #e5e5e5; --vl-cad-selection: #0b6fe8; --vl-cad-selection-fill: #dbeafe; width: 100%; overflow: hidden; color: var(--vl-cad-ink); background: var(--vl-cad-paper); border: 1px solid #d4d4d4; border-radius: 12px; box-shadow: 0 10px 28px rgba(15, 23, 42, .06); }
html.dark .vl-cad { color: var(--vl-cad-ink); background: var(--vl-cad-paper); border-color: #4b5563; }
.vl-cad-toolbar { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; color: var(--muted); background: var(--surface); border-bottom: 1px solid var(--border); }
.vl-cad-heading { display: flex; align-items: center; gap: 9px; }
.vl-cad-heading > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; color: #374151; background: #eef0f2; font-size: 18px; }
.vl-cad-heading > div { display: grid; gap: 1px; }
.vl-cad-heading strong { color: var(--text); font-size: 11px; }
.vl-cad-heading small { color: var(--muted); font-size: 9px; }
.vl-cad-actions { display: flex; align-items: center; gap: 5px; }
.vl-cad-toolbar button { width: 32px; height: 32px; padding: 0; color: #42464d; background: #f3f4f5; border: 1px solid #d8dadd; border-radius: 8px; cursor: pointer; }
.vl-cad-toolbar button:hover, .vl-cad-toolbar button:focus-visible { color: #1d4ed8; background: #eff6ff; border-color: #93c5fd; outline: none; }
.vl-cad-external { min-height: 32px; display: inline-flex; align-items: center; margin-right: 4px; padding: 4px 9px; color: #1d4ed8; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; font-size: 9px; text-decoration: none; white-space: nowrap; }
.vl-cad-viewport { position: relative; height: clamp(360px, 57vh, 640px); overflow: hidden; display: grid; place-items: center; background: var(--vl-cad-paper); box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .025); color-scheme: light; touch-action: none; }
.vl-cad-viewport.is-interactive { cursor: grab; }
.vl-cad-viewport.is-panning { cursor: grabbing; }
.vl-cad-viewport svg { width: 100%; height: 100%; display: block; background: var(--vl-cad-paper); }
.vl-cad-unavailable { min-height: 180px; display: grid; place-items: center; align-content: center; gap: 8px; padding: 24px; color: var(--muted); text-align: center; }
.vl-cad-unavailable span { font-size: 28px; }
.vl-cad-unavailable strong { max-width: 320px; font-size: 11px; font-weight: 600; }
.vl-cad.is-live .plan-svg-root { background: var(--vl-cad-paper); }
.vl-cad.is-live .plan-svg-root .bg { fill: var(--vl-cad-paper) !important; stroke: none !important; }
.vl-cad.is-live .plan-svg-root .grid { fill: none !important; stroke: var(--vl-cad-grid) !important; }
.vl-cad.is-live .plan-svg-root .plan-frame { fill: none !important; stroke: var(--vl-cad-ink-soft) !important; }
.vl-cad.is-live .plan-svg-root .site-boundary { fill: none !important; stroke: #262626 !important; }
.vl-cad.is-live .plan-svg-root .wall { fill: #d4d4d4 !important; stroke: var(--vl-cad-ink-strong) !important; }
.vl-cad.is-live .plan-svg-root .column { fill: #737373 !important; stroke: var(--vl-cad-ink-strong) !important; }
.vl-cad.is-live .plan-svg-root :is(.slot, .slot-accessible, .slot-tandem, .door, .door-ped, .yard, .driveway, .ramp, .other) { fill: none !important; stroke: var(--vl-cad-ink) !important; }
.vl-cad.is-live .plan-svg-root .stair { fill: url(#stairHatch) !important; stroke: var(--vl-cad-ink) !important; }
.vl-cad.is-live .plan-svg-root #stairHatch rect { fill: #f3f4f6 !important; stroke: none !important; }
.vl-cad.is-live .plan-svg-root #stairHatch line { stroke: var(--vl-cad-ink-soft) !important; }
.vl-cad.is-live .plan-svg-root .elevator { fill: #e5e7eb !important; stroke: var(--vl-cad-ink) !important; }
.vl-cad.is-live .plan-svg-root .elevator-detail { stroke: var(--vl-cad-ink) !important; }
.vl-cad.is-live .plan-svg-root .car-topview-image { filter: grayscale(1) contrast(1.02); opacity: .84; }
.vl-cad.is-live .plan-svg-root :is(.car-violation-glass-surface, .car-violation-glass) { opacity: 0 !important; pointer-events: none; }
.vl-cad.is-live .plan-svg-root .car-violation-glass { fill: transparent !important; stroke: transparent !important; }
.vl-cad.is-live .plan-svg-root :is(.label, .slot-number) { fill: #262626 !important; stroke: var(--vl-cad-paper) !important; }
.vl-cad.is-live .plan-svg-root .dim-text { fill: #737373 !important; stroke: var(--vl-cad-paper) !important; }
.vl-cad.is-live .plan-svg-root .title { fill: var(--vl-cad-ink-strong) !important; stroke: none !important; }
.vl-cad.is-live .plan-svg-root :is(.legend-text, .scaletext) { fill: #737373 !important; stroke: none !important; }
.vl-cad.is-live .plan-svg-root :is(.scalebar, .dim-line, .dim-ext, .dim-tick) { stroke: #737373 !important; }
.vl-cad.is-live .plan-svg-root marker path { fill: #737373 !important; stroke: none !important; }
.vl-cad.is-live .plan-svg-root [data-entity-id] { cursor: pointer; transition: filter .14s ease, opacity .14s ease; }
.vl-cad.is-live .plan-svg-root [data-entity-id]:not(.is-selected):hover,
.vl-cad.is-live .plan-svg-root [data-entity-id]:not(.is-selected):focus { filter: contrast(1.3) drop-shadow(0 1px 1px rgba(15, 23, 42, .22)); outline: none; }
.vl-cad.is-live .plan-svg-root [data-entity-id].is-selected { filter: drop-shadow(0 0 2px rgba(11, 111, 232, .42)); }
.vl-cad.is-live .plan-svg-root [data-entity-id].is-selected,
.vl-cad.is-live .plan-svg-root [data-entity-id].is-selected :is(path, polygon, polyline, rect, line, circle, ellipse) { stroke: var(--vl-cad-selection) !important; }
.vl-cad.is-live .plan-svg-root [data-entity-id].is-selected:is(.wall, .column, .stair, .elevator),
.vl-cad.is-live .plan-svg-root [data-entity-id].is-selected.elevator polygon { fill: var(--vl-cad-selection-fill) !important; }
.vl-cad.is-live .plan-svg-root [data-entity-id].is-selected text { fill: var(--vl-cad-selection) !important; stroke: var(--vl-cad-paper) !important; font-weight: 700; }
.vl-cad.is-live .plan-svg-root [data-entity-id].is-selected .car-violation-glass { fill: transparent !important; stroke: var(--vl-cad-selection) !important; stroke-width: 3px; opacity: 1 !important; }
.vl-sheet { fill: var(--vl-cad-paper); }
.vl-grid { fill: url(#vl-cad-grid); }
.vl-grid-line { fill: none; stroke: #d4d4d4; stroke-width: .55; opacity: .34; }
.vl-hatch { fill: url(#vl-cad-hatch); stroke: none; opacity: .62; }
.vl-hatch-line { stroke: #737373; stroke-width: 1; opacity: .38; }
.vl-wall-heavy { fill: #181818; }
.vl-wall, .vl-wall-thin, .vl-centerline, .vl-element-line, .vl-vehicle-line, .vl-ramp-line, .vl-direction-line, .vl-stair-line, .vl-region-outline, .vl-turning-path, .vl-dimensions path, .vl-title-block path { fill: none; stroke: var(--vl-cad-ink); stroke-width: 2.2; vector-effect: non-scaling-stroke; }
.vl-wall { stroke: var(--vl-cad-ink-strong); stroke-width: 3.4; }
.vl-wall-thin { stroke: #595959; stroke-width: 1.35; }
.vl-centerline { stroke: #8a8a8a; stroke-width: 1; stroke-dasharray: 12 8; }
.vl-vehicle-line, .vl-ramp-line, .vl-stair-line { stroke-width: 1.2; }
.vl-direction-line, .vl-turning-path { stroke-width: 1.6; }
.vl-region-outline { stroke: #737373; stroke-width: 1.4; stroke-dasharray: 10 7; }
.vl-element-line.is-dashed { stroke-dasharray: 8 5; }
.vl-arrow-head { fill: #525252; }
.vl-columns rect { fill: #262626; }
.vl-plan-label, .vl-dimensions text, .vl-title-block text { font-family: "IRANYekanXFaNum", Tahoma, sans-serif; font-size: 18px; pointer-events: none; }
.vl-plan-label { fill: #262626; }
.vl-dimensions text, .vl-title-block text { fill: #737373; }
.vl-dimensions text { font-size: 14px; }
.vl-dimensions path, .vl-title-block path { stroke-width: 1; }
.vl-title-block text { font-size: 13px; }
.vl-hit-area { fill: transparent; stroke: transparent; pointer-events: all; }
.vl-drawing-element { cursor: pointer; outline: none; }
.vl-drawing-element .vl-element-line, .vl-drawing-element .vl-region-outline, .vl-drawing-element .vl-turning-path, .vl-drawing-element .vl-direction-line { transition: stroke .14s ease, stroke-width .14s ease, filter .14s ease; }
.vl-drawing-element:hover .vl-element-line, .vl-drawing-element:hover .vl-region-outline, .vl-drawing-element:hover .vl-turning-path, .vl-drawing-element:focus .vl-element-line, .vl-drawing-element:focus .vl-region-outline, .vl-drawing-element:focus .vl-turning-path { stroke: #111827; stroke-width: 2.6; }
.vl-drawing-element.is-selected .vl-element-line, .vl-drawing-element.is-selected .vl-region-outline, .vl-drawing-element.is-selected .vl-turning-path, .vl-drawing-element.is-selected .vl-direction-line, .vl-drawing-element.is-selected .vl-vehicle-line, .vl-drawing-element.is-selected .vl-ramp-line, .vl-drawing-element.is-selected .vl-stair-line { stroke: var(--vl-cad-selection); stroke-width: 3.3; filter: drop-shadow(0 0 2px rgba(11, 111, 232, .42)); }
.vl-drawing-element.is-selected .vl-plan-label { fill: var(--vl-cad-selection); font-weight: 700; }
.vl-cad-tooltip { position: absolute; z-index: 4; max-width: 210px; padding: 7px 10px; color: #fff; background: rgba(31,41,55,.94); border-radius: 8px; box-shadow: 0 8px 22px rgba(0,0,0,.2); font-size: 10px; pointer-events: none; }
.vl-cad-footer { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 12px; color: var(--muted); background: var(--surface); border-top: 1px solid var(--border); font-size: 9px; }
.vl-cad-footer span { display: flex; align-items: center; gap: 6px; }
.vl-cad-footer i { width: 18px; height: 2px; display: inline-block; background: #596069; }
.vl-cad-footer strong { color: #1d4ed8; font-size: 9px; font-weight: 600; }
.vl-cad.is-compact { height: 154px; border: 0; border-radius: 0; pointer-events: none; }
.vl-cad.is-compact .vl-cad-toolbar, .vl-cad.is-compact .vl-cad-footer { display: none; }
.vl-cad.is-compact .vl-cad-viewport { height: 154px; }
.vl-cad.is-compact .vl-plan-label, .vl-cad.is-compact .vl-dimensions, .vl-cad.is-compact .vl-title-block { display: none; }

.vl-annotation-layout { display: grid; grid-template-columns: minmax(235px, .72fr) minmax(430px, 1.55fr) minmax(300px, .9fr); gap: 13px; align-items: start; }
.vl-annotation-layout.is-rules-collapsed { grid-template-columns: minmax(430px, 1.55fr) minmax(300px, .9fr); }
.vl-annotation-layout.is-rules-collapsed .vl-rule-list { display: none; }
.vl-annotation-layout.is-form-collapsed { grid-template-columns: minmax(235px, .72fr) minmax(430px, 1.55fr); }
.vl-annotation-layout.is-form-collapsed .vl-annotation-form { display: none; }
.vl-annotation-layout.is-rules-collapsed.is-form-collapsed { grid-template-columns: minmax(0, 1fr); }
.vl-rule-list { display: grid; align-content: start; gap: 5px; }
.vl-rule-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; padding: 4px; margin: 2px 0 7px; background: var(--surface-soft); border: 1px solid var(--border); border-radius: 11px; }
.vl-rule-tabs button { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 8px 5px; color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 8px; font: inherit; font-size: 8px; white-space: nowrap; cursor: pointer; }
.vl-rule-tabs button.is-active { color: var(--primary); background: var(--surface); border-color: color-mix(in srgb, var(--primary) 24%, var(--border)); box-shadow: 0 2px 7px rgba(15, 23, 42, .05); }
.vl-rule-tabs b { min-width: 18px; padding: 1px 4px; color: inherit; background: color-mix(in srgb, currentColor 9%, transparent); border-radius: 9px; font-size: 8px; text-align: center; }
.vl-rule-items { min-width: 0; display: grid; gap: 7px; }
.vl-rule-card { min-width: 0; overflow: hidden; border: 1px solid transparent; border-radius: 10px; }
.vl-rule-card.is-active { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 30%, transparent); }
.vl-rule-item { width: 100%; display: flex; align-items: center; gap: 9px; padding: 10px; text-align: right; color: var(--text); background: transparent; border: 1px solid transparent; border-radius: 10px; cursor: pointer; }
.vl-rule-item:hover { background: var(--surface-soft); }
.vl-rule-item.is-active { background: transparent; border-color: transparent; }
.vl-rule-item > div { min-width: 0; flex: 1; display: grid; gap: 3px; }
.vl-rule-item strong { font-size: 10px; line-height: 1.6; overflow-wrap: anywhere; }
.vl-rule-item small { color: var(--muted); font-size: 8px; }
.vl-rule-item > i { width: 18px; height: 18px; display: grid; place-items: center; color: #92400e; background: #fef3c7; border-radius: 50%; font-size: 9px; font-style: normal; }
.vl-rule-item > i.is-pending { color: #475569; background: #e2e8f0; }
.vl-rule-disclosure { min-width: 0; margin: -3px 9px 7px; border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent); }
.vl-rule-disclosure summary { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 7px; padding: 7px 2px 2px; color: var(--primary); font-size: 8px; font-weight: 700; list-style: none; cursor: pointer; }
.vl-rule-disclosure summary::-webkit-details-marker { display: none; }
.vl-rule-disclosure summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 5px; }
.vl-rule-disclosure summary .is-open { display: none; }
.vl-rule-disclosure summary i { flex: 0 0 auto; font-size: 12px; font-style: normal; transition: transform .18s ease; }
.vl-rule-disclosure[open] summary .is-closed { display: none; }
.vl-rule-disclosure[open] summary .is-open { display: inline; }
.vl-rule-disclosure[open] summary i { transform: rotate(180deg); }
.vl-rule-reference { min-width: 0; display: grid; gap: 8px; padding: 8px 0 3px; }
.vl-rule-reference section { min-width: 0; display: grid; gap: 3px; }
.vl-rule-reference strong { color: var(--text); font-size: 8px; }
.vl-rule-reference p { min-width: 0; margin: 0; color: var(--muted); font-size: 8px; line-height: 1.85; overflow-wrap: anywhere; }
.vl-rule-reference section:last-child p { color: var(--text); font-weight: 600; }
.vl-rule-list-empty { padding: 18px 10px; color: var(--muted); text-align: center; }
.vl-rule-list-empty strong { color: var(--text); font-size: 10px; }
.vl-rule-list-empty p { margin: 5px 0 0; font-size: 8px; line-height: 1.7; }
.vl-selection-strip { display: flex; align-items: center; gap: 8px; padding: 10px 5px 0; color: var(--muted); font-size: 9px; }
.vl-selection-strip small { margin-right: auto; }
.vl-rule-summary { padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.vl-rule-summary > div { display: flex; gap: 5px; }
.vl-rule-summary h2 { margin: 9px 0 5px; font-size: 15px; line-height: 1.6; }
.vl-rule-summary p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.7; }
.vl-contract-pending { display: flex; align-items: flex-start; gap: 10px; padding: 14px; margin-top: 14px; color: #475569; background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 11px; }
.vl-contract-pending > span { width: 30px; height: 30px; display: grid; flex: 0 0 30px; place-items: center; color: #475569; background: #e2e8f0; border-radius: 50%; }
.vl-contract-pending strong { display: block; color: var(--text); font-size: 10px; }
.vl-contract-pending p { margin: 5px 0 0; font-size: 9px; line-height: 1.8; }
.vl-contract-pending blockquote { margin: 10px 0 0; padding: 9px 10px; color: var(--muted); background: var(--surface); border-right: 3px solid var(--border); border-radius: 7px; font-size: 8px; line-height: 1.8; overflow-wrap: anywhere; }
html.dark .vl-contract-pending { color: #cbd5e1; background: #172033; border-color: #334155; }
.vl-annotation-form form { display: grid; gap: 15px; }
.vl-annotation-form form section { display: grid; gap: 10px; padding-top: 13px; border-top: 1px solid var(--border); }
.vl-annotation-form form section:first-of-type { border: 0; }
.vl-annotation-form h3 { margin: 0; font-size: 11px; }
.vl-role-binding { display: grid; gap: 9px; }
.vl-role-binding.is-multiple { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vl-role-binding label > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vl-role-binding label small { color: var(--subtle); font-size: 8px; font-weight: 400; }
.vl-role-binding select[multiple] { min-height: 104px; }
.vl-ordered-bindings, .vl-contract-fields { min-width: 0; display: grid; gap: 9px; padding: 10px; background: var(--surface-soft); border: 1px solid var(--border); border-radius: 10px; }
.vl-contract-fields h4 { margin: 0; color: var(--text); font-size: 10px; }
.vl-contract-fields textarea { min-width: 0; }
.vl-annotation-history { margin-top: 14px; }
.vl-annotation-history-list { display: grid; gap: 8px; }
.vl-annotation-history-list article { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 11px 12px; background: var(--surface-muted); border: 1px solid var(--border); border-radius: 10px; }
.vl-annotation-history-list article.is-active { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 38%, var(--border)); }
.vl-annotation-history-list strong { display: block; color: var(--text); font-size: 10px; }
.vl-annotation-history-list p { margin: 3px 0 0; color: var(--muted); font-size: 9px; }
.vl-segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 4px; background: var(--surface-soft); border-radius: 10px; }
.vl-segmented label { cursor: pointer; }
.vl-segmented input { position: absolute; opacity: 0; }
.vl-segmented span { min-height: 34px; display: grid; place-items: center; border-radius: 8px; color: var(--muted); font-size: 10px; }
.vl-segmented input:checked + span { color: var(--primary); background: var(--surface); box-shadow: 0 1px 3px rgba(15,23,42,.1); font-weight: 600; }
.vl-field-help { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.7; }
.vl-assisted-fields { display: grid; gap: 8px; padding: 10px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px; }
.vl-assisted-fields[hidden] { display: none; }
html.dark .vl-assisted-fields { background: #14213a; border-color: #27446f; }
.vl-applicability-help { margin: 0; padding: 9px 10px; color: #1e3a5f; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 9px; font-size: 9px; line-height: 1.8; }
.vl-result-decision { display: grid; gap: 9px; transition: opacity .15s ease, background .15s ease; }
.vl-result-decision.is-disabled { opacity: .62; background: var(--surface-soft); }
.vl-result-options { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.vl-result-options label { cursor: pointer; }
.vl-result-decision:disabled .vl-result-options label { cursor: not-allowed; }
.vl-result-options input { position: absolute; opacity: 0; }
.vl-result-options span { min-height: 34px; display: grid; place-items: center; padding: 4px; color: var(--muted); background: var(--surface-soft); border: 1px solid transparent; border-radius: 8px; font-size: 9px; }
.vl-result-options input:checked + span { border-color: currentColor; font-weight: 600; }
.vl-result-options span.is-violation { color: #b42318; }
.vl-result-options span.is-compliant { color: #047857; }
.vl-result-options span.is-insufficient_information { color: #7c3aed; }
.vl-result-options span.is-missing_data { color: #92400e; }
html.dark .vl-applicability-help { color: #bfdbfe; background: #14213a; border-color: #27446f; }
.vl-check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.vl-check-grid label { display: flex; align-items: center; gap: 7px; padding: 8px; color: var(--muted); background: var(--surface-soft); border: 1px solid var(--border); border-radius: 8px; font-size: 9px; }
.vl-check-grid input { accent-color: var(--primary); }
.vl-body fieldset { min-width: 0; margin: 0; padding: 10px; border: 1px solid var(--border); border-radius: 10px; }
.vl-body legend { padding: 0 6px; color: var(--muted); font-size: 9px; }
.vl-selection-summary { display: flex; align-items: flex-start; gap: 9px; padding: 10px; background: var(--surface-soft); border: 1px solid var(--border); border-radius: 10px; }
.vl-selection-summary .vl-scope-dot { margin-top: 4px; }
.vl-selection-summary p { margin: 3px 0 0; color: var(--muted); font-size: 9px; line-height: 1.6; }

.vl-permit-backdrop { position: fixed; inset: 0; z-index: 70; width: 100%; height: 100%; padding: 0; background: rgba(15,23,42,.34); border: 0; cursor: default; backdrop-filter: blur(2px); }
.vl-permit-drawer { position: fixed; top: 0; bottom: 0; left: 0; z-index: 71; width: min(520px, calc(100vw - 16px)); max-width: 100vw; display: grid; grid-template-rows: auto minmax(0, 1fr); direction: rtl; overflow: hidden; background: var(--surface); border-right: 1px solid var(--border); box-shadow: 24px 0 60px rgba(15,23,42,.2); }
.vl-permit-drawer, .vl-permit-drawer * { box-sizing: border-box; }
.vl-permit-drawer > header { min-width: 0; min-height: 104px; display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding: 22px; overflow: hidden; border-bottom: 1px solid var(--border); }
.vl-permit-drawer > header > div { min-width: 0; display: grid; gap: 3px; }
.vl-permit-drawer > header span { color: var(--primary); font-size: 10px; font-weight: 700; }
.vl-permit-drawer > header h2 { margin: 0; overflow-wrap: anywhere; font-size: 18px; line-height: 1.7; }
.vl-permit-drawer > header p { margin: 0; color: var(--muted); font-size: 10px; }
.vl-permit-drawer > header .vl-icon-button { flex: 0 0 38px; }
.vl-permit-body { width: 100%; min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 22px; background: var(--surface-soft); }
.vl-permit-state { min-height: 320px; display: grid; place-items: center; align-content: center; gap: 9px; text-align: center; }
.vl-permit-state > span:not(.vl-spinner) { width: 52px; height: 52px; display: grid; place-items: center; color: var(--primary); background: var(--primary-soft); border-radius: 16px; font-size: 24px; }
.vl-permit-state.is-error > span { color: #b42318; background: #fee4e2; }
.vl-permit-state strong { font-size: 14px; }
.vl-permit-state p { max-width: 300px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.9; }
.vl-permit-plan { width: 100%; min-width: 0; display: grid; gap: 3px; margin-top: 10px; padding: 12px; overflow-wrap: anywhere; text-align: right; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.vl-permit-plan small { color: var(--muted); }
.vl-permit-document { width: 100%; min-width: 0; max-width: 100%; padding: 19px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 10px 30px rgba(15,23,42,.06); }
.vl-permit-document > header { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.vl-permit-document > header > span { width: 40px; height: 40px; display: grid; flex: 0 0 40px; place-items: center; color: #1d4ed8; background: #dbeafe; border-radius: 11px; font-size: 21px; }
.vl-permit-document > header > div { min-width: 0; flex: 1 1 auto; display: grid; gap: 2px; }
.vl-permit-document > header small { color: var(--muted); font-size: 8px; }
.vl-permit-document > header h3 { margin: 0; overflow-wrap: anywhere; font-size: 13px; line-height: 1.7; }
.vl-permit-document > header .vl-badge { width: max-content; max-width: 100%; justify-self: start; margin-top: 5px; overflow-wrap: normal; word-break: normal; white-space: normal; text-align: center; }
.vl-permit-document dl { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; margin: 14px 0; }
.vl-permit-document dl div { min-width: 0; display: grid; gap: 3px; padding: 11px 4px; border-bottom: 1px solid var(--border); }
.vl-permit-document dt { color: var(--muted); font-size: 8px; }
.vl-permit-document dd { min-width: 0; margin: 0; overflow-wrap: anywhere; word-break: break-word; color: var(--text); font-size: 10px; font-weight: 600; }
.vl-permit-document > section { min-width: 0; margin-bottom: 14px; padding: 12px; overflow: hidden; color: #1e3a5f; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px; }
.vl-permit-document > section strong { font-size: 9px; }
.vl-permit-document > section p { margin: 4px 0 0; overflow-wrap: anywhere; white-space: pre-line; font-size: 9px; line-height: 1.9; }
.vl-permit-notice { color: #713f12 !important; background: #fffbeb !important; border-color: #fde68a !important; }
.vl-permit-sections { min-width: 0; display: grid; gap: 9px; margin: 14px 0; }
.vl-permit-section { min-width: 0; overflow: hidden; background: var(--surface-soft); border: 1px solid var(--border); border-radius: 11px; }
.vl-permit-section > summary { min-width: 0; display: flex; align-items: center; gap: 8px; padding: 12px; color: var(--text); cursor: pointer; list-style: none; font-size: 10px; font-weight: 700; }
.vl-permit-section > summary::-webkit-details-marker { display: none; }
.vl-permit-section > summary::before { content: "‹"; flex: 0 0 auto; color: var(--primary); font-size: 18px; line-height: 1; transition: transform .15s ease; }
.vl-permit-section[open] > summary::before { transform: rotate(-90deg); }
.vl-permit-section > summary span { min-width: 0; overflow-wrap: anywhere; }
.vl-permit-section > summary small { flex: 0 0 auto; margin-right: auto; color: var(--muted); font-size: 8px; font-weight: 500; }
.vl-permit-section-body { min-width: 0; display: grid; gap: 8px; padding: 0 12px 12px; border-top: 1px solid var(--border); }
.vl-permit-section-facts { margin: 0 !important; }
.vl-permit-row { min-width: 0; padding: 11px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; }
.vl-permit-row h4 { margin: 0; overflow-wrap: anywhere; color: var(--text); font-size: 10px; line-height: 1.8; }
.vl-permit-row p, .vl-permit-note { margin: 7px 0 0; overflow-wrap: anywhere; word-break: break-word; white-space: pre-line; color: var(--muted); font-size: 9px; line-height: 1.9; }
.vl-permit-row-facts { grid-template-columns: minmax(0, 1fr) !important; margin: 7px 0 0 !important; }
.vl-permit-row-facts div { padding: 7px 0 !important; }
html.dark .vl-permit-document > section { color: #bfdbfe; background: #14213a; border-color: #27446f; }
html.dark .vl-permit-notice { color: #fde68a !important; background: #2b2313 !important; border-color: #725719 !important; }

.vl-coverage-table { display: grid; max-width: 100%; overflow-x: auto; }
.vl-table-head, .vl-table-row { display: grid; grid-template-columns: minmax(280px, 1.5fr) minmax(170px, 1fr) 140px 70px; gap: 12px; align-items: center; padding: 11px 10px; border-bottom: 1px solid var(--border); }
.vl-coverage-table > * { min-width: 720px; }
.vl-table-head { color: var(--subtle); background: var(--surface-soft); border-radius: 9px 9px 0 0; font-size: 9px; }
.vl-table-row:last-child { border-bottom: 0; }
.vl-table-row > span:first-child { display: grid; grid-template-columns: 14px 1fr; align-items: center; gap: 3px 7px; }
.vl-table-row > span:first-child small { grid-column: 2; color: var(--muted); font-size: 8px; }
.vl-table-row strong { font-size: 10px; }
.vl-table-row > span:nth-child(2) { color: var(--muted); font-size: 10px; }
.vl-candidate-resolution-panel { margin-top: 16px; }
.vl-candidate-resolution-panel .vl-panel-heading { align-items: flex-start; }
.vl-candidate-resolution-panel .vl-panel-heading > p { max-width: 450px; margin: 0; color: var(--muted); font-size: 9px; line-height: 1.8; }
.vl-candidate-resolution-list { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.vl-candidate-resolution-card { min-width: 0; display: grid; grid-template-columns: minmax(0, .78fr) minmax(240px, 1.22fr); gap: 13px; padding: 14px; background: var(--surface-soft); border: 1px solid var(--border); border-radius: 12px; }
.vl-candidate-resolution-summary { min-width: 0; display: grid; align-content: start; justify-items: start; gap: 5px; }
.vl-candidate-resolution-summary h3 { max-width: 100%; margin: 0; overflow-wrap: anywhere; font-size: 11px; }
.vl-candidate-resolution-summary p, .vl-candidate-resolution-summary small { max-width: 100%; margin: 0; overflow-wrap: anywhere; color: var(--muted); font-size: 9px; line-height: 1.8; }
.vl-candidate-number { color: var(--primary); font-size: 8px; font-weight: 700; }
.vl-candidate-resolution-form { min-width: 0; display: grid; align-content: start; gap: 8px; }
.vl-candidate-resolution-form > label { min-width: 0; display: grid; gap: 5px; color: var(--text); font-size: 9px; font-weight: 650; }
.vl-candidate-resolution-form select, .vl-candidate-resolution-form textarea { min-width: 0; width: 100%; }
.vl-candidate-resolution-form .vl-button { width: max-content; max-width: 100%; justify-self: end; white-space: normal; }
.vl-candidate-readonly { min-width: 0; margin: 0; padding: 10px; overflow-wrap: anywhere; color: var(--muted); background: var(--surface); border: 1px dashed var(--border); border-radius: 9px; font-size: 9px; line-height: 1.8; }

.vl-mapping-layout { display: grid; grid-template-columns: minmax(420px, 1.15fr) minmax(320px, .85fr); gap: 16px; align-items: start; }
.vl-mapping-list { display: grid; gap: 7px; }
.vl-mapping-row { width: 100%; display: grid; grid-template-columns: 85px minmax(0, 1fr) 65px; align-items: center; gap: 10px; padding: 12px; text-align: right; color: var(--text); background: var(--surface-soft); border: 1px solid transparent; border-radius: 10px; cursor: pointer; }
.vl-mapping-row.is-active { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 35%, transparent); }
.vl-mapping-row.is-conflict { border-color: #fca5a5; }
.vl-mapping-row > div { display: grid; gap: 3px; }
.vl-mapping-row strong { font-size: 10px; }
.vl-mapping-row small { color: var(--muted); font-size: 8px; }
.vl-mapping-row em { color: var(--muted); font-size: 8px; font-style: normal; }
.vl-mapping-detail { position: sticky; top: 92px; }
.vl-binding-side { display: grid; gap: 7px; margin: 13px 0; }
.vl-binding-side h3 { margin: 0 0 4px; font-size: 10px; }
.vl-binding-side article { display: flex; align-items: flex-start; gap: 9px; padding: 10px; background: var(--surface-soft); border: 1px solid var(--border); border-radius: 9px; }
.vl-binding-side article > span:not(.vl-scope-dot) { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; color: #fff; background: #64748b; font-size: 9px; }
.vl-binding-side article > div { min-width: 0; display: grid; gap: 3px; }
.vl-binding-side small { color: var(--muted); font-size: 8px; }
.vl-binding-side code { color: var(--subtle); font-size: 8px; }
.vl-binding-side.is-runtime article { border-style: dashed; }
.vl-muted { color: var(--muted); font-size: 10px; line-height: 1.7; }

.vl-review-layout { display: grid; grid-template-columns: minmax(250px, .65fr) minmax(520px, 1.65fr); gap: 16px; align-items: start; }
.vl-review-queue { display: grid; gap: 7px; }
.vl-review-item { display: grid; gap: 5px; padding: 12px; text-align: right; color: var(--text); background: var(--surface-soft); border: 1px solid transparent; border-radius: 10px; cursor: pointer; }
.vl-review-item.is-active { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 30%, transparent); }
.vl-review-item > div { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.vl-review-item strong { font-size: 10px; }
.vl-review-item p { margin: 0; color: var(--muted); font-size: 9px; }
.vl-review-item small { color: var(--subtle); font-size: 8px; }
.vl-review-evidence { display: grid; grid-template-columns: minmax(380px, 1.5fr) minmax(230px, .72fr); gap: 13px; margin-bottom: 17px; }
.vl-review-evidence .vl-cad-viewport { height: 420px; }
.vl-evidence-summary { display: grid; align-content: start; gap: 11px; }
.vl-evidence-summary h3 { margin: 0; font-size: 14px; }
.vl-evidence-summary dl { display: grid; margin: 0; }
.vl-evidence-summary dl div { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.vl-evidence-summary dt { color: var(--muted); font-size: 9px; }
.vl-evidence-summary dd { margin: 0; font-size: 10px; }
.vl-evidence-summary details { color: var(--muted); font-size: 9px; }
.vl-evidence-summary summary { color: var(--primary); cursor: pointer; }
.vl-evidence-list { min-width: 0; display: grid; gap: 6px; margin: 0; padding: 10px; list-style: none; background: var(--surface-soft); border: 1px solid var(--border); border-radius: 9px; }
.vl-evidence-list li { min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 9px; color: var(--muted); font-size: 9px; }
.vl-evidence-list li:first-child { color: var(--text); }
.vl-evidence-list span { overflow-wrap: anywhere; text-align: left; }

.vl-adjudication-grid { display: grid; grid-template-columns: 1fr 70px 1fr; gap: 12px; margin-bottom: 16px; }
.vl-adjudication-grid article { min-height: 150px; padding: 17px; background: var(--surface-soft); border: 1px solid var(--border); border-radius: 13px; }
.vl-adjudication-grid header { display: flex; justify-content: space-between; gap: 9px; margin-bottom: 13px; color: var(--muted); font-size: 10px; }
.vl-adjudication-grid p { color: var(--muted); line-height: 1.8; }
.vl-vs { display: grid; place-items: center; color: var(--subtle); font-size: 9px; }
.vl-adjudication-form { display: grid; grid-template-columns: minmax(160px, .45fr) minmax(280px, 1fr) auto; align-items: end; gap: 11px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }

.vl-release-hero { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-bottom: 16px; padding: 25px 30px; overflow: hidden; color: #eff6ff; background: linear-gradient(135deg, #1d4ed8, #312e81); border-radius: 17px; }
.vl-release-hero > div:first-child { display: grid; gap: 3px; }
.vl-release-hero span { color: #bfdbfe; font-size: 10px; }
.vl-release-hero strong { font-size: 28px; }
.vl-release-hero p { margin: 0; color: #dbeafe; }
.vl-release-ring { width: 88px; height: 88px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(#67e8f9 calc(var(--value) * 1%), rgba(255,255,255,.18) 0); position: relative; }
.vl-release-ring::before { content: ""; position: absolute; inset: 8px; background: #253aa5; border-radius: 50%; }
.vl-release-ring span { position: relative; color: #fff; font-size: 14px; font-weight: 700; }
.vl-blockers { display: grid; gap: 9px; margin: 0 0 15px; padding: 0; list-style: none; }
.vl-blockers li { display: flex; align-items: center; gap: 8px; padding: 9px 10px; color: #9f2d20; background: #fff5f4; border: 1px solid #fee4e2; border-radius: 9px; font-size: 10px; }
.vl-blockers li span { width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; background: #fee4e2; font-weight: 700; }
html.dark .vl-blockers li { color: #fca5a5; background: #301313; border-color: #632323; }
.vl-release-list { display: grid; }
.vl-release-list article { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(190px, auto); align-items: center; gap: 14px; padding: 13px 4px; border-bottom: 1px solid var(--border); }
.vl-release-list article:last-child { border: 0; }
.vl-release-list p { margin: 3px 0 0; color: var(--muted); font-size: 9px; }
.vl-release-list small { color: var(--subtle); font-size: 9px; }
.vl-release-meta { display: grid; justify-items: center; gap: 4px; }
.vl-release-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 12px; }
.vl-release-actions .is-danger { color: var(--danger); }
.vl-release-list .vl-release-withdrawal { grid-column: 1 / -1; margin: 0; padding: 9px 11px; color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--danger) 22%, var(--border)); border-radius: 10px; overflow-wrap: anywhere; }

.vl-admin-loading { min-height: 340px; display: grid; place-items: center; align-content: center; gap: 9px; text-align: center; }
.vl-admin-loading h2 { margin: 5px 0 0; }
.vl-admin-loading p { margin: 0; color: var(--muted); }
.vl-admin-people-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: 16px; margin-bottom: 16px; }
.vl-admin-actor-list { display: grid; gap: 9px; max-height: 620px; overflow-y: auto; padding-left: 3px; }
.vl-admin-actor-card { min-width: 0; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: start; gap: 11px; padding: 12px; background: var(--surface-soft); border: 1px solid var(--border); border-radius: 12px; }
.vl-admin-actor-card.is-inactive { opacity: .72; }
.vl-admin-avatar { width: 42px; height: 42px; display: grid; place-items: center; color: var(--primary); background: var(--primary-soft); border-radius: 12px; font-size: 15px; font-weight: 800; }
.vl-admin-actor-main { min-width: 0; display: grid; gap: 5px; }
.vl-admin-actor-main > div:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.vl-admin-actor-main bdi { width: max-content; max-width: 100%; color: var(--muted); font-size: 10px; overflow-wrap: anywhere; }
.vl-admin-actor-main p { margin: 0; color: var(--muted); font-size: 9px; overflow-wrap: anywhere; }
.vl-admin-actor-roles { display: flex; flex-wrap: wrap; gap: 5px; }
.vl-admin-editor { align-self: start; }
.vl-admin-editor > .vl-empty { min-height: 360px; border: 0; background: transparent; }
.vl-admin-actor-form { display: grid; gap: 13px; }
.vl-admin-actor-form > label { min-width: 0; display: grid; gap: 6px; color: var(--text); font-size: 10px; font-weight: 650; }
.vl-admin-actor-form > label > small { color: var(--muted); font-size: 8px; font-weight: 400; line-height: 1.8; }
.vl-admin-role-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.vl-admin-role-options label { min-width: 0; display: flex; align-items: center; gap: 7px; padding: 8px; background: var(--surface-soft); border-radius: 8px; cursor: pointer; }
.vl-admin-role-options input { accent-color: var(--primary); }
.vl-admin-active { display: flex !important; align-items: center; gap: 9px !important; padding: 10px; background: var(--surface-soft); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.vl-admin-active > span { min-width: 0; display: grid; gap: 2px; }
.vl-admin-active input { accent-color: var(--primary); }
.vl-admin-catalog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.vl-admin-catalog-list { display: grid; gap: 8px; max-height: 500px; overflow-y: auto; padding-left: 3px; }
.vl-admin-catalog-list article { min-width: 0; display: grid; gap: 5px; padding: 11px; background: var(--surface-soft); border: 1px solid var(--border); border-radius: 10px; }
.vl-admin-catalog-list article > div { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.vl-admin-catalog-list p, .vl-admin-catalog-list small { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.8; overflow-wrap: anywhere; }
.vl-admin-catalog-list small { display: block; color: var(--subtle); }

.vl-role-cards { display: grid; gap: 8px; }
.vl-role-cards article { display: flex; align-items: center; gap: 10px; padding: 10px; background: var(--surface-soft); border: 1px solid transparent; border-radius: 10px; }
.vl-role-cards article.is-current { border-color: color-mix(in srgb, var(--primary) 35%, transparent); background: var(--primary-soft); }
.vl-role-cards article > span { width: 30px; height: 30px; display: grid; place-items: center; color: var(--primary); background: var(--surface); border-radius: 9px; font-weight: 700; }
.vl-role-cards article > div { flex: 1; }
.vl-role-cards p { margin: 2px 0 0; color: var(--muted); font-size: 9px; }
.vl-contracts { display: grid; margin: 0 0 15px; }
.vl-contracts div { display: grid; grid-template-columns: 1fr 1.2fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.vl-contracts dd { margin: 0; color: var(--primary); }
.vl-audit-table { display: grid; }
.vl-audit-table article { display: grid; grid-template-columns: 170px 110px minmax(0, 1fr); gap: 11px; padding: 11px 4px; border-bottom: 1px solid var(--border); font-size: 10px; }
.vl-audit-table time, .vl-audit-table code { color: var(--muted); }
.vl-audit-table p { margin: 0; }

.vl-empty, .vl-standalone-state { min-height: 330px; display: grid; place-items: center; align-content: center; gap: 8px; padding: 30px; text-align: center; background: var(--surface); border: 1px dashed var(--border); border-radius: 16px; }
.vl-empty > span { width: 58px; height: 58px; display: grid; place-items: center; color: var(--primary); background: var(--primary-soft); border-radius: 18px; font-size: 28px; }
.vl-empty h2, .vl-standalone-state h1 { margin: 5px 0 0; }
.vl-empty p, .vl-standalone-state > p { max-width: 570px; margin: 0 0 8px; color: var(--muted); line-height: 1.8; }
.vl-bootstrap { min-height: 100vh; display: grid; place-items: center; align-content: center; gap: 10px; padding: 30px; text-align: center; color: var(--muted); }
.vl-bootstrap h1 { margin: 8px 0 0; color: var(--text); font-size: 20px; }
.vl-bootstrap p { margin: 0; }
.vl-spinner { width: 42px; height: 42px; border: 3px solid var(--primary-soft); border-top-color: var(--primary); border-radius: 50%; animation: vl-spin .8s linear infinite; }
@keyframes vl-spin { to { transform: rotate(360deg); } }
.vl-skeletons { width: min(550px, 80vw); display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 20px; }
.vl-skeletons i { height: 80px; border-radius: 12px; background: linear-gradient(90deg, var(--surface-soft), var(--surface), var(--surface-soft)); background-size: 200% 100%; animation: vl-shimmer 1.3s infinite; }
@keyframes vl-shimmer { to { background-position: -200% 0; } }
.vl-standalone-state { max-width: 660px; margin: 10vh auto; border-style: solid; }
.vl-standalone-state .vl-state-illustration { width: 72px; height: 72px; display: grid; place-items: center; color: #b42318; background: #fee4e2; border-radius: 22px; font-size: 34px; }
.vl-standalone-state .vl-info-box { max-width: 520px; text-align: right; }
.vl-standalone-state > div:last-child { display: flex; gap: 9px; }
.vl-toast { position: fixed; left: 24px; bottom: 24px; z-index: 100; max-width: 420px; padding: 12px 16px; color: #fff; background: #075e48; border-radius: 11px; box-shadow: 0 15px 45px rgba(0,0,0,.2); opacity: 0; transform: translateY(15px); pointer-events: none; transition: .2s ease; }
.vl-toast.is-error { background: #b42318; }
.vl-toast.is-info { background: #1d4ed8; }
.vl-toast.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1250px) {
  .vl-renovation-grid { grid-template-columns: repeat(4, minmax(90px, 1fr)); }
  .vl-case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vl-mapping-layout, .vl-review-layout { grid-template-columns: minmax(0, 1fr); }
  .vl-mapping-detail { position: static; }
  .vl-workspace-grid, .vl-annotation-layout { grid-template-columns: 220px minmax(400px, 1fr); }
  .vl-target-list, .vl-annotation-form { grid-column: 1 / -1; max-height: none; }
  .vl-annotation-form form { grid-template-columns: repeat(3, 1fr); align-items: start; }
  .vl-annotation-form .vl-form-actions { grid-column: 1 / -1; }
  .vl-annotation-layout.is-rules-collapsed { grid-template-columns: minmax(0, 1fr); }
  .vl-annotation-layout.is-rules-collapsed .vl-annotation-form { grid-column: 1; }
  .vl-annotation-layout.is-form-collapsed { grid-template-columns: 220px minmax(400px, 1fr); }
  .vl-annotation-layout.is-rules-collapsed.is-form-collapsed { grid-template-columns: minmax(0, 1fr); }
  .vl-metrics.is-six { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 980px) {
  .vl-app-shell { grid-template-columns: 1fr; }
  .vl-sidebar { grid-column: 1; }
  .vl-shell-main { grid-column: 1; }
  .vl-sidebar { position: fixed; top: 0 !important; right: 0; width: 260px; height: 100vh !important; transform: translateX(105%); transition: .2s ease; box-shadow: -20px 0 50px rgba(0,0,0,.15); }
  .vl-app-shell.is-menu-open .vl-sidebar { transform: translateX(0); }
  .vl-mobile-menu { display: grid; }
  .vl-topbar { top: 0 !important; padding: 0 18px; }
  .vl-dev-banner { flex-wrap: wrap; justify-content: flex-start; }
  .vl-dev-banner label { margin-right: 0; }
  .vl-content { padding-inline: 18px; }
  .vl-overview-grid, .vl-form-layout, .vl-mapping-layout, .vl-review-layout, .vl-review-evidence, .vl-workspace-grid, .vl-annotation-layout, .vl-annotation-layout.is-rules-collapsed, .vl-annotation-layout.is-form-collapsed { grid-template-columns: minmax(0, 1fr); }
  .vl-work-list, .vl-target-list, .vl-rule-list, .vl-annotation-form { grid-column: 1; max-height: none; }
  .vl-annotation-form form { grid-template-columns: minmax(0, 1fr); }
  .vl-annotation-form .vl-form-actions { grid-column: 1; }
  .vl-two-col { grid-template-columns: 1fr; }
  .vl-case-revision-grid { grid-template-columns: minmax(0, 1fr); }
  .vl-candidate-resolution-list { grid-template-columns: minmax(0, 1fr); }
  .vl-admin-people-grid, .vl-admin-catalog-grid { grid-template-columns: minmax(0, 1fr); }
  .vl-mapping-detail, .vl-help-panel { position: static; }
  .vl-review-evidence .vl-cad-viewport { height: 360px; }
  .vl-cad-viewport { height: clamp(320px, 52vh, 500px); }
  .vl-audit-table article { grid-template-columns: 1fr 1fr; }
  .vl-audit-table p { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .vl-login-page { align-items: start; padding: 16px; overflow: auto; }
  .vl-login-theme { top: 12px; left: 12px; }
  .vl-login-shell { min-height: 0; grid-template-columns: minmax(0, 1fr); margin-top: 46px; border-radius: 20px; }
  .vl-login-intro { padding: 26px 22px; }
  .vl-login-message { margin: 30px 0 22px; }
  .vl-login-message h1 { font-size: 24px; }
  .vl-login-form-panel { padding: 30px 22px; }
  .vl-login-form-heading { margin-bottom: 24px; }
  .vl-login-account { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .vl-user > div, .vl-breadcrumb span, .vl-breadcrumb a { display: none; }
  .vl-screen-header { display: grid; }
  .vl-header-actions { width: 100%; }
  .vl-header-actions .vl-button { flex: 1; }
  .vl-case-grid, .vl-metrics, .vl-metrics.is-six, .vl-field-grid { grid-template-columns: 1fr; }
  .vl-toolbar { grid-template-columns: minmax(0, 1fr) auto; }
  .vl-search { grid-column: 1 / -1; }
  .vl-workspace-grid, .vl-annotation-layout { grid-template-columns: 1fr; }
  .vl-case-revision-tools .vl-panel-heading { display: grid; }
  .vl-revision-tool-card > .vl-button { width: 100%; justify-self: stretch; }
  .vl-work-list, .vl-rule-list { max-height: 420px; }
  .vl-annotation-form form { grid-template-columns: 1fr; }
  .vl-annotation-form .vl-form-actions { grid-column: auto; }
  .vl-table-head { display: none; }
  .vl-table-row { grid-template-columns: 1fr auto; }
  .vl-table-row > span:nth-child(2) { grid-column: 1; }
  .vl-candidate-resolution-panel .vl-panel-heading { display: grid; }
  .vl-candidate-resolution-card { grid-template-columns: minmax(0, 1fr); }
  .vl-candidate-resolution-form .vl-button { width: 100%; justify-self: stretch; }
  .vl-mapping-row { grid-template-columns: 78px 1fr; }
  .vl-mapping-row em { grid-column: 2; }
  .vl-adjudication-grid { grid-template-columns: 1fr; }
  .vl-vs { min-height: 30px; }
  .vl-adjudication-form { grid-template-columns: 1fr; }
  .vl-release-list article { grid-template-columns: 1fr auto; }
  .vl-release-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .vl-admin-actor-card { grid-template-columns: 38px minmax(0, 1fr); }
  .vl-admin-actor-card > .vl-text-button { grid-column: 2; justify-self: start; }
  .vl-admin-avatar { width: 38px; height: 38px; }
  .vl-admin-role-options { grid-template-columns: 1fr; }
  .vl-form-actions { flex-wrap: wrap; }
  .vl-form-actions .vl-button { flex: 1; }
  .vl-renovation-heading, .vl-renovation-lookup { align-items: stretch; flex-direction: column; }
  .vl-renovation-heading > span { width: max-content; }
  .vl-renovation-grid { grid-template-columns: 1fr 1fr; }
  .vl-renovation-lookup .vl-button { width: 100%; }
  .vl-permit-drawer { width: 100%; max-width: none; }
  .vl-permit-drawer > header { min-height: 92px; padding: 16px; }
  .vl-permit-drawer > header h2 { font-size: 15px; }
  .vl-permit-body { padding: 12px; scrollbar-gutter: auto; }
  .vl-permit-document { padding: 13px; }
  .vl-permit-document dl { grid-template-columns: 1fr; }
  .vl-cad-toolbar { align-items: flex-start; }
  .vl-cad-actions { flex-wrap: wrap; justify-content: flex-end; }
  .vl-cad-external { width: 100%; justify-content: center; margin: 0; }
  .vl-cad-footer { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}