@font-face{font-family:'F1';src:url('/assets/fonts/F1.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'F2';src:url('/assets/fonts/F2.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'F3';src:url('/assets/fonts/F3.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'F4';src:url('/assets/fonts/F4.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'F5';src:url('/assets/fonts/F5.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'F6';src:url('/assets/fonts/F6.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'F7';src:url('/assets/fonts/F7.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'F8';src:url('/assets/fonts/F8.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'F9';src:url('/assets/fonts/F9.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'F10';src:url('/assets/fonts/F10.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'F11';src:url('/assets/fonts/F11.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'F12';src:url('/assets/fonts/F12.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'F13';src:url('/assets/fonts/F13.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'F14';src:url('/assets/fonts/F14.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'F15';src:url('/assets/fonts/F15.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'F16';src:url('/assets/fonts/F16.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'F17';src:url('/assets/fonts/F17.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'F18';src:url('/assets/fonts/F18.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'F19';src:url('/assets/fonts/F19.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'F20';src:url('/assets/fonts/F20.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'F21';src:url('/assets/fonts/F21.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'F22';src:url('/assets/fonts/F22.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'F23';src:url('/assets/fonts/F23.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'F24';src:url('/assets/fonts/F24.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'F25';src:url('/assets/fonts/F25.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'F26';src:url('/assets/fonts/F26.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'F27';src:url('/assets/fonts/F27.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'F28';src:url('/assets/fonts/F28.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'F29';src:url('/assets/fonts/F29.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'F30';src:url('/assets/fonts/F30.woff2') format('woff2');font-display:swap;}

#pawDesigner{
  --paw-ink:#101820;
  --paw-muted:#667085;
  --paw-line:#d9dde4;
  --paw-gold:#b58b3d;
  --paw-blue:#159fe6;
  color:var(--paw-ink);
}
#pawDesigner *{box-sizing:border-box}
.paw-builder-shell{
  margin-top:24px;
  border:1px solid var(--paw-line);
  border-radius:20px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 10px 28px rgba(16,24,32,.06);
}
.paw-builder-title{
  padding:20px 22px;
  background:#111;
  color:#fff;
  border-bottom:4px solid var(--paw-gold);
}
.paw-builder-title h2{margin:0;font-size:26px;line-height:1.1}
.paw-builder-title p{margin:7px 0 0;color:#e8c978;font-size:14px}
.paw-builder-grid{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(330px,.9fr);
  gap:20px;
  padding:20px;
}
.paw-preview-card,.paw-panel{
  border:1px solid var(--paw-line);
  border-radius:16px;
  background:#fff;
}
.paw-preview-card{overflow:hidden}
.paw-preview-head{padding:14px 16px;border-bottom:1px solid var(--paw-line)}
.paw-preview-head strong{font-size:17px}
.paw-preview-zone{
  background:linear-gradient(180deg,#f0f2f4 0%,#dfe4e8 100%);
  padding:20px 14px 24px;
  display:grid;
  gap:22px;
}
.paw-side{text-align:center}
.paw-side-label{
  color:#20262d;font-weight:800;font-size:12px;letter-spacing:1.5px;margin-bottom:8px
}
.paw-tag-stage{
  position:relative;
  width:min(100%,620px);
  margin:0 auto;
}
.paw-tag-stage img{
  display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none;
  filter:drop-shadow(0 10px 12px rgba(0,0,0,.22))
}
.paw-engraved{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  white-space:nowrap;
  overflow:visible;
  color:#686868;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(180deg,#8d8d8d 0%,#5f5f5f 26%,#343434 48%,#6e6e6e 70%,#3b3b3b 100%);
  -webkit-background-clip:text;
  background-clip:text;
  text-shadow:0 1px 0 rgba(255,255,255,.48),0 -1px 1px rgba(0,0,0,.56),0 0 1px rgba(0,0,0,.28);
  filter:drop-shadow(0 1px .2px rgba(255,255,255,.32));
  line-height:.92;
}
.paw-front-safe{position:absolute;left:28%;top:23%;width:57%;height:60%}
#pawFrontName{
  width:100%;
  font-size:98px;
  font-weight:400;
  transform:translate(-50%,-50%) scaleY(1.34);
  transform-origin:center center;
}
.paw-back-text{font-family:"Times New Roman",Times,serif}
.paw-note{color:var(--paw-muted);font-size:12px;margin-top:7px}
.paw-summary{
  display:grid;grid-template-columns:repeat(3,1fr);gap:9px;
  padding:14px;background:#fafbfc;border-top:1px solid var(--paw-line)
}
.paw-summary-item{border:1px solid var(--paw-line);border-radius:10px;background:#fff;padding:9px 10px}
.paw-summary-item span{display:block;color:var(--paw-muted);font-size:10px;text-transform:uppercase;letter-spacing:.7px}
.paw-summary-item b{display:block;margin-top:2px;font-size:13px;overflow-wrap:anywhere}
.paw-controls{display:grid;gap:13px;align-content:start}
.paw-panel{padding:15px}
.paw-panel h3{margin:0 0 10px;font-size:16px}
.paw-label{display:block;font-size:12px;font-weight:800;margin:10px 0 5px}
#pawDesigner input[type="text"],
#pawDesigner input[type="tel"]{
  width:100%;border:1px solid #cbd2db;border-radius:9px;padding:10px 11px;font:inherit;background:#fff;color:#111;outline:none
}
#pawDesigner input:focus{border-color:var(--paw-blue);box-shadow:0 0 0 3px rgba(21,159,230,.13)}
.paw-help{font-size:11px;color:var(--paw-muted);margin-top:5px}
.paw-toggle-row{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.paw-toggle{
  border:1px solid #cbd2db;background:#fff;border-radius:9px;padding:10px;font-weight:800;cursor:pointer
}
.paw-toggle.active{background:#111;color:#fff;border-color:#111}
.paw-font-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:6px;max-height:300px;overflow:auto;padding:2px
}
.paw-font-choice{
  border:1px solid #d1d6dc;background:#fff;border-radius:8px;min-height:58px;padding:4px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center
}
.paw-font-choice span{font-family:Arial,sans-serif;font-size:10px;font-weight:800;color:#4e5967}
.paw-font-choice b{font-size:23px;font-weight:400;line-height:1.05;margin-top:2px}
.paw-font-choice.active{border:2px solid #111;background:#f3f5f7;padding:3px}
.paw-back-option{border:1px solid #e0e4e9;border-radius:10px;padding:9px 10px;margin-top:8px;background:#fafbfc}
.paw-back-option.off{opacity:.65}
.paw-back-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}
.paw-back-head strong{font-size:12px}
.paw-check{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:#3f4956}
.paw-check input{width:auto}
.paw-back-option input:disabled{background:#eef1f4;color:#9098a3;cursor:not-allowed}
.paw-add{
  width:100%;
  border:0;border-radius:11px;padding:14px 16px;
  background:#111;color:#fff;font-weight:900;font-size:16px;cursor:pointer
}
.paw-add:hover{background:#252b31}
.paw-error{
  display:none;margin:0 20px 20px;padding:12px 14px;border-left:5px solid #c72c41;
  background:#fff0f2;color:#711827;border-radius:7px
}
.paw-error.show{display:block}
.paw-order-preview{
  margin-top:10px;padding:10px 11px;background:#fafbfc;border:1px dashed #aeb7c2;border-radius:9px;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;white-space:pre-wrap
}

@media(max-width:900px){
  .paw-builder-grid{grid-template-columns:1fr}
}
@media(max-width:520px){
  .paw-builder-grid{padding:11px}
  .paw-preview-zone{padding:14px 6px 18px}
  .paw-font-grid{grid-template-columns:repeat(4,1fr);max-height:360px}
  .paw-summary{grid-template-columns:1fr}
  .paw-front-safe{left:27%;width:58%;top:24%;height:58%}
  #pawFrontName{font-size:86px}
}