/* r933 material skin; r934 compacts the six native action cells.
   Input semantics, hidden states, motion geometry and playback stay untouched.
   Declare this important layer before the legacy contract layer. */
@layer sukun-r933-controls {
/* r974: coat panel controls, never a hotspot within the wheel frame.
   Gem actions, counter and material-matched leaf navigation retain their own
   transparent paint and fitted geometry from wheels-r924.css.
   No display, positioning, dimensions or input handlers are changed here.
   r978: full-card interaction surfaces stay transparent. Their native text
   is a lower sibling, so a filled gemstone skin would hide the entire card. */
html body.sukun-zikir-tab:has(#r920Practice[data-mode="berhet"]:not([hidden])) :where(#tab-zkr,#r616ToolsSheet,#r642ZikirInfoCard) :where(
 button:not(.sw):not(.dockTipHelp):not(.r924Gem):not(.r959WheelNav):not(.r746EsmaCardBtn):not(#r611CurrentZikirName):not(#r920NameInfo):not(#r920Counter):not(#zCountVisual):not(:where(#r924WheelFrame *)),
 select,summary) {
 --r972-art:var(--r933-gem-sapphire);--r972-face:#0a2637;
 border:1px solid transparent!important;
 border-image:var(--r972-art) 330 fill / 9px / 0 stretch!important;
 background:var(--r972-face)!important;color:#fff1d5!important;
 box-shadow:none!important;text-shadow:0 1px 3px #000!important;
}
html body.sukun-zikir-tab:has(#r920Practice[data-mode="berhet"]:not([hidden])) :is(#tab-zkr,#r616ToolsSheet,#r642ZikirInfoCard) :is(
 summary,#r938PanelToggle,#r920Restart,#r920More,#r972TickDelete) {
 --r972-art:var(--r933-gem-diamond);--r972-face:#142733;
}
html body.sukun-zikir-tab:has(#r920Practice[data-mode="berhet"]:not([hidden])) #tab-zkr :is(
 #r932EasyStop,#r972TickRecord,.recording,[data-act="stop"],button[id$="Stop"]) {
 --r972-art:var(--r933-gem-ruby);--r972-face:#401023;
}
html body.sukun-zikir-tab:has(#r920Practice[data-mode="berhet"]:not([hidden])) #tab-zkr :is(
 #r920TefEnter,#r920TefExit,#r932QuickWheel,[data-r616-znav="tef"],#r972TickTest) {
 --r972-art:var(--r933-gem-amethyst);--r972-face:#281337;
}
html body.sukun-zikir-tab:has(#r920Practice[data-mode="berhet"]:not([hidden])) #tab-zkr :is(
 #r932EasyPlay,#r920ModeBerhet,#r920AtlasOpen,[data-act="transport"],button[id$="Play"],button[aria-pressed="true"]:not(#r972TickRecord):not(.recording):not(#r920ModeEsma):not(#r920ModeBerhet)) {
 --r972-art:var(--r933-gem-emerald);--r972-face:#083b2c;
}
html body.sukun-zikir-tab:has(#r920Practice[data-mode="berhet"]:not([hidden])) #tab-zkr :is(
 #r971ManualFeedbackSettings,#r972TickSoundSettings,fieldset,.zMegaGroup,.zMegaBody,
 .r616AccCard,.r616SheetCard,#berhetAtlas,#berhetSeyir,#r938Panel,.targetDetailCard) {
 border:1px solid #bba06b88!important;
 border-image:var(--r933-panel-frame) 250 / 8px / 0 stretch!important;
 background:linear-gradient(145deg,#0b2826c7,#071725c7)!important;
 color:#f4ead1!important;box-shadow:none!important;
}
/* Berhetiyye scene clarity: hollow frames pass the scene through. Local text
   panels retain 76–78% dark scrims; gemstone controls keep their opaque faces.
   No element opacity or backdrop blur is added. */
/* r1074: navigation follows the selected family on every ordinary tab. */
html[data-r1074-theme="berhet"] body .tabs {
 border:1px solid transparent!important;
 border-image:var(--r933-panel-frame) 250 / 7px / 0 stretch!important;
 background:linear-gradient(135deg,#11282599,#08182499)!important;
}
html[data-r1074-theme="berhet"] body .tabs :is(button,.tabTekke) {
 border:1px solid transparent!important;
 border-image:var(--r933-gem-diamond) 330 fill / 6px / 0 stretch!important;
 background:#10262beb!important;color:#f8e7c4!important;box-shadow:none!important;
}
html[data-r1074-theme="berhet"] body .tabs button.act {
 border-image-source:var(--r933-gem-emerald)!important;background:#10382e!important;
}
html body.sukun-zikir-tab:has(#r920Practice[data-mode="berhet"]:not([hidden])) :is(#tab-zkr,#r616ToolsSheet) input:not([type="range"]):not([type="checkbox"]):not([type="radio"]) {
 border-color:#bba06b99!important;background:#0e202cee!important;color:#f7ead1!important;
 box-shadow:inset 0 0 0 1px #d1b76f22!important;
}
html body.sukun-zikir-tab:has(#r920Practice[data-mode="berhet"]:not([hidden])) :is(#tab-zkr,#r616ToolsSheet) button.sw::before {
 border-color:#b29a64!important;background:linear-gradient(140deg,#283744,#0b1927)!important;
}
html body.sukun-zikir-tab:has(#r920Practice[data-mode="berhet"]:not([hidden])) :is(#tab-zkr,#r616ToolsSheet) button.sw::after {
 background:var(--r933-gem-diamond) center/100% 100% no-repeat!important;
}
html body.sukun-zikir-tab:has(#r920Practice[data-mode="berhet"]:not([hidden])) :is(#tab-zkr,#r616ToolsSheet) button.sw.on::before {
 background:linear-gradient(140deg,#206a4b,#0b3025)!important;
}
html body.sukun-zikir-tab:has(#r920Practice[data-mode="berhet"]:not([hidden])) :is(#tab-zkr,#r616ToolsSheet) button.sw.on::after {
 background:var(--r933-gem-emerald) center/100% 100% no-repeat!important;
}
html body.sukun-zikir-tab:has(#r920Practice[data-mode="berhet"]:not([hidden])) :is(#tab-zkr,#r616ToolsSheet) :is(button,select,summary,input):not(:where(#r924WheelFrame *)):focus-visible {
 outline:2px solid #ffeab2!important;outline-offset:2px!important;
}
#r920Practice[data-mode="berhet"]:not([hidden]) {
 --r933-control-art:var(--r933-gem-diamond,none);--r933-control-ink:#fff4d5;
 --r933-control-dark:#101d28;--r920-accent:#decda2;--r920-muted:#d8d8ce;
}

/* Settings can be reparented into the tools dialog. Coat the actual host. */
html body.sukun-zikir-tab:has(#r920Practice[data-mode="berhet"]:not([hidden])) :is(#r616ToolsSheet,.r616SheetCard,.r616AccCard) {
 border:1px solid #bba06b88!important;
 border-image:var(--r933-panel-frame) 250 / 9px / 0 stretch!important;
 background:linear-gradient(145deg,#0b2826c7,#071725c7)!important;color:#f4ead1!important;
}
html body.sukun-zikir-tab:has(#r920Practice[data-mode="berhet"]:not([hidden])) :is(#tab-zkr,#r616ToolsSheet) input[type="range"] {
 accent-color:#b5d4a8!important;
}
html body.sukun-zikir-tab:has(#r920Practice[data-mode="berhet"]:not([hidden])) :is(#tab-zkr,#r616ToolsSheet) input[type="range"]::-webkit-slider-runnable-track {
 background:linear-gradient(90deg,#c8b775,#466953)!important;border:1px solid #bba16a!important;
}
html body.sukun-zikir-tab:has(#r920Practice[data-mode="berhet"]:not([hidden])) :is(#tab-zkr,#r616ToolsSheet) input[type="range"]::-webkit-slider-thumb {
 background:var(--r933-gem-diamond) center/100% 100% no-repeat!important;border-color:#d7b66d!important;
}
html body.sukun-zikir-tab:has(#r920Practice[data-mode="berhet"]:not([hidden])) :is(#tab-zkr,#r616ToolsSheet) input[type="range"]::-moz-range-thumb {
 background:var(--r933-gem-diamond) center/100% 100% no-repeat!important;border-color:#d7b66d!important;
}

/* Small controls use the same real blank gemstones as the larger cards.
   Each native hit target remains the sole input owner. No overlay is added. */
#r920Practice[data-mode="berhet"]:not([hidden]) :where(
 .r920Modes button,.r920Path>button,#r932WheelControls button,
 .r920Transport button,#r920Actions .spkBtn,#r920More,
 #r920RecordingRetry,#r920SceneRetry,#r924WheelRetry,#r925UpdateAction,
 #r679ZikirAyarBox button:not(.sw):not(#targetHint)) {
 background:var(--r933-control-art,none) center/100% 100% no-repeat,
  radial-gradient(ellipse,var(--r933-control-dark,#101d28) 0 54%,transparent 72%) center/86% 76% no-repeat!important;
 border:0!important;border-radius:13px!important;box-shadow:none!important;
 color:var(--r933-control-ink,#fff4d5)!important;text-shadow:0 1px 3px #02090b,0 0 5px #02090bbf!important;
 filter:none!important;overflow:hidden!important;
}
/* The native name card and long explanation button use a hollow frame so
   Arabic, long names, and help text keep their complete usable text area. */
#r920Practice[data-mode="berhet"]:not([hidden]) :is(#r920NameInfo,#targetHint) {
 border:1px solid #b6a06b77!important;
 border-image:var(--r933-panel-frame,none) 250 / 8px / 0 stretch!important;
 background:linear-gradient(135deg,#10362d8f,#0a1d328f)!important;
 color:#f4e8c9!important;text-shadow:0 1px 3px #001218!important;
}
#r920Practice[data-mode="berhet"]:not([hidden]) #r920Phase:not(:empty) {
 color:#dfddc8!important;text-shadow:0 1px 3px #001019!important;
}
/* Material assignment is semantic and stable when a control changes state. */
#r920Practice[data-mode="berhet"]:not([hidden]) :is(
 #r920ModeBerhet,#r920AtlasOpen,#r932EasyPlay,#r932EasyPlus,#favBtn,
 #ebCalcBtn,#freeApplyBtn,#r924WheelRetry) {
 --r933-control-art:var(--r933-gem-emerald,none);--r933-control-dark:#053529;
}
#r920Practice[data-mode="berhet"]:not([hidden]) :is(
 #r932QuickWheel,#r920TefEnter,#niyetRecBtn,#r920More,#tgtManBtn) {
 --r933-control-art:var(--r933-gem-amethyst,none);--r933-control-dark:#29183a;
}
#r920Practice[data-mode="berhet"]:not([hidden])[data-phase="PLAYING"] #r932EasyPlay,
#r920Practice[data-mode="berhet"]:not([hidden])[data-phase="PREPARING"] #r932EasyPlay {
 --r933-control-art:var(--r933-gem-amethyst,none);--r933-control-dark:#29183a;
}
#r920Practice[data-mode="berhet"]:not([hidden]) :is(
 #r932QuickScene,#r920Previous,#r920Next,#spkOnce,
 #r852VoiceRefresh,#r852ArTest,#huDinle,#r920SceneRetry) {
 --r933-control-art:var(--r933-gem-sapphire,none);--r933-control-dark:#122d53;
}
#r920Practice[data-mode="berhet"]:not([hidden]) #zDonguBtn {
 --r933-control-art:var(--r935-gem-topaz,none);--r933-control-dark:#492803;
}
#r920Practice[data-mode="berhet"]:not([hidden]) :is(
 #r932EasyStop,#itemRecBtn,#r922RecordVoice,#huKayit,#r920RecordingRetry) {
 --r933-control-art:var(--r933-gem-ruby,none);--r933-control-dark:#421726;
}
#r920Practice[data-mode="berhet"]:not([hidden]) :is(
 #r932EasyMinus,#r932QuickClose,#r920Restart,#r920ModeEsma,#zBarHelp,
 #ebBtn,#freeBtn,#r679ZikirAyarBox .huK) {
 --r933-control-art:var(--r933-gem-diamond,none);--r933-control-dark:#152737;
}
/* Nine-slice wide controls retain a constant-width bezel: long labels stay
   over the flat gemstone face instead of crossing stretched facet edges. */
