/* 
   favicon generator tool css
   dependency on /resources/global.css for all else
 */
.tool-hero {background-image:url('/resources/icons.webp');}
.dropzone {border:2px dashed rgba(229,0,125,0.3);border-radius:2px;padding:44px 20px;text-align:center;cursor:pointer;transition:border-color .15s ease, background .15s ease;background:linear-gradient(180deg, rgba(229,0,125,0.03), transparent);}
.dropzone:hover, .dropzone.drag {border-color:var(--spot);background:rgba(229,0,125,0.05);}
.dropzone svg {width:38px;height:38px;margin-bottom:10px;color:var(--spot);}
.dropzone p {margin:0;font-weight:600;font-family:'Barlow',sans-serif;}
.dropzone .hint {color:var(--slate);font-size:13.5px;margin-top:6px;font-family:'Barlow',monospace;letter-spacing:0.02em;}
input[type=file] {display:none;}
.workspace {display:none;}
.workspace.active {display:block;}
/* ===== SETTINGS ===== */
.settings-row {display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:16px;margin-bottom:28px;}
.field-inline label {display:block;font-family:'Barlow',monospace;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--slate);margin-bottom:8px;}
.field-inline input[type=text] {width:100%;border:1px solid var(--line);border-radius:2px;padding:11px 12px;font-family:'Barlow',sans-serif;font-size:14.5px;color:var(--ink);background:var(--paper);}
.field-inline input[type=text]:focus {outline:none;border-color:var(--spot);}
.field-color input[type=color] {width:100%;height:42px;border:1px solid var(--line);border-radius:2px;padding:3px;cursor:pointer;background:var(--paper);}
/* ===== BROWSER TAB PREVIEW ===== */
.tab-preview {display:flex;align-items:center;gap:14px;margin-bottom:28px;}
.tab-mock {display:inline-flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-bottom:none;border-radius:8px 8px 0 0;padding:9px 16px;max-width:220px;}
.tab-mock img {width:16px;height:16px;flex-shrink:0;}
.tab-mock span {font-family:'Barlow',sans-serif;font-size:12.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tab-preview-note {font-family:'Barlow',monospace;font-size:12px;color:var(--slate);}
/* ===== SIZE GRID ===== */
.size-grid {display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:8px;}
.size-box {border:1px solid var(--line);border-radius:2px;padding:16px 10px;text-align:center;background:var(--panel);}
.size-box img {width:44px;height:44px;object-fit:contain;margin-bottom:10px;background:linear-gradient(45deg, #e2e0d8 25%, transparent 25%, transparent 75%, #e2e0d8 75%), linear-gradient(45deg, #e2e0d8 25%, transparent 25%, transparent 75%, #e2e0d8 75%);background-size:8px 8px;background-position:0 0, 4px 4px;}
.size-box-label {display:flex;flex-direction:column;gap:2px;font-family:'Barlow',monospace;font-size:11px;}
.size-box-label span:first-child {font-weight:700;color:var(--ink);}
.size-box-bytes {color:var(--slate);}
.actions {display:flex;gap:10px;margin-top:24px;flex-wrap:wrap;}
.copy-confirm {display:none;font-family:'Barlow',monospace;font-size:12.5px;color:var(--spot-dark);margin-top:12px;}
.copy-confirm.show {display:block;}
@media (max-width:600px) {.settings-row {grid-template-columns:1fr;} .size-grid {grid-template-columns:repeat(3,1fr);}}
@media (max-width:860px) {.tool-hero {background-image:none;}}