/* backend>static>dogdao>css>dogdao.css */
.dogdao.awf { background: #0b0f17; color: #e8eefc; }
.dogdao.awf a { color: inherit; }
.dogdao.awf .muted { opacity: .75; font-size: 12px; }

.awf-topbar{
  max-width: 1200px;
  margin: 18px auto 0;
  padding: 0 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.awf-actions{ display:flex; gap:8px; }

.awf-logo{ display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.05; }
.awf-logo strong{ font-size:22px; letter-spacing:.10em; font-weight:900; }
.awf-logo span{ font-size:11px; opacity:.72; margin-top:3px; letter-spacing:.06em; }

/* account chip */
.awf-account{
  margin-top: 10px;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.22);
}
.awf-account-img{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  display:none;
}
.awf-account-meta{ display:flex; flex-direction:column; line-height:1.15; }
.awf-account-name{ font-weight: 700; font-size: 12px; }
.awf-account-email{ font-size: 11px; opacity: .75; }

/* wrapper */
.awf-wrap{
  max-width: 1200px;
  margin: 14px auto 40px;
  padding: 0 14px;
  display:grid;
  grid-template-columns: 320px 1fr 320px;
  gap: 14px;
}
@media (max-width: 1100px){
  .awf-wrap{ grid-template-columns: 1fr; }
}

/* cards */
.card{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.28);
}
.card-title{ margin: 0 0 10px 0; font-size: 14px; letter-spacing:.2px; }
.head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:10px; }

/* inputs */
.field{ margin-top: 12px; }
.lbl{ display:block; font-size: 12px; opacity:.85; margin-bottom: 6px; }
.hint{ font-size: 12px; opacity:.65; margin-top: 6px; line-height:1.35; }

.in, .ta, select{
  width:100%;
  box-sizing:border-box;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.14);
  color: #e8eefc;
  border-radius: 14px;
  padding: 10px 12px;
  outline: none;
}
.ta{ resize: vertical; }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

/* grids */
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width: 1100px){ .grid2{ grid-template-columns: 1fr; } }

/* rows */
.row{ display:flex; gap:10px; align-items:center; }
.row-between{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }

/* buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 38px;
  padding: 0 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: #e8eefc;
  cursor:pointer;
  text-decoration:none;
  user-select:none;
}
.btn:hover{ background: rgba(255,255,255,0.10); }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn-outline{ background: rgba(0,0,0,0.25); }
.btn-primary{
  background: rgba(80,140,255,0.35);
  border-color: rgba(110,170,255,0.55);
}

/* status */
.status{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.25);
  min-height: 18px;
  font-size: 12px;
  opacity:.95;
}
.status.ok{ border-color: rgba(60,220,140,.55); }
.status.err{ border-color: rgba(255,90,90,.55); }

.status.warn{
  color: #facc15;
  border-color: rgba(250,204,21,.75);
  background: rgba(250,204,21,.08);
  box-shadow:
    0 0 12px rgba(250,204,21,.18),
    inset 0 0 12px rgba(250,204,21,.05);
}

/* preview */
.preview{
  margin-top: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.25);
  padding: 10px;
  display:flex;
  gap:10px;
}
.preview-stack{ display:flex; flex-direction:column; gap:8px; }
.preview img, .preview video{
  width: 140px;
  height: 100px;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
}
.preview-meta{ font-size: 12px; opacity:.8; line-height:1.4; }

.preview-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
}
.preview-item{
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  padding: 10px;
  font-size: 12px;
  line-height: 1.25;
}

/* traits list */
.traits-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top: 10px;
}
.trait-row{
  display:grid;
  grid-template-columns: 1fr 1fr 44px;
  gap:10px;
  align-items:center;
}
.trait-row .btn{ padding:0; min-width:44px; }
/* --- Mint output: 4 schede pulite --- */
.mint-info-wrap{
  margin-top:12px;
  display:grid;
  gap:10px;
}

.mint-block{
  display:grid;
  gap:6px;
}

.mint-label{
  font-weight:900;
  opacity:.75;
  font-size:12px;
}

.mint-box{
  width:100%;
  box-sizing:border-box;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:#fff;
  text-decoration:none;
  display:block;

  /* 🔒 blocca overflow: */
  overflow-wrap:anywhere;
  word-break:break-word;
}

.mint-box.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
/* =========================================
   AWF: stop overflow orizzontale (PC+mobile)
   ========================================= */
html, body { overflow-x: hidden; }

