/* NollProCon ai-Travelmanager – Dashboard UI 2.0.9 / Basis 2.0.9 */

:root{
  --sidebar:#071a33; --sidebar2:#0b2748; --blue:#2563eb; --cyan:#17b8d4;
  --violet:#7c3aed; --bg:#f5f8fc; --card:#fff; --text:#101828;
  --muted:#667085; --border:#dce6f2; --shadow:0 20px 45px rgba(9,30,66,.10);
  --radius:20px;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;color:var(--text);
  background:radial-gradient(circle at 90% 0%,rgba(37,99,235,.10),transparent 34%),
             radial-gradient(circle at 20% 10%,rgba(23,184,212,.10),transparent 30%),
             linear-gradient(135deg,#f8fbff,#eef5fb);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  line-height:1.5;
}
.app{width:100%;max-width:none;min-height:100vh;margin:0;padding:0 28px 48px 326px;position:relative}

/* Sidebar */
header{
  position:fixed;inset:0 auto 0 0;width:290px;z-index:40;
  display:flex;flex-direction:column;justify-content:flex-start;gap:18px;
  padding:26px 18px;color:#fff;
  background:radial-gradient(circle at 30% 0%,rgba(23,184,212,.22),transparent 30%),
             linear-gradient(180deg,var(--sidebar),var(--sidebar2));
  box-shadow:14px 0 34px rgba(7,26,51,.18);border-right:1px solid rgba(255,255,255,.08);
}
.brand{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:4px 4px 18px}
.brand-logo,.login-logo{width:150px;height:150px;object-fit:contain;filter:drop-shadow(0 14px 26px rgba(0,0,0,.25))}
h1{margin:0;color:#fff;font-size:1.55rem;line-height:1.1;letter-spacing:-.035em}
.brand-text p,header p{margin:8px 0 0;color:#b9c7dc;font-size:.95rem}
.top-actions{display:flex;flex-direction:column;gap:10px;width:100%;margin-top:10px}
#userInfo{display:flex;align-items:center;justify-content:center;min-height:42px;padding:10px 12px;color:#eaf4ff;font-weight:800;border:1px solid rgba(255,255,255,.10);border-radius:16px;background:rgba(255,255,255,.08)}
header button,header .button-link{width:100%;justify-content:center}

/* Side navigation */
#tabs{
  position:fixed;top:250px;left:14px;z-index:42;width:262px;
  display:flex;flex-direction:column;gap:8px;padding:0;margin:0;
}
#tabs button{
  width:100%;justify-content:flex-start;text-align:left;
  padding:13px 15px;border:1px solid rgba(255,255,255,.08);border-radius:13px;
  color:#d6e3f6;background:transparent;box-shadow:none;font-size:.95rem;font-weight:750;
}
#tabs button:hover{transform:none;color:#fff;background:rgba(255,255,255,.09);box-shadow:none}
#tabs button.active{color:#fff;background:linear-gradient(135deg,var(--blue),var(--violet));box-shadow:0 12px 24px rgba(37,99,235,.34)}

/* General */
.notice{margin:24px 0 18px;padding:16px 18px;border:1px solid rgba(37,99,235,.18);border-radius:18px;color:#264360;background:linear-gradient(135deg,#eef7ff,#fff);box-shadow:0 10px 28px rgba(9,30,66,.08)}
button,.button-link,input[type="submit"]{
  appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid transparent;border-radius:14px;padding:11px 16px;color:#1f3b63;background:#fff;
  box-shadow:0 8px 18px rgba(15,23,42,.08);font:inherit;font-weight:800;text-decoration:none;cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease,color .15s ease;
}
button:hover,.button-link:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(15,23,42,.12)}
button[type="submit"],.actions button:first-child{color:#fff;background:linear-gradient(135deg,var(--blue),var(--violet));box-shadow:0 14px 26px rgba(37,99,235,.25)}
button[type="reset"],.actions button:not(:first-child){color:#23415f;background:#f7fbff;border-color:var(--border)}

.card,.result-card,.login-card{
  position:relative;margin:22px 0;padding:26px;border:1px solid var(--border);border-radius:var(--radius);
  background:rgba(255,255,255,.94);box-shadow:var(--shadow);overflow:hidden;
}
.card::before,.result-card::before,.login-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--blue),var(--cyan),var(--violet))
}
h2{margin:0 0 14px;color:#102033;font-size:clamp(1.5rem,2.2vw,2.25rem);line-height:1.15;letter-spacing:-.035em}
h3{margin-top:0;color:#102033}.panel{display:none}.panel.active{display:block;animation:npcFade .22s ease both}
@keyframes npcFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.panel-hint,.kundenberatung-examples{margin:0 0 18px;padding:14px 16px;border:1px solid rgba(37,99,235,.15);border-radius:16px;color:#344b67;background:linear-gradient(135deg,#eff7ff,#fff)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
label{display:block;margin:0 0 15px;color:#182b44;font-weight:800}
input,select,textarea{
  width:100%;margin-top:7px;border:1px solid #c3d5ea;border-radius:13px;padding:12px 13px;
  color:#102033;background:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.75);font:inherit;outline:none;
  transition:border-color .16s ease,box-shadow .16s ease;
}
input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(37,99,235,.12)}
textarea{min-height:96px;resize:vertical}
.consent{display:flex;align-items:flex-start;gap:11px;margin-top:14px;padding:14px 16px;border:1px solid var(--border);border-radius:16px;background:#f8fbff;color:#334155;font-weight:650}
.consent input{width:auto;margin-top:4px;accent-color:var(--blue)}
.actions,.row-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px}

/* Results */
.result-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}
#status{min-height:26px;color:var(--blue);font-weight:900}.thinking::after{content:"";animation:dots 1.8s infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}100%{content:""}}
#result{white-space:pre-wrap;line-height:1.65;font-size:1rem}
.followup-box{margin-top:22px;padding:18px;border:1px solid var(--border);border-radius:18px;background:linear-gradient(135deg,#f8fbff,#eef7ff)}
.followup-box h3{margin:0 0 6px}.followup-box p{margin:0 0 14px;color:var(--muted)}

/* History + Admin lists */
#history{position:fixed;right:-470px;top:0;z-index:60;width:min(450px,94vw);height:100vh;padding:22px;overflow:auto;border-left:1px solid var(--border);background:rgba(255,255,255,.98);box-shadow:-22px 0 55px rgba(15,23,42,.18);transition:right .25s ease}
#history.open{right:0}.history-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.history-head h2{margin:0}
.history-item,.user-row,.backup-row{margin:12px 0;padding:14px;border:1px solid var(--border);border-radius:16px;background:#f8fbff;box-shadow:0 8px 18px rgba(15,23,42,.05)}
.user-row{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:center}
.backup-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.full{margin-top:12px;padding:12px;border-radius:14px;background:#fff;white-space:pre-wrap}
.app-meta-box{display:flex;flex-wrap:wrap;gap:20px;margin:24px 0 16px;padding:14px 18px;border:1px solid var(--border);border-radius:18px;color:#102033;background:#fff;box-shadow:0 10px 28px rgba(9,30,66,.08)}

/* Login */
.login-page{min-height:100vh;display:grid;place-items:center;padding:22px}.login-card{width:min(500px,100%);text-align:center}.login-card h1{color:#102033;font-size:clamp(2rem,4vw,2.8rem)}
.small{color:var(--muted);font-size:.92rem}.footer-links,.npc-footer{margin-top:26px;text-align:center;color:var(--muted)}
.footer-links a{color:var(--blue);text-decoration:none;font-weight:800}
.npc-footer{padding:20px 12px;border-top:1px solid var(--border);background:rgba(255,255,255,.72);font-size:13px}
.hidden,button[hidden]{display:none!important}

/* Tablet */
@media(max-width:1100px){
  .app{padding-left:24px;padding-right:24px}
  header{position:relative;width:auto;inset:auto;flex-direction:row;align-items:center;border-radius:0 0 28px 28px}
  .brand{flex-direction:row;text-align:left}.brand-logo{width:105px;height:105px;flex-basis:105px}
  #tabs{position:relative;top:auto;left:auto;width:auto;flex-direction:row;margin:0 0 20px;padding:10px;background:#fff;border:1px solid var(--border);border-radius:20px}
  #tabs button{width:auto;color:#315069;background:#f6f9fc;border-color:var(--border)}#tabs button.active{color:#fff}
  .top-actions{width:auto;margin-left:auto}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Mobile */
@media(max-width:760px){
  .app{padding:14px}header{align-items:flex-start;flex-direction:column;padding:18px}
  .brand{align-items:center;text-align:center;flex-direction:column;width:100%}
  .brand-logo,.login-logo{width:112px;height:112px;flex-basis:112px}.top-actions{width:100%}.grid{grid-template-columns:1fr}
  #tabs{flex-direction:column}#tabs button,button,.button-link{width:100%}
  .user-row,.backup-row{grid-template-columns:1fr;flex-direction:column;align-items:flex-start}.result-head{align-items:flex-start;flex-direction:column}
}


/* Version 2.0.9 – Reiter-/Sidebar-Fix
   Korrigiert Überlappungen der Funktionsreiter nach Wechsel vom Adminbereich in die App.
*/
@media (min-width: 1101px){
  .app{
    padding-left: 326px;
  }

  header{
    width: 290px;
    overflow-y: auto;
    overflow-x: hidden;
  }

  #tabs{
    position: fixed;
    left: 14px;
    top: 265px;
    bottom: 112px;
    width: 262px;
    max-height: calc(100vh - 390px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.35) transparent;
  }

  #tabs::-webkit-scrollbar{
    width: 7px;
  }

  #tabs::-webkit-scrollbar-thumb{
    background: rgba(255,255,255,.28);
    border-radius: 999px;
  }

  #tabs button{
    flex: 0 0 auto;
    min-height: 44px;
    line-height: 1.25;
    white-space: normal;
    overflow: visible;
  }

  .top-actions{
    margin-top: auto;
    padding-top: 12px;
  }
}

@media (max-width: 1100px){
  #tabs{
    position: relative;
    top: auto;
    left: auto;
    bottom: auto;
    width: auto;
    max-height: none;
    overflow: visible;
  }

  #tabs button{
    flex: 0 1 auto;
    white-space: normal;
  }
}


/* Version 2.0.9 – Sidebar-Fix
   Verhindert, dass Reiter Logo/Überschrift oder Verlauf-Button überlagern.
*/
@media (min-width: 1101px){
  header{
    width: 290px;
    overflow: hidden;
  }

  .brand{
    position: relative;
    z-index: 70;
    padding-bottom: 10px;
    background: transparent;
  }

  .brand-logo{
    width: 128px;
    height: 128px;
    flex-basis: 128px;
  }

  .brand-text h1,
  header h1{
    font-size: 1.42rem;
  }

  .brand-text p,
  header p{
    font-size: .9rem;
  }

  .top-actions{
    position: relative;
    z-index: 75;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 12px;
    background: linear-gradient(180deg, rgba(7,26,51,.88), rgba(7,26,51,.20));
  }

  #historyOpen,
  #goToAdminBtn,
  #logoutBtn{
    position: relative;
    z-index: 80;
    pointer-events: auto;
  }

  #tabs{
    z-index: 50;
    top: 360px;
    bottom: 20px;
    max-height: calc(100vh - 390px);
    pointer-events: auto;
  }

  #tabs button{
    pointer-events: auto;
  }
}

