:root{
    --abyss:#04161c;--deep:#06222b;--panel:rgba(255,255,255,.045);
    --surf:#37e3cf;--surf2:#0fa99b;--sun:#ffb24d;--coral:#ff7e6b;
    --foam:#eafdf8;--muted:#7fa9ad;--line:rgba(55,227,207,.16);
    --disp:"Bricolage Grotesque","Cairo",sans-serif;
    --body:"Hanken Grotesk","IBM Plex Sans Arabic",sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body{
    font-family:var(--body);color:var(--foam);min-height:100vh;position:relative;overflow-x:hidden;
    background:
      radial-gradient(900px 420px at 88% -8%, rgba(255,178,77,.22), transparent 58%),
      radial-gradient(700px 380px at 92% 4%, rgba(255,126,107,.16), transparent 60%),
      radial-gradient(800px 500px at -10% 108%, rgba(15,169,155,.18), transparent 55%),
      linear-gradient(180deg,var(--deep),var(--abyss) 60%);
    padding:18px 14px 70px;
  }
  /* grain texture */
  body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.05;z-index:1;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
  .wrap{max-width:600px;margin:0 auto;position:relative;z-index:2}

  /* header */
  .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
  .brand{font-family:var(--disp);font-weight:800;font-size:1.3rem;letter-spacing:-.02em;display:flex;align-items:center;gap:8px}
  .brand .b1{color:var(--foam)}.brand .b2{color:var(--surf)}
  .lang{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--panel)}
  .lang button{background:transparent;color:var(--muted);border:0;padding:8px 13px;font-family:var(--body);font-weight:700;min-height:38px;font-size:.78rem;cursor:pointer}
  .lang button.on{background:var(--surf);color:#022}

  /* spot chips */
  .spots{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 12px;scrollbar-width:none}
  .spots::-webkit-scrollbar{display:none}
  .chip{white-space:nowrap;border:1px solid var(--line);background:var(--panel);color:var(--foam);
    padding:10px 16px;border-radius:999px;font-weight:600;font-size:.85rem;min-height:44px;cursor:pointer;flex-shrink:0;transition:.18s;display:flex;align-items:center;gap:6px}
  .chip.on{background:linear-gradient(135deg,var(--surf),var(--surf2));color:#022;border-color:transparent;box-shadow:0 6px 20px rgba(55,227,207,.25)}
  .chip .fav{color:var(--sun)}

  /* HERO */
  .hero{position:relative;border-radius:26px;overflow:hidden;border:1px solid var(--line);
    background:linear-gradient(165deg,rgba(255,178,77,.10),rgba(6,34,43,.2) 42%);
    padding:24px 22px 96px;margin-top:8px}
  .hero .htop{display:flex;justify-content:space-between;align-items:flex-start}
  .spotname{font-family:var(--disp);font-weight:800;font-size:clamp(1.7rem,7vw,2.4rem);line-height:1;letter-spacing:-.03em}
  .region{color:var(--muted);font-size:.8rem;margin-top:6px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
  .favbtn{background:none;border:0;cursor:pointer;font-size:1.5rem;color:var(--sun);padding:0;line-height:1}
  .bignum{font-family:var(--disp);font-weight:800;font-size:clamp(4rem,22vw,6.5rem);line-height:.82;letter-spacing:-.05em;margin-top:18px;
    background:linear-gradient(180deg,#fff,var(--surf));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .bignum small{font-size:.26em;-webkit-text-fill-color:var(--muted);color:var(--muted);font-weight:700;margin-inline-start:6px}
  .herometa{display:flex;align-items:center;gap:14px;margin-top:10px;flex-wrap:wrap}
  .stars{font-family:var(--body);font-size:1.2rem;letter-spacing:3px}
  .stars .on{color:var(--sun)}.stars .off{color:rgba(255,255,255,.16)}
  .wind-tag{font-weight:800;font-size:.82rem;padding:8px 14px;border-radius:999px;letter-spacing:.01em}
  .wt-off{background:rgba(55,227,207,.16);color:var(--surf);border:1px solid rgba(55,227,207,.45)}
  .wt-cross{background:rgba(255,178,77,.15);color:var(--sun);border:1px solid rgba(255,178,77,.45)}
  .wt-on{background:rgba(255,126,107,.15);color:var(--coral);border:1px solid rgba(255,126,107,.45)}
  .report{margin-top:14px;font-size:.92rem;line-height:1.55;max-width:42ch}
  /* animated waves at hero bottom */
  .waves{position:absolute;left:0;right:0;bottom:-2px;height:90px;pointer-events:none}
  .waves svg{position:absolute;bottom:0;width:200%;height:100%}
  .w1{animation:drift 9s linear infinite;opacity:.55}
  .w2{animation:drift 14s linear infinite reverse;opacity:.8}
  @keyframes drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  /* reveal animation */
  .rv{opacity:0;transform:translateY(14px);animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
  @keyframes rise{to{opacity:1;transform:none}}

  .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:16px}
  .stat{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:13px 11px}
  .stat .k{color:var(--muted);font-size:.66rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-bottom:7px}
  .stat .v{font-family:var(--disp);font-weight:800;font-size:1.2rem;line-height:1;white-space:nowrap}
  .stat .v small{font-family:var(--body);font-size:.62rem;color:var(--muted);font-weight:600}
  .arrow{display:inline-block;transition:transform .4s}

  .pills{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
  .pill{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px 13px;font-size:.78rem;flex:1;min-width:100px}
  .pill .lbl{color:var(--muted);font-size:.64rem;text-transform:uppercase;letter-spacing:.04em}
  .pill b{display:block;font-size:.92rem;margin-top:3px;font-weight:700}

  .sec{margin:26px 4px 11px;font-family:var(--disp);font-weight:800;font-size:1.05rem;letter-spacing:-.02em;display:flex;align-items:center;gap:8px}
  .sec .note{font-family:var(--body);font-size:.64rem;color:var(--muted);font-weight:500;text-transform:none;letter-spacing:0;margin-inline-start:auto}
  .box{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:15px}

  .hours{display:flex;gap:9px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
  .hours::-webkit-scrollbar{display:none}
  .hour{flex-shrink:0;width:58px;text-align:center}
  .hour .ht{color:var(--muted);font-size:.66rem;margin-bottom:7px}
  .hour .hw{font-family:var(--disp);font-weight:700;font-size:.92rem}
  .hour .hw small{font-family:var(--body);font-size:.55rem;color:var(--muted);display:block}
  .hour .dot{width:7px;height:7px;border-radius:50%;margin:7px auto 0}

  .days{display:flex;flex-direction:column;gap:9px}
  .day{display:flex;align-items:center;justify-content:space-between;background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:13px 16px;transition:.15s}
  .day:hover{border-color:rgba(55,227,207,.4)}
  .day .dname{font-weight:700;font-size:.9rem}
  .day .dsub{color:var(--muted);font-size:.7rem;margin-top:3px;display:flex;gap:11px}
  .ampm{display:inline-flex;align-items:center;gap:4px}.ampm i{width:9px;height:9px;border-radius:50%}
  .day .dright{text-align:end}
  .dwave{font-family:var(--disp);font-weight:800;font-size:1.02rem}
  .dstars{font-size:.78rem;letter-spacing:1px;color:var(--sun)}

  iframe{width:100%;border:0;border-radius:18px;display:block}
  .cam-empty{text-align:center;color:var(--muted);font-size:.82rem;padding:26px 12px}
  .info{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  .info .k{color:var(--muted);font-size:.64rem;text-transform:uppercase;letter-spacing:.04em;margin-bottom:5px}
  .info .v{font-weight:700;font-size:.86rem}

  .loading,.err{text-align:center;color:var(--muted);padding:60px 10px;font-size:.9rem}
  .spinner{width:38px;height:38px;border:3px solid var(--line);border-top-color:var(--surf);border-radius:50%;margin:0 auto 14px;animation:spin 1s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  .updated{text-align:center;color:var(--muted);font-size:.72rem;margin-top:16px}
  footer{text-align:center;color:var(--muted);font-size:.74rem;margin-top:28px;line-height:1.9}
  footer a{color:var(--surf);text-decoration:none}
  [dir=rtl] .day .dright,[dir=rtl] .info{text-align:right}
  [dir=rtl] .report{max-width:none}

/* SEO landing text + internal links */
.seo{margin:30px 2px 0;padding-top:18px;border-top:1px solid var(--line)}
.seo h1{font-family:var(--disp);font-weight:800;font-size:1.15rem;letter-spacing:-.02em;margin-bottom:8px;color:var(--foam)}
.seo p{color:var(--muted);font-size:.86rem;line-height:1.65;max-width:64ch}
.spotlinks{margin-top:14px;font-size:.8rem;color:var(--muted);line-height:2}
.spotlinks span{color:var(--foam);font-weight:700;margin-inline-end:4px}
.spotlinks a{color:var(--surf);text-decoration:none}

/* unit toggle */
.unit-tog{background:var(--panel);border:1px solid var(--line);color:var(--muted);font-family:var(--body);
  font-weight:700;font-size:.72rem;border-radius:999px;padding:8px 12px;min-height:38px;cursor:pointer;margin-inline-end:8px}
.unit-tog:active{color:var(--surf)}
/* groundswell / windswell tag */
.sw-tag{font-weight:700;font-size:.74rem;padding:6px 11px;border-radius:999px}
.sw-good{background:rgba(55,227,207,.14);color:var(--surf);border:1px solid rgba(55,227,207,.4)}
.sw-mid{background:rgba(255,178,77,.13);color:var(--sun);border:1px solid rgba(255,178,77,.4)}
.sw-bad{background:rgba(255,126,107,.13);color:var(--coral);border:1px solid rgba(255,126,107,.4)}

/* live cam */
.cam-link{display:flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,var(--surf),var(--surf2));
  color:#022;font-weight:800;text-decoration:none;border-radius:16px;min-height:54px;font-size:.95rem}
.cam-link span{font-size:1.1rem}
.cam-note{color:var(--muted);font-size:.72rem;text-align:center;margin-top:8px}

/* dimmed stars when conditions are onshore/messy */
.stars .on.dim{color:#9fb7bd}

/* white action buttons (share / install) */
.actions{display:flex;gap:9px;margin:0 2px 12px}
.wbtn{flex:1;background:#ffffff;color:#06222b;border:0;border-radius:14px;min-height:48px;
  font-family:var(--body);font-weight:800;font-size:.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px}
.wbtn:active{transform:scale(.98);opacity:.9}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
  background:#06222b;border:1px solid var(--line);color:var(--foam);padding:12px 18px;border-radius:12px;
  font-size:.85rem;opacity:0;pointer-events:none;transition:.25s;z-index:60;max-width:90%;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* best spot right now */
#best{margin-top:6px}
.best-row{display:flex;gap:9px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
.best-row::-webkit-scrollbar{display:none}
.best-load{padding:18px;margin:0 auto;display:flex;justify-content:center}
.best-card{flex:0 0 auto;width:132px;box-sizing:border-box;overflow:hidden;text-align:center;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:12px 8px;cursor:pointer;
  color:var(--foam);font-family:var(--body);transition:.15s;display:flex;flex-direction:column;align-items:center;gap:5px}
.best-card.top{background:linear-gradient(165deg,rgba(255,178,77,.16),rgba(255,255,255,.03));border-color:rgba(255,178,77,.45)}
.best-card.cur{outline:2px solid var(--surf);outline-offset:-2px}
.best-card:active{transform:scale(.97)}
.bc-rank{font-family:var(--disp);font-weight:800;font-size:.74rem;color:var(--muted);line-height:1}
.best-card.top .bc-rank{color:var(--sun)}
.bc-name{font-weight:700;font-size:.86rem;line-height:1.15;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bc-stars{font-size:.66rem;letter-spacing:0;color:var(--sun);line-height:1}
.bc-wave{font-family:var(--disp);font-weight:800;font-size:1rem;line-height:1}

/* tide high/low labels (below the curve, never overlapping) */
.tide-labels{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px;font-size:.72rem}
.tide-labels span{padding:4px 9px;border-radius:8px;border:1px solid var(--line);font-weight:600}
.tide-labels .th{color:var(--surf)}
.tide-labels .tl{color:var(--muted)}

/* ===== تنبيه الأمواج الذكي (Surf Alert) ===== */
.surf-alert{display:flex;align-items:center;gap:11px;background:linear-gradient(135deg,rgba(52,224,224,.18),rgba(255,178,77,.12));border:1px solid rgba(52,224,224,.4);border-radius:15px;padding:13px 14px;margin:14px 4px;animation:saIn .5s ease}
@keyframes saIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.sa-ico{font-size:1.5rem;flex:0 0 auto;animation:saPulse 2s ease-in-out infinite}
@keyframes saPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.sa-txt{flex:1;font-size:.93rem;line-height:1.4;cursor:pointer;color:var(--text,#eafcff)}
.sa-txt b{color:var(--surf,#34e0e0)}
.sa-txt .on{color:#ffb24d}.sa-txt .off{opacity:.3}
.sa-x{flex:0 0 auto;background:rgba(255,255,255,.08);border:none;color:var(--muted,#83b4c4);width:30px;height:30px;border-radius:50%;font-size:.85rem;cursor:pointer;line-height:1}
.sa-x:active{transform:scale(.9)}

/* ===== شريط البحث ===== */
.spotsearch{margin:10px 4px 0}
#spotSearch{width:100%;box-sizing:border-box;background:var(--card,rgba(255,255,255,.04));border:1.5px solid var(--line,rgba(255,255,255,.1));border-radius:13px;padding:12px 14px;color:var(--text,#eafcff);font-size:16px;font-family:inherit;outline:none}
#spotSearch:focus{border-color:var(--surf,#34e0e0)}
#spotSearch::placeholder{color:var(--muted,#83b4c4)}

/* ===== أقرب الأماكن ===== */
.near-row{display:flex;gap:9px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
.near-row::-webkit-scrollbar{display:none}
.near-card{flex:0 0 auto;min-width:108px;box-sizing:border-box;text-align:center;background:var(--card,rgba(255,255,255,.04));border:1px solid var(--line,rgba(255,255,255,.1));border-radius:13px;padding:12px 10px;cursor:pointer;color:var(--text,#eafcff);font-family:inherit}
.near-card:active{transform:scale(.97)}
.nc-name{font-weight:700;font-size:.9rem;margin-bottom:4px}
.nc-dist{font-size:.8rem;color:var(--surf,#34e0e0);font-weight:600}