/* Search icon for Find page */
.tile-glyph[data-icon="globe"]{ -webkit-mask-image: url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.globe.wire.svg'); mask-image: url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.globe.wire.svg'); }
.tile-glyph[data-icon="search"]{ -webkit-mask-image: url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.magnify.svg'); mask-image: url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.magnify.svg'); }

/* Hide scrollbar on mobile */
* {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}
*::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* Windows Phone Demo Styles */
:root{
  --accent: #00a8e6; /* cyan like WP */
  --bg: #000000;
  --fg: #ffffff;
  --muted: #bdbdbd;
  --status-h: 36px; /* enlarged further for better readability */
  --tile-gap: 6px;  /* authentic gutter */
  --safe-top: env(safe-area-inset-top);
  --safe-right: env(safe-area-inset-right);
  --safe-bottom: env(safe-area-inset-bottom);
  --safe-left: env(safe-area-inset-left);
  --vh: 1vh; /* updated from JS to fix mobile bars */
  --unit: 56px; /* tile base size, updated via JS */
  /* Animation system (tuned for WP8-like pacing) */
  --ease-out: cubic-bezier(.16,.84,.24,1);
  --ease-in-out: cubic-bezier(.25,.46,.45,.94);
  --ease-smooth: cubic-bezier(.4,0,.2,1);
  --dur-fast: .28s;
  --dur-med: .55s;
  --dur-slow: .62s;
  --dur-press: .52s;
}
/* GLOBAL: hard-disable selection and long-press callouts anywhere in the app */
html, body, #app, *{
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
  -khtml-user-select: none !important;
  -webkit-tap-highlight-color: transparent;
}
/* Hide text caret universally to avoid any selection caret on mobile */
html, body, #app, *{ caret-color: transparent; }
/* If selection slips through, make it invisible */
::selection{ background: transparent; color: inherit; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height:100%; }
body {
  margin:0;
  /* Prefer classic Windows Phone typography */
  font-family: "Segoe WP", "Segoe UI", "Segoe UI Symbol", Tahoma, Arial, sans-serif;
  color: var(--fg);
  background: var(--bg);
}
/* Light theme support via settings */
#app.theme-light{
  --bg: #ffffff;
  --fg: #000000;
  --muted: #686868;
}
body.no-js .fullscreen-cta { display:none !important; }

/* Lock Screen */
.lock-screen{
  position:fixed; inset:0; display:flex; flex-direction:column; justify-content:space-between; z-index:10;
  transition: opacity .35s ease, transform .35s ease; will-change: opacity, transform;
}
.lock-screen.hidden{ opacity:0; pointer-events:none; transform: translateY(-4%); }
.lock-wallpaper{
  position:absolute; inset:0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.lock-content{ 
  position:relative; 
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: calc(40px + var(--safe-top)) 24px calc(40px + var(--safe-bottom)) 24px;
}
.lock-time-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: auto;
  margin-bottom: 60px;
}
.lock-time{ 
  font-size: clamp(96px, 20vw, 144px); 
  font-weight: 200; 
  letter-spacing: -2px;
  line-height: 0.9;
  font-family: "Segoe WP Light", "Segoe UI Light", sans-serif;
  text-align: left;
}
.lock-day{
  font-size: clamp(28px, 6vw, 42px);
  font-weight: 300;
  color: var(--fg);
  text-transform: lowercase;
  margin-top: 8px;
  font-family: "Segoe WP Semilight", "Segoe UI Semilight", sans-serif;
  text-align: left;
}
.lock-date{ 
  font-size: clamp(28px, 6vw, 42px); 
  font-weight: 300;
  color: var(--fg);
  text-transform: lowercase;
  margin-top: 4px;
  font-family: "Segoe WP Semilight", "Segoe UI Semilight", sans-serif;
  text-align: left;
}
.lock-notifs{ 
  position: absolute;
  top: calc(40px + var(--safe-top));
  right: 24px;
  display:flex; 
  gap:12px; 
  justify-content:flex-end; 
}
.lock-notifs .notif{ width:18px; height:18px; background:#fff; opacity:.9; -webkit-mask-size: contain; -webkit-mask-repeat:no-repeat; -webkit-mask-position:center; mask-size: contain; mask-repeat:no-repeat; mask-position:center; }
.lock-notifs .notif[data-icon="messages"]{ -webkit-mask-image:url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.message.svg'); mask-image:url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.message.svg'); }
.lock-notifs .notif[data-icon="phone"]{ -webkit-mask-image:url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.phone.svg'); mask-image:url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.phone.svg'); }
.lock-notifs .notif[data-icon="calendar"]{ -webkit-mask-image:url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.calendar.svg'); mask-image:url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.calendar.svg'); }
.lock-hint{ 
  position: absolute;
  bottom: calc(20px + var(--safe-bottom));
  left: 50%;
  transform: translateX(-50%);
  font-size:14px; 
  color:#cccccc; 
  opacity:.9; 
}

/* Start Screen */
.start-screen{ position:fixed; inset:0; padding-top: calc(var(--status-h) + var(--safe-top)); opacity:0; pointer-events:none; transition: opacity .3s; background:#000; }
.start-screen.active{ opacity:1; pointer-events:auto; }

/* App list hint arrow */
.app-list-hint{
  position:absolute; left:50%; bottom:8px; transform: translateX(-50%);
  background:transparent; color:#9a9a9a; border:none; font-size:18px; opacity:.8;
  display: none;
}

/* Start wallpaper & transparent tiles */
.start-wallpaper{ position:absolute; inset:0; background:
  radial-gradient(1200px 800px at 80% 10%, rgba(0,168,230,0.24), transparent 55%),
  radial-gradient(900px 600px at 20% 90%, rgba(255,80,80,0.18), transparent 60%),
  linear-gradient(180deg, #0b0b0b, #000 35% 65%, #0b0b0b);
  z-index:0; opacity:0; transition: opacity .25s ease;
  pointer-events: none; /* never block interactions under wallpaper */
}
.transparent-tiles .start-wallpaper{ opacity:1; }

/* Status bar */
.status-bar{
  position:absolute; top:0; left:0; right:0; height: calc(var(--status-h) + var(--safe-top));
  padding-top: var(--safe-top); display:flex; align-items:center; justify-content:space-between;
  color:#fafafa; font-size:15px; letter-spacing:.15px; opacity:.98; padding-inline:14px; transition: transform .25s ease, opacity .25s ease;
}
.status-bar .left, .status-bar .right{ display:flex; align-items:center; }
.status-bar .left{ gap:6px; }
.status-bar .right{ gap:12px; }
.status-bar .time{ font-weight:400; display:inline-block; font-size:18px; }
/* Larger status icons */
.status-bar .signal::before{ content:""; display:inline-block; width:48px; height:28px; background: currentColor; -webkit-mask: url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.connection.quality.veryhigh.svg') center/contain no-repeat; mask: url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.connection.quality.veryhigh.svg') center/contain no-repeat; opacity:.98; vertical-align: middle; }
.status-bar .connection-4g::before{ content:""; display:inline-block; width:40px; height:28px; background: currentColor; -webkit-mask: url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.connection.4g.svg') center/contain no-repeat; mask: url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.connection.4g.svg') center/contain no-repeat; opacity:.98; vertical-align: middle; }
.status-bar .battery::before{ content:""; display:inline-block; width:62px; height:38px; background: currentColor; -webkit-mask: url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.battery.3.svg') center/contain no-repeat; mask: url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.battery.3.svg') center/contain no-repeat; opacity:1; vertical-align: middle; }

