/* Aurora account dashboard. Scoped to the account tab to avoid leaking into uploads. */

#tab-account {
  --account-primary: var(--aurora-primary, #4169e1);
  --account-ink: var(--aurora-ink, #17191f);
  --account-muted: var(--aurora-muted, #747985);
  --account-line: var(--aurora-border, #e8eaf0);
  --account-soft: var(--aurora-surface-2, #f6f7f9);
  --account-radius: 18px;
  box-sizing: border-box;
  color: var(--account-ink);
}

:root[data-theme="dark"] #tab-account {
  --account-ink: var(--aurora-ink);
  --account-muted: var(--aurora-muted);
  --account-line: var(--aurora-border);
  --account-soft: var(--aurora-surface-2);
}

#tab-account .df-auth-alerts {
  position: sticky;
  z-index: 2;
  top: 0;
  max-width: 1040px;
  margin: 0 auto 12px;
}

#tab-account .df-account {
  max-width: 100%;
  margin: 0 auto;
  color: var(--account-ink);
}

#tab-account .df-account-head {
  display: flex;
  gap: 16px;
  margin: 0 0 26px;
  padding: 3px 2px;
  align-items: center;
  justify-content: space-between;
}

#tab-account .df-account-identity {
  display: flex;
  gap: 14px;
  align-items: center;
}

#tab-account .df-account-avatar {
  display: inline-flex;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  align-items: center;
  justify-content: center;
  color: var(--account-ink);
  background: var(--aurora-surface-3);
  border-radius: 50%;
  font-size: 17px;
  font-weight: 600;
}

/* The tab title already names this screen; repeating it over the name was noise. */
#tab-account .df-account-eyebrow {
  display: none;
}

#tab-account .df-account-head h2 {
  color: var(--account-ink);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
}

#tab-account .df-account-head p {
  margin-top: 2px;
  color: var(--account-muted);
  font-size: 13px;
}

#tab-account .df-status-badge {
  gap: 6px;
  padding: 0;
  color: var(--account-muted);
  background: none;
  border: 0;
  border-radius: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

#tab-account .df-status-badge i {
  color: #2f9e68;
}

#tab-account .df-account-nav {
  margin: 0 0 22px;
  overflow-x: auto;
  scrollbar-width: none;
}

#tab-account .df-account-nav::-webkit-scrollbar {
  display: none;
}

/* An underlined row rather than a floating pill: it reads as navigation
   instead of a control, and keeps the eye on one horizontal baseline. */
#tab-account .df-account-nav ul {
  display: inline-flex;
  min-width: 100%;
  gap: 26px;
  padding: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--account-line);
  border-radius: 0;
}

#tab-account .df-account-nav li {
  flex: 0 0 auto;
  margin-bottom: -1px;
}

#tab-account .df-account-nav a {
  display: flex;
  min-height: 40px;
  gap: 8px;
  padding: 8px 1px;
  align-items: center;
  justify-content: center;
  color: var(--account-muted);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0 !important;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

#tab-account .df-account-nav a:hover {
  color: var(--account-ink);
}

#tab-account .df-account-nav a i {
  font-size: 15px;
  opacity: .7;
}

#tab-account .df-account-nav li.is-active a {
  color: var(--account-ink);
  background: none;
  border-bottom-color: var(--account-ink);
  box-shadow: none;
  font-weight: 600;
}

#tab-account .account-tab {
  display: none;
  animation: accountReveal .22s ease both;
}

#tab-account .account-tab.active {
  display: block;
}

@keyframes accountReveal {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

#tab-account .df-account-grid {
  grid-template-columns: 1fr;
  gap: 16px;
}

#tab-account .df-account-panel,
#tab-account .df-data-card,
#tab-account #add-sub-user-block,
#tab-account #add-background-div {
  position: relative;
  padding: 24px 26px;
  background: var(--account-soft, var(--aurora-surface));
  border: 1px solid var(--account-line);
  border-radius: var(--account-radius);
  box-shadow: none;
}

#tab-account .df-account-panel h3 {
  margin: 0 0 5px;
  padding-right: 0;
  color: var(--account-ink);
  font-size: 15px;
  font-weight: 600;
}

/* Decorative only — the heading beside them already says what each panel is. */
#tab-account .df-panel-icon {
  display: none;
}

#tab-account .df-sec-block {
  margin-bottom: 22px;
}

#tab-account .df-sec-block:last-child {
  margin-bottom: 0;
}

#tab-account .df-sec-title {
  display: block;
  margin-bottom: 9px;
  color: var(--account-ink);
  font-size: 13px;
  font-weight: 600;
}

