:root {
  color-scheme:light dark;
  --hydro-navy:#102f4c;
  --hydro-bg:#f2f6fb;
  --hydro-surface:#fff;
  --hydro-text:#18334f;
  --hydro-muted:#4d6278;
  --hydro-line:#ccd9e7;
  --hydro-accent:#2463a6;
  --hydro-button:#2463a6;
  --hydro-on-button:#fff;
  --hydro-soft:#e5effb;
  --hydro-danger:#a22d24;
  --hydro-warning:#8a5700;
  --hydro-ok:#246b3c;
  --hydro-radius:12px;
  --hydro-logo-height:64px;
}

@supports (color:light-dark(white,black)) {
  :root {
    --hydro-bg:light-dark(#f2f6fb,#122033);
    --hydro-surface:light-dark(#fff,#1b2d44);
    --hydro-text:light-dark(#18334f,#e7effa);
    --hydro-muted:light-dark(#4d6278,#b3c5dc);
    --hydro-line:light-dark(#ccd9e7,#425975);
    --hydro-accent:light-dark(#2463a6,#a2ccff);
    --hydro-button:light-dark(#2463a6,#a2ccff);
    --hydro-on-button:light-dark(#fff,#142e4b);
    --hydro-soft:light-dark(#e5effb,#253e5e);
    --hydro-danger:light-dark(#a22d24,#ffb2a7);
    --hydro-warning:light-dark(#8a5700,#ffd087);
    --hydro-ok:light-dark(#246b3c,#9be3ae);
  }
}

* { box-sizing:border-box; }
html { background:#e7eef6; }
body { margin:0; color:var(--hydro-text); background:var(--hydro-bg); font:18px/1.55 "Segoe UI",system-ui,sans-serif; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
button,a,input,select,textarea { font:inherit; }
button { min-width:44px; min-height:44px; cursor:pointer; touch-action:manipulation; }
button:disabled { cursor:default; opacity:.5; }
:where(button,input,select,textarea,a):focus-visible { outline:3px solid #f2aa27; outline-offset:2px; }

.hydro-frame { width:min(100%,1280px); min-height:100vh; margin:0 auto; background:var(--hydro-bg); box-shadow:0 0 32px rgba(16,47,76,.10); }
.hydro-shell-note { padding:9px 28px; color:var(--hydro-muted); border-bottom:1px solid var(--hydro-line); font-size:.84em; }
.hydro-header { display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between; align-items:center; padding:25px 32px; background:var(--hydro-surface); }
.hydro-brand { display:block; color:var(--hydro-text); text-decoration:none; }
.hydro-brand-name { display:block; font-size:1.16em; font-weight:500; line-height:1.25; letter-spacing:-.025em; }
.hydro-brand-name>span,.hydro-brand-name>strong { display:block; }
.hydro-brand-name>strong { color:var(--hydro-accent); font-weight:600; }
.hydro-partners { display:flex; flex-wrap:wrap; gap:24px; align-items:center; padding:8px; border-radius:8px; background:#fff; }
.hydro-logo-link { display:flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; }
.hydro-logo-link img { display:block; width:auto; height:var(--hydro-logo-height); }
.hydro-logo-link img.hydro-logo-shp { height:calc(var(--hydro-logo-height)*.75); }

.hydro-nav { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:12px; padding:8px 28px; background:var(--hydro-surface); border-block:1px solid var(--hydro-line); }
.hydro-preferences,.hydro-languages { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.hydro-nav button { padding:8px 12px; color:var(--hydro-muted); background:transparent; border:0; border-radius:7px; font-size:.89em; }
.hydro-nav button:hover,.hydro-nav button[aria-pressed="true"] { color:var(--hydro-accent); background:var(--hydro-soft); }
.hydro-nav button[aria-pressed="true"] { font-weight:600; }
.hydro-languages { padding-left:10px; border-left:1px solid var(--hydro-line); }

.hydro-main { padding:32px; }
.hydro-tool-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px; margin:0 0 22px; padding:10px 12px; background:var(--hydro-surface); border:1px solid var(--hydro-line); border-radius:10px; }
.hydro-all-tools { display:inline-flex; align-items:center; min-height:44px; padding:8px 10px; color:var(--hydro-accent); text-decoration:none; border-radius:7px; font-size:.84em; font-weight:600; line-height:1.3; }
.hydro-all-tools:hover { background:var(--hydro-soft); }
.hydro-toolbar-actions { display:flex; flex:1 1 auto; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.hydro-toolbar-actions button { width:auto; min-width:0; margin:0; padding:9px 14px; color:var(--hydro-accent); background:var(--hydro-soft); border:1px solid var(--hydro-line); border-radius:7px; box-shadow:none; font-size:.78em; font-weight:600; line-height:1.3; }
.hydro-toolbar-actions button:hover:not(:disabled) { color:var(--hydro-on-button); background:var(--hydro-button); }
.hydro-toolbar-actions input[type="file"] { display:none; }
.hydro-tool-toolbar-bottom { margin:22px 0 0; }
.hydro-bottom-toolbar-label { color:var(--hydro-muted); font-size:.8em; font-weight:600; }

.app-shell { min-width:0; }
.tool-heading { display:flex; gap:20px; align-items:flex-start; justify-content:space-between; margin:0 0 28px; }
.eyebrow { color:var(--hydro-accent); font-size:.78rem; font-weight:600; letter-spacing:.09em; }
.tool-heading h1 { margin:10px 0 0; font-size:clamp(30px,4vw,40px); line-height:1.14; font-weight:500; letter-spacing:-.035em; }
.tool-heading p { max-width:760px; margin:12px 0 0; color:var(--hydro-muted); }
.module-status { padding:6px 10px; color:var(--hydro-accent); background:var(--hydro-soft); border-radius:6px; font-size:.82rem; white-space:nowrap; }

.hydro-footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 16px; padding:22px 32px; color:var(--hydro-muted); border-top:1px solid var(--hydro-line); font-size:.83em; }
.hydro-footer>div,.footer-copy { display:grid; flex:1 1 680px; gap:3px; }
.hydro-footer nav,.hydro-footer-links { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:8px 18px; }
.hydro-footer a,.hydro-footer button,.hydro-footer-links a,.hydro-footer-links button { min-height:44px; padding:8px 0; color:var(--hydro-accent); background:none; border:0; font:inherit; font-weight:700; text-decoration:underline; }
.hydro-about { width:min(720px,calc(100% - 32px)); max-height:calc(100vh - 48px); padding:28px; color:var(--hydro-text); background:var(--hydro-surface); border:1px solid var(--hydro-line); border-radius:var(--hydro-radius); box-shadow:0 20px 60px rgb(10 38 62/.28); }
.hydro-about::backdrop { background:rgb(10 38 62/.58); }
.about-head,.hydro-about-head { display:flex; justify-content:space-between; align-items:start; gap:18px; }
.about-head h2,.hydro-about-head h2 { margin-top:0; }
.about-head button,.hydro-about-head button { width:44px; min-height:44px; flex:none; padding:0; color:var(--hydro-text); background:var(--hydro-soft); border:1px solid var(--hydro-line); border-radius:50%; font-size:28px; }
.hydro-about>button { min-height:44px; padding:8px 14px; }
.hydro-large-text .app-shell { font-size:1.12em; }

@media (max-width:700px) {
  .hydro-preferences { width:100%; justify-content:space-between; }
  .hydro-tool-toolbar { align-items:stretch; }
  .hydro-all-tools { width:100%; }
  .hydro-toolbar-actions { justify-content:stretch; }
  .hydro-toolbar-actions button { flex:1 1 145px; }
  .tool-heading { flex-direction:column; }
  .hydro-footer { flex-direction:column; padding-inline:20px; }
  .hydro-footer nav,.hydro-footer-links { justify-content:flex-start; }
}

@media (max-width:540px) {
  :root { --hydro-logo-height:48px; }
  .hydro-header { padding:20px; gap:18px; }
  .hydro-partners { gap:16px; padding:6px; }
  .hydro-shell-note { padding-inline:20px; }
  .hydro-nav { padding-inline:10px; }
  .hydro-main { padding:22px 16px; }
}

@media (max-width:360px) {
  :root { --hydro-logo-height:40px; }
  .hydro-partners { gap:12px; }
}

@media print {
  body { color:#000; background:#fff; }
  .hydro-frame { width:100%; min-height:0; box-shadow:none; background:#fff; }
  .hydro-main { padding:0; }
  .hydro-header,.hydro-nav,.hydro-shell-note,.hydro-tool-toolbar,.tool-heading,.hydro-footer,.screen-only,.hydro-about { display:none!important; }
}