/* ==========================================================================
   AAXL Labs — tool workspace
   Loaded on the home page only. Reuses the existing tokens (olive / dark
   surfaces / Inter + IBM Plex Sans Arabic) so the tools feel like the same
   product, not an embedded widget.
   ========================================================================== */

.tool-modal.tool-modal--workspace {
  width: min(1080px, 100% - 24px);
  max-height: calc(100dvh - 24px);
  padding: 26px 26px 30px;
}
.tool-modal.tool-modal--workspace h2 {
  font-size: 23px;
  padding-left: 34px;
}
.tool-modal--workspace .modal-en {
  margin-bottom: 16px;
}

/* ------------------------------------------------------------------ shell */
.tw {
  margin-top: 4px;
  color: var(--paper);
  font-size: 12px;
}
.tw-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-bottom: 16px;
}
.tw-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #4f523a;
  border-radius: 3px;
  padding: 4px 9px;
  color: #c9cbb0;
  font-size: 9.5px;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.tw-badge::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.tw-badge--local {
  color: #b9bd8c;
}
.tw-badge--server {
  color: #c8c9a0;
}
.tw-badge--external {
  color: #c7a97f;
}
.tw-hint {
  color: #9a9c86;
  font-size: 10px;
  line-height: 1.7;
}
.tw-hint code {
  color: #c3c6a6;
  background: #23241d;
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 9.5px;
  direction: ltr;
  display: inline-block;
}

/* ------------------------------------------------------------------- grid */
.tw-grid {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  align-items: start;
  gap: 18px;
}
.tw-grid--single {
  grid-template-columns: minmax(0, 1fr);
}
.tw-panel {
  border: 1px solid #3b3d2e;
  background: #171713;
  border-radius: 7px;
  padding: 16px;
}
.tw-panel > h3,
.tw-output > h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 13px;
  color: #d3d5c0;
  font-size: 11px;
  font-weight: 550;
  letter-spacing: 0.4px;
}
.tw-panel > h3::before,
.tw-output > h3::before {
  content: "";
  width: 3px;
  height: 11px;
  background: var(--olive);
  border-radius: 1px;
}
.tw-output {
  min-width: 0;
}
.tw-output > h3 {
  margin-top: 2px;
}

/* ----------------------------------------------------------------- fields */
.tw-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 13px;
}
.tw-field:last-child {
  margin-bottom: 0;
}
.tw-field > label {
  color: #b9bbA6;
  font-size: 10.5px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.tw-field > label small {
  color: #7f816c;
  font-size: 9px;
  font-weight: 400;
}
.tw-field input[type="text"],
.tw-field input[type="url"],
.tw-field input[type="number"],
.tw-field input[type="password"],
.tw-field select,
.tw-field textarea {
  width: 100%;
  border: 1px solid #3f4133;
  border-radius: 4px;
  background: #121210;
  color: #eceee0;
  padding: 9px 11px;
  font: inherit;
  font-size: 11.5px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.tw-field input:focus-visible,
.tw-field select:focus-visible,
.tw-field textarea:focus-visible {
  outline: none;
  border-color: var(--olive);
  box-shadow: 0 0 0 2px #777b4b33;
}
.tw-field input[dir="ltr"],
.tw-field textarea[dir="ltr"] {
  text-align: left;
}
.tw-field textarea {
  min-height: 84px;
  resize: vertical;
  line-height: 1.7;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10.5px;
}
.tw-field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #8f927a 50%),
    linear-gradient(135deg, #8f927a 50%, transparent 50%);
  background-position: calc(0% + 14px) calc(50% + 1px),
    calc(0% + 19px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-left: 30px;
}
.tw-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.tw-checks {
  display: grid;
  gap: 8px;
  margin-bottom: 13px;
}
.tw-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #c1c3ae;
  font-size: 10.5px;
  line-height: 1.55;
  cursor: pointer;
}
.tw-check input {
  accent-color: var(--olive);
  width: 13px;
  height: 13px;
  margin-top: 2px;
  flex-shrink: 0;
}
.tw-check span small {
  display: block;
  color: #7f816c;
  font-size: 9px;
  margin-top: 2px;
}

/* --------------------------------------------------------------- dropzone */
.tw-drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border: 1px dashed #4a4d38;
  border-radius: 6px;
  background: #131311;
  padding: 18px 14px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.tw-drop:hover,
.tw-drop.is-over {
  border-color: var(--olive);
  background: #17180f;
}
.tw-drop input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
.tw-drop strong {
  color: #d3d5c0;
  font-size: 11px;
  font-weight: 500;
}
.tw-drop span {
  color: #83856f;
  font-size: 9.5px;
}
.tw-drop svg {
  color: #8f927a;
}
.tw-files {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 9px;
}
.tw-file {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #34362a;
  border-radius: 4px;
  background: #191a15;
  padding: 6px 9px;
  font-size: 10px;
  color: #c3c5b0;
}
.tw-file span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: ltr;
  text-align: right;
}
.tw-file small {
  color: #83856f;
  white-space: nowrap;
  font-size: 9px;
}
.tw-file button {
  color: #8f927a;
  flex-shrink: 0;
}
.tw-file button:hover {
  color: #e8e2d0;
}

/* ---------------------------------------------------------------- actions */
.tw-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 15px;
}
.tw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  border: 1px solid #4a4d38;
  border-radius: 4px;
  background: #1e1f19;
  color: #d7d9c4;
  padding: 0 14px;
  font: inherit;
  font-size: 11px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.tw-btn:hover:not(:disabled) {
  border-color: #6d7052;
  background: #262820;
  color: #f2f3e8;
}
.tw-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.tw-btn--primary {
  border-color: #8f9455;
  background: var(--olive);
  color: #101109;
  font-weight: 550;
}
.tw-btn--primary:hover:not(:disabled) {
  background: #868b52;
  border-color: #a6aa72;
  color: #0c0d08;
}
.tw-btn--ghost {
  background: transparent;
}
.tw-btn--sm {
  min-height: 28px;
  padding-inline: 10px;
  font-size: 10px;
}