#tab-account .df-sec-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

#tab-account #df-passkey-add {
  margin-top: 12px;
}

#tab-account .df-panel-title {
  display: flex;
  gap: 12px;
  margin-bottom: 19px;
  align-items: center;
}

#tab-account .df-panel-title h3,
#tab-account .df-panel-title .df-help {
  margin: 0;
  padding: 0;
}

#tab-account .df-profile-panel {
  margin-top: 16px;
}

/* Address and billing fields are short and related, so they pair up on wide
   screens instead of running down one long identical column. */
#tab-account .df-profile-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
}

@media (max-width: 700px) {
  #tab-account .df-profile-form {
    grid-template-columns: 1fr;
  }
}

#tab-account .df-profile-form > input,
#tab-account .df-profile-form .df-field-wide,
#tab-account .df-profile-form .df-form-actions,
#tab-account .df-profile-form #errorsOther {
  grid-column: 1 / -1;
}

#tab-account .df-auth-signup {
  margin: 16px 0 0;
  color: var(--account-muted);
  font-size: 12px;
  text-align: center;
}

#tab-account .df-auth-signup a {
  color: var(--account-ink);
  font-weight: 600;
  text-decoration: underline;
}

#tab-account .df-plan-panel .button {
  margin-top: 14px;
}

#tab-account .field .df-help {
  margin-top: 6px;
  color: var(--account-muted);
  font-size: 12px;
}

#tab-account .df-data-card {
  overflow-x: auto;
}

#tab-account .df-data-card table {
  min-width: 680px;
}

#tab-account .field {
  margin: 0;
}

#tab-account .label {
  margin-bottom: 6px;
  color: var(--account-muted);
  font-size: 12px;
  font-weight: 500;
}

#tab-account .input,
#tab-account select,
#tab-account .textarea {
  min-height: 44px;
  color: var(--account-ink);
  background: var(--account-soft, var(--aurora-surface-2));
  border: 1px solid var(--account-line, var(--aurora-border)) !important;
  border-radius: 11px !important;
  box-shadow: none !important;
  font-size: 13px;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

#tab-account .input:focus,
#tab-account select:focus,
#tab-account .textarea:focus {
  background: var(--account-soft, var(--aurora-surface));
  border-color: var(--account-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--account-primary) 12%, transparent) !important;
}

#tab-account .df-form-actions {
  display: flex;
  margin-top: 5px;
  justify-content: flex-end;
}

#tab-account .df-form-actions .button {
  width: auto !important;
  min-width: 180px;
}

#tab-account .button,
#tab-account .df-auth-btn {
  min-height: 40px;
  border-radius: 10px !important;
  font-size: 13px;
  font-weight: 550;
}

#tab-account .button.is-info,
#tab-account .df-auth-btn.primary {
  background: var(--account-primary) !important;
  border-color: var(--account-primary) !important;
  box-shadow: none;
}

#tab-account table.table {
  width: 100%;
  margin: 0;
  background: transparent;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
}

#tab-account table.table thead th {
  padding: 10px 12px;
  color: var(--account-muted);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--account-line);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

#tab-account table.table thead th:first-child {
  border-radius: 10px 0 0 10px;
}

#tab-account table.table thead th:last-child {
  border-radius: 0 10px 10px 0;
}

#tab-account table.table td {
  padding: 13px 12px;
  color: #4e535d;
  border-color: var(--account-line, var(--aurora-border)) !important;
  vertical-align: middle;
}

#tab-account table.table tr:last-child td {
  border-bottom: 0;
}

#tab-account table.table a {
  color: var(--account-primary);
  font-weight: 700;
}

#tab-account .df-row-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  white-space: nowrap;
}

#tab-account .df-row-actions a {
  display: inline-flex;
  gap: 5px;
  align-items: center;
}

#tab-account .df-row-actions a.is-danger {
  color: #d64b55;
}

#tab-account #add-background-div,
#tab-account #add-sub-user-block {
  margin-bottom: 16px;
}

#tab-account #sub-user-table > .button,
#tab-account #backgrounds > .button {
  margin-bottom: 14px;
}

#tab-account .df-storage {
  display: flex;
  gap: 14px;
  margin-bottom: 14px;
  padding: 15px 17px;
  align-items: center;
  background: var(--account-soft);
  border-radius: 13px;
}

#tab-account .df-storage-icon {
  display: inline-flex;
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  align-items: center;
  justify-content: center;
  color: var(--account-primary);
  background: var(--account-soft, var(--aurora-surface));
  border-radius: 11px;
  box-shadow: 0 4px 12px rgba(20, 24, 36, .06);
}

