*{box-sizing:border-box}
:root{
  --cyan:#58edff;
  --cyan-soft:rgba(88,237,255,.24);
  --blue:#328dff;
  --violet:#9d78ff;
  --white:#effaff;
  --muted:#9bb5d3;
  --glass:rgba(1,12,27,.38);
  --glass-deep:rgba(1,10,23,.58);
}
html,body{
  margin:0;
  min-height:100%;
  background:#010711;
  color:var(--white);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
body{min-height:100vh;overflow-x:hidden}

/* The supplied fishing background is the visual foundation. */
body:before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  background-image:
    linear-gradient(180deg,rgba(0,7,17,.14),rgba(0,7,17,.18) 45%,rgba(0,5,13,.45)),
    url("fishing-background.png");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  transform:scale(1.015);
  animation:backgroundDrift 18s ease-in-out infinite alternate;
  filter:saturate(1.04) contrast(1.03);
}
body:after{
  content:"";
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 42%,transparent 20%,rgba(0,4,12,.08) 62%,rgba(0,3,9,.38) 100%),
    linear-gradient(90deg,rgba(0,9,20,.12),transparent 22%,transparent 78%,rgba(0,9,20,.12));
}
.ambient{position:fixed;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.background-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 35%,rgba(0,4,12,.18) 100%)}
.ambient-scan{
  position:absolute;left:-20%;top:-30%;width:28%;height:160%;
  background:linear-gradient(90deg,transparent,rgba(80,231,255,.075),transparent);
  transform:rotate(17deg);
  filter:blur(9px);
  animation:scanAcross 11s ease-in-out infinite;
}
.ambient-particles{
  position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(117,238,255,.5) 0 1px,transparent 1.6px);
  background-size:95px 95px;
  opacity:.14;
  animation:particleDrift 22s linear infinite;
}

.app{
  position:relative;
  z-index:3;
  width:min(1120px,calc(100% - 32px));
  margin:0 auto;
  padding:28px 0 26px;
}

