:root {
  font: 15px/1.5 Inter, system-ui, sans-serif;
  color: #15161a;
  background: #f7f7fa;
  --muted: #5e6470;
  --line: #dedfe4;
  --accent: #805019;
  --gold: #e7a251;
}
* { box-sizing: border-box; }
body { margin: 0; }
.wrap { width: min(1180px, calc(100% - 36px)); margin-inline: auto; }
.top-row, nav, .hero, .toolbar, .section-heading, .widget-actions, .form-actions {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
}
.top-row, .hero, .section-heading { justify-content: space-between; }
.top-row { min-height: 66px; padding-block: 8px; }
a { color: var(--accent); text-underline-offset: 4px; }
nav a, .brand { min-height: 44px; }
nav a { display: inline-flex; align-items: center; padding: 8px; }
.brand { display: inline-flex; gap: 9px; align-items: center; font-weight: 750; color: inherit; text-decoration: none; }
.brand img { border-radius: 7px; }
main { padding-block: 28px 50px; }
.hero p { color: #cccdd4; margin: 0; }
h1 { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.08; margin: 8px 0 10px; letter-spacing: -.045em; }
h2, h3 { margin: 0; line-height: 1.25; }
h3 { font-size: 1rem; overflow-wrap: anywhere; }
button, input, select { font: inherit; color: inherit; }
button, input, select { border-radius: 8px; border: 1px solid #c8c9d0; min-height: 44px; padding: 8px 12px; background: #fff; }
button { cursor: pointer; font-weight: 650; }
button:disabled { cursor: wait; opacity: .65; }
button:hover:not(:disabled) { border-color: var(--accent); }
:focus-visible { outline: 3px solid #a96118; outline-offset: 3px; }
button.primary { color: #15161a; background: var(--gold); border-color: transparent; }
.notice { color: var(--muted); margin: 15px 0 20px; }
.toolbar { align-items: flex-end; }
label { display: grid; gap: 4px; font-weight: 600; min-width: 0; }
#source-filter { max-width: min(290px, 100%); }
#status:empty, #source-status:empty, #widget-error:empty { display: none; }
#widgets { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-block: 20px; }
.card { background: white; border: 1px solid var(--line); border-radius: 14px; padding: clamp(14px, 2.5vw, 24px); min-width: 0; }
.metric { display: block; font-size: 2.7rem; font-weight: 760; letter-spacing: -.045em; margin-top: 6px; }
.card p { color: var(--muted); margin: 5px 0 0; overflow-wrap: anywhere; }
.widget-actions { margin-top: 14px; gap: 6px; }
.widget-actions button { font-size: .85rem; }
.bars { list-style: none; padding: 0; margin: 14px 0 0; }
.bars li { display: grid; grid-template-columns: minmax(0, 1fr) 1fr auto; gap: 8px; align-items: center; margin-block: 5px; overflow-wrap: anywhere; font-size: .85rem; }
meter { width: 100%; accent-color: var(--accent); }
.table-wrap { overflow-x: auto; margin-top: 15px; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th, td { border-bottom: 1px solid var(--line); padding: 10px; overflow-wrap: anywhere; }
th { font-size: .83rem; color: var(--muted); }
td:last-child { white-space: nowrap; }
#more { margin-top: 12px; }
dialog { width: min(520px, calc(100% - 26px)); max-height: 90vh; max-height: calc(100dvh - 32px); overscroll-behavior: contain; border: 1px solid var(--line); border-radius: 16px; padding: 22px; color: inherit; }
dialog::backdrop { background: rgb(12 32 29 / .55); }
dialog form { display: grid; gap: 12px; }
dialog input, dialog select { width: 100%; }
#source-list { padding: 0; list-style: none; }
#source-list li { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; overflow-wrap: anywhere; }
.form-actions { justify-content: flex-end; }
pre { overflow-x: auto; }

#board-select { max-width: min(250px, 100%); }
#board-error:empty { display: none; }
#widgets [data-size="medium"] { grid-column: span 2; }
#widgets [data-size="large"], #widgets .widget-empty { grid-column: 1 / -1; }
.widget-empty { margin: 0; color: var(--muted); }
.columns {
  display: grid;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  gap: 5px;
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  text-align: center;
  font-size: .8rem;
}
.columns li { display: grid; grid-template-rows: auto 88px 1fr; gap: 4px; overflow-wrap: anywhere; }
.column-track { display: flex; align-items: end; justify-content: center; background: #f3efe9; border-radius: 6px; overflow: hidden; }
.column-fill { width: min(50px, 100%); background: #b77630; border-radius: 5px 5px 0 0; }
.widget-field, .widget-fields { display: grid; gap: 5px; }
.widget-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.widget-field label span { color: var(--muted); font-weight: 400; }
.field-help { color: var(--muted); font-size: .87rem; margin: 0; }
.widget-preview { padding: 12px; border-radius: 10px; background: #fbf6ee; }
.widget-preview > .field-help { margin: 3px 0 9px; }
.widget-preview .card { padding: 12px; }
.widget-preview .metric { font-size: 1.85rem; margin-top: 2px; }
.activity-label { display: none; }
#activity input { width: 100%; min-width: 0; }
.toolbar select { width: 100%; min-width: 0; }

@media (max-width: 1000px) {
  .toolbar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .toolbar .board-picker { grid-column: span 2; }
  .toolbar select { max-width: none; }
  #widgets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .toolbar, #widgets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toolbar #refresh { grid-column: 1 / -1; }
  #activity td:last-child { white-space: normal; }
  input, select { font-size: max(1rem, 16px); }
}

@media (max-width: 560px) {
  .wrap { width: calc(100% - 24px); }
  .top-row { gap: 0 10px; }
  .top nav { width: 100%; gap: 4px 12px; }
  .top nav a { padding-inline: 3px; }
  #sources { margin-inline-start: auto; }
  main { padding-block: 14px 32px; }
  .hero { gap: 16px; }
  .hero button { width: 100%; }
  #widgets { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  #widgets [data-size="medium"] { grid-column: 1 / -1; }
  #activity .section-heading label { width: 100%; }
  #activity .table-wrap { position: relative; overflow: visible; }
  #activity table, #activity tbody { display: block; }
  #activity thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  #activity tbody tr { display: grid; gap: 4px; padding: 12px 0; border-top: 1px solid var(--line); }
  #activity td { display: grid; grid-template-columns: 4em minmax(0, 1fr); gap: 6px; padding: 0; border: 0; }
  .activity-label { display: inline; color: var(--muted); font-size: .85rem; font-weight: 650; }
  #more { width: 100%; }
  dialog { padding: 16px; }
  .form-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .widget-fields { grid-template-columns: minmax(0, 1fr); }
}

.top {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #15161a;
  color: #fff;
  border-bottom: 1px solid #36373e;
}
.top nav a {
  color: #eeeef3;
  border-radius: 8px;
  padding-inline: 12px;
  text-decoration: none;
  font-weight: 650;
}
.top nav a:hover { background: #34353e; }
.top .brand { letter-spacing: -.025em; }
.hero h1 { margin-top: 0; }
#overview, #activity, #integrations { scroll-margin-top: 90px; }
#integrations { margin-top: 38px; }
.integration-heading {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}
.integration-heading p, .catalog-heading p { color: var(--muted); margin: 6px 0 0; }
.source-panel { margin-top: 16px; }
#source-list { margin: 12px 0 0; }
#source-list li { padding-top: 12px; border-top: 1px solid var(--line); margin-bottom: 0; }
#source-list li + li { margin-top: 12px; }
#source-list li p { font-size: .85rem; }
#integration-status:empty { display: none; }
.catalog-heading { margin: 22px 0 12px; }
.integration-catalog { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.integration-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.integration-card h4 { margin: 0; font-size: 1.1rem; }
.integration-card p { margin: 0; }
.integration-card details { margin-block: 3px 8px; font-size: .9rem; }
.integration-card details p { margin-block: 7px; }
.integration-card summary { color: var(--accent); cursor: pointer; padding-block: 10px; }
.integration-card button { margin-top: auto; }
.integration-mark {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding-inline: 6px;
  border-radius: 10px;
  font: 700 .92rem/1 ui-monospace, monospace;
  background: #e7eee9;
}
.integration-mark[data-color="mint"] { background: #d9f2e4; color: #185439; }
.integration-mark[data-color="sky"] { background: #e0f0ff; color: #174e72; }
.integration-mark[data-color="rose"] { background: #fbe6ec; color: #80204b; }
.integration-mark[data-color="violet"] { background: #ebe7fa; color: #4e3680; }
.integration-mark[data-color="sand"] { background: #f4ecd9; color: #624716; }
@media (max-width: 820px) {
  .integration-catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  #overview, #activity, #integrations { scroll-margin-top: 124px; }
  .top nav { gap: 4px; }
  .top nav a { padding-inline: 8px; }
  .integration-catalog { grid-template-columns: minmax(0, 1fr); }
  .integration-heading { flex-wrap: wrap; align-items: flex-start; }
  .integration-heading button, .integration-card button { width: 100%; }
}

.brand { gap: 8px; }
.brand img { object-fit: contain; }
.brand span { padding-inline-start: 10px; border-inline-start: 1px solid #676874; font-size: .83rem; color: #eeeef3; }
.top nav { gap: 4px; }
.top nav a { border-radius: 999px; }
.top nav a[aria-current="location"] { background: #f7f7fa; color: #15161a; }
.dashboard-stage {
  border-radius: 24px;
  padding: clamp(18px, 3vw, 32px);
  color: #fff;
  background:
    radial-gradient(ellipse at 95% 0%, #5b4032 0%, transparent 50%),
    radial-gradient(ellipse at 55% 105%, #303042 0%, transparent 58%),
    #15161a;
  box-shadow: 0 16px 40px -26px #15161a;
}
.dashboard-stage .hero h1 { overflow-wrap: anywhere; }
.dashboard-stage .toolbar {
  margin-top: 24px;
  padding: 12px;
  border: 1px solid #ffffff25;
  border-radius: 14px;
  background: #ffffff0d;
}
.dashboard-stage .toolbar label { font-size: .82rem; color: #f0edf2; }
.dashboard-stage .toolbar button, .dashboard-stage select { color: #15161a; }
.dashboard-stage #widgets { margin-bottom: 0; }
.dashboard-stage #widgets > .card {
  display: flex;
  flex-direction: column;
  background: #242630;
  color: #fff;
  border-color: #ffffff26;
}
.dashboard-stage #widgets > .card p { color: #c9c9d3; }
.dashboard-stage #widgets > .card[data-type="users"] { background: #302b41; }
.dashboard-stage #widgets > .card[data-type="count"]:nth-child(3n) { background: #343029; }
.dashboard-stage #widgets .metric { color: #f6be81; font-variant-numeric: tabular-nums; }
.dashboard-stage #widgets .widget-actions { margin-top: auto; padding-top: 10px; }
.dashboard-stage .widget-actions button { background: transparent; border-color: #737482; color: #f7f7fa; }
.dashboard-stage .widget-actions button:hover { border-color: var(--gold); }
.dashboard-stage meter { accent-color: #f6be81; }
.dashboard-stage .column-track { background: #ffffff14; }
.dashboard-stage .column-fill { background: #f6be81; }
#activity { margin-top: 20px; }
#event-count { font-size: .85rem; }
#activity tbody tr:nth-child(odd) { background: #f7f7fa; }
.event-pill {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  padding: 3px 10px;
  border-radius: 999px;
  background: #eeeaf7;
  color: #493970;
  font-size: .85rem;
  font-weight: 650;
}
.event-pill[data-event="login"] { background: #e2f2e8; color: #22553c; }
.event-pill[data-event="like"] { background: #f8e7d4; color: #6a400e; }
.integration-card, #activity, .source-panel { box-shadow: 0 8px 22px -18px #15161a55; }
dialog { border-radius: 22px; box-shadow: 0 22px 65px #15161a40; }
dialog::backdrop { background: #15161aa6; }
@media (max-width: 560px) {
  .top-row { padding-block: 4px 8px; }
  .dashboard-stage { border-radius: 18px; }
  .dashboard-stage .toolbar { margin-top: 16px; padding: 10px; }
  #activity tbody tr:nth-child(odd) { background: transparent; }
  #activity tbody tr {
    padding: 12px;
    margin-bottom: 8px;
    border: 1px solid var(--line);
    border-radius: 12px;
  }
}

#library-dialog { width: min(690px, calc(100% - 26px)); }
#library-dialog > .field-help { margin-top: 8px; }
#library-dialog label { margin-top: 14px; }
.widget-drop {
  display: grid;
  place-content: center;
  justify-items: center;
  min-height: 110px;
  padding: 12px;
  margin-top: 12px;
  border: 2px dashed #c19a73;
  border-radius: 14px;
  background: #fbf6ee;
  text-align: center;
  overflow-wrap: anywhere;
}
.widget-drop span { color: var(--muted); }
.widget-drop.ready { border-color: var(--accent); }
.widget-drop.over { background: #f3d7b4; }
.widget-samples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-block: 12px; }
.widget-samples button { display: grid; align-content: start; gap: 4px; text-align: start; cursor: grab; }
.widget-samples button span { color: var(--muted); font-size: .85rem; font-weight: 400; }
.api-settings { margin-top: 14px; }
.api-settings summary { cursor: pointer; font-weight: 700; }
@media (max-width: 560px) {
  .widget-samples { grid-template-columns: minmax(0, 1fr); }
}

[hidden] { display: none !important; }
#activity, #integrations { margin-top: 0; }
#activity-filters .toolbar { margin-top: 16px; }
#activity-filters .board-picker, #activity-filters #add-board, #activity-filters #refresh { display: none; }
#activity-filters .toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.widget-source-field, .board-template-field {
  min-width: 0;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.widget-source-field legend, .board-template-field legend { font-weight: 650; }
#widget-source-options { display: grid; gap: 4px; max-height: 150px; overflow-y: auto; }
#widget-source-options label { display: flex; align-items: center; gap: 9px; min-height: 44px; overflow-wrap: anywhere; }
#widget-source-options input, .board-template input { width: 18px; min-height: 0; height: 18px; flex: none; accent-color: var(--accent); }
.widget-source-note { font-size: .8rem; }
#widgets .widget-moving { opacity: .55; }
#widgets .widget-target { outline: 3px solid var(--gold); outline-offset: 2px; }
.widget-actions button:disabled { cursor: default; }
.template-preview {
  display: grid;
  align-content: center;
  gap: 7px;
  min-height: 78px;
  padding: 10px;
  border: 1px solid #45454e;
  border-radius: 10px;
  color: #f7bd7b;
  background: linear-gradient(145deg, #292832, #17181e);
}
.template-preview strong { color: #f7bd7b; font-size: 1.5rem; line-height: 1; }
.template-preview .template-line { height: 4px; width: 50%; border-radius: 4px; background: #c8abdd; }
.template-preview .template-bars { height: 54px; display: flex; align-items: end; gap: 4px; }
.template-bars span { flex: 1; border-radius: 4px 4px 1px 1px; background: #c8abdd; }
.template-bars span:nth-child(2n) { background: #e7a251; }
.board-templates, .board-template-preview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.board-template { align-content: start; padding: 7px; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; }
.board-template:has(input:checked) { border-color: var(--accent); background: #fbf6ee; }
.board-template-preview { min-height: 59px; padding: 4px; border-radius: 8px; background: #e9e7ef; }
.board-template-preview .template-preview { min-height: 0; padding: 4px; gap: 3px; }
.board-template-preview .template-preview strong { font-size: .9rem; }
.board-template-preview .template-bars { height: 20px; gap: 2px; }
.template-blank { grid-column: 1 / -1; align-self: center; justify-self: center; font-size: 1.45rem; }
.arrange-help { color: #cccdd4; font-size: .83rem; margin: 12px 0 -10px; }

.auth-panel { max-width: 480px; margin-inline: auto; }
.auth-panel h1 { font-size: clamp(2rem, 5vw, 2.8rem); }
.auth-panel form { display: grid; gap: 12px; margin-block: 18px; }
.auth-panel .auth-error { color: #982f2a; }
#sync-status { margin-top: 10px; }
#sync-status:empty { display: none; }
.session-form button { background: transparent; color: #fff; }
#activity-filters #remove-board { display: none; }