:root {
  color-scheme: dark;
  font-family: Inter, "Segoe UI", "Microsoft YaHei", sans-serif;
  background: #07111f;
  color: #e9f0fb;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 20% 10%, rgba(41, 121, 255, .2), transparent 38%),
    radial-gradient(circle at 90% 90%, rgba(0, 200, 180, .12), transparent 35%),
    #07111f;
}

.card {
  width: min(100%, 420px);
  padding: 38px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 18px;
  background: rgba(13, 27, 46, .92);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .4);
}

.brand {
  color: #6ea8ff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2em;
}

h1 { margin: 12px 0 6px; font-size: 30px; }
.subtitle { margin: 0 0 28px; color: #95a7bd; }

label {
  display: block;
  margin: 18px 0 8px;
  color: #c7d4e5;
  font-size: 14px;
  font-weight: 600;
}

input:not([type="hidden"]) {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid #314763;
  border-radius: 9px;
  outline: none;
  background: #091725;
  color: #fff;
  font-size: 16px;
}

input:focus { border-color: #6ea8ff; box-shadow: 0 0 0 3px rgba(110, 168, 255, .18); }

button {
  width: 100%;
  margin-top: 24px;
  padding: 13px;
  border: 0;
  border-radius: 9px;
  background: #3478f6;
  color: white;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

button:hover { background: #2468dc; }
button.secondary { background: #263b54; }

.alert {
  margin: 18px 0;
  padding: 12px;
  border: 1px solid #7e3541;
  border-radius: 8px;
  background: #3d2028;
  color: #ffc5cd;
  font-size: 14px;
}

.alert.success { border-color: #256f5a; background: #173b34; color: #a9f2d8; }
.alert.warning { border-color: #806126; background: #433616; color: #ffe2a0; }

.app-body {
  display: block;
  min-height: 100vh;
  padding: 0;
  place-items: normal;
  background: #07111f;
}

.topbar {
  height: 68px;
  padding: 0 max(24px, calc((100vw - 1180px) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  background: rgba(7, 17, 31, .9);
}

.logo { color: #6ea8ff; font-weight: 900; letter-spacing: .18em; text-decoration: none; }
.top-actions { display: flex; align-items: center; gap: 18px; }
.top-actions form, .profile-actions form { margin: 0; }
.account { color: #8fa3bb; font-size: 13px; }
.text-button { width: auto; margin: 0; padding: 8px 12px; background: transparent; color: #afbdd0; }

.workspace, .form-page { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 44px 0 70px; }
.page-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; }
.page-heading h1, .profile-header h1 { margin: 0 0 6px; }
.page-heading p, .profile-header p, .form-panel > p { margin: 0; color: #8fa3bb; }
.add-button {
  width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%;
  background: #3478f6; color: white; text-decoration: none; font-size: 32px; line-height: 1;
  box-shadow: 0 10px 30px rgba(52, 120, 246, .35);
}

.target-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; }
.target-card {
  min-height: 142px; padding: 22px 48px 22px 22px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; position: relative;
  border: 1px solid rgba(255,255,255,.09); border-radius: 15px; background: #0d1b2e;
  color: inherit; text-decoration: none; transition: transform .15s, border-color .15s;
}
.target-card:hover { transform: translateY(-2px); border-color: #3f6b9d; }
.target-card-main { min-width: 0; flex: 1 1 220px; display: flex; align-items: center; gap: 17px; color: inherit; text-decoration: none; }
.avatar { width: 66px; height: 66px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; background: #172c45; }
.avatar.placeholder { display: grid; place-items: center; color: #9bc1ff; font-weight: 800; font-size: 25px; }
.avatar.large { width: 92px; height: 92px; font-size: 34px; }
.target-main { min-width: 0; flex: 1; }
.target-main h2 { margin: 0 0 5px; font-size: 19px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.target-main p { margin: 0 0 14px; color: #7f93aa; font-size: 13px; }
.badges { display: flex; flex-wrap: wrap; gap: 8px; }
.platform { padding: 5px 9px; border-radius: 99px; font-size: 12px; background: #23334a; color: #b8c7d9; }
.platform.xhs { background: #43242d; color: #ffbec9; }
.platform.douyin { background: #263343; color: #bdebf3; }
.platform b { margin-left: 5px; padding: 1px 5px; border-radius: 10px; background: #e54f67; color: white; }
.platform.has-new { position: relative; padding-right: 7px; text-decoration: none; border: 1px solid currentColor; cursor: pointer; }
.platform.has-new:hover { filter: brightness(1.2); }
.platform.disabled { opacity: .58; cursor: default; }
.chevron { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: #60758d; font-size: 28px; text-decoration: none; }

.empty-state { padding: 80px 20px; text-align: center; border: 1px dashed #2b4058; border-radius: 16px; color: #8fa3bb; }
.empty-state h2 { color: #dbe6f5; margin-bottom: 8px; }
.empty-state p { margin: 0; }
.empty-plus { font-size: 48px; color: #4d7dba; }

.form-page { width: min(680px, calc(100% - 40px)); }
.back-link { display: inline-block; margin-bottom: 20px; color: #9db5d2; text-decoration: none; }
.form-panel { padding: 34px; border: 1px solid rgba(255,255,255,.09); border-radius: 16px; background: #0d1b2e; }
.form-panel h1 { margin: 0 0 8px; }
.form-panel small { display: block; margin-top: 7px; color: #7388a0; }

.profile-header { display: flex; align-items: center; gap: 22px; margin: 10px 0 34px; }
.profile-copy { flex: 1; min-width: 0; }
.profile-copy .crawl-error { margin-top: 8px; color: #ffacb7; font-size: 13px; overflow-wrap: anywhere; }
.profile-actions { display: flex; gap: 10px; }
.profile-actions button, .button-link { width: auto; margin: 0; padding: 11px 16px; }
.button-link { display: inline-flex; align-items: center; border-radius: 9px; color: white; text-decoration: none; font-weight: 700; }
.button-link.secondary { background: #263b54; }

.works-section { margin-top: 38px; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid #1f3147; margin-bottom: 16px; }
.section-heading h2 { margin: 0 0 13px; font-size: 21px; }
.section-heading span { color: #7388a0; font-size: 13px; }
.works-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.platform-hint { margin: 34px 0 8px; color: #71859c; font-size: 13px; }
.platform-section { padding: 20px; border: 1px solid #253b53; border-radius: 16px; background: rgba(13, 27, 46, .58); }
.platform-section.xhs { border-top: 3px solid #eb5b72; }
.platform-section.douyin { border-top: 3px solid #4fd4e7; }
.section-heading h2 { display: flex; align-items: center; gap: 9px; }
.platform-dot { width: 10px; height: 10px; border-radius: 50%; background: #7b91ab; }
.platform-section.xhs .platform-dot { background: #eb5b72; box-shadow: 0 0 12px rgba(235,91,114,.5); }
.platform-section.douyin .platform-dot { background: #4fd4e7; box-shadow: 0 0 12px rgba(79,212,231,.5); }
.works-slider {
  display: flex; gap: 16px; overflow-x: auto; padding: 2px 2px 15px;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-color: #3f5d80 #132338; scrollbar-width: thin;
}
.works-slider .work-card { flex: 0 0 clamp(210px, 24vw, 270px); scroll-snap-align: start; }
.works-slider::-webkit-scrollbar { height: 8px; }
.works-slider::-webkit-scrollbar-track { background: #132338; border-radius: 8px; }
.works-slider::-webkit-scrollbar-thumb { background: #3f5d80; border-radius: 8px; }
.work-card { overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: #0d1b2e; color: inherit; text-decoration: none; }
.work-card > img, .cover-placeholder { width: 100%; aspect-ratio: 4 / 3; display: block; object-fit: cover; background: #142940; }
.cover-placeholder { display: grid; place-items: center; color: #64809e; }
.work-copy { padding: 14px; }
.work-copy h3 { min-height: 42px; margin: 0 0 9px; font-size: 15px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.work-copy p, .work-copy span { margin: 0; color: #71859c; font-size: 12px; }
.work-copy span { display: block; margin-top: 6px; }
.empty-inline { padding: 30px; border: 1px dashed #293e56; border-radius: 10px; color: #71859c; text-align: center; }

.danger-zone { margin-top: 60px; padding: 18px; border: 1px solid #542f37; border-radius: 12px; color: #e6abb5; }
.danger-zone summary { cursor: pointer; font-weight: 700; }
.danger-zone p { color: #9c7d84; }
button.danger { width: auto; margin: 0; background: #a93447; }

.refresh-button:disabled { cursor: wait; opacity: .7; }
.refresh-progress { margin: 18px 0 28px; padding: 17px 19px; border: 1px solid #31557e; border-radius: 12px; background: #10243c; }
.refresh-progress.completed { border-color: #286953; background: #123329; }
.refresh-progress.failed { border-color: #7e3541; background: #3d2028; }
.progress-copy { display: flex; justify-content: space-between; gap: 14px; margin-bottom: 11px; }
.progress-copy span { color: #91a7c0; font-size: 13px; }
.progress-track { width: 100%; height: 7px; display: block; border: 0; border-radius: 8px; overflow: hidden; background: #1a314b; }
.progress-track::-webkit-progress-bar { background: #1a314b; }
.progress-track::-webkit-progress-value { background: #4a8eff; border-radius: 8px; transition: width .25s; }
.progress-track::-moz-progress-bar { background: #4a8eff; border-radius: 8px; }
.progress-error { margin: 10px 0 0; color: #ffb4bf; font-size: 13px; }

.logs-panel { margin-top: 48px; padding-top: 30px; border-top: 1px solid #1f3147; }
.logs-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 14px; }
.logs-heading h2 { margin: 0 0 5px; font-size: 20px; }
.logs-heading p { margin: 0; color: #71859c; font-size: 13px; }
.log-list { display: grid; gap: 9px; }
.log-row { display: flex; align-items: center; gap: 13px; padding: 13px 15px; border: 1px solid #20344b; border-radius: 10px; background: #0b192a; }
.log-status { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: #3f8d73; }
.log-row.running .log-status { background: #4a8eff; box-shadow: 0 0 10px #4a8eff; }
.log-row.failed .log-status { background: #de566b; }
.log-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.log-main strong { font-size: 13px; color: #cedaeb; }
.log-main span { font-size: 12px; color: #71859c; }
.log-results { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; font-size: 12px; }
.xhs-text { color: #ff9aaa; }
.douyin-text { color: #81dfeb; }
.error-text { color: #ffbd72; }
.log-details { width: 100%; margin-left: 22px; border-top: 1px solid #1d3249; padding-top: 9px; }
.log-details summary { width: max-content; color: #8299b4; font-size: 12px; cursor: pointer; }
.log-detail-list { display: grid; gap: 7px; margin-top: 9px; }
.log-detail-item { display: grid; grid-template-columns: minmax(90px, 1fr) auto minmax(120px, 2fr); align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px; background: #102136; font-size: 12px; }
.log-detail-item.failed { background: #351f27; }
.detail-platform { padding: 3px 7px; border-radius: 20px; color: #b7c7da; background: #26374c; }
.detail-platform.xhs { color: #ffabb8; background: #43242d; }
.detail-platform.douyin { color: #8be1ec; background: #263b49; }
.detail-new { color: #8de1c2; }
.detail-none { color: #71859c; }
.detail-error { color: #ffb1bd; overflow-wrap: anywhere; }

.new-works-page { max-width: 1180px; }
.new-works-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin: 8px 0 10px; padding: 22px; border-left: 4px solid #7b91ab; border-radius: 10px; background: #0d1b2e; }
.new-works-heading.xhs { border-color: #eb5b72; }
.new-works-heading.douyin { border-color: #4fd4e7; }
.new-works-heading span { color: #8fa3bb; font-size: 13px; }
.new-works-heading h1 { margin: 5px 0 0; font-size: 27px; }
.new-works-heading strong { color: #a9bad0; white-space: nowrap; }
.read-hint { margin: 0 0 24px; color: #71859c; font-size: 13px; }
.new-works-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }

@media (max-width: 680px) {
  .workspace { width: min(100% - 28px, 1180px); padding-top: 28px; }
  .target-grid { grid-template-columns: 1fr; }
  .target-card .badges { margin-left: 83px; }
  .profile-header { align-items: flex-start; flex-wrap: wrap; }
  .profile-copy { flex: 1 1 calc(100% - 120px); }
  .profile-actions { width: 100%; }
  .profile-actions > * { flex: 1; }
  .profile-actions button, .profile-actions .button-link { width: 100%; justify-content: center; }
  .form-panel { padding: 24px 20px; }
  .platform-section { padding: 15px 12px; margin-left: -4px; margin-right: -4px; }
  .works-slider .work-card { flex-basis: min(76vw, 250px); }
  .log-row { align-items: flex-start; flex-wrap: wrap; }
  .log-results { width: 100%; justify-content: flex-start; padding-left: 22px; }
  .log-detail-item { grid-template-columns: 1fr auto; }
  .log-detail-item > :last-child { grid-column: 1 / -1; }
  .new-works-heading { align-items: flex-start; }
}