:root{
    --bg:#f1f4fb;
    --card:#ffffff;
    --text:#182747;
    --muted:#52627b;
    --line:#dce3f0;

    --good:#294780;
    --good2:#4166ad;
    --goodSoft:#e8effc;

    --blue:#35548e;
    --blue2:#587dc1;
    --blueSoft:#edf2fd;

    --red:#a53543;
    --redSoft:#fff0f1;

    --yellow:#b7831c;
    --yellowSoft:#fff7df;

    --shadow:0 8px 28px rgba(29,50,95,.08);
    --radius:21px;
}

*{
    box-sizing:border-box;
    -webkit-tap-highlight-color:transparent;
}

html,body{
    margin:0;
    padding:0;
    width:100%;
    min-height:100%;
}

body{
    background:var(--bg);
    color:var(--text);
    font-family:
        Inter, system-ui,
        sans-serif;
}

button{
    font-family:inherit;
}

.app{
    width:100%;
    max-width:780px;
    margin:auto;
    padding:clamp(14px, 4vw, 32px) 14px 48px;
}

/* HEADER */

.header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:12px;
}

.brand{
    display:flex;
    align-items:center;
    gap:10px;
}

.brandIcon{
    width:49px;
    height:49px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:23px;
    color:white;
    background:
        linear-gradient(145deg,#294780,#4166ad);
    box-shadow:
        0 8px 18px rgba(28,50,95,.22);
}

.brandText h1{
    margin:0;
    font-size:18px;
}

.brandText p{
    margin:3px 0 0;
    color:var(--muted);
    font-size:12px;
}

.refresh{
    width:44px;
    height:44px;
    border:0;
    border-radius:15px;
    background:#fff;
    color:var(--good);
    font-size:22px;
    box-shadow:var(--shadow);
}

.refresh.spin{
    animation:spin .8s linear infinite;
}

@keyframes spin{
    to{transform:rotate(360deg)}
}

/* DATE */

.dateCard{
    background:white;
    border:1px solid var(--line);
    border-radius:18px;
    padding:12px 14px;
    margin-bottom:12px;
    box-shadow:var(--shadow);
}

.dateRow{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.dateTitle{
    font-size:14px;
    font-weight:bold;
}

.dateValue{
    margin-top:4px;
    font-size:12px;
    color:var(--muted);
}

.updated{
    text-align:right;
    font-size:12px;
    color:var(--muted);
    line-height:1.5;
}

/* TABS */

.tabs{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
    padding:5px;
    background:#e1e8f5;
    border-radius:17px;
    margin-bottom:12px;
}

.tab{
    border:0;
    background:transparent;
    color:#4e5c74;
    border-radius:13px;
    padding:12px 6px;
    font-size:13px;
    font-weight:bold;
}

.tab.active{
    background:white;
    color:var(--good);
    box-shadow:0 4px 12px rgba(0,0,0,.07);
}

/* CONNECTION */

.connection{
    display:flex;
    align-items:center;
    gap:7px;
    background:white;
    border:1px solid var(--line);
    border-radius:13px;
    padding:9px 11px;
    margin-bottom:12px;
    font-size:12px;
}

.connectionDot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#d49c20;
    flex:none;
}

.connection.ok .connectionDot{
    background:#5376c0;
}

.connection.bad .connectionDot{
    background:#d1525b;
}

/* HERO */

.hero{
    color:white;
    border-radius:25px;
    padding:20px;
    margin-bottom:12px;
    position:relative;
    overflow:hidden;
    box-shadow:var(--shadow);
}

.hero.motor{
    background:linear-gradient(135deg,#294780,#3b5d9a);
}

.hero.fish{
    background:linear-gradient(135deg,#35548e,#5276b5);
}

.hero:after{
    content:"";
    position:absolute;
    width:210px;
    height:210px;
    border-radius:50%;
    right:-95px;
    top:-90px;
    background:rgba(255,255,255,.07);
}

.heroSmall{
    font-size:12px;
    opacity:.82;
}

.heroTitle{
    font-size:22px;
    font-weight:bold;
    margin-top:6px;
}

.heroDesc{
    max-width:520px;
    margin-top:4px;
    font-size:12px;
    line-height:1.5;
    opacity:.9;
}

.heroBottom{
    display:flex;
    justify-content:space-between;
    align-items:end;
    margin-top:17px;
}

.score{
    font-size:39px;
    line-height:1;
    font-weight:bold;
}

.scoreLabel{
    margin-top:4px;
    font-size:12px;
    opacity:.78;
}

.heroBadge{
    max-width:230px;
    text-align:right;
    padding:8px 10px;
    border-radius:12px;
    background:rgba(255,255,255,.15);
    border:1px solid rgba(255,255,255,.2);
    font-size:12px;
    line-height:1.5;
}

/* INFO */

.infoGrid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:8px;
    margin-bottom:12px;
}

.info{
    background:white;
    border:1px solid var(--line);
    border-radius:18px;
    padding:12px;
    box-shadow:0 5px 17px rgba(25,49,92,.05);
}

.infoIcon{
    font-size:17px;
}

.infoLabel{
    color:var(--muted);
    font-size:12px;
    margin-top:5px;
}

.infoValue{
    margin-top:2px;
    font-size:16px;
    font-weight:bold;
}

.infoSub{
    margin-top:2px;
    color:var(--muted);
    font-size:12px;
}

/* BEST */

.best{
    background:linear-gradient(135deg,#edf2fc,#e6edfb);
    border:1px solid #d6e1f9;
    border-radius:19px;
    padding:14px;
    margin-bottom:12px;
}

.best.blue{
    background:linear-gradient(135deg,#edf1fd,#e7ebfa);
    border-color:#d9e1f5;
}

.bestTitle{
    color:var(--good);
    font-size:12px;
    font-weight:bold;
}

.best.blue .bestTitle{
    color:var(--blue);
}

.bestTime{
    margin-top:5px;
    font-size:19px;
    font-weight:bold;
}

.bestText{
    margin-top:4px;
    color:var(--muted);
    font-size:12px;
    line-height:1.5;
}

/* SECTION */

.section{
    background:white;
    border:1px solid var(--line);
    border-radius:21px;
    overflow:hidden;
    margin-bottom:12px;
    box-shadow:var(--shadow);
}

.sectionHead{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px;
}

.sectionTitle{
    font-size:14px;
    font-weight:bold;
}

.sectionSub{
    color:var(--muted);
    font-size:12px;
    margin-top:3px;
}

.badge{
    padding:6px 8px;
    border-radius:9px;
    background:var(--goodSoft);
    color:var(--good);
    font-size:12px;
    font-weight:bold;
}

.badge.blue{
    background:var(--blueSoft);
    color:var(--blue);
}

/* CHART */

.chartScroll{
    overflow-x:auto;
    padding:0 10px 14px;
}

.chart{
    min-width:780px;
    height:178px;
    display:flex;
    align-items:flex-end;
    gap:5px;
    padding:5px 3px 0;
}

.barItem{
    flex:1;
    min-width:25px;
    height:160px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    align-items:center;
}

.barScore{
    font-size:12px;
    font-weight:bold;
    margin-bottom:3px;
}

.bar{
    width:20px;
    min-height:5px;
    border-radius:7px 7px 3px 3px;
    background:linear-gradient(to top,#294780,#7a9de2);
}

.bar.fish{
    background:linear-gradient(to top,#35548e,#93abdc);
}

.barHour{
    margin-top:5px;
    color:var(--muted);
    font-size:12px;
}

/* HOURS */

.hourScroll{
    overflow-x:auto;
    padding:0 11px 14px;
}

.hours{
    display:flex;
    gap:7px;
    min-width:max-content;
}

.hour{
    width:109px;
    flex:none;
    padding:10px;
    border:1px solid var(--line);
    background:#f8faff;
    border-radius:16px;
}

.hourTitle{
    font-size:12px;
    font-weight:bold;
    margin-bottom:7px;
}

.status{
    display:flex;
    align-items:center;
    gap:4px;
    margin-bottom:7px;
    font-size:12px;
    font-weight:bold;
}

.dot{
    width:7px;
    height:7px;
    border-radius:50%;
}

.status.good{
    color:#22427e;
}

.status.good .dot{
    background:#5376c0;
}

.status.yellow{
    color:#805b10;
}

.status.yellow .dot{
    background:#d4a028;
}

.status.red{
    color:#a53543;
}

.status.red .dot{
    background:#d5545c;
}

.hourLine{
    display:flex;
    justify-content:space-between;
    border-top:1px solid #e9edf6;
    padding:4px 0;
    font-size:12px;
}

.hourLine span:last-child{
    font-weight:bold;
}

/* FISH TYPES */

.fishList{
    padding:0 12px 13px;
}

.fishCard{
    border:1px solid var(--line);
    border-radius:18px;
    padding:12px;
    margin-top:7px;
}

.fishTop{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:7px;
}

.fishName{
    font-size:14px;
    font-weight:bold;
}

.fishBadge{
    padding:5px 7px;
    border-radius:9px;
    font-size:12px;
    font-weight:bold;
    white-space:nowrap;
}

.fishBadge.good{
    color:var(--good);
    background:var(--goodSoft);
}

.fishBadge.yellow{
    color:var(--yellow);
    background:var(--yellowSoft);
}

.fishBadge.red{
    color:var(--red);
    background:var(--redSoft);
}

.fishDetails{
    color:var(--muted);
    font-size:12px;
    line-height:1.5;
    margin-top:7px;
}

.fishBest{
    margin-top:6px;
    font-size:12px;
    font-weight:bold;
}

.fishHours{
    display:flex;
    gap:4px;
    overflow-x:auto;
    padding-top:8px;
}

.miniHour{
    flex:none;
    min-width:34px;
    padding:5px 4px;
    border-radius:8px;
    text-align:center;
    font-size:6px;
    font-weight:bold;
}

.miniHour.good{
    background:var(--goodSoft);
    color:var(--good);
}

.miniHour.yellow{
    background:var(--yellowSoft);
    color:var(--yellow);
}

.miniHour.red{
    background:var(--redSoft);
    color:var(--red);
}

/* ROUTE */

.route{
    padding:0 14px 13px;
}

.routeItem{
    display:flex;
    align-items:center;
    gap:9px;
    padding:10px 0;
    border-bottom:1px solid #e9edf6;
}

.routeItem:last-child{
    border-bottom:0;
}

.routeIcon{
    width:31px;
    height:31px;
    flex:none;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:var(--goodSoft);
}

.routeText{
    flex:1;
}

.routeName{
    font-size:12px;
    font-weight:bold;
}

.routeInfo{
    color:var(--muted);
    font-size:12px;
    margin-top:3px;
}

.routeStatus{
    font-size:12px;
    font-weight:bold;
}

.routeStatus.good{
    color:#22427e;
}

.routeStatus.yellow{
    color:#805b10;
}

.routeStatus.red{
    color:#a53543;
}

/* LOADING */

.loading{
    background:white;
    border:1px solid var(--line);
    border-radius:20px;
    padding:48px 20px;
    text-align:center;
    color:var(--muted);
    font-size:12px;
    box-shadow:var(--shadow);
}

.spinner{
    width:30px;
    height:30px;
    margin:0 auto 12px;
    border:3px solid #dce4f2;
    border-top-color:var(--good);
    border-radius:50%;
    animation:spin .8s linear infinite;
}

.retry{
    border:0;
    border-radius:11px;
    background:var(--good);
    color:white;
    padding:9px 14px;
    margin-top:12px;
    font-size:12px;
}

/* NOTICE */

.notice{
    display:none;
    padding:10px 12px;
    border-radius:13px;
    background:#fff7df;
    border:1px solid #f0dfae;
    color:#896718;
    font-size:12px;
    line-height:1.5;
    margin-bottom:12px;
}

/* FOOTER */

.footer{
    margin-top:17px;
    color:#52627b;
    text-align:center;
    font-size:12px;
    line-height:1.5;
}

@media(max-width:380px){

    .heroTitle{
        font-size:20px;
    }

    .score{
        font-size:34px;
    }

    .hour{
        width:104px;
    }

}

.brandIcon { flex: none; display: block; }
.brandText h1 { font-size: clamp(18px, 4vw, 24px); letter-spacing: -.025em; }
.header { margin-bottom: 18px; gap: 10px; }
.refresh { flex: none; }
button { cursor: pointer; }
button:disabled { opacity: .65; cursor: wait; }
:focus-visible { outline: 3px solid #557bcb; outline-offset: 3px; }
.hero { padding: clamp(16px, 4vw, 28px); }
.heroTitle { font-size: clamp(24px, 5vw, 34px); }
.heroBottom { gap: 10px; }
.info { min-width: 0; }
.footer a { color: var(--good); }
.chartScroll, .hoursScroll, .fishHours { scrollbar-color: #899ec7 #edf2fb; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}