/* Play theme: loads after industry.css and overrides its tokens and components.
   Remove the <link> to this file to return to the original look. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --color-bg: #f3f4f6;
  --color-surface: #ffffff;
  --color-text: #111928;
  --color-text-muted: #637381;
  --color-accent: #3758f9;
  --color-accent-2: #13c296;
  --color-divider: #dfe4ea;

  --color-neutral-100: #f9fafb;
  --color-neutral-200: #f3f4f6;
  --color-neutral-300: #e5e7eb;
  --color-neutral-400: #d1d5db;
  --color-neutral-500: #9ca3af;
  --color-neutral-600: #6b7280;
  --color-neutral-700: #4b5563;
  --color-neutral-800: #374151;
  --color-neutral-900: #1f2a37;

  --color-accent-100: #ebefff;
  --color-accent-200: #d6defe;
  --color-accent-300: #b3c2fd;
  --color-accent-400: #8299fb;
  --color-accent-500: #5a77fa;
  --color-accent-600: #3758f9;
  --color-accent-700: #1b44c8;
  --color-accent-800: #16349a;
  --color-accent-900: #0f2266;

  --color-accent-2-100: #e7f9f4;
  --color-accent-2-200: #c3f0e3;
  --color-accent-2-300: #8ee2ca;
  --color-accent-2-400: #4fd2ad;
  --color-accent-2-500: #13c296;
  --color-accent-2-600: #0fa27d;
  --color-accent-2-700: #0c8164;
  --color-accent-2-800: #09604a;
  --color-accent-2-900: #063f31;

  --font-heading: "Inter", system-ui, sans-serif;
  --font-heading-weight: 700;
  --font-body: "Inter", system-ui, sans-serif;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --shadow-sm: 0 1px 3px 0 rgba(166, 175, 195, 0.4);
  --shadow-md: 0 10px 20px 0 rgba(92, 115, 160, 0.07);
  --shadow-lg: 0 5px 12px 0 rgba(0, 0, 0, 0.1), 0 20px 50px -10px rgba(17, 25, 40, 0.18);
}

body { font-size: 14px; line-height: 1.6; color: var(--color-text); }
h1, h2, h3, h4, h5 { letter-spacing: -0.02em; }
h1 { font-weight: 700; }
h2 { font-size: 28px; }
h4 { font-size: 17px; font-weight: 600; }
.text-muted { color: var(--color-text-muted); }
a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-700); }
::selection { background: var(--color-accent-200); }
:focus-visible { outline: 2px solid var(--color-accent-300); outline-offset: 2px; }

/* Blueprint frame → soft rounded panels */
.blueprint > .corner { display: none !important; }
.blueprint { border-radius: var(--radius-lg); border-color: var(--color-divider); }
.dialog-backdrop { background: rgba(17, 25, 40, 0.55); backdrop-filter: blur(3px); }
.dialog-backdrop > .blueprint, .dialog-backdrop > div > .blueprint {
  background: #fff !important; border-radius: 14px !important; border: 0 !important;
  box-shadow: var(--shadow-lg) !important;
}
.duotone::after { display: none; }

/* Buttons */
.btn, .btn.blueprint {
  font-family: var(--font-body); font-weight: 500; font-size: 14px;
  border-radius: var(--radius-md) !important; padding: 6px 14px; min-height: 34px; font-size: 13.5px;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.btn-primary, .btn-primary.blueprint {
  background: var(--color-accent); border-color: var(--color-accent) !important; color: #fff;
}
.btn-primary:hover { background: var(--color-accent-700); border-color: var(--color-accent-700) !important; color: #fff; }
.btn-primary:active { background: var(--color-accent-800); }
.btn-secondary {
  background: #fff; border: 1px solid var(--color-divider) !important; color: var(--color-text);
  box-shadow: 0 1px 2px rgba(17, 25, 40, 0.04);
}
.btn-secondary:hover { background: #fff; border-color: var(--color-accent) !important; color: var(--color-accent); }
.btn-secondary:active { background: var(--color-accent-100); }
.btn-ghost { color: var(--color-accent); border-color: transparent !important; }
.btn-ghost:hover { background: var(--color-accent-100); }
.btn:disabled, .btn:disabled:hover { opacity: 0.5; background: var(--color-neutral-300); border-color: var(--color-neutral-300) !important; color: var(--color-neutral-700); }

/* Forms */
.field > label { font-size: 13px; font-weight: 500; color: var(--color-text); margin-bottom: 6px; }
.input {
  background: #fff; border: 1px solid #cfd5dd; border-radius: var(--radius-md) !important;
  min-height: 36px; padding: 7px 12px; color: var(--color-text);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.input::placeholder { color: #9ca3af; }
.input:hover { border-color: #aeb6c2; }
.input:focus, .input:focus-visible { border-color: var(--color-accent); outline: none; box-shadow: 0 0 0 3px var(--color-accent-100); }
select.input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20' fill='%23637381'%3E%3Cpath d='M5.3 7.3a1 1 0 0 1 1.4 0L10 10.6l3.3-3.3a1 1 0 1 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 0-1.4z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 12px center !important; padding-right: 34px;
}
.radio input:checked + .dot { box-shadow: inset 0 0 0 4px #fff; }
.seg { border-radius: var(--radius-md) !important; background: #fff; }
.seg-opt:has(input:checked) { color: #fff; }

/* Cards */
.card, .card.blueprint {
  background: #fff; border: 1px solid #dfe4ea; border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md);
}
.blueprint { border: 1px solid #dfe4ea; }
.seg { border-color: #cfd5dd !important; }
textarea, select { border-color: #cfd5dd; }
.card-kicker { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: var(--color-accent); }
.card-title { font-weight: 600; }
.card-body { color: var(--color-text-muted); opacity: 1; }

/* Tags */
.tag { border-radius: 999px !important; font-weight: 500; font-size: 11.5px; padding: 3px 10px; }
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-700); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-200); color: var(--color-neutral-800); }

/* Navigation */
.nav { background: rgba(255, 255, 255, 0.9) !important; backdrop-filter: blur(6px); box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.08); border-bottom: 0 !important; }
.nav-brand { font-family: var(--font-body); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; color: var(--color-text); }
.nav a { font-weight: 500; color: var(--color-neutral-700); }
.nav a:hover { color: var(--color-accent); }

/* Tables */
.table { border: 1px solid #dfe4ea; border-radius: var(--radius-md); border-collapse: separate; border-spacing: 0; overflow: hidden; }
.card > .table, .card > div > .table { border: 0; }
.table th {
  background: var(--color-neutral-100); color: var(--color-text-muted); font-weight: 600;
  font-size: 11.5px; letter-spacing: 0.04em; padding: 10px 12px; border-bottom: 1px solid #dfe4ea; vertical-align: middle;
}
.table td { padding: 9px 12px; border-bottom: 1px solid #e5e7eb; vertical-align: middle; font-size: 13px; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: #f8f9ff; }
.table .btn { min-height: 28px; padding: 3px 10px; font-size: 12.5px; white-space: nowrap; }
.table .input { min-height: 30px; padding: 4px 10px; font-size: 12.5px; }
.table td > div[style*="justify-content: flex-end"], .table td > div[style*="justify-content:flex-end"] { flex-wrap: nowrap !important; gap: 6px !important; }

/* Dialog component */
.dialog { background: #fff; border: 0; border-radius: 14px !important; box-shadow: var(--shadow-lg); }
.dialog-title { font-family: var(--font-body); font-weight: 600; }

.hr { background: var(--color-divider); }