/* HOM3 v3u -- Settings > Appearance styles (theme cards + tab grid).
   Pairs with _appearance_v3u.html and hom3_v3u.css (lockups). Neutral
   chrome so it sits inside any of the three themes. */

.appearance .section-title{
  font-size:.82rem; letter-spacing:.16em; text-transform:uppercase;
  opacity:.7; margin:0 0 .9rem;
}
.appearance fieldset{
  border:1px solid rgba(140,160,180,.22); border-radius:8px;
  padding:1rem 1rem 1.1rem; margin:0 0 1.1rem;
}
.appearance legend{
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  opacity:.6; padding:0 .4rem;
}

/* -- theme picker cards -- */
.theme-options{ display:flex; gap:.85rem; flex-wrap:wrap; }
.theme-card{
  flex:1 1 190px; min-width:170px; cursor:pointer;
  border:2px solid transparent; border-radius:10px; padding:.35rem;
  transition:border-color .15s ease, transform .1s ease;
}
.theme-card:hover{ transform:translateY(-1px); }
.theme-card.is-active{ border-color:currentColor; }
.theme-card input{ position:absolute; opacity:0; width:0; height:0; }
.theme-card:focus-within{ outline:2px solid #6ea8ff; outline-offset:2px; }
.theme-preview{
  display:flex; align-items:center; justify-content:center;
  height:76px; border-radius:8px; overflow:hidden; position:relative;
}
/* representative backgrounds for each theme card preview */
.bg-nautical{background:
  radial-gradient(120% 90% at 50% -10%, #0e2f4a 0%, #071523 60%, #03080f 100%);}
.bg-nautical::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(58deg,transparent 0 34px,
    rgba(180,214,240,.07) 34px 38px,transparent 38px 76px);}
.bg-cyber{background:#04070a;background-image:
  repeating-linear-gradient(0deg,rgba(52,245,160,.05) 0 1px,transparent 1px 3px);}
.bg-corporate{background:linear-gradient(180deg,#16233a 0%,#0e1726 100%);}
.theme-name{
  display:block; text-align:center; margin-top:.45rem;
  font-size:.72rem; letter-spacing:.1em;
}
.theme-name em{ opacity:.55; font-style:normal; letter-spacing:.04em; }

/* -- tab checkbox grid -- */
.tab-presets .hint{
  font-size:.76rem; line-height:1.45; opacity:.65; margin:.1rem 0 .8rem;
  max-width:60ch;
}
.tab-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:.4rem .8rem; margin-bottom:.9rem;
}
.tab-toggle{
  display:flex; align-items:center; gap:.5rem; padding:.32rem .5rem;
  border-radius:6px; cursor:pointer; font-size:.86rem;
  border:1px solid transparent;
}
.tab-toggle:hover{ background:rgba(140,160,180,.08); }
.tab-toggle input{ accent-color:#3d7bd9; width:15px; height:15px; }
.tab-toggle.is-locked{ opacity:.7; cursor:default; }
.tab-toggle.is-locked .tab-label::after{
  content:" - always shown"; opacity:.5; font-size:.72rem;
}
.tab-actions{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; }
.btn-primary{
  border:0; border-radius:6px; padding:.45rem .95rem; cursor:pointer;
  font-weight:600; background:#3d7bd9; color:#fff; letter-spacing:.02em;
}
.btn-ghost{
  border:1px solid rgba(140,160,180,.4); border-radius:6px;
  padding:.45rem .8rem; cursor:pointer; background:transparent;
  color:inherit;
}
.tab-status{ font-size:.78rem; opacity:.7; }

/* theme-accented Save button so the section feels native */
.theme-nautical .btn-primary{ background:#c69630; color:#22160a; }
.theme-nautical .tab-toggle input{ accent-color:#d9a441; }
.theme-cyber .btn-primary{ background:#0f9d63; color:#04120b; }
.theme-cyber .tab-toggle input{ accent-color:#34f5a0; }

@media (max-width:520px){
  .theme-options{ flex-direction:column; }
  .theme-card{ flex-basis:auto; }
}