/*
 * Apperfy — shared tokens + builder styles.
 * Tokens live on .af-scope so they never leak into Elementor content.
 * Theme switching: <html data-theme="light|dark"> overrides the OS preference.
 */
.af-scope{
  --bg:#0B1420; --panel:#111C2B; --panel-2:#16263A; --border:#223244;
  --text:#EAF2F7; --text-muted:#8DA1B4;
  --accent:#FF6B35; --accent-ink:#2A0D02; --accent-text:#FF8A5C; --accent-rgb:255,107,53;
  --accent-2:#3DDC97; --danger:#FF5D6C;
  --radius:8px;
  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-body:'Manrope',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --af-header-h:64px;
  color-scheme: dark;
  background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:15px; line-height:1.5;
}
@media (prefers-color-scheme: light){
  html:not([data-theme]) .af-scope{
    --bg:#F6F7F9; --panel:#FFFFFF; --panel-2:#EFF1F4; --border:#DCE1E7;
    --text:#10151C; --text-muted:#546170; --accent-text:#B33F0E; --accent-2:#0E9F6E;
    color-scheme: light;
  }
}
html[data-theme="light"] .af-scope{
  --bg:#F6F7F9; --panel:#FFFFFF; --panel-2:#EFF1F4; --border:#DCE1E7;
  --text:#10151C; --text-muted:#546170; --accent-text:#B33F0E; --accent-2:#0E9F6E;
  color-scheme: light;
}
html[data-theme="dark"] .af-scope{
  --bg:#0B1420; --panel:#111C2B; --panel-2:#16263A; --border:#223244;
  --text:#EAF2F7; --text-muted:#8DA1B4; --accent-text:#FF8A5C; --accent-2:#3DDC97;
  color-scheme: dark;
}
.admin-bar{--af-adminbar:32px;}
@media(max-width:782px){ .admin-bar{--af-adminbar:46px;} }
@media(max-width:600px){ .admin-bar{--af-adminbar:0px;} }

.af-scope, .af-scope *, .af-scope *::before, .af-scope *::after{box-sizing:border-box;}
.af-scope button, .af-scope input, .af-scope select, .af-scope textarea{font-family:inherit;}
.af-scope a{color:inherit;}
.af-scope p{margin-block:0;}
.af-scope table{margin-block-end:0;}
.af-scope table td, .af-scope table th{border-inline:0;}
.af-scope ul{margin:0;}
.af-scope :focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.af-scope button:focus:not(:focus-visible){outline:none;}
@media (prefers-reduced-motion: reduce){
  .af-scope *, .af-scope *::before, .af-scope *::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

/* Builder / shared rules (scoped, with extra specificity so Elementor Kit styles can't override them) */
html body .af-scope .wrap{max-width:1180px; margin:0 auto; padding:28px 20px 80px;}
html body .af-scope .dash-header{display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:28px;}
html body .af-scope .dash-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;}
@media(max-width:900px){
html body .af-scope .dash-grid{grid-template-columns:repeat(2, 1fr);}
}
@media(max-width:600px){
html body .af-scope .dash-grid{grid-template-columns:1fr;}
}
html body .af-scope .dash-card{background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:18px;}
html body .af-scope .dash-card-top{display:flex; align-items:center; gap:10px; margin-bottom:12px;}
html body .af-scope .dash-icon{width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center;
    font-family:var(--font-display); font-weight:700; font-size:14px; flex:none;}
