/* ELYOX workspace — styles of the features no board draws (app/js/fx/*.js). Hand-written, NOT generated.
   Every layer is drawn inside a `.ex.pg-Main` frame, so it uses board Main's tokens (--surface, --ink, --border…, light and
   dark twins), and board Main's own classes (.chip, .btn-dark, .ibtn, .mono, .disp, .pulse). Only fx-* classes here. */
.fx-layer{position:fixed;inset:0;z-index:80}
.fx-layer .fx-catch{position:absolute;inset:0;background:rgba(15,15,15,.32);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);animation:fx-fade .16s ease-out both}
.fx-layer.fx-pop .fx-catch{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.fx-layer.out{opacity:0;transition:opacity .14s}
.fx-frame.ex{position:absolute;box-sizing:border-box;display:flex;flex-direction:column;background:var(--surface);color:var(--ink);border:1px solid var(--border-strong);box-shadow:0 30px 70px -28px rgba(15,15,15,.55);font:400 14px 'Geist',system-ui,sans-serif;overflow:hidden}
.fx-drawer .fx-frame{top:12px;right:12px;bottom:12px;width:min(440px,calc(100% - 24px));border-radius:24px;animation:fx-slide .22s cubic-bezier(.2,.8,.2,1) both}
.fx-drawer.wide .fx-frame{width:min(620px,calc(100% - 24px))}
.fx-dialog .fx-frame{left:50%;top:50%;transform:translate(-50%,-50%);max-height:calc(100% - 48px);border-radius:24px;animation:fx-rise .2s cubic-bezier(.2,.8,.2,1) both}
.fx-palette .fx-frame{left:50%;top:12vh;transform:translateX(-50%);width:min(640px,calc(100% - 32px));max-height:70vh;border-radius:22px;animation:fx-rise2 .18s cubic-bezier(.2,.8,.2,1) both}
.fx-pop .fx-frame{border-radius:16px;padding:6px;max-height:70vh;overflow:auto;animation:fx-drop .16s cubic-bezier(.2,.8,.2,1) both}
@keyframes fx-fade{from{opacity:0}}
@keyframes fx-slide{from{opacity:0;transform:translateX(24px)}}
@keyframes fx-rise{from{opacity:0;transform:translate(-50%,-46%)}}
@keyframes fx-rise2{from{opacity:0;transform:translate(-50%,-8px)}}
@keyframes fx-drop{from{opacity:0;transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.fx-layer *{animation:none!important}}

.fx-head{display:flex;align-items:flex-start;gap:12px;padding:20px 20px 14px;border-bottom:1px solid var(--border)}
.fx-ht{flex:1;min-width:0}
.fx-head h3{margin:0;font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.25}
.fx-head p{margin:5px 0 0;color:var(--ink-3);font-size:13.5px;line-height:1.45}
.fx-head .fx-x{flex:none;width:34px;height:34px;border-radius:11px}
.fx-body{flex:1;min-height:0;overflow:auto;padding:16px 20px 20px;display:flex;flex-direction:column;gap:14px}
.fx-foot{display:flex;align-items:center;gap:8px;padding:14px 20px;border-top:1px solid var(--border);background:var(--surface-2)}
.fx-foot .fx-primary{margin-left:auto}
.fx-p{margin:0;color:var(--ink-2);line-height:1.55;font-size:14.5px}
.fx-h{margin:4px 0 -4px;font:600 11.5px 'Geist',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.fx-ghost{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:999px;border:1px solid var(--border-strong);background:var(--surface);color:var(--ink);font:600 13px 'Geist',sans-serif;cursor:pointer;text-decoration:none}
.fx-ghost:hover{background:var(--surface-2)}
.fx-ghost:disabled,.fx-primary:disabled{opacity:.45;cursor:not-allowed}
.fx-coin{display:inline-flex;align-items:center;gap:3px;padding:1px 7px;border-radius:99px;background:var(--act,#f5dd1e);color:#0f0f0f;font:600 11.5px 'Geist Mono',monospace}
.fx-empty{padding:28px 10px;text-align:center;color:var(--ink-3);font-size:14px}

.fx-note{padding:11px 13px;border-radius:13px;background:var(--surface-2);border:1px solid var(--border);color:var(--ink-2);font-size:13px;line-height:1.5}
.fx-note.demo{background:#fff8d6;border-color:#f0dc9a;color:#5e5400}
.fx-note.demo>b:first-child{font:700 10.5px 'Geist',sans-serif;letter-spacing:.06em;text-transform:uppercase;margin-right:6px;padding:2px 6px;border-radius:6px;background:#f5dd1e;color:#0f0f0f}
.fx-note.good{background:#eef6f1;border-color:#cfe8d9;color:#14532d}
.ex.dark .fx-note.demo{background:#36321e;border-color:#454015;color:#f3e08a}
.ex.dark .fx-note.good{background:#1a2a21;border-color:#1d3a2a;color:#8be0ad}

.fx-field{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--ink-2);font-weight:500}
.fx-field small{color:var(--ink-3);font-weight:400}
.fx-in{box-sizing:border-box;width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--border-strong);background:var(--surface);color:var(--ink);font:400 14px 'Geist',sans-serif;outline:none;resize:vertical}
.fx-in[dir=rtl]{font-family:'IBM Plex Sans Arabic','Geist',sans-serif;font-size:15px;line-height:1.7}
.fx-in:focus{border-color:var(--commit);box-shadow:0 0 0 3px rgba(47,91,255,.14)}
.fx-chips{display:flex;flex-wrap:wrap;gap:6px}
.fx-chip{font:500 13px 'Geist',sans-serif;padding:7px 12px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--ink-2);cursor:pointer}
.fx-chip:hover{border-color:var(--border-strong)}
.fx-chip.on{background:var(--solid);border-color:var(--solid);color:var(--on-solid)}
.ex.dark .fx-chip.on,.ex.dark .fx-row.on{border-color:var(--ink)}
.ex.dark .fx-chip.on{background:var(--ink);color:var(--plane)}

.fx-row{display:flex;align-items:center;gap:12px;width:100%;box-sizing:border-box;padding:10px 12px;border-radius:13px;border:1px solid transparent;background:transparent;color:var(--ink);font:400 14px 'Geist',sans-serif;text-align:left;cursor:pointer;text-decoration:none}
.fx-row:hover,.fx-row.sel{background:var(--surface-2)}
.fx-row.sel{border-color:var(--border)}
.fx-row>span:not(.fx-sw):not(.fx-ic):not(.fx-k):not(.fx-th){flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.fx-row b{font-weight:600;font-size:14px}
.fx-row small{color:var(--ink-3);font-size:12.5px;line-height:1.4}
.fx-row .fx-k{flex:none;font:500 11px 'Geist Mono',monospace;color:var(--ink-3)}
.fx-row.on{background:var(--surface-2);border-color:var(--ink)}
.fx-ic{flex:none;width:34px;height:34px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;background:var(--surface-3);color:var(--ink-2);font-size:15px}
.fx-th{flex:none;width:30px;height:44px;border-radius:8px;background:var(--surface-3)}
.fx-sw{flex:none;position:relative;width:36px;height:21px;border-radius:99px;background:var(--border-strong);transition:background .15s}
.fx-sw::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(15,15,15,.3);transition:transform .15s}
.fx-sw.on{background:var(--good)}
.fx-sw.on::after{transform:translateX(15px)}
.fx-list{display:flex;flex-direction:column;gap:2px}
.fx-card{padding:14px;border-radius:16px;border:1px solid var(--border);background:var(--surface);display:flex;flex-direction:column;gap:8px}
.fx-card.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.fx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.fx-ar{font-family:'IBM Plex Sans Arabic','Geist',sans-serif;direction:rtl;text-align:right;font-size:15px;line-height:1.7}
.fx-tag{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:99px;background:var(--surface-3);color:var(--ink-2);font:500 11.5px 'Geist',sans-serif}
.fx-tag.y{background:#fff4b8;color:#5e5400}.fx-tag.g{background:#d9f2e3;color:#14532d}.fx-tag.b{background:#dbe6ff;color:#1e3a8a}.fx-tag.o{background:#ffe1cc;color:#9a3412}
.ex.dark .fx-tag.y{background:#3d3712;color:#f3e08a}.ex.dark .fx-tag.g{background:#173626;color:#8be0ad}.ex.dark .fx-tag.b{background:#1d2642;color:#a9bcff}.ex.dark .fx-tag.o{background:#432818;color:#ffb48a}
.fx-pop .fx-row{padding:8px 10px;border-radius:10px}
.fx-pop .fx-h{padding:6px 10px 2px;margin:0}
.fx-pop hr{border:0;border-top:1px solid var(--border);margin:4px 2px}
.fx-kbd{font:500 11px 'Geist Mono',monospace;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--border);border-radius:6px;padding:2px 6px}

/* ⌘K */
.fx-pal-in{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border);color:var(--ink-3)}
.fx-pal-in input{flex:1;border:0;outline:0;background:transparent;color:var(--ink);font:400 17px 'Geist',sans-serif}
.fx-pal-scope{display:flex;gap:6px;padding:10px 14px 0;flex-wrap:wrap}
.fx-pal-res{overflow:auto;padding:8px;display:flex;flex-direction:column;gap:2px}
.fx-pal-foot{display:flex;gap:14px;padding:10px 16px;border-top:1px solid var(--border);color:var(--ink-3);font-size:12px;background:var(--surface-2)}
.fx-pal-res mark{background:#fff4b8;color:inherit;border-radius:3px;padding:0 1px}
.ex.dark .fx-pal-res mark{background:#4a4012}

/* notifications */
.fx-nt{position:relative;display:flex;gap:12px;padding:12px;border-radius:16px;border:1px solid var(--border);background:var(--surface);cursor:pointer;text-align:left;font:inherit;color:inherit;width:100%;box-sizing:border-box}
.fx-nt:hover{background:var(--surface-2)}
.fx-nt.unread{border-color:var(--border-strong);box-shadow:0 10px 24px -20px rgba(15,15,15,.5)}
.fx-nt.unread::before{content:"";position:absolute;left:-4px;top:18px;width:8px;height:8px;border-radius:50%;background:#ff8a3d}
.fx-nt .fx-ic{width:36px;height:36px;border-radius:12px}
.fx-nt span.x{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.fx-nt b{font-size:14px;font-weight:600}
.fx-nt small{color:var(--ink-2);font-size:13px;line-height:1.45}
.fx-nt em{font-style:normal;color:var(--ink-3);font-size:12px}
.fx-nt .acts{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.fx-nt .acts span{padding:5px 10px;border-radius:99px;border:1px solid var(--border-strong);font:600 12px 'Geist',sans-serif;background:var(--surface)}
.fx-nt .acts span.d{background:var(--solid);color:var(--on-solid);border-color:var(--solid)}

/* plans */
.fx-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.fx-plan{display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:18px;border:1px solid var(--border);background:var(--surface);cursor:pointer;text-align:left;font:inherit;color:inherit}
.fx-plan:hover{border-color:var(--border-strong)}
.fx-plan.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.fx-plan .n{font:700 17px 'Plus Jakarta Sans',sans-serif}
.fx-plan .p{font:700 24px 'Plus Jakarta Sans',sans-serif;letter-spacing:-.02em}
.fx-plan .p small{font:400 13px 'Geist',sans-serif;color:var(--ink-3)}
.fx-plan ul{margin:4px 0 0;padding-left:16px;color:var(--ink-2);font-size:13px;line-height:1.6}
@media (max-width:720px){.fx-plans{grid-template-columns:1fr}}

/* 30 seconds tour */
.fx-tour{display:flex;flex-direction:column;gap:14px}
.fx-tour .stage{position:relative;height:250px;border-radius:18px;overflow:hidden;background:radial-gradient(circle at 30% 20%,#fff7c2,#f5dd1e 35%,#ff9a3d 70%,#2f5bff);display:flex;align-items:flex-end;padding:20px;box-sizing:border-box;color:#0f0f0f}
.fx-tour .stage .big{font:800 30px 'Plus Jakarta Sans',sans-serif;letter-spacing:-.03em;line-height:1.1;max-width:85%;animation:fx-drop .4s cubic-bezier(.2,.8,.2,1) both}
.fx-tour .stage .num{position:absolute;top:16px;left:20px;font:600 12px 'Geist Mono',monospace;background:rgba(255,255,255,.7);padding:3px 8px;border-radius:99px}
.fx-tour .bars{display:flex;gap:4px}
.fx-tour .bars i{flex:1;height:4px;border-radius:2px;background:var(--surface-3);overflow:hidden;position:relative}
.fx-tour .bars i.done::after,.fx-tour .bars i.now::after{content:"";position:absolute;inset:0;background:var(--ink)}
.fx-tour .bars i.now::after{animation:fx-bar 6s linear both;transform-origin:left}
@keyframes fx-bar{from{transform:scaleX(0)}}

/* side by side (Review) */
.fx-sbs{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.fx-sbs .v{position:relative;aspect-ratio:9/16;border-radius:18px;overflow:hidden;background:linear-gradient(160deg,#2b2b30,#55555e);color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:14px;box-sizing:border-box}
.fx-sbs .v .cap{font:700 15px 'IBM Plex Sans Arabic',sans-serif;direction:rtl;text-align:center;background:rgba(0,0,0,.35);padding:6px 8px;border-radius:10px}
.fx-sbs .v .lb{position:absolute;top:12px;left:12px;font:600 12px 'Geist',sans-serif;background:rgba(255,255,255,.18);padding:3px 8px;border-radius:99px}

/* list view (Library) */
.fx-table{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px}
.fx-table th{font:600 11.5px 'Geist',sans-serif;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:10px 12px;border-bottom:1px solid var(--border)}
.fx-table td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
.fx-table tr[data-open]{cursor:pointer}
.fx-table tr[data-open]:hover td{background:var(--surface-2)}
.fx-listview{background:var(--surface);border:1px solid var(--border);border-radius:20px;overflow:hidden}

/* editing panels (Edit page tabs) */
.fx-cap{display:grid;grid-template-columns:62px 1fr;gap:8px;align-items:center}
.fx-cap .t{font:500 11.5px 'Geist Mono',monospace;color:var(--ink-3)}
.fx-cap input{direction:rtl;font-family:'IBM Plex Sans Arabic','Geist',sans-serif}
.fx-words{display:flex;flex-wrap:wrap;gap:4px;direction:rtl;font-family:'IBM Plex Sans Arabic',sans-serif;font-size:15px}
.fx-words span{padding:3px 6px;border-radius:7px;cursor:pointer;border:1px solid transparent}
.fx-words span:hover{background:var(--surface-2)}
.fx-words span.on{background:#dbe6ff;border-color:#b9cdff}
.ex.dark .fx-words span.on{background:#1d2642;border-color:#253463}
.fx-track{display:flex;align-items:center;gap:10px}
.fx-wave{display:flex;align-items:center;gap:2px;height:22px}
.fx-wave i{width:3px;border-radius:2px;background:var(--ink-3)}
.fx-range{width:100%;accent-color:var(--ink)}

/* board-drawn pop-ups (Notifications, Search): only how they enter; their look is the board's CSS */
.fx-board .ov-scrim{animation:fx-fade .16s ease-out both}
.fx-board .nt{height:auto!important;bottom:12px;animation:fx-slide .22s cubic-bezier(.2,.8,.2,1) both}
.fx-board .nt-body{overflow:auto!important}
.fx-board .sk{animation:fx-drop .18s cubic-bezier(.2,.8,.2,1) both}
.fx-board .sk-body{overflow:auto!important;max-height:min(560px,calc(100vh - 260px))!important}
.fx-board .sk-in input{flex:1;border:0;outline:0;background:transparent;font:500 19px Geist,sans-serif;color:var(--ink);caret-color:var(--commit);padding:0}
.fx-board .sk-f span[data-scope],.fx-board .nt-tabs button,.fx-board .sk-r{cursor:pointer}
.fx-board .sk-r:hover{background:var(--surface-2)}
.fx-board .nt-foot .sw{cursor:pointer}
.fx-board .nt-foot .sw.off{background:var(--border-strong)}
.fx-board .nt-foot .sw.off::after{left:3px}
html.still .fx-board *{animation:none!important}