/**
 * Studio — warstwa końcowa (ładowana PO wizard.css / editor.css).
 * Tokeny --studio-* są zdefiniowane w app-skin.css (:root).
 */

body.app-skin {
  font-family: var(--studio-font-sans);
  -webkit-font-smoothing: antialiased;
}

body.app-skin h1 {
  font-family: var(--studio-font-display), var(--studio-font-sans);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--studio-ink);
}

body.app-skin .panel-header h2,
body.app-skin .section-head h2 {
  font-family: var(--studio-font-display), var(--studio-font-sans);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  color: var(--studio-ink);
}

body.app-skin .eyebrow {
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--studio-body);
}

body.app-skin .panel {
  background: var(--studio-surface);
  border: 1px solid var(--studio-border-strong);
  border-radius: var(--studio-radius-lg);
  box-shadow: var(--studio-shadow-panel);
}

body.app-skin .panel-header {
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(15, 20, 25, 0.06);
  margin-bottom: 16px;
}

body.app-skin .editor-ingress {
  border: 1px solid rgba(19, 78, 74, 0.16);
  box-shadow: var(--studio-shadow-panel), 0 0 0 1px rgba(255, 255, 255, 0.65) inset;
}

body.app-skin .editor-ingress::before {
  width: 4px;
  background: linear-gradient(180deg, var(--studio-accent) 0%, var(--studio-warm) 100%);
  opacity: 1;
}

body.app-skin input[type="text"],
body.app-skin input[type="url"],
body.app-skin input[type="search"],
body.app-skin input[type="email"],
body.app-skin input[type="number"],
body.app-skin select,
body.app-skin textarea {
  border-radius: var(--studio-radius-sm);
  border-color: var(--studio-border-strong);
  background: #fdfdfc;
}

body.app-skin label span,
body.app-skin .form-row label {
  color: var(--studio-body);
  font-weight: 500;
  font-size: 0.8125rem;
}

body.app-skin button:not(.primary):not(.success):not(.danger):not(.ghost) {
  border-color: var(--studio-border-strong);
  background: var(--studio-surface);
  color: var(--studio-ink);
  border-radius: var(--studio-radius-sm);
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(15, 20, 25, 0.04);
}

body.app-skin button:not(.primary):not(.success):not(.danger):not(.ghost):hover {
  background: var(--studio-paper);
  border-color: rgba(15, 20, 25, 0.12);
}

body.app-skin button.ghost {
  border-color: transparent;
  color: var(--studio-accent);
  font-weight: 500;
}

body.app-skin button.ghost:hover {
  background: var(--studio-accent-soft);
  color: var(--studio-accent-deep);
}

/* Link w stylu przycisku „ghost” (bez zagnieżdżania <button> w <a>) */
body.app-skin a.ghost-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: var(--studio-radius-sm);
  font: inherit;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--studio-accent);
  cursor: pointer;
  box-sizing: border-box;
}

body.app-skin a.ghost-link:hover {
  background: var(--studio-accent-soft);
  color: var(--studio-accent-deep);
}

body.app-skin button.success {
  border-radius: var(--studio-radius-sm);
  font-weight: 600;
}

body.app-skin button.danger {
  background: var(--studio-surface);
  color: #9f1239;
  border-color: rgba(190, 24, 93, 0.22);
  border-radius: var(--studio-radius-sm);
}

body.app-skin button.danger:hover {
  background: #fff1f2;
}

body.app-skin a {
  color: var(--studio-accent);
  text-decoration-color: rgba(19, 78, 74, 0.35);
  text-underline-offset: 3px;
}

body.app-skin a:hover {
  color: var(--studio-accent-deep);
}

body.app-skin .search-result-card {
  border-radius: var(--studio-radius-md);
  border-color: var(--studio-border-strong);
  box-shadow: var(--studio-shadow-soft);
}

body.app-skin .search-result-card .title {
  font-family: var(--studio-font-display), var(--studio-font-sans);
  font-weight: 600;
  color: var(--studio-ink);
}

body.app-skin .draft-card {
  border-radius: var(--studio-radius-md);
  border-color: var(--studio-border-strong);
  box-shadow: var(--studio-shadow-soft);
}

body.app-skin .draft-card-title {
  font-family: var(--studio-font-display), var(--studio-font-sans);
}

body.app-skin .chip {
  background: var(--studio-paper);
  border-color: var(--studio-border-strong);
  color: var(--studio-body);
}

body.app-skin .chip.chip-channel {
  background: rgba(19, 78, 74, 0.06);
  border-color: rgba(19, 78, 74, 0.2);
  color: var(--studio-accent-deep);
}

