/* Biblioteca, tarefas e conta (library.js, tasks.js, account.js). Só variáveis de token. */

/* ---------- Biblioteca ---------- */
.library-toolbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--spacingL);margin-bottom:var(--spacingL)}
.library-filter{min-width:220px;max-width:320px;flex:0 1 280px}
.library-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--spacingL)}
.library-card{padding:0;min-width:0}
.library-card:focus-visible{outline-offset:2px}
.library-thumb{display:grid;place-items:center;aspect-ratio:1/1;padding:var(--spacingM);border-bottom:var(--strokeWidthThin) solid var(--colorNeutralStroke2)}
.library-thumb .thumb{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.library-card-body{display:flex;flex-direction:column;gap:var(--spacingXS);padding:var(--spacingM)}
.library-card-name{font:var(--typeBody1Strong);overflow-wrap:anywhere}
.library-more{display:flex;justify-content:center;margin-top:var(--spacingXL)}
.library-note,.tasks-note{display:flex;align-items:center;gap:var(--spacingS);margin-top:var(--spacingXL)}
.library-detail{display:flex;flex-direction:column;gap:var(--spacingL)}
.library-back{align-self:flex-start}
.library-bench{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,400px);gap:var(--spacingL);align-items:start}
.library-canvas-card{display:flex;flex-direction:column;gap:var(--spacingM);min-width:0}
.library-canvas-card .section-heading{margin-bottom:0}
.library-canvas{display:grid;place-items:center;min-height:320px;padding:var(--spacingXL);border-radius:var(--borderRadiusMedium);overflow:auto}
.library-art{width:100%;max-width:512px;max-height:60vh;height:auto;object-fit:contain;image-rendering:pixelated}
.library-canvas-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--spacingS)}
.library-panel{display:flex;flex-direction:column;gap:var(--spacingXL);min-width:0}
.library-section{display:flex;flex-direction:column;gap:var(--spacingS)}
.library-versions{display:flex;flex-direction:column;gap:var(--spacingXS)}
.library-version{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacingS) var(--spacingM);width:100%;padding:var(--spacingS) var(--spacingM);border:var(--strokeWidthThin) solid var(--colorNeutralStroke2);border-radius:var(--borderRadiusMedium);background:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);text-align:left;cursor:pointer}
.library-version:hover{background:var(--colorNeutralBackground1Hover);border-color:var(--colorNeutralStroke1Hover)}
.library-version[aria-pressed="true"]{background:var(--colorBrandBackground2);border-color:var(--colorBrandStroke1)}
.library-version-index{color:var(--colorNeutralForeground3)}
.library-version-text{display:flex;flex-direction:column;flex:1 1 120px;min-width:0}
.library-version-text small{color:var(--colorNeutralForeground3);font:var(--typeCaption1)}
.library-use{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--spacingS)}
.library-use .field{flex:1 1 180px}

/* ---------- Tarefas ---------- */
.tasks-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--spacingM);margin-bottom:var(--spacingL)}
.tasks-list{display:flex;flex-direction:column;gap:var(--spacingM)}
.tasks-row{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(200px,280px) auto;align-items:start;gap:var(--spacingL)}
.tasks-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--borderRadiusMedium);background:var(--colorBrandBackground2);color:var(--colorBrandForeground2)}
.tasks-main{display:flex;flex-direction:column;gap:var(--spacingXS);min-width:0}
.tasks-main h2{overflow-wrap:anywhere}
.tasks-details{margin-top:var(--spacingS)}
.tasks-details summary{cursor:pointer;color:var(--colorBrandForegroundLink);font:var(--typeCaption1Strong)}
.tasks-details pre{margin:var(--spacingS) 0 0;padding:var(--spacingS) var(--spacingM);border-radius:var(--borderRadiusMedium);background:var(--colorNeutralBackground3);font-size:12px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}
.tasks-events{display:flex;flex-direction:column;gap:var(--spacingXS);margin:var(--spacingS) 0 0;padding:0;list-style:none;font:var(--typeCaption1)}
.tasks-events .mono{color:var(--colorNeutralForeground3)}
.tasks-state{display:flex;flex-direction:column;gap:var(--spacingXS);min-width:0}
.tasks-actions{display:flex;flex-direction:column;align-items:stretch;gap:var(--spacingXS)}
.tasks-more{display:flex;justify-content:center;margin-top:var(--spacingM)}

/* ---------- Conta ---------- */
.account-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,360px);gap:var(--spacingL);align-items:start}
.account-main,.account-side{display:flex;flex-direction:column;gap:var(--spacingL);min-width:0}
.account-card{display:flex;flex-direction:column;gap:var(--spacingM)}
.account-balance{font:var(--typeTitle2);font-family:var(--fontFamilyMonospace)}
.account-table .account-sub{display:block;color:var(--colorNeutralForeground3);font:var(--typeCaption1)}
.account-table .account-scopes{font-size:12px;overflow-wrap:anywhere;max-width:280px}
.account-table .account-row-actions{text-align:right;white-space:nowrap}
.account-revoked{color:var(--colorNeutralForegroundDisabled)}
.account-secret{align-items:flex-start}
.account-secret p{margin:var(--spacingXS) 0 var(--spacingS)}
.account-secret-code{display:block;padding:var(--spacingS) var(--spacingM);margin-bottom:var(--spacingS);border-radius:var(--borderRadiusMedium);background:var(--colorNeutralBackground1);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);overflow-wrap:anywhere;user-select:all}
.account-form{display:flex;flex-direction:column;gap:var(--spacingM);padding-top:var(--spacingM);border-top:var(--strokeWidthThin) solid var(--colorNeutralStroke2)}
.account-form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--spacingM)}
.account-scopes-field{gap:var(--spacingS)}

/* ---------- Celular: empilha ---------- */
@media (max-width:1100px){
  .library-bench,.account-layout{grid-template-columns:minmax(0,1fr)}
  .tasks-row{grid-template-columns:auto minmax(0,1fr)}
  .tasks-state,.tasks-actions{grid-column:2}
  .tasks-actions{flex-direction:row;flex-wrap:wrap}
}
@media (max-width:600px){
  .library-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--spacingM)}
  .library-canvas{min-height:220px;padding:var(--spacingM)}
  .tasks-row{grid-template-columns:minmax(0,1fr)}
  .tasks-icon{display:none}
  .tasks-state,.tasks-actions{grid-column:1}
}