:root { color-scheme: light; --ink:#17202a; --muted:#6b7280; --line:#e5e7eb; --paper:#fff; --bg:#f5f7fa; --accent:#0f766e; --accent-dark:#115e59; }
* { box-sizing:border-box; } body { margin:0; background:var(--bg); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
.shell { max-width:940px; margin:0 auto; padding:54px 24px 36px; } header { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:28px; } h1,h2,p { margin:0; } h1 { font-size:36px; letter-spacing:0; } h2 { font-size:19px; } .eyebrow { color:var(--accent); font-size:12px; font-weight:800; letter-spacing:1.5px; margin-bottom:9px; } .sub,.panel-title p,.list-head p { color:var(--muted); margin-top:7px; font-size:14px; } .count { text-align:right; color:var(--muted); } .count strong { display:block; color:var(--ink); font-size:31px; line-height:1; } .count span { font-size:12px; }
.panel { background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:24px; margin-bottom:18px; box-shadow:0 3px 14px rgba(15,23,42,.03); } label { display:block; color:#374151; font-size:13px; font-weight:700; margin-top:21px; } input { width:100%; border:1px solid #d1d5db; border-radius:5px; padding:12px 13px; margin-top:8px; font:inherit; font-size:14px; outline:none; background:#fff; } input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(15,118,110,.12); } .row { display:grid; grid-template-columns:1fr 1fr; gap:18px; } .hint { color:#9ca3af; font-weight:400; } .form-actions { display:flex; align-items:center; gap:14px; margin-top:22px; } button { border:0; border-radius:5px; cursor:pointer; font:inherit; font-size:13px; font-weight:700; } .primary { color:#fff; background:var(--accent); padding:11px 18px; } .primary:hover { background:var(--accent-dark); } .ghost { color:#374151; background:#f3f4f6; padding:9px 14px; } #form-status { font-size:13px; color:var(--accent-dark); } #form-status a { color:inherit; font-weight:700; }
.list-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; } .link-item { display:flex; align-items:center; justify-content:space-between; gap:16px; border-top:1px solid var(--line); padding:17px 0; } .link-main { min-width:0; flex:1; } .short { display:flex; align-items:center; gap:8px; } .short a { color:var(--accent-dark); font-size:15px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .copy { color:var(--accent); background:#ecfdf5; padding:5px 8px; flex:none; } .target { color:#4b5563; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:6px; font-size:13px; } .meta { color:#9ca3af; font-size:12px; margin-top:7px; } .expired { color:#b91c1c; font-weight:700; } .delete { color:#b91c1c; background:#fff1f2; padding:7px 10px; flex:none; } .empty { color:var(--muted); text-align:center; padding:30px 10px; font-size:14px; } footer { text-align:center; color:#9ca3af; font-size:12px; margin-top:26px; }
@media (max-width:620px) { .shell { padding:34px 15px; } header { align-items:start; } h1 { font-size:30px; } .row { grid-template-columns:1fr; gap:0; } .panel { padding:18px; } .link-item { align-items:start; } .short a { max-width:calc(100vw - 150px); } }