#r920Practice[data-mode="berhet"]:not([hidden]) :is(#r932QuickWheel,#r932QuickScene,#r920More,#r852VoiceRefresh,#r922RecordVoice,#huKayit,#huDinle) {
 background:radial-gradient(ellipse,var(--r933-control-dark,#101d28),transparent 72%)!important;
 border:1px solid transparent!important;
 border-image:var(--r933-control-art,none) 330 fill / 11px / 0 stretch!important;
}
#r920Practice[data-mode="berhet"]:not([hidden]) :is(#r852VoiceRefresh,#r922RecordVoice,#huKayit,#huDinle) {
 height:auto!important;max-height:none!important;padding:10px 17px!important;
 white-space:normal!important;overflow-wrap:break-word!important;
}
/* Captions retain their current layout. Reserve the artwork's raised edges. */
#r920Practice[data-mode="berhet"]:not([hidden]) :is(.r920Transport button,.r920Modes button,.r920Path>button) {
 padding-inline:12px!important;font-weight:650!important;
}
#r920Practice[data-mode="berhet"]:not([hidden]) #r932WheelControls .r932VisualShortcuts button {
 padding-inline:14px!important;min-height:58px!important;height:58px!important;
}
#r920Practice[data-mode="berhet"]:not([hidden]) #r932WheelControls .r932VisualShortcuts small {
 color:#e1e8e1!important;text-shadow:0 1px 3px #00111a!important;
}
#r920Practice[data-mode="berhet"]:not([hidden]) #r920Actions .spkBtn {
 padding:8px 9px!important;min-height:64px!important;color:#fff3d5!important;
 /* Legacy nth-child rules made Favorite and Help span two grid columns. */
 grid-column:auto!important;grid-row:auto!important;min-width:0!important;
 width:100%!important;max-width:100%!important;box-sizing:border-box!important;
}
#r920Practice[data-mode="berhet"]:not([hidden]) #r920Actions :is(#niyetRecBtn,#favBtn,#zBarHelp) {
 height:56px!important;min-height:56px!important;max-height:56px!important;
 padding:6px 8px!important;gap:4px!important;
 align-items:center!important;justify-content:center!important;
}
#r920Practice[data-mode="berhet"]:not([hidden]) #r920Actions .spkBtn :is(svg,.ico) {
 color:#f4e6bb!important;filter:drop-shadow(0 1px 2px #02121e)!important;
}
#r920Practice[data-mode="berhet"]:not([hidden]) #r920Actions .spkBtn span {
 color:inherit!important;letter-spacing:.04em!important;font-weight:650!important;
}
#r920Practice[data-mode="berhet"]:not([hidden]) :is(#favBtn.on,#r679ZikirAyarBox .huK.on,#r679ZikirAyarBox .targetModeBtn.act,.r920Modes button[aria-pressed="true"]) {
 box-shadow:inset 0 -3px 0 #e9d78b!important;
}
/* Counter cards remain two equal responsive cells. Their values have room for
   large Ebced targets, rather than forcing a single unbroken horizontal line. */
