/* The Sproutlink editor in TwoReels' light warm glass (13 Nov). glass.css gives the fonts, the room, the material, .btn, .chip,
   .switch and .rise; this file is the editor's own layout. */
:root { --panel: rgba(255,255,255,.55); --field: rgba(255,255,255,.75); --good: #1c7a3e; --bad: #c7372e; --mu2: rgba(14,26,56,.42); }
.mono { font-family: var(--mono); }

/* the bar on top (a floating glass pill) */
.top { position: sticky; top: 12px; z-index: 20; display: flex; align-items: center; gap: 10px; max-width: 1180px; margin: 12px auto 0; padding: 8px 8px 8px 10px; border-radius: 999px; }
.top .sp { flex: 1; }
.tabs { display: flex; gap: 4px; margin-left: 6px; }
.tabs button { height: 38px; padding: 0 15px; border-radius: 999px; font: 500 14px/1 var(--ui); color: var(--text); transition: background .2s, color .2s; }
.tabs button:hover { color: var(--ink); background: rgba(255,255,255,.55); }
.tabs button.on { color: #fff; background: var(--navy); }
.top .chip { height: 34px; padding: 0 12px; font-size: 12.5px; }
.top .chip.url b { color: var(--ink); font-weight: 650; }
.top .chip.pro { background: var(--accent); color: #fff; box-shadow: none; }
.top .lang { height: 36px; align-items: center; }
.top .lang button { height: 28px; }
.saved { font: 650 12.5px/1 var(--ui); color: var(--green-ink); opacity: 0; transform: translateY(-3px); transition: all .25s var(--spring); white-space: nowrap; }
.saved.on { opacity: 1; transform: none; }

/* layout */
.wrap2 { position: relative; z-index: 1; display: grid; grid-template-columns: 210px minmax(0, 600px) 400px; gap: 26px; justify-content: center; padding: 22px 20px 80px; }
.col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.phone { position: sticky; top: 86px; align-self: start; width: 400px; display: flex; flex-direction: column; align-items: center; }
.phone .frame { width: 390px; height: 780px; border-radius: 48px; padding: 10px; background: #0a1328; box-shadow: 0 40px 70px -30px rgba(5,10,24,.75), inset 0 0 0 1.5px rgba(255,255,255,.12); position: relative; }
.phone .frame::before { content: ""; position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 108px; height: 30px; border-radius: 20px; background: #0b0908; z-index: 2; }
.phone iframe { width: 100%; height: 100%; border: 0; border-radius: 39px; background: var(--navy); }
.phone .pbar { display: flex; align-items: center; justify-content: space-between; width: 390px; margin-bottom: 12px; }
.phone .open { margin-top: 14px; }

/* cards = glass panels */
.card { padding: 24px; }
.card h2 { font-size: 19px; letter-spacing: -.015em; }
.card .sub { margin: 4px 0 18px; color: var(--text); font-size: 14px; }
.row { display: flex; gap: 12px; align-items: center; }
.grow { flex: 1; min-width: 0; }
label.f { display: block; font: 600 12.5px/1.2 var(--ui); color: var(--text); margin: 0 0 7px; }
.in { width: 100%; padding: 12px 14px; border-radius: 14px; background: var(--field); border: 0; box-shadow: inset 0 0 0 1px rgba(14,26,56,.1); outline: 0; transition: box-shadow .15s, background .15s; }
.in:focus { background: #fff; box-shadow: inset 0 0 0 1.5px rgba(var(--accent-rgb),.6); }
textarea.in { resize: vertical; min-height: 76px; line-height: 1.45; }
.count { float: right; font-weight: 500; color: var(--mu2); }
.ibtn { width: 36px; height: 36px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: var(--text); }
.ibtn:hover { background: rgba(255,255,255,.7); color: var(--ink); }
.linkbtn { font-size: 13px; color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; padding: 12px 18px; border-radius: 999px; background: var(--navy); color: #fff; font: 600 14px/1 var(--ui); transition: all .25s var(--spring); z-index: 50; pointer-events: none; box-shadow: 0 16px 30px -12px rgba(14,26,56,.7); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* profile */
.avatar { width: 84px; height: 84px; border-radius: 50%; background: rgba(255,255,255,.7); box-shadow: inset 0 0 0 1.5px rgba(14,26,56,.14); display: flex; align-items: center; justify-content: center; overflow: hidden; flex: none; color: var(--text); font-size: 12px; text-align: center; cursor: pointer; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* the reel card */
.spotcard { background: linear-gradient(160deg, rgba(255,255,255,.7), rgba(255,232,224,.5)); }
.live { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; background: rgba(var(--accent-rgb),.14); font: 650 12px/1 var(--ui); color: var(--accent-2); }
.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.2); }
.spotpic { width: 128px; aspect-ratio: 16/9; border-radius: 12px; background: rgba(255,255,255,.7); box-shadow: inset 0 0 0 1.5px rgba(14,26,56,.12); display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--text); font-size: 12px; flex: none; cursor: pointer; text-align: center; }
.spotpic img { width: 100%; height: 100%; object-fit: cover; }
.seg { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.6); box-shadow: inset 0 0 0 1px rgba(255,255,255,.85); }
.seg button { padding: 8px 12px; border-radius: 999px; font: 550 13px/1 var(--ui); color: var(--text); }
.seg button.on { background: var(--navy); color: #fff; }

/* links */
.add { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.add .in { flex: 1; min-width: 160px; }
.quick { display: flex; flex-wrap: wrap; gap: 7px; margin: -2px 0 16px; }
.quick button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.62); box-shadow: inset 0 0 0 1px rgba(255,255,255,.85); color: var(--text); font: 550 12.5px/1 var(--ui); transition: all .15s; }
.quick button:hover { background: #fff; color: var(--ink); }
.links { display: flex; flex-direction: column; gap: 10px; }
.lrow { display: flex; gap: 10px; align-items: center; padding: 10px 12px 10px 8px; border-radius: 18px; background: rgba(255,255,255,.62); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 10px 20px -16px rgba(14,26,56,.55); }
.lrow.drag { opacity: .45; } .lrow.off .fields { opacity: .45; }
.grip { cursor: grab; color: var(--mu2); padding: 8px 2px; user-select: none; font-size: 15px; line-height: 1; }
.lic { width: 40px; height: 40px; flex: none; border-radius: 12px; background: #fff; display: flex; align-items: center; justify-content: center; color: var(--accent-2); box-shadow: 0 6px 14px -8px rgba(14,26,56,.55); }
.fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fields input { width: 100%; background: transparent; border: 0; outline: 0; padding: 4px 6px; border-radius: 8px; }
.fields input:focus { background: #fff; }
.fields .t { font-weight: 650; }
.fields .u { font-size: 13px; color: var(--text); }
.lrow .switch { transform: scale(.82); }
.empty { padding: 26px; text-align: center; color: var(--text); border: 1.5px dashed rgba(14,26,56,.15); border-radius: 18px; }

/* socials + styles */
.socials { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sin { display: flex; align-items: center; gap: 9px; padding: 0 12px; border-radius: 14px; background: var(--field); box-shadow: inset 0 0 0 1px rgba(14,26,56,.1); }
.sin svg { flex: none; color: var(--text); }
.sin input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; padding: 12px 0; }
.themes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.th { aspect-ratio: 4/3; border-radius: 18px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 22px 14px 26px; box-shadow: 0 10px 22px -14px rgba(5,10,24,.7); transition: transform .25s var(--spring); }
.th:hover { transform: translateY(-2px); }
.th span { display: block; height: 10px; border-radius: 6px; }
.th.on { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--navy); }
.th .lock { position: absolute; top: 8px; right: 8px; font: 800 10px/1 var(--ui); padding: 4px 7px; border-radius: 999px; background: rgba(14,26,56,.6); color: #ffd66b; }
.th em { position: absolute; left: 12px; bottom: 9px; font: 650 12px/1 var(--ui); font-style: normal; }

/* steps (first-time checklist) */
.steps { background: linear-gradient(160deg, rgba(255,255,255,.72), rgba(226,246,233,.5)); }
.todo { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 9px 18px; }
.todo li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.todo li.ok { color: var(--dim); text-decoration: line-through; text-decoration-color: rgba(14,26,56,.25); }
.todo .tick { width: 22px; height: 22px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1.5px rgba(14,26,56,.2); color: #fff; background: rgba(255,255,255,.6); }
.todo li.ok .tick { background: var(--green); box-shadow: none; }

/* stats */
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.kpi { padding: 16px; border-radius: 18px; background: rgba(255,255,255,.62); box-shadow: inset 0 1px 0 rgba(255,255,255,.9); }
.kpi b { display: block; font: 700 32px/1.05 var(--ui); letter-spacing: -.03em; }
.kpi span { font-size: 12.5px; color: var(--text); }
.delta { display: inline-block; margin-left: 6px; font: 700 11.5px/1 var(--ui); padding: 3px 7px; border-radius: 999px; background: rgba(52,199,89,.2); color: var(--green-ink); }
.delta.neg { background: rgba(214,58,51,.14); color: var(--bad-ink); }
.best { display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: 20px; margin-top: 14px; background: linear-gradient(140deg, var(--hero-1), var(--hero-2)); color: #fff; box-shadow: 0 20px 40px -22px var(--glow); }
.best .big { font: 750 28px/1 var(--ui); letter-spacing: -.02em; }
.chart { width: 100%; height: 170px; display: block; }
.bars { display: flex; flex-direction: column; gap: 9px; }
.bar { display: grid; grid-template-columns: minmax(130px, 46%) 1fr 56px; gap: 12px; align-items: center; font-size: 13.5px; }
.bar .track { display: block; height: 10px; border-radius: 6px; background: rgba(14,26,56,.08); overflow: hidden; }
.bar .fill { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--hero-2), var(--hero-1)); }
.bar .n { text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.bar .nm { display: flex; align-items: center; gap: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.locked { position: relative; }
.locked .veil { position: absolute; inset: 0; border-radius: var(--r); background: rgba(255,246,240,.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 20px; font-weight: 650; }

/* share */
.biglink { display: flex; align-items: center; gap: 10px; padding: 14px 14px 14px 18px; border-radius: 18px; background: rgba(255,255,255,.75); box-shadow: inset 0 0 0 1px #fff; font: 650 17px/1.2 var(--ui); overflow: hidden; }
.biglink span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.steps-ol { margin: 0; padding-left: 20px; color: var(--text); } .steps-ol li { margin: 6px 0; } .steps-ol b { color: var(--ink); }
.qrbox { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.qrbox canvas { width: 180px; height: 180px; border-radius: 18px; background: #fff; padding: 10px; box-shadow: 0 14px 30px -16px rgba(14,26,56,.6); }
.prefix { display: flex; align-items: center; border-radius: 999px; background: rgba(255,255,255,.82); box-shadow: inset 0 0 0 1px #fff, 0 14px 30px -16px rgba(14,26,56,.5); overflow: hidden; }
.prefix span { padding: 0 0 0 18px; color: var(--dim); white-space: nowrap; }
.prefix input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; padding: 15px 16px 15px 1px; font-weight: 650; }

/* pro */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.plan { padding: 22px; border-radius: 22px; background: rgba(255,255,255,.62); box-shadow: inset 0 1px 0 rgba(255,255,255,.9); }
.plan.pro { background: linear-gradient(140deg, var(--hero-1), var(--hero-2)); color: #fff; box-shadow: 0 24px 46px -24px var(--glow); }
.plan h3 { font-size: 16px; }
.plan .price { font: 750 34px/1 var(--ui); letter-spacing: -.03em; margin: 10px 0 2px; }
.plan .price small { font: 500 14px/1 var(--ui); letter-spacing: 0; opacity: .75; }
.plan ul { list-style: none; padding: 0; margin: 14px 0 18px; display: grid; gap: 8px; }
.plan li { padding-left: 24px; position: relative; font-size: 14px; }
.plan li::before { content: "✓"; position: absolute; left: 0; font-weight: 800; color: var(--green-ink); }
.plan.pro li::before { color: #fff; }

/* sign in / claim */
.center { position: relative; z-index: 1; min-height: calc(100vh - 80px); display: flex; align-items: center; justify-content: center; padding: 24px; }
.box { width: 100%; max-width: 460px; padding: 40px 36px; }
.box h1 { font-size: 40px; letter-spacing: -.035em; line-height: 1.05; margin: 0 0 12px; }
.box h1 em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: 0; color: var(--accent-2); }
.box p.lead { color: var(--text); margin: 0 0 24px; font-size: 16px; }
.codein { letter-spacing: .5em; text-align: center; font: 700 26px/1 var(--ui); }
.mob { display: none; gap: 8px; }

@media (max-width: 1280px) { .wrap2 { grid-template-columns: 190px minmax(0, 600px); } .phone { display: none; } }
@media (max-width: 900px) { .wrap2 { grid-template-columns: minmax(0, 640px); padding-bottom: 110px; } .side { position: fixed; z-index: 30; left: 10px; right: 10px; bottom: 10px; top: auto; flex-direction: row; justify-content: space-around; padding: 6px; border-radius: 26px; } .side button { flex-direction: column; gap: 3px; padding: 7px 4px; font-size: 11px; width: auto; flex: 1; } .side-foot { display: none; } }
@media (max-width: 640px) {
  .top { margin: 10px 10px 0; flex-wrap: wrap; border-radius: 26px; } .tabs { order: 3; width: 100%; margin: 0; overflow-x: auto; } .top .chip.url, .saved { display: none; }
  .wrap2 { padding: 16px 12px 70px; } .card { padding: 18px; } .box { padding: 30px 22px; } .box h1 { font-size: 32px; }
  .socials, .todo, .plans { grid-template-columns: 1fr; } .themes { grid-template-columns: repeat(2, 1fr); }
  .kpis { gap: 8px; } .kpi b { font-size: 24px; } .bar { grid-template-columns: minmax(110px, 50%) 1fr 44px; gap: 8px; }
}

/* v4 (13 Nov, "overzichtelijk", like Linktree): a menu on the left, the work in the middle, the phone right */
.side { position: sticky; top: 86px; align-self: start; display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 24px; }
.side button { display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 12px; border-radius: 14px; font: 550 14.5px/1 var(--ui); color: var(--text); transition: background .2s, color .2s; text-align: left; }
.side button:hover { background: rgba(255,255,255,.6); color: var(--ink); }
.side button.on { background: var(--navy); color: #fff; }
.side-foot { margin-top: 10px; padding: 12px 10px 4px; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.side-url { font: 600 12.5px/1.3 var(--mono); color: var(--accent-2); word-break: break-all; }
.head { padding: 4px 4px 2px; }
.head h1 { font-size: 34px; line-height: 1.05; letter-spacing: -.035em; }
.head p { color: rgba(255,248,242,.92); text-shadow: 0 1px 10px rgba(80,30,15,.45); margin-top: 6px; font-size: 14.5px; }
.head h1 { color: #fff; text-shadow: 0 2px 18px rgba(80,30,15,.4); }
.prof { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.pav { width: 52px; height: 52px; flex: none; border-radius: 50%; overflow: hidden; background: #fff; display: grid; place-items: center; font: 700 20px/1 var(--ui); color: var(--text); box-shadow: 0 0 0 3px rgba(255,255,255,.85); }
.pav img { width: 100%; height: 100%; object-fit: cover; }
.prof b { display: block; font: 650 16px/1.25 var(--ui); }
.prof span { display: block; font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.addbtn { width: 100%; height: 54px; font-size: 16px; }
.addpanel { padding: 4px 2px 6px; }
.addpanel .quick { margin: 0 0 16px; }
.spic { width: 46px; height: 46px; flex: none; border-radius: 14px; background: #fff; display: grid; place-items: center; font-size: 22px; box-shadow: 0 8px 18px -10px rgba(14,26,56,.6); }
.spthumb { width: 96px; aspect-ratio: 16/10; flex: none; border-radius: 12px; overflow: hidden; background: #fff; display: grid; place-items: center; font-size: 24px; box-shadow: 0 8px 18px -10px rgba(14,26,56,.6); }
.spthumb img { width: 100%; height: 100%; object-fit: cover; }
.sptitle { display: block; font: 650 16px/1.25 var(--ui); }
.spurl { display: block; font-size: 12.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clk { display: grid; justify-items: center; min-width: 48px; font: 700 15px/1.1 var(--ui); color: var(--ink); font-variant-numeric: tabular-nums; }
.clk small { font: 500 10.5px/1.2 var(--ui); color: var(--dim); }
.spotcard .clk { display: inline; font: 600 12px/1 var(--ui); color: var(--text); min-width: 0; }
.th { aspect-ratio: auto; padding: 0; background: none; box-shadow: none; display: grid; gap: 8px; justify-items: start; }
.th .sw { position: relative; width: 100%; aspect-ratio: 4/3; border-radius: 16px; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 16px 14px; box-shadow: 0 10px 22px -14px rgba(5,10,24,.7); overflow: hidden; }
.th .sw i { display: block; height: 11px; border-radius: 6px; }
.th em { position: static; font: 600 13px/1 var(--ui); color: var(--ink); padding-left: 4px; }
.th.on { box-shadow: none; }
.th.on .sw { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--navy); }
.th .lock { position: absolute; top: 8px; right: 8px; }
.top .chip.url { gap: 7px; }
.th .sw { height: auto; min-height: 92px; }
.ibtn { flex: none; }
.lrow .del { width: 34px; height: 34px; }
svg { flex-shrink: 0; }
@media (max-width: 900px) {
  .side { position: fixed; z-index: 30; left: 10px; right: 10px; bottom: 10px; top: auto; flex-direction: row; justify-content: space-around; padding: 6px; border-radius: 26px; }
  .side button { flex-direction: column; justify-content: center; gap: 4px; padding: 8px 2px; font-size: 11px; flex: 1; text-align: center; }
  .side-foot { display: none; }
  .wrap2 { padding-bottom: 110px; }
  .top .lang { display: none; }
}
.prof b, .sptitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live { white-space: nowrap; }
@media (max-width: 640px) {
  .top { flex-wrap: nowrap; border-radius: 999px; }
  .top .btn.soft.sm { height: 34px; padding: 0 12px; }
  .prof .btn, #spedit { width: 40px; height: 40px; padding: 0; font-size: 0; gap: 0; flex: none; }
  .prof .btn svg, #spedit svg { width: 17px; height: 17px; }
  .spthumb { width: 72px; }
  .head h1 { font-size: 30px; }
  .lrow { gap: 8px; } .lrow .grip { display: none; } .clk { min-width: 38px; }
}

/* the first-time welcome: the form left, your page growing on a phone right */
.wel { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 560px) 330px; gap: 34px; justify-content: center; align-items: center; min-height: calc(100vh - 90px); padding: 24px 20px 40px; }
.wl { max-width: none; padding: 34px 36px 28px; }
.wl h1 { font-size: 38px; }
.wl .eyebrow { display: block; margin-bottom: 12px; }
.wl-bar { display: flex; gap: 6px; margin-bottom: 26px; }
.wl-bar i { flex: 1; height: 5px; border-radius: 5px; background: rgba(14,26,56,.1); transition: background .4s var(--spring); }
.wl-bar i.on { background: var(--accent); } .wl-bar i.done { background: var(--navy); }
.big-av { width: 104px; height: 104px; flex-direction: column; gap: 4px; font-size: 12px; color: var(--accent-2); border: 2px dashed rgba(var(--accent-rgb),.45); box-shadow: none; background: rgba(255,255,255,.7); }
.wl-links { display: grid; gap: 10px; }
.wl-ln { display: grid; grid-template-columns: 28px minmax(0, .8fr) minmax(0, 1.2fr); gap: 8px; align-items: center; }
.wl-ln .n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff; font: 700 12px/1 var(--ui); }
.wl-nav { margin-top: 22px; gap: 10px; align-items: center; }
.wl .quick { margin: 0 0 14px; }
.wl-phone .frame { width: 320px; height: 650px; border-radius: 44px; padding: 9px; background: #0a1328; box-shadow: 0 40px 70px -30px rgba(5,10,24,.75), inset 0 0 0 1.5px rgba(255,255,255,.12); position: relative; }
.wl-phone .frame::before { content: ""; position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 92px; height: 26px; border-radius: 18px; background: #0b0908; z-index: 2; }
.wl-phone iframe { width: 100%; height: 100%; border: 0; border-radius: 36px; background: var(--navy); }
@media (max-width: 960px) { .wel { grid-template-columns: minmax(0, 560px); } .wl-phone { display: none; } }
@media (max-width: 640px) { .wl { padding: 26px 20px 22px; } .wl h1 { font-size: 30px; } .wl-ln { grid-template-columns: 24px minmax(0, 1fr); } .wl-ln .wu { grid-column: 2; } }
.spotpic video, .spthumb video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* v6 (13 Nov): navy 60 / cream 30 / coral 10, editorial titles */
.head h1 { font-family: var(--serif); font-weight: 400; font-size: 46px; letter-spacing: -.015em; color: var(--cream); text-shadow: none; }
.head p { color: var(--on-navy-2); text-shadow: none; }
.box h1 { font-family: var(--serif); font-weight: 400; font-size: 46px; letter-spacing: -.015em; line-height: 1; }
.box h1 em, .wl h1 em { color: var(--coral); }
.wl h1 { font-family: var(--serif); font-weight: 400; font-size: 42px; letter-spacing: -.015em; line-height: 1; }
.card h2 { letter-spacing: -.01em; }
.top { background: var(--cream); }
.side { background: var(--cream); }
.side button.on { background: var(--navy); color: var(--cream); }
.side-url { color: var(--coral-2); }
.spotcard { background: linear-gradient(160deg, #fffaf2, var(--cream)); }
.steps { background: linear-gradient(160deg, #fffaf2, var(--cream)); }
.bar .fill { background: var(--coral); }
.lic { color: var(--coral-2); }
.in, .sin, .fields input:focus { background: #fffdf8; }
.in:focus { background: #fff; box-shadow: inset 0 0 0 1.5px rgba(var(--coral-rgb),.7); }
.kpi, .lrow, .plan, .biglink, .quick button, .seg { background: #fffaf2; }
.seg button.on { background: var(--navy); color: var(--cream); }
.wl-ln .n { background: var(--navy); }
.phone iframe, .wl-phone iframe { background: var(--navy); }
.empty { border-color: rgba(14,26,56,.15); }
.center .box, .wl { box-shadow: 0 40px 80px -40px rgba(0,0,0,.7); }
.top .eyes, .wl .eyes { background: var(--navy); }
.top .eyes i, .wl .eyes i { background: var(--cream); }
.top { color: var(--navy); }
.top .lang { background: rgba(14,26,56,.06); box-shadow: inset 0 0 0 1px rgba(14,26,56,.1); }
.top .lang button { color: var(--dim); }
.top .lang button[aria-pressed="true"] { background: var(--navy); color: var(--cream); }
.top .chip.url { background: #fffaf2; color: var(--text); }

/* sign in + claim (13 Nov, "niet zo geboxd"): open on the hero's ground, the form straight on it, the glass card right */
body.is-auth .top { display: none; }
.auth-bg { position: fixed; inset: 0; z-index: 0; isolation: isolate; }
.auth { position: relative; z-index: 1; min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; padding: 0 56px; gap: 40px; }
.auth-side { display: flex; flex-direction: column; min-height: 100vh; padding: 26px 0 34px; color: var(--cream); }
.auth-top { display: flex; align-items: center; justify-content: space-between; position: fixed; top: 22px; left: 56px; right: 56px; z-index: 3; color: var(--cream); }
.auth-main { margin: auto 0; max-width: 520px; padding-top: 40px; }
.auth-main h1 { font: 300 76px/.98 var(--ui); letter-spacing: -.05em; color: #f8f0e3; margin: 0 0 18px; }
.auth-main .lead { color: rgba(244,236,221,.8); font-size: 16.5px; margin: 0 0 28px; max-width: 440px; }
.auth-main label.f { color: rgba(244,236,221,.7); }
.auth-main .in, .auth .prefix { background: rgba(14,26,56,.38); color: var(--cream); box-shadow: inset 0 0 0 1px rgba(244,236,221,.26); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-radius: 999px; padding: 15px 20px; }
.auth-main .in::placeholder, .auth .prefix input::placeholder { color: rgba(244,236,221,.45); }
.auth-main .in:focus { background: rgba(14,26,56,.5); box-shadow: inset 0 0 0 1.5px var(--coral); }
.auth .prefix { padding: 0; } .auth .prefix span { color: rgba(244,236,221,.55); padding-left: 20px; } .auth .prefix input { color: var(--cream); }
.auth-main .codein { border-radius: 18px; }
.auth-main .btn.big { margin-top: 4px; }
.auth-main .linkbtn { color: rgba(244,236,221,.75); }
.auth-main .msg.bad { color: #ffb4a8; } .auth-main .msg.good { color: #8ee5b3; } .auth-main .msg { color: rgba(244,236,221,.7); }
.auth-main b { color: #fff; }
.auth-fine { font-size: 13px; color: rgba(244,236,221,.55); }
.auth-card { position: relative; right: auto; top: auto; justify-self: end; width: 360px; }
.auth-wel .wel { position: relative; z-index: 1; }
@media (max-width: 960px) { .auth { grid-template-columns: minmax(0, 1fr); padding: 0 22px; } .auth-card { display: none; } .auth-top { left: 22px; right: 22px; } .auth-main h1 { font-size: 52px; } }
/* (13 Nov) thin light titles like the home page, no serif */
.head h1, .box h1, .wl h1 { font-family: var(--ui); font-weight: 300; letter-spacing: -.045em; }
.head h1 { font-size: 44px; }
.box h1 em, .wel h1 em, .wl h1 em { font-family: inherit; font-style: normal; font-weight: inherit; letter-spacing: inherit; }

/* v8 (13 Nov, "doe dat patroon voor alles"): the editor on the hero's ground, in the hero's glass. The bar on top is the
   hero's glass pill menu, the panels smoked glass, rows and fields like the hero card's rows and the sign-in's pills. */
:root { --mu2: rgba(244,236,221,.42); --field: var(--gl-field); --bad: #ff9a8c; }
.top { background: rgba(14,26,56,.34); color: var(--cream); box-shadow: inset 0 0 0 1px var(--gl-line), 0 20px 40px -24px rgba(0,0,0,.6); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
.top .eyes, .wl .eyes { background: var(--cream); }
.top .eyes i, .wl .eyes i { background: var(--navy); }
.top .lang { background: rgba(244,236,221,.08); box-shadow: inset 0 0 0 1px var(--gl-line); }
.top .lang button { color: var(--on-navy-3); }
.top .lang button[aria-pressed="true"] { background: var(--cream); color: var(--navy); }
.top .chip.url { background: rgba(244,236,221,.1); color: var(--text); }
.top .chip.url b { color: var(--ink); }
.side { background: var(--gl); box-shadow: inset 0 0 0 1px var(--gl-line), var(--gl-shadow); -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur); }
.side button:hover { background: rgba(244,236,221,.08); color: var(--ink); }
.side button.on { background: rgba(244,236,221,.15); color: #fff; box-shadow: inset 0 0 0 1px rgba(244,236,221,.14); }
.side button.on svg { color: var(--coral); }
.side-url { color: #ff9a8c; }
.in, .sin { background: var(--gl-field); color: var(--cream); box-shadow: inset 0 0 0 1px rgba(244,236,221,.2); }
.in::placeholder, .sin input::placeholder, .fields input::placeholder, .prefix input::placeholder { color: rgba(244,236,221,.42); }
.in:focus { background: rgba(14,26,56,.55); box-shadow: inset 0 0 0 1.5px var(--coral); }
.fields input:focus { background: rgba(14,26,56,.5); }
.in option { background: var(--navy); color: var(--cream); }
.kpi, .lrow, .plan, .biglink, .quick button, .seg { background: var(--gl-row); box-shadow: inset 0 0 0 1px rgba(244,236,221,.12); }
.lrow { box-shadow: inset 0 0 0 1px rgba(244,236,221,.12), 0 14px 24px -20px rgba(0,0,0,.7); }
.quick button:hover { background: rgba(244,236,221,.16); color: var(--ink); }
.seg button.on { background: var(--cream); color: var(--navy); }
.lic, .spic, .spthumb { background: rgba(14,26,56,.5); color: #ff8f80; box-shadow: inset 0 0 0 1px rgba(244,236,221,.14); }
.pav, .avatar, .spotpic { background: rgba(244,236,221,.08); color: var(--text); box-shadow: inset 0 0 0 1px rgba(244,236,221,.2); }
.pav { box-shadow: 0 0 0 2px rgba(244,236,221,.5); }
.ibtn:hover { background: rgba(244,236,221,.1); color: var(--ink); }
.spotcard { background: linear-gradient(150deg, rgba(255,111,94,.2), rgba(30,44,84,.44) 55%); }
.steps { background: var(--gl); }
.live { background: rgba(255,111,94,.18); color: #ffb1a6; }
.todo li.ok { text-decoration-color: rgba(244,236,221,.3); }
.todo .tick { background: rgba(244,236,221,.06); box-shadow: inset 0 0 0 1.5px rgba(244,236,221,.3); }
.bar .track { background: rgba(244,236,221,.1); }
.best, .plan.pro { background: linear-gradient(140deg, rgba(255,111,94,.34), rgba(30,44,84,.46) 70%); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,111,94,.32), var(--gl-shadow); }
.plan li::before { color: var(--coral); }
.locked .veil { background: rgba(14,26,56,.55); color: var(--cream); }
.empty { border-color: rgba(244,236,221,.2); }
.prefix { background: var(--gl-field); box-shadow: inset 0 0 0 1px rgba(244,236,221,.2); }
.prefix input { color: var(--cream); }
.toast { background: var(--cream); color: var(--navy); }
.th.on .sw { box-shadow: 0 0 0 2px #111f44, 0 0 0 4px var(--coral); }
.wl-bar i { background: rgba(244,236,221,.14); } .wl-bar i.done { background: var(--cream); }
.big-av { background: rgba(244,236,221,.06); color: #ff9a8c; }
.wl-ln .n { background: rgba(244,236,221,.14); color: var(--cream); }
.phone .frame, .wl-phone .frame { background: #070d1f; box-shadow: 0 40px 70px -30px rgba(0,0,0,.75), inset 0 0 0 1.5px rgba(244,236,221,.16); }
.phone iframe, .wl-phone iframe { background: #111f44; }
.center .box, .wl { box-shadow: inset 0 0 0 1px var(--gl-line), 0 40px 80px -40px rgba(0,0,0,.7); }

/* v9 (13 Nov, "2/10, jij moet kijken"): calm and crisp like Linear: the menu without a box, the links as rows in one panel
   (hairlines, no box per row), a quiet "+ Add link", plain icon tiles, medium-weight titles, coral only on what you press. */
.top { background: rgba(12,19,38,.72); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 20px 40px -28px rgba(0,0,0,.8); }
.top .chip.url { background: rgba(255,255,255,.05); }
.side { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 6px 0; }
.side button { color: var(--text); font-weight: 500; }
.side button:hover { background: rgba(255,255,255,.04); color: var(--ink); }
.side button.on { background: rgba(255,255,255,.07); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.side-foot { border-top-color: var(--line); }
.side-url { color: var(--text); }
.head h1 { font: 500 32px/1.1 var(--ui); letter-spacing: -.03em; }
.head p { color: var(--text); }
.card { padding: 22px 24px; }
.card h2 { font: 600 16.5px/1.3 var(--ui); letter-spacing: -.01em; }
.card .sub { color: var(--text); }
.in, .sin, .prefix { background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.in:focus { background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1.5px var(--coral); }
.fields input:focus { background: rgba(255,255,255,.06); }
.addbtn { height: 48px; border-radius: 14px; font-size: 15px; background: rgba(255,255,255,.05); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.addbtn:hover { background: rgba(255,255,255,.08); }
.addbtn svg { color: var(--coral); }
.links { gap: 0; margin-top: 6px; }
.lrow { background: transparent; box-shadow: none; border-radius: 12px; padding: 12px 8px 12px 4px; position: relative; }
.lrow + .lrow::before { content: ""; position: absolute; left: 56px; right: 8px; top: 0; height: 1px; background: var(--line); }
.lrow:hover { background: rgba(255,255,255,.03); }
.lic, .spic, .spthumb { background: rgba(255,255,255,.05); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.pav, .avatar, .spotpic { background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.pav { box-shadow: 0 0 0 1.5px rgba(255,255,255,.3); }
.lrow .del { opacity: 0; transition: opacity .15s; } .lrow:hover .del, .lrow .del:focus-visible { opacity: 1; }
.clk { font-weight: 600; } .clk small { color: var(--dim); }
.spotcard { background: linear-gradient(180deg, rgba(255,111,94,.07), rgba(255,111,94,0) 60%), var(--gl); box-shadow: inset 0 0 0 1px rgba(255,111,94,.22), var(--gl-shadow); }
.live { background: rgba(255,111,94,.12); color: #ff9a8c; }
.kpi, .plan, .biglink, .quick button, .seg { background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.kpi b { font-weight: 500; letter-spacing: -.035em; }
.seg button.on { background: var(--ink); color: #0b1226; }
.best, .plan.pro { background: linear-gradient(180deg, rgba(255,111,94,.1), rgba(255,111,94,0) 60%), rgba(255,255,255,.03); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255,111,94,.36); }
.plan .price { font-weight: 500; letter-spacing: -.035em; }
.todo .tick { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.22); }
.bar .track { background: rgba(255,255,255,.07); }
.locked .veil { background: rgba(8,13,28,.6); }
.toast { background: var(--ink); color: #0b1226; }
.phone .frame, .wl-phone .frame { background: #050914; box-shadow: 0 40px 80px -30px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.12); }
.wl-bar i { background: rgba(255,255,255,.08); } .wl-bar i.done { background: var(--ink); }
.wl-ln .n { background: rgba(255,255,255,.07); }
.center .box, .wl { box-shadow: inset 0 0 0 1px var(--gl-line), var(--gl-shadow); }
@media (max-width: 900px) { .side { background: rgba(12,19,38,.9); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 20px 40px -20px rgba(0,0,0,.8); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); padding: 6px; } }
.fields { gap: 0; } .fields input { padding: 3px 6px; } /* (v9: title and address closer together) */
/* (v9) the live phone stays on a laptop too (1180-1340 px wide: most laptops), a bit smaller; it went away below 1280 */
@media (max-width: 1340px) and (min-width: 1181px) {
  .wrap2 { grid-template-columns: 180px minmax(0, 560px) 340px; gap: 22px; }
  .phone { display: flex; width: 340px; align-items: flex-start; }
  .phone .open { align-self: center; }
  .phone .pbar { width: 340px; }
  .phone .frame { transform: scale(.872); transform-origin: top left; margin-bottom: -100px; }
}
.todo .linkbtn { white-space: nowrap; }

/* v13 (13 Nov, sand 60 / forest 30 / terracotta 10): the editor on sand, light cards with a hairline, forest for what is
   chosen (menu, switches, segments), terracotta for what you press. The sign-in keeps the hero's (now green) glass. */
:root { --mu2: rgba(23,41,29,.42); --field: #fffdf8; --bad: #b8432f; }
.top { background: rgba(251,247,239,.86); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(23,41,29,.1), 0 18px 40px -28px rgba(40,50,30,.4); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
.top .eyes, .wl .eyes { background: var(--forest); } .top .eyes i, .wl .eyes i { background: var(--cream); }
.top .lang { background: rgba(23,41,29,.05); box-shadow: inset 0 0 0 1px var(--line); }
.top .lang button { color: var(--dim); }
.top .lang button[aria-pressed="true"] { background: var(--ink); color: var(--cream); }
.top .chip.url { background: rgba(23,41,29,.05); color: var(--text); } .top .chip.url b { color: var(--ink); }
.side button:hover { background: rgba(23,41,29,.05); color: var(--ink); }
.side button.on { background: rgba(23,41,29,.07); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(23,41,29,.08); }
.side button.on svg { color: var(--coral); }
.side-url { color: var(--text); }
.head h1 { color: var(--ink); }
.in, .sin, .prefix { background: #fffdf8; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(23,41,29,.15); }
.in::placeholder, .sin input::placeholder, .fields input::placeholder, .prefix input::placeholder { color: rgba(23,41,29,.4); }
.in:focus { background: #fff; box-shadow: inset 0 0 0 1.5px var(--coral); }
.fields input:focus { background: #fff; }
.in option { background: #fff; color: var(--ink); }
.prefix input { color: var(--ink); }
.addbtn { background: rgba(23,41,29,.04); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(23,41,29,.13); }
.addbtn:hover { background: rgba(23,41,29,.07); }
.lrow:hover { background: rgba(23,41,29,.03); }
.lic, .spic, .spthumb { background: rgba(23,41,29,.05); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(23,41,29,.08); }
.pav, .avatar, .spotpic { background: rgba(23,41,29,.05); color: var(--text); box-shadow: inset 0 0 0 1px rgba(23,41,29,.14); }
.pav { box-shadow: 0 0 0 1.5px rgba(23,41,29,.18); }
.spotcard { background: linear-gradient(180deg, rgba(210,102,58,.07), rgba(210,102,58,0) 60%), var(--gl); box-shadow: inset 0 0 0 1px rgba(210,102,58,.28), var(--gl-shadow); }
.live { background: rgba(210,102,58,.12); color: var(--coral-2); }
.kpi, .plan, .biglink, .quick button, .seg { background: rgba(23,41,29,.035); box-shadow: inset 0 0 0 1px rgba(23,41,29,.09); }
.quick button:hover { background: rgba(23,41,29,.07); }
.seg button.on { background: var(--forest); color: var(--cream); }
.best, .plan.pro { background: linear-gradient(180deg, rgba(210,102,58,.09), rgba(210,102,58,0) 60%), rgba(255,255,255,.4); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(210,102,58,.4); }
.todo .tick { box-shadow: inset 0 0 0 1.5px rgba(23,41,29,.22); }
.bar .track { background: rgba(23,41,29,.08); }
.locked .veil { background: rgba(251,247,239,.72); color: var(--ink); }
.toast { background: var(--ink); color: var(--cream); }
.th.on .sw { box-shadow: 0 0 0 2px #fbf7ef, 0 0 0 4px var(--coral); }
.wl-bar i { background: rgba(23,41,29,.1); } .wl-bar i.done { background: var(--forest); }
.wl-ln .n { background: rgba(23,41,29,.08); color: var(--ink); }
.big-av { background: rgba(23,41,29,.04); color: var(--coral-2); }
.phone iframe, .wl-phone iframe { background: #1d3a29; }
@media (max-width: 900px) { .side { background: rgba(251,247,239,.94); box-shadow: inset 0 0 0 1px rgba(23,41,29,.1), 0 18px 40px -20px rgba(40,50,30,.45); } }

/* (13 Nov) sign in with a password + code: the Sign in / Create account switch, the password field with Show, the 5 welcome steps */
.auth-main .auth-seg { margin: 0 0 28px; padding: 4px; background: rgba(10,30,18,.36); box-shadow: inset 0 0 0 1px rgba(244,236,221,.2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.auth-main .auth-seg button { padding: 10px 18px; color: rgba(244,236,221,.78); font-weight: 600; }
.auth-main .auth-seg button.on { background: #f4ecdd; color: #17291d; }
.pwrap { position: relative; }
.pwrap .in { padding-right: 88px; }
.pwshow { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); height: 34px; padding: 0 14px; border-radius: 999px; font: 600 13px/1 var(--ui); color: rgba(244,236,221,.82); background: rgba(244,236,221,.08); }
.pwshow:hover { background: rgba(244,236,221,.16); color: #fff; }
.auth-forgot { margin: 10px 0 0; text-align: right; }
.wl-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.wl-top .eyebrow { margin: 0; }
.wl-pfp { width: 132px; height: 132px; margin-top: 6px; }
.wl-looks { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.wl-look { display: grid; gap: 7px; justify-items: center; font: 600 13px/1 var(--ui); color: var(--text); }
.wl-look span { width: 100%; aspect-ratio: 3 / 4; border-radius: 14px; box-shadow: 0 10px 22px -14px rgba(5,10,24,.6); }
.wl-look.on span { box-shadow: 0 0 0 2px #fbf7ef, 0 0 0 4px var(--coral); }
.wl-look.on { color: var(--ink); }
@media (max-width: 640px) { .wl-looks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* (13 Nov, "Toon kan je niet zien"): Chrome's autofill turns the field light, so the cream "Show" vanished: a solid pill now,
   readable on any background, and autofill keeps our own colours */
.pwshow { background: #f4ecdd; color: #17291d; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.pwshow:hover { background: #fff; color: #17291d; }
.auth-main .in:-webkit-autofill, .auth-main .in:-webkit-autofill:hover, .auth-main .in:-webkit-autofill:focus { -webkit-text-fill-color: #f4ecdd; caret-color: #f4ecdd; box-shadow: inset 0 0 0 1px rgba(244,236,221,.26), inset 0 0 0 100px #1d3526; transition: background-color 9999s; }