/* ExtensionFast - pages outils */
.tool-shell{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;align-items:start;margin-top:34px}
.tool-panel{border:1px solid var(--border);border-radius:22px;background:linear-gradient(180deg,#242424,#1e1e1e);padding:24px}
.tool-panel h2{margin:0 0 6px;font-size:20px;letter-spacing:-.025em}
.tool-panel .tool-hint{margin:0 0 18px;color:#918d89;font-size:13.5px;line-height:1.55}

.icon-drop{display:grid;place-items:center;gap:10px;min-height:190px;padding:26px 20px;text-align:center;
  border:2px dashed #3d3d3d;border-radius:18px;background:#1c1c1c;cursor:pointer;transition:.18s ease}
.icon-drop:hover,.icon-drop:focus-visible{border-color:rgba(237,104,67,.6);background:#202020;outline:none}
.icon-drop.is-over{border-color:var(--accent);background:rgba(237,104,67,.07)}
.icon-drop svg{width:34px;height:34px;color:#6f6b67}
.icon-drop strong{font-size:15px}
.icon-drop span{color:#8a8682;font-size:12.5px}

.tool-or{display:flex;align-items:center;gap:12px;margin:18px 0;color:#6f6b67;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.tool-or::before,.tool-or::after{content:"";flex:1;height:1px;background:#333}
.tool-site{display:flex;gap:8px;flex-wrap:wrap}
.tool-site input{flex:1;min-width:190px;min-height:48px;padding:0 14px;border:1px solid #383838;border-radius:12px;background:#1b1b1b;color:#f2efec;font:inherit;font-size:14px}
.tool-site input:focus{outline:none;border-color:rgba(237,104,67,.6)}
.tool-site button{min-height:48px;padding:0 18px;border:1px solid #444;border-radius:12px;background:#2a2a2a;color:#e9e5e1;font:inherit;font-weight:700;font-size:14px;cursor:pointer;transition:.18s ease}
.tool-site button:hover:not(:disabled){background:#333;border-color:#555}
.tool-site button:disabled{opacity:.55;cursor:default}

.tool-status{margin:14px 0 0;min-height:18px;color:#8fd6a8;font-size:13px}
.tool-status.is-error{color:#ff9c80}

.tool-options{display:grid;gap:18px}
.tool-options .tool-label{display:block;margin-bottom:9px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#8a8682;font-weight:800}
.tool-radio{display:flex;gap:8px;flex-wrap:wrap}
.tool-radio label{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border:1px solid #383838;border-radius:11px;background:#1c1c1c;font-size:13px;cursor:pointer}
.tool-radio input{accent-color:var(--accent)}
.tool-color{display:flex;align-items:center;gap:10px;margin-top:10px}
.tool-color input[type=color]{width:52px;height:38px;padding:0;border:1px solid #3a3a3a;border-radius:10px;background:none;cursor:pointer}
.tool-range{display:grid;gap:7px}
.tool-range-head{display:flex;justify-content:space-between;align-items:baseline}
.tool-range-head b{font-size:13px;color:#cfcbc7;font-weight:700}
.tool-range input[type=range]{width:100%;accent-color:var(--accent)}

.icon-results{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:20px}
.icon-result{margin:0;display:grid;justify-items:center;gap:8px;padding:16px 10px;border:1px solid var(--border);border-radius:16px;background:#1c1c1c}
.icon-frame{display:grid;place-items:center;min-height:132px;width:100%;
  background-image:linear-gradient(45deg,#242424 25%,transparent 25%),linear-gradient(-45deg,#242424 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#242424 75%),linear-gradient(-45deg,transparent 75%,#242424 75%);
  background-size:14px 14px;background-position:0 0,0 7px,7px -7px,-7px 0;border-radius:11px}
.icon-frame canvas{image-rendering:auto;display:block}
.icon-result figcaption{display:grid;justify-items:center;gap:2px;text-align:center}
.icon-result strong{font-size:14px}
.icon-result span{color:#807c78;font-size:11px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.icon-dl{font-size:12px;font-weight:700;color:#ff9c80}
.icon-dl:hover{color:#fff}

.tool-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.tool-zip{min-height:54px;padding:0 24px;border:0;border-radius:14px;background:linear-gradient(180deg,#f07a55,var(--accent));color:#1a1412;font:inherit;font-weight:850;font-size:15px;cursor:pointer;box-shadow:0 12px 30px rgba(237,104,67,.22)}
.tool-zip:disabled{opacity:.42;cursor:default;box-shadow:none}
.tool-empty{margin-top:20px;padding:18px;border:1px dashed #333;border-radius:14px;color:#807c78;font-size:13.5px;text-align:center}
.tool-shell.has-result .tool-empty{display:none}

.tool-code{margin-top:18px;border:1px solid var(--border);border-radius:16px;background:#1b1b1b;overflow:hidden}
.tool-code-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid #2e2e2e}
.tool-code-head span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#8a8682;font-weight:800}
.tool-code-head button{padding:7px 12px;border:1px solid #444;border-radius:9px;background:#262626;color:#ddd9d5;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.tool-code-head button:hover{background:#313131}
.tool-code pre{margin:0;padding:14px;overflow:auto;color:#c9c5c1;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:1.6}

.tool-privacy{display:flex;gap:10px;align-items:flex-start;margin-top:16px;padding:14px;border:1px solid rgba(109,209,142,.22);border-radius:14px;background:rgba(109,209,142,.05);color:#b8d9c4;font-size:12.5px;line-height:1.55}
.tool-privacy b{color:#8fd6a8}

@media(max-width:1000px){.tool-shell{grid-template-columns:1fr}}
@media(max-width:760px){.icon-results{grid-template-columns:repeat(2,1fr)}.tool-panel{padding:20px}.icon-frame{min-height:104px}}
@media(max-width:420px){.icon-results{grid-template-columns:1fr}}

/* Générateur de visuels Chrome Web Store */
.store-previews{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:20px}
.store-result{margin:0;display:grid;gap:9px;padding:14px;border:1px solid var(--border);border-radius:16px;background:#1c1c1c}
.store-frame{border-radius:10px;overflow:hidden;background:#141414;line-height:0}
.store-frame canvas{display:block;width:100%;height:auto}
.store-result figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.store-result strong{font-size:13.5px}
.store-result span{color:#807c78;font-size:11px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.store-result .icon-dl{justify-self:start}
.tool-field{display:grid;gap:7px}
.tool-field input[type=text]{min-height:46px;padding:0 13px;border:1px solid #383838;border-radius:11px;background:#1b1b1b;color:#f2efec;font:inherit;font-size:14px}
.tool-field input[type=text]:focus{outline:none;border-color:rgba(237,104,67,.6)}
@media(max-width:900px){.store-previews{grid-template-columns:1fr}}