/* yo-ws2.css — fresh workspace (task b116cfa4, 2026-10-25). Loaded after y365.css on the portal pages.
   Shared chrome (top bar, rail, switcher, cards) on every portal page; the full redesign is scoped to the home page. */
:root{--yh-ink:#1d1840;--yh-mut:#56517a;--yh-line:rgba(110,92,230,.14);--yh-card:rgba(255,255,255,.82);--yh-brand:#5b47e0;--yh-brand2:#7c6cf6}
/* ---------- shared chrome: airy glass top bar + rail ---------- */
body{background:radial-gradient(1100px 620px at 100% -10%,rgba(139,124,248,.14),transparent 60%),radial-gradient(900px 600px at -10% 30%,rgba(110,224,214,.10),transparent 62%),radial-gradient(900px 640px at 50% 115%,rgba(255,154,170,.08),transparent 60%),#f7f6fd;background-attachment:fixed}
.y-top{background:rgba(255,255,255,.74);-webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px);border-bottom-color:var(--yh-line)}
.y-rail{background:rgba(255,255,255,.62);-webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px);border-inline-end-color:var(--yh-line)}
.y-rail a{border-radius:14px;transition:background .15s,color .15s}
.y-rail a .yoi-r{width:30px;height:30px;border-radius:9px;filter:drop-shadow(0 2px 4px rgba(43,30,120,.16))}
.y-rail a:not([aria-current]) .yoi-r{filter:drop-shadow(0 2px 4px rgba(43,30,120,.12)) saturate(.92)}
.y-rail a[aria-current]{background:rgba(124,108,246,.12);color:var(--yh-brand);font-weight:700}
.y-rail a:hover{background:rgba(124,108,246,.08)}
@media (min-width:761px) and (max-height:940px){.y-rail a .yoi-r{width:26px;height:26px;border-radius:8px}}
@media (min-width:761px) and (max-height:780px){.y-rail a .yoi-r{width:24px;height:24px;border-radius:7px}}
@media (max-width:760px){.y-rail{background:rgba(255,255,255,.86)}.y-rail a .yoi-r{width:26px;height:26px;border-radius:8px}}
/* switcher popover («تطبيقات يمامة أوفيس») */
.y-pop{border-radius:22px;border-color:var(--yh-line);box-shadow:0 24px 60px rgba(40,26,110,.22),0 2px 8px rgba(40,26,110,.08)}
.y-pop.apps{width:384px;padding:16px 14px 14px;background:rgba(255,255,255,.95);-webkit-backdrop-filter:saturate(1.5) blur(18px);backdrop-filter:saturate(1.5) blur(18px)}
.y-pop.apps h3{font-size:14px;color:var(--yh-brand);margin:0 6px 12px}
.y-agrid{gap:6px}.y-agrid a{min-height:94px;border-radius:16px;gap:8px;transition:background .15s}
.y-agrid a:hover{background:rgba(124,108,246,.09)}
.y-agrid .y-tile.yoi-up{width:46px;height:46px}
/* cards / panels on every portal page */
.y-panel,.y-card{background:var(--yh-card);border-color:var(--yh-line);border-radius:20px}
.y-empty{color:var(--yh-mut)}
/* ================= HOME ================= */
body[data-page=home]{background:radial-gradient(1200px 700px at 105% -15%,rgba(139,124,248,.22),transparent 60%),radial-gradient(1000px 700px at -15% 25%,rgba(110,224,214,.16),transparent 62%),radial-gradient(1000px 700px at 45% 120%,rgba(255,166,140,.12),transparent 60%),#f6f5fd;background-attachment:fixed}
body[data-page=home] .y-main{max-width:none;padding:calc(var(--top) + 26px) clamp(20px,3.2vw,52px) 36px}
body[data-page=home] .y-main>*{max-width:1500px;margin-inline:auto}
/* hero */
.yh-hero.y-hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);align-items:center;gap:24px;min-height:330px;padding:38px 44px;border-radius:30px;color:var(--yh-ink);
  background:radial-gradient(520px 340px at 92% 8%,rgba(167,150,255,.42),transparent 68%),radial-gradient(420px 300px at 6% 110%,rgba(120,232,214,.32),transparent 70%),radial-gradient(380px 260px at 40% -20%,rgba(255,190,160,.26),transparent 70%),linear-gradient(135deg,#ffffff 0%,#f6f3ff 55%,#eef8ff 100%);
  border:1px solid rgba(124,108,246,.16);box-shadow:0 30px 60px -38px rgba(60,40,170,.45),inset 0 1px 0 rgba(255,255,255,.9)}
