/* ==========================================================================
   Agency workspace — additions on top of the shared shell
   ========================================================================== */

/* ── Subscription banner ───────────────────────────────────────────────── */

.gate-banner {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-5);
    background: var(--warn-soft);
    color: var(--warn);
    border-bottom: 1px solid var(--line);
    font-size: var(--text-md);
}
.gate-banner.is-danger { background: var(--danger-soft); color: var(--danger); }
.gate-banner svg { width: 17px; height: 17px; flex: none; }
.gate-banner .btn { margin-left: auto; }

/* ── Card grids ────────────────────────────────────────────────────────── */

.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); gap: var(--sp-4); }

.creative-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--bg-surface);
    overflow: hidden;
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
    color: inherit;
}
.creative-card:hover { border-color: var(--line-strong); transform: translateY(-2px); color: inherit; }

.creative-thumb {
    position: relative;
    aspect-ratio: 4 / 5;
    background:
        linear-gradient(140deg, var(--bg-raised), var(--bg-inset));
    display: grid;
    place-items: center;
    color: var(--ink-faint);
    overflow: hidden;
}
.creative-thumb img { width: 100%; height: 100%; object-fit: cover; }
.creative-thumb .badge { position: absolute; top: var(--sp-2); left: var(--sp-2); }

.creative-meta { padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: 3px; }
.creative-meta b { font-size: var(--text-md); color: var(--ink-strong); }
.creative-meta span { font-size: var(--text-xs); color: var(--ink-faint); }

/* ── Media library ─────────────────────────────────────────────────────── */

.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-3); }

.media-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    overflow: hidden;
    background: var(--bg-inset);
    cursor: pointer;
}
.media-item img { width: 100%; height: 100%; object-fit: cover; }
.media-item.is-selected { outline: 2px solid var(--brand); outline-offset: 1px; }
.media-item-actions {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    gap: 4px;
    justify-content: flex-end;
    padding: var(--sp-2);
    background: linear-gradient(transparent, rgba(0, 0, 0, .7));
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease);
}
.media-item:hover .media-item-actions { opacity: 1; }
.media-kind {
    position: absolute;
    top: var(--sp-2); left: var(--sp-2);
    padding: 2px 7px;
    border-radius: var(--r-full);
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: var(--text-2xs);
    font-weight: 600;
}

.dropzone {
    border: 1.5px dashed var(--line-strong);
    border-radius: var(--r-lg);
    padding: var(--sp-10);
    text-align: center;
    color: var(--ink-muted);
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
    cursor: pointer;
}
.dropzone:hover, .dropzone.is-over { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }

/* ── Tour builder ──────────────────────────────────────────────────────── */

.tour-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--sp-5); align-items: start; }

.hotel-row {
    display: grid;
    grid-template-columns: 26px minmax(0, 2.2fr) minmax(0, 1.4fr) 92px minmax(0, 1.2fr) 34px;
    gap: var(--sp-2);
    align-items: center;
    padding: var(--sp-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--bg-inset);
}
.hotel-row .handle {
    display: grid; place-items: center;
    color: var(--ink-faint);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
}
.hotel-row .input { min-height: 32px; padding: 5px var(--sp-2); font-size: var(--text-sm); }

.message-preview {
    white-space: pre-wrap;
    word-break: break-word;
    font-size: var(--text-md);
    line-height: 1.6;
    color: var(--ink);
    background: var(--bg-inset);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: var(--sp-4);
    max-height: 420px;
    overflow-y: auto;
}
.message-preview b { color: var(--ink-strong); }

/* ── Brand kit ─────────────────────────────────────────────────────────── */

.swatch-row { display: flex; gap: var(--sp-2); align-items: center; }
.swatch {
    width: 34px; height: 34px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line-strong);
    padding: 0;
    cursor: pointer;
    background: none;
}
.logo-slot {
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    border: 1.5px dashed var(--line-strong);
    border-radius: var(--r-md);
    background: var(--bg-inset);
    overflow: hidden;
    cursor: pointer;
    color: var(--ink-faint);
}
.logo-slot img { max-width: 74%; max-height: 74%; object-fit: contain; }
.logo-slot.is-dark { background: #0a0c11; }
.logo-slot.is-light { background: #ffffff; }

/* ── Plans ─────────────────────────────────────────────────────────────── */

.plan-tile {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-5);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--bg-surface);
}
.plan-tile.is-current { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand-line); }

@media (max-width: 1100px) {
    .tour-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
    .hotel-row { grid-template-columns: minmax(0, 1fr) 34px; grid-auto-rows: auto; }
    .hotel-row .handle { display: none; }
}