/* ==========================================================================
   Hengxin Cloud · Modern Glass
   A fresh, contemporary glass system: icy cobalt, cyan light and soft depth.
   Inspired by the tactile clarity of early iPhone hardware, without the
   brushed metal, linen or beige of that era.
   ========================================================================== */

:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-num: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
  --bg: #f5f8fd;
  --bg-deep: #eaf0f9;
  --surface: #ffffff;
  --surface-soft: #f8fbff;
  --ink: #000;
  --ink-2: #2f4058;
  --muted: #667890;
  --muted-2: #93a4ba;
  --line: #e5edf7;
  --line-strong: #d7e3f2;
  --brand: #2563eb;
  --brand-dark: #1d4ed8;
  --brand-deep: #0b1e45;
  --brand-soft: #eaf2ff;
  --brand-mid: #60a5fa;
  --accent: #06b6d4;
  --accent-soft: #e7faff;
  --violet: #8b5cf6;
  --violet-soft: #f1edff;
  --success: #10b981;
  --success-soft: #e8faf3;
  --gold: #d97706;
  --gold-soft: #fff7e8;
  --danger: #e11d48;
  --danger-soft: #ffedf1;
  --warning: #d97706;
  --warning-soft: #fff7e8;
  --info: #0891b2;
  --info-soft: #e8f9fd;
  --radius-xl: 20px;
  --radius-lg: 15px;
  --radius: 12px;
  --radius-sm: 9px;
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, .035);
  --shadow-sm: 0 6px 20px rgba(15, 23, 42, .055);
  --shadow-md: 0 16px 40px rgba(15, 23, 42, .09);
  --shadow-lg: 0 28px 70px rgba(8, 22, 48, .18);
}

body {
  background-color: #f5f8fd;
  background-image:
    radial-gradient(circle at 8% -4%, rgba(37, 99, 235, .10), transparent 30%),
    radial-gradient(circle at 92% 2%, rgba(6, 182, 212, .07), transparent 27%);
  background-attachment: fixed;
}
.app-main {
  background-image:
    radial-gradient(circle at 6% -10%, rgba(37, 99, 235, .075), transparent 28%),
    radial-gradient(circle at 98% 8%, rgba(139, 92, 246, .045), transparent 24%),
    linear-gradient(180deg, rgba(248, 250, 254, .98), rgba(243, 247, 253, .98));
}

