.image-generation{color:#273e5d;max-width:1500px;margin:0 auto;padding-bottom:100px}
.ig-page-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 24px}
.ig-page-head h1{font-size:30px;letter-spacing:-.035em;margin:3px 0 7px}
.ig-page-head p{font-size:12px;color:#6b7f9b;margin:0;line-height:1.7}
.ig-page-mark{display:grid;place-items:center;width:53px;height:53px;flex:none;border:1px solid #d7e9ff;border-radius:15px;background:linear-gradient(135deg,#edf6ff,#dcecff);color:#4484d5;font-size:29px;box-shadow:0 7px 23px #2563eb10}
.ig-layout{display:grid;grid-template-columns:minmax(310px,.86fr) minmax(0,1.14fr);gap:22px;align-items:start}
.ig-create,.ig-result,.ig-history{min-width:0;overflow:hidden}
.ig-create{padding:25px}
.ig-card-head{margin-bottom:24px}
.ig-step{display:block;font-size:10px;letter-spacing:.13em;font-weight:800;color:#6c91be}
.ig-card-head h2,.ig-history-head h2{font-size:18px;margin:6px 0 5px;color:#2d4d75}
.ig-card-head p{font-size:11px;color:#7187a2;line-height:1.7;margin:0}
.ig-create fieldset{border:0;margin:0;padding:0;min-width:0;display:grid;gap:17px}
.ig-create fieldset:disabled{opacity:.68}
.ig-create .field{font-size:12px;gap:8px}
.ig-create .field .select{font-size:12px}
.ig-field-title{font-size:12px;font-weight:750;color:#3c587c;margin-bottom:-8px}
.ig-field-title span{font-size:10px;font-weight:450;color:#93a2b4}
.ig-ratios{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
.ig-ratios-expanded{grid-template-columns:repeat(4,minmax(0,1fr))}
.ig-ratio{min-height:40px;border:1px solid #d8e5f5;border-radius:8px;background:#f9fbff;color:#5d7592;font-size:11px;font-weight:700}
.ig-ratio:hover:not(:disabled){border-color:#84b3ed;color:#276ab6}
.ig-ratio.active{border-color:#6fa5e8;background:#e9f3ff;color:#2864ae;box-shadow:inset 0 0 0 1px #81b5f4}
.ig-ratio:disabled{opacity:.4}
.ig-resolutions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.ig-task{padding:15px;border:1px solid #cadff6;border-radius:10px;background:#f2f8ff;color:#456b98;margin-top:18px;font-size:11px;line-height:1.7}
.ig-task-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}
.ig-task-heading strong{font-size:13px;color:#315d90}
.ig-task-heading span{font-variant-numeric:tabular-nums;font-weight:750}
.ig-task progress{display:block;width:100%;height:7px;margin:12px 0;accent-color:#3b82f6}
.ig-task p{margin:6px 0}
.ig-task small{display:block;overflow-wrap:anywhere;color:#748ba7;font-size:10px}
.ig-task .btn{min-height:34px;font-size:11px;margin-top:9px}
.ig-task-recovery{margin:0 0 15px}
.ig-task-recovery>div{display:grid;gap:4px;border-top:1px solid #d9e7f7;padding-top:10px;margin-top:10px}
.ig-upload{display:block;position:relative;border:1px dashed #b8d2f1;border-radius:10px;background:#f7fbff;min-height:118px;overflow:hidden}
.ig-upload>input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;z-index:1;cursor:pointer}
.ig-upload>input[type=file]:disabled{cursor:not-allowed}
.ig-upload:focus-within{outline:2px solid #72a7ec;outline-offset:2px}
.ig-upload-disabled{border-color:#e1e8f1;background:#fafbfd}
.ig-upload-empty{display:grid;justify-items:center;align-content:center;gap:4px;text-align:center;min-height:118px;padding:14px;color:#6484a9}
.ig-upload-empty>span{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:#e7f1ff;color:#4080ca;font-size:20px}
.ig-upload-empty strong{font-size:11px}
.ig-upload-empty small{font-size:10px;line-height:1.55;color:#8a9bb0}
.ig-reference-list{display:grid;gap:8px}
.ig-reference-list:empty{display:none}
.ig-reference-preview{display:flex;align-items:center;gap:11px;padding:10px;min-height:76px;border:1px solid #dbe7f5;border-radius:9px;background:#f9fcff}
.ig-reference-preview img{width:56px;height:56px;object-fit:contain;border:1px solid #dbe7f5;border-radius:7px;background:#fff;flex:none}
.ig-reference-preview div{display:grid;gap:4px;min-width:0;flex:1}
.ig-reference-preview strong{font-size:11px;overflow-wrap:anywhere}
.ig-reference-preview small{font-size:10px;color:#8a9bb0}
.ig-reference-preview .btn{position:relative;z-index:2;min-height:34px;font-size:11px;padding:0 9px}
.ig-reference-state{display:grid;place-items:center;min-height:118px;font-size:11px;color:#728eaf}
.ig-help,.ig-field-error{font-size:10px;line-height:1.55;margin:-10px 0 0}
.ig-help{color:#8999ad}
.ig-output-size{color:#6484a9}
.ig-field-error{color:#a74d43}
.ig-prompt-field{margin-top:1px}
.ig-prompt-field textarea{min-height:173px;resize:vertical;line-height:1.7;font-size:12px}
.ig-count{display:flex;justify-content:space-between;gap:10px;font-size:10px;color:#8999ad;margin-top:-12px;line-height:1.5}
.ig-count span:last-child{white-space:nowrap}
.ig-submit{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-top:3px}
.ig-submit .btn{min-width:142px}
.ig-submit .ig-processing,.ig-submit .ig-warning{font-size:10px;line-height:1.55;color:#7389a4;flex:1;min-width:180px}
.ig-submit .ig-warning{color:#9b7041}
.ig-note,.ig-alert{font-size:11px;line-height:1.7;padding:13px 14px;margin-bottom:19px;border-radius:9px}
.ig-note{background:#edf5ff;color:#4d729e}
.ig-alert{background:#fff8ed;color:#8a6541;border:1px solid #f0dfc5}
.ig-alert strong{display:block;color:#8b5940;font-size:12px}
.ig-alert p{margin:5px 0 10px}
.ig-alert .btn{min-height:33px;font-size:11px}
.ig-alert>div{display:flex;flex-wrap:wrap;gap:7px}
.ig-alert small{display:block;font-size:10px;line-height:1.6;margin-top:8px}
.ig-generate-error{margin:20px 0 0;background:#fff4f1;border-color:#efd6ce;color:#a45343}
.ig-right{display:grid;gap:20px;min-width:0}
.ig-result{padding:22px}
.ig-history-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}
.ig-history-head h2{margin-bottom:0}
.ig-history-head .btn{min-height:32px;font-size:10px;padding:0 9px}
.ig-result-empty{min-height:320px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px 22px;color:#879bb4;background:linear-gradient(135deg,#f9fcff,#f4f8ff);border:1px dashed #d9e6f7;border-radius:11px}
.ig-result-empty>span{display:grid;place-items:center;width:56px;height:56px;border-radius:15px;background:#e9f2ff;color:#6595d0;margin-bottom:15px}
.ig-result-empty .icon{width:26px;height:26px}
.ig-result-empty h3{font-size:14px;color:#4d698a;margin:0 0 7px}
.ig-result-empty p{font-size:11px;line-height:1.7;max-width:310px;margin:0}
.ig-result-image{display:flex;align-items:center;justify-content:center;width:fit-content;max-width:100%;margin:0 auto;padding:0;border:0;border-radius:10px;background:transparent;overflow:hidden}
.ig-result-image img{display:block;max-width:100%;max-height:min(65vh,600px);width:auto;height:auto;object-fit:contain}
.ig-image-missing{display:grid;place-items:center;min-height:200px;border:1px dashed #dce8f6;border-radius:9px;color:#7b8fa7;font-size:11px}
.ig-result-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin:12px 0 17px}
.ig-result-actions .btn{min-height:36px;font-size:11px}
.ig-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;padding:16px 0;border-top:1px solid #e8eef6;border-bottom:1px solid #e8eef6;margin:0}
.ig-meta div{min-width:0}
.ig-meta dt{font-size:10px;color:#8a9cb1;margin-bottom:4px}
.ig-meta dd{font-size:11px;color:#3d587a;margin:0;overflow-wrap:anywhere}
.ig-ratio-note{margin:12px 0 0;padding:9px 11px;border-radius:8px;background:#fff5e8;color:#8b6029;font-size:11px;line-height:1.55}
.ig-result-prompt{padding-top:15px}
.ig-result-prompt>span{font-size:10px;font-weight:700;color:#7289a5}
.ig-result-prompt p{font-size:12px;line-height:1.7;color:#435b79;white-space:pre-wrap;overflow-wrap:anywhere;margin:6px 0 0;max-height:140px;overflow:auto}
.ig-reuse{min-height:33px;font-size:11px;margin-top:13px}
.ig-history{padding:21px}
.ig-history-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ig-history-tile{min-width:0;display:grid;grid-template-rows:110px auto;overflow:hidden;border:1px solid #dbe7f5;border-radius:9px;background:#fff;padding:0;text-align:left;color:inherit}
.ig-history-tile:hover,.ig-history-tile.selected{border-color:#76a9e7;box-shadow:0 0 0 1px #7baeee}
.ig-history-tile img{display:block;width:100%;height:110px;object-fit:contain;background:#f7faff}
.ig-thumb-missing{display:grid;place-items:center;background:#f7faff;color:#98a6b8;font-size:10px}
.ig-history-tile-info{display:grid;gap:3px;min-width:0;padding:8px}
.ig-history-tile-info strong{font-size:10px;color:#456282;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ig-history-tile-info small{font-size:9px;color:#96a5b7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ig-history-empty,.ig-detail-loading,.ig-history-loading{padding:22px;text-align:center;font-size:11px;color:#889bb1;line-height:1.6}
.ig-history-error{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff7f3;border:1px solid #f1ddd4;border-radius:8px;padding:10px 12px;margin:0 0 12px;font-size:10px;color:#a35543;line-height:1.5}
.ig-history-error .btn{min-height:31px;font-size:10px}
.ig-more{display:block;min-height:34px;font-size:11px;margin:15px auto 0}
.ig-lightbox-panel{width:min(100%,1000px)}
.ig-lightbox{display:grid;justify-items:center;gap:15px}
.ig-lightbox img{display:block;max-width:100%;max-height:min(72vh,820px);width:auto;height:auto;object-fit:contain}
.image-generation :focus-visible,.ig-lightbox-panel :focus-visible{outline:2px solid #5a96e1;outline-offset:2px}
@media(max-width:1080px){.ig-layout{grid-template-columns:minmax(300px,.9fr) minmax(0,1.1fr);gap:15px}.ig-create,.ig-result,.ig-history{padding:19px}.ig-history-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){.ig-layout{grid-template-columns:1fr}.ig-right{gap:16px}.ig-history-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:520px){.ig-page-head h1{font-size:25px}.ig-page-mark{width:42px;height:42px;font-size:22px}.ig-create,.ig-result,.ig-history{padding:17px}.ig-ratios{gap:5px}.ig-ratio{font-size:10px;min-height:37px}.ig-history-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ig-reference-preview{flex-wrap:wrap}.ig-reference-preview .btn{margin-left:auto}.ig-submit .btn{width:100%}}
