/* ══════════════════════════════════════════════════════════
   Transit Signs MC — Admin Panel CSS
   Extras din admin.php pentru cache-uire si mentenanta.
   ══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════
   RESET & ROOT
═══════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg-page:   #0a0a0a;
  --bg-sidebar:#0f0f0f;
  --bg-card:   #141414;
  --bg-card2:  #1a1a1a;
  --bg-input:  rgba(255,255,255,.05);
  --bg-input-f:rgba(255,255,255,.09);
  --bg-hover:  rgba(255,255,255,.04);
  --bg-active: rgba(255,99,25,.1);
  --border:    rgba(255,255,255,.07);
  --border-md: rgba(255,255,255,.12);
  --border-lg: rgba(255,255,255,.18);
  --txt:       #f0f0f0;
  --txt2:      #8a8a8a;
  --txt3:      #555;
  --accent:    #FF6319;
  --accent-h:  #ff7a40;
  --green:     #1BD96A;
  --blue:      #3b82f6;
  --red:       #ef4444;
  --yellow:    #f59e0b;
  --radius:    8px;
  --radius-lg: 12px;
  --sidebar-w: 240px;
  --header-h:  60px;
}
[data-theme="light"]{
  --bg-page:   #f1f0ed;
  --bg-sidebar:#ffffff;
  --bg-card:   #ffffff;
  --bg-card2:  #f7f6f3;
  --bg-input:  rgba(0,0,0,.04);
  --bg-input-f:rgba(0,0,0,.07);
  --bg-hover:  rgba(0,0,0,.04);
  --bg-active: rgba(255,99,25,.08);
  --border:    rgba(0,0,0,.07);
  --border-md: rgba(0,0,0,.11);
  --border-lg: rgba(0,0,0,.16);
  --txt:       #111;
  --txt2:      #666;
  --txt3:      #aaa;
}
html,body{height:100%;font-family:'Inter',sans-serif;background:var(--bg-page);color:var(--txt);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}

/* ═══════════════════════════════════════
   AUTH SCREENS
═══════════════════════════════════════ */
#authWrap{
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;padding:1rem;
  background:var(--bg-page);
}
.auth-card{
  width:100%;max-width:400px;
  background:var(--bg-card);
  border:1px solid var(--border-md);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:0 40px 80px rgba(0,0,0,.5);
}
.auth-header{
  padding:2rem 2.2rem 1.2rem;
  border-bottom:1px solid var(--border);
}
.auth-brand{
  display:flex;align-items:center;gap:.65rem;margin-bottom:1.5rem;
}
.auth-brand-dot{
  width:10px;height:10px;border-radius:50%;background:var(--accent);
  animation:pulse 2s infinite;
}
.auth-brand-name{
  font-family:'Bebas Neue',sans-serif;
  font-size:1.15rem;letter-spacing:3px;color:var(--txt);
}
.auth-title{font-size:1.35rem;font-weight:600;color:var(--txt);margin-bottom:.3rem}
.auth-subtitle{font-size:.8rem;color:var(--txt2)}
.auth-body{padding:1.8rem 2.2rem}
.field{margin-bottom:1.1rem}
.field-label{
  display:block;font-size:.72rem;font-weight:500;letter-spacing:.04em;
  text-transform:uppercase;color:var(--txt2);margin-bottom:.45rem;
}
.field-input{
  width:100%;padding:.65rem .9rem;
  background:var(--bg-input);border:1px solid var(--border-md);
  border-radius:var(--radius);color:var(--txt);font-family:'Inter',sans-serif;
  font-size:.9rem;outline:none;transition:border-color .2s,background .2s;
}
.field-input:focus{border-color:var(--accent);background:var(--bg-input-f)}
.field-input::placeholder{color:var(--txt3)}
.field-hint{font-size:.72rem;color:var(--txt3);margin-top:.3rem}
.pw-strength{height:3px;border-radius:2px;background:var(--border);overflow:hidden;margin-top:5px}
.pw-bar{height:100%;width:0;border-radius:2px;transition:width .3s,background .3s}
.auth-btn{
  width:100%;padding:.75rem;margin-top:.5rem;
  background:var(--accent);color:#fff;border:none;
  border-radius:var(--radius);font-family:'Inter',sans-serif;
  font-size:.92rem;font-weight:600;cursor:pointer;
  transition:background .2s,transform .1s;
}
.auth-btn:hover{background:var(--accent-h)}
.auth-btn:active{transform:scale(.98)}
.auth-error{
  font-size:.78rem;color:var(--red);
  background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2);
  border-radius:var(--radius);padding:.55rem .8rem;margin-top:.8rem;
  display:none;
}
.auth-error.show{display:block}
.auth-footer{
  padding:.9rem 2.2rem;border-top:1px solid var(--border);
  display:flex;align-items:center;gap:.5rem;
  font-size:.72rem;color:var(--txt3);
}
.auth-footer-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 2s infinite}

/* ═══════════════════════════════════════
   DASHBOARD LAYOUT
═══════════════════════════════════════ */
#appWrap{display:none;height:100vh;flex-direction:row}
#appWrap.ready{display:flex}

/* Sidebar */
.sidebar{
  width:var(--sidebar-w);flex-shrink:0;
  background:var(--bg-sidebar);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  height:100vh;position:sticky;top:0;overflow-y:auto;
}
.sidebar-brand{
  display:flex;align-items:center;gap:.65rem;
  padding:1.2rem 1.4rem;border-bottom:1px solid var(--border);
}
.sidebar-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);animation:pulse 2s infinite;flex-shrink:0}
.sidebar-title{font-family:'Bebas Neue',sans-serif;font-size:1rem;letter-spacing:3px;color:var(--txt);white-space:nowrap}
.sidebar-badge{
  margin-left:auto;background:var(--bg-active);color:var(--accent);
  font-size:.6rem;font-weight:600;letter-spacing:1px;
  padding:.15rem .45rem;border-radius:4px;border:1px solid rgba(255,99,25,.2);
  white-space:nowrap;
}
/* Nav groups */
.nav-group{padding:.75rem 0}
.nav-group+.nav-group{border-top:1px solid var(--border)}
.nav-group-label{
  font-size:.65rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--txt3);padding:.25rem 1.4rem .4rem;
}
.nav-item{
  display:flex;align-items:center;gap:.75rem;
  padding:.6rem 1.4rem;cursor:pointer;
  font-size:.85rem;font-weight:400;color:var(--txt2);
  border-left:2px solid transparent;
  transition:all .15s;user-select:none;
  text-decoration:none;
}
.nav-item:hover{background:var(--bg-hover);color:var(--txt)}
.nav-item.active{
  background:var(--bg-active);color:var(--accent);
  border-left-color:var(--accent);font-weight:500;
}
.nav-icon{
  width:18px;height:18px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;opacity:.7;
}
.nav-item.active .nav-icon{opacity:1}

/* Sidebar user panel at bottom */
.sidebar-user{
  margin-top:auto;padding:1rem 1.4rem;
  border-top:1px solid var(--border);
}
.user-row{display:flex;align-items:center;gap:.75rem}
.user-avatar{
  width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),#c84e11);
  display:flex;align-items:center;justify-content:center;
  font-size:.85rem;font-weight:700;color:#fff;flex-shrink:0;
}
.user-info{flex:1;min-width:0}
.user-name{font-size:.82rem;font-weight:500;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-role{font-size:.68rem;color:var(--txt3)}
.user-logout{
  background:none;border:none;cursor:pointer;
  color:var(--txt3);font-size:16px;padding:.2rem;
  transition:color .2s;flex-shrink:0;
}
.user-logout:hover{color:var(--red)}

/* Main area */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden}

