.gwvp{max-width:1100px;margin:0 auto;padding:20px;font-family:inherit;color:#222}.gwvp-head{text-align:center;margin-bottom:24px}.gwvp-head h2{margin:0 0 4px}.gwvp-step{margin:18px 0}.gwvp-actions,.gwvp-editor-actions{display:flex;gap:10px;flex-wrap:wrap}.gwvp-btn,.gwvp-tabs button,.gwvp-refresh{border:0;border-radius:12px;padding:13px 18px;cursor:pointer;background:#222;color:#fff;font-size:15px}.gwvp-btn:disabled{opacity:.55}.gwvp-editor{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:16px}.gwvp-preview-wrap{position:relative;background:#111;border-radius:16px;overflow:hidden;min-height:300px;display:flex;align-items:center;justify-content:center}.gwvp-canvas,.gwvp-video{max-width:100%;height:auto;display:block}.gwvp-frame-list{display:grid;gap:10px;align-content:start}.gwvp-frame{border:2px solid transparent;background:#fff;border-radius:12px;padding:6px;cursor:pointer;text-align:left}.gwvp-frame.selected{border-color:#111}.gwvp-frame img{width:100%;display:block}.gwvp-frame span{font-size:12px}.gwvp-label{display:block;margin:10px 0;font-weight:600}.gwvp-name,.gwvp-wish{width:100%;box-sizing:border-box;padding:12px;border:1px solid #ccc;border-radius:10px;font:inherit}.gwvp-wish{min-height:120px;margin:10px 0}.gwvp-tabs{display:flex;gap:8px;margin:12px 0}.gwvp-tabs button{background:#eee;color:#222}.gwvp-tabs button.active{background:#222;color:#fff}.gwvp-voice{padding:12px;background:#f5f5f5;border-radius:12px}.gwvp-gallery-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.gwvp-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.gwvp-card{overflow:hidden;border:1px solid #e5e5e5;border-radius:16px;background:#fff}.gwvp-card-img{width:100%;display:block}.gwvp-card-body{padding:12px}.gwvp-card-body p{white-space:normal;line-height:1.5}.gwvp-card-body audio{width:100%}.gwvp-card-actions{display:flex;gap:12px;align-items:center;margin-top:10px}.gwvp-card-actions a,.gwvp-card-actions button{background:none;border:0;padding:0;cursor:pointer;text-decoration:none}.gwvp-empty,.gwvp-error{padding:30px;text-align:center;background:#f7f7f7;border-radius:14px}.gwvp-status{margin-top:10px;font-weight:600}@media(max-width:760px){.gwvp{padding:14px}.gwvp-editor{grid-template-columns:1fr}.gwvp-frame-list{grid-template-columns:repeat(4,1fr)}.gwvp-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.gwvp-card-body{padding:9px}.gwvp-card-body p{font-size:13px}.gwvp-btn{width:100%}}@media(max-width:420px){.gwvp-gallery{grid-template-columns:1fr}.gwvp-frame-list{grid-template-columns:repeat(2,1fr)}}
.gwvp-card.gwvp-new{animation:gwvpNew 2.5s ease}@keyframes gwvpNew{0%{outline:4px solid #222;transform:scale(1.01)}100%{outline:0;transform:none}}

.gwvp-preview-wrap{aspect-ratio:4/5;min-height:0;width:100%}
.gwvp-canvas{width:100%;aspect-ratio:4/5;object-fit:contain}
.gwvp-video{width:100%;aspect-ratio:4/5;object-fit:cover}

.gwvp-frame-list{position:relative}
.gwvp-frame-list::before{content:"Pilih salah satu frame terlebih dahulu";display:block;font-size:13px;font-weight:600;margin-bottom:4px}
.gwvp-frame.selected{box-shadow:0 0 0 2px #222}

.gwvp-editor{display:block}
.gwvp-preview-wrap{position:relative;width:min(100%,540px);margin:0 auto;background:#111;border-radius:16px;overflow:hidden;aspect-ratio:4/5;min-height:0}
.gwvp-preview-wrap .gwvp-video,.gwvp-preview-wrap .gwvp-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.gwvp-preview-wrap .gwvp-canvas{object-fit:contain}
.gwvp-live-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;z-index:3}
 .gwvp-capture{
  position:absolute;
  left:50%;
  bottom:14px;
  transform:translateX(-50%);
  width:76px;
  height:76px;
  border-radius:50%;
  border:6px solid #fff;
  background:#111;
  color:transparent;
  font-size:0;
  line-height:0;
  padding:0;
  z-index:4;
  box-shadow:0 2px 12px rgba(0,0,0,.4);
  cursor:pointer;
}
.gwvp-capture:after{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:50%;
  background:#fff;
}
.gwvp-camera-error{margin-top:10px;padding:12px;border-radius:10px;background:#fff3f3;color:#8a1f1f}
.gwvp-camera-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.gwvp-next:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:760px){
  .gwvp-frame-list{grid-template-columns:repeat(2,1fr)}
  .gwvp-editor-actions .gwvp-btn{width:100%}
}

.gwvp-canvas{display:block;width:100%;height:auto;max-width:100%;background:#f5f5f5}
.gwvp-step-editor .gwvp-replace{margin-top:8px}

.gwvp-crop-controls{display:none;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 0;padding:10px 12px;border-radius:10px;background:#f4f4f4;font-size:13px}
.gwvp-crop-controls span{width:100%}
.gwvp-crop-controls input{flex:1;min-width:150px}
.gwvp-crop-value{min-width:45px;text-align:right}
.gwvp-step-editor:has(.gwvp-crop-controls) .gwvp-crop-controls{display:flex}
.gwvp-preview-wrap{touch-action:none}

.gwvp-mini-preview{width:min(240px,70vw);margin:0 auto 14px;border-radius:12px;overflow:hidden;background:#eee}
.gwvp-wish-preview{display:block;width:100%;height:auto}
.gwvp-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}
.gwvp-tabs button{padding:12px;border:1px solid #ddd;border-radius:10px;background:#fff;font-weight:700;cursor:pointer}
.gwvp-tabs button.active{background:#222;color:#fff;border-color:#222}
.gwvp-wish-panel{position:relative}
.gwvp-wish{width:100%;min-height:130px;resize:vertical}
.gwvp-counter{text-align:right;font-size:12px;color:#777;margin-top:4px}
.gwvp-voice{padding:14px;border-radius:12px;background:#f6f6f6;text-align:center}
.gwvp-recording-time{font-size:28px;font-variant-numeric:tabular-nums;font-weight:700;margin:10px 0}
.gwvp-voice-status{margin-top:8px;font-size:13px}
.gwvp-submit:disabled{opacity:.45;cursor:not-allowed}
.gwvp-back-photo{margin-top:8px;background:#fff!important;color:#222!important;border:1px solid #ddd!important}
.gwvp-new{outline:3px solid #222;outline-offset:3px;animation:gwvpPulse 1.2s ease 2}
@keyframes gwvpPulse{0%,100%{outline-color:#222}50%{outline-color:transparent}}

/* Gallery: compact thumbnail grid */
.gwvp-gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.gwvp-card{border:0;border-radius:12px;background:#f4f4f4;overflow:hidden}
.gwvp-thumb{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;line-height:0}
.gwvp-card-img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;transition:transform .18s ease}
.gwvp-thumb:hover .gwvp-card-img{transform:scale(1.02)}
.gwvp-card-body,.gwvp-card-actions{display:none!important}

.gwvp-modal-open{overflow:hidden}
.gwvp-modal{position:fixed;inset:0;z-index:999999}
.gwvp-modal[hidden]{display:none}
.gwvp-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.78)}
.gwvp-modal-dialog{position:relative;width:min(92vw,520px);max-height:92vh;overflow:auto;margin:4vh auto 0;background:#fff;border-radius:18px;padding:12px;box-shadow:0 12px 50px rgba(0,0,0,.35)}
.gwvp-modal-close{position:absolute;right:10px;top:10px;width:42px;height:42px;border:0;border-radius:50%;background:rgba(0,0,0,.65);color:#fff;font-size:30px;line-height:1;z-index:3;cursor:pointer}
.gwvp-modal-photo-wrap{border-radius:12px;overflow:hidden;background:#111}
.gwvp-modal-photo{display:block;width:100%;height:auto;max-height:68vh;object-fit:contain}
.gwvp-modal-info{padding:12px 4px 4px}
.gwvp-modal-name{font-size:17px}
.gwvp-modal-wish{margin:7px 0;line-height:1.5}
.gwvp-modal-audio{width:100%;margin-top:8px}
.gwvp-modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.gwvp-modal-actions a,.gwvp-modal-actions button{display:flex;align-items:center;justify-content:center;min-height:46px;border:0;border-radius:10px;background:#222;color:#fff;text-decoration:none;font-size:15px;cursor:pointer}
@media(max-width:760px){
  .gwvp-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .gwvp-card{border-radius:9px}
  .gwvp-modal-dialog{width:94vw;margin:3vh auto 0;padding:9px}
  .gwvp-modal-photo{max-height:66vh}
}
@media(max-width:420px){
  .gwvp-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
}

/* v0.2.0: cleaner photo modal */
.gwvp-modal-dialog{padding:0;overflow-y:auto;overflow-x:hidden;max-height:92vh}
.gwvp-modal-topbar{position:sticky;top:0;z-index:10;height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 10px 0 16px;background:#fff}
.gwvp-modal-title{font-size:14px;font-weight:700;color:#555}
.gwvp-modal-close{position:static;width:38px;height:38px;display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:#222;color:#fff;font-size:26px;line-height:1;cursor:pointer}
.gwvp-modal-photo-wrap{border-radius:0;background:#111}
.gwvp-modal-photo{max-height:68vh}
.gwvp-modal-info{padding:14px 16px 4px}
.gwvp-modal-name{font-size:18px}
.gwvp-modal-wish{margin:7px 0 0;line-height:1.5}
.gwvp-modal-voice-wrap{margin-top:12px;padding:11px;border-radius:10px;background:#f4f4f4}
.gwvp-modal-voice-label{font-size:13px;font-weight:700;margin-bottom:7px}
.gwvp-modal-audio{display:block;width:100%;margin:0}
.gwvp-modal-actions{position:sticky;bottom:0;z-index:10;padding:10px 16px 16px;margin-top:0;background:#fff;box-shadow:0 -6px 16px rgba(0,0,0,.08);grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:760px){
  .gwvp-modal-dialog{width:94vw;margin:2vh auto 0}
  .gwvp-modal-photo{max-height:64vh}
}

.gwvp-thumb{position:relative}
.gwvp-voice-badge{position:absolute;right:7px;bottom:7px;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.72);color:#fff;font-size:15px}

.gwvp-modal-video{display:flex;align-items:center;justify-content:center}
@media(max-width:760px){
  .gwvp-modal-dialog{max-height:94vh;overflow-y:auto}
  .gwvp-modal-photo{max-height:52vh;object-fit:contain}
  .gwvp-modal-actions{grid-template-columns:1fr 1fr}
  .gwvp-modal-video{grid-column:1 / -1}
}

.gwvp-modal-download[hidden],.gwvp-modal-video[hidden]{display:none!important}
.gwvp-modal-actions.voice-only{grid-template-columns:1fr}

.gwvp-camera-switch{display:inline-flex;align-items:center;justify-content:center}