/* ==========================================================================
   CManager — feature styles
   Calendar, composer, account cards, analytics and the AI workspace.
   ========================================================================== */

/* ------------------------------------------------------------------ calendar */

.cal-toolbar {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.cal-toolbar__title { font-size: 1.02rem; font-weight: 660; min-width: 175px; }
.cal-nav { display: flex; gap: .25rem; }

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  background: var(--border);
  gap: 1px;
  border-top: 1px solid var(--border);
}
.cal-grid--week .cal-day { min-height: 62vh; }
.cal-grid--month .cal-day { min-height: 128px; }

.cal-head {
  background: var(--surface-2);
  padding: .55rem .6rem;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-faint);
  text-align: center;
}
.cal-head.is-today { color: var(--brand-600); }
.cal-head__num { display: block; font-size: .95rem; letter-spacing: 0; margin-top: .1rem; color: var(--text); }
.cal-head.is-today .cal-head__num {
  color: #fff;
  background: var(--brand-500);
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid; place-items: center;
  margin: .15rem auto 0;
}

.cal-day {
  background: var(--surface);
  padding: .4rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  transition: background var(--dur) var(--ease);
  position: relative;
  min-width: 0;
}
.cal-day.is-outside { background: var(--surface-2); opacity: .55; }
.cal-day.is-today { background: color-mix(in srgb, var(--brand-500) 4%, var(--surface)); }
.cal-day.is-drop-target {
  background: color-mix(in srgb, var(--brand-500) 11%, var(--surface));
  outline: 2px dashed var(--brand-500);
  outline-offset: -3px;
}
.cal-day__label { display: none; font-size: .74rem; font-weight: 650; color: var(--text-faint); }
.cal-day__add {
  position: absolute;
  top: .35rem; right: .35rem;
  width: 22px; height: 22px;
  border-radius: 6px;
  border: 0;
  background: var(--surface-3);
  color: var(--text-muted);
  display: grid; place-items: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur) var(--ease), background var(--dur) var(--ease);
  font-size: 1rem;
  line-height: 1;
  z-index: 3;
}
.cal-day:hover .cal-day__add { opacity: 1; }
.cal-day__add:hover { background: var(--brand-500); color: #fff; }

.cal-event {
  border-radius: 8px;
  padding: .38rem .5rem .38rem .6rem;
  font-size: .76rem;
  background: var(--surface-3);
  border-left: 3px solid var(--text-faint);
  cursor: grab;
  transition: transform .14s var(--ease), box-shadow var(--dur) var(--ease), opacity var(--dur) var(--ease);
  position: relative;
  overflow: hidden;
  text-align: left;
  border-top: 0; border-right: 0; border-bottom: 0;
  width: 100%;
  color: var(--text);
  display: block;
}
.cal-event:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); z-index: 5; }
.cal-event.is-dragging { opacity: .4; cursor: grabbing; }
.cal-event__time { font-weight: 700; font-size: .68rem; color: var(--text-faint); display: block; margin-bottom: .1rem; }
.cal-event__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; font-weight: 560; }
.cal-event__meta { display: flex; align-items: center; gap: .25rem; margin-top: .25rem; }
.cal-event__icon { width: 11px; height: 11px; }

.cal-event--draft      { background: color-mix(in srgb, var(--text-faint) 13%, var(--surface)); border-left-color: var(--text-faint); }
.cal-event--scheduled  { background: color-mix(in srgb, var(--info) 14%, var(--surface)); border-left-color: var(--info); }
.cal-event--publishing { background: color-mix(in srgb, var(--warning) 16%, var(--surface)); border-left-color: var(--warning); }
.cal-event--published  { background: color-mix(in srgb, var(--success) 14%, var(--surface)); border-left-color: var(--success); }
.cal-event--partial    { background: color-mix(in srgb, var(--warning) 14%, var(--surface)); border-left-color: var(--warning); }
.cal-event--failed     { background: color-mix(in srgb, var(--danger) 13%, var(--surface)); border-left-color: var(--danger); }