/* ---------------------------------------------------------------- results */
.tw-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.tw-stat {
  border: 1px solid #34362a;
  border-radius: 5px;
  background: #191a15;
  padding: 10px 11px;
}
.tw-stat b {
  display: block;
  color: #f0f1e6;
  font-family: ui-monospace, monospace;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  direction: ltr;
  text-align: right;
  unicode-bidi: isolate;
}
.tw-stat span {
  display: block;
  margin-top: 3px;
  color: #8b8d77;
  font-size: 9px;
}
.tw-stat.is-warn b {
  color: #d3b483;
}
.tw-stat.is-bad b {
  color: #d99a8a;
}
.tw-stat.is-good b {
  color: #b4c07e;
}

.tw-tablewrap {
  border: 1px solid #34362a;
  border-radius: 5px;
  overflow: auto;
  max-height: 320px;
  background: #141412;
}
table.tw-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10.5px;
  white-space: nowrap;
}
table.tw-table th,
table.tw-table td {
  border-bottom: 1px solid #2a2c22;
  padding: 7px 10px;
  text-align: right;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
}
table.tw-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #1d1e18;
  color: #cfd1bb;
  font-weight: 550;
  font-size: 10px;
}
table.tw-table td {
  color: #b9bba7;
}
table.tw-table tr:hover td {
  background: #1a1b16;
}
table.tw-table td.is-empty {
  color: #6f7160;
  font-style: italic;
}
table.tw-table th[data-type="num"],
table.tw-table td[data-type="num"] {
  font-family: ui-monospace, monospace;
  direction: ltr;
  text-align: left;
}
.tw-table-note {
  color: #858773;
  font-size: 9.5px;
  margin-top: 7px;
}

.tw-log {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 13px;
}
.tw-log-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border: 1px solid #3a3c2e;
  border-radius: 4px;
  background: #1a1b16;
  padding: 8px 10px;
  color: #b9bba7;
  font-size: 10.5px;
  line-height: 1.7;
}
.tw-log-item::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-top: 5px;
  background: #8b8d77;
}
.tw-log-item--ok::before {
  background: #a9b46f;
}
.tw-log-item--warn {
  border-color: #4a422c;
}
.tw-log-item--warn::before {
  background: #d3b483;
}
.tw-log-item--err {
  border-color: #4b3330;
  color: #d5b0a6;
}
.tw-log-item--err::before {
  background: #c98376;
}
.tw-log-item b {
  color: #e6e8d8;
  font-weight: 550;
}

.tw-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 170px;
  border: 1px dashed #3a3c2e;
  border-radius: 6px;
  padding: 20px;
  text-align: center;
  color: #858773;
  font-size: 10.5px;
  line-height: 1.8;
}
.tw-empty svg {
  color: #6f7259;
}
.tw-empty strong {
  color: #c3c5b0;
  font-size: 11.5px;
  font-weight: 500;
}

.tw-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid #777b4b55;
  border-top-color: var(--olive);
  border-radius: 50%;
  animation: tw-spin 0.7s linear infinite;
}
@keyframes tw-spin {
  to {
    transform: rotate(360deg);
  }
}

