:root{--bg:#f2f4f7;--surface:#fff;--ink:#16202e;--muted:#6b7686;--line:#dfe3e9;--accent:#2b5cff;--danger:#d23b3b;--r:22px}
@media (prefers-color-scheme:dark){:root{--bg:#10141b;--surface:#1a202a;--ink:#eef1f6;--muted:#8d97a6;--line:#2a3240;--accent:#6f8cff;--danger:#ff6b6b}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:10px}
.wrap{max-width:960px;margin:0 auto;padding:clamp(32px,8vw,88px) 24px 56px}
h1{font-size:clamp(2.2rem,6vw,3.6rem);line-height:1.05;letter-spacing:-.03em;margin:0 0 clamp(32px,6vw,64px);font-weight:700}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:32px 20px}
.app{display:flex;flex-direction:column;align-items:center;gap:12px;text-decoration:none;text-align:center}
.icon{width:88px;height:88px;border-radius:26px;display:grid;place-items:center;font-size:2.2rem;font-weight:700;color:#fff;box-shadow:0 8px 20px -8px rgba(0,0,0,.35);transition:transform .18s ease}
.app:hover .icon,.app:focus-visible .icon{transform:translateY(-4px) scale(1.04)}
.app span{font-weight:600;font-size:.95rem;overflow-wrap:anywhere}
.empty{color:var(--muted);max-width:36ch}
footer{margin-top:72px;font-size:.85rem}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--ink)}
/* Admin */
.bar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:28px;flex-wrap:wrap}
.bar h1{margin:0;font-size:1.8rem}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.panel+.panel{margin-top:16px}
label.f{display:block;font-size:.85rem;color:var(--muted);margin-bottom:6px}
input[type=text],input[type=password],input[type=url]{width:100%;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit}
.row{display:grid;grid-template-columns:44px 1fr 1.4fr auto auto;gap:12px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
.row:first-child{border-top:0}
.row .icon{width:44px;height:44px;border-radius:13px;font-size:1.1rem;box-shadow:none}
.add{display:grid;grid-template-columns:1fr 1.4fr auto;gap:12px;align-items:end}
button{font:inherit;font-weight:600;border:0;border-radius:14px;padding:12px 18px;background:var(--accent);color:#fff;cursor:pointer}
button.ghost{background:transparent;color:var(--muted);border:1px solid var(--line)}
button.del{background:transparent;color:var(--danger);border:1px solid var(--line);padding:10px 14px}
.sw{position:relative;width:48px;height:28px;flex:none}
.sw input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.sw i{position:absolute;inset:0;border-radius:99px;background:var(--line);transition:background .15s}
.sw i::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .15s}
.sw input:checked+i{background:var(--accent)}
.sw input:checked+i::after{transform:translateX(20px)}
.sw input:focus-visible+i{outline:3px solid var(--accent);outline-offset:2px}
.hidden .icon{opacity:.4}
.msg{color:var(--danger);min-height:1.4em;margin:10px 0 0;font-size:.9rem}
.login{max-width:380px;margin:12vh auto 0}
.login h1{font-size:1.8rem;margin-bottom:20px}
@media(max-width:700px){.add{grid-template-columns:1fr}.row{grid-template-columns:44px 1fr auto auto}.row .u{grid-column:1/-1;order:5}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}