:root {
  --desktop: #008080;
  --desktop-dark: #0b6b6b;
  --window: #c0c0c0;
  --window-light: #ffffff;
  --window-mid: #dfdfdf;
  --window-dark: #808080;
  --window-deep: #404040;
  --title-a: #000080;
  --title-b: #1084d0;
  --text: #111111;
  --muted: #444444;
  --button-face: #c0c0c0;
  --button-hover: #d8d8d8;
  --warm: #7a2f00;
}

:root {
  --cursor-arrow: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2716%27%20height%3D%2716%27%20shape-rendering%3D%27crispEdges%27%3E%3Crect%20width%3D%2716%27%20height%3D%2716%27%20fill%3D%27none%27/%3E%3Cpath%20d%3D%27M1%201h1v1H1zM2%202h1v1H2zM3%203h1v1H3zM4%204h1v1H4zM5%205h1v1H5zM6%206h1v1H6zM7%207h1v1H7zM8%208h1v1H8zM3%204h1v1H3zM3%205h1v1H3zM4%205h1v1H4zM4%206h1v1H4zM5%206h1v1H5zM5%207h1v1H5zM6%207h1v1H6zM6%208h1v1H6zM7%208h1v1H7zM7%209h1v1H7zM8%209h1v1H8zM4%208h1v1H4zM4%209h1v1H4zM4%2010h1v1H4zM5%2010h1v1H5zM5%2011h1v1H5zM6%2011h1v1H6zM6%2012h1v1H6zM7%2012h1v1H7z%27%20fill%3D%27%23000%27/%3E%3Cpath%20d%3D%27M2%201h1v1H2zM2%203h1v1H2zM3%202h1v1H3zM3%206h1v1H3zM4%203h1v1H4zM4%207h1v1H4zM5%204h1v1H5zM5%208h1v1H5zM6%205h1v1H6zM6%209h1v1H6zM7%206h1v1H7zM7%2010h1v1H7zM8%207h1v1H8zM8%2010h1v1H8zM5%209h1v1H5zM6%2010h1v1H6z%27%20fill%3D%27%23fff%27/%3E%3C/svg%3E") 0 0, default;
  --cursor-hand: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2716%27%20height%3D%2716%27%20shape-rendering%3D%27crispEdges%27%3E%3Crect%20width%3D%2716%27%20height%3D%2716%27%20fill%3D%27none%27/%3E%3Cpath%20d%3D%27M6%201h1v7H6zM8%202h1v6H8zM10%203h1v5h-1zM12%204h1v5h-1zM5%208h1v5H5zM6%208h7v5H6zM7%2013h5v1H7zM8%2014h3v1H8z%27%20fill%3D%27%23fff%27/%3E%3Cpath%20d%3D%27M5%201h1v7H5zM6%200h2v1H6zM8%201h2v1H8zM10%202h2v1h-2zM12%203h2v1h-2zM4%208h1v5H4zM5%207h8v1H5zM13%204h1v9h-1zM6%2013h1v1H6zM12%208h1v5h-1zM7%2014h1v1H7zM11%2014h1v1h-1zM8%2015h3v1H8z%27%20fill%3D%27%23000%27/%3E%3C/svg%3E") 5 0, pointer;
  --cursor-text: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2716%27%20height%3D%2716%27%20shape-rendering%3D%27crispEdges%27%3E%3Crect%20width%3D%2716%27%20height%3D%2716%27%20fill%3D%27none%27/%3E%3Cpath%20d%3D%27M6%201h4v1H6zM7%202h2v12H7zM6%2014h4v1H6z%27%20fill%3D%27%23000%27/%3E%3C/svg%3E") 8 8, text;
}

html, body {
  cursor: var(--cursor-arrow);
}

a, button, .desktop-icon, .task-button, .title-button, .icon, summary, label[for], [role="button"], .start-btn, .task-btn, .win-button, .btn, .about-trigger {
  cursor: var(--cursor-hand);
}

