f0ckm-uploader/browser-extension/popup/popup.css

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html, body {
  width: 340px;
  min-width: 340px;
  min-height: 240px;
  margin: 0;
  padding: 0;
  background-color: #121318;
  color: #e2e4ec;
  font-size: 13px;
  user-select: none;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: #191b22;
  border-bottom: 1px solid #282a36;
}

.icon-btn {
  background: transparent;
  border: none;
  font-size: 15px;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: background 0.15s ease;
}

.icon-btn:hover {
  background: #282c3f;
}

.api-config-card {
  background: #191b26;
  border: 1px solid #0066ff44;
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.api-config-card.hidden {
  display: none;
}

.config-header {
  font-size: 11px;
  font-weight: 700;
  color: #4da6ff;
  margin-bottom: 2px;
}

.api-config-card .field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.api-config-card label {
  font-size: 10px;
  color: #a0a6b8;
}

.api-config-card input {
  background: #12131a;
  border: 1px solid #282c3f;
  color: #ffffff;
  padding: 6px 8px;
  border-radius: 5px;
  font-size: 11px;
}

.config-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.popup-toast {
  font-size: 10px;
  margin-left: 4px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand-icon {
  width: 22px;
  height: 22px;
}

.brand-name {
  font-weight: 700;
  font-size: 15px;
  color: #ffffff;
  letter-spacing: 0.4px;
}

.mode-selector {
  display: flex;
  background: #181920;
  padding: 4px;
  margin: 10px 14px 4px 14px;
  border-radius: 8px;
  border: 1px solid #242634;
}

.mode-option {
  flex: 1;
  text-align: center;
  cursor: pointer;
}

.mode-option input {
  display: none;
}

.mode-pill {
  display: block;
  padding: 6px 4px;
  font-size: 11px;
  font-weight: 600;
  color: #8c92a4;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.mode-option input:checked + .mode-pill {
  background: #2b2f42;
  color: #4da6ff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.content {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.active-tab-card {
  background: #191b26;
  border: 1px solid #282c3f;
  border-radius: 9px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.site-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: #0066ff22;
  color: #4da6ff;
  border: 1px solid #0066ff55;
  white-space: nowrap;
}

.site-badge.youtube {
  background: #ff000022;
  color: #ff4d4d;
  border-color: #ff000055;
}

.tab-title {
  font-size: 11px;
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tab-url-preview {
  font-size: 10px;
  color: #727a90;
  font-family: monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: #111218;
  padding: 4px 6px;
  border-radius: 4px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 9px 12px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.15s ease;
}

.btn-lg {
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 700;
}

.btn-primary {
  background: linear-gradient(135deg, #0066ff, #0044cc);
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 102, 255, 0.3);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #1a75ff, #0052e6);
  box-shadow: 0 4px 14px rgba(0, 102, 255, 0.5);
}

.btn-primary.youtube-style {
  background: linear-gradient(135deg, #e60000, #b30000);
  box-shadow: 0 2px 10px rgba(230, 0, 0, 0.3);
}

.btn-primary.youtube-style:hover {
  background: linear-gradient(135deg, #ff1a1a, #cc0000);
  box-shadow: 0 4px 14px rgba(230, 0, 0, 0.5);
}

.btn-accent {
  background: #252836;
  color: #4da6ff;
  border: 1px solid #363b50;
}

.btn-accent:hover {
  background: #2e3346;
  color: #80c0ff;
}

.btn-sm {
  padding: 5px 8px;
  font-size: 11px;
  width: auto;
  background: #0066ff;
  color: #ffffff;
}

.divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: #555c70;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin: 2px 0;
}

.divider::before, .divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #222532;
}

.divider span {
  padding: 0 8px;
}

.input-group {
  display: flex;
  gap: 6px;
}

.input-group input {
  flex: 1;
  background: #181a24;
  border: 1px solid #282c3d;
  color: #ffffff;
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 11px;
  outline: none;
  transition: border-color 0.2s ease;
}

.input-group input:focus {
  border-color: #0066ff;
}

.status-card {
  background: #181a24;
  border: 1px solid #252838;
  border-radius: 7px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  text-align: center;
}

.status-card.hidden {
  display: none;
}

.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid #2e3448;
  border-top-color: #0066ff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.status-text {
  font-size: 11px;
  color: #a0a6b8;
  word-break: break-word;
}

.result-container {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.result-container.hidden {
  display: none;
}

.result-link {
  flex: 1;
  font-size: 11px;
  color: #4da6ff;
  text-decoration: underline;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
  display: block;
}

.result-link:hover {
  color: #80c0ff;
}

.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 14px;
  background: #15161d;
  border-top: 1px solid #20222d;
  font-size: 10px;
  color: #5b6276;
}