body{margin-top:0;background-color:#fff;display:flex;justify-content:center;overflow-x:hidden}.main{margin:10px;max-width:768px;background-color:#fff;color:#666;font-size:.12rem;line-height:1.4;display:flex;flex-wrap:wrap;justify-content:center;padding:0}.logo{vertical-align:middle;width:40px;height:40px;margin:10px auto;display:inline-block}.seperator{width:100%;height:1px;background-color:#e3e3e3;margin:10px 0}.output{width:100%;font-size:15px;margin:15px;text-align:left;color:#333}.button{width:90%;height:40px;background-color:#ffde06;border:1px solid #000;border-radius:10px;text-align:center;padding:10px;margin:15px 0;cursor:pointer;color:#000;font-size:15px}.recommend{font-size:18px;color:#333;margin:10px;text-align:left;width:100%}.recommend span{font-size:12px;color:#c0c1c4}.icon-list{display:flex;flex-wrap:wrap;justify-content:space-between;width:100%}.icon-item{width:19%;text-align:center;margin:5px;cursor:pointer;text-decoration:none}.icon-item img{width:50px;height:50px;border-radius:10px;margin-bottom:5px}.icon-item span{font-size:14px;color:#000;font-weight:500}.footer{width:100%;text-align:center;color:#c0c1c4;font-size:12px;margin:20px 0}.footer a{font-size:12px;color:#c0c1c4;text-decoration:none}.recommend .more{float:right;font-size:16px;color:#c0c1c4;line-height:24px}.recommend .copy{font-size:15px;color:#02a982;font-weight:700;cursor:pointer}@font-face{font-family:iconfont;src:url(https://at.alicdn.com/t/c/font_3300257_9l5svzxmqum.woff2?t=1723625069776) format('woff2'),url(https://at.alicdn.com/t/c/font_3300257_9l5svzxmqum.woff?t=1723625069776) format('woff'),url(https://at.alicdn.com/t/c/font_3300257_9l5svzxmqum.ttf?t=1723625069776) format('truetype')}.iconfont{font-family:iconfont!important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-copy:before{content:"\e744"}.tags{text-align:left;padding:5px 5px;width:100%;margin-bottom:-10px}.tags a{font-size:13px;padding:3px 5px;line-height:20px;font-weight:700;background-color:#48b0f7;border-color:#48b0f7;color:#fff!important;text-decoration:none;margin-right:8px;float:left;margin-bottom:10px}.sharebox{position:fixed;left:0;bottom:0;width:100%;background-color:#fff;color:#fff;text-align:center;padding:0 0;border-top:solid 1px #e3e3e3}.logobox{display:flex;align-items:center;}.logobox h2{font-size:30px;display:inline-block;margin:0;margin-left:5px;font-weight:500}.recommend .more{float:right;font-size:16px;color:#c0c1c4;line-height:24px;text-decoration:none}.mini-program-tip{font-size:12px;color:#999;margin-left:10px;cursor:pointer;text-decoration:underline}
        .back { font-size: 0.4rem; line-height: 2rem; width: 12px; height: 12px; border-left: 0.16rem solid #b4b3b3; border-bottom: 0.16rem solid #b4b3b3; margin: 0.3rem 0 0.3rem 0.32rem; transform: rotate(45deg); -webkit-transform: rotate(45deg); overflow: hidden; z-index: 5; position: absolute; top: 15px; left: 18px; }
        .logobox h2 { font-size: 22px; display: inline-block; margin: 0 0 0 5px; font-weight: 500; }
        
/* === 5. iPhone 椋庢牸棰勮寮圭獥 === */
.modal-mask {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    height: 100dvh; 
    background: #8e8e93;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    z-index: 999; 
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end; 
    opacity: 0; pointer-events: none; transition: opacity 0.3s;
    /* 鍑忓皯搴曢儴鐨� padding锛屽洜涓虹幇鍦ㄦ寜閽珮搴﹀彉鐭簡锛屽彲浠ョ粰鍐呭鏇村绌洪棿 */
    padding: calc(10px + var(--safe-area-top)) 0 calc(15px + var(--safe-area-bottom));
    box-sizing: border-box; 
}
.modal-mask.visible { opacity: 1; pointer-events: auto; }

.preview-card {
	margin-top:15px;
    background: transparent; box-shadow: none; padding: 0;
    width: 90%; max-width: 380px;
    flex: 1; min-height: 0; margin-bottom: 12px; /* 鍑忓皬闂磋窛 */
    display: flex; flex-direction: column;
    transform: scale(0.95); transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}
.modal-mask.visible .preview-card { transform: scale(1); }

.iphone-bezel {
    width: 100%; height: 100%; background: #000; border-radius: 38px; 
    padding: 6px; display: flex; flex-direction: column;
    box-shadow: 0 0 0 1px #333, 0 30px 60px rgba(0,0,0,0.5);
    position: relative; overflow: hidden;
}

.screen-content {
    flex: 1; background: #fff; border-radius: 32px; 
    overflow: hidden; position: relative; z-index: 1;
    mask-image: radial-gradient(white, black); -webkit-mask-image: -webkit-radial-gradient(white, black);
    display: flex; flex-direction: column;
}

.preview-iframe {
    width: 100%; height: 100%; flex: 1; border: none; background: #fff;
}

.on-screen-home-bar {
    position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
    width: 130px; height: 5px; background: rgba(255,255,255,0.3);
    border-radius: 100px; z-index: 100; pointer-events: none;
    backdrop-filter: blur(2px);
}

.status-bar {
    height: 44px; position: absolute; top: 6px; left: 6px; right: 6px; z-index: 10;
    display: flex; justify-content: space-between; align-items: center; padding: 0 18px;
    color: #fff; font-weight: 600; font-size: 14px; pointer-events: none;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.dynamic-island {
    position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
    width: 90px; height: 28px; background: #000; border-radius: 20px;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 20; pointer-events: auto; overflow: hidden;
}
.dynamic-island.expanded { width: 170px; height: 32px; }
.island-camera {
    width: 6px; height: 6px; background: #222; border-radius: 50%;
    position: absolute; right: 18px; transition: opacity 0.2s;
}
.island-content {
    color: white; font-size: 11px; opacity: 0; white-space: nowrap;
    font-weight: 500; transition: opacity 0.3s;
}
.dynamic-island.expanded .island-content { opacity: 1; }
.dynamic-island.expanded .island-camera { opacity: 0; }
.sb-left, .sb-right { width: 60px; display: flex; align-items: center; gap: 5px; }
.sb-right { justify-content: flex-end; font-size: 11px; gap: 6px; }

/* === 搴曢儴鎿嶄綔鏍� (鏂� v1.2: 妯悜鎺掑垪锛岃妭鐪侀珮搴�) === */
.preview-action-bar {
    width: 90%; max-width: 380px;
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;
    padding-bottom: 20px; flex-shrink: 0;padding-top: 10px;
}
.p-action-btn {
    display: flex; 
    flex-direction: row; /* 鏀逛负妯悜 */
    align-items: center; justify-content: center;
    gap: 6px; /* 鍥炬爣鏂囧瓧闂磋窛 */
    height: 44px; /* 鍘嬬缉楂樺害 (鍘�56px) */
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px; /* 鍦嗚绋嶅井鏀瑰皬涓€鐐圭偣閫傚簲鎵佸钩 */
    color: #fff; cursor: pointer; transition: all 0.2s;
}
.p-action-btn:active { transform: scale(0.95); background: rgba(255, 255, 255, 0.25); }
.p-action-btn i { font-size: 16px; margin-bottom: 0; }
.p-action-btn span { font-size: 13px; font-weight: 500; opacity: 0.9; line-height: 1; }

.p-action-btn.close-btn { background: rgb(244 67 54 / 47%); border-color: rgba(255,255,255,0.1); }
.p-action-btn.make-btn { background: rgba(0, 122, 255, 0.6); box-shadow: 0 4px 10px rgba(0, 122, 255, 0.3); }
#previewModal{display: none;}
@font-face {
  font-family: 'iconfont';  /* Project id 3300257 */
  src: url('https://at.alicdn.com/t/c/font_3300257_zfxow6p35o.woff2?t=1767163279946') format('woff2'),
	   url('https://at.alicdn.com/t/c/font_3300257_zfxow6p35o.woff?t=1767163279946') format('woff'),
	   url('https://at.alicdn.com/t/c/font_3300257_zfxow6p35o.ttf?t=1767163279946') format('truetype');
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-close:before {content: "\e605";}
.icon-share:before {content: "\e764";}
.icon-make:before {content: "\e61c";}

.toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    padding: 15px 25px;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    border-radius: 6px;
    font-size: 16px;
    z-index: 9999;
    transition: transform 0.3s ease;
    pointer-events: none; /* 涓嶉樆鎸＄偣鍑� */
}

/* 鎻愮ず妗嗘樉绀虹姸鎬� */
.toast.show {
    transform: translate(-50%, -50%) scale(1);
}