Jefx Forum<\/title>\r\n <style>\r\n :root {\r\n --accent: #59f2ec; --accent-rgb: 89, 242, 236; --accent-2: #8f7cff; --accent-2-rgb: 143, 124, 255;\r\n --text: #b9cce3; --text-muted: #738eac; --text-bright: #f3f9ff;\r\n --glass: rgba(9, 24, 52, 0.18); --glass-strong: rgba(6, 17, 40, 0.28); --glass-hover: rgba(92, 167, 236, 0.14);\r\n --border: rgba(177, 222, 255, 0.16); --theme-shift: 0.7s; --cursor-x: -100px; --cursor-y: -100px;\r\n --shadow: 0 16px 42px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.08);\r\n --panel-radius: 22px; --panel-blur: 25px; --panel-sat: 145%; --inner-radius: 14px; --btn-radius: 9px;\r\n --font-main: Arial, Helvetica, sans-serif; --font-display: Arial, Helvetica, sans-serif;\r\n --link-hover: #d0ffff; --btn-text: #04111b; --page-pad: 16px; --wrap-gap: 16px;\r\n }\r\n * { box-sizing: border-box; }\r\n html, body { min-height: 100%; margin: 0; }\r\n body {\r\n min-height: 100vh; overflow-x: hidden; color: var(--text); font-family: var(--font-main);\r\n background-color: #040816; color-scheme: dark;\r\n background-image:\r\n radial-gradient(circle at 7% 3%, rgba(var(--accent-2-rgb), 0.28), transparent 33rem),\r\n radial-gradient(circle at 95% 12%, rgba(var(--accent-rgb), 0.16), transparent 31rem),\r\n radial-gradient(circle at 75% 100%, rgba(235, 104, 255, 0.12), transparent 35rem),\r\n linear-gradient(135deg, #030611 0%, #07162e 50%, #040713 100%);\r\n background-attachment: fixed;\r\n transition: background-image var(--theme-shift) ease, background-color var(--theme-shift) ease, color var(--theme-shift) ease;\r\n }\r\n body.has-wallpaper { background-image: linear-gradient(rgba(3,8,21,0.55), rgba(3,8,21,0.72)), var(--jefx-wallpaper); }\r\n a { color: var(--accent) !important; text-decoration: none; }\r\n a:hover { color: var(--link-hover) !important; }\r\n\r\n #jefx-statusbar {\r\n position: fixed; top: 12px; left: 14px; z-index: 999999; width: auto; max-width: min(440px, calc(100vw - 28px));\r\n color: var(--text-bright); background: #0a1730; border: 1px solid rgba(var(--accent-rgb), 0.45); border-radius: 22px;\r\n box-shadow: 0 10px 28px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08);\r\n transform: scaleX(0.18) scaleY(0.7); transform-origin: left top; opacity: 0; pointer-events: none; overflow: hidden;\r\n transition: border-radius 0.35s ease, box-shadow 0.35s ease;\r\n }\r\n #jefx-statusbar.ready { animation: status-water-in 1.15s cubic-bezier(0.22, 1.2, 0.36, 1) forwards; pointer-events: auto; }\r\n #jefx-statusbar.expanded { border-radius: 18px; box-shadow: 0 18px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(var(--accent-rgb),0.22); }\r\n #jefx-statusbar .sb-head {\r\n display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 10px 0 14px; border: 0; width: 100%;\r\n background: transparent; color: inherit; cursor: pointer; text-align: left;\r\n }\r\n #jefx-statusbar .sb-timeblock { display: flex; flex-direction: column; justify-content: center; line-height: 1.05; min-width: 92px; flex: 1; }\r\n #jefx-statusbar .sb-clock { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 13px; }\r\n #jefx-statusbar .sb-date { margin-top: 2px; color: var(--text-muted); font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }\r\n #jefx-statusbar .sb-tz-chip { color: var(--text-muted); font-size: 10px; font-weight: 700; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\r\n #jefx-statusbar .sb-sep { width: 1px; height: 18px; background: rgba(177,222,255,0.22); flex: 0 0 auto; }\r\n #jefx-statusbar .sb-chev { color: var(--text-muted); font-size: 12px; font-weight: 900; transition: transform 0.25s ease; }\r\n #jefx-statusbar.expanded .sb-chev { transform: rotate(180deg); }\r\n #jefx-statusbar .sb-panel { display: none; padding: 0 12px 12px; border-top: 1px solid rgba(177,222,255,0.12); }\r\n #jefx-statusbar.expanded .sb-panel { display: block; }\r\n .sb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }\r\n .sb-card { padding: 10px; background: #071428; border: 1px solid rgba(163,220,255,0.14); border-radius: 12px; }\r\n .sb-card.full { grid-column: 1 \/ -1; }\r\n .sb-card h4 { margin: 0 0 6px; color: var(--text-muted); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; }\r\n .sb-card p { margin: 0; color: var(--text-bright); font-size: 12px; font-weight: 700; word-break: break-word; }\r\n .sb-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid rgba(177,222,255,0.08); }\r\n .sb-toggle-row:first-of-type { border-top: 0; padding-top: 0; }\r\n .sb-toggle-meta strong { display: block; color: var(--text-bright); font-size: 12px; }\r\n .sb-toggle-meta span { display: block; margin-top: 2px; color: var(--text-muted); font-size: 10px; }\r\n .sb-switch {\r\n position: relative; width: 44px; height: 26px; border-radius: 999px; border: 1px solid rgba(163,220,255,0.25);\r\n background: #122445; cursor: pointer; flex: 0 0 auto; padding: 0;\r\n }\r\n .sb-switch::after {\r\n content: \"\"; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;\r\n background: #d7e6f7; transition: transform 0.2s ease, background 0.2s ease;\r\n }\r\n .sb-switch.on {\r\n background: linear-gradient(135deg, rgba(var(--accent-rgb),0.85), rgba(var(--accent-2-rgb),0.85));\r\n border-color: rgba(255,255,255,0.35);\r\n }\r\n .sb-switch.on::after { transform: translateX(18px); background: #04111b; }\r\n .sb-switch.warn.on { background: linear-gradient(135deg, #ff6b6b, #ff9f43); }\r\n .sb-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }\r\n .sb-actions button, .sb-goal-row button {\r\n min-height: 32px !important; border-radius: 10px !important; border: 1px solid rgba(163,220,255,0.2) !important;\r\n background: #122445 !important; color: var(--text-bright) !important; font-size: 10px !important;\r\n font-weight: 800 !important; cursor: pointer; box-shadow: none !important;\r\n }\r\n .sb-goal-row { display: grid; grid-template-columns: 1fr auto; gap: 6px; margin-top: 8px; }\r\n .sb-goal-row input {\r\n min-height: 34px !important; padding: 0 10px; font-size: 11px !important; background: #050d1c !important;\r\n border: 1px solid rgba(156,216,255,0.2) !important; border-radius: 10px !important; color: var(--text-bright) !important;\r\n }\r\n .sb-goal-list { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; max-height: 120px; overflow: auto; }\r\n .sb-goal-list li {\r\n display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center;\r\n padding: 8px 10px; background: #050d1c; border: 1px solid rgba(163,220,255,0.1); border-radius: 10px;\r\n color: var(--text-bright); font-size: 11px;\r\n }\r\n .sb-goal-list li.done span { text-decoration: line-through; color: var(--text-muted); }\r\n .sb-goal-list button { border: 0; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 12px; padding: 0; }\r\n #jefx-statusbar .sb-ripple { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 0 rgba(var(--accent-rgb), 0); }\r\n #jefx-statusbar.ready .sb-ripple { animation: water-ripple 1.4s ease-out 0.15s both; }\r\n #jefx-mute-toast {\r\n position: fixed; top: 62px; left: 14px; z-index: 1000000; display: flex; align-items: center; gap: 8px;\r\n padding: 10px 14px; color: #fff; font-size: 12px; font-weight: 800; background: #111; border-radius: 14px;\r\n box-shadow: 0 12px 30px rgba(0,0,0,0.45); opacity: 0; transform: translateY(-6px) scale(0.96); pointer-events: none;\r\n transition: opacity 0.25s ease, transform 0.25s ease;\r\n }\r\n #jefx-mute-toast.show { opacity: 1; transform: translateY(0) scale(1); }\r\n @keyframes status-water-in {\r\n 0% { opacity: 0; transform: scaleX(0.12) scaleY(0.55); filter: blur(2px); }\r\n 35% { opacity: 1; transform: scaleX(1.08) scaleY(0.9); filter: blur(0); }\r\n 55% { transform: scaleX(0.96) scaleY(1.08); }\r\n 72% { transform: scaleX(1.03) scaleY(0.97); }\r\n 100% { opacity: 1; transform: scaleX(1) scaleY(1); }\r\n }\r\n @keyframes water-ripple { 0% { box-shadow: inset 0 0 0 0 rgba(var(--accent-rgb), 0.35); } 100% { box-shadow: inset 0 0 0 28px rgba(var(--accent-rgb), 0); } }\r\n\r\n #jefx-cursor {\r\n position: fixed; top: 0; left: 0; z-index: 2147483646; width: 34px; height: 34px; pointer-events: none; opacity: 0;\r\n transform: translate3d(calc(var(--cursor-x) - 50%), calc(var(--cursor-y) - 50%), 0);\r\n }\r\n #jefx-cursor svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.45)); }\r\n #jefx-cursor .layer { display: none; }\r\n body.has-style-cursor #jefx-cursor { opacity: 1; }\r\n body.has-style-cursor[data-layout-style=\"glass\"] #jefx-cursor .layer-glass,\r\n body.has-style-cursor[data-layout-style=\"neon\"] #jefx-cursor .layer-neon,\r\n body.has-style-cursor[data-layout-style=\"solid\"] #jefx-cursor .layer-solid,\r\n body.has-style-cursor[data-layout-style=\"minimal\"] #jefx-cursor .layer-minimal,\r\n body.has-style-cursor[data-layout-style=\"paper\"] #jefx-cursor .layer-paper,\r\n body.has-style-cursor[data-layout-style=\"terminal\"] #jefx-cursor .layer-terminal,\r\n body.has-style-cursor[data-layout-style=\"brutal\"] #jefx-cursor .layer-brutal,\r\n body.has-style-cursor[data-layout-style=\"sunset\"] #jefx-cursor .layer-sunset,\r\n body.has-style-cursor[data-layout-style=\"cyber\"] #jefx-cursor .layer-cyber,\r\n body.has-style-cursor[data-layout-style=\"ocean\"] #jefx-cursor .layer-ocean,\r\n body.has-style-cursor[data-layout-style=\"ember\"] #jefx-cursor .layer-ember,\r\n body.has-style-cursor[data-layout-style=\"ice\"] #jefx-cursor .layer-ice,\r\n body.has-style-cursor[data-layout-style=\"vapor\"] #jefx-cursor .layer-vapor,\r\n body.has-style-cursor[data-layout-style=\"carbon\"] #jefx-cursor .layer-carbon { display: block; }\r\n @media (pointer: fine) {\r\n body.has-style-cursor, body.has-style-cursor a, body.has-style-cursor button, body.has-style-cursor input,\r\n body.has-style-cursor textarea, body.has-style-cursor select, body.has-style-cursor label,\r\n body.has-style-cursor [role=\"button\"] { cursor: none !important; }\r\n }\r\n body.cursor-hot #jefx-cursor { transform: translate3d(calc(var(--cursor-x) - 50%), calc(var(--cursor-y) - 50%), 0) scale(1.12); }\r\n\r\n #jefx-appearance { position: fixed; top: 12px; left: 50%; z-index: 999999; transform: translateX(-50%); }\r\n .appearance-toggle {\r\n display: flex !important; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 9px 16px;\r\n color: var(--text-bright) !important; font-size: 12px; font-weight: 700; cursor: pointer; background: #0a1730 !important;\r\n border: 1px solid rgba(var(--accent-rgb), 0.72) !important; border-radius: 999px !important;\r\n box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.2), 0 9px 24px rgba(0,0,0,0.35);\r\n }\r\n .appearance-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 11px var(--accent); }\r\n .appearance-panel {\r\n position: absolute; top: calc(100% + 10px); left: 50%; width: min(400px, calc(100vw - 28px)); max-height: calc(100vh - 70px);\r\n padding: 15px; overflow-y: auto; visibility: hidden; opacity: 0; transform: translateX(-50%) translateY(-8px);\r\n transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease; background: #07132b;\r\n border: 1px solid rgba(177,222,255,0.28); border-radius: 17px; box-shadow: 0 20px 48px rgba(0,0,0,0.45); color: #b9cce3;\r\n }\r\n #jefx-appearance.open .appearance-panel { visibility: visible; opacity: 1; transform: translateX(-50%) translateY(0); }\r\n .appearance-heading { margin: 0 0 13px; color: #f3f9ff; font-size: 13px; font-weight: 700; }\r\n .appearance-label { display: block; margin: 15px 0 8px; color: #738eac; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }\r\n .theme-options { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }\r\n button.theme-choice {\r\n display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 5px;\r\n min-height: 58px !important; padding: 6px 2px !important; color: #f3f9ff !important; font-size: 9px !important;\r\n font-weight: 700 !important; cursor: pointer; border: 1px solid rgba(255,255,255,0.16) !important; border-radius: 10px !important;\r\n }\r\n button.theme-choice.active { border: 2px solid #fff !important; }\r\n .theme-color-dot { width: 20px; height: 20px; border: 1px solid rgba(255,255,255,0.45); border-radius: 50%; }\r\n button.theme-aqua { background: #12353a !important; } button.theme-aqua .theme-color-dot { background: linear-gradient(135deg, #57f1ec, #7c83ff) !important; }\r\n button.theme-violet { background: #2a1c48 !important; } button.theme-violet .theme-color-dot { background: linear-gradient(135deg, #c18cff, #6d68ff) !important; }\r\n button.theme-rose { background: #3a1830 !important; } button.theme-rose .theme-color-dot { background: linear-gradient(135deg, #ff8fca, #aa6bff) !important; }\r\n button.theme-gold { background: #3a2a14 !important; } button.theme-gold .theme-color-dot { background: linear-gradient(135deg, #ffe270, #ff9f56) !important; }\r\n button.theme-green { background: #143528 !important; } button.theme-green .theme-color-dot { background: linear-gradient(135deg, #72f5a0, #41cbd0) !important; }\r\n .custom-color-row { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; padding: 10px; background: #0c1a36; border: 1px solid rgba(163,220,255,0.2); border-radius: 12px; }\r\n .custom-color-swatch { position: relative; width: 42px; height: 42px; overflow: hidden; cursor: pointer; background: linear-gradient(135deg, var(--accent), var(--accent-2)); border: 2px solid rgba(255,255,255,0.35); border-radius: 12px; }\r\n #custom-color-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }\r\n .custom-color-title { margin: 0 0 3px; color: #f3f9ff; font-size: 12px; font-weight: 700; }\r\n .custom-color-value { margin: 0; color: #738eac; font-size: 10px; font-family: Consolas, monospace; }\r\n .style-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }\r\n .hover-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }\r\n .cursor-mode-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }\r\n button.style-choice, button.hover-choice, button.cursor-mode-choice {\r\n min-height: 35px !important; padding: 7px 4px !important; color: #f3f9ff !important; font-size: 10px !important;\r\n font-weight: 700 !important; cursor: pointer; background: #122445 !important; border: 1px solid rgba(163,220,255,0.2) !important;\r\n border-radius: 8px !important; box-shadow: none !important;\r\n }\r\n button.style-choice { min-height: 52px !important; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }\r\n button.style-choice small, button.cursor-mode-choice small { display: block; color: #738eac; font-size: 8px; font-weight: 600; text-transform: uppercase; }\r\n button.cursor-mode-choice { min-height: 48px !important; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }\r\n button.style-choice.active, button.hover-choice.active, button.cursor-mode-choice.active {\r\n color: #04111b !important; background: linear-gradient(135deg, rgba(var(--accent-rgb),0.94), rgba(var(--accent-2-rgb),0.94)) !important;\r\n border-color: rgba(255,255,255,0.55) !important;\r\n }\r\n button.style-choice.active small, button.cursor-mode-choice.active small { color: rgba(4,17,27,0.72); }\r\n .cursor-mode-hint { margin: 8px 0 0; color: #738eac; font-size: 10px; line-height: 1.4; }\r\n .wallpaper-controls { display: grid; grid-template-columns: 1fr auto; gap: 8px; }\r\n .wallpaper-upload, .wallpaper-remove {\r\n display: flex; align-items: center; justify-content: center; min-height: 37px; padding: 8px 11px; color: #f3f9ff !important;\r\n font-size: 11px; font-weight: 700; cursor: pointer; background: #122445 !important; border: 1px solid rgba(163,220,255,0.24) !important; border-radius: 9px !important;\r\n }\r\n .wallpaper-remove { color: #738eac !important; }\r\n #wallpaper-input { display: none; }\r\n\r\n #jefx-island {\r\n position: fixed; top: 12px; left: calc(50% + 118px); z-index: 999998; width: 148px; height: 38px;\r\n color: var(--text-bright); background: #050b18; border: 1px solid rgba(var(--accent-rgb), 0.4);\r\n border-radius: 999px; box-shadow: 0 12px 30px rgba(0,0,0,0.45); overflow: hidden;\r\n transition: width 0.42s cubic-bezier(0.22,1,0.36,1), height 0.42s cubic-bezier(0.22,1,0.36,1), border-radius 0.3s ease, left 0.3s ease, top 0.3s ease, transform 0.3s ease;\r\n }\r\n #jefx-island.open {\r\n width: min(480px, calc(100vw - 24px));\r\n height: min(720px, calc(100vh - 60px));\r\n border-radius: 22px; left: 50%; transform: translateX(-50%); top: 58px;\r\n }\r\n #jefx-island.media-compact:not(.open) { width: 220px; }\r\n #jefx-island .island-collapsed {\r\n display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 100%;\r\n padding: 0 12px; border: 0; background: transparent; color: inherit;\r\n font: 700 11px\/1 var(--font-main); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer;\r\n }\r\n #jefx-island.open .island-collapsed { display: none; }\r\n #jefx-island .island-live { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }\r\n #jefx-island .island-media-mini { display: none; align-items: center; gap: 8px; min-width: 0; }\r\n #jefx-island.media-compact:not(.open) .island-media-mini { display: flex; }\r\n #jefx-island.media-compact:not(.open) .island-label-default { display: none; }\r\n .mini-eq { display: flex; align-items: flex-end; gap: 2px; height: 12px; }\r\n .mini-eq i { width: 2px; height: 100%; background: var(--accent); border-radius: 2px; animation: eq-bar 0.8s ease-in-out infinite; }\r\n .mini-eq i:nth-child(1) { height: 40%; } .mini-eq i:nth-child(2) { height: 80%; animation-delay: 0.1s; }\r\n .mini-eq i:nth-child(3) { height: 55%; animation-delay: 0.2s; } .mini-eq i:nth-child(4) { height: 95%; animation-delay: 0.15s; }\r\n body.is-muted .mini-eq i { animation: none; opacity: 0.35; }\r\n .mini-track { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; letter-spacing: 0; text-transform: none; color: var(--text-bright); }\r\n #jefx-island .island-expanded { display: none; flex-direction: column; width: 100%; height: 100%; min-height: 0; }\r\n #jefx-island.open .island-expanded { display: flex; }\r\n .island-topbar { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 10px 10px 0; }\r\n .island-tabs { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }\r\n .island-tabs button {\r\n min-height: 34px !important; border-radius: 10px !important; border: 1px solid rgba(163,220,255,0.2) !important;\r\n background: #102039 !important; color: var(--text-bright) !important; font-size: 11px !important;\r\n font-weight: 800 !important; cursor: pointer; box-shadow: none !important;\r\n }\r\n .island-tabs button.active {\r\n background: linear-gradient(135deg, rgba(var(--accent-rgb),0.95), rgba(var(--accent-2-rgb),0.95)) !important; color: #04111b !important;\r\n }\r\n .island-close-all {\r\n width: 34px; height: 34px; border-radius: 10px; border: 1px solid rgba(163,220,255,0.2);\r\n background: #102039; color: var(--text-bright); font-size: 14px; font-weight: 900; cursor: pointer;\r\n }\r\n .island-pane { display: none; flex: 1; min-height: 0; flex-direction: column; }\r\n .island-pane.active { display: flex; }\r\n .island-chrome {\r\n display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center;\r\n padding: 10px; border-bottom: 1px solid rgba(177,222,255,0.12); background: #091428;\r\n }\r\n .island-traffic { display: flex; gap: 6px; padding-left: 4px; }\r\n .island-traffic span { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.18); }\r\n .island-traffic .c-close { background: #ff5f57; cursor: pointer; }\r\n .island-traffic .c-min { background: #febc2e; }\r\n .island-traffic .c-max { background: #28c840; }\r\n .island-url-wrap {\r\n display: flex; align-items: center; gap: 6px; min-width: 0; height: 32px; padding: 0 10px;\r\n background: #07101f; border: 1px solid rgba(156,216,255,0.2); border-radius: 999px; font-size: 11px;\r\n }\r\n .island-url { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-bright); font-family: Consolas, monospace; font-size: 10px; }\r\n .island-actions { display: flex; gap: 4px; }\r\n .island-actions button {\r\n width: 30px !important; min-height: 30px !important; padding: 0 !important; display: grid !important; place-items: center;\r\n color: var(--text-bright) !important; background: #122445 !important; border: 1px solid rgba(163,220,255,0.2) !important;\r\n border-radius: 8px !important; box-shadow: none !important; cursor: pointer;\r\n }\r\n .island-frame-shell { position: relative; flex: 1; min-height: 0; background: #060d1c; }\r\n #jefx-island-frame { width: 100%; height: 100%; border: 0; background: #0b1220; }\r\n .island-hint { padding: 8px 12px; color: var(--text-muted); font-size: 10px; text-align: center; border-top: 1px solid rgba(177,222,255,0.1); }\r\n\r\n \/* MEDIA \u2014 no chrome; bigger video *\/\r\n .media-pane { padding: 0; min-height: 0; }\r\n .media-body {\r\n display: flex; flex-direction: column; gap: 10px; padding: 12px 12px 14px;\r\n flex: 1; min-height: 0; overflow: auto;\r\n }\r\n .media-stage {\r\n position: relative;\r\n width: 100%;\r\n flex: 1 1 auto;\r\n min-height: 260px;\r\n aspect-ratio: 16 \/ 10;\r\n border-radius: 16px;\r\n overflow: hidden;\r\n background: #101b36;\r\n border: 1px solid rgba(177,222,255,0.14);\r\n display: grid;\r\n place-items: center;\r\n }\r\n .media-stage > img,\r\n .media-stage > video,\r\n .media-stage > .placeholder { grid-area: 1 \/ 1; }\r\n .media-stage img {\r\n width: 100%; height: 100%; object-fit: cover; display: none; border: 0;\r\n }\r\n .media-stage video {\r\n width: 100%; height: 100%; display: none; border: 0; background: #000; object-fit: contain;\r\n }\r\n .media-stage.mode-video video { display: block !important; z-index: 2; }\r\n .media-stage.mode-audio img.has { display: block !important; z-index: 1; }\r\n .media-stage .placeholder {\r\n color: var(--text-muted); font-size: 12px; font-weight: 700;\r\n letter-spacing: 0.08em; text-transform: uppercase; z-index: 0; pointer-events: none;\r\n }\r\n .media-stage.mode-video .placeholder,\r\n .media-stage.mode-audio.has-art .placeholder { display: none !important; }\r\n .media-eq-large {\r\n position: absolute; left: 12px; bottom: 12px; z-index: 3;\r\n display: none; align-items: flex-end; gap: 3px; height: 18px; pointer-events: none;\r\n }\r\n .media-stage.mode-audio .media-eq-large { display: flex; }\r\n .media-eq-large i { width: 3px; background: var(--accent); border-radius: 2px; animation: eq-bar 0.75s ease-in-out infinite; }\r\n .media-eq-large i:nth-child(1){height:40%;} .media-eq-large i:nth-child(2){height:80%; animation-delay:.1s}\r\n .media-eq-large i:nth-child(3){height:55%; animation-delay:.2s} .media-eq-large i:nth-child(4){height:95%; animation-delay:.05s}\r\n .media-eq-large i:nth-child(5){height:60%; animation-delay:.15s}\r\n body.is-muted .media-eq-large i, #jefx-island.media-paused .media-eq-large i { animation: none; opacity: 0.3; }\r\n .media-meta h3 { margin: 0; color: var(--text-bright); font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\r\n .media-meta p { margin: 4px 0 0; color: var(--text-muted); font-size: 12px; }\r\n .media-progress { height: 5px; border-radius: 99px; background: #0d1830; overflow: hidden; border: 1px solid rgba(177,222,255,0.12); cursor: pointer; }\r\n .media-progress > span { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width 0.15s linear; pointer-events: none; }\r\n .media-times { display: flex; justify-content: space-between; color: var(--text-muted); font-size: 10px; font-variant-numeric: tabular-nums; }\r\n .media-controls { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }\r\n .media-controls-extra { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }\r\n .media-controls button, .media-controls-extra button {\r\n min-height: 44px !important; border-radius: 12px !important; cursor: pointer;\r\n border: 1px solid rgba(163,220,255,0.2) !important; background: #122445 !important;\r\n color: var(--text-bright) !important; font-size: 16px !important; font-weight: 900 !important; box-shadow: none !important;\r\n }\r\n .media-controls-extra button { min-height: 38px !important; font-size: 12px !important; font-weight: 800 !important; }\r\n .media-controls-extra button:disabled { opacity: 0.45; cursor: not-allowed; }\r\n .media-controls-extra button.on { border-color: rgba(var(--accent-rgb), 0.7) !important; box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.25) inset !important; }\r\n .media-controls button#media-play {\r\n background: linear-gradient(135deg, rgba(var(--accent-rgb),0.95), rgba(var(--accent-2-rgb),0.95)) !important; color: #04111b !important;\r\n }\r\n .media-file-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }\r\n .media-file-row label, .media-file-row button {\r\n min-height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 10px;\r\n border: 1px solid rgba(163,220,255,0.2); background: #122445; color: var(--text-bright); font-size: 11px; font-weight: 700; cursor: pointer;\r\n }\r\n #media-file { display: none; }\r\n #media-audio { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }\r\n #media-video:fullscreen, #media-stage:fullscreen { background: #000; width: 100%; height: 100%; }\r\n #media-stage:fullscreen video { width: 100%; height: 100%; object-fit: contain; display: block !important; }\r\n\r\n \/* TOOLS \u2014 no chrome *\/\r\n .tools-pane { padding: 0; }\r\n .tools-body { display: flex; flex-direction: column; gap: 10px; padding: 12px; flex: 1; min-height: 0; overflow: auto; }\r\n .tool-card { padding: 12px; background: #0a152c; border: 1px solid rgba(163,220,255,0.14); border-radius: 14px; }\r\n .tool-card h3 { margin: 0 0 8px; color: var(--text-bright); font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }\r\n .tool-card textarea, .tool-card input[type=\"text\"], .tool-card input[type=\"url\"], .tool-card input[type=\"number\"] {\r\n width: 100%; min-height: 36px !important; padding: 8px 10px !important; color: var(--text-bright) !important;\r\n background: #07101f !important; border: 1px solid rgba(156,216,255,0.2) !important; border-radius: 10px !important;\r\n font: 12px\/1.4 var(--font-main) !important;\r\n }\r\n .tool-card textarea { min-height: 90px !important; resize: vertical; }\r\n .tool-row { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center; }\r\n .tool-row.triple { grid-template-columns: 1fr 1fr auto; }\r\n .tool-btns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }\r\n .tool-btns button, .tool-card > button {\r\n min-height: 32px !important; padding: 0 12px !important; border-radius: 10px !important;\r\n border: 1px solid rgba(163,220,255,0.2) !important; background: #122445 !important;\r\n color: var(--text-bright) !important; font-size: 11px !important; font-weight: 800 !important; cursor: pointer; box-shadow: none !important;\r\n }\r\n .tool-btns button.primary, .tool-card > button.primary {\r\n background: linear-gradient(135deg, rgba(var(--accent-rgb),0.95), rgba(var(--accent-2-rgb),0.95)) !important;\r\n color: #04111b !important; border-color: rgba(255,255,255,0.35) !important;\r\n }\r\n .timer-display { font-variant-numeric: tabular-nums; font-size: 28px; font-weight: 900; color: var(--text-bright); text-align: center; margin: 4px 0 8px; }\r\n .tool-hint { margin-top: 6px; color: var(--text-muted); font-size: 10px; line-height: 1.35; }\r\n .pin-list { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }\r\n .pin-list li {\r\n display: grid; grid-template-columns: 1fr auto auto; gap: 6px; align-items: center;\r\n padding: 8px 10px; background: #07101f; border: 1px solid rgba(163,220,255,0.12); border-radius: 10px;\r\n }\r\n .pin-list li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-bright); font-size: 11px; font-weight: 700; }\r\n .pin-list button {\r\n min-height: 28px !important; padding: 0 8px !important; border-radius: 8px !important;\r\n border: 1px solid rgba(163,220,255,0.18) !important; background: #122445 !important;\r\n color: var(--text-bright) !important; font-size: 10px !important; font-weight: 800 !important; cursor: pointer; box-shadow: none !important;\r\n }\r\n @keyframes eq-bar { 0%,100% { transform: scaleY(0.45); } 50% { transform: scaleY(1); } }\r\n\r\n #wrap {\r\n display: grid; grid-template-columns: 250px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);\r\n gap: var(--wrap-gap); width: min(1600px, calc(100% - 32px)); min-height: calc(100vh - 32px);\r\n margin: var(--page-pad) auto; padding-top: 54px;\r\n }\r\n #top-menu, .top-menu, .d-header, header {\r\n grid-column: 1 \/ -1; min-height: 66px; padding: 10px 18px; color: var(--text-bright) !important;\r\n background: var(--glass-strong) !important; border: 1px solid var(--border) !important; border-radius: var(--panel-radius);\r\n box-shadow: var(--shadow) !important; backdrop-filter: blur(var(--panel-blur)) saturate(var(--panel-sat)) !important;\r\n -webkit-backdrop-filter: blur(var(--panel-blur)) saturate(var(--panel-sat)) !important;\r\n }\r\n #usermenu, .usermenu, .user-menu { position: fixed; top: 26px; right: 34px; z-index: 999990; }\r\n #nav, nav, .sidebar, .navigation-container {\r\n grid-column: 1; grid-row: 2; min-width: 0; padding: 16px; color: var(--text) !important;\r\n background: var(--glass) !important; border: 1px solid var(--border) !important; border-radius: var(--panel-radius);\r\n box-shadow: var(--shadow) !important; backdrop-filter: blur(var(--panel-blur)) saturate(var(--panel-sat)) !important;\r\n -webkit-backdrop-filter: blur(var(--panel-blur)) saturate(var(--panel-sat)) !important;\r\n }\r\n #main-outlet, .main-outlet, main, #content, .main-content {\r\n grid-column: 2; grid-row: 2; min-width: 0; padding: 20px; color: var(--text) !important;\r\n background: var(--glass) !important; border: 1px solid var(--border) !important; border-radius: var(--panel-radius);\r\n box-shadow: var(--shadow) !important; backdrop-filter: blur(var(--panel-blur)) saturate(var(--panel-sat)) !important;\r\n -webkit-backdrop-filter: blur(var(--panel-blur)) saturate(var(--panel-sat)) !important;\r\n }\r\n #nav a, nav a, .sidebar a { color: var(--text) !important; border: 1px solid transparent; border-radius: 10px; }\r\n #nav a:hover, nav a:hover, .sidebar a:hover, #nav a.active, nav a.active, .sidebar a.active {\r\n color: var(--text-bright) !important; background: var(--glass-hover) !important; border-color: rgba(var(--accent-rgb), 0.23);\r\n }\r\n .topic-list, .category-list, .categories-list, .latest-topic-list, .topic-list-container, .topic-body, .topic-post, .post, .cooked,\r\n .user-card, .popup-menu, .menu-panel, .select-kit-body, .modal, .modal-body, .dropdown-menu, .chat-container {\r\n color: var(--text) !important; background: rgba(12,30,63,0.18) !important; border: 1px solid rgba(171,222,255,0.15) !important;\r\n border-radius: var(--inner-radius); box-shadow: 0 10px 28px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.05) !important;\r\n backdrop-filter: blur(17px) saturate(135%) !important; -webkit-backdrop-filter: blur(17px) saturate(135%) !important;\r\n }\r\n .topic-list-item:hover, .latest-topic-list-item:hover, .category-list-item:hover, .topic-list tr:hover, .category-list tr:hover {\r\n background: var(--glass-hover) !important; box-shadow: inset 3px 0 var(--accent) !important;\r\n }\r\n .topic-list a.title, .latest-topic-list-item a.title, .category-title, h1,h2,h3,h4 { color: var(--text-bright) !important; font-family: var(--font-display); }\r\n button:not(.appearance-toggle):not(.theme-choice):not(.style-choice):not(.hover-choice):not(.cursor-mode-choice):not(.wallpaper-remove):not(.island-collapsed):not(.island-actions button):not(.island-tabs button):not(.island-close-all):not(.media-controls button):not(.media-controls-extra button):not(#media-pip):not(#media-fs):not(.sb-head):not(.sb-actions button):not(.sb-goal-row button):not(.sb-switch):not(.tool-btns button):not(.tool-card > button):not(.media-file-row label):not(.media-file-row button):not(.pin-list button):not(.sb-goal-list button),\r\n .btn, .button, .btn-primary {\r\n color: var(--btn-text) !important; border: 1px solid rgba(var(--accent-rgb),0.68) !important; border-radius: var(--btn-radius) !important;\r\n background: linear-gradient(135deg, rgba(var(--accent-rgb),0.94), rgba(var(--accent-2-rgb),0.94)) !important;\r\n box-shadow: 0 7px 18px rgba(0,0,0,0.19), inset 0 1px 0 rgba(255,255,255,0.28) !important;\r\n }\r\n input:not(#wallpaper-input):not(#custom-color-input):not(#media-file):not(.sb-goal-row input):not(.tool-card input),\r\n textarea:not(.tool-card textarea), select {\r\n min-height: 38px; color: var(--text-bright) !important; background: rgba(3,12,31,0.35) !important;\r\n border: 1px solid rgba(156,216,255,0.24) !important; border-radius: var(--btn-radius) !important;\r\n }\r\n input:focus, textarea:focus, select:focus { outline: none !important; border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.12) !important; }\r\n\r\n body[data-layout-style=\"glass\"] {\r\n --text:#b9cce3; --text-muted:#738eac; --text-bright:#f3f9ff; --glass: rgba(9,24,52,0.18); --glass-strong: rgba(6,17,40,0.28);\r\n --glass-hover: rgba(92,167,236,0.14); --border: rgba(177,222,255,0.16); --btn-text:#04111b;\r\n --panel-radius: 22px; --panel-blur: 25px; --panel-sat: 145%; --inner-radius: 14px; --btn-radius: 9px;\r\n }\r\n body[data-layout-style=\"neon\"] {\r\n --text:#c8e7ff; --text-muted:#6f9cc4; --text-bright:#f7ffff; --glass:#050d22; --glass-strong:#020816;\r\n --glass-hover: rgba(var(--accent-rgb),0.14); --border: rgba(var(--accent-rgb),0.6); --btn-text:#04111b;\r\n --panel-radius: 4px; --panel-blur: 0; --inner-radius: 2px; --btn-radius: 2px; --font-display: Impact, Haettenschweiler, sans-serif;\r\n background:#000208;\r\n background-image: linear-gradient(rgba(var(--accent-rgb),0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--accent-rgb),0.07) 1px, transparent 1px), linear-gradient(160deg,#000208,#050d22 50%,#020510);\r\n background-size: 36px 36px, 36px 36px, auto;\r\n }\r\n body[data-layout-style=\"neon\"] #top-menu, body[data-layout-style=\"neon\"] header, body[data-layout-style=\"neon\"] #nav, body[data-layout-style=\"neon\"] nav, body[data-layout-style=\"neon\"] #main-outlet, body[data-layout-style=\"neon\"] main { backdrop-filter: none !important; border-width: 2px !important; }\r\n body[data-layout-style=\"solid\"] {\r\n --text:#c2d4ea; --text-muted:#7a92ad; --text-bright:#f5f9ff; --glass:#0b1730; --glass-strong:#0e1d3a;\r\n --glass-hover: rgba(var(--accent-rgb),0.12); --border: rgba(140,180,220,0.18); --btn-text:#04111b;\r\n --panel-radius: 14px; --panel-blur: 0; --inner-radius: 10px; --btn-radius: 8px; background: #060b16; background-image: linear-gradient(180deg,#08101f,#050912);\r\n }\r\n body[data-layout-style=\"solid\"] #top-menu, body[data-layout-style=\"solid\"] header, body[data-layout-style=\"solid\"] #nav, body[data-layout-style=\"solid\"] nav, body[data-layout-style=\"solid\"] #main-outlet, body[data-layout-style=\"solid\"] main { backdrop-filter: none !important; }\r\n body[data-layout-style=\"minimal\"] {\r\n --text:#9eb0c8; --text-muted:#6b7f98; --text-bright:#e8eef8; --glass: rgba(255,255,255,0.03); --glass-strong: rgba(255,255,255,0.05);\r\n --glass-hover: rgba(255,255,255,0.06); --border: rgba(255,255,255,0.08); --shadow: none; --btn-text:#04111b;\r\n --panel-radius: 0; --panel-blur: 0; --inner-radius: 0; --btn-radius: 0; --wrap-gap: 0; background: #070b14;\r\n }\r\n body[data-layout-style=\"minimal\"] #top-menu, body[data-layout-style=\"minimal\"] header, body[data-layout-style=\"minimal\"] #nav, body[data-layout-style=\"minimal\"] nav, body[data-layout-style=\"minimal\"] #main-outlet, body[data-layout-style=\"minimal\"] main { backdrop-filter: none !important; box-shadow: none !important; border-radius: 0 !important; }\r\n body[data-layout-style=\"paper\"] {\r\n --text:#d7c7a8; --text-muted:#9a8a6e; --text-bright:#f3e6c8; --glass:#17140f; --glass-strong:#1d1913;\r\n --glass-hover: rgba(var(--accent-rgb),0.12); --border: rgba(214,196,160,0.16); --btn-text:#120f0a;\r\n --panel-radius: 4px; --panel-blur: 0; --inner-radius: 3px; --btn-radius: 3px; --font-main: Georgia, serif; --font-display: Georgia, serif;\r\n background: #0c0a08; background-image: radial-gradient(circle at 18% 0%, rgba(120,90,40,0.16), transparent 26rem), linear-gradient(180deg,#12100c,#0a0907);\r\n }\r\n body[data-layout-style=\"paper\"] #top-menu, body[data-layout-style=\"paper\"] header, body[data-layout-style=\"paper\"] #nav, body[data-layout-style=\"paper\"] nav, body[data-layout-style=\"paper\"] #main-outlet, body[data-layout-style=\"paper\"] main { backdrop-filter: none !important; border-top: 3px solid var(--accent) !important; }\r\n body[data-layout-style=\"terminal\"] {\r\n --text:#7dffa3; --text-muted:#3d9a5f; --text-bright:#b6ffd0; --glass: rgba(0,20,8,0.92); --glass-strong: rgba(0,28,12,0.96);\r\n --glass-hover: rgba(80,255,140,0.1); --border: rgba(90,255,150,0.35); --panel-radius: 0; --panel-blur: 0; --inner-radius: 0; --btn-radius: 0;\r\n --btn-text:#001806; --font-main: Consolas, monospace; --font-display: Consolas, monospace; background:#000800;\r\n background-image: linear-gradient(rgba(0,255,80,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,255,80,0.03) 1px, transparent 1px), radial-gradient(circle at center, #031a0a, #000500 70%);\r\n background-size: 28px 28px, 28px 28px, cover;\r\n }\r\n body[data-layout-style=\"terminal\"]::before {\r\n content:\"\"; position:fixed; inset:0; z-index:999990; pointer-events:none;\r\n background: repeating-linear-gradient(0deg, rgba(0,0,0,0.12) 0 1px, transparent 2px 4px); opacity:0.35;\r\n }\r\n body[data-layout-style=\"terminal\"] #top-menu, body[data-layout-style=\"terminal\"] header, body[data-layout-style=\"terminal\"] #nav, body[data-layout-style=\"terminal\"] nav, body[data-layout-style=\"terminal\"] #main-outlet, body[data-layout-style=\"terminal\"] main { backdrop-filter:none !important; border:1px solid rgba(90,255,150,0.4) !important; }\r\n body[data-layout-style=\"brutal\"] {\r\n --text:#e8e8e8; --text-muted:#9a9a9a; --text-bright:#ffffff; --glass:#141414; --glass-strong:#1a1a1a; --glass-hover:#2a2a2a;\r\n --border:#f0f0f0; --shadow: 6px 6px 0 #000; --btn-text:#000; --panel-radius: 0; --panel-blur: 0; --inner-radius: 0; --btn-radius: 0;\r\n --font-main: Arial Black, Arial, sans-serif; --font-display: Impact, sans-serif; background: #0a0a0a;\r\n background-image: repeating-linear-gradient(-45deg, transparent, transparent 12px, rgba(255,255,255,0.02) 12px, rgba(255,255,255,0.02) 24px), linear-gradient(180deg,#111,#080808);\r\n }\r\n body[data-layout-style=\"brutal\"] #top-menu, body[data-layout-style=\"brutal\"] header, body[data-layout-style=\"brutal\"] #nav, body[data-layout-style=\"brutal\"] nav, body[data-layout-style=\"brutal\"] #main-outlet, body[data-layout-style=\"brutal\"] main { backdrop-filter:none !important; border:3px solid #f0f0f0 !important; box-shadow: 8px 8px 0 #000 !important; }\r\n body[data-layout-style=\"brutal\"] h1, body[data-layout-style=\"brutal\"] .topic-list a.title { text-transform:uppercase; }\r\n body[data-layout-style=\"sunset\"] {\r\n --text:#e7c7d2; --text-muted:#b08798; --text-bright:#ffe8f0; --glass: rgba(28,14,24,0.82); --glass-strong: rgba(36,16,30,0.92);\r\n --glass-hover: rgba(255,120,140,0.14); --border: rgba(255,170,190,0.18); --btn-text:#2a1018;\r\n --panel-radius: 28px; --panel-blur: 18px; --inner-radius: 20px; --btn-radius: 999px; background: #120816;\r\n background-image: radial-gradient(circle at 15% 18%, rgba(255,120,90,0.22), transparent 26rem), radial-gradient(circle at 85% 12%, rgba(255,70,140,0.18), transparent 24rem), linear-gradient(160deg, #1a0c14, #2a1020 42%, #14081c);\r\n }\r\n body[data-layout-style=\"cyber\"] {\r\n --text:#9ef9ff; --text-muted:#4f8ea3; --text-bright:#e9ffff; --glass:#001822; --glass-strong:#002433;\r\n --glass-hover: rgba(0,255,220,0.1); --border:#00ffd0; --shadow: 0 0 0 1px #00ffd0, 6px 6px 0 #003844;\r\n --panel-radius: 0; --panel-blur: 0; --inner-radius: 0; --btn-radius: 0; --btn-text:#001820; --font-display: Impact, sans-serif; background:#000b14;\r\n background-image: linear-gradient(rgba(0,255,220,0.05) 2px, transparent 2px), linear-gradient(90deg, rgba(0,255,220,0.05) 2px, transparent 2px), linear-gradient(#000b14,#001422);\r\n background-size: 48px 48px, 48px 48px, auto;\r\n }\r\n body[data-layout-style=\"cyber\"] #top-menu, body[data-layout-style=\"cyber\"] header, body[data-layout-style=\"cyber\"] #nav, body[data-layout-style=\"cyber\"] nav, body[data-layout-style=\"cyber\"] #main-outlet, body[data-layout-style=\"cyber\"] main {\r\n backdrop-filter:none !important; border:2px solid #00ffd0 !important;\r\n clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));\r\n }\r\n body[data-layout-style=\"ocean\"] {\r\n --text:#c8e9ff; --text-muted:#6f9fbe; --text-bright:#f2fbff; --glass:#0a2f48; --glass-strong:#0c3a58;\r\n --glass-hover: rgba(80,190,255,0.14); --border: rgba(120,210,255,0.22); --btn-text:#042033;\r\n --panel-radius: 28px 10px; --panel-blur: 0; --inner-radius: 20px 8px; --btn-radius: 999px; background:#041525;\r\n background-image: radial-gradient(circle at 18% 20%, rgba(40,170,255,0.22), transparent 24rem), linear-gradient(180deg,#06213a,#041525);\r\n }\r\n body[data-layout-style=\"ocean\"] #top-menu, body[data-layout-style=\"ocean\"] header, body[data-layout-style=\"ocean\"] #nav, body[data-layout-style=\"ocean\"] nav, body[data-layout-style=\"ocean\"] #main-outlet, body[data-layout-style=\"ocean\"] main { backdrop-filter:none !important; }\r\n body[data-layout-style=\"ember\"] {\r\n --text:#ffe0c8; --text-muted:#c48a6a; --text-bright:#fff5ec; --glass:#3a1208; --glass-strong:#4a180a;\r\n --glass-hover: rgba(255,100,40,0.14); --border:#ff6a2a; --panel-radius: 8px; --panel-blur: 0; --inner-radius: 6px; --btn-radius: 6px;\r\n --btn-text:#2a1008; --font-display: Impact, sans-serif; background:#1a0602;\r\n background-image: radial-gradient(circle at 50% 120%, #ff4d00 0%, transparent 40%), linear-gradient(180deg,#2a0c04,#120301);\r\n }\r\n body[data-layout-style=\"ember\"] #top-menu, body[data-layout-style=\"ember\"] header, body[data-layout-style=\"ember\"] #nav, body[data-layout-style=\"ember\"] nav, body[data-layout-style=\"ember\"] #main-outlet, body[data-layout-style=\"ember\"] main { backdrop-filter:none !important; border-bottom: 3px solid #ff6a2a !important; }\r\n body[data-layout-style=\"ice\"] {\r\n --text:#d9eefc; --text-muted:#7ea8c5; --text-bright:#ffffff; --glass: rgba(120,180,220,0.08); --glass-strong: rgba(140,190,230,0.12);\r\n --glass-hover: rgba(180,230,255,0.12); --border: rgba(180,220,255,0.22); --btn-text:#0d2433;\r\n --panel-radius: 18px; --panel-blur: 18px; --inner-radius: 12px; --btn-radius: 12px; background:#0a1724;\r\n background-image: radial-gradient(circle at 30% 20%, rgba(180,230,255,0.14), transparent 22rem), linear-gradient(180deg,#0d1c2c,#081420);\r\n }\r\n body[data-layout-style=\"vapor\"] {\r\n --text:#f3d6ff; --text-muted:#b48ec8; --text-bright:#fff5ff; --glass: rgba(50,20,70,0.55); --glass-strong: rgba(60,24,84,0.72);\r\n --glass-hover: rgba(255,120,220,0.14); --border: rgba(255,170,255,0.22); --btn-text:#2a1038;\r\n --panel-radius: 24px 4px; --panel-blur: 14px; --inner-radius: 18px 4px; --btn-radius: 999px; background:#16061f;\r\n background-image: radial-gradient(circle at 15% 20%, rgba(255,110,210,0.18), transparent 20rem), radial-gradient(circle at 85% 15%, rgba(110,180,255,0.16), transparent 18rem), linear-gradient(160deg,#1a0824,#2a1040 45%,#12061c);\r\n }\r\n body[data-layout-style=\"carbon\"] {\r\n --text:#d5d9e0; --text-muted:#8b93a3; --text-bright:#fff; --glass:#171a21; --glass-strong:#1d222c; --glass-hover:#2a3140;\r\n --border: rgba(255,255,255,0.1); --panel-radius: 10px; --panel-blur: 0; --inner-radius: 8px; --btn-radius: 6px; --btn-text:#0c0e12; background:#0c0e12;\r\n background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 4px), linear-gradient(180deg,#141820,#0c0e12);\r\n }\r\n body[data-layout-style=\"carbon\"] #top-menu, body[data-layout-style=\"carbon\"] header, body[data-layout-style=\"carbon\"] #nav, body[data-layout-style=\"carbon\"] nav, body[data-layout-style=\"carbon\"] #main-outlet, body[data-layout-style=\"carbon\"] main { backdrop-filter:none !important; }\r\n body.focus-mode #wrap { filter: brightness(0.72) saturate(0.9); }\r\n body.focus-mode #jefx-island, body.focus-mode #jefx-statusbar, body.focus-mode #jefx-appearance { filter: none; }\r\n\r\n #jefx-loader { position: fixed; inset: 0; z-index: 1000000; display: grid; place-items: center; background: #030714; transition: opacity 0.55s ease, visibility 0.55s ease; }\r\n #jefx-loader.is-hidden { visibility: hidden; opacity: 0; pointer-events: none; }\r\n .loader-card { width: min(420px,100%); padding: 34px 28px 28px; text-align: center; background:#091a38; border:1px solid rgba(157,225,255,0.32); border-radius: 28px; box-shadow: 0 25px 65px rgba(0,0,0,0.4); }\r\n .loader-visual { width: 84px; height: 84px; margin: 0 auto 18px; border-radius: 50%; border: 2px solid var(--accent); border-top-color: var(--accent-2); animation: loader-spin 1s linear infinite; }\r\n .loader-title { margin: 0; color: #f3f9ff; font-size: 22px; }\r\n .loader-sub { margin: 8px 0 0; color: #738eac; font-size: 12px; }\r\n .loader-progress { height: 4px; margin-top: 22px; overflow: hidden; background: rgba(255,255,255,0.1); border-radius: 99px; }\r\n .loader-progress > span { display:block; height:100%; width:45%; border-radius:inherit; background: linear-gradient(90deg, var(--accent), var(--accent-2), #ef8dff); animation: progress-move 1.45s ease-in-out infinite; }\r\n body[data-hover-effect] a, body[data-hover-effect] button, body[data-hover-effect] .btn, body[data-hover-effect] .button, body[data-hover-effect] .topic-list-item { transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, border-color 0.2s ease !important; }\r\n body[data-hover-effect=\"glow\"] a:hover, body[data-hover-effect=\"glow\"] button:hover { box-shadow: 0 0 18px rgba(var(--accent-rgb),0.25) !important; }\r\n body[data-hover-effect=\"lift\"] a:hover, body[data-hover-effect=\"lift\"] button:hover, body[data-hover-effect=\"lift\"] .topic-list-item:hover { transform: translateY(-2px) !important; }\r\n body[data-hover-effect=\"scale\"] a:hover, body[data-hover-effect=\"scale\"] button:hover { transform: scale(1.025) !important; }\r\n body[data-hover-effect=\"border\"] a:hover, body[data-hover-effect=\"border\"] button:hover { border-color: var(--accent) !important; }\r\n body[data-hover-effect=\"brighten\"] a:hover, body[data-hover-effect=\"brighten\"] button:hover, body[data-hover-effect=\"brighten\"] .topic-list-item:hover { filter: brightness(1.12); }\r\n body[data-hover-effect=\"pulse\"] a:hover, body[data-hover-effect=\"pulse\"] button:hover { animation: hover-pulse 0.8s ease-in-out infinite alternate; }\r\n @keyframes loader-spin { to { transform: rotate(360deg); } }\r\n @keyframes progress-move { from { transform: translateX(-130%); } to { transform: translateX(260%); } }\r\n @keyframes hover-pulse { from { box-shadow: 0 0 7px rgba(var(--accent-rgb),0.12); } to { box-shadow: 0 0 20px rgba(var(--accent-rgb),0.35); } }\r\n @media (max-width: 900px) {\r\n #jefx-statusbar { max-width: calc(100vw - 24px); } #jefx-statusbar .sb-tz-chip { display: none; }\r\n #jefx-island { left: auto; right: 12px; } #jefx-island.open { left: 50%; right: auto; }\r\n #wrap { display: block; width: calc(100% - 20px); margin: 10px auto; padding-top: 100px; }\r\n #top-menu, header, #nav, nav, #main-outlet, main { margin-bottom: 10px; }\r\n .media-stage { min-height: 200px; }\r\n }\r\n @media (prefers-reduced-motion: reduce) {\r\n *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }\r\n body[data-layout-style=\"terminal\"]::before { display: none; }\r\n }\r\n @media (pointer: coarse) {\r\n body.has-style-cursor #jefx-cursor { display: none; }\r\n body.has-style-cursor, body.has-style-cursor * { cursor: auto !important; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body data-layout-style=\"glass\" class=\"has-style-cursor\">\r\n <div id=\"jefx-loader\">\r\n <div class=\"loader-card\">\r\n <div class=\"loader-visual\"><\/div>\r\n <h1 class=\"loader-title\">Loading forum<\/h1>\r\n <p class=\"loader-sub\">Preparing Theme 3.0<\/p>\r\n <div class=\"loader-progress\"><span><\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"jefx-cursor\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 64 64\">\r\n <g class=\"layer layer-glass\"><path d=\"M18 8c10 12 26 24 26 36a14 14 0 0 1-28 0C16 32 12 20 18 8z\" fill=\"rgba(10,30,60,0.92)\" stroke=\"var(--accent)\" stroke-width=\"2.5\"\/><path d=\"M26 18c4 6 10 12 10 18\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2\" opacity=\"0.55\"\/><circle cx=\"30\" cy=\"40\" r=\"3\" fill=\"var(--accent)\"\/><\/g>\r\n <g class=\"layer layer-neon\"><path d=\"M12 8 L44 28 L30 30 L40 52 L20 34 L12 36 Z\" fill=\"#050d22\" stroke=\"var(--accent)\" stroke-width=\"2.5\"\/><path d=\"M20 18 L34 28\" stroke=\"var(--accent-2)\" stroke-width=\"2\"\/><\/g>\r\n <g class=\"layer layer-solid\"><path d=\"M14 10 L42 24 L28 28 L36 48 L22 32 L14 34 Z\" fill=\"#0e1d3a\" stroke=\"var(--accent)\" stroke-width=\"2.5\"\/><rect x=\"24\" y=\"20\" width=\"10\" height=\"3\" rx=\"1\" fill=\"var(--accent-2)\"\/><\/g>\r\n <g class=\"layer layer-minimal\"><path d=\"M32 6 L36 28 L32 58 L28 28 Z\" fill=\"#dfe7f2\" stroke=\"#8ea0b8\" stroke-width=\"1.5\"\/><rect x=\"27\" y=\"26\" width=\"10\" height=\"4\" rx=\"1\" fill=\"#9eb0c8\"\/><\/g>\r\n <g class=\"layer layer-paper\"><path d=\"M18 46 L40 10 L48 16 L26 52 Z\" fill=\"#1f1a14\" stroke=\"#d6c4a0\" stroke-width=\"2\"\/><path d=\"M40 10 L48 16 L44 20 Z\" fill=\"var(--accent)\"\/><path d=\"M22 48 L16 56\" stroke=\"#d6c4a0\" stroke-width=\"2\" stroke-linecap=\"round\"\/><\/g>\r\n <g class=\"layer layer-terminal\"><rect x=\"14\" y=\"12\" width=\"12\" height=\"28\" fill=\"#7dffa3\" stroke=\"#b6ffd0\" stroke-width=\"2\"\/><path d=\"M28 20 H46 M28 28 H40 M28 36 H44\" stroke=\"#7dffa3\" stroke-width=\"2\" stroke-linecap=\"square\"\/><\/g>\r\n <g class=\"layer layer-brutal\"><path d=\"M10 8 H34 V22 H46 L28 44 H10 Z\" fill=\"#111\" stroke=\"#f0f0f0\" stroke-width=\"3\"\/><path d=\"M16 16 H28 V28\" fill=\"none\" stroke=\"var(--accent)\" stroke-width=\"3\"\/><\/g>\r\n <g class=\"layer layer-sunset\"><path d=\"M20 8c14 6 24 20 20 36-12-6-18-18-20-36z\" fill=\"#ff7a9a\" stroke=\"#ffe8f0\" stroke-width=\"2\"\/><circle cx=\"38\" cy=\"22\" r=\"7\" fill=\"#ffe0c0\" stroke=\"#ffb07a\" stroke-width=\"2\"\/><\/g>\r\n <g class=\"layer layer-cyber\"><path d=\"M12 10 L40 28 L28 30 L38 50 L20 34 L12 36 Z\" fill=\"#001822\" stroke=\"#00ffd0\" stroke-width=\"2.5\"\/><path d=\"M24 18 L24 34 M16 26 H32\" stroke=\"#00ffd0\" stroke-width=\"2\"\/><circle cx=\"24\" cy=\"26\" r=\"3\" fill=\"none\" stroke=\"var(--accent)\" stroke-width=\"2\"\/><\/g>\r\n <g class=\"layer layer-ocean\"><path d=\"M14 14c8-8 24-2 28 10 4 12-4 24-16 26\" fill=\"none\" stroke=\"#9ad9ff\" stroke-width=\"4\" stroke-linecap=\"round\"\/><path d=\"M14 14c10 6 16 16 14 28\" fill=\"none\" stroke=\"#2ec5ff\" stroke-width=\"3\" stroke-linecap=\"round\"\/><circle cx=\"18\" cy=\"16\" r=\"4\" fill=\"#e8f7ff\" stroke=\"#7ec8ef\" stroke-width=\"2\"\/><\/g>\r\n <g class=\"layer layer-ember\"><path d=\"M32 8c8 12 16 18 16 30a16 16 0 0 1-32 0c0-8 6-14 10-20 2 8 6 10 8 10-2-8-2-14-2-20z\" fill=\"#ff6a2a\" stroke=\"#ffd0a8\" stroke-width=\"2\"\/><path d=\"M32 28c4 4 6 8 6 12a6 6 0 0 1-12 0c0-3 2-6 4-8 1 3 2 4 3 4-1-3-1-5-1-8z\" fill=\"#ffe27b\"\/><\/g>\r\n <g class=\"layer layer-ice\"><path d=\"M32 6 L48 28 L32 58 L16 28 Z\" fill=\"#e8f5ff\" stroke=\"#7eb6d8\" stroke-width=\"2.5\"\/><path d=\"M32 6 L32 58 M16 28 H48 M24 18 L40 38 M40 18 L24 38\" stroke=\"#9fd0ef\" stroke-width=\"1.5\"\/><\/g>\r\n <g class=\"layer layer-vapor\"><path d=\"M32 6 L38 24 L58 24 L42 36 L48 54 L32 42 L16 54 L22 36 L6 24 L26 24 Z\" fill=\"#ffb8f3\" stroke=\"#7ad7ff\" stroke-width=\"2\"\/><circle cx=\"32\" cy=\"30\" r=\"5\" fill=\"#fff\"\/><\/g>\r\n <g class=\"layer layer-carbon\"><path d=\"M12 10 L40 18 L30 24 L46 42 L34 48 L22 30 L14 34 Z\" fill=\"#171a21\" stroke=\"#d5d9e0\" stroke-width=\"2.5\"\/><path d=\"M20 18 H30\" stroke=\"var(--accent)\" stroke-width=\"2.5\" stroke-linecap=\"round\"\/><rect x=\"24\" y=\"26\" width=\"8\" height=\"8\" fill=\"none\" stroke=\"var(--accent-2)\" stroke-width=\"2\"\/><\/g>\r\n <\/svg>\r\n <\/div>\r\n\r\n <div id=\"jefx-statusbar\" aria-label=\"Status bar\">\r\n <div class=\"sb-ripple\"><\/div>\r\n <button type=\"button\" class=\"sb-head\" id=\"sb-head\" aria-expanded=\"false\" title=\"Expand status\">\r\n <div class=\"sb-timeblock\">\r\n <div class=\"sb-clock\" id=\"sb-clock\">12:00:00 AM<\/div>\r\n <div class=\"sb-date\" id=\"sb-date\">Mon, Jan 1<\/div>\r\n <\/div>\r\n <div class=\"sb-sep\"><\/div>\r\n <div class=\"sb-tz-chip\" id=\"sb-tz\">UTC<\/div>\r\n <div class=\"sb-sep\"><\/div>\r\n <span class=\"sb-chev\" aria-hidden=\"true\">\u25be<\/span>\r\n <\/button>\r\n <div class=\"sb-panel\" id=\"sb-panel\">\r\n <div class=\"sb-grid\">\r\n <div class=\"sb-card\"><h4>Timezone<\/h4><p id=\"sb-tz-full\">\u2014<\/p><\/div>\r\n <div class=\"sb-card\"><h4>Layout<\/h4><p id=\"sb-layout-state\">glass<\/p><\/div>\r\n <div class=\"sb-card\"><h4>Focus<\/h4><p id=\"sb-focus-state\">Off<\/p><\/div>\r\n <div class=\"sb-card\"><h4>Now playing<\/h4><p id=\"sb-now-state\">Nothing<\/p><\/div>\r\n <div class=\"sb-card full\">\r\n <h4>Sound<\/h4>\r\n <div class=\"sb-toggle-row\">\r\n <div class=\"sb-toggle-meta\"><strong>Silent mode<\/strong><span>Mutes island media only<\/span><\/div>\r\n <button type=\"button\" class=\"sb-switch\" id=\"sb-silent\" aria-pressed=\"false\" title=\"Silent mode\"><\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"sb-card full\">\r\n <h4>Notifications<\/h4>\r\n <div class=\"sb-toggle-row\">\r\n <div class=\"sb-toggle-meta\"><strong>Page notifications<\/strong><span id=\"sb-notif-state\">Allowed in theme<\/span><\/div>\r\n <button type=\"button\" class=\"sb-switch warn\" id=\"sb-notif\" aria-pressed=\"false\" title=\"Block notifications\"><\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"sb-card full\">\r\n <h4>Daily goals<\/h4>\r\n <div class=\"sb-goal-row\">\r\n <input id=\"sb-goal-input\" type=\"text\" maxlength=\"80\" placeholder=\"Add a goal\u2026\">\r\n <button type=\"button\" id=\"sb-goal-add\">Add<\/button>\r\n <\/div>\r\n <ul class=\"sb-goal-list\" id=\"sb-goal-list\"><\/ul>\r\n <\/div>\r\n <\/div>\r\n <div class=\"sb-actions\">\r\n <button type=\"button\" id=\"sb-copy-time\">Copy time<\/button>\r\n <button type=\"button\" id=\"sb-focus-toggle\">Focus mode<\/button>\r\n <button type=\"button\" id=\"sb-open-island\">Open Island<\/button>\r\n <button type=\"button\" id=\"sb-open-tools\">Open Tools<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div id=\"jefx-mute-toast\" aria-live=\"polite\"><span id=\"mute-toast-text\">Notifications blocked<\/span><\/div>\r\n\r\n <div id=\"jefx-island\" aria-label=\"Dynamic Island\">\r\n <button class=\"island-collapsed\" type=\"button\" id=\"island-open-btn\" aria-expanded=\"false\">\r\n <span class=\"island-live\" aria-hidden=\"true\"><\/span>\r\n <span class=\"island-label-default\">Island<\/span>\r\n <span class=\"island-media-mini\">\r\n <span class=\"mini-eq\" aria-hidden=\"true\"><i><\/i><i><\/i><i><\/i><i><\/i><\/span>\r\n <span class=\"mini-track\" id=\"mini-track\">Not playing<\/span>\r\n <\/span>\r\n <\/button>\r\n <div class=\"island-expanded\">\r\n <div class=\"island-topbar\">\r\n <div class=\"island-tabs\">\r\n <button type=\"button\" class=\"active\" data-pane=\"browser\" id=\"tab-browser\">Browser<\/button>\r\n <button type=\"button\" data-pane=\"media\" id=\"tab-media\">Media<\/button>\r\n <button type=\"button\" data-pane=\"tools\" id=\"tab-tools\">Tools<\/button>\r\n <\/div>\r\n <button type=\"button\" class=\"island-close-all\" id=\"island-close-all\" title=\"Close\">\u2715<\/button>\r\n <\/div>\r\n\r\n \r\n <div class=\"island-pane active\" id=\"pane-browser\">\r\n <div class=\"island-chrome\">\r\n <div class=\"island-traffic\" aria-hidden=\"true\">\r\n <span class=\"c-close\" id=\"island-close\" title=\"Close\"><\/span>\r\n <span class=\"c-min\"><\/span><span class=\"c-max\"><\/span>\r\n <\/div>\r\n <div class=\"island-url-wrap\"><span class=\"island-url\" id=\"island-url-label\">https:\/\/player.schovat.net\/<\/span><\/div>\r\n <div class=\"island-actions\">\r\n <button type=\"button\" id=\"island-reload\" title=\"Reload\">\u21bb<\/button>\r\n <button type=\"button\" id=\"island-close-btn\" title=\"Close\">\u2715<\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"island-frame-shell\">\r\n <iframe id=\"jefx-island-frame\" title=\"Embedded browser\" loading=\"lazy\"\r\n referrerpolicy=\"no-referrer-when-downgrade\"\r\n sandbox=\"allow-scripts allow-forms allow-same-origin allow-downloads\"\r\n src=\"about:blank\"><\/iframe>\r\n <\/div>\r\n <div class=\"island-hint\">Popups & new tabs blocked by sandbox<\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"island-pane media-pane\" id=\"pane-media\">\r\n <div class=\"media-body\">\r\n <div class=\"media-stage mode-audio\" id=\"media-stage\">\r\n <img id=\"media-art-img\" alt=\"\">\r\n <video id=\"media-video\" playsinline preload=\"metadata\"><\/video>\r\n <div class=\"placeholder\" id=\"media-art-ph\">Audio \/ Video<\/div>\r\n <div class=\"media-eq-large\" aria-hidden=\"true\"><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><\/div>\r\n <\/div>\r\n <div class=\"media-meta\">\r\n <h3 id=\"media-title\">No media loaded<\/h3>\r\n <p id=\"media-artist\">Add mp3, wav, mp4, webm\u2026<\/p>\r\n <\/div>\r\n <div class=\"media-progress\" id=\"media-progress\"><span id=\"media-bar\"><\/span><\/div>\r\n <div class=\"media-times\"><span id=\"media-cur\">0:00<\/span><span id=\"media-dur\">0:00<\/span><\/div>\r\n <div class=\"media-controls\">\r\n <button type=\"button\" id=\"media-prev\" title=\"Previous\">\u23ee<\/button>\r\n <button type=\"button\" id=\"media-play\" title=\"Play\/Pause\">\u25b6<\/button>\r\n <button type=\"button\" id=\"media-next\" title=\"Next\">\u23ed<\/button>\r\n <\/div>\r\n <div class=\"media-controls-extra\">\r\n <button type=\"button\" id=\"media-pip\" title=\"Picture in Picture\" disabled>\u29c9 PiP<\/button>\r\n <button type=\"button\" id=\"media-fs\" title=\"Fullscreen\" disabled>\u26f6 Full<\/button>\r\n <\/div>\r\n <div class=\"media-file-row\">\r\n <label for=\"media-file\">Add media<\/label>\r\n <button type=\"button\" id=\"media-clear\">Clear<\/button>\r\n <\/div>\r\n <input id=\"media-file\" type=\"file\" accept=\"audio\/*,video\/*,.mp3,.wav,.ogg,.m4a,.flac,.mp4,.webm,.mov,.m4v\" multiple>\r\n <audio id=\"media-audio\" preload=\"metadata\"><\/audio>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"island-pane tools-pane\" id=\"pane-tools\">\r\n <div class=\"tools-body\">\r\n <div class=\"tool-card\">\r\n <h3>Quick notes<\/h3>\r\n <textarea id=\"tool-notes\" placeholder=\"Jot something for this session\u2026\"><\/textarea>\r\n <div class=\"tool-btns\">\r\n <button type=\"button\" class=\"primary\" id=\"tool-notes-save\">Save<\/button>\r\n <button type=\"button\" id=\"tool-notes-clear\">Clear<\/button>\r\n <\/div>\r\n <p class=\"tool-hint\">Saved in this browser only.<\/p>\r\n <\/div>\r\n <div class=\"tool-card\">\r\n <h3>Focus timer<\/h3>\r\n <div class=\"timer-display\" id=\"timer-display\">25:00<\/div>\r\n <div class=\"tool-row triple\">\r\n <input id=\"timer-mins\" type=\"number\" min=\"1\" max=\"180\" value=\"25\" title=\"Minutes\">\r\n <input id=\"timer-secs\" type=\"number\" min=\"0\" max=\"59\" value=\"0\" title=\"Seconds\">\r\n <button type=\"button\" class=\"primary\" id=\"timer-start\">Start<\/button>\r\n <\/div>\r\n <div class=\"tool-btns\">\r\n <button type=\"button\" id=\"timer-pause\">Pause<\/button>\r\n <button type=\"button\" id=\"timer-reset\">Reset<\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"tool-card\">\r\n <h3>Pinned links<\/h3>\r\n <div class=\"tool-row\">\r\n <input id=\"pin-url\" type=\"url\" placeholder=\"https:\/\/\u2026\">\r\n <button type=\"button\" class=\"primary\" id=\"pin-add\">Pin<\/button>\r\n <\/div>\r\n <ul class=\"pin-list\" id=\"pin-list\"><\/ul>\r\n <p class=\"tool-hint\">Open pins inside the Island browser.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"jefx-appearance\">\r\n <button class=\"appearance-toggle\" type=\"button\" aria-expanded=\"false\"><span class=\"appearance-dot\"><\/span> Customize<\/button>\r\n <div class=\"appearance-panel\">\r\n <p class=\"appearance-heading\">Customize your forum<\/p>\r\n <span class=\"appearance-label\">Layout style<\/span>\r\n <div class=\"style-options\">\r\n <button class=\"style-choice active\" type=\"button\" data-style=\"glass\">Glass<small>Frosted dark<\/small><\/button>\r\n <button class=\"style-choice\" type=\"button\" data-style=\"neon\">Neon<small>Hard grid<\/small><\/button>\r\n <button class=\"style-choice\" type=\"button\" data-style=\"solid\">Solid<small>Dense panels<\/small><\/button>\r\n <button class=\"style-choice\" type=\"button\" data-style=\"minimal\">Minimal<small>Border only<\/small><\/button>\r\n <button class=\"style-choice\" type=\"button\" data-style=\"paper\">Paper<small>Dark ink<\/small><\/button>\r\n <button class=\"style-choice\" type=\"button\" data-style=\"terminal\">Terminal<small>Arcade<\/small><\/button>\r\n <button class=\"style-choice\" type=\"button\" data-style=\"brutal\">Brutal<small>Hard dark<\/small><\/button>\r\n <button class=\"style-choice\" type=\"button\" data-style=\"sunset\">Sunset<small>Night dusk<\/small><\/button>\r\n <button class=\"style-choice\" type=\"button\" data-style=\"cyber\">Cyber<small>Cut corners<\/small><\/button>\r\n <button class=\"style-choice\" type=\"button\" data-style=\"ocean\">Ocean<small>Deep sea<\/small><\/button>\r\n <button class=\"style-choice\" type=\"button\" data-style=\"ember\">Ember<small>Lava floor<\/small><\/button>\r\n <button class=\"style-choice\" type=\"button\" data-style=\"ice\">Ice<small>Dark frost<\/small><\/button>\r\n <button class=\"style-choice\" type=\"button\" data-style=\"vapor\">Vapor<small>Night pop<\/small><\/button>\r\n <button class=\"style-choice\" type=\"button\" data-style=\"carbon\">Carbon<small>Matte tech<\/small><\/button>\r\n <\/div>\r\n <span class=\"appearance-label\">Cursor<\/span>\r\n <div class=\"cursor-mode-options\">\r\n <button class=\"cursor-mode-choice active\" type=\"button\" data-cursor-mode=\"style\">Style cursor<small>Per layout<\/small><\/button>\r\n <button class=\"cursor-mode-choice\" type=\"button\" data-cursor-mode=\"normal\">Normal cursor<small>System default<\/small><\/button>\r\n <\/div>\r\n <p class=\"cursor-mode-hint\">Style cursor follows the layout look. Normal uses your OS mouse pointer.<\/p>\r\n <span class=\"appearance-label\">Choose a color<\/span>\r\n <div class=\"theme-options\">\r\n <button class=\"theme-choice theme-aqua active\" type=\"button\" data-theme=\"aqua\"><span class=\"theme-color-dot\"><\/span><span>Aqua<\/span><\/button>\r\n <button class=\"theme-choice theme-violet\" type=\"button\" data-theme=\"violet\"><span class=\"theme-color-dot\"><\/span><span>Violet<\/span><\/button>\r\n <button class=\"theme-choice theme-rose\" type=\"button\" data-theme=\"rose\"><span class=\"theme-color-dot\"><\/span><span>Rose<\/span><\/button>\r\n <button class=\"theme-choice theme-gold\" type=\"button\" data-theme=\"gold\"><span class=\"theme-color-dot\"><\/span><span>Gold<\/span><\/button>\r\n <button class=\"theme-choice theme-green\" type=\"button\" data-theme=\"green\"><span class=\"theme-color-dot\"><\/span><span>Green<\/span><\/button>\r\n <\/div>\r\n <span class=\"appearance-label\">Custom color<\/span>\r\n <div class=\"custom-color-row\">\r\n <label class=\"custom-color-swatch\" for=\"custom-color-input\"><input id=\"custom-color-input\" type=\"color\" value=\"#59f2ec\"><\/label>\r\n <div><p class=\"custom-color-title\">Pick any color<\/p><p class=\"custom-color-value\" id=\"custom-color-value\">#59F2EC<\/p><\/div>\r\n <\/div>\r\n <span class=\"appearance-label\">Hover animation<\/span>\r\n <div class=\"hover-options\">\r\n <button class=\"hover-choice active\" type=\"button\" data-hover=\"glow\">Glow<\/button>\r\n <button class=\"hover-choice\" type=\"button\" data-hover=\"lift\">Lift<\/button>\r\n <button class=\"hover-choice\" type=\"button\" data-hover=\"scale\">Scale<\/button>\r\n <button class=\"hover-choice\" type=\"button\" data-hover=\"border\">Border<\/button>\r\n <button class=\"hover-choice\" type=\"button\" data-hover=\"brighten\">Brighten<\/button>\r\n <button class=\"hover-choice\" type=\"button\" data-hover=\"pulse\">Pulse<\/button>\r\n <\/div>\r\n <span class=\"appearance-label\">Background wallpaper<\/span>\r\n <div class=\"wallpaper-controls\">\r\n <label class=\"wallpaper-upload\" for=\"wallpaper-input\">Upload wallpaper<\/label>\r\n <button class=\"wallpaper-remove\" id=\"remove-wallpaper\" type=\"button\">Remove<\/button>\r\n <\/div>\r\n <input id=\"wallpaper-input\" type=\"file\" accept=\"image\/*\">\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"wrap\"><\/div>\r\n\r\n <script>\r\n (() => {\r\n const BROWSER_HOME = \"https:\/\/player.schovat.net\/\";\r\n const layoutStyles = [\"glass\",\"neon\",\"solid\",\"minimal\",\"paper\",\"terminal\",\"brutal\",\"sunset\",\"cyber\",\"ocean\",\"ember\",\"ice\",\"vapor\",\"carbon\"];\r\n const hoverStyles = [\"glow\",\"lift\",\"scale\",\"border\",\"brighten\",\"pulse\"];\r\n const themes = {\r\n aqua: [\"#59f2ec\",\"#8f7cff\"], violet: [\"#c18cff\",\"#746cff\"], rose: [\"#ff97d0\",\"#aa72ff\"],\r\n gold: [\"#ffe27b\",\"#ff9d5b\"], green: [\"#75f5a5\",\"#43cbd2\"]\r\n };\r\n\r\n const loader = document.getElementById(\"jefx-loader\");\r\n const appearance = document.getElementById(\"jefx-appearance\");\r\n const toggle = appearance.querySelector(\".appearance-toggle\");\r\n const themeButtons = document.querySelectorAll(\".theme-choice\");\r\n const styleButtons = document.querySelectorAll(\".style-choice\");\r\n const hoverButtons = document.querySelectorAll(\".hover-choice\");\r\n const cursorModeButtons = document.querySelectorAll(\".cursor-mode-choice\");\r\n const customColorInput = document.getElementById(\"custom-color-input\");\r\n const customColorValue = document.getElementById(\"custom-color-value\");\r\n const wallpaperInput = document.getElementById(\"wallpaper-input\");\r\n const removeWallpaper = document.getElementById(\"remove-wallpaper\");\r\n\r\n function hexToRgb(hex){const v=hex.replace(\"#\",\"\");return{r:parseInt(v.slice(0,2),16),g:parseInt(v.slice(2,4),16),b:parseInt(v.slice(4,6),16)};}\r\n function rgbString(c){return `${c.r}, ${c.g}, ${c.b}`;}\r\n function makeSecondColor(c){return{r:Math.min(255,Math.round(c.r*0.55+110)),g:Math.min(255,Math.round(c.g*0.45+70)),b:Math.min(255,Math.round(c.b*0.35+180))};}\r\n function rgbToHex(c){return\"#\"+[c.r,c.g,c.b].map(v=>v.toString(16).padStart(2,\"0\")).join(\"\");}\r\n function applyColors(a,b){\r\n const r1=hexToRgb(a), r2=hexToRgb(b);\r\n document.documentElement.style.setProperty(\"--accent\", a);\r\n document.documentElement.style.setProperty(\"--accent-rgb\", rgbString(r1));\r\n document.documentElement.style.setProperty(\"--accent-2\", b);\r\n document.documentElement.style.setProperty(\"--accent-2-rgb\", rgbString(r2));\r\n customColorInput.value=a; customColorValue.textContent=a.toUpperCase();\r\n }\r\n function setTheme(name){\r\n const t=themes[name]||themes.aqua; applyColors(t[0],t[1]);\r\n themeButtons.forEach(b=>b.classList.toggle(\"active\", b.dataset.theme===name));\r\n localStorage.setItem(\"jefx-theme\", name); localStorage.removeItem(\"jefx-custom-color\");\r\n }\r\n function setCustomColor(hex){\r\n applyColors(hex, rgbToHex(makeSecondColor(hexToRgb(hex))));\r\n themeButtons.forEach(b=>b.classList.remove(\"active\"));\r\n localStorage.setItem(\"jefx-theme\",\"custom\"); localStorage.setItem(\"jefx-custom-color\", hex);\r\n }\r\n function setLayoutStyle(name){\r\n const selected=layoutStyles.includes(name)?name:\"glass\";\r\n document.body.dataset.layoutStyle=selected;\r\n styleButtons.forEach(b=>b.classList.toggle(\"active\", b.dataset.style===selected));\r\n localStorage.setItem(\"jefx-layout-style\", selected);\r\n applyCursorMode(localStorage.getItem(\"jefx-cursor-mode\") || \"style\", false);\r\n const el = document.getElementById(\"sb-layout-state\");\r\n if (el) el.textContent = selected;\r\n }\r\n function setHoverEffect(name){\r\n const selected=hoverStyles.includes(name)?name:\"glow\";\r\n document.body.dataset.hoverEffect=selected;\r\n hoverButtons.forEach(b=>b.classList.toggle(\"active\", b.dataset.hover===selected));\r\n localStorage.setItem(\"jefx-hover-effect\", selected);\r\n }\r\n function applyCursorMode(mode, persist) {\r\n const useStyle = mode !== \"normal\";\r\n document.body.classList.toggle(\"has-style-cursor\", useStyle);\r\n if (!useStyle) document.body.classList.remove(\"cursor-hot\");\r\n cursorModeButtons.forEach((b) => b.classList.toggle(\"active\", b.dataset.cursorMode === (useStyle ? \"style\" : \"normal\")));\r\n if (persist !== false) localStorage.setItem(\"jefx-cursor-mode\", useStyle ? \"style\" : \"normal\");\r\n }\r\n function setWallpaper(data){\r\n document.body.style.setProperty(\"--jefx-wallpaper\", `url(\"${data}\")`);\r\n document.body.classList.add(\"has-wallpaper\");\r\n try{localStorage.setItem(\"jefx-wallpaper\", data);}catch(e){}\r\n }\r\n function removeSavedWallpaper(){\r\n document.body.classList.remove(\"has-wallpaper\");\r\n document.body.style.removeProperty(\"--jefx-wallpaper\");\r\n localStorage.removeItem(\"jefx-wallpaper\"); wallpaperInput.value=\"\";\r\n }\r\n\r\n const savedTheme=localStorage.getItem(\"jefx-theme\");\r\n const savedColor=localStorage.getItem(\"jefx-custom-color\");\r\n const savedWallpaper=localStorage.getItem(\"jefx-wallpaper\");\r\n if(savedTheme===\"custom\"&&savedColor) setCustomColor(savedColor); else setTheme(savedTheme||\"aqua\");\r\n if(savedWallpaper) setWallpaper(savedWallpaper);\r\n setLayoutStyle(localStorage.getItem(\"jefx-layout-style\")||\"glass\");\r\n setHoverEffect(localStorage.getItem(\"jefx-hover-effect\")||\"glow\");\r\n applyCursorMode(localStorage.getItem(\"jefx-cursor-mode\") || \"style\", false);\r\n\r\n toggle.addEventListener(\"click\", () => {\r\n const open=appearance.classList.toggle(\"open\");\r\n toggle.setAttribute(\"aria-expanded\", String(open));\r\n });\r\n document.addEventListener(\"click\", (e) => {\r\n if(!appearance.contains(e.target)) { appearance.classList.remove(\"open\"); toggle.setAttribute(\"aria-expanded\",\"false\"); }\r\n });\r\n themeButtons.forEach(b=>b.addEventListener(\"click\",()=>setTheme(b.dataset.theme)));\r\n styleButtons.forEach(b=>b.addEventListener(\"click\",()=>setLayoutStyle(b.dataset.style)));\r\n hoverButtons.forEach(b=>b.addEventListener(\"click\",()=>setHoverEffect(b.dataset.hover)));\r\n cursorModeButtons.forEach(b=>b.addEventListener(\"click\",()=>applyCursorMode(b.dataset.cursorMode, true)));\r\n customColorInput.addEventListener(\"input\",()=>setCustomColor(customColorInput.value));\r\n wallpaperInput.addEventListener(\"change\",()=>{\r\n const f=wallpaperInput.files&&wallpaperInput.files[0];\r\n if(!f||!f.type.startsWith(\"image\/\")){wallpaperInput.value=\"\";return;}\r\n const r=new FileReader(); r.onload=()=>setWallpaper(r.result); r.readAsDataURL(f);\r\n });\r\n removeWallpaper.addEventListener(\"click\", removeSavedWallpaper);\r\n\r\n const status = document.getElementById(\"jefx-statusbar\");\r\n const sbHead = document.getElementById(\"sb-head\");\r\n const clockEl = document.getElementById(\"sb-clock\");\r\n const dateEl = document.getElementById(\"sb-date\");\r\n const tzEl = document.getElementById(\"sb-tz\");\r\n const tzFull = document.getElementById(\"sb-tz-full\");\r\n const muteToast = document.getElementById(\"jefx-mute-toast\");\r\n const muteToastText = document.getElementById(\"mute-toast-text\");\r\n const sbNotifState = document.getElementById(\"sb-notif-state\");\r\n const sbNowState = document.getElementById(\"sb-now-state\");\r\n const sbFocusState = document.getElementById(\"sb-focus-state\");\r\n const silentBtn = document.getElementById(\"sb-silent\");\r\n const notifBtn = document.getElementById(\"sb-notif\");\r\n let silentMode = localStorage.getItem(\"jefx-silent\") === \"1\";\r\n let notificationsBlocked = localStorage.getItem(\"jefx-notifications-blocked\") === \"1\";\r\n let focusMode = localStorage.getItem(\"jefx-focus\") === \"1\";\r\n let toastTimer = null;\r\n\r\n const NativeNotification = window.Notification;\r\n let notificationPatched = false;\r\n function installNotificationGate() {\r\n if (!NativeNotification || notificationPatched) return;\r\n notificationPatched = true;\r\n function GatedNotification(title, options) {\r\n if (notificationsBlocked) return { close(){}, addEventListener(){}, removeEventListener(){}, dispatchEvent(){return false;}, onclick:null, onclose:null, onerror:null, onshow:null };\r\n return new NativeNotification(title, options);\r\n }\r\n GatedNotification.permission = NativeNotification.permission;\r\n GatedNotification.requestPermission = function (cb) {\r\n if (notificationsBlocked) { const p = Promise.resolve(\"denied\"); if (typeof cb === \"function\") cb(\"denied\"); return p; }\r\n return NativeNotification.requestPermission(cb).then((perm) => { GatedNotification.permission = NativeNotification.permission; return perm; });\r\n };\r\n GatedNotification.prototype = NativeNotification.prototype;\r\n window.Notification = GatedNotification;\r\n }\r\n function syncNotificationPermissionMirror() {\r\n if (window.Notification && NativeNotification) { try { window.Notification.permission = NativeNotification.permission; } catch (e) {} }\r\n }\r\n installNotificationGate();\r\n async function ensurePermissionWhenEnabling() {\r\n if (!NativeNotification) return \"unsupported\";\r\n if (NativeNotification.permission === \"granted\" || NativeNotification.permission === \"denied\") return NativeNotification.permission;\r\n try { const perm = await NativeNotification.requestPermission(); syncNotificationPermissionMirror(); return perm; }\r\n catch { return NativeNotification.permission; }\r\n }\r\n\r\n function detectTZ() {\r\n try {\r\n const tz = Intl.DateTimeFormat().resolvedOptions().timeZone || \"Local\";\r\n const offsetMin = -new Date().getTimezoneOffset();\r\n const sign = offsetMin >= 0 ? \"+\" : \"-\";\r\n const abs = Math.abs(offsetMin);\r\n return { short: `${tz.split(\"\/\").pop() || tz}`, full: `${tz} \u00b7 GMT${sign}${String(Math.floor(abs\/60)).padStart(2,\"0\")}:${String(abs%60).padStart(2,\"0\")}` };\r\n } catch { return { short: \"Local\", full: \"Local time\" }; }\r\n }\r\n function tickClock() {\r\n const d = new Date();\r\n let h = d.getHours();\r\n const m = String(d.getMinutes()).padStart(2, \"0\");\r\n const s = String(d.getSeconds()).padStart(2, \"0\");\r\n const ampm = h >= 12 ? \"PM\" : \"AM\";\r\n h = h % 12; if (h === 0) h = 12;\r\n clockEl.textContent = `${h}:${m}:${s} ${ampm}`;\r\n dateEl.textContent = d.toLocaleDateString(undefined, { weekday: \"short\", month: \"short\", day: \"numeric\" });\r\n }\r\n const tzInfo = detectTZ();\r\n tzEl.textContent = tzInfo.short; tzFull.textContent = tzInfo.full;\r\n tickClock(); setInterval(tickClock, 1000);\r\n\r\n function showToast(text) {\r\n muteToastText.textContent = text;\r\n muteToast.classList.add(\"show\");\r\n clearTimeout(toastTimer);\r\n toastTimer = setTimeout(() => muteToast.classList.remove(\"show\"), 1800);\r\n }\r\n function muteAllMedia(blocked) {\r\n const a = document.getElementById(\"media-audio\");\r\n const v = document.getElementById(\"media-video\");\r\n if (a) a.muted = blocked; if (v) v.muted = blocked;\r\n }\r\n function applySilent(on, animate) {\r\n silentMode = on;\r\n document.body.classList.toggle(\"is-muted\", on);\r\n silentBtn.classList.toggle(\"on\", on);\r\n silentBtn.setAttribute(\"aria-pressed\", String(on));\r\n localStorage.setItem(\"jefx-silent\", on ? \"1\" : \"0\");\r\n muteAllMedia(on);\r\n if (animate) showToast(on ? \"Silent mode on\" : \"Silent mode off\");\r\n }\r\n function applyNotifications(blocked, animate) {\r\n notificationsBlocked = blocked;\r\n notifBtn.classList.toggle(\"on\", blocked);\r\n notifBtn.setAttribute(\"aria-pressed\", String(blocked));\r\n localStorage.setItem(\"jefx-notifications-blocked\", blocked ? \"1\" : \"0\");\r\n if (sbNotifState) sbNotifState.textContent = blocked ? \"Blocked on this page\" : \"Allowed in theme\";\r\n installNotificationGate(); syncNotificationPermissionMirror();\r\n if (animate) {\r\n if (blocked) showToast(\"Notifications blocked\");\r\n else {\r\n const perm = NativeNotification ? NativeNotification.permission : \"unsupported\";\r\n if (perm === \"denied\") showToast(\"Theme allowed \u00b7 browser still denied\");\r\n else if (perm === \"granted\") showToast(\"Notifications allowed\");\r\n else if (perm === \"unsupported\") showToast(\"Notifications not supported\");\r\n else showToast(\"Notifications allowed \u00b7 permit if asked\");\r\n }\r\n }\r\n }\r\n function applyFocus(on, animate) {\r\n focusMode = on;\r\n document.body.classList.toggle(\"focus-mode\", on);\r\n if (sbFocusState) sbFocusState.textContent = on ? \"On\" : \"Off\";\r\n localStorage.setItem(\"jefx-focus\", on ? \"1\" : \"0\");\r\n if (animate) showToast(on ? \"Focus mode on\" : \"Focus mode off\");\r\n }\r\n applySilent(silentMode, false); applyNotifications(notificationsBlocked, false); applyFocus(focusMode, false);\r\n\r\n silentBtn.addEventListener(\"click\", (e) => { e.stopPropagation(); applySilent(!silentMode, true); });\r\n notifBtn.addEventListener(\"click\", async (e) => {\r\n e.stopPropagation();\r\n const next = !notificationsBlocked;\r\n if (!next) await ensurePermissionWhenEnabling();\r\n applyNotifications(next, true);\r\n });\r\n sbHead.addEventListener(\"click\", () => {\r\n const open = status.classList.toggle(\"expanded\");\r\n sbHead.setAttribute(\"aria-expanded\", String(open));\r\n });\r\n document.addEventListener(\"click\", (e) => {\r\n if (!status.contains(e.target) && status.classList.contains(\"expanded\")) {\r\n status.classList.remove(\"expanded\"); sbHead.setAttribute(\"aria-expanded\", \"false\");\r\n }\r\n });\r\n document.getElementById(\"sb-copy-time\").addEventListener(\"click\", async () => {\r\n try { await navigator.clipboard.writeText(`${clockEl.textContent} \u00b7 ${dateEl.textContent} \u00b7 ${tzFull.textContent}`); showToast(\"Time copied\"); }\r\n catch { showToast(\"Copy failed\"); }\r\n });\r\n document.getElementById(\"sb-focus-toggle\").addEventListener(\"click\", () => applyFocus(!focusMode, true));\r\n document.getElementById(\"sb-open-island\").addEventListener(\"click\", () => openIsland());\r\n document.getElementById(\"sb-open-tools\").addEventListener(\"click\", () => openIsland(\"tools\"));\r\n\r\n const goalInput = document.getElementById(\"sb-goal-input\");\r\n const goalList = document.getElementById(\"sb-goal-list\");\r\n let goals = [];\r\n try { goals = JSON.parse(localStorage.getItem(\"jefx-goals\") || \"[]\"); } catch { goals = []; }\r\n function saveGoals(){ localStorage.setItem(\"jefx-goals\", JSON.stringify(goals)); }\r\n function renderGoals(){\r\n goalList.innerHTML = \"\";\r\n goals.forEach((g, i) => {\r\n const li = document.createElement(\"li\");\r\n if (g.done) li.classList.add(\"done\");\r\n li.innerHTML = `<button type=\"button\" data-act=\"toggle\" title=\"Toggle\">\u2713<\/button><span><\/span><button type=\"button\" data-act=\"del\" title=\"Delete\">\u2715<\/button>`;\r\n li.querySelector(\"span\").textContent = g.text;\r\n li.querySelector('[data-act=\"toggle\"]').addEventListener(\"click\", () => { goals[i].done = !goals[i].done; saveGoals(); renderGoals(); });\r\n li.querySelector('[data-act=\"del\"]').addEventListener(\"click\", () => { goals.splice(i,1); saveGoals(); renderGoals(); });\r\n goalList.appendChild(li);\r\n });\r\n }\r\n document.getElementById(\"sb-goal-add\").addEventListener(\"click\", () => {\r\n const text = (goalInput.value || \"\").trim();\r\n if (!text) return;\r\n goals.unshift({ text, done: false });\r\n if (goals.length > 20) goals.length = 20;\r\n goalInput.value = \"\"; saveGoals(); renderGoals();\r\n });\r\n goalInput.addEventListener(\"keydown\", (e) => { if (e.key === \"Enter\") document.getElementById(\"sb-goal-add\").click(); });\r\n renderGoals();\r\n\r\n window.addEventListener(\"pointermove\", (e) => {\r\n if (e.pointerType !== \"mouse\") return;\r\n document.documentElement.style.setProperty(\"--cursor-x\", e.clientX + \"px\");\r\n document.documentElement.style.setProperty(\"--cursor-y\", e.clientY + \"px\");\r\n });\r\n document.addEventListener(\"pointerover\", (e) => {\r\n if (!document.body.classList.contains(\"has-style-cursor\")) return;\r\n if (e.target.closest(\"a, button, input, textarea, select, label, [role='button']\")) document.body.classList.add(\"cursor-hot\");\r\n });\r\n document.addEventListener(\"pointerout\", (e) => {\r\n if (e.target.closest(\"a, button, input, textarea, select, label, [role='button']\")) document.body.classList.remove(\"cursor-hot\");\r\n });\r\n\r\n const island = document.getElementById(\"jefx-island\");\r\n const islandOpenBtn = document.getElementById(\"island-open-btn\");\r\n const islandFrame = document.getElementById(\"jefx-island-frame\");\r\n const islandUrlLabel = document.getElementById(\"island-url-label\");\r\n const tabBrowser = document.getElementById(\"tab-browser\");\r\n const tabMedia = document.getElementById(\"tab-media\");\r\n const tabTools = document.getElementById(\"tab-tools\");\r\n const paneBrowser = document.getElementById(\"pane-browser\");\r\n const paneMedia = document.getElementById(\"pane-media\");\r\n const paneTools = document.getElementById(\"pane-tools\");\r\n let islandLoadedOnce = false;\r\n\r\n function openIsland(pane) {\r\n island.classList.add(\"open\");\r\n islandOpenBtn.setAttribute(\"aria-expanded\",\"true\");\r\n if (pane) switchPane(pane);\r\n if (!islandLoadedOnce && islandFrame) {\r\n islandLoadedOnce = true;\r\n islandFrame.src = BROWSER_HOME;\r\n try { islandUrlLabel.textContent = new URL(BROWSER_HOME).host; } catch { islandUrlLabel.textContent = BROWSER_HOME; }\r\n }\r\n }\r\n function closeIsland() {\r\n island.classList.remove(\"open\");\r\n islandOpenBtn.setAttribute(\"aria-expanded\",\"false\");\r\n }\r\n function switchPane(name) {\r\n tabBrowser.classList.toggle(\"active\", name === \"browser\");\r\n tabMedia.classList.toggle(\"active\", name === \"media\");\r\n tabTools.classList.toggle(\"active\", name === \"tools\");\r\n paneBrowser.classList.toggle(\"active\", name === \"browser\");\r\n paneMedia.classList.toggle(\"active\", name === \"media\");\r\n paneTools.classList.toggle(\"active\", name === \"tools\");\r\n }\r\n islandOpenBtn.addEventListener(\"click\", () => openIsland());\r\n \/\/ Close only: top X + browser chrome closes (NO media\/tools chrome)\r\n document.querySelectorAll(\"#island-close-all, #island-close, #island-close-btn\").forEach((btn) => {\r\n btn.addEventListener(\"click\", closeIsland);\r\n });\r\n document.getElementById(\"island-reload\").addEventListener(\"click\", () => {\r\n if (!islandFrame) return;\r\n const url = islandFrame.getAttribute(\"src\") || BROWSER_HOME;\r\n islandFrame.src = \"about:blank\";\r\n requestAnimationFrame(() => { islandFrame.src = url === \"about:blank\" ? BROWSER_HOME : url; });\r\n });\r\n tabBrowser.addEventListener(\"click\", () => switchPane(\"browser\"));\r\n tabMedia.addEventListener(\"click\", () => switchPane(\"media\"));\r\n tabTools.addEventListener(\"click\", () => switchPane(\"tools\"));\r\n document.addEventListener(\"keydown\", (e) => {\r\n if (e.key === \"Escape\" && island.classList.contains(\"open\")) closeIsland();\r\n });\r\n\r\n const audio = document.getElementById(\"media-audio\");\r\n const video = document.getElementById(\"media-video\");\r\n const mediaFile = document.getElementById(\"media-file\");\r\n const mediaPlay = document.getElementById(\"media-play\");\r\n const mediaPrev = document.getElementById(\"media-prev\");\r\n const mediaNext = document.getElementById(\"media-next\");\r\n const mediaClear = document.getElementById(\"media-clear\");\r\n const mediaPip = document.getElementById(\"media-pip\");\r\n const mediaFs = document.getElementById(\"media-fs\");\r\n const mediaTitle = document.getElementById(\"media-title\");\r\n const mediaArtist = document.getElementById(\"media-artist\");\r\n const mediaBar = document.getElementById(\"media-bar\");\r\n const mediaProgress = document.getElementById(\"media-progress\");\r\n const mediaCur = document.getElementById(\"media-cur\");\r\n const mediaDur = document.getElementById(\"media-dur\");\r\n const miniTrack = document.getElementById(\"mini-track\");\r\n const mediaStage = document.getElementById(\"media-stage\");\r\n const mediaArtImg = document.getElementById(\"media-art-img\");\r\n let playlist = [];\r\n let trackIndex = 0;\r\n let activeKind = \"audio\";\r\n\r\n function mediaEl(){ return activeKind === \"video\" ? video : audio; }\r\n function stopOther(){ try { audio.pause(); } catch(e){} try { video.pause(); } catch(e){} }\r\n function fmt(t){ if(!isFinite(t)) return \"0:00\"; const m=Math.floor(t\/60), s=Math.floor(t%60); return m+\":\"+String(s).padStart(2,\"0\"); }\r\n function isVideoFile(file){\r\n const t = (file.type || \"\").toLowerCase();\r\n if (t.startsWith(\"video\/\")) return true;\r\n return \/\\.(mp4|webm|mov|m4v|ogv|mkv)$\/i.test(file.name || \"\");\r\n }\r\n function isAudioFile(file){\r\n const t = (file.type || \"\").toLowerCase();\r\n if (t.startsWith(\"audio\/\")) return true;\r\n return \/\\.(mp3|wav|ogg|m4a|flac|aac|opus|wma)$\/i.test(file.name || \"\");\r\n }\r\n function isVideoTrack(){ return !!(playlist[trackIndex] && playlist[trackIndex].kind === \"video\"); }\r\n\r\n function refreshMediaViewButtons() {\r\n const videoMode = isVideoTrack();\r\n const canPip = !!(document.pictureInPictureEnabled && video && videoMode);\r\n const canFs = videoMode && !!(mediaStage.requestFullscreen || mediaStage.webkitRequestFullscreen || video.requestFullscreen || video.webkitRequestFullscreen || video.webkitEnterFullscreen);\r\n mediaPip.disabled = !canPip;\r\n mediaFs.disabled = !canFs;\r\n mediaPip.classList.toggle(\"on\", document.pictureInPictureElement === video);\r\n const fsEl = document.fullscreenElement || document.webkitFullscreenElement;\r\n mediaFs.classList.toggle(\"on\", fsEl === mediaStage || fsEl === video);\r\n mediaPip.title = canPip ? \"Picture in Picture\" : \"PiP only works for video\";\r\n mediaFs.title = canFs ? \"Fullscreen\" : \"Fullscreen only works for video\";\r\n }\r\n\r\n function setNowPlayingUI(track, playing) {\r\n mediaTitle.textContent = track ? track.title : \"No media loaded\";\r\n mediaArtist.textContent = track ? `${track.kind.toUpperCase()} \u00b7 ${track.artist}` : \"Add mp3, wav, mp4, webm\u2026\";\r\n miniTrack.textContent = track ? track.name : \"Not playing\";\r\n island.classList.toggle(\"media-compact\", !!track);\r\n island.classList.toggle(\"media-paused\", !playing);\r\n mediaPlay.textContent = playing ? \"\u23f8\" : \"\u25b6\";\r\n if (sbNowState) sbNowState.textContent = track ? (playing ? `\u25b6 ${track.title}` : `\u23f8 ${track.title}`) : \"Nothing\";\r\n\r\n const isVid = !!(track && track.kind === \"video\");\r\n mediaStage.classList.toggle(\"mode-video\", isVid);\r\n mediaStage.classList.toggle(\"mode-audio\", !isVid);\r\n mediaStage.classList.toggle(\"has-art\", !!(track && track.art && !isVid));\r\n\r\n if (track && track.art && !isVid) {\r\n mediaArtImg.src = track.art;\r\n mediaArtImg.classList.add(\"has\");\r\n } else {\r\n mediaArtImg.removeAttribute(\"src\");\r\n mediaArtImg.classList.remove(\"has\");\r\n }\r\n if (isVid) {\r\n video.style.display = \"block\";\r\n mediaArtImg.style.display = \"none\";\r\n } else {\r\n video.style.display = \"none\";\r\n }\r\n\r\n if (\"mediaSession\" in navigator) {\r\n if (!track) { navigator.mediaSession.metadata = null; }\r\n else {\r\n navigator.mediaSession.metadata = new MediaMetadata({\r\n title: track.title, artist: track.artist, album: \"Jefx Island\",\r\n artwork: track.art ? [{ src: track.art, sizes: \"512x512\", type: \"image\/png\" }] : []\r\n });\r\n navigator.mediaSession.playbackState = playing ? \"playing\" : \"paused\";\r\n }\r\n }\r\n refreshMediaViewButtons();\r\n }\r\n\r\n function loadTrack(i) {\r\n if (!playlist.length) return;\r\n trackIndex = (i + playlist.length) % playlist.length;\r\n const track = playlist[trackIndex];\r\n stopOther();\r\n activeKind = track.kind;\r\n const el = mediaEl();\r\n if (activeKind === \"video\") {\r\n try { audio.removeAttribute(\"src\"); audio.load(); } catch(e){}\r\n video.removeAttribute(\"src\");\r\n video.src = track.url;\r\n video.load();\r\n video.style.display = \"block\";\r\n } else {\r\n try { video.pause(); video.removeAttribute(\"src\"); video.load(); video.style.display = \"none\"; } catch(e){}\r\n audio.src = track.url;\r\n audio.load();\r\n }\r\n el.muted = silentMode;\r\n mediaBar.style.width = \"0%\";\r\n mediaCur.textContent = \"0:00\";\r\n mediaDur.textContent = \"0:00\";\r\n setNowPlayingUI(track, false);\r\n }\r\n\r\n async function playCurrent() {\r\n if (!playlist.length) return;\r\n const el = mediaEl();\r\n try {\r\n el.muted = silentMode;\r\n if (el.readyState < 2) {\r\n el.load();\r\n await new Promise((resolve) => {\r\n const done = () => { el.removeEventListener(\"loadeddata\", done); el.removeEventListener(\"error\", done); resolve(); };\r\n el.addEventListener(\"loadeddata\", done, { once: true });\r\n el.addEventListener(\"error\", done, { once: true });\r\n setTimeout(done, 1500);\r\n });\r\n }\r\n await el.play();\r\n setNowPlayingUI(playlist[trackIndex], true);\r\n } catch (err) {\r\n console.warn(\"play failed\", err);\r\n setNowPlayingUI(playlist[trackIndex], false);\r\n showToast(\"Play blocked \u2014 tap Play again\");\r\n }\r\n }\r\n function pauseCurrent(){\r\n try { mediaEl().pause(); } catch(e){}\r\n setNowPlayingUI(playlist[trackIndex] || null, false);\r\n }\r\n\r\n function bindMediaEvents(el) {\r\n el.addEventListener(\"timeupdate\", () => {\r\n if (el !== mediaEl()) return;\r\n const p = el.duration ? (el.currentTime \/ el.duration) * 100 : 0;\r\n mediaBar.style.width = p + \"%\";\r\n mediaCur.textContent = fmt(el.currentTime);\r\n });\r\n el.addEventListener(\"loadedmetadata\", () => { if (el === mediaEl()) mediaDur.textContent = fmt(el.duration); });\r\n el.addEventListener(\"durationchange\", () => { if (el === mediaEl()) mediaDur.textContent = fmt(el.duration); });\r\n el.addEventListener(\"ended\", () => {\r\n if (el !== mediaEl()) return;\r\n if (playlist.length > 1) { loadTrack(trackIndex+1); playCurrent(); }\r\n else setNowPlayingUI(playlist[trackIndex]||null, false);\r\n });\r\n el.addEventListener(\"play\", () => { if (el === mediaEl()) setNowPlayingUI(playlist[trackIndex]||null, true); });\r\n el.addEventListener(\"pause\", () => { if (el === mediaEl()) setNowPlayingUI(playlist[trackIndex]||null, false); });\r\n el.addEventListener(\"error\", () => {\r\n if (el !== mediaEl()) return;\r\n console.warn(\"media error\", el.error);\r\n showToast(\"Can't play this file\");\r\n setNowPlayingUI(playlist[trackIndex]||null, false);\r\n });\r\n }\r\n bindMediaEvents(audio);\r\n bindMediaEvents(video);\r\n\r\n async function togglePiP() {\r\n if (!isVideoTrack() || !video) { showToast(\"Load a video for PiP\"); return; }\r\n if (!document.pictureInPictureEnabled) { showToast(\"PiP not supported here\"); return; }\r\n try {\r\n if (document.pictureInPictureElement === video) await document.exitPictureInPicture();\r\n else {\r\n if (video.paused) { video.muted = silentMode; await video.play().catch(() => {}); }\r\n await video.requestPictureInPicture();\r\n }\r\n } catch (err) { showToast(\"PiP failed\"); console.warn(err); }\r\n refreshMediaViewButtons();\r\n }\r\n async function toggleFullscreen() {\r\n if (!isVideoTrack()) { showToast(\"Load a video for fullscreen\"); return; }\r\n const doc = document;\r\n const activeFs = doc.fullscreenElement || doc.webkitFullscreenElement;\r\n try {\r\n if (activeFs === mediaStage || activeFs === video) {\r\n if (doc.exitFullscreen) await doc.exitFullscreen();\r\n else if (doc.webkitExitFullscreen) doc.webkitExitFullscreen();\r\n } else {\r\n const target = mediaStage;\r\n if (target.requestFullscreen) await target.requestFullscreen();\r\n else if (target.webkitRequestFullscreen) target.webkitRequestFullscreen();\r\n else if (video.requestFullscreen) await video.requestFullscreen();\r\n else if (video.webkitEnterFullscreen) video.webkitEnterFullscreen();\r\n else { showToast(\"Fullscreen not supported\"); return; }\r\n if (video.paused) { video.muted = silentMode; await video.play().catch(() => {}); }\r\n }\r\n } catch (err) { showToast(\"Fullscreen failed\"); console.warn(err); }\r\n refreshMediaViewButtons();\r\n }\r\n mediaPip.addEventListener(\"click\", togglePiP);\r\n mediaFs.addEventListener(\"click\", toggleFullscreen);\r\n video.addEventListener(\"enterpictureinpicture\", refreshMediaViewButtons);\r\n video.addEventListener(\"leavepictureinpicture\", refreshMediaViewButtons);\r\n document.addEventListener(\"fullscreenchange\", refreshMediaViewButtons);\r\n document.addEventListener(\"webkitfullscreenchange\", refreshMediaViewButtons);\r\n\r\n mediaProgress.addEventListener(\"click\", (e) => {\r\n const el = mediaEl(); if (!el.duration) return;\r\n const rect = mediaProgress.getBoundingClientRect();\r\n el.currentTime = Math.min(1, Math.max(0, (e.clientX - rect.left) \/ rect.width)) * el.duration;\r\n });\r\n mediaPlay.addEventListener(\"click\", () => {\r\n if (!playlist.length) { mediaFile.click(); return; }\r\n if (mediaEl().paused) playCurrent(); else pauseCurrent();\r\n });\r\n mediaPrev.addEventListener(\"click\", () => { if (!playlist.length) return; loadTrack(trackIndex-1); playCurrent(); });\r\n mediaNext.addEventListener(\"click\", () => { if (!playlist.length) return; loadTrack(trackIndex+1); playCurrent(); });\r\n mediaClear.addEventListener(\"click\", () => {\r\n pauseCurrent();\r\n playlist.forEach(t => { try { URL.revokeObjectURL(t.url); } catch(e){} if (t.art) try { URL.revokeObjectURL(t.art); } catch(e){} });\r\n playlist = []; trackIndex = 0; activeKind = \"audio\";\r\n try { audio.removeAttribute(\"src\"); audio.load(); } catch(e){}\r\n try { video.removeAttribute(\"src\"); video.load(); video.style.display = \"none\"; } catch(e){}\r\n setNowPlayingUI(null, false);\r\n mediaBar.style.width = \"0%\"; mediaCur.textContent=\"0:00\"; mediaDur.textContent=\"0:00\";\r\n });\r\n mediaFile.addEventListener(\"change\", () => {\r\n const files = [...(mediaFile.files || [])].filter(f => isAudioFile(f) || isVideoFile(f));\r\n if (!files.length) { showToast(\"No supported media in selection\"); return; }\r\n const start = playlist.length;\r\n files.forEach((file) => {\r\n const kind = isVideoFile(file) ? \"video\" : \"audio\";\r\n playlist.push({\r\n name: file.name,\r\n title: file.name.replace(\/\\.[^\/.]+$\/, \"\"),\r\n artist: \"Local file\",\r\n url: URL.createObjectURL(file),\r\n art: null,\r\n kind,\r\n type: file.type || \"\"\r\n });\r\n });\r\n mediaFile.value = \"\";\r\n loadTrack(start);\r\n openIsland(\"media\");\r\n setTimeout(() => { playCurrent(); }, 50);\r\n });\r\n if (\"mediaSession\" in navigator) {\r\n try {\r\n navigator.mediaSession.setActionHandler(\"play\", () => playCurrent());\r\n navigator.mediaSession.setActionHandler(\"pause\", () => pauseCurrent());\r\n navigator.mediaSession.setActionHandler(\"previoustrack\", () => { loadTrack(trackIndex-1); playCurrent(); });\r\n navigator.mediaSession.setActionHandler(\"nexttrack\", () => { loadTrack(trackIndex+1); playCurrent(); });\r\n } catch (e) {}\r\n }\r\n refreshMediaViewButtons();\r\n setNowPlayingUI(null, false);\r\n\r\n const notesEl = document.getElementById(\"tool-notes\");\r\n notesEl.value = localStorage.getItem(\"jefx-island-notes\") || \"\";\r\n document.getElementById(\"tool-notes-save\").addEventListener(\"click\", () => {\r\n localStorage.setItem(\"jefx-island-notes\", notesEl.value || \"\"); showToast(\"Notes saved\");\r\n });\r\n document.getElementById(\"tool-notes-clear\").addEventListener(\"click\", () => {\r\n notesEl.value = \"\"; localStorage.removeItem(\"jefx-island-notes\");\r\n });\r\n\r\n let timerLeft = 25 * 60, timerId = null;\r\n const timerDisplay = document.getElementById(\"timer-display\");\r\n function renderTimer(){ const m=Math.floor(timerLeft\/60), s=timerLeft%60; timerDisplay.textContent=`${String(m).padStart(2,\"0\")}:${String(s).padStart(2,\"0\")}`; }\r\n function stopTimer(){ clearInterval(timerId); timerId=null; }\r\n document.getElementById(\"timer-start\").addEventListener(\"click\", () => {\r\n if (timerId) return;\r\n const mins = Math.max(0, parseInt(document.getElementById(\"timer-mins\").value || \"0\", 10));\r\n const secs = Math.max(0, Math.min(59, parseInt(document.getElementById(\"timer-secs\").value || \"0\", 10)));\r\n if (timerLeft <= 0) timerLeft = Math.max(1, mins * 60 + secs);\r\n renderTimer();\r\n timerId = setInterval(() => {\r\n timerLeft -= 1; renderTimer();\r\n if (timerLeft <= 0) {\r\n stopTimer(); showToast(\"Timer done\");\r\n if (!notificationsBlocked && NativeNotification && NativeNotification.permission === \"granted\") {\r\n try { new window.Notification(\"Jefx Timer\", { body: \"Focus timer finished\" }); } catch(e) {}\r\n }\r\n }\r\n }, 1000);\r\n });\r\n document.getElementById(\"timer-pause\").addEventListener(\"click\", stopTimer);\r\n document.getElementById(\"timer-reset\").addEventListener(\"click\", () => {\r\n stopTimer();\r\n const mins = Math.max(0, parseInt(document.getElementById(\"timer-mins\").value || \"25\", 10));\r\n const secs = Math.max(0, Math.min(59, parseInt(document.getElementById(\"timer-secs\").value || \"0\", 10)));\r\n timerLeft = Math.max(1, mins * 60 + secs); renderTimer();\r\n });\r\n renderTimer();\r\n\r\n const pinList = document.getElementById(\"pin-list\");\r\n let pins = [];\r\n try { pins = JSON.parse(localStorage.getItem(\"jefx-pins\") || \"[]\"); } catch { pins = []; }\r\n function savePins(){ localStorage.setItem(\"jefx-pins\", JSON.stringify(pins)); }\r\n function renderPins(){\r\n pinList.innerHTML = \"\";\r\n pins.forEach((p, i) => {\r\n const li = document.createElement(\"li\");\r\n const label = document.createElement(\"span\"); label.textContent = p.title || p.url; label.title = p.url;\r\n const openBtn = document.createElement(\"button\"); openBtn.type = \"button\"; openBtn.textContent = \"Open\";\r\n openBtn.addEventListener(\"click\", () => {\r\n openIsland(\"browser\"); islandLoadedOnce = true; islandFrame.src = p.url;\r\n try { islandUrlLabel.textContent = new URL(p.url).host; } catch { islandUrlLabel.textContent = p.url; }\r\n });\r\n const delBtn = document.createElement(\"button\"); delBtn.type = \"button\"; delBtn.textContent = \"\u2715\";\r\n delBtn.addEventListener(\"click\", () => { pins.splice(i,1); savePins(); renderPins(); });\r\n li.append(label, openBtn, delBtn); pinList.appendChild(li);\r\n });\r\n }\r\n document.getElementById(\"pin-add\").addEventListener(\"click\", () => {\r\n const raw = (document.getElementById(\"pin-url\").value || \"\").trim();\r\n if (!raw) return;\r\n try {\r\n const u = new URL(raw, location.href);\r\n pins.unshift({ url: u.href, title: u.host });\r\n if (pins.length > 15) pins.length = 15;\r\n document.getElementById(\"pin-url\").value = \"\"; savePins(); renderPins();\r\n } catch { showToast(\"Invalid URL\"); }\r\n });\r\n renderPins();\r\n\r\n let loaderHidden = false;\r\n function hideLoader() {\r\n if (loaderHidden) return;\r\n const el = document.getElementById(\"jefx-loader\") || loader;\r\n if (!el || el.classList.contains(\"is-hidden\")) { loaderHidden = true; if (status) status.classList.add(\"ready\"); return; }\r\n loaderHidden = true; el.classList.add(\"is-hidden\");\r\n setTimeout(() => { try { el.remove(); } catch (e) {} if (status) status.classList.add(\"ready\"); }, 550);\r\n }\r\n function mainHasLoaded() {\r\n const main = document.querySelector(\"#main-outlet, .main-outlet, #content, .main-content, main\");\r\n if (main && main.children.length > 0) return true;\r\n if (!document.querySelector(\"#main-outlet, .main-outlet, #content, .main-content, main\")) {\r\n return document.readyState === \"complete\" || document.readyState === \"interactive\";\r\n }\r\n return false;\r\n }\r\n function armLoaderHide() {\r\n if (mainHasLoaded()) setTimeout(hideLoader, 700);\r\n else {\r\n const obs = new MutationObserver(() => { if (mainHasLoaded()) { obs.disconnect(); setTimeout(hideLoader, 700); } });\r\n obs.observe(document.body, { childList: true, subtree: true });\r\n setTimeout(() => { obs.disconnect(); hideLoader(); }, 2500);\r\n }\r\n window.addEventListener(\"load\", () => setTimeout(hideLoader, 400), { once: true });\r\n setTimeout(hideLoader, 3000);\r\n }\r\n armLoaderHide();\r\n })();\r\n <\/script>\r\n<\/body>\r\n<\/html>", "guest_layout": "", "css": null, "settings": null, "custom_properties": null, "member

{ "name": "Jefx theme 3.0.0", "inherit_default": 1, "dark_mode_toggle": 1, "default_color_scheme": "system", "layout": "\r\n\r\n\r\n \r\n \r\n \r\n Jefx Forum<\/title>\r\n <style>\r\n :root {\r\n --accent: #59f2ec; --accent-rgb: 89, 242, 236; --accent-2: #8f7cff; --accent-2-rgb: 143, 124, 255;\r\n --text: #b9cce3; --text-muted: #738eac; --text-bright: #f3f9ff;\r\n --glass: rgba(9, 24, 52, 0.18); --glass-strong: rgba(6, 17, 40, 0.28); --glass-hover: rgba(92, 167, 236, 0.14);\r\n --border: rgba(177, 222, 255, 0.16); --theme-shift: 0.7s; --cursor-x: -100px; --cursor-y: -100px;\r\n --shadow: 0 16px 42px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.08);\r\n --panel-radius: 22px; --panel-blur: 25px; --panel-sat: 145%; --inner-radius: 14px; --btn-radius: 9px;\r\n --font-main: Arial, Helvetica, sans-serif; --font-display: Arial, Helvetica, sans-serif;\r\n --link-hover: #d0ffff; --btn-text: #04111b; --page-pad: 16px; --wrap-gap: 16px;\r\n }\r\n * { box-sizing: border-box; }\r\n html, body { min-height: 100%; margin: 0; }\r\n body {\r\n min-height: 100vh; overflow-x: hidden; color: var(--text); font-family: var(--font-main);\r\n background-color: #040816; color-scheme: dark;\r\n background-image:\r\n radial-gradient(circle at 7% 3%, rgba(var(--accent-2-rgb), 0.28), transparent 33rem),\r\n radial-gradient(circle at 95% 12%, rgba(var(--accent-rgb), 0.16), transparent 31rem),\r\n radial-gradient(circle at 75% 100%, rgba(235, 104, 255, 0.12), transparent 35rem),\r\n linear-gradient(135deg, #030611 0%, #07162e 50%, #040713 100%);\r\n background-attachment: fixed;\r\n transition: background-image var(--theme-shift) ease, background-color var(--theme-shift) ease, color var(--theme-shift) ease;\r\n }\r\n body.has-wallpaper { background-image: linear-gradient(rgba(3,8,21,0.55), rgba(3,8,21,0.72)), var(--jefx-wallpaper); }\r\n a { color: var(--accent) !important; text-decoration: none; }\r\n a:hover { color: var(--link-hover) !important; }\r\n\r\n #jefx-statusbar {\r\n position: fixed; top: 12px; left: 14px; z-index: 999999; width: auto; max-width: min(440px, calc(100vw - 28px));\r\n color: var(--text-bright); background: #0a1730; border: 1px solid rgba(var(--accent-rgb), 0.45); border-radius: 22px;\r\n box-shadow: 0 10px 28px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08);\r\n transform: scaleX(0.18) scaleY(0.7); transform-origin: left top; opacity: 0; pointer-events: none; overflow: hidden;\r\n transition: border-radius 0.35s ease, box-shadow 0.35s ease;\r\n }\r\n #jefx-statusbar.ready { animation: status-water-in 1.15s cubic-bezier(0.22, 1.2, 0.36, 1) forwards; pointer-events: auto; }\r\n #jefx-statusbar.expanded { border-radius: 18px; box-shadow: 0 18px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(var(--accent-rgb),0.22); }\r\n #jefx-statusbar .sb-head {\r\n display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 10px 0 14px; border: 0; width: 100%;\r\n background: transparent; color: inherit; cursor: pointer; text-align: left;\r\n }\r\n #jefx-statusbar .sb-timeblock { display: flex; flex-direction: column; justify-content: center; line-height: 1.05; min-width: 92px; flex: 1; }\r\n #jefx-statusbar .sb-clock { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 13px; }\r\n #jefx-statusbar .sb-date { margin-top: 2px; color: var(--text-muted); font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }\r\n #jefx-statusbar .sb-tz-chip { color: var(--text-muted); font-size: 10px; font-weight: 700; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\r\n #jefx-statusbar .sb-sep { width: 1px; height: 18px; background: rgba(177,222,255,0.22); flex: 0 0 auto; }\r\n #jefx-statusbar .sb-chev { color: var(--text-muted); font-size: 12px; font-weight: 900; transition: transform 0.25s ease; }\r\n #jefx-statusbar.expanded .sb-chev { transform: rotate(180deg); }\r\n #jefx-statusbar .sb-panel { display: none; padding: 0 12px 12px; border-top: 1px solid rgba(177,222,255,0.12); }\r\n #jefx-statusbar.expanded .sb-panel { display: block; }\r\n .sb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }\r\n .sb-card { padding: 10px; background: #071428; border: 1px solid rgba(163,220,255,0.14); border-radius: 12px; }\r\n .sb-card.full { grid-column: 1 \/ -1; }\r\n .sb-card h4 { margin: 0 0 6px; color: var(--text-muted); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; }\r\n .sb-card p { margin: 0; color: var(--text-bright); font-size: 12px; font-weight: 700; word-break: break-word; }\r\n .sb-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid rgba(177,222,255,0.08); }\r\n .sb-toggle-row:first-of-type { border-top: 0; padding-top: 0; }\r\n .sb-toggle-meta strong { display: block; color: var(--text-bright); font-size: 12px; }\r\n .sb-toggle-meta span { display: block; margin-top: 2px; color: var(--text-muted); font-size: 10px; }\r\n .sb-switch {\r\n position: relative; width: 44px; height: 26px; border-radius: 999px; border: 1px solid rgba(163,220,255,0.25);\r\n background: #122445; cursor: pointer; flex: 0 0 auto; padding: 0;\r\n }\r\n .sb-switch::after {\r\n content: \"\"; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;\r\n background: #d7e6f7; transition: transform 0.2s ease, background 0.2s ease;\r\n }\r\n .sb-switch.on {\r\n background: linear-gradient(135deg, rgba(var(--accent-rgb),0.85), rgba(var(--accent-2-rgb),0.85));\r\n border-color: rgba(255,255,255,0.35);\r\n }\r\n .sb-switch.on::after { transform: translateX(18px); background: #04111b; }\r\n .sb-switch.warn.on { background: linear-gradient(135deg, #ff6b6b, #ff9f43); }\r\n .sb-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }\r\n .sb-actions button, .sb-goal-row button {\r\n min-height: 32px !important; border-radius: 10px !important; border: 1px solid rgba(163,220,255,0.2) !important;\r\n background: #122445 !important; color: var(--text-bright) !important; font-size: 10px !important;\r\n font-weight: 800 !important; cursor: pointer; box-shadow: none !important;\r\n }\r\n .sb-goal-row { display: grid; grid-template-columns: 1fr auto; gap: 6px; margin-top: 8px; }\r\n .sb-goal-row input {\r\n min-height: 34px !important; padding: 0 10px; font-size: 11px !important; background: #050d1c !important;\r\n border: 1px solid rgba(156,216,255,0.2) !important; border-radius: 10px !important; color: var(--text-bright) !important;\r\n }\r\n .sb-goal-list { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; max-height: 120px; overflow: auto; }\r\n .sb-goal-list li {\r\n display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center;\r\n padding: 8px 10px; background: #050d1c; border: 1px solid rgba(163,220,255,0.1); border-radius: 10px;\r\n color: var(--text-bright); font-size: 11px;\r\n }\r\n .sb-goal-list li.done span { text-decoration: line-through; color: var(--text-muted); }\r\n .sb-goal-list button { border: 0; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 12px; padding: 0; }\r\n #jefx-statusbar .sb-ripple { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 0 rgba(var(--accent-rgb), 0); }\r\n #jefx-statusbar.ready .sb-ripple { animation: water-ripple 1.4s ease-out 0.15s both; }\r\n #jefx-mute-toast {\r\n position: fixed; top: 62px; left: 14px; z-index: 1000000; display: flex; align-items: center; gap: 8px;\r\n padding: 10px 14px; color: #fff; font-size: 12px; font-weight: 800; background: #111; border-radius: 14px;\r\n box-shadow: 0 12px 30px rgba(0,0,0,0.45); opacity: 0; transform: translateY(-6px) scale(0.96); pointer-events: none;\r\n transition: opacity 0.25s ease, transform 0.25s ease;\r\n }\r\n #jefx-mute-toast.show { opacity: 1; transform: translateY(0) scale(1); }\r\n @keyframes status-water-in {\r\n 0% { opacity: 0; transform: scaleX(0.12) scaleY(0.55); filter: blur(2px); }\r\n 35% { opacity: 1; transform: scaleX(1.08) scaleY(0.9); filter: blur(0); }\r\n 55% { transform: scaleX(0.96) scaleY(1.08); }\r\n 72% { transform: scaleX(1.03) scaleY(0.97); }\r\n 100% { opacity: 1; transform: scaleX(1) scaleY(1); }\r\n }\r\n @keyframes water-ripple { 0% { box-shadow: inset 0 0 0 0 rgba(var(--accent-rgb), 0.35); } 100% { box-shadow: inset 0 0 0 28px rgba(var(--accent-rgb), 0); } }\r\n\r\n #jefx-cursor {\r\n position: fixed; top: 0; left: 0; z-index: 2147483646; width: 34px; height: 34px; pointer-events: none; opacity: 0;\r\n transform: translate3d(calc(var(--cursor-x) - 50%), calc(var(--cursor-y) - 50%), 0);\r\n }\r\n #jefx-cursor svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.45)); }\r\n #jefx-cursor .layer { display: none; }\r\n body.has-style-cursor #jefx-cursor { opacity: 1; }\r\n body.has-style-cursor[data-layout-style=\"glass\"] #jefx-cursor .layer-glass,\r\n body.has-style-cursor[data-layout-style=\"neon\"] #jefx-cursor .layer-neon,\r\n body.has-style-cursor[data-layout-style=\"solid\"] #jefx-cursor .layer-solid,\r\n body.has-style-cursor[data-layout-style=\"minimal\"] #jefx-cursor .layer-minimal,\r\n body.has-style-cursor[data-layout-style=\"paper\"] #jefx-cursor .layer-paper,\r\n body.has-style-cursor[data-layout-style=\"terminal\"] #jefx-cursor .layer-terminal,\r\n body.has-style-cursor[data-layout-style=\"brutal\"] #jefx-cursor .layer-brutal,\r\n body.has-style-cursor[data-layout-style=\"sunset\"] #jefx-cursor .layer-sunset,\r\n body.has-style-cursor[data-layout-style=\"cyber\"] #jefx-cursor .layer-cyber,\r\n body.has-style-cursor[data-layout-style=\"ocean\"] #jefx-cursor .layer-ocean,\r\n body.has-style-cursor[data-layout-style=\"ember\"] #jefx-cursor .layer-ember,\r\n body.has-style-cursor[data-layout-style=\"ice\"] #jefx-cursor .layer-ice,\r\n body.has-style-cursor[data-layout-style=\"vapor\"] #jefx-cursor .layer-vapor,\r\n body.has-style-cursor[data-layout-style=\"carbon\"] #jefx-cursor .layer-carbon { display: block; }\r\n @media (pointer: fine) {\r\n body.has-style-cursor, body.has-style-cursor a, body.has-style-cursor button, body.has-style-cursor input,\r\n body.has-style-cursor textarea, body.has-style-cursor select, body.has-style-cursor label,\r\n body.has-style-cursor [role=\"button\"] { cursor: none !important; }\r\n }\r\n body.cursor-hot #jefx-cursor { transform: translate3d(calc(var(--cursor-x) - 50%), calc(var(--cursor-y) - 50%), 0) scale(1.12); }\r\n\r\n #jefx-appearance { position: fixed; top: 12px; left: 50%; z-index: 999999; transform: translateX(-50%); }\r\n .appearance-toggle {\r\n display: flex !important; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 9px 16px;\r\n color: var(--text-bright) !important; font-size: 12px; font-weight: 700; cursor: pointer; background: #0a1730 !important;\r\n border: 1px solid rgba(var(--accent-rgb), 0.72) !important; border-radius: 999px !important;\r\n box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.2), 0 9px 24px rgba(0,0,0,0.35);\r\n }\r\n .appearance-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 11px var(--accent); }\r\n .appearance-panel {\r\n position: absolute; top: calc(100% + 10px); left: 50%; width: min(400px, calc(100vw - 28px)); max-height: calc(100vh - 70px);\r\n padding: 15px; overflow-y: auto; visibility: hidden; opacity: 0; transform: translateX(-50%) translateY(-8px);\r\n transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease; background: #07132b;\r\n border: 1px solid rgba(177,222,255,0.28); border-radius: 17px; box-shadow: 0 20px 48px rgba(0,0,0,0.45); color: #b9cce3;\r\n }\r\n #jefx-appearance.open .appearance-panel { visibility: visible; opacity: 1; transform: translateX(-50%) translateY(0); }\r\n .appearance-heading { margin: 0 0 13px; color: #f3f9ff; font-size: 13px; font-weight: 700; }\r\n .appearance-label { display: block; margin: 15px 0 8px; color: #738eac; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }\r\n .theme-options { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }\r\n button.theme-choice {\r\n display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 5px;\r\n min-height: 58px !important; padding: 6px 2px !important; color: #f3f9ff !important; font-size: 9px !important;\r\n font-weight: 700 !important; cursor: pointer; border: 1px solid rgba(255,255,255,0.16) !important; border-radius: 10px !important;\r\n }\r\n button.theme-choice.active { border: 2px solid #fff !important; }\r\n .theme-color-dot { width: 20px; height: 20px; border: 1px solid rgba(255,255,255,0.45); border-radius: 50%; }\r\n button.theme-aqua { background: #12353a !important; } button.theme-aqua .theme-color-dot { background: linear-gradient(135deg, #57f1ec, #7c83ff) !important; }\r\n button.theme-violet { background: #2a1c48 !important; } button.theme-violet .theme-color-dot { background: linear-gradient(135deg, #c18cff, #6d68ff) !important; }\r\n button.theme-rose { background: #3a1830 !important; } button.theme-rose .theme-color-dot { background: linear-gradient(135deg, #ff8fca, #aa6bff) !important; }\r\n button.theme-gold { background: #3a2a14 !important; } button.theme-gold .theme-color-dot { background: linear-gradient(135deg, #ffe270, #ff9f56) !important; }\r\n button.theme-green { background: #143528 !important; } button.theme-green .theme-color-dot { background: linear-gradient(135deg, #72f5a0, #41cbd0) !important; }\r\n .custom-color-row { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; padding: 10px; background: #0c1a36; border: 1px solid rgba(163,220,255,0.2); border-radius: 12px; }\r\n .custom-color-swatch { position: relative; width: 42px; height: 42px; overflow: hidden; cursor: pointer; background: linear-gradient(135deg, var(--accent), var(--accent-2)); border: 2px solid rgba(255,255,255,0.35); border-radius: 12px; }\r\n #custom-color-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }\r\n .custom-color-title { margin: 0 0 3px; color: #f3f9ff; font-size: 12px; font-weight: 700; }\r\n .custom-color-value { margin: 0; color: #738eac; font-size: 10px; font-family: Consolas, monospace; }\r\n .style-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }\r\n .hover-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }\r\n .cursor-mode-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }\r\n button.style-choice, button.hover-choice, button.cursor-mode-choice {\r\n min-height: 35px !important; padding: 7px 4px !important; color: #f3f9ff !important; font-size: 10px !important;\r\n font-weight: 700 !important; cursor: pointer; background: #122445 !important; border: 1px solid rgba(163,220,255,0.2) !important;\r\n border-radius: 8px !important; box-shadow: none !important;\r\n }\r\n button.style-choice { min-height: 52px !important; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }\r\n button.style-choice small, button.cursor-mode-choice small { display: block; color: #738eac; font-size: 8px; font-weight: 600; text-transform: uppercase; }\r\n button.cursor-mode-choice { min-height: 48px !important; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }\r\n button.style-choice.active, button.hover-choice.active, button.cursor-mode-choice.active {\r\n color: #04111b !important; background: linear-gradient(135deg, rgba(var(--accent-rgb),0.94), rgba(var(--accent-2-rgb),0.94)) !important;\r\n border-color: rgba(255,255,255,0.55) !important;\r\n }\r\n button.style-choice.active small, button.cursor-mode-choice.active small { color: rgba(4,17,27,0.72); }\r\n .cursor-mode-hint { margin: 8px 0 0; color: #738eac; font-size: 10px; line-height: 1.4; }\r\n .wallpaper-controls { display: grid; grid-template-columns: 1fr auto; gap: 8px; }\r\n .wallpaper-upload, .wallpaper-remove {\r\n display: flex; align-items: center; justify-content: center; min-height: 37px; padding: 8px 11px; color: #f3f9ff !important;\r\n font-size: 11px; font-weight: 700; cursor: pointer; background: #122445 !important; border: 1px solid rgba(163,220,255,0.24) !important; border-radius: 9px !important;\r\n }\r\n .wallpaper-remove { color: #738eac !important; }\r\n #wallpaper-input { display: none; }\r\n\r\n #jefx-island {\r\n position: fixed; top: 12px; left: calc(50% + 118px); z-index: 999998; width: 148px; height: 38px;\r\n color: var(--text-bright); background: #050b18; border: 1px solid rgba(var(--accent-rgb), 0.4);\r\n border-radius: 999px; box-shadow: 0 12px 30px rgba(0,0,0,0.45); overflow: hidden;\r\n transition: width 0.42s cubic-bezier(0.22,1,0.36,1), height 0.42s cubic-bezier(0.22,1,0.36,1), border-radius 0.3s ease, left 0.3s ease, top 0.3s ease, transform 0.3s ease;\r\n }\r\n #jefx-island.open {\r\n width: min(480px, calc(100vw - 24px));\r\n height: min(720px, calc(100vh - 60px));\r\n border-radius: 22px; left: 50%; transform: translateX(-50%); top: 58px;\r\n }\r\n #jefx-island.media-compact:not(.open) { width: 220px; }\r\n #jefx-island .island-collapsed {\r\n display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 100%;\r\n padding: 0 12px; border: 0; background: transparent; color: inherit;\r\n font: 700 11px\/1 var(--font-main); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer;\r\n }\r\n #jefx-island.open .island-collapsed { display: none; }\r\n #jefx-island .island-live { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }\r\n #jefx-island .island-media-mini { display: none; align-items: center; gap: 8px; min-width: 0; }\r\n #jefx-island.media-compact:not(.open) .island-media-mini { display: flex; }\r\n #jefx-island.media-compact:not(.open) .island-label-default { display: none; }\r\n .mini-eq { display: flex; align-items: flex-end; gap: 2px; height: 12px; }\r\n .mini-eq i { width: 2px; height: 100%; background: var(--accent); border-radius: 2px; animation: eq-bar 0.8s ease-in-out infinite; }\r\n .mini-eq i:nth-child(1) { height: 40%; } .mini-eq i:nth-child(2) { height: 80%; animation-delay: 0.1s; }\r\n .mini-eq i:nth-child(3) { height: 55%; animation-delay: 0.2s; } .mini-eq i:nth-child(4) { height: 95%; animation-delay: 0.15s; }\r\n body.is-muted .mini-eq i { animation: none; opacity: 0.35; }\r\n .mini-track { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; letter-spacing: 0; text-transform: none; color: var(--text-bright); }\r\n #jefx-island .island-expanded { display: none; flex-direction: column; width: 100%; height: 100%; min-height: 0; }\r\n #jefx-island.open .island-expanded { display: flex; }\r\n .island-topbar { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 10px 10px 0; }\r\n .island-tabs { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }\r\n .island-tabs button {\r\n min-height: 34px !important; border-radius: 10px !important; border: 1px solid rgba(163,220,255,0.2) !important;\r\n background: #102039 !important; color: var(--text-bright) !important; font-size: 11px !important;\r\n font-weight: 800 !important; cursor: pointer; box-shadow: none !important;\r\n }\r\n .island-tabs button.active {\r\n background: linear-gradient(135deg, rgba(var(--accent-rgb),0.95), rgba(var(--accent-2-rgb),0.95)) !important; color: #04111b !important;\r\n }\r\n .island-close-all {\r\n width: 34px; height: 34px; border-radius: 10px; border: 1px solid rgba(163,220,255,0.2);\r\n background: #102039; color: var(--text-bright); font-size: 14px; font-weight: 900; cursor: pointer;\r\n }\r\n .island-pane { display: none; flex: 1; min-height: 0; flex-direction: column; }\r\n .island-pane.active { display: flex; }\r\n .island-chrome {\r\n display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center;\r\n padding: 10px; border-bottom: 1px solid rgba(177,222,255,0.12); background: #091428;\r\n }\r\n .island-traffic { display: flex; gap: 6px; padding-left: 4px; }\r\n .island-traffic span { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.18); }\r\n .island-traffic .c-close { background: #ff5f57; cursor: pointer; }\r\n .island-traffic .c-min { background: #febc2e; }\r\n .island-traffic .c-max { background: #28c840; }\r\n .island-url-wrap {\r\n display: flex; align-items: center; gap: 6px; min-width: 0; height: 32px; padding: 0 10px;\r\n background: #07101f; border: 1px solid rgba(156,216,255,0.2); border-radius: 999px; font-size: 11px;\r\n }\r\n .island-url { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-bright); font-family: Consolas, monospace; font-size: 10px; }\r\n .island-actions { display: flex; gap: 4px; }\r\n .island-actions button {\r\n width: 30px !important; min-height: 30px !important; padding: 0 !important; display: grid !important; place-items: center;\r\n color: var(--text-bright) !important; background: #122445 !important; border: 1px solid rgba(163,220,255,0.2) !important;\r\n border-radius: 8px !important; box-shadow: none !important; cursor: pointer;\r\n }\r\n .island-frame-shell { position: relative; flex: 1; min-height: 0; background: #060d1c; }\r\n #jefx-island-frame { width: 100%; height: 100%; border: 0; background: #0b1220; }\r\n .island-hint { padding: 8px 12px; color: var(--text-muted); font-size: 10px; text-align: center; border-top: 1px solid rgba(177,222,255,0.1); }\r\n\r\n \/* MEDIA \u2014 no chrome; bigger video *\/\r\n .media-pane { padding: 0; min-height: 0; }\r\n .media-body {\r\n display: flex; flex-direction: column; gap: 10px; padding: 12px 12px 14px;\r\n flex: 1; min-height: 0; overflow: auto;\r\n }\r\n .media-stage {\r\n position: relative;\r\n width: 100%;\r\n flex: 1 1 auto;\r\n min-height: 260px;\r\n aspect-ratio: 16 \/ 10;\r\n border-radius: 16px;\r\n overflow: hidden;\r\n background: #101b36;\r\n border: 1px solid rgba(177,222,255,0.14);\r\n display: grid;\r\n place-items: center;\r\n }\r\n .media-stage > img,\r\n .media-stage > video,\r\n .media-stage > .placeholder { grid-area: 1 \/ 1; }\r\n .media-stage img {\r\n width: 100%; height: 100%; object-fit: cover; display: none; border: 0;\r\n }\r\n .media-stage video {\r\n width: 100%; height: 100%; display: none; border: 0; background: #000; object-fit: contain;\r\n }\r\n .media-stage.mode-video video { display: block !important; z-index: 2; }\r\n .media-stage.mode-audio img.has { display: block !important; z-index: 1; }\r\n .media-stage .placeholder {\r\n color: var(--text-muted); font-size: 12px; font-weight: 700;\r\n letter-spacing: 0.08em; text-transform: uppercase; z-index: 0; pointer-events: none;\r\n }\r\n .media-stage.mode-video .placeholder,\r\n .media-stage.mode-audio.has-art .placeholder { display: none !important; }\r\n .media-eq-large {\r\n position: absolute; left: 12px; bottom: 12px; z-index: 3;\r\n display: none; align-items: flex-end; gap: 3px; height: 18px; pointer-events: none;\r\n }\r\n .media-stage.mode-audio .media-eq-large { display: flex; }\r\n .media-eq-large i { width: 3px; background: var(--accent); border-radius: 2px; animation: eq-bar 0.75s ease-in-out infinite; }\r\n .media-eq-large i:nth-child(1){height:40%;} .media-eq-large i:nth-child(2){height:80%; animation-delay:.1s}\r\n .media-eq-large i:nth-child(3){height:55%; animation-delay:.2s} .media-eq-large i:nth-child(4){height:95%; animation-delay:.05s}\r\n .media-eq-large i:nth-child(5){height:60%; animation-delay:.15s}\r\n body.is-muted .media-eq-large i, #jefx-island.media-paused .media-eq-large i { animation: none; opacity: 0.3; }\r\n .media-meta h3 { margin: 0; color: var(--text-bright); font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\r\n .media-meta p { margin: 4px 0 0; color: var(--text-muted); font-size: 12px; }\r\n .media-progress { height: 5px; border-radius: 99px; background: #0d1830; overflow: hidden; border: 1px solid rgba(177,222,255,0.12); cursor: pointer; }\r\n .media-progress > span { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width 0.15s linear; pointer-events: none; }\r\n .media-times { display: flex; justify-content: space-between; color: var(--text-muted); font-size: 10px; font-variant-numeric: tabular-nums; }\r\n .media-controls { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }\r\n .media-controls-extra { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }\r\n .media-controls button, .media-controls-extra button {\r\n min-height: 44px !important; border-radius: 12px !important; cursor: pointer;\r\n border: 1px solid rgba(163,220,255,0.2) !important; background: #122445 !important;\r\n color: var(--text-bright) !important; font-size: 16px !important; font-weight: 900 !important; box-shadow: none !important;\r\n }\r\n .media-controls-extra button { min-height: 38px !important; font-size: 12px !important; font-weight: 800 !important; }\r\n .media-controls-extra button:disabled { opacity: 0.45; cursor: not-allowed; }\r\n .media-controls-extra button.on { border-color: rgba(var(--accent-rgb), 0.7) !important; box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.25) inset !important; }\r\n .media-controls button#media-play {\r\n background: linear-gradient(135deg, rgba(var(--accent-rgb),0.95), rgba(var(--accent-2-rgb),0.95)) !important; color: #04111b !important;\r\n }\r\n .media-file-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }\r\n .media-file-row label, .media-file-row button {\r\n min-height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 10px;\r\n border: 1px solid rgba(163,220,255,0.2); background: #122445; color: var(--text-bright); font-size: 11px; font-weight: 700; cursor: pointer;\r\n }\r\n #media-file { display: none; }\r\n #media-audio { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }\r\n #media-video:fullscreen, #media-stage:fullscreen { background: #000; width: 100%; height: 100%; }\r\n #media-stage:fullscreen video { width: 100%; height: 100%; object-fit: contain; display: block !important; }\r\n\r\n \/* TOOLS \u2014 no chrome *\/\r\n .tools-pane { padding: 0; }\r\n .tools-body { display: flex; flex-direction: column; gap: 10px; padding: 12px; flex: 1; min-height: 0; overflow: auto; }\r\n .tool-card { padding: 12px; background: #0a152c; border: 1px solid rgba(163,220,255,0.14); border-radius: 14px; }\r\n .tool-card h3 { margin: 0 0 8px; color: var(--text-bright); font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }\r\n .tool-card textarea, .tool-card input[type=\"text\"], .tool-card input[type=\"url\"], .tool-card input[type=\"number\"] {\r\n width: 100%; min-height: 36px !important; padding: 8px 10px !important; color: var(--text-bright) !important;\r\n background: #07101f !important; border: 1px solid rgba(156,216,255,0.2) !important; border-radius: 10px !important;\r\n font: 12px\/1.4 var(--font-main) !important;\r\n }\r\n .tool-card textarea { min-height: 90px !important; resize: vertical; }\r\n .tool-row { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center; }\r\n .tool-row.triple { grid-template-columns: 1fr 1fr auto; }\r\n .tool-btns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }\r\n .tool-btns button, .tool-card > button {\r\n min-height: 32px !important; padding: 0 12px !important; border-radius: 10px !important;\r\n border: 1px solid rgba(163,220,255,0.2) !important; background: #122445 !important;\r\n color: var(--text-bright) !important; font-size: 11px !important; font-weight: 800 !important; cursor: pointer; box-shadow: none !important;\r\n }\r\n .tool-btns button.primary, .tool-card > button.primary {\r\n background: linear-gradient(135deg, rgba(var(--accent-rgb),0.95), rgba(var(--accent-2-rgb),0.95)) !important;\r\n color: #04111b !important; border-color: rgba(255,255,255,0.35) !important;\r\n }\r\n .timer-display { font-variant-numeric: tabular-nums; font-size: 28px; font-weight: 900; color: var(--text-bright); text-align: center; margin: 4px 0 8px; }\r\n .tool-hint { margin-top: 6px; color: var(--text-muted); font-size: 10px; line-height: 1.35; }\r\n .pin-list { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }\r\n .pin-list li {\r\n display: grid; grid-template-columns: 1fr auto auto; gap: 6px; align-items: center;\r\n padding: 8px 10px; background: #07101f; border: 1px solid rgba(163,220,255,0.12); border-radius: 10px;\r\n }\r\n .pin-list li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-bright); font-size: 11px; font-weight: 700; }\r\n .pin-list button {\r\n min-height: 28px !important; padding: 0 8px !important; border-radius: 8px !important;\r\n border: 1px solid rgba(163,220,255,0.18) !important; background: #122445 !important;\r\n color: var(--text-bright) !important; font-size: 10px !important; font-weight: 800 !important; cursor: pointer; box-shadow: none !important;\r\n }\r\n @keyframes eq-bar { 0%,100% { transform: scaleY(0.45); } 50% { transform: scaleY(1); } }\r\n\r\n #wrap {\r\n display: grid; grid-template-columns: 250px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);\r\n gap: var(--wrap-gap); width: min(1600px, calc(100% - 32px)); min-height: calc(100vh - 32px);\r\n margin: var(--page-pad) auto; padding-top: 54px;\r\n }\r\n #top-menu, .top-menu, .d-header, header {\r\n grid-column: 1 \/ -1; min-height: 66px; padding: 10px 18px; color: var(--text-bright) !important;\r\n background: var(--glass-strong) !important; border: 1px solid var(--border) !important; border-radius: var(--panel-radius);\r\n box-shadow: var(--shadow) !important; backdrop-filter: blur(var(--panel-blur)) saturate(var(--panel-sat)) !important;\r\n -webkit-backdrop-filter: blur(var(--panel-blur)) saturate(var(--panel-sat)) !important;\r\n }\r\n #usermenu, .usermenu, .user-menu { position: fixed; top: 26px; right: 34px; z-index: 999990; }\r\n #nav, nav, .sidebar, .navigation-container {\r\n grid-column: 1; grid-row: 2; min-width: 0; padding: 16px; color: var(--text) !important;\r\n background: var(--glass) !important; border: 1px solid var(--border) !important; border-radius: var(--panel-radius);\r\n box-shadow: var(--shadow) !important; backdrop-filter: blur(var(--panel-blur)) saturate(var(--panel-sat)) !important;\r\n -webkit-backdrop-filter: blur(var(--panel-blur)) saturate(var(--panel-sat)) !important;\r\n }\r\n #main-outlet, .main-outlet, main, #content, .main-content {\r\n grid-column: 2; grid-row: 2; min-width: 0; padding: 20px; color: var(--text) !important;\r\n background: var(--glass) !important; border: 1px solid var(--border) !important; border-radius: var(--panel-radius);\r\n box-shadow: var(--shadow) !important; backdrop-filter: blur(var(--panel-blur)) saturate(var(--panel-sat)) !important;\r\n -webkit-backdrop-filter: blur(var(--panel-blur)) saturate(var(--panel-sat)) !important;\r\n }\r\n #nav a, nav a, .sidebar a { color: var(--text) !important; border: 1px solid transparent; border-radius: 10px; }\r\n #nav a:hover, nav a:hover, .sidebar a:hover, #nav a.active, nav a.active, .sidebar a.active {\r\n color: var(--text-bright) !important; background: var(--glass-hover) !important; border-color: rgba(var(--accent-rgb), 0.23);\r\n }\r\n .topic-list, .category-list, .categories-list, .latest-topic-list, .topic-list-container, .topic-body, .topic-post, .post, .cooked,\r\n .user-card, .popup-menu, .menu-panel, .select-kit-body, .modal, .modal-body, .dropdown-menu, .chat-container {\r\n color: var(--text) !important; background: rgba(12,30,63,0.18) !important; border: 1px solid rgba(171,222,255,0.15) !important;\r\n border-radius: var(--inner-radius); box-shadow: 0 10px 28px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.05) !important;\r\n backdrop-filter: blur(17px) saturate(135%) !important; -webkit-backdrop-filter: blur(17px) saturate(135%) !important;\r\n }\r\n .topic-list-item:hover, .latest-topic-list-item:hover, .category-list-item:hover, .topic-list tr:hover, .category-list tr:hover {\r\n background: var(--glass-hover) !important; box-shadow: inset 3px 0 var(--accent) !important;\r\n }\r\n .topic-list a.title, .latest-topic-list-item a.title, .category-title, h1,h2,h3,h4 { color: var(--text-bright) !important; font-family: var(--font-display); }\r\n button:not(.appearance-toggle):not(.theme-choice):not(.style-choice):not(.hover-choice):not(.cursor-mode-choice):not(.wallpaper-remove):not(.island-collapsed):not(.island-actions button):not(.island-tabs button):not(.island-close-all):not(.media-controls button):not(.media-controls-extra button):not(#media-pip):not(#media-fs):not(.sb-head):not(.sb-actions button):not(.sb-goal-row button):not(.sb-switch):not(.tool-btns button):not(.tool-card > button):not(.media-file-row label):not(.media-file-row button):not(.pin-list button):not(.sb-goal-list button),\r\n .btn, .button, .btn-primary {\r\n color: var(--btn-text) !important; border: 1px solid rgba(var(--accent-rgb),0.68) !important; border-radius: var(--btn-radius) !important;\r\n background: linear-gradient(135deg, rgba(var(--accent-rgb),0.94), rgba(var(--accent-2-rgb),0.94)) !important;\r\n box-shadow: 0 7px 18px rgba(0,0,0,0.19), inset 0 1px 0 rgba(255,255,255,0.28) !important;\r\n }\r\n input:not(#wallpaper-input):not(#custom-color-input):not(#media-file):not(.sb-goal-row input):not(.tool-card input),\r\n textarea:not(.tool-card textarea), select {\r\n min-height: 38px; color: var(--text-bright) !important; background: rgba(3,12,31,0.35) !important;\r\n border: 1px solid rgba(156,216,255,0.24) !important; border-radius: var(--btn-radius) !important;\r\n }\r\n input:focus, textarea:focus, select:focus { outline: none !important; border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.12) !important; }\r\n\r\n body[data-layout-style=\"glass\"] {\r\n --text:#b9cce3; --text-muted:#738eac; --text-bright:#f3f9ff; --glass: rgba(9,24,52,0.18); --glass-strong: rgba(6,17,40,0.28);\r\n --glass-hover: rgba(92,167,236,0.14); --border: rgba(177,222,255,0.16); --btn-text:#04111b;\r\n --panel-radius: 22px; --panel-blur: 25px; --panel-sat: 145%; --inner-radius: 14px; --btn-radius: 9px;\r\n }\r\n body[data-layout-style=\"neon\"] {\r\n --text:#c8e7ff; --text-muted:#6f9cc4; --text-bright:#f7ffff; --glass:#050d22; --glass-strong:#020816;\r\n --glass-hover: rgba(var(--accent-rgb),0.14); --border: rgba(var(--accent-rgb),0.6); --btn-text:#04111b;\r\n --panel-radius: 4px; --panel-blur: 0; --inner-radius: 2px; --btn-radius: 2px; --font-display: Impact, Haettenschweiler, sans-serif;\r\n background:#000208;\r\n background-image: linear-gradient(rgba(var(--accent-rgb),0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--accent-rgb),0.07) 1px, transparent 1px), linear-gradient(160deg,#000208,#050d22 50%,#020510);\r\n background-size: 36px 36px, 36px 36px, auto;\r\n }\r\n body[data-layout-style=\"neon\"] #top-menu, body[data-layout-style=\"neon\"] header, body[data-layout-style=\"neon\"] #nav, body[data-layout-style=\"neon\"] nav, body[data-layout-style=\"neon\"] #main-outlet, body[data-layout-style=\"neon\"] main { backdrop-filter: none !important; border-width: 2px !important; }\r\n body[data-layout-style=\"solid\"] {\r\n --text:#c2d4ea; --text-muted:#7a92ad; --text-bright:#f5f9ff; --glass:#0b1730; --glass-strong:#0e1d3a;\r\n --glass-hover: rgba(var(--accent-rgb),0.12); --border: rgba(140,180,220,0.18); --btn-text:#04111b;\r\n --panel-radius: 14px; --panel-blur: 0; --inner-radius: 10px; --btn-radius: 8px; background: #060b16; background-image: linear-gradient(180deg,#08101f,#050912);\r\n }\r\n body[data-layout-style=\"solid\"] #top-menu, body[data-layout-style=\"solid\"] header, body[data-layout-style=\"solid\"] #nav, body[data-layout-style=\"solid\"] nav, body[data-layout-style=\"solid\"] #main-outlet, body[data-layout-style=\"solid\"] main { backdrop-filter: none !important; }\r\n body[data-layout-style=\"minimal\"] {\r\n --text:#9eb0c8; --text-muted:#6b7f98; --text-bright:#e8eef8; --glass: rgba(255,255,255,0.03); --glass-strong: rgba(255,255,255,0.05);\r\n --glass-hover: rgba(255,255,255,0.06); --border: rgba(255,255,255,0.08); --shadow: none; --btn-text:#04111b;\r\n --panel-radius: 0; --panel-blur: 0; --inner-radius: 0; --btn-radius: 0; --wrap-gap: 0; background: #070b14;\r\n }\r\n body[data-layout-style=\"minimal\"] #top-menu, body[data-layout-style=\"minimal\"] header, body[data-layout-style=\"minimal\"] #nav, body[data-layout-style=\"minimal\"] nav, body[data-layout-style=\"minimal\"] #main-outlet, body[data-layout-style=\"minimal\"] main { backdrop-filter: none !important; box-shadow: none !important; border-radius: 0 !important; }\r\n body[data-layout-style=\"paper\"] {\r\n --text:#d7c7a8; --text-muted:#9a8a6e; --text-bright:#f3e6c8; --glass:#17140f; --glass-strong:#1d1913;\r\n --glass-hover: rgba(var(--accent-rgb),0.12); --border: rgba(214,196,160,0.16); --btn-text:#120f0a;\r\n --panel-radius: 4px; --panel-blur: 0; --inner-radius: 3px; --btn-radius: 3px; --font-main: Georgia, serif; --font-display: Georgia, serif;\r\n background: #0c0a08; background-image: radial-gradient(circle at 18% 0%, rgba(120,90,40,0.16), transparent 26rem), linear-gradient(180deg,#12100c,#0a0907);\r\n }\r\n body[data-layout-style=\"paper\"] #top-menu, body[data-layout-style=\"paper\"] header, body[data-layout-style=\"paper\"] #nav, body[data-layout-style=\"paper\"] nav, body[data-layout-style=\"paper\"] #main-outlet, body[data-layout-style=\"paper\"] main { backdrop-filter: none !important; border-top: 3px solid var(--accent) !important; }\r\n body[data-layout-style=\"terminal\"] {\r\n --text:#7dffa3; --text-muted:#3d9a5f; --text-bright:#b6ffd0; --glass: rgba(0,20,8,0.92); --glass-strong: rgba(0,28,12,0.96);\r\n --glass-hover: rgba(80,255,140,0.1); --border: rgba(90,255,150,0.35); --panel-radius: 0; --panel-blur: 0; --inner-radius: 0; --btn-radius: 0;\r\n --btn-text:#001806; --font-main: Consolas, monospace; --font-display: Consolas, monospace; background:#000800;\r\n background-image: linear-gradient(rgba(0,255,80,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,255,80,0.03) 1px, transparent 1px), radial-gradient(circle at center, #031a0a, #000500 70%);\r\n background-size: 28px 28px, 28px 28px, cover;\r\n }\r\n body[data-layout-style=\"terminal\"]::before {\r\n content:\"\"; position:fixed; inset:0; z-index:999990; pointer-events:none;\r\n background: repeating-linear-gradient(0deg, rgba(0,0,0,0.12) 0 1px, transparent 2px 4px); opacity:0.35;\r\n }\r\n body[data-layout-style=\"terminal\"] #top-menu, body[data-layout-style=\"terminal\"] header, body[data-layout-style=\"terminal\"] #nav, body[data-layout-style=\"terminal\"] nav, body[data-layout-style=\"terminal\"] #main-outlet, body[data-layout-style=\"terminal\"] main { backdrop-filter:none !important; border:1px solid rgba(90,255,150,0.4) !important; }\r\n body[data-layout-style=\"brutal\"] {\r\n --text:#e8e8e8; --text-muted:#9a9a9a; --text-bright:#ffffff; --glass:#141414; --glass-strong:#1a1a1a; --glass-hover:#2a2a2a;\r\n --border:#f0f0f0; --shadow: 6px 6px 0 #000; --btn-text:#000; --panel-radius: 0; --panel-blur: 0; --inner-radius: 0; --btn-radius: 0;\r\n --font-main: Arial Black, Arial, sans-serif; --font-display: Impact, sans-serif; background: #0a0a0a;\r\n background-image: repeating-linear-gradient(-45deg, transparent, transparent 12px, rgba(255,255,255,0.02) 12px, rgba(255,255,255,0.02) 24px), linear-gradient(180deg,#111,#080808);\r\n }\r\n body[data-layout-style=\"brutal\"] #top-menu, body[data-layout-style=\"brutal\"] header, body[data-layout-style=\"brutal\"] #nav, body[data-layout-style=\"brutal\"] nav, body[data-layout-style=\"brutal\"] #main-outlet, body[data-layout-style=\"brutal\"] main { backdrop-filter:none !important; border:3px solid #f0f0f0 !important; box-shadow: 8px 8px 0 #000 !important; }\r\n body[data-layout-style=\"brutal\"] h1, body[data-layout-style=\"brutal\"] .topic-list a.title { text-transform:uppercase; }\r\n body[data-layout-style=\"sunset\"] {\r\n --text:#e7c7d2; --text-muted:#b08798; --text-bright:#ffe8f0; --glass: rgba(28,14,24,0.82); --glass-strong: rgba(36,16,30,0.92);\r\n --glass-hover: rgba(255,120,140,0.14); --border: rgba(255,170,190,0.18); --btn-text:#2a1018;\r\n --panel-radius: 28px; --panel-blur: 18px; --inner-radius: 20px; --btn-radius: 999px; background: #120816;\r\n background-image: radial-gradient(circle at 15% 18%, rgba(255,120,90,0.22), transparent 26rem), radial-gradient(circle at 85% 12%, rgba(255,70,140,0.18), transparent 24rem), linear-gradient(160deg, #1a0c14, #2a1020 42%, #14081c);\r\n }\r\n body[data-layout-style=\"cyber\"] {\r\n --text:#9ef9ff; --text-muted:#4f8ea3; --text-bright:#e9ffff; --glass:#001822; --glass-strong:#002433;\r\n --glass-hover: rgba(0,255,220,0.1); --border:#00ffd0; --shadow: 0 0 0 1px #00ffd0, 6px 6px 0 #003844;\r\n --panel-radius: 0; --panel-blur: 0; --inner-radius: 0; --btn-radius: 0; --btn-text:#001820; --font-display: Impact, sans-serif; background:#000b14;\r\n background-image: linear-gradient(rgba(0,255,220,0.05) 2px, transparent 2px), linear-gradient(90deg, rgba(0,255,220,0.05) 2px, transparent 2px), linear-gradient(#000b14,#001422);\r\n background-size: 48px 48px, 48px 48px, auto;\r\n }\r\n body[data-layout-style=\"cyber\"] #top-menu, body[data-layout-style=\"cyber\"] header, body[data-layout-style=\"cyber\"] #nav, body[data-layout-style=\"cyber\"] nav, body[data-layout-style=\"cyber\"] #main-outlet, body[data-layout-style=\"cyber\"] main {\r\n backdrop-filter:none !important; border:2px solid #00ffd0 !important;\r\n clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));\r\n }\r\n body[data-layout-style=\"ocean\"] {\r\n --text:#c8e9ff; --text-muted:#6f9fbe; --text-bright:#f2fbff; --glass:#0a2f48; --glass-strong:#0c3a58;\r\n --glass-hover: rgba(80,190,255,0.14); --border: rgba(120,210,255,0.22); --btn-text:#042033;\r\n --panel-radius: 28px 10px; --panel-blur: 0; --inner-radius: 20px 8px; --btn-radius: 999px; background:#041525;\r\n background-image: radial-gradient(circle at 18% 20%, rgba(40,170,255,0.22), transparent 24rem), linear-gradient(180deg,#06213a,#041525);\r\n }\r\n body[data-layout-style=\"ocean\"] #top-menu, body[data-layout-style=\"ocean\"] header, body[data-layout-style=\"ocean\"] #nav, body[data-layout-style=\"ocean\"] nav, body[data-layout-style=\"ocean\"] #main-outlet, body[data-layout-style=\"ocean\"] main { backdrop-filter:none !important; }\r\n body[data-layout-style=\"ember\"] {\r\n --text:#ffe0c8; --text-muted:#c48a6a; --text-bright:#fff5ec; --glass:#3a1208; --glass-strong:#4a180a;\r\n --glass-hover: rgba(255,100,40,0.14); --border:#ff6a2a; --panel-radius: 8px; --panel-blur: 0; --inner-radius: 6px; --btn-radius: 6px;\r\n --btn-text:#2a1008; --font-display: Impact, sans-serif; background:#1a0602;\r\n background-image: radial-gradient(circle at 50% 120%, #ff4d00 0%, transparent 40%), linear-gradient(180deg,#2a0c04,#120301);\r\n }\r\n body[data-layout-style=\"ember\"] #top-menu, body[data-layout-style=\"ember\"] header, body[data-layout-style=\"ember\"] #nav, body[data-layout-style=\"ember\"] nav, body[data-layout-style=\"ember\"] #main-outlet, body[data-layout-style=\"ember\"] main { backdrop-filter:none !important; border-bottom: 3px solid #ff6a2a !important; }\r\n body[data-layout-style=\"ice\"] {\r\n --text:#d9eefc; --text-muted:#7ea8c5; --text-bright:#ffffff; --glass: rgba(120,180,220,0.08); --glass-strong: rgba(140,190,230,0.12);\r\n --glass-hover: rgba(180,230,255,0.12); --border: rgba(180,220,255,0.22); --btn-text:#0d2433;\r\n --panel-radius: 18px; --panel-blur: 18px; --inner-radius: 12px; --btn-radius: 12px; background:#0a1724;\r\n background-image: radial-gradient(circle at 30% 20%, rgba(180,230,255,0.14), transparent 22rem), linear-gradient(180deg,#0d1c2c,#081420);\r\n }\r\n body[data-layout-style=\"vapor\"] {\r\n --text:#f3d6ff; --text-muted:#b48ec8; --text-bright:#fff5ff; --glass: rgba(50,20,70,0.55); --glass-strong: rgba(60,24,84,0.72);\r\n --glass-hover: rgba(255,120,220,0.14); --border: rgba(255,170,255,0.22); --btn-text:#2a1038;\r\n --panel-radius: 24px 4px; --panel-blur: 14px; --inner-radius: 18px 4px; --btn-radius: 999px; background:#16061f;\r\n background-image: radial-gradient(circle at 15% 20%, rgba(255,110,210,0.18), transparent 20rem), radial-gradient(circle at 85% 15%, rgba(110,180,255,0.16), transparent 18rem), linear-gradient(160deg,#1a0824,#2a1040 45%,#12061c);\r\n }\r\n body[data-layout-style=\"carbon\"] {\r\n --text:#d5d9e0; --text-muted:#8b93a3; --text-bright:#fff; --glass:#171a21; --glass-strong:#1d222c; --glass-hover:#2a3140;\r\n --border: rgba(255,255,255,0.1); --panel-radius: 10px; --panel-blur: 0; --inner-radius: 8px; --btn-radius: 6px; --btn-text:#0c0e12; background:#0c0e12;\r\n background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 4px), linear-gradient(180deg,#141820,#0c0e12);\r\n }\r\n body[data-layout-style=\"carbon\"] #top-menu, body[data-layout-style=\"carbon\"] header, body[data-layout-style=\"carbon\"] #nav, body[data-layout-style=\"carbon\"] nav, body[data-layout-style=\"carbon\"] #main-outlet, body[data-layout-style=\"carbon\"] main { backdrop-filter:none !important; }\r\n body.focus-mode #wrap { filter: brightness(0.72) saturate(0.9); }\r\n body.focus-mode #jefx-island, body.focus-mode #jefx-statusbar, body.focus-mode #jefx-appearance { filter: none; }\r\n\r\n #jefx-loader { position: fixed; inset: 0; z-index: 1000000; display: grid; place-items: center; background: #030714; transition: opacity 0.55s ease, visibility 0.55s ease; }\r\n #jefx-loader.is-hidden { visibility: hidden; opacity: 0; pointer-events: none; }\r\n .loader-card { width: min(420px,100%); padding: 34px 28px 28px; text-align: center; background:#091a38; border:1px solid rgba(157,225,255,0.32); border-radius: 28px; box-shadow: 0 25px 65px rgba(0,0,0,0.4); }\r\n .loader-visual { width: 84px; height: 84px; margin: 0 auto 18px; border-radius: 50%; border: 2px solid var(--accent); border-top-color: var(--accent-2); animation: loader-spin 1s linear infinite; }\r\n .loader-title { margin: 0; color: #f3f9ff; font-size: 22px; }\r\n .loader-sub { margin: 8px 0 0; color: #738eac; font-size: 12px; }\r\n .loader-progress { height: 4px; margin-top: 22px; overflow: hidden; background: rgba(255,255,255,0.1); border-radius: 99px; }\r\n .loader-progress > span { display:block; height:100%; width:45%; border-radius:inherit; background: linear-gradient(90deg, var(--accent), var(--accent-2), #ef8dff); animation: progress-move 1.45s ease-in-out infinite; }\r\n body[data-hover-effect] a, body[data-hover-effect] button, body[data-hover-effect] .btn, body[data-hover-effect] .button, body[data-hover-effect] .topic-list-item { transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, border-color 0.2s ease !important; }\r\n body[data-hover-effect=\"glow\"] a:hover, body[data-hover-effect=\"glow\"] button:hover { box-shadow: 0 0 18px rgba(var(--accent-rgb),0.25) !important; }\r\n body[data-hover-effect=\"lift\"] a:hover, body[data-hover-effect=\"lift\"] button:hover, body[data-hover-effect=\"lift\"] .topic-list-item:hover { transform: translateY(-2px) !important; }\r\n body[data-hover-effect=\"scale\"] a:hover, body[data-hover-effect=\"scale\"] button:hover { transform: scale(1.025) !important; }\r\n body[data-hover-effect=\"border\"] a:hover, body[data-hover-effect=\"border\"] button:hover { border-color: var(--accent) !important; }\r\n body[data-hover-effect=\"brighten\"] a:hover, body[data-hover-effect=\"brighten\"] button:hover, body[data-hover-effect=\"brighten\"] .topic-list-item:hover { filter: brightness(1.12); }\r\n body[data-hover-effect=\"pulse\"] a:hover, body[data-hover-effect=\"pulse\"] button:hover { animation: hover-pulse 0.8s ease-in-out infinite alternate; }\r\n @keyframes loader-spin { to { transform: rotate(360deg); } }\r\n @keyframes progress-move { from { transform: translateX(-130%); } to { transform: translateX(260%); } }\r\n @keyframes hover-pulse { from { box-shadow: 0 0 7px rgba(var(--accent-rgb),0.12); } to { box-shadow: 0 0 20px rgba(var(--accent-rgb),0.35); } }\r\n @media (max-width: 900px) {\r\n #jefx-statusbar { max-width: calc(100vw - 24px); } #jefx-statusbar .sb-tz-chip { display: none; }\r\n #jefx-island { left: auto; right: 12px; } #jefx-island.open { left: 50%; right: auto; }\r\n #wrap { display: block; width: calc(100% - 20px); margin: 10px auto; padding-top: 100px; }\r\n #top-menu, header, #nav, nav, #main-outlet, main { margin-bottom: 10px; }\r\n .media-stage { min-height: 200px; }\r\n }\r\n @media (prefers-reduced-motion: reduce) {\r\n *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }\r\n body[data-layout-style=\"terminal\"]::before { display: none; }\r\n }\r\n @media (pointer: coarse) {\r\n body.has-style-cursor #jefx-cursor { display: none; }\r\n body.has-style-cursor, body.has-style-cursor * { cursor: auto !important; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body data-layout-style=\"glass\" class=\"has-style-cursor\">\r\n <div id=\"jefx-loader\">\r\n <div class=\"loader-card\">\r\n <div class=\"loader-visual\"><\/div>\r\n <h1 class=\"loader-title\">Loading forum<\/h1>\r\n <p class=\"loader-sub\">Preparing Theme 3.0<\/p>\r\n <div class=\"loader-progress\"><span><\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"jefx-cursor\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 64 64\">\r\n <g class=\"layer layer-glass\"><path d=\"M18 8c10 12 26 24 26 36a14 14 0 0 1-28 0C16 32 12 20 18 8z\" fill=\"rgba(10,30,60,0.92)\" stroke=\"var(--accent)\" stroke-width=\"2.5\"\/><path d=\"M26 18c4 6 10 12 10 18\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2\" opacity=\"0.55\"\/><circle cx=\"30\" cy=\"40\" r=\"3\" fill=\"var(--accent)\"\/><\/g>\r\n <g class=\"layer layer-neon\"><path d=\"M12 8 L44 28 L30 30 L40 52 L20 34 L12 36 Z\" fill=\"#050d22\" stroke=\"var(--accent)\" stroke-width=\"2.5\"\/><path d=\"M20 18 L34 28\" stroke=\"var(--accent-2)\" stroke-width=\"2\"\/><\/g>\r\n <g class=\"layer layer-solid\"><path d=\"M14 10 L42 24 L28 28 L36 48 L22 32 L14 34 Z\" fill=\"#0e1d3a\" stroke=\"var(--accent)\" stroke-width=\"2.5\"\/><rect x=\"24\" y=\"20\" width=\"10\" height=\"3\" rx=\"1\" fill=\"var(--accent-2)\"\/><\/g>\r\n <g class=\"layer layer-minimal\"><path d=\"M32 6 L36 28 L32 58 L28 28 Z\" fill=\"#dfe7f2\" stroke=\"#8ea0b8\" stroke-width=\"1.5\"\/><rect x=\"27\" y=\"26\" width=\"10\" height=\"4\" rx=\"1\" fill=\"#9eb0c8\"\/><\/g>\r\n <g class=\"layer layer-paper\"><path d=\"M18 46 L40 10 L48 16 L26 52 Z\" fill=\"#1f1a14\" stroke=\"#d6c4a0\" stroke-width=\"2\"\/><path d=\"M40 10 L48 16 L44 20 Z\" fill=\"var(--accent)\"\/><path d=\"M22 48 L16 56\" stroke=\"#d6c4a0\" stroke-width=\"2\" stroke-linecap=\"round\"\/><\/g>\r\n <g class=\"layer layer-terminal\"><rect x=\"14\" y=\"12\" width=\"12\" height=\"28\" fill=\"#7dffa3\" stroke=\"#b6ffd0\" stroke-width=\"2\"\/><path d=\"M28 20 H46 M28 28 H40 M28 36 H44\" stroke=\"#7dffa3\" stroke-width=\"2\" stroke-linecap=\"square\"\/><\/g>\r\n <g class=\"layer layer-brutal\"><path d=\"M10 8 H34 V22 H46 L28 44 H10 Z\" fill=\"#111\" stroke=\"#f0f0f0\" stroke-width=\"3\"\/><path d=\"M16 16 H28 V28\" fill=\"none\" stroke=\"var(--accent)\" stroke-width=\"3\"\/><\/g>\r\n <g class=\"layer layer-sunset\"><path d=\"M20 8c14 6 24 20 20 36-12-6-18-18-20-36z\" fill=\"#ff7a9a\" stroke=\"#ffe8f0\" stroke-width=\"2\"\/><circle cx=\"38\" cy=\"22\" r=\"7\" fill=\"#ffe0c0\" stroke=\"#ffb07a\" stroke-width=\"2\"\/><\/g>\r\n <g class=\"layer layer-cyber\"><path d=\"M12 10 L40 28 L28 30 L38 50 L20 34 L12 36 Z\" fill=\"#001822\" stroke=\"#00ffd0\" stroke-width=\"2.5\"\/><path d=\"M24 18 L24 34 M16 26 H32\" stroke=\"#00ffd0\" stroke-width=\"2\"\/><circle cx=\"24\" cy=\"26\" r=\"3\" fill=\"none\" stroke=\"var(--accent)\" stroke-width=\"2\"\/><\/g>\r\n <g class=\"layer layer-ocean\"><path d=\"M14 14c8-8 24-2 28 10 4 12-4 24-16 26\" fill=\"none\" stroke=\"#9ad9ff\" stroke-width=\"4\" stroke-linecap=\"round\"\/><path d=\"M14 14c10 6 16 16 14 28\" fill=\"none\" stroke=\"#2ec5ff\" stroke-width=\"3\" stroke-linecap=\"round\"\/><circle cx=\"18\" cy=\"16\" r=\"4\" fill=\"#e8f7ff\" stroke=\"#7ec8ef\" stroke-width=\"2\"\/><\/g>\r\n <g class=\"layer layer-ember\"><path d=\"M32 8c8 12 16 18 16 30a16 16 0 0 1-32 0c0-8 6-14 10-20 2 8 6 10 8 10-2-8-2-14-2-20z\" fill=\"#ff6a2a\" stroke=\"#ffd0a8\" stroke-width=\"2\"\/><path d=\"M32 28c4 4 6 8 6 12a6 6 0 0 1-12 0c0-3 2-6 4-8 1 3 2 4 3 4-1-3-1-5-1-8z\" fill=\"#ffe27b\"\/><\/g>\r\n <g class=\"layer layer-ice\"><path d=\"M32 6 L48 28 L32 58 L16 28 Z\" fill=\"#e8f5ff\" stroke=\"#7eb6d8\" stroke-width=\"2.5\"\/><path d=\"M32 6 L32 58 M16 28 H48 M24 18 L40 38 M40 18 L24 38\" stroke=\"#9fd0ef\" stroke-width=\"1.5\"\/><\/g>\r\n <g class=\"layer layer-vapor\"><path d=\"M32 6 L38 24 L58 24 L42 36 L48 54 L32 42 L16 54 L22 36 L6 24 L26 24 Z\" fill=\"#ffb8f3\" stroke=\"#7ad7ff\" stroke-width=\"2\"\/><circle cx=\"32\" cy=\"30\" r=\"5\" fill=\"#fff\"\/><\/g>\r\n <g class=\"layer layer-carbon\"><path d=\"M12 10 L40 18 L30 24 L46 42 L34 48 L22 30 L14 34 Z\" fill=\"#171a21\" stroke=\"#d5d9e0\" stroke-width=\"2.5\"\/><path d=\"M20 18 H30\" stroke=\"var(--accent)\" stroke-width=\"2.5\" stroke-linecap=\"round\"\/><rect x=\"24\" y=\"26\" width=\"8\" height=\"8\" fill=\"none\" stroke=\"var(--accent-2)\" stroke-width=\"2\"\/><\/g>\r\n <\/svg>\r\n <\/div>\r\n\r\n <div id=\"jefx-statusbar\" aria-label=\"Status bar\">\r\n <div class=\"sb-ripple\"><\/div>\r\n <button type=\"button\" class=\"sb-head\" id=\"sb-head\" aria-expanded=\"false\" title=\"Expand status\">\r\n <div class=\"sb-timeblock\">\r\n <div class=\"sb-clock\" id=\"sb-clock\">12:00:00 AM<\/div>\r\n <div class=\"sb-date\" id=\"sb-date\">Mon, Jan 1<\/div>\r\n <\/div>\r\n <div class=\"sb-sep\"><\/div>\r\n <div class=\"sb-tz-chip\" id=\"sb-tz\">UTC<\/div>\r\n <div class=\"sb-sep\"><\/div>\r\n <span class=\"sb-chev\" aria-hidden=\"true\">\u25be<\/span>\r\n <\/button>\r\n <div class=\"sb-panel\" id=\"sb-panel\">\r\n <div class=\"sb-grid\">\r\n <div class=\"sb-card\"><h4>Timezone<\/h4><p id=\"sb-tz-full\">\u2014<\/p><\/div>\r\n <div class=\"sb-card\"><h4>Layout<\/h4><p id=\"sb-layout-state\">glass<\/p><\/div>\r\n <div class=\"sb-card\"><h4>Focus<\/h4><p id=\"sb-focus-state\">Off<\/p><\/div>\r\n <div class=\"sb-card\"><h4>Now playing<\/h4><p id=\"sb-now-state\">Nothing<\/p><\/div>\r\n <div class=\"sb-card full\">\r\n <h4>Sound<\/h4>\r\n <div class=\"sb-toggle-row\">\r\n <div class=\"sb-toggle-meta\"><strong>Silent mode<\/strong><span>Mutes island media only<\/span><\/div>\r\n <button type=\"button\" class=\"sb-switch\" id=\"sb-silent\" aria-pressed=\"false\" title=\"Silent mode\"><\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"sb-card full\">\r\n <h4>Notifications<\/h4>\r\n <div class=\"sb-toggle-row\">\r\n <div class=\"sb-toggle-meta\"><strong>Page notifications<\/strong><span id=\"sb-notif-state\">Allowed in theme<\/span><\/div>\r\n <button type=\"button\" class=\"sb-switch warn\" id=\"sb-notif\" aria-pressed=\"false\" title=\"Block notifications\"><\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"sb-card full\">\r\n <h4>Daily goals<\/h4>\r\n <div class=\"sb-goal-row\">\r\n <input id=\"sb-goal-input\" type=\"text\" maxlength=\"80\" placeholder=\"Add a goal\u2026\">\r\n <button type=\"button\" id=\"sb-goal-add\">Add<\/button>\r\n <\/div>\r\n <ul class=\"sb-goal-list\" id=\"sb-goal-list\"><\/ul>\r\n <\/div>\r\n <\/div>\r\n <div class=\"sb-actions\">\r\n <button type=\"button\" id=\"sb-copy-time\">Copy time<\/button>\r\n <button type=\"button\" id=\"sb-focus-toggle\">Focus mode<\/button>\r\n <button type=\"button\" id=\"sb-open-island\">Open Island<\/button>\r\n <button type=\"button\" id=\"sb-open-tools\">Open Tools<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div id=\"jefx-mute-toast\" aria-live=\"polite\"><span id=\"mute-toast-text\">Notifications blocked<\/span><\/div>\r\n\r\n <div id=\"jefx-island\" aria-label=\"Dynamic Island\">\r\n <button class=\"island-collapsed\" type=\"button\" id=\"island-open-btn\" aria-expanded=\"false\">\r\n <span class=\"island-live\" aria-hidden=\"true\"><\/span>\r\n <span class=\"island-label-default\">Island<\/span>\r\n <span class=\"island-media-mini\">\r\n <span class=\"mini-eq\" aria-hidden=\"true\"><i><\/i><i><\/i><i><\/i><i><\/i><\/span>\r\n <span class=\"mini-track\" id=\"mini-track\">Not playing<\/span>\r\n <\/span>\r\n <\/button>\r\n <div class=\"island-expanded\">\r\n <div class=\"island-topbar\">\r\n <div class=\"island-tabs\">\r\n <button type=\"button\" class=\"active\" data-pane=\"browser\" id=\"tab-browser\">Browser<\/button>\r\n <button type=\"button\" data-pane=\"media\" id=\"tab-media\">Media<\/button>\r\n <button type=\"button\" data-pane=\"tools\" id=\"tab-tools\">Tools<\/button>\r\n <\/div>\r\n <button type=\"button\" class=\"island-close-all\" id=\"island-close-all\" title=\"Close\">\u2715<\/button>\r\n <\/div>\r\n\r\n \r\n <div class=\"island-pane active\" id=\"pane-browser\">\r\n <div class=\"island-chrome\">\r\n <div class=\"island-traffic\" aria-hidden=\"true\">\r\n <span class=\"c-close\" id=\"island-close\" title=\"Close\"><\/span>\r\n <span class=\"c-min\"><\/span><span class=\"c-max\"><\/span>\r\n <\/div>\r\n <div class=\"island-url-wrap\"><span class=\"island-url\" id=\"island-url-label\">https:\/\/player.schovat.net\/<\/span><\/div>\r\n <div class=\"island-actions\">\r\n <button type=\"button\" id=\"island-reload\" title=\"Reload\">\u21bb<\/button>\r\n <button type=\"button\" id=\"island-close-btn\" title=\"Close\">\u2715<\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"island-frame-shell\">\r\n <iframe id=\"jefx-island-frame\" title=\"Embedded browser\" loading=\"lazy\"\r\n referrerpolicy=\"no-referrer-when-downgrade\"\r\n sandbox=\"allow-scripts allow-forms allow-same-origin allow-downloads\"\r\n src=\"about:blank\"><\/iframe>\r\n <\/div>\r\n <div class=\"island-hint\">Popups & new tabs blocked by sandbox<\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"island-pane media-pane\" id=\"pane-media\">\r\n <div class=\"media-body\">\r\n <div class=\"media-stage mode-audio\" id=\"media-stage\">\r\n <img id=\"media-art-img\" alt=\"\">\r\n <video id=\"media-video\" playsinline preload=\"metadata\"><\/video>\r\n <div class=\"placeholder\" id=\"media-art-ph\">Audio \/ Video<\/div>\r\n <div class=\"media-eq-large\" aria-hidden=\"true\"><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><\/div>\r\n <\/div>\r\n <div class=\"media-meta\">\r\n <h3 id=\"media-title\">No media loaded<\/h3>\r\n <p id=\"media-artist\">Add mp3, wav, mp4, webm\u2026<\/p>\r\n <\/div>\r\n <div class=\"media-progress\" id=\"media-progress\"><span id=\"media-bar\"><\/span><\/div>\r\n <div class=\"media-times\"><span id=\"media-cur\">0:00<\/span><span id=\"media-dur\">0:00<\/span><\/div>\r\n <div class=\"media-controls\">\r\n <button type=\"button\" id=\"media-prev\" title=\"Previous\">\u23ee<\/button>\r\n <button type=\"button\" id=\"media-play\" title=\"Play\/Pause\">\u25b6<\/button>\r\n <button type=\"button\" id=\"media-next\" title=\"Next\">\u23ed<\/button>\r\n <\/div>\r\n <div class=\"media-controls-extra\">\r\n <button type=\"button\" id=\"media-pip\" title=\"Picture in Picture\" disabled>\u29c9 PiP<\/button>\r\n <button type=\"button\" id=\"media-fs\" title=\"Fullscreen\" disabled>\u26f6 Full<\/button>\r\n <\/div>\r\n <div class=\"media-file-row\">\r\n <label for=\"media-file\">Add media<\/label>\r\n <button type=\"button\" id=\"media-clear\">Clear<\/button>\r\n <\/div>\r\n <input id=\"media-file\" type=\"file\" accept=\"audio\/*,video\/*,.mp3,.wav,.ogg,.m4a,.flac,.mp4,.webm,.mov,.m4v\" multiple>\r\n <audio id=\"media-audio\" preload=\"metadata\"><\/audio>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"island-pane tools-pane\" id=\"pane-tools\">\r\n <div class=\"tools-body\">\r\n <div class=\"tool-card\">\r\n <h3>Quick notes<\/h3>\r\n <textarea id=\"tool-notes\" placeholder=\"Jot something for this session\u2026\"><\/textarea>\r\n <div class=\"tool-btns\">\r\n <button type=\"button\" class=\"primary\" id=\"tool-notes-save\">Save<\/button>\r\n <button type=\"button\" id=\"tool-notes-clear\">Clear<\/button>\r\n <\/div>\r\n <p class=\"tool-hint\">Saved in this browser only.<\/p>\r\n <\/div>\r\n <div class=\"tool-card\">\r\n <h3>Focus timer<\/h3>\r\n <div class=\"timer-display\" id=\"timer-display\">25:00<\/div>\r\n <div class=\"tool-row triple\">\r\n <input id=\"timer-mins\" type=\"number\" min=\"1\" max=\"180\" value=\"25\" title=\"Minutes\">\r\n <input id=\"timer-secs\" type=\"number\" min=\"0\" max=\"59\" value=\"0\" title=\"Seconds\">\r\n <button type=\"button\" class=\"primary\" id=\"timer-start\">Start<\/button>\r\n <\/div>\r\n <div class=\"tool-btns\">\r\n <button type=\"button\" id=\"timer-pause\">Pause<\/button>\r\n <button type=\"button\" id=\"timer-reset\">Reset<\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"tool-card\">\r\n <h3>Pinned links<\/h3>\r\n <div class=\"tool-row\">\r\n <input id=\"pin-url\" type=\"url\" placeholder=\"https:\/\/\u2026\">\r\n <button type=\"button\" class=\"primary\" id=\"pin-add\">Pin<\/button>\r\n <\/div>\r\n <ul class=\"pin-list\" id=\"pin-list\"><\/ul>\r\n <p class=\"tool-hint\">Open pins inside the Island browser.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"jefx-appearance\">\r\n <button class=\"appearance-toggle\" type=\"button\" aria-expanded=\"false\"><span class=\"appearance-dot\"><\/span> Customize<\/button>\r\n <div class=\"appearance-panel\">\r\n <p class=\"appearance-heading\">Customize your forum<\/p>\r\n <span class=\"appearance-label\">Layout style<\/span>\r\n <div class=\"style-options\">\r\n <button class=\"style-choice active\" type=\"button\" data-style=\"glass\">Glass<small>Frosted dark<\/small><\/button>\r\n <button class=\"style-choice\" type=\"button\" data-style=\"neon\">Neon<small>Hard grid<\/small><\/button>\r\n <button class=\"style-choice\" type=\"button\" data-style=\"solid\">Solid<small>Dense panels<\/small><\/button>\r\n <button class=\"style-choice\" type=\"button\" data-style=\"minimal\">Minimal<small>Border only<\/small><\/button>\r\n <button class=\"style-choice\" type=\"button\" data-style=\"paper\">Paper<small>Dark ink<\/small><\/button>\r\n <button class=\"style-choice\" type=\"button\" data-style=\"terminal\">Terminal<small>Arcade<\/small><\/button>\r\n <button class=\"style-choice\" type=\"button\" data-style=\"brutal\">Brutal<small>Hard dark<\/small><\/button>\r\n <button class=\"style-choice\" type=\"button\" data-style=\"sunset\">Sunset<small>Night dusk<\/small><\/button>\r\n <button class=\"style-choice\" type=\"button\" data-style=\"cyber\">Cyber<small>Cut corners<\/small><\/button>\r\n <button class=\"style-choice\" type=\"button\" data-style=\"ocean\">Ocean<small>Deep sea<\/small><\/button>\r\n <button class=\"style-choice\" type=\"button\" data-style=\"ember\">Ember<small>Lava floor<\/small><\/button>\r\n <button class=\"style-choice\" type=\"button\" data-style=\"ice\">Ice<small>Dark frost<\/small><\/button>\r\n <button class=\"style-choice\" type=\"button\" data-style=\"vapor\">Vapor<small>Night pop<\/small><\/button>\r\n <button class=\"style-choice\" type=\"button\" data-style=\"carbon\">Carbon<small>Matte tech<\/small><\/button>\r\n <\/div>\r\n <span class=\"appearance-label\">Cursor<\/span>\r\n <div class=\"cursor-mode-options\">\r\n <button class=\"cursor-mode-choice active\" type=\"button\" data-cursor-mode=\"style\">Style cursor<small>Per layout<\/small><\/button>\r\n <button class=\"cursor-mode-choice\" type=\"button\" data-cursor-mode=\"normal\">Normal cursor<small>System default<\/small><\/button>\r\n <\/div>\r\n <p class=\"cursor-mode-hint\">Style cursor follows the layout look. Normal uses your OS mouse pointer.<\/p>\r\n <span class=\"appearance-label\">Choose a color<\/span>\r\n <div class=\"theme-options\">\r\n <button class=\"theme-choice theme-aqua active\" type=\"button\" data-theme=\"aqua\"><span class=\"theme-color-dot\"><\/span><span>Aqua<\/span><\/button>\r\n <button class=\"theme-choice theme-violet\" type=\"button\" data-theme=\"violet\"><span class=\"theme-color-dot\"><\/span><span>Violet<\/span><\/button>\r\n <button class=\"theme-choice theme-rose\" type=\"button\" data-theme=\"rose\"><span class=\"theme-color-dot\"><\/span><span>Rose<\/span><\/button>\r\n <button class=\"theme-choice theme-gold\" type=\"button\" data-theme=\"gold\"><span class=\"theme-color-dot\"><\/span><span>Gold<\/span><\/button>\r\n <button class=\"theme-choice theme-green\" type=\"button\" data-theme=\"green\"><span class=\"theme-color-dot\"><\/span><span>Green<\/span><\/button>\r\n <\/div>\r\n <span class=\"appearance-label\">Custom color<\/span>\r\n <div class=\"custom-color-row\">\r\n <label class=\"custom-color-swatch\" for=\"custom-color-input\"><input id=\"custom-color-input\" type=\"color\" value=\"#59f2ec\"><\/label>\r\n <div><p class=\"custom-color-title\">Pick any color<\/p><p class=\"custom-color-value\" id=\"custom-color-value\">#59F2EC<\/p><\/div>\r\n <\/div>\r\n <span class=\"appearance-label\">Hover animation<\/span>\r\n <div class=\"hover-options\">\r\n <button class=\"hover-choice active\" type=\"button\" data-hover=\"glow\">Glow<\/button>\r\n <button class=\"hover-choice\" type=\"button\" data-hover=\"lift\">Lift<\/button>\r\n <button class=\"hover-choice\" type=\"button\" data-hover=\"scale\">Scale<\/button>\r\n <button class=\"hover-choice\" type=\"button\" data-hover=\"border\">Border<\/button>\r\n <button class=\"hover-choice\" type=\"button\" data-hover=\"brighten\">Brighten<\/button>\r\n <button class=\"hover-choice\" type=\"button\" data-hover=\"pulse\">Pulse<\/button>\r\n <\/div>\r\n <span class=\"appearance-label\">Background wallpaper<\/span>\r\n <div class=\"wallpaper-controls\">\r\n <label class=\"wallpaper-upload\" for=\"wallpaper-input\">Upload wallpaper<\/label>\r\n <button class=\"wallpaper-remove\" id=\"remove-wallpaper\" type=\"button\">Remove<\/button>\r\n <\/div>\r\n <input id=\"wallpaper-input\" type=\"file\" accept=\"image\/*\">\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"wrap\"><\/div>\r\n\r\n <script>\r\n (() => {\r\n const BROWSER_HOME = \"https:\/\/player.schovat.net\/\";\r\n const layoutStyles = [\"glass\",\"neon\",\"solid\",\"minimal\",\"paper\",\"terminal\",\"brutal\",\"sunset\",\"cyber\",\"ocean\",\"ember\",\"ice\",\"vapor\",\"carbon\"];\r\n const hoverStyles = [\"glow\",\"lift\",\"scale\",\"border\",\"brighten\",\"pulse\"];\r\n const themes = {\r\n aqua: [\"#59f2ec\",\"#8f7cff\"], violet: [\"#c18cff\",\"#746cff\"], rose: [\"#ff97d0\",\"#aa72ff\"],\r\n gold: [\"#ffe27b\",\"#ff9d5b\"], green: [\"#75f5a5\",\"#43cbd2\"]\r\n };\r\n\r\n const loader = document.getElementById(\"jefx-loader\");\r\n const appearance = document.getElementById(\"jefx-appearance\");\r\n const toggle = appearance.querySelector(\".appearance-toggle\");\r\n const themeButtons = document.querySelectorAll(\".theme-choice\");\r\n const styleButtons = document.querySelectorAll(\".style-choice\");\r\n const hoverButtons = document.querySelectorAll(\".hover-choice\");\r\n const cursorModeButtons = document.querySelectorAll(\".cursor-mode-choice\");\r\n const customColorInput = document.getElementById(\"custom-color-input\");\r\n const customColorValue = document.getElementById(\"custom-color-value\");\r\n const wallpaperInput = document.getElementById(\"wallpaper-input\");\r\n const removeWallpaper = document.getElementById(\"remove-wallpaper\");\r\n\r\n function hexToRgb(hex){const v=hex.replace(\"#\",\"\");return{r:parseInt(v.slice(0,2),16),g:parseInt(v.slice(2,4),16),b:parseInt(v.slice(4,6),16)};}\r\n function rgbString(c){return `${c.r}, ${c.g}, ${c.b}`;}\r\n function makeSecondColor(c){return{r:Math.min(255,Math.round(c.r*0.55+110)),g:Math.min(255,Math.round(c.g*0.45+70)),b:Math.min(255,Math.round(c.b*0.35+180))};}\r\n function rgbToHex(c){return\"#\"+[c.r,c.g,c.b].map(v=>v.toString(16).padStart(2,\"0\")).join(\"\");}\r\n function applyColors(a,b){\r\n const r1=hexToRgb(a), r2=hexToRgb(b);\r\n document.documentElement.style.setProperty(\"--accent\", a);\r\n document.documentElement.style.setProperty(\"--accent-rgb\", rgbString(r1));\r\n document.documentElement.style.setProperty(\"--accent-2\", b);\r\n document.documentElement.style.setProperty(\"--accent-2-rgb\", rgbString(r2));\r\n customColorInput.value=a; customColorValue.textContent=a.toUpperCase();\r\n }\r\n function setTheme(name){\r\n const t=themes[name]||themes.aqua; applyColors(t[0],t[1]);\r\n themeButtons.forEach(b=>b.classList.toggle(\"active\", b.dataset.theme===name));\r\n localStorage.setItem(\"jefx-theme\", name); localStorage.removeItem(\"jefx-custom-color\");\r\n }\r\n function setCustomColor(hex){\r\n applyColors(hex, rgbToHex(makeSecondColor(hexToRgb(hex))));\r\n themeButtons.forEach(b=>b.classList.remove(\"active\"));\r\n localStorage.setItem(\"jefx-theme\",\"custom\"); localStorage.setItem(\"jefx-custom-color\", hex);\r\n }\r\n function setLayoutStyle(name){\r\n const selected=layoutStyles.includes(name)?name:\"glass\";\r\n document.body.dataset.layoutStyle=selected;\r\n styleButtons.forEach(b=>b.classList.toggle(\"active\", b.dataset.style===selected));\r\n localStorage.setItem(\"jefx-layout-style\", selected);\r\n applyCursorMode(localStorage.getItem(\"jefx-cursor-mode\") || \"style\", false);\r\n const el = document.getElementById(\"sb-layout-state\");\r\n if (el) el.textContent = selected;\r\n }\r\n function setHoverEffect(name){\r\n const selected=hoverStyles.includes(name)?name:\"glow\";\r\n document.body.dataset.hoverEffect=selected;\r\n hoverButtons.forEach(b=>b.classList.toggle(\"active\", b.dataset.hover===selected));\r\n localStorage.setItem(\"jefx-hover-effect\", selected);\r\n }\r\n function applyCursorMode(mode, persist) {\r\n const useStyle = mode !== \"normal\";\r\n document.body.classList.toggle(\"has-style-cursor\", useStyle);\r\n if (!useStyle) document.body.classList.remove(\"cursor-hot\");\r\n cursorModeButtons.forEach((b) => b.classList.toggle(\"active\", b.dataset.cursorMode === (useStyle ? \"style\" : \"normal\")));\r\n if (persist !== false) localStorage.setItem(\"jefx-cursor-mode\", useStyle ? \"style\" : \"normal\");\r\n }\r\n function setWallpaper(data){\r\n document.body.style.setProperty(\"--jefx-wallpaper\", `url(\"${data}\")`);\r\n document.body.classList.add(\"has-wallpaper\");\r\n try{localStorage.setItem(\"jefx-wallpaper\", data);}catch(e){}\r\n }\r\n function removeSavedWallpaper(){\r\n document.body.classList.remove(\"has-wallpaper\");\r\n document.body.style.removeProperty(\"--jefx-wallpaper\");\r\n localStorage.removeItem(\"jefx-wallpaper\"); wallpaperInput.value=\"\";\r\n }\r\n\r\n const savedTheme=localStorage.getItem(\"jefx-theme\");\r\n const savedColor=localStorage.getItem(\"jefx-custom-color\");\r\n const savedWallpaper=localStorage.getItem(\"jefx-wallpaper\");\r\n if(savedTheme===\"custom\"&&savedColor) setCustomColor(savedColor); else setTheme(savedTheme||\"aqua\");\r\n if(savedWallpaper) setWallpaper(savedWallpaper);\r\n setLayoutStyle(localStorage.getItem(\"jefx-layout-style\")||\"glass\");\r\n setHoverEffect(localStorage.getItem(\"jefx-hover-effect\")||\"glow\");\r\n applyCursorMode(localStorage.getItem(\"jefx-cursor-mode\") || \"style\", false);\r\n\r\n toggle.addEventListener(\"click\", () => {\r\n const open=appearance.classList.toggle(\"open\");\r\n toggle.setAttribute(\"aria-expanded\", String(open));\r\n });\r\n document.addEventListener(\"click\", (e) => {\r\n if(!appearance.contains(e.target)) { appearance.classList.remove(\"open\"); toggle.setAttribute(\"aria-expanded\",\"false\"); }\r\n });\r\n themeButtons.forEach(b=>b.addEventListener(\"click\",()=>setTheme(b.dataset.theme)));\r\n styleButtons.forEach(b=>b.addEventListener(\"click\",()=>setLayoutStyle(b.dataset.style)));\r\n hoverButtons.forEach(b=>b.addEventListener(\"click\",()=>setHoverEffect(b.dataset.hover)));\r\n cursorModeButtons.forEach(b=>b.addEventListener(\"click\",()=>applyCursorMode(b.dataset.cursorMode, true)));\r\n customColorInput.addEventListener(\"input\",()=>setCustomColor(customColorInput.value));\r\n wallpaperInput.addEventListener(\"change\",()=>{\r\n const f=wallpaperInput.files&&wallpaperInput.files[0];\r\n if(!f||!f.type.startsWith(\"image\/\")){wallpaperInput.value=\"\";return;}\r\n const r=new FileReader(); r.onload=()=>setWallpaper(r.result); r.readAsDataURL(f);\r\n });\r\n removeWallpaper.addEventListener(\"click\", removeSavedWallpaper);\r\n\r\n const status = document.getElementById(\"jefx-statusbar\");\r\n const sbHead = document.getElementById(\"sb-head\");\r\n const clockEl = document.getElementById(\"sb-clock\");\r\n const dateEl = document.getElementById(\"sb-date\");\r\n const tzEl = document.getElementById(\"sb-tz\");\r\n const tzFull = document.getElementById(\"sb-tz-full\");\r\n const muteToast = document.getElementById(\"jefx-mute-toast\");\r\n const muteToastText = document.getElementById(\"mute-toast-text\");\r\n const sbNotifState = document.getElementById(\"sb-notif-state\");\r\n const sbNowState = document.getElementById(\"sb-now-state\");\r\n const sbFocusState = document.getElementById(\"sb-focus-state\");\r\n const silentBtn = document.getElementById(\"sb-silent\");\r\n const notifBtn = document.getElementById(\"sb-notif\");\r\n let silentMode = localStorage.getItem(\"jefx-silent\") === \"1\";\r\n let notificationsBlocked = localStorage.getItem(\"jefx-notifications-blocked\") === \"1\";\r\n let focusMode = localStorage.getItem(\"jefx-focus\") === \"1\";\r\n let toastTimer = null;\r\n\r\n const NativeNotification = window.Notification;\r\n let notificationPatched = false;\r\n function installNotificationGate() {\r\n if (!NativeNotification || notificationPatched) return;\r\n notificationPatched = true;\r\n function GatedNotification(title, options) {\r\n if (notificationsBlocked) return { close(){}, addEventListener(){}, removeEventListener(){}, dispatchEvent(){return false;}, onclick:null, onclose:null, onerror:null, onshow:null };\r\n return new NativeNotification(title, options);\r\n }\r\n GatedNotification.permission = NativeNotification.permission;\r\n GatedNotification.requestPermission = function (cb) {\r\n if (notificationsBlocked) { const p = Promise.resolve(\"denied\"); if (typeof cb === \"function\") cb(\"denied\"); return p; }\r\n return NativeNotification.requestPermission(cb).then((perm) => { GatedNotification.permission = NativeNotification.permission; return perm; });\r\n };\r\n GatedNotification.prototype = NativeNotification.prototype;\r\n window.Notification = GatedNotification;\r\n }\r\n function syncNotificationPermissionMirror() {\r\n if (window.Notification && NativeNotification) { try { window.Notification.permission = NativeNotification.permission; } catch (e) {} }\r\n }\r\n installNotificationGate();\r\n async function ensurePermissionWhenEnabling() {\r\n if (!NativeNotification) return \"unsupported\";\r\n if (NativeNotification.permission === \"granted\" || NativeNotification.permission === \"denied\") return NativeNotification.permission;\r\n try { const perm = await NativeNotification.requestPermission(); syncNotificationPermissionMirror(); return perm; }\r\n catch { return NativeNotification.permission; }\r\n }\r\n\r\n function detectTZ() {\r\n try {\r\n const tz = Intl.DateTimeFormat().resolvedOptions().timeZone || \"Local\";\r\n const offsetMin = -new Date().getTimezoneOffset();\r\n const sign = offsetMin >= 0 ? \"+\" : \"-\";\r\n const abs = Math.abs(offsetMin);\r\n return { short: `${tz.split(\"\/\").pop() || tz}`, full: `${tz} \u00b7 GMT${sign}${String(Math.floor(abs\/60)).padStart(2,\"0\")}:${String(abs%60).padStart(2,\"0\")}` };\r\n } catch { return { short: \"Local\", full: \"Local time\" }; }\r\n }\r\n function tickClock() {\r\n const d = new Date();\r\n let h = d.getHours();\r\n const m = String(d.getMinutes()).padStart(2, \"0\");\r\n const s = String(d.getSeconds()).padStart(2, \"0\");\r\n const ampm = h >= 12 ? \"PM\" : \"AM\";\r\n h = h % 12; if (h === 0) h = 12;\r\n clockEl.textContent = `${h}:${m}:${s} ${ampm}`;\r\n dateEl.textContent = d.toLocaleDateString(undefined, { weekday: \"short\", month: \"short\", day: \"numeric\" });\r\n }\r\n const tzInfo = detectTZ();\r\n tzEl.textContent = tzInfo.short; tzFull.textContent = tzInfo.full;\r\n tickClock(); setInterval(tickClock, 1000);\r\n\r\n function showToast(text) {\r\n muteToastText.textContent = text;\r\n muteToast.classList.add(\"show\");\r\n clearTimeout(toastTimer);\r\n toastTimer = setTimeout(() => muteToast.classList.remove(\"show\"), 1800);\r\n }\r\n function muteAllMedia(blocked) {\r\n const a = document.getElementById(\"media-audio\");\r\n const v = document.getElementById(\"media-video\");\r\n if (a) a.muted = blocked; if (v) v.muted = blocked;\r\n }\r\n function applySilent(on, animate) {\r\n silentMode = on;\r\n document.body.classList.toggle(\"is-muted\", on);\r\n silentBtn.classList.toggle(\"on\", on);\r\n silentBtn.setAttribute(\"aria-pressed\", String(on));\r\n localStorage.setItem(\"jefx-silent\", on ? \"1\" : \"0\");\r\n muteAllMedia(on);\r\n if (animate) showToast(on ? \"Silent mode on\" : \"Silent mode off\");\r\n }\r\n function applyNotifications(blocked, animate) {\r\n notificationsBlocked = blocked;\r\n notifBtn.classList.toggle(\"on\", blocked);\r\n notifBtn.setAttribute(\"aria-pressed\", String(blocked));\r\n localStorage.setItem(\"jefx-notifications-blocked\", blocked ? \"1\" : \"0\");\r\n if (sbNotifState) sbNotifState.textContent = blocked ? \"Blocked on this page\" : \"Allowed in theme\";\r\n installNotificationGate(); syncNotificationPermissionMirror();\r\n if (animate) {\r\n if (blocked) showToast(\"Notifications blocked\");\r\n else {\r\n const perm = NativeNotification ? NativeNotification.permission : \"unsupported\";\r\n if (perm === \"denied\") showToast(\"Theme allowed \u00b7 browser still denied\");\r\n else if (perm === \"granted\") showToast(\"Notifications allowed\");\r\n else if (perm === \"unsupported\") showToast(\"Notifications not supported\");\r\n else showToast(\"Notifications allowed \u00b7 permit if asked\");\r\n }\r\n }\r\n }\r\n function applyFocus(on, animate) {\r\n focusMode = on;\r\n document.body.classList.toggle(\"focus-mode\", on);\r\n if (sbFocusState) sbFocusState.textContent = on ? \"On\" : \"Off\";\r\n localStorage.setItem(\"jefx-focus\", on ? \"1\" : \"0\");\r\n if (animate) showToast(on ? \"Focus mode on\" : \"Focus mode off\");\r\n }\r\n applySilent(silentMode, false); applyNotifications(notificationsBlocked, false); applyFocus(focusMode, false);\r\n\r\n silentBtn.addEventListener(\"click\", (e) => { e.stopPropagation(); applySilent(!silentMode, true); });\r\n notifBtn.addEventListener(\"click\", async (e) => {\r\n e.stopPropagation();\r\n const next = !notificationsBlocked;\r\n if (!next) await ensurePermissionWhenEnabling();\r\n applyNotifications(next, true);\r\n });\r\n sbHead.addEventListener(\"click\", () => {\r\n const open = status.classList.toggle(\"expanded\");\r\n sbHead.setAttribute(\"aria-expanded\", String(open));\r\n });\r\n document.addEventListener(\"click\", (e) => {\r\n if (!status.contains(e.target) && status.classList.contains(\"expanded\")) {\r\n status.classList.remove(\"expanded\"); sbHead.setAttribute(\"aria-expanded\", \"false\");\r\n }\r\n });\r\n document.getElementById(\"sb-copy-time\").addEventListener(\"click\", async () => {\r\n try { await navigator.clipboard.writeText(`${clockEl.textContent} \u00b7 ${dateEl.textContent} \u00b7 ${tzFull.textContent}`); showToast(\"Time copied\"); }\r\n catch { showToast(\"Copy failed\"); }\r\n });\r\n document.getElementById(\"sb-focus-toggle\").addEventListener(\"click\", () => applyFocus(!focusMode, true));\r\n document.getElementById(\"sb-open-island\").addEventListener(\"click\", () => openIsland());\r\n document.getElementById(\"sb-open-tools\").addEventListener(\"click\", () => openIsland(\"tools\"));\r\n\r\n const goalInput = document.getElementById(\"sb-goal-input\");\r\n const goalList = document.getElementById(\"sb-goal-list\");\r\n let goals = [];\r\n try { goals = JSON.parse(localStorage.getItem(\"jefx-goals\") || \"[]\"); } catch { goals = []; }\r\n function saveGoals(){ localStorage.setItem(\"jefx-goals\", JSON.stringify(goals)); }\r\n function renderGoals(){\r\n goalList.innerHTML = \"\";\r\n goals.forEach((g, i) => {\r\n const li = document.createElement(\"li\");\r\n if (g.done) li.classList.add(\"done\");\r\n li.innerHTML = `<button type=\"button\" data-act=\"toggle\" title=\"Toggle\">\u2713<\/button><span><\/span><button type=\"button\" data-act=\"del\" title=\"Delete\">\u2715<\/button>`;\r\n li.querySelector(\"span\").textContent = g.text;\r\n li.querySelector('[data-act=\"toggle\"]').addEventListener(\"click\", () => { goals[i].done = !goals[i].done; saveGoals(); renderGoals(); });\r\n li.querySelector('[data-act=\"del\"]').addEventListener(\"click\", () => { goals.splice(i,1); saveGoals(); renderGoals(); });\r\n goalList.appendChild(li);\r\n });\r\n }\r\n document.getElementById(\"sb-goal-add\").addEventListener(\"click\", () => {\r\n const text = (goalInput.value || \"\").trim();\r\n if (!text) return;\r\n goals.unshift({ text, done: false });\r\n if (goals.length > 20) goals.length = 20;\r\n goalInput.value = \"\"; saveGoals(); renderGoals();\r\n });\r\n goalInput.addEventListener(\"keydown\", (e) => { if (e.key === \"Enter\") document.getElementById(\"sb-goal-add\").click(); });\r\n renderGoals();\r\n\r\n window.addEventListener(\"pointermove\", (e) => {\r\n if (e.pointerType !== \"mouse\") return;\r\n document.documentElement.style.setProperty(\"--cursor-x\", e.clientX + \"px\");\r\n document.documentElement.style.setProperty(\"--cursor-y\", e.clientY + \"px\");\r\n });\r\n document.addEventListener(\"pointerover\", (e) => {\r\n if (!document.body.classList.contains(\"has-style-cursor\")) return;\r\n if (e.target.closest(\"a, button, input, textarea, select, label, [role='button']\")) document.body.classList.add(\"cursor-hot\");\r\n });\r\n document.addEventListener(\"pointerout\", (e) => {\r\n if (e.target.closest(\"a, button, input, textarea, select, label, [role='button']\")) document.body.classList.remove(\"cursor-hot\");\r\n });\r\n\r\n const island = document.getElementById(\"jefx-island\");\r\n const islandOpenBtn = document.getElementById(\"island-open-btn\");\r\n const islandFrame = document.getElementById(\"jefx-island-frame\");\r\n const islandUrlLabel = document.getElementById(\"island-url-label\");\r\n const tabBrowser = document.getElementById(\"tab-browser\");\r\n const tabMedia = document.getElementById(\"tab-media\");\r\n const tabTools = document.getElementById(\"tab-tools\");\r\n const paneBrowser = document.getElementById(\"pane-browser\");\r\n const paneMedia = document.getElementById(\"pane-media\");\r\n const paneTools = document.getElementById(\"pane-tools\");\r\n let islandLoadedOnce = false;\r\n\r\n function openIsland(pane) {\r\n island.classList.add(\"open\");\r\n islandOpenBtn.setAttribute(\"aria-expanded\",\"true\");\r\n if (pane) switchPane(pane);\r\n if (!islandLoadedOnce && islandFrame) {\r\n islandLoadedOnce = true;\r\n islandFrame.src = BROWSER_HOME;\r\n try { islandUrlLabel.textContent = new URL(BROWSER_HOME).host; } catch { islandUrlLabel.textContent = BROWSER_HOME; }\r\n }\r\n }\r\n function closeIsland() {\r\n island.classList.remove(\"open\");\r\n islandOpenBtn.setAttribute(\"aria-expanded\",\"false\");\r\n }\r\n function switchPane(name) {\r\n tabBrowser.classList.toggle(\"active\", name === \"browser\");\r\n tabMedia.classList.toggle(\"active\", name === \"media\");\r\n tabTools.classList.toggle(\"active\", name === \"tools\");\r\n paneBrowser.classList.toggle(\"active\", name === \"browser\");\r\n paneMedia.classList.toggle(\"active\", name === \"media\");\r\n paneTools.classList.toggle(\"active\", name === \"tools\");\r\n }\r\n islandOpenBtn.addEventListener(\"click\", () => openIsland());\r\n \/\/ Close only: top X + browser chrome closes (NO media\/tools chrome)\r\n document.querySelectorAll(\"#island-close-all, #island-close, #island-close-btn\").forEach((btn) => {\r\n btn.addEventListener(\"click\", closeIsland);\r\n });\r\n document.getElementById(\"island-reload\").addEventListener(\"click\", () => {\r\n if (!islandFrame) return;\r\n const url = islandFrame.getAttribute(\"src\") || BROWSER_HOME;\r\n islandFrame.src = \"about:blank\";\r\n requestAnimationFrame(() => { islandFrame.src = url === \"about:blank\" ? BROWSER_HOME : url; });\r\n });\r\n tabBrowser.addEventListener(\"click\", () => switchPane(\"browser\"));\r\n tabMedia.addEventListener(\"click\", () => switchPane(\"media\"));\r\n tabTools.addEventListener(\"click\", () => switchPane(\"tools\"));\r\n document.addEventListener(\"keydown\", (e) => {\r\n if (e.key === \"Escape\" && island.classList.contains(\"open\")) closeIsland();\r\n });\r\n\r\n const audio = document.getElementById(\"media-audio\");\r\n const video = document.getElementById(\"media-video\");\r\n const mediaFile = document.getElementById(\"media-file\");\r\n const mediaPlay = document.getElementById(\"media-play\");\r\n const mediaPrev = document.getElementById(\"media-prev\");\r\n const mediaNext = document.getElementById(\"media-next\");\r\n const mediaClear = document.getElementById(\"media-clear\");\r\n const mediaPip = document.getElementById(\"media-pip\");\r\n const mediaFs = document.getElementById(\"media-fs\");\r\n const mediaTitle = document.getElementById(\"media-title\");\r\n const mediaArtist = document.getElementById(\"media-artist\");\r\n const mediaBar = document.getElementById(\"media-bar\");\r\n const mediaProgress = document.getElementById(\"media-progress\");\r\n const mediaCur = document.getElementById(\"media-cur\");\r\n const mediaDur = document.getElementById(\"media-dur\");\r\n const miniTrack = document.getElementById(\"mini-track\");\r\n const mediaStage = document.getElementById(\"media-stage\");\r\n const mediaArtImg = document.getElementById(\"media-art-img\");\r\n let playlist = [];\r\n let trackIndex = 0;\r\n let activeKind = \"audio\";\r\n\r\n function mediaEl(){ return activeKind === \"video\" ? video : audio; }\r\n function stopOther(){ try { audio.pause(); } catch(e){} try { video.pause(); } catch(e){} }\r\n function fmt(t){ if(!isFinite(t)) return \"0:00\"; const m=Math.floor(t\/60), s=Math.floor(t%60); return m+\":\"+String(s).padStart(2,\"0\"); }\r\n function isVideoFile(file){\r\n const t = (file.type || \"\").toLowerCase();\r\n if (t.startsWith(\"video\/\")) return true;\r\n return \/\\.(mp4|webm|mov|m4v|ogv|mkv)$\/i.test(file.name || \"\");\r\n }\r\n function isAudioFile(file){\r\n const t = (file.type || \"\").toLowerCase();\r\n if (t.startsWith(\"audio\/\")) return true;\r\n return \/\\.(mp3|wav|ogg|m4a|flac|aac|opus|wma)$\/i.test(file.name || \"\");\r\n }\r\n function isVideoTrack(){ return !!(playlist[trackIndex] && playlist[trackIndex].kind === \"video\"); }\r\n\r\n function refreshMediaViewButtons() {\r\n const videoMode = isVideoTrack();\r\n const canPip = !!(document.pictureInPictureEnabled && video && videoMode);\r\n const canFs = videoMode && !!(mediaStage.requestFullscreen || mediaStage.webkitRequestFullscreen || video.requestFullscreen || video.webkitRequestFullscreen || video.webkitEnterFullscreen);\r\n mediaPip.disabled = !canPip;\r\n mediaFs.disabled = !canFs;\r\n mediaPip.classList.toggle(\"on\", document.pictureInPictureElement === video);\r\n const fsEl = document.fullscreenElement || document.webkitFullscreenElement;\r\n mediaFs.classList.toggle(\"on\", fsEl === mediaStage || fsEl === video);\r\n mediaPip.title = canPip ? \"Picture in Picture\" : \"PiP only works for video\";\r\n mediaFs.title = canFs ? \"Fullscreen\" : \"Fullscreen only works for video\";\r\n }\r\n\r\n function setNowPlayingUI(track, playing) {\r\n mediaTitle.textContent = track ? track.title : \"No media loaded\";\r\n mediaArtist.textContent = track ? `${track.kind.toUpperCase()} \u00b7 ${track.artist}` : \"Add mp3, wav, mp4, webm\u2026\";\r\n miniTrack.textContent = track ? track.name : \"Not playing\";\r\n island.classList.toggle(\"media-compact\", !!track);\r\n island.classList.toggle(\"media-paused\", !playing);\r\n mediaPlay.textContent = playing ? \"\u23f8\" : \"\u25b6\";\r\n if (sbNowState) sbNowState.textContent = track ? (playing ? `\u25b6 ${track.title}` : `\u23f8 ${track.title}`) : \"Nothing\";\r\n\r\n const isVid = !!(track && track.kind === \"video\");\r\n mediaStage.classList.toggle(\"mode-video\", isVid);\r\n mediaStage.classList.toggle(\"mode-audio\", !isVid);\r\n mediaStage.classList.toggle(\"has-art\", !!(track && track.art && !isVid));\r\n\r\n if (track && track.art && !isVid) {\r\n mediaArtImg.src = track.art;\r\n mediaArtImg.classList.add(\"has\");\r\n } else {\r\n mediaArtImg.removeAttribute(\"src\");\r\n mediaArtImg.classList.remove(\"has\");\r\n }\r\n if (isVid) {\r\n video.style.display = \"block\";\r\n mediaArtImg.style.display = \"none\";\r\n } else {\r\n video.style.display = \"none\";\r\n }\r\n\r\n if (\"mediaSession\" in navigator) {\r\n if (!track) { navigator.mediaSession.metadata = null; }\r\n else {\r\n navigator.mediaSession.metadata = new MediaMetadata({\r\n title: track.title, artist: track.artist, album: \"Jefx Island\",\r\n artwork: track.art ? [{ src: track.art, sizes: \"512x512\", type: \"image\/png\" }] : []\r\n });\r\n navigator.mediaSession.playbackState = playing ? \"playing\" : \"paused\";\r\n }\r\n }\r\n refreshMediaViewButtons();\r\n }\r\n\r\n function loadTrack(i) {\r\n if (!playlist.length) return;\r\n trackIndex = (i + playlist.length) % playlist.length;\r\n const track = playlist[trackIndex];\r\n stopOther();\r\n activeKind = track.kind;\r\n const el = mediaEl();\r\n if (activeKind === \"video\") {\r\n try { audio.removeAttribute(\"src\"); audio.load(); } catch(e){}\r\n video.removeAttribute(\"src\");\r\n video.src = track.url;\r\n video.load();\r\n video.style.display = \"block\";\r\n } else {\r\n try { video.pause(); video.removeAttribute(\"src\"); video.load(); video.style.display = \"none\"; } catch(e){}\r\n audio.src = track.url;\r\n audio.load();\r\n }\r\n el.muted = silentMode;\r\n mediaBar.style.width = \"0%\";\r\n mediaCur.textContent = \"0:00\";\r\n mediaDur.textContent = \"0:00\";\r\n setNowPlayingUI(track, false);\r\n }\r\n\r\n async function playCurrent() {\r\n if (!playlist.length) return;\r\n const el = mediaEl();\r\n try {\r\n el.muted = silentMode;\r\n if (el.readyState < 2) {\r\n el.load();\r\n await new Promise((resolve) => {\r\n const done = () => { el.removeEventListener(\"loadeddata\", done); el.removeEventListener(\"error\", done); resolve(); };\r\n el.addEventListener(\"loadeddata\", done, { once: true });\r\n el.addEventListener(\"error\", done, { once: true });\r\n setTimeout(done, 1500);\r\n });\r\n }\r\n await el.play();\r\n setNowPlayingUI(playlist[trackIndex], true);\r\n } catch (err) {\r\n console.warn(\"play failed\", err);\r\n setNowPlayingUI(playlist[trackIndex], false);\r\n showToast(\"Play blocked \u2014 tap Play again\");\r\n }\r\n }\r\n function pauseCurrent(){\r\n try { mediaEl().pause(); } catch(e){}\r\n setNowPlayingUI(playlist[trackIndex] || null, false);\r\n }\r\n\r\n function bindMediaEvents(el) {\r\n el.addEventListener(\"timeupdate\", () => {\r\n if (el !== mediaEl()) return;\r\n const p = el.duration ? (el.currentTime \/ el.duration) * 100 : 0;\r\n mediaBar.style.width = p + \"%\";\r\n mediaCur.textContent = fmt(el.currentTime);\r\n });\r\n el.addEventListener(\"loadedmetadata\", () => { if (el === mediaEl()) mediaDur.textContent = fmt(el.duration); });\r\n el.addEventListener(\"durationchange\", () => { if (el === mediaEl()) mediaDur.textContent = fmt(el.duration); });\r\n el.addEventListener(\"ended\", () => {\r\n if (el !== mediaEl()) return;\r\n if (playlist.length > 1) { loadTrack(trackIndex+1); playCurrent(); }\r\n else setNowPlayingUI(playlist[trackIndex]||null, false);\r\n });\r\n el.addEventListener(\"play\", () => { if (el === mediaEl()) setNowPlayingUI(playlist[trackIndex]||null, true); });\r\n el.addEventListener(\"pause\", () => { if (el === mediaEl()) setNowPlayingUI(playlist[trackIndex]||null, false); });\r\n el.addEventListener(\"error\", () => {\r\n if (el !== mediaEl()) return;\r\n console.warn(\"media error\", el.error);\r\n showToast(\"Can't play this file\");\r\n setNowPlayingUI(playlist[trackIndex]||null, false);\r\n });\r\n }\r\n bindMediaEvents(audio);\r\n bindMediaEvents(video);\r\n\r\n async function togglePiP() {\r\n if (!isVideoTrack() || !video) { showToast(\"Load a video for PiP\"); return; }\r\n if (!document.pictureInPictureEnabled) { showToast(\"PiP not supported here\"); return; }\r\n try {\r\n if (document.pictureInPictureElement === video) await document.exitPictureInPicture();\r\n else {\r\n if (video.paused) { video.muted = silentMode; await video.play().catch(() => {}); }\r\n await video.requestPictureInPicture();\r\n }\r\n } catch (err) { showToast(\"PiP failed\"); console.warn(err); }\r\n refreshMediaViewButtons();\r\n }\r\n async function toggleFullscreen() {\r\n if (!isVideoTrack()) { showToast(\"Load a video for fullscreen\"); return; }\r\n const doc = document;\r\n const activeFs = doc.fullscreenElement || doc.webkitFullscreenElement;\r\n try {\r\n if (activeFs === mediaStage || activeFs === video) {\r\n if (doc.exitFullscreen) await doc.exitFullscreen();\r\n else if (doc.webkitExitFullscreen) doc.webkitExitFullscreen();\r\n } else {\r\n const target = mediaStage;\r\n if (target.requestFullscreen) await target.requestFullscreen();\r\n else if (target.webkitRequestFullscreen) target.webkitRequestFullscreen();\r\n else if (video.requestFullscreen) await video.requestFullscreen();\r\n else if (video.webkitEnterFullscreen) video.webkitEnterFullscreen();\r\n else { showToast(\"Fullscreen not supported\"); return; }\r\n if (video.paused) { video.muted = silentMode; await video.play().catch(() => {}); }\r\n }\r\n } catch (err) { showToast(\"Fullscreen failed\"); console.warn(err); }\r\n refreshMediaViewButtons();\r\n }\r\n mediaPip.addEventListener(\"click\", togglePiP);\r\n mediaFs.addEventListener(\"click\", toggleFullscreen);\r\n video.addEventListener(\"enterpictureinpicture\", refreshMediaViewButtons);\r\n video.addEventListener(\"leavepictureinpicture\", refreshMediaViewButtons);\r\n document.addEventListener(\"fullscreenchange\", refreshMediaViewButtons);\r\n document.addEventListener(\"webkitfullscreenchange\", refreshMediaViewButtons);\r\n\r\n mediaProgress.addEventListener(\"click\", (e) => {\r\n const el = mediaEl(); if (!el.duration) return;\r\n const rect = mediaProgress.getBoundingClientRect();\r\n el.currentTime = Math.min(1, Math.max(0, (e.clientX - rect.left) \/ rect.width)) * el.duration;\r\n });\r\n mediaPlay.addEventListener(\"click\", () => {\r\n if (!playlist.length) { mediaFile.click(); return; }\r\n if (mediaEl().paused) playCurrent(); else pauseCurrent();\r\n });\r\n mediaPrev.addEventListener(\"click\", () => { if (!playlist.length) return; loadTrack(trackIndex-1); playCurrent(); });\r\n mediaNext.addEventListener(\"click\", () => { if (!playlist.length) return; loadTrack(trackIndex+1); playCurrent(); });\r\n mediaClear.addEventListener(\"click\", () => {\r\n pauseCurrent();\r\n playlist.forEach(t => { try { URL.revokeObjectURL(t.url); } catch(e){} if (t.art) try { URL.revokeObjectURL(t.art); } catch(e){} });\r\n playlist = []; trackIndex = 0; activeKind = \"audio\";\r\n try { audio.removeAttribute(\"src\"); audio.load(); } catch(e){}\r\n try { video.removeAttribute(\"src\"); video.load(); video.style.display = \"none\"; } catch(e){}\r\n setNowPlayingUI(null, false);\r\n mediaBar.style.width = \"0%\"; mediaCur.textContent=\"0:00\"; mediaDur.textContent=\"0:00\";\r\n });\r\n mediaFile.addEventListener(\"change\", () => {\r\n const files = [...(mediaFile.files || [])].filter(f => isAudioFile(f) || isVideoFile(f));\r\n if (!files.length) { showToast(\"No supported media in selection\"); return; }\r\n const start = playlist.length;\r\n files.forEach((file) => {\r\n const kind = isVideoFile(file) ? \"video\" : \"audio\";\r\n playlist.push({\r\n name: file.name,\r\n title: file.name.replace(\/\\.[^\/.]+$\/, \"\"),\r\n artist: \"Local file\",\r\n url: URL.createObjectURL(file),\r\n art: null,\r\n kind,\r\n type: file.type || \"\"\r\n });\r\n });\r\n mediaFile.value = \"\";\r\n loadTrack(start);\r\n openIsland(\"media\");\r\n setTimeout(() => { playCurrent(); }, 50);\r\n });\r\n if (\"mediaSession\" in navigator) {\r\n try {\r\n navigator.mediaSession.setActionHandler(\"play\", () => playCurrent());\r\n navigator.mediaSession.setActionHandler(\"pause\", () => pauseCurrent());\r\n navigator.mediaSession.setActionHandler(\"previoustrack\", () => { loadTrack(trackIndex-1); playCurrent(); });\r\n navigator.mediaSession.setActionHandler(\"nexttrack\", () => { loadTrack(trackIndex+1); playCurrent(); });\r\n } catch (e) {}\r\n }\r\n refreshMediaViewButtons();\r\n setNowPlayingUI(null, false);\r\n\r\n const notesEl = document.getElementById(\"tool-notes\");\r\n notesEl.value = localStorage.getItem(\"jefx-island-notes\") || \"\";\r\n document.getElementById(\"tool-notes-save\").addEventListener(\"click\", () => {\r\n localStorage.setItem(\"jefx-island-notes\", notesEl.value || \"\"); showToast(\"Notes saved\");\r\n });\r\n document.getElementById(\"tool-notes-clear\").addEventListener(\"click\", () => {\r\n notesEl.value = \"\"; localStorage.removeItem(\"jefx-island-notes\");\r\n });\r\n\r\n let timerLeft = 25 * 60, timerId = null;\r\n const timerDisplay = document.getElementById(\"timer-display\");\r\n function renderTimer(){ const m=Math.floor(timerLeft\/60), s=timerLeft%60; timerDisplay.textContent=`${String(m).padStart(2,\"0\")}:${String(s).padStart(2,\"0\")}`; }\r\n function stopTimer(){ clearInterval(timerId); timerId=null; }\r\n document.getElementById(\"timer-start\").addEventListener(\"click\", () => {\r\n if (timerId) return;\r\n const mins = Math.max(0, parseInt(document.getElementById(\"timer-mins\").value || \"0\", 10));\r\n const secs = Math.max(0, Math.min(59, parseInt(document.getElementById(\"timer-secs\").value || \"0\", 10)));\r\n if (timerLeft <= 0) timerLeft = Math.max(1, mins * 60 + secs);\r\n renderTimer();\r\n timerId = setInterval(() => {\r\n timerLeft -= 1; renderTimer();\r\n if (timerLeft <= 0) {\r\n stopTimer(); showToast(\"Timer done\");\r\n if (!notificationsBlocked && NativeNotification && NativeNotification.permission === \"granted\") {\r\n try { new window.Notification(\"Jefx Timer\", { body: \"Focus timer finished\" }); } catch(e) {}\r\n }\r\n }\r\n }, 1000);\r\n });\r\n document.getElementById(\"timer-pause\").addEventListener(\"click\", stopTimer);\r\n document.getElementById(\"timer-reset\").addEventListener(\"click\", () => {\r\n stopTimer();\r\n const mins = Math.max(0, parseInt(document.getElementById(\"timer-mins\").value || \"25\", 10));\r\n const secs = Math.max(0, Math.min(59, parseInt(document.getElementById(\"timer-secs\").value || \"0\", 10)));\r\n timerLeft = Math.max(1, mins * 60 + secs); renderTimer();\r\n });\r\n renderTimer();\r\n\r\n const pinList = document.getElementById(\"pin-list\");\r\n let pins = [];\r\n try { pins = JSON.parse(localStorage.getItem(\"jefx-pins\") || \"[]\"); } catch { pins = []; }\r\n function savePins(){ localStorage.setItem(\"jefx-pins\", JSON.stringify(pins)); }\r\n function renderPins(){\r\n pinList.innerHTML = \"\";\r\n pins.forEach((p, i) => {\r\n const li = document.createElement(\"li\");\r\n const label = document.createElement(\"span\"); label.textContent = p.title || p.url; label.title = p.url;\r\n const openBtn = document.createElement(\"button\"); openBtn.type = \"button\"; openBtn.textContent = \"Open\";\r\n openBtn.addEventListener(\"click\", () => {\r\n openIsland(\"browser\"); islandLoadedOnce = true; islandFrame.src = p.url;\r\n try { islandUrlLabel.textContent = new URL(p.url).host; } catch { islandUrlLabel.textContent = p.url; }\r\n });\r\n const delBtn = document.createElement(\"button\"); delBtn.type = \"button\"; delBtn.textContent = \"\u2715\";\r\n delBtn.addEventListener(\"click\", () => { pins.splice(i,1); savePins(); renderPins(); });\r\n li.append(label, openBtn, delBtn); pinList.appendChild(li);\r\n });\r\n }\r\n document.getElementById(\"pin-add\").addEventListener(\"click\", () => {\r\n const raw = (document.getElementById(\"pin-url\").value || \"\").trim();\r\n if (!raw) return;\r\n try {\r\n const u = new URL(raw, location.href);\r\n pins.unshift({ url: u.href, title: u.host });\r\n if (pins.length > 15) pins.length = 15;\r\n document.getElementById(\"pin-url\").value = \"\"; savePins(); renderPins();\r\n } catch { showToast(\"Invalid URL\"); }\r\n });\r\n renderPins();\r\n\r\n let loaderHidden = false;\r\n function hideLoader() {\r\n if (loaderHidden) return;\r\n const el = document.getElementById(\"jefx-loader\") || loader;\r\n if (!el || el.classList.contains(\"is-hidden\")) { loaderHidden = true; if (status) status.classList.add(\"ready\"); return; }\r\n loaderHidden = true; el.classList.add(\"is-hidden\");\r\n setTimeout(() => { try { el.remove(); } catch (e) {} if (status) status.classList.add(\"ready\"); }, 550);\r\n }\r\n function mainHasLoaded() {\r\n const main = document.querySelector(\"#main-outlet, .main-outlet, #content, .main-content, main\");\r\n if (main && main.children.length > 0) return true;\r\n if (!document.querySelector(\"#main-outlet, .main-outlet, #content, .main-content, main\")) {\r\n return document.readyState === \"complete\" || document.readyState === \"interactive\";\r\n }\r\n return false;\r\n }\r\n function armLoaderHide() {\r\n if (mainHasLoaded()) setTimeout(hideLoader, 700);\r\n else {\r\n const obs = new MutationObserver(() => { if (mainHasLoaded()) { obs.disconnect(); setTimeout(hideLoader, 700); } });\r\n obs.observe(document.body, { childList: true, subtree: true });\r\n setTimeout(() => { obs.disconnect(); hideLoader(); }, 2500);\r\n }\r\n window.addEventListener(\"load\", () => setTimeout(hideLoader, 400), { once: true });\r\n setTimeout(hideLoader, 3000);\r\n }\r\n armLoaderHide();\r\n })();\r\n <\/script>\r\n<\/body>\r\n<\/html>", "guest_layout": "", "css": null, "settings": null, "custom_properties": null, "member_backdrops": false }