#r920Practice[data-mode="berhet"]:not([hidden]) .r920Stats {
 display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
 gap:8px!important;max-width:420px!important;margin-inline:auto!important;
}
#r920Practice[data-mode="berhet"]:not([hidden]) .r920Stats>span {
 display:flex!important;flex-wrap:wrap!important;align-items:center!important;justify-content:center!important;
 align-content:center!important;box-sizing:border-box!important;
 gap:1px 5px!important;min-width:0!important;padding:14px 18px!important;border:0!important;
 background:var(--r933-gem-diamond,none) center/100% 100% no-repeat,
  linear-gradient(145deg,#19303be8,#0a1927ec) center/86% 76% no-repeat!important;
 color:#e6e5d7!important;font-size:11px!important;line-height:1.15!important;text-shadow:0 1px 3px #001019!important;
}
#r920Practice[data-mode="berhet"]:not([hidden]) .r920Stats>span>b {
 display:block!important;flex:1 0 100%!important;max-width:100%!important;margin:0!important;
 text-align:center!important;font-size:clamp(20px,6vw,26px)!important;line-height:1.12!important;overflow-wrap:anywhere!important;
}
#r920Practice[data-mode="berhet"]:not([hidden]) .r920Stats svg {
 width:15px!important;height:15px!important;flex:0 0 15px!important;stroke:#ecdba7!important;
}
/* Details are calm dark panels with ornament at their boundary, not in text. */
#r920Practice[data-mode="berhet"]:not([hidden]) :is(
 #r920ViewOptions,#r920JourneySettings,#r679ZikirAyarBox,#r932QuickPicker) {
 border:1px solid #b8964f8c!important;border-radius:14px!important;
 border-image:var(--r933-panel-frame,none) 250 / 10px / 0 stretch!important;
 background:linear-gradient(145deg,#102923c2,#091522c2)!important;
 box-shadow:inset 0 0 0 2px #100e0866,inset 0 1px 0 #f6d69140!important;
}
#r920Practice[data-mode="berhet"]:not([hidden]) :is(#r920ViewOptions,#r920JourneySettings,#r679ZikirAyarBox)>summary {
 --r933-control-art:var(--r933-gem-amethyst,none);
 background:var(--r933-control-art) center/100% 100% no-repeat,
  linear-gradient(130deg,#211331,#0c1a25) center/89% 78% no-repeat!important;
 color:#fff0cb!important;text-shadow:0 1px 3px #020811!important;
 padding:14px 20px!important;min-height:56px!important;height:auto!important;max-height:none!important;border-radius:12px!important;
 border:1px solid transparent!important;border-image:var(--r933-control-art) 330 fill / 12px / 0 stretch!important;
}
#r920Practice[data-mode="berhet"]:not([hidden]) #r920JourneySettings>summary {
 --r933-control-art:var(--r933-gem-emerald,none);
}
#r920Practice[data-mode="berhet"]:not([hidden]) #r679ZikirAyarBox>summary {
 --r933-control-art:var(--r933-gem-sapphire,none);
}
#r920Practice[data-mode="berhet"]:not([hidden]) #r679ZikirAyarBox .r679SettingsTitle small {
 color:#d8e2e0!important;
}
#r920Practice[data-mode="berhet"]:not([hidden]) :is(#r924WheelGalleryDetails,.r852Advanced)>summary {
 border-bottom:1px solid #d6b87363!important;color:#f2dfb4!important;
}
/* Keep real select affordances and option menus; no decorative layer blocks them. */
#r920Practice[data-mode="berhet"]:not([hidden]) select {
 color:#f3ecd7!important;background:linear-gradient(130deg,#153745,#10192d)!important;
 border:1px solid #c2a261ad!important;border-radius:12px!important;
 box-shadow:inset 0 1px 0 #f5d68b2b,inset 0 -2px 0 #041019!important;
 border-image:var(--r933-gem-sapphire,none) 300 fill / 8px / 0 stretch!important;
 color-scheme:dark!important;appearance:auto!important;
}
#r920Practice[data-mode="berhet"]:not([hidden]) :is(select option,select optgroup) {
 background:#10272b!important;color:#f2ead8!important;
}
#r920Practice[data-mode="berhet"]:not([hidden]) :is(input[type="number"],input[type="text"]) {
 border-color:#baa16c99!important;background:#101f2bf2!important;color:#f3e8ce!important;
}
#r920Practice[data-mode="berhet"]:not([hidden]) :is(input[type="range"],input[type="checkbox"]) {
 accent-color:#92cfae!important;
}
/* Existing switches retain their original native state and thumb position. */
#r920Practice[data-mode="berhet"]:not([hidden]) #r679ZikirAyarBox button.sw:not(#arTgl):not(#optSpeak)::before {
 border-color:#ae9a6777!important;background:linear-gradient(150deg,#253044,#111d2c)!important;
}
#r920Practice[data-mode="berhet"]:not([hidden]) #r679ZikirAyarBox button.sw:not(#arTgl):not(#optSpeak)::after {
 background:var(--r933-gem-diamond,none) center/100% 100% no-repeat,#d9e0cf!important;
 box-shadow:0 1px 3px #0008!important;
}
#r920Practice[data-mode="berhet"]:not([hidden]) #r679ZikirAyarBox button.sw.on:not(#arTgl):not(#optSpeak)::before {
 border-color:#b4c99b!important;background:linear-gradient(140deg,#12684f,#0b342c)!important;
}
#r920Practice[data-mode="berhet"]:not([hidden]) #r679ZikirAyarBox button.sw.on:not(#arTgl):not(#optSpeak)::after {
 background:var(--r933-gem-emerald,none) center/100% 100% no-repeat,#a3d8ad!important;
}
#r920Practice[data-mode="berhet"]:not([hidden]) #r852VoiceCard :is(#arTgl,#optSpeak) {
 background:var(--r933-gem-diamond,none) center/100% 100% no-repeat,#10242d!important;
 color:#f6efd6!important;border:0!important;text-shadow:0 1px 3px #00101b!important;
}
#r920Practice[data-mode="berhet"]:not([hidden]) #r852VoiceCard :is(#arTgl.on,#optSpeak.on) {
 background:var(--r933-gem-emerald,none) center/100% 100% no-repeat,#143d31!important;
}
#r920Practice[data-mode="berhet"]:not([hidden]) #r924WheelGallery>button {
 border-color:#be9c6477!important;background:linear-gradient(145deg,#102d29e8,#0c1a2ae8)!important;
}
#r920Practice[data-mode="berhet"]:not([hidden]) #r924WheelGallery>button[aria-pressed="true"] {
 border-color:#dfc88a!important;box-shadow:inset 0 -3px 0 #8ccbaa!important;
}
#r920Practice[data-mode="berhet"]:not([hidden]) :is(button,select,input,summary):not(:where(#r924WheelFrame *)):focus-visible {
 outline:2px solid #fff0ba!important;outline-offset:3px!important;
}
#r920Practice[data-mode="berhet"]:not([hidden]) button:disabled:not(.r924Gem):not(.r959WheelNav):not(#r920Counter):not(:where(#r924WheelFrame *)) {
 opacity:.56!important;filter:saturate(.55)!important;
}
/* Record-ready, recording, and selected remain visually distinct. */
#r920Practice[data-mode="berhet"]:not([hidden]) #r920Actions .spkBtn.has:not(.recording) {
 box-shadow:inset 0 -3px 0 #b8e5bd!important;
}
#r920Practice[data-mode="berhet"]:not([hidden]) :is(#itemRecBtn.recording,#niyetRecBtn.recording,#r922RecordVoice[aria-pressed="true"]) {
 --r933-control-art:var(--r933-gem-ruby,none);--r933-control-dark:#571321;
 outline:2px solid #ffbbac!important;outline-offset:1px!important;
 box-shadow:inset 0 -3px 0 #ffb4a1!important;color:#fff0e7!important;
}
#r920Practice[data-mode="berhet"]:not([hidden]) input[type="range"]::-webkit-slider-thumb {
 background:var(--r933-gem-diamond,none) center/100% 100% no-repeat,#d5e8de!important;
 border-color:#d5b875!important;
}
#r920Practice[data-mode="berhet"]:not([hidden]) input[type="range"]::-moz-range-thumb {
 background:var(--r933-gem-diamond,none) center/100% 100% no-repeat,#d5e8de!important;
 border-color:#d5b875!important;
}
/* Wheel hotspots and their fitted labels intentionally keep their measured
   geometry, transparency and counter-rotation from wheels-r924.css. */