/* Top header */
.topbar{
  height:var(--header-h);flex-shrink:0;
  background:var(--bg-sidebar);border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 2rem;gap:1rem;
}
.topbar-left{display:flex;align-items:center;gap:.75rem}
.topbar-section{font-size:.75rem;font-weight:500;color:var(--txt3);letter-spacing:.03em}
.topbar-title{font-size:1.05rem;font-weight:600;color:var(--txt)}
.topbar-right{display:flex;align-items:center;gap:.75rem}
.topbar-btn{
  display:flex;align-items:center;gap:.4rem;
  padding:.45rem .85rem;border-radius:var(--radius);border:1px solid var(--border-md);
  background:none;cursor:pointer;color:var(--txt2);font-size:.78rem;font-weight:500;
  font-family:'Inter',sans-serif;transition:all .15s;
}
.topbar-btn:hover{background:var(--bg-hover);color:var(--txt);border-color:var(--border-lg)}
.btn-save-main{
  background:var(--accent);color:#fff;border-color:var(--accent);
  font-weight:600;
}
.btn-save-main:hover{background:var(--accent-h);border-color:var(--accent-h);color:#fff}
.save-indicator{
  display:flex;align-items:center;gap:.4rem;
  font-size:.75rem;color:var(--green);opacity:0;transition:opacity .4s;
}
.save-indicator.show{opacity:1}
.topbar-back{
  font-size:.78rem;color:var(--txt3);text-decoration:none;
  display:flex;align-items:center;gap:.35rem;
  padding:.4rem .7rem;border-radius:var(--radius);border:1px solid var(--border);
  transition:all .15s;
}
.topbar-back:hover{color:var(--txt);border-color:var(--border-md);background:var(--bg-hover)}

/* Content area */
.content{flex:1;overflow-y:auto;padding:2rem}

/* Panels */
.section-pane{display:none}
.section-pane.active{display:block}

/* Page header */
.page-head{margin-bottom:2rem}
.page-head h1{font-size:1.5rem;font-weight:700;color:var(--txt);margin-bottom:.3rem}
.page-head p{font-size:.82rem;color:var(--txt2)}

/* Grid layouts */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem}


/* Profil & Securitate: 2FA/IP alignment */
.security-extra-grid{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:1.5rem;
  align-items:stretch;
  margin-top:1.5rem;
}
.security-extra-grid .card{height:100%;margin-bottom:0}
.security-extra-grid .card-header{min-height:64px}
.security-extra-grid .card-body{height:calc(100% - 64px)}
.security-session-history{font-size:.73rem;min-height:128px}
.security-empty-state{padding:.75rem 0;color:var(--txt3)}


/* UTM Generator — polished dark-mode layout */
.utm-builder-card{
  margin-top:1.5rem;
  border-color:rgba(255,99,25,.22);
  background:linear-gradient(180deg,rgba(255,99,25,.045),rgba(255,255,255,.015)),var(--bg-card);
}
.utm-builder-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.utm-builder-title{display:flex;align-items:center;gap:.7rem}
.utm-builder-icon{
  width:36px;height:36px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,99,25,.12);border:1px solid rgba(255,99,25,.28);color:#FF6319;
  box-shadow:0 0 22px rgba(255,99,25,.08);
}
.utm-builder-kicker{font-size:.58rem;text-transform:uppercase;letter-spacing:.16em;color:var(--txt3);margin-bottom:.15rem}
.utm-builder-sub{font-size:.74rem;color:var(--txt3);margin-top:.18rem;font-weight:400}
.utm-builder-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr);gap:1.1rem;align-items:start}
.utm-panel{
  background:rgba(255,255,255,.025);border:1px solid var(--border);border-radius:14px;padding:1rem;
}
.utm-panel-title{display:flex;align-items:center;gap:.45rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--txt2);margin-bottom:.85rem}
.utm-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.utm-field-full{grid-column:1/-1}
.utm-chip-row{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:.45rem}
.utm-chip{
  border:1px solid var(--border-md);background:rgba(255,255,255,.035);color:var(--txt2);
  border-radius:999px;padding:.35rem .62rem;font-size:.68rem;cursor:pointer;transition:all .15s;
}
.utm-chip:hover{border-color:#FF6319;color:#FF6319;background:rgba(255,99,25,.08)}
.utm-result-box{
  position:relative;background:rgba(0,0,0,.24);border:1px solid rgba(255,99,25,.22);
  border-radius:12px;padding:.85rem;margin-bottom:.85rem;
}
.utm-result-label{font-size:.58rem;text-transform:uppercase;letter-spacing:.14em;color:#FF6319;margin-bottom:.45rem}
.utm-result-input{
  width:100%;min-height:86px;resize:vertical;background:transparent;border:none;outline:none;color:var(--txt);
  font-family:'JetBrains Mono','Share Tech Mono',monospace;font-size:.76rem;line-height:1.5;word-break:break-all;
}
.utm-actions{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:.7rem}
.utm-actions .topbar-btn{width:100%;justify-content:center}
.utm-help-list{display:grid;gap:.5rem;margin-top:.8rem}
.utm-help-item{display:flex;gap:.55rem;align-items:flex-start;font-size:.72rem;color:var(--txt3);line-height:1.45}
.utm-help-item strong{color:var(--txt2);font-weight:600}
.utm-mini-dot{width:7px;height:7px;border-radius:50%;background:#FF6319;box-shadow:0 0 12px rgba(255,99,25,.55);flex:0 0 auto;margin-top:.35rem}
[data-theme="light"] .utm-builder-card{background:linear-gradient(180deg,rgba(255,99,25,.075),rgba(0,0,0,.01)),var(--bg-card)}
[data-theme="light"] .utm-panel{background:rgba(0,0,0,.025)}
[data-theme="light"] .utm-result-box{background:rgba(255,255,255,.75)}
@media(max-width:980px){.utm-builder-grid{grid-template-columns:1fr}.utm-field-grid{grid-template-columns:1fr}.utm-field-full{grid-column:auto}}
@media(max-width:560px){.utm-actions{grid-template-columns:1fr}.utm-builder-head{gap:.65rem}.utm-builder-icon{width:32px;height:32px}.utm-panel{padding:.85rem}}

/* Cards */
.card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-lg);overflow:hidden;margin-bottom:1.5rem;
}
.card-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.4rem;border-bottom:1px solid var(--border);
}
.card-title{
  display:flex;align-items:center;gap:.6rem;
  font-size:.85rem;font-weight:600;color:var(--txt);
}
.card-icon{font-size:1rem;opacity:.7}
.card-desc{font-size:.72rem;color:var(--txt3);margin-top:.15rem}
.card-body{padding:1.4rem}
.card-body + .card-body{border-top:1px solid var(--border);padding-top:1.4rem}

/* Fields inside cards */
.f-label{
  display:block;font-size:.72rem;font-weight:500;letter-spacing:.04em;
  text-transform:uppercase;color:var(--txt2);margin-bottom:.4rem;
}
.f-input{
  width:100%;padding:.6rem .85rem;
  background:var(--bg-input);border:1px solid var(--border-md);
  border-radius:var(--radius);color:var(--txt);
  font-family:'Inter',sans-serif;font-size:.85rem;
  outline:none;transition:border-color .2s,background .2s;
}
.f-input:focus{border-color:var(--accent);background:var(--bg-input-f)}
.f-input::placeholder{color:var(--txt3)}
.f-textarea{resize:vertical;min-height:110px;line-height:1.65}
.f-hint{font-size:.7rem;color:var(--txt3);margin-top:.3rem;line-height:1.5}
.f-hint code{color:var(--accent);font-family:'Share Tech Mono',monospace}
.f-row{display:flex;align-items:flex-start;gap:1rem}
.f-group{flex:1;margin-bottom:1rem}
.f-group:last-child{margin-bottom:0}

