:root{
  --desk:#c49a6c;
  --desk-dark:#8c6a47;
  --paper:#fffaf0;
  --ink:#222;
  --accent:#3b82f6;
  --green:#16a34a;
  --red:#dc2626;
  --shadow: 0 10px 20px rgba(0,0,0,.2);
  --notes-line-height:22px; /* Ensures ruled lines match text baselines */
}
*{box-sizing:border-box}
html, body { height:100%; }
body{
  margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; color:var(--ink);
  background: radial-gradient(circle at 40% 20%, #e8cfae, #cfaa7c 45%, #b58d62 70%, #9a764f 100%);
  overflow:hidden;
}
/* Desk grid */
.desk{
  position:relative; width:100%; height:100%;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 2px, rgba(255,255,255,.06) 2px 4px),
    linear-gradient(180deg, var(--desk) 0%, var(--desk-dark) 100%);
}
.desk::after{ /* desk vignette */
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow: inset 0 0 200px rgba(0,0,0,.25);
}

/* Draggable items */
.item{ position:absolute; cursor:grab; user-select:none; touch-action:none; }
.item:active{ cursor:grabbing; }
.hint-label{
  position:absolute; top:-22px; left:0; background:rgba(0,0,0,.6); color:white; font-size:12px; padding:2px 6px; border-radius:6px; opacity:0; transform:translateY(6px);
  transition:opacity .2s, transform .2s;
  pointer-events:none; white-space:nowrap;
}
.item:hover .hint-label{ opacity:1; transform:translateY(0); }

