
:root {
  --nla-bg: #07111f;
  --nla-panel: rgba(12, 24, 40, .86);
  --nla-panel2: rgba(20, 38, 61, .82);
  --nla-text: #f4f8ff;
  --nla-muted: #9fb1c8;
  --nla-line: rgba(255,255,255,.11);
  --nla-accent: #59c7ff;
  --nla-accent2: #8b7cff;
  --nla-good: #59e39c;
  --nla-danger: #ff637c;
  --nla-shadow: 0 25px 70px rgba(0,0,0,.38);
}
* { box-sizing:border-box; }
body { margin:0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif; background:#0b1420; color:var(--nla-text); }
newsletter-app-widget { display:block; width:min(1120px,100%); }
.nla {
  position:relative; overflow:hidden; min-height:720px; border:1px solid var(--nla-line);
  border-radius:28px; background:
    radial-gradient(circle at 10% 0%, rgba(89,199,255,.17), transparent 34%),
    radial-gradient(circle at 100% 20%, rgba(139,124,255,.18), transparent 32%),
    linear-gradient(145deg,#08111e,#101d2f 55%,#0a1423);
  box-shadow:var(--nla-shadow);
}
.nla::before { content:""; position:absolute; inset:0; background-image:url("assets/bg.png"); background-size:cover; background-position:center; opacity:.08; pointer-events:none; }
.nla-shell { position:relative; z-index:1; min-height:720px; display:flex; flex-direction:column; }
.nla-top { height:76px; display:flex; align-items:center; justify-content:space-between; padding:12px 18px; border-bottom:1px solid var(--nla-line); backdrop-filter:blur(18px); background:rgba(5,12,22,.62); }
.nla-brand { display:flex; align-items:center; gap:11px; font-weight:800; letter-spacing:.02em; }
.nla-logo { width:42px;height:42px;border-radius:13px; display:grid;place-items:center; background:linear-gradient(135deg,var(--nla-accent),var(--nla-accent2)); color:#06101c; font-weight:950; box-shadow:0 10px 30px rgba(89,199,255,.25); }
.nla-top-actions { display:flex; gap:8px; }
.nla-btn { border:1px solid var(--nla-line); color:var(--nla-text); background:rgba(255,255,255,.07); border-radius:13px; padding:10px 13px; cursor:pointer; font-weight:700; transition:.2s; }
.nla-btn:hover { transform:translateY(-1px); background:rgba(255,255,255,.12); }
.nla-btn.primary { border:0; background:linear-gradient(135deg,var(--nla-accent),var(--nla-accent2)); color:#06101c; }
.nla-btn.danger { color:#fff; background:rgba(255,99,124,.15); border-color:rgba(255,99,124,.35); }
.nla-content { flex:1; padding:22px; overflow:hidden; }
.nla-view { height:100%; animation:nlaIn .36s ease both; }
@keyframes nlaIn { from {opacity:0;transform:translateX(28px) scale(.985)} to {opacity:1;transform:none} }
.nla-view.back { animation:nlaBack .36s ease both; }
@keyframes nlaBack { from {opacity:0;transform:translateX(-28px) scale(.985)} to {opacity:1;transform:none} }
.nla-heading { display:flex; align-items:end; justify-content:space-between; gap:14px; margin-bottom:16px; }
.nla-heading h1 { margin:0; font-size:clamp(27px,4vw,42px); }
.nla-heading p { margin:5px 0 0; color:var(--nla-muted); }
.nla-search { width:100%; border:1px solid var(--nla-line); outline:none; color:var(--nla-text); background:rgba(0,0,0,.22); border-radius:16px; padding:14px 16px; font-size:15px; margin-bottom:16px; }
.nla-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:13px; }
.nla-card { text-align:left; width:100%; border:1px solid var(--nla-line); border-radius:20px; padding:18px; background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.025)); color:var(--nla-text); cursor:pointer; min-height:105px; transition:.22s; }
.nla-card:hover { transform:translateY(-3px); border-color:rgba(89,199,255,.4); box-shadow:0 15px 35px rgba(0,0,0,.2); }
.nla-card .eyebrow { color:var(--nla-accent); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.09em; }
.nla-card h3 { margin:7px 0 4px; font-size:18px; }
.nla-card p { margin:0; color:var(--nla-muted); line-height:1.45; }
.nla-list { display:grid; gap:10px; }
.nla-row { display:flex; align-items:center; gap:13px; width:100%; text-align:left; border:1px solid var(--nla-line); background:rgba(255,255,255,.045); border-radius:18px; padding:14px; color:var(--nla-text); cursor:pointer; transition:.2s; }
.nla-row:hover { background:rgba(255,255,255,.08); transform:translateX(3px); }
.nla-icon { width:42px;height:42px;flex:0 0 42px;border-radius:13px;display:grid;place-items:center;background:rgba(89,199,255,.11);color:var(--nla-accent);font-weight:900; }
.nla-row-main { min-width:0; flex:1; }
.nla-row-main strong { display:block; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.nla-row-main small { display:block;color:var(--nla-muted);margin-top:4px; }
.nla-badge { padding:5px 9px;border-radius:999px;background:rgba(89,227,156,.12);color:var(--nla-good);font-size:11px;font-weight:800; }
.nla-toolbar { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.nla-toolbar .nla-btn { flex:0 0 auto; }
.nla-article { display:flex; flex-direction:column; min-height:570px; }
.nla-article-header { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px; }
.nla-article-title { margin:0;font-size:clamp(22px,4vw,36px);line-height:1.12; }
.nla-article-frame { flex:1; min-height:470px; width:100%; border:1px solid var(--nla-line); border-radius:20px; background:#fff; overflow:hidden; }
.nla-article-frame iframe { width:100%;height:100%;min-height:470px;border:0;background:#fff; }
.nla-stars { display:flex; gap:4px; margin-top:10px; }
.nla-star { border:0;background:transparent;color:#64748b;font-size:27px;cursor:pointer;padding:0; }
.nla-star.active { color:#ffd34d; }
.nla-auth { width:min(460px,100%); margin:30px auto; padding:28px; border:1px solid var(--nla-line); border-radius:24px; background:rgba(0,0,0,.18); box-shadow:var(--nla-shadow); }
.nla-auth h1 { margin-top:0; }
.nla-input { width:100%; margin:7px 0; border:1px solid var(--nla-line); background:rgba(255,255,255,.06); color:var(--nla-text); padding:13px 14px; border-radius:14px; outline:none; }
.nla-input:focus { border-color:rgba(89,199,255,.65); }
.nla-auth .nla-btn { width:100%; margin-top:8px; }
.nla-link { border:0;background:none;color:var(--nla-accent);cursor:pointer;font-weight:700;padding:8px 0; }
.nla-status { min-height:22px;color:var(--nla-muted);margin:10px 0; }
.nla-footer { border-top:1px solid var(--nla-line); padding:10px 18px; color:var(--nla-muted); font-size:12px; display:flex;justify-content:space-between;gap:10px; }
.nla-empty { text-align:center; color:var(--nla-muted); padding:50px 15px; }
.nla-spinner { width:28px;height:28px;border:3px solid rgba(255,255,255,.18);border-top-color:var(--nla-accent);border-radius:50%;animation:spin .8s linear infinite;margin:35px auto; }
@keyframes spin {to{transform:rotate(360deg)}}
.nla-modal { position:fixed;inset:0;z-index:99999;display:grid;place-items:center;background:rgba(0,0,0,.7);backdrop-filter:blur(8px);padding:18px; }
.nla-modal-box { width:min(600px,100%); max-height:85vh; overflow:auto; border:1px solid var(--nla-line);border-radius:22px;background:#0c1828;padding:20px;box-shadow:var(--nla-shadow); }
.nla-modal-head { display:flex;justify-content:space-between;align-items:center; }
.nla-modal textarea { min-height:130px; resize:vertical; }
@media(max-width:650px) {
  .nla { border-radius:18px; min-height:calc(100vh - 20px); }
  .nla-shell { min-height:calc(100vh - 20px); }
  .nla-top { height:64px; }
  .nla-content { padding:14px; }
  .nla-footer { display:none; }
  .nla-top-actions .desktop-only { display:none; }
  .nla-article-frame, .nla-article-frame iframe { min-height:55vh; }
}
