/* Menu-bar quick panel (assets/js/sim/quick.js). Values from Source/QuickPanel.swift: 360 pt panel, padding 14,
   tab strip (h 34, padding 4, radius 13, white .05), page well (padding 12, radius 14, white .045), footer h 30 radius 10. */
[data-sim="quick"] .cv { --acc: #86c7ed; --sec: rgba(255,255,255,.55); --ter: rgba(255,255,255,.28); --rounded: "SF Pro Rounded", ui-rounded, -apple-system, BlinkMacSystemFont, sans-serif; }
[data-sim="quick"] :where(.cv button) { border: 0; padding: 0; background: none; cursor: pointer; }

/* screen (wallpaper dims with the brightness slider) */
[data-sim="quick"] .cv::after { content: ""; position: absolute; inset: 0; z-index: 60; pointer-events: none; background: #000; opacity: var(--dim, 0); }
[data-sim="quick"] .cv .scr { position: absolute; inset: 0; }
[data-sim="quick"] .cv .icons { position: absolute; left: 22px; top: 62px; display: grid; gap: 14px; transition: opacity .3s ease; }
[data-sim="quick"] .cv .fi { width: 92px; display: grid; justify-items: center; gap: 4px; text-align: center; }
[data-sim="quick"] .cv .fi img { width: 56px; height: 56px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.3)); }
[data-sim="quick"] .cv .fi span { font-size: 11.5px; font-weight: 600; line-height: 1.2; padding: 1px 5px; border-radius: 4px; text-shadow: 0 1px 2px rgba(0,0,0,.6); overflow-wrap: anywhere; }
[data-sim="quick"] .cv .fi.hid { display: none; opacity: .55; }
[data-sim="quick"] .cv .scr.showhidden .fi.hid { display: grid; }
[data-sim="quick"] .cv .scr.noicons .icons { opacity: 0; }
[data-sim="quick"] .cv .scr.relaunch .icons { opacity: 0; transition-duration: .15s; }

/* menu bar (as the hero's) */
[data-sim="quick"] .cv .mb {
  position: absolute; z-index: 5; top: 0; left: 0; right: 0; height: 37px; padding: 0 14px 0 20px;
  display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,.92);
  background: rgba(10,14,30,.18); -webkit-backdrop-filter: blur(40px) saturate(1.5); backdrop-filter: blur(40px) saturate(1.5);
}
[data-sim="quick"] .cv .mb .l, [data-sim="quick"] .cv .mb .r { display: flex; align-items: center; gap: 20px; }
[data-sim="quick"] .cv .mb .l b { font-weight: 700; }
[data-sim="quick"] .cv .mb .r { gap: 16px; }
[data-sim="quick"] .cv .mb .r > img { height: 16px; width: auto; display: block; }
[data-sim="quick"] .cv .mb .mark { width: 28px; height: 24px; margin: 0 -6px; border-radius: 5px; display: grid; place-items: center; transition: background .15s; }
[data-sim="quick"] .cv .mb .mark:hover, [data-sim="quick"] .cv .mb .mark.on { background: rgba(255,255,255,.2); }
[data-sim="quick"] .cv .mb .mark svg { display: block; }

/* the popover */
[data-sim="quick"] .cv .pop {
  position: absolute; z-index: 20; top: 47px; left: 250px; width: 360px;
  border-radius: 12px; color: #fff;
  background: rgba(38,39,44,.8); -webkit-backdrop-filter: blur(30px) saturate(1.6); backdrop-filter: blur(30px) saturate(1.6);
  box-shadow: inset 0 0 0 .7px rgba(255,255,255,.14), 0 0 0 .5px rgba(0,0,0,.5), 0 18px 50px rgba(0,0,0,.45);
  opacity: 0; transform: translateY(-6px) scale(.97); transform-origin: var(--ax, 180px) -10px; pointer-events: none;
  transition: opacity .18s ease, transform .22s cubic-bezier(.3,1.3,.5,1);
}
[data-sim="quick"] .cv .pop.open { opacity: 1; transform: none; pointer-events: auto; }
[data-sim="quick"] .cv .pop .arrow { position: absolute; top: -9px; left: calc(var(--ax, 180px) - 10px); width: 20px; height: 10px; overflow: hidden; }
[data-sim="quick"] .cv .pop .arrow::before { content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; transform: rotate(45deg); background: rgba(56,57,62,.92); box-shadow: inset .7px .7px 0 rgba(255,255,255,.16); border-radius: 2px; }