.cal-more {
  font-size: .72rem;
  color: var(--text-muted);
  padding: .1rem .4rem;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-weight: 600;
}
.cal-more:hover { color: var(--brand-600); }

.cal-legend { display: flex; flex-wrap: wrap; gap: .8rem; padding: .65rem 1rem; border-top: 1px solid var(--border); background: var(--surface-2); }
.cal-legend__item { display: inline-flex; align-items: center; gap: .35rem; font-size: .76rem; color: var(--text-muted); }
.cal-legend__dot { width: 9px; height: 9px; border-radius: 3px; }

/* List (agenda) view */
.agenda-day { border-bottom: 1px solid var(--border); }
.agenda-day:last-child { border-bottom: 0; }
.agenda-day__head {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem 1rem;
  background: var(--surface-2);
  position: sticky; top: var(--topbar-h);
  z-index: 2;
}
.agenda-day__date { font-weight: 660; font-size: .88rem; }
.agenda-day__count { font-size: .76rem; color: var(--text-faint); }
.agenda-item {
  display: flex; gap: .8rem; align-items: flex-start;
  padding: .7rem 1rem;
  border-top: 1px solid var(--border);
  transition: background var(--dur) var(--ease);
}
.agenda-item:hover { background: var(--surface-2); }
.agenda-item__time { font-size: .78rem; font-weight: 650; color: var(--text-muted); width: 68px; flex: 0 0 auto; font-variant-numeric: tabular-nums; padding-top: .1rem; }
.agenda-item__body { flex: 1 1 auto; min-width: 0; }
.agenda-item__title { font-weight: 580; font-size: .87rem; margin-bottom: .15rem; }
.agenda-item__preview { font-size: .79rem; color: var(--text-muted); }

/* ----------------------------------------------------------------- composer */

.composer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 1rem; }
@media (max-width: 1080px) { .composer { grid-template-columns: minmax(0, 1fr); } }

.composer__editor { display: flex; flex-direction: column; gap: .9rem; }

.editor-toolbar {
  display: flex; align-items: center; gap: .15rem;
  padding: .35rem .4rem;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  background: var(--surface-2);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.editor-toolbar__btn {
  border: 0; background: none;
  width: 30px; height: 30px;
  border-radius: 6px;
  display: grid; place-items: center;
  cursor: pointer;
  color: var(--text-muted);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  font-size: .82rem;
  font-weight: 650;
}
.editor-toolbar__btn:hover { background: var(--surface-3); color: var(--text); }
.editor-toolbar__btn svg { width: 15px; height: 15px; }
.editor-toolbar__sep { width: 1px; height: 18px; background: var(--border); margin: 0 .25rem; }

.editor {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.editor:focus-within { border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--ring); }
.editor__area {
  width: 100%;
  border: 0;
  padding: .9rem 1rem;
  min-height: 200px;
  resize: vertical;
  font-family: inherit;
  font-size: .93rem;
  line-height: 1.65;
  background: transparent;
  color: var(--text);
  outline: none;
}
.editor__area::placeholder { color: var(--text-faint); }
.editor__foot {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .4rem .75rem;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  font-size: .75rem;
  color: var(--text-faint);
}
.editor__count.is-over { color: var(--danger); font-weight: 700; }
.editor__count.is-warn { color: var(--warning); font-weight: 650; }

.hashtag-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.hashtag-chip {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .15rem .5rem;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--brand-500) 12%, transparent);
  color: var(--brand-600);
  font-size: .76rem;
  font-weight: 570;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all var(--dur) var(--ease);
}
.hashtag-chip:hover { background: color-mix(in srgb, var(--brand-500) 20%, transparent); }
.hashtag-chip.is-selected { background: var(--brand-500); color: #fff; }
.hashtag-chip button { border: 0; background: none; color: inherit; cursor: pointer; padding: 0; opacity: .65; }
.hashtag-chip button:hover { opacity: 1; }

/* Platform preview */
.preview-frame {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: .9rem;
  overflow: hidden;
}
.preview-post {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.preview-post__head { display: flex; align-items: center; gap: .6rem; padding: .7rem .8rem; }
.preview-post__name { font-weight: 640; font-size: .86rem; line-height: 1.2; }
.preview-post__time { font-size: .72rem; color: var(--text-faint); }
.preview-post__body { padding: 0 .8rem .7rem; font-size: .86rem; white-space: pre-wrap; word-break: break-word; line-height: 1.55; }
.preview-post__media {
  aspect-ratio: 1;
  background: var(--surface-3);
  display: grid;
  place-items: center;
  color: var(--text-faint);
  overflow: hidden;
  position: relative;
}
.preview-post__media img { width: 100%; height: 100%; object-fit: cover; }
.preview-post__media--grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; aspect-ratio: 1; }
.preview-post__media--grid img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; }
.preview-post__actions {
  display: flex; gap: 1rem;
  padding: .55rem .8rem;
  border-top: 1px solid var(--border);
  color: var(--text-faint);
  font-size: .78rem;
  font-weight: 570;
}
.preview-post__actions span { display: inline-flex; align-items: center; gap: .3rem; }
.preview-post__actions svg { width: 14px; height: 14px; }
.preview-note { font-size: .74rem; color: var(--text-faint); margin-top: .5rem; text-align: center; }

