/**
 * AutoAdOS Portal — advertiser-facing surfaces (marketplace, campaign builder,
 * dashboard, auth, sponsorship guide).
 *
 * Lane A (PLUGIN-DEV-GUIDE §2): integrated plugin. Reads the LopoRail Signal
 * Black tokens (`rail.css :root`) and reuses the `.el-*` / `.btn` grammar.
 * No raw hex — every colour is a token. Tokens are aliased under the plugin
 * root so the plugin keeps its own `aados-*` hooks without inventing a parallel
 * palette, and so it still renders if the theme is absent (values resolve to
 * the browser defaults the tokens inherit).
 */

.aados-portal,
.aados-auth,
.aados-modal {
    --aados-ink: var(--fg);
    --aados-ink-2: var(--fg);
    --aados-accent: var(--accent);
    --aados-accent-dark: var(--accent-2);
    --aados-accent-soft: var(--accent-soft);
    --aados-bg: var(--bg);
    --aados-card: var(--surface);
    --aados-line: var(--border);
    --aados-muted: var(--muted);
    --aados-ok: var(--ok);
    --aados-ok-soft: var(--ok-soft);
    --aados-warn: var(--warn);
    --aados-warn-soft: var(--warn-soft);
    --aados-err: var(--danger);
    --aados-err-soft: var(--danger-soft);
    --aados-info: var(--info);
    --aados-info-soft: var(--info-soft);
    --aados-on-accent: var(--on-accent);
    --aados-radius: var(--radius-lg, 12px);
    --aados-radius-sm: var(--radius, 8px);
    --aados-shadow: var(--shadow-1, none);
    --aados-font: var(--font-body, system-ui, -apple-system, "Segoe UI", sans-serif);
}

/* ------------------------------------------------------------------ */
/* Layout shells                                                       */

.aados-portal {
    font-family: var(--aados-font);
    color: var(--aados-ink);
    background: transparent;
    padding: 4px 0;
    max-width: 1040px;
    margin: 0 auto;
}

.aados-portal *,
.aados-auth * { box-sizing: border-box; }

.aados-hero {
    background: var(--surface-2, var(--aados-card));
    border: 1px solid var(--aados-line);
    border-radius: var(--aados-radius);
    padding: 28px 26px;
    margin-bottom: 20px;
}

.aados-hero h1, .aados-hero h2 { margin: 0 0 6px; letter-spacing: -.02em; }
.aados-hero p { margin: 0; color: var(--aados-muted); font-size: .95rem; max-width: 640px; }

.aados-card {
    background: var(--aados-card);
    border: 1px solid var(--aados-line);
    border-radius: var(--aados-radius);
    box-shadow: var(--aados-shadow);
    padding: 20px;
}