/* Inline icon label */
.f-with-icon{display:flex;align-items:center;gap:.4rem;margin-bottom:.4rem}
.f-with-icon svg{flex-shrink:0}
.f-label-inline{font-size:.72rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--txt2)}

/* Status badge */
.status-badge{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.25rem .65rem;border-radius:20px;
  font-size:.7rem;font-weight:500;
}
.status-set{background:rgba(27,217,106,.1);color:var(--green);border:1px solid rgba(27,217,106,.2)}
.status-unset{background:rgba(255,255,255,.05);color:var(--txt3);border:1px solid var(--border)}
.status-dot{width:5px;height:5px;border-radius:50%;background:currentColor}

/* Platform rows */
.platform-block{
  border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:1.2rem;
}
.platform-block:last-child{margin-bottom:0}
.platform-head{
  display:flex;align-items:center;gap:.7rem;padding:.75rem 1.1rem;
  border-bottom:1px solid var(--border);
}
.platform-head-mr{background:rgba(27,217,106,.06)}
.platform-head-cf{background:rgba(241,100,54,.06)}
.platform-name{font-size:.85rem;font-weight:600;letter-spacing:.03em}
.platform-mr .platform-name{color:#1BD96A}
.platform-cf .platform-name{color:#F16436}
.platform-body{padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.75rem}
.mod-input-row{display:flex;align-items:center;gap:.75rem}
.mod-pill{
  width:36px;height:36px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:.6rem;font-weight:800;flex-shrink:0;
  letter-spacing:.02em;
}
.pill-nyc{background:#EE352E;color:#fff}
.pill-dc{background:#009CDE;color:#fff}
.pill-chi{background:#C60C30;color:#fff}
.pill-bos{background:#DA291C;color:#fff}
.pill-sf{background:#0099CD;color:#fff}
.pill-atl{background:#4B9CD3;color:#fff}
.pill-la{background:#DA291C;color:#fff}
.pill-mia{background:#F5A800;color:#111}
.pill-phl{background:#0032A0;color:#fff}

/* Version rows */
.ver-row{
  display:grid;grid-template-columns:36px 90px 110px 1fr;
  align-items:center;gap:.75rem;padding:.6rem 0;
  border-bottom:1px solid var(--border);
}
.ver-row:last-child{border-bottom:none}

/* Changelog textarea with preview */
.clog-block{margin-bottom:1.2rem}
.clog-block:last-child{margin-bottom:0}
.clog-mod-header{
  display:flex;align-items:center;gap:.6rem;
  margin-bottom:.6rem;font-size:.8rem;font-weight:600;color:var(--txt);
}

/* ── Image Upload UI ── */
.img-field-wrap{display:flex;flex-direction:column;gap:.5rem}
.img-input-row{display:flex;gap:.5rem;align-items:center}
.img-input-row .f-input{flex:1;min-width:0}
.upload-btn{
  display:flex;align-items:center;gap:.4rem;flex-shrink:0;
  padding:.58rem .85rem;background:var(--bg-input);
  border:1px solid var(--border-md);border-radius:var(--radius);
  color:var(--txt2);font-size:.78rem;font-weight:500;cursor:pointer;
  transition:all .15s;white-space:nowrap;font-family:'Inter',sans-serif;
}
.upload-btn:hover{background:var(--bg-hover);border-color:var(--border-lg);color:var(--txt)}
.upload-btn svg{flex-shrink:0;opacity:.7}
.upload-btn:hover svg{opacity:1}
.upload-btn.uploading{opacity:.6;pointer-events:none}
.img-preview-strip{
  display:none;align-items:center;gap:.75rem;
  padding:.6rem .8rem;background:var(--bg-card2);
  border:1px solid var(--border);border-radius:var(--radius);
}
.img-preview-strip.show{display:flex}
.img-preview-thumb{
  width:48px;height:48px;object-fit:cover;
  border-radius:4px;border:1px solid var(--border-md);flex-shrink:0;
}
.img-preview-thumb-ico{
  width:48px;height:48px;border-radius:4px;border:1px solid var(--border-md);
  background:var(--bg-card);display:flex;align-items:center;
  justify-content:center;flex-shrink:0;font-size:1.4rem;
}
.img-preview-info{flex:1;min-width:0}
.img-preview-name{font-size:.78rem;font-weight:500;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.img-preview-meta{font-size:.68rem;color:var(--txt3);margin-top:.15rem}
.img-remove-btn{
  background:none;border:none;cursor:pointer;
  color:var(--txt3);font-size:.85rem;padding:.2rem .35rem;
  border-radius:4px;transition:all .15s;flex-shrink:0;
}
.img-remove-btn:hover{background:rgba(239,68,68,.1);color:var(--red)}
.upload-progress{
  height:2px;background:var(--border);border-radius:2px;overflow:hidden;
  display:none;margin-top:.3rem;
}
.upload-progress.show{display:block}
.upload-progress-bar{height:100%;background:var(--accent);width:0;border-radius:2px;transition:width .3s}
.upload-err{font-size:.72rem;color:var(--red);margin-top:.3rem;display:none}
.upload-err.show{display:block}

/* Screenshot preview */
.ss-preview{
  width:100%;height:150px;object-fit:cover;
  border-radius:var(--radius);border:1px solid var(--border);
  display:block;margin-top:.6rem;
}
.ss-ph{
  width:100%;height:100px;
  border:1px dashed var(--border-lg);border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  color:var(--txt3);font-size:.75rem;margin-top:.6rem;
}

/* Account info row */
.account-info{
  display:flex;align-items:center;gap:1rem;
  padding:1rem;background:var(--bg-card2);border-radius:var(--radius);
  margin-bottom:1.2rem;
}
.account-av{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),#c84e11);
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;font-weight:700;color:#fff;
}
.account-name{font-size:.95rem;font-weight:600;color:var(--txt)}
.account-email{font-size:.78rem;color:var(--txt2)}
.account-role{
  margin-left:auto;background:var(--bg-active);color:var(--accent);
  font-size:.68rem;font-weight:600;padding:.2rem .55rem;
  border-radius:4px;border:1px solid rgba(255,99,25,.2);
}

/* Stat cards on dashboard */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin-bottom:1.5rem}
.stat-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:1.2rem 1.4rem;
}
.stat-val{font-size:1.8rem;font-weight:700;color:var(--txt);line-height:1;margin-bottom:.3rem}
.stat-lbl{font-size:.72rem;color:var(--txt2);text-transform:uppercase;letter-spacing:.05em}
.stat-sub{font-size:.68rem;color:var(--txt3);margin-top:.4rem}
.stat-green .stat-val{color:var(--green)}
.stat-orange .stat-val{color:var(--accent)}
.stat-blue .stat-val{color:var(--blue)}

/* Quick links */
.quick-links{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:1.5rem}
.quick-link{
  display:flex;align-items:center;gap:.5rem;
  padding:.55rem 1rem;background:var(--bg-card);
  border:1px solid var(--border);border-radius:var(--radius);
  font-size:.8rem;color:var(--txt2);text-decoration:none;
  transition:all .15s;
}
.quick-link:hover{border-color:var(--accent);color:var(--accent);background:var(--bg-active)}

/* Alert / notice */
.notice{
  display:flex;align-items:flex-start;gap:.75rem;
  padding:.9rem 1.1rem;border-radius:var(--radius);
  font-size:.8rem;line-height:1.55;margin-bottom:1.2rem;
}
.notice-info{background:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.2);color:#93c5fd}
.notice-warn{background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.2);color:#fcd34d}
.notice-icon{font-size:1rem;flex-shrink:0;margin-top:.05rem}
.pass-err-msg{font-size:.75rem;color:var(--red);margin-top:.4rem;display:none}
.pass-err-msg.show{display:block}

.trusted-login-options{display:flex;align-items:center;gap:.55rem;margin:.35rem 0 1rem;color:var(--txt2);font-size:.78rem;line-height:1.4;user-select:none}
.trusted-login-options input{width:16px;height:16px;accent-color:var(--accent)}
.device-list{display:flex;flex-direction:column;gap:.65rem}
.device-row{display:grid;grid-template-columns:1fr auto;gap:.8rem;align-items:center;border:1px solid var(--border);background:var(--bg-card);border-radius:10px;padding:.85rem .95rem}
.device-main{min-width:0}.device-title{display:flex;gap:.45rem;align-items:center;flex-wrap:wrap;font-size:.86rem;font-weight:700;color:var(--txt);margin-bottom:.25rem}.device-meta{font-size:.7rem;color:var(--txt3);line-height:1.5}.device-badge{font-size:.62rem;border:1px solid rgba(34,197,94,.28);background:rgba(34,197,94,.12);color:var(--green);border-radius:999px;padding:.12rem .45rem;text-transform:uppercase;letter-spacing:.04em}.device-actions{display:flex;gap:.45rem;align-items:center}.device-empty{padding:1rem;border:1px dashed var(--border2);border-radius:10px;background:var(--bg-card);color:var(--txt3);font-size:.78rem;text-align:center}
@media(max-width:760px){.device-row{grid-template-columns:1fr}.device-actions .topbar-btn{width:100%;justify-content:center}.trusted-login-options{font-size:.74rem}}


/* ── Font selector ── */
.font-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.5rem;margin-top:.5rem}
.font-card{
  border:1px solid var(--border-md);border-radius:var(--radius);
  padding:.7rem .9rem;cursor:pointer;transition:all .15s;
  background:var(--bg-input);
}
.font-card:hover{border-color:var(--border-lg);background:var(--bg-hover)}
.font-card.selected{border-color:var(--accent);background:var(--bg-active)}
.font-card input[type="radio"]{display:none}
.font-preview{font-size:1.1rem;line-height:1.2;color:var(--txt);margin-bottom:.3rem}
.font-name{font-size:.65rem;color:var(--txt3);font-family:'Inter',sans-serif;letter-spacing:.02em}
.font-tag{font-size:.58rem;padding:.1rem .4rem;border-radius:3px;background:rgba(255,99,25,.12);color:var(--accent);margin-left:.3rem;font-family:'Inter',sans-serif}

/* Divider */
.divider{height:1px;background:var(--border);margin:1.5rem 0}

/* Mobile sidebar toggle */
.mob-menu-btn{display:none;background:none;border:none;cursor:pointer;color:var(--txt2);font-size:1.1rem;padding:.3rem}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:99}

/* Animations */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
.section-pane.active{animation:fadeIn .25s ease}

/* ── RESPONSIVE ── */
@media(max-width:860px){
  .grid-2{grid-template-columns:1fr}
  .security-extra-grid{grid-template-columns:1fr}
  .ver-row{grid-template-columns:36px 1fr;row-gap:.4rem}
  .ver-row .f-input:nth-child(3),.ver-row .f-input:nth-child(4){grid-column:2}
  .mob-menu-btn{display:flex}
  .sidebar{position:fixed;left:-100%;top:0;z-index:100;height:100vh;transition:left .3s;width:260px}
  .sidebar.open{left:0}
  .sidebar-overlay.open{display:block}
  .topbar{padding:0 1.2rem}
  .content{padding:1.2rem}
  /* Hide secondary buttons on mobile - show via dropdown */
  .topbar-btn-secondary{display:none !important}
  .topbar-more-btn{display:flex !important}
}
@media(max-width:500px){
  .grid-3{grid-template-columns:1fr}
  .f-row{flex-direction:column;gap:.75rem}
  .stat-grid{grid-template-columns:1fr 1fr}
  .btn-save-main{padding:.42rem .7rem;font-size:.72rem}
}
/* More menu dropdown */
.topbar-more-btn{
  display:none;position:relative;
  background:var(--bg-card2);border:1px solid var(--border2);
  color:var(--txt2);border-radius:5px;cursor:pointer;
  padding:.42rem .6rem;font-size:.8rem;line-height:1;
}
.topbar-more-menu{
  position:absolute;top:calc(100% + 6px);right:0;z-index:500;
  background:var(--bg-sidebar);border:1px solid var(--border2);
  border-radius:8px;padding:.4rem;min-width:160px;
  box-shadow:0 8px 24px rgba(0,0,0,.3);display:none;flex-direction:column;gap:.25rem;
}
.topbar-more-menu.open{display:flex}
.topbar-more-item{
  display:flex;align-items:center;gap:.6rem;padding:.5rem .75rem;
  border-radius:5px;cursor:pointer;font-size:.78rem;color:var(--txt2);
  background:none;border:none;text-align:left;width:100%;
  text-decoration:none;
}
.topbar-more-item:hover{background:var(--bg-hover);color:var(--txt)}

/* File Manager layout fix */
.fm-table-wrap{width:100%;overflow-x:auto;padding-bottom:.2rem}
.fm-table{min-width:980px;display:grid;grid-template-columns:minmax(360px,1.8fr) 95px 140px minmax(360px,auto);gap:.35rem .75rem;align-items:center;font-size:.75rem}
.fm-head{color:var(--txt3);font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:.66rem}
.fm-name{color:var(--txt);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:.18rem 0}
.fm-size,.fm-date{color:var(--txt3);white-space:nowrap}
.fm-actions{display:flex;gap:.35rem;align-items:center;justify-content:flex-start;flex-wrap:nowrap;white-space:nowrap}
.fm-actions .topbar-btn{min-height:30px;padding:.34rem .62rem}



/* iPhone / iPad Pull to Refresh for Admin Panel */
.ios-pull-refresh{
  position:fixed;
  top:calc(env(safe-area-inset-top,0px) + 10px);
  left:50%;
  z-index:12000;
  display:flex;
  align-items:center;
  gap:.55rem;
  min-width:210px;
  justify-content:center;
  padding:.62rem .95rem;
  border-radius:999px;
  border:1px solid var(--border-md);
  background:rgba(20,20,20,.94);
  color:var(--txt2);
  box-shadow:0 18px 45px rgba(0,0,0,.35);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  font-size:.74rem;
  font-weight:600;
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,-72px) scale(.96);
  transition:opacity .18s ease,transform .18s ease,color .18s ease,border-color .18s ease;
}
.ios-pull-refresh.visible{opacity:1;transform:translate(-50%,0) scale(1)}
.ios-pull-refresh.ready{color:#fff;border-color:var(--accent);background:rgba(255,99,25,.95)}
.ios-pull-refresh.refreshing{color:#fff;border-color:var(--accent);background:rgba(20,20,20,.96)}
.ios-pr-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;font-size:.95rem;line-height:1;transition:transform .18s ease}
.ios-pull-refresh.ready .ios-pr-icon{transform:rotate(180deg)}
.ios-pull-refresh.refreshing .ios-pr-icon{animation:iosPrSpin .8s linear infinite}
@keyframes iosPrSpin{to{transform:rotate(360deg)}}
[data-theme="light"] .ios-pull-refresh{background:rgba(255,255,255,.94);box-shadow:0 18px 45px rgba(0,0,0,.16)}



/* ═══════════════════════════════════════
   iPhone / PWA Admin Optimization
   - safe-area notch support
   - 44px touch targets
   - 16px inputs to prevent iOS zoom
   - better mobile scrolling and tables
═══════════════════════════════════════ */
html{height:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-height:100%;overscroll-behavior-y:none;touch-action:manipulation}
button,a,.nav-item,.topbar-btn,.topbar-more-item,.auth-btn{touch-action:manipulation;-webkit-tap-highlight-color:rgba(255,99,25,.18)}
.content{-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scroll-padding-bottom:calc(5rem + env(safe-area-inset-bottom,0px))}
.sidebar{-webkit-overflow-scrolling:touch}
.f-input,.field-input,select,textarea,input{font-size:16px;min-height:42px}
textarea.f-input,.f-textarea{min-height:118px}
.topbar-btn,.topbar-back,.topbar-more-item,.nav-item,.user-logout,.mob-menu-btn{min-height:44px}
.mob-menu-btn{min-width:44px;align-items:center;justify-content:center}

@supports (height:100dvh){
  #appWrap{height:100dvh}
  .sidebar{height:100dvh}
}

@media(max-width:860px){
  #authWrap{min-height:100dvh;padding:calc(1rem + env(safe-area-inset-top,0px)) max(1rem,env(safe-area-inset-right,0px)) calc(1rem + env(safe-area-inset-bottom,0px)) max(1rem,env(safe-area-inset-left,0px))}
  .auth-card{max-width:430px;border-radius:16px}
  .auth-header{padding:1.55rem 1.25rem 1rem}
  .auth-body{padding:1.25rem}

  #appWrap.ready{height:100dvh;overflow:hidden}
  .sidebar{
    width:min(86vw,310px);
    height:100dvh;
    padding-top:env(safe-area-inset-top,0px);
    padding-bottom:env(safe-area-inset-bottom,0px);
    box-shadow:28px 0 70px rgba(0,0,0,.42);
  }
  .sidebar-brand{padding:1rem 1.05rem}
  .sidebar-title{max-width:150px;overflow:hidden;text-overflow:ellipsis}
  .nav-group{padding:.55rem 0}
  .nav-group-label{padding:.2rem 1.05rem .35rem;font-size:.62rem}
  .nav-item{padding:.72rem 1.05rem;font-size:.9rem;border-left-width:3px}
  .nav-icon{width:22px;height:22px;font-size:17px}
  .sidebar-user{padding:.9rem 1.05rem}

  .main{min-width:0;height:100dvh}
  .topbar{
    min-height:calc(var(--header-h) + env(safe-area-inset-top,0px));
    height:auto;
    padding:env(safe-area-inset-top,0px) max(1rem,env(safe-area-inset-right,0px)) 0 max(1rem,env(safe-area-inset-left,0px));
    gap:.55rem;
  }
  .topbar-left{min-width:0;gap:.45rem;flex:1}
  .topbar-section{max-width:42vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.76rem}
  .topbar-right{gap:.45rem;flex-shrink:0}
  #sessionCountdown{display:none!important}
  .save-indicator{display:none!important}
  .btn-save-main{min-width:46px;padding:.48rem .72rem;border-radius:10px;box-shadow:0 8px 24px rgba(255,99,25,.24)}
  .topbar-more-btn{min-width:44px;min-height:44px;border-color:var(--border-md)}
  .topbar-more-menu{right:max(0px,env(safe-area-inset-right,0px));min-width:210px;border-radius:12px;padding:.45rem;box-shadow:0 22px 60px rgba(0,0,0,.48)}
  .topbar-more-item{font-size:.86rem;padding:.72rem .85rem}

  .content{
    padding:1rem max(1rem,env(safe-area-inset-right,0px)) calc(5.5rem + env(safe-area-inset-bottom,0px)) max(1rem,env(safe-area-inset-left,0px));
    overflow-x:hidden;
  }
  .page-head{margin-bottom:1.15rem}
  .page-head h1{font-size:1.22rem;line-height:1.25}
  .page-head p{font-size:.8rem}
  .card{border-radius:14px;margin-bottom:1rem}
  .card-header{padding:.9rem 1rem;align-items:flex-start;gap:.75rem}
  .card-title{font-size:.9rem;line-height:1.25}
  .card-desc{font-size:.72rem;line-height:1.35}
  .card-body{padding:1rem}
  .f-group{margin-bottom:.95rem}
  .f-row{flex-direction:column;gap:.85rem}
  .field-label,.f-label{font-size:.7rem;letter-spacing:.06em}
  .quick-links{gap:.55rem}
  .quick-link{min-height:44px;flex:1 1 100%;justify-content:center}

  .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
  .stat-card{padding:1rem .85rem;border-radius:14px;min-width:0}
  .stat-val{font-size:1.35rem;line-height:1.05;overflow:hidden;text-overflow:ellipsis}
  .stat-lbl{font-size:.68rem;line-height:1.25}
  .stat-sub{font-size:.62rem;line-height:1.25}

  .font-grid{grid-template-columns:1fr 1fr}
  .img-input-row{flex-direction:column;align-items:stretch}
  .img-input-row .topbar-btn{justify-content:center;width:100%}

  .fm-table-wrap{margin:0 -1rem;padding:0 1rem .65rem;scrollbar-width:thin}
  .fm-table{min-width:820px;grid-template-columns:minmax(280px,1.6fr) 85px 118px minmax(300px,auto);font-size:.78rem}
  .fm-actions .topbar-btn{min-height:36px;padding:.4rem .58rem}

  .preview-modal{padding-bottom:env(safe-area-inset-bottom,0px)}
  .preview-bar{padding:calc(.7rem + env(safe-area-inset-top,0px)) max(.9rem,env(safe-area-inset-right,0px)) .7rem max(.9rem,env(safe-area-inset-left,0px))}
}

@media(max-width:500px){
  .stat-grid{grid-template-columns:1fr 1fr}
  .grid-2,.grid-3,.security-extra-grid,.utm-builder-grid,.utm-field-grid{grid-template-columns:1fr!important}
  .font-grid{grid-template-columns:1fr}
  .card-header{flex-direction:column}
  .card-header .topbar-btn,.card-header button{width:100%;justify-content:center}
  .topbar-section{max-width:36vw}
  .btn-save-main{font-size:0;gap:0}
  .btn-save-main::before{content:'💾';font-size:1rem}
  .topbar-more-btn{font-size:1.05rem}
}


/* ════ PATCH: Text scale repair + mobile Coming Soon cards ════ */
/* Restore desktop typography affected by iOS input zoom workaround */
@media(min-width:861px){
  .f-input,select.f-input{font-size:.85rem;min-height:auto}
  textarea.f-input,.f-textarea{font-size:.85rem;min-height:110px}
  .field-input{font-size:.9rem;min-height:auto}
  input:not(.field-input):not(.f-input),select:not(.f-input),textarea:not(.f-input){font-size:inherit}
}

/* Coming Soon rows: cleaner desktop and iPhone layout */
.cs-list{display:flex;flex-direction:column;gap:.75rem}
.cs-row{
  display:grid;
  grid-template-columns:minmax(230px,1fr) minmax(230px,300px) auto;
  align-items:center;
  gap:1rem;
  padding:1rem 1.05rem;
  border:1px solid var(--border);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.026),rgba(255,255,255,.012));
}
.cs-row.is-coming{
  border-color:rgba(245,158,11,.24);
  background:linear-gradient(180deg,rgba(245,158,11,.078),rgba(245,158,11,.025));
}
.cs-row.is-expired{
  border-color:rgba(27,217,106,.24);
  background:linear-gradient(180deg,rgba(27,217,106,.07),rgba(27,217,106,.02));
}
.cs-main{display:flex;align-items:center;gap:.7rem;min-width:0}
.cs-name-wrap{min-width:0}
.cs-name{font-size:.9rem;font-weight:650;color:var(--txt);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-status{font-size:.72rem;line-height:1.35;margin-top:.2rem}
.cs-date-box{min-width:0}
.cs-date-label{
  display:block;font-size:.6rem;letter-spacing:2px;color:var(--txt3);
  text-transform:uppercase;margin-bottom:.3rem;
}
.cs-date-input{
  width:100%;min-height:38px;background:var(--bg-input);
  border:1px solid var(--border-md);border-radius:8px;color:var(--txt);
  font-family:'Inter',sans-serif;font-size:.82rem;padding:.55rem .7rem;outline:none;
  transition:border-color .2s,background .2s,box-shadow .2s;
}
.cs-date-input:focus{border-color:var(--accent);background:var(--bg-input-f);box-shadow:0 0 0 3px rgba(255,99,25,.08)}
.cs-date-hint{font-size:.66rem;color:var(--txt3);margin-top:.32rem;line-height:1.35}
.cs-actions{display:flex;justify-content:flex-end}
.cs-toggle-btn{
  min-height:38px;padding:.55rem 1rem;border-radius:8px;border:1px solid var(--border-md);
  background:var(--bg-input);color:var(--txt2);cursor:pointer;font-size:.8rem;font-weight:600;
  font-family:'Inter',sans-serif;transition:all .18s ease;white-space:nowrap;
}
.cs-toggle-btn:hover{border-color:var(--accent);color:var(--txt);background:var(--bg-hover)}
.cs-toggle-btn.is-active{border-color:rgba(245,158,11,.42);background:rgba(245,158,11,.12);color:var(--yellow)}
.cs-toggle-btn.is-expired{border-color:rgba(27,217,106,.35);background:rgba(27,217,106,.1);color:var(--green)}

@media(max-width:860px){
  /* Bring mobile text back closer to desktop proportions */
  .page-head h1{font-size:1.38rem;line-height:1.18}
  .page-head p{font-size:.84rem;line-height:1.45}
  .card-title{font-size:.9rem}
  .card-desc{font-size:.74rem}
  .f-label,.field-label{font-size:.72rem}
  .f-hint,.field-hint{font-size:.72rem}
  .notice{font-size:.82rem}
  .nav-item{font-size:.88rem}
  .topbar-title{font-size:1.02rem}
  .stat-val{font-size:1.55rem}
  .stat-lbl{font-size:.7rem}

  /* Keep iOS no-zoom only for editable fields */
  .f-input,.field-input,select,textarea,input{font-size:16px}
}
@media(max-width:620px){
  #pane-moduricfg .card-body{padding:.85rem}
  .cs-list{gap:.85rem}
  .cs-row{grid-template-columns:1fr;gap:.85rem;padding:1rem}
  .cs-main{align-items:flex-start;padding-bottom:.75rem;border-bottom:1px solid var(--border)}
  .cs-name{font-size:.96rem;white-space:normal}
  .cs-status{font-size:.75rem}
  .cs-date-label{font-size:.58rem}
  .cs-date-input{min-height:44px;font-size:16px;padding:.65rem .75rem}
  .cs-date-hint{font-size:.68rem}
  .cs-actions{justify-content:stretch}
  .cs-toggle-btn{width:100%;min-height:44px;font-size:.82rem}
}
@media(max-width:420px){
  .page-head h1{font-size:1.28rem}
  .card-body{padding:.9rem}
}



/* ════ FIX STABIL: Coming Soon layout curat desktop + iPhone ════ */
.cs-clean-list{display:flex;flex-direction:column;gap:.85rem;width:100%}
.cs-clean-row{display:grid;grid-template-columns:minmax(260px,1fr) minmax(230px,300px) minmax(170px,auto);gap:1rem;align-items:center;padding:1rem;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.025)}
.cs-clean-row.is-active{border-color:rgba(245,158,11,.32);background:rgba(245,158,11,.075)}
.cs-clean-row.is-expired{border-color:rgba(27,217,106,.32);background:rgba(27,217,106,.055)}
.cs-clean-main{display:flex;align-items:center;gap:.75rem;min-width:0}
.cs-clean-pill{width:34px!important;height:34px!important;font-size:.58rem!important;flex:0 0 34px}
.cs-clean-title{font-size:.9rem;font-weight:700;color:var(--txt);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-clean-status{font-size:.72rem;line-height:1.35;margin-top:.22rem;color:var(--txt3)}
.cs-clean-status.ok{color:var(--green)}
.cs-clean-status.warn{color:var(--yellow)}
.cs-clean-status.expired{color:var(--green)}
.cs-clean-date label{display:block;font-size:.6rem;letter-spacing:2px;text-transform:uppercase;color:var(--txt3);margin-bottom:.35rem}
.cs-clean-date input{width:100%;min-height:40px;background:var(--bg-input);border:1px solid var(--border-md);border-radius:8px;color:var(--txt);font-family:inherit;font-size:.84rem;padding:.6rem .7rem;outline:none}
.cs-clean-date input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,99,25,.08)}
.cs-clean-date-hint{font-size:.67rem;color:var(--txt3);line-height:1.35;margin-top:.35rem}
.cs-clean-actions{display:flex;justify-content:flex-end}
.cs-clean-btn{min-height:40px;padding:.58rem 1rem;border-radius:8px;border:1px solid var(--border-md);background:var(--bg-input);color:var(--txt2);font-family:inherit;font-size:.78rem;font-weight:650;cursor:pointer;white-space:nowrap;transition:background .18s,border-color .18s,color .18s,transform .16s}
.cs-clean-btn:hover{border-color:var(--accent);color:var(--txt);background:var(--bg-hover);transform:translateY(-1px)}
.cs-clean-btn.active{border-color:rgba(245,158,11,.45);background:rgba(245,158,11,.13);color:var(--yellow)}
.cs-clean-btn.expired{border-color:rgba(27,217,106,.4);background:rgba(27,217,106,.1);color:var(--green)}
@media(max-width:620px){
  #pane-moduricfg .card-body{padding:.85rem!important}
  .cs-clean-list{gap:.8rem}
  .cs-clean-row{grid-template-columns:1fr;gap:.8rem;padding:.95rem;border-radius:12px}
  .cs-clean-main{align-items:flex-start;padding-bottom:.7rem;border-bottom:1px solid var(--border)}
  .cs-clean-title{font-size:.95rem;white-space:normal}
  .cs-clean-status{font-size:.76rem}
  .cs-clean-date input{font-size:16px;min-height:44px}
  .cs-clean-actions{justify-content:stretch}
  .cs-clean-btn{width:100%;min-height:44px;font-size:.84rem}
}



/* ════ PATCH FINAL: Coming Soon desktop typography restore ════ */
@media(min-width:621px){
  #pane-moduricfg .card-body{padding:1.15rem!important}
  #pane-moduricfg .cs-clean-list{gap:.9rem}
  #pane-moduricfg .cs-clean-row{
    grid-template-columns:minmax(300px,1.25fr) minmax(260px,330px) minmax(190px,auto);
    gap:1.15rem;
    padding:1.15rem 1.2rem;
    border-radius:12px;
  }
  #pane-moduricfg .cs-clean-main{gap:.85rem}
  #pane-moduricfg .cs-clean-pill{width:40px!important;height:40px!important;flex-basis:40px!important;font-size:.66rem!important}
  #pane-moduricfg .cs-clean-title{font-size:1rem!important;line-height:1.28!important;font-weight:700!important;letter-spacing:0!important}
  #pane-moduricfg .cs-clean-status{font-size:.82rem!important;line-height:1.45!important;margin-top:.3rem!important}
  #pane-moduricfg .cs-clean-date label{font-size:.68rem!important;letter-spacing:2.2px!important;margin-bottom:.45rem!important}
  #pane-moduricfg .cs-clean-date input{font-size:.92rem!important;min-height:42px!important;padding:.65rem .78rem!important}
  #pane-moduricfg .cs-clean-date-hint{font-size:.76rem!important;line-height:1.45!important;margin-top:.42rem!important}
  #pane-moduricfg .cs-clean-btn{font-size:.88rem!important;min-height:42px!important;padding:.65rem 1.1rem!important}
}
@media(max-width:620px){
  #pane-moduricfg .cs-clean-title{font-size:.96rem!important}
  #pane-moduricfg .cs-clean-status{font-size:.76rem!important}
  #pane-moduricfg .cs-clean-date label{font-size:.62rem!important}
  #pane-moduricfg .cs-clean-date-hint{font-size:.7rem!important}
  #pane-moduricfg .cs-clean-btn{font-size:.84rem!important}
}



/* ════ PATCH STABIL: Coming Soon font compact desktop + iPhone date alignment ════ */
/* Override pentru patch-urile anterioare care au mărit prea mult tab-ul Coming Soon. */
@media(min-width:621px){
  #pane-moduricfg .card-body{padding:.85rem!important}
  #pane-moduricfg .cs-clean-list{gap:.65rem!important}
  #pane-moduricfg .cs-clean-row{
    grid-template-columns:minmax(230px,1fr) minmax(210px,270px) minmax(145px,auto)!important;
    gap:.75rem!important;
    padding:.78rem .85rem!important;
    border-radius:10px!important;
    align-items:center!important;
  }
  #pane-moduricfg .cs-clean-main{gap:.62rem!important;align-items:center!important}
  #pane-moduricfg .cs-clean-pill{width:32px!important;height:32px!important;flex:0 0 32px!important;font-size:.54rem!important}
  #pane-moduricfg .cs-clean-title{font-size:.86rem!important;line-height:1.22!important;font-weight:650!important;letter-spacing:0!important}
  #pane-moduricfg .cs-clean-status{font-size:.68rem!important;line-height:1.34!important;margin-top:.18rem!important}
  #pane-moduricfg .cs-clean-date{min-width:0!important;width:100%!important}
  #pane-moduricfg .cs-clean-date label{font-size:.55rem!important;letter-spacing:1.7px!important;margin-bottom:.28rem!important;line-height:1.2!important}
  #pane-moduricfg .cs-clean-date input{font-size:.78rem!important;min-height:34px!important;height:34px!important;padding:.45rem .58rem!important;border-radius:7px!important;line-height:1.2!important;box-sizing:border-box!important}
  #pane-moduricfg .cs-clean-date-hint{font-size:.61rem!important;line-height:1.28!important;margin-top:.24rem!important;max-width:100%!important}
  #pane-moduricfg .cs-clean-actions{justify-content:flex-end!important;align-self:center!important}
  #pane-moduricfg .cs-clean-btn{font-size:.74rem!important;min-height:34px!important;height:34px!important;padding:.45rem .78rem!important;border-radius:7px!important;line-height:1.1!important}
}

@media(max-width:620px){
  #pane-moduricfg .page-head h1{font-size:1.22rem!important;line-height:1.18!important}
  #pane-moduricfg .page-head p{font-size:.78rem!important;line-height:1.35!important}
  #pane-moduricfg .notice{font-size:.76rem!important;line-height:1.38!important;padding:.78rem .85rem!important}
  #pane-moduricfg .card-header{padding:.75rem .85rem!important}
  #pane-moduricfg .card-title{font-size:.84rem!important;line-height:1.2!important}
  #pane-moduricfg .card-body{padding:.75rem!important}
  #pane-moduricfg .cs-clean-list{gap:.7rem!important}
  #pane-moduricfg .cs-clean-row{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:.68rem!important;
    padding:.82rem!important;
    border-radius:12px!important;
    align-items:stretch!important;
  }
  #pane-moduricfg .cs-clean-main{
    display:grid!important;
    grid-template-columns:34px 1fr!important;
    gap:.65rem!important;
    align-items:start!important;
    padding-bottom:.65rem!important;
    border-bottom:1px solid var(--border)!important;
  }
  #pane-moduricfg .cs-clean-pill{width:34px!important;height:34px!important;flex:0 0 34px!important;font-size:.55rem!important;margin-top:.04rem!important}
  #pane-moduricfg .cs-clean-title{font-size:.9rem!important;line-height:1.22!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important}
  #pane-moduricfg .cs-clean-status{font-size:.7rem!important;line-height:1.32!important;margin-top:.18rem!important}
  #pane-moduricfg .cs-clean-date{
    width:100%!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:.34rem!important;
    min-width:0!important;
  }
  #pane-moduricfg .cs-clean-date label{font-size:.56rem!important;letter-spacing:1.5px!important;margin:0!important;line-height:1.2!important}
  #pane-moduricfg .cs-clean-date input{
    width:100%!important;
    box-sizing:border-box!important;
    min-height:42px!important;
    height:42px!important;
    font-size:16px!important;
    padding:.56rem .68rem!important;
    border-radius:9px!important;
    line-height:1.2!important;
  }
  #pane-moduricfg .cs-clean-date-hint{font-size:.64rem!important;line-height:1.3!important;margin:0!important;color:var(--txt3)!important}
  #pane-moduricfg .cs-clean-actions{justify-content:stretch!important;width:100%!important}
  #pane-moduricfg .cs-clean-btn{width:100%!important;min-height:42px!important;height:42px!important;font-size:.78rem!important;padding:.55rem .75rem!important;border-radius:9px!important;line-height:1.1!important}
}


