:root{
  --water:#1E7A8C; --water-d:#0F4C5C; --water-l:#5CB3C4; --foam:#DDEFF2;
  --sand:#EFE3C8; --sand2:#E4D3AC; --hull:#FCFBF7; --card:#FCFBF6;
  --brass:#B8862F; --brass-d:#8f6820; --teak:#8A5A2B; --sun:#E8794A; --sun-d:#c85c30;
  --ink:#22333B; --ink2:#4A5A62; --dim:#8497A0; --line:#DDCFAF; --line2:#CFE2E6;
  --d:'Oswald',system-ui,sans-serif; --b:'PT Sans',system-ui,sans-serif;
  --mono:ui-monospace,'Cascadia Mono','Consolas',monospace;
  --shadow:0 2px 0 rgba(15,76,92,.05),0 14px 34px rgba(15,76,92,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--b);color:var(--ink);background:var(--sand);line-height:1.55;-webkit-font-smoothing:antialiased;text-align:left}
a{color:inherit;text-decoration:none}
a,a:hover,a:active,a:focus{text-decoration:none}
img{max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
h1,h2,h3{font-family:var(--d);font-weight:600;margin:0;line-height:1.05;letter-spacing:.4px}

/* ===== masthead ===== */
.mast{background:linear-gradient(180deg,var(--water),var(--water-d));color:#fff;position:sticky;top:0;z-index:60;box-shadow:0 2px 16px rgba(15,76,92,.3)}
.mast .row{display:flex;align-items:center;gap:20px;padding:11px 0}
.brand{display:flex;align-items:center;gap:12px;color:#fff}
.brand .mk{width:46px;height:46px;flex:0 0 auto}
.brand b{font-family:var(--d);font-weight:700;font-size:1.5rem;letter-spacing:1.2px;line-height:1;color:#fff;text-transform:uppercase}
.mast .brand,.mast .brand b{color:#fff}
.brand small{display:block;font-size:.7rem;color:#bfe4ea;margin-top:3px;letter-spacing:.3px}
.nav{display:flex;gap:4px;margin-left:auto;align-items:center;flex-wrap:wrap}
.nav a{padding:8px 13px;border-radius:8px;font-weight:700;font-size:.9rem;color:#dcf1f4;transition:.14s}
.nav a:hover{background:rgba(255,255,255,.14);color:#fff}
.nav a.cta{background:var(--sun);color:#3a1a08}
.nav a.cta:hover{background:#f28a5c}
.search{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.15);border-radius:9px;padding:7px 12px;color:#fff}
.search input{background:transparent;border:0;color:#fff;font-family:var(--b);font-size:.9rem;outline:none;width:160px}
.search input::placeholder{color:#b9e0e6}

/* ===== HERO — закат, катер, кильватер ===== */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#F6C99B 0%,#EBA982 32%,#C97D68 62%,#5E6E7E 100%)}
.hero svg.scene{display:block;width:100%;height:clamp(240px,32vh,360px)}
.hero .copy{position:absolute;left:0;right:0;top:34px;text-align:center;padding:0 20px;pointer-events:none}
.hero .copy .k{display:inline-block;background:rgba(15,76,92,.82);color:#ffe;font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:2px;padding:5px 14px;border-radius:20px}
.hero .copy h1{font-family:var(--d);font-weight:700;font-size:clamp(2rem,5vw,3.4rem);color:#fff;margin:.28em 0 .1em;text-shadow:0 3px 18px rgba(60,30,10,.4);text-transform:uppercase;letter-spacing:1.5px}
.hero .copy p{color:#fff;font-size:clamp(.95rem,1.5vw,1.14rem);font-weight:700;margin:0;text-shadow:0 2px 10px rgba(60,30,10,.4)}

/* ===== stats bar ===== */
.stats{background:var(--water-d);color:#fff}
.stats .row{display:flex;flex-wrap:wrap;gap:6px 32px;padding:11px 0;font-size:.86rem;align-items:center}
.stats b{font-family:var(--d);font-weight:600;color:#F6C99B}
.stats .on{margin-left:auto;color:#bfe4ea}
.stats .on i{color:#8fe6b4;font-style:normal}

/* ===== свежие темы strip ===== */
.fresh{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:15px 20px;margin:22px 0;box-shadow:var(--shadow)}
.fresh h3{font-size:1.05rem;color:var(--water-d);margin-bottom:12px;display:flex;align-items:center;gap:8px;text-transform:uppercase;letter-spacing:.6px}
.fresh h3::before{content:"⚓";color:var(--brass);font-size:.95rem}
.fresh .items{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:9px 22px}
.fresh a{display:flex;gap:9px;align-items:center;padding:6px 0;border-bottom:1px dashed var(--line)}
.fresh a .av{width:30px;height:30px;border-radius:8px;object-fit:cover;flex:0 0 auto;background:var(--sand2)}
.fresh a .t{min-width:0}
.fresh a .t b{display:block;font-size:.86rem;color:var(--ink);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fresh a:hover .t b{color:var(--sun-d)}
.fresh a .t span{font-size:.74rem;color:var(--dim)}

/* ===== РЕКА С ПРИСТАНЯМИ (индекс) ===== */
.river-wrap{position:relative;padding:8px 0 44px}
.sec-t{display:flex;align-items:baseline;gap:12px;margin:8px 0 4px}
.sec-t h2{font-size:1.5rem;color:var(--water-d);text-transform:uppercase;letter-spacing:.8px}
.sec-t span{color:var(--dim);font-size:.9rem}

/* SVG русло за причалами */
.river-svg{position:absolute;left:0;top:0;width:100%;height:100%;z-index:0;pointer-events:none}
.river-band{position:relative;z-index:1}

/* «бассейн» = категория */
.basin{position:relative;z-index:1;margin:30px 0 8px}
.basin-head{display:inline-flex;align-items:center;gap:12px;background:linear-gradient(180deg,var(--water),var(--water-d));color:#fff;
  padding:10px 22px 10px 18px;border-radius:0 26px 26px 0;box-shadow:var(--shadow);border-left:5px solid var(--brass)}
.basin-head .ic{font-size:1.3rem}
.basin-head h2{font-size:1.24rem;letter-spacing:.6px;text-transform:uppercase}
.basin-head .meta{font-size:.74rem;color:#bfe4ea;font-weight:700;font-family:var(--b);text-transform:none;letter-spacing:0}

/* причалы — строки, чередование берега */
.piers{position:relative;z-index:1;display:flex;flex-direction:column;gap:20px;padding:22px 0 6px}
.pier{position:relative;display:grid;grid-template-columns:60px 1fr 116px 232px;gap:16px;align-items:center;
  width:min(94%,1010px);background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 20px 14px 16px;
  box-shadow:var(--shadow);transition:transform .28s cubic-bezier(.34,1.56,.64,1),box-shadow .2s}
.pier.left{margin-right:auto;border-left:5px solid var(--brass)}
.pier.right{margin-left:auto;border-right:5px solid var(--brass)}
/* «мостки» — соединение причала с руслом */
.pier::after{content:"";position:absolute;top:50%;width:34px;height:6px;background:repeating-linear-gradient(90deg,var(--teak) 0 6px,transparent 6px 11px);transform:translateY(-50%);opacity:.55}
.pier.left::after{right:-34px}
.pier.right::after{left:-34px}
.pier:hover{transform:translateY(-3px) rotate(-.5deg);box-shadow:0 4px 0 rgba(15,76,92,.06),0 20px 44px rgba(15,76,92,.2);animation:bob 2.4s ease-in-out infinite}
.pier.right:hover{transform:translateY(-3px) rotate(.5deg)}
@keyframes bob{0%,100%{transform:translateY(-3px) rotate(-.5deg)}50%{transform:translateY(-6px) rotate(.4deg)}}
.pier.right:hover{animation:bobr 2.4s ease-in-out infinite}
@keyframes bobr{0%,100%{transform:translateY(-3px) rotate(.5deg)}50%{transform:translateY(-6px) rotate(-.4deg)}}

/* кнехт/буёк */
.knecht{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.55rem;flex:0 0 auto;position:relative;
  background:radial-gradient(circle at 35% 30%,var(--water-l),var(--water));color:#fff;box-shadow:inset 0 -4px 0 rgba(0,0,0,.15),0 3px 8px rgba(15,76,92,.3);border:3px solid var(--hull)}
.knecht.unread::after{content:"";position:absolute;top:-2px;right:-2px;width:14px;height:14px;border-radius:50%;background:var(--sun);border:2.5px solid var(--card)}
.pmain{min-width:0}
.pname{font-family:var(--d);font-weight:600;font-size:1.14rem;color:var(--water-d);letter-spacing:.3px}
.pier:hover .pname{color:var(--sun-d)}
.pdesc{color:var(--ink2);font-size:.89rem;margin:2px 0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.psubs{font-size:.81rem;color:var(--dim)}
.psubs a{color:var(--water);font-weight:700}
.psubs a:hover{color:var(--sun-d)}
.pstat{text-align:center;font-size:.8rem;color:var(--dim);line-height:1.5}
.pstat b{font-family:var(--d);font-weight:600;color:var(--ink);font-size:1.05rem;display:block}
.plast{display:flex;align-items:center;gap:10px;min-width:0;border-left:1px solid var(--line);padding-left:15px}
.plast .av{width:38px;height:38px;border-radius:10px;object-fit:cover;flex:0 0 auto;background:var(--sand2)}
.plast .li{min-width:0}
.plast .li a{display:block;font-weight:700;font-size:.88rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plast .li a:hover{color:var(--sun-d)}
.plast .li span{font-size:.78rem;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.plast .li b{color:var(--water-d)}
.plast.silent{color:var(--dim);font-size:.82rem;border-left:1px solid var(--line);padding-left:15px}

/* запасной список под рекой */
.backup{margin-top:26px;background:var(--card);border:1px dashed var(--line);border-radius:14px;padding:18px 22px}
.backup h3{font-size:1rem;color:var(--water-d);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px}
.backup .cols{columns:3;column-gap:30px}
.backup a{display:block;font-size:.87rem;color:var(--ink2);padding:3px 0;break-inside:avoid}
.backup a b{color:var(--water)}
.backup a:hover{color:var(--sun-d)}

/* ===== крошки ===== */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.88rem;color:var(--dim);margin:2px 0 18px}
.crumbs a{color:var(--water);font-weight:700}
.crumbs a:hover{color:var(--sun-d)}
.crumbs .sep{color:var(--line2)}
.crumbs .cur{color:var(--ink);font-weight:700;pointer-events:none}

/* ===== баннер раздела ===== */
.forum-banner{background:linear-gradient(180deg,var(--water),var(--water-d));color:#fff;border-radius:14px;padding:20px 24px;margin-bottom:20px;box-shadow:var(--shadow);border-left:6px solid var(--brass);position:relative;overflow:hidden}
.forum-banner .k{font-size:.74rem;color:#bfe4ea;text-transform:uppercase;letter-spacing:1.4px;font-weight:700}
.forum-banner h1{font-size:clamp(1.5rem,3vw,2rem);margin:6px 0 4px;text-transform:uppercase;letter-spacing:.6px}
.forum-banner p{color:#dcf1f4;margin:0;font-size:.92rem}
.forum-banner .st{margin-top:12px;font-size:.84rem;color:#bfe4ea}
.forum-banner .st b{color:#F6C99B}

/* ===== список тем раздела (борт-стиль) ===== */
.newbtn{display:inline-flex;align-items:center;gap:7px;background:var(--sun);color:#3a1a08;font-weight:700;padding:10px 18px;border-radius:9px}
.newbtn:hover{background:#f28a5c}
.tlist{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);margin-top:16px}
.tlist-head{display:grid;grid-template-columns:1fr 118px 232px;gap:16px;padding:11px 20px;background:var(--water-d);color:#cfe6ea;font-size:.74rem;text-transform:uppercase;letter-spacing:.6px;font-weight:700}
.tlist-head span:nth-child(2),.tlist-head span:nth-child(3){text-align:center}
.trow{display:grid;grid-template-columns:1fr 118px 232px;gap:16px;align-items:center;padding:14px 20px;border-top:1px solid var(--line);position:relative;transition:background .13s}
.trow::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:var(--sun);transition:width .15s}
.trow:hover{background:#FBF4E4}
.trow:hover::before{width:4px}
.tt{min-width:0}
.tt .tbadge{font-size:.63rem;font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:2px 7px;border-radius:5px;margin-right:8px;vertical-align:middle}
.tb-solved{background:#DDF0E4;color:#2f7a4a} .tb-local{background:#DBEBEF;color:var(--water-d)} .tb-report{background:#EAF1F3;color:#5a7f8c} .tb-urgent{background:#FBE1D5;color:var(--sun-d)} .tb-hot{background:#F7EAD2;color:#a06a12}
.tt a.tsub{font-family:var(--d);font-weight:600;font-size:1.06rem;color:var(--water-d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;max-width:100%;vertical-align:middle;letter-spacing:.2px}
.trow:hover .tt a.tsub{color:var(--sun-d)}
.tt .by{font-size:.79rem;color:var(--dim);margin-top:2px}
.tt .by b{color:var(--ink2)}
.tstat{text-align:center;font-size:.77rem;color:var(--dim);line-height:1.5}
.tstat b{display:block;font-family:var(--d);font-weight:600;color:var(--ink);font-size:1.04rem}
.tlast{display:flex;align-items:center;gap:10px;min-width:0;border-left:1px solid var(--line);padding-left:16px}
.tlast .av{width:34px;height:34px;border-radius:9px;object-fit:cover;flex:0 0 auto;background:var(--sand2)}
.tlast .li{min-width:0;font-size:.79rem;color:var(--dim)}
.tlast .li b{display:block;color:var(--water-d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.subforums{margin-top:8px}

/* ===== ПОСТБИТ = СУДОВОЙ ЖУРНАЛ ===== */
.thread-head{margin-bottom:20px}
.thread-head .tags{margin-bottom:8px;display:flex;gap:8px;flex-wrap:wrap}
.thread-head h1{font-family:var(--d);color:var(--water-d);font-size:clamp(1.5rem,3vw,2.1rem);margin:0 0 8px;text-transform:none;letter-spacing:.2px}
.thread-head .meta{display:flex;gap:18px;color:var(--dim);font-size:.9rem;flex-wrap:wrap}
.thread-head .meta b{color:var(--ink2)}

.log{position:relative;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:18px;box-shadow:var(--shadow);
  display:grid;grid-template-columns:186px 1fr}
.log::before{content:"";grid-column:1/-1;height:5px;background:linear-gradient(90deg,var(--brass),var(--sun))}
/* корешок журнала */
.log .spine{grid-row:2;padding:18px 16px;background:linear-gradient(180deg,#F4ECD8,#EadFc2);border-right:2px solid var(--line);position:relative}
.log .spine::after{content:"";position:absolute;right:-2px;top:0;bottom:0;width:2px;background:repeating-linear-gradient(180deg,var(--brass) 0 8px,transparent 8px 18px);opacity:.5}
.log .spine .av{width:78px;height:78px;border-radius:12px;object-fit:cover;border:3px solid var(--hull);box-shadow:var(--shadow);background:var(--sand2);display:block;margin:0 auto}
.log .spine .nm{font-family:var(--d);font-weight:600;font-size:1.06rem;margin-top:10px;color:var(--water-d);text-align:center;letter-spacing:.2px;line-height:1.1}
.log .spine .nm a{color:var(--water-d)}
.log .spine .nm a:hover{color:var(--sun-d)}
.log .spine .role{display:block;margin:7px auto 0;width:fit-content;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:3px 10px;border-radius:20px}
.role-pass{background:#DDF0E4;color:#2f7a4a} .role-byv{background:#DBEBEF;color:var(--water-d)} .role-skip{background:#FBE6D0;color:var(--brass-d)} .role-boc{background:#F7E0CE;color:var(--sun-d)} .role-cap{background:#EAE0F0;color:#6a4a8a}
.log .spine .coord{margin-top:12px;border-top:1px dashed var(--line);padding-top:10px;font-family:var(--mono);font-size:.72rem;color:var(--ink2);line-height:1.7}
.log .spine .coord .lbl{color:var(--dim);text-transform:uppercase;letter-spacing:.5px;font-size:.64rem}
.log .spine .coord b{color:var(--teak)}

/* тело записи — штурманская линовка */
.log .entry{grid-row:2;padding:16px 22px 18px;background:
  repeating-linear-gradient(180deg,transparent 0 30px,rgba(30,122,140,.05) 30px 31px);background-position:0 42px}
.log .entry .top{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:.74rem;color:var(--dim);border-bottom:1px solid var(--line);padding-bottom:9px;margin-bottom:12px}
.log .entry .top .when b{color:var(--water-d)}
.log .entry .top .pno{color:var(--brass-d);font-weight:700}
.log .entry .msg{color:var(--ink);font-size:.99rem}
.log .entry .msg blockquote{border-left:3px solid var(--water-l);background:var(--foam);margin:10px 0;padding:8px 14px;border-radius:0 8px 8px 0;color:var(--ink2)}
.log .entry .msg img{border-radius:8px}
/* метка решения — лаконично ПОСЛЕ поста, отдельной строкой */
.log .entry .course{margin-top:16px;border-top:1px dashed var(--line);padding-top:11px;color:var(--brass-d);font-size:.82rem;font-weight:700;font-family:var(--mono);letter-spacing:.3px}
.log.best-post{border-color:var(--brass)}
.log.best-post .spine{background:linear-gradient(180deg,#F6EED6,#EFE2BE)}
.log .entry .post-buttons{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:12px}
.log .entry .post-buttons a{font-size:.77rem;font-weight:700;color:var(--water-d);background:var(--foam);border:1px solid var(--line2);padding:5px 12px;border-radius:8px}
.log .entry .post-buttons a:hover{background:var(--water);color:#fff}

/* ===== пагинация / форма ответа ===== */
.pages{display:flex;gap:6px;flex-wrap:wrap;margin:22px 0;align-items:center}
.pages a,.pages span{padding:8px 13px;border-radius:8px;background:var(--card);border:1px solid var(--line);font-weight:700;font-size:.86rem;color:var(--ink2)}
.pages a:hover{background:var(--water);color:#fff;border-color:var(--water)}
.pages .pagination_current{background:var(--water);color:#fff;border-color:var(--water)}
.pages_first,.pages_last{display:none}
.quick-reply{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;margin-top:24px;box-shadow:var(--shadow)}
.quick-reply h3{font-family:var(--d);color:var(--water-d);margin:0 0 12px;text-transform:uppercase;letter-spacing:.5px}
.quick-reply textarea{width:100%;min-height:120px;border:1px solid var(--line);border-radius:9px;padding:12px;font-family:var(--b);font-size:.95rem;background:#fff}
input.button,.button{font-family:var(--d);font-weight:600;background:var(--sun);color:#3a1a08;border:0;padding:11px 22px;border-radius:9px;cursor:pointer;text-transform:uppercase;letter-spacing:.5px}
input.button:hover,.button:hover{background:#f28a5c}

/* ===== footer ===== */
.foot{background:var(--water-d);color:#cfe6ea;margin-top:20px;padding:40px 0 28px}
.foot .row{display:flex;gap:40px;flex-wrap:wrap}
.foot .brand{color:#fff}
.foot .cols{display:flex;gap:46px;flex-wrap:wrap;margin-left:auto}
.foot h4{font-family:var(--d);color:#fff;font-size:1rem;margin:0 0 10px;text-transform:uppercase;letter-spacing:.5px}
.foot .cols a{display:block;color:#bfd9de;font-size:.88rem;padding:3px 0}
.foot .cols a:hover{color:#F6C99B}
.foot .bot{margin-top:26px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);font-size:.82rem;color:#9dc2c8}
.footer_bottom,.lang_switch,.theme_switch{display:none}

/* ===== bridge ===== */
#content,.wrap{max-width:1180px;margin:0 auto;padding-left:22px;padding-right:22px}
#content{padding-top:24px;padding-bottom:20px}

/* ===== адаптив ===== */
@media(max-width:900px){
  .backup .cols{columns:2}
}
@media(max-width:820px){
  .pier{grid-template-columns:52px 1fr;width:100%!important;margin:0!important}
  .pier .pstat,.pier .plast{display:none}
  .pier::after{display:none}
  .pier:hover{transform:none;animation:none}
  .basin-head{border-radius:12px}
  .search{display:none}
  .log{grid-template-columns:1fr}
  .log .spine{grid-row:auto;border-right:0;border-bottom:2px solid var(--line);display:flex;align-items:center;gap:14px;text-align:left}
  .log .spine::after{display:none}
  .log .spine .av{width:56px;height:56px;margin:0}
  .log .spine .nm,.log .spine .role{text-align:left;margin-left:0}
  .log .spine .coord{margin-top:0;border-top:0;padding-top:0;margin-left:auto}
  .log .entry{grid-row:auto}
  .backup .cols{columns:1}
}