/* Tiles */
.tiles-grid{
  position:absolute; top: calc(var(--status-h) + var(--safe-top)); left:0; right:0; bottom:0;
  padding: 0 12px calc(14px + var(--safe-bottom));
  overflow-y: auto; overscroll-behavior: contain;
    display:grid; gap: var(--tile-gap);
    grid-template-columns: repeat(4, var(--unit));
    grid-auto-rows: var(--unit);
  /* Use normal row flow for predictable, intuitive tile movement - no dense packing chaos */
  grid-auto-flow: row;
  justify-content: start; /* WP8 starts tiles from the left */
    z-index:5; /* ensure tiles are above decorative layers */
  transition: transform 0.05s linear;
}
/* Prevent accidental text selection/callout and scrolling gestures while editing */
.tiles-grid, .tile{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.tiles-grid.editing, .tiles-grid.editing .tile{ touch-action: none; }
/* Extra hardening to prevent annoying text/image selection or callouts while dragging on mobile */
.tiles-grid, .tiles-grid *, .tile, .tile *{
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}
/* Remove tap highlight on mobile */
.tile, .resize-handle, .unpin-handle{ -webkit-tap-highlight-color: transparent; }
/* Avoid text caret flashes on long press */
.tile{ caret-color: transparent; }

/* Hide tiles when exiting from app */
.tiles-grid.tiles-hidden .tile {
  opacity: 0;
  visibility: hidden;
}

/* Authentic Windows Phone tile entrance animation - only on app exit */
/* Row-based staggering: top-to-bottom waterfall effect */
.tiles-grid.animate-from-app .tile{ 
  animation: tileInFromApp 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  visibility: visible;
}
/* Row 1 tiles (positions 1-4) */
.tiles-grid.animate-from-app .tile:nth-child(1){ animation-delay: 0s; }
.tiles-grid.animate-from-app .tile:nth-child(2){ animation-delay: 0.02s; }
.tiles-grid.animate-from-app .tile:nth-child(3){ animation-delay: 0.04s; }
.tiles-grid.animate-from-app .tile:nth-child(4){ animation-delay: 0.06s; }
/* Row 2 tiles (position 5) */
.tiles-grid.animate-from-app .tile:nth-child(5){ animation-delay: 0.08s; }
/* Row 3-4 tiles (positions 6-7) */
.tiles-grid.animate-from-app .tile:nth-child(6){ animation-delay: 0.12s; }
.tiles-grid.animate-from-app .tile:nth-child(7){ animation-delay: 0.14s; }
/* Row 5 tiles (positions 8-10) */
.tiles-grid.animate-from-app .tile:nth-child(8){ animation-delay: 0.16s; }
.tiles-grid.animate-from-app .tile:nth-child(9){ animation-delay: 0.18s; }
.tiles-grid.animate-from-app .tile:nth-child(10){ animation-delay: 0.20s; }
/* Row 6 tiles - wide calendar (position 11) */
.tiles-grid.animate-from-app .tile:nth-child(11){ animation-delay: 0.24s; }
/* Row 7-8 tiles (positions 12-15) */
.tiles-grid.animate-from-app .tile:nth-child(12){ animation-delay: 0.28s; }
.tiles-grid.animate-from-app .tile:nth-child(13){ animation-delay: 0.30s; }
.tiles-grid.animate-from-app .tile:nth-child(14){ animation-delay: 0.32s; }
.tiles-grid.animate-from-app .tile:nth-child(15){ animation-delay: 0.34s; }

@keyframes tileInFromApp{ 
  0% { 
    transform: translate(50px, 20px); 
    opacity: 0; 
  }
  60% {
    opacity: 0.8;
  }
  100% { 
    transform: translate(0, 0); 
    opacity: 1; 
  } 
}

/* Tile exit animation when entering an app */
.tiles-grid.animate-to-app .tile:not(.tile-active-press){ 
  animation: tileOutToApp 0.35s cubic-bezier(0.55, 0.055, 0.675, 0.19) both;
}
.tiles-grid.animate-to-app .tile:nth-child(1):not(.tile-active-press){ animation-delay: 0s; }
.tiles-grid.animate-to-app .tile:nth-child(2):not(.tile-active-press){ animation-delay: 0.01s; }
.tiles-grid.animate-to-app .tile:nth-child(3):not(.tile-active-press){ animation-delay: 0.02s; }
.tiles-grid.animate-to-app .tile:nth-child(4):not(.tile-active-press){ animation-delay: 0.03s; }
.tiles-grid.animate-to-app .tile:nth-child(5):not(.tile-active-press){ animation-delay: 0.04s; }
.tiles-grid.animate-to-app .tile:nth-child(6):not(.tile-active-press){ animation-delay: 0.05s; }
.tiles-grid.animate-to-app .tile:nth-child(7):not(.tile-active-press){ animation-delay: 0.06s; }
.tiles-grid.animate-to-app .tile:nth-child(8):not(.tile-active-press){ animation-delay: 0.07s; }
.tiles-grid.animate-to-app .tile:nth-child(9):not(.tile-active-press){ animation-delay: 0.08s; }
.tiles-grid.animate-to-app .tile:nth-child(10):not(.tile-active-press){ animation-delay: 0.09s; }
.tiles-grid.animate-to-app .tile:nth-child(11):not(.tile-active-press){ animation-delay: 0.10s; }
.tiles-grid.animate-to-app .tile:nth-child(12):not(.tile-active-press){ animation-delay: 0.11s; }
.tiles-grid.animate-to-app .tile:nth-child(13):not(.tile-active-press){ animation-delay: 0.12s; }
.tiles-grid.animate-to-app .tile:nth-child(14):not(.tile-active-press){ animation-delay: 0.13s; }
.tiles-grid.animate-to-app .tile:nth-child(15):not(.tile-active-press){ animation-delay: 0.14s; }

/* Keep pressed tile visible during exit animation */
.tiles-grid.animate-to-app .tile.tile-active-press{
  animation: none;
  opacity: 1;
  z-index: 100;
}

@keyframes tileOutToApp{ 
  0% { 
    transform: translate(0, 0); 
    opacity: 1; 
  }
  100% { 
    transform: translate(-30px, -15px); 
    opacity: 0; 
  } 
}

/* Legacy unlock animation kept for backward compatibility */
.tiles-grid.animate-in .tile{ animation: tileIn var(--dur-slow) var(--ease-out) both; }
.tiles-grid.animate-in .tile:nth-child(1){ animation-delay: .02s; }
.tiles-grid.animate-in .tile:nth-child(2){ animation-delay: .04s; }
.tiles-grid.animate-in .tile:nth-child(3){ animation-delay: .06s; }
.tiles-grid.animate-in .tile:nth-child(4){ animation-delay: .08s; }
.tiles-grid.animate-in .tile:nth-child(5){ animation-delay: .10s; }
.tiles-grid.animate-in .tile:nth-child(6){ animation-delay: .12s; }
.tiles-grid.animate-in .tile:nth-child(7){ animation-delay: .14s; }
.tiles-grid.animate-in .tile:nth-child(8){ animation-delay: .16s; }
.tiles-grid.animate-in .tile:nth-child(9){ animation-delay: 0.24s; }
.tiles-grid.animate-in .tile:nth-child(10){ animation-delay: 0.27s; }
.tiles-grid.animate-in .tile:nth-child(11){ animation-delay: 0.30s; }
.tiles-grid.animate-in .tile:nth-child(12){ animation-delay: 0.33s; }
.tiles-grid.animate-in .tile:nth-child(13){ animation-delay: 0.36s; }
.tiles-grid.animate-in .tile:nth-child(14){ animation-delay: 0.39s; }
.tiles-grid.animate-in .tile:nth-child(15){ animation-delay: 0.42s; }
@keyframes tileIn{ 
  from{ 
    transform: translateX(-60px); 
    opacity: 0; 
  } 
  to{ 
    transform: translateX(0); 
    opacity: 1; 
  } 
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  border-radius: 0;
  padding: 6px 0 4px 0;
  border: none;
  color: #fff;
  background: #111;
  /* Smooth, fluid transform with refined easing */
  transition: transform var(--dur-med) var(--ease-smooth), filter var(--dur-fast) linear, background var(--dur-fast) linear;
  overflow: hidden;
  will-change: transform;
  contain: layout paint style;
}
.transparent-tiles .tile{ background: rgba(17,17,17,.65); }
.slide-chevron{ margin:12px auto 0 auto; width:24px; height:12px; position:relative; opacity:.8; display: none; }
.slide-chevron::before{ content:""; position:absolute; left:0; right:0; top:0; bottom:0; background:#fff; -webkit-mask: linear-gradient(135deg,transparent 45%,#000 45% 55%,transparent 55%) left/50% 100% no-repeat, linear-gradient(225deg,transparent 45%,#000 45% 55%,transparent 55%) right/50% 100% no-repeat; mask: linear-gradient(135deg,transparent 45%,#000 45% 55%,transparent 55%) left/50% 100% no-repeat, linear-gradient(225deg,transparent 45%,#000 45% 55%,transparent 55%) right/50% 100% no-repeat; animation: chevronPulse 1.6s infinite ease-in-out; }
@keyframes chevronPulse{ 0%,100%{ transform: translateY(0); opacity:.6; } 50%{ transform: translateY(4px); opacity:1; } }
.tile:active{ filter: brightness(.97); }
/* Localized press sink visual (follows touch point) */
.tile.pressing::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  /* subtle localized darkening around press point */
  background:
    radial-gradient(circle at var(--px,50%) var(--py,50%), rgba(0,0,0,.28) 0%, rgba(0,0,0,.18) 26%, rgba(0,0,0,0) 62%);
  opacity:.9;
  transition: opacity var(--dur-fast) var(--ease-out);
}
/* Faster transform while pressed/releasing for snappier feel */
.tile.pressing{
  transition: transform 140ms var(--ease-out), filter 140ms var(--ease-out);
}
/* Light theme tuning */
#app.theme-light .tile.pressing::before{
  background:
    radial-gradient(circle at var(--px,50%) var(--py,50%), rgba(0,0,0,.18) 0%, rgba(0,0,0,.12) 28%, rgba(0,0,0,0) 62%);
}
/* WP8-style numeric badge: positioned to the right of the icon, vertically centered */
.tile[data-badge]::after{
  content: attr(data-badge);
  position: absolute;
  top: 48%;
  left: 59%;
  transform: translate(-50%, -50%);
  margin-left: 22px; /* Position to the right of the icon */
  font-family: "Segoe UI", "Segoe WP", Tahoma, sans-serif;
  font-weight: 400;
  line-height: 1;
  color: #fff;
  background: none;
  padding: 0;
  min-width: 0;
  height: auto;
  pointer-events: none;
  z-index: 3;
  white-space: nowrap;
  font-size: 32px;
  transition: all 0.2s ease;
}

/* Keep icon centered - no shifting needed */

/* Size-specific badge adjustments */
.tile-small[data-badge]::after{ 
  font-size: 38px;
  margin-left: 18px;
}

.tile-medium[data-badge]::after{ 
  font-size: 65px;
  margin-left: 26px;
}

.tile-wide[data-badge]::after,
.tile-tall[data-badge]::after{ 
  font-size: 42px;
  margin-left: 38px;
}

/* Adjust icon position when there's a notification badge */
.tile[data-badge] .tile-glyph {
  margin-left: -8px;
  margin-right: 8px;
}

.tile-small[data-badge] .tile-glyph {
  margin-left: -10px;
  margin-right: 6px;
}

.tile-medium[data-badge] .tile-glyph {
  margin-left: -10px;
  margin-right: 10px;
}

.tile-wide[data-badge] .tile-glyph,
.tile-tall[data-badge] .tile-glyph {
  margin-left: -12px;
  margin-right: 12px;
}

/* Keep badges visible in edit mode */
.tiles-grid.editing .tile[data-badge]::after{
  opacity: 1 !important;
  z-index: 4;
}