@media (min-width: 1101px) and (max-height: 820px){
  .brand-logo{
    width: 104px;
    height: 104px;
    flex-basis: 104px;
  }

  .brand{
    gap: 6px;
    padding-bottom: 6px;
  }

  #tabs{
    top: 320px;
    bottom: 16px;
    max-height: calc(100vh - 336px);
  }
}

@media (min-width: 1101px) and (max-height: 700px){
  .brand-logo{
    width: 84px;
    height: 84px;
    flex-basis: 84px;
  }

  .brand-text h1,
  header h1{
    font-size: 1.22rem;
  }

  .brand-text p,
  header p{
    display: none;
  }

  #tabs{
    top: 255px;
    bottom: 12px;
    max-height: calc(100vh - 267px);
  }
}


/* Version 2.0.9 – Sidebar Layout Fix
   Trennt Kopfbereich, Aktionsbuttons und Reiter sauber voneinander.
*/
@media (min-width: 1101px){

  header{
    width:290px;
    overflow-y:auto;
    overflow-x:hidden;
    padding:20px 14px;
  }

  .brand{
    position:relative;
    z-index:90;
    flex:0 0 auto;
    gap:6px;
    padding:0 4px 8px;
  }

  .brand-logo{
    width:92px;
    height:92px;
    flex-basis:92px;
  }

  .brand-text h1,
  header h1{
    font-size:1.18rem;
    line-height:1.08;
  }

  .brand-text p,
  header p{
    font-size:.82rem;
    margin-top:4px;
  }

  .top-actions{
    position:relative;
    z-index:95;
    flex:0 0 auto;
    display:flex;
    flex-direction:column;
    gap:7px;
    width:100%;
    margin:0 0 10px;
    padding:0 0 10px;
    border-bottom:1px solid rgba(255,255,255,.10);
    background:transparent;
  }

  #userInfo{
    min-height:34px;
    padding:7px 9px;
    font-size:.82rem;
  }

  #historyOpen,
  #goToAdminBtn,
  #logoutBtn{
    min-height:34px;
    padding:8px 10px;
    font-size:.86rem;
    border-radius:11px;
    position:relative;
    z-index:100;
    pointer-events:auto;
  }

  #tabs{
    position:fixed;
    z-index:70;
    left:14px;
    top:292px;
    bottom:16px;
    width:262px;
    max-height:calc(100vh - 308px);
    overflow-y:auto;
    overflow-x:hidden;
    display:flex;
    flex-direction:column;
    gap:6px;
    padding-right:4px;
    pointer-events:auto;
    scrollbar-width:thin;
    scrollbar-color:rgba(255,255,255,.35) transparent;
  }

  #tabs::-webkit-scrollbar{
    width:7px;
  }

  #tabs::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.30);
    border-radius:999px;
  }

  #tabs button{
    min-height:36px;
    padding:9px 11px;
    font-size:.84rem;
    line-height:1.18;
    border-radius:11px;
    flex:0 0 auto;
    white-space:normal;
    pointer-events:auto;
  }
}