.schedule-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
@media (max-width: 560px) { .schedule-grid { grid-template-columns: 1fr; } }

.slot-suggestion {
  display: flex; align-items: center; gap: .5rem;
  padding: .4rem .6rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  font-size: .8rem;
  transition: all var(--dur) var(--ease);
  width: 100%;
  text-align: left;
}
.slot-suggestion:hover { border-color: var(--brand-500); background: color-mix(in srgb, var(--brand-500) 6%, transparent); }
.slot-suggestion.is-selected { border-color: var(--brand-500); background: color-mix(in srgb, var(--brand-500) 10%, transparent); font-weight: 620; }
.slot-suggestion__score { margin-left: auto; font-size: .74rem; font-weight: 700; color: var(--brand-600); }

/* ------------------------------------------------------------------ accounts */

.account-card {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 1rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.account-card:hover { box-shadow: var(--shadow-md); }
.account-card__body { flex: 1 1 auto; min-width: 0; }
.account-card__name { font-weight: 640; display: flex; align-items: center; gap: .4rem; margin-bottom: .1rem; }
.account-card__handle { font-size: .8rem; color: var(--text-muted); }
.account-card__stats { display: flex; gap: 1.1rem; margin-top: .45rem; }
.account-card__stat { font-size: .78rem; color: var(--text-muted); }
.account-card__stat b { display: block; font-size: .95rem; color: var(--text); font-weight: 680; font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------------- analytics */

.tabs-bar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }

.top-post {
  display: flex; gap: .8rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
}
.top-post:last-child { border-bottom: 0; }
.top-post__rank {
  width: 24px; height: 24px;
  border-radius: 7px;
  background: var(--surface-3);
  display: grid; place-items: center;
  font-size: .74rem;
  font-weight: 700;
  color: var(--text-muted);
  flex: 0 0 auto;
}
.top-post:first-child .top-post__rank { background: var(--brand-500); color: #fff; }
.top-post__body { flex: 1 1 auto; min-width: 0; }
.top-post__title { font-size: .85rem; font-weight: 580; margin-bottom: .2rem; }
.top-post__stats { display: flex; gap: .8rem; font-size: .75rem; color: var(--text-faint); flex-wrap: wrap; }
.top-post__stats b { color: var(--text); font-weight: 650; }

.platform-split { display: flex; flex-direction: column; gap: .8rem; }
.platform-row { display: flex; align-items: center; gap: .7rem; }
.platform-row__icon { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #fff; flex: 0 0 auto; }
.platform-row__icon svg { width: 15px; height: 15px; }
.platform-row__body { flex: 1 1 auto; min-width: 0; }
.platform-row__name { font-size: .84rem; font-weight: 600; margin-bottom: .25rem; display: flex; justify-content: space-between; }
.platform-row__bar { height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.platform-row__bar span { display: block; height: 100%; border-radius: 99px; }

/* ------------------------------------------------------------------- AI chat */

.chat { display: flex; flex-direction: column; height: min(72vh, 720px); }
.chat__log { flex: 1 1 auto; overflow-y: auto; padding: 1.1rem; display: flex; flex-direction: column; gap: .9rem; }
.chat__msg { display: flex; gap: .65rem; max-width: 88%; animation: msgIn .24s var(--ease-out); }
.chat__msg--user { margin-left: auto; flex-direction: row-reverse; }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px); } }
.chat__avatar {
  width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center;
  flex: 0 0 auto;
  font-size: .72rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--brand-500), var(--accent-500));
  color: #fff;
}
.chat__msg--user .chat__avatar { background: var(--surface-3); color: var(--text-muted); }
.chat__bubble {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) var(--radius) 4px;
  padding: .7rem .9rem;
  font-size: .88rem;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.6;
}
.chat__msg--user .chat__bubble {
  background: linear-gradient(135deg, var(--brand-500), var(--brand-600));
  color: #fff;
  border-color: transparent;
  border-radius: var(--radius) var(--radius) 4px var(--radius);
}
.chat__input { border-top: 1px solid var(--border); padding: .8rem; background: var(--surface-2); }
.chat__composer {
  display: flex;
  gap: .5rem;
  align-items: flex-end;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: .4rem .4rem .4rem .7rem;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.chat__composer:focus-within { border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--ring); }
