/* 搭肩空投 H5 — Design System */
:root{
  --bg:#faf9f6;--bg2:#fff;--bg3:#f2f0eb;
  --tx:#2d2b28;--tx2:#6b6b6b;--tx3:#9e9e9e;
  --br:#e8e5df;--br2:#d4d1c8;
  --ac:#ff6b4a;--ac2:#e55a3c;--acbg:#fff0eb;
  --rd:#e53935;--rdbg:#fff0f0;
  --gn:#00897b;--gnbg:#e0f7f2;
  --am:#f57f17;--ambg:#fff8e7;
  --sh:0 1px 2px rgba(0,0,0,.04),0 2px 8px rgba(0,0,0,.06);
  --sh2:0 4px 16px rgba(0,0,0,.08),0 1px 4px rgba(0,0,0,.04);
  --r:12px;--r2:16px;--r3:8px;
  --f:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,"Helvetica Neue",sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:var(--f);font-size:15px;line-height:1.5;color:var(--tx);background:var(--bg);overflow:hidden;height:100dvh}
button,input{font-family:var(--f)}
input{outline:none}
button{cursor:pointer;border:none;background:none;font-size:inherit;color:inherit}

#app{display:flex;height:100dvh}

/* ===== Sidebar ===== */
#sidebar{
  width:260px;flex-shrink:0;background:#3d3832;color:#fff;
  display:flex;flex-direction:column;z-index:20;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.sb-brand{padding:20px 20px 16px;display:flex;align-items:center;gap:10px}
.sb-logo{font-size:22px}
.sb-name{font-size:17px;font-weight:600;letter-spacing:-.01em}
.sb-user{display:flex;align-items:center;gap:10px;padding:12px 20px;margin:0 12px;border-radius:var(--r3);background:rgba(255,255,255,.08)}
.sb-avatar{
  width:36px;height:36px;border-radius:50%;background:var(--ac);
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:600;flex-shrink:0
}
.sb-nickname{font-size:14px;font-weight:500}
.sb-posture{font-size:12px;opacity:.5}
.sb-nav{flex:1;padding:16px 12px;display:flex;flex-direction:column;gap:2px}
.sn-item{
  display:flex;align-items:center;gap:10px;padding:10px 12px;
  border-radius:var(--r3);font-size:14px;color:rgba(255,255,255,.6);
  transition:all .15s;text-decoration:none;cursor:pointer
}
.sn-item:hover{background:rgba(255,255,255,.08);color:rgba(255,255,255,.9)}
.sn-item.active{background:var(--ac);color:#fff;font-weight:500}
.sn-icon{font-size:16px;width:20px;text-align:center}
.sb-footer{padding:12px;border-top:1px solid rgba(255,255,255,.08)}

/* ===== Main ===== */
#main{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--bg2)}
.topbar{
  display:flex;align-items:center;gap:8px;padding:0 16px;height:52px;
  border-bottom:1px solid var(--br);flex-shrink:0;background:var(--bg2);
  position:sticky;top:0;z-index:10
}
.tb-btn{
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r3);color:var(--tx2);transition:all .15s
}
.tb-btn:hover{background:var(--bg3);color:var(--tx)}
.tb-title{font-size:16px;font-weight:600;flex:1;text-align:center;letter-spacing:-.01em}

/* ===== Chat Area ===== */
.chat-area{flex:1;display:flex;flex-direction:column;min-height:0;overflow-y:auto}
.messages{flex:1;padding:20px 16px;scroll-behavior:smooth}
.messages::-webkit-scrollbar{width:0}
.messages::-webkit-scrollbar-thumb{background:transparent}
.chat-area::-webkit-scrollbar{width:4px}
.chat-area::-webkit-scrollbar-thumb{background:var(--br2);border-radius:2px}

