.plist-parser-container{--plist-bg: #f6f8fc;--plist-card: #ffffff;--plist-text: #172033;--plist-muted: #64748b;--plist-border: #e2e8f0;--plist-primary: #2563eb;--plist-primary-dark: #1d4ed8;--plist-primary-soft: #eff6ff;--plist-purple: #7c3aed;--plist-success: #059669;--plist-danger: #dc2626;--plist-shadow: 0 24px 70px rgba(15, 23, 42, .1);min-height:100vh;padding:28px clamp(16px,3vw,38px) 56px;color:var(--plist-text);background:radial-gradient(circle at 10% 0%,rgba(37,99,235,.13),transparent 34%),radial-gradient(circle at 94% 10%,rgba(124,58,237,.12),transparent 34%),var(--plist-bg);overflow-x:hidden;box-sizing:border-box}.plist-parser-container *,.plist-parser-container *:before,.plist-parser-container *:after{box-sizing:border-box}.plist-parser-container:before{display:none}.plist-parser-content{width:min(1360px,100%);margin:0 auto;position:relative;z-index:1}.plist-header{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;margin-bottom:24px;padding:clamp(24px,4vw,40px);border:1px solid rgba(226,232,240,.92);border-radius:28px;background:linear-gradient(135deg,#fffffff5,#f8fafce6);box-shadow:var(--plist-shadow);overflow:hidden;text-align:left}.plist-header:after{content:"";position:absolute;right:-90px;top:-90px;width:280px;height:280px;border-radius:999px;background:linear-gradient(135deg,#2563eb1f,#7c3aed1f);pointer-events:none}.plist-title{position:relative;z-index:1;display:flex;align-items:center;gap:12px;margin:0;color:var(--plist-text);font-size:clamp(30px,4vw,46px);line-height:1.08;letter-spacing:-.045em;font-weight:900}.plist-title .icon{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:18px;background:var(--plist-primary-soft);font-size:28px;box-shadow:inset 0 0 0 1px #bfdbfe}.plist-subtitle{position:relative;z-index:1;grid-column:1 / 2;max-width:720px;margin:12px 0 0 64px;color:var(--plist-muted);opacity:1;font-size:16px;line-height:1.75;font-weight:600;text-shadow:none}.back-button{position:relative;z-index:2;grid-column:2 / 3;grid-row:1 / span 2;justify-self:end;align-self:start;min-height:40px;padding:0 15px;border:1px solid var(--plist-border);border-radius:999px;color:#334155;background:#ffffffdb;cursor:pointer;font-size:14px;font-weight:850;transition:transform .18s ease,border-color .18s ease,background .18s ease,color .18s ease}.back-button:hover{color:var(--plist-primary);border-color:#bfdbfe;background:var(--plist-primary-soft);transform:translate(-2px)}.upload-section,.frames-section,.usage-guide{border:1px solid rgba(226,232,240,.95);border-radius:24px;background:#fffffff0;box-shadow:0 18px 48px #0f172a12}.upload-section{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:20px;align-items:stretch;margin-bottom:22px;padding:clamp(18px,2.5vw,26px)}.upload-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0}.upload-card{position:relative;display:grid;place-items:center;min-height:230px;padding:24px;border:2px dashed #bfdbfe;border-radius:20px;background:linear-gradient(180deg,#eff6ff,#fff);text-align:center;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease}.upload-card:hover{border-color:var(--plist-primary);background:linear-gradient(180deg,#dbeafe,#fff);box-shadow:0 18px 40px #2563eb1a;transform:translateY(-1px)}.upload-icon{margin-bottom:12px;color:var(--plist-primary);font-size:44px;opacity:1}.upload-card h3{margin:0 0 12px;color:var(--plist-text);font-size:18px;font-weight:900}.file-input{display:none}.upload-button{display:inline-flex;align-items:center;justify-content:center;width:min(100%,260px);min-height:42px;padding:0 14px;border:1px solid #bfdbfe;border-radius:12px;overflow:hidden;color:var(--plist-primary-dark);background:#fff;cursor:pointer;font-size:14px;font-weight:850;text-overflow:ellipsis;white-space:nowrap;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.upload-button:hover{background:var(--plist-primary-soft);box-shadow:0 10px 22px #2563eb24;transform:translateY(-1px)}.action-buttons{display:grid;align-content:center;gap:10px;justify-content:stretch}.process-button,.download-all-button,.clear-button,.download-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 17px;border:1px solid transparent;border-radius:13px;cursor:pointer;font-size:14px;font-weight:850;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease}.process-button{color:#fff;background:linear-gradient(135deg,var(--plist-primary),#38bdf8);box-shadow:0 12px 26px #2563eb38}.process-button:hover:not(:disabled),.download-all-button:hover,.clear-button:hover,.download-button:hover{transform:translateY(-1px)}.process-button:disabled{opacity:.52;cursor:not-allowed;box-shadow:none}.download-all-button{color:#fff;background:linear-gradient(135deg,var(--plist-purple),#ec4899);box-shadow:0 12px 26px #7c3aed38}.clear-button{border-color:#fecaca;color:#b91c1c;background:#fef2f2}.format-info,.error-message{grid-column:1 / -1;margin-top:0;padding:12px 14px;border-radius:14px;font-size:14px;font-weight:800;text-align:center}.format-info{border:1px solid #bfdbfe;color:#1d4ed8;background:var(--plist-primary-soft)}.format-info strong{color:#1e40af}.error-message{border:1px solid #fecaca;color:#b91c1c;background:#fef2f2}.frames-section{margin-bottom:22px;padding:clamp(18px,2.5vw,26px)}.frames-header{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--plist-border)}.frames-header h2,.usage-guide h3{margin:0;color:var(--plist-text);font-size:20px;font-weight:900;letter-spacing:-.02em}.frames-count{display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border:1px solid #bfdbfe;border-radius:999px;color:var(--plist-primary-dark);background:var(--plist-primary-soft);font-size:13px;font-weight:850}.frames-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}.frame-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--plist-border);border-radius:18px;background:#fff;box-shadow:0 12px 28px #0f172a0d;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.frame-card:hover{border-color:#bfdbfe;box-shadow:0 18px 34px #0f172a1a;transform:translateY(-2px)}.frame-preview{display:flex;align-items:center;justify-content:center;height:150px;margin:0;border-radius:0;background:linear-gradient(45deg,#f1f5f9 25%,transparent 25%),linear-gradient(-45deg,#f1f5f9 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f1f5f9 75%),linear-gradient(-45deg,transparent 75%,#f1f5f9 75%),#fff;background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0;overflow:hidden}.frame-preview img{max-width:88%;max-height:88%;object-fit:contain;image-rendering:auto}.rotated-badge{position:absolute;top:10px;right:10px;padding:4px 8px;border-radius:999px;color:#9a3412;background:#ffedd5;font-size:12px;font-weight:850}.frame-info{flex:1;margin:0;padding:12px 12px 0}.frame-name{margin:0 0 6px;overflow:hidden;color:#334155;font-size:13px;font-weight:850;text-overflow:ellipsis;white-space:nowrap}.frame-meta{color:var(--plist-muted);font-size:12px;font-weight:700}.download-button{width:calc(100% - 24px);margin:12px;border-color:#bfdbfe;color:var(--plist-primary-dark);background:var(--plist-primary-soft)}.usage-guide{padding:clamp(18px,2.5vw,26px)}.usage-guide h3{margin-bottom:14px}.usage-guide ul{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}.usage-guide li{min-height:74px;padding:13px;border:1px solid var(--plist-border);border-radius:15px;color:#334155;background:#f8fafc;font-size:13px;font-weight:700;line-height:1.55}@media (max-width: 1120px){.upload-section{grid-template-columns:1fr}.action-buttons{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}.usage-guide ul{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width: 768px){.plist-parser-container{padding:18px 12px 42px}.plist-header,.upload-section,.frames-section,.usage-guide{border-radius:20px}.plist-header{display:flex;flex-direction:column;align-items:flex-start;padding:22px}.back-button{order:-1;align-self:flex-start}.plist-title{font-size:1.9rem}.plist-title .icon{width:44px;height:44px;border-radius:14px;font-size:24px}.plist-subtitle{margin-left:0}.upload-group,.action-buttons,.usage-guide ul{grid-template-columns:1fr}.upload-card{min-height:190px}.frames-header{align-items:flex-start;flex-direction:column}.frames-grid{grid-template-columns:repeat(auto-fill,minmax(145px,1fr))}}
