/* Shared workspace chrome. Canvas editors keep all of their own tools. */
body.craft-host{display:flex!important;flex-direction:column!important;height:100dvh!important;width:100%!important;margin:0!important;padding:0!important;overflow:hidden!important}
.craft-workspace-head{flex:none!important;display:flex!important;flex-direction:column!important;width:100%!important;z-index:20!important;background:#14171c;border-bottom:1px solid rgba(148,163,184,.18)}
.craft-topbar{position:relative;z-index:20;gap:8px;padding:0 8px 0 10px;font-size:12px;direction:ltr!important;height:40px!important;min-height:40px!important;flex:none!important;display:flex!important;align-items:center!important}
#craft-frames{flex:1 1 0%!important;min-height:0!important;height:auto!important;width:100%!important;position:relative!important;overflow:hidden!important;display:flex!important;flex-direction:column!important}
#craft-frames iframe{flex:1 1 0%!important;width:100%!important;height:100%!important;border:0!important;display:block!important;background:#242424}
.craft-status{flex:none!important;height:24px!important;min-height:24px!important}
.craft-topbar button,.craft-topbar a{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:32px;border:1px solid transparent;border-radius:8px;padding:5px 9px;background:transparent;color:inherit;font:inherit;text-decoration:none;cursor:pointer;line-height:1.2}
.craft-topbar [hidden]{display:none!important}
.craft-topbar button:hover,.craft-topbar a:hover{background:#ffffff0d;border-color:#ffffff18}
.craft-home{flex:none;width:32px;height:32px;min-height:32px!important;padding:0!important;border-radius:9px!important;overflow:hidden;box-shadow:0 3px 10px rgba(37,99,235,.32);transition:transform .16s ease,box-shadow .16s ease;transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;will-change:transform}
.craft-home:hover{transform:translateY(-1px) scale(1.03);box-shadow:0 6px 14px rgba(37,99,235,.46)}
.craft-home .mrtech-crisp-mark{width:30px;height:30px;display:block;transform:translateZ(0);shape-rendering:geometricPrecision}
.craft-home span{display:none}
.craft-topbar .cluster-controls{display:flex;align-items:center;gap:7px;flex:1;min-width:0;direction:ltr!important}
.craft-topbar select,.craft-topbar #craft-app{min-height:30px;width:auto!important;min-width:148px!important;max-width:186px!important;border-radius:8px;padding:3px 22px 3px 8px;font-size:11.5px;line-height:1.35}
.craft-tools{display:contents}.craft-tools #craft-tools-toggle{display:none}
.craft-actions{display:flex;align-items:center;gap:3px;flex:none;overflow:visible;padding:0;white-space:nowrap;margin-inline-start:0}
.craft-topbar .craft-project{margin-left:auto;margin-right:4px;flex:0 1 360px;min-width:180px;max-width:400px;justify-content:flex-end;text-align:end;padding:3px 9px;min-height:30px}
.craft-project strong{font-size:12px;max-width:100%}.craft-project small{font-size:9.5px;line-height:1.2}
.craft-project img{display:none}

/* Golden Pro VIP Badge */
.byb-vip-gold-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;background:linear-gradient(135deg,#FEF08A 0%,#F59E0B 45%,#D97706 85%,#FDE047 100%);color:#0f2963!important;font-weight:900;font-weight:800;font-size:11px;letter-spacing:.03em;border:1px solid rgba(254,240,138,.85);box-shadow:0 2px 10px rgba(245,158,11,.42),inset 0 1px 0 rgba(255,255,255,.75);white-space:nowrap;order:95}
.byb-vip-gold-badge svg{color:#0f2963;fill:#0f2963;filter:drop-shadow(0 1px 0 rgba(255,255,255,.5))}

/* Match the rounded-square account portrait used throughout the suite. */
#craft-profile.mrp-avatar{order:96;width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;border-radius:8px!important;padding:0!important;background:linear-gradient(135deg,#EFF6FF,#DBEAFE);color:#1D4ED8;border:1.5px solid #60A5FA;box-shadow:0 2px 6px rgba(37,99,235,.18);transition:transform .15s ease,box-shadow .15s ease}
#craft-profile.mrp-avatar:hover{transform:scale(1.06);box-shadow:0 4px 12px rgba(37,99,235,.32)}

/* UK & Iraq Flag Language Switcher */
.craft-flag-switcher{order:98;display:inline-flex;align-items:center;gap:3px;padding:2px;border-radius:8px;background:rgba(148,163,184,.14);border:1px solid rgba(148,163,184,.24);flex:none}
.craft-flag-btn{min-height:26px!important;height:26px!important;width:30px!important;padding:2px!important;border-radius:6px!important;border:1px solid transparent!important;background:transparent!important;opacity:.62;transition:opacity .15s,transform .15s,background .15s,box-shadow .15s}
.craft-flag-btn:hover{opacity:.95;transform:translateY(-1px)}
.craft-flag-btn.is-active{opacity:1;background:rgba(255,255,255,.92)!important;border-color:rgba(37,99,235,.45)!important;box-shadow:0 2px 6px rgba(15,23,42,.18)}
.craft-flag-btn svg{width:20px;height:14px;border-radius:2px;display:block;box-shadow:0 1px 2px rgba(0,0,0,.25)}

/* Office 2007 Glossy Red Gradient X Close Button — always at the VERY FAR TOP-RIGHT */
#craft-exit,.office2007-close-btn{
 order:999!important;
 flex:none;
 width:36px!important;
 height:30px!important;
 min-height:30px!important;
 padding:0!important;
 margin-left:4px!important;
 border-radius:7px!important;
 color:#FFFFFF!important;
 border:1px solid #7F1D1D!important;
 background:linear-gradient(180deg,#FCA5A5 0%,#EF4444 18%,#DC2626 49%,#991B1B 52%,#B91C1C 84%,#F87171 100%)!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.72),inset 0 -1px 0 rgba(254,202,202,.35),0 2px 6px rgba(185,28,28,.38)!important;
 text-shadow:0 -1px 1px rgba(127,29,29,.8);
 transition:filter .15s ease,transform .12s ease,box-shadow .15s ease!important;
}
#craft-exit:hover,.office2007-close-btn:hover{
 filter:brightness(1.1) saturate(1.1);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.88),0 0 12px rgba(239,68,68,.75)!important;
 color:#FFFFFF!important;
}
#craft-exit:active,.office2007-close-btn:active{
 transform:translateY(1px);
 filter:brightness(.94);
}

/* Unified Single Header in Office Group (Word, Excel, PowerPoint) - revealing native canvas Quick Access bar */
body.craft-host.is-office-suite{
 display:flex!important;
 flex-direction:column!important;
 height:100dvh!important;
 overflow:hidden!important;
}
body.craft-host.is-office-suite .craft-workspace-head{
 flex:0 0 auto!important;
 position:relative!important;
 z-index:20!important;
}
body.craft-host.is-office-suite .craft-topbar{
 position:relative!important;
 height:36px!important;
 min-height:36px!important;
 z-index:20!important;
 pointer-events:auto!important;
 padding:0 8px 0 6px!important;
 justify-content:space-between!important;
 display:flex!important;
 align-items:center!important;
}
body.craft-host.is-office-suite #craft-frames{
 flex:1 1 0%!important;
 min-height:0!important;
 height:auto!important;
 width:100%!important;
 position:relative!important;
}
body.craft-host.is-office-suite .craft-topbar .craft-home{
 display:inline-flex!important;
 align-items:center!important;
 pointer-events:auto!important;
}
body.craft-host.is-office-suite.backstage-open .craft-home,
body.backstage-open .craft-home,
body.backstage-open .craft-topbar{
 opacity:0!important;
 visibility:hidden!important;
 pointer-events:none!important;
}
body.craft-host.is-office-suite .craft-topbar .cluster-controls{
 pointer-events:auto;
 flex:1 1 auto;
 margin-left:auto;
 height:36px;
 padding:0;
 border:none;
 background:transparent;
 backdrop-filter:none;
 gap:6px;
 align-items:center;
 display:flex;
}
html[data-theme=dark] body.craft-host.is-office-suite .craft-topbar .cluster-controls{
 background:transparent;
 border-color:transparent;
}
body.craft-host.is-office-suite .craft-topbar #craft-app,
.craft-topbar #craft-app{
 width:auto!important;
 min-width:0!important;
 max-width:fit-content!important;
 min-height:28px;
 height:28px;
 font-size:11.5px;
 padding:2px 22px 2px 8px;
 border-radius:7px;
 border:1px solid rgba(203,213,225,.85);
 background:rgba(255,255,255,.9);
 white-space:nowrap;
}
html[data-theme=dark] body.craft-host.is-office-suite .craft-topbar #craft-app,
html[data-theme=dark] .craft-topbar #craft-app{
 border-color:rgba(71,85,105,.85);
 background:rgba(30,41,59,.85);
}