/* ════ FINAL OVERRIDE: Coming Soon proportional desktop + aligned iPhone ════ */
/* Desktop: same visual scale as the rest of Admin Panel */
@media (min-width: 621px){
  #pane-moduricfg .page-head{margin-bottom:2rem!important}
  #pane-moduricfg .page-head h1{font-size:1.5rem!important;line-height:1.25!important;font-weight:700!important;margin-bottom:.3rem!important}
  #pane-moduricfg .page-head p{font-size:.82rem!important;line-height:1.45!important}
  #pane-moduricfg .notice{font-size:.82rem!important;line-height:1.5!important;padding:.85rem 1rem!important}
  #pane-moduricfg .card-header{padding:.9rem 1rem!important}
  #pane-moduricfg .card-title{font-size:.9rem!important;line-height:1.25!important;font-weight:600!important}
  #pane-moduricfg .card-body{padding:1rem!important}
  #pane-moduricfg #cs-rows,
  #pane-moduricfg .cs-clean-list,
  #pane-moduricfg .cs-list{gap:.7rem!important;width:100%!important}
  #pane-moduricfg .cs-clean-row,
  #pane-moduricfg .cs-row{
    grid-template-columns:minmax(260px,1fr) minmax(230px,285px) minmax(155px,auto)!important;
    gap:.85rem!important;
    padding:.78rem .9rem!important;
    border-radius:9px!important;
    align-items:center!important;
  }
  #pane-moduricfg .cs-clean-main,
  #pane-moduricfg .cs-main{gap:.65rem!important;align-items:center!important}
  #pane-moduricfg .cs-clean-pill,
  #pane-moduricfg .cs-main .mod-pill{width:28px!important;height:28px!important;flex:0 0 28px!important;font-size:.52rem!important;line-height:1!important}
  #pane-moduricfg .cs-clean-title,
  #pane-moduricfg .cs-name{font-size:.85rem!important;line-height:1.25!important;font-weight:600!important;letter-spacing:0!important;color:var(--txt)!important}
  #pane-moduricfg .cs-clean-status,
  #pane-moduricfg .cs-status{font-size:.69rem!important;line-height:1.35!important;margin-top:.14rem!important}
  #pane-moduricfg .cs-clean-date,
  #pane-moduricfg .cs-date-box{width:100%!important;min-width:0!important}
  #pane-moduricfg .cs-clean-date label,
  #pane-moduricfg .cs-date-label{font-size:.58rem!important;letter-spacing:1.8px!important;line-height:1.2!important;margin:0 0 .28rem!important;color:var(--txt3)!important;text-transform:uppercase!important}
  #pane-moduricfg .cs-clean-date input,
  #pane-moduricfg .cs-date-input{font-size:.82rem!important;min-height:36px!important;height:36px!important;padding:.5rem .62rem!important;border-radius:7px!important;line-height:1.2!important;background:var(--bg-input)!important;border:1px solid var(--border-md)!important;color:var(--txt)!important;box-sizing:border-box!important}
  #pane-moduricfg .cs-clean-date-hint,
  #pane-moduricfg .cs-date-hint{font-size:.63rem!important;line-height:1.3!important;margin-top:.25rem!important;color:var(--txt3)!important}
  #pane-moduricfg .cs-clean-actions,
  #pane-moduricfg .cs-actions{justify-content:flex-end!important;align-self:center!important}
  #pane-moduricfg .cs-clean-btn,
  #pane-moduricfg .cs-toggle-btn{font-size:.76rem!important;font-weight:600!important;min-height:36px!important;height:36px!important;padding:.48rem .85rem!important;border-radius:7px!important;line-height:1.1!important;white-space:nowrap!important}
}

