/* ============ RESET & BASE ============ */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body {
  height:100%; width:100%; overflow:hidden;
  font-family: 'Vazirmatn', system-ui, -apple-system, sans-serif;
  background:#05070f; color:#f2f5ff;
  user-select:none; -webkit-user-select:none;
  touch-action: manipulation;
}
button { font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input, select { font-family:inherit; }
.hidden { display:none !important; }

/* ============ ORBS ============ */
.bg-orb { position:fixed; border-radius:50%; filter:blur(90px); opacity:0.55; pointer-events:none; z-index:0; animation: float 14s ease-in-out infinite; }
.orb-1 { width:340px; height:340px; background:radial-gradient(circle,#1a3b7a,transparent 70%); top:-100px; right:-80px; }
.orb-2 { width:300px; height:300px; background:radial-gradient(circle,#8a6a12,transparent 70%); bottom:-120px; left:-100px; animation-delay:-5s; }
.orb-3 { width:260px; height:260px; background:radial-gradient(circle,#0a5a8a,transparent 70%); top:40%; left:20%; animation-delay:-9s; opacity:0.35; }
@keyframes float { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(20px,-20px) scale(1.08); } }

/* ============ PAGES ============ */
.page { position:fixed; inset:0; display:flex; flex-direction:column; opacity:0; pointer-events:none; transition: opacity .45s, transform .45s; transform: scale(0.98); z-index:1; }
.page.active { opacity:1; pointer-events:auto; transform:scale(1); z-index:2; }

/* ============ HOME ============ */
#homePage {
  align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 20% 10%, rgba(26,59,122,0.55), transparent 60%),
    radial-gradient(circle at 80% 90%, rgba(138,106,18,0.45), transparent 60%),
    linear-gradient(160deg, #05070f 0%, #0a1024 50%, #05070f 100%);
}
.home-content { text-align:center; padding:24px; z-index:2; }
.logo-badge { width:130px; height:130px; margin:0 auto 22px; animation: logoFloat 4s ease-in-out infinite; filter: drop-shadow(0 0 26px rgba(245,197,66,0.55)); }
.logo-badge svg { width:100%; height:100%; }
@keyframes logoFloat { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(3deg); } }
.home-title {
  font-size:34px; font-weight:900;
  background: linear-gradient(135deg, #fff3b0 0%, #f5c542 45%, #b8860b 70%, #fff3b0 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:10px; text-shadow: 0 0 40px rgba(245,197,66,0.35);
}
.home-subtitle { font-size:14px; color:#9fb0d1; margin-bottom:44px; line-height:1.7; }
.home-footer { position:absolute; bottom:22px; left:0; right:0; display:flex; gap:8px; justify-content:center; align-items:center; font-size:11px; color:#5a6a87; }
.home-footer .dot { width:4px; height:4px; border-radius:50%; background:#5a6a87; }

.btn-primary-glow {
  position:relative; padding:18px 44px; border-radius:18px;
  background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.05) 100%);
  border:1px solid rgba(255,255,255,0.28);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 40px rgba(245,197,66,0.28), inset 0 1px 0 rgba(255,255,255,0.4);
  transition: all .25s; font-size:18px; font-weight:800; color:#fff;
  overflow:hidden;
}
.btn-primary-glow::before {
  content:''; position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 30%, rgba(245,197,66,0.35) 50%, transparent 70%);
  transform: translateX(-100%); transition: transform .8s;
}
.btn-primary-glow:active::before { transform: translateX(100%); }
.btn-primary-glow:active { transform: scale(0.96); }
.btn-primary-glow .btn-inner { position:relative; z-index:1; display:inline-flex; align-items:center; justify-content:center; }

/* ============ BUILDER ============ */
#builderPage {
  background:
    radial-gradient(circle at 10% 0%, rgba(26,59,122,0.35), transparent 55%),
    radial-gradient(circle at 90% 100%, rgba(138,106,18,0.28), transparent 55%),
    linear-gradient(160deg, #05070f 0%, #080c1a 100%);
}
.topbar {
  display:flex; align-items:center; gap:10px;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(10,16,36,0.9), rgba(10,16,36,0.55));
  border-bottom: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  z-index:10; flex-shrink:0;
}
.icon-btn {
  width:40px; height:40px; border-radius:12px;
  background: rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  display:flex; align-items:center; justify-content:center;
  color:#e8ecff;
}
.icon-btn:active { transform: scale(0.92); }
.icon-btn svg { width:22px; height:22px; }
.topbar-center { flex:1; text-align:center; }
.tb-title { font-size:15px; font-weight:800; background: linear-gradient(135deg, #fff3b0, #f5c542); -webkit-background-clip:text; background-clip:text; color:transparent; }
.btn-blue-glass {
  display:flex; align-items:center; gap:6px;
  padding:9px 12px; border-radius:12px;
  background: linear-gradient(135deg, rgba(57,198,255,0.18), rgba(57,198,255,0.06));
  border:1px solid rgba(57,198,255,0.35);
  color:#bde9ff; font-size:11px; font-weight:700;
  box-shadow: 0 0 20px rgba(57,198,255,0.18);
}
.btn-blue-glass:active { transform: scale(0.95); }

.controls-row {
  display:flex; align-items:center; gap:8px;
  padding:10px 12px;
  background: rgba(8,12,26,0.55);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  z-index:9; flex-shrink:0;
}
.size-control { display:flex; align-items:center; gap:6px; flex:1; }
.size-control label { font-size:10px; color:#8899b8; font-weight:600; }
.size-value { font-size:11px; font-weight:700; color:#f5c542; min-width:36px; text-align:left; }
#sizeSlider { flex:1; -webkit-appearance:none; appearance:none; height:4px; border-radius:4px; background: linear-gradient(90deg, #39c6ff, #f5c542); outline:none; }
#sizeSlider::-webkit-slider-thumb { -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background: radial-gradient(circle, #fff 30%, #f5c542 100%); box-shadow: 0 0 12px rgba(245,197,66,0.7); border:2px solid #fff; cursor:pointer; }
#sizeSlider::-moz-range-thumb { width:16px; height:16px; border-radius:50%; background: radial-gradient(circle, #fff 30%, #f5c542 100%); box-shadow: 0 0 12px rgba(245,197,66,0.7); border:2px solid #fff; cursor:pointer; }
.btn-move-mode {
  display:flex; align-items:center; gap:5px;
  padding:7px 10px; border-radius:10px;
  background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1);
  color:#c5d0e8; font-size:10.5px; font-weight:700;
}
.btn-move-mode.active {
  background: linear-gradient(135deg, rgba(57,198,255,0.3), rgba(57,198,255,0.1));
  border-color: rgba(57,198,255,0.6); color:#bde9ff;
  box-shadow: 0 0 16px rgba(57,198,255,0.4);
}
.formation-badge {
  padding:6px 12px; border-radius:10px;
  background: linear-gradient(135deg, rgba(245,197,66,0.2), rgba(245,197,66,0.06));
  border:1px solid rgba(245,197,66,0.4);
  color:#ffe082; font-size:12px; font-weight:800;
}

/* ============ PITCH ============ */
.pitch-wrap { flex:1; padding:10px 12px 0; overflow:hidden; display:flex; align-items:center; justify-content:center; min-height:0; }
.pitch {
  position:relative;
  width:100%; max-width: 520px; height:100%;
  aspect-ratio: 68 / 105; max-height: 100%;
  border-radius: 14px;
  background:
    repeating-linear-gradient(180deg, #0d3a1e 0px, #0d3a1e 8%, #0f4523 8%, #0f4523 16%),
    linear-gradient(160deg, #0d3a1e, #071c0f);
  box-shadow: 0 0 0 1.5px rgba(255,255,255,0.12), 0 0 60px rgba(0,0,0,0.6), inset 0 0 120px rgba(0,0,0,0.55);
  overflow:hidden;
}
.pitch-lines { position:absolute; inset:0; pointer-events:none; }
.pitch-outer { position:absolute; inset:2.5%; border:1.5px solid rgba(255,255,255,0.28); border-radius:3px; }
.pitch-halfway { position:absolute; left:2.5%; right:2.5%; top:50%; height:1.5px; background:rgba(255,255,255,0.28); }
.pitch-center-circle { position:absolute; left:50%; top:50%; width:16%; aspect-ratio:1; transform:translate(-50%,-50%); border:1.5px solid rgba(255,255,255,0.28); border-radius:50%; }
.pitch-center-dot { position:absolute; left:50%; top:50%; width:6px; height:6px; transform:translate(-50%,-50%); background:rgba(255,255,255,0.45); border-radius:50%; }
.pitch-top-box, .pitch-bottom-box { position:absolute; left:50%; transform:translateX(-50%); width:58%; height:14%; border:1.5px solid rgba(255,255,255,0.28); }
.pitch-top-box { top:2.5%; border-top:none; }
.pitch-bottom-box { bottom:2.5%; border-bottom:none; }
.pitch-top-goal-box, .pitch-bottom-goal-box { position:absolute; left:50%; transform:translateX(-50%); width:32%; height:7%; border:1.5px solid rgba(255,255,255,0.28); }
.pitch-top-goal-box { top:2.5%; border-top:none; }
.pitch-bottom-goal-box { bottom:2.5%; border-bottom:none; }
.pitch-top-goal, .pitch-bottom-goal { position:absolute; left:50%; transform:translateX(-50%); width:18%; height:2.2%; border:1.5px solid rgba(255,255,255,0.28); }
.pitch-top-goal { top:0.5%; }
.pitch-bottom-goal { bottom:0.5%; }
.pitch-top-penalty, .pitch-bottom-penalty { position:absolute; left:50%; transform:translateX(-50%); width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,0.45); }
.pitch-top-penalty { top:12%; }
.pitch-bottom-penalty { bottom:12%; }
.pitch-top-arc, .pitch-bottom-arc { position:absolute; left:50%; transform:translateX(-50%); width:30%; aspect-ratio:1; border:1.5px solid rgba(255,255,255,0.28); border-radius:50%; }
.pitch-top-arc { top:-2%; clip-path: inset(50% 0 0 0); }
.pitch-bottom-arc { bottom:-2%; clip-path: inset(0 0 50% 0); }

/* ============ PLAYER SLOTS ============ */
.slots-container { position:absolute; inset:0; }
.slot {
  position:absolute;
  transform: translate(-50%, -50%);
  width: var(--card-w, 62px);
  transition: left .3s cubic-bezier(.22,.61,.36,1), top .3s cubic-bezier(.22,.61,.36,1), transform .2s, filter .2s;
  cursor:pointer;
  z-index:5;
}
.slot.selected { z-index:50; }
.slot.selected .player-card { transform: scale(1.06); }

/* ============ PLAYER CARD — CORE ============ */
.player-card {
  position:relative;
  width:100%;
  aspect-ratio: 62 / 92;
  border-radius: 10px 10px 12px 12px;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.65));
  transition: filter .25s, transform .2s;
  background: #0a0f1e;
  overflow: visible;
}
.slot.selected .player-card {
  filter: drop-shadow(0 8px 22px rgba(0,0,0,0.7)) drop-shadow(0 0 20px var(--glow, #ffd75e));
}
.player-card.empty {
  background: linear-gradient(160deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border:1.5px dashed rgba(245,197,66,0.55);
  border-radius:10px;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.4);
  display:flex; align-items:center; justify-content:center;
  backdrop-filter: blur(4px);
}
.player-card.empty::before {
  content:'+'; font-size:24px; font-weight:300; color:rgba(245,197,66,0.9);
  text-shadow:0 0 12px rgba(245,197,66,0.6);
}
.player-card.empty .empty-pos {
  position:absolute; bottom:5px; left:0; right:0; text-align:center;
  font-size:8px; font-weight:800; color:rgba(245,197,66,0.9); letter-spacing:1px;
}

/* Layer 0: base dark */
.card-base {
  position:absolute; inset:0;
  background: radial-gradient(circle at 50% 30%, var(--dark, #1a1f35), #000);
  border-radius: inherit;
  z-index:0;
}

/* Layer 1: SVG frame (drawn as border/decoration, center of shape is transparent) */
.card-frame-layer {
  position:absolute; inset:0;
  pointer-events:none;
  overflow:visible;
  z-index:1;
}
.card-frame-layer svg {
  position:absolute; inset:0; width:100%; height:100%;
  overflow:visible;
}

/* Layer 2: IMAGE — critical layer, must be visible above frame background but below info */
.card-image-wrap {
  position:absolute;
  left: 9%; right: 9%;
  top: 12%; bottom: 30%;
  border-radius: 5px 5px 4px 4px;
  overflow:hidden;
  background: radial-gradient(circle at 50% 30%, #1a2438, #060a14);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-image-wrap img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  pointer-events: none;
  transform-origin: center center;
  will-change: transform;
}
.card-image-placeholder {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  color: rgba(255,255,255,0.22);
  font-size: 26px; font-weight:900;
  background: linear-gradient(160deg, rgba(255,255,255,0.08), rgba(0,0,0,0.5));
  text-shadow: 0 2px 4px rgba(0,0,0,0.7);
  letter-spacing: 1px;
}

/* Layer 3: info background */
.card-info-bg {
  position:absolute;
  left: 8%; right: 8%;
  bottom: 8%;
  height: 21%;
  border-radius: 4px 4px 6px 6px;
  background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.92) 40%, rgba(0,0,0,0.98) 100%);
  border-top: 1px solid rgba(255,255,255,0.14);
  z-index: 3;
}

/* Layer 4: info text — MUST be visible */
.card-info-layer {
  position:absolute;
  left: 8%; right: 8%;
  bottom: 8%;
  height: 21%;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  z-index: 4;
  padding: 2px 4px;
  gap: 1px;
}
.card-name {
  font-size: 9px; font-weight:800;
  color: #ffffff; text-align:center;
  width:100%;
  white-space: nowrap; overflow:hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0,0,0,0.95);
  line-height: 1.15;
}
.card-stats-row {
  display:flex; align-items:center; justify-content:center; gap:6px;
  width:100%;
}
.card-rating {
  font-size: 15px; font-weight:900;
  color: var(--accent2, #fff3b0);
  text-shadow: 0 0 10px var(--glow, #ffd75e), 0 1px 3px rgba(0,0,0,0.95);
  line-height:1; letter-spacing:-0.5px;
}
.card-pos-badge {
  font-size: 8px; font-weight:900;
  padding: 2px 5px; border-radius: 4px;
  background: linear-gradient(135deg, var(--accent, #f5c542), var(--accent2, #fff3b0));
  color: var(--dark, #3a2605);
  letter-spacing:0.5px;
  box-shadow: 0 0 8px var(--glow, #ffd75e);
  min-width: 20px; text-align:center;
}

/* Layer 5: shine overlay — pointer-events none */
.card-shine {
  position:absolute; inset:0;
  border-radius: 10px 10px 12px 12px;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.15) 48%, transparent 62%);
  background-size: 220% 100%;
  animation: cardShine 4.5s ease-in-out infinite;
  pointer-events:none;
  z-index: 5;
  mix-blend-mode: overlay;
  opacity:0.6;
}
@keyframes cardShine { 0% { background-position: 180% 0; } 55%,100% { background-position: -80% 0; } }

/* ============ ACTION BAR ============ */
.action-bar {
  display:flex; align-items:center; gap:8px;
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(0deg, rgba(8,12,26,0.98), rgba(8,12,26,0.7));
  border-top: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  flex-shrink:0;
}
.btn-ghost {
  display:flex; align-items:center; gap:5px;
  padding:10px 10px; border-radius:12px;
  background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1);
  color:#c5d0e8; font-size:10.5px; font-weight:700;
}
.btn-ghost:active { transform: scale(0.95); background: rgba(255,255,255,0.12); }
.btn-ghost.full { width:100%; justify-content:center; padding:13px; font-size:13px; }
.btn-save { flex:1; padding:14px 12px; font-size:14px; }
.btn-danger {
  padding:12px 16px; border-radius:12px;
  background: linear-gradient(135deg, rgba(255,82,82,0.25), rgba(255,82,82,0.08));
  border:1px solid rgba(255,82,82,0.4);
  color:#ffb3b3; font-weight:700; font-size:13px;
}

/* ============ D-PAD ============ */
.dpad {
  position:fixed; bottom: calc(86px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  width: 180px; height: 180px; z-index: 500;
  display:grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  gap:6px;
  background: rgba(10,16,36,0.9);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-radius: 50%;
  border:1px solid rgba(245,197,66,0.4);
  box-shadow: 0 0 40px rgba(245,197,66,0.3), 0 10px 40px rgba(0,0,0,0.7);
  padding:12px;
  animation: dpadIn .25s ease;
}
@keyframes dpadIn { from { transform: translateX(-50%) scale(0.8); opacity:0; } }
.dpad-btn {
  background: linear-gradient(135deg, rgba(245,197,66,0.3), rgba(245,197,66,0.1));
  border:1px solid rgba(245,197,66,0.5);
  border-radius: 10px;
  color: #ffe082; font-size: 18px; font-weight:900;
  display:flex; align-items:center; justify-content:center;
}
.dpad-btn:active { transform: scale(0.88); background: rgba(245,197,66,0.55); }
.dpad-btn.up { grid-column:2; grid-row:1; }
.dpad-btn.left { grid-column:1; grid-row:2; }
.dpad-btn.right { grid-column:3; grid-row:2; }
.dpad-btn.down { grid-column:2; grid-row:3; }
.dpad-coords { grid-column:2; grid-row:2; display:flex; align-items:center; justify-content:center; font-size:8px; font-weight:800; color:#8899b8; text-align:center; line-height:1.3; }
.dpad-actions { position:absolute; bottom:-48px; left:0; right:0; display:flex; gap:6px; }
.dpad-reset { flex:1; padding:8px; border-radius:10px; background: rgba(57,198,255,0.2); border:1px solid rgba(57,198,255,0.4); color:#bde9ff; font-size:9.5px; font-weight:700; }
.dpad-close { width:34px; border-radius:10px; background: rgba(255,82,82,0.25); border:1px solid rgba(255,82,82,0.4); color:#ffb3b3; font-size:13px; font-weight:700; }

/* ============ MODALS ============ */
.modal-backdrop {
  position:fixed; inset:0; z-index:1000;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display:flex; align-items:flex-end; justify-content:center;
}
.modal {
  width:100%; max-width: 520px; max-height: 92vh;
  background: linear-gradient(160deg, #0c1428, #080c1a);
  border:1px solid rgba(255,255,255,0.08);
  border-top:1px solid rgba(245,197,66,0.3);
  border-radius: 22px 22px 0 0;
  padding: 0 0 calc(18px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column;
  animation: slideUp .35s cubic-bezier(.22,.61,.36,1);
  box-shadow: 0 -10px 60px rgba(0,0,0,0.7);
  overflow:hidden;
}
@keyframes slideUp { from { transform: translateY(60px); opacity:0; } }
.modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink:0;
}
.modal-header h2 { font-size:16px; font-weight:800; background: linear-gradient(135deg, #fff3b0, #f5c542); -webkit-background-clip:text; background-clip:text; color:transparent; }
.modal-close {
  width:32px; height:32px; border-radius:9px;
  background: rgba(255,255,255,0.06); color:#c5d0e8; font-size:15px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}

.formation-list { padding: 14px; display:flex; flex-direction:column; gap:10px; overflow-y:auto; }
.formation-item {
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 18px; border-radius:14px;
  background: rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08);
  color:#e8ecff; font-size:15px; font-weight:800;
}
.formation-item.active {
  background: linear-gradient(135deg, rgba(245,197,66,0.2), rgba(245,197,66,0.05));
  border-color: rgba(245,197,66,0.5); color: #ffe082;
}
.formation-item .check { opacity:0; font-size:14px; color:#f5c542; }
.formation-item.active .check { opacity:1; }

.theme-list {
  padding: 12px;
  display:grid; grid-template-columns: repeat(3, 1fr); gap:8px;
  overflow-y:auto;
}
.theme-item {
  border-radius:12px; padding: 6px;
  background: rgba(255,255,255,0.04); border:1.5px solid rgba(255,255,255,0.08);
  display:flex; flex-direction:column; gap:5px; align-items:center;
}
.theme-item.active {
  border-color: rgba(245,197,66,0.7);
  box-shadow: 0 0 22px rgba(245,197,66,0.3);
  background: rgba(245,197,66,0.08);
}
.theme-preview {
  width: 100%; aspect-ratio: 62/92;
  border-radius:6px; position:relative; overflow:hidden;
  background:#0a0f1e;
}
.theme-preview .player-card { width:100%; height:100%; filter:none; }
.theme-name {
  font-size:9px; font-weight:700; color:#c5d0e8; text-align:center;
  line-height:1.25; min-height: 22px;
  display:flex; align-items:center; justify-content:center;
}

.form-body { padding: 14px 18px; overflow-y:auto; display:flex; flex-direction:column; gap:12px; }
.form-row { display:flex; flex-direction:column; gap:6px; }
.form-row label { font-size:12px; font-weight:700; color:#9fb0d1; }
.form-row input[type=text], .form-row select {
  width:100%; padding: 12px 14px;
  border-radius:12px; background: rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.12);
  color:#f2f5ff; font-size:14px; font-weight:600;
  outline:none;
}
.form-row input[type=text]:focus, .form-row select:focus {
  border-color: rgba(245,197,66,0.5); background: rgba(245,197,66,0.05);
}
.form-row select option { background:#0c1428; color:#f2f5ff; }
.range-row { display:flex; align-items:center; gap:12px; }
.range-row input[type=range] {
  flex:1; -webkit-appearance:none; appearance:none;
  height:5px; border-radius:5px;
  background: linear-gradient(90deg, #39c6ff, #f5c542);
  outline:none;
}
.range-row input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; width:22px; height:22px; border-radius:50%;
  background: radial-gradient(circle, #fff 30%, #f5c542 100%);
  box-shadow: 0 0 14px rgba(245,197,66,0.7);
  border:2px solid #fff; cursor:pointer;
}
.range-row input[type=range]::-moz-range-thumb {
  width:22px; height:22px; border-radius:50%;
  background: radial-gradient(circle, #fff 30%, #f5c542 100%);
  box-shadow: 0 0 14px rgba(245,197,66,0.7);
  border:2px solid #fff; cursor:pointer;
}
.rating-display {
  min-width:50px; text-align:center;
  font-size:24px; font-weight:900;
  background: linear-gradient(135deg, #fff3b0, #f5c542);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.image-picker { display:flex; flex-direction:column; gap:10px; }
.form-actions { display:flex; gap:10px; margin-top:8px; }
.form-actions .btn-primary-glow { flex:1; padding:14px; font-size:14px; }

/* ============ IMAGE ADJUST MODAL ============ */
.image-adjust-modal { max-height: 96vh; }
.image-adjust-body {
  padding: 16px;
  display: flex; flex-direction: column; gap: 16px;
  overflow-y: auto;
}
.preview-card-container {
  display: flex; justify-content: center;
  padding: 8px;
}
.preview-card {
  width: 140px;
  aspect-ratio: 62 / 92;
  position: relative;
  border-radius: 10px 10px 12px 12px;
  overflow: hidden;
  background: #0a0f1e;
  box-shadow: 0 8px 30px rgba(0,0,0,0.8), 0 0 20px rgba(245,197,66,0.3);
}
.preview-card-inner {
  position: absolute; inset: 0;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
}
.preview-card-inner.dragging { cursor: grabbing; }
.preview-card-inner img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: center center;
  will-change: transform;
}
.preview-frame-overlay {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 5;
}
.preview-frame-overlay svg { width: 100%; height: 100%; }

.adjust-controls {
  display: flex; flex-direction: column; gap: 12px;
}
.adjust-row { display: flex; align-items: center; gap: 10px; }
.adjust-row label { font-size: 12px; font-weight: 700; color: #9fb0d1; min-width: 40px; }
.adjust-row input[type=range] {
  flex:1; -webkit-appearance:none; appearance:none;
  height:5px; border-radius:5px;
  background: linear-gradient(90deg, #39c6ff, #f5c542);
  outline:none;
}
.adjust-row input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; width:22px; height:22px; border-radius:50%;
  background: radial-gradient(circle, #fff 30%, #f5c542 100%);
  box-shadow: 0 0 14px rgba(245,197,66,0.7);
  border:2px solid #fff; cursor:pointer;
}
.adjust-row input[type=range]::-moz-range-thumb {
  width:22px; height:22px; border-radius:50%;
  background: radial-gradient(circle, #fff 30%, #f5c542 100%);
  box-shadow: 0 0 14px rgba(245,197,66,0.7);
  border:2px solid #fff; cursor:pointer;
}
.adjust-value { font-size: 12px; font-weight: 800; color: #f5c542; min-width: 44px; text-align: left; }

.adjust-btn-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  max-width: 200px;
  margin: 0 auto;
}
.adjust-dir {
  aspect-ratio: 1;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(245,197,66,0.25), rgba(245,197,66,0.08));
  border:1px solid rgba(245,197,66,0.4);
  color: #ffe082;
  font-size: 18px; font-weight: 900;
  display:flex; align-items:center; justify-content:center;
}
.adjust-dir:active { transform: scale(0.9); background: rgba(245,197,66,0.45); }
.adjust-dir.up { grid-column:2; grid-row:1; }
.adjust-dir.left { grid-column:1; grid-row:2; }
.adjust-dir.right { grid-column:3; grid-row:2; }
.adjust-dir.down { grid-column:2; grid-row:3; }

.adjust-actions {
  display: flex; gap: 8px; margin-top: 6px;
}
.adjust-actions .btn-ghost { flex: 1; justify-content: center; padding: 12px; font-size: 12px; }
.adjust-actions .btn-primary-glow { flex: 1.5; padding: 12px; font-size: 13px; }

/* ============ TOAST ============ */
.toast {
  position:fixed; bottom: 110px; left:50%; transform:translateX(-50%);
  padding: 12px 22px; border-radius: 12px;
  background: rgba(10,16,36,0.95); border:1px solid rgba(245,197,66,0.4);
  color:#ffe082; font-size:13px; font-weight:700;
  z-index: 2000;
  box-shadow: 0 8px 30px rgba(0,0,0,0.6);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  max-width: 90vw; text-align:center;
  animation: toastIn .3s ease;
}
@keyframes toastIn { from { transform: translate(-50%, 20px); opacity:0; } }

@media (max-width: 380px) {
  .home-title { font-size: 28px; }
  .btn-blue-glass span { display:none; }
  .btn-ghost span { display:none; }
  .btn-ghost { padding:10px; }
  .btn-move-mode span { display:none; }
}
@media (min-height: 800px) {
  .pitch { max-width: 560px; }
}