:root{
    --primary:#d3145a;
    --primary-dark:#a50f46;
    --text:#222;
    --muted:#6b7280;
    --bg1:#fff5f8;
    --bg2:#fffdf7;
    --border:#f0d8e1;
    --shadow:0 12px 35px rgba(0,0,0,.10);
    --radius:22px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*{
    box-sizing:border-box;
}

html, body{
    margin:0;
    padding:0;
    width:100%;
    min-height:100%;
    overflow-x:hidden;
    font-family:"Sarabun","Prompt","Helvetica Neue",Arial,sans-serif;
    color:var(--text);
    background:
        radial-gradient(circle at top left, #ffe9f1 0%, transparent 35%),
        radial-gradient(circle at top right, #fff5cf 0%, transparent 28%),
        linear-gradient(180deg, var(--bg1) 0%, #fff 45%, var(--bg2) 100%);
}

body{
    padding:16px 0 calc(110px + var(--safe-bottom));
}

img{
    max-width:100%;
    height:auto;
}

.main-shell{
    width:100%;
    max-width:100%;
    margin:0 auto;
    padding:0 12px;
}

.app-container{
    padding-left:0;
    padding-right:0;
}

.hero-header{
    text-align:center;
    margin-bottom:18px;
    padding:4px 2px 0;
}

.hero-badge{
    display:inline-block;
    background:rgba(255,255,255,.85);
    border:1px solid rgba(211,20,90,.15);
    color:var(--primary-dark);
    padding:8px 16px;
    border-radius:999px;
    font-size:14px;
    font-weight:700;
    box-shadow:0 6px 18px rgba(0,0,0,.05);
    margin-bottom:12px;
}

.hero-title{
    margin:0;
    font-size:clamp(26px, 4vw, 42px);
    line-height:1.2;
    font-weight:800;
    color:#8d123e;
}

.hero-subtitle{
    margin:10px auto 0;
    max-width:760px;
    color:var(--muted);
    font-size:16px;
    line-height:1.7;
}

.step-card{
    background:rgba(255,255,255,.94);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    overflow:hidden;
    backdrop-filter:blur(6px);
}

.step-card-inner{
    padding:24px;
}

.step-label{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:42px;
    height:42px;
    border-radius:999px;
    background:linear-gradient(135deg, var(--primary), #ff5a92);
    color:#fff;
    font-weight:800;
    box-shadow:0 8px 20px rgba(211,20,90,.25);
    margin-bottom:16px;
}

h2{
    margin:0 0 12px;
    font-size:clamp(22px, 3vw, 32px);
    font-weight:800;
    color:#202124;
}

p{
    line-height:1.75;
    color:#4b5563;
    margin:0 0 14px;
}

.profile-intro-text{
    text-align:center;
}

.btn{
    border-radius:14px;
    padding:12px 22px;
    font-size:16px;
    font-weight:700;
    transition:all .2s ease;
    border:none;
    box-shadow:none;
}

.btn:focus,
.btn:active{
    outline:none !important;
    box-shadow:none !important;
}

.btn-primary{
    background:linear-gradient(135deg, var(--primary), #ff4f88);
    color:#fff;
}

.btn-primary:hover{
    background:linear-gradient(135deg, var(--primary-dark), var(--primary));
    transform:translateY(-1px);
    color:#fff;
}

.btn-default{
    background:#f3f4f6;
    color:#374151;
    border:1px solid #e5e7eb;
}

.btn-default:hover{
    background:#e9edf2;
    color:#111827;
}

.btn-file{
    position:relative;
    overflow:hidden;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-width:190px;
    min-height:52px;
    margin-bottom:18px;
}

.btn-file input[type=file]{
    position:absolute;
    top:0;
    right:0;
    min-width:100%;
    min-height:100%;
    opacity:0;
    cursor:pointer;
}

.info-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    align-items:start;
    margin-top:24px;
}

.info-box{
    background:#fff;
    border:1px solid #f1e3ea;
    border-radius:18px;
    padding:18px;
    height:100%;
}

.info-box h3{
    margin:0 0 10px;
    font-size:18px;
    color:#8d123e;
    font-weight:800;
}

.guide-image,
.cover-image{
    width:100%;
    max-width:100%;
    height:auto;
    display:block;
    margin:14px auto 0;
    border-radius:16px;
    box-shadow:0 8px 24px rgba(0,0,0,.08);
}

.browser-icons{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    margin-top:12px;
    font-weight:700;
    color:#374151;
}

.browser-icons img{
    height:30px;
    width:auto;
    vertical-align:middle;
}

.create-wrapper{
    display:grid;
    grid-template-columns:minmax(280px, 560px) minmax(260px, 1fr);
    gap:28px;
    align-items:center;
}

.result-wrapper{
    display:grid;
    grid-template-columns:1fr;
    gap:18px;
    align-items:start;
}

.create-image-wrapper,
.result-image-wrapper{
    background:linear-gradient(180deg, #fff, #fff8fb);
    border:1px solid #f2d9e4;
    border-radius:20px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}

.create-image-wrapper{
    padding:18px;
}

.result-image-wrapper{
    padding:10px;
    overflow:hidden;
}

.crop-wrapper{
    position:relative;
    width:100%;
    max-width:420px;
    margin:0 auto;
    border-radius:20px;
    overflow:hidden;
    background:
        linear-gradient(45deg, #f7f7f7 25%, #ffffff 25%, #ffffff 50%, #f7f7f7 50%, #f7f7f7 75%, #ffffff 75%, #ffffff 100%);
    background-size:24px 24px;
    border:2px dashed #ead1db;
}

.frame-overlay{
    position:absolute !important;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:100% !important;
    height:100% !important;
    margin:0 !important;
    z-index:10;
    pointer-events:none !important;
}

#profile-frame-design-1{
    display:none;
    width:100% !important;
    height:100% !important;
    object-fit:cover;
}

.create-text-wrapper,
.result-text-wrapper{
    padding:8px 0;
}

.design-picker{
    background:#fff7fa;
    border:1px solid #f3d6e2;
    border-radius:18px;
    padding:18px;
    margin:18px 0 22px;
}

.design-option{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 14px;
    background:#fff;
    border:1px solid #efd6e1;
    border-radius:14px;
    cursor:pointer;
    transition:all .2s ease;
    margin:0;
}

.design-option:hover{
    border-color:#e7b8cb;
    box-shadow:0 8px 20px rgba(211,20,90,.08);
}

.design-option input[type=radio]{
    transform:scale(1.2);
    accent-color:var(--primary);
    margin:0;
}

.action-group{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-items:center;
}

.loader{
    margin-top:12px;
    min-height:24px;
    color:var(--primary-dark);
    font-weight:700;
}

.result-image-output{
    text-align:center;
    width:100%;
}

.result-image-output img{
    display:block;
    width:100%;
    max-width:100%;
    height:auto;
    margin:0 auto;
    border-radius:18px;
    box-shadow:0 12px 30px rgba(0,0,0,.12);
    background:#fff;
}

.alert-warning{
    border-radius:14px;
    border:none;
    background:#fff5d8;
    color:#6d4c00;
    padding:14px 16px;
    font-weight:600;
    line-height:1.6;
}

.mobile-tip{
    margin-bottom:16px;
}

#download{
    min-width:180px;
}

canvas#result-canvas{
    max-width:100%;
    height:auto;
}

.footer-note{
    text-align:center;
    margin-top:26px;
    color:#6b7280;
    font-size:14px;
}

.result-action-bar{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:9999;
    padding:10px 12px calc(10px + var(--safe-bottom));
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-top:1px solid rgba(211,20,90,.12);
    box-shadow:0 -8px 28px rgba(0,0,0,.08);
    display:none;
}

.result-action-inner{
    width:100%;
    max-width:760px;
    margin:0 auto;
    display:flex;
    gap:10px;
}

.result-action-inner .btn{
    flex:1;
    min-height:50px;
}

.result-action-bar.is-visible{
    display:block;
}

/* Croppie */
.crop-wrapper .cr-boundary{
    margin:0 auto;
    border-radius:18px;
}

.crop-wrapper .cr-viewport{
    box-shadow:0 0 0 9999px rgba(255,255,255,.2);
    border:2px solid rgba(255,255,255,.95);
}

.crop-wrapper .cr-slider-wrap{
    width:100%;
    max-width:340px;
    margin:14px auto 4px;
    padding:0 4px;
}

.crop-wrapper .cr-slider{
    width:100%;
}

@media (max-width: 991px){
    .create-wrapper,
    .info-grid{
        grid-template-columns:1fr;
    }

    .step-card-inner{
        padding:22px 18px;
    }

    .crop-wrapper{
        max-width:360px;
    }

    .create-text-wrapper,
    .result-text-wrapper{
        text-align:center;
    }

    .action-group{
        justify-content:center;
    }
}

@media (max-width: 576px){
    body{
        padding:12px 0 calc(110px + var(--safe-bottom));
    }

    .main-shell{
        padding:0 10px;
    }

    .hero-title{
        font-size:28px;
    }

    .hero-subtitle{
        font-size:15px;
    }

    .step-card-inner{
        padding:18px 14px;
    }

    .btn,
    .btn-file{
        width:100%;
    }

    .action-group .btn,
    .action-group a.btn{
        width:100%;
    }

    .crop-wrapper{
        max-width:300px;
    }

    .guide-image,
    .cover-image{
        border-radius:12px;
    }

    .result-image-wrapper{
        padding:0;
        border-radius:18px;
    }

    .result-image-output img{
        width:100%;
        max-width:100%;
        border-radius:18px;
    }

    .result-desktop-actions{
        display:none;
    }
}