:root{
  --ink:#111827;
  --muted:#526174;
  --paper:#fff9ed;
  --paper2:#fefefe;
  --line:#b7d0ee;
  --blue:#1769ff;
  --red:#e8193c;
  --pink:#ef2f7f;
  --violet:#4b2ee8;
  --yellow:#ffd83d;
  --green:#39c866;
  --orange:#ff7a1a;
  --shadow:8px 8px 0 rgba(17,24,39,.13);
  --r:22px
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:ui-rounded,'Arial Rounded MT Bold','Trebuchet MS',Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  color:var(--ink);
  line-height:1.62;
  background-color:var(--paper);
  background-image:
    linear-gradient(rgba(23,105,255,.11) 1px,transparent 1px),
    linear-gradient(90deg,rgba(232,25,60,.12) 1px,transparent 1px),
    radial-gradient(circle at 12% 14%,rgba(255,216,61,.34),transparent 18rem),
    radial-gradient(circle at 87% 22%,rgba(57,200,102,.20),transparent 18rem),
    radial-gradient(circle at 75% 85%,rgba(232,25,60,.10),transparent 19rem);
  background-size:100% 32px,64px 100%,auto,auto,auto;
  min-height:100vh;
  display:flex;
  flex-direction:column
}
body:before{
  content:'';position:fixed;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.18),rgba(255,255,255,.18) 2px,transparent 2px,transparent 7px);
  opacity:.4
}
.c{width:min(1100px,calc(100% - 28px));margin:auto}
a{color:inherit;text-decoration:none}

/* HEADER */
.top{
  position:sticky;top:0;z-index:50;
  background:rgba(255,249,237,.92);
  backdrop-filter:blur(14px);
  border-bottom:5px solid var(--ink);
  box-shadow:0 7px 0 rgba(232,25,60,.14)
}
.nav{
  height:76px;display:flex;align-items:center;
  justify-content:space-between;gap:18px
}
.brand{
  font-size:1.5rem;font-weight:1000;letter-spacing:-.04em;
  display:inline-flex;align-items:center;gap:0;
  padding:8px 16px;
  background:#fff;
  border:4px solid var(--violet);
  border-radius:18px;
  box-shadow:4px 4px 0 var(--yellow);
  transform:rotate(-1deg);
  white-space:nowrap
}
.brand .pirat{color:var(--red)}
.brand .pl{color:var(--muted);font-size:1rem}
.nav-search{display:flex;gap:8px;align-items:center}
.nav-search input{
  font:inherit;font-weight:900;font-size:.95rem;
  text-transform:uppercase;letter-spacing:.04em;
  background:#fff;border:3px solid var(--ink);
  border-radius:12px;padding:.55rem .9rem;
  outline:none;width:180px;
  box-shadow:3px 3px 0 rgba(17,24,39,.12)
}
.nav-search input:focus{border-color:var(--blue);box-shadow:4px 4px 0 var(--yellow)}