.chat__composer textarea {
  flex: 1 1 auto;
  border: 0; background: none; outline: none; resize: none;
  max-height: 140px; min-height: 24px;
  font-family: inherit; font-size: .89rem; line-height: 1.5;
  padding: .3rem 0;
}
.chat__suggestions { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .6rem; }
.chat__suggestion {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-full);
  padding: .28rem .7rem;
  font-size: .78rem;
  cursor: pointer;
  color: var(--text-muted);
  transition: all var(--dur) var(--ease);
}
.chat__suggestion:hover { border-color: var(--brand-500); color: var(--brand-600); background: color-mix(in srgb, var(--brand-500) 6%, transparent); }
.chat__typing { display: inline-flex; gap: 3px; align-items: center; padding: .3rem 0; }
.chat__typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-faint);
  animation: typing 1.2s infinite;
}
.chat__typing span:nth-child(2) { animation-delay: .18s; }
.chat__typing span:nth-child(3) { animation-delay: .36s; }
@keyframes typing { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.ai-mode-chips { display: flex; gap: .35rem; flex-wrap: wrap; }
.ai-mode-chip {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-full);
  padding: .25rem .68rem;
  font-size: .78rem;
  font-weight: 570;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  color: var(--text-muted);
}
.ai-mode-chip:hover { border-color: var(--brand-400); color: var(--text); }
.ai-mode-chip.is-active { background: var(--brand-500); border-color: var(--brand-500); color: #fff; }

.ai-output {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .9rem 1rem;
  font-size: .89rem;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.65;
  max-height: 460px;
  overflow-y: auto;
}
.ai-output--streaming::after {
  content: "▍";
  color: var(--brand-500);
  animation: blink 1s step-end infinite;
  margin-left: 1px;
}
@keyframes blink { 50% { opacity: 0; } }

.ai-suggestion-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .8rem .9rem;
  background: var(--surface);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.ai-suggestion-card:hover { box-shadow: var(--shadow-sm); border-color: var(--border-strong); }
.ai-suggestion-card__label { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--brand-600); font-weight: 700; margin-bottom: .3rem; }
.ai-suggestion-card__text { font-size: .85rem; margin-bottom: .5rem; white-space: pre-wrap; }

