/* =========================================================
   New Balls Management — auth + app shell
   Shares tokens with styles.css
   ========================================================= */

/* =========================================================
   AUTH (login.html)
   ========================================================= */
body.auth{ background:var(--sand); min-height:100svh }
.auth__grid{ display:grid; grid-template-columns:0.9fr 1.1fr; min-height:100svh }

.auth__brand{ position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:clamp(24px,3vw,44px); color:var(--paper) }
.auth__brand img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2 }
.auth__brand-scrim{ position:absolute; inset:0; z-index:-1; background:linear-gradient(200deg, rgba(21,20,15,.25), rgba(21,20,15,.78)) }
.auth__logo{ display:flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-weight:700; font-size:1.05rem }
.auth__quote{ font-family:var(--font-display); font-weight:500; font-size:clamp(1.2rem,1.8vw,1.6rem); line-height:1.35; max-width:24ch; text-wrap:balance }
.auth__quote cite{ display:block; margin-top:1rem; font-family:var(--font-mono); font-style:normal; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:color-mix(in srgb,var(--paper) 65%,transparent) }

.auth__main{ display:flex; flex-direction:column; justify-content:center; align-items:center; padding:clamp(24px,4vw,60px); position:relative }
.auth__back{ position:absolute; top:clamp(20px,3vw,36px); left:clamp(24px,4vw,60px); font-family:var(--font-mono); font-size:.78rem; letter-spacing:.06em; color:var(--grey); transition:color .25s }
.auth__back:hover{ color:var(--ink) }
.auth__card{ width:min(440px,100%) }
.auth__title{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.9rem,3.4vw,2.6rem); letter-spacing:-.02em; line-height:1.05; margin:.4rem 0 2rem }

.ifield{ display:flex; flex-direction:column; gap:.45rem; margin-bottom:1.2rem }
.ifield span{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--grey) }
.ifield input{
  border:1px solid var(--line-2); background:var(--paper); border-radius:12px;
  padding:.95em 1.1em; font:inherit; color:var(--ink);
  transition:border-color .25s, box-shadow .25s;
}
.ifield input:focus{ outline:none; border-color:var(--ink); box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 10%,transparent) }
.ifield input::placeholder{ color:var(--grey-2) }

.ifield__row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:-.2rem 0 1.6rem }
.checkline{ display:flex; align-items:center; gap:.5rem; font-size:.88rem; color:var(--ink-2); cursor:pointer }
.checkline input{ accent-color:var(--ink); width:15px; height:15px }
.link-quiet{ font-size:.88rem; color:var(--grey); text-decoration:underline; text-underline-offset:3px; transition:color .25s }
.link-quiet:hover{ color:var(--ink) }

.auth__submit{ width:100%; justify-content:center }
.ifield__msg{ margin-top:.9rem; font-family:var(--font-mono); font-size:.8rem; min-height:1.2em; color:var(--grey) }
.ifield__msg.ok{ color:#5d7a4c }
.ifield__msg.err{ color:#a3422f }
.auth__alt{ margin-top:2rem; font-size:.92rem; color:var(--grey) }
.auth__alt a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px }

@media (max-width: 860px){
  .auth__grid{ grid-template-columns:1fr }
  .auth__brand{ min-height:240px }
  .auth__quote{ display:none }
}

/* =========================================================
   APP SHELL (app.html)
   ========================================================= */
body.app{ background:var(--sand); min-height:100svh }
.app__shell{ display:grid; grid-template-columns:230px 1fr; min-height:100svh }

.app__side{
  background:var(--ink); color:var(--paper);
  padding:22px 16px; display:flex; flex-direction:column; gap:22px;
  position:sticky; top:0; height:100svh;
}
.app__brand{ display:flex; align-items:center; gap:.55rem; font-family:var(--font-display); font-weight:700; font-size:1.02rem; padding:0 8px }
.app__nav{ display:flex; flex-direction:column; gap:3px }
.app__nav button{
  text-align:left; font-size:.92rem; padding:.65em .8em; border-radius:9px;
  color:color-mix(in srgb,var(--paper) 62%,transparent);
  transition:background .25s, color .25s;
}
.app__nav button:hover{ color:var(--paper); background:rgba(247,244,237,.07) }
.app__nav button.is-active{ background:rgba(247,244,237,.13); color:var(--paper) }
.app__demo-tag{ margin-top:auto; font-family:var(--font-mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--grey-2); border:1px dashed rgba(247,244,237,.25); border-radius:8px; padding:.6em .8em; text-align:center }
.app__logout{ font-family:var(--font-mono); font-size:.74rem; color:color-mix(in srgb,var(--paper) 60%,transparent); padding:0 8px; transition:color .25s }
.app__logout:hover{ color:var(--paper) }

.app__content{ display:flex; flex-direction:column; min-width:0 }
.app__top{
  display:flex; align-items:center; gap:1rem; padding:14px clamp(16px,2.4vw,30px);
  background:color-mix(in srgb,var(--sand) 86%,transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20;
}
.app__burger{ display:none; width:40px; height:40px; flex-direction:column; gap:5px; align-items:center; justify-content:center; border:1px solid var(--line-2); border-radius:9px }
.app__burger span{ width:16px; height:1.6px; background:var(--ink) }
.app__search{ flex:1; max-width:420px }
.app__search input{ width:100%; border:1px solid var(--line); background:var(--paper); border-radius:100px; padding:.6em 1.1em; font-size:.9rem; color:var(--ink) }
.app__search input:focus{ outline:none; border-color:var(--line-2) }
.app__user{ margin-left:auto; display:flex; align-items:center; gap:.9rem }
.app__bell{ color:var(--grey); display:grid; place-items:center }
.app__avatar{ width:36px; height:36px; border-radius:50%; background:var(--ink); color:var(--paper); display:grid; place-items:center; font-family:var(--font-mono); font-size:.72rem }

.app__main{ padding:clamp(18px,2.6vw,34px); display:flex; flex-direction:column; gap:20px }

/* panels */
.panel{ display:none; flex-direction:column; gap:20px; animation:panelin .45s var(--ease-out) both }
.panel.is-active{ display:flex }
@keyframes panelin{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion: reduce){ .panel{ animation:none } }

.panel__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap }
.panel__title{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.6rem,3vw,2.3rem); letter-spacing:-.02em; line-height:1.05 }

