/* MyFiji adapter for the owner's Fiji 3D Maps presentation.
   Product screens keep their native actions; the canvas, controls and dock
   follow the map's sky-blue, transparent, orange-outline visual language. */
:root {
  color-scheme: light;
  --ink: #0b2a4a; --mute: #284d64; --bg: #a6dce5;
  --card: #ffffff30; --sand: #ffffff55; --line: #ffffffa8;
  --map-accent: #f26332; --map-ring: #b53c13;
  --map-shadow: 0 3px 12px #12384916;
  --dm-header: transparent; --dm-header-text: #0b2a4a;
  --dui-font-display: "Rubik", ui-sans-serif, system-ui, sans-serif;
  --dui-font-body: "Nunito Sans", ui-sans-serif, system-ui, sans-serif;
  --dm-font: var(--dui-font-body);
  --tab-h: 92px;
}
html { min-height: 100%; scroll-padding-top: 24px; }
body {
  min-height: 100dvh;
  background: radial-gradient(ellipse at 80% 10%, #d0edf0 0, transparent 55%),
    linear-gradient(135deg, #a6dce5, #87ceeb);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--dui-font-body) !important;
}
/* Open identity/search layout, like the map's floating top controls. */
:root #top.top {
  background: transparent !important; color: var(--ink) !important;
  border: 0 !important; box-shadow: none !important;
}
:root #top .top-row {
  display: grid !important;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr) auto;
  align-items: center !important; gap: 16px !important;
  padding-top: 16px !important;
}
.top .brand { grid-column: 1; grid-row: 1; }
:root #top .brand-name { font-size: 22px !important; }
.brand-caption { color: var(--mute); opacity: 1; }
.top-actions { grid-column: 2; grid-row: 1; width: 100%; flex-wrap: nowrap; }
.top .dm-acct { grid-column: 3; grid-row: 1; }
#btn-search {
  display: flex; align-items: center; justify-content: flex-start;
  flex: 1; gap: 12px; min-width: 0; min-height: 50px !important;
  padding: 10px 16px; border: 2px solid var(--map-accent);
  border-radius: 15px; background: transparent; color: var(--ink);
  font-size: 18px;
}
#btn-search .search-label { font-size: 16px; font-weight: 650; }
#btn-search .search-symbol { color: var(--map-ring); font-size: 24px; }
#btn-install { order: 2; border-color: var(--map-accent); border-radius: 50%; }
:root #top .bw-pill {
  width: fit-content !important; margin-bottom: 0 !important;
  background: #ffffff25 !important; color: var(--ink) !important;
  border: 1px solid var(--map-accent) !important;
  border-radius: 999px !important; box-shadow: var(--map-shadow) !important;
}
:root #top .bw-pill .bw-long { display: none !important; }
:root #top .bw-pill .bw-short { display: inline !important; }
:root #top .dm-acct-btn {
  background: transparent !important; color: var(--ink) !important;
  border-color: var(--map-accent) !important; border-radius: 999px !important;
}
/* Categories sit immediately under search, with a continuous canvas beneath. */
#main { padding-top: 16px !important; }
.quick-heading { margin: 0 0 10px; }
.quick-heading h2 { font-size: 15px; letter-spacing: 0; margin: 0; }
.quick { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; padding: 3px 0 10px; }
.quick button {
  flex-direction: row; min-width: 0; min-height: 46px;
  padding: 8px 10px; gap: 8px;
  border: 1px solid var(--map-accent); border-radius: 999px;
  background: transparent; box-shadow: var(--map-shadow); font-size: 13px;
}
.q-ico { color: var(--ink); width: 24px; height: 24px; font-size: 19px; }
.q-ico img { width: 24px; height: 24px; }
.hero {
  background: transparent; color: var(--ink); border: 0;
  border-radius: 0; padding: 44px 8px 36px;
  min-height: 300px; grid-template-columns: 1.5fr 1fr;
}
.hero .eyebrow, .section-heading .eyebrow, .page-heading .eyebrow { color: #284d64; }
.hero h1 { max-width: 630px; }
.hero-sub { color: var(--mute); font-size: 17px; }
.hero-caption, .art-label { color: var(--mute); }
.island-art { opacity: .85; }
.island-art svg { filter: drop-shadow(0 8px 10px #12384920); }
.island-art svg path[fill] { fill: #f1f3db; stroke: #6da9a9; stroke-width: 1; }
.island-art svg path[stroke] { stroke: #326d85; }
.island-art svg circle[fill] { fill: #248b7d; }
.island-art svg circle[stroke] { fill: none; stroke: #248b7d; }
.orbit { border-color: #ffffff70; }
.section-heading { margin-top: 28px; }
/* Clear outlined controls retain their labels without solid button blocks. */
.btn, .btn.primary, .hero .btn.primary, .btn.hero-secondary,
.filters button, .text-btn, .wallet .btn {
  background: transparent; color: var(--ink);
  border: 1px solid var(--map-accent); border-radius: 999px;
  box-shadow: var(--map-shadow);
}
.btn:hover, .btn.primary:hover, .hero .btn.primary:hover,
.btn.hero-secondary:hover, .filters button:hover, .text-btn:hover,
.quick button:hover { background: #ffffff50; border-color: var(--map-ring); }
.filters button[aria-pressed=true] { background: #ffffff65; color: var(--ink); border-color: var(--map-ring); box-shadow: inset 0 -3px var(--map-accent); }
.btn.primary, .hero .btn.primary { border-width: 2px; }
.grid { gap: 14px; }
.app, .card, .search-box, .trust-note, .wallet, .notice {
  background: #ffffff25; color: var(--ink);
  border: 1px solid #ffffffb0; border-radius: 22px;
  box-shadow: var(--map-shadow);
}
.app:hover { background: #ffffff45; border-color: var(--map-accent); box-shadow: var(--map-shadow); }
.app-open { min-height: 226px; padding: 20px; }
.app-name, .app-desc { overflow-wrap: anywhere; }
/* Compact directory rows avoid tall isolated tiles in small categories. */
#services-groups .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#services-groups .app:last-child:nth-child(odd) { grid-column: 1 / -1; }
#services-groups .app-open {
  display: grid; grid-template-columns: 46px minmax(0, 1fr);
  gap: 6px 14px; min-height: 160px; align-content: start;
}
#services-groups .app-ico { grid-column: 1; grid-row: 1 / 4; }
#services-groups .app-name { grid-column: 2; padding-right: 82px; min-height: 30px; display: flex; align-items: center; }
#services-groups .app-desc, #services-groups .app-foot { grid-column: 2; }
.app-desc, .app-arrow, .fav, .share, .trust-note, .muted, .small { color: var(--mute); }
.app-ico { border-radius: 50%; }
.app-tools .fav.on { color: #8a4618; }
.fav:hover, .share:hover { background: #ffffff65; color: var(--ink); }
.pill { border: 1px solid currentColor; border-radius: 999px; }
.pill.live { background: #e7f7edaa; color: #185335; }
.pill.preview { background: #fff4daaa; color: #70420a; }
.pill.building { background: #e5efffaa; color: #254b78; }
.pill.planned { background: #edf3f7aa; color: #3d5364; }
.trust-note > span { color: var(--ink); }
.wallet { max-width: none; }
.search-input-row input, .field input, .directory-meta select {
  background: #ffffff40; color: var(--ink); border-color: #52788a;
  border-radius: 12px;
}
input::placeholder { color: #385e74; opacity: 1; }
.search-box { border-color: var(--map-accent); }
.site-footer { border-color: #ffffffa8; color: var(--mute); }
/* Floating bottom dock, keeping all four existing destinations visible. */
.tabs {
  left: 50%; right: auto; transform: translateX(-50%);
  bottom: calc(14px + var(--safe-b)); width: min(500px, calc(100% - 32px));
  height: 64px; padding: 5px; gap: 5px;
  background: #b6deeaeb; border: 1px solid #ffffffc0;
  border-radius: 24px; box-shadow: 0 5px 18px #12384925;
}
.tab { flex: 1; width: auto; min-width: 0; min-height: 52px; border: 1px solid #ffffffb0; border-radius: 19px; color: var(--ink); }
.tab.is-active { color: var(--ink); border-color: var(--map-accent); background: #ffffff60; box-shadow: inset 0 -3px var(--map-accent); }
.tab.is-active:before { display: none; }
.tab-ico { font-size: 20px; }
.toast { background: #0b2a4a; }
:is(button,a,input,select):focus-visible { outline: 3px solid var(--map-ring); outline-offset: 3px; }
:root #top.top :is(a,button):focus-visible { outline-color: var(--map-ring) !important; }
dialog { background: #e8f5fa; color: var(--ink); }
@media (min-width: 1000px) { #gt-launcher, #dg-launcher { bottom: 20px !important; } }
@media (max-width: 767px) {
  :root #top .top-row { grid-template-columns: minmax(0, 1fr) auto; gap: 10px !important; padding-top: 12px !important; }
  :root #top .brand-name { font-size: 20px !important; }
  .top .dm-acct { grid-column: 2; }
  .top-actions { grid-column: 1 / -1; grid-row: 2; margin-left: 0; }
  #btn-search { min-height: 48px !important; }
  :root #top .bw-pill { margin-top: 6px !important; }
  #main { padding-top: 16px !important; padding-bottom: calc(174px + var(--safe-b)); }
  .quick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .quick button { min-height: 48px; padding: 8px 6px; gap: 6px; font-size: 12px; }
  .hero { padding: 26px 0 20px; grid-template-columns: 1fr; min-height: 0; }
  .hero h1 { font-size: 36px !important; }
  .hero-sub { font-size: 15px; }
  .island-art { position: relative; right: auto; bottom: auto; width: min(260px, 90%); margin: 12px auto 0; opacity: .8; }
  .island-art svg { max-height: 175px; }
  .orbit { width: 160px; height: 160px; }
  .orbit-two { width: 220px; height: 220px; }
  .grid { grid-template-columns: minmax(0, 1fr); }
  .app-open { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 6px 14px; min-height: 0; padding: 18px; align-content: start; }
  .app-ico { grid-column: 1; grid-row: 1 / 4; }
  .app-name { grid-column: 2; padding-right: 42px; min-height: 30px; display: flex; align-items: center; }
  .app-desc, .app-foot { grid-column: 2; }
  .app-desc { font-size: 13px; }
  .app-tools { top: 8px; }
  #services-groups .grid { grid-template-columns: minmax(0, 1fr); }
  #services-groups .app-open { min-height: 0; padding: 18px; grid-template-columns: 40px minmax(0, 1fr); }
  #services-groups .app-name { padding-right: 42px; }
  #services-groups .app-desc { font-size: 13px; }
  .tabs { width: calc(100% - 24px); }
  #gt-launcher, #dg-launcher { bottom: calc(92px + var(--safe-b)) !important; }
}
@media (max-width: 359px) {
  .quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero h1 { font-size: 32px !important; }
  .hero-actions { flex-direction: column; }
  .app-open { padding: 13px; }
}
/* ---------- Dimau glass controls ----------
   The theme above already makes the controls translucent, but nothing was
   frosting what sits behind them, so they read as washed-out outlines rather
   than glass. This gives every control a frosted face, a bright top edge and a
   soft lift, and keeps the orange accent ring exactly where it is today.
   It is the last block of the last stylesheet, so no !important is needed. */

.quick button,
.btn,
.filters button,
.text-btn,
.wallet .btn,
.icon-btn,
.tab,
.pill,
#btn-install,
#btn-search,
.dm-acct-btn,
.bw-pill {
  background: linear-gradient(150deg, rgba(255,255,255,.72), rgba(255,255,255,.44));
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
          backdrop-filter: blur(14px) saturate(1.6);
  border: 1px solid rgba(255,255,255,.78);
  box-shadow: 0 8px 20px rgba(14,52,78,.13), inset 0 1px 0 rgba(255,255,255,.9);
  color: var(--ink);
  transition: background .18s ease, box-shadow .18s ease, transform .12s ease;
}

/* the controls that carry the orange ring today keep it */
.quick button,
.btn { border-color: var(--map-accent); }

.quick button:hover,
.btn:hover,
.filters button:hover,
.text-btn:hover,
.icon-btn:hover,
.tab:hover,
#btn-install:hover,
#btn-search:hover,
.dm-acct-btn:hover,
.bw-pill:hover {
  background: linear-gradient(150deg, rgba(255,255,255,.90), rgba(255,255,255,.64));
  box-shadow: 0 14px 30px rgba(14,52,78,.19), inset 0 1px 0 rgba(255,255,255,.95);
  transform: translateY(-1px);
}
.quick button:active,
.btn:active,
.icon-btn:active,
.tab:active {
  transform: translateY(0);
  box-shadow: inset 0 3px 10px rgba(14,52,78,.16);
}

/* main action: the same glass, read as primary by its heavier accent ring */
.btn.primary,
.hero .btn.primary,
.wallet .btn.primary {
  background: linear-gradient(150deg, rgba(255,255,255,.88), rgba(255,255,255,.62));
  border: 2px solid var(--map-accent);
  box-shadow: 0 10px 24px rgba(14,52,78,.18), inset 0 1px 0 rgba(255,255,255,.95);
  color: var(--ink);
}

/* chosen tab */
.tab.is-active {
  background: linear-gradient(150deg, rgba(255,255,255,.92), rgba(255,255,255,.70));
  border-color: var(--map-accent);
  box-shadow: 0 6px 16px rgba(14,52,78,.18), inset 0 -3px var(--map-accent);
}

/* cards and panels frost too, so the page reads as one material */
.app, .card, .search-box, .trust-note, .wallet, .notice {
  background: rgba(255,255,255,.42);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
          backdrop-filter: blur(16px) saturate(1.5);
}
.app:hover { background: rgba(255,255,255,.58); }

/* if the browser cannot blur, keep the text readable */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .quick button, .btn, .filters button, .text-btn, .icon-btn, .tab, .pill,
  #btn-install, #btn-search, .dm-acct-btn, .bw-pill,
  .app, .card, .search-box, .trust-note, .wallet, .notice {
    background: rgba(255,255,255,.92);
  }
}
@media (prefers-reduced-motion: reduce) {
  .quick button, .btn, .icon-btn, .tab { transition: none; }
  .quick button:hover, .btn:hover, .icon-btn:hover, .tab:hover { transform: none; }
}

/* Match the bright map canvas in either OS theme. Account/help dialogs have
   their own scoped tokens and keep their existing accessible presentation. */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: light; --ink: #0b2a4a; --mute: #284d64; --card: #ffffff30; --bg: #a6dce5; --sand: #ffffff55; --line: #ffffffa8; }
}