/* cybermeta CLI site: terminal hero and TUI mock, on top of the shared
   Cybermeta site styles (site.css, copied from cybermeta-android-app). */
.term {
  border-radius: 20px; border: 1px solid var(--line); background: #000c; overflow: hidden;
  box-shadow: 0 40px 120px #000a, 0 0 0 1px color-mix(in srgb, var(--cyan) 12%, transparent), 0 0 90px color-mix(in srgb, var(--pink) 10%, transparent);
}
.term-bar { display: flex; align-items: center; gap: .45rem; padding: .7rem 1rem; background: var(--panel); border-bottom: 1px solid var(--line); font: .7rem var(--mono); color: var(--muted); }
.term-bar i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.term-bar i:nth-child(1) { background: var(--red); } .term-bar i:nth-child(2) { background: var(--orange); } .term-bar i:nth-child(3) { background: var(--cyan); }
.term pre { margin: 0; padding: 1.1rem 1.2rem; min-height: 470px; font: .8rem/1.6 var(--mono); color: var(--white); white-space: pre-wrap; word-break: break-word; }
.term .p { color: var(--pink); } .term .c { color: var(--cyan); } .term .m { color: var(--muted); } .term .r { color: var(--red); } .term .o { color: var(--orange); } .term .g { color: var(--acid); }
.caret { display: inline-block; width: .6em; height: 1.1em; vertical-align: -.2em; background: var(--cyan); animation: blink 1s steps(2) infinite; }

.tui { font: .74rem/1.45 var(--mono); border: 1px solid var(--line); border-radius: 16px; background: var(--bg); padding: .8rem; overflow-x: auto; box-shadow: 0 30px 90px #0009; }
.tui-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; min-width: 640px; }
.tui-box { border: 1px solid var(--line); border-radius: 6px; padding: .5rem .7rem; position: relative; }
.tui-box > .t { position: absolute; top: -.75em; left: .6rem; background: var(--bg); padding: 0 .35rem; color: var(--muted); }
.tui-box.risk { border-color: var(--red); } .tui-box.risk > .t { color: var(--red); font-weight: 700; }
.tui-head { grid-column: 1 / -1; display: flex; gap: .6rem; align-items: center; }
.tui-head .badge { background: var(--acid); color: var(--bg); font-weight: 700; padding: 0 .4rem; }
.tui-head .hr { background: var(--red); color: var(--bg); font-weight: 700; padding: 0 .4rem; }
.tui-sel { background: var(--line); color: var(--acid); font-weight: 700; }
.tui-keys { grid-column: 1 / -1; color: var(--pink); }
.keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin-top: 1.4rem; }
.key { display: flex; gap: .8rem; align-items: center; padding: .8rem 1rem; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); }
.key kbd { min-width: 2.2rem; text-align: center; padding: .3rem .5rem; border-radius: 8px; border: 1px solid var(--cyan); color: var(--cyan); font-weight: 700; box-shadow: 0 3px 0 color-mix(in srgb, var(--cyan) 40%, transparent); }
.key span { color: var(--muted); font-size: .9rem; }
.cmdlist { display: grid; gap: .6rem; }
.cmdlist div { display: grid; grid-template-columns: minmax(0, 1.25fr) 1fr; gap: 1rem; padding: .9rem 1.1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); align-items: center; }
.cmdlist code { color: var(--white); font-size: .82rem; overflow-x: auto; white-space: nowrap; }
.cmdlist code b { color: var(--pink); font-weight: 600; }
.cmdlist span { color: var(--muted); font-size: .92rem; }
.droid { display: grid; grid-template-columns: 120px 1fr auto; gap: 1.6rem; align-items: center; padding: 1.8rem; border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--cyan) 50%, var(--line)); background: linear-gradient(120deg, color-mix(in srgb, var(--cyan) 9%, var(--panel)), var(--panel)); }
.droid img { width: 120px; height: 120px; border-radius: 28px; box-shadow: 0 0 40px color-mix(in srgb, var(--cyan) 35%, transparent); }
.droid h3 { margin: 0 0 .3rem; font-size: 1.5rem; } .droid p { margin: 0; color: var(--muted); }
@media (max-width: 980px) { .keys { grid-template-columns: repeat(2, 1fr); } .droid { grid-template-columns: 1fr; text-align: center; } .droid img { margin: 0 auto; } .cmdlist div { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .keys { grid-template-columns: 1fr; } .term pre { min-height: 380px; font-size: .72rem; } }