.tw-progress {
  height: 3px;
  border-radius: 2px;
  background: #2b2d22;
  overflow: hidden;
  margin-top: 10px;
}
.tw-progress > i {
  display: block;
  height: 100%;
  background: var(--olive);
  width: 0;
  transition: width 0.25s;
}

/* --------------------------------------------------------------- sub views */
.tw-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 12px;
  border-bottom: 1px solid #34362a;
  padding-bottom: 8px;
}
.tw-tab {
  border: 1px solid transparent;
  border-radius: 4px;
  background: none;
  color: #9a9c86;
  padding: 5px 10px;
  font: inherit;
  font-size: 10.5px;
}
.tw-tab[aria-selected="true"] {
  border-color: #4f523a;
  background: #23241d;
  color: #e9ebdb;
}

.tw-kv {
  display: grid;
  grid-template-columns: minmax(120px, auto) minmax(0, 1fr);
  gap: 1px;
  border: 1px solid #34362a;
  border-radius: 5px;
  overflow: hidden;
  background: #34362a;
  font-size: 10.5px;
}
.tw-kv > div {
  background: #171713;
  padding: 7px 10px;
  min-width: 0;
}
.tw-kv > div:nth-child(odd) {
  color: #8f917b;
  background: #1a1b16;
}
.tw-kv > div:nth-child(even) {
  color: #cfd1bb;
  overflow-wrap: anywhere;
  direction: ltr;
  text-align: right;
}
.tw-kv > div[dir="rtl"] {
  direction: rtl;
}

.tw-score {
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid #3b3d2e;
  border-radius: 6px;
  background: #191a15;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.tw-score-ring {
  --p: 0;
  position: relative;
  flex-shrink: 0;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: conic-gradient(var(--olive) calc(var(--p) * 1%), #2c2e24 0);
  display: grid;
  place-items: center;
}
.tw-score-ring::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: #16170f;
}
.tw-score-ring b {
  position: relative;
  color: #f2f3e8;
  font-size: 22px;
  font-family: ui-monospace, monospace;
  line-height: 1;
}
.tw-score-ring small {
  position: relative;
  color: #8b8d77;
  font-size: 8px;
  display: block;
  text-align: center;
  margin-top: 2px;
}
.tw-score-body {
  min-width: 0;
}
.tw-score-body strong {
  display: block;
  color: #e9ebdb;
  font-size: 12.5px;
  font-weight: 550;
}
.tw-score-body p {
  margin-top: 5px;
  color: #9fa18c;
  font-size: 10.5px;
  line-height: 1.8;
}

