:root {
  --navy-950: #071427;
  --navy-900: #0b1f3a;
  --navy-800: #122a4d;
  --navy-700: #1b3a66;
  --blue-500: #2f6fed;
  --green-600: #1b8a5a;
  --green-500: #22a06b;
  --orange-500: #e07a2f;
  --red-500: #c44536;
  --gray-50: #f4f7fb;
  --gray-100: #e8eef5;
  --gray-200: #d5e0ee;
  --gray-500: #5b6f8a;
  --gray-700: #33465f;
  --white: #ffffff;
  --sidebar: 272px;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(11, 31, 58, 0.08);
  --font: "Plus Jakarta Sans", "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--font);
  background: var(--gray-50);
  color: var(--navy-900);
  line-height: 1.5;
}

a { color: var(--blue-500); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0 0 .35rem; letter-spacing: -.02em; }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.1rem; }
p { margin: 0 0 1rem; }
code { background: var(--gray-100); padding: .1rem .35rem; border-radius: 6px; font-size: .9em; }

.app { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar);
  background: linear-gradient(180deg, var(--navy-900), var(--navy-950));
  color: #d7e4f5;
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1rem 1rem;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 30;
}
.brand {
  display: flex;
  gap: .8rem;
  align-items: center;
  color: #fff;
  padding: .4rem .5rem 1.2rem;
  text-decoration: none;
}
.brand strong { display: block; font-size: 1.05rem; }
.brand small { color: #8aa0bf; font-size: .75rem; }
.brand-mark {
  width: 40px; height: 40px; border-radius: 12px;
  background: #3ddc97; color: var(--navy-900);
  display: grid; place-items: center;
  font-size: 1.6rem; font-weight: 800; line-height: 1;
}
.brand-mark-lg { width: 56px; height: 56px; font-size: 2rem; margin-bottom: 1rem; }
.side-nav { display: flex; flex-direction: column; gap: .25rem; flex: 1; }
.side-link {
  display: flex; align-items: center; gap: .7rem;
  color: #c5d5ea; padding: .7rem .85rem; border-radius: 10px;
  text-decoration: none; font-weight: 600; font-size: .92rem;
}
.side-link:hover { background: rgba(255,255,255,.06); text-decoration: none; color: #fff; }
.side-link.is-active { background: rgba(47, 111, 237, .28); color: #fff; }
.side-sep { height: 1px; background: rgba(255,255,255,.08); margin: .8rem .4rem; }
.side-logout {
  color: #9db0c9; font-size: .85rem; padding: .8rem;
  text-decoration: none;
}
.nav-ico {
  width: 18px; height: 18px; border-radius: 4px;
  background: currentColor; opacity: .75;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
.nav-ico[data-icon="home"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3 3 10h2v10h6v-6h2v6h6V10h2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3 3 10h2v10h6v-6h2v6h6V10h2z'/%3E%3C/svg%3E"); }
.nav-ico[data-icon="users"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M16 11a4 4 0 1 0-4-4 4 4 0 0 0 4 4M8 12a3.5 3.5 0 1 0-3.5-3.5A3.5 3.5 0 0 0 8 12m8 2c-3 0-6 1.5-6 4v2h12v-2c0-2.5-3-4-6-4M8 14c-.7 0-1.4.1-2 .2C3.7 14.7 2 16 2 18v2h6v-2c0-1.5.5-2.7 1.4-3.6A9.5 9.5 0 0 0 8 14'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M16 11a4 4 0 1 0-4-4 4 4 0 0 0 4 4M8 12a3.5 3.5 0 1 0-3.5-3.5A3.5 3.5 0 0 0 8 12m8 2c-3 0-6 1.5-6 4v2h12v-2c0-2.5-3-4-6-4M8 14c-.7 0-1.4.1-2 .2C3.7 14.7 2 16 2 18v2h6v-2c0-1.5.5-2.7 1.4-3.6A9.5 9.5 0 0 0 8 14'/%3E%3C/svg%3E"); }
.nav-ico[data-icon="folder"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-8z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-8z'/%3E%3C/svg%3E"); }
.nav-ico[data-icon="box"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M21 8.5 12 3 3 8.5V16l9 5 9-5zM12 12.5 5.2 8.7 12 4.6l6.8 4.1z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M21 8.5 12 3 3 8.5V16l9 5 9-5zM12 12.5 5.2 8.7 12 4.6l6.8 4.1z'/%3E%3C/svg%3E"); }
.nav-ico[data-icon="beaker"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 3h12v2h-1v5.6L21 21H3l4-10.4V5H6zm5 2v6.2l-.6 1.5h3.2L13 11.2V5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 3h12v2h-1v5.6L21 21H3l4-10.4V5H6zm5 2v6.2l-.6 1.5h3.2L13 11.2V5z'/%3E%3C/svg%3E"); }
.nav-ico[data-icon="calendar"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h2v2h6V2h2v2h3v18H4V4h3zm12 6H5v12h14z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h2v2h6V2h2v2h3v18H4V4h3zm12 6H5v12h14z'/%3E%3C/svg%3E"); }
.nav-ico[data-icon="settings"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 8a4 4 0 1 1 0 8 4 4 0 0 1 0-8m9.4 4a7.5 7.5 0 0 0-.1-1.2l2.1-1.6-2-3.4-2.5.8a7.7 7.7 0 0 0-2.1-1.2L16.4 3h-4l-.4 2.4a7.7 7.7 0 0 0-2.1 1.2l-2.5-.8-2 3.4 2.1 1.6a7.5 7.5 0 0 0 0 2.4L3.4 15l2 3.4 2.5-.8a7.7 7.7 0 0 0 2.1 1.2l.4 2.4h4l.4-2.4a7.7 7.7 0 0 0 2.1-1.2l2.5.8 2-3.4-2.1-1.6c.1-.4.1-.8.1-1.2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 8a4 4 0 1 1 0 8 4 4 0 0 1 0-8m9.4 4a7.5 7.5 0 0 0-.1-1.2l2.1-1.6-2-3.4-2.5.8a7.7 7.7 0 0 0-2.1-1.2L16.4 3h-4l-.4 2.4a7.7 7.7 0 0 0-2.1 1.2l-2.5-.8-2 3.4 2.1 1.6a7.5 7.5 0 0 0 0 2.4L3.4 15l2 3.4 2.5-.8a7.7 7.7 0 0 0 2.1 1.2l.4 2.4h4l.4-2.4a7.7 7.7 0 0 0 2.1-1.2l2.5.8 2-3.4-2.1-1.6c.1-.4.1-.8.1-1.2'/%3E%3C/svg%3E"); }
.nav-ico[data-icon="shield"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 4 5v6c0 5 3.4 9.4 8 11 4.6-1.6 8-6 8-11V5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 4 5v6c0 5 3.4 9.4 8 11 4.6-1.6 8-6 8-11V5z'/%3E%3C/svg%3E"); }

.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; gap: .75rem;
  padding: .85rem 1.4rem; background: #fff;
  border-bottom: 1px solid var(--gray-100); position: sticky; top: 0; z-index: 20;
}
.top-search { display: flex; flex: 1; gap: .5rem; max-width: 640px; }
.top-search input, .filter-bar input, .filter-bar select, .field input, .field select, .field textarea {
  width: 100%; border: 1px solid var(--gray-200); border-radius: 10px;
  padding: .7rem .85rem; font: inherit; background: #fff; color: inherit;
}
.field textarea { resize: vertical; min-height: 84px; }
.field input:focus, .field select:focus, .field textarea:focus, .top-search input:focus {
  outline: 2px solid rgba(47,111,237,.25); border-color: var(--blue-500);
}
.user-chip { display: flex; align-items: center; gap: .65rem; margin-left: auto; }
.user-chip small { display: block; color: var(--gray-500); font-size: .75rem; }
.user-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--navy-800); color: #fff; display: grid; place-items: center; font-weight: 700;
}
.menu-toggle { display: none; }
.icon-btn {
  width: 40px; height: 40px; border: 0; background: var(--gray-50); border-radius: 10px; cursor: pointer;
}
.icon-btn span { display: block; height: 2px; background: var(--navy-900); margin: 5px 8px; }

.content { padding: 1.4rem 1.6rem 2.5rem; }
.page-head {
  display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start;
  margin-bottom: 1.2rem; flex-wrap: wrap;
}
.head-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.breadcrumb { display: flex; gap: .4rem; flex-wrap: wrap; color: var(--gray-500); font-size: .85rem; margin-bottom: .35rem; }
.breadcrumb a { color: var(--gray-500); }
.muted { color: var(--gray-500); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 10px; padding: .65rem 1rem;
  font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: none; filter: brightness(1.05); }
.btn-primary { background: var(--green-600); color: #fff; }
.btn-navy { background: var(--navy-800); color: #fff; }
.btn-ghost { background: var(--gray-100); color: var(--navy-900); }
.btn-block { width: 100%; }

.card {
  background: #fff; border: 1px solid var(--gray-100); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1.15rem 1.2rem; margin-bottom: 1.1rem;
}
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .8rem; }
.form-card { max-width: 920px; }
.stat-grid, .info-grid, .case-grid, .formula-grid {
  display: grid; gap: 1rem; margin-bottom: 1.1rem;
}
.stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.info-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.case-grid, .formula-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.stat-card, .info-tile {
  background: #fff; border: 1px solid var(--gray-100); border-radius: var(--radius);
  padding: 1.1rem 1.2rem; box-shadow: var(--shadow);
}
.stat-card span, .info-tile span { color: var(--gray-500); font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.stat-card strong { display: block; font-size: 2rem; margin-top: .2rem; }
.info-tile strong { display: block; margin-top: .35rem; font-size: 1.05rem; }
.note-text { font-weight: 500; font-size: .95rem !important; color: var(--gray-700); }

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: .75rem .6rem; border-bottom: 1px solid var(--gray-100); vertical-align: top; }
.table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--gray-500); }
.name-link { font-weight: 700; color: var(--navy-900); }

.badge {
  display: inline-flex; align-items: center; border-radius: 999px;
  padding: .2rem .65rem; font-size: .78rem; font-weight: 700;
}
.badge-blue { background: #e7eefc; color: #1d4bb8; }
.badge-green { background: #e3f6ec; color: #146c45; }
.badge-orange { background: #fdecdc; color: #a14d12; }
.badge-gray { background: #eef1f5; color: #5b6f8a; }
.badge-navy { background: #e4ebf5; color: var(--navy-800); }

.alert { border-radius: 12px; padding: .85rem 1rem; margin-bottom: 1rem; font-weight: 600; }
.alert-error, .alert-danger { background: #fdecea; color: #8a241c; }
.alert-success { background: #e7f6ee; color: #146c45; }
.empty { padding: 1.4rem; text-align: center; color: var(--gray-500); }
.filter-bar, .barcode-bar { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.filter-bar input, .filter-bar select { max-width: 280px; }

.case-card, .formula-card {
  display: block; background: #fff; border: 1px solid var(--gray-100);
  border-radius: var(--radius); padding: 1rem; color: inherit; text-decoration: none;
  box-shadow: var(--shadow);
}
.case-card:hover, .formula-card:hover { border-color: #b9ccea; text-decoration: none; }
.case-card-top { display: flex; justify-content: space-between; gap: .5rem; align-items: flex-start; }
.case-card-add {
  border: 1.5px dashed #9db4d0; background: #f8fbff; display: grid; place-items: center; text-align: center; min-height: 140px;
}
.split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 1rem; align-items: start; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 1rem 1.1rem; border-left: 2px solid var(--gray-200); }
.timeline li:last-child { border-left-color: transparent; }
.timeline-item { display: grid; color: inherit; text-decoration: none; }
.timeline-item time { font-size: .8rem; color: var(--gray-500); }
.photo-compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; }
.photo-compare figure, .photo-strip figure {
  margin: 0; background: var(--gray-50); border-radius: 12px; overflow: hidden; border: 1px solid var(--gray-100);
}
.photo-compare img, .photo-strip img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.photo-compare figcaption, .photo-compare span, .photo-strip span {
  display: block; padding: .45rem .7rem; font-size: .8rem; color: var(--gray-500);
}
.compare-mark { font-size: 1.4rem; color: var(--gray-500); }
.photo-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .7rem; }

.label-card {
  background: linear-gradient(180deg, #0b1f3a, #16345c);
  color: #fff; border-radius: 16px; padding: 1.1rem 1.2rem;
}
.label-card small { letter-spacing: .12em; font-size: .7rem; color: #8fbbff; }
.label-card h2, .label-card h3 { margin: .2rem 0 .8rem; }
.label-card ul { margin: 0; padding: 0; list-style: none; color: #d5e4f7; }
.label-card-lg { min-height: 280px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1rem; }
.field { display: flex; flex-direction: column; gap: .3rem; font-weight: 600; font-size: .88rem; }
.field-full { grid-column: 1 / -1; }
.form-actions { display: flex; gap: .6rem; margin-top: 1.1rem; }
.subhead { margin: 1.2rem 0 .7rem; }
.patient-banner { background: #eef4ff; border-radius: 10px; padding: .75rem 1rem; }
.status-form { display: flex; gap: .6rem; align-items: end; margin-top: 1.2rem; flex-wrap: wrap; }
.kv { display: grid; gap: .7rem; }
.kv div { display: grid; grid-template-columns: 140px 1fr; gap: .5rem; }
.kv dt { color: var(--gray-500); font-weight: 600; }
.kv dd { margin: 0; }
.tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.tabs a {
  padding: .45rem .9rem; border-radius: 999px; background: var(--gray-100); color: var(--navy-900);
  font-weight: 700; text-decoration: none;
}
.tabs a.is-active { background: var(--navy-800); color: #fff; }
.product-hit { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; margin-bottom: 1.2rem; }
.attach-form { display: grid; gap: .6rem; }
.readonly-grid strong, .readonly-grid p { font-weight: 500; }
.sidebar-backdrop { display: none; }

.login-body {
  min-height: 100vh;
  background: radial-gradient(circle at top left, #1b3a66, var(--navy-950));
  display: grid; place-items: center; padding: 1.5rem;
}
.login-shell {
  width: min(920px, 100%);
  display: grid; grid-template-columns: 1.05fr .95fr;
  background: #fff; border-radius: 24px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.25);
}
.login-hero { background: var(--navy-900); color: #d7e6f8; padding: 2.4rem; }
.login-hero h1 { color: #fff; font-size: 2rem; }
.login-hero ul { margin: 1.2rem 0 0; padding-left: 1.1rem; }
.login-card { padding: 2.2rem; }
.login-hint { margin-top: 1rem; color: var(--gray-500); font-size: .85rem; }

@media (max-width: 1100px) {
  .stat-grid, .info-grid { grid-template-columns: 1fr 1fr; }
  .split, .product-hit, .login-shell { grid-template-columns: 1fr; }
  .photo-compare { grid-template-columns: 1fr; }
  .compare-mark { display: none; }
}
@media (max-width: 860px) {
  .sidebar {
    position: fixed; left: 0; transform: translateX(-105%);
    transition: transform .2s ease;
  }
  body.sidebar-open .sidebar { transform: none; }
  .sidebar-backdrop {
    display: block; position: fixed; inset: 0; background: rgba(7,20,39,.45);
    opacity: 0; pointer-events: none; z-index: 25;
  }
  body.sidebar-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }
  .menu-toggle { display: inline-block; }
  .user-chip span { display: none; }
  .content { padding: 1rem; }
  .form-grid { grid-template-columns: 1fr; }
  .stat-grid, .info-grid { grid-template-columns: 1fr; }
  .kv div { grid-template-columns: 1fr; }
}