/* BILLY-YARD · карикатура */
*{box-sizing:border-box}
:root{
  --bg:#fff7e6;
  --ink:#1b1b1b;
  --pink:#ff5d8f;
  --yellow:#ffd23f;
  --blue:#4cc9f0;
  --green:#80ed99;
  --red:#ef233c;
  --purple:#9d4edd;
  --paper:#fffbe6;
}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:'Caveat',cursive;font-size:20px}
body{
  background-image:
    radial-gradient(circle at 10% 20%,#ffe0a3 0 4px,transparent 5px),
    radial-gradient(circle at 80% 60%,#ffd6e0 0 4px,transparent 5px),
    radial-gradient(circle at 50% 90%,#cdebff 0 4px,transparent 5px);
  background-size:120px 120px,180px 180px,200px 200px;
  min-height:100vh;
  padding-bottom:80px;
}

h1,h2,h3{font-family:'Bangers',cursive;letter-spacing:1px;margin:0}

/* HERO */
.hero{
  position:relative;
  text-align:center;
  padding:48px 16px 24px;
  border-bottom:4px dashed var(--ink);
  background:linear-gradient(180deg,#ffe066 0%,#ffd23f 100%);
  overflow:hidden;
}
.hero h1{font-size:96px;line-height:1;text-shadow:6px 6px 0 var(--ink);transform:rotate(-2deg)}
.hero .word{display:inline-block;animation:wobble 4s ease-in-out infinite}
.hero .w1{color:var(--pink)}
.hero .w2{color:var(--blue)}
.hero .dash{color:var(--ink);font-size:120px}
.hero .sub{font-size:28px;margin-top:12px}
.splat{position:absolute;width:140px;height:140px;border-radius:50%;background:var(--pink);opacity:.35;filter:blur(2px)}
.splat-1{top:-40px;left:-40px;background:var(--purple)}
.splat-2{bottom:-50px;right:-30px;background:var(--blue)}

@keyframes wobble{
  0%,100%{transform:rotate(-2deg) translateY(0)}
  50%{transform:rotate(2deg) translateY(-4px)}
}

.me-strip{
  margin-top:18px;display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap;
  font-size:24px;
}
.me-btn{
  font-family:'Russo One',sans-serif;font-size:18px;
  background:var(--paper);border:3px solid var(--ink);border-radius:14px;
  padding:8px 14px;cursor:pointer;
  box-shadow:4px 4px 0 var(--ink);
  transition:transform .1s;
}
.me-btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.me-btn.active{background:var(--green);transform:rotate(-2deg)}
.who-badge{
  font-family:'Russo One',sans-serif;font-size:14px;
  background:var(--ink);color:#fff;padding:6px 10px;border-radius:8px;
}

/* MAIN */
main{
  max-width:1200px;margin:24px auto;padding:0 16px;
  display:grid;grid-template-columns:1fr 1.4fr;gap:24px;
}
@media (max-width:900px){ main{grid-template-columns:1fr} }

.card{
  background:var(--paper);
  border:4px solid var(--ink);
  border-radius:18px;
  padding:18px 20px;
  box-shadow:8px 8px 0 var(--ink);
}
.card h2{font-size:34px;margin-bottom:10px}

/* form */
form label{display:block;margin:10px 0;font-size:22px}
form input,form textarea{
  display:block;width:100%;font-family:'Caveat',cursive;font-size:22px;
  padding:8px 10px;border:3px solid var(--ink);border-radius:10px;background:#fff;
}
form input:focus,form textarea:focus{outline:none;background:#fffacd}

.big-btn{
  font-family:'Bangers',cursive;font-size:24px;letter-spacing:1px;
  background:var(--pink);color:#fff;
  border:4px solid var(--ink);border-radius:14px;
  padding:10px 18px;cursor:pointer;
  box-shadow:6px 6px 0 var(--ink);
  transition:transform .1s;
}
.big-btn:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.big-btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.big-btn.alt{background:var(--blue)}
.big-btn.ghost{background:var(--paper);color:var(--ink)}
.big-btn.danger{background:var(--red);color:#fff;font-size:18px;padding:6px 12px}
.big-btn.ok{background:var(--green);color:var(--ink)}

.hint{font-size:16px;opacity:.7;margin-top:8px}

/* list */
.list{display:flex;flex-direction:column;gap:14px;margin-top:8px}
.empty{text-align:center;font-size:24px;padding:40px 0;opacity:.6}
.hidden{display:none !important}

.prop{
  background:#fff;
  border:4px solid var(--ink);
  border-radius:14px;
  padding:14px;
  position:relative;
  transform:rotate(-.3deg);
  box-shadow:5px 5px 0 var(--ink);
}
.prop:nth-child(even){transform:rotate(.4deg)}
.prop.s-confirmed{background:#d8f3dc;border-color:#1b4332}
.prop.s-declined{background:#ffd6d6;opacity:.85}
.prop.s-waiting_igor{background:#fff3bf}
.prop.s-waiting_ilya{background:#cdebff}

.prop-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.prop-title{font-family:'Russo One',sans-serif;font-size:18px;margin:0}
.prop-id{font-size:14px;opacity:.5;font-family:'Russo One',sans-serif}
.prop-slot{font-size:32px;font-weight:700;line-height:1;margin:6px 0}
.prop-note{font-size:18px;color:#333;margin:6px 0}
.prop-meta{font-size:14px;font-family:'Russo One',sans-serif;opacity:.7}
.status-pill{
  display:inline-block;font-family:'Bangers',cursive;font-size:18px;
  padding:4px 10px;border:3px solid var(--ink);border-radius:10px;background:#fff;
}
.s-confirmed .status-pill{background:var(--green)}
.s-declined .status-pill{background:var(--red);color:#fff}
.s-waiting_igor .status-pill{background:var(--yellow)}
.s-waiting_ilya .status-pill{background:var(--blue);color:#fff}

.prop-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.history{margin-top:10px;padding:10px;background:#fffbe6;border:2px dashed var(--ink);border-radius:10px;font-size:16px;display:none}
.history.open{display:block}
.toggle-history{font-size:14px;background:none;border:none;cursor:pointer;text-decoration:underline;color:#555}

/* tabs */
.tabs{
  display:flex;gap:8px;justify-content:center;
  padding:10px 12px;background:var(--ink);
}
.tab{
  font-family:'Bangers',cursive;font-size:20px;letter-spacing:1px;
  color:#fff;text-decoration:none;
  padding:6px 14px;border-radius:10px;
  border:3px solid #fff;background:transparent;
}
.tab:hover{background:rgba(255,255,255,.15)}
.tab.active{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}

/* tg card */
.tg-card{max-width:1200px;margin:24px auto 0;}
.gonets-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}
@media (max-width:800px){ .gonets-grid{grid-template-columns:1fr} }
.gonets-form{
  background:#fff;border:3px dashed var(--ink);border-radius:14px;
  padding:14px;
}
.gonets-form h3{font-size:26px;margin-bottom:6px}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:700px){ .row3{grid-template-columns:1fr} }
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.bot-status{
  display:inline-block;margin-top:6px;font-family:'Russo One',sans-serif;font-size:14px;
  padding:4px 8px;border-radius:8px;background:#eee;
}
.bot-status.ok{background:var(--green)}

/* modal */
.modal{
  position:fixed;inset:0;background:rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center;z-index:99;
}
.modal-body{
  background:var(--paper);border:4px solid var(--ink);border-radius:18px;
  padding:20px;width:min(440px,92vw);box-shadow:10px 10px 0 var(--ink);
}
.modal h3{font-size:30px;margin-bottom:10px}

/* toast */
.toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
  background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;
  font-family:'Russo One',sans-serif;font-size:14px;z-index:100;
}

footer{text-align:center;margin-top:30px;font-family:'Russo One',sans-serif;font-size:12px;opacity:.6}