/* 数米美视 — Apple 风格移动端优先：浅色、留白、细线、系统字体 */

:root{
  --bg: #f5f5f7;
  --surface: #ffffff;
  --text: #1d1d1f;
  --text-secondary: #6e6e73;
  --text-tertiary: #86868b;
  --separator: rgba(60, 60, 67, 0.12);
  --separator-strong: rgba(60, 60, 67, 0.18);
  --blue: #0071e3;
  --blue-pressed: #0077ed;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.06);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

/* 跟随系统深色 */
@media (prefers-color-scheme: dark) {
  body:not([data-theme="light"]){
    --bg: #0b0b0f;
    --surface: #15161a;
    --text: #f5f5f7;
    --text-secondary: #b1b1b8;
    --text-tertiary: #8b8b93;
    --separator: rgba(255, 255, 255, 0.14);
    --separator-strong: rgba(255, 255, 255, 0.2);
    --shadow-sm: 0 6px 20px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 16px 42px rgba(0, 0, 0, 0.48);
  }
}

/* 手动指定深色 */
body[data-theme="dark"]{
  --bg: #0b0b0f;
  --surface: #15161a;
  --text: #f5f5f7;
  --text-secondary: #b1b1b8;
  --text-tertiary: #8b8b93;
  --separator: rgba(255, 255, 255, 0.14);
  --separator-strong: rgba(255, 255, 255, 0.2);
  --shadow-sm: 0 6px 20px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 16px 42px rgba(0, 0, 0, 0.48);
}

*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  min-height:100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.app-shell{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}

/* 顶栏：毛玻璃 + 底部分割线 */
.mobile-header{
  position:sticky;
  top:0;
  z-index:20;
  padding:10px 16px 10px;
  padding-top: max(10px, env(safe-area-inset-top));
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  background: rgba(245, 245, 247, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 0.5px solid var(--separator);
}
body[data-theme="dark"] .mobile-header{
  background: rgba(14, 14, 18, 0.72);
}

.brand{
  display:flex;
  align-items:flex-start;
  gap:10px;
  min-width:0;
}
.brand-mark{
  width:32px;
  height:32px;
  border-radius:8px;
  overflow:hidden;
  background:#f43f0e;
  flex-shrink:0;
  box-shadow: var(--shadow-sm);
}
.brand-mark svg{
  width:100%;
  height:100%;
  display:block;
}
.brand-text{ min-width:0; }
.brand-title{
  font-size:17px;
  font-weight:600;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height:1.2;
}
.brand-tagline{
  margin:4px 0 0;
  font-size:11px;
  font-weight:400;
  letter-spacing: 0.02em;
  color: var(--text-tertiary);
  line-height:1.35;
}

.icon-btn{
  appearance:none;
  border:none;
  background: var(--surface);
  color: var(--blue);
  border-radius: var(--radius);
  padding:8px 12px;
  font-size:15px;
  font-weight:500;
  cursor:pointer;
  box-shadow: 0 0 0 0.5px var(--separator-strong);
}
.icon-btn:active{ opacity:0.7; }

.remind-btn{
  appearance:none;
  border:none;
  background: var(--surface);
  color: var(--text);
  border-radius: 999px;
  padding:8px 14px;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:8px;
  box-shadow: var(--shadow-sm);
  border: 0.5px solid var(--separator);
}
.header-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.theme-btn{
  appearance:none;
  border:none;
  background: var(--surface);
  color: var(--text-secondary);
  border-radius: 999px;
  padding:8px 10px;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  border:0.5px solid var(--separator);
}
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  background: var(--blue);
  color:#fff;
  font-size:11px;
  font-weight:600;
}

.routes{
  flex:1;
  padding:12px 16px calc(88px + var(--safe-bottom));
}
.route-page{ padding-bottom:8px; }

.page-title{
  font-size:22px;
  font-weight:600;
  letter-spacing: -0.03em;
  margin:8px 0 12px;
  color: var(--text);
}
.page-title-wrap{
  margin:6px 0 12px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.page-title-wrap > div{ min-width:0; }
.page-sub{
  margin-top:6px;
  color: var(--text-secondary);
  font-size:13px;
  line-height:1.45;
}

/* 分段控件 — iOS 风格 */
.segmented{
  display:flex;
  gap:2px;
  padding:2px;
  border-radius: 10px;
  background: rgba(118, 118, 128, 0.12);
  margin-top:4px;
}
.seg-btn{
  flex:1;
  appearance:none;
  border:0;
  border-radius: 8px;
  padding:10px 12px;
  cursor:pointer;
  background:transparent;
  color: var(--text-secondary);
  font-weight:500;
  font-size:15px;
  transition: color .15s ease, background .15s ease;
}
.seg-btn.active{
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow-sm), 0 0 0 0.5px var(--separator);
}

.upload-block{
  margin-top:14px;
  border-radius: var(--radius-lg);
  border: 0.5px solid var(--separator);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  padding:16px;
}
.upload-title{
  font-size:15px;
  font-weight:600;
  color: var(--text);
  margin-bottom:12px;
}
.upload-note{
  margin-top:12px;
  color: var(--text-tertiary);
  font-size:12px;
  line-height:1.5;
}

.upload-area{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
.upload-grid-2{
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.upload-single-portrait .upload-box{
  width:100%;
  max-width:calc((100% - 8px) / 2);
  margin-inline:auto;
}

.upload-box{
  border-radius: var(--radius);
  border: 1px dashed var(--separator-strong);
  background: var(--bg);
  padding:12px;
  cursor:pointer;
  min-height:146px;
  position:relative;
  transition: border-color .15s ease;
}
.upload-box:hover{ border-color: rgba(0, 113, 227, 0.35); }
.upload-box.dragging{ border-color: var(--blue); background: rgba(0, 113, 227, 0.04); }
.upload-label{ font-weight:600; font-size:13px; color: var(--text); }
.upload-sub{
  margin-top:6px;
  color: var(--text-tertiary);
  font-size:11px;
  line-height:1.4;
}
.upload-preview{
  margin-top:10px;
  border-radius: var(--radius);
  overflow:hidden;
  border: 0.5px solid var(--separator);
  background: #e8e8ed;
  aspect-ratio: 3 / 4;
  min-height:96px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.upload-preview img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:none;
}
.upload-preview.has-img img{ display:block; }
.upload-placeholder{
  color: var(--text-tertiary);
  font-size:12px;
  text-align:center;
  padding:8px 10px;
  line-height:1.35;
}
.upload-placeholder-title{
  color: var(--text-secondary);
  font-size:12px;
  font-weight:600;
}
.upload-placeholder-sub{
  margin-top:4px;
  font-size:11px;
}

.kits-section{ margin-top:20px; }
.section-head{ margin-bottom:12px; }
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
}
.section-title{
  font-size:17px;
  font-weight:600;
  letter-spacing: -0.02em;
  color: var(--text);
}
.section-subtitle{
  margin-top:4px;
  color: var(--text-secondary);
  font-size:13px;
}
.mini-btn{
  appearance:none;
  border:0.5px solid var(--separator-strong);
  background:var(--surface);
  color:var(--text-secondary);
  border-radius:999px;
  padding:7px 11px;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
}
.mini-btn.active{
  color:var(--blue);
  border-color:rgba(0,113,227,0.45);
  background:rgba(0,113,227,0.08);
}

/* 首页「我的收藏」筛选：iOS 风胶囊 */
.fav-filter-chip{
  appearance:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:0.5px solid rgba(60,60,67,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(250,250,252,.92));
  color:#3a3a3c;
  border-radius:100px;
  padding:8px 14px 8px 12px;
  font-size:13px;
  font-weight:600;
  letter-spacing:-0.02em;
  cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.04), inset 0 1px 0 rgba(255,255,255,.9);
  -webkit-tap-highlight-color:transparent;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease, color .12s ease;
}
.fav-filter-chip:active{
  transform:scale(0.98);
}
.fav-filter-chip__icon{
  display:flex;
  color:#8e8e93;
  line-height:0;
  transition:color .12s ease;
}
.fav-filter-chip__icon svg path{
  fill:none;
  stroke:currentColor;
  stroke-width:1.35;
  stroke-linejoin:round;
}
.fav-filter-chip.active{
  color:var(--blue);
  border-color:rgba(0,113,227,0.35);
  background:rgba(0,113,227,0.09);
  box-shadow:0 1px 3px rgba(0,113,227,.08), inset 0 1px 0 rgba(255,255,255,.85);
}
.fav-filter-chip.active .fav-filter-chip__icon{
  color:var(--blue);
}
.fav-filter-chip.active .fav-filter-chip__icon svg path{
  fill:rgba(0,113,227,0.18);
  stroke:var(--blue);
}

.kit-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}

