/** * Shared layout + form chrome for Cutflux lab tool pages. * Pair with portal-themes.css + lab-tool-shell.css (data-lab-tool on ). */ * { box-sizing: border-box; } html[data-lab-tool] body { margin: 0; padding: 0; font-family: "Plus Jakarta Sans", Inter, -apple-system, Segoe UI, sans-serif; color: #e8ecf3; min-height: 100vh; } html[data-lab-tool] .bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); background: rgba(0, 0, 0, 0.78); position: sticky; top: 0; z-index: 10; } html[data-lab-tool] .brand { font-weight: 800; font-size: 18px; letter-spacing: -0.03em; text-decoration: none; } html[data-lab-tool] .back { color: #9aa6bd; text-decoration: none; font-size: 13px; transition: color 0.15s ease; } html[data-lab-tool] .back:hover { color: #fff; } html[data-lab-tool] main { max-width: 1100px; margin: 0 auto; padding: 28px 22px 80px; } html[data-lab-tool] h1 { font-size: clamp(26px, 4vw, 30px); letter-spacing: -0.03em; margin: 0 0 6px; } html[data-lab-tool] .sub { color: #9aa6bd; margin: 0 0 24px; font-size: 14px; line-height: 1.45; } html[data-lab-tool] .grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 20px; } @media (max-width: 900px) { html[data-lab-tool] .grid { grid-template-columns: 1fr; } } html[data-lab-tool] .card { background: rgba(0, 0, 0, 0.42); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 16px; padding: 18px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); } html[data-lab-tool] .card h2 { font-size: 15px; margin: 0 0 12px; font-weight: 700; } html[data-lab-tool] label { font-size: 12px; color: #9aa6bd; display: block; margin: 12px 0 4px; } html[data-lab-tool] input[type="text"], html[data-lab-tool] textarea, html[data-lab-tool] select { width: 100%; background: #0a0d12; color: #e8ecf3; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; padding: 9px 11px; font: 13px/1.5 inherit; resize: vertical; transition: border-color 0.15s ease, box-shadow 0.15s ease; } html[data-lab-tool] input:focus, html[data-lab-tool] textarea:focus, html[data-lab-tool] select:focus { outline: none; border-color: var(--portal-border-hot, rgba(90, 160, 255, 0.4)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--portal-accent) 14%, transparent); } html[data-lab-tool] .drop { border: 2px dashed color-mix(in srgb, var(--portal-accent) 35%, transparent); border-radius: 14px; padding: 30px 14px; text-align: center; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease; } html[data-lab-tool] .drop p { margin: 4px 0; color: #9aa6bd; font-size: 13px; } html[data-lab-tool] .drop .big { color: #fff; font-weight: 600; font-size: 15px; } html[data-lab-tool] button.primary { color: #fff; border: 0; border-radius: 12px; padding: 12px 20px; font: 600 14px inherit; cursor: pointer; width: 100%; margin-top: 14px; transition: filter 0.15s ease, transform 0.15s ease; } html[data-lab-tool] button.primary:disabled { opacity: 0.5; cursor: not-allowed; } html[data-lab-tool] button.primary:hover:not(:disabled) { filter: brightness(1.08); } html[data-lab-tool] button.primary:active:not(:disabled) { transform: scale(0.98); } html[data-lab-tool] .status { font-size: 12px; color: #9aa6bd; margin-top: 10px; min-height: 18px; } html[data-lab-tool] .status.err { color: #ff8080; } html[data-lab-tool] .status.ok { color: #74e08c; } html[data-lab-tool] .progress { height: 4px; background: rgba(255, 255, 255, 0.06); border-radius: 4px; overflow: hidden; margin-top: 10px; display: none; } html[data-lab-tool] .progress.show { display: block; } html[data-lab-tool] .progress > div { height: 100%; background: linear-gradient(90deg, var(--portal-accent-deep), var(--portal-accent)); width: 0; transition: width 0.2s ease; } html[data-lab-tool] .templates, html[data-lab-tool] .modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 6px; } html[data-lab-tool] .templates button, html[data-lab-tool] .modes button { background: rgba(255, 255, 255, 0.04); color: #e8ecf3; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; padding: 10px 6px; cursor: pointer; font: 600 11px inherit; transition: background 0.15s ease, border-color 0.15s ease; } html[data-lab-tool] details { margin-top: 14px; } html[data-lab-tool] summary { cursor: pointer; font-size: 13px; font-weight: 600; } html[data-lab-tool] .hint { font-size: 11px; color: #6b7790; margin-top: 4px; } html[data-lab-tool] .row { display: flex; gap: 10px; flex-wrap: wrap; } html[data-lab-tool] .row > * { flex: 1; min-width: 120px; }