:root{
  --pv-turquoise: #02A1C4;
  --pv-tangerine: #F77F00;
  --pv-blue: #002655;
  --pv-muted: rgba(0,0,0,.6);
  --pv-border: rgba(0,0,0,.12);
  --pv-bg: #ffffff;
  --pv-soft: rgba(2,161,196,.10);
  --pv-soft2: rgba(2,161,196,.05);
}
.pv-pbt-wrap{ box-sizing:border-box; }
.pv-pbt-wrap *, .pv-pbt-wrap *:before, .pv-pbt-wrap *:after { box-sizing:border-box; }
.pv-pbt-card{ background:var(--pv-bg); border:1px solid var(--pv-border); border-radius:16px; padding:18px; max-width:1100px; }
.pv-pbt-header{ margin-bottom:14px; }
.pv-pbt-title{ margin:0 0 6px 0; color:var(--pv-blue); font-size:28px; line-height:1.2; font-weight:800; }
.pv-pbt-subtitle{ margin:0; color:var(--pv-muted); font-size:14px; }
.pv-pbt-section{ margin-top:14px; }
.pv-pbt-dropzone{ border:2px dashed rgba(2,161,196,.55); background:linear-gradient(0deg,var(--pv-soft),rgba(255,255,255,1)); border-radius:14px; padding:18px; transition:.15s ease; }
.pv-pbt-dropzone.pv-is-dragover{ border-color:var(--pv-turquoise); box-shadow:0 0 0 4px rgba(2,161,196,.12); }
.pv-pbt-dropzone-title{ font-weight:700; color:var(--pv-blue); font-size:16px; margin-bottom:4px; }
.pv-pbt-dropzone-hint{ color:var(--pv-muted); font-size:14px; margin-bottom:12px; }
.pv-pbt-actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.pv-btn{ appearance:none; border:1px solid transparent; border-radius:12px; padding:10px 12px; font-size:14px; line-height:1; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:.12s ease; user-select:none; background:transparent; }
.pv-btn:disabled{ opacity:.55; cursor:not-allowed; }
.pv-btn-primary{ background:var(--pv-turquoise); color:#fff; }
.pv-btn-primary:hover:not(:disabled){ filter:brightness(.96); }
.pv-btn-secondary{ background:var(--pv-tangerine); color:#fff; }
.pv-btn-secondary:hover:not(:disabled){ filter:brightness(.96); }
.pv-btn-light{ background:#fff; border-color:var(--pv-border); color:var(--pv-blue); }
.pv-btn-light:hover:not(:disabled){ border-color:rgba(2,161,196,.45); box-shadow:0 0 0 3px rgba(2,161,196,.10); }
.pv-btn-ghost{ background:transparent; border-color:var(--pv-border); color:var(--pv-blue); }
.pv-btn-ghost:hover:not(:disabled){ border-color:rgba(247,127,0,.55); box-shadow:0 0 0 3px rgba(247,127,0,.10); }
.pv-pbt-notice{ margin-top:12px; border-radius:12px; padding:10px 12px; border:1px solid var(--pv-border); font-size:13px; }
.pv-pbt-notice-warn{ border-color:rgba(247,127,0,.35); background:rgba(247,127,0,.08); color:var(--pv-blue); }
.pv-pbt-notice-info{ border-color:rgba(2,161,196,.35); background:rgba(2,161,196,.08); color:var(--pv-blue); }
.pv-pbt-editor-grid{ display:grid; grid-template-columns:1.25fr .75fr; gap:14px; }
@media (max-width:900px){ .pv-pbt-editor-grid{ grid-template-columns:1fr; } }
.pv-pbt-crop-frame{ border:1px solid var(--pv-border); border-radius:14px; overflow:hidden; background:#fff; min-height:360px; position:relative; }
.pv-pbt-crop-frame img{ max-width:100%; display:block; }
.pv-pbt-controls{ margin-top:12px; display:flex; gap:8px; flex-wrap:wrap; }
.pv-pbt-help{ color:var(--pv-muted); font-size:13px; margin-top:8px; }
.pv-pbt-help-left{ margin-top:10px; }
.pv-pbt-side{ display:flex; flex-direction:column; gap:12px; }
.pv-pbt-panel{ border:1px solid var(--pv-border); border-radius:14px; padding:12px; background:#fff; }
.pv-pbt-panel-preview,.pv-pbt-panel-preset{ background:var(--pv-soft2); }
.pv-pbt-panel-title{ font-weight:700; color:var(--pv-blue); margin-bottom:10px; font-size:14px; }
.pv-pbt-preview{ width:100%; height:auto; border-radius:12px; border:1px solid rgba(0,0,0,.10); background:
  linear-gradient(45deg, rgba(0,0,0,.05) 25%, transparent 25%),
  linear-gradient(-45deg, rgba(0,0,0,.05) 25%, transparent 25%),
  linear-gradient(45deg, transparent 75%, rgba(0,0,0,.05) 75%),
  linear-gradient(-45deg, transparent 75%, rgba(0,0,0,.05) 75%);
  background-size:20px 20px; background-position:0 0, 0 10px, 10px -10px, -10px 0px; }
.pv-pbt-field{ display:flex; flex-direction:column; gap:8px; }
.pv-pbt-input,.pv-pbt-select{ width:100%; border-radius:12px; border:1px solid var(--pv-border); padding:10px 12px; font-size:14px; outline:none; color:var(--pv-blue); background:#fff; }
.pv-pbt-input:focus,.pv-pbt-select:focus{ border-color:rgba(2,161,196,.65); box-shadow:0 0 0 4px rgba(2,161,196,.10); }
.pv-pbt-label{ font-size:13px; color:var(--pv-muted); margin-bottom:4px; }
.pv-pbt-row{ display:flex; gap:10px; align-items:center; }
.pv-pbt-row-tight{ gap:8px; }
.pv-pbt-color{ width:48px; height:34px; border-radius:10px; border:1px solid var(--pv-border); background:#fff; padding:0; }
.pv-pbt-field-hint{ font-size:12.5px; color:var(--pv-muted); }
.pv-pbt-downloads{ display:flex; flex-direction:column; gap:10px; }
.pv-pbt-brandline{ margin-top:10px; font-size:12.5px; color:rgba(0,38,85,.72); }
.pv-pbt-preset-options{ display:flex; flex-wrap:wrap; gap:12px; }
.pv-pbt-preset-option{ display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid var(--pv-border); border-radius:12px; background:#fff; color:var(--pv-blue); font-size:14px; cursor:pointer; }
.pv-pbt-preset-option input{ accent-color:var(--pv-turquoise); }
.pv-pbt-preset-option:has(input:checked){ border-color:rgba(2,161,196,.55); box-shadow:0 0 0 3px rgba(2,161,196,.10); }
.pv-pbt-feedback{ margin-top:12px; padding-top:10px; border-top:1px solid rgba(0,0,0,.08); }
.pv-pbt-feedback-label{ font-size:13px; color:var(--pv-muted); margin-bottom:8px; font-weight:600; }
.pv-pbt-feedback-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.pv-pbt-feedback-btn{ padding:8px 10px; border-radius:999px; font-size:13px; gap:6px; }
.pv-pbt-feedback-btn span{ font-weight:700; }
@media (max-width:600px){
  .pv-pbt-card{ padding:14px; }
  .pv-pbt-crop-frame{ min-height:240px; }
  .pv-pbt-panel{ padding:10px; }
  .pv-pbt-preview{ max-height:220px; }
}
.pv-pbt-wrap .cropper-point{ width:16px; height:16px; opacity:.95; background-color:var(--pv-turquoise); border-radius:999px; transition:box-shadow .12s ease, transform .12s ease; }
.pv-pbt-wrap .cropper-point:hover,.pv-pbt-wrap .cropper-point:active{ box-shadow:0 0 0 4px rgba(2,161,196,.18); transform:scale(1.02); }
.pv-pbt-wrap .cropper-line{ background-color:rgba(2,161,196,.70); }
.pv-pbt-wrap .cropper-view-box{ outline:2px solid var(--pv-turquoise); outline-offset:-2px; transition:box-shadow .12s ease; }
.pv-pbt-wrap.pv-is-cropping .cropper-view-box{ box-shadow:0 0 0 6px rgba(2,161,196,.14); }