.tw-issues {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.tw-issue {
  display: flex;
  gap: 10px;
  border: 1px solid #34362a;
  border-radius: 5px;
  background: #191a15;
  padding: 9px 11px;
}
.tw-issue-tag {
  flex-shrink: 0;
  align-self: flex-start;
  border-radius: 3px;
  padding: 2px 7px;
  font-size: 8.5px;
  letter-spacing: 0.3px;
}
.tw-issue--pass .tw-issue-tag {
  background: #3c4428;
  color: #c3cf92;
}
.tw-issue--warn .tw-issue-tag {
  background: #443a24;
  color: #dcc294;
}
.tw-issue--fail .tw-issue-tag {
  background: #472c28;
  color: #dcae9f;
}
.tw-issue b {
  display: block;
  color: #dcded0;
  font-size: 10.5px;
  font-weight: 550;
}
.tw-issue p {
  margin-top: 4px;
  color: #9a9c86;
  font-size: 10px;
  line-height: 1.75;
}
.tw-issue code {
  color: #b9bd91;
  font-size: 9.5px;
  direction: ltr;
  display: inline-block;
  unicode-bidi: isolate;
}

.tw-chart {
  border: 1px solid #34362a;
  border-radius: 5px;
  background: #141412;
  padding: 12px;
  margin-bottom: 14px;
}
.tw-chart svg {
  display: block;
  width: 100%;
  height: auto;
}

.tw-steps {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.tw-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid #34362a;
  border-radius: 5px;
  background: #191a15;
  padding: 9px 11px;
}
.tw-step-no {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #4a4d38;
  color: #a9ab97;
  font-size: 9px;
  display: grid;
  place-items: center;
  font-family: ui-monospace, monospace;
}
.tw-step--pass .tw-step-no {
  border-color: #7d8850;
  background: #333a24;
  color: #cbd598;
}
.tw-step--fail .tw-step-no {
  border-color: #8a5348;
  background: #3b2723;
  color: #e0b1a4;
}
.tw-step-body {
  min-width: 0;
  flex: 1;
}
.tw-step-body strong {
  display: block;
  color: #dfe1d3;
  font-size: 10.5px;
  font-weight: 550;
}
.tw-step-body code {
  display: block;
  margin-top: 3px;
  color: #8f917b;
  font-size: 9.5px;
  overflow-wrap: anywhere;
  direction: ltr;
  text-align: right;
}
.tw-step-body p {
  margin-top: 4px;
  color: #b39a8f;
  font-size: 9.5px;
  line-height: 1.7;
}
.tw-step-time {
  flex-shrink: 0;
  color: #7f816c;
  font-size: 9px;
  font-family: ui-monospace, monospace;
}

.tw-shot {
  display: block;
  max-width: 100%;
  border: 1px solid #3b3d2e;
  border-radius: 4px;
  margin-top: 8px;
}

/* --------------------------------------------------------------- snippets */
.tw-code {
  border: 1px solid #34362a;
  border-radius: 5px;
  background: #121210;
  padding: 11px 12px;
  color: #b9bd91;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  line-height: 1.75;
  direction: ltr;
  text-align: left;
  overflow: auto;
  max-height: 240px;
  white-space: pre;
}

/* -------------------------------------------------------------- responsive */
@media (width <= 860px) {
  .tw-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .tool-modal.tool-modal--workspace {
    padding: 22px 16px 26px;
  }
}
@media (width <= 480px) {
  .tw-row {
    grid-template-columns: 1fr;
  }
  .tw-stat b {
    font-size: 15px;
  }
  .tw-kv {
    grid-template-columns: minmax(0, 1fr);
  }
  .tw-kv > div:nth-child(odd) {
    padding-bottom: 2px;
  }
  .tw-kv > div:nth-child(even) {
    padding-top: 2px;
  }
}

/* --------------------------------------------------------- tool editors */
.tw-step-box {
  border: 1px solid #3b3d2e;
  border-radius: 6px;
  background: #16170f;
  padding: 12px;
  margin-bottom: 10px;
}
.tw-step-box-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.tw-step-box-head strong {
  color: #d3d5c0;
  font-size: 10.5px;
  font-weight: 550;
}
.tw-step-box .tw-field {
  margin-bottom: 9px;
}
.tw-step-box .tw-field:last-child {
  margin-bottom: 0;
}

.tw-test-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 128px minmax(0, 1fr) 28px;
  gap: 6px;
  align-items: center;
  margin-bottom: 7px;
}
.tw-test-row input,
.tw-test-row select {
  width: 100%;
  min-width: 0;
  border: 1px solid #3f4133;
  border-radius: 4px;
  background: #121210;
  color: #eceee0;
  padding: 8px 10px;
  font: inherit;
  font-size: 11px;
}
.tw-test-row input:focus-visible,
.tw-test-row select:focus-visible {
  outline: none;
  border-color: var(--olive);
  box-shadow: 0 0 0 2px #777b4b33;
}
.tw-test-row select {
  appearance: none;
}
@media (width <= 860px) {
  .tw-test-row {
    grid-template-columns: 1fr 1fr;
  }
  .tw-test-row select,
  .tw-test-row .tw-btn {
    grid-column: span 1;
  }
}

/* ------------------------------------------------------- free / paid tier */
.status.lifetime {
  color: #d9b48a;
  background: #33291f80;
  border-color: #57452f;
}
.status.lifetime i {
  background: #d9b48a;
}
.status.monthly {
  color: #b9c48a;
  background: #2a312080;
  border-color: #4a5c36;
}
.status.monthly i {
  background: #b9c48a;
}
.status.free {
  color: #a8c084;
  background: #232c1c80;
  border-color: #3a4a2c;
}
.status.free i {
  background: #a8c084;
}

.license-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #4a4d38;
  border-radius: 4px;
  background: #1e1f19;
  color: #c9cbb0;
  padding: 8px 13px;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.license-chip:hover {
  border-color: var(--olive);
  color: #eceee0;
}

