:root{
    --bg:#0D0F12;
    --surface1:#141820;
    --surface2:#1B2230;
    --divider:#242B3A;
  
    --orange:#FF7A18;
    --orangePressed:#E8680A;
  
    --t1:#EDEFF4;
    --t2:#AAB2C0;
    --t3:#70798A;
  
    --r14:14px;
    --r16:16px;
  }
  
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    background:var(--bg);
    color:var(--t1);
  }
  
  .app{min-height:100%;display:flex;flex-direction:column}
  
  .topbar{
    position:sticky;top:0;z-index:10;
    background:rgba(13,15,18,0.92);
    backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(36,43,58,0.7);
    padding:14px 16px;
    display:flex;align-items:center;justify-content:space-between;
  }
  
  .brand{display:flex;gap:12px;align-items:center}
  .logo{
    width:40px;height:40px;border-radius:12px;
    background:rgba(255,122,24,0.16);
    display:flex;align-items:center;justify-content:center;
    color:var(--orange);
    font-weight:800;letter-spacing:0.5px;
  }
  .titles .name{font-weight:700;font-size:16px}
  .titles .tag{color:var(--t2);font-size:13px;margin-top:2px}
  
  .main{flex:1;padding:16px 16px 92px}
  
  .card{
    background:var(--surface1);
    border:1px solid rgba(36,43,58,0.9);
    border-radius:var(--r14);
    padding:16px;
    margin-bottom:14px;
  }
  
  .cardTitle{font-weight:800;margin-bottom:6px}
  .muted{color:var(--t2);line-height:1.35}
  .small{font-size:12px;color:var(--t3)}
  .full{width:100%}
  
  .cardRow{display:flex;align-items:center;justify-content:space-between;gap:12px}
  
  .actions{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
  
  .btn{
    height:52px;padding:0 14px;border-radius:var(--r16);
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    font-weight:800;border:1px solid transparent;
    user-select:none;-webkit-tap-highlight-color:transparent;
  }
  .btn.primary{background:var(--orange);color:rgba(0,0,0,0.9)}
  .btn.primary:active{background:var(--orangePressed)}
  .btn.secondary{
    background:var(--surface2);
    border-color:rgba(36,43,58,0.9);
    color:var(--t1);
  }
  .btn.secondary:active{opacity:0.92}
  .btn[disabled]{opacity:0.45}
  
  .ghost{
    height:40px;padding:0 12px;border-radius:12px;
    border:1px solid rgba(36,43,58,0.9);
    background:var(--surface2);
    color:var(--t1);font-weight:800;
  }
  .ghost:active{opacity:0.92}
  
  input[type="file"]{display:none}
  
  .list{margin-top:12px;display:flex;flex-direction:column;gap:10px}
  .fileRow{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:10px 12px;background:rgba(27,34,48,0.55);
    border:1px solid rgba(36,43,58,0.8);
    border-radius:12px;
  }
  .fileName{
    flex:1;color:var(--t2);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .checkbox{width:20px;height:20px;accent-color:var(--orange)}
  
  .hint{
    margin-top:12px;padding:12px;border-radius:12px;
    border:1px solid rgba(36,43,58,0.9);
    background:rgba(255,122,24,0.08);
    color:var(--t2);line-height:1.35;
  }
  
  .chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
  .chip{
    padding:10px 12px;border-radius:999px;
    border:1px solid rgba(36,43,58,0.9);
    background:var(--surface2);
    color:var(--t2);
    font-weight:900;
  }
  .chip.active{
    background:rgba(255,122,24,0.16);
    border-color:rgba(255,122,24,0.55);
    color:var(--orange);
  }
  
  .log{
    font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
    font-size:12px;color:var(--t2);
    display:flex;flex-direction:column;gap:8px;margin-top:10px;
  }
  .logLine{line-height:1.3;color:var(--t2)}
  
  .tabbar{
    position:fixed;left:0;right:0;bottom:0;
    background:var(--surface1);
    border-top:1px solid rgba(36,43,58,0.9);
    display:flex;height:72px;
    padding:8px 10px calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .tab{
    flex:1;border:0;background:transparent;color:var(--t3);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
    font-weight:900;
  }
  .tabIcon{font-size:18px;line-height:1}
  .tabLabel{font-size:12px}
  .tab.active{color:var(--orange)}
  .hidden{display:none}
  
  /* Batch UI */
  .grid2{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
  }
  @media (min-width: 760px){
    .grid2{grid-template-columns:1fr 1fr}
  }
  .panel{
    background:rgba(27,34,48,0.55);
    border:1px solid rgba(36,43,58,0.9);
    border-radius:14px;
    padding:12px;
  }
  .panelTitle{font-weight:900;margin-bottom:6px}
  
  .tableWrap{
    overflow:auto;
    border-radius:14px;
    border:1px solid rgba(36,43,58,0.9);
    margin-top:12px;
  }
  .table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    min-width:720px;
    background:rgba(27,34,48,0.35);
  }
  .table thead th{
    position:sticky;top:0;
    background:rgba(20,24,32,0.98);
    color:var(--t2);
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:0.06em;
    padding:10px 10px;
    border-bottom:1px solid rgba(36,43,58,0.9);
  }
  .table tbody td{
    padding:10px 10px;
    border-bottom:1px solid rgba(36,43,58,0.55);
    color:var(--t2);
    vertical-align:middle;
  }
  .table tbody tr:last-child td{border-bottom:0}
  
  .rowInput{
    height:38px;
    padding:0 10px;
    border-radius:10px;
    border:1px solid rgba(36,43,58,0.9);
    background:var(--surface2);
    color:var(--t1);
    width:220px;
  }
  .rowTiny{
    font-size:12px;
    color:var(--t3);
    max-width:260px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .rowActions{display:flex;gap:8px;align-items:center}
  .iconBtn{
    height:36px;min-width:36px;
    border-radius:10px;
    border:1px solid rgba(36,43,58,0.9);
    background:var(--surface2);
    color:var(--t1);
    font-weight:900;
  }
  .iconBtn:active{opacity:0.92}