/* stabilizza lo spazio scrollbar (evita micro-shift su desktop) */
html { scrollbar-gutter: stable both-edges; }
@supports not (scrollbar-gutter: stable) {
  html { overflow-y: scroll; }
}

/* evita che grid/flex spinga fuori */
.awf-topbar, .awf-wrap, .card, .preview, .row, .row-between, .grid2 { min-width: 0; }
.in, .ta, select, .mint-box { max-width: 100%; }
/* =========================================
   AWF: header mobile layout richiesto
   - menu (actions) top-right
   - account chip top-left
   - logo sotto (ARTWORKFORM + compiler...)
   ========================================= */
@media (max-width: 820px){
  .awf-topbar{
    display:flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
  }

  /* menu sopra a destra */
  .awf-actions{
    order: 0;
    margin-left: auto;      /* spinge a destra */
    display:flex;
    gap:8px;
    flex-wrap: wrap;
    justify-content:flex-end;
  }

  /* account chip sopra a sinistra */
  .awf-account{
    order: 1;
    margin-top: 0;
    flex: 0 0 auto;
  }

  /* logo sotto (riga intera) */
  .awf-logo{
    order: 2;
    width: 100%;
    align-items: flex-start;  /* a sinistra (più leggibile su mobile) */
    justify-content: flex-start;
    margin-top: 6px;
  }

  .awf-logo strong{ font-size: 20px; }
  .awf-logo span{ font-size: 11px; }
}
@media (max-width: 820px){
  .awf-actions .btn{
    height: 34px;
    padding: 0 10px;
    border-radius: 12px;
    font-size: 13px;
  }
}
/* ===== tooltip scuro (data-tooltip) ===== */
[data-tooltip]{ position:relative; }

[data-tooltip]::after{
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);

  max-width: 260px;
  padding: 8px 10px;
  border-radius: 8px;

  background: rgba(17,17,17,.95);
  color:#fff;
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
  text-align: center;

  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
  box-shadow: 0 10px 24px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06);
  z-index: 9999;
}

[data-tooltip]::before{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom: calc(100% + 4px);
  border: 6px solid transparent;
  border-top-color: rgba(17,17,17,.95);

  opacity:0;
  pointer-events:none;
  transition: opacity .12s ease;
  z-index: 10000;
}

[data-tooltip]:hover::after,
[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::after,
[data-tooltip]:focus-visible::before{
  opacity:1;
}

/* mobile: mostra anche su tap (focus/active) */
[data-tooltip]:focus::after,
[data-tooltip]:focus::before,
[data-tooltip]:active::after,
[data-tooltip]:active::before{
  opacity:1;
}

/* 1. Forza la visibilità totale della barra */
.awf-topbar, 
.awf-right, 
.awf-actions {
    overflow: visible !important;
}

/* 2. Assicura che i tasti siano allineati e flessibili */
.awf-actions .topnav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    text-decoration: none;
    position: relative; /* Fondamentale per il tooltip */
}

/* 3. Aggiungi spazio sopra la barra per ospitare i tooltip */
.awf-topbar {
    margin-top: 45px !important; /* Aumenta il margine superiore */
}

/* 4. Reset del tooltip verso l'alto (come le altre pagine) */
.awf-actions [data-tooltip]::after {
    top: auto;
    bottom: calc(100% + 10px);
}
.awf-actions [data-tooltip]::before {
    top: auto;
    bottom: calc(100% + 4px);
    border-bottom-color: transparent;
    border-top-color: rgba(17,17,17,.95);
}
/* 1. Abbassa la scritta: riduciamo il valore da +10px a +2px */
.awf-actions [data-tooltip]::after {
    bottom: calc(100% + 2px) !important; /* Più vicino all'icona */
    background: transparent !important;  /* Toglie il box nero */
    box-shadow: none !important;         /* Toglie l'ombra del box */
    font-weight: 500;                    /* Rende il testo un po' più leggibile essendo senza sfondo */
}

/* 2. Elimina il triangolino che "sporca" la scritta */
.awf-actions [data-tooltip]::before {
    display: none !important;
}

/* 3. Opzionale: se la scritta bianca su nero si legge poco, 
   puoi aggiungere un leggerissimo bagliore nero al testo (text-shadow) 
   per staccarla se sotto passano immagini */
.awf-actions [data-tooltip]::after {
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}
.file-hidden {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.file-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.file-btn {
  cursor: pointer;
}

.file-name {
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  overflow-wrap: anywhere;
}