/* =========================================================
   MOCKUP "notebook" (cards com faixa laranja e estrelas)
   Tudo em em, mude o font-size do .mk para escalar
   ========================================================= */
.mk { font-size: 10px; width: 15em; position: relative; font-family: 'Inter', sans-serif; }
.mk-card { background: #0D0D0F; border-radius: .9em; overflow: visible; padding-bottom: .8em; box-shadow: 0 1.4em 2.4em -1.4em rgba(0,0,0,.55); }
.mk-top { background: linear-gradient(180deg, #FF8A1F, #F26A0E); height: 1.1em; border-radius: .9em .9em 0 0; }
.mk-head { text-align: center; padding: .5em .6em .4em; }
.mk-head small { display: block; color: #FFD23F; font-weight: 800; font-size: .72em; letter-spacing: .02em; text-transform: uppercase; line-height: 1.1; }
.mk-head b { display: inline-block; background: #1650C8; color: #fff; font-weight: 900; font-size: 1em; text-transform: uppercase; padding: .05em .45em; margin-top: .15em; letter-spacing: .01em; line-height: 1.2; }
.lap { width: 112%; margin: .3em 0 0 -6%; position: relative; }
.lap-scr { background: #1b1b1f; border: .32em solid #2a2a30; border-bottom-width: .5em; border-radius: .55em .55em 0 0; aspect-ratio: 16/10; overflow: hidden; position: relative; }
.lap-base { height: .55em; margin: 0 -7%; background: linear-gradient(180deg, #d9d9de, #9a9aa3); border-radius: 0 0 .5em .5em; position: relative; }
.lap-base::before { content: ""; position: absolute; left: 42%; right: 42%; top: 0; height: .22em; background: #8a8a92; border-radius: 0 0 .3em .3em; }
.stars { text-align: center; color: #FFC93C; letter-spacing: .12em; font-size: 1.15em; margin-top: .45em; }

/* telas dentro do notebook */
.sc { position: absolute; inset: 0; background: #0F0F0F; color: #fff; }
.sc-banner { height: 30%; display: flex; flex-direction: column; justify-content: center; padding: 0 8%; font-weight: 900; font-size: .9em; line-height: 1; letter-spacing: -.01em; }
.sc-banner small { font-weight: 500; font-size: .5em; opacity: .8; margin-top: .3em; }
.sc-row { display: flex; align-items: center; gap: .6em; padding: .55em .7em; }
.sc-av { width: 2.6em; height: 2.6em; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; font-weight: 900; font-size: .8em; }
.sc-name { font-weight: 800; font-size: .78em; line-height: 1.1; }
.sc-meta { font-size: .5em; color: #9a9a9a; margin-top: .2em; }
.sc-th { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35em; padding: 0 .7em; }
.sc-th i { aspect-ratio: 16/9; border-radius: .25em; display: flex; align-items: flex-end; padding: .2em; font-style: normal; font-weight: 900; font-size: .38em; line-height: 1; }
.sc-lines { padding: .2em .9em; display: grid; gap: .35em; }
.sc-lines i { display: block; height: .38em; border-radius: .2em; background: #2f2f36; }
.sc-big { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.sc-chat { position: absolute; inset: .6em; display: flex; flex-direction: column; gap: .35em; }
.sc-chat i { display: block; border-radius: .5em; padding: .35em .5em; font-style: normal; font-size: .45em; line-height: 1.25; max-width: 80%; }
.sc-chat i.me { align-self: flex-end; background: #1650C8; }
.sc-chat i.ai { align-self: flex-start; background: #26262c; }