.model-picker { display: flex; flex-direction: column; gap: .5rem; }
.model-option {
  display: flex; align-items: center; gap: .55rem;
  padding: .5rem .65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  font-size: .84rem;
  transition: all var(--dur) var(--ease);
  width: 100%;
  text-align: left;
}
.model-option:hover { border-color: var(--brand-400); }
.model-option.is-selected { border-color: var(--brand-500); background: color-mix(in srgb, var(--brand-500) 7%, transparent); }
.model-option__id { font-family: var(--font-mono); font-size: .79rem; }
.model-option__badge { margin-left: auto; }

/* ------------------------------------------------------------- onboarding */

.setup-shell {
  min-height: 100vh; min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
  background:
    radial-gradient(1100px 520px at 12% -12%, color-mix(in srgb, var(--brand-500) 20%, transparent), transparent 62%),
    radial-gradient(1000px 480px at 88% 8%, color-mix(in srgb, var(--accent-500) 16%, transparent), transparent 60%),
    var(--bg);
}
.setup-card {
  width: 100%;
  max-width: 720px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}
.setup-card__head { padding: 1.8rem 2rem 1.2rem; border-bottom: 1px solid var(--border); }
.setup-card__body { padding: 1.6rem 2rem; }
.setup-card__foot { padding: 1.1rem 2rem; border-top: 1px solid var(--border); background: var(--surface-2); }
@media (max-width: 640px) {
  .setup-card__head, .setup-card__body, .setup-card__foot { padding: 1.2rem; }
}

.steps { display: flex; gap: .5rem; margin-top: 1rem; }
.step { flex: 1 1 0; height: 4px; border-radius: 99px; background: var(--surface-3); }
.step.is-done { background: var(--success); }
.step.is-active { background: var(--brand-500); }

.check-list { display: flex; flex-direction: column; gap: .4rem; }
.check-row {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .7rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: .84rem;
}
.check-row__icon { width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; color: #fff; }
.check-row__icon svg { width: 11px; height: 11px; }
.check-row--ok .check-row__icon { background: var(--success); }
.check-row--fail .check-row__icon { background: var(--danger); }
.check-row--warn .check-row__icon { background: var(--warning); }
.check-row__value { margin-left: auto; font-family: var(--font-mono); font-size: .78rem; color: var(--text-muted); }

/* ------------------------------------------------------------------- auth */

.auth-shell {
  min-height: 100vh; min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr minmax(400px, 520px);
}
@media (max-width: 980px) { .auth-shell { grid-template-columns: 1fr; } .auth-hero { display: none !important; } }

.auth-hero {
  background:
    radial-gradient(760px 460px at 18% 12%, color-mix(in srgb, var(--brand-500) 32%, transparent), transparent 62%),
    radial-gradient(680px 420px at 82% 78%, color-mix(in srgb, var(--accent-500) 26%, transparent), transparent 60%),
    #0a0d1a;
  color: #fff;
  padding: 3.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.auth-hero h1 { font-size: 2.15rem; line-height: 1.18; margin-bottom: .8rem; letter-spacing: -.03em; }
.auth-hero p { color: rgba(255, 255, 255, .72); font-size: 1.02rem; max-width: 46ch; }
.auth-hero__features { display: flex; flex-direction: column; gap: .8rem; margin-top: 2rem; }
.auth-hero__feature { display: flex; gap: .7rem; align-items: flex-start; color: rgba(255,255,255,.85); font-size: .92rem; }
.auth-hero__feature svg { width: 19px; height: 19px; color: var(--brand-300); flex: 0 0 auto; margin-top: .1rem; }

.auth-form-wrap { display: grid; place-items: center; padding: 2rem; background: var(--bg); }
.auth-form { width: 100%; max-width: 380px; }

/* ------------------------------------------------------------------- media */

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: .65rem;
}
.media-tile {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-3);
  cursor: pointer;
  border: 1px solid var(--border);
  transition: transform .16s var(--ease), box-shadow var(--dur) var(--ease), outline-color var(--dur) var(--ease);
  outline: 2px solid transparent;
  outline-offset: -2px;
}
.media-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.media-tile img { width: 100%; height: 100%; object-fit: cover; }
.media-tile.is-selected { outline-color: var(--brand-500); }
.media-tile.is-selected::after {
  content: "";
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--brand-500) 22%, transparent);
}
.media-tile__check {
  position: absolute; top: .4rem; right: .4rem;
  width: 21px; height: 21px;
  border-radius: 50%;
  background: var(--brand-500);
  color: #fff;
  display: none;
  place-items: center;
  z-index: 2;
  font-size: .7rem;
  font-weight: 800;
}
.media-tile.is-selected .media-tile__check { display: grid; }
.media-tile__meta {
  position: absolute; inset: auto 0 0 0;
  padding: .3rem .45rem;
  background: linear-gradient(transparent, rgba(0,0,0,.72));
  color: #fff;
  font-size: .68rem;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  z-index: 2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.media-tile:hover .media-tile__meta { opacity: 1; }
.media-tile__badge {
  position: absolute; top: .4rem; left: .4rem;
  z-index: 2;
  font-size: .64rem;
  padding: .1rem .35rem;
  border-radius: 5px;
  background: rgba(0,0,0,.65);
  color: #fff;
  font-weight: 650;
}

.dropzone {
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: 2rem 1.2rem;
  text-align: center;
  transition: all var(--dur) var(--ease);
  cursor: pointer;
  background: var(--surface-2);
}
.dropzone:hover, .dropzone.is-over {
  border-color: var(--brand-500);
  background: color-mix(in srgb, var(--brand-500) 6%, transparent);
}
.dropzone__icon { color: var(--text-faint); margin-bottom: .5rem; display: grid; place-items: center; }
.dropzone__icon svg { width: 30px; height: 30px; }

.upload-progress { display: flex; flex-direction: column; gap: .3rem; margin-top: .6rem; }
.upload-progress__row { display: flex; align-items: center; gap: .6rem; font-size: .79rem; }
.upload-progress__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------------------------- misc */

.switch-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--border);
}
.switch-row:last-child { border-bottom: 0; }
.switch-row__text { min-width: 0; }
.switch-row__label { font-size: .88rem; font-weight: 600; }
.switch-row__hint { font-size: .77rem; color: var(--text-faint); }

