/* IOP Gallery (iop-gallery-front.php): 7 templates × 10 styles. A template lays out .iopg-photos; a style is the class .iopg-s-<name>
   on the wrapper and only sets colours, type and frames. Each style is a deliberate look of its own, the same in light and dark mode. */

.iopg{--gap:10px;--r:0px;--ink:#0b3d5c;--muted:#55606c;--accent:#e0a52b;--bg:#f6f8fa;--ph:#d9dee4;--f-head:"Inter",system-ui,sans-serif;--f-body:"Inter",system-ui,sans-serif;--f-label:"Inter",system-ui,sans-serif;
  background:var(--bg);color:var(--ink);font-family:var(--f-body);line-height:1.5;overflow:hidden;margin:0 0 1.5rem}
.iopg *{box-sizing:border-box}
/* the theme sets every .entry-content h1–h3 in Roboto Condensed capitals with !important: inside an album the style decides */
body .iopg h1,body .iopg h2,body .iopg h3,body .iopg h4{font-family:var(--f-head)!important;text-transform:none!important;letter-spacing:normal} /* «body» outweighs the theme's .entry-content h2 */
.iopg-g-tight{--gscale:.4}.iopg-g-normal{--gscale:1}.iopg-g-airy{--gscale:2}
.iopg-pad{max-width:1280px;margin:0 auto;padding:clamp(18px,3vw,36px) max(16px,env(safe-area-inset-left)) clamp(24px,4vw,48px)}
.iopg img{display:block;width:100%;height:100%;object-fit:cover;max-width:none}
.iopg a{color:inherit}
.iopg-ph{display:block;position:relative;overflow:hidden;border-radius:var(--r);background:var(--ph);cursor:zoom-in;text-decoration:none}
.iopg-ph img{transition:transform .5s}
.iopg-ph:hover img{transform:scale(1.03)}
.iopg-ph:focus-visible,.iopg button:focus-visible,.iopg a:focus-visible,.iopg input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.iopg *{transition:none!important;scroll-behavior:auto!important}}

/* ---------- templates ---------- */
.iopg-photos{--g:calc(var(--gap) * var(--gscale,1))}
.iopg-t-grid .iopg-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:var(--g)}
.iopg-t-grid .iopg-ph{aspect-ratio:1}
.iopg-t-just .iopg-photos{display:flex;flex-wrap:wrap;gap:var(--g)}
.iopg-t-just .iopg-ph{flex-grow:var(--ar);flex-basis:calc(var(--ar) * 230px);aspect-ratio:var(--ar)}
.iopg-t-just .iopg-photos::after{content:"";flex-grow:999}
@media (max-width:600px){.iopg-t-just .iopg-ph{flex-basis:calc(var(--ar) * 130px)}}
.iopg-t-mas .iopg-photos{columns:3 230px;column-gap:var(--g)}
.iopg-t-mas .iopg-ph{break-inside:avoid;margin-bottom:var(--g);aspect-ratio:var(--ar)}
.iopg-t-mos .iopg-photos{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(90px,15vw,200px);grid-auto-flow:dense;gap:var(--g)}
.iopg-t-mos .iopg-ph:first-child{grid-column:span 2;grid-row:span 2}
.iopg-t-mos .iopg-ph.iopg-w{grid-column:span 2}
@media (max-width:600px){.iopg-t-mos .iopg-photos{grid-template-columns:repeat(2,1fr)}}
.iopg-car{position:relative}
.iopg-track{display:flex;gap:calc(var(--gap) * var(--gscale,1));overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;padding-bottom:6px;overscroll-behavior-x:contain}
.iopg-track .iopg-ph{flex:0 0 auto;height:clamp(240px,52vw,540px);aspect-ratio:var(--ar);max-width:88%;scroll-snap-align:center}
.iopg-nav{display:flex;gap:8px;justify-content:flex-end;margin-top:10px}
.iopg-nav button{width:48px;height:48px;border-radius:999px;border:2px solid currentColor;background:transparent;color:inherit;font-size:24px;line-height:1;cursor:pointer}
.iopg-story{display:flex;flex-direction:column;gap:clamp(28px,6vw,64px);max-width:1000px;margin:0 auto}
.iopg-story figure{margin:0;display:grid;gap:14px;align-items:end}
@media (min-width:760px){.iopg-story figure{grid-template-columns:3fr 1fr}.iopg-story figure:nth-child(even){grid-template-columns:1fr 3fr}.iopg-story figure:nth-child(even) .iopg-ph{order:2}}
.iopg-story .iopg-ph{aspect-ratio:var(--ar)}
.iopg-story figcaption{font-size:16px;color:var(--muted);border-top:3px solid var(--accent);padding-top:8px}
.iopg-story figcaption b{display:block;color:var(--ink);font:600 13px var(--f-label);letter-spacing:.08em;text-transform:uppercase}
.iopg-nocap .iopg-story figcaption{display:none}
.iopg-time{display:flex;flex-direction:column;gap:24px}
body .iopg .iopg-time h3{margin:0 0 10px;font:600 14px var(--f-label);font-family:var(--f-label)!important;letter-spacing:.08em;text-transform:uppercase!important;color:var(--accent);display:flex;gap:10px;align-items:center}
.iopg-time h3::after{content:"";flex:1;height:1px;background:currentColor;opacity:.35}
.iopg-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:calc(var(--gap) * var(--gscale,1))}
.iopg-row .iopg-ph{aspect-ratio:1}
.iopg-day{font:600 clamp(20px,3vw,28px)/1.2 var(--f-head);margin:8px 0 0}