.kit-card{
  border-radius: var(--radius-lg);
  border: 0.5px solid var(--separator);
  background: var(--surface);
  overflow:hidden;
  cursor:pointer;
  box-shadow: var(--shadow-sm);
  transition: transform .12s ease, box-shadow .12s ease;
}
.kit-card:active{ transform: scale(0.99); }
.kit-card-main{ padding:14px; }
.kit-card-main{
  position:relative;
}
.kit-fav-btn{
  position:absolute;
  right:10px;
  top:10px;
  width:28px;
  height:28px;
  border-radius:999px;
  border:0.5px solid var(--separator);
  background:rgba(255,255,255,0.92);
  color:#a1a1a6;
  cursor:pointer;
  font-size:14px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.kit-fav-btn.active{
  color:#ff375f;
  border-color:rgba(255,55,95,.35);
}
.kit-card-title{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  padding-right:38px;
}
.kit-card-name{
  font-weight:600;
  font-size:15px;
  line-height:1.25;
  letter-spacing: -0.02em;
  color: var(--text);
}
.kit-card-tag{
  margin-top:4px;
  color: var(--text-secondary);
  font-size:12px;
  line-height:1.35;
}
.kit-price{
  font-weight:600;
  font-size:15px;
  color: var(--text);
  white-space:nowrap;
}
.kit-thumb-row{
  margin-top:12px;
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:6px;
}
.kit-thumb{
  border-radius:6px;
  overflow:hidden;
  border: 0.5px solid var(--separator);
  aspect-ratio: 1 / 1.1;
  background: #e8e8ed;
  position:relative;
}
.kit-thumb img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.kit-video{
  position:absolute;
  inset:auto 4px 4px 4px;
  height:18px;
  border-radius:999px;
  background: rgba(0,0,0,.45);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  color:#fff;
  font-size:9px;
  font-weight:600;
}
.kit-video .tri{
  width:0;height:0;
  border-left:5px solid #fff;
  border-top:3px solid transparent;
  border-bottom:3px solid transparent;
}

.bottom-nav{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:50;
  padding:8px 16px calc(8px + var(--safe-bottom));
  background: rgba(245, 245, 247, 0.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 0.5px solid var(--separator);
  display:flex;
  gap:8px;
}
.nav-btn{
  flex:1;
  appearance:none;
  border:none;
  background: transparent;
  color: var(--text-secondary);
  border-radius: var(--radius);
  padding:11px 8px;
  cursor:pointer;
  font-weight:600;
  font-size:14px;
  line-height:1.15;
  letter-spacing: 0;
}
.nav-btn.active{
  color: var(--blue);
  background: rgba(0, 113, 227, 0.08);
}

.waterfall{
  column-count:2;
  column-gap:10px;
}
.wf-item{
  break-inside: avoid;
  margin:0 0 10px;
  border-radius: var(--radius);
  overflow:hidden;
  border: 0.5px solid var(--separator);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.wf-item img{
  width:100%;
  display:block;
  height:auto;
  vertical-align:middle;
}
.wf-item-wrap{ position:relative; }
.wf-cta{
  position:absolute;
  left:8px; right:8px; bottom:8px;
  padding:8px 10px;
  border-radius:10px;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(12px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  opacity:0;
  transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease;
}
.wf-item:active .wf-cta,
.wf-item:hover .wf-cta{
  opacity:1;
  transform: translateY(0);
}
.wf-cta-title{
  font-weight:600;
  font-size:11px;
  color: var(--text);
  line-height:1.2;
}
.wf-cta-btn{
  appearance:none;
  border:none;
  background: var(--blue);
  color:#fff;
  font-weight:600;
  border-radius:8px;
  padding:6px 10px;
  cursor:pointer;
  white-space:nowrap;
  font-size:11px;
}

/* 弹窗 */
.modal{
  position:fixed; inset:0;
  z-index:200;
  display:none;
}
.modal.open{ display:block; }
.modal-mask{
  position:absolute; inset:0;
  background: rgba(0,0,0,.32);
  backdrop-filter: blur(4px);
}
.modal-card{
  position:absolute;
  left:50%; top:50%;
  transform: translate(-50%,-50%);
  width:min(420px, calc(100vw - 32px));
  max-height: min(90dvh, 720px);
  overflow:auto;
  border-radius: 14px;
  border: 0.5px solid var(--separator);
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: var(--shadow-md);
}
.modal-card.narrow{ width:min(380px, calc(100vw - 32px)); }
.modal-head{
  padding:16px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  border-bottom: 0.5px solid var(--separator);
}
.modal-title{ font-size:17px; font-weight:600; letter-spacing: -0.02em; color: var(--text); }
.modal-subtitle{
  margin-top:4px;
  color: var(--text-secondary);
  font-size:13px;
  line-height:1.4;
}
.modal-body{
  padding:16px;
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}

.login-modal-card{
  width:min(392px, calc(100vw - 28px));
}
.login-modal-body{
  gap:12px;
}
.login-brand-hero{
  border-radius:14px;
  border:0.5px solid var(--separator);
  background: linear-gradient(160deg, #fff 0%, #fff6f2 100%);
  padding:14px;
  display:flex;
  align-items:center;
  gap:10px;
}
.login-brand-logo{
  width:42px;
  height:42px;
  border-radius:10px;
  overflow:hidden;
  flex-shrink:0;
  box-shadow: var(--shadow-sm);
}
.login-brand-logo svg{
  width:100%;
  height:100%;
  display:block;
}
.login-brand-text{
  font-size:20px;
  font-weight:700;
  letter-spacing:-0.03em;
  color:#111827;
}
.login-field{
  display:grid;
  gap:6px;
}
.login-field span{
  font-size:12px;
  font-weight:600;
  color:var(--text-secondary);
}
.login-field input{
  width:100%;
  border:0.5px solid var(--separator-strong);
  background:#fff;
  border-radius:12px;
  padding:12px 13px;
  font-size:14px;
  color:var(--text);
  outline:none;
}
.login-field input:focus{
  border-color: rgba(0,113,227,.45);
  box-shadow:0 0 0 3px rgba(0,113,227,.08);
}
.login-code-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
}
.login-code-row .ghost-btn{
  white-space:nowrap;
  padding:0 10px;
  min-width:94px;
  border-radius:12px;
}
.login-submit{
  margin-top:4px;
}
.login-footnote{
  margin-top:2px;
  font-size:11px;
  color:var(--text-tertiary);
}
.pay-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-top:4px;
}
.pay-label{ color: var(--text-secondary); font-weight:500; font-size:13px; }
.pay-value{
  font-weight:600;
  font-size:28px;
  letter-spacing: -0.03em;
  color: var(--text);
}
.pay-id{
  font-weight:400;
  font-size:11px;
  color: var(--text-tertiary);
  word-break:break-all;
}
.qr-title{
  margin-top:14px;
  font-size:12px;
  color: var(--text-secondary);
  font-weight:600;
}
.qr-img{
  width:200px;
  height:200px;
  margin-top:8px;
  background:#fff;
  border-radius: var(--radius);
  padding:8px;
  border: 0.5px solid var(--separator);
}
.qr-hint{
  margin-top:8px;
  font-size:12px;
  color: var(--text-tertiary);
  line-height:1.45;
}
.pay-status{
  border: 0.5px solid var(--separator);
  background: var(--bg);
  border-radius: var(--radius);
  padding:12px;
}
.pay-status-title{
  color: var(--text-secondary);
  font-size:12px;
  font-weight:600;
}
.pay-status-line{
  margin-top:6px;
  font-weight:600;
  font-size:15px;
  color: var(--text);
}
.pay-status-sub{
  margin-top:4px;
  color: var(--text-secondary);
  font-size:13px;
}
.pay-actions{
  display:flex;
  gap:8px;
  margin-top:12px;
}
.pay-actions .ghost-btn,
.pay-actions .primary-btn{ flex:1; }

.primary-btn{
  appearance:none;
  border:none;
  background: var(--blue);
  color:#fff;
  font-weight:600;
  border-radius: 12px;
  padding:14px 16px;
  font-size:17px;
  cursor:pointer;
}
.primary-btn:active{ background: var(--blue-pressed); }
.ghost-btn{
  appearance:none;
  border: 0.5px solid var(--separator-strong);
  background: var(--surface);
  color: var(--blue);
  border-radius: 12px;
  padding:14px 16px;
  font-size:17px;
  font-weight:500;
  cursor:pointer;
}
.ghost-btn.active{
  color: #ff375f;
  border-color: rgba(255,55,95,.35);
  background: rgba(255,55,95,.08);
}
.primary-btn:disabled,
.ghost-btn:disabled,
.icon-btn:disabled{
  opacity:.4;
  cursor:not-allowed;
}

.retouch-desc{
  border: 0.5px solid var(--separator);
  background: var(--bg);
  border-radius: var(--radius);
  padding:14px;
}
.retouch-price{ font-size:12px; color: var(--text-secondary); font-weight:600; }
.retouch-price-num{
  font-size:28px;
  font-weight:600;
  color: var(--text);
  letter-spacing: -0.02em;
}
.retouch-text{
  margin-top:10px;
  color: var(--text-secondary);
  font-size:13px;
  line-height:1.55;
}
.retouch-actions{ margin-top:14px; }

.result-download-btn{
  align-self:flex-start;
  padding:8px 12px;
  font-size:12px;
  font-weight:600;
  border-radius:999px;
  white-space:nowrap;
  color:#2563eb;
  border-color:rgba(37,99,235,.28);
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(243,247,255,.96));
  box-shadow:0 1px 2px rgba(37,99,235,.08);
}
.result-gallery-strip{
  margin-top:10px;
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding-bottom:4px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.result-gallery-indicator{
  margin:6px 12px 0;
  display:flex;
  justify-content:flex-end;
}
.result-gallery-indicator span{
  font-size:11px;
  color:var(--text-tertiary);
  background:var(--bg);
  border:0.5px solid var(--separator);
  border-radius:999px;
  padding:3px 8px;
}
.result-gallery-item{
  position:relative;
  appearance:none;
  padding:0;
  outline:none;
  cursor:pointer;
  flex:0 0 72%;
  max-width:280px;
  border-radius:12px;
  overflow:hidden;
  border:0.5px solid var(--separator);
  background:#0f0f12;
  aspect-ratio:3/4;
  scroll-snap-align:start;
}
.result-gallery-item.active{
  box-shadow:0 0 0 2px rgba(0,113,227,.38);
}
.result-gallery-item img,
.result-gallery-item video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.result-gallery-badge{
  position:absolute;
  left:8px;
  bottom:8px;
  font-size:11px;
  color:#fff;
  background:rgba(0,0,0,.48);
  border-radius:6px;
  padding:4px 7px;
}

/* 套图介绍 */
.kit-intro-hero{ margin:10px 0 12px; }
.hero-gallery{
  border-radius: var(--radius-lg);
  overflow:hidden;
  border: 0.5px solid var(--separator);
  background: #000;
  position:relative;
  aspect-ratio: 9 / 16;
}
.hero-img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.hero-video{
  position:absolute;
  inset:0;
  height:100%;
  border-radius: 0;
  overflow:hidden;
  border:0;
  background: #000;
}
.hero-video-el{
  width:100%;
  height:100%;
  display:block;
  vertical-align:middle;
  object-fit:cover;
  max-height:none;
}

.kit-gallery-preview{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
  margin-top:8px;
}
.kit-gallery-preview img{
  width:100%;
  border-radius: var(--radius);
  border: 0.5px solid var(--separator);
  background: #e8e8ed;
  height:140px;
  object-fit:cover;
}
.kit-gallery-item{
  border:0;
  padding:0;
  background:transparent;
  border-radius: var(--radius);
  overflow:hidden;
  cursor:pointer;
  outline:none;
  box-shadow: 0 0 0 0 transparent;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.kit-gallery-item img,
.kit-gallery-item .kit-gallery-video{
  pointer-events:none;
}
.kit-gallery-item.active{
  box-shadow: 0 0 0 2px rgba(0,113,227,.35);
}

.kit-video-tile{
  height:140px;
  border-radius: var(--radius);
  border: 0.5px solid var(--separator);
  background: #000;
  position:relative;
  overflow:hidden;
}
.kit-gallery-video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.kit-video-badge{
  position:absolute;
  left:8px;
  bottom:8px;
  padding:4px 8px;
  border-radius:6px;
  background: rgba(0,0,0,.45);
  color:#fff;
  font-size:10px;
  font-weight:600;
  backdrop-filter: blur(8px);
}
.kit-video-tile--poster{
  background-size:cover;
  background-position:center;
}

.kit-intro-pricebar{
  margin-top:16px;
  border-radius: var(--radius-lg);
  border: 0.5px solid var(--separator);
  background: var(--surface);
  padding:16px;
  box-shadow: var(--shadow-sm);
}
.price-title{ color: var(--text-secondary); font-weight:600; font-size:12px; }
.price-value{
  margin-top:6px;
  font-size:28px;
  font-weight:600;
  letter-spacing: -0.03em;
  color: var(--text);
}
.price-sub{
  margin-top:8px;
  color: var(--text-secondary);
  font-size:13px;
  line-height:1.45;
}
.price-actions{
  display:flex;
  gap:8px;
  margin-top:14px;
}
.price-actions .primary-btn,
.price-actions .ghost-btn{ flex:1; font-size:15px; padding:12px 14px; }

.result-card{
  border-radius: var(--radius-lg);
  border: 0.5px solid var(--separator);
  background: var(--surface);
  overflow:hidden;
  box-shadow: var(--shadow-sm);
}
.result-poster{
  width:100%;
  display:block;
  aspect-ratio: 9 / 16;
  object-fit:cover;
  background: #e8e8ed;
}
.result-meta{
  padding:14px 16px;
  color: var(--text-secondary);
  font-size:13px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.result-actions{
  padding:0 16px 16px;
  display:flex;
  gap:8px;
}
.result-actions button{ flex:1; font-size:15px; padding:12px; }
.result-hint{
  margin-top:12px;
  color: var(--text-tertiary);
  font-size:12px;
  line-height:1.55;
}

.mine-section{ margin-top:8px; }
.mine-head{
  font-weight:600;
  font-size:15px;
  margin:4px 0 10px;
  color: var(--text);
}
.mine-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.mine-item{
  border-radius: var(--radius-lg);
  border: 0.5px solid var(--separator);
  background: var(--surface);
  padding:14px;
  box-shadow: var(--shadow-sm);
}
.mine-item-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.mine-item-title{
  font-weight:600;
  font-size:15px;
  color: var(--text);
}
.mine-item-sub{
  margin-top:6px;
  color: var(--text-secondary);
  font-size:12px;
  line-height:1.45;
}
.mine-actions{
  margin-top:12px;
  display:flex;
  gap:8px;
}
.mine-actions button{ flex:1; font-size:14px; padding:10px; }

.list-card{ }

@media (min-width: 920px){
  .routes{ max-width: none; margin: 0; padding-left: max(16px, calc(50vw - 200px)); padding-right: max(16px, calc(50vw - 200px)); }
  .bottom-nav{
    max-width: 430px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 14px 14px 0 0;
    border: 0.5px solid var(--separator);
    border-bottom: none;
  }
  .waterfall{ column-count:2; }
}