:root {
    --ui-primary: #153d63;
    --ui-primary-dark: #0b2947;
    --ui-primary-soft: #dbe8f3;
    --ui-bg: #e8eff5;
    --ui-panel: #ffffff;
    --ui-text: #17212b;
    --ui-muted: #596875;
    --ui-border: #aebfce;
    --ui-danger: #b42318;
    --ui-warning: #d97706;
    --ui-success: #18794e;
    --ui-disabled: #d8dee4;
    --ui-shadow: 0 5px 18px rgba(17, 43, 67, .14);
    --ui-font: "Segoe UI", Tahoma, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; color: var(--ui-text); background: var(--ui-bg); font: 16px/1.45 var(--ui-font); }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.ui-watermark::before {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background: var(--ui-watermark, none) center/420px auto no-repeat; opacity: .045;
}

.ui-environment {
    height: 28px; display: flex; align-items: center; justify-content: center;
    background: #f59e0b; color: #3b2500; border-bottom: 1px solid #b86e00;
    font-size: 12px; font-weight: 800; letter-spacing: .08em;
}

.ui-button {
    min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    border: 1px solid #8fa4b5; border-radius: 4px; padding: 6px 13px; color: var(--ui-text);
    background: linear-gradient(#fff, #e6edf3); font-weight: 700; text-decoration: none; cursor: pointer;
}
.ui-button:hover { border-color: var(--ui-primary); background: #f7fbff; }
.ui-button:focus-visible, .ui-field:focus-visible, .ui-menu-link:focus-visible { outline: 3px solid #60a5fa; outline-offset: 1px; }
.ui-button-primary { color: #fff; border-color: var(--ui-primary-dark); background: linear-gradient(#245a88, var(--ui-primary)); }
.ui-button-danger { color: #fff; border-color: #7f1d1d; background: var(--ui-danger); }
.ui-button:disabled, .ui-button[aria-disabled="true"] { color: #77838e; border-color: #bcc7d0; background: var(--ui-disabled); cursor: not-allowed; box-shadow: none; }
.ui-key { color: #0b4a7d; font-size: 10px; font-weight: 800; }

.ui-field { width: 100%; height: 38px; border: 1px solid #8fa4b5; border-radius: 4px; padding: 7px 9px; background: #fff; color: var(--ui-text); }
.ui-label { display: block; margin: 0 0 5px; font-size: 13px; font-weight: 700; }
.ui-required { color: var(--ui-danger); }
.ui-field-error { min-height: 18px; margin-top: 3px; color: var(--ui-danger); font-size: 12px; font-weight: 700; }

.ui-login { min-height: 100%; display: grid; place-items: center; padding: 28px; position: relative; z-index: 1; }
.ui-login-card { width: min(440px, 100%); background: var(--ui-panel); border: 1px solid var(--ui-border); border-radius: 8px; box-shadow: var(--ui-shadow); overflow: hidden; }
.ui-login-head { padding: 18px 24px; color: #fff; background: var(--ui-primary-dark); }
.ui-login-head h1 { margin: 0; font-size: 20px; }
.ui-login-head p { margin: 3px 0 0; color: #d8e8f6; font-size: 13px; }
.ui-login-body { padding: 22px 24px; }
.ui-form-row { margin-bottom: 14px; }
.ui-login-actions { display: flex; justify-content: flex-end; margin-top: 18px; }
.ui-login-note { margin-top: 17px; padding-top: 13px; border-top: 1px solid #d9e2e9; color: var(--ui-muted); font-size: 12px; }

.ui-shell { height: calc(100vh - 28px); min-height: 520px; display: grid; grid-template-columns: 226px 1fr; grid-template-rows: 1fr 28px; position: relative; z-index: 1; }
.ui-sidebar { grid-row: 1; display: flex; flex-direction: column; min-width: 0; color: #fff; background: var(--ui-primary-dark); border-right: 1px solid #061a2c; }
.ui-brand { min-height: 76px; padding: 14px 15px; border-bottom: 1px solid rgba(255,255,255,.16); }
.ui-brand strong { display: block; font-size: 17px; }
.ui-brand span { display: block; margin-top: 4px; color: #d4e7f5; font-size: 12px; }
.ui-menu { padding: 8px; overflow-y: auto; }
.ui-menu-link { min-height: 43px; display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 7px; margin-bottom: 3px; padding: 7px 8px; border: 1px solid transparent; border-radius: 4px; color: #eef7ff; text-decoration: none; }
.ui-menu-link:hover, .ui-menu-link.is-active { border-color: #537a9b; background: #1d527d; }
.ui-menu-link.is-disabled { color: #879bab; cursor: not-allowed; background: rgba(255,255,255,.025); }
.ui-menu-icon { text-align: center; font-size: 18px; }
.ui-menu-text { font-size: 14px; font-weight: 750; }
.ui-menu-key { color: #c4dff2; font-size: 11px; font-weight: 800; }
.ui-sidebar-actions { margin-top: auto; padding: 10px; border-top: 1px solid rgba(255,255,255,.14); }
.ui-sidebar-actions .ui-button { width: 100%; }

.ui-main { grid-column: 2; grid-row: 1; min-width: 0; overflow: auto; padding: 15px 18px; }
.ui-toolbar { min-height: 55px; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 13px; padding: 10px 14px; background: var(--ui-panel); border: 1px solid var(--ui-border); box-shadow: 0 2px 7px rgba(17,43,67,.08); }
.ui-toolbar h1 { margin: 0; color: var(--ui-primary-dark); font-size: 22px; }
.ui-toolbar p { margin: 2px 0 0; color: #405361; font-size: 14px; }
.ui-panel { background: rgba(255,255,255,.94); border: 1px solid var(--ui-border); box-shadow: 0 2px 8px rgba(17,43,67,.08); }
.ui-panel-title { padding: 10px 13px; color: #fff; background: var(--ui-primary); font-size: 15px; font-weight: 800; }
.ui-panel-body { padding: 14px; }
.ui-dashboard-grid { display: grid; grid-template-columns: repeat(3, minmax(170px, 1fr)); gap: 12px; }
.ui-dashboard-card { min-height: 112px; display: grid; grid-template-columns: 50px 1fr; align-items: center; gap: 12px; padding: 15px; color: var(--ui-text); background: #fff; border: 1px solid var(--ui-border); border-radius: 5px; text-decoration: none; }
.ui-dashboard-card:hover { border-color: var(--ui-primary); box-shadow: 0 3px 10px rgba(17,43,67,.12); }
.ui-dashboard-card.is-disabled { color: #7b8791; background: #eef1f4; cursor: not-allowed; }
.ui-dashboard-icon { font-size: 35px; text-align: center; }
.ui-dashboard-card strong { display: block; font-size: 17px; font-weight: 750; }
.ui-dashboard-card small { display: block; margin-top: 5px; color: #405361; font-size: 15px; line-height: 1.35; }

.ui-status { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: center; gap: 22px; padding: 0 12px; color: #263746; background: #f8fafc; border-top: 1px solid var(--ui-border); font-size: 13px; white-space: nowrap; overflow: hidden; }
.ui-status-time { margin-left: auto; }

.ui-processing { position: fixed; inset: 0; z-index: 1000; display: none; place-items: center; background: rgba(10,25,39,.38); }
.ui-processing.is-visible { display: grid; }
.ui-processing-box { min-width: 210px; padding: 18px; text-align: center; background: #fff; border: 1px solid var(--ui-border); box-shadow: var(--ui-shadow); font-weight: 800; }

.ui-modal-backdrop { position: fixed; inset: 0; z-index: 1100; display: none; place-items: center; background: rgba(10,25,39,.48); }
.ui-modal-backdrop.is-visible { display: grid; }
.ui-modal { width: min(430px, calc(100vw - 32px)); background: #fff; border: 1px solid var(--ui-border); box-shadow: var(--ui-shadow); }
.ui-modal-title { padding: 9px 12px; color: #fff; background: var(--ui-primary-dark); font-weight: 800; }
.ui-modal-body { padding: 18px; }
.ui-modal-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--ui-border); }

@media (max-width: 900px) {
    .ui-shell { grid-template-columns: 190px 1fr; }
    .ui-dashboard-grid { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
}