:root { 
  --bg: #131c2a; 
  --card: #1d2740; 
  --accent: #73b7ff; 
  --muted: #b7c6db; 
  --text: #f1f5ff; 
  --border: #2b3650; 
  --input: #0f1726;
} 
* { box-sizing: border-box; } 
body { font-family: 'Inter', 'Segoe UI', sans-serif; margin:0; background:var(--bg); color:var(--text); } 
.wrap { max-width: 1000px; margin: 0 auto; padding: 28px 20px 40px; } 
header { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; } 
h1 { margin:0; font-size: 22px; letter-spacing: 0.2px; } 
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  background: radial-gradient(circle at 30% 30%, rgba(115,183,255,0.25), rgba(115,183,255,0.12));
  color: var(--accent);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  border: 1px solid rgba(115,183,255,0.3);
  box-shadow: 0 8px 18px rgba(0,0,0,0.25);
}
.card { background: var(--card); border:1px solid var(--border); border-radius: 12px; padding:16px 18px; margin-bottom:12px; box-shadow:0 8px 30px rgba(0,0,0,0.25); } 
.card a { color: var(--accent); text-decoration: none; } 
.card a:hover { text-decoration: underline; } 
.meta { color: var(--muted); font-size:12px; margin-top:4px; } 
.search { width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:var(--input); color:var(--text); margin: 10px 0 16px; } 
.empty { color: var(--muted); text-align:center; padding:30px 0; } 

.wrap-page { max-width: 1000px; margin:0 auto; padding:24px 18px 36px; } 
h1.title { margin:0 0 12px; font-size:24px; } 
section.block { margin-bottom: 18px; background: var(--card); border:1px solid var(--border); border-radius:12px; padding:14px 14px 10px; box-shadow:0 8px 30px rgba(0,0,0,0.25);} 
section.block h2 { margin:0 0 10px; font-size:16px; letter-spacing:0.1px; } 
textarea.content { width: 100%; min-height: 160px; padding:10px; border-radius:10px; border:1px solid var(--border); background:var(--input); color:var(--text); resize:vertical; font-family:'Segoe UI',sans-serif; font-size:14px; } 
label { display:block; margin:8px 0 4px; font-weight:600; color:var(--muted); } 
.grid { display:grid; gap:12px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } 
button.copy { margin-top:8px; padding:8px 12px; border:none; border-radius:10px; background:var(--accent); color:#0c1220; font-weight:600; cursor:pointer; } 
button.copy:hover { filter:brightness(1.05); } 
.meta-line { color: var(--muted); margin-bottom:12px; } 

.title-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.menu-btn {
  background: var(--accent);
  color: #0c1220;
  border: none;
  border-radius: 10px;
  padding: 8px 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(99,166,230,0.35);
  border: 1px solid rgba(255,255,255,0.10);
  transition: transform 0.1s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.menu-btn:hover { filter: brightness(1.05); box-shadow:0 12px 28px rgba(100,181,255,0.45); }
.menu-btn:active { transform: translateY(1px); }