.settings-nav { display: flex; flex-direction: column; gap: .15rem; }
.settings-nav__item {
  display: flex; align-items: center; gap: .55rem;
  padding: .5rem .65rem;
  border-radius: var(--radius-sm);
  font-size: .87rem;
  color: var(--text-muted);
  cursor: pointer;
  border: 0;
  background: none;
  width: 100%;
  text-align: left;
  transition: all var(--dur) var(--ease);
}
.settings-nav__item:hover { background: var(--surface-3); color: var(--text); }
.settings-nav__item.is-active { background: color-mix(in srgb, var(--brand-500) 11%, transparent); color: var(--brand-600); font-weight: 620; }
.settings-nav__item svg { width: 16px; height: 16px; }

.timeline { display: flex; flex-direction: column; }
.timeline__item { display: flex; gap: .75rem; padding-bottom: 1rem; position: relative; }
.timeline__item:not(:last-child)::before {
  content: "";
  position: absolute; left: 11px; top: 24px; bottom: 0;
  width: 2px; background: var(--border);
}
.timeline__dot {
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  flex: 0 0 auto; z-index: 1;
  background: var(--surface-3); color: var(--text-muted);
}
.timeline__dot svg { width: 12px; height: 12px; }
.timeline__dot--success { background: var(--success); color: #fff; }
.timeline__dot--danger { background: var(--danger); color: #fff; }
.timeline__dot--warning { background: var(--warning); color: #fff; }
.timeline__body { flex: 1 1 auto; min-width: 0; padding-top: .15rem; }
.timeline__title { font-size: .86rem; font-weight: 600; }
.timeline__meta { font-size: .76rem; color: var(--text-faint); }
.timeline__text { font-size: .8rem; color: var(--text-muted); margin-top: .25rem; }

.copy-field { display: flex; gap: .4rem; align-items: stretch; }
.copy-field input { font-family: var(--font-mono); font-size: .78rem; }

.kbd-grid { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; font-size: .82rem; align-items: center; }