#tab-account .df-storage-copy {
  min-width: 0;
  flex: 1;
}

#tab-account .df-storage-copy strong,
#tab-account .df-storage-copy span {
  display: block;
}

#tab-account .df-storage-copy strong {
  font-size: 12px;
}

#tab-account .df-storage-copy span {
  margin-top: 2px;
  color: var(--account-muted);
  font-size: 10px;
}

#tab-account .df-storage-bar {
  width: 130px;
  height: 7px;
  overflow: hidden;
  background: var(--aurora-surface-3);
  border-radius: 10px;
}

#tab-account .df-storage-bar span {
  display: block;
  width: var(--storage-progress, 0%);
  height: 100%;
  background: linear-gradient(90deg, var(--account-primary), var(--aurora-secondary, #8b5cf6));
  border-radius: inherit;
}

#tab-account .df-empty-state {
  padding: 55px 25px;
  text-align: center;
  background: var(--account-soft);
  border: 1px dashed var(--aurora-border);
  border-radius: var(--account-radius);
}

#tab-account .df-empty-state i {
  display: block;
  margin-bottom: 12px;
  color: #b1b5bd;
  font-size: 35px;
}

#tab-account .df-empty-state p {
  color: var(--account-muted);
  font-size: 13px;
}

/* The cards have different heights, so without a fixed box the block jumped
   upwards when switching between sign in and register. Reserving the height and
   centring inside it keeps every card anchored at the same place. */
#tab-account .df-auth {
  display: flex;
  max-width: 400px;
  min-height: 560px;
  margin: 8px auto 40px;
  flex-direction: column;
  justify-content: center;
}

@media (max-height: 700px) {
  #tab-account .df-auth {
    min-height: 0;
  }
}

#tab-account .df-auth-card {
  padding: 32px 30px 28px;
  /* Elevated card vs tab panel — soft grey in light, raised surface in dark */
  background: var(--aurora-surface, #fff);
  border: 1px solid var(--account-line);
  border-radius: var(--account-radius);
  box-shadow: 0 12px 36px -18px rgba(15, 23, 42, 0.18);
}

#tab-account .df-auth-brand {
  margin-bottom: 24px;
  text-align: left;
}

#tab-account .df-auth-logo {
  display: block;
  width: auto;
  max-width: 140px;
  max-height: 32px;
  margin: 0 0 22px;
  object-fit: contain;
}

/* Sat above the heading saying the same thing in smaller, louder type. */
#tab-account .df-auth-kicker {
  display: none;
}

#tab-account .df-auth-brand h1 {
  margin: 0 0 6px;
  color: var(--account-ink);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
}

#tab-account .df-auth .df-auth-sub {
  max-width: 340px;
  margin: 0;
  color: var(--account-muted);
  font-size: 13px;
  line-height: 1.55;
  text-align: left;
}

#tab-account .df-auth .field {
  margin-bottom: 15px;
}

#tab-account .df-auth .label {
  margin-bottom: 7px;
  color: var(--account-muted, #6b7280);
  font-size: 11px;
  font-weight: 650;
}

#tab-account .df-auth .input {
  height: 48px;
  padding-left: 42px;
  color: var(--account-ink);
  background: var(--aurora-field-bg, #f1f2f6) !important;
  border-color: var(--account-line, var(--aurora-border)) !important;
  border-radius: 12px !important;
  font-size: 13px;
}

#tab-account .df-auth .input:focus {
  background: var(--aurora-field-bg-focus, #fff) !important;
  border-color: var(--account-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--aurora-primary-rgb, 62, 142, 208), 0.16) !important;
}

#tab-account .df-auth .control .icon {
  width: 42px;
  height: 48px;
  color: var(--account-muted, #969ba5);
  pointer-events: none;
}

#tab-account .df-auth .input:focus + .icon {
  color: var(--account-primary);
}

/* Without a display the two sign-in buttons collapsed onto one cramped row at
   different widths; stacking them full width makes them read as equal choices. */
#tab-account .df-auth-stack {
  display: grid;
  gap: 10px;
}

/* flex, not inline-flex: as an inline box it sat on a text baseline and left a
   stray line-box gap under it that crowded whatever followed. */
/* Full width belongs to the sign-in cards only; in the security panel these are
   inline actions sitting next to a label. */
#tab-account .df-auth .df-auth-btn {
  display: flex;
  width: 100%;
}

