/* Only interaction state and additional forms. Original visual classes are untouched. */
[hidden] { display: none !important; }
button:disabled { cursor: wait; opacity: .65; }
body.modal-open { overflow: hidden; }
#toast { z-index: 100; }
.runtime-empty { grid-column: 1/-1; padding: 42px 16px; text-align: center; color: #94a3b8; font-size: 12px; }
.runtime-error { color: #e11d48; font-size: 12px; line-height: 1.6; }
#my-cards-container select { padding-top: 0; padding-bottom: 0; line-height: 1.25; }
.account-panel { background: #fff; border-radius: 24px; padding: 22px; width: 100%; max-width: 380px; }
.account-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; font-size: 16px; font-weight: 800; }
.account-heading button { color: #94a3b8; }
.account-field { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; font-size: 12px; color: #64748b; }
.account-field input { width: 100%; height: 44px; border: 1px solid #e2e8f0; border-radius: 12px; background: #f8fafc; padding: 0 12px; font-size: 14px; color: #0f172a; }
.account-field input:focus { border-color: #07c160; outline: none; box-shadow: none; }
.account-submit { width: 100%; height: 44px; border-radius: 12px; background: #07c160; color: white; font-size: 14px; font-weight: 700; margin-top: 12px; }
.account-switch { width: 100%; font-size: 12px; color: #006d33; margin-top: 14px; }
.account-muted { font-size: 11px; color: #94a3b8; line-height: 1.6; margin: 10px 0; }
.mine-heading { display:flex; align-items:center; justify-content:space-between; padding: 0 2px; margin: 16px 0 10px; font-size: 14px; font-weight: 800; }
.connection-retry { position:fixed; top:52px; left:14px; right:14px; z-index:90; background:#fff1f2; color:#be123c; padding:12px; border-radius:12px; font-size:12px; text-align:center; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }
/* Requested location/metadata additions reuse the original green and slate palette. */
.location-bar{display:flex;align-items:center;gap:8px;margin:-2px 0 10px;color:#94a3b8;font-size:10px;min-width:0}
.location-bar button{display:flex;align-items:center;gap:3px;color:#006d33;font-size:11px;font-weight:600;flex-shrink:0}
.location-bar .material-symbols-outlined{font-size:16px}
.location-bar button:disabled{opacity:.6}
.card-distance{display:flex;justify-content:space-between;gap:4px;margin-top:6px;font-size:10px;color:#64748b}
.card-distance span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:54%}
.runtime-empty{grid-column:1/-1}
/* Absolute notification marks leave the supplied component geometry intact. */
#sort-fresh{position:relative;overflow:visible}
.new-arrival-count{position:absolute;right:-5px;top:-7px;min-width:17px;height:17px;padding:0 3px;border-radius:999px;background:#ef4444;color:#fff;font-size:10px;font-weight:800;line-height:17px;text-align:center;pointer-events:none;box-shadow:0 0 0 1.5px #fff}
.new-arrival-dot{display:inline-block;width:7px;height:7px;flex:0 0 7px;margin-left:4px;vertical-align:middle;border-radius:50%;background:#ef4444;box-shadow:0 0 0 1px #fff}
.location-bar{justify-content:space-between;align-items:center}
.location-summary{display:flex;flex-direction:column;gap:1px;min-width:0}
#location-current{color:#64748b;max-width:245px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#location-hint{line-height:1.4}
.account-field select{width:100%;height:42px;border:1px solid #e2e8f0;border-radius:12px;background:#f8fafc;padding:0 12px;font-size:13px;color:#0f172a}
.account-field select:focus{border-color:#07c160;outline:none;box-shadow:none}
#modal-location .account-panel{max-height:calc(100dvh - 32px);overflow-y:auto}
.height-controls{display:flex;align-items:center;gap:8px;min-width:0}
.height-number{width:44px!important;height:26px;padding:0 3px!important;border:1px solid #e2e8f0;border-radius:6px;text-align:center;font-size:11px;background:#f8fafc;color:#64748b;appearance:textfield}
.height-number::-webkit-inner-spin-button,.height-number::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.height-slider{flex:1;position:relative;height:26px;min-width:0}
.height-track{position:absolute;left:0;right:0;top:10px;height:6px;border-radius:6px;background:#e2e8f0;overflow:hidden}
#height-selected-track{position:absolute;inset:0;background:#07c160;border-radius:6px}
.height-slider input[type=range]{appearance:none;-webkit-appearance:none;position:absolute;width:100%;height:26px;inset:0;margin:0;background:transparent;pointer-events:none;border:0;padding:0;box-shadow:none}
.height-slider input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:16px;height:16px;border-radius:50%;border:2px solid white;background:#07c160;box-shadow:0 0 0 1px #07c160;pointer-events:auto;cursor:grab}
.height-slider input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;border:2px solid white;background:#07c160;box-shadow:0 0 0 1px #07c160;pointer-events:auto;cursor:grab}
.height-slider input[type=range]:focus-visible{outline:2px solid #006d33;outline-offset:3px;border-radius:8px}
.height-slider input[type=range]::-moz-range-track{background:transparent}