[data-sim="quick"] .cv .qp { padding: 14px; display: grid; gap: 12px; font-size: 12px; }
[data-sim="quick"] .cv .tabs { display: flex; gap: 4px; padding: 4px; border-radius: 13px; background: rgba(255,255,255,.05); }
[data-sim="quick"] .cv .tb { flex: 1; height: 34px; border-radius: 17px; display: grid; place-items: center; opacity: .62; transition: opacity .15s, background .2s, box-shadow .2s; }
[data-sim="quick"] .cv .tb img { height: 14px; width: auto; display: block; }
[data-sim="quick"] .cv .tb:hover { opacity: .85; }
[data-sim="quick"] .cv .tb.on {
  opacity: 1; background: linear-gradient(180deg, rgba(255,255,255,.17), rgba(255,255,255,.085));
  box-shadow: inset 0 0 0 .7px rgba(255,255,255,.24), inset 0 .7px 0 rgba(255,255,255,.18), 0 2px 5px rgba(0,0,0,.22);
}
[data-sim="quick"] .cv .ttl { font-size: 10.5px; font-weight: 600; letter-spacing: 1px; color: var(--sec); line-height: 1; margin: 1px 0 -1px; }
[data-sim="quick"] .cv .well { padding: 12px; border-radius: 14px; background: rgba(255,255,255,.045); }
[data-sim="quick"] .cv .well .pg { transition: opacity .22s ease, transform .22s ease; }
[data-sim="quick"] .cv .well .pg.pre { opacity: 0; transform: translateY(3px); transition: none; }
[data-sim="quick"] .cv .qfoot { display: flex; gap: 8px; }
[data-sim="quick"] .cv .qfoot button { flex: 1; height: 30px; border-radius: 10px; background: rgba(255,255,255,.06); display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11.5px; font-weight: 500; transition: background .15s; }
[data-sim="quick"] .cv .qfoot button:hover { background: rgba(255,255,255,.1); }
[data-sim="quick"] .cv .qfoot img { height: 12px; }
[data-sim="quick"] .cv .qfoot svg { width: 12px; height: 12px; }

/* page parts */
[data-sim="quick"] .cv .pg { display: grid; gap: 10px; }
[data-sim="quick"] .cv .pg b { font-weight: 600; }
[data-sim="quick"] .cv .num, [data-sim="quick"] .cv .md, [data-sim="quick"] .cv .stat span + span { font-variant-numeric: tabular-nums; }
[data-sim="quick"] .cv .sub { margin: 0; font-size: 10.5px; color: var(--sec); line-height: 1.35; }
[data-sim="quick"] .cv .ter { font-size: 10px; color: var(--ter); }
[data-sim="quick"] .cv .note { margin: 0; font-size: 11px; color: var(--sec); line-height: 1.35; }
[data-sim="quick"] .cv hr { margin: 0; border: 0; height: 1px; background: rgba(255,255,255,.1); }
[data-sim="quick"] .cv .sp { flex: 1; }
[data-sim="quick"] .cv .stat { display: flex; justify-content: space-between; gap: 10px; }
[data-sim="quick"] .cv .stat span:first-child { color: var(--sec); }
[data-sim="quick"] .cv .meter { display: flex; align-items: center; gap: 10px; }
[data-sim="quick"] .cv .meter .mt { width: 62px; flex: none; }
[data-sim="quick"] .cv .bar { position: relative; display: block; flex: 1; height: 6px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
[data-sim="quick"] .cv .bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; transition: width .5s ease; }
[data-sim="quick"] .cv .meter .md { width: 72px; flex: none; text-align: right; color: var(--sec); }
[data-sim="quick"] .cv .sp26 { height: 26px; } [data-sim="quick"] .cv .sp30 { height: 30px; }
[data-sim="quick"] .cv .spk { display: block; width: 100%; overflow: visible; }
[data-sim="quick"] .cv .act {
  justify-self: start; display: inline-flex; align-items: center; gap: 5px; padding: 7px 11px; border-radius: 10px;
  font-size: 10px; font-weight: 500; color: rgba(255,255,255,.9);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.045)); box-shadow: inset 0 0 0 .7px rgba(255,255,255,.14), inset 0 .7px 0 rgba(255,255,255,.1);
  transition: transform .1s, background .15s;
}
[data-sim="quick"] .cv .act:hover { background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06)); }
[data-sim="quick"] .cv .act:active { transform: scale(.98); }
[data-sim="quick"] .cv .act img { height: 10px; }
[data-sim="quick"] .cv .acc { height: 13px; filter: brightness(0) saturate(100%) invert(80%) sepia(19%) saturate(800%) hue-rotate(166deg) brightness(97%); }
[data-sim="quick"] .cv .spin { width: 13px; height: 13px; border-radius: 50%; border: 2px solid rgba(255,255,255,.18); border-top-color: rgba(255,255,255,.75); animation: q-spin .8s linear infinite; flex: none; }
[data-sim="quick"] .cv .ej .spin { width: 10px; height: 10px; border-width: 1.6px; }
@keyframes q-spin { to { transform: rotate(360deg); } }

