:root{
  --navy:#071B33;
  --royal:#12365B;
  --royal-top:#1D5B8D;
  --royal-mid:#164974;
  --royal-bottom:#0A2948;
  --gold:#D4AF37;
  --gold-light:#F0D36B;
  --gold-hi:#F7E39A;
  --gold-deep:#9A6C12;
  --white:#F7F7F4;
  --bar-h:72px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#031323;color:var(--white);font-family:Arial,Helvetica,sans-serif}
button{font:inherit}
.hidden{display:none!important}

/* Official seal remains untouched; only an external CSS ring is added. */
.seal-frame{display:grid;place-items:center;border-radius:50%;padding:2px;background:linear-gradient(145deg,var(--gold-hi),var(--gold-light) 30%,var(--gold) 62%,var(--gold-deep));box-shadow:0 6px 18px #0007,0 0 10px #d4af3726}
.seal-frame img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}

#splash{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;background:var(--navy);color:var(--gold-light);text-align:center}
.splash-inner{display:flex;flex-direction:column;align-items:center;gap:18px;width:100%;padding:24px}
.splash-seal{width:min(47vw,216px);height:min(47vw,216px)}
.splash-title{font:700 clamp(28px,7vw,40px) Georgia,serif;text-shadow:0 2px 8px #000}

.app-shell{width:100%;min-height:100vh;background:var(--navy);position:relative;margin:0 auto;box-shadow:0 0 40px #0006}
#hero{background:url('assets/home-bg.png') center 52%/cover no-repeat;border-bottom:1px solid var(--gold)}
/* Beta 0.4: same positioning; only bottom of hero is cropped by reducing its height/padding. */
.hero-shade{min-height:266px;padding:14px 10px 4px;text-align:center;background:linear-gradient(#071b3312,#071b334c 44%,#071b33e5)}
.home-seal{width:116px;height:116px;margin:0 auto}
.hero-shade h1{margin:7px 0 4px;color:var(--gold-light);font:700 clamp(29px,7.4vw,43px) Georgia,serif;text-shadow:0 2px 7px #000}
.org-name{margin:0 auto 2px;font:600 clamp(11.5px,3.35vw,18px) Georgia,serif;white-space:nowrap;text-shadow:0 2px 6px #000}
.gold-rule{display:flex;align-items:center;justify-content:center;gap:7px;margin:3px auto;color:var(--gold-light);font-size:9px}
.gold-rule:before,.gold-rule:after{content:"";height:1px;width:min(27vw,112px);background:linear-gradient(90deg,transparent,var(--gold-light))}
.gold-rule:after{background:linear-gradient(90deg,var(--gold-light),transparent)}
.tagline{margin:1px 0 0;font-size:clamp(14px,3.7vw,18px);font-style:italic;text-shadow:0 2px 6px #000}

main{max-width:900px;margin:auto;padding:9px 9px calc(var(--bar-h) + 14px);background:linear-gradient(#071B33,#06182f)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.tile{min-height:91px;border:2px solid transparent;border-radius:13px;padding:6px 3px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;color:var(--white);background:linear-gradient(180deg,var(--royal-top),var(--royal-mid) 45%,var(--royal-bottom) 100%) padding-box,linear-gradient(145deg,var(--gold-hi),var(--gold) 50%,var(--gold-deep)) border-box;box-shadow:inset 0 1px #ffffff3a,0 4px 11px #0005;cursor:pointer}
.tile:active,.row:active{transform:scale(.985);filter:brightness(1.08)}
.tile-icon{width:48px;height:48px;display:block;filter:drop-shadow(0 2px 2px #0007)}
.tile-label{font-size:13px;line-height:1.03;font-weight:800;text-shadow:0 1px 3px #000;max-width:100%}

.utilities{margin:12px auto 0;max-width:680px}
.install-panel{border:1px solid #d4af37d6;border-radius:10px;background:#0b2949;color:var(--gold-light);overflow:hidden;margin-top:7px}
.install-panel summary{list-style:none;cursor:pointer;padding:8px 11px;font-weight:800;display:flex;align-items:center;justify-content:space-between;gap:10px}
.install-panel summary::-webkit-details-marker{display:none}
.install-panel summary:after{content:"＋";font-size:18px;line-height:1}
.install-panel[open] summary:after{content:"−"}
.install-body{padding:2px 14px 15px;color:var(--white);font-size:15px;line-height:1.5}
.install-body h3{color:var(--gold-light);margin:12px 0 5px;font-size:17px}
.install-body ol{margin:5px 0 12px;padding-left:22px}
.install-body li{margin:7px 0}
.install-note{font-size:13px;color:#d8e0e8;border-top:1px solid #ffffff20;padding-top:9px}
.native-install{display:none;width:100%;margin:8px 0 4px;border:1px solid var(--gold-light);border-radius:9px;padding:10px;background:linear-gradient(var(--gold-light),var(--gold));color:var(--navy);font-weight:900}
.check-box{margin-top:7px}
.small-action{width:100%;border:1px solid var(--gold);border-radius:10px;padding:8px 11px;background:linear-gradient(#174a79,#0b2949);color:var(--gold-light);font-weight:800;cursor:pointer}
.check-result{display:block;padding:6px 4px 0;font-size:13px}
@media(display-mode:standalone){.install-panel{display:none}}

.screen-title{font:700 28px Georgia,serif;color:var(--gold-light);margin:2px 0 10px}
.secondary-grid{display:block}
.row{width:100%;min-height:52px;border:2px solid transparent;border-radius:12px;margin:6px 0;padding:6px 11px;display:flex;align-items:center;gap:10px;text-align:left;font-size:16.5px;font-weight:700;cursor:pointer;color:var(--white);background:linear-gradient(180deg,var(--royal-top),var(--royal-mid) 50%,var(--royal-bottom)) padding-box,linear-gradient(145deg,var(--gold-hi),var(--gold),var(--gold-deep)) border-box;box-shadow:0 3px 8px #0004}
.row-icon{width:31px;height:31px;flex:0 0 31px;display:block;filter:drop-shadow(0 1px 1px #0006)}
.row .label{flex:1}
.chev{color:var(--gold-light);font-size:24px}
.featured{border:2px solid transparent;border-radius:15px;padding:13px;margin:0 0 12px;background:linear-gradient(180deg,var(--royal-top),var(--royal-mid) 60%,var(--royal-bottom)) padding-box,linear-gradient(145deg,var(--gold-hi),var(--gold),var(--gold-deep)) border-box;box-shadow:0 4px 11px #0004}
.featured small{color:var(--gold-light);font-weight:800}
.featured h2{margin:5px 0 10px;font:700 22px Georgia,serif}
.featured button,.dialog button{border:1px solid var(--gold-light);border-radius:9px;background:linear-gradient(var(--gold-light),var(--gold));color:var(--navy);font-weight:900;padding:10px 15px;cursor:pointer}

.about{font-size:17px;line-height:1.58}.about h1{font-size:29px}.about h2{font:700 24px Georgia,serif;color:var(--gold-light);margin-top:25px}.about strong{color:#fff}.about li{margin:8px 0}.triad{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:17px 0}.triad div{border:2px solid var(--gold);border-radius:10px;padding:9px 5px;text-align:center;color:var(--gold-light);font-weight:900;background:linear-gradient(var(--royal-top),var(--royal))}.version{text-align:center;color:#b8c2ce;font-size:12px;margin-top:26px}

.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,960px);height:var(--bar-h);padding-bottom:env(safe-area-inset-bottom);display:grid;grid-template-columns:repeat(4,1fr);background:#041427f9;border-top:1.5px solid var(--gold);z-index:50;box-shadow:0 -3px 12px #0005}
.bottom-nav button{border:0;background:transparent;color:var(--gold-light);font-weight:800;font-size:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer}
.bottom-nav button.active{background:linear-gradient(#d4af3728,transparent);color:#f8e08a}
.nav-icon{width:27px;height:27px;display:block;filter:drop-shadow(0 1px 1px #0006)}

.web-viewer{position:fixed;inset:0;background:var(--navy);z-index:900;padding-bottom:var(--bar-h)}
.viewer-top{height:46px;display:grid;grid-template-columns:44px 1fr 62px;align-items:center;background:#041427;border-bottom:1px solid var(--gold);color:var(--white)}
.viewer-top button{height:100%;border:0;background:transparent;color:var(--gold-light);font-weight:800;cursor:pointer}
.viewer-close{font-size:30px}
.viewer-browser{padding:0 7px;font-size:11px}
.viewer-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;font-size:14px}
.viewer-content{height:calc(100% - 46px);background:#fff}
.viewer-content iframe{display:block;width:100%;height:100%;border:0;background:#fff}
.web-viewer .bottom-nav{z-index:920}

.modal{position:fixed;inset:0;background:#000b;display:grid;place-items:center;padding:20px;z-index:1300}.dialog{max-width:420px;background:var(--navy);border:2px solid var(--gold);border-radius:16px;padding:24px;box-shadow:0 14px 38px #0008}.dialog h2{color:var(--gold-light);font:700 24px Georgia,serif}.dialog .secondary{margin-left:8px;background:transparent;color:#fff;border:1px solid #ffffff77}

@media(max-width:365px){
  .hero-shade{min-height:258px;padding-top:12px}
  .home-seal{width:108px;height:108px}
  .org-name{font-size:11.2px}
  .tile{min-height:87px}
  .tile-icon{width:44px;height:44px}
  .tile-label{font-size:12.2px}
}
@media(orientation:landscape) and (max-height:600px){
  .hero-shade{min-height:170px;padding:5px 8px 2px}
  .home-seal{width:68px;height:68px}
  .hero-shade h1{font-size:25px;margin:2px 0}
  .org-name,.tagline{font-size:12px}
  .gold-rule{margin:1px auto}
  .tile{min-height:72px}
  .tile-icon{width:36px;height:36px}
  .tile-label{font-size:12px}
  .secondary-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .secondary-grid .row{margin:0;min-height:50px}
}
@media(min-width:961px){.app-shell{max-width:960px}body{background:radial-gradient(circle at top,#12365B,#031323 58%)}}

/* Integration: readable public catalog, visible browser fallback and mobile insets. */
:root{--lightgold:var(--gold-light);--nav-total:calc(var(--bar-h) + env(safe-area-inset-bottom,0px))}
a{color:var(--gold-light);text-underline-offset:.15em}
button,a,summary{touch-action:manipulation}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--gold-light);outline-offset:3px}
main{padding-bottom:calc(var(--nav-total) + 14px);overflow-wrap:anywhere}
#content:focus{outline:none}
.tile,.row .label{min-width:0}
.bottom-nav{height:var(--nav-total)}
.hero-shade{padding-top:calc(14px + env(safe-area-inset-top,0px))}
.viewer-open{overflow:hidden}
.web-viewer{padding-bottom:var(--nav-total);padding-top:env(safe-area-inset-top,0px);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
.viewer-top{height:48px;grid-template-columns:48px minmax(0,1fr) 76px}
.viewer-browser{display:flex;align-items:center;justify-content:center;height:100%;font-size:13px;text-decoration:underline}
.viewer-content{height:calc(100% - 48px);display:flex;flex-direction:column;background:var(--navy)}
.viewer-content iframe{flex:1;min-height:0;height:auto}
.viewer-help{display:flex;align-items:center;gap:12px;padding:8px 12px;font-size:13px;line-height:1.35;border-bottom:1px solid var(--gold)}
.viewer-help p{margin:0;flex:1}
.viewer-help a{flex-shrink:0;padding:8px;border:1px solid var(--gold);border-radius:5px}
.browser-only .viewer-help{display:block;max-width:600px;margin:30px auto;padding:24px;font-size:18px;line-height:1.6;border:1px solid var(--gold);border-radius:12px}
.browser-only .viewer-help a{display:inline-block;margin-top:15px}
.browser-only .viewer-content{overflow-y:auto}
.browser-only .viewer-help{flex-shrink:0}
.telegram-actions{margin-top:16px}
.telegram-actions p{margin:12px 0}
.telegram-actions code{user-select:all;overflow-wrap:anywhere}
.telegram-actions button{display:block;padding:10px 14px;border:1px solid var(--gold);border-radius:5px;background:var(--royal);color:var(--gold-light);font:inherit;cursor:pointer}
#telegramCopyStatus:empty{display:none}
.dialog a{display:block;margin-bottom:16px}
.modal{overflow:auto}
.call-card{border:1px solid var(--gold);border-radius:12px;padding:15px;margin:16px 0;background:var(--royal);overflow-wrap:anywhere}
.call-card h3,.catalog-list h3{color:var(--gold-light);font:700 22px Georgia,serif}
.call-card a,.catalog-list a{display:inline-block;padding:10px;margin:4px 4px 4px 0;border:1px solid var(--gold);border-radius:5px}
.catalog-list>ul{list-style:none;padding:0}
.catalog-list>ul>li{border:1px solid var(--gold);border-radius:12px;padding:16px;margin:14px 0;overflow-wrap:anywhere}
.catalog-list p{white-space:pre-line;line-height:1.5}
.tv-view{font-size:17px;line-height:1.65;overflow-wrap:anywhere}
.tv-view>button{padding:12px;border:1px solid var(--gold);border-radius:6px;background:var(--royal);color:var(--gold-light);font-weight:700;margin-bottom:18px}
.tv-view summary{padding:14px;background:var(--royal);color:var(--gold-light);cursor:pointer;font-weight:700;border:1px solid var(--gold);border-radius:7px;margin-bottom:16px}
.tv-view h3,.tv-view h4,.tv-view h5{font-family:Georgia,serif;line-height:1.35;color:var(--gold-light);margin:22px 0 12px}
.tv-view img{max-width:100%;height:auto}
.tv-view .republic-tv-featured{padding-bottom:22px;border-bottom:2px solid var(--gold)}
.tv-view li{margin:12px 0}
.tv-view li[data-source-post-id]{list-style:none;padding:14px;border-bottom:1px solid var(--gold)}
.tv-view blockquote{margin:16px 0;padding:12px;border-left:3px solid var(--gold)}
.install-body .small-action{margin:5px 0}
#updateStatus:empty{display:none}
noscript{position:fixed;inset:0;z-index:1400;background:var(--navy);padding:30px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.tile:active,.row:active{transform:none}}
@media(max-width:365px){.viewer-help{font-size:11px;gap:6px;padding:6px}.org-name{white-space:normal}}