/* ── Web 2.0 Auto Publisher (User Edition) — scoped to .webpub-app ────────── */
/* All rules prefixed so they never bleed into the WordPress theme.           */

.webpub-app {
    --wp-bg:      #0d0d17;
    --wp-card:    #1a1a2e;
    --wp-surface: #13131f;
    --wp-border:  #2e2e4a;
    --wp-text:    #e2e2f0;
    --wp-muted:   #7878a0;
    --wp-accent:  #7c6ef5;
    --wp-hover:   #9a8ff7;
    --wp-success: #4caf80;
    --wp-error:   #e05c5c;
    --wp-radius:  10px;

    background: var(--wp-bg);
    color: var(--wp-text);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 1.55;
    max-width: 900px;
    margin: 0 auto;
    padding: 24px 0 60px;
    box-sizing: border-box;
}

.webpub-app *, .webpub-app *::before, .webpub-app *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.webpub-app .webpub-card {
    background: var(--wp-card);
    border: 1px solid var(--wp-border);
    border-radius: var(--wp-radius);
    padding: 20px;
    margin-bottom: 14px;
}

/* ── Labels ──────────────────────────────────────────────────────────────── */
.webpub-app .webpub-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--wp-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}
.webpub-app .webpub-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.webpub-app .webpub-label-row .webpub-label { margin-bottom: 0; }
.webpub-app .webpub-label-actions { display: flex; gap: 8px; }
.webpub-app .webpub-req  { color: var(--wp-error); }
.webpub-app .webpub-hint { font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 0.75rem; opacity: 0.7; }

/* ── Inputs ──────────────────────────────────────────────────────────────── */
.webpub-app .webpub-input {
    width: 100%;
    background: var(--wp-surface) !important;
    border: 1px solid var(--wp-border) !important;
    border-radius: 7px !important;
    color: var(--wp-text) !important;
    font-family: inherit;
    font-size: 15px;
    padding: 9px 12px !important;
    transition: border-color 0.2s;
    outline: none;
    box-shadow: none !important;
}
.webpub-app .webpub-input:focus {
    border-color: var(--wp-accent) !important;
    box-shadow: 0 0 0 2px rgba(124,110,245,0.18) !important;
}
.webpub-app .webpub-input::placeholder { color: var(--wp-muted); opacity: 0.55; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.webpub-app button,
.webpub-app .webpub-btn-sm {
    background: var(--wp-accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    padding: 7px 14px;
    cursor: pointer;
    transition: background 0.18s;
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.webpub-app button:hover,
.webpub-app .webpub-btn-sm:hover { background: var(--wp-hover); }
.webpub-app button:disabled { background: var(--wp-border); color: var(--wp-muted); cursor: not-allowed; }

/* ── Editor card ─────────────────────────────────────────────────────────── */
.webpub-app .webpub-editor-card { padding-bottom: 14px; }
.webpub-app .webpub-wordcount {
    text-align: right;
    font-size: 12px;
    color: var(--wp-muted);
    margin-top: 6px;
}

/* ── Quill dark theme overrides ─────────────────────────────────────────── */
.webpub-app .ql-toolbar.ql-snow {
    background: var(--wp-surface);
    border: 1px solid var(--wp-border) !important;
    border-bottom: none !important;
    border-radius: 8px 8px 0 0;
}
.webpub-app .ql-container.ql-snow {
    background: var(--wp-surface);
    border: 1px solid var(--wp-border) !important;
    border-top: none !important;
    border-radius: 0 0 8px 8px;
    min-height: 280px;
}
.webpub-app .ql-editor {
    color: var(--wp-text);
    font-size: 15px;
    line-height: 1.65;
    min-height: 260px;
    padding: 14px 16px;
}
.webpub-app .ql-editor.ql-blank::before {
    color: var(--wp-muted);
    font-style: italic;
    opacity: 0.6;
}
.webpub-app .ql-snow .ql-stroke { stroke: var(--wp-muted) !important; }
.webpub-app .ql-snow .ql-fill   { fill:   var(--wp-muted) !important; }
.webpub-app .ql-snow .ql-picker  { color:  var(--wp-muted) !important; }
.webpub-app .ql-snow .ql-picker-options {
    background: var(--wp-card) !important;
    border: 1px solid var(--wp-border) !important;
}
.webpub-app .ql-snow .ql-picker-item { color: var(--wp-text) !important; }
.webpub-app .ql-toolbar.ql-snow button:hover .ql-stroke,
.webpub-app .ql-toolbar.ql-snow button.ql-active .ql-stroke { stroke: var(--wp-accent) !important; }
.webpub-app .ql-toolbar.ql-snow button:hover .ql-fill,
.webpub-app .ql-toolbar.ql-snow button.ql-active .ql-fill   { fill:  var(--wp-accent) !important; }
.webpub-app .ql-editor pre.ql-syntax {
    background: #0d0d17 !important;
    color: #a8d0ff !important;
    border-radius: 6px;
    padding: 12px;
    font-size: 13px;
}
.webpub-app .ql-editor blockquote {
    border-left: 3px solid var(--wp-accent);
    padding-left: 12px;
    color: var(--wp-muted);
}

/* ── Platform grid ───────────────────────────────────────────────────────── */
.webpub-app .webpub-platform-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.webpub-app .webpub-platform-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 14px 20px;
    background: var(--wp-surface);
    border: 2px solid var(--wp-border);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.18s, background 0.18s;
    user-select: none;
    flex: 1;
    min-width: 90px;
    text-align: center;
}
.webpub-app .webpub-platform-card input[type="checkbox"] { display: none; }
.webpub-app .webpub-plat-icon { font-size: 1.4rem; }
.webpub-app .webpub-plat-name { font-size: 0.8rem; color: var(--wp-muted); transition: color 0.18s; }

.webpub-app .webpub-platform-card:has(input:checked) {
    border-color: var(--wp-accent);
    background: rgba(124,110,245,0.09);
}
.webpub-app .webpub-platform-card:has(input:checked) .webpub-plat-name {
    color: var(--wp-accent);
}

/* ── Notice / info box ───────────────────────────────────────────────────── */
.webpub-app .webpub-notice {
    font-size: 0.78rem;
    color: var(--wp-muted);
    padding: 8px 12px;
    background: rgba(124, 110, 245, 0.06);
    border: 1px solid rgba(124, 110, 245, 0.18);
    border-radius: 6px;
    line-height: 1.5;
}

/* ── Credentials accordion ───────────────────────────────────────────────── */
.webpub-app .webpub-cred-card { padding-bottom: 16px; }

#webpub-cred-section {
    display: none;
    margin-top: 14px;
    flex-direction: column;
    gap: 6px;
}
#webpub-cred-section.open {
    display: flex;
}