/* r985 — named colours and Berhetiyye-only shared surfaces. Paint only:
   no event handlers, overlays, transport, display or wheel hotspot changes. */
html body.sukun-zikir-tab:has(#r920Practice[data-mode="berhet"]:not([hidden])) #r920Practice .r920Modes #r920ModeEsma {
 --r933-control-art:var(--r933-gem-emerald);--r933-control-dark:#053b2c;
 --r972-art:var(--r933-gem-emerald);--r972-face:#053b2c;
 background:var(--r933-gem-emerald) center/100% 100% no-repeat,#053b2c!important;
 border-image-source:var(--r933-gem-emerald)!important;color:#fff7de!important;
 font-weight:750!important;
}
html body.sukun-zikir-tab:has(#r920Practice[data-mode="berhet"]:not([hidden])) #r920Practice .r920Modes #r920ModeBerhet {
 --r933-control-art:var(--r935-gem-topaz);--r933-control-dark:#b84c0d;
 --r972-art:var(--r935-gem-topaz);--r972-face:#b84c0d;
 border:1px solid #f4bd66!important;
 border-image:var(--r935-gem-topaz) 330 / 8px / 0 stretch!important;
 background:linear-gradient(145deg,#ed8b26,#b84c0d 58%,#833108)!important;
 color:#fff8df!important;
 font-weight:750!important;
}
html body.sukun-zikir-tab:has(#r920Practice[data-mode="berhet"]:not([hidden])) #r920Practice .r920Modes #r920ModeEsma:active,
html body.sukun-zikir-tab:has(#r920Practice[data-mode="berhet"]:not([hidden])) #r920Practice .r920Modes #r920ModeEsma[aria-pressed="true"] {
 --r933-control-art:var(--r933-gem-ruby);--r933-control-dark:#5c1428;
 --r972-art:var(--r933-gem-ruby);--r972-face:#5c1428;
 background:var(--r933-gem-ruby) center/100% 100% no-repeat,#5c1428!important;
 border-image-source:var(--r933-gem-ruby)!important;
}
html body.sukun-zikir-tab:has(#r920Practice[data-mode="berhet"]:not([hidden])) #r920Practice .r920Modes #r920ModeBerhet:active,
html body.sukun-zikir-tab:has(#r920Practice[data-mode="berhet"]:not([hidden])) #r920Practice .r920Modes #r920ModeBerhet[aria-pressed="true"] {
 --r933-control-art:var(--r933-gem-amethyst);--r933-control-dark:#351b56;
 --r972-art:var(--r933-gem-amethyst);--r972-face:#351b56;
 border:1px solid #ceb0e4!important;
 border-image:var(--r933-gem-amethyst) 330 fill / 8px / 0 stretch!important;
 background:#351b56!important;
}
html body #r920Practice[data-mode="berhet"]:not([hidden]) #r920JourneyLabel #r920JourneyMode,
html body #r920Practice[data-mode="berhet"]:not([hidden]) #r920JourneyMode option {font-weight:750!important}
html body.sukun-zikir-tab:has(#r920Practice[data-mode="berhet"]:not([hidden])) #r925UpdatePanel #r925UpdateAction {
 --r972-art:var(--r935-gem-topaz);--r972-face:#ad420b;
 --r933-control-art:var(--r935-gem-topaz);--r933-control-dark:#ad420b;
 border:1px solid #f4bd66!important;
 border-image:var(--r935-gem-topaz) 330 / 10px / 0 stretch!important;
 background:linear-gradient(145deg,#ed8b26,#b84c0d 58%,#833108)!important;
 color:#fff8e8!important;text-shadow:0 1px 3px #572006!important;font-weight:750!important;
}
html body.sukun-zikir-tab:has(#r920Practice[data-mode="berhet"]:not([hidden])) :is(
 #prDashboard,#todayCard,#vakitBox,.wrap>footer,#r616BottomNav,.sukun-bottom-nav,#rutRow) {
 border:1px solid #bd9e6588!important;
 border-image:var(--r933-panel-frame) 250 / 9px / 0 stretch!important;
 background:linear-gradient(145deg,#102a2ac7,#081a2bc7)!important;
 color:#f5ecd6!important;box-shadow:none!important;
 backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
html body.sukun-zikir-tab:has(#r920Practice[data-mode="berhet"]:not([hidden])) :is(
 #prDashboard .prMetric,#prDashboard .prNow,#todayCard .tcStat,#tcVirdSug,#anaVakit,#sozKutu,#vkSug) {
 border:1px solid #c0a16b88!important;
 border-image:var(--r933-panel-frame) 250 / 6px / 0 stretch!important;
 background:linear-gradient(145deg,#10322cc7,#0a2036c7)!important;color:#f5ecd6!important;
 box-shadow:none!important;
}
html body.sukun-zikir-tab:has(#r920Practice[data-mode="berhet"]:not([hidden])) :is(
 #prDashboard,#todayCard,#vakitBox,#bakBox,#rutRow,#r616BottomNav,.sukun-bottom-nav) :is(button:not(.sw),summary) {
 border:1px solid transparent!important;
 border-image:var(--r933-gem-sapphire) 330 fill / 8px / 0 stretch!important;
 background:#102638!important;color:#fff2d5!important;
 box-shadow:none!important;text-shadow:0 1px 3px #001019!important;font-weight:700!important;
}
html body.sukun-zikir-tab:has(#r920Practice[data-mode="berhet"]:not([hidden])) :is(
 #vakitBox>summary,#bakBox>summary,#r616BottomNav button.active,.sukun-bottom-nav button.active,#r616BottomNav button[aria-current="page"],.sukun-bottom-nav button[aria-current="page"]) {
 border-image-source:var(--r933-gem-emerald)!important;background:#0a332d!important;
}
html body.sukun-zikir-tab:has(#r920Practice[data-mode="berhet"]:not([hidden])) :is(
 #prDashboard .prMetric small,#prDashboard .prNowText small,#prDashboard .prEyebrow,
 #todayCard .tcL,#todayCard .tcSub,#sozKutu .sozKim i,#sozKutu .sozTur,#vakitBox .vkRow i,#vakitBox .vkRow .vkT,
 #vakitBox .vkFoot,#bakBox .bakStat) {color:#cedddc!important;text-shadow:0 1px 2px #001019!important}
html body.sukun-zikir-tab:has(#r920Practice[data-mode="berhet"]:not([hidden])) #vakitBox .vkRow {
 background:#092135cc!important;border-color:#9c865550!important;
}
html body.sukun-zikir-tab:has(#r920Practice[data-mode="berhet"]:not([hidden])) #vakitBox .vkRow.act {
 background:#17433bdc!important;border-color:#e1c075!important;
}

/* r985: text surfaces use hollow nine-slice ornament. Filled artwork belongs
   to buttons, never to an overlay covering a card's sibling text. */
html body.sukun-zikir-tab:has(#r920Practice[data-mode="berhet"]:not([hidden])) :is(#zStage,#r499EsmaBadge,#zMenzil,#zUyari,#zNiyet,#zStage>.r168Source,
 #berhetAtlas #r170AtlasTools,#berhetAtlasBody .r168Cell,#berhetAtlasBody>.r168Source,
 #berhetAtlas .r174Cites,#berhetAtlas .r754Mini,#berhetAtlas .r754CmpRows>div,
 #berhetAtlas .r754Conflict,#berhetAtlas .r754CompareNote,#r920Atlas,#r920AtlasDetail) {
 border:1px solid #bc9d6388!important;
 border-image:var(--r933-panel-frame) 250 / 8px / 0 stretch!important;
 background:linear-gradient(145deg,#102e2bc7,#0a1d2cc7)!important;
 color:#f5ecd6!important;box-shadow:none!important;
 backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
html body.sukun-zikir-tab:has(#r920Practice[data-mode="berhet"]:not([hidden])) :is(#r499EsmaBadge .r499Kicker,#zMenzil .mzMat,#zStage .srcBadge,
 #berhetAtlas .srcBadge,#berhetAtlas .r168Cell small) {
 color:#d6e4dd!important;text-shadow:0 1px 2px #001019!important;
}
html body.sukun-zikir-tab:has(#r920Practice[data-mode="berhet"]:not([hidden])) :is(#r499EsmaBadge .r499Meta,#zStage .srcBadge,#berhetAtlas .srcBadge) {
 border:1px solid transparent!important;
 border-image:var(--r933-gem-diamond) 330 / 5px / 0 stretch!important;
 background:#102b32!important;color:#eadcbd!important;
}
html body.sukun-zikir-tab:has(#r920Practice[data-mode="berhet"]:not([hidden])) :is(#r499EsmaBadge .r499Value,#r499EsmaBadge .r499Meta b,#zMenzil>b,#zUyari b) {
 color:#f7d68f!important;
}
html body.sukun-zikir-tab:has(#r920Practice[data-mode="berhet"]:not([hidden])) :is(#berhetAtlas #r170AtlasSearch,#berhetAtlas .r170Select,#berhetAtlas .r168Note) {
 border:1px solid #bba06b88!important;
 border-image:var(--r933-panel-frame) 250 / 7px / 0 stretch!important;
 background:#0b2732!important;color:#fff2d5!important;box-shadow:none!important;
}
html body.sukun-zikir-tab:has(#r920Practice[data-mode="berhet"]:not([hidden])) #berhetAtlas #r170AtlasSearch::placeholder {color:#c9d9d8!important;opacity:1!important}
html body.sukun-zikir-tab:has(#r920Practice[data-mode="berhet"]:not([hidden])) #zMegaHost>.zMegaGroup>summary .zMegaTxt :is(b,small) {
 color:#fff0cf!important;-webkit-text-fill-color:#fff0cf!important;
 opacity:1!important;visibility:visible!important;
}
/* The footer shortcut bar is normal document flow, not a floating player.
   Respect hidden, focus and Tefekkür owners, including during playback. */
html body.sukun-zikir-tab:has(#r920Practice[data-mode="berhet"]:not([hidden])):not(.sukun-tefekkur-mode):not(.sukun-focus-mode):not(.odak):not(.focus-mode):not(.is-focus):not([data-focus="1"]) .wrap>footer:not([hidden]) {
 display:block!important;opacity:1!important;visibility:visible!important;
}
html body.sukun-zikir-tab:has(#r920Practice[data-mode="berhet"]:not([hidden])):not(.sukun-tefekkur-mode):not(.sukun-focus-mode):not(.odak):not(.focus-mode):not(.is-focus):not([data-focus="1"]) footer .sukun-bottom-nav:not([hidden]) {
 display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
 opacity:1!important;visibility:visible!important;pointer-events:auto!important;
}
html body.sukun-zikir-tab:has(#r920Practice[data-mode="berhet"]:not([hidden])) footer .sukun-bottom-nav button:not([hidden]) {
 opacity:1!important;visibility:visible!important;color:#fff2d5!important;
 -webkit-text-fill-color:#fff2d5!important;min-height:44px!important;
 padding:10px 8px!important;font-size:12px!important;line-height:1.35!important;
 white-space:normal!important;overflow-wrap:break-word!important;
}
html body.sukun-zikir-tab:has(#r920Practice[data-mode="berhet"]:not([hidden])) footer .sukun-bottom-nav button>span {
 color:inherit!important;-webkit-text-fill-color:inherit!important;opacity:1!important;
}
/* r994: footer/update notices can be outside the Zikir tab. Match the active
   Berhetiyye theme, with its own faceted topaz and engraved gold frame. */
html body.r754-berhet-theme:has(#r920Practice[data-mode="berhet"]:not([hidden])) #r925UpdatePanel,
html body.r754-berhet-theme:has(#r920Practice[data-mode="berhet"]:not([hidden])) .skToast{
 border:1px solid #d7b36e!important;
 border-image:var(--r933-panel-frame,none) 250 / 8px / 0 stretch!important;
 background:linear-gradient(145deg,#0b2b2ef7,#081b2bf7)!important;
 color:#fff0d0!important;box-shadow:0 8px 24px #0005!important;
 padding:14px!important;border-radius:16px!important;
}
html body.r754-berhet-theme:has(#r920Practice[data-mode="berhet"]:not([hidden])) #r925UpdatePanel #r925UpdateAction,
html body.r754-berhet-theme:has(#r920Practice[data-mode="berhet"]:not([hidden])) #r925UpdatePanel #r995UpdateCancel,
html body.r754-berhet-theme:has(#r920Practice[data-mode="berhet"]:not([hidden])) .skToast .act{
 --r972-art:url('../berhetiyye-premium/gem-topaz-r935.webp');--r972-face:#ad420b;
 --r933-control-art:url('../berhetiyye-premium/gem-topaz-r935.webp');--r933-control-dark:#ad420b;
 border:1px solid #f4bd66!important;
 border-image:url('../berhetiyye-premium/gem-topaz-r935.webp') 330 fill / 9px / 0 stretch!important;
 background:linear-gradient(145deg,#ed8b26,#b84c0d 58%,#833108)!important;
 color:#fff8e8!important;text-shadow:0 1px 3px #572006!important;
 font-weight:750!important;min-height:44px!important;padding:12px 16px!important;
 white-space:normal!important;line-height:1.4!important;
}
html body.r754-berhet-theme:has(#r920Practice[data-mode="berhet"]:not([hidden])) .skToast .x{
 border:1px solid #d7b36e!important;min-width:44px!important;min-height:44px!important;
 background:#0b2b2e!important;color:#fff0d0!important;
}
html body.r754-berhet-theme:has(#r920Practice[data-mode="berhet"]:not([hidden])) .skToast{flex-wrap:wrap!important}
html body.r754-berhet-theme:has(#r920Practice[data-mode="berhet"]:not([hidden])) .skToast .msg{flex:1 1 180px!important;min-width:0!important;overflow-wrap:anywhere!important}

/* Shared non-Practice actions use the same materials. Paint only: native
   control geometry, preview hitboxes, checkboxes and wheel leaves stay owned
   by their existing components. */
html[data-r1074-theme="berhet"] body :where(
 #tab-amb,#tab-frq,#tab-rx,#tab-ntf,#prDashboard,#todayCard,#vakitBox,
 #r616Home,#r616SoundHeader,#r616Journeys,#r616ToolsSheet,#r616Topbar,#r616BottomNav,.masterBar
) :where(button:not(.sw):not(.dockTipHelp):not(.qb):not(.chInfo):not(.chPrev):not(:where(#r924WheelFrame *)),select,summary) {
 border:1px solid transparent!important;
 border-image:var(--r933-gem-sapphire) 330 fill / 7px / 0 stretch!important;
 background:#0a2637!important;color:#fff1d5!important;
 box-shadow:none!important;text-shadow:0 1px 3px #000!important;
}
/* Retain selected/playing semantics under the shared material coat. */
html[data-r1074-theme="berhet"] body :where(
 #tab-amb,#tab-frq,#tab-rx,#tab-ntf,#r616Home,#r616Journeys,#r616Topbar,#r616BottomNav
) :is(button.act,button.active,button.on,button[aria-pressed="true"],button[aria-selected="true"]):not(.sw):not(.qb):not(.chInfo):not(.chPrev) {
 border-image-source:var(--r933-gem-emerald)!important;
 background:#0b392c!important;color:#fff6cd!important;
}
html[data-r1074-theme="berhet"] body :is(#frStop,#rxStop,#miniStop) {
 border-image-source:var(--r933-gem-ruby)!important;background:#401023!important;
}
html[data-r1074-theme="berhet"] body :is(#prDGo,#prPerfBtn,#prSearchOpen,#r1042PerfSummary) {
 border:1px solid transparent!important;
 border-image:var(--r933-gem-emerald) 330 fill / 7px / 0 stretch!important;
 background:#0b3028!important;color:#fff1d5!important;box-shadow:none!important;
}

}

/* r1083: the shared session editor lives beside the tabs, rather than inside
   #tab-zkr. New session surfaces need the same material family as the selected
   dhikr. SceneEngine's canonical family gates this paint on every tab; queued
   steps, ambient audio and an unopened premium gate cannot select a skin.
   Paint only: no display, size, placement, hidden-state or motion overrides. */
@layer sukun-r933-controls {
html[data-r1074-theme="berhet"] body :where(
 #r170SessionHub,#r1082SessionSummary,#r1078ProtectivePlan,
 #r170SessionHub .r252Step,#r170SessionHub #r261TimelineWrap,
 #r170SessionHub #r252SessionMeta,#r170SessionHub #r170Resume) {
 border-color:#d4b57499!important;
 border-image:var(--r933-panel-frame) 250 / 7px / 0 stretch!important;
 background:linear-gradient(145deg,#0b302cde,#071b2be8)!important;
 color:#fff2d5!important;
}
/* r1087: the amethyst summary owns the journey strip's single jewel frame.
   The accordion host must not add a second emerald/gold material behind it. */
html[data-r1074-theme="berhet"] body #r1082FocusStrip {
 border:0!important;border-image:none!important;padding:0!important;
 background:none!important;box-shadow:none!important;
}
html[data-r1074-theme="berhet"] body #r1082FocusStrip[open] {
 background:linear-gradient(145deg,#0b302cf2,#071b2bf5)!important;
}
html[data-r1074-theme="berhet"] body #r1082FocusStrip :is(p,button) {
 margin-inline:12px;
}
html[data-r1074-theme="berhet"] body #r170SessionHub .r252Step.active {
 border-image-width:9px!important;
 background:linear-gradient(145deg,#174839eb,#082538ed)!important;
 box-shadow:inset 3px 0 0 #edcf83,0 0 18px #6cdab52b!important;
}
html[data-r1074-theme="berhet"] body :where(
 #r170SessionHub>summary,#r170SessionHub button,#r1082SessionEntry,
 #r1082FocusStrip>summary,#r1082FocusStrip button,
 #r1078ProtectivePlan button) {
 --r1083-session-art:var(--r933-gem-sapphire);
 --r1083-session-face:#0b263a;
 border:1px solid transparent!important;
 border-image:var(--r1083-session-art) 330 fill / 7px / 0 stretch!important;
 background:var(--r1083-session-face)!important;
 color:#fff1d5!important;
 text-shadow:0 1px 3px #001019!important;
}
html[data-r1074-theme="berhet"] body :is(
 #r170SessionHub>summary,#r1082SessionEntry,#r170StartSession,
 #r170SessionHub button[aria-pressed="true"],
 #r170SessionHub button[aria-current="step"],#r170SessionHub .r261Seg.active,
 #r1078PlanOpen,#r1078PlanPrepare,#r1078PlanAll button) {
 --r1083-session-art:var(--r933-gem-emerald);
 --r1083-session-face:#0b3c2c;
}
html[data-r1074-theme="berhet"] body :is(
 #r1082FocusStrip>summary,#r1082FocusEdit,#r1082PauseEdit) {
 --r1083-session-art:var(--r933-gem-amethyst);
 --r1083-session-face:#281337;
}
html[data-r1074-theme="berhet"] body :is(
 #r170ClearQ,#r170SessionHub [data-a="del"],#r1078PlanDismiss) {
 --r1083-session-art:var(--r933-gem-ruby);
 --r1083-session-face:#401023;
}
html[data-r1074-theme="berhet"] body #r1082Retry {
 --r1083-session-art:var(--r935-gem-topaz);
 --r1083-session-face:#7c3d11;
}
/* The practice's existing generic button coat is more specific than the
   shared editor's low-specificity defaults. Keep these newly mounted entry
   points on their assigned stone when they are children of that host. */
html[data-r1074-theme="berhet"] body #r920Practice :is(
 #r1082SessionEntry,#r1082FocusStrip>summary,#r1082FocusStrip button,
 #r1078ProtectivePlan button) {
 border-image:var(--r1083-session-art) 330 fill / 7px / 0 stretch!important;
 background:var(--r1083-session-face)!important;
 color:#fff1d5!important;text-shadow:0 1px 3px #001019!important;
}
html[data-r1074-theme="berhet"] body #r170SessionHub :where(
 .r1082-fields input,.r1082-source select,#r170SessionName,
 .r261Advanced select,.r261Advanced input:not([type="range"]):not([type="checkbox"]):not([type="radio"])) {
 border-color:#d7bb7c99!important;
 background:#071f2bf2!important;color:#fff1d5!important;
 box-shadow:inset 0 0 0 1px #d7bb7c22!important;
}
html[data-r1074-theme="berhet"] body #r170SessionHub input[aria-invalid="true"] {
 border-color:#ffb8a6!important;
}
html[data-r1074-theme="berhet"] body :where(
 #r1082SessionSummary p,#r1082FocusDetail,#r1078ProtectivePlan p,
 #r170SessionHub .r1082-fields label,#r170SessionHub .r1082-source,
 #r170SessionHub .r1082-source small,#r170SessionHub .r252Badge,
 #r170SessionHub #r261TimelineHead) {
 color:#dde9df!important;text-shadow:0 1px 2px #001019!important;
}
html[data-r1074-theme="berhet"] body #r1082Failure {
 border-color:#daa27f!important;
 border-image:var(--r933-panel-frame) 250 / 6px / 0 stretch!important;
 background:#38262ef2!important;color:#ffe4d4!important;
}
html[data-r1074-theme="berhet"] body :is(#r1082SessionPhase,#r1082ActualSource,#r1078PlanStatus) {
 color:#d4ffe8!important;text-shadow:0 1px 2px #001019!important;
}
/* Preserve the native browser/system high-contrast palette. This is a paint
   override in the same layer, not an opt-out from forced colour adjustment. */
@media(forced-colors:active) {
 html[data-r1074-theme="berhet"] body :is(
  #r170SessionHub,#r1082SessionSummary,#r1082FocusStrip,#r1078ProtectivePlan,
  #r170SessionHub .r252Step,#r170SessionHub #r261TimelineWrap,
  #r170SessionHub #r252SessionMeta,#r170SessionHub #r170Resume,
  #r170SessionHub>summary,#r170SessionHub button,#r1082SessionEntry,
  #r1082FocusStrip>summary,#r1082FocusStrip button,#r1078ProtectivePlan button,
  #r170SessionHub input,#r170SessionHub select,#r1082Failure),
 html[data-r1074-theme="berhet"] body #r920Practice :is(
  #r1082SessionEntry,#r1082FocusStrip>summary,#r1082FocusStrip button,
  #r1078ProtectivePlan button) {
  border-color:ButtonText!important;border-image:none!important;
  background:Canvas!important;color:CanvasText!important;
  box-shadow:none!important;text-shadow:none!important;
 }
 html[data-r1074-theme="berhet"] body :is(
  #r1082SessionSummary p,#r1082FocusDetail,#r1078ProtectivePlan p,
  #r170SessionHub .r1082-fields label,#r170SessionHub .r1082-source,
  #r170SessionHub .r1082-source small,#r170SessionHub .r252Badge,
  #r170SessionHub #r261TimelineHead,#r1082SessionPhase,#r1082ActualSource,#r1078PlanStatus) {
  color:CanvasText!important;text-shadow:none!important;
 }
}
}