*{margin:0;padding:0;box-sizing:border-box}
:root{
  --primary:#77C706;
  --primary-dark:#5EA307;
  --primary-light:#EAF7D3;
  --on-primary:#1F2A30;
  --text:#1A1A2E;
  --text-secondary:#6B7280;
  --text-muted:#9CA3AF;
  --surface:#FFFFFF;
  --surface-2:#F8F9FA;
  --surface-3:#F1F3F5;
  --border:#E5E7EB;
  --red:#EF4444;
  --red-light:#FEF2F2;
  --green:#22C55E;
  --green-light:#F0FDF4;
  --blue:#3B82F6;
  --blue-light:#EFF6FF;
  --yellow:#F59E0B;
  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.06);
  --shadow-md:0 4px 6px rgba(0,0,0,.07),0 2px 4px rgba(0,0,0,.06);
  --shadow-lg:0 10px 15px rgba(0,0,0,.1),0 4px 6px rgba(0,0,0,.05);
  --shadow-xl:0 20px 25px rgba(0,0,0,.1),0 8px 10px rgba(0,0,0,.04);
  --radius:16px;
  --radius-sm:12px;
  --radius-lg:20px;
  --radius-xl:24px;
  --pill-bg:rgba(255,255,255,.92);
  --pill-text:#1A1A2E;
  --pill-muted:#6B7280;
  --toast-bg:#1A1A2E;
  --toast-text:#FFFFFF;
  color-scheme:light dark;
}
[data-theme="dark"]{
  --primary-light:rgba(119,199,6,.18);
  --pill-bg:rgba(38,51,59,.92);
  --pill-text:#F6F7F4;
  --pill-muted:#9FB0B8;
  --toast-bg:#F6F7F4;
  --toast-text:#1F2A30;
  --text:#F6F7F4;
  --text-secondary:#9FB0B8;
  --text-muted:#6B7B83;
  --surface:#1F2A30;
  --surface-2:#26333B;
  --surface-3:#2C3B44;
  --border:#33424B;
  --shadow-sm:0 1px 2px rgba(0,0,0,.2);
  --shadow:0 1px 3px rgba(0,0,0,.3),0 1px 2px rgba(0,0,0,.2);
  --shadow-md:0 4px 6px rgba(0,0,0,.3),0 2px 4px rgba(0,0,0,.2);
  --shadow-lg:0 10px 15px rgba(0,0,0,.4),0 4px 6px rgba(0,0,0,.2);
  --shadow-xl:0 20px 25px rgba(0,0,0,.5),0 8px 10px rgba(0,0,0,.2);
}
html,body{height:100%;overflow:hidden}
body{font-family:'Poppins',-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',Roboto,sans-serif;background:var(--surface-3);color:var(--text);-webkit-font-smoothing:antialiased}
.screen{position:fixed;top:0;left:0;width:100%;height:100%}

/* ===== THEME TOGGLE ===== */
.theme-toggle{position:fixed;top:12px;right:12px;z-index:60;width:40px;height:40px;border:none;background:var(--surface);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);color:var(--text-secondary);transition:all .2s}
.theme-toggle:hover{background:var(--surface-2);transform:scale(1.05)}
.theme-toggle svg,.theme-toggle i{font-size:20px}
[data-theme="dark"] .theme-toggle .icon-sun{display:block}
[data-theme="dark"] .theme-toggle .icon-moon{display:none}
[data-theme="light"] .theme-toggle .icon-sun{display:none}
[data-theme="light"] .theme-toggle .icon-moon{display:block}
:not([data-theme]) .theme-toggle .icon-sun{display:none}
:not([data-theme]) .theme-toggle .icon-moon{display:block}

