:root {
  --linxi-modal-green-deep: #064b3d;
  --linxi-modal-green: #0b725a;
  --linxi-modal-line: rgba(225, 255, 246, 0.34);
  --linxi-modal-text: #f6fffc;
  --linxi-modal-muted: rgba(246, 255, 252, 0.72);
  --linxi-modal-danger: #ffb8c1;
  --linxi-modal-warning: #ffe2a8;
  --linxi-modal-success: #c9ffe8;
  --linxi-modal-surface: rgba(255, 255, 255, 0.09);
  --linxi-modal-surface-strong: rgba(255, 255, 255, 0.15);
  --linxi-modal-overlay: rgba(15, 31, 27, 0.56);
  --linxi-modal-overlay-filter: blur(18px) saturate(88%);
}

html.linxi-oa-modal-open,
body.linxi-oa-modal-open {
  overflow: hidden !important;
}

.linxi-oa-modal-layer[hidden] {
  display: none !important;
}

.linxi-oa-modal-layer,
[data-linxi-modal-layer]:not([hidden]) {
  background:
    radial-gradient(circle at 50% 8%, rgba(98, 221, 181, 0.13), transparent 34%),
    var(--linxi-modal-overlay) !important;
  -webkit-backdrop-filter: var(--linxi-modal-overlay-filter) !important;
  backdrop-filter: var(--linxi-modal-overlay-filter) !important;
}

.linxi-oa-modal-layer {
  position: fixed;
  inset: 0;
  z-index: 30000;
  display: grid;
  place-items: center;
  padding:
    max(24px, env(safe-area-inset-top))
    max(24px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom))
    max(24px, env(safe-area-inset-left));
  opacity: 1;
  transition: opacity 150ms ease;
}

.linxi-oa-modal-layer:not([hidden]) {
  animation: linxi-oa-modal-layer-enter 150ms ease;
}

.linxi-oa-modal-layer[data-closing="true"] {
  opacity: 0;
}

.linxi-oa-modal-card,
[data-linxi-modal-panel] {
  position: relative !important;
  color: var(--linxi-modal-text) !important;
  border: 1px solid var(--linxi-modal-line) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(104, 226, 184, 0.22), transparent 38%),
    linear-gradient(145deg, rgba(15, 119, 92, 0.97), rgba(4, 73, 59, 0.99)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 30px 82px rgba(0, 29, 23, 0.42) !important;
  -webkit-backdrop-filter: blur(24px) saturate(118%) !important;
  backdrop-filter: blur(24px) saturate(118%) !important;
  animation: linxi-oa-modal-enter 180ms cubic-bezier(0.2, 0.84, 0.3, 1) both;
  color-scheme: dark;
}

.linxi-oa-modal-layer[data-closing="true"] .linxi-oa-modal-card {
  transform: translateY(8px) scale(0.985);
  opacity: 0;
  transition: transform 150ms ease, opacity 150ms ease;
}

@keyframes linxi-oa-modal-enter {
  from { transform: translateY(10px) scale(0.985); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes linxi-oa-modal-layer-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

.linxi-oa-modal-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(430px, calc(100vw - 32px));
  max-width: 100%;
  max-height: min(860px, 100%);
  overflow: hidden;
}

.linxi-oa-modal-head,
[data-linxi-modal-head],
[data-linxi-modal-panel] :is(
  .name-head,
  .conflict-head,
  .preview-head,
  .personal-time-dialog-head,
  .personal-leave-dialog-head,
  .permission-picker-head,
  .paper-archive-dialog-head,
  .office-supplies-dialog-head,
  .contract-workflow-dialog-head,
  .contract-writing-dialog-head,
  .scan-documents-dialog-head
) {
  color: var(--linxi-modal-text) !important;
  border-color: rgba(232, 255, 247, 0.2) !important;
  background: rgba(3, 70, 56, 0.16) !important;
}

.linxi-oa-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding: 0 22px;
  border-bottom: 1px solid rgba(232, 255, 247, 0.2);
}