.tile-photos{ position:relative; overflow:hidden; }
.tile-photos .tile-title{
  position:absolute; left:8px; bottom:8px; z-index:2;
  /* Bound the title within the tile and prevent overflow */
  right:8px; display:block; padding:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Photos tile 3D flip (front/back) */
.tile-photos .ph-flip{ 
  position: absolute; 
  inset: 0; 
  transform-style: preserve-3d; 
  animation: phFlip 12s infinite ease-in-out; 
}
.tile-photos .ph-face{ position:absolute; inset:0; backface-visibility: hidden; }
.tile-photos .ph-face.back{ transform: rotateY(180deg); }
.live-photo{ position: absolute; inset: 0; background: #111; background-size: cover; background-position: center; }

/* Flip animation */
@keyframes phFlip{ 
  0%, 47% { transform: rotateY(0deg); } 
  53%, 97% { transform: rotateY(180deg); } 
  100% { transform: rotateY(0deg); } 
}

/* Cycle through all 4 gallery images - change happens during flip transition when face is perpendicular */
.tile-photos .live-photo.ph-1 {
  animation: changeImage1 24s steps(1, end) infinite;
}

.tile-photos .live-photo.ph-2 {
  animation: changeImage2 24s steps(1, end) infinite;
}

@keyframes changeImage1 {
  0%, 49.99% { background-image: url('gallery images/city-7510927_1280.jpg'); }
  50%, 100% { background-image: url('gallery images/hummingbird-9940395_1280.jpg'); }
}

@keyframes changeImage2 {
  0%, 49.99% { background-image: url('gallery images/fallow-deer-5749914_1280.jpg'); }
  50%, 100% { background-image: url('gallery images/vietnam-9831328_1280.png'); }
}

/* People tile */
.tile-people{ position:relative; overflow:hidden; }
.tile-people .people-flip{ position:absolute; inset:0; transform-style: preserve-3d; animation: peopleFlip 10s infinite ease-in-out; }
.tile-people .people-face{ position:absolute; inset:0; backface-visibility: hidden; }
.tile-people .people-face.back{ transform: rotateY(180deg); }
.people-grid{ position:absolute; inset:0; display:grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap:6px; padding:8px; }
.people-grid .face{ display:grid; place-items:center; border-radius:50%; font-weight:700; background:#0d0d0d; color:#fff; opacity:.95; animation: faceFloat 8s ease-in-out infinite; }
.people-grid .f1{ background: linear-gradient(135deg,#00a8e6,#004b7a); animation-delay:.2s; }
.people-grid .f2{ background: linear-gradient(135deg,#e53935,#6d1312); animation-delay:.6s; }
.people-grid .f3{ background: linear-gradient(135deg,#26a69a,#0f453f); animation-delay:1s; }
.people-grid .f4{ background: linear-gradient(135deg,#8e24aa,#3b0f49); animation-delay:1.4s; }
@keyframes faceFloat{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-4px); } }
@keyframes peopleFlip{ 0%,45%{ transform: rotateY(0); } 55%,95%{ transform: rotateY(180deg); } 100%{ transform: rotateY(0); } }

/* 3x3 grid shutter animation overlay usable on any small tile */
.tile-anim-grid-shutter{ position:relative; }
.tile-anim-grid-shutter .grid9{
  position:absolute; inset:0; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr);
  gap:2px; padding:4px; z-index:1;
}
.tile-anim-grid-shutter .grid9 .cell{
  background: rgba(255,255,255,.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
  transform-origin:center;
  /* Default open; JS will randomly toggle .closed for a subtle WP-like effect */
  transform: scaleY(1);
  transition: transform .5s cubic-bezier(.2,.65,.2,1);
}
/* Closed cells (randomized via JS) */
.tile-anim-grid-shutter .grid9 .cell.closed{ transform: scaleY(0); }

/* ensure foreground contrast inside animated grid on light theme */
#app.theme-light .tile-anim-grid-shutter .grid9 .cell{ background: rgba(0,0,0,.12); box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }

/* Calendar tile */
.tile-calendar{ position:relative; }
.calendar-face{ position:absolute; inset:0; padding:8px; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; }
.cal-dow{ font-size:12px; opacity:.9; text-transform: lowercase; position:absolute; left:8px; top:8px; }
.cal-day{ font-size: clamp(42px, 8.6vw, 64px); font-weight:300; line-height:.9; }
.cal-month{ font-size:12px; opacity:.9; text-transform: lowercase; }

/* Weather tile */
.tile-weather{ position:relative; overflow:hidden; }
.weather-face{ position:absolute; inset:0; padding:10px; display:flex; flex-direction:column; justify-content:space-between; }
.weather-row{ display:flex; align-items:center; gap:10px; }
.weather-glyph{ width:40px; height:40px; background:#fff; opacity:.95; -webkit-mask: url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.weather.sun.svg') center/contain no-repeat; mask: url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.weather.sun.svg') center/contain no-repeat; }
.weather-temp{ font-size:34px; font-weight:300; }
.weather-city{ font-size:12px; opacity:.9; text-transform: uppercase; }

.tile .tile-glyph {
  display: block;
  margin: 0 auto 4px auto;
  /* Base size scales with grid unit */
  width: calc(var(--unit) * 0.70);
  height: calc(var(--unit) * 0.70);
  background: #fff;
  opacity: .95;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  /* Smoothly animate when tile size changes */
  transition: width var(--dur-med) var(--ease-smooth), height var(--dur-med) var(--ease-smooth);
}
.tile-small .tile-glyph {
  width: calc(var(--unit) * 0.60);
  height: calc(var(--unit) * 0.60);
}
.tile-medium .tile-glyph {
  width: calc(var(--unit) * 0.95);
  height: calc(var(--unit) * 0.95);
}
.tile-wide .tile-glyph, .tile-tall .tile-glyph {
  width: calc(var(--unit) * 1.20);
  height: calc(var(--unit) * 1.20);
}
.tile .tile-title{
  margin-top:auto;
  font-size:14px; /* slightly larger per request */
  letter-spacing:.02em;
  opacity:.92;
  text-transform: capitalize; /* First letter uppercase */
  font-family: "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif;
  font-weight: 600; /* slightly less bold */
  /* Left align consistently and keep a small left/right inset */
  text-align:left; padding:0 6px 0 8px;
  /* Prevent label from spilling outside the tile */
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Editing (resize) mode like WP8 */
.tiles-grid.editing .tile{ animation: none; }
.tiles-grid.editing .tile{ transition: transform var(--dur-slow) var(--ease-in-out), filter var(--dur-fast) ease; }
.tiles-grid.editing{ position:absolute; }
/* subtle global dim behind tiles while editing */
.tiles-grid.editing::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background: radial-gradient(40% 35% at 70% 20%, rgba(0,0,0,.18), transparent 60%),
              radial-gradient(50% 40% at 25% 85%, rgba(0,0,0,.14), transparent 65%);
}
/* Non-selected tiles darken and float slightly */
.tiles-grid.editing .tile:not(.selected){
  filter: brightness(.5) saturate(.8) contrast(.95);
  transform: translateY(4px) scale(.85);
  animation: tileFloatShadow 3s ease-in-out infinite;
}
/* Ensure selected tile stays crisp and above others */
.tiles-grid.editing .tile.selected{ filter:none !important; transform:none !important; z-index:2; }

/* Keep badges visible in edit mode */
.tiles-grid.editing .tile[data-badge]::after{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 4;
}

/* Subtle floating effect using shadow pulse */
@keyframes tileFloatShadow {
  0%, 100% { box-shadow: 0 10px 20px rgba(0,0,0,.45); }
  50% { box-shadow: 0 14px 28px rgba(0,0,0,.50); }
}

/* Small offset variations to make tiles feel "in the air" */
.tiles-grid.editing .tile.float-1{ transform: translate(-3px, 2px) scale(.85); animation: tileFloat1 3.2s ease-in-out infinite; }
.tiles-grid.editing .tile.float-2{ transform: translate(2px, 3px) scale(.85); animation: tileFloat2 2.8s ease-in-out infinite; }
.tiles-grid.editing .tile.float-3{ transform: translate(3px, -1px) scale(.85); animation: tileFloat3 3.5s ease-in-out infinite; }
.tiles-grid.editing .tile.float-4{ transform: translate(-2px, -2px) scale(.85); animation: tileFloat4 3.1s ease-in-out infinite; }
.tiles-grid.editing .tile.float-5{ transform: translate(1px, 4px) scale(.85); animation: tileFloat5 2.9s ease-in-out infinite; }
.tiles-grid.editing .tile.float-6{ transform: translate(-4px, 1px) scale(.85); animation: tileFloat6 3.3s ease-in-out infinite; }

@keyframes tileFloat1 {
  0%, 100% { box-shadow: 0 8px 18px rgba(0,0,0,.40); }
  50% { box-shadow: 0 12px 24px rgba(0,0,0,.48); }
}

@keyframes tileFloat2 {
  0%, 100% { box-shadow: 0 9px 19px rgba(0,0,0,.42); }
  50% { box-shadow: 0 13px 25px rgba(0,0,0,.50); }
}

@keyframes tileFloat3 {
  0%, 100% { box-shadow: 0 10px 20px rgba(0,0,0,.45); }
  50% { box-shadow: 0 14px 26px rgba(0,0,0,.52); }
}

@keyframes tileFloat4 {
  0%, 100% { box-shadow: 0 11px 21px rgba(0,0,0,.43); }
  50% { box-shadow: 0 15px 27px rgba(0,0,0,.51); }
}

@keyframes tileFloat5 {
  0%, 100% { box-shadow: 0 9px 19px rgba(0,0,0,.41); }
  50% { box-shadow: 0 13px 25px rgba(0,0,0,.49); }
}

@keyframes tileFloat6 {
  0%, 100% { box-shadow: 0 10px 20px rgba(0,0,0,.44); }
  50% { box-shadow: 0 14px 26px rgba(0,0,0,.53); }
}
.resize-handle{
  position:absolute; right:4px; bottom:4px; width:28px; height:28px; border:none; border-radius:50%;
  background:#000; color:#fff; display:none; align-items:center; justify-content:center;
  box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0,0,0,.5);
  overflow: hidden; /* clip inner icon when overscaled */
}
.resize-handle::before{
  content:"";
  position:absolute; inset:0; display:block; background:#fff; /* fill circle with icon */
  /* Use longhand mask props for better iOS Safari reliability */
  -webkit-mask-image: url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.arrow.expand.svg');
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-image: url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.arrow.expand.svg');
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  pointer-events: none;
}
.resize-handle, .unpin-handle{ opacity:0; transform: scale(.85); transition: opacity .18s ease, transform .18s ease; }
.tiles-grid.editing .tile.selected .resize-handle{ display:flex; opacity:1; transform: none; }
.resize-hint{ display:none; }

/* Unpin handle shown in edit mode */
.unpin-handle{
  position:absolute; right:4px; top:4px; width:28px; height:28px; border:none; border-radius:50%;
  background:#000; color:#fff; display:none; align-items:center; justify-content:center;
  box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0,0,0,.5);
  overflow: hidden; /* clip inner icon when overscaled */
}
.unpin-handle::before{
  content:"";
  position:absolute; inset:0; display:block; background:#fff; /* fill circle with icon */
  /* Use longhand mask props for better iOS Safari reliability */
  -webkit-mask-image: url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.pin.remove.svg');
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-image: url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.pin.remove.svg');
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  pointer-events: none;
}

/* Removed transform hacks; absolute fill + longhand mask props ensure consistent size on iOS */
.tiles-grid.editing .tile.selected .unpin-handle{ display:flex; opacity:1; transform: none; }

/* Drag & drop visuals */
.tiles-grid.dragging{ cursor: grabbing; overflow: hidden; }
.tile.dragging{ 
  z-index: 5; 
  box-shadow: 0 16px 36px rgba(0,0,0,.5), 0 8px 16px rgba(0,0,0,.3); 
  transform: scale(1.05) !important; 
  filter:none !important; 
  opacity:.96; 
  animation: none !important;
  transition: box-shadow .25s var(--ease-smooth), opacity .2s ease !important;
}
.tile.dragging{ pointer-events: none; }
.tile.placeholder{ 
  background: rgba(255,255,255,0.12) !important; 
  border: 2px solid transparent !important;
  box-shadow: inset 0 0 24px rgba(255,255,255,0.08) !important;
  animation: placeholderPulse 1.2s ease-in-out infinite !important;
  transition: all .35s var(--ease-smooth) !important;
}

@keyframes placeholderPulse {
  0%, 100% { opacity: 0.5; transform: scale(0.97); }
  50% { opacity: 0.85; transform: scale(1.01); }
}
.tile .ripple{
  position:absolute; left:0; top:0; border-radius:50%; pointer-events:none; opacity:.35;
  transform: translate(-50%, -50%) scale(0);
  background: radial-gradient(closest-side, rgba(255,255,255,.45), rgba(255,255,255,.25) 60%, rgba(255,255,255,0) 70%);
  mix-blend-mode: screen;
}
.tile .ripple.show{ animation: rippleAnim var(--dur-press) var(--ease-out) forwards; }
@keyframes rippleAnim{ to{ transform: translate(-50%, -50%) scale(1); opacity: 0; } }
.tile.drop-target{ outline: 2px solid rgba(255,255,255,.35); outline-offset: -2px; }

/* Show labels on medium tiles; hide only on small via rule below */

/* WP8 authentic mode: single accent for accent tiles */
#app.wp8-authentic .tile[class*="accent-"]{ background: var(--accent) !important; }
/* In authentic mode, keep the Start black and tiles opaque */
#app.wp8-authentic .start-wallpaper{ opacity: 0 !important; }
#app.wp8-authentic.transparent-tiles .tile{ background: var(--accent) !important; }

/* Centered, large glyph for Phone and Messages (WP-style) */
.tile-phone, .tile-messages{ position:relative; }
.tile-phone .tile-glyph, .tile-messages .tile-glyph {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--unit) * 0.78);
  height: calc(var(--unit) * 0.78);
  min-width: 38px;
  min-height: 38px;
  /* allow scaling beyond previous cap when tile is resized */
  max-width: none;
  max-height: none;
  -webkit-mask-position: center;
  mask-position: center;
}
.tile-phone .tile-title, .tile-messages .tile-title {
  align-self: flex-start;
}

/* Hide labels on all small tiles */
.tile-small .tile-title{ display:none; }

/* Center Games glyph better on its tile */
.tile-games{ position: relative; }
.tile-games .tile-glyph{
  position:absolute;
  left:50%;
  top:50%; /* perfectly centered vertically */
  transform: translate(-50%, -50%);
}

/* Make Games icon larger by tile size */
.tile-games.tile-small .tile-glyph{
  width: calc(var(--unit) * 1.00);
  height: calc(var(--unit) * 1.00);
}
.tile-games.tile-medium .tile-glyph{
  width: calc(var(--unit) * 1.45);
  height: calc(var(--unit) * 1.45);
}
.tile-games.tile-wide .tile-glyph,
.tile-games.tile-tall .tile-glyph{
  width: calc(var(--unit) * 1.65);
  height: calc(var(--unit) * 1.65);
}

/* Size-responsive icons for Phone/Messages */
.tile-phone.tile-small .tile-glyph,
.tile-messages.tile-small .tile-glyph{
  width: calc(var(--unit) * 0.83);
  height: calc(var(--unit) * 0.83);
}
.tile-phone.tile-medium .tile-glyph,
.tile-messages.tile-medium .tile-glyph{
  width: calc(var(--unit) * 1.35);
  height: calc(var(--unit) * 1.35);
}
.tile-phone.tile-wide .tile-glyph,
.tile-messages.tile-wide .tile-glyph,
.tile-phone.tile-tall .tile-glyph,
.tile-messages.tile-tall .tile-glyph{
  width: calc(var(--unit) * 1.55);
  height: calc(var(--unit) * 1.55);
}

/* Size variations with smooth transitions */
.tile-small{ grid-column: span 1; grid-row: span 1; }
.tile-medium{ grid-column: span 2; grid-row: span 2; }
.tile-wide{ grid-column: span 4; grid-row: span 2; }
.tile-tall{ grid-column: span 2; grid-row: span 4; }

/* Smooth animation when tile size changes */
.tile.resizing {
  animation: tileResize var(--dur-med) var(--ease-smooth);
  z-index: 10; /* bring to front during resize */
}

@keyframes tileResize {
  0% {
    transform: scale(0.92);
    filter: brightness(1.08);
  }
  50% {
    transform: scale(1.04);
    filter: brightness(1.05);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

/* Accent colors */
.accent-cyan{ background: #00a8e6; }
.accent-green{ background: #2ecc71; }
.accent-magenta{ background: #d33682; }
.accent-blue{ background: #1e88e5; }
.accent-orange{ background: #fb8c00; }
.accent-purple{ background: #8e24aa; }
.accent-teal{ background: #26a69a; }
.accent-red{ background: #e53935; }

/* Pages */
.pages{ position:fixed; inset:0; display:none; z-index:20; }
.pages.open{ display:block; }
.page{ position:absolute; inset:0; background:#000; opacity:0; transform: translateX(12%); transition: transform .25s ease, opacity .25s ease; pointer-events: none; }
.page.active{ opacity:1; transform:none; pointer-events: auto; }

.app-bar{ height:56px; padding-top: var(--safe-top); display:flex; align-items:center; gap:10px; padding-inline:12px; background:#000; border-bottom:1px solid rgba(255,255,255,.08); }
.app-bar h1{ font-size:20px; margin:0; font-weight:300; text-transform: lowercase; letter-spacing:.02em; }
.app-bar .back{ background:transparent; border:none; color:#fff; font-size:22px; line-height:1; }

.page-content{ padding:14px; padding-bottom: var(--safe-bottom); }
.page-content.center{ display:grid; place-items:center; height: calc(100vh - 56px - var(--safe-bottom)); }
/* Remove bottom command bar across pages */
.command-bar{ display:none !important; }
.camera-frame{ width:72%; max-width:360px; aspect-ratio:3/4; border-radius:16px; border:2px dashed rgba(255,255,255,.25); display:grid; place-items:center; font-size:64px; opacity:.7; }

.grid-photos{ display:grid; grid-template-columns: repeat(3, 1fr); gap:6px; }
.grid-photos .ph{ aspect-ratio:1; border-radius:8px; background:#111; background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.grid-photos .ph1{ background-image:url('assets/photos/p1.svg'); }
.grid-photos .ph2{ background-image:url('assets/photos/p2.svg'); }
.grid-photos .ph3{ background-image:url('assets/photos/p3.svg'); }
.grid-photos .ph4{ background-image:url('assets/photos/p4.svg'); }
.grid-photos .ph5{ background-image:url('assets/photos/p5.svg'); }
.grid-photos .ph6{ background-image:url('assets/photos/p6.svg'); }

.settings-list{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.settings-list li{ padding:10px 12px; background:#0d0d0d; border-radius:0; border:1px solid rgba(255,255,255,.06); }
.settings-list button{ background:#1e88e5; color:#fff; border:none; padding:6px 10px; border-radius:6px; }
.settings-list select{ background:#181818; color:#fff; border:1px solid #222; padding:6px 8px; border-radius:6px; }
#app.theme-light .settings-list li{ background:#f2f2f2; border-color: #0001; }
#app.theme-light .settings-list select{ background:#fff; color:#000; border-color:#ccc; }

/* Fullscreen button */
.fullscreen-cta{
  position:fixed; left:12px; right:12px; bottom: calc(12px + var(--safe-bottom));
  background: #00a8e6; color:#00141b; font-weight:700; border:none; border-radius:12px;
  padding:14px; box-shadow: 0 6px 20px rgba(0,168,230,.35);
}

/* Utility */
.hidden{ display:none !important; }
.visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Progressive viewport height fix */
@supports (height: 1dvh) {
  :root{ --vh: 1dvh; }
}

/* Tile glyph mapping */
.tile-glyph[data-icon="phone"]{ -webkit-mask-image: url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.phone.svg'); mask-image: url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.phone.svg'); }
.tile-glyph[data-icon="messages"]{ -webkit-mask-image: url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.message.svg'); mask-image: url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.message.svg'); }
.tile-glyph[data-icon="email"]{ -webkit-mask-image: url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.email.svg'); mask-image: url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.email.svg'); }
.tile-glyph[data-icon="camera"]{ -webkit-mask-image: url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.camera.svg'); mask-image: url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.camera.svg'); }
.tile-camera .tile-glyph { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.tile-glyph[data-icon="photos"]{ -webkit-mask-image: url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.image.gallery.svg'); mask-image: url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.image.gallery.svg'); }
.tile-glyph[data-icon="store"]{ -webkit-mask-image: url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.marketplace.svg'); mask-image: url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.marketplace.svg'); }
.tile-glyph[data-icon="maps"]{ -webkit-mask-image: url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.map.svg'); mask-image: url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.map.svg'); }
.tile-glyph[data-icon="settings"]{ -webkit-mask-image: url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.settings.svg'); mask-image: url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.settings.svg'); }
.tile-glyph[data-icon="music"]{ -webkit-mask-image: url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.music.svg'); mask-image: url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.music.svg'); }
.tile-glyph[data-icon="calendar"]{ -webkit-mask-image: url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.calendar.svg'); mask-image: url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.calendar.svg'); }
.tile-glyph[data-icon="people"]{ -webkit-mask-image: url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.people.svg'); mask-image: url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.people.svg'); }
.tile-glyph[data-icon="weather"]{ -webkit-mask-image: url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.cloud.svg'); mask-image: url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.cloud.svg'); }
.tile-glyph[data-icon="games"]{ -webkit-mask-image: url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.controller.xbox.svg'); mask-image: url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.controller.xbox.svg'); }
.tile-glyph[data-icon="pin"]{ -webkit-mask-image: url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.pin.svg'); mask-image: url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.pin.svg'); }
.tile-glyph[data-icon="onedrive"]{ -webkit-mask-image: url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.cloud.svg'); mask-image: url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.cloud.svg'); }
.tile-glyph[data-icon="office"]{ -webkit-mask-image: url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.office.svg'); mask-image: url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.office.svg'); }
.tile-glyph[data-icon="ie"]{ -webkit-mask-image: url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.ie.svg'); mask-image: url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.ie.svg'); }
.tile-glyph[data-icon="twitter"]{ -webkit-mask-image: url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.social.twitter.svg'); mask-image: url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.social.twitter.svg'); }
.tile-glyph[data-icon="heart"]{ -webkit-mask-image: url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.heart.svg'); mask-image: url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.heart.svg'); }
.tile-glyph-large[data-icon="games"]{ -webkit-mask-image: url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.controller.xbox.svg'); mask-image: url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.controller.xbox.svg'); }

/* Donation tile - non-resizable, non-removable */
.tile-donation {
  cursor: pointer;
  position: relative;
  background: #26a69a !important;
}
.tile-donation .donation-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
}
.tile-donation .tile-glyph {
  width: 64px;
  height: 64px;
}
.tile-donation .donation-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
}
.tile-donation .tile-title {
  position: static;
  padding: 0;
  font-size: 18px;
  font-weight: 400;
}
.tile-donation .donation-subtitle {
  font-size: 11px;
  line-height: 1.3;
  opacity: 0.9;
  font-weight: 300;
  max-width: 100%;
}
/* Prevent resize handles on donation tile */
.tile-donation .resize-handle {
  display: none !important;
}

/* NEW TILE STYLES FOR AUTHENTIC WP LOOK */

/* WP8 Keyboard */
/* Root keyboard container visual style */
.wp8-keyboard {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 72px;
  background: #1a1a1a; /* deeper, uniform dark tone */
  border-top: 1px solid #2b2b2b;
  padding-bottom: var(--safe-bottom);
  display: none;
  z-index: 20;
  font-family: "Segoe UI", "Segoe WP", sans-serif; /* correct WP font */
}

/* Showing when open */
.wp8-keyboard.open {
  display: block;
  animation: slideUpKeyboard 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes slideUpKeyboard {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

/* Keyboard body layout */
.wp8-keyboard .kb-body {
  padding: 6px 6px calc(6px + var(--safe-bottom));
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Rows centered */
.wp8-keyboard .kb-row {
  display: flex;
  justify-content: center;
  gap: 3px;
}

/* Individual keys */
.wp8-keyboard button {
  background: #2d2d2d;
  color: #f1f1f1;
  border: none;
  border-radius: 0;
  font-size: 18px;
  font-weight: 600;
  min-width: 34px;
  height: 46px;
  padding: 0 8px;
  text-transform: lowercase; /* matching WP style */
}

/* Pressed state */
.wp8-keyboard button:active {
  background: #393939;
}

/* Special keys wider */
.wp8-keyboard .kb-space {
  flex: 1;
}
.wp8-keyboard .kb-enter,
.wp8-keyboard .kb-backspace,
.wp8-keyboard .kb-shift,
.wp8-keyboard .kb-123 {
  min-width: 62px;
}

.wp8-keyboard .kb-shift.active {
  background: var(--accent);
  color: #fff;
}

/* Suggestion bar above keyboard */
.wp8-keyboard .kb-suggestions {
  display: flex;
  justify-content: space-around;
  padding: 4px 0;
  font-size: 16px;
  background: #222;
  color: #ddd;
}

/* Orange theme for first screen */
.accent-orange { background: #f09609; }
.accent-black { background: #000; }

/* Wide custom contact tile (Adam) */
.tile-wide-custom {
  grid-column: span 3;
  grid-row: span 2;
  position: relative;
  overflow: hidden;
}
.contact-tile-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 8px;
}
.contact-photo {
  width: 60px;
  height: 60px;
  background: #ccc;
  border-radius: 4px;
  background-size: cover;
  background-position: center;
}
.contact-adam {
  background-image: linear-gradient(135deg, #89b4d8, #5a8fb8);
}
.contact-name {
  font-size: 32px;
  font-weight: 300;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Wordament tile */
.tile-wordament-logo {
  font-size: 10px;
  line-height: 1.2;
  font-weight: 700;
  text-align: center;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  background: transparent !important;
}

/* Kindle tile */
.kindle-tile-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 12px;
  background: linear-gradient(to bottom, #1a4d7a 0%, #000 100%);
}
.kindle-logo {
  font-size: 36px;
  font-weight: 300;
  font-style: italic;
  color: #fff;
  font-family: Georgia, serif;
}

/* Photo collage small */
.photo-grid-small {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
}
.photo-item {
  background: #222;
  background-size: cover;
  background-position: center;
}
.photo-bw {
  background-image: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)), url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0iIzMzMyIvPjwvc3ZnPg==);
}
.photo-vogue {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0iI2ZmZiIvPjx0ZXh0IHg9IjUwIiB5PSI1NSIgZm9udC1zaXplPSIyNCIgZm9udC1mYW1pbHk9InNlcmlmIiBmb250LXdlaWdodD0iYm9sZCIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZmlsbD0iIzAwMCI+Vk9HVUU8L3RleHQ+PC9zdmc+);
}

/* Event tile */
.event-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 10px;
  color: #fff;
}
.event-title {
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 2px;
}
.event-location {
  font-size: 14px;
  opacity: 0.9;
  margin-bottom: 4px;
}
.event-time {
  font-size: 12px;
  opacity: 0.8;
}

/* eBay tile */
.ebay-logo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  font-size: 24px;
  font-weight: 700;
  color: #000;
}
.ebay-logo::before {
  content: 'eBay';
  background: linear-gradient(to right, #e53238 0%, #e53238 25%, #0064d2 25%, #0064d2 50%, #f5af02 50%, #f5af02 75%, #86b817 75%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Games large tile */
.tile-games-large .tile-glyph-large {
  position: absolute;
  left: 50%;
  top: 50%; /* center */
  transform: translate(-50%, -50%);
  /* Scale with grid unit so it grows/shrinks with the tile */
  width: calc(var(--unit) * 1.55);
  height: calc(var(--unit) * 1.55);
  background: #fff;
  opacity: 0.95;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
.tile-games-large .tile-title {
  position: absolute;
  bottom: 8px;
  left: 8px;
  font-size: 14px;
  /* Remove base padding and constrain within tile */
  padding: 0;
  right: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Zombies icon */
.zombies-icon {
  position: absolute;
  inset: 0;
  background: #5a8f59;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
}
.zombies-icon::before {
  content: '🧟';
}

/* Calendar detail tile */
.calendar-detail-content {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 2fr 1fr;
  padding: 10px;
  gap: 8px;
}

/* Small calendar tile - show only day number centered */
.tile-small .calendar-detail-content {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-direction: column;
  gap: 2px;
}
.tile-small .calendar-event-small {
  display: none;
}
.tile-small .calendar-date-large {
  align-items: center;
  justify-content: center;
  gap: 0;
}
.tile-small .calendar-label {
  display: none;
}
.tile-small .calendar-day-num {
  font-size: 32px;
  font-weight: 300;
  line-height: 1;
  margin: 0;
}
.tile-small .calendar-day-label {
  font-size: 11px;
  opacity: 0.85;
  text-transform: lowercase;
  margin: 0;
}

/* Medium calendar tile - balanced layout */
.tile-medium .calendar-detail-content {
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  padding: 8px;
}
.tile-medium .calendar-event-small {
  order: 2;
  font-size: 11px;
}
.tile-medium .calendar-date-large {
  order: 1;
  align-items: flex-start;
  justify-content: flex-start;
  margin-bottom: 6px;
}
.tile-medium .event-name {
  font-size: 12px;
}
.tile-medium .event-building,
.tile-medium .event-days {
  font-size: 10px;
}

.calendar-event-small {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}
.event-name {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
}
.event-building {
  font-size: 12px;
  opacity: 0.85;
}
.event-days {
  font-size: 11px;
  opacity: 0.75;
}
.calendar-date-large {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
}
.calendar-label {
  font-size: 10px;
  opacity: 0.7;
  margin-bottom: 2px;
}
.calendar-day-num {
  font-size: 42px;
  font-weight: 300;
  line-height: 0.9;
  margin-bottom: 2px;
}
.calendar-day-label {
  font-size: 12px;
  opacity: 0.8;
}

/* ESPN tile */
.espn-logo {
  position: absolute;
  inset: 0;
  background: #d00;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  font-weight: 900;
  color: #fff;
  font-family: Arial, sans-serif;
}
.espn-logo::before {
  content: 'ESPN';
  text-shadow: 2px 2px 0 rgba(0,0,0,0.3);
}
.espn-logo::after {
  content: 'SCORECENTER';
  position: absolute;
  bottom: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
}

/* Person tile (Maria) */
.tile-wide-person {
  grid-column: span 3;
  grid-row: span 2;
}
.person-tile-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  padding: 8px;
}
.person-photo {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  border-radius: 0;
}
.person-maria-photo {
  background-image: linear-gradient(135deg, rgba(100,180,100,0.3), rgba(50,120,50,0.4)), 
                    url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0iIzY4YjY2OCIvPjwvc3ZnPg==);
}
.person-name {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 24px;
  font-weight: 400;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  z-index: 2;
}

/* Missed call tile */
.missed-call-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px;
}
.missed-call-text {
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 6px;
}
.missed-call-name {
  font-size: 13px;
  opacity: 0.85;
}

/* AP tile */
.ap-logo {
  position: absolute;
  inset: 0;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 900;
  color: #000;
  font-family: Arial, sans-serif;
}

/* BBC tile */
.bbc-logo {
  position: absolute;
  inset: 0;
  background: #bb1919;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: 11px;
  font-weight: 900;
  color: #fff;
  font-family: Arial, sans-serif;
  line-height: 1.2;
  text-align: center;
}

/* USA Today tile */
.usatoday-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #fff;
}
.usa-logo {
  background: #1270b0;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
  font-family: Arial, sans-serif;
}
.usa-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
  background: #1270b0;
  padding: 2px;
}
.usa-photo {
  background: #ddd;
  background-size: cover;
  background-position: center;
}
.usa-p1 { background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIiBmaWxsPSIjYWFhIi8+PC9zdmc+); }
.usa-p2 { background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIiBmaWxsPSIjODg4Ii8+PC9zdmc+); }
.usa-p3 { background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIiBmaWxsPSIjOTk5Ii8+PC9zdmc+); }
.usa-p4 { background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIiBmaWxsPSIjYmJiIi8+PC9zdmc+); }

