:root {
  
  --bg: #fff0f5; 
  --panel-bg: #ffffff; 
  --text-main: #4a4a4a; 
  --text-sub: #888888; 
  
  
  --primary: #ffb6c1; 
  --secondary: #87cefa; 
  --accent: #ffd700; 
  
  
  --success: #98fb98; 
  --error: #ff9999; 
  
  
  --border-color: #333333; 
  --border-width: 3px; 
  --shadow-color: rgba(51, 51, 51, 0.15); 
  --shadow-offset: 6px; 
  
  
  --radius: 20px; 
}


* {
  box-sizing: border-box; 
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent; 
}


.ico { width: 1em; height: 1em; vertical-align: -0.125em; display: inline-block; }

body {
  font-family: "Comic Sans MS", "Nunito", "PingFang SC", "Microsoft YaHei", sans-serif; 
  background-color: var(--bg);
  color: var(--text-main);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 40px 20px;
  
  background-image: radial-gradient(var(--primary) 10%, transparent 11%), radial-gradient(var(--secondary) 10%, transparent 11%);
  background-size: 60px 60px;
  background-position: 0 0, 30px 30px;
  background-attachment: fixed; 
}


.container {
  width: 100%;
  max-width: 700px;
  
  background: var(--panel-bg);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--shadow-color);
  padding: 40px;
  
  animation: popIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes popIn {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}


.header {
  text-align: center;
  margin-bottom: 30px;
}

.header h1 {
  font-size: 36px;
  font-weight: 900;
  color: var(--border-color); 
  margin-bottom: 10px;
  
  text-shadow: 3px 3px 0 var(--accent);
  letter-spacing: 2px;
}

.header p {
  font-size: 16px;
  color: var(--text-sub);
  font-weight: bold;
}


.upload-box {
  background-color: #fffaf0; 
  border: var(--border-width) dashed var(--primary); 
  border-radius: var(--radius);
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: transform 0.2s, background-color 0.2s;
  margin-bottom: 30px;
}

.upload-box:hover, .upload-box.drag-over {
  background-color: #ffe4e1; 
  transform: translateY(-2px); 
}

.upload-box .icon {
  font-size: 48px;
  margin-bottom: 10px;
}

.upload-box .title {
  font-size: 18px;
  font-weight: 900;
  color: var(--text-main);
  margin-bottom: 5px;
}

.upload-box .hint {
  font-size: 14px;
  color: var(--text-sub);
}

.upload-box input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.file-info {
  margin-top: 15px;
  width: 100%;
  font-size: 14px;
  font-weight: bold;
  color: var(--secondary);
  background: #f0f8ff; 
  padding: 12px 14px;
  border-radius: 20px;
  display: block;
  border: 2px solid var(--secondary);
  text-align: left;
}

.file-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #ffffff;
  border: 2px solid var(--secondary);
  color: var(--secondary);
}

.preview-list {
  display: grid;
  gap: 12px;
}

.preview-item {
  padding: 12px 14px;
  border-radius: 16px;
  background: #fffaf0;
  border: 2px solid var(--border-color);
  box-shadow: 3px 3px 0 var(--shadow-color);
}

.preview-name {
  font-size: 12px;
  font-weight: 900;
  color: var(--text-sub);
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.preview-text-render {
  color: var(--text-main);
  white-space: pre-line;
  word-break: break-word;
}

.preview-more {
  font-size: 12px;
  color: var(--text-sub);
  font-weight: bold;
  text-align: center;
}


.section-title {
  font-size: 18px;
  font-weight: 900;
  margin-bottom: 15px;
  display: inline-block;
  background: var(--accent);
  padding: 5px 15px;
  border-radius: 15px;
  border: 2px solid var(--border-color);
  transform: rotate(-2deg); 
}

.mode-options {
  display: flex;
  gap: 15px;
  margin-bottom: 30px;
}

.task-shell {
  margin-bottom: 30px;
}

.task-options {
  display: flex;
  gap: 15px;
  margin-bottom: 8px;
}

.task-label {
  flex: 1;
  position: relative;
  cursor: pointer;
}

.task-label input {
  position: absolute;
  opacity: 0;
}

.task-text {
  display: block;
  background-color: #f9f9f9;
  border: var(--border-width) solid var(--border-color);
  border-radius: 18px;
  min-height: 104px;
  padding: 16px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  box-shadow: 4px 4px 0 var(--shadow-color);
}

.task-text strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 900;
}