body.app-skin .chip.chip-tag {
  background: rgba(19, 78, 74, 0.08);
  border-color: rgba(19, 78, 74, 0.18);
  color: var(--studio-accent-deep);
}

body.app-skin .chip.chip-state {
  background: rgba(138, 115, 85, 0.12);
  border-color: rgba(138, 115, 85, 0.22);
  color: #5c4d3a;
}

body.app-skin .empty-state {
  background: var(--studio-paper);
  border: 1px solid var(--studio-border-strong);
  color: var(--studio-body);
  border-radius: var(--studio-radius-md);
}

body.app-skin .drafts-toolbar .filter-group {
  background: var(--studio-paper);
  border-color: var(--studio-border-strong);
  padding: 4px;
  gap: 4px;
}

body.app-skin .drafts-toolbar .filter-button {
  font-weight: 500;
  color: var(--studio-body);
}

body.app-skin .drafts-toolbar .filter-button.is-active {
  background: var(--studio-ink);
  color: #fff;
  box-shadow: 0 2px 8px rgba(15, 20, 25, 0.15);
}

body.app-skin .modal-backdrop {
  background: rgba(15, 20, 25, 0.52);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

body.app-skin .modal {
  border-radius: var(--studio-radius-lg);
  border: 1px solid var(--studio-border-strong);
  box-shadow: var(--studio-shadow-elevated);
}

body.app-skin .modal h3 {
  font-family: var(--studio-font-display), var(--studio-font-sans);
  color: var(--studio-ink);
}

body.app-skin .modal p {
  color: var(--studio-body);
}

body.app-skin .toast {
  border-radius: var(--studio-radius-sm);
  box-shadow: var(--studio-shadow-elevated);
}

body.app-skin .toast.toast-success {
  background: linear-gradient(135deg, var(--studio-accent) 0%, var(--studio-accent-deep) 100%);
}

body.app-skin .toast.toast-error {
  background: #881337;
}

body.app-skin .toast.toast-info {
  background: #334155;
}

body.app-skin .option-tile:hover {
  border-color: rgba(19, 78, 74, 0.35);
}

body.app-skin .option-tile.is-selected {
  background: var(--studio-accent-soft);
  border-color: var(--studio-accent);
  box-shadow: 0 0 0 3px rgba(19, 78, 74, 0.12);
}

body.app-skin .option-tile input {
  accent-color: var(--studio-accent);
}

body.app-skin .tag-chip.is-selected {
  background: var(--studio-accent-soft);
  border-color: var(--studio-accent);
  color: var(--studio-accent-deep);
}

body.app-skin .tag-chip:hover {
  border-color: var(--studio-accent);
}

body.app-skin .wizard-step {
  border-radius: var(--studio-radius-sm);
  border-color: var(--studio-border-strong);
  background: var(--studio-surface);
}

body.app-skin .wizard-step.is-done {
  background: rgba(19, 78, 74, 0.06);
  border-color: rgba(19, 78, 74, 0.22);
  color: var(--studio-accent-deep);
}

body.app-skin .wizard-step.is-done .step-num {
  color: var(--studio-accent);
}

body.app-skin.editor-skin .section-head {
  border-bottom: 1px solid rgba(15, 20, 25, 0.06);
  padding-bottom: 10px;
  margin-bottom: 16px;
}

body.app-skin .page {
  max-width: 1180px;
  padding: clamp(16px, 3vw, 28px);
}

body.app-skin.editor-skin .page {
  max-width: 1420px;
}

body.app-skin .wizard-header .back-link {
  font-weight: 600;
}

body.app-skin .wizard-header .draft-id {
  color: var(--studio-body);
}

body.app-skin .search-bar input::placeholder {
  color: #94a3b8;
}

/* Bulk panel */
body.app-skin .bulk-import-panel textarea {
  min-height: 120px;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 12px;
}

body.app-skin .bulk-import-status {
  font-size: 13px;
  color: var(--studio-body);
  margin-top: 10px;
  line-height: 1.5;
}

body.app-skin .bulk-progress-wrap {
  margin-top: 10px;
}

body.app-skin .bulk-progress-bar {
  height: 8px;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
}

body.app-skin .bulk-progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #0f766e, #14b8a6);
  transition: width 0.35s ease;
}

body.app-skin .bulk-job-log {
  margin: 10px 0 0;
  padding-left: 1.2rem;
  font-size: 12px;
  color: #9a3412;
  line-height: 1.45;
}

body.app-skin .bulk-import-actions button.success {
  font-weight: 600;
}

body.app-skin .pricing-hint-banner {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--studio-radius-sm);
  background: rgba(19, 78, 74, 0.06);
  border: 1px solid rgba(19, 78, 74, 0.15);
  font-size: 13px;
  color: var(--studio-body);
}