.online-board__skeleton{
  min-height:132px;border-radius:14px;margin:8px auto 0;max-width:1120px;
  background:linear-gradient(90deg,#e4e4e4 0%,#f4f4f4 50%,#e4e4e4 100%);
  background-size:200% 100%;
  animation:slavbook-board-skel 1.2s ease-in-out infinite;
}
@keyframes slavbook-board-skel{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){.online-board__skeleton{animation:none;background:#ececec;}}

  .online-board{max-width:1120px;width:100%;margin:0 auto;overflow:visible;}
  .online-board__head{display:none;}
  .online-board__grid{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,210px));
    gap:14px;
    width:max-content;
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
    justify-content:center;
    align-content:start;
    align-items:stretch;
    overflow:visible;
    padding-top:12px;
    box-sizing:border-box;
  }
  @media screen and (max-width:1199px){
    .online-board__grid{
      grid-template-columns:repeat(3,minmax(0,1fr));
      width:100%;
      max-width:100%;
      gap:12px;
      justify-content:center;
      justify-items:stretch;
    }
    .online-board__card{max-width:none;}
  }
  @media screen and (min-width:768px) and (max-width:1199px){
    .online-board__grid{gap:10px;padding-top:8px;}
    .online-board__card{padding:12px 12px 14px;}
    .online-board__class{font-size:15px;margin-top:8px;}
    .online-board__action{margin-top:10px;}
  }
  @media screen and (max-width:767px){
    .online-board__grid{
      grid-template-columns:repeat(2,minmax(0,1fr));
      width:100%;
      gap:8px;
      padding-top:10px;
    }
    .online-board__card{max-width:none;}
  }
  .online-board__card{
    position:relative;min-width:0;width:100%;max-width:210px;height:100%;box-sizing:border-box;
    display:flex;flex-direction:column;align-items:stretch;
    border:1px solid #ddd;padding:14px 14px 16px;text-align:left;
    background:#f3f3f3;background:color-mix(in srgb,var(--board-tint,#9b9b9b) 11%,#f3f3f3);
    transition:box-shadow .25s ease,transform .25s ease,background .2s ease;
  }
  .online-board__card--PHOTOS_SELECTED{background:color-mix(in srgb,var(--board-tint,#14532d) 32%,#e8f0e9);border-color:#166534;}
  .online-board__card--PHOTOS_SELECTED:hover{background:color-mix(in srgb,var(--board-tint,#14532d) 42%,#e8f0e9);}
  .online-board__card:hover{
    background:#ececec;background:color-mix(in srgb,var(--board-tint,#9b9b9b) 16%,#ececec);
    box-shadow:0 10px 28px rgba(0,0,0,.08);
    transform:translateY(-5px);z-index:2;
  }
  .online-board__card--demo{
    opacity:.58;
    pointer-events:none;
    cursor:default;
    user-select:none;
  }
  .online-board__card--demo:hover,
  .online-board__card--demo.online-board__card--PHOTOS_SELECTED:hover{
    transform:none;
    box-shadow:none;
    z-index:auto;
    background:#f3f3f3;background:color-mix(in srgb,var(--board-tint,#9b9b9b) 11%,#f3f3f3);
  }
  .online-board__card--demo.online-board__card--PHOTOS_SELECTED{
    background:color-mix(in srgb,var(--board-tint,#14532d) 32%,#e8f0e9);
  }
  @media (prefers-reduced-motion:reduce){
    .online-board__card--demo:hover{transform:none;}
  }
  @media screen and (max-width:1199px){
    .online-board__card{max-width:none;}
  }
  .online-board__status{display:inline-flex;align-items:center;gap:6px;font-family:'Roboto',sans-serif;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#888;}
  .online-board__emoji{font-size:13px;line-height:1;flex:none;text-transform:none;letter-spacing:0;font-family:var(--ab-font-emoji);}
  .online-board__dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex:none;}
  .online-board__class{font-family:'Roboto',sans-serif;font-weight:700;font-size:16px;margin-top:10px;color:#111;line-height:1.25;overflow-wrap:anywhere;}
  .online-board__school{font-family:'Roboto',sans-serif;font-weight:300;font-size:12px;margin-top:4px;color:#777;overflow-wrap:anywhere;}
  .online-board__action{margin-top:14px;}
  .online-board__actions{
    margin-top:auto;padding-top:12px;display:flex;flex-direction:column;gap:8px;width:100%;
  }
  .online-board__actions .online-board__hint{margin-top:0;}
  .online-board__actions .online-board__btn{margin-top:0;width:100%;}
  .online-board__btn{
    display:inline-block;margin-top:14px;padding:9px 14px;
    background:#fff;color:#1a1a1a !important;
    border:1px solid #c4c4c4;border-radius:8px;
    font-family:'Roboto',sans-serif;font-size:10px;font-weight:600;
    letter-spacing:.05em;text-transform:uppercase;text-decoration:none;
    transition:background .2s ease,border-color .2s ease,box-shadow .2s ease;
    cursor:pointer;max-width:100%;box-sizing:border-box;white-space:normal;line-height:1.35;text-align:center;
    box-shadow:0 1px 2px rgba(0,0,0,.04);
  }
  .online-board__btn:hover{background:#f5f5f5;border-color:#999;box-shadow:0 2px 6px rgba(0,0,0,.06);}
  .online-board__btn--telegram{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    background:#229ED9 !important;color:#fff !important;border-color:#229ED9;
    text-transform:none;letter-spacing:0;font-weight:700;
  }
  .online-board__btn--telegram:hover{background:#1b8fc4 !important;border-color:#1b8fc4;color:#fff !important;}
  .online-board__btn--telegram:disabled{opacity:.7;cursor:wait;}
  .online-board__tg-icon{width:16px;height:16px;flex:0 0 auto;}
  .online-board__btn--muted{display:none;}
  .online-board__hint{margin-top:12px;font-family:'Roboto',sans-serif;font-size:12px;line-height:1.4;color:#555;}
  .online-board__countdown{
    display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  }
  .online-board__countdown-label{display:block;line-height:1.3;}
  .online-board__countdown-val{
    display:block;font-weight:700;color:#111;line-height:1.25;
    font-variant-numeric:tabular-nums;letter-spacing:.01em;
  }
  /* Мобільні картки — компактно, майже квадратні кнопки, менше переносів */
  @media screen and (max-width:767px){
    .online-board__grid{gap:6px;padding-top:6px;}
    .online-board__card{
      padding:8px 8px 9px;border-radius:12px;
    }
    .online-board__card:hover{transform:none;box-shadow:none;}
    .online-board__status{font-size:8px;letter-spacing:.04em;gap:3px;line-height:1.2;}
    .online-board__emoji{font-size:11px;}
    .online-board__dot{width:5px;height:5px;}
    .online-board__class{
      font-size:13px;margin-top:4px;line-height:1.2;
      overflow-wrap:anywhere;word-break:break-word;
    }
    .online-board__school{
      font-size:10px;margin-top:2px;line-height:1.25;
      display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
      overflow:hidden;
    }
    .online-board__actions{padding-top:6px;gap:5px;}
    .online-board__action{margin-top:5px;}
    .online-board__btn{
      margin-top:5px;min-height:44px;padding:10px 14px;font-size:12px;letter-spacing:.03em;
      border-radius:8px;line-height:1.25;
    }
    .online-board__hint{
      margin-top:4px;font-size:10px;line-height:1.25;
      display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
      overflow:hidden;
    }
    .online-board__countdown{
      display:flex;-webkit-line-clamp:unset;overflow:visible;gap:2px;
    }
    .online-board__countdown-label{
      display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
      overflow:hidden;
    }
    .online-board__countdown-val{font-size:10px;white-space:normal;}
  }
  @media screen and (max-width:640px){
    .online-board__btn{min-height:44px;padding:10px 14px;font-size:12px;}
  }
  @media screen and (max-width:430px){
    .online-board__grid{gap:5px;}
    .online-board__card{padding:7px 7px 8px;}
    .online-board__class{font-size:12px;}
    .online-board__school{font-size:9px;-webkit-line-clamp:2;}
    .online-board__btn{min-height:44px;padding:10px 14px;font-size:12px;border-radius:8px;}
    .online-board__hint{font-size:9px;}
  }
  .board-pin-overlay{
    display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:10050;
    align-items:center;justify-content:center;padding:20px;box-sizing:border-box;
    overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  }
  .board-pin-overlay.is-open{display:flex;}
  .board-pin-overlay.is-kb{
    top:var(--vv-offset,0px);
    height:var(--vv-height,100%);
    bottom:auto;
    align-items:flex-start;
    padding-top:12px;
    padding-bottom:12px;
  }
  .board-pin-overlay.is-kb .board-pin-modal,
  .board-pin-overlay.is-kb .board-memories-modal,
  .board-pin-overlay.is-kb .board-subscribe-modal{
    max-height:100%;
  }
  .board-pin-modal{width:min(92vw,400px);background:#fff;border-radius:12px;padding:24px 20px;position:relative;box-shadow:0 20px 50px rgba(0,0,0,.25);font-family:'Roboto',sans-serif;}
  .board-pin-modal h3{margin:0 0 8px;font-size:18px;font-family:'Roboto',sans-serif;font-weight:700;color:#111;}
  .board-pin-modal p{margin:0 0 14px;font-size:14px;color:#555;line-height:1.45;font-family:'Roboto',sans-serif;}
  .board-pin-modal input{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #ccc;border-radius:10px;font-size:18px;letter-spacing:.12em;font-family:'Roboto',sans-serif;}
  .board-pin-modal .board-pin-err{color:#b91c1c;font-size:13px;min-height:1.2em;margin:8px 0 0;}
  .board-pin-modal .board-pin-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;}
  .board-pin-modal .board-pin-actions button{flex:1;min-width:110px;padding:10px 12px;border-radius:3px;border:none;cursor:pointer;font-size:12px;letter-spacing:.04em;text-transform:uppercase;font-family:'Roboto',sans-serif;}
  .board-pin-modal .board-pin-ok{background:#111;color:#fff;}
  .board-pin-modal .board-pin-cancel{background:#eee;color:#111;}
  .board-memories-modal .board-pin-err{color:#b91c1c;font-size:13px;min-height:1.2em;margin:0 0 10px;font-family:var(--ab-font);}
  .board-memories-modal .board-pin-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;}
  .board-memories-modal .board-pin-actions button,
  .board-memories-modal .board-memories-send,
  .board-memories-modal .board-memories-quality button{
    flex:1;min-width:110px;min-height:44px;padding:10px 12px;border-radius:3px;border:none;cursor:pointer;
    font-size:12px;letter-spacing:.04em;text-transform:uppercase;font-family:var(--ab-font);
  }
  .board-memories-modal .board-pin-ok,
  .board-memories-modal .board-memories-send{background:#111;color:#fff;}
  .board-memories-modal .board-pin-cancel{background:#eee;color:#111;}

  .board-subscribe-overlay{padding:16px;}
  .board-subscribe-modal{
    width:min(calc(100vw - 32px),360px);
    max-height:min(90vh,720px);
    overflow:auto;
    box-sizing:border-box;
    margin:0 auto;
    padding:28px 22px 18px;
    text-align:center;
    background:color-mix(in srgb,var(--board-tint,#9b9b9b) 22%,#fff);
    color:#111;
    border-radius:10px;
    box-shadow:0 22px 56px rgba(0,0,0,.28);
    font-family:var(--ab-font);
    position:relative;
  }
  .board-subscribe-hero{
    position:relative;
    width:120px;
    height:100px;
    margin:0 auto 16px;
  }
  .board-subscribe-bell{
    position:absolute;
    left:50%;
    bottom:2px;
    width:76px;
    height:86px;
    transform:translateX(-50%);
    z-index:2;
    filter:drop-shadow(0 6px 8px rgba(180,120,0,.28));
    pointer-events:none;
  }
  .board-subscribe-spark{
    position:absolute;
    z-index:3;
    pointer-events:none;
  }
  .board-subscribe-spark--hex{
    top:8px;left:14px;width:9px;height:9px;
    background:#ff8fb3;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  }
  .board-subscribe-spark--star{
    top:4px;right:12px;width:11px;height:11px;background:#5b9cff;
    clip-path:polygon(50% 0,61% 35%,100% 35%,68% 57%,79% 92%,50% 72%,21% 92%,32% 57%,0 35%,39% 35%);
  }
  .board-subscribe-spark--dot{
    top:36px;right:6px;width:5px;height:5px;border-radius:50%;background:#ffb347;
  }
  .board-subscribe-spark--dot2{
    bottom:16px;left:8px;width:4px;height:4px;border-radius:50%;background:#7dd3c0;
  }
  .board-subscribe-modal h3{
    margin:0 0 8px;
    font-size:22px;
    line-height:1.25;
    font-weight:800;
    color:#111;
    overflow-wrap:anywhere;
  }
  .board-subscribe-modal p#board-subscribe-hint{
    margin:0 0 22px;
    font-size:14px;
    line-height:1.4;
    color:#8a8a8a;
    font-weight:400;
  }
  .board-subscribe-tg,
  .board-subscribe-email-toggle,
  .board-subscribe-submit{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:100%;
    box-sizing:border-box;
    min-height:52px;
    padding:12px 16px;
    border-radius:16px;
    font-family:'Roboto',sans-serif;
    font-size:15px;
    font-weight:700;
    letter-spacing:0;
    text-transform:none;
    cursor:pointer;
    line-height:1.25;
  }
  .board-subscribe-tg{
    margin:0 0 10px;
    border:none;
    background:#229ED9;
    color:#fff;
  }
  .board-subscribe-tg:hover{background:#1b8fc4;color:#fff;}
  .board-subscribe-tg:disabled{opacity:.7;cursor:wait;}
  .board-subscribe-tg .online-board__tg-icon{width:18px;height:18px;color:#fff;}
  .board-subscribe-email-toggle{
    margin:0;
    position:relative;
    background:#fff;
    color:#111;
    border:1px solid #d5d5d5;
    font-weight:600;
    justify-content:center;
    text-align:center;
    padding-left:40px;
    padding-right:40px;
  }
  .board-subscribe-email-toggle:hover{background:#fafafa;border-color:#c8c8c8;}
  .board-subscribe-mail-icon{width:20px;height:20px;flex:none;color:#222;}
  .board-subscribe-email-label{flex:none;}
  .board-subscribe-chevron{
    position:absolute;
    right:14px;
    top:50%;
    color:#b0b0b0;
    font-size:22px;
    font-weight:400;
    line-height:1;
    transform:translateY(-50%);
    transition:transform .22s ease;
  }
  .board-subscribe-modal.is-email-open .board-subscribe-chevron{
    transform:translateY(-50%) rotate(90deg);
  }
  .board-subscribe-email-panel{
    display:grid;
    grid-template-rows:0fr;
    opacity:0;
    margin:0;
    pointer-events:none;
    transition:grid-template-rows .28s ease,opacity .22s ease,margin .28s ease;
  }
  .board-subscribe-modal.is-email-open .board-subscribe-email-panel{
    grid-template-rows:1fr;
    opacity:1;
    margin-top:10px;
    pointer-events:auto;
  }
  .board-subscribe-email-panel-inner{
    overflow:hidden;
    min-height:0;
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .board-subscribe-modal .board-subscribe-email{
    width:100%;
    box-sizing:border-box;
    min-height:48px;
    padding:12px 14px;
    border:1px solid #d5d5d5;
    border-radius:14px;
    font-size:15px;
    letter-spacing:0;
    font-family:'Roboto',sans-serif;
    font-weight:400;
    color:#111;
    background:#fff;
  }
  .board-subscribe-modal .board-subscribe-email::placeholder{color:#b4b4b4;}
  .board-subscribe-submit{
    min-height:46px;
    background:#111;
    color:#fff;
    border:none;
    font-size:14px;
  }
  .board-subscribe-submit:hover{background:#222;}
  .board-subscribe-submit:disabled{opacity:.7;cursor:wait;}
  .board-subscribe-err{
    min-height:1.2em;
    margin:8px 0 0;
    font-size:13px;
    line-height:1.35;
    color:#b91c1c;
  }
  .board-subscribe-err a{color:#1b8fc4;}
  .board-subscribe-cancel{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin:22px auto 0;
    min-height:44px;
    padding:10px 28px;
    border:none;
    border-radius:14px;
    background:#f1f1f1;
    color:#222;
    font-family:'Roboto',sans-serif;
    font-size:15px;
    font-weight:500;
    letter-spacing:0;
    text-transform:none;
    cursor:pointer;
  }
  .board-subscribe-cancel:hover{background:#e8e8e8;}
  .board-subscribe-honeypot{
    position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;
  }
  .board-subscribe-modal .visually-hidden{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
  }
  @media screen and (max-width:430px){
    .board-subscribe-overlay{padding:16px;}
    .board-subscribe-modal{padding:24px 18px 16px;border-radius:10px;width:min(calc(100vw - 32px),360px);}
    .board-subscribe-modal h3{font-size:20px;}
    .board-subscribe-tg,
    .board-subscribe-email-toggle{min-height:50px;font-size:14px;border-radius:14px;}
  }
  @media (prefers-reduced-motion:reduce){
    .board-subscribe-email-panel,
    .board-subscribe-chevron{transition:none;}
  }
  .board-feedback-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:10060;align-items:center;justify-content:center;padding:20px;}
  .board-feedback-overlay.is-open{display:flex;}
  .board-feedback-modal{
    width:min(92vw,440px);background:#fff;border-radius:12px;padding:24px 20px;
    box-shadow:0 20px 50px rgba(0,0,0,.25);text-align:center;
    font-family:'Roboto',sans-serif;
  }
  .board-feedback-modal p{
    margin:0 0 18px;font-size:15px;line-height:1.55;color:#222;text-align:center;
    font-family:'Roboto',sans-serif;
  }
  .board-feedback-modal button{
    display:inline-block;width:auto;max-width:100%;padding:10px 18px;border:none;border-radius:3px;
    background:#111;color:#fff;cursor:pointer;font-size:12px;letter-spacing:.05em;
    text-transform:uppercase;font-family:'Roboto',sans-serif;
  }
  .board-feedback-modal button + button{margin-top:8px;}

  /* DONE — святкова фінальна картка (унікальний дизайн) */
  .online-board__card--DONE{
    overflow:hidden;
    isolation:isolate;
    border:2px solid #22c55e;
    background:
      radial-gradient(120% 80% at 100% 0%, rgba(250,204,21,.28), transparent 55%),
      radial-gradient(90% 70% at 0% 100%, rgba(52,211,153,.22), transparent 50%),
      linear-gradient(155deg, #ecfdf5 0%, #fefce8 48%, #f0fdf4 100%);
    box-shadow:0 0 0 1px rgba(250,204,21,.35), 0 10px 28px rgba(16,185,129,.18);
    animation:board-done-glow 2.8s ease-in-out infinite;
  }
  .online-board__card--DONE:hover{
    background:
      radial-gradient(120% 80% at 100% 0%, rgba(250,204,21,.36), transparent 55%),
      radial-gradient(90% 70% at 0% 100%, rgba(52,211,153,.30), transparent 50%),
      linear-gradient(155deg, #d1fae5 0%, #fef9c3 48%, #ecfdf5 100%);
    box-shadow:0 0 0 2px rgba(250,204,21,.5), 0 14px 32px rgba(16,185,129,.26);
    transform:translateY(-3px);
  }
  .online-board__card--DONE > *:not(.online-board__confetti){
    position:relative;
    z-index:2;
  }
  /* Continuous confetti — clearly visible behind content */
  .online-board__confetti{
    position:absolute;
    inset:0;
    z-index:1;
    overflow:hidden;
    pointer-events:none;
    user-select:none;
  }
  .online-board__confetti span{
    position:absolute;
    top:-10%;
    display:block;
    width:8px;
    height:12px;
    border-radius:1px;
    opacity:.9;
    will-change:top,transform,opacity;
    animation:board-done-confetti-fall var(--c-dur,4s) linear infinite;
    animation-delay:var(--c-delay,0s);
    left:var(--c-x,50%);
    background:var(--c-color,#f43f5e);
    box-shadow:0 0 0 1px color-mix(in srgb, var(--c-color,#f43f5e) 35%, transparent);
  }
  .online-board__confetti span:nth-child(3n){width:7px;height:7px;border-radius:50%;}
  .online-board__confetti span:nth-child(4n){width:10px;height:5px;border-radius:1px;}
  .online-board__confetti span:nth-child(5n){width:5px;height:11px;}
  .online-board__confetti span:nth-child(2n){opacity:.95;}
  .online-board__status--done{
    color:#047857;
    font-weight:700;
    letter-spacing:.06em;
    gap:8px;
  }
  .online-board__emoji--trophy{
    font-size:17px;
    animation:board-done-bounce 1.8s ease-in-out infinite;
  }
  .online-board__party{font-size:13px;line-height:1;text-transform:none;letter-spacing:0;}
  @keyframes board-done-glow{
    0%,100%{box-shadow:0 0 0 1px rgba(250,204,21,.32), 0 8px 22px rgba(16,185,129,.14);}
    50%{box-shadow:0 0 0 2px rgba(250,204,21,.62), 0 12px 30px rgba(16,185,129,.28);}
  }
  @keyframes board-done-bounce{
    0%,100%{transform:translateY(0) rotate(-5deg);}
    50%{transform:translateY(-3px) rotate(5deg);}
  }
  /* top % is relative to the card; translateY % would only move ~particle height */
  @keyframes board-done-confetti-fall{
    0%{top:-12%;transform:translateX(0) rotate(0deg);opacity:0;}
    6%{opacity:.95;}
    70%{opacity:.85;}
    100%{top:112%;transform:translateX(var(--c-drift,14px)) rotate(420deg);opacity:0;}
  }
  @media (prefers-reduced-motion:reduce){
    .online-board__card--DONE,
    .online-board__emoji--trophy{animation:none;}
    .online-board__confetti span{
      animation:none;
      transition:none;
      top:var(--c-static-y,20%);
      opacity:.55;
      transform:rotate(var(--c-rot,0deg));
    }
  }

.online-board__memories{
  margin-top:8px;
  padding:8px 0;
  border-top:1px solid #d4d4d4;
  border-bottom:1px solid #d4d4d4;
  font-family:var(--ab-font);
  text-align:left;
}
.online-board__memories .online-board__btn{
  margin:0;
  width:100%;
  box-sizing:border-box;
}
.online-board__memories-count{
  margin-top:6px;
  font-size:11px;
  line-height:1.3;
  color:#6b7280;
}

.board-memories-modal{
  width:min(92vw,440px);
  max-height:min(88vh,720px);
  overflow:auto;
  background:#fff;
  border-radius:12px;
  padding:28px 20px 20px;
  position:relative;
  box-shadow:0 20px 50px rgba(0,0,0,.25);
  font-family:var(--ab-font);
  color:#111;
}
.board-memories-modal h3{
  margin:0 0 8px;
  font-size:18px;
  font-weight:700;
  font-family:var(--ab-font);
}
.board-memories-modal p{
  margin:0 0 14px;
  font-size:14px;
  color:#555;
  line-height:1.45;
  font-family:var(--ab-font);
}
.board-memories-modal input[type="text"],
.board-memories-modal input[type="search"],
.board-memories-modal textarea{
  width:100%;
  box-sizing:border-box;
  padding:10px 12px;
  border:1px solid #ccc;
  border-radius:10px;
  font-size:16px;
  font-family:var(--ab-font);
  min-height:44px;
}
.board-memories-close{
  position:absolute;
  top:8px;
  right:10px;
  width:36px;
  height:36px;
  border:0;
  background:transparent;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  color:#111;
  font-family:var(--ab-font);
}
.board-memories-label{
  display:block;
  margin:0 0 6px;
  font-size:12px;
  color:#6b7280;
  font-family:var(--ab-font);
}
.board-memories-hint,
.board-memories-child{
  font-size:13px;
  color:#6b7280;
  margin:8px 0 0;
}
.board-memories-suggest{margin-top:10px;max-height:40vh;overflow:auto;}
.board-memories-drop{
  position:relative;
  min-height:88px;
  border:1px dashed #bbb;
  border-radius:12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:16px 12px;
  margin:0 0 14px;
  background:#fafafa;
  font-size:14px;
  color:#444;
  font-family:var(--ab-font);
  gap:8px;
}
.board-memories-drop.has-preview{min-height:160px;padding:10px 10px 12px;}
.board-memories-drop.is-drag{border-color:#111;background:#f3f3f3;}
.board-memories-file{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer;
  font-size:16px;
  z-index:2;
}
.board-memories-preview{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
  width:100%;
  z-index:1;
  pointer-events:none;
}
.board-memories-preview img{
  max-width:100%;
  max-height:180px;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:8px;
  background:#fff;
}
.board-memories-note{resize:vertical;min-height:72px;}
.board-memories-send{width:100%;margin-top:14px;min-height:44px;}
.board-memories-progress{
  height:8px;
  background:#eee;
  border-radius:99px;
  overflow:hidden;
  margin:10px 0;
}
.board-memories-progress span{display:block;height:100%;width:0;background:#111;}
.board-memories-warn{
  background:#fff7ed;
  border:1px solid #fed7aa;
  border-radius:10px;
  padding:10px;
  color:#9a3412;
  font-size:14px;
}
.board-memories-quality:not([hidden]){
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:12px;
}
.board-memories-quality button{min-height:44px;width:100%;}
.board-memories-done{text-align:center;padding:24px 8px 12px;min-height:140px;position:relative;}
.board-memories-thanks{
  position:relative;
  z-index:1;
  font-size:20px;
  font-weight:700;
  color:#111;
  font-family:var(--ab-font);
  margin:28px 0 8px;
}
.board-memories-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.board-memories-confetti span{
  position:absolute;
  top:-8px;
  left:var(--c-x,50%);
  width:8px;
  height:8px;
  background:var(--c-color,#e53935);
  animation:board-memories-confetti-fall var(--c-dur,2.2s) var(--c-delay,0s) linear forwards;
  transform:rotate(var(--c-rot,0deg));
}
@keyframes board-memories-confetti-fall{
  0%{transform:translate(0,-10px) rotate(var(--c-rot,0deg));opacity:1;}
  100%{transform:translate(var(--c-drift,12px),160px) rotate(calc(var(--c-rot,0deg) + 180deg));opacity:0;}
}
@media (max-width:560px){
  .board-memories-modal{width:min(100vw - 24px,440px);padding:24px 16px 16px;}
  .online-board__memories-count{font-size:10px;}
}
@media (prefers-reduced-motion:reduce){
  .board-memories-confetti span{animation:none;opacity:.5;}
}