:root {
    --green:#047857;
    --green-dark:#065f46;
    --green-pale:#d1fae5;
    --ink:#1e293b;
    --muted:#64748b;
    --paper:#fff;
    --bg:#f5f5f4;
    --line:#e7e5e4;
    --danger:#b91c1c;
    --shadow:0 10px 30px rgba(15,23,42,.08);
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
    margin:0;
    min-height:100vh;
    background:var(--bg);
    color:var(--ink);
    font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
    line-height:1.5;
}
body.modal-open { overflow:hidden; }
a { color:inherit; }
button,input,textarea { font:inherit; }
button { border:0; cursor:pointer; }
.container { width:min(100% - 1.25rem,56rem); margin-inline:auto; }

.hero { background:linear-gradient(145deg,var(--green-dark),#047857); color:#fff; }
.hero-inner { padding:2.2rem 0 2.6rem; }
.compact-hero .hero-inner { padding-bottom:2rem; }
.eyebrow { color:#a7f3d0; font-size:.76rem; font-weight:800; letter-spacing:.09em; }
.hero h1 { margin:.2rem 0 0; font-size:clamp(2.1rem,10vw,3.6rem); line-height:1.05; }
.hero p { max-width:42rem; margin:.7rem 0 0; color:#d1fae5; }
.hero-button,.button {
    display:inline-flex;
    min-height:44px;
    align-items:center;
    justify-content:center;
    border-radius:.9rem;
    background:var(--green);
    color:#fff;
    font-weight:800;
    padding:.75rem 1.15rem;
    text-decoration:none;
}
.hero-button { margin-top:1rem; background:#fff; color:var(--green-dark); }
.back-link { display:block; margin-bottom:1.2rem; color:#d1fae5; font-size:.9rem; font-weight:750; text-decoration:none; }

.card { overflow:hidden; border:1px solid var(--line); border-radius:1.2rem; background:#fff; box-shadow:var(--shadow); }
.trips-grid { display:grid; gap:1rem; padding:1rem 0 2rem; }
.trip-card { display:flex; gap:1rem; padding:1.15rem; color:inherit; text-decoration:none; }
.trip-icon { flex:0 0 auto; font-size:1.8rem; }
.trip-card-content { min-width:0; }
.trip-card h2 { margin:.2rem 0; font-size:1.25rem; }
.trip-card p { margin:.35rem 0; color:var(--muted); }
.trip-date { color:var(--green); font-size:.78rem; font-weight:800; }
.trip-count { display:inline-block; margin-top:.4rem; color:var(--green); font-weight:800; }

.timeline { display:grid; gap:1rem; padding:1rem 0 5.5rem; }
.day-card { border-radius:1.3rem; }
.day-header { display:flex; align-items:flex-start; justify-content:space-between; gap:.8rem; padding:1.1rem 1.1rem .8rem; }
.day-date { color:var(--green); font-size:.78rem; font-weight:850; text-transform:capitalize; }
.story-title { margin:.2rem 0 0; font-size:1.35rem; line-height:1.2; }
.edit-link { flex:0 0 auto; color:var(--green); font-size:.82rem; font-weight:800; text-decoration:none; }
.story-body { padding:.95rem 1.1rem 1.15rem; }
.story-text { color:#475569; white-space:pre-line; line-height:1.7; }

.checkin-strip { display:flex; gap:.55rem; overflow-x:auto; padding:.1rem 1.1rem .8rem; scrollbar-width:none; }
.checkin-strip::-webkit-scrollbar { display:none; }
.checkin-chip { display:flex; flex:0 0 auto; max-width:18rem; align-items:center; gap:.5rem; border:1px solid #a7f3d0; border-radius:999px; background:#ecfdf5; padding:.42rem .7rem .42rem .45rem; }
.checkin-dot { display:grid; width:1.65rem; height:1.65rem; flex:0 0 1.65rem; place-items:center; border-radius:50%; background:var(--green); color:#fff; font-size:.72rem; font-weight:850; }
.checkin-text { min-width:0; display:flex; flex-direction:column; line-height:1.1; }
.checkin-text strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.82rem; }
.checkin-text small { margin-top:.15rem; color:var(--muted); font-size:.7rem; }

.photo-thumb-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
.photo-thumb { position:relative; min-width:0; padding:0; overflow:hidden; background:#e7e5e4; text-align:left; aspect-ratio:1; }
.photo-thumb img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .2s; }
.photo-thumb:active img { transform:scale(.98); }
.photo-thumb span { position:absolute; inset:auto 0 0; padding:.55rem .45rem .35rem; background:linear-gradient(transparent,rgba(0,0,0,.72)); color:#fff; font-size:.68rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.floating-button { position:fixed; right:max(1rem,env(safe-area-inset-right)); bottom:max(1rem,env(safe-area-inset-bottom)); display:grid; width:3.5rem; height:3.5rem; place-items:center; border-radius:50%; background:var(--green); color:#fff; font-size:2rem; font-weight:300; text-decoration:none; box-shadow:0 10px 25px rgba(0,0,0,.25); }
.empty { padding:2rem 1.2rem; text-align:center; }
.empty a { color:var(--green); font-weight:800; }

.site-header { position:sticky; top:0; z-index:20; border-bottom:1px solid var(--line); background:rgba(255,255,255,.96); backdrop-filter:blur(8px); }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem 0; }
.brand-kicker { color:var(--green); font-size:.7rem; font-weight:850; }
.brand-title { margin:0; font-size:1.05rem; }
.header-link { font-size:.84rem; font-weight:800; text-decoration:none; }
.page { padding:1rem 0 6rem; }
.intro { margin-bottom:1rem; }
.pill { display:inline-block; padding:.3rem .7rem; border-radius:999px; background:var(--green-pale); color:var(--green-dark); font-size:.78rem; font-weight:800; }
.intro h2 { margin:.55rem 0 0; font-size:clamp(1.65rem,8vw,2.7rem); line-height:1.1; }
.intro p { margin:.5rem 0 0; color:var(--muted); }
.form-body { display:grid; gap:1.25rem; padding:1rem; }
.field,.field-label { display:block; }
.field-label { margin-bottom:.4rem; font-weight:800; }
input,textarea { width:100%; border:1px solid #cbd5e1; border-radius:.85rem; background:#fff; color:var(--ink); padding:.8rem .9rem; outline:none; }
input:focus,textarea:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(4,120,87,.14); }
textarea { min-height:12rem; resize:vertical; }
.editor-section { padding-top:.15rem; }
.section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; margin-bottom:.65rem; }
.section-heading p { margin:.1rem 0 0; color:var(--muted); font-size:.82rem; }
.small-button { flex:0 0 auto; min-height:38px; border-radius:.75rem; background:#ecfdf5; color:var(--green-dark); font-weight:800; padding:.55rem .75rem; }

.checkin-editor-list { display:grid; gap:.55rem; }
.checkin-row { display:grid; grid-template-columns:auto minmax(0,1fr) 6.2rem auto; gap:.4rem; align-items:center; }
.checkin-row input { min-width:0; padding:.72rem .7rem; }
.drag-handle { color:#94a3b8; font-weight:900; letter-spacing:-.15em; }
.icon-button { width:2.3rem; height:2.3rem; border-radius:50%; background:#fef2f2; color:var(--danger); font-size:1.35rem; }

.upload-box { display:flex; min-height:8.5rem; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; border:2px dashed #cbd5e1; border-radius:1rem; text-align:center; padding:1rem; }
.upload-box:hover { border-color:var(--green); background:#ecfdf5; }
.upload-icon { font-size:1.8rem; }
.upload-help { color:var(--muted); font-size:.78rem; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.photo-count { flex:0 0 auto; color:var(--green); font-size:.8rem; font-weight:850; }
.photo-editor-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; margin-top:.8rem; }
.photo-editor-item { min-width:0; border:1px solid var(--line); border-radius:.9rem; background:#fff; overflow:hidden; box-shadow:0 2px 8px rgba(15,23,42,.05); }
.photo-editor-item.dragging { opacity:.45; }
.photo-editor-item.move-selected { outline:3px solid #34d399; outline-offset:2px; }
.photo-editor-image-wrap { position:relative; aspect-ratio:1; background:#e7e5e4; }
.photo-editor-image-wrap img { width:100%; height:100%; display:block; object-fit:cover; }
.photo-drag-handle { position:absolute; left:.4rem; top:.4rem; display:grid; width:2rem; height:2rem; place-items:center; border-radius:.55rem; background:rgba(15,23,42,.72); color:#fff; font-size:.95rem; touch-action:manipulation; }
.photo-remove { position:absolute; right:.4rem; top:.4rem; display:grid; width:2rem; height:2rem; place-items:center; border-radius:50%; background:rgba(255,255,255,.92); color:var(--danger); font-size:1.25rem; }
.photo-caption-input { border:0; border-top:1px solid var(--line); border-radius:0; padding:.7rem; font-size:.82rem; }
.form-footer { display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding:.9rem 1rem; border-top:1px solid var(--line); background:#fafaf9; }
.sticky-form-footer { position:sticky; bottom:0; z-index:10; padding-bottom:max(.9rem,env(safe-area-inset-bottom)); }
.secondary-button { color:var(--muted); font-weight:800; text-decoration:none; }
.notice { margin-bottom:1rem; padding:.85rem 1rem; border:1px solid; border-radius:1rem; }
.notice-error { border-color:#fecaca; background:#fef2f2; color:#991b1b; }
.notice ul { margin:.2rem 0; padding-left:1.2rem; }

.photo-modal[hidden] { display:none; }
.photo-modal { position:fixed; inset:0; z-index:100; display:grid; place-items:center; background:rgba(2,6,23,.88); padding:1rem; }
.photo-modal-panel { position:relative; width:min(100%,70rem); max-height:calc(100vh - 2rem); display:flex; flex-direction:column; align-items:center; }
.photo-modal img { max-width:100%; max-height:calc(100vh - 7rem); object-fit:contain; border-radius:.5rem; box-shadow:0 20px 60px rgba(0,0,0,.4); }
.photo-modal-close { position:absolute; z-index:2; top:.45rem; right:.45rem; display:grid; width:2.75rem; height:2.75rem; place-items:center; border-radius:50%; background:rgba(255,255,255,.92); color:#111827; font-size:1.65rem; }
.photo-modal-caption { max-width:50rem; padding:.75rem 1rem 0; color:#fff; text-align:center; }

@media (max-width:520px) {
    .checkin-row { grid-template-columns:auto minmax(0,1fr) auto; }
    .checkin-row input[type="time"] { grid-column:2/3; width:7.5rem; }
    .checkin-row .icon-button { grid-column:3; grid-row:1/3; }
    .form-footer .button { flex:1; }
}

@media (min-width:640px) {
    .container { width:min(100% - 2rem,56rem); }
    .hero-inner { padding:3rem 0; }
    .timeline { gap:1.5rem; padding-top:1.5rem; }
    .day-header,.story-body { padding-left:1.5rem; padding-right:1.5rem; }
    .checkin-strip { padding-left:1.5rem; padding-right:1.5rem; }
    .photo-thumb-grid { grid-template-columns:repeat(4,1fr); gap:3px; }
    .trips-grid { grid-template-columns:repeat(2,1fr); padding-top:1.5rem; }
    .page { padding-top:2rem; }
    .form-body { padding:1.5rem; gap:1.5rem; }
    .photo-editor-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .form-footer { padding:1rem 1.5rem; }
}

@media (min-width:900px) {
    .photo-editor-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
    .story-title { font-size:1.6rem; }
}

/* v2.7 - check-in cards, GPS maps and reorder */
.checkin-editor-list { display:grid; gap:1rem; }
.checkin-card { border:1px solid var(--line); border-radius:1rem; background:#fff; overflow:hidden; box-shadow:0 3px 14px rgba(15,23,42,.06); }
.checkin-card.dragging { opacity:.48; }
.checkin-card.move-selected { outline:3px solid #34d399; outline-offset:2px; }
.checkin-card-head { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; gap:.5rem; align-items:center; padding:.7rem .75rem; border-bottom:1px solid var(--line); background:#f8fafc; }
.checkin-card-title { min-width:0; font-size:.9rem; }
.checkin-drag-handle { display:grid; place-items:center; width:2.35rem; height:2.35rem; border:0; border-radius:.65rem; background:#e2e8f0; color:#334155; font-size:1rem; cursor:grab; touch-action:manipulation; }
.checkin-drag-handle:active { cursor:grabbing; }
.checkin-time { width:6.6rem; min-width:0; padding:.55rem .45rem; }
.checkin-location-row { display:grid; grid-template-columns:1fr; gap:.55rem; padding:.75rem; }
.checkin-location { width:100%; min-width:0; }
.gps-button { width:100%; border:0; border-radius:.75rem; padding:.72rem .9rem; background:#065f46; color:#fff; font-weight:800; cursor:pointer; }
.gps-button:disabled { opacity:.55; cursor:wait; }
.checkin-map-shell { position:relative; height:14rem; background:#e2e8f0; }
.checkin-map { width:100%; height:100%; z-index:1; }
.map-fullscreen-button { position:absolute; top:.65rem; right:.65rem; z-index:500; width:2.65rem; height:2.65rem; border:1px solid rgba(15,23,42,.16); border-radius:.7rem; background:rgba(255,255,255,.95); color:#0f172a; font-size:1.25rem; font-weight:900; box-shadow:0 3px 12px rgba(15,23,42,.2); cursor:pointer; }
.gps-status { position:absolute; left:.6rem; right:3.8rem; bottom:.55rem; z-index:500; pointer-events:none; min-height:0; width:max-content; max-width:calc(100% - 4.4rem); padding:.35rem .5rem; border-radius:.55rem; background:rgba(15,23,42,.78); color:#fff; font-size:.72rem; line-height:1.25; }
.gps-status:empty { display:none; }
.gps-status.is-error { background:rgba(153,27,27,.9); }
.checkin-map-shell:fullscreen { width:100vw; height:100vh; background:#111827; }
.checkin-map-shell:fullscreen .map-fullscreen-button { top:max(.8rem, env(safe-area-inset-top)); right:max(.8rem, env(safe-area-inset-right)); }
.checkin-map-shell.map-fallback-fullscreen { position:fixed; inset:0; z-index:9999; width:100vw; height:100dvh; }
body.map-fullscreen-open { overflow:hidden; }

@media (min-width:600px) {
    .checkin-location-row { grid-template-columns:minmax(0,1fr) auto; align-items:center; }
    .gps-button { width:auto; white-space:nowrap; }
    .checkin-map-shell { height:17rem; }
}

/* v2.7.1 Leaflet hotfix: keep map tiles/layers positioned even if CDN CSS is delayed. */
.leaflet-container { overflow:hidden; position:relative; -webkit-tap-highlight-color:transparent; }
.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box { position:absolute; left:0; top:0; }
.leaflet-tile { visibility:hidden; user-select:none; -webkit-user-drag:none; }
.leaflet-tile-loaded { visibility:inherit; }
.leaflet-zoom-animated { transform-origin:0 0; }
.leaflet-map-pane { z-index:400; }
.leaflet-tile-pane { z-index:200; }
.leaflet-overlay-pane { z-index:400; }
.leaflet-shadow-pane { z-index:500; }
.leaflet-marker-pane { z-index:600; }
.leaflet-tooltip-pane { z-index:650; }
.leaflet-popup-pane { z-index:700; }
.leaflet-control { position:relative; z-index:800; pointer-events:auto; }
.leaflet-top, .leaflet-bottom { position:absolute; z-index:1000; pointer-events:none; }
.leaflet-top { top:0; }
.leaflet-right { right:0; }
.leaflet-bottom { bottom:0; }
.leaflet-left { left:0; }
.leaflet-control-zoom { margin:10px; }
.leaflet-control-zoom a { display:block; width:30px; height:30px; line-height:30px; text-align:center; background:#fff; color:#111827; text-decoration:none; }


/* v2.8 - dagkaart met kaart bovenin + gestructureerde check-in invoer */
.day-map { width:100%; height:15rem; background:#e2e8f0; border-radius:1rem 1rem 0 0; z-index:1; }
.checkin-form-body { display:grid; gap:.8rem; padding:.85rem; }
.checkin-fields-grid { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
.checkin-fields-grid .field { gap:.3rem; }
.checkin-fields-grid .span-2 { grid-column:1 / -1; }
.checkin-fields-grid input { width:100%; min-width:0; }
@media (min-width:700px) {
  .day-map { height:19rem; }
  .checkin-fields-grid { grid-template-columns:1.2fr 1.2fr .8fr; }
  .checkin-fields-grid .span-2 { grid-column:span 2; }
}

/* v2.9 - dag bewerken: overzichtskaart + aparte check-in invoer */
.is-hidden { display:none !important; }
.day-editor-view[hidden], .checkin-screen[hidden] { display:none !important; }
.day-editor-map-shell { position:relative; height:15rem; background:#e2e8f0; border-radius:1rem 1rem 0 0; overflow:hidden; }
.day-editor-map { width:100%; height:100%; z-index:1; }
.day-editor-map-shell:fullscreen,
.day-editor-map-shell.map-fallback-fullscreen,
.checkin-map-shell:fullscreen,
.checkin-map-shell.map-fallback-fullscreen { width:100vw; height:100dvh; background:#111827; }
.day-editor-map-shell.map-fallback-fullscreen,
.checkin-map-shell.map-fallback-fullscreen { position:fixed; inset:0; z-index:9999; border-radius:0; }

.checkin-summary-list { display:grid; gap:.65rem; }
.checkin-summary-card { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.45rem; padding:.5rem; border:1px solid var(--line); border-radius:.9rem; background:#fff; box-shadow:0 2px 10px rgba(15,23,42,.04); }
.checkin-summary-card.dragging { opacity:.5; }
.checkin-summary-card.move-selected { outline:3px solid #34d399; outline-offset:2px; }
.checkin-summary-open { display:flex; min-width:0; align-items:center; gap:.7rem; width:100%; padding:.3rem .1rem; border:0; background:transparent; color:inherit; text-align:left; cursor:pointer; }
.checkin-summary-text { display:flex; min-width:0; flex:1; flex-direction:column; gap:.15rem; }
.checkin-summary-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.93rem; }
.checkin-summary-subtitle { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:.74rem; min-height:.9rem; }
.checkin-summary-arrow { color:#64748b; font-size:1.7rem; line-height:1; }

.checkin-screen { padding:0; }
.checkin-screen-bar { display:flex; align-items:center; gap:1rem; padding:1rem 1rem .8rem; border-bottom:1px solid var(--line); background:#fff; }
.checkin-screen-bar h2 { margin:.1rem 0 0; font-size:1.15rem; }
.checkin-entry-card { overflow:hidden; background:#fff; }
.checkin-entry-card .checkin-map-shell { height:18rem; }
.checkin-action-row { display:grid; grid-template-columns:1fr; gap:.55rem; }
.checkin-help { margin:0; color:var(--muted); font-size:.78rem; line-height:1.45; }
.address-search-button { width:100%; }
.checkin-screen-footer { display:flex; justify-content:space-between; gap:.75rem; padding:1rem; border-top:1px solid var(--line); background:#fff; position:sticky; bottom:0; z-index:20; }

@media (min-width:700px) {
  .day-editor-map-shell { height:20rem; }
  .checkin-screen { padding:1rem; background:#f8fafc; }
  .checkin-entry-card { border:1px solid var(--line); border-radius:1rem; box-shadow:0 8px 30px rgba(15,23,42,.08); }
  .checkin-entry-card .checkin-map-shell { height:22rem; }
  .checkin-action-row { grid-template-columns:auto auto; justify-content:start; }
  .address-search-button { width:auto; }
}

/* v2.9.1 - genummerde check-in markers */
.checkin-number-marker-wrap {
  background: transparent !important;
  border: 0 !important;
}
.checkin-number-marker {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 3px solid #fff;
  border-radius: 50% 50% 50% 0;
  background: #0f766e;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 3px 10px rgba(15, 23, 42, .28);
  transform: rotate(-45deg);
}
.checkin-number-marker {
  text-align: center;
}
.checkin-number-marker > span { display:block; transform: rotate(45deg); }

/* v2.10 - reis bewerken, PWA en read-only delen */
.editable-trip-title {
    color: inherit;
    text-decoration: none;
    border-radius: .55rem;
}
.editable-trip-title span {
    display: inline-block;
    margin-left: .25rem;
    font-size: .68em;
    opacity: .72;
}
.editable-trip-title:hover,
.editable-trip-title:focus-visible { text-decoration: underline; text-underline-offset: .18em; }
.hero-actions { display:flex; flex-wrap:wrap; gap:.65rem; align-items:center; margin-top:.9rem; }
.hero-actions .hero-button { margin-top:0; }
.share-button { border:1px solid rgba(255,255,255,.45); cursor:pointer; font:inherit; }
.day-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:.35rem; }
.day-actions button.edit-link { border:0; background:transparent; cursor:pointer; font:inherit; }
.share-trigger:disabled { opacity:.65; cursor:wait; }
.readonly-pill { display:inline-flex; margin-top:.75rem; padding:.35rem .7rem; border-radius:999px; background:rgba(255,255,255,.17); color:#fff; font-size:.78rem; font-weight:800; }
@media (max-width:520px) {
    .day-header { align-items:flex-start; }
    .day-actions { max-width:8.5rem; }
}


/* v2.11 toast notifications + input toast */
.toast-stack{position:fixed;z-index:5000;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px;width:min(390px,calc(100vw - 24px));pointer-events:none}
.toast{pointer-events:auto;background:#fff;border:1px solid #dbe3ef;border-left:5px solid #64748b;border-radius:14px;box-shadow:0 14px 40px rgba(15,23,42,.18);padding:12px 12px 12px 14px;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:start;animation:toast-in .2s ease-out;color:#172033}
.toast.toast-success{border-left-color:#15803d}.toast.toast-error{border-left-color:#b91c1c}.toast.toast-warning{border-left-color:#b45309}.toast.toast-info{border-left-color:#2563eb}
.toast-title{font-weight:800;font-size:.94rem;margin:0 0 2px}.toast-message{font-size:.9rem;line-height:1.35;margin:0;color:#475569}.toast-close{appearance:none;border:0;background:transparent;font-size:1.2rem;line-height:1;cursor:pointer;color:#64748b;padding:2px 4px;border-radius:8px}.toast-close:hover{background:#f1f5f9}.toast-actions{grid-column:1/-1;display:flex;gap:8px;justify-content:flex-end;margin-top:2px}.toast-input{grid-column:1/-1;width:100%;border:1px solid #cbd5e1;border-radius:10px;padding:10px 11px;font:inherit;background:#fff;color:#0f172a}.toast-input:focus{outline:3px solid rgba(37,99,235,.15);border-color:#2563eb}.toast-action{border:0;border-radius:9px;padding:8px 11px;font-weight:700;cursor:pointer}.toast-action.primary{background:#172033;color:#fff}.toast-action.secondary{background:#eef2f7;color:#172033}
@keyframes toast-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:640px){.toast-stack{left:12px;right:12px;bottom:max(10px,env(safe-area-inset-bottom));width:auto}.toast{border-radius:13px}}