:root { color-scheme: dark; --bg:#0b1017; --panel:#121b26; --line:#273445; --text:#eef4fb; --muted:#91a1b5; --accent:#5ee1b2; --danger:#ff7c89; }
* { box-sizing: border-box; }
body { margin:0; background:linear-gradient(145deg,#081019,#101723); color:var(--text); font:15px/1.5 Inter,ui-sans-serif,system-ui,sans-serif; min-height:100vh; }
header { min-height:68px; display:flex; align-items:center; justify-content:space-between; padding:0 max(24px,calc((100vw - 1180px)/2)); border-bottom:1px solid var(--line); background:rgba(9,15,23,.94); position:sticky; top:0; z-index:10; backdrop-filter:blur(12px); }
.brand { font-size:18px; font-weight:750; color:var(--text); text-decoration:none; }
nav { display:flex; align-items:center; gap:18px; } nav a,.link { color:var(--muted); text-decoration:none; background:none; border:0; padding:0; font:inherit; cursor:pointer; } nav a:hover,.link:hover { color:var(--accent); }
.menu-toggle,.menu-button { display:none; }
main { max-width:1180px; margin:0 auto; padding:38px 24px 80px; }
h1 { font-size:32px; letter-spacing:-.03em; margin:0 0 4px; } h2 { margin:28px 0 12px; font-size:20px; } .card h2:first-child { margin-top:0; }
.muted { color:var(--muted); }.nowrap { white-space:nowrap; }.page-head { display:flex; justify-content:space-between; align-items:end; margin-bottom:20px; }
.card { background:rgba(18,27,38,.92); border:1px solid var(--line); border-radius:14px; padding:22px; margin:18px 0; box-shadow:0 14px 40px rgba(0,0,0,.16); overflow:auto; }.narrow { max-width:420px; margin:10vh auto; }
.grid { display:grid; gap:20px; }.grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.stack { display:grid; gap:16px; }.filter-form { display:grid; grid-template-columns:1.2fr 2fr auto; gap:14px; align-items:end; }
label { display:grid; gap:6px; color:var(--muted); font-size:13px; } label.checkbox { display:flex; align-items:center; padding-bottom:11px; }
input,select { width:100%; border:1px solid #34455a; border-radius:8px; background:#0b131d; color:var(--text); padding:10px 12px; font:inherit; } input.compact { width:150px; } input:focus,select:focus { outline:2px solid color-mix(in srgb,var(--accent) 45%,transparent); border-color:var(--accent); }
button { border:0; border-radius:8px; background:var(--accent); color:#052117; font-weight:700; padding:10px 16px; cursor:pointer; white-space:nowrap; } button.secondary { background:#263548; color:var(--text); } button.danger { background:#49242d; color:#ffbdc4; }
.button-link { display:inline-flex; min-height:42px; align-items:center; justify-content:center; border-radius:8px; background:var(--accent); color:#052117; font-weight:700; padding:10px 16px; text-decoration:none; white-space:nowrap; }.button-link.secondary { background:#263548; color:var(--text); }
.search-form { display:grid; grid-template-columns:minmax(220px,1fr) auto auto; gap:10px; align-items:end; max-width:680px; margin:18px 0; }
.show-search-form { grid-template-columns:minmax(220px,1fr) minmax(150px,.5fr) auto auto; max-width:850px; }
.test-action { display:flex; align-items:center; gap:12px; margin-top:16px; }
.recipient-form { grid-template-columns:1fr 1.7fr 1.5fr auto; }
table { width:100%; border-collapse:collapse; } th { text-align:left; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.07em; } td,th { padding:11px 10px; border-bottom:1px solid var(--line); vertical-align:top; }.actions { display:flex; gap:8px; justify-content:end; }.actions form { display:flex; gap:6px; }
.status { display:inline-block; padding:3px 8px; border-radius:99px; background:#253244; font-size:12px; }.status.ok,.status.sent,.status.available { background:#123b31; color:#7df0c7; }.status.error { background:#47212b; color:#ffabb5; }.status.unavailable { background:#3d3420; color:#ffd786; }.flash { padding:12px 16px; border-radius:9px; margin-bottom:16px; background:#263548; }.flash.success { background:#123b31; }.flash.error,.error-text { color:#ffabb5; background:#47212b; }
code { color:#b6ead7; }

@media(max-width:760px){
  body { font-size:15px; }
  header { min-height:58px; padding:10px 14px; align-items:center; flex-wrap:wrap; }
  .brand { font-size:17px; }
  .menu-button { display:block; border:1px solid var(--line); border-radius:8px; color:var(--text); background:#172333; padding:7px 12px; font-weight:700; cursor:pointer; }
  .menu-toggle:focus-visible + .menu-button { outline:2px solid var(--accent); outline-offset:2px; }
  header nav { display:none; width:100%; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding-top:10px; }
  .menu-toggle:checked ~ nav { display:grid; }
  header nav a,header nav .link { display:flex; min-height:44px; align-items:center; justify-content:center; padding:8px 10px; border-radius:8px; background:#172333; color:var(--text); }
  header nav form { margin:0; }
  header nav form .link { width:100%; }
  main { padding:22px 12px 56px; overflow:hidden; }
  h1 { font-size:27px; line-height:1.15; }
  h2 { font-size:19px; margin-top:24px; }
  .grid.two,.filter-form,.recipient-form,.search-form,.show-search-form { grid-template-columns:1fr; }
  .page-head { display:block; }
  .page-head .status { margin-top:12px; }
  .card { padding:15px; margin:14px 0; border-radius:12px; overflow:visible; }
  input,select { min-height:44px; font-size:16px; }
  input.compact { width:100%; }
  button { min-height:44px; padding:10px 14px; }
  .stack button,.filter-form > button,.recipient-form > button,.search-form > button,.search-form > .button-link { width:100%; }
  .test-action { align-items:stretch; flex-direction:column; }

  table.mobile-cards,table.mobile-cards tbody { display:block; width:100%; }
  table.mobile-cards thead { display:none; }
  table.mobile-cards tr { display:block; padding:10px 0; border-bottom:1px solid var(--line); }
  table.mobile-cards tr:last-child { border-bottom:0; }
  table.mobile-cards td { display:grid; grid-template-columns:minmax(88px,34%) minmax(0,1fr); gap:10px; padding:6px 0; border:0; min-width:0; white-space:normal; overflow-wrap:anywhere; }
  table.mobile-cards td::before { content:attr(data-label); color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
  table.mobile-cards td.actions { display:flex; justify-content:stretch; flex-wrap:wrap; gap:8px; padding-top:10px; }
  table.mobile-cards td.actions::before { display:none; }
  table.mobile-cards td.actions form { flex:1 1 auto; }
  table.mobile-cards td.actions button { width:100%; }
  table.mobile-cards td[data-label="Action"] form { width:100%; }
  table.mobile-cards td[data-label="Action"] button { width:100%; }
  table.mobile-cards .error-text { display:block; padding:10px; }
  table.mobile-cards .error-text::before { display:none; }
}
.show-link { color:var(--text); text-decoration-color:#52715f; text-underline-offset:3px; }.show-link:hover { color:var(--accent); }
.show-row,.filter-row { scroll-margin-top:84px; }.show-row:target,.filter-row:target { outline:2px solid color-mix(in srgb,var(--accent) 55%,transparent); outline-offset:-2px; background:rgba(94,225,178,.05); }