.webpub-app .webpub-cred-platform {
    border: 1px solid var(--wp-border);
    border-radius: 8px;
    overflow: hidden;
}

.webpub-app .webpub-cred-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--wp-surface);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--wp-text);
    user-select: none;
    transition: background 0.15s;
    border: none;
    width: 100%;
    text-align: left;
}
.webpub-app .webpub-cred-header:hover { background: rgba(124,110,245,0.07); }

.webpub-app .webpub-cred-right {
    display: flex;
    align-items: center;
    gap: 8px;
}
.webpub-app .webpub-cred-status {
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--wp-success);
    white-space: nowrap;
}
.webpub-app .webpub-cred-chevron {
    font-size: 0.75rem;
    color: var(--wp-muted);
    transition: transform 0.2s;
    display: inline-block;
}
.webpub-app .webpub-cred-platform.open .webpub-cred-chevron {
    transform: rotate(90deg);
}

.webpub-app .webpub-cred-body {
    display: none;
    padding: 14px;
    background: var(--wp-card);
    border-top: 1px solid var(--wp-border);
    flex-direction: column;
    gap: 10px;
}
.webpub-app .webpub-cred-platform.open .webpub-cred-body {
    display: flex;
}

.webpub-app .webpub-cred-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.webpub-app .webpub-cred-row > label {
    font-size: 0.72rem;
    color: var(--wp-muted);
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin-bottom: 0;
}
.webpub-app .webpub-cred-input {
    font-size: 13px !important;
    padding: 7px 10px !important;
}
.webpub-app .webpub-cred-tip {
    font-size: 0.78rem;
    color: var(--wp-muted);
    font-style: italic;
    padding: 6px 0 2px;
}

/* ── Publish button ──────────────────────────────────────────────────────── */
.webpub-app .webpub-publish-row {
    display: flex;
    justify-content: center;
    margin: 6px 0 14px;
}
.webpub-app .webpub-publish-btn {
    font-size: 1rem !important;
    font-weight: 600 !important;
    padding: 14px 52px !important;
    border-radius: 50px !important;
    letter-spacing: 0.02em;
}

/* ── Results ─────────────────────────────────────────────────────────────── */
.webpub-app .webpub-summary {
    padding: 12px 16px;
    background: var(--wp-surface);
    border: 1px solid var(--wp-border);
    border-radius: 8px;
    margin-bottom: 10px;
    font-size: 0.9rem;
}
.webpub-app .webpub-results-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.webpub-app .webpub-result-item {
    padding: 12px 16px;
    background: var(--wp-surface);
    border: 1px solid var(--wp-border);
    border-left: 3px solid var(--wp-border);
    border-radius: 8px;
    font-size: 0.88rem;
    line-height: 1.5;
}
.webpub-app .webpub-result-item.success { border-left-color: var(--wp-success); }
.webpub-app .webpub-result-item.error   { border-left-color: var(--wp-error);   }
.webpub-app .webpub-result-item a { color: var(--wp-accent); text-decoration: none; }
.webpub-app .webpub-result-item a:hover { text-decoration: underline; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
    .webpub-app .webpub-platform-card  { padding: 12px 10px; min-width: 70px; }
    .webpub-app .webpub-publish-btn    { padding: 14px 32px !important; }
    .webpub-app .webpub-label-row      { flex-direction: column; align-items: flex-start; gap: 8px; }
    .webpub-app .webpub-label-actions  { width: 100%; justify-content: flex-end; }
}