:root {
  color-scheme: dark;
  font: 16px/1.5 Inter, system-ui, sans-serif;
  --bg: #0b0e13;
  --panel: #121722;
  --border: #2b3445;
  --text: #f1f5fb;
  --muted: #aab6c9;
  --accent: #91c3ff;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); }
[hidden] { display: none !important; }
h1, h2, p { margin: 0; }
h1 { font-size: clamp(1.6rem, 4vw, 2.3rem); line-height: 1.2; }
h2 { font-size: 1.45rem; }
button, input, select, textarea { font: inherit; }
button, nav a {
  padding: .55rem .9rem;
  border: 1px solid var(--border);
  border-radius: .55rem;
  color: inherit;
  background: #1a2130;
}
button { cursor: pointer; }
button:hover, nav a:hover { border-color: var(--accent); }
button:disabled { opacity: .55; cursor: wait; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.primary { background: #2161be; border-color: #3778d7; color: white; font-weight: 650; }
.danger { background: #942e3d; color: white; }
.icon { display: inline-grid; width: 2.5rem; height: 2.5rem; place-items: center; padding: 0; }
.icon svg { width: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.danger-icon { color: #ff9eab; }
.brand { display: block; width: auto; height: 2.75rem; object-fit: contain; }
.brand-login { height: 5rem; max-width: 100%; }
.login { display: grid; min-height: 100dvh; place-items: center; padding: 1rem; }
.panel, dialog {
  width: min(100%, 28rem);
  padding: clamp(1rem, 4vw, 2rem);
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--panel);
  color: var(--text);
}
form { display: grid; gap: 1rem; }
label { display: grid; align-content: start; gap: .3rem; }
input, select, textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: .5rem;
  color: inherit;
  background: var(--bg);
  padding: .6rem .7rem;
}
small, [role="status"] { color: var(--muted); }
[role="status"]:empty { display: none; }
.shell { min-height: 100dvh; display: grid; grid-template: auto 1fr / auto minmax(0, 1fr); }
.topbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .8rem clamp(1rem, 3vw, 2rem);
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}
#logout { margin-left: auto; }
aside { width: 14rem; background: var(--panel); border-right: 1px solid var(--border); padding: 1rem; }
nav a { display: block; text-decoration: none; color: var(--accent); font-weight: 650; }
nav a + a { margin-top: .5rem; }
nav a[aria-current="page"] { border-color: var(--accent); }
nav .support-link { background: #166534; border-color: #22c55e; color: #fff; }
nav .support-link[aria-disabled="true"] { cursor: default; }
.sidebar-action { display: block; width: 100%; margin-top: .5rem; text-align: left; color: var(--accent); font-weight: 650; }
.content { grid-column: 2; padding: clamp(1rem, 4vw, 3rem); }
.heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.25rem; }
.table-wrap { overflow-x: auto; margin-top: 1rem; background: var(--panel); border: 1px solid var(--border); border-radius: .75rem; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th, td { padding: .8rem 1rem; overflow-wrap: anywhere; }
th { color: var(--muted); }
td { border-top: 1px solid var(--border); min-width: 7rem; }
.row-actions, .dialog-actions { display: flex; gap: .5rem; }
.dialog-actions { justify-content: flex-end; }
dialog { width: min(calc(100% - 2rem), 42rem); max-height: calc(100dvh - 2rem); overflow: auto; }
#delete-dialog, #delete-tour-dialog { max-width: 28rem; }
dialog::backdrop { background: #000b; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 1rem; }
.tour-form textarea { resize: vertical; }
.assigned-tours { margin-top: 1.5rem; }
.tour-embeds { display: grid; gap: 1rem; }
.tour-embed { padding: 1rem; background: var(--panel); border: 1px solid var(--border); border-radius: .75rem; }
.tour-embed-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: .75rem; }
.tour-embed-header h2 { overflow-wrap: anywhere; }
.tour-embed-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .5rem; margin-left: auto; }
.tour-expiration { color: var(--muted); font-size: .9rem; }
.tour-share { flex-shrink: 0; color: #55e78a; border: 1px solid var(--border); border-radius: .55rem; }
.tour-share:hover { border-color: currentColor; }
.tour-share svg { width: 1.45rem; }
.tour-share .tour-share-phone { fill: currentColor; stroke: none; }
.copy-confirmed { color: #82efaa; border-color: #55e78a; background: #123424; }
.profile-summary { display: flex; align-items: center; gap: 1rem; margin-bottom: .75rem; overflow-wrap: anywhere; }
.profile-summary img { width: 4rem; height: 4rem; flex: 0 0 4rem; border-radius: 50%; object-fit: cover; }
.tips-status, .tips-list { margin-top: 1rem; }
.tips-list { display: grid; gap: .75rem; }
.tip-card { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: .75rem; padding: 1rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--panel); }
.tip-card p { flex: 1 1 15rem; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.tour-embed iframe { display: block; width: 100%; aspect-ratio: 16 / 9; min-height: 18rem; border: 0; margin-top: .75rem; }
@media (max-width: 700px) {
  .shell { grid-template: auto auto 1fr / minmax(0, 1fr); }
  aside, .content { grid-column: 1; }
  aside { width: 100%; border-right: 0; border-bottom: 1px solid var(--border); }
}
@media (max-width: 440px) {
  .fields { grid-template-columns: 1fr; }
}