/* NutriAile - Layout: Header, Tabs, Panels */
#api-screen{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:2rem}
.api-card{background:var(--bg-primary);border-radius:var(--radius-xl);padding:2.5rem;max-width:460px;width:100%;box-shadow:0 4px 24px rgba(0,0,0,.08)}
.api-logo{width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem}
.api-card h1{font-size:23px;font-weight:600;letter-spacing:-.4px;margin-bottom:.3rem}
.api-card p{font-size:14px;color:var(--text-secondary);line-height:1.6;margin-bottom:1.5rem}
.api-steps{background:var(--bg-secondary);border-radius:var(--radius-md);padding:1rem 1.25rem;margin-bottom:1.5rem;font-size:13px;color:var(--text-secondary);line-height:1.8}
.api-steps b{color:var(--text-primary)}
.api-steps a{color:#1D9E75;text-decoration:none}
.api-steps a:hover{text-decoration:underline}
.api-input-row{display:flex;gap:8px}
.api-input-row input{flex:1;width:100%;padding:10px 14px;border:1px solid var(--border-mid);border-radius:var(--radius-md);font-size:14px}
.api-input-row input:focus{outline:none;border-color:#1D9E75}
.api-btn{padding:10px 20px;background:#1D9E75;color:white;border:none;border-radius:var(--radius-md);font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap}
.api-btn:hover{opacity:.88}
.api-note{font-size:12px;color:var(--text-tertiary);margin-top:.75rem;line-height:1.6}
#app{display:none;max-width:920px;margin:0 auto;padding:0 1rem 3rem}
.hdr{display:flex;align-items:center;gap:14px;padding:1.25rem 0 1rem;border-bottom:1px solid var(--border-light);margin-bottom:0;flex-wrap:wrap}
.logo{width:42px;height:42px;border-radius:11px;background:#1D9E75;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.app-name{font-size:20px;font-weight:600;letter-spacing:-.4px}
.app-sub{font-size:13px;color:var(--text-secondary);margin-top:1px}
.hdr-right{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ver-badge{font-size:12px;padding:4px 10px;border:1px solid var(--border-light);border-radius:20px;color:var(--text-secondary);background:var(--bg-secondary);cursor:pointer;font-family:inherit;font-weight:600;transition:all .15s}
.ver-badge:hover{background:var(--bg-tertiary);color:var(--text-primary)}
.save-ind{font-size:12px;color:#1D9E75;display:flex;align-items:center;gap:4px;opacity:0;transition:opacity .3s}
.save-ind.show{opacity:1}
.save-ind.saving{opacity:1;color:var(--text-tertiary)}
.api-key-btn{font-size:12px;padding:4px 10px;border:1px solid var(--border-light);border-radius:20px;color:var(--text-secondary);background:var(--bg-secondary);cursor:pointer}
.api-key-btn:hover{background:var(--bg-tertiary)}
.backup-btn{font-size:12px;padding:4px 10px;border:1px solid var(--border-light);border-radius:20px;cursor:pointer;display:flex;align-items:center;gap:4px;white-space:nowrap}
.backup-export{background:#E1F5EE;color:#085041;border-color:#9FE1CB}
.backup-export:hover{background:#C6ECD9}
.backup-import{background:#E6F1FB;color:#042C53;border-color:#B5D4F4}
.backup-import:hover{background:#C3D9F1}
.tab-area{padding:1.25rem 0 0}
.tabrow{display:flex;align-items:flex-end;gap:4px}
.ftab{flex:1;position:relative;min-height:44px;padding:0 12px;font-size:14px;font-weight:500;cursor:pointer;border:1px solid var(--border-mid);border-bottom:none;border-radius:8px 8px 0 0;display:flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap;transition:background .15s;background:var(--bg-secondary);color:var(--text-tertiary);text-decoration:none;-webkit-text-decoration:none}
.ftab:hover{background:var(--bg-primary);color:var(--text-primary)}
.ftab.act-0{background:#E1F5EE;border-color:#9FE1CB;color:#085041;min-height:47px;z-index:3;box-shadow:0 2px 0 0 #E1F5EE}
.ftab.act-1{background:#E6F1FB;border-color:#B5D4F4;color:#042C53;min-height:47px;z-index:3;box-shadow:0 2px 0 0 #E6F1FB}
.ftab.act-2{background:#FAEEDA;border-color:#FAC775;color:#412402;min-height:47px;z-index:3;box-shadow:0 2px 0 0 #FAEEDA}
.ftab.act-3{background:#EEEDFE;border-color:#AFA9EC;color:#26215C;min-height:47px;z-index:3;box-shadow:0 2px 0 0 #EEEDFE}
.del-btn{position:absolute;top:-8px;right:-7px;width:18px;height:18px;border-radius:50%;background:var(--bg-secondary);border:1px solid var(--border-mid);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--text-secondary);cursor:pointer;opacity:0;transition:opacity .15s;z-index:10}
.ftab:hover .del-btn{opacity:1}
.del-btn:hover{background:#FCEBEB;border-color:#F09595;color:#791F1F}
.add-tab{flex:0;width:44px;height:44px;background:var(--bg-secondary);border:1px solid var(--border-mid);border-bottom:none;border-radius:8px 8px 0 0;display:flex;align-items:center;justify-content:center;font-size:23px;color:var(--text-tertiary);cursor:pointer;transition:background .15s}
.add-tab:hover{background:var(--bg-primary);color:var(--text-primary)}
.role-s{font-size:12px;font-weight:400;opacity:.6}
.status-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.pane-wrap{border:1px solid var(--border-mid);border-radius:0 0 14px 14px;overflow:hidden;position:relative;z-index:2}
.pane-wrap.col-0{background:#E1F5EE;border-color:#9FE1CB;--pane-bg:#E1F5EE}
.pane-wrap.col-1{background:#E6F1FB;border-color:#B5D4F4;--pane-bg:#E6F1FB}
.pane-wrap.col-2{background:#FAEEDA;border-color:#FAC775;--pane-bg:#FAEEDA}
.pane-wrap.col-3{background:#EEEDFE;border-color:#AFA9EC;--pane-bg:#EEEDFE}
.pane{display:none;padding:1.5rem}.pane.active{display:block}
.sub-tabs-wrap{position:relative;margin-bottom:1.25rem}
.sub-tabs-wrap::after{content:'';position:absolute;right:0;top:0;bottom:1px;width:32px;background:linear-gradient(to right,transparent,var(--pane-bg,#fff));pointer-events:none;z-index:1}
.sub-tabs{display:flex;border-bottom:1px solid var(--border-light);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sub-tabs::-webkit-scrollbar{display:none}
.stab{padding:9px 13px;font-size:13px;font-weight:500;cursor:pointer;border:none;background:none;color:var(--text-secondary);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;flex-shrink:0}
.stab:hover{color:var(--text-primary)}
.stab.sa0{color:#1D9E75;border-bottom-color:#1D9E75}
.stab.sa1{color:#378ADD;border-bottom-color:#378ADD}
.stab.sa2{color:#BA7517;border-bottom-color:#BA7517}
.stab.sa3{color:#7F77DD;border-bottom-color:#7F77DD}
.sub-pane{display:none}.sub-pane.active{display:block}
@media(max-width:600px){
  .hdr{gap:8px;padding:1rem 0 .75rem}
  .hdr-right{margin-left:0;width:100%;gap:6px 8px;justify-content:center;order:3;flex-wrap:wrap}
  .ver-badge,.theme-btn,.backup-btn,.api-key-btn{font-size:11px;padding:4px 10px;border-radius:16px;line-height:1.3}
  .app-name{font-size:17px}
  .app-sub{font-size:11px}
  .ftab{font-size:12px;padding:0 6px;min-height:36px;-webkit-appearance:none;appearance:none;text-decoration:none !important}
  .ftab.act-0,.ftab.act-1,.ftab.act-2,.ftab.act-3{min-height:39px}
  .stab{padding:8px 10px;font-size:12px}
}