/* ============================================================
   Alipay 工具页共用样式（alipay-tools.css）
   供 Alipay 目录下各工具页使用：页面布局 / 按钮 / 生成结果弹窗 / 暗黑模式
   类名前缀 alit- 避免与主体冲突
   ============================================================ */
.alit-wrap{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-start;justify-content:space-between}
.alit-left{flex:1 1 380px;min-width:300px;max-width:540px}
.alit-right{flex:1 1 420px;min-width:320px;display:flex;justify-content:center}
.alit-preview{width:100%}
.alit-preview-fit{position:relative;display:flex;justify-content:center;align-items:flex-start}
.alit-preview-fit .iphone{flex-shrink:0}
.alit-card{background:#fff;border:1px solid #e3e6ea;border-radius:12px;padding:18px;box-shadow:0 4px 16px rgba(15,23,42,.05)}
.alit-card+.alit-card{margin-top:16px}
.alit-tabs{display:flex;gap:8px;margin:0 0 16px;padding:0;list-style:none;flex-wrap:wrap}
.alit-tab{border:1px solid #d3d9e2;background:#fff;color:#333;border-radius:8px;padding:8px 18px;font-size:14px;cursor:pointer;transition:.2s;font-weight:500}
.alit-tab:hover{border-color:#ff6500;color:#ff6500}
.alit-tab.active{background:linear-gradient(135deg,#ff6500,#ff8627);color:#fff;border-color:transparent}
.alit-pane{display:none}
.alit-pane.active{display:block}
.alit-row{display:flex;align-items:center;gap:10px;margin:10px 0;flex-wrap:wrap;font-size:14px;color:#333}
.alit-row>span{flex:0 0 86px;color:#5b6772;font-size:14px;text-align:right}
.alit-row input[type=text],.alit-row input[type=number],.alit-row select,.alit-row textarea{flex:1 1 180px;min-width:140px;background:#fff;border:1px solid #d3d9e2;border-radius:8px;padding:8px 12px;font-size:14px;color:#333;outline:none;box-sizing:border-box;transition:.2s}
.alit-row input:focus,.alit-row select:focus,.alit-row textarea:focus{border-color:#ff6500}
.alit-row textarea{resize:vertical;min-height:64px}
.alit-row label{display:inline-flex;align-items:center;gap:4px;font-size:14px;color:#333;cursor:pointer;margin:0 10px 0 0}
.alit-btn{border-radius:8px;padding:8px 16px;font-size:14px;cursor:pointer;border:1px solid #d3d9e2;background:#fff;color:#333;transition:.2s;font-weight:500;display:inline-block;text-decoration:none;line-height:1.5}
.alit-btn:hover{border-color:#ff6500;color:#ff6500;text-decoration:none}
.alit-btn-primary{background:linear-gradient(135deg,#ff6500,#ff8627);border-color:transparent;color:#fff}
.alit-btn-primary:hover{opacity:.9;color:#fff;border-color:transparent}
.alit-btn-green{background:linear-gradient(135deg,#3eb575,#5fd08e);border-color:transparent;color:#fff}
.alit-btn-green:hover{opacity:.9;color:#fff;border-color:transparent}
.alit-btn-danger{color:#e5484d;border-color:#f3c1c3}
.alit-btn-danger:hover{background:#fdf0f0;border-color:#e5484d;color:#e5484d}
.alit-btn-sm{padding:6px 12px;font-size:13px}
.alit-hint{font-size:12px;color:#999;margin:4px 0 0 96px;line-height:1.7}
.alit-loading{display:none;font-size:14px;color:#ff6500;background:#fff3e6;border:1px solid #ffd9b8;border-radius:8px;padding:9px 18px}
.alit-loading:before{content:"";display:inline-block;width:14px;height:14px;border:2px solid #ff6500;border-top-color:transparent;border-radius:50%;vertical-align:-2px;margin-right:8px;animation:alitSpin .8s linear infinite}
@keyframes alitSpin{to{transform:rotate(360deg)}}
.alit-sec{border-top:1px dashed #e3e6ea;margin-top:14px;padding-top:14px}
/* 电量滑块 */
.alit-bar{display:inline-flex;align-items:center;gap:8px}
.alit-bar input[type=range]{width:200px;accent-color:#ff6500}
.alit-bar-btn{width:28px;height:28px;line-height:26px;text-align:center;border:1px solid #d3d9e2;border-radius:50%;background:#fff;color:#333;cursor:pointer;user-select:none;font-size:16px}
.alit-bar-btn:hover{border-color:#ff6500;color:#ff6500}
/* 生成按钮 */
.alit-make{margin-top:18px}
.alit-make .alit-btn{width:100%;padding:12px 20px;font-size:16px;border-radius:10px}
/* 预览区 */
.alit-preview{background:#fff;border:1px solid #e3e6ea;border-radius:12px;padding:20px;box-shadow:0 4px 16px rgba(15,23,42,.05)}
.alit-preview-fit{overflow:hidden}
/* 表情面板 */
.alit-emoji{position:fixed;z-index:9998;background:#fff;border:1px solid #e3e6ea;border-radius:10px;box-shadow:0 12px 32px rgba(15,23,42,.15);padding:10px;display:none}
.alit-emoji-title{font-size:12px;color:#999;margin-bottom:8px}
.alit-emoji-list{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;max-width:340px}
.alit-emoji-list img{width:24px;height:24px;cursor:pointer;transition:.15s}
.alit-emoji-list img:hover{transform:scale(1.25)}
/* ============ 生成结果弹窗（主体样式：居中卡片+下载+关闭） ============ */
.alit-modal{position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:100001!important;display:none;align-items:center;justify-content:center}
.alit-modal.show{display:flex}
.alit-result-box{max-width:560px;width:auto;min-width:320px;max-height:calc(100vh - 12px);padding:0;background:#fff;border-radius:12px;box-shadow:0 18px 50px rgba(15,23,42,.30);overflow:hidden;display:flex;flex-direction:column}
.alit-result-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #e6e9ef;border-radius:12px 12px 0 0;background:linear-gradient(135deg,#f7f9fc,#eef1f7);flex:0 0 auto}
.alit-result-head h5{margin:0;font-size:17px;font-weight:600;color:#1f2d3d}
.alit-result-close{background:none;border:none;font-size:22px;color:#7b8591;background:rgba(0,0,0,.05);border-radius:50%;width:32px;height:32px;line-height:30px;text-align:center;cursor:pointer;padding:0}
.alit-result-close:hover{background:rgba(0,0,0,.10);color:#1f2d3d}
.alit-result-body{padding:18px;text-align:center;overflow:auto;flex:1 1 auto}
.alit-result-img{max-width:100%;max-height:calc(100vh - 230px);min-height:200px;width:auto;height:auto;border:1px solid #e8ebf0;border-radius:10px;background:#f5f6f8;padding:6px;box-sizing:border-box;display:block;margin:0 auto}
.alit-result-tip{margin:8px 0 0;color:#7b8591;font-size:12px}
.alit-result-foot{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid #e6e9ef;border-radius:0 0 12px 12px;background:#f7f9fc;flex:0 0 auto}
.alit-result-download{background:#3b99ff;border:none;color:#fff;border-radius:8px;padding:8px 24px;font-size:14px;line-height:1.5;text-decoration:none;display:inline-block;cursor:pointer}
.alit-result-download:hover{background:#2f8bef;color:#fff;text-decoration:none}
.alit-result-cancel{background:#f3f5f9;border:1px solid #e3e6ea;color:#5b6772;border-radius:8px;padding:8px 24px;font-size:14px;line-height:1.5;cursor:pointer}
.alit-result-cancel:hover{background:#e7ebf1;color:#1f2d3d}
/* ============ 暗黑模式 ============ */
.night .alit-card{background:#222630;border-color:#3a3f48;box-shadow:none}
.night .alit-preview{background:#222630;border-color:#3a3f48;box-shadow:none}
.night .alit-tab{background:#2b2f36;border-color:#3a3f48;color:#b6bcc6}
.night .alit-tab:hover{border-color:#ff8627;color:#ff8627}
.night .alit-tab.active{background:linear-gradient(135deg,#ff6500,#ff8627);color:#fff}
.night .alit-row{color:#b6bcc6}
.night .alit-row>span{color:#9aa2ad}
.night .alit-row input[type=text],.night .alit-row input[type=number],.night .alit-row select,.night .alit-row textarea{background:#1a1d24;border-color:#3a3f48;color:#e6e8eb}
.night .alit-row input:focus,.night .alit-row select:focus,.night .alit-row textarea:focus{border-color:#ff8627}
.night .alit-row label{color:#9aa2ad}
.night .alit-btn{background:#2b2f36;border-color:#3a3f48;color:#b6bcc6}
.night .alit-btn:hover{border-color:#ff8627;color:#ff8627}
.night .alit-hint{color:#8f949b}
.night .alit-emoji{background:#222630;border-color:#3a3f48}
.night .alit-emoji-title{color:#9aa2ad}
.night .alit-result-box{background:#222630;border-color:#3a3f48}
.night .alit-result-head{background:#2b2f36;border-bottom-color:#3a3f48}
.night .alit-result-head h5{color:#e6e8eb}
.night .alit-result-close{color:#9aa2ad;background:rgba(255,255,255,.08)}
.night .alit-result-close:hover{background:rgba(255,255,255,.15);color:#fff}
.night .alit-result-img{border-color:#3a3f48;background:#1a1d24}
.night .alit-result-tip{color:#9aa2ad}
.night .alit-result-foot{background:#20242c;border-top-color:#3a3f48}
.night .alit-result-cancel{background:#2b2f36;border-color:#3a3f48;color:#b6bcc6}
.night .alit-result-cancel:hover{background:#3a3f48;color:#fff}