.hftp-root {
--hftp-primary: var(--color-primary, #f97316);
--hftp-background: var(--color-background, #f7f8fb);
--hftp-surface: var(--color-surface, #ffffff);
--hftp-surface-hover: var(--color-surface-hover, #f2f4f7);
--hftp-foreground: var(--color-foreground, #15171a);
--hftp-muted: var(--color-foreground-secondary, #667085);
--hftp-border: var(--color-border, #d9dee7);
--hftp-panel: var(--hf-shell-bg, var(--hftp-surface));
--hftp-shadow: var(--hf-shell-shadow-soft, 0 14px 38px rgba(20, 32, 54, 0.08));
min-height: 100%;
padding: 22px;
color: var(--hftp-foreground);
background: transparent;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.hftp-root,
.hftp-root * {
box-sizing: border-box;
}
.hftp-root button {
font: inherit;
}
.hftp-header,
.hftp-main {
width: min(100%, 1180px);
margin: 0 auto;
}
.hftp-header {
display: flex;
min-height: 64px;
align-items: center;
justify-content: space-between;
gap: 14px;
border: 1px solid var(--hftp-border);
border-radius: 10px;
background: var(--hftp-panel);
box-shadow: var(--hftp-shadow);
padding: 12px 16px;
}
.hftp-title {
display: flex;
min-width: 0;
align-items: center;
gap: 10px;
}
.hftp-title svg {
color: var(--hftp-primary);
flex: 0 0 auto;
}
.hftp-title h1 {
margin: 0;
font-size: 16px;
line-height: 1.2;
}
.hftp-title p {
margin: 2px 0 0;
color: var(--hftp-muted);
font-size: 12px;
line-height: 1.4;
}
.hftp-select-field {
display: grid;
min-width: 180px;
gap: 6px;
color: var(--hftp-muted);
font-size: 11px;
font-weight: 650;
}
.hftp-select {
min-height: 38px;
border: 1px solid var(--hftp-border);
border-radius: 8px;
background: var(--hftp-surface);
color: var(--hftp-foreground);
padding: 0 40px 0 10px;
}
.hftp-main {
padding-top: 16px;
}
.hftp-panel {
border: 1px solid var(--hftp-border);
border-radius: 10px;
background: var(--hftp-panel);
box-shadow: var(--hftp-shadow);
padding: 16px;
}
.hftp-button {
display: inline-flex;
min-height: 36px;
align-items: center;
gap: 8px;
border: 1px solid color-mix(in srgb, var(--hftp-primary) 32%, transparent);
border-radius: 8px;
background: color-mix(in srgb, var(--hftp-primary) 10%, transparent);
color: var(--hftp-foreground);
padding: 0 12px;
}
.hftp-button:hover:not(:disabled) {
background: color-mix(in srgb, var(--hftp-primary) 16%, transparent);
}
.hftp-button:disabled {
cursor: not-allowed;
opacity: 0.55;
}
.hftp-panel p {
margin: 12px 0 0;
color: var(--hftp-muted);
font-size: 13px;
}
@media (max-width: 720px) {
.hftp-root {
padding: 14px;
}
.hftp-header {
align-items: stretch;
flex-direction: column;
}
.hftp-select-field {
width: 100%;
}
}