/* =========================================================================
   Atelier AI — Business-specific styles & legacy bridge
   Loaded AFTER tokens.css / layout.css / components.css / utilities.css
   Contains: mode-specific classes, brand/merge/usage blocks,
             image upload helpers, legacy variable aliases
   ========================================================================= */

/* -----------------------------------------------------------------
 * Global reset & legacy variable bridge
 *   Preserves var(--primary) / var(--bg) etc. still used by mode JS.
 * ----------------------------------------------------------------- */
* { box-sizing: border-box; }
*::before, *::after { box-sizing: border-box; }

:root {
    --bg:           var(--bg-canvas);
    --bg2:          var(--bg-subtle);
    --card:         var(--bg-elevated);
    --text:         var(--text-primary);
    --text2:        var(--text-secondary);
    --primary:      var(--accent-primary);
    --primary-hover: var(--accent-primary-hover);
    --success:      var(--role-success);
    --danger:       var(--role-danger);
    --warning:      var(--role-warning);
    --border:       var(--border-default);
}

/* -----------------------------------------------------------------
 * Form label column (legacy alignment)
 * ----------------------------------------------------------------- */
.form-row > label:not([data-required]) {
    min-width: 70px;
}
.form-row > label[data-required] {
    min-width: 70px;
}
.form-row.full {
    flex-direction: column;
    align-items: stretch;
}
.small-select { flex: 0 0 auto; width: 90px; }

/* -----------------------------------------------------------------
 * Inputs inside .form-row — must share the row with sibling buttons,
 * overriding components.css default `width: 100%`.
 * ----------------------------------------------------------------- */
.form-row > input,
.form-row > select,
.form-row > textarea,
.form-row > .input,
.form-row > .select,
.form-row > .textarea {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
}
.form-row.full > input,
.form-row.full > select,
.form-row.full > textarea {
    flex: 1 1 auto;
    width: 100%;
}
/* Small fixed-width selects should not grow */
.form-row > .small-select {
    flex: 0 0 auto;
}
/* Color / range inputs never stretch */
.form-row > input[type="color"],
.form-row > input[type="checkbox"],
.form-row > input[type="radio"] {
    flex: 0 0 auto;
    width: auto;
}

/* 图片文件 input 完全隐藏 — 交互由 .dropzone 接管
   视频 input（accept 含 video）保留原生 UI，因为视频没有 dropzone */
input[type="file"][accept^="image"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

/* 视频 input 保留可见样式 */
input[type="file"][accept*="video"] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    padding: var(--space-1) 0;
}
input[type="file"][accept*="video"]::-webkit-file-upload-button {
    margin-right: var(--space-2);
    padding: 6px 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-default);
    background: var(--bg-subtle);
    color: var(--text-primary);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out);
}
input[type="file"][accept*="video"]::-webkit-file-upload-button:hover {
    background: var(--alpha-hover);
}

/* 图片 input 所在的 form-row 让 label 独占 */
.form-row:has(> input[type="file"][accept^="image"]) {
    margin-bottom: var(--space-1);
}

input[type="range"] {
    flex: 1;
    min-width: 80px;
}

/* -----------------------------------------------------------------
 * Path display & helpers
 * ----------------------------------------------------------------- */