/* Bei kleineren Höhen wird alles kompakter, damit nichts überlappt */
@media (min-width:1101px) and (max-height:760px){
  .brand-logo{
    width:72px;
    height:72px;
    flex-basis:72px;
  }

  .brand-text h1,
  header h1{
    font-size:1.05rem;
  }

  .brand-text p,
  header p{
    display:none;
  }

  #userInfo{
    min-height:30px;
    font-size:.78rem;
  }

  #historyOpen,
  #goToAdminBtn,
  #logoutBtn{
    min-height:30px;
    padding:6px 9px;
    font-size:.8rem;
  }

  #tabs{
    top:224px;
    bottom:12px;
    max-height:calc(100vh - 236px);
  }

  #tabs button{
    min-height:32px;
    padding:7px 10px;
    font-size:.79rem;
  }
}

/* Extrem niedrige Desktop-Höhen: gesamte Sidebar scrollbar, Reiter bleiben darunter */
@media (min-width:1101px) and (max-height:620px){
  header{
    overflow-y:auto;
  }

  #tabs{
    top:196px;
    bottom:10px;
    max-height:calc(100vh - 206px);
  }
}


/* Version 2.0.9 – Desktop: Verlauf/Admin/Abmelden unter die Reiter
   Mobile Darstellung bleibt unverändert.
*/
@media (min-width:1101px){

  header{
    width:290px;
    overflow:hidden;
    padding:20px 14px;
  }

  .brand{
    position:relative;
    z-index:90;
    flex:0 0 auto;
  }

  .brand-logo{
    width:92px;
    height:92px;
    flex-basis:92px;
  }

  .brand-text h1,
  header h1{
    font-size:1.18rem;
    line-height:1.08;
  }

  .brand-text p,
  header p{
    font-size:.82rem;
    margin-top:4px;
  }

  /* Reiterbereich: oben unter Logo/Überschrift, unten Platz für Buttons */
  #tabs{
    position:fixed;
    left:14px;
    top:210px;
    bottom:168px;
    width:262px;
    max-height:none;
    overflow-y:auto;
    overflow-x:hidden;
    display:flex;
    flex-direction:column;
    gap:6px;
    padding-right:4px;
    z-index:70;
    scrollbar-width:thin;
    scrollbar-color:rgba(255,255,255,.35) transparent;
  }

  #tabs button{
    flex:0 0 auto;
    min-height:36px;
    padding:9px 11px;
    font-size:.84rem;
    line-height:1.18;
    border-radius:11px;
    white-space:normal;
  }

  /* Aktionsbuttons: fest unterhalb der Reiter */
  .top-actions{
    position:fixed;
    left:14px;
    bottom:16px;
    width:262px;
    z-index:95;
    display:flex;
    flex-direction:column;
    gap:7px;
    margin:0;
    padding:10px 0 0;
    border-top:1px solid rgba(255,255,255,.12);
    background:linear-gradient(180deg,rgba(11,39,72,.10),rgba(11,39,72,.55));
  }

  #userInfo{
    min-height:32px;
    padding:6px 9px;
    font-size:.78rem;
  }

  #historyOpen,
  #goToAdminBtn,
  #logoutBtn{
    min-height:32px;
    padding:7px 10px;
    font-size:.8rem;
    border-radius:11px;
    pointer-events:auto;
  }
}