.yh-hero.y-hero::after{background-image:radial-gradient(rgba(91,71,224,.10) 1px,transparent 1.3px);opacity:.8}
.yh-hero .y-hx{max-width:none}
.yh-hero .y-date{color:#4b3bc4;background:rgba(124,108,246,.10);border:1px solid rgba(124,108,246,.18);font-weight:600}
.yh-hero h1{color:#1d1446;font-size:clamp(30px,2.6vw,42px);line-height:1.25;margin:2px 0 6px;font-weight:700}
.yh-sub{color:var(--yh-mut);font-size:16.5px;margin:0 0 22px;max-width:560px}
.yh-ask{display:flex;align-items:center;gap:10px;max-width:640px;background:#fff;border:1px solid rgba(124,108,246,.22);border-radius:18px;padding:7px 7px 7px 7px;padding-inline-start:12px;box-shadow:0 14px 34px -18px rgba(60,40,170,.45);transition:box-shadow .2s,border-color .2s}
.yh-ask:focus-within{border-color:#7c6cf6;box-shadow:0 0 0 4px rgba(124,108,246,.18),0 14px 34px -18px rgba(60,40,170,.5)}
.yh-ask>.yoi-t{width:34px;height:34px;border-radius:10px}
.yh-ask input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:16px;color:var(--yh-ink);height:44px}
.yh-ask input::placeholder{color:#8a85a8}
.yh-go{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 18px;border:0;border-radius:13px;font:inherit;font-weight:700;color:#fff;cursor:pointer;background-color:#5338d8;background:linear-gradient(135deg,#6a55e6,#4a2fc9);box-shadow:0 8px 18px -8px rgba(83,56,216,.7);transition:transform .15s,filter .15s}
.yh-go:hover{filter:brightness(1.06);transform:translateY(-1px)}
.yh-go:focus-visible,.yh-ask input:focus-visible{outline:3px solid #4b3fb0;outline-offset:2px}
.yh-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.yh-qlab{margin:20px 0 8px;font-size:13px;font-weight:700;color:var(--yh-mut)}
.yh-hero .y-qa{display:flex;flex-wrap:wrap;gap:10px}
.yh-hero .y-qa .y-btn{background:rgba(255,255,255,.86);border:1px solid rgba(124,108,246,.16);color:var(--yh-ink);font-weight:600;height:50px;padding:0 18px 0 10px;padding-inline:10px 18px;border-radius:15px;gap:10px;box-shadow:0 6px 16px -12px rgba(60,40,170,.5);transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s,border-color .18s}
.yh-hero .y-qa .y-btn:hover{transform:translateY(-2px);border-color:rgba(124,108,246,.36);box-shadow:0 14px 26px -14px rgba(60,40,170,.55);background:#fff}
.yh-hero .y-qa .y-btn .yoi-t{width:32px;height:32px;border-radius:10px}
.y-btn .yoi-t svg,.yh-ask .yoi-t svg,.y-rail .yoi-t svg{width:100%!important;height:100%!important}
.yh-hero .y-qa .y-btn.pri{display:none}
/* hero art: the new icon family, floating */
.yh-art{position:relative;height:280px;pointer-events:none}
.yh-glow{position:absolute;inset:14% 18%;border-radius:50%;background:radial-gradient(closest-side,rgba(139,124,248,.35),rgba(139,124,248,0));filter:blur(8px)}
.yh-f{position:absolute;display:block;animation:yhF 8s ease-in-out infinite;transform-origin:center}
.yh-f .yoi-t{width:100%;height:100%;border-radius:28%;filter:drop-shadow(0 14px 22px rgba(50,30,140,.22)) drop-shadow(0 2px 4px rgba(50,30,140,.12))}
.yh-ring{position:absolute;left:50%;top:50%;width:300px;height:210px;margin:-105px 0 0 -150px;border-radius:50%;border:1.5px dashed rgba(124,108,246,.28)}
.yh-ring.r2{width:200px;height:140px;margin:-70px 0 0 -100px;border-style:solid;border-color:rgba(124,108,246,.14)}
.yh-f1{width:104px;height:104px;left:calc(50% - 52px);top:calc(50% - 52px);z-index:3;animation-duration:9s}
.yh-f2{width:62px;height:62px;left:calc(50% - 150px - 31px);top:calc(50% - 31px);animation-delay:-1.2s}
.yh-f3{width:62px;height:62px;left:calc(50% + 150px - 31px);top:calc(50% - 31px);animation-delay:-2.4s}
.yh-f4{width:58px;height:58px;left:calc(50% - 29px);top:calc(50% - 105px - 29px);animation-delay:-3.1s}
.yh-f5{width:58px;height:58px;left:calc(50% - 29px);top:calc(50% + 105px - 29px);animation-delay:-4s}
.yh-f6{width:52px;height:52px;left:calc(50% - 106px - 26px);top:calc(50% - 74px - 26px);animation-delay:-.6s}
.yh-f7{width:52px;height:52px;left:calc(50% + 106px - 26px);top:calc(50% + 74px - 26px);animation-delay:-5s}
.yh-f8{width:52px;height:52px;left:calc(50% + 106px - 26px);top:calc(50% - 74px - 26px);animation-delay:-2s}
.yh-f9{width:52px;height:52px;left:calc(50% - 106px - 26px);top:calc(50% + 74px - 26px);animation-delay:-3.6s}
@keyframes yhF{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-9px) rotate(-2deg)}}
/* body grid */
.yh-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(290px,340px);gap:28px;align-items:start;margin-top:30px}
.yh-main>.y-sec:first-child,.yh-side>section:first-child{margin-top:0}
.yh-side{display:flex;flex-direction:column;gap:22px;position:sticky;top:calc(var(--top) + 20px)}
.yh-side>section{margin:0}
.yh-side>section:not([hidden])~.yh-empty{display:none}
body[data-page=home] .y-sec>header h2,body[data-page=home] .yh-side header h2{font-size:17px;font-weight:700;color:var(--yh-ink)}
body[data-page=home] .y-sec>header,body[data-page=home] .yh-side header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
/* app tiles */
body[data-page=home] .y-grid{grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px}
body[data-page=home] .y-app{background:var(--yh-card);border:1px solid var(--yh-line);border-radius:22px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s,border-color .2s}
body[data-page=home] .y-app:hover{background:#fff;transform:translateY(-3px);border-color:rgba(124,108,246,.3);box-shadow:0 18px 34px -20px rgba(60,40,170,.45)}
body[data-page=home] .y-app a.go{display:grid;grid-template-columns:auto;justify-items:start;align-content:start;text-align:start;gap:4px;min-height:142px;padding:18px 18px 16px;border-radius:22px}
body[data-page=home] .y-app .y-tile.yoi-up{width:50px;height:50px;border-radius:15px;margin-bottom:10px}
body[data-page=home] .y-app .nm{font-size:15.5px;font-weight:700;color:var(--yh-ink);line-height:1.35}
.yh-d{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12.8px;line-height:1.5;color:var(--yh-mut)}
body[data-page=home] .y-app:focus-within{border-color:rgba(124,108,246,.5)}
body[data-page=home] #y-pins .y-app{background:linear-gradient(160deg,#fff,rgba(246,243,255,.9))}
/* side: recent + clean empty state */
body[data-page=home] .yh-side .y-panel{padding:8px;border-radius:22px;box-shadow:0 12px 30px -24px rgba(60,40,170,.5)}
body[data-page=home] .yh-side .y-list li a{border-radius:14px}
body[data-page=home] .yh-side .y-tile.yoi-up{width:38px;height:38px;border-radius:11px}
.yh-empty{background:var(--yh-card);border:1px solid var(--yh-line);border-radius:22px;padding:26px 22px 22px;text-align:center;box-shadow:0 12px 30px -24px rgba(60,40,170,.5)}
.yh-empty>.yoi-t{width:56px;height:56px;border-radius:17px;margin:0 auto 12px}
.yh-empty h2{font-size:16.5px;margin:0 0 6px;color:var(--yh-ink)}
.yh-empty p{margin:0 0 16px;color:var(--yh-mut);font-size:14px;line-height:1.7}
.yh-ea{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.yh-ea .y-btn{border-radius:12px}
.yh-ea .y-btn.pri{background:linear-gradient(135deg,#8b7cf8,#5338d8);color:#fff;border:0}
/* footer */
body[data-page=home] .y-foot{margin-top:34px;border-top:1px solid var(--yh-line);padding-top:16px;color:var(--yh-mut)}
/* theme button */
.yh-theme .s{display:none}html.yd .yh-theme .s{display:inline-flex}html.yd .yh-theme .m{display:none}.yh-theme span{display:inline-flex}
/* entrance */
/* w74-perf: the hero is the largest first-screen content (the LCP); it no longer fades in from opacity 0 (that held the LCP until the scripts ran), only the body below it animates */
@media (prefers-reduced-motion:no-preference){body.yh-on .yh-body{animation:yhIn .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:.06s}}
@keyframes yhIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.yh-f{animation:none}}
/* widths */
@media (max-width:1280px){.yh-hero.y-hero{grid-template-columns:minmax(0,1.35fr) minmax(340px,.65fr);padding:34px 36px}}
@media (max-width:1100px){.yh-body{grid-template-columns:minmax(0,1fr)}.yh-side{position:static}.yh-hero.y-hero{grid-template-columns:minmax(0,1fr)}.yh-art{display:none}}
@media (max-width:760px){
  .yh-theme{display:none!important}
  body[data-page=home] .y-main{padding:calc(var(--top) + 14px) 14px calc(84px + env(safe-area-inset-bottom))}
  .yh-hero.y-hero{min-height:0;padding:22px 18px 18px;border-radius:24px;gap:0}
  .yh-hero h1{font-size:26px}.yh-sub{font-size:15px;margin-bottom:16px}
  .yh-ask{padding:5px;padding-inline-start:8px;border-radius:16px}.yh-ask>.yoi-t{width:30px;height:30px}.yh-go{padding:0 14px}.yh-go svg{display:none}
  .yh-qlab{margin:16px 0 8px}
  .yh-hero .y-qa{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .yh-hero .y-qa .y-btn{flex-direction:column;height:auto;min-height:78px;padding:10px 4px;justify-content:center;font-size:13px;gap:6px;border-radius:16px}
  .yh-hero .y-qa .y-btn .yoi-t{width:34px;height:34px}
  .yh-body{margin-top:22px;gap:22px}
  body[data-page=home] .y-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  body[data-page=home] .y-app{background:transparent;border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
  body[data-page=home] .y-app:hover{transform:none;box-shadow:none;background:rgba(124,108,246,.06)}
  body[data-page=home] .y-app a.go{justify-items:center;text-align:center;min-height:96px;padding:10px 2px 8px;gap:2px}
  body[data-page=home] .y-app .y-tile.yoi-up{width:52px;height:52px;margin-bottom:6px}
  body[data-page=home] .y-app .nm{font-size:12.5px;font-weight:600}
  body[data-page=home] #y-pins .y-app{background:transparent}
  .yh-d{display:none}
}
@media (max-width:360px){body[data-page=home] .y-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.yh-hero .y-qa .y-btn{font-size:12px}}
/* w149-home-phone: on a phone «فتحتها مؤخرًا» comes right after the quick actions (as OneDrive / Microsoft 365 mobile lead with recent files), and the six quick actions sit in 3 columns at every width (no lone button on a second row) */
body[data-page=home] .yh-hero .y-qa{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:760px){body[data-page=home] .yh-side{order:-1}}
/* ================= DARK (home) ================= */
html.yd{color-scheme:dark;--yh-ink:#efedff;--yh-mut:#aaa5cc;--yh-line:rgba(170,155,255,.16);--yh-card:rgba(32,28,60,.72);--ink:#efedff;--muted:#aaa5cc;--line:rgba(170,155,255,.16);--bg:#100e20;--card:#1b1835;--soft:#262150}
html.yd body[data-page=home]{background:radial-gradient(1200px 700px at 105% -15%,rgba(124,100,255,.26),transparent 60%),radial-gradient(1000px 700px at -15% 25%,rgba(40,180,170,.14),transparent 62%),radial-gradient(1000px 700px at 45% 120%,rgba(230,110,140,.10),transparent 60%),#0f0d1f;color:var(--yh-ink)}
html.yd .y-top{background:rgba(18,16,36,.72);border-bottom-color:var(--yh-line);color:var(--yh-ink)}
html.yd .y-rail{background:rgba(18,16,36,.6);border-inline-end-color:var(--yh-line);color:#cfcaf0}
html.yd .y-rail a{color:#cfcaf0}html.yd .y-rail a[aria-current]{background:rgba(160,145,255,.16);color:#d9d2ff}
html.yd .y-top .y-ib,html.yd .y-top a,html.yd .y-top button{color:#e6e2ff}
html.yd .y-logo,html.yd .y-logo b{color:#f2f0ff}
html.yd .y-search input,html.yd .y-top input{background:rgba(255,255,255,.06);color:#efedff;border-color:var(--yh-line)}
html.yd .yh-hero.y-hero{background:radial-gradient(520px 340px at 92% 8%,rgba(124,100,255,.40),transparent 68%),radial-gradient(420px 300px at 6% 110%,rgba(40,180,170,.22),transparent 70%),linear-gradient(135deg,#1d1940 0%,#191634 60%,#141a33 100%);border-color:rgba(170,155,255,.18);box-shadow:0 30px 60px -38px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.06)}
html.yd .yh-hero h1{color:#fff}html.yd .yh-hero .y-date{color:#d6cfff;background:rgba(160,145,255,.14);border-color:rgba(160,145,255,.24)}
html.yd .yh-ring{border-color:rgba(170,155,255,.26)}html.yd .yh-ring.r2{border-color:rgba(170,155,255,.12)}
html.yd .yh-ask{background:rgba(255,255,255,.06);border-color:rgba(170,155,255,.26)}html.yd .yh-ask input{color:#fff}html.yd .yh-ask input::placeholder{color:#9a95bf}
html.yd .yh-hero .y-qa .y-btn{background:rgba(255,255,255,.06);border-color:rgba(170,155,255,.2);color:#efedff}
html.yd .yh-hero .y-qa .y-btn:hover{background:rgba(255,255,255,.1)}
html.yd body[data-page=home] .y-app:hover{background:rgba(44,39,82,.9)}
html.yd body[data-page=home] #y-pins .y-app{background:linear-gradient(160deg,rgba(44,39,82,.85),rgba(32,28,60,.75))}
html.yd .y-panel,html.yd .y-pop,html.yd .yh-empty{background:rgba(30,27,56,.92);border-color:var(--yh-line);color:var(--yh-ink)}
html.yd .y-pop a,html.yd .y-pop h3,html.yd .y-list a,html.yd .y-list b{color:var(--yh-ink)}
html.yd .y-agrid a:hover,html.yd .y-list li a:hover{background:rgba(160,145,255,.12)}
html.yd .y-link,html.yd .y-edit{color:#c3b9ff}
html.yd .y-btn{background:rgba(255,255,255,.06);border-color:var(--yh-line);color:#efedff}
html.yd .y-foot,html.yd .y-foot a{color:#aaa5cc}
html.yd .y-app .y-pin{background:#262150;color:#c3b9ff}
@media (max-width:760px){html.yd body[data-page=home] .y-app,html.yd body[data-page=home] #y-pins .y-app{background:transparent;border-color:transparent}html.yd .y-rail{background:rgba(18,16,36,.9)}}

/* empty-state icon takes its app's colour from the icon family */
body[data-page=drive] .y-empty svg{background:linear-gradient(155deg,rgba(255,255,255,.38),rgba(255,255,255,0) 45%),linear-gradient(135deg,#7bead0,#13a08c);box-shadow:0 14px 28px -14px #13a08c}
body[data-page=calendar] .y-empty svg{background:linear-gradient(155deg,rgba(255,255,255,.38),rgba(255,255,255,0) 45%),linear-gradient(135deg,#ff9aa2,#ec4a64);box-shadow:0 14px 28px -14px #ec4a64}
body[data-page=notes] .y-empty svg{background:linear-gradient(155deg,rgba(255,255,255,.38),rgba(255,255,255,0) 45%),linear-gradient(135deg,#ffe27a,#f2b632);box-shadow:0 14px 28px -14px #f2b632}
body[data-page=forms] .y-empty svg{background:linear-gradient(155deg,rgba(255,255,255,.38),rgba(255,255,255,0) 45%),linear-gradient(135deg,#f8a2d6,#d0509e);box-shadow:0 14px 28px -14px #d0509e}
body[data-page=assistant] .y-empty svg{background:linear-gradient(155deg,rgba(255,255,255,.38),rgba(255,255,255,0) 45%),linear-gradient(135deg,#e09cff,#9b3ff0);box-shadow:0 14px 28px -14px #9b3ff0}

/* w7 c7a24f33: muted home text darkened for 4.5:1 contrast on the tinted background (persona H13) */
/* w7 c7a24f33: the all-apps popover fits phone screens (was 384px wide past the 360px edge; persona H02) */
@media (max-width:760px){.y-pop.apps{width:auto;inset-inline:8px;max-width:calc(100vw - 16px)}}

/* wave8 b33ee986: dark home — solid base colours with the glows moved to pseudo-layers, so text sits on a real opaque background (persona H13 read the old transparent gradient layers as white) */
html.yd body[data-page=home]{background:#0f0d1f}
html.yd body[data-page=home]::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(1200px 700px at 105% -15%,rgba(124,100,255,.26),transparent 60%),radial-gradient(1000px 700px at -15% 25%,rgba(40,180,170,.14),transparent 62%),radial-gradient(1000px 700px at 45% 120%,rgba(230,110,140,.10),transparent 60%)}
html.yd .yh-hero.y-hero{background:#1a1739;isolation:isolate}
html.yd .yh-hero.y-hero::before{background:radial-gradient(520px 340px at 92% 8%,rgba(124,100,255,.40),transparent 68%),radial-gradient(420px 300px at 6% 110%,rgba(40,180,170,.22),transparent 70%),linear-gradient(135deg,#1d1940 0%,#191634 60%,#141a33 100%);border-radius:inherit}
html.yd body[data-page=home] #y-pins .y-app{background:linear-gradient(160deg,#282349,#1c1835)}

/* wave9 6c4272a0: solid dark-theme tokens — every dark surface is an opaque colour, glows live on pseudo-layers, so the contrast a person sees is the contrast a checker measures (persona H13 on /en/assistant, home «Quick create», all-apps popover) */
html.yd{--yh-line:#2e2950;--yh-card:#1b1835;--line:#2e2950;--muted:#b4aed6;--yh-mut:#b4aed6}
html.yd body{background:#100e20!important;color:var(--yh-ink)}
html.yd body:not([data-page=home])::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(1200px 520px at 85% -120px,rgba(111,95,230,.16),transparent 70%)}
html.yd body[data-page=home]{background:#0f0d1f!important}
html.yd .y-top{background:#141229}
html.yd .y-rail{background:#141229}
html.yd .y-rail a[aria-current]{background:#2a2552;color:#e2dcff}
html.yd .y-search input,html.yd .y-top input{background:#1b1835}
html.yd .yh-ask{background:#221e40}
html.yd .yh-hero .y-date{background:#2a2552;border-color:#3b3570}
html.yd .yh-hero .y-qa .y-btn{background:#262147;border-color:#3b3570}
html.yd .yh-hero .y-qa .y-btn:hover{background:#2f2956}
html.yd body[data-page=home] .y-app:hover{background:#2c2752}
html.yd .y-panel,html.yd .y-pop,html.yd .yh-empty{background:#1b1835}
html.yd .y-agrid a:hover,html.yd .y-list li a:hover{background:#2a2552}
html.yd .y-btn{background:#1d1a36;border-color:#2e2950;color:#efedff}
html.yd .y-btn.pri,html.yd a.y-btn.pri{background:#5240d6;border-color:#5240d6;color:#fff;box-shadow:none}
html.yd .y-btn.pri:hover{background:#5b49e3;filter:none}
html.yd .yh-qlab{color:#c9c3f0}
html.yd .yt-fh,html.yd .y-pop h3,html.yd .y-pop b{color:#efedff}
html.yd .y-sub,html.yd .a-hero p,html.yd .y-chip small,html.yd .y-chips small{color:#b7b0e0}
html.yd .a-hero h2,html.yd .a-hero h1{color:#f4f2ff}
html.yd .aix-ctxl,html.yd .aip-mlab{color:#c9c3f0}
@media (max-width:760px){html.yd .y-rail{background:#141229}}

/* wave9 6c4272a0 (b): assistant page and «More apps» flyout in dark — the example cards were white with light text and the rail «More» label dark on dark (real, not a checker artefact); every surface now has a solid dark colour */
html.yd .a-main{background:#1e1a3a!important}
html.yd .a-log{background-image:none!important;box-shadow:inset 0 140px 120px -110px rgba(124,100,255,.22)}
html.yd body[data-page] .y-btn.pri,html.yd body[data-page] a.y-btn.pri{background:#5240d6!important;border-color:#5240d6!important;color:#fff!important}
html.yd .aip-ex{background:#1b1835!important;border-color:#2e2950!important}
html.yd .aip-exo{background:#262147!important;color:#e6e1ff!important}
html.yd .aip-exb,html.yd .aip-ext,html.yd .aip-ext b{color:#efedff!important}
html.yd .aip-ext small,html.yd .aip-gal small,html.yd .aip-gh span{color:#c4bee6!important}
html.yd .aip-gh b,html.yd .aip-gh h3{color:#f1eeff!important}
html.yd .aip-tabs button{background:#262147!important;border-color:#3b3570!important;color:#e6e1ff!important}
html.yd .aip-tabs button span{color:inherit!important}
html.yd .aip-tabs button[aria-selected=true],html.yd .aip-tabs button.on{background:#5240d6!important;border-color:#5240d6!important;color:#fff!important}
html.yd .y-rail .yt-more,html.yd .y-rail .yt-more span,html.yd .y-rail.yt-rail a{color:#d6d0f5!important}
html.yd .y-rail.yt-rail a[aria-current=page]{background:#2a2552!important;color:#f0ecff!important;box-shadow:none}
html.yd .y-rail.yt-rail a:hover,html.yd .y-rail .yt-more:hover{background:#221e40!important}
html.yd .yt-fly{background:#1b1835!important;border-color:#2e2950!important}
html.yd .yt-fly a,html.yd .yt-fly button{color:#efedff!important}
html.yd .yt-fly small{color:#c4bee6!important}
html.yd .yt-fly a:hover,html.yd .yt-fly button:hover{background:#2a2552!important}

/* wave9 6c4272a0 (c): primary buttons are one solid colour in light mode too (gradient light stop gave 3.94:1 behind white text on «Sign in») */
.y-btn.pri,a.y-btn.pri{background:#4b3fb0!important;border-color:#4b3fb0!important;color:#fff!important}
.y-btn.pri:hover,a.y-btn.pri:hover{background:#3f3499!important}

/* w23 (01a8b9f7): phone bottom-bar «المزيد» kept #3d3a55 in dark mode = 1.68:1 on #141229 (settled pixel probe, Firefox ar390) */
html.yd .y-rail .y-rmore,html.yd .y-rail .y-rmore span{color:#d6d0f5!important}html.yd .y-rail .y-rmore:hover{background:#221e40!important}

/* w30 (c14da6a0): dark header search field outline readable (1.41 -> >=3:1) */
html.yd .y-search input,html.yd .y-top input{border-color:#6c65a3}

/* w64-fcj-8856d5: first-time visitor call to action on the home page */
.yh-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:-6px 0 22px}
.yh-cta a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:13px;font-weight:700;text-decoration:none;font-size:15px}
.yh-cta-pri{color:#fff;background-color:#5338d8;background:linear-gradient(135deg,#6a55e6,#4a2fc9);box-shadow:0 8px 18px -8px rgba(83,56,216,.7)}
.yh-cta-sec{color:var(--yh-brand);background:var(--yh-card);border:1px solid var(--yh-line)}
.yh-cta a.yh-cta-lnk{color:#4330c0;padding:0 6px;font-weight:600;text-decoration:underline;text-underline-offset:4px}
.yh-cta-note{flex-basis:100%;margin:2px 0 0;color:var(--yh-mut);font-size:13.5px}
.yd .yh-cta-sec{background:rgba(255,255,255,.06);color:#c9c1ff}.yd .yh-cta a.yh-cta-lnk{color:#c9c1ff}
@media (max-width:600px){.yh-cta{gap:8px;margin:-4px 0 18px}.yh-cta a{flex:1 1 auto;justify-content:center;padding:0 12px;font-size:14.5px}.yh-cta a.yh-cta-lnk{flex-basis:100%;min-height:44px}}

/* w174-home-drive-desktop (task f72da540): Drive desktop chrome vs OneDrive at 1229–1440 px. Before: at 1280×720 and at a 1229×610 window (125 % laptop scaling) the first file row started at 742 px, below the window (the title card, storage meter, two rows of tools, views, search and sort filled the screen); file rows were 111 px tall because the six row buttons wrapped onto two lines and «6 minutes ago» broke in two. Now: a slimmer title card, the storage meter under the list (as OneDrive keeps it out of the way), the tools on one row, sort and type beside the search box, row buttons on one line, dates on one line. Desktop only (≥1000 px); phone rules untouched. */
@media (min-width:1000px){
body[data-page=drive] #y-main{padding-top:84px}
body[data-page=drive] #y-main>h1.y-h1{padding-top:14px;padding-bottom:4px}
body[data-page=drive] #y-main>h1.y-h1 .y-tile{width:40px;height:40px;border-radius:12px;grid-template-columns:40px}
body[data-page=drive] #y-main>h1.y-h1 .y-tile svg{width:22px;height:22px}
body[data-page=drive] #y-main>.y-sub{padding-bottom:14px;margin-bottom:14px;padding-inline-start:80px}
body[data-page=drive] #y-main>#yd-use{order:8;margin-top:22px}
body[data-page=drive] #yd-tools{gap:8px;flex-wrap:wrap}
body[data-page=drive] #yd-tools .y-btn{padding-inline:12px;min-height:40px;font-size:14px}
body[data-page=drive] #yd-views{margin-top:10px}
body[data-page=drive] #y-main>#yd-qbox,body[data-page=drive] #y-main>#yd-upq,body[data-page=drive] #y-main>#yd-crumbs,body[data-page=drive] #y-main>#yd-list{order:1}
body[data-page=drive] #y-main>#yd-sortf{align-self:flex-end;width:auto;max-width:calc(100% - 380px);margin-top:-52px;margin-bottom:8px}
body[data-page=drive] #yd-list{margin-top:8px}
body[data-page=drive] .yd-t:not(.yd-ta) td,body[data-page=drive] .yd-t:not(.yd-ta) th{padding-block:6px}
body[data-page=drive] .yd-t td.m{white-space:nowrap}
body[data-page=drive] .yd-t .yd-acts{flex-wrap:nowrap;align-items:center}
body[data-page=drive] .yd-t .yd-acts .y-ib{width:36px;min-width:36px;height:40px;padding-inline:0;grid-template-columns:34px}
body[data-page=drive] .yd-t .yd-acts .y-ib.yd-shb{width:auto;min-width:44px;padding-inline:4px}
body[data-page=drive] .yd-t .yd-acts .y-ib[data-del]{width:auto;min-width:36px;padding-inline:4px}
body[data-page=drive] .yd-t:not(.yd-ta) td,body[data-page=drive] .yd-t:not(.yd-ta) th{vertical-align:middle}
}
/* w174: column headers that sort (Name / Size / Modified drive the «ترتيب» menu), «أنا» in the Owner column of «ملفاتي» */
.w174-sb{all:unset;box-sizing:border-box;display:inline-flex;white-space:nowrap;align-items:center;gap:4px;min-height:32px;padding:0 6px;margin-inline-start:-6px;border-radius:8px;cursor:pointer;font:inherit;font-weight:700;color:inherit}
.w174-sb:hover{background:rgba(83,56,216,.08)}.w174-sb:focus-visible{outline:2px solid #5338d8;outline-offset:1px}
.w174-sb .w174-ar{display:inline-block;width:12px;text-align:center;opacity:.75;font-size:12px}
.w174-me{color:var(--muted,#6b6790)}
html.yd .w174-sb:hover{background:rgba(201,193,255,.12)}html.yd .w174-sb:focus-visible{outline-color:#c9c1ff}
/* office-launch: on wide screens the app descriptions show in full (they were cut at two lines at 1280) */
@media (min-width:900px){.yh-d{display:block;-webkit-line-clamp:unset;overflow:visible}}