/* iPhone / small screens: equal, full-width date boxes and clean cards */
@media (max-width: 620px){
  #pane-moduricfg .page-head{margin-bottom:1rem!important}
  #pane-moduricfg .page-head h1{font-size:1.22rem!important;line-height:1.22!important;font-weight:700!important}
  #pane-moduricfg .page-head p{font-size:.78rem!important;line-height:1.36!important}
  #pane-moduricfg .notice{font-size:.76rem!important;line-height:1.36!important;padding:.72rem .8rem!important;border-radius:9px!important}
  #pane-moduricfg .card-header{padding:.72rem .8rem!important}
  #pane-moduricfg .card-title{font-size:.84rem!important;line-height:1.25!important}
  #pane-moduricfg .card-body{padding:.72rem!important}
  #pane-moduricfg #cs-rows,
  #pane-moduricfg .cs-clean-list,
  #pane-moduricfg .cs-list{display:flex!important;flex-direction:column!important;gap:.72rem!important;width:100%!important}
  #pane-moduricfg .cs-clean-row,
  #pane-moduricfg .cs-row{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:.72rem!important;
    padding:.82rem!important;
    border-radius:11px!important;
    align-items:stretch!important;
    width:100%!important;
  }
  #pane-moduricfg .cs-clean-main,
  #pane-moduricfg .cs-main{
    display:grid!important;
    grid-template-columns:32px minmax(0,1fr)!important;
    gap:.62rem!important;
    align-items:start!important;
    padding-bottom:.66rem!important;
    border-bottom:1px solid var(--border)!important;
    width:100%!important;
  }
  #pane-moduricfg .cs-clean-pill,
  #pane-moduricfg .cs-main .mod-pill{width:32px!important;height:32px!important;flex:0 0 32px!important;font-size:.52rem!important;margin-top:.02rem!important}
  #pane-moduricfg .cs-clean-title,
  #pane-moduricfg .cs-name{font-size:.9rem!important;line-height:1.22!important;font-weight:650!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important}
  #pane-moduricfg .cs-clean-status,
  #pane-moduricfg .cs-status{font-size:.7rem!important;line-height:1.3!important;margin-top:.18rem!important}
  #pane-moduricfg .cs-clean-date,
  #pane-moduricfg .cs-date-box{display:block!important;width:100%!important;min-width:0!important;margin:0!important}
  #pane-moduricfg .cs-clean-date label,
  #pane-moduricfg .cs-date-label{display:block!important;font-size:.56rem!important;letter-spacing:1.5px!important;line-height:1.2!important;margin:0 0 .34rem!important;color:var(--txt3)!important;text-transform:uppercase!important}
  #pane-moduricfg .cs-clean-date input,
  #pane-moduricfg .cs-date-input{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:42px!important;
    min-height:42px!important;
    box-sizing:border-box!important;
    font-size:16px!important;
    line-height:1.2!important;
    padding:.56rem .68rem!important;
    border-radius:9px!important;
    background:var(--bg-input)!important;
    border:1px solid var(--border-md)!important;
    color:var(--txt)!important;
  }
  #pane-moduricfg .cs-clean-date-hint,
  #pane-moduricfg .cs-date-hint{font-size:.64rem!important;line-height:1.3!important;margin:.32rem 0 0!important;color:var(--txt3)!important}
  #pane-moduricfg .cs-clean-actions,
  #pane-moduricfg .cs-actions{display:block!important;width:100%!important;justify-content:stretch!important}
  #pane-moduricfg .cs-clean-btn,
  #pane-moduricfg .cs-toggle-btn{display:block!important;width:100%!important;height:42px!important;min-height:42px!important;font-size:.78rem!important;padding:.55rem .75rem!important;border-radius:9px!important;line-height:1.1!important;text-align:center!important}
}

