/* Sharp Life Portal on Titan OS TVs - portal ver7 and the titan101 e-Manual.
   Loaded only on those pages (inc/titan.php), in <head>, so the dark e-Manual
   theme is there from the first paint (no white flash).
   Rules are extracted unchanged from Alexander Jermakov's Sharp Life Portal
   8.0.8 (manual-navigation.js / portal-navigation.js), where they were
   injected at runtime. Additions for WordPress are marked "WP:". */

/* ---------- e-Manual (manual-navigation.js) ---------- */
html[data-sharp-manual], html[data-sharp-manual] body { background: #272d31 !important; color: #fff !important; color-scheme: dark; }
html[data-sharp-manual] body, html[data-sharp-manual] button, html[data-sharp-manual] input, html[data-sharp-manual] select, html[data-sharp-manual] textarea { font-family: "Roboto", Arial, sans-serif !important; }
html[data-sharp-manual] h1, html[data-sharp-manual] h2, html[data-sharp-manual] h3, html[data-sharp-manual] h4, html[data-sharp-manual] h5, html[data-sharp-manual] h6, html[data-sharp-manual] p, html[data-sharp-manual] li, html[data-sharp-manual] td, html[data-sharp-manual] th, html[data-sharp-manual] label, html[data-sharp-manual] a, html[data-sharp-manual] strong, html[data-sharp-manual] em, html[data-sharp-manual] span:not(.fa):not(.fas):not(.far):not(.fab):not(.zmdi) { font-family: "Roboto", Arial, sans-serif !important; }
html[data-sharp-manual] header, html[data-sharp-manual] .header { background: #272d31 !important; color: #fff !important; border-color: #66717a !important; }
html[data-sharp-manual] body, html[data-sharp-manual] #page, html[data-sharp-manual] .site, html[data-sharp-manual] .site-content, html[data-sharp-manual] .content-area, html[data-sharp-manual] .site-main, html[data-sharp-manual] article, html[data-sharp-manual] section, html[data-sharp-manual] .im-content, html[data-sharp-manual] .con-center, html[data-sharp-manual] .container--content, html[data-sharp-manual] .tab-content, html[data-sharp-manual] .tab-pane { background-color: #272d31 !important; color: #fff !important; }
html[data-sharp-manual] h1, html[data-sharp-manual] h2, html[data-sharp-manual] h3, html[data-sharp-manual] h4, html[data-sharp-manual] h5, html[data-sharp-manual] h6, html[data-sharp-manual] p, html[data-sharp-manual] li, html[data-sharp-manual] td, html[data-sharp-manual] th, html[data-sharp-manual] label, html[data-sharp-manual] span, html[data-sharp-manual] i, html[data-sharp-manual] .icon { color: #fff !important; }
html[data-sharp-manual] a { color: #fff !important; }
html[data-sharp-manual] table, html[data-sharp-manual] td, html[data-sharp-manual] th { background-color: #30373c !important; border-color: #66717a !important; }
html[data-sharp-manual] .item-con, html[data-sharp-manual] .childlist-item, html[data-sharp-manual] .nav-tabs a, html[data-sharp-manual] .backlinks { background-color: #343c42 !important; color: #fff !important; border-color: #66717a !important; }
html[data-sharp-manual] header.header { display: flex !important; align-items: center !important; box-sizing: border-box !important; width: 100% !important; min-height: 72px !important; margin: 0 !important; padding: 12px 25px !important; }
html[data-sharp-manual] header.header .model { display: block !important; box-sizing: border-box !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; text-align: left !important; font-size: 30px !important; line-height: 1.2 !important; }
html[data-sharp-manual] header.header .model .sharp-manual-title { display: inline-flex !important; align-items: center !important; gap: 10px !important; float: none !important; margin: 0 !important; padding: 0 !important; }
html[data-sharp-manual] .sharp-manual-logo { display: block !important; flex: 0 0 auto !important; width: auto !important; height: .75em !important; margin: 0 !important; }
html[data-sharp-manual] #backlink { display: none !important; }
html[data-sharp-manual] #home.home-con { position: fixed !important; top: 0 !important; left: 25px !important; right: 25px !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-template-rows: repeat(2, 35vh) !important; grid-auto-rows: 35vh !important; align-content: start !important; gap: 15px !important; box-sizing: border-box !important; width: calc(100% - 50px) !important; max-width: none !important; height: 100vh !important; margin: 0 !important; padding: calc(10vh + 90px) 0 14px !important; }
html[data-sharp-manual] #home.home-con::before, html[data-sharp-manual] #home.home-con::after { display: none !important; content: none !important; }
html[data-sharp-manual] #home.home-con > a.items { position: relative !important; display: block !important; float: none !important; box-sizing: border-box !important; width: auto !important; min-width: 0 !important; height: 35vh !important; margin: 0 !important; padding: 0 !important; border-radius: 5px !important; color: #d1d1d1 !important; text-decoration: none !important; filter: drop-shadow(0 0 14px #0a0a0a); }
html[data-sharp-manual] #home.home-con > a.items .item-con { display: grid !important; grid-template-columns: 1fr !important; grid-template-rows: 1fr auto !important; align-items: stretch !important; justify-items: stretch !important; box-sizing: border-box !important; width: 100% !important; height: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; border: 1px solid #363636 !important; border-radius: 5px !important; background-image: linear-gradient(to right, #253135, #262f34, #282e32, #282c30, #292b2e) !important; color: #d1d1d1 !important; }
html[data-sharp-manual] #home.home-con .icon { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background-image: linear-gradient(to right bottom, #343c42, #30373c, #293035) !important; color: #d1d1d1 !important; font-size: 165px !important; line-height: 1 !important; text-align: center !important; }
html[data-sharp-manual] #home.home-con .sectitle { display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; width: 100% !important; min-height: 82px !important; margin: 0 !important; padding: 16px 20px !important; border-top: 1px solid #394247 !important; background-image: linear-gradient(to right, #253135, #262f34, #282e32, #282c30, #292b2e) !important; color: #d1d1d1 !important; font-size: 24px !important; line-height: 1.2 !important; font-weight: 700 !important; text-align: center !important; }
@media (max-width: 700px) { html[data-sharp-manual] header.header { padding: 12px 25px !important; } html[data-sharp-manual] header.header .model { font-size: 24px !important; } html[data-sharp-manual] #home.home-con { padding-top: calc(10vh + 145px) !important; } html[data-sharp-manual] #home.home-con .icon { font-size: 105px !important; } html[data-sharp-manual] #home.home-con .sectitle { font-size: 16px !important; } }
html[data-sharp-manual] a:focus, html[data-sharp-manual] button:focus, html[data-sharp-manual] [role='button']:focus, html[data-sharp-manual] [tabindex]:focus {
  outline: 4px solid #ec1e3c !important;
  outline-offset: -4px !important;
  background-color: #ec1e3c !important;
  color: #fff !important;
  box-shadow: 0 0 0 4px #ec1e3c, 0 0 18px rgba(236, 30, 60, 0.9) !important;
  transform: scale(1.012);
  transition: transform 120ms ease, box-shadow 120ms ease !important;
}
html[data-sharp-manual] a:focus .item-con, html[data-sharp-manual] [tabindex]:focus .item-con { background-color: #ec1e3c !important; }
html[data-sharp-manual] #home.home-con > a.items:focus { outline: 4px solid #ec1e3c !important; outline-offset: -4px !important; background: transparent !important; box-shadow: 0 0 0 4px #ec1e3c, 0 0 18px rgba(236, 30, 60, .9) !important; transform: scale(1.018) !important; }
html[data-sharp-manual] #home.home-con > a.items:focus .item-con { background-color: transparent !important; }
html[data-sharp-manual] #home.home-con > a.items:focus::after { position: absolute !important; inset: 0 !important; z-index: 5 !important; display: block !important; border-radius: 5px !important; box-shadow: inset 0 0 0 999px rgba(236, 30, 60, .28) !important; content: '' !important; pointer-events: none !important; }
html[data-sharp-manual][data-sharp-tts-state='enabled'] a:focus, html[data-sharp-manual][data-sharp-tts-state='enabled'] button:focus, html[data-sharp-manual][data-sharp-tts-state='enabled'] [role='button']:focus, html[data-sharp-manual][data-sharp-tts-state='enabled'] [tabindex]:focus { outline: 3px solid #baff35 !important; outline-offset: -7px !important; box-shadow: inset 0 0 0 7px #baff35, 0 0 0 4px #ec1e3c, 0 0 18px rgba(236, 30, 60, .9) !important; }
html[data-sharp-manual][data-sharp-tts-state='enabled'] #home.home-con > a.items:focus { outline: 3px solid #baff35 !important; outline-offset: -7px !important; }
html[data-sharp-manual][data-sharp-tts-state='enabled'] #home.home-con > a.items:focus::after { box-shadow: inset 0 0 0 7px #baff35, inset 0 0 0 999px rgba(236, 30, 60, .28) !important; }

/* WP: keep the original manual title hidden until manual-navigation.js has
   replaced it with the Sharp logo and the localized title. */
html[data-sharp-manual]:not(.sharp-manual-ready) header.header .model { visibility: hidden !important; }

/* ---------- Portal UI, top controls, dialogs (portal-navigation.js) ---------- */
html:not([data-sharp-manual]) .homepage-large #instructionmanual h3,
html:not([data-sharp-manual]) .homepage-large #lifeapp h2,
html:not([data-sharp-manual]) .homepage-large #some h2 {
  font-size: 1.28em !important;
  line-height: 1.12 !important;
  font-weight: 700 !important;
  margin: 0 !important;
}
html:not([data-sharp-manual]) .homepage-large #lifeapp h3 { display: none !important; }
html:not([data-sharp-manual]) .homepage-large #lifeapp > p.btn-link, html:not([data-sharp-manual]) .homepage-large #some > p.btn-link { font-size: .88em !important; }
html:not([data-sharp-manual]) .homepage-large #lifeapp .text-con, html:not([data-sharp-manual]) .homepage-large #some .text-con { align-self: center !important; display: flex !important; align-items: center !important; height: 100% !important; }
html:not([data-sharp-manual]) .homepage-large #lifeapp .text-con h2, html:not([data-sharp-manual]) .homepage-large #some .text-con h2 { margin-top: 0 !important; margin-bottom: 0 !important; }
html:not([data-sharp-manual]) .homepage-large .logo-con .app-name { font-size: 30px !important; line-height: 1.2 !important; }
html:not([data-sharp-manual]) .homepage-large .logo-con > img { width: auto !important; height: 22.5px !important; max-width: none !important; }
#sharp-portal-top-controls { position: fixed; top: 14px; right: 18px; z-index: 2147483645; display: flex; align-items: center; gap: 12px; font-family: Roboto, Arial, sans-serif; }
#sharp-portal-top-controls button, #sharp-portal-about .sharp-about-back { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; height: 44px; min-height: 44px; border: 2px solid #69727a; border-radius: 11px; background: rgba(20, 23, 26, .94); color: #d1d1d1; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.4); }
#sharp-portal-top-controls button { padding: 5px 14px; font-family: Roboto, sans-serif; font-size: 16px; line-height: 1; font-weight: bold; }
#sharp-portal-top-controls .sharp-portal-back { width: 44px; padding: 4px; }
#sharp-portal-top-controls .sharp-portal-back img, #sharp-portal-about .sharp-about-back img { display: block; width: 34px; height: 34px; }
html.sharp-modal-active #sharp-portal-top-controls, html.sharp-about-active #sharp-portal-top-controls { display: none !important; }
html[data-sharp-manual] header.header .model { padding-right: 84px !important; }
#modal.modal-on .close { display: inline-flex !important; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 11px; background: #111 !important; }
#modal.modal-on .close .xlogo { width: 34px !important; height: 34px !important; }
#sharp-portal-about { position: fixed; inset: 0; z-index: 2147483646; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, .76); font-family: Roboto, Arial, sans-serif; }
#sharp-portal-about.sharp-dialog-open { display: flex; }
#sharp-portal-about .sharp-about-panel { position: relative; box-sizing: border-box; width: min(720px, 88vw); max-height: 90vh; overflow: auto; padding: 42px 56px 34px; border: 2px solid #69727a; border-radius: 12px; background: #30373c; color: #d1d1d1; font-family: Roboto, sans-serif; font-size: 16px; text-align: center; box-shadow: 0 18px 55px rgba(0,0,0,.75); }
#sharp-portal-about .sharp-about-panel, #sharp-portal-about .sharp-about-panel h2, #sharp-portal-about .sharp-about-panel p, #sharp-portal-about .sharp-about-panel strong, #sharp-portal-about .sharp-about-panel span { color: #d1d1d1 !important; }
#sharp-portal-about .sharp-about-back { position: absolute; top: 16px; right: 16px; width: 44px; padding: 4px; }
#sharp-portal-about .sharp-about-logo { display: block; width: 150px; height: auto; margin: 12px auto 20px; }
#sharp-portal-about .sharp-about-title { margin: 0 0 16px; font-size: 1.44em; line-height: 1.2; font-weight: bold; }
#sharp-portal-about .sharp-about-details { margin: 0; font-size: 1.1em; line-height: 1.55; font-weight: normal; }
#sharp-portal-about .sharp-about-system { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 24px; width: min(520px, 100%); margin: 18px auto 0; padding-top: 16px; border-top: 1px solid #69727a; text-align: left; font-size: 1.02em; line-height: 1.3; }
#sharp-portal-about .sharp-about-system dt { margin: 0; color: #d1d1d1; font-weight: 600; }
#sharp-portal-about .sharp-about-system dd { margin: 0; color: #fff; font-weight: 700; text-align: right; }
#sharp-portal-about .sharp-about-rights { margin-top: 13px; font-size: .95em; }
html:not([data-sharp-manual]) .homepage-app .content:focus,
html:not([data-sharp-manual]) #modal .close:focus,
html:not([data-sharp-manual]) button:focus,
html:not([data-sharp-manual]) select:focus,
html:not([data-sharp-manual]) [role='button']:focus {
  outline: 4px solid #ec1e3c !important;
  outline-offset: -4px !important;
  box-shadow: inset 0 0 0 999px rgba(236, 30, 60, 0.34), 0 0 0 4px #ec1e3c, 0 0 18px rgba(236, 30, 60, 0.9) !important;
  transform: scale(1.018) !important;
  transition: transform 120ms ease, box-shadow 120ms ease !important;
}
html[data-sharp-tts-state='enabled']:not([data-sharp-manual]) .homepage-app .content:focus,
html[data-sharp-tts-state='enabled']:not([data-sharp-manual]) #modal .close:focus,
html[data-sharp-tts-state='enabled']:not([data-sharp-manual]) button:focus,
html[data-sharp-tts-state='enabled']:not([data-sharp-manual]) select:focus,
html[data-sharp-tts-state='enabled']:not([data-sharp-manual]) [role='button']:focus {
  outline: 3px solid #baff35 !important;
  outline-offset: -7px !important;
  box-shadow: inset 0 0 0 7px #baff35, inset 0 0 0 999px rgba(236, 30, 60, 0.28), 0 0 0 4px #ec1e3c, 0 0 18px rgba(236, 30, 60, 0.9) !important;
}
#sharp-portal-exit-confirmation { position: fixed; inset: 0; z-index: 2147483646; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, .76); font-family: Roboto, Arial, sans-serif; }
#sharp-portal-exit-confirmation.sharp-dialog-open { display: flex; }
#sharp-portal-exit-confirmation .sharp-exit-panel { box-sizing: border-box; width: min(720px, 88vw); max-height: 90vh; overflow: auto; padding: 42px 56px 34px; border: 2px solid #69727a; border-radius: 12px; background: #30373c; color: #d1d1d1; font-family: Roboto, Arial, sans-serif; font-size: 16px; text-align: center; box-shadow: 0 18px 55px rgba(0,0,0,.75); }
#sharp-portal-exit-confirmation .sharp-exit-message { margin: 0 0 28px; color: #d1d1d1; font-size: 1.44em; line-height: 1.3; font-weight: 700; }
#sharp-portal-exit-confirmation .sharp-exit-actions { display: flex; justify-content: center; gap: 12px; }
#sharp-portal-exit-confirmation button { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 160px; min-height: 44px; padding: 5px 20px; border: 2px solid #69727a; border-radius: 11px; background: rgba(20, 23, 26, .94); color: #d1d1d1; font-family: Roboto, Arial, sans-serif; font-size: 16px; line-height: 1; font-weight: 700; box-shadow: 0 4px 12px rgba(0,0,0,.4); }
@media (max-width: 700px) {
  html:not([data-sharp-manual]) .homepage-large #instructionmanual h3, html:not([data-sharp-manual]) .homepage-large #lifeapp h2, html:not([data-sharp-manual]) .homepage-large #some h2 { font-size: 18px !important; }
  #sharp-portal-exit-confirmation .sharp-exit-panel { width: 92vw; padding: 42px 24px 26px; font-size: 15px; }
  #sharp-portal-exit-confirmation button { min-width: 120px; min-height: 40px; padding: 4px 14px; font-size: 14px; }
  html:not([data-sharp-manual]) .homepage-large .logo-con .app-name { font-size: 24px !important; line-height: 1.2 !important; }
  html:not([data-sharp-manual]) .homepage-large .logo-con > img { width: auto !important; height: 18px !important; }
  #sharp-portal-top-controls { top: 8px; right: 10px; gap: 7px; }
  #sharp-portal-top-controls button { height: 40px; min-height: 40px; padding: 4px 11px; font-size: 14px; }
  #sharp-portal-top-controls .sharp-portal-back { width: 40px; }
  #sharp-portal-top-controls .sharp-portal-back img { width: 30px; height: 30px; }
  html:not([data-sharp-manual]) .homepage-app { grid-template-rows: 130px 1fr !important; }
  html:not([data-sharp-manual]) .homepage-large .logo-con { height: 130px !important; align-items: start !important; padding-top: 14px !important; }
  html:not([data-sharp-manual]) .homepage-large .container-app { margin-top: 0 !important; }
  html:not([data-sharp-manual]) #sharp-portal-top-controls { top: 70px; }
  #sharp-portal-about .sharp-about-panel { width: 92vw; padding: 42px 24px 26px; font-size: 15px; }
  #sharp-portal-about .sharp-about-system { gap: 6px 14px; }
}