html body .af-scope .dash-card h3{font-size:14.5px; margin:0 0 2px;}
html body .af-scope .dash-card .dash-url{font-family:var(--font-mono); font-size:11.5px; color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
html body .af-scope .dash-meta{font-size:11.5px; color:var(--text-muted); margin:10px 0 14px;}
html body .af-scope .dash-actions{display:flex; gap:8px; flex-wrap:wrap;}
html body .af-scope .dash-actions .ghost-btn{padding:6px 10px; font-size:11.5px;}
html body .af-scope .dash-empty{border:1px dashed var(--border); border-radius:10px; padding:48px 20px; text-align:center; color:var(--text-muted);}
html body .af-scope .dash-empty p{margin:0 0 16px;}
html body .af-scope .dash-guest{border:1px solid var(--border); border-radius:10px; padding:36px 20px; text-align:center;}
html body .af-scope .dash-guest p{color:var(--text-muted); max-width:44ch; margin:8px auto 20px;}
html body .af-scope .af-scope h1,
html body .af-scope .af-scope h2,
html body .af-scope .af-scope h3{font-family:var(--font-display); font-weight:600; letter-spacing:-0.01em; margin:0; color:inherit;}
html body .af-scope .lede{color:var(--text-muted); max-width:56ch; margin:10px 0 0;}
html body .af-scope .board{display:grid; grid-template-columns:170px 320px 1fr; gap:20px; margin-top:28px; align-items:start;}
@media(max-width:980px){
html body .af-scope .board{grid-template-columns:1fr;}
}
html body .af-scope .rail{display:flex; flex-direction:column; gap:4px; position:sticky; top:calc(var(--af-header-h, 64px) + var(--af-adminbar, 0px) + 12px);}
@media(max-width:980px){
html body .af-scope .rail{flex-direction:row; overflow-x:auto; gap:8px; padding-bottom:4px; position:static;}
}
html body .af-scope .rail-step{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--radius);
    border:1px solid transparent; cursor:pointer; background:none; color:var(--text-muted); text-align:left;
    transition:background .15s, color .15s, border-color .15s;}
html body .af-scope .rail-step:hover:not(:disabled){background:var(--panel);}
html body .af-scope .rail-step.active{background:var(--panel); border-color:var(--border); color:var(--text);}
html body .af-scope .rail-num{width:22px; height:22px; border-radius:6px; display:flex; align-items:center; justify-content:center;
    font-family:var(--font-mono); font-size:12px; border:1px solid var(--border); flex:none;}
