/* ==========================================================================
   ORIVANA — Crunch Lab instrument + gamified scorecard
   ========================================================================== */
.cl { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: 1rem; align-items: start; }
.cl__inst { background: var(--au-paper); color: var(--au-ink); border-radius: 30px; padding: clamp(1.1rem, 2.2vw, 1.8rem); box-shadow: 0 60px 120px -50px rgba(0,0,0,.8); }
.cl__bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .2rem .4rem 1rem; flex-wrap: wrap; }
.cl__mode { display: flex; align-items: center; gap: .6rem; font: 600 .6rem/1.2 var(--au-wide); letter-spacing: .1em; text-transform: uppercase; }
.cl__led { width: 9px; height: 9px; border-radius: 50%; background: rgba(6,18,11,.25); }
.cl.is-live .cl__led, .is-live .cl__led { background: #D9483B; box-shadow: 0 0 0 4px rgba(217,72,59,.2); animation: au-blink 1s steps(2) infinite; }
.cl__timer { display: flex; align-items: center; gap: .7rem; font: 500 .85rem/1 var(--au-code); }
.cl__timer i { display: block; width: 120px; height: 3px; border-radius: 3px; background: var(--au-line); overflow: hidden; }
.cl__timer i b { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--au-lime), var(--au-amber)); }
.cl__screen { position: relative; height: 260px; border-radius: 20px; overflow: hidden; background: var(--au-ink); }
.cl__screen canvas { width: 100%; height: 100%; display: block; }
.cl__meters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 1rem; background: var(--au-line); border: 1px solid var(--au-line); border-radius: 16px; overflow: hidden; }
.cl__meters > div { background: #fff; padding: .9rem 1rem; display: grid; gap: .35rem; }
.cl__meters span { font: 600 .56rem/1.2 var(--au-wide); letter-spacing: .1em; text-transform: uppercase; color: var(--au-muted); }
.cl__meters b { font: 500 1.1rem/1 var(--au-code); color: var(--au-ink); }
.cl__status { margin: 1rem 0; padding: .9rem 1.1rem; border-radius: 14px; background: var(--au-linen); font-size: .92rem; line-height: 1.5; color: var(--au-olive); min-height: 3.2em; }
.cl__status.is-warn { background: rgba(201,134,111,.15); color: #8A3B26; }
.cl__actions { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }
.cl__actions .au-btn svg { flex: none; }
.cl__demos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--au-line); }
.cl__demos > span { width: 100%; text-align: center; font-size: .82rem; color: var(--au-muted); margin-bottom: .2rem; }
.cl__demos button { padding: .6rem .95rem; border-radius: 999px; border: 1px solid var(--au-line); background: #fff; font: 500 .84rem/1 var(--au-sans); color: var(--au-ink); cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.cl__demos button:hover:not(:disabled) { background: var(--au-ink); color: var(--au-linen); border-color: var(--au-ink); }
.cl__demos button:disabled { opacity: .4; cursor: not-allowed; }
.cl__log { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .4rem; max-height: 220px; overflow: auto; }
.cl__log li { display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; gap: .7rem; padding: .7rem .9rem; border-radius: 12px; background: #fff; border: 1px solid var(--au-line); animation: au-swap .5s var(--au-ease); }
.cl__log li b { font: 600 .82rem/1 var(--au-sans); }
.cl__log li span { font: 500 .9rem/1 var(--au-code); }
.cl__log li em { font-style: normal; font-size: .8rem; color: var(--au-muted); line-height: 1.4; }
.cl__log li.is-ok { border-color: rgba(110,154,48,.35); }
.cl__log li.is-ok span { color: var(--au-leaf); }
.cl__log li.is-no span { color: #B2513C; }

.cl__card { position: sticky; top: 100px; border-radius: 30px; padding: 1.8rem; background: linear-gradient(170deg, rgba(243,238,227,.08), rgba(243,238,227,.02)); border: 1px solid var(--au-line-light); backdrop-filter: blur(12px); color: var(--au-linen); }
.cl__dial { position: relative; width: min(230px, 100%); aspect-ratio: 1; margin: .2rem auto 1rem; }
.cl__dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.cl__track { fill: none; stroke: rgba(243,238,227,.1); stroke-width: 10; }
.cl__ring { fill: none; stroke: var(--au-honey); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 552.9; stroke-dashoffset: 552.9; transition: stroke .6s; }
.cl__dial-in { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.cl__dial-in b { font: 200 clamp(3.6rem, 6vw, 5rem)/1 var(--au-wide); letter-spacing: -.06em; color: var(--au-linen); }
.cl__dial-in span { font: 600 .58rem/1 var(--au-wide); letter-spacing: .12em; color: rgba(243,238,227,.45); margin-top: .4rem; }
.cl__tier { text-align: center; font: 400 1.6rem/1.15 var(--au-serif); color: var(--au-honey); }
.cl__note { text-align: center; font-size: .88rem; line-height: 1.6; color: rgba(243,238,227,.68); margin: .6rem 0 1.4rem; }
.cl__bars { display: grid; gap: .65rem; }
.cl__bars > div { display: grid; grid-template-columns: 1fr 34px; grid-template-rows: auto 4px; gap: .35rem .6rem; align-items: center; }
.cl__bars span { font-size: .8rem; color: rgba(243,238,227,.72); }
.cl__bars b { grid-row: 1; grid-column: 2; text-align: right; font: 500 .8rem/1 var(--au-code); color: var(--au-honey); }
.cl__bars i { grid-column: 1 / -1; display: block; height: 4px; width: 0; border-radius: 4px; background: linear-gradient(90deg, var(--au-lime), var(--au-honey)); transition: width 1.4s var(--au-ease); }
.cl__bars > div { position: relative; }
.cl__bars > div::after { content: ""; grid-column: 1 / -1; grid-row: 2; height: 4px; border-radius: 4px; background: rgba(243,238,227,.08); z-index: -1; }
.cl__btns { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 1.4rem; }
.cl__btns .au-btn { padding: .75rem 1.1rem; font-size: .85rem; }
.cl__profile { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 1.4rem; border-top: 1px solid var(--au-line-light); }
.cl__profile > div { padding: 1rem .4rem 0; text-align: center; display: grid; gap: .35rem; }
.cl__profile span { font: 600 .52rem/1.2 var(--au-wide); letter-spacing: .1em; text-transform: uppercase; color: rgba(243,238,227,.45); }
.cl__profile b { font: 300 1.7rem/1 var(--au-wide); color: var(--au-linen); }
.cl__next { text-align: center; margin-top: 1rem; font-size: .84rem; color: var(--au-lime); }

.cl__extras { display: grid; grid-template-columns: 1.2fr 1fr .9fr; gap: 1rem; margin-top: 1rem; }
.cl__panel { border-radius: 26px; padding: 1.6rem; border: 1px solid var(--au-line-light); background: rgba(243,238,227,.03); }
.cl__panel h3 { font: 400 1.35rem/1.2 var(--au-serif) !important; color: var(--au-linen); margin-bottom: 1.1rem; }
.cl__badges { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.cl__badges li { display: grid; grid-template-columns: 26px 1fr; gap: .1rem .7rem; padding: .7rem .8rem; border-radius: 14px; border: 1px dashed rgba(243,238,227,.16); opacity: .5; transition: opacity .4s, border-color .4s, background .4s; }
.cl__badges li i { grid-row: 1 / span 2; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(243,238,227,.3); align-self: center; }
.cl__badges li b { font: 600 .82rem/1.2 var(--au-sans); color: var(--au-linen); }
.cl__badges li span { font-size: .72rem; line-height: 1.35; color: rgba(243,238,227,.55); }
.cl__badges li.is-on { opacity: 1; border-style: solid; border-color: rgba(233,184,114,.45); background: rgba(233,184,114,.07); }
.cl__badges li.is-on i { background: var(--au-honey); border-color: var(--au-honey); box-shadow: inset 0 0 0 6px var(--au-ink); }
.cl__board { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.cl__board li { display: grid; grid-template-columns: 24px 48px 1fr auto; align-items: baseline; gap: .6rem; padding: .65rem 0; border-bottom: 1px solid var(--au-line-light); }
.cl__board li i { font: 600 .6rem/1 var(--au-wide); color: rgba(243,238,227,.45); font-style: normal; }
.cl__board li b { font: 300 1.4rem/1 var(--au-wide); color: var(--au-honey); }
.cl__board li span { font-size: .86rem; color: var(--au-linen); }
.cl__board li time { font: 500 .72rem/1 var(--au-code); color: rgba(243,238,227,.45); }
.cl__board li.is-empty { display: block; font-size: .86rem; color: rgba(243,238,227,.5); }
.cl__tiers { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: 1.1rem; }
.cl__tiers span { font: 600 .52rem/1 var(--au-wide); letter-spacing: .08em; text-transform: uppercase; padding: .45rem .55rem; border-radius: 999px; border: 1px solid var(--c); color: var(--c); }
.cl__cta p { font-size: .9rem; line-height: 1.6; color: rgba(243,238,227,.68); margin-bottom: 1.2rem; }
.cl__cta .au-btn { padding: .8rem 1.1rem; font-size: .86rem; }
.cl__toast { position: fixed; left: 50%; bottom: 2rem; z-index: 9995; transform: translate(-50%, 140%); padding: 1rem 1.4rem; border-radius: 999px; background: var(--au-honey); color: var(--au-ink); font: 600 .9rem/1.2 var(--au-sans); box-shadow: 0 20px 50px -20px rgba(0,0,0,.6); transition: transform .7s var(--au-ease); pointer-events: none; }
.cl__toast.is-on { transform: translate(-50%, 0); }

@media (max-width: 1000px) {
  .cl, .cl__extras { grid-template-columns: 1fr; }
  .cl__card { position: relative; top: 0; }
}
@media (max-width: 560px) {
  .cl__meters { grid-template-columns: 1fr; }
  .cl__badges { grid-template-columns: 1fr; }
  .cl__screen { height: 200px; }
}