#tab-account .df-auth-btn {
  display: inline-flex;
  width: auto;
  min-height: 46px;
  gap: 9px;
  align-items: center;
  justify-content: center;
  /* Full shorthand on purpose: these are bare <button> elements, so setting only
     border-color left the browser's 2px outset bevel showing through. */
  border: 1px solid var(--account-line, var(--aurora-border));
  border-radius: 12px !important;
  box-shadow: none;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}

#tab-account .df-auth-btn.primary {
  margin-top: 3px;
  color: #fff;
  box-shadow: none;
}

/* It is an <a>, so without this it rendered as a bare blue link beside a
   solid button and the two sign-in options looked like different things. */
#tab-account .df-auth-btn.google {
  color: var(--account-ink);
  background: var(--aurora-surface-2, #f5f6f8);
  border: 1px solid var(--account-line, var(--aurora-border));
  font-weight: 550;
  text-decoration: none;
}

#tab-account .df-auth-btn.google:hover {
  background: var(--aurora-surface-3, #eef0f4);
  border-color: var(--account-primary);
}

#tab-account .df-auth-btn.passkey {
  color: #fff;
  background: #1d2027;
  border-color: #1d2027;
}

#tab-account .df-auth-divider {
  display: flex;
  gap: 12px;
  margin: 20px 0;
  align-items: center;
  color: var(--account-muted);
  font-size: 12px;
}

#tab-account .df-auth-divider::before,
#tab-account .df-auth-divider::after {
  height: 1px;
  flex: 1;
  background: var(--account-line);
  content: "";
}

#tab-account .df-auth-links {
  margin: -2px 0 16px;
}

#tab-account .df-auth-links a {
  color: var(--account-muted);
  font-size: 12px;
  font-weight: 500;
  text-decoration: underline;
}

#tab-account .df-auth-links a:hover {
  color: var(--account-ink);
}

/* Footnote under the auth card. Inline-flex keeps icon + text on one row when
   space allows; wraps cleanly on narrow panels (Spanish string is long). */
#tab-account .df-auth-trust {
  display: inline-flex;
  gap: 8px;
  width: auto;
  max-width: min(100%, 360px);
  margin: 22px auto 0;
  padding: 10px 16px;
  align-items: center;
  justify-content: center;
  color: var(--account-muted);
  background: transparent;
  border: 1px solid var(--account-line, var(--aurora-border));
  border-radius: 999px;
  font-size: 12px;
  font-weight: 550;
  line-height: 1.35;
  text-align: center;
  box-sizing: border-box;
}

#tab-account .df-auth-trust i {
  flex-shrink: 0;
  margin: 0;
  color: var(--account-primary, var(--aurora-primary));
  font-size: 14px;
  line-height: 1;
}

@media (max-width: 760px) {
  #tab-account .df-account-head {
    align-items: flex-start;
  }

  #tab-account .df-account-head {
    flex-wrap: wrap;
    gap: 10px;
  }

  #tab-account .df-status-badge {
    margin-left: 62px;
  }

  #tab-account .df-account-nav ul {
    min-width: max-content;
  }

  #tab-account .df-account-nav li {
    flex: 0 0 auto;
  }

  #tab-account .df-profile-form {
    grid-template-columns: 1fr;
  }

  #tab-account .df-profile-form > * {
    grid-column: 1 !important;
  }

  #tab-account .df-storage {
    flex-wrap: wrap;
  }

  #tab-account .df-storage-bar {
    width: 100%;
    margin-left: 53px;
  }

  #tab-account .df-data-card {
    padding: 14px;
    overflow-x: auto;
  }

  #tab-account table.table {
    min-width: 680px;
  }

  #tab-account .df-account-panel {
    padding: 18px;
  }

  /* Written back when this card was borderless; with a border and a fill the
     content ran straight into the edges. */
  #tab-account .df-auth-card {
    padding: 24px 20px 22px;
  }

  #tab-account .df-auth {
    margin-bottom: 24px;
  }

  #tab-account .df-auth-trust {
    max-width: 100%;
    padding: 9px 14px;
    font-size: 11.5px;
  }

  #tab-account .df-upload-card {
    padding: 12px;
  }

  #tab-account .df-upload-actions {
    width: 100%;
    margin-left: 50px;
  }

  #tab-account .df-action span {
    display: none;
  }
}

/* -------------------------------------------------------------------------
   My uploads — card list + expanded panel mode
   ------------------------------------------------------------------------- */

#tab-account .df-uploads-toolbar {
  display: flex;
  gap: 12px;
  margin: 0 0 12px;
  align-items: center;
  justify-content: space-between;
}