/* Niedrige Desktop-Höhen: Reiter stärker scrollbar, Buttons bleiben unten */
@media (min-width:1101px) and (max-height:760px){

  .brand-logo{
    width:76px;
    height:76px;
    flex-basis:76px;
  }

  .brand-text h1,
  header h1{
    font-size:1.05rem;
  }

  .brand-text p,
  header p{
    display:none;
  }

  #tabs{
    top:148px;
    bottom:150px;
  }

  .top-actions{
    bottom:10px;
  }

  #userInfo{
    display:none;
  }

  #historyOpen,
  #goToAdminBtn,
  #logoutBtn{
    min-height:30px;
    padding:6px 9px;
    font-size:.78rem;
  }
}

/* Mobile/Tablet bleibt wie bisher */
@media (max-width:1100px){
  .top-actions{
    position:static;
    left:auto;
    bottom:auto;
    width:auto;
    border-top:0;
    background:transparent;
  }
}


/* Version 2.0.9 – linkes Menü unterhalb von Logo/Text, ohne Überlagerung */
@media (min-width:1101px){
  .app{padding-left:326px;}
  header{width:290px;overflow:hidden;padding:24px 14px 18px;}
  .brand{position:relative;z-index:100;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:0 4px 18px;}
  .brand-logo{width:150px!important;height:150px!important;flex-basis:150px!important;object-fit:contain;}
  .brand-text h1, header h1{font-size:1.35rem;line-height:1.1;margin:0;}
  .brand-text p, header p{font-size:.86rem;line-height:1.28;margin-top:6px;}
  #tabs{position:fixed;left:14px;top:285px;bottom:168px;width:262px;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:6px;padding-right:4px;z-index:70;}
  #tabs button{flex:0 0 auto;min-height:36px;padding:9px 11px;font-size:.84rem;line-height:1.18;border-radius:11px;white-space:normal;}
  .top-actions{position:fixed;left:14px;bottom:16px;width:262px;z-index:95;display:flex;flex-direction:column;gap:7px;margin:0;padding:10px 0 0;border-top:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(11,39,72,.08),rgba(11,39,72,.58));}
  #userInfo{min-height:32px;padding:6px 9px;font-size:.78rem;}
  #historyOpen,#goToAdminBtn,#logoutBtn{min-height:32px;padding:7px 10px;font-size:.8rem;border-radius:11px;pointer-events:auto;}
}
@media (min-width:1101px) and (max-height:760px){
  .brand-text p, header p{display:none;}
  #tabs{top:235px;bottom:145px;}
  .top-actions{bottom:10px;}
  #userInfo{display:none;}
}
@media (max-width:1100px){
  .top-actions{position:static;left:auto;bottom:auto;width:auto;border-top:0;background:transparent;}
}


