:root{
  /* Theme: dark (Bildpresse-like) */
  --g1:#f7c600;            /* accent */
  --g2:#ff9f1c;            /* accent 2 */
  --bg:#0b0f19;
  --bg2:#0d1324;
  --card:#121a2e;
  --card2:#0f1628;
  --line:rgba(255,255,255,.085);
  --text:#e8eefc;
  --muted:rgba(232,238,252,.72);
  --shadow:0 10px 26px rgba(0,0,0,.40);
  --radius:14px;
}

*{box-sizing:border-box;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";}

html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(900px 500px at 10% -10%, rgba(247,198,0,.18), transparent 60%),
    radial-gradient(900px 500px at 110% 0%, rgba(255,159,28,.12), transparent 55%),
    linear-gradient(180deg, var(--bg), #070a12 60%, #05070d);
}

a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- header ---------- */
.top{
  background:linear-gradient(180deg, rgba(18,26,46,.92), rgba(13,19,36,.92));
  backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid var(--line);
  padding:16px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.brand{
  font-size:22px;
  letter-spacing:.6px;
  line-height:1;
  display:flex;
  align-items:baseline;
  gap:0;
}
.brand span{font-weight:800;color:var(--g1)}

.who{font-size:12px;color:var(--muted);display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.who strong{color:var(--text)}

.company-switch{display:inline-flex;gap:8px;align-items:center}
.company-label{opacity:.95;font-size:12px}
.company-switch select{
  padding:7px 10px;
  border-radius:10px;
  border:1px solid var(--line);
  background:rgba(9,12,22,.55);
  color:var(--text);
  font-size:12px;
  outline:none;
}
.company-switch select:focus{box-shadow:0 0 0 3px rgba(247,198,0,.18)}
.company-switch option{color:#111}

/* ---------- menu ---------- */
.menu{
  background:rgba(10,14,26,.82);
  backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid var(--line);
  display:flex;
  gap:6px;
  align-items:center;
  padding:10px 14px;
  overflow:auto;
}
.menu a{
  color:var(--muted);
  text-decoration:none;
  padding:9px 12px;
  display:inline-flex;
  align-items:center;
  font-size:13px;
  border:1px solid transparent;
  border-radius:999px;
  white-space:nowrap;
}
.menu a:hover{color:var(--text);border-color:rgba(255,255,255,.10);text-decoration:none}
.menu a.active{
  color:#111;
  background:linear-gradient(90deg, var(--g1), var(--g2));
  border-color:rgba(0,0,0,.2);
  box-shadow:0 10px 22px rgba(247,198,0,.14);
}
.menu a.disabled{opacity:.45;pointer-events:none}

.menu .logout{margin-left:auto;display:flex;align-items:center;gap:10px;padding:0}
.menu button{
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  color:var(--text);
  padding:9px 12px;
  border-radius:999px;
  cursor:pointer;
  white-space:nowrap;
}
.menu button:hover{border-color:rgba(255,255,255,.16)}

/* ---------- layout ---------- */
.wrap{max-width:1200px;margin:18px auto;padding:0 16px}

.card{
  background:linear-gradient(180deg, rgba(18,26,46,.92), rgba(12,18,34,.92));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px 18px;
  margin-bottom:14px;
  box-shadow:var(--shadow);
}
.card h1{margin:0 0 10px 0;font-size:18px;letter-spacing:.2px}
.card h2{margin:0 0 10px 0;font-size:16px;letter-spacing:.2px}

.mini{
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:12px;
}
.mini .k{font-size:12px;color:var(--muted)}
.mini .v{font-size:14px;margin-top:4px}

.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}

/* ---------- forms ---------- */
.form label{display:block;margin:10px 0 6px 0;font-size:12px;color:var(--muted)}
.form label span{display:block;margin-bottom:6px}
.form input,.form select,textarea{
  width:100%;
  padding:10px 11px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(9,12,22,.55);
  color:var(--text);
  outline:none;
  min-width:0;
}
textarea{min-height:110px;resize:vertical}
.form input:focus,.form select:focus,textarea:focus{box-shadow:0 0 0 3px rgba(247,198,0,.18);border-color:rgba(247,198,0,.35)}
.form small{display:block;margin-top:6px;font-size:11px;color:rgba(232,238,252,.62)}

.actions{display:flex;gap:10px;align-items:center;margin-top:12px;flex-wrap:wrap}

.inline{display:flex;gap:10px;align-items:center}
.inline input{width:auto}

.form button,
.btn{
  background:linear-gradient(90deg, var(--g1), var(--g2));
  border:1px solid rgba(0,0,0,.2);
  color:#111;
  padding:10px 14px;
  border-radius:999px;
  cursor:pointer;
  font-weight:700;
}
.form button:hover,.btn:hover{filter:brightness(1.03)}
.btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;text-decoration:none}
.btn.small{padding:7px 10px;font-size:12px}

/* neutral button (rare) */
.btn.neutral{
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  color:var(--text);
}

.row{display:flex;gap:8px;align-items:center}
.row input{flex:1}

/* ---------- messages ---------- */
.msg,.alert{
  padding:10px 12px;
  border-radius:12px;
  margin:10px 0;
  font-size:13px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
}
.msg.ok,.alert.success{border-color:rgba(46,204,113,.35);background:rgba(46,204,113,.10)}
.msg.err,.alert.error{border-color:rgba(255,77,77,.35);background:rgba(255,77,77,.10)}

.hint{margin-top:10px;font-size:12px;color:rgba(232,238,252,.62)}
.muted{color:rgba(232,238,252,.62);font-size:12px}

/* ---------- tables (classic <table>) ---------- */
.tablewrap{overflow:auto;border:1px solid var(--line);border-radius:var(--radius);background:rgba(255,255,255,.02)}

table.table{width:100%;border-collapse:collapse;font-size:13px}
.table th,.table td{padding:10px 10px;border-bottom:1px solid rgba(255,255,255,.06);text-align:left;white-space:nowrap}
.table th{background:rgba(255,255,255,.03);font-size:12px;color:var(--muted)}
.table tr:hover td{background:rgba(255,255,255,.02)}

.pagination{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;align-items:center}
.pagination a{
  display:inline-block;
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  text-decoration:none;
  color:var(--muted);
  background:rgba(255,255,255,.03);
}
.pagination a:hover{border-color:rgba(247,198,0,.35);color:var(--text)}
.pagination a.active{background:linear-gradient(90deg, var(--g1), var(--g2));color:#111;border-color:rgba(0,0,0,.2)}

/* ---------- tables (div rows: admin/sender_ids) ---------- */
/* container */
div.table{
  width:100%;
  overflow:auto;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:rgba(255,255,255,.02);
}
/* row */
div.table .row{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(120px,1fr);
  gap:12px;
  align-items:center;
  padding:10px 10px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
/* header row */
div.table .row.head{
  position:sticky;
  top:0;
  z-index:1;
  background:rgba(255,255,255,.03);
  color:var(--muted);
  font-size:12px;
  font-weight:700;
}

div.table .row:hover{background:rgba(255,255,255,.02)}

div.table input, div.table select{
  padding:8px 10px;
  border-radius:10px;
  border:1px solid var(--line);
  background:rgba(9,12,22,.55);
  color:var(--text);
}

/* ---------- pills / statuses ---------- */
.pill{
  display:inline-block;
  padding:3px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  font-size:12px;
  background:rgba(255,255,255,.03);
}
.st-scheduled,.st-queued{background:rgba(255,176,32,.14);border-color:rgba(255,176,32,.25)}
.st-sending,.st-sent{background:rgba(47,116,255,.14);border-color:rgba(47,116,255,.25)}
.st-done,.st-delivered{background:rgba(46,204,113,.12);border-color:rgba(46,204,113,.25)}
.st-failed{background:rgba(255,77,77,.12);border-color:rgba(255,77,77,.25)}

.pre{white-space:pre-wrap;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:var(--radius);padding:10px;font-size:13px}

.kv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:10px 0}
.kv div{border:1px solid var(--line);border-radius:var(--radius);padding:10px;background:rgba(255,255,255,.02)}
.kv span{display:block;font-size:11px;color:rgba(232,238,252,.62)}
.kv strong{display:block;margin-top:3px;font-size:13px}

.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;}

code{background:rgba(255,255,255,.05);padding:2px 6px;border-radius:8px;border:1px solid rgba(255,255,255,.08)}

.foot{opacity:.7;text-align:center;padding:14px 0 22px 0;font-size:12px;color:rgba(232,238,252,.60)}

/* ---------- login ---------- */
body.login-page{
  background:
    radial-gradient(900px 500px at 10% -10%, rgba(247,198,0,.22), transparent 60%),
    radial-gradient(900px 500px at 110% 0%, rgba(255,159,28,.14), transparent 55%),
    linear-gradient(180deg, var(--bg), #070a12 60%, #05070d);
}

.login-screen{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:28px 16px;
  gap:14px;
}

.login-panel{
  width:min(720px,96vw);
  background:linear-gradient(180deg, rgba(18,26,46,.92), rgba(12,18,34,.92));
  border:1px solid var(--line);
  border-radius:18px;
  padding:32px 38px;
  box-shadow:var(--shadow);
}

.login-logo{
  text-align:center;
  color:var(--text);
  font-size:54px;
  letter-spacing:1px;
  line-height:1;
  margin-bottom:16px;
}
.login-logo span{font-weight:800;color:var(--g1)}
.login-logo sup{font-size:18px;vertical-align:top;margin-left:2px;color:rgba(232,238,252,.55)}

.login-form2{max-width:560px;margin:0 auto}
.login-row{display:flex;align-items:center;gap:14px;margin:12px 0}
.login-label2{width:110px;color:rgba(232,238,252,.78);font-size:13px;font-weight:800;letter-spacing:.6px}
.login-label2 label{color:inherit}
.login-field2{flex:1}
.login-field2 input{
  width:100%;
  padding:12px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(9,12,22,.55);
  color:var(--text);
  outline:none;
}
.login-field2 input:focus{box-shadow:0 0 0 3px rgba(247,198,0,.18);border-color:rgba(247,198,0,.35)}

.login-btn{margin:0}

.login-alert{
  max-width:560px;
  margin:0 auto 12px auto;
  background:rgba(255,77,77,.10);
  border:1px solid rgba(255,77,77,.30);
  color:rgba(255,219,219,.95);
  padding:10px 12px;
  border-radius:12px;
  font-size:13px;
}

.login-forgot{width:min(720px,96vw);text-align:right;font-size:13px;color:rgba(232,238,252,.68)}
.login-forgot a{color:rgba(232,238,252,.68)}
.login-forgot a:hover{color:var(--text)}

/* ---------- announcements ---------- */
.announce-wrap{max-width:1200px;margin:10px auto 0 auto;padding:0 18px}
.announce{
  display:flex;
  gap:12px;
  align-items:flex-start;
  justify-content:space-between;
  border-radius:var(--radius);
  padding:10px 12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.02);
  box-shadow:0 8px 18px rgba(0,0,0,.28);
  margin-bottom:10px;
}
.announce .txt{flex:1;font-size:13px;line-height:1.35}
.announce .txt strong{display:block;margin-bottom:4px}
.announce .txt span{display:block;opacity:.95}
.announce .act{display:flex;gap:8px;align-items:center}
.announce .act form{margin:0}
.announce .act button{margin-top:0;white-space:nowrap}

.announce.info{border-left:4px solid #2f74ff}
.announce.warn{border-left:4px solid #ffb020;background:rgba(255,176,32,.08)}
.announce.danger{border-left:4px solid #ff4d4d;background:rgba(255,77,77,.08)}

/* ---------- responsive ---------- */
@media (max-width: 980px){
  .grid,.grid2{grid-template-columns:1fr}
  .kv{grid-template-columns:1fr}
}

@media (max-width: 780px){
  .top{flex-direction:column;align-items:flex-start}
  .menu{padding:10px 10px}
  .login-panel{padding:28px 20px}
  .login-logo{font-size:46px}
  .login-row{flex-direction:column;align-items:stretch;gap:8px}
  .login-label2{width:auto}
  .announce{flex-direction:column;align-items:stretch}
  .announce .act{justify-content:flex-end}
}