#tab-account .df-uploads-count {
  display: flex;
  gap: 8px;
  align-items: baseline;
  min-width: 0;
  flex-wrap: wrap;
}

#tab-account .df-uploads-count strong {
  color: var(--account-ink);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

#tab-account .df-uploads-count span {
  color: var(--account-muted);
  font-size: 13px;
}

#tab-account .df-uploads-total {
  color: #a0a6b2;
  font-size: 12px;
}

#tab-account .df-uploads-filters {
  display: flex;
  gap: 10px;
  margin: 0 0 14px;
  align-items: center;
  flex-wrap: wrap;
}

#tab-account .df-uploads-search {
  position: relative;
  display: flex;
  min-width: 0;
  flex: 1 1 220px;
  align-items: center;
}

#tab-account .df-uploads-search i {
  position: absolute;
  left: 12px;
  color: #a0a6b2;
  font-size: 14px;
  pointer-events: none;
}

#tab-account .df-uploads-search input {
  width: 100%;
  min-height: 40px;
  padding: 0 12px 0 36px;
  color: var(--account-ink);
  background: var(--account-soft, var(--aurora-surface));
  border: 1px solid var(--account-line);
  border-radius: 12px;
  font-size: 13px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

#tab-account .df-uploads-search input::placeholder {
  color: #a0a6b2;
}

#tab-account .df-uploads-search input:focus {
  border-color: #c5cee0;
  box-shadow: 0 0 0 3px rgba(65, 105, 225, .08);
}

#tab-account .df-uploads-chips {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}

#tab-account .df-chip {
  min-height: 34px;
  padding: 0 12px;
  color: var(--account-muted);
  background: var(--account-soft, var(--aurora-surface));
  border: 1px solid var(--account-line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

#tab-account .df-chip:hover {
  background: var(--account-soft);
}

#tab-account .df-chip.is-active {
  color: #fff;
  background: var(--account-primary);
  border-color: var(--account-primary);
}

#tab-account .df-upload-name {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: var(--account-ink);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.3;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#tab-account .df-upload-name:hover {
  color: var(--account-primary);
}

#tab-account .df-upload-id-sub {
  display: flex;
  gap: 8px;
  margin: 3px 0 0;
  align-items: center;
  color: #9aa1ad;
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

#tab-account .df-upload-filecount {
  padding: 1px 7px;
  color: var(--account-muted);
  background: var(--account-soft);
  border-radius: 999px;
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
}

#tab-account .df-upload-message {
  display: -webkit-box;
  margin: 6px 0 0;
  overflow: hidden;
  color: #4e535d;
  font-size: 12.5px;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#tab-account .df-upload-message i {
  margin-right: 4px;
  color: #a0a6b2;
  font-size: 12px;
  vertical-align: -1px;
}

#tab-account .df-uploads-empty-filter {
  padding: 36px 20px;
  text-align: center;
  background: var(--account-soft);
  border: 1px dashed var(--aurora-border);
  border-radius: var(--account-radius);
}

#tab-account .df-uploads-empty-filter i {
  display: block;
  margin-bottom: 10px;
  color: #b1b5bd;
  font-size: 28px;
}

#tab-account .df-uploads-empty-filter p {
  margin: 0 0 12px;
  color: var(--account-muted);
  font-size: 13px;
}

.tab-window.df-uploads-expanded #tab-account .df-upload-message {
  -webkit-line-clamp: 3;
}

#tab-account .df-uploads-expand {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  padding: 8px 12px;
  color: var(--account-ink);
  background: var(--account-soft, var(--aurora-surface));
  border: 1px solid var(--account-line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

#tab-account .df-uploads-expand:hover {
  background: var(--account-soft);
  border-color: var(--aurora-border);
}

#tab-account .df-uploads-expand .df-collapse-label {
  display: none;
}

.tab-window.df-uploads-expanded #tab-account .df-uploads-expand .df-expand-label {
  display: none;
}

.tab-window.df-uploads-expanded #tab-account .df-uploads-expand .df-collapse-label {
  display: inline;
}

#tab-account .df-uploads-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#tab-account .df-upload-card {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  background: var(--account-soft, var(--aurora-surface));
  border: 1px solid var(--account-line);
  border-radius: 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

#tab-account .df-upload-card:hover {
  border-color: var(--aurora-border);
  box-shadow: 0 8px 20px rgba(20, 24, 36, .04);
}

#tab-account .df-upload-main {
  display: flex;
  gap: 12px;
  min-width: 0;
  flex: 1;
  align-items: flex-start;
}