/* ===== Onboard ===== */
.onboard{text-align:center;padding:48px 20px 20px;animation:fadeUp .5s}
.ob-hero{font-size:56px;margin-bottom:20px;line-height:1}
.ob-title{font-size:22px;font-weight:700;line-height:1.35;letter-spacing:-.02em;margin-bottom:8px;color:var(--tx)}
.ob-desc{font-size:15px;color:var(--tx2);margin-bottom:32px}
.ob-actions{display:flex;flex-direction:column;gap:10px;max-width:360px;margin:0 auto}
.oba-btn{
  display:flex;align-items:center;gap:14px;padding:16px;
  background:var(--bg);border:1px solid var(--br);border-radius:var(--r2);
  text-align:left;transition:all .2s;cursor:pointer;width:100%
}
.oba-btn:hover{background:var(--bg2);border-color:var(--br2);box-shadow:var(--sh);transform:translateY(-1px)}
.oba-btn:active{transform:translateY(0)}
.oba-icon{font-size:28px;flex-shrink:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:var(--r3);background:var(--bg)}
.oba-distill .oba-icon{background:#e3f2fd}
.oba-calendar .oba-icon{background:#fff3e0}
.oba-ipcard .oba-icon{background:#f3e5f5}
.oba-text{display:flex;flex-direction:column;gap:2px}
.oba-text strong{font-size:15px;font-weight:600;color:var(--tx)}
.oba-text small{font-size:13px;color:var(--tx2);line-height:1.3}
.oba-badge{
  display:inline-block;padding:2px 8px;margin-top:2px;
  border-radius:6px;font-size:11px;font-weight:600;
  background:var(--acbg);color:var(--ac);align-self:flex-start
}
.oba-arrow{
  font-size:18px;color:var(--tx3);flex-shrink:0;
  transition:all .2s
}
.oba-btn:hover .oba-arrow{color:var(--ac);transform:translateX(3px)}
.oba-btn:active{transform:scale(.97)}

/* ===== Distill Progress ===== */
.distill-progress{
  position:sticky;top:0;z-index:10;
  flex-shrink:0;padding:8px 12px;background:var(--bg2);
  border-bottom:1px solid var(--br)
}
.dp-steps{
  display:flex;align-items:center;justify-content:center;gap:0
}
.dp-step{
  padding:4px 10px;border-radius:14px;font-size:12px;font-weight:500;
  color:var(--tx3);background:var(--bg);border:1px solid var(--br);
  white-space:nowrap;transition:all .3s;position:relative
}
.dp-step.done{background:#e8f5e9;color:#2e7d32;border-color:#a5d6a7}
.dp-step.active{background:var(--ac);color:#fff;border-color:var(--ac);font-weight:600;box-shadow:0 0 0 3px var(--acbg);animation:dpPulse 1.5s ease-in-out infinite}
@keyframes dpPulse{0%,100%{box-shadow:0 0 0 3px var(--acbg)}50%{box-shadow:0 0 0 6px var(--acbg)}}
.dp-line{
  width:16px;height:1.5px;background:var(--br);flex-shrink:0;transition:all .3s
}
.dp-line.done{background:var(--gn)}
.dp-line.active{background:var(--ac)}

/* ===== Quick Tags ===== */
.quick-tags{
  display:flex;justify-content:center;gap:8px;
  padding:0 16px 8px;flex-shrink:0
}
.qt-tag{
  padding:6px 14px;border-radius:20px;font-size:13px;font-weight:500;
  border:1.5px solid var(--br);background:var(--bg2);color:var(--tx2);
  cursor:pointer;transition:all .2s;white-space:nowrap
}
.qt-tag:hover{border-color:var(--ac);color:var(--ac);background:var(--acbg)}
.qt-tag.active{border-color:var(--ac);background:var(--ac);color:#fff;font-weight:600}
.qt-tag:active{transform:scale(.95)}

/* ===== Messages ===== */
.msg-group{display:flex;flex-direction:column;gap:4px;margin-bottom:16px;animation:fadeUp .3s}
.msg-group.by-user{align-items:flex-end}
.msg-group.by-agent{align-items:flex-start}
.msg-bubble{
  max-width:78%;padding:10px 14px;border-radius:var(--r2);
  font-size:15px;line-height:1.55;word-break:break-word;
  position:relative
}
.by-user .msg-bubble{background:var(--ac);color:#fff;border-bottom-right-radius:4px}
.by-agent .msg-bubble{background:var(--bg);color:var(--tx);border-bottom-left-radius:4px}
.msg-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px;color:var(--tx3)}
.by-agent .msg-label{padding-left:4px}

/* Agent-specific badges */
.agent-badge{
  display:inline-flex;align-items:center;gap:4px;padding:3px 10px;
  border-radius:20px;font-size:12px;font-weight:600;margin-bottom:6px
}
.agent-badge.reader{background:#e3f2fd;color:#1565c0}
.agent-badge.crafter{background:#e0f2f1;color:#00695c}
.agent-badge.visualist{background:#fce4ec;color:#c62828}
.agent-badge.curator{background:#ede7f6;color:#4527a0}
.agent-badge.calendar{background:#fff8e1;color:#e65100}
.agent-badge.ipcard{background:#e8f5e9;color:#2e7d32}
.agent-badge.buddy{background:var(--bg);color:var(--tx2)}
.agent-badge.distiller{background:#fff3e0;color:#e65100}
.agent-badge.blaster{background:#fff0e0;color:#bf360c;font-weight:700;animation:dpPulse 2s ease-in-out infinite}

/* ===== Cards ===== */
.card{
  background:var(--bg2);border:1px solid var(--br);border-radius:var(--r2);
  padding:16px;margin-bottom:10px;transition:all .15s;
  animation:fadeUp .3s
}
.card:hover{border-color:var(--br2);box-shadow:var(--sh)}
.card-title{font-size:16px;font-weight:600;margin-bottom:4px;letter-spacing:-.01em}
.card-subtitle{font-size:13px;color:var(--tx2);margin-bottom:10px}
.card-body{font-size:14px;color:var(--tx2);line-height:1.55;margin-bottom:12px}
.card-meta{font-size:12px;color:var(--tx3);display:flex;gap:12px;flex-wrap:wrap}
.card-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.card-actions button{
  padding:8px 16px;border-radius:8px;font-size:13px;font-weight:500;
  transition:all .15s;white-space:nowrap
}
.btn-ac{background:var(--ac);color:#fff}.btn-ac:hover{background:var(--ac2)}
.btn-ghost{background:var(--bg);color:var(--tx);border:1px solid var(--br)}
.btn-ghost:hover{background:var(--bg3);border-color:var(--br2)}
.btn-danger{background:var(--rdbg);color:var(--rd)}.btn-danger:hover{background:#ffe0e0}

/* Solution card */
.sol-card{border-left:3px solid var(--ac);padding-left:13px}
.sol-card .card-title{color:var(--ac)}
.sol-card .card-detail{font-size:13px;color:var(--tx2);line-height:1.5}
.sol-card .card-detail div{margin-bottom:3px}

/* Campaign card */
.camp-card{border-left:3px solid var(--am)}
.camp-card .card-title{color:var(--am)}

/* IP card */
.ipc-card{border-left:3px solid var(--gn)}
.ipc-card .card-title{color:var(--gn)}

/* ===== Composer ===== */
.composer{padding:12px 16px 16px;flex-shrink:0;background:var(--bg2)}
.composer-inner{
  display:flex;align-items:center;gap:8px;
  background:var(--bg);border:2px solid var(--br);
  border-radius:var(--r2);padding:6px 6px 6px 16px;
  transition:border-color .2s,box-shadow .2s
}
.composer-inner:focus-within{border-color:var(--ac);box-shadow:0 0 0 3px var(--acbg)}
.composer-inner input{
  flex:1;border:none;background:none;font-size:15px;padding:6px 0;
  color:var(--tx)
}
.composer-inner input::placeholder{color:var(--tx3)}
.send-btn{
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  border-radius:10px;background:var(--ac);color:#fff;
  transition:all .15s;flex-shrink:0
}
.send-btn:hover{background:var(--ac2);transform:scale(1.05)}
.send-btn:active{transform:scale(.95)}
.send-btn:disabled{background:var(--br);color:var(--tx3);cursor:not-allowed;transform:none}
.composer-hint{font-size:11px;color:var(--tx3);text-align:center;margin-top:8px}

/* ===== Agent Streaming ===== */
.streaming-indicator{
  display:flex;align-items:center;gap:8px;padding:8px 14px;
  background:var(--bg);border-radius:var(--r2);font-size:13px;color:var(--tx2);
  animation:pulse 2s ease-in-out infinite
}
.stream-dot{width:6px;height:6px;border-radius:50%;background:var(--ac)}
@keyframes pulse{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ===== Panels ===== */
.panel{
  position:fixed;top:0;left:0;right:0;bottom:0;background:var(--bg2);
  z-index:30;display:none;flex-direction:column
}
.panel.active{display:flex}
.panel-bar{
  display:flex;align-items:center;gap:12px;padding:12px 16px;
  border-bottom:1px solid var(--br);flex-shrink:0;height:52px
}
.panel-bar h2{font-size:17px;font-weight:600}
.panel-back{padding:8px 12px;border-radius:8px;font-size:14px;color:var(--tx2)}
.panel-back:hover{background:var(--bg)}
.panel-body{flex:1;overflow-y:auto;padding:16px}

/* ===== Overlay ===== */
.overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:15;
  opacity:0;pointer-events:none;transition:opacity .3s
}
.overlay.active{opacity:1;pointer-events:auto}

/* ===== Toast ===== */
.toast{
  position:fixed;bottom:32px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--tx);color:#fff;padding:10px 20px;border-radius:var(--r2);
  font-size:14px;font-weight:500;z-index:50;opacity:0;transition:all .25s cubic-bezier(.4,0,.2,1);
  pointer-events:none;white-space:nowrap
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.error{background:var(--rd)}

/* ===== Empty State ===== */
.empty-state{text-align:center;padding:48px 20px;color:var(--tx3)}
.empty-state .es-icon{font-size:40px;margin-bottom:12px}
.empty-state .es-title{font-size:16px;font-weight:600;color:var(--tx2);margin-bottom:4px}
.empty-state .es-desc{font-size:14px}

/* ===== Skeleton ===== */
.skeleton{background:var(--bg);border-radius:8px;animation:shimmer 1.5s infinite}
@keyframes shimmer{0%{opacity:.5}50%{opacity:1}100%{opacity:.5}}

/* ===== Login Page ===== */
.login-page{
  position:fixed;inset:0;background:var(--bg);z-index:100;
  display:flex;align-items:center;justify-content:center;padding:20px
}
.lp-card{
  background:var(--bg2);border-radius:20px;padding:40px 32px;text-align:center;
  max-width:360px;width:100%;box-shadow:var(--sh2)
}
.lp-hero{font-size:56px;margin-bottom:16px}
.lp-card h2{font-size:20px;font-weight:700;line-height:1.4;margin-bottom:24px;letter-spacing:-.01em}
.lp-card input{
  width:100%;padding:14px 16px;border:2px solid var(--br);border-radius:12px;
  font-size:16px;text-align:center;margin-bottom:16px;transition:border-color .2s
}
.lp-card input:focus{border-color:var(--ac);outline:none}
.lp-hint{font-size:12px;color:var(--tx3);margin-top:16px}

/* Login welcome step */
.lp-desc{font-size:15px;color:var(--tx2);margin-bottom:24px;line-height:1.6}
.lp-desc strong{color:var(--tx)}
.lp-features{text-align:left;margin-bottom:28px;display:flex;flex-direction:column;gap:10px}
.lp-feat{
  display:flex;align-items:center;gap:10px;padding:12px 14px;
  background:var(--bg);border-radius:var(--r3);font-size:14px;color:var(--tx2)
}
.lp-feat span{font-size:20px;flex-shrink:0}
.lp-next-btn{width:100%;padding:14px;font-size:16px;border-radius:12px;margin-top:4px}

/* ===== Responsive ===== */
@media(max-width:640px){
  #sidebar{
    position:fixed;left:0;top:0;bottom:0;transform:translateX(-100%)
  }
  #sidebar.open{transform:translateX(0)}
  #main{margin-left:0}
  .msg-bubble{max-width:88%}
  .onboard{padding:32px 12px 12px}
  .ob-title{font-size:20px}
  .ob-actions{max-width:100%}
}

/* ══════════ 防盗图：禁止交互 + 水印 ══════════ */
.msg-bubble img {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  pointer-events: none;
  position: relative;
}
.msg-bubble img::after {
  content: "搭肩";
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0,0,0,.4);
  color: rgba(255,255,255,.6);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  pointer-events: none;
  z-index: 1;
}
/* 水印容器方案——包裹图片加 overlay */
.img-watermark {
  position: relative;
  display: inline-block;
  max-width: 100%;
}
.img-watermark::after {
  content: "搭肩";
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: rgba(0,0,0,.35);
  color: rgba(255,255,255,.55);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  pointer-events: none;
}
body {
  -webkit-user-select: none;
  user-select: none;
}
.msg-bubble {
  -webkit-user-select: text;
  user-select: text;
}

/* ══════════ 加载动画：三点弹跳 ══════════ */
.loading-dots { display: inline-block; margin-left: 4px; }
.loading-dots span {
  display: inline-block;
  animation: dotBounce 1.4s infinite;
  font-weight: 700;
  font-size: 20px;
  line-height: 0.6;
}
.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dotBounce {
  0%, 80%, 100% { opacity: 0; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-2px); }
}

/* ══════════ Portfolio Cards ══════════ */
.pf-section-title {
  font-size: 13px; font-weight: 600; color: var(--tx3);
  padding: 8px 0 4px; text-transform: uppercase; letter-spacing: .04em;
}
.pf-section-title:first-child { padding-top: 0; }
.pf-card {
  display: flex; gap: 12px; background: var(--bg2);
  border: 1px solid var(--br); border-radius: var(--r2);
  padding: 12px; margin-bottom: 10px;
  transition: all .15s; animation: fadeUp .3s;
}
.pf-card:hover { border-color: var(--br2); box-shadow: var(--sh); }
.pf-card-img {
  width: 100px; height: 100px; border-radius: 10px;
  object-fit: cover; flex-shrink: 0; background: var(--bg);
}
.pf-card-content {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px;
}
.pf-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.pf-tag {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 11px; font-weight: 500; background: var(--acbg); color: var(--ac);
}
.pf-slogan { font-size: 14px; font-weight: 600; color: var(--tx); line-height: 1.3; }
.pf-meta { font-size: 12px; color: var(--tx3); }
.pf-actions { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.pf-actions button {
  padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 500; transition: all .15s;
}
/* Detail expand */
.pf-detail { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--br); display: none; }
.pf-detail.open { display: block; }
.pf-detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pf-detail-img {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px;
  cursor: pointer; background: var(--bg);
}
/* Upload button in panel header */
.pf-upload-btn {
  margin-left: auto; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; background: var(--ac); color: #fff;
  font-size: 20px; font-weight: 600; cursor: pointer; transition: all .15s;
}
.pf-upload-btn:hover { background: var(--ac2); transform: scale(1.05); }
.pf-upload-input { display: none; }

/* ══════════ Asset Assembler Modal ══════════ */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 40;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; animation: fadeIn .2s;
}
.modal-card {
  background: var(--bg2); border-radius: 16px; max-width: 420px;
  width: 100%; max-height: 85vh; display: flex; flex-direction: column;
  box-shadow: var(--sh2);
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px; border-bottom: 1px solid var(--br); flex-shrink: 0;
}
.modal-header h3 { font-size: 17px; font-weight: 600; }
.modal-close {
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; color: var(--tx2); font-size: 20px; cursor: pointer; flex-shrink: 0;
}
.modal-close:hover { background: var(--bg); }
.modal-body {
  flex: 1; overflow-y: auto; padding: 16px;
}
.modal-section { margin-bottom: 16px; }
.modal-section h4 {
  font-size: 13px; font-weight: 600; color: var(--tx2);
  margin-bottom: 8px; text-transform: uppercase; letter-spacing: .03em;
}
/* Asset Grid */
.asset-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.asset-item {
  position: relative; border: 2px solid var(--br); border-radius: 10px;
  overflow: hidden; cursor: pointer; transition: all .15s;
}
.asset-item:hover { border-color: var(--br2); }
.asset-item.selected {
  border-color: var(--ac); box-shadow: 0 0 0 2px var(--acbg);
}
.asset-item img {
  width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
}
.asset-item .asset-label {
  padding: 4px 8px; font-size: 11px; color: var(--tx2);
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.asset-check {
  position: absolute; top: 6px; right: 6px; width: 22px; height: 22px;
  border-radius: 50%; background: var(--ac); color: #fff;
  display: none; align-items: center; justify-content: center; font-size: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.asset-item.selected .asset-check { display: flex; }
/* Slogan list */
.slogan-list { display: flex; flex-direction: column; gap: 6px; }
.slogan-item {
  padding: 10px 12px; border: 1.5px solid var(--br); border-radius: 10px;
  cursor: pointer; font-size: 14px; font-weight: 500; transition: all .15s;
}
.slogan-item:hover { border-color: var(--br2); background: var(--bg); }
.slogan-item.selected { border-color: var(--ac); background: var(--acbg); color: var(--ac); }
/* Carrier options */
.carrier-list { display: flex; gap: 8px; flex-wrap: wrap; }
.carrier-item {
  padding: 8px 14px; border: 1.5px solid var(--br); border-radius: 20px;
  cursor: pointer; font-size: 13px; font-weight: 500; transition: all .15s;
}
.carrier-item:hover { border-color: var(--br2); }
.carrier-item.selected { border-color: var(--ac); background: var(--acbg); color: var(--ac); }
/* Modal input */
.modal-input {
  width: 100%; padding: 10px 12px; border: 1.5px solid var(--br);
  border-radius: 10px; font-size: 14px; font-family: var(--f); resize: none;
}
.modal-input:focus { border-color: var(--ac); outline: none; box-shadow: 0 0 0 3px var(--acbg); }
/* Modal footer */
.modal-footer { padding: 12px 16px; border-top: 1px solid var(--br); flex-shrink: 0; }
.modal-footer .btn-ac {
  width: 100%; padding: 12px; border-radius: 12px; font-size: 15px; font-weight: 600;
}
.modal-footer .btn-ghost {
  width: 100%; padding: 8px; border-radius: 10px; font-size: 13px; margin-top: 6px;
}
/* Skeleton shimmer */
@keyframes shimmerBg {
  0% { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}
.skeleton-box {
  background: linear-gradient(90deg, var(--bg) 25%, var(--bg3) 50%, var(--bg) 75%);
  background-size: 200px 100%; animation: shimmerBg 1.5s infinite; border-radius: 8px;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
/* Upload progress */
.upload-progress {
  width: 100%; height: 4px; background: var(--bg); border-radius: 2px; margin-top: 8px; overflow: hidden;
}
.upload-progress-bar {
  height: 100%; background: var(--ac); border-radius: 2px; transition: width .3s;
  animation: shimmerBg 1s infinite;
}
/* My uploads section in modal */
.my-uploads { display: flex; gap: 8px; flex-wrap: wrap; }
.my-upload-item {
  width: 60px; height: 60px; border-radius: 8px; object-fit: cover;
  border: 2px solid var(--br); cursor: pointer; transition: all .15s;
}
.my-upload-item:hover { border-color: var(--ac); }
.my-upload-item.selected { border-color: var(--ac); box-shadow: 0 0 0 2px var(--acbg); }