* { margin:0; padding:0; box-sizing:border-box; font-family:'DM Sans',-apple-system,sans-serif; }
        /* Touch ottimizzazione Safari */
        button, [onclick], .btn-pay, .btn-secondary, .qa-btn, .purse-tab,
        .back-btn, .mode-btn, .tx-item, .contact-item, .settings-row,
        .avatar-small, .profile-avatar-big, .section-link, .auth-link,
        .wallet-toggle-btn, .bc-hide-btn, .btn-selfie, .btn-selfie-cancel {
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
            cursor: pointer;
        }
        /* Input ottimizzazione Safari — previene zoom su focus */
        input, textarea, select {
            font-size: 16px !important; /* min 16px previene zoom automatico Safari */
            -webkit-appearance: none;
            border-radius: 0;
        }
        html { height: 100%; height: -webkit-fill-available; }
        body { height: 100%; height: 100dvh; min-height: -webkit-fill-available; }
        body {
            --bg:#0B1120; --surface:#131D30; --card:#1A2640; --border:#243050;
            --accent:#3ECFCF; --accent2:#5B8AF0; --green:#34D399; --red:#F87171;
            --amber:#FBBF24; --ink:#F0F4FF; --ink-dim:#8899BB; --ink-faint:#3A4A6A;
        }
        body.light-theme {
            --bg:#f0f4fa; --surface:#e6ecf5; --card:#ffffff; --border:#c0c8d0;
            --accent:#2a7a7a; --accent2:#3a6ab0; --green:#2d8a5e; --red:#c05050;
            --amber:#c09a2a; --ink:#1a2a3a; --ink-dim:#4a5a6a; --ink-faint:#8a9aaa;
        }
        #app {
            height: 100%; height: 100dvh;
            max-width: 480px; margin: 0 auto;
            display: flex; flex-direction: column;
            background: var(--bg); overflow: hidden;
            position: relative;
            /* Safari: previene bounce scroll */
            overscroll-behavior: none;
            -webkit-overflow-scrolling: touch;
        }
        .screen {
            flex: 1; overflow-y: auto; display: flex; flex-direction: column;
            background: var(--bg); color: var(--ink);
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-y: contain;
            /* Safe area iPhone bottom */
            padding-bottom: env(safe-area-inset-bottom, 0px);
        }
        .topbar { display:flex; justify-content:flex-end; padding:10px 16px 0; }
        .theme-toggle { background:var(--card); border:1.5px solid var(--border); border-radius:60px; padding:3px; display:inline-flex; gap:3px; cursor:pointer; }
        .theme-toggle svg { width:26px; height:26px; padding:4px; border-radius:30px; transition:all .2s; }
        .theme-toggle .sun { background:var(--accent); color:#0B1120; }
        .theme-toggle .moon { background:transparent; color:var(--ink-dim); }
        body.light-theme .theme-toggle .sun { background:transparent; color:var(--ink-dim); }
        body.light-theme .theme-toggle .moon { background:var(--accent); color:#fff; }
        .logo-talo { display:flex; align-items:center; }
        .logo-mark {
            width: 28px; height: 28px;
            background: linear-gradient(135deg,var(--accent),var(--accent2));
            border-radius: 50%; position: relative;
            display: flex; align-items: center; justify-content: center;
            margin: 0 2px;
            -webkit-user-select: none; user-select: none;
        }
        .logo-mark::before { content:""; position:absolute; width:16px; height:16px; border:2px solid var(--bg); border-radius:50%; border-top-color:transparent; border-right-color:transparent; transform:rotate(45deg); }
        .logo-mark::after { content:"T"; position:relative; font-size:.7rem; font-weight:700; color:var(--bg); z-index:2; }
        .auth-wrap { flex:1; padding:8px 24px 24px; display:flex; flex-direction:column; }
        .auth-logo { text-align:center; margin-bottom:16px; }
        .auth-title { font-size:1.7rem; font-weight:700; text-align:center; margin-bottom:4px; }
        .auth-sub { color:var(--ink-dim); font-size:.8rem; text-align:center; margin-bottom:20px; }
        .inp-label { font-size:.65rem; font-weight:600; text-transform:uppercase; color:var(--ink-dim); margin-bottom:4px; display:block; }
        .inp {
            width: 100%; padding: 11px 14px;
            background: var(--card); border: 1.5px solid var(--border);
            border-radius: 12px; color: var(--ink);
            font-size: 16px; /* minimo 16px per evitare zoom Safari */
            outline: none; margin-bottom: 10px;
            -webkit-appearance: none;
        }
        .inp:focus { border-color:var(--accent); }
        .inp.error { border-color:var(--red); }
        .inp-error { font-size:.72rem; color:var(--red); margin:-6px 0 8px 2px; display:none; }
        .auth-footer { display:flex; justify-content:space-between; align-items:center; margin:8px 0 20px; }
        .auth-link { color:var(--accent); font-size:.75rem; cursor:pointer; font-weight:500; }
        .btn-primary {
            width: 100%; padding: 13px;
            background: linear-gradient(135deg,var(--accent),var(--accent2));
            border: none; border-radius: 14px;
            color: #0B1120; font-weight: 700; font-size: .95rem;
            cursor: pointer; margin: 6px 0;
            display: flex; align-items: center; justify-content: center; gap: 8px;
            touch-action: manipulation; /* elimina 300ms delay Safari */
            -webkit-tap-highlight-color: transparent;
            -webkit-appearance: none;
        }
        .btn-primary:disabled { opacity:.5; cursor:not-allowed; }
        .btn-secondary { width:100%; padding:11px; border-radius:14px; border:1.5px solid var(--border); background:transparent; color:var(--ink-dim); font-size:.85rem; cursor:pointer; }
        .btn-pay { background:var(--accent); color:#0B1120; padding:14px; border:none; border-radius:14px; font-weight:700; cursor:pointer; width:100%; }
        #toast {
            position: absolute;
            bottom: calc(24px + env(safe-area-inset-bottom, 0px));
            left: 50%; transform: translateX(-50%);
            background: var(--card); border: 1px solid var(--border);
            color: var(--ink); padding: 10px 20px;
            border-radius: 30px; font-size: .85rem;
            box-shadow: 0 8px 24px rgba(0,0,0,.3);
            z-index: 1000; opacity: 0; pointer-events: none;
            transition: opacity .2s; max-width: 90%; text-align: center;
        }
        #toast.show { opacity:1; }
        #toast.error { border-color:var(--red); color:var(--red); }
        #toast.success { border-color:var(--green); color:var(--green); }
        .spinner { width:18px; height:18px; border:2px solid rgba(0,0,0,.2); border-top-color:#0B1120; border-radius:50%; animation:spin .6s linear infinite; display:inline-block; }
        @keyframes spin { to{transform:rotate(360deg)} }
        .home-header { padding:8px 24px 0; display:flex; align-items:center; justify-content:space-between; }
        .header-left { display:flex; align-items:center; gap:8px; }
        .header-user { display:flex; flex-direction:column; margin-left:8px; }
        .header-greeting { font-size:.7rem; color:var(--ink-dim); }
        .header-name { font-size:.95rem; font-weight:600; }
        .avatar-small { width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent2)); display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--bg); cursor:pointer; border:2px solid var(--accent); font-size:.75rem; }
        .wallet-toggle-row { padding:4px 24px 8px; display:flex; justify-content:flex-end; }
        .wallet-toggle-btn { background:none; border:none; color:var(--accent); font-size:.7rem; cursor:pointer; display:inline-flex; align-items:center; gap:4px; }
        .wallet-id-bar { margin:0 24px 10px; padding:7px 12px; background:var(--card); border:1px solid var(--border); border-radius:10px; font-family:'DM Mono',monospace; font-size:.68rem; color:var(--accent2); display:none; }
        .wallet-id-bar.visible { display:block; }
        .balance-card { margin:6px 20px 0; background:linear-gradient(135deg,#1A3A4A 0%,#1A2640 60%); border-radius:22px; padding:20px; border:1px solid rgba(62,207,207,.15); }
        body.light-theme .balance-card { background:linear-gradient(135deg,#d0e0f0 0%,#c0d0e0 100%); }
        .bc-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
        .bc-label { font-size:.7rem; text-transform:uppercase; color:var(--accent); }
        .bc-hide-btn { background:none; border:none; color:var(--ink-dim); cursor:pointer; font-size:1.76rem; line-height:1; padding:0; display:flex; align-items:center; }
        .icon-btn-lg { background:none; border:none; color:var(--accent); cursor:pointer; font-size:1.36rem; padding:0 2px; line-height:1; display:flex; align-items:center; }
        .btn-sm-action { padding:7px 16px; border-radius:20px; background:linear-gradient(135deg,rgba(62,207,207,.7),rgba(91,138,240,.7)); border:none; color:#0B1120; font-weight:700; font-size:.75rem; cursor:pointer; display:inline-flex; align-items:center; gap:4px; }
        /* chat screen */
        .chat-input-bar { display:flex; gap:8px; padding:10px 14px; padding-bottom:calc(10px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--border); background:var(--card); }
        .chat-input { flex:1; background:var(--bg); border:1.5px solid var(--border); border-radius:22px; padding:10px 16px; color:var(--ink); font-size:.9rem; outline:none; }
        .chat-send-btn { background:var(--accent); color:#0B1120; border:none; border-radius:22px; padding:10px 18px; font-weight:700; font-size:.85rem; cursor:pointer; white-space:nowrap; }
        .contact-avatar { width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--purple,#7c5cfc)); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; color:#0B1120; flex-shrink:0; }
        /* lang grid */
        .settings-lang-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:4px 16px 12px; }
        .lang-btn { background:var(--card); border:1.5px solid var(--border); border-radius:12px; padding:8px 6px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--ink-dim); font-size:.72rem; font-weight:600; }
        .lang-btn.active { border-color:var(--accent); color:var(--accent); background:rgba(62,207,207,.08); }
        .lang-flag { font-size:1.3rem; line-height:1; }
        .lang-name { font-size:.65rem; }
        /* danger btn */
        .btn-danger { width:100%; padding:14px; border-radius:16px; background:rgba(239,68,68,.12); border:1.5px solid rgba(239,68,68,.4); color:#ef4444; font-size:1rem; font-weight:700; cursor:pointer; margin-top:4px; }

        .balance-dots { display:flex; gap:7px; align-items:center; }
        .balance-dots span { width:14px; height:14px; border-radius:50%; background:var(--accent); opacity:.8; }
        .bc-amount { font-size:2.2rem; font-weight:700; }
        .bc-currency { font-size:.8rem; color:var(--ink-dim); margin-top:4px; }
        .purses-section { margin:12px 20px 0; }
        .purse-tabs { display:flex; gap:6px; flex-wrap:wrap; }
        .purse-tab { flex:1; min-width:calc(50% - 6px); max-width:calc(50% - 3px); padding:7px 4px; border-radius:11px; border:1px solid var(--border); background:var(--card); color:var(--ink-dim); cursor:pointer; text-align:center; }
        .purse-tab.active { border-color:var(--accent); background:rgba(62,207,207,.1); color:var(--accent); }
        .purse-type { font-size:.8rem; font-weight:600; }
        .quick-actions { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:14px 20px 0; }
        .qa-btn { display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 4px; background:var(--card); border:1px solid var(--border); border-radius:16px; cursor:pointer; color:var(--ink); font-size:.7rem; }
        .qa-icon { width:34px; height:34px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:1rem; }
        .section-header { display:flex; align-items:center; justify-content:space-between; padding:16px 24px 6px; }
        .section-title { font-size:.68rem; font-weight:600; text-transform:uppercase; color:var(--ink-faint); }
        .section-link { color:var(--accent); font-size:.7rem; cursor:pointer; }
        .tx-item { margin:0 20px 7px; padding:12px 13px; background:var(--card); border-radius:14px; display:flex; align-items:center; gap:11px; border:1px solid var(--border); cursor:pointer; }
        .tx-icon { width:36px; height:36px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1rem; }
        .tx-body { flex:1; }
        .tx-name { font-size:.83rem; font-weight:500; }
        .tx-date { font-size:.68rem; color:var(--ink-dim); }
        .tx-amount { font-size:.88rem; font-weight:700; }
        .tx-amount.out { color:var(--red); }
        .tx-amount.in  { color:var(--green); }
        .tx-empty { color:var(--ink-dim); font-size:.8rem; text-align:center; padding:24px; }
        .payment-header { display:flex; align-items:center; gap:12px; padding:16px 24px; border-bottom:1px solid var(--border); }
        .back-btn { width:34px; height:34px; border-radius:11px; background:var(--card); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:1.1rem; }
        .mode-switch { display:flex; gap:8px; padding:0 24px 14px; }
        .mode-btn { flex:1; padding:9px; border-radius:28px; border:1px solid var(--border); background:var(--card); color:var(--ink-dim); cursor:pointer; font-size:.82rem; }
        .mode-btn.active { background:var(--accent); border-color:var(--accent); color:#0B1120; font-weight:600; }
        .camera-wrap { margin:0 24px 16px; border-radius:20px; overflow:hidden; background:#000; position:relative; aspect-ratio:1; }
        .camera-wrap video { width:100%; height:100%; object-fit:cover; display:block; }
        .scan-overlay { position:absolute; top:0; left:0; right:0; bottom:0; pointer-events:none; }
        .scan-line { position:absolute; left:10%; width:80%; height:2px; background:linear-gradient(90deg,transparent,var(--accent),transparent); animation:scanAnim 2s ease-in-out infinite; }
        @keyframes scanAnim { 0%{top:15%} 50%{top:80%} 100%{top:15%} }
        .qr-corner { position:absolute; width:32px; height:32px; border:3px solid var(--accent); }
        .qr-corner.tl{top:10px;left:10px;border-right:none;border-bottom:none}
        .qr-corner.tr{top:10px;right:10px;border-left:none;border-bottom:none}
        .qr-corner.bl{bottom:10px;left:10px;border-right:none;border-top:none}
        .qr-corner.br{bottom:10px;right:10px;border-left:none;border-top:none}
        .camera-placeholder { width:100%; height:100%; min-height:200px; background:repeating-linear-gradient(45deg,#1a1a1a,#1a1a1a 10px,#222 10px,#222 20px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:var(--ink-dim); font-size:.8rem; text-align:center; padding:16px; }
        .camera-placeholder .cam-icon { font-size:2.5rem; }
        .btn-start-cam { background:var(--accent); color:#0B1120; border:none; border-radius:28px; padding:10px 24px; font-weight:700; cursor:pointer; font-size:.9rem; }
        .btn-start-cam:disabled { opacity:.5; cursor:not-allowed; }
        .camera-status { position:absolute; bottom:12px; left:50%; transform:translateX(-50%); background:rgba(0,0,0,.7); color:var(--accent); font-size:.72rem; padding:4px 14px; border-radius:20px; white-space:nowrap; }
        .http-warning { margin:0 24px 12px; padding:10px 14px; background:rgba(251,191,36,.1); border:1px solid var(--amber); border-radius:10px; color:var(--amber); font-size:.75rem; }
        .search-section { padding:0 24px 12px; }
        .search-row { display:flex; gap:8px; }
        .search-row .inp { flex:1; margin:0; }
        .btn-search { background:var(--accent); color:#0B1120; border:none; border-radius:12px; padding:0 16px; font-weight:700; cursor:pointer; font-size:.85rem; white-space:nowrap; }
        .btn-search:disabled { opacity:.5; cursor:not-allowed; }
        .contact-item { display:flex; align-items:center; gap:11px; padding:11px 12px; background:var(--card); border:1px solid var(--border); border-radius:13px; margin:0 24px 7px; cursor:pointer; }
        .contact-avatar { width:38px; height:38px; border-radius:11px; background:linear-gradient(135deg,var(--accent),var(--accent2)); display:flex; align-items:center; justify-content:center; font-weight:600; color:var(--bg); font-size:.85rem; }
        .contact-info { flex:1; }
        .contact-name { font-weight:600; font-size:.88rem; }
        .contact-detail { font-size:.68rem; color:var(--ink-dim); }
        .contact-pay-btn { background:var(--accent); color:#0B1120; border:none; border-radius:28px; padding:7px 14px; font-weight:600; font-size:.8rem; cursor:pointer; }
        .no-results { color:var(--ink-dim); font-size:.82rem; text-align:center; padding:16px 24px; }
        .payment-detail-wrap { padding:20px 24px; display:flex; flex-direction:column; gap:20px; flex:1; }
        .payment-merchant { text-align:center; }
        .merchant-logo { width:72px; height:72px; border-radius:20px; background:linear-gradient(135deg,var(--accent),var(--accent2)); display:flex; align-items:center; justify-content:center; font-size:1.8rem; margin:0 auto 10px; }
        .merchant-name { font-size:1.1rem; font-weight:600; }
        .merchant-email { font-size:.78rem; color:var(--ink-dim); }
        .details-box { background:var(--card); border-radius:18px; padding:18px; border:1px solid var(--border); }
        .detail-row { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--border); }
        .detail-row:last-child { border-bottom:none; }
        .detail-label { color:var(--ink-dim); font-size:.85rem; }
        .detail-value { font-weight:600; font-size:.9rem; }
        .action-buttons { display:flex; flex-direction:column; gap:10px; margin-top:auto; }
        .transactions-list { padding:0 20px; }
        .month-sep { padding:14px 4px 5px; font-size:.68rem; font-weight:600; text-transform:uppercase; color:var(--ink-faint); }
        .profile-header { padding:24px 24px 14px; text-align:center; }
        .profile-avatar-big { width:90px; height:90px; border-radius:50%; margin:0 auto 14px; background:linear-gradient(135deg,var(--accent),var(--accent2)); display:flex; align-items:center; justify-content:center; font-size:1.8rem; color:var(--bg); cursor:pointer; position:relative; overflow:hidden; }
        .profile-avatar-big img { width:100%; height:100%; object-fit:cover; border-radius:50%; position:absolute; top:0; left:0; right:0; bottom:0; }
        .avatar-initials { position:relative; z-index:1; }
        .avatar-overlay { position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.45); display:flex; flex-direction:column; align-items:center; justify-content:center; opacity:0; transition:opacity .2s; z-index:2; }
        .profile-avatar-big:hover .avatar-overlay { opacity:1; }
        .avatar-overlay span { font-size:.65rem; color:#fff; margin-top:3px; }
        .camera-icon { position:absolute; bottom:0; right:0; background:var(--accent); border-radius:50%; width:26px; height:26px; display:flex; align-items:center; justify-content:center; border:2px solid var(--bg); font-size:.7rem; z-index:3; }
        .profile-name { font-size:1.15rem; font-weight:600; }
        .profile-email { font-size:.78rem; color:var(--ink-dim); margin:3px 0 6px; }
        .settings-section { margin:0 20px 8px; background:var(--card); border-radius:16px; border:1px solid var(--border); overflow:hidden; }
        .settings-row { padding:13px 15px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border); cursor:pointer; font-size:.88rem; }
        .settings-row:last-child { border-bottom:none; }
        .settings-row.logout { color:var(--red); }
        .settings-row-right { color:var(--ink-dim); font-size:.8rem; }
        #selfie-modal {
            display: none;
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,.88);
            z-index: 200; flex-direction: column;
            align-items: center; justify-content: center;
            gap: 16px; padding: 20px;
            -webkit-backdrop-filter: blur(4px);
        }
        #selfie-modal.open { display:flex; }
        #selfie-video { width:min(320px,90vw); border-radius:16px; background:#000; }
        #selfie-canvas { display:none; }
        .selfie-btns { display:flex; gap:12px; }
        .btn-selfie { background:var(--accent); color:#0B1120; border:none; border-radius:28px; padding:11px 28px; font-weight:700; cursor:pointer; }
        .btn-selfie-cancel { background:transparent; color:var(--ink-dim); border:1px solid var(--border); border-radius:28px; padding:11px 20px; cursor:pointer; }
        .success-wrap { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:36px 28px; text-align:center; gap:16px; }
        .success-icon { width:88px; height:88px; border-radius:50%; background:rgba(52,211,153,.15); border:2px solid rgba(52,211,153,.3); display:flex; align-items:center; justify-content:center; font-size:2.8rem; }
        .success-title { font-size:1.4rem; font-weight:700; }
        .success-sub { color:var(--ink-dim); font-size:.85rem; }
        .success-amount { font-size:2rem; font-weight:700; color:var(--green); }
        .message-box { background:rgba(62,207,207,.1); border:1px solid var(--accent); border-radius:12px; padding:14px; text-align:center; color:var(--accent); margin:0 0 12px; font-size:.85rem; }
        .qr-display { margin:0 auto 12px; width:180px; height:180px; background:#fff; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:.7rem; color:#333; text-align:center; padding:8px; }
        .qr-display img { width:100%; height:100%; border-radius:10px; object-fit:contain; }



        /* ── SIMULATED SHARE APPS ── */
        #share-app-modal { display:none; position:absolute; top:0;left:0;right:0;bottom:0;
            z-index:700; flex-direction:column; }
        #share-app-modal.open { display:flex; }
        .wa-header  { background:#075e54; color:white; padding:12px 16px; display:flex; align-items:center; gap:10px; flex-shrink:0; }
        .tg-header  { background:#2196f3; color:white; padding:12px 16px; display:flex; align-items:center; gap:10px; flex-shrink:0; }
        .em-header  { background:#e53935; color:white; padding:12px 16px; display:flex; align-items:center; gap:10px; flex-shrink:0; }
        .app-back-btn { background:none;border:none;color:white;font-size:1.2rem;cursor:pointer;padding:0; }
        .share-app-body { flex:1; background:#ece5dd; overflow-y:auto; padding:12px 16px; display:flex; flex-direction:column; justify-content:flex-end; }
        .share-app-body.dark { background:#0d1117; }
        .share-app-body.email-bg { background:#f5f5f5; padding:0; }
        .chat-bubble-out { background:#dcf8c6; border-radius:12px 0 12px 12px; padding:10px 14px; margin-bottom:4px;
            align-self:flex-end; max-width:82%; box-shadow:0 1px 2px rgba(0,0,0,.13); font-size:.88rem; color:#111; }
        .chat-bubble-tg { background:#effdde; border-radius:12px 0 12px 12px; padding:10px 14px; margin-bottom:4px;
            align-self:flex-end; max-width:82%; box-shadow:0 1px 2px rgba(0,0,0,.13); font-size:.88rem; color:#111; }
        .chat-time { font-size:.65rem; color:rgba(0,0,0,.4); text-align:right; margin-top:3px; }
        .share-app-input-row { background:white; padding:8px 12px; display:flex; align-items:center; gap:8px; flex-shrink:0; border-top:1px solid #ddd; }
        .share-app-input { flex:1; border:none; border-radius:20px; background:#f0f0f0; padding:10px 14px; font-size:.85rem; outline:none; }
        .share-app-send { background:#25d366; border:none; border-radius:50%; width:38px; height:38px; display:flex; align-items:center; justify-content:center; font-size:1rem; cursor:pointer; }
        .tg-send { background:#2196f3; }
        .email-compose { flex:1; display:flex; flex-direction:column; background:#fff; }
        .email-field { padding:10px 16px; border-bottom:1px solid #eee; display:flex; gap:8px; align-items:center; font-size:.85rem; }
        .email-field-lbl { color:#999; width:32px; }
        .email-field-val { flex:1; color:#333; }
        .email-body-area { flex:1; padding:14px 16px; font-size:.85rem; color:#333; line-height:1.6; }
        .email-toolbar { padding:10px 16px; border-top:1px solid #eee; display:flex; justify-content:flex-end; }
        .email-send-btn { background:#e53935; color:white; border:none; border-radius:10px; padding:9px 20px; font-weight:700; cursor:pointer; font-size:.85rem; }
        /* ── IN-APP NAVIGATOR ── */
        #nav-modal { display:none; position:absolute; top:0;left:0;right:0;bottom:0; z-index:600;
            background:#1d2d44; flex-direction:column; }
        #nav-modal.open { display:flex; }
        .nav-top { background:#1a2535; padding:10px 16px; display:flex; align-items:center; gap:10px; flex-shrink:0; }
        .nav-dest { flex:1; }
        .nav-dest-name { font-weight:700; font-size:.95rem; color:white; }
        .nav-dest-info { font-size:.7rem; color:rgba(255,255,255,.55); }
        .nav-close { background:#ea4335; color:white; border:none; border-radius:10px; padding:8px 14px; font-size:.78rem; font-weight:700; cursor:pointer; }
        .nav-map-area { flex:1; position:relative; overflow:hidden; }
        .nav-instruction { position:absolute; top:10px; left:10px; right:10px; background:rgba(26,37,53,.92);
            border-radius:14px; padding:12px 14px; display:flex; align-items:center; gap:10px;
            border:1px solid rgba(255,255,255,.1); backdrop-filter:blur(6px); }
        .nav-arrow { font-size:1.8rem; }
        .nav-inst-txt { flex:1; }
        .nav-dist-badge { background:#4285f4; color:white; border-radius:10px; padding:6px 10px; text-align:center; flex-shrink:0; }
        .nav-bottom { background:#1a2535; padding:10px 16px 20px; flex-shrink:0; border-top:1px solid rgba(255,255,255,.1); }
        .nav-bottom-row { display:flex; justify-content:space-between; align-items:center; }
        .nav-eta { font-size:1.5rem; font-weight:800; color:white; }
        .nav-eta-lbl { font-size:.7rem; color:rgba(255,255,255,.5); }
        .nav-progress { height:4px; background:rgba(255,255,255,.15); border-radius:4px; margin-top:10px; overflow:hidden; }
        .nav-progress-bar { height:100%; width:35%; background:#4285f4; border-radius:4px;
            animation:navprog 3s ease-in-out infinite alternate; }
        @keyframes navprog { from{width:30%} to{width:65%} }


        /* ── HIDE SCROLLBARS INSIDE APP ── */
        #app, #app * {
            scrollbar-width: none;          /* Firefox */
            -ms-overflow-style: none;       /* IE/Edge */
        }
        #app ::-webkit-scrollbar,
        #app::-webkit-scrollbar {
            display: none;                  /* Chrome/Safari/WebKit */
            width: 0;
            height: 0;
        }
        /* ── CONTACT PICKER ── */
        .contact-search { padding:10px 14px; background:rgba(255,255,255,.08); border:none;
            border-radius:22px; color:white; font-size:.85rem; outline:none; width:100%;
            box-sizing:border-box; margin:0 0 4px; }
        .contact-search::placeholder { color:rgba(255,255,255,.4); }
        .contact-search.email-style { background:#f0f0f0; color:#333; }
        .contact-search.email-style::placeholder { color:#aaa; }
        .contact-item { display:flex; align-items:center; gap:12px; padding:10px 16px;
            cursor:pointer; border-bottom:1px solid rgba(255,255,255,.07); }
        .contact-item:active { background:rgba(255,255,255,.07); }
        .contact-avatar { width:40px; height:40px; border-radius:50%; display:flex;
            align-items:center; justify-content:center; font-size:1.1rem;
            font-weight:700; flex-shrink:0; }
        .contact-name { font-size:.9rem; font-weight:600; }
        .contact-sub  { font-size:.7rem; opacity:.55; }
        .contact-item-email { border-bottom:1px solid #eee; }
        .contact-item-email .contact-avatar { background:#eee; color:#555; }
        .contact-item-email .contact-name { color:#333; }
        .contact-item-email .contact-sub { color:#999; }
        /* ── SHARE SHEET ── */
        #share-sheet { display:none; position:absolute; bottom:0; left:0; right:0; z-index:500;
            background:var(--card); border-radius:24px 24px 0 0; border-top:1px solid var(--border);
            padding:12px 0 calc(20px + env(safe-area-inset-bottom,0px));
            box-shadow:0 -8px 32px rgba(0,0,0,.4);
            transform:translateY(100%); transition:transform .28s cubic-bezier(.4,0,.2,1); }
        #share-sheet.open { display:block; transform:translateY(0); }
        #share-backdrop { display:none; position:absolute; top:0; left:0; right:0; bottom:0;
            z-index:499; background:rgba(0,0,0,.4); }
        #share-backdrop.open { display:block; }
        .share-handle { width:40px; height:4px; background:var(--border); border-radius:4px; margin:0 auto 14px; }
        .share-title { font-size:.78rem; font-weight:600; color:var(--ink-dim); text-align:center; padding:0 20px 12px; }
        .share-row { display:flex; justify-content:space-around; padding:0 8px 16px; }
        .share-btn { display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer;
            background:none; border:none; color:var(--ink); min-width:60px; }
        .share-icon { width:50px; height:50px; border-radius:50%; display:flex; align-items:center;
            justify-content:center; font-size:1.4rem; border:1px solid var(--border); }
        .share-btn span { font-size:.62rem; color:var(--ink-dim); }
        .share-divider { border:none; border-top:1px solid var(--border); margin:0 20px 12px; }
        .share-copy-row { padding:0 20px; }
        .share-copy-box { background:var(--surface); border:1px solid var(--border); border-radius:12px;
            padding:10px 14px; display:flex; align-items:center; gap:10px; }
        .share-copy-text { flex:1; font-size:.72rem; color:var(--ink-dim); overflow:hidden;
            text-overflow:ellipsis; white-space:nowrap; }
        .share-copy-btn { background:var(--accent); color:#0B1120; border:none; border-radius:8px;
            padding:6px 12px; font-size:.72rem; font-weight:700; cursor:pointer; white-space:nowrap; }
        /* ── LANDSCAPE HINT ── */
        #rotate-hint {
            display: none;
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            z-index: 9999;
            background: #0B1120;
            flex-direction: column;
            align-items: center; justify-content: center;
            gap: 20px; color: #F0F4FF; text-align: center; padding: 32px;
        }
        #rotate-hint .rotate-icon {
            font-size: 56px;
            animation: rotateAnim 1.5s ease-in-out infinite;
        }
        @keyframes rotateAnim {
            0%   { transform: rotate(0deg); }
            40%  { transform: rotate(-90deg); }
            60%  { transform: rotate(-90deg); }
            100% { transform: rotate(0deg); }
        }
        #rotate-hint .rotate-title {
            font-size: 1.1rem; font-weight: 600; color: #F0F4FF;
        }
        #rotate-hint .rotate-sub {
            font-size: 0.8rem; color: #8899BB; line-height: 1.6;
        }
        @media (orientation: landscape) and (max-height: 500px) {
            #rotate-hint { display: flex; }
            #app { display: none !important; }
        }