* {
-webkit-tap-highlight-color: transparent;
user-select: none;       
-webkit-user-select: none; 
-ms-user-select: none;     
-moz-user-select: none;    
touch-action: manipulation; 
}
a {
color: inherit;
}
:root {
--primary: #6E6E6E;
--on-primary: #FFFFFF;
--primary-container: #E6E6E6;
--on-primary-container: #1A1A1A;
--secondary: #7A7A7A;
--secondary-container: #EDEDED;
--on-secondary-container: #1A1A1A;
--surface: #FAFAFA;
--surface-container: #F0F0F0;
--surface-container-high: #E8E8E8;
--surface-container-highest: #E0E0E0;
--on-surface: #1C1C1C;
--on-surface-variant: #5A5A5A;
--outline: #8A8A8A;
--outline-variant: #CFCFCF;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
input[type="file"] { display: none !important; position: absolute; left: -9999px; }
body {
font-family: 'Google Sans', sans-serif;
background: var(--surface);
color: var(--on-surface);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
padding: 24px 16px 56px;
}
.top-bar,
.tab-bar,
.tab-panel > .card,
.tab-panel > canvas {
width: 100%;
max-width: 600px;
}
.top-bar {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 28px;
padding: 0 4px;
}
.top-bar .material-symbols-rounded { font-size: 28px; color: var(--primary); }
.top-bar h1 {
font-family: 'Google Sans Display', sans-serif;
font-size: 22px;
font-weight: 500;
}
.tab-bar {
display: flex;
background: var(--surface-container);
border-radius: 28px;
padding: 6px;
margin-bottom: 16px;
gap: 4px;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.tab-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 16px;
border: none;
border-radius: 22px;
font-size: 14px;
font-weight: 500;
font-family: 'Google Sans', sans-serif;
cursor: pointer;
transition: all 0.2s ease;
background: transparent;
color: var(--on-surface-variant);
}
.tab-btn .material-symbols-rounded { font-size: 18px; }
.tab-btn.active { background: var(--primary); color: var(--on-primary); box-shadow: 0 1px 4px rgba(0,0,0,0.2); }
.tab-btn:not(.active):hover { background: var(--surface-container-high); color: var(--on-surface); }
.tab-panel {
display: none;
width: 100%;
flex-direction: column;
align-items: center;
}
.tab-panel.active { display: flex; }
.card {
width: 100%;
max-width: 600px;
background: var(--surface-container);
border-radius: 28px;
padding: 24px;
margin-bottom: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
}
.section-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.6px;
text-transform: uppercase;
color: var(--primary);
margin-bottom: 14px;
}
.drop-zone {
width: 100%;
min-height: 180px;
border: 2px dashed var(--outline-variant);
border-radius: 16px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
cursor: pointer;
transition: all 0.2s ease;
background: var(--surface-container-high);
}
.drop-zone:hover, .drop-zone.drag-over {
border-color: var(--primary);
background: var(--primary-container);
}
.drop-zone .material-symbols-rounded {
font-size: 44px;
color: var(--on-surface-variant);
transition: color 0.2s;
animation: float 3s ease-in-out infinite;
}
.drop-zone:hover .material-symbols-rounded,
.drop-zone.drag-over .material-symbols-rounded { color: var(--primary); animation: none; }
.drop-zone p { font-size: 14px; color: var(--on-surface-variant); text-align: center; line-height: 1.6; }
.drop-zone p strong { color: var(--primary); font-weight: 500; }
.info-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.info-chip {
display: flex;
align-items: center;
gap: 6px;
background: var(--surface-container-highest);
border-radius: 50px;
padding: 6px 14px;
font-size: 13px;
font-weight: 500;
color: var(--on-surface-variant);
}
.info-chip .material-symbols-rounded { font-size: 16px; color: var(--primary); }
.preview-wrap { display: none; flex-direction: column; gap: 12px; margin-top: 16px; }
.preview-wrap.visible { display: flex; }
.preview-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--on-surface-variant);
}
.preview-img-wrap {
width: 100%;
border-radius: 12px;
overflow: hidden;
background: #1a1a1a;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
display: flex;
align-items: center;
justify-content: center;
position: relative;
max-height: 360px;
}
.preview-img-wrap.checker {
background-image:
linear-gradient(45deg, #555 25%, transparent 25%),
linear-gradient(-45deg, #555 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #555 75%),
linear-gradient(-45deg, transparent 75%, #555 75%);
background-size: 16px 16px;
background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
background-color: #333;
}
.preview-img-wrap img { width: 100%; height: 100%; object-fit: contain; display: block; max-height: 360px; }
.preview-img-wrap canvas { display: block !important; max-width: 100%; max-height: 360px; object-fit: contain; }
.preview-badge {
position: absolute;
top: 10px;
right: 10px;
background: rgba(0,0,0,0.6);
color: #fff;
font-size: 11px;
font-weight: 600;
padding: 4px 10px;
border-radius: 50px;
letter-spacing: 0.3px;
backdrop-filter: blur(4px);
}
.control-group { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.control-row { display: flex; justify-content: space-between; align-items: center; }
.control-title {
font-size: 14px;
font-weight: 500;
color: var(--on-surface);
display: flex;
align-items: center;
gap: 8px;
}
.control-title .material-symbols-rounded { font-size: 18px; color: var(--primary); }
.value-chip {
background: var(--primary-container);
color: var(--on-primary-container);
font-size: 13px;
font-weight: 600;
padding: 4px 12px;
border-radius: 50px;
min-width: 56px;
text-align: center;
}
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-btn {
background: var(--surface-container-high);
color: var(--on-surface-variant);
border: 1.5px solid var(--outline-variant);
border-radius: 50px;
padding: 8px 18px;
font-size: 13px;
font-weight: 500;
font-family: 'Google Sans', sans-serif;
cursor: pointer;
transition: all 0.15s ease;
}
.chip-btn:hover { background: var(--secondary-container); color: var(--on-secondary-container); border-color: transparent; }
.chip-btn.active { background: var(--primary); color: var(--on-primary); border-color: transparent; box-shadow: 0 1px 4px rgba(0,0,0,0.2); }
.format-row { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.format-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.format-chip {
display: flex;
flex-direction: column;
align-items: center;
background: var(--surface-container-high);
color: var(--on-surface-variant);
border: 1.5px solid var(--outline-variant);
border-radius: 14px;
padding: 10px 18px;
font-size: 13px;
font-weight: 600;
font-family: 'Google Sans', sans-serif;
cursor: pointer;
transition: all 0.15s ease;
min-width: 68px;
gap: 3px;
}
.format-chip .fmt-sub { font-size: 10px; font-weight: 400; opacity: 0.7; }
.format-chip:hover { background: var(--secondary-container); color: var(--on-secondary-container); border-color: transparent; }
.format-chip.active { background: var(--primary); color: var(--on-primary); border-color: transparent; box-shadow: 0 1px 4px rgba(0,0,0,0.2); }
.format-chip.active .fmt-sub { opacity: 0.85; }
.md3-slider {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 4px;
border-radius: 4px;
outline: none;
cursor: pointer;
background: linear-gradient(
to right,
var(--primary) 0%,
var(--primary) var(--pct, 0%),
var(--surface-container-highest) var(--pct, 0%),
var(--surface-container-highest) 100%
);
}
.md3-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px; height: 20px;
border-radius: 50%;
background: var(--primary);
cursor: pointer;
transition: box-shadow 0.2s;
}
.md3-slider::-webkit-slider-thumb:hover { box-shadow: 0 0 0 10px rgba(110,110,110,0.12); }
.md3-slider:active::-webkit-slider-thumb { box-shadow: 0 0 0 14px rgba(110,110,110,0.16); }
.md3-slider::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--primary); border: none; cursor: pointer; }
.slider-hints { display: flex; justify-content: space-between; font-size: 11px; color: var(--on-surface-variant); padding: 0 2px; }
.output-info {
background: var(--surface-container-high);
border-radius: 16px;
padding: 14px 16px;
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
}
.output-info .material-symbols-rounded { font-size: 20px; color: var(--primary); flex-shrink: 0; }
.output-info-text { display: flex; flex-direction: column; gap: 2px; }
.output-info-text .main { font-size: 15px; font-weight: 600; color: var(--on-surface); }
.output-info-text .sub { font-size: 12px; color: var(--on-surface-variant); }
.divider { height: 1px; background: var(--outline-variant); margin: 4px 0; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-filled {
flex: 1;
min-width: 140px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
background: var(--primary);
color: var(--on-primary);
border: none;
border-radius: 50px;
padding: 14px 24px;
font-size: 14px;
font-weight: 500;
font-family: 'Google Sans', sans-serif;
cursor: pointer;
transition: all 0.2s;
box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.btn-filled:hover { filter: brightness(1.08); box-shadow: 0 4px 8px rgba(0,0,0,0.15); }
.btn-filled:active { transform: scale(0.98); filter: brightness(0.95); }
.btn-filled .material-symbols-rounded { font-size: 18px; }
.btn-tonal {
flex: 1;
min-width: 120px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
background: var(--secondary-container);
color: var(--on-secondary-container);
border: none;
border-radius: 50px;
padding: 14px 24px;
font-size: 14px;
font-weight: 500;
font-family: 'Google Sans', sans-serif;
cursor: pointer;
transition: all 0.2s;
}
.btn-tonal:hover { filter: brightness(0.96); }
.btn-tonal:active { transform: scale(0.98); }
.btn-tonal .material-symbols-rounded { font-size: 18px; }
.toast {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%) translateY(80px);
background: #313033;
color: #E6E1E5;
padding: 12px 20px;
border-radius: 50px;
font-size: 14px;
font-family: 'Google Sans', sans-serif;
font-weight: 500;
display: flex;
align-items: center;
gap: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
z-index: 999;
white-space: nowrap;
}
.toast.show { transform: translateX(-50%) translateY(0); }
.toast .material-symbols-rounded { font-size: 18px; color: #E6E1E5; }
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
.znpxl{
color: var(--primary);;
}
.imgtool{
color: var(--outline);;
margin-left: 2px;
}