/* review.css — modern dark card */
:root {
  --bg: #0b0c10;
  --card: #111317;
  --muted: #a0a0a0;
  --text: #e7e7e7;
  --acc: #5d8aff;
  --acc-2: #9b5cf0;
  --border: #23252b;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, PingFang SC, Noto Sans SC, Helvetica, Arial, sans-serif; }

.review-form{
  width: min(820px, 92%);
  margin: 24px auto;
  padding: 20px 18px;
  background: linear-gradient(180deg, #12141a, #0f1116);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.review-promote{ display:flex; align-items:baseline; gap:8px; margin-bottom:8px; }
.first-inline{ font-weight:600; }
.second-inline{ color:var(--muted); }

.star-rating{ display:flex; gap:8px; font-size:28px; user-select:none; margin:8px 0 14px; }
.star{ cursor:pointer; transition: transform .12s ease; }
.star:hover{ transform: scale(1.15); }
.star.selected{ color:#ffcc4d; text-shadow:0 0 14px rgba(255,204,77,.35); }

.textarea, .input, .select{
  width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid var(--border); background:#0d0f14; color:var(--text);
  outline:none; font-size:15px; transition:border-color .15s, box-shadow .15s;
}
.textarea{ min-height:120px; resize:vertical; }
.textarea:focus, .input:focus, .select:focus{
  border-color:var(--acc);
  box-shadow:0 0 0 3px rgba(93,138,255,.15);
}

.social-link{ margin-top:14px; }
.sl-label{ display:block; font-weight:600; margin-bottom:6px; }
.sl-row{ display:grid; grid-template-columns:160px 1fr auto; gap:10px; align-items:center; }
.sl-toggle{ display:flex; align-items:center; gap:8px; color:var(--muted); white-space:nowrap; }
.sl-help{ margin-top:6px; color:var(--muted); font-size:13px; }

.button{
  width:100%; margin-top:16px; padding:12px 16px; border:0; border-radius:12px;
  font-weight:700; background:linear-gradient(90deg, var(--acc), var(--acc-2));
  color:#fff; cursor:pointer; transition: transform .08s ease, filter .2s ease;
}
.button:hover{ filter:brightness(1.05); }
.button:active{ transform: translateY(1px); }

@media (max-width:520px){
  .sl-row{ grid-template-columns: 1fr; gap:8px; }
}