/* =========================================================
   Wallet UI Studio — template manager & visual text editor
   Loaded after styles.css so these rules can extend the base UI.
   ========================================================= */

/* ---------- Layout tweaks ---------- */
.phone-screen{--pv-scale:.3488}
.phone-screen>img{object-fit:fill}
.wifi-icon{display:inline-flex;flex:none;align-items:center;justify-content:center;width:calc(43px * var(--pv-scale));height:calc(43px * var(--pv-scale));color:inherit}
.wifi-icon svg{display:block;width:100%;height:100%;overflow:visible}
.wifi-icon svg path{fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round}
.wifi-icon svg circle{fill:currentColor;stroke:none}

/* Status bar is laid out in the same 946 × 2048 design units as the PNG export */
.statusbar-overlay{font-size:calc(40px * var(--pv-scale))}
.status-icons{gap:calc(20px * var(--pv-scale))}
.signal-bars{height:calc(32px * var(--pv-scale));gap:calc(6px * var(--pv-scale))}
.signal-bars i{width:calc(11px * var(--pv-scale));border-radius:calc(3px * var(--pv-scale));background:currentColor}
.battery-icon{width:calc(80px * var(--pv-scale));height:calc(43px * var(--pv-scale));border:calc(4px * var(--pv-scale)) solid currentColor;border-radius:calc(11px * var(--pv-scale));padding:calc(4px * var(--pv-scale))}
.battery-icon .battery-fill{border-radius:calc(4px * var(--pv-scale))}
.battery-icon:after{right:calc(-11.5px * var(--pv-scale));width:calc(9px * var(--pv-scale));height:42%;border-radius:0 calc(4px * var(--pv-scale)) calc(4px * var(--pv-scale)) 0}
.sidebar{display:flex;flex-direction:column}
#templateList{overflow:auto;max-height:calc(100vh - 470px);padding-right:2px}
.sidebar-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:auto;padding-top:12px}
.sidebar-actions .btn{padding:8px 6px;font-size:11px;white-space:nowrap}
.sidebar-foot{position:static;left:auto;bottom:auto;margin-top:10px;padding:0 8px}
.count-badge{display:inline-grid;place-items:center;min-width:17px;height:17px;padding:0 5px;margin-left:4px;border-radius:9px;background:#21375a;color:#84a9dd;font-size:9px;font-weight:600}
.save-state.unsaved{color:#ffcf70}
.save-state.unsaved i{background:#ffb84d}

/* ---------- Template list ---------- */
.template-item{position:relative;padding-right:10px;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.template-thumb{overflow:hidden;background:#eef2f7;flex:none}
.template-thumb img{width:100%;height:100%;display:block;object-fit:cover}
.template-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.template-item em{margin-left:auto;padding-left:4px}
.template-del{position:absolute;right:5px;top:50%;transform:translateY(-50%);z-index:2;width:20px;height:20px;padding:0;border:0;border-radius:5px;background:transparent;color:#7f93b6;font:600 15px/1 Arial,sans-serif;cursor:pointer;opacity:0;transition:opacity .15s,background .15s,color .15s}
.template-item:hover .template-del,.template-item:focus-within .template-del{opacity:1}
.template-del:hover{background:#3a2434;color:#ff6b6b}
@media(hover:none){.template-del{opacity:1}}

/* ---------- Preview / editable text ---------- */
.stage-meta{display:flex;align-items:center;gap:10px}
.link-btn{padding:0;border:0;background:none;color:#6fa8ff;font-size:10px;cursor:pointer}
.link-btn:hover{text-decoration:underline}
.btn-tool{padding:8px 12px;border:1px solid #344767;background:#203252;color:#b9c9e4;font-size:11px}
.btn-tool.active{border-color:#3f7fd0;background:#1b4a86;color:#fff;box-shadow:0 0 0 2px #4389f533}

.phone-screen .pv-text{position:absolute;right:auto;top:auto;margin:0;transform-origin:0 0;z-index:2;font-family:Arial,Helvetica,sans-serif;user-select:none;-webkit-user-select:none}
.phone-screen.editing .pv-text{cursor:grab;touch-action:none;outline:1px dashed rgba(67,137,245,.55);outline-offset:3px;border-radius:2px}
.phone-screen.editing .pv-text:hover{outline-color:#6fa8ff;background:rgba(67,137,245,.07)}
.phone-screen.editing .pv-text.selected{outline:2px solid #4389f5;outline-offset:3px;background:rgba(67,137,245,.12);z-index:3}
.phone-screen.editing .pv-text.dragging{cursor:grabbing;outline-style:solid;background:rgba(67,137,245,.18)}
.phone-screen.editing>img{pointer-events:none}

/* ---------- Edit panel ---------- */
.edit-panel{margin-top:13px;padding:14px}
.edit-panel[hidden]{display:none}
.edit-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.edit-head strong{display:block;font-size:13px}
.edit-target{display:block;margin-top:3px;color:#8fa5c8;font-size:11px}
.edit-badge{flex:none;padding:4px 8px;border:1px solid #33557f;border-radius:20px;background:#152d4c;color:#7fb5ff;font-size:9px;letter-spacing:.4px}
.edit-empty{margin:11px 0 0;color:#8194b5;font-size:11px;line-height:1.6}
.edit-empty[hidden]{display:none}
.edit-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin-top:14px}
.edit-controls[hidden]{display:none}
.edit-controls .field>span{font-size:10px;color:#9aacca}
.color-row{display:flex;gap:6px}
.color-row input[type=color]{flex:none;width:38px;height:34px;padding:3px;border:1px solid #304464;border-radius:6px;background:#101d35;cursor:pointer}
.color-row input[type=text]{flex:1;min-width:0}
.edit-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid #293a59}
.edit-hint{color:#7f93b6;font-size:10px}
.edit-buttons{display:flex;gap:8px}

/* ---------- Add-template modal ---------- */
.modal-mask{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(5,11,25,.78);backdrop-filter:blur(3px)}
.modal-mask[hidden]{display:none}
.modal-card{width:min(460px,100%);max-height:90vh;overflow:auto;padding:20px;border:1px solid #2f4468;border-radius:14px;background:#172541;box-shadow:0 24px 60px #02060f99}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}
.modal-head h3{margin:0;font-size:16px}
.modal-head p{margin:4px 0 0;color:#8194b5;font-size:11px}
.modal-card>.field{margin-bottom:13px}
.modal-error{min-height:16px;margin:4px 0 10px;color:#ff8080;font-size:11px}
.modal-actions{display:flex;justify-content:flex-end;gap:9px}
.upload-box{display:flex;align-items:center;justify-content:center;min-height:112px;padding:12px;border:1px dashed #3a5278;border-radius:10px;background:#101d35;cursor:pointer;overflow:hidden;text-align:center;transition:border-color .15s,background .15s}
.upload-box:hover,.upload-box:focus-visible{border-color:#4389f5;background:#122541}
.upload-hint strong{display:block;color:#bcd0ef;font-size:12px}
.upload-hint small{display:block;margin-top:4px;color:#7f93b6;font-size:10px}
.upload-hint[hidden]{display:none}
#uploadPreview{max-width:100%;max-height:190px;display:block;object-fit:contain;border-radius:6px}
#uploadPreview[hidden]{display:none}

/* ---------- Responsive ---------- */
@media(max-width:1150px){
  #templateList{max-height:none}
  .edit-controls{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .edit-controls{grid-template-columns:1fr 1fr}
  .sidebar-actions{margin-top:12px}
  .edit-actions{align-items:flex-start}
  .edit-buttons{width:100%;justify-content:flex-end}
}