.template-detail-container{display:flex}.template-preview{flex:1;background-color:#fff;border-radius:8px;overflow:hidden}.template-preview-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:12px}.template-preview-placeholder img{max-width:94%;max-height:94%;-o-object-fit:contain;object-fit:contain;border-radius:16px;box-shadow:0 2px 12px #0000001a}.right-side-container{width:45%;margin-left:20px;height:900px;display:flex;flex-direction:column}.template-actions{width:100%;padding:24px;background:#fff;border-radius:12px;box-shadow:0 2px 4px #0000000f;margin-bottom:10px}.template-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.template-title{font-size:20px;font-weight:600;color:#333;margin:0}.btn-collect{display:flex;align-items:center;gap:6px;padding:8px 16px;border:none;background:none;color:#666;cursor:pointer;transition:all var(--modal-animation-duration);font-size:14px}.btn-collect:hover{opacity:.8}.btn-collect i{font-size:18px;font-style:normal;transition:all var(--modal-animation-duration)}.btn-collect .icon-heart{color:#666}.btn-collect.active .icon-heart-filled{color:#ff6b6b}.btn-collect.active:hover{opacity:.8}.template-select{margin-bottom:24px}.template-select label{display:block;margin-bottom:8px;color:#666;font-size:14px}.template-language-select{width:200px;padding:8px 32px 8px 12px;border:1px solid #E5E7EB;border-radius:6px;background-color:#fff;font-size:14px;color:#333;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23999999' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}.template-language-select:focus{outline:none;border-color:#4caf50}.color-picker{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(2,1fr);gap:8px;margin-bottom:10px;padding:12px;background:#f9fafb;border-radius:6px}.color-option{width:24px;height:24px;border-radius:50%;cursor:pointer;transition:all .2s;position:relative}.color-option:hover{transform:scale(1.1)}.color-option.selected:after{content:"";position:absolute;top:-4px;left:-4px;right:-4px;bottom:-4px;border:2px solid var(--primary);border-radius:50%}.action-buttons{display:flex;gap:24px;margin-bottom:24px}.features{padding:10px;background:#f9fafb;border-radius:6px;display:grid;grid-template-columns:repeat(2,1fr);flex-wrap:wrap;justify-content:space-between;gap:10px}.feature-item{display:flex;align-items:center;position:relative;width:100%}.feature-item:last-child{margin-bottom:0}.feature-icon{width:16px;height:16px;margin-right:8px;color:#4caf50;display:flex;align-items:center;justify-content:center;font-size:12px}.feature-text{color:#666;font-size:12px}.feature-desc{position:absolute;right:0;color:#999;font-size:12px}.hot-templates{width:100%;background-color:#fff;padding:20px;border-radius:12px;box-shadow:0 2px 4px #0000000f}.hot-templates h2{font-size:16px;font-weight:600;color:#333;margin-bottom:16px}.hot-templates-container{display:flex;flex-direction:column;gap:4px}.template-item{display:flex;align-items:center;padding:12px;background-color:#fff;border-radius:6px;transition:all .3s;cursor:pointer}.template-item:hover{transform:translate(4px);box-shadow:0 2px 4px #0000001a}.template-number{width:20px;height:20px;background-color:#f3f4f6;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;color:#f17414;margin-right:12px}.template-name{flex:1;font-size:14px;color:#333}.template-usage{font-size:12px;color:#999}.guess-templates{margin-top:40px}.guess-templates h2{font-size:20px;font-weight:600;color:#333;margin-bottom:24px}.guess-list{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}@media (max-width: 1200px){.container{max-width:100%}.template-detail-container{flex-direction:column}.template-preview{min-width:auto;margin-bottom:20px}.right-side-container{width:100%;max-width:600px;margin:0 auto}.template-actions,.hot-templates{width:100%}.guess-list{grid-template-columns:repeat(2,1fr)}}@media (max-width: 768px){.guess-list{grid-template-columns:1fr}}.template-options{display:none;margin-bottom:24px;width:100%}.option-row{display:flex;align-items:center;margin-bottom:16px;width:100%}.option-row:last-child{margin-bottom:0}.option-row label{width:80px;color:#666;font-size:14px;flex-shrink:0}.option-row .template-language-select,.option-row .color-picker{flex:1;width:auto}.color-picker-btn{background:none;border:none;padding:0;cursor:pointer;width:24px;height:24px;border-radius:50%;overflow:hidden}.color-picker-btn:hover{transform:scale(1.1)}.color-picker-modal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;z-index:1000;align-items:center;justify-content:center}.color-picker-modal.active{display:flex}.color-picker-content{background:#fff;border-radius:12px;padding:24px;width:400px;box-shadow:0 4px 6px #0000001a}.color-picker-area{height:200px;background:#f9fafb;border-radius:8px;margin-bottom:16px;position:relative}.color-picker-preview{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:8px}.color-picker-inputs{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}.input-group{display:flex;align-items:center;gap:12px}.input-group label{width:60px;color:#666;font-size:14px}.input-group input{flex:1;padding:8px 12px;border:1px solid #E5E7EB;border-radius:6px;font-size:14px}.color-picker-actions{display:flex;justify-content:flex-end;gap:12px}.btn-cancel,.btn-confirm{padding:8px 16px;border-radius:6px;font-size:14px;cursor:pointer;transition:all .3s}.btn-cancel{background:#f9fafb;border:1px solid #E5E7EB;color:#666}.btn-confirm{background:#4caf50;border:none;color:#fff}.btn-cancel:hover{background:#f3f4f6}.btn-confirm:hover{background:#45a049}.wechat-official-card{width:100%;padding:15px 20px;background:#fff;border-radius:12px;box-shadow:0 2px 4px #0000000f;margin-bottom:16px}.official-content{display:flex;align-items:center;gap:16px}.official-qrcode{flex-shrink:0;width:80px;height:80px;background:#f5f5f5;border-radius:8px;padding:6px;display:flex;align-items:center;justify-content:center}.official-qrcode img{width:72px;height:72px;border-radius:4px}.official-info{flex:1}.official-name{font-size:16px;font-weight:600;margin:0 0 8px;color:#333}.official-desc{font-size:13px;line-height:1.5;margin:0;color:#666}@media screen and (max-width: 1200px){.template-detail-container{flex-direction:row}.template-preview{min-width:45%;max-width:55%}.right-side-container{width:45%;height:auto;margin-left:20px}.color-picker{grid-template-columns:repeat(6,1fr)}.template-actions{padding:20px}.template-title{font-size:18px}.action-buttons{gap:16px}}@media screen and (max-width: 768px){.template-detail-container{flex-direction:column}.template-preview{min-width:100%;max-width:100%;margin-bottom:20px}.right-side-container{width:100%;margin-left:0;max-width:1000px}.color-picker{grid-template-columns:repeat(4,1fr)}.template-actions{padding:16px}.template-header{flex-direction:row;justify-content:space-between;align-items:center;gap:0}.template-title{width:auto}.btn-collect{align-self:auto}.action-buttons,.features{gap:12px}.feature-item{width:100%}.hot-templates{margin-top:20px}.template-preview{order:2}.right-side-container{order:1}.hot-templates,.template-options,.wechat-official-card{display:none}}.breadcrumbs{display:flex;align-items:center;padding-left:20px;margin-bottom:15px}.breadcrumbs ul{display:flex;align-items:center;list-style:none;margin:0;padding:0;gap:8px}.breadcrumbs li{display:flex;align-items:center;font-size:15px;color:#666}.breadcrumbs li:not(:last-child):after{content:"/";margin-left:8px;color:#999}.breadcrumbs a{color:#666;text-decoration:none}.breadcrumbs a:hover{color:var(--primary)}.breadcrumbs li:last-child{color:#333}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 0;width:100%}.loading-spinner{width:40px;height:40px;border:4px solid rgba(0,0,0,.1);border-radius:50%;border-top-color:#3498db;animation:spin 1s ease-in-out infinite;margin-bottom:15px}@keyframes spin{to{transform:rotate(360deg)}}