/* Tringify Popups admin. Built on the App Bridge UI kit (tb-*); pp-* is
   this app's editor layout. */
.pp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.pp-head > div{min-width:0;flex:1}

/* Popup list */
.pp-row-name{font-weight:600}
.pp-row-sub{color:var(--tb-muted,#6b7280);font-size:13px;margin-top:2px}
.pp-kind{display:inline-flex;align-items:center;gap:6px}
.pp-actions{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.pp-num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}

/* Template gallery */
.pp-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.pp-tile{display:flex;flex-direction:column;border:1px solid var(--tb-border,#e5e7eb);border-radius:var(--tb-radius,12px);overflow:hidden;background:var(--tb-surface,#fff);text-align:left;cursor:pointer;padding:0;font:inherit;color:inherit;transition:border-color .15s,box-shadow .15s,transform .15s}
.pp-tile:hover{border-color:var(--tb-text,#111);box-shadow:0 8px 24px rgba(0,0,0,.08);transform:translateY(-1px)}
.pp-tile-art{position:relative;height:190px;background:linear-gradient(135deg,#eef0f3,#e3e6ea);overflow:hidden}
.pp-tile-art iframe{position:absolute;left:50%;top:50%;width:720px;height:560px;border:0;transform:translate(-50%,-50%) scale(.36);transform-origin:center;pointer-events:none;background:transparent}
.pp-tile-text{padding:14px 16px 16px}
.pp-tile-title{font-weight:600;margin-bottom:4px}
.pp-tile-desc{font-size:13px;color:var(--tb-muted,#6b7280);line-height:1.45}

/* Editor */
.pp-editor{display:grid;grid-template-columns:minmax(340px,420px) 1fr;gap:0;height:calc(100vh - 32px);min-height:560px;border:1px solid var(--tb-border,#e5e7eb);border-radius:var(--tb-radius,12px);overflow:hidden;background:var(--tb-surface,#fff)}
.pp-panel{display:flex;flex-direction:column;border-right:1px solid var(--tb-border,#e5e7eb);min-width:0;min-height:0}
.pp-panel-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--tb-border,#e5e7eb)}
.pp-name{font-weight:600}
.pp-tabs{padding:0 8px;border-bottom:1px solid var(--tb-border,#e5e7eb);overflow-x:auto;white-space:nowrap}
.pp-panel-body{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:16px}
.pp-group{display:flex;flex-direction:column;gap:12px}
.pp-group-title{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--tb-muted,#6b7280)}
.pp-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pp-three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.pp-inline{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pp-color{display:flex;align-items:center;gap:8px}
.pp-color input[type=color]{width:36px;height:36px;padding:0;border:1px solid var(--tb-border,#e5e7eb);border-radius:8px;background:none;cursor:pointer;flex:0 0 auto}
.pp-color .tb-input{font-family:ui-monospace,Menlo,monospace;font-size:13px}
.pp-range-row{display:flex;align-items:center;gap:10px}
.pp-range-row input[type=range]{flex:1;accent-color:var(--tb-text,#111)}
.pp-range-row output{min-width:44px;text-align:right;font-variant-numeric:tabular-nums;font-size:13px;color:var(--tb-muted,#6b7280)}
.pp-blocks{display:flex;flex-direction:column;gap:6px}
.pp-block{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--tb-border,#e5e7eb);border-radius:10px;background:var(--tb-surface,#fff);cursor:pointer;user-select:none}
.pp-block[aria-current=true]{border-color:var(--tb-text,#111);box-shadow:inset 0 0 0 1px var(--tb-text,#111)}
.pp-block.pp-dragging{opacity:.4}
.pp-block.pp-drop-before{box-shadow:inset 0 3px 0 var(--tb-text,#111)}
.pp-grip{cursor:grab;color:var(--tb-muted,#9ca3af);font-size:14px;line-height:1;padding:2px}
.pp-block-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.pp-block-type{font-size:11px;color:var(--tb-muted,#6b7280);text-transform:uppercase;letter-spacing:.05em}
.pp-block-tools{display:flex;gap:2px}
.pp-icon-btn{border:0;background:none;width:28px;height:28px;border-radius:6px;cursor:pointer;color:var(--tb-muted,#6b7280);display:grid;place-items:center;font-size:14px}
.pp-icon-btn:hover{background:rgba(127,127,127,.12);color:var(--tb-text,#111)}
.pp-add{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.pp-add button{padding:8px 6px;border:1px dashed var(--tb-border,#d1d5db);border-radius:8px;background:none;font:inherit;font-size:12.5px;cursor:pointer;color:inherit}
.pp-add button:hover{border-style:solid;border-color:var(--tb-text,#111)}
.pp-block-editor{border-top:1px solid var(--tb-border,#e5e7eb);padding-top:16px}
.pp-chips{display:flex;flex-wrap:wrap;gap:6px}
.pp-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--tb-border,#d1d5db);border-radius:999px;background:none;font:inherit;font-size:13px;cursor:pointer;color:inherit}
.pp-chip[aria-pressed=true]{background:var(--tb-text,#111);color:var(--tb-surface,#fff);border-color:var(--tb-text,#111)}
.pp-trigger{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding:10px;border:1px solid var(--tb-border,#e5e7eb);border-radius:10px}
.pp-slice{display:grid;grid-template-columns:36px 1fr 110px 70px 28px;gap:8px;align-items:center}
.pp-trans{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border:1px solid var(--tb-border,#e5e7eb);border-radius:10px}
.pp-meter{height:6px;border-radius:99px;background:rgba(127,127,127,.18);overflow:hidden;width:120px}
.pp-meter i{display:block;height:100%;background:var(--tb-text,#111)}

/* Stage */
.pp-stage{display:flex;flex-direction:column;min-width:0;min-height:0;background:#f4f5f7}
.pp-stage-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--tb-border,#e5e7eb);background:var(--tb-surface,#fff);flex-wrap:wrap}
.pp-seg{display:inline-flex;border:1px solid var(--tb-border,#d1d5db);border-radius:8px;overflow:hidden}
.pp-seg button{border:0;background:none;padding:6px 12px;font:inherit;font-size:13px;cursor:pointer;color:inherit}
.pp-seg button[aria-pressed=true]{background:var(--tb-text,#111);color:var(--tb-surface,#fff)}
.pp-seg button + button{border-left:1px solid var(--tb-border,#d1d5db)}
.pp-locale{margin-left:auto;width:auto}
.pp-canvas{position:relative;flex:1;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:24px;transition:padding .2s}
.pp-canvas[data-device=mobile]{padding:24px calc(50% - 195px)}
.pp-site{position:absolute;inset:24px;border-radius:12px;background:#fff;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.pp-canvas[data-device=mobile] .pp-site{left:calc(50% - 195px);right:calc(50% - 195px)}
.pp-site-bar{height:44px;border-bottom:1px solid #eef0f2;background:#fafafa}
.pp-site-hero{height:38%;margin:20px;border-radius:10px;background:linear-gradient(120deg,#eceef1,#e2e5e9)}
.pp-site-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0 20px}
.pp-site-row i{height:140px;border-radius:10px;background:#eef0f3}
.pp-shade{position:absolute;inset:24px;border-radius:12px;background:rgba(15,15,20,.45);pointer-events:none;transition:opacity .2s}
.pp-canvas[data-device=mobile] .pp-shade{left:calc(50% - 195px);right:calc(50% - 195px)}
.pp-holder{position:relative;z-index:1;max-height:100%;overflow:auto;border-radius:16px}
.pp-holder iframe{display:block;border:0;background:transparent;width:480px;max-width:100%;height:300px}
.pp-canvas[data-presentation=sticky_bar] .pp-holder{position:absolute;left:24px;right:24px;bottom:24px;border-radius:0 0 12px 12px}
.pp-canvas[data-presentation=sticky_bar] .pp-holder iframe{width:100%}
.pp-canvas[data-presentation=sticky_bar][data-device=mobile] .pp-holder{left:calc(50% - 195px);right:calc(50% - 195px)}
.pp-canvas[data-presentation=drawer] .pp-holder{position:absolute;top:24px;right:24px;bottom:24px;border-radius:0 12px 12px 0}
.pp-canvas[data-presentation=drawer] .pp-holder iframe{width:400px;height:100%}
.pp-canvas[data-presentation=drawer][data-device=mobile] .pp-holder{right:calc(50% - 195px);left:calc(50% - 195px)}
.pp-canvas[data-presentation=drawer][data-device=mobile] .pp-holder iframe{width:100%}
.pp-canvas[data-presentation=sticky_bar] .pp-shade,.pp-canvas[data-presentation=drawer][data-shade=off] .pp-shade{opacity:0}
.pp-canvas[data-device=mobile][data-presentation=modal] .pp-holder{position:absolute;left:calc(50% - 195px);right:calc(50% - 195px);bottom:24px;border-radius:16px 16px 12px 12px}
.pp-canvas[data-device=mobile][data-presentation=modal] .pp-holder iframe{width:100%}
.pp-problems{padding:10px 14px;border-top:1px solid var(--tb-border,#e5e7eb);background:#fffbeb;color:#92400e;font-size:13px}
.pp-problems ul{margin:4px 0 0;padding-left:18px}

/* Reports */
.pp-range{display:flex;align-items:center;gap:8px}
.pp-range .tb-input{width:auto}
.pp-chart{height:220px;display:flex;align-items:flex-end;gap:3px}
.pp-chart-bar{flex:1;display:flex;flex-direction:column-reverse;gap:1px;min-width:2px;height:100%}
.pp-chart-bar span{display:block;border-radius:2px 2px 0 0}
.pp-chart-empty{width:100%;align-self:center;text-align:center;color:var(--tb-muted,#6b7280)}
.pp-legend{display:flex;gap:16px;font-size:13px;color:var(--tb-muted,#6b7280);margin-top:10px}
.pp-legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}

@media (max-width:900px){
  .pp-editor{grid-template-columns:1fr;height:auto}
  .pp-panel{border-right:0;border-bottom:1px solid var(--tb-border,#e5e7eb);max-height:none}
  .pp-stage{min-height:620px}
}