/* IT4Y_ADS_CSP_STRICT_2026_06_03 — externalized from advertising.static.html <style> so the page is
   strict-CSP-clean (style-src 'self', no 'unsafe-inline'). Content unchanged; +2 classes at end
   (.adhdr-flex / .card-720) replacing the 2 former inline style= attributes. */
:root{--bg:#0a1219;--bg-2:#0c1722;--panel:#0f1e2e;--panel-2:#152a40;--border:#1f3a5a;--border-soft:#15273e;
--text:#e8edf6;--text-dim:#b4c0d0;--muted:#7d8ba0;--accent:#3b9eff;--accent-soft:#1d3a5e;
--ok:#34d399;--warn:#fbbf24;--danger:#f87171;--info:#60a5fa;--header-h:54px;--sidebar-w:220px}
*{box-sizing:border-box} html,body{height:100%;margin:0}
body{font:14px -apple-system,system-ui,sans-serif;background:var(--bg);color:var(--text)}
a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline}
code{font:12px ui-monospace,Menlo,monospace;color:var(--info)}
pre{font:12px ui-monospace,Menlo,monospace}
.app-shell{display:grid;grid-template-columns:var(--sidebar-w) 1fr;grid-template-rows:var(--header-h) 1fr;min-height:100vh}
.app-header{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;background:var(--panel);border-bottom:1px solid var(--border);padding:0 22px}
.brand{font-weight:700;color:var(--accent);display:flex;gap:10px;align-items:center}
.brand .pill-product{background:var(--accent-soft);color:var(--text);padding:2px 8px;border-radius:11px;font-size:10px;letter-spacing:.6px;text-transform:uppercase}
.session-info{color:var(--text-dim);font-size:13px} .session-info .email{color:var(--text);font-weight:600}
.app-sidebar{background:var(--bg-2);border-right:1px solid var(--border-soft);overflow-y:auto;padding:14px 8px}
.nav-item{display:flex;gap:10px;padding:8px 12px;margin:1px 4px;border-radius:6px;cursor:pointer;color:var(--text-dim);font-size:13px}
.nav-item:hover{background:var(--panel-2);color:var(--text)}
.nav-item.active{background:var(--accent-soft);color:var(--text);font-weight:600}
.app-main{padding:22px 26px;overflow-y:auto}
.breadcrumbs{color:var(--muted);font-size:12px;margin-bottom:12px} .breadcrumbs a{color:var(--muted)} .breadcrumbs .sep{margin:0 8px}
.page-title{font-size:22px;font-weight:700;margin:0 0 16px}
.card{background:var(--panel);border:1px solid var(--border-soft);border-radius:10px;padding:18px;margin-bottom:16px}
.card h3{margin:0 0 12px 0;font-size:15px}
.card-toolbar{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;align-items:center}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.kpi{background:var(--panel-2);padding:14px 16px;border-radius:8px;border:1px solid var(--border-soft)}
.kpi .v{font-size:26px;font-weight:700;color:var(--accent)}
.kpi .l{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.7px;margin-top:4px}
.kpi.warn .v{color:var(--warn)} .kpi.danger .v{color:var(--danger)}
.kpi.live{position:relative;overflow:hidden}
.kpi.live::after{content:'';position:absolute;top:8px;right:10px;width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;color:var(--muted);font-weight:600;padding:9px 12px;border-bottom:1px solid var(--border-soft);font-size:11px;text-transform:uppercase;letter-spacing:.6px}
td{padding:9px 12px;border-bottom:1px solid #131e2d}
tr.clickable{cursor:pointer} tr.clickable:hover td{background:#11203a}
.pill{display:inline-block;padding:2px 8px;border-radius:11px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;background:#1f3a5e;color:#b9d3f0}
.pill.green{background:#14331a;color:#b3f5c4} .pill.red{background:#3a1818;color:#fda4a4} .pill.amber{background:#3a2f18;color:#fde2a4}
.field{margin:12px 0}
.field label{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;padding:9px 12px;border-radius:6px;border:1px solid var(--border);background:#0a1726;color:var(--text);font:13px ui-monospace,monospace}
.btn{padding:8px 14px;border-radius:6px;border:0;cursor:pointer;background:var(--accent);color:#fff;font:600 13px system-ui}
.btn:hover{filter:brightness(1.1)} .btn.small{padding:4px 10px;font-size:11px}
.btn.ghost{background:transparent;color:var(--text-dim);border:1px solid var(--border)}
.btn.warn{background:var(--warn);color:#0a1929} .btn.danger{background:var(--danger)}
.msg{padding:11px 14px;border-radius:6px;font-size:13px;margin:10px 0}
.msg.error{background:#3a1818;color:#fda4a4;border:1px solid #7f3333}
.msg.ok{background:#14331a;color:#b3f5c4;border:1px solid #2f6e44}
.msg.info{background:#14253d;color:#b6d4f8;border:1px solid #2a4a76}
.muted{color:var(--muted)} .small{font-size:11px} .right{text-align:right}
.spinner{display:inline-block;width:14px;height:14px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .6s linear infinite;vertical-align:middle;margin-right:6px}
@keyframes spin{to{transform:rotate(360deg)}}
.auth-wrap{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
.auth-card{width:100%;max-width:440px;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:28px}
.product-badge{background:linear-gradient(135deg,var(--accent),#a855f7);color:#fff;padding:6px 12px;border-radius:6px;font-weight:600;font-size:11px;letter-spacing:1px;text-transform:uppercase;display:inline-block;margin-bottom:14px}
/* IT4Y_ADS_CSP_STRICT_2026_06_03 — replacements for former inline style= attributes */
.adhdr-flex{margin:0;flex:1}
.card-720{max-width:720px}


/* IT4Y_MODULE_MOBILE_UX_2026_07_24 -- responsive module shell, keyboard
   focus, and 44px mobile targets. Desktop density and application logic stay
   unchanged. */
.btn:focus-visible,
.nav-item:focus-visible,
a:focus-visible,
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:var(--accent);
}
@media (prefers-reduced-motion:reduce){
  .kpi.live::after,
  .spinner{
    animation:none !important;
  }
}
@media (max-width:840px){
  .app-shell{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto minmax(0,1fr);
  }
  .app-header{
    grid-column:1;
    grid-row:1;
    min-height:64px;
    height:auto;
    padding:10px 14px;
    gap:8px 14px;
    flex-wrap:wrap;
  }
  .app-header > div:last-child{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
  }
  .session-info{
    max-width:min(56vw,320px);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .app-sidebar{
    grid-column:1;
    grid-row:2;
    display:flex;
    gap:6px;
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
    border-right:0;
    border-bottom:1px solid var(--border-soft);
    padding:8px;
    scrollbar-width:thin;
  }
  .nav-item{
    min-height:44px;
    flex:0 0 auto;
    align-items:center;
    padding:10px 12px;
    scroll-snap-align:start;
  }
  .app-main{
    grid-column:1;
    grid-row:3;
    min-width:0;
    padding:16px 12px 24px;
    overflow-y:visible;
  }
  .card{
    padding:16px;
    border-radius:12px;
  }
  .card-toolbar{
    align-items:stretch;
  }
  .btn,
  .btn.small{
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:9px 14px;
  }
  .field input,
  .field select{
    min-height:44px;
    font-size:16px;
  }
  .field textarea{
    font-size:16px;
  }
  table{
    display:block;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .auth-wrap{
    padding:16px;
  }
  .auth-card{
    padding:24px 20px;
    border-radius:16px;
    box-shadow:0 20px 60px rgba(0,0,0,.22);
  }
  .auth-card h1{
    margin:0 0 12px;
    font-size:clamp(24px,8vw,30px);
    line-height:1.15;
  }
  .auth-card p{
    margin:0;
    line-height:1.7;
  }
  .auth-card .muted a{
    min-height:44px;
    display:inline-flex;
    align-items:center;
    padding:0 4px;
    border-radius:6px;
    font-weight:700;
    text-decoration:underline;
    text-decoration-thickness:1px;
    text-underline-offset:3px;
  }
}