/* ============================================================
   mock-studio — 截图生成类工具的共用外壳（ms- 前缀）
   设计语言与全站一致：白卡、#eff2f8 底、品牌蓝 #4f6ef7
   预览画布由各工具的 JS 绘制，这里只管表单与布局
   ============================================================ */

/* [hidden] 必须压过下面 .ms-foot / .ms-result 上的 display 声明。
   浏览器默认的 [hidden]{display:none} 优先级极低，只要给同一元素写了
   display:flex，hidden 属性就完全失效 —— 表现是「该隐藏的底部按钮一直显示」。 */
[hidden] { display: none !important; }

.ms-wrap { max-width: 1120px; margin: 0 auto; }

/* ---------- 两栏：左预览 / 右参数 ---------- */
.ms-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 356px;
    gap: 14px;
    align-items: start;
}
@media (max-width: 940px) {
    .ms-layout { grid-template-columns: minmax(0, 1fr); }
}

.ms-card {
    background: #fff;
    border: 1px solid var(--z-line, #e2e8f0);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 14px;
}
.ms-card:last-child { margin-bottom: 0; }

.ms-card-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 700; color: #0f172a;
    margin: 0 0 12px;
}
.ms-card-title .svg-icon { color: #4f6ef7; flex: none; }
.ms-card-title .ms-hint {
    margin-left: auto; font-weight: 400; font-size: 12px; color: #94a3b8;
}

/* ---------- 预览台 ---------- */
.ms-stage { padding: 14px; }
@media (min-width: 941px) {
    .ms-stage { position: sticky; top: 74px; }
}
.ms-stage-head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 12px; flex-wrap: wrap;
}
.ms-stage-head > b { font-size: 14px; color: #0f172a; }

.ms-canvas-box {
    display: flex; align-items: center; justify-content: center;
    background: #f4f7fb;
    border: 1px solid #eef2f7;
    border-radius: 12px;
    padding: 12px;
    max-height: 66vh;
    overflow: auto;
}
.ms-canvas-box canvas {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 6px 22px rgba(15, 23, 42, .10);
    background: #fff;
}
/* 高画布：必须顶端对齐，否则 flex 垂直居中会把顶部内容裁到滚动区之外 */
.ms-canvas-box.is-tall { align-items: flex-start; }
.ms-canvas-box.is-tall canvas { max-height: none; }

.ms-foot {
    display: flex; align-items: center; gap: 10px;
    margin-top: 12px; flex-wrap: wrap;
}
.ms-size { font-size: 12px; color: #94a3b8; font-variant-numeric: tabular-nums; }
.ms-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- 按钮 ---------- */
.ms-btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 34px; padding: 0 14px;
    border-radius: 9px; border: 1px solid transparent;
    font-size: 13px; font-weight: 600; cursor: pointer;
    background: #f1f5f9; color: #334155;
    transition: background .15s, border-color .15s, color .15s;
    white-space: nowrap;
}
.ms-btn:hover { background: #e8eef6; }
.ms-btn:active { transform: translateY(1px); }
.ms-btn-primary { background: #4f6ef7; color: #fff; }
.ms-btn-primary:hover { background: #4360ea; }
.ms-btn-outline { background: #fff; border-color: #dbe3ee; color: #475569; }
.ms-btn-outline:hover { border-color: #b9c8dd; background: #f8fafc; }
.ms-btn-ghost { background: transparent; color: #64748b; }
.ms-btn-ghost:hover { background: #f1f5f9; }
.ms-btn:disabled { opacity: .5; cursor: not-allowed; }
.ms-btn-sm { height: 28px; padding: 0 10px; font-size: 12px; border-radius: 8px; }

/* ---------- 表单 ---------- */
.ms-field { margin-bottom: 12px; }
.ms-field:last-child { margin-bottom: 0; }
.ms-label {
    display: block; font-size: 12.5px; font-weight: 600;
    color: #475569; margin-bottom: 6px;
}
.ms-label .ms-sub { font-weight: 400; color: #94a3b8; margin-left: 4px; }

.ms-input, .ms-textarea, .ms-select {
    width: 100%; box-sizing: border-box;
    border: 1px solid #dbe3ee; border-radius: 9px;
    background: #fff; color: #0f172a;
    font-size: 13.5px; font-family: inherit;
    padding: 8px 11px;
    transition: border-color .15s, box-shadow .15s;
}
.ms-input:focus, .ms-textarea:focus, .ms-select:focus {
    outline: none; border-color: #4f6ef7;
    box-shadow: 0 0 0 3px rgba(79, 110, 247, .14);
}
.ms-textarea { resize: vertical; min-height: 76px; line-height: 1.65; }
.ms-input[type="color"] {
    padding: 3px; height: 36px; cursor: pointer;
    width: 56px; flex: none;
}

.ms-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 420px) { .ms-grid2 { grid-template-columns: 1fr; } }

.ms-row { display: flex; gap: 8px; align-items: center; }
.ms-row > .ms-input { flex: 1; min-width: 0; }
/* 取色器不能被 flex:1 拉满，否则变成一条大色块 */
.ms-row > .ms-input[type="color"] { flex: none; width: 56px; }

.ms-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.ms-chip {
    display: inline-flex; align-items: center; gap: 5px;
    height: 30px; padding: 0 11px;
    border-radius: 999px; border: 1px solid #dbe3ee;
    background: #fff; color: #475569;
    font-size: 12.5px; cursor: pointer;
    transition: all .15s;
}
.ms-chip:hover { border-color: #b9c8dd; }
.ms-chip.is-on {
    background: #eef2ff; border-color: #4f6ef7; color: #3550e0; font-weight: 600;
}

.ms-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.ms-swatch {
    width: 28px; height: 28px; border-radius: 8px;
    border: 2px solid transparent; cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .08);
    position: relative;
}
.ms-swatch.is-on { border-color: #0f172a; }
.ms-swatch.is-on::after {
    content: ""; position: absolute; inset: 0;
    border-radius: 6px; box-shadow: inset 0 0 0 2px #fff;
}

/* ---------- 开关 ---------- */
.ms-check {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; color: #475569; cursor: pointer;
    padding: 5px 10px 5px 8px; border-radius: 8px;
    border: 1px solid #e2e8f0; background: #fff;
}
.ms-check input { accent-color: #4f6ef7; width: 15px; height: 15px; cursor: pointer; }
.ms-check:hover { border-color: #c8d5e8; }

/* ---------- 说明 ---------- */
.ms-note {
    font-size: 12.5px; line-height: 1.75; color: #64748b;
    background: #f7f9fc; border: 1px solid #e8eef6;
    border-radius: 10px; padding: 11px 13px;
    /* 说明卡里常放长 URL/路径，窄屏下必须能断行，否则撑破 360px 视口 */
    word-break: break-word;
    overflow-wrap: anywhere;
}
.ms-note b { color: #334155; }
.ms-note code {
    background: #eef2f7; border-radius: 4px;
    padding: 1px 5px; font-size: 12px; color: #3550e0;
    /* 继承 .ms-note 的 overflow-wrap:anywhere 即可，
       不设 break-all —— 那会让 URL 在任意字母处断开，很难读 */
}

/* ---------- 折叠面板 ---------- */
.ms-fold { border: 1px solid #e8eef6; border-radius: 10px; margin-bottom: 10px; background: #fff; }
.ms-fold:last-child { margin-bottom: 0; }
.ms-fold > summary {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px; cursor: pointer;
    font-size: 13px; font-weight: 600; color: #334155;
    list-style: none;
}
.ms-fold > summary::-webkit-details-marker { display: none; }
.ms-fold > summary::after {
    content: ""; margin-left: auto;
    width: 6px; height: 6px; border-right: 2px solid #94a3b8; border-bottom: 2px solid #94a3b8;
    transform: rotate(45deg) translateY(-2px); transition: transform .15s;
}
.ms-fold[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.ms-fold-body { padding: 0 12px 12px; }

/* ---------- 结果区（文本类工具用） ---------- */
.ms-result {
    border: 1px solid #e8eef6; border-radius: 12px;
    background: #fbfcfe; padding: 12px;
    font-size: 14px; line-height: 1.85; color: #1e293b;
    white-space: pre-wrap; word-break: break-word;
    max-height: 420px; overflow: auto;
}
.ms-empty {
    font-size: 13px; color: #94a3b8; text-align: center;
    padding: 26px 10px; border: 1px dashed #dbe3ee;
    border-radius: 12px; background: #fbfcfe;
}

/* ---------- 暗色 ---------- */
html.dark .ms-card { background: #1a1a20; border-color: #2a2a34; }
html.dark .ms-card-title,
html.dark .ms-stage-head > b { color: #e8e8ef; }
html.dark .ms-canvas-box { background: #12161d; border-color: #262c38; }
html.dark .ms-canvas-box canvas { box-shadow: 0 6px 22px rgba(0, 0, 0, .5); }
html.dark .ms-label { color: #9aa4b8; }
html.dark .ms-input, html.dark .ms-textarea, html.dark .ms-select {
    background: #15151b; border-color: #2e2e3a; color: #e8e8ef;
}
html.dark .ms-btn { background: #24242d; color: #cbd5e1; }
html.dark .ms-btn:hover { background: #2c2c37; }
html.dark .ms-btn-primary { background: #4f6ef7; color: #fff; }
html.dark .ms-btn-outline { background: #1a1a20; border-color: #2e2e3a; color: #cbd5e1; }
html.dark .ms-chip { background: #1a1a20; border-color: #2e2e3a; color: #cbd5e1; }
html.dark .ms-chip.is-on { background: #1e2540; border-color: #4f6ef7; color: #96aaff; }
html.dark .ms-check { background: #1a1a20; border-color: #2e2e3a; color: #cbd5e1; }
html.dark .ms-note { background: #171720; border-color: #262c38; color: #9aa4b8; }
html.dark .ms-note b { color: #cbd5e1; }
html.dark .ms-note code { background: #24242d; color: #96aaff; }
html.dark .ms-fold { background: #1a1a20; border-color: #262c38; }
html.dark .ms-fold > summary { color: #cbd5e1; }
html.dark .ms-result { background: #15151b; border-color: #262c38; color: #dfe4ee; }
html.dark .ms-empty { background: #15151b; border-color: #2e2e3a; color: #6b7488; }

/* ---------- 移动端 ---------- */
@media (max-width: 940px) {
    .ms-stage { position: sticky; top: 54px; z-index: 6; margin-bottom: 10px; }
    .ms-canvas-box { max-height: 38vh; padding: 8px; }
    .ms-actions { width: 100%; margin-left: 0; }
    .ms-actions .ms-btn { flex: 1 1 auto; justify-content: center; }
}