:root{
  --bg:#151515;
  --desktop-bg:#151515;
  --desktop-bg-image:none;
  --desk-zoom:1;
  --panel:#202020;
  --panel2:#2a2a2a;
  --text:#eaeaea;
  --muted:#b8b8b8;
  --accent:#4aa3ff;
  --danger:#e74c3c;
  --folder-color:#ffca28;
}

*{box-sizing:border-box}
body{margin:0;background:var(--desktop-bg);color:var(--text);font-family:Arial, Helvetica, sans-serif;user-select:none}

/* Full-screen wallpaper layer (dimmed) */
#wallpaper{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:var(--desktop-bg-image);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  filter: brightness(0.65) saturate(0.75) contrast(0.92);
}
#topbar{
  height:44px; display:flex; align-items:center; justify-content:space-between;
  padding:0 10px; background:var(--panel); border-bottom:1px solid #000;
  position:relative; z-index:200;
}
.brand{font-weight:700; letter-spacing:1px; margin-right:10px}
.btn{
  background:var(--panel2); color:var(--text); border:1px solid #000;
  padding:6px 10px; border-radius:8px; cursor:pointer;
}
.btn:hover{border-color:#333}
.btn.small{padding:4px 8px; border-radius:7px; font-size:12px}
.btn.danger{background:#3a1b1b; border-color:#000}
.badge{
  display:inline-block; padding:4px 8px; border-radius:999px; background:#111; border:1px solid #000;
  font-size:12px; color:var(--muted); margin-right:8px;
}
.path{margin-left:10px; color:var(--muted); font-size:12px}
#desktop{
  position:relative;
  height:calc(100vh - 44px);
  width:100vw;
  overflow:hidden;
  z-index:1;
}

.icon{
  position:absolute;
  width:96px;
  padding:6px 6px 8px;
  border-radius:10px;
  text-align:center;
  cursor:default;
  border:1px solid transparent;
  background:transparent;
  transform: scale(var(--desk-zoom));
  transform-origin: top left;
}

.postit{
  transform: scale(var(--desk-zoom));
  transform-origin: top left;
}
.icon.selected{
  border-color:rgba(255,255,255,0.25);
  background:rgba(255,255,255,0.06);
}
.icon .glyph{
  width:64px; height:64px; margin:0 auto 6px;
  display:flex; align-items:center; justify-content:center;
  border-radius:12px;
  background:rgba(255,255,255,0.06);
  overflow:hidden;
}

/* Folder icon: use colored SVG (settings -> folder color) */
.icon.is-folder .glyph{background:transparent; color:var(--folder-color)}
.icon.is-folder .glyph svg{width:58px; height:46px; display:block}

/* Resizable photo thumbnails */
.icon.photo-resizable{padding:6px}
.icon.photo-resizable .glyph{width:100%; height:100%; margin:0}
.icon.photo-resizable .glyph img{width:100%; height:100%; object-fit:cover}
.icon.photo-resizable .name{
  position:absolute;
  left:6px; right:6px; bottom:6px;
  padding:3px 6px;
  border-radius:10px;
  background:rgba(0,0,0,0.45);
}
.icon.photo-resizable .resize-handle{
  position:absolute;
  width:14px; height:14px;
  right:2px; bottom:2px;
  border-radius:4px;
  background:rgba(0,0,0,0.35);
  border:1px solid rgba(255,255,255,0.25);
  cursor:nwse-resize;
  display:none;
}
.icon.photo-resizable:hover .resize-handle,
.icon.photo-resizable.selected .resize-handle{display:block}
.icon .glyph img{
  width:100%; height:100%; object-fit:cover;
}
.icon .name{
  font-size:12px; line-height:1.1; color:var(--text);
  word-break:break-word;
}

/* Photos: show title only on hover */
.icon.is-photo .name{
  opacity:0;
  transition:opacity .12s ease;
}
.icon.is-photo:hover .name{ opacity:1; }

/* Videos: smaller title font */
.icon.is-video .name{ font-size:11px; }
/* emoji glyph fallback */
.glyph .emoji{font-size:34px; line-height:1}

.actions{
  position:absolute; right:12px; bottom:12px;
  z-index: 1200;
  display:none; gap:8px;
  padding:8px; border-radius:14px;
  background:rgba(0,0,0,0.4); border:1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(6px);
}

.overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,0.65);
  display:flex; align-items:center; justify-content:center;
  z-index:1000;
}
.panel{
  width:min(360px, 90vw);
  background:var(--panel);
  border:1px solid #000;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 18px 60px rgba(0,0,0,0.6);
}
.panel-title{
  padding:10px 12px;
  background:var(--panel2);
  border-bottom:1px solid #000;
  font-weight:700;
}
.panel-body{padding:12px}
.input{
  width:100%; padding:10px 12px;
  border-radius:10px; border:1px solid #000;
  background:#0f0f0f; color:var(--text);
  outline:none;
}
.select{
  width:100%; padding:10px 12px;
  border-radius:10px; border:1px solid #000;
  background:#0f0f0f; color:var(--text);
  outline:none;
}
.row{display:flex; gap:8px; margin-top:10px}
.err{margin-top:10px; color:#ffb3ab; font-size:12px; min-height:16px}

.win{
  position:absolute;
  left:10vw; top:10vh;
  width:80vw; height:78vh;
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  border:1px solid #000;
  z-index:900;
  box-shadow:0 18px 60px rgba(0,0,0,0.55);
}
.win-header{
  height:40px;
  background:#262626;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 10px;
  cursor:move;
}
.win-title{font-weight:700; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:65vw}
.win-body{
  height:calc(100% - 40px);
  background:#f5f5f5;
  overflow:auto;
}
.win-body .pad{padding:12px}
.win-body iframe{width:100%; height:100%; border:0}
.win-body img{max-width:100%; height:auto; display:block; margin:0 auto}
.win-body video{width:100%; height:auto}
.win-body audio{width:100%; margin-top:12px}
.win.resizable{resize:both; overflow:hidden}
.win.maximized{
  left:0 !important; top:44px !important;
  width:100vw !important; height:calc(100vh - 44px) !important;
  border-radius:0 !important;
}

/* Folder window browser */
.fb-bar{
  position:sticky;
  top:0;
  z-index:2;
  display:flex;
  gap:8px;
  align-items:center;
  padding:10px;
  background:#f7f7f7;
  border-bottom:1px solid #ddd;
}
.fb-path{
  font-size:12px;
  color:#444;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.fb-list{padding:8px}
.fb-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:10px;
  cursor:pointer;
  user-select:none;
}
.fb-item:hover{background:#efefef}
.fb-item.selected{background:#e6e6e6}
.fb-ic{width:22px; text-align:center}
.fb-name{flex:1; font-size:14px; color:#111}
.fb-kind{font-size:12px; color:#666}

/* Multimedia: cover topbar when maximized so Racine/↑ stay underneath */
.win.cover-topbar{ z-index:1200; }
.win.cover-topbar.maximized{ top:0 !important; height:100vh !important; }
.menu{
  position:absolute;
  background:rgba(30,30,30,0.95);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:14px;
  padding:6px;
  z-index:950;
  min-width:180px;
  box-shadow:0 18px 60px rgba(0,0,0,0.55);
}
.menu-item{
  width:100%;
  text-align:left;
  padding:10px 10px;
  background:transparent;
  border:0;
  color:var(--text);
  border-radius:10px;
  cursor:pointer;
}
.menu-item:hover{background:rgba(255,255,255,0.08)}

/* QUILL_FIX_START */
.ql-container, .ql-editor{
  color:#000 !important;
}
.ql-toolbar.ql-snow{
  background:#fff;
}
.ql-toolbar.ql-snow .ql-picker-label,
.ql-toolbar.ql-snow .ql-picker-item,
.ql-toolbar.ql-snow button{
  color:#000;
}
/* QUILL_FIX_END */

/* TRASH_START */
/* TRASH_END */





/* DRAG_FIX_START */
.icon.dragging{ opacity:0.95; }
.icon.hit-ignore{ pointer-events:none; }
.postit.dragging{ opacity:0.95; }
.postit.hit-ignore{ pointer-events:none; }
/* DRAG_FIX_END */

/* MEDIA_FIT_START */
.win-body{position:relative;}
.media-wrap{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#000;
}
.media-wrap video,
.media-wrap img{
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  background:#000;
}
/* MEDIA_FIT_END */

/* DROPZONES_START */
.drop-zones{
  position:fixed;
  left:50%;
  top:56px; /* below topbar */
  transform:translateX(-50%);
  display:flex;
  gap:10px;
  z-index:990;
  pointer-events:none; /* allow click only on zones */
}
.drop-zone{
  pointer-events:auto;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(0,0,0,0.45);
  border:1px solid rgba(255,255,255,0.14);
  color:var(--text);
  font-size:12px;
  backdrop-filter: blur(6px);
  cursor:pointer;
  user-select:none;
}
.drop-zone.hot{
  background:rgba(74, 163, 255, 0.20);
  border-color:rgba(74, 163, 255, 0.55);
}
.upload-box{
  width:min(420px, 90vw);
  background:rgba(32,32,32,0.95);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:18px;
  padding:14px 16px;
  box-shadow:0 18px 60px rgba(0,0,0,0.6);
}
.upload-title{font-weight:700; margin-bottom:8px}
.upload-file{font-size:12px; color:var(--muted); margin-bottom:10px; word-break:break-word}
.upload-bar{height:10px; background:rgba(255,255,255,0.10); border-radius:999px; overflow:hidden; border:1px solid rgba(255,255,255,0.12)}
.upload-bar-fill{height:100%; width:0% ; background:rgba(74,163,255,0.9)}
.upload-pct{margin-top:8px; font-size:12px; color:var(--muted); text-align:right}
/* UPLOAD_OVERLAY_END */

/* QUILL_TEXT_COLOR_START */
.ql-container, .ql-editor{
  color:#000 !important;
}
.ql-editor p, .ql-editor span, .ql-editor div, .ql-editor li{
  color:#000 !important;
}
/* Keep placeholder readable but subtle */
.ql-editor.ql-blank::before{
  color: rgba(0,0,0,0.35) !important;
}
/* Ensure any plain pre blocks are readable */
.win-body pre{
  color:#000;
}
/* QUILL_TEXT_COLOR_END */

/* TXT_EDITOR_START */
.txt-editor{
  width:100%;
  height: calc(78vh - 180px);
  padding:12px;
  border-radius:12px;
  border:1px solid #ddd;
  background:#fff;
  color:#000;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:14px;
  line-height:1.4;
  resize: vertical;
}

/* NOTE_WINDOW_START */
.note-win{
  height:100%;
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
}
.note-toolbar{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.note-field{
  display:flex;
  gap:8px;
  align-items:center;
  font-size:12px;
  color:#333;
}
.note-hint{ font-size:12px; color:#666; }
.note-area{
  flex:1 1 auto;
  width:100%;
  padding:12px;
  border-radius:12px;
  border:1px solid #ddd;
  background:#fff;
  color:#000;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:14px;
  line-height:1.4;
  resize:none;
  min-height:220px;
}
.note-area[readonly]{ opacity:0.85; }
/* NOTE_WINDOW_END */
.txt-view{
  white-space:pre-wrap;
  background:#fff;
  padding:12px;
  border-radius:12px;
  border:1px solid #ddd;
  min-height:200px;
  color:#000;
}
/* TXT_EDITOR_END */

/* BREADCRUMB_START */
#path{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  user-select:none;
}
#path .crumb{
  cursor:pointer;
  padding:2px 6px;
  border-radius:8px;
  color:var(--text);
}
#path .crumb:hover{
  background:rgba(255,255,255,0.10);
}
#path .sep{
  opacity:0.55;
}
/* BREADCRUMB_END */

/* UI_POLISH_START */
:root{
  --desktop-bg: #0f0f10;
  --desktop-bg-image: none;
}

/* Desktop background */
#desktop{
  background: var(--desktop-bg);
  background-image: var(--desktop-bg-image);
  background-size: cover;
  background-position: center;
}

/* Topbar layout: single line */
#topbar{
  display:flex;
  align-items:center;
  gap:12px;
}
#topbar .logo, #topbar #logo{
  white-space:nowrap;
}
#path.breadcrumbs{
  flex:1 1 auto;
  min-width: 0;
  display:flex;
  align-items:center;
  gap:6px;
  overflow:hidden;
  white-space:nowrap;
}
#path .crumb, #path .sep{
  flex:0 0 auto;
}
#path .crumb{
  cursor:pointer;
  padding:2px 6px;
  border-radius:8px;
}
#path .crumb:hover{ background:rgba(255,255,255,0.10); }
#path .sep{ opacity:0.55; }