/* Version 2.0.9 – Adminstatus mittig und App-Menü tiefer */
.npc-admin-status-centered,
.app-meta-box.npc-admin-status-centered{
  justify-content:center !important;
  text-align:center !important;
}
.npc-admin-status-centered > div,
.app-meta-box.npc-admin-status-centered > div{
  text-align:center !important;
}

/* Mitarbeiterfrontend/Desktop: Navigation tiefer, damit Logo-Text nicht überlappt */
@media (min-width:1101px){
  #tabs{
    top:330px !important;
    bottom:168px !important;
  }
}

/* Bei niedrigen Desktop-Höhen weiterhin scrollfähig, aber ohne Überlappung */
@media (min-width:1101px) and (max-height:760px){
  #tabs{
    top:275px !important;
    bottom:145px !important;
  }
}

/* Mobile und Tablet bleiben unverändert */


/* Version 2.0.9 – Adminstatus, Lazy Fields, Backup Upload */
.npc-admin-status-centered,
.app-meta-box.npc-admin-status-centered{
  justify-content:center !important;
  text-align:center !important;
}
.npc-admin-status-centered > div,
.app-meta-box.npc-admin-status-centered > div{
  text-align:center !important;
}
.backup-upload-form{
  margin-top:18px;
  padding:16px;
  border:1px solid var(--border, #dce6f2);
  border-radius:16px;
  background:#f8fbff;
}


/* Version 2.0.9 - mobile doppelte Autorenzeile entfernen */
@media (max-width:1100px){
  .mobile-author,
  .author-mobile,
  .admin-author-duplicate,
  .app-meta-author-extra,
  [data-mobile-author]{
    display:none !important;
  }
}


/* Version 2.0.9 – Backuparten */
#backupType{
  max-width: 360px;
}


