:root {
  color-scheme: light;
  --frame-blue: #4a7eea;
  --frame-blue-soft: rgba(74, 126, 234, 0.38);
  --frame-blue-inner: rgba(74, 126, 234, 0.16);
  --bg: #eef2f8;
  --bg-soft: #dce4f1;
  --card: rgba(255, 255, 255, 0.82);
  --card-strong: #ffffff;
  --text: #233149;
  --muted: #7a879b;
  --primary: #7fa4f4;
  --primary-dark: #678de3;
  --primary-soft: rgba(127, 164, 244, 0.18);
  --danger: #dc6a85;
  --warning: #d6a24a;
  --success: #56b08d;
  --border: rgba(145, 160, 189, 0.22);
  --border-strong: rgba(126, 145, 180, 0.38);
  --line-soft: rgba(255, 255, 255, 0.56);
  --line-deep: rgba(132, 150, 185, 0.18);
  --shadow-lg: 0 28px 70px rgba(65, 83, 119, 0.18);
  --shadow-md: 0 18px 40px rgba(88, 105, 138, 0.12);
}

* {
  box-sizing: border-box;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

html {
  min-height: 100%;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.95), transparent 20%),
    radial-gradient(circle at top right, rgba(189, 204, 228, 0.5), transparent 26%),
    linear-gradient(180deg, #7b879c 0%, #6d7b92 38%, #77839a 100%);
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Segoe UI", Arial, sans-serif;
  background: transparent;
  color: var(--text);
  line-height: 1.45;
}

body::before,
body::after {
  content: "";
  position: fixed;
  border-radius: 999px;
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}

body::before {
  top: -60px;
  left: -40px;
  width: 280px;
  height: 280px;
  background: rgba(255, 255, 255, 0.34);
}

body::after {
  right: 4%;
  bottom: -30px;
  width: 320px;
  height: 320px;
  background: rgba(192, 210, 236, 0.32);
}

#app {
  position: relative;
  z-index: 1;
  width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  max-width: 100%;
}

