:root { --apb-accent:#e00000; --apb-bg:#f2f0de; }
.apb-admin-grid{display:grid;grid-template-columns:minmax(320px,420px) 1fr;gap:28px;align-items:start}
.apb-controls label{display:block;font-weight:600;margin:0 0 14px}
.apb-controls input[type=text],.apb-controls input[type=url],.apb-controls textarea{width:100%;margin-top:6px}
.apb-row{display:grid;grid-template-columns:1fr 90px 90px;gap:12px}
.apb-recorder{padding:14px;border:1px solid #dcdcde;border-radius:10px;background:#fff;margin:16px 0}
.apb-recorder-buttons{display:flex;gap:8px;margin:10px 0;flex-wrap:wrap}
#apb-preview-audio{width:100%;margin-top:8px}
.apb-preview-wrap{position:sticky;top:40px}
.apb-card{
  --shadow:0 14px 34px rgba(0,0,0,.10);
  box-sizing:border-box;
  display:grid;
  grid-template-columns:minmax(0,1.58fr) 2px minmax(175px,.68fr);
  gap:18px;
  width:min(100%,980px);
  aspect-ratio:1.58 / 1;
  padding:16px 18px 14px 14px;
  background:var(--apb-bg);
  border:1px solid #767676;
  box-shadow:var(--shadow);
  font-family:Arial,Helvetica,sans-serif;
  color:#111;
  overflow:hidden;
}
.apb-left{min-width:0;display:flex;flex-direction:column}
.apb-h{
  margin:0 0 12px;
  color:var(--apb-accent);
  font-size:clamp(34px,5.2vw,66px);
  line-height:.90;
  font-weight:900;
  letter-spacing:-.045em;
  max-width:74%;
}
.apb-message{
  font-size:clamp(13px,1.45vw,17px);
  line-height:1.28;
  white-space:normal;
  max-width:92%;
}
.apb-divider{width:2px;background:#111;align-self:center;height:60%}
.apb-right{display:flex;flex-direction:column;align-items:center;position:relative;min-width:0;padding-top:2px}

/* more realistic built-in stamp */
.apb-stamp{
  width:116px;
  height:92px;
  position:relative;
  overflow:hidden;
  flex:0 0 auto;
  background:linear-gradient(180deg,#e7d8d1 0%,#ddcbc4 100%);
  border:1px solid #b79a93;
  box-shadow:0 1px 4px rgba(0,0,0,.18);
}
.apb-stamp:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 8px 8px,#fff 0 3px,transparent 3.2px) 0 0/16px 16px repeat;
  opacity:1;
  z-index:0;
}
.apb-stamp:after{
  content:"";
  position:absolute;
  inset:5px;
  border:1px solid rgba(135,94,94,.48);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);
  pointer-events:none;
}
.apb-stamp.apb-stamp-image img{
  position:absolute;
  inset:5px;
  display:block;
  width:calc(100% - 10px);
  height:calc(100% - 10px);
  object-fit:cover;
  border:1px solid rgba(0,0,0,.25)
}
.apb-stamp.apb-stamp-image:after{inset:5px;border:1px solid rgba(255,255,255,.8)}
.apb-stamp-denom{position:absolute;top:9px;left:11px;z-index:3;font-size:11px;font-weight:900;color:#111;letter-spacing:.02em}
.apb-stamp-country{position:absolute;bottom:8px;right:10px;z-index:3;font-size:8px;font-weight:800;color:#6a5151;letter-spacing:.12em}
.apb-stamp-face{
  position:absolute;
  right:15px;
  top:15px;
  z-index:1;
  width:44px;
  height:52px;
  border:1px solid rgba(98,74,74,.40);
  background:
    radial-gradient(circle at 50% 22%,#6d5252 0 9px,transparent 9.6px),
    radial-gradient(circle at 50% 66%,#876666 0 14px,transparent 14.6px),
    linear-gradient(160deg,#c99696 0%,#997474 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
}
.apb-stamp-face:before{
  content:"";
  position:absolute;
  inset:3px;
  border:1px solid rgba(255,255,255,.26);
}
.apb-stamp-name{
  position:absolute;
  left:10px;
  bottom:24px;
  z-index:3;
  font-size:12px;
  font-weight:900;
  letter-spacing:.12em;
  color:#7a2b2b;
  transform:rotate(-7deg);
  max-width:70px;
  display:block;
  text-shadow:0 1px 0 rgba(255,255,255,.25);
}
.apb-stamp-class{
  position:absolute;
  left:10px;
  bottom:8px;
  z-index:3;
  font-size:8px;
  font-weight:800;
  color:#614848;
  letter-spacing:.10em;
}
.apb-player{display:inline-flex;border:1px solid #111;margin:18px 0 0;background:#e7e04a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);flex:0 0 auto}
.apb-player button{border:0;border-right:1px solid #111;background:transparent;font-weight:900;font-size:13px;width:25px;height:19px;cursor:pointer;line-height:1}
.apb-player button:last-child{border-right:0}
.apb-cta-row{margin-top:76px;display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:center;width:100%}
.apb-arrow{font-size:34px;color:#e11414;text-shadow:1px 1px #000;line-height:1}
.apb-cta{font-size:clamp(14px,1.22vw,16px);line-height:1.12;color:#0048d8;text-decoration:underline;font-weight:800;word-break:break-word;max-width:150px}
.apb-public{margin:28px auto}
@media (max-width:850px){
  .apb-admin-grid{grid-template-columns:1fr}
  .apb-preview-wrap{position:static}
  .apb-card{grid-template-columns:1fr;gap:16px;padding:18px;aspect-ratio:auto}
  .apb-divider{width:100%;height:2px}
  .apb-right{align-items:flex-start}
  .apb-h{max-width:100%}
  .apb-stamp{margin-left:auto}
  .apb-cta-row{margin:18px 0 0;max-width:220px}
}

.apb-mic-label{margin-top:12px!important}
#apb-mic-select{display:block;width:100%;max-width:100%;margin-top:6px;padding:6px}

.apb-record-line{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:8px}
#apb-record-timer{font:700 18px/1 ui-monospace,SFMono-Regular,Consolas,monospace;min-width:58px;text-align:right;color:#333}
#apb-record-timer.is-recording{color:#c40000}