/* ================================================================
   Traflo Space — Social Linktree on a Globe
   ================================================================ */

:root {
  --bg-space: #030712;
  --surface: rgba(15,23,42,0.85);
  --surface-hover: rgba(30,41,59,0.9);
  --border: rgba(148,163,184,0.12);
  --text: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --accent: #3B82F6;
  --accent-glow: rgba(59,130,246,0.3);
  --success: #22C55E;
  --danger: #EF4444;
  --telegram: #0088cc;
  --radius: 12px;
  --radius-sm: 8px;
  --blur: 20px;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html, body { width:100%; height:100%; overflow:hidden; font-family:var(--font-body); color:var(--text); background:var(--bg-space); }

/* Hide Cesium default UI */
.cesium-viewer-toolbar, .cesium-viewer-animationContainer, .cesium-viewer-timelineContainer,
.cesium-viewer-bottom, .cesium-viewer-fullscreenContainer, .cesium-credit-logoContainer,
.cesium-credit-textContainer, .cesium-widget-credits, .cesium-viewer .cesium-widget-credits,
.cesium-viewer-infoBoxContainer { display: none !important; }
#cesium-container { position:fixed; top:0; left:0; width:100%; height:100%; z-index:1; }
#cesium-container .cesium-viewer { width:100%; height:100%; }
#cesium-container .cesium-widget canvas { background:transparent !important; }

/* ---- Loading Screen ---- */
#loading-screen { position:fixed; z-index:9999; inset:0; background:var(--bg-space); display:flex; align-items:center; justify-content:center; transition: opacity 0.6s ease; }
#loading-screen.hidden { opacity:0; pointer-events:none; }
.loading-content { text-align:center; }
.loading-globe { width:80px; height:80px; margin:0 auto 20px; border-radius:50%; background:radial-gradient(circle at 35% 35%, #1e40af, #0c1445); box-shadow: 0 0 40px rgba(59,130,246,0.3), 0 0 80px rgba(59,130,246,0.1); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
.loading-title { font-family:var(--font-display); font-size:28px; font-weight:700; margin-bottom:6px; }
.loading-sub { color:var(--text-secondary); font-size:14px; margin-bottom:24px; }
.loading-bar { width:200px; height:3px; background:rgba(255,255,255,0.1); border-radius:2px; margin:0 auto; overflow:hidden; }
.loading-fill { width:100%; height:100%; background:var(--accent); animation: load 2s ease-in-out infinite; transform-origin:left; }
@keyframes load { 0%{transform:scaleX(0)} 50%{transform:scaleX(1)} 100%{transform:scaleX(0)} }

/* ---- UI Enter Animation ---- */
.ui-enter { opacity:0; transform:translateY(10px); transition: opacity 0.5s ease, transform 0.5s ease; }
.ui-enter.visible { opacity:1; transform:translateY(0); }

/* ---- Search Bar — bottom center ---- */
.search-bar { position:fixed; bottom:20px; left:0; right:0; margin:0 auto; z-index:100; display:flex; align-items:center; gap:8px; background:var(--surface); backdrop-filter:blur(var(--blur)); border:1px solid var(--border); border-radius:var(--radius); padding:10px 16px; width:min(420px, calc(100vw - 520px)); min-width:220px; }
.search-icon { color:var(--text-muted); flex-shrink:0; }
#search-input { flex:1; background:none; border:none; outline:none; color:var(--text); font-family:var(--font-body); font-size:14px; }
#search-input::placeholder { color:var(--text-muted); }
.search-kbd { background:rgba(255,255,255,0.08); color:var(--text-muted); font-family:var(--font-mono); font-size:11px; padding:2px 6px; border-radius:4px; }
.search-dropdown { position:absolute; bottom:calc(100% + 6px); left:0; right:0; background:var(--surface); backdrop-filter:blur(var(--blur)); border:1px solid var(--border); border-radius:var(--radius); padding:6px; display:none; max-height:300px; overflow-y:auto; }
.search-dropdown.active { display:block; }
.search-result { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--radius-sm); cursor:pointer; transition:background 0.15s; }
.search-result:hover { background:var(--surface-hover); }
.search-result-dot { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.search-result-info { flex:1; }
.search-result-name { font-size:13px; font-weight:500; }
.search-result-location { font-size:11px; color:var(--text-muted); }

/* ---- Info Bar — bottom left, same row as search ---- */
.info-bar { position:fixed; bottom:20px; left:20px; z-index:100; display:flex; gap:12px; }
.info-item { display:flex; align-items:center; gap:6px; background:var(--surface); backdrop-filter:blur(var(--blur)); border:1px solid var(--border); padding:10px 14px; border-radius:var(--radius); font-size:13px; }
.dot { width:8px; height:8px; border-radius:50%; }
.dot.green { background:var(--success); box-shadow:0 0 6px var(--success); }
.info-item .value { font-family:var(--font-mono); font-weight:500; color:var(--text); }
.info-item .label { color:var(--text-muted); }
.info-item svg { color:var(--text-muted); }

/* ---- Toolbar ---- */
.toolbar { position:fixed; right:20px; top:50%; transform:translateY(-50%); z-index:100; display:flex; flex-direction:column; gap:4px; background:var(--surface); backdrop-filter:blur(var(--blur)); border:1px solid var(--border); border-radius:var(--radius); padding:6px; }
.tool-btn { width:40px; height:40px; border:none; background:transparent; color:var(--text-secondary); border-radius:var(--radius-sm); cursor:pointer; display:flex; align-items:center; justify-content:center; transition: background 0.15s, color 0.15s; }
.tool-btn:hover { background:rgba(255,255,255,0.08); color:var(--text); }
.tool-btn.active { color:var(--accent); }
.tool-sep { height:1px; background:var(--border); margin:4px 0; }

/* ---- Profile Card ---- */
#profile-card { position:fixed; top:0; right:-440px; width:420px; height:100vh; z-index:200; background:var(--surface); backdrop-filter:blur(30px); border-left:1px solid var(--border); padding:24px; overflow-y:auto; transition:right 0.4s cubic-bezier(0.16,1,0.3,1); }
#profile-card.open { right:0; }
.card-close { position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.06); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text-secondary); transition:background 0.15s; }
.card-close:hover { background:rgba(255,255,255,0.12); }
.card-avatar { width:72px; height:72px; border-radius:50%; background:linear-gradient(135deg,var(--accent),#8B5CF6); display:flex; align-items:center; justify-content:center; font-size:32px; margin-bottom:16px; border:3px solid rgba(255,255,255,0.15); }
.card-name { font-family:var(--font-display); font-size:22px; font-weight:600; margin-bottom:4px; }
.card-occupation { display:inline-block; padding:3px 10px; background:rgba(139,92,246,0.12); border:1px solid rgba(139,92,246,0.25); border-radius:20px; font-size:11px; color:#A78BFA; margin-bottom:6px; font-weight:500; }
.card-status { display:inline-block; padding:4px 10px; background:rgba(59,130,246,0.12); border:1px solid rgba(59,130,246,0.25); border-radius:20px; font-size:12px; color:var(--accent); margin-bottom:8px; }
.card-location-text { color:var(--text-secondary); font-size:13px; margin-bottom:12px; display:flex; align-items:center; gap:4px; }
.card-bio { font-size:14px; line-height:1.5; color:var(--text-secondary); margin-bottom:12px; }
.card-fun-fact { padding:10px 14px; background:rgba(251,191,36,0.08); border:1px solid rgba(251,191,36,0.2); border-radius:var(--radius-sm); font-size:13px; color:#FBBF24; margin-bottom:16px; line-height:1.4; }
.fun-fact-icon { margin-right:4px; }
.card-stats-row { display:flex; gap:0; margin-bottom:16px; background:rgba(255,255,255,0.03); border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; }
.stat-item { flex:1; text-align:center; padding:10px 8px; border-right:1px solid var(--border); }
.stat-item:last-child { border-right:none; }
.stat-value { font-family:var(--font-display); font-size:18px; font-weight:600; color:var(--text); }
.stat-label { font-size:10px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; margin-top:2px; }
.card-tags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }
.card-tag { padding:4px 10px; background:rgba(255,255,255,0.06); border:1px solid var(--border); border-radius:20px; font-size:11px; color:var(--text-secondary); }
.card-links { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.card-link { display:flex; align-items:center; gap:8px; padding:10px 14px; background:rgba(255,255,255,0.04); border:1px solid var(--border); border-radius:var(--radius-sm); font-size:13px; color:var(--accent); text-decoration:none; transition:background 0.15s; }
.card-link:hover { background:rgba(59,130,246,0.1); }
.card-link-icon { font-size:16px; }
.card-meta { font-size:11px; color:var(--text-muted); font-family:var(--font-mono); margin-bottom:16px; display:flex; gap:16px; }
.card-actions { display:flex; gap:8px; margin-bottom:20px; }
.btn-connect { flex:1; padding:10px; border:none; background:var(--accent); color:white; border-radius:var(--radius-sm); font-family:var(--font-body); font-size:13px; font-weight:500; cursor:pointer; transition:background 0.15s; }
.btn-connect:hover { background:#2563EB; }
.btn-connect.connected { background:var(--success); }
.btn-share-card { flex:1; padding:10px; border:1px solid var(--border); background:transparent; color:var(--text); border-radius:var(--radius-sm); font-family:var(--font-body); font-size:13px; cursor:pointer; transition:background 0.15s; }
.btn-share-card:hover { background:rgba(255,255,255,0.06); }
.btn-delete-pin { width:100%; padding:10px; border:1px solid rgba(239,68,68,0.3); background:transparent; color:var(--danger); border-radius:var(--radius-sm); font-family:var(--font-body); font-size:12px; cursor:pointer; transition:background 0.15s; margin-bottom:16px; }
.btn-delete-pin:hover { background:rgba(239,68,68,0.12); }
.card-section-title { font-family:var(--font-display); font-size:11px; font-weight:600; letter-spacing:1px; color:var(--text-muted); margin-bottom:10px; }
.nearby-scroll { display:flex; gap:10px; overflow-x:auto; padding-bottom:8px; }
.nearby-item { min-width:90px; cursor:pointer; text-align:center; padding:8px 4px; border-radius:var(--radius-sm); transition:background 0.15s; }
.nearby-item:hover { background:rgba(255,255,255,0.04); }
.nearby-avatar { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:20px; margin:0 auto 6px; }
.nearby-info { text-align:center; }
.nearby-name { font-size:11px; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:90px; }
.nearby-dist { font-size:10px; color:var(--text-muted); font-family:var(--font-mono); }

/* ---- Sidebar ---- */
#sidebar { position:fixed; top:0; left:-340px; width:320px; height:100vh; z-index:200; background:var(--surface); backdrop-filter:blur(30px); border-right:1px solid var(--border); transition:left 0.4s cubic-bezier(0.16,1,0.3,1); display:flex; flex-direction:column; }
#sidebar.open { left:0; }
.sidebar-header { display:flex; align-items:center; justify-content:space-between; padding:18px 16px; border-bottom:1px solid var(--border); }
.sidebar-header h3 { font-family:var(--font-display); font-size:16px; font-weight:600; }
.sidebar-close-btn { background:none; border:none; color:var(--text-secondary); cursor:pointer; padding:4px; }
.sidebar-filters { display:flex; gap:6px; padding:12px 16px; border-bottom:1px solid var(--border); }
.filter-chip { padding:5px 12px; border-radius:20px; font-size:12px; background:rgba(255,255,255,0.04); color:var(--text-muted); cursor:pointer; border:1px solid transparent; transition:all 0.15s; }
.filter-chip.active { background:var(--accent); color:white; border-color:var(--accent); }
.filter-chip:hover:not(.active) { background:rgba(255,255,255,0.08); }
.sidebar-list { flex:1; overflow-y:auto; padding:8px; }
.sidebar-item { display:flex; align-items:center; gap:10px; padding:10px; border-radius:var(--radius-sm); cursor:pointer; transition:background 0.15s; }
.sidebar-item:hover { background:var(--surface-hover); }
.sidebar-avatar { font-size:20px; width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:50%; flex-shrink:0; }
.sidebar-info { flex:1; min-width:0; }
.sidebar-name { font-size:13px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-location { font-size:11px; color:var(--text-muted); }
.sidebar-status { width:8px; height:8px; border-radius:50%; flex-shrink:0; background:var(--text-muted); opacity:0.3; }
.sidebar-status.online { background:var(--success); box-shadow:0 0 6px var(--success); opacity:1; }

/* ---- Tooltip ---- */
#pin-tooltip { position:fixed; z-index:300; background:var(--surface); backdrop-filter:blur(var(--blur)); border:1px solid var(--border); border-radius:var(--radius-sm); padding:8px 12px; pointer-events:none; }
#tooltip-name { font-size:13px; font-weight:500; }
#tooltip-city { font-size:11px; color:var(--text-muted); }

/* ---- Modals ---- */
.modal-overlay { position:fixed; inset:0; z-index:500; background:rgba(0,0,0,0.6); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; }
.modal-box { background:rgba(15,23,42,0.95); backdrop-filter:blur(30px); border:1px solid var(--border); border-radius:16px; padding:32px; width:min(400px, 90vw); max-height:90vh; overflow-y:auto; position:relative; }
.modal-box.modal-wide { width:min(480px, 90vw); }
.modal-close { position:absolute; top:14px; right:14px; width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:50%; cursor:pointer; color:var(--text-muted); transition:background 0.15s; }
.modal-close:hover { background:rgba(255,255,255,0.08); }
.modal-emoji { font-size:48px; text-align:center; margin-bottom:16px; }
.modal-box h2 { font-family:var(--font-display); font-size:22px; font-weight:600; text-align:center; margin-bottom:6px; }
.modal-desc { text-align:center; color:var(--text-secondary); font-size:14px; margin-bottom:24px; }
.modal-input { width:100%; padding:10px 14px; background:rgba(255,255,255,0.04); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text); font-family:var(--font-body); font-size:14px; outline:none; transition:border-color 0.15s; }
.modal-input:focus { border-color:var(--accent); }
.modal-input::placeholder { color:var(--text-muted); }
textarea.modal-input { resize:vertical; min-height:50px; }
.btn-telegram { width:100%; padding:12px; background:var(--telegram); color:white; border:none; border-radius:var(--radius-sm); font-family:var(--font-body); font-size:14px; font-weight:500; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; transition:background 0.15s; }
.btn-telegram:hover { background:#006daa; }
.login-divider { text-align:center; margin:20px 0; position:relative; }
.login-divider::before { content:''; position:absolute; top:50%; left:0; right:0; height:1px; background:var(--border); }
.login-divider span { background:rgba(15,23,42,0.95); padding:0 12px; position:relative; color:var(--text-muted); font-size:12px; }
.btn-primary { width:100%; padding:12px; background:var(--accent); color:white; border:none; border-radius:var(--radius-sm); font-family:var(--font-body); font-size:14px; font-weight:500; cursor:pointer; margin-top:12px; transition:background 0.15s, opacity 0.15s; }
.btn-primary:hover { background:#2563EB; }
.btn-primary:disabled { opacity:0.4; cursor:not-allowed; }
.btn-large { padding:14px; font-size:15px; }
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-size:12px; font-weight:500; color:var(--text-secondary); margin-bottom:6px; text-transform:uppercase; letter-spacing:0.5px; }
.location-row { display:flex; gap:8px; }
.location-row .modal-input { flex:1; }
.btn-pick { padding:10px 14px; background:rgba(255,255,255,0.06); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text); font-family:var(--font-body); font-size:12px; cursor:pointer; white-space:nowrap; transition:background 0.15s; }
.btn-pick:hover { background:rgba(255,255,255,0.1); }
.link-row { display:flex; gap:8px; margin-bottom:8px; }
.link-select { padding:8px; background:rgba(255,255,255,0.04); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text); font-family:var(--font-body); font-size:13px; }
.link-url { flex:1; }
.link-delete { width:34px; height:34px; border:1px solid var(--border); background:transparent; color:var(--text-muted); border-radius:var(--radius-sm); cursor:pointer; font-size:18px; line-height:1; display:flex; align-items:center; justify-content:center; transition:background 0.15s, color 0.15s; flex-shrink:0; }
.link-delete:hover { background:rgba(239,68,68,0.15); color:var(--danger); border-color:var(--danger); }
.btn-add-link { background:none; border:none; color:var(--accent); font-size:12px; cursor:pointer; padding:4px 0; }
.pin-style-row { display:flex; gap:16px; align-items:flex-start; }
.color-picker { display:flex; gap:6px; flex-wrap:wrap; }
.color-opt { width:28px; height:28px; border-radius:50%; cursor:pointer; border:2px solid transparent; transition:border-color 0.15s, transform 0.15s; }
.color-opt.selected { border-color:white; transform:scale(1.15); }
.emoji-picker { display:flex; gap:4px; flex-wrap:wrap; }
.emoji-opt { width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-sm); cursor:pointer; font-size:18px; border:2px solid transparent; transition:border-color 0.15s, background 0.15s; }
.emoji-opt.selected { border-color:var(--accent); background:rgba(59,130,246,0.15); }

/* ---- Tag Picker ---- */
.tag-hint { font-weight:400; color:var(--text-muted); text-transform:none; letter-spacing:0; font-size:11px; }
.tag-selected { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; min-height:0; }
.tag-selected:empty { display:none; }
.tag-chip { display:inline-flex; align-items:center; gap:4px; padding:5px 10px; background:rgba(59,130,246,0.15); border:1px solid rgba(59,130,246,0.3); border-radius:20px; font-size:12px; color:var(--accent); cursor:default; animation:tagPop 0.2s ease; }
@keyframes tagPop { from{transform:scale(0.8);opacity:0} to{transform:scale(1);opacity:1} }
.tag-chip-x { cursor:pointer; margin-left:2px; font-size:14px; color:rgba(255,255,255,0.4); transition:color 0.15s; line-height:1; }
.tag-chip-x:hover { color:var(--danger); }
.tag-categories { max-height:180px; overflow-y:auto; margin-bottom:10px; padding-right:4px; }
.tag-categories::-webkit-scrollbar { width:4px; }
.tag-categories::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.1); border-radius:2px; }
.tag-cat { margin-bottom:10px; }
.tag-cat-title { font-size:12px; font-weight:600; color:var(--text-secondary); margin-bottom:6px; }
.tag-cat-items { display:flex; flex-wrap:wrap; gap:4px; }
.tag-preset { padding:4px 10px; background:rgba(255,255,255,0.04); border:1px solid var(--border); border-radius:16px; font-size:11px; color:var(--text-secondary); cursor:pointer; transition:all 0.15s; white-space:nowrap; }
.tag-preset:hover { background:rgba(59,130,246,0.1); border-color:rgba(59,130,246,0.3); color:var(--accent); }
.tag-preset.picked { background:rgba(59,130,246,0.15); border-color:rgba(59,130,246,0.4); color:var(--accent); opacity:0.5; pointer-events:none; }
.tag-custom-row { display:flex; gap:8px; }
.tag-custom-row .modal-input { flex:1; }
.btn-add-tag { padding:10px 16px; background:rgba(255,255,255,0.06); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text); font-family:var(--font-body); font-size:12px; cursor:pointer; white-space:nowrap; transition:background 0.15s; }
.btn-add-tag:hover { background:rgba(59,130,246,0.15); color:var(--accent); }

/* ---- Bottom Actions — same row as info bar ---- */
.bottom-actions { position:fixed; bottom:20px; right:20px; z-index:100; display:flex; gap:8px; }
.btn-action { display:flex; align-items:center; gap:8px; padding:10px 18px; border-radius:var(--radius); font-family:var(--font-body); font-size:13px; font-weight:500; cursor:pointer; border:1px solid var(--border); background:var(--surface); backdrop-filter:blur(var(--blur)); color:var(--text); transition:background 0.15s; }
.btn-action:hover { background:var(--surface-hover); }
.btn-action.btn-accent { background:var(--accent); border-color:var(--accent); color:white; }
.btn-action.btn-accent:hover { background:#2563EB; }
.btn-action.btn-success { background:var(--success); border-color:var(--success); color:white; }
.btn-action svg { flex-shrink:0; }

/* ---- Pin picking mode ---- */
body.picking-mode #cesium-container { cursor:crosshair !important; }
body.picking-mode .cesium-viewer canvas { cursor:crosshair !important; }
.pick-banner { position:fixed; top:24px; left:50%; transform:translateX(-50%); z-index:400; background:var(--accent); color:white; padding:10px 24px; border-radius:var(--radius); font-size:14px; font-weight:500; box-shadow:0 4px 20px rgba(59,130,246,0.4); animation:slideDown 0.3s ease; }
@keyframes slideDown { from{opacity:0;transform:translateX(-50%) translateY(-10px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.1); border-radius:2px; }

/* ---- Mobile FAB Menu (hidden on desktop) ---- */
.mobile-fab { display:none; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:900px) {
  /* Hide desktop bottom bars */
  .info-bar { display:none !important; }
  .bottom-actions { display:none !important; }

  /* Search — small magnifier, top-left */
  .search-bar {
    position:fixed; top:14px; left:14px; bottom:auto; right:auto; margin:0;
    width:36px; height:36px; min-width:unset;
    padding:0; border-radius:50%; overflow:hidden; gap:0;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition: width 0.3s ease, height 0.3s ease, border-radius 0.3s ease, padding 0.3s ease, gap 0.3s ease;
  }
  .search-bar .search-icon { flex-shrink:0; width:16px; height:16px; }
  .search-bar .search-kbd { display:none; }
  #search-input { width:0; opacity:0; padding:0; position:absolute; transition: width 0.3s ease, opacity 0.2s ease; }
  .search-bar.mobile-open {
    width:calc(100vw - 90px); height:auto; gap:8px;
    border-radius:var(--radius); padding:10px 14px;
    top:14px; left:14px; overflow:visible;
  }
  .search-bar.mobile-open #search-input { width:auto; flex:1; opacity:1; font-size:14px; position:static; }
  .search-bar.mobile-open .search-dropdown { bottom:auto; top:calc(100% + 6px); }

  /* Hide toolbar on mobile */
  .toolbar { display:none !important; }

  /* Show mobile FAB */
  .mobile-fab { display:block; position:fixed; bottom:16px; right:16px; z-index:150; }
  .fab-trigger {
    width:48px; height:48px; border-radius:50%; border:none;
    background:var(--surface); backdrop-filter:blur(var(--blur));
    border:1px solid var(--border); color:var(--text);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition: background 0.2s, transform 0.2s;
    box-shadow:0 4px 16px rgba(0,0,0,0.3);
  }
  .fab-trigger:hover { background:var(--surface-hover); }
  .mobile-fab.open .fab-trigger { transform:rotate(90deg); background:var(--surface-hover); }

  .fab-menu {
    position:absolute; bottom:calc(100% + 10px); right:0;
    display:flex; flex-direction:column; gap:6px;
    opacity:0; pointer-events:none; transform:translateY(8px) scale(0.95);
    transition: opacity 0.2s ease, transform 0.2s ease;
    min-width:180px;
  }
  .mobile-fab.open .fab-menu { opacity:1; pointer-events:auto; transform:translateY(0) scale(1); }

  .fab-stats {
    display:flex; align-items:center; gap:5px;
    padding:8px 14px; background:var(--surface); backdrop-filter:blur(var(--blur));
    border:1px solid var(--border); border-radius:var(--radius-sm);
    font-size:11px; color:var(--text-secondary);
    box-shadow:0 2px 10px rgba(0,0,0,0.2);
  }
  .fab-stat-val { font-family:var(--font-mono); font-weight:500; color:var(--text); }
  .fab-sep { color:var(--text-muted); }
  .fab-stats .dot { width:6px; height:6px; }
  .fab-stats svg { color:var(--text-muted); flex-shrink:0; }

  .fab-item {
    display:flex; align-items:center; gap:8px;
    padding:10px 16px; border:1px solid var(--border);
    background:var(--surface); backdrop-filter:blur(var(--blur));
    border-radius:var(--radius-sm); color:var(--text);
    font-family:var(--font-body); font-size:13px; font-weight:500;
    cursor:pointer; transition:background 0.15s;
    box-shadow:0 2px 10px rgba(0,0,0,0.2); white-space:nowrap;
  }
  .fab-item:hover { background:var(--surface-hover); }
  .fab-item.fab-accent { background:var(--accent); border-color:var(--accent); color:white; }
  .fab-item.fab-accent:hover { background:#2563EB; }
  .fab-item svg { flex-shrink:0; }

  /* Horizontal toolbar strip — opens left from FAB */
  .fab-toolbar {
    position:absolute; bottom:0; right:calc(100% + 10px);
    display:flex; flex-direction:row; gap:2px;
    background:var(--surface); backdrop-filter:blur(var(--blur));
    border:1px solid var(--border); border-radius:var(--radius);
    padding:4px; box-shadow:0 2px 10px rgba(0,0,0,0.2);
    opacity:0; pointer-events:none; transform:translateX(8px) scale(0.95);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .mobile-fab.open .fab-toolbar { opacity:1; pointer-events:auto; transform:translateX(0) scale(1); }
  .fab-tool-btn {
    width:36px; height:36px; border:none; background:transparent;
    color:var(--text-secondary); border-radius:var(--radius-sm);
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition: background 0.15s, color 0.15s;
  }
  .fab-tool-btn:hover { background:rgba(255,255,255,0.08); color:var(--text); }

  /* Profile card full width */
  #profile-card { width:100%; right:-100%; padding:20px 16px; }

  /* Sidebar */
  #sidebar { width:85vw; max-width:320px; left:-85vw; }

  .tool-btn { width:34px; height:34px; }

  /* Modals */
  .modal-box, .modal-box.modal-wide { width:calc(100vw - 16px); max-height:85vh; padding:20px 16px; border-radius:14px; }

  /* Form elements inside modals */
  .form-group { margin-bottom:12px; }
  .modal-input { padding:8px 12px; font-size:13px; }
  .location-row { flex-direction:column; gap:6px; }
  .link-row { flex-wrap:wrap; gap:6px; }
  .link-select { width:100%; }
  .link-url { flex:1; min-width:0; }
  .tag-categories { max-height:140px; }
  .tag-preset { font-size:10px; padding:3px 8px; }
  .color-opt { width:24px; height:24px; }
  .emoji-opt { width:28px; height:28px; font-size:16px; }
  .pin-style-row { flex-direction:column; gap:10px; }

  /* Hide tooltip on touch */
  #pin-tooltip { display:none !important; }
}