/* =========================================================================
   AQUAZOA — aqua.css  ·  authentic 2006–2010 Frutiger-Aero / Vista web page
   Dense, boxed, small-text, glossy, gradient-heavy. Fixed-width centred column
   on a sky. System fonts at 11px. Fights the modern airy instinct on purpose.
   ========================================================================= */

/* ---------- reset ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; }
body{
  font:11px/1.4 "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color:#2b2b2b;
  background:#bfe3f7 url(img/era/sky.jpg) center -40px no-repeat fixed;
  background-size:cover;
}
img{display:block;border:0}
a{color:#1769b0;text-decoration:none}
a:hover{color:#0d4f8a;text-decoration:underline}
h1,h2,h3,h4{font-weight:bold;color:#15527e}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:#7cc62e;margin-left:1px;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}

/* ---------- glossy buttons (the era pill) ---------- */
.gbtn{
  display:inline-block; padding:3px 12px 4px; border-radius:11px; border:1px solid;
  font:bold 11px "Segoe UI",Tahoma,sans-serif; text-decoration:none; cursor:pointer;
  position:relative; white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75), 0 1px 2px rgba(0,30,60,.3);
}
.gbtn:hover{text-decoration:none; filter:brightness(1.06)}
.gbtn:active{box-shadow:inset 0 2px 4px rgba(0,30,60,.4)}
.gbtn--aqua{background:linear-gradient(#cdeeff,#6cc4ef 47%,#2E9BD6 53%,#48abe2);border-color:#1d6fa6;color:#fff;text-shadow:0 1px 1px rgba(0,40,70,.55)}
.gbtn--green{background:linear-gradient(#eafac8,#aeda64 47%,#79c12c 53%,#8ed03b);border-color:#4e8c18;color:#234d08;text-shadow:0 1px 0 rgba(255,255,255,.45)}
.gbtn--sm{padding:2px 9px 3px;border-radius:10px;font-size:10px}
.gbtn--mini{padding:1px 7px 2px;border-radius:9px;font-size:10px}

/* =========================================================================
   FIXED-WIDTH PAGE on the sky
   ========================================================================= */
.page{
  width:980px; margin:0 auto; background:#f3fafe;
  border-left:1px solid #4f8cba; border-right:1px solid #4f8cba; border-bottom:1px solid #4f8cba;
  box-shadow:0 0 22px rgba(0,20,45,.4);
}

/* side water rail */
.rail{position:fixed;top:0;right:2px;width:5px;height:100%;background:rgba(255,255,255,.25);border-left:1px solid rgba(255,255,255,.4);z-index:5}
.rail__fill{position:absolute;bottom:0;left:0;width:100%;height:0;background:linear-gradient(#9fe0ff,#2E9BD6);box-shadow:0 -1px 3px rgba(46,155,214,.6)}

/* =========================================================================
   GLOSSY DARK CHROME NAV (Vista glass bar)
   ========================================================================= */
.chrome{
  display:flex; align-items:center; gap:10px; height:46px; padding:0 10px;
  background:linear-gradient(#5a6b78,#2b3a47 46%,#111c26 54%,#1c2a36);
  border-bottom:1px solid #000; position:relative;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
}
.chrome::after{content:"";position:absolute;left:0;top:0;right:0;height:50%;background:linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,0));pointer-events:none}
.chrome__brand{display:flex;align-items:center;gap:6px;text-decoration:none}
.chrome__brand svg{filter:drop-shadow(0 1px 1px rgba(0,0,0,.6))}
.chrome__word{font:bold 17px "Segoe UI",Tahoma,sans-serif;color:#eaf6ff;text-shadow:0 1px 2px rgba(0,0,0,.7);letter-spacing:.2px}
.tabs{list-style:none;display:flex;gap:1px;margin-left:8px}
.tab{
  display:block;padding:5px 12px;font:bold 11px "Segoe UI",Tahoma,sans-serif;color:#cfe2f0;
  text-decoration:none;border:1px solid transparent;border-radius:4px 4px 0 0;
}
.tab:hover{color:#fff;text-decoration:none;background:linear-gradient(rgba(120,180,220,.45),rgba(40,90,130,.5));border-color:rgba(255,255,255,.25)}
.tab--on{color:#0a3a5c;background:linear-gradient(#eef8ff,#bfe2f7 50%,#9fd0ee);border:1px solid #6fa3cc;border-bottom-color:#9fd0ee;text-shadow:0 1px 0 rgba(255,255,255,.6)}
.chrome__search{margin-left:auto;display:flex;align-items:center;gap:3px}
.chrome__search input{
  width:118px;height:19px;padding:1px 6px;border:1px solid #0a1c28;border-radius:10px;
  background:linear-gradient(#dfeef8,#fff 40%);font:11px Tahoma;color:#234;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.3)
}
.chrome__clock{font:11px Tahoma,"Segoe UI",Verdana,sans-serif;color:#bcd6e8;padding-left:6px;border-left:1px solid rgba(255,255,255,.2);text-shadow:0 1px 1px #000}

/* aqua sub-nav strip */
.subnav{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:3px 12px;font-size:10px;color:#2c5a7d;
  background:linear-gradient(#dceefb,#bfe0f5);border-bottom:1px solid #8fbbdc;
}
.subnav a{color:#1769b0}
.subnav__links a{margin:0 1px}

/* =========================================================================
   MASTHEAD BANNER
   ========================================================================= */
.masthead{
  position:relative; display:flex; gap:14px; align-items:center; padding:12px 14px;
  background:
    linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.15)),
    url(img/era/sky-banner.jpg) center/cover;
  border-bottom:1px solid #8fbbdc;
}
.masthead__photo{position:relative;width:118px;height:118px;flex:none;border:1px solid #fff;outline:1px solid #6fa3cc;border-radius:8px;overflow:hidden;box-shadow:0 2px 6px rgba(0,30,60,.35),inset 0 0 0 1px rgba(255,255,255,.5)}
.masthead__photo img{width:100%;height:100%;object-fit:cover}
.masthead__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,0) 45%);pointer-events:none}
.masthead__copy{flex:1}
.eyebrow{font:bold 10px Tahoma;letter-spacing:.5px;color:#1c6fa8;text-transform:uppercase}
.eyebrow--gold{color:#7a5a10}
.masthead__h{font:normal 28px/1 "Segoe UI Light","Segoe UI",Tahoma,sans-serif;color:#0d4f86;margin:3px 0 5px;text-shadow:0 1px 0 #fff}
.masthead__h .bright{font-weight:bold;color:#2E9BD6;font-style:italic}
.masthead__sub{font-size:11px;color:#33536b;max-width:560px;margin-bottom:8px}
.masthead__btns{display:flex;gap:7px}

/* drifting bubbles on masthead photo */
.bubble{position:absolute;border-radius:50%;background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.95),rgba(190,235,255,.5) 40%,rgba(110,190,235,.18) 70%,transparent);box-shadow:inset 0 0 4px rgba(255,255,255,.7)}
.bubble--1{width:14px;height:14px;left:8px;top:10px;animation:bub 6s ease-in-out infinite}
.bubble--2{width:9px;height:9px;right:10px;bottom:14px;animation:bub 7.5s ease-in-out infinite .8s}
@keyframes bub{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* =========================================================================
   3-COLUMN LAYOUT
   ========================================================================= */
.layout{display:grid;grid-template-columns:186px 1fr 186px;gap:9px;padding:10px}
.col{display:flex;flex-direction:column;gap:9px;min-width:0}

/* ---------- the boxed panel (core era unit) ---------- */
.box{
  background:linear-gradient(#ffffff,#eef6fc);
  border:1px solid #9cc4e2; border-radius:5px;
  box-shadow:0 1px 2px rgba(0,30,60,.12), inset 0 1px 0 #fff;
  overflow:hidden;
}
.box__hd{
  padding:4px 9px; font:bold 12px "Segoe UI",Tahoma,sans-serif; color:#0f4f7d;
  background:linear-gradient(#eaf5fd,#c9e6fa 50%,#bbdef7);
  border-bottom:1px solid #9cc4e2; text-shadow:0 1px 0 rgba(255,255,255,.7);
  display:flex;align-items:baseline;justify-content:space-between;gap:6px;
}
.box__hd h2{font:bold 12px "Segoe UI",Tahoma,sans-serif;color:#0f4f7d;display:inline}
.box__hd--star::before{content:"";display:inline-block;width:13px;height:13px;margin-right:5px;vertical-align:-2px;
  background:radial-gradient(circle at 38% 32%,#fff,#9fe0ff 40%,#2E9BD6 75%);border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.box__hdnote{font:normal 10px Tahoma;color:#5a86a3}
.box__p{padding:7px 9px;font-size:11px;color:#33505f}
.box__p--center{text-align:center}
.box__fine{padding:0 9px 6px;font-size:10px;color:#6a8aa0}
.box__btn,.box__more{padding:5px 9px 7px}
.box__more{font-size:10px}
.box--tint{background:linear-gradient(#f1fbe6,#e7f6cf)}
.box--tint .box__hd{background:linear-gradient(#eef9d8,#d6efaa);border-bottom-color:#a9cf78;color:#3c6312}
.box--tint .box__hd h2{color:#3c6312}

/* arrow-bullet link lists (dense) */
.links{list-style:none;padding:5px 9px 7px}
.links li{padding:2px 0 2px 13px;position:relative;border-bottom:1px dotted #cfe2f0;line-height:1.5}
.links li:last-child{border-bottom:0}
.links li::before{content:"\00BB";position:absolute;left:0;top:1px;color:#2E9BD6;font-weight:bold}
.links--mini li{font-size:10px;padding-left:11px}
.box--tint .links li::before{color:#6aab1e}

/* visitor counter widget */
.box--counter .counter{
  margin:7px 9px 2px;text-align:center;font:bold 15px Tahoma,"Segoe UI",Verdana,sans-serif;
  letter-spacing:2px;color:#bfe9ff;background:#08263a;border:1px solid #04141f;border-radius:3px;
  padding:5px 0;box-shadow:inset 0 1px 4px rgba(0,0,0,.7)
}

/* sidebar icons */
.ico-globe{float:left;margin:0 7px 4px 0}
.ico-globe--big{float:none;margin:0 auto 4px;display:block}
.ico-bub{float:right;margin:0 0 3px 7px}

/* news list */
.news{list-style:none;padding:5px 9px 4px}
.news li{padding:3px 0;border-bottom:1px dotted #cfe2f0;font-size:11px;color:#33505f}
.news li:last-child{border-bottom:0}
.news__date{display:inline-block;min-width:34px;font-weight:bold;color:#1c6fa8;font-size:10px}

/* join form (sidebar) */
.joinform{padding:6px 9px 9px}
.field{display:flex;align-items:center;gap:4px;background:linear-gradient(#dceefa,#fff 45%);border:1px solid #7faacc;border-radius:11px;padding:1px 4px 1px 6px;box-shadow:inset 0 1px 2px rgba(0,30,60,.2);margin-bottom:5px}
.field input{flex:1;border:0;background:transparent;font:11px Tahoma;color:#234;padding:3px 2px;outline:none;min-width:0}
.joinform .gbtn{width:100%;text-align:center}
.joinform__note{margin-top:5px;font-size:10px;color:#6a8aa0}
.joinform__note.is-ok{color:#3c7d12;font-weight:bold}
.joinform__note.is-err{color:#c0341a;font-weight:bold}

/* =========================================================================
   THE CHANNELS — glossy tile grid (the signature)
   ========================================================================= */
.chgrid{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:9px}
.chgrid li{min-width:0}
.channel{
  display:block;position:relative;border:1px solid #6fa3cc;border-radius:6px;overflow:hidden;
  background:linear-gradient(#ffffff,#dceffb);
  box-shadow:0 1px 3px rgba(0,30,60,.2),inset 0 1px 0 rgba(255,255,255,.8);
  text-decoration:none;
}
.channel:hover{text-decoration:none;border-color:#2E9BD6;box-shadow:0 2px 7px rgba(46,155,214,.5),inset 0 1px 0 rgba(255,255,255,.9)}
.channel__photo{position:relative;display:block;height:78px;overflow:hidden;border-bottom:1px solid #8fbbdc}
.channel__photo img{width:100%;height:100%;object-fit:cover}
.channel__refl{position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,0) 38%,rgba(255,255,255,0) 70%,rgba(255,255,255,.25));pointer-events:none}
.channel__face{display:flex;align-items:center;gap:7px;padding:5px 8px}
.channel__icon{flex:none;filter:drop-shadow(0 1px 1px rgba(0,40,70,.4))}
.channel__txt strong{display:block;font:bold 12px "Segoe UI",Tahoma,sans-serif;color:#0f4f7d}
.channel__txt small{display:block;font-size:10px;color:#4d7088;line-height:1.3}
.channel__sweep{position:absolute;top:0;left:-60%;width:55%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-18deg);pointer-events:none;opacity:0}
.channel--boot{opacity:0;transform:translateY(10px) scale(.97)}
.channel--booting{animation:chBoot .5s cubic-bezier(.2,.8,.3,1) both}
.channel--booting .channel__sweep{animation:chSweep .6s ease-out .05s}
@keyframes chBoot{0%{opacity:0;transform:translateY(10px) scale(.97)}100%{opacity:1;transform:none}}
@keyframes chSweep{0%{opacity:0;left:-60%}30%{opacity:1}100%{opacity:0;left:120%}}

/* channel detail lozenges */
.ch-detail{padding:0 9px 9px}
.lozenge{padding:6px 9px;margin-top:7px;background:linear-gradient(#f6fbff,#e6f3fc);border:1px solid #b6d6ec;border-radius:5px;box-shadow:inset 0 1px 0 #fff}
.lozenge h3{font:bold 12px "Segoe UI",Tahoma,sans-serif;color:#15527e;margin-bottom:2px}
.lozenge p{font-size:11px;color:#3a566a}
.lozenge:target{border-color:#2E9BD6;box-shadow:0 0 5px rgba(46,155,214,.5),inset 0 1px 0 #fff;background:linear-gradient(#eef8ff,#d8eefb)}

/* =========================================================================
   HOW IT WORKS — flow nodes
   ========================================================================= */
.flow{list-style:none;position:relative;display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;padding:11px 9px 9px}
.flow__line{position:absolute;left:14%;right:14%;top:54px;height:5px;background:linear-gradient(#dcf0ff,#9fd6f4);border:1px solid #7fb8de;border-radius:3px;overflow:hidden}
.flow__current{position:absolute;top:0;left:-40%;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);animation:flow 2.4s linear infinite}
@keyframes flow{0%{left:-40%}100%{left:110%}}
.node{text-align:center;position:relative;z-index:1}
.node__frame{position:relative;display:block;width:84px;height:62px;margin:0 auto 5px;border:1px solid #fff;outline:1px solid #6fa3cc;border-radius:6px;overflow:hidden;box-shadow:0 2px 5px rgba(0,30,60,.3)}
.node__frame img{width:100%;height:100%;object-fit:cover}
.sheen{position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.6),rgba(255,255,255,0) 45%);pointer-events:none}
.node__num{display:inline-block;width:16px;height:16px;line-height:16px;border-radius:50%;background:linear-gradient(#bfe9ff,#2E9BD6);color:#fff;font:bold 10px Tahoma;text-shadow:0 1px 1px rgba(0,40,70,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.6);margin-bottom:2px}
.node strong{display:block;font:bold 12px "Segoe UI",Tahoma,sans-serif;color:#0f4f7d}
.node small{display:block;font-size:10px;color:#4d7088;padding:0 4px}

/* =========================================================================
   IMPACT — inset stat boxes
   ========================================================================= */
.stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;padding:9px}
.stat{text-align:center;padding:8px 5px;background:linear-gradient(#fbfdff,#e4f2fc);border:1px solid #aacfe8;border-radius:5px;box-shadow:inset 0 1px 0 #fff}
.stat__num{display:block;font:bold 22px "Segoe UI",Tahoma,sans-serif;color:#2E9BD6;text-shadow:0 1px 0 #fff;line-height:1}
.stat__label{display:block;font-weight:bold;font-size:11px;color:#15527e;margin-top:2px}
.stat__tip{display:block;font-size:10px;color:#6a8aa0;margin-top:1px}

/* =========================================================================
   THE 2030 GOAL — glossy tank
   ========================================================================= */
.tank-row{display:flex;gap:14px;align-items:center;padding:11px 12px}
.tank{flex:none}
.tank__glass{position:relative;width:74px;height:120px;border:1px solid #5b93bb;border-radius:8px;overflow:hidden;
  background:linear-gradient(90deg,#d2ebf8,#eef8ff 30%,#cfe7f5);box-shadow:inset 0 0 8px rgba(0,40,70,.25),inset 0 1px 0 #fff}
.tank__water{position:absolute;left:0;bottom:0;width:100%;height:0;transition:height 1.5s cubic-bezier(.3,.7,.3,1);
  background:linear-gradient(#7fd0f5,#2E9BD6 60%,#176fa8);box-shadow:inset 0 2px 6px rgba(255,255,255,.4)}
.tank__surface{position:absolute;top:-3px;left:0;width:100%;height:6px;background:linear-gradient(#eafaff,#9fdcf6);border-radius:50%;opacity:.85}
.tank__strip{position:absolute;top:0;left:9px;width:11px;height:100%;background:linear-gradient(90deg,rgba(255,255,255,.75),rgba(255,255,255,0));pointer-events:none}
.tbub{position:absolute;bottom:6px;width:6px;height:6px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,rgba(190,235,255,.5));opacity:.8}
.tbub--1{left:18px;animation:rise 3.2s linear infinite}
.tbub--2{left:40px;width:4px;height:4px;animation:rise 4s linear infinite .7s}
.tbub--3{left:54px;animation:rise 3.6s linear infinite 1.3s}
.tbub--4{left:30px;width:5px;height:5px;animation:rise 4.4s linear infinite 2s}
@keyframes rise{0%{transform:translateY(0);opacity:0}15%{opacity:.85}100%{transform:translateY(-104px);opacity:0}}
.tank__info{flex:1}
.tank__pct{font:bold 13px Tahoma;color:#15527e}
.tank__pct strong{font-size:26px;color:#2E9BD6;text-shadow:0 1px 0 #fff}
.tank__cap{font-size:11px;color:#4d7088;margin:3px 0 7px}

/* =========================================================================
   GRASS BAND + FOOTER
   ========================================================================= */
.grassband{height:46px;overflow:hidden;margin-top:4px;background:linear-gradient(rgba(255,255,255,0),rgba(180,225,140,.25))}
.grassband img{width:100%;height:auto;margin-top:-2px}
.footer{background:linear-gradient(#cfe7d2,#aacf9e);border-top:1px solid #7faa6e}
.footer__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:11px 14px 9px}
.fcol h4{font:bold 11px "Segoe UI",Tahoma,sans-serif;color:#2c5410;margin-bottom:3px;border-bottom:1px solid rgba(60,99,18,.3);padding-bottom:2px}
.fcol a{display:block;font-size:10px;color:#2f5a1e;padding:1px 0}
.fcol a:hover{color:#14350a}
.footer__bar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  padding:5px 14px;background:linear-gradient(#2b3a47,#111c26);border-top:1px solid #000;box-shadow:inset 0 1px 0 rgba(255,255,255,.15)}
.footer__badges{display:flex;gap:5px}
.badge{font-size:9px;color:#bcd6e8;border:1px solid #44606f;border-radius:3px;padding:1px 5px;background:linear-gradient(#3a4a58,#1c2a36)}
.footer__copy{font-size:10px;color:#9fbace}
.footer__copy a{color:#7fc0ec}

/* =========================================================================
   BOOT GREETING — Vista welcome window
   ========================================================================= */
.boot{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  background:rgba(20,50,80,.45) url(img/era/sky.jpg) center/cover;}
.boot[hidden]{display:none}
.boot__panel{width:430px;max-width:94vw;border:1px solid #06121c;border-radius:8px 8px 6px 6px;overflow:hidden;
  box-shadow:0 12px 40px rgba(0,20,45,.6);background:#eef6fc}
.boot--anim .boot__panel{animation:bootIn .4s cubic-bezier(.2,.9,.3,1) both}
@keyframes bootIn{0%{opacity:0;transform:scale(.9) translateY(8px)}100%{opacity:1;transform:none}}
.boot__titlebar{display:flex;align-items:center;gap:6px;height:30px;padding:0 6px 0 8px;
  background:linear-gradient(#6a93b8,#356391 46%,#1d456c 54%,#28547e);border-bottom:1px solid #0a233a;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.boot__brand{font:bold 11px "Segoe UI",Tahoma,sans-serif;color:#eaf6ff;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.boot__clock{margin-left:auto;font:11px Tahoma,"Segoe UI",Verdana,sans-serif;color:#cfe3f2;text-shadow:0 1px 1px #000}
.boot__winbtns{display:flex;gap:3px}
.wb{width:16px;height:14px;border:1px solid #0a233a;border-radius:3px;box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.wb--min{background:linear-gradient(#cfe6f5,#7fb0d4)}
.wb--max{background:linear-gradient(#cfe6f5,#7fb0d4)}
.wb--close{background:linear-gradient(#f7b59a,#d65a36);border-color:#9a2f12}
.boot__body{display:flex;gap:11px;padding:12px;background:linear-gradient(#ffffff,#e6f2fb)}
.boot__photo{width:96px;height:128px;object-fit:cover;border:1px solid #fff;outline:1px solid #6fa3cc;border-radius:6px;box-shadow:0 2px 6px rgba(0,30,60,.3)}
.boot__copy{flex:1}
.boot__eyebrow{font:bold 10px Tahoma;text-transform:uppercase;letter-spacing:.5px;color:#1c6fa8}
.boot__h{font:normal 26px/1 "Segoe UI Light","Segoe UI",Tahoma,sans-serif;color:#0d4f86;margin:1px 0 5px}
.boot__mission{font-size:11px;color:#33536b;margin-bottom:9px}
.boot__hint{font-size:10px;color:#7a96aa;margin-top:7px;font-style:italic}

/* =========================================================================
   MOBILE — early-smartphone glossy app interpretation (NOT clean-modern)
   ========================================================================= */
@media (max-width:1000px){
  body{background-position:center top}
  .page{width:100%;border-left:0;border-right:0}
  .chrome{flex-wrap:wrap;height:auto;padding:5px 8px;gap:6px}
  .chrome__search{order:3;margin-left:0;width:100%}
  .chrome__search input{flex:1;width:auto}
  .chrome__clock{display:none}
  .tabs{order:4;width:100%;margin-left:0;flex-wrap:wrap;gap:2px}
  .tab{border-radius:5px}
  .layout{grid-template-columns:1fr;gap:8px}
  .masthead__photo{width:92px;height:92px}
  .masthead__h{font-size:23px}
  .footer__cols{grid-template-columns:1fr 1fr}
  .footer__bar{justify-content:center;text-align:center}
}
@media (max-width:520px){
  .chgrid{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr;gap:14px}
  .flow__line{display:none}
  .stats{grid-template-columns:1fr}
  .masthead{flex-direction:column;text-align:center}
  .footer__cols{grid-template-columns:1fr 1fr}
}

/* =========================================================================
   REDUCED MOTION
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .channel--boot{opacity:1;transform:none}
  .tank__water{transition:none}
  .os-glint,.os-bubbles,.gadget{display:none!important}
  .page{opacity:1!important;transform:none!important}
}

/* =========================================================================
   AQUAZOA OS LAYER  (taskbar, start-menu, gadget, quirks — injected by os.js)
   ========================================================================= */
body{padding-bottom:40px}
.page{position:relative;z-index:1}
.page{opacity:0;transform:scale(.986)}
.page.os-open{animation:winOpen .42s cubic-bezier(.18,.9,.3,1) forwards}
@keyframes winOpen{0%{opacity:0;transform:scale(.986) translateY(6px)}100%{opacity:1;transform:none}}
body.os-closing .page{opacity:.18;transform:scale(.99);transition:opacity .4s,transform .4s}

/* drifting bubbles behind the column */
.os-bubbles{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.os-bub{position:absolute;bottom:-50px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.9),rgba(190,235,255,.45) 42%,rgba(120,195,235,.12) 70%,transparent 75%);
  box-shadow:inset 0 0 6px rgba(255,255,255,.6);animation-name:bubrise;animation-timing-function:linear;animation-iteration-count:infinite}
@keyframes bubrise{0%{transform:translateY(0) translateX(0);opacity:0}8%{opacity:.7}50%{transform:translateY(-52vh) translateX(14px)}92%{opacity:.7}100%{transform:translateY(-104vh) translateX(-10px);opacity:0}}

/* cursor water glint */
.os-glint{position:fixed;top:0;left:0;width:120px;height:120px;border-radius:50%;pointer-events:none;z-index:46;opacity:0;transition:opacity .4s;
  background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.45),rgba(180,230,255,.18) 40%,transparent 66%);mix-blend-mode:screen}

/* click splash ripple */
.os-splash{position:fixed;z-index:55;pointer-events:none;border-radius:50%;border:2px solid rgba(160,225,255,.85);
  box-shadow:0 0 10px rgba(120,200,245,.6),inset 0 0 8px rgba(255,255,255,.5);animation:splash .65s ease-out forwards}
@keyframes splash{0%{transform:scale(.2);opacity:.9}100%{transform:scale(1.3);opacity:0}}

/* striped progress bar */
.os-progress{position:fixed;top:0;left:0;right:0;height:4px;z-index:70;opacity:0;transition:opacity .2s}
.os-progress.is-on{opacity:1}
.os-progress span{display:block;height:100%;width:0;background:linear-gradient(#bfe9ff,#2E9BD6);
  background-image:linear-gradient(135deg,rgba(255,255,255,.45) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.45) 50%,rgba(255,255,255,.45) 75%,transparent 75%),linear-gradient(#7fd0f5,#2E9BD6);
  background-size:18px 18px,100% 100%;box-shadow:0 0 6px rgba(46,155,214,.7)}
.os-progress.is-on span{animation:prog .45s ease-out forwards,progstripe .5s linear infinite}
@keyframes prog{0%{width:0}100%{width:100%}}
@keyframes progstripe{0%{background-position:0 0,0 0}100%{background-position:18px 0,0 0}}

/* =========================================================================
   TASKBAR
   ========================================================================= */
.taskbar{position:fixed;left:0;right:0;bottom:0;height:34px;z-index:50;display:flex;align-items:stretch;gap:4px;padding:0 6px;
  background:linear-gradient(#5a6b78,#2b3a47 44%,#101b24 54%,#1c2a36);border-top:1px solid #000;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 -2px 6px rgba(0,20,40,.3)}
.tb-start{display:flex;align-items:center;gap:5px;padding:0 12px 0 8px;margin:3px 4px 3px 0;border:1px solid #2c5a18;border-radius:14px;
  background:linear-gradient(#d6f0a0,#9fd24e 47%,#6fb524 53%,#84c63a);color:#234d08;font:bold 12px "Segoe UI",Tahoma,sans-serif;
  text-shadow:0 1px 0 rgba(255,255,255,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 1px 2px rgba(0,30,10,.3);cursor:pointer}
.tb-start.is-on,.tb-start:active{box-shadow:inset 0 2px 4px rgba(0,40,10,.45)}
.tb-start svg{filter:drop-shadow(0 1px 1px rgba(0,40,10,.4))}
.tb-apps{display:flex;align-items:stretch;gap:3px;flex:1;min-width:0;overflow:hidden;padding:3px 0}
.tb-app{display:flex;align-items:center;gap:6px;max-width:170px;padding:0 11px;border:1px solid rgba(255,255,255,.16);border-radius:4px;
  background:linear-gradient(rgba(120,160,190,.35),rgba(40,70,95,.4));color:#dcecf7;font:bold 11px "Segoe UI",Tahoma,sans-serif;
  text-decoration:none;text-shadow:0 1px 1px rgba(0,0,0,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.tb-app:hover{text-decoration:none;color:#fff;background:linear-gradient(rgba(150,195,225,.5),rgba(60,100,135,.5))}
.tb-app--on{background:linear-gradient(#eef8ff,#bfe2f7 50%,#a3d2ee);color:#0a3a5c;border-color:#6fa3cc;text-shadow:0 1px 0 rgba(255,255,255,.6);box-shadow:inset 0 1px 3px rgba(0,40,70,.25)}
.tb-app span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-tray{display:flex;align-items:center;gap:7px;padding:0 6px 0 9px;margin:4px 0;border-left:1px solid rgba(0,0,0,.4);box-shadow:inset 1px 0 0 rgba(255,255,255,.12)}
.tb-snd{width:22px;height:22px;border:1px solid #0a1c28;border-radius:4px;background:linear-gradient(#3a4a58,#16222c);cursor:pointer;position:relative;box-shadow:inset 0 1px 0 rgba(255,255,255,.15)}
.tb-snd__ic{position:absolute;inset:0;background:no-repeat center/14px;}
.tb-snd__ic::before{content:"\1F507";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;filter:grayscale(1) brightness(1.5)}
.tb-snd.is-on{background:linear-gradient(#bfe9ff,#2E9BD6);border-color:#1d6fa6}
.tb-snd.is-on .tb-snd__ic::before{content:"\1F50A";filter:none}
.tb-clock{font:11px Tahoma,"Segoe UI",Verdana,sans-serif;color:#cfe3f2;text-shadow:0 1px 1px #000;min-width:42px;text-align:center}

/* start menu */
.startmenu{position:fixed;left:6px;bottom:38px;width:248px;z-index:51;opacity:0;transform:translateY(10px) scale(.97);transform-origin:bottom left;
  pointer-events:none;transition:opacity .22s,transform .22s;
  background:linear-gradient(#f2fafe,#dbeef9);border:1px solid #4f8cba;border-radius:8px 8px 6px 6px;
  box-shadow:0 10px 34px rgba(0,20,45,.5),inset 0 1px 0 #fff;overflow:hidden}
.startmenu.is-open{opacity:1;transform:none;pointer-events:auto}
.sm-head{display:flex;align-items:center;gap:8px;padding:9px 11px;background:linear-gradient(#6a93b8,#2d597f);color:#eaf6ff;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.sm-head b{font:bold 14px "Segoe UI",Tahoma,sans-serif;display:block;line-height:1.1}
.sm-head small{font-size:10px;opacity:.85}
.sm-apps{padding:6px}
.sm-app{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:5px;text-decoration:none;color:#15527e;font:bold 12px "Segoe UI",Tahoma,sans-serif}
.sm-app:hover{text-decoration:none;color:#0a3a5c;background:linear-gradient(#eef8ff,#cfe8fa);box-shadow:inset 0 0 0 1px #b6d6ec}
.sm-app svg{filter:drop-shadow(0 1px 1px rgba(0,40,70,.3))}
.sm-foot{display:flex;justify-content:space-between;align-items:center;padding:7px 11px;border-top:1px solid #b6d6ec;background:linear-gradient(#e6f3fc,#d2e8f7);font-size:10px;color:#5a86a3}
.sm-foot a{color:#1769b0}

/* draggable water-drop gadget */
.gadget{position:fixed;top:0;left:0;z-index:47;cursor:grab;text-align:center;will-change:transform;user-select:none;-webkit-user-select:none}
.gadget.is-drag{cursor:grabbing}
.gadget__drop{position:relative;width:64px;height:78px;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 4px 6px rgba(0,40,70,.4))}
.gadget__drop svg{position:absolute;inset:0;margin:auto}
.gadget__time{position:relative;z-index:1;font:bold 12px "Segoe UI",Tahoma,sans-serif;color:#fff;text-shadow:0 1px 2px rgba(0,40,70,.7);margin-top:14px}
.gadget__label{display:block;font:10px Tahoma;color:#0d4f86;text-shadow:0 1px 0 rgba(255,255,255,.7);opacity:.7;margin-top:1px}

/* periodic tile light-sweep */
.channel{}
.tile-shine::after{content:"";position:absolute;top:0;left:-60%;width:55%;height:100%;z-index:2;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-18deg);animation:chSweep .65s ease-out}

@media (max-width:1000px){
  .tb-app span{display:none}
  .tb-app{max-width:none;padding:0 9px}
  .startmenu{width:220px}
}

/* =========================================================================
   PAGE: THE MISSION  ("About this OS" — distinct system-info interior)
   ========================================================================= */
.winhead{display:flex;align-items:center;gap:8px;margin:10px 10px 0;padding:5px 11px;border:1px solid #1d6fa6;border-radius:6px 6px 0 0;
  background:linear-gradient(#6a93b8,#356391 46%,#1d456c 54%,#28547e);color:#eaf6ff;text-shadow:0 1px 2px rgba(0,0,0,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.winhead__ic svg{display:block;filter:drop-shadow(0 1px 1px rgba(0,0,0,.5))}
.winhead__t{font:bold 12px "Segoe UI",Tahoma,sans-serif}
.winhead__v{margin-left:auto;font:11px Tahoma,"Segoe UI",Verdana,sans-serif;color:#bcd6e8}
.missionwrap{display:flex;flex-direction:column;gap:9px;padding:9px 10px 10px}

/* about card */
.about__body{display:grid;grid-template-columns:198px 1fr;gap:14px;padding:12px}
.about__emblem{text-align:center}
.about__shot{position:relative;display:block;width:150px;height:150px;margin:0 auto 7px;border:1px solid #fff;outline:1px solid #6fa3cc;border-radius:10px;overflow:hidden;box-shadow:0 3px 8px rgba(0,30,60,.35)}
.about__shot img{width:100%;height:100%;object-fit:cover}
.about__word{font:bold 22px "Segoe UI",Tahoma,sans-serif;color:#0d4f86;text-shadow:0 1px 0 #fff;line-height:1}
.about__sub{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:#5a86a3;margin-bottom:8px}
.scan{height:11px;border:1px solid #5b93bb;border-radius:6px;overflow:hidden;background:linear-gradient(#dfeef8,#c4e2f2);box-shadow:inset 0 1px 2px rgba(0,30,60,.25)}
.scan span{display:block;height:100%;width:100%;
  background-image:linear-gradient(135deg,rgba(255,255,255,.5) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.5) 50%,rgba(255,255,255,.5) 75%,transparent 75%),linear-gradient(#9fe0ff,#2E9BD6);
  background-size:16px 16px,100% 100%;animation:scanfill 1.5s cubic-bezier(.3,.7,.3,1) both,progstripe .5s linear infinite}
@keyframes scanfill{0%{width:0}100%{width:100%}}
.scan__label{font:10px Tahoma,"Segoe UI",Verdana,sans-serif;color:#2c7d3c;margin-top:3px}
.spec{align-self:center}
.spec>div{display:flex;justify-content:space-between;gap:10px;padding:4px 2px;border-bottom:1px dotted #bcd6e8;font-size:11px}
.spec>div:last-child{border-bottom:0}
.spec dt{color:#5a86a3;font-weight:bold}
.spec dd{color:#15527e;text-align:right;font-family:Tahoma,"Segoe UI",Verdana,sans-serif;font-size:11px}
.spec .ok{color:#2c7d3c}
.led{display:inline-block;width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#d6ffb0,#5cc62e);box-shadow:0 0 4px #6fd23a;vertical-align:0;animation:led 2s ease-in-out infinite}
@keyframes led{0%,100%{opacity:1}50%{opacity:.45}}

/* two-up: readme + release notes */
.mtwo{display:grid;grid-template-columns:1.32fr 1fr;gap:9px}
.readme__body{padding:9px 11px}
.readme__body p{font-size:11px;color:#345065;margin-bottom:7px;line-height:1.5}
.readme__cta{display:flex;gap:7px;align-items:center;margin-top:9px}
.changelog{list-style:none;padding:8px 10px}
.changelog li{display:flex;gap:8px;align-items:flex-start;padding:5px 0;border-bottom:1px dotted #cfe2f0;font-size:11px;color:#345065;line-height:1.4}
.changelog li:last-child{border-bottom:0}
.ctag{flex:none;min-width:52px;text-align:center;font:bold 9px "Segoe UI",Tahoma,sans-serif;text-transform:uppercase;letter-spacing:.4px;padding:2px 5px;border-radius:3px;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.25);box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.ctag--add{background:linear-gradient(#9fd24e,#6fb524);border:1px solid #4e8c18}
.ctag--fix{background:linear-gradient(#6cc4ef,#2E9BD6);border:1px solid #1d6fa6}
.ctag--imp{background:linear-gradient(#7fd0f5,#39a0d8);border:1px solid #2076b0}
.ctag--known{background:linear-gradient(#f5c264,#e09a25);border:1px solid #b97c12;color:#3a2706;text-shadow:0 1px 0 rgba(255,255,255,.4)}
.notes__foot{padding:4px 10px 8px;font-size:10px}

/* credits */
.credits__body{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:#cfe2f0;padding:1px;border-radius:0 0 5px 5px}
.cred{display:flex;flex-direction:column;gap:1px;padding:7px 9px;background:linear-gradient(#fbfdff,#eef6fc)}
.cred__role{font:bold 11px "Segoe UI",Tahoma,sans-serif;color:#15527e}
.cred__by{font-size:10px;color:#5a86a3}

@media (max-width:1000px){
  .about__body{grid-template-columns:1fr;gap:10px}
  .about__emblem{display:flex;flex-wrap:wrap;align-items:center;gap:5px 12px;text-align:left}
  .about__shot{margin:0;width:84px;height:84px}
  .about__word{font-size:19px}
  .scan{flex:1 0 140px}
  .mtwo{grid-template-columns:1fr}
  .credits__body{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .credits__body{grid-template-columns:1fr}
  .winhead__v{display:none}
}

/* =========================================================================
   PAGE: WHAT WE DO  (Programs browser — two-pane master/detail interior)
   ========================================================================= */
.menubar{display:flex;gap:2px;margin:0 10px;padding:2px 4px;background:linear-gradient(#f4f8fb,#e2ecf4);border:1px solid #b9d2e6;border-top:0}
.menubar span{font:11px "Segoe UI",Tahoma,sans-serif;color:#27445c;padding:2px 8px;border-radius:3px;cursor:default}
.menubar span:hover{background:linear-gradient(#dcecf8,#bcd9ee);box-shadow:inset 0 0 0 1px #9cc4e2}
.ptoolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 10px;padding:5px 9px;
  background:linear-gradient(#dceefb,#bfe0f5);border:1px solid #8fbbdc;border-top:0}
.ptoolbar__t{font-size:11px;color:#27506e}
.ptoolbar__sort{font-size:10px;color:#3a6585;white-space:nowrap}
.ptoolbar__sort select{font:11px Tahoma;color:#234;background:linear-gradient(#fff,#e8f3fb);border:1px solid #7faacc;border-radius:3px;padding:1px 3px}

.progwin{display:grid;grid-template-columns:244px 1fr;margin:0 10px;border:1px solid #9cc4e2;border-top:0;background:#fff;min-height:300px}
.proglist{list-style:none;border-right:1px solid #b9d2e6;background:linear-gradient(#f4fafe,#e9f3fb);overflow:auto;max-height:440px}
.progrow{display:flex;align-items:center;gap:8px;padding:7px 9px;border-bottom:1px solid #e0edf6;cursor:pointer;outline:none}
.progrow:hover{background:linear-gradient(#eef8ff,#dcedfa)}
.progrow.is-sel{background:linear-gradient(#cfe8fa,#aed5f0);box-shadow:inset 0 0 0 1px #7fb4dd}
.progrow:focus-visible{box-shadow:inset 0 0 0 2px #2E9BD6}
.progrow__ic{flex:none;width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(#ffffff,#d6ecfb);border:1px solid #9cc4e2;border-radius:6px;box-shadow:inset 0 1px 0 #fff}
.progrow__ic svg{width:20px;height:22px;filter:drop-shadow(0 1px 1px rgba(0,40,70,.35))}
.progrow__txt{flex:1;min-width:0}
.progrow__txt b{display:block;font:bold 12px "Segoe UI",Tahoma,sans-serif;color:#0f4f7d;line-height:1.1}
.progrow__txt small{display:block;font-size:10px;color:#5a86a3}
.progrow__pill{flex:none;font:bold 9px Tahoma;text-transform:uppercase;letter-spacing:.3px;color:#2c5410;
  background:linear-gradient(#d9f0a8,#9fd24e);border:1px solid #6fb524;border-radius:8px;padding:1px 6px;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}

.progdetail{padding:13px 15px;min-width:0}
.pd-head{display:flex;align-items:center;gap:11px;padding-bottom:9px;border-bottom:1px solid #cfe2f0;margin-bottom:9px}
.pd-ic{flex:none;width:52px;height:52px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(#ffffff,#cfe7fa);border:1px solid #8fbbdc;border-radius:10px;box-shadow:0 2px 5px rgba(0,30,60,.2),inset 0 1px 0 #fff}
.pd-ic svg{width:34px;height:38px;filter:drop-shadow(0 1px 2px rgba(0,40,70,.4))}
.pd-name{flex:1;min-width:0}
.pd-name b{font:bold 19px "Segoe UI",Tahoma,sans-serif;color:#0d4f86}
.pd-name sup{font-size:9px;color:#5a86a3}
.pd-name small{display:block;font-size:10px;color:#6a8aa0;margin-top:1px}
.pd-cat{flex:none;align-self:flex-start;font:bold 10px Tahoma;text-transform:uppercase;color:#1c6fa8;background:linear-gradient(#eaf5fd,#cfe6fa);border:1px solid #9cc4e2;border-radius:4px;padding:2px 7px}
.pd-blurb{font-size:12px;color:#34516a;line-height:1.55;margin-bottom:10px}
.pd-inc-h{font:bold 11px "Segoe UI",Tahoma,sans-serif;color:#15527e;margin-bottom:3px}
.pd-inc{list-style:none;margin-bottom:12px}
.pd-inc li{position:relative;padding:2px 0 2px 15px;font-size:11px;color:#3a566a}
.pd-inc li::before{content:"\2713";position:absolute;left:0;color:#5cb02e;font-weight:bold}
.pd-meter{margin-bottom:13px}
.pd-meter__l{display:block;font-size:11px;color:#345065;margin-bottom:3px}
.pd-meter__bar{display:block;height:13px;border:1px solid #5b93bb;border-radius:7px;overflow:hidden;background:linear-gradient(#e6f2fb,#d0e6f4);box-shadow:inset 0 1px 2px rgba(0,30,60,.2)}
.pd-meter__bar i{display:block;height:100%;width:0;transition:width 1s cubic-bezier(.3,.7,.3,1);
  background-image:linear-gradient(135deg,rgba(255,255,255,.45) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.45) 50%,rgba(255,255,255,.45) 75%,transparent 75%),linear-gradient(#7fd0f5,#2E9BD6);
  background-size:16px 16px,100% 100%}
.pd-acts{display:flex;gap:8px}
.pd-load{padding:30px 4px;text-align:center}
.pd-load span{display:block;height:13px;max-width:240px;margin:0 auto 8px;border:1px solid #5b93bb;border-radius:7px;overflow:hidden;
  background-image:linear-gradient(135deg,rgba(255,255,255,.5) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.5) 50%,rgba(255,255,255,.5) 75%,transparent 75%),linear-gradient(#9fe0ff,#2E9BD6);
  background-size:16px 16px,100% 100%;animation:progstripe .5s linear infinite}
.pd-load p{font:11px Tahoma,"Segoe UI",Verdana,sans-serif;color:#3a6585}

/* status bar */
.statusbar{display:flex;align-items:center;gap:9px;margin:0 10px 8px;padding:4px 10px;font-size:11px;color:#34516a;
  background:linear-gradient(#eef6fc,#dcebf6);border:1px solid #9cc4e2;border-top:0;border-radius:0 0 5px 5px}
.statusbar b{color:#15527e}
.statusbar__sep{width:1px;height:13px;background:#b9d2e6;box-shadow:1px 0 0 #fff}
.statusbar__ok{margin-left:auto;color:#2c7d3c}

@media (max-width:1000px){
  .progwin{grid-template-columns:1fr}
  .proglist{border-right:0;border-bottom:1px solid #b9d2e6;max-height:none;display:grid;grid-template-columns:1fr 1fr}
  .progrow{border-right:1px solid #e0edf6}
  .ptoolbar{flex-wrap:wrap}
}
@media (max-width:520px){
  .proglist{grid-template-columns:1fr}
  .menubar{display:none}
}

/* =========================================================================
   OS QUIRKS — poppable bubbles, swimming fish, weather gadget
   ========================================================================= */
.os-bub{pointer-events:auto;cursor:pointer}
.os-bub.pop{opacity:0!important}
.os-fish{position:fixed;left:0;top:0;width:72px;height:auto;z-index:0;pointer-events:none;opacity:0;
  filter:drop-shadow(0 4px 7px rgba(0,40,70,.4))}

.gadget--weather{width:118px;padding:7px 8px 6px;border:1px solid #6fa3cc;border-radius:9px;text-align:left;
  background:linear-gradient(#ffffff,#dcefff 40%,#bfe2f7);box-shadow:0 3px 8px rgba(0,30,60,.35),inset 0 1px 0 #fff;cursor:grab}
.gadget--weather.is-drag{cursor:grabbing}
.wgad{display:flex;align-items:center;gap:7px}
.wgad__sun{flex:none;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff6c8,#ffd34d 55%,#f4a623);
  box-shadow:0 0 8px rgba(255,200,60,.8),inset 0 1px 0 rgba(255,255,255,.7);animation:sunpulse 3.5s ease-in-out infinite}
@keyframes sunpulse{0%,100%{box-shadow:0 0 6px rgba(255,200,60,.7),inset 0 1px 0 rgba(255,255,255,.7)}50%{box-shadow:0 0 13px rgba(255,200,60,1),inset 0 1px 0 rgba(255,255,255,.7)}}
.wgad__t b{display:block;font:bold 12px "Segoe UI",Tahoma,sans-serif;color:#0d4f86;line-height:1.1}
.wgad__t small{font-size:10px;color:#3a6585}
.wgad__note{display:block;font-size:9px;color:#5a86a3;margin-top:4px;text-align:center}

/* =========================================================================
   PAGE: IMPACT  (System Monitor dashboard — distinct interior)
   ========================================================================= */
.montool{display:flex;align-items:center;gap:9px;margin:0 10px;padding:4px 9px;font-size:10px;color:#27506e;
  background:linear-gradient(#dceefb,#bfe0f5);border:1px solid #8fbbdc;border-top:0}
.montool__live{display:inline-flex;align-items:center;gap:5px;font-weight:bold;color:#2c7d3c}
.live-dot{width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#d6ffb0,#46c21e);box-shadow:0 0 5px #5cd22e;animation:led 1.4s ease-in-out infinite}
.montool__sep{width:1px;height:12px;background:#9fc4e0;box-shadow:1px 0 0 #fff}
.montool__upd{margin-left:auto}
.montool b{color:#15527e}
.dash{display:flex;flex-direction:column;gap:9px;padding:9px 10px 10px}

/* orb gauges row */
.orbrow{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.orb{position:relative;text-align:center;padding:12px 8px 9px;border:1px solid #9cc4e2;border-radius:6px;
  background:linear-gradient(#ffffff,#e4f2fc);box-shadow:0 1px 2px rgba(0,30,60,.12),inset 0 1px 0 #fff;overflow:hidden}
.orb__bead{position:relative;width:54px;height:54px;margin:0 auto 5px;border-radius:50%;
  background:conic-gradient(#2E9BD6 var(--p),#d3e6f2 0);padding:5px;box-shadow:inset 0 0 0 1px #bcd9ec}
.orb__bead svg{width:100%;height:100%;display:block;filter:drop-shadow(0 1px 2px rgba(0,40,70,.4))}
.orb__num{font:bold 23px "Segoe UI",Tahoma,sans-serif;color:#2E9BD6;text-shadow:0 1px 0 #fff;line-height:1}
.orb__lab{font-size:11px;font-weight:bold;color:#15527e;margin-top:2px}
.orb__delta{font-size:9px;color:#2c7d3c;margin-top:2px}

.dash2{display:grid;grid-template-columns:1fr 1fr;gap:9px}

/* performance graph */
.graphwrap{padding:9px}
.graph{display:block;width:100%;height:150px;background:linear-gradient(#f6fbff,#e9f4fc);border:1px solid #bcd9ec;border-radius:4px}
.graph__area{fill:rgba(46,155,214,.22)}
.graph__line{fill:none;stroke:#2E9BD6;stroke-width:2;stroke-linejoin:round;stroke-dasharray:1300;stroke-dashoffset:1300;animation:gdraw 1.8s ease-out .2s forwards}
@keyframes gdraw{to{stroke-dashoffset:0}}
.graph__scan{stroke:rgba(255,255,255,.8);stroke-width:2;animation:gscan 3.4s linear infinite}
@keyframes gscan{from{transform:translateX(0)}to{transform:translateX(480px)}}
.graph__x{display:flex;justify-content:space-between;font:10px Tahoma,"Segoe UI",Verdana,sans-serif;color:#6a8aa0;padding:3px 2px 0}

/* system resources (task-manager meters) */
.resbox__body{padding:9px}
.res{display:grid;grid-template-columns:96px 1fr 34px;align-items:center;gap:7px;margin-bottom:7px}
.res__l{font-size:10px;color:#345065}
.res__bar{height:13px;border:1px solid #5b93bb;border-radius:7px;overflow:hidden;background:linear-gradient(#e6f2fb,#d0e6f4);box-shadow:inset 0 1px 2px rgba(0,30,60,.2)}
.res__bar i{display:block;height:100%;width:0;transition:width .9s cubic-bezier(.3,.7,.3,1);
  background-image:linear-gradient(135deg,rgba(255,255,255,.4) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%),linear-gradient(#7fd0f5,#2E9BD6);background-size:14px 14px,100% 100%}
.res__v{font:bold 11px Tahoma,"Segoe UI",Verdana,sans-serif;color:#15527e;text-align:right}
.health{display:flex;align-items:center;gap:10px;margin-top:11px;padding-top:9px;border-top:1px solid #cfe2f0}
.health__dial{flex:none;width:50px;height:50px;border-radius:50%;background:conic-gradient(#5cc62e var(--p,98%),#d3e6f2 0);
  display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px #bcd9ec}
.health__pct{width:36px;height:36px;border-radius:50%;background:linear-gradient(#fff,#e4f2fc);display:flex;align-items:center;justify-content:center;
  font:bold 11px "Segoe UI",Tahoma,sans-serif;color:#2c7d3c;box-shadow:inset 0 1px 2px rgba(0,30,60,.15)}
.health__t b{display:block;font:bold 12px "Segoe UI",Tahoma,sans-serif;color:#15527e}
.health__t small{font-size:10px;color:#5a86a3}

/* event log (terminal-ish) */
.evlog{list-style:none;padding:7px 9px;max-height:188px;overflow:hidden}
.evlog li{font:11px Tahoma,"Segoe UI",Verdana,sans-serif;color:#2f5167;padding:3px 0;border-bottom:1px dotted #d6e6f2;line-height:1.3}
.evlog li:last-child{border-bottom:0}
.evlog b{color:#1c6fa8}
.evnew{animation:evin .5s ease-out}
@keyframes evin{0%{opacity:0;transform:translateY(-6px);background:#eaf6d8}100%{opacity:1;transform:none}}

@media (max-width:1000px){
  .orbrow{grid-template-columns:1fr 1fr}
  .dash2{grid-template-columns:1fr}
}
@media (max-width:520px){
  .orbrow{grid-template-columns:1fr 1fr}
  .res{grid-template-columns:84px 1fr 30px}
  .montool{flex-wrap:wrap}
}

/* reduced-motion: ensure graph line + bars are shown, quirks off */
@media (prefers-reduced-motion:reduce){
  .graph__line{stroke-dashoffset:0!important}
  .graph__scan,.os-fish{display:none!important}
}

/* =========================================================================
   PAGE: THE WATER  (media-viewer gallery — distinct interior)
   ========================================================================= */
.viewer{margin:0 10px;border:1px solid #9cc4e2;border-top:0;background:#fff}
.stage{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;
  background:#0a2438;border-bottom:1px solid #2a5878}
.stage__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease}
.stage__img.is-vis{opacity:1}
.stage__bevel{position:absolute;inset:0;pointer-events:none;z-index:2;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),inset 0 2px 14px rgba(255,255,255,.18),inset 0 -40px 60px rgba(0,20,40,.4)}
.stage__cap{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:22px 14px 9px;
  background:linear-gradient(rgba(4,16,28,0),rgba(4,16,28,.82));color:#eaf6ff;pointer-events:none}
.stage__cap b{display:block;font:bold 17px "Segoe UI",Tahoma,sans-serif;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.stage__cap small{font-size:11px;color:#bfe2f7;text-shadow:0 1px 2px rgba(0,0,0,.7)}
.stage__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:36px;height:50px;
  border:1px solid rgba(10,40,60,.6);border-radius:6px;color:#eaf6ff;font-size:15px;
  background:linear-gradient(rgba(60,110,150,.55),rgba(20,50,80,.6));backdrop-filter:blur(2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);opacity:0;transition:opacity .25s}
.stage:hover .stage__nav,.stage__nav:focus-visible{opacity:1}
.stage__nav--prev{left:8px}.stage__nav--next{right:8px}
.stage__nav:hover{background:linear-gradient(rgba(90,150,195,.7),rgba(40,80,120,.75))}

/* glossy media control bar */
.mctrl{display:flex;align-items:center;gap:9px;padding:6px 11px;
  background:linear-gradient(#5a6b78,#2b3a47 46%,#101b24 54%,#1c2a36);border-bottom:1px solid #000;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.mbtn{width:28px;height:24px;border:1px solid #0a1c28;border-radius:5px;color:#eaf6ff;font-size:12px;cursor:pointer;
  background:linear-gradient(rgba(120,160,190,.5),rgba(40,70,95,.55));box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.mbtn:hover{background:linear-gradient(rgba(150,195,225,.6),rgba(60,100,135,.6))}
.mbtn--play{width:34px;background:linear-gradient(#bfe9ff,#2E9BD6);border-color:#1d6fa6;color:#06324f}
.mbtn--play .mbtn__pause{display:none}
.mbtn--play.is-playing .mbtn__play{display:none}
.mbtn--play.is-playing .mbtn__pause{display:inline}
.mprog{flex:1;height:7px;border:1px solid #0a1c28;border-radius:5px;overflow:hidden;background:rgba(0,10,20,.5);box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
.mprog span{display:block;height:100%;width:0;background:linear-gradient(#9fe0ff,#2E9BD6);box-shadow:0 0 5px rgba(46,155,214,.7)}
.mctrl__c{font:11px Tahoma,"Segoe UI",Verdana,sans-serif;color:#cfe3f2;white-space:nowrap}
.mctrl__c b{color:#fff}

/* filmstrip */
.filmstrip{display:flex;gap:6px;padding:8px;overflow-x:auto;background:linear-gradient(#e9f3fb,#d2e6f4);
  scrollbar-width:thin}
.thumb{flex:none;width:84px;height:54px;border:1px solid #7faacc;border-radius:4px;overflow:hidden;cursor:pointer;
  position:relative;padding:0;background:#cfe2f0;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb__gloss{position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.45),rgba(255,255,255,0) 45%);pointer-events:none}
.thumb:hover{border-color:#2E9BD6}
.thumb.is-sel{border-color:#2E9BD6;box-shadow:0 0 0 2px rgba(46,155,214,.5),inset 0 1px 0 rgba(255,255,255,.6)}
.thumb:focus-visible{outline:2px solid #2E9BD6;outline-offset:1px}

@media (max-width:1000px){
  .stage__nav{opacity:1}
  .thumb{width:72px;height:46px}
}
@media (max-width:520px){
  .stage__cap b{font-size:15px}
  .thumb{width:62px;height:40px}
}

/* =========================================================================
   PAGE: JOIN  (Setup Wizard — distinct installer interior)
   ========================================================================= */
.wizard{display:grid;grid-template-columns:190px 1fr;margin:0 10px;border:1px solid #9cc4e2;border-top:0;background:#fff;min-height:340px}
.wiz-side{position:relative;background:linear-gradient(#3f9bd4,#2076b0 55%,#125f93);color:#eaf6ff;padding:14px 13px;
  border-right:1px solid #1d6fa6;box-shadow:inset -1px 0 0 rgba(255,255,255,.15)}
.wiz-side::after{content:"";position:absolute;left:0;top:0;right:0;height:46%;background:linear-gradient(rgba(255,255,255,.28),rgba(255,255,255,0));pointer-events:none}
.wiz-side__top{position:relative;text-align:center;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid rgba(255,255,255,.25)}
.wiz-side__top svg{filter:drop-shadow(0 1px 2px rgba(0,30,55,.5))}
.wiz-side__top b{display:block;font:bold 17px "Segoe UI",Tahoma,sans-serif;text-shadow:0 1px 2px rgba(0,30,55,.5);margin-top:2px}
.wiz-side__top small{font-size:10px;opacity:.85;text-transform:uppercase;letter-spacing:.5px}
.wiz-steps{list-style:none;position:relative}
.wiz-steps li{position:relative;display:flex;align-items:center;gap:8px;padding:6px 4px;font:bold 11px "Segoe UI",Tahoma,sans-serif;color:rgba(255,255,255,.7)}
.wiz-steps li i{flex:none;width:19px;height:19px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-style:normal;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.wiz-steps li.is-cur{color:#fff}
.wiz-steps li.is-cur i{background:linear-gradient(#fff,#cfe9ff);color:#1565a0;border-color:#fff;box-shadow:0 0 7px rgba(255,255,255,.7)}
.wiz-steps li.is-done{color:rgba(255,255,255,.85)}
.wiz-steps li.is-done i{background:linear-gradient(#bfe9a0,#7cc62e);border-color:#cfeeac;font-size:0}
.wiz-steps li.is-done i::after{content:"\2713";font-size:11px;color:#1c4d06}
.wiz-side__foot{position:absolute;left:13px;bottom:12px;font-size:10px;font-style:italic;color:rgba(255,255,255,.7);line-height:1.4}

.wiz-main{padding:16px 18px;min-width:0}
.wiz-hp{position:absolute;left:-9999px;width:1px;height:1px}
.wstep{}
.wstep.is-cur{animation:wstepin .35s ease-out}
@keyframes wstepin{0%{opacity:0;transform:translateX(10px)}100%{opacity:1;transform:none}}
.wstep__h{font:normal 21px/1.15 "Segoe UI Light","Segoe UI",Tahoma,sans-serif;color:#0d4f86;margin-bottom:7px}
.wstep__p{font-size:12px;color:#34516a;line-height:1.55;margin-bottom:10px;max-width:52ch}
.wstep__bul{list-style:none;margin-bottom:10px}
.wstep__bul li{position:relative;padding:3px 0 3px 17px;font-size:12px;color:#345065}
.wstep__bul li::before{content:"\00BB";position:absolute;left:0;color:#2E9BD6;font-weight:bold}
.wstep__fine{font-size:10px;color:#7a96aa;font-style:italic;margin-top:8px}
.wstep__err{font-size:11px;font-weight:bold;color:#c0341a;min-height:1em;margin:3px 0}

/* support segmented + plan tiles */
.planmode{display:inline-flex;border:1px solid #7faacc;border-radius:7px;overflow:hidden;margin-bottom:11px}
.seg{position:relative;cursor:pointer}
.seg input{position:absolute;opacity:0}
.seg span{display:block;padding:4px 16px;font:bold 11px "Segoe UI",Tahoma,sans-serif;color:#2c5a7d;background:linear-gradient(#f4fafe,#dcebf6)}
.seg+.seg span{border-left:1px solid #9cc4e2}
.seg input:checked+span{background:linear-gradient(#bfe2f7,#7fc0e8);color:#06324f;box-shadow:inset 0 1px 3px rgba(0,40,70,.2)}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:430px}
.plan{position:relative;display:flex;flex-direction:column;gap:1px;padding:9px 11px;border:1px solid #9cc4e2;border-radius:6px;cursor:pointer;
  background:linear-gradient(#ffffff,#eef6fc);box-shadow:inset 0 1px 0 #fff;transition:border-color .2s,box-shadow .2s}
.plan:hover{border-color:#2E9BD6}
.plan input{position:absolute;opacity:0}
.plan__a{font:bold 18px "Segoe UI",Tahoma,sans-serif;color:#2E9BD6}
.plan__d{font-size:10px;color:#5a86a3}
.plan input:checked~.plan__a{color:#0d6cb0}
.plan:has(input:checked){border-color:#2E9BD6;box-shadow:0 0 0 2px rgba(46,155,214,.45),inset 0 1px 0 #fff;background:linear-gradient(#eef8ff,#d6ecfb)}

/* details fields */
.wfields{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:440px}
.wfields label{display:block;font:bold 10px "Segoe UI",Tahoma,sans-serif;text-transform:uppercase;letter-spacing:.4px;color:#5a86a3}
.wfields input{display:block;width:100%;margin-top:4px;font:13px Tahoma;color:#234;background:linear-gradient(#f4fafe,#fff 35%);
  border:1px solid #7faacc;border-radius:4px;padding:6px 7px;box-shadow:inset 0 1px 2px rgba(0,30,60,.18)}
.wfields input:focus{outline:2px solid #2E9BD6;outline-offset:1px}

/* installing */
.installbar{height:20px;border:1px solid #5b93bb;border-radius:5px;overflow:hidden;background:linear-gradient(#e6f2fb,#cfe2f0);box-shadow:inset 0 1px 3px rgba(0,30,60,.25);margin:6px 0 5px;max-width:460px}
.installbar span{display:block;height:100%;width:0;transition:width .35s linear;
  background-image:linear-gradient(135deg,rgba(255,255,255,.5) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.5) 50%,rgba(255,255,255,.5) 75%,transparent 75%),linear-gradient(#9fe0ff,#2E9BD6);
  background-size:18px 18px,100% 100%;animation:progstripe .5s linear infinite}
.install-pct{font:11px Tahoma,"Segoe UI",Verdana,sans-serif;color:#15527e;margin-bottom:9px}
.installlog{list-style:none}
.installlog li{font:11px Tahoma,"Segoe UI",Verdana,sans-serif;color:#2c7d3c;padding:2px 0}

/* finish */
.finish{text-align:center;padding:8px 0}
.finish__check{display:inline-block;width:58px;height:58px;margin-bottom:6px}
.finish__check svg{width:100%;height:100%}
.finish__check circle{fill:none;stroke:#7cc62e;stroke-width:3;stroke-dasharray:151;stroke-dashoffset:151;animation:cdraw .5s ease-out forwards}
.finish__check path{fill:none;stroke:#7cc62e;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:48;stroke-dashoffset:48;animation:cdraw .4s ease-out .45s forwards}
@keyframes cdraw{to{stroke-dashoffset:0}}
.finish__sum{display:inline-block;text-align:left;margin:10px auto 0;border:1px solid #b6d6ec;border-radius:6px;overflow:hidden;background:#f6fbff;min-width:280px}
.finish__sum div{display:flex;justify-content:space-between;gap:16px;padding:6px 11px;border-bottom:1px solid #e0edf6;font-size:11px}
.finish__sum div:last-child{border-bottom:0}
.finish__sum span{color:#5a86a3}
.finish__sum b{color:#15527e}
.sum-ok{color:#2c7d3c!important}

/* wizard footer buttons */
.wiz-foot{display:flex;align-items:center;gap:8px;margin:0 10px;padding:7px 10px;
  background:linear-gradient(#eef6fc,#dcebf6);border:1px solid #9cc4e2;border-top:0;border-radius:0 0 5px 5px}
.wiz-foot__sp{flex:1}
.gbtn--ghost{background:linear-gradient(#fbfdff,#e4eef6);border-color:#9cc4e2;color:#2c5a7d}

@media (max-width:1000px){
  .wizard{grid-template-columns:1fr}
  .wiz-side{display:flex;align-items:center;gap:12px;padding:9px 12px;border-right:0;border-bottom:1px solid #1d6fa6}
  .wiz-side__top{padding:0;margin:0;border:0;text-align:left;display:flex;align-items:center;gap:8px}
  .wiz-side__top svg{width:30px;height:30px}
  .wiz-side__top b{font-size:14px}
  .wiz-steps{display:flex;flex-wrap:wrap;gap:2px 10px;flex:1}
  .wiz-steps li{padding:2px}
  .wiz-side__foot{display:none}
}
@media (max-width:520px){
  .plans{grid-template-columns:1fr}
  .wfields{grid-template-columns:1fr}
  .wiz-steps li span{display:none}
}

@media (prefers-reduced-motion:reduce){
  .finish__check circle,.finish__check path{stroke-dashoffset:0!important}
  .wstep.is-cur{animation:none}
}

/* =========================================================================
   PAGE: CONTACT  (MSN-style Messenger — distinct interior)
   ========================================================================= */
.msgr{margin:0 10px 9px;border:1px solid #9cc4e2;border-top:0;background:#fff}
.msgr__me{display:flex;align-items:center;gap:10px;padding:8px 12px;
  background:linear-gradient(#dff0fb,#bfe2f7 55%,#a6d2ee);border-bottom:1px solid #8fbbdc;box-shadow:inset 0 1px 0 #fff}
.dp{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border:1px solid #6fa3cc;border-radius:6px;background:linear-gradient(#fff,#dcefff);box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(0,30,60,.2)}
.dp--sm{width:28px;height:28px;border-radius:5px}
.dp__st{position:absolute;right:-3px;bottom:-3px;width:11px;height:11px;border-radius:50%;border:1.5px solid #fff;box-shadow:0 0 3px rgba(0,0,0,.3)}
.dp__st--on{background:radial-gradient(circle at 35% 30%,#d6ffb0,#46c21e)}
.dp__st--away{background:radial-gradient(circle at 35% 30%,#ffe9a0,#f4a623)}
.msgr__me-t b{font:bold 14px "Segoe UI",Tahoma,sans-serif;color:#0d4f86}
.msgr__me-t b small{font-weight:normal;color:#3a6585;font-size:11px}
.msgr__pm{display:block;font-size:11px;color:#2c7d3c;font-style:italic}

.msgr__win{display:grid;grid-template-columns:158px 1fr;min-height:330px}
.buddies{border-right:1px solid #b9d2e6;background:linear-gradient(#f4fafe,#e7f2fb);padding:5px;overflow:auto;max-height:380px}
.buddies__grp{font:bold 10px "Segoe UI",Tahoma,sans-serif;color:#3a6585;padding:4px 5px;text-transform:uppercase;letter-spacing:.3px}
.buddy{display:flex;align-items:center;gap:7px;width:100%;text-align:left;padding:5px;border-radius:5px;cursor:pointer;border:1px solid transparent;background:none}
.buddy:hover{background:linear-gradient(#eef8ff,#dcedfa)}
.buddy.is-sel{background:linear-gradient(#cfe8fa,#aed5f0);border-color:#7fb4dd}
.buddy__t{min-width:0}
.buddy__t b{display:block;font:bold 11px "Segoe UI",Tahoma,sans-serif;color:#15527e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buddy__t small{display:block;font-size:9px;color:#5a86a3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.chat{display:flex;flex-direction:column;min-width:0}
.chat.is-nudge{animation:nudge .5s ease}
@keyframes nudge{0%,100%{transform:none}15%{transform:translate(-6px,3px)}30%{transform:translate(6px,-3px)}45%{transform:translate(-5px,-2px)}60%{transform:translate(5px,2px)}75%{transform:translate(-3px,1px)}}
.chat__hd{display:flex;align-items:center;gap:8px;padding:6px 11px;background:linear-gradient(#eaf5fd,#cfe6fa);border-bottom:1px solid #9cc4e2}
.chat__hd b{font:bold 12px "Segoe UI",Tahoma,sans-serif;color:#0f4f7d}
.chat__hd small{display:block;font-size:10px;color:#5a86a3}
.chat__log{flex:1;min-height:170px;max-height:300px;overflow-y:auto;padding:9px 11px;background:linear-gradient(#ffffff,#f3f9fe)}
.msg{margin-bottom:8px;max-width:80%}
.msg--me{margin-left:auto;text-align:right}
.msg__who{display:block;font:bold 9px "Segoe UI",Tahoma,sans-serif;color:#7a96aa;text-transform:lowercase;margin-bottom:1px}
.msg--me .msg__who{color:#5a9e2e}
.msg__b{display:inline-block;text-align:left;font-size:12px;line-height:1.4;color:#243; padding:6px 10px;border-radius:10px;
  background:linear-gradient(#ffffff,#e6f2fb);border:1px solid #b6d6ec;box-shadow:inset 0 1px 0 #fff}
.msg__b a{color:#1769b0}
.msg--me .msg__b{background:linear-gradient(#eafac8,#cdec9a);border-color:#a9d06e;color:#234d08}
.msg--me .msg__b a{color:#2c6b12}
.chat__typing{display:flex;align-items:center;gap:4px;padding:2px 12px 4px;font-size:10px;color:#5a86a3;font-style:italic}
.chat__typing span{width:5px;height:5px;border-radius:50%;background:#7fb4dd;animation:typed 1.2s infinite}
.chat__typing span:nth-child(2){animation-delay:.2s}.chat__typing span:nth-child(3){animation-delay:.4s}
@keyframes typed{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.chat__typing em{font-style:italic;color:#3a6585}
.chat__tools{display:flex;align-items:center;gap:3px;padding:4px 9px;border-top:1px solid #cfe2f0;background:linear-gradient(#f4fafe,#e7f2fb)}
.emo{width:24px;height:22px;border:1px solid transparent;border-radius:4px;background:none;cursor:pointer;font-size:14px;line-height:1;padding:0}
.emo:hover{border-color:#9cc4e2;background:linear-gradient(#fff,#e4eef6)}
.chat__tools-sp{flex:1}
.chat__in{display:flex;gap:6px;padding:7px 9px;border-top:1px solid #b9d2e6;background:linear-gradient(#eef6fc,#dcebf6)}
.chat__in input{flex:1;min-width:0;font:13px Tahoma;color:#234;background:linear-gradient(#f4fafe,#fff 35%);border:1px solid #7faacc;border-radius:5px;padding:6px 8px;box-shadow:inset 0 1px 2px rgba(0,30,60,.18)}
.chat__in input:focus{outline:2px solid #2E9BD6;outline-offset:1px}
.msgr__foot{padding:7px 12px;font-size:10px;color:#6a8aa0;background:linear-gradient(#f4fafe,#e7f2fb);border-top:1px solid #cfe2f0}
.msgr__foot a{color:#1769b0}

@media (max-width:1000px){
  .msgr__win{grid-template-columns:1fr}
  .buddies{display:flex;gap:5px;border-right:0;border-bottom:1px solid #b9d2e6;max-height:none;overflow-x:auto}
  .buddies__grp{display:none}
  .buddy{flex:none;width:auto}
  .buddy__t small{display:none}
  .chat__log{max-height:240px}
}
@media (max-width:520px){
  .msg{max-width:88%}
  .emo{width:22px}
}