/* faz1/screens.css · B7 · software screen replicas. Every selector starts with .f1s-. Replicas stay light in both
   themes (they are pictures of light applications); only the badges and the desktop frame follow the page theme.
   Transitions: none (WAAPI only, see screens.js). Tokens: CONTRACT 8.3.4. */
.f1s-screen, .f1s-desktop {
  --lc-title-bg:#FFFFFF; --lc-tabbar:#D0D4DD; --lc-ribbon-top:#E3E8F0; --lc-ribbon-bottom:#D6DCE7; --lc-tab-active:#F2F3F5;
  --lc-tab-text:#6B6F78; --lc-grid-bg:#FFFFFF; --lc-grid-hline:#C8C8C8; --lc-grid-vline:#D0D0D0; --lc-row-text:#FF0000;
  --lc-sel-bg:#0078D7; --lc-sel-text:#FFFFFF; --lc-bottombar:#F0F0F0; --lc-btn-disabled-text:#A0A0A0;
  --lc-font:Verdana,Tahoma,sans-serif; --lc-size:11px; --lc-row-h:21px;
  --tg-app-title:#C5C0DE; --tg-mdi-title:#8C7FCF; --tg-mdi-border:#8B7ECF; --tg-title-text:#FFFFFF; --tg-header:#F4F4F4;
  --tg-row-a:#FFFFFF; --tg-row-b:#F4F4F4; --tg-focus:#E7E5F4; --tg-star-cell:#4D3E98; --tg-check-ring:#B3AADF;
  --tg-scroll-thumb:#C5C0DE; --tg-icon:#A5C4CB; --tg-button:#8C7FCF; --tg-logo-teal:#00A59A;
  --tg-font:Tahoma,Verdana,sans-serif; --tg-size:11px; --tg-row-h:20px;
  --f1s-win-font:"Segoe UI",Arial,sans-serif;
}
.f1s-screen { position:relative; width:100%; height:100%; overflow:hidden; background:#e9ebef; color:#000; }
.f1s-viewport { position:absolute; inset:0; overflow-x:auto; overflow-y:hidden; }
.f1s-sizer { position:relative; overflow:hidden; }
.f1s-app { position:absolute; left:0; top:0; transform-origin:0 0; display:flex; flex-direction:column; background:#fff; color:#000;
  font:11px var(--f1s-win-font); box-sizing:border-box; overflow:hidden; }
.f1s-app * { box-sizing:border-box; }
.f1s-layer { position:absolute; inset:0; pointer-events:none; }
.f1s-badges { position:absolute; top:4px; right:6px; display:flex; gap:4px; z-index:3; pointer-events:none; }
.f1s-badge { font:600 10.5px var(--f1-sans, "Segoe UI", sans-serif); padding:1px 7px; border-radius:9px; background:var(--pro-panel, #fff);
  color:var(--pro-text2, #58616f); border:1px solid var(--pro-line, #e5e8ee); box-shadow:var(--f1-shadow, none); }
.f1s-badge-warn { color:#8a6400; border-color:#e8c766; background:#fff8e1; }
.f1s-glyph { display:inline-flex; width:16px; height:16px; flex:none; }
.f1s-glyph svg, .f1s-ico16 svg { width:16px; height:16px; display:block; }
.f1s-caption { margin-left:auto; display:inline-flex; width:110px; height:12px; flex:none; }
.f1s-caption svg { width:100%; height:100%; stroke:currentColor; stroke-width:1; fill:none; }
.f1s-tt { white-space:nowrap; overflow:hidden; }
.f1s-status { color:#555; white-space:nowrap; overflow:hidden; }

/* ---------- grid (shared) ---------- */
.f1s-body { position:relative; flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
.f1s-grid { position:relative; flex:1; min-height:0; display:flex; flex-direction:column; }
.f1s-gwrap { position:relative; flex:1; min-height:0; overflow:hidden; }
.f1s-ghead { position:relative; display:flex; height:21px; white-space:nowrap; }
.f1s-h { position:relative; flex:none; overflow:hidden; white-space:nowrap; text-overflow:clip; padding:0 3px; line-height:20px; text-align:center; }
.f1s-gview { position:absolute; left:0; right:17px; top:21px; bottom:0; overflow:hidden; }
.f1s-grows { position:relative; }
.f1s-row { display:flex; white-space:nowrap; }
.f1s-row[hidden], .f1s-orow[hidden] { display:none; }
.f1s-c { flex:none; overflow:hidden; white-space:nowrap; text-overflow:clip; padding:0 3px; }
.f1s-al-right { text-align:right; } .f1s-al-center { text-align:center; } .f1s-al-left { text-align:left; }
.f1s-c-status { text-align:center; color:#000; font-weight:400; }
.f1s-c-check { display:flex; align-items:center; justify-content:center; }
.f1s-key { color:#7fb3bb; text-align:center; }
.f1s-bold { font-weight:700; }
.f1s-gmarks { position:absolute; inset:0; pointer-events:none; }
.f1s-colmark { position:absolute; top:0; bottom:0; background:rgba(82,103,216,.10); box-shadow:inset 0 0 0 2px #5267d8; }
.f1s-vscroll { position:absolute; right:0; top:0; bottom:0; width:17px; background:#f0f0f0; border-left:1px solid #e2e2e2; }
.f1s-vthumb { position:absolute; left:3px; right:3px; background:#c2c2c2; border-radius:2px; min-height:12px; }
.f1s-hscroll { position:relative; height:17px; flex:none; background:#f0f0f0; border-top:1px solid #e2e2e2; }
.f1s-hthumb { position:absolute; left:20px; width:12%; top:4px; bottom:4px; background:#c2c2c2; border-radius:2px; }
.f1s-row.f1-cue, .f1s-orow.f1-cue { box-shadow:inset 0 0 0 2px #5267d8; }
.f1s-c.f1-cue { box-shadow:inset 0 0 0 2px #5267d8; background:rgba(82,103,216,.12); }
.f1s-h.f1-cue { box-shadow:inset 0 0 0 2px #5267d8; }

/* Modül A katmanı: pinned overlay columns, accent UI style, never the app's style */
.f1s-ovl { position:absolute; top:0; right:17px; bottom:0; background:#edf1ff; border-left:2px solid #5267d8;
  box-shadow:-4px 0 10px rgba(32,38,48,.12); font:12px "Segoe UI", Arial, sans-serif; color:#2b3a8c; }
.f1s-ovl[hidden] { display:none; }
.f1s-ocap { position:absolute; left:0; right:0; bottom:0; height:20px; line-height:20px; background:#dfe5fb; border-top:1px solid #c9d2f5; padding:0 6px; font-weight:600; font-size:11px; color:#5267d8; display:flex; gap:6px; align-items:center; }
.f1s-oneri { font:600 9.5px "Segoe UI", Arial, sans-serif; color:#5267d8; border:1px solid #9fb0f0; border-radius:7px; padding:0 5px; line-height:13px; background:#fff; }
.f1s-ohead { display:flex; height:21px; border-bottom:1px solid #c9d2f5; }
.f1s-ohead .f1s-h { font-weight:600; color:#2b3a8c; }
.f1s-oview { position:absolute; top:21px; bottom:20px; left:0; right:0; overflow:hidden; }
.f1s-orow { display:flex; white-space:nowrap; border-bottom:1px solid #dfe5fb; }
.f1s-orow.f1s-sel { background:#d9e1ff; }
.f1s-app-logo-connect .f1s-orow { height:21px; line-height:20px; }
.f1s-app-tiger .f1s-orow { height:20px; line-height:19px; }

/* ---------- Logo Connect v3.06 ---------- */
.f1s-app-logo-connect { font-family:var(--lc-font); font-size:var(--lc-size); background:var(--lc-grid-bg); }
.f1s-lc-title { height:24px; flex:none; display:flex; align-items:center; gap:6px; padding:0 8px; background:var(--lc-title-bg);
  font:12px var(--f1s-win-font); color:#000; }
.f1s-lc-tabs { height:22px; flex:none; display:flex; align-items:flex-end; gap:2px; padding:0 4px; background:var(--lc-tabbar); }
.f1s-lc-tab { font:11px var(--f1s-win-font); color:var(--lc-tab-text); padding:3px 14px 3px; letter-spacing:.2px; }
.f1s-lc-tab.f1s-on { background:var(--lc-tab-active); color:#3a3e46; border:1px solid #b8bdc8; border-bottom:0; border-radius:2px 2px 0 0; }
.f1s-lc-ribbon { height:88px; flex:none; display:flex; gap:4px; padding:3px 4px; background:linear-gradient(var(--lc-ribbon-top), var(--lc-ribbon-bottom));
  border-bottom:1px solid #aeb5c2; }
.f1s-lc-group { display:flex; flex-direction:column; border:1px solid #b9c0cc; border-radius:3px; background:linear-gradient(#eef1f6, #dde2ea); padding:2px 3px 0; }
.f1s-lc-group[hidden] { display:none; }
.f1s-lc-btns { display:flex; gap:2px; flex:1; }
.f1s-lc-btn { all:unset; display:flex; flex-direction:column; align-items:center; width:56px; padding-top:4px; font:11px var(--f1s-win-font); color:#222; text-align:center; line-height:12px; }
.f1s-lc-ico { width:32px; height:32px; display:block; margin-bottom:3px; }
.f1s-lc-ico svg { width:32px; height:32px; display:block; }
.f1s-lc-gl { font:11px var(--f1s-win-font); color:#3f4652; text-align:center; height:14px; line-height:13px; }
.f1s-lc-btn.f1-cue, .f1s-lc-bbtn.f1-cue { outline:2px solid #5267d8; outline-offset:-1px; background:rgba(82,103,216,.12); border-radius:3px; }
.f1s-lc-doctabs { position:relative; height:26px; flex:none; display:flex; align-items:flex-end; padding:0 4px; background:#fff; border-bottom:1px solid #9aa3b2; }
.f1s-lc-doctab { display:flex; align-items:center; gap:5px; height:22px; padding:0 6px; border:1px solid #9aa3b2; border-bottom:0; font:12px var(--f1s-win-font); background:#fff; }
.f1s-lc-x { border:1px solid #777; line-height:10px; padding:0 2px; font-size:11px; margin-left:6px; }
.f1s-lc-docdd { margin-left:auto; padding:0 6px 4px; color:#555; }
.f1s-lc-switch { margin-left:auto; align-self:center; font:11px var(--f1s-win-font); padding:2px 8px; border:1px solid #b9c0cc; background:#f6f7f9; color:#333; }
.f1s-lc-switchdd { position:absolute; right:26px; top:24px; z-index:4; background:#fff; border:1px solid #8c95a5; box-shadow:0 4px 12px rgba(0,0,0,.18); font:11px var(--f1s-win-font); min-width:300px; }
.f1s-lc-switchdd[hidden] { display:none; }
.f1s-lc-switchit { padding:4px 10px; } .f1s-lc-switchit:first-child { background:#cce4f7; }
.f1s-app-logo-connect .f1s-ghead { background:#fff; font-weight:700; border-bottom:1px solid var(--lc-grid-hline); }
.f1s-app-logo-connect .f1s-h { border-right:1px solid var(--lc-grid-vline); }
.f1s-app-logo-connect .f1s-h-check svg { width:14px; height:14px; margin-top:3px; }
.f1s-app-logo-connect .f1s-row { height:var(--lc-row-h); line-height:20px; border-bottom:1px solid var(--lc-grid-hline); }
.f1s-app-logo-connect .f1s-c { border-right:1px solid var(--lc-grid-vline); }
.f1s-app-logo-connect .f1s-ink-red { color:var(--lc-row-text); }
.f1s-app-logo-connect .f1s-ink-black { color:#000; } .f1s-app-logo-connect .f1s-ink-purple { color:#7b2fa8; }
.f1s-app-logo-connect .f1s-row.f1s-sel { background:var(--lc-sel-bg); color:var(--lc-sel-text); }
.f1s-app-logo-connect .f1s-chk { width:13px; height:13px; border:1px solid #333; background:#fff; display:block; }
.f1s-lc-bottom { height:32px; flex:none; display:flex; align-items:center; gap:12px; padding:0 6px; background:var(--lc-bottombar); border-top:1px solid #d0d0d0; }
.f1s-lc-icons { display:flex; gap:9px; }
.f1s-ico16 { display:inline-flex; width:16px; height:16px; }
.f1s-lc-bottom .f1s-status { flex:1; font:11px var(--f1s-win-font); }
.f1s-lc-bbtns { display:flex; gap:4px; }
.f1s-lc-bbtn { all:unset; width:92px; height:22px; border:1px solid #c9c9c9; background:#ececec; color:#222; text-align:center; font:12px var(--f1s-win-font); line-height:22px; }
.f1s-lc-bbtn.f1s-disabled { color:var(--lc-btn-disabled-text); }

/* ---------- LOGO Tiger Wings Enterprise v3.06 ---------- */
.f1s-app-tiger { font-family:var(--tg-font); font-size:var(--tg-size); background:#fff; }
.f1s-tg-apptitle { height:22px; flex:none; display:flex; align-items:center; gap:5px; padding:0 6px; background:var(--tg-app-title); color:var(--tg-title-text);
  font:12px var(--f1s-win-font); position:relative; }
.f1s-tg-search { position:absolute; left:43%; top:0; width:240px; height:5px; background:#fff; border-left:24px solid #2c6fd6; }
.f1s-tg-mdi { flex:1; min-height:0; display:flex; flex-direction:column; border:3px solid var(--tg-mdi-border); border-top:0; }
.f1s-tg-mdititle { height:26px; flex:none; display:flex; align-items:center; gap:6px; padding:0 6px; background:var(--tg-mdi-title); color:var(--tg-title-text);
  font:600 12px var(--f1s-win-font); }
.f1s-app-tiger .f1s-ghead { background:var(--tg-header); border-bottom:1px solid #dcdcdc; }
.f1s-app-tiger .f1s-h { border-right:1px solid #e1e1e1; color:#000; }
.f1s-app-tiger .f1s-h-check { background:var(--tg-star-cell); color:#fff; font-size:12px; }
.f1s-app-tiger .f1s-row { height:var(--tg-row-h); line-height:19px; background:var(--tg-row-a); }
.f1s-app-tiger .f1s-row.f1s-zebra { background:var(--tg-row-b); }
.f1s-app-tiger .f1s-row.f1s-sel { background:var(--tg-focus); outline:1px dotted #444; outline-offset:-1px; }
.f1s-app-tiger .f1s-ink-purple { color:#6a2fa0; }
.f1s-app-tiger .f1s-chk { width:12px; height:12px; border:1.5px solid var(--tg-check-ring); border-radius:50%; background:#fff; display:block; }
.f1s-app-tiger .f1s-vthumb, .f1s-app-tiger .f1s-hthumb { background:var(--tg-scroll-thumb); }
.f1s-tg-bottom { height:34px; flex:none; display:flex; align-items:center; gap:12px; padding:0 8px; background:var(--tg-header); border-top:1px solid #e0e0e0; }
.f1s-tg-icons { display:flex; gap:12px; align-items:center; }
.f1s-gap { width:14px; }
.f1s-tg-dd { border:1px solid #bdbdbd; background:#fff; padding:2px 6px; width:250px; font:11px var(--tg-font); }
.f1s-tg-bottom .f1s-status { flex:1; font:11px var(--tg-font); }
.f1s-tg-kapat { width:75px; height:24px; line-height:24px; text-align:center; background:var(--tg-button); color:#fff; border-radius:3px; font:12px var(--f1s-win-font); }
.f1s-tg-task { height:20px; flex:none; background:#d9d6ea; display:flex; align-items:flex-end; padding-left:56px; }
.f1s-tg-tasktab { background:#fff; border:1px solid #b9b3d8; border-bottom:0; padding:1px 10px; font:11px var(--f1s-win-font); }

/* ---------- web-like systems (temsili): gib, elogo, anatolia, takip, banka ---------- */
.f1s-web-tabs { height:30px; flex:none; display:flex; align-items:flex-end; padding:0 8px; background:#dee1e6; color:#333; }
.f1s-web-tab { background:#fff; border-radius:8px 8px 0 0; padding:6px 14px; font:12px var(--f1s-win-font); max-width:420px; white-space:nowrap; overflow:hidden; }
.f1s-web-tabs .f1s-caption { align-self:center; color:#555; }
.f1s-web-bar { height:36px; flex:none; display:flex; align-items:center; gap:12px; padding:0 10px; background:#fff; border-bottom:1px solid #dadce0; }
.f1s-web-nav { color:#777; font:14px var(--f1s-win-font); letter-spacing:2px; }
.f1s-web-addr { flex:1; display:flex; align-items:center; gap:8px; height:26px; padding:0 12px; border-radius:13px; background:#f1f3f4; font:12.5px var(--f1s-win-font); color:#333; }
.f1s-web-globe { color:#777; }
.f1s-web-tems { margin-left:auto; font:600 10.5px var(--f1s-win-font); color:#8a6400; background:#fff3cd; border-radius:8px; padding:0 7px; }
.f1s-web-page { flex:1; min-height:0; display:flex; flex-direction:column; background:#f6f7f9; font:12.5px var(--f1s-win-font); }
.f1s-web-head { height:46px; flex:none; display:flex; align-items:center; gap:24px; padding:0 18px; background:#3d4757; color:#fff; }
.f1s-app-gib .f1s-web-head { background:#5a2430; }
.f1s-app-anatolia .f1s-web-head { background:#2f5d62; }
.f1s-app-banka .f1s-web-head { background:#24385c; }
.f1s-app-elogo .f1s-web-head { background:#34465f; }
.f1s-web-brand { font:600 14px var(--f1s-win-font); white-space:nowrap; }
.f1s-web-menu { display:flex; gap:4px; }
.f1s-web-mi { padding:6px 12px; border-radius:4px; color:#dfe4ec; white-space:nowrap; }
.f1s-web-mi.f1s-on { background:rgba(255,255,255,.18); color:#fff; }
.f1s-banner { flex:none; margin:10px 18px 0; padding:8px 12px; background:#fff3cd; border:1px solid #e8c766; color:#6b5000; font-weight:600; }
.f1s-web-h1 { flex:none; margin:12px 18px 8px; font:600 17px var(--f1s-win-font); color:#1d2430; white-space:nowrap; overflow:hidden; }
.f1s-web-page .f1s-body { margin:0 18px; background:#fff; border:1px solid #dde1e7; }
.f1s-web-status { flex:none; padding:6px 18px; font:12px var(--f1s-win-font); color:#555; }
.f1s-grid-web .f1s-ghead { height:30px; background:#eef0f3; border-bottom:1px solid #d5d9e0; font-weight:600; color:#2a3240; }
.f1s-grid-web .f1s-h { line-height:30px; text-align:left; padding:0 8px; }
.f1s-grid-web .f1s-gview { top:30px; }
.f1s-grid-web .f1s-row { height:26px; line-height:26px; border-bottom:1px solid #eceef2; color:#1d2430; }
.f1s-grid-web .f1s-c { padding:0 8px; }
.f1s-grid-web .f1s-row.f1s-sel { background:#e3ecfb; }
.f1s-grid-web .f1s-row.f1s-zebra { background:#fafbfc; }
.f1s-grid-web .f1s-row.f1s-sel.f1s-zebra { background:#e3ecfb; }
.f1s-ph { margin:24px; padding:28px; border:2px dashed #b6bcc7; color:#4a5260; font:14px var(--f1s-win-font); background:#fafbfc; }
.f1s-ph b { display:block; font-size:16px; margin-bottom:8px; }

/* ---------- e-posta ---------- */
.f1s-app-eposta { font:13px var(--f1s-win-font); background:#fff; }
.f1s-mail-title { height:30px; flex:none; display:flex; align-items:center; padding:0 10px; background:#2f4b6e; color:#fff; font:12.5px var(--f1s-win-font); }
.f1s-mail-tool { height:38px; flex:none; display:flex; align-items:center; gap:6px; padding:0 10px; background:#f3f5f8; border-bottom:1px solid #dde1e7; }
.f1s-mail-tb { padding:4px 12px; border:1px solid #d3d8e0; border-radius:4px; background:#fff; color:#333; }
.f1s-mail-split { flex:1; min-height:0; display:flex; }
.f1s-mail-folders { width:190px; flex:none; background:#f7f8fa; border-right:1px solid #e1e4ea; padding:10px 0; }
.f1s-mail-f { padding:6px 16px; color:#333; } .f1s-mail-f.f1s-on { background:#dde7f6; font-weight:600; }
.f1s-mail-msg { flex:1; min-width:0; padding:16px 22px; overflow:hidden; display:flex; flex-direction:column; }
.f1s-mail-subj { margin:0 0 10px; font:600 19px var(--f1s-win-font); color:#1d2430; }
.f1s-mail-from { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.f1s-mail-av { width:30px; height:30px; border-radius:50%; background:#8a96a8; color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:600; }
.f1s-mail-to, .f1s-mail-att { display:flex; flex-wrap:wrap; gap:5px; align-items:center; margin-bottom:8px; }
.f1s-mail-k { color:#58616f; margin-right:4px; }
.f1s-mail-chip { background:#eef1f5; border-radius:10px; padding:1px 9px; font-size:12px; color:#333; }
.f1s-mail-file { border:1px solid #d3d8e0; border-radius:4px; padding:2px 8px; font-size:12px; background:#fafbfc; }
.f1s-mail-body { border-top:1px solid #e5e8ee; padding-top:10px; overflow:hidden; }
/* Outlook layout (Leo 2026-10-14 evening): app bar, ribbon, folders, message list, reading pane */
.f1s-ol { font-family:"Segoe UI", var(--f1s-win-font); background:#faf9f8; }
.f1s-ol-bar { height:40px; flex:none; display:flex; align-items:center; gap:12px; padding:0 190px 0 12px; background:#0f6cbd; color:#fff; }
.f1s-ol-grid { letter-spacing:-2px; font-size:13px; opacity:.9; }
.f1s-ol-app { font:600 14.5px "Segoe UI", sans-serif; }
.f1s-ol-search { flex:0 1 420px; margin:0 auto; height:26px; display:flex; align-items:center; padding:0 12px; border-radius:4px; background:#fff; color:#605e5c; font-size:12.5px; }
.f1s-ol-me { width:28px; height:28px; border-radius:50%; background:#c7e0f4; color:#0f548c; display:inline-flex; align-items:center; justify-content:center; font:600 11.5px "Segoe UI", sans-serif; }
.f1s-ol-ribbon { flex:none; background:#fff; border-bottom:1px solid #e1dfdd; }
.f1s-ol-rtabs { display:flex; gap:18px; padding:6px 14px 0; font-size:12.5px; color:#323130; }
.f1s-ol-rtab { padding-bottom:5px; } .f1s-ol-rtab.f1s-on { font-weight:600; border-bottom:2.5px solid #0f6cbd; }
.f1s-ol-cmds { display:flex; align-items:center; gap:4px; padding:6px 10px 8px; }
.f1s-ol-cmd { padding:4px 10px; border-radius:4px; color:#323130; font-size:12.5px; }
.f1s-ol-new { background:#0f6cbd; color:#fff; font-weight:600; }
.f1s-ol-sep { width:1px; height:18px; background:#e1dfdd; margin:0 4px; }
.f1s-ol-split { background:#faf9f8; }
.f1s-ol-folders { width:176px; background:#f3f2f1; border-right:1px solid #e1dfdd; }
.f1s-ol-fh { padding:2px 16px 6px; font:600 11.5px "Segoe UI", sans-serif; color:#605e5c; }
.f1s-ol-folders .f1s-mail-f { display:flex; justify-content:space-between; gap:6px; }
.f1s-ol-folders .f1s-mail-f.f1s-on { background:#d6e6f7; border-left:3px solid #0f6cbd; padding-left:13px; }
.f1s-ol-n { color:#0f6cbd; }
.f1s-ol-list { width:268px; flex:none; background:#fff; border-right:1px solid #e1dfdd; overflow:hidden; }
.f1s-ol-ltabs { display:flex; gap:16px; padding:8px 14px 6px; font-size:12.5px; color:#605e5c; border-bottom:1px solid #edebe9; }
.f1s-ol-ltabs .f1s-on { color:#323130; font-weight:600; border-bottom:2px solid #0f6cbd; padding-bottom:3px; }
.f1s-ol-item { padding:8px 12px 8px 14px; border-bottom:1px solid #edebe9; border-left:3px solid transparent; }
.f1s-ol-item.f1s-on { background:#cfe4fa; border-left-color:#0f6cbd; }
.f1s-ol-it1 { display:flex; justify-content:space-between; gap:6px; font-size:12.5px; color:#323130; }
.f1s-ol-it2 { font-size:12px; color:#0f548c; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
.f1s-ol-it3 { font-size:11.5px; color:#605e5c; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
.f1s-ol-time { color:#605e5c; font-size:11.5px; white-space:nowrap; margin-left:auto; }
.f1s-ol-read { background:#fff; margin:8px; border-radius:6px; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.f1s-ol .f1s-mail-av { width:36px; height:36px; background:#8764b8; font-size:13px; }
.f1s-ol-who { display:flex; flex-direction:column; line-height:1.25; } .f1s-ol-who span { color:#605e5c; font-size:12px; }
.f1s-ol .f1s-mail-file { display:inline-flex; align-items:center; gap:6px; background:#fff; border-color:#e1dfdd; padding:3px 8px 3px 4px; }
.f1s-ol-pdf { font-style:normal; font:700 9px "Segoe UI", sans-serif; color:#fff; background:#d13438; border-radius:2px; padding:2px 3px; }

/* ---------- excel ---------- */
.f1s-app-excel { font:12px Calibri, Carlito, "Segoe UI", sans-serif; }
.f1s-xl-title { height:30px; flex:none; display:flex; align-items:center; padding:0 10px; background:#2e6b4a; color:#fff; font:12.5px var(--f1s-win-font); }
.f1s-xl-fx { height:26px; flex:none; display:flex; gap:10px; align-items:center; padding:0 6px; border-bottom:1px solid #d4d4d4; }
.f1s-xl-name { width:70px; border:1px solid #c8c8c8; padding:1px 4px; } .f1s-xl-f { color:#777; font-style:italic; }
.f1s-grid-xl .f1s-ghead { background:#f3f3f3; border-bottom:1px solid #c8c8c8; color:#444; }
.f1s-grid-xl .f1s-h { border-right:1px solid #d4d4d4; }
.f1s-grid-xl .f1s-row { height:20px; line-height:19px; border-bottom:1px solid #e1e1e1; }
.f1s-grid-xl .f1s-c { border-right:1px solid #e1e1e1; }
.f1s-xl-rn { background:#f3f3f3; color:#666; text-align:center; }
.f1s-xl-sheets { height:24px; flex:none; display:flex; align-items:flex-end; padding-left:30px; background:#f3f3f3; border-top:1px solid #d4d4d4; }
.f1s-xl-sheets .f1s-on { background:#fff; color:#2e6b4a; padding:2px 14px; border-bottom:2px solid #2e6b4a; font-weight:600; }

/* ---------- form blocks ---------- */
.f1s-form { padding:14px 18px; overflow:hidden; color:#1d2430; }
.f1s-app-tiger .f1s-form { font:12px var(--tg-font); }
.f1s-b-title { margin:0 0 10px; font:600 15px var(--f1s-win-font); }
.f1s-b-text { margin:6px 0 10px; line-height:1.45; max-width:900px; }
.f1s-b-footer { margin:8px 0; color:#58616f; font-size:11.5px; }
.f1s-b-kv { display:grid; grid-template-columns:1fr; gap:3px 24px; margin-bottom:12px; max-width:900px; }
.f1s-b-kv2 { grid-template-columns:1fr 1fr; }
.f1s-b-kvrow { display:flex; gap:10px; border-bottom:1px solid #edf0f4; padding:3px 0; }
.f1s-b-k { width:170px; flex:none; color:#58616f; }
.f1s-b-v { flex:1; min-width:0; }
.f1s-b-table { border-collapse:collapse; margin:4px 0 12px; min-width:520px; }
.f1s-b-table th { background:#eef0f3; font-weight:600; text-align:left; padding:4px 10px; border:1px solid #d9dde3; }
.f1s-b-table td { padding:4px 10px; border:1px solid #e3e6eb; }
.f1s-b-table .f1s-al-right { text-align:right; }
.f1s-b-table tr.f1-cue td { background:rgba(82,103,216,.12); }
.f1s-b-table td.f1-cue { box-shadow:inset 0 0 0 2px #5267d8; }
.f1s-b-boxes { display:flex; gap:10px; margin:8px 0; }
.f1s-b-box { border:1px solid #c9ced8; padding:6px 10px; min-width:150px; display:flex; flex-direction:column; gap:2px; }
.f1s-b-boxl { color:#58616f; font-size:11px; } .f1s-b-boxt { color:#58616f; font-size:11px; }
.f1s-b-stamp { display:inline-block; border:2px solid #474b4d; color:#474b4d; padding:4px 10px; transform:rotate(-4deg); }
.f1s-b-image { border:1px dashed #b6bcc7; padding:20px; color:#58616f; }

/* ---------- context menu and dialogs ---------- */
.f1s-menu { position:absolute; min-width:190px; background:#fbfbfb; border:1px solid #9a9a9a; box-shadow:2px 3px 8px rgba(0,0,0,.25);
  padding:3px 0; font:12px var(--f1s-win-font); pointer-events:auto; }
.f1s-mi { padding:4px 26px 4px 28px; color:#000; white-space:nowrap; }
.f1s-mi-off { color:#a0a0a0; }
.f1s-mi-on { background:var(--tg-focus); outline:1px solid #b9b3d8; outline-offset:-1px; font-weight:600; }
.f1s-app-logo-connect .f1s-mi-on { background:#cce4f7; outline-color:#99c9ef; }
.f1s-mi.f1-cue { box-shadow:inset 0 0 0 2px #5267d8; }
.f1s-dwrap { position:absolute; left:50%; top:22%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:10px; pointer-events:auto; }
.f1s-hint { display:flex; gap:8px; align-items:center; font:600 13px "Segoe UI", Arial, sans-serif; color:#2b3a8c; background:#edf1ff;
  border:1.5px solid #5267d8; border-radius:8px; padding:6px 12px; box-shadow:0 2px 8px rgba(32,38,48,.15); white-space:nowrap; }
.f1s-dialog { width:460px; background:#fff; border:1px solid #8c7fcf; box-shadow:0 8px 28px rgba(0,0,0,.28); font:12px var(--tg-font); }
.f1s-dialog-lc, .f1s-dialog-web { border-color:#8c95a5; font-family:var(--f1s-win-font); }
.f1s-dtitle { height:26px; display:flex; align-items:center; padding:0 8px; background:var(--tg-mdi-title); color:#fff; font:600 12px var(--f1s-win-font); }
.f1s-dialog-lc .f1s-dtitle, .f1s-dialog-web .f1s-dtitle { background:#f0f0f0; color:#000; border-bottom:1px solid #d0d0d0; }
.f1s-dtitle .f1s-caption { width:40px; }
.f1s-dfields { padding:12px 14px 6px; display:flex; flex-direction:column; gap:6px; }
.f1s-dfield { display:flex; align-items:center; gap:10px; }
.f1s-dfield label { width:130px; color:#333; }
.f1s-dval { flex:1; border:1px solid #b9b9b9; padding:3px 6px; background:#fff; white-space:nowrap; overflow:hidden; }
.f1s-dmsg { padding:10px 0; font-size:13px; }
.f1s-dbtns { display:flex; justify-content:flex-end; gap:6px; padding:8px 14px 12px; }
.f1s-dbtn { all:unset; min-width:76px; height:24px; line-height:24px; text-align:center; border:1px solid #b9b9b9; background:#f3f3f3; color:#000; font:12px var(--f1s-win-font); border-radius:2px; }
.f1s-dialog-tg .f1s-dbtn.f1s-primary { background:var(--tg-button); color:#fff; border-color:var(--tg-button); }
.f1s-dbtn.f1-cue { outline:2.5px solid #5267d8; outline-offset:1px; }

/* ---------- desktop screen (follows page theme) ----------
   Leo 2026-10-15 (H03c): no dark monitor bezel and no stand, simple is better. The screen is a plain window with a thin
   line around it; whose computer it is reads as a small caption above. */
.f1s-desktop { position:absolute; inset:0; display:flex; flex-direction:column; gap:6px; padding:10px 12px 12px; box-sizing:border-box; }
.f1s-monitor { position:relative; width:100%; flex:1; min-height:0; background:#fff; border:1px solid var(--pro-line, #d9dde3); border-radius:6px; overflow:hidden; box-sizing:border-box; }
.f1s-mscreen { position:relative; width:100%; height:100%; background:#fff; overflow:hidden; }
.f1s-stand { display:none; }
.f1s-dcap { order:-1; font:600 12px var(--f1-sans, "Segoe UI", sans-serif); color:var(--pro-text2, #58616f); flex:none; }
.f1s-dcap:empty { display:none; }
.f1s-missing { display:flex; align-items:center; justify-content:center; }
/* a grid row that would show only in part stays hidden (screens.js updateGrid) */
.f1s-cut { visibility: hidden; }