@charset "UTF-8"; :root {--navy:#12294A;--navy2:#1B3A63;--navy-line:#2C5486;--ink:#14283C;--muted:#5A7085;--faint:#93A6B4;--head:#1A315B;--card:#FFFFFF;--glass:#FFFFFF;--hair:#E2E9F0;--track:#E9EFF5;--okoun:#23AAE2;--okoun-soft:rgba(35,170,226,.12);--stika:#1A315B;--stika-soft:rgba(26,49,91,.10);--teal:#23AAE2;--lav:#7B6FD6;--gold:#23AAE2;--shadow:0 18px 40px -18px rgba(6,18,36,.55);--shadow-sm:0 10px 24px -12px rgba(6,18,36,.42);font-size: 17px; } * {box-sizing: border-box;margin: 0;padding: 0;-webkit-tap-highlight-color: transparent; } html, body {height: 100%; } body {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;color: var(--ink);-webkit-user-select: none;user-select: none;background: radial-gradient(95% 60% at 100% -5%, rgba(35, 170, 226, 0.3), transparent 58%), radial-gradient(70% 50% at -5% 8%, rgba(35, 170, 226, 0.12), transparent 55%), linear-gradient(165deg, var(--navy2), var(--navy) 62%);display: flex;justify-content: center; } .i {width: 24px;height: 24px;flex: none; } .fish {width: 32px;height: auto;flex: none;vertical-align: middle; } nav .fish {width: 30px; } nav .ni {height: 30px;display: flex;align-items: center;justify-content: center; } .num {font-variant-numeric: tabular-nums;font-feature-settings: "tnum"; } .wrap {width: 100%;max-width: 100%;height: 100dvh;display: flex;flex-direction: column; }  .appbar {display: flex;align-items: center;gap: 12px;padding: 18px clamp(18px, 5vw, 64px) 12px; } .mark {width: 44px;height: 44px;border-radius: 14px;color: #238BCB;display: grid;place-items: center;background: #fff;box-shadow: var(--shadow-sm); } .brand b {font-size: 1.15rem;font-weight: 800;letter-spacing: 0.03em;display: block;line-height: 1.05;color: #fff; } .brand span {font-size: 0.8rem;color: #A9C0D4; } .appbar .day {font-size: 0.95rem;font-weight: 700;color: #E4EEF6;background: rgba(255, 255, 255, 0.12);border: 1px solid rgba(255, 255, 255, 0.18);padding: 7px 15px;border-radius: 999px;text-align: right; } .bar-right {margin-left: auto;display: flex;align-items: center;gap: 10px; } .gearbtn {background: rgba(255, 255, 255, 0.12);border: 1px solid rgba(255, 255, 255, 0.18);color: #E4EEF6;width: 40px;height: 40px;border-radius: 999px;display: grid;place-items: center;cursor: pointer;flex: none; } .gearbtn:active {background: rgba(255, 255, 255, 0.22); } .gearbtn svg {width: 22px;height: 22px; } .setgrp {border: 1px solid var(--hair);border-radius: 14px;overflow: hidden; } .setrow {display: flex;align-items: center;justify-content: space-between;gap: 12px;padding: 13px 14px;border-top: 1px solid var(--hair);color: var(--ink);font-weight: 600; } .setrow:first-child {border-top: none; } .setin {width: 66px;text-align: center;font-size: 1.05rem;font-weight: 800;color: var(--ink);border: 1px solid var(--hair);border-radius: 10px;padding: 6px;background: #F7FAFC;margin-right: 6px; } .setin:focus {outline: none;border-color: var(--teal);background: #fff; } main {flex: 1;min-height: 0; } .view {display: none;height: 100%;overflow-y: auto;padding: 6px clamp(18px, 5vw, 64px) 96px; } .view.active {display: block; } .h3 {font-size: 0.98rem;color: #A9C0D4;font-weight: 800;margin: 16px 4px 10px; }  .tiles {display: flex;flex-direction: column;gap: 18px;margin-top: 10px; } .tile {display: flex;align-items: center;gap: 16px;width: 100%;text-align: left;cursor: pointer;background: var(--card);border: 1px solid var(--hair);border-radius: 22px;padding: 18px 20px;box-shadow: var(--shadow);transition: transform 0.06s ease; } .tile:active {transform: scale(0.975); } .tile .chip {width: 52px;height: 52px;border-radius: 16px;display: grid;place-items: center;color: #fff; } .tile.okoun .chip {background: var(--okoun); } .tile.stika .chip {background: var(--stika); } .tile.species .chip {background: var(--species-color); } .tile .lab {flex: 1; } .tile .name {font-size: 1.35rem;font-weight: 800; } .tile.okoun .name {color: var(--okoun); } .tile.stika .name {color: var(--stika); } .tile.species .name {color: var(--species-color); } .tile .sub {font-size: 0.8rem;color: var(--muted); } .tile .cnt {font-size: 3.6rem;font-weight: 800;line-height: 0.9;letter-spacing: -0.03em; } .tile.okoun .cnt {color: var(--okoun); } .tile.stika .cnt {color: var(--stika); } .tile.species .cnt {color: var(--species-color); }  .actions {display: grid;grid-template-columns: 1fr 1fr 1fr;gap: 12px;margin-top: 20px; } .act {display: flex;flex-direction: column;align-items: center;gap: 9px;cursor: pointer;background: var(--card);border: 1px solid var(--hair);border-radius: 16px;padding: 18px 8px;font-size: 1.02rem;font-weight: 700;color: var(--ink);box-shadow: var(--shadow-sm);transition: transform 0.06s; } .act .i {width: 30px;height: 30px; } .editlink {display: flex;align-items: center;justify-content: center;gap: 8px;width: 100%;margin-top: 16px;background: rgba(255, 255, 255, 0.07);border: 1px solid rgba(255, 255, 255, 0.22);color: #C3D4E3;border-radius: 14px;padding: 12px;font-size: 0.9rem;font-weight: 700;cursor: pointer; } .editlink:active {background: rgba(255, 255, 255, 0.12); } .editlink svg {width: 18px;height: 18px; } .crow {display: flex;align-items: center;gap: 10px;padding: 11px 0;border-top: 1px solid var(--hair); } .crow:first-of-type {border-top: none; } .cdot {width: 11px;height: 11px;border-radius: 50%;flex: none; } .cdot.okoun {background: var(--okoun); } .cdot.stika {background: var(--stika); } .cn {flex: 1;font-weight: 700; } .csz {font-weight: 800;font-variant-numeric: tabular-nums; } .ct2 {width: 50px;text-align: right;color: var(--muted);font-size: 0.8rem;font-variant-numeric: tabular-nums; } .cedit {background: none;border: none;color: var(--teal);padding: 6px;cursor: pointer; } .cedit svg {width: 18px;height: 18px; } .cdel {background: none;border: none;color: var(--faint);font-size: 1.1rem;padding: 6px;cursor: pointer; } .act:active {transform: scale(0.96); } .act.measure {color: var(--stika); } .act.gps {color: var(--teal); } .act.undo {color: var(--muted); } .placechip {display: inline-flex;align-items: center;gap: 8px;margin: 2px 2px 2px;padding: 10px 15px;border-radius: 999px;border: 1px dashed rgba(255, 255, 255, 0.38);background: rgba(255, 255, 255, 0.07);color: #C3D4E3;font-size: 0.88rem;font-weight: 700;cursor: pointer;margin-bottom: 10px; } .placechip.set {border: 1px solid transparent;background: var(--okoun);color: #fff;box-shadow: var(--shadow-sm); } .placechip svg {width: 18px;height: 18px;flex: none; } .sep {opacity: 0.5;margin: 0 8px;font-weight: 400; } .tyt {color: var(--faint);font-weight: 400; } .plabel {font-weight: 600;opacity: 0.88; } .pname {font-weight: 800; }  .card {background: var(--glass);backdrop-filter: blur(14px);border: 1px solid #fff;border-radius: 20px;padding: 16px;box-shadow: var(--shadow);margin-bottom: 12px; } .card > .ct {font-size: 0.98rem;color: var(--head);font-weight: 800;letter-spacing: -0.01em;margin-bottom: 12px; } .statgrid {display: grid;grid-template-columns: 1fr 1fr;gap: 12px; } .stat .big {font-size: 2.5rem;font-weight: 800;line-height: 1; } .stat.okoun .big {color: var(--okoun); } .stat.stika .big {color: var(--stika); } .stat .lbl {font-size: 0.8rem;color: var(--muted);margin-top: 2px; } .donutwrap {display: flex;align-items: center;gap: 18px; } .donutlabel .lg {display: block;font-size: 1.6rem;font-weight: 800;color: var(--head); } .donutlabel {font-size: 0.82rem;color: var(--muted); } .legend {display: flex;gap: 16px;margin-top: 14px;font-size: 0.8rem;color: var(--muted); } .legend i {display: inline-block;width: 10px;height: 10px;border-radius: 3px;margin-right: 6px;vertical-align: middle; } .trophies {display: grid;grid-template-columns: 1fr 1fr;gap: 14px; } .trophy .k {font-size: 0.78rem;color: var(--muted); } .trophy .v {font-size: 1.6rem;font-weight: 800; } .trophy .v .cm {font-size: 0.85rem;color: var(--muted);font-weight: 600; } .trophy .cnt {font-size: 0.78rem;color: var(--gold);margin-top: 2px; } .listbtn {display: flex;align-items: center;justify-content: center;gap: 8px;width: 100%;margin-top: 14px;border: 1px solid var(--hair);background: #fff;color: var(--gold);border-radius: 14px;padding: 12px;font-size: 0.9rem;font-weight: 700;cursor: pointer; } .listbtn:active {background: #FBFDFE; }  .dtab {width: 100%;border-collapse: collapse;font-variant-numeric: tabular-nums; } .dtab th {font-size: 0.7rem;text-transform: uppercase;letter-spacing: 0.07em;color: var(--muted);font-weight: 700;text-align: right;padding: 0 0 9px;border-bottom: 1px solid var(--hair); } .dtab th:first-child {text-align: left; } .dtab th.o {color: var(--okoun); } .dtab th.s {color: var(--stika); } .dtab td {padding: 10px 0;border-top: 1px solid var(--hair);font-size: 0.95rem;text-align: right;color: var(--ink); } .dtab td:first-child {text-align: left;color: var(--muted); } .dtab tr:first-child td {border-top: none; } .dtab td.o {color: var(--okoun);font-weight: 700; } .dtab td.s {color: var(--stika);font-weight: 700; } .dtab td.zero {color: var(--faint);font-weight: 400; } .dtab tfoot td {border-top: 2px solid var(--hair);font-weight: 800;padding-top: 11px;color: var(--ink); } .empty {color: var(--muted);text-align: center;padding: 24px 10px;font-size: 0.9rem;line-height: 1.5; }  .exports {display: grid;grid-template-columns: 1fr 1fr;gap: 10px; } .exp {border: 1px solid var(--hair);background: #fff;color: var(--ink);border-radius: 14px;padding: 13px;font-size: 0.9rem;font-weight: 700;cursor: pointer;box-shadow: var(--shadow-sm); } .exp:active {background: #FBFDFE; } .exp.danger {color: #fff;border-color: #EF3340;background: #EF3340;font-weight: 800; } .exp.danger:active {background: #D42A36; }  .loc {display: flex;align-items: center;gap: 12px;padding: 12px 0;border-top: 1px solid var(--hair); } .loc:first-child {border-top: none; } .loc .pin {color: var(--teal); } .loc .li {flex: 1;min-width: 0; } .loc .li a {color: var(--teal);text-decoration: none;font-size: 0.95rem;font-variant-numeric: tabular-nums;font-weight: 600; } .loc .li .t {font-size: 0.78rem;color: var(--muted); } .loc .del {background: none;border: none;color: var(--faint);font-size: 1.2rem;padding: 6px 8px;cursor: pointer; } .loc .note {font-size: 0.95rem;color: var(--ink);font-weight: 700;margin-bottom: 1px; } .loc .edit {background: none;border: none;color: var(--teal);padding: 6px 6px;cursor: pointer; } .loc .edit svg {width: 19px;height: 19px; } .textin {width: 100%;border: 1px solid var(--hair);border-radius: 14px;padding: 14px;font-size: 1.05rem;color: var(--ink);background: #F7FAFC;margin-bottom: 14px;-webkit-user-select: text;user-select: text; } .textin:focus {outline: none;border-color: var(--teal);background: #fff; }  .prow {display: flex;align-items: center;gap: 6px;border-top: 1px solid var(--hair); } .prow:first-child {border-top: none; } .prow.cur {background: rgba(35, 170, 226, 0.09);border-radius: 12px; } .pmain {flex: 1;display: flex;align-items: center;gap: 10px;background: none;border: none;padding: 13px 8px;cursor: pointer;text-align: left;color: var(--ink); } .pcheck {width: 18px;color: var(--teal);font-weight: 800; } .pn {flex: 1;font-weight: 700;font-size: 1rem; } .pty {margin-left: 8px;font-size: 0.78rem;font-weight: 600;color: #fff;background: var(--teal);padding: 2px 8px;border-radius: 999px;vertical-align: middle; } .pcnt {font-size: 0.82rem;color: var(--muted);font-variant-numeric: tabular-nums; } .pdel {background: none;border: none;color: var(--faint);font-size: 1.1rem;padding: 8px;cursor: pointer; } .newplace {margin-top: 16px;padding-top: 14px;border-top: 1px solid var(--hair); } .typechips {display: flex;flex-wrap: wrap;gap: 8px;margin-bottom: 12px; } .tc {border: 1px solid var(--hair);background: #fff;color: var(--muted);border-radius: 999px;padding: 8px 14px;font-size: 0.85rem;font-weight: 700;cursor: pointer; } .tc.active {background: var(--teal);color: #fff;border-color: var(--teal); } .newrow {display: flex;gap: 8px;align-items: stretch; } .newrow .textin {margin-bottom: 0;flex: 1; } .addbtn {border: none;background: var(--stika);color: #fff;border-radius: 14px;padding: 0 20px;font-weight: 800;font-size: 0.95rem;cursor: pointer; } .addbtn:active {transform: scale(0.97); }  nav {display: flex;background: var(--navy2);border-top: 1px solid var(--navy-line);padding: 10px clamp(12px, 4vw, 56px) calc(10px + env(safe-area-inset-bottom)); } nav button {flex: 1;background: none;border: none;color: rgba(255, 255, 255, 0.9);font-size: 0.8rem;font-weight: 700;display: flex;flex-direction: column;align-items: center;gap: 5px;padding: 8px 6px;cursor: pointer; } nav button .i {width: 28px;height: 28px; } nav button.active {color: #fff; } nav button.active.c {color: #fff; } nav button.active.s {color: #fff; } nav button.active.l {color: #fff; }  .sheet-bg {position: fixed;inset: 0;background: rgba(20, 40, 60, 0.32);backdrop-filter: blur(2px);display: none;z-index: 40;align-items: flex-end;justify-content: center; } .sheet-bg.show {display: flex; } .sheet {background: #fff;width: 100%;max-width: 460px;border-top-left-radius: 26px;border-top-right-radius: 26px;padding: 22px 18px calc(20px + env(safe-area-inset-bottom));box-shadow: 0 -20px 50px -20px rgba(18, 45, 78, 0.4);animation: up 0.18s ease; } @keyframes up {from {transform: translateY(28px);opacity: 0.6;}to {transform: translateY(0);opacity: 1;} } .sheet.list {max-height: 80vh;overflow-y: auto; } .sheet h2 {font-size: 1.2rem;margin-bottom: 4px; } .sheet p.help {color: var(--muted);font-size: 0.86rem;margin-bottom: 16px; } .pickrow {display: grid;grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));gap: 12px; } .pick {display: flex;align-items: center;justify-content: center;gap: 10px;border-radius: 16px;padding: 20px;font-size: 1.2rem;font-weight: 800;cursor: pointer;border: 1px solid; } .pick.okoun {background: var(--okoun-soft);border-color: rgba(232, 145, 47, 0.35);color: var(--okoun); } .pick.stika {background: var(--stika-soft);border-color: rgba(31, 158, 110, 0.35);color: var(--stika); } .pick.species {background: color-mix(in srgb, var(--species-color) 12%, white);border-color: color-mix(in srgb, var(--species-color) 38%, white);color: var(--species-color); } .pick:active {transform: scale(0.97); } .backlink {display: inline-flex;align-items: center;gap: 6px;background: none;border: none;color: var(--muted);font-size: 0.9rem;padding: 0 0 12px;cursor: pointer; } .sizewrap {display: flex;align-items: center;justify-content: center;gap: 14px;margin: 8px 0 16px; } .stepper {width: 60px;height: 60px;border-radius: 16px;border: 1px solid var(--hair);background: #F6FAFC;color: var(--ink);font-size: 1.9rem;font-weight: 700;cursor: pointer; } .stepper:active {background: #EEF4F8; } .sizeinput {width: 140px;text-align: center;font-size: 2.7rem;font-weight: 800;background: transparent;border: none;border-bottom: 2px solid var(--hair);color: var(--ink);padding: 4px 0; } .sizeinput:focus {outline: none;border-bottom-color: var(--gold); } .unit {color: var(--muted);font-size: 1.1rem;margin-left: 2px; } .trophyflag {text-align: center;font-size: 0.82rem;color: var(--gold);font-weight: 700;min-height: 1.2em;margin-bottom: 12px; } .confirm {width: 100%;border: none;border-radius: 16px;padding: 18px;font-size: 1.12rem;font-weight: 800;color: #fff;cursor: pointer; } .confirm.okoun {background: var(--okoun); } .confirm.stika {background: var(--stika); } .confirm.teal {background: var(--teal); } .confirm:active {transform: scale(0.98); } .cancel {width: 100%;margin-top: 12px;background: none;border: none;color: var(--muted);font-size: 0.95rem;padding: 10px;cursor: pointer; } .trow {display: flex;align-items: center;gap: 12px;padding: 12px 0;border-top: 1px solid var(--hair); } .trow:first-of-type {border-top: none; } .trow .med {color: var(--gold); } .trow .tn {flex: 1;font-weight: 700; } .trow .tn.okoun {color: var(--okoun); } .trow .tn.stika {color: var(--stika); } .trow .tsz {font-size: 1.25rem;font-weight: 800;font-variant-numeric: tabular-nums; } .trow .tsz .cm {font-size: 0.78rem;color: var(--muted);font-weight: 600; } .trow .tdt {font-size: 0.78rem;color: var(--muted);width: 60px;text-align: right;font-variant-numeric: tabular-nums; } #toast {position: fixed;left: 50%;bottom: 100px;transform: translateX(-50%) translateY(16px);background: var(--ink);color: #fff;padding: 11px 18px;border-radius: 14px;font-size: 0.9rem;font-weight: 600;opacity: 0;pointer-events: none;transition: 0.22s;z-index: 60;max-width: 86%;text-align: center;box-shadow: var(--shadow); } #toast.show {opacity: 1;transform: translateX(-50%) translateY(0); }