.ish-modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 1001; }
.ish-modal.show { display: flex; }
.ish-modal-backdrop { position: fixed; inset: 0; z-index: 0; background: transparent; }
.ish-modal-overlay { position: fixed; inset: 0; z-index: 0; background: rgba(255,255,255,0.08); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); pointer-events: none; }
.ish-modal-dialog { position: relative; width: min(980px, 94vw); padding: 18px; border-radius: 16px; background: rgba(255,255,255,0.28); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1px solid rgba(255,255,255,0.40); box-shadow: 0 12px 40px rgba(0,0,0,0.25); overflow: hidden; }
.ish-modal-close { position: absolute; top: 8px; right: 10px; left: auto; width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--ish-border); background: #fff; color: var(--ish-text); cursor: pointer; box-shadow: none; z-index: 2; }
.ish-modal-body { display: grid; grid-template-columns: 1fr 340px; gap: 16px; }
.ish-modal-preview { border-radius: 12px; overflow: hidden; background: transparent; min-height: 300px; display:flex; align-items:center; justify-content:center; }
.ish-modal-preview img { max-width: 100%; max-height: 70vh; display:block; border-radius: 12px; box-shadow: none; border: 1px solid var(--ish-border); }
.ish-modal-info { padding: 8px; }
.ish-meta-row { color: var(--ish-muted); font-size: 13px; }

html.ish-modal-open body { overflow: hidden; }
.ish-modal { z-index: 1001; }
.ish-modal-backdrop { z-index: 0; }
.ish-modal-dialog { position: relative; z-index: 1; }
#ish-modal .ish-modal-footer { position: absolute; left: 18px !important; right: 18px !important; bottom: 18px; display: flex; justify-content: center !important; align-items: center; gap: 18px; z-index: 2; }
.ish-modal-dialog { padding-bottom: 78px; }
.ish-btn.ish-copy-image { position: relative; overflow: hidden; color: #fff; background: linear-gradient(90deg, var(--ish-primary), var(--ish-accent)); border-color: rgba(255,255,255,0.20); box-shadow: none; }
.ish-btn.ish-copy-image::after { content: ""; position: absolute; top: 0; left: -120%; height: 100%; width: 40%; pointer-events: none; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.35), rgba(255,255,255,0)); transform: skewX(-20deg); }
.ish-btn.ish-copy-image:hover::after { animation: ish-sweep 900ms ease forwards; }
.ish-btn.ish-delete-modal { position: relative; overflow: hidden; color: #fff; background: linear-gradient(90deg, #ff7b8b, #ff9aa2); border-color: rgba(255,255,255,0.20); box-shadow: none; }
.ish-btn.ish-delete-modal::after { content: ""; position: absolute; top: 0; left: -120%; height: 100%; width: 40%; pointer-events: none; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.35), rgba(255,255,255,0)); transform: skewX(-20deg); }
.ish-btn.ish-delete-modal:hover::after { animation: ish-sweep 900ms ease forwards; }

.ish-modal-dialog::before { content:""; position:absolute; left:-20%; top:-20%; right:-20%; bottom:-20%; background:
  radial-gradient(540px circle at 12% 8%, rgba(255, 122, 167, 0.35), transparent 60%),
  radial-gradient(520px circle at 85% -5%, rgba(98, 138, 255, 0.35), transparent 60%),
  radial-gradient(480px circle at 30% 92%, rgba(255, 210, 138, 0.35), transparent 60%),
  radial-gradient(420px circle at 70% 70%, rgba(153, 255, 204, 0.30), transparent 60%);
  filter: blur(30px);
  z-index: 0;
}
.ish-modal-dialog > * { position: relative; z-index: 1; }

.ish-modal .ish-input,
.ish-modal input[type="text"],
.ish-modal input[type="url"],
.ish-modal input[type="search"],
.ish-modal textarea,
.ish-modal select {
  width: 100%;
  height: 40px;
  padding: 10px 12px;
  border: 1px solid var(--ish-border);
  border-radius: 8px;
  background: #fff;
  color: var(--ish-text);
  box-shadow: none;
  outline: none;
  box-sizing: border-box;
  font-size: 14px;
  caret-color: var(--ish-primary);
}

.ish-modal textarea { min-height: 80px; line-height: 1.4; resize: vertical; }

.ish-modal .ish-input:hover,
.ish-modal input[type="text"]:hover,
.ish-modal input[type="url"]:hover,
.ish-modal input[type="search"]:hover,
.ish-modal textarea:hover,
.ish-modal select:hover { border-color: #D6E0FF; }

.ish-modal .ish-input:focus,
.ish-modal input[type="text"]:focus,
.ish-modal input[type="url"]:focus,
.ish-modal input[type="search"]:focus,
.ish-modal textarea:focus,
.ish-modal select:focus {
  border-color: var(--ish-primary);
  box-shadow: 0 0 0 2px rgba(90,123,255,0.18);
}

.ish-modal .ish-input::placeholder,
.ish-modal input[type="text"]::placeholder,
.ish-modal input[type="url"]::placeholder,
.ish-modal input[type="search"]::placeholder,
.ish-modal textarea::placeholder { color: var(--ish-muted); }

.ish-modal select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%2355627A' d='M4.22 6.47a.75.75 0 0 1 1.06 0L8 9.19l2.72-2.72a.75.75 0 0 1 1.06 1.06L8.53 10.78a.75.75 0 0 1-1.06 0L4.22 7.53a.75.75 0 0 1 0-1.06Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 16px;
}
.ish-modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 1001; }
:root { --ish-border: #e5e7eb; }
html[data-theme="light"] { --ish-border: #e5e7eb; }
html[data-theme="dark"] { --ish-border: #2b2d31; }

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

html[data-theme="dark"] .ish-modal-dialog {
  background: rgba(16,16,16,0.64);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 24px 64px rgba(0,0,0,0.55);
}

html[data-theme="dark"] .ish-modal-dialog::before {
  background:
    radial-gradient(640px circle at 12% 8%, rgba(0,0,0,0.55), transparent 60%),
    radial-gradient(600px circle at 85% -5%, rgba(22,22,22,0.55), transparent 60%),
    radial-gradient(560px circle at 30% 92%, rgba(40,40,40,0.55), transparent 60%),
    radial-gradient(520px circle at 70% 70%, rgba(72,72,72,0.50), transparent 60%);
  filter: blur(40px);
}

html[data-theme="dark"] .ish-modal-close {
  background: #000;
  color: #fff;
  border-color: rgba(255,255,255,0.20);
}
