/* Reset small */
.aio-wrap { font-family: Inter, Roboto, "Segoe UI", Arial, sans-serif; padding: 20px; max-width: 980px; margin: 20px auto; }
/* Hero (visual only) */
.aio-hero { display:flex; align-items:center; gap:18px; background: linear-gradient(135deg,#071036 0%, #0b254a 100%); color:#e6f0ff; padding:18px 22px; border-radius:14px; box-shadow:0 8px 30px rgba(11,18,48,0.35); margin-bottom:18px; }
.aio-logo { font-weight:800; font-size:18px; background: linear-gradient(90deg,#00c2d6,#6b5bff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.aio-hero h1 { margin:0; font-size:20px; }
.aio-hero .sub { margin:4px 0 0; opacity:0.9; font-size:13px; }

/* Card */
.aio-card { background: linear-gradient(180deg,#07173a 0%, #081a3f 100%); border-radius:12px; padding:12px; box-shadow: 0 8px 30px rgba(4,10,30,0.4); color:#dbeafe; }
/* Tabs attached to the card (visually) */
.aio-tabs { display:flex; gap:8px; margin:8px; padding:6px; }
.aio-tab { background: transparent; border:1px solid rgba(255,255,255,0.06); color: #9fb9e7; padding:10px 14px; border-radius:10px; cursor:pointer; font-weight:700; transition: all .18s ease; }
.aio-tab:hover { transform: translateY(-3px); color:#fff; border-color: rgba(255,255,255,0.14); box-shadow: 0 8px 20px rgba(12,20,60,0.35); }
.aio-tab.active { background: linear-gradient(90deg,#06b6d4,#4f46e5); color:white; box-shadow:0 14px 30px rgba(7,12,40,0.5); transform:none; }

/* Panel area is inside the card so tabs appear attached to file box */
.aio-panel-area { padding: 16px; }
/* Each panel */
.aio-panel { background: linear-gradient(180deg,#071a3b 0%, #081c41 100%); border-radius:10px; padding:18px; margin-bottom:6px; display:block; color:#dbeafe; box-shadow: inset 0 1px 0 rgba(255,255,255,0.02); }
.aio-panel[hidden] { display:none; }

/* File box (dropzone-like) */
.file-box { display:block; border-radius:10px; overflow:hidden; cursor:pointer; border:1px dashed rgba(255,255,255,0.06); padding:10px; }
.file-box input[type="file"] { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.file-box-inner { display:flex; gap:14px; align-items:center; }
.file-icon { font-size:30px; width:64px; height:64px; background: linear-gradient(135deg,#0ea5a6,#4f46e5); border-radius:10px; display:flex; align-items:center; justify-content:center; color:white; box-shadow: 0 10px 30px rgba(12,20,60,0.5); }
.file-meta { flex:1; }
.file-title { font-weight:700; color:#ffffff; font-size:16px; }
.file-sub { font-size:13px; color: #bfd8ff; opacity:0.9; margin-top:4px; }
.file-action { background: rgba(255,255,255,0.04); color:#dbeafe; padding:8px 12px; border-radius:8px; font-weight:700; }

.aio-row { display:flex; gap:12px; margin-top:12px; }
.select-inline { color: #cfe8ff; font-weight:600; }
.aio-select { margin-left:8px; padding:6px 8px; border-radius:8px; border:1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.02); color:#e6f0ff; }

.aio-actions { margin-top:14px; }
.aio-btn { background: linear-gradient(90deg,#06b6d4,#4f46e5); color:white; border:0; padding:10px 16px; border-radius:8px; cursor:pointer; font-weight:800; }
.aio-result { margin-top:12px; color:#bfe3ff; min-height:22px; }

/* Small responsive */
@media (max-width: 720px) {
  .aio-hero { flex-direction:column; text-align:center; padding:14px; }
  .aio-tabs { flex-wrap:wrap; justify-content:center; }
  .aio-row { flex-direction:column; }
}