button {
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 14px;
  padding: 12px 18px;
  background: linear-gradient(180deg, #8eb0f6 0%, #799de8 100%);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 12px 24px rgba(101, 134, 196, 0.24);
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease, border-color 0.18s ease;
}

button:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 30px rgba(101, 134, 196, 0.28);
  background: linear-gradient(180deg, #7f9fe8 0%, #678de3 100%);
}

button.secondary {
  background: rgba(255, 255, 255, 0.72);
  color: var(--text);
  border-color: rgba(170, 182, 206, 0.32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
}

button.secondary:hover {
  background: rgba(255, 255, 255, 0.92);
}

button.danger {
  background: linear-gradient(135deg, #f05a7e 0%, #cf3158 100%);
  box-shadow: 0 12px 24px rgba(216, 61, 97, 0.22);
}

button.success {
  background: linear-gradient(135deg, #1fb37b 0%, #159f6a 100%);
  box-shadow: 0 12px 24px rgba(31, 169, 113, 0.22);
}

button.warning {
  background: linear-gradient(135deg, #efb13f 0%, #d9901a 100%);
  box-shadow: 0 12px 24px rgba(217, 144, 26, 0.22);
}

button:disabled {
  opacity: 0.58;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.app-shell {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 28px;
  min-height: 100vh;
  padding: 24px;
  align-items: start;
}

.sidebar {
  position: sticky;
  top: 24px;
  align-self: start;
  min-height: calc(100vh - 48px);
  padding: 24px 16px 20px;
  border-radius: 28px;
  border: 3px solid var(--frame-blue);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(237, 242, 252, 0.42) 100%);
  backdrop-filter: blur(16px);
  color: #20314d;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.45) inset,
    var(--shadow-lg),
    0 20px 50px rgba(74, 126, 234, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -1px 0 rgba(120, 136, 170, 0.06);
}

.sidebar::before {
  content: "";
  position: absolute;
  inset: 11px;
  border-radius: 20px;
  border: 1px solid var(--frame-blue-inner);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  pointer-events: none;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 26px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.42);
  position: relative;
  z-index: 1;
}

.brand-mark {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 18px;
  border: 2px solid rgba(255, 255, 255, 0.55);
  background:
    linear-gradient(135deg, #5b8ff1 0%, #4273db 58%, #97b7f5 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.32),
    0 12px 26px rgba(59, 95, 168, 0.22);
}

.brand-mark::before,
.brand-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.brand-mark::before {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background:
    radial-gradient(circle, #4a7eea 0 4px, transparent 4px),
    radial-gradient(circle, transparent 0 7px, rgba(255, 255, 255, 0.98) 7px 12px, transparent 12px),
    conic-gradient(
      from -11.25deg,
      rgba(255, 255, 255, 0.98) 0deg 14deg,
      transparent 14deg 45deg,
      rgba(255, 255, 255, 0.98) 45deg 59deg,
      transparent 59deg 90deg,
      rgba(255, 255, 255, 0.98) 90deg 104deg,
      transparent 104deg 135deg,
      rgba(255, 255, 255, 0.98) 135deg 149deg,
      transparent 149deg 180deg,
      rgba(255, 255, 255, 0.98) 180deg 194deg,
      transparent 194deg 225deg,
      rgba(255, 255, 255, 0.98) 225deg 239deg,
      transparent 239deg 270deg,
      rgba(255, 255, 255, 0.98) 270deg 284deg,
      transparent 284deg 315deg,
      rgba(255, 255, 255, 0.98) 315deg 329deg,
      transparent 329deg 360deg
    );
  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.brand-mark::after {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow:
    0 0 0 2px rgba(74, 126, 234, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.sidebar nav {
  display: grid;
  gap: 8px;
  position: relative;
  z-index: 1;
}

.sidebar nav button {
  width: 100%;
  text-align: left;
  padding: 14px 16px 14px 18px;
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.45);
  color: #3d5270;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 6px 14px rgba(91, 110, 148, 0.08);
  white-space: normal;
  overflow-wrap: anywhere;
}

.sidebar nav button:hover {
  background: rgba(255, 255, 255, 0.74);
  border-color: var(--frame-blue-soft);
}

.sidebar nav button.active {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.28);
  background: linear-gradient(180deg, #6d94f2 0%, #4a7eea 48%, #3d6fd4 100%);
  box-shadow:
    0 12px 26px rgba(74, 126, 234, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 4px 0 0 rgba(255, 255, 255, 0.35);
}

.main {
  padding: 6px 0 32px;
  min-width: 0;
  width: 100%;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
  padding: 20px 22px;
  border-radius: 26px;
  border: 3px solid var(--frame-blue);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.38) 0%, rgba(248, 250, 254, 0.22) 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.35) inset,
    0 20px 48px rgba(65, 83, 119, 0.12),
    0 8px 20px rgba(74, 126, 234, 0.06);
  backdrop-filter: blur(12px);
  min-width: 0;
}
.topbar > div {
  min-width: 0;
}
.page-title {
  margin: 0;
  font-size: 34px;
  line-height: 1.05;
  color: #ffffff;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
}

.page-subtitle {
  margin: 8px 0 0;
  color: rgba(245, 247, 252, 0.82);
  overflow-wrap: anywhere;
}

.toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
}

.toolbar-actions label {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
}

.toolbar-actions input[type="date"] {
  margin-top: 6px;
  min-width: 168px;
  border: 2px solid rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    inset 0 2px 4px rgba(113, 129, 162, 0.1),
    0 4px 12px rgba(74, 126, 234, 0.1);
}

.card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f8f9fd 52%, #f0f3fa 100%);
  border: 2px solid var(--frame-blue-soft);
  border-radius: 26px;
  padding: 26px 24px 24px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.65) inset,
    var(--shadow-md),
    0 16px 40px rgba(74, 126, 234, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -2px 6px rgba(176, 188, 211, 0.1);
  backdrop-filter: blur(12px);
}

.card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #a8c0ff 0%, #8aaaf0 45%, #c8d8ff 100%);
}

.card::after {
  content: "";
  position: absolute;
  inset: 11px;
  border-radius: 18px;
  border: 1px solid var(--frame-blue-inner);
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.card h1,
.card h2,
.card h3,
.card h4 {
  margin-top: 0;
  color: var(--text);
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.card p,
.card label,
.card strong,
.card th,
.card td,
.card .empty {
  color: var(--text);
}

.card .muted,
.card span.muted,
.card p.muted {
  color: var(--muted);
}

.grid {
  display: grid;
  gap: 18px;
}

.grid.two {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.grid.one {
  grid-template-columns: 1fr;
}

.grid.three {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.metric {
  position: relative;
  min-height: 140px;
  padding: 22px;
  border-radius: 24px;
  border: 2px solid var(--frame-blue-soft);
  background:
    radial-gradient(circle at top right, rgba(161, 184, 235, 0.28), transparent 36%),
    linear-gradient(180deg, #ffffff 0%, #f4f6fb 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.6) inset,
    var(--shadow-md),
    0 12px 28px rgba(74, 126, 234, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.metric::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 18px;
  border: 1px solid var(--frame-blue-inner);
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.metric strong {
  display: block;
  margin-bottom: 10px;
  font-size: 38px;
  line-height: 1;
  color: #152546;
}

.metric span {
  display: inline-block;
  color: var(--muted);
  font-weight: 700;
}

form {
  display: grid;
  gap: 14px;
}

label {
  display: grid;
  gap: 8px;
  font-weight: 700;
  color: #21314f;
  font-size: 13px;
  letter-spacing: 0.01em;
  min-width: 0;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid rgba(174, 185, 206, 0.36);
  border-radius: 18px;
  padding: 13px 14px;
  background: linear-gradient(180deg, #f6f8fc 0%, #ffffff 100%);
  color: var(--text);
  outline: none;
  box-shadow:
    inset 0 1px 2px rgba(74, 92, 126, 0.03),
    0 6px 16px rgba(113, 129, 162, 0.05);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(127, 164, 244, 0.8);
  box-shadow: 0 0 0 4px rgba(127, 164, 244, 0.12);
  background: rgba(255, 255, 255, 0.96);
}

textarea {
  min-height: 110px;
  resize: vertical;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

.stack {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.list-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.list-toolbar > label {
  flex: 1 1 260px;
}

.list-toolbar-meta,
.pagination-meta {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.pagination-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(174, 185, 206, 0.28);
}

.table-card {
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(174, 185, 206, 0.26);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(245, 248, 253, 0.98) 100%);
  box-shadow:
    0 8px 24px rgba(93, 108, 139, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.complete-list-card .topbar {
  margin-bottom: 14px;
}

.complete-list-summary {
  margin-bottom: 12px;
}

.complete-list-table-wrap {
  overflow-x: auto;
}

.complete-list-table {
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.complete-list-table thead th {
  background: rgba(127, 164, 244, 0.08);
}

.complete-list-table tbody tr:last-child td {
  border-bottom: 0;
}

.complete-primary,
.complete-secondary {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.complete-primary strong,
.complete-secondary strong {
  color: #1a2c4d;
  overflow-wrap: anywhere;
}

.complete-list-table td {
  color: #2a3a59;
}

.list-item {
  position: relative;
  padding: 20px;
  border: 1px solid var(--frame-blue-soft);
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffff 0%, #f5f7fc 100%);
  box-shadow:
    0 10px 24px rgba(72, 87, 116, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.55) inset,
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.list-item::before {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 16px;
  border: 1px solid var(--frame-blue-inner);
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.list-item h3,
.list-item h4 {
  margin: 0 0 8px;
  color: var(--text);
  overflow-wrap: anywhere;
}

.muted {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}

.tag {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid var(--frame-blue-inner);
  border-radius: 999px;
  background: rgba(127, 164, 244, 0.14);
  color: #5571ab;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.44);
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.tag.warning {
  background: rgba(244, 187, 78, 0.16);
  color: #9a6410;
}

.tag.success {
  background: rgba(31, 169, 113, 0.14);
  color: #16754e;
}

.tag.danger {
  background: rgba(216, 61, 97, 0.13);
  color: #a12f4d;
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f7f8fd 100%);
  border: 2px solid var(--frame-blue-soft);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.5) inset,
    0 12px 28px rgba(93, 108, 139, 0.09);
}

thead,
tbody,
tr {
  width: 100%;
}

th,
td {
  text-align: left;
  padding: 14px 12px;
  border-bottom: 1px solid rgba(171, 188, 216, 0.24);
  vertical-align: top;
}

th {
  background: linear-gradient(180deg, rgba(165, 188, 238, 0.28) 0%, rgba(127, 164, 244, 0.12) 100%);
  color: #304565;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

tbody tr:hover td {
  background: rgba(127, 164, 244, 0.07);
}

.login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(118, 130, 151, 0.12) 0%, rgba(90, 103, 126, 0.08) 100%);
}

.login-card {
  width: min(100%, 432px);
}

.auth-card {
  position: relative;
  padding: 34px 24px 24px;
  border-radius: 28px;
  background: linear-gradient(180deg, #fefefe 0%, #f8f9fc 56%, #eef2f8 100%);
  border: 4px solid #4a7eea;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.55) inset,
    0 26px 56px rgba(72, 87, 116, 0.22),
    0 8px 18px rgba(72, 87, 116, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset 0 -2px 6px rgba(176, 188, 211, 0.14);
}

.auth-card::after {
  content: "";
  position: absolute;
  inset: auto 20px -20px 20px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(62, 75, 102, 0.28) 0%, rgba(62, 75, 102, 0.12) 42%, transparent 76%);
  filter: blur(16px);
  z-index: -2;
}

.auth-card::before {
  content: "";
  position: absolute;
  inset: 11px;
  border-radius: 21px;
  border: 1px solid rgba(74, 126, 234, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    inset 0 -1px 0 rgba(169, 180, 200, 0.12);
  pointer-events: none;
}

.login-brand-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  margin: 0 auto 24px;
  padding: 12px 18px;
  border-radius: 14px;
  background: linear-gradient(180deg, #5b8ff1 0%, #4273db 60%, #3462c6 100%);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    0 12px 22px rgba(59, 95, 168, 0.34),
    0 3px 8px rgba(59, 95, 168, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -2px 6px rgba(31, 63, 131, 0.22);
}

.login-hero {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.login-panel {
  position: relative;
  padding: 14px 14px 8px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.52) 0%, rgba(246, 248, 252, 0.72) 100%);
  border: 1px solid rgba(220, 227, 241, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    0 10px 20px rgba(137, 151, 180, 0.08);
}

.login-panel::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  pointer-events: none;
}

.login-brand-card strong,
.login-brand-card span {
  display: block;
}

.login-brand-card strong {
  font-size: 18px;
  line-height: 1.1;
}

.login-brand-card span {
  margin-top: 3px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.92;
}

.login-brand-icon {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

.login-brand-icon::before,
.login-brand-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%) rotate(-35deg);
}

.login-brand-icon::before {
  left: 6px;
  width: 15px;
  height: 5px;
  border-radius: 4px;
  background: linear-gradient(90deg, #ffd15f 0%, #ffd15f 68%, #ef8f9d 68%, #ef8f9d 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 1px 2px rgba(0, 0, 0, 0.18);
}

.login-brand-icon::after {
  left: 19px;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 7px solid #fff2d6;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.14));
}

.auth-card h1 {
  margin-bottom: 10px;
  text-align: center;
  font-size: 22px;
}

.login-subtitle {
  margin: 0 0 18px;
  text-align: center;
  font-size: 13px;
}

.input-shell {
  position: relative;
}

.input-shell input {
  padding-left: 42px;
  background: linear-gradient(180deg, #f0f3f8 0%, #ffffff 100%);
  border-color: rgba(205, 214, 231, 0.9);
  box-shadow:
    inset 0 2px 5px rgba(174, 186, 209, 0.26),
    inset 0 -1px 0 rgba(255, 255, 255, 0.96),
    0 4px 10px rgba(126, 141, 171, 0.06);
}

.input-shell input:focus {
  border-color: rgba(121, 156, 233, 0.9);
  box-shadow:
    inset 0 2px 5px rgba(174, 186, 209, 0.18),
    0 0 0 4px rgba(127, 164, 244, 0.12);
}


.input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  opacity: 0.55;
}

.input-user::before,
.input-user::after,
.input-lock::before,
.input-lock::after {
  content: "";
  position: absolute;
}

.input-user::before {
  left: 4px;
  top: 1px;
  width: 6px;
  height: 6px;
  border: 1.5px solid #6f7f97;
  border-radius: 999px;
}

.input-user::after {
  left: 2px;
  bottom: 1px;
  width: 10px;
  height: 6px;
  border: 1.5px solid #6f7f97;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom: 0;
}

.input-lock::before {
  left: 3px;
  top: 1px;
  width: 8px;
  height: 7px;
  border: 1.5px solid #6f7f97;
  border-bottom: 0;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.input-lock::after {
  left: 2px;
  bottom: 1px;
  width: 10px;
  height: 8px;
  border: 1.5px solid #6f7f97;
  border-radius: 2px;
}

.notice {
  padding: 14px 16px;
  border: 2px solid var(--frame-blue-soft);
  border-radius: 18px;
  margin-bottom: 18px;
  background: linear-gradient(180deg, rgba(232, 241, 255, 0.98) 0%, rgba(244, 248, 255, 0.96) 100%);
  color: #294579;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 8px 20px rgba(74, 126, 234, 0.08);
}

.empty {
  padding: 24px;
  text-align: center;
  color: var(--muted);
  border: 2px dashed var(--frame-blue-soft);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(244, 248, 255, 0.78) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 8px 20px rgba(74, 126, 234, 0.06);
}

.signature-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 12px 0;
}

.signature-box,
.signature-empty {
  border: 1px solid rgba(146, 168, 206, 0.22);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  padding: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

.signature-label {
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.signature-image {
  width: 100%;
  height: 96px;
  object-fit: contain;
  background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
  border-radius: 10px;
  border: 1px solid rgba(190, 202, 226, 0.28);
}

.signature-empty {
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  text-align: center;
}

.signature-modal {
  position: fixed;
  inset: 0;
  background: rgba(7, 14, 29, 0.66);
  display: grid;
  place-items: center;
  padding: 20px;
  z-index: 1000;
  backdrop-filter: blur(8px);
}

.signature-dialog {
  position: relative;
  width: min(100%, 980px);
  background: linear-gradient(180deg, #ffffff 0%, rgba(246, 249, 255, 0.98) 100%);
  border: 2px solid var(--frame-blue-soft);
  border-radius: 28px;
  padding: 24px;
  box-shadow:
    var(--shadow-lg),
    0 0 0 1px rgba(255, 255, 255, 0.6) inset;
  max-width: 100%;
}

.signature-dialog::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 20px;
  border: 1px solid var(--frame-blue-inner);
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.signature-canvas {
  width: 100%;
  max-width: 420px;
  border: 2px dashed rgba(109, 137, 196, 0.34);
  border-radius: 18px;
  background: #fff;
  touch-action: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.team-card {
  margin-top: 18px;
  border: 2px solid var(--frame-blue-inner);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(242, 246, 252, 0.94) 100%);
  box-shadow:
    0 8px 22px rgba(74, 126, 234, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.report-toolbar {
  margin-bottom: 18px;
}

.export-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--frame-blue-inner);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(244, 248, 255, 0.98) 0%, rgba(232, 240, 253, 0.92) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 10px 20px rgba(74, 126, 234, 0.08);
}

.export-box .actions {
  width: auto;
  justify-content: center;
}

#export-csv {
  min-width: 92px;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: linear-gradient(180deg, #5d90ef 0%, #4677de 58%, #3c69cb 100%);
  box-shadow:
    0 10px 20px rgba(74, 126, 234, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -2px 5px rgba(31, 63, 131, 0.18);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.signature-box,
.signature-empty,
.report-block,
.report-summary,
.export-box,
.team-card {
  overflow: hidden;
}

#export-csv:hover {
  background: linear-gradient(180deg, #537fda 0%, #3f6fd5 58%, #365fbd 100%);
}

.export-box strong {
  display: block;
  margin: 0 0 4px;
  color: #234071;
}

.export-box .muted {
  margin: 0;
  font-size: 12px;
}

.report-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding: 16px 18px;
  border: 1px solid var(--frame-blue-inner);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(245, 249, 255, 0.95) 0%, rgba(236, 242, 252, 0.88) 100%);
}

.report-summary h3,
.report-list-title h4,
.report-card-head h4 {
  margin: 0;
}

.report-summary .muted,
.report-list-title .muted,
.report-timing {
  margin: 4px 0 0;
}

.report-ra-card {
  margin-bottom: 16px;
}

.report-list-title {
  margin: 0 0 14px;
  padding: 0 2px;
}

.report-team-stack {
  gap: 16px;
}

.report-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.report-meta {
  margin-top: 0;
  margin-bottom: 14px;
}

.report-split {
  align-items: stretch;
}

.report-block {
  padding: 14px;
  border: 1px solid var(--frame-blue-inner);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 248, 253, 0.95) 100%);
}

.report-block strong {
  display: block;
  margin-bottom: 4px;
}

.report-block .muted {
  margin-top: 0;
}

/* Premier affichage avant execution de app.js */
.app-loading {
  box-sizing: border-box;
  min-height: 50vh;
  display: grid;
  place-items: center;
  padding: 24px;
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 17px;
  color: #3d5270;
  text-align: center;
}

/*
  Mobile / tablette : backdrop-filter et gros flous peuvent bloquer le rendu
  tres longtemps (page qui « charge a l'infini » sur Safari / Chrome Android).
*/
@media (max-width: 1200px) {
  .sidebar,
  .topbar,
  .card,
  .metric,
  .signature-modal {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  body::before,
  body::after {
    display: none;
  }
}

@media (max-width: 920px) {
  .app-shell {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .sidebar {
    position: relative;
    top: auto;
    min-height: auto;
  }

  .topbar {
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
  }

  .page-title {
    font-size: 28px;
  }

  .toolbar-actions {
    justify-content: stretch;
    width: 100%;
  }

  .toolbar-actions > * {
    width: 100%;
  }

  .toolbar-actions input[type="date"] {
    min-width: 0;
    width: 100%;
  }

  .grid.two,
  .grid.three {
    grid-template-columns: 1fr;
  }

  .card,
  .metric,
  .list-item {
    padding: 18px 16px;
  }

  th,
  td {
    min-width: 120px;
    padding: 12px 10px;
  }

  .signature-dialog {
    padding: 18px 14px;
  }

  .report-summary,
  .report-card-head,
  .export-box {
    flex-direction: column;
    align-items: stretch;
  }

  .list-toolbar,
  .pagination-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .complete-list-table th,
  .complete-list-table td {
    min-width: 160px;
  }
}

@media (max-width: 640px) {
  .app-shell {
    padding: 10px;
    gap: 12px;
  }

  .sidebar,
  .topbar,
  .card,
  .auth-card,
  .metric,
  .list-item,
  .signature-dialog {
    border-radius: 20px;
  }

  .sidebar {
    padding: 16px 12px;
  }

  .sidebar::before,
  .card::after,
  .list-item::before,
  .auth-card::before,
  .signature-dialog::after {
    inset: 8px;
  }

  .page-title {
    font-size: 22px;
  }

  .page-subtitle {
    font-size: 13px;
  }

  .card,
  .metric,
  .list-item {
    padding: 14px 12px;
  }

  .metric strong {
    font-size: 30px;
  }

  .actions {
    flex-direction: column;
  }

  .actions button,
  .actions a,
  .actions input,
  .actions select {
    width: 100%;
  }

  .tag {
    width: 100%;
    justify-content: center;
  }

  .login-wrap {
    padding: 12px;
  }

  .login-card {
    width: 100%;
  }

  .auth-card {
    padding: 18px 12px 14px;
    border-width: 3px;
  }

  .login-panel {
    padding: 12px 10px 8px;
  }

  .login-brand-card {
    width: 100%;
    justify-content: center;
    margin-bottom: 16px;
  }

  .signature-pair {
    grid-template-columns: 1fr;
  }

  .report-toolbar,
  .report-summary,
  .report-block {
    padding-left: 12px;
    padding-right: 12px;
  }

  .pagination-bar button,
  .list-toolbar input[type="search"] {
    width: 100%;
  }

  .complete-list-summary .tag {
    width: 100%;
    justify-content: center;
  }

  .complete-list-table th,
  .complete-list-table td {
    min-width: 140px;
  }

  .export-box {
    min-width: 0;
    padding: 12px;
  }

  .report-meta .tag,
  .report-card-head .tag,
  .report-summary .tag {
    width: 100%;
    justify-content: center;
  }

  .signature-canvas {
    max-width: 100%;
    height: auto;
  }

  th,
  td {
    min-width: 100px;
    font-size: 12px;
  }
}