html body .af-scope .rail-step.active .rail-num{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
html body .af-scope .rail-step.done .rail-num{background:var(--accent-2); color:#06281B; border-color:var(--accent-2);}
html body .af-scope .rail-label{font-size:13.5px; white-space:nowrap;}
html body .af-scope .stage{background:var(--panel); border:1px solid var(--border); border-radius:12px;
    padding:26px 20px; display:flex; flex-direction:column; align-items:center; gap:14px;
    position:sticky; top:calc(var(--af-header-h, 64px) + var(--af-adminbar, 0px) + 12px);}
@media(max-width:980px){
html body .af-scope .stage{position:static;}
}
html body .af-scope .phone{width:224px; height:462px; border-radius:34px; background:#000; padding:10px;
    box-shadow:0 20px 45px -20px rgba(0,0,0,.5); position:relative; flex:none;}
html body .af-scope .phone-screen{width:100%; height:100%; border-radius:26px; overflow:hidden; background:#fff; position:relative;
    display:flex; flex-direction:column;}
html body .af-scope .phone-notch{position:absolute; top:0; left:50%; transform:translateX(-50%); width:110px; height:20px;
    background:#000; border-radius:0 0 14px 14px; z-index:5;}
html body .af-scope .phone-status{height:32px; display:flex; align-items:flex-end; justify-content:space-between;
    padding:0 16px 4px; font-family:var(--font-mono); font-size:10px; color:#111; flex:none;}
html body .af-scope .phone-appbar{display:flex; align-items:center; gap:8px; padding:9px 14px; flex:none;}
html body .af-scope .phone-appicon{width:24px; height:24px; border-radius:6px; display:flex; align-items:center; justify-content:center;
    font-family:var(--font-display); font-weight:700; font-size:11px; flex:none; overflow:hidden;}
html body .af-scope .phone-appicon img{width:100%; height:100%; object-fit:cover;}
html body .af-scope .phone-appname{font-family:var(--font-display); font-weight:600; font-size:13px;}
html body .af-scope .progress-bar{height:2px; background:transparent; flex:none; display:none; overflow:hidden;}
html body .af-scope .progress-bar.active{display:block;}
html body .af-scope #progressBarFill{height:100%; width:30%; background:var(--accent); animation:progressslide 0.9s ease-in-out infinite;}
@keyframes progressslide{
    0%{ transform:translateX(-100%); }
    50%{ transform:translateX(120%); }
    100%{ transform:translateX(320%); }
  }
html body .af-scope .adbar-mock{flex:none; background:#DEE3E8; color:#8A93A0; font-family:var(--font-mono); font-size:8.5px;
    text-align:center; padding:5px 0; display:none;}
html body .af-scope .phone-body{flex:1; background:#F1F3F6; padding:12px; overflow:hidden; position:relative;}
html body .af-scope #liveLayer iframe{width:100%; height:100%; border:0; background:#fff; position:relative; z-index:2;}
html body .af-scope #liveSpinner{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    background:#F1F3F6; color:#8A93A0; font-family:var(--font-mono); font-size:10px; z-index:1;}
html body .af-scope .pull-zone{position:absolute; top:0; left:0; right:0; height:38px; z-index:5;
    display:flex; align-items:flex-start; justify-content:center; padding-top:4px;
    pointer-events:none; touch-action:none;}
html body .af-scope .pull-zone.active{pointer-events:auto; cursor:grab;}
html body .af-scope .pull-icon{font-family:var(--font-mono); font-size:12px; color:#5B6672; background:rgba(255,255,255,.9);
    border-radius:50%; width:22px; height:22px; display:flex; align-items:center; justify-content:center;
    opacity:0; transition:opacity .15s; box-shadow:0 1px 4px rgba(0,0,0,.15);}
html body .af-scope .pull-icon.show{opacity:1;}
html body .af-scope .pull-icon.spin{animation:pullspin .6s linear infinite;}
@keyframes pullspin{ to { transform: rotate(360deg); } }
html body .af-scope .refresh-hint{display:flex; justify-content:center; padding:4px 0 8px; font-size:9px; color:#9AA5B1;
    font-family:var(--font-mono); align-items:center; gap:4px;}
html body .af-scope .skel{background:#E3E7EC; border-radius:5px; margin-bottom:8px;}
html body .af-scope .tabbar-mock{flex:none; display:none; border-top:1px solid #E3E7EC; background:#fff; padding:6px 2px 8px;}
html body .af-scope .tabbar-mock-item{flex:1; text-align:center; font-size:8.5px; color:#9AA5B1; font-family:var(--font-body); padding:2px 2px 0;}
html body .af-scope .phone-splash{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transition:opacity .35s; z-index:6;}
html body .af-scope .phone-splash.show{opacity:1;}
html body .af-scope .phone-splash-icon{width:60px; height:60px; border-radius:15px; display:flex; align-items:center; justify-content:center;
    font-family:var(--font-display); font-weight:700; font-size:24px; overflow:hidden;}
html body .af-scope .phone-splash-icon img{width:100%; height:100%; object-fit:cover;}
html body .af-scope .phone-url{font-family:var(--font-mono); font-size:11px; color:var(--text-muted); max-width:230px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
html body .af-scope .stage-actions{display:flex; gap:8px;}
html body .af-scope .ghost-btn{background:none; border:1px solid var(--border); color:var(--text); border-radius:6px;
    padding:7px 12px; font-size:12.5px; cursor:pointer;}
html body .af-scope .ghost-btn:hover{border-color:var(--accent);}
html body .af-scope .ghost-btn:disabled{opacity:.4; cursor:default;}
html body .af-scope .panel{background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:22px;}
html body .af-scope .panel h2{font-size:17px;}
html body .af-scope .panel .hint{color:var(--text-muted); font-size:13px; margin:6px 0 20px;}
html body .af-scope .field{margin-bottom:18px;}
html body .af-scope .field label{display:block; font-size:12.5px; color:var(--text-muted); margin-bottom:6px;}
html body .af-scope .field input[type=text],
html body .af-scope .field input[type=url],
html body .af-scope .field select{width:100%; background:var(--panel-2); border:1px solid var(--border); color:var(--text);
    border-radius:6px; padding:10px 11px; font-size:13.5px; font-family:var(--font-mono);}
html body .af-scope .field input:focus,
html body .af-scope .field select:focus{outline:2px solid var(--accent); outline-offset:1px;}
html body .af-scope .field .note{font-size:11.5px; color:var(--text-muted); margin-top:6px;}
html body .af-scope .row2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
html body .af-scope .swatches{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
html body .af-scope .swatch{width:28px; height:28px; border-radius:8px; cursor:pointer; border:2px solid transparent;}
html body .af-scope .swatch.selected{border-color:var(--text);}
html body .af-scope .colorpick{width:36px; height:28px; border-radius:8px; border:1px solid var(--border); background:none; padding:0; cursor:pointer;}
html body .af-scope .seg{display:flex; border:1px solid var(--border); border-radius:6px; overflow:hidden; width:fit-content;}
html body .af-scope .seg button{background:var(--panel-2); border:none; color:var(--text-muted); padding:8px 14px; font-size:12.5px; cursor:pointer;}
html body .af-scope .seg button.on{background:var(--accent); color:var(--accent-ink);}
html body .af-scope .toggle-row{display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
    padding:12px 0; border-top:1px solid var(--border);}
html body .af-scope .toggle-row:first-of-type{border-top:none; padding-top:0;}
html body .af-scope .toggle-copy strong{font-size:13.5px; display:block; margin-bottom:2px;}
html body .af-scope .toggle-copy span{font-size:12px; color:var(--text-muted);}
html body .af-scope .switch{position:relative; width:38px; height:22px; border-radius:11px; background:var(--panel-2);
    border:1px solid var(--border); flex:none; cursor:pointer;}
html body .af-scope .switch::after{content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%;
    background:var(--text-muted); transition:left .15s, background .15s;}
html body .af-scope .switch.on{background:rgba(255,107,53,.18); border-color:var(--accent);}
html body .af-scope .switch.on::after{left:18px; background:var(--accent);}
html body .af-scope .range-row{display:flex; align-items:center; gap:10px; margin-top:8px;}
html body .af-scope .range-row input{flex:1;}
html body .af-scope .range-row span{font-family:var(--font-mono); font-size:12px; color:var(--text-muted); width:56px; text-align:right;}
html body .af-scope .tab-row{display:flex; gap:6px; margin-bottom:8px; align-items:center;}
html body .af-scope .tab-row input{flex:1; background:var(--panel-2); border:1px solid var(--border); color:var(--text);
    border-radius:6px; padding:8px 9px; font-size:12.5px; font-family:var(--font-mono); min-width:0;}
html body .af-scope .tab-row button{background:none; border:1px solid var(--border); color:var(--text-muted); border-radius:6px;
    width:30px; height:30px; cursor:pointer; flex:none;}
html body .af-scope .tab-row button:disabled{opacity:.3; cursor:default;}
html body .af-scope .nav-btns{display:flex; justify-content:space-between; margin-top:24px;}
html body .af-scope .btn{font-family:var(--font-body); font-weight:600; font-size:13.5px; border-radius:7px; padding:11px 20px;
    cursor:pointer; border:1px solid transparent;}
html body .af-scope .btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
html body .af-scope .btn-primary:hover{filter:brightness(1.06);}
html body .af-scope .btn-primary:disabled{opacity:.45; cursor:not-allowed;}
html body .af-scope .btn-secondary{background:none; color:var(--text); border-color:var(--border);}
html body .af-scope .btn-secondary:hover{border-color:var(--text-muted);}
html body .af-scope .btn-secondary:disabled{opacity:.35; cursor:default;}
html body .af-scope .terminal{background:#0A0F16; border:1px solid var(--border); border-radius:8px; padding:16px;
    font-family:var(--font-mono); font-size:12.5px; color:#8FE6B8; min-height:190px; max-height:260px;
    overflow-y:auto; white-space:pre-wrap; line-height:1.6;}
html body .af-scope .terminal .dim{color:#5B6672;}
html body .af-scope .filetree{font-family:var(--font-mono); font-size:12.5px; color:var(--text-muted); margin:16px 0;
    border-top:1px solid var(--border); padding-top:14px;}
html body .af-scope .filetree div{padding:2px 0;}
html body .af-scope .summary-table{width:100%; border-collapse:collapse; margin:16px 0; font-size:12.5px;}
html body .af-scope .summary-table td{padding:6px 0; border-top:1px solid var(--border); vertical-align:top;}
html body .af-scope .summary-table td:first-child{color:var(--text-muted); width:38%;}
html body .af-scope .foot-note{color:var(--text-muted); font-size:12px; margin-top:16px; line-height:1.6;}
html body .af-scope code.inline{font-family:var(--font-mono); background:var(--panel-2); padding:1px 5px; border-radius:4px; font-size:12px;}