:root{
  --ta-border:#d4dde8;
  --ta-text:#26364b;
  --ta-muted:#6a7a8d;
  --ta-card:#ffffff;
  --ta-bg:#edf3f8;
  --ta-btn:#0f766e;
  --ta-btn-h:#0b5f58;
  --ta-shadow:0 12px 28px rgba(26,44,69,0.07);
}

html,body{
  height:100%;
  margin:0;
  padding:0;
  color:var(--ta-text);
  font-family:Arial,sans-serif;
  overflow:hidden;
  background:
    radial-gradient(1200px 420px at 0% 0%, #f7fbff 0%, #edf3f8 45%, #e7eff7 100%);
}

.topbar{
  min-height:56px;
  border-bottom:1px solid var(--ta-border);
  background:#fff;
  display:flex;
  position:relative;
  align-items:center;
  justify-content:space-between;
  padding:8px 16px;
}

.topbar-left{
  font-size:15px;
  font-weight:700;
  color:#0f172a;
  display:flex;
  align-items:center;
  gap:10px;
}

.topbar-right{
  display:flex;
  align-items:center;
  gap:8px;
  position:relative;
  z-index:2;
}

.topbar-brand{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

.topbar-brand img{
  display:block;
  width:100%;
  max-width:220px;
  height:auto;
}

.topbar-link{
  border:1px solid var(--ta-border);
  border-radius:10px;
  padding:6px 11px;
  text-decoration:none;
  color:var(--ta-text);
  background:#fff;
  font-size:13px;
  font-weight:600;
}

.topbar-link:hover{
  border-color:#8ea4bf;
  color:#10233c;
  background:#f8fbff;
}

@media (max-width: 860px){
  .topbar{
    flex-wrap:wrap;
    gap:8px 12px;
    justify-content:space-between;
  }

  .topbar-brand{
    position:static;
    transform:none;
    order:3;
    width:100%;
    padding-top:4px;
  }

  .topbar-brand img{
    max-width:180px;
  }
}

.wrap{
  max-width:1280px;
  margin:18px auto;
  padding:0 12px;
  height:calc(100vh - 92px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.page-title{
  flex:0 0 auto;
  margin:0 0 14px 0;
  font-size:25px;
  font-weight:800;
  color:#0f172a;
  letter-spacing:0.1px;
}

.an-shell{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:14px;
  overflow:hidden;
}

.an-switch-wrap{
  margin:0;
}

.an-switch-tabs{
  display:flex;
  gap:0;
  max-width:max-content;
  margin:0 0 -1px 0;
  position:relative;
  z-index:2;
}

.an-switch-tab{
  border:1px solid var(--ta-border);
  border-bottom:0;
  background:#eef3f7;
  color:#475467;
  padding:10px 16px;
  font-size:13px;
  font-weight:700;
  line-height:1.1;
  cursor:pointer;
  border-radius:14px 14px 0 0;
  margin-right:6px;
  box-shadow:none;
}

.an-switch-tab:hover{
  background:#f7fbff;
}

.an-switch-tab.active{
  background:#fff;
  color:#0f172a;
  border-color:var(--ta-border);
}

.an-switch-body{
  border:1px solid var(--ta-border);
  border-radius:0 14px 14px 14px;
  background:#fff;
  position:relative;
  z-index:1;
  padding:0;
  box-shadow:var(--ta-shadow);
}

.an-switch-card{
  margin:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  padding:18px;
}

.an-switch-card .card-title{
  margin:0 0 12px 0;
  padding:0;
}

.an-switch-card > :first-child{
  margin-top:0 !important;
}

.an-switch-card > .card-title + *{
  margin-top:0 !important;
}

.an-shell.no-monitor{
  grid-template-columns:1fr;
}

.card{
  border:1px solid var(--ta-border);
  border-radius:14px;
  background:var(--ta-card);
  padding:14px;
  box-shadow:var(--ta-shadow);
  min-width:0;
}

.card-title{
  font-size:14px;
  font-weight:800;
  color:#0f172a;
  margin:0 0 10px 0;
  letter-spacing:0.2px;
}

.an-monitor-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.an-monitor-head .card-title{
  margin-bottom:0;
}

.an-head-link{
  border:0;
  background:none;
  color:#1f4f80;
  text-decoration:underline;
  text-decoration-style:dashed;
  font-size:12px;
  padding:0;
  cursor:pointer;
  line-height:1.1;
  white-space:nowrap;
}

.an-head-link:hover{
  color:#0f3b67;
}

.card-note{
  color:#64748b;
  font-size:12px;
  margin-bottom:8px;
}

.an-upload-note{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  font-size:12px;
  color:#5b7088;
  margin-top:0;
  margin-bottom:8px;
}

.an-upload-note .limit{
  color:#1f3a5a;
  font-weight:700;
}

.an-upload-note .warn{
  color:#b42318;
  font-weight:700;
}

.an-hash-card{
  border:1px solid #dde6ef;
  border-radius:12px;
  padding:12px;
  background:#f8fbff;
  margin-top:0;
}

#AN_UPLOAD{
  border:1px solid #dde6ef;
  border-radius:12px;
  padding:12px;
  background:#fff;
  margin-bottom:0;
}

.an-hash-head{
  font-size:12px;
  font-weight:800;
  color:#1f3a5a;
  margin-bottom:8px;
  text-transform:uppercase;
  letter-spacing:0.2px;
}

.an-hash-row{
  display:flex;
  align-items:center;
  gap:10px;
}

.an-hash-input{
  flex:1 1 auto;
  min-width:0;
  border:1px solid var(--ta-border);
  border-radius:10px;
  padding:10px 12px;
  font-size:13px;
  color:var(--ta-text);
  background:#fff;
}

.an-hash-input:focus{
  outline:none;
  border-color:#7aa3d1;
  box-shadow:0 0 0 3px rgba(59,130,246,0.12);
}

.an-hash-btn{
  flex:0 0 auto;
  white-space:nowrap;
}

.an-hash-note{
  margin-top:8px;
  font-size:12px;
  color:#64748b;
}

.an-hash-note.err{
  color:#b42318;
  font-weight:700;
}

.an-hash-note.ok{
  color:#027a48;
  font-weight:700;
}

.an-msg{
  min-height:22px;
  margin-top:8px;
  font-size:13px;
  font-weight:600;
  color:#334155;
}

.an-msg.ok{
  color:#027a48;
}

.an-msg.err{
  color:#b42318;
}

.an-table-wrap{
  flex:1 1 auto;
  min-height:0;
  border:1px solid #dde6ef;
  border-radius:10px;
  overflow:auto;
  max-height:none;
  background:#fff;
}

.an-table{
  width:100%;
  border-collapse:collapse;
  min-width:900px;
}

.an-table th,
.an-table td{
  border-bottom:1px solid #edf2f8;
  padding:7px 8px;
  vertical-align:top;
  font-size:12px;
}

.an-table th{
  background:#f5f9ff;
  color:#3f5877;
  position:sticky;
  top:0;
  z-index:1;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.2px;
}

.an-col-n{
  width:44px;
  text-align:right;
}

.an-col-date{
  width:126px;
}

.an-col-size{
  width:84px;
}

.an-col-duration{
  width:80px;
}

.an-col-type{
  width:64px;
}

.an-col-status{
  width:128px;
}

.an-col-found{
  width:116px;
}

.an-file-name{
  max-width:210px;
  display:inline-block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  vertical-align:top;
}

.an-state{
  font-weight:700;
}

.an-state.pending,
.an-state.run{
  color:#0d6079;
}

.an-state.done{
  color:#027a48;
}

.an-state.error,
.an-state.expired{
  color:#b42318;
}

.an-found.ok{
  color:#027a48;
  font-weight:700;
}

.an-found.no{
  color:#64748b;
}

.an-found.error{
  color:#b42318;
  font-weight:700;
}

.an-link-btn{
  border:0;
  background:none;
  color:#1f4f80;
  text-decoration:underline;
  text-decoration-style:dashed;
  padding:0;
  font-size:12px;
  cursor:pointer;
}

.an-link-btn:hover{
  color:#0f3b67;
}

.an-spinner{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:#0d6079;
}

.an-row-open{
  background:#eef8ff;
}

.an-row-open td{
  background:#eef8ff;
  border-bottom-color:#d5e7f6;
}

.an-row-open .an-link-btn{
  color:#0f4d86;
  font-weight:700;
}

.an-row-open:hover td{
  background:#e6f3ff;
}

.an-result-row td{
  background:#fbfdff;
  padding-top:10px;
  padding-bottom:10px;
}

#AN_MONITOR_COL{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
}

.an-result-card{
  border:1px solid #dde8f3;
  border-radius:10px;
  background:#ffffff;
  padding:12px;
}

.an-result-title{
  font-weight:700;
  color:#1c3858;
  margin-bottom:10px;
  font-size:13px;
}

.an-result-note{
  margin-bottom:8px;
  color:#47627f;
  font-size:12px;
}

.an-result-error{
  color:#b42318;
  font-size:12px;
  font-weight:700;
}

.an-result-uploaded{
  margin-bottom:10px;
  padding:8px 10px;
  border:1px solid #e3ebf4;
  border-radius:8px;
  background:#f8fbff;
  color:#4a6078;
  font-size:12px;
}

.an-result-uploaded strong{
  color:#1f3a5a;
}

.an-result-public{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.an-result-public-message{
  color:#1b3656;
  font-size:13px;
  font-weight:700;
}

.an-result-receipt{
  display:grid;
  grid-template-columns:150px 1fr auto auto;
  gap:8px 10px;
  align-items:center;
  padding-top:10px;
  border-top:1px solid #e7eef6;
}

.an-result-receipt-label{
  color:#5f7690;
  font-size:12px;
  font-weight:700;
}

.an-result-receipt-hash{
  color:#21364f;
  font-size:12px;
  word-break:break-all;
}

.an-receipt-copy-btn,
.an-receipt-open{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:0 10px;
  border-radius:8px;
  font-size:12px;
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
}

.an-receipt-copy-btn{
  border:1px solid #ccd9e6;
  background:#f8fafc;
  color:#334155;
  cursor:pointer;
}

.an-receipt-copy-btn:hover{
  border-color:#b6c6d8;
  background:#eff4f9;
}

.an-receipt-open{
  border:1px solid #0f766e;
  background:#0f766e;
  color:#fff;
}

.an-receipt-open:hover{
  background:#0b5f58;
  color:#fff;
}

.an-modal{
  position:fixed;
  inset:0;
  z-index:2200;
  background:rgba(15,23,42,.44);
  display:none;
  align-items:center;
  justify-content:center;
  padding:14px;
}

.an-modal.show{
  display:flex;
}

.an-modal-card{
  width:min(460px, 96vw);
  border:1px solid #d7e1ec;
  border-radius:12px;
  background:#fff;
  box-shadow:0 14px 32px rgba(15,23,42,.24);
}

.an-modal-head{
  padding:10px 12px;
  border-bottom:1px solid #e7eef6;
  color:#0f172a;
  font-size:14px;
  font-weight:700;
}

.an-modal-body{
  padding:12px;
  color:#334155;
  font-size:13px;
}

.an-modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  padding:10px 12px;
  border-top:1px solid #e7eef6;
}

.an-modal-btn{
  border:1px solid #d4dde8;
  border-radius:8px;
  background:#f8fafc;
  color:#334155;
  font-size:13px;
  font-weight:700;
  padding:6px 10px;
  cursor:pointer;
}

.an-modal-btn.cancel:hover{
  border-color:#b6c6d8;
  background:#eff4f9;
}

.an-modal-btn.ok{
  border-color:#0f766e;
  background:#0f766e;
  color:#fff;
}

.an-modal-btn.ok:hover{
  background:#0b5f58;
}

.an-kv{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:6px 10px;
  font-size:12px;
}

.an-k{
  color:#5f7690;
  font-weight:700;
}

.an-v{
  color:#21364f;
  word-break:break-word;
}

.an-empty{
  color:#64748b;
  font-size:12px;
  padding:10px;
}

.tracks-btn{
  border:1px solid #0f766e;
  border-radius:8px;
  background:#0f766e;
  color:#ffffff;
  padding:8px 12px;
  font-weight:700;
  cursor:pointer;
}

.tracks-btn:hover:not(:disabled){
  background:#0b5f58;
}

.tracks-btn:disabled{
  opacity:0.55;
  cursor:not-allowed;
}

.tracks-upload{
  border:1px solid #d8e0ea;
  border-radius:12px;
  background:#ffffff;
  padding:10px;
  margin-bottom:8px;
}

.tracks-upload-drop{
  border:1px dashed #9fb7d1;
  border-radius:10px;
  min-height:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:#475569;
  background:#f8fbff;
  margin-bottom:10px;
  padding:4px 8px;
}

.tracks-upload-drop.is-drag{
  border-color:#0f766e;
  background:#ecfbf8;
}

.tracks-upload-drop i{
  font-size:16px;
  color:#0f766e;
}

.tracks-upload-drop-text{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
}

.tracks-upload-inline-btn{
  padding:6px 10px;
  font-size:13px;
  line-height:1;
}

.tracks-upload-bottom{
  display:flex;
  align-items:center;
  gap:8px;
  margin:8px 0 6px;
}

.tracks-upload-live{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-height:18px;
  min-width:180px;
  max-width:290px;
  flex:0 1 290px;
}

#AN_UPLOAD_NOW_NAME{
  color:#334155;
  font-size:12px;
  font-weight:600;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.tracks-upload-now-status{
  font-size:11px;
  text-transform:lowercase;
  font-weight:700;
}

.tracks-upload-now-status.idle{
  color:#64748b;
}

.tracks-upload-now-status.run{
  color:#0f766e;
}

.tracks-upload-now-status.ok{
  color:#027a48;
}

.tracks-upload-now-status.error{
  color:#b42318;
}

.tracks-upload-progress{
  width:100%;
  height:10px;
  border-radius:999px;
  background:#e2e8f0;
  overflow:hidden;
}

.tracks-upload-progress-bar{
  height:100%;
  width:0;
  background:linear-gradient(90deg, #0f766e, #2dd4bf);
}

.tracks-upload-bottom .tracks-upload-progress{
  flex:1 1 320px;
  min-width:0;
}

.tracks-upload-bottom .tracks-upload-queue-toggle{
  flex:0 0 auto;
  margin-left:auto;
}

.tracks-upload-queue-toggle{
  border:1px solid #d8e0ea;
  border-radius:7px;
  background:#ffffff;
  color:#334155;
  font-size:11px;
  padding:4px 8px;
  cursor:pointer;
}

.tracks-upload-queue-toggle:hover{
  border-color:#94a3b8;
}

.tracks-upload-list{
  display:block;
  max-height:120px;
  overflow:auto;
  border:1px solid #e2e8f0;
  border-radius:8px;
  padding:6px 8px;
  background:#f8fafc;
}

.tracks-upload-line{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
  padding:2px 0;
  border-bottom:1px dotted #e2e8f0;
}

.tracks-upload-line:last-child{
  border-bottom:0;
}

.tracks-upload-line-left{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.tracks-upload-line-name{
  color:#334155;
  font-size:11px;
  word-break:break-word;
}

.tracks-upload-line-note{
  color:#64748b;
  font-size:10px;
  line-height:1.25;
  word-break:break-word;
}

.tracks-upload-line-note.error{
  color:#b42318;
}

.tracks-upload-line-status{
  font-size:11px;
  text-transform:uppercase;
  font-weight:700;
  white-space:nowrap;
}

.tracks-upload-line-status.idle{
  color:#64748b;
}

.tracks-upload-line-status.run{
  color:#0f766e;
}

.tracks-upload-line-status.ok{
  color:#027a48;
}

.tracks-upload-line-status.error{
  color:#b42318;
}

@media (max-width: 1024px){
  .wrap{
    height:calc(100vh - 92px);
  }
}

@media (max-width: 700px){
  .tracks-upload-drop{
    height:auto;
    min-height:56px;
    align-items:flex-start;
    flex-direction:column;
    justify-content:center;
  }
  .tracks-upload-bottom{
    flex-direction:column;
    align-items:stretch;
  }
  .tracks-upload-live{
    max-width:none;
  }
  .an-kv{
    grid-template-columns:1fr;
  }
  .an-result-receipt{
    grid-template-columns:1fr;
  }
}