/* Basic reset and styling */
    * {
      box-sizing: border-box;
    }

    body,
    html {
      margin: 0;
      padding: 0;
      height: 100%;
      background: #111;
      font-family: 'Roboto', sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      user-select: none;
      -webkit-user-select: none;
    }

    /* Phone Frame */
    .phone-frame {
      position: relative;
      width: 360px;
      height: 740px;
      background: #000;
      border: 14px solid #222;
      border-radius: 40px;
      box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
      overflow: hidden;
    }

    /* Power Button */
    #power-button {
      position: absolute;
      right: 760px;
      /* slightly outside right border */
      top: 50%;
      transform: translateY(-50%);
      width: 12px;
      height: 55px;
      background: #e53935;
      border-radius: 6px;
      cursor: pointer;
      z-index: 1000;
      box-shadow: 0 0 8px #e53935aa;
      transition: background 0.3s ease;
      border: none;
    }

    #power-button:active {
      background: #ab000d;
      box-shadow: none;
    }

    /* Display area */
    #display {
      width: 100%;
      height: 100%;
      position: relative;
      background: #000;
      color: white;
      overflow: hidden;
    }

    /* Screens styling */
    .screen {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: none;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 20px;
      background: #000;
      transition: opacity 0.4s ease;
    }

    .screen.active {
      display: flex;
      opacity: 1;
      z-index: 10;
    }

    /* Splash Screen */
    #splash-screen .logo {
      font-size: 36px;
      font-weight: 900;
      letter-spacing: 3px;
      margin-bottom: 10px;
      user-select: text;
    }

    #splash-screen p {
      font-size: 14px;
      opacity: 0.7;
      margin-bottom: 30px;
    }

    #get-started {
      background: #3b82f6;
      border: none;
      border-radius: 25px;
      padding: 12px 36px;
      color: white;
      font-size: 18px;
      font-weight: 700;
      cursor: pointer;
      user-select: none;
      box-shadow: 0 3px 7px #3b82f6aa;
      transition: background 0.3s ease;
    }

    #get-started:hover {
      background: #2563eb;
    }

    /* Version text bottom */
    #splash-screen .version {
      position: absolute;
      bottom: 12px;
      width: 100%;
      font-size: 12px;
      opacity: 0.5;
      user-select: text;
    }

    /* Wallpaper */
    #lock-wallpaper,
    #home-wallpaper {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      filter: brightness(0.6);
      z-index: -1;
      transition: background-image 0.5s ease;
    }

    #home-wallpaper {
      filter: brightness(0.7);
    }


    /* Lock Screen */
    #lock-info {
      margin-top: -100px;
      margin-bottom: 331px;
    }

    #lock-screen {
      color: white;
      font-weight: 400;
      user-select: none;
    }

    #lock-date {
      font-size: 22px;
      margin-top: 140px;
      letter-spacing: 1px;
      opacity: 0.8;
      user-select: text;
    }

    #lock-time {
      font-size: 62px;
      margin-top: 6px;
      letter-spacing: 2px;
      user-select: text;
    }

    #fingerprint-icon {
      margin-top: 30px;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: white;
      opacity: 0.7;
      box-shadow: 0 0 12px white;
      animation: pulse 2.5s infinite;
      user-select: none;
    }

    /* Home Screen */
    #home-screen {
      user-select: none;
    }

    #home-clock {
      font-size: 48px;
      margin-top: 40px;
      letter-spacing: 2px;
      font-weight: 600;
      color: white;
      text-shadow: 0 0 5px black;
      user-select: text;
    }

    .app-icons {
      margin-top: 70px;
      display: flex;
      justify-content: center;
      gap: 6px;
      flex-wrap: wrap;
      max-width: 320px;
      margin-left: auto;
      margin-right: auto;
    }

    .app-icon {
      width: 68px;
      height: 68px;
      background: #3a3a3a;
      border-radius: 18px;
      box-shadow: 0 3px 10px #0008 inset;
      color: white;
      font-weight: 700;
      font-size: 14px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      user-select: none;
      transition: background 0.3s ease, transform 0.2s ease;
    }

    .app-icon:hover {
      background: #5b5b5b;
      transform: scale(1.1);
    }

    /* Settings Screen */
    #settings-screen,
    #theme-screen,
    #about-screen {
      color: white;
      padding-top: 40px;
      user-select: text;
    }

    #settings-screen h1,
    #theme-screen h1,
    #about-screen h1 {
      margin-bottom: 20px;
      font-weight: 700;
      font-size: 28px;
    }

    .menu-item {
      padding: 16px 20px;
      background: #222;
      margin: 12px 0;
      border-radius: 15px;
      font-size: 18px;
      cursor: pointer;
      user-select: none;
      transition: background 0.3s ease;
    }

    .menu-item:hover {
      background: #3b82f6;
      color: white;
    }

    button.back-button {
      margin-top: 40px;
      padding: 10px 28px;
      font-size: 16px;
      border-radius: 20px;
      border: none;
      background: #3b82f6;
      color: white;
      cursor: pointer;
      user-select: none;
      transition: background 0.3s ease;
    }

    button.back-button:hover {
      background: #2563eb;
    }

    /* Wallpaper picker */
    .wallpaper-options {
      display: flex;
      justify-content: center;
      gap: 15px;
      flex-wrap: wrap;
      max-width: 300px;
      margin: 0 auto;
      user-select: none;
    }

    .wallpaper-thumb {
      width: 80px;
      height: 140px;
      border-radius: 15px;
      background-size: cover;
      background-position: center;
      border: 3px solid transparent;
      cursor: pointer;
      box-shadow: 0 0 5px #0008 inset;
      transition: border-color 0.3s ease, transform 0.2s ease;
    }

    .wallpaper-thumb.selected {
      border-color: #3b82f6;
      transform: scale(1.05);
      box-shadow: 0 0 12px #3b82f6aa inset;
    }

    /* Fingerprint pulse animation */
    @keyframes pulse {
      0% {
        opacity: 1;
        transform: scale(1);
      }

      50% {
        opacity: 0.7;
        transform: scale(1.1);
      }

      100% {
        opacity: 1;
        transform: scale(1);
      }
    }

    /* Camera Screen */
    #camera-screen {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: white;
      padding: 20px;
    }

    .camera-viewfinder {
      width: 100%;
      height: 400px;
      background: #222;
      border-radius: 15px;
      box-shadow: 0 0 10px #0008 inset;
      position: relative;
      margin-bottom: 20px;
    }

    .camera-button {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: #3b82f6;
      box-shadow: 0 0 10px #3b82f6aa;
      cursor: pointer;
      transition: background 0.3s ease, transform 0.2s ease;
    }

    .camera-button:hover {
      background: #2563eb;
      transform: scale(1.1);
    }

    /* Mobile */
    @media (max-width: 768px) {
      #power-button {
        right: 10px;
      }
    }