* { margin: 0; padding: 0; box-sizing: border-box; }

        :root {
            --card:    #FBF7EE;
            --ink:     #3A2E26;
            --ink-soft:#6F6055;
            --coral:   #E07A5F;
            --coral-d: #C05C42;
            --brass:   #C79A3E;
            --brass-d: #8E6C22;
            --cream:   #FFF6EC;
        }

        html, body { height: 100%; }

        body {
            font-family: 'Baloo Bhaijaan 2', sans-serif;
            background: #E9E0CD;
            background-image:
                radial-gradient(circle at 16% 14%, rgba(224,122,95,0.13) 0 28%, transparent 60%),
                radial-gradient(circle at 84% 80%, rgba(131,161,123,0.13) 0 26%, transparent 58%),
                repeating-linear-gradient(0deg, transparent 0 27px, rgba(58,46,38,0.04) 27px 28px);
            color: var(--ink);
            display: flex;
            justify-content: center;
            align-items: center;
            padding: max(16px, env(safe-area-inset-top)) 18px max(16px, env(safe-area-inset-bottom));
            overflow-x: hidden;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            -webkit-text-size-adjust: 100%;
        }

  
        .book {
            position: relative;
            display: flex;
            width: min(340px, 88vw);
            min-height: min(448px, 88vh);
            margin: auto;
            transition: opacity 0.45s ease, transform 0.45s ease;
        }

        .book.leaving { opacity: 0; transform: scale(0.97); }

        .book.shake { animation: shakeBook 0.5s ease; }

        @keyframes shakeBook {
            0%, 100% { transform: translateX(0); }
            20%      { transform: translateX(-9px) rotate(-0.6deg); }
            40%      { transform: translateX(8px)  rotate(0.6deg); }
            60%      { transform: translateX(-6px); }
            80%      { transform: translateX(5px); }
        }

        .cover {
            position: relative;
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            color: var(--cream);
            padding: clamp(16px, 4.5vh, 24px) clamp(16px, 5vw, 24px) clamp(14px, 3vh, 18px);
            border-radius: 4px 14px 14px 4px;
            background: linear-gradient(150deg, #C96A50, #E07A5F 52%, #D46B4F);
            box-shadow:
                0 22px 50px rgba(58,46,38,0.34),
                inset 0 0 0 1px rgba(255,255,255,0.16);
        }

        .cover::before {
            content: '';
            position: absolute;
            top: 0; bottom: 0; right: 0;
            width: 19px;
            border-radius: 4px 0 0 4px;
            background: linear-gradient(90deg, rgba(0,0,0,0.3), transparent);
        }

       
        .head {
            flex: 1;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 6px 0;
        }

      
        .snap {
            flex: 0 0 auto;
            background: #fff;
            padding: 7px 7px 0;
            border-radius: 2px;
            transform: rotate(-3deg);
            box-shadow: 0 8px 18px rgba(58,46,38,0.3);
            margin-bottom: 4px;
        }

        .snap .ph {
            width: clamp(70px, 26vw, 98px);
            aspect-ratio: 1.22;
            overflow: hidden;
            border-radius: 1px;
            background: linear-gradient(140deg, #E9C6B7, #D9A08C);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .snap .ph img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .snap .cp {
            font-family: 'Caveat', cursive;
            font-size: 15px;
            color: var(--ink-soft);
            padding: 2px 0 4px;
        }

     
        .cover h1,
        .cover .sub {
            max-width: 100%;
            overflow-wrap: anywhere;
            word-break: break-word;
        }

        .cover h1 {
            font-family: 'Marhey', cursive;
            font-weight: 700;
            font-size: clamp(21px, 6.2vw, 29px);
            line-height: 1.45;
            padding-bottom: 2px;
        }

        .cover .sub {
            font-family: 'Caveat', cursive;
            font-size: clamp(16px, 4.6vw, 20px);
            line-height: 1.5;
            opacity: 0.92;
            padding-bottom: 2px;
        }

    
        .band {
            position: relative;
            flex: 0 0 auto;
            width: 100%;
            height: 54px;
            margin: clamp(8px, 2vh, 16px) 0 clamp(10px, 2.4vh, 18px);
        }

        .strap {
            position: absolute;
            top: 50%;
            left: clamp(-32px, -5vw, -24px);
            right: clamp(-32px, -5vw, -24px);
            height: 19px;
            z-index: 2;
            border-radius: 2px;
            transform: translateY(-50%) rotate(-1deg);
            background: linear-gradient(180deg, #8A5B45, #6E4634);
            box-shadow: 0 3px 7px rgba(0,0,0,0.26);
            transition: transform 0.8s cubic-bezier(0.5,0.05,0.2,1), opacity 0.6s ease 0.25s;
        }

        .book.unlocked .strap {
            transform: translateY(-50%) rotate(-1deg) scaleX(0);
            opacity: 0;
        }

        .lock {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 50px;
            z-index: 3;
            transform: translate(-50%, -50%);
            transition: transform 0.85s cubic-bezier(0.4,0.1,0.2,1), opacity 0.5s ease 0.4s;
        }

        .book.unlocked .lock {
            transform: translate(-50%, calc(-50% + 34px)) rotate(-24deg);
            opacity: 0;
        }

        .lock .shackle {
            width: 27px;
            height: 20px;
            margin: 0 auto -5px;
            border: 5px solid var(--brass);
            border-bottom: 0;
            border-radius: 14px 14px 0 0;
            transform-origin: right bottom;
            transition: transform 0.5s cubic-bezier(0.5,-0.4,0.3,1.5);
        }

        .book.unlocked .lock .shackle { transform: rotate(-42deg) translateY(-4px); }

        .lock .lock-body {
            width: 47px;
            height: 37px;
            margin: 0 auto;
            border-radius: 7px;
            background: linear-gradient(160deg, #E0B85A, var(--brass) 55%, var(--brass-d));
            box-shadow: inset 0 -3px 5px rgba(0,0,0,0.25), 0 4px 9px rgba(0,0,0,0.3);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .lock .lock-body i {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #6B4E12;
            box-shadow: 0 6px 0 -1.5px #6B4E12;
        }

        /* ===== الفورم ===== */
        .form { flex: 0 0 auto; width: 100%; position: relative; z-index: 4; }

        .row { position: relative; }

      
        .row input {
            width: 100%;
            height: 46px;
            border: 0;
            border-radius: 23px;
            padding: 0 18px 0 50px;
            font-family: 'Caveat', cursive;
            font-size: 23px;
            font-weight: 600;
            color: var(--ink);
            text-align: center;
            letter-spacing: 0.5px;
            background: rgba(255,255,255,0.96);
            outline: none;
            -webkit-appearance: none;
            appearance: none;
            box-shadow: inset 0 1px 3px rgba(58,46,38,0.18);
            transition: box-shadow 0.2s ease;
        }

        .row input:focus {
            box-shadow: inset 0 1px 3px rgba(58,46,38,0.18), 0 0 0 3px rgba(255,255,255,0.5);
        }

        .row input::placeholder {
            color: #B9AA9C;
            font-size: 19px;
            font-weight: 500;
            letter-spacing: 0;
        }

        .key-btn {
            position: absolute;
            left: 4px;
            top: 4px;
            width: 38px;
            height: 38px;
            border: 0;
            border-radius: 50%;
            cursor: pointer;
            background: var(--coral);
            font-size: 16px;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 3px 7px rgba(58,46,38,0.26);
            transition: transform 0.18s ease;
        }

        .key-btn:hover  { transform: scale(1.07); }
        .key-btn:active { transform: scale(0.94); }

     
        .error-msg {
            min-height: 22px;
            margin-top: 6px;
            font-family: 'Caveat', cursive;
            font-size: 18px;
            line-height: 1.3;
            color: #FFE2DC;
            overflow-wrap: anywhere;
        }

        .error-msg b {
            display: inline-block;
            max-width: 100%;
            padding: 2px 14px;
            border-radius: 14px;
            font-weight: 400;
            background: rgba(120,30,22,0.42);
        }

        /* ===== شاشات قصيرة (موبايل أفقي) ===== */
        @media (max-height: 560px) {
            .snap { display: none; }
            .band { height: 46px; }
        }

        /* ===== احترام تقليل الحركة ===== */
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }