/* ================= 我的美化包（Theme Pack → 我的美化包）================= */
/* 只服务于 static/js/my-themes.js 渲染出来的列表页 / 详情页 / 弹层，
   跟官方主题页共用 .oft-swatch-* / .tc-btn / .tc-actions / .settings-* 这些
   已经存在的规则（这里不重复定义，也不改 official-themes.css），
   这里只补：搜索排序工具栏、主题行（缩略图/星标/更多按钮）、操作面板、
   小表单弹层、详情页截图卡片。 */

.mt-section-title{
    font-size:13px;
    font-weight:600;
    color:var(--text-2);
    padding:0 4px;
}

.mt-toolbar{
    display:flex;
    gap:10px;
}

.mt-search{
    flex:1;
    min-width:0;
    border:none;
    outline:none;
    background:var(--bg-0);
    border-radius:var(--radius-pill);
    padding:10px 16px;
    font-size:14px;
    font-family:inherit;
    color:var(--text-1);
    box-shadow:var(--shadow-soft);
}

.mt-search::placeholder{
    color:var(--text-2);
}

.mt-sort{
    flex-shrink:0;
    border:none;
    outline:none;
    background:var(--bg-0);
    border-radius:var(--radius-pill);
    padding:10px 14px;
    font-size:13px;
    font-family:inherit;
    color:var(--text-1);
    box-shadow:var(--shadow-soft);
}

.mt-list{
    min-height:56px;
    flex-shrink:0;
}

.mt-empty{
    padding:26px 4px;
    text-align:center;
}

.mt-row{
    gap:10px;
    padding-right:10px;
}

.mt-row-body{
    display:flex;
    align-items:center;
    gap:12px;
    flex:1;
    min-width:0;
    color:inherit;
    text-decoration:none;
}

.mt-thumb{
    width:44px;
    height:44px;
    border-radius:12px;
    flex-shrink:0;
    background-size:cover;
    background-position:center;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
}

.mt-row-info{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:3px;
}

.mt-row-name-line{
    display:flex;
    align-items:center;
    gap:8px;
}

.mt-row-meta{
    font-size:12px;
    color:var(--text-2);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.theme-badge{
    flex-shrink:0;
    font-size:10.5px;
    font-weight:600;
    color:#fff;
    background:var(--accent);
    padding:2px 8px;
    border-radius:var(--radius-pill);
}

.mt-star-btn,
.mt-more-btn{
    flex-shrink:0;
    width:32px;
    height:32px;
    border:none;
    background:none;
    color:var(--text-2);
    font-size:17px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    border-radius:50%;
    transition:background .15s ease,color .15s ease,transform .2s var(--spring);
}

.mt-star-btn:active,
.mt-more-btn:active{
    transform:scale(.9);
    background:var(--bg-2);
}

.mt-star-btn.is-active{
    color:#e8a93c;
}

.mt-more-btn{
    font-size:20px;
    font-weight:700;
}

/* ---------- 详情页 ---------- */

.mt-shot-card{
    padding:0;
    overflow:hidden;
    flex-shrink:0; /* 同 official-themes.css 里 .oft-preview-card 的注释：.settings-group 有
                       overflow:hidden，又是 .settings-content 这个 flex column 的子项，
                       内容一高就会被压缩裁切，这里跟 my-themes 里其它卡片一起统一加上 */
}

.mt-info-card,
.mt-meta-card{
    flex-shrink:0;
}

.mt-shot-img{
    width:100%;
    display:block;
    aspect-ratio:16/9;
    object-fit:cover;
}

.mt-shot-placeholder{
    width:100%;
    aspect-ratio:16/9;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:34px;
    font-weight:700;
    color:rgba(255,255,255,.9);
    text-shadow:0 2px 6px rgba(0,0,0,.15);
}

.mt-info-card{
    padding:16px 16px 18px;
    display:flex;
    flex-direction:column;
    gap:6px;
}

.mt-info-name{
    font-size:17px;
    font-weight:700;
    color:var(--text-1);
}

.mt-info-meta{
    font-size:12.5px;
    color:var(--text-2);
}

.mt-info-desc{
    font-size:13.5px;
    line-height:1.7;
    color:var(--text-1);
    padding-top:4px;
}

.mt-detail-actions{
    flex-wrap:wrap;
    justify-content:flex-start;
    gap:10px;
}

.mt-detail-actions .tc-btn{
    flex:1 1 calc(50% - 5px);
    text-align:center;
}

.mt-btn-danger{
    color:#d9534f;
}

/* ---------- 弹层通用外壳 ---------- */

.mt-overlay{
    position:fixed;
    inset:0;
    background:rgba(20,16,14,0);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    z-index:60;
    transition:background .2s ease;
}

.mt-overlay.is-open{
    background:rgba(20,16,14,.32);
}

.mt-overlay-bottom{
    align-items:flex-end;
    padding:0;
}

/* ---------- 确认弹窗（删除）---------- */

.mt-alert{
    width:100%;
    max-width:300px;
    background:var(--bg-0);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-lift);
    padding:20px 18px;
    transform:scale(.92);
    opacity:0;
    transition:transform .2s var(--spring),opacity .2s ease;
}

