:root{
--bg:#f6f8fb; --card:#ffffff; --ink:#0b1220; --muted:#677189; --brand:#2563eb;
--ok:#10b981; --warn:#f59e0b; --danger:#ef4444; --line:#e5e7eb; --shadow:0 8px 24px rgba(16,24,40,.06);
}
*{box-sizing:border-box}
body{margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,Noto Sans; color:var(--ink); background:var(--bg);}
.wrap{max-width:1100px; margin:32px auto; padding:0 16px}
header{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px}
header .left{display:grid; gap:6px}
h1{margin:0; font-size:28px}
header p{margin:0; color:var(--muted)}
.grid{display:grid; grid-template-columns:1.1fr .9fr; gap:20px}
@media (max-width:980px){ .grid{grid-template-columns:1fr} }
.card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px; box-shadow:var(--shadow)}
.card h2{margin:0 0 14px; font-size:18px}
label{display:block; font-size:14px; color:#3b445a; margin:12px 0 6px}
input[type="text"],input[type="email"],input[type="url"],input[type="file"],textarea,select{
  width:100%; padding:12px; border-radius:12px; border:1px solid var(--line); background:#fff; color:#0b1220; outline:none;
}
textarea{min-height:110px; resize:vertical}
.row{display:flex; gap:12px; flex-wrap:wrap}
.row > *{flex:1}
.hint{font-size:12px; color:var(--muted)}
.actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.btn{border:1px solid transparent; background:var(--brand); color:#fff; padding:11px 14px; border-radius:12px; font-weight:700; cursor:pointer; box-shadow:var(--shadow); transition: transform .2s, background .2s}
.btn:hover{transform:scale(1.02)}
.btn.secondary{background:#f7f8fd; color:#1f2a44; border-color:var(--line)}
.btn.danger{background:#ffe8eb; color:#b4232c; border-color:#ffd3d8}
.btn.success{background:#10b981}
.btn:disabled{opacity:.6; cursor:not-allowed}
.inline{display:inline-flex; gap:8px; align-items:center}
.stars{display:inline-flex; gap:6px; align-items:center}
.sr-only{position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden}
.star{
  width:36px; height:36px; display:inline-grid; place-items:center; border-radius:10px; font-size:20px; line-height:1;
  background:#f3f6ff; border:1px solid #dbe5ff; color:#8496c7; cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent;
}
.star.on{background:#e9f0ff; color:#f5b301; border-color:#c8d7ff}
.stars:focus-within .star{outline:3px solid #a5c1ff; outline-offset:2px}
.uploader{display:grid; gap:10px; grid-template-columns:1fr; padding:10px; border:1px dashed #cfd8ef; border-radius:12px; background:#f9fbff}
.uploader.drag{background:#eef5ff; border-color:#b6c9ff}
.previews{display:flex; gap:8px; flex-wrap:wrap}
.preview{position:relative}
.preview img{width:88px; height:88px; object-fit:cover; border-radius:10px; border:1px solid var(--line)}
.preview button{position:absolute; top:4px; right:4px; border:0; background:#0008; color:#fff; width:22px; height:22px; border-radius:6px; cursor:pointer; font-size:12px}
.filters{display:flex; gap:10px; flex-wrap:wrap}
.reviews{display:grid; gap:12px; margin-top:10px}
.review{border:1px solid var(--line); border-radius:14px; padding:14px; background:#fff; display:grid; gap:6px; box-shadow:var(--shadow)}
.review .hdr{display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.pill{padding:4px 8px; border-radius:999px; font-size:12px; border:1px solid var(--line); color:#42527b; background:#eef2ff}
.rating{display:inline-flex; gap:3px}
.rating i{font-style:normal; color:#c9ceda}
.rating i.on{color:#f5b301}
.title{font-weight:800}
.meta{font-size:12px; color:#6b7280}
.revtext{white-space:pre-wrap; line-height:1.6}
.imgs{display:flex; gap:8px; flex-wrap:wrap}
.imgs img{width:68px; height:68px; object-fit:cover; border-radius:8px; border:1px solid var(--line)}
.toast{position:fixed; right:16px; bottom:16px; background:#0b1220; color:#e6eefb; padding:12px 14px; border:1px solid #24324f; border-radius:12px; opacity:0; transform:translateY(12px); transition:.35s;}
.toast.show{opacity:1; transform:none}
.counter{font-size:12px; color:#a3a9b7; text-align:right}
.live{border:1px dashed #cfd8ef; background:#fcfdff}