/* ═══ (al doilea bloc <style>: preview modal & componente) ═══ */

.preview-modal{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.85);display:none;flex-direction:column}
.preview-modal.open{display:flex}
.preview-bar{display:flex;align-items:center;gap:.75rem;padding:.7rem 1.2rem;background:var(--bg-sidebar);border-bottom:1px solid var(--border);flex-shrink:0}
.preview-bar-title{font-size:.8rem;font-weight:600;color:var(--txt);flex:1}
.preview-bar-url{font-size:.72rem;color:var(--txt3);font-family:'Share Tech Mono',monospace}
.preview-frame{flex:1;border:none;background:#fff}
.mod-order-item{
  display:flex;align-items:center;gap:.75rem;
  padding:.75rem 1rem;background:var(--bg-card2);
  border:1px solid var(--border);border-radius:var(--radius);
  cursor:grab;user-select:none;transition:background .15s,transform .15s;
}
.mod-order-item:active{cursor:grabbing}
.drag-handle{color:var(--txt3);font-size:1.1rem;flex-shrink:0}
.layout-switch-wrap{display:flex;align-items:center;gap:.45rem;flex-shrink:0}
.lsw-label{font-size:.68rem;font-weight:500;transition:color .2s;min-width:40px;white-space:nowrap}
.lsw-label:first-child{text-align:right}
.lsw-track{position:relative;width:44px;height:26px;border-radius:13px;cursor:pointer;background:rgba(120,120,128,.32);transition:background .25s cubic-bezier(.4,0,.2,1);flex-shrink:0}
.lsw-track.lsw-on{background:#63991a}
.lsw-thumb{position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.35);transition:transform .25s cubic-bezier(.4,0,.2,1)}
.lsw-track.lsw-on .lsw-thumb{transform:translateX(18px)}
.url-status-badge{font-size:.68rem;font-weight:500;margin-top:.25rem;height:.9rem}
.url-status-ok{color:var(--green)}
.url-status-invalid{color:var(--red)}
.url-status-checking{color:var(--txt3)}

/* ═══ Skeleton loaders (Statistici) ═══ */
@keyframes skel-shimmer{
  0%{background-position:-200% 0}
  100%{background-position:200% 0}
}
.skel{
  border-radius:5px;
  background:linear-gradient(90deg,var(--border) 25%,var(--bg-card2) 50%,var(--border) 75%);
  background-size:200% 100%;
  animation:skel-shimmer 1.4s ease-in-out infinite;
}
.chart-skeleton{
  position:absolute;inset:0;
  border-radius:6px;
  background:linear-gradient(90deg,var(--border) 25%,var(--bg-card2) 50%,var(--border) 75%);
  background-size:200% 100%;
  animation:skel-shimmer 1.4s ease-in-out infinite;
  opacity:.55;
}