:root{--bg:#effcff;--bg2:#d9f7ff;--card:rgba(255,255,255,.78);--text:#062f44;--muted:#5b7f8e;--primary:#00a9c4;--primary2:#25d4c6;--deep:#04718d;--gold:#f5b521;--danger:#ff4b3a;--success:#10b981;--shadow:0 22px 60px rgba(0,112,145,.14);--radius:26px} *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--text);background:radial-gradient(circle at 16% 4%,rgba(37,212,198,.23),transparent 28%),radial-gradient(circle at 90% 8%,rgba(0,169,196,.17),transparent 32%),linear-gradient(180deg,#f5feff 0%,#ffffff 48%,#e1f9ff 100%);min-height:100vh;overflow-x:hidden}body[dir=rtl]{font-family:system-ui,"Segoe UI",Tahoma,Arial,sans-serif}button,input,textarea,select{font:inherit}a{color:inherit;text-decoration:none}.hidden{display:none!important} .ocean-bg{position:fixed;inset:0;z-index:-1;overflow:hidden}.ocean-bg span{position:absolute;left:-10%;width:120%;height:120px;border-radius:50%;background:rgba(255,255,255,.38);animation:wave 10s ease-in-out infinite;filter:blur(1px)}.ocean-bg span:nth-child(1){bottom:12%}.ocean-bg span:nth-child(2){bottom:7%;animation-delay:-3s;opacity:.65}.ocean-bg span:nth-child(3){bottom:2%;animation-delay:-6s;opacity:.45}@keyframes wave{0%,100%{transform:translateX(-3%) translateY(0) rotate(-1deg)}50%{transform:translateX(3%) translateY(-14px) rotate(1deg)}} .topbar{position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px clamp(12px,4vw,48px);backdrop-filter:blur(18px);background:rgba(244,253,255,.84);border-bottom:1px solid rgba(0,127,160,.10)}.brand img{height:48px;max-width:170px;object-fit:contain}.top-actions{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}.lang-select{height:42px;border:1px solid rgba(0,127,160,.16);background:#fff;border-radius:999px;padding:0 10px;color:var(--deep);font-weight:900;max-width:115px} .btn{border:0;border-radius:999px;padding:12px 17px;font-weight:950;cursor:pointer;transition:.22s ease;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}.btn:hover{transform:translateY(-2px)}.btn.primary,.primary{color:white;background:linear-gradient(135deg,var(--primary),var(--primary2));box-shadow:0 14px 34px rgba(0,169,196,.24)}.btn.glass,.btn.ghost{background:rgba(255,255,255,.76);color:var(--deep);border:1px solid rgba(0,127,160,.14)}.btn.danger,.danger{background:rgba(255,100,124,.12);color:#ba2340}.btn.google{background:#fff;color:#17313c;border:1px solid rgba(0,0,0,.08)}.btn.big{padding:15px 22px;font-size:16px}.full{width:100%} .card{border:1px solid rgba(0,127,160,.13);background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.74));box-shadow:var(--shadow);border-radius:var(--radius);backdrop-filter:blur(18px)}.badge{display:inline-flex;align-items:center;border-radius:999px;padding:9px 14px;font-weight:950;background:rgba(37,212,198,.18);color:#04718d;border:1px solid rgba(0,169,196,.18)}.badge.soft{background:rgba(255,255,255,.66)} .landing{padding:28px clamp(14px,4vw,56px) 40px}.landing-hero{text-align:center;max-width:1050px;margin:auto;padding:16px 0 8px}.hero-logo-wrap{position:relative;display:flex;justify-content:center;align-items:center;margin:0 auto 8px}.hero-logo-wrap:before{content:"";position:absolute;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(0,220,255,.22),rgba(20,227,200,.10),transparent 70%);filter:blur(24px);z-index:-1}.hero-logo{width:min(96vw,560px);max-height:255px;object-fit:contain;filter:drop-shadow(0 16px 34px rgba(0,130,170,.22));animation:heroFloat 5s ease-in-out infinite}@keyframes heroFloat{50%{transform:translateY(-7px)}}.landing h1{font-size:clamp(42px,8vw,82px);line-height:.92;margin:14px auto 12px;max-width:900px;background:linear-gradient(135deg,#062f44 0%,#04718d 48%,#00a9c4 100%);-webkit-background-clip:text;background-clip:text;color:transparent}.landing-hero p{font-size:clamp(17px,2.5vw,23px);line-height:1.6;color:var(--muted);max-width:820px;margin:0 auto 18px}.hero-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap} .preview-map-card{max-width:1120px;margin:28px auto;padding:20px;display:grid;grid-template-columns:.9fr 1.4fr;gap:18px;align-items:center}.map-preview-copy h2{font-size:clamp(26px,4vw,42px);margin:12px 0 8px}.map-preview-copy p{color:var(--muted);line-height:1.65}.preview-map{position:relative;min-height:430px;border-radius:24px;overflow:hidden;border:1px solid rgba(0,210,255,.22);background:radial-gradient(circle at 20% 30%,rgba(0,255,225,.18),transparent 22%),radial-gradient(circle at 75% 70%,rgba(0,169,196,.22),transparent 26%),linear-gradient(135deg,#031827,#08344a 48%,#025c72);box-shadow:inset 0 0 90px rgba(0,202,255,.16),0 22px 70px rgba(0,112,145,.18)}.map-grid{position:absolute;inset:0;opacity:.46;background-image:linear-gradient(rgba(0,220,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(0,220,255,.12) 1px,transparent 1px);background-size:54px 54px}.scan-circle{position:absolute;left:50%;top:50%;width:170px;height:170px;border:1.5px solid rgba(0,235,255,.32);border-radius:50%;transform:translate(-50%,-50%);animation:scanPulse 3s infinite}.scan-circle.two{animation-delay:1.1s}@keyframes scanPulse{0%{scale:.5;opacity:.95}100%{scale:2.4;opacity:0}}.hotspot{position:absolute;width:22px;height:22px;border-radius:50%;background:#2cf8d4;box-shadow:0 0 0 8px rgba(44,248,212,.16),0 0 32px rgba(44,248,212,.85);z-index:3;animation:hotPulse 2s infinite}.hotspot:after{content:attr(data-label);position:absolute;left:28px;top:-5px;white-space:nowrap;color:white;font-weight:900;font-size:12px;background:rgba(2,25,43,.72);border:1px solid rgba(0,210,255,.24);padding:6px 9px;border-radius:999px;backdrop-filter:blur(8px)}.hotspot.vip{background:var(--gold);box-shadow:0 0 0 8px rgba(245,181,33,.18),0 0 35px rgba(245,181,33,.85)}.hotspot.safe{background:#7cffec}.h1{left:23%;top:35%}.h2{right:24%;top:28%}.h3{left:48%;bottom:26%}.h4{right:35%;bottom:39%}@keyframes hotPulse{50%{scale:1.12}}.map-stat{position:absolute;z-index:4;top:16px;padding:12px 14px;border-radius:18px;background:rgba(2,25,43,.7);border:1px solid rgba(0,210,255,.26);color:white;backdrop-filter:blur(10px)}.map-stat.left{left:16px}.map-stat.right{right:16px}.map-stat small{display:block;color:#8dfcff;font-weight:900;text-transform:uppercase;font-size:11px}.map-stat strong{font-size:28px}.map-bottom{position:absolute;z-index:4;left:16px;right:16px;bottom:16px;display:flex;align-items:center;gap:10px;padding:13px 14px;border-radius:18px;background:rgba(2,25,43,.76);border:1px solid rgba(0,210,255,.26);color:white;backdrop-filter:blur(10px)} .features-section{max-width:1120px;margin:auto}.section-head{text-align:center;margin:24px 0}.section-head h2{font-size:clamp(28px,4vw,44px);margin:12px 0 0}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.feature-card{padding:22px;min-height:205px;position:relative;overflow:hidden}.feature-card span{font-size:38px}.feature-card h3{font-size:22px;margin:12px 0 8px}.feature-card p{color:var(--muted);line-height:1.55}.premium-feature{background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(255,247,220,.78))}.landing-cta{margin:24px 0 0;padding:22px;display:flex;justify-content:space-between;align-items:center;gap:14px}.landing-cta h2{margin:0 0 6px}.landing-cta p{margin:0;color:var(--muted);line-height:1.5} .app-dashboard{padding:26px clamp(14px,4vw,56px)}.welcome-card{max-width:1120px;margin:0 auto 20px;padding:20px;display:flex;align-items:center;gap:16px;background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(222,249,255,.74))}.welcome-card h2{margin:0 0 6px;font-size:clamp(24px,4vw,38px)}.welcome-card p{margin:0;color:var(--muted);font-weight:800}.satellite-pulse{position:relative;width:70px;height:70px;border-radius:24px;display:grid;place-items:center;background:linear-gradient(135deg,#eaffff,#bdf8ff);box-shadow:0 0 38px rgba(0,220,255,.32)}.satellite-pulse span{font-size:34px;z-index:2}.satellite-pulse i{position:absolute;inset:-10px;border:2px solid rgba(0,188,212,.28);border-radius:30px;animation:satPulse 2.2s infinite}@keyframes satPulse{0%{scale:.7;opacity:1}100%{scale:1.35;opacity:0}}.dashboard-grid{max-width:1120px;margin:auto;display:grid;grid-template-columns:1fr .85fr;gap:18px}.dashboard-grid.bottom{margin-top:18px}.smart-card,.weather-card,.ai-card,.chat-card,.map-card{padding:20px}.sea-search-row{display:grid;gap:10px;margin:14px 0}.choice-row{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.chip{padding:10px 13px;border-radius:999px;border:1px solid rgba(0,127,160,.14);background:#fff;color:var(--deep);font-weight:950;cursor:pointer}.chip.active{background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff}.metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.metric{padding:16px;border-radius:20px;background:rgba(255,255,255,.72);border:1px solid rgba(0,117,153,.08)}.metric small{display:block;color:var(--muted);font-weight:900}.metric strong{display:block;font-size:24px;margin-top:4px}.tip-row{display:flex;gap:14px;align-items:center;margin-bottom:16px}.tip-row>span{font-size:36px}.tip-row small{display:block;color:var(--muted);font-weight:900}.tip-row strong{font-size:20px}.spot-results{margin-top:14px;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.spot{min-height:76px;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:14px;border-radius:20px;background:rgba(255,255,255,.78);border:1px solid rgba(0,127,160,.10)}.spot span{font-size:13px;font-weight:950;color:#4f7280}.spot b{font-size:21px;line-height:1.25}.scan-head{grid-column:1/-1;background:linear-gradient(135deg,rgba(0,188,212,.18),rgba(34,211,238,.10))}.good{color:#059c7f}.gold{color:#d6951f}.section{padding:34px 0}.section.compact{max-width:1120px;margin:auto}#map{width:100%;height:480px;border-radius:22px;overflow:hidden;border:1px solid rgba(0,117,153,.13);background:#dff8ff} textarea,input{width:100%;border:1px solid rgba(0,117,153,.14);border-radius:18px;padding:14px;background:rgba(255,255,255,.75);outline:none;color:var(--text);margin:8px 0}textarea:focus,input:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(0,168,200,.10)}.answer{margin-top:12px;padding:14px;border-radius:18px;background:rgba(0,168,200,.09);line-height:1.55}.chat-box{display:grid;gap:8px;margin:16px 0}.chat-box p{margin:0;padding:12px;border-radius:16px;background:rgba(255,255,255,.65)} .footer{text-align:center;padding:34px 16px;color:var(--muted);font-weight:900}.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px;background:rgba(4,39,51,.38);backdrop-filter:blur(10px)}.modal-card{width:min(100%,455px);padding:24px;position:relative}.close-btn{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;border:0;background:rgba(0,117,153,.08);font-size:24px;cursor:pointer}.divider{display:flex;align-items:center;gap:10px;color:var(--muted);margin:14px 0}.divider:before,.divider:after{content:"";height:1px;background:rgba(0,117,153,.12);flex:1}.auth-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.status{min-height:24px;color:var(--deep);font-weight:850}.toast{position:fixed;z-index:120;left:50%;bottom:24px;transform:translateX(-50%);padding:13px 18px;border-radius:999px;background:#073849;color:white;font-weight:950;box-shadow:var(--shadow);max-width:90%;text-align:center} .hotspot-pin{position:relative;width:38px;height:38px;display:grid;place-items:center;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:linear-gradient(135deg,#0adfff,#35f6cc);box-shadow:0 0 0 6px rgba(0,220,255,.14),0 0 36px rgba(0,220,255,.72)}.hotspot-pin span{transform:rotate(45deg);font-size:18px}.hotspot-pin i{position:absolute;inset:-14px;border:2px solid rgba(0,220,255,.45);border-radius:50%;animation:radarRing 2.2s infinite}@keyframes radarRing{0%{transform:scale(.45);opacity:1}100%{transform:scale(1.75);opacity:0}} @media(max-width:900px){ .preview-map-card,.dashboard-grid{grid-template-columns:1fr} .feature-grid{grid-template-columns:repeat(2,1fr)} .landing-cta{flex-direction:column;align-items:flex-start} #map{height:560px!important;min-height:560px!important} .plans-grid{grid-template-columns:1fr!important} .profile-subscription-grid{grid-template-columns:1fr!important} .preview-map{min-height:540px!important} } @media(max-width:560px){ .topbar{padding:8px 12px!important;align-items:flex-start} .brand img{height:46px!important;max-width:160px!important;min-width:100px!important} .top-actions{gap:6px;justify-content:flex-end} .lang-select{max-width:96px;height:38px;font-size:13px} .btn{padding:10px 12px;font-size:13px} .hero-logo{width:min(90vw,360px)!important;max-height:180px!important} .hero-logo-wrap:before{width:190px!important;height:190px!important} .landing h1{font-size:38px!important} .preview-map{min-height:535px!important} .preview-map:before{width:76px!important;height:76px!important;font-size:42px!important;right:12px!important;top:112px!important;bottom:105px} .hotspot:after{display:none} .map-stat strong{font-size:22px} .map-stat{min-width:105px!important} .feature-grid{grid-template-columns:1fr} .metrics{grid-template-columns:1fr 1fr} .spot-results{grid-template-columns:1fr!important} .spot b{font-size:19px} .welcome-card{align-items:flex-start} .satellite-pulse{width:58px;height:58px;border-radius:20px} .satellite-pulse span{font-size:28px} .auth-actions{grid-template-columns:1fr} .map-legend{right:10px!important;top:180px!important;padding:10px;font-size:10px!important;max-width:160px!important} .map-metric-panel{left:10px!important;bottom:88px!important;font-size:11px;padding:10px} .map-bottom{font-size:12px;padding:12px 10px} .welcome-toast{top:72px;padding:14px} .welcome-toast .wt-icon{width:48px;height:48px;border-radius:18px;font-size:25px} .map-current-panel{right:10px!important;bottom:88px!important;font-size:11px!important;padding:10px!important} #map{height:550px!important;min-height:550px!important} .area-report{grid-template-columns:1fr!important} } /* === TideIQ V15.1 Final Fixes === */ .hero-logo,.brand img{background:transparent!important;border:none!important;box-shadow:none!important;filter:drop-shadow(0 14px 28px rgba(0,145,185,.18))!important} .hero-logo{width:min(88vw,430px)!important;max-height:205px!important;object-fit:contain!important} .hero-logo-wrap:before{width:230px!important;height:230px!important;background:radial-gradient(circle,rgba(0,220,255,.16),rgba(20,227,200,.08),transparent 70%)!important} .preview-map-card{grid-template-columns:1fr!important;padding:18px!important} .preview-map{min-height:520px!important;background:radial-gradient(circle at 20% 30%,rgba(0,255,225,.25),transparent 22%),radial-gradient(circle at 76% 68%,rgba(0,169,196,.30),transparent 27%),radial-gradient(circle at 50% 45%,rgba(245,181,33,.10),transparent 22%),linear-gradient(135deg,#021522,#07324a 45%,#025f76)!important} .preview-map:before{content:"";position:absolute;right:18px;top:78px;z-index:5;width:56px;height:56px;display:grid;place-items:center;border-radius:20px;background-color:rgba(255,255,255,.12);background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M13%207%209%203%205%207l4%204%22/%3E%3Cpath%20d%3D%22m17%2011%204%204-4%204-4-4%22/%3E%3Cpath%20d%3D%22m8%2012%204%204%206-6-4-4Z%22/%3E%3Cpath%20d%3D%22M16%208%202%2022%22/%3E%3Cpath%20d%3D%22M17.5%2015H9%22/%3E%3C/svg%3E');background-repeat:no-repeat;background-position:center;background-size:55%;border:1px solid rgba(0,235,255,.28);box-shadow:0 0 30px rgba(0,235,255,.25);backdrop-filter:blur(10px);animation:satelliteFloat 4s ease-in-out infinite} @keyframes satelliteFloat{50%{transform:translateY(-8px) rotate(4deg)}} .map-grid{background-size:42px 42px!important;opacity:.62!important}.scan-circle{border-color:rgba(0,235,255,.42)!important} .hotspot{width:26px!important;height:26px!important}.h1{left:22%!important;top:32%!important}.h2{right:23%!important;top:25%!important}.h3{left:47%!important;bottom:23%!important}.h4{right:33%!important;bottom:42%!important} .landing-plans-section{max-width:1120px;margin:28px auto 0}.plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.plan{padding:22px;position:relative;overflow:hidden}.plan h3{font-size:22px;margin:12px 0 8px}.plan p,.plan li{color:var(--muted);line-height:1.55}.plan ul{padding-inline-start:20px;margin:14px 0 18px}.vip-plan{border-color:rgba(245,181,33,.28)!important;background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,248,222,.76))!important}.premium-plan{border-color:rgba(0,188,212,.24)!important;background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(224,249,255,.76))!important} .profile-subscription-section{max-width:1120px;margin:0 auto}.profile-subscription-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:18px}.profile-card,.upgrade-card{padding:20px}.profile-card{display:flex;gap:14px;align-items:center}.profile-sat{width:58px;height:58px;border-radius:22px;display:grid;place-items:center;font-size:30px;background:linear-gradient(135deg,#eaffff,#bdf8ff);box-shadow:0 0 34px rgba(0,220,255,.24)}.profile-card small{color:var(--muted);font-weight:900}.profile-card h3{margin:4px 0;font-size:24px}.profile-card p{margin:0;color:var(--deep);font-weight:900} .chat-card{background:radial-gradient(circle at top right,rgba(0,220,255,.16),transparent 34%),linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.74))!important}.chat-card h2:before{content:"";display:inline-block;width:20px;height:20px;vertical-align:-4px;margin-inline-end:6px;background-color:#7c5cff;-webkit-mask:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2011.5a8.38%208.38%200%200%201-.9%203.8%208.5%208.5%200%200%201-7.6%204.7%208.38%208.38%200%200%201-3.8-.9L3%2021l1.9-5.7a8.38%208.38%200%200%201-.9-3.8%208.5%208.5%200%200%201%204.7-7.6%208.38%208.38%200%200%201%203.8-.9h.5a8.48%208.48%200%200%201%208%208v.5z%22/%3E%3C/svg%3E') center/contain no-repeat;mask:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2011.5a8.38%208.38%200%200%201-.9%203.8%208.5%208.5%200%200%201-7.6%204.7%208.38%208.38%200%200%201-3.8-.9L3%2021l1.9-5.7a8.38%208.38%200%200%201-.9-3.8%208.5%208.5%200%200%201%204.7-7.6%208.38%208.38%200%200%201%203.8-.9h.5a8.48%208.48%200%200%201%208%208v.5z%22/%3E%3C/svg%3E') center/contain no-repeat}.chat-box p{border:1px solid rgba(0,168,200,.10)} /* V15.1.1 Login/Create modal fix */ #emailAuthFields .auth-actions{ margin-top:8px; } #loginBtn{ min-height:48px; } #createBtn{ min-height:48px; } /* === TideIQ V15.2 All Fixes === */ .hero-logo,.brand img{background:transparent!important;border:none!important;box-shadow:none!important;filter:drop-shadow(0 14px 28px rgba(0,145,185,.18))!important} .hero-logo{width:min(86vw,420px)!important;max-height:195px!important;object-fit:contain!important} .brand img{height:42px!important;max-width:150px!important} .hero-logo-wrap:before{width:220px!important;height:220px!important;background:radial-gradient(circle,rgba(0,220,255,.16),rgba(20,227,200,.08),transparent 70%)!important} .preview-map-card{grid-template-columns:1fr!important;padding:18px!important;overflow:hidden}.map-preview-copy{text-align:center}.map-preview-copy h2{font-size:clamp(25px,5.2vw,44px)!important;line-height:1.15!important} .preview-map{min-height:560px!important;background:linear-gradient(180deg,rgba(2,15,30,.18),rgba(2,15,30,.72)),radial-gradient(circle at 20% 30%,rgba(0,255,225,.25),transparent 22%),radial-gradient(circle at 76% 68%,rgba(0,169,196,.32),transparent 27%),url("satellite-hero.jpg") center/cover no-repeat!important;box-shadow:inset 0 0 100px rgba(0,202,255,.22),0 26px 80px rgba(0,112,145,.22)!important} .preview-map:before{content:"";position:absolute;right:18px;bottom:110px;z-index:5;width:64px;height:64px;display:grid;place-items:center;border-radius:22px;background-color:rgba(255,255,255,.12);background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M13%207%209%203%205%207l4%204%22/%3E%3Cpath%20d%3D%22m17%2011%204%204-4%204-4-4%22/%3E%3Cpath%20d%3D%22m8%2012%204%204%206-6-4-4Z%22/%3E%3Cpath%20d%3D%22M16%208%202%2022%22/%3E%3Cpath%20d%3D%22M17.5%2015H9%22/%3E%3C/svg%3E');background-repeat:no-repeat;background-position:center;background-size:55%;border:1px solid rgba(0,235,255,.28);box-shadow:0 0 34px rgba(0,235,255,.28);backdrop-filter:blur(10px);animation:satelliteFloat 4s ease-in-out infinite}@keyframes satelliteFloat{50%{transform:translateY(-8px) rotate(4deg)}} .map-grid{background-size:40px 40px!important;opacity:.72!important}.scan-circle{border-color:rgba(0,235,255,.55)!important;box-shadow:0 0 30px rgba(0,235,255,.18)}.hotspot{width:28px!important;height:28px!important}.h1{left:24%!important;top:34%!important}.h2{right:28%!important;top:30%!important}.h3{left:50%!important;bottom:27%!important}.h4{right:40%!important;bottom:43%!important} .map-stat{min-width:130px;background:rgba(2,25,43,.78)!important}.map-legend{position:absolute;z-index:5;right:18px;top:140px;display:grid;gap:10px;padding:14px;border-radius:18px;color:#fff;background:rgba(2,25,43,.72);border:1px solid rgba(0,210,255,.26);backdrop-filter:blur(10px)}.map-legend small{display:flex;align-items:center;gap:8px;font-weight:900}.dot{width:10px;height:10px;border-radius:50%;display:inline-block}.dot.green{background:#2cf8d4;box-shadow:0 0 12px #2cf8d4}.dot.gold{background:#f5b521;box-shadow:0 0 12px #f5b521}.dot.blue{background:#38bdf8;box-shadow:0 0 12px #38bdf8} .map-metric-panel{position:absolute;z-index:5;left:18px;bottom:90px;display:grid;grid-template-columns:auto auto;gap:6px 12px;align-items:center;padding:13px 15px;border-radius:18px;background:rgba(2,25,43,.72);border:1px solid rgba(0,210,255,.26);color:#fff;backdrop-filter:blur(10px)}.map-metric-panel small{color:#8dfcff;font-weight:900}.map-metric-panel strong{font-size:18px}.map-bottom{justify-content:center;text-align:center;font-size:15px;font-weight:950} .landing-plans-section{max-width:1120px;margin:32px auto 0}.plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.plan{padding:22px;position:relative;overflow:hidden}.plan h3{font-size:22px;margin:12px 0 8px}.plan p,.plan li{color:var(--muted);line-height:1.55}.plan ul{padding-inline-start:20px;margin:14px 0 18px}.vip-plan{border-color:rgba(245,181,33,.28)!important;background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,248,222,.78))!important}.premium-plan{border-color:rgba(0,188,212,.24)!important;background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(224,249,255,.78))!important} .chat-card{background:radial-gradient(circle at top right,rgba(0,220,255,.16),transparent 34%),linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.78))!important}.chat-card h2:before{content:"";display:inline-block;width:20px;height:20px;vertical-align:-4px;margin-inline-end:6px;background-color:#7c5cff;-webkit-mask:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2011.5a8.38%208.38%200%200%201-.9%203.8%208.5%208.5%200%200%201-7.6%204.7%208.38%208.38%200%200%201-3.8-.9L3%2021l1.9-5.7a8.38%208.38%200%200%201-.9-3.8%208.5%208.5%200%200%201%204.7-7.6%208.38%208.38%200%200%201%203.8-.9h.5a8.48%208.48%200%200%201%208%208v.5z%22/%3E%3C/svg%3E') center/contain no-repeat;mask:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2011.5a8.38%208.38%200%200%201-.9%203.8%208.5%208.5%200%200%201-7.6%204.7%208.38%208.38%200%200%201-3.8-.9L3%2021l1.9-5.7a8.38%208.38%200%200%201-.9-3.8%208.5%208.5%200%200%201%204.7-7.6%208.38%208.38%200%200%201%203.8-.9h.5a8.48%208.48%200%200%201%208%208v.5z%22/%3E%3C/svg%3E') center/contain no-repeat}.chat-box p{border:1px solid rgba(0,168,200,.10)} /* === TideIQ V16 Final Stable Polish === */ .hero-logo,.brand img{ background:transparent!important; border:none!important; box-shadow:none!important; filter:drop-shadow(0 16px 30px rgba(0,145,185,.20))!important; } .hero-logo{ width:min(90vw,500px)!important; max-height:230px!important; object-fit:contain!important; } .brand img{ height:46px!important; max-width:165px!important; } .hero-logo-wrap:before{ width:255px!important; height:255px!important; background:radial-gradient(circle,rgba(0,220,255,.18),rgba(20,227,200,.09),transparent 70%)!important; } .preview-map-card{ grid-template-columns:1fr!important; padding:18px!important; overflow:hidden; } .map-preview-copy{ text-align:center; } .map-preview-copy h2{ font-size:clamp(25px,5.2vw,44px)!important; line-height:1.15!important; } .preview-map{ min-height:560px!important; background: linear-gradient(180deg,rgba(2,15,30,.16),rgba(2,15,30,.72)), radial-gradient(circle at 20% 30%,rgba(0,255,225,.25),transparent 22%), radial-gradient(circle at 76% 68%,rgba(0,169,196,.32),transparent 27%), url("satellite-hero.jpg") center/cover no-repeat!important; box-shadow:inset 0 0 100px rgba(0,202,255,.22),0 26px 80px rgba(0,112,145,.22)!important; } .preview-map:before{ content:"";background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M13%207%209%203%205%207l4%204%22/%3E%3Cpath%20d%3D%22m17%2011%204%204-4%204-4-4%22/%3E%3Cpath%20d%3D%22m8%2012%204%204%206-6-4-4Z%22/%3E%3Cpath%20d%3D%22M16%208%202%2022%22/%3E%3Cpath%20d%3D%22M17.5%2015H9%22/%3E%3C/svg%3E');background-repeat:no-repeat;background-position:center;background-size:55%; position:absolute; right:18px; bottom:110px; z-index:5; width:64px; height:64px; display:grid; place-items:center; border-radius:22px; background:rgba(255,255,255,.12); border:1px solid rgba(0,235,255,.28); color:white; font-size:34px; box-shadow:0 0 34px rgba(0,235,255,.28); backdrop-filter:blur(10px); animation:satelliteFloat 4s ease-in-out infinite; } @keyframes satelliteFloat{50%{transform:translateY(-8px) rotate(4deg)}} .map-grid{ background-size:40px 40px!important; opacity:.72!important; } .scan-circle{ border-color:rgba(0,235,255,.55)!important; box-shadow:0 0 30px rgba(0,235,255,.18); } .hotspot{ width:28px!important; height:28px!important; } .h1{left:24%!important;top:34%!important} .h2{right:28%!important;top:30%!important} .h3{left:50%!important;bottom:27%!important} .h4{right:40%!important;bottom:43%!important} .map-stat{ min-width:130px; background:rgba(2,25,43,.78)!important; } .map-legend{ position:absolute; z-index:5; right:18px; top:140px; display:grid; gap:10px; padding:14px; border-radius:18px; color:#fff; background:rgba(2,25,43,.72); border:1px solid rgba(0,210,255,.26); backdrop-filter:blur(10px); } .map-legend small{ display:flex; align-items:center; gap:8px; font-weight:900; } .dot{ width:10px; height:10px; border-radius:50%; display:inline-block; } .dot.green{background:#2cf8d4;box-shadow:0 0 12px #2cf8d4} .dot.gold{background:#f5b521;box-shadow:0 0 12px #f5b521} .dot.blue{background:#38bdf8;box-shadow:0 0 12px #38bdf8} .map-metric-panel{ position:absolute; z-index:5; left:18px; bottom:90px; display:grid; grid-template-columns:auto auto; gap:6px 12px; align-items:center; padding:13px 15px; border-radius:18px; background:rgba(2,25,43,.72); border:1px solid rgba(0,210,255,.26); color:#fff; backdrop-filter:blur(10px); } .map-metric-panel small{color:#8dfcff;font-weight:900} .map-metric-panel strong{font-size:18px} .map-bottom{ justify-content:center; text-align:center; font-size:15px; font-weight:950; } .landing-plans-section{ max-width:1120px; margin:32px auto 0; } .plans-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .plan{ padding:22px; position:relative; overflow:hidden; } .plan h3{ font-size:22px; margin:12px 0 8px; } .plan p,.plan li{ color:var(--muted); line-height:1.55; } .plan ul{ padding-inline-start:20px; margin:14px 0 18px; } .vip-plan{ border-color:rgba(245,181,33,.28)!important; background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,248,222,.78))!important; } .premium-plan{ border-color:rgba(0,188,212,.24)!important; background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(224,249,255,.78))!important; } .chat-card{ background: radial-gradient(circle at top right,rgba(0,220,255,.16),transparent 34%), linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.78))!important; } .chat-card h2:before{content:"";display:inline-block;width:20px;height:20px;vertical-align:-4px;margin-inline-end:6px;background-color:#7c5cff;-webkit-mask:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2011.5a8.38%208.38%200%200%201-.9%203.8%208.5%208.5%200%200%201-7.6%204.7%208.38%208.38%200%200%201-3.8-.9L3%2021l1.9-5.7a8.38%208.38%200%200%201-.9-3.8%208.5%208.5%200%200%201%204.7-7.6%208.38%208.38%200%200%201%203.8-.9h.5a8.48%208.48%200%200%201%208%208v.5z%22/%3E%3C/svg%3E') center/contain no-repeat;mask:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2011.5a8.38%208.38%200%200%201-.9%203.8%208.5%208.5%200%200%201-7.6%204.7%208.38%208.38%200%200%201-3.8-.9L3%2021l1.9-5.7a8.38%208.38%200%200%201-.9-3.8%208.5%208.5%200%200%201%204.7-7.6%208.38%208.38%200%200%201%203.8-.9h.5a8.48%208.48%200%200%201%208%208v.5z%22/%3E%3C/svg%3E') center/contain no-repeat} .chat-box p{border:1px solid rgba(0,168,200,.10)} .welcome-toast{ position:fixed; z-index:150; left:50%; top:82px; transform:translateX(-50%); width:min(92%,560px); padding:18px 20px; border-radius:24px; color:#063247; background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(219,249,255,.88)); border:1px solid rgba(0,188,212,.20); box-shadow:0 22px 70px rgba(0,112,145,.20); backdrop-filter:blur(18px); display:flex; align-items:center; gap:14px; } .welcome-toast.hidden{display:none!important} .welcome-toast .wt-icon{ width:58px; height:58px; border-radius:22px; display:grid; place-items:center; font-size:30px; background:linear-gradient(135deg,#eaffff,#bdf8ff); box-shadow:0 0 34px rgba(0,220,255,.24); position:relative; } .welcome-toast .wt-icon:after{ content:""; position:absolute; inset:-9px; border:2px solid rgba(0,188,212,.24); border-radius:30px; animation:wtPulse 2s infinite; } @keyframes wtPulse{0%{scale:.72;opacity:1}100%{scale:1.32;opacity:0}} .welcome-toast b{ display:block; font-size:clamp(18px,4vw,25px); } .welcome-toast small{ display:block; color:#4e7380; font-weight:850; margin-top:4px; line-height:1.35; } /* === TideIQ V16.1 FINAL LOCK POLISH - no auth changes === */ .hero-logo,.brand img{ background:transparent!important; border:none!important; box-shadow:none!important; filter:drop-shadow(0 18px 34px rgba(0,145,185,.22))!important; } .hero-logo{ width:min(92vw,560px)!important; max-height:250px!important; object-fit:contain!important; } .brand img{ height:50px!important; max-width:180px!important; } .preview-map-card{ grid-template-columns:1fr!important; padding:20px!important; overflow:hidden; } .map-preview-copy{text-align:center} .map-preview-copy h2{ font-size:clamp(28px,5.5vw,46px)!important; line-height:1.12!important; } .preview-map{ min-height:600px!important; background: radial-gradient(circle at 15% 18%,rgba(105,245,255,.24),transparent 20%), radial-gradient(circle at 77% 30%,rgba(245,181,33,.16),transparent 18%), radial-gradient(circle at 50% 66%,rgba(0,255,225,.20),transparent 28%), linear-gradient(135deg,#042235 0%,#06415a 36%,#087b88 66%,#0fb8c5 100%)!important; box-shadow:inset 0 0 110px rgba(0,202,255,.25),0 28px 86px rgba(0,112,145,.24)!important; } .preview-map:after{ content:""; position:absolute; inset:0; background: repeating-linear-gradient(90deg,rgba(255,255,255,.055) 0 1px,transparent 1px 52px), repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 52px), radial-gradient(ellipse at 35% 70%,rgba(255,255,255,.16),transparent 38%), radial-gradient(ellipse at 70% 25%,rgba(255,255,255,.10),transparent 30%); pointer-events:none; } .preview-map:before{ content:"";background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M13%207%209%203%205%207l4%204%22/%3E%3Cpath%20d%3D%22m17%2011%204%204-4%204-4-4%22/%3E%3Cpath%20d%3D%22m8%2012%204%204%206-6-4-4Z%22/%3E%3Cpath%20d%3D%22M16%208%202%2022%22/%3E%3Cpath%20d%3D%22M17.5%2015H9%22/%3E%3C/svg%3E');background-repeat:no-repeat;background-position:center;background-size:55%; position:absolute; right:20px; top:95px; z-index:8; width:86px; height:86px; display:grid; place-items:center; border-radius:28px; background:rgba(255,255,255,.15); border:1px solid rgba(0,235,255,.35); color:white; font-size:46px; box-shadow:0 0 44px rgba(0,235,255,.32); backdrop-filter:blur(12px); animation:satelliteFloat 4s ease-in-out infinite; } .scan-circle{ width:210px!important; height:210px!important; border-color:rgba(0,235,255,.56)!important; box-shadow:0 0 34px rgba(0,235,255,.20); z-index:3; } .hotspot{ width:32px!important; height:32px!important; z-index:6!important; } .h1{left:25%!important;top:36%!important} .h2{right:31%!important;top:33%!important} .h3{left:52%!important;bottom:29%!important} .h4{right:43%!important;bottom:43%!important} .hotspot:after{ background:rgba(2,25,43,.86)!important; } .map-stat,.map-legend,.map-metric-panel,.map-current-panel,.map-bottom{ z-index:9!important; background:rgba(2,25,43,.78)!important; border:1px solid rgba(0,210,255,.28)!important; backdrop-filter:blur(12px); } .map-current-panel{ position:absolute; z-index:9; right:18px; bottom:92px; display:grid; grid-template-columns:auto auto; gap:6px 12px; align-items:center; padding:13px 15px; border-radius:18px; color:#fff; } .map-current-panel small,.map-metric-panel small{color:#8dfcff;font-weight:900} .map-current-panel strong,.map-metric-panel strong{font-size:18px} #map{ height:620px!important; min-height:620px!important; border-radius:26px!important; } .map-card{ padding:22px!important; } .hotspot-pin{ width:46px!important; height:46px!important; box-shadow:0 0 0 9px rgba(0,220,255,.18),0 0 42px rgba(0,220,255,.82)!important; } .hotspot-pin span{font-size:22px!important} .spot-results{ grid-template-columns:repeat(2,minmax(0,1fr))!important; } .spot{ border:1px solid rgba(0,168,200,.12)!important; } .area-report{ grid-column:1/-1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:12px; border-radius:22px; background:linear-gradient(135deg,rgba(0,188,212,.14),rgba(255,255,255,.70)); border:1px solid rgba(0,168,200,.16); } .area-report .spot{min-height:70px;background:rgba(255,255,255,.78)} .profile-card h3#profileName{ font-size:clamp(24px,6vw,34px)!important; } #profileMeta{ font-size:16px!important; color:var(--muted)!important; } .vip-plan{ transform:translateY(-3px); border:1px solid rgba(245,181,33,.36)!important; box-shadow:0 24px 70px rgba(245,181,33,.16)!important; } .premium-plan{ transform:translateY(-6px); border:1px solid rgba(0,188,212,.32)!important; box-shadow:0 28px 80px rgba(0,188,212,.18)!important; } .plan .badge{font-size:15px} .chat-card{ background: radial-gradient(circle at 88% 12%,rgba(0,220,255,.18),transparent 35%), radial-gradient(circle at 10% 88%,rgba(37,212,198,.12),transparent 28%), linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.78))!important; } .chat-box p{ display:flex; align-items:center; gap:10px; } .chat-box p:before{ content:""; width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:linear-gradient(135deg,#dfffff,#bdf8ff); background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230097b8%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2021v-2a4%204%200%200%200-4-4H8a4%204%200%200%200-4%204v2%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%227%22%20r%3D%224%22/%3E%3C/svg%3E'); background-repeat:no-repeat; background-position:center; background-size:55%; box-shadow:0 0 20px rgba(0,220,255,.18); } /* === TideIQ V16.2 Report/Profile Fix === */ .preview-map{ background: radial-gradient(circle at 18% 34%,rgba(25,230,210,.28),transparent 19%), radial-gradient(circle at 72% 30%,rgba(245,181,33,.20),transparent 17%), radial-gradient(circle at 58% 74%,rgba(88,240,220,.22),transparent 24%), linear-gradient(116deg,#06344d 0%,#075d72 34%,#0e90a0 47%,#d9c38b 48%,#d2b177 57%,#9b8a66 63%,#07546d 64%,#04314a 100%)!important; } .preview-map:after{ content:"";position:absolute;inset:0;pointer-events:none; background: radial-gradient(ellipse at 42% 49%,rgba(255,255,255,.18),transparent 18%), radial-gradient(ellipse at 36% 57%,rgba(255,255,255,.12),transparent 17%), repeating-linear-gradient(90deg,rgba(255,255,255,.055) 0 1px,transparent 1px 52px), repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 52px), linear-gradient(116deg,transparent 0 43%,rgba(255,255,255,.32) 45%,rgba(255,255,255,.12) 48%,transparent 52%); } .preview-map:before{width:92px!important;height:92px!important;font-size:50px!important;box-shadow:0 0 48px rgba(0,235,255,.38)!important} .hotspot.vip{box-shadow:0 0 0 12px rgba(245,181,33,.20),0 0 46px rgba(245,181,33,.95)!important} .hotspot.vip:before{content:"⭐";position:absolute;inset:0;display:grid;place-items:center;font-size:15px;z-index:2} .area-report{grid-column:1/-1!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;padding:12px!important;border-radius:22px!important;background:linear-gradient(135deg,rgba(0,188,212,.15),rgba(255,255,255,.74))!important;border:1px solid rgba(0,168,200,.17)!important} .area-report .spot{min-height:74px!important;background:rgba(255,255,255,.80)!important} /* === TideIQ V16.3 Map + Report Lock === */ .preview-map{min-height:640px!important;background:radial-gradient(circle at 22% 22%,rgba(0,255,220,.24),transparent 18%),radial-gradient(circle at 72% 38%,rgba(245,181,33,.24),transparent 15%),radial-gradient(circle at 45% 78%,rgba(0,220,255,.20),transparent 24%),linear-gradient(128deg,#062f49 0%,#064b65 28%,#077f91 42%,#16b5bf 49%,#ead28d 50%,#d0b06c 57%,#8f805d 63%,#084b63 64%,#032b46 100%)!important;box-shadow:inset 0 0 90px rgba(0,255,230,.18),inset 0 0 160px rgba(0,40,75,.35),0 30px 90px rgba(0,112,145,.22)!important} .preview-map:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(128deg,transparent 0 42%,rgba(255,255,255,.34) 45%,rgba(255,255,255,.15) 49%,transparent 54%),radial-gradient(ellipse at 34% 62%,rgba(255,255,255,.16),transparent 22%),radial-gradient(ellipse at 28% 72%,rgba(255,255,255,.10),transparent 18%),repeating-linear-gradient(90deg,rgba(255,255,255,.065) 0 1px,transparent 1px 48px),repeating-linear-gradient(0deg,rgba(255,255,255,.055) 0 1px,transparent 1px 48px)} .preview-map:before{width:104px!important;height:104px!important;font-size:58px!important;top:92px!important;right:22px!important;box-shadow:0 0 54px rgba(0,235,255,.42),0 0 0 12px rgba(0,235,255,.08)!important} .hotspot{width:36px!important;height:36px!important}.hotspot.vip{background:#f5b521!important;box-shadow:0 0 0 14px rgba(245,181,33,.20),0 0 54px rgba(245,181,33,.98)!important}.hotspot.vip:before{content:"⭐";position:absolute;inset:0;display:grid;place-items:center;font-size:17px;z-index:2} #map{height:640px!important;min-height:640px!important;border-radius:28px!important}.map-card{padding:24px!important} .area-report{grid-column:1/-1!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;padding:14px!important;border-radius:24px!important;background:linear-gradient(135deg,rgba(0,188,212,.16),rgba(255,255,255,.78))!important;border:1px solid rgba(0,168,200,.18)!important}.area-report .spot{min-height:78px!important} /* === VIP card replacement for account profile area === */ .profile-card{ display:none!important; } .profile-subscription-grid{ grid-template-columns:1fr!important; } /* === FINAL 4 POINTS ONLY === */ /* 4) Preview map: professional sea + beach + radar look */ .preview-map{ min-height:640px!important; background: radial-gradient(circle at 18% 28%,rgba(55,255,230,.26),transparent 18%), radial-gradient(circle at 72% 36%,rgba(245,181,33,.25),transparent 15%), radial-gradient(circle at 46% 78%,rgba(0,220,255,.18),transparent 24%), linear-gradient(128deg, #052c45 0%, #075773 30%, #0993a2 43%, #18bbc4 49%, #efd68d 50%, #d7b56f 57%, #9a8a65 63%, #07506a 64%, #032944 100%)!important; box-shadow: inset 0 0 90px rgba(0,255,230,.18), inset 0 0 160px rgba(0,40,75,.35), 0 30px 90px rgba(0,112,145,.22)!important; } .preview-map:after{ content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(128deg,transparent 0 42%,rgba(255,255,255,.35) 45%,rgba(255,255,255,.15) 49%,transparent 54%), radial-gradient(ellipse at 34% 62%,rgba(255,255,255,.16),transparent 22%), radial-gradient(ellipse at 28% 72%,rgba(255,255,255,.10),transparent 18%), repeating-linear-gradient(90deg,rgba(255,255,255,.065) 0 1px,transparent 1px 48px), repeating-linear-gradient(0deg,rgba(255,255,255,.055) 0 1px,transparent 1px 48px); } .preview-map:before{ width:104px!important; height:104px!important; font-size:58px!important; top:92px!important; right:22px!important; box-shadow:0 0 54px rgba(0,235,255,.42),0 0 0 12px rgba(0,235,255,.08)!important; } .hotspot{ width:36px!important; height:36px!important; } .hotspot.vip{ background:#f5b521!important; box-shadow:0 0 0 14px rgba(245,181,33,.20),0 0 54px rgba(245,181,33,.98)!important; } .hotspot.vip:before{ content:"⭐"; position:absolute; inset:0; display:grid; place-items:center; font-size:17px; z-index:2; } #map{ height:640px!important; min-height:640px!important; border-radius:28px!important; } .map-card{ padding:24px!important; } /* 2) Sea report cards after search */ .area-report{ grid-column:1/-1!important; display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:12px!important; padding:14px!important; border-radius:24px!important; background:linear-gradient(135deg,rgba(0,188,212,.16),rgba(255,255,255,.78))!important; border:1px solid rgba(0,168,200,.18)!important; } .area-report .spot{ min-height:78px!important; } /* 3) Profile + subscription area */ .profile-subscription-grid{ grid-template-columns:1fr!important; } /* ═══════════════════════════════════════════════════════ TideIQ V17 — Topbar & Brand Fix ═══════════════════════════════════════════════════════ */ /* Topbar — light clean professional */ .topbar { background: rgba(255,255,255,.96) !important; backdrop-filter: blur(20px) !important; border-bottom: 1.5px solid rgba(0,150,190,.12) !important; box-shadow: 0 2px 20px rgba(0,100,140,.08) !important; padding: 10px clamp(12px,4vw,40px) !important; } /* Brand logo — bigger and clear */ .brand img { height: 52px !important; max-width: 180px !important; object-fit: contain !important; filter: drop-shadow(0 2px 8px rgba(0,150,190,.18)) !important; } /* Logout button — make it subtle */ #logoutBtn { background: rgba(255,80,100,.08) !important; color: #cc2233 !important; border: 1px solid rgba(255,80,100,.16) !important; padding: 8px 14px !important; font-size: 13px !important; } /* Lang select — cleaner */ .lang-select { background: rgba(0,150,190,.06) !important; border: 1px solid rgba(0,150,190,.18) !important; color: #024e6a !important; font-weight: 900 !important; height: 40px !important; border-radius: 999px !important; } /* Dashboard welcome card — more professional */ .welcome-card { background: linear-gradient(135deg,rgba(0,169,196,.08),rgba(37,212,198,.05)) !important; border: 1.5px solid rgba(0,169,196,.16) !important; } /* Search card — clean */ .smart-card { background: linear-gradient(180deg,rgba(255,255,255,.96),rgba(240,252,255,.90)) !important; border: 1.5px solid rgba(0,150,190,.12) !important; } /* Search input — bigger and cleaner */ #seaSearchInput { border: 1.5px solid rgba(0,150,190,.22) !important; border-radius: 16px !important; padding: 14px 16px !important; font-size: 15px !important; background: white !important; } /* Scan button — more vivid */ #seaSearchBtn { background: linear-gradient(135deg,#0097b8,#00c9b1) !important; font-size: 15px !important; padding: 14px !important; border-radius: 16px !important; box-shadow: 0 8px 24px rgba(0,150,185,.28) !important; } /* Location button */ #locBtn { border: 1.5px solid rgba(0,150,190,.20) !important; border-radius: 16px !important; } /* Weather card */ .weather-card { background: linear-gradient(135deg,rgba(0,169,196,.06),rgba(255,255,255,.94)) !important; border: 1.5px solid rgba(0,150,190,.12) !important; } /* Metric cards */ .metric { background: white !important; border: 1.5px solid rgba(0,150,190,.10) !important; border-radius: 18px !important; padding: 14px !important; } /* Mode chips */ .chip { border: 1.5px solid rgba(0,150,190,.18) !important; background: white !important; font-weight: 900 !important; } .chip.active { background: linear-gradient(135deg,#0097b8,#00c9b1) !important; border-color: transparent !important; color: white !important; box-shadow: 0 4px 14px rgba(0,150,185,.25) !important; } /* ═══════════════════════════════════════════════════════ TideIQ FINAL OVERRIDE — يتغلب على كل CSS قبله ═══════════════════════════════════════════════════════ */ /* Topbar — أبيض نظيف دائماً */ .topbar, header.topbar { background: rgba(255,255,255,.98) !important; border-bottom: 1.5px solid rgba(0,150,190,.14) !important; backdrop-filter: blur(20px) !important; box-shadow: 0 2px 20px rgba(0,100,140,.08) !important; } /* لوجو كبير وواضح */ .brand img, .topbar .brand img, header .brand img { height: 56px !important; max-width: 200px !important; min-width: 120px !important; object-fit: contain !important; display: block !important; opacity: 1 !important; visibility: visible !important; filter: none !important; background: transparent !important; border: none !important; box-shadow: none !important; } /* أزرار الـ topbar */ .topbar .btn.glass, .topbar .btn.ghost { background: rgba(0,150,190,.08) !important; color: #024e6a !important; border: 1px solid rgba(0,150,190,.18) !important; } .topbar .btn.danger, #logoutBtn { background: rgba(255,80,100,.08) !important; color: #cc2233 !important; border: 1px solid rgba(255,80,100,.16) !important; } /* اختيار اللغة */ .lang-select { background: rgba(0,150,190,.06) !important; color: #024e6a !important; border: 1px solid rgba(0,150,190,.18) !important; font-weight: 900 !important; } /* ═══════════════════════════════════════════════════════ TideIQ Pro Chat — Premium Design ═══════════════════════════════════════════════════════ */ .chat-card-pro { padding: 0 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; background: linear-gradient(180deg, #f8feff, white) !important; } /* Header */ .tiq-chat-header-pro { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; background: linear-gradient(135deg, rgba(0,150,190,.06), rgba(0,200,180,.03)); border-bottom: 1px solid rgba(0,150,190,.12); } .tiq-chat-title-pro { font-size: 15px; font-weight: 900; margin: 0; color: #024e6a; } .tiq-online-pro { font-size: 11px; color: #4a7a92; display: flex; align-items: center; gap: 4px; margin-top: 2px; } /* Messages area */ .tiq-messages-pro { flex: 1; height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 14px; scroll-behavior: smooth; background: linear-gradient(180deg, rgba(0,150,190,.02), transparent); } .tiq-messages-pro::-webkit-scrollbar { width: 4px; } .tiq-messages-pro::-webkit-scrollbar-track { background: transparent; } .tiq-messages-pro::-webkit-scrollbar-thumb { background: rgba(0,150,190,.2); border-radius: 4px; } /* Empty state */ .tiq-empty-pro { text-align: center; margin: auto; padding: 24px 20px; } /* Message bubbles */ .tiq-msg { display: flex; flex-direction: column; gap: 3px; max-width: 82%; animation: tiqFadePro .25s ease; } @keyframes tiqFadePro { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .tiq-msg.mine { align-self: flex-start; } .tiq-msg.other { align-self: flex-end; } .tiq-bubble { padding: 10px 14px; border-radius: 20px; font-size: 14px; line-height: 1.5; word-break: break-word; position: relative; } .tiq-msg.mine .tiq-bubble { background: linear-gradient(135deg, #0097b8, #00c9b1); color: white; border-bottom-left-radius: 6px; box-shadow: 0 4px 14px rgba(0,150,185,.25); } .tiq-msg.other .tiq-bubble { background: white; color: #024e6a; border: 1px solid rgba(0,150,190,.12); box-shadow: 0 2px 10px rgba(0,80,120,.08); border-bottom-right-radius: 6px; } /* Name & time */ .tiq-name { font-size: 11px; font-weight: 900; margin-bottom: 3px; display: flex; align-items: center; gap: 5px; } .tiq-msg.mine .tiq-name { color: #0097b8; } .tiq-msg.other .tiq-name { color: #024e6a; justify-content: flex-end; } .tiq-time { font-size: 10px; color: rgba(0,150,190,.6); } /* Input row */ .tiq-input-row-pro { display: flex; gap: 8px; align-items: center; padding: 12px 14px; border-top: 1px solid rgba(0,150,190,.10); background: white; } .tiq-input-pro { flex: 1; padding: 11px 16px; border-radius: 22px; border: 1.5px solid rgba(0,150,190,.18); font-size: 14px; background: rgba(0,150,190,.03); outline: none; color: #024e6a; transition: .2s; min-width: 0; } .tiq-input-pro:focus { border-color: #0097b8; background: white; box-shadow: 0 0 0 3px rgba(0,150,190,.10); } .tiq-photo-btn-pro { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; background: rgba(0,150,190,.08); border: 1.5px solid rgba(0,150,190,.16); font-size: 18px; display: grid; place-items: center; cursor: pointer; transition: .2s; } .tiq-photo-btn-pro:hover { background: rgba(0,150,190,.15); } .tiq-send-btn-pro { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, #0097b8, #00c9b1); color: white; border: none; cursor: pointer; display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0,150,185,.30); transition: .2s; } .tiq-send-btn-pro:hover { transform: scale(1.08); } .btn.vip-nav { background: linear-gradient(135deg, #f5b511, #e6900a); color: #fff; border: 0; font-size: 12px; padding: 8px 12px; box-shadow: 0 8px 20px rgba(245, 181, 17, 0.28); } .btn.vip-nav .vip-nav__icon { font-size: 14px; line-height: 1; } .vip-intel-modal { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(2, 78, 106, 0.55); backdrop-filter: blur(6px); } .vip-intel-modal .tq-modal-panel { max-width: 420px; width: 100%; } .vip-intel-modal .tq-modal-foot { padding: 0 20px 20px; } /* === Accessibility addition (2026-06-24): visible keyboard focus === Purely additive — does not override or change any existing rule above, only adds a focus ring for keyboard navigation where one wasn't defined. */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--primary, #00a9c4); outline-offset: 2px; } /* === Consolidated from fixes.js (2026-06-24) === These were the values actually winning the cascade at runtime via a