/* SETTINGS MODULE */
  .settings-shell{display:flex; flex-direction:column; gap:20px;}
  .settings-panel-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:16px; flex-wrap:wrap;}
  .settings-panel-title{font-size:19px; font-weight:700; letter-spacing:-.01em; margin-bottom:4px;}
  .settings-panel-sub{font-size:13px; color:var(--ink-500);}
  .settings-meta{display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex-shrink:0;}
  .autosave-pill{display:flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; color:var(--green-600); background:var(--green-50); padding:6px 10px; border-radius:20px; transition:color .15s ease, background .15s ease;}
  .autosave-pill.saving{color:var(--amber-600); background:var(--amber-50);}
  .autosave-pill .dot{width:6px;height:6px;border-radius:50%; background:currentColor; flex-shrink:0;}
  .settings-updated{font-size:11.3px; color:var(--ink-500);}
  .restore-btn{background:transparent; border:none; color:var(--purple-600); font-size:12px; font-weight:600; padding:0; cursor:pointer; font-family:inherit;}
  .restore-btn:hover{text-decoration:underline;}
  .conn-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:14px;}
  .conn-card { border:1px solid var(--border); padding:16px; display:flex; flex-direction:column; gap:12px; background:var(--page-bg); }
  .conn-card-head{display:flex; align-items:center; gap:12px;}
  .conn-logo{width:40px;height:40px;border-radius:11px; display:flex;align-items:center;justify-content:center; background:var(--card-bg); border:1px solid var(--border); flex-shrink:0;}
  .conn-logo svg{width:19px;height:19px;}
  .conn-name{font-size:13.4px; font-weight:700;}
  .conn-status{font-size:11.3px; font-weight:600; display:flex; align-items:center; gap:5px; margin-top:2px;}
  .conn-status.on{color:var(--green-600);}
  .conn-status.off{color:var(--ink-500);}
  .conn-status .dot{width:6px;height:6px;border-radius:50%; background:currentColor;}
  .conn-meta{font-size:11.3px; color:var(--ink-500); display:flex; flex-direction:column; gap:2px;}
  .conn-actions{display:flex; gap:8px; margin-top:auto; flex-wrap:wrap;}
  .conn-actions button{padding:8px 12px; font-size:12px; margin-left:0; flex:1;}
  .swatch-row{display:flex; gap:10px; flex-wrap:wrap;}
  .swatch{width:38px;height:38px;border-radius:11px; border:2px solid var(--border); cursor:pointer; position:relative; flex-shrink:0;}
  .swatch.active{border-color:var(--purple-600); box-shadow:0 0 0 3px var(--purple-100);}
  .swatch.active::after{content:'✓'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; font-weight:700; text-shadow:0 1px 2px rgba(0,0,0,.4);}
  .notif-grid-head{display:grid; grid-template-columns:1fr repeat(4,60px); gap:8px; align-items:center; padding:0 0 12px; border-bottom:1px solid var(--border); font-size:10.6px; font-weight:700; color:var(--ink-500); text-transform:uppercase; letter-spacing:.04em;}
  .notif-row{display:grid; grid-template-columns:1fr repeat(4,60px); gap:8px; align-items:center; padding:13px 0; border-bottom:1px solid var(--border);}
  .notif-row:last-child{border-bottom:none;}
  .notif-row .switch{margin:0 auto;}
  .notif-grid-head span:not(:first-child){text-align:center;}
  .perm-grid{display:grid; grid-template-columns:1fr repeat(5,88px); gap:8px; align-items:center; padding:0 0 12px; border-bottom:1px solid var(--border); font-size:10.6px; font-weight:700; color:var(--ink-500); text-transform:uppercase; letter-spacing:.04em;}
  .perm-row{display:grid; grid-template-columns:1fr repeat(5,88px); gap:8px; align-items:center; padding:12px 0; border-bottom:1px solid var(--border);}
  .perm-row:last-child{border-bottom:none;}
  .perm-scroll{overflow-x:auto;}
  .perm-row .switch{margin:0 auto;}
  .security-toggle-row{display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; padding:10px 0; border-bottom:1px solid var(--border);}
  .security-toggle-row:last-child{border-bottom:none;}
  .perm-grid span:not(:first-child){text-align:center;}
  .usage-bar-track{height:7px; border-radius:20px; background:var(--ink-100); overflow:hidden; margin-top:6px;}
  .usage-bar-fill{height:100%; border-radius:20px; background:var(--purple-600);}
  @media (max-width:860px){
    .notif-grid-head, .notif-row{grid-template-columns:1fr repeat(4,62px); font-size:10px;}
    .perm-grid, .perm-row{grid-template-columns:1fr repeat(5,64px);}
  }
  /* phones: the 46px columns were narrower than the "WHATSAPP" header, so it ran into "PUSH" ("WHATSAPP PUSH").
     Slightly wider columns + a smaller, un-tracked header label keep each name inside its own column. */
  @media (max-width:560px){
    .notif-grid-head, .notif-row{grid-template-columns:minmax(0,1fr) repeat(4,52px); gap:2px;}
    .notif-grid-head{font-size:9px; letter-spacing:0;}
    .notif-grid-head span{white-space:nowrap;}
  }
  @media (max-width:380px){
    .notif-grid-head, .notif-row{grid-template-columns:minmax(0,1fr) repeat(4,46px);}
    .notif-grid-head{font-size:8px;}
  }
  @media (max-width:560px){
    .perm-grid, .perm-row{min-width:460px; grid-template-columns:minmax(0,1fr) repeat(5,64px);}
  }
  .mkt-tab:hover{background:var(--ink-100);}
  .mkt-tab.active{background:var(--purple-50); color:var(--purple-600); border-color:var(--purple-100);}
  .mkt-tab-badge{font-size:8.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; background:var(--ink-300); color:var(--ink-700); padding:2px 6px; border-radius:20px;}
  [data-theme="dark"] .mkt-tab-badge{background:var(--ink-100); color:var(--ink-500);}

  .mkt-kpi-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:16px;}
  .mkt-kpi-card{padding:16px;}
  .mkt-kpi-card .stat-top{margin-bottom:10px;}
  .mkt-kpi-card .stat-icon{width:36px;height:36px;border-radius:10px;}
  .mkt-kpi-card .stat-icon svg{width:17px;height:17px;}
  .mkt-kpi-card .stat-value{font-size:19px; margin-bottom:4px;}
  .mkt-kpi-card .stat-title{font-size:11.8px;}

  .mkt-chart-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;}

  .status-scheduled{background:var(--blue-50); color:var(--blue-600);}
  .status-draft{background:var(--ink-100); color:var(--ink-500);}
  .status-overdue{background:var(--red-50); color:var(--red-600);}

  .conn-status.warn{color:var(--amber-600);}
  @keyframes spin{ to{ transform:rotate(360deg); } }


  /* ---------- Settings > Portal ---------- */
  .portal-note{margin:0 0 16px; padding:12px 14px; border-radius:12px; font-size:12.6px; line-height:1.5; border:1px solid var(--border); background:var(--page-bg); color:var(--ink-700, var(--ink-500));}
  .portal-note.warn{background:var(--amber-50); border-color:var(--amber-600); color:var(--ink-900, inherit);}
  .portal-hint{font-size:12px; color:var(--ink-500); margin-top:12px; line-height:1.5;}
  .portal-linkbtn{background:none; border:0; padding:0; font:inherit; font-weight:600; color:var(--purple-600); cursor:pointer;}
  .portal-linkbtn:hover{text-decoration:underline;}
  .portal-count{float:right; font-weight:500; font-size:11px; color:var(--ink-500);}
  .portal-pv{border:1px solid var(--border); border-radius:14px; overflow:hidden; background:var(--page-bg); margin:12px 0 16px;}
  .portal-pv-banner{color:#fff; font-size:12px; font-weight:600; text-align:center; padding:8px 14px; overflow-wrap:anywhere;}
  .portal-pv-body{padding:18px 18px 20px; display:flex; flex-direction:column; align-items:flex-start; gap:6px;}
  .portal-pv-name{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-500);}
  .portal-pv-head{font-size:18px; font-weight:700; letter-spacing:-.01em; overflow-wrap:anywhere;}
  .portal-pv-sub{font-size:12.6px; color:var(--ink-500); overflow-wrap:anywhere;}
  .portal-pv-cta{margin-top:8px; display:inline-block; color:#fff; font-size:12.4px; font-weight:600; padding:8px 16px; border-radius:20px;}
  .portal-link-row{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
  .portal-link-row .form-input{flex:1 1 260px; min-width:0;}
  .portal-share{display:flex; gap:20px; align-items:center; margin-top:18px; flex-wrap:wrap;}
  .portal-qr{width:180px; height:180px; flex-shrink:0; background:#fff; border:1px solid var(--border); border-radius:14px; padding:8px; box-sizing:border-box;}
  .portal-qr svg{width:100%; height:100%; display:block;}
  .portal-share-actions{display:flex; flex-direction:column; align-items:flex-start; gap:8px; flex:1 1 220px; min-width:0;}
  .portal-share-actions .btn-secondary{text-decoration:none; display:inline-flex; align-items:center; justify-content:center;}
  @media (max-width:560px){
    .portal-link-row .btn-secondary{flex:1;}
    .portal-share{flex-direction:column; align-items:stretch;}
    .portal-qr{align-self:center;}
    .portal-share-actions .btn-secondary{width:100%;}
  }