body { background:#f8f9fc; font-family:'Segoe UI',system-ui,sans-serif; margin:0; }
header {
    background:#fff;
    border-bottom:1px solid #e9ecef;
    padding:1rem 0;
    box-shadow:0 2px 10px rgba(0,0,0,0.04);
}
.logo {
    font-size:2.1rem;
    font-weight:700;
    color:#0d6efd;
    letter-spacing:-0.8px;
}
.tool-box {
    background:#fff;
    padding:2.5rem;
    border-radius:16px;
    box-shadow:0 8px 30px rgba(0,0,0,0.08);
}
.drop-zone {
    border:3px dashed #0d6efd;
    padding:3.5rem 1rem;
    text-align:center;
    cursor:pointer;
    border-radius:16px;
    background:#f8fbff;
    transition:all .25s;
}
.drop-zone:hover {
    background:#e9f3ff;
    border-color:#0a58ca;
}
.preview-img {
    width:90px; height:120px;
    object-fit:contain;
    border:1px solid #dee2e6;
    border-radius:6px;
    background:#f8f9fa;
    cursor:pointer;
    transition:transform .2s;
}
.preview-img:hover { transform:scale(1.04); }
.dpi-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(85px,1fr));
    gap:10px;
}
.dpi-grid label {
    padding:10px;
    border:2px solid #e9ecef;
    border-radius:8px;
    text-align:center;
    cursor:pointer;
}
.dpi-grid input:checked + span { font-weight:bold; color:#0d6efd; }
#previewList {
    min-height:220px;
    border:2px dashed #dee2e6;
    border-radius:12px;
    padding:15px;
    background:#fafafa;
}
.fake-loading {
    position:fixed; inset:0;
    background:rgba(0,0,0,0.75);
    z-index:2000;
    color:white;
    display:none;
    align-items:center;
    justify-content:center;
    flex-direction:column;
}
.ad-placeholder {
    background:#f1f3f8;
    border:2px dashed #ccc;
    color:#999;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:0.9rem;
}
.success-box {
    background:#d4edda;
    border:1px solid #c3e6cb;
    border-radius:12px;
    padding:2rem;
    text-align:center;
}
@media (max-width:576px) {
    .logo { font-size:1.7rem; }
    .tool-box { padding:1.5rem; }
}
.tool-link{
border-radius:10px;
transition:all .2s;
}

.tool-link:hover{
transform:translateY(-3px);
box-shadow:0 6px 18px rgba(0,0,0,0.08);
border-color:#0d6efd;
}
.sidebar-ad{
width:160px;
height:600px;
}

.bottom-ad{
width:100%;
max-width:728px;
height:90px;
}

@media (max-width:768px){
.bottom-ad{
    height:100px;
}
}
.dpi-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(95px,1fr));
gap:12px;
}

.dpi-grid label{
display:block;
padding:14px 10px;
border:2px solid #e9ecef;
border-radius:10px;
text-align:center;
cursor:pointer;
background:#ffffff;
font-weight:500;
transition:all .2s ease;
}

.dpi-grid label:hover{
border-color:#0d6efd;
background:#f1f6ff;
}

.dpi-grid input{
display:none;
}

.dpi-grid input:checked + span{
color:white;
}

.dpi-grid input:checked + span::before{
content:"✓ ";
}

.dpi-grid input:checked + span{
display:block;
background:#0d6efd;
border-radius:6px;
padding:6px 0;
}