/* Cartoon ski tile */
.cartoon-ski {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, #5dceeb 0%, #5dceeb 60%, #fff 60%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
}
.cartoon-ski::before {
  content: '⛷️';
}

/* Photo person tile */
.photo-person {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #d4a574, #8b6f47);
  background-size: cover;
  background-position: center;
}

/* Small tile date */
.tile-date-small {
  position: absolute;
  font-size: 24px;
  font-weight: 300;
  bottom: 6px;
  right: 8px;
}

/* Hide default glyph and title on specific tiles */
.tile-phone .tile-glyph,
.tile-phone2 .tile-glyph,
.tile-phone3 .tile-glyph,
.tile-messages .tile-glyph,
.tile-messages2 .tile-glyph,
.tile-messages3 .tile-glyph,
.tile-email .tile-glyph,
.tile-email2 .tile-glyph,
.tile-email3 .tile-glyph,
.tile-people-small .tile-glyph,
.tile-people3 .tile-glyph,
.tile-onedrive .tile-glyph,
.tile-onedrive2 .tile-glyph,
.tile-music2 .tile-glyph,
.tile-office .tile-glyph,
.tile-ie .tile-glyph,
.tile-ie3 .tile-glyph,
.tile-twitter .tile-glyph,
.tile-pinned .tile-glyph,
.tile-calendar3 .tile-glyph {
  /* Center these glyphs but let size be driven by tile size classes */
  margin: 0 auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* App list (swipe-left) styled like WP list from screenshot */
.app-list{ position:fixed; inset:0; background:#000; transform: translateX(100%); transition: transform .3s ease; }
.app-list[aria-hidden="true"]{ pointer-events: none; }
/* Hide top bar in app list for the authentic look */
.app-list .app-bar{ display:none; }
/* With the header hidden, move content to the safe top inset */
.app-list .app-list-content{ position:absolute; inset: var(--safe-top) 0 0 0; padding:8px 0 calc(14px + var(--safe-bottom)) 0; display:block; overflow-y:auto; }

/* Letter squares (accent) */
.app-list .alpha{
  width:56px; height:56px; margin:8px 0 4px 12px;
  display:flex; align-items:center; justify-content:center;
  background: transparent; color: var(--accent); border:2px solid var(--accent);
  font-size:32px; font-weight:300; text-transform: lowercase; letter-spacing:0;
}
.app-list .alpha + .app-list-item{ margin-top:6px; }

/* App row: icon tile + big label */
.app-list-item{
  text-align:left; background:transparent; color:#fff; border:none;
  padding:8px 12px; display:flex; align-items:center; gap:12px;
  font-size: clamp(20px, 5.8vw, 32px); line-height:1.1; text-transform: none;
}

/* Square accent tile with white glyph inside */
.app-list-item .app-icon{
  position:relative; flex:0 0 56px; width:56px; height:56px; border-radius:0;
  background: var(--accent); box-shadow: inset 0 0 0 2px rgba(255,255,255,.12);
}
.app-list-item .app-icon::after{
  content:""; position:absolute; left:8px; right:8px; top:8px; bottom:8px; background:#fff;
  -webkit-mask-size: contain; -webkit-mask-repeat:no-repeat; -webkit-mask-position:center;
  mask-size: contain; mask-repeat:no-repeat; mask-position:center;
}
/* map app icons to same glyph set for consistency (applied to ::after) */
.app-list-item .app-icon[data-icon="camera"]::after{ -webkit-mask-image:url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.camera.svg'); mask-image:url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.camera.svg'); }
.app-list-item .app-icon[data-icon="photos"]::after{ -webkit-mask-image:url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.image.gallery.svg'); mask-image:url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.image.gallery.svg'); }
.app-list-item .app-icon[data-icon="maps"]::after{ -webkit-mask-image:url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.map.svg'); mask-image:url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.map.svg'); }
.app-list-item .app-icon[data-icon="messages"]::after{ -webkit-mask-image:url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.message.svg'); mask-image:url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.message.svg'); }
.app-list-item .app-icon[data-icon="music"]::after{ -webkit-mask-image:url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.music.svg'); mask-image:url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.music.svg'); }
.app-list-item .app-icon[data-icon="store"]::after{ -webkit-mask-image:url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.marketplace.svg'); mask-image:url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.marketplace.svg'); }
.app-list-item .app-icon[data-icon="people"]::after{ -webkit-mask-image:url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.people.svg'); mask-image:url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.people.svg'); }
.app-list-item .app-icon[data-icon="phone"]::after{ -webkit-mask-image:url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.phone.svg'); mask-image:url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.phone.svg'); }
.app-list-item .app-icon[data-icon="settings"]::after{ -webkit-mask-image:url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.settings.svg'); mask-image:url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.settings.svg'); }
.app-list-item .app-icon[data-icon="email"]::after{ -webkit-mask-image:url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.email.svg'); mask-image:url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.email.svg'); }
.app-list-item .app-icon[data-icon="calendar"]::after{ -webkit-mask-image:url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.calendar.svg'); mask-image:url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.calendar.svg'); }
.app-list-item .app-icon[data-icon="weather"]::after{ -webkit-mask-image:url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.cloud.svg'); mask-image:url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.cloud.svg'); }
.app-list-item .app-icon[data-icon="games"]::after{ -webkit-mask-image:url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.controller.xbox.svg'); mask-image:url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.controller.xbox.svg'); }
.app-list-item .app-icon[data-icon="onedrive"]::after{ -webkit-mask-image:url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.cloud.svg'); mask-image:url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.cloud.svg'); }
.app-list-item .app-icon[data-icon="ie"]::after{ -webkit-mask-image:url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.ie.svg'); mask-image:url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.ie.svg'); }
.app-list-item .app-icon[data-icon="twitter"]::after{ -webkit-mask-image:url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.social.twitter.svg'); mask-image:url('Windows-Phone-All-icons/WindowsIcons-master/WindowsPhone/svg/appbar.social.twitter.svg'); }

/* Pin indicator (hidden) */
.app-list-item{ position: relative; }
.app-list-item .pin-indicator{
  display: none;
}

/* Press animation for app list items */
.app-list-item{
  transition: transform 0.15s ease, background 0.15s ease;
}
.app-list-item:active,
.app-list-item.pressing{
  transform: scale(0.97);
  background: rgba(255, 255, 255, 0.08);
}

/* Pin dialog */
.pin-dialog{
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.pin-dialog[aria-hidden="false"]{
  display: flex;
}
.pin-dialog-overlay{
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  animation: fadeIn 0.2s ease;
}
.pin-dialog-content{
  position: relative;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0;
  padding: 24px;
  max-width: 340px;
  width: 100%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  animation: slideUp 0.25s var(--ease-out);
}
.pin-dialog-title{
  margin: 0 0 12px 0;
  font-size: 20px;
  font-weight: 300;
  text-transform: lowercase;
  color: var(--accent);
}
.pin-dialog-message{
  margin: 0 0 24px 0;
  font-size: 16px;
  line-height: 1.5;
  color: #fff;
  opacity: 0.9;
}
.pin-dialog-buttons{
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}
.pin-dialog-btn{
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 10px 20px;
  font-size: 14px;
  text-transform: lowercase;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 80px;
}
.pin-dialog-btn:hover{
  background: rgba(255, 255, 255, 0.05);
}
.pin-dialog-btn.pin-dialog-confirm{
  background: var(--accent);
  border-color: var(--accent);
  color: #000;
}
.pin-dialog-btn.pin-dialog-confirm:hover{
  opacity: 0.9;
}
@keyframes fadeIn{
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideUp{
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* quick-jump alphabet rail */
.alpha-rail{ position:absolute; top: var(--safe-top); right:4px; bottom:0; width:16px; display:flex; flex-direction:column; align-items:center; gap:4px; padding:6px 0; color:#8a8a8a; }
.alpha-rail button{ background:transparent; color:inherit; border:none; font-size:10px; opacity:.8; }

/* subtle entrance animation when opening the list */
.app-list-anim .app-list-content > *{ animation: appRowIn .35s var(--ease-out) both; }
@keyframes appRowIn{ from{ opacity:0; transform: translateX(8px);} to{ opacity:1; transform:none; } }
/* lightweight stagger for first 24 children */
.app-list-anim .app-list-content > *:nth-child(1){ animation-delay: .02s; }
.app-list-anim .app-list-content > *:nth-child(2){ animation-delay: .04s; }
.app-list-anim .app-list-content > *:nth-child(3){ animation-delay: .06s; }
.app-list-anim .app-list-content > *:nth-child(4){ animation-delay: .08s; }
.app-list-anim .app-list-content > *:nth-child(5){ animation-delay: .10s; }
.app-list-anim .app-list-content > *:nth-child(6){ animation-delay: .12s; }
.app-list-anim .app-list-content > *:nth-child(7){ animation-delay: .14s; }
.app-list-anim .app-list-content > *:nth-child(8){ animation-delay: .16s; }
.app-list-anim .app-list-content > *:nth-child(9){ animation-delay: .18s; }
.app-list-anim .app-list-content > *:nth-child(10){ animation-delay: .20s; }
.app-list-anim .app-list-content > *:nth-child(11){ animation-delay: .22s; }
.app-list-anim .app-list-content > *:nth-child(12){ animation-delay: .24s; }
.app-list-anim .app-list-content > *:nth-child(13){ animation-delay: .26s; }
.app-list-anim .app-list-content > *:nth-child(14){ animation-delay: .28s; }
.app-list-anim .app-list-content > *:nth-child(15){ animation-delay: .30s; }
.app-list-anim .app-list-content > *:nth-child(16){ animation-delay: .32s; }
.app-list-anim .app-list-content > *:nth-child(17){ animation-delay: .34s; }
.app-list-anim .app-list-content > *:nth-child(18){ animation-delay: .36s; }
.app-list-anim .app-list-content > *:nth-child(19){ animation-delay: .38s; }
.app-list-anim .app-list-content > *:nth-child(20){ animation-delay: .40s; }
.app-list-anim .app-list-content > *:nth-child(21){ animation-delay: .42s; }
.app-list-anim .app-list-content > *:nth-child(22){ animation-delay: .44s; }
.app-list-anim .app-list-content > *:nth-child(23){ animation-delay: .46s; }
.app-list-anim .app-list-content > *:nth-child(24){ animation-delay: .48s; }

/* Light theme tweaks for app list */
#app.theme-light .app-list{ background:#fff; }
#app.theme-light .app-list-item{ color:#000; }
#app.theme-light .alpha-rail{ color:#666; }

#app.app-list-open #start{ transform: translateX(-35%); transition: transform .3s ease; }
#app.app-list-open #app-list{ transform: none; }
/* Auto-hide status bar on Start - DISABLED to keep status bar always visible */
.status-hidden #start .status-bar{ /* transform: translateY(calc(-1 * var(--status-h) - var(--safe-top))); opacity:0; */ }

/* Lock screen swipe */
.lock-screen{ touch-action: pan-y; }
.lock-screen.dragging{ transition:none; }

/* Bottom command bar (WP app bar) */
.command-bar{ position: absolute; left:0; right:0; bottom:0; height:56px; padding-bottom: var(--safe-bottom); display:flex; align-items:center; background:#000; border-top:1px solid rgba(255,255,255,.08); }
.cmd{ background:transparent; border:none; color:#fff; font-size:22px; padding:0 12px; }
.cmd-spacer{ flex:1; }
.cmd.more{ font-size:28px; padding-right:16px; opacity:.9; color: var(--accent); }
.page-title{ margin:0 0 10px 2px; font-weight:300; text-transform: lowercase; letter-spacing:.02em; opacity:.95; }

/* Calendar flip */
.tile-calendar .cal-flip{ position:absolute; inset:0; transform-style: preserve-3d; animation: calFlip 8s infinite ease-in-out; }
.tile-calendar .calendar-face{
  position:absolute;
  inset:0;
  backface-visibility: hidden;
  padding: 10px 12px 8px 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  font-family: 'Segoe WP', 'Segoe UI', Arial, sans-serif;
  background: transparent;
  z-index: 1;
}
.tile-calendar .calendar-face .cal-date {
  font-size: 38px;
  font-weight: 400;
  line-height: 1.05;
  color: #fff;
  margin-bottom: 0px;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 0 #000, 0 0 2px #0008;
}
.tile-calendar .calendar-face .cal-day {
  font-size: 15px;
  font-weight: 300;
  color: #fff;
  opacity: 0.85;
  margin-bottom: 2px;
  text-shadow: 0 1px 0 #000, 0 0 2px #0008;
}
.tile-calendar .calendar-face .cal-event {
  font-size: 12px;
  font-weight: 400;
  color: #fff;
  opacity: 0.7;
  margin-top: 2px;
  text-shadow: 0 1px 0 #000, 0 0 2px #0008;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tile-calendar .calendar-face.back{ transform: rotateY(180deg); justify-content:center; align-items:center; font-size:14px; opacity:.9; }
@keyframes calFlip{ 0%,40%{ transform: rotateY(0); } 50%,90%{ transform: rotateY(180deg); } 100%{ transform: rotateY(0); } }

/* Jumplist overlay */
.jumplist{ position:fixed; inset:0; background: rgba(0,0,0,.9); display:none; z-index:20; }
.jumplist[aria-hidden="true"]{ pointer-events: none; }
.jumplist.open{ display:block; }
.jumplist-grid{ position:absolute; inset:0; display:grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(40px, 1fr); gap:4px; padding: 20px; }
.jumplist-grid button{ background:#0d0d0d; color:#fff; border:none; font-size:18px; }

/* App bottom sheet menu */
.app-menu{ position:fixed; inset:0; background: rgba(0,0,0,.4); display:none; z-index:30; }
.app-menu.open{ display:block; }
.app-menu-sheet{ position:absolute; left:0; right:0; bottom:0; background:#0d0d0d; border-top:1px solid rgba(255,255,255,.08); padding-bottom: calc(8px + var(--safe-bottom)); animation: sheetUp .2s ease-out both; }
.menu-item{ width:100%; text-align:left; background:transparent; border:none; color:#fff; padding:14px 16px; font-size:16px; }
@keyframes sheetUp{ from{ transform: translateY(30px); opacity:0; } to{ transform:none; opacity:1; } }

/* Metro UI app page styles */
.wp8-app-page {
  padding: 0;
  font-family: 'Segoe WP', 'Segoe UI', Arial, sans-serif;
  background: #000;
  min-height: 100%;
}
.wp8-app-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 0 8px 0;
}
.wp8-app-header .tile-glyph {
  width: 32px;
  height: 32px;
  background: #fff;
  opacity: 0.92;
  margin-right: 2px;
}
.wp8-app-header .page-title {
  font-size: 26px;
  font-weight: 300;
  text-transform: lowercase;
  letter-spacing: .01em;
  margin: 0;
  color: #fff;
  opacity: 0.97;
}
.wp8-app-body {
  padding: 0 2px 0 2px;
}
/* Phone call list */
.wp8-call-list {
  margin: 10px 0 18px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wp8-call-item {
  background: #0d0d0d;
  border-radius: 8px;
  padding: 10px 14px 8px 14px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 1px 0 #2228;
}
.wp8-call-contact {
  font-size: 17px;
  font-weight: 400;
}
.wp8-call-type {
  font-size: 13px;
  color: #00a8e6;
  opacity: 0.85;
}
.wp8-call-time {
  font-size: 12px;
  color: #bdbdbd;
  opacity: 0.7;
}
.wp8-call-action {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  margin-top: 8px;
  background: var(--accent, #00a8e6);
  color: #00141b;
  cursor: pointer;
  transition: background .15s;
}
.wp8-call-action .tile-glyph {
  width: 20px;
  height: 20px;
  background: #00141b;
  opacity: 0.95;
}
/* Messages - Minimalist Windows Phone UI */
/* Main Messaging Container */
.messaging-container {
  position: absolute;
  inset: 0;
  background: #000000;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.3s var(--ease-smooth), transform 0.35s var(--ease-out);
}
.messaging-container.hide-left {
  opacity: 0;
  transform: translateX(-30%);
  pointer-events: none;
}

/* Messaging Header */
.messaging-header {
  padding: 32px 24px 20px 24px;
  background: #000000;
}
.messaging-title {
  font-size: 42px;
  font-weight: 200;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.5px;
  font-family: "Segoe WP Light", "Segoe UI Light", "Segoe UI", sans-serif;
}
.messaging-subtitle {
  font-size: 16px;
  font-weight: 300;
  color: #777777;
  margin: 4px 0 0 0;
}

/* Thread List */
.messaging-threads {
  flex: 1;
  padding: 0 24px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #000000;
}

/* Thread Row */
.thread-row {
  padding: 18px 0;
  border-bottom: 1px solid #1a1a1a;
  cursor: pointer;
  transition: background 0.15s ease;
  min-height: 70px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  /* Ensure full width is clickable */
  width: 100%;
  margin: 0;
  /* Make sure all child elements are clickable too */
  position: relative;
}
.thread-row:active {
  background: #1a1a1a;
}
/* Ensure child elements don't block clicking */
.thread-header,
.thread-contact,
.thread-time,
.thread-preview {
  pointer-events: none;
}
.thread-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.thread-contact {
  font-size: 22px;
  font-weight: 600;
  color: #ffffff;
  font-family: "Segoe WP Semibold", "Segoe UI Semibold", "Segoe UI", sans-serif;
  flex: 1;
}
.thread-time {
  font-size: 14px;
  font-weight: 400;
  color: #999999;
  white-space: nowrap;
}
.thread-preview {
  font-size: 16px;
  font-weight: 300;
  color: #777777;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.4;
}

/* Conversation Screen */
.messaging-conversation {
  position: absolute;
  inset: 0;
  background: #000000;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 0.3s var(--ease-smooth), transform 0.35s var(--ease-out);
  pointer-events: none;
  overflow: hidden;
  will-change: transform;
}
.messaging-conversation.swiping {
  transition: none;
}
.messaging-conversation.active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

/* Conversation Header */
.conversation-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px 16px 16px;
  background: #000000;
  border-bottom: 1px solid #1a1a1a;
}
.conversation-back {
  background: transparent;
  border: none;
  font-size: 32px;
  color: #ffffff;
  cursor: pointer;
  padding: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s ease;
}
.conversation-back:active {
  opacity: 0.5;
}
.conversation-contact {
  font-size: 28px;
  font-weight: 200;
  color: #ffffff;
  margin: 0;
  font-family: "Segoe WP Light", "Segoe UI Light", "Segoe UI", sans-serif;
  letter-spacing: -0.3px;
}

/* Messages Area */
.conversation-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
  padding-bottom: 100px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #000000;
}
/* Add safe space at bottom when custom keyboard is open */
.kb-open .conversation-messages{
  /* leave room for keyboard + fixed input area height (~92px) */
  padding-bottom: calc(var(--kb-h, 240px) + 180px);
  /* help scrollIntoView place last bubble above the overlay */
  scroll-padding-bottom: calc(var(--kb-h, 240px) + 180px);
}
/* ensure bubbles have margin for scroll placement above keyboard */
.kb-open .message-bubble{ scroll-margin-bottom: calc(var(--kb-h, 240px) + 120px); }

/* Message Bubble */
.message-bubble {
  max-width: 75%;
  padding: 12px 16px;
  border-radius: 2px;
  position: relative;
  animation: messageFadeIn 0.25s var(--ease-smooth);
}
@keyframes messageFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Sent Messages (Right-aligned, Accent Color) */
.message-bubble.sent {
  align-self: flex-end;
  background: var(--accent);
  color: #ffffff;
  margin-left: auto;
}
.message-bubble.sent .message-text {
  color: #ffffff;
}
.message-bubble.sent .message-time {
  color: rgba(255, 255, 255, 0.8);
}

/* Received Messages (Left-aligned, Dark Gray) */
.message-bubble.received {
  align-self: flex-start;
  background: #1f1f1f;
  color: #ffffff;
}
.message-bubble.received .message-text {
  color: #ffffff;
}
.message-bubble.received .message-time {
  color: #999999;
}

.message-text {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  margin: 0 0 4px 0;
  word-wrap: break-word;
}
.message-time {
  font-size: 11px;
  font-weight: 400;
  text-align: right;
  opacity: 0.85;
}

/* Status Label */
.status-label {
  text-align: center;
  font-size: 13px;
  font-weight: 300;
  color: #666666;
  padding: 12px 24px;
  background: #000000;
}

/* Input Area */
.conversation-input-area {
  background: #1a1a1a;
  border-top: 1px solid #2b2b2b;
  padding: 12px 16px 16px 16px;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
}
.input-wrapper {
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}
/* Move only text input above keyboard when open */
.kb-open .input-wrapper {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--kb-h, 240px) + 72px);
  margin-bottom: 0;
  padding: 12px 16px;
  background: #1a1a1a;
  border-top: 1px solid #2b2b2b;
  z-index: 51;
}
.message-input {
  width: 100%;
  font-size: 17px;
  font-weight: 400;
  padding: 14px 16px;
  border: 1px solid #3a3a3a;
  border-radius: 1px;
  background: #2d2d2d !important;
  color: #ffffff !important;
  outline: none;
  font-family: "Segoe UI", sans-serif;
  transition: border-color 0.2s ease;
}
.message-input:focus {
  border-color: #1e88e5;
}
.message-input::placeholder {
  color: #777777;
  font-weight: 300;
}

/* Input Actions */
.input-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
}
.input-action-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #2d2d2d;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
  flex-shrink: 0;
}
.input-action-btn:active {
  background: #3a3a3a;
  transform: scale(0.95);
}
.input-action-btn.input-send {
  background: #1e88e5;
}
.input-action-btn.input-send:active {
  background: #1565c0;
}
.action-icon {
  font-size: 20px;
  line-height: 1;
}
.action-icon-img {
  width: 24px;
  height: 24px;
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}
.input-send .action-icon-img {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}
.input-send .action-icon {
  color: #ffffff;
  font-size: 22px;
}

/* Light theme adjustments */
#app.theme-light .messaging-container,
#app.theme-light .messaging-conversation {
  background: #ffffff;
}
#app.theme-light .conversation-messages {
  background: #fafafa;
}
#app.theme-light .message-bubble.received {
  background: #f0f0f0;
  color: #000000;
}

/* Keyboard visibility adjustments */
.messaging-conversation.keyboard-visible {
  /* Ensure input area stays visible when keyboard appears */
  padding-bottom: 0;
}
.messaging-conversation.keyboard-visible .conversation-messages {
  /* Reduce messages area when keyboard is visible to prevent overlap */
  padding-bottom: 80px;
}
.messaging-conversation.keyboard-visible .conversation-input-area {
  /* Keep input area at bottom and ensure it's visible above keyboard */
  position: sticky;
  bottom: 0;
  z-index: 10;
}

/* Windows Phone Virtual Keyboard */
.wp-keyboard {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #2c2c2c;
  border-top: 1px solid #404040;
  padding: 12px 8px 16px 8px;
  display: none;
  flex-direction: column;
  gap: 8px;
  z-index: 1000;
  /* Windows Phone keyboard animation */
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.wp-keyboard.visible {
  display: flex;
  transform: translateY(0);
}
.keyboard-row {
  display: flex;
  justify-content: center;
  gap: 4px;
  width: 100%;
}
.key {
  background: #404040;
  border: 1px solid #525252;
  border-radius: 3px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 300;
  padding: 12px;
  min-width: 32px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.1s ease;
  font-family: "Segoe UI", sans-serif;
  user-select: none;
  flex: 1;
  max-width: 38px;
}
.key:active {
  background: #1e88e5;
  transform: scale(0.95);
}
/* Special keys styling */
.shift-key, .backspace-key {
  background: #525252;
  font-size: 18px;
  max-width: 50px;
}
.number-key {
  background: #525252;
  max-width: 60px;
  font-size: 14px;
}
.space-key {
  flex: 3;
  max-width: none;
  min-width: 120px;
}
.enter-key {
  background: #1e88e5;
  max-width: 70px;
  font-size: 14px;
  font-weight: 400;
}
.enter-key:active {
  background: #1565c0;
}
/* Keyboard visible state adjustments */
.messaging-conversation.wp-keyboard-visible {
  padding-bottom: 220px;
}
.messaging-conversation.wp-keyboard-visible .conversation-messages {
  padding-bottom: 40px;
}
/* Make input readonly styling */
.message-input[readonly] {
  background: #2d2d2d;
  cursor: pointer;
}
.message-input[readonly]:focus {
  border-color: #1e88e5;
  background: #2d2d2d;
}
/* Find page */
.wp8-find-form {
  display: flex;
  gap: 8px;
  margin: 12px 0 18px 0;
}
.wp8-find-input {
  flex: 1;
  font-size: 16px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #222;
  background: #181818;
  color: #fff;
  outline: none;
}
.wp8-find-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border: none;
  border-radius: 8px;
  background: var(--accent, #00a8e6);
  color: #00141b;
  font-size: 18px;
  cursor: pointer;
  transition: background .15s;
}
.wp8-find-btn .tile-glyph {
  width: 18px;
  height: 18px;
  background: #00141b;
  opacity: 0.95;
}
.wp8-find-results {
  margin-top: 10px;
  color: #bdbdbd;
  font-size: 15px;
}
.wp8-find-placeholder {
  color: #888;
  font-size: 15px;
  opacity: 0.7;
}
/* Active key state for custom keyboard */
.key.active {
  background: #1e88e5 !important;
  color: #ffffff;
}