.task-label input:checked + .task-text {
  background-color: #fff3bf;
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--shadow-color);
}

.subset-note {
  display: none;
  margin-bottom: 30px;
}

.subset-note.show {
  display: block;
}

.settings-shell {
  margin-bottom: 30px;
}

.settings-shell.is-hidden {
  display: none !important;
}

.settings-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 18px;
  border: var(--border-width) solid var(--border-color);
  background: #ffffff;
  box-shadow: 4px 4px 0 var(--shadow-color);
  color: var(--text-main);
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
}

.settings-arrow {
  display: inline-flex;
  transition: transform 0.2s ease;
}

.settings-toggle.is-open .settings-arrow {
  transform: rotate(90deg);
}

.settings-panel {
  display: none;
  margin-top: 16px;
  padding: 20px;
  border-radius: 20px;
  border: var(--border-width) solid var(--border-color);
  background: #fffaf0;
  box-shadow: 4px 4px 0 var(--shadow-color);
}

.settings-panel.show {
  display: block;
  animation: fadeIn 0.25s ease;
}

.settings-grid {
  display: grid;
  gap: 16px;
}

.setting-row {
  display: grid;
  gap: 10px;
}

.setting-label {
  font-size: 15px;
  font-weight: 900;
  color: var(--text-main);
}

.setting-input,
.offset-value {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border-radius: 14px;
  border: 2px solid var(--border-color);
  background: #ffffff;
  color: var(--text-main);
  font-size: 16px;
  font-weight: bold;
  outline: none;
}

.setting-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.setting-choice {
  position: relative;
  cursor: pointer;
}

.setting-choice input {
  position: absolute;
  opacity: 0;
}

.setting-choice span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 2px solid var(--border-color);
  background: #fff;
  box-shadow: 3px 3px 0 var(--shadow-color);
  font-size: 16px;
  font-weight: 900;
  transition: all 0.15s ease;
}

.setting-choice input:checked + span {
  background: #fff3bf;
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--shadow-color);
}

.offset-control {
  display: grid;
  grid-template-columns: 64px 1fr 64px;
  gap: 10px;
  align-items: center;
}

.offset-btn {
  height: 48px;
  border-radius: 14px;
  border: 2px solid var(--border-color);
  background: #fff;
  color: var(--text-main);
  font-size: 26px;
  font-weight: 900;
  box-shadow: 3px 3px 0 var(--shadow-color);
  cursor: pointer;
}

.offset-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--shadow-color);
}

.subset-card {
  background: #fffaf0;
  border: var(--border-width) solid var(--border-color);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 4px 4px 0 var(--shadow-color);
}

.subset-card p {
  font-size: 14px;
  font-weight: bold;
  color: var(--text-main);
}

.subset-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0;
}

.subset-tags span {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border-radius: 999px;
  background: #f0f8ff;
  border: 2px solid var(--secondary);
  color: var(--secondary);
  font-size: 13px;
  font-weight: bold;
}

.subset-tip {
  color: var(--text-sub);
}

.is-hidden {
  display: none !important;
}

.mode-label {
  flex: 1;
  position: relative;
  cursor: pointer;
}

.mode-label input {
  position: absolute;
  opacity: 0;
}

.mode-text {
  display: block;
  background-color: #f9f9f9;
  border: var(--border-width) solid var(--border-color);
  border-radius: 15px;
  padding: 15px 10px;
  text-align: center;
  transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55); 
  box-shadow: 4px 4px 0 var(--shadow-color);
}

.mode-text strong {
  display: block;
  font-size: 16px;
  font-weight: 900;
  margin-bottom: 5px;
}

.mode-text small {
  font-size: 12px;
  color: var(--text-sub);
}


.mode-label input:checked + .mode-text {
  background-color: var(--secondary);
  color: #fff;
  transform: translate(2px, 2px); 
  box-shadow: 2px 2px 0 var(--shadow-color); 
}

.mode-label input:checked + .mode-text small {
  color: #e0f7fa;
}


.convert-btn {
  width: 100%;
  padding: 18px;
  background-color: var(--primary);
  color: var(--border-color);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius);
  font-size: 20px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 6px 0 var(--border-color); 
  transition: all 0.1s;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.convert-btn:hover:not(:disabled) {
  background-color: #ffc0cb;
}