/* switch (NSSwitch) */
[data-sim="quick"] .cv .sw { position: relative; width: 38px; height: 22px; flex: none; border-radius: 11px; background: rgba(255,255,255,.22); box-shadow: inset 0 0 0 .5px rgba(0,0,0,.25); transition: background .2s; }
[data-sim="quick"] .cv .sw i { position: absolute; top: 1px; left: 1px; width: 20px; height: 20px; border-radius: 50%; background: #f2f2f2; box-shadow: 0 1px 2px rgba(0,0,0,.35); transition: transform .2s cubic-bezier(.3,1.2,.5,1); }
[data-sim="quick"] .cv .sw.on { background: var(--acc); }
[data-sim="quick"] .cv .sw.on i { transform: translateX(16px); }
[data-sim="quick"] .cv .sw.sm { width: 30px; height: 18px; }
[data-sim="quick"] .cv .sw.sm i { width: 16px; height: 16px; }
[data-sim="quick"] .cv .sw.sm.on i { transform: translateX(12px); }

/* AdaIconTile */
[data-sim="quick"] .cv .tile {
  position: relative; flex: none; width: var(--s); height: var(--s); border-radius: calc(var(--s) * .27); display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,0) 50%), linear-gradient(180deg, var(--a), var(--b));
  box-shadow: inset 0 0 0 .6px rgba(255,255,255,.3), 0 calc(var(--s) * .06) calc(var(--s) * .24) var(--g);
}
[data-sim="quick"] .cv .tile img { height: calc(var(--s) * .48); width: auto; filter: drop-shadow(0 .5px .5px rgba(0,0,0,.18)); }

/* Keep awake */
[data-sim="quick"] .cv .awake .hd { display: flex; align-items: center; justify-content: space-between; }
[data-sim="quick"] .cv .awake .hd b { display: block; font-size: 13px; }
[data-sim="quick"] .cv .awake .hd small { display: block; font-size: 11px; color: var(--sec); margin-top: 2px; }
[data-sim="quick"] .cv .chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
[data-sim="quick"] .cv .chip { height: 28px; border-radius: 14px; background: rgba(255,255,255,.08); font-size: 11.5px; font-weight: 500; transition: background .15s; }
[data-sim="quick"] .cv .chip:hover { background: rgba(255,255,255,.13); }
[data-sim="quick"] .cv .chip.on { background: var(--acc); color: #000; }
[data-sim="quick"] .cv .tf { display: flex; align-items: center; }
[data-sim="quick"] .cv .tf input { width: 100%; height: 22px; padding: 0 4px; border: 0; border-radius: 5px; font: 500 11.5px var(--ui); color: #fff; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.18); color-scheme: dark; outline: none; }
[data-sim="quick"] .cv .tf input:focus { box-shadow: 0 0 0 2.5px rgba(134,199,237,.5); }
[data-sim="quick"] .cv .tf input::-webkit-calendar-picker-indicator { display: none; }
[data-sim="quick"] .cv .awake .row { display: flex; align-items: center; gap: 8px; font-size: 11.5px; }

/* Displays */
[data-sim="quick"] .cv .disp { gap: 12px; }
[data-sim="quick"] .cv .dsp { display: grid; gap: 6px; }
[data-sim="quick"] .cv .dh { display: flex; align-items: center; gap: 7px; }
[data-sim="quick"] .cv .dh b { font-size: 12.5px; }
[data-sim="quick"] .cv .badge { font-size: 10px; padding: 2px 6px; border-radius: 9px; background: rgba(255,255,255,.08); }
[data-sim="quick"] .cv .dsp small { font-size: 11px; color: var(--sec); }
[data-sim="quick"] .cv .sl { display: flex; align-items: center; gap: 8px; }
[data-sim="quick"] .cv .sl > img { height: 11px; opacity: .55; }
[data-sim="quick"] .cv .slider { position: relative; flex: 1; height: 18px; cursor: pointer; touch-action: none; }
[data-sim="quick"] .cv .slider .tr { position: absolute; left: 0; right: 0; top: 7px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.16); overflow: hidden; }
[data-sim="quick"] .cv .slider .tr i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--acc); }
[data-sim="quick"] .cv .slider .kn { position: absolute; top: 2px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #ececec; box-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 0 .5px rgba(0,0,0,.2); }

/* System */
[data-sim="quick"] .cv .tiles { display: flex; gap: 8px; }
[data-sim="quick"] .cv .tl { flex: 1; display: grid; justify-items: center; gap: 4px; padding: 8px 0; border-radius: 10px; background: rgba(255,255,255,.06); }
[data-sim="quick"] .cv .tl span { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--sec); }
[data-sim="quick"] .cv .tl span img { height: 11px; opacity: .6; }
[data-sim="quick"] .cv .tl b { font: 600 20px/1.1 var(--rounded); font-variant-numeric: tabular-nums; }
[data-sim="quick"] .cv .memh { display: flex; align-items: center; gap: 8px; }
[data-sim="quick"] .cv .memh .pr { font-size: 10.5px; font-weight: 500; padding: 2px 8px; border-radius: 9px; background: rgba(48,209,88,.18); }