/* Notebook */
.notebook{
  width:260px; height:180px; background:linear-gradient(#2f855a, #256d4a); border-radius:12px; box-shadow:var(--shadow);
  border:3px solid #1f4d39; color:white;
}
.notebook::before{ /* spiral */
  content:""; position:absolute; top:10px; left:-8px; width:8px; height:160px;
  background: repeating-linear-gradient(#222 0 10px, #999 10px 14px);
  border-radius:4px 0 0 4px;
}
.notebook .title{ position:absolute; bottom:14px; left:16px; font-weight:700; letter-spacing:.5px; }

/* Document */
.document{
  width:220px; height:160px; background:var(--paper); border-radius:8px; box-shadow:var(--shadow);
  padding:14px; border:2px solid #e6d9bf; transform:rotate(-2deg);
}
.document .stamp{ position:absolute; right:14px; top:14px; border:2px solid #2563eb; color:#2563eb; padding:2px 6px; border-radius:6px; font-size:12px; font-weight:700; }
.document .lines{ font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px; line-height:1.5; color:#333; }

/* Sticky */
.sticky{
  width:140px; height:140px; background:#fde68a; border:1px solid #eab308; border-bottom:20px solid rgba(0,0,0,.1);
  transform:rotate(3deg); box-shadow:var(--shadow); padding:10px; font-family: "Marker Felt", "Comic Sans MS", cursive; font-size:18px;
}

/* Map */
.map{
  width:240px; height:170px; background:#f0f9ff; border:3px solid #0ea5e9; border-radius:10px; box-shadow:var(--shadow); padding:10px; position:absolute;
}
.map .sketch{
  width:100%; height:100%; background:
    radial-gradient(circle at 30% 70%, #86efac 0 20%, transparent 21%),
    radial-gradient(circle at 70% 40%, #86efac 0 18%, transparent 19%),
    radial-gradient(circle at 55% 60%, #86efac 0 10%, transparent 11%),
    radial-gradient(circle at 65% 65%, #60a5fa 0 32%, transparent 33%);
  position:relative; border-radius:6px; overflow:hidden;
}
.pin{ position:absolute; left:58%; top:48%; width:10px; height:10px; background:#ef4444; border-radius:50%; box-shadow:0 0 0 2px white, 0 0 0 4px rgba(239,68,68,.5); }
.district{ position:absolute; bottom:8px; right:8px; background:white; padding:2px 6px; border-radius:4px; font-size:12px; border:1px solid #ddd; }

/* Calendar */
.calendar{ width:200px; height:180px; background:white; border-radius:10px; box-shadow:var(--shadow); border:2px solid #e5e7eb; }
.calendar header{ background:#ef4444; color:white; padding:8px 10px; border-radius:8px 8px 0 0; font-weight:700; }
.calendar .body{ padding:10px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:13px; line-height:1.6; }

/* Quiz panel */
.quiz{
  position:absolute; inset:50% auto auto 50%; transform:translate(-50%, -50%);
  width:min(480px, 90vw); background:#f8fafc; border-radius:16px; box-shadow: 0 30px 60px rgba(0,0,0,.35);
  border:2px solid #e5e7eb; overflow:hidden;
}
.quiz header{ background:linear-gradient(90deg, #111827, #374151); color:white; padding:16px 18px; }
.quiz h1{ margin:0; font-size:18px; }
.quiz header{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.quiz-meta{ font-size:14px; font-weight:600; background:#1f2937; padding:4px 10px; border-radius:20px; line-height:1; box-shadow:0 0 0 1px #334155 inset; }
.quiz-meta .timer-label{ font-variant-numeric: tabular-nums; }

/* Clock desk item */
.clock{ width:150px; height:180px; background:#111827; border:4px solid #1e293b; border-radius:22px; box-shadow:var(--shadow); display:flex; align-items:center; justify-content:flex-start; flex-direction:column; color:#f1f5f9; font-weight:600; font-size:14px; padding:8px 0 10px; gap:4px; }
.clock canvas{ background:#0f172a; border:2px solid #334155; border-radius:50%; box-shadow:inset 0 0 4px #000, 0 2px 4px rgba(0,0,0,.4); }
.clock-face{ font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:20px; letter-spacing:1px; padding-top:2px; }
.clock-face span{ display:inline-block; min-width:70px; text-align:center; }
.quiz .content{ padding:18px; }
.question{ font-size:18px; margin-bottom:12px; }
.options{ display:grid; gap:10px; }
.options button{
  text-align:left; padding:10px 12px; border:2px solid #e5e7eb; background:white; border-radius:10px; cursor:pointer; font-size:16px;
  transition:transform .06s ease, border-color .2s;
}
.options button:hover{ transform:translateY(-1px); border-color:#cbd5e1; }
.options button.selected{ outline:3px solid var(--accent); border-color:var(--accent); }

.quiz .actions{ display:flex; gap:10px; margin-top:14px; }
.btn{ border:none; padding:10px 14px; border-radius:10px; font-weight:700; cursor:pointer; }
.btn.primary{ background:var(--accent); color:white; }
.btn.secondary{ background:#e5e7eb; }

.status{ margin-top:10px; font-size:14px; }
.status.correct{ color:var(--green); }
.status.wrong{ color:var(--red); }

/* Windows for item details */
.window{ position:absolute; top:50%; left:50%; transform:translate(-50%, -50%) scale(.98); width:min(600px, 92vw); max-height:80vh; background:#ffffff; border:2px solid #e5e7eb; border-radius:14px; box-shadow:var(--shadow); display:none; flex-direction:column; }
.window header{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; background:#111827; color:white; border-radius:12px 12px 0 0; }
.window .body{ padding:14px; overflow:auto; }
.close{ background:#ef4444; color:white; border:none; padding:6px 10px; border-radius:8px; cursor:pointer; }

.kbd{ font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background:#f3f4f6; border:1px solid #e5e7eb; padding:2px 6px; border-radius:6px; font-size:12px; }

/* Footer help */
.help{ position:fixed; left:12px; bottom:10px; background:rgba(255,255,255,.8); padding:8px 10px; border-radius:10px; border:1px solid #e5e7eb; box-shadow:var(--shadow); font-size:12px; }

/* --- Added interactive elements --- */
/* Chart widget now auto-expands vertically based on description content */
.chart{ width:340px; min-height:240px; background:#111827; border:3px solid #1e293b; border-radius:14px; box-shadow:var(--shadow); padding:10px; color:white; display:flex; flex-direction:column; overflow:visible; }
.phone{ width:120px; height:220px; background:#1f2937; border:3px solid #111827; border-radius:26px; box-shadow:var(--shadow); padding:8px; display:flex; align-items:center; justify-content:center; color:#f1f5f9; font-size:14px; font-weight:600; }
.phone-screen-mini{ pointer-events:none; }
.tablet{ width:180px; height:140px; background:#0f172a; border:3px solid #1e293b; border-radius:18px; box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center; color:#e2e8f0; font-weight:600; font-size:15px; }
.tablet-label{ pointer-events:none; }
.phone-scroll{ max-height:300px; overflow-y:auto; font-size:13px; border:1px solid #e5e7eb; padding:6px 10px; background:#f8fafc; }
.phone-scroll p{ margin:6px 0; }
.pager{ display:flex; align-items:center; gap:10px; margin-top:10px; }
.small-note{ font-size:12px; color:#475569; }

/* New advanced anti-screenshot elements */
.encrypted, .heatmap, .lenscard, .folders, .film, .lock { background:#1e293b; color:#f1f5f9; border:3px solid #0f172a; border-radius:14px; width:140px; height:110px; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow); font-size:28px; }
.encrypted-icon,.heatmap-thumb,.lenscard-thumb,.folders-thumb,.film-thumb,.lock-thumb{ pointer-events:none; }
.encrypted-shell{ margin-top:10px; border:1px solid #e2e8f0; border-radius:8px; overflow:hidden; }
.heatmap-thumb{ font-size:34px; }
.lens-wrapper{ position:relative; width:480px; max-width:100%; }
.lens-mask{ position:absolute; width:120px; height:120px; border-radius:50%; border:2px solid #3b82f6; pointer-events:none; mix-blend-mode:screen; box-shadow:0 0 0 4px rgba(59,130,246,.3); display:none; }
.folder-nav{ display:flex; gap:12px; align-items:center; margin-bottom:10px; }
.folder-page{ min-height:160px; border:1px dashed #94a3b8; padding:12px; border-radius:8px; font-size:14px; background:#f8fafc; position:relative; }
.folder-page .flash-token{ position:absolute; animation: flashToken 0.8s linear forwards; background:#1d4ed8; color:white; padding:2px 6px; border-radius:6px; font-size:12px; }
@keyframes flashToken{ 0%{opacity:0; transform:scale(.6);} 40%{opacity:1;} 80%{opacity:1;} 100%{opacity:0; transform:scale(.9);} }
.film-thumb{ font-size:30px; }
.lock-thumb{ font-size:30px; }
#filmOverlay{ position:relative; background:#000; display:block; margin-top:6px; border:1px solid #334155; border-radius:6px; }
#filmOverlay[data-hint='show']::after{ content:attr(data-overlay); position:absolute; top:8px; right:8px; background:rgba(0,0,0,.6); color:#f1f5f9; padding:4px 8px; border-radius:6px; font-size:12px; }
.small-note{ font-size:11px; color:#64748b; }

@media (max-width: 800px){
  .item{ transform: scale(.9); transform-origin: top left; }
}

/* iPhone Widget Styles */
.item.iphone-device {
  width: auto;
  height: auto;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.iphone-screen {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.home-screen {
  position: relative;
}

.app-icon:hover {
  transform: scale(1.1) !important;
}

.app-icon:active {
  transform: scale(0.95) !important;
}

.app-view {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.app-content {
  -webkit-overflow-scrolling: touch;
}

.app-content::-webkit-scrollbar {
  width: 3px;
}

.app-content::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.app-content::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.app-content::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* Spreadsheet widget */
.spreadsheet{ width:420px; height:300px; background:#0f172a; border:3px solid #1e293b; border-radius:14px; box-shadow:var(--shadow); padding:10px 10px 12px; color:#f1f5f9; display:flex; flex-direction:column; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.spreadsheet .sheet-title{ font-size:13px; font-weight:700; text-align:center; letter-spacing:.5px; margin-bottom:6px; color:#e2e8f0; }
.spreadsheet .sheet-wrapper{ flex:1; display:flex; flex-direction:column; min-height:0; }
.spreadsheet .sheet-header{ display:flex; background:#1e293b; border:1px solid #334155; border-radius:8px; overflow:hidden; font-size:12px; font-weight:600; }
.spreadsheet .sheet-header-cell{ flex:1; padding:6px 8px; border-right:1px solid #334155; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.spreadsheet .sheet-header-cell:last-child{ border-right:none; }
.spreadsheet .sheet-body-viewport{ position:relative; flex:1; margin-top:6px; background:#0f172a; border:1px solid #334155; border-radius:8px; overflow:auto; scrollbar-width:thin; scrollbar-color:#334155 #0f172a; }
.spreadsheet .sheet-body-viewport::-webkit-scrollbar{ width:10px; height:10px; }
.spreadsheet .sheet-body-viewport::-webkit-scrollbar-track{ background:#0f172a; }
.spreadsheet .sheet-body-viewport::-webkit-scrollbar-thumb{ background:#334155; border-radius:6px; }
.spreadsheet .sheet-body-inner{ position:relative; width:max-content; min-width:100%; }
.spreadsheet .sheet-rows-layer{ position:absolute; left:0; top:0; width:100%; will-change:transform; }
/* Ensure rows stack flush: line-height equals cell height minus vertical padding */
.spreadsheet .sheet-row{ display:flex; font-size:12px; line-height:18px; }
/* Compact cells: no extra vertical spacing between rows */
.spreadsheet .sheet-cell{ flex:1; padding:2px 8px; border-right:1px solid #1e293b; /* remove bottom border for flush stacking */ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.spreadsheet .sheet-cell:last-child{ border-right:none; }
/* Use subtle stripe via overlay gradient instead of borders between rows */
.spreadsheet .sheet-row:hover .sheet-cell{ background:#1e293b; }

/* Notes widget */
.notes{ width:160px; height:140px; background:#fef9c3; border:3px solid #eab308; border-radius:14px; box-shadow:var(--shadow); padding:10px; display:flex; align-items:flex-end; justify-content:flex-start; font-family: ui-sans-serif, system-ui; position:absolute; }
.notes::after{ content:"✎"; position:absolute; top:10px; right:12px; font-size:22px; opacity:.25; }
.notes-label{ font-weight:700; font-size:16px; color:#92400e; letter-spacing:.5px; text-shadow:0 1px 0 rgba(255,255,255,.5); }
.window .notes-header{ font-size:16px; font-weight:700; margin-bottom:6px; }
.notes-toolbar{ display:flex; gap:8px; margin-bottom:6px; }
.notes-rename-input{ padding:6px 8px; border:2px solid #e5e7eb; border-radius:8px; font:13px ui-sans-serif, system-ui; min-width:140px; background:#ffffff; }
.notes-rename-input:focus{ border-color:var(--accent); outline:none; box-shadow:0 0 0 2px rgba(59,130,246,.25); }
.notes-rename-apply{ font-size:12px; padding:6px 10px; }
.notes-delete:disabled{ opacity:.45; cursor:not-allowed; filter:grayscale(40%); }
.notes-textarea{ width:100%; min-height:260px; resize:vertical; font:14px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; line-height:var(--notes-line-height); border:2px solid #e5e7eb; border-radius:10px; padding:2px 12px 12px; /* reduced top padding so first baseline sits just above first rule */ background:#f8fafc; outline:none; background-position:0 0; background-repeat:repeat; }
.notes-textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(59,130,246,.35); }
.notes-header.saved{ animation:notesSavedFlash .4s; }
@keyframes notesSavedFlash{ 0%{color:var(--accent);} 100%{color:inherit;} }
/* Multi-page notebook enhancements */
.notes-window{ background:linear-gradient(#fefaf2,#fff); border:0; border-top:1px solid #e2e8f0; border-radius:0 0 12px 12px; box-shadow:none; padding-top:12px; }
.notes-topbar{ display:flex; align-items:center; gap:10px; margin-bottom:4px; }
.notes-tabs{ display:flex; flex-wrap:wrap; gap:4px; margin:4px 0 8px; }
.notes-tab{ background:#e2e8f0; border:none; padding:4px 10px; border-radius:8px 8px 0 0; cursor:pointer; font-size:12px; font-weight:600; letter-spacing:.3px; position:relative; }
.notes-tab.active{ background:#ffffff; box-shadow:0 -2px 4px rgba(0,0,0,.06), 0 2px 0 0 #ffffff inset; }
.notes-tab:hover{ background:#f1f5f9; }
.notes-tab-add{ background:#3b82f6; color:white; border:none; padding:4px 10px; border-radius:8px; cursor:pointer; font-weight:700; }
.notes-tab-add:hover{ background:#1d4ed8; }
.notes-page-wrap{ position:relative; }
.notes-page-wrap::before{ content:""; position:absolute; top:0; bottom:0; left:42px; width:2px; background:#fecaca; pointer-events:none; }
.notes-textarea{ 
  /* Ruled paper: (line-height - 1px) fill + 1px rule; ensures baseline alignment */
  background:repeating-linear-gradient(
    #f8fafc 0 calc(var(--notes-line-height) - 1px),
    #e2e8f0 calc(var(--notes-line-height) - 1px) var(--notes-line-height)
  );
  padding-left:56px; 
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; 
}
.notes-textarea:focus{ 
  background:repeating-linear-gradient(
    #ffffff 0 calc(var(--notes-line-height) - 1px),
    #e2e8f0 calc(var(--notes-line-height) - 1px) var(--notes-line-height)
  );
}

/* Calendar inline widget */
.calendar-inline{ width:300px; background:#ffffff; border:3px solid #e5e7eb; border-radius:16px; box-shadow:var(--shadow); padding:10px 12px 14px; font-family: ui-sans-serif, system-ui; display:flex; flex-direction:column; gap:6px; }
.calendar-inline .cal-header{ display:flex; align-items:center; justify-content:space-between; font-weight:700; font-size:14px; color:#0f172a; }
.calendar-inline .cal-nav{ background:#e2e8f0; border:none; padding:4px 8px; border-radius:8px; cursor:pointer; font-weight:700; font-size:13px; }
.calendar-inline .cal-nav:hover{ background:#cbd5e1; }
.calendar-inline .cal-title{ flex:1; text-align:center; }
.calendar-inline .cal-weekdays{ display:grid; grid-template-columns:repeat(7,1fr); font-size:11px; font-weight:600; color:#475569; letter-spacing:.5px; }
.calendar-inline .cal-weekdays div{ text-align:center; padding:2px 0 4px; }
.calendar-inline .cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.calendar-inline .cal-filler{ height:34px; }
.calendar-inline .cal-day{ height:34px; background:#f1f5f9; border:1px solid #e2e8f0; border-radius:8px; cursor:pointer; font-size:12px; font-weight:600; display:flex; align-items:center; justify-content:center; position:relative; transition:background .15s, transform .15s; }
.calendar-inline .cal-day.has-events{ background:linear-gradient(135deg,#3b82f6 0%, #1d4ed8 100%); border-color:#1d4ed8; color:#ffffff; font-weight:700; box-shadow:0 0 0 2px #1e3a8a inset, 0 2px 4px rgba(0,0,0,.25); }
.calendar-inline .cal-day.has-events:hover{ background:linear-gradient(135deg,#2563eb 0%, #1e40af 100%); }
.calendar-inline .cal-day:hover{ background:#dbeafe; transform:translateY(-2px); }
.calendar-inline .cal-event-panel{ position:absolute; top:6px; left:100%; margin-left:12px; width:220px; background:#ffffff; border:2px solid #e5e7eb; border-radius:12px; padding:10px 12px 12px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:8px; z-index:20; }
.calendar-inline .cal-event-header{ display:flex; align-items:center; justify-content:space-between; font-size:13px; }
.calendar-inline .cal-ep-close{ background:#ef4444; color:white; border:none; border-radius:8px; padding:4px 8px; cursor:pointer; font-size:12px; }
.calendar-inline .cal-event-list{ list-style:none; margin:0; padding:0; max-height:120px; overflow:auto; font-size:12px; }
.calendar-inline .cal-event-list li{ background:#f1f5f9; border:1px solid #e2e8f0; padding:4px 6px; border-radius:6px; margin-bottom:4px; font-size:12px; }
.calendar-inline .cal-event-list li:last-child{ margin-bottom:0; }