#tab-account .df-upload-icon {
  display: inline-flex;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  align-items: center;
  justify-content: center;
  color: var(--account-primary);
  background: var(--account-soft);
  border-radius: 11px;
  font-size: 16px;
}

#tab-account .df-upload-body {
  min-width: 0;
  flex: 1;
}

#tab-account .df-upload-title-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

#tab-account .df-upload-id {
  color: var(--account-ink);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

#tab-account .df-upload-id:hover {
  color: var(--account-primary);
}

#tab-account .df-upload-badge {
  display: inline-flex;
  padding: 2px 8px;
  color: var(--account-muted);
  background: var(--account-soft);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

#tab-account .df-upload-sender {
  margin: 3px 0 0;
  overflow: hidden;
  color: var(--account-muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#tab-account .df-upload-meta {
  display: flex;
  gap: 10px 14px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}

#tab-account .df-upload-meta li {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  color: #5d636f;
  font-size: 12px;
}

#tab-account .df-upload-meta i {
  color: #a0a6b2;
  font-size: 13px;
}

#tab-account .df-upload-created {
  display: none;
}

#tab-account .df-upload-actions {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
  align-items: center;
}

#tab-account .df-action {
  display: inline-flex;
  gap: 5px;
  min-width: 34px;
  min-height: 34px;
  padding: 0 10px;
  align-items: center;
  justify-content: center;
  color: var(--account-ink);
  background: var(--account-soft);
  border: 0;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

/* Compact by default: icons only (panel is narrow). Labels appear when expanded. */
#tab-account .df-action span {
  display: none;
}

#tab-account .df-action:hover {
  background: var(--aurora-surface-3);
}

#tab-account .df-action.is-primary {
  color: #fff;
  background: var(--account-primary);
}

#tab-account .df-action.is-primary:hover {
  filter: brightness(0.95);
}

#tab-account .df-action.is-danger {
  color: #d64b55;
  background: #fdf2f3;
}

#tab-account .df-action.is-danger:hover {
  background: #fbe6e8;
}

#tab-account .df-action.is-copied {
  color: #059669;
  background: #ecfdf5;
}

:root[data-theme="dark"] #tab-account .df-action.is-danger {
  color: #f0a0a6;
  background: rgba(214, 75, 85, 0.18);
}
:root[data-theme="dark"] #tab-account .df-action.is-danger:hover {
  background: rgba(214, 75, 85, 0.28);
}
:root[data-theme="dark"] #tab-account .df-action.is-copied {
  color: #6ee7b7;
  background: rgba(5, 150, 105, 0.18);
}

/* Expanded panel: more room for the list */
.tab-window.df-uploads-expanded {
  max-width: min(1280px, 96vw) !important;
  min-width: min(980px, 100vw) !important;
  width: min(1280px, 96vw) !important;
}

.tab-window.df-uploads-expanded .tab#tab-account {
  width: 100%;
  max-width: none;
  margin-left: 48px;
  margin-right: 36px;
}

.tab-window.df-uploads-expanded #tab-account .df-upload-created {
  display: inline-flex;
}

.tab-window.df-uploads-expanded #tab-account .df-upload-card {
  padding: 16px 18px;
}

.tab-window.df-uploads-expanded #tab-account .df-action span {
  display: inline;
}

@media (max-width: 768px) {
  .tab-window.df-uploads-expanded {
    max-width: 100% !important;
    min-width: 100% !important;
    width: 100% !important;
  }

  .tab-window.df-uploads-expanded .tab#tab-account {
    margin-left: 20px;
    margin-right: 20px;
  }

  #tab-account .df-uploads-expand .df-expand-label,
  #tab-account .df-uploads-expand .df-collapse-label {
    display: none !important;
  }
}

/* Dark mode: re-tint hard-coded light surfaces via account tokens */
:root[data-theme="dark"] #tab-account .df-account-panel,
:root[data-theme="dark"] #tab-account .df-account-card,
:root[data-theme="dark"] #tab-account .df-account-stat,
:root[data-theme="dark"] #tab-account .df-account-box,
:root[data-theme="dark"] #tab-account .df-account-section,
:root[data-theme="dark"] #tab-account .df-account-list,
:root[data-theme="dark"] #tab-account .df-account-row,
:root[data-theme="dark"] #tab-account .df-account-table,
:root[data-theme="dark"] #tab-account .df-account-empty,
:root[data-theme="dark"] #tab-account .df-account-toolbar,
:root[data-theme="dark"] #tab-account .df-account-modal,
:root[data-theme="dark"] #tab-account .df-account-chip,
:root[data-theme="dark"] #tab-account [class*="df-account"][class*="card"],
:root[data-theme="dark"] #tab-account [class*="df-account"][class*="panel"] {
  background-color: var(--aurora-surface-2);
  border-color: var(--aurora-border);
  color: var(--account-ink);
}