/* Network + speed test */
[data-sim="quick"] .cv .spd { display: flex; align-items: center; gap: 16px; }
[data-sim="quick"] .cv .sv { display: flex; align-items: center; gap: 8px; }
[data-sim="quick"] .cv .sv > img { height: 14px; }
[data-sim="quick"] .cv .sv b { display: block; font: 600 17px/1.15 var(--rounded); font-variant-numeric: tabular-nums; min-width: 92px; }
[data-sim="quick"] .cv .sv small { font-size: 10.5px; color: var(--sec); }
[data-sim="quick"] .cv .vdiv { width: 1px; height: 34px; background: rgba(255,255,255,.1); }
[data-sim="quick"] .cv .blu { filter: brightness(0) saturate(100%) invert(39%) sepia(98%) saturate(3000%) hue-rotate(201deg) brightness(102%); }
[data-sim="quick"] .cv .pnk { filter: brightness(0) saturate(100%) invert(36%) sepia(80%) saturate(4000%) hue-rotate(330deg) brightness(102%); }
[data-sim="quick"] .cv .st { display: grid; gap: 8px; }
[data-sim="quick"] .cv .sth { display: flex; align-items: center; }
[data-sim="quick"] .cv .sth .act { justify-self: auto; }
[data-sim="quick"] .cv .figs { display: flex; align-items: center; gap: 14px; }
[data-sim="quick"] .cv .fig { display: flex; align-items: center; gap: 5px; }
[data-sim="quick"] .cv .fig img { height: 12px; }
[data-sim="quick"] .cv .fig b { font: 600 17px/1.15 var(--rounded); font-variant-numeric: tabular-nums; }
[data-sim="quick"] .cv .figs small { font-size: 10.5px; color: var(--sec); }