.convert-btn:active:not(:disabled) {
  transform: translateY(6px); 
  box-shadow: 0 0 0 var(--border-color); 
}

.convert-btn:disabled {
  background-color: #e0e0e0;
  color: #a0a0a0;
  cursor: not-allowed;
  box-shadow: 0 6px 0 #b0b0b0;
  border-color: #b0b0b0;
}

.convert-btn.running {
  background-color: var(--accent);
  pointer-events: none;
}


.running-text {
  display: inline-block;
  animation: bounce 1s infinite alternate;
}

@keyframes bounce {
  from { transform: translateY(0); }
  to { transform: translateY(-5px); }
}


.progress-wrap {
  margin-top: 25px;
  display: none; 
}

.progress-wrap.show {
  display: block;
  animation: fadeIn 0.3s;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 10px;
}

.progress-bar {
  height: 20px; 
  background-color: #f0f0f0;
  border: 2px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.progress-fill {
  height: 100%;
  width: 0%;
  background-color: var(--success);
  border-right: 2px solid var(--border-color);
  transition: width 0.3s ease;
  
  background-image: linear-gradient(45deg, rgba(255,255,255,0.3) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) 75%, transparent 75%, transparent);
  background-size: 20px 20px;
  animation: moveStripes 1s linear infinite;
}

@keyframes moveStripes {
  0% { background-position: 0 0; }
  100% { background-position: 20px 0; }
}


.log-shell {
  margin-top: 25px;
  background-color: #2b2b2b; 
  border: var(--border-width) solid var(--border-color);
  border-radius: 15px;
  overflow: hidden;
  display: none;
}

.log-shell.show {
  display: block;
  animation: fadeIn 0.3s;
}

.log-head {
  background-color: #444;
  color: #fff;
  padding: 10px 15px;
  font-size: 14px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  border-bottom: 2px solid var(--border-color);
}

.log-scroll {
  max-height: 200px;
  overflow-y: auto;
  padding: 15px;
  font-family: "Courier New", Courier, monospace; 
  font-size: 13px;
  color: #ddd;
}


.log-line.info { color: #aaa; }
.log-line.step { color: var(--accent); font-weight: bold; }
.log-line.ok { color: var(--success); font-weight: bold; }
.log-line.err { color: var(--error); font-weight: bold; }


.results-shell {
  margin-top: 25px;
}

.result-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  background-color: #fff;
  border: 2px solid var(--border-color);
  border-radius: 15px;
  margin-bottom: 15px;
  
  transform: rotate(1deg);
  box-shadow: 3px 3px 0 var(--shadow-color);
}


.result-item:nth-child(even) {
  transform: rotate(-1deg);
  background-color: #fcfcfc;
}

.result-name {
  font-size: 16px;
  font-weight: 900;
  color: var(--text-main);
  max-width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.result-size {
  font-size: 14px;
  color: var(--text-sub);
  font-weight: bold;
}


.dl-btn {
  padding: 8px 15px;
  background-color: var(--secondary);
  color: #fff;
  text-decoration: none;
  border-radius: 10px;
  font-weight: bold;
  border: 2px solid var(--border-color);
  box-shadow: 2px 2px 0 var(--shadow-color);
  transition: all 0.1s;
}

.dl-btn:hover {
  background-color: #5ab2ea;
}

.dl-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--shadow-color);
}


.dl-all-wrap {
  display: none;
  margin-top: 25px;
}

.dl-all-btn {
  width: 100%;
  padding: 15px;
  background-color: #fff;
  color: var(--border-color);
  border: var(--border-width) dashed var(--secondary);
  border-radius: var(--radius);
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
  transition: all 0.2s;
}

.dl-all-btn:hover {
  background-color: var(--secondary);
  color: #fff;
  border-style: solid;
  border-color: var(--border-color);
}


.footer {
  text-align: center;
  margin-top: 30px;
  font-size: 13px;
  color: var(--text-sub);
  font-weight: bold;
}


@media (max-width: 600px) {
  body { padding: 20px 10px; }
  .container { padding: 20px; }
  .task-options,
  .mode-options { flex-direction: column; gap: 10px; }
  .result-item { flex-direction: column; align-items: flex-start; gap: 10px; }
  .dl-btn { width: 100%; text-align: center; }
  .result-name { max-width: 100%; }
}