/* Clean crystal top bar */
.topbar {
  background: rgba(255, 255, 255, .78);
  border-bottom: 1px solid rgba(222, 233, 247, .9);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
  backdrop-filter: blur(20px) saturate(150%);
}
.topbar-search .search-box {
  background: #f2f6fc;
  border: 1px solid #e5edf7;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .025);
}
.topbar-search .search-box:focus-within {
  background: #fff;
  border-color: #bfdbfe;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .09);
}
.topbar-search input { color: var(--ink); }
.topbar-search input::placeholder { color: #8ea0b6; }
.topbar-search .search-box > .icon { color: #7b8fa8; }
.topbar-search kbd { background: #fff; border-color: #dfe9f5; color: #8294aa; }
.topbar-date { color: #7488a0; }
.icon-btn { color: #5d7189; }
.icon-btn:hover { background: #fff; border-color: var(--line); box-shadow: 0 2px 8px rgba(15, 23, 42, .06); }
.icon-btn.has-alert::after { border-color: #fff; background: #fb7185; }
.chat-entry-btn { position: relative; }
.topbar-chat-count {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  display: grid;
  place-items: center;
  border: 2px solid #05070b;
  border-radius: 8px;
  background: #2563eb;
  color: #fff;
  font-family: var(--font-num);
  font-size: 6.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
}
.topbar-chat-count.hidden { display: none; }
.topbar-divider { background: #e4ecf7; }
.user-button:hover { background: #fff; border-color: var(--line); box-shadow: 0 2px 8px rgba(15, 23, 42, .05); }
.user-meta strong { color: #1e293b; }
.user-meta span { color: #8496ab; }
.user-button > .icon { color: #8ca0b7; }
.timer-pill { border: 1px solid #e1eaf6; background: #fff; box-shadow: 0 2px 8px rgba(15, 23, 42, .04); }
.timer-pill .timer-task { color: #50657d; }
.timer-pill .timer-time { color: #2563eb; }
.timer-stop { background: #fff1f4; color: #be4560; }
.timer-stop:hover { background: #ffe4ea; }

/* Sapphire navigation with a clear cobalt selection */
.sidebar {
  background:
    radial-gradient(circle at 18% 0%, rgba(37, 99, 235, .28), transparent 35%),
    radial-gradient(circle at 80% 80%, rgba(6, 182, 212, .08), transparent 38%),
    linear-gradient(180deg, #0c1b34 0%, #081426 58%, #050d1a 100%);
  border-right: 1px solid rgba(255, 255, 255, .05);
  box-shadow: 8px 0 30px rgba(15, 23, 42, .06);
}
.sidebar .brand-mark {
  background: linear-gradient(145deg, #38bdf8 0%, #3b82f6 46%, #1d4ed8 100%);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 7px 18px rgba(37, 99, 235, .35);
}
.sidebar .brand-name { color: #f8fbff; }
.sidebar .brand-sub { color: #7f95b2; }
.workspace-switch {
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.workspace-logo {
  background: rgba(34, 211, 238, .12);
  border: 1px solid rgba(34, 211, 238, .2);
  color: #67e8f9;
}
.workspace-text strong { color: #eaf2ff; }
.workspace-text small { color: #7f95b2; }
.workspace-switch > .icon { color: #7f95b2; }
.sidebar-clock {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 2px 9px;
  padding: 8px 10px;
  border: 1px solid rgba(96, 165, 250, .14);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(37, 99, 235, .10), rgba(255, 255, 255, .018));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}
.sidebar-clock-icon {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(96, 165, 250, .2);
  border-radius: 7px;
  background: rgba(37, 99, 235, .14);
  color: #93c5fd;
}
.sidebar-clock-icon .icon { width: 13px; height: 13px; }
.sidebar-clock-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sidebar-clock-time {
  color: #f8fbff;
  font-family: var(--font-num);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .035em;
  font-variant-numeric: tabular-nums;
}
.sidebar-clock-date {
  color: #8298b2;
  font-size: 7.5px;
  letter-spacing: .04em;
  white-space: nowrap;
}
.sidebar-clock-live {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
  color: #93c5fd;
  font-family: var(--font-num);
  font-size: 6.5px;
  letter-spacing: .14em;
}
.sidebar-clock-live i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, .1);
}
.nav-label { color: #5f7898; }
.nav-item { color: #a9bbd1; border: 1px solid transparent; }
.nav-item > .icon { color: #7089a8; }
.nav-item:hover {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .07);
  color: #f4f8ff;
}
.nav-item:hover > .icon { color: #dbeafe; }
.nav-item.active {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 52%, #1d4ed8 100%);
  border-color: rgba(147, 197, 253, .3);
  color: #fff;
  box-shadow: 0 7px 18px rgba(37, 99, 235, .32), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.nav-item.active::before { display: none; }
.nav-item.active > .icon { color: #fff; filter: none; }
.nav-badge {
  background: rgba(148, 163, 184, .15);
  border: 1px solid rgba(255, 255, 255, .09);
  color: #dbeafe;
  box-shadow: none;
}
.nav-badge.alert { background: rgba(244, 63, 94, .18); border-color: rgba(251, 113, 133, .2); color: #fecdd3; }
.nav-badge.chat { background: rgba(37, 99, 235, .2); border-color: rgba(96, 165, 250, .22); color: #dbeafe; }
.nav-item.active .nav-badge { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .18); color: #fff; }
.sidebar-foot { border-top-color: rgba(255, 255, 255, .08); }
.system-status { color: #7f95b2; }
.status-dot { background: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, .12); }
.sidebar-version { color: #526984; }
.nav-icon-tile {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  display: grid;
  place-items: center;
  color: #7f95b2;
}
.nav-icon-tile .icon {
  width: 16px;
  height: 16px;
  stroke-width: 1.8;
  color: inherit;
}
.nav-item:hover .nav-icon-tile,
.nav-item:hover .nav-icon-tile .icon { color: #dbeafe; }
.nav-item.active .nav-icon-tile,
.nav-item.active .nav-icon-tile .icon { color: #fff; }

/* Contemporary glass controls */
.btn {
  border: 1px solid #d8e3f2;
  border-radius: 9px;
  color: #334155;
  text-shadow: none;
  background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), inset 0 1px 0 #fff;
}
.btn:hover { border-color: #bfd2e8; background: #fff; box-shadow: 0 3px 10px rgba(15, 23, 42, .06); }
.btn-primary {
  border-color: #1d4ed8;
  color: #fff;
  background:
    radial-gradient(ellipse at 50% -30%, rgba(255, 255, 255, .35), transparent 62%),
    linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  box-shadow: 0 6px 16px rgba(37, 99, 235, .25), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.btn-primary:hover {
  background:
    radial-gradient(ellipse at 50% -30%, rgba(255, 255, 255, .4), transparent 62%),
    linear-gradient(135deg, #2563eb, #1d4ed8);
  box-shadow: 0 8px 20px rgba(37, 99, 235, .3), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.btn-secondary { background: #fff; border-color: #dbe6f3; color: #40546c; }
.btn-secondary:hover { border-color: #bfd3e9; background: #fbfdff; }
.btn-ghost { color: #52677f; }
.btn-ghost:hover { background: #f2f7fd; border-color: #e0eaf6; }
.btn-soft { background: #eaf2ff; border-color: #d7e6fb; color: #1d4ed8; box-shadow: none; }
.btn-soft:hover { background: #e1edff; }
.btn-gold {
  border-color: #bfd5ef;
  color: #1d4ed8;
  background: linear-gradient(180deg, #f9fcff 0%, #ecf4ff 100%);
  box-shadow: 0 2px 8px rgba(37, 99, 235, .08), inset 0 1px 0 #fff;
  text-shadow: none;
}
.btn-gold:hover { background: linear-gradient(180deg, #ffffff, #e3efff); border-color: #a9c7ea; }
.btn-hero-gold {
  border-color: rgba(255, 255, 255, .55);
  color: #1d4ed8;
  background: linear-gradient(180deg, #ffffff 0%, #eef5ff 100%);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .16), inset 0 1px 0 #fff;
  text-shadow: none;
}
.btn-hero-gold:hover {
  background: linear-gradient(180deg, #ffffff, #e7f1ff);
  filter: none;
  transform: translateY(-1px);
}
.btn-danger { border-color: #be123c; background: linear-gradient(135deg, #fb7185, #e11d48); color: #fff; }
.btn-danger:hover { background: linear-gradient(135deg, #f43f5e, #be123c); }
.btn-danger-soft { background: #fff1f4; border-color: #fecdd3; color: #be123c; }
.btn.active { background: #eaf2ff; border-color: #c7dcf8; color: #1d4ed8; }
.btn-hero-ghost {
  border-color: rgba(255, 255, 255, .25);
  color: #fff;
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
.btn-hero-ghost:hover { background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .38); }

/* Airy surfaces */
.card, .stat-card, .ops-card, .qual-stat, .catalog-card {
  border: 1px solid #e5edf7;
  background: linear-gradient(180deg, #fff 0%, #fcfdff 100%);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .02), 0 8px 26px rgba(15, 23, 42, .045);
  border-radius: 15px;
}
.stat-card::after { opacity: .55; }
.toolbar {
  background: #fbfdff;
  border-bottom: 1px solid #edf3fa;
  box-shadow: none;
}
.table-wrap { background: #fff; }
.data-table th {
  background: #f7faff;
  border-bottom: 1px solid #e7eef8;
  color: #64748b;
  text-shadow: none;
  box-shadow: none;
  font-weight: 600;
}
.data-table td { border-bottom: 1px solid #eef4fb; }
.data-table tbody tr:hover { background: #f7faff; }
.table-footer {
  background: #fbfdff;
  border-top: 1px solid #edf3fa;
  color: #7c8da3;
  text-shadow: none;
}
.search-field input, .field input, .field select, .field textarea, .amount-input {
  background: #f8fafd;
  border: 1px solid #dfe8f4;
  border-radius: 8px;
  box-shadow: none;
  color: #172033;
}
.search-field input:focus, .field input:focus, .field select:focus, .field textarea:focus {
  background: #fff;
  border-color: #93baf0;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
}
.search-field .icon { color: #7d90a8; }
.filter-select {
  background-color: #f8fafd;
  border-color: #dfe8f4;
  box-shadow: none;
  color: #40546c;
}
.filter-select:focus { border-color: #93baf0; box-shadow: 0 0 0 3px rgba(37, 99, 235, .1); }
.field > label, .field-label { color: #44586f; text-shadow: none; }
.amount-input span { background: #f1f6fc; border-right: 1px solid #e1eaf5; color: #64748b; }
.tag { background: #f4f8fd; border-color: #e4edf7; color: #58708a; }
.status-pill {
  border-color: rgba(15, 23, 42, .055);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
  text-shadow: none;
}

/* Segmented, glassy controls */
.qual-stage-strip { padding: 0; border: 0; background: transparent; box-shadow: none; }
.qual-stage-chip {
  border: 1px solid #e2ebf6;
  background: #fff;
  color: #60758d;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .02);
}
.qual-stage-chip:hover { border-color: #c4d9ee; background: #fbfdff; }
.qual-stage-chip.active {
  border-color: #1d4ed8;
  color: #fff;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  box-shadow: 0 4px 12px rgba(37, 99, 235, .22);
}
.qual-stage-chip.active b { background: rgba(255, 255, 255, .18); color: #fff; }
.approval-tabs {
  display: inline-flex;
  width: auto;
  gap: 3px;
  padding: 3px;
  border: 1px solid #e4ecf7;
  border-radius: 10px;
  background: #eef4fc;
  box-shadow: none;
  margin-bottom: 14px;
}
.approval-tab {
  height: 30px;
  border-radius: 7px;
  color: #61758d;
  text-shadow: none;
  padding: 0 13px;
}
.approval-tab.active {
  background: #fff;
  color: #1d4ed8;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .09);
}
.approval-tab.active::after { display: none; }
.approval-tab b { background: #e6eef9; border: 0; color: #71859c; box-shadow: none; }
.approval-tab.active b { background: #eaf2ff; color: #1d4ed8; }
.approval-tabs-note { color: #8598ae; text-shadow: none; margin-left: 10px; }
.catalog-level-tabs {
  border: 1px solid #e4ecf7;
  background: #eef4fc;
  box-shadow: none;
}
.catalog-level-tab { color: #64788e; text-shadow: none; }
.catalog-level-tab.active { background: #fff; color: #1d4ed8; border: 0; box-shadow: 0 1px 3px rgba(15, 23, 42, .08); }
.catalog-level-tab.active b { color: #0891b2; }

/* Cobalt hero with cyan / violet light */
.approval-hero {
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 20px;
  background:
    radial-gradient(circle at 82% -8%, rgba(147, 197, 253, .24), transparent 36%),
    radial-gradient(circle at 22% 118%, rgba(37, 99, 235, .28), transparent 42%),
    linear-gradient(125deg, #071a37 0%, #0d2c64 50%, #1d4ed8 100%);
  box-shadow: 0 20px 50px rgba(15, 42, 92, .24), inset 0 1px 0 rgba(255, 255, 255, .10);
}
.approval-hero::after { background: linear-gradient(90deg, rgba(147, 197, 253, .65), rgba(59, 130, 246, .22) 55%, transparent); }
.approval-hero-glow { background: radial-gradient(circle, rgba(96, 165, 250, .18), transparent 68%); }
.approval-hero-eyebrow { color: #93c5fd; }
.approval-hero-eyebrow span { background: #60a5fa; }
.approval-hero h1 { color: #f8fbff; text-shadow: 0 2px 18px rgba(8, 22, 48, .18); }
.approval-hero-copy p { color: #bdd0e8; }
.approval-level-card {
  background: rgba(255, 255, 255, .055);
  border-color: rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09);
}
.approval-level-card:hover { background: rgba(255, 255, 255, .1); border-color: rgba(147, 197, 253, .38); }
.approval-level-seal {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
  text-shadow: none;
}
.approval-level-card.level-national .approval-level-seal { color: #c4b5fd; border-color: rgba(196, 181, 253, .3); }
.approval-level-card.level-provincial .approval-level-seal { color: #93c5fd; border-color: rgba(147, 197, 253, .3); }
.approval-level-card.level-municipal .approval-level-seal { color: #67e8f9; border-color: rgba(103, 232, 249, .3); }
.approval-level-card.level-county .approval-level-seal { color: #5eead4; border-color: rgba(94, 234, 212, .3); }
.approval-level-count { color: #dbeafe; }
.approval-level-count small { color: #94aec9; }
.approval-level-info small { color: #94aec9; }
.approval-hero-metrics { border-left-color: rgba(255, 255, 255, .12); }
.approval-hero-metrics div { border-right-color: rgba(255, 255, 255, .08); }
.approval-hero-metrics strong { color: #f0f9ff; }
.approval-hero-metrics span { color: #94aec9; }

/* A clean, editorial catalogue */
.catalog-command {
  border: 1px solid #e4edf8;
  background:
    radial-gradient(circle at 92% 8%, rgba(96, 165, 250, .10), transparent 30%),
    linear-gradient(112deg, #ffffff, #f5f9ff);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .035);
}
.catalog-command .eyebrow { color: #2563eb; }
.catalog-command h2 { color: #13233c; text-shadow: none; }
.catalog-command p { color: #71849a; }
.catalog-command-stats span { color: #8295aa; }
.catalog-command-stats strong { color: #1d4ed8; }
.catalog-level-seal {
  border-color: #e1eaf6;
  background: #f8fbff;
  box-shadow: none;
  color: #7c8fa6;
  text-shadow: none;
}
.catalog-level-seal.level-national { border-color: #e6dcff; background: #f7f3ff; color: #7c3aed; }
.catalog-level-seal.level-provincial { border-color: #dbe7ff; background: #f3f7ff; color: #2563eb; }
.catalog-level-seal.level-municipal { border-color: #d8f7fc; background: #f1fdff; color: #0891b2; }
.catalog-level-seal.level-county { border-color: #d5faf2; background: #f0fdfa; color: #0f9f8a; }
.catalog-level-head { border-bottom-color: #edf3fa; }
.catalog-level-head h3 { color: #2c4058; }
.catalog-level-head p, .catalog-level-count { color: #8698ad; }
.catalog-card { border-color: #e5edf7; box-shadow: 0 1px 2px rgba(15, 23, 42, .02), 0 6px 18px rgba(15, 23, 42, .035); }
.catalog-card:hover { border-color: #bcd3ef; box-shadow: 0 10px 26px rgba(37, 99, 235, .09); }
.catalog-card::before { background: linear-gradient(90deg, rgba(34, 211, 238, .5), transparent 80%); }
.catalog-title { color: #273b53; }
.catalog-authority { color: #7f92a8; }
.catalog-authority .icon { color: #9aabc0; }
.catalog-code { color: #9aabc0; }
.catalog-meta { color: #8497ac; }
.catalog-meta span { border-right-color: #eef3fa; }
.catalog-meta b { color: #526a84; }
.catalog-foot { border-top-color: #eef3fa; }
.catalog-link { color: #7f92a8; }
.catalog-link:hover { color: #2563eb; }
.catalog-generate { color: #1d4ed8; }
.catalog-generate:hover { color: #1e40af; }
.approval-level-pill {
  border-color: color-mix(in srgb, var(--level-color) 22%, white);
  background: color-mix(in srgb, var(--level-color) 8%, white);
  color: color-mix(in srgb, var(--level-color) 82%, #1e293b);
}
.level-mark { background: color-mix(in srgb, var(--level-color) 13%, white); }
.qual-stepper { background: #fbfdff; border-color: #e7eef8; box-shadow: none; }
.qual-step-dot { background: #f4f8fd; border-color: #dfe8f4; box-shadow: none; }
.qual-step.done .qual-step-dot { background: #eaf2ff; border-color: #9dc0ef; color: #2563eb; }
.qual-step.current .qual-step-dot { background: #e7faff; border-color: #22d3ee; color: #0891b2; box-shadow: 0 0 0 3px rgba(6, 182, 212, .08); }
.material-row { border-color: #e7eef8; background: #fff; box-shadow: none; }
.material-row.approved { background: #f8fbff; }
.material-select { border-color: #dfe8f4; box-shadow: none; background-color: #f8fafd; }
.material-progress-track span { background: linear-gradient(90deg, #22d3ee, #2563eb); }

/* Notice document */
.notice-hero {
  border: 1px solid rgba(255, 255, 255, .08);
  background:
    radial-gradient(circle at 88% -10%, rgba(147, 197, 253, .24), transparent 36%),
    radial-gradient(circle at 12% 120%, rgba(37, 99, 235, .26), transparent 38%),
    linear-gradient(120deg, #071a37, #123f8f);
  box-shadow: 0 12px 30px rgba(15, 42, 92, .18), inset 0 1px 0 rgba(255, 255, 255, .1);
}
.notice-hero-seal {
  border-color: rgba(191, 219, 254, .55);
  color: #eff6ff;
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
.notice-eyebrow { color: #93c5fd; }
.notice-level { border-color: rgba(191, 219, 254, .32); color: #dbeafe; }
.notice-hero-main p { color: #a8c0df; }
.notice-facts { border-color: #e6eef8; background: #e6eef8; box-shadow: 0 2px 8px rgba(15, 23, 42, .03); }
.notice-facts div { background: linear-gradient(180deg, #fff, #fbfdff); }
.notice-facts span { color: #8497ac; }
.notice-facts strong { color: #334155; }
.notice-index { color: #1d4ed8; border-color: #d7e6fb; background: #f3f8ff; }
.notice-section-head h4 { color: #243c58; }
.notice-section-head p { color: #8497ac; }
.notice-conditions li { color: #5f7590; border-bottom-color: #eef3fa; }
.notice-conditions .icon { color: #3b82f6; }
.notice-material-list, .notice-process { border-color: #e6eef8; box-shadow: none; }
.notice-material-row { border-bottom-color: #eef3fa; background: #fff; }
.notice-material-index { background: #f3f8ff; color: #6f88a3; }
.notice-material-name { color: #2c4058; }
.notice-material-name em { color: #1d4ed8; background: #edf4ff; }
.notice-material-requirement { color: #8497ac; }
.notice-process { background: #fbfdff; }
.notice-step-no { border-color: #c7ddf8; background: #f3f8ff; color: #2563eb; }
.notice-process-step strong { color: #334155; }
.notice-process-step p { color: #8497ac; }
.notice-step-line { background: #d9eef5; }
.notice-basis-grid > div { border-left-color: #60a5fa; background: #f6faff; }
.notice-basis-grid span { color: #2563eb; }
.notice-basis-grid p { color: #50657d; }
.notice-footnote { background: #f5f9ff; color: #7f92a8; }
.notice-footnote .icon { color: #8ca0b7; }

/* Clean sheets & drawers */
.drawer-card, .modal-card {
  border: 1px solid #dce7f4;
  background: #fff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .22);
}
.modal-header {
  background: #fff;
  border-bottom: 1px solid #eef3fa;
  box-shadow: none;
  text-shadow: none;
}
.modal-header h3 { color: #14243a; }
.modal-footer { background: #fbfdff; border-top: 1px solid #eef3fa; box-shadow: none; }
.drawer-card .modal-body { background: #fcfdff; }
.drawer-card .modal-footer { background: #fbfdff; }
.dropdown-panel { border-color: #dfe9f5; background: #fff; box-shadow: 0 18px 40px rgba(15, 23, 42, .14); }
.dropdown-head { background: #fbfdff; border-bottom-color: #eef3fa; text-shadow: none; }
.empty-state { border: 1px dashed #dbe7f4; background: #fbfdff; }
.toast { border: 1px solid #dce7f4; background: #fff; color: #334155; box-shadow: 0 12px 30px rgba(15, 23, 42, .14); }

/* Login: aurora cobalt and a crisp floating sheet */
.login-screen { background: #f4f7fc; }
.login-visual {
  border-right: 1px solid rgba(255, 255, 255, .06);
  background:
    radial-gradient(circle at 50% -10%, rgba(147, 197, 253, .26), transparent 42%),
    radial-gradient(circle at 12% 18%, rgba(37, 99, 235, .43), transparent 42%),
    radial-gradient(circle at 82% 82%, rgba(37, 99, 235, .32), transparent 42%),
    linear-gradient(160deg, #071a37 0%, #0a2450 48%, #0e3a80 100%);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .05);
}
.login-grid { opacity: .09; }
.login-visual::after { border-color: rgba(191, 219, 254, .13); box-shadow: 0 0 0 70px rgba(191, 219, 254, .025), 0 0 0 140px rgba(191, 219, 254, .018); }
.login-orb-one { background: radial-gradient(circle at 40% 40%, rgba(34, 211, 238, .2), transparent 65%); }
.login-orb-two { background: radial-gradient(circle at 50% 50%, rgba(37, 99, 235, .2), transparent 68%); }
.brand-mark {
  background: linear-gradient(145deg, #67e8f9 0%, #3b82f6 45%, #1d4ed8 100%);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 8px 22px rgba(37, 99, 235, .35);
}
.brand-sub { color: #88a1c2; }
.login-kicker {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .14);
  color: #d7e6f8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.pulse-dot { background: #93c5fd; box-shadow: 0 0 0 0 rgba(147, 197, 253, .45); }
.login-copy h1 { color: #f8fbff; text-shadow: 0 2px 18px rgba(4, 16, 37, .2); }
.login-copy h1::after { background: linear-gradient(90deg, #93c5fd, transparent); }
.login-copy p { color: #b3c7df; }
.login-feature { color: #d3e3f5; border-bottom-color: rgba(255, 255, 255, .09); }
.feature-icon {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .1);
  color: #a5f3fc;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.login-proof { border-top-color: rgba(255, 255, 255, .1); }
.proof-stat strong { color: #f8fbff; }
.proof-stat strong span { color: #9fc4df; }
.proof-stat > span { color: #8da9c7; }
.proof-divider { background: rgba(255, 255, 255, .12); }
.login-visual-foot { color: #718ba9; }
.login-panel {
  background: #f6f9fe;
  background-image:
    radial-gradient(circle at 100% 0%, rgba(37, 99, 235, .06), transparent 34%),
    linear-gradient(180deg, #f9fbff, #f3f7fd);
}
.login-form-wrap {
  max-width: 420px;
  padding: 26px 24px 21px;
  border: 1px solid #e3ecf8;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .08), 0 2px 6px rgba(15, 23, 42, .03);
}
.login-heading h2 { color: #13233c; text-shadow: none; }
.login-heading p { color: #71849a; }
.login-form .field input { height: 40px; }
.login-form .btn-block { height: 42px; font-size: 13px; }
.demo-divider { color: #8798ad; text-shadow: none; }
.demo-account {
  border-color: #e4edf8;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .025);
}
.demo-account:hover { border-color: #bcd3ef; box-shadow: 0 5px 14px rgba(37, 99, 235, .07); }
.demo-hint { color: #8093a9; }
.login-security { border-top-color: #e8f0fa; color: #8093a9; }
.login-panel-foot { color: #7b8ea5; text-shadow: none; }
.login-panel-foot strong { color: #4d647e; }

/* Small details */
.stat-card .stat-icon, .ops-icon, .qual-stat-icon, .stat-icon {
  box-shadow: none;
  border: 0;
}
.page-date-chip, .table-count {
  border: 1px solid #e4edf8;
  background: #f8fbff;
  box-shadow: none;
  text-shadow: none;
}
.toast-root .toast .icon { color: #10b981; }

/* Apple system typography */
.approval-hero h1,
.catalog-command h2,
.notice-hero-main h3,
.approval-level-seal,
.catalog-level-seal,
.notice-hero-seal,
.level-mark {
  font-family: var(--font);
  font-feature-settings: "kern" 1;
}
.page-title,
.login-copy h1,
.login-heading h2,
.modal-header h3 {
  letter-spacing: -.025em;
}
@media (max-width: 480px) {
  .login-form-wrap { padding: 20px 16px 16px; border-radius: 16px; }
  .approval-tabs { width: 100%; display: flex; }
}





/* Sidebar mini calendar */
.sidebar-calendar {
  flex: 0 0 auto; margin: 0 2px 10px; padding: 8px 8px 7px;
  border: 1px solid rgba(96, 165, 250, .12); border-radius: 10px;
  background: linear-gradient(160deg, rgba(8, 25, 48, .82), rgba(5, 18, 36, .72));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}
.sidebar-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.cal-nav { width: 18px; height: 18px; display: grid; place-items: center; border: 0; border-radius: 4px; background: transparent; color: #7f9aba; font-size: 13px; line-height: 1; }
.cal-nav:hover { background: rgba(96, 165, 250, .12); color: #dbeafe; }
.cal-title { flex: 1; height: 20px; border: 0; background: transparent; color: #dbeafe; font-size: 9px; font-weight: 500; letter-spacing: .03em; }
.cal-title:hover { color: #93c5fd; }
.sidebar-cal-meta { display: flex; align-items: center; justify-content: space-between; padding: 1px 2px 5px; }
.sidebar-cal-meta span { color: #6f89a8; font-size: 6.5px; letter-spacing: .08em; }
.cal-scope { padding: 1px 5px; border: 1px solid rgba(147, 197, 253, .16); border-radius: 3px; background: transparent; color: #8fb7e2; font-size: 6px; }
.cal-scope:hover { background: rgba(96, 165, 250, .12); color: #dbeafe; }
.sidebar-cal-week { display: grid; grid-template-columns: repeat(7, 1fr); padding: 0 1px 3px; }
.sidebar-cal-week span { text-align: center; color: #5f7897; font-size: 6px; }
.sidebar-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.sidebar-cal-day {
  position: relative; height: 21px; padding: 0; display: flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 4px; background: transparent;
  color: #a9bdd4; font-family: var(--font-num); font-size: 7.5px; font-variant-numeric: tabular-nums;
}
.sidebar-cal-day:hover { background: rgba(96, 165, 250, .1); color: #eff6ff; }
.sidebar-cal-day.outside { color: #415b78; }
.sidebar-cal-day.today { border-color: rgba(96, 165, 250, .4); color: #bfdbfe; }
.sidebar-cal-day.selected { background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #fff; box-shadow: 0 3px 8px rgba(29, 78, 216, .35); }
.sidebar-cal-day.selected.today { border-color: #93c5fd; }
.cal-dots { position: absolute; left: 50%; bottom: 1px; transform: translateX(-50%); display: flex; gap: 1.5px; }
.cal-dots b { width: 2.5px; height: 2.5px; border-radius: 50%; background: #d4b270; }
.sidebar-cal-day.selected .cal-dots b { background: #fff; }
.sidebar-cal-agenda { min-height: 42px; margin-top: 5px; padding-top: 5px; border-top: 1px solid rgba(96, 165, 250, .1); }
.cal-agenda-head { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 0 1px 3px; }
.cal-agenda-head strong { color: #bcd0e6; font-size: 6.5px; font-weight: 500; }
.cal-agenda-head span { color: #6683a4; font-size: 5.5px; white-space: nowrap; }
.cal-agenda-list { display: flex; flex-direction: column; gap: 2px; }
.cal-task { display: flex; align-items: flex-start; gap: 5px; width: 100%; padding: 3px 4px; border: 0; border-radius: 4px; background: rgba(255, 255, 255, .025); color: #a9c2dc; text-align: left; }
.cal-task:hover { background: rgba(96, 165, 250, .1); color: #eff6ff; }
.cal-priority { width: 3px; height: 3px; flex: 0 0 auto; margin-top: 4px; border-radius: 50%; background: #60a5fa; }
.cal-priority.high { background: #f59e0b; }
.cal-priority.urgent { background: #f87171; }
.cal-task-main { min-width: 0; flex: 1; }
.cal-task-main strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 6.5px; font-weight: 400; line-height: 1.4; }
.cal-task-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; color: #5e7b9b; font-size: 5.5px; }
.cal-next-label { padding: 0 1px 2px; color: #5f7c9c; font-size: 5.5px; }
.cal-empty { padding: 5px 1px 3px; color: #5f7b99; font-size: 6px; text-align: center; }
@media (max-height: 760px) {
  .sidebar-calendar { padding: 6px; }
  .sidebar-cal-day { height: 18px; font-size: 7px; }
  .sidebar-cal-agenda { min-height: 28px; }
  .cal-agenda-list { gap: 1px; }
}

/* Calendar readability */
.sidebar-cal-week span { color: #718ba8; font-size: 6.5px; }
.sidebar-cal-day { height: 22px; font-size: 8px; }
.sidebar-cal-day.outside { color: #4a6684; }
.sidebar-cal-day.today { color: #dbeafe; }
.cal-agenda-head strong { font-size: 7px; }
.cal-agenda-head span { font-size: 6px; }
.cal-task-main strong { font-size: 7px; }
.cal-task-main small { font-size: 6px; }
.sidebar-cal-meta span { font-size: 6.8px; }
.cal-scope { font-size: 6.4px; }
.cal-agenda-head { padding-bottom: 4px; }
.sidebar-cal-agenda { margin-top: 6px; padding-top: 6px; }