.tag{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.06em; padding:.5em .9em; border-radius:100px; background:var(--paper); border:1px solid var(--line); color:var(--grey) }
.tag--ok{ background:#e7eede; border-color:#cfdbbf; color:#55703f }
.tag--warn{ background:#f3e8d8; border-color:#e3d2b5; color:#8a6a35 }

/* KPI cards */
.kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px }
.kpis--3{ grid-template-columns:repeat(3,1fr) }
.kpi{ background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:18px; display:flex; flex-direction:column; gap:4px }
.kpi__k{ font-family:var(--font-mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--grey-2) }
.kpi__v{ font-family:var(--font-display); font-weight:700; font-size:1.9rem; line-height:1.1 }
.kpi__t{ font-size:.78rem; color:var(--grey) }

/* cards / tables */
.grid-cards{ display:grid; grid-template-columns:1.2fr 1fr; gap:14px }
.card{ background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:clamp(16px,2vw,24px) }
.card__head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:14px }
.card__head h2{ font-family:var(--font-display); font-weight:600; font-size:1.05rem }
.mono{ font-family:var(--font-mono); font-size:.74rem; color:var(--grey-2) }

.bars{ display:flex; align-items:flex-end; gap:10px; height:150px }
.bars span{ flex:1; height:var(--h); background:linear-gradient(180deg,var(--ink-2),var(--ink)); border-radius:6px 6px 0 0; transform-origin:bottom; animation:growbar .9s var(--ease-out) both }
.bars__labels{ display:flex; gap:10px; margin-top:8px }
.bars__labels span{ flex:1; text-align:center }

.timeline{ list-style:none; display:flex; flex-direction:column }
.timeline li{ display:flex; gap:1rem; padding:.8em 0; border-bottom:1px solid var(--line); font-size:.92rem }
.timeline li:last-child{ border-bottom:none }
.timeline__t{ flex:none; width:52px }
.timeline__b{ color:var(--ink-2) }

.table{ width:100%; border-collapse:collapse; font-size:.92rem }
.table th{ text-align:left; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--grey-2); font-weight:400; padding:.7em .8em; border-bottom:1px solid var(--line-2) }
.table td{ padding:.85em .8em; border-bottom:1px solid var(--line); color:var(--ink-2) }
.table tr:last-child td{ border-bottom:none }
.table tr{ transition:background .2s }
.table tbody tr:hover{ background:var(--sand-2) }

.card--assistant{ display:flex; flex-direction:column; gap:18px }
.assistant__hint{ color:var(--ink-2); max-width:60ch }
.assistant__suggest{ display:flex; flex-wrap:wrap; gap:8px }
.assistant__suggest span{ font-family:var(--font-mono); font-size:.78rem; background:var(--sand-2); border:1px solid var(--line); border-radius:100px; padding:.6em 1em; color:var(--grey) }

/* =========================================================
   TRAINING STUDIO
   ========================================================= */
.studio-head__right{ display:flex; align-items:center; gap:.8rem }

.studio-chips{ display:flex; flex-wrap:wrap; gap:6px }
.studio-chips button{
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.04em;
  padding:.55em 1em; border-radius:100px; border:1px solid var(--line);
  background:var(--paper); color:var(--grey); cursor:pointer;
  transition:background .2s, color .2s, border-color .2s;
}
.studio-chips button:hover{ border-color:var(--line-2); color:var(--ink) }
.studio-chips button.is-on{ background:var(--ink); border-color:var(--ink); color:var(--paper) }
.studio-chips--lang button{ padding:.45em .85em }