.aados-grid { display: grid; gap: 14px; }
.aados-grid--cards { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.aados-grid--stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* ------------------------------------------------------------------ */
/* Type                                                                */

.aados-h1 { font-family: var(--font-display, var(--aados-font)); font-size: 1.45rem; font-weight: 700; margin: 0 0 4px; letter-spacing: -.01em; }
.aados-h2 { font-size: 1.1rem; font-weight: 700; margin: 0 0 10px; }
.aados-sub { color: var(--aados-muted); font-size: .92rem; margin: 0 0 16px; }

/* ------------------------------------------------------------------ */
/* Buttons, inputs                                                     */

.aados-btn {
    display: inline-block;
    font-family: var(--aados-font);
    font-size: .95rem;
    font-weight: 600;
    border-radius: var(--aados-radius-sm);
    padding: 10px 18px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease, filter .15s ease;
    line-height: 1.3;
}
.aados-btn--primary { background: var(--grad, var(--aados-accent)); color: var(--aados-on-accent); }
.aados-btn--primary:hover { filter: saturate(1.12) brightness(1.06); color: var(--aados-on-accent); }
.aados-btn--ghost { background: transparent; color: var(--aados-ink); border-color: var(--border-strong, var(--aados-line)); }
.aados-btn--ghost:hover { border-color: var(--aados-accent); color: var(--aados-accent); }
.aados-btn--dark { background: var(--surface-2, var(--aados-card)); color: var(--aados-ink); border-color: var(--aados-line); }
.aados-btn--dark:hover { border-color: var(--aados-accent); color: var(--aados-accent); }
.aados-btn--block { display: block; width: 100%; text-align: center; }
.aados-btn--sm { padding: 6px 12px; font-size: .85rem; }
.aados-btn[disabled] { opacity: .55; cursor: not-allowed; }

.aados-label {
    display: block;
    font-size: .88rem;
    font-weight: 600;
    color: var(--aados-ink);
    margin: 0 0 14px;
}
.aados-label small { color: var(--aados-muted); font-weight: 400; }
.aados-input, .aados-select, .aados-textarea {
    display: block;
    width: 100%;
    margin-top: 6px;
    font-family: var(--aados-font);
    font-size: .95rem;
    color: var(--aados-ink);
    background: var(--bg, transparent);
    border: 1px solid var(--aados-line);
    border-radius: var(--aados-radius-sm);
    padding: 10px 12px;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.aados-input:focus, .aados-select:focus, .aados-textarea:focus {
    border-color: var(--aados-accent);
    box-shadow: 0 0 0 3px var(--accent-soft, transparent);
}
.aados-select { appearance: auto; }
.aados-check {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: .88rem;
    font-weight: 400;
    color: var(--aados-ink);
    margin: 0 0 12px;
}
.aados-check input { margin-top: 3px; accent-color: var(--aados-accent); }
.aados-hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.aados-fine { color: var(--aados-muted); font-size: .82rem; margin: 10px 0 0; }
.aados-row { display: flex; gap: 12px; flex-wrap: wrap; }
.aados-row > * { flex: 1 1 180px; }

/* ------------------------------------------------------------------ */
/* Notes, chips, badges                                                */

.aados-note {
    border-radius: var(--aados-radius-sm);
    padding: 12px 14px;
    font-size: .9rem;
    margin: 0 0 16px;
    border: 1px solid transparent;
}
.aados-note--ok { background: var(--aados-ok-soft); color: var(--aados-ok); border-color: color-mix(in oklch, var(--ok) 34%, transparent); }
.aados-note--err { background: var(--aados-err-soft); color: var(--aados-err); border-color: color-mix(in oklch, var(--danger) 34%, transparent); }
.aados-note--info { background: var(--aados-info-soft); color: var(--aados-info); border-color: color-mix(in oklch, var(--info) 34%, transparent); }

.aados-chip {
    display: inline-block;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-radius: var(--radius-pill, 999px);
    padding: 4px 10px;
}
.aados-chip--active { background: var(--aados-ok-soft); color: var(--aados-ok); }
.aados-chip--pending_review { background: var(--aados-warn-soft); color: var(--aados-warn); }
.aados-chip--draft { background: var(--aados-info-soft); color: var(--aados-info); }
.aados-chip--paused { background: var(--surface-2, var(--aados-card)); color: var(--aados-muted); }
.aados-chip--completed { background: var(--aados-accent-soft); color: var(--aados-accent); }
.aados-chip--rejected, .aados-chip--refunded { background: var(--aados-err-soft); color: var(--aados-err); }
.aados-chip--geo { background: var(--aados-accent-soft); color: var(--aados-accent); text-transform: none; letter-spacing: 0; font-size: .78rem; }
.aados-chip--type { background: var(--surface-2, var(--aados-card)); color: var(--aados-ink); text-transform: capitalize; }

/* ------------------------------------------------------------------ */
/* Stats + progress                                                    */

.aados-stat {
    background: var(--aados-card);
    border: 1px solid var(--aados-line);
    border-radius: var(--aados-radius-sm);
    padding: 14px 16px;
}
.aados-stat__label { font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--aados-muted); }
.aados-stat__value { font-family: var(--font-display, var(--aados-font)); font-size: 1.5rem; font-weight: 700; margin-top: 2px; letter-spacing: -.02em; }

.aados-progress {
    height: 8px;
    background: var(--surface-2, var(--aados-line));
    border-radius: var(--radius-pill, 999px);
    overflow: hidden;
    margin: 8px 0 4px;
}
.aados-progress__fill {
    height: 100%;
    background: var(--grad, var(--aados-accent));
    border-radius: var(--radius-pill, 999px);
    transition: width .3s ease;
}
.aados-progress__fill--warn { background: var(--aados-warn); }
.aados-progress__meta { font-size: .8rem; color: var(--aados-muted); }

/* ------------------------------------------------------------------ */
/* Marketplace cards                                                   */

.aados-mkt-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.aados-mkt-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.aados-mkt-card__title { font-size: 1rem; font-weight: 700; margin: 0; word-break: break-all; }
.aados-mkt-card__price { font-family: var(--font-display, var(--aados-font)); font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; }
.aados-mkt-card__meta { color: var(--aados-muted); font-size: .84rem; }
.aados-meter { height: 6px; background: var(--surface-2, var(--aados-line)); border-radius: var(--radius-pill, 999px); overflow: hidden; }
.aados-meter__fill { height: 100%; background: var(--aados-info); border-radius: var(--radius-pill, 999px); }

/* ------------------------------------------------------------------ */
/* Wizard (campaign builder)                                           */

.aados-steps {
    display: flex;
    gap: 6px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}
.aados-steps li {
    flex: 1;
    text-align: center;
    font-size: .8rem;
    font-weight: 600;
    color: var(--aados-muted);
    padding: 9px 4px;
    border-radius: var(--aados-radius-sm);
    background: var(--surface-2, var(--aados-card));
    position: relative;
}
.aados-steps li.aados-step--on { background: var(--aados-accent-soft); color: var(--aados-accent); }
.aados-steps li.aados-step--done { background: var(--aados-ok-soft); color: var(--aados-ok); }
@media (max-width: 640px) {
    .aados-steps { flex-direction: column; }
    .aados-steps li { text-align: left; padding-left: 14px; }
}

.aados-pane--auth-hidden { display: none; }

/* ------------------------------------------------------------------ */
/* Auth                                                                */

.aados-auth { font-family: var(--aados-font); color: var(--aados-ink); max-width: 460px; margin: 24px auto; }
.aados-card--auth { padding: 28px; }
.aados-auth__brand { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.aados-auth__mark {
    width: 44px; height: 44px;
    border-radius: var(--aados-radius-sm);
    background: var(--grad, var(--aados-accent));
    color: var(--aados-on-accent);
    font-weight: 800;
    font-size: 1.05rem;
    display: flex; align-items: center; justify-content: center;
    letter-spacing: .02em;
    flex: none;
}
.aados-auth__title { margin: 0; font-size: 1.2rem; }
.aados-auth__sub { margin: 2px 0 0; color: var(--aados-muted); font-size: .86rem; }

.aados-tabs { display: flex; background: var(--surface-2, var(--aados-card)); border-radius: var(--aados-radius-sm); padding: 4px; margin-bottom: 18px; }
.aados-tab {
    flex: 1;
    border: 0;
    background: transparent;
    font-family: var(--aados-font);
    font-size: .9rem;
    font-weight: 600;
    color: var(--aados-muted);
    padding: 9px 10px;
    border-radius: var(--radius, 6px);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.aados-tab--on { background: var(--aados-card); color: var(--aados-ink); box-shadow: var(--shadow-1, none); }

.aados-pane { display: none; }
.aados-pane--on { display: block; }

/* ------------------------------------------------------------------ */
/* Dashboard campaign cards                                            */

.aados-campaign { display: flex; flex-direction: column; gap: 10px; }
.aados-campaign__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.aados-campaign__title { margin: 0; font-size: 1.02rem; font-weight: 700; }
.aados-campaign__meta { color: var(--aados-muted); font-size: .84rem; }
.aados-campaign__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.aados-kv { display: flex; gap: 16px; flex-wrap: wrap; font-size: .86rem; color: var(--aados-ink); }
.aados-kv b { font-weight: 700; }

.aados-empty {
    text-align: center;
    color: var(--aados-muted);
    padding: 36px 20px;
    background: var(--aados-card);
    border: 1px dashed var(--aados-line);
    border-radius: var(--aados-radius);
}
.aados-empty h3 { color: var(--aados-ink); margin: 0 0 6px; }

/* Compliance review reasons (advertiser dashboard) */
.aados-reasons {
    margin: 6px 0 10px;
    padding: 10px 12px 10px 28px;
    background: var(--aados-warn-soft);
    border: 1px solid color-mix(in oklch, var(--warn) 40%, transparent);
    border-radius: var(--aados-radius-sm);
    color: var(--aados-warn);
    font-size: .86rem;
}
.aados-reasons li { margin: 3px 0; }

/* Sponsorship guide */
.aados-guide__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.aados-guide__includes { margin: 8px 0 14px; padding-left: 18px; color: var(--aados-muted); font-size: .88rem; }
.aados-guide__includes li { margin: 3px 0; }

/* Sponsorship tiles (wizard) */
.aados-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.aados-tile {
    position: relative;
    border: 1px solid var(--aados-line);
    border-radius: var(--aados-radius-sm);
    background: var(--aados-card);
    padding: 12px 12px 14px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.aados-tile:hover { border-color: var(--aados-accent); box-shadow: var(--shadow-1, none); transform: translateY(-1px); }
.aados-tile--selected { border-color: var(--aados-accent); box-shadow: 0 0 0 2px var(--accent-soft, transparent); }
.aados-tile__inner { display: flex; flex-direction: column; gap: 6px; }
.aados-tile__title { font-size: .9rem; font-weight: 700; color: var(--aados-ink); margin: 0; }
.aados-tile__q {
    position: absolute; top: 8px; right: 8px;
    width: 20px; height: 20px; line-height: 20px; text-align: center;
    border-radius: var(--radius-pill, 50%); background: var(--surface-2, var(--aados-card)); color: var(--aados-ink);
    font-size: .72rem; font-weight: 700; cursor: help;
}
.aados-tile__q:hover { background: var(--aados-accent); color: var(--aados-on-accent); }

/* Modal */
.aados-modal {
    position: fixed; inset: 0; z-index: 99999;
    background: color-mix(in oklch, var(--bg, black) 72%, transparent);
    display: none; align-items: center; justify-content: center; padding: 20px;
}
.aados-modal__content {
    background: var(--aados-card); border: 1px solid var(--aados-line);
    border-radius: var(--aados-radius);
    max-width: 460px; width: 100%; padding: 22px 24px;
    box-shadow: var(--shadow-2, none);
}
.aados-modal__title { margin: 0 0 8px; font-size: 1.1rem; color: var(--aados-ink); }
.aados-modal__detail { color: var(--aados-muted); font-size: .92rem; line-height: 1.5; margin: 0 0 16px; }

@media (max-width: 640px) {
    .aados-portal { padding: 0; }
    .aados-hero { padding: 20px 16px; }
    .aados-card { padding: 16px; }
    .aados-tiles { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

/* ------------------------------------------------------------------ */
/* FAQ, rate card, creative preview (content surfaces)                 */

.autoados-faq { max-width: 820px; margin: 0 auto; }
.autoados-faq h2 { font-family: var(--font-display, var(--aados-font)); font-size: 1.45rem; margin: 0 0 1rem; }
.autoados-faq h3 { font-size: 1.15rem; margin: 1.6rem 0 .5rem; border-bottom: 1px solid var(--aados-line); padding-bottom: .3rem; }
.autoados-faq h4 { font-size: 1rem; margin: 1.2rem 0 .4rem; }
.autoados-faq p { margin: .7rem 0; }
.autoados-faq ul { padding-left: 1.4rem; }
.autoados-faq li { margin: .25rem 0; }
.autoados-faq pre { background: var(--surface-2); border: 1px solid var(--aados-line); border-radius: var(--aados-radius-sm); padding: 1rem; overflow: auto; }
.autoados-faq code { font-family: var(--font-mono, monospace); font-size: .92em; }

.autoados-rate-card { max-width: 900px; margin: 0 auto; }
.autoados-rate-table { border-collapse: collapse; width: 100%; margin: 1rem 0; }
.autoados-rate-table th, .autoados-rate-table td { border: 1px solid var(--aados-line); padding: 8px 10px; text-align: left; }
.autoados-rate-table th { background: var(--surface-2); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--aados-muted); }

.autoados-preview-slot { min-height: 120px; display: flex; align-items: center; justify-content: center; }
#autoados-preview-modal .aados-modal__content { max-width: 760px; }