/* --------------------------------------------------------------- pricing */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 8px;
}
.pricing-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
.pricing-card {
  border: 1px solid #3b3d2e;
  border-radius: 9px;
  background: #171713;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pricing-pro {
  border-color: #6a6f45;
  background: linear-gradient(180deg, #1d1e14, #171713);
}
.pricing-lifetime {
  border-color: #4a5c36;
  background: linear-gradient(180deg, #1a1e13, #171713);
}
.pricing-lifetime .pricing-tag {
  background: #2b3518;
  color: #c3d18a;
}
.pricing-tag {
  align-self: flex-start;
  border-radius: 3px;
  padding: 3px 8px;
  font-size: 8.5px;
  letter-spacing: 0.4px;
}
.pricing-free .pricing-tag {
  background: #263019;
  color: #b5c78e;
}
.pricing-pro .pricing-tag {
  background: #333a24;
  color: #d7dc9a;
}
.pricing-card h3 {
  color: #e9ebdb;
  font-size: 17px;
  font-weight: 550;
}
.pricing-price {
  color: #f0f1e6;
  font-size: 28px;
  font-weight: 650;
  font-family: Inter, sans-serif;
}
.pricing-price small {
  color: #8b8d77;
  font-size: 11px;
  font-weight: 400;
}
.pricing-card p {
  color: #9fa18c;
  font-size: 11.5px;
  line-height: 1.9;
}
.pricing-card ul {
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}
.pricing-card li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #c3c5b0;
  font-size: 11px;
}
.pricing-card li svg {
  color: #a9b46f;
  flex-shrink: 0;
}
.pricing-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #a4a68f;
  background: #23241d;
  border: 1px solid #34362a;
  border-radius: 6px;
  padding: 13px 14px;
  font-size: 10.5px;
  line-height: 1.9;
  margin-top: 16px;
}
.pricing-note svg {
  flex-shrink: 0;
  margin-top: 2px;
}

/* -------------------------------------------------- upgrade / license modal */
.tool-modal--upgrade,
.tool-modal--license {
  width: min(480px, 100% - 32px);
}
.upgrade-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid #4a4d38;
  border-radius: 7px;
  background: #23241d;
  padding: 16px;
  margin: 14px 0 4px;
}
.upgrade-box svg {
  color: var(--olive-soft);
}
.upgrade-box strong {
  color: #e9ebdb;
  font-size: 14px;
  font-weight: 550;
}
.upgrade-box p {
  color: #9fa18c;
  font-size: 11px;
  line-height: 1.9;
}
.upgrade-note {
  color: #858773;
  font-size: 10px;
  line-height: 1.8;
  margin-top: 12px;
}
.license-status {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #34362a;
  border-radius: 5px;
  background: #1a1b16;
  padding: 10px 12px;
  color: #c3c5b0;
  font-size: 11px;
  margin-top: 14px;
}
.license-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.license-actions .button {
  flex: 1;
}
.tool-modal--license .tw-field input[type="text"] {
  font-family: ui-monospace, monospace;
  direction: ltr;
  text-align: left;
}

@media (width <= 860px) {
  .pricing-grid,
  .pricing-grid--3 {
    grid-template-columns: 1fr;
  }
  .license-actions {
    flex-direction: column;
  }
}

/* ------------------------------------------------------------ tool guide */
.tool-modal--guide {
  width: min(640px, 100% - 32px);
}
.guide-block {
  border: 1px solid #34362a;
  border-radius: 6px;
  background: #191a15;
  padding: 11px 14px;
  margin-bottom: 9px;
}
.guide-block b {
  display: block;
  color: #dcded0;
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 4px;
}
.guide-block p {
  color: #9fa18c;
  font-size: 11px;
  line-height: 1.8;
  margin: 0;
}
.guide-block ul,
.guide-block ol {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 4px;
}
.guide-block li {
  color: #c3c5b0;
  font-size: 11px;
  line-height: 1.7;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.guide-block li svg {
  color: #a9b46f;
  flex-shrink: 0;
  margin-top: 2px;
}
.guide-block ol {
  counter-reset: g;
}
.guide-block ol li {
  counter-increment: g;
}
.guide-block ol li::before {
  content: counter(g);
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1px solid #4a4d38;
  color: #a9ab97;
  font-size: 9px;
  display: grid;
  place-items: center;
  font-family: ui-monospace, monospace;
  margin-top: 1px;
}
.guide-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
}
.guide-btn {
  margin: 12px 0 0;
}

/* ------------------------------------------------------------------ FAQ */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.faq-list details {
  border: 1px solid #34362a;
  border-radius: 7px;
  background: #171713;
  overflow: hidden;
}
.faq-list summary {
  cursor: pointer;
  padding: 13px 15px;
  color: #d3d5c0;
  font-size: 12px;
  font-weight: 550;
}
.faq-list summary::marker {
  color: var(--olive);
}
.faq-list p {
  padding: 0 15px 14px;
  color: #9fa18c;
  font-size: 11px;
  line-height: 1.9;
}