.path-display {
    flex: 1;
    font-size: var(--text-base);
    color: var(--text-primary);
    background: var(--bg-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 6px 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.api-key-hint {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}
.api-key-hint a {
    color: var(--accent-secondary);
    text-decoration: none;
}
.api-key-hint a:hover {
    text-decoration: underline;
}

.balance-text {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-left: var(--space-1);
    white-space: nowrap;
}
.balance-text strong {
    color: var(--role-success);
    font-weight: var(--weight-semibold);
}

/* -----------------------------------------------------------------
 * Brand group — used in watermark config and merge panels
 * ----------------------------------------------------------------- */
.brand-group {
    margin-bottom: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--bg-subtle);
}
.brand-group:last-of-type {
    margin-bottom: var(--space-1);
}
.brand-group-title {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

/* -----------------------------------------------------------------
 * Merge layer (motion / video合并)
 * ----------------------------------------------------------------- */
.merge-layer {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-2);
    background: var(--bg-elevated);
}
.merge-layer > label {
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    color: var(--text-primary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
}
.merge-layer-options { margin-top: var(--space-2); }
.merge-layer-options .form-row { gap: var(--space-1-5); }
.merge-font-select { max-width: 140px; flex: 0 0 140px; }
.merge-line-group {
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
    margin-bottom: var(--space-1-5);
    flex-wrap: wrap;
}
.merge-line-label {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    min-width: 28px;
}
.merge-line-group textarea {
    flex: 1;
    min-width: 120px;
    resize: vertical;
    font-size: var(--text-base);
    padding: 4px 8px;
    min-height: 32px;
}
.merge-line-group input[type="range"] {
    width: 80px;
    flex: 0 0 80px;
}
.size-label {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    min-width: 40px;
    font-variant-numeric: tabular-nums;
}

/* -----------------------------------------------------------------
 * Usage table
 * ----------------------------------------------------------------- */
.usage-summary {
    font-size: var(--text-md);
    padding: var(--space-2) 0;
    color: var(--text-secondary);
}
.usage-summary strong {
    color: var(--role-success);
    font-weight: var(--weight-semibold);
}
.usage-table-wrap { overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); }
.usage-table { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
.usage-status-ok      { color: var(--role-success); font-weight: var(--weight-medium); }
.usage-status-pending { color: var(--role-warning); font-weight: var(--weight-medium); }
.usage-status-refund  { color: var(--text-tertiary); }

/* -----------------------------------------------------------------
 * Watermark color pickers
 * ----------------------------------------------------------------- */
.wm-color-btn {
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    font-size: var(--text-xs) !important;
    line-height: 28px;
    text-align: center;
    flex: 0 0 auto;
}

/* -----------------------------------------------------------------
 * Image-upload item (image_upload.js outputs .img-item)
 * ----------------------------------------------------------------- */
.img-item {
    position: relative;
    display: inline-block;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
    transition: transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}
.img-item:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}
.img-item img {
    display: block;
    width: 80px;
    height: 80px;
    object-fit: cover;
}
.img-item .img-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgb(0 0 0 / 0.55);
    color: #fff;
    font-size: var(--text-xs);
    padding: 2px 5px;
    text-align: center;
}
.img-item .img-del {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgb(0 0 0 / 0.55);
    color: #fff;
    border: none;
    font-size: 11px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--duration-fast) var(--ease-out);
}
.img-item .img-del:hover {
    background: var(--role-danger);
}

/* -----------------------------------------------------------------
 * Video-mode specific classes
 * ----------------------------------------------------------------- */
.mv-shot-item {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    margin-bottom: var(--space-2);
    background: var(--bg-subtle);
}
.mv-shot-header {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-2);
    color: var(--accent-secondary);
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
}
.mv-shot-desc {
    font-weight: var(--weight-regular);
    color: var(--text-secondary);
}
.mv-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2-5);
    margin-bottom: var(--space-2-5);
}
.mv-frame-item {
    position: relative;
    width: 160px;
    min-height: 100px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-subtle);
    transition: transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}
.mv-frame-item:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}
.mv-frame-item img {
    width: 100%;
    height: auto;
    cursor: pointer;
    display: block;
}
.mv-frame-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    background-image: linear-gradient(90deg,
        var(--bg-subtle) 0%, var(--bg-muted) 50%, var(--bg-subtle) 100%);
    background-size: 600px 100%;
    animation: shimmer 1.6s linear infinite;
}
.mv-frame-label {
    position: absolute;
    bottom: 4px;
    left: 4px;
    background: rgb(0 0 0 / 0.55);
    color: #fff;
    font-size: var(--text-xs);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    letter-spacing: 0.03em;
}
.mv-frame-regen {
    position: absolute;
    top: 4px;
    right: 4px;
    padding: 2px 8px !important;
    font-size: var(--text-xs) !important;
    background: rgb(0 0 0 / 0.6) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-out);
    height: auto !important;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.mv-frame-item:hover .mv-frame-regen {
    opacity: 1;
}
.mv-video-item {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    margin-bottom: var(--space-2);
    background: var(--bg-subtle);
}
.mv-video-header {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-1-5);
}
.mv-video-status {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-top: var(--space-1);
}
.mv-download-link {
    color: var(--role-success);
    text-decoration: none;
    font-weight: var(--weight-semibold);
}
.mv-download-link:hover {
    text-decoration: underline;
}