input, textarea, [contenteditable="true"] {
  cursor: var(--cursor-text);
}
* { box-sizing:border-box; }
html { background: var(--desktop); }
body {
  margin:0; min-height:100vh; font-family:Tahoma, "MS Sans Serif", Arial, sans-serif; color:var(--text);
  background: linear-gradient(rgba(255,255,255,.05), rgba(0,0,0,.08)), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(180deg, var(--desktop) 0%, var(--desktop-dark) 100%);
  background-size:auto, 24px 24px, 24px 24px, auto; padding-bottom:38px;
}
.desktop-icons { position:fixed; top:12px; left:10px; display:grid; gap:12px; z-index:1; }
.desktop-icon { width:78px; text-decoration:none; color:#fff; text-align:center; font-size:12px; text-shadow:1px 1px 0 #000; }
.icon-art { display:block; font-size:28px; margin-bottom:4px; }
.window-shell { max-width:1220px; margin:18px auto 0; padding:0 14px 28px; position:relative; z-index:2; }
.win-titlebar, .mini-titlebar { display:flex; align-items:center; justify-content:space-between; gap:8px; background: linear-gradient(90deg, var(--title-a), var(--title-b)); color:#fff; font-weight:700; }
.win-titlebar { padding:6px 8px; border-top:2px solid var(--window-light); border-left:2px solid var(--window-light); border-right:2px solid var(--window-deep); }
.panel, .inside-window { background: var(--window); border-top:2px solid var(--window-light); border-left:2px solid var(--window-light); border-right:2px solid var(--window-deep); border-bottom:2px solid var(--window-deep); box-shadow:1px 1px 0 var(--window-dark); }
.drag-fake { cursor:move; user-select:none; }
.title-left { display:flex; align-items:center; gap:8px; }
.title-buttons { display:flex; gap:4px; }
.win-btn, .title-close, .about-trigger, .btn, .top-links a { display:inline-flex; align-items:center; justify-content:center; min-height:34px; padding:0 12px; text-decoration:none; color:var(--text); background:var(--button-face); border-top:2px solid var(--window-light); border-left:2px solid var(--window-light); border-right:2px solid var(--window-deep); border-bottom:2px solid var(--window-deep); box-shadow:1px 1px 0 var(--window-dark); font:inherit; font-size:14px; cursor:pointer; }
.start-btn, .task-btn { text-decoration:none; color:#000; background:var(--button-face); border-top:2px solid var(--window-light); border-left:2px solid var(--window-light); border-right:2px solid var(--window-deep); border-bottom:2px solid var(--window-deep); font:inherit; cursor:pointer; }
.win-btn, .title-close { min-width:20px; height:20px; padding:0; box-shadow:none; }
.win-btn:hover, .title-close:hover, .about-trigger:hover, .btn:hover, .top-links a:hover, .start-btn:hover, .task-btn:hover { background: var(--button-hover); }
.win-btn:active, .title-close:active, .about-trigger:active, .btn:active, .top-links a:active, .start-btn:active, .task-btn:active { border-top-color:var(--window-deep); border-left-color:var(--window-deep); border-right-color:var(--window-light); border-bottom-color:var(--window-light); box-shadow:none; }
.editor-header { padding:6px; display:flex; justify-content:space-between; gap:16px; align-items:flex-start; }
.editor-header > div { flex:1; background:var(--window-mid); border:1px solid var(--window-dark); padding:14px 16px 18px; }
.eyebrow { display:inline-block; padding:2px 6px; border:1px solid var(--window-dark); background:#ffffe1; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--warm); }
.editor-header h1 { margin:12px 0 10px; font-size:34px; line-height:1.02; }
.editor-header p { margin:0; color:var(--muted); max-width:720px; line-height:1.5; }
.top-links { display:grid; gap:8px; min-width:190px; }
.editor-layout { display:grid; grid-template-columns:1.05fr .95fr; gap:14px; margin-top:14px; }
.form-panel, .preview-panel, .output-panel { padding:0; }
.box-pad { padding:14px 16px 16px; background:var(--window-mid); border:1px solid var(--window-dark); }
.output-panel { margin-top:14px; }
.mini-titlebar { padding:4px 8px; font-size:13px; }
.section-head { display:flex; justify-content:space-between; gap:10px; align-items:center; margin-bottom:14px; }
.section-head h2 { margin:0; font-size:24px; }
.tiny-note, .editor-message { color:var(--muted); font-size:13px; }
.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
label { display:grid; gap:6px; }
label span { font-size:13px; font-weight:700; }
label.full { grid-column:1 / -1; }
input[type="text"], textarea { width:100%; border-top:2px solid var(--window-deep); border-left:2px solid var(--window-deep); border-right:2px solid var(--window-light); border-bottom:2px solid var(--window-light); padding:10px; background:#fff; color:#000; font:inherit; resize:vertical; }
.checkbox-row { display:flex; align-items:center; gap:10px; min-height:40px; }
.button-row { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.button-row.compact { margin-top:0; }
.editor-message { min-height:22px; margin-top:12px; }
.preview-area { background:#fff; border-top:2px solid var(--window-deep); border-left:2px solid var(--window-deep); border-right:2px solid var(--window-light); border-bottom:2px solid var(--window-light); padding:12px; min-height:260px; }
.preview-area .post-card { background:var(--window-mid); border-top:2px solid var(--window-light); border-left:2px solid var(--window-light); border-right:2px solid var(--window-deep); border-bottom:2px solid var(--window-deep); }
.preview-area .box-pad { border:none; padding:14px 16px 16px; }
.preview-area .mini-titlebar { margin-bottom:0; }
.preview-area .post-card.featured-template .box-pad { outline:2px dotted var(--title-a); outline-offset:-6px; }
.preview-area .post-date { display:inline-flex; margin-bottom:10px; min-height:22px; padding:2px 8px; border:1px solid var(--window-dark); background:#efefef; font-size:12px; }
.preview-area h3 { margin:0 0 10px; font-size:24px; }
.preview-area p { margin:0; color:var(--muted); line-height:1.5; }
.preview-area .read-more { display:inline-flex; margin-top:14px; }
.html-output { width:100%; border-top:2px solid var(--window-deep); border-left:2px solid var(--window-deep); border-right:2px solid var(--window-light); border-bottom:2px solid var(--window-light); padding:10px; background:#fff; color:#000; font:13px/1.45 "Courier New", monospace; }
code { font-family:"Courier New", monospace; background:#ffffe1; border:1px solid var(--window-dark); padding:1px 5px; }
.about-modal[hidden] { display:none !important; }
.about-modal { position:fixed; inset:0; background:rgba(0,0,0,.35); display:grid; place-items:center; z-index:20; }
.about-window { width:min(420px, calc(100vw - 24px)); }
.about-body { background:var(--window-mid); border:1px solid var(--window-dark); }
.about-actions { display:flex; justify-content:flex-end; margin-top:16px; }

.taskbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34px;
  background: var(--window);
  border-top: 2px solid var(--window-light);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  z-index: 30;
}

.start-btn,
.task-btn {
  min-height: 26px;
  padding: 0 12px;
  text-decoration: none;
  color: #000;
  background: var(--button-face);
  border-top: 2px solid var(--window-light);
  border-left: 2px solid var(--window-light);
  border-right: 2px solid var(--window-deep);
  border-bottom: 2px solid var(--window-deep);
  font: inherit;
  display: inline-flex;
  align-items: center;
}

.start-btn { font-weight: 700; }

.task-btn.active {
  box-shadow: inset 1px 1px 0 var(--window-dark);
  border-top-color: var(--window-deep);
  border-left-color: var(--window-deep);
  border-right-color: var(--window-light);
  border-bottom-color: var(--window-light);
}

.taskbar-clock {
  margin-left: auto;
  min-width: 64px;
  text-align: center;
  padding: 4px 8px;
  background: #dfdfdf;
  border-top: 2px solid var(--window-deep);
  border-left: 2px solid var(--window-deep);
  border-right: 2px solid var(--window-light);
  border-bottom: 2px solid var(--window-light);
  font-size: 12px;
}

@media (max-width: 980px) {
  .desktop-icons { display:none; }
  .editor-header, .editor-layout { grid-template-columns:1fr; display:grid; }
  .top-links { min-width:0; grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .window-shell { padding:10px 8px 42px; }
  .editor-header h1 { font-size:28px; }
  .form-grid { grid-template-columns:1fr; }
  .top-links { grid-template-columns:1fr; }
  .top-links a, .btn { width:100%; }
  .button-row { flex-direction:column; }
  .task-btn { display:none; }
}

/* taskbar parity + retro icon behavior */
.taskbar { height: 34px; padding: 4px 6px; gap: 6px; }
.start-btn, .task-btn {
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0 12px;
  font-size: 12px;
}
.start-btn { min-width: 74px; font-weight: 700; }
.task-btn { min-width: 128px; }
.taskbar-clock { min-width: 64px; height: 26px; display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; font-size: 12px; }
.desktop-icon { text-decoration: none; cursor: pointer; }
.desktop-icon:hover span:last-child { text-decoration: underline; }
.about-window { cursor: default; }


/* persistent shell embedded mode */
body.embedded {
  padding-bottom: 0 !important;
}
body.embedded .desktop-icons,
body.embedded .taskbar,
body.embedded .start-menu,
body.embedded .shell-status {
  display: none !important;
}
body.embedded .window-shell,
body.embedded .blog-shell,
body.embedded .editor-shell,
body.embedded .container,
body.embedded .desktop-shell {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.embedded .inside-window { min-height: auto !important; }



/* embedded-app cleanup */
body.embedded,
body[data-app] {
  background: #c0c0c0 !important;
}

body.embedded {
  padding-bottom: 0 !important;
}

body.embedded .desktop-icons,
body.embedded .taskbar,
body.embedded .start-menu,
body.embedded .shell-status {
  display: none !important;
}

body.embedded .title-bar,
body.embedded .win-titlebar,
body.embedded .game-titlebar,
body.embedded .title-buttons,
body.embedded .title-btn,
body.embedded .win-btn {
  display: none !important;
}

body.embedded .window,
body.embedded .window-shell,
body.embedded .blog-shell,
body.embedded .editor-shell,
body.embedded .container,
body.embedded .desktop-shell,
body.embedded .inside-window {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: #c0c0c0 !important;
}

body.embedded .window-body,
body.embedded .inside-window {
  padding: 14px !important;
  background: #c0c0c0 !important;
  min-height: auto !important;
}



/* stronger embedded app viewport fix */
html.embedded-shell-app,
html.embedded-shell-app body,
html.embedded-shell-app body.embedded {
  background: #c0c0c0 !important;
  background-image: none !important;
}

html.embedded-shell-app body.embedded {
  min-height: 100vh !important;
}

html.embedded-shell-app body.embedded .inside-window,
html.embedded-shell-app body.embedded .window-body,
html.embedded-shell-app body.embedded .blog-layout,
html.embedded-shell-app body.embedded .editor-layout,
html.embedded-shell-app body.embedded .grid,
html.embedded-shell-app body.embedded .quick-panel {
  background-image: none !important;
}



/* embedded internal scroll fix */
html.embedded-shell-app,
html.embedded-shell-app body,
html.embedded-shell-app body.embedded {
  background: #c0c0c0 !important;
  background-image: none !important;
  overflow: auto !important;
  height: auto !important;
  min-height: 100% !important;
}

html.embedded-shell-app body.embedded .desktop-icons,
html.embedded-shell-app body.embedded .taskbar,
html.embedded-shell-app body.embedded .start-menu,
html.embedded-shell-app body.embedded .shell-status,
html.embedded-shell-app body.embedded .title-bar,
html.embedded-shell-app body.embedded .win-titlebar,
html.embedded-shell-app body.embedded .game-titlebar,
html.embedded-shell-app body.embedded .title-buttons,
html.embedded-shell-app body.embedded .title-btn,
html.embedded-shell-app body.embedded .win-btn {
  display: none !important;
}