:root {
  color-scheme: light;
  --bg: #f5f7fb;
  --panel: #fff;
  --panel-2: #eef3f8;
  --text: #17202a;
  --muted: #64748b;
  --line: #dce4ee;
  --green: #16b75f;
  --blue: #2c7be5;
  --red: #e04f5f;
  --amber: #dd9b22;
  --shadow: 0 18px 42px #15202b1a;
  --sidebar: #102845;
  --sidebar-deep: #0d2239;
  --nav: #1d3f69;
  --nav-hover: #234a78;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #08111d;
  --panel: #101a27;
  --panel-2: #162233;
  --text: #eff5fb;
  --muted: #91a0b5;
  --line: #223148;
  --shadow: 0 22px 54px #00000047;
}

* { box-sizing: border-box; }
html, body, #app { width: 100%; height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  letter-spacing: 0;
  overflow: hidden;
}

button, input, select, textarea { font: inherit; }
button {
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--green);
  color: #fff;
  min-height: 36px;
  padding: 0 12px;
  cursor: pointer;
}
button:hover:not(:disabled) { filter: brightness(1.06); }
button:disabled { opacity: .55; cursor: not-allowed; }
button.secondary { background: var(--panel); color: var(--text); }
button.danger { background: var(--red); border-color: var(--red); }
input, select, textarea {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  padding: 8px 10px;
  outline: none;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px #2c7be529;
}
input[type="checkbox"] {
  width: 14px;
  height: 14px;
  min-height: 14px;
  padding: 0;
  margin: 0;
  accent-color: var(--green);
  border-radius: 3px;
  cursor: pointer;
}

