:root {
  --font: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, sans-serif;
  --sf: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0; font-family: var(--font);
  background: #0a0a12;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Desk */
.desk {
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center;
  padding: 28px 12px 40px;
  background:
    radial-gradient(1200px 600px at 20% -10%, #ff2e6322, transparent),
    radial-gradient(1000px 700px at 90% 10%, #7b2ff733, transparent),
    linear-gradient(160deg, #0c0c18 0%, #14101f 50%, #0a0a12 100%);
  position: relative;
}
.desk-glow {
  position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(600px 400px at 50% 40%, #5b2c8f22, transparent);
  animation: pulseGlow 8s ease-in-out infinite;
}
@keyframes pulseGlow { 0%,100%{opacity:.6} 50%{opacity:1} }

.page-title {
  font-weight: 800; font-size: clamp(28px, 6vw, 46px);
  color: #fff; margin: 4px 0 2px; letter-spacing: -1.5px;
  background: linear-gradient(90deg,#ff6a3d,#ff2e63,#7b2ff7);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: fadeDown .6s ease both;
}
.page-sub {
  color: #b7b3c9; font-weight: 300; font-size: 14px; margin: 0 0 22px;
  text-align: center; animation: fadeDown .6s .1s ease both;
}
@keyframes fadeDown { from{opacity:0;transform:translateY(-12px)} to{opacity:1;transform:none} }

/* Phone shell */
.phone-shell {
  position: relative;
  width: min(360px, 92vw);
  aspect-ratio: 360 / 760;
  border-radius: 56px;
  padding: 12px;
  background: linear-gradient(145deg, #b9bcc4, #6c6f78 40%, #3a3c42);
  box-shadow: 0 40px 80px -20px rgba(0,0,0,.7), 0 0 0 2px #2a2a2e, inset 0 0 3px rgba(255,255,255,.4);
  animation: floatUp .7s .15s ease both;
}
@keyframes floatUp { from{opacity:0;transform:translateY(30px) scale(.96)} to{opacity:1;transform:none} }

.btn-power, .btn-vol-up, .btn-vol-down, .btn-mute {
  position: absolute; background: linear-gradient(90deg,#4a4c52,#2c2e33);
  border-radius: 3px; cursor: pointer;
}
.btn-power { right: -3px; top: 190px; width: 4px; height: 68px; }
.btn-vol-up { left: -3px; top: 165px; width: 4px; height: 46px; }
.btn-vol-down { left: -3px; top: 220px; width: 4px; height: 46px; }
.btn-mute { left: -3px; top: 120px; width: 4px; height: 30px; }

/* Screen */
.phone-screen {
  position: relative; width: 100%; height: 100%;
  border-radius: 45px; overflow: hidden;
  font-family: var(--sf);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.5);
}
.brightness-overlay {
  position: absolute; inset: 0; background: #000; z-index: 60; pointer-events: none;
  transition: opacity .2s;
}
.dynamic-island {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 95px; height: 26px; background: #000; border-radius: 20px; z-index: 40;
}
.asleep {
  position: absolute; inset: 0; background: #000; z-index: 70;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.asleep span { color: #333; font-size: 12px; letter-spacing: 1px; }

/* Status bar */
.status-bar {
  position: absolute; top: 0; left: 0; right: 0; height: 46px; z-index: 30;
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 15px 26px 0; font-family: var(--sf);
}
.sb-time { font-weight: 700; font-size: 15px; margin-left: 6px; }
.sb-right { display: flex; align-items: center; gap: 5px; }
.sb-dots { display: flex; gap: 2px; align-items: flex-end; height: 11px; }
.sb-dots i { width: 3px; border-radius: 1px; display: block; }
.sb-dots i:nth-child(1){height:5px} .sb-dots i:nth-child(2){height:7px}
.sb-dots i:nth-child(3){height:9px} .sb-dots i:nth-child(4){height:11px}
.sb-wifi { font-size: 12px; }
.sb-batt { width: 24px; height: 12px; border: 1.5px solid; border-radius: 3px; padding: 1.5px; position: relative; }
.sb-batt::after { content:''; position:absolute; right:-3px; top:3.5px; width:2px; height:5px; background:currentColor; border-radius:0 2px 2px 0; }
.sb-batt-fill { height: 100%; border-radius: 1px; transition: width .4s; }

.low-batt-toast {
  position: absolute; top: 52px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,.75); color: #fff; padding: 8px 16px; border-radius: 20px;
  font-size: 12px; z-index: 55; backdrop-filter: blur(10px);
  animation: toastIn .4s ease both;
}
@keyframes toastIn { from{opacity:0;transform:translate(-50%,-14px)} to{opacity:1;transform:translate(-50%,0)} }

/* Lock screen */
.lock-screen {
  position: absolute; inset: 0; z-index: 20; cursor: pointer;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 78px 0 40px; animation: fadeIn .4s ease;
}
.lock-top { text-align: center; }
.lock-lock { font-size: 18px; margin-bottom: 12px; }
.lock-date { font-size: 16px; font-weight: 500; opacity: .9; }
.lock-time { font-size: 76px; font-weight: 300; letter-spacing: -2px; line-height: 1; margin-top: 4px; text-shadow: 0 2px 20px rgba(0,0,0,.2); }
.lock-hint { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lock-bar { width: 120px; height: 5px; border-radius: 3px; opacity: .85; animation: bob 1.8s ease-in-out infinite; }
.lock-hint span { font-size: 13px; opacity: .8; }
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

/* iOS home layer */
.ios-layer { position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; }
.home-screen {
  position: absolute; inset: 0; padding: 56px 18px 0;
  display: flex; flex-direction: column; animation: homeIn .45s ease;
}
@keyframes homeIn { from{opacity:0;transform:scale(1.06)} to{opacity:1;transform:none} }

.widgets { display: flex; gap: 14px; margin-bottom: 22px; }
.widget {
  flex: 1; aspect-ratio: 1; border-radius: 22px; padding: 14px;
  backdrop-filter: blur(20px); box-shadow: 0 4px 16px rgba(0,0,0,.15);
  display: flex; flex-direction: column;
}
.w-weather-top { display: flex; justify-content: space-between; font-weight: 600; }
.w-city { font-size: 12px; }
.w-temp { font-size: 20px; }
.w-weather-ic { font-size: 30px; margin: auto 0 4px; }
.w-weather-cond { font-size: 12px; opacity: .8; }
.cal-widget { background: #fff !important; }
.cal-dow { color: #ff3b30; font-weight: 800; font-size: 12px; }
.cal-num { color: #111; font-weight: 300; font-size: 42px; line-height: 1; }
.cal-note { color: #888; font-size: 11px; margin-top: auto; }

.app-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 16px 6px; padding: 0 4px;
}
.app-icon-wrap, .dock-icon-wrap {
  background: none; border: none; cursor: pointer; padding: 0;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
}
.app-icon {
  width: 56px; height: 56px; border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 8px rgba(0,0,0,.2);
  transition: transform .12s;
}
.app-icon-wrap:active .app-icon, .dock-icon-wrap:active .app-icon { transform: scale(.88); }
.app-glyph { font-size: 30px; }
.app-label { color: #fff; font-size: 11px; text-shadow: 0 1px 4px rgba(0,0,0,.5); font-weight: 400; }

/* Dock */
.dock {
  position: absolute; bottom: 22px; left: 12px; right: 12px;
  border-radius: 30px; padding: 12px; z-index: 12;
  display: flex; justify-content: space-around;
  backdrop-filter: blur(24px); box-shadow: 0 4px 20px rgba(0,0,0,.2);
}
.dock-icon { width: 54px; height: 54px; }

/* home indicator */
.home-indicator {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 130px; height: 5px; border-radius: 3px; z-index: 80; cursor: pointer;
  opacity: .7;
}

/* App container */
.app-container {
  position: absolute; inset: 0; z-index: 25; background: #f2f2f7;
  padding-top: 46px; padding-bottom: 22px;
  display: flex; flex-direction: column;
  animation: appOpen .35s cubic-bezier(.2,.7,.3,1);
}
@keyframes appOpen { from{opacity:0;transform:scale(.6);border-radius:60px} to{opacity:1;transform:none;border-radius:45px} }
.mini { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.mini-header, .notes-header, .clock-header, .weather-app > *:first-child,
.photos-header, .jokes-header, .settings-header {
  font-family: var(--sf);
}

/* Notes */
.notes-app { background: #fff; }
.notes-header { padding: 8px 18px; }
.notes-title { font-size: 26px; font-weight: 800; color: #111; }
.notes-area {
  flex: 1; border: none; outline: none; resize: none;
  padding: 8px 18px; font-size: 16px; line-height: 1.5; color: #222;
  font-family: var(--sf); background: #fff;
}
.notes-count { padding: 6px 18px; font-size: 11px; color: #aaa; }

/* Calculator */
.calc-app { background: #000; padding: 0 12px 10px; }
.calc-display {
  flex: 1; display: flex; align-items: flex-end; justify-content: flex-end;
  color: #fff; font-size: 60px; font-weight: 300; padding: 0 12px 14px; overflow: hidden;
}
.calc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.calc-btn {
  border: none; border-radius: 50%; aspect-ratio: 1; font-size: 24px; cursor: pointer;
  font-family: var(--sf); transition: filter .1s, transform .06s;
}
.calc-btn:active { transform: scale(.94); filter: brightness(1.3); }
.calc-btn.dk { background: #333; color: #fff; }
.calc-btn.gray { background: #a5a5a5; color: #000; }
.calc-btn.orange { background: #ff9f0a; color: #fff; }
.calc-btn.orange.active { background: #fff; color: #ff9f0a; }
.calc-btn.zero { aspect-ratio: auto; grid-column: span 2; border-radius: 40px; text-align: left; padding-left: 26px; }

/* Clock */
.clock-app { background: #000; color: #fff; align-items: center; justify-content: center; }
.clock-header { font-size: 22px; font-weight: 700; margin-bottom: 30px; }
.stopwatch-display { font-size: 64px; font-weight: 200; font-variant-numeric: tabular-nums; letter-spacing: -1px; }
.clock-btns { display: flex; gap: 40px; margin-top: 44px; }
.clk-btn { width: 78px; height: 78px; border-radius: 50%; border: 2px solid; font-size: 15px; cursor: pointer; font-family: var(--sf); }
.clk-btn.reset { background: #333; border-color: #444; color: #fff; }
.clk-btn.start { background: #0a2e13; border-color: #0a2e13; color: #30d158; }
.clk-btn.stop { background: #330a0a; border-color: #330a0a; color: #ff453a; }

/* Weather */
.weather-app { background: linear-gradient(180deg, #4a90e2, #1c3d6b); color: #fff; padding: 0 18px; }
.weather-search { padding: 8px 0; }
.weather-search input {
  width: 100%; padding: 10px 14px; border-radius: 12px; border: none;
  background: rgba(255,255,255,.25); color: #fff; font-size: 15px; font-family: var(--sf);
}
.weather-search input::placeholder { color: rgba(255,255,255,.7); }
.weather-loading { color: #fff; padding: 20px; text-align: center; opacity: .8; }
.weather-body { display: flex; flex-direction: column; align-items: center; overflow-y: auto; }
.weather-city { font-size: 22px; font-weight: 500; margin-top: 8px; }
.weather-icon { font-size: 60px; margin: 4px 0; }
.weather-temp { font-size: 68px; font-weight: 200; line-height: 1; }
.weather-sub { opacity: .85; font-size: 13px; margin-bottom: 16px; }
.weather-forecast { width: 100%; border-top: 1px solid rgba(255,255,255,.25); padding-top: 8px; }
.wf-day { display: flex; align-items: center; padding: 7px 4px; font-size: 15px; }
.wf-day span:first-child { flex: 1; }
.wf-emoji { font-size: 20px; width: 40px; text-align: center; }
.wf-hi { width: 40px; text-align: right; font-weight: 600; }
.wf-lo { width: 40px; text-align: right; opacity: .6; }

/* Photos */
.photos-app { background: #fff; padding: 0 8px; }
.photos-header { font-size: 26px; font-weight: 800; color: #111; padding: 6px 10px; }
.photos-grid { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; overflow-y: auto; align-content: start; }
.photo-thumb { width: 100%; aspect-ratio: 1; object-fit: cover; cursor: pointer; border-radius: 2px; }
.photo-viewer {
  position: absolute; inset: 0; background: #000; z-index: 90; cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px;
}
.photo-viewer img { max-width: 100%; max-height: 80%; object-fit: contain; }
.photo-close { color: #888; font-size: 12px; }

/* Jokes / Tips */
.jokes-app { background: linear-gradient(180deg,#fff8e1,#fff); align-items: center; padding: 0 20px; }
.jokes-header { font-size: 26px; font-weight: 800; color: #ff8f00; padding: 10px; }
.joke-card {
  background: #fff; border-radius: 20px; padding: 24px; margin: 10px 0;
  box-shadow: 0 8px 24px rgba(255,143,0,.18); text-align: center; flex: 1;
  display: flex; flex-direction: column; justify-content: center; width: 100%;
}
.joke-emoji { font-size: 44px; margin-bottom: 14px; }
.joke-text { font-size: 16px; color: #333; line-height: 1.5; margin: 0; font-family: var(--sf); }
.joke-btn {
  background: #ff9f0a; color: #fff; border: none; border-radius: 24px;
  padding: 14px 40px; font-size: 16px; font-weight: 600; cursor: pointer;
  margin: 14px 0 8px; font-family: var(--sf); box-shadow: 0 6px 16px rgba(255,159,10,.4);
}
.joke-btn:active { transform: scale(.96); }

/* Settings */
.settings-app { background: #f2f2f7; padding: 0 0 8px; overflow-y: auto; }
.settings-header { font-size: 26px; font-weight: 800; color: #111; padding: 6px 18px 12px; }
.settings-group { background: #fff; border-radius: 14px; margin: 0 14px 18px; overflow: hidden; }
.setting-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px; border-bottom: 1px solid #eee; font-size: 15px; color: #111; font-family: var(--sf);
}
.setting-row:last-child { border-bottom: none; }
.setting-row.col { flex-direction: column; align-items: stretch; gap: 8px; }
.setting-row.col input { width: 100%; accent-color: #34c759; }
.toggle {
  width: 50px; height: 30px; border-radius: 20px; background: #e0e0e0; border: none;
  cursor: pointer; padding: 2px; transition: background .2s; position: relative;
}
.toggle.on { background: #34c759; }
.toggle .knob { display: block; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.2); transition: transform .2s; }
.toggle.on .knob { transform: translateX(20px); }
.wall-picker { display: flex; gap: 10px; padding: 14px; flex-wrap: wrap; }
.wall-swatch { width: 44px; height: 62px; border-radius: 10px; border: 3px solid transparent; cursor: pointer; }
.wall-swatch.sel { border-color: #007aff; }
.about-title { padding: 12px 16px 4px; font-size: 12px; color: #888; font-weight: 600; text-transform: uppercase; }
.about-line { padding: 4px 16px; font-size: 14px; color: #333; font-family: var(--sf); }
.about-line.small { color: #999; font-style: italic; font-size: 12px; padding-bottom: 12px; }
.reset-btn { display: block; width: calc(100% - 32px); margin: 8px 16px 14px; padding: 12px; background: #fff; color: #ff3b30; border: none; font-size: 15px; font-weight: 600; cursor: pointer; border-top: 1px solid #eee; font-family: var(--sf); }

/* Placeholder */
.placeholder-app { background: #fff; align-items: center; justify-content: center; text-align: center; padding: 30px; }
.ph-glyph { font-size: 64px; margin-bottom: 14px; }
.ph-name { font-size: 24px; font-weight: 800; color: #111; margin-bottom: 10px; }
.ph-msg { font-size: 15px; color: #666; line-height: 1.5; font-family: var(--sf); }

/* Footer */
.foot { margin-top: 28px; color: #6a6580; font-size: 13px; font-weight: 300; z-index: 1; }
.foot a { color: #ff6a3d; text-decoration: none; font-weight: 600; }
.foot a:hover { text-decoration: underline; }