.ish-upload-layout { display:grid; grid-template-columns: minmax(0, 1fr) 360px; gap:16px; }
.ish-upload-panel { }
.ish-upload-card { background: var(--ish-card); border-radius: calc(var(--ish-radius) + 8px); border:1px solid rgba(255,255,255,0.12); box-shadow: 0 20px 60px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08); overflow:hidden; }
.ish-upload-card-head { height:52px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 18px; font-weight:800; border-bottom:1px solid rgba(255,255,255,0.08); background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.06)); }
.ish-upload-card-body { padding:18px; }
.ish-upload-sidebar { background: var(--ish-card); border-radius: calc(var(--ish-radius) + 6px); border:1px solid rgba(255,255,255,0.10); padding:18px; box-shadow: 0 12px 30px rgba(0,0,0,0.35); width:360px; box-sizing:border-box; height: 32vh; display:flex; flex-direction:column; }
.ish-drop { margin-top:12px; border-radius: calc(var(--ish-radius) + 6px); border:2px dashed rgba(255,255,255,0.16); padding:28px; text-align:center; background: rgba(255,255,255,0.04); display:grid; place-items:center; gap:10px; cursor:pointer; }
.ish-drop-circle { width:56px; height:56px; border-radius:999px; display:grid; place-items:center; color:var(--ish-text); background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.06)); border:1px solid rgba(255,255,255,0.12); box-shadow: 0 12px 30px rgba(0,0,0,0.35); }
.ish-drop-title { font-weight:700; }
.ish-drop-sub { color: var(--ish-muted); }
.ish-upload-extra { margin-top:16px; display:flex; gap:12px; color: var(--ish-muted); }
/* flat tags */
.ish-tags { display:block; }
.ish-tags-title { font-size:12px; color:var(--ish-muted); margin-bottom:6px; }
.ish-tags-picked, .ish-tags-available { display:flex; flex-wrap:wrap; gap:8px; }
.ish-tag-chip { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid rgba(255,255,255,0.16); border-radius:10px; background: rgba(255,255,255,0.06); color:var(--ish-text); cursor:pointer; user-select:none; }
.ish-tag-chip:hover { border-color: rgba(255,255,255,0.28); }
.ish-tag-chip.is-selected { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.32); }
.ish-chip-remove { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:999px; font-size:12px; line-height:1; background: none; border: 1px solid rgba(255,255,255,0.24); color: var(--ish-text); cursor:pointer; }
.ish-chip-remove:hover { border-color: rgba(255,255,255,0.36); }
/* flat add button */
#ish-tag-add { background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.16); border-radius: 12px; box-shadow: none; color: var(--ish-text); }
#ish-tag-add:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.24); }
#ish-tag-add:active { background: rgba(255,255,255,0.12); }
/* upload inputs styled like admin site settings */
.ish-upload-card .ish-field { position: relative; display:block; }
.ish-upload-card .ish-input { box-sizing:border-box; font-size:14px; padding:10px 12px; border-radius:8px; border:1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.06); box-shadow:none; color: var(--ish-text); }
.ish-upload-card .ish-input:hover { border-color: rgba(255,255,255,0.24); background: rgba(255,255,255,0.08); }
.ish-upload-card .ish-input:focus { border-color: var(--ish-accent); box-shadow: 0 0 0 2px rgba(147,197,253,0.18); background: rgba(255,255,255,0.06); outline:none; }
.ish-upload-card .ish-float { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--ish-muted); pointer-events:none; padding:0 8px; border-radius:999px; background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.06)); transition: all .18s ease; line-height:1; }
.ish-upload-card .ish-field .ish-input:focus + .ish-float,
.ish-upload-card .ish-field .ish-textarea:focus + .ish-float,
.ish-upload-card .ish-field .ish-input:not(:placeholder-shown) + .ish-float,
.ish-upload-card .ish-field .ish-textarea:not(:placeholder-shown) + .ish-float { top:-9px; transform:none; font-size:12px; color:var(--ish-accent); box-shadow: 0 0 0 3px rgba(147,197,253,0.18); }
.ish-upload-statusbar { position:relative; height:36px; display:flex; align-items:center; gap:12px; padding:0 18px; border-top:1px solid rgba(255,255,255,0.08); background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04)); }
.ish-progress-bar { position:absolute; left:0; bottom:0; height:4px; width:0; background: linear-gradient(90deg, var(--ish-primary), var(--ish-accent)); }
.ish-progress-text { font-size:12px; color:var(--ish-muted); }
.ish-sidebar-head { height:44px; display:flex; align-items:center; padding:0 12px; border-radius:12px; margin-bottom:10px; background: linear-gradient(90deg, #6b8afd, #94b0ff); color:#fff; box-shadow: 0 12px 24px rgba(0,0,0,0.35); }
.ish-queue { display:flex; flex-direction:column; gap:8px; overflow:auto; overflow-x:hidden; flex:1 1 auto; min-height:0; }
.ish-queue-item { display:grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items:center; gap:10px; padding:8px; border:1px solid rgba(255,255,255,0.10); border-radius:12px; background: rgba(255,255,255,0.04); min-height:64px; }
.ish-qi-thumb { width:48px; height:48px; border-radius:10px; overflow:hidden; box-shadow: 0 8px 16px rgba(0,0,0,0.25); }
.ish-qi-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.ish-qi-meta { display:flex; flex-direction:column; gap:4px; min-width:0; }
.ish-qi-name { font-size:13px; color:var(--ish-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ish-qi-size { font-size:12px; color:var(--ish-muted); }
.ish-qi-bar { margin-top:4px; height:4px; width:100%; background: rgba(255,255,255,0.08); border-radius:999px; overflow:hidden; }
.ish-qi-bar > span { display:block; height:100%; width:0; background: linear-gradient(90deg, var(--ish-primary), var(--ish-accent)); }
.ish-sidebar-actions { display:flex; gap:10px; margin-top:12px; justify-content:center; align-self:center; }
#ish-start { background: linear-gradient(90deg, var(--ish-primary), var(--ish-accent)) !important; color:#fff; border:0; border-radius:16px; box-shadow: 0 10px 24px rgba(107,138,253,0.40); padding:14px 26px; font-size:16px; min-width:180px; }
#ish-start:hover { filter: brightness(1.03); box-shadow: 0 12px 24px rgba(107,138,253,0.40); }
#ish-start:active { filter: none; box-shadow: 0 8px 18px rgba(107,138,253,0.30); }
#ish-start:disabled { opacity:0.6; cursor:not-allowed; box-shadow:none; }
.ish-upload-page #ish-start { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 1000; }
#ish-clear { background: linear-gradient(90deg, #ff9aa2, #ff7b8b) !important; color:#fff; border:0; border-radius:14px; box-shadow: 0 8px 20px rgba(255,122,139,0.35); padding:11px 18px; }
#ish-clear:hover { filter: brightness(1.03); box-shadow: 0 12px 24px rgba(255,122,139,0.40); }
#ish-clear:active { filter: none; box-shadow: 0 8px 18px rgba(255,122,139,0.30); }
@media (max-width: 860px) { .ish-upload-layout { grid-template-columns: 1fr; } }
.ish-upload-modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 1002; }
.ish-upload-modal.show { display: flex; }
.ish-upload-dialog { position: relative; width: min(1100px, 96vw); display:grid; grid-template-columns: minmax(0, 1fr) 360px; gap:16px; }
/* tags card spacing under layout */
.ish-tags-card { margin-top: 16px; }
html[data-theme="light"] .ish-upload-card,
html[data-theme="light"] .ish-upload-sidebar {
  background: linear-gradient(120deg, rgba(255,182,193,0.55), rgba(102,187,255,0.55));
  border-color: rgba(0,0,0,0.06);
  box-shadow: 0 18px 40px rgba(0,0,0,0.12);
  backdrop-filter: blur(12px);
}

/* circular overlay for upload start */
.ish-circle-overlay { position: fixed; inset: 0; z-index: 10000; pointer-events: none; background: rgba(255,255,255,0.08); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); clip-path: circle(var(--r, 0px) at var(--x, 50%) var(--y, 50%)); -webkit-clip-path: circle(var(--r, 0px) at var(--x, 50%) var(--y, 50%)); opacity: 0; transition: clip-path 800ms cubic-bezier(.22,.61,.36,1), -webkit-clip-path 800ms cubic-bezier(.22,.61,.36,1), opacity 240ms ease; will-change: clip-path, opacity; }
.ish-circle-overlay.is-active { opacity: 1; pointer-events: auto; }

html[data-theme="dark"] .ish-circle-overlay { background: rgba(0,0,0,0.28); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); }