:root[data-theme="dark"] #tab-account input,
:root[data-theme="dark"] #tab-account select,
:root[data-theme="dark"] #tab-account textarea {
  color: var(--aurora-ink);
  background-color: var(--aurora-field-bg);
  border-color: var(--aurora-border);
}

:root[data-theme="dark"] #tab-account input:focus,
:root[data-theme="dark"] #tab-account select:focus,
:root[data-theme="dark"] #tab-account textarea:focus {
  background-color: var(--aurora-field-bg-focus);
  border-color: var(--aurora-primary);
}

:root[data-theme="dark"] #tab-account #add-background-div,
:root[data-theme="dark"] #tab-account .df-auth-card,
:root[data-theme="dark"] #tab-account .df-auth .input,
:root[data-theme="dark"] #tab-account .df-auth-btn.google,
:root[data-theme="dark"] #tab-account .df-account-search input,
:root[data-theme="dark"] #tab-account .df-account-filter,
:root[data-theme="dark"] #tab-account .df-account-file,
:root[data-theme="dark"] #tab-account .df-account-head-actions {
  background: var(--aurora-surface) !important;
  color: var(--aurora-ink);
  border-color: var(--aurora-border);
}

:root[data-theme="dark"] #tab-account .input:focus,
:root[data-theme="dark"] #tab-account select:focus,
:root[data-theme="dark"] #tab-account .textarea:focus {
  background: var(--aurora-field-bg-focus) !important;
}

/* Dark mode — account surfaces fully on aurora tokens */
:root[data-theme="dark"] #tab-account {
  --account-ink: var(--aurora-ink);
  --account-muted: var(--aurora-muted);
  --account-line: var(--aurora-border);
  --account-soft: var(--aurora-surface-2);
  color: var(--account-ink);
}

:root[data-theme="dark"] #tab-account .df-auth-card,
:root[data-theme="dark"] #tab-account .df-account-panel,
:root[data-theme="dark"] #tab-account .df-account-card,
:root[data-theme="dark"] #tab-account #add-background-div,
:root[data-theme="dark"] #tab-account .df-account-file,
:root[data-theme="dark"] #tab-account .df-account-row,
:root[data-theme="dark"] #tab-account .df-account-empty,
:root[data-theme="dark"] #tab-account .df-account-toolbar,
:root[data-theme="dark"] #tab-account .df-account-chip,
:root[data-theme="dark"] #tab-account .df-account-stat {
  background: var(--aurora-surface) !important;
  border-color: var(--aurora-border) !important;
  color: var(--aurora-ink) !important;
}

:root[data-theme="dark"] #tab-account .input,
:root[data-theme="dark"] #tab-account select,
:root[data-theme="dark"] #tab-account .textarea,
:root[data-theme="dark"] #tab-account .df-auth .input {
  background: var(--aurora-field-bg) !important;
  color: var(--aurora-ink) !important;
  border-color: rgba(255, 255, 255, .1) !important;
}

:root[data-theme="dark"] #tab-account .input:focus,
:root[data-theme="dark"] #tab-account select:focus,
:root[data-theme="dark"] #tab-account .textarea:focus {
  background: var(--aurora-field-bg-focus) !important;
  border-color: var(--aurora-primary) !important;
}

:root[data-theme="dark"] #tab-account .df-auth-btn.google,
:root[data-theme="dark"] #tab-account .df-auth-btn:not(.primary):not(.passkey):not(.danger-soft) {
  background: var(--aurora-surface-3) !important;
  color: var(--aurora-ink) !important;
  border-color: rgba(255, 255, 255, .12) !important;
}

:root[data-theme="dark"] #tab-account .df-auth-btn.ghost {
  background: transparent !important;
  border-color: transparent !important;
}

/* Soft semantic banners */
:root[data-theme="dark"] #tab-account .df-account-banner.is-danger,
:root[data-theme="dark"] #tab-account [class*="danger"]:not(.button):not(.df-auth-btn) {
  /* leave text semantics */
}

/* --------------------------------------------------------------------------
   Dark mode — account login + panels (definitive)
   -------------------------------------------------------------------------- */