/* Avoid duplicate "Racine" button: hide the dedicated root button */
#btn-root{ display:none; }

/* Folder color: handled by SVG color (see .icon.is-folder) */
.icon[data-kind="folder"] .glyph{ background: transparent; border:0; }

/* Settings modal */
.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.55);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1300;
}
.modal-card{
  width:min(520px, 92vw);
  background:rgba(26,26,26,0.96);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:18px;
  box-shadow:0 18px 60px rgba(0,0,0,0.6);
  overflow:hidden;
}
.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,0.10);
}
.modal-title{ font-weight:800; }
.modal-body{ padding:14px; display:flex; flex-direction:column; gap:14px; }
.form-row{ display:flex; flex-direction:column; gap:8px; }
.form-row label{ font-size:12px; color:var(--muted); }
.form-row input[type="color"]{ width:64px; height:36px; border:none; background:none; padding:0; }
.hint{ font-size:12px; color:var(--muted); }
/* UI_POLISH_END */


/* POSTIT_START */
.postit{
  position:absolute;
  width:240px;
  height:200px;
  min-width:180px;
  min-height:140px;
  border-radius:14px;
  background: var(--note-bg, #fff59d);
  border:1px solid rgba(0,0,0,0.18);
  box-shadow:0 16px 40px rgba(0,0,0,0.35);
  overflow:hidden;
  resize:both;
  color:#111;
  z-index:850;
}
.postit.selected{
  outline:2px solid rgba(255,255,255,0.35);
  outline-offset:2px;
}
.postit-head{
  height:34px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 8px;
  border-bottom:1px solid rgba(0,0,0,0.12);
  background: color-mix(in srgb, var(--note-bg, #fff59d) 86%, #000 14%);
  cursor:move;
  user-select:none;
}
.postit-title{
  font-weight:800;
  font-size:12px;
  color:#1a1a1a;
  max-width:150px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.postit-tools{
  display:flex;
  align-items:center;
  gap:6px;
}
.postit-color{
  width:30px;
  height:22px;
  border:0;
  background:none;
  padding:0;
}
.postit-btn{
  background:rgba(0,0,0,0.12);
  border:1px solid rgba(0,0,0,0.18);
  border-radius:9px;
  height:22px;
  padding:0 8px;
  cursor:pointer;
  font-size:12px;
  line-height:1;
  color:#111;
}
.postit-btn:disabled{
  opacity:0.45;
  cursor:not-allowed;
}
.postit-body{
  width:100%;
  height:calc(100% - 34px);
  border:0;
  background:transparent;
  padding:10px 10px 12px;
  resize:none;
  outline:none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:13px;
  line-height:1.35;
  color:#111;
  user-select:text; /* override body user-select:none */
}
.postit-body[readonly]{
  opacity:0.85;
}
/* POSTIT_END */


/* LOG_PANEL_START */
.log-panel{
  position:fixed;
  top:44px;
  right:0;
  width:320px;
  height:calc(100vh - 44px);
  background:var(--panel);
  border-left:1px solid #000;
  z-index:210;
  display:none;
  flex-direction:column;
}
body.log-open .log-panel{display:flex}

body.log-open #desktop{
  width:calc(100vw - 320px);
}

.log-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px;
  border-bottom:1px solid #000;
  background:var(--panel2);
}
.log-title{font-weight:700}
.log-actions{display:flex; gap:8px}
.log-list{
  padding:8px;
  overflow:auto;
  font-size:12px;
  color:var(--muted);
}
.log-item{
  padding:8px;
  border:1px solid rgba(255,255,255,0.06);
  border-radius:10px;
  margin-bottom:8px;
  background:rgba(255,255,255,0.03);
}
.log-item .ts{color:rgba(255,255,255,0.55); margin-bottom:4px}
.log-item .msg{color:var(--text); line-height:1.25}
.log-item .msg a{color:var(--accent); text-decoration:none}
.log-item .msg a:hover{text-decoration:underline}
/* LOG_PANEL_END */

/* Folder window (explorer) */
.folder-win{
  z-index: 60;
  width: 520px;
  height: 420px;
  left: 40px;
  top: 90px;
}
.folder-win .win-body{ overflow:auto; }

/* Resize handle (bottom-right) */
.win-resize{
  position:absolute;
  right:2px;
  bottom:2px;
  width:18px;
  height:18px;
  cursor:nwse-resize;
  opacity:0.35;
}
.win-resize::after{
  content:'';
  position:absolute;
  right:4px;
  bottom:4px;
  width:10px;
  height:10px;
  border-right:2px solid rgba(255,255,255,0.6);
  border-bottom:2px solid rgba(255,255,255,0.6);
}

/* Folder browser list */
.fb-ic{ display:flex; align-items:center; justify-content:center; }
.fb-thumb{
  width:34px;
  height:34px;
  object-fit:cover;
  border-radius:6px;
  border:1px solid rgba(255,255,255,0.12);
}