/* Header: thin, glassy, integrated with the ocean instead of a solid card. */
.topbar{
  position:relative;
  height:68px;
  border:1px solid rgba(90,224,255,.32);
  border-radius:22px;
  background:linear-gradient(90deg,rgba(2,15,32,.46),rgba(1,11,26,.27),rgba(2,15,32,.46));
  backdrop-filter:blur(8px) saturate(130%);
  -webkit-backdrop-filter:blur(8px) saturate(130%);
  box-shadow:0 0 0 1px rgba(129,93,255,.06),0 0 30px rgba(0,192,255,.1),inset 0 1px rgba(255,255,255,.07);
  display:flex;
  align-items:center;
  justify-content:space-between;
  overflow:hidden;
  animation:headerFloat 7s ease-in-out infinite;
}
.topbar:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(73,224,255,.07) 45%,rgba(163,111,255,.08) 54%,transparent 100%);
  transform:translateX(-100%);
  animation:headerGlow 7s linear infinite;
}
.topbar:after{
  content:"";
  position:absolute;
  left:3%;
  right:3%;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(78,227,255,.7),rgba(157,120,255,.7),transparent);
  opacity:.55;
}
.hud-track{
  position:absolute;
  right:28px;
  top:10px;
  width:130px;
  height:4px;
  opacity:.55;
}
.hud-track span,.hud-track i,.hud-track b{
  position:absolute;
  display:block;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
}
.hud-track span{width:72px;right:0;top:0}
.hud-track i{width:36px;right:47px;top:4px;opacity:.55}
.hud-track b{width:18px;right:88px;top:-3px;opacity:.45}
.brand{display:flex;align-items:center;gap:13px;padding-left:16px;position:relative;z-index:2}
.brand-mark{
  width:40px;height:40px;border:1px solid rgba(91,226,255,.58);border-radius:13px;
  display:grid;place-items:center;
  background:linear-gradient(145deg,rgba(26,75,105,.46),rgba(54,27,105,.35));
  box-shadow:0 0 18px rgba(58,216,255,.14),inset 0 0 14px rgba(120,105,255,.09);
}
.brand-mark span{font-size:17px;color:#fff;text-shadow:0 0 12px var(--cyan);animation:iconPulse 2.7s ease-in-out infinite}
.eyebrow{font-size:8px;letter-spacing:.26em;color:#91accb;margin-bottom:4px}
.brand-title{font-size:16px;letter-spacing:.035em;line-height:1}
.brand-title b{font-weight:850;color:#f5fcff}
.brand-title span{font-weight:500;color:#a8c1de;margin-left:3px}
.header-status{
  display:flex;align-items:center;gap:8px;margin-right:18px;
  color:#8ca8c8;font-size:8px;letter-spacing:.18em;
}
.header-status i{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 11px var(--cyan);animation:statusPulse 1.7s ease-in-out infinite}
.header-status strong{width:58px;height:2px;border-radius:99px;background:linear-gradient(90deg,var(--cyan),var(--violet));opacity:.55;animation:statusLine 2.5s ease-in-out infinite}

main{position:relative}
.hero{text-align:center;padding-top:48px;padding-bottom:21px}
.hero-kicker{
  display:inline-flex;align-items:center;gap:10px;color:#83e8ff;
  font-size:8px;letter-spacing:.34em;margin-bottom:11px;opacity:.85;
}
.hero-kicker span{width:22px;height:1px;background:linear-gradient(90deg,transparent,var(--cyan))}
.hero-kicker span:last-child{background:linear-gradient(90deg,var(--cyan),transparent)}
.hero-title{margin:0;line-height:.9}
.fishing-word{
  display:block;
  font-size:clamp(68px,8.6vw,112px);
  font-weight:950;
  letter-spacing:.035em;
  background:linear-gradient(105deg,#eaffff,#53eaff 35%,#7eabff 63%,#dcbcff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 16px rgba(37,218,255,.28));
  animation:titleBreath 5s ease-in-out infinite;
}
.fishing-word:after{
  content:attr(data-text);position:absolute;left:0;right:0;top:0;color:transparent;
  -webkit-text-stroke:1px rgba(101,231,255,.18);transform:translate(1px,1px);
  filter:blur(.4px);pointer-events:none;
}
.assistant-word{
  display:block;margin-top:8px;font-size:clamp(28px,3.6vw,47px);
  font-weight:620;color:#effaff;text-shadow:0 0 18px rgba(88,205,255,.22);
}
.hero-copy{
  margin:14px auto 21px;color:#9bb5d2;font-size:9px;
  max-width:650px;letter-spacing:.08em;text-transform:uppercase;
  opacity:.8;
}

.search-wrap{width:min(900px,100%);margin:0 auto}
.searchbox{
  height:76px;
  border:1px solid rgba(78,225,255,.55);
  border-radius:23px;
  background:linear-gradient(100deg,rgba(2,14,30,.52),rgba(4,20,40,.31),rgba(2,11,27,.48));
  backdrop-filter:blur(7px) saturate(135%);
  -webkit-backdrop-filter:blur(7px) saturate(135%);
  box-shadow:
    0 0 0 1px rgba(115,108,255,.08),
    0 0 25px rgba(0,195,255,.14),
    inset 0 1px rgba(255,255,255,.07);
  display:flex;align-items:center;
  padding:7px 8px 7px 18px;
  animation:searchFloat 5.5s ease-in-out infinite;
  overflow:hidden;
}
.searchbox:before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--cyan),var(--violet),transparent);
  opacity:.7;
  animation:searchLine 4s ease-in-out infinite;
}
.search-sweep{
  position:absolute;top:-30%;bottom:-30%;width:100px;
  background:linear-gradient(90deg,transparent,rgba(76,234,255,.13),transparent);
  transform:skewX(-20deg) translateX(-260px);
  animation:searchSweep 4.8s ease-in-out infinite;
}
.search-icon{
  position:relative;width:25px;height:25px;border:3px solid #7de9ff;
  border-radius:50%;margin-right:16px;flex:0 0 auto;
  box-shadow:0 0 13px rgba(56,220,255,.25);
  animation:iconPulse 2.5s ease-in-out infinite;
}
.search-icon:after{
  content:"";position:absolute;width:10px;height:3px;border-radius:2px;
  background:#7de9ff;right:-8px;bottom:-4px;transform:rotate(45deg);
  box-shadow:0 0 8px rgba(56,220,255,.5);
}
#question{
  position:relative;z-index:2;flex:1;height:42px;min-height:42px;resize:none;
  border:0;outline:0;background:transparent;color:#f4fbff;
  font-size:16px;line-height:42px;padding:0;
}
#question::placeholder{color:#91a9c5}
#askBtn{
  position:relative;z-index:2;flex:0 0 132px;height:58px;border:1px solid rgba(255,255,255,.16);
  border-radius:16px;background:linear-gradient(110deg,#62e9ff,#78caff 48%,#ae7fff);
  color:#041020;font-weight:900;letter-spacing:.12em;font-size:11px;
  box-shadow:0 0 20px rgba(72,220,255,.22),inset 0 1px rgba(255,255,255,.45);
  transition:transform .2s ease,box-shadow .2s ease;
}
#askBtn:hover{transform:translateY(-2px);box-shadow:0 0 28px rgba(72,224,255,.34),0 0 18px rgba(162,111,255,.2)}
#askBtn:disabled{opacity:.72;cursor:wait}

.chips{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:15px}
.chips button{
  height:35px;border:1px solid rgba(77,214,255,.35);border-radius:999px;
  background:rgba(2,14,30,.28);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  color:#c8dbef;padding:0 15px;display:inline-flex;align-items:center;gap:7px;
  font-size:10px;box-shadow:0 0 14px rgba(31,147,255,.04);
  transition:.22s ease;
}
.chips button:hover{transform:translateY(-2px);border-color:rgba(102,229,255,.78);box-shadow:0 0 19px rgba(42,213,255,.12);color:#fff}
.chip-icon{color:#69eaff;font-weight:800}

.notice{
  min-height:54px;border:1px solid rgba(72,218,255,.22);border-radius:16px;
  background:linear-gradient(90deg,rgba(2,16,34,.39),rgba(3,21,42,.22),rgba(2,13,29,.39));
  backdrop-filter:blur(6px) saturate(120%);-webkit-backdrop-filter:blur(6px) saturate(120%);
  display:flex;align-items:center;gap:13px;padding:0 17px;
  box-shadow:0 0 22px rgba(0,168,255,.045),inset 0 1px rgba(255,255,255,.04);
  margin-bottom:14px;
}
.notice-title{color:#61ecff;font-size:11px;font-weight:800;white-space:nowrap}
.notice-icon{margin-right:6px}
.notice-copy{color:#a1b6d0;font-size:10px}
.notice-count{margin-left:auto;color:#6fdfff;font-size:9px;white-space:nowrap}

.results{min-height:220px}
.empty{
  min-height:220px;border:1px solid rgba(76,205,255,.22);border-radius:20px;
  background:linear-gradient(120deg,rgba(2,13,29,.28),rgba(2,13,28,.16));
  backdrop-filter:blur(4px) saturate(110%);-webkit-backdrop-filter:blur(4px) saturate(110%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  box-shadow:inset 0 0 60px rgba(44,97,255,.025),0 0 20px rgba(0,144,255,.04);
}
.empty:before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(115deg,transparent 20%,rgba(76,226,255,.035) 50%,transparent 80%);
  transform:translateX(-100%);animation:emptySweep 7s linear infinite;
}
.empty-ring{
  width:46px;height:46px;border:1px solid rgba(74,223,255,.45);border-radius:50%;
  display:grid;place-items:center;margin-bottom:10px;box-shadow:0 0 23px rgba(40,211,255,.1);
  animation:ringPulse 2.8s ease-in-out infinite;
}
.empty-ring span{width:7px;height:7px;background:var(--cyan);border-radius:50%;box-shadow:0 0 15px var(--cyan);animation:statusPulse 1.5s ease-in-out infinite}
.empty h3{margin:0 0 6px;font-size:16px}.empty p{margin:0;color:#9bb1cc;font-size:11px}

.summary{
  height:48px;border:1px solid rgba(64,215,255,.19);border-radius:14px;
  background:rgba(2,14,30,.31);backdrop-filter:blur(5px);
  display:flex;align-items:center;padding:0 15px;color:#92a9c5;font-size:10px;margin-bottom:9px;
}
.summary strong{color:#64eaff}
.card{
  position:relative;border:1px solid rgba(63,204,255,.24);border-radius:17px;
  background:linear-gradient(115deg,rgba(3,17,36,.57),rgba(3,12,28,.38));
  backdrop-filter:blur(7px) saturate(125%);-webkit-backdrop-filter:blur(7px) saturate(125%);
  margin-bottom:10px;overflow:hidden;box-shadow:0 0 24px rgba(0,145,255,.05);
  animation:cardIn .45s ease both;
}
.card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--cyan),var(--violet));box-shadow:0 0 13px rgba(59,221,255,.3)}
.card-head{display:flex;justify-content:space-between;gap:14px;padding:14px 17px 11px;border-bottom:1px solid rgba(65,198,255,.11)}
.source{font-weight:800;font-size:12px;color:#f1f8ff}.page{font-size:8px;letter-spacing:.15em;color:#83a1c3;margin-top:4px}
.tag{align-self:center;border:1px solid rgba(163,115,255,.44);border-radius:999px;color:#c4a6ff;padding:5px 9px;font-size:8px;letter-spacing:.1em;background:rgba(121,78,255,.06)}
.card-body{padding:14px 17px;color:#c7d7ed;font-size:11px;line-height:1.68}.excerpt mark{background:rgba(35,116,255,.38);color:#e8f7ff;border-radius:3px;padding:1px 3px}
.card-foot{display:flex;justify-content:space-between;padding:10px 17px;color:#7893b6;font-size:9px;border-top:1px solid rgba(65,198,255,.1)}.verified{color:#5cf0db;font-weight:800;letter-spacing:.08em}
.noanswer{padding:21px;border:1px solid rgba(255,129,151,.25);border-radius:17px;background:rgba(38,8,20,.25);color:#c9b4bd;line-height:1.7}.noanswer strong{display:block;color:#ff9bb0;margin-bottom:6px}

footer{display:flex;justify-content:space-between;color:#6c86a5;font-size:8px;letter-spacing:.05em;padding:14px 4px 0}

/* Motion */
@keyframes backgroundDrift{from{transform:scale(1.015) translate3d(-.3%,0,0)}to{transform:scale(1.035) translate3d(.3%,-.25%,0)}}
@keyframes headerFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes headerGlow{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}
@keyframes scanAcross{0%,100%{left:-25%;opacity:0}20%{opacity:.65}68%{left:105%;opacity:.35}80%{opacity:0}}
@keyframes particleDrift{from{background-position:0 0}to{background-position:190px -150px}}
@keyframes titleBreath{0%,100%{filter:drop-shadow(0 0 15px rgba(37,218,255,.24))}50%{filter:drop-shadow(0 0 27px rgba(76,177,255,.4))}}
@keyframes searchFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes searchSweep{0%{transform:skewX(-20deg) translateX(-260px)}55%,100%{transform:skewX(-20deg) translateX(920px)}}
@keyframes searchLine{0%,100%{opacity:.25;transform:scaleX(.65)}50%{opacity:.85;transform:scaleX(1)}}
@keyframes iconPulse{0%,100%{transform:scale(1);opacity:.84}50%{transform:scale(1.1);opacity:1}}
@keyframes statusPulse{0%,100%{opacity:.5;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
@keyframes statusLine{0%,100%{transform:scaleX(.7);opacity:.35}50%{transform:scaleX(1);opacity:.9}}
@keyframes ringPulse{0%,100%{box-shadow:0 0 18px rgba(40,211,255,.06)}50%{box-shadow:0 0 28px rgba(40,211,255,.2)}}
@keyframes emptySweep{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}
@keyframes cardIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:720px){
  .app{width:min(100% - 18px,1120px);padding-top:12px}
  .topbar{height:62px;border-radius:17px}.header-status{display:none}
  .brand-title{font-size:14px}.hero{padding-top:38px}
  .hero-kicker{font-size:7px}.fishing-word{font-size:clamp(54px,18vw,86px)}
  .assistant-word{font-size:28px}.hero-copy{font-size:8px;padding:0 10px}
  .searchbox{height:70px;padding-left:13px}.search-icon{width:22px;height:22px;margin-right:11px}
  #question{font-size:13px}#askBtn{flex-basis:98px;height:52px;font-size:9px}
  .chips{gap:7px}.chips button{font-size:9px;padding:0 11px}
  .notice{align-items:flex-start;flex-wrap:wrap;padding:12px}.notice-count{margin-left:0;width:100%}
  .card-head,.card-foot{padding-left:13px;padding-right:13px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important}}