.tci-widget,
.tci-widget * {
box-sizing: border-box;
}
.tci-widget [hidden] {
display: none !important;
}
.tci-widget {
--tci-ink: #111827;
--tci-soft: #334155;
--tci-muted: #667085;
--tci-line: #d8dee8;
--tci-line-strong: #b7c2d2;
--tci-paper: #f6f7f9;
--tci-panel: #ffffff;
--tci-blue: #1f6feb;
--tci-blue-dark: #1557be;
--tci-green: #16876a;
--tci-amber: #b7791f;
--tci-danger: #c24135;
width: min(1180px, 100%);
margin: 0 auto;
color: var(--tci-ink);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height: 1.5;
}
.tci-widget--arelec {
--tci-ink: #0b1a30;
--tci-soft: #173858;
--tci-muted: #5f7389;
--tci-blue: #0078c8;
--tci-blue-dark: #0b1a30;
--tci-green: #00a884;
--tci-amber: #0078c8;
width: min(1140px, 100%);
}
.tci-section-intro {
display: grid;
gap: 12px;
margin: 0 0 18px;
}
.tci-section-intro p {
max-width: 760px;
margin: 0;
color: var(--tci-muted);
font-size: 1rem;
line-height: 1.65;
}
.tci-eyebrow {
display: inline-flex;
width: fit-content;
align-items: center;
border: 1px solid rgba(0, 120, 200, 0.18);
border-radius: 999px;
background: rgba(0, 120, 200, 0.08);
color: var(--tci-blue);
font-size: 0.76rem;
font-weight: 900;
letter-spacing: 0.08em;
padding: 6px 12px;
text-transform: uppercase;
}
.tci-chip-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.tci-chip-row span {
border: 1px solid rgba(11, 26, 48, 0.1);
border-radius: 999px;
background: #ffffff;
color: var(--tci-soft);
font-size: 0.78rem;
font-weight: 800;
padding: 7px 11px;
}
.tci-widget button,
.tci-widget select,
.tci-widget textarea {
font: inherit;
}
.tci-widget button {
cursor: pointer;
}
.tci-topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 16px;
}
.tci-brand {
display: flex;
align-items: center;
gap: 13px;
}
.tci-brand-mark {
display: grid;
width: 46px;
height: 46px;
place-items: center;
border: 1px solid rgba(31, 111, 235, 0.24);
border-radius: 12px;
color: var(--tci-blue);
background: #ffffff;
box-shadow: 0 8px 24px rgba(31, 111, 235, 0.12);
}
.tci-widget--arelec .tci-brand-mark {
background: linear-gradient(135deg, #0078c8, #0b1a30);
border-color: rgba(0, 198, 255, 0.28);
color: #ffffff;
}
.tci-brand h2 {
margin: 0;
font-size: clamp(1.15rem, 2vw, 1.55rem);
line-height: 1.1;
letter-spacing: 0;
}
.tci-brand p {
margin: 4px 0 0;
color: var(--tci-muted);
font-size: 0.88rem;
}
.tci-status {
display: inline-flex;
align-items: center;
min-height: 34px;
padding: 7px 12px;
border: 1px solid rgba(183, 121, 31, 0.34);
border-radius: 999px;
background: #ffffff;
color: var(--tci-amber);
font-size: 0.82rem;
font-weight: 700;
white-space: nowrap;
}
.tci-status[data-provider="anthropic"],
.tci-status[data-provider="ollama"] {
border-color: rgba(22, 135, 106, 0.28);
color: var(--tci-green);
}
.tci-status[data-provider="locked"] {
border-color: rgba(194, 65, 53, 0.24);
color: var(--tci-danger);
}
.tci-access-gate {
display: grid;
place-items: center;
margin-top: 18px;
}
.tci-access-card {
width: min(100%, 520px);
padding: 24px;
border: 1px solid var(--tci-line);
border-radius: 16px;
background: #ffffff;
box-shadow: 0 18px 48px rgba(6, 27, 51, 0.10);
}
.tci-access-kicker {
display: inline-flex;
align-items: center;
min-height: 26px;
padding: 0 11px;
border: 1px solid rgba(0, 132, 255, 0.20);
border-radius: 999px;
background: rgba(0, 132, 255, 0.08);
color: var(--tci-blue);
font-size: 0.72rem;
font-weight: 900;
text-transform: uppercase;
}
.tci-access-card h3 {
margin: 14px 0 6px;
color: var(--tci-ink);
font-size: 1.24rem;
}
.tci-access-card p {
margin: 0 0 16px;
color: var(--tci-muted);
}
.tci-access-card label {
margin-bottom: 12px;
}
.tci-access-card input {
width: 100%;
min-height: 46px;
margin-top: 7px;
padding: 0 14px;
border: 1px solid var(--tci-line);
border-radius: 12px;
color: var(--tci-ink);
font: inherit;
}
.tci-access-card input:focus {
border-color: var(--tci-blue);
outline: 3px solid rgba(0, 132, 255, 0.12);
}
.tci-layout {
display: grid;
grid-template-columns: minmax(310px, 420px) minmax(0, 1fr);
gap: 18px;
}
.tci-panel {
min-width: 0;
border: 1px solid rgba(183, 194, 210, 0.8);
border-radius: 16px;
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 16px 44px rgba(15, 23, 42, 0.1);
}
.tci-widget--arelec .tci-panel {
border-color: rgba(0, 120, 200, 0.18);
}
.tci-widget--arelec .tci-drop {
background: linear-gradient(180deg, #f7fbff, #ffffff);
}
.tci-widget--arelec .tci-primary {
background: linear-gradient(135deg, #0078c8, #0b1a30);
border-color: #0078c8;
}
.tci-widget--arelec .tci-primary:hover:not(:disabled) {
background: linear-gradient(135deg, #00aaff, #0078c8);
}
.tci-widget--arelec .tci-tab.is-active {
background: #0b1a30;
}
.tci-controls {
padding: 18px;
}
.tci-preview-panel {
display: flex;
min-height: 680px;
overflow: hidden;
flex-direction: column;
}
.tci-drop {
display: grid;
width: 100%;
min-height: 174px;
place-items: center;
padding: 20px;
border: 1.5px dashed var(--tci-line-strong);
border-radius: 14px;
background: #f9fbff;
color: var(--tci-ink);
text-align: center;
transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.tci-drop:hover,
.tci-drop.is-hover {
border-color: var(--tci-blue);
background: #f3f7ff;
transform: translateY(-1px);
}
.tci-drop-icon {
display: grid;
width: 48px;
height: 48px;
place-items: center;
margin-bottom: 10px;
border-radius: 12px;
background: #ffffff;
color: var(--tci-blue);
border: 1px solid var(--tci-line);
}
.tci-drop strong {
display: block;
font-size: 1rem;
}
.tci-drop span:last-child {
display: block;
margin-top: 4px;
color: var(--tci-muted);
font-size: 0.82rem;
}
.tci-file-row {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
margin-top: 12px;
padding: 10px;
border: 1px solid rgba(22, 135, 106, 0.24);
border-radius: 12px;
background: rgba(22, 135, 106, 0.08);
}
.tci-file-badge {
display: grid;
width: 42px;
height: 32px;
place-items: center;
border-radius: 8px;
background: #ffffff;
color: var(--tci-green);
font-size: 0.72rem;
font-weight: 800;
}
.tci-file-row strong,
.tci-file-row span {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tci-file-row strong {
font-size: 0.86rem;
}
.tci-file-row span {
color: var(--tci-muted);
font-size: 0.76rem;
}
.tci-icon-button {
display: grid;
width: 34px;
height: 34px;
place-items: center;
border: 1px solid transparent;
border-radius: 9px;
background: transparent;
color: var(--tci-muted);
}
.tci-icon-button:hover {
border-color: rgba(194, 65, 53, 0.2);
color: var(--tci-danger);
background: rgba(194, 65, 53, 0.07);
}
.tci-lang-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr);
gap: 10px;
align-items: end;
margin-top: 16px;
}
.tci-widget label,
.tci-field {
display: grid;
gap: 6px;
}
.tci-widget label > span,
.tci-field > span {
color: var(--tci-soft);
font-size: 0.78rem;
font-weight: 800;
}
.tci-widget select,
.tci-widget textarea {
width: 100%;
border: 1px solid var(--tci-line);
border-radius: 11px;
background: #ffffff;
color: var(--tci-ink);
outline: none;
}
.tci-widget select {
min-height: 44px;
padding: 0 12px;
}
.tci-widget textarea {
min-height: 118px;
resize: vertical;
padding: 11px 12px;
color: var(--tci-soft);
line-height: 1.45;
}
.tci-widget select:focus,
.tci-widget textarea:focus {
border-color: var(--tci-blue);
box-shadow: 0 0 0 4px rgba(31, 111, 235, 0.12);
}
.tci-swap {
display: grid;
width: 42px;
height: 44px;
place-items: center;
border: 1px solid var(--tci-line);
border-radius: 11px;
background: #ffffff;
color: var(--tci-blue);
}
.tci-swap:hover {
border-color: var(--tci-blue);
background: #f3f7ff;
}
.tci-field,
.tci-meter-row,
.tci-action-row {
margin-top: 14px;
}
.tci-meter-row {
display: grid;
gap: 8px;
}
.tci-meter-row > div:first-child {
display: flex;
justify-content: space-between;
gap: 12px;
color: var(--tci-muted);
font-size: 0.78rem;
}
.tci-meter-row strong {
color: var(--tci-ink);
}
.tci-meter {
height: 7px;
overflow: hidden;
border-radius: 999px;
background: #e8edf4;
}
.tci-meter span {
display: block;
width: 0%;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, var(--tci-blue), var(--tci-green));
transition: width 180ms ease, background 180ms ease;
}
.tci-meter span.is-over {
background: var(--tci-danger);
}
.tci-action-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
}
.tci-primary,
.tci-secondary,
.tci-tool-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
gap: 8px;
border-radius: 11px;
font-weight: 800;
}
.tci-primary {
border: 1px solid var(--tci-blue);
background: var(--tci-blue);
color: #ffffff;
box-shadow: 0 10px 22px rgba(31, 111, 235, 0.22);
}
.tci-primary:hover:not(:disabled) {
background: var(--tci-blue-dark);
}
.tci-primary:disabled,
.tci-tool-button:disabled {
cursor: not-allowed;
opacity: 0.48;
box-shadow: none;
}
.tci-secondary,
.tci-tool-button {
border: 1px solid var(--tci-line);
background: #ffffff;
color: var(--tci-soft);
}
.tci-secondary {
padding: 0 14px;
}
.tci-secondary:hover,
.tci-tool-button:hover:not(:disabled) {
border-color: var(--tci-blue);
color: var(--tci-blue);
background: #f3f7ff;
}
.tci-message {
margin-top: 12px;
padding: 11px 12px;
border-radius: 11px;
border: 1px solid rgba(194, 65, 53, 0.25);
background: rgba(194, 65, 53, 0.08);
color: var(--tci-danger);
font-size: 0.84rem;
line-height: 1.45;
}
.tci-message.is-ok {
border-color: rgba(22, 135, 106, 0.24);
background: rgba(22, 135, 106, 0.08);
color: var(--tci-green);
}
.tci-preview-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px;
border-bottom: 1px solid var(--tci-line);
background: rgba(250, 251, 253, 0.9);
}
.tci-tabs {
display: inline-flex;
gap: 4px;
padding: 4px;
border: 1px solid var(--tci-line);
border-radius: 12px;
background: #ffffff;
}
.tci-tab {
min-height: 34px;
padding: 0 13px;
border: 0;
border-radius: 9px;
background: transparent;
color: var(--tci-muted);
font-size: 0.84rem;
font-weight: 800;
}
.tci-tab.is-active {
background: var(--tci-ink);
color: #ffffff;
}
.tci-downloads {
display: flex;
gap: 8px;
}
.tci-tool-button {
min-height: 38px;
padding: 0 12px;
font-size: 0.82rem;
}
.tci-progress {
padding: 12px 16px 0;
}
.tci-progress > div {
height: 8px;
overflow: hidden;
border-radius: 999px;
background: #e8edf4;
}
.tci-progress span {
display: block;
width: 0%;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, var(--tci-blue), var(--tci-green));
transition: width 220ms ease;
}
.tci-progress p {
margin: 7px 0 0;
color: var(--tci-muted);
font-size: 0.82rem;
}
.tci-preview {
flex: 1;
min-height: 420px;
margin: 0;
padding: 18px;
overflow: auto;
background:
linear-gradient(#ffffff 31px, transparent 31px),
linear-gradient(90deg, rgba(216, 222, 232, 0.55) 1px, transparent 1px),
#ffffff;
background-size: 100% 32px, 32px 32px;
color: #263244;
font-family: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
font-size: 0.86rem;
line-height: 1.75;
white-space: pre-wrap;
word-break: break-word;
}
.tci-spinner {
width: 16px;
height: 16px;
border: 2px solid rgba(255, 255, 255, 0.34);
border-top-color: #ffffff;
border-radius: 50%;
animation: tci-spin 700ms linear infinite;
}
@keyframes tci-spin {
to {
transform: rotate(360deg);
}
}
@media (max-width: 920px) {
.tci-topbar,
.tci-layout {
display: grid;
grid-template-columns: 1fr;
}
.tci-preview-panel {
min-height: 560px;
}
}
@media (max-width: 620px) {
.tci-brand {
align-items: flex-start;
}
.tci-brand-mark {
width: 40px;
height: 40px;
}
.tci-lang-grid {
grid-template-columns: 1fr;
}
.tci-swap,
.tci-tabs,
.tci-tab,
.tci-tool-button {
width: 100%;
}
.tci-action-row,
.tci-preview-toolbar,
.tci-downloads {
display: grid;
grid-template-columns: 1fr;
}
}