/* Application Native Menubar (Office, Creative Hub, Engineering, Smart) */
.craft-app-menubar{
 display:flex!important;
 align-items:center!important;
 height:30px!important;
 min-height:30px!important;
 max-height:30px!important;
 flex:none!important;
 padding:0 10px;
 font-size:12px;
 z-index:18;
 user-select:none;
}
.craft-menubar-items{
 display:flex;
 align-items:center;
 gap:4px;
 flex-wrap:nowrap;
 overflow-x:auto;
 scrollbar-width:none;
}
.craft-menubar-items::-webkit-scrollbar{display:none}
.craft-menu-btn{
 display:inline-flex;
 align-items:center;
 gap:5px;
 padding:3px 9px;
 border-radius:5px;
 font-size:11.5px;
 font-weight:700;
 border:1px solid transparent;
 background:transparent;
 color:inherit;
 cursor:pointer;
 transition:all .15s ease;
 white-space:nowrap;
}
.craft-menu-btn:hover{
 background:rgba(255,255,255,.08);
}
.suite-menu-desk{
 background:#f1f5f9;
 border-bottom:1px solid #cbd5e1;
 color:#334155;
}
html[data-theme=dark] .suite-menu-desk{
 background:#1e293b;
 border-color:#334155;
 color:#cbd5e1;
}
.suite-menu-desk .craft-menu-btn:hover{
 background:#e2e8f0;
 color:#0f172a;
}
html[data-theme=dark] .suite-menu-desk .craft-menu-btn:hover{
 background:#334155;
 color:#ffffff;
}
.suite-menu-creative{
 background:#18181b;
 border-bottom:1px solid rgba(255,255,255,.09);
 color:#e4e4e7;
}
.suite-menu-creative .craft-menu-btn:hover{
 background:#27272a;
 color:#ffffff;
}
.suite-menu-engineering{
 background:#090d16;
 border-bottom:1px solid rgba(56,189,248,.2);
 color:#94a3b8;
}
.suite-menu-engineering .craft-menu-btn:hover{
 background:rgba(56,189,248,.12);
 color:#38bdf8;
}
.suite-menu-smart{
 background:#061412;
 border-bottom:1px solid rgba(16,185,129,.2);
 color:#a7f3d0;
}
.suite-menu-smart .craft-menu-btn:hover{
 background:rgba(16,185,129,.14);
 color:#34d399;
}
.craft-menu-btn-ai{
 font-weight:inherit!important;
 border-radius:4px!important;
 border:1px solid transparent!important;
 background:transparent!important;
 color:inherit!important;
}
html[data-theme=dark] .craft-menu-btn-ai,
.suite-menu-creative .craft-menu-btn-ai,
.suite-menu-engineering .craft-menu-btn-ai{
 color:inherit!important;
 background:transparent!important;
 border-color:transparent!important;
}
.craft-menu-btn-ai .menu-ai-icon{
 font-size:11px;
 margin-inline-end:3px;
}
.craft-menu-btn-ai:hover{
 transform:none!important;
 box-shadow:none!important;
}
.craft-topbar .craft-engine{
 display:inline-flex;
 align-items:center;
 font-size:11px;
 font-weight:700;
 color:inherit;
 text-decoration:none;
 padding:2px 8px;
 border-radius:6px;
 opacity:0.85;
 transition:all .15s ease;
 white-space:nowrap;
}
.craft-topbar .craft-engine:hover{
 opacity:1;
 background:rgba(59,130,246,0.12);
 color:#3b82f6;
}
.craft-header-trial-dock{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 background:transparent!important;
 border:none!important;
 font-size:11px;
 font-weight:700;
 color:#10b981;
 padding:2px 6px;
 letter-spacing:0.5px;
 direction:ltr;
}
.craft-theme-toggle-btn{
 width:30px!important;
 height:30px!important;
 min-height:30px!important;
 min-width:30px!important;
 padding:0!important;
 border-radius:7px!important;
 display:inline-flex!important;
 align-items:center!important;
 justify-content:center!important;
 border:1px solid rgba(203,213,225,.75)!important;
 background:transparent!important;
 cursor:pointer!important;
 font-size:14px!important;
}
html[data-theme=dark] .craft-theme-toggle-btn{
 border-color:rgba(71,85,105,.75)!important;
}
html[data-theme=dark] .craft-theme-toggle-btn .theme-icon-dark{
 display:none;
}
html[data-theme=dark] .craft-theme-toggle-btn .theme-icon-light{
 display:inline-block;
}
html:not([data-theme=dark]) .craft-theme-toggle-btn .theme-icon-light{
 display:none;
}
html:not([data-theme=dark]) .craft-theme-toggle-btn .theme-icon-dark{
 display:inline-block;
}
body.craft-host.is-office-suite .craft-topbar .craft-project{
 flex:0 1 220px !important;
 min-width:140px !important;
 max-width:260px !important;
 min-height:30px;
 height:30px;
 padding:2px 14px;
 border-radius:7px;
 border:1px solid rgba(203,213,225,.85);
 background:rgba(255,255,255,.7);
 display:inline-flex;
 align-items:center;
 justify-content:center;
 text-align:center;
}
html[data-theme=dark] body.craft-host.is-office-suite .craft-topbar .craft-project{
 border-color:rgba(71,85,105,.85);
 background:rgba(30,41,59,.7);
}
body.craft-host.is-office-suite .craft-project-copy{
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:center;
 text-align:center;
 width:100%;
}
body.craft-host.is-office-suite .craft-topbar .craft-actions a,
body.craft-host.is-office-suite .craft-topbar .craft-actions button{
 min-height:30px;
 padding:3px 7px;
 font-size:11px;
}