:root[data-theme="dark"] #tab-account {
  --account-ink: var(--aurora-ink, #f5f7fb);
  --account-muted: var(--aurora-muted, #aab3c2);
  --account-line: var(--aurora-border, #3d4658);
  --account-soft: var(--aurora-surface-2, #1a2030);
  color: var(--account-ink);
}

:root[data-theme="dark"] #tab-account .df-auth-card {
  background: #151a24 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 18px 48px -16px rgba(0, 0, 0, 0.55);
}

:root[data-theme="dark"] #tab-account .df-auth-brand h1,
:root[data-theme="dark"] #tab-account .df-auth-card h1,
:root[data-theme="dark"] #tab-account .df-auth-card h2 {
  color: var(--account-ink) !important;
}

:root[data-theme="dark"] #tab-account .df-auth .df-auth-sub,
:root[data-theme="dark"] #tab-account .df-auth .label,
:root[data-theme="dark"] #tab-account .df-auth-links a,
:root[data-theme="dark"] #tab-account .df-auth-signup,
:root[data-theme="dark"] #tab-account .df-help {
  color: var(--account-muted) !important;
}

:root[data-theme="dark"] #tab-account .df-auth-signup a,
:root[data-theme="dark"] #tab-account .df-auth-links a:hover {
  color: var(--account-ink) !important;
}

:root[data-theme="dark"] #tab-account .df-auth .input {
  color: var(--account-ink) !important;
  background: #1c2230 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

:root[data-theme="dark"] #tab-account .df-auth .input:focus {
  background: #252c3a !important;
  border-color: var(--account-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--aurora-primary-rgb, 62, 142, 208), 0.28) !important;
}

:root[data-theme="dark"] #tab-account .df-auth .control .icon {
  color: #8e97a8 !important;
}

:root[data-theme="dark"] #tab-account .df-auth-btn.google {
  color: var(--account-ink) !important;
  background: #1c2230 !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

:root[data-theme="dark"] #tab-account .df-auth-btn.google:hover {
  background: #252c3a !important;
  border-color: var(--account-primary) !important;
}

:root[data-theme="dark"] #tab-account .df-auth-btn.passkey {
  color: #fff !important;
  background: #0a0c12 !important;
  border-color: #0a0c12 !important;
}

:root[data-theme="dark"] #tab-account .df-auth-btn.primary {
  color: #fff !important;
}

:root[data-theme="dark"] #tab-account .df-auth-divider {
  color: var(--account-muted);
}

:root[data-theme="dark"] #tab-account .df-auth-divider::before,
:root[data-theme="dark"] #tab-account .df-auth-divider::after {
  background: rgba(255, 255, 255, 0.12);
}

/* Trust line: subtle outline pill, not a muddy grey blob */
:root[data-theme="dark"] #tab-account .df-auth-trust {
  color: #b6bfce;
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}

:root[data-theme="dark"] #tab-account .df-auth-trust i {
  color: color-mix(in srgb, var(--account-primary, #3e8ed0) 85%, #fff 15%);
}

/* Logo on dark chrome */
:root[data-theme="dark"] #tab-account .df-auth-logo {
  filter: none;
}

/* Logged-in panels / tables */
:root[data-theme="dark"] #tab-account .df-account-panel,
:root[data-theme="dark"] #tab-account .df-account-card,
:root[data-theme="dark"] #tab-account .df-data-card,
:root[data-theme="dark"] #tab-account .df-upload-card,
:root[data-theme="dark"] #tab-account .df-plan-panel {
  background: #151a24 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: var(--account-ink) !important;
}

:root[data-theme="dark"] #tab-account .df-account-nav a,
:root[data-theme="dark"] #tab-account .df-account-nav button {
  color: var(--account-muted);
}

:root[data-theme="dark"] #tab-account .df-account-nav .is-active a,
:root[data-theme="dark"] #tab-account .df-account-nav a.is-active {
  color: var(--account-ink);
  background: rgba(255, 255, 255, 0.06);
}

:root[data-theme="dark"] #tab-account table.table td,
:root[data-theme="dark"] #tab-account table.table th {
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--account-ink) !important;
}

:root[data-theme="dark"] #tab-account .df-badge {
  background: rgba(5, 150, 105, 0.18);
  color: #6ee7b7;
}

:root[data-theme="dark"] #tab-account .df-badge.off {
  background: rgba(255, 255, 255, 0.08);
  color: var(--account-muted);
}

:root[data-theme="dark"] #tab-account .df-auth-btn.danger-soft {
  background: rgba(214, 75, 85, 0.16) !important;
  border-color: rgba(214, 75, 85, 0.35) !important;
  color: #f0a0a6 !important;
}