:root {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #17243b;
  background: #f4f7fb;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid #76a7f8; outline-offset: 2px; }

.eyebrow, .panel-kicker { margin: 0 0 10px; color: #4679c2; font-size: 11px; font-weight: 800; letter-spacing: .15em; }
.muted { color: #68778d; line-height: 1.6; }
.notice { padding: 12px 15px; border: 1px solid #f1b3b3; border-radius: 10px; background: #fff1f1; color: #9a2b2b; font-size: 13px; line-height: 1.5; }
.notice.success { border-color: #afe0c4; background: #ecfbf2; color: #226b44; }
.button { min-height: 39px; padding: 9px 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 9px; border: 1px solid transparent; font-size: 13px; font-weight: 700; transition: background .16s, border-color .16s, transform .16s; }
.button:not(:disabled):active { transform: translateY(1px); }
.button.primary { background: #1e66d6; color: white; box-shadow: 0 3px 9px rgba(30, 102, 214, .16); }
.button.primary:hover:not(:disabled) { background: #1554ba; }
.button.secondary { background: white; border-color: #d7e0ec; color: #344967; }
.button.secondary:hover:not(:disabled) { border-color: #9fb9e0; background: #f6f9ff; }
.button.danger { background: #fff3f3; border-color: #f5c4c4; color: #b13131; }
.button.danger:hover:not(:disabled) { background: #ffe7e7; }
.button.full { width: 100%; }
.plain-button, .text-button, .icon-button { padding: 0; border: 0; background: transparent; color: #2c67b3; font-size: 13px; font-weight: 700; }
.plain-button:hover, .text-button:hover, .icon-button:hover { color: #164d9a; text-decoration: underline; }
.danger-text { color: #be4343; }
.danger-text:hover { color: #992b2b; }
.button-row { display: flex; gap: 9px; flex-wrap: wrap; }

/* Login */
.login-page { min-height: 100vh; background: #edf3fb; }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(320px, 1fr) minmax(370px, 540px); }
.login-intro { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: clamp(38px, 7vw, 110px); color: #fff; background: radial-gradient(circle at 80% 15%, #315fa1 0, transparent 42%), linear-gradient(135deg, #132b54 2%, #113965 54%, #0e5279 100%); }
.login-intro::before, .login-intro::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.1); width: 420px; height: 420px; right: -90px; top: -180px; }
.login-intro::after { width: 550px; height: 550px; right: -190px; top: -245px; }
.brand-mark { width: 47px; height: 47px; display: grid; place-items: center; margin-bottom: 38px; border: 1px solid rgba(255,255,255,.44); border-radius: 15px; background: rgba(255,255,255,.09); color: #c7ecfc; font-size: 28px; font-weight: 900; }
.login-intro .eyebrow { color: #a7d3f6; }
.login-intro h1 { position: relative; z-index: 1; max-width: 620px; margin: 0 0 16px; font-size: clamp(38px, 4.4vw, 67px); font-weight: 760; line-height: 1.12; letter-spacing: -.04em; }
.login-intro > p:not(.eyebrow) { max-width: 470px; margin: 0; color: #c8d9ed; font-size: 15px; line-height: 1.85; }
.login-art { position: relative; width: min(480px, 100%); height: 210px; margin-top: 65px; border: 1px solid rgba(207,229,246,.26); border-radius: 26px; background: linear-gradient(160deg, rgba(221,241,250,.12), rgba(79,153,205,.08)); transform: skewY(-5deg); box-shadow: 0 26px 40px rgba(0,15,39,.18); }
.art-window { position: absolute; top: 34px; width: 71px; height: 72px; border: 3px solid rgba(178,223,245,.62); border-radius: 8px; background: rgba(149,212,245,.1); }
.art-window:nth-child(1) { left: 34px; }.art-window:nth-child(2) { left: 132px; }.art-window:nth-child(3) { left: 230px; }
.art-desk { position: absolute; bottom: 42px; width: 95px; height: 37px; border-radius: 8px; background: #a2cbe2; box-shadow: 0 9px 0 #5e8ba8, 0 19px 0 -5px #284d6a; opacity: .85; }
.art-desk.one { left: 62px; }.art-desk.two { left: 203px; }.art-desk.three { left: 344px; }
.login-card { display: flex; flex-direction: column; justify-content: center; width: min(420px, calc(100% - 64px)); margin: auto; padding: 48px 0; }
.login-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 55px; color: #69798f; font-size: 13px; font-weight: 700; }
.brand-small { flex: none; width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; background: #1d65d5; color: white; font-size: 18px; font-weight: 900; }
.login-card h2 { margin: 0 0 8px; font-size: 29px; letter-spacing: -.03em; }
.login-card .muted { margin: 0 0 27px; font-size: 14px; }
.login-card .notice { margin-bottom: 20px; }
.login-card-foot { margin-top: 56px; padding-top: 20px; border-top: 1px solid #dce4ee; color: #8190a3; font-size: 12px; }
.form-stack { display: flex; flex-direction: column; gap: 16px; }
.form-stack label, .form-grid label, .mode-switch label { display: flex; flex-direction: column; gap: 7px; color: #34445b; font-size: 13px; font-weight: 700; }
input:not([type="checkbox"]):not([type="hidden"]), select { width: 100%; min-height: 39px; padding: 9px 11px; border: 1px solid #d5dfeb; border-radius: 8px; outline: none; background: #fff; color: #17243b; font-size: 13px; font-weight: 500; }
input:not([type="checkbox"]):not([type="hidden"]):focus, select:focus { border-color: #3a81e7; box-shadow: 0 0 0 3px rgba(58,129,231,.12); }
input::placeholder { color: #a2aebd; }
label small, .form-stack > small { color: #8290a3; font-size: 11px; font-weight: 500; }
.login-card input { min-height: 47px; }
.login-card .button { margin-top: 8px; min-height: 47px; }
.login-card .text-button { align-self: flex-start; margin-top: 22px; }
.destination-grid { display: grid; gap: 11px; }
.destination-card { display: grid; grid-template-columns: 43px 1fr 21px; grid-template-rows: auto auto; gap: 1px 12px; align-items: center; padding: 16px; border: 1px solid #d9e3ef; border-radius: 12px; background: #fff; transition: border-color .16s, box-shadow .16s; }
.destination-card:hover { border-color: #82aff0; box-shadow: 0 8px 20px rgba(36,81,136,.09); }
.destination-icon { grid-row: 1 / 3; width: 43px; height: 43px; display: grid; place-items: center; border-radius: 10px; background: #eaf3ff; color: #2367c9; font-size: 22px; }
.destination-card strong { font-size: 14px; }.destination-card small { color: #77879a; }.destination-card > span:last-child { grid-column: 3; grid-row: 1 / 3; color: #7f98b7; }

/* Admin frame */
.admin-layout { min-height: 100vh; display: grid; grid-template-columns: 242px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; padding: 24px 15px 17px; background: #172844; color: #e7eff9; }
.sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 2px 11px 34px; }
.sidebar-brand span:last-child { display: flex; flex-direction: column; gap: 2px; }
.sidebar-brand strong { font-size: 17px; letter-spacing: -.02em; }
.sidebar-brand small { color: #91a8c5; font-size: 11px; }
.sidebar-group-label { padding: 0 12px 10px; color: #8198b8; font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.sidebar-nav { display: grid; gap: 4px; }
.sidebar-nav button { width: 100%; display: flex; align-items: center; gap: 11px; padding: 12px 12px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #aebed4; text-align: left; font-size: 13px; font-weight: 650; }
.sidebar-nav button:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar-nav button.active { border-color: rgba(139,191,255,.23); background: #274469; color: #fff; }
.nav-icon { width: 22px; color: #9cbce2; font-size: 19px; line-height: 1; text-align: center; }
.sidebar-bottom { margin-top: auto; }
.sidebar-office { display: flex; justify-content: space-between; padding: 12px; border: 1px solid #426183; border-radius: 9px; color: #dcecff; font-size: 12px; font-weight: 700; }
.sidebar-office:hover { background: #28456a; }
.sidebar-user { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 16px 9px 1px; border-top: 1px solid #324761; }
.user-avatar { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 50%; background: #527cb3; font-size: 13px; font-weight: 800; }
.sidebar-user > span:last-child { display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.sidebar-user strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; }.sidebar-user small { color: #96acc9; font-size: 11px; }
.admin-workspace { min-width: 0; }
.topbar { position: sticky; z-index: 2; top: 0; height: 67px; display: flex; justify-content: space-between; align-items: center; padding: 0 clamp(20px, 3.2vw, 48px); border-bottom: 1px solid #e3e9f1; background: rgba(255,255,255,.94); backdrop-filter: blur(10px); }
.topbar-location { color: #51627b; font-size: 13px; font-weight: 700; }
.topbar-actions { display: flex; align-items: center; gap: 21px; }.topbar-actions .plain-button { color: #61738e; }
.topbar-env { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid #e2e9f2; border-radius: 7px; color: #73839a; font-size: 11px; font-weight: 700; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #4cbf86; }
.content { width: min(1450px, 100%); margin: auto; padding: 36px clamp(20px, 3.2vw, 48px) 75px; }
.page-notice { margin-bottom: 22px; }
.page-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 25px; }
.page-heading h1 { margin: 0 0 6px; color: #17243b; font-size: clamp(25px, 2.5vw, 32px); letter-spacing: -.035em; }
.page-heading p:not(.eyebrow) { margin: 0; color: #728198; font-size: 13px; line-height: 1.6; }
.panel, .metric-card, .info-panel { border: 1px solid #e0e7f0; border-radius: 13px; background: #fff; box-shadow: 0 3px 12px rgba(18,39,72,.025); }
.panel { min-width: 0; padding: 22px; }
.panel h2 { margin: 0 0 4px; font-size: 17px; letter-spacing: -.02em; }
.panel h3 { margin: 0 0 7px; font-size: 14px; }
.panel p { margin-top: 0; }
.panel .muted { font-size: 12px; }
.panel-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 15px; }
.panel-heading p { margin: 0; color: #8290a3; font-size: 12px; line-height: 1.6; }
.count { flex: none; padding: 5px 9px; border-radius: 6px; background: #eef3f9; color: #63748c; font-size: 11px; font-weight: 700; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.metric-card { display: flex; flex-direction: column; gap: 7px; min-height: 124px; padding: 20px; }
.metric-card > span { color: #75839a; font-size: 12px; font-weight: 650; }.metric-card strong { color: #182d4c; font-size: 28px; line-height: 1.1; letter-spacing: -.03em; }.metric-card small { color: #91a0b1; font-size: 11px; }
.mode-panel { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 29px; }
.mode-panel h2 { font-size: 20px; }.mode-panel p.muted { margin: 8px 0 16px; font-size: 13px; }
.inline-status { display: flex; align-items: center; gap: 10px; color: #8492a5; font-size: 11px; }
.mode-switch { width: 220px; flex: none; display: grid; gap: 10px; }
.badge { display: inline-flex; width: fit-content; align-items: center; padding: 4px 8px; border-radius: 6px; background: #edf2f8; color: #677990; font-size: 10px; font-weight: 800; white-space: nowrap; }
.badge.mock { background: #e5f0ff; color: #2865bb; }.badge.live { background: #e7f7ef; color: #21714d; }.badge.enabled, .badge.configured { background: #e9f7ef; color: #278254; }.badge.disabled { background: #f0f2f5; color: #7c8999; }
.info-panel { margin-top: 18px; padding: 18px 22px; border-color: #d8e6fb; background: #f7faff; }
.info-panel strong { font-size: 12px; }.info-panel p { margin: 6px 0 0; color: #697d99; font-size: 12px; line-height: 1.7; }.info-panel code { color: #295fa8; font-size: 12px; overflow-wrap: anywhere; }
.split-grid { display: grid; grid-template-columns: minmax(0, 1.68fr) minmax(290px, .82fr); align-items: start; gap: 18px; }
.stacked-panels { display: grid; gap: 18px; }
.form-panel { padding: 23px; }.form-panel > h2 { margin-bottom: 8px; }.form-panel > .muted { margin-bottom: 20px; }
.form-panel .button[type="submit"] { align-self: flex-start; margin-top: 2px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
.form-grid .full { grid-column: 1 / -1; }
.form-divider { height: 1px; margin: 22px 0; background: #e7ecf3; }
.check-row { display: flex !important; flex-direction: row !important; align-items: flex-start; gap: 9px !important; font-weight: 600 !important; cursor: pointer; }
.check-row input { flex: none; width: 15px; height: 15px; margin: 1px 0 0; accent-color: #2670d7; }
.check-row span { display: flex; flex-direction: column; gap: 4px; }.check-row small { color: #91a0b1; font-size: 10px; }
fieldset { min-width: 0; margin: 0; padding: 11px 13px 13px; border: 1px solid #dce5ef; border-radius: 9px; }
legend { padding: 0 5px; color: #34445b; font-size: 12px; font-weight: 700; }
.checkbox-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-height: 215px; overflow: auto; }
.check-row.compact { font-size: 11px; }
.employee-scope-grid { max-height: 190px; }

/* Tables and lists */
.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th { padding: 10px 10px 12px; border-bottom: 1px solid #e7ecf3; color: #8b99ac; font-size: 11px; font-weight: 750; text-align: left; white-space: nowrap; }
td { padding: 15px 10px; border-bottom: 1px solid #eef1f5; vertical-align: middle; color: #506179; }
tr:last-child td { border-bottom: 0; }
td strong { display: block; color: #263850; font-size: 12px; font-weight: 750; }
.table-sub { display: block; margin-top: 5px; color: #95a1b0; font-size: 10px; line-height: 1.4; }
.table-actions { display: flex; flex-wrap: wrap; gap: 8px 11px; }.table-actions .text-button { font-size: 11px; white-space: nowrap; }
.url-text { max-width: 250px; overflow-wrap: anywhere; }
.empty { margin: 0; padding: 22px 10px; color: #94a1b2; font-size: 12px; text-align: center; }
.employee-layout { display: grid; grid-template-columns: minmax(255px, .72fr) minmax(0, 1.28fr); align-items: start; gap: 18px; }
.search-line { margin-bottom: 12px; }.search-line input { background: #f9fbfe !important; }
.employee-list { max-height: 640px; overflow: auto; margin: 0 -8px -5px; padding: 0 8px 5px; }
.employee-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 9px; border: 1px solid transparent; border-radius: 9px; background: transparent; text-align: left; }
.employee-item:hover { background: #f6f9fd; }.employee-item.selected { border-color: #bad4f7; background: #eef6ff; }
.employee-avatar { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: #dceafa; color: #3976bb; font-size: 11px; font-weight: 800; }.employee-avatar.female { background: #f3e9f8; color: #8d59a8; }
.employee-item-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }.employee-item-text strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #2c405c; font-size: 12px; }.employee-item-text small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #8b9aae; font-size: 10px; }
.employee-editor { min-height: 280px; }.employee-editor .panel-heading { margin-bottom: 23px; }.employee-editor form > .muted { margin-bottom: 18px; }
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 230px; color: #9aa9ba; text-align: center; }.empty-state > span { font-size: 38px; }.empty-state h2 { margin: 10px 0 4px; color: #5b708c; }.empty-state p { max-width: 245px; font-size: 12px; line-height: 1.6; }
.capabilities { margin: 2px 0 20px; padding: 11px 13px; border-radius: 8px; background: #f2f6fb; color: #637891; font-size: 11px; line-height: 1.6; }
.integration-list { display: grid; gap: 8px; margin-bottom: 22px; }.integration-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid #e6ebf2; border-radius: 8px; }.integration-item > span:first-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }.integration-item strong { font-size: 12px; }.integration-item small { overflow: hidden; color: #96a2b1; font-size: 10px; text-overflow: ellipsis; }
.rotation-banner { display: flex; justify-content: space-between; gap: 8px; margin: 10px 0 17px; padding: 10px; border: 1px solid #c8dcf8; border-radius: 8px; background: #f0f7ff; color: #3e6598; font-size: 11px; }
.runtime-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }.runtime-grid .panel h2 { margin-bottom: 17px; }.record-list { max-height: 430px; overflow: auto; }.record { padding: 12px 0; border-top: 1px solid #edf1f6; }.record:first-child { border-top: 0; }.record > strong { display: block; margin-bottom: 8px; color: #263952; font-size: 12px; overflow-wrap: anywhere; }.record > div { display: flex; flex-wrap: wrap; gap: 7px 15px; }.record > div span { color: #65768d; font-size: 11px; overflow-wrap: anywhere; }.record > div small { margin-right: 5px; color: #9aa7b7; font-size: 10px; }

/* Dialogs */
.dialog { width: min(490px, calc(100vw - 30px)); padding: 25px; border: 1px solid #dce5ef; border-radius: 14px; box-shadow: 0 25px 80px rgba(16,37,65,.28); color: #17243b; }
.dialog::backdrop { background: rgba(14,31,54,.55); backdrop-filter: blur(2px); }.dialog h2 { margin: 0; font-size: 20px; }.dialog > .muted, .dialog form > .muted { margin: 8px 0 17px; font-size: 12px; }
.dialog-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 15px; }.dialog-head .panel-kicker { margin-bottom: 5px; }.icon-button { color: #8b9bb0; font-size: 26px; line-height: 1; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 20px; }
.secret-box { display: flex; align-items: flex-start; gap: 8px; padding: 11px; border: 1px solid #d8e6f7; border-radius: 8px; background: #f4f8fd; }.secret-box code { flex: 1; padding: 8px 0; color: #245b9e; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; user-select: all; }.secret-box button { flex: none; }
.startup { min-height: 100vh; display: grid; place-items: center; color: #69819d; font-size: 14px; }

@media (max-width: 1020px) {
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split-grid { grid-template-columns: 1fr; }.employee-layout { grid-template-columns: minmax(230px, .8fr) minmax(0, 1.2fr); }
}
@media (max-width: 760px) {
  .login-shell { grid-template-columns: 1fr; }.login-intro { display: none; }.login-card { min-height: 100vh; }
  .admin-layout { display: block; }.sidebar { position: static; height: auto; padding: 12px 14px; }.sidebar-brand { padding: 0 0 11px; }.sidebar-group-label, .sidebar-bottom { display: none; }.sidebar-nav { display: flex; gap: 4px; overflow-x: auto; }.sidebar-nav button { width: auto; flex: none; padding: 9px; font-size: 11px; }.sidebar-nav .nav-icon { display: none; }
  .topbar { position: static; height: 54px; padding: 0 19px; }.topbar-env { display: none; }.topbar-actions { gap: 12px; }.content { padding: 25px 17px 45px; }
  .employee-layout, .runtime-grid { grid-template-columns: 1fr; }.employee-list { max-height: 300px; }
}
@media (max-width: 520px) {
  .login-card { width: min(420px, calc(100% - 40px)); }.page-heading { align-items: flex-start; }.page-heading .button { flex: none; }
  .metric-grid { gap: 9px; }.metric-card { min-height: 105px; padding: 14px; }.metric-card strong { font-size: 23px; }
  .mode-panel { flex-direction: column; align-items: stretch; }.mode-switch { width: 100%; }.form-grid { grid-template-columns: 1fr; }.checkbox-grid { grid-template-columns: 1fr; }
  .panel { padding: 17px; }.dialog { padding: 20px; }.secret-box { flex-direction: column; }.secret-box button { align-self: flex-end; }
}