/* jFluxOS v2 — Desktop + Window CSS */

/* ── Skalierungs-Variablen (HiDPI / 4K) ───────────────────────────── */
:root {
  --tb-h: 40px;
  --tb-font: 12px;
  --tb-icon: 16px;
  --tb-gap: 4px;
  --sm-width: 220px;
  --sm-font: 11px;
  --sm-icon: 16px;
  --win-tb-font: 11px;
  --win-tb-h: auto;
  --win-btn-w: 16px;
  --win-btn-h: 14px;
  --win-btn-font: 9px;
  --di-icon: 28px;
  --di-label: 11px;
  --di-width: 72px;
}
@media (min-resolution: 144dpi), (min-width: 2560px) {
  :root {
    --tb-h: 56px;
    --tb-font: 16px;
    --tb-icon: 22px;
    --tb-gap: 6px;
    --sm-width: 300px;
    --sm-font: 14px;
    --sm-icon: 22px;
    --win-tb-font: 14px;
    --win-btn-w: 22px;
    --win-btn-h: 20px;
    --win-btn-font: 12px;
    --di-icon: 40px;
    --di-label: 14px;
    --di-width: 96px;
  }
}
@media (min-resolution: 192dpi), (min-width: 3200px) {
  :root {
    --tb-h: 72px;
    --tb-font: 20px;
    --tb-icon: 28px;
    --tb-gap: 8px;
    --sm-width: 380px;
    --sm-font: 17px;
    --sm-icon: 28px;
    --win-tb-font: 17px;
    --win-btn-w: 28px;
    --win-btn-h: 24px;
    --win-btn-font: 14px;
    --di-icon: 52px;
    --di-label: 17px;
    --di-width: 120px;
  }
}