.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.login-card {
  position: relative;
  width: min(430px, 100%);
  padding: 30px 28px 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.login-logo { width: 128px; margin: 0 0 26px; display: block; }
.login-card h1 { margin: 0 0 18px; font-size: 24px; line-height: 1.1; }
.login-card label { display: block; color: #a8c3dc; font-size: 12px; margin: 12px 0 6px; }
.login-card .theme-toggle {
  position: absolute;
  top: 20px;
  right: 20px;
  min-width: 58px;
  background: var(--panel-2);
  color: var(--text);
}
.error {
  margin: 12px 0;
  padding: 10px;
  border: 1px solid #e04f5f59;
  border-radius: 8px;
  background: #e04f5f24;
  color: var(--red);
}

.shell {
  width: 100%;
  height: 100vh;
  display: flex;
  overflow: hidden;
}
.sidebar {
  width: 254px;
  min-width: 254px;
  height: 100vh;
  padding: 10px 14px 18px;
  background: var(--sidebar);
  border-right: 1px solid #0a1b31;
  color: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.brand {
  width: 170px;
  margin: 10px auto 18px;
  display: block;
}
.portal-name {
  color: #c6ddf3;
  font-size: 12px;
  text-align: center;
  line-height: 1.25;
  margin-bottom: 22px;
}
.nav button {
  width: 100%;
  justify-content: flex-start;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  margin-bottom: 6px;
  padding: 0 10px;
  background: var(--nav);
  border-color: transparent;
  border-radius: 5px;
  color: #fff;
  font-size: 13px;
  text-align: left;
}
.nav button.active, .nav button:hover { background: var(--nav-hover); }
.nav-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  opacity: .95;
  background: #cfe7ff;
  -webkit-mask: var(--menu-icon) center / 16px 16px no-repeat;
  mask: var(--menu-icon) center / 16px 16px no-repeat;
}
.nav-icon.logs {
  --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z'/%3E%3Cpath d='M9 8h6M9 12h6M9 16h3'/%3E%3C/svg%3E");
}
.nav-icon.screenshots {
  --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='14' rx='2'/%3E%3Ccircle cx='9' cy='10' r='1.5'/%3E%3Cpath d='m7 17 4-4 3 3 2-2 3 3'/%3E%3C/svg%3E");
}
.nav-icon.settings {
  --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.8 1.8 0 0 0 .36 1.98l.03.03a2 2 0 0 1-2.83 2.83l-.03-.03A1.8 1.8 0 0 0 15 19.4a1.8 1.8 0 0 0-1 .6 1.8 1.8 0 0 0-.4 1.1V21a2 2 0 0 1-4 0v-.05A1.8 1.8 0 0 0 8.6 19.4a1.8 1.8 0 0 0-1.98.36l-.03.03a2 2 0 1 1-2.83-2.83l.03-.03A1.8 1.8 0 0 0 4.6 15a1.8 1.8 0 0 0-.6-1 1.8 1.8 0 0 0-1.1-.4H3a2 2 0 0 1 0-4h.05A1.8 1.8 0 0 0 4.6 8.6a1.8 1.8 0 0 0-.36-1.98l-.03-.03a2 2 0 1 1 2.83-2.83l.03.03A1.8 1.8 0 0 0 9 4.6a1.8 1.8 0 0 0 1-.6 1.8 1.8 0 0 0 .4-1.1V3a2 2 0 0 1 4 0v.05A1.8 1.8 0 0 0 15.4 4.6a1.8 1.8 0 0 0 1.98-.36l.03-.03a2 2 0 1 1 2.83 2.83l-.03.03A1.8 1.8 0 0 0 19.4 9c.38.16.7.37 1 .6.32.25.7.4 1.1.4H21a2 2 0 0 1 0 4h-.05A1.8 1.8 0 0 0 19.4 15Z'/%3E%3C/svg%3E");
}
.sidebar-credit {
  margin-top: auto;
  color: #c6ddf3;
  font-size: 12px;
  line-height: 1.25;
  text-align: center;
}
.sidebar-credit span { display: block; }

.content {
  flex: 1;
  min-width: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.topbar {
  flex: 0 0 52px;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  overflow: hidden;
  position: relative;
}
.topbar-search {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(470px, 42vw);
  transform: translate(-50%, -50%);
}
.topbar-search input {
  width: 100%;
  min-height: 36px;
  padding: 0 36px 0 14px;
  background: #0b1523 !important;
  border: 1px solid #24364f !important;
  color: #fff !important;
  font-size: 12px;
  font-weight: 400;
}
.topbar-search input::placeholder {
  color: #fff;
  opacity: 1;
}
.topbar-search:after {
  content: "v";
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: #8aa3c2;
  font-size: 12px;
  pointer-events: none;
}
.topbar .theme-toggle {
  position: static;
  flex: 0 0 auto;
  min-width: 58px;
  height: 36px;
  background: var(--panel-2);
  color: var(--text);
}
.account {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}
.account strong {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  font-weight: 700;
}
.account strong span {
  color: var(--muted);
  font-weight: 400;
  margin-left: 4px;
}
.account button { height: 36px; }
.main {
  flex: 1;
  min-height: 0;
  padding: 32px 24px;
  overflow: auto;
}
.main h1 { margin: 0 0 4px; font-size: 26px; }
.subtitle { margin: 0 0 20px; color: var(--muted); }

.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.metric {
  min-height: 108px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.metric-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-weight: 900;
}
.metric-icon.green { color: var(--green); background: #16b75f2e; }
.metric-icon.blue { color: var(--blue); background: #2c7be52e; }
.metric-icon.red { color: var(--red); background: #e04f5f2e; }
.metric-icon.amber { color: var(--amber); background: #dd9b222e; }
.metric small { color: var(--muted); font-size: 13px; }
.metric strong { display: block; margin-top: 7px; font-size: 23px; line-height: 1; }

.action-bar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 180px 180px 120px;
  gap: 10px;
  align-items: end;
  padding: 12px;
  margin-bottom: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.report-filters {
  grid-template-columns: minmax(220px, 1.2fr) 170px 170px 140px 180px 180px 110px;
}
.action-bar label, .form-grid label { color: var(--muted); font-size: 12px; }

.bulk-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-size: 12px;
}

.bulk-actions label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text);
}

.bulk-actions input[type="checkbox"],
td input[type="checkbox"],
th input[type="checkbox"] {
  width: 14px !important;
  height: 14px !important;
  min-height: 14px !important;
  background: transparent !important;
}

.bulk-actions select {
  width: 180px;
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  font-size: 12px;
}
th:first-child,
td:first-child {
  width: 44px;
}
th, td {
  padding: 10px;
  border-bottom: 1px solid var(--line);
  text-align: center;
  vertical-align: middle;
}
th {
  background: var(--panel-2);
  color: var(--muted);
  white-space: nowrap;
  font-weight: 700;
}
tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: #2c7be514; }
.pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border-radius: 999px;
  padding: 0 8px;
  background: var(--panel-2);
  color: var(--text);
  font-weight: 700;
}
.pill.ok { background: #16b75f2e; color: var(--green); }
.pill.fail { background: #e04f5f2e; color: var(--red); }

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(470px, 100vw);
  height: 100vh;
  padding: 18px;
  background: #10233f;
  color: #fff;
  box-shadow: -4px 0 12px rgba(0,0,0,.25);
  overflow: auto;
  z-index: 10;
}
.drawer h2 { margin-top: 0; }
.drawer .muted { color: #b8c7dc; font-size: 13px; }
.drawer-section {
  margin-top: 14px;
  padding: 12px;
  border-radius: 8px;
  background: #162b4a;
}

.drawer-delete {
  width: 100%;
  margin-top: 18px;
}
.drawer-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #28496f;
  font-size: 13px;
}
.drawer-row:last-child { border-bottom: 0; }
.drawer-row span { color: #b8c7dc; }
.drawer-row strong { text-align: right; word-break: break-word; }
.attachment-list a,
.drawer-link {
  color: #8ec5ff;
  display: block;
  margin: 8px 0;
}
.drawer-link {
  width: 100%;
  min-height: auto;
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  text-align: left;
  text-decoration: underline;
}
.drawer-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  padding: 0;
  margin: 10px 0 6px;
  border: 1px solid #28496f !important;
  border-radius: 8px !important;
  background: #0b1523 !important;
  overflow: hidden;
}
.drawer-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.drawer-file-name {
  color: #b8c7dc;
  font-size: 12px;
  margin-bottom: 10px;
  word-break: break-word;
}
pre {
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  color: #eef6ff;
  font-size: 12px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.form-grid .full { grid-column: 1 / -1; }
.settings-section { margin-bottom: 28px; }
.token-box {
  padding: 12px;
  margin: 12px 0;
  background: #d99a2424;
  border: 1px solid #d99a2461;
  border-radius: 12px;
  color: #f8d388;
}

.empty-state {
  padding: 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
}

.screenshot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.screenshot-card {
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.screenshot-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0 !important;
  background: var(--panel-2);
  overflow: hidden;
}

.screenshot-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.screenshot-meta {
  display: grid;
  gap: 5px;
  padding: 10px 12px 12px;
  font-size: 12px;
}

.screenshot-meta strong {
  color: var(--text);
  font-size: 13px;
}

.screenshot-meta span {
  color: var(--muted);
}

.screenshot-log {
  margin-top: 12px;
}

@media (max-width: 1100px) {
  .sidebar { width: 220px; min-width: 220px; }
  .main { padding: 18px; }
  .metrics { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
  .action-bar, .report-filters { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  body { overflow: auto; }
  .shell { height: auto; min-height: 100vh; display: block; overflow: visible; }
  .sidebar { width: 100%; min-width: 0; height: auto; }
  .content { height: auto; overflow: visible; }
  .main { overflow: visible; }
  .metrics, .action-bar, .report-filters, .form-grid { grid-template-columns: 1fr; }
  .bulk-actions { align-items: stretch; flex-direction: column; }
  .bulk-actions select { width: 100%; }
}