/* BUTTONS */
.btn{
  border:4px solid var(--ink);border-radius:999px;
  padding:.78rem 1.3rem;font-weight:1000;font:inherit;
  cursor:pointer;display:inline-flex;align-items:center;
  justify-content:center;text-transform:uppercase;
  letter-spacing:.04em;font-size:.9rem;
  box-shadow:5px 5px 0 var(--ink);
  transition:.12s;background:#fff;color:var(--ink)
}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn-yellow{background:var(--yellow)}
.btn-red{background:var(--red);color:#fff;box-shadow:5px 5px 0 var(--pink)}
.btn-sm{padding:.5rem .9rem;font-size:.78rem;border-width:3px;box-shadow:3px 3px 0 var(--ink)}

/* HERO */
.hero{padding:60px 0 44px;position:relative}
.hero:after{content:'⚠️';position:absolute;right:6%;top:28px;font-size:3.5rem;transform:rotate(12deg);filter:drop-shadow(3px 3px 0 rgba(232,25,60,.25))}
h1{
  margin:0 0 12px;
  font-family:Impact,'Arial Black',ui-rounded,sans-serif;
  font-weight:900;letter-spacing:-.04em;line-height:1;
  font-size:clamp(3rem,7vw,5.5rem);
  text-transform:uppercase;
  text-shadow:4px 4px 0 #fff,8px 8px 0 rgba(232,25,60,.18)
}
h2{font-size:clamp(1.5rem,3.2vw,2.4rem);font-weight:1000;letter-spacing:-.04em;margin:0 0 16px}
h3{font-size:1.2rem;font-weight:1000;letter-spacing:-.03em;margin:0 0 12px}
.lead{font-size:clamp(1rem,2vw,1.22rem);color:var(--muted);max-width:680px;font-weight:780;margin:0 0 28px}

/* SEARCH HERO */
.search-hero{display:flex;flex-wrap:wrap;gap:10px;align-items:center;max-width:560px}
.search-hero input{
  flex:1;min-width:200px;font:inherit;font-weight:1000;
  font-size:1.3rem;text-transform:uppercase;letter-spacing:.06em;text-align:center;
  background:#fff;border:4px solid var(--ink);border-radius:16px;
  padding:.9rem 1rem;outline:none;
  box-shadow:5px 5px 0 rgba(17,24,39,.13)
}
.search-hero input:focus{border-color:var(--blue);box-shadow:5px 5px 0 var(--yellow)}

/* GRID */
.layout{display:grid;grid-template-columns:minmax(0,1.15fr) 360px;gap:32px;align-items:start;padding-bottom:60px}

/* CARDS */
.card,.panel,.form-card{
  background:#fffef8;border:4px solid var(--ink);
  border-radius:var(--r);box-shadow:var(--shadow);
  padding:22px;position:relative
}
.card:before,.panel:before{
  content:'';position:absolute;inset:-7px 7px 7px -7px;
  border:2.5px dashed rgba(75,46,232,.4);border-radius:var(--r);z-index:-1
}
.card-red:before{border-color:rgba(232,25,60,.4)}
.card-green:before{border-color:rgba(57,200,102,.4)}
.card-yellow:before{border-color:rgba(255,216,61,.7)}
.card+.card,.card+.form-card{margin-top:16px}

/* COMMENT CARDS */
.comment-card{
  background:#fff;border:3.5px solid var(--ink);
  border-radius:var(--r);
  box-shadow:6px 6px 0 rgba(17,24,39,.11);
  padding:18px;margin-bottom:14px;position:relative
}
.comment-card:nth-child(odd){transform:rotate(-.2deg)}
.comment-card:nth-child(even){transform:rotate(.2deg)}
.comment-card:hover{transform:translateY(-3px) rotate(0deg);box-shadow:8px 8px 0 var(--yellow)}

/* RATING BADGES */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  border:2.5px solid var(--ink);border-radius:999px;
  padding:.25rem .7rem;font-weight:1000;font-size:.8rem
}
.badge-neg{background:#ffe4e8;color:#8b0000}
.badge-pos{background:#d1fae5;color:#065f46}
.badge-neu{background:#f1f5f9;color:#334155}

/* PLATE BADGE */
.plate-num{
  display:inline-flex;align-items:center;
  border:4px solid var(--ink);border-radius:12px;
  overflow:hidden;box-shadow:6px 6px 0 var(--yellow);
  font-family:'Arial Black',Impact,sans-serif;
  font-weight:900;font-size:2rem;letter-spacing:.1em
}
.plate-eu{
  background:#003399;color:#fff;
  padding:.3rem .5rem;font-size:.65rem;font-weight:900;
  letter-spacing:.01em;text-align:center;line-height:1.2;
  border-right:3px solid var(--ink)
}
.plate-eu span{display:block;font-size:1rem;margin-top:2px}
.plate-text{background:#fff;padding:.3rem .9rem;color:var(--ink)}

/* STATS ROW */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0}
.stat{
  background:#fff;border:3.5px solid var(--ink);border-radius:16px;
  padding:14px 8px;text-align:center;
  box-shadow:4px 4px 0 rgba(17,24,39,.1)
}
.stat-num{font-size:1.8rem;font-weight:1000;line-height:1}
.stat-lbl{font-size:.75rem;color:var(--muted);font-weight:800;text-transform:uppercase}
.stat-pos .stat-num{color:#059669}
.stat-neu .stat-num{color:#64748b}
.stat-neg .stat-num{color:#dc2626}

/* FORM */
.form-card{background:#fffef8;transform:rotate(.3deg)}
.form-card label{display:block;font-weight:1000;font-size:.88rem;text-transform:uppercase;letter-spacing:.03em;margin-bottom:5px}
.form-card input,.form-card textarea,.form-card select{
  width:100%;font:inherit;font-size:.95rem;
  background:#fff;border:3px solid var(--ink);
  border-radius:13px;padding:.78rem .9rem;
  outline:none;box-shadow:3px 3px 0 rgba(17,24,39,.1);
  margin-bottom:14px
}
.form-card input:focus,.form-card textarea:focus,.form-card select:focus{
  border-color:var(--blue);box-shadow:4px 4px 0 var(--yellow)
}
.form-card textarea{min-height:130px;resize:vertical}
.alert-ok{background:#d1fae5;border:3px solid #059669;border-radius:13px;padding:10px 14px;font-weight:1000;color:#065f46;margin-bottom:12px}
.alert-err{background:#ffe4e8;border:3px solid var(--red);border-radius:13px;padding:10px 14px;font-weight:1000;color:#8b0000;margin-bottom:12px}

/* POPULAR LIST */
.popular-list{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.popular-list li{
  display:flex;justify-content:space-between;align-items:center;
  background:#fff;border:3px solid var(--ink);border-radius:12px;
  padding:10px 14px;box-shadow:3px 3px 0 rgba(17,24,39,.1)
}
.popular-list li:hover{box-shadow:4px 4px 0 var(--yellow);transform:translateY(-2px)}
.popular-mono{font-family:'Arial Black',monospace;font-weight:900;font-size:.95rem}
.popular-views{font-size:.78rem;font-weight:900;color:var(--muted);background:#f1f5f9;border-radius:8px;padding:3px 8px}

/* VOTE BUTTONS */
.vote-row{display:flex;gap:8px;margin-top:12px;padding-top:10px;border-top:2px dashed rgba(17,24,39,.12)}
.vote-btn{
  font:inherit;font-size:.8rem;font-weight:1000;
  background:#fff;border:2.5px solid var(--ink);border-radius:999px;
  padding:.3rem .8rem;cursor:pointer;
  box-shadow:3px 3px 0 rgba(17,24,39,.1);
  transition:.1s
}
.vote-btn:hover{background:var(--yellow);box-shadow:2px 2px 0 var(--ink);transform:translate(1px,1px)}
.vote-btn:disabled{opacity:.5;cursor:not-allowed}

/* FOOTER */
.foot{
  background:var(--ink);color:#fff;
  padding:32px 0;margin-top:auto;
  border-top:6px solid var(--yellow)
}
.foot p{color:rgba(255,255,255,.7);font-size:.85rem;margin:4px 0}

/* ANIMATIONS */
.spin{display:inline-block;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* EMPTY STATE */
.empty{
  background:#fff5f8;border:3px dashed var(--pink);
  border-radius:var(--r);padding:32px;text-align:center;
  color:var(--muted);font-weight:800
}

/* ERROR/LOADING STATES */
#state-loading,#state-error{text-align:center;padding:60px 20px;font-weight:900;font-size:1.1rem;color:var(--muted)}

/* NOTE */
.note{background:#fff5f8;border:3px dashed var(--pink);border-radius:14px;padding:12px 16px;color:#7a2144;font-weight:800;font-size:.82rem}

@media(max-width:860px){
  .layout{grid-template-columns:1fr}
  .nav-search{display:none}
  .hero:after{display:none}
  h1{font-size:clamp(2.6rem,12vw,4rem)}
}
@media(max-width:520px){
  .c{width:calc(100% - 20px)}
  .card,.panel,.form-card{padding:16px;border-width:3px}
  .plate-num{font-size:1.5rem}
  .btn{width:100%}
  .search-hero{flex-direction:column}
  .search-hero input,.search-hero .btn{width:100%}
}