/* ── Body / Desktop ─────────────────────────────────────────────────── */
html, body { margin:0; padding:0; height:100%; overflow:hidden; }
.jfx-body  { background:#008080; font-family:"MS Sans Serif",Tahoma,Arial,sans-serif; font-size:11px; }

#desktop   { position:fixed; inset:0; bottom:var(--tb-h); overflow:hidden; }

/* ── Power Screen ───────────────────────────────────────────────────── */
.power-screen {
  position:fixed; inset:0; z-index:9999;
  background:#000; display:flex; align-items:center; justify-content:center;
}
.power-content { text-align:center; color:#C0C0C0; }
.power-logo    { font-size:48px; font-weight:bold; color:#fff; letter-spacing:-2px; }
.power-bolt    { color:#FFD600; }
.power-sub     { font-size:14px; color:#888; margin-bottom:32px; }
.power-consent-label { display:block; margin:12px 0; font-size:12px; cursor:pointer; }
.power-btn     { margin-top:16px; }
.power-f11     { font-size:10px; color:#999; margin-top:24px; }
.power-hint    { font-size:11px; color:#aaa; margin-bottom:8px; }
.power-hint a  { color:#00B4D8; }

/* ── BIOS Screen ────────────────────────────────────────────────────── */
.bios-screen { position:fixed; inset:0; z-index:9998; background:#000; padding:16px; overflow:auto; }
.bios-text   { color:#C0C0C0; font-family:monospace; font-size:13px; line-height:1.5; margin:0; }

/* ── Login Screen ───────────────────────────────────────────────────── */
#login-screen {
  position:fixed;inset:0;z-index:9997;
  background:#008080;
  display:flex;align-items:center;justify-content:center;
  font-family:'MS Sans Serif',Tahoma,Arial,sans-serif;
}
#devbot-login-row { display:flex;flex-direction:column;align-items:center;gap:16px; }
#win-login-box {
  background:#C0C0C0;
  border:2px solid;border-color:#DFDFDF #808080 #808080 #DFDFDF;
  box-shadow:3px 3px 0 #000;
  min-width:420px;max-width:95vw;
}
#win-login-content { display:flex; }
#win-login-logo {
  width:100px;background:linear-gradient(to bottom,#000080,#1084d0);
  color:#fff;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:16px 8px;text-align:center;flex-shrink:0;
}
#win-login-forms { flex:1;padding:16px; }
.form-error { color:#CC0000;font-size:11px; }

/* ── App Windows ────────────────────────────────────────────────────── */
.app-window {
  position:absolute;
  min-width:200px; min-height:100px;
  background:#C0C0C0;
  border:2px solid;
  border-color:#DFDFDF #808080 #808080 #DFDFDF;
  box-shadow:2px 2px 0 #000;
  display:flex; flex-direction:column;
  user-select:none;
}
.win98-window-body {
  flex:1; overflow:auto; padding:4px;
  border-top:2px solid;
  border-color:#808080 #DFDFDF #DFDFDF #808080;
  background:var(--win-body-bg, var(--win-bg, #C0C0C0));
  color:var(--win-text, inherit);
}
.app-loading { padding:16px; color:#444; font-size:11px; }

/* Titlebar */
.w98-tb {
  display:flex; align-items:center; gap:4px; padding:3px 4px;
  background:linear-gradient(to right,#000082,#1084d0);
  color:#fff; font-weight:bold; font-size:var(--win-tb-font);
  cursor:move; flex-shrink:0;
}
.tb-icon  { font-size:calc(var(--win-tb-font) + 2px); flex-shrink:0; }
.tb-title { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tb-btns  { display:flex; gap:2px; flex-shrink:0; }
.tb-btn {
  width:var(--win-btn-w); height:var(--win-btn-h); font-size:var(--win-btn-font); padding:0; line-height:1;
  background:#C0C0C0; border:2px solid;
  border-color:#DFDFDF #808080 #808080 #DFDFDF;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.tb-btn:active { border-color:#808080 #DFDFDF #DFDFDF #808080; }
.tb-close:hover { background:#CC0000; color:#fff; }

/* ── Taskbar ────────────────────────────────────────────────────────── */
#taskbar {
  position:fixed; bottom:0; left:0; right:0; height:var(--tb-h);
  background:#C0C0C0;
  border-top:2px solid #DFDFDF;
  display:flex; align-items:center; gap:var(--tb-gap); padding:0 var(--tb-gap);
  z-index:8000;
}
.start-btn {
  display:flex; align-items:center; gap:var(--tb-gap); padding:4px 10px;
  font-weight:bold; font-size:var(--tb-font); white-space:nowrap;
  background:#C0C0C0;
  border:2px solid; border-color:#DFDFDF #808080 #808080 #DFDFDF;
  cursor:pointer;
}
.start-btn img { width:var(--tb-icon); height:var(--tb-icon); }
.start-btn:active { border-color:#808080 #DFDFDF #DFDFDF #808080; }

#taskbar-windows { flex:1; display:flex; gap:3px; overflow:hidden; }
.taskbar-window-btn {
  max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  padding:3px 8px; font-size:var(--sm-font);
  background:#C0C0C0; border:2px solid; border-color:#DFDFDF #808080 #808080 #DFDFDF;
  cursor:pointer;
}
.taskbar-window-btn.active { border-color:#808080 #DFDFDF #DFDFDF #808080; background:#DFDFDF; }

#systray { display:flex; align-items:center; gap:6px; padding:0 6px;
           border-left:2px inset #808080; font-size:var(--sm-font); white-space:nowrap; }

/* ── Clock Blink ─────────────────────────────────────────────────── */
#systray-clock.clock-blink .clock-colon { visibility: hidden; }

/* ── Kalender-Popup ──────────────────────────────────────────────── */
#_wm-calendar-popup {
  position: fixed; bottom: 30px; right: 4px; z-index: 99999;
  background: #C0C0C0; border: 2px outset #DFDFDF;
  box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
  padding: 4px 6px 6px; font-size: 11px; font-family: 'Tahoma', 'MS Sans Serif', sans-serif;
  user-select: none;
}
#_wm-calendar-popup .cal-title {
  text-align: center; font-weight: bold; font-size: 11px;
  padding: 2px 0 4px; border-bottom: 1px solid #808080; margin-bottom: 4px;
}
#_wm-calendar-popup .cal-table {
  border-collapse: collapse; width: 100%;
}
#_wm-calendar-popup .cal-table th {
  font-size: 10px; font-weight: bold; text-align: center;
  padding: 1px 4px; color: #000080;
}
#_wm-calendar-popup .cal-table td {
  font-size: 10px; text-align: center; padding: 2px 4px;
  cursor: default;
}
#_wm-calendar-popup .cal-table .cal-today {
  background: #000080; color: #fff; font-weight: bold; border-radius: 2px;
}

/* ── Quick Launch Bar ──────────────────────────────────────────────── */
#quicklaunch {
  display:flex; align-items:center; gap:2px; padding:0 4px;
  border-right:2px solid; border-color:#808080 #DFDFDF #DFDFDF #808080;
  margin-right:4px; flex-shrink:0;
}
.ql-grip {
  font-size:calc(var(--tb-font) - 2px); color:#808080; cursor:default; user-select:none;
  letter-spacing:-2px; padding:0 2px;
}
.ql-icon {
  font-size:var(--tb-icon); cursor:pointer; padding:2px;
  border:1px solid transparent;
  display:flex; align-items:center; justify-content:center;
  width:calc(var(--tb-icon) + 6px); height:calc(var(--tb-icon) + 6px);
}
.ql-icon:hover { border-color:#fff #808080 #808080 #fff; background:rgba(255,255,255,.15); }
.ql-icon:active { border-color:#808080 #fff #fff #808080; }
.ql-ctx {
  display:none; position:fixed; z-index:9500;
  background:#C0C0C0; border:2px solid; border-color:#DFDFDF #808080 #808080 #DFDFDF;
  box-shadow:2px 2px 0 rgba(0,0,0,.4); padding:2px 0; min-width:180px;
  font-family:'MS Sans Serif',Tahoma,Arial,sans-serif; font-size:var(--sm-font);
}

/* ── Start-Menü ─────────────────────────────────────────────────────── */
#start-menu {
  position:fixed; bottom:var(--tb-h); left:0;
  width:var(--sm-width); background:#C0C0C0;
  border:2px solid; border-color:#DFDFDF #808080 #808080 #DFDFDF;
  box-shadow:2px 2px 0 #000; z-index:9000;
  display:flex; flex-direction:row;
}
.sm-header {
  background:linear-gradient(to bottom, #000082, #1084d0);
  padding:8px 4px 8px 8px; writing-mode:vertical-lr;
  transform:rotate(180deg); color:#C0C0C0; font-weight:bold; font-size:13px;
  letter-spacing:2px; flex-shrink:0;
}
.sm-body   { padding:4px 0; flex:1; max-height:calc(100vh - var(--tb-h, 40px) - 20px); overflow-y:auto; }
.sm-item   { display:flex; align-items:center; gap:8px; padding:5px 12px; cursor:pointer; }
.sm-item:hover { background:#000082; color:#fff; }
.sm-item:active { background:#000060; }
.sm-item-icon  { font-size:var(--sm-icon); width:calc(var(--sm-icon) + 4px); text-align:center; flex-shrink:0; }
.sm-item-label { font-size:var(--sm-font); }
.sm-item-danger:hover { background:#CC0000; }
.sm-sep { height:1px; background:#808080; margin:4px 0; }

/* Start-Menu Flyout-Submenues */
.sm-item.has-arrow { position:relative; }
.sm-item.has-arrow::after { content:'►'; font-size:8px; float:right; margin-left:12px; font-family:sans-serif; }
.sm-sub {
  display:none; position:fixed; min-width:var(--sm-width);
  max-width:calc(100vw - 200px);
  max-height:calc(100vh - 40px); overflow-y:auto;
  background:#C0C0C0; border:2px solid; border-color:#DFDFDF #808080 #808080 #DFDFDF;
  box-shadow:2px 2px 0 rgba(0,0,0,.3); padding:2px 0; z-index:9001;
}
.sm-item.has-arrow:hover > .sm-sub { display:block; }

/* ── Achievement Toast ──────────────────────────────────────────────── */
.achievement-toast {
  position:fixed; bottom:calc(var(--tb-h) + 8px); right:8px; z-index:9990;
  display:flex; align-items:center; gap:10px; padding:0;
  background:#C0C0C0; border:2px solid; border-color:#DFDFDF #808080 #808080 #DFDFDF;
  box-shadow:2px 2px 0 #000; width:260px;
}
.ach-toast-icon  { font-size:28px; padding:8px; border-right:2px solid #808080; }
.ach-toast-text  { padding:8px 4px; }
.ach-toast-title { font-weight:bold; font-size:10px; color:#000082; }
.ach-toast-name  { font-size:11px; margin-top:2px; }
.ach-toast-in    { animation:toastIn .3s ease-out; }
.ach-toast-out   { animation:toastOut .4s ease-in forwards; }
@keyframes toastIn  { from{transform:translateX(120%);opacity:0} to{transform:translateX(0);opacity:1} }
@keyframes toastOut { from{opacity:1} to{opacity:0;transform:translateX(120%)} }

/* ── Scrollbars (Win98 raised look) ─────────────────────────────────── */
::-webkit-scrollbar { width:16px; height:16px; background:#C0C0C0; }
::-webkit-scrollbar-thumb { background:#C0C0C0; border:2px solid; border-color:#DFDFDF #808080 #808080 #DFDFDF; }
::-webkit-scrollbar-track { background:#C0C0C0; border:1px inset #808080; }

/* ── Desktop Icons ──────────────────────────────────────────────────── */
#desktop-icons { position:absolute; inset:0; pointer-events:none; }
.desktop-icon {
  position: absolute;
  width: var(--di-width);
  text-align: center;
  cursor: default;
  pointer-events: all;
  padding: 4px 2px;
  border: 1px solid transparent;
  user-select: none;
}
.desktop-icon:hover { border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.1); }
.desktop-icon.selected { background: rgba(0,0,128,0.4); border-color: rgba(255,255,255,0.6); }
.desktop-icon:focus-visible { outline:2px dotted #000; outline-offset:2px; }
.sm-item:focus-visible { outline:1px dotted #000; background:#000080; color:#fff; }
.di-icon  { font-size: var(--di-icon); line-height: 1; margin-bottom: 3px; filter: drop-shadow(1px 1px 0 rgba(0,0,0,.5)); }
.di-label {
  font-size: var(--di-label); color: #fff; line-height: 1.2;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
  word-break: break-word;
}

/* ── Clippo: main styles in effects.css ──────── */


/* ── Static Desktop Icons (Netzwerk etc.) ──────────────────────────── */
.desk-icon-static {
  position:absolute; display:flex; flex-direction:column; align-items:center;
  width:var(--di-width); padding:4px 2px; border:1px solid transparent;
  user-select:none; font-family:'MS Sans Serif',Tahoma,Arial,sans-serif; cursor:default;
}
.desk-icon-static:hover { border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.1); }
.desk-icon-static.selected { background:rgba(0,0,128,.4); border-color:rgba(255,255,255,.6); }
.desk-icon-static .di-icon  { font-size:var(--di-icon); line-height:1; margin-bottom:3px; filter:drop-shadow(1px 1px 0 rgba(0,0,0,.5)); }
.desk-icon-static .di-label {
  font-size:var(--di-label); color:#fff; line-height:1.2; text-align:center;
  text-shadow:1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000;
  word-break:break-word;
}

/* ── Forms ──────────────────────────────────────────────────────────── */
.win98-input {
  background:#fff; border:2px inset #808080;
  padding:2px 4px; font-family:inherit; font-size:11px;
  width:100%; box-sizing:border-box;
}
.win98-input:focus { outline:1px dotted #000; }
textarea.win98-input { resize:vertical; min-height:40px; }
.win-btn {
  padding:4px 12px; font-family:inherit; font-size:11px;
  background:var(--win-btn, #C0C0C0); border:2px solid; border-color:#DFDFDF #808080 #808080 #DFDFDF;
  cursor:pointer; min-width:75px; color:var(--win-text, inherit);
}
.win-btn:hover  { filter:brightness(1.1); }
.win-btn:active { border-color:#808080 #DFDFDF #DFDFDF #808080; padding:5px 11px 3px 13px; }
.win-btn:disabled { color:#808080; cursor:not-allowed; }

/* Snow Effect, PSOD, Matrix, Screensaver → effects.css (SoT) */



/* PSOD-Overlay, Matrix-Canvas, Screensaver → effects.css (Single Source of Truth) */

/* ── Ad Slots ───────────────────────────────────────────────────────────── */
.ad-slot { font-family: 'MS Sans Serif', Tahoma, sans-serif; font-size: 11px; }
.ad-slot-banner {
  position: fixed; bottom: var(--tb-h, 40px); left: 50%; transform: translateX(-50%);
  z-index: 90; text-align: center;
}
.ad-slot-systray {
  position: absolute; bottom: 100%; right: 0;
  z-index: 100; margin-bottom: 2px;
}
.win98-ad { background: #C0C0C0; border: 2px outset #DFDFDF; position: relative; }
.win98-ad-banner { display: inline-block; max-width: 728px; margin: 2px auto; }
.win98-ad-banner-inner { padding: 3px 6px; background: #FFFFCC; border: 1px solid #808080; }
.win98-ad-close-banner {
  position: absolute; top: 2px; right: 4px; background: none; border: none;
  font-size: 14px; cursor: pointer; color: #444; line-height: 1;
}
.win98-ad-dialog { min-width: 200px; }
.win98-ad-tb {
  background: linear-gradient(90deg, #000080, #1084D0);
  color: white; padding: 2px 4px; font-size: 11px; font-weight: bold;
  display: flex; align-items: center; gap: 4px;
}
.win98-ad-close { background: #C0C0C0; border: 2px outset #DFDFDF; font-size: 10px; padding: 0 3px; margin-left: auto; cursor: pointer; }
.win98-ad-body { padding: 8px; background: #C0C0C0; }
.win98-ad-systray { display: inline-block; max-width: 200px; }
.win98-ad-systray-inner { padding: 2px 4px; font-size: 10px; background: #FFFFCC; border: 1px solid #808080; }
.win98-ad-close-systray { position: absolute; top: 0; right: 2px; background: none; border: none; font-size: 10px; cursor: pointer; }
.win98-ad a { color: #0000FF; }
.win98-ad a:hover { color: #FF0000; }
.win98-ad img { max-width: 100%; height: auto; }
.ad-slot-app {
  border-top: 1px solid #808080;
  background: #C0C0C0;
  padding: 2px 4px;
  font-size: 10px;
  text-align: center;
  flex-shrink: 0;
}

/* ── Run Dialog (Ausführen) ─────────────────────────────────────────── */
#run-dialog{
  display:none;position:fixed;inset:0;z-index:9990;
  background:rgba(0,0,0,0.3);align-items:center;justify-content:center;
}
#run-dialog.active{display:flex}
.run-box{
  background:#C0C0C0;border:2px solid;border-color:#DFDFDF #808080 #808080 #DFDFDF;
  box-shadow:3px 3px 0 #000;width:400px;
}
.run-tb{background:linear-gradient(to right,#00007B,#1060C8);color:#fff;font-weight:bold;font-size:11px;padding:2px 6px}
.run-body{padding:16px 20px;font-size:12px}
.run-row{display:flex;gap:10px;align-items:flex-start}
.run-icon{font-size:32px}
.run-fields{flex:1}
.run-fields p{margin:0 0 12px}
#run-input{width:100%;box-sizing:border-box;padding:3px;border:2px inset #808080;font-family:'MS Sans Serif',Tahoma,sans-serif;font-size:12px}
#run-error{color:red;font-size:10px;margin:6px 0 0;display:none}
.run-footer{display:flex;justify-content:flex-end;gap:6px;padding:0 20px 12px}

/* ── Legal Modal (§ Rechtliches) ───────────────────────────────────── */
#legal-modal{
  display:none;position:fixed;inset:0;z-index:100001;
  background:rgba(0,0,0,.7);align-items:center;justify-content:center;
}
#legal-modal.active{display:flex}
.legal-box{
  background:#C0C0C0;border:2px solid;border-color:#DFDFDF #808080 #808080 #DFDFDF;
  box-shadow:3px 3px 0 #000;width:480px;max-width:96vw;max-height:80vh;overflow-y:auto;
}
.legal-tb{
  padding:3px 6px;display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(90deg,#000080,#1084d0);color:#fff;font-size:12px;font-weight:bold;
}
.legal-close{
  background:#C0C0C0;border:2px solid;border-color:#DFDFDF #808080 #808080 #DFDFDF;
  width:18px;height:18px;font-size:11px;cursor:pointer;padding:0;line-height:14px;
}
.legal-body{padding:14px 16px;font-size:11px;line-height:1.6;color:#000;font-family:'MS Sans Serif',Tahoma,Arial,sans-serif}
.legal-body p{margin:0 0 10px}
.legal-body a{color:#000080}

/* ── Tablet/Laptop Responsive (900-1200px) ─────────────────────────── */
@media (max-width: 1200px) {
  .sm-item { padding: 7px 14px; }
  .tb-btn { min-height: 28px; }
  .win98-tb-btn { min-width: 18px; min-height: 18px; }
  ::-webkit-scrollbar { width: 14px; }
  /* sm-sub position handled by JS */
}

/* ══════════════════════════════════════════════════════════════════════
   Mein Computer — Explorer
   ══════════════════════════════════════════════════════════════════════ */
#mypc-body {
  height: 100%;
  background: #C0C0C0;
  font-family: 'MS Sans Serif', Tahoma, sans-serif;
  font-size: 11px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mypc-toolbar {
  display: flex;
  align-items: center;
  padding: 3px 4px;
  gap: 4px;
  background: #C0C0C0;
  border-bottom: 1px solid #808080;
}
.mypc-tb-btn {
  padding: 2px 8px;
  border: 2px solid;
  border-color: #fff #808080 #808080 #fff;
  background: #C0C0C0;
  cursor: default;
  font-family: inherit;
  font-size: 10px;
}
.mypc-tb-btn:active { border-color: #808080 #fff #fff #808080; }
.mypc-tb-sep {
  width: 1px;
  height: 18px;
  background: #808080;
  margin: 0 2px;
}
.mypc-tb-addr {
  flex: 1;
  padding: 2px 4px;
  border: 2px inset #808080;
  background: #fff;
  font-size: 11px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mypc-content {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.mypc-tree {
  width: 120px;
  min-width: 120px;
  border-right: 1px solid #808080;
  border: 2px inset #808080;
  background: #fff;
  margin: 4px 0 4px 4px;
  overflow-y: auto;
  font-size: 10px;
}
.mypc-tree-item {
  padding: 2px 4px;
  cursor: default;
  white-space: nowrap;
}
.mypc-tree-item:hover { background: #E8E8FF; }
.mypc-tree-item.active { background: #000080; color: #fff; }
.mypc-tree-icon { font-size: 12px; }
.mypc-tree-indent { display: inline-block; width: 12px; }

.mypc-list {
  flex: 1;
  border: 2px inset #808080;
  background: #fff;
  margin: 4px;
  overflow-y: auto;
  padding: 4px;
}

.mypc-item {
  display: flex;
  align-items: center;
  padding: 3px 6px;
  cursor: default;
  gap: 8px;
  border-bottom: 1px solid #f0f0f0;
}
.mypc-item:hover { background: #E8E8FF; }
.mypc-item-icon { font-size: 20px; min-width: 28px; text-align: center; }
.mypc-item-info { min-width: 0; }
.mypc-item-name { font-weight: bold; font-size: 11px; }
.mypc-item-detail { font-size: 10px; color: #808080; }

.mypc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #808080;
  text-align: center;
  font-size: 11px;
}

.mypc-statusbar {
  padding: 2px 6px;
  background: #C0C0C0;
  border-top: 1px solid #808080;
  font-size: 10px;
  color: #333;
}

/* Properties Dialog */
.mypc-props {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 280px;
  background: #C0C0C0;
  border: 2px solid;
  border-color: #fff #808080 #808080 #fff;
  box-shadow: 2px 2px 0 #000;
  z-index: 300;
}
.mypc-props-tb {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 4px;
  background: linear-gradient(90deg, #000080, #1084D0);
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  cursor: move;
}
.mypc-props-close {
  background: #C0C0C0;
  border: 2px solid;
  border-color: #fff #808080 #808080 #fff;
  width: 16px;
  height: 14px;
  font-size: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: inherit;
  color: #000;
}
.mypc-props-body {
  padding: 12px;
  text-align: center;
}
.mypc-props-icon {
  font-size: 36px;
  margin-bottom: 8px;
}
.mypc-props-table {
  margin: 8px auto;
  font-size: 11px;
  text-align: left;
  border-collapse: collapse;
}
.mypc-props-table td { padding: 2px 6px; }
.mypc-props-lbl { color: #555; font-weight: bold; }

.mypc-props-bar-wrap {
  height: 14px;
  border: 2px inset #808080;
  background: #E0E0FF;
  margin: 8px 0 4px;
  position: relative;
}
.mypc-props-bar-used {
  height: 100%;
  background: #000080;
}
.mypc-props-bar-legend {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: #555;
}
.mypc-props-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 2px;
  vertical-align: middle;
}
.mypc-props-dot.used { background: #000080; }
.mypc-props-dot.free { background: #E0E0FF; }
.mypc-props-btn {
  padding: 3px 16px;
  border: 2px solid;
  border-color: #fff #808080 #808080 #fff;
  background: #C0C0C0;
  cursor: default;
  font-family: inherit;
  font-size: 11px;
}
.mypc-props-btn:active { border-color: #808080 #fff #fff #808080; }

/* Floppy Loading Animation */
.mypc-floppy-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #333;
  font-size: 11px;
}
.mypc-floppy-spin {
  font-size: 32px;
  animation: floppy-spin 0.5s linear infinite;
}
@keyframes floppy-spin {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(-8deg); }
  50%  { transform: rotate(0deg); }
  75%  { transform: rotate(8deg); }
  100% { transform: rotate(0deg); }
}

/* Floppy Error Dialog (Win98 style) */
.mypc-floppy-error {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.mypc-floppy-err-box {
  background: #C0C0C0;
  border: 2px solid;
  border-color: #DFDFDF #808080 #808080 #DFDFDF;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.3);
  min-width: 280px;
  max-width: 360px;
}
.mypc-floppy-err-tb {
  background: linear-gradient(90deg, #000080, #1084D0);
  color: #fff;
  font-weight: bold;
  font-size: 11px;
  padding: 3px 6px;
}
.mypc-floppy-err-body {
  padding: 12px 16px;
}
.mypc-floppy-err-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
}
.mypc-floppy-err-icon {
  font-size: 24px;
  flex-shrink: 0;
}
.mypc-floppy-err-msg {
  font-size: 11px;
  line-height: 1.5;
}
.mypc-floppy-err-btns {
  display: flex;
  justify-content: center;
  gap: 8px;
}

/* Capacity bars in drive overview */
.mypc-capacity {
  height: 8px;
  background: #E0E0E0;
  border: 1px solid;
  border-color: #808080 #fff #fff #808080;
  margin-top: 3px;
  position: relative;
}
.mypc-capacity-bar {
  height: 100%;
}
.mypc-capacity-text {
  font-size: 9px;
  color: #808080;
  margin-top: 1px;
}

/* Preview panel */
.mypc-preview {
  width: 180px;
  min-width: 180px;
  border: 2px inset #808080;
  background: #fff;
  margin: 4px 4px 4px 0;
  padding: 8px;
  overflow-y: auto;
  font-size: 10px;
}
.mypc-preview-icon {
  font-size: 36px;
  text-align: center;
  margin-bottom: 6px;
}
.mypc-preview-name {
  font-weight: bold;
  font-size: 11px;
  text-align: center;
  word-break: break-all;
  margin-bottom: 8px;
  border-bottom: 1px solid #C0C0C0;
  padding-bottom: 6px;
}
.mypc-preview-meta {
  color: #555;
  line-height: 1.5;
}
.mypc-preview-meta div {
  padding: 1px 0;
}
.mypc-preview-text {
  margin-top: 8px;
  padding: 4px;
  border: 1px solid #C0C0C0;
  background: #FFFFF0;
  font-family: 'Courier New', monospace;
  font-size: 9px;
  max-height: 100px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
}
.mypc-preview-img {
  text-align: center;
  margin-top: 6px;
}

/* Loading indicator */
.mypc-loading {
  text-align: center;
  padding: 40px 12px;
  color: #808080;
  font-size: 11px;
}

/* Drive item with capacity bar needs slightly more height */
.mypc-drive-item .mypc-item-info {
  flex: 1;
}