/* Version 2.0.9 – Automatische Sicherung */
#autoBackupForm h3{
  margin-top:0;
}
#autoBackupInfo{
  margin-top:12px;
  word-break:break-word;
}


/* Version 2.0.9 – Backupverwaltung Dashboard */
.npc-backup-section{
  padding:28px;
}
.npc-backup-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:18px;
}
.npc-backup-grid-bottom{
  align-items:start;
}
.npc-backup-card{
  border:1px solid var(--border, #dce6f2);
  border-radius:18px;
  background:#fff;
  padding:20px;
  box-shadow:0 10px 28px rgba(9,30,66,.06);
}
.npc-backup-card h3{
  margin:0 0 12px;
}
.npc-backup-create label,
.npc-auto-backup-card label{
  margin-bottom:14px;
}
.npc-backup-hint,
.npc-auto-status{
  margin-top:18px;
  padding:14px 16px;
  border:1px solid rgba(37,99,235,.16);
  border-radius:14px;
  background:#f4f8ff;
  color:#344b67;
}
.npc-file-drop{
  display:block;
  border:2px dashed #c3d5ea;
  border-radius:16px;
  padding:24px;
  text-align:center;
  background:#f8fbff;
  cursor:pointer;
}
.npc-file-drop input{
  margin-top:12px;
}
#backupStatus{
  margin:16px 0;
  font-weight:800;
  color:#1f3b63;
}
#backupList{
  margin-top:12px;
}
@media(max-width:980px){
  .npc-backup-grid{
    grid-template-columns:1fr;
  }
}