.mt-overlay.is-open .mt-alert{
    transform:scale(1);
    opacity:1;
}

.mt-alert-text{
    font-size:14px;
    line-height:1.6;
    color:var(--text-1);
    text-align:center;
    margin-bottom:16px;
}

.mt-alert-actions{
    display:flex;
    gap:10px;
}

.mt-alert-btn{
    flex:1;
    border:none;
    border-radius:var(--radius-pill);
    padding:10px 0;
    font-size:14px;
    font-weight:600;
    background:var(--bg-2);
    color:var(--text-1);
    cursor:pointer;
}

.mt-alert-btn-danger{
    background:#d9534f;
    color:#fff;
}

/* ---------- 小表单弹窗（重命名 / 编辑）---------- */

.mt-modal{
    width:100%;
    max-width:340px;
    background:var(--bg-0);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-lift);
    padding:20px 18px;
    display:flex;
    flex-direction:column;
    gap:14px;
    transform:scale(.92);
    opacity:0;
    transition:transform .2s var(--spring),opacity .2s ease;
}

.mt-overlay.is-open .mt-modal{
    transform:scale(1);
    opacity:1;
}

.mt-modal-title{
    font-size:15.5px;
    font-weight:700;
    color:var(--text-1);
}

.mt-field{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.mt-field-label{
    font-size:12px;
    color:var(--text-2);
}

.mt-field-input{
    border:none;
    outline:none;
    background:var(--bg-2);
    border-radius:var(--radius-md);
    padding:10px 12px;
    font-size:14px;
    font-family:inherit;
    color:var(--text-1);
    resize:none;
}

textarea.mt-field-input{
    min-height:70px;
    line-height:1.5;
}

.mt-modal-actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
}

/* ---------- 操作面板（列表行"⋯"）---------- */

.mt-sheet{
    width:100%;
    max-width:620px;
    margin:0 auto;
    background:var(--bg-0);
    border-radius:22px 22px 0 0;
    box-shadow:var(--shadow-lift);
    padding:10px 14px calc(14px + env(safe-area-inset-bottom, 0px));
    display:flex;
    flex-direction:column;
    gap:2px;
    transform:translateY(100%);
    transition:transform .25s var(--spring);
}

.mt-overlay.is-open .mt-sheet{
    transform:translateY(0);
}

.mt-sheet-title{
    text-align:center;
    font-size:12.5px;
    color:var(--text-2);
    padding:8px 0 6px;
}

.mt-sheet-btn{
    border:none;
    background:none;
    text-align:center;
    padding:13px 0;
    font-size:15px;
    color:var(--text-1);
    border-top:1px solid var(--line);
    cursor:pointer;
}

.mt-sheet-btn:active{
    background:var(--bg-2);
}

.mt-sheet-btn-danger{
    color:#d9534f;
}

.mt-sheet-cancel{
    margin-top:8px;
    border-top:none;
    border-radius:var(--radius-md);
    background:var(--bg-2);
    font-weight:600;
}