.linxi-oa-modal-title {
  margin: 0;
  color: var(--linxi-modal-text);
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.linxi-oa-modal-close,
[data-linxi-modal-close] {
  position: absolute !important;
  top: 14px !important;
  right: 16px !important;
  z-index: 5 !important;
  display: grid !important;
  place-items: center;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  color: var(--linxi-modal-text) !important;
  font: inherit !important;
  font-size: 22px !important;
  line-height: 1 !important;
  border: 1px solid rgba(235, 255, 248, 0.42) !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

.linxi-oa-modal-body {
  min-height: 0;
  padding: 24px 22px 20px;
  overflow: auto;
  overscroll-behavior: contain;
}

[data-linxi-modal-panel] > [data-linxi-modal-body] {
  color: var(--linxi-modal-text) !important;
  border-color: rgba(232, 255, 247, 0.2) !important;
  background: transparent !important;
}

.linxi-oa-modal-message {
  margin: 0;
  color: var(--linxi-modal-muted);
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-line;
}

.linxi-oa-modal-input {
  width: 100%;
  min-height: 44px;
  margin-top: 16px;
  padding: 10px 12px;
  color: var(--linxi-modal-text);
  font: inherit;
  border: 1px solid rgba(235, 255, 248, 0.34);
  border-radius: 11px;
  outline: none;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.linxi-oa-modal-input:focus,
[data-linxi-modal-panel] :is(input, select, textarea):focus {
  border-color: rgba(240, 255, 250, 0.72) !important;
  box-shadow: 0 0 0 3px rgba(218, 255, 242, 0.14) !important;
}

.linxi-oa-modal-actions,
[data-linxi-modal-actions] {
  display: flex !important;
  align-items: center;
  justify-content: flex-start !important;
  gap: 10px !important;
}

[data-linxi-modal-panel] > [data-linxi-modal-actions] {
  color: var(--linxi-modal-text) !important;
  border-color: rgba(232, 255, 247, 0.2) !important;
  background: rgba(3, 70, 56, 0.16) !important;
}

[data-linxi-modal-panel] footer[data-linxi-modal-actions] {
  color: var(--linxi-modal-text) !important;
  border-color: rgba(232, 255, 247, 0.2) !important;
  background: rgba(3, 70, 56, 0.16) !important;
}

.linxi-oa-modal-actions {
  padding: 16px 22px 20px;
  border-top: 1px solid rgba(232, 255, 247, 0.18);
}

.linxi-oa-modal-button,
[data-linxi-modal-panel] button:not([data-linxi-modal-close]) {
  min-height: 44px;
  padding: 0 18px;
  color: var(--linxi-modal-text) !important;
  font: inherit;
  font-weight: 650;
  border: 1px solid rgba(235, 255, 248, 0.4) !important;
  border-radius: 11px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  cursor: pointer;
  transition: transform 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

.linxi-oa-modal-button:hover,
[data-linxi-modal-panel] button:not([data-linxi-modal-close]):hover {
  border-color: rgba(245, 255, 252, 0.66) !important;
  background: rgba(255, 255, 255, 0.16) !important;
}

.linxi-oa-modal-button:active,
[data-linxi-modal-panel] button:not([data-linxi-modal-close]):active {
  transform: translateY(1px);
}

.linxi-oa-modal-button:disabled,
[data-linxi-modal-panel] button:disabled {
  cursor: default;
  opacity: 0.45;
}

.linxi-oa-modal-button-primary,
[data-linxi-modal-primary] {
  border-color: rgba(240, 255, 250, 0.76) !important;
  background: rgba(255, 255, 255, 0.21) !important;
}

.linxi-oa-modal-button-danger,
[data-linxi-modal-danger] {
  color: #fff3f5 !important;
  border-color: rgba(255, 200, 208, 0.56) !important;
  background: rgba(151, 38, 53, 0.34) !important;
}

.linxi-oa-modal-button-cancel,
[data-linxi-modal-cancel] {
  order: 99 !important;
  margin-left: auto !important;
}

[data-linxi-modal-panel] :is(h1, h2, h3, h4, label, legend, strong) {
  color: var(--linxi-modal-text) !important;
}

[data-linxi-modal-panel] :is(span, em, dd, li) {
  color: inherit !important;
}

[data-linxi-modal-panel] :is(
  p,
  small,
  dt,
  .muted,
  .hint,
  .note,
  .expense-dialog-note,
  [class$="-meta"],
  [class*="-meta "],
  [class$="-hint"],
  [class*="-hint "],
  [class$="-help"],
  [class*="-help "],
  [class$="-note"],
  [class*="-note "]
) {
  color: var(--linxi-modal-muted) !important;
}

[data-linxi-modal-panel] :is(
  .error,
  .danger,
  [role="alert"],
  .expense-dialog-error,
  [class$="-error"],
  [class*="-error "]
) {
  color: var(--linxi-modal-danger) !important;
}

[data-linxi-modal-panel] :is(.warning, [data-tone="warning"]) {
  color: var(--linxi-modal-warning) !important;
}

[data-linxi-modal-panel] :is(.success, [data-tone="success"], [data-tone="done"]) {
  color: var(--linxi-modal-success) !important;
}

[data-linxi-modal-panel] :is(
  [class$="-note"],
  [class*="-note "],
  [class$="-notice"],
  [class*="-notice "]
).warning,
[data-linxi-modal-panel] :is([class$="-note"], [class*="-note "])[data-tone="warning"] {
  color: var(--linxi-modal-warning) !important;
  border-color: rgba(255, 218, 167, 0.46) !important;
  background: rgba(103, 65, 20, 0.34) !important;
}

[data-linxi-modal-panel] :is(
  [class$="-note"],
  [class*="-note "],
  [class$="-notice"],
  [class*="-notice "]
).danger {
  color: var(--linxi-modal-danger) !important;
  border-color: rgba(255, 200, 208, 0.46) !important;
  background: rgba(151, 38, 53, 0.3) !important;
}

[data-linxi-modal-panel] :is(
  [class$="-summary"],
  [class*="-summary "],
  [class$="-instruction"],
  [class*="-instruction "],
  [class$="-context"],
  [class*="-context "],
  [class$="-notice"],
  [class*="-notice "]
) {
  color: var(--linxi-modal-text) !important;
  border-color: rgba(232, 255, 247, 0.22) !important;
  background: var(--linxi-modal-surface) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

[data-linxi-modal-panel] :is(
  [class$="-facts"],
  [class*="-facts "],
  fieldset,
  table,
  thead,
  tbody,
  tr,
  th,
  td,
  hr
) {
  color: var(--linxi-modal-text) !important;
  border-color: rgba(232, 255, 247, 0.2) !important;
}

[data-linxi-modal-panel] th {
  color: var(--linxi-modal-muted) !important;
  background: rgba(2, 53, 43, 0.22) !important;
}

[data-linxi-modal-panel] td {
  background: rgba(255, 255, 255, 0.05) !important;
}

[data-linxi-modal-panel] :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select,
  textarea
) {
  color: var(--linxi-modal-text) !important;
  border-color: rgba(235, 255, 248, 0.32) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  color-scheme: dark;
}

[data-linxi-modal-panel] :is(input, textarea)::placeholder {
  color: rgba(245, 255, 251, 0.5) !important;
}

[data-linxi-modal-panel] :is(input[type="checkbox"], input[type="radio"]) {
  accent-color: #5fd7ad;
}

[data-linxi-modal-panel] option {
  color: var(--linxi-modal-text);
  background: var(--linxi-modal-green-deep);
}

[data-linxi-modal-panel] :is(.expense-preview-body, .preview-body, iframe, .ppr-lightbox-stage) {
  color: #17251f;
  background: #f8fbfa !important;
  color-scheme: light;
}

[data-linxi-modal-panel].paper-archive-dialog-card.preview .paper-archive-dialog-body,
[data-linxi-modal-panel] [data-linxi-modal-document] {
  color: #17251f !important;
  background: #f8fbfa !important;
  color-scheme: light;
}

[data-linxi-modal-panel] :is(.expense-preview-body, .preview-body, .ppr-lightbox-stage, [data-linxi-modal-document]) :is(
  h1, h2, h3, h4, p, span, small, strong, em, label, legend, dt, dd, li, th, td
),
[data-linxi-modal-panel].paper-archive-dialog-card.preview .paper-archive-dialog-body :is(
  h1, h2, h3, h4, p, span, small, strong, em, label, legend, dt, dd, li, th, td
) {
  color: inherit !important;
}

.expense-confirm-dialog > .expense-dialog-error {
  display: block !important;
  text-align: left !important;
}

@media (max-width: 640px) {
  .linxi-oa-modal-layer {
    padding:
      max(16px, env(safe-area-inset-top))
      max(16px, env(safe-area-inset-right))
      max(16px, env(safe-area-inset-bottom))
      max(16px, env(safe-area-inset-left));
  }

  .linxi-oa-modal-card,
  [data-linxi-modal-panel] {
    border-radius: 18px !important;
  }

  .linxi-oa-modal-actions,
  [data-linxi-modal-actions] {
    flex-wrap: wrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .linxi-oa-modal-layer:not([hidden]),
  .linxi-oa-modal-card,
  [data-linxi-modal-panel] {
    animation: none !important;
  }

  .linxi-oa-modal-layer,
  .linxi-oa-modal-button,
  [data-linxi-modal-panel] button {
    transition: none !important;
  }
}