/* Scoped to the converter controls. Existing page/body/container/heading styles are inherited. */
.refined-tool{--rf-accent:#2185d0;--rf-muted:#737d89;--rf-line:#e1e5e9;--rf-soft:#f6f8fa;--rf-mono:ui-monospace,SFMono-Regular,Consolas,monospace;margin-bottom:40px}
.refined-tool *{box-sizing:border-box}
.refined-tool button,.refined-tool input,.refined-tool textarea,.refined-tool select{font-family:inherit;font-size:14px;line-height:1.5;border-radius:7px}
.refined-tool button{padding:10px 17px;background:#fff;color:#303b42;border:1px solid var(--rf-line);cursor:pointer;font-weight:400}
.refined-tool button:hover{background:var(--rf-soft)}
.refined-tool .primary{background:var(--rf-accent);border-color:var(--rf-accent);color:#fff}
.refined-tool .primary:hover{background:#4398de}
.refined-tool .quiet{background:transparent;border-color:transparent;color:var(--rf-muted);font-size:12px;padding:5px 9px}
.refined-tool .quiet:hover{color:#303b42;background:var(--rf-soft)}
.refined-tool input,.refined-tool textarea,.refined-tool select{border:1px solid var(--rf-line);color:#20262c;background:#fff;padding:12px 14px;min-width:0}
.refined-tool input,.refined-tool textarea{font-family:var(--rf-mono);font-size:14px}
.refined-tool input:focus,.refined-tool textarea:focus,.refined-tool select:focus{outline:2px solid #e8f3fc;border-color:var(--rf-accent)}
.refined-tool :focus-visible{outline:2px solid var(--rf-accent);outline-offset:3px}
.refined-tool textarea{width:100%;display:block;resize:vertical;min-height:220px;line-height:1.85}
.refined-tool textarea::placeholder,.refined-tool input::placeholder{color:#8a929c}
.refined-tool [hidden]{display:none!important}
.refined-tool .editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.refined-tool .editor{min-width:0}
.refined-tool .editor-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.refined-tool .editor-head h3{margin-bottom:0}
.refined-tool .editor-head label{font:inherit;color:inherit}
.refined-tool .editor-controls{display:flex;gap:2px;align-items:center}
.refined-tool .copy-icon{font-family:var(--rf-mono);font-size:16px;padding:4px 8px}
.refined-tool .editor-meta{display:flex;justify-content:space-between;color:var(--rf-muted);font:11px/1.5 var(--rf-mono);margin-top:10px}
.refined-tool .action-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:22px}
.refined-tool #clear-all{margin-left:auto}
.refined-tool .mode-note{font-size:12px;color:var(--rf-muted);line-height:1.8;margin-top:18px}
.refined-tool .rf-fields{margin-top:16px}
.refined-tool .rf-section{margin:0}
.refined-tool hr{margin:15px 0 30px}
.refined-tool .field-line{display:flex;align-items:center;gap:12px;max-width:800px}
.refined-tool .field-line input{width:100%;flex:1}
.refined-tool .field-line .primary{padding:12px 24px;white-space:nowrap}
.refined-tool .field-line select{padding:12px}
.refined-tool label[for=timestamp-input],.refined-tool .date-fields label{display:block;font-size:12px;color:var(--rf-muted);line-height:1.5;margin-bottom:8px}
.refined-tool .input-tools{display:flex;gap:8px;align-items:center;max-width:800px;margin:10px 0 18px;font-size:11px;color:var(--rf-muted);line-height:1.7;flex-wrap:wrap}
.refined-tool .input-tools .quiet:first-child{padding-left:0}
.refined-tool .spacer{flex:1}
.refined-tool .result{background:var(--rf-soft);border:1px solid var(--rf-line);border-radius:8px;overflow:hidden;max-width:800px;margin-top:15px}
.refined-tool .result-title{font:10px/1.5 var(--rf-mono);letter-spacing:.8px;color:var(--rf-muted);padding:10px 15px;border-bottom:1px solid var(--rf-line)}
.refined-tool .result-row{display:flex;align-items:center;gap:15px;padding:9px 15px;border-bottom:1px solid var(--rf-line);font-size:12px;line-height:1.7;min-height:42px}
.refined-tool .result-row:last-child{border:0}
.refined-tool .result-row>span{color:var(--rf-muted);min-width:90px}
.refined-tool .result-row code{font:13px/1.6 var(--rf-mono);flex:1;overflow-wrap:anywhere}
.refined-tool .result-row .quiet{padding:0 5px}
.refined-tool .help-note{display:flex;gap:9px;align-items:baseline;font-size:12px;line-height:1.8;color:var(--rf-muted);max-width:800px;margin:14px 0 20px}
.refined-tool .help-icon{font-size:11px;border:1px solid var(--rf-line);border-radius:50%;min-width:16px;height:16px;text-align:center;line-height:15px}
.refined-tool .help-note strong{font-weight:400}
.refined-tool .date-fields{display:grid;grid-template-columns:1fr 1fr;max-width:530px;gap:14px;margin-bottom:15px}
.refined-tool .date-fields input{width:100%;height:46px}
.refined-tool .date-options{display:flex;gap:15px;align-items:center;max-width:530px;justify-content:space-between;margin-bottom:5px}
.refined-tool .zone-switch{display:flex;gap:5px}
.refined-tool .zone-switch button{padding:6px 12px;font-size:12px}
.refined-tool .zone-switch button[aria-pressed=true]{background:#eef6fc;color:var(--rf-accent);border-color:#c6dff2}
.refined-tool .error{font-size:13px;line-height:1.7;color:#b53645;margin-top:12px}
.refined-tool .error:empty{display:none}
.refined-tool .rf-toast{position:fixed;left:50%;bottom:25px;transform:translateX(-50%);background:#164f7a;color:#fff;padding:8px 18px;border-radius:7px;font-size:13px;line-height:1.7;opacity:0;pointer-events:none;z-index:10}
.refined-tool .rf-toast.show{opacity:1}
@media(max-width:650px){.refined-tool .editor-grid{grid-template-columns:1fr;gap:0}.refined-tool textarea{height:clamp(56px,calc((100svh - 500px)/2),120px);min-height:56px}.refined-tool .field-line{flex-wrap:wrap;gap:10px}.refined-tool .field-line input{flex-basis:100%}.refined-tool .field-line select,.refined-tool .field-line .primary{flex:1}.refined-tool .date-fields{grid-template-columns:1fr}.refined-tool .result-row{gap:5px 10px;flex-wrap:wrap;padding:10px 12px}.refined-tool .result-row>span{min-width:75px;font-size:11px}.refined-tool .result-row code{font-size:11px}.refined-tool .result-row .quiet{margin-left:auto}.refined-tool .date-options{flex-wrap:wrap}.refined-tool .input-tools .spacer{display:none}.refined-tool .input-tools>span:last-child{display:none}.refined-tool #clear-all{margin-left:0}.refined-tool .action-row{gap:6px}}
/* Comfortable touch targets and input sizing on narrow screens. */
@media(max-width:650px){
.refined-tool input,.refined-tool textarea,.refined-tool select{font-size:16px}
.refined-tool button{min-height:44px}
.refined-tool .editor-controls{gap:4px;flex-shrink:0}
.refined-tool .editor-controls button,.refined-tool .result-row .copy-icon{min-width:44px;min-height:44px}
.refined-tool .editor-head{gap:8px;align-items:center}
.refined-tool .editor-head h3{min-width:0}
.refined-tool .rf-toast{max-width:calc(100vw - 32px);width:max-content;text-align:center}
}

/* Short portrait screens need tighter spacing around the editors as well. */
@media(max-width:650px) and (max-height:640px){
.refined-tool .editor-head h3{margin-top:12px}
.refined-tool .editor-head{margin-bottom:6px}
.refined-tool .editor-meta{margin-top:6px}
.refined-tool .action-row{margin-top:10px}
}