/* Disks */
[data-sim="quick"] .cv .vol { display: grid; gap: 5px; }
[data-sim="quick"] .cv .vh { display: flex; align-items: center; gap: 7px; }
[data-sim="quick"] .cv .vh b { font-size: 12.5px; }
[data-sim="quick"] .cv .vh small { font-size: 10px; color: var(--sec); }
[data-sim="quick"] .cv .ej { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 11px; background: rgba(255,255,255,.08); font-size: 10.5px; font-weight: 600; }
[data-sim="quick"] .cv .ej:hover { background: rgba(255,255,255,.14); }
[data-sim="quick"] .cv .ej img { height: 9px; }
[data-sim="quick"] .cv .ej[disabled] { opacity: .45; }
[data-sim="quick"] .cv .vf { display: flex; justify-content: space-between; font-size: 11px; }
[data-sim="quick"] .cv .vf span:first-child { color: var(--sec); }
[data-sim="quick"] .cv .io { display: flex; gap: 16px; font: 600 13px var(--rounded); font-variant-numeric: tabular-nums; }
[data-sim="quick"] .cv .io span { display: flex; align-items: center; gap: 5px; }
[data-sim="quick"] .cv .io img { height: 11px; }
[data-sim="quick"] .cv .io .or { color: #ff9f0a; } [data-sim="quick"] .cv .io .pk { color: #ff375f; }
[data-sim="quick"] .cv .io .or img { filter: brightness(0) saturate(100%) invert(64%) sepia(83%) saturate(2000%) hue-rotate(358deg) brightness(102%); }
[data-sim="quick"] .cv .io .pk img { filter: brightness(0) saturate(100%) invert(36%) sepia(80%) saturate(4000%) hue-rotate(330deg) brightness(102%); }

/* Quick settings */
[data-sim="quick"] .cv .tog { gap: 0; }
[data-sim="quick"] .cv .tr { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 0; text-align: left; }
[data-sim="quick"] .cv .tr::after { content: ""; position: absolute; left: 32px; right: 0; bottom: 0; height: 1px; background: rgba(255,255,255,.1); }
[data-sim="quick"] .cv .tr.last::after { display: none; }
[data-sim="quick"] .cv .tr:active { opacity: .6; }
[data-sim="quick"] .cv .tr .tx { flex: 1; display: grid; gap: 1px; }
[data-sim="quick"] .cv .tr .tx b { font-size: 12.5px; font-weight: 500; }
[data-sim="quick"] .cv .tr .tx small { font-size: 10px; color: var(--sec); }
[data-sim="quick"] .cv .tr .chev { height: 9px; opacity: .28; }
[data-sim="quick"] .cv .tog .note { padding-top: 6px; font-size: 10.5px; }

/* light mode: what changes is the label (the panel keeps Islora's own dark theme) and the menu bar text */
[data-sim="quick"] .cv.light .mb { background: rgba(255,255,255,.32); color: rgba(0,0,0,.85); }
[data-sim="quick"] .cv.light .mb .r > img, [data-sim="quick"] .cv.light .mb .mark svg { filter: invert(1); }

/* NSAlert */
[data-sim="quick"] .cv .alert { position: absolute; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(0,0,0,.18); opacity: 0; transition: opacity .18s; }
[data-sim="quick"] .cv .alert.on { opacity: 1; }
[data-sim="quick"] .cv .alert .box { width: 260px; padding: 20px 16px 16px; border-radius: 14px; text-align: center; display: grid; justify-items: center; gap: 8px; background: rgba(44,45,50,.92); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); box-shadow: inset 0 0 0 .7px rgba(255,255,255,.14), 0 20px 50px rgba(0,0,0,.5); transform: scale(.94); transition: transform .2s cubic-bezier(.3,1.3,.5,1); }
[data-sim="quick"] .cv .alert.on .box { transform: none; }
[data-sim="quick"] .cv .alert img { width: 56px; height: 56px; }
[data-sim="quick"] .cv .alert b { font-size: 13px; font-weight: 700; }
[data-sim="quick"] .cv .alert p { margin: 0; font-size: 11px; line-height: 1.35; }
[data-sim="quick"] .cv .alert .btns { display: grid; gap: 8px; width: 100%; margin-top: 6px; }
[data-sim="quick"] .cv .alert .btns button { height: 28px; border-radius: 7px; font-size: 13px; background: rgba(255,255,255,.16); }
[data-sim="quick"] .cv .alert .btns .def { background: #0a84ff; }

/* display off / sleep / screen saver / lock */
[data-sim="quick"] .cv .dark { position: absolute; inset: 0; z-index: 55; background: #000; opacity: 0; transition: opacity .5s ease; cursor: pointer; }
[data-sim="quick"] .cv .dark.on { opacity: 1; }

/* demo pointer */
[data-sim="quick"] .cv .cur {
  position: absolute; z-index: 70; left: 0; top: 0; width: 22px; height: 30px; margin: -2px 0 0 -3px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 30'%3E%3Cpath d='M3 2v22l5.5-5.3 3.6 8.3 3.4-1.5-3.5-8.1H19z' fill='%23000' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat;
  transition: transform .6s cubic-bezier(.4,.1,.2,1), opacity .3s; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35));
}
[data-sim="quick"] .cv .cur.down { scale: .86; }
[data-sim="quick"] .cv .cur.gone { opacity: 0; }

[data-sim="quick"] .cv.instant *, [data-sim="quick"] .cv.instant { transition: none !important; animation: none !important; }
[data-sim="quick"] .cv [hidden] { display: none !important; }

/* phone crop (384 × 700): the panel itself, under a short menu bar; text stays ≥ 10 px on a 375-pt screen */
[data-sim="quick"] .cv.ph .icons, [data-sim="quick"] .cv.ph .mb .l span, [data-sim="quick"] .cv.ph .mb .clk { display: none; }
[data-sim="quick"] .cv.ph .mb { padding: 0 12px 0 16px; }