/* App frame (Saad, 7 Oct: "richer app frame") — upgrades every product window site-wide without
   touching markup: a slim sidebar rail with the brand mark and section icons, an app-style breadcrumb
   in the top bar, and a second window layered behind for depth. Contents stay page-specific. */
.mock{isolation:isolate}
.mock::before{content:"";position:absolute;z-index:-1;left:6%;right:6%;top:-16px;height:72px;border-radius:24px 24px 0 0;background:rgba(255,255,255,.55);border:1px solid var(--line);border-bottom:0;box-shadow:0 -6px 24px -18px rgba(14,15,12,.25)}
.mock .win{position:relative;padding-left:72px}
/* sidebar rail */
.mock .win::before{content:"";position:absolute;left:0;top:0;bottom:0;width:56px;border-right:1px solid var(--line);background:#FAFBF7 no-repeat;border-radius:var(--r-lg) 0 0 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Crect width='28' height='28' rx='8' fill='%230E0F0C'/%3E%3Crect x='8' y='8' width='12' height='12' rx='3' fill='%23C8F05A'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='9' fill='%23EEF9D2'/%3E%3Cpath d='M9 9h6v6H9zM17 9h6v6h-6zM9 17h6v6H9zM17 17h6v6h-6z' fill='none' stroke='%234E6B00' stroke-width='1.6'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M9 12h13l-3-3M23 20H10l3 3' fill='none' stroke='%236E7368' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M11 8h8l4 4v12H11zM14 16h6M14 20h6' fill='none' stroke='%236E7368' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='9' y='10' width='14' height='13' rx='2.5' fill='none' stroke='%236E7368' stroke-width='1.6'/%3E%3Cpath d='M9 14h14M13 8v4M19 8v4' stroke='%236E7368' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='3' fill='none' stroke='%23B7BCAE' stroke-width='1.6'/%3E%3Cpath d='M16 8v2.5M16 21.5V24M8 16h2.5M21.5 16H24M10.3 10.3l1.8 1.8M19.9 19.9l1.8 1.8M10.3 21.7l1.8-1.8M19.9 12.1l1.8-1.8' stroke='%23B7BCAE' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size:28px 28px,32px 32px,32px 32px,32px 32px,32px 32px,32px 32px;
  background-position:14px 18px,12px 70px,12px 112px,12px 154px,12px 196px,12px calc(100% - 22px)}
/* top bar: app breadcrumb + status */
.mock .bar span{background:var(--bg-2);border:1px solid var(--line);border-radius:8px;padding:4px 10px;margin-left:8px;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mock .bar i:first-child{background:#E8E2D9}.mock .bar i:nth-child(2){background:#E3E6DC}.mock .bar i:nth-child(3){background:#D9DCD3}
.mock .bar b{display:inline-flex;align-items:center;gap:6px}
.mock .bar b::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pos)}
@media (max-width:880px){.mock::before{display:none}}
@media (max-width:560px){.mock .win{padding-left:16px}.mock .win::before{display:none}.mock .bar span{max-width:52%}}