:root{
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  color:#111111;background:#ffffff;font-size:16px;font-synthesis:none;
  --line:#dddddd;--muted:#626262;--ink:#111111;--accent:#0042a9
}
*{box-sizing:border-box}
body{margin:0}
a{color:inherit;text-decoration:none}
button,a{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #0042a9;outline-offset:3px}

.shell{max-width:1100px;min-height:100svh;margin:auto;padding:34px 44px 22px}

.skip{position:fixed;top:-100px;left:20px;z-index:5;background:white;padding:15px}
.skip:focus{top:12px}

.masthead{display:flex;align-items:center;justify-content:space-between;gap:26px;min-height:50px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.masthead .brand{font-weight:550;letter-spacing:-.02em}

.button-secondary{background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:3px;padding:10px 16px;min-height:40px;font:inherit;cursor:pointer}
.button-secondary:hover{background:#f5f5f5}

.flash-list{padding-top:18px}
.flash{border-left:3px solid var(--accent);padding:12px 16px;margin-bottom:10px;background:#f7f7f7;font-size:.9375rem}

.intro{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:36px 0 30px}
.intro .button-secondary{white-space:nowrap}
.eyebrow{font-size:.8125rem;letter-spacing:.18em;font-weight:550;margin:0 0 14px;color:var(--muted);text-transform:uppercase}
h1{font-size:clamp(2.2rem,5.5vw,3.4rem);font-weight:500;letter-spacing:-.05em;line-height:1.06;margin:0}
h1>span{color:var(--accent)}

.add-panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:30px}
.card{border:1px solid var(--line);border-radius:3px;padding:22px;display:flex;flex-direction:column;gap:10px}
.card-label{font-size:.75rem;letter-spacing:.06em;color:var(--muted);text-transform:uppercase;margin:0}
.card label{font-size:.8125rem;color:var(--muted);margin-top:6px}
.card input[type="text"],.card input[type="url"],.card input[type="password"],.card input[type="date"]{
  border:1px solid var(--line);border-radius:3px;padding:10px 12px;font:inherit;min-height:44px
}
.card.creative{background:var(--ink);color:#fff;border-left:3px solid var(--accent)}
.card.creative .card-label,.card.creative label{color:#c9c9c9}
.card.creative input{background:#fff;color:var(--ink)}

.drop-zone{border:1px dashed var(--line);transition:border-color .16s,background .16s}
.drop-zone.dragover{border-color:var(--accent);background:#f7f7f7}
.drop-hint{margin:0;font-size:.9375rem;color:var(--muted)}
.drop-filename{margin:0;font-size:.875rem;font-weight:550}
.link-button{background:none;border:0;padding:0;color:var(--accent);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font:inherit}

button{background:var(--ink);color:#fff;border:0;border-radius:3px;padding:14px 18px;min-height:48px;font:inherit;cursor:pointer;margin-top:6px}
.card.creative button{background:var(--accent)}

.wide-link{display:flex;align-items:center;gap:20px;border-bottom:1px solid var(--line);padding:20px 4px;min-height:80px;transition:background .16s,padding .16s}
.wide-link:hover{background:#f5f5f5;padding-left:12px;padding-right:12px}
.reorder-item{flex-wrap:wrap}
.link-index{font-size:.75rem;font-variant-numeric:tabular-nums;color:var(--muted);min-width:17px}
.link-content{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}
.link-content strong{font-size:1.1875rem;font-weight:550;letter-spacing:-.02em;line-height:1.25;overflow-wrap:anywhere}
.link-content>span{font-size:.8125rem;color:var(--muted);line-height:1.35}
.arrow{font-size:1.4rem;font-weight:400;color:var(--muted)}

.item-edit-button{background:transparent;color:var(--ink);border:1px solid var(--line);min-height:36px;padding:7px 12px;margin:0}
.item-edit-button:hover{background:#f5f5f5}
.inline-edit{flex:0 0 100%;margin-top:2px;background:#fff}
.inline-edit[hidden]{display:none}
.inline-edit-actions{display:flex;align-items:center;gap:10px;margin-top:6px}
.inline-edit-actions button{margin:0}
.delete-button{background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:3px;min-height:36px;min-width:36px;padding:0;margin:0;font-size:1.25rem;line-height:1;cursor:pointer}
.delete-button:hover{background:#f5f5f5;color:#b62929;border-color:#b62929}

.drag-handle{cursor:grab;color:var(--muted);font-size:1.1rem;line-height:1;padding:4px;user-select:none;touch-action:none}
.drag-handle:active{cursor:grabbing}
.reorder-item.dragging{opacity:.4}
.reorder-item.drag-over{border-top:2px solid var(--accent)}

.empty-state{color:var(--muted);padding:30px 4px}

.login-wrap{max-width:360px;margin:60px auto 0;padding:0 4px}
.login-form{display:flex;flex-direction:column;gap:10px;margin-top:24px}
.login-form label{font-size:.8125rem;color:var(--muted)}
.login-form input{border:1px solid var(--line);border-radius:3px;padding:12px 14px;font:inherit;min-height:48px}

footer{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--line);margin-top:40px;padding-top:18px;line-height:1.4}
.footer-project{font-size:.75rem;letter-spacing:.08em;color:var(--muted)}

@media(max-width:760px){
  .shell{padding:25px 22px 20px}
  .add-panel{grid-template-columns:1fr}
  .intro{flex-direction:column;align-items:flex-start;gap:14px;padding:28px 0 24px}
}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important}
}

@media(prefers-contrast:more){
  :root{--line:#777;--muted:#333}
}