/* ── Viewport-fill layout ── */
body { display:flex; flex-direction:column; height:100vh; overflow:hidden; padding:0; align-items:stretch; }

/* ══════════════════════════════════════════════════════════════════════════
   service-viewer.css  —  Service Viewer page specific styles
   Custom back-btn/header-bar/tab-bar, iframe viewer, settings modal.
   No standard .page-header-row — block3 is custom header CSS.
   ══════════════════════════════════════════════════════════════════════════ */

/* Header bar */
.header-bar{display:flex;align-items:center;gap:0.6rem;padding:0.65rem 1.1rem;background:rgba(7,7,15,0.85);border-bottom:1px solid var(--border);flex-shrink:0;flex-wrap:nowrap;backdrop-filter:blur(24px);z-index:100;position:relative;}
.header-title{font-size:0.85rem;font-weight:700;color:var(--text);white-space:nowrap;font-family:'DM Sans',inherit;letter-spacing:-0.3px;}
.tab-bar{display:flex;align-items:center;gap:0.3rem;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.15) transparent;-webkit-overflow-scrolling:touch;}
.tab-bar::-webkit-scrollbar{height:3px;}
.tab-bar::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.18);border-radius:2px;}
.tab-bar::-webkit-scrollbar-track{background:transparent;}
.tab-bar-wrap{flex:1;min-width:0;overflow:hidden;}
/* tab-bar-wrap fade removed — no visual clip */
.tab{display:flex;align-items:center;gap:0.45rem;padding:0.3rem 0.85rem;border-radius:8px;border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.04);cursor:pointer;transition:all 0.15s;white-space:nowrap;font-family:inherit;font-size:0.8rem;font-weight:600;color:var(--text-dim);flex-shrink:0;min-height:48px;}
.tab:hover:not(.disabled){background:rgba(88,101,242,0.12);border-color:rgba(88,101,242,0.35);color:var(--text);}
.tab.active{background:rgba(88,101,242,0.2);border-color:rgba(88,101,242,0.5);color:#a8b4ff;}
.tab.disabled{opacity:0.35;cursor:not-allowed;filter:grayscale(1);}
.tab-icon{width:18px;height:18px;border-radius:4px;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;}
.tab-icon img{width:14px;height:14px;object-fit:contain;display:block;}
.tab-icon.emoji{font-size:0.9rem;}
.tab-badge{font-size:0.6rem;padding:0.08rem 0.35rem;border-radius:20px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);color:rgba(255,255,255,0.3);font-weight:600;letter-spacing:0.4px;}
.header-actions{display:flex;gap:0.4rem;flex-shrink:0;}
/* btn base + ghost/accent inherited from shared.css */

/* Config notice */
.config-notice{display:none;position:fixed;inset:0;z-index:200;background:rgba(0,0,0,0.75);backdrop-filter:blur(6px);align-items:center;justify-content:center;}
.config-notice.show{display:flex;}
.notice-card{background:linear-gradient(145deg,#13131f,#0f0f1a);border:1px solid rgba(88,101,242,0.35);border-radius:20px;padding:2rem 2.25rem;max-width:420px;width:90%;text-align:center;animation:noticeIn 0.3s cubic-bezier(.16,1,.3,1) both;}
@keyframes noticeIn{from{transform:scale(0.92);opacity:0}to{transform:scale(1);opacity:1}}
.notice-icon{font-size:2.5rem;margin-bottom:0.75rem;}
.notice-title{font-size:1.05rem;font-weight:800;color:var(--text);margin-bottom:0.5rem;}
.notice-body{font-size:0.85rem;color:var(--text-dim);line-height:1.55;margin-bottom:1.25rem;}
.notice-body a{color:#a8b4ff;text-decoration:none;}.notice-body a:hover{text-decoration:underline;}

/* Iframe */
.viewer-area{flex:1;position:relative;overflow:hidden;}
.iframe-pane{position:absolute;inset:0;display:none;}
.iframe-pane.active{display:block;}
.iframe-pane iframe{width:100%;height:100%;border:none;display:block;}
.empty-pane{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.75rem;color:var(--text-dim);font-size:0.9rem;}
.empty-pane .big-icon{font-size:3rem;opacity:0.3;}

/* Settings modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.65);backdrop-filter:blur(4px);z-index:500;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.2s;}
.modal-backdrop.open{opacity:1;pointer-events:all;}
.modal{background:linear-gradient(145deg,#13131f,#0f0f1a);border:1px solid rgba(88,101,242,0.3);border-radius:20px;padding:1.75rem 2rem;width:90%;max-width:500px;max-height:80vh;overflow-y:auto;animation:modalIn 0.25s cubic-bezier(.16,1,.3,1) both;}
@keyframes modalIn{from{transform:scale(0.93);opacity:0}to{transform:scale(1);opacity:1}}
.modal h3{margin:0 0 0.35rem;font-size:1.05rem;color:var(--text);}
.modal-sub{font-size:0.8rem;color:var(--text-dim);margin:0 0 1.25rem;}
.modal-footer{display:flex;justify-content:flex-end;gap:0.5rem;margin-top:1.25rem;}
.field-group{margin-bottom:1rem;}
.field-label{font-size:0.65rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-dim);margin-bottom:0.3rem;display:flex;align-items:center;gap:0.4rem;}
.required-tag{font-size:0.58rem;padding:0.08rem 0.35rem;border-radius:20px;background:rgba(231,76,60,0.12);border:1px solid rgba(231,76,60,0.25);color:var(--red);}
.optional-tag{font-size:0.58rem;padding:0.08rem 0.35rem;border-radius:20px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);color:#666;}
.field-row{display:flex;gap:0.5rem;align-items:center;}
.field-input{flex:1;background:rgba(255,255,255,0.05);border:1px solid rgba(88,101,242,0.2);border-radius:8px;padding:0.42rem 0.75rem;color:var(--text);font-family:inherit;font-size:0.84rem;outline:none;transition:border-color 0.2s;}
.field-input:focus{border-color:rgba(88,101,242,0.5);}.field-input::placeholder{color:#3a3a5a;}
.field-divider{height:1px;background:rgba(255,255,255,0.07);margin:1.25rem 0;}
.field-section-title{font-size:0.7rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,0.5);margin-bottom:0.85rem;}

/* Toast */
#toast{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%) translateY(20px);background:rgba(20,20,30,0.95);border:1px solid rgba(88,101,242,0.3);border-radius:10px;padding:0.6rem 1.2rem;font-size:0.83rem;font-weight:500;backdrop-filter:blur(20px);opacity:0;transition:all 0.3s;pointer-events:none;z-index:1000;white-space:nowrap;}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
#toast.success{border-color:rgba(46,204,113,0.4);color:var(--green);}
#toast.error{border-color:rgba(231,76,60,0.4);color:var(--red);}

/* Blocked overlay */
.blocked-overlay{position:absolute;inset:0;background:rgba(10,10,20,0.92);display:flex;align-items:center;justify-content:center;z-index:50;backdrop-filter:blur(8px);}
.blocked-card{text-align:center;padding:2rem 2.5rem;max-width:380px;}
.blocked-icon{font-size:2.5rem;margin-bottom:0.75rem;}
.blocked-title{font-size:1rem;font-weight:700;color:var(--text);margin-bottom:0.5rem;}
.blocked-body{font-size:0.84rem;color:var(--text-dim);margin-bottom:1.25rem;line-height:1.55;}