.studio-form{ display:flex; flex-direction:column; gap:20px }
.studio-form__hint{ color:var(--ink-2); max-width:62ch }
.studio-form__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px 22px }
.sfield{ display:flex; flex-direction:column; gap:.55rem }
.sfield > span{ font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--grey-2) }
.studio-select{
  border:1px solid var(--line); background:var(--paper); border-radius:10px;
  padding:.6em .9em; font:inherit; font-size:.92rem; color:var(--ink); max-width:280px;
}
.studio-select:focus{ outline:none; border-color:var(--ink) }
.studio-generate{ align-self:flex-start }

.studio-plan{ display:flex; flex-direction:column; gap:22px }
.studio-hero{
  position:relative; margin:calc(clamp(16px,2vw,24px) * -1); margin-bottom:0;
  border-radius:16px 16px 0 0; overflow:hidden; aspect-ratio:16/5; min-height:170px;
}
.studio-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30% }
.studio-hero figcaption{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; gap:.3rem;
  padding:clamp(16px,2.4vw,28px);
  background:linear-gradient(200deg, rgba(21,20,15,.05) 30%, rgba(21,20,15,.72));
  color:var(--paper);
}
.studio-hero__kicker{ color:color-mix(in srgb,var(--paper) 72%,transparent); letter-spacing:.14em; text-transform:uppercase; font-size:.66rem }
.studio-hero__title{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.4rem,2.6vw,2rem); letter-spacing:-.01em; line-height:1.1 }
.studio-plan__head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap }
.studio-plan__chips{ display:flex; flex-wrap:wrap; gap:6px }
.studio-plan__actions{ display:flex; gap:8px; flex-wrap:wrap }

.studio-block{ border-top:1px solid var(--line); padding-top:20px; display:flex; flex-direction:column; gap:14px }
.studio-block__head{ display:flex; align-items:flex-start; gap:14px }
.studio-block__no{
  flex:none; width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:var(--sand-2); border:1px solid var(--line); color:var(--grey); font-size:.72rem;
}
.studio-block__label{ display:block; margin-bottom:.15rem }
.studio-block__head h3{ font-family:var(--font-display); font-weight:600; font-size:1.12rem }
.studio-block__body{ display:grid; grid-template-columns:1.5fr 1fr; gap:22px; align-items:start }
.studio-block__text{ display:flex; flex-direction:column; gap:.55rem; font-size:.93rem; color:var(--ink-2) }
.studio-block__text strong{ color:var(--ink) }
.studio-block__ptslabel{ margin-top:.3rem }
.studio-block__text ul{ list-style:none; display:flex; flex-direction:column; gap:.35rem }
.studio-block__text ul li{ padding-left:1.1em; position:relative }
.studio-block__text ul li::before{ content:"→"; position:absolute; left:0; color:var(--grey-2); font-size:.85em }

.studio-dia{ display:flex; flex-direction:column; gap:8px; align-items:center }
.studio-dia__svg{ width:min(220px,100%); height:auto }
.studio-dia figcaption{ text-align:center }

.studio-mods{ border-top:1px solid var(--line); padding-top:20px }
.studio-mods h3{ font-family:var(--font-display); font-weight:600; font-size:1.05rem; margin-bottom:.7rem }
.studio-mods ul{ list-style:none; display:flex; flex-direction:column; gap:.4rem; font-size:.93rem; color:var(--ink-2) }
.studio-mods ul li{ padding-left:1.1em; position:relative }
.studio-mods ul li::before{ content:"→"; position:absolute; left:0; color:var(--grey-2); font-size:.85em }

@media (max-width: 1024px){
  .studio-form__grid{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width: 640px){
  .studio-form__grid{ grid-template-columns:1fr }
  .studio-block__body{ grid-template-columns:1fr }
  .studio-dia{ order:-1 }
}

/* print: only the generated plan */
@media print{
  body.app .app__side, body.app .app__top, .chat,
  .panel[data-panel="studio"] .panel__head, .studio-form,
  .studio-plan__actions{ display:none !important }
  body.app{ background:#fff }
  .app__shell{ display:block }
  .app__main{ padding:0 }
  .panel{ display:none }
  .panel[data-panel="studio"]{ display:block; animation:none }
  .studio-plan{ border:none; box-shadow:none; padding:0 }
  .studio-block{ break-inside:avoid }
}

/* responsive app */
@media (max-width: 1024px){
  .kpis{ grid-template-columns:repeat(2,1fr) }
  .grid-cards{ grid-template-columns:1fr }
}
@media (max-width: 860px){
  .app__shell{ grid-template-columns:1fr }
  .app__side{
    position:fixed; inset:0 auto 0 0; width:min(280px,80vw); z-index:60;
    transform:translateX(-100%); transition:transform .4s var(--ease-out);
    box-shadow:var(--shadow-lg);
  }
  .app__side.open{ transform:none }
  .app__burger{ display:flex }
}
@media (max-width: 560px){
  .kpis, .kpis--3{ grid-template-columns:1fr 1fr }
  .table{ font-size:.84rem }
  .table th:nth-child(4), .table td:nth-child(4){ display:none }
}