/* ===== AUTH ===== */
#auth-screen{display:flex;align-items:center;justify-content:center;background:var(--surface)}
.auth-container{width:100%;max-width:380px;padding:32px 24px}
.auth-header{text-align:center;margin-bottom:48px}
.auth-logo-light{display:inline-block}
.auth-logo-dark{display:none}
.auth-word{display:block;height:28px;width:auto;margin:0 auto 4px}
.auth-word-dark{display:none}
[data-theme="dark"] .auth-word-light{display:none}
[data-theme="dark"] .auth-word-dark{display:block}
[data-theme="dark"] .auth-logo-light{display:none}
[data-theme="dark"] .auth-logo-dark{display:inline-block}
.auth-icon{width:72px;height:72px;background:var(--primary);border-radius:20px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:20px}
.auth-icon svg,.auth-icon i{font-size:36px;color:var(--on-primary)}
.auth-header h1{font-size:26px;font-weight:700;color:var(--text);margin-bottom:4px;letter-spacing:-.3px}
.auth-subtitle{font-size:15px;color:var(--text-secondary)}
.auth-form{background:var(--surface);border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow-lg);border:1px solid var(--border)}
.input-group{margin-bottom:20px}
.input-group label{display:block;font-size:13px;font-weight:600;color:var(--text-secondary);margin-bottom:8px;text-transform:uppercase;letter-spacing:.3px}
.phone-input-wrapper{display:flex;align-items:center;border:2px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;transition:border-color .2s}
.phone-input-wrapper:focus-within{border-color:var(--primary)}
.phone-prefix{padding:14px 14px 14px 18px;font-size:16px;font-weight:500;color:var(--text);background:var(--surface-2);border-right:1px solid var(--border);user-select:none}
input[type="tel"],input[type="text"],input[type="url"]{width:100%;padding:14px 18px;font-size:16px;border:none;outline:none;background:transparent;font-family:inherit;color:var(--text)}
input:focus{outline:none}
.error-text{color:var(--red);font-size:13px;margin-bottom:12px;text-align:center;font-weight:500}
.btn-primary{width:100%;padding:16px;font-size:16px;font-weight:600;color:var(--on-primary);background:var(--primary);border:none;border-radius:var(--radius-sm);cursor:pointer;transition:all .2s;letter-spacing:-.1px}
.btn-primary:hover{background:var(--primary-dark);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn-primary:active{transform:translateY(0)}
.btn-primary:disabled{background:var(--surface-3);color:var(--text-muted);cursor:not-allowed;transform:none;box-shadow:none}
.settings-toggle{text-align:center;margin-top:16px}
.settings-toggle .btn-text{font-size:13px;color:var(--text-muted);text-transform:none;letter-spacing:0}
.settings-panel{margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.settings-panel input{width:100%;padding:10px 14px;font-size:13px;border:1px solid var(--border);border-radius:10px;font-family:monospace}
.settings-panel input:focus{border-color:var(--primary);outline:none}

/* ===== MAP ===== */
#map-screen{position:relative}
#map{width:100%;height:100%}

/* Top bar */
.top-bar{position:absolute;top:0;left:0;right:0;height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 8px;background:transparent;z-index:10;pointer-events:none}
.top-bar>*{pointer-events:auto}
.icon-btn{width:44px;height:44px;border:none;background:var(--pill-bg);backdrop-filter:blur(12px);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;color:var(--pill-text);box-shadow:var(--shadow)}
.icon-btn:hover{background:var(--pill-bg);filter:brightness(.96);transform:scale(1.05)}
.icon-btn:active{transform:scale(.95)}
.icon-btn svg,.icon-btn i{font-size:20px}
.driver-info{display:flex;align-items:center;gap:10px;background:var(--pill-bg);backdrop-filter:blur(12px);padding:8px 16px 8px 10px;border-radius:100px;box-shadow:var(--shadow)}
.driver-avatar{width:32px;height:32px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:var(--on-primary);overflow:hidden}
.driver-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.driver-name{font-size:14px;font-weight:600;color:var(--pill-text)}
.top-actions{display:flex;gap:8px}
.presence-on{color:var(--green);animation:pulse-green 2s ease-in-out infinite}
.presence-off{color:var(--text-muted)}
.presence-connecting{color:var(--yellow);animation:pulse-yellow 1s ease-in-out infinite}
@keyframes pulse-green{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes pulse-yellow{0%,100%{opacity:1}50%{opacity:.3}}
.unread-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;background:var(--red);color:#fff;border-radius:9px;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px;line-height:1}

/* Recenter FAB */
.map-fab{position:fixed;top:50%;right:16px;transform:translateY(-50%);width:48px;height:48px;border:none;background:var(--pill-bg);backdrop-filter:blur(12px);border-radius:50%;box-shadow:var(--shadow-md);cursor:pointer;display:none;align-items:center;justify-content:center;z-index:10;transition:all .15s}
.map-fab:active{transform:translateY(-50%) scale(.92)}
.map-fab svg,.map-fab i{font-size:20px;color:var(--pill-muted)}
.map-fab.pulse{display:flex;animation:fabPulse 2s ease-in-out infinite;border:2px solid var(--primary)}
@keyframes fabPulse{0%,100%{box-shadow:var(--shadow-md)}50%{box-shadow:0 0 0 8px rgba(119,199,6,.25),var(--shadow-md)}}

/* ===== RIDE CARD (bottom sheet) ===== */
.ride-card{position:absolute;bottom:0;left:0;right:0;background:var(--surface);border-radius:var(--radius-xl) var(--radius-xl) 0 0;padding:8px 20px 24px;box-shadow:var(--shadow-xl);z-index:5;max-height:70vh;overflow-y:auto;transition:transform .3s ease}
.ride-card-handle{width:36px;height:4px;background:var(--border);border-radius:2px;margin:0 auto 16px}
.ride-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.ride-card-title{font-size:18px;font-weight:700;color:var(--text);letter-spacing:-.3px}
.ride-count{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 8px;background:var(--primary);color:var(--on-primary);border-radius:100px;font-size:12px;font-weight:700}

/* ===== RIDE LIST ITEMS ===== */
.rides-list{display:flex;flex-direction:column;gap:10px}
.ride-item{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--surface-2);border-radius:var(--radius);border:2px solid transparent;cursor:pointer;transition:all .15s}
.ride-item:hover{border-color:var(--primary-light);background:var(--surface)}
.ride-item.selected{border-color:var(--primary);background:var(--primary-light)}
.ride-item-icon{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:20px}
.ride-item-icon.green{background:var(--green-light);color:var(--green)}
.ride-item-icon.blue{background:var(--blue-light);color:var(--blue)}
.ride-item-icon.red{background:var(--red-light);color:var(--red)}
.ride-item-body{flex:1;min-width:0}
.ride-item-name{font-size:15px;font-weight:600;color:var(--text);margin-bottom:2px}
.ride-item-addr{font-size:13px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ride-item-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
.ride-item-wait{font-size:12px;font-weight:600;color:var(--red)}
.ride-item-dist{font-size:13px;color:var(--text-secondary);font-weight:500}

/* ===== ACTIVE RIDE ===== */
.active-ride{padding-top:4px}
.ride-status-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:100px;font-size:13px;font-weight:600;margin-bottom:12px}
.badge-blue{background:var(--blue-light);color:var(--blue)}
.badge-yellow{background:#FEF3C7;color:#D97706}
.badge-green{background:var(--green-light);color:var(--green)}
.ride-passenger{font-size:20px;font-weight:700;color:var(--text);margin-bottom:4px;letter-spacing:-.3px}
.ride-address{font-size:14px;color:var(--text-secondary);margin-bottom:16px}

/* Progress bar */
.dwell-bar{margin-bottom:16px}
.dwell-bar-label{display:flex;justify-content:space-between;font-size:13px;color:var(--text-secondary);margin-bottom:6px}
.dwell-bar-track{height:6px;background:var(--surface-3);border-radius:3px;overflow:hidden}
.dwell-bar-fill{height:100%;background:var(--primary);border-radius:3px;transition:width 1s linear}

/* Action buttons grid */
.action-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.action-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:14px 12px;border:none;border-radius:var(--radius);cursor:pointer;font-size:12px;font-weight:600;transition:all .15s;min-height:64px}
.action-btn:active{transform:scale(.96)}
.action-btn img{width:28px;height:28px;object-fit:contain}
.action-btn svg,.action-btn i{font-size:22px}
.btn-maps{background:var(--surface-2);color:var(--text)}
.btn-maps:hover{background:var(--surface-3)}
.btn-waze{background:var(--surface-2);color:var(--text)}
.btn-waze:hover{background:var(--surface-3)}
.btn-chat{background:var(--green-light);color:var(--green-700,#166534)}
.btn-chat:hover{background:#DCFCE7}
.btn-cancel{background:var(--red-light);color:var(--red)}
.btn-cancel:hover{background:#FEE2E2}
.btn-dest{background:var(--blue-light);color:var(--blue)}
.btn-dest:hover{background:#DBEAFE}

/* Complete button */
.btn-complete{width:100%;padding:16px;font-size:16px;font-weight:700;color:var(--on-primary);background:var(--primary);border:none;border-radius:var(--radius-sm);cursor:pointer;margin-top:10px;transition:all .2s;letter-spacing:-.1px}
.btn-complete:hover{background:var(--primary-dark);box-shadow:var(--shadow-md)}

.complete-slider{margin-top:10px;user-select:none;-webkit-user-select:none;touch-action:pan-x}
.complete-slider-track{position:relative;height:56px;background:var(--surface-2);border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--border)}
.complete-slider-fill{position:absolute;left:0;top:0;height:100%;width:0;background:var(--green);border-radius:var(--radius-sm);pointer-events:none}
.complete-slider-thumb{position:absolute;left:4px;top:4px;width:48px;height:48px;background:var(--surface);border:1px solid var(--border);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:18px;font-weight:700;z-index:2;cursor:grab;overflow:hidden}
.complete-slider-thumb:active{cursor:grabbing}
.complete-slider-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:var(--text-secondary);pointer-events:none;z-index:1}
.complete-slider.success .complete-slider-thumb{background:var(--green);color:var(--on-primary)}
.complete-slider.success .complete-slider-fill{background:var(--green)}

/* ===== RIDE SHEET (take ride modal) ===== */
.ride-sheet{position:fixed;bottom:0;left:0;right:0;z-index:5;animation:slideUp .3s cubic-bezier(.16,1,.3,1)}
.ride-sheet-content{background:var(--surface);border-radius:var(--radius-xl) var(--radius-xl) 0 0;padding:8px 24px 36px;box-shadow:var(--shadow-xl);text-align:center}
.ride-sheet-handle{width:36px;height:4px;background:var(--border);border-radius:2px;margin:0 auto 20px}
.ride-sheet-passenger{font-size:22px;font-weight:700;color:var(--text);margin-bottom:4px;letter-spacing:-.3px}
.ride-sheet-dist{font-size:15px;color:var(--text-secondary);margin-bottom:20px}
.btn-take{width:100%;padding:18px;font-size:17px;font-weight:700;color:var(--on-primary);background:var(--primary);border:none;border-radius:var(--radius);cursor:pointer;transition:all .2s;letter-spacing:-.1px}
.btn-take:hover{background:var(--primary-dark);box-shadow:var(--shadow-lg)}
.btn-take:active{transform:scale(.98)}

@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}

/* ===== DESTINATION SHEET ===== */
.dest-suggestions{max-height:200px;overflow-y:auto;text-align:left}
.dest-suggestion{padding:14px 16px;border-bottom:1px solid var(--border);cursor:pointer;font-size:14px;transition:background .1s;display:flex;justify-content:space-between;align-items:center;gap:8px}
.dest-suggestion:hover,.dest-suggestion:active{background:var(--surface-2)}
.dest-suggestion-dist{font-size:12px;color:var(--text-muted);white-space:nowrap}

/* ===== OVERLAY SCREENS (history, chat) ===== */
.overlay-screen{position:fixed;inset:0;background:var(--surface);z-index:200;display:flex;flex-direction:column;animation:slideIn .25s cubic-bezier(.16,1,.3,1)}
@keyframes slideIn{from{transform:translateX(-100%)}to{transform:translateX(0)}}
.overlay-header{display:flex;align-items:center;justify-content:space-between;padding:4px 8px;height:56px;border-bottom:1px solid var(--border)}
.overlay-header h2{font-size:18px;font-weight:700;letter-spacing:-.2px}

/* History */
.history-list{flex:1;overflow-y:auto;padding:8px 0}
.history-date{font-size:12px;font-weight:600;color:var(--text-muted);text-transform:uppercase;padding:16px 20px 6px;letter-spacing:.5px}
.history-item{padding:16px 20px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .1s}
.history-item:active{background:var(--surface-2)}
.history-name{font-size:15px;font-weight:600;color:var(--text)}
.history-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.history-locations{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}
.history-location{display:flex;align-items:flex-start;gap:6px;font-size:13px;color:var(--text-secondary)}
.history-loc-icon{font-size:14px;margin-top:1px;flex-shrink:0}
.history-loc-from{color:var(--green)}
.history-loc-to{color:var(--red)}
.history-addr{line-height:1.3}
.history-details{display:flex;flex-wrap:wrap;gap:8px;font-size:12px;color:var(--text-muted);align-items:center}
.history-detail{display:inline-flex;align-items:center;gap:3px}
.history-detail i{font-size:13px}
.history-status{display:inline-flex;align-items:center;padding:3px 10px;border-radius:100px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.3px}
.status-completed{background:var(--green-light);color:var(--green)}
.status-cancelled{background:var(--red-light);color:var(--red)}
.status-no-show{background:#FEF3C7;color:#D97706}
.history-map{height:180px;border-radius:var(--radius);overflow:hidden;margin-top:12px;border:1px solid var(--border)}
.history-map-container{height:180px;border-radius:var(--radius);overflow:hidden;margin-top:12px;border:1px solid var(--border)}
.history-empty{text-align:center;padding:48px 20px;color:var(--text-muted);font-size:15px}

/* Chat */
.chat-messages{flex:1;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:8px}
.chat-msg{max-width:78%;padding:12px 16px;border-radius:18px;font-size:14px;line-height:1.45;word-wrap:break-word}
.chat-msg.outgoing{align-self:flex-end;background:var(--primary);color:var(--on-primary);border-bottom-right-radius:6px}
.chat-msg.incoming{align-self:flex-start;background:var(--surface-2);color:var(--text);border-bottom-left-radius:6px}
.chat-msg.system{align-self:center;background:none;color:var(--text-muted);font-size:12px;padding:4px 8px}
.chat-input-row{display:flex;align-items:center;gap:10px;padding:10px 16px;border-top:1px solid var(--border);background:var(--surface)}
.chat-input-row input{flex:1;padding:12px 18px;font-size:14px;border:1px solid var(--border);border-radius:100px;outline:none;font-family:inherit;background:var(--surface-2)}
.chat-input-row input:focus{border-color:var(--primary);background:var(--surface)}

/* Toast */
.toast{position:fixed;top:60px;left:50%;transform:translateX(-50%);background:var(--toast-bg);color:var(--toast-text);padding:12px 24px;border-radius:100px;font-size:14px;font-weight:500;z-index:50;box-shadow:var(--shadow-lg);animation:toastIn .3s ease}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(-10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* Dialog */
.dialog-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:50;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.dialog{background:var(--surface);border-radius:var(--radius-lg);padding:28px;min-width:300px;box-shadow:var(--shadow-xl)}
.dialog h3{font-size:18px;font-weight:700;margin-bottom:20px;text-align:center}
.dialog-actions{display:flex;justify-content:flex-end;gap:10px}

/* ===== MAP MARKERS ===== */
.map-marker-available{width:36px;height:36px;background:var(--red);border:3px solid white;border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:var(--shadow-md);display:flex;align-items:center;justify-content:center}
.map-marker-available .marker-label{transform:rotate(45deg);font-size:11px;font-weight:700;color:white}
.map-marker-active{width:40px;height:40px;background:var(--green);border:3px solid white;border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 0 16px rgba(34,197,94,.4)}
.map-marker-active .marker-label{transform:rotate(45deg);font-size:13px;font-weight:700;color:white}
.user-dot{width:18px;height:18px;background:var(--blue);border:3px solid white;border-radius:50%;box-shadow:0 0 10px rgba(59,130,246,.4)}

/* Logo map marker */
.map-marker-logo{width:40px;height:52px;position:relative;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));cursor:pointer}
.map-marker-logo img{width:100%;height:100%;object-fit:contain}
.map-marker-pin{width:36px;height:50px;cursor:pointer;filter:drop-shadow(0 3px 6px rgba(0,0,0,.3))}
.map-marker-pin img{width:100%;height:100%}
.map-marker-driver{width:44px;height:44px;filter:drop-shadow(0 2px 8px rgba(119,199,6,.5));transition:left .5s ease,top .5s ease}
.map-marker-driver img{width:100%;height:100%}

[data-theme="light"] .map-marker-logo{filter:drop-shadow(0 2px 6px rgba(255,255,255,.6))}
[data-theme="light"] .map-marker-pin{filter:drop-shadow(0 3px 6px rgba(255,255,255,.6))}

/* Destination row */
.dest-row{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--surface-2);border-radius:var(--radius-sm);margin-bottom:12px;font-size:14px;color:var(--text-secondary)}
.dest-row svg,.dest-row i{font-size:18px;flex-shrink:0;color:var(--red)}

/* ===== SPLASH ===== */
.splash{position:fixed;inset:0;z-index:100;background:#1F2A30;display:flex;align-items:center;justify-content:center;transition:opacity .45s ease,visibility .45s ease}
.splash-hide{opacity:0;visibility:hidden;pointer-events:none}
.splash-inner{display:flex;flex-direction:column;align-items:center;gap:16px}
.splash-logo{width:96px;height:96px;animation:splashPop .7s cubic-bezier(.34,1.56,.64,1) both}
.splash-word{height:24px;width:auto;opacity:0;animation:splashFade .6s ease .35s forwards}
.splash-route{width:140px;height:36px;margin-top:4px;overflow:visible}
.splash-path{stroke-dasharray:170;stroke-dashoffset:170;animation:splashDraw 1.3s ease .25s forwards}
.splash-dot{opacity:0;animation:splashDotPulse 1.2s ease-in-out .3s infinite}
.splash-loader{display:flex;gap:8px;margin-top:8px}
.splash-loader span{width:8px;height:8px;border-radius:50%;background:#77C706;animation:splashBounce 1s ease-in-out infinite}
.splash-loader span:nth-child(2){animation-delay:.15s}
.splash-loader span:nth-child(3){animation-delay:.3s}
@keyframes splashPop{0%{opacity:0;transform:scale(.5) rotate(-6deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes splashFade{to{opacity:1}}
@keyframes splashDraw{to{stroke-dashoffset:0}}
@keyframes splashDotPulse{0%,100%{opacity:.4}50%{opacity:1}}
@keyframes splashBounce{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-7px);opacity:1}}
@media (prefers-reduced-motion:reduce){
  .splash-logo,.splash-word,.splash-path,.splash-dot,.splash-loader span{animation:none}
  .splash-word{opacity:1}
  .splash-path{stroke-dashoffset:0}
  .splash-dot{opacity:1}
}

/* ===== MAIN MENU (bottom burger) ===== */

.menu-content{text-align:left}
.menu-rows{display:flex;flex-direction:column;gap:4px;padding-bottom:10px}
.menu-row{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;border:none;background:none;border-radius:14px;font:inherit;font-size:15px;font-weight:600;color:var(--text);cursor:pointer;transition:background .15s}
.menu-row svg,.menu-row i{font-size:22px;color:var(--text-secondary);flex-shrink:0}
.menu-row:active,.menu-row:hover{background:var(--surface-2)}
.menu-row-danger{color:var(--red)}
.menu-row-danger svg,.menu-row-danger i{color:var(--red)}

/* ===== PROFILE ===== */
.profile-content{flex:1;overflow-y:auto;padding:24px 20px 48px}
.profile-hero{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:26px}
.profile-avatar{width:88px;height:88px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:800;color:var(--on-primary);overflow:hidden}
.profile-avatar img{width:100%;height:100%;object-fit:cover}
.btn-text-link{background:none;border:none;font:inherit;font-size:14px;font-weight:600;color:var(--primary-dark);cursor:pointer;padding:6px 10px}
[data-theme="dark"] .btn-text-link{color:var(--primary)}
.profile-field{margin-bottom:18px}
.profile-field label{display:block;font-size:13px;font-weight:600;color:var(--text-secondary);margin-bottom:8px;text-transform:uppercase;letter-spacing:.3px}
.profile-field input{color:var(--text)}
.profile-carphoto{border:1.5px dashed var(--border);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;align-items:center;gap:12px;margin:8px 0 24px}
.profile-carphoto img{width:100%;max-height:200px;object-fit:cover;border-radius:12px}
.profile-carphoto-empty{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--text-muted);font-size:13px}
.profile-carphoto-empty svg,.profile-carphoto-empty i{font-size:40px}