html[data-theme=light] .craft-topbar button:hover,html[data-theme=light] .craft-topbar a:hover{background:#eef3fb;border-color:#dbe5f4}
.craft-status{height:26px;font-size:10px;gap:12px}
.craft-system-dialog{padding:20px;width:min(560px,calc(100% - 24px));border-radius:18px;box-shadow:0 24px 80px #0005;line-height:1.6}
.craft-system-dialog h2{font-size:20px;line-height:1.5;margin:0}.craft-system-dialog>p{color:#aab9cd}
.craft-system-dialog button{margin:0;min-height:42px;border-radius:9px;padding:9px 14px;font-size:13px;line-height:1.4;transition:background .15s,border-color .15s}
.craft-system-dialog button:hover{background:#ffffff0c;border-color:#95afd3}
.craft-dialog-heading{margin-bottom:18px;position:sticky;top:-20px;padding-top:12px;padding-bottom:12px;background:#192330;z-index:1}
.craft-dialog-heading button{flex:none;width:38px;height:38px;min-height:38px;padding:0;font-size:24px}
.craft-recovery-row{display:grid;grid-template-columns:32px minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;column-gap:10px;background:#ffffff05;border:1px solid #43546d;border-radius:12px;padding:11px 12px;margin:8px 0}
.craft-recovery-file{grid-column:1;grid-row:1/3;display:grid;place-items:center;width:32px;height:38px;color:#8ab8f5}
.craft-recovery-file svg{width:26px;height:26px}
.craft-recovery-title{grid-column:2;grid-row:1;font-size:13px;font-weight:700;unicode-bidi:plaintext;direction:auto;margin:0!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.craft-recovery-time{grid-column:2;grid-row:2;font-size:11px;line-height:1.6;color:#a5b5cc;margin:0!important;white-space:nowrap}
.craft-recovery-actions,.craft-dialog-footer{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:12px}
.craft-recovery-row .craft-recovery-actions{grid-column:3;grid-row:1/3;flex-wrap:nowrap;gap:4px;margin:0}
.craft-recovery-actions button{display:grid;place-items:center;padding:7px;width:36px;height:36px;min-height:36px}
.craft-recovery-actions svg{width:19px;height:19px}
.craft-recovery-note,.craft-recovery-warning{grid-column:1/-1;margin:6px 0 0;font-size:12px}.craft-recovery-note:empty{display:none}
.craft-dialog-footer{padding-top:12px}
.craft-system-dialog .craft-primary{background:#2563dc;border-color:#3674ed;color:#fff}
.craft-system-dialog .craft-primary:hover{background:#1c55c5}
.craft-system-dialog .craft-danger{border-color:transparent;color:#e6a6ad;background:transparent}
.craft-system-dialog .craft-danger:hover{border-color:#a65d68;background:#a65d6817}
html[data-theme=light] .craft-dialog-heading{background:#fff}
html[data-theme=light] .craft-recovery-row{background:#f7f9fc;border-color:#dce4f0}
html[data-theme=light] .craft-recovery-time,html[data-theme=light] .craft-system-dialog>p{color:#62748e}
html[data-theme=light] .craft-system-dialog .craft-danger{color:#a52a40}
@media(max-width:1180px){
 .craft-tools{display:block;position:relative;order:5;flex:none}
 .craft-tools #craft-tools-toggle{display:inline-flex;width:34px;min-height:30px;padding:5px}
 .craft-tools .craft-actions{display:none;position:absolute;top:calc(100% + 8px);right:0;width:240px;max-width:calc(100vw - 24px);max-height:calc(var(--craft-viewport-height,100dvh) - 120px);overflow:auto;padding:8px;border:1px solid #41516a;border-radius:12px;background:#192330;box-shadow:0 12px 36px #0005;z-index:40}
 .craft-tools .craft-actions.is-open{display:flex;flex-direction:column;align-items:stretch}
 .craft-tools .craft-actions button,.craft-tools .craft-actions a{width:100%;justify-content:flex-start;padding:10px 12px;min-height:40px;font-size:12px}
 .craft-tools .craft-actions #craft-classic,.craft-tools .craft-actions #craft-fullscreen{display:inline-flex}
 .craft-tools #craft-fullscreen::after{content:attr(aria-label)}.craft-tools #craft-help::after{content:attr(aria-label)}
 .craft-topbar .craft-project{order:3;flex:0 1 130px}
 html[data-theme=light] .craft-tools .craft-actions{background:#fff;border-color:#d2deec}
}
@media(max-width:700px){
 body.craft-host:not(.is-office-suite){grid-template-rows:46px minmax(0,1fr) 24px}
 .craft-topbar .craft-project{display:none}
 #craft-app{max-width:130px;font-size:11px}
}

/* =========================================================================
   Word / Adobe Style Workspace Loading Splash Screen
   ========================================================================= */
.craft-loading {
  position: absolute;
  inset: 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: rgba(10, 14, 22, 0.88);
  backdrop-filter: blur(12px);
  z-index: 100;
  padding: 16px;
}
.craft-loading[hidden] {
  display: none !important;
}

.craft-splash-window {
  width: min(740px, 94vw);
  background: linear-gradient(145deg, #13161c 0%, #181c24 100%);
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 35px 100px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.04);
  display: flex;
  overflow: hidden;
  position: relative;
  min-height: 410px;
}
.craft-splash-photoshop-credits {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.craft-photoshop-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.craft-ps-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.craft-ps-val {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #cbd5e1;
}
.craft-photoshop-legal-notice {
  font-size: 10px;
  line-height: 1.5;
  color: #64748b;
  margin: 4px 0 0;
}
html[data-theme=light] .craft-splash-window {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 25px 80px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.craft-splash-sidebar {
  width: 210px;
  flex: none;
  background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
  border-inline-end: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
html[data-theme=light] .craft-splash-sidebar {
  background: linear-gradient(145deg, #f1f5f9 0%, #e2e8f0 100%);
  border-inline-end-color: #cbd5e1;
}

.craft-splash-art-backdrop {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px 16px;
  position: relative;
  z-index: 2;
}

.craft-splash-suite-tag {
  display: flex;
  align-items: center;
  gap: 8px;
}
.craft-splash-tag-icon svg {
  display: block;
}
.craft-splash-tag-name {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #94a3b8;
}

.craft-splash-hero-icon {
  margin: auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.45));
}

.craft-splash-art-footer {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.craft-splash-art-sub {
  font-size: 11px;
  color: #64748b;
  font-weight: 600;
}
.craft-splash-art-pill {
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.18);
  color: #60a5fa;
  font-size: 10px;
  font-weight: 700;
}

.craft-splash-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px 22px 18px;
  min-width: 0;
}

.craft-splash-top {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.craft-splash-brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.craft-splash-corp {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #38bdf8;
  text-transform: uppercase;
}
.craft-splash-ver {
  font-size: 10px;
  color: #94a3b8;
  background: rgba(148, 163, 184, 0.12);
  padding: 2px 6px;
  border-radius: 4px;
}

.craft-splash-app-title {
  font-size: 21px;
  font-weight: 800;
  margin: 6px 0 2px;
  color: #f8fafc;
  line-height: 1.25;
}
html[data-theme=light] .craft-splash-app-title {
  color: #0f172a;
}
.craft-splash-app-subtitle {
  font-size: 12px;
  color: #94a3b8;
  margin: 0;
}

.craft-splash-progress-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0;
}
.craft-splash-bar-track {
  width: 100%;
  height: 6px;
  background: rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.craft-splash-bar-fill {
  width: 45%;
  height: 100%;
  background: linear-gradient(90deg, #38bdf8, #2563eb, #818cf8);
  border-radius: 999px;
  position: absolute;
  animation: craftShimmerBar 1.6s ease-in-out infinite alternate;
}
@keyframes craftShimmerBar {
  0% { left: 0%; width: 25%; }
  100% { left: 70%; width: 30%; }
}

.craft-splash-status {
  font-size: 11.5px;
  color: #cbd5e1;
  margin: 0;
  min-height: 18px;
}
html[data-theme=light] .craft-splash-status {
  color: #475569;
}

.craft-splash-retry-btn {
  align-self: flex-start;
  padding: 6px 14px;
  border-radius: 8px;
  background: #2563eb;
  color: #ffffff;
  border: 0;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 4px;
}

.craft-splash-legal {
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.craft-splash-rights {
  font-size: 10px;
  color: #94a3b8;
  margin: 0;
}
.craft-splash-links {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
}
.craft-splash-links a {
  color: #38bdf8;
  text-decoration: none;
}
.craft-splash-links a:hover {
  text-decoration: underline;
}
.craft-splash-dot {
  color: #64748b;
}

@media (max-width: 600px) {
  .craft-splash-window {
    flex-direction: column;
    min-height: auto;
  }
  .craft-splash-sidebar {
    width: 100%;
    height: 90px;
    border-inline-end: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .craft-splash-art-backdrop {
    flex-direction: row;
    align-items: center;
    padding: 10px 14px;
  }
  .craft-splash-hero-icon {
    margin: 0;
  }
  .craft-splash-hero-icon svg {
    width: 44px;
    height: 44px;
  }
  .craft-splash-art-footer {
    display: none;
  }
}

/* =========================================================================
   Office & Suite AI Menu Button (Positioned right before Help, matching app menu style)
   ========================================================================= */
.craft-ai-tab-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 3px 9px !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: inherit !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: background .15s ease, border-color .15s ease, color .15s ease !important;
}
.craft-ai-tab-btn:hover, .craft-ai-tab-btn.is-active {
  background: rgba(59, 130, 246, 0.14) !important;
  border-color: rgba(59, 130, 246, 0.32) !important;
  color: #38bdf8 !important;
}
html[data-theme=light] .craft-ai-tab-btn:hover, html[data-theme=light] .craft-ai-tab-btn.is-active {
  background: #eaf1ff !important;
  border-color: #bfdbfe !important;
  color: #1d4ed8 !important;
}

.craft-workspace-head {
  position: relative !important;
}
.craft-ai-ribbon,
.craft-mrtefo-ribbon {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  height: 96px !important;
  min-height: 96px !important;
  background: rgba(15, 23, 42, 0.98) !important;
  backdrop-filter: blur(16px) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
  z-index: 1000 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 18px !important;
  direction: ltr !important;
  overflow-x: auto !important;
}
.craft-ai-ribbon {
  border-bottom: 2px solid #6366f1 !important;
}
.craft-mrtefo-ribbon {
  border-bottom: 2px solid #0284c7 !important;
}
html[data-theme=light] .craft-ai-ribbon {
  background: rgba(248, 250, 252, 0.98) !important;
  border-bottom-color: #6366f1 !important;
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.14) !important;
}
html[data-theme=light] .craft-mrtefo-ribbon {
  background: rgba(248, 250, 252, 0.98) !important;
  border-bottom-color: #0284c7 !important;
  box-shadow: 0 8px 24px rgba(2, 132, 199, 0.14) !important;
}
.craft-ai-ribbon[hidden],
.craft-mrtefo-ribbon[hidden] {
  display: none !important;
}

.ai-ribbon-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 2px 6px;
  flex: none;
}
.ai-ribbon-items {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}
.ai-group-title {
  font-size: 9.5px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
html[data-theme=light] .ai-group-title {
  color: #64748b;
}
.ai-ribbon-divider {
  width: 1px;
  height: 64px;
  background: rgba(148, 163, 184, 0.2);
  flex: none;
}

.ai-ribbon-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px 8px;
  min-width: 58px;
  height: 58px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text, #f8fafc);
  cursor: pointer;
  transition: all .14s ease;
}
html[data-theme=light] .ai-ribbon-btn {
  background: rgba(15, 23, 42, 0.03);
  color: #0f172a;
}
.ai-ribbon-btn:hover {
  background: rgba(99, 102, 241, 0.18);
  border-color: rgba(129, 140, 248, 0.45);
  transform: translateY(-1px);
}
.ai-ribbon-btn-lg {
  min-width: 72px;
  background: rgba(124, 58, 237, 0.14);
  border-color: rgba(167, 139, 250, 0.3);
}
.ai-btn-icon {
  font-size: 18px;
  line-height: 1;
}
.ai-btn-label {
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.ai-ribbon-close {
  margin-left: auto;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 12px;
}
.ai-ribbon-close:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  border-color: #ef4444;
}

/* AI Modal Dialog */
.craft-ai-modal {
  width: min(640px, 94vw);
  border-radius: 18px;
  border: 1px solid rgba(129, 140, 248, 0.35);
  background: #0f172a;
  color: #f8fafc;
  box-shadow: 0 25px 90px rgba(0, 0, 0, 0.65);
  padding: 0;
  overflow: hidden;
}
html[data-theme=light] .craft-ai-modal {
  background: #ffffff;
  color: #0f172a;
  border-color: #cbd5e1;
  box-shadow: 0 20px 70px rgba(15, 23, 42, 0.18);
}
.ai-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  background: linear-gradient(90deg, rgba(79, 70, 229, 0.15), transparent);
}
.ai-modal-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ai-modal-sparkle {
  font-size: 18px;
}
.ai-modal-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
}
.ai-modal-close {
  border: 0;
  background: transparent;
  color: #94a3b8;
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.ai-modal-close:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.12);
}
.ai-modal-body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ai-field-label {
  font-size: 11.5px;
  font-weight: 700;
  color: #94a3b8;
}
html[data-theme=light] .ai-field-label {
  color: #475569;
}
.ai-input-area {
  width: 100%;
  border-radius: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(15, 23, 42, 0.5);
  color: inherit;
  font: inherit;
  font-size: 12.5px;
  resize: vertical;
}
html[data-theme=light] .ai-input-area {
  background: #f8fafc;
  border-color: #cbd5e1;
}
.ai-output-box {
  min-height: 90px;
  max-height: 240px;
  overflow-y: auto;
  border-radius: 10px;
  padding: 12px;
  border: 1px solid rgba(56, 189, 248, 0.3);
  background: rgba(56, 189, 248, 0.05);
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
}
html[data-theme=light] .ai-output-box {
  background: #f0f9ff;
  border-color: #bae6fd;
}
.ai-image-preview-box {
  text-align: center;
  padding: 12px;
  border-radius: 12px;
  background: #020617;
  border: 1px solid rgba(148, 163, 184, 0.2);
}
.ai-image-preview-box img {
  max-width: 100%;
  max-height: 220px;
  border-radius: 8px;
}
.ai-action-status {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #38bdf8;
}
.ai-status-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(56, 189, 248, 0.3);
  border-top-color: #38bdf8;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.ai-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(0, 0, 0, 0.15);
}

/* Prevent any text span inside splash/loading window from spinning */
.craft-loading span,
.craft-splash-window span {
  animation: none !important;
  transform: none !important;
}

/* Centered White Unsaved Changes Modal */
#craft-unsaved-dialog {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35) !important;
  max-width: 420px !important;
  width: calc(100vw - 32px) !important;
  margin: auto !important;
  padding: 26px 24px 22px !important;
  text-align: center !important;
  font-family: "Cairo", "Segoe UI", system-ui, sans-serif !important;
}
#craft-unsaved-dialog::backdrop {
  background: rgba(15, 23, 42, 0.58) !important;
  backdrop-filter: blur(5px) !important;
}
.craft-unsaved-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  border-radius: 14px;
  background: rgba(22, 163, 74, 0.1);
  color: #16a34a;
  display: flex;
  align-items: center;
  justify-content: center;
}
.craft-unsaved-title {
  margin: 0 0 8px !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
}
.craft-unsaved-desc {
  margin: 0 0 20px !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  color: #475569 !important;
}
.craft-unsaved-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.craft-unsaved-btn {
  min-width: 118px;
  min-height: 40px;
  padding: 8px 20px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease, background 0.15s ease;
}
.craft-unsaved-btn:hover {
  transform: translateY(-1px);
}
.craft-unsaved-btn-yes {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
  color: #ffffff !important;
  border: 1px solid #15803d !important;
  box-shadow: 0 6px 16px rgba(22, 163, 74, 0.28) !important;
}
.craft-unsaved-btn-yes:hover {
  filter: brightness(1.05);
}
.craft-unsaved-btn-no {
  background: #f8fafc !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
}
.craft-unsaved-btn-no:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

/* Mobile Responsive Workspace Layout */
@media (max-width: 768px) {
  body.craft-host,
  .craft-host {
    display: flex !important;
    flex-direction: column !important;
    height: 100dvh !important;
    width: 100vw !important;
    max-width: 100vw !important;
    overflow: hidden !important;
  }
  .craft-workspace-head {
    width: 100% !important;
    flex: none !important;
  }
  #craft-frames {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 0% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    position: relative !important;
  }
  #craft-frames iframe {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    flex: 1 1 0% !important;
    border: 0 !important;
    display: block !important;
  }
  .craft-topbar {
    min-height: 44px !important;
    padding: 4px 8px !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }
  .craft-topbar::-webkit-scrollbar {
    display: none;
  }
  .craft-home {
    width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
  }
  .craft-home span {
    display: none !important;
  }
  #craft-app {
    min-width: 128px !important;
    max-width: 158px !important;
    font-size: 11.5px !important;
    padding: 0 22px 0 8px !important;
    min-height: 28px !important;
  }
  .craft-project {
    display: none !important;
  }
  .craft-actions {
    gap: 4px !important;
  }
  .craft-actions > button,
  .craft-actions > a {
    min-height: 28px !important;
    padding: 0 7px !important;
    font-size: 11px !important;
  }
  #craft-recovery,
  #craft-classic {
    display: none !important;
  }
  .craft-splash-window {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    max-width: calc(100vw - 24px) !important;
    border-radius: 16px !important;
  }
  .craft-splash-sidebar {
    padding: 18px 16px !important;
    min-height: 130px !important;
  }
  .craft-splash-content {
    padding: 18px 16px !important;
    gap: 14px !important;
  }
  .craft-splash-app-title {
    font-size: 18px !important;
  }
  .craft-status {
    min-height: 24px !important;
    padding: 2px 8px !important;
    font-size: 10.5px !important;
  }
  .craft-status a,
  .craft-status > span:nth-child(2) {
    display: none !important;
  }
}

/* Office Host Chrome Polish & App Sizing */
body.craft-host.is-office-suite .craft-topbar {
    background: #f1f5f9 !important;
    color: #1e293b !important;
    border-bottom: 1px solid #cbd5e1 !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 10px !important;
}
[data-theme="dark"] body.craft-host.is-office-suite .craft-topbar {
    background: #0f172a !important;
    color: #f8fafc !important;
    border-bottom-color: #334155 !important;
}
body.craft-host.is-office-suite #craft-app {
    min-width: 240px !important;
    max-width: 340px !important;
    width: auto !important;
    height: 28px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    background: rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    color: inherit !important;
    border-radius: 8px !important;
    padding: 2px 8px !important;
}
[data-theme="dark"] body.craft-host.is-office-suite #craft-app {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}
body.craft-host.is-office-suite .craft-project {
    height: 28px !important;
    min-height: 28px !important;
    padding: 2px 10px !important;
    font-size: 0.82rem !important;
}
body.craft-host.is-office-suite .craft-app-menubar.is-office-hidden {
    display: none !important;
}
.craft-office-inline-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 12px;
    background: #e2e8f0;
    border-bottom: 1px solid #cbd5e1;
    direction: ltr !important;
}
[data-theme="dark"] .craft-office-inline-tabs {
    background: #1e293b;
    border-bottom-color: #334155;
}
.craft-office-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #334155;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}
[data-theme="dark"] .craft-office-tab-btn {
    color: #e2e8f0;
}
.craft-office-tab-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #0284c7;
}
[data-theme="dark"] .craft-office-tab-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #38bdf8;
}
.craft-office-tab-btn.is-active {
    background: #ffffff !important;
    color: #0284c7 !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
[data-theme="dark"] .craft-office-tab-btn.is-active {
    background: #0f172a !important;
    color: #38bdf8 !important;
    border-color: #475569 !important;
}
.craft-office-tab-btn.craft-office-tab-ai {
    color: #0284c7;
    font-weight: 800;
}
[data-theme="dark"] .craft-office-tab-btn.craft-office-tab-ai {
    color: #38bdf8;
}

.byb-vip-gold-badge.mini-vip{
 padding:2px 8px !important;
 font-size:11px !important;
 letter-spacing:0.02em !important;
 box-shadow:0 2px 6px rgba(245,158,11,0.3) !important;
}


/* Header AI Button — Matching #craft-app rounded shape with no arrow & transparent bg */
.craft-header-ai-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 28px !important;
  height: 28px !important;
  min-width: 38px !important;
  padding: 0 10px !important;
  border-radius: 7px !important;
  border: 1px solid rgba(203, 213, 225, 0.85) !important;
  background: transparent !important;
  color: #3b82f6 !important;
  font-family: 'Cairo', 'Segoe UI', system-ui, sans-serif !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  line-height: 1 !important;
  flex: none !important;
  box-shadow: none !important;
}
[data-theme="dark"] .craft-header-ai-btn {
  border-color: rgba(148, 163, 184, 0.4) !important;
  color: #60a5fa !important;
}
.craft-header-ai-btn:hover,
.craft-header-ai-btn.is-active {
  border-color: #3b82f6 !important;
  color: #1d4ed8 !important;
  background: rgba(59, 130, 246, 0.08) !important;
  transform: translateY(-1px);
}
[data-theme="dark"] .craft-header-ai-btn:hover,
[data-theme="dark"] .craft-header-ai-btn.is-active {
  border-color: #60a5fa !important;
  color: #93c5fd !important;
  background: rgba(59, 130, 246, 0.18) !important;
}

/* Save Changes Confirmation Dialog Font — Cairo Font strictly */
#craft-unsaved-dialog,
#craft-unsaved-dialog *,
#craft-unsaved-title,
#craft-unsaved-desc,
.craft-unsaved-title,
.craft-unsaved-desc,
.craft-unsaved-btn,
.craft-unsaved-btn-yes,
.craft-unsaved-btn-no,
.msk-exit,
.msk-exit * {
  font-family: "Cairo", "Segoe UI", Tahoma, sans-serif !important;
}

/* Guaranteed Dark Blue Text for VIP Pro */
.byb-vip-gold-badge,
.byb-vip-gold-badge span,
.vip-crown-btn,
.vip-crown-btn span,
#byb-vip-badge,
#byb-vip-badge span {
  color: #0f2963 !important;
  font-weight: 900 !important;
}
.byb-vip-gold-badge svg,
.vip-crown-btn svg,
#byb-vip-badge svg {
  color: #0f2963 !important;
  fill: #0f2963 !important;
}