:root {
  --ink: #17131f;
  --muted: #77717f;
  --line: #e8e5ea;
  --bg: #fafafa;
  --purple: #833ab4;
  --pink: #c13584;
  --orange: #fd7e14;
}

* { box-sizing: border-box; }

html, body {
  min-height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { touch-action: manipulation; }

.auth-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: #fafafa;
}

.auth-panel { width: 100%; display: grid; place-items: center; }

.login-card {
  position: relative;
  width: min(400px, 100%);
  padding: 44px 38px 40px;
  overflow: hidden;
  border: 1px solid #dbdbdb;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 50px #301e3c12;
}

.login-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
}

.brand-lockup {
  width: 240px;
  max-width: 100%;
  margin: 0 auto 28px;
  text-align: center;
}

.brand-logo {
  display: block;
  width: 200px;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.brand-accent {
  display: block;
  width: 200px;
  max-width: 100%;
  height: 2px;
  margin: 18px auto 14px;
  background: linear-gradient(90deg, #7928ca, #d62976 58%, #ff7a00);
}

.brand-product {
  display: block;
  color: #171717;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .3em;
  line-height: 1;
  text-transform: uppercase;
}

.login-card form { width: 100%; display: grid; gap: 16px; text-align: center; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.login-card input {
  display: block;
  width: 100%;
  height: 51px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid #dbdbdb;
  border-radius: 12px;
  outline: none;
  background: #fafafa;
  color: #262626;
  font-size: 12px;
  text-align: center;
}

.login-card input:focus {
  border-color: #a8a8a8;
  background: #fafafa;
  box-shadow: none;
}

.primary-button {
  height: 52px;
  margin-top: 2px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(100deg, #833ab4, #c13584 60%, #e1306c);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 13px 28px #c6368c35;
}

.alert {
  margin: -12px 0 18px;
  padding: 11px 13px;
  border-radius: 10px;
  font-size: 11px;
}

.alert.error { color: #a7285a; background: #fff0f5; border: 1px solid #ffd5e5; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 76px;
  padding: 0 clamp(20px, 5vw, 72px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.logo { display: inline-flex; align-items: center; gap: 11px; }
.topbar-logo { width: 45px; height: 45px; display: block; flex: 0 0 auto; object-fit: contain; }
.topbar-brand { display: flex; flex-direction: column; justify-content: center; }
.topbar-brand b { font-size: 15px; line-height: 1.05; letter-spacing: -.035em; }
.topbar-brand small { margin-top: 5px; color: #706a74; font-size: 7px; font-weight: 700; letter-spacing: .27em; line-height: 1; text-transform: uppercase; }

.account { display: flex; align-items: center; gap: 10px; }
.avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--purple), var(--pink)); font-size: 11px; font-weight: 800; }
.account b, .account small { display: block; }
.account b { font-size: 11px; }
.account small { margin-top: 2px; color: #99929e; font-size: 8px; }
.account button, .back-link { margin-left: 15px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: #756e7b; font-size: 9px; cursor: pointer; }

.top-actions { display: flex; align-items: center; gap: 8px; }
.top-actions form { margin: 0; }
.top-action { min-height: 36px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: #5f5865; font-size: 10px; font-weight: 700; cursor: pointer; }
.admin-action { border-color: transparent; color: #fff; background: linear-gradient(100deg, var(--purple), var(--pink)); }

.admin-dashboard {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 54px 0 80px;
}

.admin-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.admin-heading h1 { margin: 4px 0 0; font-size: clamp(31px, 5vw, 50px); letter-spacing: -.055em; }
.admin-heading > div > p:last-child { margin: 12px 0 0; color: var(--muted); font-size: 13px; }
.role-pill { padding: 9px 12px; border-radius: 999px; color: #fff; background: #201a27; font-size: 9px; font-weight: 800; letter-spacing: .16em; }

.admin-menu { margin: 34px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.admin-menu a { min-height: 120px; padding: 22px; display: grid; grid-template-columns: 38px 1fr; grid-template-rows: auto auto; column-gap: 14px; align-content: center; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 12px 32px #251b3010; }
.admin-menu span { grid-row: 1 / 3; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: linear-gradient(135deg, var(--purple), var(--pink)); font-size: 10px; font-weight: 800; }
.admin-menu b { align-self: end; font-size: 15px; }
.admin-menu small { margin-top: 5px; color: var(--muted); font-size: 10px; }

.admin-alert { margin: 0 0 18px; padding: 13px 16px; border: 1px solid; border-radius: 12px; font-size: 11px; }
.admin-alert.success { border-color: #bfe7d5; color: #207453; background: #effbf6; }
.admin-alert.error { border-color: #ffd5e5; color: #a7285a; background: #fff0f5; }

.admin-section { margin-top: 22px; padding: 28px; scroll-margin-top: 94px; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: 0 16px 42px #24172e0d; }
.section-heading { margin-bottom: 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.section-heading > div { display: flex; align-items: center; gap: 11px; }
.section-heading h2 { margin: 0; font-size: 21px; letter-spacing: -.035em; }
.section-heading p { margin: 0; color: var(--muted); font-size: 10px; }
.section-number { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 10px; color: #9d32b9; background: #f7ecfb; font-size: 9px; font-weight: 800; }

.user-create-form { padding: 18px; display: grid; grid-template-columns: 1.15fr 1fr 1.25fr .75fr auto; gap: 12px; align-items: end; border: 1px solid #eadff0; border-radius: 16px; background: #fcf9fd; }
.field-group { min-width: 0; }
.field-group label { display: block; margin: 0 0 7px; color: #716a76; font-size: 9px; font-weight: 700; }
.field-group input, .field-group select { width: 100%; height: 42px; padding: 0 12px; border: 1px solid #ddd8e0; border-radius: 10px; outline: 0; background: #fff; color: var(--ink); font-size: 11px; }
.field-group input:focus, .field-group select:focus { border-color: #a63bbf; box-shadow: 0 0 0 3px #a63bbf12; }
.create-user-button, .save-user-button { height: 42px; padding: 0 16px; border: 0; border-radius: 10px; color: #fff; background: linear-gradient(100deg, var(--purple), var(--pink)); font-size: 10px; font-weight: 800; cursor: pointer; }

.user-list { margin-top: 18px; display: grid; gap: 12px; }
.user-card { padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.user-card-head { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 11px; }
.user-avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--purple), var(--pink)); font-size: 12px; font-weight: 800; }
.user-card-head b, .user-card-head small { display: block; }
.user-card-head b { font-size: 13px; }
.user-card-head small { margin-top: 4px; color: #928b96; font-size: 9px; }
.user-role { padding: 7px 9px; border-radius: 999px; font-size: 8px; font-weight: 800; }
.user-role.admin { color: #8c289d; background: #f7eafa; }
.user-role.user { color: #39715d; background: #eaf8f2; }
.user-edit-form { margin-top: 16px; display: grid; grid-template-columns: 1.15fr 1fr .75fr 1.25fr auto; align-items: end; gap: 10px; }
.save-user-button { background: #211a27; }
.delete-user-form { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid #f0edf1; text-align: right; }
.delete-user-form button { padding: 0; border: 0; background: transparent; color: #bd456a; font-size: 9px; font-weight: 700; cursor: pointer; }
.delete-user-form button:disabled { color: #bbb5bd; cursor: not-allowed; }

.upload-panel { border: 1px solid #e9e4ec; border-radius: 20px; background: #fff; overflow: hidden; box-shadow: 0 12px 34px #2b18320a; }
.file-input { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.upload-dropzone { position: relative; min-height: 270px; padding: 38px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border: 1.5px dashed #d8bfdf; border-radius: 16px; margin: 18px; background: radial-gradient(circle at 50% 0, #f9eefc 0, #fcfafd 42%, #fff 100%); cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.upload-dropzone:hover, .upload-dropzone:focus-visible, .upload-dropzone.is-dragging { border-color: #a83ebb; outline: 0; background: radial-gradient(circle at 50% 0, #f7e7fb 0, #fcf7fd 48%, #fff 100%); }
.upload-dropzone.is-dragging { transform: scale(.997); }
.upload-dropzone.has-file { border-style: solid; border-color: #c8a4d2; }
.upload-icon { width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: 17px; border-radius: 17px; color: #fff; background: linear-gradient(145deg, #7d39b7, #c73587 68%, #e35a68); font-size: 24px; box-shadow: 0 12px 25px #a73c9b36; }
.upload-dropzone > b { font-size: 17px; letter-spacing: -.025em; }
.upload-dropzone > small { margin-top: 7px; color: var(--muted); font-size: 11px; }
.file-button { margin-top: 20px; padding: 11px 16px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid #e0d9e3; border-radius: 11px; background: #fff; color: #352d39; font-size: 10px; font-weight: 800; box-shadow: 0 7px 17px #2113280d; }
.file-button > span { color: #aa36aa; font-size: 14px; line-height: 1; }
.file-status { min-height: 14px; margin-top: 12px; color: #98909c; font-size: 9px; font-weight: 600; overflow-wrap: anywhere; }
.has-file .file-status { color: #7d2e8d; }
.upload-dropzone.has-error { border-color: #dc6b8e; background: #fff8fa; }
.upload-dropzone.has-error .file-status { color: #b83560; }
.upload-footer { padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid #eee9f0; background: #fff; }
.upload-limits { display: flex; align-items: center; gap: 9px; }
.upload-limits > span { padding: 6px 8px; border-radius: 7px; color: #9633a5; background: #f7ebf9; font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.upload-limits p { margin: 0; color: var(--muted); font-size: 10px; }
.upload-footer button { min-width: 184px; height: 42px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: 11px; color: #fff; background: linear-gradient(100deg, var(--purple), var(--pink)); font-size: 10px; font-weight: 800; cursor: pointer; box-shadow: 0 9px 20px #a1329c2b; transition: opacity .2s, transform .2s; }
.upload-footer button:hover:not(:disabled) { transform: translateY(-1px); }
.upload-footer button:disabled { color: #a9a3ac; background: #eeebef; box-shadow: none; cursor: not-allowed; }
.import-note { margin: 0; padding: 13px 18px; display: flex; align-items: flex-start; gap: 9px; border-top: 1px solid #f1edf2; color: #827a86; background: #fbfafb; }
.import-note > span { flex: 0 0 auto; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; color: #9a3aa9; background: #f1e4f4; font-family: Georgia, serif; font-size: 10px; font-weight: 700; }
.import-note p { margin: 2px 0 0; font-size: 9px; line-height: 1.5; }
.import-note b { color: #5d5561; }

.import-result { margin-bottom: 18px; padding: 18px; border: 1px solid #bfe7d5; border-radius: 16px; background: #f3fcf8; }
.import-result-heading { display: flex; align-items: center; gap: 11px; }
.import-result-heading > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #35a878; font-size: 14px; font-weight: 800; }
.import-result-heading b, .import-result-heading small { display: block; }
.import-result-heading b { font-size: 12px; }
.import-result-heading small { margin-top: 3px; color: #6e8078; font-size: 9px; overflow-wrap: anywhere; }
.import-result-stats { margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.import-result-stats > div { padding: 14px; border: 1px solid #d9eee4; border-radius: 12px; background: #fff; }
.import-result-stats small, .import-result-stats strong { display: block; }
.import-result-stats small { color: #728079; font-size: 9px; }
.import-result-stats strong { margin-top: 4px; font-size: 25px; letter-spacing: -.04em; }
.import-result-stats .new-count strong { color: #249066; }
.import-result > p { margin: 12px 0 0; color: #66776f; font-size: 9px; }
.excel-description { max-width: 920px; margin: -6px 0 18px; color: var(--muted); font-size: 11px; line-height: 1.65; }
.excel-template-button { width: fit-content; margin-bottom: 18px; padding: 11px 15px; display: inline-flex; align-items: center; border: 1px solid #dbcfe0; border-radius: 11px; color: #713087; background: #fbf7fc; font-size: 10px; font-weight: 800; }
.excel-result { margin-bottom: 18px; padding: 18px; border: 1px solid; border-radius: 16px; }
.excel-result.success { border-color: #bfe7d5; background: #f3fcf8; }
.excel-result.error { border-color: #ffd5e5; color: #8f244f; background: #fff0f5; }
.excel-result-title, .excel-result-file { display: block; }
.excel-result-title { font-size: 13px; }
.excel-result-file { margin-top: 4px; color: #6e8078; font-size: 9px; overflow-wrap: anywhere; }
.excel-result-stats { margin-top: 14px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.excel-result-stats > div { padding: 12px; border: 1px solid #d9eee4; border-radius: 11px; background: #fff; }
.excel-result-stats small, .excel-result-stats strong { display: block; }
.excel-result-stats small { color: #728079; font-size: 8px; }
.excel-result-stats strong { margin-top: 4px; font-size: 21px; }
.excel-result-warning, .excel-result-error { margin: 12px 0 0; font-size: 10px; line-height: 1.5; }
.excel-result-warning { padding: 10px 12px; border-radius: 9px; color: #765d21; background: #fff8de; }
.excel-detail-list { max-height: 420px; margin-top: 14px; overflow: auto; border: 1px solid #e8e2ea; border-radius: 11px; background: #fff; }
.excel-detail { padding: 10px 12px; display: grid; grid-template-columns: minmax(150px, .35fr) 1fr; gap: 12px; border-top: 1px solid #f0edf1; font-size: 9px; }
.excel-detail:first-child { border-top: 0; }
.excel-detail b { overflow-wrap: anywhere; }
.excel-detail span { color: #6f6872; }
.excel-detail.error b { color: #a7285a; }
.excel-detail.duplicate b { color: #8a641e; }
.excel-more-button { margin-top: 12px; padding: 9px 13px; border: 1px solid #d8cddb; border-radius: 9px; color: #713087; background: #fff; font-size: 9px; font-weight: 800; }
.excel-processing { padding: 13px 18px; display: flex; align-items: center; gap: 9px; border-top: 1px solid #f1edf2; color: #6e6472; font-size: 10px; }
.excel-processing[hidden] { display: none; }
.excel-processing > span { width: 15px; height: 15px; border: 2px solid #e3d5e7; border-top-color: #8f35a4; border-radius: 50%; animation: excel-spin .8s linear infinite; }
@keyframes excel-spin { to { transform: rotate(360deg); } }

.deleted-list { display: grid; gap: 10px; }
.deleted-card { padding: 14px; display: grid; grid-template-columns: minmax(190px, 1.3fr) minmax(110px, .55fr) minmax(150px, .9fr) minmax(170px, 1fr) auto; align-items: center; gap: 16px; border: 1px solid #ebe7ed; border-radius: 14px; background: #fff; }
.deleted-channel-name { min-width: 0; display: flex; align-items: center; gap: 11px; }
.deleted-avatar { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px; color: #827a85; background: #eeeaf0; font-size: 11px; font-weight: 900; }
.deleted-channel-name > div { min-width: 0; }
.deleted-channel-name b, .deleted-channel-name a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deleted-channel-name b { font-size: 11px; }
.deleted-channel-name a { margin-top: 5px; color: #9a399f; font-size: 9px; font-weight: 700; }
.deleted-detail small, .deleted-detail span, .deleted-detail code { display: block; }
.deleted-detail small { margin-bottom: 6px; color: #938c97; font-size: 8px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.deleted-detail span, .deleted-detail code { color: #605963; font-size: 9px; }
.deleted-detail code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.deleted-card form { margin: 0; }
.restore-channel-button { height: 38px; padding: 0 13px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 10px; color: #fff; background: #211a27; font-size: 9px; font-weight: 800; cursor: pointer; transition: background .18s, transform .18s; }
.restore-channel-button:hover { background: linear-gradient(100deg, var(--purple), var(--pink)); transform: translateY(-1px); }
.restore-channel-button span { font-size: 13px; }
.deleted-empty { min-height: 110px; padding: 22px; display: flex; align-items: center; justify-content: center; gap: 12px; border: 1px dashed #d7cfd9; border-radius: 14px; background: #fbfafb; text-align: left; }
.deleted-empty > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #48b987; font-size: 12px; }
.deleted-empty b, .deleted-empty small { display: block; }
.deleted-empty b { font-size: 11px; }
.deleted-empty small { margin-top: 4px; color: #918a94; font-size: 9px; }

.manual-profile-list { display: grid; gap: 10px; }
.manual-profile-card { padding: 14px; display: grid; grid-template-columns: minmax(210px, 1.35fr) minmax(150px, .8fr) minmax(130px, .65fr) auto; align-items: center; gap: 16px; border: 1px solid #ebe5ed; border-radius: 14px; background: linear-gradient(110deg, #fff, #fdfafd); }
.manual-profile-name { min-width: 0; display: flex; align-items: center; gap: 11px; }
.manual-profile-name > span { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px; color: #fff; background: linear-gradient(145deg, #7335ad, #c53587 68%, #e45b68); font-size: 11px; font-weight: 900; box-shadow: 0 7px 15px #9a378b20; }
.manual-profile-name > div { min-width: 0; }
.manual-profile-name b, .manual-profile-name a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.manual-profile-name b { font-size: 11px; }
.manual-profile-name a { margin-top: 5px; color: #9633a5; font-size: 9px; font-weight: 800; }
.manual-profile-issue small, .manual-profile-issue span, .manual-profile-source small, .manual-profile-source span { display: block; }
.manual-profile-issue small, .manual-profile-source small { margin-bottom: 6px; color: #938b97; font-size: 8px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.manual-profile-issue span { color: #5d5561; font-size: 9px; }
.manual-source-status { width: fit-content; padding: 6px 8px; border-radius: 8px; color: #7b4660; background: #fff0f5; font-size: 8px; font-weight: 800; }
.manual-source-status.pending, .manual-source-status.unknown { color: #82652e; background: #fff7df; }
.manual-source-status.partial { color: #843893; background: #f8ecfa; }
.manual-fill-button { min-height: 40px; padding: 0 13px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 10px; color: #fff; background: #211a27; font-size: 9px; font-weight: 800; cursor: pointer; transition: transform .18s, background .18s; }
.manual-fill-button:hover { background: linear-gradient(100deg, var(--purple), var(--pink)); transform: translateY(-1px); }
.manual-fill-button span { font-size: 13px; }
.manual-pagination { margin-top: 16px; padding-top: 15px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid #eee9f0; }
.manual-pagination > span { color: #8c8490; font-size: 9px; }

.channels-dashboard { width: min(1760px, calc(100% - 40px)); margin: 0 auto; padding: 48px 0 76px; }
.channels-heading { margin-bottom: 26px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.channels-heading h1 { margin: 0; font-size: clamp(34px, 5vw, 50px); letter-spacing: -.055em; }
.channels-heading > div:first-child > p:last-child { margin: 10px 0 0; color: var(--muted); font-size: 12px; }
.channels-count { min-width: 130px; padding: 13px 16px; display: flex; align-items: center; gap: 10px; border: 1px solid #e7e2e9; border-radius: 14px; background: #fff; }
.channels-count strong { font-size: 23px; letter-spacing: -.04em; }
.channels-count span { color: #837c87; font-size: 9px; line-height: 1.3; }
.channels-table-shell { overflow: hidden; border: 1px solid #e7e3e9; border-radius: 20px; background: #fff; box-shadow: 0 16px 42px #24172e0d; }
.channels-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.channels-table th { padding: 14px 20px; color: #8b8490; background: #fbfafc; font-size: 9px; font-weight: 800; letter-spacing: .07em; text-align: left; text-transform: uppercase; }
.channels-table th:first-child { width: 19%; }
.channels-table th:nth-child(2) { width: 14%; }
.channels-table th:nth-child(3) { width: 10%; }
.channels-table th:nth-child(4), .channels-table th:nth-child(5) { width: 8%; }
.channels-table th:nth-child(6) { width: 18%; }
.channels-table th:nth-child(7) { width: 23%; }
.channels-table td { padding: 14px 20px; border-top: 1px solid #f0edf1; color: #302936; font-size: 11px; vertical-align: middle; }
.channels-table tbody tr { transition: background .18s; }
.channels-table tbody tr:hover { background: #fdfafd; }
.channel-name-cell { min-width: 0; display: flex; align-items: center; gap: 11px; }
.channel-name-cell strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.channel-avatar { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px; color: #fff; background: linear-gradient(145deg, #7335ad, #c53587 68%, #e45b68); font-size: 11px; font-weight: 900; box-shadow: 0 7px 15px #9a378b20; }
.instagram-username { max-width: 100%; padding: 8px 10px; display: inline-flex; align-items: center; gap: 7px; overflow: hidden; border-radius: 9px; color: #9633a5; background: #f8edf9; font-size: 10px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; transition: color .18s, background .18s; }
.instagram-username:hover { color: #fff; background: linear-gradient(100deg, var(--purple), var(--pink)); }
.instagram-username > span { flex: 0 0 auto; font-size: 11px; }
.owner-id { padding: 7px 9px; display: inline-block; border: 1px solid #ece8ed; border-radius: 8px; color: #625b67; background: #faf9fa; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 10px; }
.channel-metric { color: #4e4653; font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.channel-actions { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.channel-actions form { margin: 0; }
.channel-action { height: 34px; padding: 0 9px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid #e7e2e8; border-radius: 9px; background: #fff; color: #716a75; font-size: 8px; font-weight: 800; white-space: nowrap; cursor: pointer; transition: border-color .18s, color .18s, background .18s, transform .18s; }
.channel-action:hover { transform: translateY(-1px); }
.channel-action > span { font-size: 12px; line-height: 1; }
.channel-action.favorite:hover, .channel-action.favorite.active { border-color: #ead080; color: #8b6600; background: #fff7db; }
.channel-action.processed:hover, .channel-action.processed.active { border-color: #9fd8be; color: #267151; background: #eaf8f2; }
.channel-action.hide { color: #bd456a; }
.channel-action.hide:hover { border-color: #e6a5b8; color: #fff; background: #cb4d71; }
.channels-pagination { padding: 15px 18px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid #ebe7ed; background: #fbfafc; }
.channels-pagination > p { margin: 0; color: #89828d; font-size: 9px; }
.channels-pagination > p b { color: #514955; }
.pagination-controls, .pagination-pages { display: flex; align-items: center; gap: 5px; }
.pagination-step, .pagination-page { height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #e5dfe7; border-radius: 9px; background: #fff; color: #5f5763; font-size: 9px; font-weight: 800; }
.pagination-step { padding: 0 10px; gap: 5px; }
.pagination-page { width: 32px; }
.pagination-step:hover, .pagination-page:hover { border-color: #caa6d3; color: #8e319e; }
.pagination-page.active { border-color: transparent; color: #fff; background: linear-gradient(135deg, var(--purple), var(--pink)); box-shadow: 0 6px 14px #9d378d26; }
.pagination-step.disabled { color: #c0bbc2; background: #f5f3f5; cursor: not-allowed; }
.pagination-ellipsis { width: 20px; color: #aaa3ad; font-size: 11px; text-align: center; }
.channels-empty { min-height: 300px; padding: 40px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px dashed #d4c3d9; border-radius: 20px; text-align: center; background: #fff; }
.channels-empty > span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; color: #fff; background: linear-gradient(135deg, var(--purple), var(--pink)); font-size: 22px; }
.channels-empty h2 { margin: 16px 0 0; font-size: 19px; }
.channels-empty p { margin: 8px 0 0; color: var(--muted); font-size: 11px; }
.channels-empty a { margin-top: 18px; padding: 11px 14px; border-radius: 10px; color: #fff; background: #211a27; font-size: 10px; font-weight: 800; }

.workspace {
  min-height: calc(100vh - 76px);
  padding: 40px 20px;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
}

.welcome-icon, .admin-badge { width: 72px; height: 72px; margin-bottom: 24px; display: grid; place-items: center; border-radius: 22px; color: #fff; background: linear-gradient(135deg, var(--purple), var(--pink) 62%, var(--orange)); font-size: 38px; }
.admin-badge { font-size: 26px; font-weight: 900; }
.eyebrow { margin: 0 0 10px; color: #a23bd4; font-size: 9px; font-weight: 800; letter-spacing: .17em; }
.workspace h1 { margin: 0; font-size: clamp(30px, 5vw, 48px); letter-spacing: -.055em; }
.workspace > p:not(.eyebrow) { max-width: 480px; margin: 12px 0 0; color: var(--muted); font-size: 13px; }
.admin-link { margin-top: 30px; padding: 13px 17px; border-radius: 11px; color: #fff; background: #201a27; font-size: 11px; font-weight: 700; }
.access-card { min-width: 280px; margin-top: 30px; padding: 16px 18px; display: flex; align-items: center; gap: 13px; text-align: left; border: 1px solid #dfd4e7; border-radius: 13px; background: #fff; }
.access-card > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #48b987; }
.access-card b, .access-card small { display: block; }
.access-card b { font-size: 11px; }
.access-card small { margin-top: 4px; color: #98919d; font-size: 9px; }

.signed-user { max-width: 190px; overflow: hidden; color: #77717f; font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.app-alert { margin: 0 0 14px; padding: 13px 16px; border: 1px solid; border-radius: 12px; font-size: 11px; }
.app-alert.success { border-color: #bfe7d5; color: #207453; background: #effbf6; }
.app-alert.error { border-color: #ffd5e5; color: #a7285a; background: #fff0f5; }
.app-alert.info { border-color: #d9c7ee; color: #713595; background: #f8f3fc; }

.manual-add-panel { margin-bottom: 18px; padding: 15px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 15px; border: 1px solid #e6deea; border-radius: 17px; background: #fff; box-shadow: 0 12px 30px #2b18320b; }
.manual-add-copy { display: flex; align-items: center; gap: 11px; }
.manual-add-copy > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: linear-gradient(135deg, var(--purple), var(--pink)); font-size: 18px; }
.manual-add-copy b, .manual-add-copy small { display: block; }
.manual-add-copy b { font-size: 11px; }
.manual-add-copy small { margin-top: 4px; color: var(--muted); font-size: 8px; white-space: nowrap; }
.manual-add-panel > input[type="text"] { min-width: 0; height: 43px; padding: 0 14px; border: 1px solid #ded8e1; border-radius: 11px; outline: 0; background: #faf9fb; color: var(--ink); font-size: 11px; }
.manual-add-panel > input[type="text"]:focus { border-color: #a33ab6; box-shadow: 0 0 0 3px #a33ab612; }
.manual-add-panel > button { height: 43px; padding: 0 17px; border: 0; border-radius: 11px; color: #fff; background: linear-gradient(100deg, var(--purple), var(--pink)); font-size: 10px; font-weight: 800; cursor: pointer; box-shadow: 0 9px 20px #a1329c24; }

.channel-search-panel { position: relative; z-index: 2; margin-bottom: 18px; padding: 15px; display: grid; grid-template-columns: 190px minmax(0, 1fr); align-items: center; gap: 14px; border: 1px solid #e5dce8; border-radius: 17px; background: linear-gradient(110deg, #fff, #fcf8fd); box-shadow: 0 12px 30px #2b18320b; }
.channel-search-heading { display: flex; align-items: center; gap: 11px; }
.channel-search-heading > span { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px; color: #fff; background: #211a27; font-size: 18px; font-weight: 900; }
.channel-search-heading b, .channel-search-heading small { display: block; }
.channel-search-heading b { font-size: 11px; }
.channel-search-heading small { margin-top: 4px; color: #918996; font-size: 8px; line-height: 1.35; }
.channel-search-field { position: relative; min-width: 0; }
.channel-search-field input { width: 100%; height: 46px; padding: 0 76px 0 15px; border: 1px solid #dcd4df; border-radius: 12px; outline: 0; color: #302936; background: #fff; font-size: 11px; box-shadow: inset 0 1px 2px #27172e08; -webkit-appearance: none; appearance: none; }
.channel-search-field input::-webkit-search-cancel-button { display: none; }
.channel-search-field input:focus { border-color: #a43ab6; box-shadow: 0 0 0 3px #a43ab611; }
.channel-search-clear { position: absolute; top: 7px; right: 7px; width: 32px; height: 32px; border: 0; border-radius: 9px; color: #827a86; background: #f1edf2; font-size: 17px; cursor: pointer; }
.channel-search-spinner { position: absolute; top: 16px; right: 49px; width: 14px; height: 14px; opacity: 0; border: 2px solid #e0d5e4; border-top-color: #a038ad; border-radius: 50%; pointer-events: none; }
.channel-search-panel.is-loading .channel-search-spinner { opacity: 1; animation: search-spin .7s linear infinite; }
.channel-search-feedback { grid-column: 2; margin: -7px 2px 0; color: #918996; font-size: 8px; }
@keyframes search-spin { to { transform: rotate(360deg); } }
.channel-search-results { grid-column: 1 / -1; overflow: hidden; border: 1px solid #e8e1ea; border-radius: 14px; background: #fff; box-shadow: 0 14px 32px #24172e10; }
.channel-search-summary { padding: 10px 13px; border-bottom: 1px solid #eee9f0; color: #8d8591; background: #fbfafc; font-size: 8px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.channel-search-list { max-height: 420px; overflow-y: auto; }
.channel-search-result { min-height: 66px; padding: 11px 13px; display: grid; grid-template-columns: 42px minmax(160px, 1.2fr) minmax(270px, 1.5fr) minmax(110px, .7fr) 24px; align-items: center; gap: 12px; border-top: 1px solid #f0edf1; color: #302936; transition: background .16s; }
.channel-search-result:first-child { border-top: 0; }
.channel-search-result:hover, .channel-search-result:focus-visible { outline: 0; background: #fdf8fe; }
.channel-search-avatar { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: linear-gradient(145deg, #7335ad, #c53587 68%, #e45b68); font-size: 12px; font-weight: 900; object-fit: cover; }
.channel-search-identity { min-width: 0; }
.channel-search-identity strong, .channel-search-identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.channel-search-identity strong { font-size: 11px; }
.channel-search-identity small { margin-top: 5px; color: #9633a5; font-size: 9px; font-weight: 800; }
.channel-search-details { min-width: 0; display: flex; align-items: center; gap: 6px; }
.channel-search-details span { min-width: 0; padding: 6px 8px; overflow: hidden; border-radius: 8px; color: #756d79; background: #f5f2f6; font-size: 8px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.channel-search-status { justify-self: start; padding: 6px 8px; border: 1px dashed #d9d1dc; border-radius: 8px; color: #8b838f; background: #fbfafc; font-size: 8px; font-weight: 800; white-space: nowrap; }
.channel-search-status.has-status { border-style: solid; border-color: #d8b9df; color: #843393; background: #f8eefb; }
.channel-search-arrow { color: #a33bab; font-size: 14px; font-weight: 900; }

.channel-filter-panel { margin-bottom: 18px; padding: 13px; display: flex; align-items: center; gap: 16px; border: 1px solid #e7e1e9; border-radius: 17px; background: #fff; box-shadow: 0 12px 30px #2b18320a; }
.channel-filter-copy { min-width: 170px; display: flex; align-items: center; gap: 10px; }
.channel-filter-copy > span { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 11px; color: #9634a4; background: #f7edf9; font-size: 17px; font-weight: 900; }
.channel-filter-copy b, .channel-filter-copy small { display: block; }
.channel-filter-copy b { font-size: 10px; }
.channel-filter-copy small { margin-top: 3px; color: #938b97; font-size: 7px; line-height: 1.3; }
.channel-filter-scroll { min-width: 0; flex: 1; padding-top: 1px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: stretch; gap: 7px; }
.channel-filter { min-height: 38px; padding: 0 9px; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; border: 1px solid #e7e2e8; border-radius: 11px; color: #6e6772; background: #fbfafc; font-size: 8px; font-weight: 800; white-space: nowrap; transition: border-color .18s, color .18s, background .18s, transform .18s; }
.channel-filter > span:not(.filter-dot) { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.channel-filter .filter-dot, .channel-filter b { flex-shrink: 0; }
.channel-filter b { margin-left: auto; }
.channel-filter:hover { border-color: #cfaed7; color: #873496; transform: translateY(-1px); }
.channel-filter b { min-width: 21px; height: 21px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; color: #7e7682; background: #eeeaf0; font-size: 8px; font-variant-numeric: tabular-nums; }
.filter-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #bab3bd; }
.channel-filter.status-1 .filter-dot { background: #a746ba; }
.channel-filter.status-2 .filter-dot { background: #4c7ad5; }
.channel-filter.status-3 .filter-dot { background: #e69a37; }
.channel-filter.status-4 .filter-dot { background: #37a879; }
.channel-filter.favorite .filter-dot { background: #d7a727; }
.channel-filter.active { border-color: transparent; color: #fff; background: linear-gradient(105deg, var(--purple), var(--pink)); box-shadow: 0 8px 18px #9f338f25; }
.channel-filter.active .filter-dot { background: #fff; box-shadow: 0 0 0 3px #ffffff2e; }
.channel-filter.active b { color: #fff; background: #ffffff25; }

.channel-avatar.image { object-fit: cover; }
.channel-name-cell > div { min-width: 0; }
.channel-name-cell strong, .channel-name-cell small { display: block; }
.data-state { margin-top: 4px; color: #a06b26; font-size: 8px; font-weight: 700; }
.data-state.error, .data-state.not_found, .data-state.partial { color: #b94a6b; }
.status-cell { text-align: left; }
.status-pill { max-width: 100%; padding: 7px 9px; overflow: hidden; border: 1px dashed #d8cedc; border-radius: 9px; background: #fbfafc; color: #847b89; font-size: 8px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.status-pill.has-status { border-style: solid; border-color: #d7b6df; color: #843393; background: #f9effb; }
.status-meta { max-width: 150px; margin-top: 5px; display: block; overflow: hidden; color: #938b97; font-size: 7px; line-height: 1.35; text-overflow: ellipsis; }
.status-comment { margin-top: 2px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-height: 1.4; max-height: 7em; overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere; }
.status-comment.is-expanded { display: block; max-height: none; -webkit-line-clamp: unset; }
.comment-toggle { margin-top: 5px; padding: 3px 0; border: 0; background: transparent; color: #873496; font: inherit; font-size: 9px; font-weight: 700; cursor: pointer; }
.comment-toggle:hover { text-decoration: underline; }
.comment-toggle[hidden] { display: none; }
.channel-action.workflow { color: #843393; }
.channel-action.workflow:hover { border-color: #d5aedf; background: #f9effb; }

.action-dialog { width: min(470px, calc(100% - 28px)); padding: 0; border: 0; border-radius: 20px; background: #fff; box-shadow: 0 25px 80px #160d1f45; }
.action-dialog::backdrop { background: #17101f99; backdrop-filter: blur(3px); }
.action-dialog form { margin: 0; }
.action-dialog header { padding: 22px 24px 18px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; border-bottom: 1px solid #eeeaf0; }
.action-dialog header small { color: #a13aac; font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.action-dialog h2 { margin: 5px 0 0; font-size: 21px; letter-spacing: -.04em; }
.dialog-close { width: 34px; height: 34px; border: 1px solid #e8e3ea; border-radius: 10px; color: #736b78; background: #fff; font-size: 19px; cursor: pointer; }
.dialog-fields { padding: 20px 24px; display: grid; gap: 16px; }
.dialog-fields label { color: #655d69; font-size: 9px; font-weight: 800; }
.dialog-fields label > span { color: #a39ca6; font-weight: 500; }
.dialog-fields input, .dialog-fields select, .dialog-fields textarea { width: 100%; margin-top: 8px; padding: 11px 12px; border: 1px solid #ddd7e0; border-radius: 11px; outline: 0; background: #fbfafc; color: var(--ink); font-size: 11px; resize: vertical; }
.dialog-fields input { height: 44px; }
.dialog-fields select { height: 44px; padding-top: 0; padding-bottom: 0; }
.dialog-fields input:focus, .dialog-fields select:focus, .dialog-fields textarea:focus { border-color: #a33ab6; box-shadow: 0 0 0 3px #a33ab612; }
.action-dialog footer { padding: 16px 24px 22px; display: flex; justify-content: flex-end; gap: 9px; }
.dialog-cancel, .dialog-submit { height: 42px; padding: 0 16px; border: 0; border-radius: 11px; font-size: 10px; font-weight: 800; cursor: pointer; }
.dialog-cancel { color: #6d6571; background: #f1eef2; }
.dialog-submit { color: #fff; background: linear-gradient(100deg, var(--purple), var(--pink)); }
.dialog-submit.danger { background: #c8476e; }
.dialog-note { margin: 18px 24px 0; padding: 11px 13px; border-radius: 10px; color: #8d5366; background: #fff1f5; font-size: 9px; line-height: 1.45; }
.manual-fill-dialog { width: min(620px, calc(100% - 28px)); }
.manual-fill-dialog header a { margin-top: 7px; display: inline-block; color: #9633a5; font-size: 9px; font-weight: 800; }
.manual-note { color: #6d5875; background: #faf3fc; }
.manual-fill-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.manual-fill-grid .wide { grid-column: 1 / -1; }

.scrappa-panel { padding: 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid #e7dfeb; border-radius: 17px; background: linear-gradient(135deg, #fcf8fd, #fff); }
.scrappa-panel.is-disabled { filter: grayscale(.15); }
.scrappa-copy { display: flex; align-items: center; gap: 12px; }
.scrappa-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: #fff; background: #221927; font-family: Georgia, serif; font-size: 18px; font-weight: 700; }
.scrappa-copy b, .scrappa-copy small { display: block; }
.scrappa-copy b { font-size: 12px; }
.scrappa-copy small { margin-top: 5px; color: #8b838f; font-size: 9px; }
.scrappa-actions { display: flex; gap: 8px; }
.scrappa-actions form { margin: 0; }
.refresh-button { min-height: 43px; padding: 0 13px; display: inline-flex; align-items: center; gap: 7px; border: 0; border-radius: 11px; color: #fff; background: linear-gradient(100deg, var(--purple), var(--pink)); font-size: 9px; font-weight: 800; cursor: pointer; }
.refresh-button.secondary { border: 1px solid #dbcde0; color: #71337d; background: #fff; }
.refresh-button small { min-width: 23px; padding: 4px 5px; border-radius: 7px; color: inherit; background: #ffffff26; font-size: 8px; }
.refresh-button.secondary small { background: #f3e8f5; }
.refresh-button:disabled { color: #aca5af; background: #ece9ed; cursor: not-allowed; }
.refresh-progress { margin-top: 14px; padding: 16px 18px; border: 1px solid #e8e2ea; border-radius: 15px; background: #fff; }
.refresh-progress-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.refresh-progress-head b, .refresh-progress-head small { display: block; }
.refresh-progress-head b { font-size: 11px; }
.refresh-progress-head small { margin-top: 4px; color: #8e8791; font-size: 8px; }
.job-status { padding: 6px 8px; border-radius: 999px; color: #793987; background: #f5eaf7; font-size: 8px; font-weight: 900; text-transform: uppercase; }
.progress-track { height: 7px; margin: 14px 0 10px; overflow: hidden; border-radius: 999px; background: #eeeaf0; }
.progress-track span { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, var(--purple), var(--pink)); transition: width .25s; }
.refresh-stats { display: flex; gap: 18px; color: #837b87; font-size: 8px; }
.refresh-stats b { color: #3c3440; }
.scrappa-note { margin: 12px 2px 0; color: #918994; font-size: 8px; }
.cancel-refresh-form { margin: 13px 0 0; padding-top: 12px; border-top: 1px solid #eeeaf0; text-align: right; }
.cancel-refresh-form button { padding: 0; border: 0; color: #b94368; background: transparent; font-size: 8px; font-weight: 800; cursor: pointer; }

@media (max-width: 900px) and (min-width: 601px) {
  .channels-table { min-width: 1280px; }
  .channels-table-shell { overflow-x: auto; }
  .admin-menu { grid-template-columns: 1fr; }
  .user-create-form, .user-edit-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .create-user-button, .save-user-button { width: 100%; }
  .scrappa-panel { align-items: stretch; flex-direction: column; }
  .deleted-card { grid-template-columns: 1fr 1fr; }
  .deleted-card form { justify-self: end; }
  .manual-profile-card { grid-template-columns: 1fr 1fr; }
  .manual-fill-button { justify-self: end; }
}

@media (max-width: 600px) {
  .auth-shell { min-height: 100vh; min-height: 100dvh; padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom)); background: #fff; }
  .login-card { min-height: 0; width: 100%; padding: 32px 28px; display: flex; flex-direction: column; justify-content: center; align-items: center; border: 0; border-radius: 0; box-shadow: none; }
  .brand-lockup { width: 230px; margin-bottom: 34px; }
  .brand-logo, .brand-accent { width: 190px; }
  .brand-product { font-size: 14px; }
  .login-card form { max-width: 420px; }
  .topbar { height: calc(66px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 16px 0; }
  .topbar-logo { width: 39px; height: 39px; }
  .topbar-brand b { font-size: 13px; }
  .topbar-brand small { margin-top: 4px; font-size: 6px; }
  .signed-user { display: none; }
  .top-action { min-height: 42px; padding: 0 12px; }
  .workspace { min-height: calc(100vh - 66px); }
  .channels-dashboard { width: calc(100% - 24px); padding: 28px 0 50px; }
  .channels-heading { align-items: flex-start; }
  .channels-heading h1 { font-size: 31px; }
  .channels-heading > div:first-child > p:last-child { font-size: 10px; }
  .channels-count { min-width: auto; padding: 10px 12px; }
  .channels-count strong { font-size: 20px; }
  .channels-count span { display: none; }
  .manual-add-panel { padding: 13px; grid-template-columns: 1fr; gap: 11px; }
  .manual-add-copy small { white-space: normal; }
  .manual-add-panel > button { width: 100%; }
  .channel-search-panel { padding: 13px; grid-template-columns: 1fr; gap: 11px; }
  .channel-search-feedback { grid-column: auto; margin-top: -3px; }
  .channel-search-results { grid-column: auto; }
  .channel-search-result { padding: 11px; grid-template-columns: 42px minmax(0, 1fr) 22px; gap: 10px; }
  .channel-search-details { grid-column: 2 / -1; flex-wrap: wrap; }
  .channel-search-status { grid-column: 2; }
  .channel-search-arrow { grid-column: 3; grid-row: 1; }
  .channel-search-list { max-height: 55vh; }
  .channel-filter-panel { padding: 13px 0 12px; align-items: stretch; flex-direction: column; gap: 11px; overflow: hidden; }
  .channel-filter-copy { min-width: 0; padding: 0 13px; }
  .channel-filter-scroll { padding: 1px 13px 3px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .channel-filter { min-height: 42px; padding: 0 11px; font-size: 9px; }
  .channels-table-shell { overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .channels-table, .channels-table tbody { min-width: 0; display: block; table-layout: auto; }
  .channels-table thead { display: none; }
  .channels-table tbody { display: grid; gap: 11px; }
  .channels-table tbody tr { display: block; overflow: hidden; border: 1px solid #e7e3e9; border-radius: 15px; background: #fff; box-shadow: 0 9px 25px #24172e0a; }
  .channels-table td { padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid #f0edf1; text-align: right; }
  .channels-table td:first-child { border-top: 0; }
  .channels-table td::before { content: attr(data-label); flex: 0 0 auto; color: #928b96; font-size: 8px; font-weight: 800; letter-spacing: .05em; text-align: left; text-transform: uppercase; }
  .channel-name-cell { min-width: 0; justify-content: flex-end; }
  .channel-name-cell strong { white-space: normal; text-align: right; }
  .instagram-username { min-width: 0; }
  .channels-table td.channel-actions-cell { display: block; text-align: left; }
  .channels-table td.channel-actions-cell::before { margin-bottom: 10px; display: block; }
  .channel-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .channel-actions form { min-width: 0; }
  .channel-action { width: 100%; min-height: 48px; height: auto; padding: 7px 4px; flex-direction: column; gap: 4px; border-radius: 11px; font-size: 9px; line-height: 1; }
  .channel-action > span[aria-hidden="true"] { font-size: 17px; }
  .channels-table td.status-cell { display: block; text-align: left; }
  .channels-table td.status-cell::before { margin-bottom: 9px; display: block; }
  .status-meta { max-width: none; margin-top: 7px; }
  .channels-pagination { padding: 14px 4px 0; align-items: stretch; flex-direction: column; border: 0; background: transparent; }
  .channels-pagination > p { text-align: center; }
  .pagination-controls { justify-content: space-between; }
  .pagination-step { padding: 0 9px; }
  .pagination-step span { display: none; }
  .pagination-pages { gap: 3px; }
  .pagination-page { width: 30px; }
  .pagination-ellipsis { width: 14px; }
  .account div { display: none; }
  .admin-dashboard { width: calc(100% - 24px); padding: 28px 0 50px; }
  .admin-heading { align-items: center; }
  .admin-heading h1 { font-size: 29px; }
  .admin-heading > div > p:last-child { font-size: 11px; }
  .admin-menu { grid-template-columns: 1fr; margin: 24px 0; }
  .admin-menu a { min-height: 100px; }
  .admin-section { padding: 18px; border-radius: 18px; }
  .section-heading { align-items: flex-start; }
  .user-create-form { grid-template-columns: 1fr; }
  .create-user-button { width: 100%; }
  .user-card-head { grid-template-columns: 38px 1fr; }
  .user-role { grid-column: 2; justify-self: start; }
  .user-edit-form { grid-template-columns: 1fr; }
  .save-user-button { width: 100%; }
  .upload-dropzone { min-height: 220px; margin: 12px; }
  .upload-footer { align-items: stretch; flex-direction: column; }
  .upload-footer button { width: 100%; }
  .upload-limits { justify-content: center; }
  .excel-result-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .excel-detail { grid-template-columns: 1fr; gap: 4px; }
  .deleted-card { padding: 14px; grid-template-columns: 1fr; gap: 13px; }
  .deleted-detail { padding-top: 11px; border-top: 1px solid #f0edf1; }
  .deleted-card form, .restore-channel-button { width: 100%; }
  .manual-profile-card { padding: 14px; grid-template-columns: 1fr; gap: 13px; }
  .manual-profile-issue, .manual-profile-source { padding-top: 11px; border-top: 1px solid #f0edf1; }
  .manual-fill-button { width: 100%; justify-self: stretch; min-height: 46px; }
  .manual-pagination { align-items: stretch; flex-direction: column; }
  .manual-pagination > span { text-align: center; }
  .manual-pagination .pagination-controls { justify-content: space-between; }
  .manual-fill-grid { grid-template-columns: 1fr; }
  .manual-fill-grid .wide { grid-column: auto; }
  .scrappa-panel { padding: 16px; align-items: stretch; flex-direction: column; }
  .scrappa-actions { display: grid; grid-template-columns: 1fr; }
  .refresh-button { width: 100%; justify-content: center; }
  .refresh-stats { gap: 8px; justify-content: space-between; flex-wrap: wrap; }
  .action-dialog footer { align-items: stretch; flex-direction: column-reverse; }
  .dialog-cancel, .dialog-submit { width: 100%; }
}

@media (max-width: 390px) {
  .topbar-brand { display: none; }
}

/* Blogger tags and sortable columns */
.channels-table th:first-child { width: 19%; }
.channels-table th:nth-child(2) { width: 14%; }
.channels-table th:nth-child(3) { width: 10%; }
.channels-table th:nth-child(4) { width: 16%; }
.channels-table th:nth-child(5) { width: 17%; }
.channels-table th:nth-child(6) { width: 24%; }
.sort-link { color: inherit; text-decoration: none; display: inline-flex; gap: 5px; align-items: center; }
.sort-link:hover, th[aria-sort="ascending"] .sort-link, th[aria-sort="descending"] .sort-link { color: #8b468b; }
.channel-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.tag-remove-form { display: inline-flex; align-items: center; gap: 4px; margin: 0; border-radius: 9px; background: #f5eaf6; color: #78447d; padding: 2px 6px; max-width: 100%; font-size: 10px; line-height: 1.3; }
.tag-remove-form span { overflow-wrap: anywhere; }
.tag-remove-form button { border: 0; background: transparent; color: inherit; cursor: pointer; padding: 2px; min-width: 20px; min-height: 22px; font-size: 14px; }
.tag-trigger { border: 1px dashed #cdbbd1; border-radius: 12px; color: #835689; background: #fff; padding: 6px 9px; cursor: pointer; font: inherit; }
.action-error { color: #b32636; font-size: 12px; padding: 8px 12px; }
button:disabled { opacity: .55; cursor: wait; }
.channel-filter.status-5 .filter-dot { background: #da9e27; }
.channel-filter.status-6 .filter-dot { background: #be5c69; }
.mobile-sort { display: none; }
#delete-dialog { max-width: 420px; }
@media (max-width: 700px) {
  .mobile-sort { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; font-size: 12px; }
  .mobile-sort select { border: 1px solid #e7e3e9; border-radius: 8px; background: #fff; padding: 8px; color: #594b60; }
  .channels-table td.tags-cell { display: block; text-align: left; }
  .tags-cell::before { display: block; margin-bottom: 8px; }
}

.tag-suggestions { max-height: 180px; overflow-y: auto; margin-top: -10px; padding: 4px; border: 1px solid #ddd7e0; border-radius: 11px; background: #fff; }
.tag-suggestions[hidden] { display: none; }
.tag-suggestion { display: block; width: 100%; padding: 10px 12px; border: 0; border-radius: 7px; background: transparent; color: #655d69; font: inherit; font-size: 12px; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.tag-suggestion:hover, .tag-suggestion[aria-selected="true"] { background: #f5eaf6; color: #873496; }

@media (min-width: 1440px) {
  .channels-table th:first-child { width: 19%; }
  .channels-table th:nth-child(2) { width: 15%; }
  .channels-table th:nth-child(3) { width: 9%; }
  .channels-table th:nth-child(4) { width: 22%; }
  .channels-table th:nth-child(5) { width: 13%; }
  .channels-table th:nth-child(6) { width: 22%; }
}

.excel-author-field { padding: 18px 24px; display: grid; gap: 8px; border-top: 1px solid #eeeaf0; }
.excel-author-field[hidden] { display: none; }
.excel-author-field label { font-size: 12px; font-weight: 700; color: #655d69; }
.excel-author-field select { width: 100%; max-width: 420px; padding: 11px 12px; border: 1px solid #ddd7e0; border-radius: 11px; background: #fbfafc; color: var(--ink); font: inherit; font-size: 12px; }
.excel-author-field small { color: #938b97; font-size: 11px; }

.excel-overwrite-field { padding: 16px 24px; border-top: 1px solid #eeeaf0; }
.excel-overwrite-field label { display: flex; gap: 8px; align-items: center; font-size: 12px; font-weight: 700; cursor: pointer; }
.excel-overwrite-field input { accent-color: #873496; }
.excel-overwrite-field small { display: block; margin-top: 8px; color: #938b97; font-size: 11px; line-height: 1.5; }

.manual-profile-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.manual-delete-button { min-height: 40px; padding: 0 13px; border: 1px solid #efd3dc; border-radius: 10px; color: #c83c69; background: #fff; font-size: 9px; font-weight: 800; cursor: pointer; }
.manual-delete-button:hover { background: #fff0f5; }
.manual-delete-button:disabled { opacity: .6; cursor: wait; }
.manual-delete-error { color: #c83c69; font-size: 12px; }