/* ---------- album openings ---------- */
.iopg-head{max-width:820px;margin:0 0 26px}
.iopg-head h2,.iopg-hero h2,.iopg-poster h2{font-family:var(--f-head);text-wrap:balance;margin:6px 0 8px;line-height:1.1;color:inherit}
.iopg-head h2{font-size:clamp(28px,4.4vw,46px)}
.iopg-head>div:last-child{margin:0;color:var(--muted);font-size:17px}
.iopg-k{margin:0;font:700 13px var(--f-label);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.iopg-hero{position:relative;height:clamp(260px,46vw,500px);color:#fff;background:#0a1119}
.iopg-hero img{position:absolute;inset:0}
.iopg-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(5,10,16,.86))}
.iopg-hero-t{position:absolute;z-index:1;left:max(16px,calc((100% - 1280px)/2 + 16px));right:16px;bottom:24px;max-width:900px}
.iopg-hero h2{font-size:clamp(28px,5.4vw,58px);color:#fff}
.iopg-hero h2 a{color:#fff;text-decoration:none}
.iopg-hero-t>div:last-child{margin:0;color:#d5dee7;font-size:16px}
.iopg-back{margin:0 0 18px;font-weight:600}.iopg-back a{text-decoration:none}
.iopg-text{max-width:70ch;font-size:18px;margin:0 0 26px}
.iopg-more{margin:26px 0 0}
.iopg-more a{display:inline-block;padding:12px 20px;border:2px solid currentColor;border-radius:max(var(--r),4px);font-weight:700;text-decoration:none}
.iopg-draft{background:#fff3cd;color:#5c4400;border:2px solid #996800;padding:10px 14px;border-radius:6px;font-weight:600}
.iopg-pn{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:36px}
.iopg-pn a{display:block;padding:14px 16px;border:1px solid currentColor;border-radius:max(var(--r),4px);text-decoration:none;font-weight:600;min-width:0}
.iopg-pn a[rel=next]{text-align:right}
.iopg-pn small{display:block;font:600 12px var(--f-label);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:4px}
@media (max-width:600px){.iopg-pn{grid-template-columns:1fr}.iopg-pn a[rel=next]{text-align:left}}

/* ---------- the «Φωτογραφίες» page ---------- */
.iopg-tools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0 0 12px}
.iopg-years{display:flex;gap:6px;overflow-x:auto;flex:1 1 420px;min-width:0;padding-bottom:4px}
.iopg-years a,.iopg-chips button{flex:0 0 auto;font:600 15px/1 var(--f-label);padding:10px 14px;border-radius:999px;border:2px solid currentColor;color:inherit;text-decoration:none;background:transparent;cursor:pointer}
.iopg-search{flex:0 1 300px}
.iopg-search input{width:100%;font:16px var(--f-body);padding:10px 14px;border:2px solid currentColor;border-radius:999px;background:transparent;color:inherit}
.iopg-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.iopg-chips button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#111}
.iopg-sub button{font-size:14px;padding:8px 12px;opacity:.9}
.iopg-ago{display:flex;gap:14px;align-items:center;padding:12px;margin:14px 0 6px;border:2px solid var(--accent);border-radius:max(var(--r),6px);text-decoration:none;max-width:640px}
.iopg-ago img{width:84px;height:84px;flex:0 0 auto;border-radius:max(var(--r),4px)}
.iopg-ago b{display:block;color:var(--accent);font:700 13px var(--f-label);letter-spacing:.1em;text-transform:uppercase}
.iopg .iopg-yr{font:700 clamp(26px,4vw,40px)/1.1 var(--f-head);margin:34px 0 14px;color:inherit}
.iopg-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:calc(var(--gap) + 10px);list-style:none;margin:0;padding:0}
.iopg-card{position:relative;border-radius:var(--r);overflow:hidden;margin:0}
.iopg-im{aspect-ratio:4/3;overflow:hidden;border-radius:var(--r);background:var(--ph)}
.iopg-im img{transition:transform .5s}.iopg-card:hover .iopg-im img{transform:scale(1.04)}
.iopg-ct{padding:10px 2px 4px}
.iopg-card h3{margin:2px 0 2px;font:700 19px/1.25 var(--f-head);color:inherit;text-wrap:balance}
.iopg-card h3 a{text-decoration:none}.iopg-card h3 a::after{content:"";position:absolute;inset:0}
.iopg-card h3 a:focus-visible{outline:none}.iopg-card:focus-within{outline:3px solid var(--accent);outline-offset:3px}
.iopg-ct>div{margin:0;color:var(--muted);font-size:15px}
.iopg-card .iopg-d{font:700 12px var(--f-label);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.iopg-none{font-size:18px;color:var(--muted)}

/* ---------- styles ---------- */
/* Κλασικό Ομίλου: the site's own colours, rounded cards */
.iopg-s-club{--r:10px;--gap:12px}
.iopg-s-club .iopg-card{background:#e9eef3;box-shadow:0 1px 3px rgba(0,0,0,.08)}.iopg-s-club .iopg-ct{padding:12px 14px 14px}.iopg-s-club .iopg-im{border-radius:0}

/* Σκούρο, φωτογραφία πρώτα */
.iopg-s-dark{--bg:#0a1119;--ink:#eef3f8;--muted:#9fb0c1;--accent:#e0a52b;--ph:#1c2733;--gap:4px;--f-head:"Roboto Condensed","Inter",sans-serif}
body .iopg-s-dark .iopg-hero h2,body .iopg-s-dark .iopg-yr{text-transform:uppercase!important;font-weight:700}
.iopg-s-dark .iopg-im{aspect-ratio:3/4}
.iopg-s-dark .iopg-ct{position:absolute;inset:auto 0 0;padding:44px 14px 12px;background:linear-gradient(transparent,rgba(5,10,16,.92));color:#fff}
.iopg-s-dark .iopg-ct>div{color:#cdd8e3}

/* Περιοδικό */
.iopg-s-edit{--bg:#fbfbf9;--ink:#101c2c;--muted:#5d6672;--accent:#0b4f7a;--ph:#e5e6e3;--gap:18px;--r:2px;--f-head:"IOPG Literata",Georgia,serif;--f-body:"IOPG Literata",Georgia,serif}
.iopg-s-edit .iopg-head h2{font-weight:600}.iopg-s-edit .iopg-chips button[aria-pressed=true]{color:#fff}

/* Ναυτικός χάρτης */
.iopg-s-chart{--bg:#e6f0f3;--ink:#0d2c45;--muted:#3f5a70;--accent:#a3166f;--ph:#fff;--gap:14px;--f-head:"IOPG Literata",Georgia,serif;--f-label:"IOPG Mono",monospace;
  background:repeating-radial-gradient(circle at 85% -10%,transparent 0 46px,rgba(13,44,69,.07) 46px 47px),#e6f0f3}
.iopg-s-chart .iopg-ph,.iopg-s-chart .iopg-im{background:#fff;padding:5px;box-shadow:0 0 0 1px #0d2c45}
.iopg-s-chart .iopg-head h2{font-style:italic}
.iopg-pos{display:inline-block;margin:0 0 6px;font:600 13px "IOPG Mono",monospace;letter-spacing:.06em;color:#a3166f;border-block:1px solid #a3166f;padding:3px 0}
.iopg-s-chart .iopg-chips button[aria-pressed=true]{color:#fff}

/* Πίνακας ανακοινώσεων */
.iopg-s-pola{--bg:#a87c52;--ink:#2b1d10;--muted:#4a3622;--accent:#c8102e;--ph:#fff;--gap:22px;--f-head:"IOPG Round","Inter",sans-serif;--f-body:"IOPG Round","Inter",sans-serif;
  background:radial-gradient(rgba(0,0,0,.09) 1px,transparent 1.5px) 0 0/7px 7px,radial-gradient(rgba(255,255,255,.08) 1px,transparent 1.5px) 3px 4px/9px 9px,#a87c52}
.iopg-s-pola .iopg-ph{overflow:visible;background:#fff;padding:8px 8px 30px;box-shadow:0 6px 14px rgba(0,0,0,.35);transform:rotate(-1.6deg);transition:transform .3s}
.iopg-s-pola .iopg-ph:nth-child(3n){transform:rotate(1.8deg)}.iopg-s-pola .iopg-ph:nth-child(4n+1){transform:rotate(.6deg)}
.iopg-s-pola .iopg-ph:hover{transform:rotate(0) scale(1.03);z-index:2}.iopg-s-pola .iopg-ph:hover img{transform:none}
.iopg-s-pola .iopg-ph::before{content:"";position:absolute;top:-5px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ff6b6b,#a40e1f);box-shadow:0 2px 3px rgba(0,0,0,.4);z-index:1}
.iopg-s-pola .iopg-head{background:#fffef8;padding:18px 22px;box-shadow:0 6px 14px rgba(0,0,0,.3);transform:rotate(-.6deg);max-width:640px}
.iopg-s-pola .iopg-back a,.iopg-s-pola .iopg-yr{color:#fff}
.iopg-s-pola .iopg-card{background:#fff;padding:8px 8px 12px;box-shadow:0 6px 14px rgba(0,0,0,.35);transform:rotate(-1deg)}.iopg-s-pola .iopg-card:nth-child(even){transform:rotate(1.2deg)}
.iopg-s-pola .iopg-story figcaption{background:#fffef8;padding:12px;border:0;font-size:18px;color:#2b1d10}
.iopg-s-pola .iopg-tools,.iopg-s-pola .iopg-chips{color:#fff}

/* Φιλμ */
.iopg-s-film{--bg:#121212;--ink:#f1efe8;--muted:#b1ada3;--accent:#ff9f1c;--ph:#050505;--gap:2px;--f-head:"IOPG Mono",monospace;--f-label:"IOPG Mono",monospace;counter-reset:iopgfr}
.iopg-s-film .iopg-ph{overflow:visible;counter-increment:iopgfr;border-block:16px solid #050505;background:#050505}
.iopg-s-film .iopg-ph::before{content:"";position:absolute;inset:-13px 0 auto;height:8px;background:repeating-linear-gradient(90deg,transparent 0 6px,#d8d4c8 6px 13px,transparent 13px 20px);opacity:.55;z-index:1}
.iopg-s-film .iopg-ph::after{content:counter(iopgfr) "A ▸";position:absolute;left:6px;bottom:-14px;font:600 10px "IOPG Mono",monospace;color:#ff9f1c;z-index:1}
.iopg-s-film .iopg-ph img{filter:contrast(1.06) saturate(.88) sepia(.08)}.iopg-s-film .iopg-ph:hover img{transform:none}
.iopg-s-film .iopg-im{border-block:12px solid #050505}

/* Σημαίες κώδικα */
.iopg-s-flag{--bg:#fff;--ink:#0a1f44;--muted:#33415c;--accent:#c8102e;--ph:#dfe3ea;--gap:8px;--f-head:"Roboto Condensed","Inter",sans-serif}
.iopg-s-flag .iopg-ph{box-shadow:0 0 0 3px #0a1f44}
.iopg-poster{display:grid;grid-template-columns:auto 1fr;border-bottom:6px solid #0a1f44;margin:0 0 24px}
.iopg-flags{display:grid;grid-template-columns:repeat(2,clamp(26px,5vw,48px));grid-auto-rows:clamp(26px,5vw,48px)}
.iopg-flags i:nth-child(1),.iopg-flags i:nth-child(6){background:#ffd100}.iopg-flags i:nth-child(2){background:#0a3d91}.iopg-flags i:nth-child(3){background:#c8102e}
.iopg-flags i:nth-child(4){background:linear-gradient(90deg,#fff 50%,#0a3d91 50%)}.iopg-flags i:nth-child(5){background:linear-gradient(#c8102e 33%,#fff 33% 66%,#c8102e 66%)}
.iopg-poster-t{padding:6px clamp(12px,3vw,28px) 14px}
body .iopg-poster h2{font-weight:700;font-size:clamp(34px,7vw,84px);line-height:.92;text-transform:uppercase!important;margin:0}
.iopg-poster-t>div{margin:10px 0 0;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#c8102e}
.iopg-s-flag .iopg-card{border:3px solid #0a1f44}.iopg-s-flag .iopg-ct{padding:10px 12px}body .iopg-s-flag .iopg-card h3{text-transform:uppercase!important}
body .iopg-s-flag .iopg-yr{background:#0a1f44;color:#ffd100;display:inline-block;padding:4px 12px;text-transform:uppercase!important}
.iopg-s-flag .iopg-chips button[aria-pressed=true]{background:#ffd100;border-color:#0a1f44}

/* Πλακίδια */
.iopg-s-bento{--bg:#eceff3;--ink:#14202e;--muted:#5b6776;--accent:#0b6e99;--ph:#dde2e8;--gap:10px;--r:22px}
.iopg-s-bento .iopg-head{background:#fff;border-radius:22px;padding:22px 24px;max-width:none}
.iopg-s-bento .iopg-card{background:#fff;border-radius:22px;padding:8px}.iopg-s-bento .iopg-im{border-radius:16px}.iopg-s-bento .iopg-ct{padding:6px 8px 6px}
.iopg-s-bento .iopg-chips button[aria-pressed=true]{color:#fff}

/* Ωκεανός */
.iopg-s-glass{--bg:#05304d;--ink:#f2f8fb;--muted:#bcd6e3;--accent:#7fe0d6;--ph:#0b4a6a;--gap:12px;--r:16px;
  background:radial-gradient(1200px 500px at 10% -10%,rgba(127,224,214,.28),transparent 60%),linear-gradient(165deg,#031c30,#05415f 55%,#0b7088)}
.iopg-s-glass .iopg-ph{box-shadow:0 10px 30px rgba(0,0,0,.35)}
.iopg-s-glass .iopg-hero::after{background:linear-gradient(180deg,transparent 30%,rgba(3,28,48,.9))}
.iopg-s-glass .iopg-hero-t{background:rgba(255,255,255,.12);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.25);border-radius:18px;padding:14px 18px;width:fit-content;max-width:calc(100% - 32px)}
.iopg-s-glass .iopg-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);padding:8px}.iopg-s-glass .iopg-im{border-radius:12px}

/* Αρχείο */
.iopg-s-arch{--bg:#e4e5e1;--ink:#262624;--muted:#5a5a55;--accent:#7a2e1d;--ph:#f7f6f2;--gap:16px;--f-head:"IOPG Mono",monospace;--f-label:"IOPG Mono",monospace}
.iopg-s-arch .iopg-ph,.iopg-s-arch .iopg-card{background:#f7f6f2;padding:7px;box-shadow:0 1px 2px rgba(0,0,0,.25),0 8px 18px rgba(0,0,0,.08)}
.iopg-s-arch img{filter:grayscale(1) sepia(.38) contrast(1.06) brightness(1.02);transition:filter .6s,transform .5s}
.iopg-s-arch .iopg-ph:hover img,.iopg-s-arch .iopg-card:hover img{filter:none}
.iopg-s-arch .iopg-head{border:1px dashed #7a7a72;padding:16px 18px;max-width:720px}
.iopg-stamp{display:inline-block;margin:0 0 8px;border:2px solid #7a2e1d;color:#7a2e1d;padding:2px 8px;transform:rotate(-3deg);font:14px "IOPG Mono",monospace;letter-spacing:.1em}
.iopg-s-arch .iopg-chips button[aria-pressed=true]{color:#fff}

/* ---------- «Εμφάνιση άλμπουμ» on the album page (staff only): a bar above the album, a panel on the right ---------- */
.iopg-editbar{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin:0 0 18px;padding:12px 14px;background:#fff8e1;color:#3d2e00;border:2px solid #b78700;border-radius:8px;font:16px/1.4 "Inter",system-ui,sans-serif;scroll-margin-top:90px}
.iopg-editbtn,.iopg-save,.iopg-undo{font:700 17px "Inter",system-ui,sans-serif;padding:11px 18px;border-radius:8px;border:2px solid #0b3d5c;background:#0b3d5c;color:#fff;cursor:pointer}
.iopg-undo{background:#fff;color:#0b3d5c}
.iopg-editlink{color:#0b3d5c!important;font-weight:600}
.iopg-panel{position:fixed;inset:0 0 0 auto;margin:0;width:min(440px,100vw);height:100%;max-height:100%;padding:0;border:0;border-left:3px solid #0b3d5c;background:#fff;color:#14202e;
  box-shadow:-12px 0 40px rgba(0,0,0,.28);overflow:auto;z-index:100000;font:17px/1.45 "Inter",system-ui,sans-serif}
.iopg-panel form{padding:0 18px 24px}
.iopg-panel-h{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;background:#0b3d5c;color:#fff;margin:0 -18px 12px;padding:12px 18px;font-weight:700;font-size:19px;z-index:1}
.iopg-x{width:44px;height:44px;border-radius:999px;border:0;background:rgba(255,255,255,.15);color:#fff;font-size:26px;line-height:1;cursor:pointer}
.iopg-panel-help{color:#4a5563;font-size:15px;margin:0 0 10px}
.iopg-panel fieldset{border:0;margin:0 0 14px;padding:0}
.iopg-panel legend{font-weight:700;margin:0 0 6px;padding:0}
.iopg-opts{display:grid;grid-template-columns:1fr 1fr;gap:6px}.iopg-opts-row{grid-template-columns:repeat(3,1fr)}
.iopg-opt{display:flex;gap:8px;align-items:center;padding:8px 10px;border:2px solid #d0d6dd;border-radius:8px;cursor:pointer;font-size:15px;line-height:1.25;min-width:0}
.iopg-opt:has(input:checked){border-color:#0b3d5c;background:#eaf2f8;font-weight:700}
.iopg-opt input{width:20px;height:20px;flex:0 0 auto;margin:0;accent-color:#0b3d5c}
.iopg-opt:focus-within{outline:3px solid #e0a52b;outline-offset:1px}
.iopg-opt-wide{margin:0 0 14px}
.iopg-sw{width:26px;height:20px;flex:0 0 auto;border-radius:4px;border:1px solid #8c8f94}
.iopg-ico{width:26px;height:20px;flex:0 0 auto;border:1px solid #8c8f94;border-radius:3px;background-color:#fff}
.iopg-ico-grid{background:repeating-linear-gradient(90deg,#9aa6b2 0 7px,#fff 7px 9px),#fff;background-size:9px 100%}
.iopg-ico-just{background:linear-gradient(90deg,#9aa6b2 0 55%,#fff 55% 60%,#9aa6b2 60%) 0 0/100% 45% no-repeat,linear-gradient(90deg,#9aa6b2 0 30%,#fff 30% 35%,#9aa6b2 35%) 0 100%/100% 45% no-repeat}
.iopg-ico-mas{background:linear-gradient(#9aa6b2 0 60%,#fff 60% 66%,#9aa6b2 66%) 0 0/30% 100% no-repeat,linear-gradient(#9aa6b2 0 35%,#fff 35% 41%,#9aa6b2 41%) 50% 0/30% 100% no-repeat,linear-gradient(#9aa6b2 0 75%,#fff 75% 81%,#9aa6b2 81%) 100% 0/30% 100% no-repeat}
.iopg-ico-car{background:linear-gradient(90deg,#fff 0 12%,#9aa6b2 12% 88%,#fff 88%)}
.iopg-ico-mos{background:linear-gradient(#9aa6b2,#9aa6b2) 0 0/55% 100% no-repeat,linear-gradient(#9aa6b2,#9aa6b2) 100% 0/40% 45% no-repeat,linear-gradient(#9aa6b2,#9aa6b2) 100% 100%/40% 45% no-repeat}
.iopg-ico-story{background:linear-gradient(#9aa6b2,#9aa6b2) 0 50%/65% 80% no-repeat,linear-gradient(#cfd6dd,#cfd6dd) 100% 50%/25% 30% no-repeat}
.iopg-ico-time{background:linear-gradient(#e0a52b,#e0a52b) 0 0/100% 2px no-repeat,repeating-linear-gradient(90deg,#9aa6b2 0 5px,#fff 5px 7px) 0 6px/100% 6px no-repeat,repeating-linear-gradient(90deg,#9aa6b2 0 5px,#fff 5px 7px) 0 14px/60% 6px no-repeat}
.iopg-panel-f{position:sticky;bottom:0;background:#fff;display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:12px 0 4px;border-top:1px solid #d0d6dd}
.iopg-msg{font-weight:600;color:#0b3d5c}
@media (max-width:600px){.iopg-opts{grid-template-columns:1fr}.iopg-opts-row{grid-template-columns:repeat(3,1fr)}}
body.admin-bar .iopg-panel{top:32px;height:calc(100% - 32px)}
@media (max-width:782px){body.admin-bar .iopg-panel{top:46px;height:calc(100% - 46px)}}