:root{
     --bg:#fff2c6;
     --card:#ffffff;
     --accent:#f82b00;
     --text:#f82b00;
     --muted:#7b5d4c;
     --shadow:0 12px 28px rgba(0,0,0,.08);
}
 *{
     margin:0;
     padding:0;
     box-sizing:border-box;
}
 html{
     width:100%;
     min-height:100%;
}
 body{
     font-family:"Work Sans",sans-serif;
     background:var(--bg);
     color:var(--text);
     width:100%;
     min-height:100%;
     overflow-x:hidden;
}
 .memory-page{
     max-width:560px;
     margin:auto;
     min-height:100vh;
     padding:35px 22px;
     display:flex;
     flex-direction:column;
     align-items:center;
}
 .memory-logo{
     width:120px;
     margin-bottom:20px;
}
 h1{
     font-size:32px;
     font-weight:700;
     color:var(--accent);
     text-align:center;
}
 .subtitle{
     margin-top:10px;
     margin-bottom:35px;
     text-align:center;
     color:var(--muted);
     line-height:1.5;
     font-size:16px;
}
 .theme-grid{
     width:100%;
     display:flex;
     flex-direction:column;
     gap:22px;
}
 .theme-card{
     display:block;
     background:var(--card);
     border-radius:24px;
     overflow:hidden;
     box-shadow:var(--shadow);
     text-decoration:none;
     color:inherit;
     transition:.25s;
}
 .theme-card:hover{
     transform:translateY(-4px);
     box-shadow:0 20px 40px rgba(0,0,0,.12);
}
 .theme-card img{
     width:100%;
     display:block;
}
 .theme-card h2{
     margin:20px 20px 10px;
     color:var(--accent);
     font-size:24px;
}
 .theme-card p{
     margin:0 20px 22px;
     color:var(--muted);
     line-height:1.5;
}
 .back-link{
     margin-top:35px;
     color:var(--muted);
     text-decoration:none;
     font-weight:600;
     transition:.25s;
}
 .back-link:hover{
     color:var(--accent);
}
 @media(max-width:700px){
     .memory-page{
         padding:25px 16px;
    }
     .memory-logo{
         width:95px;
    }
     h1{
         font-size:28px;
    }
     .theme-card h2{
         font-size:21px;
    }
     .camera-page{
         padding:15px;
    }
     .capture-btn{
         width:62px;
         height:62px;
    }
     .icon-btn{
         width:54px;
         height:54px;
    }
     .toast{
         width:calc(100% - 30px);
         min-width:auto;
    }
}
/*---------------------------------- Kamera ----------------------------------*/
 .camera-page{
     width:100%;
     max-width:520px;
     margin:auto;
     min-height:100svh;
     display:flex;
     flex-direction:column;
     padding:20px;
     padding-bottom:120px;
}
 .camera-wrapper{
     position:relative;
     width:100%;
     overflow:hidden;
     border-radius:22px;
     box-shadow:var(--shadow);
}
 #camera{
     width:100%;
     aspect-ratio:9/16;
     object-fit:cover;
     background:#000;
}
 .frame-overlay{
     position:absolute;
     inset:0;
     width:100%;
     height:100%;
     pointer-events:none;
     object-fit:cover;
}
 .loading{
     text-align:center;
     margin-bottom:25px;
}
 .loading i{
     font-size:42px;
     color:var(--accent);
     margin-bottom:15px;
}
 .loading h2{
     margin-bottom:8px;
}
 .loading p{
     color:var(--muted);
}
 .camera-actions{
     position:fixed;
     left:0;
     right:0;
     bottom:max(20px, env(safe-area-inset-bottom));
     display:flex;
     justify-content:center;
     gap:25px;
     z-index:1000;
}
 .capture-btn{
     width:68px;
     height:68px;
     display:flex;
     justify-content:center;
     align-items:center;
     border:none;
     border-radius:50%;
     cursor:pointer;
     background:var(--accent);
     color:#fff;
     font-size:24px;
     box-shadow:var(--shadow);
     transition:.20s;
}
 .icon-btn{
     width:58px;
     height:58px;
     border:none;
     border-radius:50%;
     background:#ffffff;
     color:var(--accent);
     display:flex;
     justify-content:center;
     align-items:center;
     cursor:pointer;
     box-shadow:var(--shadow);
     transition:transform .35s, background .25s;
}
 .preview-actions{
     display:flex;
     flex-direction:column;
     gap:14px;
     margin-top:25px;
}
 .preview-actions button{
     width:100%;
     height:56px;
     border:none;
     border-radius:16px;
     font-family:inherit;
     font-size:16px;
     font-weight:600;
     cursor:pointer;
     transition:.20s;
     -webkit-tap-highlight-color:transparent;
}
 .primary-btn{
     background:var(--accent);
     color:#ffffff;
}
 .secondary-btn{
     background:#ffffff;
     color:var(--accent);
     box-shadow:var(--shadow);
}
 .preview-image{
     width:100%;
     display:block;
     border-radius:26px;
     box-shadow:var(--shadow);
}
 .toast{
     position:fixed;
     top:20px;
     left:50%;
     transform:translateX(-50%) translateY(-80px);
     background:var(--accent);
     color:#ffffff;
     padding:14px 22px;
     border-radius:14px;
     display:flex;
     align-items:center;
     gap:10px;
     box-shadow:var(--shadow);
     transition:.30s;
     z-index:99999;
     min-width:260px;
     justify-content:center;
     user-select:none;
}
 .toast.show{
     transform:translateX(-50%) translateY(0);
}
 .toast i{
     font-size:20px;
}
/* =========================== COUNTDOWN =========================== */
 .countdown{
     position:fixed;
     inset:0;
     display:flex;
     justify-content:center;
     align-items:center;
     font-size:120px;
     font-weight:700;
     color:#ffffff;
     text-shadow:0 0 25px rgba(0,0,0,.45);
     opacity:0;
     pointer-events:none;
     z-index:9999;
     transition:.2s;
}
 .countdown.show{
     opacity:1;
}
/* =========================== FLASH =========================== */
 .flash{
     position:fixed;
     inset:0;
     background:#ffffff;
     opacity:0;
     pointer-events:none;
     transition:.15s;
     z-index:99999;
}
 .flash.show{
     opacity:1;
}
 .preview-actions button:active, .capture-btn:active, .icon-btn:active{
     transform:scale(.96);
}