/* The two tools that work without an account: the link shortener and the QR code maker. They sit inside the public header and footer. */
.tl{max-width:680px;margin:0 auto;padding:28px 20px 24px;display:grid;gap:18px}
.tl.tl-wide{max-width:1040px}
.tl-head{display:grid;gap:6px;text-align:center;padding:8px 0 4px}
.tl-head h1{font-size:clamp(1.9rem,5vw,2.6rem);font-weight:800;letter-spacing:-.03em;line-height:1.05}
.tl-head p{color:var(--ink-2);font-size:1.05rem}
.tl-card{display:grid;gap:14px;padding:22px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}
.tl-form label{font-size:.88rem}
.tl-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}
.tl .tl-row input{min-height:52px;font-size:1rem;border-radius:12px}
.tl .btn{min-height:44px;border-radius:12px;padding:0 20px}
.tl-row .btn{min-height:52px;padding:0 26px;font-size:1rem}
.tl .hp{position:absolute!important;left:-9999px}

/* the link that was just made */
.tl-made{border:2px solid var(--violet);box-shadow:0 0 0 5px var(--violet-soft)}
.tl-ok{display:inline-flex;align-items:center;gap:8px;font-weight:650;color:#12805C}
.tl-ok svg{width:18px;height:18px;stroke-width:2.6}
:root[data-theme=dark] .tl-ok{color:var(--green)}
.tl-link{display:flex;align-items:center;gap:12px;padding:10px 10px 10px 16px;border-radius:14px;background:var(--surface-2);min-width:0}
.tl-link a{flex:1;min-width:0;font-size:1.35rem;font-weight:700;letter-spacing:-.01em;overflow-wrap:anywhere;color:var(--ink)}
.tl-to{font-size:.9rem;color:var(--ink-2);overflow-wrap:anywhere}
.tl-to span{color:var(--ink);font-weight:500}
.tl-facts{margin:0;padding-left:1.1rem;display:grid;gap:4px;font-size:.92rem;color:var(--ink-2)}
.tl-cta{display:grid;gap:8px;padding:16px;border-radius:14px;background:var(--violet-soft)}
.tl-cta b{font-size:1.02rem}
.tl-cta p{font-size:.92rem;color:var(--ink-2)}
.tl-btns{display:flex;gap:8px;flex-wrap:wrap}
.tl-small{font-size:.84rem;color:var(--ink-2)}

/* this browser's links */
.tl-mine h2{font-size:1rem}
.tl-item{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line-2);min-width:0}
.tl-item span{flex:1;min-width:0;display:grid}
.tl-item small{font-size:.82rem;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-item em{flex:none;font-style:normal;font-size:.8rem;color:var(--ink-2)}

/* what an account adds */
.tl-why{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding-top:6px}
.tl-why>div{display:grid;gap:4px;align-content:start}
.tl-why svg{width:20px;height:20px;color:var(--violet);margin-bottom:4px}
.tl-why b{font-weight:650}
.tl-why span{font-size:.88rem;color:var(--ink-2)}
.tl-why a{font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* QR maker */
.tl-qr{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,380px);gap:18px;align-items:start}
.tl-seg{display:grid;grid-template-columns:1fr 1fr;padding:3px;border-radius:12px;background:var(--surface-2)}
.tl-seg label{display:block;position:relative}
.tl-seg input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.tl-seg span{display:grid;place-items:center;min-height:42px;border-radius:9px;font-weight:600;color:var(--ink-2)}
.tl-seg input:checked+span{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(24,26,43,.14)}
.tl-seg input:focus-visible+span{outline:2px solid var(--violet);outline-offset:1px}
.tl-looks{border:0;padding:0;margin:0;display:grid;gap:8px}
.tl-looks legend{font-size:.88rem;font-weight:600;color:var(--ink-2);padding:0;margin-bottom:6px}
#gq-looks{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
#gq-looks label{display:block;position:relative}
#gq-looks input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
#gq-looks span{display:grid;gap:4px;padding:6px;border:1px solid var(--line);border-radius:12px;background:var(--surface);text-align:center}
#gq-looks i{display:block;aspect-ratio:1;border-radius:6px;overflow:hidden}
#gq-looks i svg{display:block;width:100%;height:100%}
#gq-looks b{font-size:.72rem;font-weight:600;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#gq-looks input:checked+span{border:2px solid var(--violet);padding:5px}
#gq-looks input:focus-visible+span{outline:2px solid var(--violet);outline-offset:2px}
.tl-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tl-two input[type=color]{width:100%;height:44px}
.tl-out{position:sticky;top:16px}
.tl-code{width:min(260px,100%);aspect-ratio:1;margin:0 auto;padding:12px;border-radius:16px;background:#fff;border:1px solid var(--line)}
.tl-code svg{display:block;width:100%;height:100%}
.tl-code.empty{opacity:.25}
.tl-out .tl-btns{justify-content:center}
.tl-out .tl-small{text-align:center}
#gq-warn:empty{display:none}
#gq-warn{color:#8A5A0B;font-weight:600}
:root[data-theme=dark] #gq-warn{color:#F2C879}

@media (max-width:820px){
  .tl{padding:16px 16px 20px}
  .tl-card{padding:16px}
  .tl-row{grid-template-columns:minmax(0,1fr)}
  .tl .tl-row input,.tl-form input,.tl-form select,.tl-form textarea{font-size:16px!important}
  .tl-link{flex-direction:column;align-items:stretch;padding:14px}
  .tl-link a{font-size:1.2rem;text-align:center}
  .tl .btn{min-height:48px}
  .tl-btns .btn{flex:1 1 100%}
  .tl-why{grid-template-columns:minmax(0,1fr)}
  .tl-qr{grid-template-columns:minmax(0,1fr)}
  .tl-out{position:static;order:-1}
  #gq-looks{grid-template-columns:repeat(3,minmax(0,1fr))}
}